diff --git a/.circleci/config.yml b/.circleci/config.yml index 09ce517007904b..8287b3277ee4d0 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -139,12 +139,6 @@ jobs: steps: - checkout - install-deps - - run: - name: Transpile TypeScript demos - command: pnpm docs:typescript:formatted - - run: - name: '`pnpm docs:typescript:formatted` changes committed?' - command: git add -A && git diff --exit-code --staged - run: name: Tests TypeScript definitions command: pnpm typescript:ci diff --git a/AGENTS.md b/AGENTS.md index c88dd59c25d286..82b29f093ff3ae 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -58,12 +58,39 @@ pnpm proptypes && pnpm docs:api ### Docs demos -Always author the TypeScript version of the demos. To generate the JavaScript variant, run: +Demos live next to their page under `docs/data//components//demos//`. Each demo folder contains three files: -```bash -pnpm docs:typescript:formatted +- `.tsx` — the demo source, authored as TypeScript (`.tsx`). +- `client.ts` — marks the demo's client boundary: + + ```ts + 'use client'; + + import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + + export default createDemoClient(import.meta.url); + ``` + +- `index.ts` — wires the demo into the docs pipeline: + + ```ts + import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + import ClientProvider from './client'; + import BasicButtons from './BasicButtons'; + + export default createDemo(import.meta.url, BasicButtons, { ClientProvider }); + ``` + +Reference the demo from the page's markdown via the `component` field. Use a `file://` URL with a path relative to the markdown file: + +```md +{{"component": "file://./demos/basic/index.ts"}} ``` +Demo options (`bg`, `hideToolbar`, `isolated`, `iframe`, `defaultCodeOpen`, `maxWidth`, `height`, `disableAd`, `disableLiveEdit`, `hideEditButton`, `aiSuggestion`, `anchorId`) are defined by the `DemoOptions` interface in `packages-internal/core-docs/src/DemoContent/DemoContent.tsx`. Use `{/* @focus-start */}` / `{/* @focus-end */}` JSX comments inside the demo to highlight regions in the rendered code viewer. + +The demo infrastructure itself is documented at . + ## Architecture This is a monorepo managed by Lerna with Nx for caching. Key packages: @@ -228,8 +255,7 @@ Read the relevant `AGENTS.md` when helping users with those topics. 3. `pnpm typescript` - Pass type checking 4. `pnpm test:unit` - Pass unit tests 5. If API changed: `pnpm proptypes && pnpm docs:api` -6. If demos changed: `pnpm docs:typescript:formatted` -7. If `.md` files changed: `pnpm vale ...` - Check prose style and grammar +6. If `.md` files changed: `pnpm vale ...` - Check prose style and grammar ## PR Title Format diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 3cd40341f07a8a..90f6cb1a936b2d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -14,11 +14,28 @@ Here are a few guidelines that will help you along the way. - [Trying changes on the playground](#trying-changes-on-the-playground) - [How to increase the chances of being accepted](#how-to-increase-the-chances-of-being-accepted) - [CI checks and how to fix them](#ci-checks-and-how-to-fix-them) + - [Continuous Releases](#continuous-releases) + - [ci/circleci: checkout](#cicircleci-checkout) + - [ci/circleci: test_static](#cicircleci-test_static) + - [ci/circleci: test_unit-1](#cicircleci-test_unit-1) + - [ci/circleci: test_browser](#cicircleci-test_browser) + - [ci/circleci: test_regressions](#cicircleci-test_regressions) + - [ci/circleci: test_types](#cicircleci-test_types) + - [ci/circleci: test_bundle_size_monitor](#cicircleci-test_bundle_size_monitor) + - [argos](#argos) + - [deploy/netlify](#deploynetlify) + - [codecov/project](#codecovproject) + - [Misc](#misc) - [Updating the component API documentation](#updating-the-component-api-documentation) - [Coding style](#coding-style) - [Contributing to the documentation](#contributing-to-the-documentation) - [How to find docs issues to work on](#how-to-find-docs-issues-to-work-on) - [How to add a new demo to the docs](#how-to-add-a-new-demo-to-the-docs) + - [1. Create the demo folder](#1-create-the-demo-folder) + - [2. Write the demo code](#2-write-the-demo-code) + - [3. Add `client.ts` and `index.ts`](#3-add-clientts-and-indexts) + - [4. Reference the demo from Markdown](#4-reference-the-demo-from-markdown) + - [5. Submit your PR](#5-submit-your-pr) - [How can I use a change that hasn't been released yet?](#how-can-i-use-a-change-that-hasnt-been-released-yet) - [Roadmap](#roadmap) - [License](#license) @@ -162,7 +179,6 @@ The following statements must be true: - The code is linted. If the code was changed, run `pnpm eslint`. - The code is type-safe. If TypeScript sources or declarations were changed, run `pnpm typescript` to confirm that the check passes. - The API docs are up to date. If API was changed, run `pnpm proptypes && pnpm docs:api`. -- The demos are up to date. If demos were changed, run `pnpm docs:typescript:formatted`. See [about writing demos](#2-write-the-demo-code). - The pull request title follows the pattern `[product-name][Component] Imperative commit message`. (See: [How to Write a Git Commit Message](https://chris.beams.io/posts/git-commit/) for a great explanation). Don't worry if you miss a step—the Continuous Integration will run a thorough set of tests on your commits, and the maintainers of the project can assist you if you run into problems. @@ -286,47 +302,69 @@ Or [follow this link directly to the results of that search](https://github.com/ ### How to add a new demo to the docs -The following steps explain how to add a new demo to the docs using the Button component as an example: +Demos are powered by [`@mui/internal-docs-infra`](https://mui-internal.netlify.app/docs-infra/). The following steps explain how to add a new demo using the Button component as an example. -#### 1. Add a new component file to the directory +#### 1. Create the demo folder -Add the new file to the component's corresponding directory: +Each demo lives in its own kebab-cased folder next to the component's markdown page: ```bash -docs/src/pages/components/buttons/ +docs/data/material/components/buttons/demos/super/ ``` -and give it a name: how about `SuperButtons.tsx`? - #### 2. Write the demo code -We use TypeScript to document our components. -We prefer demos written in TypeScript (using the `.tsx` file format). +Demos are authored as TypeScript (`.tsx`). + +```tsx +// docs/data/material/components/buttons/demos/super/SuperButtons.tsx +import * as React from 'react'; +import Button from '@mui/material/Button'; + +export default function SuperButtons() { + return ; +} +``` + +Use `{/* @focus-start */}` / `{/* @focus-end */}` JSX comments inside the demo to highlight regions in the rendered code viewer. + +#### 3. Add `client.ts` and `index.ts` -After creating a TypeScript demo, run `pnpm docs:typescript:formatted` to automatically create the JavaScript version, which is also required. +```ts +// docs/data/material/components/buttons/demos/super/client.ts +'use client'; -If you're not familiar with TypeScript, you can write the demo in JavaScript, and a core contributor may help you migrate it to TypeScript. +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; -#### 3. Edit the page's Markdown file +export default createDemoClient(import.meta.url); +``` + +```ts +// docs/data/material/components/buttons/demos/super/index.ts +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; +import ClientProvider from './client'; +import SuperButtons from './SuperButtons'; + +export default createDemo(import.meta.url, SuperButtons, { ClientProvider }); +``` -The Markdown file in the component's respective folder—in this case, `/buttons/buttons.md`—is the source of content for the document. -Any changes you make there will be reflected on the website. +#### 4. Reference the demo from Markdown -Add a header and a brief description of the demo and its use case, along with the `"demo"` code snippet to inject it into the page: +The Markdown file in the component's respective folder—in this case, `buttons.md`—is the source of content for the document. The `component` field is a `file://` URL relative to the Markdown file: ```diff +### Super buttons + +To create a super button for a specific use case, add the `super` prop: + -+{{"demo": "pages/components/buttons/SuperButtons.js"}} ++{{"component": "file://./demos/super/index.ts"}} ``` -#### 4. Submit your PR +Demo options (`bg`, `hideToolbar`, `isolated`, `iframe`, `defaultCodeOpen`, `maxWidth`, `height`, `disableAd`, `disableLiveEdit`, `hideEditButton`, `aiSuggestion`, `anchorId`) are defined by the `DemoOptions` interface in [`packages-internal/core-docs/src/DemoContent/DemoContent.tsx`](packages-internal/core-docs/src/DemoContent/DemoContent.tsx). See the [demo variants experiment page](docs/pages/experiments/docs/demos.md) for live examples. -Now you're ready to [open a PR](#sending-a-pull-request) to add your new demo to the docs. +#### 5. Submit your PR -Check out [this Toggle Button demo PR](https://github.com/mui/material-ui/pull/19582/files) for an example of what your new and edited files should look like when opening your own demo PR. +Now you're ready to [open a PR](#sending-a-pull-request) to add your new demo to the docs. ## How can I use a change that hasn't been released yet? diff --git a/docs/data/material/components/accordion/AccordionExpandDefault.js b/docs/data/material/components/accordion/AccordionExpandDefault.js deleted file mode 100644 index c045b66a3ed68d..00000000000000 --- a/docs/data/material/components/accordion/AccordionExpandDefault.js +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import Accordion from '@mui/material/Accordion'; -import AccordionSummary from '@mui/material/AccordionSummary'; -import AccordionDetails from '@mui/material/AccordionDetails'; -import Typography from '@mui/material/Typography'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; - -export default function AccordionExpandDefault() { - const id = React.useId(); - return ( -
- - } - aria-controls={`${id}-panel1-content`} - id={`${id}-panel1-header`} - > - Expanded by default - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - } - aria-controls={`${id}-panel2-content`} - id={`${id}-panel2-header`} - > - Header - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - -
- ); -} diff --git a/docs/data/material/components/accordion/AccordionExpandIcon.js b/docs/data/material/components/accordion/AccordionExpandIcon.js deleted file mode 100644 index 459816b921a056..00000000000000 --- a/docs/data/material/components/accordion/AccordionExpandIcon.js +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Accordion from '@mui/material/Accordion'; -import AccordionSummary from '@mui/material/AccordionSummary'; -import AccordionDetails from '@mui/material/AccordionDetails'; -import Typography from '@mui/material/Typography'; -import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; -import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; - -export default function AccordionExpandIcon() { - const id = React.useId(); - return ( -
- - } - aria-controls={`${id}-panel1-content`} - id={`${id}-panel1-header`} - > - Accordion 1 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - } - aria-controls={`${id}-panel2-content`} - id={`${id}-panel2-header`} - > - Accordion 2 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - -
- ); -} diff --git a/docs/data/material/components/accordion/AccordionTransition.js b/docs/data/material/components/accordion/AccordionTransition.js deleted file mode 100644 index 3dd5ca18842b80..00000000000000 --- a/docs/data/material/components/accordion/AccordionTransition.js +++ /dev/null @@ -1,77 +0,0 @@ -import * as React from 'react'; -import Accordion, { accordionClasses } from '@mui/material/Accordion'; -import AccordionSummary from '@mui/material/AccordionSummary'; -import AccordionDetails, { - accordionDetailsClasses, -} from '@mui/material/AccordionDetails'; -import Typography from '@mui/material/Typography'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import Fade from '@mui/material/Fade'; - -export default function AccordionTransition() { - const id = React.useId(); - const [expanded, setExpanded] = React.useState(false); - - const handleExpansion = () => { - setExpanded((prevExpanded) => !prevExpanded); - }; - - return ( -
- - } - aria-controls={`${id}-panel1-content`} - id={`${id}-panel1-header`} - > - Custom transition using Fade - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - } - aria-controls={`${id}-panel2-content`} - id={`${id}-panel2-header`} - > - Default transition using Collapse - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - -
- ); -} diff --git a/docs/data/material/components/accordion/AccordionUsage.js b/docs/data/material/components/accordion/AccordionUsage.js deleted file mode 100644 index 26deb503ece3f5..00000000000000 --- a/docs/data/material/components/accordion/AccordionUsage.js +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import Accordion from '@mui/material/Accordion'; -import AccordionActions from '@mui/material/AccordionActions'; -import AccordionSummary from '@mui/material/AccordionSummary'; -import AccordionDetails from '@mui/material/AccordionDetails'; -import Typography from '@mui/material/Typography'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import Button from '@mui/material/Button'; - -export default function AccordionUsage() { - const id = React.useId(); - return ( -
- - } - aria-controls={`${id}-panel1-content`} - id={`${id}-panel1-header`} - > - Accordion 1 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - } - aria-controls={`${id}-panel2-content`} - id={`${id}-panel2-header`} - > - Accordion 2 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - } - aria-controls={`${id}-panel3-content`} - id={`${id}-panel3-header`} - > - Accordion Actions - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - - -
- ); -} diff --git a/docs/data/material/components/accordion/ControlledAccordions.js b/docs/data/material/components/accordion/ControlledAccordions.js deleted file mode 100644 index d9a0067cb62a5b..00000000000000 --- a/docs/data/material/components/accordion/ControlledAccordions.js +++ /dev/null @@ -1,97 +0,0 @@ -import * as React from 'react'; -import Accordion from '@mui/material/Accordion'; -import AccordionDetails from '@mui/material/AccordionDetails'; -import AccordionSummary from '@mui/material/AccordionSummary'; -import Typography from '@mui/material/Typography'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; - -export default function ControlledAccordions() { - const [expanded, setExpanded] = React.useState(false); - - const handleChange = (panel) => (event, isExpanded) => { - setExpanded(isExpanded ? panel : false); - }; - - return ( -
- - } - aria-controls="panel1bh-content" - id="panel1bh-header" - > - - General settings - - - I am an accordion - - - - - Nulla facilisi. Phasellus sollicitudin nulla et quam mattis feugiat. - Aliquam eget maximus est, id dignissim quam. - - - - - } - aria-controls="panel2bh-content" - id="panel2bh-header" - > - - Users - - - You are currently not an owner - - - - - Donec placerat, lectus sed mattis semper, neque lectus feugiat lectus, - varius pulvinar diam eros in elit. Pellentesque convallis laoreet - laoreet. - - - - - } - aria-controls="panel3bh-content" - id="panel3bh-header" - > - - Advanced settings - - - Filtering has been entirely disabled for whole web server - - - - - Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit - amet egestas eros, vitae egestas augue. Duis vel est augue. - - - - - } - aria-controls="panel4bh-content" - id="panel4bh-header" - > - - Personal data - - - - - Nunc vitae orci ultricies, auctor nunc in, volutpat nisl. Integer sit - amet egestas eros, vitae egestas augue. Duis vel est augue. - - - -
- ); -} diff --git a/docs/data/material/components/accordion/CustomizedAccordions.js b/docs/data/material/components/accordion/CustomizedAccordions.js deleted file mode 100644 index 0390578a7d5c2d..00000000000000 --- a/docs/data/material/components/accordion/CustomizedAccordions.js +++ /dev/null @@ -1,98 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp'; -import MuiAccordion from '@mui/material/Accordion'; -import MuiAccordionSummary, { - accordionSummaryClasses, -} from '@mui/material/AccordionSummary'; -import MuiAccordionDetails from '@mui/material/AccordionDetails'; -import Typography from '@mui/material/Typography'; - -const Accordion = styled((props) => ( - -))(({ theme }) => ({ - border: `1px solid ${theme.palette.divider}`, - '&:not(:last-child)': { - borderBottom: 0, - }, - '&::before': { - display: 'none', - }, -})); - -const AccordionSummary = styled((props) => ( - } - {...props} - /> -))(({ theme }) => ({ - backgroundColor: 'rgba(0, 0, 0, .03)', - flexDirection: 'row-reverse', - [`& .${accordionSummaryClasses.expandIconWrapper}.${accordionSummaryClasses.expanded}`]: - { - transform: 'rotate(90deg)', - }, - [`& .${accordionSummaryClasses.content}`]: { - marginLeft: theme.spacing(1), - }, - ...theme.applyStyles('dark', { - backgroundColor: 'rgba(255, 255, 255, .05)', - }), -})); - -const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({ - padding: theme.spacing(2), - borderTop: '1px solid rgba(0, 0, 0, .125)', -})); - -export default function CustomizedAccordions() { - const [expanded, setExpanded] = React.useState('panel1'); - - const handleChange = (panel) => (event, newExpanded) => { - setExpanded(newExpanded ? panel : false); - }; - - return ( -
- - - Collapsible Group Item #1 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor - sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, - sit amet blandit leo lobortis eget. - - - - - - Collapsible Group Item #2 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor - sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, - sit amet blandit leo lobortis eget. - - - - - - Collapsible Group Item #3 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. Lorem ipsum dolor - sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, - sit amet blandit leo lobortis eget. - - - -
- ); -} diff --git a/docs/data/material/components/accordion/DisabledAccordion.js b/docs/data/material/components/accordion/DisabledAccordion.js deleted file mode 100644 index ef1cf954db88f2..00000000000000 --- a/docs/data/material/components/accordion/DisabledAccordion.js +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from 'react'; -import Accordion from '@mui/material/Accordion'; -import AccordionSummary from '@mui/material/AccordionSummary'; -import AccordionDetails from '@mui/material/AccordionDetails'; -import Typography from '@mui/material/Typography'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; - -export default function DisabledAccordion() { - const id = React.useId(); - return ( -
- - } - aria-controls={`${id}-panel1-content`} - id={`${id}-panel1-header`} - > - Accordion 1 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - } - aria-controls={`${id}-panel2-content`} - id={`${id}-panel2-header`} - > - Accordion 2 - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - - } - aria-controls={`${id}-panel3-content`} - id={`${id}-panel3-header`} - > - Disabled Accordion - - -
- ); -} diff --git a/docs/data/material/components/accordion/accordion.md b/docs/data/material/components/accordion/accordion.md index a342c0df8489d4..6983731b38e1da 100644 --- a/docs/data/material/components/accordion/accordion.md +++ b/docs/data/material/components/accordion/accordion.md @@ -23,7 +23,7 @@ The Material UI Accordion component includes several complementary utility comp - Accordion Details: the wrapper for the Accordion content. - Accordion Actions: an optional wrapper that groups a set of buttons. -{{"demo": "AccordionUsage.js", "bg": true}} +{{"component": "file://./demos/usage/index.ts", "bg": true}} :::info This component is no longer documented in the [Material Design guidelines](https://m2.material.io/), but Material UI will continue to support it. @@ -42,31 +42,31 @@ import AccordionSummary from '@mui/material/AccordionSummary'; Use the `expandIcon` prop on the Accordion Summary component to change the expand indicator icon. The component handles the turning upside-down transition automatically. -{{"demo": "AccordionExpandIcon.js", "bg": true}} +{{"component": "file://./demos/expand-icon/index.ts", "bg": true}} ### Expanded by default Use the `defaultExpanded` prop on the Accordion component to have it opened by default. -{{"demo": "AccordionExpandDefault.js", "bg": true}} +{{"component": "file://./demos/expand-default/index.ts", "bg": true}} ### Transition Use the `slots.transition` and `slotProps.transition` props to change the Accordion's default transition. -{{"demo": "AccordionTransition.js", "bg": true}} +{{"component": "file://./demos/transition/index.ts", "bg": true}} ### Disabled item Use the `disabled` prop on the Accordion component to disable interaction and focus. -{{"demo": "DisabledAccordion.js", "bg": true}} +{{"component": "file://./demos/disabled/index.ts", "bg": true}} ### Controlled Accordion The Accordion component can be controlled or uncontrolled. -{{"demo": "ControlledAccordions.js", "bg": true}} +{{"component": "file://./demos/controlled/index.ts", "bg": true}} :::info @@ -83,7 +83,7 @@ Learn more about controlled and uncontrolled components in the [React documentat Use the `expanded` prop with React's `useState` hook to allow only one Accordion item to be expanded at a time. The demo below also shows a bit of visual customization. -{{"demo": "CustomizedAccordions.js", "bg": true}} +{{"component": "file://./demos/customized/index.ts", "bg": true}} ### Changing heading level diff --git a/docs/data/material/components/accordion/ControlledAccordions.tsx b/docs/data/material/components/accordion/demos/controlled/ControlledAccordions.tsx similarity index 98% rename from docs/data/material/components/accordion/ControlledAccordions.tsx rename to docs/data/material/components/accordion/demos/controlled/ControlledAccordions.tsx index 1eaa7c910ea988..37bce9a51674d5 100644 --- a/docs/data/material/components/accordion/ControlledAccordions.tsx +++ b/docs/data/material/components/accordion/demos/controlled/ControlledAccordions.tsx @@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; export default function ControlledAccordions() { + // @focus-start @padding 1 const [expanded, setExpanded] = React.useState(false); const handleChange = @@ -95,4 +96,5 @@ export default function ControlledAccordions() { ); + // @focus-end } diff --git a/docs/data/material/components/accordion/demos/controlled/client.ts b/docs/data/material/components/accordion/demos/controlled/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/accordion/demos/controlled/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/accordion/demos/controlled/index.ts b/docs/data/material/components/accordion/demos/controlled/index.ts new file mode 100644 index 00000000000000..e09368a06ce19e --- /dev/null +++ b/docs/data/material/components/accordion/demos/controlled/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ControlledAccordions from './ControlledAccordions'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ControlledAccordions, { ClientProvider }); diff --git a/docs/data/material/components/accordion/CustomizedAccordions.tsx b/docs/data/material/components/accordion/demos/customized/CustomizedAccordions.tsx similarity index 94% rename from docs/data/material/components/accordion/CustomizedAccordions.tsx rename to docs/data/material/components/accordion/demos/customized/CustomizedAccordions.tsx index 16707f15eb63cd..4190ee2711e96d 100644 --- a/docs/data/material/components/accordion/CustomizedAccordions.tsx +++ b/docs/data/material/components/accordion/demos/customized/CustomizedAccordions.tsx @@ -1,11 +1,12 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import ArrowForwardIosSharpIcon from '@mui/icons-material/ArrowForwardIosSharp'; -import MuiAccordion, { AccordionProps } from '@mui/material/Accordion'; +import MuiAccordion from '@mui/material/Accordion'; +import type { AccordionProps } from '@mui/material/Accordion'; import MuiAccordionSummary, { - AccordionSummaryProps, accordionSummaryClasses, } from '@mui/material/AccordionSummary'; +import type { AccordionSummaryProps } from '@mui/material/AccordionSummary'; import MuiAccordionDetails from '@mui/material/AccordionDetails'; import Typography from '@mui/material/Typography'; @@ -47,6 +48,7 @@ const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({ })); export default function CustomizedAccordions() { + // @focus-start @padding 1 const [expanded, setExpanded] = React.useState('panel1'); const handleChange = @@ -97,4 +99,5 @@ export default function CustomizedAccordions() { ); + // @focus-end } diff --git a/docs/data/material/components/accordion/demos/customized/client.ts b/docs/data/material/components/accordion/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/accordion/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/accordion/demos/customized/index.ts b/docs/data/material/components/accordion/demos/customized/index.ts new file mode 100644 index 00000000000000..990701bc83dff0 --- /dev/null +++ b/docs/data/material/components/accordion/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedAccordions from './CustomizedAccordions'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedAccordions, { ClientProvider }); diff --git a/docs/data/material/components/accordion/DisabledAccordion.tsx b/docs/data/material/components/accordion/demos/disabled/DisabledAccordion.tsx similarity index 97% rename from docs/data/material/components/accordion/DisabledAccordion.tsx rename to docs/data/material/components/accordion/demos/disabled/DisabledAccordion.tsx index ef1cf954db88f2..99d721e9b7c492 100644 --- a/docs/data/material/components/accordion/DisabledAccordion.tsx +++ b/docs/data/material/components/accordion/demos/disabled/DisabledAccordion.tsx @@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; export default function DisabledAccordion() { + // @focus-start @padding 1 const id = React.useId(); return (
@@ -50,4 +51,5 @@ export default function DisabledAccordion() {
); + // @focus-end } diff --git a/docs/data/material/components/accordion/demos/disabled/client.ts b/docs/data/material/components/accordion/demos/disabled/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/accordion/demos/disabled/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/accordion/demos/disabled/index.ts b/docs/data/material/components/accordion/demos/disabled/index.ts new file mode 100644 index 00000000000000..f7239e3967929c --- /dev/null +++ b/docs/data/material/components/accordion/demos/disabled/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DisabledAccordion from './DisabledAccordion'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DisabledAccordion, { ClientProvider }); diff --git a/docs/data/material/components/accordion/AccordionExpandDefault.tsx b/docs/data/material/components/accordion/demos/expand-default/AccordionExpandDefault.tsx similarity index 97% rename from docs/data/material/components/accordion/AccordionExpandDefault.tsx rename to docs/data/material/components/accordion/demos/expand-default/AccordionExpandDefault.tsx index c045b66a3ed68d..8a2c08f95707d7 100644 --- a/docs/data/material/components/accordion/AccordionExpandDefault.tsx +++ b/docs/data/material/components/accordion/demos/expand-default/AccordionExpandDefault.tsx @@ -6,6 +6,7 @@ import Typography from '@mui/material/Typography'; import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; export default function AccordionExpandDefault() { + // @focus-start @padding 1 const id = React.useId(); return (
@@ -41,4 +42,5 @@ export default function AccordionExpandDefault() {
); + // @focus-end } diff --git a/docs/data/material/components/accordion/demos/expand-default/client.ts b/docs/data/material/components/accordion/demos/expand-default/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/accordion/demos/expand-default/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/accordion/demos/expand-default/index.ts b/docs/data/material/components/accordion/demos/expand-default/index.ts new file mode 100644 index 00000000000000..f2914c0b0a5656 --- /dev/null +++ b/docs/data/material/components/accordion/demos/expand-default/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AccordionExpandDefault from './AccordionExpandDefault'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AccordionExpandDefault, { ClientProvider }); diff --git a/docs/data/material/components/accordion/AccordionExpandIcon.tsx b/docs/data/material/components/accordion/demos/expand-icon/AccordionExpandIcon.tsx similarity index 97% rename from docs/data/material/components/accordion/AccordionExpandIcon.tsx rename to docs/data/material/components/accordion/demos/expand-icon/AccordionExpandIcon.tsx index 459816b921a056..e040aee6c6ce36 100644 --- a/docs/data/material/components/accordion/AccordionExpandIcon.tsx +++ b/docs/data/material/components/accordion/demos/expand-icon/AccordionExpandIcon.tsx @@ -7,6 +7,7 @@ import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'; import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; export default function AccordionExpandIcon() { + // @focus-start @padding 1 const id = React.useId(); return (
@@ -42,4 +43,5 @@ export default function AccordionExpandIcon() {
); + // @focus-end } diff --git a/docs/data/material/components/accordion/demos/expand-icon/client.ts b/docs/data/material/components/accordion/demos/expand-icon/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/accordion/demos/expand-icon/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/accordion/demos/expand-icon/index.ts b/docs/data/material/components/accordion/demos/expand-icon/index.ts new file mode 100644 index 00000000000000..06b0371198b0dc --- /dev/null +++ b/docs/data/material/components/accordion/demos/expand-icon/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AccordionExpandIcon from './AccordionExpandIcon'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AccordionExpandIcon, { ClientProvider }); diff --git a/docs/data/material/components/accordion/AccordionTransition.tsx b/docs/data/material/components/accordion/demos/transition/AccordionTransition.tsx similarity index 93% rename from docs/data/material/components/accordion/AccordionTransition.tsx rename to docs/data/material/components/accordion/demos/transition/AccordionTransition.tsx index 3c3ebce28e5d97..c9cfcffef4b0c1 100644 --- a/docs/data/material/components/accordion/AccordionTransition.tsx +++ b/docs/data/material/components/accordion/demos/transition/AccordionTransition.tsx @@ -1,8 +1,6 @@ import * as React from 'react'; -import Accordion, { - AccordionSlots, - accordionClasses, -} from '@mui/material/Accordion'; +import Accordion, { accordionClasses } from '@mui/material/Accordion'; +import type { AccordionSlots } from '@mui/material/Accordion'; import AccordionSummary from '@mui/material/AccordionSummary'; import AccordionDetails, { accordionDetailsClasses, @@ -12,6 +10,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import Fade from '@mui/material/Fade'; export default function AccordionTransition() { + // @focus-start @padding 1 const id = React.useId(); const [expanded, setExpanded] = React.useState(false); @@ -77,4 +76,5 @@ export default function AccordionTransition() { ); + // @focus-end } diff --git a/docs/data/material/components/accordion/demos/transition/client.ts b/docs/data/material/components/accordion/demos/transition/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/accordion/demos/transition/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/accordion/demos/transition/index.ts b/docs/data/material/components/accordion/demos/transition/index.ts new file mode 100644 index 00000000000000..0e5e3ead9ab1f4 --- /dev/null +++ b/docs/data/material/components/accordion/demos/transition/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AccordionTransition from './AccordionTransition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AccordionTransition, { ClientProvider }); diff --git a/docs/data/material/components/accordion/AccordionUsage.tsx b/docs/data/material/components/accordion/demos/usage/AccordionUsage.tsx similarity index 97% rename from docs/data/material/components/accordion/AccordionUsage.tsx rename to docs/data/material/components/accordion/demos/usage/AccordionUsage.tsx index 26deb503ece3f5..12f8173ab6c496 100644 --- a/docs/data/material/components/accordion/AccordionUsage.tsx +++ b/docs/data/material/components/accordion/demos/usage/AccordionUsage.tsx @@ -8,6 +8,7 @@ import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; import Button from '@mui/material/Button'; export default function AccordionUsage() { + // @focus-start @padding 1 const id = React.useId(); return (
@@ -56,4 +57,5 @@ export default function AccordionUsage() {
); + // @focus-end } diff --git a/docs/data/material/components/accordion/demos/usage/client.ts b/docs/data/material/components/accordion/demos/usage/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/accordion/demos/usage/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/accordion/demos/usage/index.ts b/docs/data/material/components/accordion/demos/usage/index.ts new file mode 100644 index 00000000000000..a67059d6a8fea5 --- /dev/null +++ b/docs/data/material/components/accordion/demos/usage/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AccordionUsage from './AccordionUsage'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AccordionUsage, { ClientProvider }); diff --git a/docs/data/material/components/alert/ActionAlerts.js b/docs/data/material/components/alert/ActionAlerts.js deleted file mode 100644 index 7cc818a4977723..00000000000000 --- a/docs/data/material/components/alert/ActionAlerts.js +++ /dev/null @@ -1,23 +0,0 @@ -import Alert from '@mui/material/Alert'; -import Button from '@mui/material/Button'; -import Stack from '@mui/material/Stack'; - -export default function ActionAlerts() { - return ( - - {}}> - This Alert displays the default close icon. - - - UNDO - - } - > - This Alert uses a Button component for its action. - - - ); -} diff --git a/docs/data/material/components/alert/ActionAlerts.tsx.preview b/docs/data/material/components/alert/ActionAlerts.tsx.preview deleted file mode 100644 index 2ca636bf48ef79..00000000000000 --- a/docs/data/material/components/alert/ActionAlerts.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - {}}> - This Alert displays the default close icon. - - - UNDO - - } -> - This Alert uses a Button component for its action. - \ No newline at end of file diff --git a/docs/data/material/components/alert/BasicAlerts.js b/docs/data/material/components/alert/BasicAlerts.js deleted file mode 100644 index 14293eeb4dad98..00000000000000 --- a/docs/data/material/components/alert/BasicAlerts.js +++ /dev/null @@ -1,13 +0,0 @@ -import Alert from '@mui/material/Alert'; -import Stack from '@mui/material/Stack'; - -export default function BasicAlerts() { - return ( - - This is a success Alert. - This is an info Alert. - This is a warning Alert. - This is an error Alert. - - ); -} diff --git a/docs/data/material/components/alert/BasicAlerts.tsx.preview b/docs/data/material/components/alert/BasicAlerts.tsx.preview deleted file mode 100644 index 1f048a50e35fbb..00000000000000 --- a/docs/data/material/components/alert/BasicAlerts.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ -This is a success Alert. -This is an info Alert. -This is a warning Alert. -This is an error Alert. \ No newline at end of file diff --git a/docs/data/material/components/alert/ColorAlerts.js b/docs/data/material/components/alert/ColorAlerts.js deleted file mode 100644 index 2e69f76b1b82d8..00000000000000 --- a/docs/data/material/components/alert/ColorAlerts.js +++ /dev/null @@ -1,9 +0,0 @@ -import Alert from '@mui/material/Alert'; - -export default function ColorAlerts() { - return ( - - This is a success Alert with warning colors. - - ); -} diff --git a/docs/data/material/components/alert/ColorAlerts.tsx.preview b/docs/data/material/components/alert/ColorAlerts.tsx.preview deleted file mode 100644 index ce1d428ba30412..00000000000000 --- a/docs/data/material/components/alert/ColorAlerts.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - This is a success Alert with warning colors. - \ No newline at end of file diff --git a/docs/data/material/components/alert/DescriptionAlerts.js b/docs/data/material/components/alert/DescriptionAlerts.js deleted file mode 100644 index 552c892fccc10e..00000000000000 --- a/docs/data/material/components/alert/DescriptionAlerts.js +++ /dev/null @@ -1,26 +0,0 @@ -import Alert from '@mui/material/Alert'; -import AlertTitle from '@mui/material/AlertTitle'; -import Stack from '@mui/material/Stack'; - -export default function DescriptionAlerts() { - return ( - - - Success - This is a success Alert with an encouraging title. - - - Info - This is an info Alert with an informative title. - - - Warning - This is a warning Alert with a cautious title. - - - Error - This is an error Alert with a scary title. - - - ); -} diff --git a/docs/data/material/components/alert/DescriptionAlerts.tsx.preview b/docs/data/material/components/alert/DescriptionAlerts.tsx.preview deleted file mode 100644 index b6d0201f2772cf..00000000000000 --- a/docs/data/material/components/alert/DescriptionAlerts.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - Success - This is a success Alert with an encouraging title. - - - Info - This is an info Alert with an informative title. - - - Warning - This is a warning Alert with a cautious title. - - - Error - This is an error Alert with a scary title. - \ No newline at end of file diff --git a/docs/data/material/components/alert/FilledAlerts.js b/docs/data/material/components/alert/FilledAlerts.js deleted file mode 100644 index 1003c206bdea05..00000000000000 --- a/docs/data/material/components/alert/FilledAlerts.js +++ /dev/null @@ -1,21 +0,0 @@ -import Alert from '@mui/material/Alert'; -import Stack from '@mui/material/Stack'; - -export default function FilledAlerts() { - return ( - - - This is a filled success Alert. - - - This is a filled info Alert. - - - This is a filled warning Alert. - - - This is a filled error Alert. - - - ); -} diff --git a/docs/data/material/components/alert/FilledAlerts.tsx.preview b/docs/data/material/components/alert/FilledAlerts.tsx.preview deleted file mode 100644 index 5eaa579252cc26..00000000000000 --- a/docs/data/material/components/alert/FilledAlerts.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - This is a filled success Alert. - - - This is a filled info Alert. - - - This is a filled warning Alert. - - - This is a filled error Alert. - \ No newline at end of file diff --git a/docs/data/material/components/alert/IconAlerts.js b/docs/data/material/components/alert/IconAlerts.js deleted file mode 100644 index 6b0ed9b1be6add..00000000000000 --- a/docs/data/material/components/alert/IconAlerts.js +++ /dev/null @@ -1,24 +0,0 @@ -import Alert from '@mui/material/Alert'; -import CheckIcon from '@mui/icons-material/Check'; -import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutlined'; -import Stack from '@mui/material/Stack'; - -export default function IconAlerts() { - return ( - - } severity="success"> - This success Alert has a custom icon. - - - This success Alert has no icon. - - , - }} - > - This success Alert uses `iconMapping` to override the default icon. - - - ); -} diff --git a/docs/data/material/components/alert/IconAlerts.tsx.preview b/docs/data/material/components/alert/IconAlerts.tsx.preview deleted file mode 100644 index 64ce73d4786ce0..00000000000000 --- a/docs/data/material/components/alert/IconAlerts.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ -} severity="success"> - This success Alert has a custom icon. - - - This success Alert has no icon. - -, - }} -> - This success Alert uses `iconMapping` to override the default icon. - \ No newline at end of file diff --git a/docs/data/material/components/alert/OutlinedAlerts.js b/docs/data/material/components/alert/OutlinedAlerts.js deleted file mode 100644 index 8f84f6827280fa..00000000000000 --- a/docs/data/material/components/alert/OutlinedAlerts.js +++ /dev/null @@ -1,21 +0,0 @@ -import Alert from '@mui/material/Alert'; -import Stack from '@mui/material/Stack'; - -export default function OutlinedAlerts() { - return ( - - - This is an outlined success Alert. - - - This is an outlined info Alert. - - - This is an outlined warning Alert. - - - This is an outlined error Alert. - - - ); -} diff --git a/docs/data/material/components/alert/OutlinedAlerts.tsx.preview b/docs/data/material/components/alert/OutlinedAlerts.tsx.preview deleted file mode 100644 index 7c08d09e6b466f..00000000000000 --- a/docs/data/material/components/alert/OutlinedAlerts.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - This is an outlined success Alert. - - - This is an outlined info Alert. - - - This is an outlined warning Alert. - - - This is an outlined error Alert. - \ No newline at end of file diff --git a/docs/data/material/components/alert/SimpleAlert.js b/docs/data/material/components/alert/SimpleAlert.js deleted file mode 100644 index aaecf0e2466891..00000000000000 --- a/docs/data/material/components/alert/SimpleAlert.js +++ /dev/null @@ -1,10 +0,0 @@ -import Alert from '@mui/material/Alert'; -import CheckIcon from '@mui/icons-material/Check'; - -export default function SimpleAlert() { - return ( - } severity="success"> - Here is a gentle confirmation that your action was successful. - - ); -} diff --git a/docs/data/material/components/alert/SimpleAlert.tsx.preview b/docs/data/material/components/alert/SimpleAlert.tsx.preview deleted file mode 100644 index 006b2e25029d4b..00000000000000 --- a/docs/data/material/components/alert/SimpleAlert.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ -} severity="success"> - Here is a gentle confirmation that your action was successful. - \ No newline at end of file diff --git a/docs/data/material/components/alert/TransitionAlerts.js b/docs/data/material/components/alert/TransitionAlerts.js deleted file mode 100644 index 1b02d5dc435734..00000000000000 --- a/docs/data/material/components/alert/TransitionAlerts.js +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Alert from '@mui/material/Alert'; -import IconButton from '@mui/material/IconButton'; -import Collapse from '@mui/material/Collapse'; -import Button from '@mui/material/Button'; -import CloseIcon from '@mui/icons-material/Close'; - -export default function TransitionAlerts() { - const [open, setOpen] = React.useState(true); - - return ( - - - { - setOpen(false); - }} - > - - - } - sx={{ mb: 2 }} - > - Click the close icon to see the Collapse transition in action! - - - - - ); -} diff --git a/docs/data/material/components/alert/alert.md b/docs/data/material/components/alert/alert.md index d1b638c7cf3ff8..2d5119a989ef7f 100644 --- a/docs/data/material/components/alert/alert.md +++ b/docs/data/material/components/alert/alert.md @@ -19,7 +19,7 @@ Alerts give users brief and potentially time-sensitive information in an unobtru The Material UI Alert component includes several props for quickly customizing its styles to provide immediate visual cues about its contents. -{{"demo": "SimpleAlert.js"}} +{{"component": "file://./demos/simple/index.ts"}} :::info This component is no longer documented in the [Material Design guidelines](https://m2.material.io/), but Material UI will continue to support it. @@ -43,7 +43,7 @@ The Alert component wraps around its content, and stretches to fill its enclosin The `severity` prop accepts four values representing different states—`success` (the default), `info`, `warning`, and `error`–with corresponding icon and color combinations for each: -{{"demo": "BasicAlerts.js"}} +{{"component": "file://./demos/basic/index.ts"}} ### Variants @@ -51,11 +51,11 @@ The Alert component comes with two alternative style options—`filled` and `out #### Filled -{{"demo": "FilledAlerts.js"}} +{{"component": "file://./demos/filled/index.ts"}} #### Outlined -{{"demo": "OutlinedAlerts.js"}} +{{"component": "file://./demos/outlined/index.ts"}} :::warning When using an outlined Alert with the [Snackbar](/material-ui/react-snackbar/) component, background content will be visible and bleed through the Alert by default. @@ -72,7 +72,7 @@ Check out the [Snackbar—customization](/material-ui/react-snackbar/#customizat Use the `color` prop to override the default color for the specified [`severity`](#severity)—for instance, to apply `warning` colors to a `success` Alert: -{{"demo": "ColorAlerts.js"}} +{{"component": "file://./demos/color/index.ts"}} ### Actions @@ -81,7 +81,7 @@ This lets you insert any element—an HTML tag, an SVG icon, or a React componen If you provide an `onClose` callback to the Alert without setting the `action` prop, the component will display a close icon (✕) by default. -{{"demo": "ActionAlerts.js"}} +{{"component": "file://./demos/action/index.ts"}} ### Icons @@ -92,7 +92,7 @@ Set this prop to `false` to remove the icon altogether. If you need to override all instances of an icon for a given [`severity`](#severity), you can use the `iconMapping` prop instead. You can define this prop globally by customizing your app's theme. See [Theme components—Default props](/material-ui/customization/theme-components/#theme-default-props) for details. -{{"demo": "IconAlerts.js"}} +{{"component": "file://./demos/icon/index.ts"}} ## Customization @@ -106,13 +106,13 @@ import AlertTitle from '@mui/material/AlertTitle'; You can nest this component above the message in your Alert for a neatly styled and properly aligned title, as shown below: -{{"demo": "DescriptionAlerts.js"}} +{{"component": "file://./demos/description/index.ts"}} ### Transitions You can use [Transition components](/material-ui/transitions/) like [Collapse](/material-ui/transitions/#collapse) to add motion to an Alert's entrance and exit. -{{"demo": "TransitionAlerts.js"}} +{{"component": "file://./demos/transition/index.ts"}} ## Accessibility diff --git a/docs/data/material/components/alert/ActionAlerts.tsx b/docs/data/material/components/alert/demos/action/ActionAlerts.tsx similarity index 92% rename from docs/data/material/components/alert/ActionAlerts.tsx rename to docs/data/material/components/alert/demos/action/ActionAlerts.tsx index 7cc818a4977723..c91cb79ba255db 100644 --- a/docs/data/material/components/alert/ActionAlerts.tsx +++ b/docs/data/material/components/alert/demos/action/ActionAlerts.tsx @@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack'; export default function ActionAlerts() { return ( + {/* @focus-start */} {}}> This Alert displays the default close icon. @@ -18,6 +19,7 @@ export default function ActionAlerts() { > This Alert uses a Button component for its action. + {/* @focus-end */} ); } diff --git a/docs/data/material/components/alert/demos/action/client.ts b/docs/data/material/components/alert/demos/action/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/alert/demos/action/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/alert/demos/action/index.ts b/docs/data/material/components/alert/demos/action/index.ts new file mode 100644 index 00000000000000..6a6d21bf9afcbe --- /dev/null +++ b/docs/data/material/components/alert/demos/action/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ActionAlerts from './ActionAlerts'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ActionAlerts, { ClientProvider }); diff --git a/docs/data/material/components/alert/BasicAlerts.tsx b/docs/data/material/components/alert/demos/basic/BasicAlerts.tsx similarity index 89% rename from docs/data/material/components/alert/BasicAlerts.tsx rename to docs/data/material/components/alert/demos/basic/BasicAlerts.tsx index 14293eeb4dad98..23392ed658289e 100644 --- a/docs/data/material/components/alert/BasicAlerts.tsx +++ b/docs/data/material/components/alert/demos/basic/BasicAlerts.tsx @@ -4,10 +4,12 @@ import Stack from '@mui/material/Stack'; export default function BasicAlerts() { return ( + {/* @focus-start */} This is a success Alert. This is an info Alert. This is a warning Alert. This is an error Alert. + {/* @focus-end */} ); } diff --git a/docs/data/material/components/alert/demos/basic/client.ts b/docs/data/material/components/alert/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/alert/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/alert/demos/basic/index.ts b/docs/data/material/components/alert/demos/basic/index.ts new file mode 100644 index 00000000000000..e30419c8a8171f --- /dev/null +++ b/docs/data/material/components/alert/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicAlerts from './BasicAlerts'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicAlerts, { ClientProvider }); diff --git a/docs/data/material/components/alert/ColorAlerts.tsx b/docs/data/material/components/alert/demos/color/ColorAlerts.tsx similarity index 81% rename from docs/data/material/components/alert/ColorAlerts.tsx rename to docs/data/material/components/alert/demos/color/ColorAlerts.tsx index 2e69f76b1b82d8..d9f2351b44e5d8 100644 --- a/docs/data/material/components/alert/ColorAlerts.tsx +++ b/docs/data/material/components/alert/demos/color/ColorAlerts.tsx @@ -2,8 +2,10 @@ import Alert from '@mui/material/Alert'; export default function ColorAlerts() { return ( + // @focus-start @padding 2 This is a success Alert with warning colors. + // @focus-end ); } diff --git a/docs/data/material/components/alert/demos/color/client.ts b/docs/data/material/components/alert/demos/color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/alert/demos/color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/alert/demos/color/index.ts b/docs/data/material/components/alert/demos/color/index.ts new file mode 100644 index 00000000000000..582b6222e58858 --- /dev/null +++ b/docs/data/material/components/alert/demos/color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorAlerts from './ColorAlerts'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorAlerts, { ClientProvider }); diff --git a/docs/data/material/components/alert/DescriptionAlerts.tsx b/docs/data/material/components/alert/demos/description/DescriptionAlerts.tsx similarity index 94% rename from docs/data/material/components/alert/DescriptionAlerts.tsx rename to docs/data/material/components/alert/demos/description/DescriptionAlerts.tsx index 552c892fccc10e..a67a5be72db2e0 100644 --- a/docs/data/material/components/alert/DescriptionAlerts.tsx +++ b/docs/data/material/components/alert/demos/description/DescriptionAlerts.tsx @@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack'; export default function DescriptionAlerts() { return ( + {/* @focus-start */} Success This is a success Alert with an encouraging title. @@ -21,6 +22,7 @@ export default function DescriptionAlerts() { Error This is an error Alert with a scary title. + {/* @focus-end */} ); } diff --git a/docs/data/material/components/alert/demos/description/client.ts b/docs/data/material/components/alert/demos/description/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/alert/demos/description/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/alert/demos/description/index.ts b/docs/data/material/components/alert/demos/description/index.ts new file mode 100644 index 00000000000000..c682d4cac411b9 --- /dev/null +++ b/docs/data/material/components/alert/demos/description/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DescriptionAlerts from './DescriptionAlerts'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DescriptionAlerts, { ClientProvider }); diff --git a/docs/data/material/components/alert/FilledAlerts.tsx b/docs/data/material/components/alert/demos/filled/FilledAlerts.tsx similarity index 92% rename from docs/data/material/components/alert/FilledAlerts.tsx rename to docs/data/material/components/alert/demos/filled/FilledAlerts.tsx index 1003c206bdea05..1e6f0f0ffee406 100644 --- a/docs/data/material/components/alert/FilledAlerts.tsx +++ b/docs/data/material/components/alert/demos/filled/FilledAlerts.tsx @@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack'; export default function FilledAlerts() { return ( + {/* @focus-start */} This is a filled success Alert. @@ -16,6 +17,7 @@ export default function FilledAlerts() { This is a filled error Alert. + {/* @focus-end */} ); } diff --git a/docs/data/material/components/alert/demos/filled/client.ts b/docs/data/material/components/alert/demos/filled/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/alert/demos/filled/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/alert/demos/filled/index.ts b/docs/data/material/components/alert/demos/filled/index.ts new file mode 100644 index 00000000000000..19c90da62a309d --- /dev/null +++ b/docs/data/material/components/alert/demos/filled/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FilledAlerts from './FilledAlerts'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FilledAlerts, { ClientProvider }); diff --git a/docs/data/material/components/alert/IconAlerts.tsx b/docs/data/material/components/alert/demos/icon/IconAlerts.tsx similarity index 93% rename from docs/data/material/components/alert/IconAlerts.tsx rename to docs/data/material/components/alert/demos/icon/IconAlerts.tsx index 6b0ed9b1be6add..167ec8cfaca31b 100644 --- a/docs/data/material/components/alert/IconAlerts.tsx +++ b/docs/data/material/components/alert/demos/icon/IconAlerts.tsx @@ -6,6 +6,7 @@ import Stack from '@mui/material/Stack'; export default function IconAlerts() { return ( + {/* @focus-start */} } severity="success"> This success Alert has a custom icon. @@ -19,6 +20,7 @@ export default function IconAlerts() { > This success Alert uses `iconMapping` to override the default icon. + {/* @focus-end */} ); } diff --git a/docs/data/material/components/alert/demos/icon/client.ts b/docs/data/material/components/alert/demos/icon/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/alert/demos/icon/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/alert/demos/icon/index.ts b/docs/data/material/components/alert/demos/icon/index.ts new file mode 100644 index 00000000000000..12210304d1ad70 --- /dev/null +++ b/docs/data/material/components/alert/demos/icon/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IconAlerts from './IconAlerts'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IconAlerts, { ClientProvider }); diff --git a/docs/data/material/components/alert/OutlinedAlerts.tsx b/docs/data/material/components/alert/demos/outlined/OutlinedAlerts.tsx similarity index 92% rename from docs/data/material/components/alert/OutlinedAlerts.tsx rename to docs/data/material/components/alert/demos/outlined/OutlinedAlerts.tsx index 8f84f6827280fa..a86176848d3cd3 100644 --- a/docs/data/material/components/alert/OutlinedAlerts.tsx +++ b/docs/data/material/components/alert/demos/outlined/OutlinedAlerts.tsx @@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack'; export default function OutlinedAlerts() { return ( + {/* @focus-start */} This is an outlined success Alert. @@ -16,6 +17,7 @@ export default function OutlinedAlerts() { This is an outlined error Alert. + {/* @focus-end */} ); } diff --git a/docs/data/material/components/alert/demos/outlined/client.ts b/docs/data/material/components/alert/demos/outlined/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/alert/demos/outlined/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/alert/demos/outlined/index.ts b/docs/data/material/components/alert/demos/outlined/index.ts new file mode 100644 index 00000000000000..6ee4c8faf48ad9 --- /dev/null +++ b/docs/data/material/components/alert/demos/outlined/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import OutlinedAlerts from './OutlinedAlerts'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, OutlinedAlerts, { ClientProvider }); diff --git a/docs/data/material/components/alert/SimpleAlert.tsx b/docs/data/material/components/alert/demos/simple/SimpleAlert.tsx similarity index 86% rename from docs/data/material/components/alert/SimpleAlert.tsx rename to docs/data/material/components/alert/demos/simple/SimpleAlert.tsx index aaecf0e2466891..e696a3dac74d8b 100644 --- a/docs/data/material/components/alert/SimpleAlert.tsx +++ b/docs/data/material/components/alert/demos/simple/SimpleAlert.tsx @@ -3,8 +3,10 @@ import CheckIcon from '@mui/icons-material/Check'; export default function SimpleAlert() { return ( + // @focus-start @padding 2 } severity="success"> Here is a gentle confirmation that your action was successful. + // @focus-end ); } diff --git a/docs/data/material/components/alert/demos/simple/client.ts b/docs/data/material/components/alert/demos/simple/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/alert/demos/simple/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/alert/demos/simple/index.ts b/docs/data/material/components/alert/demos/simple/index.ts new file mode 100644 index 00000000000000..47adb149f05b9b --- /dev/null +++ b/docs/data/material/components/alert/demos/simple/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleAlert from './SimpleAlert'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleAlert, { ClientProvider }); diff --git a/docs/data/material/components/alert/TransitionAlerts.tsx b/docs/data/material/components/alert/demos/transition/TransitionAlerts.tsx similarity index 96% rename from docs/data/material/components/alert/TransitionAlerts.tsx rename to docs/data/material/components/alert/demos/transition/TransitionAlerts.tsx index 1b02d5dc435734..3abd81034142e5 100644 --- a/docs/data/material/components/alert/TransitionAlerts.tsx +++ b/docs/data/material/components/alert/demos/transition/TransitionAlerts.tsx @@ -7,6 +7,7 @@ import Button from '@mui/material/Button'; import CloseIcon from '@mui/icons-material/Close'; export default function TransitionAlerts() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(true); return ( @@ -41,4 +42,5 @@ export default function TransitionAlerts() { ); + // @focus-end } diff --git a/docs/data/material/components/alert/demos/transition/client.ts b/docs/data/material/components/alert/demos/transition/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/alert/demos/transition/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/alert/demos/transition/index.ts b/docs/data/material/components/alert/demos/transition/index.ts new file mode 100644 index 00000000000000..6e11a854bcc0af --- /dev/null +++ b/docs/data/material/components/alert/demos/transition/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TransitionAlerts from './TransitionAlerts'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TransitionAlerts, { ClientProvider }); diff --git a/docs/data/material/components/app-bar/BackToTop.js b/docs/data/material/components/app-bar/BackToTop.js deleted file mode 100644 index 6e454039aa54a8..00000000000000 --- a/docs/data/material/components/app-bar/BackToTop.js +++ /dev/null @@ -1,90 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import CssBaseline from '@mui/material/CssBaseline'; -import useScrollTrigger from '@mui/material/useScrollTrigger'; -import Box from '@mui/material/Box'; -import Container from '@mui/material/Container'; -import Fab from '@mui/material/Fab'; -import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; -import Fade from '@mui/material/Fade'; - -function ScrollTop(props) { - const { children, window } = props; - // Note that you normally won't need to set the window ref as useScrollTrigger - // will default to window. - // This is only being set here because the demo is in an iframe. - const trigger = useScrollTrigger({ - target: window ? window() : undefined, - disableHysteresis: true, - threshold: 100, - }); - - const handleClick = (event) => { - const anchor = (event.target.ownerDocument || document).querySelector( - '#back-to-top-anchor', - ); - - if (anchor) { - anchor.scrollIntoView({ - block: 'center', - }); - } - }; - - return ( - - - {children} - - - ); -} - -ScrollTop.propTypes = { - children: PropTypes.element, - /** - * Injected by the documentation to work in an iframe. - * You won't need it on your project. - */ - window: PropTypes.func, -}; - -export default function BackToTop(props) { - return ( - - - - - - Scroll to see button - - - - - - - {[...new Array(12)] - .map( - () => `Cras mattis consectetur purus sit amet fermentum. -Cras justo odio, dapibus ac facilisis in, egestas eget quam. -Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`, - ) - .join('\n')} - - - - - - - - - ); -} diff --git a/docs/data/material/components/app-bar/BottomAppBar.js b/docs/data/material/components/app-bar/BottomAppBar.js deleted file mode 100644 index 24afbb0929ace6..00000000000000 --- a/docs/data/material/components/app-bar/BottomAppBar.js +++ /dev/null @@ -1,130 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; -import CssBaseline from '@mui/material/CssBaseline'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import Paper from '@mui/material/Paper'; -import Fab from '@mui/material/Fab'; -import List from '@mui/material/List'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemAvatar from '@mui/material/ListItemAvatar'; -import ListItemText from '@mui/material/ListItemText'; -import ListSubheader from '@mui/material/ListSubheader'; -import Avatar from '@mui/material/Avatar'; -import MenuIcon from '@mui/icons-material/Menu'; -import AddIcon from '@mui/icons-material/Add'; -import SearchIcon from '@mui/icons-material/Search'; -import MoreIcon from '@mui/icons-material/MoreVert'; - -const messages = [ - { - id: 1, - primary: 'Brunch this week?', - secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat", - person: '/static/images/avatar/5.jpg', - }, - { - id: 2, - primary: 'Birthday Gift', - secondary: `Do you have a suggestion for a good present for John on his work - anniversary. I am really confused & would love your thoughts on it.`, - person: '/static/images/avatar/1.jpg', - }, - { - id: 3, - primary: 'Recipe to try', - secondary: 'I am try out this new BBQ recipe, I think this might be amazing', - person: '/static/images/avatar/2.jpg', - }, - { - id: 4, - primary: 'Yes!', - secondary: 'I have the tickets to the ReactConf for this year.', - person: '/static/images/avatar/3.jpg', - }, - { - id: 5, - primary: "Doctor's Appointment", - secondary: 'My appointment for the doctor was rescheduled for next Saturday.', - person: '/static/images/avatar/4.jpg', - }, - { - id: 6, - primary: 'Discussion', - secondary: `Menus that are generated by the bottom app bar (such as a bottom - navigation drawer or overflow menu) open as bottom sheets at a higher elevation - than the bar.`, - person: '/static/images/avatar/5.jpg', - }, - { - id: 7, - primary: 'Summer BBQ', - secondary: `Who wants to have a cookout this weekend? I just got some furniture - for my backyard and would love to fire up the grill.`, - person: '/static/images/avatar/1.jpg', - }, -]; - -const StyledFab = styled(Fab)({ - position: 'absolute', - zIndex: 1, - top: -30, - left: 0, - right: 0, - margin: '0 auto', -}); - -export default function BottomAppBar() { - return ( - - - - - Inbox - - - {messages.map(({ id, primary, secondary, person }) => ( - - {id === 1 && ( - - Today - - )} - {id === 3 && ( - - Yesterday - - )} - - - - - - - - ))} - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/app-bar/ButtonAppBar.js b/docs/data/material/components/app-bar/ButtonAppBar.js deleted file mode 100644 index a9a57f5a53bdc7..00000000000000 --- a/docs/data/material/components/app-bar/ButtonAppBar.js +++ /dev/null @@ -1,31 +0,0 @@ -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import MenuIcon from '@mui/icons-material/Menu'; - -export default function ButtonAppBar() { - return ( - - - - - - - - News - - - - - - ); -} diff --git a/docs/data/material/components/app-bar/DenseAppBar.js b/docs/data/material/components/app-bar/DenseAppBar.js deleted file mode 100644 index a170710ef0fa2b..00000000000000 --- a/docs/data/material/components/app-bar/DenseAppBar.js +++ /dev/null @@ -1,29 +0,0 @@ -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import MenuIcon from '@mui/icons-material/Menu'; - -export default function DenseAppBar() { - return ( - - - - - - - - Photos - - - - - ); -} diff --git a/docs/data/material/components/app-bar/DenseAppBar.tsx.preview b/docs/data/material/components/app-bar/DenseAppBar.tsx.preview deleted file mode 100644 index 09166609bd8828..00000000000000 --- a/docs/data/material/components/app-bar/DenseAppBar.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - Photos - - - \ No newline at end of file diff --git a/docs/data/material/components/app-bar/DrawerAppBar.js b/docs/data/material/components/app-bar/DrawerAppBar.js deleted file mode 100644 index 6c06b633c0c595..00000000000000 --- a/docs/data/material/components/app-bar/DrawerAppBar.js +++ /dev/null @@ -1,145 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; -import CssBaseline from '@mui/material/CssBaseline'; -import Divider from '@mui/material/Divider'; -import Drawer from '@mui/material/Drawer'; -import IconButton from '@mui/material/IconButton'; -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemText from '@mui/material/ListItemText'; -import MenuIcon from '@mui/icons-material/Menu'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import Button from '@mui/material/Button'; - -const drawerWidth = 240; -const navItems = ['Home', 'About', 'Contact']; - -function DrawerAppBar(props) { - const { window } = props; - const [mobileOpen, setMobileOpen] = React.useState(false); - - const handleDrawerToggle = () => { - setMobileOpen((prevState) => !prevState); - }; - - const drawer = ( - - - MUI - - - - {navItems.map((item) => ( - - - - - - ))} - - - ); - - const container = window !== undefined ? () => window().document.body : undefined; - - return ( - - - - - - - - - MUI - - - {navItems.map((item) => ( - - ))} - - - - - - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Similique unde - fugit veniam eius, perspiciatis sunt? Corporis qui ducimus quibusdam, - aliquam dolore excepturi quae. Distinctio enim at eligendi perferendis in - cum quibusdam sed quae, accusantium et aperiam? Quod itaque exercitationem, - at ab sequi qui modi delectus quia corrupti alias distinctio nostrum. - Minima ex dolor modi inventore sapiente necessitatibus aliquam fuga et. Sed - numquam quibusdam at officia sapiente porro maxime corrupti perspiciatis - asperiores, exercitationem eius nostrum consequuntur iure aliquam itaque, - assumenda et! Quibusdam temporibus beatae doloremque voluptatum doloribus - soluta accusamus porro reprehenderit eos inventore facere, fugit, molestiae - ab officiis illo voluptates recusandae. Vel dolor nobis eius, ratione atque - soluta, aliquam fugit qui iste architecto perspiciatis. Nobis, voluptatem! - Cumque, eligendi unde aliquid minus quis sit debitis obcaecati error, - delectus quo eius exercitationem tempore. Delectus sapiente, provident - corporis dolorum quibusdam aut beatae repellendus est labore quisquam - praesentium repudiandae non vel laboriosam quo ab perferendis velit ipsa - deleniti modi! Ipsam, illo quod. Nesciunt commodi nihil corrupti cum non - fugiat praesentium doloremque architecto laborum aliquid. Quae, maxime - recusandae? Eveniet dolore molestiae dicta blanditiis est expedita eius - debitis cupiditate porro sed aspernatur quidem, repellat nihil quasi - praesentium quia eos, quibusdam provident. Incidunt tempore vel placeat - voluptate iure labore, repellendus beatae quia unde est aliquid dolor - molestias libero. Reiciendis similique exercitationem consequatur, nobis - placeat illo laudantium! Enim perferendis nulla soluta magni error, - provident repellat similique cupiditate ipsam, et tempore cumque quod! Qui, - iure suscipit tempora unde rerum autem saepe nisi vel cupiditate iusto. - Illum, corrupti? Fugiat quidem accusantium nulla. Aliquid inventore commodi - reprehenderit rerum reiciendis! Quidem alias repudiandae eaque eveniet - cumque nihil aliquam in expedita, impedit quas ipsum nesciunt ipsa ullam - consequuntur dignissimos numquam at nisi porro a, quaerat rem repellendus. - Voluptates perspiciatis, in pariatur impedit, nam facilis libero dolorem - dolores sunt inventore perferendis, aut sapiente modi nesciunt. - - - - ); -} - -DrawerAppBar.propTypes = { - /** - * Injected by the documentation to work in an iframe. - * You won't need it on your project. - */ - window: PropTypes.func, -}; - -export default DrawerAppBar; diff --git a/docs/data/material/components/app-bar/ElevateAppBar.js b/docs/data/material/components/app-bar/ElevateAppBar.js deleted file mode 100644 index 1679f75e66c806..00000000000000 --- a/docs/data/material/components/app-bar/ElevateAppBar.js +++ /dev/null @@ -1,66 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import CssBaseline from '@mui/material/CssBaseline'; -import useScrollTrigger from '@mui/material/useScrollTrigger'; -import Box from '@mui/material/Box'; -import Container from '@mui/material/Container'; - -function ElevationScroll(props) { - const { children, window } = props; - // Note that you normally won't need to set the window ref as useScrollTrigger - // will default to window. - // This is only being set here because the demo is in an iframe. - const trigger = useScrollTrigger({ - disableHysteresis: true, - threshold: 0, - target: window ? window() : undefined, - }); - - return children - ? React.cloneElement(children, { - elevation: trigger ? 4 : 0, - }) - : null; -} - -ElevationScroll.propTypes = { - children: PropTypes.element, - /** - * Injected by the documentation to work in an iframe. - * You won't need it on your project. - */ - window: PropTypes.func, -}; - -export default function ElevateAppBar(props) { - return ( - - - - - - - Scroll to elevate App bar - - - - - - - - {[...new Array(12)] - .map( - () => `Cras mattis consectetur purus sit amet fermentum. -Cras justo odio, dapibus ac facilisis in, egestas eget quam. -Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`, - ) - .join('\n')} - - - - ); -} diff --git a/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.js b/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.js deleted file mode 100644 index 52bb534e32f117..00000000000000 --- a/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.js +++ /dev/null @@ -1,44 +0,0 @@ -import AppBar from '@mui/material/AppBar'; -import Stack from '@mui/material/Stack'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import MenuIcon from '@mui/icons-material/Menu'; -import { ThemeProvider, createTheme } from '@mui/material/styles'; - -function appBarLabel(label) { - return ( - - - - - - {label} - - - ); -} - -const darkTheme = createTheme({ - palette: { - mode: 'dark', - primary: { - main: '#1976d2', - }, - }, -}); - -export default function EnableColorOnDarkAppBar() { - return ( - - - - {appBarLabel('enableColorOnDark')} - - - {appBarLabel('default')} - - - - ); -} diff --git a/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx.preview b/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx.preview deleted file mode 100644 index 1b12ffc0f60a7d..00000000000000 --- a/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - - {appBarLabel('enableColorOnDark')} - - - {appBarLabel('default')} - - \ No newline at end of file diff --git a/docs/data/material/components/app-bar/HideAppBar.js b/docs/data/material/components/app-bar/HideAppBar.js deleted file mode 100644 index 0753b6dd25b77b..00000000000000 --- a/docs/data/material/components/app-bar/HideAppBar.js +++ /dev/null @@ -1,65 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import CssBaseline from '@mui/material/CssBaseline'; -import useScrollTrigger from '@mui/material/useScrollTrigger'; -import Box from '@mui/material/Box'; -import Container from '@mui/material/Container'; -import Slide from '@mui/material/Slide'; - -function HideOnScroll(props) { - const { children, window } = props; - // Note that you normally won't need to set the window ref as useScrollTrigger - // will default to window. - // This is only being set here because the demo is in an iframe. - const trigger = useScrollTrigger({ - target: window ? window() : undefined, - }); - - return ( - - {children ??
} - - ); -} - -HideOnScroll.propTypes = { - children: PropTypes.element, - /** - * Injected by the documentation to work in an iframe. - * You won't need it on your project. - */ - window: PropTypes.func, -}; - -export default function HideAppBar(props) { - return ( - - - - - - - Scroll to hide App bar - - - - - - - - {[...new Array(12)] - .map( - () => `Cras mattis consectetur purus sit amet fermentum. -Cras justo odio, dapibus ac facilisis in, egestas eget quam. -Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`, - ) - .join('\n')} - - - - ); -} diff --git a/docs/data/material/components/app-bar/MenuAppBar.js b/docs/data/material/components/app-bar/MenuAppBar.js deleted file mode 100644 index 37dab55766a0ff..00000000000000 --- a/docs/data/material/components/app-bar/MenuAppBar.js +++ /dev/null @@ -1,95 +0,0 @@ -import * as React from 'react'; -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import MenuIcon from '@mui/icons-material/Menu'; -import AccountCircle from '@mui/icons-material/AccountCircle'; -import Switch from '@mui/material/Switch'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormGroup from '@mui/material/FormGroup'; -import MenuItem from '@mui/material/MenuItem'; -import Menu from '@mui/material/Menu'; - -export default function MenuAppBar() { - const [auth, setAuth] = React.useState(true); - const [anchorEl, setAnchorEl] = React.useState(null); - - const handleChange = (event) => { - setAuth(event.target.checked); - }; - - const handleMenu = (event) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - return ( - - - - } - label={auth ? 'Logout' : 'Login'} - /> - - - - - - - - Photos - - {auth && ( -
- - - - - Profile - My account - -
- )} - - - - ); -} diff --git a/docs/data/material/components/app-bar/PrimarySearchAppBar.js b/docs/data/material/components/app-bar/PrimarySearchAppBar.js deleted file mode 100644 index 55b56ac71026a4..00000000000000 --- a/docs/data/material/components/app-bar/PrimarySearchAppBar.js +++ /dev/null @@ -1,233 +0,0 @@ -import * as React from 'react'; -import { styled, alpha } from '@mui/material/styles'; -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; -import Toolbar from '@mui/material/Toolbar'; -import IconButton from '@mui/material/IconButton'; -import Typography from '@mui/material/Typography'; -import InputBase from '@mui/material/InputBase'; -import Badge from '@mui/material/Badge'; -import MenuItem from '@mui/material/MenuItem'; -import Menu from '@mui/material/Menu'; -import MenuIcon from '@mui/icons-material/Menu'; -import SearchIcon from '@mui/icons-material/Search'; -import AccountCircle from '@mui/icons-material/AccountCircle'; -import MailIcon from '@mui/icons-material/Mail'; -import NotificationsIcon from '@mui/icons-material/Notifications'; -import MoreIcon from '@mui/icons-material/MoreVert'; - -const Search = styled('div')(({ theme }) => ({ - position: 'relative', - borderRadius: theme.shape.borderRadius, - backgroundColor: alpha(theme.palette.common.white, 0.15), - '&:hover': { - backgroundColor: alpha(theme.palette.common.white, 0.25), - }, - marginRight: theme.spacing(2), - marginLeft: 0, - width: '100%', - [theme.breakpoints.up('sm')]: { - marginLeft: theme.spacing(3), - width: 'auto', - }, -})); - -const SearchIconWrapper = styled('div')(({ theme }) => ({ - padding: theme.spacing(0, 2), - height: '100%', - position: 'absolute', - pointerEvents: 'none', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', -})); - -const StyledInputBase = styled(InputBase)(({ theme }) => ({ - color: 'inherit', - '& .MuiInputBase-input': { - padding: theme.spacing(1, 1, 1, 0), - // vertical padding + font size from searchIcon - paddingLeft: `calc(1em + ${theme.spacing(4)})`, - transition: theme.transitions.create('width'), - width: '100%', - [theme.breakpoints.up('md')]: { - width: '20ch', - }, - }, -})); - -export default function PrimarySearchAppBar() { - const [anchorEl, setAnchorEl] = React.useState(null); - const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null); - - const isMenuOpen = Boolean(anchorEl); - const isMobileMenuOpen = Boolean(mobileMoreAnchorEl); - - const handleProfileMenuOpen = (event) => { - setAnchorEl(event.currentTarget); - }; - - const handleMobileMenuClose = () => { - setMobileMoreAnchorEl(null); - }; - - const handleMenuClose = () => { - setAnchorEl(null); - handleMobileMenuClose(); - }; - - const handleMobileMenuOpen = (event) => { - setMobileMoreAnchorEl(event.currentTarget); - }; - - const menuId = 'primary-search-account-menu'; - const renderMenu = ( - - Profile - My account - - ); - - const mobileMenuId = 'primary-search-account-menu-mobile'; - const renderMobileMenu = ( - - - - - - - -

Messages

- - - - - - - -

Notifications

- - - - - -

Profile

- - - ); - - return ( - - - - - - - - MUI - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - {renderMobileMenu} - {renderMenu} - - ); -} diff --git a/docs/data/material/components/app-bar/ProminentAppBar.js b/docs/data/material/components/app-bar/ProminentAppBar.js deleted file mode 100644 index c7cf66b17032dc..00000000000000 --- a/docs/data/material/components/app-bar/ProminentAppBar.js +++ /dev/null @@ -1,58 +0,0 @@ -import { styled } from '@mui/material/styles'; -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; -import Toolbar from '@mui/material/Toolbar'; -import IconButton from '@mui/material/IconButton'; -import Typography from '@mui/material/Typography'; -import MenuIcon from '@mui/icons-material/Menu'; -import SearchIcon from '@mui/icons-material/Search'; -import MoreIcon from '@mui/icons-material/MoreVert'; - -const StyledToolbar = styled(Toolbar)(({ theme }) => ({ - alignItems: 'flex-start', - paddingTop: theme.spacing(1), - paddingBottom: theme.spacing(2), - // Override media queries injected by theme.mixins.toolbar - '@media all': { - minHeight: 128, - }, -})); - -export default function ProminentAppBar() { - return ( - - - - - - - - MUI - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/app-bar/ResponsiveAppBar.js b/docs/data/material/components/app-bar/ResponsiveAppBar.js deleted file mode 100644 index 270bdc428f0c7c..00000000000000 --- a/docs/data/material/components/app-bar/ResponsiveAppBar.js +++ /dev/null @@ -1,159 +0,0 @@ -import * as React from 'react'; -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; -import Toolbar from '@mui/material/Toolbar'; -import IconButton from '@mui/material/IconButton'; -import Typography from '@mui/material/Typography'; -import Menu from '@mui/material/Menu'; -import MenuIcon from '@mui/icons-material/Menu'; -import Container from '@mui/material/Container'; -import Avatar from '@mui/material/Avatar'; -import Button from '@mui/material/Button'; -import Tooltip from '@mui/material/Tooltip'; -import MenuItem from '@mui/material/MenuItem'; -import AdbIcon from '@mui/icons-material/Adb'; - -const pages = ['Products', 'Pricing', 'Blog']; -const settings = ['Profile', 'Account', 'Dashboard', 'Logout']; - -function ResponsiveAppBar() { - const [anchorElNav, setAnchorElNav] = React.useState(null); - const [anchorElUser, setAnchorElUser] = React.useState(null); - - const handleOpenNavMenu = (event) => { - setAnchorElNav(event.currentTarget); - }; - const handleOpenUserMenu = (event) => { - setAnchorElUser(event.currentTarget); - }; - - const handleCloseNavMenu = () => { - setAnchorElNav(null); - }; - - const handleCloseUserMenu = () => { - setAnchorElUser(null); - }; - - return ( - - - - - - LOGO - - - - - - - - {pages.map((page) => ( - - {page} - - ))} - - - - - LOGO - - - {pages.map((page) => ( - - ))} - - - - - - - - - {settings.map((setting) => ( - - {setting} - - ))} - - - - - - ); -} -export default ResponsiveAppBar; diff --git a/docs/data/material/components/app-bar/SearchAppBar.js b/docs/data/material/components/app-bar/SearchAppBar.js deleted file mode 100644 index c193b74a92c415..00000000000000 --- a/docs/data/material/components/app-bar/SearchAppBar.js +++ /dev/null @@ -1,88 +0,0 @@ -import { styled, alpha } from '@mui/material/styles'; -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; -import Toolbar from '@mui/material/Toolbar'; -import IconButton from '@mui/material/IconButton'; -import Typography from '@mui/material/Typography'; -import InputBase from '@mui/material/InputBase'; -import MenuIcon from '@mui/icons-material/Menu'; -import SearchIcon from '@mui/icons-material/Search'; - -const Search = styled('div')(({ theme }) => ({ - position: 'relative', - borderRadius: theme.shape.borderRadius, - backgroundColor: alpha(theme.palette.common.white, 0.15), - '&:hover': { - backgroundColor: alpha(theme.palette.common.white, 0.25), - }, - marginLeft: 0, - width: '100%', - [theme.breakpoints.up('sm')]: { - marginLeft: theme.spacing(1), - width: 'auto', - }, -})); - -const SearchIconWrapper = styled('div')(({ theme }) => ({ - padding: theme.spacing(0, 2), - height: '100%', - position: 'absolute', - pointerEvents: 'none', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', -})); - -const StyledInputBase = styled(InputBase)(({ theme }) => ({ - color: 'inherit', - width: '100%', - '& .MuiInputBase-input': { - padding: theme.spacing(1, 1, 1, 0), - // vertical padding + font size from searchIcon - paddingLeft: `calc(1em + ${theme.spacing(4)})`, - transition: theme.transitions.create('width'), - [theme.breakpoints.up('sm')]: { - width: '12ch', - '&:focus': { - width: '20ch', - }, - }, - }, -})); - -export default function SearchAppBar() { - return ( - - - - - - - - MUI - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/app-bar/app-bar.md b/docs/data/material/components/app-bar/app-bar.md index 71fa5640992909..8a49e01964a311 100644 --- a/docs/data/material/components/app-bar/app-bar.md +++ b/docs/data/material/components/app-bar/app-bar.md @@ -19,45 +19,45 @@ It can transform into a contextual action bar or be used as a navbar. ## Basic App bar -{{"demo": "ButtonAppBar.js", "bg": true}} +{{"component": "file://./demos/button/index.ts", "bg": true}} ## App bar with menu -{{"demo": "MenuAppBar.js", "bg": true}} +{{"component": "file://./demos/menu/index.ts", "bg": true}} ## App bar with responsive menu -{{"demo": "ResponsiveAppBar.js", "bg": true}} +{{"component": "file://./demos/responsive/index.ts", "bg": true}} ## App bar with search field A side searchbar. -{{"demo": "SearchAppBar.js", "bg": true}} +{{"component": "file://./demos/search/index.ts", "bg": true}} ## Responsive App bar with Drawer -{{"demo": "DrawerAppBar.js", "bg": true,"iframe": true}} +{{"component": "file://./demos/drawer/index.ts", "bg": true,"iframe": true}} ## App bar with a primary search field A primary searchbar. -{{"demo": "PrimarySearchAppBar.js", "bg": true}} +{{"component": "file://./demos/primary-search/index.ts", "bg": true}} ## Dense (desktop only) -{{"demo": "DenseAppBar.js", "bg": true}} +{{"component": "file://./demos/dense/index.ts", "bg": true}} ## Prominent A prominent app bar. -{{"demo": "ProminentAppBar.js", "bg": true}} +{{"component": "file://./demos/prominent/index.ts", "bg": true}} ## Bottom App bar -{{"demo": "BottomAppBar.js", "iframe": true, "maxWidth": 400}} +{{"component": "file://./demos/bottom/index.ts", "iframe": true, "maxWidth": 400}} ## Fixed placement @@ -104,19 +104,19 @@ You can use the `useScrollTrigger()` hook to respond to user scroll actions. The app bar hides on scroll down to leave more space for reading. -{{"demo": "HideAppBar.js", "iframe": true, "disableLiveEdit": true}} +{{"component": "file://./demos/hide/index.ts", "iframe": true, "disableLiveEdit": true}} ### Elevate App bar The app bar elevates on scroll to communicate that the user is not at the top of the page. -{{"demo": "ElevateAppBar.js", "iframe": true, "disableLiveEdit": true}} +{{"component": "file://./demos/elevate/index.ts", "iframe": true, "disableLiveEdit": true}} ### Back to top A floating action button appears on scroll to make it easy to get back to the top of the page. -{{"demo": "BackToTop.js", "iframe": true, "disableLiveEdit": true}} +{{"component": "file://./demos/back-to-top/index.ts", "iframe": true, "disableLiveEdit": true}} ### `useScrollTrigger([options]) => trigger` @@ -151,4 +151,4 @@ function HideOnScroll(props) { Following the [Material Design guidelines](https://m2.material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the app bar in dark mode. You can override this behavior by setting the `enableColorOnDark` prop to `true`. -{{"demo": "EnableColorOnDarkAppBar.js", "bg": true}} +{{"component": "file://./demos/enable-color-on-dark/index.ts", "bg": true}} diff --git a/docs/data/material/components/app-bar/BackToTop.tsx b/docs/data/material/components/app-bar/demos/back-to-top/BackToTop.tsx similarity index 98% rename from docs/data/material/components/app-bar/BackToTop.tsx rename to docs/data/material/components/app-bar/demos/back-to-top/BackToTop.tsx index 844439ea2913dd..2ad6e95bfad9b6 100644 --- a/docs/data/material/components/app-bar/BackToTop.tsx +++ b/docs/data/material/components/app-bar/demos/back-to-top/BackToTop.tsx @@ -58,6 +58,7 @@ function ScrollTop(props: Props) { export default function BackToTop(props: Props) { return ( + {/* @focus-start */} @@ -84,6 +85,7 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`, + {/* @focus-end */} ); } diff --git a/docs/data/material/components/app-bar/demos/back-to-top/client.ts b/docs/data/material/components/app-bar/demos/back-to-top/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/app-bar/demos/back-to-top/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/app-bar/demos/back-to-top/index.ts b/docs/data/material/components/app-bar/demos/back-to-top/index.ts new file mode 100644 index 00000000000000..bfb13d01525f7b --- /dev/null +++ b/docs/data/material/components/app-bar/demos/back-to-top/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BackToTop from './BackToTop'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BackToTop, { ClientProvider }); diff --git a/docs/data/material/components/app-bar/BottomAppBar.tsx b/docs/data/material/components/app-bar/demos/bottom/BottomAppBar.tsx similarity index 98% rename from docs/data/material/components/app-bar/BottomAppBar.tsx rename to docs/data/material/components/app-bar/demos/bottom/BottomAppBar.tsx index 24afbb0929ace6..7bf448c5935b4b 100644 --- a/docs/data/material/components/app-bar/BottomAppBar.tsx +++ b/docs/data/material/components/app-bar/demos/bottom/BottomAppBar.tsx @@ -80,6 +80,7 @@ const StyledFab = styled(Fab)({ export default function BottomAppBar() { return ( + {/* @focus-start */} @@ -125,6 +126,7 @@ export default function BottomAppBar() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/app-bar/demos/bottom/client.ts b/docs/data/material/components/app-bar/demos/bottom/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/app-bar/demos/bottom/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/app-bar/demos/bottom/index.ts b/docs/data/material/components/app-bar/demos/bottom/index.ts new file mode 100644 index 00000000000000..7386e523211fab --- /dev/null +++ b/docs/data/material/components/app-bar/demos/bottom/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BottomAppBar from './BottomAppBar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BottomAppBar, { ClientProvider }); diff --git a/docs/data/material/components/app-bar/ButtonAppBar.tsx b/docs/data/material/components/app-bar/demos/button/ButtonAppBar.tsx similarity index 94% rename from docs/data/material/components/app-bar/ButtonAppBar.tsx rename to docs/data/material/components/app-bar/demos/button/ButtonAppBar.tsx index a9a57f5a53bdc7..efdb444fa1434c 100644 --- a/docs/data/material/components/app-bar/ButtonAppBar.tsx +++ b/docs/data/material/components/app-bar/demos/button/ButtonAppBar.tsx @@ -9,6 +9,7 @@ import MenuIcon from '@mui/icons-material/Menu'; export default function ButtonAppBar() { return ( + {/* @focus-start */} Login + {/* @focus-end */} ); } diff --git a/docs/data/material/components/app-bar/demos/button/client.ts b/docs/data/material/components/app-bar/demos/button/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/app-bar/demos/button/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/app-bar/demos/button/index.ts b/docs/data/material/components/app-bar/demos/button/index.ts new file mode 100644 index 00000000000000..aeb121c5222ef1 --- /dev/null +++ b/docs/data/material/components/app-bar/demos/button/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ButtonAppBar from './ButtonAppBar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ButtonAppBar, { ClientProvider }); diff --git a/docs/data/material/components/app-bar/DenseAppBar.tsx b/docs/data/material/components/app-bar/demos/dense/DenseAppBar.tsx similarity index 93% rename from docs/data/material/components/app-bar/DenseAppBar.tsx rename to docs/data/material/components/app-bar/demos/dense/DenseAppBar.tsx index a170710ef0fa2b..d570ec00002d33 100644 --- a/docs/data/material/components/app-bar/DenseAppBar.tsx +++ b/docs/data/material/components/app-bar/demos/dense/DenseAppBar.tsx @@ -8,6 +8,7 @@ import MenuIcon from '@mui/icons-material/Menu'; export default function DenseAppBar() { return ( + {/* @focus-start */} @@ -24,6 +25,7 @@ export default function DenseAppBar() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/app-bar/demos/dense/client.ts b/docs/data/material/components/app-bar/demos/dense/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/app-bar/demos/dense/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/app-bar/demos/dense/index.ts b/docs/data/material/components/app-bar/demos/dense/index.ts new file mode 100644 index 00000000000000..8c8d393cf381d8 --- /dev/null +++ b/docs/data/material/components/app-bar/demos/dense/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DenseAppBar from './DenseAppBar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DenseAppBar, { ClientProvider }); diff --git a/docs/data/material/components/app-bar/DrawerAppBar.tsx b/docs/data/material/components/app-bar/demos/drawer/DrawerAppBar.tsx similarity index 99% rename from docs/data/material/components/app-bar/DrawerAppBar.tsx rename to docs/data/material/components/app-bar/demos/drawer/DrawerAppBar.tsx index 1051b04cbe496c..ba78fe0bdc80f4 100644 --- a/docs/data/material/components/app-bar/DrawerAppBar.tsx +++ b/docs/data/material/components/app-bar/demos/drawer/DrawerAppBar.tsx @@ -26,6 +26,7 @@ const drawerWidth = 240; const navItems = ['Home', 'About', 'Contact']; export default function DrawerAppBar(props: Props) { + // @focus-start @padding 1 const { window } = props; const [mobileOpen, setMobileOpen] = React.useState(false); @@ -139,4 +140,5 @@ export default function DrawerAppBar(props: Props) { ); + // @focus-end } diff --git a/docs/data/material/components/app-bar/demos/drawer/client.ts b/docs/data/material/components/app-bar/demos/drawer/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/app-bar/demos/drawer/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/app-bar/demos/drawer/index.ts b/docs/data/material/components/app-bar/demos/drawer/index.ts new file mode 100644 index 00000000000000..eb5e667c942be1 --- /dev/null +++ b/docs/data/material/components/app-bar/demos/drawer/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DrawerAppBar from './DrawerAppBar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DrawerAppBar, { ClientProvider }); diff --git a/docs/data/material/components/app-bar/ElevateAppBar.tsx b/docs/data/material/components/app-bar/demos/elevate/ElevateAppBar.tsx similarity index 97% rename from docs/data/material/components/app-bar/ElevateAppBar.tsx rename to docs/data/material/components/app-bar/demos/elevate/ElevateAppBar.tsx index 41f9f304c89c37..953dd9ef78eeec 100644 --- a/docs/data/material/components/app-bar/ElevateAppBar.tsx +++ b/docs/data/material/components/app-bar/demos/elevate/ElevateAppBar.tsx @@ -37,6 +37,7 @@ function ElevationScroll(props: Props) { export default function ElevateAppBar(props: Props) { return ( + {/* @focus-start */} @@ -60,6 +61,7 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`, .join('\n')} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/app-bar/demos/elevate/client.ts b/docs/data/material/components/app-bar/demos/elevate/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/app-bar/demos/elevate/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/app-bar/demos/elevate/index.ts b/docs/data/material/components/app-bar/demos/elevate/index.ts new file mode 100644 index 00000000000000..61dc3c1d07be75 --- /dev/null +++ b/docs/data/material/components/app-bar/demos/elevate/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ElevateAppBar from './ElevateAppBar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ElevateAppBar, { ClientProvider }); diff --git a/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx b/docs/data/material/components/app-bar/demos/enable-color-on-dark/EnableColorOnDarkAppBar.tsx similarity index 95% rename from docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx rename to docs/data/material/components/app-bar/demos/enable-color-on-dark/EnableColorOnDarkAppBar.tsx index aa6877d3978391..7ba13592f93860 100644 --- a/docs/data/material/components/app-bar/EnableColorOnDarkAppBar.tsx +++ b/docs/data/material/components/app-bar/demos/enable-color-on-dark/EnableColorOnDarkAppBar.tsx @@ -31,6 +31,7 @@ const darkTheme = createTheme({ export default function EnableColorOnDarkAppBar() { return ( + {/* @focus-start */} {appBarLabel('enableColorOnDark')} @@ -39,6 +40,7 @@ export default function EnableColorOnDarkAppBar() { {appBarLabel('default')} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/app-bar/demos/enable-color-on-dark/client.ts b/docs/data/material/components/app-bar/demos/enable-color-on-dark/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/app-bar/demos/enable-color-on-dark/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/app-bar/demos/enable-color-on-dark/index.ts b/docs/data/material/components/app-bar/demos/enable-color-on-dark/index.ts new file mode 100644 index 00000000000000..96b575144db1e1 --- /dev/null +++ b/docs/data/material/components/app-bar/demos/enable-color-on-dark/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import EnableColorOnDarkAppBar from './EnableColorOnDarkAppBar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, EnableColorOnDarkAppBar, { ClientProvider }); diff --git a/docs/data/material/components/app-bar/HideAppBar.tsx b/docs/data/material/components/app-bar/demos/hide/HideAppBar.tsx similarity index 97% rename from docs/data/material/components/app-bar/HideAppBar.tsx rename to docs/data/material/components/app-bar/demos/hide/HideAppBar.tsx index 9c4edd8a1af106..f85d6adb017629 100644 --- a/docs/data/material/components/app-bar/HideAppBar.tsx +++ b/docs/data/material/components/app-bar/demos/hide/HideAppBar.tsx @@ -36,6 +36,7 @@ function HideOnScroll(props: Props) { export default function HideAppBar(props: Props) { return ( + {/* @focus-start */} @@ -59,6 +60,7 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`, .join('\n')} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/app-bar/demos/hide/client.ts b/docs/data/material/components/app-bar/demos/hide/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/app-bar/demos/hide/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/app-bar/demos/hide/index.ts b/docs/data/material/components/app-bar/demos/hide/index.ts new file mode 100644 index 00000000000000..8b85a15ff513e9 --- /dev/null +++ b/docs/data/material/components/app-bar/demos/hide/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HideAppBar from './HideAppBar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HideAppBar, { ClientProvider }); diff --git a/docs/data/material/components/app-bar/MenuAppBar.tsx b/docs/data/material/components/app-bar/demos/menu/MenuAppBar.tsx similarity index 98% rename from docs/data/material/components/app-bar/MenuAppBar.tsx rename to docs/data/material/components/app-bar/demos/menu/MenuAppBar.tsx index 9ce40c662d439a..53ccda830fcddb 100644 --- a/docs/data/material/components/app-bar/MenuAppBar.tsx +++ b/docs/data/material/components/app-bar/demos/menu/MenuAppBar.tsx @@ -13,6 +13,7 @@ import MenuItem from '@mui/material/MenuItem'; import Menu from '@mui/material/Menu'; export default function MenuAppBar() { + // @focus-start @padding 1 const [auth, setAuth] = React.useState(true); const [anchorEl, setAnchorEl] = React.useState(null); @@ -92,4 +93,5 @@ export default function MenuAppBar() { ); + // @focus-end } diff --git a/docs/data/material/components/app-bar/demos/menu/client.ts b/docs/data/material/components/app-bar/demos/menu/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/app-bar/demos/menu/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/app-bar/demos/menu/index.ts b/docs/data/material/components/app-bar/demos/menu/index.ts new file mode 100644 index 00000000000000..823193053c0e95 --- /dev/null +++ b/docs/data/material/components/app-bar/demos/menu/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MenuAppBar from './MenuAppBar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MenuAppBar, { ClientProvider }); diff --git a/docs/data/material/components/app-bar/PrimarySearchAppBar.tsx b/docs/data/material/components/app-bar/demos/primary-search/PrimarySearchAppBar.tsx similarity index 99% rename from docs/data/material/components/app-bar/PrimarySearchAppBar.tsx rename to docs/data/material/components/app-bar/demos/primary-search/PrimarySearchAppBar.tsx index c83f2a84bcdda7..5f1d026fc8a34c 100644 --- a/docs/data/material/components/app-bar/PrimarySearchAppBar.tsx +++ b/docs/data/material/components/app-bar/demos/primary-search/PrimarySearchAppBar.tsx @@ -57,6 +57,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({ })); export default function PrimarySearchAppBar() { + // @focus-start @padding 1 const [anchorEl, setAnchorEl] = React.useState(null); const [mobileMoreAnchorEl, setMobileMoreAnchorEl] = React.useState(null); @@ -231,4 +232,5 @@ export default function PrimarySearchAppBar() { {renderMenu} ); + // @focus-end } diff --git a/docs/data/material/components/app-bar/demos/primary-search/client.ts b/docs/data/material/components/app-bar/demos/primary-search/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/app-bar/demos/primary-search/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/app-bar/demos/primary-search/index.ts b/docs/data/material/components/app-bar/demos/primary-search/index.ts new file mode 100644 index 00000000000000..d6984bd1435f5d --- /dev/null +++ b/docs/data/material/components/app-bar/demos/primary-search/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PrimarySearchAppBar from './PrimarySearchAppBar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PrimarySearchAppBar, { ClientProvider }); diff --git a/docs/data/material/components/app-bar/ProminentAppBar.tsx b/docs/data/material/components/app-bar/demos/prominent/ProminentAppBar.tsx similarity index 96% rename from docs/data/material/components/app-bar/ProminentAppBar.tsx rename to docs/data/material/components/app-bar/demos/prominent/ProminentAppBar.tsx index c7cf66b17032dc..5c68001f19a6e1 100644 --- a/docs/data/material/components/app-bar/ProminentAppBar.tsx +++ b/docs/data/material/components/app-bar/demos/prominent/ProminentAppBar.tsx @@ -21,6 +21,7 @@ const StyledToolbar = styled(Toolbar)(({ theme }) => ({ export default function ProminentAppBar() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/app-bar/demos/prominent/client.ts b/docs/data/material/components/app-bar/demos/prominent/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/app-bar/demos/prominent/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/app-bar/demos/prominent/index.ts b/docs/data/material/components/app-bar/demos/prominent/index.ts new file mode 100644 index 00000000000000..b95efbfd1be01a --- /dev/null +++ b/docs/data/material/components/app-bar/demos/prominent/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ProminentAppBar from './ProminentAppBar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ProminentAppBar, { ClientProvider }); diff --git a/docs/data/material/components/app-bar/ResponsiveAppBar.tsx b/docs/data/material/components/app-bar/demos/responsive/ResponsiveAppBar.tsx similarity index 100% rename from docs/data/material/components/app-bar/ResponsiveAppBar.tsx rename to docs/data/material/components/app-bar/demos/responsive/ResponsiveAppBar.tsx diff --git a/docs/data/material/components/app-bar/demos/responsive/client.ts b/docs/data/material/components/app-bar/demos/responsive/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/app-bar/demos/responsive/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/app-bar/demos/responsive/index.ts b/docs/data/material/components/app-bar/demos/responsive/index.ts new file mode 100644 index 00000000000000..1f3105638f3f22 --- /dev/null +++ b/docs/data/material/components/app-bar/demos/responsive/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ResponsiveAppBar from './ResponsiveAppBar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ResponsiveAppBar, { ClientProvider }); diff --git a/docs/data/material/components/app-bar/SearchAppBar.tsx b/docs/data/material/components/app-bar/demos/search/SearchAppBar.tsx similarity index 97% rename from docs/data/material/components/app-bar/SearchAppBar.tsx rename to docs/data/material/components/app-bar/demos/search/SearchAppBar.tsx index c193b74a92c415..839a7a27e5df73 100644 --- a/docs/data/material/components/app-bar/SearchAppBar.tsx +++ b/docs/data/material/components/app-bar/demos/search/SearchAppBar.tsx @@ -53,6 +53,7 @@ const StyledInputBase = styled(InputBase)(({ theme }) => ({ export default function SearchAppBar() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/app-bar/demos/search/client.ts b/docs/data/material/components/app-bar/demos/search/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/app-bar/demos/search/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/app-bar/demos/search/index.ts b/docs/data/material/components/app-bar/demos/search/index.ts new file mode 100644 index 00000000000000..fad4b0456b2ba5 --- /dev/null +++ b/docs/data/material/components/app-bar/demos/search/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SearchAppBar from './SearchAppBar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SearchAppBar, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/Asynchronous.js b/docs/data/material/components/autocomplete/Asynchronous.js deleted file mode 100644 index fdc8199accc1b6..00000000000000 --- a/docs/data/material/components/autocomplete/Asynchronous.js +++ /dev/null @@ -1,116 +0,0 @@ -import * as React from 'react'; -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; -import CircularProgress from '@mui/material/CircularProgress'; - -function sleep(duration) { - return new Promise((resolve) => { - setTimeout(() => { - resolve(); - }, duration); - }); -} - -export default function Asynchronous() { - const [open, setOpen] = React.useState(false); - const [options, setOptions] = React.useState([]); - const [loading, setLoading] = React.useState(false); - - const handleOpen = () => { - setOpen(true); - (async () => { - setLoading(true); - await sleep(1e3); // For demo purposes. - setLoading(false); - - setOptions([...topFilms]); - })(); - }; - - const handleClose = () => { - setOpen(false); - setOptions([]); - }; - - return ( - option.title === value.title} - getOptionLabel={(option) => option.title} - options={options} - loading={loading} - renderInput={(params) => ( - - {loading ? : null} - {params.slotProps.input.endAdornment} - - ), - }, - }} - /> - )} - /> - ); -} - -// Top films as rated by IMDb users. http://www.imdb.com/chart/top -const topFilms = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, -]; diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.js b/docs/data/material/components/autocomplete/AutocompleteHint.js deleted file mode 100644 index eabea1b08af6f0..00000000000000 --- a/docs/data/material/components/autocomplete/AutocompleteHint.js +++ /dev/null @@ -1,198 +0,0 @@ -import * as React from 'react'; -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; - -export default function AutocompleteHint() { - const hint = React.useRef(''); - const [inputValue, setInputValue] = React.useState(''); - return ( - { - if (event.key === 'Tab') { - if (hint.current) { - setInputValue(hint.current); - event.preventDefault(); - } - } - }} - onClose={() => { - hint.current = ''; - }} - onChange={(event, newValue) => { - setInputValue(newValue && newValue.label ? newValue.label : ''); - }} - disablePortal - resetHighlightOnMouseLeave - inputValue={inputValue} - id="combo-box-hint-demo" - options={top100Films} - sx={{ width: 300 }} - renderInput={(params) => { - return ( - - - {hint.current} - - { - const newValue = event.target.value; - setInputValue(newValue); - const matchingOption = top100Films.find((option) => - option.label.startsWith(newValue), - ); - - if (newValue && matchingOption) { - hint.current = matchingOption.label; - } else { - hint.current = ''; - } - }} - label="Movie" - /> - - ); - }} - /> - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { label: 'The Shawshank Redemption', year: 1994 }, - { label: 'The Godfather', year: 1972 }, - { label: 'The Godfather: Part II', year: 1974 }, - { label: 'The Dark Knight', year: 2008 }, - { label: '12 Angry Men', year: 1957 }, - { label: "Schindler's List", year: 1993 }, - { label: 'Pulp Fiction', year: 1994 }, - { - label: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { label: 'The Good, the Bad and the Ugly', year: 1966 }, - { label: 'Fight Club', year: 1999 }, - { - label: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - label: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { label: 'Forrest Gump', year: 1994 }, - { label: 'Inception', year: 2010 }, - { - label: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { label: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { label: 'Goodfellas', year: 1990 }, - { label: 'The Matrix', year: 1999 }, - { label: 'Seven Samurai', year: 1954 }, - { - label: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { label: 'City of God', year: 2002 }, - { label: 'Se7en', year: 1995 }, - { label: 'The Silence of the Lambs', year: 1991 }, - { label: "It's a Wonderful Life", year: 1946 }, - { label: 'Life Is Beautiful', year: 1997 }, - { label: 'The Usual Suspects', year: 1995 }, - { label: 'Léon: The Professional', year: 1994 }, - { label: 'Spirited Away', year: 2001 }, - { label: 'Saving Private Ryan', year: 1998 }, - { label: 'Once Upon a Time in the West', year: 1968 }, - { label: 'American History X', year: 1998 }, - { label: 'Interstellar', year: 2014 }, - { label: 'Casablanca', year: 1942 }, - { label: 'City Lights', year: 1931 }, - { label: 'Psycho', year: 1960 }, - { label: 'The Green Mile', year: 1999 }, - { label: 'The Intouchables', year: 2011 }, - { label: 'Modern Times', year: 1936 }, - { label: 'Raiders of the Lost Ark', year: 1981 }, - { label: 'Rear Window', year: 1954 }, - { label: 'The Pianist', year: 2002 }, - { label: 'The Departed', year: 2006 }, - { label: 'Terminator 2: Judgment Day', year: 1991 }, - { label: 'Back to the Future', year: 1985 }, - { label: 'Whiplash', year: 2014 }, - { label: 'Gladiator', year: 2000 }, - { label: 'Memento', year: 2000 }, - { label: 'The Prestige', year: 2006 }, - { label: 'The Lion King', year: 1994 }, - { label: 'Apocalypse Now', year: 1979 }, - { label: 'Alien', year: 1979 }, - { label: 'Sunset Boulevard', year: 1950 }, - { - label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { label: 'The Great Dictator', year: 1940 }, - { label: 'Cinema Paradiso', year: 1988 }, - { label: 'The Lives of Others', year: 2006 }, - { label: 'Grave of the Fireflies', year: 1988 }, - { label: 'Paths of Glory', year: 1957 }, - { label: 'Django Unchained', year: 2012 }, - { label: 'The Shining', year: 1980 }, - { label: 'WALL·E', year: 2008 }, - { label: 'American Beauty', year: 1999 }, - { label: 'The Dark Knight Rises', year: 2012 }, - { label: 'Princess Mononoke', year: 1997 }, - { label: 'Aliens', year: 1986 }, - { label: 'Oldboy', year: 2003 }, - { label: 'Once Upon a Time in America', year: 1984 }, - { label: 'Witness for the Prosecution', year: 1957 }, - { label: 'Das Boot', year: 1981 }, - { label: 'Citizen Kane', year: 1941 }, - { label: 'North by Northwest', year: 1959 }, - { label: 'Vertigo', year: 1958 }, - { - label: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { label: 'Reservoir Dogs', year: 1992 }, - { label: 'Braveheart', year: 1995 }, - { label: 'M', year: 1931 }, - { label: 'Requiem for a Dream', year: 2000 }, - { label: 'Amélie', year: 2001 }, - { label: 'A Clockwork Orange', year: 1971 }, - { label: 'Like Stars on Earth', year: 2007 }, - { label: 'Taxi Driver', year: 1976 }, - { label: 'Lawrence of Arabia', year: 1962 }, - { label: 'Double Indemnity', year: 1944 }, - { - label: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { label: 'Amadeus', year: 1984 }, - { label: 'To Kill a Mockingbird', year: 1962 }, - { label: 'Toy Story 3', year: 2010 }, - { label: 'Logan', year: 2017 }, - { label: 'Full Metal Jacket', year: 1987 }, - { label: 'Dangal', year: 2016 }, - { label: 'The Sting', year: 1973 }, - { label: '2001: A Space Odyssey', year: 1968 }, - { label: "Singin' in the Rain", year: 1952 }, - { label: 'Toy Story', year: 1995 }, - { label: 'Bicycle Thieves', year: 1948 }, - { label: 'The Kid', year: 1921 }, - { label: 'Inglourious Basterds', year: 2009 }, - { label: 'Snatch', year: 2000 }, - { label: '3 Idiots', year: 2009 }, - { label: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/CheckboxesTags.js b/docs/data/material/components/autocomplete/CheckboxesTags.js deleted file mode 100644 index 53dc0603f35c51..00000000000000 --- a/docs/data/material/components/autocomplete/CheckboxesTags.js +++ /dev/null @@ -1,85 +0,0 @@ -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; -import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'; -import CheckBoxIcon from '@mui/icons-material/CheckBox'; - -export default function CheckboxesTags() { - return ( - option.title} - renderOption={(props, option, { selected }) => { - const { key, ...optionProps } = props; - const SelectionIcon = selected ? CheckBoxIcon : CheckBoxOutlineBlankIcon; - - return ( -
  • - - {option.title} -
    • - ); - }} - style={{ width: 500 }} - renderInput={(params) => ( - - )} - /> - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, -]; diff --git a/docs/data/material/components/autocomplete/ComboBox.js b/docs/data/material/components/autocomplete/ComboBox.js deleted file mode 100644 index 5b2fae26df430a..00000000000000 --- a/docs/data/material/components/autocomplete/ComboBox.js +++ /dev/null @@ -1,14 +0,0 @@ -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; -import top100Films from './top100Films'; - -export default function ComboBox() { - return ( - } - /> - ); -} diff --git a/docs/data/material/components/autocomplete/ComboBox.tsx.preview b/docs/data/material/components/autocomplete/ComboBox.tsx.preview deleted file mode 100644 index 7382e2d5a10c39..00000000000000 --- a/docs/data/material/components/autocomplete/ComboBox.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - } -/> \ No newline at end of file diff --git a/docs/data/material/components/autocomplete/ControllableStates.js b/docs/data/material/components/autocomplete/ControllableStates.js deleted file mode 100644 index 0911878aedcd76..00000000000000 --- a/docs/data/material/components/autocomplete/ControllableStates.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; - -const options = ['Option 1', 'Option 2']; - -export default function ControllableStates() { - const [value, setValue] = React.useState(options[0]); - const [inputValue, setInputValue] = React.useState(''); - - return ( -
    -
    {`value: ${value !== null ? `'${value}'` : 'null'}`}
    -
    {`inputValue: '${inputValue}'`}
    -
    - { - setValue(newValue); - }} - inputValue={inputValue} - onInputChange={(event, newInputValue) => { - setInputValue(newInputValue); - }} - id="controllable-states-demo" - options={options} - sx={{ width: 300 }} - renderInput={(params) => } - /> -
    - ); -} diff --git a/docs/data/material/components/autocomplete/CountrySelect.js b/docs/data/material/components/autocomplete/CountrySelect.js deleted file mode 100644 index 4e6c30ac28c059..00000000000000 --- a/docs/data/material/components/autocomplete/CountrySelect.js +++ /dev/null @@ -1,474 +0,0 @@ -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; - -export default function CountrySelect() { - return ( - option.label} - renderOption={(props, option) => { - const { key, ...optionProps } = props; - return ( - img': { mr: 2, flexShrink: 0 } }} - {...optionProps} - > - - {option.label} ({option.code}) +{option.phone} - - ); - }} - renderInput={(params) => ( - - )} - /> - ); -} - -// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js -const countries = [ - { code: 'AD', label: 'Andorra', phone: '376' }, - { - code: 'AE', - label: 'United Arab Emirates', - phone: '971', - }, - { code: 'AF', label: 'Afghanistan', phone: '93' }, - { - code: 'AG', - label: 'Antigua and Barbuda', - phone: '1-268', - }, - { code: 'AI', label: 'Anguilla', phone: '1-264' }, - { code: 'AL', label: 'Albania', phone: '355' }, - { code: 'AM', label: 'Armenia', phone: '374' }, - { code: 'AO', label: 'Angola', phone: '244' }, - { code: 'AQ', label: 'Antarctica', phone: '672' }, - { code: 'AR', label: 'Argentina', phone: '54' }, - { code: 'AS', label: 'American Samoa', phone: '1-684' }, - { code: 'AT', label: 'Austria', phone: '43' }, - { - code: 'AU', - label: 'Australia', - phone: '61', - suggested: true, - }, - { code: 'AW', label: 'Aruba', phone: '297' }, - { code: 'AX', label: 'Alland Islands', phone: '358' }, - { code: 'AZ', label: 'Azerbaijan', phone: '994' }, - { - code: 'BA', - label: 'Bosnia and Herzegovina', - phone: '387', - }, - { code: 'BB', label: 'Barbados', phone: '1-246' }, - { code: 'BD', label: 'Bangladesh', phone: '880' }, - { code: 'BE', label: 'Belgium', phone: '32' }, - { code: 'BF', label: 'Burkina Faso', phone: '226' }, - { code: 'BG', label: 'Bulgaria', phone: '359' }, - { code: 'BH', label: 'Bahrain', phone: '973' }, - { code: 'BI', label: 'Burundi', phone: '257' }, - { code: 'BJ', label: 'Benin', phone: '229' }, - { code: 'BL', label: 'Saint Barthelemy', phone: '590' }, - { code: 'BM', label: 'Bermuda', phone: '1-441' }, - { code: 'BN', label: 'Brunei Darussalam', phone: '673' }, - { code: 'BO', label: 'Bolivia', phone: '591' }, - { code: 'BR', label: 'Brazil', phone: '55' }, - { code: 'BS', label: 'Bahamas', phone: '1-242' }, - { code: 'BT', label: 'Bhutan', phone: '975' }, - { code: 'BV', label: 'Bouvet Island', phone: '47' }, - { code: 'BW', label: 'Botswana', phone: '267' }, - { code: 'BY', label: 'Belarus', phone: '375' }, - { code: 'BZ', label: 'Belize', phone: '501' }, - { - code: 'CA', - label: 'Canada', - phone: '1', - suggested: true, - }, - { - code: 'CC', - label: 'Cocos (Keeling) Islands', - phone: '61', - }, - { - code: 'CD', - label: 'Congo, Democratic Republic of the', - phone: '243', - }, - { - code: 'CF', - label: 'Central African Republic', - phone: '236', - }, - { - code: 'CG', - label: 'Congo, Republic of the', - phone: '242', - }, - { code: 'CH', label: 'Switzerland', phone: '41' }, - { code: 'CI', label: "Cote d'Ivoire", phone: '225' }, - { code: 'CK', label: 'Cook Islands', phone: '682' }, - { code: 'CL', label: 'Chile', phone: '56' }, - { code: 'CM', label: 'Cameroon', phone: '237' }, - { code: 'CN', label: 'China', phone: '86' }, - { code: 'CO', label: 'Colombia', phone: '57' }, - { code: 'CR', label: 'Costa Rica', phone: '506' }, - { code: 'CU', label: 'Cuba', phone: '53' }, - { code: 'CV', label: 'Cape Verde', phone: '238' }, - { code: 'CW', label: 'Curacao', phone: '599' }, - { code: 'CX', label: 'Christmas Island', phone: '61' }, - { code: 'CY', label: 'Cyprus', phone: '357' }, - { code: 'CZ', label: 'Czech Republic', phone: '420' }, - { - code: 'DE', - label: 'Germany', - phone: '49', - suggested: true, - }, - { code: 'DJ', label: 'Djibouti', phone: '253' }, - { code: 'DK', label: 'Denmark', phone: '45' }, - { code: 'DM', label: 'Dominica', phone: '1-767' }, - { - code: 'DO', - label: 'Dominican Republic', - phone: '1-809', - }, - { code: 'DZ', label: 'Algeria', phone: '213' }, - { code: 'EC', label: 'Ecuador', phone: '593' }, - { code: 'EE', label: 'Estonia', phone: '372' }, - { code: 'EG', label: 'Egypt', phone: '20' }, - { code: 'EH', label: 'Western Sahara', phone: '212' }, - { code: 'ER', label: 'Eritrea', phone: '291' }, - { code: 'ES', label: 'Spain', phone: '34' }, - { code: 'ET', label: 'Ethiopia', phone: '251' }, - { code: 'FI', label: 'Finland', phone: '358' }, - { code: 'FJ', label: 'Fiji', phone: '679' }, - { - code: 'FK', - label: 'Falkland Islands (Malvinas)', - phone: '500', - }, - { - code: 'FM', - label: 'Micronesia, Federated States of', - phone: '691', - }, - { code: 'FO', label: 'Faroe Islands', phone: '298' }, - { - code: 'FR', - label: 'France', - phone: '33', - suggested: true, - }, - { code: 'GA', label: 'Gabon', phone: '241' }, - { code: 'GB', label: 'United Kingdom', phone: '44' }, - { code: 'GD', label: 'Grenada', phone: '1-473' }, - { code: 'GE', label: 'Georgia', phone: '995' }, - { code: 'GF', label: 'French Guiana', phone: '594' }, - { code: 'GG', label: 'Guernsey', phone: '44' }, - { code: 'GH', label: 'Ghana', phone: '233' }, - { code: 'GI', label: 'Gibraltar', phone: '350' }, - { code: 'GL', label: 'Greenland', phone: '299' }, - { code: 'GM', label: 'Gambia', phone: '220' }, - { code: 'GN', label: 'Guinea', phone: '224' }, - { code: 'GP', label: 'Guadeloupe', phone: '590' }, - { code: 'GQ', label: 'Equatorial Guinea', phone: '240' }, - { code: 'GR', label: 'Greece', phone: '30' }, - { - code: 'GS', - label: 'South Georgia and the South Sandwich Islands', - phone: '500', - }, - { code: 'GT', label: 'Guatemala', phone: '502' }, - { code: 'GU', label: 'Guam', phone: '1-671' }, - { code: 'GW', label: 'Guinea-Bissau', phone: '245' }, - { code: 'GY', label: 'Guyana', phone: '592' }, - { code: 'HK', label: 'Hong Kong', phone: '852' }, - { - code: 'HM', - label: 'Heard Island and McDonald Islands', - phone: '672', - }, - { code: 'HN', label: 'Honduras', phone: '504' }, - { code: 'HR', label: 'Croatia', phone: '385' }, - { code: 'HT', label: 'Haiti', phone: '509' }, - { code: 'HU', label: 'Hungary', phone: '36' }, - { code: 'ID', label: 'Indonesia', phone: '62' }, - { code: 'IE', label: 'Ireland', phone: '353' }, - { code: 'IL', label: 'Israel', phone: '972' }, - { code: 'IM', label: 'Isle of Man', phone: '44' }, - { code: 'IN', label: 'India', phone: '91' }, - { - code: 'IO', - label: 'British Indian Ocean Territory', - phone: '246', - }, - { code: 'IQ', label: 'Iraq', phone: '964' }, - { - code: 'IR', - label: 'Iran, Islamic Republic of', - phone: '98', - }, - { code: 'IS', label: 'Iceland', phone: '354' }, - { code: 'IT', label: 'Italy', phone: '39' }, - { code: 'JE', label: 'Jersey', phone: '44' }, - { code: 'JM', label: 'Jamaica', phone: '1-876' }, - { code: 'JO', label: 'Jordan', phone: '962' }, - { - code: 'JP', - label: 'Japan', - phone: '81', - suggested: true, - }, - { code: 'KE', label: 'Kenya', phone: '254' }, - { code: 'KG', label: 'Kyrgyzstan', phone: '996' }, - { code: 'KH', label: 'Cambodia', phone: '855' }, - { code: 'KI', label: 'Kiribati', phone: '686' }, - { code: 'KM', label: 'Comoros', phone: '269' }, - { - code: 'KN', - label: 'Saint Kitts and Nevis', - phone: '1-869', - }, - { - code: 'KP', - label: "Korea, Democratic People's Republic of", - phone: '850', - }, - { code: 'KR', label: 'Korea, Republic of', phone: '82' }, - { code: 'KW', label: 'Kuwait', phone: '965' }, - { code: 'KY', label: 'Cayman Islands', phone: '1-345' }, - { code: 'KZ', label: 'Kazakhstan', phone: '7' }, - { - code: 'LA', - label: "Lao People's Democratic Republic", - phone: '856', - }, - { code: 'LB', label: 'Lebanon', phone: '961' }, - { code: 'LC', label: 'Saint Lucia', phone: '1-758' }, - { code: 'LI', label: 'Liechtenstein', phone: '423' }, - { code: 'LK', label: 'Sri Lanka', phone: '94' }, - { code: 'LR', label: 'Liberia', phone: '231' }, - { code: 'LS', label: 'Lesotho', phone: '266' }, - { code: 'LT', label: 'Lithuania', phone: '370' }, - { code: 'LU', label: 'Luxembourg', phone: '352' }, - { code: 'LV', label: 'Latvia', phone: '371' }, - { code: 'LY', label: 'Libya', phone: '218' }, - { code: 'MA', label: 'Morocco', phone: '212' }, - { code: 'MC', label: 'Monaco', phone: '377' }, - { - code: 'MD', - label: 'Moldova, Republic of', - phone: '373', - }, - { code: 'ME', label: 'Montenegro', phone: '382' }, - { - code: 'MF', - label: 'Saint Martin (French part)', - phone: '590', - }, - { code: 'MG', label: 'Madagascar', phone: '261' }, - { code: 'MH', label: 'Marshall Islands', phone: '692' }, - { - code: 'MK', - label: 'Macedonia, the Former Yugoslav Republic of', - phone: '389', - }, - { code: 'ML', label: 'Mali', phone: '223' }, - { code: 'MM', label: 'Myanmar', phone: '95' }, - { code: 'MN', label: 'Mongolia', phone: '976' }, - { code: 'MO', label: 'Macao', phone: '853' }, - { - code: 'MP', - label: 'Northern Mariana Islands', - phone: '1-670', - }, - { code: 'MQ', label: 'Martinique', phone: '596' }, - { code: 'MR', label: 'Mauritania', phone: '222' }, - { code: 'MS', label: 'Montserrat', phone: '1-664' }, - { code: 'MT', label: 'Malta', phone: '356' }, - { code: 'MU', label: 'Mauritius', phone: '230' }, - { code: 'MV', label: 'Maldives', phone: '960' }, - { code: 'MW', label: 'Malawi', phone: '265' }, - { code: 'MX', label: 'Mexico', phone: '52' }, - { code: 'MY', label: 'Malaysia', phone: '60' }, - { code: 'MZ', label: 'Mozambique', phone: '258' }, - { code: 'NA', label: 'Namibia', phone: '264' }, - { code: 'NC', label: 'New Caledonia', phone: '687' }, - { code: 'NE', label: 'Niger', phone: '227' }, - { code: 'NF', label: 'Norfolk Island', phone: '672' }, - { code: 'NG', label: 'Nigeria', phone: '234' }, - { code: 'NI', label: 'Nicaragua', phone: '505' }, - { code: 'NL', label: 'Netherlands', phone: '31' }, - { code: 'NO', label: 'Norway', phone: '47' }, - { code: 'NP', label: 'Nepal', phone: '977' }, - { code: 'NR', label: 'Nauru', phone: '674' }, - { code: 'NU', label: 'Niue', phone: '683' }, - { code: 'NZ', label: 'New Zealand', phone: '64' }, - { code: 'OM', label: 'Oman', phone: '968' }, - { code: 'PA', label: 'Panama', phone: '507' }, - { code: 'PE', label: 'Peru', phone: '51' }, - { code: 'PF', label: 'French Polynesia', phone: '689' }, - { code: 'PG', label: 'Papua New Guinea', phone: '675' }, - { code: 'PH', label: 'Philippines', phone: '63' }, - { code: 'PK', label: 'Pakistan', phone: '92' }, - { code: 'PL', label: 'Poland', phone: '48' }, - { - code: 'PM', - label: 'Saint Pierre and Miquelon', - phone: '508', - }, - { code: 'PN', label: 'Pitcairn', phone: '870' }, - { code: 'PR', label: 'Puerto Rico', phone: '1' }, - { - code: 'PS', - label: 'Palestine, State of', - phone: '970', - }, - { code: 'PT', label: 'Portugal', phone: '351' }, - { code: 'PW', label: 'Palau', phone: '680' }, - { code: 'PY', label: 'Paraguay', phone: '595' }, - { code: 'QA', label: 'Qatar', phone: '974' }, - { code: 'RE', label: 'Reunion', phone: '262' }, - { code: 'RO', label: 'Romania', phone: '40' }, - { code: 'RS', label: 'Serbia', phone: '381' }, - { code: 'RU', label: 'Russian Federation', phone: '7' }, - { code: 'RW', label: 'Rwanda', phone: '250' }, - { code: 'SA', label: 'Saudi Arabia', phone: '966' }, - { code: 'SB', label: 'Solomon Islands', phone: '677' }, - { code: 'SC', label: 'Seychelles', phone: '248' }, - { code: 'SD', label: 'Sudan', phone: '249' }, - { code: 'SE', label: 'Sweden', phone: '46' }, - { code: 'SG', label: 'Singapore', phone: '65' }, - { code: 'SH', label: 'Saint Helena', phone: '290' }, - { code: 'SI', label: 'Slovenia', phone: '386' }, - { - code: 'SJ', - label: 'Svalbard and Jan Mayen', - phone: '47', - }, - { code: 'SK', label: 'Slovakia', phone: '421' }, - { code: 'SL', label: 'Sierra Leone', phone: '232' }, - { code: 'SM', label: 'San Marino', phone: '378' }, - { code: 'SN', label: 'Senegal', phone: '221' }, - { code: 'SO', label: 'Somalia', phone: '252' }, - { code: 'SR', label: 'Suriname', phone: '597' }, - { code: 'SS', label: 'South Sudan', phone: '211' }, - { - code: 'ST', - label: 'Sao Tome and Principe', - phone: '239', - }, - { code: 'SV', label: 'El Salvador', phone: '503' }, - { - code: 'SX', - label: 'Sint Maarten (Dutch part)', - phone: '1-721', - }, - { - code: 'SY', - label: 'Syrian Arab Republic', - phone: '963', - }, - { code: 'SZ', label: 'Swaziland', phone: '268' }, - { - code: 'TC', - label: 'Turks and Caicos Islands', - phone: '1-649', - }, - { code: 'TD', label: 'Chad', phone: '235' }, - { - code: 'TF', - label: 'French Southern Territories', - phone: '262', - }, - { code: 'TG', label: 'Togo', phone: '228' }, - { code: 'TH', label: 'Thailand', phone: '66' }, - { code: 'TJ', label: 'Tajikistan', phone: '992' }, - { code: 'TK', label: 'Tokelau', phone: '690' }, - { code: 'TL', label: 'Timor-Leste', phone: '670' }, - { code: 'TM', label: 'Turkmenistan', phone: '993' }, - { code: 'TN', label: 'Tunisia', phone: '216' }, - { code: 'TO', label: 'Tonga', phone: '676' }, - { code: 'TR', label: 'Turkey', phone: '90' }, - { - code: 'TT', - label: 'Trinidad and Tobago', - phone: '1-868', - }, - { code: 'TV', label: 'Tuvalu', phone: '688' }, - { - code: 'TW', - label: 'Taiwan', - phone: '886', - }, - { - code: 'TZ', - label: 'United Republic of Tanzania', - phone: '255', - }, - { code: 'UA', label: 'Ukraine', phone: '380' }, - { code: 'UG', label: 'Uganda', phone: '256' }, - { - code: 'US', - label: 'United States', - phone: '1', - suggested: true, - }, - { code: 'UY', label: 'Uruguay', phone: '598' }, - { code: 'UZ', label: 'Uzbekistan', phone: '998' }, - { - code: 'VA', - label: 'Holy See (Vatican City State)', - phone: '379', - }, - { - code: 'VC', - label: 'Saint Vincent and the Grenadines', - phone: '1-784', - }, - { code: 'VE', label: 'Venezuela', phone: '58' }, - { - code: 'VG', - label: 'British Virgin Islands', - phone: '1-284', - }, - { - code: 'VI', - label: 'US Virgin Islands', - phone: '1-340', - }, - { code: 'VN', label: 'Vietnam', phone: '84' }, - { code: 'VU', label: 'Vanuatu', phone: '678' }, - { code: 'WF', label: 'Wallis and Futuna', phone: '681' }, - { code: 'WS', label: 'Samoa', phone: '685' }, - { code: 'XK', label: 'Kosovo', phone: '383' }, - { code: 'YE', label: 'Yemen', phone: '967' }, - { code: 'YT', label: 'Mayotte', phone: '262' }, - { code: 'ZA', label: 'South Africa', phone: '27' }, - { code: 'ZM', label: 'Zambia', phone: '260' }, - { code: 'ZW', label: 'Zimbabwe', phone: '263' }, -]; diff --git a/docs/data/material/components/autocomplete/CustomInputAutocomplete.js b/docs/data/material/components/autocomplete/CustomInputAutocomplete.js deleted file mode 100644 index 5487c4f1944f75..00000000000000 --- a/docs/data/material/components/autocomplete/CustomInputAutocomplete.js +++ /dev/null @@ -1,28 +0,0 @@ -import Autocomplete from '@mui/material/Autocomplete'; - -const options = ['Option 1', 'Option 2']; - -export default function CustomInputAutocomplete() { - return ( - - ); -} diff --git a/docs/data/material/components/autocomplete/CustomSingleValueRendering.js b/docs/data/material/components/autocomplete/CustomSingleValueRendering.js deleted file mode 100644 index 47dee0633df665..00000000000000 --- a/docs/data/material/components/autocomplete/CustomSingleValueRendering.js +++ /dev/null @@ -1,78 +0,0 @@ -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; -import Chip from '@mui/material/Chip'; -import Stack from '@mui/material/Stack'; - -export default function CustomSingleValueRendering() { - return ( - - option.title} - renderValue={(value, getItemProps) => ( - - )} - renderInput={(params) => } - /> - option.title)} - freeSolo - renderValue={(value, getItemProps) => ( - - )} - renderInput={(params) => } - /> - - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, -]; diff --git a/docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx.preview b/docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx.preview deleted file mode 100644 index 62c58aed531d75..00000000000000 --- a/docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - option.title} - renderValue={(value, getItemProps) => ( - - )} - renderInput={(params) => } -/> - option.title)} - freeSolo - renderValue={(value, getItemProps) => ( - - )} - renderInput={(params) => } -/> \ No newline at end of file diff --git a/docs/data/material/components/autocomplete/CustomizedHook.js b/docs/data/material/components/autocomplete/CustomizedHook.js deleted file mode 100644 index df4234c4d8df98..00000000000000 --- a/docs/data/material/components/autocomplete/CustomizedHook.js +++ /dev/null @@ -1,368 +0,0 @@ -import useAutocomplete from '@mui/material/useAutocomplete'; -import PropTypes from 'prop-types'; -import CheckIcon from '@mui/icons-material/Check'; -import CloseIcon from '@mui/icons-material/Close'; -import { styled } from '@mui/material/styles'; -import { autocompleteClasses } from '@mui/material/Autocomplete'; - -const Root = styled('div')(({ theme }) => ({ - color: 'rgba(0,0,0,0.85)', - fontSize: '14px', - ...theme.applyStyles('dark', { - color: 'rgba(255,255,255,0.65)', - }), -})); - -const Label = styled('label')` - padding: 0 0 4px; - line-height: 1.5; - display: block; -`; - -const InputWrapper = styled('div')(({ theme }) => ({ - width: '300px', - border: '1px solid #d9d9d9', - backgroundColor: '#fff', - borderRadius: '4px', - padding: '1px', - display: 'flex', - flexWrap: 'wrap', - ...theme.applyStyles('dark', { - borderColor: '#434343', - backgroundColor: '#141414', - }), - '&:hover': { - borderColor: '#40a9ff', - ...theme.applyStyles('dark', { - borderColor: '#177ddc', - }), - }, - '&.focused': { - borderColor: '#40a9ff', - boxShadow: '0 0 0 2px rgb(24 144 255 / 0.2)', - ...theme.applyStyles('dark', { - borderColor: '#177ddc', - }), - }, - '& input': { - backgroundColor: '#fff', - color: 'rgba(0,0,0,.85)', - height: '30px', - boxSizing: 'border-box', - padding: '4px 6px', - width: '0', - minWidth: '30px', - flexGrow: 1, - border: 0, - margin: 0, - outline: 0, - ...theme.applyStyles('dark', { - color: 'rgba(255,255,255,0.65)', - backgroundColor: '#141414', - }), - }, -})); - -function Item(props) { - const { label, onDelete, ...other } = props; - return ( -
    - {label} - -
    - ); -} - -Item.propTypes = { - label: PropTypes.string.isRequired, - onDelete: PropTypes.func.isRequired, -}; - -const StyledItem = styled(Item)(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - height: '24px', - margin: '2px', - lineHeight: '22px', - backgroundColor: '#fafafa', - border: `1px solid #e8e8e8`, - borderRadius: '2px', - boxSizing: 'content-box', - padding: '0 4px 0 10px', - outline: 0, - overflow: 'hidden', - ...theme.applyStyles('dark', { - backgroundColor: 'rgba(255,255,255,0.08)', - borderColor: '#303030', - }), - '&:focus': { - borderColor: '#40a9ff', - backgroundColor: '#e6f7ff', - ...theme.applyStyles('dark', { - backgroundColor: '#003b57', - borderColor: '#177ddc', - }), - }, - '& span': { - overflow: 'hidden', - whiteSpace: 'nowrap', - textOverflow: 'ellipsis', - }, - '& svg': { - fontSize: '12px', - cursor: 'pointer', - padding: '4px', - }, -})); - -const Listbox = styled('ul')(({ theme }) => ({ - width: '300px', - margin: '2px 0 0', - padding: 0, - position: 'absolute', - listStyle: 'none', - backgroundColor: '#fff', - overflow: 'auto', - maxHeight: '250px', - borderRadius: '4px', - boxShadow: '0 2px 8px rgb(0 0 0 / 0.15)', - zIndex: 1, - ...theme.applyStyles('dark', { - backgroundColor: '#141414', - }), - '& li': { - padding: '5px 12px', - display: 'flex', - '& span': { - flexGrow: 1, - }, - '& svg': { - color: 'transparent', - }, - }, - "& li[aria-selected='true']": { - backgroundColor: '#fafafa', - fontWeight: 600, - ...theme.applyStyles('dark', { - backgroundColor: '#2b2b2b', - }), - '& svg': { - color: '#1890ff', - }, - }, - [`& li.${autocompleteClasses.focused}`]: { - backgroundColor: '#e6f7ff', - cursor: 'pointer', - ...theme.applyStyles('dark', { - backgroundColor: '#003b57', - }), - '& svg': { - color: 'currentColor', - }, - }, -})); - -function CustomAutocomplete(props) { - const { - getRootProps, - getInputLabelProps, - getInputProps, - getItemProps, - getListboxProps, - getOptionProps, - groupedOptions, - value, - focused, - setAnchorEl, - } = useAutocomplete({ - multiple: true, - ...props, - }); - - return ( - -
    - - - {value.map((option, index) => { - const { key, ...itemProps } = getItemProps({ index }); - return ( - - ); - })} - - -
    - {groupedOptions.length > 0 ? ( - - {groupedOptions.map((option, index) => { - const { key, ...optionProps } = getOptionProps({ option, index }); - return ( -
  • - {props.getOptionLabel(option)} - -
    • - ); - })} -     - ) : null} -     - ); -} - -CustomAutocomplete.propTypes = { - /** - * Used to determine the string value for a given option. - * It's used to fill the input (and the list box options if `renderOption` is not provided). - * - * If used in free solo mode, it must accept both the type of the options and a string. - * - * @param {Value|string} option - * @returns {string} - * @default (option) => option.label ?? option - */ - getOptionLabel: PropTypes.func, -}; - -export default function CustomizedHook() { - return ( - option.title} - /> - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/CustomizedHook.tsx.preview b/docs/data/material/components/autocomplete/CustomizedHook.tsx.preview deleted file mode 100644 index 11682646888cc5..00000000000000 --- a/docs/data/material/components/autocomplete/CustomizedHook.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - - id="customized-hook-demo" - defaultValue={[top100Films[1]]} - options={top100Films} - getOptionLabel={(option) => option.title} -/> \ No newline at end of file diff --git a/docs/data/material/components/autocomplete/DisabledOptions.js b/docs/data/material/components/autocomplete/DisabledOptions.js deleted file mode 100644 index 81d62b703bd189..00000000000000 --- a/docs/data/material/components/autocomplete/DisabledOptions.js +++ /dev/null @@ -1,23 +0,0 @@ -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; - -export default function DisabledOptions() { - return ( - - option === timeSlots[0] || option === timeSlots[2] - } - sx={{ width: 300 }} - renderInput={(params) => } - /> - ); -} - -// One time slot every 30 minutes. -const timeSlots = Array.from(new Array(24 * 2)).map( - (_, index) => - `${index < 20 ? '0' : ''}${Math.floor(index / 2)}:${ - index % 2 === 0 ? '00' : '30' - }`, -); diff --git a/docs/data/material/components/autocomplete/DisabledOptions.tsx.preview b/docs/data/material/components/autocomplete/DisabledOptions.tsx.preview deleted file mode 100644 index 528fc85290a1d3..00000000000000 --- a/docs/data/material/components/autocomplete/DisabledOptions.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - option === timeSlots[0] || option === timeSlots[2] - } - sx={{ width: 300 }} - renderInput={(params) => } -/> \ No newline at end of file diff --git a/docs/data/material/components/autocomplete/Filter.js b/docs/data/material/components/autocomplete/Filter.js deleted file mode 100644 index 1b51f236259e4c..00000000000000 --- a/docs/data/material/components/autocomplete/Filter.js +++ /dev/null @@ -1,147 +0,0 @@ -import TextField from '@mui/material/TextField'; -import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'; - -const filterOptions = createFilterOptions({ - matchFrom: 'start', - stringify: (option) => option.title, -}); - -export default function Filter() { - return ( - option.title} - filterOptions={filterOptions} - sx={{ width: 300 }} - renderInput={(params) => } - /> - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/Filter.tsx.preview b/docs/data/material/components/autocomplete/Filter.tsx.preview deleted file mode 100644 index 7ca0d8bb8625c3..00000000000000 --- a/docs/data/material/components/autocomplete/Filter.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - option.title} - filterOptions={filterOptions} - sx={{ width: 300 }} - renderInput={(params) => } -/> \ No newline at end of file diff --git a/docs/data/material/components/autocomplete/FixedTags.js b/docs/data/material/components/autocomplete/FixedTags.js deleted file mode 100644 index a36922ba448fb9..00000000000000 --- a/docs/data/material/components/autocomplete/FixedTags.js +++ /dev/null @@ -1,170 +0,0 @@ -import * as React from 'react'; -import Chip from '@mui/material/Chip'; -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; - -export default function FixedTags() { - const fixedOptions = [top100Films[6]]; - const [value, setValue] = React.useState([...fixedOptions, top100Films[13]]); - - return ( - { - setValue([ - ...fixedOptions, - ...newValue.filter((option) => !fixedOptions.includes(option)), - ]); - }} - options={top100Films} - getOptionLabel={(option) => option.title} - renderValue={(values, getItemProps) => - values.map((option, index) => { - const { key, ...itemProps } = getItemProps({ index }); - return ( - - ); - }) - } - style={{ width: 500 }} - renderInput={(params) => ( - - )} - /> - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/FreeSolo.js b/docs/data/material/components/autocomplete/FreeSolo.js deleted file mode 100644 index b3d12a0a75e8a1..00000000000000 --- a/docs/data/material/components/autocomplete/FreeSolo.js +++ /dev/null @@ -1,185 +0,0 @@ -import TextField from '@mui/material/TextField'; -import Stack from '@mui/material/Stack'; -import Autocomplete from '@mui/material/Autocomplete'; - -export default function FreeSolo() { - return ( - - option.title)} - renderInput={(params) => } - /> - option.title)} - renderInput={(params) => ( - - )} - /> - ( - - )} - getOptionLabel={(option) => - typeof option === 'string' ? option : option.title - } - // this demo demonstrates how the value parameter can be either an object (same type as option) or a string - // it could become a string if, for example, you press "Enter" in the input field - isOptionEqualToValue={(option, value) => { - if (typeof value === 'string') { - return option.title === value; - } - return option.title === value.title; - }} - /> - - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOption.js b/docs/data/material/components/autocomplete/FreeSoloCreateOption.js deleted file mode 100644 index 23d73370af7ef5..00000000000000 --- a/docs/data/material/components/autocomplete/FreeSoloCreateOption.js +++ /dev/null @@ -1,203 +0,0 @@ -import * as React from 'react'; -import TextField from '@mui/material/TextField'; -import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'; - -const filter = createFilterOptions(); - -export default function FreeSoloCreateOption() { - const [value, setValue] = React.useState(null); - - return ( - { - if (typeof newValue === 'string') { - setValue({ - title: newValue, - }); - } else if (newValue && newValue.inputValue) { - // Create a new value from the user input - setValue({ - title: newValue.inputValue, - }); - } else { - setValue(newValue); - } - }} - filterOptions={(options, params) => { - const filtered = filter(options, params); - - const { inputValue } = params; - // Suggest the creation of a new value - const isExisting = options.some((option) => inputValue === option.title); - if (inputValue !== '' && !isExisting) { - filtered.push({ - inputValue, - title: `Add "${inputValue}"`, - }); - } - - return filtered; - }} - selectOnFocus - clearOnBlur - handleHomeEndKeys - id="free-solo-with-text-demo" - options={top100Films} - getOptionLabel={(option) => { - // Value selected with enter, right from the input - if (typeof option === 'string') { - return option; - } - // Add "xxx" option created dynamically - if (option.inputValue) { - return option.inputValue; - } - // Regular option - return option.title; - }} - renderOption={(props, option) => { - const { key, ...optionProps } = props; - return ( -
  • - {option.title} -
    • - ); - }} - sx={{ width: 300 }} - freeSolo - resetHighlightOnMouseLeave - renderInput={(params) => ( - - )} - /> - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js b/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js deleted file mode 100644 index a5183040c0d7cb..00000000000000 --- a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.js +++ /dev/null @@ -1,276 +0,0 @@ -import * as React from 'react'; -import TextField from '@mui/material/TextField'; -import Dialog from '@mui/material/Dialog'; -import DialogTitle from '@mui/material/DialogTitle'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogActions from '@mui/material/DialogActions'; -import Button from '@mui/material/Button'; -import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'; - -const filter = createFilterOptions(); - -export default function FreeSoloCreateOptionDialog() { - const [value, setValue] = React.useState(null); - const [open, toggleOpen] = React.useState(false); - - const handleClose = () => { - setDialogValue({ - title: '', - year: '', - }); - toggleOpen(false); - }; - - const [dialogValue, setDialogValue] = React.useState({ - title: '', - year: '', - }); - - const handleSubmit = (event) => { - event.preventDefault(); - setValue({ - title: dialogValue.title, - year: parseInt(dialogValue.year, 10), - }); - handleClose(); - }; - - return ( - - { - if (typeof newValue === 'string') { - // timeout to avoid instant validation of the dialog's form. - setTimeout(() => { - toggleOpen(true); - setDialogValue({ - title: newValue, - year: '', - }); - }); - } else if (newValue && newValue.inputValue) { - toggleOpen(true); - setDialogValue({ - title: newValue.inputValue, - year: '', - }); - } else { - setValue(newValue); - } - }} - filterOptions={(options, params) => { - const filtered = filter(options, params); - - if (params.inputValue !== '') { - filtered.push({ - inputValue: params.inputValue, - title: `Add "${params.inputValue}"`, - }); - } - - return filtered; - }} - id="free-solo-dialog-demo" - options={top100Films} - getOptionLabel={(option) => { - // for example value selected with enter, right from the input - if (typeof option === 'string') { - return option; - } - if (option.inputValue) { - return option.inputValue; - } - return option.title; - }} - selectOnFocus - clearOnBlur - handleHomeEndKeys - renderOption={(props, option) => { - const { key, ...optionProps } = props; - return ( -
  • - {option.title} -
    • - ); - }} - sx={{ width: 300 }} - freeSolo - resetHighlightOnMouseLeave - renderInput={(params) => } - /> - -
    - Add a new film - - - Did you miss any film in our list? Please, add it! - - - setDialogValue({ - ...dialogValue, - title: event.target.value, - }) - } - label="title" - type="text" - variant="standard" - /> - - setDialogValue({ - ...dialogValue, - year: event.target.value, - }) - } - label="year" - type="number" - variant="standard" - /> - - - - - -
    -     -     - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/GitHubLabel.js b/docs/data/material/components/autocomplete/GitHubLabel.js deleted file mode 100644 index 53baa52180f4f8..00000000000000 --- a/docs/data/material/components/autocomplete/GitHubLabel.js +++ /dev/null @@ -1,385 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { useTheme, styled } from '@mui/material/styles'; -import Popper from '@mui/material/Popper'; -import ClickAwayListener from '@mui/material/ClickAwayListener'; -import SettingsIcon from '@mui/icons-material/Settings'; -import CloseIcon from '@mui/icons-material/Close'; -import DoneIcon from '@mui/icons-material/Done'; -import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete'; -import ButtonBase from '@mui/material/ButtonBase'; -import InputBase from '@mui/material/InputBase'; -import Box from '@mui/material/Box'; - -const StyledAutocompletePopper = styled('div')(({ theme }) => ({ - [`& .${autocompleteClasses.paper}`]: { - boxShadow: 'none', - margin: 0, - color: 'inherit', - fontSize: 13, - }, - [`& .${autocompleteClasses.listbox}`]: { - padding: 0, - backgroundColor: '#fff', - ...theme.applyStyles('dark', { - backgroundColor: '#1c2128', - }), - [`& .${autocompleteClasses.option}`]: { - minHeight: 'auto', - alignItems: 'flex-start', - padding: 8, - borderBottom: '1px solid #eaecef', - ...theme.applyStyles('dark', { - borderBottom: '1px solid #30363d', - }), - '&[aria-selected="true"]': { - backgroundColor: 'transparent', - }, - [`&.${autocompleteClasses.focused}, &.${autocompleteClasses.focused}[aria-selected="true"]`]: - { - backgroundColor: theme.palette.action.hover, - }, - }, - }, - [`&.${autocompleteClasses.popperDisablePortal}`]: { - position: 'relative', - }, -})); - -function PopperComponent(props) { - const { disablePortal, anchorEl, open, ...other } = props; - return ; -} - -PopperComponent.propTypes = { - anchorEl: PropTypes.any, - disablePortal: PropTypes.bool, - open: PropTypes.bool.isRequired, -}; - -const StyledPopper = styled(Popper)(({ theme }) => ({ - border: '1px solid #e1e4e8', - boxShadow: `0 8px 24px ${'rgba(149, 157, 165, 0.2)'}`, - color: '#24292e', - backgroundColor: '#fff', - borderRadius: 6, - width: 300, - zIndex: theme.zIndex.modal, - fontSize: 13, - ...theme.applyStyles('dark', { - border: '1px solid #30363d', - boxShadow: '0 8px 24px rgb(1, 4, 9)', - color: '#c9d1d9', - backgroundColor: '#1c2128', - }), -})); - -const StyledInput = styled(InputBase)(({ theme }) => ({ - padding: 10, - width: '100%', - borderBottom: '1px solid #eaecef', - ...theme.applyStyles('dark', { - borderBottom: '1px solid #30363d', - }), - '& input': { - borderRadius: 4, - padding: 8, - transition: theme.transitions.create(['border-color', 'box-shadow']), - fontSize: 14, - backgroundColor: '#fff', - border: '1px solid #30363d', - ...theme.applyStyles('dark', { - backgroundColor: '#0d1117', - border: '1px solid #eaecef', - }), - '&:focus': { - boxShadow: '0px 0px 0px 3px rgba(3, 102, 214, 0.3)', - borderColor: '#0366d6', - ...theme.applyStyles('dark', { - boxShadow: '0px 0px 0px 3px rgb(12, 45, 107)', - borderColor: '#388bfd', - }), - }, - }, -})); - -const Button = styled(ButtonBase)(({ theme }) => ({ - fontSize: 13, - width: '100%', - textAlign: 'left', - paddingBottom: 8, - fontWeight: 600, - color: '#586069', - ...theme.applyStyles('dark', { - color: '#8b949e', - }), - '&:hover,&:focus': { - color: '#0366d6', - ...theme.applyStyles('dark', { - color: '#58a6ff', - }), - }, - '& span': { - width: '100%', - }, - '& svg': { - width: 16, - height: 16, - }, -})); - -export default function GitHubLabel() { - const [anchorEl, setAnchorEl] = React.useState(null); - const [value, setValue] = React.useState([labels[1], labels[11]]); - const [pendingValue, setPendingValue] = React.useState([]); - const theme = useTheme(); - - const handleClick = (event) => { - setPendingValue(value); - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setValue(pendingValue); - if (anchorEl) { - anchorEl.focus(); - } - setAnchorEl(null); - }; - - const open = Boolean(anchorEl); - const id = open ? 'github-label' : undefined; - - return ( - - - - {value.map((label) => ( - - {label.name} - - ))} - - - -
    - ({ - borderBottom: '1px solid #30363d', - padding: '8px 10px', - fontWeight: 600, - ...t.applyStyles('light', { - borderBottom: '1px solid #eaecef', - }), - })} - > - Apply labels to this pull request - - { - if (reason === 'escape') { - handleClose(); - } - }} - value={pendingValue} - onChange={(event, newValue, reason) => { - if ( - event.type === 'keydown' && - (event.key === 'Backspace' || event.key === 'Delete') && - reason === 'removeOption' - ) { - return; - } - setPendingValue(newValue); - }} - disableCloseOnSelect - renderValue={() => null} - noOptionsText="No labels" - renderOption={(props, option, { selected }) => { - const { key, ...optionProps } = props; - return ( -
  • - - - ({ - flexGrow: 1, - '& span': { - color: '#8b949e', - ...t.applyStyles('light', { - color: '#586069', - }), - }, - })} - > - {option.name} -
    - {option.description} -     - -
    • - ); - }} - options={[...labels].sort((a, b) => { - // Display the selected labels first. - let ai = value.indexOf(a); - ai = ai === -1 ? value.length + labels.indexOf(a) : ai; - let bi = value.indexOf(b); - bi = bi === -1 ? value.length + labels.indexOf(b) : bi; - return ai - bi; - })} - getOptionLabel={(option) => option.name} - renderInput={(params) => ( - - )} - slots={{ - popper: PopperComponent, - }} - /> -
    -     -     -     - ); -} - -// From https://github.com/abdonrd/github-labels -const labels = [ - { - name: 'good first issue', - color: '#7057ff', - description: 'Good for newcomers', - }, - { - name: 'help wanted', - color: '#008672', - description: 'Extra attention is needed', - }, - { - name: 'priority: critical', - color: '#b60205', - description: '', - }, - { - name: 'priority: high', - color: '#d93f0b', - description: '', - }, - { - name: 'priority: low', - color: '#0e8a16', - description: '', - }, - { - name: 'priority: medium', - color: '#fbca04', - description: '', - }, - { - name: "status: can't reproduce", - color: '#fec1c1', - description: '', - }, - { - name: 'status: confirmed', - color: '#215cea', - description: '', - }, - { - name: 'status: duplicate', - color: '#cfd3d7', - description: 'This issue or pull request already exists', - }, - { - name: 'status: needs information', - color: '#fef2c0', - description: '', - }, - { - name: 'status: wont do/fix', - color: '#eeeeee', - description: 'This will not be worked on', - }, - { - name: 'type: bug', - color: '#d73a4a', - description: "Something isn't working", - }, - { - name: 'type: discussion', - color: '#d4c5f9', - description: '', - }, - { - name: 'type: documentation', - color: '#006b75', - description: '', - }, - { - name: 'type: enhancement', - color: '#84b6eb', - description: '', - }, - { - name: 'type: epic', - color: '#3e4b9e', - description: 'A theme of work that contain sub-tasks', - }, - { - name: 'type: feature request', - color: '#fbca04', - description: 'New feature or request', - }, - { - name: 'type: question', - color: '#d876e3', - description: 'Further information is requested', - }, -]; diff --git a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js deleted file mode 100644 index bf76c5f336256e..00000000000000 --- a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.js +++ /dev/null @@ -1,636 +0,0 @@ -import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; -import { createTheme, useTheme, ThemeProvider } from '@mui/material/styles'; - -// Theme.ts -const customTheme = (outerTheme) => - createTheme({ - cssVariables: { - colorSchemeSelector: 'class', - }, - palette: { - mode: outerTheme.palette.mode, - }, - components: { - MuiAutocomplete: { - defaultProps: { - renderOption: (props, option, state, ownerState) => { - const { key, ...optionProps } = props; - return ( - - {ownerState.getOptionLabel(option)} - - ); - }, - }, - }, - }, - }); - -export default function GloballyCustomizedOptions() { - // useTheme is used to determine the dark or light mode of the docs to maintain the Autocomplete component default styles. - const outerTheme = useTheme(); - - return ( - - - - - - - ); -} - -function MovieSelect() { - return ( - `${option.title} (${option.year})`} - id="movie-customized-option-demo" - disableCloseOnSelect - renderInput={(params) => ( - - )} - /> - ); -} - -function CountrySelect() { - return ( - - `${option.label} (${option.code}) +${option.phone}` - } - renderInput={(params) => } - /> - ); -} - -// From https://bitbucket.org/atlassian/atlaskit-mk-2/raw/4ad0e56649c3e6c973e226b7efaeb28cb240ccb0/packages/core/select/src/data/countries.js -const countries = [ - { code: 'AD', label: 'Andorra', phone: '376' }, - { - code: 'AE', - label: 'United Arab Emirates', - phone: '971', - }, - { code: 'AF', label: 'Afghanistan', phone: '93' }, - { - code: 'AG', - label: 'Antigua and Barbuda', - phone: '1-268', - }, - { code: 'AI', label: 'Anguilla', phone: '1-264' }, - { code: 'AL', label: 'Albania', phone: '355' }, - { code: 'AM', label: 'Armenia', phone: '374' }, - { code: 'AO', label: 'Angola', phone: '244' }, - { code: 'AQ', label: 'Antarctica', phone: '672' }, - { code: 'AR', label: 'Argentina', phone: '54' }, - { code: 'AS', label: 'American Samoa', phone: '1-684' }, - { code: 'AT', label: 'Austria', phone: '43' }, - { - code: 'AU', - label: 'Australia', - phone: '61', - suggested: true, - }, - { code: 'AW', label: 'Aruba', phone: '297' }, - { code: 'AX', label: 'Alland Islands', phone: '358' }, - { code: 'AZ', label: 'Azerbaijan', phone: '994' }, - { - code: 'BA', - label: 'Bosnia and Herzegovina', - phone: '387', - }, - { code: 'BB', label: 'Barbados', phone: '1-246' }, - { code: 'BD', label: 'Bangladesh', phone: '880' }, - { code: 'BE', label: 'Belgium', phone: '32' }, - { code: 'BF', label: 'Burkina Faso', phone: '226' }, - { code: 'BG', label: 'Bulgaria', phone: '359' }, - { code: 'BH', label: 'Bahrain', phone: '973' }, - { code: 'BI', label: 'Burundi', phone: '257' }, - { code: 'BJ', label: 'Benin', phone: '229' }, - { code: 'BL', label: 'Saint Barthelemy', phone: '590' }, - { code: 'BM', label: 'Bermuda', phone: '1-441' }, - { code: 'BN', label: 'Brunei Darussalam', phone: '673' }, - { code: 'BO', label: 'Bolivia', phone: '591' }, - { code: 'BR', label: 'Brazil', phone: '55' }, - { code: 'BS', label: 'Bahamas', phone: '1-242' }, - { code: 'BT', label: 'Bhutan', phone: '975' }, - { code: 'BV', label: 'Bouvet Island', phone: '47' }, - { code: 'BW', label: 'Botswana', phone: '267' }, - { code: 'BY', label: 'Belarus', phone: '375' }, - { code: 'BZ', label: 'Belize', phone: '501' }, - { - code: 'CA', - label: 'Canada', - phone: '1', - suggested: true, - }, - { - code: 'CC', - label: 'Cocos (Keeling) Islands', - phone: '61', - }, - { - code: 'CD', - label: 'Congo, Democratic Republic of the', - phone: '243', - }, - { - code: 'CF', - label: 'Central African Republic', - phone: '236', - }, - { - code: 'CG', - label: 'Congo, Republic of the', - phone: '242', - }, - { code: 'CH', label: 'Switzerland', phone: '41' }, - { code: 'CI', label: "Cote d'Ivoire", phone: '225' }, - { code: 'CK', label: 'Cook Islands', phone: '682' }, - { code: 'CL', label: 'Chile', phone: '56' }, - { code: 'CM', label: 'Cameroon', phone: '237' }, - { code: 'CN', label: 'China', phone: '86' }, - { code: 'CO', label: 'Colombia', phone: '57' }, - { code: 'CR', label: 'Costa Rica', phone: '506' }, - { code: 'CU', label: 'Cuba', phone: '53' }, - { code: 'CV', label: 'Cape Verde', phone: '238' }, - { code: 'CW', label: 'Curacao', phone: '599' }, - { code: 'CX', label: 'Christmas Island', phone: '61' }, - { code: 'CY', label: 'Cyprus', phone: '357' }, - { code: 'CZ', label: 'Czech Republic', phone: '420' }, - { - code: 'DE', - label: 'Germany', - phone: '49', - suggested: true, - }, - { code: 'DJ', label: 'Djibouti', phone: '253' }, - { code: 'DK', label: 'Denmark', phone: '45' }, - { code: 'DM', label: 'Dominica', phone: '1-767' }, - { - code: 'DO', - label: 'Dominican Republic', - phone: '1-809', - }, - { code: 'DZ', label: 'Algeria', phone: '213' }, - { code: 'EC', label: 'Ecuador', phone: '593' }, - { code: 'EE', label: 'Estonia', phone: '372' }, - { code: 'EG', label: 'Egypt', phone: '20' }, - { code: 'EH', label: 'Western Sahara', phone: '212' }, - { code: 'ER', label: 'Eritrea', phone: '291' }, - { code: 'ES', label: 'Spain', phone: '34' }, - { code: 'ET', label: 'Ethiopia', phone: '251' }, - { code: 'FI', label: 'Finland', phone: '358' }, - { code: 'FJ', label: 'Fiji', phone: '679' }, - { - code: 'FK', - label: 'Falkland Islands (Malvinas)', - phone: '500', - }, - { - code: 'FM', - label: 'Micronesia, Federated States of', - phone: '691', - }, - { code: 'FO', label: 'Faroe Islands', phone: '298' }, - { - code: 'FR', - label: 'France', - phone: '33', - suggested: true, - }, - { code: 'GA', label: 'Gabon', phone: '241' }, - { code: 'GB', label: 'United Kingdom', phone: '44' }, - { code: 'GD', label: 'Grenada', phone: '1-473' }, - { code: 'GE', label: 'Georgia', phone: '995' }, - { code: 'GF', label: 'French Guiana', phone: '594' }, - { code: 'GG', label: 'Guernsey', phone: '44' }, - { code: 'GH', label: 'Ghana', phone: '233' }, - { code: 'GI', label: 'Gibraltar', phone: '350' }, - { code: 'GL', label: 'Greenland', phone: '299' }, - { code: 'GM', label: 'Gambia', phone: '220' }, - { code: 'GN', label: 'Guinea', phone: '224' }, - { code: 'GP', label: 'Guadeloupe', phone: '590' }, - { code: 'GQ', label: 'Equatorial Guinea', phone: '240' }, - { code: 'GR', label: 'Greece', phone: '30' }, - { - code: 'GS', - label: 'South Georgia and the South Sandwich Islands', - phone: '500', - }, - { code: 'GT', label: 'Guatemala', phone: '502' }, - { code: 'GU', label: 'Guam', phone: '1-671' }, - { code: 'GW', label: 'Guinea-Bissau', phone: '245' }, - { code: 'GY', label: 'Guyana', phone: '592' }, - { code: 'HK', label: 'Hong Kong', phone: '852' }, - { - code: 'HM', - label: 'Heard Island and McDonald Islands', - phone: '672', - }, - { code: 'HN', label: 'Honduras', phone: '504' }, - { code: 'HR', label: 'Croatia', phone: '385' }, - { code: 'HT', label: 'Haiti', phone: '509' }, - { code: 'HU', label: 'Hungary', phone: '36' }, - { code: 'ID', label: 'Indonesia', phone: '62' }, - { code: 'IE', label: 'Ireland', phone: '353' }, - { code: 'IL', label: 'Israel', phone: '972' }, - { code: 'IM', label: 'Isle of Man', phone: '44' }, - { code: 'IN', label: 'India', phone: '91' }, - { - code: 'IO', - label: 'British Indian Ocean Territory', - phone: '246', - }, - { code: 'IQ', label: 'Iraq', phone: '964' }, - { - code: 'IR', - label: 'Iran, Islamic Republic of', - phone: '98', - }, - { code: 'IS', label: 'Iceland', phone: '354' }, - { code: 'IT', label: 'Italy', phone: '39' }, - { code: 'JE', label: 'Jersey', phone: '44' }, - { code: 'JM', label: 'Jamaica', phone: '1-876' }, - { code: 'JO', label: 'Jordan', phone: '962' }, - { - code: 'JP', - label: 'Japan', - phone: '81', - suggested: true, - }, - { code: 'KE', label: 'Kenya', phone: '254' }, - { code: 'KG', label: 'Kyrgyzstan', phone: '996' }, - { code: 'KH', label: 'Cambodia', phone: '855' }, - { code: 'KI', label: 'Kiribati', phone: '686' }, - { code: 'KM', label: 'Comoros', phone: '269' }, - { - code: 'KN', - label: 'Saint Kitts and Nevis', - phone: '1-869', - }, - { - code: 'KP', - label: "Korea, Democratic People's Republic of", - phone: '850', - }, - { code: 'KR', label: 'Korea, Republic of', phone: '82' }, - { code: 'KW', label: 'Kuwait', phone: '965' }, - { code: 'KY', label: 'Cayman Islands', phone: '1-345' }, - { code: 'KZ', label: 'Kazakhstan', phone: '7' }, - { - code: 'LA', - label: "Lao People's Democratic Republic", - phone: '856', - }, - { code: 'LB', label: 'Lebanon', phone: '961' }, - { code: 'LC', label: 'Saint Lucia', phone: '1-758' }, - { code: 'LI', label: 'Liechtenstein', phone: '423' }, - { code: 'LK', label: 'Sri Lanka', phone: '94' }, - { code: 'LR', label: 'Liberia', phone: '231' }, - { code: 'LS', label: 'Lesotho', phone: '266' }, - { code: 'LT', label: 'Lithuania', phone: '370' }, - { code: 'LU', label: 'Luxembourg', phone: '352' }, - { code: 'LV', label: 'Latvia', phone: '371' }, - { code: 'LY', label: 'Libya', phone: '218' }, - { code: 'MA', label: 'Morocco', phone: '212' }, - { code: 'MC', label: 'Monaco', phone: '377' }, - { - code: 'MD', - label: 'Moldova, Republic of', - phone: '373', - }, - { code: 'ME', label: 'Montenegro', phone: '382' }, - { - code: 'MF', - label: 'Saint Martin (French part)', - phone: '590', - }, - { code: 'MG', label: 'Madagascar', phone: '261' }, - { code: 'MH', label: 'Marshall Islands', phone: '692' }, - { - code: 'MK', - label: 'Macedonia, the Former Yugoslav Republic of', - phone: '389', - }, - { code: 'ML', label: 'Mali', phone: '223' }, - { code: 'MM', label: 'Myanmar', phone: '95' }, - { code: 'MN', label: 'Mongolia', phone: '976' }, - { code: 'MO', label: 'Macao', phone: '853' }, - { - code: 'MP', - label: 'Northern Mariana Islands', - phone: '1-670', - }, - { code: 'MQ', label: 'Martinique', phone: '596' }, - { code: 'MR', label: 'Mauritania', phone: '222' }, - { code: 'MS', label: 'Montserrat', phone: '1-664' }, - { code: 'MT', label: 'Malta', phone: '356' }, - { code: 'MU', label: 'Mauritius', phone: '230' }, - { code: 'MV', label: 'Maldives', phone: '960' }, - { code: 'MW', label: 'Malawi', phone: '265' }, - { code: 'MX', label: 'Mexico', phone: '52' }, - { code: 'MY', label: 'Malaysia', phone: '60' }, - { code: 'MZ', label: 'Mozambique', phone: '258' }, - { code: 'NA', label: 'Namibia', phone: '264' }, - { code: 'NC', label: 'New Caledonia', phone: '687' }, - { code: 'NE', label: 'Niger', phone: '227' }, - { code: 'NF', label: 'Norfolk Island', phone: '672' }, - { code: 'NG', label: 'Nigeria', phone: '234' }, - { code: 'NI', label: 'Nicaragua', phone: '505' }, - { code: 'NL', label: 'Netherlands', phone: '31' }, - { code: 'NO', label: 'Norway', phone: '47' }, - { code: 'NP', label: 'Nepal', phone: '977' }, - { code: 'NR', label: 'Nauru', phone: '674' }, - { code: 'NU', label: 'Niue', phone: '683' }, - { code: 'NZ', label: 'New Zealand', phone: '64' }, - { code: 'OM', label: 'Oman', phone: '968' }, - { code: 'PA', label: 'Panama', phone: '507' }, - { code: 'PE', label: 'Peru', phone: '51' }, - { code: 'PF', label: 'French Polynesia', phone: '689' }, - { code: 'PG', label: 'Papua New Guinea', phone: '675' }, - { code: 'PH', label: 'Philippines', phone: '63' }, - { code: 'PK', label: 'Pakistan', phone: '92' }, - { code: 'PL', label: 'Poland', phone: '48' }, - { - code: 'PM', - label: 'Saint Pierre and Miquelon', - phone: '508', - }, - { code: 'PN', label: 'Pitcairn', phone: '870' }, - { code: 'PR', label: 'Puerto Rico', phone: '1' }, - { - code: 'PS', - label: 'Palestine, State of', - phone: '970', - }, - { code: 'PT', label: 'Portugal', phone: '351' }, - { code: 'PW', label: 'Palau', phone: '680' }, - { code: 'PY', label: 'Paraguay', phone: '595' }, - { code: 'QA', label: 'Qatar', phone: '974' }, - { code: 'RE', label: 'Reunion', phone: '262' }, - { code: 'RO', label: 'Romania', phone: '40' }, - { code: 'RS', label: 'Serbia', phone: '381' }, - { code: 'RU', label: 'Russian Federation', phone: '7' }, - { code: 'RW', label: 'Rwanda', phone: '250' }, - { code: 'SA', label: 'Saudi Arabia', phone: '966' }, - { code: 'SB', label: 'Solomon Islands', phone: '677' }, - { code: 'SC', label: 'Seychelles', phone: '248' }, - { code: 'SD', label: 'Sudan', phone: '249' }, - { code: 'SE', label: 'Sweden', phone: '46' }, - { code: 'SG', label: 'Singapore', phone: '65' }, - { code: 'SH', label: 'Saint Helena', phone: '290' }, - { code: 'SI', label: 'Slovenia', phone: '386' }, - { - code: 'SJ', - label: 'Svalbard and Jan Mayen', - phone: '47', - }, - { code: 'SK', label: 'Slovakia', phone: '421' }, - { code: 'SL', label: 'Sierra Leone', phone: '232' }, - { code: 'SM', label: 'San Marino', phone: '378' }, - { code: 'SN', label: 'Senegal', phone: '221' }, - { code: 'SO', label: 'Somalia', phone: '252' }, - { code: 'SR', label: 'Suriname', phone: '597' }, - { code: 'SS', label: 'South Sudan', phone: '211' }, - { - code: 'ST', - label: 'Sao Tome and Principe', - phone: '239', - }, - { code: 'SV', label: 'El Salvador', phone: '503' }, - { - code: 'SX', - label: 'Sint Maarten (Dutch part)', - phone: '1-721', - }, - { - code: 'SY', - label: 'Syrian Arab Republic', - phone: '963', - }, - { code: 'SZ', label: 'Swaziland', phone: '268' }, - { - code: 'TC', - label: 'Turks and Caicos Islands', - phone: '1-649', - }, - { code: 'TD', label: 'Chad', phone: '235' }, - { - code: 'TF', - label: 'French Southern Territories', - phone: '262', - }, - { code: 'TG', label: 'Togo', phone: '228' }, - { code: 'TH', label: 'Thailand', phone: '66' }, - { code: 'TJ', label: 'Tajikistan', phone: '992' }, - { code: 'TK', label: 'Tokelau', phone: '690' }, - { code: 'TL', label: 'Timor-Leste', phone: '670' }, - { code: 'TM', label: 'Turkmenistan', phone: '993' }, - { code: 'TN', label: 'Tunisia', phone: '216' }, - { code: 'TO', label: 'Tonga', phone: '676' }, - { code: 'TR', label: 'Turkey', phone: '90' }, - { - code: 'TT', - label: 'Trinidad and Tobago', - phone: '1-868', - }, - { code: 'TV', label: 'Tuvalu', phone: '688' }, - { - code: 'TW', - label: 'Taiwan', - phone: '886', - }, - { - code: 'TZ', - label: 'United Republic of Tanzania', - phone: '255', - }, - { code: 'UA', label: 'Ukraine', phone: '380' }, - { code: 'UG', label: 'Uganda', phone: '256' }, - { - code: 'US', - label: 'United States', - phone: '1', - suggested: true, - }, - { code: 'UY', label: 'Uruguay', phone: '598' }, - { code: 'UZ', label: 'Uzbekistan', phone: '998' }, - { - code: 'VA', - label: 'Holy See (Vatican City State)', - phone: '379', - }, - { - code: 'VC', - label: 'Saint Vincent and the Grenadines', - phone: '1-784', - }, - { code: 'VE', label: 'Venezuela', phone: '58' }, - { - code: 'VG', - label: 'British Virgin Islands', - phone: '1-284', - }, - { - code: 'VI', - label: 'US Virgin Islands', - phone: '1-340', - }, - { code: 'VN', label: 'Vietnam', phone: '84' }, - { code: 'VU', label: 'Vanuatu', phone: '678' }, - { code: 'WF', label: 'Wallis and Futuna', phone: '681' }, - { code: 'WS', label: 'Samoa', phone: '685' }, - { code: 'XK', label: 'Kosovo', phone: '383' }, - { code: 'YE', label: 'Yemen', phone: '967' }, - { code: 'YT', label: 'Mayotte', phone: '262' }, - { code: 'ZA', label: 'South Africa', phone: '27' }, - { code: 'ZM', label: 'Zambia', phone: '260' }, - { code: 'ZW', label: 'Zimbabwe', phone: '263' }, -]; - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx.preview b/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx.preview deleted file mode 100644 index 711bb6e91ce57c..00000000000000 --- a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/autocomplete/GoogleMaps.js b/docs/data/material/components/autocomplete/GoogleMaps.js deleted file mode 100644 index 5054d0ba84be56..00000000000000 --- a/docs/data/material/components/autocomplete/GoogleMaps.js +++ /dev/null @@ -1,332 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; -import Paper from '@mui/material/Paper'; -import LocationOnIcon from '@mui/icons-material/LocationOn'; -import Grid from '@mui/material/Grid'; -import Typography from '@mui/material/Typography'; -import parse from 'autosuggest-highlight/parse'; -// For the sake of this demo, we have to use debounce to reduce Google Maps Places API quote use -// But prefer to use throttle in practice -// import throttle from 'lodash/throttle'; -import { debounce } from '@mui/material/utils'; - -// This key was created specifically for the demo in mui.com. -// You need to create a new one for your application. -const GOOGLE_MAPS_API_KEY = 'AIzaSyC3aviU6KHXAjoSnxcw6qbOhjnFctbxPkE'; - -const useEnhancedEffect = - typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect; - -function loadScript(src, position) { - const script = document.createElement('script'); - script.setAttribute('async', ''); - script.src = src; - position.appendChild(script); - return script; -} - -function CustomPaper(props) { - return ( - - {props.children} - {/* Legal requirement https://developers.google.com/maps/documentation/javascript/policies#logo */} - ({ - display: 'flex', - justifyContent: 'flex-end', - p: '5px 10px 6px 10px', - opacity: 0.9, - '& path': { - fill: '#5e5e5e', - }, - ...staticTheme.applyStyles('dark', { - opacity: 0.7, - '& path': { - fill: '#fff', - }, - }), - })} - > - - - - - - ); -} - -CustomPaper.propTypes = { - /** - * The content of the component. - */ - children: PropTypes.node, -}; - -const fetch = debounce(async (request, callback) => { - try { - const { suggestions } = - await window.google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions( - request, - ); - - callback( - suggestions.map((suggestion) => { - const place = suggestion.placePrediction; - // Map to the old AutocompleteService.getPlacePredictions format - // https://developers.google.com/maps/documentation/javascript/places-migration-autocomplete - return { - description: place.text.text, - structured_formatting: { - main_text: place.mainText.text, - main_text_matched_substrings: place.mainText.matches.map((match) => ({ - offset: match.startOffset, - length: match.endOffset - match.startOffset, - })), - secondary_text: place.secondaryText?.text, - }, - }; - }), - ); - } catch (err) { - if (err.message.startsWith('Quota exceeded for quota')) { - callback(request.input.length === 1 ? fakeAnswer.p : fakeAnswer.paris); - } - - throw err; - } -}, 400); - -const emptyOptions = []; -let sessionToken; - -export default function GoogleMaps() { - const [value, setValue] = React.useState(null); - const [inputValue, setInputValue] = React.useState(''); - const [options, setOptions] = React.useState(emptyOptions); - const callbackId = React.useId().replace(/[^\w]/g, ''); - const [loaded, setLoaded] = React.useState(false); - - if (typeof window !== 'undefined') { - if (!document.querySelector('#google-maps')) { - const GOOGLE_NAMESPACE = '_google_callback'; - const globalContext = - window[GOOGLE_NAMESPACE] || (window[GOOGLE_NAMESPACE] = {}); - globalContext[callbackId] = () => { - setLoaded(true); - }; - - const script = loadScript( - `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places&loading=async&callback=${GOOGLE_NAMESPACE}.${callbackId}`, - document.querySelector('head'), - ); - script.id = 'google-maps'; - } else if (window.google && !loaded) { - setLoaded(true); - } - } - - useEnhancedEffect(() => { - if (!loaded) { - return undefined; - } - - if (inputValue === '') { - setOptions(value ? [value] : emptyOptions); - return undefined; - } - - // Allow to resolve the out of order request resolution. - let active = true; - - if (!sessionToken) { - sessionToken = new window.google.maps.places.AutocompleteSessionToken(); - } - - fetch({ input: inputValue, sessionToken }, (results) => { - if (!active) { - return; - } - - let newOptions = []; - - if (results) { - newOptions = results; - - if (value) { - newOptions = [ - value, - ...results.filter((result) => result.description !== value.description), - ]; - } - } else if (value) { - newOptions = [value]; - } - setOptions(newOptions); - }); - - return () => { - active = false; - }; - }, [value, inputValue, loaded]); - - return ( - - typeof option === 'string' ? option : option.description - } - filterOptions={(x) => x} - slots={{ - paper: CustomPaper, - }} - options={options} - autoComplete - includeInputInList - filterSelectedOptions - resetHighlightOnMouseLeave - value={value} - noOptionsText="No locations" - onChange={(event, newValue) => { - setOptions(newValue ? [newValue, ...options] : options); - setValue(newValue); - }} - onInputChange={(event, newInputValue) => { - setInputValue(newInputValue); - }} - renderInput={(params) => ( - - )} - renderOption={(props, option) => { - const { key, ...optionProps } = props; - const matches = option.structured_formatting.main_text_matched_substrings; - - const parts = parse( - option.structured_formatting.main_text, - matches.map((match) => [match.offset, match.offset + match.length]), - ); - return ( -
  • - - - - - - {parts.map((part, index) => ( - - {part.text} - - ))} - {option.structured_formatting.secondary_text ? ( - - {option.structured_formatting.secondary_text} - - ) : null} - - -
    • - ); - }} - /> - ); -} - -// Fake data in case Google Maps Places API returns a rate limit. -const fakeAnswer = { - p: [ - { - description: 'Portugal', - structured_formatting: { - main_text: 'Portugal', - main_text_matched_substrings: [{ offset: 0, length: 1 }], - }, - }, - { - description: 'Puerto Rico', - structured_formatting: { - main_text: 'Puerto Rico', - main_text_matched_substrings: [{ offset: 0, length: 1 }], - }, - }, - { - description: 'Pakistan', - structured_formatting: { - main_text: 'Pakistan', - main_text_matched_substrings: [{ offset: 0, length: 1 }], - }, - }, - { - description: 'Philippines', - structured_formatting: { - main_text: 'Philippines', - main_text_matched_substrings: [{ offset: 0, length: 1 }], - }, - }, - { - description: 'Paris, France', - structured_formatting: { - main_text: 'Paris', - main_text_matched_substrings: [{ offset: 0, length: 1 }], - secondary_text: 'France', - }, - }, - ], - paris: [ - { - description: 'Paris, France', - structured_formatting: { - main_text: 'Paris', - main_text_matched_substrings: [{ offset: 0, length: 5 }], - secondary_text: 'France', - }, - }, - { - description: 'Paris, TX, USA', - structured_formatting: { - main_text: 'Paris', - main_text_matched_substrings: [{ offset: 0, length: 5 }], - secondary_text: 'TX, USA', - }, - }, - { - description: "Paris Beauvais Airport, Route de l'Aéroport, Tillé, France", - structured_formatting: { - main_text: 'Paris Beauvais Airport', - main_text_matched_substrings: [{ offset: 0, length: 5 }], - secondary_text: "Route de l'Aéroport, Tillé, France", - }, - }, - { - description: 'Paris Las Vegas, South Las Vegas Boulevard, Las Vegas, NV, USA', - structured_formatting: { - main_text: 'Paris Las Vegas', - main_text_matched_substrings: [{ offset: 0, length: 5 }], - secondary_text: 'South Las Vegas Boulevard, Las Vegas, NV, USA', - }, - }, - { - description: "Paris La Défense Arena, Jardin de l'Arche, Nanterre, France", - structured_formatting: { - main_text: 'Paris La Défense Arena', - main_text_matched_substrings: [{ offset: 0, length: 5 }], - secondary_text: "Jardin de l'Arche, Nanterre, France", - }, - }, - ], -}; diff --git a/docs/data/material/components/autocomplete/Grouped.js b/docs/data/material/components/autocomplete/Grouped.js deleted file mode 100644 index 345c9d4521a531..00000000000000 --- a/docs/data/material/components/autocomplete/Grouped.js +++ /dev/null @@ -1,150 +0,0 @@ -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; - -export default function Grouped() { - const options = top100Films.map((option) => { - const firstLetter = option.title[0].toUpperCase(); - return { - firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter, - ...option, - }; - }); - - return ( - -b.firstLetter.localeCompare(a.firstLetter))} - groupBy={(option) => option.firstLetter} - getOptionLabel={(option) => option.title} - sx={{ width: 300 }} - renderInput={(params) => } - /> - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/Grouped.tsx.preview b/docs/data/material/components/autocomplete/Grouped.tsx.preview deleted file mode 100644 index 861cf451662757..00000000000000 --- a/docs/data/material/components/autocomplete/Grouped.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - -b.firstLetter.localeCompare(a.firstLetter))} - groupBy={(option) => option.firstLetter} - getOptionLabel={(option) => option.title} - sx={{ width: 300 }} - renderInput={(params) => } -/> \ No newline at end of file diff --git a/docs/data/material/components/autocomplete/Highlights.js b/docs/data/material/components/autocomplete/Highlights.js deleted file mode 100644 index 8902223d812529..00000000000000 --- a/docs/data/material/components/autocomplete/Highlights.js +++ /dev/null @@ -1,167 +0,0 @@ -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; -import parse from 'autosuggest-highlight/parse'; -import match from 'autosuggest-highlight/match'; - -export default function Highlights() { - return ( - option.title} - renderInput={(params) => ( - - )} - renderOption={(props, option, { inputValue }) => { - const { key, ...optionProps } = props; - const matches = match(option.title, inputValue, { insideWords: true }); - const parts = parse(option.title, matches); - - return ( -
  • -
    - {parts.map((part, index) => ( - - {part.text} - - ))} -
    -
    • - ); - }} - /> - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/InfiniteLoading.js b/docs/data/material/components/autocomplete/InfiniteLoading.js deleted file mode 100644 index ede469324b2399..00000000000000 --- a/docs/data/material/components/autocomplete/InfiniteLoading.js +++ /dev/null @@ -1,351 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Autocomplete from '@mui/material/Autocomplete'; -import CircularProgress from '@mui/material/CircularProgress'; -import TextField from '@mui/material/TextField'; -import { - QueryClient, - QueryClientProvider, - useInfiniteQuery, -} from '@tanstack/react-query'; -import { useEventCallback, useForkRef } from '@mui/material/utils'; -import useTimeout from '@mui/utils/useTimeout'; -import { useVirtualizer } from '@tanstack/react-virtual'; - -import { fetchMovies, getMovieLabel, normalizeMovieQuery } from './server'; - -const ITEM_HEIGHT_PX = 36; -const MAX_LISTBOX_HEIGHT_PX = 8 * ITEM_HEIGHT_PX; -const OVERSCAN = 5; -const PREFETCH_WITHIN_ITEMS = 5; -const INPUT_DEBOUNCE_MS = 200; - -// Autocomplete invokes `renderOption(props, option)` for every option that -// would be rendered. Returning this tuple lets the virtual listbox own layout -// and mount only the rows that are visible. - -/** Props added to the Autocomplete listbox slot for infinite loading and virtualization. */ - -/** - * Virtualized Autocomplete listbox. - * It mounts only visible options and triggers pagination as the rendered range approaches the end. - */ -const VirtualListbox = React.forwardRef( - function VirtualListbox(props, forwardedRef) { - const { - children, - onReachEnd, - resetScrollKey, - virtualizerRef, - style, - ...listboxProps - } = props; - const items = children; - - // One DOM node must serve both Autocomplete's listbox ref and the virtualizer's - // scroll observer, so merge the forwarded ref with the local ref. - const scrollContainerRef = React.useRef(null); - const setScrollContainerRef = useForkRef(scrollContainerRef, forwardedRef); - - const virtualizer = useVirtualizer({ - count: items.length, - getScrollElement: () => scrollContainerRef.current, - estimateSize: () => ITEM_HEIGHT_PX, - overscan: OVERSCAN, - // Avoids forcing synchronous updates while Autocomplete is rendering. - useFlushSync: false, - }); - - React.useEffect(() => { - virtualizerRef.current = virtualizer; - return () => { - if (virtualizerRef.current === virtualizer) { - virtualizerRef.current = null; - } - }; - }, [virtualizer, virtualizerRef]); - - React.useEffect(() => { - scrollContainerRef.current?.scrollTo({ top: 0 }); - virtualizer.scrollToOffset(0); - }, [resetScrollKey, virtualizer]); - - const virtualItems = virtualizer.getVirtualItems(); - const lastRenderedIndex = virtualItems[virtualItems.length - 1]?.index ?? -1; - - // Trigger pagination from the virtualizer's rendered range, not raw scroll - // offsets, so overscan and keyboard scrolling behave consistently. - React.useEffect(() => { - if ( - items.length > 0 && - lastRenderedIndex >= items.length - PREFETCH_WITHIN_ITEMS - ) { - onReachEnd(); - } - }, [lastRenderedIndex, items.length, onReachEnd]); - - return ( -
      - {/* This spacer gives the
        its scroll height without nesting a div inside the listbox. */} -
      • - {virtualItems.map((virtualItem) => { - const [optionProps, option] = items[virtualItem.index]; - const { key, style: optionStyle, ...htmlProps } = optionProps; - const label = getMovieLabel(option); - - return ( -
      • - - {label} - -
        • - ); - })} -
      - ); - }, -); - -VirtualListbox.propTypes = { - children: PropTypes.node, - /** - * Called when the rendered window gets close enough to the end to load another page. - */ - onReachEnd: PropTypes.func.isRequired, - /** - * Changes when the search context changes so the listbox can reset to the first row. - */ - resetScrollKey: PropTypes.string.isRequired, - style: PropTypes.object, - /** - * Exposes the virtualizer to the parent so keyboard navigation can scroll highlighted rows into view. - */ - virtualizerRef: PropTypes.shape({ - current: PropTypes.object, - }).isRequired, -}; - -function InfiniteQueryAutocomplete() { - const [open, setOpen] = React.useState(false); - const [value, setValue] = React.useState(null); - const [inputValue, setInputValue] = React.useState(''); - const [searchInputValue, setSearchInputValue] = React.useState(''); - const [queryInputValue, setQueryInputValue] = React.useState(''); - const virtualizerRef = React.useRef(null); - const wasOpenRef = React.useRef(false); - const queryDebounce = useTimeout(); - - React.useEffect(() => { - // Opening the popup should query for whatever text is already visible in the - // input, but reopening should not retrigger this sync while it is already open. - if (open && !wasOpenRef.current) { - setSearchInputValue(inputValue); - setQueryInputValue(inputValue); - } - wasOpenRef.current = open; - }, [inputValue, open]); - - React.useEffect(() => { - if (!open || searchInputValue === queryInputValue) { - queryDebounce.clear(); - return undefined; - } - - queryDebounce.start(INPUT_DEBOUNCE_MS, () => { - setQueryInputValue(searchInputValue); - }); - - return queryDebounce.clear; - }, [open, queryDebounce, queryInputValue, searchInputValue]); - - const normalizedQuery = React.useMemo( - () => normalizeMovieQuery(queryInputValue), - [queryInputValue], - ); - - const { data, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage } = - useInfiniteQuery({ - queryKey: ['movies', normalizedQuery], - queryFn: ({ pageParam, signal }) => - fetchMovies(normalizedQuery, pageParam, signal), - initialPageParam: 0, - getNextPageParam: (lastPage) => lastPage.nextPage, - enabled: open, - }); - - const options = React.useMemo( - () => data?.pages.flatMap((page) => page.items) ?? [], - [data], - ); - - const optionIndexMap = React.useMemo(() => { - const indexMap = new Map(); - - options.forEach((option, index) => { - indexMap.set(option.id, index); - }); - - return indexMap; - }, [options]); - - const handleReachEnd = useEventCallback(() => { - if (hasNextPage && !isFetchingNextPage) { - fetchNextPage(); - } - }); - - const handleInputChange = useEventCallback((_event, newInputValue, reason) => { - setInputValue(newInputValue); - - // Autocomplete also calls `onInputChange` for selection and blur resets. - // Only real typing should advance the remote query. - if (reason === 'input') { - setSearchInputValue(newInputValue); - } - - if (reason === 'clear') { - setSearchInputValue(newInputValue); - setQueryInputValue(newInputValue); - } - }); - - const handleHighlightChange = useEventCallback((_event, option) => { - const virtualizer = virtualizerRef.current; - if (!option || !virtualizer) { - return; - } - - // Keep keyboard navigation aligned with virtualization. Autocomplete can - // highlight rows that are not mounted, so its default scrollIntoView would - // otherwise no-op for off-screen options. - const index = optionIndexMap.get(option.id); - if (index !== undefined) { - virtualizer.scrollToIndex(index, { align: 'auto' }); - } - }); - - // The listbox scrolls back to the top when the popup opens or the search - // query changes, matching what users expect from a newly loaded result set. - const listboxResetKey = open ? normalizedQuery : `closed:${normalizedQuery}`; - - return ( - setOpen(true)} - onClose={() => setOpen(false)} - options={options} - value={value} - onChange={(_event, newValue) => setValue(newValue)} - inputValue={inputValue} - onInputChange={handleInputChange} - // Results are already filtered by the query key, so disable the built-in - // client filter. - filterOptions={(x) => x} - getOptionLabel={getMovieLabel} - isOptionEqualToValue={(option, candidate) => option.id === candidate.id} - loading={isFetching} - loadingText="Loading movies…" - disableListWrap - onHighlightChange={handleHighlightChange} - renderOption={(optionProps, option) => [optionProps, option]} - renderInput={(params) => { - const { endAdornment, ...inputSlotProps } = params.slotProps.input; - - return ( - - {isFetching ? ( - - ) : null} - {endAdornment} - - ), - }, - }} - /> - ); - }} - slotProps={{ - // The cast is only for the extra props injected into this custom slot. - listbox: { - component: VirtualListbox, - onReachEnd: handleReachEnd, - resetScrollKey: listboxResetKey, - virtualizerRef, - }, - }} - /> - ); -} - -const queryClientOptions = { - defaultOptions: { - queries: { - staleTime: 60_000, - refetchOnWindowFocus: false, - }, - }, -}; - -export default function InfiniteLoading() { - // Create the QueryClient once for this mounted demo. In an app, this usually - // lives near the root alongside the rest of your data-fetching setup. - const [queryClient] = React.useState(() => new QueryClient(queryClientOptions)); - - return ( - - - - ); -} diff --git a/docs/data/material/components/autocomplete/InfiniteLoading.tsx.preview b/docs/data/material/components/autocomplete/InfiniteLoading.tsx.preview deleted file mode 100644 index ed4e30762ab7b6..00000000000000 --- a/docs/data/material/components/autocomplete/InfiniteLoading.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/autocomplete/LimitTags.js b/docs/data/material/components/autocomplete/LimitTags.js deleted file mode 100644 index c882d0debcfa79..00000000000000 --- a/docs/data/material/components/autocomplete/LimitTags.js +++ /dev/null @@ -1,147 +0,0 @@ -import Autocomplete from '@mui/material/Autocomplete'; -import TextField from '@mui/material/TextField'; - -export default function LimitTags() { - return ( - option.title} - defaultValue={[top100Films[13], top100Films[12], top100Films[11]]} - renderInput={(params) => ( - - )} - sx={{ width: '500px' }} - /> - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/LimitTags.tsx.preview b/docs/data/material/components/autocomplete/LimitTags.tsx.preview deleted file mode 100644 index 4e447dea48e520..00000000000000 --- a/docs/data/material/components/autocomplete/LimitTags.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - option.title} - defaultValue={[top100Films[13], top100Films[12], top100Films[11]]} - renderInput={(params) => ( - - )} - sx={{ width: '500px' }} -/> \ No newline at end of file diff --git a/docs/data/material/components/autocomplete/Playground.js b/docs/data/material/components/autocomplete/Playground.js deleted file mode 100644 index ea72267877c7f5..00000000000000 --- a/docs/data/material/components/autocomplete/Playground.js +++ /dev/null @@ -1,288 +0,0 @@ -import * as React from 'react'; -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; -import Stack from '@mui/material/Stack'; - -export default function Playground() { - const defaultProps = { - options: top100Films, - getOptionLabel: (option) => option.title, - }; - const flatProps = { - options: top100Films.map((option) => option.title), - }; - const [value, setValue] = React.useState(null); - - return ( - - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - { - setValue(newValue); - }} - renderInput={(params) => ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - ( - - )} - /> - - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/RenderGroup.js b/docs/data/material/components/autocomplete/RenderGroup.js deleted file mode 100644 index 5e5737b75f0480..00000000000000 --- a/docs/data/material/components/autocomplete/RenderGroup.js +++ /dev/null @@ -1,172 +0,0 @@ -import TextField from '@mui/material/TextField'; -import Autocomplete from '@mui/material/Autocomplete'; -import { styled, lighten, darken } from '@mui/system'; - -const GroupHeader = styled('div')(({ theme }) => ({ - position: 'sticky', - top: '-8px', - padding: '4px 10px', - color: theme.palette.primary.main, - backgroundColor: lighten(theme.palette.primary.light, 0.85), - ...theme.applyStyles('dark', { - backgroundColor: darken(theme.palette.primary.main, 0.8), - }), -})); - -const GroupItems = styled('ul')({ - padding: 0, -}); - -export default function RenderGroup() { - const options = top100Films.map((option) => { - const firstLetter = option.title[0].toUpperCase(); - return { - firstLetter: /[0-9]/.test(firstLetter) ? '0-9' : firstLetter, - ...option, - }; - }); - - return ( - -b.firstLetter.localeCompare(a.firstLetter))} - groupBy={(option) => option.firstLetter} - getOptionLabel={(option) => option.title} - sx={{ width: 300 }} - renderInput={(params) => } - renderGroup={(params) => ( -
    • - {params.group} - {params.children} -
      • - )} - /> - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/RenderGroup.tsx.preview b/docs/data/material/components/autocomplete/RenderGroup.tsx.preview deleted file mode 100644 index 85d7b49d75f0d7..00000000000000 --- a/docs/data/material/components/autocomplete/RenderGroup.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - -b.firstLetter.localeCompare(a.firstLetter))} - groupBy={(option) => option.firstLetter} - getOptionLabel={(option) => option.title} - sx={{ width: 300 }} - renderInput={(params) => } - renderGroup={(params) => ( -
    • - {params.group} - {params.children} -
      • - )} -/> \ No newline at end of file diff --git a/docs/data/material/components/autocomplete/Sizes.js b/docs/data/material/components/autocomplete/Sizes.js deleted file mode 100644 index 6ad2b064b0046c..00000000000000 --- a/docs/data/material/components/autocomplete/Sizes.js +++ /dev/null @@ -1,236 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Chip from '@mui/material/Chip'; -import Autocomplete from '@mui/material/Autocomplete'; -import TextField from '@mui/material/TextField'; - -export default function Sizes() { - return ( - - option.title} - defaultValue={top100Films[13]} - renderInput={(params) => ( - - )} - /> - option.title} - defaultValue={[top100Films[13]]} - renderInput={(params) => ( - - )} - /> - option.title} - defaultValue={top100Films[13]} - renderInput={(params) => ( - - )} - /> - option.title} - defaultValue={[top100Films[13]]} - renderInput={(params) => ( - - )} - /> - option.title} - defaultValue={top100Films[13]} - renderInput={(params) => ( - - )} - /> - option.title} - defaultValue={[top100Films[13]]} - renderValue={(values, getItemProps) => - values.map((option, index) => { - const { key, ...itemProps } = getItemProps({ index }); - return ( - - ); - }) - } - renderInput={(params) => ( - - )} - /> - - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/Tags.js b/docs/data/material/components/autocomplete/Tags.js deleted file mode 100644 index ed1e92eab6c4b2..00000000000000 --- a/docs/data/material/components/autocomplete/Tags.js +++ /dev/null @@ -1,202 +0,0 @@ -import Chip from '@mui/material/Chip'; -import Autocomplete from '@mui/material/Autocomplete'; -import TextField from '@mui/material/TextField'; -import Stack from '@mui/material/Stack'; - -export default function Tags() { - return ( - - option.title} - defaultValue={[top100Films[13]]} - renderInput={(params) => ( - - )} - /> - option.title} - defaultValue={[top100Films[13]]} - filterSelectedOptions - renderInput={(params) => ( - - )} - /> - option.title)} - defaultValue={[top100Films[13].title]} - freeSolo - renderValue={(value, getItemProps) => - value.map((option, index) => { - const { key, ...itemProps } = getItemProps({ index }); - return ( - - ); - }) - } - renderInput={(params) => ( - - )} - /> - option.title)} - defaultValue={[top100Films[12].title, top100Films[13].title]} - readOnly - renderInput={(params) => ( - - )} - /> - - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.js b/docs/data/material/components/autocomplete/UseAutocomplete.js deleted file mode 100644 index 97f404f936568e..00000000000000 --- a/docs/data/material/components/autocomplete/UseAutocomplete.js +++ /dev/null @@ -1,205 +0,0 @@ -import useAutocomplete from '@mui/material/useAutocomplete'; -import { styled } from '@mui/system'; - -const Label = styled('label')({ - display: 'block', -}); - -const Input = styled('input')(({ theme }) => ({ - width: 200, - backgroundColor: '#fff', - color: '#000', - ...theme.applyStyles('dark', { - backgroundColor: '#000', - color: '#fff', - }), -})); - -const Listbox = styled('ul')(({ theme }) => ({ - width: 200, - margin: 0, - padding: 0, - zIndex: 1, - position: 'absolute', - listStyle: 'none', - backgroundColor: '#fff', - overflow: 'auto', - maxHeight: 200, - border: '1px solid rgba(0,0,0,.25)', - '& li.Mui-focused': { - backgroundColor: '#4a8df6', - color: 'white', - cursor: 'pointer', - }, - '& li:active': { - backgroundColor: '#2977f5', - color: 'white', - }, - ...theme.applyStyles('dark', { - backgroundColor: '#000', - }), -})); - -export default function UseAutocomplete() { - const { - getRootProps, - getInputLabelProps, - getInputProps, - getListboxProps, - getOptionProps, - groupedOptions, - } = useAutocomplete({ - id: 'use-autocomplete-demo', - options: top100Films, - getOptionLabel: (option) => option.title, - }); - - return ( -
      -
      - - -
      - {groupedOptions.length > 0 ? ( - - {groupedOptions.map((option, index) => { - const { key, ...optionProps } = getOptionProps({ option, index }); - return ( -
    • - {option.title} -
      • - ); - })} -       - ) : null} -
      - ); -} - -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { title: 'The Shawshank Redemption', year: 1994 }, - { title: 'The Godfather', year: 1972 }, - { title: 'The Godfather: Part II', year: 1974 }, - { title: 'The Dark Knight', year: 2008 }, - { title: '12 Angry Men', year: 1957 }, - { title: "Schindler's List", year: 1993 }, - { title: 'Pulp Fiction', year: 1994 }, - { - title: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { title: 'The Good, the Bad and the Ugly', year: 1966 }, - { title: 'Fight Club', year: 1999 }, - { - title: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - title: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { title: 'Forrest Gump', year: 1994 }, - { title: 'Inception', year: 2010 }, - { - title: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { title: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { title: 'Goodfellas', year: 1990 }, - { title: 'The Matrix', year: 1999 }, - { title: 'Seven Samurai', year: 1954 }, - { - title: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { title: 'City of God', year: 2002 }, - { title: 'Se7en', year: 1995 }, - { title: 'The Silence of the Lambs', year: 1991 }, - { title: "It's a Wonderful Life", year: 1946 }, - { title: 'Life Is Beautiful', year: 1997 }, - { title: 'The Usual Suspects', year: 1995 }, - { title: 'Léon: The Professional', year: 1994 }, - { title: 'Spirited Away', year: 2001 }, - { title: 'Saving Private Ryan', year: 1998 }, - { title: 'Once Upon a Time in the West', year: 1968 }, - { title: 'American History X', year: 1998 }, - { title: 'Interstellar', year: 2014 }, - { title: 'Casablanca', year: 1942 }, - { title: 'City Lights', year: 1931 }, - { title: 'Psycho', year: 1960 }, - { title: 'The Green Mile', year: 1999 }, - { title: 'The Intouchables', year: 2011 }, - { title: 'Modern Times', year: 1936 }, - { title: 'Raiders of the Lost Ark', year: 1981 }, - { title: 'Rear Window', year: 1954 }, - { title: 'The Pianist', year: 2002 }, - { title: 'The Departed', year: 2006 }, - { title: 'Terminator 2: Judgment Day', year: 1991 }, - { title: 'Back to the Future', year: 1985 }, - { title: 'Whiplash', year: 2014 }, - { title: 'Gladiator', year: 2000 }, - { title: 'Memento', year: 2000 }, - { title: 'The Prestige', year: 2006 }, - { title: 'The Lion King', year: 1994 }, - { title: 'Apocalypse Now', year: 1979 }, - { title: 'Alien', year: 1979 }, - { title: 'Sunset Boulevard', year: 1950 }, - { - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { title: 'The Great Dictator', year: 1940 }, - { title: 'Cinema Paradiso', year: 1988 }, - { title: 'The Lives of Others', year: 2006 }, - { title: 'Grave of the Fireflies', year: 1988 }, - { title: 'Paths of Glory', year: 1957 }, - { title: 'Django Unchained', year: 2012 }, - { title: 'The Shining', year: 1980 }, - { title: 'WALL·E', year: 2008 }, - { title: 'American Beauty', year: 1999 }, - { title: 'The Dark Knight Rises', year: 2012 }, - { title: 'Princess Mononoke', year: 1997 }, - { title: 'Aliens', year: 1986 }, - { title: 'Oldboy', year: 2003 }, - { title: 'Once Upon a Time in America', year: 1984 }, - { title: 'Witness for the Prosecution', year: 1957 }, - { title: 'Das Boot', year: 1981 }, - { title: 'Citizen Kane', year: 1941 }, - { title: 'North by Northwest', year: 1959 }, - { title: 'Vertigo', year: 1958 }, - { - title: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { title: 'Reservoir Dogs', year: 1992 }, - { title: 'Braveheart', year: 1995 }, - { title: 'M', year: 1931 }, - { title: 'Requiem for a Dream', year: 2000 }, - { title: 'Amélie', year: 2001 }, - { title: 'A Clockwork Orange', year: 1971 }, - { title: 'Like Stars on Earth', year: 2007 }, - { title: 'Taxi Driver', year: 1976 }, - { title: 'Lawrence of Arabia', year: 1962 }, - { title: 'Double Indemnity', year: 1944 }, - { - title: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { title: 'Amadeus', year: 1984 }, - { title: 'To Kill a Mockingbird', year: 1962 }, - { title: 'Toy Story 3', year: 2010 }, - { title: 'Logan', year: 2017 }, - { title: 'Full Metal Jacket', year: 1987 }, - { title: 'Dangal', year: 2016 }, - { title: 'The Sting', year: 1973 }, - { title: '2001: A Space Odyssey', year: 1968 }, - { title: "Singin' in the Rain", year: 1952 }, - { title: 'Toy Story', year: 1995 }, - { title: 'Bicycle Thieves', year: 1948 }, - { title: 'The Kid', year: 1921 }, - { title: 'Inglourious Basterds', year: 2009 }, - { title: 'Snatch', year: 2000 }, - { title: '3 Idiots', year: 2009 }, - { title: 'Monty Python and the Holy Grail', year: 1975 }, -]; diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview b/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview deleted file mode 100644 index 6bd1f59e445bfe..00000000000000 --- a/docs/data/material/components/autocomplete/UseAutocomplete.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ -
      - - -
      -{groupedOptions.length > 0 ? ( - - {groupedOptions.map((option, index) => { - const { key, ...optionProps } = getOptionProps({ option, index }); - return ( -
    • - {option.title} -
      • - ); - })} -       -) : null} \ No newline at end of file diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js deleted file mode 100644 index b431dc73e84860..00000000000000 --- a/docs/data/material/components/autocomplete/Virtualize.js +++ /dev/null @@ -1,211 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import TextField from '@mui/material/TextField'; -import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete'; -import useMediaQuery from '@mui/material/useMediaQuery'; -import ListSubheader from '@mui/material/ListSubheader'; -import Popper from '@mui/material/Popper'; -import { useTheme, styled } from '@mui/material/styles'; -import { List, useListRef } from 'react-window'; -import Typography from '@mui/material/Typography'; - -const LISTBOX_PADDING = 8; // px - -function RowComponent({ index, itemData, style }) { - const dataSet = itemData[index]; - const inlineStyle = { - ...style, - top: (style.top ?? 0) + LISTBOX_PADDING, - }; - - if ('group' in dataSet) { - return ( - - {dataSet.group} - - ); - } - - const { key, ...optionProps } = dataSet[0]; - - return ( - - {`#${dataSet[2] + 1} - ${dataSet[1]}`} - - ); -} - -// Adapter for react-window v2 - -RowComponent.propTypes = { - index: PropTypes.number.isRequired, - itemData: PropTypes.arrayOf( - PropTypes.oneOfType([ - PropTypes.arrayOf( - PropTypes.oneOfType([PropTypes.element, PropTypes.number, PropTypes.string]) - .isRequired, - ), - PropTypes.shape({ - children: PropTypes.node, - group: PropTypes.string.isRequired, - key: PropTypes.number.isRequired, - }), - ]).isRequired, - ).isRequired, - style: PropTypes.object.isRequired, -}; - -const ListboxComponent = React.forwardRef(function ListboxComponent(props, ref) { - const { children, internalListRef, onItemsBuilt, ...other } = props; - const itemData = []; - const optionIndexMap = React.useMemo(() => new Map(), []); - - children.forEach((item) => { - itemData.push(item); - if ('children' in item && Array.isArray(item.children)) { - itemData.push(...item.children); - } - }); - - // Map option values to their indices in the flattened array - itemData.forEach((item, index) => { - if (Array.isArray(item) && item[1]) { - optionIndexMap.set(item[1], index); - } - }); - - React.useEffect(() => { - if (onItemsBuilt) { - onItemsBuilt(optionIndexMap); - } - }, [onItemsBuilt, optionIndexMap]); - - const theme = useTheme(); - const smUp = useMediaQuery(theme.breakpoints.up('sm'), { - noSsr: true, - }); - const itemCount = itemData.length; - const itemSize = smUp ? 36 : 48; - - const getChildSize = (child) => { - if (child.hasOwnProperty('group')) { - return 48; - } - return itemSize; - }; - - const getHeight = () => { - if (itemCount > 8) { - return 8 * itemSize; - } - return itemData.map(getChildSize).reduce((a, b) => a + b, 0); - }; - - // Separate className for List, other props for wrapper div (ARIA, handlers) - const { className, style, ...otherProps } = other; - - return ( -
      - getChildSize(itemData[index])} - rowComponent={RowComponent} - rowProps={{ itemData }} - style={{ - height: getHeight() + 2 * LISTBOX_PADDING, - width: '100%', - }} - overscanCount={5} - tagName="ul" - /> -
      - ); -}); - -ListboxComponent.propTypes = { - children: PropTypes.node, - className: PropTypes.string, - internalListRef: PropTypes.oneOfType([ - PropTypes.func, - PropTypes.shape({ - current: PropTypes.shape({ - element: PropTypes.object, - scrollToRow: PropTypes.func.isRequired, - }), - }), - ]), - onItemsBuilt: PropTypes.func.isRequired, - style: PropTypes.object, -}; - -function random(length) { - const characters = - 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - let result = ''; - - for (let i = 0; i < length; i += 1) { - result += characters.charAt(Math.floor(Math.random() * characters.length)); - } - - return result; -} - -const StyledPopper = styled(Popper)({ - [`& .${autocompleteClasses.listbox}`]: { - boxSizing: 'border-box', - '& ul': { - padding: 0, - margin: 0, - }, - }, -}); - -const OPTIONS = Array.from(new Array(10000)) - .map(() => random(10 + Math.ceil(Math.random() * 20))) - .sort((a, b) => a.toUpperCase().localeCompare(b.toUpperCase())); - -export default function Virtualize() { - // Use react-window v2's useListRef hook for imperative API access - const internalListRef = useListRef(null); - const optionIndexMapRef = React.useRef(new Map()); - - const handleItemsBuilt = React.useCallback((optionIndexMap) => { - optionIndexMapRef.current = optionIndexMap; - }, []); - - // Handle keyboard navigation by scrolling to highlighted option - const handleHighlightChange = (event, option) => { - if (option && internalListRef.current) { - const index = optionIndexMapRef.current.get(option); - if (index !== undefined) { - internalListRef.current.scrollToRow({ index, align: 'auto' }); - } - } - }; - - return ( - option[0].toUpperCase()} - renderInput={(params) => } - renderOption={(props, option, state) => [props, option, state.index]} - renderGroup={(params) => params} - onHighlightChange={handleHighlightChange} - slots={{ - popper: StyledPopper, - }} - slotProps={{ - listbox: { - component: ListboxComponent, - internalListRef, - onItemsBuilt: handleItemsBuilt, - }, - }} - /> - ); -} diff --git a/docs/data/material/components/autocomplete/autocomplete.md b/docs/data/material/components/autocomplete/autocomplete.md index 65f9e004007147..e7d7dcdd903e63 100644 --- a/docs/data/material/components/autocomplete/autocomplete.md +++ b/docs/data/material/components/autocomplete/autocomplete.md @@ -24,7 +24,7 @@ It's meant to be an improved version of the "react-select" and "downshift" packa The value must be chosen from a predefined set of allowed values. -{{"demo": "ComboBox.js"}} +{{"component": "file://./demos/combo-box/index.ts"}} ### Options structure @@ -71,13 +71,13 @@ return option.id} />; Each of the following examples demonstrates one feature of the Autocomplete component. -{{"demo": "Playground.js"}} +{{"component": "file://./demos/playground/index.ts"}} ### Country select Choose one of the 248 countries. -{{"demo": "CountrySelect.js"}} +{{"component": "file://./demos/country-select/index.ts"}} ### Controlled states @@ -96,7 +96,7 @@ These two states are isolated, and should be controlled independently. Learn more about controlled and uncontrolled components in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: -{{"demo": "ControllableStates.js"}} +{{"component": "file://./demos/controllable-states/index.ts"}} :::warning @@ -127,7 +127,7 @@ Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a **search input** with suggestions, for example Google search or react-autowhatever. -{{"demo": "FreeSolo.js"}} +{{"component": "file://./demos/free-solo/index.ts"}} :::warning Be careful when using the free solo mode with non-string options, as it may cause type mismatch. @@ -145,11 +145,11 @@ If you intend to use this mode for a [combo box](#combo-box) like experience (an - `resetHighlightOnMouseLeave` to clear mouse-created highlights when the pointer leaves the popup. - A last option, for instance: `Add "YOUR SEARCH"`. -{{"demo": "FreeSoloCreateOption.js"}} +{{"component": "file://./demos/free-solo-create-option/index.ts"}} You could also display a dialog when the user wants to add a new value. -{{"demo": "FreeSoloCreateOptionDialog.js"}} +{{"component": "file://./demos/free-solo-create-option-dialog/index.ts"}} ## Grouped @@ -157,7 +157,7 @@ You can group the options with the `groupBy` prop. If you do so, make sure that the options are also sorted with the same dimension that they are grouped by, otherwise, you will notice duplicate headers. -{{"demo": "Grouped.js"}} +{{"component": "file://./demos/grouped/index.ts"}} To control how the groups are rendered, provide a custom `renderGroup` prop. This is a function that accepts an object with two fields: @@ -167,11 +167,11 @@ This is a function that accepts an object with two fields: The following demo shows how to use this prop to define custom markup and override the styles of the default groups: -{{"demo": "RenderGroup.js"}} +{{"component": "file://./demos/render-group/index.ts"}} ## Disabled options -{{"demo": "DisabledOptions.js"}} +{{"component": "file://./demos/disabled-options/index.ts"}} ## `useAutocomplete` @@ -186,11 +186,11 @@ import useAutocomplete from '@mui/material/useAutocomplete'; - 📦 [4.6 kB gzipped](https://bundlephobia.com/package/@mui/material). -{{"demo": "UseAutocomplete.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/use/index.ts", "collapseToEmpty": true}} ### Customized hook -{{"demo": "CustomizedHook.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/customized-hook/index.ts", "collapseToEmpty": true}} Head to the [customization](#customization) section for an example with the `Autocomplete` component instead of the hook. @@ -205,7 +205,7 @@ The component supports two different asynchronous use-cases: It displays a progress state as long as the network request is pending. -{{"demo": "Asynchronous.js"}} +{{"component": "file://./demos/asynchronous/index.ts"}} ### Search as you type @@ -224,7 +224,7 @@ overriding the `filterOptions` prop: A customized UI for Google Maps Places Autocomplete. For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/overview) and [Google Places](https://developers.google.com/maps/documentation/places/web-service/overview) API. -{{"demo": "GoogleMaps.js"}} +{{"component": "file://./demos/google-maps/index.ts"}} The demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. @@ -238,7 +238,7 @@ This demo has limited quotas to make API requests. When your quota exceeds, you This demo uses `@tanstack/react-query` to additively fetch new data onto existing `options` upon reaching the end of the current list. The list is virtualized using `@tanstack/react-virtual`. -{{"demo": "InfiniteLoading.js"}} +{{"component": "file://./demos/infinite-loading/index.ts"}} ## Single value rendering @@ -249,7 +249,7 @@ This can be useful for adding custom styles, displaying additional information, - The `getItemProps` getter provides props like `data-item-index`, `disabled`, `tabIndex` and others. These props should be spread onto the rendered component for proper accessibility. - If using a custom component other than a Material UI Chip, destructure the `onDelete` prop as it's specific to the Material UI Chip. -{{"demo": "CustomSingleValueRendering.js"}} +{{"component": "file://./demos/custom-single-value-rendering/index.ts"}} ## Multiple values @@ -258,31 +258,31 @@ When `multiple={true}`, the user can select multiple values. These selected valu - The `getItemProps` getter supplies essential props like `data-item-index`, `disabled`, `tabIndex` and others. Make sure to spread them on each rendered item. - If using a custom component other than a Material UI Chip, destructure the `onDelete` prop as it's specific to the Material UI Chip. -{{"demo": "Tags.js"}} +{{"component": "file://./demos/tags/index.ts"}} ### Fixed options In the event that you need to lock certain tags so that they can't be removed, you can set the chips disabled. -{{"demo": "FixedTags.js"}} +{{"component": "file://./demos/fixed-tags/index.ts"}} ### Selection indicators This example demonstrates how icons are used to indicate the selection state of each item in the listbox. -{{"demo": "CheckboxesTags.js"}} +{{"component": "file://./demos/checkboxes-tags/index.ts"}} ### Limit tags You can use the `limitTags` prop to limit the number of displayed options when not focused. -{{"demo": "LimitTags.js"}} +{{"component": "file://./demos/limit-tags/index.ts"}} ## Sizes Fancy smaller inputs? Use the `size` prop. -{{"demo": "Sizes.js"}} +{{"component": "file://./demos/sizes/index.ts"}} ## Customization @@ -296,7 +296,7 @@ Pay specific attention to the `ref` and `inputProps` keys. If you're using a custom input component inside the Autocomplete, make sure that you forward the ref to the underlying DOM element. ::: -{{"demo": "CustomInputAutocomplete.js"}} +{{"component": "file://./demos/custom-input/index.ts"}} ### Globally customized options @@ -306,13 +306,13 @@ The `renderOption` property takes the `ownerState` as the fourth parameter, whic To display the label, you can use the `getOptionLabel` prop from the `ownerState`. This approach enables different options for each Autocomplete component while keeping the options styling consistent. -{{"demo": "GloballyCustomizedOptions.js"}} +{{"component": "file://./demos/globally-customized-options/index.ts"}} ### GitHub's picker This demo reproduces GitHub's label picker: -{{"demo": "GitHubLabel.js"}} +{{"component": "file://./demos/git-hub-label/index.ts"}} Head to the [Customized hook](#customized-hook) section for a customization example with the `useAutocomplete` hook instead of the component. @@ -320,13 +320,13 @@ Head to the [Customized hook](#customized-hook) section for a customization exam The following demo shows how to add a hint feature to the Autocomplete: -{{"demo": "AutocompleteHint.js"}} +{{"component": "file://./demos/hint/index.ts"}} ## Highlights The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. -{{"demo": "Highlights.js"}} +{{"component": "file://./demos/highlights/index.ts"}} ## Custom filter @@ -365,7 +365,7 @@ const filterOptions = createFilterOptions({ ; ``` -{{"demo": "Filter.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/filter/index.ts", "collapseToEmpty": true}} ### Advanced @@ -383,7 +383,7 @@ const filterOptions = (options, { inputValue }) => matchSorter(options, inputVal Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). -{{"demo": "Virtualize.js"}} +{{"component": "file://./demos/virtualize/index.ts"}} ## Events diff --git a/docs/data/material/components/autocomplete/Asynchronous.tsx b/docs/data/material/components/autocomplete/demos/asynchronous/Asynchronous.tsx similarity index 98% rename from docs/data/material/components/autocomplete/Asynchronous.tsx rename to docs/data/material/components/autocomplete/demos/asynchronous/Asynchronous.tsx index 48a9bb13ab434b..f6bd4386445c57 100644 --- a/docs/data/material/components/autocomplete/Asynchronous.tsx +++ b/docs/data/material/components/autocomplete/demos/asynchronous/Asynchronous.tsx @@ -17,6 +17,7 @@ function sleep(duration: number): Promise { } export default function Asynchronous() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const [options, setOptions] = React.useState([]); const [loading, setLoading] = React.useState(false); @@ -67,6 +68,7 @@ export default function Asynchronous() { )} /> ); + // @focus-end } // Top films as rated by IMDb users. http://www.imdb.com/chart/top diff --git a/docs/data/material/components/autocomplete/demos/asynchronous/client.ts b/docs/data/material/components/autocomplete/demos/asynchronous/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/asynchronous/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/asynchronous/index.ts b/docs/data/material/components/autocomplete/demos/asynchronous/index.ts new file mode 100644 index 00000000000000..ee6cce07b23c1a --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/asynchronous/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Asynchronous from './Asynchronous'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Asynchronous, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/CheckboxesTags.tsx b/docs/data/material/components/autocomplete/demos/checkboxes-tags/CheckboxesTags.tsx similarity index 98% rename from docs/data/material/components/autocomplete/CheckboxesTags.tsx rename to docs/data/material/components/autocomplete/demos/checkboxes-tags/CheckboxesTags.tsx index 53dc0603f35c51..2fd8e523685d62 100644 --- a/docs/data/material/components/autocomplete/CheckboxesTags.tsx +++ b/docs/data/material/components/autocomplete/demos/checkboxes-tags/CheckboxesTags.tsx @@ -5,6 +5,7 @@ import CheckBoxIcon from '@mui/icons-material/CheckBox'; export default function CheckboxesTags() { return ( + // @focus-start @padding 2 )} /> + // @focus-end ); } diff --git a/docs/data/material/components/autocomplete/demos/checkboxes-tags/client.ts b/docs/data/material/components/autocomplete/demos/checkboxes-tags/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/checkboxes-tags/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/checkboxes-tags/index.ts b/docs/data/material/components/autocomplete/demos/checkboxes-tags/index.ts new file mode 100644 index 00000000000000..b0baee81e77170 --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/checkboxes-tags/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CheckboxesTags from './CheckboxesTags'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CheckboxesTags, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/ComboBox.tsx b/docs/data/material/components/autocomplete/demos/combo-box/ComboBox.tsx similarity index 88% rename from docs/data/material/components/autocomplete/ComboBox.tsx rename to docs/data/material/components/autocomplete/demos/combo-box/ComboBox.tsx index 5b2fae26df430a..e2af7fd16f7bdb 100644 --- a/docs/data/material/components/autocomplete/ComboBox.tsx +++ b/docs/data/material/components/autocomplete/demos/combo-box/ComboBox.tsx @@ -4,11 +4,13 @@ import top100Films from './top100Films'; export default function ComboBox() { return ( + // @focus-start @padding 2 } /> + // @focus-end ); } diff --git a/docs/data/material/components/autocomplete/demos/combo-box/client.ts b/docs/data/material/components/autocomplete/demos/combo-box/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/combo-box/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/combo-box/index.ts b/docs/data/material/components/autocomplete/demos/combo-box/index.ts new file mode 100644 index 00000000000000..80e439e346c05c --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/combo-box/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ComboBox from './ComboBox'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ComboBox, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/top100Films.ts b/docs/data/material/components/autocomplete/demos/combo-box/top100Films.ts similarity index 100% rename from docs/data/material/components/autocomplete/top100Films.ts rename to docs/data/material/components/autocomplete/demos/combo-box/top100Films.ts diff --git a/docs/data/material/components/autocomplete/ControllableStates.tsx b/docs/data/material/components/autocomplete/demos/controllable-states/ControllableStates.tsx similarity index 95% rename from docs/data/material/components/autocomplete/ControllableStates.tsx rename to docs/data/material/components/autocomplete/demos/controllable-states/ControllableStates.tsx index 4cd5f442a496c7..2460bc2d80aca0 100644 --- a/docs/data/material/components/autocomplete/ControllableStates.tsx +++ b/docs/data/material/components/autocomplete/demos/controllable-states/ControllableStates.tsx @@ -5,6 +5,7 @@ import Autocomplete from '@mui/material/Autocomplete'; const options = ['Option 1', 'Option 2']; export default function ControllableStates() { + // @focus-start @padding 1 const [value, setValue] = React.useState(options[0]); const [inputValue, setInputValue] = React.useState(''); @@ -29,4 +30,5 @@ export default function ControllableStates() { />
    ); + // @focus-end } diff --git a/docs/data/material/components/autocomplete/demos/controllable-states/client.ts b/docs/data/material/components/autocomplete/demos/controllable-states/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/controllable-states/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/controllable-states/index.ts b/docs/data/material/components/autocomplete/demos/controllable-states/index.ts new file mode 100644 index 00000000000000..7b326566f0a234 --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/controllable-states/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ControllableStates from './ControllableStates'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ControllableStates, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/CountrySelect.tsx b/docs/data/material/components/autocomplete/demos/country-select/CountrySelect.tsx similarity index 99% rename from docs/data/material/components/autocomplete/CountrySelect.tsx rename to docs/data/material/components/autocomplete/demos/country-select/CountrySelect.tsx index e91d39d5f3796a..c51aa2945689bb 100644 --- a/docs/data/material/components/autocomplete/CountrySelect.tsx +++ b/docs/data/material/components/autocomplete/demos/country-select/CountrySelect.tsx @@ -4,6 +4,7 @@ import Autocomplete from '@mui/material/Autocomplete'; export default function CountrySelect() { return ( + // @focus-start @padding 2 )} /> + // @focus-end ); } interface CountryType { diff --git a/docs/data/material/components/autocomplete/demos/country-select/client.ts b/docs/data/material/components/autocomplete/demos/country-select/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/country-select/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/country-select/index.ts b/docs/data/material/components/autocomplete/demos/country-select/index.ts new file mode 100644 index 00000000000000..a8e1c9e0a3ba9e --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/country-select/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CountrySelect from './CountrySelect'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CountrySelect, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/CustomInputAutocomplete.tsx b/docs/data/material/components/autocomplete/demos/custom-input/CustomInputAutocomplete.tsx similarity index 93% rename from docs/data/material/components/autocomplete/CustomInputAutocomplete.tsx rename to docs/data/material/components/autocomplete/demos/custom-input/CustomInputAutocomplete.tsx index 5487c4f1944f75..c47daae7e5de3c 100644 --- a/docs/data/material/components/autocomplete/CustomInputAutocomplete.tsx +++ b/docs/data/material/components/autocomplete/demos/custom-input/CustomInputAutocomplete.tsx @@ -4,6 +4,7 @@ const options = ['Option 1', 'Option 2']; export default function CustomInputAutocomplete() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/autocomplete/demos/custom-input/client.ts b/docs/data/material/components/autocomplete/demos/custom-input/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/custom-input/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/custom-input/index.ts b/docs/data/material/components/autocomplete/demos/custom-input/index.ts new file mode 100644 index 00000000000000..ef338a5037f1fc --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/custom-input/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomInputAutocomplete from './CustomInputAutocomplete'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomInputAutocomplete, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx b/docs/data/material/components/autocomplete/demos/custom-single-value-rendering/CustomSingleValueRendering.tsx similarity index 98% rename from docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx rename to docs/data/material/components/autocomplete/demos/custom-single-value-rendering/CustomSingleValueRendering.tsx index 47dee0633df665..d15b424f9a2038 100644 --- a/docs/data/material/components/autocomplete/CustomSingleValueRendering.tsx +++ b/docs/data/material/components/autocomplete/demos/custom-single-value-rendering/CustomSingleValueRendering.tsx @@ -6,6 +6,7 @@ import Stack from '@mui/material/Stack'; export default function CustomSingleValueRendering() { return ( + {/* @focus-start */} option.title} @@ -22,6 +23,7 @@ export default function CustomSingleValueRendering() { )} renderInput={(params) => } /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/autocomplete/demos/custom-single-value-rendering/client.ts b/docs/data/material/components/autocomplete/demos/custom-single-value-rendering/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/custom-single-value-rendering/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/custom-single-value-rendering/index.ts b/docs/data/material/components/autocomplete/demos/custom-single-value-rendering/index.ts new file mode 100644 index 00000000000000..169226a28dde85 --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/custom-single-value-rendering/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomSingleValueRendering from './CustomSingleValueRendering'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomSingleValueRendering, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/CustomizedHook.tsx b/docs/data/material/components/autocomplete/demos/customized-hook/CustomizedHook.tsx similarity index 98% rename from docs/data/material/components/autocomplete/CustomizedHook.tsx rename to docs/data/material/components/autocomplete/demos/customized-hook/CustomizedHook.tsx index dbf0a2cc801080..8db304aa7ff33c 100644 --- a/docs/data/material/components/autocomplete/CustomizedHook.tsx +++ b/docs/data/material/components/autocomplete/demos/customized-hook/CustomizedHook.tsx @@ -1,4 +1,5 @@ -import useAutocomplete, { +import useAutocomplete from '@mui/material/useAutocomplete'; +import type { AutocompleteGetItemProps, UseAutocompleteProps, } from '@mui/material/useAutocomplete'; @@ -219,12 +220,14 @@ function CustomAutocomplete( export default function CustomizedHook() { return ( + // @focus-start @padding 2 id="customized-hook-demo" defaultValue={[top100Films[1]]} options={top100Films} getOptionLabel={(option) => option.title} /> + // @focus-end ); } diff --git a/docs/data/material/components/autocomplete/demos/customized-hook/client.ts b/docs/data/material/components/autocomplete/demos/customized-hook/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/customized-hook/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/customized-hook/index.ts b/docs/data/material/components/autocomplete/demos/customized-hook/index.ts new file mode 100644 index 00000000000000..da8419d27a68ec --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/customized-hook/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedHook from './CustomizedHook'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedHook, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/DisabledOptions.tsx b/docs/data/material/components/autocomplete/demos/disabled-options/DisabledOptions.tsx similarity index 92% rename from docs/data/material/components/autocomplete/DisabledOptions.tsx rename to docs/data/material/components/autocomplete/demos/disabled-options/DisabledOptions.tsx index 81d62b703bd189..0fb13d2fba313e 100644 --- a/docs/data/material/components/autocomplete/DisabledOptions.tsx +++ b/docs/data/material/components/autocomplete/demos/disabled-options/DisabledOptions.tsx @@ -3,6 +3,7 @@ import Autocomplete from '@mui/material/Autocomplete'; export default function DisabledOptions() { return ( + // @focus-start @padding 2 @@ -11,6 +12,7 @@ export default function DisabledOptions() { sx={{ width: 300 }} renderInput={(params) => } /> + // @focus-end ); } diff --git a/docs/data/material/components/autocomplete/demos/disabled-options/client.ts b/docs/data/material/components/autocomplete/demos/disabled-options/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/disabled-options/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/disabled-options/index.ts b/docs/data/material/components/autocomplete/demos/disabled-options/index.ts new file mode 100644 index 00000000000000..b9817c01227222 --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/disabled-options/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DisabledOptions from './DisabledOptions'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DisabledOptions, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/Filter.tsx b/docs/data/material/components/autocomplete/demos/filter/Filter.tsx similarity index 99% rename from docs/data/material/components/autocomplete/Filter.tsx rename to docs/data/material/components/autocomplete/demos/filter/Filter.tsx index b512bedd4bb0d0..f8317cd701116c 100644 --- a/docs/data/material/components/autocomplete/Filter.tsx +++ b/docs/data/material/components/autocomplete/demos/filter/Filter.tsx @@ -8,6 +8,7 @@ const filterOptions = createFilterOptions({ export default function Filter() { return ( + // @focus-start @padding 2 option.title} @@ -15,6 +16,7 @@ export default function Filter() { sx={{ width: 300 }} renderInput={(params) => } /> + // @focus-end ); } diff --git a/docs/data/material/components/autocomplete/demos/filter/client.ts b/docs/data/material/components/autocomplete/demos/filter/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/filter/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/filter/index.ts b/docs/data/material/components/autocomplete/demos/filter/index.ts new file mode 100644 index 00000000000000..46cdb94ecf747a --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/filter/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Filter from './Filter'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Filter, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/FixedTags.tsx b/docs/data/material/components/autocomplete/demos/fixed-tags/FixedTags.tsx similarity index 99% rename from docs/data/material/components/autocomplete/FixedTags.tsx rename to docs/data/material/components/autocomplete/demos/fixed-tags/FixedTags.tsx index a36922ba448fb9..5dcb0e2d0afebb 100644 --- a/docs/data/material/components/autocomplete/FixedTags.tsx +++ b/docs/data/material/components/autocomplete/demos/fixed-tags/FixedTags.tsx @@ -4,6 +4,7 @@ import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; export default function FixedTags() { + // @focus-start @padding 1 const fixedOptions = [top100Films[6]]; const [value, setValue] = React.useState([...fixedOptions, top100Films[13]]); @@ -39,6 +40,7 @@ export default function FixedTags() { )} /> ); + // @focus-end } // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top diff --git a/docs/data/material/components/autocomplete/demos/fixed-tags/client.ts b/docs/data/material/components/autocomplete/demos/fixed-tags/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/fixed-tags/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/fixed-tags/index.ts b/docs/data/material/components/autocomplete/demos/fixed-tags/index.ts new file mode 100644 index 00000000000000..44b49f933f82f2 --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/fixed-tags/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FixedTags from './FixedTags'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FixedTags, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx b/docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/FreeSoloCreateOptionDialog.tsx similarity index 99% rename from docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx rename to docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/FreeSoloCreateOptionDialog.tsx index cf91675587e4f9..ba7e31ef1fa382 100644 --- a/docs/data/material/components/autocomplete/FreeSoloCreateOptionDialog.tsx +++ b/docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/FreeSoloCreateOptionDialog.tsx @@ -11,6 +11,7 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'; const filter = createFilterOptions(); export default function FreeSoloCreateOptionDialog() { + // @focus-start @padding 1 const [value, setValue] = React.useState(null); const [open, toggleOpen] = React.useState(false); @@ -145,6 +146,7 @@ export default function FreeSoloCreateOptionDialog() { ); + // @focus-end } interface FilmOptionType { diff --git a/docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/client.ts b/docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/index.ts b/docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/index.ts new file mode 100644 index 00000000000000..6449a397816d80 --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/free-solo-create-option-dialog/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FreeSoloCreateOptionDialog from './FreeSoloCreateOptionDialog'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FreeSoloCreateOptionDialog, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx b/docs/data/material/components/autocomplete/demos/free-solo-create-option/FreeSoloCreateOption.tsx similarity index 99% rename from docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx rename to docs/data/material/components/autocomplete/demos/free-solo-create-option/FreeSoloCreateOption.tsx index 156a03a620c940..e70c662fbec367 100644 --- a/docs/data/material/components/autocomplete/FreeSoloCreateOption.tsx +++ b/docs/data/material/components/autocomplete/demos/free-solo-create-option/FreeSoloCreateOption.tsx @@ -5,6 +5,7 @@ import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete'; const filter = createFilterOptions(); export default function FreeSoloCreateOption() { + // @focus-start @padding 1 const [value, setValue] = React.useState(null); return ( @@ -72,6 +73,7 @@ export default function FreeSoloCreateOption() { )} /> ); + // @focus-end } interface FilmOptionType { diff --git a/docs/data/material/components/autocomplete/demos/free-solo-create-option/client.ts b/docs/data/material/components/autocomplete/demos/free-solo-create-option/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/free-solo-create-option/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/free-solo-create-option/index.ts b/docs/data/material/components/autocomplete/demos/free-solo-create-option/index.ts new file mode 100644 index 00000000000000..0bcfe2b13121e7 --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/free-solo-create-option/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FreeSoloCreateOption from './FreeSoloCreateOption'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FreeSoloCreateOption, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/FreeSolo.tsx b/docs/data/material/components/autocomplete/demos/free-solo/FreeSolo.tsx similarity index 99% rename from docs/data/material/components/autocomplete/FreeSolo.tsx rename to docs/data/material/components/autocomplete/demos/free-solo/FreeSolo.tsx index b3d12a0a75e8a1..95f30a133150fb 100644 --- a/docs/data/material/components/autocomplete/FreeSolo.tsx +++ b/docs/data/material/components/autocomplete/demos/free-solo/FreeSolo.tsx @@ -5,6 +5,7 @@ import Autocomplete from '@mui/material/Autocomplete'; export default function FreeSolo() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/autocomplete/demos/free-solo/client.ts b/docs/data/material/components/autocomplete/demos/free-solo/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/free-solo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/free-solo/index.ts b/docs/data/material/components/autocomplete/demos/free-solo/index.ts new file mode 100644 index 00000000000000..41aa89ca9dbdc4 --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/free-solo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FreeSolo from './FreeSolo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FreeSolo, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/GitHubLabel.tsx b/docs/data/material/components/autocomplete/demos/git-hub-label/GitHubLabel.tsx similarity index 98% rename from docs/data/material/components/autocomplete/GitHubLabel.tsx rename to docs/data/material/components/autocomplete/demos/git-hub-label/GitHubLabel.tsx index 09e83bdecfba54..e57c663fcb230f 100644 --- a/docs/data/material/components/autocomplete/GitHubLabel.tsx +++ b/docs/data/material/components/autocomplete/demos/git-hub-label/GitHubLabel.tsx @@ -5,10 +5,8 @@ import ClickAwayListener from '@mui/material/ClickAwayListener'; import SettingsIcon from '@mui/icons-material/Settings'; import CloseIcon from '@mui/icons-material/Close'; import DoneIcon from '@mui/icons-material/Done'; -import Autocomplete, { - AutocompleteCloseReason, - autocompleteClasses, -} from '@mui/material/Autocomplete'; +import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete'; +import type { AutocompleteCloseReason } from '@mui/material/Autocomplete'; import ButtonBase from '@mui/material/ButtonBase'; import InputBase from '@mui/material/InputBase'; import Box from '@mui/material/Box'; @@ -131,6 +129,7 @@ const Button = styled(ButtonBase)(({ theme }) => ({ })); export default function GitHubLabel() { + // @focus-start @padding 1 const [anchorEl, setAnchorEl] = React.useState(null); const [value, setValue] = React.useState([labels[1], labels[11]]); const [pendingValue, setPendingValue] = React.useState([]); @@ -294,6 +293,7 @@ export default function GitHubLabel() { ); + // @focus-end } interface LabelType { diff --git a/docs/data/material/components/autocomplete/demos/git-hub-label/client.ts b/docs/data/material/components/autocomplete/demos/git-hub-label/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/git-hub-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/git-hub-label/index.ts b/docs/data/material/components/autocomplete/demos/git-hub-label/index.ts new file mode 100644 index 00000000000000..a7293d1a36e34e --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/git-hub-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GitHubLabel from './GitHubLabel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GitHubLabel, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx b/docs/data/material/components/autocomplete/demos/globally-customized-options/GloballyCustomizedOptions.tsx similarity index 99% rename from docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx rename to docs/data/material/components/autocomplete/demos/globally-customized-options/GloballyCustomizedOptions.tsx index 553b30e71178ea..85144c0d00e3a2 100644 --- a/docs/data/material/components/autocomplete/GloballyCustomizedOptions.tsx +++ b/docs/data/material/components/autocomplete/demos/globally-customized-options/GloballyCustomizedOptions.tsx @@ -2,7 +2,8 @@ import Autocomplete, { autocompleteClasses } from '@mui/material/Autocomplete'; import Box from '@mui/material/Box'; import Stack from '@mui/material/Stack'; import TextField from '@mui/material/TextField'; -import { createTheme, useTheme, ThemeProvider, Theme } from '@mui/material/styles'; +import { createTheme, useTheme, ThemeProvider } from '@mui/material/styles'; +import type { Theme } from '@mui/material/styles'; // Theme.ts const customTheme = (outerTheme: Theme) => @@ -45,12 +46,14 @@ export default function GloballyCustomizedOptions() { const outerTheme = useTheme(); return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/autocomplete/demos/globally-customized-options/client.ts b/docs/data/material/components/autocomplete/demos/globally-customized-options/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/globally-customized-options/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/globally-customized-options/index.ts b/docs/data/material/components/autocomplete/demos/globally-customized-options/index.ts new file mode 100644 index 00000000000000..0bee4db47a6f0a --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/globally-customized-options/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GloballyCustomizedOptions from './GloballyCustomizedOptions'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GloballyCustomizedOptions, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/GoogleMaps.tsx b/docs/data/material/components/autocomplete/demos/google-maps/GoogleMaps.tsx similarity index 93% rename from docs/data/material/components/autocomplete/GoogleMaps.tsx rename to docs/data/material/components/autocomplete/demos/google-maps/GoogleMaps.tsx index c4622b5f0d76f8..5c71cbddeb0498 100644 --- a/docs/data/material/components/autocomplete/GoogleMaps.tsx +++ b/docs/data/material/components/autocomplete/demos/google-maps/GoogleMaps.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import TextField from '@mui/material/TextField'; import Autocomplete from '@mui/material/Autocomplete'; -import Paper, { PaperProps } from '@mui/material/Paper'; +import Paper from '@mui/material/Paper'; +import type { PaperProps } from '@mui/material/Paper'; import LocationOnIcon from '@mui/icons-material/LocationOn'; import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; @@ -124,31 +125,50 @@ const emptyOptions = [] as any; let sessionToken: any; export default function GoogleMaps() { + // @focus-start @padding 1 const [value, setValue] = React.useState(null); const [inputValue, setInputValue] = React.useState(''); const [options, setOptions] = React.useState(emptyOptions); const callbackId = React.useId().replace(/[^\w]/g, ''); const [loaded, setLoaded] = React.useState(false); - if (typeof window !== 'undefined') { - if (!document.querySelector('#google-maps')) { - const GOOGLE_NAMESPACE = '_google_callback'; - const globalContext = - // @ts-ignore - window[GOOGLE_NAMESPACE] || (window[GOOGLE_NAMESPACE] = {}); - globalContext[callbackId] = () => { + React.useEffect(() => { + if (typeof window === 'undefined') { + return undefined; + } + + // The Google global is already available (script loaded by a prior mount). + if ((window as any).google) { + setLoaded(true); + return undefined; + } + + let active = true; + const GOOGLE_NAMESPACE = '_google_callback'; + const globalContext = + // @ts-ignore + window[GOOGLE_NAMESPACE] || (window[GOOGLE_NAMESPACE] = {}); + // Register (or re-register) the callback so it points at this mounted + // instance. The `active` guard turns a late callback (after unmount, e.g. + // a Strict Mode remount) into a no-op instead of a setState warning. + globalContext[callbackId] = () => { + if (active) { setLoaded(true); - }; + } + }; + if (!document.querySelector('#google-maps')) { const script = loadScript( `https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY}&libraries=places&loading=async&callback=${GOOGLE_NAMESPACE}.${callbackId}`, document.querySelector('head')!, ); script.id = 'google-maps'; - } else if ((window as any).google && !loaded) { - setLoaded(true); } - } + + return () => { + active = false; + }; + }, [callbackId]); useEnhancedEffect(() => { if (!loaded) { @@ -263,6 +283,7 @@ export default function GoogleMaps() { }} /> ); + // @focus-end } // Fake data in case Google Maps Places API returns a rate limit. diff --git a/docs/data/material/components/autocomplete/demos/google-maps/client.ts b/docs/data/material/components/autocomplete/demos/google-maps/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/google-maps/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/google-maps/index.ts b/docs/data/material/components/autocomplete/demos/google-maps/index.ts new file mode 100644 index 00000000000000..d583aa8e57eb7a --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/google-maps/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GoogleMaps from './GoogleMaps'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GoogleMaps, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/Grouped.tsx b/docs/data/material/components/autocomplete/demos/grouped/Grouped.tsx similarity index 99% rename from docs/data/material/components/autocomplete/Grouped.tsx rename to docs/data/material/components/autocomplete/demos/grouped/Grouped.tsx index 345c9d4521a531..19555ec2f628e2 100644 --- a/docs/data/material/components/autocomplete/Grouped.tsx +++ b/docs/data/material/components/autocomplete/demos/grouped/Grouped.tsx @@ -11,6 +11,7 @@ export default function Grouped() { }); return ( + // @focus-start @padding 2 -b.firstLetter.localeCompare(a.firstLetter))} groupBy={(option) => option.firstLetter} @@ -18,6 +19,7 @@ export default function Grouped() { sx={{ width: 300 }} renderInput={(params) => } /> + // @focus-end ); } diff --git a/docs/data/material/components/autocomplete/demos/grouped/client.ts b/docs/data/material/components/autocomplete/demos/grouped/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/grouped/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/grouped/index.ts b/docs/data/material/components/autocomplete/demos/grouped/index.ts new file mode 100644 index 00000000000000..182ccbdcb19a0c --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/grouped/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Grouped from './Grouped'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Grouped, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/Highlights.tsx b/docs/data/material/components/autocomplete/demos/highlights/Highlights.tsx similarity index 99% rename from docs/data/material/components/autocomplete/Highlights.tsx rename to docs/data/material/components/autocomplete/demos/highlights/Highlights.tsx index 8902223d812529..b9c6383736d466 100644 --- a/docs/data/material/components/autocomplete/Highlights.tsx +++ b/docs/data/material/components/autocomplete/demos/highlights/Highlights.tsx @@ -5,6 +5,7 @@ import match from 'autosuggest-highlight/match'; export default function Highlights() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/autocomplete/demos/highlights/client.ts b/docs/data/material/components/autocomplete/demos/highlights/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/highlights/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/highlights/index.ts b/docs/data/material/components/autocomplete/demos/highlights/index.ts new file mode 100644 index 00000000000000..1345f4e5e0ef5a --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/highlights/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Highlights from './Highlights'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Highlights, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/AutocompleteHint.tsx b/docs/data/material/components/autocomplete/demos/hint/AutocompleteHint.tsx similarity index 99% rename from docs/data/material/components/autocomplete/AutocompleteHint.tsx rename to docs/data/material/components/autocomplete/demos/hint/AutocompleteHint.tsx index eabea1b08af6f0..680b42412555c0 100644 --- a/docs/data/material/components/autocomplete/AutocompleteHint.tsx +++ b/docs/data/material/components/autocomplete/demos/hint/AutocompleteHint.tsx @@ -5,6 +5,7 @@ import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; export default function AutocompleteHint() { + // @focus-start @padding 1 const hint = React.useRef(''); const [inputValue, setInputValue] = React.useState(''); return ( @@ -67,6 +68,7 @@ export default function AutocompleteHint() { }} /> ); + // @focus-end } // Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top diff --git a/docs/data/material/components/autocomplete/demos/hint/client.ts b/docs/data/material/components/autocomplete/demos/hint/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/hint/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/hint/index.ts b/docs/data/material/components/autocomplete/demos/hint/index.ts new file mode 100644 index 00000000000000..f3f7281dde7ae6 --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/hint/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AutocompleteHint from './AutocompleteHint'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AutocompleteHint, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/InfiniteLoading.tsx b/docs/data/material/components/autocomplete/demos/infinite-loading/InfiniteLoading.tsx similarity index 99% rename from docs/data/material/components/autocomplete/InfiniteLoading.tsx rename to docs/data/material/components/autocomplete/demos/infinite-loading/InfiniteLoading.tsx index 20fb9b6bcd69c4..68a91f22636e4d 100644 --- a/docs/data/material/components/autocomplete/InfiniteLoading.tsx +++ b/docs/data/material/components/autocomplete/demos/infinite-loading/InfiniteLoading.tsx @@ -349,8 +349,10 @@ export default function InfiniteLoading() { const [queryClient] = React.useState(() => new QueryClient(queryClientOptions)); return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/autocomplete/demos/infinite-loading/client.ts b/docs/data/material/components/autocomplete/demos/infinite-loading/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/infinite-loading/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/infinite-loading/index.ts b/docs/data/material/components/autocomplete/demos/infinite-loading/index.ts new file mode 100644 index 00000000000000..ac455533e7de35 --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/infinite-loading/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import InfiniteLoading from './InfiniteLoading'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, InfiniteLoading, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/movies.ts b/docs/data/material/components/autocomplete/demos/infinite-loading/movies.ts similarity index 100% rename from docs/data/material/components/autocomplete/movies.ts rename to docs/data/material/components/autocomplete/demos/infinite-loading/movies.ts diff --git a/docs/data/material/components/autocomplete/server.ts b/docs/data/material/components/autocomplete/demos/infinite-loading/server.ts similarity index 100% rename from docs/data/material/components/autocomplete/server.ts rename to docs/data/material/components/autocomplete/demos/infinite-loading/server.ts diff --git a/docs/data/material/components/autocomplete/LimitTags.tsx b/docs/data/material/components/autocomplete/demos/limit-tags/LimitTags.tsx similarity index 99% rename from docs/data/material/components/autocomplete/LimitTags.tsx rename to docs/data/material/components/autocomplete/demos/limit-tags/LimitTags.tsx index c882d0debcfa79..9b3a3c34380870 100644 --- a/docs/data/material/components/autocomplete/LimitTags.tsx +++ b/docs/data/material/components/autocomplete/demos/limit-tags/LimitTags.tsx @@ -3,6 +3,7 @@ import TextField from '@mui/material/TextField'; export default function LimitTags() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/autocomplete/demos/limit-tags/client.ts b/docs/data/material/components/autocomplete/demos/limit-tags/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/limit-tags/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/limit-tags/index.ts b/docs/data/material/components/autocomplete/demos/limit-tags/index.ts new file mode 100644 index 00000000000000..084788f9c9adcc --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/limit-tags/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LimitTags from './LimitTags'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LimitTags, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/Playground.tsx b/docs/data/material/components/autocomplete/demos/playground/Playground.tsx similarity index 99% rename from docs/data/material/components/autocomplete/Playground.tsx rename to docs/data/material/components/autocomplete/demos/playground/Playground.tsx index c2b906f58bb091..f7c711c0701b45 100644 --- a/docs/data/material/components/autocomplete/Playground.tsx +++ b/docs/data/material/components/autocomplete/demos/playground/Playground.tsx @@ -4,6 +4,7 @@ import Autocomplete from '@mui/material/Autocomplete'; import Stack from '@mui/material/Stack'; export default function Playground() { + // @focus-start @padding 1 const defaultProps = { options: top100Films, getOptionLabel: (option: FilmOptionType) => option.title, @@ -157,6 +158,7 @@ export default function Playground() { /> ); + // @focus-end } interface FilmOptionType { diff --git a/docs/data/material/components/autocomplete/demos/playground/client.ts b/docs/data/material/components/autocomplete/demos/playground/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/playground/index.ts b/docs/data/material/components/autocomplete/demos/playground/index.ts new file mode 100644 index 00000000000000..2043563593f529 --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Playground from './Playground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Playground, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/RenderGroup.tsx b/docs/data/material/components/autocomplete/demos/render-group/RenderGroup.tsx similarity index 99% rename from docs/data/material/components/autocomplete/RenderGroup.tsx rename to docs/data/material/components/autocomplete/demos/render-group/RenderGroup.tsx index 5e5737b75f0480..2616240601b478 100644 --- a/docs/data/material/components/autocomplete/RenderGroup.tsx +++ b/docs/data/material/components/autocomplete/demos/render-group/RenderGroup.tsx @@ -27,6 +27,7 @@ export default function RenderGroup() { }); return ( + // @focus-start @padding 2 -b.firstLetter.localeCompare(a.firstLetter))} groupBy={(option) => option.firstLetter} @@ -40,6 +41,7 @@ export default function RenderGroup() { )} /> + // @focus-end ); } diff --git a/docs/data/material/components/autocomplete/demos/render-group/client.ts b/docs/data/material/components/autocomplete/demos/render-group/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/render-group/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/render-group/index.ts b/docs/data/material/components/autocomplete/demos/render-group/index.ts new file mode 100644 index 00000000000000..22740e85cc9fca --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/render-group/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RenderGroup from './RenderGroup'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RenderGroup, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/Sizes.tsx b/docs/data/material/components/autocomplete/demos/sizes/Sizes.tsx similarity index 99% rename from docs/data/material/components/autocomplete/Sizes.tsx rename to docs/data/material/components/autocomplete/demos/sizes/Sizes.tsx index 6ad2b064b0046c..d99874ef51ded5 100644 --- a/docs/data/material/components/autocomplete/Sizes.tsx +++ b/docs/data/material/components/autocomplete/demos/sizes/Sizes.tsx @@ -6,6 +6,7 @@ import TextField from '@mui/material/TextField'; export default function Sizes() { return ( + {/* @focus-start */} )} /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/autocomplete/demos/sizes/client.ts b/docs/data/material/components/autocomplete/demos/sizes/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/sizes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/sizes/index.ts b/docs/data/material/components/autocomplete/demos/sizes/index.ts new file mode 100644 index 00000000000000..6a444dbc99d037 --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/sizes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Sizes from './Sizes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Sizes, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/Tags.tsx b/docs/data/material/components/autocomplete/demos/tags/Tags.tsx similarity index 99% rename from docs/data/material/components/autocomplete/Tags.tsx rename to docs/data/material/components/autocomplete/demos/tags/Tags.tsx index 99d9d70bf74008..48a11300125018 100644 --- a/docs/data/material/components/autocomplete/Tags.tsx +++ b/docs/data/material/components/autocomplete/demos/tags/Tags.tsx @@ -6,6 +6,7 @@ import Stack from '@mui/material/Stack'; export default function Tags() { return ( + {/* @focus-start */} )} /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/autocomplete/demos/tags/client.ts b/docs/data/material/components/autocomplete/demos/tags/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/tags/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/tags/index.ts b/docs/data/material/components/autocomplete/demos/tags/index.ts new file mode 100644 index 00000000000000..3c21d7c249ea79 --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/tags/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Tags from './Tags'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Tags, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/UseAutocomplete.tsx b/docs/data/material/components/autocomplete/demos/use/UseAutocomplete.tsx similarity index 99% rename from docs/data/material/components/autocomplete/UseAutocomplete.tsx rename to docs/data/material/components/autocomplete/demos/use/UseAutocomplete.tsx index 97f404f936568e..bd9053a4152fad 100644 --- a/docs/data/material/components/autocomplete/UseAutocomplete.tsx +++ b/docs/data/material/components/autocomplete/demos/use/UseAutocomplete.tsx @@ -56,6 +56,7 @@ export default function UseAutocomplete() { return (
    + {/* @focus-start */}
    @@ -72,6 +73,7 @@ export default function UseAutocomplete() { })} ) : null} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/autocomplete/demos/use/client.ts b/docs/data/material/components/autocomplete/demos/use/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/use/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/use/index.ts b/docs/data/material/components/autocomplete/demos/use/index.ts new file mode 100644 index 00000000000000..8bd551281c7c25 --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/use/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UseAutocomplete from './UseAutocomplete'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UseAutocomplete, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/demos/virtualize/Virtualize.tsx similarity index 97% rename from docs/data/material/components/autocomplete/Virtualize.tsx rename to docs/data/material/components/autocomplete/demos/virtualize/Virtualize.tsx index 50418c99264b61..7a8f694f40a50d 100644 --- a/docs/data/material/components/autocomplete/Virtualize.tsx +++ b/docs/data/material/components/autocomplete/demos/virtualize/Virtualize.tsx @@ -5,12 +5,8 @@ import useMediaQuery from '@mui/material/useMediaQuery'; import ListSubheader from '@mui/material/ListSubheader'; import Popper from '@mui/material/Popper'; import { useTheme, styled } from '@mui/material/styles'; -import { - List, - RowComponentProps, - useListRef, - ListImperativeAPI, -} from 'react-window'; +import { List, useListRef } from 'react-window'; +import type { RowComponentProps, ListImperativeAPI } from 'react-window'; import Typography from '@mui/material/Typography'; const LISTBOX_PADDING = 8; // px @@ -159,6 +155,7 @@ const OPTIONS = Array.from(new Array(10000)) export default function Virtualize() { // Use react-window v2's useListRef hook for imperative API access + // @focus-start @padding 1 const internalListRef = useListRef(null); const optionIndexMapRef = React.useRef>(new Map()); @@ -206,4 +203,5 @@ export default function Virtualize() { }} /> ); + // @focus-end } diff --git a/docs/data/material/components/autocomplete/demos/virtualize/client.ts b/docs/data/material/components/autocomplete/demos/virtualize/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/virtualize/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/autocomplete/demos/virtualize/index.ts b/docs/data/material/components/autocomplete/demos/virtualize/index.ts new file mode 100644 index 00000000000000..db44ddc190e78b --- /dev/null +++ b/docs/data/material/components/autocomplete/demos/virtualize/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Virtualize from './Virtualize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Virtualize, { ClientProvider }); diff --git a/docs/data/material/components/autocomplete/movies.js b/docs/data/material/components/autocomplete/movies.js deleted file mode 100644 index e10f258df04100..00000000000000 --- a/docs/data/material/components/autocomplete/movies.js +++ /dev/null @@ -1,15317 +0,0 @@ -// Roughly the top 1000 movies from TMDB -// GET https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=title.asc&vote_average.gte=7.5&vote_count.gte=150&with_original_language=en -const movies = [ - { - id: 19913, - title: '(500) Days of Summer', - releaseDate: '2009-07-17', - }, - { - id: 17443, - title: '...And Justice for All', - releaseDate: '1979-10-19', - }, - { - id: 567811, - title: '10 Lives', - releaseDate: '2024-04-18', - }, - { - id: 26234, - title: '10 Rillington Place', - releaseDate: '1971-02-10', - }, - { - id: 4951, - title: '10 Things I Hate About You', - releaseDate: '1999-03-30', - }, - { - id: 12219, - title: '12 Angry Men', - releaseDate: '1997-08-17', - }, - { - id: 389, - title: '12 Angry Men', - releaseDate: '1957-04-10', - }, - { - id: 625169, - title: '12 Mighty Orphans', - releaseDate: '2021-06-18', - }, - { - id: 76203, - title: '12 Years a Slave', - releaseDate: '2013-10-18', - }, - { - id: 44115, - title: '127 Hours', - releaseDate: '2010-11-12', - }, - { - id: 300671, - title: '13 Hours: The Secret Soldiers of Benghazi', - releaseDate: '2016-01-14', - }, - { - id: 407806, - title: '13th', - releaseDate: '2016-10-07', - }, - { - id: 890825, - title: '14 Peaks: Nothing Is Impossible', - releaseDate: '2021-11-12', - }, - { - id: 530915, - title: '1917', - releaseDate: '2019-12-25', - }, - { - id: 710356, - title: '2 Hearts', - releaseDate: '2020-10-16', - }, - { - id: 1058616, - title: '20 Days in Mariupol', - releaseDate: '2023-07-14', - }, - { - id: 159014, - title: '20 Feet from Stardom', - releaseDate: '2013-06-14', - }, - { - id: 246400, - title: '20,000 Days on Earth', - releaseDate: '2014-07-05', - }, - { - id: 173, - title: '20,000 Leagues Under the Sea', - releaseDate: '1954-12-23', - }, - { - id: 62, - title: '2001: A Space Odyssey', - releaseDate: '1968-04-02', - }, - { - id: 342737, - title: '20th Century Women', - releaseDate: '2016-12-28', - }, - { - id: 470, - title: '21 Grams', - releaseDate: '2003-09-06', - }, - { - id: 474354, - title: '22 July', - releaseDate: '2018-10-04', - }, - { - id: 1429, - title: '25th Hour', - releaseDate: '2002-12-19', - }, - { - id: 170, - title: '28 Days Later', - releaseDate: '2002-10-31', - }, - { - id: 1272837, - title: '28 Years Later: The Bone Temple', - releaseDate: '2026-01-14', - }, - { - id: 41662, - title: '3 Women', - releaseDate: '1977-04-29', - }, - { - id: 1271, - title: '300', - releaseDate: '2007-03-07', - }, - { - id: 14168, - title: '3:10 to Yuma', - releaseDate: '1957-08-07', - }, - { - id: 5176, - title: '3:10 to Yuma', - releaseDate: '2007-09-06', - }, - { - id: 109410, - title: '42', - releaseDate: '2013-04-12', - }, - { - id: 259954, - title: '5 to 7', - releaseDate: '2014-04-19', - }, - { - id: 40807, - title: '50/50', - releaseDate: '2011-09-30', - }, - { - id: 65, - title: '8 Mile', - releaseDate: '2002-11-08', - }, - { - id: 15677, - title: '84 Charing Cross Road', - releaseDate: '1987-02-13', - }, - { - id: 98622, - title: '9', - releaseDate: '2005-04-21', - }, - { - id: 453, - title: 'A Beautiful Mind', - releaseDate: '2001-12-14', - }, - { - id: 55720, - title: 'A Better Life', - releaseDate: '2011-06-24', - }, - { - id: 615666, - title: 'A Boy Called Christmas', - releaseDate: '2021-11-24', - }, - { - id: 5902, - title: 'A Bridge Too Far', - releaseDate: '1977-06-15', - }, - { - id: 1607, - title: 'A Bronx Tale', - releaseDate: '1993-10-01', - }, - { - id: 13187, - title: 'A Charlie Brown Christmas', - releaseDate: '1965-12-09', - }, - { - id: 13479, - title: 'A Charlie Brown Thanksgiving', - releaseDate: '1973-11-20', - }, - { - id: 13189, - title: 'A Christmas Carol', - releaseDate: '1984-10-09', - }, - { - id: 850, - title: 'A Christmas Story', - releaseDate: '1983-11-18', - }, - { - id: 407655, - title: 'A Cinderella Story: If the Shoe Fits', - releaseDate: '2016-08-02', - }, - { - id: 185, - title: 'A Clockwork Orange', - releaseDate: '1971-10-28', - }, - { - id: 532, - title: 'A Close Shave', - releaseDate: '1996-03-07', - }, - { - id: 661539, - title: 'A Complete Unknown', - releaseDate: '2024-12-25', - }, - { - id: 11939, - title: 'A Day at the Races', - releaseDate: '1937-06-11', - }, - { - id: 427045, - title: 'A December Bride', - releaseDate: '2016-11-20', - }, - { - id: 24660, - title: 'A Detective Story', - releaseDate: '2003-04-04', - }, - { - id: 522518, - title: "A Dog's Journey", - releaseDate: '2019-05-03', - }, - { - id: 36208, - title: "A Dog's Life", - releaseDate: '1918-04-14', - }, - { - id: 381289, - title: "A Dog's Purpose", - releaseDate: '2017-01-19', - }, - { - id: 508763, - title: "A Dog's Way Home", - releaseDate: '2019-01-10', - }, - { - id: 21849, - title: 'A Face in the Crowd', - releaseDate: '1957-05-29', - }, - { - id: 881, - title: 'A Few Good Men', - releaseDate: '1992-12-11', - }, - { - id: 623, - title: 'A Fish Called Wanda', - releaseDate: '1988-07-15', - }, - { - id: 61650, - title: 'A Foreign Affair', - releaseDate: '1948-08-20', - }, - { - id: 428449, - title: 'A Ghost Story', - releaseDate: '2017-04-24', - }, - { - id: 325113, - title: 'A Girl Like Her', - releaseDate: '2015-03-27', - }, - { - id: 800787, - title: 'A Good Person', - releaseDate: '2023-03-23', - }, - { - id: 15789, - title: 'A Goofy Movie', - releaseDate: '1995-04-05', - }, - { - id: 530, - title: 'A Grand Day Out', - releaseDate: '1990-05-18', - }, - { - id: 704, - title: "A Hard Day's Night", - releaseDate: '1964-07-07', - }, - { - id: 403300, - title: 'A Hidden Life', - releaseDate: '2019-08-27', - }, - { - id: 59, - title: 'A History of Violence', - releaseDate: '2005-09-23', - }, - { - id: 11287, - title: 'A League of Their Own', - releaseDate: '1992-07-01', - }, - { - id: 45578, - title: 'A Letter to Three Wives', - releaseDate: '1948-12-01', - }, - { - id: 19101, - title: 'A Little Princess', - releaseDate: '1995-05-10', - }, - { - id: 674610, - title: 'A Loud House Christmas', - releaseDate: '2021-11-26', - }, - { - id: 937278, - title: 'A Man Called Otto', - releaseDate: '2022-12-28', - }, - { - id: 874, - title: 'A Man for All Seasons', - releaseDate: '1966-12-13', - }, - { - id: 28162, - title: 'A Matter of Life and Death', - releaseDate: '1946-12-15', - }, - { - id: 14447, - title: 'A Matter of Loaf and Death', - releaseDate: '2008-12-26', - }, - { - id: 1002185, - title: 'A Million Miles Away', - releaseDate: '2023-09-08', - }, - { - id: 258230, - title: 'A Monster Calls', - releaseDate: '2016-10-07', - }, - { - id: 36850, - title: 'A New Leaf', - releaseDate: '1971-03-11', - }, - { - id: 37719, - title: 'A Night at the Opera', - releaseDate: '1935-11-15', - }, - { - id: 10971, - title: 'A Night to Remember', - releaseDate: '1958-07-03', - }, - { - id: 377, - title: 'A Nightmare on Elm Street', - releaseDate: '1984-11-09', - }, - { - id: 9559, - title: 'A Perfect World', - releaseDate: '1993-11-24', - }, - { - id: 25673, - title: 'A Place in the Sun', - releaseDate: '1951-06-12', - }, - { - id: 79113, - title: 'A Princess for Christmas', - releaseDate: '2011-12-03', - }, - { - id: 447332, - title: 'A Quiet Place', - releaseDate: '2018-04-03', - }, - { - id: 520763, - title: 'A Quiet Place Part II', - releaseDate: '2021-05-21', - }, - { - id: 293, - title: 'A River Runs Through It', - releaseDate: '1992-10-09', - }, - { - id: 435107, - title: 'A Royal Winter', - releaseDate: '2017-01-14', - }, - { - id: 1594, - title: 'A Shot in the Dark', - releaseDate: '1964-06-23', - }, - { - id: 10223, - title: 'A Simple Plan', - releaseDate: '1998-12-11', - }, - { - id: 34653, - title: 'A Single Man', - releaseDate: '2009-12-11', - }, - { - id: 332562, - title: 'A Star Is Born', - releaseDate: '2018-10-03', - }, - { - id: 22692, - title: 'A Star Is Born', - releaseDate: '1937-04-20', - }, - { - id: 3111, - title: 'A Star Is Born', - releaseDate: '1954-10-01', - }, - { - id: 404378, - title: 'A Street Cat Named Bob', - releaseDate: '2016-11-04', - }, - { - id: 702, - title: 'A Streetcar Named Desire', - releaseDate: '1951-09-18', - }, - { - id: 1645, - title: 'A Time to Kill', - releaseDate: '1996-07-24', - }, - { - id: 9560, - title: 'A Walk in the Clouds', - releaseDate: '1995-05-27', - }, - { - id: 10229, - title: 'A Walk to Remember', - releaseDate: '2002-01-25', - }, - { - id: 29845, - title: 'A Woman Under the Influence', - releaseDate: '1974-11-18', - }, - { - id: 644, - title: 'A.I. Artificial Intelligence', - releaseDate: '2001-06-29', - }, - { - id: 431580, - title: 'Abominable', - releaseDate: '2019-09-19', - }, - { - id: 828613, - title: 'About Fate', - releaseDate: '2022-09-08', - }, - { - id: 122906, - title: 'About Time', - releaseDate: '2013-09-04', - }, - { - id: 297610, - title: 'Abraham Lincoln Vampire Hunter: The Great Calamity', - releaseDate: '2012-10-23', - }, - { - id: 25364, - title: 'Ace in the Hole', - releaseDate: '1951-06-29', - }, - { - id: 4688, - title: 'Across the Universe', - releaseDate: '2007-09-14', - }, - { - id: 25431, - title: "Adam's Rib", - releaseDate: '1949-11-18', - }, - { - id: 2757, - title: 'Adaptation.', - releaseDate: '2002-12-06', - }, - { - id: 360606, - title: 'Adventures in Babysitting', - releaseDate: '2016-06-24', - }, - { - id: 57586, - title: 'African Cats', - releaseDate: '2011-04-21', - }, - { - id: 537915, - title: 'After', - releaseDate: '2019-04-11', - }, - { - id: 10843, - title: 'After Hours', - releaseDate: '1985-09-13', - }, - { - id: 14588, - title: 'After the Thin Man', - releaseDate: '1936-12-25', - }, - { - id: 613504, - title: 'After We Collided', - releaseDate: '2020-09-02', - }, - { - id: 744275, - title: 'After We Fell', - releaseDate: '2021-09-01', - }, - { - id: 965150, - title: 'Aftersun', - releaseDate: '2022-10-21', - }, - { - id: 588921, - title: 'Ainbo: Spirit of the Amazon', - releaseDate: '2021-02-09', - }, - { - id: 964980, - title: 'Air', - releaseDate: '2023-04-05', - }, - { - id: 813, - title: 'Airplane!', - releaseDate: '1980-06-27', - }, - { - id: 13751, - title: 'Akeelah and the Bee', - releaseDate: '2006-04-28', - }, - { - id: 361018, - title: 'Akron', - releaseDate: '2015-10-06', - }, - { - id: 420817, - title: 'Aladdin', - releaseDate: '2019-05-22', - }, - { - id: 812, - title: 'Aladdin', - releaseDate: '1992-11-25', - }, - { - id: 396292, - title: 'Ali Wong: Baby Cobra', - releaseDate: '2016-05-06', - }, - { - id: 12092, - title: 'Alice in Wonderland', - releaseDate: '1951-07-28', - }, - { - id: 348, - title: 'Alien', - releaseDate: '1979-05-25', - }, - { - id: 20182, - title: 'Alien Abduction: Incident in Lake County', - releaseDate: '1998-01-20', - }, - { - id: 945961, - title: 'Alien: Romulus', - releaseDate: '2024-08-13', - }, - { - id: 679, - title: 'Aliens', - releaseDate: '1986-07-18', - }, - { - id: 399579, - title: 'Alita: Battle Angel', - releaseDate: '2019-01-31', - }, - { - id: 705, - title: 'All About Eve', - releaseDate: '1950-11-09', - }, - { - id: 632322, - title: 'All My Life', - releaseDate: '2020-10-23', - }, - { - id: 994108, - title: 'All of Us Strangers', - releaseDate: '2023-12-22', - }, - { - id: 12454, - title: 'All or Nothing', - releaseDate: '2002-10-18', - }, - { - id: 143, - title: 'All Quiet on the Western Front', - releaseDate: '1930-04-29', - }, - { - id: 43316, - title: 'All That Heaven Allows', - releaseDate: '1955-08-25', - }, - { - id: 16858, - title: 'All That Jazz', - releaseDate: '1979-12-16', - }, - { - id: 1004663, - title: 'All the Beauty and the Bloodshed', - releaseDate: '2022-11-23', - }, - { - id: 342470, - title: 'All the Bright Places', - releaseDate: '2020-02-28', - }, - { - id: 891, - title: "All the President's Men", - releaseDate: '1976-04-09', - }, - { - id: 897429, - title: 'All Too Well: The Short Film', - releaseDate: '2021-11-12', - }, - { - id: 786, - title: 'Almost Famous', - releaseDate: '2000-09-15', - }, - { - id: 24615, - title: 'Aloha Scooby-Doo!', - releaseDate: '2005-02-08', - }, - { - id: 455008, - title: 'AlphaGo', - releaseDate: '2017-09-29', - }, - { - id: 279, - title: 'Amadeus', - releaseDate: '1984-09-19', - }, - { - id: 1248753, - title: 'Amber Alert', - releaseDate: '2024-09-27', - }, - { - id: 14, - title: 'American Beauty', - releaseDate: '1999-09-15', - }, - { - id: 565716, - title: 'American Factory', - releaseDate: '2019-08-21', - }, - { - id: 1056360, - title: 'American Fiction', - releaseDate: '2023-11-10', - }, - { - id: 4982, - title: 'American Gangster', - releaseDate: '2007-11-02', - }, - { - id: 838, - title: 'American Graffiti', - releaseDate: '1973-08-11', - }, - { - id: 73, - title: 'American History X', - releaseDate: '1998-07-01', - }, - { - id: 13199, - title: 'American Me', - releaseDate: '1992-03-13', - }, - { - id: 14242, - title: 'American Movie', - releaseDate: '1999-11-05', - }, - { - id: 743601, - title: 'American Murder: The Family Next Door', - releaseDate: '2020-09-29', - }, - { - id: 1359, - title: 'American Psycho', - releaseDate: '2000-01-21', - }, - { - id: 451751, - title: 'American Satan', - releaseDate: '2017-10-13', - }, - { - id: 190859, - title: 'American Sniper', - releaseDate: '2014-12-25', - }, - { - id: 2771, - title: 'American Splendor', - releaseDate: '2003-08-15', - }, - { - id: 673309, - title: 'American Underdog', - releaseDate: '2021-12-25', - }, - { - id: 11831, - title: 'Amistad', - releaseDate: '1997-12-10', - }, - { - id: 331781, - title: 'Amy', - releaseDate: '2015-07-02', - }, - { - id: 210024, - title: 'An Adventure in Space and Time', - releaseDate: '2013-11-21', - }, - { - id: 8356, - title: 'An Affair to Remember', - releaseDate: '1957-07-11', - }, - { - id: 13008, - title: 'An American Crime', - releaseDate: '2007-07-27', - }, - { - id: 2769, - title: 'An American in Paris', - releaseDate: '1951-09-26', - }, - { - id: 814, - title: 'An American Werewolf in London', - releaseDate: '1981-08-21', - }, - { - id: 810223, - title: 'An Autumn Romance', - releaseDate: '2021-05-07', - }, - { - id: 262481, - title: 'An Honest Liar', - releaseDate: '2014-04-18', - }, - { - id: 359305, - title: 'An Inspector Calls', - releaseDate: '2015-09-13', - }, - { - id: 534338, - title: 'An Interview with God', - releaseDate: '2018-08-20', - }, - { - id: 2623, - title: 'An Officer and a Gentleman', - releaseDate: '1982-07-28', - }, - { - id: 9444, - title: 'Anastasia', - releaseDate: '1997-11-20', - }, - { - id: 93, - title: 'Anatomy of a Murder', - releaseDate: '1959-07-01', - }, - { - id: 9267, - title: 'And Now for Something Completely Different', - releaseDate: '1971-09-28', - }, - { - id: 4886, - title: 'And Then There Were None', - releaseDate: '1945-10-31', - }, - { - id: 446663, - title: 'Andre the Giant', - releaseDate: '2018-04-10', - }, - { - id: 1938, - title: 'Angel Face', - releaseDate: '1953-01-02', - }, - { - id: 635, - title: 'Angel Heart', - releaseDate: '1987-03-06', - }, - { - id: 10397, - title: "Angela's Ashes", - releaseDate: '1999-12-25', - }, - { - id: 13696, - title: 'Angels with Dirty Faces', - releaseDate: '1938-11-26', - }, - { - id: 610120, - title: 'Anima', - releaseDate: '2019-06-26', - }, - { - id: 11848, - title: 'Animal Farm', - releaseDate: '1954-12-28', - }, - { - id: 17663, - title: 'Anne of Green Gables', - releaseDate: '1985-12-01', - }, - { - id: 703, - title: 'Annie Hall', - releaseDate: '1977-04-19', - }, - { - id: 291270, - title: 'Anomalisa', - releaseDate: '2015-12-30', - }, - { - id: 1064213, - title: 'Anora', - releaseDate: '2024-10-14', - }, - { - id: 15157, - title: 'Another Cinderella Story', - releaseDate: '2008-09-16', - }, - { - id: 44009, - title: 'Another Year', - releaseDate: '2010-11-05', - }, - { - id: 102899, - title: 'Ant-Man', - releaseDate: '2015-07-14', - }, - { - id: 351339, - title: 'Anthropoid', - releaseDate: '2016-08-12', - }, - { - id: 18094, - title: 'Anvil! The Story of Anvil', - releaseDate: '2008-01-14', - }, - { - id: 28, - title: 'Apocalypse Now', - releaseDate: '1979-05-19', - }, - { - id: 1579, - title: 'Apocalypto', - releaseDate: '2006-12-07', - }, - { - id: 664996, - title: 'Apollo 10½: A Space Age Childhood', - releaseDate: '2022-03-24', - }, - { - id: 549559, - title: 'Apollo 11', - releaseDate: '2019-03-01', - }, - { - id: 568, - title: 'Apollo 13', - releaseDate: '1995-06-30', - }, - { - id: 555285, - title: "Are You There God? It's Me, Margaret.", - releaseDate: '2023-03-29', - }, - { - id: 68734, - title: 'Argo', - releaseDate: '2012-10-11', - }, - { - id: 774372, - title: 'ariana grande: excuse me, i love you', - releaseDate: '2020-12-21', - }, - { - id: 11044, - title: 'Arizona Dream', - releaseDate: '1993-01-06', - }, - { - id: 1073, - title: 'Arlington Road', - releaseDate: '1999-03-19', - }, - { - id: 766, - title: 'Army of Darkness', - releaseDate: '1992-10-31', - }, - { - id: 329865, - title: 'Arrival', - releaseDate: '2016-11-10', - }, - { - id: 212, - title: 'Arsenic and Old Lace', - releaseDate: '1944-09-01', - }, - { - id: 618588, - title: 'Arthur the King', - releaseDate: '2024-02-22', - }, - { - id: 1140817, - title: 'As', - releaseDate: '2023-01-01', - }, - { - id: 2898, - title: 'As Good as It Gets', - releaseDate: '1997-12-19', - }, - { - id: 17814, - title: 'Assault on Precinct 13', - releaseDate: '1976-10-08', - }, - { - id: 684700, - title: 'Athlete A', - releaseDate: '2020-06-23', - }, - { - id: 10865, - title: 'Atlantis: The Lost Empire', - releaseDate: '2001-06-02', - }, - { - id: 4347, - title: 'Atonement', - releaseDate: '2007-02-27', - }, - { - id: 376228, - title: 'Audrie & Daisy', - releaseDate: '2016-09-23', - }, - { - id: 5123, - title: 'August Rush', - releaseDate: '2007-11-21', - }, - { - id: 546728, - title: 'Auntie Edna', - releaseDate: '2018-10-23', - }, - { - id: 19995, - title: 'Avatar', - releaseDate: '2009-12-16', - }, - { - id: 83533, - title: 'Avatar: Fire and Ash', - releaseDate: '2025-12-17', - }, - { - id: 76600, - title: 'Avatar: The Way of Water', - releaseDate: '2022-12-14', - }, - { - id: 99861, - title: 'Avengers: Age of Ultron', - releaseDate: '2015-04-22', - }, - { - id: 299534, - title: 'Avengers: Endgame', - releaseDate: '2019-04-24', - }, - { - id: 299536, - title: 'Avengers: Infinity War', - releaseDate: '2018-04-25', - }, - { - id: 479626, - title: 'Avicii: True Stories', - releaseDate: '2017-10-26', - }, - { - id: 11005, - title: 'Awakenings', - releaseDate: '1990-12-04', - }, - { - id: 1919, - title: 'Away from Her', - releaseDate: '2007-05-04', - }, - { - id: 1164, - title: 'Babel', - releaseDate: '2006-10-26', - }, - { - id: 16161, - title: 'Baby Boy', - releaseDate: '2001-06-27', - }, - { - id: 339403, - title: 'Baby Driver', - releaseDate: '2017-06-28', - }, - { - id: 615777, - title: 'Babylon', - releaseDate: '2022-12-22', - }, - { - id: 10940, - title: 'Babylon 5: In the Beginning', - releaseDate: '1998-01-04', - }, - { - id: 105, - title: 'Back to the Future', - releaseDate: '1985-07-03', - }, - { - id: 165, - title: 'Back to the Future Part II', - releaseDate: '1989-11-22', - }, - { - id: 196, - title: 'Back to the Future Part III', - releaseDate: '1990-05-25', - }, - { - id: 770254, - title: 'Back to the Outback', - releaseDate: '2021-12-03', - }, - { - id: 38700, - title: 'Bad Boys for Life', - releaseDate: '2020-01-15', - }, - { - id: 573435, - title: 'Bad Boys: Ride or Die', - releaseDate: '2024-06-05', - }, - { - id: 14554, - title: 'Bad Day at Black Rock', - releaseDate: '1955-01-13', - }, - { - id: 12143, - title: 'Bad Lieutenant', - releaseDate: '1992-11-20', - }, - { - id: 3133, - title: 'Badlands', - releaseDate: '1974-01-05', - }, - { - id: 29884, - title: 'Ball of Fire', - releaseDate: '1941-12-02', - }, - { - id: 541671, - title: 'Ballerina', - releaseDate: '2025-06-04', - }, - { - id: 342473, - title: 'Ballerina', - releaseDate: '2016-12-14', - }, - { - id: 21032, - title: 'Balto', - releaseDate: '1995-12-22', - }, - { - id: 3170, - title: 'Bambi', - releaseDate: '1942-08-14', - }, - { - id: 54551, - title: 'Banana', - releaseDate: '2010-12-13', - }, - { - id: 16876, - title: "Bang Bang You're Dead", - releaseDate: '2003-06-11', - }, - { - id: 514754, - title: 'Bao', - releaseDate: '2018-06-15', - }, - { - id: 14002, - title: 'Baraka', - releaseDate: '1992-09-15', - }, - { - id: 361380, - title: 'Barbie & Her Sisters in the Great Puppy Adventure', - releaseDate: '2015-10-07', - }, - { - id: 13004, - title: 'Barbie and the Diamond Castle', - releaseDate: '2008-09-03', - }, - { - id: 15906, - title: 'Barbie and the Magic of Pegasus', - releaseDate: '2005-10-04', - }, - { - id: 285733, - title: 'Barbie and the Secret Door', - releaseDate: '2014-08-30', - }, - { - id: 23566, - title: 'Barbie and the Three Musketeers', - releaseDate: '2009-09-15', - }, - { - id: 15015, - title: 'Barbie as Rapunzel', - releaseDate: '2002-10-01', - }, - { - id: 13283, - title: 'Barbie as the Island Princess', - releaseDate: '2007-09-17', - }, - { - id: 15165, - title: 'Barbie as The Princess & the Pauper', - releaseDate: '2004-09-28', - }, - { - id: 13459, - title: "Barbie in 'A Christmas Carol'", - releaseDate: '2008-11-03', - }, - { - id: 34134, - title: 'Barbie in A Mermaid Tale', - releaseDate: '2010-01-25', - }, - { - id: 91342, - title: 'Barbie in A Mermaid Tale 2', - releaseDate: '2012-02-22', - }, - { - id: 13002, - title: 'Barbie in the 12 Dancing Princesses', - releaseDate: '2006-09-19', - }, - { - id: 15016, - title: 'Barbie of Swan Lake', - releaseDate: '2003-09-27', - }, - { - id: 44874, - title: 'Barbie: A Fashion Fairytale', - releaseDate: '2010-09-14', - }, - { - id: 73456, - title: 'Barbie: Princess Charm School', - releaseDate: '2011-08-11', - }, - { - id: 129533, - title: 'Barbie: The Princess & the Popstar', - releaseDate: '2012-09-13', - }, - { - id: 17887, - title: 'Barefoot in the Park', - releaseDate: '1967-05-25', - }, - { - id: 3175, - title: 'Barry Lyndon', - releaseDate: '1975-12-18', - }, - { - id: 290, - title: 'Barton Fink', - releaseDate: '1991-08-01', - }, - { - id: 268, - title: 'Batman', - releaseDate: '1989-06-21', - }, - { - id: 886396, - title: 'Batman and Superman: Battle of the Super Sons', - releaseDate: '2022-10-17', - }, - { - id: 272, - title: 'Batman Begins', - releaseDate: '2005-06-10', - }, - { - id: 16234, - title: 'Batman Beyond: Return of the Joker', - releaseDate: '2000-12-12', - }, - { - id: 64202, - title: 'Batman Beyond: The Movie', - releaseDate: '1999-01-10', - }, - { - id: 581997, - title: 'Batman vs Teenage Mutant Ninja Turtles', - releaseDate: '2019-03-31', - }, - { - id: 321528, - title: 'Batman vs. Robin', - releaseDate: '2015-04-03', - }, - { - id: 242643, - title: 'Batman: Assault on Arkham', - releaseDate: '2014-08-12', - }, - { - id: 366924, - title: 'Batman: Bad Blood', - releaseDate: '2016-01-19', - }, - { - id: 537056, - title: 'Batman: Hush', - releaseDate: '2019-07-19', - }, - { - id: 14919, - title: 'Batman: Mask of the Phantasm', - releaseDate: '1993-12-25', - }, - { - id: 123025, - title: 'Batman: The Dark Knight Returns, Part 1', - releaseDate: '2012-09-25', - }, - { - id: 142061, - title: 'Batman: The Dark Knight Returns, Part 2', - releaseDate: '2013-01-03', - }, - { - id: 736073, - title: 'Batman: The Long Halloween, Part One', - releaseDate: '2021-06-21', - }, - { - id: 736074, - title: 'Batman: The Long Halloween, Part Two', - releaseDate: '2021-07-26', - }, - { - id: 40662, - title: 'Batman: Under the Red Hood', - releaseDate: '2010-07-27', - }, - { - id: 69735, - title: 'Batman: Year One', - releaseDate: '2011-09-27', - }, - { - id: 69315, - title: 'Battlestar Galactica: Razor', - releaseDate: '2007-11-12', - }, - { - id: 214314, - title: 'Bears', - releaseDate: '2014-04-17', - }, - { - id: 664416, - title: 'Beastie Boys Story', - releaseDate: '2020-04-24', - }, - { - id: 283587, - title: 'Beasts of No Nation', - releaseDate: '2015-09-11', - }, - { - id: 451915, - title: 'Beautiful Boy', - releaseDate: '2018-10-12', - }, - { - id: 10938, - title: 'Beautiful Thing', - releaseDate: '1996-06-21', - }, - { - id: 10020, - title: 'Beauty and the Beast', - releaseDate: '1991-10-22', - }, - { - id: 15421, - title: 'Becket', - releaseDate: '1964-03-11', - }, - { - id: 699280, - title: 'Becoming', - releaseDate: '2020-05-06', - }, - { - id: 2977, - title: 'Becoming Jane', - releaseDate: '2007-03-02', - }, - { - id: 12335, - title: 'Bedknobs and Broomsticks', - releaseDate: '1971-10-07', - }, - { - id: 4011, - title: 'Beetlejuice', - releaseDate: '1988-03-30', - }, - { - id: 132344, - title: 'Before Midnight', - releaseDate: '2013-04-05', - }, - { - id: 76, - title: 'Before Sunrise', - releaseDate: '1995-01-27', - }, - { - id: 80, - title: 'Before Sunset', - releaseDate: '2004-06-16', - }, - { - id: 7972, - title: "Before the Devil Knows You're Dead", - releaseDate: '2007-09-26', - }, - { - id: 410718, - title: 'Before the Flood', - releaseDate: '2016-10-21', - }, - { - id: 198277, - title: 'Begin Again', - releaseDate: '2014-06-27', - }, - { - id: 492, - title: 'Being John Malkovich', - releaseDate: '1999-10-29', - }, - { - id: 10322, - title: 'Being There', - releaseDate: '1979-12-19', - }, - { - id: 777270, - title: 'Belfast', - releaseDate: '2021-11-12', - }, - { - id: 550776, - title: 'Believe Me: The Abduction of Lisa McVey', - releaseDate: '2018-09-30', - }, - { - id: 205601, - title: 'Belle', - releaseDate: '2013-05-01', - }, - { - id: 15403, - title: 'Ben 10: Secret of the Omnitrix', - releaseDate: '2007-08-10', - }, - { - id: 665, - title: 'Ben-Hur', - releaseDate: '1959-11-18', - }, - { - id: 4104, - title: 'Benny & Joon', - releaseDate: '1993-04-16', - }, - { - id: 40819, - title: 'Best Worst Movie', - releaseDate: '2009-03-14', - }, - { - id: 799766, - title: 'Better Man', - releaseDate: '2024-12-06', - }, - { - id: 90, - title: 'Beverly Hills Cop', - releaseDate: '1984-12-05', - }, - { - id: 979163, - title: 'Beyond Infinity: Buzz and the Journey to Lightyear', - releaseDate: '2022-06-10', - }, - { - id: 2277, - title: 'Bicentennial Man', - releaseDate: '1999-12-17', - }, - { - id: 2280, - title: 'Big', - releaseDate: '1988-06-03', - }, - { - id: 587, - title: 'Big Fish', - releaseDate: '2003-12-04', - }, - { - id: 878361, - title: 'Big George Foreman', - releaseDate: '2023-04-27', - }, - { - id: 177572, - title: 'Big Hero 6', - releaseDate: '2014-10-24', - }, - { - id: 539617, - title: 'Big Time Adolescence', - releaseDate: '2020-03-13', - }, - { - id: 95754, - title: 'Big Time Movie', - releaseDate: '2012-03-10', - }, - { - id: 119321, - title: 'Big Top Scooby-Doo!', - releaseDate: '2012-10-09', - }, - { - id: 6978, - title: 'Big Trouble in Little China', - releaseDate: '1986-05-30', - }, - { - id: 702525, - title: 'Bigfoot Family', - releaseDate: '2020-07-23', - }, - { - id: 26036, - title: 'Bigger Than Life', - releaseDate: '1956-11-20', - }, - { - id: 528644, - title: 'Bilby', - releaseDate: '2018-06-06', - }, - { - id: 308571, - title: "Bill Burr: I'm Sorry You Feel That Way", - releaseDate: '2014-12-05', - }, - { - id: 625128, - title: 'Bill Burr: Paper Tiger', - releaseDate: '2019-09-10', - }, - { - id: 191489, - title: 'Bill Burr: You People Are All The Same', - releaseDate: '2012-08-16', - }, - { - id: 654754, - title: "Billie Eilish: The World's a Little Blurry", - releaseDate: '2021-02-26', - }, - { - id: 17305, - title: "Billy & Mandy's Big Boogey Adventure", - releaseDate: '2007-02-14', - }, - { - id: 71, - title: 'Billy Elliot', - releaseDate: '2000-09-28', - }, - { - id: 1128752, - title: 'Bird', - releaseDate: '2024-11-08', - }, - { - id: 898, - title: 'Birdman of Alcatraz', - releaseDate: '1962-07-04', - }, - { - id: 194662, - title: 'Birdman or (The Unexpected Virtue of Ignorance)', - releaseDate: '2014-10-17', - }, - { - id: 11296, - title: 'Birdy', - releaseDate: '1984-12-14', - }, - { - id: 10497, - title: 'Bitter Moon', - releaseDate: '1992-09-02', - }, - { - id: 1040330, - title: 'Black Adam: Saviour or Destroyer?', - releaseDate: '2022-10-15', - }, - { - id: 526702, - title: 'Black Beauty', - releaseDate: '2020-11-27', - }, - { - id: 24804, - title: 'Black Dynamite', - releaseDate: '2009-10-16', - }, - { - id: 855, - title: 'Black Hawk Down', - releaseDate: '2001-12-28', - }, - { - id: 16391, - title: 'Black Narcissus', - releaseDate: '1947-05-26', - }, - { - id: 284054, - title: 'Black Panther', - releaseDate: '2018-02-13', - }, - { - id: 505642, - title: 'Black Panther: Wakanda Forever', - releaseDate: '2022-11-09', - }, - { - id: 44214, - title: 'Black Swan', - releaseDate: '2010-12-03', - }, - { - id: 497698, - title: 'Black Widow', - releaseDate: '2021-07-07', - }, - { - id: 1016084, - title: 'BlackBerry', - releaseDate: '2023-02-13', - }, - { - id: 158999, - title: 'Blackfish', - releaseDate: '2013-06-07', - }, - { - id: 487558, - title: 'BlacKkKlansman', - releaseDate: '2018-08-09', - }, - { - id: 78, - title: 'Blade Runner', - releaseDate: '1982-06-25', - }, - { - id: 335984, - title: 'Blade Runner 2049', - releaseDate: '2017-10-04', - }, - { - id: 11072, - title: 'Blazing Saddles', - releaseDate: '1974-02-07', - }, - { - id: 489930, - title: 'Blindspotting', - releaseDate: '2018-07-20', - }, - { - id: 22164, - title: 'Blood and Bone', - releaseDate: '2009-02-07', - }, - { - id: 1372, - title: 'Blood Diamond', - releaseDate: '2006-12-08', - }, - { - id: 11368, - title: 'Blood Simple', - releaseDate: '1985-01-18', - }, - { - id: 11690, - title: 'Bloodsport', - releaseDate: '1988-02-26', - }, - { - id: 4107, - title: 'Bloody Sunday', - releaseDate: '2002-01-25', - }, - { - id: 4133, - title: 'Blow', - releaseDate: '2001-04-04', - }, - { - id: 11644, - title: 'Blow Out', - releaseDate: '1981-07-24', - }, - { - id: 1052, - title: 'Blow-Up', - releaseDate: '1966-12-18', - }, - { - id: 644089, - title: 'Blue Bayou', - releaseDate: '2021-09-10', - }, - { - id: 14839, - title: 'Blue Collar', - releaseDate: '1978-02-10', - }, - { - id: 408508, - title: 'Blue Jay', - releaseDate: '2016-10-07', - }, - { - id: 671295, - title: 'Blue Miracle', - releaseDate: '2021-05-27', - }, - { - id: 621191, - title: 'Blue Story', - releaseDate: '2019-11-22', - }, - { - id: 793, - title: 'Blue Velvet', - releaseDate: '1986-09-19', - }, - { - id: 818350, - title: 'Blush', - releaseDate: '2021-06-13', - }, - { - id: 823754, - title: 'Bo Burnham: Inside', - releaseDate: '2021-07-22', - }, - { - id: 400608, - title: 'Bo Burnham: Make Happy', - releaseDate: '2016-06-03', - }, - { - id: 244001, - title: 'Bo Burnham: What.', - releaseDate: '2013-12-17', - }, - { - id: 424694, - title: 'Bohemian Rhapsody', - releaseDate: '2018-10-24', - }, - { - id: 807196, - title: 'Boiling Point', - releaseDate: '2021-07-05', - }, - { - id: 396774, - title: 'Bomb City', - releaseDate: '2017-03-31', - }, - { - id: 791177, - title: 'Bones and All', - releaseDate: '2022-11-18', - }, - { - id: 475, - title: 'Bonnie and Clyde', - releaseDate: '1967-08-13', - }, - { - id: 4995, - title: 'Boogie Nights', - releaseDate: '1997-10-10', - }, - { - id: 505600, - title: 'Booksmart', - releaseDate: '2019-05-24', - }, - { - id: 2604, - title: 'Born on the Fourth of July', - releaseDate: '1989-12-20', - }, - { - id: 24481, - title: 'Born Yesterday', - releaseDate: '1950-12-26', - }, - { - id: 421281, - title: 'Borrowed Time', - releaseDate: '2015-10-31', - }, - { - id: 9303, - title: 'Bound', - releaseDate: '1996-09-13', - }, - { - id: 9702, - title: 'Bound by Honor', - releaseDate: '1993-02-05', - }, - { - id: 1430, - title: 'Bowling for Columbine', - releaseDate: '2002-10-09', - }, - { - id: 39356, - title: 'Boy', - releaseDate: '2010-03-25', - }, - { - id: 14748, - title: 'Boy A', - releaseDate: '2008-07-23', - }, - { - id: 472451, - title: 'Boy Erased', - releaseDate: '2018-09-24', - }, - { - id: 85350, - title: 'Boyhood', - releaseDate: '2014-06-05', - }, - { - id: 348893, - title: 'Boyka: Undisputed IV', - releaseDate: '2016-08-01', - }, - { - id: 226, - title: "Boys Don't Cry", - releaseDate: '1999-09-02', - }, - { - id: 650, - title: 'Boyz n the Hood', - releaseDate: '1991-07-12', - }, - { - id: 340027, - title: 'Brain on Fire', - releaseDate: '2017-02-22', - }, - { - id: 763, - title: 'Braindead', - releaseDate: '1992-08-13', - }, - { - id: 6114, - title: "Bram Stoker's Dracula", - releaseDate: '1992-11-13', - }, - { - id: 62177, - title: 'Brave', - releaseDate: '2012-06-21', - }, - { - id: 197, - title: 'Braveheart', - releaseDate: '1995-05-24', - }, - { - id: 68, - title: 'Brazil', - releaseDate: '1985-02-20', - }, - { - id: 13783, - title: 'Breaker Morant', - releaseDate: '1980-06-11', - }, - { - id: 164, - title: "Breakfast at Tiffany's", - releaseDate: '1961-10-06', - }, - { - id: 1420, - title: 'Breakfast on Pluto', - releaseDate: '2005-11-16', - }, - { - id: 20283, - title: 'Breaking Away', - releaseDate: '1979-05-24', - }, - { - id: 514439, - title: 'Breakthrough', - releaseDate: '2019-04-10', - }, - { - id: 407445, - title: 'Breathe', - releaseDate: '2017-10-13', - }, - { - id: 535845, - title: 'Brian Banks', - releaseDate: '2019-08-09', - }, - { - id: 229, - title: 'Bride of Frankenstein', - releaseDate: '1935-04-20', - }, - { - id: 296098, - title: 'Bridge of Spies', - releaseDate: '2015-10-15', - }, - { - id: 1265, - title: 'Bridge to Terabithia', - releaseDate: '2007-02-15', - }, - { - id: 851, - title: 'Brief Encounter', - releaseDate: '1945-11-24', - }, - { - id: 403431, - title: 'Brigsby Bear', - releaseDate: '2017-07-27', - }, - { - id: 324560, - title: 'Brimstone', - releaseDate: '2016-03-12', - }, - { - id: 1151031, - title: 'Bring Her Back', - releaseDate: '2025-05-28', - }, - { - id: 11942, - title: 'Bring Me the Head of Alfredo Garcia', - releaseDate: '1974-08-01', - }, - { - id: 900, - title: 'Bringing Up Baby', - releaseDate: '1938-02-18', - }, - { - id: 797594, - title: 'Britney vs. Spears', - releaseDate: '2021-09-27', - }, - { - id: 12762, - title: 'Broadway Danny Rose', - releaseDate: '1984-01-27', - }, - { - id: 142, - title: 'Brokeback Mountain', - releaseDate: '2005-10-22', - }, - { - id: 167073, - title: 'Brooklyn', - releaseDate: '2015-10-20', - }, - { - id: 10009, - title: 'Brother Bear', - releaseDate: '2003-10-23', - }, - { - id: 7445, - title: 'Brothers', - releaseDate: '2009-12-02', - }, - { - id: 378373, - title: 'Brothers of the Wind', - releaseDate: '2015-12-24', - }, - { - id: 1623, - title: 'Brubaker', - releaseDate: '1980-06-20', - }, - { - id: 28297, - title: 'Brute Force', - releaseDate: '1947-07-16', - }, - { - id: 3073, - title: 'Bud Abbott and Lou Costello Meet Frankenstein', - releaseDate: '1948-06-01', - }, - { - id: 11779, - title: 'Buena Vista Social Club', - releaseDate: '1999-06-04', - }, - { - id: 9464, - title: "Buffalo '66", - releaseDate: '1998-01-20', - }, - { - id: 701387, - title: 'Bugonia', - releaseDate: '2025-10-23', - }, - { - id: 26730, - title: "Bugs Bunny's 3rd Movie: 1001 Rabbit Tales", - releaseDate: '1982-11-19', - }, - { - id: 718930, - title: 'Bullet Train', - releaseDate: '2022-08-03', - }, - { - id: 11382, - title: 'Bullets Over Broadway', - releaseDate: '1994-10-14', - }, - { - id: 916, - title: 'Bullitt', - releaseDate: '1968-10-17', - }, - { - id: 84404, - title: 'Bully', - releaseDate: '2011-04-23', - }, - { - id: 1942, - title: 'Bunny Lake Is Missing', - releaseDate: '1965-10-03', - }, - { - id: 42297, - title: 'Burlesque', - releaseDate: '2010-11-23', - }, - { - id: 13413, - title: 'BURN·E', - releaseDate: '2008-11-17', - }, - { - id: 747059, - title: 'Burrow', - releaseDate: '2020-12-25', - }, - { - id: 20770, - title: "But I'm a Cheerleader", - releaseDate: '2000-07-07', - }, - { - id: 642, - title: 'Butch Cassidy and the Sundance Kid', - releaseDate: '1969-09-23', - }, - { - id: 632617, - title: "C'mon C'mon", - releaseDate: '2021-11-19', - }, - { - id: 10784, - title: 'Cabaret', - releaseDate: '1972-02-13', - }, - { - id: 28289, - title: 'Cactus Flower', - releaseDate: '1969-12-16', - }, - { - id: 863873, - title: 'Caddo Lake', - releaseDate: '2024-11-28', - }, - { - id: 14299, - title: 'Cadillac Records', - releaseDate: '2008-12-05', - }, - { - id: 14117, - title: 'Calamity Jane', - releaseDate: '1953-11-04', - }, - { - id: 398818, - title: 'Call Me by Your Name', - releaseDate: '2017-10-01', - }, - { - id: 157832, - title: 'Calvary', - releaseDate: '2014-04-11', - }, - { - id: 986, - title: 'Chimes at Midnight', - releaseDate: '1965-12-22', - }, - { - id: 4441, - title: 'Candy', - releaseDate: '2006-05-25', - }, - { - id: 11349, - title: 'Cape Fear', - releaseDate: '1962-04-12', - }, - { - id: 1598, - title: 'Cape Fear', - releaseDate: '1991-11-13', - }, - { - id: 22074, - title: 'Capitalism: A Love Story', - releaseDate: '2009-09-06', - }, - { - id: 271110, - title: 'Captain America: Civil War', - releaseDate: '2016-04-27', - }, - { - id: 1771, - title: 'Captain America: The First Avenger', - releaseDate: '2011-07-22', - }, - { - id: 100402, - title: 'Captain America: The Winter Soldier', - releaseDate: '2014-03-20', - }, - { - id: 16905, - title: 'Captain Blood', - releaseDate: '1935-12-26', - }, - { - id: 334533, - title: 'Captain Fantastic', - releaseDate: '2016-07-08', - }, - { - id: 109424, - title: 'Captain Phillips', - releaseDate: '2013-10-10', - }, - { - id: 16515, - title: 'Captains Courageous', - releaseDate: '1937-06-25', - }, - { - id: 2260, - title: 'Capturing the Friedmans', - releaseDate: '2003-05-30', - }, - { - id: 1076364, - title: "Carl's Date", - releaseDate: '2023-06-15', - }, - { - id: 6075, - title: "Carlito's Way", - releaseDate: '1993-11-10', - }, - { - id: 72113, - title: 'Carnage', - releaseDate: '2011-09-16', - }, - { - id: 258480, - title: 'Carol', - releaseDate: '2015-11-20', - }, - { - id: 7340, - title: 'Carrie', - releaseDate: '1976-11-03', - }, - { - id: 920, - title: 'Cars', - releaseDate: '2006-06-08', - }, - { - id: 317952, - title: 'Cartel Land', - releaseDate: '2015-07-03', - }, - { - id: 289, - title: 'Casablanca', - releaseDate: '1943-01-15', - }, - { - id: 444308, - title: 'Cashback', - releaseDate: '2004-10-10', - }, - { - id: 524, - title: 'Casino', - releaseDate: '1995-11-22', - }, - { - id: 36557, - title: 'Casino Royale', - releaseDate: '2006-11-14', - }, - { - id: 8358, - title: 'Cast Away', - releaseDate: '2000-12-22', - }, - { - id: 236028, - title: 'Castello Cavalcanti', - releaseDate: '2013-11-12', - }, - { - id: 10142, - title: 'Casualties of War', - releaseDate: '1989-08-18', - }, - { - id: 261, - title: 'Cat on a Hot Tin Roof', - releaseDate: '1958-08-29', - }, - { - id: 640, - title: 'Catch Me If You Can', - releaseDate: '2002-12-16', - }, - { - id: 26598, - title: 'Cats', - releaseDate: '1998-10-05', - }, - { - id: 24662, - title: "Cats Don't Dance", - releaseDate: '1997-03-26', - }, - { - id: 59490, - title: 'Cave of Forgotten Dreams', - releaseDate: '2010-11-03', - }, - { - id: 814340, - title: 'Cha Cha Real Smooth', - releaseDate: '2022-06-17', - }, - { - id: 3580, - title: 'Changeling', - releaseDate: '2008-10-24', - }, - { - id: 10435, - title: 'Chaplin', - releaseDate: '1992-12-17', - }, - { - id: 4808, - title: 'Charade', - releaseDate: '1963-12-01', - }, - { - id: 27331, - title: 'Charley Varrick', - releaseDate: '1973-09-19', - }, - { - id: 118, - title: 'Charlie and the Chocolate Factory', - releaseDate: '2005-07-13', - }, - { - id: 552532, - title: 'Charm City Kings', - releaseDate: '2020-01-27', - }, - { - id: 84185, - title: 'Chasing Ice', - releaseDate: '2012-10-01', - }, - { - id: 82684, - title: 'Chasing Mavericks', - releaseDate: '2012-10-25', - }, - { - id: 212778, - title: 'Chef', - releaseDate: '2014-05-08', - }, - { - id: 621013, - title: 'Chemical Hearts', - releaseDate: '2020-08-21', - }, - { - id: 544401, - title: 'Cherry', - releaseDate: '2021-02-26', - }, - { - id: 34672, - title: 'Chestnut: Hero of Central Park', - releaseDate: '2004-10-21', - }, - { - id: 1574, - title: 'Chicago', - releaseDate: '2002-12-10', - }, - { - id: 778855, - title: 'Chickenhare and the Hamster of Darkness', - releaseDate: '2022-02-16', - }, - { - id: 9693, - title: 'Children of Men', - releaseDate: '2006-09-22', - }, - { - id: 13354, - title: 'Chill Out, Scooby-Doo!', - releaseDate: '2007-08-31', - }, - { - id: 829, - title: 'Chinatown', - releaseDate: '1974-06-20', - }, - { - id: 420814, - title: 'Christopher Robin', - releaseDate: '2018-08-01', - }, - { - id: 876716, - title: 'Ciao Alberto', - releaseDate: '2021-11-11', - }, - { - id: 11224, - title: 'Cinderella', - releaseDate: '1950-02-22', - }, - { - id: 921, - title: 'Cinderella Man', - releaseDate: '2005-06-02', - }, - { - id: 94352, - title: 'Cirque du Soleil: Worlds Away', - releaseDate: '2012-11-09', - }, - { - id: 15, - title: 'Citizen Kane', - releaseDate: '1941-04-17', - }, - { - id: 12554, - title: 'Citizen X', - releaseDate: '1995-02-25', - }, - { - id: 293310, - title: 'Citizenfour', - releaseDate: '2014-10-10', - }, - { - id: 901, - title: 'City Lights', - releaseDate: '1931-02-06', - }, - { - id: 466532, - title: 'Clara', - releaseDate: '2018-11-30', - }, - { - id: 8095, - title: 'Cleopatra', - releaseDate: '1963-06-12', - }, - { - id: 2292, - title: 'Clerks', - releaseDate: '1994-10-19', - }, - { - id: 336845, - title: 'Cleveland Abduction', - releaseDate: '2015-05-02', - }, - { - id: 585245, - title: 'Clifford the Big Red Dog', - releaseDate: '2021-11-10', - }, - { - id: 66834, - title: 'Clock Cleaners', - releaseDate: '1937-10-15', - }, - { - id: 840, - title: 'Close Encounters of the Third Kind', - releaseDate: '1977-12-14', - }, - { - id: 353728, - title: 'Closet Monster', - releaseDate: '2016-07-15', - }, - { - id: 630566, - title: 'Clouds', - releaseDate: '2020-10-09', - }, - { - id: 15196, - title: 'Clue', - releaseDate: '1985-12-13', - }, - { - id: 9603, - title: 'Clueless', - releaseDate: '1995-07-19', - }, - { - id: 7214, - title: 'Coach Carter', - releaseDate: '2005-01-14', - }, - { - id: 16769, - title: "Coal Miner's Daughter", - releaseDate: '1980-03-07', - }, - { - id: 319075, - title: 'Cobain: Montage of Heck', - releaseDate: '2015-03-23', - }, - { - id: 14761, - title: 'Cocaine Cowboys', - releaseDate: '2006-11-03', - }, - { - id: 354912, - title: 'Coco', - releaseDate: '2017-10-27', - }, - { - id: 776503, - title: 'CODA', - releaseDate: '2021-08-13', - }, - { - id: 205081, - title: 'Codename: Kids Next Door: Operation Z.E.R.O.', - releaseDate: '2006-08-11', - }, - { - id: 220289, - title: 'Coherence', - releaseDate: '2014-04-06', - }, - { - id: 1538, - title: 'Collateral', - releaseDate: '2004-08-04', - }, - { - id: 345920, - title: 'Collateral Beauty', - releaseDate: '2016-12-15', - }, - { - id: 318781, - title: 'Colonia', - releaseDate: '2015-06-24', - }, - { - id: 414453, - title: 'Columbus', - releaseDate: '2017-08-04', - }, - { - id: 31657, - title: 'Coming Home', - releaseDate: '1978-02-15', - }, - { - id: 1084199, - title: 'Companion', - releaseDate: '2025-01-22', - }, - { - id: 35921, - title: 'Compulsion', - releaseDate: '1959-04-01', - }, - { - id: 974576, - title: 'Conclave', - releaseDate: '2024-10-25', - }, - { - id: 321741, - title: 'Concussion', - releaseDate: '2015-11-12', - }, - { - id: 12900, - title: 'Conspiracy', - releaseDate: '2001-05-19', - }, - { - id: 561, - title: 'Constantine', - releaseDate: '2005-02-08', - }, - { - id: 539517, - title: 'Constantine: City of Demons - The Movie', - releaseDate: '2018-10-04', - }, - { - id: 686, - title: 'Contact', - releaseDate: '1997-07-11', - }, - { - id: 5708, - title: 'Control', - releaseDate: '2007-09-12', - }, - { - id: 45094, - title: 'Conviction', - releaseDate: '2010-10-15', - }, - { - id: 903, - title: 'Cool Hand Luke', - releaseDate: '1967-11-01', - }, - { - id: 864, - title: 'Cool Runnings', - releaseDate: '1993-10-01', - }, - { - id: 38742, - title: 'Cops', - releaseDate: '1922-03-11', - }, - { - id: 14836, - title: 'Coraline', - releaseDate: '2009-02-05', - }, - { - id: 3933, - title: 'Corpse Bride', - releaseDate: '2005-09-12', - }, - { - id: 72213, - title: 'Courageous', - releaseDate: '2011-09-30', - }, - { - id: 282297, - title: 'Cowspiracy: The Sustainability Secret', - releaseDate: '2014-07-01', - }, - { - id: 1640, - title: 'Crash', - releaseDate: '2005-05-06', - }, - { - id: 455207, - title: 'Crazy Rich Asians', - releaseDate: '2018-08-15', - }, - { - id: 50646, - title: 'Crazy, Stupid, Love.', - releaseDate: '2011-07-29', - }, - { - id: 312221, - title: 'Creed', - releaseDate: '2015-11-25', - }, - { - id: 480530, - title: 'Creed II', - releaseDate: '2018-11-21', - }, - { - id: 677179, - title: 'Creed III', - releaseDate: '2023-03-01', - }, - { - id: 11562, - title: 'Crimes and Misdemeanors', - releaseDate: '1989-10-13', - }, - { - id: 8963, - title: 'Crimson Tide', - releaseDate: '1995-05-12', - }, - { - id: 653725, - title: 'Crip Camp: A Disability Revolution', - releaseDate: '2020-03-25', - }, - { - id: 22112, - title: 'Criss Cross', - releaseDate: '1949-02-04', - }, - { - id: 366141, - title: 'Cro Minion', - releaseDate: '2015-11-04', - }, - { - id: 10839, - title: 'Cross of Iron', - releaseDate: '1977-01-29', - }, - { - id: 15392, - title: 'Crossroads', - releaseDate: '1986-03-14', - }, - { - id: 337404, - title: 'Cruella', - releaseDate: '2021-05-26', - }, - { - id: 26564, - title: 'Crumb', - releaseDate: '1994-09-10', - }, - { - id: 860159, - title: 'Crush', - releaseDate: '2022-04-29', - }, - { - id: 346401, - title: 'Daft Punk Unchained', - releaseDate: '2015-06-24', - }, - { - id: 152532, - title: 'Dallas Buyers Club', - releaseDate: '2013-11-01', - }, - { - id: 16, - title: 'Dancer in the Dark', - releaseDate: '2000-09-01', - }, - { - id: 581, - title: 'Dances with Wolves', - releaseDate: '1990-03-30', - }, - { - id: 8583, - title: 'Dangerous Beauty', - releaseDate: '1998-02-20', - }, - { - id: 859, - title: 'Dangerous Liaisons', - releaseDate: '1988-12-21', - }, - { - id: 2666, - title: 'Dark City', - releaseDate: '1998-02-27', - }, - { - id: 16227, - title: 'Dark Passage', - releaseDate: '1947-09-05', - }, - { - id: 552178, - title: 'Dark Waters', - releaseDate: '2019-11-22', - }, - { - id: 399404, - title: 'Darkest Hour', - releaseDate: '2017-11-22', - }, - { - id: 635918, - title: 'Dating Amber', - releaseDate: '2020-07-03', - }, - { - id: 444706, - title: 'Dave Chappelle: Deep in the Heart of Texas', - releaseDate: '2017-03-21', - }, - { - id: 488223, - title: 'Dave Chappelle: Equanimity', - releaseDate: '2017-12-31', - }, - { - id: 20147, - title: "Dave Chappelle: For What It's Worth", - releaseDate: '2004-09-04', - }, - { - id: 16275, - title: "Dave Chappelle: Killin' Them Softly", - releaseDate: '2000-07-26', - }, - { - id: 624932, - title: 'Dave Chappelle: Sticks & Stones', - releaseDate: '2019-08-26', - }, - { - id: 444705, - title: 'Dave Chappelle: The Age of Spin', - releaseDate: '2017-03-21', - }, - { - id: 494368, - title: 'Dave Chappelle: The Bird Revelation', - releaseDate: '2017-12-31', - }, - { - id: 879540, - title: 'Dave Chappelle: The Closer', - releaseDate: '2021-10-05', - }, - { - id: 664280, - title: 'David Attenborough: A Life on Our Planet', - releaseDate: '2020-09-28', - }, - { - id: 924, - title: 'Dawn of the Dead', - releaseDate: '2004-03-19', - }, - { - id: 923, - title: 'Dawn of the Dead', - releaseDate: '1978-09-02', - }, - { - id: 119450, - title: 'Dawn of the Planet of the Apes', - releaseDate: '2014-07-08', - }, - { - id: 40619, - title: 'Day & Night', - releaseDate: '2010-06-17', - }, - { - id: 8408, - title: 'Day of the Dead', - releaseDate: '1985-07-03', - }, - { - id: 16642, - title: 'Days of Heaven', - releaseDate: '1978-09-13', - }, - { - id: 32488, - title: 'Days of Wine and Roses', - releaseDate: '1963-02-04', - }, - { - id: 9571, - title: 'Dazed and Confused', - releaseDate: '1993-09-24', - }, - { - id: 539681, - title: 'DC League of Super-Pets', - releaseDate: '2022-07-27', - }, - { - id: 618353, - title: 'DC Showcase - Batman: Death in the Family', - releaseDate: '2020-10-13', - }, - { - id: 46718, - title: 'DC Showcase: Green Arrow', - releaseDate: '2010-09-28', - }, - { - id: 41988, - title: 'DC Showcase: Jonah Hex', - releaseDate: '2010-07-27', - }, - { - id: 355254, - title: 'De Palma', - releaseDate: '2016-06-10', - }, - { - id: 922, - title: 'Dead Man', - releaseDate: '1995-12-23', - }, - { - id: 687, - title: 'Dead Man Walking', - releaseDate: '1995-12-29', - }, - { - id: 12877, - title: "Dead Man's Shoes", - releaseDate: '2004-09-29', - }, - { - id: 13581, - title: 'Dead of Night', - releaseDate: '1945-09-09', - }, - { - id: 207, - title: 'Dead Poets Society', - releaseDate: '1989-06-02', - }, - { - id: 9540, - title: 'Dead Ringers', - releaseDate: '1988-09-23', - }, - { - id: 293660, - title: 'Deadpool', - releaseDate: '2016-02-09', - }, - { - id: 533535, - title: 'Deadpool & Wolverine', - releaseDate: '2024-07-24', - }, - { - id: 383498, - title: 'Deadpool 2', - releaseDate: '2018-05-15', - }, - { - id: 558144, - title: 'Deadpool: No Good Deed', - releaseDate: '2017-03-03', - }, - { - id: 483306, - title: 'Dear Basketball', - releaseDate: '2017-04-23', - }, - { - id: 8981, - title: 'Dear Frankie', - releaseDate: '2004-05-18', - }, - { - id: 15584, - title: 'Dear Zachary: A Letter to a Son About His Father', - releaseDate: '2008-10-31', - }, - { - id: 10531, - title: 'Death and the Maiden', - releaseDate: '1994-05-04', - }, - { - id: 4192, - title: 'Death on the Nile', - releaseDate: '1978-09-29', - }, - { - id: 2639, - title: 'Deconstructing Harry', - releaseDate: '1997-12-12', - }, - { - id: 13364, - title: 'Deliver Us from Evil', - releaseDate: '2006-06-24', - }, - { - id: 10669, - title: 'Deliverance', - releaseDate: '1972-08-18', - }, - { - id: 277217, - title: 'Descendants', - releaseDate: '2015-07-31', - }, - { - id: 417320, - title: 'Descendants 2', - releaseDate: '2017-07-21', - }, - { - id: 506574, - title: 'Descendants 3', - releaseDate: '2019-08-02', - }, - { - id: 33997, - title: 'Desert Flower', - releaseDate: '2009-09-24', - }, - { - id: 294, - title: 'Desert Hearts', - releaseDate: '1985-10-01', - }, - { - id: 77210, - title: 'Design for Living', - releaseDate: '1933-12-29', - }, - { - id: 20352, - title: 'Despicable Me', - releaseDate: '2010-07-08', - }, - { - id: 35114, - title: 'Destino', - releaseDate: '2003-08-05', - }, - { - id: 43828, - title: 'Destry Rides Again', - releaseDate: '1939-11-30', - }, - { - id: 74308, - title: 'Detachment', - releaseDate: '2011-04-24', - }, - { - id: 20853, - title: 'Detective Story', - releaseDate: '1951-10-24', - }, - { - id: 20367, - title: 'Detour', - releaseDate: '1945-11-30', - }, - { - id: 407448, - title: 'Detroit', - releaseDate: '2017-07-28', - }, - { - id: 1997, - title: 'Two Brothers', - releaseDate: '2004-04-07', - }, - { - id: 653851, - title: 'Devotion', - releaseDate: '2022-11-23', - }, - { - id: 1127110, - title: 'Diablo', - releaseDate: '2025-06-13', - }, - { - id: 521, - title: 'Dial M for Murder', - releaseDate: '1954-05-29', - }, - { - id: 562, - title: 'Die Hard', - releaseDate: '1988-07-15', - }, - { - id: 1572, - title: 'Die Hard: With a Vengeance', - releaseDate: '1995-05-19', - }, - { - id: 6166, - title: 'Dinner for One', - releaseDate: '1963-06-08', - }, - { - id: 653664, - title: 'Dinner in America', - releaseDate: '2020-05-27', - }, - { - id: 88, - title: 'Dirty Dancing', - releaseDate: '1987-08-21', - }, - { - id: 984, - title: 'Dirty Harry', - releaseDate: '1971-12-23', - }, - { - id: 10141, - title: 'Dirty Rotten Scoundrels', - releaseDate: '1988-12-14', - }, - { - id: 159004, - title: 'Dirty Wars', - releaseDate: '2013-01-18', - }, - { - id: 127517, - title: 'Disconnect', - releaseDate: '2013-04-12', - }, - { - id: 17654, - title: 'District 9', - releaseDate: '2009-08-05', - }, - { - id: 68718, - title: 'Django Unchained', - releaseDate: '2012-12-25', - }, - { - id: 925, - title: 'Do the Right Thing', - releaseDate: '1989-06-14', - }, - { - id: 501170, - title: 'Doctor Sleep', - releaseDate: '2019-10-30', - }, - { - id: 284052, - title: 'Doctor Strange', - releaseDate: '2016-10-25', - }, - { - id: 453395, - title: 'Doctor Strange in the Multiverse of Madness', - releaseDate: '2022-05-04', - }, - { - id: 315620, - title: 'Doctor Who: A Christmas Carol', - releaseDate: '2010-12-25', - }, - { - id: 317182, - title: 'Doctor Who: Last Christmas', - releaseDate: '2014-12-25', - }, - { - id: 282963, - title: 'Doctor Who: Planet of the Dead', - releaseDate: '2009-04-11', - }, - { - id: 313106, - title: 'Doctor Who: The Day of the Doctor', - releaseDate: '2013-11-23', - }, - { - id: 371759, - title: 'Doctor Who: The Husbands of River Song', - releaseDate: '2015-12-25', - }, - { - id: 317190, - title: 'Doctor Who: The Next Doctor', - releaseDate: '2008-12-25', - }, - { - id: 282758, - title: 'Doctor Who: The Runaway Bride', - releaseDate: '2006-12-25', - }, - { - id: 369145, - title: 'Doctor Who: The Snowmen', - releaseDate: '2012-12-25', - }, - { - id: 282848, - title: 'Doctor Who: The Time of the Doctor', - releaseDate: '2013-12-25', - }, - { - id: 281979, - title: 'Doctor Who: The Waters of Mars', - releaseDate: '2009-11-15', - }, - { - id: 335209, - title: 'Doctor Who: Voyage of the Damned', - releaseDate: '2007-12-25', - }, - { - id: 907, - title: 'Doctor Zhivago', - releaseDate: '1965-12-22', - }, - { - id: 626735, - title: 'Dog', - releaseDate: '2022-02-17', - }, - { - id: 968, - title: 'Dog Day Afternoon', - releaseDate: '1975-09-21', - }, - { - id: 774370, - title: 'Dog Man', - releaseDate: '2025-01-24', - }, - { - id: 43920, - title: 'Dog Pound', - releaseDate: '2010-04-24', - }, - { - id: 1282, - title: 'Dogtown and Z-Boys', - releaseDate: '2002-05-10', - }, - { - id: 553, - title: 'Dogville', - releaseDate: '2003-05-21', - }, - { - id: 11929, - title: 'Dolores Claiborne', - releaseDate: '1995-03-24', - }, - { - id: 10607, - title: - "Don't Be a Menace to South Central While Drinking Your Juice in the Hood", - releaseDate: '1996-01-12', - }, - { - id: 300669, - title: "Don't Breathe", - releaseDate: '2016-06-08', - }, - { - id: 482373, - title: "Don't Breathe 2", - releaseDate: '2021-08-12', - }, - { - id: 127144, - title: "Don't Hug Me I'm Scared", - releaseDate: '2012-10-24', - }, - { - id: 646380, - title: "Don't Look Up", - releaseDate: '2021-12-08', - }, - { - id: 9366, - title: 'Donnie Brasco', - releaseDate: '1997-02-27', - }, - { - id: 141, - title: 'Donnie Darko', - releaseDate: '2001-01-19', - }, - { - id: 135, - title: 'Dont Look Back', - releaseDate: '1967-05-17', - }, - { - id: 308639, - title: 'Dope', - releaseDate: '2015-06-19', - }, - { - id: 996, - title: 'Double Indemnity', - releaseDate: '1944-07-06', - }, - { - id: 14359, - title: 'Doubt', - releaseDate: '2008-12-12', - }, - { - id: 1554, - title: 'Down by Law', - releaseDate: '1986-09-20', - }, - { - id: 913862, - title: 'Downfall: The Case Against Boeing', - releaseDate: '2022-02-09', - }, - { - id: 535544, - title: 'Downton Abbey', - releaseDate: '2019-09-12', - }, - { - id: 820446, - title: 'Downton Abbey: A New Era', - releaseDate: '2022-04-27', - }, - { - id: 1289936, - title: 'Downton Abbey: The Grand Finale', - releaseDate: '2025-09-10', - }, - { - id: 3019, - title: 'Dr. Jekyll and Mr. Hyde', - releaseDate: '1931-12-24', - }, - { - id: 935, - title: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - releaseDate: '1964-01-29', - }, - { - id: 11868, - title: 'Dracula', - releaseDate: '1958-04-21', - }, - { - id: 138, - title: 'Dracula', - releaseDate: '1931-02-12', - }, - { - id: 523366, - title: 'Dragon Rider', - releaseDate: '2020-10-13', - }, - { - id: 298115, - title: 'Dragons: Dawn of the Dragon Racers', - releaseDate: '2014-11-01', - }, - { - id: 91417, - title: 'Dragons: Gift of the Night Fury', - releaseDate: '2011-11-15', - }, - { - id: 43960, - title: 'Drake & Josh Go Hollywood', - releaseDate: '2006-01-06', - }, - { - id: 12920, - title: 'Dreamer: Inspired By a True Story', - releaseDate: '2005-09-10', - }, - { - id: 64690, - title: 'Drive', - releaseDate: '2011-09-15', - }, - { - id: 403, - title: 'Driving Miss Daisy', - releaseDate: '1989-12-13', - }, - { - id: 27362, - title: 'Drowning by Numbers', - releaseDate: '1988-09-10', - }, - { - id: 476, - title: 'Drugstore Cowboy', - releaseDate: '1989-10-20', - }, - { - id: 53210, - title: 'Duck Amuck', - releaseDate: '1953-02-28', - }, - { - id: 67409, - title: 'Duck Dodgers in the 24½th Century', - releaseDate: '1953-07-25', - }, - { - id: 3063, - title: 'Duck Soup', - releaseDate: '1933-11-12', - }, - { - id: 839, - title: 'Duel', - releaseDate: '1971-11-13', - }, - { - id: 15907, - title: 'Duma', - releaseDate: '2005-04-22', - }, - { - id: 438631, - title: 'Dune', - releaseDate: '2021-09-15', - }, - { - id: 693134, - title: 'Dune: Part Two', - releaseDate: '2024-02-27', - }, - { - id: 493529, - title: 'Dungeons & Dragons: Honor Among Thieves', - releaseDate: '2023-03-23', - }, - { - id: 374720, - title: 'Dunkirk', - releaseDate: '2017-07-19', - }, - { - id: 1158915, - title: 'Dìdi (弟弟)', - releaseDate: '2024-07-26', - }, - { - id: 601, - title: 'E.T. the Extra-Terrestrial', - releaseDate: '1982-06-11', - }, - { - id: 10946, - title: 'Earth', - releaseDate: '2007-10-10', - }, - { - id: 464593, - title: 'Earth: One Amazing Day', - releaseDate: '2017-08-04', - }, - { - id: 30238, - title: 'Earthlings', - releaseDate: '2005-09-24', - }, - { - id: 220, - title: 'East of Eden', - releaseDate: '1955-04-10', - }, - { - id: 2252, - title: 'Eastern Promises', - releaseDate: '2007-09-14', - }, - { - id: 624, - title: 'Easy Rider', - releaseDate: '1969-06-26', - }, - { - id: 47650, - title: 'Easy Street', - releaseDate: '1917-01-22', - }, - { - id: 522, - title: 'Ed Wood', - releaseDate: '1994-09-28', - }, - { - id: 17159, - title: 'Eddie Murphy Raw', - releaseDate: '1987-11-25', - }, - { - id: 15251, - title: 'Eddie Murphy: Delirious', - releaseDate: '1983-10-15', - }, - { - id: 319888, - title: 'Eddie the Eagle', - releaseDate: '2016-02-25', - }, - { - id: 137113, - title: 'Edge of Tomorrow', - releaseDate: '2014-05-27', - }, - { - id: 162, - title: 'Edward Scissorhands', - releaseDate: '1990-12-07', - }, - { - id: 9036, - title: 'Eight Below', - releaseDate: '2006-02-17', - }, - { - id: 489925, - title: 'Eighth Grade', - releaseDate: '2018-01-19', - }, - { - id: 559969, - title: 'El Camino: A Breaking Bad Movie', - releaseDate: '2019-10-11', - }, - { - id: 6644, - title: 'El Dorado', - releaseDate: '1966-12-17', - }, - { - id: 282041, - title: 'Electric Boogaloo: The Wild, Untold Story of Cannon Films', - releaseDate: '2014-10-06', - }, - { - id: 976573, - title: 'Elemental', - releaseDate: '2023-06-14', - }, - { - id: 1807, - title: 'Elephant', - releaseDate: '2003-09-20', - }, - { - id: 4518, - title: 'Elizabeth', - releaseDate: '1998-09-13', - }, - { - id: 22013, - title: 'Elmer Gantry', - releaseDate: '1960-07-07', - }, - { - id: 614934, - title: 'Elvis', - releaseDate: '2022-06-22', - }, - { - id: 715931, - title: 'Emancipation', - releaseDate: '2022-12-02', - }, - { - id: 556678, - title: 'Emma.', - releaseDate: '2020-02-13', - }, - { - id: 76180, - title: 'Empire of Dreams: The Story of the Star Wars Trilogy', - releaseDate: '2004-09-20', - }, - { - id: 10110, - title: 'Empire of the Sun', - releaseDate: '1987-12-09', - }, - { - id: 568124, - title: 'Encanto', - releaseDate: '2021-10-13', - }, - { - id: 1041513, - title: 'Encanto at the Hollywood Bowl', - releaseDate: '2022-12-27', - }, - { - id: 12172, - title: 'Encounters at the End of the World', - releaseDate: '2007-09-01', - }, - { - id: 77016, - title: 'End of Watch', - releaseDate: '2012-09-20', - }, - { - id: 853, - title: 'Enemy at the Gates', - releaseDate: '2001-02-28', - }, - { - id: 9798, - title: 'Enemy of the State', - releaseDate: '1998-11-20', - }, - { - id: 497582, - title: 'Enola Holmes', - releaseDate: '2020-09-23', - }, - { - id: 829280, - title: 'Enola Holmes 2', - releaseDate: '2022-11-30', - }, - { - id: 13020, - title: 'Enron: The Smartest Guys in the Room', - releaseDate: '2005-04-22', - }, - { - id: 9461, - title: 'Enter the Dragon', - releaseDate: '1973-08-17', - }, - { - id: 34647, - title: 'Enter the Void', - releaseDate: '2010-05-05', - }, - { - id: 1027014, - title: 'Entergalactic', - releaseDate: '2022-09-28', - }, - { - id: 7299, - title: 'Equilibrium', - releaseDate: '2002-12-06', - }, - { - id: 985, - title: 'Eraserhead', - releaseDate: '1977-09-28', - }, - { - id: 462, - title: 'Erin Brockovich', - releaseDate: '2000-03-17', - }, - { - id: 10734, - title: 'Escape from Alcatraz', - releaseDate: '1979-06-22', - }, - { - id: 1103, - title: 'Escape from New York', - releaseDate: '1981-05-23', - }, - { - id: 502425, - title: 'Escape from Pretoria', - releaseDate: '2020-03-06', - }, - { - id: 25318, - title: 'Escape from Sobibor', - releaseDate: '1987-04-12', - }, - { - id: 38, - title: 'Eternal Sunshine of the Spotless Mind', - releaseDate: '2004-03-19', - }, - { - id: 1259102, - title: 'Eternity', - releaseDate: '2025-11-26', - }, - { - id: 9454, - title: 'EverAfter', - releaseDate: '1998-07-31', - }, - { - id: 465136, - title: 'Every Day', - releaseDate: '2018-02-22', - }, - { - id: 576712, - title: "Everybody's Everything", - releaseDate: '2019-11-12', - }, - { - id: 545611, - title: 'Everything Everywhere All at Once', - releaseDate: '2022-03-24', - }, - { - id: 340, - title: 'Everything Is Illuminated', - releaseDate: '2005-09-05', - }, - { - id: 417678, - title: 'Everything, Everything', - releaseDate: '2017-05-18', - }, - { - id: 765, - title: 'Evil Dead II', - releaseDate: '1987-03-13', - }, - { - id: 264660, - title: 'Ex Machina', - releaseDate: '2015-01-21', - }, - { - id: 39452, - title: 'Exit Through the Gift Shop', - releaseDate: '2010-03-05', - }, - { - id: 545609, - title: 'Extraction', - releaseDate: '2020-04-23', - }, - { - id: 697843, - title: 'Extraction 2', - releaseDate: '2023-06-09', - }, - { - id: 333352, - title: 'Eye in the Sky', - releaseDate: '2015-09-07', - }, - { - id: 345, - title: 'Eyes Wide Shut', - releaseDate: '1999-07-16', - }, - { - id: 911430, - title: 'F1', - releaseDate: '2025-06-25', - }, - { - id: 385128, - title: 'F9', - releaseDate: '2021-05-19', - }, - { - id: 754, - title: 'Face/Off', - releaseDate: '1997-06-27', - }, - { - id: 753, - title: 'Faces', - releaseDate: '1968-11-24', - }, - { - id: 18925, - title: 'Facing the Giants', - releaseDate: '2006-09-29', - }, - { - id: 532908, - title: 'Fahrenheit 11/9', - releaseDate: '2018-09-10', - }, - { - id: 1714, - title: 'Fahrenheit 451', - releaseDate: '1966-09-07', - }, - { - id: 1777, - title: 'Fahrenheit 9/11', - releaseDate: '2004-06-25', - }, - { - id: 502, - title: 'Fail Safe', - releaseDate: '1964-10-07', - }, - { - id: 985939, - title: 'Fall', - releaseDate: '2022-08-11', - }, - { - id: 37094, - title: 'Falling Down', - releaseDate: '1993-02-26', - }, - { - id: 625651, - title: 'Family Guy Presents: Something, Something, Something, Dark Side', - releaseDate: '2009-12-22', - }, - { - id: 756, - title: 'Fantasia', - releaseDate: '1940-11-13', - }, - { - id: 259316, - title: 'Fantastic Beasts and Where to Find Them', - releaseDate: '2016-11-16', - }, - { - id: 612654, - title: 'Fantastic Fungi', - releaseDate: '2019-08-30', - }, - { - id: 10315, - title: 'Fantastic Mr. Fox', - releaseDate: '2009-10-14', - }, - { - id: 10712, - title: 'Far from Heaven', - releaseDate: '2002-11-08', - }, - { - id: 250734, - title: 'Far from the Madding Crowd', - releaseDate: '2015-04-23', - }, - { - id: 831827, - title: 'Far from the Tree', - releaseDate: '2021-11-24', - }, - { - id: 275, - title: 'Fargo', - releaseDate: '1996-03-08', - }, - { - id: 51497, - title: 'Fast Five', - releaseDate: '2011-04-20', - }, - { - id: 385687, - title: 'Fast X', - releaseDate: '2023-05-17', - }, - { - id: 16993, - title: 'Fat City', - releaseDate: '1972-07-26', - }, - { - id: 30295, - title: 'Father Goose', - releaseDate: '1964-12-10', - }, - { - id: 809140, - title: 'Father Stu', - releaseDate: '2022-04-13', - }, - { - id: 607259, - title: 'Fatherhood', - releaseDate: '2021-06-18', - }, - { - id: 254172, - title: 'Fathers and Daughters', - releaseDate: '2015-10-01', - }, - { - id: 520318, - title: 'Fatima', - releaseDate: '2020-08-13', - }, - { - id: 1878, - title: 'Fear and Loathing in Las Vegas', - releaseDate: '1998-05-22', - }, - { - id: 591275, - title: 'Fear Street: 1666', - releaseDate: '2021-07-14', - }, - { - id: 591274, - title: 'Fear Street: 1978', - releaseDate: '2021-07-08', - }, - { - id: 293299, - title: 'Feast', - releaseDate: '2014-10-25', - }, - { - id: 250657, - title: 'Fed Up', - releaseDate: '2014-05-09', - }, - { - id: 707886, - title: 'Feel the Beat', - releaseDate: '2020-06-19', - }, - { - id: 13012, - title: 'Felon', - releaseDate: '2008-07-17', - }, - { - id: 364689, - title: 'Ferdinand', - releaseDate: '2017-12-09', - }, - { - id: 9377, - title: "Ferris Bueller's Day Off", - releaseDate: '1986-06-11', - }, - { - id: 14811, - title: 'Fiddler on the Roof', - releaseDate: '1971-11-03', - }, - { - id: 2323, - title: 'Field of Dreams', - releaseDate: '1989-04-21', - }, - { - id: 550, - title: 'Fight Club', - releaseDate: '1999-10-15', - }, - { - id: 574475, - title: 'Final Destination Bloodlines', - releaseDate: '2025-05-14', - }, - { - id: 522402, - title: 'Finch', - releaseDate: '2021-11-04', - }, - { - id: 127380, - title: 'Finding Dory', - releaseDate: '2016-06-16', - }, - { - id: 711, - title: 'Finding Forrester', - releaseDate: '2000-12-21', - }, - { - id: 12, - title: 'Finding Nemo', - releaseDate: '2003-05-30', - }, - { - id: 866, - title: 'Finding Neverland', - releaseDate: '2004-10-29', - }, - { - id: 169607, - title: 'Finding Vivian Maier', - releaseDate: '2014-03-21', - }, - { - id: 426030, - title: 'Finding Your Feet', - releaseDate: '2017-12-26', - }, - { - id: 913823, - title: 'Fire of Love', - releaseDate: '2022-07-06', - }, - { - id: 797838, - title: 'Firebird', - releaseDate: '2021-10-29', - }, - { - id: 50337, - title: 'Firebreather', - releaseDate: '2010-11-24', - }, - { - id: 778810, - title: 'Fireheart', - releaseDate: '2022-01-16', - }, - { - id: 14438, - title: 'Fireproof', - releaseDate: '2008-09-26', - }, - { - id: 1368, - title: 'First Blood', - releaseDate: '1982-10-22', - }, - { - id: 558582, - title: 'First Cow', - releaseDate: '2020-03-06', - }, - { - id: 369972, - title: 'First Man', - releaseDate: '2018-10-10', - }, - { - id: 433247, - title: 'First They Killed My Father', - releaseDate: '2017-02-18', - }, - { - id: 26617, - title: 'Five Easy Pieces', - releaseDate: '1970-09-12', - }, - { - id: 527641, - title: 'Five Feet Apart', - releaseDate: '2019-03-14', - }, - { - id: 507089, - title: "Five Nights at Freddy's", - releaseDate: '2023-10-25', - }, - { - id: 626332, - title: "Flamin' Hot", - releaseDate: '2023-03-11', - }, - { - id: 43949, - title: 'Flipped', - releaseDate: '2010-08-06', - }, - { - id: 574093, - title: 'Float', - releaseDate: '2019-11-12', - }, - { - id: 21183, - title: 'Fluke', - releaseDate: '1995-06-02', - }, - { - id: 768141, - title: 'Folklore: The Long Pond Studio Sessions', - releaseDate: '2020-11-25', - }, - { - id: 11660, - title: 'Following', - releaseDate: '1999-05-06', - }, - { - id: 18570, - title: 'Food, Inc.', - releaseDate: '2008-09-07', - }, - { - id: 20423, - title: 'For All Mankind', - releaseDate: '1989-11-01', - }, - { - id: 576017, - title: 'For Sama', - releaseDate: '2019-07-26', - }, - { - id: 13930, - title: 'For the Birds', - releaseDate: '2000-11-02', - }, - { - id: 338544, - title: 'For the Love of Spock', - releaseDate: '2016-09-09', - }, - { - id: 830, - title: 'Forbidden Planet', - releaseDate: '1956-03-02', - }, - { - id: 359724, - title: 'Ford v Ferrari', - releaseDate: '2019-11-13', - }, - { - id: 417261, - title: 'Forever My Girl', - releaseDate: '2018-01-26', - }, - { - id: 31451, - title: 'Forever Strong', - releaseDate: '2008-09-26', - }, - { - id: 64288, - title: 'Forks Over Knives', - releaseDate: '2011-05-06', - }, - { - id: 13, - title: 'Forrest Gump', - releaseDate: '1994-06-23', - }, - { - id: 37347, - title: 'Fort Apache', - releaseDate: '1948-05-21', - }, - { - id: 6145, - title: 'Fracture', - releaseDate: '2007-04-19', - }, - { - id: 121986, - title: 'Frances Ha', - releaseDate: '2013-05-17', - }, - { - id: 1062722, - title: 'Frankenstein', - releaseDate: '2025-10-17', - }, - { - id: 3035, - title: 'Frankenstein', - releaseDate: '1931-11-21', - }, - { - id: 136, - title: 'Freaks', - releaseDate: '1932-01-01', - }, - { - id: 550988, - title: 'Free Guy', - releaseDate: '2021-08-11', - }, - { - id: 515042, - title: 'Free Solo', - releaseDate: '2018-09-28', - }, - { - id: 1646, - title: 'Freedom Writers', - releaseDate: '2007-01-05', - }, - { - id: 306745, - title: 'Freeheld', - releaseDate: '2015-10-02', - }, - { - id: 573, - title: 'Frenzy', - releaseDate: '1972-05-25', - }, - { - id: 10559, - title: 'Frequency', - releaseDate: '2000-04-28', - }, - { - id: 13815, - title: 'Fresh', - releaseDate: '1994-06-15', - }, - { - id: 1360, - title: 'Frida', - releaseDate: '2002-08-29', - }, - { - id: 10634, - title: 'Friday', - releaseDate: '1995-04-26', - }, - { - id: 1633, - title: 'Fried Green Tomatoes', - releaseDate: '1991-12-27', - }, - { - id: 691179, - title: 'Friends: The Reunion', - releaseDate: '2021-05-27', - }, - { - id: 11797, - title: 'Fright Night', - releaseDate: '1985-08-02', - }, - { - id: 755, - title: 'From Dusk Till Dawn', - releaseDate: '1996-01-19', - }, - { - id: 11426, - title: 'From Here to Eternity', - releaseDate: '1953-08-28', - }, - { - id: 657, - title: 'From Russia with Love', - releaseDate: '1963-10-10', - }, - { - id: 63193, - title: 'Front of the Class', - releaseDate: '2008-12-07', - }, - { - id: 11499, - title: 'Frost/Nixon', - releaseDate: '2008-10-15', - }, - { - id: 109445, - title: 'Frozen', - releaseDate: '2013-11-20', - }, - { - id: 330457, - title: 'Frozen II', - releaseDate: '2019-11-20', - }, - { - id: 157354, - title: 'Fruitvale Station', - releaseDate: '2013-07-26', - }, - { - id: 600, - title: 'Full Metal Jacket', - releaseDate: '1987-06-26', - }, - { - id: 298582, - title: 'Full Out', - releaseDate: '2015-09-11', - }, - { - id: 16085, - title: 'Funny Girl', - releaseDate: '1968-09-19', - }, - { - id: 786892, - title: 'Furiosa: A Mad Max Saga', - releaseDate: '2024-05-22', - }, - { - id: 168259, - title: 'Furious 7', - releaseDate: '2015-04-01', - }, - { - id: 228150, - title: 'Fury', - releaseDate: '2014-10-15', - }, - { - id: 14615, - title: 'Fury', - releaseDate: '1936-06-05', - }, - { - id: 7249, - title: "Futurama: Bender's Big Score", - releaseDate: '2007-11-27', - }, - { - id: 15060, - title: 'Futurama: Into the Wild Green Yonder', - releaseDate: '2009-02-06', - }, - { - id: 656968, - title: "FX's A Christmas Carol", - releaseDate: '2019-12-19', - }, - { - id: 696374, - title: "Gabriel's Inferno", - releaseDate: '2020-05-29', - }, - { - id: 724089, - title: "Gabriel's Inferno: Part II", - releaseDate: '2020-07-31', - }, - { - id: 761053, - title: "Gabriel's Inferno: Part III", - releaseDate: '2020-11-19', - }, - { - id: 850356, - title: "Gabriel's Rapture: Part I", - releaseDate: '2021-11-24', - }, - { - id: 472424, - title: 'Gaga: Five Foot Two', - releaseDate: '2017-09-21', - }, - { - id: 926, - title: 'Galaxy Quest', - releaseDate: '1999-12-25', - }, - { - id: 11646, - title: 'Gallipoli', - releaseDate: '1981-08-13', - }, - { - id: 591278, - title: 'Game of Thrones: The Last Watch', - releaseDate: '2019-05-26', - }, - { - id: 783, - title: 'Gandhi', - releaseDate: '1982-12-01', - }, - { - id: 3131, - title: 'Gangs of New York', - releaseDate: '2002-12-14', - }, - { - id: 401, - title: 'Garden State', - releaseDate: '2004-07-28', - }, - { - id: 40663, - title: 'Gasland', - releaseDate: '2010-01-24', - }, - { - id: 13528, - title: 'Gaslight', - releaseDate: '1944-05-04', - }, - { - id: 782, - title: 'Gattaca', - releaseDate: '1997-09-07', - }, - { - id: 759, - title: 'Gentlemen Prefer Blondes', - releaseDate: '1953-07-14', - }, - { - id: 13929, - title: "Geri's Game", - releaseDate: '1997-11-24', - }, - { - id: 234567, - title: 'Get a Horse!', - releaseDate: '2013-11-27', - }, - { - id: 419430, - title: 'Get Out', - releaseDate: '2017-02-24', - }, - { - id: 24584, - title: 'Get Real', - releaseDate: '1998-08-16', - }, - { - id: 251, - title: 'Ghost', - releaseDate: '1990-07-13', - }, - { - id: 4816, - title: 'Ghost Dog: The Way of the Samurai', - releaseDate: '1999-10-06', - }, - { - id: 1548, - title: 'Ghost World', - releaseDate: '2001-07-20', - }, - { - id: 620, - title: 'Ghostbusters', - releaseDate: '1984-06-08', - }, - { - id: 425909, - title: 'Ghostbusters: Afterlife', - releaseDate: '2021-11-18', - }, - { - id: 476299, - title: 'Ghostland', - releaseDate: '2018-03-14', - }, - { - id: 37793, - title: 'Ghosts', - releaseDate: '1997-09-04', - }, - { - id: 14533, - title: 'Gia', - releaseDate: '1998-01-31', - }, - { - id: 1712, - title: 'Giant', - releaseDate: '1956-11-08', - }, - { - id: 537681, - title: 'Giant Little Ones', - releaseDate: '2019-01-03', - }, - { - id: 400928, - title: 'Gifted', - releaseDate: '2017-04-07', - }, - { - id: 22683, - title: 'Gifted Hands: The Ben Carson Story', - releaseDate: '2009-02-07', - }, - { - id: 3767, - title: 'Gilda', - releaseDate: '1946-04-25', - }, - { - id: 132, - title: 'Gimme Shelter', - releaseDate: '1970-12-13', - }, - { - id: 801335, - title: 'Girl in the Basement', - releaseDate: '2021-02-27', - }, - { - id: 988046, - title: 'Girl in the Picture', - releaseDate: '2022-07-06', - }, - { - id: 3558, - title: 'Girl, Interrupted', - releaseDate: '1999-12-21', - }, - { - id: 16219, - title: 'Gladiator', - releaseDate: '1992-03-06', - }, - { - id: 98, - title: 'Gladiator', - releaseDate: '2000-05-04', - }, - { - id: 661374, - title: 'Glass Onion: A Knives Out Mystery', - releaseDate: '2022-11-23', - }, - { - id: 67675, - title: 'Glee: The Concert Movie', - releaseDate: '2011-08-11', - }, - { - id: 9504, - title: 'Glengarry Glen Ross', - releaseDate: '1992-09-10', - }, - { - id: 9665, - title: 'Glory', - releaseDate: '1989-12-15', - }, - { - id: 9918, - title: 'Glory Road', - releaseDate: '2006-01-13', - }, - { - id: 428493, - title: "God's Own Country", - releaseDate: '2017-08-31', - }, - { - id: 399566, - title: 'Godzilla vs. Kong', - releaseDate: '2021-03-24', - }, - { - id: 823464, - title: 'Godzilla x Kong: The New Empire', - releaseDate: '2024-03-27', - }, - { - id: 318224, - title: 'Going Clear: Scientology and the Prison of Belief', - releaseDate: '2015-01-25', - }, - { - id: 31511, - title: 'Gold Diggers of 1933', - releaseDate: '1933-05-27', - }, - { - id: 658, - title: 'Goldfinger', - releaseDate: '1964-09-20', - }, - { - id: 4771, - title: 'Gone Baby Gone', - releaseDate: '2007-09-18', - }, - { - id: 210577, - title: 'Gone Girl', - releaseDate: '2014-10-01', - }, - { - id: 831223, - title: 'Gone Mom: The Disappearance of Jennifer Dulos', - releaseDate: '2021-06-05', - }, - { - id: 770, - title: 'Gone with the Wind', - releaseDate: '1939-12-15', - }, - { - id: 1114967, - title: 'Good Fortune', - releaseDate: '2025-10-14', - }, - { - id: 801, - title: 'Good Morning, Vietnam', - releaseDate: '1987-12-23', - }, - { - id: 3291, - title: 'Good Night, and Good Luck.', - releaseDate: '2005-09-16', - }, - { - id: 429200, - title: 'Good Time', - releaseDate: '2017-08-11', - }, - { - id: 489, - title: 'Good Will Hunting', - releaseDate: '1997-12-05', - }, - { - id: 418680, - title: 'Goodbye Christopher Robin', - releaseDate: '2017-09-29', - }, - { - id: 769, - title: 'GoodFellas', - releaseDate: '1990-09-12', - }, - { - id: 10130, - title: 'Gorillas in the Mist', - releaseDate: '1988-09-23', - }, - { - id: 13223, - title: 'Gran Torino', - releaseDate: '2008-12-12', - }, - { - id: 980489, - title: 'Gran Turismo', - releaseDate: '2023-08-09', - }, - { - id: 20379, - title: 'Grand Prix', - releaseDate: '1966-12-21', - }, - { - id: 49047, - title: 'Gravity', - releaseDate: '2013-10-03', - }, - { - id: 621, - title: 'Grease', - releaseDate: '1978-06-16', - }, - { - id: 348089, - title: 'Grease Live', - releaseDate: '2016-01-31', - }, - { - id: 14320, - title: 'Great Expectations', - releaseDate: '1946-12-26', - }, - { - id: 1405, - title: 'Greed', - releaseDate: '1924-12-04', - }, - { - id: 490132, - title: 'Green Book', - releaseDate: '2018-11-16', - }, - { - id: 8923, - title: 'Green Street Hooligans', - releaseDate: '2005-09-09', - }, - { - id: 524047, - title: 'Greenland', - releaseDate: '2020-07-29', - }, - { - id: 927, - title: 'Gremlins', - releaseDate: '1984-06-08', - }, - { - id: 17346, - title: 'Grey Gardens', - releaseDate: '1976-02-19', - }, - { - id: 516486, - title: 'Greyhound', - releaseDate: '2020-07-09', - }, - { - id: 9766, - title: 'Gridiron Gang', - releaseDate: '2006-09-15', - }, - { - id: 15534, - title: 'Griffin & Phoenix', - releaseDate: '2006-09-12', - }, - { - id: 501, - title: 'Grizzly Man', - releaseDate: '2005-08-12', - }, - { - id: 1010821, - title: 'Groot Takes a Bath', - releaseDate: '2022-08-10', - }, - { - id: 1010818, - title: "Groot's First Steps", - releaseDate: '2022-08-10', - }, - { - id: 1010820, - title: "Groot's Pursuit", - releaseDate: '2022-08-10', - }, - { - id: 137, - title: 'Groundhog Day', - releaseDate: '1993-02-11', - }, - { - id: 118340, - title: 'Guardians of the Galaxy', - releaseDate: '2014-07-30', - }, - { - id: 283995, - title: 'Guardians of the Galaxy Vol. 2', - releaseDate: '2017-04-19', - }, - { - id: 447365, - title: 'Guardians of the Galaxy Vol. 3', - releaseDate: '2023-05-03', - }, - { - id: 1879, - title: "Guess Who's Coming to Dinner", - releaseDate: '1967-12-11', - }, - { - id: 555604, - title: "Guillermo del Toro's Pinocchio", - releaseDate: '2022-11-09', - }, - { - id: 18671, - title: 'Gun Crazy', - releaseDate: '1950-01-20', - }, - { - id: 22201, - title: 'Gunfight at the O.K. Corral', - releaseDate: '1957-05-30', - }, - { - id: 242575, - title: 'Good Day, Ramon', - releaseDate: '2013-10-21', - }, - { - id: 882569, - title: "Guy Ritchie's The Covenant", - releaseDate: '2023-04-19', - }, - { - id: 28178, - title: "Hachi: A Dog's Tale", - releaseDate: '2009-06-08', - }, - { - id: 324786, - title: 'Hacksaw Ridge', - releaseDate: '2016-10-07', - }, - { - id: 10654, - title: 'Hair', - releaseDate: '1979-03-15', - }, - { - id: 589739, - title: 'Hair Love', - releaseDate: '2019-08-14', - }, - { - id: 409447, - title: 'Hairspray Live!', - releaseDate: '2016-12-07', - }, - { - id: 652962, - title: 'Half Brothers', - releaseDate: '2020-12-04', - }, - { - id: 948, - title: 'Halloween', - releaseDate: '1978-10-24', - }, - { - id: 573531, - title: 'Halo Legends', - releaseDate: '2010-02-16', - }, - { - id: 23383, - title: 'Hamlet', - releaseDate: '1948-12-10', - }, - { - id: 10549, - title: 'Hamlet', - releaseDate: '1996-12-25', - }, - { - id: 412202, - title: 'Handsome Devil', - releaseDate: '2017-02-15', - }, - { - id: 5143, - title: 'Hannah and Her Sisters', - releaseDate: '1986-02-07', - }, - { - id: 529531, - title: 'Hannah Gadsby: Nanette', - releaseDate: '2018-06-19', - }, - { - id: 520172, - title: 'Happiest Season', - releaseDate: '2020-11-26', - }, - { - id: 10683, - title: 'Happiness', - releaseDate: '1998-10-11', - }, - { - id: 721656, - title: 'Happy Halloween, Scooby-Doo!', - releaseDate: '2020-10-06', - }, - { - id: 343, - title: 'Harold and Maude', - releaseDate: '1971-12-20', - }, - { - id: 506528, - title: 'Harriet', - releaseDate: '2019-11-01', - }, - { - id: 899082, - title: 'Harry Potter 20th Anniversary: Return to Hogwarts', - releaseDate: '2022-01-01', - }, - { - id: 672, - title: 'Harry Potter and the Chamber of Secrets', - releaseDate: '2002-11-13', - }, - { - id: 12444, - title: 'Harry Potter and the Deathly Hallows: Part 1', - releaseDate: '2010-11-17', - }, - { - id: 12445, - title: 'Harry Potter and the Deathly Hallows: Part 2', - releaseDate: '2011-07-12', - }, - { - id: 674, - title: 'Harry Potter and the Goblet of Fire', - releaseDate: '2005-11-16', - }, - { - id: 767, - title: 'Harry Potter and the Half-Blood Prince', - releaseDate: '2009-07-15', - }, - { - id: 675, - title: 'Harry Potter and the Order of the Phoenix', - releaseDate: '2007-07-08', - }, - { - id: 671, - title: "Harry Potter and the Philosopher's Stone", - releaseDate: '2001-11-16', - }, - { - id: 673, - title: 'Harry Potter and the Prisoner of Azkaban', - releaseDate: '2004-05-31', - }, - { - id: 11787, - title: 'Harvey', - releaseDate: '1950-12-04', - }, - { - id: 21131, - title: 'Harvie Krumpet', - releaseDate: '2003-10-23', - }, - { - id: 34843, - title: 'Hawking', - releaseDate: '2004-12-10', - }, - { - id: 4539, - title: "Hearts of Darkness: A Filmmaker's Apocalypse", - releaseDate: '1991-11-27', - }, - { - id: 949, - title: 'Heat', - releaseDate: '1995-12-15', - }, - { - id: 2640, - title: 'Heathers', - releaseDate: '1989-03-31', - }, - { - id: 13403, - title: 'Hedwig and the Angry Inch', - releaseDate: '2001-07-20', - }, - { - id: 338766, - title: 'Hell or High Water', - releaseDate: '2016-08-11', - }, - { - id: 13348, - title: 'Helvetica', - releaseDate: '2007-09-12', - }, - { - id: 926670, - title: 'Henry Danger: The Movie', - releaseDate: '2025-01-17', - }, - { - id: 10705, - title: 'Henry V', - releaseDate: '1989-10-05', - }, - { - id: 152601, - title: 'Her', - releaseDate: '2013-12-18', - }, - { - id: 11970, - title: 'Hercules', - releaseDate: '1997-06-13', - }, - { - id: 493922, - title: 'Hereditary', - releaseDate: '2018-06-07', - }, - { - id: 439058, - title: 'Hey Arnold! The Jungle Movie', - releaseDate: '2018-04-26', - }, - { - id: 381284, - title: 'Hidden Figures', - releaseDate: '2016-12-10', - }, - { - id: 243, - title: 'High Fidelity', - releaseDate: '2000-03-17', - }, - { - id: 288, - title: 'High Noon', - releaseDate: '1952-06-09', - }, - { - id: 11901, - title: 'High Plains Drifter', - releaseDate: '1973-04-19', - }, - { - id: 27725, - title: 'High Sierra', - releaseDate: '1941-01-23', - }, - { - id: 382399, - title: 'High Strung', - releaseDate: '2016-04-08', - }, - { - id: 540158, - title: 'High Strung Free Dance', - releaseDate: '2018-09-13', - }, - { - id: 789708, - title: 'Hilda and the Mountain King', - releaseDate: '2021-12-30', - }, - { - id: 3085, - title: 'His Girl Friday', - releaseDate: '1940-01-18', - }, - { - id: 339751, - title: 'Hitchcock/Truffaut', - releaseDate: '2015-09-05', - }, - { - id: 16410, - title: "Hobson's Choice", - releaseDate: '1954-04-19', - }, - { - id: 10439, - title: 'Hocus Pocus', - releaseDate: '1993-07-16', - }, - { - id: 642885, - title: 'Hocus Pocus 2', - releaseDate: '2022-09-27', - }, - { - id: 337960, - title: 'Holding the Man', - releaseDate: '2015-08-27', - }, - { - id: 16274, - title: 'Holiday', - releaseDate: '1938-05-26', - }, - { - id: 13485, - title: 'Holiday Inn', - releaseDate: '1942-07-10', - }, - { - id: 27945, - title: 'Hombre', - releaseDate: '1967-03-21', - }, - { - id: 771, - title: 'Home Alone', - releaseDate: '1990-11-16', - }, - { - id: 593691, - title: 'HOMECOMING: A film by Beyoncé', - releaseDate: '2019-04-16', - }, - { - id: 512263, - title: 'Honey Boy', - releaseDate: '2019-09-28', - }, - { - id: 929170, - title: 'Honor Society', - releaseDate: '2022-07-23', - }, - { - id: 14275, - title: 'Hoop Dreams', - releaseDate: '1994-09-12', - }, - { - id: 5693, - title: 'Hoosiers', - releaseDate: '1986-11-14', - }, - { - id: 4638, - title: 'Hot Fuzz', - releaseDate: '2007-02-14', - }, - { - id: 416144, - title: 'Hotel Mumbai', - releaseDate: '2019-03-14', - }, - { - id: 205, - title: 'Hotel Rwanda', - releaseDate: '2004-12-22', - }, - { - id: 585083, - title: 'Hotel Transylvania: Transformania', - releaseDate: '2022-01-31', - }, - { - id: 11093, - title: 'House of Sand and Fog', - releaseDate: '2003-12-19', - }, - { - id: 43266, - title: 'How Green Was My Valley', - releaseDate: '1941-10-28', - }, - { - id: 13377, - title: 'How the Grinch Stole Christmas!', - releaseDate: '1966-12-18', - }, - { - id: 3001, - title: 'How to Steal a Million', - releaseDate: '1966-07-13', - }, - { - id: 1087192, - title: 'How to Train Your Dragon', - releaseDate: '2025-06-06', - }, - { - id: 10191, - title: 'How to Train Your Dragon', - releaseDate: '2010-03-18', - }, - { - id: 82702, - title: 'How to Train Your Dragon 2', - releaseDate: '2014-06-05', - }, - { - id: 638507, - title: 'How to Train Your Dragon: Homecoming', - releaseDate: '2019-12-03', - }, - { - id: 166428, - title: 'How to Train Your Dragon: The Hidden World', - releaseDate: '2019-01-03', - }, - { - id: 24748, - title: 'Hud', - releaseDate: '1963-05-28', - }, - { - id: 44826, - title: 'Hugo', - releaseDate: '2011-11-22', - }, - { - id: 15257, - title: 'Hulk vs. Wolverine', - releaseDate: '2009-01-27', - }, - { - id: 1019939, - title: 'Hundreds of Beavers', - releaseDate: '2024-01-26', - }, - { - id: 10360, - title: 'Hunger', - releaseDate: '2008-05-15', - }, - { - id: 371645, - title: 'Hunt for the Wilderpeople', - releaseDate: '2016-01-22', - }, - { - id: 10299, - title: 'Hush... Hush, Sweet Charlotte', - releaseDate: '1964-12-16', - }, - { - id: 705861, - title: 'Hustle', - releaseDate: '2022-06-03', - }, - { - id: 10476, - title: 'Hustle & Flow', - releaseDate: '2005-07-22', - }, - { - id: 419546, - title: 'HyperNormalisation', - releaseDate: '2016-10-25', - }, - { - id: 29740, - title: 'I Am a Fugitive from a Chain Gang', - releaseDate: '1932-11-09', - }, - { - id: 84383, - title: 'I Am Bruce Lee', - releaseDate: '2012-02-09', - }, - { - id: 450945, - title: 'I Am Heath Ledger', - releaseDate: '2017-04-23', - }, - { - id: 6479, - title: 'I Am Legend', - releaseDate: '2007-12-12', - }, - { - id: 411019, - title: 'I Am Not Your Negro', - releaseDate: '2017-02-03', - }, - { - id: 10950, - title: 'I Am Sam', - releaseDate: '2001-12-28', - }, - { - id: 879805, - title: 'I Am: Celine Dion', - releaseDate: '2024-06-18', - }, - { - id: 470878, - title: 'I Can Only Imagine', - releaseDate: '2018-02-14', - }, - { - id: 31216, - title: "I Can't Think Straight", - releaseDate: '2008-06-01', - }, - { - id: 30159, - title: 'I Confess', - releaseDate: '1953-02-12', - }, - { - id: 56137, - title: "I Know Where I'm Going!", - releaseDate: '1945-11-16', - }, - { - id: 244267, - title: 'I Origins', - releaseDate: '2014-07-18', - }, - { - id: 585244, - title: 'I Still Believe', - releaseDate: '2020-03-12', - }, - { - id: 37058, - title: "I'm Here", - releaseDate: '2010-03-01', - }, - { - id: 409502, - title: "I'm Not Ashamed", - releaseDate: '2016-10-21', - }, - { - id: 374473, - title: 'I, Daniel Blake', - releaseDate: '2016-10-21', - }, - { - id: 389015, - title: 'I, Tonya', - releaseDate: '2017-12-07', - }, - { - id: 432976, - title: 'Icarus', - releaseDate: '2017-06-03', - }, - { - id: 425, - title: 'Ice Age', - releaseDate: '2002-03-14', - }, - { - id: 2832, - title: 'Identity', - releaseDate: '2003-04-25', - }, - { - id: 713776, - title: 'If Anything Happens I Love You', - releaseDate: '2020-03-07', - }, - { - id: 249164, - title: 'If I Stay', - releaseDate: '2014-08-21', - }, - { - id: 15775, - title: 'If Only', - releaseDate: '2004-01-23', - }, - { - id: 14794, - title: 'if....', - releaseDate: '1968-12-19', - }, - { - id: 1544, - title: 'Imagine Me & You', - releaseDate: '2006-01-27', - }, - { - id: 34148, - title: 'Imitation of Life', - releaseDate: '1959-04-09', - }, - { - id: 13701, - title: 'Immortal Beloved', - releaseDate: '1994-12-16', - }, - { - id: 455661, - title: 'In a Heartbeat', - releaseDate: '2017-06-01', - }, - { - id: 17057, - title: 'In a Lonely Place', - releaseDate: '1950-05-17', - }, - { - id: 10511, - title: 'In America', - releaseDate: '2003-09-22', - }, - { - id: 8321, - title: 'In Bruges', - releaseDate: '2008-02-08', - }, - { - id: 18900, - title: 'In Cold Blood', - releaseDate: '1967-12-15', - }, - { - id: 10633, - title: 'In the Heat of the Night', - releaseDate: '1967-08-02', - }, - { - id: 467909, - title: 'In the Heights', - releaseDate: '2021-06-10', - }, - { - id: 19833, - title: 'In the Loop', - releaseDate: '2009-01-22', - }, - { - id: 2654, - title: 'In the Mouth of Madness', - releaseDate: '1995-02-03', - }, - { - id: 7984, - title: 'In the Name of the Father', - releaseDate: '1993-12-12', - }, - { - id: 226448, - title: 'In Your Eyes', - releaseDate: '2014-04-20', - }, - { - id: 27205, - title: 'Inception', - releaseDate: '2010-07-15', - }, - { - id: 64956, - title: 'Inception: The Cobol Job', - releaseDate: '2010-12-07', - }, - { - id: 260513, - title: 'Incredibles 2', - releaseDate: '2018-06-14', - }, - { - id: 89, - title: 'Indiana Jones and the Last Crusade', - releaseDate: '1989-05-24', - }, - { - id: 87, - title: 'Indiana Jones and the Temple of Doom', - releaseDate: '1984-05-23', - }, - { - id: 80215, - title: 'Indie Game: The Movie', - releaseDate: '2012-05-18', - }, - { - id: 16869, - title: 'Inglourious Basterds', - releaseDate: '2009-08-02', - }, - { - id: 1908, - title: 'Inherit the Wind', - releaseDate: '1960-07-07', - }, - { - id: 831405, - title: 'Injustice', - releaseDate: '2021-10-09', - }, - { - id: 1730, - title: 'Inland Empire', - releaseDate: '2006-12-06', - }, - { - id: 406785, - title: 'Inner Workings', - releaseDate: '2016-11-23', - }, - { - id: 31165, - title: "Inside I'm Dancing", - releaseDate: '2004-10-15', - }, - { - id: 44639, - title: 'Inside Job', - releaseDate: '2010-10-08', - }, - { - id: 86829, - title: 'Inside Llewyn Davis', - releaseDate: '2013-10-18', - }, - { - id: 388, - title: 'Inside Man', - releaseDate: '2006-03-17', - }, - { - id: 150540, - title: 'Inside Out', - releaseDate: '2015-06-17', - }, - { - id: 1022789, - title: 'Inside Out 2', - releaseDate: '2024-06-11', - }, - { - id: 1003180, - title: 'Inside the Mind of a Cat', - releaseDate: '2022-08-18', - }, - { - id: 491418, - title: 'Instant Family', - releaseDate: '2018-11-13', - }, - { - id: 20312, - title: 'Interstate 60', - releaseDate: '2002-04-13', - }, - { - id: 11049, - title: 'Interstella 5555: The 5tory of the 5ecret 5tar 5ystem', - releaseDate: '2003-05-28', - }, - { - id: 157336, - title: 'Interstellar', - releaseDate: '2014-11-05', - }, - { - id: 301959, - title: "Interstellar: Nolan's Odyssey", - releaseDate: '2014-11-05', - }, - { - id: 628, - title: 'Interview with the Vampire', - releaseDate: '1994-11-11', - }, - { - id: 5915, - title: 'Into the Wild', - releaseDate: '2007-09-21', - }, - { - id: 3059, - title: "Intolerance: Love's Struggle Throughout the Ages", - releaseDate: '1916-09-04', - }, - { - id: 472983, - title: 'Invader Zim: Enter the Florpus', - releaseDate: '2019-08-16', - }, - { - id: 11850, - title: 'Invasion of the Body Snatchers', - releaseDate: '1978-12-20', - }, - { - id: 11549, - title: 'Invasion of the Body Snatchers', - releaseDate: '1956-02-05', - }, - { - id: 22954, - title: 'Invictus', - releaseDate: '2009-12-11', - }, - { - id: 11652, - title: 'Invincible', - releaseDate: '2006-08-25', - }, - { - id: 2690, - title: 'Irma la Douce', - releaseDate: '1963-06-05', - }, - { - id: 1726, - title: 'Iron Man', - releaseDate: '2008-04-30', - }, - { - id: 399174, - title: 'Isle of Dogs', - releaseDate: '2018-03-23', - }, - { - id: 346364, - title: 'It', - releaseDate: '2017-09-06', - }, - { - id: 3078, - title: 'It Happened One Night', - releaseDate: '1934-02-22', - }, - { - id: 22492, - title: 'It Might Get Loud', - releaseDate: '2008-09-05', - }, - { - id: 298016, - title: "It's a SpongeBob Christmas!", - releaseDate: '2012-09-19', - }, - { - id: 1585, - title: "It's a Wonderful Life", - releaseDate: '1946-12-20', - }, - { - id: 489412, - title: "It's Such a Beautiful Day", - releaseDate: '2012-08-24', - }, - { - id: 13353, - title: "It's the Great Pumpkin, Charlie Brown", - releaseDate: '1966-10-27', - }, - { - id: 13932, - title: 'Jack-Jack Attack', - releaseDate: '2005-03-15', - }, - { - id: 184, - title: 'Jackie Brown', - releaseDate: '1997-12-25', - }, - { - id: 2291, - title: "Jacob's Ladder", - releaseDate: '1990-11-02', - }, - { - id: 38684, - title: 'Jane Eyre', - releaseDate: '2011-03-11', - }, - { - id: 321974, - title: 'Janis: Little Girl Blue', - releaseDate: '2015-09-09', - }, - { - id: 11533, - title: 'Jason and the Argonauts', - releaseDate: '1963-06-13', - }, - { - id: 578, - title: 'Jaws', - releaseDate: '1975-06-20', - }, - { - id: 11943, - title: 'Jeremiah Johnson', - releaseDate: '1972-09-10', - }, - { - id: 843847, - title: 'Jerry & Marge Go Large', - releaseDate: '2022-10-20', - }, - { - id: 45139, - title: 'Jesus', - releaseDate: '1979-10-19', - }, - { - id: 12545, - title: 'Jesus Christ Superstar', - releaseDate: '1973-08-15', - }, - { - id: 820, - title: 'JFK', - releaseDate: '1991-12-20', - }, - { - id: 469019, - title: 'Jim & Andy: The Great Beyond', - releaseDate: '2017-09-05', - }, - { - id: 289333, - title: 'Jim Jefferies: Bare', - releaseDate: '2014-08-29', - }, - { - id: 404022, - title: 'Jim Jefferies: Freedumb', - releaseDate: '2016-07-01', - }, - { - id: 80767, - title: 'Jiro Dreams of Sushi', - releaseDate: '2011-06-11', - }, - { - id: 191720, - title: "Jodorowsky's Dune", - releaseDate: '2013-08-30', - }, - { - id: 520594, - title: 'John Mulaney: Kid Gorgeous at Radio City', - releaseDate: '2018-05-01', - }, - { - id: 86705, - title: 'John Mulaney: New in Town', - releaseDate: '2012-01-31', - }, - { - id: 367735, - title: 'John Mulaney: The Comeback Kid', - releaseDate: '2015-11-13', - }, - { - id: 8470, - title: 'John Q', - releaseDate: '2002-02-15', - }, - { - id: 245891, - title: 'John Wick', - releaseDate: '2014-10-22', - }, - { - id: 324552, - title: 'John Wick: Chapter 2', - releaseDate: '2017-02-08', - }, - { - id: 458156, - title: 'John Wick: Chapter 3 - Parabellum', - releaseDate: '2019-05-15', - }, - { - id: 603692, - title: 'John Wick: Chapter 4', - releaseDate: '2023-03-22', - }, - { - id: 16328, - title: 'Johnny Got His Gun', - releaseDate: '1971-08-04', - }, - { - id: 26596, - title: 'Johnny Guitar', - releaseDate: '1954-05-26', - }, - { - id: 515001, - title: 'Jojo Rabbit', - releaseDate: '2019-10-18', - }, - { - id: 475557, - title: 'Joker', - releaseDate: '2019-10-01', - }, - { - id: 2405, - title: 'Joseph', - releaseDate: '1995-04-10', - }, - { - id: 583406, - title: 'Judas and the Black Messiah', - releaseDate: '2021-02-12', - }, - { - id: 821, - title: 'Judgment at Nuremberg', - releaseDate: '1961-12-18', - }, - { - id: 16136, - title: 'Juice', - releaseDate: '1992-01-17', - }, - { - id: 1072371, - title: 'Jules', - releaseDate: '2023-08-10', - }, - { - id: 18019, - title: 'Julius Caesar', - releaseDate: '1953-06-04', - }, - { - id: 8844, - title: 'Jumanji', - releaseDate: '1995-12-15', - }, - { - id: 451048, - title: 'Jungle Cruise', - releaseDate: '2021-07-28', - }, - { - id: 7326, - title: 'Juno', - releaseDate: '2007-12-05', - }, - { - id: 329, - title: 'Jurassic Park', - releaseDate: '1993-06-11', - }, - { - id: 522212, - title: 'Just Mercy', - releaseDate: '2019-12-25', - }, - { - id: 408220, - title: 'Justice League Dark', - releaseDate: '2017-01-24', - }, - { - id: 618344, - title: 'Justice League Dark: Apokolips War', - releaseDate: '2020-05-05', - }, - { - id: 379291, - title: 'Justice League vs. Teen Titans', - releaseDate: '2016-03-26', - }, - { - id: 1155089, - title: 'Justice League: Crisis on Infinite Earths Part One', - releaseDate: '2024-01-08', - }, - { - id: 1209290, - title: 'Justice League: Crisis on Infinite Earths Part Three', - releaseDate: '2024-07-15', - }, - { - id: 30061, - title: 'Justice League: Crisis on Two Earths', - releaseDate: '2010-02-23', - }, - { - id: 76589, - title: 'Justice League: Doom', - releaseDate: '2012-02-28', - }, - { - id: 323027, - title: 'Justice League: Gods and Monsters', - releaseDate: '2015-06-18', - }, - { - id: 183011, - title: 'Justice League: The Flashpoint Paradox', - releaseDate: '2013-07-30', - }, - { - id: 217993, - title: 'Justice League: War', - releaseDate: '2014-01-21', - }, - { - id: 736069, - title: 'Justice Society: World War II', - releaseDate: '2021-04-27', - }, - { - id: 229296, - title: "Justin Bieber's Believe", - releaseDate: '2013-12-19', - }, - { - id: 616584, - title: 'K-12', - releaseDate: '2019-09-05', - }, - { - id: 167, - title: 'K-PAX', - releaseDate: '2001-10-26', - }, - { - id: 1011477, - title: 'Karate Kid: Legends', - releaseDate: '2025-05-08', - }, - { - id: 101267, - title: 'Katy Perry: Part of Me', - releaseDate: '2012-06-28', - }, - { - id: 14859, - title: 'Keith', - releaseDate: '2008-09-13', - }, - { - id: 11589, - title: "Kelly's Heroes", - releaseDate: '1970-06-22', - }, - { - id: 13384, - title: 'Kes', - releaseDate: '1970-04-03', - }, - { - id: 27866, - title: "Kevin Hart: I'm a Grown Little Man", - releaseDate: '2009-02-03', - }, - { - id: 42189, - title: 'Kevin Hart: Seriously Funny', - releaseDate: '2010-07-20', - }, - { - id: 11016, - title: 'Key Largo', - releaseDate: '1948-07-16', - }, - { - id: 23483, - title: 'Kick-Ass', - releaseDate: '2010-03-26', - }, - { - id: 24914, - title: "Kid's Story", - releaseDate: '2003-06-03', - }, - { - id: 414419, - title: 'Kill Bill: The Whole Bloody Affair', - releaseDate: '2011-03-27', - }, - { - id: 24, - title: 'Kill Bill: Vol. 1', - releaseDate: '2003-10-10', - }, - { - id: 393, - title: 'Kill Bill: Vol. 2', - releaseDate: '2004-04-16', - }, - { - id: 1134055, - title: 'Kill Shot', - releaseDate: '2023-08-15', - }, - { - id: 157370, - title: 'Kill Your Darlings', - releaseDate: '2013-10-16', - }, - { - id: 24528, - title: 'Killer Bean Forever', - releaseDate: '2008-09-05', - }, - { - id: 466420, - title: 'Killers of the Flower Moon', - releaseDate: '2023-10-18', - }, - { - id: 11898, - title: 'Kind Hearts and Coronets', - releaseDate: '1949-06-21', - }, - { - id: 244, - title: 'King Kong', - releaseDate: '1933-03-15', - }, - { - id: 36362, - title: 'King of Kings', - releaseDate: '1961-10-11', - }, - { - id: 614917, - title: 'King Richard', - releaseDate: '2021-11-18', - }, - { - id: 1495, - title: 'Kingdom of Heaven', - releaseDate: '2005-05-03', - }, - { - id: 653346, - title: 'Kingdom of the Planet of the Apes', - releaseDate: '2024-05-08', - }, - { - id: 207703, - title: 'Kingsman: The Secret Service', - releaseDate: '2015-01-24', - }, - { - id: 440596, - title: 'Kiss and Cry', - releaseDate: '2017-02-10', - }, - { - id: 5236, - title: 'Kiss Kiss Bang Bang', - releaseDate: '2005-09-14', - }, - { - id: 18030, - title: 'Kiss Me Deadly', - releaseDate: '1955-04-28', - }, - { - id: 53021, - title: 'Kiss Me, Stupid', - releaseDate: '1964-12-22', - }, - { - id: 21454, - title: 'Kiss of Death', - releaseDate: '1947-08-27', - }, - { - id: 11703, - title: 'Kiss of the Spider Woman', - releaseDate: '1985-07-26', - }, - { - id: 574074, - title: 'Kitbull', - releaseDate: '2019-01-18', - }, - { - id: 508965, - title: 'Klaus', - releaseDate: '2019-11-08', - }, - { - id: 13928, - title: 'Knick Knack', - releaseDate: '1989-11-23', - }, - { - id: 546554, - title: 'Knives Out', - releaseDate: '2019-11-27', - }, - { - id: 565312, - title: 'Knock Down the House', - releaseDate: '2019-01-27', - }, - { - id: 11314, - title: 'Koyaanisqatsi', - releaseDate: '1983-04-27', - }, - { - id: 803796, - title: 'KPop Demon Hunters', - releaseDate: '2025-06-20', - }, - { - id: 12102, - title: 'Kramer vs. Kramer', - releaseDate: '1979-12-07', - }, - { - id: 313297, - title: 'Kubo and the Two Strings', - releaseDate: '2016-08-18', - }, - { - id: 9502, - title: 'Kung Fu Panda', - releaseDate: '2008-06-04', - }, - { - id: 49444, - title: 'Kung Fu Panda 2', - releaseDate: '2011-05-25', - }, - { - id: 1011985, - title: 'Kung Fu Panda 4', - releaseDate: '2024-03-02', - }, - { - id: 251516, - title: 'Kung Fury', - releaseDate: '2015-05-22', - }, - { - id: 2118, - title: 'L.A. Confidential', - releaseDate: '1997-09-19', - }, - { - id: 16620, - title: 'La Bamba', - releaseDate: '1987-07-24', - }, - { - id: 313369, - title: 'La La Land', - releaseDate: '2016-12-01', - }, - { - id: 83564, - title: 'La luna', - releaseDate: '2012-02-10', - }, - { - id: 989596, - title: 'The Braid', - releaseDate: '2023-11-29', - }, - { - id: 130150, - title: 'Labor Day', - releaseDate: '2013-12-27', - }, - { - id: 13597, - title: 'Labyrinth', - releaseDate: '1986-06-27', - }, - { - id: 512895, - title: 'Lady and the Tramp', - releaseDate: '2019-11-12', - }, - { - id: 10340, - title: 'Lady and the Tramp', - releaseDate: '1955-06-22', - }, - { - id: 391713, - title: 'Lady Bird', - releaseDate: '2017-09-01', - }, - { - id: 594530, - title: 'Lamp Life', - releaseDate: '2020-01-31', - }, - { - id: 38884, - title: 'Land and Freedom', - releaseDate: '1995-04-07', - }, - { - id: 969492, - title: 'Land of Bad', - releaseDate: '2024-02-09', - }, - { - id: 6615, - title: 'Lars and the Real Girl', - releaseDate: '2007-10-12', - }, - { - id: 549053, - title: 'Last Christmas', - releaseDate: '2019-11-07', - }, - { - id: 17379, - title: 'Last Holiday', - releaseDate: '2006-01-13', - }, - { - id: 576845, - title: 'Last Night in Soho', - releaseDate: '2021-10-21', - }, - { - id: 14677, - title: 'Last Train from Gun Hill', - releaseDate: '1959-07-29', - }, - { - id: 938614, - title: 'Late Night with the Devil', - releaseDate: '2024-03-19', - }, - { - id: 1939, - title: 'Laura', - releaseDate: '1944-10-11', - }, - { - id: 286192, - title: 'Lava', - releaseDate: '2014-10-10', - }, - { - id: 22803, - title: 'Law Abiding Citizen', - releaseDate: '2009-10-15', - }, - { - id: 82633, - title: 'Lawless', - releaseDate: '2012-08-29', - }, - { - id: 947, - title: 'Lawrence of Arabia', - releaseDate: '1962-12-11', - }, - { - id: 780382, - title: 'The Wolf and the Lion', - releaseDate: '2021-10-13', - }, - { - id: 3009, - title: 'The Trial', - releaseDate: '1962-08-25', - }, - { - id: 14621, - title: 'Lean On Me', - releaseDate: '1989-03-03', - }, - { - id: 17645, - title: 'Leave Her to Heaven', - releaseDate: '1945-12-25', - }, - { - id: 451, - title: 'Leaving Las Vegas', - releaseDate: '1995-10-27', - }, - { - id: 832964, - title: 'Lee', - releaseDate: '2024-09-12', - }, - { - id: 276907, - title: 'Legend', - releaseDate: '2015-09-09', - }, - { - id: 47626, - title: 'Legend of the BoneKnapper Dragon', - releaseDate: '2010-10-14', - }, - { - id: 4476, - title: 'Legends of the Fall', - releaseDate: '1994-12-23', - }, - { - id: 690369, - title: 'LEGO DC: Shazam! Magic and Monsters', - releaseDate: '2020-04-28', - }, - { - id: 461054, - title: 'LEGO Scooby-Doo! Blowout Beach Bash', - releaseDate: '2017-07-11', - }, - { - id: 392536, - title: 'LEGO Scooby-Doo! Haunted Hollywood', - releaseDate: '2016-01-28', - }, - { - id: 394269, - title: 'Lemonade', - releaseDate: '2016-04-23', - }, - { - id: 65218, - title: 'Lemonade Mouth', - releaseDate: '2011-04-15', - }, - { - id: 27094, - title: 'Lenny', - releaseDate: '1974-11-10', - }, - { - id: 1075794, - title: 'Leo', - releaseDate: '2023-11-17', - }, - { - id: 82695, - title: 'Les Misérables', - releaseDate: '2012-12-18', - }, - { - id: 4415, - title: 'Les Misérables', - releaseDate: '1998-05-01', - }, - { - id: 20556, - title: 'Let It Be', - releaseDate: '1970-02-13', - }, - { - id: 941, - title: 'Lethal Weapon', - releaseDate: '1987-03-06', - }, - { - id: 942, - title: 'Lethal Weapon 2', - releaseDate: '1989-07-07', - }, - { - id: 946, - title: 'Letter from an Unknown Woman', - releaseDate: '1948-04-28', - }, - { - id: 1251, - title: 'Letters from Iwo Jima', - releaseDate: '2006-12-09', - }, - { - id: 37056, - title: 'Letters to Juliet', - releaseDate: '2010-05-13', - }, - { - id: 11457, - title: 'Life as a House', - releaseDate: '2001-10-25', - }, - { - id: 66150, - title: 'Life in a Day', - releaseDate: '2011-01-27', - }, - { - id: 447362, - title: 'Life in a Year', - releaseDate: '2020-11-27', - }, - { - id: 446696, - title: 'Life Itself', - releaseDate: '2018-09-21', - }, - { - id: 250766, - title: 'Life Itself', - releaseDate: '2014-07-04', - }, - { - id: 201550, - title: 'Life of a King', - releaseDate: '2013-06-22', - }, - { - id: 583, - title: 'Life of Brian', - releaseDate: '1979-08-17', - }, - { - id: 87827, - title: 'Life of Pi', - releaseDate: '2012-11-20', - }, - { - id: 13321, - title: 'Lifeboat', - releaseDate: '1944-01-28', - }, - { - id: 13060, - title: 'Lifted', - releaseDate: '2006-12-28', - }, - { - id: 38805, - title: 'Lilies of the Field', - releaseDate: '1963-06-04', - }, - { - id: 552524, - title: 'Lilo & Stitch', - releaseDate: '2025-05-17', - }, - { - id: 11544, - title: 'Lilo & Stitch', - releaseDate: '2002-06-21', - }, - { - id: 28971, - title: 'Limelight', - releaseDate: '1952-10-16', - }, - { - id: 51876, - title: 'Limitless', - releaseDate: '2011-03-17', - }, - { - id: 334543, - title: 'Lion', - releaseDate: '2016-11-24', - }, - { - id: 26843, - title: 'Lion of the Desert', - releaseDate: '1981-04-17', - }, - { - id: 319076, - title: 'Listen to Me Marlon', - releaseDate: '2015-07-29', - }, - { - id: 11040, - title: 'Little Big Man', - releaseDate: '1970-12-23', - }, - { - id: 256962, - title: 'Little Boy', - releaseDate: '2015-04-23', - }, - { - id: 1440, - title: 'Little Children', - releaseDate: '2006-10-06', - }, - { - id: 586791, - title: 'Little Fish', - releaseDate: '2021-02-05', - }, - { - id: 38602, - title: 'Little Lord Fauntleroy', - releaseDate: '1980-12-01', - }, - { - id: 16553, - title: 'Little Manhattan', - releaseDate: '2005-09-26', - }, - { - id: 773, - title: 'Little Miss Sunshine', - releaseDate: '2006-07-26', - }, - { - id: 331482, - title: 'Little Women', - releaseDate: '2019-12-25', - }, - { - id: 43436, - title: 'Little Women', - releaseDate: '1949-03-10', - }, - { - id: 9587, - title: 'Little Women', - releaseDate: '1994-12-21', - }, - { - id: 9071, - title: 'Living in Oblivion', - releaseDate: '1995-07-21', - }, - { - id: 100, - title: 'Lock, Stock and Two Smoking Barrels', - releaseDate: '1998-08-28', - }, - { - id: 263115, - title: 'Logan', - releaseDate: '2017-02-28', - }, - { - id: 32389, - title: 'Logorama', - releaseDate: '2009-05-16', - }, - { - id: 9769, - title: 'Lolita', - releaseDate: '1997-09-27', - }, - { - id: 802, - title: 'Lolita', - releaseDate: '1962-06-13', - }, - { - id: 193756, - title: 'Lone Survivor', - releaseDate: '2013-12-24', - }, - { - id: 43002, - title: 'Lonely are the Brave', - releaseDate: '1962-04-26', - }, - { - id: 477331, - title: 'Long Shot', - releaseDate: '2017-09-03', - }, - { - id: 371738, - title: 'Looking: The Movie', - releaseDate: '2016-07-24', - }, - { - id: 1830, - title: 'Lord of War', - releaseDate: '2005-09-16', - }, - { - id: 9787, - title: 'Lords of Dogtown', - releaseDate: '2005-06-03', - }, - { - id: 2007, - title: "Lorenzo's Oil", - releaseDate: '1992-12-30', - }, - { - id: 638, - title: 'Lost Highway', - releaseDate: '1997-01-15', - }, - { - id: 21189, - title: 'Lost in La Mancha', - releaseDate: '2002-02-11', - }, - { - id: 153, - title: 'Lost in Translation', - releaseDate: '2003-09-18', - }, - { - id: 433471, - title: 'Lou', - releaseDate: '2017-06-16', - }, - { - id: 449674, - title: 'Louis C.K. 2017', - releaseDate: '2017-04-04', - }, - { - id: 30969, - title: 'Louis C.K.: Chewed Up', - releaseDate: '2008-10-01', - }, - { - id: 45523, - title: 'Louis C.K.: Hilarious', - releaseDate: '2010-01-26', - }, - { - id: 80379, - title: 'Louis C.K.: Live at the Beacon Theater', - releaseDate: '2011-12-10', - }, - { - id: 321594, - title: 'Louis C.K.: Live at The Comedy Store', - releaseDate: '2015-01-27', - }, - { - id: 185574, - title: 'Louis C.K.: Oh My God', - releaseDate: '2013-04-13', - }, - { - id: 24447, - title: 'Louis C.K.: Shameless', - releaseDate: '2007-01-13', - }, - { - id: 14736, - title: 'Love & Basketball', - releaseDate: '2000-04-21', - }, - { - id: 271714, - title: 'Love & Mercy', - releaseDate: '2015-05-29', - }, - { - id: 43347, - title: 'Love & Other Drugs', - releaseDate: '2010-11-22', - }, - { - id: 508, - title: 'Love Actually', - releaseDate: '2003-09-07', - }, - { - id: 11686, - title: 'Love and Death', - releaseDate: '1975-06-10', - }, - { - id: 590223, - title: 'Love and Monsters', - releaseDate: '2020-10-16', - }, - { - id: 353577, - title: 'Love at First Sight', - releaseDate: '2023-09-15', - }, - { - id: 21542, - title: "Love Don't Co$t a Thing", - releaseDate: '2003-12-12', - }, - { - id: 426203, - title: 'Love Everlasting', - releaseDate: '2016-11-14', - }, - { - id: 18299, - title: 'Love in the Afternoon', - releaseDate: '1957-05-29', - }, - { - id: 200727, - title: 'Love, Rosie', - releaseDate: '2014-10-16', - }, - { - id: 449176, - title: 'Love, Simon', - releaseDate: '2018-02-16', - }, - { - id: 339877, - title: 'Loving Vincent', - releaseDate: '2017-06-22', - }, - { - id: 508943, - title: 'Luca', - releaseDate: '2021-06-17', - }, - { - id: 585511, - title: 'Luck', - releaseDate: '2022-08-05', - }, - { - id: 407449, - title: 'Lucky', - releaseDate: '2017-09-29', - }, - { - id: 186, - title: 'Lucky Number Slevin', - releaseDate: '2006-02-24', - }, - { - id: 770156, - title: 'Lucy Shimmers and the Prince of Peace', - releaseDate: '2020-10-19', - }, - { - id: 3478, - title: 'Ludwig', - releaseDate: '1973-03-07', - }, - { - id: 29592, - title: 'Lust for Life', - releaseDate: '1956-09-15', - }, - { - id: 13925, - title: 'Luxo Jr.', - releaseDate: '1986-08-17', - }, - { - id: 536554, - title: 'M3GAN', - releaseDate: '2022-12-28', - }, - { - id: 1071585, - title: 'M3GAN 2.0', - releaseDate: '2025-06-25', - }, - { - id: 27883, - title: 'Macbeth', - releaseDate: '1948-10-01', - }, - { - id: 11316, - title: 'Macbeth', - releaseDate: '1971-12-20', - }, - { - id: 8810, - title: 'Mad Max 2', - releaseDate: '1981-12-24', - }, - { - id: 76341, - title: 'Mad Max: Fury Road', - releaseDate: '2015-05-13', - }, - { - id: 673595, - title: 'Maggie Simpson in "Playdate with Destiny"', - releaseDate: '2020-02-29', - }, - { - id: 334, - title: 'Magnolia', - releaseDate: '1999-12-17', - }, - { - id: 10648, - title: 'Magnum Force', - releaseDate: '1973-12-13', - }, - { - id: 1010823, - title: 'Magnum Opus', - releaseDate: '2022-07-18', - }, - { - id: 41059, - title: 'Make Way for Tomorrow', - releaseDate: '1937-05-09', - }, - { - id: 1214667, - title: 'Making Squid Game: The Challenge', - releaseDate: '2023-12-06', - }, - { - id: 722913, - title: 'Malcolm & Marie', - releaseDate: '2021-01-29', - }, - { - id: 1883, - title: 'Malcolm X', - releaseDate: '1992-11-18', - }, - { - id: 102651, - title: 'Maleficent', - releaseDate: '2014-05-28', - }, - { - id: 420809, - title: 'Maleficent: Mistress of Evil', - releaseDate: '2019-10-16', - }, - { - id: 458423, - title: 'Mamma Mia! Here We Go Again', - releaseDate: '2018-07-18', - }, - { - id: 9509, - title: 'Man on Fire', - releaseDate: '2004-04-23', - }, - { - id: 1850, - title: 'Man on the Moon', - releaseDate: '1999-12-22', - }, - { - id: 14048, - title: 'Man on Wire', - releaseDate: '2008-08-01', - }, - { - id: 334541, - title: 'Manchester by the Sea', - releaseDate: '2016-11-17', - }, - { - id: 696, - title: 'Manhattan', - releaseDate: '1979-04-25', - }, - { - id: 10440, - title: 'Manhattan Murder Mystery', - releaseDate: '1993-05-02', - }, - { - id: 11454, - title: 'Manhunter', - releaseDate: '1986-08-14', - }, - { - id: 10518, - title: 'Marathon Man', - releaseDate: '1976-10-08', - }, - { - id: 869626, - title: 'Marcel the Shell with Shoes On', - releaseDate: '2022-06-24', - }, - { - id: 90125, - title: 'Marley', - releaseDate: '2012-04-20', - }, - { - id: 14306, - title: 'Marley & Me', - releaseDate: '2008-12-25', - }, - { - id: 506, - title: 'Marnie', - releaseDate: '1964-07-17', - }, - { - id: 492188, - title: 'Marriage Story', - releaseDate: '2019-09-28', - }, - { - id: 392982, - title: 'Marshall', - releaseDate: '2017-10-13', - }, - { - id: 15919, - title: 'Marty', - releaseDate: '1955-04-11', - }, - { - id: 1317288, - title: 'Marty Supreme', - releaseDate: '2025-12-19', - }, - { - id: 211387, - title: 'Marvel One-Shot: Agent Carter', - releaseDate: '2013-10-04', - }, - { - id: 24238, - title: 'Mary and Max', - releaseDate: '2009-04-09', - }, - { - id: 433, - title: 'Mary Poppins', - releaseDate: '1964-12-17', - }, - { - id: 332283, - title: 'Mary Shelley', - releaseDate: '2017-08-06', - }, - { - id: 11177, - title: 'Mask', - releaseDate: '1985-03-08', - }, - { - id: 423333, - title: 'Mass', - releaseDate: '2021-10-08', - }, - { - id: 8619, - title: 'Master and Commander: The Far Side of the World', - releaseDate: '2003-11-14', - }, - { - id: 116, - title: 'Match Point', - releaseDate: '2005-10-26', - }, - { - id: 7270, - title: 'Matchstick Men', - releaseDate: '2003-09-12', - }, - { - id: 10830, - title: 'Matilda', - releaseDate: '1996-08-02', - }, - { - id: 359784, - title: 'Maudie', - releaseDate: '2016-06-16', - }, - { - id: 26371, - title: 'Maurice', - releaseDate: '1987-09-18', - }, - { - id: 272878, - title: 'Max', - releaseDate: '2015-06-25', - }, - { - id: 336843, - title: 'Maze Runner: The Death Cure', - releaseDate: '2018-01-10', - }, - { - id: 29005, - title: 'McCabe & Mrs. Miller', - releaseDate: '1971-06-24', - }, - { - id: 228203, - title: 'McFarland, USA', - releaseDate: '2015-02-20', - }, - { - id: 308369, - title: 'Me and Earl and the Dying Girl', - releaseDate: '2015-06-12', - }, - { - id: 1382, - title: 'Me and You and Everyone We Know', - releaseDate: '2005-06-17', - }, - { - id: 296096, - title: 'Me Before You', - releaseDate: '2016-06-01', - }, - { - id: 10625, - title: 'Mean Girls', - releaseDate: '2004-04-30', - }, - { - id: 203, - title: 'Mean Streets', - releaseDate: '1973-10-14', - }, - { - id: 297, - title: 'Meet Joe Black', - releaseDate: '1998-11-12', - }, - { - id: 32574, - title: 'Meet John Doe', - releaseDate: '1941-03-14', - }, - { - id: 38055, - title: 'Megamind', - releaseDate: '2010-10-28', - }, - { - id: 424488, - title: 'Megan Leavey', - releaseDate: '2017-06-09', - }, - { - id: 62215, - title: 'Melancholia', - releaseDate: '2011-05-26', - }, - { - id: 77, - title: 'Memento', - releaseDate: '2000-10-11', - }, - { - id: 1064486, - title: 'Memoir of a Snail', - releaseDate: '2024-10-17', - }, - { - id: 1904, - title: 'Memoirs of a Geisha', - releaseDate: '2005-12-06', - }, - { - id: 979097, - title: 'Memory', - releaseDate: '2023-12-22', - }, - { - id: 607, - title: 'Men in Black', - releaseDate: '1997-07-02', - }, - { - id: 11978, - title: 'Men of Honor', - releaseDate: '2000-09-13', - }, - { - id: 9516, - title: 'Menace II Society', - releaseDate: '1993-05-26', - }, - { - id: 33871, - title: 'Merry Christmas, Drake & Josh', - releaseDate: '2008-12-05', - }, - { - id: 318279, - title: 'Meru', - releaseDate: '2015-01-25', - }, - { - id: 27040, - title: 'Meshes of the Afternoon', - releaseDate: '1943-01-01', - }, - { - id: 20604, - title: "Metal: A Headbanger's Journey", - releaseDate: '2005-09-14', - }, - { - id: 11401, - title: 'Metallica: Some Kind of Monster', - releaseDate: '2004-06-10', - }, - { - id: 92060, - title: "Michael Jackson's Thriller", - releaseDate: '1983-11-14', - }, - { - id: 14813, - title: "Mickey's Christmas Carol", - releaseDate: '1983-10-19', - }, - { - id: 15400, - title: "Mickey's Once Upon a Christmas", - releaseDate: '1999-10-31', - }, - { - id: 53219, - title: "Mickey's Trailer", - releaseDate: '1938-05-06', - }, - { - id: 437586, - title: 'mid90s', - releaseDate: '2018-10-19', - }, - { - id: 3116, - title: 'Midnight Cowboy', - releaseDate: '1969-05-25', - }, - { - id: 11327, - title: 'Midnight Express', - releaseDate: '1978-08-31', - }, - { - id: 59436, - title: 'Midnight in Paris', - releaseDate: '2011-05-11', - }, - { - id: 9013, - title: 'Midnight Run', - releaseDate: '1988-07-20', - }, - { - id: 419478, - title: 'Midnight Sun', - releaseDate: '2018-03-22', - }, - { - id: 530385, - title: 'Midsommar', - releaseDate: '2019-07-03', - }, - { - id: 522162, - title: 'Midway', - releaseDate: '2019-11-06', - }, - { - id: 940551, - title: 'Migration', - releaseDate: '2023-12-06', - }, - { - id: 3309, - title: 'Mildred Pierce', - releaseDate: '1945-10-20', - }, - { - id: 10139, - title: 'Milk', - releaseDate: '2008-11-05', - }, - { - id: 379, - title: "Miller's Crossing", - releaseDate: '1990-09-21', - }, - { - id: 70, - title: 'Million Dollar Baby', - releaseDate: '2004-12-05', - }, - { - id: 615643, - title: 'Minari', - releaseDate: '2021-02-12', - }, - { - id: 489985, - title: 'Minding the Gap', - releaseDate: '2018-08-17', - }, - { - id: 550022, - title: 'Mingle All the Way', - releaseDate: '2018-12-01', - }, - { - id: 438148, - title: 'Minions: The Rise of Gru', - releaseDate: '2022-06-29', - }, - { - id: 180, - title: 'Minority Report', - releaseDate: '2002-06-20', - }, - { - id: 14292, - title: 'Miracle', - releaseDate: '2004-02-06', - }, - { - id: 11881, - title: 'Miracle on 34th Street', - releaseDate: '1947-06-04', - }, - { - id: 339984, - title: 'Miracles from Heaven', - releaseDate: '2016-03-17', - }, - { - id: 1700, - title: 'Misery', - releaseDate: '1990-11-30', - }, - { - id: 653567, - title: 'Miss Americana', - releaseDate: '2020-01-31', - }, - { - id: 376290, - title: 'Miss Sloane', - releaseDate: '2016-11-25', - }, - { - id: 290762, - title: 'Miss You Already', - releaseDate: '2015-09-12', - }, - { - id: 768362, - title: 'Missing', - releaseDate: '2023-01-19', - }, - { - id: 15600, - title: 'Missing', - releaseDate: '1982-02-12', - }, - { - id: 954, - title: 'Mission: Impossible', - releaseDate: '1996-05-22', - }, - { - id: 575264, - title: 'Mission: Impossible - Dead Reckoning Part One', - releaseDate: '2023-07-08', - }, - { - id: 353081, - title: 'Mission: Impossible - Fallout', - releaseDate: '2018-07-25', - }, - { - id: 56292, - title: 'Mission: Impossible - Ghost Protocol', - releaseDate: '2011-12-07', - }, - { - id: 177677, - title: 'Mission: Impossible - Rogue Nation', - releaseDate: '2015-07-28', - }, - { - id: 575265, - title: 'Mission: Impossible - The Final Reckoning', - releaseDate: '2025-05-17', - }, - { - id: 1632, - title: 'Mississippi Burning', - releaseDate: '1988-12-08', - }, - { - id: 37853, - title: 'Mister Roberts', - releaseDate: '1955-07-10', - }, - { - id: 277834, - title: 'Moana', - releaseDate: '2016-10-13', - }, - { - id: 1241982, - title: 'Moana 2', - releaseDate: '2024-11-21', - }, - { - id: 10339, - title: 'Moby Dick', - releaseDate: '1956-06-27', - }, - { - id: 3082, - title: 'Modern Times', - releaseDate: '1936-02-05', - }, - { - id: 34308, - title: 'Modigliani', - releaseDate: '2004-05-18', - }, - { - id: 396371, - title: "Molly's Game", - releaseDate: '2017-12-07', - }, - { - id: 438446, - title: 'Mommy Dead and Dearest', - releaseDate: '2017-03-11', - }, - { - id: 60308, - title: 'Moneyball', - releaseDate: '2011-09-23', - }, - { - id: 30588, - title: 'Monsieur Verdoux', - releaseDate: '1947-09-26', - }, - { - id: 504, - title: 'Monster', - releaseDate: '2003-12-24', - }, - { - id: 212470, - title: 'Monster High: 13 Wishes', - releaseDate: '2013-10-08', - }, - { - id: 360404, - title: 'Monster High: Boo York, Boo York', - releaseDate: '2015-10-19', - }, - { - id: 324963, - title: 'Monster High: Haunted', - releaseDate: '2015-03-02', - }, - { - id: 167313, - title: 'Monster High: Why Do Ghouls Fall in Love?', - releaseDate: '2012-02-12', - }, - { - id: 813258, - title: 'Monster Pets: A Hotel Transylvania Short', - releaseDate: '2021-04-02', - }, - { - id: 62211, - title: 'Monsters University', - releaseDate: '2013-06-19', - }, - { - id: 585, - title: 'Monsters, Inc.', - releaseDate: '2001-11-01', - }, - { - id: 762, - title: 'Monty Python and the Holy Grail', - releaseDate: '1975-04-03', - }, - { - id: 11949, - title: 'Monty Python Live at the Hollywood Bowl', - releaseDate: '1982-06-25', - }, - { - id: 4543, - title: "Monty Python's The Meaning of Life", - releaseDate: '1983-03-31', - }, - { - id: 17431, - title: 'Moon', - releaseDate: '2009-06-12', - }, - { - id: 957457, - title: 'Moonage Daydream', - releaseDate: '2022-09-15', - }, - { - id: 376867, - title: 'Moonlight', - releaseDate: '2016-10-21', - }, - { - id: 83666, - title: 'Moonrise Kingdom', - releaseDate: '2012-05-16', - }, - { - id: 36107, - title: 'More', - releaseDate: '1998-09-01', - }, - { - id: 841755, - title: 'Mortal Kombat Legends: Battle of the Realms', - releaseDate: '2021-08-30', - }, - { - id: 664767, - title: "Mortal Kombat Legends: Scorpion's Revenge", - releaseDate: '2020-04-12', - }, - { - id: 1007401, - title: 'Mortal Kombat Legends: Snow Blind', - releaseDate: '2022-10-09', - }, - { - id: 824, - title: 'Moulin Rouge!', - releaseDate: '2001-05-18', - }, - { - id: 583689, - title: 'Moxie', - releaseDate: '2021-03-03', - }, - { - id: 374461, - title: 'Mr. Church', - releaseDate: '2016-09-16', - }, - { - id: 24807, - title: 'Mr. Deeds Goes to Town', - releaseDate: '1936-04-09', - }, - { - id: 31011, - title: 'Mr. Nobody', - releaseDate: '2009-11-06', - }, - { - id: 3083, - title: 'Mr. Smith Goes to Washington', - releaseDate: '1939-10-19', - }, - { - id: 788, - title: 'Mrs. Doubtfire', - releaseDate: '1993-11-24', - }, - { - id: 754609, - title: 'Mrs. Harris Goes to Paris', - releaseDate: '2022-07-15', - }, - { - id: 27367, - title: 'Mrs. Miniver', - releaseDate: '1942-07-03', - }, - { - id: 40001, - title: 'Mrs. Winterbourne', - releaseDate: '1996-04-19', - }, - { - id: 103731, - title: 'Mud', - releaseDate: '2013-04-26', - }, - { - id: 414425, - title: 'Mudbound', - releaseDate: '2017-11-16', - }, - { - id: 762509, - title: 'Mufasa: The Lion King', - releaseDate: '2024-12-18', - }, - { - id: 10674, - title: 'Mulan', - releaseDate: '1998-06-18', - }, - { - id: 1018, - title: 'Mulholland Drive', - releaseDate: '2001-06-06', - }, - { - id: 612, - title: 'Munich', - releaseDate: '2005-12-23', - }, - { - id: 758, - title: 'Murder Ahoy', - releaseDate: '1964-09-22', - }, - { - id: 751, - title: 'Murder at the Gallop', - releaseDate: '1963-05-09', - }, - { - id: 6037, - title: 'Murder by Death', - releaseDate: '1976-06-23', - }, - { - id: 8438, - title: 'Murder in the First', - releaseDate: '1995-01-20', - }, - { - id: 757, - title: 'Murder Most Foul', - releaseDate: '1964-03-01', - }, - { - id: 4176, - title: 'Murder on the Orient Express', - releaseDate: '1974-11-22', - }, - { - id: 750, - title: 'Murder She Said', - releaseDate: '1961-09-26', - }, - { - id: 1834, - title: 'Murder, My Sweet', - releaseDate: '1944-12-14', - }, - { - id: 2263, - title: 'Music Box', - releaseDate: '1989-12-22', - }, - { - id: 12311, - title: 'Mutiny on the Bounty', - releaseDate: '1935-11-22', - }, - { - id: 11085, - title: 'Mutiny on the Bounty', - releaseDate: '1962-11-08', - }, - { - id: 334531, - title: 'My All American', - releaseDate: '2015-11-13', - }, - { - id: 10377, - title: 'My Cousin Vinny', - releaseDate: '1992-03-13', - }, - { - id: 3088, - title: 'My Darling Clementine', - releaseDate: '1946-10-17', - }, - { - id: 434714, - title: 'My Days of Mercy', - releaseDate: '2018-03-31', - }, - { - id: 25468, - title: 'My Dinner with Andre', - releaseDate: '1981-10-11', - }, - { - id: 11113, - title: 'My Fair Lady', - releaseDate: '1964-12-01', - }, - { - id: 1294203, - title: 'My Fault: London', - releaseDate: '2025-02-12', - }, - { - id: 741011, - title: 'My First Summer', - releaseDate: '2020-10-24', - }, - { - id: 4032, - title: 'My Girl', - releaseDate: '1991-11-27', - }, - { - id: 10161, - title: 'My Left Foot: The Story of Christy Brown', - releaseDate: '1989-04-07', - }, - { - id: 292177, - title: 'My Little Pony - Equestria Girls - Rainbow Rocks', - releaseDate: '2014-09-27', - }, - { - id: 597316, - title: 'My Little Pony: A New Generation', - releaseDate: '2021-09-22', - }, - { - id: 201676, - title: 'My Little Pony: Equestria Girls', - releaseDate: '2013-06-16', - }, - { - id: 335360, - title: 'My Little Pony: The Movie', - releaseDate: '2017-10-05', - }, - { - id: 13562, - title: 'My Man Godfrey', - releaseDate: '1936-09-02', - }, - { - id: 8129, - title: 'My Name Is Joe', - releaseDate: '1998-05-15', - }, - { - id: 682110, - title: 'My Octopus Teacher', - releaseDate: '2020-09-04', - }, - { - id: 468, - title: 'My Own Private Idaho', - releaseDate: '1991-02-01', - }, - { - id: 1159799, - title: 'My Penguin Friend', - releaseDate: '2024-08-07', - }, - { - id: 744114, - title: 'My Policeman', - releaseDate: '2022-10-20', - }, - { - id: 10024, - title: "My Sister's Keeper", - releaseDate: '2009-06-26', - }, - { - id: 11171, - title: 'Mysterious Skin', - releaseDate: '2005-03-30', - }, - { - id: 11305, - title: 'Mystery Train', - releaseDate: '1989-09-06', - }, - { - id: 322, - title: 'Mystic River', - releaseDate: '2003-10-08', - }, - { - id: 21450, - title: 'Naked', - releaseDate: '1993-08-06', - }, - { - id: 2742, - title: 'Naked Lunch', - releaseDate: '1991-12-27', - }, - { - id: 669, - title: 'Nanook of the North', - releaseDate: '1922-06-11', - }, - { - id: 519035, - title: 'Nappily Ever After', - releaseDate: '2018-09-21', - }, - { - id: 3121, - title: 'Nashville', - releaseDate: '1975-06-11', - }, - { - id: 5825, - title: "National Lampoon's Christmas Vacation", - releaseDate: '1989-11-30', - }, - { - id: 11153, - title: "National Lampoon's Vacation", - releaseDate: '1983-07-29', - }, - { - id: 241, - title: 'Natural Born Killers', - releaseDate: '1994-08-26', - }, - { - id: 926676, - title: 'Navalny', - releaseDate: '2022-04-08', - }, - { - id: 129670, - title: 'Nebraska', - releaseDate: '2013-09-21', - }, - { - id: 328387, - title: 'Nerve', - releaseDate: '2016-06-27', - }, - { - id: 10774, - title: 'Network', - releaseDate: '1976-11-27', - }, - { - id: 391757, - title: 'Never Back Down: No Surrender', - releaseDate: '2016-06-07', - }, - { - id: 595671, - title: 'Never Rarely Sometimes Always', - releaseDate: '2020-03-13', - }, - { - id: 37757, - title: 'Never Sleep Again: The Elm Street Legacy', - releaseDate: '2010-05-04', - }, - { - id: 14613, - title: 'Next Avengers: Heroes of Tomorrow', - releaseDate: '2008-09-02', - }, - { - id: 19119, - title: 'Night and the City', - releaseDate: '1950-06-15', - }, - { - id: 10331, - title: 'Night of the Living Dead', - releaseDate: '1968-10-04', - }, - { - id: 339, - title: 'Night on Earth', - releaseDate: '1991-12-12', - }, - { - id: 242582, - title: 'Nightcrawler', - releaseDate: '2014-10-23', - }, - { - id: 19169, - title: 'Nightmare Alley', - releaseDate: '1947-10-09', - }, - { - id: 961323, - title: 'Nimona', - releaseDate: '2023-06-23', - }, - { - id: 1859, - title: 'Ninotchka', - releaseDate: '1939-11-16', - }, - { - id: 6977, - title: 'No Country for Old Men', - releaseDate: '2007-11-09', - }, - { - id: 46247, - title: 'No Time for Nuts', - releaseDate: '2006-10-23', - }, - { - id: 370172, - title: 'No Time to Die', - releaseDate: '2021-09-29', - }, - { - id: 615457, - title: 'Nobody', - releaseDate: '2021-03-18', - }, - { - id: 1007734, - title: 'Nobody 2', - releaseDate: '2025-08-13', - }, - { - id: 340666, - title: 'Nocturnal Animals', - releaseDate: '2016-11-04', - }, - { - id: 26670, - title: 'Noises Off...', - releaseDate: '1992-03-20', - }, - { - id: 581734, - title: 'Nomadland', - releaseDate: '2021-01-29', - }, - { - id: 40842, - title: 'Norma Rae', - releaseDate: '1979-03-02', - }, - { - id: 213, - title: 'North by Northwest', - releaseDate: '1959-08-06', - }, - { - id: 9701, - title: 'North Country', - releaseDate: '2005-02-12', - }, - { - id: 1259, - title: 'Notes on a Scandal', - releaseDate: '2006-12-25', - }, - { - id: 303, - title: 'Notorious', - releaseDate: '1946-08-21', - }, - { - id: 509, - title: 'Notting Hill', - releaseDate: '1999-05-21', - }, - { - id: 90369, - title: 'Now Is Good', - releaseDate: '2012-09-19', - }, - { - id: 75656, - title: 'Now You See Me', - releaseDate: '2013-05-29', - }, - { - id: 32847, - title: 'Now, Voyager', - releaseDate: '1942-10-22', - }, - { - id: 33511, - title: 'Nowhere Boy', - releaseDate: '2009-12-25', - }, - { - id: 728142, - title: 'Nowhere Special', - releaseDate: '2020-09-10', - }, - { - id: 484133, - title: 'Nude', - releaseDate: '2017-10-29', - }, - { - id: 1214931, - title: 'Nuremberg', - releaseDate: '2025-11-06', - }, - { - id: 895549, - title: 'NYAD', - releaseDate: '2023-10-18', - }, - { - id: 134, - title: 'O Brother, Where Art Thou?', - releaseDate: '2000-08-30', - }, - { - id: 377462, - title: 'O.J.: Made in America', - releaseDate: '2016-05-20', - }, - { - id: 161, - title: "Ocean's Eleven", - releaseDate: '2001-12-07', - }, - { - id: 36970, - title: 'Oceans', - releaseDate: '2010-01-22', - }, - { - id: 13466, - title: 'October Sky', - releaseDate: '1999-02-19', - }, - { - id: 43461, - title: 'Odd Man Out', - releaseDate: '1947-01-30', - }, - { - id: 9609, - title: 'Of Mice and Men', - releaseDate: '1992-09-16', - }, - { - id: 1542, - title: 'Office Space', - releaseDate: '1999-02-19', - }, - { - id: 393624, - title: 'Official Secrets', - releaseDate: '2019-08-30', - }, - { - id: 387426, - title: 'Okja', - releaseDate: '2017-06-28', - }, - { - id: 785663, - title: 'Old Henry', - releaseDate: '2021-10-01', - }, - { - id: 10949, - title: 'Oliver Twist', - releaseDate: '1948-06-28', - }, - { - id: 17917, - title: 'Oliver!', - releaseDate: '1968-09-26', - }, - { - id: 11816, - title: 'On Golden Pond', - releaseDate: '1981-12-04', - }, - { - id: 339380, - title: 'On the Basis of Sex', - releaseDate: '2018-12-25', - }, - { - id: 654, - title: 'On the Waterfront', - releaseDate: '1954-06-22', - }, - { - id: 5723, - title: 'Once', - releaseDate: '2007-03-23', - }, - { - id: 567604, - title: 'Once Upon a Deadpool', - releaseDate: '2018-12-11', - }, - { - id: 1139087, - title: 'Once Upon a Studio', - releaseDate: '2023-09-24', - }, - { - id: 311, - title: 'Once Upon a Time in America', - releaseDate: '1984-05-23', - }, - { - id: 466272, - title: 'Once Upon a Time... in Hollywood', - releaseDate: '2019-07-24', - }, - { - id: 527, - title: 'Once Were Warriors', - releaseDate: '1994-09-02', - }, - { - id: 1054867, - title: 'One Battle After Another', - releaseDate: '2025-09-23', - }, - { - id: 566368, - title: 'One Child Nation', - releaseDate: '2019-03-29', - }, - { - id: 51828, - title: 'One Day', - releaseDate: '2011-03-02', - }, - { - id: 164558, - title: 'One Direction: This Is Us', - releaseDate: '2013-08-20', - }, - { - id: 283559, - title: 'One Direction: Where We Are - The Concert Film', - releaseDate: '2014-10-08', - }, - { - id: 510, - title: "One Flew Over the Cuckoo's Nest", - releaseDate: '1975-11-19', - }, - { - id: 53211, - title: 'One Froggy Evening', - releaseDate: '1955-12-30', - }, - { - id: 12230, - title: 'One Hundred and One Dalmatians', - releaseDate: '1961-01-25', - }, - { - id: 760774, - title: 'One Life', - releaseDate: '2023-12-21', - }, - { - id: 13933, - title: 'One Man Band', - releaseDate: '2005-06-21', - }, - { - id: 661914, - title: 'One Night in Miami...', - releaseDate: '2020-12-25', - }, - { - id: 430, - title: 'One, Two, Three', - releaseDate: '1961-12-15', - }, - { - id: 43832, - title: 'Only Angels Have Wings', - releaseDate: '1939-05-15', - }, - { - id: 152603, - title: 'Only Lovers Left Alive', - releaseDate: '2013-12-12', - }, - { - id: 395991, - title: 'Only the Brave', - releaseDate: '2017-09-22', - }, - { - id: 508439, - title: 'Onward', - releaseDate: '2020-02-29', - }, - { - id: 2055, - title: 'Open Range', - releaseDate: '2003-08-11', - }, - { - id: 33665, - title: 'Opening Night', - releaseDate: '1977-12-22', - }, - { - id: 9660, - title: 'Operation Petticoat', - releaseDate: '1959-12-05', - }, - { - id: 428836, - title: 'Ophelia', - releaseDate: '2019-06-28', - }, - { - id: 872585, - title: 'Oppenheimer', - releaseDate: '2023-07-19', - }, - { - id: 974036, - title: 'Ordinary Angels', - releaseDate: '2024-02-22', - }, - { - id: 16619, - title: 'Ordinary People', - releaseDate: '1980-09-19', - }, - { - id: 47697, - title: 'Othello', - releaseDate: '1951-11-28', - }, - { - id: 583903, - title: 'Our Friend', - releaseDate: '2019-09-04', - }, - { - id: 701, - title: 'Our Hospitality', - releaseDate: '1923-11-19', - }, - { - id: 706860, - title: 'Out', - releaseDate: '2020-05-22', - }, - { - id: 606, - title: 'Out of Africa', - releaseDate: '1985-12-20', - }, - { - id: 678, - title: 'Out of the Past', - releaseDate: '1947-11-25', - }, - { - id: 560050, - title: 'Over the Moon', - releaseDate: '2020-10-16', - }, - { - id: 527776, - title: 'Overcomer', - releaseDate: '2019-08-22', - }, - { - id: 6023, - title: 'P.S. I Love You', - releaseDate: '2007-11-15', - }, - { - id: 116149, - title: 'Paddington', - releaseDate: '2014-11-24', - }, - { - id: 346648, - title: 'Paddington 2', - releaseDate: '2017-11-09', - }, - { - id: 8879, - title: 'Pale Rider', - releaseDate: '1985-06-28', - }, - { - id: 587792, - title: 'Palm Springs', - releaseDate: '2020-07-10', - }, - { - id: 458220, - title: 'Palmer', - releaseDate: '2021-01-28', - }, - { - id: 11293, - title: 'Paper Moon', - releaseDate: '1973-05-09', - }, - { - id: 140420, - title: 'Paperman', - releaseDate: '2012-11-02', - }, - { - id: 433498, - title: 'Papillon', - releaseDate: '2017-09-07', - }, - { - id: 5924, - title: 'Papillon', - releaseDate: '1973-12-16', - }, - { - id: 17204, - title: 'Paradise Lost: The Child Murders at Robin Hood Hills', - releaseDate: '1996-12-03', - }, - { - id: 77174, - title: 'ParaNorman', - releaseDate: '2012-08-03', - }, - { - id: 31225, - title: 'Paris Is Burning', - releaseDate: '1991-03-13', - }, - { - id: 655, - title: 'Paris, Texas', - releaseDate: '1984-07-16', - }, - { - id: 202141, - title: 'Particle Fever', - releaseDate: '2013-06-14', - }, - { - id: 24480, - title: 'Partly Cloudy', - releaseDate: '2009-05-28', - }, - { - id: 130925, - title: 'Partysaurus Rex', - releaseDate: '2012-09-14', - }, - { - id: 666277, - title: 'Past Lives', - releaseDate: '2023-06-02', - }, - { - id: 11577, - title: 'Pat Garrett & Billy the Kid', - releaseDate: '1973-05-23', - }, - { - id: 10312, - title: 'Patch Adams', - releaseDate: '1998-12-25', - }, - { - id: 370755, - title: 'Paterson', - releaseDate: '2016-11-17', - }, - { - id: 975, - title: 'Paths of Glory', - releaseDate: '1957-10-25', - }, - { - id: 388399, - title: 'Patriots Day', - releaseDate: '2016-12-12', - }, - { - id: 11202, - title: 'Patton', - releaseDate: '1970-01-25', - }, - { - id: 476968, - title: 'Paul, Apostle of Christ', - releaseDate: '2018-03-23', - }, - { - id: 743439, - title: 'PAW Patrol: Jet to the Rescue', - releaseDate: '2020-09-10', - }, - { - id: 552095, - title: 'PAW Patrol: Mighty Pups', - releaseDate: '2018-10-04', - }, - { - id: 893723, - title: 'PAW Patrol: The Mighty Movie', - releaseDate: '2023-09-21', - }, - { - id: 675445, - title: 'PAW Patrol: The Movie', - releaseDate: '2021-08-09', - }, - { - id: 10647, - title: 'Pay It Forward', - releaseDate: '2000-10-20', - }, - { - id: 13689, - title: 'Peaceful Warrior', - releaseDate: '2006-03-30', - }, - { - id: 949423, - title: 'Pearl', - releaseDate: '2022-09-16', - }, - { - id: 11167, - title: 'Peeping Tom', - releaseDate: '1960-04-07', - }, - { - id: 245913, - title: 'Pelé: Birth of a Legend', - releaseDate: '2016-05-06', - }, - { - id: 1034716, - title: 'People We Meet on Vacation', - releaseDate: '2026-01-06', - }, - { - id: 1427, - title: 'Perfume: The Story of a Murderer', - releaseDate: '2006-09-13', - }, - { - id: 13949, - title: 'Persuasion', - releaseDate: '2007-04-01', - }, - { - id: 10693, - title: 'Peter Pan', - releaseDate: '1953-02-05', - }, - { - id: 10601, - title: 'Peter Pan', - releaseDate: '2003-12-18', - }, - { - id: 522478, - title: 'Peter Rabbit 2: The Runaway', - releaseDate: '2021-03-25', - }, - { - id: 27327, - title: 'Phantom of the Paradise', - releaseDate: '1974-10-31', - }, - { - id: 400617, - title: 'Phantom Thread', - releaseDate: '2017-12-25', - }, - { - id: 9800, - title: 'Philadelphia', - releaseDate: '1993-12-22', - }, - { - id: 205220, - title: 'Philomena', - releaseDate: '2013-11-01', - }, - { - id: 71689, - title: 'Phineas and Ferb The Movie: Across the 2nd Dimension', - releaseDate: '2011-08-05', - }, - { - id: 594328, - title: 'Phineas and Ferb the Movie: Candace Against the Universe', - releaseDate: '2020-08-27', - }, - { - id: 392216, - title: 'Phineas and Ferb: Star Wars', - releaseDate: '2014-07-26', - }, - { - id: 19079, - title: 'Phoebe in Wonderland', - releaseDate: '2008-02-07', - }, - { - id: 473, - title: 'Pi', - releaseDate: '1998-07-10', - }, - { - id: 25955, - title: 'Pickup on South Street', - releaseDate: '1953-05-27', - }, - { - id: 11020, - title: 'Picnic at Hanging Rock', - releaseDate: '1975-09-02', - }, - { - id: 641662, - title: 'Pieces of a Woman', - releaseDate: '2020-12-30', - }, - { - id: 4952, - title: 'Pillow Talk', - releaseDate: '1959-10-07', - }, - { - id: 25771, - title: 'Pink Floyd: Live at Pompeii', - releaseDate: '1972-10-25', - }, - { - id: 12104, - title: 'Pink Floyd: The Wall', - releaseDate: '1982-07-14', - }, - { - id: 10895, - title: 'Pinocchio', - releaseDate: '1940-02-23', - }, - { - id: 399106, - title: 'Piper', - releaseDate: '2016-06-16', - }, - { - id: 3293, - title: 'Pirates of Silicon Valley', - releaseDate: '1999-06-20', - }, - { - id: 285, - title: "Pirates of the Caribbean: At World's End", - releaseDate: '2007-05-19', - }, - { - id: 58, - title: "Pirates of the Caribbean: Dead Man's Chest", - releaseDate: '2006-07-06', - }, - { - id: 22, - title: 'Pirates of the Caribbean: The Curse of the Black Pearl', - releaseDate: '2003-07-09', - }, - { - id: 114150, - title: 'Pitch Perfect', - releaseDate: '2012-09-28', - }, - { - id: 13681, - title: 'Places in the Heart', - releaseDate: '1984-09-11', - }, - { - id: 2609, - title: 'Planes, Trains and Automobiles', - releaseDate: '1987-11-26', - }, - { - id: 30675, - title: 'Planet Hulk', - releaseDate: '2010-02-02', - }, - { - id: 871, - title: 'Planet of the Apes', - releaseDate: '1968-02-07', - }, - { - id: 792, - title: 'Platoon', - releaseDate: '1986-12-19', - }, - { - id: 11610, - title: 'Play It Again, Sam', - releaseDate: '1972-05-04', - }, - { - id: 2657, - title: 'Pleasantville', - releaseDate: '1998-09-17', - }, - { - id: 248, - title: 'Pocketful of Miracles', - releaseDate: '1961-12-18', - }, - { - id: 26039, - title: 'Point Blank', - releaseDate: '1967-08-30', - }, - { - id: 1089, - title: 'Point Break', - releaseDate: '1991-07-12', - }, - { - id: 609, - title: 'Poltergeist', - releaseDate: '1982-06-04', - }, - { - id: 14269, - title: 'Polyester', - releaseDate: '1981-05-29', - }, - { - id: 14903, - title: "Pooh's Grand Adventure: The Search for Christopher Robin", - releaseDate: '1997-08-05', - }, - { - id: 792307, - title: 'Poor Things', - releaseDate: '2023-12-07', - }, - { - id: 21484, - title: 'Possession', - releaseDate: '1981-05-27', - }, - { - id: 24348, - title: 'Powaqqatsi', - releaseDate: '1988-04-29', - }, - { - id: 21634, - title: 'Prayers for Bobby', - releaseDate: '2009-01-24', - }, - { - id: 25793, - title: 'Precious', - releaseDate: '2009-11-06', - }, - { - id: 106, - title: 'Predator', - releaseDate: '1987-06-12', - }, - { - id: 1242898, - title: 'Predator: Badlands', - releaseDate: '2025-11-05', - }, - { - id: 1376434, - title: 'Predator: Killer of Killers', - releaseDate: '2025-06-05', - }, - { - id: 206487, - title: 'Predestination', - releaseDate: '2014-08-28', - }, - { - id: 13042, - title: 'Presto', - releaseDate: '2008-06-27', - }, - { - id: 114, - title: 'Pretty Woman', - releaseDate: '1990-03-23', - }, - { - id: 766507, - title: 'Prey', - releaseDate: '2022-08-02', - }, - { - id: 393765, - title: 'Priceless', - releaseDate: '2016-10-14', - }, - { - id: 234200, - title: 'Pride', - releaseDate: '2014-09-12', - }, - { - id: 4348, - title: 'Pride & Prejudice', - releaseDate: '2005-09-16', - }, - { - id: 1592, - title: 'Primal Fear', - releaseDate: '1996-03-06', - }, - { - id: 176241, - title: 'Prison Break: The Final Break', - releaseDate: '2009-09-10', - }, - { - id: 146233, - title: 'Prisoners', - releaseDate: '2013-09-19', - }, - { - id: 420622, - title: 'Professor Marston and the Wonder Women', - releaseDate: '2017-10-13', - }, - { - id: 932430, - title: 'Prom Pact', - releaseDate: '2023-03-30', - }, - { - id: 582014, - title: 'Promising Young Woman', - releaseDate: '2020-12-13', - }, - { - id: 457840, - title: 'Psych: The Movie', - releaseDate: '2017-12-07', - }, - { - id: 539, - title: 'Psycho', - releaseDate: '1960-06-22', - }, - { - id: 680, - title: 'Pulp Fiction', - releaseDate: '1994-09-10', - }, - { - id: 8428, - title: 'Pump Up the Volume', - releaseDate: '1990-08-22', - }, - { - id: 5205, - title: 'Pumping Iron', - releaseDate: '1977-01-18', - }, - { - id: 8051, - title: 'Punch-Drunk Love', - releaseDate: '2002-10-11', - }, - { - id: 26513, - title: 'Punishment Park', - releaseDate: '1971-10-01', - }, - { - id: 229407, - title: 'Puppy', - releaseDate: '2013-12-10', - }, - { - id: 762975, - title: 'Purple Hearts', - releaseDate: '2022-07-29', - }, - { - id: 315162, - title: 'Puss in Boots: The Last Wish', - releaseDate: '2022-12-07', - }, - { - id: 25016, - title: 'Pygmalion', - releaseDate: '1938-10-06', - }, - { - id: 631143, - title: 'QT8: The First Eight', - releaseDate: '2019-10-21', - }, - { - id: 10373, - title: 'Quadrophenia', - releaseDate: '1979-09-14', - }, - { - id: 536743, - title: 'Queen & Slim', - releaseDate: '2019-11-27', - }, - { - id: 317557, - title: 'Queen of Katwe', - releaseDate: '2016-09-23', - }, - { - id: 74406, - title: 'Queen: Days of Our Lives', - releaseDate: '2011-05-29', - }, - { - id: 20575, - title: 'Queen: Live at Wembley Stadium', - releaseDate: '1986-07-12', - }, - { - id: 10876, - title: 'Quills', - releaseDate: '2000-11-22', - }, - { - id: 11450, - title: 'Quiz Show', - releaseDate: '1994-08-25', - }, - { - id: 11620, - title: 'Quo Vadis', - releaseDate: '1951-11-08', - }, - { - id: 52971, - title: 'Rabbit of Seville', - releaseDate: '1950-12-16', - }, - { - id: 52954, - title: 'Rabbit Seasoning', - releaseDate: '1952-09-20', - }, - { - id: 323677, - title: 'Race', - releaseDate: '2016-02-19', - }, - { - id: 300792, - title: 'Racing Extinction', - releaseDate: '2015-01-24', - }, - { - id: 13920, - title: 'Radio', - releaseDate: '2003-10-24', - }, - { - id: 30890, - title: 'Radio Days', - releaseDate: '1987-01-30', - }, - { - id: 1578, - title: 'Raging Bull', - releaseDate: '1980-11-14', - }, - { - id: 110490, - title: 'Rags', - releaseDate: '2012-05-28', - }, - { - id: 85, - title: 'Raiders of the Lost Ark', - releaseDate: '1981-06-12', - }, - { - id: 380, - title: 'Rain Man', - releaseDate: '1988-12-12', - }, - { - id: 378, - title: 'Raising Arizona', - releaseDate: '1987-03-13', - }, - { - id: 461955, - title: 'Rakka', - releaseDate: '2017-06-14', - }, - { - id: 404368, - title: 'Ralph Breaks the Internet', - releaseDate: '2018-11-20', - }, - { - id: 2062, - title: 'Ratatouille', - releaseDate: '2007-06-28', - }, - { - id: 29698, - title: 'Ratcatcher', - releaseDate: '1999-11-12', - }, - { - id: 1677, - title: 'Ray', - releaseDate: '2004-10-29', - }, - { - id: 527774, - title: 'Raya and the Last Dragon', - releaseDate: '2021-03-03', - }, - { - id: 493099, - title: 'RBG', - releaseDate: '2018-05-04', - }, - { - id: 1694, - title: 'Re-Animator', - releaseDate: '1985-10-18', - }, - { - id: 567609, - title: 'Ready or Not', - releaseDate: '2019-08-21', - }, - { - id: 333339, - title: 'Ready Player One', - releaseDate: '2018-03-28', - }, - { - id: 39254, - title: 'Real Steel', - releaseDate: '2011-09-28', - }, - { - id: 567, - title: 'Rear Window', - releaseDate: '1954-08-01', - }, - { - id: 223, - title: 'Rebecca', - releaseDate: '1940-03-23', - }, - { - id: 221, - title: 'Rebel Without a Cause', - releaseDate: '1955-10-27', - }, - { - id: 256876, - title: 'Red Army', - releaseDate: '2014-08-13', - }, - { - id: 66125, - title: 'Red Dog', - releaseDate: '2011-08-04', - }, - { - id: 9533, - title: 'Red Dragon', - releaseDate: '2002-10-02', - }, - { - id: 447061, - title: 'Red Nose Day Actually', - releaseDate: '2017-03-24', - }, - { - id: 845781, - title: 'Red One', - releaseDate: '2024-10-31', - }, - { - id: 3089, - title: 'Red River', - releaseDate: '1948-09-17', - }, - { - id: 930094, - title: 'Red, White & Royal Blue', - releaseDate: '2023-07-27', - }, - { - id: 698508, - title: 'Redeeming Love', - releaseDate: '2022-01-21', - }, - { - id: 1327862, - title: 'Regretting You', - releaseDate: '2025-10-22', - }, - { - id: 354857, - title: 'Regular Show: The Movie', - releaseDate: '2015-09-01', - }, - { - id: 487672, - title: 'Reign of the Supermen', - releaseDate: '2019-01-13', - }, - { - id: 2355, - title: 'Reign Over Me', - releaseDate: '2007-03-22', - }, - { - id: 32536, - title: 'Rejected', - releaseDate: '2000-07-25', - }, - { - id: 13007, - title: 'Religulous', - releaseDate: '2008-10-01', - }, - { - id: 302528, - title: 'Remember', - releaseDate: '2015-10-23', - }, - { - id: 23169, - title: 'Remember Me', - releaseDate: '2010-03-11', - }, - { - id: 188538, - title: 'Remember Sunday', - releaseDate: '2013-04-21', - }, - { - id: 10637, - title: 'Remember the Titans', - releaseDate: '2000-09-29', - }, - { - id: 1208348, - title: 'Rental Family', - releaseDate: '2025-11-20', - }, - { - id: 11481, - title: 'Repulsion', - releaseDate: '1965-06-01', - }, - { - id: 641, - title: 'Requiem for a Dream', - releaseDate: '2000-10-06', - }, - { - id: 333377, - title: 'Requiem for the American Dream', - releaseDate: '2015-04-18', - }, - { - id: 921655, - title: 'Rescued by Ruby', - releaseDate: '2022-03-17', - }, - { - id: 443129, - title: 'Reservoir Dogs', - releaseDate: '1991-06-01', - }, - { - id: 500, - title: 'Reservoir Dogs', - releaseDate: '1992-09-02', - }, - { - id: 785539, - title: 'Resort to Love', - releaseDate: '2021-07-29', - }, - { - id: 39312, - title: 'Restrepo', - releaseDate: '2010-06-25', - }, - { - id: 1892, - title: 'Return of the Jedi', - releaseDate: '1983-05-25', - }, - { - id: 292011, - title: 'Richard Jewell', - releaseDate: '2019-12-13', - }, - { - id: 1208476, - title: 'Ricky Gervais: Armageddon', - releaseDate: '2023-12-01', - }, - { - id: 508933, - title: 'Ricky Gervais: Humanity', - releaseDate: '2018-03-13', - }, - { - id: 973164, - title: 'Ricky Gervais: SuperNature', - releaseDate: '2022-05-24', - }, - { - id: 487291, - title: 'Ride Like a Girl', - releaseDate: '2019-09-26', - }, - { - id: 36206, - title: 'Ride the High Country', - releaseDate: '1962-06-20', - }, - { - id: 355338, - title: "Riley's First Date?", - releaseDate: '2015-11-03', - }, - { - id: 301, - title: 'Rio Bravo', - releaseDate: '1959-03-08', - }, - { - id: 759054, - title: 'Rise', - releaseDate: '2022-06-23', - }, - { - id: 81188, - title: 'Rise of the Guardians', - releaseDate: '2012-11-21', - }, - { - id: 61791, - title: 'Rise of the Planet of the Apes', - releaseDate: '2011-08-03', - }, - { - id: 4147, - title: 'Road to Perdition', - releaseDate: '2002-07-12', - }, - { - id: 11886, - title: 'Robin Hood', - releaseDate: '1973-11-08', - }, - { - id: 649928, - title: 'Robin Robin', - releaseDate: '2021-10-09', - }, - { - id: 493100, - title: 'Robin Williams: Come Inside My Mind', - releaseDate: '2018-01-19', - }, - { - id: 5548, - title: 'RoboCop', - releaseDate: '1987-07-17', - }, - { - id: 42979, - title: 'Robot Chicken: Star Wars', - releaseDate: '2007-07-17', - }, - { - id: 51888, - title: 'Robot Chicken: Star Wars Episode III', - releaseDate: '2010-12-19', - }, - { - id: 504608, - title: 'Rocketman', - releaseDate: '2019-05-17', - }, - { - id: 1366, - title: 'Rocky', - releaseDate: '1976-11-20', - }, - { - id: 1367, - title: 'Rocky II', - releaseDate: '1979-06-15', - }, - { - id: 1374, - title: 'Rocky IV', - releaseDate: '1985-11-21', - }, - { - id: 1779, - title: 'Roger & Me', - releaseDate: '1989-09-01', - }, - { - id: 290382, - title: 'Roger Waters: The Wall', - releaseDate: '2014-09-29', - }, - { - id: 330459, - title: 'Rogue One: A Star Wars Story', - releaseDate: '2016-12-14', - }, - { - id: 804, - title: 'Roman Holiday', - releaseDate: '1953-08-26', - }, - { - id: 6003, - title: 'Romeo and Juliet', - releaseDate: '1968-04-02', - }, - { - id: 482321, - title: "Ron's Gone Wrong", - releaseDate: '2021-10-14', - }, - { - id: 361931, - title: 'Ronaldo', - releaseDate: '2015-11-09', - }, - { - id: 1242419, - title: 'Roofman', - releaseDate: '2025-10-08', - }, - { - id: 264644, - title: 'Room', - releaseDate: '2015-10-16', - }, - { - id: 1580, - title: 'Rope', - releaseDate: '1948-02-01', - }, - { - id: 826769, - title: 'Rosaline', - releaseDate: '2022-10-11', - }, - { - id: 805, - title: "Rosemary's Baby", - releaseDate: '1968-06-12', - }, - { - id: 10220, - title: 'Rounders', - releaseDate: '1998-09-11', - }, - { - id: 1040148, - title: 'Ruby Gillman, Teenage Kraken', - releaseDate: '2023-06-28', - }, - { - id: 103332, - title: 'Ruby Sparks', - releaseDate: '2012-07-25', - }, - { - id: 244403, - title: 'Rudderless', - releaseDate: '2014-10-17', - }, - { - id: 13382, - title: 'Rudolph the Red-Nosed Reindeer', - releaseDate: '1964-12-06', - }, - { - id: 14534, - title: 'Rudy', - releaseDate: '1993-09-17', - }, - { - id: 546121, - title: 'Run', - releaseDate: '2020-11-20', - }, - { - id: 18197, - title: 'Running on Empty', - releaseDate: '1988-09-09', - }, - { - id: 96721, - title: 'Rush', - releaseDate: '2013-09-02', - }, - { - id: 2109, - title: 'Rush Hour', - releaseDate: '1998-09-18', - }, - { - id: 11545, - title: 'Rushmore', - releaseDate: '1998-12-11', - }, - { - id: 38953, - title: "Ryan's Daughter", - releaseDate: '1970-03-19', - }, - { - id: 1049638, - title: 'Rye Lane', - releaseDate: '2023-03-17', - }, - { - id: 6620, - title: 'Sabrina', - releaseDate: '1954-09-01', - }, - { - id: 112949, - title: 'Safe Haven', - releaseDate: '2013-02-07', - }, - { - id: 727306, - title: 'Safety', - releaseDate: '2020-12-11', - }, - { - id: 22596, - title: 'Safety Last!', - releaseDate: '1923-04-01', - }, - { - id: 18783, - title: 'Sahara', - releaseDate: '1943-09-22', - }, - { - id: 6106, - title: 'Salvador', - releaseDate: '1986-04-23', - }, - { - id: 89708, - title: 'Samsara', - releaseDate: '2011-09-16', - }, - { - id: 13400, - title: "Santa Claus Is Comin' to Town", - releaseDate: '1970-12-13', - }, - { - id: 19236, - title: 'Santa Sangre', - releaseDate: '1989-11-24', - }, - { - id: 37230, - title: 'Saturday Night and Sunday Morning', - releaseDate: '1960-10-27', - }, - { - id: 19316, - title: 'Saving Face', - releaseDate: '2004-09-12', - }, - { - id: 140823, - title: 'Saving Mr. Banks', - releaseDate: '2013-11-29', - }, - { - id: 857, - title: 'Saving Private Ryan', - releaseDate: '1998-07-24', - }, - { - id: 2042, - title: 'Savior', - releaseDate: '1998-06-01', - }, - { - id: 246355, - title: 'Saw', - releaseDate: '2003-10-16', - }, - { - id: 176, - title: 'Saw', - releaseDate: '2004-10-01', - }, - { - id: 951491, - title: 'Saw X', - releaseDate: '2023-09-27', - }, - { - id: 2028, - title: 'Say Anything...', - releaseDate: '1989-04-14', - }, - { - id: 31587, - title: 'Scarecrow', - releaseDate: '1973-04-11', - }, - { - id: 877, - title: 'Scarface', - releaseDate: '1932-04-09', - }, - { - id: 111, - title: 'Scarface', - releaseDate: '1983-12-09', - }, - { - id: 17058, - title: 'Scarlet Street', - releaseDate: '1945-12-25', - }, - { - id: 9475, - title: 'Scent of a Woman', - releaseDate: '1992-12-23', - }, - { - id: 424, - title: "Schindler's List", - releaseDate: '1993-12-15', - }, - { - id: 271467, - title: 'School Dance', - releaseDate: '2014-07-02', - }, - { - id: 1584, - title: 'School of Rock', - releaseDate: '2003-10-03', - }, - { - id: 385103, - title: 'Scoob!', - releaseDate: '2020-07-08', - }, - { - id: 20410, - title: 'Scooby-Doo and the Alien Invaders', - releaseDate: '2000-10-03', - }, - { - id: 15601, - title: 'Scooby-Doo and the Cyber Chase', - releaseDate: '2001-03-22', - }, - { - id: 13350, - title: 'Scooby-Doo and the Ghoul School', - releaseDate: '1988-10-16', - }, - { - id: 13151, - title: 'Scooby-Doo on Zombie Island', - releaseDate: '1998-09-22', - }, - { - id: 484862, - title: 'Scooby-Doo! & Batman: The Brave and the Bold', - releaseDate: '2018-01-31', - }, - { - id: 32916, - title: 'Scooby-Doo! Abracadabra-Doo', - releaseDate: '2010-02-16', - }, - { - id: 347688, - title: 'Scooby-Doo! and KISS: Rock and Roll Mystery', - releaseDate: '2015-07-09', - }, - { - id: 560066, - title: 'Scooby-Doo! and the Curse of the 13th Ghost', - releaseDate: '2019-02-05', - }, - { - id: 12903, - title: 'Scooby-Doo! and the Goblin King', - releaseDate: '2008-09-23', - }, - { - id: 533592, - title: 'Scooby-Doo! and the Gourmet Ghost', - releaseDate: '2018-08-28', - }, - { - id: 30074, - title: 'Scooby-Doo! and the Legend of the Vampire', - releaseDate: '2003-03-04', - }, - { - id: 12902, - title: 'Scooby-Doo! and the Loch Ness Monster', - releaseDate: '2004-05-20', - }, - { - id: 21956, - title: 'Scooby-Doo! and the Monster of Mexico', - releaseDate: '2003-09-30', - }, - { - id: 37211, - title: 'Scooby-Doo! and the Reluctant Werewolf', - releaseDate: '1988-11-13', - }, - { - id: 16390, - title: 'Scooby-Doo! and the Samurai Sword', - releaseDate: '2009-04-07', - }, - { - id: 17681, - title: "Scooby-Doo! and the Witch's Ghost", - releaseDate: '1999-10-05', - }, - { - id: 409122, - title: 'Scooby-Doo! and WWE: Curse of the Speed Demon', - releaseDate: '2016-07-23', - }, - { - id: 45752, - title: 'Scooby-Doo! Camp Scare', - releaseDate: '2010-09-14', - }, - { - id: 284995, - title: 'Scooby-Doo! Frankencreepy', - releaseDate: '2014-08-05', - }, - { - id: 13351, - title: 'Scooby-Doo! in Arabian Nights', - releaseDate: '1994-09-03', - }, - { - id: 20558, - title: "Scooby-Doo! in Where's My Mummy?", - releaseDate: '2005-05-13', - }, - { - id: 67900, - title: 'Scooby-Doo! Legend of the Phantosaur', - releaseDate: '2011-09-03', - }, - { - id: 151535, - title: 'Scooby-Doo! Mask of the Blue Falcon', - releaseDate: '2012-12-15', - }, - { - id: 24787, - title: 'Scooby-Doo! Meets the Boo Brothers', - releaseDate: '1987-10-18', - }, - { - id: 302960, - title: 'Scooby-Doo! Moon Monster Madness', - releaseDate: '2015-02-03', - }, - { - id: 81900, - title: 'Scooby-Doo! Music of the Vampire', - releaseDate: '2012-03-07', - }, - { - id: 13355, - title: 'Scooby-Doo! Pirates Ahoy!', - releaseDate: '2006-09-10', - }, - { - id: 427564, - title: "Scooby-Doo! Shaggy's Showdown", - releaseDate: '2017-02-14', - }, - { - id: 203696, - title: 'Scooby-Doo! Stage Fright', - releaseDate: '2013-08-10', - }, - { - id: 682254, - title: 'Scooby-Doo! The Sword and the Scoob', - releaseDate: '2021-02-24', - }, - { - id: 258893, - title: 'Scooby-Doo! WrestleMania Mystery', - releaseDate: '2014-03-11', - }, - { - id: 22538, - title: 'Scott Pilgrim vs. the World', - releaseDate: '2010-08-12', - }, - { - id: 4232, - title: 'Scream', - releaseDate: '1996-12-20', - }, - { - id: 13188, - title: 'Scrooge', - releaseDate: '1951-11-30', - }, - { - id: 25476, - title: 'Scum', - releaseDate: '1979-09-12', - }, - { - id: 807, - title: 'Se7en', - releaseDate: '1995-09-22', - }, - { - id: 4464, - title: 'Seabiscuit', - releaseDate: '2003-07-22', - }, - { - id: 489999, - title: 'Searching', - releaseDate: '2018-08-24', - }, - { - id: 14291, - title: 'Searching for Bobby Fischer', - releaseDate: '1993-08-13', - }, - { - id: 84334, - title: 'Searching for Sugar Man', - releaseDate: '2012-06-30', - }, - { - id: 801058, - title: 'Seaspiracy', - releaseDate: '2021-03-24', - }, - { - id: 13156, - title: 'Secondhand Lions', - releaseDate: '2003-09-19', - }, - { - id: 20620, - title: 'Seconds', - releaseDate: '1966-10-05', - }, - { - id: 75258, - title: 'Secret of the Wings', - releaseDate: '2012-08-17', - }, - { - id: 39486, - title: 'Secretariat', - releaseDate: '2010-08-20', - }, - { - id: 11159, - title: 'Secrets & Lies', - releaseDate: '1996-05-24', - }, - { - id: 1122932, - title: 'See You on Venus', - releaseDate: '2023-07-20', - }, - { - id: 16052, - title: 'Selena', - releaseDate: '1997-03-21', - }, - { - id: 1022256, - title: 'Selena Gomez: My Mind & Me', - releaseDate: '2022-11-04', - }, - { - id: 273895, - title: 'Selma', - releaseDate: '2014-12-25', - }, - { - id: 58496, - title: 'Senna', - releaseDate: '2010-10-07', - }, - { - id: 4584, - title: 'Sense and Sensibility', - releaseDate: '1995-12-13', - }, - { - id: 1211472, - title: 'September 5', - releaseDate: '2024-11-07', - }, - { - id: 16320, - title: 'Serenity', - releaseDate: '2005-09-25', - }, - { - id: 16442, - title: 'Sergeant York', - releaseDate: '1941-09-27', - }, - { - id: 9040, - title: 'Serpico', - releaseDate: '1973-12-18', - }, - { - id: 9400, - title: 'Set It Off', - releaseDate: '1996-11-06', - }, - { - id: 16563, - title: 'Seven Brides for Seven Brothers', - releaseDate: '1954-07-22', - }, - { - id: 32600, - title: 'Seven Chances', - releaseDate: '1925-03-15', - }, - { - id: 23518, - title: 'Seven Days in May', - releaseDate: '1964-02-01', - }, - { - id: 11321, - title: 'Seven Pounds', - releaseDate: '2008-12-18', - }, - { - id: 978, - title: 'Seven Years in Tibet', - releaseDate: '1997-09-12', - }, - { - id: 433694, - title: 'Sgt. Stubby: An American Hero', - releaseDate: '2018-04-13', - }, - { - id: 21734, - title: 'Shadow of a Doubt', - releaseDate: '1943-01-12', - }, - { - id: 9905, - title: 'Shallow Grave', - releaseDate: '1994-12-22', - }, - { - id: 3110, - title: 'Shane', - releaseDate: '1953-04-23', - }, - { - id: 566525, - title: 'Shang-Chi and the Legend of the Ten Rings', - releaseDate: '2021-09-01', - }, - { - id: 747, - title: 'Shaun of the Dead', - releaseDate: '2004-04-09', - }, - { - id: 752939, - title: 'Shawn Mendes: In Wonder', - releaseDate: '2020-11-23', - }, - { - id: 1196573, - title: 'She Rides Shotgun', - releaseDate: '2025-07-31', - }, - { - id: 837881, - title: 'She Said', - releaseDate: '2022-11-17', - }, - { - id: 17483, - title: 'Shelter', - releaseDate: '2007-06-16', - }, - { - id: 10528, - title: 'Sherlock Holmes', - releaseDate: '2009-12-23', - }, - { - id: 58574, - title: 'Sherlock Holmes: A Game of Shadows', - releaseDate: '2011-11-22', - }, - { - id: 992, - title: 'Sherlock Jr.', - releaseDate: '1924-04-17', - }, - { - id: 379170, - title: 'Sherlock: The Abominable Bride', - releaseDate: '2016-01-01', - }, - { - id: 7863, - title: 'Shine', - releaseDate: '1996-08-15', - }, - { - id: 664300, - title: 'Shiva Baby', - releaseDate: '2021-03-26', - }, - { - id: 7485, - title: 'Shooter', - releaseDate: '2007-03-22', - }, - { - id: 8588, - title: 'Shooting Dogs', - releaseDate: '2006-03-08', - }, - { - id: 970284, - title: 'Shooting Stars', - releaseDate: '2023-06-02', - }, - { - id: 695, - title: 'Short Cuts', - releaseDate: '1993-10-01', - }, - { - id: 169813, - title: 'Short Term 12', - releaseDate: '2013-08-23', - }, - { - id: 13830, - title: 'Shottas', - releaseDate: '2002-02-27', - }, - { - id: 808, - title: 'Shrek', - releaseDate: '2001-05-18', - }, - { - id: 809, - title: 'Shrek 2', - releaseDate: '2004-05-19', - }, - { - id: 11324, - title: 'Shutter Island', - releaseDate: '2010-02-14', - }, - { - id: 273481, - title: 'Sicario', - releaseDate: '2015-09-17', - }, - { - id: 2359, - title: 'Sicko', - releaseDate: '2007-05-18', - }, - { - id: 110354, - title: 'Side by Side', - releaseDate: '2012-08-19', - }, - { - id: 9675, - title: 'Sideways', - releaseDate: '2004-10-22', - }, - { - id: 68730, - title: 'Silence', - releaseDate: '2016-12-23', - }, - { - id: 82693, - title: 'Silver Linings Playbook', - releaseDate: '2012-11-16', - }, - { - id: 1105832, - title: 'Simón', - releaseDate: '2023-04-15', - }, - { - id: 187, - title: 'Sin City', - releaseDate: '2005-04-01', - }, - { - id: 335797, - title: 'Sing', - releaseDate: '2016-11-23', - }, - { - id: 438695, - title: 'Sing 2', - releaseDate: '2021-12-01', - }, - { - id: 1155828, - title: 'Sing Sing', - releaseDate: '2024-07-12', - }, - { - id: 369557, - title: 'Sing Street', - releaseDate: '2016-03-11', - }, - { - id: 1371727, - title: 'Sing: Thriller', - releaseDate: '2024-10-15', - }, - { - id: 872, - title: "Singin' in the Rain", - releaseDate: '1952-04-10', - }, - { - id: 1233413, - title: 'Sinners', - releaseDate: '2025-04-16', - }, - { - id: 45745, - title: 'Sintel', - releaseDate: '2010-09-30', - }, - { - id: 25126, - title: 'Six Shooter', - releaseDate: '2004-10-14', - }, - { - id: 785522, - title: 'Skater Girl', - releaseDate: '2021-06-11', - }, - { - id: 37724, - title: 'Skyfall', - releaseDate: '2012-10-24', - }, - { - id: 6396, - title: 'SLC Punk', - releaseDate: '1998-09-24', - }, - { - id: 819, - title: 'Sleepers', - releaseDate: '1996-10-18', - }, - { - id: 2668, - title: 'Sleepy Hollow', - releaseDate: '1999-11-19', - }, - { - id: 993, - title: 'Sleuth', - releaseDate: '1972-12-10', - }, - { - id: 12498, - title: 'Sling Blade', - releaseDate: '1996-08-30', - }, - { - id: 668461, - title: 'Slumberland', - releaseDate: '2022-11-18', - }, - { - id: 12405, - title: 'Slumdog Millionaire', - releaseDate: '2008-11-12', - }, - { - id: 1146302, - title: 'Sly', - releaseDate: '2023-09-16', - }, - { - id: 10149, - title: 'Smoke', - releaseDate: '1995-06-09', - }, - { - id: 1037113, - title: 'Snack Shack', - releaseDate: '2024-03-15', - }, - { - id: 107, - title: 'Snatch', - releaseDate: '2000-09-01', - }, - { - id: 15242, - title: 'Snoopy, Come Home', - releaseDate: '1972-08-09', - }, - { - id: 313, - title: 'Snow Cake', - releaseDate: '2006-09-08', - }, - { - id: 408, - title: 'Snow White and the Seven Dwarfs', - releaseDate: '1938-01-14', - }, - { - id: 302401, - title: 'Snowden', - releaseDate: '2016-09-15', - }, - { - id: 295595, - title: 'Soaked in Bleach', - releaseDate: '2015-06-09', - }, - { - id: 239, - title: 'Some Like It Hot', - releaseDate: '1959-03-19', - }, - { - id: 28000, - title: 'Somebody Up There Likes Me', - releaseDate: '1956-07-04', - }, - { - id: 20544, - title: 'Something the Lord Made', - releaseDate: '2004-05-30', - }, - { - id: 16633, - title: 'Somewhere in Time', - releaseDate: '1980-10-02', - }, - { - id: 251519, - title: 'Son of Batman', - releaseDate: '2014-05-13', - }, - { - id: 110416, - title: 'Song of the Sea', - releaseDate: '2014-06-23', - }, - { - id: 454626, - title: 'Sonic the Hedgehog', - releaseDate: '2020-02-12', - }, - { - id: 675353, - title: 'Sonic the Hedgehog 2', - releaseDate: '2022-03-30', - }, - { - id: 939243, - title: 'Sonic the Hedgehog 3', - releaseDate: '2024-12-19', - }, - { - id: 43128, - title: 'Sons of the Desert', - releaseDate: '1933-12-29', - }, - { - id: 15764, - title: "Sophie's Choice", - releaseDate: '1982-12-08', - }, - { - id: 38985, - title: 'Sorcerer', - releaseDate: '1977-06-24', - }, - { - id: 522369, - title: 'Sorry We Missed You', - releaseDate: '2019-10-04', - }, - { - id: 508442, - title: 'Soul', - releaseDate: '2020-12-25', - }, - { - id: 43959, - title: 'Soul Surfer', - releaseDate: '2011-04-08', - }, - { - id: 157117, - title: 'Sound City', - releaseDate: '2013-01-18', - }, - { - id: 678512, - title: 'Sound of Freedom', - releaseDate: '2023-07-03', - }, - { - id: 502033, - title: 'Sound of Metal', - releaseDate: '2020-11-20', - }, - { - id: 45612, - title: 'Source Code', - releaseDate: '2011-03-30', - }, - { - id: 1219926, - title: 'South Park (Not Suitable for Children)', - releaseDate: '2023-12-20', - }, - { - id: 974691, - title: 'South Park the Streaming Wars', - releaseDate: '2022-06-01', - }, - { - id: 993729, - title: 'South Park the Streaming Wars Part 2', - releaseDate: '2022-07-13', - }, - { - id: 9473, - title: 'South Park: Bigger, Longer & Uncut', - releaseDate: '1999-06-24', - }, - { - id: 1190012, - title: 'South Park: Joining the Panderverse', - releaseDate: '2023-10-27', - }, - { - id: 874299, - title: 'South Park: Post COVID', - releaseDate: '2021-11-25', - }, - { - id: 874300, - title: 'South Park: Post COVID: The Return of COVID', - releaseDate: '2021-12-16', - }, - { - id: 1290938, - title: 'South Park: The End of Obesity', - releaseDate: '2024-05-24', - }, - { - id: 307081, - title: 'Southpaw', - releaseDate: '2015-03-24', - }, - { - id: 264337, - title: 'Spare Parts', - releaseDate: '2015-01-16', - }, - { - id: 967, - title: 'Spartacus', - releaseDate: '1960-10-13', - }, - { - id: 15058, - title: 'Speak', - releaseDate: '2004-01-20', - }, - { - id: 1114513, - title: 'Speak No Evil', - releaseDate: '2024-09-11', - }, - { - id: 1637, - title: 'Speed', - releaseDate: '1994-06-09', - }, - { - id: 4174, - title: 'Spellbound', - releaseDate: '1945-11-08', - }, - { - id: 557, - title: 'Spider-Man', - releaseDate: '2002-05-01', - }, - { - id: 558, - title: 'Spider-Man 2', - releaseDate: '2004-06-25', - }, - { - id: 569094, - title: 'Spider-Man: Across the Spider-Verse', - releaseDate: '2023-05-31', - }, - { - id: 429617, - title: 'Spider-Man: Far From Home', - releaseDate: '2019-06-28', - }, - { - id: 315635, - title: 'Spider-Man: Homecoming', - releaseDate: '2017-07-05', - }, - { - id: 324857, - title: 'Spider-Man: Into the Spider-Verse', - releaseDate: '2018-12-06', - }, - { - id: 634649, - title: 'Spider-Man: No Way Home', - releaseDate: '2021-12-15', - }, - { - id: 467062, - title: 'Spielberg', - releaseDate: '2017-10-05', - }, - { - id: 431693, - title: 'Spies in Disguise', - releaseDate: '2019-12-04', - }, - { - id: 637693, - title: 'Spirit Untamed', - releaseDate: '2021-05-20', - }, - { - id: 9023, - title: 'Spirit: Stallion of the Cimarron', - releaseDate: '2002-05-24', - }, - { - id: 28569, - title: 'Splendor in the Grass', - releaseDate: '1961-10-10', - }, - { - id: 381288, - title: 'Split', - releaseDate: '2017-01-19', - }, - { - id: 314365, - title: 'Spotlight', - releaseDate: '2015-11-06', - }, - { - id: 239563, - title: 'St. Vincent', - releaseDate: '2014-10-09', - }, - { - id: 995, - title: 'Stagecoach', - releaseDate: '1939-03-02', - }, - { - id: 632, - title: 'Stalag 17', - releaseDate: '1953-05-29', - }, - { - id: 29154, - title: 'Stand and Deliver', - releaseDate: '1988-03-11', - }, - { - id: 235, - title: 'Stand by Me', - releaseDate: '1986-08-08', - }, - { - id: 30416, - title: 'Stanley Kubrick: A Life in Pictures', - releaseDate: '2001-05-02', - }, - { - id: 13475, - title: 'Star Trek', - releaseDate: '2009-05-06', - }, - { - id: 154, - title: 'Star Trek II: The Wrath of Khan', - releaseDate: '1982-06-04', - }, - { - id: 54138, - title: 'Star Trek Into Darkness', - releaseDate: '2013-05-05', - }, - { - id: 168, - title: 'Star Trek IV: The Voyage Home', - releaseDate: '1986-11-26', - }, - { - id: 174, - title: 'Star Trek VI: The Undiscovered Country', - releaseDate: '1991-12-06', - }, - { - id: 199, - title: 'Star Trek: First Contact', - releaseDate: '1996-11-22', - }, - { - id: 11, - title: 'Star Wars', - releaseDate: '1977-05-25', - }, - { - id: 287663, - title: 'Star Wars Rebels: Spark of Rebellion', - releaseDate: '2014-10-03', - }, - { - id: 1895, - title: 'Star Wars: Episode III - Revenge of the Sith', - releaseDate: '2005-05-17', - }, - { - id: 140607, - title: 'Star Wars: The Force Awakens', - releaseDate: '2015-12-15', - }, - { - id: 2270, - title: 'Stardust', - releaseDate: '2007-08-10', - }, - { - id: 2164, - title: 'Stargate', - releaseDate: '1994-10-28', - }, - { - id: 12914, - title: 'Stargate: Continuum', - releaseDate: '2008-07-29', - }, - { - id: 13001, - title: 'Stargate: The Ark of Truth', - releaseDate: '2008-03-11', - }, - { - id: 382748, - title: 'Stargirl', - releaseDate: '2020-03-10', - }, - { - id: 209276, - title: 'Starred Up', - releaseDate: '2014-03-21', - }, - { - id: 563, - title: 'Starship Troopers', - releaseDate: '1997-11-07', - }, - { - id: 35558, - title: 'Starstruck', - releaseDate: '2010-02-14', - }, - { - id: 416494, - title: 'Status Update', - releaseDate: '2018-02-09', - }, - { - id: 25768, - title: 'Steamboat Bill, Jr.', - releaseDate: '1928-05-09', - }, - { - id: 53565, - title: 'Steamboat Willie', - releaseDate: '1928-05-15', - }, - { - id: 10860, - title: 'Steel Magnolias', - releaseDate: '1989-11-15', - }, - { - id: 9441, - title: 'Stepmom', - releaseDate: '1998-12-25', - }, - { - id: 537061, - title: 'Steven Universe: The Movie', - releaseDate: '2019-10-07', - }, - { - id: 284293, - title: 'Still Alice', - releaseDate: '2014-12-05', - }, - { - id: 216156, - title: 'Still Life', - releaseDate: '2013-11-28', - }, - { - id: 1058699, - title: 'STILL: A Michael J. Fox Movie', - releaseDate: '2023-01-20', - }, - { - id: 1931, - title: 'Stomp the Yard', - releaseDate: '2007-05-16', - }, - { - id: 24128, - title: 'Stop Making Sense', - releaseDate: '1984-10-19', - }, - { - id: 128216, - title: 'Stories We Tell', - releaseDate: '2012-10-12', - }, - { - id: 277216, - title: 'Straight Outta Compton', - releaseDate: '2015-08-11', - }, - { - id: 843906, - title: 'Straight Outta Nowhere: Scooby-Doo! Meets Courage the Cowardly Dog', - releaseDate: '2021-09-14', - }, - { - id: 23397, - title: 'Straight Time', - releaseDate: '1978-03-18', - }, - { - id: 281, - title: 'Strange Days', - releaseDate: '1995-10-13', - }, - { - id: 302429, - title: 'Strange Magic', - releaseDate: '2015-01-23', - }, - { - id: 1262, - title: 'Stranger Than Fiction', - releaseDate: '2006-09-09', - }, - { - id: 469, - title: 'Stranger Than Paradise', - releaseDate: '1984-10-01', - }, - { - id: 845, - title: 'Strangers on a Train', - releaseDate: '1951-06-27', - }, - { - id: 1426776, - title: 'STRAW', - releaseDate: '2025-06-05', - }, - { - id: 994, - title: 'Straw Dogs', - releaseDate: '1971-11-25', - }, - { - id: 912908, - title: 'Strays', - releaseDate: '2023-08-17', - }, - { - id: 50032, - title: 'Stuart: A Life Backwards', - releaseDate: '2007-09-23', - }, - { - id: 111969, - title: 'Stuck in Love', - releaseDate: '2013-06-14', - }, - { - id: 799375, - title: 'Stutz', - releaseDate: '2022-11-14', - }, - { - id: 49020, - title: 'Submarine', - releaseDate: '2011-03-18', - }, - { - id: 1130276, - title: 'Succubus', - releaseDate: '2024-10-06', - }, - { - id: 14698, - title: 'Suddenly, Last Summer', - releaseDate: '1959-12-22', - }, - { - id: 245168, - title: 'Suffragette', - releaseDate: '2015-10-16', - }, - { - id: 487242, - title: 'Suicide Squad: Hell to Pay', - releaseDate: '2018-03-23', - }, - { - id: 271674, - title: 'Suite Française', - releaseDate: '2015-03-12', - }, - { - id: 16305, - title: "Sullivan's Travels", - releaseDate: '1941-11-30', - }, - { - id: 363676, - title: 'Sully', - releaseDate: '2016-09-07', - }, - { - id: 776527, - title: 'Summer of Soul (...Or, When the Revolution Could Not Be Televised)', - releaseDate: '2021-07-02', - }, - { - id: 523977, - title: 'Summerland', - releaseDate: '2020-07-24', - }, - { - id: 631, - title: 'Sunrise: A Song of Two Humans', - releaseDate: '1927-11-04', - }, - { - id: 599, - title: 'Sunset Boulevard', - releaseDate: '1950-08-10', - }, - { - id: 1128559, - title: 'Super/Man: The Christopher Reeve Story', - releaseDate: '2024-09-21', - }, - { - id: 8363, - title: 'Superbad', - releaseDate: '2007-08-17', - }, - { - id: 1061474, - title: 'Superman', - releaseDate: '2025-07-09', - }, - { - id: 1924, - title: 'Superman', - releaseDate: '1978-12-14', - }, - { - id: 624479, - title: 'Superman II: The Richard Donner Cut', - releaseDate: '2006-11-02', - }, - { - id: 45162, - title: 'Superman/Batman: Apocalypse', - releaseDate: '2010-09-28', - }, - { - id: 22855, - title: 'Superman/Batman: Public Enemies', - releaseDate: '2009-09-29', - }, - { - id: 43641, - title: 'Superman/Shazam!: The Return of Black Adam', - releaseDate: '2010-11-16', - }, - { - id: 618354, - title: 'Superman: Man of Tomorrow', - releaseDate: '2020-08-23', - }, - { - id: 618355, - title: 'Superman: Red Son', - releaseDate: '2020-02-24', - }, - { - id: 412924, - title: 'Supersonic', - releaseDate: '2016-10-02', - }, - { - id: 11462, - title: 'Suspicion', - releaseDate: '1941-11-14', - }, - { - id: 765245, - title: 'Swan Song', - releaseDate: '2021-12-17', - }, - { - id: 13885, - title: 'Sweeney Todd: The Demon Barber of Fleet Street', - releaseDate: '2007-12-21', - }, - { - id: 976, - title: 'Sweet Smell of Success', - releaseDate: '1957-07-04', - }, - { - id: 216769, - title: 'Swindle', - releaseDate: '2014-03-22', - }, - { - id: 4960, - title: 'Synecdoche, New York', - releaseDate: '2008-10-24', - }, - { - id: 977, - title: 'Tabu: A Story of the South Seas', - releaseDate: '1931-07-30', - }, - { - id: 64720, - title: 'Take Shelter', - releaseDate: '2011-09-30', - }, - { - id: 11485, - title: 'Take the Money and Run', - releaseDate: '1969-08-18', - }, - { - id: 8681, - title: 'Taken', - releaseDate: '2008-02-18', - }, - { - id: 25405, - title: 'Taking Chance', - releaseDate: '2009-09-21', - }, - { - id: 10132, - title: 'Talk Radio', - releaseDate: '1988-12-21', - }, - { - id: 1008042, - title: 'Talk to Me', - releaseDate: '2023-07-26', - }, - { - id: 38757, - title: 'Tangled', - releaseDate: '2010-11-24', - }, - { - id: 82881, - title: 'Tangled Ever After', - releaseDate: '2012-01-13', - }, - { - id: 19383, - title: 'Targets', - releaseDate: '1968-08-13', - }, - { - id: 37135, - title: 'Tarzan', - releaseDate: '1999-06-17', - }, - { - id: 103, - title: 'Taxi Driver', - releaseDate: '1976-02-09', - }, - { - id: 1160164, - title: 'TAYLOR SWIFT | THE ERAS TOUR', - releaseDate: '2023-10-13', - }, - { - id: 568332, - title: 'Taylor Swift: Reputation Stadium Tour', - releaseDate: '2018-12-31', - }, - { - id: 373558, - title: 'Taylor Swift: The 1989 World Tour - Live', - releaseDate: '2015-12-20', - }, - { - id: 413279, - title: 'Team Thor', - releaseDate: '2016-08-28', - }, - { - id: 474395, - title: 'Teen Titans Go! To the Movies', - releaseDate: '2018-07-27', - }, - { - id: 556901, - title: 'Teen Titans Go! vs. Teen Titans', - releaseDate: '2019-07-21', - }, - { - id: 408647, - title: 'Teen Titans: The Judas Contract', - releaseDate: '2017-03-31', - }, - { - id: 16237, - title: 'Teen Titans: Trouble in Tokyo', - releaseDate: '2006-09-15', - }, - { - id: 877703, - title: 'Teen Wolf: The Movie', - releaseDate: '2023-01-18', - }, - { - id: 614930, - title: 'Teenage Mutant Ninja Turtles: Mutant Mayhem', - releaseDate: '2023-07-31', - }, - { - id: 475888, - title: 'Tell It to the Bees', - releaseDate: '2019-05-03', - }, - { - id: 627070, - title: 'Tell Me Who I Am', - releaseDate: '2019-10-18', - }, - { - id: 33602, - title: 'Temple Grandin', - releaseDate: '2010-02-06', - }, - { - id: 14843, - title: 'Ten Inch Hero', - releaseDate: '2007-04-25', - }, - { - id: 577922, - title: 'Tenet', - releaseDate: '2020-08-22', - }, - { - id: 280, - title: 'Terminator 2: Judgment Day', - releaseDate: '1991-07-03', - }, - { - id: 11050, - title: 'Terms of Endearment', - releaseDate: '1983-11-20', - }, - { - id: 11121, - title: 'Tess', - releaseDate: '1979-10-06', - }, - { - id: 284689, - title: 'Testament of Youth', - releaseDate: '2015-01-16', - }, - { - id: 726759, - title: 'Tetris', - releaseDate: '2023-03-15', - }, - { - id: 9388, - title: 'Thank You for Smoking', - releaseDate: '2005-09-09', - }, - { - id: 645757, - title: 'That Christmas', - releaseDate: '2024-11-27', - }, - { - id: 260, - title: 'The 39 Steps', - releaseDate: '1935-06-06', - }, - { - id: 2756, - title: 'The Abyss', - releaseDate: '1989-08-09', - }, - { - id: 302946, - title: 'The Accountant', - releaseDate: '2016-10-13', - }, - { - id: 870028, - title: 'The Accountant²', - releaseDate: '2025-04-23', - }, - { - id: 10868, - title: 'The Accused', - releaseDate: '1988-10-14', - }, - { - id: 696806, - title: 'The Adam Project', - releaseDate: '2022-03-11', - }, - { - id: 2907, - title: 'The Addams Family', - releaseDate: '1991-11-22', - }, - { - id: 2759, - title: 'The Adventures of Priscilla, Queen of the Desert', - releaseDate: '1994-05-31', - }, - { - id: 10907, - title: 'The Adventures of Robin Hood', - releaseDate: '1938-05-13', - }, - { - id: 488, - title: 'The African Queen', - releaseDate: '1952-01-07', - }, - { - id: 293863, - title: 'The Age of Adaline', - releaseDate: '2015-04-16', - }, - { - id: 11209, - title: 'The Alamo', - releaseDate: '1960-10-23', - }, - { - id: 682587, - title: 'The Alpinist', - releaseDate: '2021-02-07', - }, - { - id: 10514, - title: 'The Andromeda Strain', - releaseDate: '1971-03-12', - }, - { - id: 454640, - title: 'The Angry Birds Movie 2', - releaseDate: '2019-08-02', - }, - { - id: 55931, - title: 'The Animatrix', - releaseDate: '2003-05-09', - }, - { - id: 284, - title: 'The Apartment', - releaseDate: '1960-06-21', - }, - { - id: 10112, - title: 'The Aristocats', - releaseDate: '1970-12-24', - }, - { - id: 68450, - title: 'The Art of Flight', - releaseDate: '2011-09-08', - }, - { - id: 522924, - title: 'The Art of Racing in the Rain', - releaseDate: '2019-08-08', - }, - { - id: 16958, - title: 'The Asphalt Jungle', - releaseDate: '1950-05-12', - }, - { - id: 4512, - title: 'The Assassination of Jesse James by the Coward Robert Ford', - releaseDate: '2007-09-20', - }, - { - id: 24428, - title: 'The Avengers', - releaseDate: '2012-04-25', - }, - { - id: 2567, - title: 'The Aviator', - releaseDate: '2004-12-17', - }, - { - id: 14675, - title: 'The Awful Truth', - releaseDate: '1937-10-21', - }, - { - id: 397601, - title: 'The Bachelors', - releaseDate: '2017-10-20', - }, - { - id: 32499, - title: 'The Bad and the Beautiful', - releaseDate: '1952-12-25', - }, - { - id: 629542, - title: 'The Bad Guys', - releaseDate: '2022-03-17', - }, - { - id: 1175942, - title: 'The Bad Guys 2', - releaseDate: '2025-07-24', - }, - { - id: 532814, - title: 'The Bad Seed', - releaseDate: '2018-09-09', - }, - { - id: 42196, - title: 'The Bad Seed', - releaseDate: '1956-09-12', - }, - { - id: 537996, - title: 'The Ballad of Buster Scruggs', - releaseDate: '2018-11-09', - }, - { - id: 67572, - title: 'The Band Concert', - releaseDate: '1935-02-23', - }, - { - id: 29376, - title: 'The Band Wagon', - releaseDate: '1953-08-07', - }, - { - id: 627725, - title: 'The Banker', - releaseDate: '2020-03-06', - }, - { - id: 674324, - title: 'The Banshees of Inisherin', - releaseDate: '2022-10-20', - }, - { - id: 10474, - title: 'The Basketball Diaries', - releaseDate: '1995-04-21', - }, - { - id: 414906, - title: 'The Batman', - releaseDate: '2022-03-01', - }, - { - id: 20077, - title: 'The Batman vs. Dracula', - releaseDate: '2005-10-18', - }, - { - id: 15267, - title: 'The Beast', - releaseDate: '1988-09-14', - }, - { - id: 391698, - title: 'The Beatles: Eight Days a Week - The Touring Years', - releaseDate: '2016-09-15', - }, - { - id: 866398, - title: 'The Beekeeper', - releaseDate: '2024-01-08', - }, - { - id: 31906, - title: 'The Beguiled', - releaseDate: '1971-01-23', - }, - { - id: 458131, - title: 'The Best of Enemies', - releaseDate: '2019-04-05', - }, - { - id: 239571, - title: 'The Best of Me', - releaseDate: '2014-10-15', - }, - { - id: 887, - title: 'The Best Years of Our Lives', - releaseDate: '1946-12-25', - }, - { - id: 2525, - title: 'The Bible: In the Beginning...', - releaseDate: '1966-09-28', - }, - { - id: 19974, - title: 'The Big Clock', - releaseDate: '1948-03-18', - }, - { - id: 22342, - title: 'The Big Combo', - releaseDate: '1955-02-13', - }, - { - id: 12501, - title: 'The Big Country', - releaseDate: '1958-09-30', - }, - { - id: 14580, - title: 'The Big Heat', - releaseDate: '1953-10-14', - }, - { - id: 115, - title: 'The Big Lebowski', - releaseDate: '1998-03-06', - }, - { - id: 318846, - title: 'The Big Short', - releaseDate: '2015-12-11', - }, - { - id: 416477, - title: 'The Big Sick', - releaseDate: '2017-03-30', - }, - { - id: 910, - title: 'The Big Sleep', - releaseDate: '1946-08-22', - }, - { - id: 543084, - title: 'The Biggest Little Farm', - releaseDate: '2019-06-05', - }, - { - id: 11000, - title: 'The Birdcage', - releaseDate: '1996-03-08', - }, - { - id: 571, - title: 'The Birds', - releaseDate: '1963-03-28', - }, - { - id: 19490, - title: "The Bishop's Wife", - releaseDate: '1947-12-25', - }, - { - id: 756999, - title: 'The Black Phone', - releaseDate: '2022-06-16', - }, - { - id: 17264, - title: 'The Black Stallion', - releaseDate: '1979-10-13', - }, - { - id: 22881, - title: 'The Blind Side', - releaseDate: '2009-11-20', - }, - { - id: 200481, - title: 'The Blue Umbrella', - releaseDate: '2013-02-12', - }, - { - id: 525, - title: 'The Blues Brothers', - releaseDate: '1980-06-16', - }, - { - id: 18947, - title: 'The Boat That Rocked', - releaseDate: '2009-04-01', - }, - { - id: 382614, - title: 'The Book of Henry', - releaseDate: '2017-06-16', - }, - { - id: 228326, - title: 'The Book of Life', - releaseDate: '2014-10-01', - }, - { - id: 203833, - title: 'The Book Thief', - releaseDate: '2013-11-08', - }, - { - id: 8374, - title: 'The Boondock Saints', - releaseDate: '1999-01-22', - }, - { - id: 459151, - title: 'The Boss Baby: Family Business', - releaseDate: '2021-07-01', - }, - { - id: 2501, - title: 'The Bourne Identity', - releaseDate: '2002-06-14', - }, - { - id: 2502, - title: 'The Bourne Supremacy', - releaseDate: '2004-07-23', - }, - { - id: 2503, - title: 'The Bourne Ultimatum', - releaseDate: '2007-08-03', - }, - { - id: 14574, - title: 'The Boy in the Striped Pyjamas', - releaseDate: '2008-05-07', - }, - { - id: 491480, - title: 'The Boy Who Harnessed the Wind', - releaseDate: '2019-02-14', - }, - { - id: 995133, - title: 'The Boy, the Mole, the Fox and the Horse', - releaseDate: '2022-12-25', - }, - { - id: 823452, - title: 'The Boys in the Boat', - releaseDate: '2023-12-25', - }, - { - id: 435129, - title: 'The Breadwinner', - releaseDate: '2017-11-17', - }, - { - id: 2108, - title: 'The Breakfast Club', - releaseDate: '1985-02-15', - }, - { - id: 826, - title: 'The Bridge on the River Kwai', - releaseDate: '1957-10-11', - }, - { - id: 688, - title: 'The Bridges of Madison County', - releaseDate: '1995-06-02', - }, - { - id: 616251, - title: 'The Broken Hearts Gallery', - releaseDate: '2020-09-11', - }, - { - id: 7350, - title: 'The Bucket List', - releaseDate: '2007-12-25', - }, - { - id: 20007, - title: 'The Bugs Bunny/Road Runner Movie', - releaseDate: '1979-09-28', - }, - { - id: 763165, - title: 'The Burial', - releaseDate: '2023-10-06', - }, - { - id: 132363, - title: 'The Butler', - releaseDate: '2013-08-16', - }, - { - id: 1954, - title: 'The Butterfly Effect', - releaseDate: '2004-01-17', - }, - { - id: 10178, - title: 'The Caine Mutiny', - releaseDate: '1954-06-24', - }, - { - id: 481848, - title: 'The Call of the Wild', - releaseDate: '2020-02-19', - }, - { - id: 31411, - title: 'The Cameraman', - releaseDate: '1928-09-10', - }, - { - id: 13852, - title: 'The Castle', - releaseDate: '1997-04-10', - }, - { - id: 39853, - title: 'The Cat Concerto', - releaseDate: '1947-04-26', - }, - { - id: 31602, - title: 'The Chase', - releaseDate: '1966-02-18', - }, - { - id: 20139, - title: "The Children's Hour", - releaseDate: '1961-12-19', - }, - { - id: 988, - title: 'The China Syndrome', - releaseDate: '1979-03-16', - }, - { - id: 330483, - title: 'The Choice', - releaseDate: '2016-02-04', - }, - { - id: 527435, - title: 'The Christmas Chronicles', - releaseDate: '2018-11-22', - }, - { - id: 411, - title: 'The Chronicles of Narnia: The Lion, the Witch and the Wardrobe', - releaseDate: '2005-12-07', - }, - { - id: 1715, - title: 'The Cider House Rules', - releaseDate: '1999-12-17', - }, - { - id: 28978, - title: 'The Circus', - releaseDate: '1928-01-06', - }, - { - id: 42740, - title: 'The Collector', - releaseDate: '1965-06-17', - }, - { - id: 558915, - title: 'The Color Purple', - releaseDate: '2023-12-25', - }, - { - id: 873, - title: 'The Color Purple', - releaseDate: '1985-12-18', - }, - { - id: 11663, - title: 'The Commitments', - releaseDate: '1991-08-14', - }, - { - id: 138843, - title: 'The Conjuring', - releaseDate: '2013-07-18', - }, - { - id: 259693, - title: 'The Conjuring 2', - releaseDate: '2016-06-08', - }, - { - id: 423108, - title: 'The Conjuring: The Devil Made Me Do It', - releaseDate: '2021-05-25', - }, - { - id: 592, - title: 'The Conversation', - releaseDate: '1974-04-07', - }, - { - id: 7452, - title: 'The Cook, the Thief, His Wife & Her Lover', - releaseDate: '1989-10-13', - }, - { - id: 11420, - title: 'The Corporation', - releaseDate: '2003-09-10', - }, - { - id: 11362, - title: 'The Count of Monte Cristo', - releaseDate: '2002-01-23', - }, - { - id: 522241, - title: 'The Courier', - releaseDate: '2020-01-24', - }, - { - id: 11839, - title: 'The Court Jester', - releaseDate: '1955-12-24', - }, - { - id: 23128, - title: 'The Cove', - releaseDate: '2009-07-31', - }, - { - id: 15573, - title: 'The Cowboys', - releaseDate: '1972-01-13', - }, - { - id: 670292, - title: 'The Creator', - releaseDate: '2023-09-27', - }, - { - id: 11570, - title: 'The Crimson Pirate', - releaseDate: '1952-09-27', - }, - { - id: 529203, - title: 'The Croods: A New Age', - releaseDate: '2020-11-25', - }, - { - id: 9495, - title: 'The Crow', - releaseDate: '1994-05-11', - }, - { - id: 3061, - title: 'The Crowd', - releaseDate: '1928-03-03', - }, - { - id: 6715, - title: 'The Cure', - releaseDate: '1995-04-21', - }, - { - id: 4922, - title: 'The Curious Case of Benjamin Button', - releaseDate: '2008-12-25', - }, - { - id: 16562, - title: 'The Cutting Edge', - releaseDate: '1992-03-27', - }, - { - id: 21641, - title: 'The Damned United', - releaseDate: '2009-03-27', - }, - { - id: 306819, - title: 'The Danish Girl', - releaseDate: '2015-11-27', - }, - { - id: 4538, - title: 'The Darjeeling Limited', - releaseDate: '2007-09-07', - }, - { - id: 11639, - title: 'The Dark Crystal', - releaseDate: '1982-12-17', - }, - { - id: 155, - title: 'The Dark Knight', - releaseDate: '2008-07-16', - }, - { - id: 49026, - title: 'The Dark Knight Rises', - releaseDate: '2012-07-17', - }, - { - id: 445651, - title: 'The Darkest Minds', - releaseDate: '2018-07-25', - }, - { - id: 489471, - title: 'The Dawn Wall', - releaseDate: '2017-11-01', - }, - { - id: 4909, - title: 'The Day of the Jackal', - releaseDate: '1973-05-16', - }, - { - id: 870360, - title: 'The Day the Earth Blew Up: A Looney Tunes Movie', - releaseDate: '2024-08-01', - }, - { - id: 828, - title: 'The Day the Earth Stood Still', - releaseDate: '1951-09-18', - }, - { - id: 11336, - title: 'The Dead Zone', - releaseDate: '1983-10-21', - }, - { - id: 402897, - title: 'The Death of Stalin', - releaseDate: '2017-10-20', - }, - { - id: 487670, - title: 'The Death of Superman', - releaseDate: '2018-07-24', - }, - { - id: 1058647, - title: 'The Deepest Breath', - releaseDate: '2023-01-21', - }, - { - id: 11778, - title: 'The Deer Hunter', - releaseDate: '1978-12-08', - }, - { - id: 11414, - title: 'The Defiant Ones', - releaseDate: '1958-08-14', - }, - { - id: 1422, - title: 'The Departed', - releaseDate: '2006-10-04', - }, - { - id: 18612, - title: 'The Desperate Hours', - releaseDate: '1955-10-05', - }, - { - id: 499932, - title: 'The Devil All the Time', - releaseDate: '2020-09-11', - }, - { - id: 350, - title: 'The Devil Wears Prada', - releaseDate: '2006-06-29', - }, - { - id: 1813, - title: "The Devil's Advocate", - releaseDate: '1997-10-17', - }, - { - id: 31767, - title: 'The Devils', - releaseDate: '1971-07-16', - }, - { - id: 2576, - title: 'The Diary of Anne Frank', - releaseDate: '1959-03-18', - }, - { - id: 327331, - title: 'The Dirt', - releaseDate: '2019-03-22', - }, - { - id: 1654, - title: 'The Dirty Dozen', - releaseDate: '1967-06-15', - }, - { - id: 371638, - title: 'The Disaster Artist', - releaseDate: '2017-03-12', - }, - { - id: 10537, - title: 'The Doors', - releaseDate: '1991-03-01', - }, - { - id: 10831, - title: "The Draughtsman's Contract", - releaseDate: '1982-11-12', - }, - { - id: 1278, - title: 'The Dreamers', - releaseDate: '2003-10-10', - }, - { - id: 2153, - title: 'The Driver', - releaseDate: '1978-06-08', - }, - { - id: 19067, - title: 'The Duellists', - releaseDate: '1977-08-31', - }, - { - id: 376660, - title: 'The Edge of Seventeen', - releaseDate: '2016-11-18', - }, - { - id: 1955, - title: 'The Elephant Man', - releaseDate: '1980-10-09', - }, - { - id: 17187, - title: "The Emperor's Club", - releaseDate: '2002-11-22', - }, - { - id: 11688, - title: "The Emperor's New Groove", - releaseDate: '2000-12-15', - }, - { - id: 1891, - title: 'The Empire Strikes Back', - releaseDate: '1980-05-20', - }, - { - id: 249688, - title: 'The End of the Tour', - releaseDate: '2015-07-31', - }, - { - id: 15876, - title: 'The Enemy Below', - releaseDate: '1957-12-25', - }, - { - id: 846433, - title: 'The Enforcer', - releaseDate: '2022-09-22', - }, - { - id: 409, - title: 'The English Patient', - releaseDate: '1996-11-14', - }, - { - id: 156022, - title: 'The Equalizer', - releaseDate: '2014-09-24', - }, - { - id: 926393, - title: 'The Equalizer 3', - releaseDate: '2023-08-30', - }, - { - id: 764, - title: 'The Evil Dead', - releaseDate: '1981-10-15', - }, - { - id: 836225, - title: 'The Exorcism of God', - releaseDate: '2022-03-11', - }, - { - id: 9552, - title: 'The Exorcist', - releaseDate: '1973-12-26', - }, - { - id: 14325, - title: 'The Express', - releaseDate: '2008-10-10', - }, - { - id: 804095, - title: 'The Fabelmans', - releaseDate: '2022-11-11', - }, - { - id: 14784, - title: 'The Fall', - releaseDate: '2006-09-09', - }, - { - id: 21631, - title: 'The Fallen Idol', - releaseDate: '1948-09-30', - }, - { - id: 795514, - title: 'The Fallout', - releaseDate: '2021-03-17', - }, - { - id: 1029575, - title: 'The Family Plan', - releaseDate: '2023-12-14', - }, - { - id: 565310, - title: 'The Farewell', - releaseDate: '2019-07-12', - }, - { - id: 9799, - title: 'The Fast and the Furious', - releaseDate: '2001-06-22', - }, - { - id: 600354, - title: 'The Father', - releaseDate: '2020-12-23', - }, - { - id: 222935, - title: 'The Fault in Our Stars', - releaseDate: '2014-06-02', - }, - { - id: 375262, - title: 'The Favourite', - releaseDate: '2018-11-23', - }, - { - id: 45317, - title: 'The Fighter', - releaseDate: '2010-12-10', - }, - { - id: 177, - title: 'The Fisher King', - releaseDate: '1991-09-20', - }, - { - id: 10243, - title: 'The Flight of the Phoenix', - releaseDate: '1965-12-15', - }, - { - id: 394117, - title: 'The Florida Project', - releaseDate: '2017-10-06', - }, - { - id: 11815, - title: 'The Fly', - releaseDate: '1958-07-16', - }, - { - id: 9426, - title: 'The Fly', - releaseDate: '1986-08-15', - }, - { - id: 20789, - title: 'The Flyboys', - releaseDate: '2008-08-15', - }, - { - id: 12698, - title: 'The Fog of War', - releaseDate: '2003-10-26', - }, - { - id: 1186532, - title: 'The Forge', - releaseDate: '2024-08-22', - }, - { - id: 1888, - title: 'The Fortune Cookie', - releaseDate: '1966-10-19', - }, - { - id: 310307, - title: 'The Founder', - releaseDate: '2016-11-24', - }, - { - id: 10948, - title: 'The Fox and the Hound', - releaseDate: '1981-07-10', - }, - { - id: 1051, - title: 'The French Connection', - releaseDate: '1971-10-09', - }, - { - id: 542178, - title: 'The French Dispatch of the Liberty, Kansas Evening Sun', - releaseDate: '2021-10-21', - }, - { - id: 738362, - title: 'The Fresh Prince of Bel-Air Reunion', - releaseDate: '2020-11-18', - }, - { - id: 25680, - title: 'The Friends of Eddie Coyle', - releaseDate: '1973-06-26', - }, - { - id: 1723, - title: 'The Front', - releaseDate: '1976-09-17', - }, - { - id: 987, - title: 'The Front Page', - releaseDate: '1974-11-01', - }, - { - id: 5503, - title: 'The Fugitive', - releaseDate: '1993-08-06', - }, - { - id: 318121, - title: 'The Fundamentals of Caring', - releaseDate: '2016-06-16', - }, - { - id: 2649, - title: 'The Game', - releaseDate: '1997-09-12', - }, - { - id: 463088, - title: 'The Game Changers', - releaseDate: '2019-09-16', - }, - { - id: 748783, - title: 'The Garfield Movie', - releaseDate: '2024-04-30', - }, - { - id: 961, - title: 'The General', - releaseDate: '1926-12-25', - }, - { - id: 522627, - title: 'The Gentlemen', - releaseDate: '2020-01-01', - }, - { - id: 5916, - title: 'The Getaway', - releaseDate: '1972-12-13', - }, - { - id: 22292, - title: 'The Ghost and Mrs. Muir', - releaseDate: '1947-05-25', - }, - { - id: 65754, - title: 'The Girl with the Dragon Tattoo', - releaseDate: '2011-12-14', - }, - { - id: 336000, - title: 'The Glass Castle', - releaseDate: '2017-08-11', - }, - { - id: 51360, - title: 'The Goat', - releaseDate: '1921-05-15', - }, - { - id: 238, - title: 'The Godfather', - releaseDate: '1972-03-14', - }, - { - id: 240, - title: 'The Godfather Part II', - releaseDate: '1974-12-20', - }, - { - id: 242, - title: 'The Godfather Part III', - releaseDate: '1990-12-25', - }, - { - id: 8393, - title: 'The Gods Must Be Crazy', - releaseDate: '1980-09-10', - }, - { - id: 11937, - title: 'The Gods Must Be Crazy II', - releaseDate: '1989-07-01', - }, - { - id: 962, - title: 'The Gold Rush', - releaseDate: '1925-07-13', - }, - { - id: 472674, - title: 'The Goldfinch', - releaseDate: '2019-09-12', - }, - { - id: 250538, - title: 'The Good Lie', - releaseDate: '2014-09-10', - }, - { - id: 32790, - title: 'The Good Witch', - releaseDate: '2008-01-19', - }, - { - id: 846214, - title: 'The Good, the Bart, and the Loki', - releaseDate: '2021-07-07', - }, - { - id: 9340, - title: 'The Goonies', - releaseDate: '1985-06-07', - }, - { - id: 950396, - title: 'The Gorge', - releaseDate: '2025-02-13', - }, - { - id: 37247, - title: 'The Graduate', - releaseDate: '1967-12-21', - }, - { - id: 120467, - title: 'The Grand Budapest Hotel', - releaseDate: '2014-02-26', - }, - { - id: 596, - title: 'The Grapes of Wrath', - releaseDate: '1940-03-15', - }, - { - id: 14047, - title: 'The Great Debaters', - releaseDate: '2007-12-25', - }, - { - id: 914, - title: 'The Great Dictator', - releaseDate: '1940-10-15', - }, - { - id: 5925, - title: 'The Great Escape', - releaseDate: '1963-07-03', - }, - { - id: 64682, - title: 'The Great Gatsby', - releaseDate: '2013-05-09', - }, - { - id: 9994, - title: 'The Great Mouse Detective', - releaseDate: '1986-07-02', - }, - { - id: 11575, - title: 'The Great Race', - releaseDate: '1965-07-01', - }, - { - id: 597922, - title: 'The Greatest Beer Run Ever', - releaseDate: '2022-09-23', - }, - { - id: 15487, - title: 'The Greatest Game Ever Played', - releaseDate: '2005-09-30', - }, - { - id: 1226841, - title: 'The Greatest Night in Pop', - releaseDate: '2024-01-19', - }, - { - id: 316029, - title: 'The Greatest Showman', - releaseDate: '2017-12-20', - }, - { - id: 497, - title: 'The Green Mile', - releaseDate: '1999-12-10', - }, - { - id: 28118, - title: 'The Gruffalo', - releaseDate: '2009-12-25', - }, - { - id: 4643, - title: 'The Guardian', - releaseDate: '2006-09-28', - }, - { - id: 774752, - title: 'The Guardians of the Galaxy Holiday Special', - releaseDate: '2022-11-24', - }, - { - id: 451480, - title: 'The Guernsey Literary & Potato Peel Pie Society', - releaseDate: '2018-04-19', - }, - { - id: 17409, - title: 'The Gunfighter', - releaseDate: '1950-05-26', - }, - { - id: 10911, - title: 'The Guns of Navarone', - releaseDate: '1961-04-27', - }, - { - id: 597219, - title: 'The Half of It', - releaseDate: '2020-05-01', - }, - { - id: 18785, - title: 'The Hangover', - releaseDate: '2009-06-02', - }, - { - id: 470044, - title: 'The Hate U Give', - releaseDate: '2018-10-19', - }, - { - id: 273248, - title: 'The Hateful Eight', - releaseDate: '2015-12-25', - }, - { - id: 603661, - title: 'The Hating Game', - releaseDate: '2021-12-09', - }, - { - id: 11772, - title: 'The Haunting', - releaseDate: '1963-03-28', - }, - { - id: 340270, - title: 'The Healer', - releaseDate: '2017-02-17', - }, - { - id: 28571, - title: 'The Heiress', - releaseDate: '1949-10-06', - }, - { - id: 50014, - title: 'The Help', - releaseDate: '2011-08-09', - }, - { - id: 862557, - title: 'The Hill', - releaseDate: '2023-08-18', - }, - { - id: 24395, - title: 'The Hill', - releaseDate: '1965-06-11', - }, - { - id: 64353, - title: 'The Hitch Hikers Guide to the Galaxy', - releaseDate: '1981-02-09', - }, - { - id: 49051, - title: 'The Hobbit: An Unexpected Journey', - releaseDate: '2012-12-12', - }, - { - id: 122917, - title: 'The Hobbit: The Battle of the Five Armies', - releaseDate: '2014-12-10', - }, - { - id: 57158, - title: 'The Hobbit: The Desolation of Smaug', - releaseDate: '2013-12-11', - }, - { - id: 840430, - title: 'The Holdovers', - releaseDate: '2023-10-27', - }, - { - id: 1581, - title: 'The Holiday', - releaseDate: '2006-12-05', - }, - { - id: 27118, - title: 'The Hound of the Baskervilles', - releaseDate: '1939-03-24', - }, - { - id: 590, - title: 'The Hours', - releaseDate: '2002-12-27', - }, - { - id: 926899, - title: 'The House', - releaseDate: '2022-01-14', - }, - { - id: 398173, - title: 'The House That Jack Built', - releaseDate: '2018-10-04', - }, - { - id: 1368166, - title: 'The Housemaid', - releaseDate: '2025-12-18', - }, - { - id: 11934, - title: 'The Hudsucker Proxy', - releaseDate: '1994-03-11', - }, - { - id: 31685, - title: 'The Hunchback of Notre Dame', - releaseDate: '1939-08-31', - }, - { - id: 10545, - title: 'The Hunchback of Notre Dame', - releaseDate: '1996-06-21', - }, - { - id: 228194, - title: 'The Hundred-Foot Journey', - releaseDate: '2014-08-06', - }, - { - id: 70160, - title: 'The Hunger Games', - releaseDate: '2012-03-12', - }, - { - id: 101299, - title: 'The Hunger Games: Catching Fire', - releaseDate: '2013-11-15', - }, - { - id: 1669, - title: 'The Hunt for Red October', - releaseDate: '1990-03-02', - }, - { - id: 10400, - title: 'The Hurricane', - releaseDate: '1999-09-17', - }, - { - id: 12162, - title: 'The Hurt Locker', - releaseDate: '2008-10-10', - }, - { - id: 990, - title: 'The Hustler', - releaseDate: '1961-09-25', - }, - { - id: 843527, - title: 'The Idea of You', - releaseDate: '2024-05-02', - }, - { - id: 1491, - title: 'The Illusionist', - releaseDate: '2006-08-18', - }, - { - id: 205596, - title: 'The Imitation Game', - releaseDate: '2014-11-14', - }, - { - id: 47653, - title: 'The Immigrant', - releaseDate: '1917-06-17', - }, - { - id: 80278, - title: 'The Impossible', - releaseDate: '2012-09-09', - }, - { - id: 84287, - title: 'The Imposter', - releaseDate: '2012-07-13', - }, - { - id: 818750, - title: 'The In Between', - releaseDate: '2022-02-11', - }, - { - id: 31682, - title: 'The Incredible Shrinking Man', - releaseDate: '1957-02-22', - }, - { - id: 9806, - title: 'The Incredibles', - releaseDate: '2004-11-05', - }, - { - id: 16372, - title: 'The Innocents', - releaseDate: '1961-11-24', - }, - { - id: 9008, - title: 'The Insider', - releaseDate: '1999-10-28', - }, - { - id: 257211, - title: 'The Intern', - releaseDate: '2015-09-23', - }, - { - id: 250658, - title: "The Internet's Own Boy: The Story of Aaron Swartz", - releaseDate: '2014-06-27', - }, - { - id: 566228, - title: 'The Inventor: Out for Blood in Silicon Valley', - releaseDate: '2019-01-24', - }, - { - id: 570670, - title: 'The Invisible Man', - releaseDate: '2020-02-26', - }, - { - id: 10787, - title: 'The Invisible Man', - releaseDate: '1933-10-31', - }, - { - id: 398978, - title: 'The Irishman', - releaseDate: '2019-11-01', - }, - { - id: 850165, - title: 'The Iron Claw', - releaseDate: '2023-12-21', - }, - { - id: 10386, - title: 'The Iron Giant', - releaseDate: '1999-08-06', - }, - { - id: 133792, - title: 'The Joker is Wild', - releaseDate: '1957-09-26', - }, - { - id: 19931, - title: 'The Joy Luck Club', - releaseDate: '1993-09-08', - }, - { - id: 205587, - title: 'The Judge', - releaseDate: '2014-10-08', - }, - { - id: 9325, - title: 'The Jungle Book', - releaseDate: '1967-10-18', - }, - { - id: 1885, - title: 'The Karate Kid', - releaseDate: '1984-06-22', - }, - { - id: 10098, - title: 'The Kid', - releaseDate: '1921-01-21', - }, - { - id: 14638, - title: 'The Killers', - releaseDate: '1946-08-30', - }, - { - id: 247, - title: 'The Killing', - releaseDate: '1956-06-06', - }, - { - id: 625, - title: 'The Killing Fields', - releaseDate: '1984-11-23', - }, - { - id: 32040, - title: 'The Killing of a Chinese Bookie', - releaseDate: '1976-02-15', - }, - { - id: 399057, - title: 'The Killing of a Sacred Deer', - releaseDate: '2017-10-20', - }, - { - id: 504949, - title: 'The King', - releaseDate: '2019-10-11', - }, - { - id: 16520, - title: 'The King and I', - releaseDate: '1956-06-29', - }, - { - id: 262, - title: 'The King of Comedy', - releaseDate: '1982-12-18', - }, - { - id: 13958, - title: 'The King of Kong: A Fistful of Quarters', - releaseDate: '2007-03-25', - }, - { - id: 579583, - title: 'The King of Staten Island', - releaseDate: '2020-07-22', - }, - { - id: 245842, - title: "The King's Daughter", - releaseDate: '2022-01-21', - }, - { - id: 45269, - title: "The King's Speech", - releaseDate: '2010-11-26', - }, - { - id: 454983, - title: 'The Kissing Booth', - releaseDate: '2018-05-11', - }, - { - id: 583083, - title: 'The Kissing Booth 2', - releaseDate: '2020-07-24', - }, - { - id: 7979, - title: 'The Kite Runner', - releaseDate: '2007-12-14', - }, - { - id: 3086, - title: 'The Lady Eve', - releaseDate: '1941-02-25', - }, - { - id: 3766, - title: 'The Lady from Shanghai', - releaseDate: '1947-12-24', - }, - { - id: 940, - title: 'The Lady Vanishes', - releaseDate: '1938-10-07', - }, - { - id: 5506, - title: 'The Ladykillers', - releaseDate: '1955-12-08', - }, - { - id: 2044, - title: 'The Lake House', - releaseDate: '2006-06-16', - }, - { - id: 12144, - title: 'The Land Before Time', - releaseDate: '1988-11-18', - }, - { - id: 718867, - title: 'The Larva Island Movie', - releaseDate: '2020-07-23', - }, - { - id: 522039, - title: 'The Last Black Man in San Francisco', - releaseDate: '2019-06-07', - }, - { - id: 2100, - title: 'The Last Castle', - releaseDate: '2001-10-19', - }, - { - id: 14886, - title: 'The Last Detail', - releaseDate: '1973-12-11', - }, - { - id: 617653, - title: 'The Last Duel', - releaseDate: '2021-10-13', - }, - { - id: 746, - title: 'The Last Emperor', - releaseDate: '1987-10-04', - }, - { - id: 442065, - title: 'The Last Full Measure', - releaseDate: '2020-01-23', - }, - { - id: 1523, - title: 'The Last King of Scotland', - releaseDate: '2006-09-27', - }, - { - id: 948713, - title: 'The Last Kingdom: Seven Kings Must Die', - releaseDate: '2023-04-14', - }, - { - id: 638449, - title: 'The Last Letter from Your Lover', - releaseDate: '2021-07-23', - }, - { - id: 9361, - title: 'The Last of the Mohicans', - releaseDate: '1992-08-26', - }, - { - id: 25188, - title: 'The Last Picture Show', - releaseDate: '1971-10-03', - }, - { - id: 616, - title: 'The Last Samurai', - releaseDate: '2003-12-05', - }, - { - id: 35690, - title: 'The Last Song', - releaseDate: '2010-03-31', - }, - { - id: 11051, - title: 'The Last Temptation of Christ', - releaseDate: '1988-05-28', - }, - { - id: 10150, - title: 'The Last Unicorn', - releaseDate: '1982-11-19', - }, - { - id: 13963, - title: 'The Last Waltz', - releaseDate: '1978-04-26', - }, - { - id: 32961, - title: 'The Lavender Hill Mob', - releaseDate: '1951-06-28', - }, - { - id: 43650, - title: 'The Legend of Sleepy Hollow', - releaseDate: '1949-10-08', - }, - { - id: 324849, - title: 'The Lego Batman Movie', - releaseDate: '2017-02-08', - }, - { - id: 137106, - title: 'The Lego Movie', - releaseDate: '2014-02-06', - }, - { - id: 449749, - title: 'The Leisure Seeker', - releaseDate: '2018-01-03', - }, - { - id: 17801, - title: 'The Letter', - releaseDate: '1940-11-21', - }, - { - id: 25037, - title: 'The Life and Death of Colonel Blimp', - releaseDate: '1943-07-26', - }, - { - id: 421, - title: 'The Life Aquatic with Steve Zissou', - releaseDate: '2004-12-10', - }, - { - id: 1254786, - title: 'The Life List', - releaseDate: '2025-03-27', - }, - { - id: 842924, - title: 'The Life of Chuck', - releaseDate: '2025-06-05', - }, - { - id: 11615, - title: 'The Life of David Gale', - releaseDate: '2003-02-21', - }, - { - id: 283552, - title: 'The Light Between Oceans', - releaseDate: '2016-09-02', - }, - { - id: 503919, - title: 'The Lighthouse', - releaseDate: '2019-09-13', - }, - { - id: 50348, - title: 'The Lincoln Lawyer', - releaseDate: '2011-03-17', - }, - { - id: 18988, - title: 'The Lion in Winter', - releaseDate: '1968-08-20', - }, - { - id: 420818, - title: 'The Lion King', - releaseDate: '2019-07-12', - }, - { - id: 8587, - title: 'The Lion King', - releaseDate: '1994-06-15', - }, - { - id: 43802, - title: 'The Little Foxes', - releaseDate: '1941-08-29', - }, - { - id: 1010819, - title: 'The Little Guy', - releaseDate: '2022-08-10', - }, - { - id: 38580, - title: 'The Little Matchgirl', - releaseDate: '2006-09-07', - }, - { - id: 10144, - title: 'The Little Mermaid', - releaseDate: '1989-11-17', - }, - { - id: 309809, - title: 'The Little Prince', - releaseDate: '2015-07-29', - }, - { - id: 254320, - title: 'The Lobster', - releaseDate: '2015-10-15', - }, - { - id: 2760, - title: 'The Lodger: A Story of the London Fog', - releaseDate: '1927-02-14', - }, - { - id: 16103, - title: 'The Loneliness of the Long Distance Runner', - releaseDate: '1962-09-20', - }, - { - id: 14807, - title: 'The Long Good Friday', - releaseDate: '1980-11-01', - }, - { - id: 1847, - title: 'The Long Goodbye', - releaseDate: '1973-03-08', - }, - { - id: 51763, - title: 'The Long Walk Home', - releaseDate: '1990-12-21', - }, - { - id: 40085, - title: 'The Long, Hot Summer', - releaseDate: '1958-05-17', - }, - { - id: 9289, - title: 'The Longest Day', - releaseDate: '1962-09-25', - }, - { - id: 228205, - title: 'The Longest Ride', - releaseDate: '2015-04-09', - }, - { - id: 267480, - title: 'The Look of Silence', - releaseDate: '2014-11-13', - }, - { - id: 120, - title: 'The Lord of the Rings: The Fellowship of the Ring', - releaseDate: '2001-12-18', - }, - { - id: 122, - title: 'The Lord of the Rings: The Return of the King', - releaseDate: '2003-12-17', - }, - { - id: 121, - title: 'The Lord of the Rings: The Two Towers', - releaseDate: '2002-12-18', - }, - { - id: 1547, - title: 'The Lost Boys', - releaseDate: '1987-07-31', - }, - { - id: 1236470, - title: 'The Lost Bus', - releaseDate: '2025-09-19', - }, - { - id: 28580, - title: 'The Lost Weekend', - releaseDate: '1945-11-29', - }, - { - id: 410113, - title: 'The Loud House Movie', - releaseDate: '2021-08-20', - }, - { - id: 7980, - title: 'The Lovely Bones', - releaseDate: '2009-12-26', - }, - { - id: 77877, - title: 'The Lucky One', - releaseDate: '2012-04-19', - }, - { - id: 4553, - title: 'The Machinist', - releaseDate: '2004-09-24', - }, - { - id: 8094, - title: 'The Magdalene Sisters', - releaseDate: '2002-08-30', - }, - { - id: 965, - title: 'The Magnificent Ambersons', - releaseDate: '1942-07-10', - }, - { - id: 966, - title: 'The Magnificent Seven', - releaseDate: '1960-10-12', - }, - { - id: 124277, - title: 'The Maker', - releaseDate: '2011-06-23', - }, - { - id: 963, - title: 'The Maltese Falcon', - releaseDate: '1941-10-18', - }, - { - id: 13363, - title: 'The Man from Earth', - releaseDate: '2007-06-10', - }, - { - id: 18264, - title: 'The Man from Laramie', - releaseDate: '1955-08-19', - }, - { - id: 203801, - title: 'The Man from U.N.C.L.E.', - releaseDate: '2015-08-13', - }, - { - id: 17474, - title: 'The Man in the Moon', - releaseDate: '1991-09-30', - }, - { - id: 353326, - title: 'The Man Who Knew Infinity', - releaseDate: '2016-04-08', - }, - { - id: 574, - title: 'The Man Who Knew Too Much', - releaseDate: '1956-05-16', - }, - { - id: 27517, - title: 'The Man Who Laughs', - releaseDate: '1928-11-04', - }, - { - id: 11697, - title: 'The Man Who Shot Liberty Valance', - releaseDate: '1962-04-13', - }, - { - id: 10778, - title: "The Man Who Wasn't There", - releaseDate: '2001-10-26', - }, - { - id: 983, - title: 'The Man Who Would Be King', - releaseDate: '1975-12-03', - }, - { - id: 541, - title: 'The Man with the Golden Arm', - releaseDate: '1955-12-26', - }, - { - id: 982, - title: 'The Manchurian Candidate', - releaseDate: '1962-10-24', - }, - { - id: 250480, - title: 'The Many Adventures of Winnie the Pooh', - releaseDate: '1977-03-11', - }, - { - id: 672647, - title: 'The Map of Tiny Perfect Things', - releaseDate: '2021-02-12', - }, - { - id: 32093, - title: 'The Mark of Zorro', - releaseDate: '1940-11-08', - }, - { - id: 286217, - title: 'The Martian', - releaseDate: '2015-09-30', - }, - { - id: 68722, - title: 'The Master', - releaseDate: '2012-09-14', - }, - { - id: 603, - title: 'The Matrix', - releaseDate: '1999-03-31', - }, - { - id: 604, - title: 'The Matrix Reloaded', - releaseDate: '2003-05-15', - }, - { - id: 644583, - title: 'The Mauritanian', - releaseDate: '2021-02-12', - }, - { - id: 198663, - title: 'The Maze Runner', - releaseDate: '2014-09-10', - }, - { - id: 593643, - title: 'The Menu', - releaseDate: '2022-11-17', - }, - { - id: 26842, - title: 'The Message', - releaseDate: '1976-03-09', - }, - { - id: 9821, - title: 'The Mighty', - releaseDate: '1998-06-01', - }, - { - id: 799583, - title: 'The Ministry of Ungentlemanly Warfare', - releaseDate: '2024-04-18', - }, - { - id: 425373, - title: 'The Miracle Season', - releaseDate: '2018-04-13', - }, - { - id: 1162, - title: 'The Miracle Worker', - releaseDate: '1962-05-23', - }, - { - id: 11416, - title: 'The Mission', - releaseDate: '1986-09-06', - }, - { - id: 501929, - title: 'The Mitchells vs. the Machines', - releaseDate: '2021-04-22', - }, - { - id: 10437, - title: 'The Muppet Christmas Carol', - releaseDate: '1992-12-11', - }, - { - id: 11176, - title: 'The Muppet Movie', - releaseDate: '1979-06-22', - }, - { - id: 44892, - title: 'The Music Box', - releaseDate: '1932-04-16', - }, - { - id: 13671, - title: 'The Music Man', - releaseDate: '1962-06-19', - }, - { - id: 56401, - title: 'The Music Never Stopped', - releaseDate: '2011-03-18', - }, - { - id: 20482, - title: 'The Naked City', - releaseDate: '1948-03-04', - }, - { - id: 37136, - title: 'The Naked Gun: From the Files of Police Squad!', - releaseDate: '1988-12-02', - }, - { - id: 192, - title: 'The Name of the Rose', - releaseDate: '1986-09-24', - }, - { - id: 31713, - title: 'The Narrow Margin', - releaseDate: '1952-05-03', - }, - { - id: 32318, - title: 'The Navigator', - releaseDate: '1924-09-28', - }, - { - id: 9631, - title: 'The Negotiator', - releaseDate: '1998-07-29', - }, - { - id: 43539, - title: 'The Next Three Days', - releaseDate: '2010-11-18', - }, - { - id: 290250, - title: 'The Nice Guys', - releaseDate: '2016-05-15', - }, - { - id: 3112, - title: 'The Night of the Hunter', - releaseDate: '1955-07-26', - }, - { - id: 14703, - title: 'The Night of the Iguana', - releaseDate: '1964-08-06', - }, - { - id: 400090, - title: 'The Nightingale', - releaseDate: '2018-09-23', - }, - { - id: 9479, - title: 'The Nightmare Before Christmas', - releaseDate: '1993-10-09', - }, - { - id: 113833, - title: 'The Normal Heart', - releaseDate: '2014-05-25', - }, - { - id: 639933, - title: 'The Northman', - releaseDate: '2022-04-07', - }, - { - id: 11036, - title: 'The Notebook', - releaseDate: '2004-06-25', - }, - { - id: 27029, - title: "The Nun's Story", - releaseDate: '1959-06-18', - }, - { - id: 11356, - title: 'The Odd Couple', - releaseDate: '1968-05-16', - }, - { - id: 71864, - title: 'The Odd Life of Timothy Green', - releaseDate: '2012-08-15', - }, - { - id: 547016, - title: 'The Old Guard', - releaseDate: '2020-07-09', - }, - { - id: 72640, - title: 'The Old Mill', - releaseDate: '1937-11-05', - }, - { - id: 970348, - title: 'The Old Oak', - releaseDate: '2023-09-29', - }, - { - id: 794, - title: 'The Omen', - releaseDate: '1976-06-25', - }, - { - id: 508570, - title: 'The One and Only Ivan', - releaseDate: '2020-08-21', - }, - { - id: 1933, - title: 'The Others', - releaseDate: '2001-08-02', - }, - { - id: 799876, - title: 'The Outfit', - releaseDate: '2022-02-25', - }, - { - id: 10747, - title: 'The Outlaw Josey Wales', - releaseDate: '1976-06-30', - }, - { - id: 227, - title: 'The Outsiders', - releaseDate: '1983-03-25', - }, - { - id: 980, - title: 'The Ox-Bow Incident', - releaseDate: '1943-03-11', - }, - { - id: 14202, - title: 'The Painted Veil', - releaseDate: '2006-12-09', - }, - { - id: 19186, - title: 'The Parent Trap', - releaseDate: '1961-05-13', - }, - { - id: 9820, - title: 'The Parent Trap', - releaseDate: '1998-07-28', - }, - { - id: 10794, - title: 'The Party', - releaseDate: '1968-04-04', - }, - { - id: 615, - title: 'The Passion of the Christ', - releaseDate: '2004-02-25', - }, - { - id: 2024, - title: 'The Patriot', - releaseDate: '2000-06-28', - }, - { - id: 20540, - title: 'The Pawnbroker', - releaseDate: '1965-04-20', - }, - { - id: 463257, - title: 'The Peanut Butter Falcon', - releaseDate: '2019-08-09', - }, - { - id: 56601, - title: 'The Perfect Game', - releaseDate: '2009-11-09', - }, - { - id: 84892, - title: 'The Perks of Being a Wallflower', - releaseDate: '2012-09-20', - }, - { - id: 34283, - title: "The Pervert's Guide to Cinema", - releaseDate: '2006-10-06', - }, - { - id: 17030, - title: 'The Petrified Forest', - releaseDate: '1936-02-08', - }, - { - id: 9833, - title: 'The Phantom of the Opera', - releaseDate: '2004-12-08', - }, - { - id: 964, - title: 'The Phantom of the Opera', - releaseDate: '1925-06-29', - }, - { - id: 76115, - title: 'The Phantom of the Opera at the Royal Albert Hall', - releaseDate: '2011-09-27', - }, - { - id: 981, - title: 'The Philadelphia Story', - releaseDate: '1940-12-05', - }, - { - id: 169881, - title: 'The Physician', - releaseDate: '2013-12-25', - }, - { - id: 423, - title: 'The Pianist', - releaseDate: '2002-09-17', - }, - { - id: 713, - title: 'The Piano', - releaseDate: '1993-05-18', - }, - { - id: 16559, - title: 'The Picture of Dorian Gray', - releaseDate: '1945-03-03', - }, - { - id: 15302, - title: 'The Pixar Story', - releaseDate: '2007-08-28', - }, - { - id: 30060, - title: 'The Plague Dogs', - releaseDate: '1982-10-01', - }, - { - id: 10403, - title: 'The Player', - releaseDate: '1992-05-08', - }, - { - id: 551, - title: 'The Poseidon Adventure', - releaseDate: '1972-12-01', - }, - { - id: 446354, - title: 'The Post', - releaseDate: '2017-12-22', - }, - { - id: 25736, - title: 'The Postman Always Rings Twice', - releaseDate: '1946-05-02', - }, - { - id: 379779, - title: 'The Present', - releaseDate: '2014-04-22', - }, - { - id: 1124, - title: 'The Prestige', - releaseDate: '2006-10-17', - }, - { - id: 9837, - title: 'The Prince of Egypt', - releaseDate: '1998-12-16', - }, - { - id: 10198, - title: 'The Princess and the Frog', - releaseDate: '2009-12-08', - }, - { - id: 2493, - title: 'The Princess Bride', - releaseDate: '1987-09-25', - }, - { - id: 30197, - title: 'The Producers', - releaseDate: '1968-03-18', - }, - { - id: 22383, - title: 'The Professionals', - releaseDate: '1966-11-01', - }, - { - id: 411728, - title: 'The Professor and the Madman', - releaseDate: '2019-03-07', - }, - { - id: 18240, - title: 'The Proposal', - releaseDate: '2009-06-02', - }, - { - id: 16608, - title: 'The Proposition', - releaseDate: '2005-10-06', - }, - { - id: 17687, - title: 'The Public Enemy', - releaseDate: '1931-04-23', - }, - { - id: 10849, - title: 'The Purple Rose of Cairo', - releaseDate: '1985-03-01', - }, - { - id: 1402, - title: 'The Pursuit of Happyness', - releaseDate: '2006-12-14', - }, - { - id: 3109, - title: 'The Quiet Man', - releaseDate: '1952-07-21', - }, - { - id: 11975, - title: 'The Rainmaker', - releaseDate: '1997-11-18', - }, - { - id: 8055, - title: 'The Reader', - releaseDate: '2008-12-10', - }, - { - id: 366696, - title: 'The Red Pill', - releaseDate: '2016-10-14', - }, - { - id: 19542, - title: 'The Red Shoes', - releaseDate: '1948-09-06', - }, - { - id: 1018648, - title: 'The Redeem Team', - releaseDate: '2022-10-07', - }, - { - id: 1245, - title: 'The Remains of the Day', - releaseDate: '1993-11-05', - }, - { - id: 524348, - title: 'The Report', - releaseDate: '2019-09-12', - }, - { - id: 680058, - title: 'The Rescue', - releaseDate: '2021-10-08', - }, - { - id: 10925, - title: 'The Return of the Living Dead', - releaseDate: '1985-04-25', - }, - { - id: 281957, - title: 'The Revenant', - releaseDate: '2015-12-25', - }, - { - id: 453278, - title: 'The Rider', - releaseDate: '2018-03-28', - }, - { - id: 9549, - title: 'The Right Stuff', - releaseDate: '1983-10-20', - }, - { - id: 1306368, - title: 'The Rip', - releaseDate: '2026-01-13', - }, - { - id: 20766, - title: 'The Road', - releaseDate: '2009-11-25', - }, - { - id: 10501, - title: 'The Road to El Dorado', - releaseDate: '2000-03-31', - }, - { - id: 37698, - title: 'The Roaring Twenties', - releaseDate: '1939-10-28', - }, - { - id: 9802, - title: 'The Rock', - releaseDate: '1996-06-07', - }, - { - id: 36685, - title: 'The Rocky Horror Picture Show', - releaseDate: '1975-08-14', - }, - { - id: 25527, - title: 'The Ron Clark Story', - releaseDate: '2006-08-13', - }, - { - id: 9428, - title: 'The Royal Tenenbaums', - releaseDate: '2001-10-05', - }, - { - id: 5923, - title: 'The Sand Pebbles', - releaseDate: '1966-12-20', - }, - { - id: 11528, - title: 'The Sandlot', - releaseDate: '1993-04-07', - }, - { - id: 51357, - title: 'The Scarecrow', - releaseDate: '1920-11-07', - }, - { - id: 779782, - title: 'The School for Good and Evil', - releaseDate: '2022-10-19', - }, - { - id: 560057, - title: 'The Sea Beast', - releaseDate: '2022-06-24', - }, - { - id: 3114, - title: 'The Searchers', - releaseDate: '1956-05-16', - }, - { - id: 24358, - title: 'The Second Renaissance Part I', - releaseDate: '2003-02-04', - }, - { - id: 24362, - title: 'The Second Renaissance Part II', - releaseDate: '2003-05-05', - }, - { - id: 11236, - title: 'The Secret Garden', - releaseDate: '1993-08-13', - }, - { - id: 12837, - title: 'The Secret Life of Bees', - releaseDate: '2008-09-17', - }, - { - id: 116745, - title: 'The Secret Life of Walter Mitty', - releaseDate: '2013-12-18', - }, - { - id: 26963, - title: 'The Secret of Kells', - releaseDate: '2009-02-09', - }, - { - id: 11704, - title: 'The Secret of NIMH', - releaseDate: '1982-06-17', - }, - { - id: 283591, - title: 'The Secret Scripture', - releaseDate: '2017-03-23', - }, - { - id: 550231, - title: 'The Secret: Dare to Dream', - releaseDate: '2020-04-16', - }, - { - id: 194101, - title: 'The Selfish Giant', - releaseDate: '2013-10-25', - }, - { - id: 42987, - title: 'The Servant', - releaseDate: '1963-11-14', - }, - { - id: 17218, - title: 'The Set-Up', - releaseDate: '1949-03-29', - }, - { - id: 10653, - title: 'The Seven Year Itch', - releaseDate: '1955-06-03', - }, - { - id: 345938, - title: 'The Shack', - releaseDate: '2017-03-03', - }, - { - id: 399055, - title: 'The Shape of Water', - releaseDate: '2017-12-01', - }, - { - id: 278, - title: 'The Shawshank Redemption', - releaseDate: '1994-09-23', - }, - { - id: 694, - title: 'The Shining', - releaseDate: '1980-05-23', - }, - { - id: 12584, - title: 'The Shootist', - releaseDate: '1976-07-21', - }, - { - id: 20334, - title: 'The Shop Around the Corner', - releaseDate: '1940-01-12', - }, - { - id: 334517, - title: 'The Siege of Jadotville', - releaseDate: '2016-09-19', - }, - { - id: 274, - title: 'The Silence of the Lambs', - releaseDate: '1991-02-14', - }, - { - id: 35, - title: 'The Simpsons Movie', - releaseDate: '2007-07-25', - }, - { - id: 1061699, - title: 'The Six Triple Eight', - releaseDate: '2024-12-06', - }, - { - id: 745, - title: 'The Sixth Sense', - releaseDate: '1999-08-06', - }, - { - id: 88018, - title: 'The Skeleton Dance', - releaseDate: '1929-08-29', - }, - { - id: 13396, - title: 'The Snowman', - releaseDate: '1982-12-26', - }, - { - id: 656690, - title: 'The Social Dilemma', - releaseDate: '2020-01-26', - }, - { - id: 37799, - title: 'The Social Network', - releaseDate: '2010-10-01', - }, - { - id: 16211, - title: 'The Sons of Katie Elder', - releaseDate: '1965-06-23', - }, - { - id: 15121, - title: 'The Sound of Music', - releaseDate: '1965-03-29', - }, - { - id: 365942, - title: 'The Space Between Us', - releaseDate: '2017-01-26', - }, - { - id: 27452, - title: 'The Spiral Staircase', - releaseDate: '1946-01-26', - }, - { - id: 367544, - title: 'The Spirit of Christmas', - releaseDate: '2015-11-28', - }, - { - id: 400160, - title: 'The SpongeBob Movie: Sponge on the Run', - releaseDate: '2020-08-14', - }, - { - id: 11836, - title: 'The SpongeBob SquarePants Movie', - releaseDate: '2004-11-19', - }, - { - id: 13580, - title: 'The Spy Who Came In from the Cold', - releaseDate: '1965-12-16', - }, - { - id: 2056, - title: 'The Station Agent', - releaseDate: '2003-12-05', - }, - { - id: 9277, - title: 'The Sting', - releaseDate: '1973-12-25', - }, - { - id: 33409, - title: 'The Stoning of Soraya M.', - releaseDate: '2009-06-26', - }, - { - id: 404, - title: 'The Straight Story', - releaseDate: '1999-10-15', - }, - { - id: 27033, - title: 'The Strange Love of Martha Ivers', - releaseDate: '1946-08-19', - }, - { - id: 20246, - title: 'The Stranger', - releaseDate: '1946-06-02', - }, - { - id: 933260, - title: 'The Substance', - releaseDate: '2024-09-07', - }, - { - id: 436969, - title: 'The Suicide Squad', - releaseDate: '2021-07-28', - }, - { - id: 56831, - title: 'The Sunset Limited', - releaseDate: '2011-02-12', - }, - { - id: 502356, - title: 'The Super Mario Bros. Movie', - releaseDate: '2023-04-05', - }, - { - id: 33564, - title: 'The Swimmer', - releaseDate: '1968-08-09', - }, - { - id: 821881, - title: 'The Swimmers', - releaseDate: '2022-09-08', - }, - { - id: 9078, - title: 'The Sword in the Stone', - releaseDate: '1963-12-25', - }, - { - id: 8333, - title: 'The Taking of Pelham One Two Three', - releaseDate: '1974-10-02', - }, - { - id: 369523, - title: 'The Tale', - releaseDate: '2018-01-20', - }, - { - id: 1213, - title: 'The Talented Mr. Ripley', - releaseDate: '1999-12-25', - }, - { - id: 6844, - title: 'The Ten Commandments', - releaseDate: '1956-10-05', - }, - { - id: 594, - title: 'The Terminal', - releaseDate: '2004-06-17', - }, - { - id: 218, - title: 'The Terminator', - releaseDate: '1984-10-26', - }, - { - id: 30497, - title: 'The Texas Chain Saw Massacre', - releaseDate: '1974-10-11', - }, - { - id: 266856, - title: 'The Theory of Everything', - releaseDate: '2014-11-07', - }, - { - id: 28963, - title: 'The Thief of Bagdad', - releaseDate: '1924-03-18', - }, - { - id: 12232, - title: 'The Thief of Bagdad', - releaseDate: '1940-02-19', - }, - { - id: 14285, - title: 'The Thin Blue Line', - releaseDate: '1988-08-28', - }, - { - id: 3529, - title: 'The Thin Man', - releaseDate: '1934-05-25', - }, - { - id: 8741, - title: 'The Thin Red Line', - releaseDate: '1998-12-23', - }, - { - id: 1091, - title: 'The Thing', - releaseDate: '1982-06-25', - }, - { - id: 1092, - title: 'The Third Man', - releaseDate: '1949-08-31', - }, - { - id: 1090, - title: 'The Thirteenth Floor', - releaseDate: '1999-04-16', - }, - { - id: 8053, - title: 'The Three Burials of Melquiades Estrada', - releaseDate: '2005-11-17', - }, - { - id: 2134, - title: 'The Time Machine', - releaseDate: '1960-05-25', - }, - { - id: 588228, - title: 'The Tomorrow War', - releaseDate: '2021-09-03', - }, - { - id: 5919, - title: 'The Towering Inferno', - releaseDate: '1974-12-14', - }, - { - id: 23168, - title: 'The Town', - releaseDate: '2010-09-15', - }, - { - id: 3482, - title: 'The Train', - releaseDate: '1964-09-24', - }, - { - id: 1857, - title: 'The Transformers: The Movie', - releaseDate: '1986-08-08', - }, - { - id: 3090, - title: 'The Treasure of the Sierra Madre', - releaseDate: '1948-01-15', - }, - { - id: 556984, - title: 'The Trial of the Chicago 7', - releaseDate: '2020-09-25', - }, - { - id: 339065, - title: 'The True Cost', - releaseDate: '2015-05-29', - }, - { - id: 37165, - title: 'The Truman Show', - releaseDate: '1998-06-04', - }, - { - id: 551332, - title: 'The Two Popes', - releaseDate: '2019-11-27', - }, - { - id: 14624, - title: 'The Ultimate Gift', - releaseDate: '2007-03-09', - }, - { - id: 1007826, - title: 'The Underdoggs', - releaseDate: '2024-01-25', - }, - { - id: 645886, - title: 'The Unforgivable', - releaseDate: '2021-11-24', - }, - { - id: 27503, - title: 'The Unknown', - releaseDate: '1927-05-29', - }, - { - id: 117, - title: 'The Untouchables', - releaseDate: '1987-06-03', - }, - { - id: 440472, - title: 'The Upside', - releaseDate: '2019-01-10', - }, - { - id: 629, - title: 'The Usual Suspects', - releaseDate: '1995-07-19', - }, - { - id: 810171, - title: 'The Valet', - releaseDate: '2022-05-11', - }, - { - id: 42329, - title: 'The Valley of Gwangi', - releaseDate: '1969-06-11', - }, - { - id: 24226, - title: 'The Verdict', - releaseDate: '1982-12-08', - }, - { - id: 42661, - title: 'The Vikings', - releaseDate: '1958-06-11', - }, - { - id: 1443, - title: 'The Virgin Suicides', - releaseDate: '2000-04-21', - }, - { - id: 12473, - title: 'The Visitor', - releaseDate: '2008-02-21', - }, - { - id: 1018645, - title: 'The Volcano: Rescue from Whakaari', - releaseDate: '2022-11-03', - }, - { - id: 72570, - title: 'The Vow', - releaseDate: '2012-02-05', - }, - { - id: 26508, - title: 'The War Game', - releaseDate: '1966-04-13', - }, - { - id: 11474, - title: 'The Warriors', - releaseDate: '1979-02-01', - }, - { - id: 59468, - title: 'The Way', - releaseDate: '2010-09-10', - }, - { - id: 49009, - title: 'The Way Back', - releaseDate: '2010-11-22', - }, - { - id: 147773, - title: 'The Way Way Back', - releaseDate: '2013-06-06', - }, - { - id: 785084, - title: 'The Whale', - releaseDate: '2022-12-09', - }, - { - id: 16307, - title: 'The Wicker Man', - releaseDate: '1973-12-06', - }, - { - id: 340613, - title: 'The Wife', - releaseDate: '2018-08-02', - }, - { - id: 576, - title: 'The Wild Bunch', - releaseDate: '1969-06-19', - }, - { - id: 1184918, - title: 'The Wild Robot', - releaseDate: '2024-09-12', - }, - { - id: 560044, - title: 'The Willoughbys', - releaseDate: '2020-04-22', - }, - { - id: 1116, - title: 'The Wind That Shakes the Barley', - releaseDate: '2006-06-23', - }, - { - id: 666243, - title: 'The Witcher: Nightmare of the Wolf', - releaseDate: '2021-08-22', - }, - { - id: 630, - title: 'The Wizard of Oz', - releaseDate: '1939-08-15', - }, - { - id: 178682, - title: 'The Wizards Return: Alex vs. Alex', - releaseDate: '2013-06-01', - }, - { - id: 13666, - title: 'The Wolf Man', - releaseDate: '1941-12-09', - }, - { - id: 106646, - title: 'The Wolf of Wall Street', - releaseDate: '2013-12-25', - }, - { - id: 17136, - title: 'The Woman in the Window', - releaseDate: '1944-10-25', - }, - { - id: 724495, - title: 'The Woman King', - releaseDate: '2022-09-16', - }, - { - id: 22490, - title: 'The Women', - releaseDate: '1939-09-01', - }, - { - id: 923939, - title: 'The Wonderful Story of Henry Sugar', - releaseDate: '2023-09-20', - }, - { - id: 506281, - title: 'The World to Come', - releaseDate: '2021-02-12', - }, - { - id: 9912, - title: "The World's Fastest Indian", - releaseDate: '2005-10-12', - }, - { - id: 12163, - title: 'The Wrestler', - releaseDate: '2008-09-07', - }, - { - id: 22527, - title: 'The Wrong Man', - releaseDate: '1956-12-22', - }, - { - id: 531, - title: 'The Wrong Trousers', - releaseDate: '1993-12-17', - }, - { - id: 28415, - title: 'The Yakuza', - releaseDate: '1974-12-21', - }, - { - id: 13397, - title: 'The Year Without a Santa Claus', - releaseDate: '1974-12-10', - }, - { - id: 408159, - title: 'The Young Offenders', - releaseDate: '2016-09-16', - }, - { - id: 18320, - title: 'The Young Victoria', - releaseDate: '2009-03-04', - }, - { - id: 467244, - title: 'The Zone of Interest', - releaseDate: '2023-12-15', - }, - { - id: 289222, - title: "The Zookeeper's Wife", - releaseDate: '2017-03-24', - }, - { - id: 1541, - title: 'Thelma & Louise', - releaseDate: '1991-05-24', - }, - { - id: 375785, - title: 'Then Came You', - releaseDate: '2018-12-05', - }, - { - id: 7345, - title: 'There Will Be Blood', - releaseDate: '2007-12-26', - }, - { - id: 8337, - title: 'They Live', - releaseDate: '1988-11-04', - }, - { - id: 543580, - title: 'They Shall Not Grow Old', - releaseDate: '2018-11-09', - }, - { - id: 28145, - title: "They Shoot Horses, Don't They?", - releaseDate: '1969-12-10', - }, - { - id: 11524, - title: 'Thief', - releaseDate: '1981-03-27', - }, - { - id: 11973, - title: 'Thirteen Days', - releaseDate: '2000-12-25', - }, - { - id: 698948, - title: 'Thirteen Lives', - releaseDate: '2022-07-18', - }, - { - id: 352490, - title: 'This Beautiful Fantastic', - releaseDate: '2016-10-20', - }, - { - id: 8092, - title: "This Boy's Life", - releaseDate: '1993-04-09', - }, - { - id: 16070, - title: 'This Film Is Not Yet Rated', - releaseDate: '2006-01-25', - }, - { - id: 11798, - title: 'This Is England', - releaseDate: '2007-04-27', - }, - { - id: 13576, - title: 'This Is It', - releaseDate: '2009-10-28', - }, - { - id: 11031, - title: 'This Is Spinal Tap', - releaseDate: '1984-03-02', - }, - { - id: 284053, - title: 'Thor: Ragnarok', - releaseDate: '2017-10-02', - }, - { - id: 17835, - title: 'Threads', - releaseDate: '1985-08-06', - }, - { - id: 359940, - title: 'Three Billboards Outside Ebbing, Missouri', - releaseDate: '2017-12-01', - }, - { - id: 11963, - title: 'Three Days of the Condor', - releaseDate: '1975-09-24', - }, - { - id: 489988, - title: 'Three Identical Strangers', - releaseDate: '2018-06-29', - }, - { - id: 67661, - title: 'Thru the Mirror', - releaseDate: '1936-05-30', - }, - { - id: 986056, - title: 'Thunderbolts*', - releaseDate: '2025-04-30', - }, - { - id: 537116, - title: 'tick, tick... BOOM!', - releaseDate: '2021-11-11', - }, - { - id: 373072, - title: 'Tickled', - releaseDate: '2016-05-26', - }, - { - id: 854239, - title: 'Till', - releaseDate: '2022-10-14', - }, - { - id: 212063, - title: "Tim's Vermeer", - releaseDate: '2013-12-06', - }, - { - id: 297270, - title: 'Tinker Bell and the Legend of the NeverBeast', - releaseDate: '2014-12-12', - }, - { - id: 597, - title: 'Titanic', - releaseDate: '1997-12-18', - }, - { - id: 466282, - title: "To All the Boys I've Loved Before", - releaseDate: '2018-08-17', - }, - { - id: 614409, - title: 'To All the Boys: Always and Forever', - releaseDate: '2021-02-12', - }, - { - id: 198, - title: 'To Be or Not to Be', - releaseDate: '1942-03-06', - }, - { - id: 381, - title: 'To Catch a Thief', - releaseDate: '1955-08-03', - }, - { - id: 1149947, - title: 'To End All War: Oppenheimer & the Atomic Bomb', - releaseDate: '2023-07-09', - }, - { - id: 22584, - title: 'To Have and Have Not', - releaseDate: '1945-01-20', - }, - { - id: 595, - title: 'To Kill a Mockingbird', - releaseDate: '1962-12-20', - }, - { - id: 823147, - title: 'To Leslie', - releaseDate: '2022-10-07', - }, - { - id: 9846, - title: 'To Live and Die in L.A.', - releaseDate: '1985-11-01', - }, - { - id: 25934, - title: 'To Sir, with Love', - releaseDate: '1967-06-14', - }, - { - id: 401104, - title: 'To the Bone', - releaseDate: '2017-01-22', - }, - { - id: 9090, - title: 'To Wong Foo, Thanks for Everything! Julie Newmar', - releaseDate: '1995-09-08', - }, - { - id: 1242011, - title: 'Together', - releaseDate: '2025-07-28', - }, - { - id: 606856, - title: 'Togo', - releaseDate: '2019-12-20', - }, - { - id: 42246, - title: 'Tom and Jerry: The Fast and the Furry', - releaseDate: '2005-09-03', - }, - { - id: 11969, - title: 'Tombstone', - releaseDate: '1993-12-25', - }, - { - id: 9576, - title: 'Tootsie', - releaseDate: '1982-12-17', - }, - { - id: 744, - title: 'Top Gun', - releaseDate: '1986-05-16', - }, - { - id: 361743, - title: 'Top Gun: Maverick', - releaseDate: '2022-05-21', - }, - { - id: 3080, - title: 'Top Hat', - releaseDate: '1935-08-29', - }, - { - id: 8764, - title: 'Top Secret!', - releaseDate: '1984-06-22', - }, - { - id: 11165, - title: 'Tora! Tora! Tora!', - releaseDate: '1970-01-26', - }, - { - id: 861, - title: 'Total Recall', - releaseDate: '1990-06-01', - }, - { - id: 1480, - title: 'Touch of Evil', - releaseDate: '1958-03-30', - }, - { - id: 11194, - title: 'Touching the Void', - releaseDate: '2003-09-05', - }, - { - id: 381028, - title: 'Tower', - releaseDate: '2016-03-13', - }, - { - id: 862, - title: 'Toy Story', - releaseDate: '1995-11-22', - }, - { - id: 863, - title: 'Toy Story 2', - releaseDate: '1999-10-30', - }, - { - id: 10193, - title: 'Toy Story 3', - releaseDate: '2010-06-16', - }, - { - id: 301528, - title: 'Toy Story 4', - releaseDate: '2019-06-19', - }, - { - id: 213121, - title: 'Toy Story of Terror!', - releaseDate: '2013-10-16', - }, - { - id: 256835, - title: 'Toy Story That Time Forgot', - releaseDate: '2014-12-02', - }, - { - id: 1621, - title: 'Trading Places', - releaseDate: '1983-06-07', - }, - { - id: 1900, - title: 'Traffic', - releaseDate: '2000-12-27', - }, - { - id: 1241983, - title: 'Train Dreams', - releaseDate: '2025-11-05', - }, - { - id: 2034, - title: 'Training Day', - releaseDate: '2001-10-05', - }, - { - id: 229408, - title: 'Training Wheels', - releaseDate: '2013-12-10', - }, - { - id: 627, - title: 'Trainspotting', - releaseDate: '1996-02-23', - }, - { - id: 698687, - title: 'Transformers One', - releaseDate: '2024-09-11', - }, - { - id: 667538, - title: 'Transformers: Rise of the Beasts', - releaseDate: '2023-06-06', - }, - { - id: 206563, - title: 'Trash', - releaseDate: '2014-10-09', - }, - { - id: 9016, - title: 'Treasure Planet', - releaseDate: '2002-11-26', - }, - { - id: 481880, - title: 'Trial by Fire', - releaseDate: '2019-05-17', - }, - { - id: 497828, - title: 'Triangle of Sadness', - releaseDate: '2022-09-18', - }, - { - id: 1015724, - title: 'Trick or Treat Scooby-Doo!', - releaseDate: '2022-10-04', - }, - { - id: 730840, - title: 'Trollhunters: Rise of the Titans', - releaseDate: '2021-07-21', - }, - { - id: 901362, - title: 'Trolls Band Together', - releaseDate: '2023-10-12', - }, - { - id: 896221, - title: 'Trolls Holiday in Harmony', - releaseDate: '2021-11-26', - }, - { - id: 446893, - title: 'Trolls World Tour', - releaseDate: '2020-03-11', - }, - { - id: 195, - title: 'Trouble in Paradise', - releaseDate: '1932-10-30', - }, - { - id: 652, - title: 'Troy', - releaseDate: '2004-05-13', - }, - { - id: 44264, - title: 'True Grit', - releaseDate: '2010-12-22', - }, - { - id: 17529, - title: 'True Grit', - releaseDate: '1969-06-11', - }, - { - id: 36955, - title: 'True Lies', - releaseDate: '1994-07-15', - }, - { - id: 319, - title: 'True Romance', - releaseDate: '1993-09-09', - }, - { - id: 294016, - title: 'Trumbo', - releaseDate: '2015-10-27', - }, - { - id: 46838, - title: 'Tucker and Dale vs. Evil', - releaseDate: '2010-01-22', - }, - { - id: 21525, - title: 'Tupac: Resurrection', - releaseDate: '2003-11-14', - }, - { - id: 508947, - title: 'Turning Red', - releaseDate: '2022-03-10', - }, - { - id: 574451, - title: 'Turtles All the Way Down', - releaseDate: '2024-04-27', - }, - { - id: 34003, - title: 'Turtles Forever', - releaseDate: '2009-11-21', - }, - { - id: 63, - title: 'Twelve Monkeys', - releaseDate: '1995-01-05', - }, - { - id: 15497, - title: "Twelve O'Clock High", - releaseDate: '1949-12-21', - }, - { - id: 1923, - title: 'Twin Peaks: Fire Walk with Me', - releaseDate: '1992-06-03', - }, - { - id: 587562, - title: 'Two by Two: Overboard!', - releaseDate: '2020-09-24', - }, - { - id: 787428, - title: 'Two Distant Strangers', - releaseDate: '2020-11-20', - }, - { - id: 5767, - title: 'Two for the Road', - releaseDate: '1967-04-27', - }, - { - id: 76543, - title: 'Tyrannosaur', - releaseDate: '2011-10-07', - }, - { - id: 817758, - title: 'TÁR', - releaseDate: '2022-09-23', - }, - { - id: 829402, - title: 'Ultraman: Rising', - releaseDate: '2024-06-14', - }, - { - id: 9741, - title: 'Unbreakable', - releaseDate: '2000-11-22', - }, - { - id: 227306, - title: 'Unbroken', - releaseDate: '2014-12-25', - }, - { - id: 634544, - title: 'Uncle Frank', - releaseDate: '2020-11-25', - }, - { - id: 473033, - title: 'Uncut Gems', - releaseDate: '2019-08-30', - }, - { - id: 15255, - title: 'Undisputed II: Last Man Standing', - releaseDate: '2006-04-11', - }, - { - id: 38234, - title: 'Undisputed III: Redemption', - releaseDate: '2010-04-17', - }, - { - id: 33, - title: 'Unforgiven', - releaseDate: '1992-08-07', - }, - { - id: 9829, - title: 'United 93', - releaseDate: '2006-04-28', - }, - { - id: 14160, - title: 'Up', - releaseDate: '2009-05-28', - }, - { - id: 500664, - title: 'Upgrade', - releaseDate: '2018-05-31', - }, - { - id: 1014590, - title: 'Upgraded', - releaseDate: '2024-02-07', - }, - { - id: 671583, - title: 'Upside-Down Magic', - releaseDate: '2020-07-31', - }, - { - id: 779047, - title: 'Us Again', - releaseDate: '2021-03-03', - }, - { - id: 752, - title: 'V for Vendetta', - releaseDate: '2006-02-23', - }, - { - id: 653349, - title: 'Vacation Friends', - releaseDate: '2021-08-27', - }, - { - id: 834027, - title: 'Val', - releaseDate: '2021-07-23', - }, - { - id: 11951, - title: 'Vanishing Point', - releaseDate: '1971-01-15', - }, - { - id: 11109, - title: 'Vera Drake', - releaseDate: '2004-10-22', - }, - { - id: 426, - title: 'Vertigo', - releaseDate: '1958-05-09', - }, - { - id: 429197, - title: 'Vice', - releaseDate: '2018-12-25', - }, - { - id: 43028, - title: 'Victim', - releaseDate: '1961-08-01', - }, - { - id: 12614, - title: 'Victor/Victoria', - releaseDate: '1982-04-25', - }, - { - id: 837, - title: 'Videodrome', - releaseDate: '1983-02-04', - }, - { - id: 11773, - title: 'Village of the Damned', - releaseDate: '1960-06-16', - }, - { - id: 32085, - title: 'Vincent', - releaseDate: '1982-10-01', - }, - { - id: 899112, - title: 'Violent Night', - releaseDate: '2022-11-30', - }, - { - id: 263614, - title: 'Virunga', - releaseDate: '2014-11-07', - }, - { - id: 449406, - title: 'Vivo', - releaseDate: '2021-07-30', - }, - { - id: 21876, - title: "Von Ryan's Express", - releaseDate: '1965-06-23', - }, - { - id: 11206, - title: 'Wait Until Dark', - releaseDate: '1967-10-26', - }, - { - id: 26405, - title: 'Wake in Fright', - releaseDate: '1971-07-21', - }, - { - id: 812583, - title: 'Wake Up Dead Man: A Knives Out Mystery', - releaseDate: '2025-11-26', - }, - { - id: 9081, - title: 'Waking Life', - releaseDate: '2001-10-19', - }, - { - id: 10162, - title: 'Waking Ned', - releaseDate: '1998-11-20', - }, - { - id: 69, - title: 'Walk the Line', - releaseDate: '2005-09-13', - }, - { - id: 581420, - title: 'Walk. Ride. Rodeo.', - releaseDate: '2019-03-08', - }, - { - id: 36040, - title: 'Walkabout', - releaseDate: '1971-07-01', - }, - { - id: 10673, - title: 'Wall Street', - releaseDate: '1987-12-10', - }, - { - id: 533, - title: 'Wallace & Gromit: The Curse of the Were-Rabbit', - releaseDate: '2005-09-15', - }, - { - id: 929204, - title: 'Wallace & Gromit: Vengeance Most Fowl', - releaseDate: '2024-12-18', - }, - { - id: 10681, - title: 'WALL·E', - releaseDate: '2008-06-22', - }, - { - id: 281338, - title: 'War for the Planet of the Apes', - releaseDate: '2017-07-11', - }, - { - id: 57212, - title: 'War Horse', - releaseDate: '2011-12-25', - }, - { - id: 323272, - title: 'War Room', - releaseDate: '2015-08-28', - }, - { - id: 1241436, - title: 'Warfare', - releaseDate: '2025-04-09', - }, - { - id: 860, - title: 'WarGames', - releaseDate: '1983-06-03', - }, - { - id: 1076487, - title: 'Warhorse One', - releaseDate: '2023-06-30', - }, - { - id: 59440, - title: 'Warrior', - releaseDate: '2011-09-09', - }, - { - id: 13183, - title: 'Watchmen', - releaseDate: '2009-03-04', - }, - { - id: 1155058, - title: 'Watchmen: Chapter I', - releaseDate: '2024-08-12', - }, - { - id: 1299652, - title: 'Watchmen: Chapter II', - releaseDate: '2024-11-25', - }, - { - id: 33157, - title: 'Waterloo', - releaseDate: '1970-10-26', - }, - { - id: 43824, - title: 'Waterloo Bridge', - releaseDate: '1940-05-17', - }, - { - id: 11837, - title: 'Watership Down', - releaseDate: '1978-10-14', - }, - { - id: 533444, - title: 'Waves', - releaseDate: '2019-11-15', - }, - { - id: 25599, - title: 'Way Out West', - releaseDate: '1937-04-16', - }, - { - id: 97690, - title: 'We Are Legion: The Story of the Hacktivists', - releaseDate: '2012-01-20', - }, - { - id: 677638, - title: 'We Bare Bears: The Movie', - releaseDate: '2020-06-30', - }, - { - id: 1100099, - title: 'We Live in Time', - releaseDate: '2024-10-10', - }, - { - id: 71859, - title: 'We Need to Talk About Kevin', - releaseDate: '2011-09-28', - }, - { - id: 10590, - title: 'We Were Soldiers', - releaseDate: '2002-03-01', - }, - { - id: 5996, - title: "We're No Angels", - releaseDate: '1955-07-07', - }, - { - id: 1078605, - title: 'Weapons', - releaseDate: '2025-08-04', - }, - { - id: 79120, - title: 'Weekend', - releaseDate: '2011-10-23', - }, - { - id: 376261, - title: 'Weiner', - releaseDate: '2016-05-20', - }, - { - id: 11446, - title: 'Welcome to the Dollhouse', - releaseDate: '1996-03-22', - }, - { - id: 84351, - title: 'West of Memphis', - releaseDate: '2012-11-22', - }, - { - id: 1725, - title: 'West Side Story', - releaseDate: '1961-12-13', - }, - { - id: 1088, - title: 'Whale Rider', - releaseDate: '2003-01-30', - }, - { - id: 12159, - title: 'What Dreams May Come', - releaseDate: '1998-10-02', - }, - { - id: 10242, - title: 'What Ever Happened to Baby Jane?', - releaseDate: '1962-10-31', - }, - { - id: 406990, - title: 'What Happened to Monday', - releaseDate: '2017-08-18', - }, - { - id: 318044, - title: 'What Happened, Miss Simone?', - releaseDate: '2015-01-22', - }, - { - id: 127373, - title: 'What Maisie Knew', - releaseDate: '2013-05-02', - }, - { - id: 246741, - title: 'What We Do in the Shadows', - releaseDate: '2014-06-19', - }, - { - id: 1587, - title: "What's Eating Gilbert Grape", - releaseDate: '1993-12-17', - }, - { - id: 15765, - title: "What's Love Got to Do with It", - releaseDate: '1993-06-09', - }, - { - id: 53217, - title: "What's Opera, Doc?", - releaseDate: '1957-07-06', - }, - { - id: 6949, - title: "What's Up, Doc?", - releaseDate: '1972-03-09', - }, - { - id: 19265, - title: 'Whatever Works', - releaseDate: '2009-06-19', - }, - { - id: 639, - title: 'When Harry Met Sally...', - releaseDate: '1989-07-12', - }, - { - id: 10857, - title: 'When the Wind Blows', - releaseDate: '1986-10-24', - }, - { - id: 10548, - title: 'When We Were Kings', - releaseDate: '1996-10-25', - }, - { - id: 37659, - title: "When You're Strange", - releaseDate: '2010-04-09', - }, - { - id: 11046, - title: 'Where Eagles Dare', - releaseDate: '1968-12-04', - }, - { - id: 426618, - title: 'Where Hands Touch', - releaseDate: '2018-09-14', - }, - { - id: 682507, - title: 'Where the Crawdads Sing', - releaseDate: '2022-07-14', - }, - { - id: 10564, - title: 'Where the Heart Is', - releaseDate: '2000-04-27', - }, - { - id: 17221, - title: 'Where the Sidewalk Ends', - releaseDate: '1950-07-07', - }, - { - id: 352208, - title: 'Where to Invade Next', - releaseDate: '2015-12-23', - }, - { - id: 2064, - title: 'While You Were Sleeping', - releaseDate: '1995-04-21', - }, - { - id: 367412, - title: 'Whiplash', - releaseDate: '2013-01-18', - }, - { - id: 244786, - title: 'Whiplash', - releaseDate: '2014-10-10', - }, - { - id: 779816, - title: 'White Bird', - releaseDate: '2023-10-25', - }, - { - id: 13368, - title: 'White Christmas', - releaseDate: '1954-10-14', - }, - { - id: 15794, - title: 'White Heat', - releaseDate: '1949-09-02', - }, - { - id: 10994, - title: 'White Oleander', - releaseDate: '2002-10-11', - }, - { - id: 507256, - title: 'Whitney', - releaseDate: '2018-07-05', - }, - { - id: 696157, - title: 'Whitney Houston: I Wanna Dance with Somebody', - releaseDate: '2022-12-20', - }, - { - id: 856, - title: 'Who Framed Roger Rabbit', - releaseDate: '1988-06-22', - }, - { - id: 13508, - title: 'Who Killed the Electric Car?', - releaseDate: '2006-08-04', - }, - { - id: 396, - title: "Who's Afraid of Virginia Woolf?", - releaseDate: '1966-06-22', - }, - { - id: 228970, - title: 'Wild', - releaseDate: '2014-12-05', - }, - { - id: 483, - title: 'Wild at Heart', - releaseDate: '1990-08-17', - }, - { - id: 847, - title: 'Willow', - releaseDate: '1988-05-20', - }, - { - id: 252, - title: 'Willy Wonka & the Chocolate Factory', - releaseDate: '1971-06-29', - }, - { - id: 14551, - title: "Winchester '73", - releaseDate: '1950-07-12', - }, - { - id: 574091, - title: 'Wind', - releaseDate: '2019-12-13', - }, - { - id: 395834, - title: 'Wind River', - releaseDate: '2017-08-03', - }, - { - id: 28966, - title: 'Wings', - releaseDate: '1927-08-12', - }, - { - id: 355020, - title: "Winter on Fire: Ukraine's Fight for Freedom", - releaseDate: '2015-09-03', - }, - { - id: 1059073, - title: 'Winter Spring Summer or Fall', - releaseDate: '2024-12-27', - }, - { - id: 550205, - title: 'Wish Dragon', - releaseDate: '2021-01-15', - }, - { - id: 13446, - title: 'Withnail & I', - releaseDate: '1987-06-19', - }, - { - id: 9281, - title: 'Witness', - releaseDate: '1985-02-08', - }, - { - id: 37257, - title: 'Witness for the Prosecution', - releaseDate: '1957-12-17', - }, - { - id: 26736, - title: 'Wizards of Waverly Place: The Movie', - releaseDate: '2009-08-28', - }, - { - id: 441130, - title: 'Wolfwalkers', - releaseDate: '2020-10-26', - }, - { - id: 304357, - title: 'Woman in Gold', - releaseDate: '2015-03-20', - }, - { - id: 490003, - title: "Won't You Be My Neighbor?", - releaseDate: '2018-06-29', - }, - { - id: 406997, - title: 'Wonder', - releaseDate: '2017-11-13', - }, - { - id: 297762, - title: 'Wonder Woman', - releaseDate: '2017-05-30', - }, - { - id: 15359, - title: 'Wonder Woman', - releaseDate: '2009-03-03', - }, - { - id: 787699, - title: 'Wonka', - releaseDate: '2023-12-06', - }, - { - id: 9459, - title: 'Woodstock', - releaseDate: '1970-03-26', - }, - { - id: 523781, - title: 'Words on Bathroom Walls', - releaseDate: '2020-08-21', - }, - { - id: 612706, - title: 'Work It', - releaseDate: '2020-08-07', - }, - { - id: 303867, - title: 'World of Tomorrow', - releaseDate: '2015-01-22', - }, - { - id: 637649, - title: 'Wrath of Man', - releaseDate: '2021-04-22', - }, - { - id: 82690, - title: 'Wreck-It Ralph', - releaseDate: '2012-11-01', - }, - { - id: 3084, - title: 'Wuthering Heights', - releaseDate: '1939-04-07', - }, - { - id: 36657, - title: 'X-Men', - releaseDate: '2000-07-13', - }, - { - id: 127585, - title: 'X-Men: Days of Future Past', - releaseDate: '2014-05-15', - }, - { - id: 49538, - title: 'X-Men: First Class', - releaseDate: '2011-06-01', - }, - { - id: 36658, - title: 'X2', - releaseDate: '2003-04-27', - }, - { - id: 3087, - title: 'Yankee Doodle Dandy', - releaseDate: '1942-05-29', - }, - { - id: 12105, - title: 'Yellow Submarine', - releaseDate: '1968-07-17', - }, - { - id: 34106, - title: "You Can't Take It with You", - releaseDate: '1938-09-01', - }, - { - id: 36950, - title: "You Don't Know Jack", - releaseDate: '2010-06-27', - }, - { - id: 52758, - title: 'You Only Live Once', - releaseDate: '1937-01-23', - }, - { - id: 290542, - title: "You're Not You", - releaseDate: '2014-10-10', - }, - { - id: 3034, - title: 'Young Frankenstein', - releaseDate: '1974-12-15', - }, - { - id: 43838, - title: 'Young Mr. Lincoln', - releaseDate: '1939-06-09', - }, - { - id: 774531, - title: 'Young Woman and the Sea', - releaseDate: '2024-05-31', - }, - { - id: 483980, - title: 'Z-O-M-B-I-E-S', - releaseDate: '2018-02-16', - }, - { - id: 599521, - title: 'Z-O-M-B-I-E-S 2', - releaseDate: '2020-06-13', - }, - { - id: 809107, - title: 'Z-O-M-B-I-E-S 3', - releaseDate: '2022-07-09', - }, - { - id: 2998, - title: 'Zabriskie Point', - releaseDate: '1970-03-26', - }, - { - id: 791373, - title: "Zack Snyder's Justice League", - releaseDate: '2021-03-18', - }, - { - id: 13180, - title: 'Zeitgeist: Addendum', - releaseDate: '2008-10-02', - }, - { - id: 54293, - title: 'Zeitgeist: Moving Forward', - releaseDate: '2011-01-15', - }, - { - id: 11030, - title: 'Zelig', - releaseDate: '1983-07-15', - }, - { - id: 380808, - title: 'Zero Days', - releaseDate: '2016-07-08', - }, - { - id: 1949, - title: 'Zodiac', - releaseDate: '2007-03-02', - }, - { - id: 19908, - title: 'Zombieland', - releaseDate: '2009-10-02', - }, - { - id: 269149, - title: 'Zootopia', - releaseDate: '2016-02-11', - }, - { - id: 1084242, - title: 'Zootopia 2', - releaseDate: '2025-11-26', - }, - { - id: 14433, - title: 'Zulu', - releaseDate: '1964-01-22', - }, - { - id: 464111, - title: 'Zygote', - releaseDate: '2017-07-12', - }, - { - id: 1181678, - title: '¿Quieres ser mi hijo?', - releaseDate: '2023-09-21', - }, - { - id: 671318, - title: '¿Y Cómo Es Él?', - releaseDate: '2022-04-07', - }, -]; - -export default movies; diff --git a/docs/data/material/components/autocomplete/server.js b/docs/data/material/components/autocomplete/server.js deleted file mode 100644 index a7de4c662bc9ae..00000000000000 --- a/docs/data/material/components/autocomplete/server.js +++ /dev/null @@ -1,80 +0,0 @@ -import movies from './movies'; - -const PAGE_SIZE = 20; -const FETCH_DELAY_MS = 400; - -/** Page of movies returned by the mock paginated search endpoint. */ - -export function normalizeMovieQuery(value) { - return value.trim().toLowerCase().replace(/\s+/g, ' '); -} - -function getMovieYear(movie) { - return movie.releaseDate.slice(0, 4); -} - -export function getMovieLabel(movie) { - return `${movie.title} (${getMovieYear(movie)})`; -} - -/** - * Checks whether a movie matches the normalized search query. - * - * @param movie - Movie to compare against the query. - * @param query - Normalized query returned by `normalizeMovieQuery`. - * @returns `true` when the title, title with year, or display label contains the query. - */ -function matchesMovie(movie, query) { - const title = normalizeMovieQuery(movie.title); - const titleWithYear = normalizeMovieQuery(`${movie.title} ${getMovieYear(movie)}`); - const label = normalizeMovieQuery(getMovieLabel(movie)); - - return ( - title.includes(query) || titleWithYear.includes(query) || label.includes(query) - ); -} - -async function waitForDelay(durationMs, signal) { - if (signal.aborted) { - throw signal.reason; - } - - await new Promise((resolve, reject) => { - let timeout; - - const handleAbort = () => { - clearTimeout(timeout); - reject(signal.reason); - }; - - timeout = setTimeout(() => { - signal.removeEventListener('abort', handleAbort); - resolve(); - }, durationMs); - - signal.addEventListener('abort', handleAbort, { once: true }); - }); -} - -/** - * Fetches one page from the mock paginated movie endpoint. - * - * In a real app this would call your API, and the server would handle filtering and pagination. - * - * @param query - Normalized search query used to filter movies. - * @param page - Zero-based page index to fetch. - * @param signal - Abort signal that lets TanStack Query cancel stale in-flight requests. - * @returns The requested page of movies and the next page index, or `null` when complete. - */ -export async function fetchMovies(query, page, signal) { - await waitForDelay(FETCH_DELAY_MS, signal); - - const filtered = query - ? movies.filter((movie) => matchesMovie(movie, query)) - : movies; - const start = page * PAGE_SIZE; - const items = filtered.slice(start, start + PAGE_SIZE); - const nextPage = start + PAGE_SIZE < filtered.length ? page + 1 : null; - - return { items, nextPage }; -} diff --git a/docs/data/material/components/autocomplete/top100Films.js b/docs/data/material/components/autocomplete/top100Films.js deleted file mode 100644 index 3226dcbc8ba7f3..00000000000000 --- a/docs/data/material/components/autocomplete/top100Films.js +++ /dev/null @@ -1,129 +0,0 @@ -// Top 100 films as rated by IMDb users. http://www.imdb.com/chart/top -const top100Films = [ - { label: 'The Shawshank Redemption', year: 1994 }, - { label: 'The Godfather', year: 1972 }, - { label: 'The Godfather: Part II', year: 1974 }, - { label: 'The Dark Knight', year: 2008 }, - { label: '12 Angry Men', year: 1957 }, - { label: "Schindler's List", year: 1993 }, - { label: 'Pulp Fiction', year: 1994 }, - { - label: 'The Lord of the Rings: The Return of the King', - year: 2003, - }, - { label: 'The Good, the Bad and the Ugly', year: 1966 }, - { label: 'Fight Club', year: 1999 }, - { - label: 'The Lord of the Rings: The Fellowship of the Ring', - year: 2001, - }, - { - label: 'Star Wars: Episode V - The Empire Strikes Back', - year: 1980, - }, - { label: 'Forrest Gump', year: 1994 }, - { label: 'Inception', year: 2010 }, - { - label: 'The Lord of the Rings: The Two Towers', - year: 2002, - }, - { label: "One Flew Over the Cuckoo's Nest", year: 1975 }, - { label: 'Goodfellas', year: 1990 }, - { label: 'The Matrix', year: 1999 }, - { label: 'Seven Samurai', year: 1954 }, - { - label: 'Star Wars: Episode IV - A New Hope', - year: 1977, - }, - { label: 'City of God', year: 2002 }, - { label: 'Se7en', year: 1995 }, - { label: 'The Silence of the Lambs', year: 1991 }, - { label: "It's a Wonderful Life", year: 1946 }, - { label: 'Life Is Beautiful', year: 1997 }, - { label: 'The Usual Suspects', year: 1995 }, - { label: 'Léon: The Professional', year: 1994 }, - { label: 'Spirited Away', year: 2001 }, - { label: 'Saving Private Ryan', year: 1998 }, - { label: 'Once Upon a Time in the West', year: 1968 }, - { label: 'American History X', year: 1998 }, - { label: 'Interstellar', year: 2014 }, - { label: 'Casablanca', year: 1942 }, - { label: 'City Lights', year: 1931 }, - { label: 'Psycho', year: 1960 }, - { label: 'The Green Mile', year: 1999 }, - { label: 'The Intouchables', year: 2011 }, - { label: 'Modern Times', year: 1936 }, - { label: 'Raiders of the Lost Ark', year: 1981 }, - { label: 'Rear Window', year: 1954 }, - { label: 'The Pianist', year: 2002 }, - { label: 'The Departed', year: 2006 }, - { label: 'Terminator 2: Judgment Day', year: 1991 }, - { label: 'Back to the Future', year: 1985 }, - { label: 'Whiplash', year: 2014 }, - { label: 'Gladiator', year: 2000 }, - { label: 'Memento', year: 2000 }, - { label: 'The Prestige', year: 2006 }, - { label: 'The Lion King', year: 1994 }, - { label: 'Apocalypse Now', year: 1979 }, - { label: 'Alien', year: 1979 }, - { label: 'Sunset Boulevard', year: 1950 }, - { - label: 'Dr. Strangelove or: How I Learned to Stop Worrying and Love the Bomb', - year: 1964, - }, - { label: 'The Great Dictator', year: 1940 }, - { label: 'Cinema Paradiso', year: 1988 }, - { label: 'The Lives of Others', year: 2006 }, - { label: 'Grave of the Fireflies', year: 1988 }, - { label: 'Paths of Glory', year: 1957 }, - { label: 'Django Unchained', year: 2012 }, - { label: 'The Shining', year: 1980 }, - { label: 'WALL·E', year: 2008 }, - { label: 'American Beauty', year: 1999 }, - { label: 'The Dark Knight Rises', year: 2012 }, - { label: 'Princess Mononoke', year: 1997 }, - { label: 'Aliens', year: 1986 }, - { label: 'Oldboy', year: 2003 }, - { label: 'Once Upon a Time in America', year: 1984 }, - { label: 'Witness for the Prosecution', year: 1957 }, - { label: 'Das Boot', year: 1981 }, - { label: 'Citizen Kane', year: 1941 }, - { label: 'North by Northwest', year: 1959 }, - { label: 'Vertigo', year: 1958 }, - { - label: 'Star Wars: Episode VI - Return of the Jedi', - year: 1983, - }, - { label: 'Reservoir Dogs', year: 1992 }, - { label: 'Braveheart', year: 1995 }, - { label: 'M', year: 1931 }, - { label: 'Requiem for a Dream', year: 2000 }, - { label: 'Amélie', year: 2001 }, - { label: 'A Clockwork Orange', year: 1971 }, - { label: 'Like Stars on Earth', year: 2007 }, - { label: 'Taxi Driver', year: 1976 }, - { label: 'Lawrence of Arabia', year: 1962 }, - { label: 'Double Indemnity', year: 1944 }, - { - label: 'Eternal Sunshine of the Spotless Mind', - year: 2004, - }, - { label: 'Amadeus', year: 1984 }, - { label: 'To Kill a Mockingbird', year: 1962 }, - { label: 'Toy Story 3', year: 2010 }, - { label: 'Logan', year: 2017 }, - { label: 'Full Metal Jacket', year: 1987 }, - { label: 'Dangal', year: 2016 }, - { label: 'The Sting', year: 1973 }, - { label: '2001: A Space Odyssey', year: 1968 }, - { label: "Singin' in the Rain", year: 1952 }, - { label: 'Toy Story', year: 1995 }, - { label: 'Bicycle Thieves', year: 1948 }, - { label: 'The Kid', year: 1921 }, - { label: 'Inglourious Basterds', year: 2009 }, - { label: 'Snatch', year: 2000 }, - { label: '3 Idiots', year: 2009 }, - { label: 'Monty Python and the Holy Grail', year: 1975 }, -]; - -export default top100Films; diff --git a/docs/data/material/components/avatars/BackgroundLetterAvatars.js b/docs/data/material/components/avatars/BackgroundLetterAvatars.js deleted file mode 100644 index 70096a5381cf47..00000000000000 --- a/docs/data/material/components/avatars/BackgroundLetterAvatars.js +++ /dev/null @@ -1,41 +0,0 @@ -import Avatar from '@mui/material/Avatar'; -import Stack from '@mui/material/Stack'; - -function stringToColor(string) { - let hash = 0; - let i; - - /* eslint-disable no-bitwise */ - for (i = 0; i < string.length; i += 1) { - hash = string.charCodeAt(i) + ((hash << 5) - hash); - } - - let color = '#'; - - for (i = 0; i < 3; i += 1) { - const value = (hash >> (i * 8)) & 0xff; - color += `00${value.toString(16)}`.slice(-2); - } - /* eslint-enable no-bitwise */ - - return color; -} - -function stringAvatar(name) { - return { - sx: { - bgcolor: stringToColor(name), - }, - children: `${name.split(' ')[0][0]}${name.split(' ')[1][0]}`, - }; -} - -export default function BackgroundLetterAvatars() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/avatars/BackgroundLetterAvatars.tsx.preview b/docs/data/material/components/avatars/BackgroundLetterAvatars.tsx.preview deleted file mode 100644 index f731a3ecc789c1..00000000000000 --- a/docs/data/material/components/avatars/BackgroundLetterAvatars.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/avatars/BadgeAvatars.js b/docs/data/material/components/avatars/BadgeAvatars.js deleted file mode 100644 index 15096edc0cfadf..00000000000000 --- a/docs/data/material/components/avatars/BadgeAvatars.js +++ /dev/null @@ -1,75 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Badge from '@mui/material/Badge'; -import Avatar from '@mui/material/Avatar'; -import Stack from '@mui/material/Stack'; -import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile'; - -const StyledBadge = styled(Badge)(({ theme }) => ({ - '& .MuiBadge-badge': { - backgroundColor: '#44b700', - color: '#44b700', - boxShadow: `0 0 0 2px ${theme.palette.background.paper}`, - '&::after': { - position: 'absolute', - top: 0, - left: 0, - width: '100%', - height: '100%', - borderRadius: '50%', - animation: 'ripple 1.2s infinite ease-in-out', - border: '1px solid currentColor', - content: '""', - }, - }, - '@keyframes ripple': { - '0%': { - transform: 'scale(.8)', - opacity: 1, - }, - '100%': { - transform: 'scale(2.4)', - opacity: 0, - }, - }, -})); - -const SmallAvatar = styled(Avatar)(({ theme }) => ({ - width: 22, - height: 22, - border: `2px solid ${theme.palette.background.paper}`, -})); - -export default function BadgeAvatars() { - return ( - - - - - - - - } - > - - - - ); -} diff --git a/docs/data/material/components/avatars/CustomSurplusAvatars.js b/docs/data/material/components/avatars/CustomSurplusAvatars.js deleted file mode 100644 index 0154cacd51933e..00000000000000 --- a/docs/data/material/components/avatars/CustomSurplusAvatars.js +++ /dev/null @@ -1,16 +0,0 @@ -import Avatar from '@mui/material/Avatar'; -import AvatarGroup from '@mui/material/AvatarGroup'; - -export default function CustomSurplusAvatars() { - return ( - +{surplus.toString()[0]}k} - total={4251} - > - - - - - - ); -} diff --git a/docs/data/material/components/avatars/CustomSurplusAvatars.tsx.preview b/docs/data/material/components/avatars/CustomSurplusAvatars.tsx.preview deleted file mode 100644 index 8db3b90b5a3537..00000000000000 --- a/docs/data/material/components/avatars/CustomSurplusAvatars.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - +{surplus.toString()[0]}k} - total={4251} -> - - - - - \ No newline at end of file diff --git a/docs/data/material/components/avatars/FallbackAvatars.js b/docs/data/material/components/avatars/FallbackAvatars.js deleted file mode 100644 index 21f63cdd93abef..00000000000000 --- a/docs/data/material/components/avatars/FallbackAvatars.js +++ /dev/null @@ -1,23 +0,0 @@ -import Avatar from '@mui/material/Avatar'; -import Stack from '@mui/material/Stack'; -import { deepOrange } from '@mui/material/colors'; - -export default function FallbackAvatars() { - return ( - - - B - - - - - ); -} diff --git a/docs/data/material/components/avatars/FallbackAvatars.tsx.preview b/docs/data/material/components/avatars/FallbackAvatars.tsx.preview deleted file mode 100644 index b52d3ad51f2a0a..00000000000000 --- a/docs/data/material/components/avatars/FallbackAvatars.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - - B - - - \ No newline at end of file diff --git a/docs/data/material/components/avatars/GroupAvatars.js b/docs/data/material/components/avatars/GroupAvatars.js deleted file mode 100644 index 70714f654e293c..00000000000000 --- a/docs/data/material/components/avatars/GroupAvatars.js +++ /dev/null @@ -1,14 +0,0 @@ -import Avatar from '@mui/material/Avatar'; -import AvatarGroup from '@mui/material/AvatarGroup'; - -export default function GroupAvatars() { - return ( - - - - - - - - ); -} diff --git a/docs/data/material/components/avatars/GroupAvatars.tsx.preview b/docs/data/material/components/avatars/GroupAvatars.tsx.preview deleted file mode 100644 index f865ffa9ae8d82..00000000000000 --- a/docs/data/material/components/avatars/GroupAvatars.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/avatars/IconAvatars.js b/docs/data/material/components/avatars/IconAvatars.js deleted file mode 100644 index 49a488cbea691c..00000000000000 --- a/docs/data/material/components/avatars/IconAvatars.js +++ /dev/null @@ -1,22 +0,0 @@ -import { green, pink } from '@mui/material/colors'; -import Avatar from '@mui/material/Avatar'; -import Stack from '@mui/material/Stack'; -import FolderIcon from '@mui/icons-material/Folder'; -import PageviewIcon from '@mui/icons-material/Pageview'; -import AssignmentIcon from '@mui/icons-material/Assignment'; - -export default function IconAvatars() { - return ( - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/avatars/IconAvatars.tsx.preview b/docs/data/material/components/avatars/IconAvatars.tsx.preview deleted file mode 100644 index 67b6c667b0eead..00000000000000 --- a/docs/data/material/components/avatars/IconAvatars.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/avatars/ImageAvatars.js b/docs/data/material/components/avatars/ImageAvatars.js deleted file mode 100644 index cd098b04762ca5..00000000000000 --- a/docs/data/material/components/avatars/ImageAvatars.js +++ /dev/null @@ -1,12 +0,0 @@ -import Avatar from '@mui/material/Avatar'; -import Stack from '@mui/material/Stack'; - -export default function ImageAvatars() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/avatars/ImageAvatars.tsx.preview b/docs/data/material/components/avatars/ImageAvatars.tsx.preview deleted file mode 100644 index b3b39275567a8f..00000000000000 --- a/docs/data/material/components/avatars/ImageAvatars.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/avatars/LetterAvatars.js b/docs/data/material/components/avatars/LetterAvatars.js deleted file mode 100644 index 90d17e6675974b..00000000000000 --- a/docs/data/material/components/avatars/LetterAvatars.js +++ /dev/null @@ -1,13 +0,0 @@ -import Avatar from '@mui/material/Avatar'; -import Stack from '@mui/material/Stack'; -import { deepOrange, deepPurple } from '@mui/material/colors'; - -export default function LetterAvatars() { - return ( - - H - N - OP - - ); -} diff --git a/docs/data/material/components/avatars/LetterAvatars.tsx.preview b/docs/data/material/components/avatars/LetterAvatars.tsx.preview deleted file mode 100644 index 1e621d07b54fbe..00000000000000 --- a/docs/data/material/components/avatars/LetterAvatars.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ -H -N -OP \ No newline at end of file diff --git a/docs/data/material/components/avatars/SizeAvatars.js b/docs/data/material/components/avatars/SizeAvatars.js deleted file mode 100644 index 3d2d12a5893e90..00000000000000 --- a/docs/data/material/components/avatars/SizeAvatars.js +++ /dev/null @@ -1,20 +0,0 @@ -import Avatar from '@mui/material/Avatar'; -import Stack from '@mui/material/Stack'; - -export default function SizeAvatars() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/avatars/SizeAvatars.tsx.preview b/docs/data/material/components/avatars/SizeAvatars.tsx.preview deleted file mode 100644 index 7acc89d41d5e54..00000000000000 --- a/docs/data/material/components/avatars/SizeAvatars.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/avatars/Spacing.js b/docs/data/material/components/avatars/Spacing.js deleted file mode 100644 index de77dea3dc31d6..00000000000000 --- a/docs/data/material/components/avatars/Spacing.js +++ /dev/null @@ -1,25 +0,0 @@ -import Avatar from '@mui/material/Avatar'; -import AvatarGroup from '@mui/material/AvatarGroup'; -import Stack from '@mui/material/Stack'; - -export default function Spacing() { - return ( - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/avatars/Spacing.tsx.preview b/docs/data/material/components/avatars/Spacing.tsx.preview deleted file mode 100644 index 557dd187523778..00000000000000 --- a/docs/data/material/components/avatars/Spacing.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/avatars/TotalAvatars.js b/docs/data/material/components/avatars/TotalAvatars.js deleted file mode 100644 index 6be6b70d862df4..00000000000000 --- a/docs/data/material/components/avatars/TotalAvatars.js +++ /dev/null @@ -1,13 +0,0 @@ -import Avatar from '@mui/material/Avatar'; -import AvatarGroup from '@mui/material/AvatarGroup'; - -export default function TotalAvatars() { - return ( - - - - - - - ); -} diff --git a/docs/data/material/components/avatars/TotalAvatars.tsx.preview b/docs/data/material/components/avatars/TotalAvatars.tsx.preview deleted file mode 100644 index ac1e5cce7ef76b..00000000000000 --- a/docs/data/material/components/avatars/TotalAvatars.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/avatars/UploadAvatars.js b/docs/data/material/components/avatars/UploadAvatars.js deleted file mode 100644 index dc560eb8832bca..00000000000000 --- a/docs/data/material/components/avatars/UploadAvatars.js +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from 'react'; -import Avatar from '@mui/material/Avatar'; -import ButtonBase from '@mui/material/ButtonBase'; - -export default function UploadAvatars() { - const [avatarSrc, setAvatarSrc] = React.useState(undefined); - - const handleAvatarChange = (event) => { - const file = event.target.files?.[0]; - if (file) { - // Read the file as a data URL - const reader = new FileReader(); - reader.onload = () => { - setAvatarSrc(reader.result); - }; - reader.readAsDataURL(file); - } - }; - - return ( - - - - - ); -} diff --git a/docs/data/material/components/avatars/VariantAvatars.js b/docs/data/material/components/avatars/VariantAvatars.js deleted file mode 100644 index 7c3669ef739264..00000000000000 --- a/docs/data/material/components/avatars/VariantAvatars.js +++ /dev/null @@ -1,17 +0,0 @@ -import Avatar from '@mui/material/Avatar'; -import Stack from '@mui/material/Stack'; -import { deepOrange, green } from '@mui/material/colors'; -import AssignmentIcon from '@mui/icons-material/Assignment'; - -export default function VariantAvatars() { - return ( - - - N - - - - - - ); -} diff --git a/docs/data/material/components/avatars/VariantAvatars.tsx.preview b/docs/data/material/components/avatars/VariantAvatars.tsx.preview deleted file mode 100644 index 92754efe3e4519..00000000000000 --- a/docs/data/material/components/avatars/VariantAvatars.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - - N - - - - \ No newline at end of file diff --git a/docs/data/material/components/avatars/avatars.md b/docs/data/material/components/avatars/avatars.md index 91abf386256452..ab45484dcef9c3 100644 --- a/docs/data/material/components/avatars/avatars.md +++ b/docs/data/material/components/avatars/avatars.md @@ -16,36 +16,36 @@ githubSource: packages/mui-material/src/Avatar Image avatars can be created by passing standard `img` props `src` or `srcSet` to the component. -{{"demo": "ImageAvatars.js"}} +{{"component": "file://./demos/image/index.ts"}} ## Letter avatars Avatars containing simple characters can be created by passing a string as `children`. -{{"demo": "LetterAvatars.js"}} +{{"component": "file://./demos/letter/index.ts"}} You can use different background colors for the avatar. The following demo generates the color based on the name of the person. -{{"demo": "BackgroundLetterAvatars.js"}} +{{"component": "file://./demos/background-letter/index.ts"}} ## Sizes You can change the size of the avatar with the `height` and `width` CSS properties. -{{"demo": "SizeAvatars.js"}} +{{"component": "file://./demos/size/index.ts"}} ## Icon avatars Icon avatars are created by passing an icon as `children`. -{{"demo": "IconAvatars.js"}} +{{"component": "file://./demos/icon/index.ts"}} ## Variants If you need square or rounded avatars, use the `variant` prop. -{{"demo": "VariantAvatars.js"}} +{{"component": "file://./demos/variant/index.ts"}} ## Fallbacks @@ -55,19 +55,19 @@ If there is an error loading the avatar image, the component falls back to an al - the first letter of the `alt` text - a generic avatar icon -{{"demo": "FallbackAvatars.js"}} +{{"component": "file://./demos/fallback/index.ts"}} ## Grouped `AvatarGroup` renders its children as a stack. Use the `max` prop to limit the number of avatars. -{{"demo": "GroupAvatars.js"}} +{{"component": "file://./demos/group/index.ts"}} ### Total avatars If you need to control the total number of avatars not shown, you can use the `total` prop. -{{"demo": "TotalAvatars.js"}} +{{"component": "file://./demos/total/index.ts"}} ### Custom surplus @@ -75,18 +75,18 @@ Set the `renderSurplus` prop as a callback to customize the surplus avatar. The The `renderSurplus` prop is useful when you need to render the surplus based on the data sent from the server. -{{"demo": "CustomSurplusAvatars.js"}} +{{"component": "file://./demos/custom-surplus/index.ts"}} ### Spacing You can change the spacing between avatars using the `spacing` prop. You can use one of the presets (`"medium"`, the default, or `"small"`) or set a custom numeric value. -{{"demo": "Spacing.js"}} +{{"component": "file://./demos/spacing/index.ts"}} ## With badge -{{"demo": "BadgeAvatars.js"}} +{{"component": "file://./demos/badge/index.ts"}} ## Avatar upload -{{"demo": "UploadAvatars.js"}} +{{"component": "file://./demos/upload/index.ts"}} diff --git a/docs/data/material/components/avatars/BackgroundLetterAvatars.tsx b/docs/data/material/components/avatars/demos/background-letter/BackgroundLetterAvatars.tsx similarity index 94% rename from docs/data/material/components/avatars/BackgroundLetterAvatars.tsx rename to docs/data/material/components/avatars/demos/background-letter/BackgroundLetterAvatars.tsx index 7135deed32890f..bb804be1038875 100644 --- a/docs/data/material/components/avatars/BackgroundLetterAvatars.tsx +++ b/docs/data/material/components/avatars/demos/background-letter/BackgroundLetterAvatars.tsx @@ -33,9 +33,11 @@ function stringAvatar(name: string) { export default function BackgroundLetterAvatars() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/avatars/demos/background-letter/client.ts b/docs/data/material/components/avatars/demos/background-letter/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/avatars/demos/background-letter/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/avatars/demos/background-letter/index.ts b/docs/data/material/components/avatars/demos/background-letter/index.ts new file mode 100644 index 00000000000000..9aa19db85fa678 --- /dev/null +++ b/docs/data/material/components/avatars/demos/background-letter/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BackgroundLetterAvatars from './BackgroundLetterAvatars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BackgroundLetterAvatars, { ClientProvider }); diff --git a/docs/data/material/components/avatars/BadgeAvatars.tsx b/docs/data/material/components/avatars/demos/badge/BadgeAvatars.tsx similarity index 97% rename from docs/data/material/components/avatars/BadgeAvatars.tsx rename to docs/data/material/components/avatars/demos/badge/BadgeAvatars.tsx index 15096edc0cfadf..8d0b5678aeb98e 100644 --- a/docs/data/material/components/avatars/BadgeAvatars.tsx +++ b/docs/data/material/components/avatars/demos/badge/BadgeAvatars.tsx @@ -42,6 +42,7 @@ const SmallAvatar = styled(Avatar)(({ theme }) => ({ export default function BadgeAvatars() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/avatars/demos/badge/client.ts b/docs/data/material/components/avatars/demos/badge/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/avatars/demos/badge/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/avatars/demos/badge/index.ts b/docs/data/material/components/avatars/demos/badge/index.ts new file mode 100644 index 00000000000000..b0e16e081fbfb0 --- /dev/null +++ b/docs/data/material/components/avatars/demos/badge/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BadgeAvatars from './BadgeAvatars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BadgeAvatars, { ClientProvider }); diff --git a/docs/data/material/components/avatars/CustomSurplusAvatars.tsx b/docs/data/material/components/avatars/demos/custom-surplus/CustomSurplusAvatars.tsx similarity index 92% rename from docs/data/material/components/avatars/CustomSurplusAvatars.tsx rename to docs/data/material/components/avatars/demos/custom-surplus/CustomSurplusAvatars.tsx index 0154cacd51933e..bab27df83c10ca 100644 --- a/docs/data/material/components/avatars/CustomSurplusAvatars.tsx +++ b/docs/data/material/components/avatars/demos/custom-surplus/CustomSurplusAvatars.tsx @@ -3,6 +3,7 @@ import AvatarGroup from '@mui/material/AvatarGroup'; export default function CustomSurplusAvatars() { return ( + // @focus-start @padding 2 +{surplus.toString()[0]}k} total={4251} @@ -12,5 +13,6 @@ export default function CustomSurplusAvatars() { + // @focus-end ); } diff --git a/docs/data/material/components/avatars/demos/custom-surplus/client.ts b/docs/data/material/components/avatars/demos/custom-surplus/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/avatars/demos/custom-surplus/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/avatars/demos/custom-surplus/index.ts b/docs/data/material/components/avatars/demos/custom-surplus/index.ts new file mode 100644 index 00000000000000..2a2a8f788363bb --- /dev/null +++ b/docs/data/material/components/avatars/demos/custom-surplus/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomSurplusAvatars from './CustomSurplusAvatars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomSurplusAvatars, { ClientProvider }); diff --git a/docs/data/material/components/avatars/FallbackAvatars.tsx b/docs/data/material/components/avatars/demos/fallback/FallbackAvatars.tsx similarity index 91% rename from docs/data/material/components/avatars/FallbackAvatars.tsx rename to docs/data/material/components/avatars/demos/fallback/FallbackAvatars.tsx index 21f63cdd93abef..8c3b10e062a903 100644 --- a/docs/data/material/components/avatars/FallbackAvatars.tsx +++ b/docs/data/material/components/avatars/demos/fallback/FallbackAvatars.tsx @@ -5,6 +5,7 @@ import { deepOrange } from '@mui/material/colors'; export default function FallbackAvatars() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/avatars/demos/fallback/client.ts b/docs/data/material/components/avatars/demos/fallback/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/avatars/demos/fallback/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/avatars/demos/fallback/index.ts b/docs/data/material/components/avatars/demos/fallback/index.ts new file mode 100644 index 00000000000000..46323d47c0da41 --- /dev/null +++ b/docs/data/material/components/avatars/demos/fallback/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FallbackAvatars from './FallbackAvatars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FallbackAvatars, { ClientProvider }); diff --git a/docs/data/material/components/avatars/GroupAvatars.tsx b/docs/data/material/components/avatars/demos/group/GroupAvatars.tsx similarity index 91% rename from docs/data/material/components/avatars/GroupAvatars.tsx rename to docs/data/material/components/avatars/demos/group/GroupAvatars.tsx index 70714f654e293c..4871f758646416 100644 --- a/docs/data/material/components/avatars/GroupAvatars.tsx +++ b/docs/data/material/components/avatars/demos/group/GroupAvatars.tsx @@ -3,6 +3,7 @@ import AvatarGroup from '@mui/material/AvatarGroup'; export default function GroupAvatars() { return ( + // @focus-start @padding 2 @@ -10,5 +11,6 @@ export default function GroupAvatars() { + // @focus-end ); } diff --git a/docs/data/material/components/avatars/demos/group/client.ts b/docs/data/material/components/avatars/demos/group/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/avatars/demos/group/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/avatars/demos/group/index.ts b/docs/data/material/components/avatars/demos/group/index.ts new file mode 100644 index 00000000000000..a46681e8f7b2e8 --- /dev/null +++ b/docs/data/material/components/avatars/demos/group/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GroupAvatars from './GroupAvatars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GroupAvatars, { ClientProvider }); diff --git a/docs/data/material/components/avatars/IconAvatars.tsx b/docs/data/material/components/avatars/demos/icon/IconAvatars.tsx similarity index 92% rename from docs/data/material/components/avatars/IconAvatars.tsx rename to docs/data/material/components/avatars/demos/icon/IconAvatars.tsx index 49a488cbea691c..681bcd1e8d9d3b 100644 --- a/docs/data/material/components/avatars/IconAvatars.tsx +++ b/docs/data/material/components/avatars/demos/icon/IconAvatars.tsx @@ -8,6 +8,7 @@ import AssignmentIcon from '@mui/icons-material/Assignment'; export default function IconAvatars() { return ( + {/* @focus-start */} @@ -17,6 +18,7 @@ export default function IconAvatars() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/avatars/demos/icon/client.ts b/docs/data/material/components/avatars/demos/icon/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/avatars/demos/icon/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/avatars/demos/icon/index.ts b/docs/data/material/components/avatars/demos/icon/index.ts new file mode 100644 index 00000000000000..a73e36fd10b0a9 --- /dev/null +++ b/docs/data/material/components/avatars/demos/icon/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IconAvatars from './IconAvatars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IconAvatars, { ClientProvider }); diff --git a/docs/data/material/components/avatars/ImageAvatars.tsx b/docs/data/material/components/avatars/demos/image/ImageAvatars.tsx similarity index 88% rename from docs/data/material/components/avatars/ImageAvatars.tsx rename to docs/data/material/components/avatars/demos/image/ImageAvatars.tsx index cd098b04762ca5..74170b08344cde 100644 --- a/docs/data/material/components/avatars/ImageAvatars.tsx +++ b/docs/data/material/components/avatars/demos/image/ImageAvatars.tsx @@ -4,9 +4,11 @@ import Stack from '@mui/material/Stack'; export default function ImageAvatars() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/avatars/demos/image/client.ts b/docs/data/material/components/avatars/demos/image/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/avatars/demos/image/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/avatars/demos/image/index.ts b/docs/data/material/components/avatars/demos/image/index.ts new file mode 100644 index 00000000000000..ab4a9afb1e84c2 --- /dev/null +++ b/docs/data/material/components/avatars/demos/image/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ImageAvatars from './ImageAvatars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ImageAvatars, { ClientProvider }); diff --git a/docs/data/material/components/avatars/LetterAvatars.tsx b/docs/data/material/components/avatars/demos/letter/LetterAvatars.tsx similarity index 88% rename from docs/data/material/components/avatars/LetterAvatars.tsx rename to docs/data/material/components/avatars/demos/letter/LetterAvatars.tsx index 90d17e6675974b..61823c1a6d2423 100644 --- a/docs/data/material/components/avatars/LetterAvatars.tsx +++ b/docs/data/material/components/avatars/demos/letter/LetterAvatars.tsx @@ -5,9 +5,11 @@ import { deepOrange, deepPurple } from '@mui/material/colors'; export default function LetterAvatars() { return ( + {/* @focus-start */} H N OP + {/* @focus-end */} ); } diff --git a/docs/data/material/components/avatars/demos/letter/client.ts b/docs/data/material/components/avatars/demos/letter/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/avatars/demos/letter/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/avatars/demos/letter/index.ts b/docs/data/material/components/avatars/demos/letter/index.ts new file mode 100644 index 00000000000000..2021be9880cad7 --- /dev/null +++ b/docs/data/material/components/avatars/demos/letter/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LetterAvatars from './LetterAvatars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LetterAvatars, { ClientProvider }); diff --git a/docs/data/material/components/avatars/SizeAvatars.tsx b/docs/data/material/components/avatars/demos/size/SizeAvatars.tsx similarity index 90% rename from docs/data/material/components/avatars/SizeAvatars.tsx rename to docs/data/material/components/avatars/demos/size/SizeAvatars.tsx index 3d2d12a5893e90..9aee5dac50c83b 100644 --- a/docs/data/material/components/avatars/SizeAvatars.tsx +++ b/docs/data/material/components/avatars/demos/size/SizeAvatars.tsx @@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack'; export default function SizeAvatars() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/avatars/demos/size/client.ts b/docs/data/material/components/avatars/demos/size/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/avatars/demos/size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/avatars/demos/size/index.ts b/docs/data/material/components/avatars/demos/size/index.ts new file mode 100644 index 00000000000000..0a8562dd96efb4 --- /dev/null +++ b/docs/data/material/components/avatars/demos/size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SizeAvatars from './SizeAvatars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SizeAvatars, { ClientProvider }); diff --git a/docs/data/material/components/avatars/Spacing.tsx b/docs/data/material/components/avatars/demos/spacing/Spacing.tsx similarity index 95% rename from docs/data/material/components/avatars/Spacing.tsx rename to docs/data/material/components/avatars/demos/spacing/Spacing.tsx index de77dea3dc31d6..0a0d9f5f75c9d5 100644 --- a/docs/data/material/components/avatars/Spacing.tsx +++ b/docs/data/material/components/avatars/demos/spacing/Spacing.tsx @@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack'; export default function Spacing() { return ( + {/* @focus-start */} @@ -20,6 +21,7 @@ export default function Spacing() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/avatars/demos/spacing/client.ts b/docs/data/material/components/avatars/demos/spacing/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/avatars/demos/spacing/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/avatars/demos/spacing/index.ts b/docs/data/material/components/avatars/demos/spacing/index.ts new file mode 100644 index 00000000000000..86036ebd6eab7f --- /dev/null +++ b/docs/data/material/components/avatars/demos/spacing/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Spacing from './Spacing'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Spacing, { ClientProvider }); diff --git a/docs/data/material/components/avatars/TotalAvatars.tsx b/docs/data/material/components/avatars/demos/total/TotalAvatars.tsx similarity index 90% rename from docs/data/material/components/avatars/TotalAvatars.tsx rename to docs/data/material/components/avatars/demos/total/TotalAvatars.tsx index 6be6b70d862df4..fe6dc00727b357 100644 --- a/docs/data/material/components/avatars/TotalAvatars.tsx +++ b/docs/data/material/components/avatars/demos/total/TotalAvatars.tsx @@ -3,11 +3,13 @@ import AvatarGroup from '@mui/material/AvatarGroup'; export default function TotalAvatars() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/avatars/demos/total/client.ts b/docs/data/material/components/avatars/demos/total/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/avatars/demos/total/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/avatars/demos/total/index.ts b/docs/data/material/components/avatars/demos/total/index.ts new file mode 100644 index 00000000000000..a87ef06949e80f --- /dev/null +++ b/docs/data/material/components/avatars/demos/total/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TotalAvatars from './TotalAvatars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TotalAvatars, { ClientProvider }); diff --git a/docs/data/material/components/avatars/UploadAvatars.tsx b/docs/data/material/components/avatars/demos/upload/UploadAvatars.tsx similarity index 96% rename from docs/data/material/components/avatars/UploadAvatars.tsx rename to docs/data/material/components/avatars/demos/upload/UploadAvatars.tsx index 35d757876c51b8..17611a133bb6ed 100644 --- a/docs/data/material/components/avatars/UploadAvatars.tsx +++ b/docs/data/material/components/avatars/demos/upload/UploadAvatars.tsx @@ -3,6 +3,7 @@ import Avatar from '@mui/material/Avatar'; import ButtonBase from '@mui/material/ButtonBase'; export default function UploadAvatars() { + // @focus-start @padding 1 const [avatarSrc, setAvatarSrc] = React.useState(undefined); const handleAvatarChange = (event: React.ChangeEvent) => { @@ -50,4 +51,5 @@ export default function UploadAvatars() { /> ); + // @focus-end } diff --git a/docs/data/material/components/avatars/demos/upload/client.ts b/docs/data/material/components/avatars/demos/upload/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/avatars/demos/upload/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/avatars/demos/upload/index.ts b/docs/data/material/components/avatars/demos/upload/index.ts new file mode 100644 index 00000000000000..94832c7e0f7098 --- /dev/null +++ b/docs/data/material/components/avatars/demos/upload/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UploadAvatars from './UploadAvatars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UploadAvatars, { ClientProvider }); diff --git a/docs/data/material/components/avatars/VariantAvatars.tsx b/docs/data/material/components/avatars/demos/variant/VariantAvatars.tsx similarity index 90% rename from docs/data/material/components/avatars/VariantAvatars.tsx rename to docs/data/material/components/avatars/demos/variant/VariantAvatars.tsx index 7c3669ef739264..45d378a71f584f 100644 --- a/docs/data/material/components/avatars/VariantAvatars.tsx +++ b/docs/data/material/components/avatars/demos/variant/VariantAvatars.tsx @@ -6,12 +6,14 @@ import AssignmentIcon from '@mui/icons-material/Assignment'; export default function VariantAvatars() { return ( + {/* @focus-start */} N + {/* @focus-end */} ); } diff --git a/docs/data/material/components/avatars/demos/variant/client.ts b/docs/data/material/components/avatars/demos/variant/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/avatars/demos/variant/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/avatars/demos/variant/index.ts b/docs/data/material/components/avatars/demos/variant/index.ts new file mode 100644 index 00000000000000..88c22b8845e144 --- /dev/null +++ b/docs/data/material/components/avatars/demos/variant/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VariantAvatars from './VariantAvatars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VariantAvatars, { ClientProvider }); diff --git a/docs/data/material/components/backdrop/SimpleBackdrop.js b/docs/data/material/components/backdrop/SimpleBackdrop.js deleted file mode 100644 index 0e72b7ae98c595..00000000000000 --- a/docs/data/material/components/backdrop/SimpleBackdrop.js +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react'; -import Backdrop from '@mui/material/Backdrop'; -import CircularProgress from '@mui/material/CircularProgress'; -import Button from '@mui/material/Button'; - -export default function SimpleBackdrop() { - const [open, setOpen] = React.useState(false); - const handleClose = () => { - setOpen(false); - }; - const handleOpen = () => { - setOpen(true); - }; - - return ( -
    - - ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })} - open={open} - onClick={handleClose} - > - - -
    - ); -} diff --git a/docs/data/material/components/backdrop/SimpleBackdrop.tsx.preview b/docs/data/material/components/backdrop/SimpleBackdrop.tsx.preview deleted file mode 100644 index 0b9b3de8861de8..00000000000000 --- a/docs/data/material/components/backdrop/SimpleBackdrop.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })} - open={open} - onClick={handleClose} -> - - \ No newline at end of file diff --git a/docs/data/material/components/backdrop/backdrop.md b/docs/data/material/components/backdrop/backdrop.md index 0f932e3a56fa2c..fd3635e5479b1e 100644 --- a/docs/data/material/components/backdrop/backdrop.md +++ b/docs/data/material/components/backdrop/backdrop.md @@ -20,7 +20,7 @@ In its simplest form, the Backdrop component will add a dimmed layer over your a The demo below shows a basic Backdrop with a Circular Progress component in the foreground to indicate a loading state. After clicking **Show Backdrop**, you can click anywhere on the page to close it. -{{"demo": "SimpleBackdrop.js"}} +{{"component": "file://./demos/simple/index.ts"}} ## Transitions diff --git a/docs/data/material/components/backdrop/SimpleBackdrop.tsx b/docs/data/material/components/backdrop/demos/simple/SimpleBackdrop.tsx similarity index 93% rename from docs/data/material/components/backdrop/SimpleBackdrop.tsx rename to docs/data/material/components/backdrop/demos/simple/SimpleBackdrop.tsx index 0e72b7ae98c595..f47843b2b562e2 100644 --- a/docs/data/material/components/backdrop/SimpleBackdrop.tsx +++ b/docs/data/material/components/backdrop/demos/simple/SimpleBackdrop.tsx @@ -14,6 +14,7 @@ export default function SimpleBackdrop() { return (
    + {/* @focus-start */} ({ color: '#fff', zIndex: theme.zIndex.drawer + 1 })} @@ -22,6 +23,7 @@ export default function SimpleBackdrop() { > + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/backdrop/demos/simple/client.ts b/docs/data/material/components/backdrop/demos/simple/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/backdrop/demos/simple/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/backdrop/demos/simple/index.ts b/docs/data/material/components/backdrop/demos/simple/index.ts new file mode 100644 index 00000000000000..db914e0887c0be --- /dev/null +++ b/docs/data/material/components/backdrop/demos/simple/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleBackdrop from './SimpleBackdrop'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleBackdrop, { ClientProvider }); diff --git a/docs/data/material/components/badges/BadgeAlignment.tsx b/docs/data/material/components/badges/BadgeAlignment.tsx deleted file mode 100644 index b6e9e326c22e28..00000000000000 --- a/docs/data/material/components/badges/BadgeAlignment.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import * as React from 'react'; -import Badge from '@mui/material/Badge'; -import FormControl from '@mui/material/FormControl'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormLabel from '@mui/material/FormLabel'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; -import Box from '@mui/material/Box'; -import IconButton from '@mui/material/IconButton'; -import MailIcon from '@mui/icons-material/Mail'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -type BadgeVerticalOrigin = 'top' | 'bottom'; -type BadgeHorizontalOrigin = 'right' | 'left'; - -export default function BadgeAlignment() { - const [horizontal, setHorizontal] = React.useState('right'); - const [vertical, setVertical] = React.useState('top'); - - const handleHorizontalChange = (event: React.ChangeEvent) => { - setHorizontal(event.target.value as BadgeHorizontalOrigin); - }; - - const handleVerticalChange = (event: React.ChangeEvent) => { - setVertical(event.target.value as BadgeVerticalOrigin); - }; - - const jsx = ` - - - - - -`; - - return ( - - - - Vertical - - } label="Top" /> - } label="Bottom" /> - - - - Horizontal - - } label="Right" /> - } label="Left" /> - - - - *': { - margin: 2, - }, - }} - > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/badges/BadgeIntro.js b/docs/data/material/components/badges/BadgeIntro.js deleted file mode 100644 index b224915776a450..00000000000000 --- a/docs/data/material/components/badges/BadgeIntro.js +++ /dev/null @@ -1,32 +0,0 @@ -import IconButton from '@mui/material/IconButton'; -import Badge from '@mui/material/Badge'; -import MailIcon from '@mui/icons-material/Mail'; - -const maxVisibleNotifications = 99; -const unreadNotificationsCount = 100; - -function getUnreadNotificationsLabel(count) { - if (count === 0) { - return 'show no unread notifications'; - } - if (count > maxVisibleNotifications) { - return `show more than ${maxVisibleNotifications} unread notifications`; - } - return `show ${count} unread notification${count === 1 ? '' : 's'}`; -} - -export default function BadgeIntro() { - const label = getUnreadNotificationsLabel(unreadNotificationsCount); - - return ( - - - - - - ); -} diff --git a/docs/data/material/components/badges/BadgeIntro.tsx.preview b/docs/data/material/components/badges/BadgeIntro.tsx.preview deleted file mode 100644 index 8ac406a232efa1..00000000000000 --- a/docs/data/material/components/badges/BadgeIntro.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/badges/BadgeListItem.js b/docs/data/material/components/badges/BadgeListItem.js deleted file mode 100644 index ecad45320e4c89..00000000000000 --- a/docs/data/material/components/badges/BadgeListItem.js +++ /dev/null @@ -1,44 +0,0 @@ -import Badge from '@mui/material/Badge'; -import List from '@mui/material/List'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import Paper from '@mui/material/Paper'; -import DraftsIcon from '@mui/icons-material/Drafts'; -import InboxIcon from '@mui/icons-material/Inbox'; -import SendIcon from '@mui/icons-material/Send'; - -const unreadMessagesCount = 4; - -export default function BadgeListItem() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/badges/BadgeMax.js b/docs/data/material/components/badges/BadgeMax.js deleted file mode 100644 index 3fa8faf52d0436..00000000000000 --- a/docs/data/material/components/badges/BadgeMax.js +++ /dev/null @@ -1,26 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Badge from '@mui/material/Badge'; -import IconButton from '@mui/material/IconButton'; -import MailIcon from '@mui/icons-material/Mail'; - -export default function BadgeMax() { - return ( - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/badges/BadgeMax.tsx.preview b/docs/data/material/components/badges/BadgeMax.tsx.preview deleted file mode 100644 index 3f1f31c5500b37..00000000000000 --- a/docs/data/material/components/badges/BadgeMax.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/badges/BadgeOverlap.js b/docs/data/material/components/badges/BadgeOverlap.js deleted file mode 100644 index dae9425fd0c50a..00000000000000 --- a/docs/data/material/components/badges/BadgeOverlap.js +++ /dev/null @@ -1,47 +0,0 @@ -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import Badge from '@mui/material/Badge'; - -const shapeSize = 32; - -export default function BadgeOverlap() { - return ( - - - - - - - - - - - - - - - ); -} - -function Rectangle() { - return ( - - ); -} - -function Circle() { - return ( - - ); -} diff --git a/docs/data/material/components/badges/BadgeOverlap.tsx.preview b/docs/data/material/components/badges/BadgeOverlap.tsx.preview deleted file mode 100644 index 3c6615924cee05..00000000000000 --- a/docs/data/material/components/badges/BadgeOverlap.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/badges/BadgeVisibility.js b/docs/data/material/components/badges/BadgeVisibility.js deleted file mode 100644 index 16a594b0e3a397..00000000000000 --- a/docs/data/material/components/badges/BadgeVisibility.js +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import Badge from '@mui/material/Badge'; -import IconButton from '@mui/material/IconButton'; -import Switch from '@mui/material/Switch'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import MailIcon from '@mui/icons-material/Mail'; - -const unreadMessagesCount = 4; - -export default function BadgeVisibility() { - const [invisible, setInvisible] = React.useState(false); - - const handleBadgeVisibility = () => { - setInvisible((previousInvisible) => !previousInvisible); - }; - - return ( - - - - - - - } - label="Show unread count" - /> - - ); -} diff --git a/docs/data/material/components/badges/ColorBadge.js b/docs/data/material/components/badges/ColorBadge.js deleted file mode 100644 index b91caeaa02bbb0..00000000000000 --- a/docs/data/material/components/badges/ColorBadge.js +++ /dev/null @@ -1,28 +0,0 @@ -import Badge from '@mui/material/Badge'; -import Stack from '@mui/material/Stack'; -import IconButton from '@mui/material/IconButton'; -import CalendarMonthIcon from '@mui/icons-material/CalendarMonth'; -import FolderOpenIcon from '@mui/icons-material/FolderOpen'; -import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined'; - -export default function ColorBadge() { - return ( - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/badges/ColorBadge.tsx.preview b/docs/data/material/components/badges/ColorBadge.tsx.preview deleted file mode 100644 index f2d98ba9cbee85..00000000000000 --- a/docs/data/material/components/badges/ColorBadge.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/badges/CustomizedBadges.js b/docs/data/material/components/badges/CustomizedBadges.js deleted file mode 100644 index 571a053c3eeece..00000000000000 --- a/docs/data/material/components/badges/CustomizedBadges.js +++ /dev/null @@ -1,77 +0,0 @@ -import Badge from '@mui/material/Badge'; -import Avatar from '@mui/material/Avatar'; -import List from '@mui/material/List'; -import ListItemAvatar from '@mui/material/ListItemAvatar'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemText from '@mui/material/ListItemText'; -import Paper from '@mui/material/Paper'; -import { styled } from '@mui/material/styles'; - -const statusLabels = { - online: 'Online', - offline: 'Offline', -}; - -const contacts = [ - { name: 'Remy Sharp', initials: 'R', status: 'online' }, - { name: 'Travis Howard', initials: 'T', status: 'offline' }, - { name: 'Cindy Baker', initials: 'C', status: 'online' }, -]; - -const ContactStatusBadge = styled(Badge, { - shouldForwardProp: (prop) => prop !== 'status', -})(({ theme, status }) => { - const themePalette = (theme.vars ?? theme).palette; - const offlineBadgeColor = theme.vars - ? theme.vars.palette.Avatar.defaultBg - : theme.palette.grey[400]; - - return { - '& .MuiBadge-badge': { - height: 10, - minWidth: 10, - border: `1px solid ${themePalette.grey[300]}`, - boxShadow: `0 0 0 2px ${themePalette.background.paper}`, - ...(status === 'offline' && { - backgroundColor: offlineBadgeColor, - ...(theme.vars - ? {} - : theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[600], - })), - }), - }, - }; -}); - -export default function CustomizedBadges() { - return ( - - - {contacts.map((contact) => { - const statusLabel = statusLabels[contact.status]; - - return ( - - - - {contact.initials} - - - - - ); - })} - - - ); -} diff --git a/docs/data/material/components/badges/DotBadge.js b/docs/data/material/components/badges/DotBadge.js deleted file mode 100644 index a28e192fef3809..00000000000000 --- a/docs/data/material/components/badges/DotBadge.js +++ /dev/null @@ -1,13 +0,0 @@ -import IconButton from '@mui/material/IconButton'; -import Badge from '@mui/material/Badge'; -import NotificationsIcon from '@mui/icons-material/Notifications'; - -export default function DotBadge() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/badges/DotBadge.tsx.preview b/docs/data/material/components/badges/DotBadge.tsx.preview deleted file mode 100644 index 7e0cbca17863f8..00000000000000 --- a/docs/data/material/components/badges/DotBadge.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/badges/ShowZeroBadge.js b/docs/data/material/components/badges/ShowZeroBadge.js deleted file mode 100644 index 8b835272ccf1bc..00000000000000 --- a/docs/data/material/components/badges/ShowZeroBadge.js +++ /dev/null @@ -1,21 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Badge from '@mui/material/Badge'; -import IconButton from '@mui/material/IconButton'; -import MailIcon from '@mui/icons-material/Mail'; - -export default function ShowZeroBadge() { - return ( - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/badges/ShowZeroBadge.tsx.preview b/docs/data/material/components/badges/ShowZeroBadge.tsx.preview deleted file mode 100644 index fbcdb854c7f78f..00000000000000 --- a/docs/data/material/components/badges/ShowZeroBadge.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/badges/SimpleBadge.js b/docs/data/material/components/badges/SimpleBadge.js deleted file mode 100644 index 36cf3446bfaba7..00000000000000 --- a/docs/data/material/components/badges/SimpleBadge.js +++ /dev/null @@ -1,13 +0,0 @@ -import Badge from '@mui/material/Badge'; -import IconButton from '@mui/material/IconButton'; -import MailIcon from '@mui/icons-material/Mail'; - -export default function SimpleBadge() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/badges/SimpleBadge.tsx.preview b/docs/data/material/components/badges/SimpleBadge.tsx.preview deleted file mode 100644 index 82329e7734c884..00000000000000 --- a/docs/data/material/components/badges/SimpleBadge.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/badges/badges.md b/docs/data/material/components/badges/badges.md index 0b0a172ead7f16..570ae0b3d3bed0 100644 --- a/docs/data/material/components/badges/badges.md +++ b/docs/data/material/components/badges/badges.md @@ -24,42 +24,42 @@ githubSource: packages/mui-material/src/Badge - **Use dot badges for simple states**: A dot badge does not show text or a number, so use it only when the surrounding UI makes the state clear, such as `Online` or `Unread`. -{{"demo": "BadgeIntro.js"}} +{{"component": "file://./demos/intro/index.ts"}} This demo applies the same pattern to a `ListItemButton` with a `Badge`: the visible count is included in the item's accessible name so it's announced in the context of the surrounding UI. -{{"demo": "BadgeListItem.js"}} +{{"component": "file://./demos/list-item/index.ts"}} ## Badge content Use `badgeContent` to add a short count or label to the wrapped element. -{{"demo": "SimpleBadge.js"}} +{{"component": "file://./demos/simple/index.ts"}} ### Dot badge Use `variant="dot"` for a compact status indicator without a count. -{{"demo": "DotBadge.js"}} +{{"component": "file://./demos/dot/index.ts"}} ### Visibility Control badge visibility with the `invisible` prop. -{{"demo": "BadgeVisibility.js"}} +{{"component": "file://./demos/visibility/index.ts"}} The badge hides automatically when `badgeContent` is zero. Override this with the `showZero` prop when zero is meaningful to the interface. -{{"demo": "ShowZeroBadge.js"}} +{{"component": "file://./demos/show-zero/index.ts"}} ### Maximum value Use the `max` prop to cap large numeric values. -{{"demo": "BadgeMax.js"}} +{{"component": "file://./demos/max/index.ts"}} ## Customization @@ -67,23 +67,23 @@ Use the `max` prop to cap large numeric values. Use the `color` prop to apply theme palette colors to the badge. -{{"demo": "ColorBadge.js"}} +{{"component": "file://./demos/color/index.ts"}} ### Badge alignment Use the `anchorOrigin` prop to move the badge to any corner of the wrapped element. -{{"demo": "BadgeAlignment.js", "hideToolbar": true}} +{{"component": "file://./demos/alignment/index.ts", "hideToolbar": true}} ### Badge overlap Use the `overlap` prop when the wrapped element is circular. -{{"demo": "BadgeOverlap.js"}} +{{"component": "file://./demos/overlap/index.ts"}} ### Custom styles Use theme style overrides, the `sx` prop, or `styled()` to customize the badge. Learn more in the [customization guide](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedBadges.js"}} +{{"component": "file://./demos/customized/index.ts"}} diff --git a/docs/data/material/components/badges/BadgeAlignment.js b/docs/data/material/components/badges/demos/alignment/BadgeAlignment.js similarity index 100% rename from docs/data/material/components/badges/BadgeAlignment.js rename to docs/data/material/components/badges/demos/alignment/BadgeAlignment.js diff --git a/docs/data/material/components/badges/demos/alignment/client.ts b/docs/data/material/components/badges/demos/alignment/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/badges/demos/alignment/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/badges/demos/alignment/index.ts b/docs/data/material/components/badges/demos/alignment/index.ts new file mode 100644 index 00000000000000..ec84c7bfab18f5 --- /dev/null +++ b/docs/data/material/components/badges/demos/alignment/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BadgeAlignment from './BadgeAlignment'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BadgeAlignment, { ClientProvider }); diff --git a/docs/data/material/components/badges/ColorBadge.tsx b/docs/data/material/components/badges/demos/color/ColorBadge.tsx similarity index 94% rename from docs/data/material/components/badges/ColorBadge.tsx rename to docs/data/material/components/badges/demos/color/ColorBadge.tsx index b91caeaa02bbb0..3c8a29c2689b21 100644 --- a/docs/data/material/components/badges/ColorBadge.tsx +++ b/docs/data/material/components/badges/demos/color/ColorBadge.tsx @@ -8,6 +8,7 @@ import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined export default function ColorBadge() { return ( + {/* @focus-start */} @@ -23,6 +24,7 @@ export default function ColorBadge() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/badges/demos/color/client.ts b/docs/data/material/components/badges/demos/color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/badges/demos/color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/badges/demos/color/index.ts b/docs/data/material/components/badges/demos/color/index.ts new file mode 100644 index 00000000000000..3d13c0dff34540 --- /dev/null +++ b/docs/data/material/components/badges/demos/color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorBadge from './ColorBadge'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorBadge, { ClientProvider }); diff --git a/docs/data/material/components/badges/CustomizedBadges.tsx b/docs/data/material/components/badges/demos/customized/CustomizedBadges.tsx similarity index 98% rename from docs/data/material/components/badges/CustomizedBadges.tsx rename to docs/data/material/components/badges/demos/customized/CustomizedBadges.tsx index 588d45a8125a5b..bce8cd774ee0ec 100644 --- a/docs/data/material/components/badges/CustomizedBadges.tsx +++ b/docs/data/material/components/badges/demos/customized/CustomizedBadges.tsx @@ -48,6 +48,7 @@ const ContactStatusBadge = styled(Badge, { export default function CustomizedBadges() { return ( + // @focus-start {contacts.map((contact) => { @@ -75,5 +76,6 @@ export default function CustomizedBadges() { })} + // @focus-end ); } diff --git a/docs/data/material/components/badges/demos/customized/client.ts b/docs/data/material/components/badges/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/badges/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/badges/demos/customized/index.ts b/docs/data/material/components/badges/demos/customized/index.ts new file mode 100644 index 00000000000000..a2fb1e648b1be9 --- /dev/null +++ b/docs/data/material/components/badges/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedBadges from './CustomizedBadges'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedBadges, { ClientProvider }); diff --git a/docs/data/material/components/badges/DotBadge.tsx b/docs/data/material/components/badges/demos/dot/DotBadge.tsx similarity index 88% rename from docs/data/material/components/badges/DotBadge.tsx rename to docs/data/material/components/badges/demos/dot/DotBadge.tsx index a28e192fef3809..aba68b3ce50ddc 100644 --- a/docs/data/material/components/badges/DotBadge.tsx +++ b/docs/data/material/components/badges/demos/dot/DotBadge.tsx @@ -4,10 +4,12 @@ import NotificationsIcon from '@mui/icons-material/Notifications'; export default function DotBadge() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/badges/demos/dot/client.ts b/docs/data/material/components/badges/demos/dot/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/badges/demos/dot/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/badges/demos/dot/index.ts b/docs/data/material/components/badges/demos/dot/index.ts new file mode 100644 index 00000000000000..e01ef2303606e6 --- /dev/null +++ b/docs/data/material/components/badges/demos/dot/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DotBadge from './DotBadge'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DotBadge, { ClientProvider }); diff --git a/docs/data/material/components/badges/BadgeIntro.tsx b/docs/data/material/components/badges/demos/intro/BadgeIntro.tsx similarity index 94% rename from docs/data/material/components/badges/BadgeIntro.tsx rename to docs/data/material/components/badges/demos/intro/BadgeIntro.tsx index 800c9ed5cfd343..c0bbf71fd26af0 100644 --- a/docs/data/material/components/badges/BadgeIntro.tsx +++ b/docs/data/material/components/badges/demos/intro/BadgeIntro.tsx @@ -19,6 +19,7 @@ export default function BadgeIntro() { const label = getUnreadNotificationsLabel(unreadNotificationsCount); return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/badges/demos/intro/client.ts b/docs/data/material/components/badges/demos/intro/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/badges/demos/intro/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/badges/demos/intro/index.ts b/docs/data/material/components/badges/demos/intro/index.ts new file mode 100644 index 00000000000000..3079b6c8d49a5b --- /dev/null +++ b/docs/data/material/components/badges/demos/intro/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BadgeIntro from './BadgeIntro'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BadgeIntro, { ClientProvider }); diff --git a/docs/data/material/components/badges/BadgeListItem.tsx b/docs/data/material/components/badges/demos/list-item/BadgeListItem.tsx similarity index 97% rename from docs/data/material/components/badges/BadgeListItem.tsx rename to docs/data/material/components/badges/demos/list-item/BadgeListItem.tsx index ecad45320e4c89..7affe5598512ee 100644 --- a/docs/data/material/components/badges/BadgeListItem.tsx +++ b/docs/data/material/components/badges/demos/list-item/BadgeListItem.tsx @@ -12,6 +12,7 @@ const unreadMessagesCount = 4; export default function BadgeListItem() { return ( + // @focus-start + // @focus-end ); } diff --git a/docs/data/material/components/badges/demos/list-item/client.ts b/docs/data/material/components/badges/demos/list-item/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/badges/demos/list-item/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/badges/demos/list-item/index.ts b/docs/data/material/components/badges/demos/list-item/index.ts new file mode 100644 index 00000000000000..0c286aa9151d56 --- /dev/null +++ b/docs/data/material/components/badges/demos/list-item/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BadgeListItem from './BadgeListItem'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BadgeListItem, { ClientProvider }); diff --git a/docs/data/material/components/badges/BadgeMax.tsx b/docs/data/material/components/badges/demos/max/BadgeMax.tsx similarity index 94% rename from docs/data/material/components/badges/BadgeMax.tsx rename to docs/data/material/components/badges/demos/max/BadgeMax.tsx index 3fa8faf52d0436..8785e738e02b4a 100644 --- a/docs/data/material/components/badges/BadgeMax.tsx +++ b/docs/data/material/components/badges/demos/max/BadgeMax.tsx @@ -6,6 +6,7 @@ import MailIcon from '@mui/icons-material/Mail'; export default function BadgeMax() { return ( + {/* @focus-start */} @@ -21,6 +22,7 @@ export default function BadgeMax() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/badges/demos/max/client.ts b/docs/data/material/components/badges/demos/max/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/badges/demos/max/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/badges/demos/max/index.ts b/docs/data/material/components/badges/demos/max/index.ts new file mode 100644 index 00000000000000..c091158061e7e1 --- /dev/null +++ b/docs/data/material/components/badges/demos/max/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BadgeMax from './BadgeMax'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BadgeMax, { ClientProvider }); diff --git a/docs/data/material/components/badges/BadgeOverlap.tsx b/docs/data/material/components/badges/demos/overlap/BadgeOverlap.tsx similarity index 95% rename from docs/data/material/components/badges/BadgeOverlap.tsx rename to docs/data/material/components/badges/demos/overlap/BadgeOverlap.tsx index dae9425fd0c50a..36e99bb3704255 100644 --- a/docs/data/material/components/badges/BadgeOverlap.tsx +++ b/docs/data/material/components/badges/demos/overlap/BadgeOverlap.tsx @@ -7,6 +7,7 @@ const shapeSize = 32; export default function BadgeOverlap() { return ( + {/* @focus-start */} @@ -19,6 +20,7 @@ export default function BadgeOverlap() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/badges/demos/overlap/client.ts b/docs/data/material/components/badges/demos/overlap/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/badges/demos/overlap/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/badges/demos/overlap/index.ts b/docs/data/material/components/badges/demos/overlap/index.ts new file mode 100644 index 00000000000000..c17970db313876 --- /dev/null +++ b/docs/data/material/components/badges/demos/overlap/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BadgeOverlap from './BadgeOverlap'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BadgeOverlap, { ClientProvider }); diff --git a/docs/data/material/components/badges/ShowZeroBadge.tsx b/docs/data/material/components/badges/demos/show-zero/ShowZeroBadge.tsx similarity index 92% rename from docs/data/material/components/badges/ShowZeroBadge.tsx rename to docs/data/material/components/badges/demos/show-zero/ShowZeroBadge.tsx index 8b835272ccf1bc..64805390c6320b 100644 --- a/docs/data/material/components/badges/ShowZeroBadge.tsx +++ b/docs/data/material/components/badges/demos/show-zero/ShowZeroBadge.tsx @@ -6,6 +6,7 @@ import MailIcon from '@mui/icons-material/Mail'; export default function ShowZeroBadge() { return ( + {/* @focus-start */} @@ -16,6 +17,7 @@ export default function ShowZeroBadge() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/badges/demos/show-zero/client.ts b/docs/data/material/components/badges/demos/show-zero/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/badges/demos/show-zero/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/badges/demos/show-zero/index.ts b/docs/data/material/components/badges/demos/show-zero/index.ts new file mode 100644 index 00000000000000..a8813dcadf5ebd --- /dev/null +++ b/docs/data/material/components/badges/demos/show-zero/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ShowZeroBadge from './ShowZeroBadge'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ShowZeroBadge, { ClientProvider }); diff --git a/docs/data/material/components/badges/SimpleBadge.tsx b/docs/data/material/components/badges/demos/simple/SimpleBadge.tsx similarity index 87% rename from docs/data/material/components/badges/SimpleBadge.tsx rename to docs/data/material/components/badges/demos/simple/SimpleBadge.tsx index 36cf3446bfaba7..2371c89266e503 100644 --- a/docs/data/material/components/badges/SimpleBadge.tsx +++ b/docs/data/material/components/badges/demos/simple/SimpleBadge.tsx @@ -4,10 +4,12 @@ import MailIcon from '@mui/icons-material/Mail'; export default function SimpleBadge() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/badges/demos/simple/client.ts b/docs/data/material/components/badges/demos/simple/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/badges/demos/simple/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/badges/demos/simple/index.ts b/docs/data/material/components/badges/demos/simple/index.ts new file mode 100644 index 00000000000000..a28b9faab02e76 --- /dev/null +++ b/docs/data/material/components/badges/demos/simple/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleBadge from './SimpleBadge'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleBadge, { ClientProvider }); diff --git a/docs/data/material/components/badges/BadgeVisibility.tsx b/docs/data/material/components/badges/demos/visibility/BadgeVisibility.tsx similarity index 96% rename from docs/data/material/components/badges/BadgeVisibility.tsx rename to docs/data/material/components/badges/demos/visibility/BadgeVisibility.tsx index 16a594b0e3a397..b2ae32e57a22cb 100644 --- a/docs/data/material/components/badges/BadgeVisibility.tsx +++ b/docs/data/material/components/badges/demos/visibility/BadgeVisibility.tsx @@ -9,6 +9,7 @@ import MailIcon from '@mui/icons-material/Mail'; const unreadMessagesCount = 4; export default function BadgeVisibility() { + // @focus-start @padding 1 const [invisible, setInvisible] = React.useState(false); const handleBadgeVisibility = () => { @@ -38,4 +39,5 @@ export default function BadgeVisibility() { /> ); + // @focus-end } diff --git a/docs/data/material/components/badges/demos/visibility/client.ts b/docs/data/material/components/badges/demos/visibility/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/badges/demos/visibility/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/badges/demos/visibility/index.ts b/docs/data/material/components/badges/demos/visibility/index.ts new file mode 100644 index 00000000000000..e98abbcc2bad17 --- /dev/null +++ b/docs/data/material/components/badges/demos/visibility/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BadgeVisibility from './BadgeVisibility'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BadgeVisibility, { ClientProvider }); diff --git a/docs/data/material/components/bottom-navigation/FixedBottomNavigation.js b/docs/data/material/components/bottom-navigation/FixedBottomNavigation.js deleted file mode 100644 index dae08fb8e7ff73..00000000000000 --- a/docs/data/material/components/bottom-navigation/FixedBottomNavigation.js +++ /dev/null @@ -1,104 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import CssBaseline from '@mui/material/CssBaseline'; -import BottomNavigation from '@mui/material/BottomNavigation'; -import BottomNavigationAction from '@mui/material/BottomNavigationAction'; -import RestoreIcon from '@mui/icons-material/Restore'; -import FavoriteIcon from '@mui/icons-material/Favorite'; -import ArchiveIcon from '@mui/icons-material/Archive'; -import Paper from '@mui/material/Paper'; -import List from '@mui/material/List'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemAvatar from '@mui/material/ListItemAvatar'; -import ListItemText from '@mui/material/ListItemText'; -import Avatar from '@mui/material/Avatar'; - -function refreshMessages() { - const getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max)); - - return Array.from(new Array(50)).map( - () => messageExamples[getRandomInt(messageExamples.length)], - ); -} - -export default function FixedBottomNavigation() { - const [value, setValue] = React.useState(0); - const ref = React.useRef(null); - const [messages, setMessages] = React.useState(() => refreshMessages()); - - React.useEffect(() => { - ref.current.ownerDocument.body.scrollTop = 0; - setMessages(refreshMessages()); - }, [value, setMessages]); - - return ( - - - - {messages.map(({ primary, secondary, person }, index) => ( - - - - - - - ))} - - - { - setValue(newValue); - }} - > - } /> - } /> - } /> - - - - ); -} - -const messageExamples = [ - { - primary: 'Brunch this week?', - secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat", - person: '/static/images/avatar/5.jpg', - }, - { - primary: 'Birthday Gift', - secondary: `Do you have a suggestion for a good present for John on his work - anniversary. I am really confused & would love your thoughts on it.`, - person: '/static/images/avatar/1.jpg', - }, - { - primary: 'Recipe to try', - secondary: 'I am try out this new BBQ recipe, I think this might be amazing', - person: '/static/images/avatar/2.jpg', - }, - { - primary: 'Yes!', - secondary: 'I have the tickets to the ReactConf for this year.', - person: '/static/images/avatar/3.jpg', - }, - { - primary: "Doctor's Appointment", - secondary: 'My appointment for the doctor was rescheduled for next Saturday.', - person: '/static/images/avatar/4.jpg', - }, - { - primary: 'Discussion', - secondary: `Menus that are generated by the bottom app bar (such as a bottom - navigation drawer or overflow menu) open as bottom sheets at a higher elevation - than the bar.`, - person: '/static/images/avatar/5.jpg', - }, - { - primary: 'Summer BBQ', - secondary: `Who wants to have a cookout this weekend? I just got some furniture - for my backyard and would love to fire up the grill.`, - person: '/static/images/avatar/1.jpg', - }, -]; diff --git a/docs/data/material/components/bottom-navigation/LabelBottomNavigation.js b/docs/data/material/components/bottom-navigation/LabelBottomNavigation.js deleted file mode 100644 index d0ba611915020f..00000000000000 --- a/docs/data/material/components/bottom-navigation/LabelBottomNavigation.js +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react'; -import BottomNavigation from '@mui/material/BottomNavigation'; -import BottomNavigationAction from '@mui/material/BottomNavigationAction'; -import FolderIcon from '@mui/icons-material/Folder'; -import RestoreIcon from '@mui/icons-material/Restore'; -import FavoriteIcon from '@mui/icons-material/Favorite'; -import LocationOnIcon from '@mui/icons-material/LocationOn'; - -export default function LabelBottomNavigation() { - const [value, setValue] = React.useState('recents'); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - } - /> - } - /> - } - /> - } /> - - ); -} diff --git a/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.js b/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.js deleted file mode 100644 index b85b0d7fc44573..00000000000000 --- a/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.js +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import BottomNavigation from '@mui/material/BottomNavigation'; -import BottomNavigationAction from '@mui/material/BottomNavigationAction'; -import RestoreIcon from '@mui/icons-material/Restore'; -import FavoriteIcon from '@mui/icons-material/Favorite'; -import LocationOnIcon from '@mui/icons-material/LocationOn'; - -export default function SimpleBottomNavigation() { - const [value, setValue] = React.useState(0); - - return ( - - { - setValue(newValue); - }} - > - } /> - } /> - } /> - - - ); -} diff --git a/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.tsx.preview b/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.tsx.preview deleted file mode 100644 index 40a0e18ddd6b14..00000000000000 --- a/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - { - setValue(newValue); - }} -> - } /> - } /> - } /> - \ No newline at end of file diff --git a/docs/data/material/components/bottom-navigation/bottom-navigation.md b/docs/data/material/components/bottom-navigation/bottom-navigation.md index 17eb5ccf2e7d0d..df029040d477e8 100644 --- a/docs/data/material/components/bottom-navigation/bottom-navigation.md +++ b/docs/data/material/components/bottom-navigation/bottom-navigation.md @@ -19,19 +19,19 @@ Bottom navigation bars display three to five destinations at the bottom of a scr When there are only **three** actions, display both icons and text labels at all times. -{{"demo": "SimpleBottomNavigation.js", "bg": true}} +{{"component": "file://./demos/simple/index.ts", "bg": true}} ## Bottom navigation with no label If there are **four** or **five** actions, display inactive views as icons only. -{{"demo": "LabelBottomNavigation.js", "bg": true}} +{{"component": "file://./demos/label/index.ts", "bg": true}} ## Fixed positioning This demo keeps bottom navigation fixed to the bottom, no matter the amount of content on-screen. -{{"demo": "FixedBottomNavigation.js", "bg": true, "iframe": true, "maxWidth": 600}} +{{"component": "file://./demos/fixed/index.ts", "bg": true, "iframe": true, "maxWidth": 600}} ## Third-party routing library diff --git a/docs/data/material/components/bottom-navigation/FixedBottomNavigation.tsx b/docs/data/material/components/bottom-navigation/demos/fixed/FixedBottomNavigation.tsx similarity index 98% rename from docs/data/material/components/bottom-navigation/FixedBottomNavigation.tsx rename to docs/data/material/components/bottom-navigation/demos/fixed/FixedBottomNavigation.tsx index ebeb41e2bcdcfc..c9f124fbb4555b 100644 --- a/docs/data/material/components/bottom-navigation/FixedBottomNavigation.tsx +++ b/docs/data/material/components/bottom-navigation/demos/fixed/FixedBottomNavigation.tsx @@ -22,6 +22,7 @@ function refreshMessages(): MessageExample[] { } export default function FixedBottomNavigation() { + // @focus-start @padding 1 const [value, setValue] = React.useState(0); const ref = React.useRef(null); const [messages, setMessages] = React.useState(() => refreshMessages()); @@ -59,6 +60,7 @@ export default function FixedBottomNavigation() { ); + // @focus-end } interface MessageExample { diff --git a/docs/data/material/components/bottom-navigation/demos/fixed/client.ts b/docs/data/material/components/bottom-navigation/demos/fixed/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/bottom-navigation/demos/fixed/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/bottom-navigation/demos/fixed/index.ts b/docs/data/material/components/bottom-navigation/demos/fixed/index.ts new file mode 100644 index 00000000000000..16f3d8208c73e6 --- /dev/null +++ b/docs/data/material/components/bottom-navigation/demos/fixed/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FixedBottomNavigation from './FixedBottomNavigation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FixedBottomNavigation, { ClientProvider }); diff --git a/docs/data/material/components/bottom-navigation/LabelBottomNavigation.tsx b/docs/data/material/components/bottom-navigation/demos/label/LabelBottomNavigation.tsx similarity index 96% rename from docs/data/material/components/bottom-navigation/LabelBottomNavigation.tsx rename to docs/data/material/components/bottom-navigation/demos/label/LabelBottomNavigation.tsx index d76c2dc9b64ed1..aa460afbc70882 100644 --- a/docs/data/material/components/bottom-navigation/LabelBottomNavigation.tsx +++ b/docs/data/material/components/bottom-navigation/demos/label/LabelBottomNavigation.tsx @@ -7,6 +7,7 @@ import FavoriteIcon from '@mui/icons-material/Favorite'; import LocationOnIcon from '@mui/icons-material/LocationOn'; export default function LabelBottomNavigation() { + // @focus-start @padding 1 const [value, setValue] = React.useState('recents'); const handleChange = (event: React.SyntheticEvent, newValue: string) => { @@ -33,4 +34,5 @@ export default function LabelBottomNavigation() { } /> ); + // @focus-end } diff --git a/docs/data/material/components/bottom-navigation/demos/label/client.ts b/docs/data/material/components/bottom-navigation/demos/label/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/bottom-navigation/demos/label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/bottom-navigation/demos/label/index.ts b/docs/data/material/components/bottom-navigation/demos/label/index.ts new file mode 100644 index 00000000000000..e3eccc32af9f26 --- /dev/null +++ b/docs/data/material/components/bottom-navigation/demos/label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LabelBottomNavigation from './LabelBottomNavigation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LabelBottomNavigation, { ClientProvider }); diff --git a/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.tsx b/docs/data/material/components/bottom-navigation/demos/simple/SimpleBottomNavigation.tsx similarity index 94% rename from docs/data/material/components/bottom-navigation/SimpleBottomNavigation.tsx rename to docs/data/material/components/bottom-navigation/demos/simple/SimpleBottomNavigation.tsx index b85b0d7fc44573..54718a0d3319e7 100644 --- a/docs/data/material/components/bottom-navigation/SimpleBottomNavigation.tsx +++ b/docs/data/material/components/bottom-navigation/demos/simple/SimpleBottomNavigation.tsx @@ -11,6 +11,7 @@ export default function SimpleBottomNavigation() { return ( + {/* @focus-start */} } /> } /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/bottom-navigation/demos/simple/client.ts b/docs/data/material/components/bottom-navigation/demos/simple/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/bottom-navigation/demos/simple/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/bottom-navigation/demos/simple/index.ts b/docs/data/material/components/bottom-navigation/demos/simple/index.ts new file mode 100644 index 00000000000000..f74ad49910e454 --- /dev/null +++ b/docs/data/material/components/bottom-navigation/demos/simple/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleBottomNavigation from './SimpleBottomNavigation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleBottomNavigation, { ClientProvider }); diff --git a/docs/data/material/components/box/BoxBasic.js b/docs/data/material/components/box/BoxBasic.js deleted file mode 100644 index e849fa4e88460c..00000000000000 --- a/docs/data/material/components/box/BoxBasic.js +++ /dev/null @@ -1,9 +0,0 @@ -import Box from '@mui/material/Box'; - -export default function BoxBasic() { - return ( - - This Box renders as an HTML section element. - - ); -} diff --git a/docs/data/material/components/box/BoxBasic.tsx b/docs/data/material/components/box/BoxBasic.tsx deleted file mode 100644 index e849fa4e88460c..00000000000000 --- a/docs/data/material/components/box/BoxBasic.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import Box from '@mui/material/Box'; - -export default function BoxBasic() { - return ( - - This Box renders as an HTML section element. - - ); -} diff --git a/docs/data/material/components/box/BoxBasic.tsx.preview b/docs/data/material/components/box/BoxBasic.tsx.preview deleted file mode 100644 index d22b5b82187b80..00000000000000 --- a/docs/data/material/components/box/BoxBasic.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - This Box renders as an HTML section element. diff --git a/docs/data/material/components/box/BoxSx.js b/docs/data/material/components/box/BoxSx.js deleted file mode 100644 index f02884d8c12bfe..00000000000000 --- a/docs/data/material/components/box/BoxSx.js +++ /dev/null @@ -1,29 +0,0 @@ -import Box from '@mui/material/Box'; -import { ThemeProvider } from '@mui/material/styles'; - -export default function BoxSx() { - return ( - - - - ); -} diff --git a/docs/data/material/components/box/BoxSx.tsx b/docs/data/material/components/box/BoxSx.tsx deleted file mode 100644 index f02884d8c12bfe..00000000000000 --- a/docs/data/material/components/box/BoxSx.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import Box from '@mui/material/Box'; -import { ThemeProvider } from '@mui/material/styles'; - -export default function BoxSx() { - return ( - - - - ); -} diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md index 117b7d861ceb19..a2b53e57c4129b 100644 --- a/docs/data/material/components/box/box.md +++ b/docs/data/material/components/box/box.md @@ -33,14 +33,14 @@ import Box from '@mui/material/Box'; The Box component renders as a `
    ` by default, but you can swap in any other valid HTML tag or React component using the `component` prop. The demo below replaces the `
    ` with a `
    ` element: -{{"demo": "BoxBasic.js", "defaultCodeOpen": true }} +{{"component": "file://./demos/basic/index.ts", "initialExpanded": true }} ## Customization Use the [`sx` prop](/system/getting-started/the-sx-prop/) to quickly customize any Box instance using a superset of CSS that has access to all the style functions and theme-aware properties exposed in the MUI System package. The demo below shows how to apply colors from the theme using this prop: -{{"demo": "BoxSx.js", "defaultCodeOpen": true }} +{{"component": "file://./demos/sx/index.ts", "initialExpanded": true }} ## Anatomy diff --git a/docs/data/material/components/box/demos/basic/BoxBasic.tsx b/docs/data/material/components/box/demos/basic/BoxBasic.tsx new file mode 100644 index 00000000000000..ca9f582ae4d5df --- /dev/null +++ b/docs/data/material/components/box/demos/basic/BoxBasic.tsx @@ -0,0 +1,11 @@ +import Box from '@mui/material/Box'; + +export default function BoxBasic() { + return ( + + {/* @focus-start */} + This Box renders as an HTML section element. + {/* @focus-end */} + + ); +} diff --git a/docs/data/material/components/box/demos/basic/client.ts b/docs/data/material/components/box/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/box/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/box/demos/basic/index.ts b/docs/data/material/components/box/demos/basic/index.ts new file mode 100644 index 00000000000000..58a199cb6ea27f --- /dev/null +++ b/docs/data/material/components/box/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BoxBasic from './BoxBasic'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BoxBasic, { ClientProvider }); diff --git a/docs/data/material/components/box/demos/sx/BoxSx.tsx b/docs/data/material/components/box/demos/sx/BoxSx.tsx new file mode 100644 index 00000000000000..2ef2d088ab31ec --- /dev/null +++ b/docs/data/material/components/box/demos/sx/BoxSx.tsx @@ -0,0 +1,31 @@ +import Box from '@mui/material/Box'; +import { ThemeProvider } from '@mui/material/styles'; + +export default function BoxSx() { + return ( + // @focus-start @padding 2 + + + + // @focus-end + ); +} diff --git a/docs/data/material/components/box/demos/sx/client.ts b/docs/data/material/components/box/demos/sx/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/box/demos/sx/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/box/demos/sx/index.ts b/docs/data/material/components/box/demos/sx/index.ts new file mode 100644 index 00000000000000..1636e7489ad171 --- /dev/null +++ b/docs/data/material/components/box/demos/sx/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BoxSx from './BoxSx'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BoxSx, { ClientProvider }); diff --git a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js b/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js deleted file mode 100644 index ed49640bdd0172..00000000000000 --- a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.js +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react'; -import Breadcrumbs from '@mui/material/Breadcrumbs'; -import Link from '@mui/material/Link'; - -function handleClick(event) { - event.preventDefault(); - console.info('You clicked a breadcrumb.'); -} - -export default function ActiveLastBreadcrumb() { - return ( -
    - - - MUI - - - Core - - - Breadcrumbs - - -
    - ); -} diff --git a/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.js b/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.js deleted file mode 100644 index 42df205d42a1fc..00000000000000 --- a/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.js +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import Typography from '@mui/material/Typography'; -import Breadcrumbs from '@mui/material/Breadcrumbs'; -import Link from '@mui/material/Link'; - -function handleClick(event) { - event.preventDefault(); - console.info('You clicked a breadcrumb.'); -} - -export default function BasicBreadcrumbs() { - return ( -
    - - - MUI - - - Core - - Breadcrumbs - -
    - ); -} diff --git a/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx.preview b/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx.preview deleted file mode 100644 index 3d841b5c6c1a53..00000000000000 --- a/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - - - MUI - - - Core - - Breadcrumbs - \ No newline at end of file diff --git a/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.js b/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.js deleted file mode 100644 index 389e158df37931..00000000000000 --- a/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.js +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import Breadcrumbs from '@mui/material/Breadcrumbs'; -import Typography from '@mui/material/Typography'; -import Link from '@mui/material/Link'; - -function handleClick(event) { - event.preventDefault(); - console.info('You clicked a breadcrumb.'); -} - -export default function CollapsedBreadcrumbs() { - return ( -
    - - - Home - - - Catalog - - - Accessories - - - New Collection - - Belts - -
    - ); -} diff --git a/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx.preview b/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx.preview deleted file mode 100644 index ff57d288bd7789..00000000000000 --- a/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - - Home - - - Catalog - - - Accessories - - - New Collection - - Belts - \ No newline at end of file diff --git a/docs/data/material/components/breadcrumbs/CondensedWithMenu.js b/docs/data/material/components/breadcrumbs/CondensedWithMenu.js deleted file mode 100644 index 58ae9446070b07..00000000000000 --- a/docs/data/material/components/breadcrumbs/CondensedWithMenu.js +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import Breadcrumbs from '@mui/material/Breadcrumbs'; -import Link from '@mui/material/Link'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import IconButton from '@mui/material/IconButton'; -import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; - -export default function CondensedWithMenu() { - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - - const handleClick = (event) => { - if (event) { - setAnchorEl(event.currentTarget); - } - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - return ( - - - Breadcrumb 2 - Breadcrumb 3 - Breadcrumb 4 - - - - Breadcrumb 1 - - - - - - Breadcrumb 5 - - - Breadcrumb 6 - - - - ); -} diff --git a/docs/data/material/components/breadcrumbs/CustomSeparator.js b/docs/data/material/components/breadcrumbs/CustomSeparator.js deleted file mode 100644 index c373cff2c2a49d..00000000000000 --- a/docs/data/material/components/breadcrumbs/CustomSeparator.js +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import Breadcrumbs from '@mui/material/Breadcrumbs'; -import Typography from '@mui/material/Typography'; -import Link from '@mui/material/Link'; -import Stack from '@mui/material/Stack'; -import NavigateNextIcon from '@mui/icons-material/NavigateNext'; - -function handleClick(event) { - event.preventDefault(); - console.info('You clicked a breadcrumb.'); -} - -export default function CustomSeparator() { - const breadcrumbs = [ - - MUI - , - - Core - , - - Breadcrumb - , - ]; - - return ( - - - {breadcrumbs} - - - {breadcrumbs} - - } - aria-label="breadcrumb" - > - {breadcrumbs} - - - ); -} diff --git a/docs/data/material/components/breadcrumbs/CustomSeparator.tsx.preview b/docs/data/material/components/breadcrumbs/CustomSeparator.tsx.preview deleted file mode 100644 index 71cc8ac133606f..00000000000000 --- a/docs/data/material/components/breadcrumbs/CustomSeparator.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - {breadcrumbs} - - - {breadcrumbs} - -} - aria-label="breadcrumb" -> - {breadcrumbs} - \ No newline at end of file diff --git a/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.js b/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.js deleted file mode 100644 index bd36848ab6599f..00000000000000 --- a/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.js +++ /dev/null @@ -1,57 +0,0 @@ -import * as React from 'react'; -import { emphasize, styled } from '@mui/material/styles'; -import Breadcrumbs from '@mui/material/Breadcrumbs'; -import Chip from '@mui/material/Chip'; -import HomeIcon from '@mui/icons-material/Home'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; - -const StyledBreadcrumb = styled(Chip)(({ theme }) => { - return { - backgroundColor: theme.palette.grey[100], - height: theme.spacing(3), - color: (theme.vars || theme).palette.text.primary, - fontWeight: theme.typography.fontWeightRegular, - '&:hover, &:focus': { - backgroundColor: emphasize(theme.palette.grey[100], 0.06), - ...theme.applyStyles('dark', { - backgroundColor: emphasize(theme.palette.grey[800], 0.06), - }), - }, - '&:active': { - boxShadow: theme.shadows[1], - backgroundColor: emphasize(theme.palette.grey[100], 0.12), - ...theme.applyStyles('dark', { - backgroundColor: emphasize(theme.palette.grey[800], 0.12), - }), - }, - ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[800], - }), - }; -}); // TypeScript only: need a type cast here because https://github.com/Microsoft/TypeScript/issues/26591 - -function handleClick(event) { - event.preventDefault(); - console.info('You clicked a breadcrumb.'); -} - -export default function CustomizedBreadcrumbs() { - return ( -
    - - } - /> - - } - onDelete={handleClick} - /> - -
    - ); -} diff --git a/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx.preview b/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx.preview deleted file mode 100644 index f20f58ec2010df..00000000000000 --- a/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - } - /> - - } - onDelete={handleClick} - /> - \ No newline at end of file diff --git a/docs/data/material/components/breadcrumbs/IconBreadcrumbs.js b/docs/data/material/components/breadcrumbs/IconBreadcrumbs.js deleted file mode 100644 index 5c11804c09fb4a..00000000000000 --- a/docs/data/material/components/breadcrumbs/IconBreadcrumbs.js +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Typography from '@mui/material/Typography'; -import Breadcrumbs from '@mui/material/Breadcrumbs'; -import Link from '@mui/material/Link'; -import HomeIcon from '@mui/icons-material/Home'; -import WhatshotIcon from '@mui/icons-material/Whatshot'; -import GrainIcon from '@mui/icons-material/Grain'; - -function handleClick(event) { - event.preventDefault(); - console.info('You clicked a breadcrumb.'); -} - -export default function IconBreadcrumbs() { - return ( -
    - - - - MUI - - - - Core - - - - Breadcrumb - - -
    - ); -} diff --git a/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.js b/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.js deleted file mode 100644 index 2b070f122b380b..00000000000000 --- a/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.js +++ /dev/null @@ -1,117 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Box from '@mui/material/Box'; -import List from '@mui/material/List'; -import Link from '@mui/material/Link'; - -import ListItemButton from '@mui/material/ListItemButton'; -import Collapse from '@mui/material/Collapse'; -import ListItemText from '@mui/material/ListItemText'; -import Typography from '@mui/material/Typography'; -import ExpandLess from '@mui/icons-material/ExpandLess'; -import ExpandMore from '@mui/icons-material/ExpandMore'; -import Breadcrumbs from '@mui/material/Breadcrumbs'; -import { - Link as RouterLink, - Route, - Routes, - MemoryRouter, - useLocation, -} from 'react-router'; - -const breadcrumbNameMap = { - '/inbox': 'Inbox', - '/inbox/important': 'Important', - '/trash': 'Trash', - '/spam': 'Spam', - '/drafts': 'Drafts', -}; - -function ListItemLink(props) { - const { to, open, ...other } = props; - const primary = breadcrumbNameMap[to]; - - let icon = null; - if (open != null) { - icon = open ? : ; - } - - return ( -
  • - - - {icon} - -
    • - ); -} - -ListItemLink.propTypes = { - open: PropTypes.bool, - to: PropTypes.string.isRequired, -}; - -function LinkRouter(props) { - return ; -} - -function Page() { - const location = useLocation(); - const pathnames = location.pathname.split('/').filter((x) => x); - - return ( - - - Home - - {pathnames.map((value, index) => { - const last = index === pathnames.length - 1; - const to = `/${pathnames.slice(0, index + 1).join('/')}`; - - return last ? ( - - {breadcrumbNameMap[to]} - - ) : ( - - {breadcrumbNameMap[to]} - - ); - })} - - ); -} - -export default function RouterBreadcrumbs() { - const [open, setOpen] = React.useState(true); - - const handleClick = () => { - setOpen((prevOpen) => !prevOpen); - }; - - return ( - - - - } /> - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/breadcrumbs/breadcrumbs.md b/docs/data/material/components/breadcrumbs/breadcrumbs.md index 7ee4e2062113d7..e2aeeed48bfccd 100644 --- a/docs/data/material/components/breadcrumbs/breadcrumbs.md +++ b/docs/data/material/components/breadcrumbs/breadcrumbs.md @@ -15,44 +15,44 @@ githubSource: packages/mui-material/src/Breadcrumbs ## Basic breadcrumbs -{{"demo": "BasicBreadcrumbs.js"}} +{{"component": "file://./demos/basic/index.ts"}} ## Active last breadcrumb Keep the last breadcrumb interactive. -{{"demo": "ActiveLastBreadcrumb.js"}} +{{"component": "file://./demos/active-last/index.ts"}} ## Custom separator In the following examples, we are using two string separators and an SVG icon. -{{"demo": "CustomSeparator.js"}} +{{"component": "file://./demos/custom-separator/index.ts"}} ## Breadcrumbs with icons -{{"demo": "IconBreadcrumbs.js"}} +{{"component": "file://./demos/icon/index.ts"}} ## Collapsed breadcrumbs -{{"demo": "CollapsedBreadcrumbs.js"}} +{{"component": "file://./demos/collapsed/index.ts"}} ## Condensed with menu As an alternative, consider adding a Menu component to display the condensed links in a dropdown list: -{{"demo": "CondensedWithMenu.js"}} +{{"component": "file://./demos/condensed-with-menu/index.ts"}} ## Customization Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedBreadcrumbs.js"}} +{{"component": "file://./demos/customized/index.ts"}} ## Integration with react-router -{{"demo": "RouterBreadcrumbs.js", "bg": true}} +{{"component": "file://./demos/router/index.ts", "bg": true}} ## Accessibility diff --git a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx b/docs/data/material/components/breadcrumbs/demos/active-last/ActiveLastBreadcrumb.tsx similarity index 94% rename from docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx rename to docs/data/material/components/breadcrumbs/demos/active-last/ActiveLastBreadcrumb.tsx index a6af1a091439d3..dbc1b8ebf3ef1d 100644 --- a/docs/data/material/components/breadcrumbs/ActiveLastBreadcrumb.tsx +++ b/docs/data/material/components/breadcrumbs/demos/active-last/ActiveLastBreadcrumb.tsx @@ -10,6 +10,7 @@ function handleClick(event: React.MouseEvent) { export default function ActiveLastBreadcrumb() { return (
    + {/* @focus-start */} MUI @@ -32,6 +33,7 @@ export default function ActiveLastBreadcrumb() { Breadcrumbs + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/breadcrumbs/demos/active-last/client.ts b/docs/data/material/components/breadcrumbs/demos/active-last/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/active-last/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/breadcrumbs/demos/active-last/index.ts b/docs/data/material/components/breadcrumbs/demos/active-last/index.ts new file mode 100644 index 00000000000000..7a295a46b69298 --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/active-last/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ActiveLastBreadcrumb from './ActiveLastBreadcrumb'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ActiveLastBreadcrumb, { ClientProvider }); diff --git a/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/demos/basic/BasicBreadcrumbs.tsx similarity index 94% rename from docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx rename to docs/data/material/components/breadcrumbs/demos/basic/BasicBreadcrumbs.tsx index 05ec25b54d7b7c..57a6cf0bc62669 100644 --- a/docs/data/material/components/breadcrumbs/BasicBreadcrumbs.tsx +++ b/docs/data/material/components/breadcrumbs/demos/basic/BasicBreadcrumbs.tsx @@ -11,6 +11,7 @@ function handleClick(event: React.MouseEvent) { export default function BasicBreadcrumbs() { return (
    + {/* @focus-start */} MUI @@ -24,6 +25,7 @@ export default function BasicBreadcrumbs() { Breadcrumbs + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/breadcrumbs/demos/basic/client.ts b/docs/data/material/components/breadcrumbs/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/breadcrumbs/demos/basic/index.ts b/docs/data/material/components/breadcrumbs/demos/basic/index.ts new file mode 100644 index 00000000000000..958765187c469f --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicBreadcrumbs from './BasicBreadcrumbs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicBreadcrumbs, { ClientProvider }); diff --git a/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/demos/collapsed/CollapsedBreadcrumbs.tsx similarity index 94% rename from docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx rename to docs/data/material/components/breadcrumbs/demos/collapsed/CollapsedBreadcrumbs.tsx index db8ced40240ecd..20936e6d1208fc 100644 --- a/docs/data/material/components/breadcrumbs/CollapsedBreadcrumbs.tsx +++ b/docs/data/material/components/breadcrumbs/demos/collapsed/CollapsedBreadcrumbs.tsx @@ -11,6 +11,7 @@ function handleClick(event: React.MouseEvent) { export default function CollapsedBreadcrumbs() { return (
    + {/* @focus-start */} Home @@ -26,6 +27,7 @@ export default function CollapsedBreadcrumbs() { Belts + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/breadcrumbs/demos/collapsed/client.ts b/docs/data/material/components/breadcrumbs/demos/collapsed/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/collapsed/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/breadcrumbs/demos/collapsed/index.ts b/docs/data/material/components/breadcrumbs/demos/collapsed/index.ts new file mode 100644 index 00000000000000..68932d95dcdc1d --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/collapsed/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CollapsedBreadcrumbs from './CollapsedBreadcrumbs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CollapsedBreadcrumbs, { ClientProvider }); diff --git a/docs/data/material/components/breadcrumbs/CondensedWithMenu.tsx b/docs/data/material/components/breadcrumbs/demos/condensed-with-menu/CondensedWithMenu.tsx similarity index 97% rename from docs/data/material/components/breadcrumbs/CondensedWithMenu.tsx rename to docs/data/material/components/breadcrumbs/demos/condensed-with-menu/CondensedWithMenu.tsx index b7b2acc59e90cf..9a3ff1015713d6 100644 --- a/docs/data/material/components/breadcrumbs/CondensedWithMenu.tsx +++ b/docs/data/material/components/breadcrumbs/demos/condensed-with-menu/CondensedWithMenu.tsx @@ -7,6 +7,7 @@ import IconButton from '@mui/material/IconButton'; import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; export default function CondensedWithMenu() { + // @focus-start @padding 1 const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); @@ -48,4 +49,5 @@ export default function CondensedWithMenu() { ); + // @focus-end } diff --git a/docs/data/material/components/breadcrumbs/demos/condensed-with-menu/client.ts b/docs/data/material/components/breadcrumbs/demos/condensed-with-menu/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/condensed-with-menu/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/breadcrumbs/demos/condensed-with-menu/index.ts b/docs/data/material/components/breadcrumbs/demos/condensed-with-menu/index.ts new file mode 100644 index 00000000000000..3b769b29150907 --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/condensed-with-menu/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CondensedWithMenu from './CondensedWithMenu'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CondensedWithMenu, { ClientProvider }); diff --git a/docs/data/material/components/breadcrumbs/CustomSeparator.tsx b/docs/data/material/components/breadcrumbs/demos/custom-separator/CustomSeparator.tsx similarity index 96% rename from docs/data/material/components/breadcrumbs/CustomSeparator.tsx rename to docs/data/material/components/breadcrumbs/demos/custom-separator/CustomSeparator.tsx index 32ebc9b9e476db..b2977f6d63369b 100644 --- a/docs/data/material/components/breadcrumbs/CustomSeparator.tsx +++ b/docs/data/material/components/breadcrumbs/demos/custom-separator/CustomSeparator.tsx @@ -31,6 +31,7 @@ export default function CustomSeparator() { return ( + {/* @focus-start */} {breadcrumbs} @@ -43,6 +44,7 @@ export default function CustomSeparator() { > {breadcrumbs} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/breadcrumbs/demos/custom-separator/client.ts b/docs/data/material/components/breadcrumbs/demos/custom-separator/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/custom-separator/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/breadcrumbs/demos/custom-separator/index.ts b/docs/data/material/components/breadcrumbs/demos/custom-separator/index.ts new file mode 100644 index 00000000000000..f470abcfd5c137 --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/custom-separator/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomSeparator from './CustomSeparator'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomSeparator, { ClientProvider }); diff --git a/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/demos/customized/CustomizedBreadcrumbs.tsx similarity index 97% rename from docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx rename to docs/data/material/components/breadcrumbs/demos/customized/CustomizedBreadcrumbs.tsx index 6cc65968d427e8..6e75b465b2ac2d 100644 --- a/docs/data/material/components/breadcrumbs/CustomizedBreadcrumbs.tsx +++ b/docs/data/material/components/breadcrumbs/demos/customized/CustomizedBreadcrumbs.tsx @@ -38,6 +38,7 @@ function handleClick(event: React.MouseEvent) { export default function CustomizedBreadcrumbs() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/breadcrumbs/demos/customized/client.ts b/docs/data/material/components/breadcrumbs/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/breadcrumbs/demos/customized/index.ts b/docs/data/material/components/breadcrumbs/demos/customized/index.ts new file mode 100644 index 00000000000000..300df9fee133ac --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedBreadcrumbs from './CustomizedBreadcrumbs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedBreadcrumbs, { ClientProvider }); diff --git a/docs/data/material/components/breadcrumbs/IconBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/demos/icon/IconBreadcrumbs.tsx similarity index 96% rename from docs/data/material/components/breadcrumbs/IconBreadcrumbs.tsx rename to docs/data/material/components/breadcrumbs/demos/icon/IconBreadcrumbs.tsx index ddfae110d283d6..9c8279ca6ee7de 100644 --- a/docs/data/material/components/breadcrumbs/IconBreadcrumbs.tsx +++ b/docs/data/material/components/breadcrumbs/demos/icon/IconBreadcrumbs.tsx @@ -14,6 +14,7 @@ function handleClick(event: React.MouseEvent) { export default function IconBreadcrumbs() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/breadcrumbs/demos/icon/client.ts b/docs/data/material/components/breadcrumbs/demos/icon/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/icon/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/breadcrumbs/demos/icon/index.ts b/docs/data/material/components/breadcrumbs/demos/icon/index.ts new file mode 100644 index 00000000000000..f8325a49c08cad --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/icon/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IconBreadcrumbs from './IconBreadcrumbs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IconBreadcrumbs, { ClientProvider }); diff --git a/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx b/docs/data/material/components/breadcrumbs/demos/router/RouterBreadcrumbs.tsx similarity index 94% rename from docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx rename to docs/data/material/components/breadcrumbs/demos/router/RouterBreadcrumbs.tsx index 6e79d9904cf65e..1da60fc5130735 100644 --- a/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx +++ b/docs/data/material/components/breadcrumbs/demos/router/RouterBreadcrumbs.tsx @@ -1,8 +1,9 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import List from '@mui/material/List'; -import Link, { LinkProps } from '@mui/material/Link'; -import { ListItemProps } from '@mui/material/ListItem'; +import Link from '@mui/material/Link'; +import type { LinkProps } from '@mui/material/Link'; +import type { ListItemProps } from '@mui/material/ListItem'; import ListItemButton from '@mui/material/ListItemButton'; import Collapse from '@mui/material/Collapse'; import ListItemText from '@mui/material/ListItemText'; @@ -87,6 +88,7 @@ function Page() { } export default function RouterBreadcrumbs() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(true); const handleClick = () => { @@ -118,4 +120,5 @@ export default function RouterBreadcrumbs() { ); + // @focus-end } diff --git a/docs/data/material/components/breadcrumbs/demos/router/client.ts b/docs/data/material/components/breadcrumbs/demos/router/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/router/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/breadcrumbs/demos/router/index.ts b/docs/data/material/components/breadcrumbs/demos/router/index.ts new file mode 100644 index 00000000000000..73889aa3ab01f6 --- /dev/null +++ b/docs/data/material/components/breadcrumbs/demos/router/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RouterBreadcrumbs from './RouterBreadcrumbs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RouterBreadcrumbs, { ClientProvider }); diff --git a/docs/data/material/components/button-group/BasicButtonGroup.js b/docs/data/material/components/button-group/BasicButtonGroup.js deleted file mode 100644 index a472c25ac46a04..00000000000000 --- a/docs/data/material/components/button-group/BasicButtonGroup.js +++ /dev/null @@ -1,12 +0,0 @@ -import Button from '@mui/material/Button'; -import ButtonGroup from '@mui/material/ButtonGroup'; - -export default function BasicButtonGroup() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/button-group/BasicButtonGroup.tsx.preview b/docs/data/material/components/button-group/BasicButtonGroup.tsx.preview deleted file mode 100644 index 4ee442de5f6e1b..00000000000000 --- a/docs/data/material/components/button-group/BasicButtonGroup.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/button-group/DisableElevation.js b/docs/data/material/components/button-group/DisableElevation.js deleted file mode 100644 index b44f95cdafd818..00000000000000 --- a/docs/data/material/components/button-group/DisableElevation.js +++ /dev/null @@ -1,15 +0,0 @@ -import ButtonGroup from '@mui/material/ButtonGroup'; -import Button from '@mui/material/Button'; - -export default function DisableElevation() { - return ( - - - - - ); -} diff --git a/docs/data/material/components/button-group/DisableElevation.tsx b/docs/data/material/components/button-group/DisableElevation.tsx deleted file mode 100644 index b44f95cdafd818..00000000000000 --- a/docs/data/material/components/button-group/DisableElevation.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import ButtonGroup from '@mui/material/ButtonGroup'; -import Button from '@mui/material/Button'; - -export default function DisableElevation() { - return ( - - - - - ); -} diff --git a/docs/data/material/components/button-group/DisableElevation.tsx.preview b/docs/data/material/components/button-group/DisableElevation.tsx.preview deleted file mode 100644 index 441e97f1db4130..00000000000000 --- a/docs/data/material/components/button-group/DisableElevation.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/material/components/button-group/GroupOrientation.js b/docs/data/material/components/button-group/GroupOrientation.js deleted file mode 100644 index 01960d3454d2d4..00000000000000 --- a/docs/data/material/components/button-group/GroupOrientation.js +++ /dev/null @@ -1,40 +0,0 @@ -import Button from '@mui/material/Button'; -import ButtonGroup from '@mui/material/ButtonGroup'; -import Box from '@mui/material/Box'; - -const buttons = [ - , - , - , -]; - -export default function GroupOrientation() { - return ( - *': { - m: 1, - }, - }} - > - - {buttons} - - - {buttons} - - - {buttons} - - - ); -} diff --git a/docs/data/material/components/button-group/GroupSizesColors.js b/docs/data/material/components/button-group/GroupSizesColors.js deleted file mode 100644 index fcc6e993063532..00000000000000 --- a/docs/data/material/components/button-group/GroupSizesColors.js +++ /dev/null @@ -1,34 +0,0 @@ -import Button from '@mui/material/Button'; -import Box from '@mui/material/Box'; -import ButtonGroup from '@mui/material/ButtonGroup'; - -const buttons = [ - , - , - , -]; - -export default function GroupSizesColors() { - return ( - *': { - m: 1, - }, - }} - > - - {buttons} - - - {buttons} - - - {buttons} - - - ); -} diff --git a/docs/data/material/components/button-group/GroupSizesColors.tsx.preview b/docs/data/material/components/button-group/GroupSizesColors.tsx.preview deleted file mode 100644 index 2a82ef23279d5b..00000000000000 --- a/docs/data/material/components/button-group/GroupSizesColors.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - {buttons} - - - {buttons} - - - {buttons} - \ No newline at end of file diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.js b/docs/data/material/components/button-group/LoadingButtonGroup.js deleted file mode 100644 index 2d7de3f4908c44..00000000000000 --- a/docs/data/material/components/button-group/LoadingButtonGroup.js +++ /dev/null @@ -1,15 +0,0 @@ -import ButtonGroup from '@mui/material/ButtonGroup'; -import Button from '@mui/material/Button'; -import SaveIcon from '@mui/icons-material/Save'; - -export default function LoadingButtonGroup() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview b/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview deleted file mode 100644 index a69903f1fca35c..00000000000000 --- a/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/button-group/SplitButton.js b/docs/data/material/components/button-group/SplitButton.js deleted file mode 100644 index 00a23c905e853d..00000000000000 --- a/docs/data/material/components/button-group/SplitButton.js +++ /dev/null @@ -1,96 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import ButtonGroup from '@mui/material/ButtonGroup'; -import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; -import ClickAwayListener from '@mui/material/ClickAwayListener'; -import Grow from '@mui/material/Grow'; -import Paper from '@mui/material/Paper'; -import Popper from '@mui/material/Popper'; -import MenuItem from '@mui/material/MenuItem'; -import MenuList from '@mui/material/MenuList'; - -const options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge']; - -export default function SplitButton() { - const [open, setOpen] = React.useState(false); - const anchorRef = React.useRef(null); - const [selectedIndex, setSelectedIndex] = React.useState(1); - - const handleClick = () => { - console.info(`You clicked ${options[selectedIndex]}`); - }; - - const handleMenuItemClick = (event, index) => { - setSelectedIndex(index); - setOpen(false); - }; - - const handleToggle = () => { - setOpen((prevOpen) => !prevOpen); - }; - - const handleClose = (event) => { - if (anchorRef.current && anchorRef.current.contains(event.target)) { - return; - } - - setOpen(false); - }; - - return ( - - - - - - - {({ TransitionProps, placement }) => ( - - - - - {options.map((option, index) => ( - handleMenuItemClick(event, index)} - > - {option} - - ))} - - - - - )} - - - ); -} diff --git a/docs/data/material/components/button-group/VariantButtonGroup.js b/docs/data/material/components/button-group/VariantButtonGroup.js deleted file mode 100644 index c59f8cbdceeb14..00000000000000 --- a/docs/data/material/components/button-group/VariantButtonGroup.js +++ /dev/null @@ -1,29 +0,0 @@ -import Button from '@mui/material/Button'; -import ButtonGroup from '@mui/material/ButtonGroup'; -import Box from '@mui/material/Box'; - -export default function VariantButtonGroup() { - return ( - *': { - m: 1, - }, - }} - > - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/button-group/VariantButtonGroup.tsx.preview b/docs/data/material/components/button-group/VariantButtonGroup.tsx.preview deleted file mode 100644 index 263b0efaff860b..00000000000000 --- a/docs/data/material/components/button-group/VariantButtonGroup.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/button-group/button-group.md b/docs/data/material/components/button-group/button-group.md index 4113d65d8eb8cb..26f212382044ee 100644 --- a/docs/data/material/components/button-group/button-group.md +++ b/docs/data/material/components/button-group/button-group.md @@ -17,40 +17,40 @@ githubSource: packages/mui-material/src/ButtonGroup The buttons can be grouped by wrapping them with the `ButtonGroup` component. They need to be immediate children. -{{"demo": "BasicButtonGroup.js"}} +{{"component": "file://./demos/basic/index.ts"}} ## Button variants All the standard button variants are supported. -{{"demo": "VariantButtonGroup.js"}} +{{"component": "file://./demos/variant/index.ts"}} ## Sizes and colors The `size` and `color` props can be used to control the appearance of the button group. -{{"demo": "GroupSizesColors.js"}} +{{"component": "file://./demos/group-sizes-colors/index.ts"}} ## Vertical group The button group can be displayed vertically using the `orientation` prop. -{{"demo": "GroupOrientation.js"}} +{{"component": "file://./demos/group-orientation/index.ts"}} ## Split button `ButtonGroup` can also be used to create a split button. The dropdown can change the button action (as in this example) or be used to immediately trigger a related action. -{{"demo": "SplitButton.js"}} +{{"component": "file://./demos/split-button/index.ts"}} ## Disabled elevation You can remove the elevation with the `disableElevation` prop. -{{"demo": "DisableElevation.js"}} +{{"component": "file://./demos/disable-elevation/index.ts"}} ## Loading Use the `loading` prop from `Button` to set buttons in a loading state and disable interactions. -{{"demo": "LoadingButtonGroup.js"}} +{{"component": "file://./demos/loading/index.ts"}} diff --git a/docs/data/material/components/button-group/BasicButtonGroup.tsx b/docs/data/material/components/button-group/demos/basic/BasicButtonGroup.tsx similarity index 87% rename from docs/data/material/components/button-group/BasicButtonGroup.tsx rename to docs/data/material/components/button-group/demos/basic/BasicButtonGroup.tsx index a472c25ac46a04..85d16f5ef24404 100644 --- a/docs/data/material/components/button-group/BasicButtonGroup.tsx +++ b/docs/data/material/components/button-group/demos/basic/BasicButtonGroup.tsx @@ -3,10 +3,12 @@ import ButtonGroup from '@mui/material/ButtonGroup'; export default function BasicButtonGroup() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/button-group/demos/basic/client.ts b/docs/data/material/components/button-group/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/button-group/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/button-group/demos/basic/index.ts b/docs/data/material/components/button-group/demos/basic/index.ts new file mode 100644 index 00000000000000..e6669ba4e0ad2b --- /dev/null +++ b/docs/data/material/components/button-group/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicButtonGroup from './BasicButtonGroup'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicButtonGroup, { ClientProvider }); diff --git a/docs/data/material/components/button-group/demos/disable-elevation/DisableElevation.tsx b/docs/data/material/components/button-group/demos/disable-elevation/DisableElevation.tsx new file mode 100644 index 00000000000000..1b1a0bf70eb3fe --- /dev/null +++ b/docs/data/material/components/button-group/demos/disable-elevation/DisableElevation.tsx @@ -0,0 +1,17 @@ +import ButtonGroup from '@mui/material/ButtonGroup'; +import Button from '@mui/material/Button'; + +export default function DisableElevation() { + return ( + // @focus-start @padding 2 + + + + + // @focus-end + ); +} diff --git a/docs/data/material/components/button-group/demos/disable-elevation/client.ts b/docs/data/material/components/button-group/demos/disable-elevation/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/button-group/demos/disable-elevation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/button-group/demos/disable-elevation/index.ts b/docs/data/material/components/button-group/demos/disable-elevation/index.ts new file mode 100644 index 00000000000000..8641f7e5dd5045 --- /dev/null +++ b/docs/data/material/components/button-group/demos/disable-elevation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DisableElevation from './DisableElevation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DisableElevation, { ClientProvider }); diff --git a/docs/data/material/components/button-group/GroupOrientation.tsx b/docs/data/material/components/button-group/demos/group-orientation/GroupOrientation.tsx similarity index 94% rename from docs/data/material/components/button-group/GroupOrientation.tsx rename to docs/data/material/components/button-group/demos/group-orientation/GroupOrientation.tsx index 01960d3454d2d4..8c066745ce6c85 100644 --- a/docs/data/material/components/button-group/GroupOrientation.tsx +++ b/docs/data/material/components/button-group/demos/group-orientation/GroupOrientation.tsx @@ -18,6 +18,7 @@ export default function GroupOrientation() { }, }} > + {/* @focus-start */} {buttons} @@ -35,6 +36,7 @@ export default function GroupOrientation() { > {buttons} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/button-group/demos/group-orientation/client.ts b/docs/data/material/components/button-group/demos/group-orientation/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/button-group/demos/group-orientation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/button-group/demos/group-orientation/index.ts b/docs/data/material/components/button-group/demos/group-orientation/index.ts new file mode 100644 index 00000000000000..897c449f3e524a --- /dev/null +++ b/docs/data/material/components/button-group/demos/group-orientation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GroupOrientation from './GroupOrientation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GroupOrientation, { ClientProvider }); diff --git a/docs/data/material/components/button-group/GroupSizesColors.tsx b/docs/data/material/components/button-group/demos/group-sizes-colors/GroupSizesColors.tsx similarity index 94% rename from docs/data/material/components/button-group/GroupSizesColors.tsx rename to docs/data/material/components/button-group/demos/group-sizes-colors/GroupSizesColors.tsx index fcc6e993063532..3a242346fdac4d 100644 --- a/docs/data/material/components/button-group/GroupSizesColors.tsx +++ b/docs/data/material/components/button-group/demos/group-sizes-colors/GroupSizesColors.tsx @@ -20,6 +20,7 @@ export default function GroupSizesColors() { }, }} > + {/* @focus-start */} {buttons} @@ -29,6 +30,7 @@ export default function GroupSizesColors() { {buttons} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/button-group/demos/group-sizes-colors/client.ts b/docs/data/material/components/button-group/demos/group-sizes-colors/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/button-group/demos/group-sizes-colors/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/button-group/demos/group-sizes-colors/index.ts b/docs/data/material/components/button-group/demos/group-sizes-colors/index.ts new file mode 100644 index 00000000000000..b706e584319cee --- /dev/null +++ b/docs/data/material/components/button-group/demos/group-sizes-colors/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GroupSizesColors from './GroupSizesColors'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GroupSizesColors, { ClientProvider }); diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx b/docs/data/material/components/button-group/demos/loading/LoadingButtonGroup.tsx similarity index 90% rename from docs/data/material/components/button-group/LoadingButtonGroup.tsx rename to docs/data/material/components/button-group/demos/loading/LoadingButtonGroup.tsx index 2d7de3f4908c44..a5fec62f28c1e4 100644 --- a/docs/data/material/components/button-group/LoadingButtonGroup.tsx +++ b/docs/data/material/components/button-group/demos/loading/LoadingButtonGroup.tsx @@ -4,6 +4,7 @@ import SaveIcon from '@mui/icons-material/Save'; export default function LoadingButtonGroup() { return ( + // @focus-start @padding 2 @@ -11,5 +12,6 @@ export default function LoadingButtonGroup() { Save + // @focus-end ); } diff --git a/docs/data/material/components/button-group/demos/loading/client.ts b/docs/data/material/components/button-group/demos/loading/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/button-group/demos/loading/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/button-group/demos/loading/index.ts b/docs/data/material/components/button-group/demos/loading/index.ts new file mode 100644 index 00000000000000..8ce67ea3b27a0e --- /dev/null +++ b/docs/data/material/components/button-group/demos/loading/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LoadingButtonGroup from './LoadingButtonGroup'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LoadingButtonGroup, { ClientProvider }); diff --git a/docs/data/material/components/button-group/SplitButton.tsx b/docs/data/material/components/button-group/demos/split-button/SplitButton.tsx similarity index 98% rename from docs/data/material/components/button-group/SplitButton.tsx rename to docs/data/material/components/button-group/demos/split-button/SplitButton.tsx index a27a321268bc52..f0980fe079fcb9 100644 --- a/docs/data/material/components/button-group/SplitButton.tsx +++ b/docs/data/material/components/button-group/demos/split-button/SplitButton.tsx @@ -12,6 +12,7 @@ import MenuList from '@mui/material/MenuList'; const options = ['Create a merge commit', 'Squash and merge', 'Rebase and merge']; export default function SplitButton() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const anchorRef = React.useRef(null); const [selectedIndex, setSelectedIndex] = React.useState(1); @@ -99,4 +100,5 @@ export default function SplitButton() { ); + // @focus-end } diff --git a/docs/data/material/components/button-group/demos/split-button/client.ts b/docs/data/material/components/button-group/demos/split-button/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/button-group/demos/split-button/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/button-group/demos/split-button/index.ts b/docs/data/material/components/button-group/demos/split-button/index.ts new file mode 100644 index 00000000000000..64778e18264a45 --- /dev/null +++ b/docs/data/material/components/button-group/demos/split-button/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SplitButton from './SplitButton'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SplitButton, { ClientProvider }); diff --git a/docs/data/material/components/button-group/VariantButtonGroup.tsx b/docs/data/material/components/button-group/demos/variant/VariantButtonGroup.tsx similarity index 93% rename from docs/data/material/components/button-group/VariantButtonGroup.tsx rename to docs/data/material/components/button-group/demos/variant/VariantButtonGroup.tsx index c59f8cbdceeb14..e3c8cc18adb32a 100644 --- a/docs/data/material/components/button-group/VariantButtonGroup.tsx +++ b/docs/data/material/components/button-group/demos/variant/VariantButtonGroup.tsx @@ -14,6 +14,7 @@ export default function VariantButtonGroup() { }, }} > + {/* @focus-start */} @@ -24,6 +25,7 @@ export default function VariantButtonGroup() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/button-group/demos/variant/client.ts b/docs/data/material/components/button-group/demos/variant/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/button-group/demos/variant/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/button-group/demos/variant/index.ts b/docs/data/material/components/button-group/demos/variant/index.ts new file mode 100644 index 00000000000000..e14bd0f3ba4c96 --- /dev/null +++ b/docs/data/material/components/button-group/demos/variant/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VariantButtonGroup from './VariantButtonGroup'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VariantButtonGroup, { ClientProvider }); diff --git a/docs/data/material/components/buttons/BasicButtons.js b/docs/data/material/components/buttons/BasicButtons.js deleted file mode 100644 index 956f6ef3b896a6..00000000000000 --- a/docs/data/material/components/buttons/BasicButtons.js +++ /dev/null @@ -1,12 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; - -export default function BasicButtons() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/buttons/BasicButtons.tsx.preview b/docs/data/material/components/buttons/BasicButtons.tsx.preview deleted file mode 100644 index 000b68430942cb..00000000000000 --- a/docs/data/material/components/buttons/BasicButtons.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/buttons/ButtonBaseDemo.js b/docs/data/material/components/buttons/ButtonBaseDemo.js deleted file mode 100644 index 28f79fd4672e2c..00000000000000 --- a/docs/data/material/components/buttons/ButtonBaseDemo.js +++ /dev/null @@ -1,125 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import ButtonBase from '@mui/material/ButtonBase'; -import Typography from '@mui/material/Typography'; - -const images = [ - { - url: '/static/images/buttons/breakfast.jpg', - title: 'Breakfast', - width: '40%', - }, - { - url: '/static/images/buttons/burgers.jpg', - title: 'Burgers', - width: '30%', - }, - { - url: '/static/images/buttons/camera.jpg', - title: 'Camera', - width: '30%', - }, -]; - -const ImageButton = styled(ButtonBase)(({ theme }) => ({ - position: 'relative', - height: 200, - [theme.breakpoints.down('sm')]: { - width: '100% !important', // Overrides inline-style - height: 100, - }, - '&:hover, &.Mui-focusVisible': { - zIndex: 1, - '& .MuiImageBackdrop-root': { - opacity: 0.15, - }, - '& .MuiImageMarked-root': { - opacity: 0, - }, - '& .MuiTypography-root': { - border: '4px solid currentColor', - }, - }, -})); - -const ImageSrc = styled('span')({ - position: 'absolute', - left: 0, - right: 0, - top: 0, - bottom: 0, - backgroundSize: 'cover', - backgroundPosition: 'center 40%', -}); - -const Image = styled('span')(({ theme }) => ({ - position: 'absolute', - left: 0, - right: 0, - top: 0, - bottom: 0, - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - color: theme.palette.common.white, -})); - -const ImageBackdrop = styled('span')(({ theme }) => ({ - position: 'absolute', - left: 0, - right: 0, - top: 0, - bottom: 0, - backgroundColor: theme.palette.common.black, - opacity: 0.4, - transition: theme.transitions.create('opacity'), -})); - -const ImageMarked = styled('span')(({ theme }) => ({ - height: 3, - width: 18, - backgroundColor: theme.palette.common.white, - position: 'absolute', - bottom: -2, - left: 'calc(50% - 9px)', - transition: theme.transitions.create('opacity'), -})); - -export default function ButtonBaseDemo() { - return ( - - {images.map((image) => ( - - - - - ({ - position: 'relative', - p: 4, - pt: 2, - pb: `calc(${theme.spacing(1)} + 6px)`, - }), - ]} - > - {image.title} - - - - - ))} - - ); -} diff --git a/docs/data/material/components/buttons/ButtonSizes.js b/docs/data/material/components/buttons/ButtonSizes.js deleted file mode 100644 index bba86158356837..00000000000000 --- a/docs/data/material/components/buttons/ButtonSizes.js +++ /dev/null @@ -1,36 +0,0 @@ -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; - -export default function ButtonSizes() { - return ( - -
    - - - -
    -
    - - - -
    -
    - - - -
    -     - ); -} diff --git a/docs/data/material/components/buttons/ColorButtons.js b/docs/data/material/components/buttons/ColorButtons.js deleted file mode 100644 index f709b8cd936bad..00000000000000 --- a/docs/data/material/components/buttons/ColorButtons.js +++ /dev/null @@ -1,16 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; - -export default function ColorButtons() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/buttons/ColorButtons.tsx.preview b/docs/data/material/components/buttons/ColorButtons.tsx.preview deleted file mode 100644 index b69599177b1ebe..00000000000000 --- a/docs/data/material/components/buttons/ColorButtons.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/buttons/ContainedButtons.js b/docs/data/material/components/buttons/ContainedButtons.js deleted file mode 100644 index 3e1abb3601ba7c..00000000000000 --- a/docs/data/material/components/buttons/ContainedButtons.js +++ /dev/null @@ -1,16 +0,0 @@ -import Button from '@mui/material/Button'; -import Stack from '@mui/material/Stack'; - -export default function ContainedButtons() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/buttons/ContainedButtons.tsx.preview b/docs/data/material/components/buttons/ContainedButtons.tsx.preview deleted file mode 100644 index f8903cf5ff7471..00000000000000 --- a/docs/data/material/components/buttons/ContainedButtons.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/buttons/CustomizedButtons.js b/docs/data/material/components/buttons/CustomizedButtons.js deleted file mode 100644 index 9cad4b68782e7f..00000000000000 --- a/docs/data/material/components/buttons/CustomizedButtons.js +++ /dev/null @@ -1,59 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Button from '@mui/material/Button'; -import Stack from '@mui/material/Stack'; -import { purple } from '@mui/material/colors'; - -const BootstrapButton = styled(Button)({ - boxShadow: 'none', - textTransform: 'none', - fontSize: 16, - padding: '6px 12px', - border: '1px solid', - lineHeight: 1.5, - backgroundColor: '#0063cc', - borderColor: '#0063cc', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - '&:hover': { - backgroundColor: '#0069d9', - borderColor: '#0062cc', - boxShadow: 'none', - }, - '&:active': { - boxShadow: 'none', - backgroundColor: '#0062cc', - borderColor: '#005cbf', - }, - '&:focus': { - boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)', - }, -}); - -const ColorButton = styled(Button)(({ theme }) => ({ - color: theme.palette.getContrastText(purple[500]), - backgroundColor: purple[500], - '&:hover': { - backgroundColor: purple[700], - }, -})); - -export default function CustomizedButtons() { - return ( - - Custom CSS - - Bootstrap - - - ); -} diff --git a/docs/data/material/components/buttons/CustomizedButtons.tsx.preview b/docs/data/material/components/buttons/CustomizedButtons.tsx.preview deleted file mode 100644 index 5cf7e960f8c4eb..00000000000000 --- a/docs/data/material/components/buttons/CustomizedButtons.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ -Custom CSS - - Bootstrap - \ No newline at end of file diff --git a/docs/data/material/components/buttons/DisableElevation.js b/docs/data/material/components/buttons/DisableElevation.js deleted file mode 100644 index d584080b554266..00000000000000 --- a/docs/data/material/components/buttons/DisableElevation.js +++ /dev/null @@ -1,9 +0,0 @@ -import Button from '@mui/material/Button'; - -export default function DisableElevation() { - return ( - - ); -} diff --git a/docs/data/material/components/buttons/DisableElevation.tsx b/docs/data/material/components/buttons/DisableElevation.tsx deleted file mode 100644 index d584080b554266..00000000000000 --- a/docs/data/material/components/buttons/DisableElevation.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import Button from '@mui/material/Button'; - -export default function DisableElevation() { - return ( - - ); -} diff --git a/docs/data/material/components/buttons/DisableElevation.tsx.preview b/docs/data/material/components/buttons/DisableElevation.tsx.preview deleted file mode 100644 index 4f12bf06dc4b44..00000000000000 --- a/docs/data/material/components/buttons/DisableElevation.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/buttons/IconButtonColors.js b/docs/data/material/components/buttons/IconButtonColors.js deleted file mode 100644 index ed1394fc9f9524..00000000000000 --- a/docs/data/material/components/buttons/IconButtonColors.js +++ /dev/null @@ -1,16 +0,0 @@ -import Stack from '@mui/material/Stack'; -import IconButton from '@mui/material/IconButton'; -import Fingerprint from '@mui/icons-material/Fingerprint'; - -export default function IconButtonColors() { - return ( - - - - - - - - - ); -} diff --git a/docs/data/material/components/buttons/IconButtonColors.tsx.preview b/docs/data/material/components/buttons/IconButtonColors.tsx.preview deleted file mode 100644 index 6bcdaf3df3ea98..00000000000000 --- a/docs/data/material/components/buttons/IconButtonColors.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/buttons/IconButtonSizes.js b/docs/data/material/components/buttons/IconButtonSizes.js deleted file mode 100644 index bcec185eb43480..00000000000000 --- a/docs/data/material/components/buttons/IconButtonSizes.js +++ /dev/null @@ -1,22 +0,0 @@ -import Stack from '@mui/material/Stack'; -import IconButton from '@mui/material/IconButton'; -import DeleteIcon from '@mui/icons-material/Delete'; - -export default function IconButtonSizes() { - return ( - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/buttons/IconButtonSizes.tsx.preview b/docs/data/material/components/buttons/IconButtonSizes.tsx.preview deleted file mode 100644 index 23d0ea732b49c7..00000000000000 --- a/docs/data/material/components/buttons/IconButtonSizes.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.js b/docs/data/material/components/buttons/IconButtonWithBadge.js deleted file mode 100644 index 90c4ed142ffab8..00000000000000 --- a/docs/data/material/components/buttons/IconButtonWithBadge.js +++ /dev/null @@ -1,20 +0,0 @@ -import { styled } from '@mui/material/styles'; -import IconButton from '@mui/material/IconButton'; -import Badge, { badgeClasses } from '@mui/material/Badge'; -import ShoppingCartIcon from '@mui/icons-material/ShoppingCartOutlined'; - -const CartBadge = styled(Badge)` - & .${badgeClasses.badge} { - top: -12px; - right: -6px; - } -`; - -export default function IconButtonWithBadge() { - return ( - - - - - ); -} diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview b/docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview deleted file mode 100644 index 197f65b376bf75..00000000000000 --- a/docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/material/components/buttons/IconButtons.js b/docs/data/material/components/buttons/IconButtons.js deleted file mode 100644 index c99c3bfd302cd5..00000000000000 --- a/docs/data/material/components/buttons/IconButtons.js +++ /dev/null @@ -1,24 +0,0 @@ -import IconButton from '@mui/material/IconButton'; -import Stack from '@mui/material/Stack'; -import DeleteIcon from '@mui/icons-material/Delete'; -import AlarmIcon from '@mui/icons-material/Alarm'; -import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart'; - -export default function IconButtons() { - return ( - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/buttons/IconButtons.tsx.preview b/docs/data/material/components/buttons/IconButtons.tsx.preview deleted file mode 100644 index eb5c34920ca84a..00000000000000 --- a/docs/data/material/components/buttons/IconButtons.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/buttons/IconLabelButtons.js b/docs/data/material/components/buttons/IconLabelButtons.js deleted file mode 100644 index 4e5744367a0a47..00000000000000 --- a/docs/data/material/components/buttons/IconLabelButtons.js +++ /dev/null @@ -1,17 +0,0 @@ -import Button from '@mui/material/Button'; -import DeleteIcon from '@mui/icons-material/Delete'; -import SendIcon from '@mui/icons-material/Send'; -import Stack from '@mui/material/Stack'; - -export default function IconLabelButtons() { - return ( - - - - - ); -} diff --git a/docs/data/material/components/buttons/IconLabelButtons.tsx.preview b/docs/data/material/components/buttons/IconLabelButtons.tsx.preview deleted file mode 100644 index 3e95b56b058d53..00000000000000 --- a/docs/data/material/components/buttons/IconLabelButtons.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/buttons/InputFileUpload.js b/docs/data/material/components/buttons/InputFileUpload.js deleted file mode 100644 index c186bc6b70ba19..00000000000000 --- a/docs/data/material/components/buttons/InputFileUpload.js +++ /dev/null @@ -1,34 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Button from '@mui/material/Button'; -import CloudUploadIcon from '@mui/icons-material/CloudUpload'; - -const VisuallyHiddenInput = styled('input')({ - clip: 'rect(0 0 0 0)', - clipPath: 'inset(50%)', - height: 1, - overflow: 'hidden', - position: 'absolute', - bottom: 0, - left: 0, - whiteSpace: 'nowrap', - width: 1, -}); - -export default function InputFileUpload() { - return ( - - ); -} diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx.preview b/docs/data/material/components/buttons/InputFileUpload.tsx.preview deleted file mode 100644 index c2dccf123cc789..00000000000000 --- a/docs/data/material/components/buttons/InputFileUpload.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/buttons/LoadingButtons.js b/docs/data/material/components/buttons/LoadingButtons.js deleted file mode 100644 index 62cc284949adf2..00000000000000 --- a/docs/data/material/components/buttons/LoadingButtons.js +++ /dev/null @@ -1,60 +0,0 @@ -import Button from '@mui/material/Button'; -import SaveIcon from '@mui/icons-material/Save'; -import Stack from '@mui/material/Stack'; - -export default function LoadingButtons() { - return ( - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/buttons/LoadingButtonsTransition.js b/docs/data/material/components/buttons/LoadingButtonsTransition.js deleted file mode 100644 index 2278b2684fe7b5..00000000000000 --- a/docs/data/material/components/buttons/LoadingButtonsTransition.js +++ /dev/null @@ -1,104 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Box from '@mui/material/Box'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; -import SaveIcon from '@mui/icons-material/Save'; -import SendIcon from '@mui/icons-material/Send'; - -export default function LoadingButtonsTransition() { - const [loading, setLoading] = React.useState(true); - function handleClick() { - setLoading(true); - } - - return ( -
    - setLoading(!loading)} - name="loading" - color="primary" - /> - } - label="Loading" - /> - button': { m: 1 } }}> - - - - - - button': { m: 1 } }}> - - - - - -
    - ); -} diff --git a/docs/data/material/components/buttons/LoadingIconButton.js b/docs/data/material/components/buttons/LoadingIconButton.js deleted file mode 100644 index 6778d7281d47d7..00000000000000 --- a/docs/data/material/components/buttons/LoadingIconButton.js +++ /dev/null @@ -1,21 +0,0 @@ -import * as React from 'react'; -import Tooltip from '@mui/material/Tooltip'; -import IconButton from '@mui/material/IconButton'; -import ShoppingCartIcon from '@mui/icons-material/ShoppingCart'; - -export default function LoadingIconButton() { - const [loading, setLoading] = React.useState(false); - React.useEffect(() => { - const timeout = setTimeout(() => { - setLoading(false); - }, 2000); - return () => clearTimeout(timeout); - }); - return ( - - setLoading(true)} loading={loading}> - - - - ); -} diff --git a/docs/data/material/components/buttons/LoadingIconButton.tsx.preview b/docs/data/material/components/buttons/LoadingIconButton.tsx.preview deleted file mode 100644 index 9c9a8b0cbf868a..00000000000000 --- a/docs/data/material/components/buttons/LoadingIconButton.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - setLoading(true)} loading={loading}> - - - \ No newline at end of file diff --git a/docs/data/material/components/buttons/OutlinedButtons.js b/docs/data/material/components/buttons/OutlinedButtons.js deleted file mode 100644 index 67cc7dc7cfca39..00000000000000 --- a/docs/data/material/components/buttons/OutlinedButtons.js +++ /dev/null @@ -1,16 +0,0 @@ -import Button from '@mui/material/Button'; -import Stack from '@mui/material/Stack'; - -export default function OutlinedButtons() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/buttons/OutlinedButtons.tsx.preview b/docs/data/material/components/buttons/OutlinedButtons.tsx.preview deleted file mode 100644 index fa5532b2840b06..00000000000000 --- a/docs/data/material/components/buttons/OutlinedButtons.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/buttons/TextButtons.js b/docs/data/material/components/buttons/TextButtons.js deleted file mode 100644 index 28e3db2b95a30d..00000000000000 --- a/docs/data/material/components/buttons/TextButtons.js +++ /dev/null @@ -1,12 +0,0 @@ -import Button from '@mui/material/Button'; -import Stack from '@mui/material/Stack'; - -export default function TextButtons() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/buttons/TextButtons.tsx.preview b/docs/data/material/components/buttons/TextButtons.tsx.preview deleted file mode 100644 index b21873401ea164..00000000000000 --- a/docs/data/material/components/buttons/TextButtons.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index fd45b56f885231..ad8da8bef86bc2 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -25,7 +25,7 @@ Buttons communicate actions that users can take. They are typically placed throu The `Button` comes with three variants: text (default), contained, and outlined. -{{"demo": "BasicButtons.js"}} +{{"component": "file://./demos/basic/index.ts"}} ### Text button @@ -33,7 +33,7 @@ The `Button` comes with three variants: text (default), contained, and outlined. are typically used for less-pronounced actions, including those located: in dialogs, in cards. In cards, text buttons help maintain an emphasis on card content. -{{"demo": "TextButtons.js"}} +{{"component": "file://./demos/text/index.ts"}} ### Contained button @@ -41,11 +41,11 @@ In cards, text buttons help maintain an emphasis on card content. are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app. -{{"demo": "ContainedButtons.js"}} +{{"component": "file://./demos/contained/index.ts"}} You can remove the elevation with the `disableElevation` prop. -{{"demo": "DisableElevation.js"}} +{{"component": "file://./demos/disable-elevation/index.ts"}} ### Outlined button @@ -55,7 +55,7 @@ They contain actions that are important but aren't the primary action in an app. Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons. -{{"demo": "OutlinedButtons.js"}} +{{"component": "file://./demos/outlined/index.ts"}} ## Handling clicks @@ -75,7 +75,7 @@ Note that the documentation [avoids](/material-ui/guides/api/#native-properties) ## Color -{{"demo": "ColorButtons.js"}} +{{"component": "file://./demos/color/index.ts"}} In addition to using the default button colors, you can add custom ones, or disable any you don't need. See the [Adding new colors](/material-ui/customization/palette/#custom-colors) examples for more info. @@ -83,13 +83,13 @@ In addition to using the default button colors, you can add custom ones, or disa For larger or smaller buttons, use the `size` prop. -{{"demo": "ButtonSizes.js"}} +{{"component": "file://./demos/sizes/index.ts"}} ## Buttons with icons and label Sometimes you might want to have icons for certain buttons to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon. -{{"demo": "IconLabelButtons.js"}} +{{"component": "file://./demos/icon-label/index.ts"}} ## Icon button @@ -98,47 +98,47 @@ Icon buttons are commonly found in app bars and toolbars. Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. -{{"demo": "IconButtons.js"}} +{{"component": "file://./demos/icon/index.ts"}} ### Sizes For larger or smaller icon buttons, use the `size` prop. -{{"demo": "IconButtonSizes.js"}} +{{"component": "file://./demos/icon-sizes/index.ts"}} ### Colors Use `color` prop to apply theme color palette to component. -{{"demo": "IconButtonColors.js"}} +{{"component": "file://./demos/icon-colors/index.ts"}} ### Loading Starting from v6.4.0, use `loading` prop to set icon buttons in a loading state and disable interactions. -{{"demo": "LoadingIconButton.js"}} +{{"component": "file://./demos/loading-icon/index.ts"}} ### Badge You can use the [`Badge`](/material-ui/react-badge/) component to add a badge to an `IconButton`. -{{"demo": "IconButtonWithBadge.js"}} +{{"component": "file://./demos/icon-with-badge/index.ts"}} ## File upload To create a file upload button, turn the button into a label using `component="label"` and then create a visually-hidden input with type `file`. -{{"demo": "InputFileUpload.js"}} +{{"component": "file://./demos/input-file-upload/index.ts"}} ## Loading Starting from v6.4.0, use the `loading` prop to set buttons in a loading state and disable interactions. -{{"demo": "LoadingButtons.js"}} +{{"component": "file://./demos/loading/index.ts"}} Toggle the loading switch to see the transition between the different states. -{{"demo": "LoadingButtonsTransition.js"}} +{{"component": "file://./demos/loading-transition/index.ts"}} :::warning When the `loading` prop is set to `boolean`, the loading wrapper is always present in the DOM to prevent a [Google Translation Crash](https://github.com/mui/material-ui/issues/27853). @@ -170,7 +170,7 @@ const CustomButton = React.forwardRef(function CustomButton(props, ref) { Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedButtons.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/customized/index.ts", "collapseToEmpty": true}} 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/button). @@ -179,7 +179,7 @@ You can learn more about this in the [overrides documentation page](/material-ui The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. You can take advantage of this lower-level component to build custom interactions. -{{"demo": "ButtonBaseDemo.js"}} +{{"component": "file://./demos/base-demo/index.ts"}} ## Third-party routing library diff --git a/docs/data/material/components/buttons/ButtonBaseDemo.tsx b/docs/data/material/components/buttons/demos/base-demo/ButtonBaseDemo.tsx similarity index 98% rename from docs/data/material/components/buttons/ButtonBaseDemo.tsx rename to docs/data/material/components/buttons/demos/base-demo/ButtonBaseDemo.tsx index 28f79fd4672e2c..a063271e9ce738 100644 --- a/docs/data/material/components/buttons/ButtonBaseDemo.tsx +++ b/docs/data/material/components/buttons/demos/base-demo/ButtonBaseDemo.tsx @@ -88,6 +88,7 @@ const ImageMarked = styled('span')(({ theme }) => ({ export default function ButtonBaseDemo() { return ( + {/* @focus-start */} {images.map((image) => ( ))} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/buttons/demos/base-demo/client.ts b/docs/data/material/components/buttons/demos/base-demo/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/base-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/base-demo/index.ts b/docs/data/material/components/buttons/demos/base-demo/index.ts new file mode 100644 index 00000000000000..a24be87fdd9f7a --- /dev/null +++ b/docs/data/material/components/buttons/demos/base-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ButtonBaseDemo from './ButtonBaseDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ButtonBaseDemo, { ClientProvider }); diff --git a/docs/data/material/components/buttons/BasicButtons.tsx b/docs/data/material/components/buttons/demos/basic/BasicButtons.tsx similarity index 86% rename from docs/data/material/components/buttons/BasicButtons.tsx rename to docs/data/material/components/buttons/demos/basic/BasicButtons.tsx index 956f6ef3b896a6..c62d2a7aa9a5ff 100644 --- a/docs/data/material/components/buttons/BasicButtons.tsx +++ b/docs/data/material/components/buttons/demos/basic/BasicButtons.tsx @@ -4,9 +4,11 @@ import Button from '@mui/material/Button'; export default function BasicButtons() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/buttons/demos/basic/client.ts b/docs/data/material/components/buttons/demos/basic/client.ts new file mode 100644 index 00000000000000..47671215a56433 --- /dev/null +++ b/docs/data/material/components/buttons/demos/basic/client.ts @@ -0,0 +1,5 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +export default createDemoClient(import.meta.url); diff --git a/docs/data/material/components/buttons/demos/basic/index.ts b/docs/data/material/components/buttons/demos/basic/index.ts new file mode 100644 index 00000000000000..5cdd43bb699e7f --- /dev/null +++ b/docs/data/material/components/buttons/demos/basic/index.ts @@ -0,0 +1,8 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; +import ClientProvider from './client'; + +import BasicButtons from './BasicButtons'; + +export default createDemo(import.meta.url, BasicButtons, { + ClientProvider, +}); diff --git a/docs/data/material/components/buttons/ColorButtons.tsx b/docs/data/material/components/buttons/demos/color/ColorButtons.tsx similarity index 88% rename from docs/data/material/components/buttons/ColorButtons.tsx rename to docs/data/material/components/buttons/demos/color/ColorButtons.tsx index f709b8cd936bad..565ed2b7123547 100644 --- a/docs/data/material/components/buttons/ColorButtons.tsx +++ b/docs/data/material/components/buttons/demos/color/ColorButtons.tsx @@ -4,6 +4,7 @@ import Button from '@mui/material/Button'; export default function ColorButtons() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/buttons/demos/color/client.ts b/docs/data/material/components/buttons/demos/color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/color/index.ts b/docs/data/material/components/buttons/demos/color/index.ts new file mode 100644 index 00000000000000..b8e31b71b10d4d --- /dev/null +++ b/docs/data/material/components/buttons/demos/color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorButtons from './ColorButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorButtons, { ClientProvider }); diff --git a/docs/data/material/components/buttons/ContainedButtons.tsx b/docs/data/material/components/buttons/demos/contained/ContainedButtons.tsx similarity index 89% rename from docs/data/material/components/buttons/ContainedButtons.tsx rename to docs/data/material/components/buttons/demos/contained/ContainedButtons.tsx index 3e1abb3601ba7c..122fc1bc6d65f2 100644 --- a/docs/data/material/components/buttons/ContainedButtons.tsx +++ b/docs/data/material/components/buttons/demos/contained/ContainedButtons.tsx @@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack'; export default function ContainedButtons() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/buttons/demos/contained/client.ts b/docs/data/material/components/buttons/demos/contained/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/contained/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/contained/index.ts b/docs/data/material/components/buttons/demos/contained/index.ts new file mode 100644 index 00000000000000..43cf9514a872f5 --- /dev/null +++ b/docs/data/material/components/buttons/demos/contained/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ContainedButtons from './ContainedButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ContainedButtons, { ClientProvider }); diff --git a/docs/data/material/components/buttons/CustomizedButtons.tsx b/docs/data/material/components/buttons/demos/customized/CustomizedButtons.tsx similarity index 90% rename from docs/data/material/components/buttons/CustomizedButtons.tsx rename to docs/data/material/components/buttons/demos/customized/CustomizedButtons.tsx index a2db743749c19d..cefdaab105b54c 100644 --- a/docs/data/material/components/buttons/CustomizedButtons.tsx +++ b/docs/data/material/components/buttons/demos/customized/CustomizedButtons.tsx @@ -1,5 +1,6 @@ import { styled } from '@mui/material/styles'; -import Button, { ButtonProps } from '@mui/material/Button'; +import Button from '@mui/material/Button'; +import type { ButtonProps } from '@mui/material/Button'; import Stack from '@mui/material/Stack'; import { purple } from '@mui/material/colors'; @@ -50,10 +51,12 @@ const ColorButton = styled(Button)(({ theme }) => ({ export default function CustomizedButtons() { return ( + {/* @focus-start */} Custom CSS Bootstrap + {/* @focus-end */} ); } diff --git a/docs/data/material/components/buttons/demos/customized/client.ts b/docs/data/material/components/buttons/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/customized/index.ts b/docs/data/material/components/buttons/demos/customized/index.ts new file mode 100644 index 00000000000000..686aa3b12cdd82 --- /dev/null +++ b/docs/data/material/components/buttons/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedButtons from './CustomizedButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedButtons, { ClientProvider }); diff --git a/docs/data/material/components/buttons/demos/disable-elevation/DisableElevation.tsx b/docs/data/material/components/buttons/demos/disable-elevation/DisableElevation.tsx new file mode 100644 index 00000000000000..2cf3b8c48f6ea1 --- /dev/null +++ b/docs/data/material/components/buttons/demos/disable-elevation/DisableElevation.tsx @@ -0,0 +1,11 @@ +import Button from '@mui/material/Button'; + +export default function DisableElevation() { + return ( + // @focus-start @padding 2 + + // @focus-end + ); +} diff --git a/docs/data/material/components/buttons/demos/disable-elevation/client.ts b/docs/data/material/components/buttons/demos/disable-elevation/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/disable-elevation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/disable-elevation/index.ts b/docs/data/material/components/buttons/demos/disable-elevation/index.ts new file mode 100644 index 00000000000000..8641f7e5dd5045 --- /dev/null +++ b/docs/data/material/components/buttons/demos/disable-elevation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DisableElevation from './DisableElevation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DisableElevation, { ClientProvider }); diff --git a/docs/data/material/components/buttons/IconButtonColors.tsx b/docs/data/material/components/buttons/demos/icon-colors/IconButtonColors.tsx similarity index 90% rename from docs/data/material/components/buttons/IconButtonColors.tsx rename to docs/data/material/components/buttons/demos/icon-colors/IconButtonColors.tsx index ed1394fc9f9524..92d66ce0af7fde 100644 --- a/docs/data/material/components/buttons/IconButtonColors.tsx +++ b/docs/data/material/components/buttons/demos/icon-colors/IconButtonColors.tsx @@ -5,12 +5,14 @@ import Fingerprint from '@mui/icons-material/Fingerprint'; export default function IconButtonColors() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/buttons/demos/icon-colors/client.ts b/docs/data/material/components/buttons/demos/icon-colors/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/icon-colors/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/icon-colors/index.ts b/docs/data/material/components/buttons/demos/icon-colors/index.ts new file mode 100644 index 00000000000000..347cd0778a9271 --- /dev/null +++ b/docs/data/material/components/buttons/demos/icon-colors/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IconButtonColors from './IconButtonColors'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IconButtonColors, { ClientProvider }); diff --git a/docs/data/material/components/buttons/IconLabelButtons.tsx b/docs/data/material/components/buttons/demos/icon-label/IconLabelButtons.tsx similarity index 90% rename from docs/data/material/components/buttons/IconLabelButtons.tsx rename to docs/data/material/components/buttons/demos/icon-label/IconLabelButtons.tsx index 4e5744367a0a47..9bc0c3ec8a4d84 100644 --- a/docs/data/material/components/buttons/IconLabelButtons.tsx +++ b/docs/data/material/components/buttons/demos/icon-label/IconLabelButtons.tsx @@ -6,12 +6,14 @@ import Stack from '@mui/material/Stack'; export default function IconLabelButtons() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/buttons/demos/icon-label/client.ts b/docs/data/material/components/buttons/demos/icon-label/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/icon-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/icon-label/index.ts b/docs/data/material/components/buttons/demos/icon-label/index.ts new file mode 100644 index 00000000000000..676e993b10e752 --- /dev/null +++ b/docs/data/material/components/buttons/demos/icon-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IconLabelButtons from './IconLabelButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IconLabelButtons, { ClientProvider }); diff --git a/docs/data/material/components/buttons/IconButtonSizes.tsx b/docs/data/material/components/buttons/demos/icon-sizes/IconButtonSizes.tsx similarity index 93% rename from docs/data/material/components/buttons/IconButtonSizes.tsx rename to docs/data/material/components/buttons/demos/icon-sizes/IconButtonSizes.tsx index bcec185eb43480..a1b9561a372bc7 100644 --- a/docs/data/material/components/buttons/IconButtonSizes.tsx +++ b/docs/data/material/components/buttons/demos/icon-sizes/IconButtonSizes.tsx @@ -5,6 +5,7 @@ import DeleteIcon from '@mui/icons-material/Delete'; export default function IconButtonSizes() { return ( + {/* @focus-start */} @@ -17,6 +18,7 @@ export default function IconButtonSizes() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/buttons/demos/icon-sizes/client.ts b/docs/data/material/components/buttons/demos/icon-sizes/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/icon-sizes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/icon-sizes/index.ts b/docs/data/material/components/buttons/demos/icon-sizes/index.ts new file mode 100644 index 00000000000000..7c55c47efb9ed8 --- /dev/null +++ b/docs/data/material/components/buttons/demos/icon-sizes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IconButtonSizes from './IconButtonSizes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IconButtonSizes, { ClientProvider }); diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.tsx b/docs/data/material/components/buttons/demos/icon-with-badge/IconButtonWithBadge.tsx similarity index 92% rename from docs/data/material/components/buttons/IconButtonWithBadge.tsx rename to docs/data/material/components/buttons/demos/icon-with-badge/IconButtonWithBadge.tsx index 90c4ed142ffab8..b0fe84bea3c831 100644 --- a/docs/data/material/components/buttons/IconButtonWithBadge.tsx +++ b/docs/data/material/components/buttons/demos/icon-with-badge/IconButtonWithBadge.tsx @@ -12,9 +12,11 @@ const CartBadge = styled(Badge)` export default function IconButtonWithBadge() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/buttons/demos/icon-with-badge/client.ts b/docs/data/material/components/buttons/demos/icon-with-badge/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/icon-with-badge/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/icon-with-badge/index.ts b/docs/data/material/components/buttons/demos/icon-with-badge/index.ts new file mode 100644 index 00000000000000..73cad16f85b4b7 --- /dev/null +++ b/docs/data/material/components/buttons/demos/icon-with-badge/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IconButtonWithBadge from './IconButtonWithBadge'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IconButtonWithBadge, { ClientProvider }); diff --git a/docs/data/material/components/buttons/IconButtons.tsx b/docs/data/material/components/buttons/demos/icon/IconButtons.tsx similarity index 93% rename from docs/data/material/components/buttons/IconButtons.tsx rename to docs/data/material/components/buttons/demos/icon/IconButtons.tsx index c99c3bfd302cd5..0455df4829d54b 100644 --- a/docs/data/material/components/buttons/IconButtons.tsx +++ b/docs/data/material/components/buttons/demos/icon/IconButtons.tsx @@ -7,6 +7,7 @@ import AddShoppingCartIcon from '@mui/icons-material/AddShoppingCart'; export default function IconButtons() { return ( + {/* @focus-start */} @@ -19,6 +20,7 @@ export default function IconButtons() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/buttons/demos/icon/client.ts b/docs/data/material/components/buttons/demos/icon/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/icon/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/icon/index.ts b/docs/data/material/components/buttons/demos/icon/index.ts new file mode 100644 index 00000000000000..0c87206a33b049 --- /dev/null +++ b/docs/data/material/components/buttons/demos/icon/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IconButtons from './IconButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IconButtons, { ClientProvider }); diff --git a/docs/data/material/components/buttons/InputFileUpload.tsx b/docs/data/material/components/buttons/demos/input-file-upload/InputFileUpload.tsx similarity index 93% rename from docs/data/material/components/buttons/InputFileUpload.tsx rename to docs/data/material/components/buttons/demos/input-file-upload/InputFileUpload.tsx index c186bc6b70ba19..04ad4a242693c8 100644 --- a/docs/data/material/components/buttons/InputFileUpload.tsx +++ b/docs/data/material/components/buttons/demos/input-file-upload/InputFileUpload.tsx @@ -16,6 +16,7 @@ const VisuallyHiddenInput = styled('input')({ export default function InputFileUpload() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/buttons/demos/input-file-upload/client.ts b/docs/data/material/components/buttons/demos/input-file-upload/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/input-file-upload/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/input-file-upload/index.ts b/docs/data/material/components/buttons/demos/input-file-upload/index.ts new file mode 100644 index 00000000000000..2f89aecbe7895a --- /dev/null +++ b/docs/data/material/components/buttons/demos/input-file-upload/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import InputFileUpload from './InputFileUpload'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, InputFileUpload, { ClientProvider }); diff --git a/docs/data/material/components/buttons/LoadingIconButton.tsx b/docs/data/material/components/buttons/demos/loading-icon/LoadingIconButton.tsx similarity index 92% rename from docs/data/material/components/buttons/LoadingIconButton.tsx rename to docs/data/material/components/buttons/demos/loading-icon/LoadingIconButton.tsx index 6778d7281d47d7..bd11127aa44594 100644 --- a/docs/data/material/components/buttons/LoadingIconButton.tsx +++ b/docs/data/material/components/buttons/demos/loading-icon/LoadingIconButton.tsx @@ -12,10 +12,12 @@ export default function LoadingIconButton() { return () => clearTimeout(timeout); }); return ( + // @focus-start @padding 2 setLoading(true)} loading={loading}> + // @focus-end ); } diff --git a/docs/data/material/components/buttons/demos/loading-icon/client.ts b/docs/data/material/components/buttons/demos/loading-icon/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/loading-icon/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/loading-icon/index.ts b/docs/data/material/components/buttons/demos/loading-icon/index.ts new file mode 100644 index 00000000000000..0cfa7ce83cba7f --- /dev/null +++ b/docs/data/material/components/buttons/demos/loading-icon/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LoadingIconButton from './LoadingIconButton'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LoadingIconButton, { ClientProvider }); diff --git a/docs/data/material/components/buttons/LoadingButtonsTransition.tsx b/docs/data/material/components/buttons/demos/loading-transition/LoadingButtonsTransition.tsx similarity index 98% rename from docs/data/material/components/buttons/LoadingButtonsTransition.tsx rename to docs/data/material/components/buttons/demos/loading-transition/LoadingButtonsTransition.tsx index 2278b2684fe7b5..de772d83bef0f4 100644 --- a/docs/data/material/components/buttons/LoadingButtonsTransition.tsx +++ b/docs/data/material/components/buttons/demos/loading-transition/LoadingButtonsTransition.tsx @@ -7,6 +7,7 @@ import SaveIcon from '@mui/icons-material/Save'; import SendIcon from '@mui/icons-material/Send'; export default function LoadingButtonsTransition() { + // @focus-start @padding 1 const [loading, setLoading] = React.useState(true); function handleClick() { setLoading(true); @@ -101,4 +102,5 @@ export default function LoadingButtonsTransition() {
    ); + // @focus-end } diff --git a/docs/data/material/components/buttons/demos/loading-transition/client.ts b/docs/data/material/components/buttons/demos/loading-transition/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/loading-transition/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/loading-transition/index.ts b/docs/data/material/components/buttons/demos/loading-transition/index.ts new file mode 100644 index 00000000000000..b7a2c390e4e0a0 --- /dev/null +++ b/docs/data/material/components/buttons/demos/loading-transition/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LoadingButtonsTransition from './LoadingButtonsTransition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LoadingButtonsTransition, { ClientProvider }); diff --git a/docs/data/material/components/buttons/LoadingButtons.tsx b/docs/data/material/components/buttons/demos/loading/LoadingButtons.tsx similarity index 96% rename from docs/data/material/components/buttons/LoadingButtons.tsx rename to docs/data/material/components/buttons/demos/loading/LoadingButtons.tsx index 62cc284949adf2..facd5e0c4f2b18 100644 --- a/docs/data/material/components/buttons/LoadingButtons.tsx +++ b/docs/data/material/components/buttons/demos/loading/LoadingButtons.tsx @@ -5,6 +5,7 @@ import Stack from '@mui/material/Stack'; export default function LoadingButtons() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/buttons/demos/loading/client.ts b/docs/data/material/components/buttons/demos/loading/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/loading/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/loading/index.ts b/docs/data/material/components/buttons/demos/loading/index.ts new file mode 100644 index 00000000000000..0881e291a84cb3 --- /dev/null +++ b/docs/data/material/components/buttons/demos/loading/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LoadingButtons from './LoadingButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LoadingButtons, { ClientProvider }); diff --git a/docs/data/material/components/buttons/OutlinedButtons.tsx b/docs/data/material/components/buttons/demos/outlined/OutlinedButtons.tsx similarity index 88% rename from docs/data/material/components/buttons/OutlinedButtons.tsx rename to docs/data/material/components/buttons/demos/outlined/OutlinedButtons.tsx index 67cc7dc7cfca39..2d488c70e48b60 100644 --- a/docs/data/material/components/buttons/OutlinedButtons.tsx +++ b/docs/data/material/components/buttons/demos/outlined/OutlinedButtons.tsx @@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack'; export default function OutlinedButtons() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/buttons/demos/outlined/client.ts b/docs/data/material/components/buttons/demos/outlined/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/outlined/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/outlined/index.ts b/docs/data/material/components/buttons/demos/outlined/index.ts new file mode 100644 index 00000000000000..d6ba93786f65db --- /dev/null +++ b/docs/data/material/components/buttons/demos/outlined/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import OutlinedButtons from './OutlinedButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, OutlinedButtons, { ClientProvider }); diff --git a/docs/data/material/components/buttons/ButtonSizes.tsx b/docs/data/material/components/buttons/demos/sizes/ButtonSizes.tsx similarity index 94% rename from docs/data/material/components/buttons/ButtonSizes.tsx rename to docs/data/material/components/buttons/demos/sizes/ButtonSizes.tsx index bba86158356837..21a4632b14ac33 100644 --- a/docs/data/material/components/buttons/ButtonSizes.tsx +++ b/docs/data/material/components/buttons/demos/sizes/ButtonSizes.tsx @@ -4,6 +4,7 @@ import Button from '@mui/material/Button'; export default function ButtonSizes() { return ( + {/* @focus-start */}
    @@ -31,6 +32,7 @@ export default function ButtonSizes() { Large
    + {/* @focus-end */}     ); } diff --git a/docs/data/material/components/buttons/demos/sizes/client.ts b/docs/data/material/components/buttons/demos/sizes/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/sizes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/sizes/index.ts b/docs/data/material/components/buttons/demos/sizes/index.ts new file mode 100644 index 00000000000000..57fd91a09ebcb4 --- /dev/null +++ b/docs/data/material/components/buttons/demos/sizes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ButtonSizes from './ButtonSizes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ButtonSizes, { ClientProvider }); diff --git a/docs/data/material/components/buttons/TextButtons.tsx b/docs/data/material/components/buttons/demos/text/TextButtons.tsx similarity index 85% rename from docs/data/material/components/buttons/TextButtons.tsx rename to docs/data/material/components/buttons/demos/text/TextButtons.tsx index 28e3db2b95a30d..86bb7665616034 100644 --- a/docs/data/material/components/buttons/TextButtons.tsx +++ b/docs/data/material/components/buttons/demos/text/TextButtons.tsx @@ -4,9 +4,11 @@ import Stack from '@mui/material/Stack'; export default function TextButtons() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/buttons/demos/text/client.ts b/docs/data/material/components/buttons/demos/text/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/buttons/demos/text/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/buttons/demos/text/index.ts b/docs/data/material/components/buttons/demos/text/index.ts new file mode 100644 index 00000000000000..b973693d616a96 --- /dev/null +++ b/docs/data/material/components/buttons/demos/text/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TextButtons from './TextButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TextButtons, { ClientProvider }); diff --git a/docs/data/material/components/cards/ActionAreaCard.js b/docs/data/material/components/cards/ActionAreaCard.js deleted file mode 100644 index 8f7377b910d0bb..00000000000000 --- a/docs/data/material/components/cards/ActionAreaCard.js +++ /dev/null @@ -1,29 +0,0 @@ -import Card from '@mui/material/Card'; -import CardContent from '@mui/material/CardContent'; -import CardMedia from '@mui/material/CardMedia'; -import Typography from '@mui/material/Typography'; -import CardActionArea from '@mui/material/CardActionArea'; - -export default function ActionAreaCard() { - return ( - - - - - - Lizard - - - Lizards are a widespread group of squamate reptiles, with over 6,000 - species, ranging across all continents except Antarctica - - - - - ); -} diff --git a/docs/data/material/components/cards/BasicCard.js b/docs/data/material/components/cards/BasicCard.js deleted file mode 100644 index 91cc81c7ace6a1..00000000000000 --- a/docs/data/material/components/cards/BasicCard.js +++ /dev/null @@ -1,39 +0,0 @@ -import Box from '@mui/material/Box'; -import Card from '@mui/material/Card'; -import CardActions from '@mui/material/CardActions'; -import CardContent from '@mui/material/CardContent'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; - -const bull = ( - - • - -); - -export default function BasicCard() { - return ( - - - - Word of the Day - - - be{bull}nev{bull}o{bull}lent - - adjective - - well meaning and kindly. -
    - {'"a benevolent smile"'} -     -     - - - -     - ); -} diff --git a/docs/data/material/components/cards/ImgMediaCard.js b/docs/data/material/components/cards/ImgMediaCard.js deleted file mode 100644 index eb95dd26f6c228..00000000000000 --- a/docs/data/material/components/cards/ImgMediaCard.js +++ /dev/null @@ -1,32 +0,0 @@ -import Card from '@mui/material/Card'; -import CardActions from '@mui/material/CardActions'; -import CardContent from '@mui/material/CardContent'; -import CardMedia from '@mui/material/CardMedia'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; - -export default function ImgMediaCard() { - return ( - - - - - Lizard - - - Lizards are a widespread group of squamate reptiles, with over 6,000 - species, ranging across all continents except Antarctica - - - - - - - - ); -} diff --git a/docs/data/material/components/cards/MediaCard.js b/docs/data/material/components/cards/MediaCard.js deleted file mode 100644 index 44d2ffe6a805cf..00000000000000 --- a/docs/data/material/components/cards/MediaCard.js +++ /dev/null @@ -1,31 +0,0 @@ -import Card from '@mui/material/Card'; -import CardActions from '@mui/material/CardActions'; -import CardContent from '@mui/material/CardContent'; -import CardMedia from '@mui/material/CardMedia'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; - -export default function MediaCard() { - return ( - - - - - Lizard - - - Lizards are a widespread group of squamate reptiles, with over 6,000 - species, ranging across all continents except Antarctica - - - - - - - - ); -} diff --git a/docs/data/material/components/cards/MediaControlCard.js b/docs/data/material/components/cards/MediaControlCard.js deleted file mode 100644 index 1c24b9a6f2ba10..00000000000000 --- a/docs/data/material/components/cards/MediaControlCard.js +++ /dev/null @@ -1,50 +0,0 @@ -import { useTheme } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Card from '@mui/material/Card'; -import CardContent from '@mui/material/CardContent'; -import CardMedia from '@mui/material/CardMedia'; -import IconButton from '@mui/material/IconButton'; -import Typography from '@mui/material/Typography'; -import SkipPreviousIcon from '@mui/icons-material/SkipPrevious'; -import PlayArrowIcon from '@mui/icons-material/PlayArrow'; -import SkipNextIcon from '@mui/icons-material/SkipNext'; - -export default function MediaControlCard() { - const theme = useTheme(); - - return ( - - - - - Live From Space - - - Mac Miller - - - - - {theme.direction === 'rtl' ? : } - - - - - - {theme.direction === 'rtl' ? : } - - - - - - ); -} diff --git a/docs/data/material/components/cards/MultiActionAreaCard.js b/docs/data/material/components/cards/MultiActionAreaCard.js deleted file mode 100644 index a88a5810dd363a..00000000000000 --- a/docs/data/material/components/cards/MultiActionAreaCard.js +++ /dev/null @@ -1,36 +0,0 @@ -import Card from '@mui/material/Card'; -import CardContent from '@mui/material/CardContent'; -import CardMedia from '@mui/material/CardMedia'; -import Typography from '@mui/material/Typography'; -import Button from '@mui/material/Button'; -import CardActionArea from '@mui/material/CardActionArea'; -import CardActions from '@mui/material/CardActions'; - -export default function MultiActionAreaCard() { - return ( - - - - - - Lizard - - - Lizards are a widespread group of squamate reptiles, with over 6,000 - species, ranging across all continents except Antarctica - - - - - - - - ); -} diff --git a/docs/data/material/components/cards/OutlinedCard.js b/docs/data/material/components/cards/OutlinedCard.js deleted file mode 100644 index fb5798a01655c9..00000000000000 --- a/docs/data/material/components/cards/OutlinedCard.js +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Card from '@mui/material/Card'; -import CardActions from '@mui/material/CardActions'; -import CardContent from '@mui/material/CardContent'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; - -const bull = ( - - • - -); - -const card = ( - - - - Word of the Day - - - be{bull}nev{bull}o{bull}lent - - adjective - - well meaning and kindly. -
    - {'"a benevolent smile"'} -     -     - - - -     -); - -export default function OutlinedCard() { - return ( - - {card} - - ); -} diff --git a/docs/data/material/components/cards/OutlinedCard.tsx.preview b/docs/data/material/components/cards/OutlinedCard.tsx.preview deleted file mode 100644 index 4ca425a10c88cf..00000000000000 --- a/docs/data/material/components/cards/OutlinedCard.tsx.preview +++ /dev/null @@ -1 +0,0 @@ -{card} \ No newline at end of file diff --git a/docs/data/material/components/cards/RecipeReviewCard.js b/docs/data/material/components/cards/RecipeReviewCard.js deleted file mode 100644 index 55f440144ee7a0..00000000000000 --- a/docs/data/material/components/cards/RecipeReviewCard.js +++ /dev/null @@ -1,125 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import Card from '@mui/material/Card'; -import CardHeader from '@mui/material/CardHeader'; -import CardMedia from '@mui/material/CardMedia'; -import CardContent from '@mui/material/CardContent'; -import CardActions from '@mui/material/CardActions'; -import Collapse from '@mui/material/Collapse'; -import Avatar from '@mui/material/Avatar'; -import IconButton from '@mui/material/IconButton'; -import Typography from '@mui/material/Typography'; -import { red } from '@mui/material/colors'; -import FavoriteIcon from '@mui/icons-material/Favorite'; -import ShareIcon from '@mui/icons-material/Share'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import MoreVertIcon from '@mui/icons-material/MoreVert'; - -const ExpandMore = styled((props) => { - const { expand, ...other } = props; - return ; -})(({ theme }) => ({ - marginLeft: 'auto', - transition: theme.transitions.create('transform', { - duration: theme.transitions.duration.shortest, - }), - variants: [ - { - props: ({ expand }) => !expand, - style: { - transform: 'rotate(0deg)', - }, - }, - { - props: ({ expand }) => !!expand, - style: { - transform: 'rotate(180deg)', - }, - }, - ], -})); - -export default function RecipeReviewCard() { - const [expanded, setExpanded] = React.useState(false); - - const handleExpandClick = () => { - setExpanded(!expanded); - }; - - return ( - - - R - - } - action={ - - - - } - title="Shrimp and Chorizo Paella" - subheader="September 14, 2016" - /> - - - - This impressive paella is a perfect party dish and a fun meal to cook - together with your guests. Add 1 cup of frozen peas along with the mussels, - if you like. - - - - - - - - - - - - - - - - Method: - - Heat 1/2 cup of the broth in a pot until simmering, add saffron and set - aside for 10 minutes. - - - Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over - medium-high heat. Add chicken, shrimp and chorizo, and cook, stirring - occasionally until lightly browned, 6 to 8 minutes. Transfer shrimp to a - large plate and set aside, leaving chicken and chorizo in the pan. Add - pimentón, bay leaves, garlic, tomatoes, onion, salt and pepper, and cook, - stirring often until thickened and fragrant, about 10 minutes. Add - saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil. - - - Add rice and stir very gently to distribute. Top with artichokes and - peppers, and cook without stirring, until most of the liquid is absorbed, - 15 to 18 minutes. Reduce heat to medium-low, add reserved shrimp and - mussels, tucking them down into the rice, and cook again without - stirring, until mussels have opened and rice is just tender, 5 to 7 - minutes more. (Discard any mussels that don't open.) - - - Set aside off of the heat to let rest for 10 minutes, and then serve. - - - - - ); -} diff --git a/docs/data/material/components/cards/SelectActionCard.js b/docs/data/material/components/cards/SelectActionCard.js deleted file mode 100644 index 7affd816ee9482..00000000000000 --- a/docs/data/material/components/cards/SelectActionCard.js +++ /dev/null @@ -1,67 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Card from '@mui/material/Card'; -import CardContent from '@mui/material/CardContent'; -import Typography from '@mui/material/Typography'; -import CardActionArea from '@mui/material/CardActionArea'; - -const cards = [ - { - id: 1, - title: 'Plants', - description: 'Plants are essential for all life.', - }, - { - id: 2, - title: 'Animals', - description: 'Animals are a part of nature.', - }, - { - id: 3, - title: 'Humans', - description: 'Humans depend on plants and animals for survival.', - }, -]; - -function SelectActionCard() { - const [selectedCard, setSelectedCard] = React.useState(0); - return ( - - {cards.map((card, index) => ( - - setSelectedCard(index)} - data-active={selectedCard === index ? '' : undefined} - sx={{ - height: '100%', - '&[data-active]': { - backgroundColor: 'action.selected', - '&:hover': { - backgroundColor: 'action.selectedHover', - }, - }, - }} - > - - - {card.title} - - - {card.description} - - - - - ))} - - ); -} - -export default SelectActionCard; diff --git a/docs/data/material/components/cards/cards.md b/docs/data/material/components/cards/cards.md index c843f78ff4c916..4a80470999e5aa 100644 --- a/docs/data/material/components/cards/cards.md +++ b/docs/data/material/components/cards/cards.md @@ -25,7 +25,7 @@ The Material UI Card component includes several complementary utility component - Card Actions: an optional wrapper that groups a set of buttons. - Card Action Area: an optional wrapper that allows users to interact with the specified area of the Card. -{{"demo": "BasicCard.js", "bg": true}} +{{"component": "file://./demos/basic/index.ts", "bg": true}} ## Basics @@ -42,33 +42,33 @@ Although cards can support multiple actions, UI controls, and an overflow menu, Set `variant="outlined"` to render an outlined card. -{{"demo": "OutlinedCard.js", "bg": true}} +{{"component": "file://./demos/outlined/index.ts", "bg": true}} ## Complex Interaction On desktop, card content can expand. (Click the downward chevron to view the recipe.) -{{"demo": "RecipeReviewCard.js", "bg": true}} +{{"component": "file://./demos/recipe-review/index.ts", "bg": true}} ## Media Example of a card using an image to reinforce the content. -{{"demo": "MediaCard.js", "bg": true}} +{{"component": "file://./demos/media/index.ts", "bg": true}} By default, we use the combination of a `
    ` element and a _background image_ to display the media. It can be problematic in some situations, for example, you might want to display a video or a responsive image. Use the `component` prop for these use cases: -{{"demo": "ImgMediaCard.js", "bg": true}} +{{"component": "file://./demos/img-media/index.ts", "bg": true}} ## Primary action Often a card allow users to interact with the entirety of its surface to trigger its main action, be it an expansion, a link to another screen or some other behavior. The action area of the card can be specified by wrapping its contents in a `CardActionArea` component. -{{"demo": "ActionAreaCard.js", "bg": true}} +{{"component": "file://./demos/action-area/index.ts", "bg": true}} A card can also offer supplemental actions which should stand detached from the main action area in order to avoid event overlap. -{{"demo": "MultiActionAreaCard.js", "bg": true}} +{{"component": "file://./demos/multi-action-area/index.ts", "bg": true}} ## UI Controls @@ -76,12 +76,12 @@ Supplemental actions within the card are explicitly called out using icons, text Here's an example of a media control card. -{{"demo": "MediaControlCard.js", "bg": true}} +{{"component": "file://./demos/media-control/index.ts", "bg": true}} ## Active state styles To customize a Card's styles when it's in an active state, you can attach a `data-active` attribute to the Card Action Area component and apply styles with the `&[data-active]` selector, as shown below: -{{"demo": "SelectActionCard.js", "bg": true}} +{{"component": "file://./demos/select-action/index.ts", "bg": true}} 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/card). diff --git a/docs/data/material/components/cards/ActionAreaCard.tsx b/docs/data/material/components/cards/demos/action-area/ActionAreaCard.tsx similarity index 95% rename from docs/data/material/components/cards/ActionAreaCard.tsx rename to docs/data/material/components/cards/demos/action-area/ActionAreaCard.tsx index 8f7377b910d0bb..6de64a1276c559 100644 --- a/docs/data/material/components/cards/ActionAreaCard.tsx +++ b/docs/data/material/components/cards/demos/action-area/ActionAreaCard.tsx @@ -6,6 +6,7 @@ import CardActionArea from '@mui/material/CardActionArea'; export default function ActionAreaCard() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/cards/demos/action-area/client.ts b/docs/data/material/components/cards/demos/action-area/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/cards/demos/action-area/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/cards/demos/action-area/index.ts b/docs/data/material/components/cards/demos/action-area/index.ts new file mode 100644 index 00000000000000..f9e7298ea90679 --- /dev/null +++ b/docs/data/material/components/cards/demos/action-area/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ActionAreaCard from './ActionAreaCard'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ActionAreaCard, { ClientProvider }); diff --git a/docs/data/material/components/cards/BasicCard.tsx b/docs/data/material/components/cards/demos/basic/BasicCard.tsx similarity index 95% rename from docs/data/material/components/cards/BasicCard.tsx rename to docs/data/material/components/cards/demos/basic/BasicCard.tsx index 91cc81c7ace6a1..ee6d758a241a1f 100644 --- a/docs/data/material/components/cards/BasicCard.tsx +++ b/docs/data/material/components/cards/demos/basic/BasicCard.tsx @@ -16,6 +16,7 @@ const bull = ( export default function BasicCard() { return ( + // @focus-start @padding 2 @@ -35,5 +36,6 @@ export default function BasicCard() { + // @focus-end ); } diff --git a/docs/data/material/components/cards/demos/basic/client.ts b/docs/data/material/components/cards/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/cards/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/cards/demos/basic/index.ts b/docs/data/material/components/cards/demos/basic/index.ts new file mode 100644 index 00000000000000..1320945eaea257 --- /dev/null +++ b/docs/data/material/components/cards/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicCard from './BasicCard'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicCard, { ClientProvider }); diff --git a/docs/data/material/components/cards/ImgMediaCard.tsx b/docs/data/material/components/cards/demos/img-media/ImgMediaCard.tsx similarity index 95% rename from docs/data/material/components/cards/ImgMediaCard.tsx rename to docs/data/material/components/cards/demos/img-media/ImgMediaCard.tsx index eb95dd26f6c228..630a7bfd8fe377 100644 --- a/docs/data/material/components/cards/ImgMediaCard.tsx +++ b/docs/data/material/components/cards/demos/img-media/ImgMediaCard.tsx @@ -7,6 +7,7 @@ import Typography from '@mui/material/Typography'; export default function ImgMediaCard() { return ( + // @focus-start @padding 2 Learn More + // @focus-end ); } diff --git a/docs/data/material/components/cards/demos/img-media/client.ts b/docs/data/material/components/cards/demos/img-media/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/cards/demos/img-media/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/cards/demos/img-media/index.ts b/docs/data/material/components/cards/demos/img-media/index.ts new file mode 100644 index 00000000000000..f25098501b1a2d --- /dev/null +++ b/docs/data/material/components/cards/demos/img-media/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ImgMediaCard from './ImgMediaCard'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ImgMediaCard, { ClientProvider }); diff --git a/docs/data/material/components/cards/MediaControlCard.tsx b/docs/data/material/components/cards/demos/media-control/MediaControlCard.tsx similarity index 97% rename from docs/data/material/components/cards/MediaControlCard.tsx rename to docs/data/material/components/cards/demos/media-control/MediaControlCard.tsx index 1c24b9a6f2ba10..aca2b1db49db81 100644 --- a/docs/data/material/components/cards/MediaControlCard.tsx +++ b/docs/data/material/components/cards/demos/media-control/MediaControlCard.tsx @@ -10,6 +10,7 @@ import PlayArrowIcon from '@mui/icons-material/PlayArrow'; import SkipNextIcon from '@mui/icons-material/SkipNext'; export default function MediaControlCard() { + // @focus-start @padding 1 const theme = useTheme(); return ( @@ -47,4 +48,5 @@ export default function MediaControlCard() { /> ); + // @focus-end } diff --git a/docs/data/material/components/cards/demos/media-control/client.ts b/docs/data/material/components/cards/demos/media-control/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/cards/demos/media-control/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/cards/demos/media-control/index.ts b/docs/data/material/components/cards/demos/media-control/index.ts new file mode 100644 index 00000000000000..8eef6f9a65b035 --- /dev/null +++ b/docs/data/material/components/cards/demos/media-control/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MediaControlCard from './MediaControlCard'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MediaControlCard, { ClientProvider }); diff --git a/docs/data/material/components/cards/MediaCard.tsx b/docs/data/material/components/cards/demos/media/MediaCard.tsx similarity index 95% rename from docs/data/material/components/cards/MediaCard.tsx rename to docs/data/material/components/cards/demos/media/MediaCard.tsx index 44d2ffe6a805cf..969b314c89a7a8 100644 --- a/docs/data/material/components/cards/MediaCard.tsx +++ b/docs/data/material/components/cards/demos/media/MediaCard.tsx @@ -7,6 +7,7 @@ import Typography from '@mui/material/Typography'; export default function MediaCard() { return ( + // @focus-start @padding 2 Learn More + // @focus-end ); } diff --git a/docs/data/material/components/cards/demos/media/client.ts b/docs/data/material/components/cards/demos/media/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/cards/demos/media/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/cards/demos/media/index.ts b/docs/data/material/components/cards/demos/media/index.ts new file mode 100644 index 00000000000000..c453fc229f1963 --- /dev/null +++ b/docs/data/material/components/cards/demos/media/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MediaCard from './MediaCard'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MediaCard, { ClientProvider }); diff --git a/docs/data/material/components/cards/MultiActionAreaCard.tsx b/docs/data/material/components/cards/demos/multi-action-area/MultiActionAreaCard.tsx similarity index 96% rename from docs/data/material/components/cards/MultiActionAreaCard.tsx rename to docs/data/material/components/cards/demos/multi-action-area/MultiActionAreaCard.tsx index a88a5810dd363a..dbc66ddbaba041 100644 --- a/docs/data/material/components/cards/MultiActionAreaCard.tsx +++ b/docs/data/material/components/cards/demos/multi-action-area/MultiActionAreaCard.tsx @@ -8,6 +8,7 @@ import CardActions from '@mui/material/CardActions'; export default function MultiActionAreaCard() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/cards/demos/multi-action-area/client.ts b/docs/data/material/components/cards/demos/multi-action-area/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/cards/demos/multi-action-area/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/cards/demos/multi-action-area/index.ts b/docs/data/material/components/cards/demos/multi-action-area/index.ts new file mode 100644 index 00000000000000..8d4e6c10228fcf --- /dev/null +++ b/docs/data/material/components/cards/demos/multi-action-area/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MultiActionAreaCard from './MultiActionAreaCard'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MultiActionAreaCard, { ClientProvider }); diff --git a/docs/data/material/components/cards/OutlinedCard.tsx b/docs/data/material/components/cards/demos/outlined/OutlinedCard.tsx similarity index 95% rename from docs/data/material/components/cards/OutlinedCard.tsx rename to docs/data/material/components/cards/demos/outlined/OutlinedCard.tsx index fb5798a01655c9..8e83b195553acd 100644 --- a/docs/data/material/components/cards/OutlinedCard.tsx +++ b/docs/data/material/components/cards/demos/outlined/OutlinedCard.tsx @@ -40,7 +40,9 @@ const card = ( export default function OutlinedCard() { return ( + {/* @focus-start */} {card} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/cards/demos/outlined/client.ts b/docs/data/material/components/cards/demos/outlined/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/cards/demos/outlined/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/cards/demos/outlined/index.ts b/docs/data/material/components/cards/demos/outlined/index.ts new file mode 100644 index 00000000000000..4c47bbfe80b965 --- /dev/null +++ b/docs/data/material/components/cards/demos/outlined/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import OutlinedCard from './OutlinedCard'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, OutlinedCard, { ClientProvider }); diff --git a/docs/data/material/components/cards/RecipeReviewCard.tsx b/docs/data/material/components/cards/demos/recipe-review/RecipeReviewCard.tsx similarity index 96% rename from docs/data/material/components/cards/RecipeReviewCard.tsx rename to docs/data/material/components/cards/demos/recipe-review/RecipeReviewCard.tsx index 155ce4a2f94ad7..c82f13c44fd357 100644 --- a/docs/data/material/components/cards/RecipeReviewCard.tsx +++ b/docs/data/material/components/cards/demos/recipe-review/RecipeReviewCard.tsx @@ -7,7 +7,8 @@ import CardContent from '@mui/material/CardContent'; import CardActions from '@mui/material/CardActions'; import Collapse from '@mui/material/Collapse'; import Avatar from '@mui/material/Avatar'; -import IconButton, { IconButtonProps } from '@mui/material/IconButton'; +import IconButton from '@mui/material/IconButton'; +import type { IconButtonProps } from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import { red } from '@mui/material/colors'; import FavoriteIcon from '@mui/icons-material/Favorite'; @@ -44,6 +45,7 @@ const ExpandMore = styled((props: ExpandMoreProps) => { })); export default function RecipeReviewCard() { + // @focus-start @padding 1 const [expanded, setExpanded] = React.useState(false); const handleExpandClick = () => { @@ -126,4 +128,5 @@ export default function RecipeReviewCard() { ); + // @focus-end } diff --git a/docs/data/material/components/cards/demos/recipe-review/client.ts b/docs/data/material/components/cards/demos/recipe-review/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/cards/demos/recipe-review/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/cards/demos/recipe-review/index.ts b/docs/data/material/components/cards/demos/recipe-review/index.ts new file mode 100644 index 00000000000000..c326e4135061ec --- /dev/null +++ b/docs/data/material/components/cards/demos/recipe-review/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RecipeReviewCard from './RecipeReviewCard'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RecipeReviewCard, { ClientProvider }); diff --git a/docs/data/material/components/cards/SelectActionCard.tsx b/docs/data/material/components/cards/demos/select-action/SelectActionCard.tsx similarity index 100% rename from docs/data/material/components/cards/SelectActionCard.tsx rename to docs/data/material/components/cards/demos/select-action/SelectActionCard.tsx diff --git a/docs/data/material/components/cards/demos/select-action/client.ts b/docs/data/material/components/cards/demos/select-action/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/cards/demos/select-action/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/cards/demos/select-action/index.ts b/docs/data/material/components/cards/demos/select-action/index.ts new file mode 100644 index 00000000000000..099cdd4f6d4a06 --- /dev/null +++ b/docs/data/material/components/cards/demos/select-action/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SelectActionCard from './SelectActionCard'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SelectActionCard, { ClientProvider }); diff --git a/docs/data/material/components/checkboxes/CheckboxLabels.js b/docs/data/material/components/checkboxes/CheckboxLabels.js deleted file mode 100644 index a21a3d1ab7e9a3..00000000000000 --- a/docs/data/material/components/checkboxes/CheckboxLabels.js +++ /dev/null @@ -1,13 +0,0 @@ -import FormGroup from '@mui/material/FormGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Checkbox from '@mui/material/Checkbox'; - -export default function CheckboxLabels() { - return ( - - } label="Label" /> - } label="Required" /> - } label="Disabled" /> - - ); -} diff --git a/docs/data/material/components/checkboxes/CheckboxLabels.tsx.preview b/docs/data/material/components/checkboxes/CheckboxLabels.tsx.preview deleted file mode 100644 index e64bb06b581301..00000000000000 --- a/docs/data/material/components/checkboxes/CheckboxLabels.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - } label="Label" /> - } label="Required" /> - } label="Disabled" /> - \ No newline at end of file diff --git a/docs/data/material/components/checkboxes/Checkboxes.js b/docs/data/material/components/checkboxes/Checkboxes.js deleted file mode 100644 index 358730db06c516..00000000000000 --- a/docs/data/material/components/checkboxes/Checkboxes.js +++ /dev/null @@ -1,14 +0,0 @@ -import Checkbox from '@mui/material/Checkbox'; - -const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } }; - -export default function Checkboxes() { - return ( -
    - - - - -
    - ); -} diff --git a/docs/data/material/components/checkboxes/Checkboxes.tsx.preview b/docs/data/material/components/checkboxes/Checkboxes.tsx.preview deleted file mode 100644 index f18a2a018915b8..00000000000000 --- a/docs/data/material/components/checkboxes/Checkboxes.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/material/components/checkboxes/CheckboxesGroup.js b/docs/data/material/components/checkboxes/CheckboxesGroup.js deleted file mode 100644 index 6c4b220ae09480..00000000000000 --- a/docs/data/material/components/checkboxes/CheckboxesGroup.js +++ /dev/null @@ -1,85 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import FormLabel from '@mui/material/FormLabel'; -import FormControl from '@mui/material/FormControl'; -import FormGroup from '@mui/material/FormGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormHelperText from '@mui/material/FormHelperText'; -import Checkbox from '@mui/material/Checkbox'; - -export default function CheckboxesGroup() { - const [state, setState] = React.useState({ - gilad: true, - jason: false, - antoine: false, - }); - - const handleChange = (event) => { - setState({ - ...state, - [event.target.name]: event.target.checked, - }); - }; - - const { gilad, jason, antoine } = state; - const error = [gilad, jason, antoine].filter((v) => v).length !== 2; - - return ( - - - Assign responsibility - - - } - label="Gilad Gray" - /> - - } - label="Jason Killian" - /> - - } - label="Antoine Llorca" - /> - - Be careful - - - Pick two - - - } - label="Gilad Gray" - /> - - } - label="Jason Killian" - /> - - } - label="Antoine Llorca" - /> - - You can display an error - - - ); -} diff --git a/docs/data/material/components/checkboxes/ColorCheckboxes.js b/docs/data/material/components/checkboxes/ColorCheckboxes.js deleted file mode 100644 index 7b312736d1bc75..00000000000000 --- a/docs/data/material/components/checkboxes/ColorCheckboxes.js +++ /dev/null @@ -1,25 +0,0 @@ -import { pink } from '@mui/material/colors'; -import Checkbox from '@mui/material/Checkbox'; - -const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } }; - -export default function ColorCheckboxes() { - return ( -
    - - - - - -
    - ); -} diff --git a/docs/data/material/components/checkboxes/ColorCheckboxes.tsx.preview b/docs/data/material/components/checkboxes/ColorCheckboxes.tsx.preview deleted file mode 100644 index c8847ddeb726bb..00000000000000 --- a/docs/data/material/components/checkboxes/ColorCheckboxes.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/checkboxes/ControlledCheckbox.js b/docs/data/material/components/checkboxes/ControlledCheckbox.js deleted file mode 100644 index b05c03ad39f572..00000000000000 --- a/docs/data/material/components/checkboxes/ControlledCheckbox.js +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react'; -import Checkbox from '@mui/material/Checkbox'; - -export default function ControlledCheckbox() { - const [checked, setChecked] = React.useState(true); - - const handleChange = (event) => { - setChecked(event.target.checked); - }; - - return ( - - ); -} diff --git a/docs/data/material/components/checkboxes/ControlledCheckbox.tsx.preview b/docs/data/material/components/checkboxes/ControlledCheckbox.tsx.preview deleted file mode 100644 index 5119829a1bce91..00000000000000 --- a/docs/data/material/components/checkboxes/ControlledCheckbox.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/checkboxes/CustomizedCheckbox.js b/docs/data/material/components/checkboxes/CustomizedCheckbox.js deleted file mode 100644 index c811b9ade9ff50..00000000000000 --- a/docs/data/material/components/checkboxes/CustomizedCheckbox.js +++ /dev/null @@ -1,76 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Checkbox from '@mui/material/Checkbox'; - -const BpIcon = styled('span')(({ theme }) => ({ - borderRadius: 3, - width: 16, - height: 16, - boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', - backgroundColor: '#f5f8fa', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', - '.Mui-focusVisible &': { - outline: '2px auto rgba(19,124,189,.6)', - outlineOffset: 2, - }, - 'input:hover ~ &': { - backgroundColor: '#ebf1f5', - ...theme.applyStyles('dark', { - backgroundColor: '#30404d', - }), - }, - 'input:disabled ~ &': { - boxShadow: 'none', - background: 'rgba(206,217,224,.5)', - ...theme.applyStyles('dark', { - background: 'rgba(57,75,89,.5)', - }), - }, - ...theme.applyStyles('dark', { - boxShadow: '0 0 0 1px rgb(16 22 26 / 40%)', - backgroundColor: '#394b59', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))', - }), -})); - -const BpCheckedIcon = styled(BpIcon)({ - backgroundColor: '#137cbd', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', - '&::before': { - display: 'block', - width: 16, - height: 16, - backgroundImage: - "url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" + - " fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " + - "1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")", - content: '""', - }, - 'input:hover ~ &': { - backgroundColor: '#106ba3', - }, -}); - -// Inspired by blueprintjs -function BpCheckbox(props) { - return ( - } - icon={} - slotProps={{ input: { 'aria-label': 'Checkbox demo' } }} - {...props} - /> - ); -} - -export default function CustomizedCheckbox() { - return ( -
    - - - -
    - ); -} diff --git a/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx.preview b/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx.preview deleted file mode 100644 index d35225d29db4b5..00000000000000 --- a/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/checkboxes/FormControlLabelPosition.js b/docs/data/material/components/checkboxes/FormControlLabelPosition.js deleted file mode 100644 index a3d974f207a801..00000000000000 --- a/docs/data/material/components/checkboxes/FormControlLabelPosition.js +++ /dev/null @@ -1,27 +0,0 @@ -import Checkbox from '@mui/material/Checkbox'; -import FormGroup from '@mui/material/FormGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; - -export default function FormControlLabelPosition() { - return ( - - Label placement - - } - label="Bottom" - labelPlacement="bottom" - /> - } - label="End" - labelPlacement="end" - /> - - - ); -} diff --git a/docs/data/material/components/checkboxes/FormControlLabelPosition.tsx b/docs/data/material/components/checkboxes/FormControlLabelPosition.tsx deleted file mode 100644 index a3d974f207a801..00000000000000 --- a/docs/data/material/components/checkboxes/FormControlLabelPosition.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import Checkbox from '@mui/material/Checkbox'; -import FormGroup from '@mui/material/FormGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; - -export default function FormControlLabelPosition() { - return ( - - Label placement - - } - label="Bottom" - labelPlacement="bottom" - /> - } - label="End" - labelPlacement="end" - /> - - - ); -} diff --git a/docs/data/material/components/checkboxes/IconCheckboxes.js b/docs/data/material/components/checkboxes/IconCheckboxes.js deleted file mode 100644 index 884d2b99d7b260..00000000000000 --- a/docs/data/material/components/checkboxes/IconCheckboxes.js +++ /dev/null @@ -1,20 +0,0 @@ -import Checkbox from '@mui/material/Checkbox'; -import FavoriteBorder from '@mui/icons-material/FavoriteBorder'; -import Favorite from '@mui/icons-material/Favorite'; -import BookmarkBorderIcon from '@mui/icons-material/BookmarkBorder'; -import BookmarkIcon from '@mui/icons-material/Bookmark'; - -const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } }; - -export default function IconCheckboxes() { - return ( -
    - } checkedIcon={} /> - } - checkedIcon={} - /> -
    - ); -} diff --git a/docs/data/material/components/checkboxes/IconCheckboxes.tsx.preview b/docs/data/material/components/checkboxes/IconCheckboxes.tsx.preview deleted file mode 100644 index aca9faefc7c948..00000000000000 --- a/docs/data/material/components/checkboxes/IconCheckboxes.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ -} checkedIcon={} /> -} - checkedIcon={} -/> \ No newline at end of file diff --git a/docs/data/material/components/checkboxes/IndeterminateCheckbox.js b/docs/data/material/components/checkboxes/IndeterminateCheckbox.js deleted file mode 100644 index 3ada61d101d47f..00000000000000 --- a/docs/data/material/components/checkboxes/IndeterminateCheckbox.js +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Checkbox from '@mui/material/Checkbox'; -import FormControlLabel from '@mui/material/FormControlLabel'; - -export default function IndeterminateCheckbox() { - const [checked, setChecked] = React.useState([true, false]); - - const handleChange1 = (event) => { - setChecked([event.target.checked, event.target.checked]); - }; - - const handleChange2 = (event) => { - setChecked([event.target.checked, checked[1]]); - }; - - const handleChange3 = (event) => { - setChecked([checked[0], event.target.checked]); - }; - - const children = ( - - } - /> - } - /> - - ); - - return ( -
    - - } - /> - {children} -
    - ); -} diff --git a/docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx.preview b/docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx.preview deleted file mode 100644 index 7f0397629cc7bb..00000000000000 --- a/docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - } -/> -{children} \ No newline at end of file diff --git a/docs/data/material/components/checkboxes/SizeCheckboxes.js b/docs/data/material/components/checkboxes/SizeCheckboxes.js deleted file mode 100644 index 32bd2dd398c767..00000000000000 --- a/docs/data/material/components/checkboxes/SizeCheckboxes.js +++ /dev/null @@ -1,17 +0,0 @@ -import Checkbox from '@mui/material/Checkbox'; - -const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } }; - -export default function SizeCheckboxes() { - return ( -
    - - - -
    - ); -} diff --git a/docs/data/material/components/checkboxes/SizeCheckboxes.tsx.preview b/docs/data/material/components/checkboxes/SizeCheckboxes.tsx.preview deleted file mode 100644 index c4bb172da180e1..00000000000000 --- a/docs/data/material/components/checkboxes/SizeCheckboxes.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/checkboxes/checkboxes.md b/docs/data/material/components/checkboxes/checkboxes.md index 10d7f2042afaca..29458cdd4d3b8b 100644 --- a/docs/data/material/components/checkboxes/checkboxes.md +++ b/docs/data/material/components/checkboxes/checkboxes.md @@ -22,33 +22,33 @@ If you have a single option, avoid using a checkbox and use an on/off switch ins ## Basic checkboxes -{{"demo": "Checkboxes.js"}} +{{"component": "file://./demos/checkboxes/index.ts"}} ## Label You can provide a label to the `Checkbox` thanks to the `FormControlLabel` component. -{{"demo": "CheckboxLabels.js"}} +{{"component": "file://./demos/labels/index.ts"}} ## Size Use the `size` prop or customize the font size of the svg icons to change the size of the checkboxes. -{{"demo": "SizeCheckboxes.js"}} +{{"component": "file://./demos/size/index.ts"}} ## Color -{{"demo": "ColorCheckboxes.js"}} +{{"component": "file://./demos/color/index.ts"}} ## Icon -{{"demo": "IconCheckboxes.js"}} +{{"component": "file://./demos/icon/index.ts"}} ## Controlled You can control the checkbox with the `checked` and `onChange` props: -{{"demo": "ControlledCheckbox.js"}} +{{"component": "file://./demos/controlled/index.ts"}} ## Indeterminate @@ -58,7 +58,7 @@ Visually, there are **three** states a checkbox can be in: checked, unchecked, o You can change the indeterminate icon using the `indeterminateIcon` prop. -{{"demo": "IndeterminateCheckbox.js"}} +{{"component": "file://./demos/indeterminate/index.ts"}} :::warning When indeterminate is set, the value of the `checked` prop only impacts the form submitted values. @@ -69,20 +69,20 @@ It has no accessibility or UX implications. `FormGroup` is a helpful wrapper used to group selection control components. -{{"demo": "CheckboxesGroup.js"}} +{{"component": "file://./demos/group/index.ts"}} ## Label placement You can change the placement of the label: -{{"demo": "FormControlLabelPosition.js"}} +{{"component": "file://./demos/form-control-label-position/index.ts"}} ## Customization Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedCheckbox.js"}} +{{"component": "file://./demos/customized/index.ts"}} 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/checkbox). diff --git a/docs/data/material/components/checkboxes/Checkboxes.tsx b/docs/data/material/components/checkboxes/demos/checkboxes/Checkboxes.tsx similarity index 87% rename from docs/data/material/components/checkboxes/Checkboxes.tsx rename to docs/data/material/components/checkboxes/demos/checkboxes/Checkboxes.tsx index 358730db06c516..74eab596c24fb0 100644 --- a/docs/data/material/components/checkboxes/Checkboxes.tsx +++ b/docs/data/material/components/checkboxes/demos/checkboxes/Checkboxes.tsx @@ -5,10 +5,12 @@ const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } }; export default function Checkboxes() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/checkboxes/demos/checkboxes/client.ts b/docs/data/material/components/checkboxes/demos/checkboxes/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/checkboxes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/checkboxes/demos/checkboxes/index.ts b/docs/data/material/components/checkboxes/demos/checkboxes/index.ts new file mode 100644 index 00000000000000..ee29fa461607b9 --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/checkboxes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Checkboxes from './Checkboxes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Checkboxes, { ClientProvider }); diff --git a/docs/data/material/components/checkboxes/ColorCheckboxes.tsx b/docs/data/material/components/checkboxes/demos/color/ColorCheckboxes.tsx similarity index 92% rename from docs/data/material/components/checkboxes/ColorCheckboxes.tsx rename to docs/data/material/components/checkboxes/demos/color/ColorCheckboxes.tsx index 7b312736d1bc75..487ac823463b80 100644 --- a/docs/data/material/components/checkboxes/ColorCheckboxes.tsx +++ b/docs/data/material/components/checkboxes/demos/color/ColorCheckboxes.tsx @@ -6,6 +6,7 @@ const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } }; export default function ColorCheckboxes() { return (
    + {/* @focus-start */} @@ -20,6 +21,7 @@ export default function ColorCheckboxes() { }, }} /> + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/checkboxes/demos/color/client.ts b/docs/data/material/components/checkboxes/demos/color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/checkboxes/demos/color/index.ts b/docs/data/material/components/checkboxes/demos/color/index.ts new file mode 100644 index 00000000000000..f2887521c228ee --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorCheckboxes from './ColorCheckboxes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorCheckboxes, { ClientProvider }); diff --git a/docs/data/material/components/checkboxes/ControlledCheckbox.tsx b/docs/data/material/components/checkboxes/demos/controlled/ControlledCheckbox.tsx similarity index 90% rename from docs/data/material/components/checkboxes/ControlledCheckbox.tsx rename to docs/data/material/components/checkboxes/demos/controlled/ControlledCheckbox.tsx index 4cea1cd510dc5b..5077c0756920b0 100644 --- a/docs/data/material/components/checkboxes/ControlledCheckbox.tsx +++ b/docs/data/material/components/checkboxes/demos/controlled/ControlledCheckbox.tsx @@ -9,6 +9,7 @@ export default function ControlledCheckbox() { }; return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/checkboxes/demos/controlled/client.ts b/docs/data/material/components/checkboxes/demos/controlled/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/controlled/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/checkboxes/demos/controlled/index.ts b/docs/data/material/components/checkboxes/demos/controlled/index.ts new file mode 100644 index 00000000000000..be5ac90d55242a --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/controlled/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ControlledCheckbox from './ControlledCheckbox'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ControlledCheckbox, { ClientProvider }); diff --git a/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx b/docs/data/material/components/checkboxes/demos/customized/CustomizedCheckbox.tsx similarity index 93% rename from docs/data/material/components/checkboxes/CustomizedCheckbox.tsx rename to docs/data/material/components/checkboxes/demos/customized/CustomizedCheckbox.tsx index 8d579371af416c..e5cbc83994883f 100644 --- a/docs/data/material/components/checkboxes/CustomizedCheckbox.tsx +++ b/docs/data/material/components/checkboxes/demos/customized/CustomizedCheckbox.tsx @@ -1,5 +1,6 @@ import { styled } from '@mui/material/styles'; -import Checkbox, { CheckboxProps } from '@mui/material/Checkbox'; +import Checkbox from '@mui/material/Checkbox'; +import type { CheckboxProps } from '@mui/material/Checkbox'; const BpIcon = styled('span')(({ theme }) => ({ borderRadius: 3, @@ -68,9 +69,11 @@ function BpCheckbox(props: CheckboxProps) { export default function CustomizedCheckbox() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/checkboxes/demos/customized/client.ts b/docs/data/material/components/checkboxes/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/checkboxes/demos/customized/index.ts b/docs/data/material/components/checkboxes/demos/customized/index.ts new file mode 100644 index 00000000000000..e976d47ccb5d6b --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedCheckbox from './CustomizedCheckbox'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedCheckbox, { ClientProvider }); diff --git a/docs/data/material/components/checkboxes/demos/form-control-label-position/FormControlLabelPosition.tsx b/docs/data/material/components/checkboxes/demos/form-control-label-position/FormControlLabelPosition.tsx new file mode 100644 index 00000000000000..13d00395a61a21 --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/form-control-label-position/FormControlLabelPosition.tsx @@ -0,0 +1,29 @@ +import Checkbox from '@mui/material/Checkbox'; +import FormGroup from '@mui/material/FormGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormControl from '@mui/material/FormControl'; +import FormLabel from '@mui/material/FormLabel'; + +export default function FormControlLabelPosition() { + return ( + // @focus-start @padding 2 + + Label placement + + } + label="Bottom" + labelPlacement="bottom" + /> + } + label="End" + labelPlacement="end" + /> + + + // @focus-end + ); +} diff --git a/docs/data/material/components/checkboxes/demos/form-control-label-position/client.ts b/docs/data/material/components/checkboxes/demos/form-control-label-position/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/form-control-label-position/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/checkboxes/demos/form-control-label-position/index.ts b/docs/data/material/components/checkboxes/demos/form-control-label-position/index.ts new file mode 100644 index 00000000000000..38bfab8ebaf820 --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/form-control-label-position/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FormControlLabelPosition from './FormControlLabelPosition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FormControlLabelPosition, { ClientProvider }); diff --git a/docs/data/material/components/checkboxes/CheckboxesGroup.tsx b/docs/data/material/components/checkboxes/demos/group/CheckboxesGroup.tsx similarity index 98% rename from docs/data/material/components/checkboxes/CheckboxesGroup.tsx rename to docs/data/material/components/checkboxes/demos/group/CheckboxesGroup.tsx index ed6240a9606a74..5237f980408889 100644 --- a/docs/data/material/components/checkboxes/CheckboxesGroup.tsx +++ b/docs/data/material/components/checkboxes/demos/group/CheckboxesGroup.tsx @@ -8,6 +8,7 @@ import FormHelperText from '@mui/material/FormHelperText'; import Checkbox from '@mui/material/Checkbox'; export default function CheckboxesGroup() { + // @focus-start @padding 1 const [state, setState] = React.useState({ gilad: true, jason: false, @@ -82,4 +83,5 @@ export default function CheckboxesGroup() { ); + // @focus-end } diff --git a/docs/data/material/components/checkboxes/demos/group/client.ts b/docs/data/material/components/checkboxes/demos/group/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/group/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/checkboxes/demos/group/index.ts b/docs/data/material/components/checkboxes/demos/group/index.ts new file mode 100644 index 00000000000000..8a116e4279f1d1 --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/group/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CheckboxesGroup from './CheckboxesGroup'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CheckboxesGroup, { ClientProvider }); diff --git a/docs/data/material/components/checkboxes/IconCheckboxes.tsx b/docs/data/material/components/checkboxes/demos/icon/IconCheckboxes.tsx similarity index 92% rename from docs/data/material/components/checkboxes/IconCheckboxes.tsx rename to docs/data/material/components/checkboxes/demos/icon/IconCheckboxes.tsx index 884d2b99d7b260..e95c74cc6f1625 100644 --- a/docs/data/material/components/checkboxes/IconCheckboxes.tsx +++ b/docs/data/material/components/checkboxes/demos/icon/IconCheckboxes.tsx @@ -9,12 +9,14 @@ const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } }; export default function IconCheckboxes() { return (
    + {/* @focus-start */} } checkedIcon={} /> } checkedIcon={} /> + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/checkboxes/demos/icon/client.ts b/docs/data/material/components/checkboxes/demos/icon/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/icon/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/checkboxes/demos/icon/index.ts b/docs/data/material/components/checkboxes/demos/icon/index.ts new file mode 100644 index 00000000000000..f412adbced266f --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/icon/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IconCheckboxes from './IconCheckboxes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IconCheckboxes, { ClientProvider }); diff --git a/docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx b/docs/data/material/components/checkboxes/demos/indeterminate/IndeterminateCheckbox.tsx similarity index 96% rename from docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx rename to docs/data/material/components/checkboxes/demos/indeterminate/IndeterminateCheckbox.tsx index b431061da69969..1472f82184bc98 100644 --- a/docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx +++ b/docs/data/material/components/checkboxes/demos/indeterminate/IndeterminateCheckbox.tsx @@ -33,6 +33,7 @@ export default function IndeterminateCheckbox() { return (
    + {/* @focus-start */} {children} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/checkboxes/demos/indeterminate/client.ts b/docs/data/material/components/checkboxes/demos/indeterminate/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/indeterminate/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/checkboxes/demos/indeterminate/index.ts b/docs/data/material/components/checkboxes/demos/indeterminate/index.ts new file mode 100644 index 00000000000000..acc4517bf2abdb --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/indeterminate/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IndeterminateCheckbox from './IndeterminateCheckbox'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IndeterminateCheckbox, { ClientProvider }); diff --git a/docs/data/material/components/checkboxes/CheckboxLabels.tsx b/docs/data/material/components/checkboxes/demos/labels/CheckboxLabels.tsx similarity index 90% rename from docs/data/material/components/checkboxes/CheckboxLabels.tsx rename to docs/data/material/components/checkboxes/demos/labels/CheckboxLabels.tsx index a21a3d1ab7e9a3..6b7d5def1f226c 100644 --- a/docs/data/material/components/checkboxes/CheckboxLabels.tsx +++ b/docs/data/material/components/checkboxes/demos/labels/CheckboxLabels.tsx @@ -4,10 +4,12 @@ import Checkbox from '@mui/material/Checkbox'; export default function CheckboxLabels() { return ( + // @focus-start @padding 2 } label="Label" /> } label="Required" /> } label="Disabled" /> + // @focus-end ); } diff --git a/docs/data/material/components/checkboxes/demos/labels/client.ts b/docs/data/material/components/checkboxes/demos/labels/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/labels/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/checkboxes/demos/labels/index.ts b/docs/data/material/components/checkboxes/demos/labels/index.ts new file mode 100644 index 00000000000000..478af935ba0eba --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/labels/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CheckboxLabels from './CheckboxLabels'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CheckboxLabels, { ClientProvider }); diff --git a/docs/data/material/components/checkboxes/SizeCheckboxes.tsx b/docs/data/material/components/checkboxes/demos/size/SizeCheckboxes.tsx similarity index 89% rename from docs/data/material/components/checkboxes/SizeCheckboxes.tsx rename to docs/data/material/components/checkboxes/demos/size/SizeCheckboxes.tsx index 32bd2dd398c767..2dd3b98d8d6157 100644 --- a/docs/data/material/components/checkboxes/SizeCheckboxes.tsx +++ b/docs/data/material/components/checkboxes/demos/size/SizeCheckboxes.tsx @@ -5,6 +5,7 @@ const label = { slotProps: { input: { 'aria-label': 'Checkbox demo' } } }; export default function SizeCheckboxes() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/checkboxes/demos/size/client.ts b/docs/data/material/components/checkboxes/demos/size/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/checkboxes/demos/size/index.ts b/docs/data/material/components/checkboxes/demos/size/index.ts new file mode 100644 index 00000000000000..1a5ca0be212c7f --- /dev/null +++ b/docs/data/material/components/checkboxes/demos/size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SizeCheckboxes from './SizeCheckboxes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SizeCheckboxes, { ClientProvider }); diff --git a/docs/data/material/components/chips/AvatarChips.js b/docs/data/material/components/chips/AvatarChips.js deleted file mode 100644 index 2a8e585ba484e5..00000000000000 --- a/docs/data/material/components/chips/AvatarChips.js +++ /dev/null @@ -1,16 +0,0 @@ -import Avatar from '@mui/material/Avatar'; -import Chip from '@mui/material/Chip'; -import Stack from '@mui/material/Stack'; - -export default function AvatarChips() { - return ( - - M} label="Avatar" /> - } - label="Avatar" - variant="outlined" - /> - - ); -} diff --git a/docs/data/material/components/chips/AvatarChips.tsx.preview b/docs/data/material/components/chips/AvatarChips.tsx.preview deleted file mode 100644 index 23fb3c626e7538..00000000000000 --- a/docs/data/material/components/chips/AvatarChips.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ -M} label="Avatar" /> -} - label="Avatar" - variant="outlined" -/> \ No newline at end of file diff --git a/docs/data/material/components/chips/BasicChips.js b/docs/data/material/components/chips/BasicChips.js deleted file mode 100644 index d6721ac1787f96..00000000000000 --- a/docs/data/material/components/chips/BasicChips.js +++ /dev/null @@ -1,11 +0,0 @@ -import Chip from '@mui/material/Chip'; -import Stack from '@mui/material/Stack'; - -export default function BasicChips() { - return ( - - - - - ); -} diff --git a/docs/data/material/components/chips/BasicChips.tsx.preview b/docs/data/material/components/chips/BasicChips.tsx.preview deleted file mode 100644 index 6aa80b6b44274c..00000000000000 --- a/docs/data/material/components/chips/BasicChips.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/chips/ChipsArray.js b/docs/data/material/components/chips/ChipsArray.js deleted file mode 100644 index 8accf7d5a8429f..00000000000000 --- a/docs/data/material/components/chips/ChipsArray.js +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import Chip from '@mui/material/Chip'; -import Paper from '@mui/material/Paper'; -import TagFacesIcon from '@mui/icons-material/TagFaces'; - -const ListItem = styled('li')(({ theme }) => ({ - margin: theme.spacing(0.5), -})); - -export default function ChipsArray() { - const [chipData, setChipData] = React.useState([ - { key: 0, label: 'Angular' }, - { key: 1, label: 'jQuery' }, - { key: 2, label: 'Polymer' }, - { key: 3, label: 'React' }, - { key: 4, label: 'Vue.js' }, - ]); - - const handleDelete = (chipToDelete) => () => { - setChipData((chips) => chips.filter((chip) => chip.key !== chipToDelete.key)); - }; - - return ( - - {chipData.map((data) => { - let icon; - - if (data.label === 'React') { - icon = ; - } - - return ( - - - - ); - })} - - ); -} diff --git a/docs/data/material/components/chips/ClickableAndDeletableChips.js b/docs/data/material/components/chips/ClickableAndDeletableChips.js deleted file mode 100644 index 41985d055fb793..00000000000000 --- a/docs/data/material/components/chips/ClickableAndDeletableChips.js +++ /dev/null @@ -1,28 +0,0 @@ -import Chip from '@mui/material/Chip'; -import Stack from '@mui/material/Stack'; - -export default function ClickableAndDeletableChips() { - const handleClick = () => { - console.info('You clicked the Chip.'); - }; - - const handleDelete = () => { - console.info('You clicked the delete icon.'); - }; - - return ( - - - - - ); -} diff --git a/docs/data/material/components/chips/ClickableAndDeletableChips.tsx.preview b/docs/data/material/components/chips/ClickableAndDeletableChips.tsx.preview deleted file mode 100644 index 8cdc03cd9125e2..00000000000000 --- a/docs/data/material/components/chips/ClickableAndDeletableChips.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/chips/ClickableChips.js b/docs/data/material/components/chips/ClickableChips.js deleted file mode 100644 index b1c7fc991928d5..00000000000000 --- a/docs/data/material/components/chips/ClickableChips.js +++ /dev/null @@ -1,15 +0,0 @@ -import Chip from '@mui/material/Chip'; -import Stack from '@mui/material/Stack'; - -export default function ClickableChips() { - const handleClick = () => { - console.info('You clicked the Chip.'); - }; - - return ( - - - - - ); -} diff --git a/docs/data/material/components/chips/ClickableChips.tsx.preview b/docs/data/material/components/chips/ClickableChips.tsx.preview deleted file mode 100644 index e1e68e8edae4d7..00000000000000 --- a/docs/data/material/components/chips/ClickableChips.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/chips/ClickableLinkChips.js b/docs/data/material/components/chips/ClickableLinkChips.js deleted file mode 100644 index 2e28cd0745f611..00000000000000 --- a/docs/data/material/components/chips/ClickableLinkChips.js +++ /dev/null @@ -1,17 +0,0 @@ -import Chip from '@mui/material/Chip'; -import Stack from '@mui/material/Stack'; - -export default function ClickableLinkChips() { - return ( - - - - - ); -} diff --git a/docs/data/material/components/chips/ClickableLinkChips.tsx.preview b/docs/data/material/components/chips/ClickableLinkChips.tsx.preview deleted file mode 100644 index 929b6f99b224e3..00000000000000 --- a/docs/data/material/components/chips/ClickableLinkChips.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/chips/ColorChips.js b/docs/data/material/components/chips/ColorChips.js deleted file mode 100644 index 43b81a63988835..00000000000000 --- a/docs/data/material/components/chips/ColorChips.js +++ /dev/null @@ -1,17 +0,0 @@ -import Chip from '@mui/material/Chip'; -import Stack from '@mui/material/Stack'; - -export default function ColorChips() { - return ( - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/chips/ColorChips.tsx.preview b/docs/data/material/components/chips/ColorChips.tsx.preview deleted file mode 100644 index 46ba56daf805f8..00000000000000 --- a/docs/data/material/components/chips/ColorChips.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/chips/CustomDeleteIconChips.js b/docs/data/material/components/chips/CustomDeleteIconChips.js deleted file mode 100644 index c148735d0b5b30..00000000000000 --- a/docs/data/material/components/chips/CustomDeleteIconChips.js +++ /dev/null @@ -1,32 +0,0 @@ -import Chip from '@mui/material/Chip'; -import Stack from '@mui/material/Stack'; -import DoneIcon from '@mui/icons-material/Done'; -import DeleteIcon from '@mui/icons-material/Delete'; - -export default function CustomDeleteIconChips() { - const handleClick = () => { - console.info('You clicked the Chip.'); - }; - - const handleDelete = () => { - console.info('You clicked the delete icon.'); - }; - - return ( - - } - /> - } - variant="outlined" - /> - - ); -} diff --git a/docs/data/material/components/chips/CustomDeleteIconChips.tsx.preview b/docs/data/material/components/chips/CustomDeleteIconChips.tsx.preview deleted file mode 100644 index 0aa814842a6f82..00000000000000 --- a/docs/data/material/components/chips/CustomDeleteIconChips.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ -} -/> -} - variant="outlined" -/> \ No newline at end of file diff --git a/docs/data/material/components/chips/DeletableChips.js b/docs/data/material/components/chips/DeletableChips.js deleted file mode 100644 index 5b88d350c3a967..00000000000000 --- a/docs/data/material/components/chips/DeletableChips.js +++ /dev/null @@ -1,15 +0,0 @@ -import Chip from '@mui/material/Chip'; -import Stack from '@mui/material/Stack'; - -export default function DeletableChips() { - const handleDelete = () => { - console.info('You clicked the delete icon.'); - }; - - return ( - - - - - ); -} diff --git a/docs/data/material/components/chips/DeletableChips.tsx.preview b/docs/data/material/components/chips/DeletableChips.tsx.preview deleted file mode 100644 index 5cdedd6b39ecff..00000000000000 --- a/docs/data/material/components/chips/DeletableChips.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/chips/IconChips.js b/docs/data/material/components/chips/IconChips.js deleted file mode 100644 index 9fe5e6a1ac9b25..00000000000000 --- a/docs/data/material/components/chips/IconChips.js +++ /dev/null @@ -1,12 +0,0 @@ -import Chip from '@mui/material/Chip'; -import Stack from '@mui/material/Stack'; -import FaceIcon from '@mui/icons-material/Face'; - -export default function IconChips() { - return ( - - } label="With Icon" /> - } label="With Icon" variant="outlined" /> - - ); -} diff --git a/docs/data/material/components/chips/IconChips.tsx.preview b/docs/data/material/components/chips/IconChips.tsx.preview deleted file mode 100644 index a0f528c3e8e765..00000000000000 --- a/docs/data/material/components/chips/IconChips.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ -} label="With Icon" /> -} label="With Icon" variant="outlined" /> \ No newline at end of file diff --git a/docs/data/material/components/chips/MultilineChips.js b/docs/data/material/components/chips/MultilineChips.js deleted file mode 100644 index c7425acc1a1e16..00000000000000 --- a/docs/data/material/components/chips/MultilineChips.js +++ /dev/null @@ -1,19 +0,0 @@ -import Chip from '@mui/material/Chip'; -import Box from '@mui/material/Box'; - -export default function MultilineChips() { - return ( - - - - ); -} diff --git a/docs/data/material/components/chips/MultilineChips.tsx.preview b/docs/data/material/components/chips/MultilineChips.tsx.preview deleted file mode 100644 index 45f16da37ca0df..00000000000000 --- a/docs/data/material/components/chips/MultilineChips.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/chips/SizesChips.js b/docs/data/material/components/chips/SizesChips.js deleted file mode 100644 index a98030b591886e..00000000000000 --- a/docs/data/material/components/chips/SizesChips.js +++ /dev/null @@ -1,11 +0,0 @@ -import Chip from '@mui/material/Chip'; -import Stack from '@mui/material/Stack'; - -export default function SizesChips() { - return ( - - - - - ); -} diff --git a/docs/data/material/components/chips/SizesChips.tsx.preview b/docs/data/material/components/chips/SizesChips.tsx.preview deleted file mode 100644 index 8870572168af8c..00000000000000 --- a/docs/data/material/components/chips/SizesChips.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/chips/chips.md b/docs/data/material/components/chips/chips.md index e9e03c284b2585..0b0f5187173b5a 100644 --- a/docs/data/material/components/chips/chips.md +++ b/docs/data/material/components/chips/chips.md @@ -23,7 +23,7 @@ not shown in context. The `Chip` component supports outlined and filled styling. -{{"demo": "BasicChips.js"}} +{{"component": "file://./demos/basic/index.ts"}} ## Chip actions @@ -34,23 +34,23 @@ You can use the following actions. ### Clickable -{{"demo": "ClickableChips.js"}} +{{"component": "file://./demos/clickable/index.ts"}} ### Deletable -{{"demo": "DeletableChips.js"}} +{{"component": "file://./demos/deletable/index.ts"}} ### Clickable and deletable -{{"demo": "ClickableAndDeletableChips.js"}} +{{"component": "file://./demos/clickable-and-deletable/index.ts"}} ### Clickable link -{{"demo": "ClickableLinkChips.js"}} +{{"component": "file://./demos/clickable-link/index.ts"}} ### Custom delete icon -{{"demo": "CustomDeleteIconChips.js"}} +{{"component": "file://./demos/custom-delete-icon/index.ts"}} ## Chip adornments @@ -60,30 +60,30 @@ Use the `avatar` prop to add an avatar or use the `icon` prop to add an icon. ### Avatar chip -{{"demo": "AvatarChips.js"}} +{{"component": "file://./demos/avatar/index.ts"}} ### Icon chip -{{"demo": "IconChips.js"}} +{{"component": "file://./demos/icon/index.ts"}} ## Color chip You can use the `color` prop to define a color from theme palette. -{{"demo": "ColorChips.js"}} +{{"component": "file://./demos/color/index.ts"}} ## Sizes chip You can use the `size` prop to define a small Chip. -{{"demo": "SizesChips.js"}} +{{"component": "file://./demos/sizes/index.ts"}} ## Multiline chip By default, Chips displays labels only in a single line. To have them support multiline content, use the `sx` prop to add `height:auto` to the Chip component, and `whiteSpace: normal` to the `label` styles. -{{"demo": "MultilineChips.js"}} +{{"component": "file://./demos/multiline/index.ts"}} ## Chip array @@ -92,11 +92,11 @@ Deleting a chip removes it from the array. Note that since no `onClick` prop is defined, the `Chip` can be focused, but does not gain depth while clicked or touched. -{{"demo": "ChipsArray.js"}} +{{"component": "file://./demos/array/index.ts"}} ## Chip playground -{{"demo": "ChipsPlayground.js", "hideToolbar": true}} +{{"component": "file://./demos/playground/index.ts", "hideToolbar": true}} ## Accessibility diff --git a/docs/data/material/components/chips/ChipsArray.tsx b/docs/data/material/components/chips/demos/array/ChipsArray.tsx similarity index 96% rename from docs/data/material/components/chips/ChipsArray.tsx rename to docs/data/material/components/chips/demos/array/ChipsArray.tsx index 4c58adeaaf0821..a78d4ac4664add 100644 --- a/docs/data/material/components/chips/ChipsArray.tsx +++ b/docs/data/material/components/chips/demos/array/ChipsArray.tsx @@ -14,6 +14,7 @@ const ListItem = styled('li')(({ theme }) => ({ })); export default function ChipsArray() { + // @focus-start @padding 1 const [chipData, setChipData] = React.useState([ { key: 0, label: 'Angular' }, { key: 1, label: 'jQuery' }, @@ -57,4 +58,5 @@ export default function ChipsArray() { })} ); + // @focus-end } diff --git a/docs/data/material/components/chips/demos/array/client.ts b/docs/data/material/components/chips/demos/array/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/chips/demos/array/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/chips/demos/array/index.ts b/docs/data/material/components/chips/demos/array/index.ts new file mode 100644 index 00000000000000..81711e4fac7a34 --- /dev/null +++ b/docs/data/material/components/chips/demos/array/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChipsArray from './ChipsArray'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChipsArray, { ClientProvider }); diff --git a/docs/data/material/components/chips/AvatarChips.tsx b/docs/data/material/components/chips/demos/avatar/AvatarChips.tsx similarity index 89% rename from docs/data/material/components/chips/AvatarChips.tsx rename to docs/data/material/components/chips/demos/avatar/AvatarChips.tsx index 2a8e585ba484e5..c4cd72d6cc0848 100644 --- a/docs/data/material/components/chips/AvatarChips.tsx +++ b/docs/data/material/components/chips/demos/avatar/AvatarChips.tsx @@ -5,12 +5,14 @@ import Stack from '@mui/material/Stack'; export default function AvatarChips() { return ( + {/* @focus-start */} M} label="Avatar" /> } label="Avatar" variant="outlined" /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/chips/demos/avatar/client.ts b/docs/data/material/components/chips/demos/avatar/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/chips/demos/avatar/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/chips/demos/avatar/index.ts b/docs/data/material/components/chips/demos/avatar/index.ts new file mode 100644 index 00000000000000..2a56ddfd957085 --- /dev/null +++ b/docs/data/material/components/chips/demos/avatar/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AvatarChips from './AvatarChips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AvatarChips, { ClientProvider }); diff --git a/docs/data/material/components/chips/BasicChips.tsx b/docs/data/material/components/chips/demos/basic/BasicChips.tsx similarity index 84% rename from docs/data/material/components/chips/BasicChips.tsx rename to docs/data/material/components/chips/demos/basic/BasicChips.tsx index d6721ac1787f96..be91ccdb1120ce 100644 --- a/docs/data/material/components/chips/BasicChips.tsx +++ b/docs/data/material/components/chips/demos/basic/BasicChips.tsx @@ -4,8 +4,10 @@ import Stack from '@mui/material/Stack'; export default function BasicChips() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/chips/demos/basic/client.ts b/docs/data/material/components/chips/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/chips/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/chips/demos/basic/index.ts b/docs/data/material/components/chips/demos/basic/index.ts new file mode 100644 index 00000000000000..9746da7f937e15 --- /dev/null +++ b/docs/data/material/components/chips/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicChips from './BasicChips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicChips, { ClientProvider }); diff --git a/docs/data/material/components/chips/ClickableAndDeletableChips.tsx b/docs/data/material/components/chips/demos/clickable-and-deletable/ClickableAndDeletableChips.tsx similarity index 92% rename from docs/data/material/components/chips/ClickableAndDeletableChips.tsx rename to docs/data/material/components/chips/demos/clickable-and-deletable/ClickableAndDeletableChips.tsx index 41985d055fb793..e43161f34bb90e 100644 --- a/docs/data/material/components/chips/ClickableAndDeletableChips.tsx +++ b/docs/data/material/components/chips/demos/clickable-and-deletable/ClickableAndDeletableChips.tsx @@ -12,6 +12,7 @@ export default function ClickableAndDeletableChips() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/chips/demos/clickable-and-deletable/client.ts b/docs/data/material/components/chips/demos/clickable-and-deletable/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/chips/demos/clickable-and-deletable/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/chips/demos/clickable-and-deletable/index.ts b/docs/data/material/components/chips/demos/clickable-and-deletable/index.ts new file mode 100644 index 00000000000000..994db4137cd836 --- /dev/null +++ b/docs/data/material/components/chips/demos/clickable-and-deletable/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ClickableAndDeletableChips from './ClickableAndDeletableChips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ClickableAndDeletableChips, { ClientProvider }); diff --git a/docs/data/material/components/chips/ClickableLinkChips.tsx b/docs/data/material/components/chips/demos/clickable-link/ClickableLinkChips.tsx similarity index 89% rename from docs/data/material/components/chips/ClickableLinkChips.tsx rename to docs/data/material/components/chips/demos/clickable-link/ClickableLinkChips.tsx index 2e28cd0745f611..7fd2b755a45eb6 100644 --- a/docs/data/material/components/chips/ClickableLinkChips.tsx +++ b/docs/data/material/components/chips/demos/clickable-link/ClickableLinkChips.tsx @@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack'; export default function ClickableLinkChips() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/chips/demos/clickable-link/client.ts b/docs/data/material/components/chips/demos/clickable-link/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/chips/demos/clickable-link/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/chips/demos/clickable-link/index.ts b/docs/data/material/components/chips/demos/clickable-link/index.ts new file mode 100644 index 00000000000000..7cf0cab5820c05 --- /dev/null +++ b/docs/data/material/components/chips/demos/clickable-link/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ClickableLinkChips from './ClickableLinkChips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ClickableLinkChips, { ClientProvider }); diff --git a/docs/data/material/components/chips/ClickableChips.tsx b/docs/data/material/components/chips/demos/clickable/ClickableChips.tsx similarity index 88% rename from docs/data/material/components/chips/ClickableChips.tsx rename to docs/data/material/components/chips/demos/clickable/ClickableChips.tsx index b1c7fc991928d5..c1a0b7252affd1 100644 --- a/docs/data/material/components/chips/ClickableChips.tsx +++ b/docs/data/material/components/chips/demos/clickable/ClickableChips.tsx @@ -8,8 +8,10 @@ export default function ClickableChips() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/chips/demos/clickable/client.ts b/docs/data/material/components/chips/demos/clickable/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/chips/demos/clickable/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/chips/demos/clickable/index.ts b/docs/data/material/components/chips/demos/clickable/index.ts new file mode 100644 index 00000000000000..62bdfe4790a8d1 --- /dev/null +++ b/docs/data/material/components/chips/demos/clickable/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ClickableChips from './ClickableChips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ClickableChips, { ClientProvider }); diff --git a/docs/data/material/components/chips/ColorChips.tsx b/docs/data/material/components/chips/demos/color/ColorChips.tsx similarity index 91% rename from docs/data/material/components/chips/ColorChips.tsx rename to docs/data/material/components/chips/demos/color/ColorChips.tsx index 43b81a63988835..44fb10d4070a1c 100644 --- a/docs/data/material/components/chips/ColorChips.tsx +++ b/docs/data/material/components/chips/demos/color/ColorChips.tsx @@ -4,6 +4,7 @@ import Stack from '@mui/material/Stack'; export default function ColorChips() { return ( + {/* @focus-start */} @@ -12,6 +13,7 @@ export default function ColorChips() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/chips/demos/color/client.ts b/docs/data/material/components/chips/demos/color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/chips/demos/color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/chips/demos/color/index.ts b/docs/data/material/components/chips/demos/color/index.ts new file mode 100644 index 00000000000000..8cfd40c149b355 --- /dev/null +++ b/docs/data/material/components/chips/demos/color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorChips from './ColorChips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorChips, { ClientProvider }); diff --git a/docs/data/material/components/chips/CustomDeleteIconChips.tsx b/docs/data/material/components/chips/demos/custom-delete-icon/CustomDeleteIconChips.tsx similarity index 93% rename from docs/data/material/components/chips/CustomDeleteIconChips.tsx rename to docs/data/material/components/chips/demos/custom-delete-icon/CustomDeleteIconChips.tsx index c148735d0b5b30..96a6b3ccd775ca 100644 --- a/docs/data/material/components/chips/CustomDeleteIconChips.tsx +++ b/docs/data/material/components/chips/demos/custom-delete-icon/CustomDeleteIconChips.tsx @@ -14,6 +14,7 @@ export default function CustomDeleteIconChips() { return ( + {/* @focus-start */} } variant="outlined" /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/chips/demos/custom-delete-icon/client.ts b/docs/data/material/components/chips/demos/custom-delete-icon/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/chips/demos/custom-delete-icon/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/chips/demos/custom-delete-icon/index.ts b/docs/data/material/components/chips/demos/custom-delete-icon/index.ts new file mode 100644 index 00000000000000..0d46ae9a6ecd59 --- /dev/null +++ b/docs/data/material/components/chips/demos/custom-delete-icon/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomDeleteIconChips from './CustomDeleteIconChips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomDeleteIconChips, { ClientProvider }); diff --git a/docs/data/material/components/chips/DeletableChips.tsx b/docs/data/material/components/chips/demos/deletable/DeletableChips.tsx similarity index 88% rename from docs/data/material/components/chips/DeletableChips.tsx rename to docs/data/material/components/chips/demos/deletable/DeletableChips.tsx index 5b88d350c3a967..d5edefd4a4a8af 100644 --- a/docs/data/material/components/chips/DeletableChips.tsx +++ b/docs/data/material/components/chips/demos/deletable/DeletableChips.tsx @@ -8,8 +8,10 @@ export default function DeletableChips() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/chips/demos/deletable/client.ts b/docs/data/material/components/chips/demos/deletable/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/chips/demos/deletable/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/chips/demos/deletable/index.ts b/docs/data/material/components/chips/demos/deletable/index.ts new file mode 100644 index 00000000000000..3f7bd4d09d5204 --- /dev/null +++ b/docs/data/material/components/chips/demos/deletable/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DeletableChips from './DeletableChips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DeletableChips, { ClientProvider }); diff --git a/docs/data/material/components/chips/IconChips.tsx b/docs/data/material/components/chips/demos/icon/IconChips.tsx similarity index 87% rename from docs/data/material/components/chips/IconChips.tsx rename to docs/data/material/components/chips/demos/icon/IconChips.tsx index 9fe5e6a1ac9b25..256a64daf6acfa 100644 --- a/docs/data/material/components/chips/IconChips.tsx +++ b/docs/data/material/components/chips/demos/icon/IconChips.tsx @@ -5,8 +5,10 @@ import FaceIcon from '@mui/icons-material/Face'; export default function IconChips() { return ( + {/* @focus-start */} } label="With Icon" /> } label="With Icon" variant="outlined" /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/chips/demos/icon/client.ts b/docs/data/material/components/chips/demos/icon/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/chips/demos/icon/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/chips/demos/icon/index.ts b/docs/data/material/components/chips/demos/icon/index.ts new file mode 100644 index 00000000000000..f30872562bbcf4 --- /dev/null +++ b/docs/data/material/components/chips/demos/icon/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IconChips from './IconChips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IconChips, { ClientProvider }); diff --git a/docs/data/material/components/chips/MultilineChips.tsx b/docs/data/material/components/chips/demos/multiline/MultilineChips.tsx similarity index 88% rename from docs/data/material/components/chips/MultilineChips.tsx rename to docs/data/material/components/chips/demos/multiline/MultilineChips.tsx index c7425acc1a1e16..42fa68d2299e39 100644 --- a/docs/data/material/components/chips/MultilineChips.tsx +++ b/docs/data/material/components/chips/demos/multiline/MultilineChips.tsx @@ -4,6 +4,7 @@ import Box from '@mui/material/Box'; export default function MultilineChips() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/chips/demos/multiline/client.ts b/docs/data/material/components/chips/demos/multiline/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/chips/demos/multiline/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/chips/demos/multiline/index.ts b/docs/data/material/components/chips/demos/multiline/index.ts new file mode 100644 index 00000000000000..e250b6c6510000 --- /dev/null +++ b/docs/data/material/components/chips/demos/multiline/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MultilineChips from './MultilineChips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MultilineChips, { ClientProvider }); diff --git a/docs/data/material/components/chips/ChipsPlayground.js b/docs/data/material/components/chips/demos/playground/ChipsPlayground.js similarity index 100% rename from docs/data/material/components/chips/ChipsPlayground.js rename to docs/data/material/components/chips/demos/playground/ChipsPlayground.js diff --git a/docs/data/material/components/chips/demos/playground/client.ts b/docs/data/material/components/chips/demos/playground/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/chips/demos/playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/chips/demos/playground/index.ts b/docs/data/material/components/chips/demos/playground/index.ts new file mode 100644 index 00000000000000..3822034f7f1272 --- /dev/null +++ b/docs/data/material/components/chips/demos/playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ChipsPlayground from './ChipsPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ChipsPlayground, { ClientProvider }); diff --git a/docs/data/material/components/chips/SizesChips.tsx b/docs/data/material/components/chips/demos/sizes/SizesChips.tsx similarity index 84% rename from docs/data/material/components/chips/SizesChips.tsx rename to docs/data/material/components/chips/demos/sizes/SizesChips.tsx index a98030b591886e..85744b70710e94 100644 --- a/docs/data/material/components/chips/SizesChips.tsx +++ b/docs/data/material/components/chips/demos/sizes/SizesChips.tsx @@ -4,8 +4,10 @@ import Stack from '@mui/material/Stack'; export default function SizesChips() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/chips/demos/sizes/client.ts b/docs/data/material/components/chips/demos/sizes/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/chips/demos/sizes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/chips/demos/sizes/index.ts b/docs/data/material/components/chips/demos/sizes/index.ts new file mode 100644 index 00000000000000..04d4db05b40cd5 --- /dev/null +++ b/docs/data/material/components/chips/demos/sizes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SizesChips from './SizesChips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SizesChips, { ClientProvider }); diff --git a/docs/data/material/components/click-away-listener/ClickAway.js b/docs/data/material/components/click-away-listener/ClickAway.js deleted file mode 100644 index c027baf4c76698..00000000000000 --- a/docs/data/material/components/click-away-listener/ClickAway.js +++ /dev/null @@ -1,41 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import ClickAwayListener from '@mui/material/ClickAwayListener'; - -export default function ClickAway() { - const [open, setOpen] = React.useState(false); - - const handleClick = () => { - setOpen((prev) => !prev); - }; - - const handleClickAway = () => { - setOpen(false); - }; - - const styles = { - position: 'absolute', - top: 28, - right: 0, - left: 0, - zIndex: 1, - border: '1px solid', - p: 1, - bgcolor: 'background.paper', - }; - - return ( - - - - {open ? ( - - Click me, I will stay visible until you click outside. - - ) : null} - - - ); -} diff --git a/docs/data/material/components/click-away-listener/ClickAway.tsx.preview b/docs/data/material/components/click-away-listener/ClickAway.tsx.preview deleted file mode 100644 index fc79db57923845..00000000000000 --- a/docs/data/material/components/click-away-listener/ClickAway.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - - {open ? ( - - Click me, I will stay visible until you click outside. - - ) : null} - - \ No newline at end of file diff --git a/docs/data/material/components/click-away-listener/LeadingClickAway.js b/docs/data/material/components/click-away-listener/LeadingClickAway.js deleted file mode 100644 index 51c97697e55538..00000000000000 --- a/docs/data/material/components/click-away-listener/LeadingClickAway.js +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import ClickAwayListener from '@mui/material/ClickAwayListener'; - -export default function LeadingClickAway() { - const [open, setOpen] = React.useState(false); - - const handleClick = () => { - setOpen((prev) => !prev); - }; - - const handleClickAway = () => { - setOpen(false); - }; - - const styles = { - position: 'absolute', - top: 28, - right: 0, - left: 0, - zIndex: 1, - border: '1px solid', - p: 1, - bgcolor: 'background.paper', - }; - - return ( - - - - {open ? ( - - Click me, I will stay visible until you click outside. - - ) : null} - - - ); -} diff --git a/docs/data/material/components/click-away-listener/LeadingClickAway.tsx.preview b/docs/data/material/components/click-away-listener/LeadingClickAway.tsx.preview deleted file mode 100644 index dc02e5bc909044..00000000000000 --- a/docs/data/material/components/click-away-listener/LeadingClickAway.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - - - {open ? ( - - Click me, I will stay visible until you click outside. - - ) : null} - - \ No newline at end of file diff --git a/docs/data/material/components/click-away-listener/PortalClickAway.js b/docs/data/material/components/click-away-listener/PortalClickAway.js deleted file mode 100644 index 6f4d5cd63f27c0..00000000000000 --- a/docs/data/material/components/click-away-listener/PortalClickAway.js +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import ClickAwayListener from '@mui/material/ClickAwayListener'; -import Portal from '@mui/material/Portal'; - -export default function PortalClickAway() { - const [open, setOpen] = React.useState(false); - - const handleClick = () => { - setOpen((prev) => !prev); - }; - - const handleClickAway = () => { - setOpen(false); - }; - - const styles = { - position: 'fixed', - width: 200, - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - border: '1px solid', - p: 1, - bgcolor: 'background.paper', - }; - - return ( - -
    - - {open ? ( - - - Click me, I will stay visible until you click outside. - - - ) : null} -
    -     - ); -} diff --git a/docs/data/material/components/click-away-listener/PortalClickAway.tsx.preview b/docs/data/material/components/click-away-listener/PortalClickAway.tsx.preview deleted file mode 100644 index 9695afd7e4ae53..00000000000000 --- a/docs/data/material/components/click-away-listener/PortalClickAway.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - -
    - - {open ? ( - - - Click me, I will stay visible until you click outside. - - - ) : null} -
    -     \ No newline at end of file diff --git a/docs/data/material/components/click-away-listener/click-away-listener.md b/docs/data/material/components/click-away-listener/click-away-listener.md index 3526a78d98e256..b4756d03652114 100644 --- a/docs/data/material/components/click-away-listener/click-away-listener.md +++ b/docs/data/material/components/click-away-listener/click-away-listener.md @@ -20,7 +20,7 @@ Click-Away Listener also supports the [Portal](/material-ui/react-portal/) compo The demo below shows how to hide a menu dropdown when users click anywhere else on the page: -{{"demo": "ClickAway.js"}} +{{"component": "file://./demos/click-away/index.ts"}} ## Basics @@ -36,7 +36,7 @@ import ClickAwayListener from '@mui/material/ClickAwayListener'; The following demo uses the [Portal](/material-ui/react-portal/) component to render the dropdown into a new subtree outside of the current DOM hierarchy: -{{"demo": "PortalClickAway.js"}} +{{"component": "file://./demos/portal-click-away/index.ts"}} ### Listening for leading events @@ -48,7 +48,7 @@ You can set the component to listen for **leading events** (the start of a click When the component is set to listen for leading events, interactions with the scrollbar are ignored. ::: -{{"demo": "LeadingClickAway.js"}} +{{"component": "file://./demos/leading-click-away/index.ts"}} ## Accessibility diff --git a/docs/data/material/components/click-away-listener/ClickAway.tsx b/docs/data/material/components/click-away-listener/demos/click-away/ClickAway.tsx similarity index 90% rename from docs/data/material/components/click-away-listener/ClickAway.tsx rename to docs/data/material/components/click-away-listener/demos/click-away/ClickAway.tsx index a32b4872d1d2ee..6a197f409e79e7 100644 --- a/docs/data/material/components/click-away-listener/ClickAway.tsx +++ b/docs/data/material/components/click-away-listener/demos/click-away/ClickAway.tsx @@ -1,7 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import ClickAwayListener from '@mui/material/ClickAwayListener'; -import { SxProps } from '@mui/system'; +import type { SxProps } from '@mui/system'; export default function ClickAway() { const [open, setOpen] = React.useState(false); @@ -26,6 +26,7 @@ export default function ClickAway() { }; return ( + // @focus-start @padding 2
    + // @focus-end ); } diff --git a/docs/data/material/components/click-away-listener/demos/portal-click-away/client.ts b/docs/data/material/components/click-away-listener/demos/portal-click-away/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/click-away-listener/demos/portal-click-away/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/click-away-listener/demos/portal-click-away/index.ts b/docs/data/material/components/click-away-listener/demos/portal-click-away/index.ts new file mode 100644 index 00000000000000..7f44224699ffd1 --- /dev/null +++ b/docs/data/material/components/click-away-listener/demos/portal-click-away/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PortalClickAway from './PortalClickAway'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PortalClickAway, { ClientProvider }); diff --git a/docs/data/material/components/container/FixedContainer.js b/docs/data/material/components/container/FixedContainer.js deleted file mode 100644 index e236f436fab16d..00000000000000 --- a/docs/data/material/components/container/FixedContainer.js +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import CssBaseline from '@mui/material/CssBaseline'; -import Box from '@mui/material/Box'; -import Container from '@mui/material/Container'; - -export default function FixedContainer() { - return ( - - - - - - - ); -} diff --git a/docs/data/material/components/container/FixedContainer.tsx b/docs/data/material/components/container/FixedContainer.tsx deleted file mode 100644 index e236f436fab16d..00000000000000 --- a/docs/data/material/components/container/FixedContainer.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import CssBaseline from '@mui/material/CssBaseline'; -import Box from '@mui/material/Box'; -import Container from '@mui/material/Container'; - -export default function FixedContainer() { - return ( - - - - - - - ); -} diff --git a/docs/data/material/components/container/FixedContainer.tsx.preview b/docs/data/material/components/container/FixedContainer.tsx.preview deleted file mode 100644 index 9260778041e81c..00000000000000 --- a/docs/data/material/components/container/FixedContainer.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/container/SimpleContainer.js b/docs/data/material/components/container/SimpleContainer.js deleted file mode 100644 index 0d6e4419101293..00000000000000 --- a/docs/data/material/components/container/SimpleContainer.js +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import CssBaseline from '@mui/material/CssBaseline'; -import Box from '@mui/material/Box'; -import Container from '@mui/material/Container'; - -export default function SimpleContainer() { - return ( - - - - - - - ); -} diff --git a/docs/data/material/components/container/SimpleContainer.tsx b/docs/data/material/components/container/SimpleContainer.tsx deleted file mode 100644 index 0d6e4419101293..00000000000000 --- a/docs/data/material/components/container/SimpleContainer.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import CssBaseline from '@mui/material/CssBaseline'; -import Box from '@mui/material/Box'; -import Container from '@mui/material/Container'; - -export default function SimpleContainer() { - return ( - - - - - - - ); -} diff --git a/docs/data/material/components/container/SimpleContainer.tsx.preview b/docs/data/material/components/container/SimpleContainer.tsx.preview deleted file mode 100644 index 353572318add8f..00000000000000 --- a/docs/data/material/components/container/SimpleContainer.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/container/container.md b/docs/data/material/components/container/container.md index 9fead12bdb875d..425d11bf3474be 100644 --- a/docs/data/material/components/container/container.md +++ b/docs/data/material/components/container/container.md @@ -18,7 +18,7 @@ While containers can be nested, most layouts do not require a nested container. A fluid container width is bounded by the `maxWidth` prop value. -{{"demo": "SimpleContainer.js", "iframe": true, "defaultCodeOpen": false}} +{{"component": "file://./demos/simple/index.ts", "iframe": true, "collapseToEmpty": true}} ```jsx @@ -29,7 +29,7 @@ A fluid container width is bounded by the `maxWidth` prop value. If you prefer to design for a fixed set of sizes instead of trying to accommodate a fully fluid viewport, you can set the `fixed` prop. The max-width matches the min-width of the current breakpoint. -{{"demo": "FixedContainer.js", "iframe": true, "defaultCodeOpen": false}} +{{"component": "file://./demos/fixed/index.ts", "iframe": true, "collapseToEmpty": true}} ```jsx diff --git a/docs/data/material/components/container/demos/fixed/FixedContainer.tsx b/docs/data/material/components/container/demos/fixed/FixedContainer.tsx new file mode 100644 index 00000000000000..af3bcae5f929c4 --- /dev/null +++ b/docs/data/material/components/container/demos/fixed/FixedContainer.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import CssBaseline from '@mui/material/CssBaseline'; +import Box from '@mui/material/Box'; +import Container from '@mui/material/Container'; + +export default function FixedContainer() { + return ( + // @focus-start @padding 2 + + + + + + + // @focus-end + ); +} diff --git a/docs/data/material/components/container/demos/fixed/client.ts b/docs/data/material/components/container/demos/fixed/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/container/demos/fixed/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/container/demos/fixed/index.ts b/docs/data/material/components/container/demos/fixed/index.ts new file mode 100644 index 00000000000000..09805c65c0ed96 --- /dev/null +++ b/docs/data/material/components/container/demos/fixed/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FixedContainer from './FixedContainer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FixedContainer, { ClientProvider }); diff --git a/docs/data/material/components/container/demos/simple/SimpleContainer.tsx b/docs/data/material/components/container/demos/simple/SimpleContainer.tsx new file mode 100644 index 00000000000000..851ab6e3ef65c0 --- /dev/null +++ b/docs/data/material/components/container/demos/simple/SimpleContainer.tsx @@ -0,0 +1,17 @@ +import * as React from 'react'; +import CssBaseline from '@mui/material/CssBaseline'; +import Box from '@mui/material/Box'; +import Container from '@mui/material/Container'; + +export default function SimpleContainer() { + return ( + // @focus-start @padding 2 + + + + + + + // @focus-end + ); +} diff --git a/docs/data/material/components/container/demos/simple/client.ts b/docs/data/material/components/container/demos/simple/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/container/demos/simple/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/container/demos/simple/index.ts b/docs/data/material/components/container/demos/simple/index.ts new file mode 100644 index 00000000000000..20d153f6a2f19c --- /dev/null +++ b/docs/data/material/components/container/demos/simple/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleContainer from './SimpleContainer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleContainer, { ClientProvider }); diff --git a/docs/data/material/components/dialogs/AlertDialog.js b/docs/data/material/components/dialogs/AlertDialog.js deleted file mode 100644 index 29f272a910bc0f..00000000000000 --- a/docs/data/material/components/dialogs/AlertDialog.js +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogActions from '@mui/material/DialogActions'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; - -export default function AlertDialog() { - const [open, setOpen] = React.useState(false); - - const handleClickOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - - return ( - - - - - {"Use Google's location service?"} - - - - Let Google help apps determine location. This means sending anonymous - location data to Google, even when no apps are running. - - - - - - - - - ); -} diff --git a/docs/data/material/components/dialogs/AlertDialogSlide.js b/docs/data/material/components/dialogs/AlertDialogSlide.js deleted file mode 100644 index 22e3025be11f8c..00000000000000 --- a/docs/data/material/components/dialogs/AlertDialogSlide.js +++ /dev/null @@ -1,56 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogActions from '@mui/material/DialogActions'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; -import Slide from '@mui/material/Slide'; - -const Transition = React.forwardRef(function Transition(props, ref) { - return ; -}); - -export default function AlertDialogSlide() { - const [open, setOpen] = React.useState(false); - - const handleClickOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - - return ( - - - - {"Use Google's location service?"} - - - Let Google help apps determine location. This means sending anonymous - location data to Google, even when no apps are running. - - - - - - - - - ); -} diff --git a/docs/data/material/components/dialogs/ConfirmationDialog.js b/docs/data/material/components/dialogs/ConfirmationDialog.js deleted file mode 100644 index cbb6efb186acab..00000000000000 --- a/docs/data/material/components/dialogs/ConfirmationDialog.js +++ /dev/null @@ -1,153 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import List from '@mui/material/List'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemText from '@mui/material/ListItemText'; -import DialogTitle from '@mui/material/DialogTitle'; -import DialogContent from '@mui/material/DialogContent'; -import DialogActions from '@mui/material/DialogActions'; -import Dialog from '@mui/material/Dialog'; -import RadioGroup from '@mui/material/RadioGroup'; -import Radio from '@mui/material/Radio'; -import FormControlLabel from '@mui/material/FormControlLabel'; - -const options = [ - 'None', - 'Atria', - 'Callisto', - 'Dione', - 'Ganymede', - 'Hangouts Call', - 'Luna', - 'Oberon', - 'Phobos', - 'Pyxis', - 'Sedna', - 'Titania', - 'Triton', - 'Umbriel', -]; - -function ConfirmationDialogRaw(props) { - const { onClose, value: valueProp, open, ...other } = props; - const [value, setValue] = React.useState(valueProp); - const radioGroupRef = React.useRef(null); - - React.useEffect(() => { - if (!open) { - setValue(valueProp); - } - }, [valueProp, open]); - - const handleEntering = () => { - if (radioGroupRef.current != null) { - radioGroupRef.current.focus(); - } - }; - - const handleCancel = () => { - onClose(); - }; - - const handleOk = () => { - onClose(value); - }; - - const handleChange = (event) => { - setValue(event.target.value); - }; - - return ( - - Phone Ringtone - - - {options.map((option) => ( - } - label={option} - /> - ))} - - - - - - - - ); -} - -ConfirmationDialogRaw.propTypes = { - onClose: PropTypes.func.isRequired, - open: PropTypes.bool.isRequired, - value: PropTypes.string.isRequired, -}; - -export default function ConfirmationDialog() { - const [open, setOpen] = React.useState(false); - const [value, setValue] = React.useState('Dione'); - - const handleClickListItem = () => { - setOpen(true); - }; - - const handleClose = (newValue) => { - setOpen(false); - - if (newValue) { - setValue(newValue); - } - }; - - return ( - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/dialogs/CookiesBanner.js b/docs/data/material/components/dialogs/CookiesBanner.js deleted file mode 100644 index 21647d0b8d2969..00000000000000 --- a/docs/data/material/components/dialogs/CookiesBanner.js +++ /dev/null @@ -1,106 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import TrapFocus from '@mui/material/Unstable_TrapFocus'; -import CssBaseline from '@mui/material/CssBaseline'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import Container from '@mui/material/Container'; -import IconButton from '@mui/material/IconButton'; -import MenuIcon from '@mui/icons-material/Menu'; -import Paper from '@mui/material/Paper'; -import Fade from '@mui/material/Fade'; -import Button from '@mui/material/Button'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; - -export default function CookiesBanner() { - const [bannerOpen, setBannerOpen] = React.useState(true); - - const closeBanner = () => { - setBannerOpen(false); - }; - - return ( - - - - - - - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non - enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus - imperdiet. - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non - enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus - imperdiet. - - - - - - - - - This website uses cookies - - - example.com relies on cookies to improve your experience. - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/dialogs/CustomizedDialogs.js b/docs/data/material/components/dialogs/CustomizedDialogs.js deleted file mode 100644 index b8b39100744512..00000000000000 --- a/docs/data/material/components/dialogs/CustomizedDialogs.js +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import { styled } from '@mui/material/styles'; -import Dialog from '@mui/material/Dialog'; -import DialogTitle from '@mui/material/DialogTitle'; -import DialogContent from '@mui/material/DialogContent'; -import DialogActions from '@mui/material/DialogActions'; -import IconButton from '@mui/material/IconButton'; -import CloseIcon from '@mui/icons-material/Close'; -import Typography from '@mui/material/Typography'; - -const BootstrapDialog = styled(Dialog)(({ theme }) => ({ - '& .MuiDialogContent-root': { - padding: theme.spacing(2), - }, - '& .MuiDialogActions-root': { - padding: theme.spacing(1), - }, -})); - -export default function CustomizedDialogs() { - const [open, setOpen] = React.useState(false); - - const handleClickOpen = () => { - setOpen(true); - }; - const handleClose = () => { - setOpen(false); - }; - - return ( - - - - - Modal title - - ({ - position: 'absolute', - right: 8, - top: 8, - color: theme.palette.grey[500], - })} - > - - - - - Cras mattis consectetur purus sit amet fermentum. Cras justo odio, - dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac - consectetur ac, vestibulum at eros. - - - Praesent commodo cursus magna, vel scelerisque nisl consectetur et. - Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. - - - Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus - magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec - ullamcorper nulla non metus auctor fringilla. - - - - - - - - ); -} diff --git a/docs/data/material/components/dialogs/DraggableDialog.js b/docs/data/material/components/dialogs/DraggableDialog.js deleted file mode 100644 index d4bbbc05d17136..00000000000000 --- a/docs/data/material/components/dialogs/DraggableDialog.js +++ /dev/null @@ -1,64 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogActions from '@mui/material/DialogActions'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; -import Paper from '@mui/material/Paper'; -import Draggable from 'react-draggable'; - -function PaperComponent(props) { - const nodeRef = React.useRef(null); - return ( - - - - ); -} - -export default function DraggableDialog() { - const [open, setOpen] = React.useState(false); - - const handleClickOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - - return ( - - - - - Subscribe - - - - To subscribe to this website, please enter your email address here. We - will send updates occasionally. - - - - - - - - - ); -} diff --git a/docs/data/material/components/dialogs/FormDialog.js b/docs/data/material/components/dialogs/FormDialog.js deleted file mode 100644 index c3c1996ea77bfb..00000000000000 --- a/docs/data/material/components/dialogs/FormDialog.js +++ /dev/null @@ -1,65 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import TextField from '@mui/material/TextField'; -import Dialog from '@mui/material/Dialog'; -import DialogActions from '@mui/material/DialogActions'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; - -export default function FormDialog() { - const [open, setOpen] = React.useState(false); - - const handleClickOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - - const handleSubmit = (event) => { - event.preventDefault(); - const formData = new FormData(event.currentTarget); - const formJson = Object.fromEntries(formData.entries()); - const email = formJson.email; - console.log(email); - handleClose(); - }; - - return ( - - - - Subscribe - - - To subscribe to this website, please enter your email address here. We - will send updates occasionally. - -
    - - -
    - - - - -     -     - ); -} diff --git a/docs/data/material/components/dialogs/FullScreenDialog.js b/docs/data/material/components/dialogs/FullScreenDialog.js deleted file mode 100644 index 074dc4bd39fc95..00000000000000 --- a/docs/data/material/components/dialogs/FullScreenDialog.js +++ /dev/null @@ -1,76 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import ListItemText from '@mui/material/ListItemText'; -import ListItemButton from '@mui/material/ListItemButton'; -import List from '@mui/material/List'; -import Divider from '@mui/material/Divider'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import IconButton from '@mui/material/IconButton'; -import Typography from '@mui/material/Typography'; -import CloseIcon from '@mui/icons-material/Close'; -import Slide from '@mui/material/Slide'; - -const Transition = React.forwardRef(function Transition(props, ref) { - return ; -}); - -export default function FullScreenDialog() { - const [open, setOpen] = React.useState(false); - - const handleClickOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - - return ( - - - - - - - - - - Sound - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/dialogs/MaxWidthDialog.js b/docs/data/material/components/dialogs/MaxWidthDialog.js deleted file mode 100644 index a8dd877e803ca8..00000000000000 --- a/docs/data/material/components/dialogs/MaxWidthDialog.js +++ /dev/null @@ -1,101 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogActions from '@mui/material/DialogActions'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; -import FormControl from '@mui/material/FormControl'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import Select from '@mui/material/Select'; -import Switch from '@mui/material/Switch'; - -export default function MaxWidthDialog() { - const [open, setOpen] = React.useState(false); - const [fullWidth, setFullWidth] = React.useState(true); - const [maxWidth, setMaxWidth] = React.useState('sm'); - - const handleClickOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - - const handleMaxWidthChange = (event) => { - setMaxWidth( - // @ts-expect-error autofill of arbitrary value is not handled. - event.target.value, - ); - }; - - const handleFullWidthChange = (event) => { - setFullWidth(event.target.checked); - }; - - return ( - - - - Optional sizes - - - You can set my maximum width and whether to adapt or not. - - - - maxWidth - - - - } - label="Full width" - /> - - - - - - - - ); -} diff --git a/docs/data/material/components/dialogs/ResponsiveDialog.js b/docs/data/material/components/dialogs/ResponsiveDialog.js deleted file mode 100644 index 9245da1591a54b..00000000000000 --- a/docs/data/material/components/dialogs/ResponsiveDialog.js +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogActions from '@mui/material/DialogActions'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; -import useMediaQuery from '@mui/material/useMediaQuery'; -import { useTheme } from '@mui/material/styles'; - -export default function ResponsiveDialog() { - const [open, setOpen] = React.useState(false); - const theme = useTheme(); - const fullScreen = useMediaQuery(theme.breakpoints.down('md')); - - const handleClickOpen = () => { - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - - return ( - - - - - {"Use Google's location service?"} - - - - Let Google help apps determine location. This means sending anonymous - location data to Google, even when no apps are running. - - - - - - - - - ); -} diff --git a/docs/data/material/components/dialogs/ScrollDialog.js b/docs/data/material/components/dialogs/ScrollDialog.js deleted file mode 100644 index 358de541a959b1..00000000000000 --- a/docs/data/material/components/dialogs/ScrollDialog.js +++ /dev/null @@ -1,67 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogActions from '@mui/material/DialogActions'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; - -export default function ScrollDialog() { - const [open, setOpen] = React.useState(false); - const [scroll, setScroll] = React.useState('paper'); - - const handleClickOpen = (scrollType) => () => { - setOpen(true); - setScroll(scrollType); - }; - - const handleClose = () => { - setOpen(false); - }; - - const descriptionElementRef = React.useRef(null); - React.useEffect(() => { - if (open) { - const { current: descriptionElement } = descriptionElementRef; - if (descriptionElement !== null) { - descriptionElement.focus(); - } - } - }, [open]); - - return ( - - - - - Subscribe - - - {[...new Array(50)] - .map( - () => `Cras mattis consectetur purus sit amet fermentum. -Cras justo odio, dapibus ac facilisis in, egestas eget quam. -Morbi leo risus, porta ac consectetur ac, vestibulum at eros. -Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`, - ) - .join('\n')} - - - - - - - - - ); -} diff --git a/docs/data/material/components/dialogs/SimpleDialogDemo.js b/docs/data/material/components/dialogs/SimpleDialogDemo.js deleted file mode 100644 index 02dc908677fc0e..00000000000000 --- a/docs/data/material/components/dialogs/SimpleDialogDemo.js +++ /dev/null @@ -1,99 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Button from '@mui/material/Button'; -import Avatar from '@mui/material/Avatar'; -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import ListItemAvatar from '@mui/material/ListItemAvatar'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemText from '@mui/material/ListItemText'; -import DialogTitle from '@mui/material/DialogTitle'; -import Dialog from '@mui/material/Dialog'; -import PersonIcon from '@mui/icons-material/Person'; -import AddIcon from '@mui/icons-material/Add'; -import Typography from '@mui/material/Typography'; -import { blue } from '@mui/material/colors'; - -const emails = ['username@gmail.com', 'user02@gmail.com']; - -function SimpleDialog(props) { - const { onClose, selectedValue, open } = props; - - const handleClose = () => { - onClose(selectedValue); - }; - - const handleListItemClick = (value) => { - onClose(value); - }; - - return ( - - Set backup account - - {emails.map((email) => ( - - handleListItemClick(email)}> - - - - - - - - - ))} - - handleListItemClick('addAccount')} - > - - - - - - - - - - - ); -} - -SimpleDialog.propTypes = { - onClose: PropTypes.func.isRequired, - open: PropTypes.bool.isRequired, - selectedValue: PropTypes.string.isRequired, -}; - -export default function SimpleDialogDemo() { - const [open, setOpen] = React.useState(false); - const [selectedValue, setSelectedValue] = React.useState(emails[1]); - - const handleClickOpen = () => { - setOpen(true); - }; - - const handleClose = (value) => { - setOpen(false); - setSelectedValue(value); - }; - - return ( -
    - - Selected: {selectedValue} - -
    - - -
    - ); -} diff --git a/docs/data/material/components/dialogs/SimpleDialogDemo.tsx.preview b/docs/data/material/components/dialogs/SimpleDialogDemo.tsx.preview deleted file mode 100644 index 8f27de40a86546..00000000000000 --- a/docs/data/material/components/dialogs/SimpleDialogDemo.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - Selected: {selectedValue} - -
    - - \ No newline at end of file diff --git a/docs/data/material/components/dialogs/AlertDialogSlide.tsx b/docs/data/material/components/dialogs/demos/alert-slide/AlertDialogSlide.tsx similarity index 94% rename from docs/data/material/components/dialogs/AlertDialogSlide.tsx rename to docs/data/material/components/dialogs/demos/alert-slide/AlertDialogSlide.tsx index 97fbc56f241983..c4bac957a9b48b 100644 --- a/docs/data/material/components/dialogs/AlertDialogSlide.tsx +++ b/docs/data/material/components/dialogs/demos/alert-slide/AlertDialogSlide.tsx @@ -6,7 +6,7 @@ import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; import Slide from '@mui/material/Slide'; -import { TransitionProps } from '@mui/material/transitions'; +import type { TransitionProps } from '@mui/material/transitions'; const Transition = React.forwardRef(function Transition( props: TransitionProps & { @@ -18,6 +18,7 @@ const Transition = React.forwardRef(function Transition( }); export default function AlertDialogSlide() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const handleClickOpen = () => { @@ -59,4 +60,5 @@ export default function AlertDialogSlide() { ); + // @focus-end } diff --git a/docs/data/material/components/dialogs/demos/alert-slide/client.ts b/docs/data/material/components/dialogs/demos/alert-slide/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dialogs/demos/alert-slide/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dialogs/demos/alert-slide/index.ts b/docs/data/material/components/dialogs/demos/alert-slide/index.ts new file mode 100644 index 00000000000000..88b174eadf3598 --- /dev/null +++ b/docs/data/material/components/dialogs/demos/alert-slide/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AlertDialogSlide from './AlertDialogSlide'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AlertDialogSlide, { ClientProvider }); diff --git a/docs/data/material/components/dialogs/AlertDialog.tsx b/docs/data/material/components/dialogs/demos/alert/AlertDialog.tsx similarity index 97% rename from docs/data/material/components/dialogs/AlertDialog.tsx rename to docs/data/material/components/dialogs/demos/alert/AlertDialog.tsx index 29f272a910bc0f..6cfcf746a8ee57 100644 --- a/docs/data/material/components/dialogs/AlertDialog.tsx +++ b/docs/data/material/components/dialogs/demos/alert/AlertDialog.tsx @@ -7,6 +7,7 @@ import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; export default function AlertDialog() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const handleClickOpen = () => { @@ -47,4 +48,5 @@ export default function AlertDialog() { ); + // @focus-end } diff --git a/docs/data/material/components/dialogs/demos/alert/client.ts b/docs/data/material/components/dialogs/demos/alert/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dialogs/demos/alert/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dialogs/demos/alert/index.ts b/docs/data/material/components/dialogs/demos/alert/index.ts new file mode 100644 index 00000000000000..2ddcdf3031274a --- /dev/null +++ b/docs/data/material/components/dialogs/demos/alert/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AlertDialog from './AlertDialog'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AlertDialog, { ClientProvider }); diff --git a/docs/data/material/components/dialogs/ConfirmationDialog.tsx b/docs/data/material/components/dialogs/demos/confirmation/ConfirmationDialog.tsx similarity index 98% rename from docs/data/material/components/dialogs/ConfirmationDialog.tsx rename to docs/data/material/components/dialogs/demos/confirmation/ConfirmationDialog.tsx index 14135ea074ff77..db6aff6282cbff 100644 --- a/docs/data/material/components/dialogs/ConfirmationDialog.tsx +++ b/docs/data/material/components/dialogs/demos/confirmation/ConfirmationDialog.tsx @@ -108,6 +108,7 @@ function ConfirmationDialogRaw(props: ConfirmationDialogRawProps) { } export default function ConfirmationDialog() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const [value, setValue] = React.useState('Dione'); @@ -151,4 +152,5 @@ export default function ConfirmationDialog() { ); + // @focus-end } diff --git a/docs/data/material/components/dialogs/demos/confirmation/client.ts b/docs/data/material/components/dialogs/demos/confirmation/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dialogs/demos/confirmation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dialogs/demos/confirmation/index.ts b/docs/data/material/components/dialogs/demos/confirmation/index.ts new file mode 100644 index 00000000000000..3bda9f63b3a273 --- /dev/null +++ b/docs/data/material/components/dialogs/demos/confirmation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ConfirmationDialog from './ConfirmationDialog'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ConfirmationDialog, { ClientProvider }); diff --git a/docs/data/material/components/dialogs/CookiesBanner.tsx b/docs/data/material/components/dialogs/demos/cookies-banner/CookiesBanner.tsx similarity index 98% rename from docs/data/material/components/dialogs/CookiesBanner.tsx rename to docs/data/material/components/dialogs/demos/cookies-banner/CookiesBanner.tsx index 21647d0b8d2969..e54752d46dfb75 100644 --- a/docs/data/material/components/dialogs/CookiesBanner.tsx +++ b/docs/data/material/components/dialogs/demos/cookies-banner/CookiesBanner.tsx @@ -14,6 +14,7 @@ import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; export default function CookiesBanner() { + // @focus-start @padding 1 const [bannerOpen, setBannerOpen] = React.useState(true); const closeBanner = () => { @@ -103,4 +104,5 @@ export default function CookiesBanner() { ); + // @focus-end } diff --git a/docs/data/material/components/dialogs/demos/cookies-banner/client.ts b/docs/data/material/components/dialogs/demos/cookies-banner/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dialogs/demos/cookies-banner/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dialogs/demos/cookies-banner/index.ts b/docs/data/material/components/dialogs/demos/cookies-banner/index.ts new file mode 100644 index 00000000000000..8098e8eb149b57 --- /dev/null +++ b/docs/data/material/components/dialogs/demos/cookies-banner/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CookiesBanner from './CookiesBanner'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CookiesBanner, { ClientProvider }); diff --git a/docs/data/material/components/dialogs/CustomizedDialogs.tsx b/docs/data/material/components/dialogs/demos/customized/CustomizedDialogs.tsx similarity index 98% rename from docs/data/material/components/dialogs/CustomizedDialogs.tsx rename to docs/data/material/components/dialogs/demos/customized/CustomizedDialogs.tsx index b8b39100744512..9fcf3ab9861950 100644 --- a/docs/data/material/components/dialogs/CustomizedDialogs.tsx +++ b/docs/data/material/components/dialogs/demos/customized/CustomizedDialogs.tsx @@ -19,6 +19,7 @@ const BootstrapDialog = styled(Dialog)(({ theme }) => ({ })); export default function CustomizedDialogs() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const handleClickOpen = () => { @@ -77,4 +78,5 @@ export default function CustomizedDialogs() { ); + // @focus-end } diff --git a/docs/data/material/components/dialogs/demos/customized/client.ts b/docs/data/material/components/dialogs/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dialogs/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dialogs/demos/customized/index.ts b/docs/data/material/components/dialogs/demos/customized/index.ts new file mode 100644 index 00000000000000..4a7cc00e3b45b2 --- /dev/null +++ b/docs/data/material/components/dialogs/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedDialogs from './CustomizedDialogs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedDialogs, { ClientProvider }); diff --git a/docs/data/material/components/dialogs/DraggableDialog.tsx b/docs/data/material/components/dialogs/demos/draggable/DraggableDialog.tsx similarity index 92% rename from docs/data/material/components/dialogs/DraggableDialog.tsx rename to docs/data/material/components/dialogs/demos/draggable/DraggableDialog.tsx index 61aabd875d16b4..ef3d761df99f87 100644 --- a/docs/data/material/components/dialogs/DraggableDialog.tsx +++ b/docs/data/material/components/dialogs/demos/draggable/DraggableDialog.tsx @@ -5,7 +5,8 @@ import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; -import Paper, { PaperProps } from '@mui/material/Paper'; +import Paper from '@mui/material/Paper'; +import type { PaperProps } from '@mui/material/Paper'; import Draggable from 'react-draggable'; function PaperComponent(props: PaperProps) { @@ -22,6 +23,7 @@ function PaperComponent(props: PaperProps) { } export default function DraggableDialog() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const handleClickOpen = () => { @@ -61,4 +63,5 @@ export default function DraggableDialog() { ); + // @focus-end } diff --git a/docs/data/material/components/dialogs/demos/draggable/client.ts b/docs/data/material/components/dialogs/demos/draggable/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dialogs/demos/draggable/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dialogs/demos/draggable/index.ts b/docs/data/material/components/dialogs/demos/draggable/index.ts new file mode 100644 index 00000000000000..0b9d379d35eb71 --- /dev/null +++ b/docs/data/material/components/dialogs/demos/draggable/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DraggableDialog from './DraggableDialog'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DraggableDialog, { ClientProvider }); diff --git a/docs/data/material/components/dialogs/FormDialog.tsx b/docs/data/material/components/dialogs/demos/form/FormDialog.tsx similarity index 97% rename from docs/data/material/components/dialogs/FormDialog.tsx rename to docs/data/material/components/dialogs/demos/form/FormDialog.tsx index 1071beb9faf713..c7b0976dcb47c4 100644 --- a/docs/data/material/components/dialogs/FormDialog.tsx +++ b/docs/data/material/components/dialogs/demos/form/FormDialog.tsx @@ -8,6 +8,7 @@ import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; export default function FormDialog() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const handleClickOpen = () => { @@ -62,4 +63,5 @@ export default function FormDialog() { ); + // @focus-end } diff --git a/docs/data/material/components/dialogs/demos/form/client.ts b/docs/data/material/components/dialogs/demos/form/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dialogs/demos/form/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dialogs/demos/form/index.ts b/docs/data/material/components/dialogs/demos/form/index.ts new file mode 100644 index 00000000000000..8bf6e7b99fb3c5 --- /dev/null +++ b/docs/data/material/components/dialogs/demos/form/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FormDialog from './FormDialog'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FormDialog, { ClientProvider }); diff --git a/docs/data/material/components/dialogs/FullScreenDialog.tsx b/docs/data/material/components/dialogs/demos/full-screen/FullScreenDialog.tsx similarity index 95% rename from docs/data/material/components/dialogs/FullScreenDialog.tsx rename to docs/data/material/components/dialogs/demos/full-screen/FullScreenDialog.tsx index cd1e0f6c13b4a2..943292584d1efb 100644 --- a/docs/data/material/components/dialogs/FullScreenDialog.tsx +++ b/docs/data/material/components/dialogs/demos/full-screen/FullScreenDialog.tsx @@ -11,7 +11,7 @@ import IconButton from '@mui/material/IconButton'; import Typography from '@mui/material/Typography'; import CloseIcon from '@mui/icons-material/Close'; import Slide from '@mui/material/Slide'; -import { TransitionProps } from '@mui/material/transitions'; +import type { TransitionProps } from '@mui/material/transitions'; const Transition = React.forwardRef(function Transition( props: TransitionProps & { @@ -23,6 +23,7 @@ const Transition = React.forwardRef(function Transition( }); export default function FullScreenDialog() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const handleClickOpen = () => { @@ -79,4 +80,5 @@ export default function FullScreenDialog() { ); + // @focus-end } diff --git a/docs/data/material/components/dialogs/demos/full-screen/client.ts b/docs/data/material/components/dialogs/demos/full-screen/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dialogs/demos/full-screen/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dialogs/demos/full-screen/index.ts b/docs/data/material/components/dialogs/demos/full-screen/index.ts new file mode 100644 index 00000000000000..6be450647a5371 --- /dev/null +++ b/docs/data/material/components/dialogs/demos/full-screen/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FullScreenDialog from './FullScreenDialog'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FullScreenDialog, { ClientProvider }); diff --git a/docs/data/material/components/dialogs/MaxWidthDialog.tsx b/docs/data/material/components/dialogs/demos/max-width/MaxWidthDialog.tsx similarity index 92% rename from docs/data/material/components/dialogs/MaxWidthDialog.tsx rename to docs/data/material/components/dialogs/demos/max-width/MaxWidthDialog.tsx index a757ee817f2ced..3a1e5abcca8eda 100644 --- a/docs/data/material/components/dialogs/MaxWidthDialog.tsx +++ b/docs/data/material/components/dialogs/demos/max-width/MaxWidthDialog.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Dialog, { DialogProps } from '@mui/material/Dialog'; +import Dialog from '@mui/material/Dialog'; +import type { DialogProps } from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; @@ -10,10 +11,12 @@ import FormControl from '@mui/material/FormControl'; import FormControlLabel from '@mui/material/FormControlLabel'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import type { SelectChangeEvent } from '@mui/material/Select'; import Switch from '@mui/material/Switch'; export default function MaxWidthDialog() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const [fullWidth, setFullWidth] = React.useState(true); const [maxWidth, setMaxWidth] = React.useState('sm'); @@ -98,4 +101,5 @@ export default function MaxWidthDialog() { ); + // @focus-end } diff --git a/docs/data/material/components/dialogs/demos/max-width/client.ts b/docs/data/material/components/dialogs/demos/max-width/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dialogs/demos/max-width/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dialogs/demos/max-width/index.ts b/docs/data/material/components/dialogs/demos/max-width/index.ts new file mode 100644 index 00000000000000..5448335cd7d52c --- /dev/null +++ b/docs/data/material/components/dialogs/demos/max-width/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MaxWidthDialog from './MaxWidthDialog'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MaxWidthDialog, { ClientProvider }); diff --git a/docs/data/material/components/dialogs/ResponsiveDialog.tsx b/docs/data/material/components/dialogs/demos/responsive/ResponsiveDialog.tsx similarity index 97% rename from docs/data/material/components/dialogs/ResponsiveDialog.tsx rename to docs/data/material/components/dialogs/demos/responsive/ResponsiveDialog.tsx index 9245da1591a54b..dacb4825612337 100644 --- a/docs/data/material/components/dialogs/ResponsiveDialog.tsx +++ b/docs/data/material/components/dialogs/demos/responsive/ResponsiveDialog.tsx @@ -9,6 +9,7 @@ import useMediaQuery from '@mui/material/useMediaQuery'; import { useTheme } from '@mui/material/styles'; export default function ResponsiveDialog() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const theme = useTheme(); const fullScreen = useMediaQuery(theme.breakpoints.down('md')); @@ -52,4 +53,5 @@ export default function ResponsiveDialog() { ); + // @focus-end } diff --git a/docs/data/material/components/dialogs/demos/responsive/client.ts b/docs/data/material/components/dialogs/demos/responsive/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dialogs/demos/responsive/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dialogs/demos/responsive/index.ts b/docs/data/material/components/dialogs/demos/responsive/index.ts new file mode 100644 index 00000000000000..3ba8706c548511 --- /dev/null +++ b/docs/data/material/components/dialogs/demos/responsive/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ResponsiveDialog from './ResponsiveDialog'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ResponsiveDialog, { ClientProvider }); diff --git a/docs/data/material/components/dialogs/ScrollDialog.tsx b/docs/data/material/components/dialogs/demos/scroll/ScrollDialog.tsx similarity index 93% rename from docs/data/material/components/dialogs/ScrollDialog.tsx rename to docs/data/material/components/dialogs/demos/scroll/ScrollDialog.tsx index 5b126e4213fd9f..19abfcb28669b4 100644 --- a/docs/data/material/components/dialogs/ScrollDialog.tsx +++ b/docs/data/material/components/dialogs/demos/scroll/ScrollDialog.tsx @@ -1,12 +1,14 @@ import * as React from 'react'; import Button from '@mui/material/Button'; -import Dialog, { DialogProps } from '@mui/material/Dialog'; +import Dialog from '@mui/material/Dialog'; +import type { DialogProps } from '@mui/material/Dialog'; import DialogActions from '@mui/material/DialogActions'; import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; export default function ScrollDialog() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const [scroll, setScroll] = React.useState('paper'); @@ -64,4 +66,5 @@ Praesent commodo cursus magna, vel scelerisque nisl consectetur et.`, ); + // @focus-end } diff --git a/docs/data/material/components/dialogs/demos/scroll/client.ts b/docs/data/material/components/dialogs/demos/scroll/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dialogs/demos/scroll/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dialogs/demos/scroll/index.ts b/docs/data/material/components/dialogs/demos/scroll/index.ts new file mode 100644 index 00000000000000..b9a91878813b19 --- /dev/null +++ b/docs/data/material/components/dialogs/demos/scroll/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScrollDialog from './ScrollDialog'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScrollDialog, { ClientProvider }); diff --git a/docs/data/material/components/dialogs/SimpleDialogDemo.tsx b/docs/data/material/components/dialogs/demos/simple-demo/SimpleDialogDemo.tsx similarity index 98% rename from docs/data/material/components/dialogs/SimpleDialogDemo.tsx rename to docs/data/material/components/dialogs/demos/simple-demo/SimpleDialogDemo.tsx index 4b94ae17292240..12cb196fd82f75 100644 --- a/docs/data/material/components/dialogs/SimpleDialogDemo.tsx +++ b/docs/data/material/components/dialogs/demos/simple-demo/SimpleDialogDemo.tsx @@ -81,6 +81,7 @@ export default function SimpleDialogDemo() { return (
    + {/* @focus-start */} Selected: {selectedValue} @@ -93,6 +94,7 @@ export default function SimpleDialogDemo() { open={open} onClose={handleClose} /> + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/dialogs/demos/simple-demo/client.ts b/docs/data/material/components/dialogs/demos/simple-demo/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dialogs/demos/simple-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dialogs/demos/simple-demo/index.ts b/docs/data/material/components/dialogs/demos/simple-demo/index.ts new file mode 100644 index 00000000000000..5154acc2ea7b39 --- /dev/null +++ b/docs/data/material/components/dialogs/demos/simple-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleDialogDemo from './SimpleDialogDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleDialogDemo, { ClientProvider }); diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md index 891e9b695db584..04f4b8ee7d9366 100644 --- a/docs/data/material/components/dialogs/dialogs.md +++ b/docs/data/material/components/dialogs/dialogs.md @@ -29,7 +29,7 @@ Dialogs are implemented using a collection of related components: - Dialog Content Text: a wrapper for text inside of ``. - Slide: optional [Transition](/material-ui/transitions/#slide) used to slide the Dialog in from the edge of the screen. -{{"demo": "SimpleDialogDemo.js"}} +{{"component": "file://./demos/simple-demo/index.ts"}} ## Basics @@ -58,21 +58,21 @@ If a title is required: - Use a clear question or statement with an explanation in the content area, such as "Erase USB storage?". - Avoid apologies, ambiguity, or questions, such as "Warning!" or "Are you sure?" -{{"demo": "AlertDialog.js"}} +{{"component": "file://./demos/alert/index.ts"}} ## Transitions You can swap out the default transition with the `slots.transition` and `slotProps.transition` props. The next example uses `Slide`. -{{"demo": "AlertDialogSlide.js"}} +{{"component": "file://./demos/alert-slide/index.ts"}} ## Form dialogs Form dialogs allow users to fill out form fields within a dialog. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit'. -{{"demo": "FormDialog.js"}} +{{"component": "file://./demos/form/index.ts"}} ## Customization @@ -81,18 +81,18 @@ You can learn more about this in the [overrides documentation page](/material-ui The dialog has a close button added to aid usability. -{{"demo": "CustomizedDialogs.js"}} +{{"component": "file://./demos/customized/index.ts"}} ## Full-screen dialogs -{{"demo": "FullScreenDialog.js"}} +{{"component": "file://./demos/full-screen/index.ts"}} ## Optional sizes You can set a dialog maximum width by using the `maxWidth` enumerable in combination with the `fullWidth` boolean. When the `fullWidth` prop is true, the dialog will adapt based on the `maxWidth` value. -{{"demo": "MaxWidthDialog.js"}} +{{"component": "file://./demos/max-width/index.ts"}} ## Responsive full-screen @@ -109,7 +109,7 @@ function MyComponent() { } ``` -{{"demo": "ResponsiveDialog.js"}} +{{"component": "file://./demos/responsive/index.ts"}} ## Confirmation dialogs @@ -118,7 +118,7 @@ For example, users can listen to multiple ringtones but only make a final select Touching "Cancel" in a confirmation dialog, cancels the action, discards any changes, and closes the dialog. -{{"demo": "ConfirmationDialog.js"}} +{{"component": "file://./demos/confirmation/index.ts"}} ## Non-modal dialog @@ -127,7 +127,7 @@ Visit [the Nielsen Norman Group article](https://www.nngroup.com/articles/modal- The demo below shows a persistent cookie banner, a common non-modal dialog use case. -{{"demo": "CookiesBanner.js", "iframe": true}} +{{"component": "file://./demos/cookies-banner/index.ts", "iframe": true}} ## Draggable dialog @@ -135,7 +135,7 @@ You can create a draggable dialog by using [react-draggable](https://github.com/ To do so, you can pass the imported `Draggable` component as the `PaperComponent` of the `Dialog` component. This will make the entire dialog draggable. -{{"demo": "DraggableDialog.js"}} +{{"component": "file://./demos/draggable/index.ts"}} ## Scrolling long content @@ -146,7 +146,7 @@ When dialogs become too long for the user's viewport or device, they scroll. Try the demo below to see what we mean: -{{"demo": "ScrollDialog.js"}} +{{"component": "file://./demos/scroll/index.ts"}} ## Performance diff --git a/docs/data/material/components/dividers/DividerText.js b/docs/data/material/components/dividers/DividerText.js deleted file mode 100644 index 526b54c4e0336e..00000000000000 --- a/docs/data/material/components/dividers/DividerText.js +++ /dev/null @@ -1,34 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Divider from '@mui/material/Divider'; -import Chip from '@mui/material/Chip'; - -const Root = styled('div')(({ theme }) => ({ - width: '100%', - ...theme.typography.body2, - color: (theme.vars || theme).palette.text.secondary, - '& > :not(style) ~ :not(style)': { - marginTop: theme.spacing(2), - }, -})); - -export default function DividerText() { - const content = ( -

    {`Lorem ipsum dolor sit amet, consectetur adipiscing elit.`}

    - ); - - return ( - - {content} - CENTER - {content} - LEFT - {content} - RIGHT - {content} - - - - {content} - - ); -} diff --git a/docs/data/material/components/dividers/DividerText.tsx.preview b/docs/data/material/components/dividers/DividerText.tsx.preview deleted file mode 100644 index 5d7891ff1a12d9..00000000000000 --- a/docs/data/material/components/dividers/DividerText.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - - {content} - CENTER - {content} - LEFT - {content} - RIGHT - {content} - - - - {content} - \ No newline at end of file diff --git a/docs/data/material/components/dividers/DividerVariants.js b/docs/data/material/components/dividers/DividerVariants.js deleted file mode 100644 index b87c6067078956..00000000000000 --- a/docs/data/material/components/dividers/DividerVariants.js +++ /dev/null @@ -1,36 +0,0 @@ -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import ListItemText from '@mui/material/ListItemText'; -import Divider from '@mui/material/Divider'; - -const style = { - py: 0, - width: '100%', - maxWidth: 360, - borderRadius: 2, - border: '1px solid', - borderColor: 'divider', - backgroundColor: 'background.paper', -}; - -export default function DividerVariants() { - return ( - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/dividers/FlexDivider.js b/docs/data/material/components/dividers/FlexDivider.js deleted file mode 100644 index 65e082ceff217e..00000000000000 --- a/docs/data/material/components/dividers/FlexDivider.js +++ /dev/null @@ -1,27 +0,0 @@ -import FormatBoldIcon from '@mui/icons-material/FormatBold'; -import FormatItalicIcon from '@mui/icons-material/FormatItalic'; -import Box from '@mui/material/Box'; -import Divider from '@mui/material/Divider'; - -export default function FlexDivider() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/dividers/FlexDivider.tsx.preview b/docs/data/material/components/dividers/FlexDivider.tsx.preview deleted file mode 100644 index 36aa2cb757ab2d..00000000000000 --- a/docs/data/material/components/dividers/FlexDivider.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/dividers/IntroDivider.js b/docs/data/material/components/dividers/IntroDivider.js deleted file mode 100644 index 5dadd02ed6fc74..00000000000000 --- a/docs/data/material/components/dividers/IntroDivider.js +++ /dev/null @@ -1,41 +0,0 @@ -import Card from '@mui/material/Card'; -import Box from '@mui/material/Box'; -import Chip from '@mui/material/Chip'; -import Stack from '@mui/material/Stack'; -import Divider from '@mui/material/Divider'; -import Typography from '@mui/material/Typography'; - -export default function IntroDivider() { - return ( - - - - - Toothbrush - - - $4.50 - - - - Pinstriped cornflower blue cotton blouse takes you on a walk to the park or - just down the hall. - - - - - - Select type - - - - - - - - - ); -} diff --git a/docs/data/material/components/dividers/ListDividers.js b/docs/data/material/components/dividers/ListDividers.js deleted file mode 100644 index 220999c59fdaac..00000000000000 --- a/docs/data/material/components/dividers/ListDividers.js +++ /dev/null @@ -1,36 +0,0 @@ -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import ListItemText from '@mui/material/ListItemText'; -import Divider from '@mui/material/Divider'; - -const style = { - p: 0, - width: '100%', - maxWidth: 360, - borderRadius: 2, - border: '1px solid', - borderColor: 'divider', - backgroundColor: 'background.paper', -}; - -export default function ListDividers() { - return ( - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/dividers/VerticalDividerMiddle.js b/docs/data/material/components/dividers/VerticalDividerMiddle.js deleted file mode 100644 index 4a5c8c0dd74578..00000000000000 --- a/docs/data/material/components/dividers/VerticalDividerMiddle.js +++ /dev/null @@ -1,30 +0,0 @@ -import Card from '@mui/material/Card'; -import Divider, { dividerClasses } from '@mui/material/Divider'; -import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft'; -import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter'; -import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight'; -import FormatBoldIcon from '@mui/icons-material/FormatBold'; - -export default function VerticalDividerMiddle() { - return ( - - - - - - - - ); -} diff --git a/docs/data/material/components/dividers/VerticalDividers.js b/docs/data/material/components/dividers/VerticalDividers.js deleted file mode 100644 index d2c4435f51adda..00000000000000 --- a/docs/data/material/components/dividers/VerticalDividers.js +++ /dev/null @@ -1,34 +0,0 @@ -import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft'; -import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter'; -import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight'; -import FormatBoldIcon from '@mui/icons-material/FormatBold'; -import Box from '@mui/material/Box'; -import Divider, { dividerClasses } from '@mui/material/Divider'; - -export default function VerticalDividers() { - return ( - - - - - - - - ); -} diff --git a/docs/data/material/components/dividers/VerticalDividers.tsx.preview b/docs/data/material/components/dividers/VerticalDividers.tsx.preview deleted file mode 100644 index 9821ca88280805..00000000000000 --- a/docs/data/material/components/dividers/VerticalDividers.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/dividers/FlexDivider.tsx b/docs/data/material/components/dividers/demos/flex/FlexDivider.tsx similarity index 93% rename from docs/data/material/components/dividers/FlexDivider.tsx rename to docs/data/material/components/dividers/demos/flex/FlexDivider.tsx index 65e082ceff217e..595436a4c8c5b0 100644 --- a/docs/data/material/components/dividers/FlexDivider.tsx +++ b/docs/data/material/components/dividers/demos/flex/FlexDivider.tsx @@ -19,9 +19,11 @@ export default function FlexDivider() { }, }} > + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/dividers/demos/flex/client.ts b/docs/data/material/components/dividers/demos/flex/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dividers/demos/flex/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dividers/demos/flex/index.ts b/docs/data/material/components/dividers/demos/flex/index.ts new file mode 100644 index 00000000000000..1adfb9d34fde0e --- /dev/null +++ b/docs/data/material/components/dividers/demos/flex/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FlexDivider from './FlexDivider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FlexDivider, { ClientProvider }); diff --git a/docs/data/material/components/dividers/IntroDivider.tsx b/docs/data/material/components/dividers/demos/intro/IntroDivider.tsx similarity index 96% rename from docs/data/material/components/dividers/IntroDivider.tsx rename to docs/data/material/components/dividers/demos/intro/IntroDivider.tsx index 5dadd02ed6fc74..4865c3383a3dc0 100644 --- a/docs/data/material/components/dividers/IntroDivider.tsx +++ b/docs/data/material/components/dividers/demos/intro/IntroDivider.tsx @@ -7,6 +7,7 @@ import Typography from '@mui/material/Typography'; export default function IntroDivider() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/dividers/demos/intro/client.ts b/docs/data/material/components/dividers/demos/intro/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dividers/demos/intro/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dividers/demos/intro/index.ts b/docs/data/material/components/dividers/demos/intro/index.ts new file mode 100644 index 00000000000000..9bdedc4a783c81 --- /dev/null +++ b/docs/data/material/components/dividers/demos/intro/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IntroDivider from './IntroDivider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IntroDivider, { ClientProvider }); diff --git a/docs/data/material/components/dividers/ListDividers.tsx b/docs/data/material/components/dividers/demos/list/ListDividers.tsx similarity index 94% rename from docs/data/material/components/dividers/ListDividers.tsx rename to docs/data/material/components/dividers/demos/list/ListDividers.tsx index 220999c59fdaac..9333d86e77477a 100644 --- a/docs/data/material/components/dividers/ListDividers.tsx +++ b/docs/data/material/components/dividers/demos/list/ListDividers.tsx @@ -15,6 +15,7 @@ const style = { export default function ListDividers() { return ( + // @focus-start @padding 2 @@ -32,5 +33,6 @@ export default function ListDividers() { + // @focus-end ); } diff --git a/docs/data/material/components/dividers/demos/list/client.ts b/docs/data/material/components/dividers/demos/list/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dividers/demos/list/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dividers/demos/list/index.ts b/docs/data/material/components/dividers/demos/list/index.ts new file mode 100644 index 00000000000000..726bb60a379475 --- /dev/null +++ b/docs/data/material/components/dividers/demos/list/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ListDividers from './ListDividers'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ListDividers, { ClientProvider }); diff --git a/docs/data/material/components/dividers/DividerText.tsx b/docs/data/material/components/dividers/demos/text/DividerText.tsx similarity index 94% rename from docs/data/material/components/dividers/DividerText.tsx rename to docs/data/material/components/dividers/demos/text/DividerText.tsx index 526b54c4e0336e..d8c1b6edc2e89c 100644 --- a/docs/data/material/components/dividers/DividerText.tsx +++ b/docs/data/material/components/dividers/demos/text/DividerText.tsx @@ -17,6 +17,7 @@ export default function DividerText() { ); return ( + // @focus-start @padding 2 {content} CENTER @@ -30,5 +31,6 @@ export default function DividerText() { {content} + // @focus-end ); } diff --git a/docs/data/material/components/dividers/demos/text/client.ts b/docs/data/material/components/dividers/demos/text/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dividers/demos/text/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dividers/demos/text/index.ts b/docs/data/material/components/dividers/demos/text/index.ts new file mode 100644 index 00000000000000..e737db4fab3cdf --- /dev/null +++ b/docs/data/material/components/dividers/demos/text/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DividerText from './DividerText'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DividerText, { ClientProvider }); diff --git a/docs/data/material/components/dividers/DividerVariants.tsx b/docs/data/material/components/dividers/demos/variants/DividerVariants.tsx similarity index 95% rename from docs/data/material/components/dividers/DividerVariants.tsx rename to docs/data/material/components/dividers/demos/variants/DividerVariants.tsx index b87c6067078956..dfeaa2aecfb0d7 100644 --- a/docs/data/material/components/dividers/DividerVariants.tsx +++ b/docs/data/material/components/dividers/demos/variants/DividerVariants.tsx @@ -15,6 +15,7 @@ const style = { export default function DividerVariants() { return ( + // @focus-start @padding 2 @@ -32,5 +33,6 @@ export default function DividerVariants() { + // @focus-end ); } diff --git a/docs/data/material/components/dividers/demos/variants/client.ts b/docs/data/material/components/dividers/demos/variants/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dividers/demos/variants/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dividers/demos/variants/index.ts b/docs/data/material/components/dividers/demos/variants/index.ts new file mode 100644 index 00000000000000..2a8f65e776ad31 --- /dev/null +++ b/docs/data/material/components/dividers/demos/variants/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DividerVariants from './DividerVariants'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DividerVariants, { ClientProvider }); diff --git a/docs/data/material/components/dividers/VerticalDividerMiddle.tsx b/docs/data/material/components/dividers/demos/vertical-middle/VerticalDividerMiddle.tsx similarity index 94% rename from docs/data/material/components/dividers/VerticalDividerMiddle.tsx rename to docs/data/material/components/dividers/demos/vertical-middle/VerticalDividerMiddle.tsx index 4a5c8c0dd74578..d5bdff2dee1449 100644 --- a/docs/data/material/components/dividers/VerticalDividerMiddle.tsx +++ b/docs/data/material/components/dividers/demos/vertical-middle/VerticalDividerMiddle.tsx @@ -7,6 +7,7 @@ import FormatBoldIcon from '@mui/icons-material/FormatBold'; export default function VerticalDividerMiddle() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/dividers/demos/vertical-middle/client.ts b/docs/data/material/components/dividers/demos/vertical-middle/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dividers/demos/vertical-middle/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dividers/demos/vertical-middle/index.ts b/docs/data/material/components/dividers/demos/vertical-middle/index.ts new file mode 100644 index 00000000000000..2a80681d8eacc4 --- /dev/null +++ b/docs/data/material/components/dividers/demos/vertical-middle/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VerticalDividerMiddle from './VerticalDividerMiddle'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VerticalDividerMiddle, { ClientProvider }); diff --git a/docs/data/material/components/dividers/VerticalDividers.tsx b/docs/data/material/components/dividers/demos/vertical/VerticalDividers.tsx similarity index 95% rename from docs/data/material/components/dividers/VerticalDividers.tsx rename to docs/data/material/components/dividers/demos/vertical/VerticalDividers.tsx index d2c4435f51adda..2eb9901a3eafa0 100644 --- a/docs/data/material/components/dividers/VerticalDividers.tsx +++ b/docs/data/material/components/dividers/demos/vertical/VerticalDividers.tsx @@ -24,11 +24,13 @@ export default function VerticalDividers() { }, }} > + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/dividers/demos/vertical/client.ts b/docs/data/material/components/dividers/demos/vertical/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/dividers/demos/vertical/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/dividers/demos/vertical/index.ts b/docs/data/material/components/dividers/demos/vertical/index.ts new file mode 100644 index 00000000000000..609cc8b7e7fc51 --- /dev/null +++ b/docs/data/material/components/dividers/demos/vertical/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VerticalDividers from './VerticalDividers'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VerticalDividers, { ClientProvider }); diff --git a/docs/data/material/components/dividers/dividers.md b/docs/data/material/components/dividers/dividers.md index 8d48da3eee1c8b..68a06ed93dfab4 100644 --- a/docs/data/material/components/dividers/dividers.md +++ b/docs/data/material/components/dividers/dividers.md @@ -17,7 +17,7 @@ githubSource: packages/mui-material/src/Divider The Material UI Divider component renders as a dark gray `
    ` by default, and features several useful props for quick style adjustments. -{{"demo": "IntroDivider.js", "bg": true}} +{{"component": "file://./demos/intro/index.ts", "bg": true}} ## Basics @@ -29,25 +29,25 @@ import Divider from '@mui/material/Divider'; The Divider component supports three variants: `fullWidth` (default), `inset`, and `middle`. -{{"demo": "DividerVariants.js", "bg": true}} +{{"component": "file://./demos/variants/index.ts", "bg": true}} ### Orientation Use the `orientation` prop to change the Divider from horizontal to vertical. When using vertical orientation, the Divider renders a `
    ` with the corresponding accessibility attributes instead of `
    ` to adhere to the WAI-ARIA [spec](https://www.w3.org/TR/wai-aria-1.2/#separator). -{{"demo": "VerticalDividers.js", "bg": true}} +{{"component": "file://./demos/vertical/index.ts", "bg": true}} ### Flex item Use the `flexItem` prop to display the Divider when it's being used in a flex container. -{{"demo": "FlexDivider.js", "bg": true}} +{{"component": "file://./demos/flex/index.ts", "bg": true}} ### With children Use the `textAlign` prop to align elements that are wrapped by the Divider. -{{"demo": "DividerText.js", "bg": true}} +{{"component": "file://./demos/text/index.ts", "bg": true}} ## Customization @@ -55,13 +55,13 @@ Use the `textAlign` prop to align elements that are wrapped by the Divider. When using the Divider to separate items in a List, use the `component` prop to render it as an `
  • `—otherwise it won't be a valid HTML element. -{{"demo": "ListDividers.js", "bg": true}} +{{"component": "file://./demos/list/index.ts", "bg": true}} ### Icon grouping The demo below shows how to combine the props `variant="middle"` and `orientation="vertical"`. -{{"demo": "VerticalDividerMiddle.js", "bg": true}} +{{"component": "file://./demos/vertical-middle/index.ts", "bg": true}} ## Accessibility diff --git a/docs/data/material/components/drawers/AnchorTemporaryDrawer.js b/docs/data/material/components/drawers/AnchorTemporaryDrawer.js deleted file mode 100644 index 0c539ab6419e93..00000000000000 --- a/docs/data/material/components/drawers/AnchorTemporaryDrawer.js +++ /dev/null @@ -1,81 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Drawer from '@mui/material/Drawer'; -import Button from '@mui/material/Button'; -import List from '@mui/material/List'; -import Divider from '@mui/material/Divider'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import InboxIcon from '@mui/icons-material/MoveToInbox'; -import MailIcon from '@mui/icons-material/Mail'; - -export default function AnchorTemporaryDrawer() { - const [state, setState] = React.useState({ - top: false, - left: false, - bottom: false, - right: false, - }); - - const toggleDrawer = (anchor, open) => (event) => { - if (event.type === 'keydown' && (event.key === 'Tab' || event.key === 'Shift')) { - return; - } - - setState({ ...state, [anchor]: open }); - }; - - const list = (anchor) => ( - - - {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - - {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - ); - - return ( -
    - {['left', 'right', 'top', 'bottom'].map((anchor) => ( - - - - {list(anchor)} - - - ))} -
    - ); -} diff --git a/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx.preview b/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx.preview deleted file mode 100644 index 245f5229aeddb8..00000000000000 --- a/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ -{(['left', 'right', 'top', 'bottom'] as const).map((anchor) => ( - - - - {list(anchor)} - - -))} \ No newline at end of file diff --git a/docs/data/material/components/drawers/ClippedDrawer.js b/docs/data/material/components/drawers/ClippedDrawer.js deleted file mode 100644 index e8d6bd1fa637f1..00000000000000 --- a/docs/data/material/components/drawers/ClippedDrawer.js +++ /dev/null @@ -1,98 +0,0 @@ -import Box from '@mui/material/Box'; -import Drawer from '@mui/material/Drawer'; -import AppBar from '@mui/material/AppBar'; -import CssBaseline from '@mui/material/CssBaseline'; -import Toolbar from '@mui/material/Toolbar'; -import List from '@mui/material/List'; -import Typography from '@mui/material/Typography'; -import Divider from '@mui/material/Divider'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import InboxIcon from '@mui/icons-material/MoveToInbox'; -import MailIcon from '@mui/icons-material/Mail'; - -const drawerWidth = 240; - -export default function ClippedDrawer() { - return ( - - - theme.zIndex.drawer + 1 }}> - - - Clipped drawer - - - - - - - - {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - - {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non - enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus - imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. - Convallis convallis tellus id interdum velit laoreet id donec ultrices. - Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra - nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum - leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis - feugiat vivamus at augue. At augue eget arcu dictum varius duis at - consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa - sapien faucibus et molestie ac. - - - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper - eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim - neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra - tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis - sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi - tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit - gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem - et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis - tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla - posuere sollicitudin aliquam ultrices sagittis orci a. - - - - ); -} diff --git a/docs/data/material/components/drawers/MiniDrawer.js b/docs/data/material/components/drawers/MiniDrawer.js deleted file mode 100644 index f0eb1af7c2b6a4..00000000000000 --- a/docs/data/material/components/drawers/MiniDrawer.js +++ /dev/null @@ -1,281 +0,0 @@ -import * as React from 'react'; -import { styled, useTheme } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import MuiDrawer from '@mui/material/Drawer'; -import MuiAppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import List from '@mui/material/List'; -import CssBaseline from '@mui/material/CssBaseline'; -import Typography from '@mui/material/Typography'; -import Divider from '@mui/material/Divider'; -import IconButton from '@mui/material/IconButton'; -import MenuIcon from '@mui/icons-material/Menu'; -import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import InboxIcon from '@mui/icons-material/MoveToInbox'; -import MailIcon from '@mui/icons-material/Mail'; - -const drawerWidth = 240; - -const openedMixin = (theme) => ({ - width: drawerWidth, - transition: theme.transitions.create('width', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen, - }), - overflowX: 'hidden', -}); - -const closedMixin = (theme) => ({ - transition: theme.transitions.create('width', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - overflowX: 'hidden', - width: `calc(${theme.spacing(7)} + 1px)`, - [theme.breakpoints.up('sm')]: { - width: `calc(${theme.spacing(8)} + 1px)`, - }, -}); - -const DrawerHeader = styled('div')(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - justifyContent: 'flex-end', - padding: theme.spacing(0, 1), - // necessary for content to be below app bar - ...theme.mixins.toolbar, -})); - -const AppBar = styled(MuiAppBar, { - shouldForwardProp: (prop) => prop !== 'open', -})(({ theme }) => ({ - zIndex: theme.zIndex.drawer + 1, - transition: theme.transitions.create(['width', 'margin'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - variants: [ - { - props: ({ open }) => open, - style: { - marginLeft: drawerWidth, - width: `calc(100% - ${drawerWidth}px)`, - transition: theme.transitions.create(['width', 'margin'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.enteringScreen, - }), - }, - }, - ], -})); - -const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' })( - ({ theme }) => ({ - width: drawerWidth, - flexShrink: 0, - whiteSpace: 'nowrap', - boxSizing: 'border-box', - variants: [ - { - props: ({ open }) => open, - style: { - ...openedMixin(theme), - '& .MuiDrawer-paper': openedMixin(theme), - }, - }, - { - props: ({ open }) => !open, - style: { - ...closedMixin(theme), - '& .MuiDrawer-paper': closedMixin(theme), - }, - }, - ], - }), -); - -export default function MiniDrawer() { - const theme = useTheme(); - const [open, setOpen] = React.useState(false); - - const handleDrawerOpen = () => { - setOpen(true); - }; - - const handleDrawerClose = () => { - setOpen(false); - }; - - return ( - - - - - - - - - Mini variant drawer - - - - - - - {theme.direction === 'rtl' ? : } - - - - - {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - - {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non - enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus - imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. - Convallis convallis tellus id interdum velit laoreet id donec ultrices. - Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra - nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum - leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis - feugiat vivamus at augue. At augue eget arcu dictum varius duis at - consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa - sapien faucibus et molestie ac. - - - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper - eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim - neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra - tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis - sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi - tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit - gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem - et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis - tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla - posuere sollicitudin aliquam ultrices sagittis orci a. - - - - ); -} diff --git a/docs/data/material/components/drawers/PermanentDrawerLeft.js b/docs/data/material/components/drawers/PermanentDrawerLeft.js deleted file mode 100644 index 81c7ac61a581ea..00000000000000 --- a/docs/data/material/components/drawers/PermanentDrawerLeft.js +++ /dev/null @@ -1,107 +0,0 @@ -import Box from '@mui/material/Box'; -import Drawer from '@mui/material/Drawer'; -import CssBaseline from '@mui/material/CssBaseline'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import List from '@mui/material/List'; -import Typography from '@mui/material/Typography'; -import Divider from '@mui/material/Divider'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import InboxIcon from '@mui/icons-material/MoveToInbox'; -import MailIcon from '@mui/icons-material/Mail'; - -const drawerWidth = 240; - -export default function PermanentDrawerLeft() { - return ( - - - - - - Permanent drawer - - - - - - - - {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - - {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non - enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus - imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. - Convallis convallis tellus id interdum velit laoreet id donec ultrices. - Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra - nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum - leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis - feugiat vivamus at augue. At augue eget arcu dictum varius duis at - consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa - sapien faucibus et molestie ac. - - - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper - eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim - neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra - tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis - sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi - tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit - gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem - et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis - tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla - posuere sollicitudin aliquam ultrices sagittis orci a. - - - - ); -} diff --git a/docs/data/material/components/drawers/PermanentDrawerRight.js b/docs/data/material/components/drawers/PermanentDrawerRight.js deleted file mode 100644 index 804664167d2ff5..00000000000000 --- a/docs/data/material/components/drawers/PermanentDrawerRight.js +++ /dev/null @@ -1,107 +0,0 @@ -import Box from '@mui/material/Box'; -import Drawer from '@mui/material/Drawer'; -import CssBaseline from '@mui/material/CssBaseline'; -import AppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import List from '@mui/material/List'; -import Typography from '@mui/material/Typography'; -import Divider from '@mui/material/Divider'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import InboxIcon from '@mui/icons-material/MoveToInbox'; -import MailIcon from '@mui/icons-material/Mail'; - -const drawerWidth = 240; - -export default function PermanentDrawerRight() { - return ( - - - - - - Permanent drawer - - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non - enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus - imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. - Convallis convallis tellus id interdum velit laoreet id donec ultrices. - Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra - nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum - leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis - feugiat vivamus at augue. At augue eget arcu dictum varius duis at - consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa - sapien faucibus et molestie ac. - - - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper - eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim - neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra - tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis - sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi - tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit - gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem - et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis - tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla - posuere sollicitudin aliquam ultrices sagittis orci a. - - - - - - - {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - - {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - - ); -} diff --git a/docs/data/material/components/drawers/PersistentDrawerLeft.js b/docs/data/material/components/drawers/PersistentDrawerLeft.js deleted file mode 100644 index 51b3fae3fab40c..00000000000000 --- a/docs/data/material/components/drawers/PersistentDrawerLeft.js +++ /dev/null @@ -1,192 +0,0 @@ -import * as React from 'react'; -import { styled, useTheme } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Drawer from '@mui/material/Drawer'; -import CssBaseline from '@mui/material/CssBaseline'; -import MuiAppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import List from '@mui/material/List'; -import Typography from '@mui/material/Typography'; -import Divider from '@mui/material/Divider'; -import IconButton from '@mui/material/IconButton'; -import MenuIcon from '@mui/icons-material/Menu'; -import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import InboxIcon from '@mui/icons-material/MoveToInbox'; -import MailIcon from '@mui/icons-material/Mail'; - -const drawerWidth = 240; - -const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })( - ({ theme }) => ({ - flexGrow: 1, - padding: theme.spacing(3), - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - marginLeft: `-${drawerWidth}px`, - variants: [ - { - props: ({ open }) => open, - style: { - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginLeft: 0, - }, - }, - ], - }), -); - -const AppBar = styled(MuiAppBar, { - shouldForwardProp: (prop) => prop !== 'open', -})(({ theme }) => ({ - transition: theme.transitions.create(['margin', 'width'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - variants: [ - { - props: ({ open }) => open, - style: { - width: `calc(100% - ${drawerWidth}px)`, - marginLeft: `${drawerWidth}px`, - transition: theme.transitions.create(['margin', 'width'], { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - }, - }, - ], -})); - -const DrawerHeader = styled('div')(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - padding: theme.spacing(0, 1), - // necessary for content to be below app bar - ...theme.mixins.toolbar, - justifyContent: 'flex-end', -})); - -export default function PersistentDrawerLeft() { - const theme = useTheme(); - const [open, setOpen] = React.useState(false); - - const handleDrawerOpen = () => { - setOpen(true); - }; - - const handleDrawerClose = () => { - setOpen(false); - }; - - return ( - - - - - - - - - Persistent drawer - - - - - - - {theme.direction === 'ltr' ? : } - - - - - {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - - {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - -
    - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non - enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus - imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. - Convallis convallis tellus id interdum velit laoreet id donec ultrices. - Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra - nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum - leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis - feugiat vivamus at augue. At augue eget arcu dictum varius duis at - consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa - sapien faucibus et molestie ac. - - - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper - eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim - neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra - tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis - sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi - tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit - gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem - et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis - tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla - posuere sollicitudin aliquam ultrices sagittis orci a. - -
    -     - ); -} diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.js b/docs/data/material/components/drawers/PersistentDrawerRight.js deleted file mode 100644 index 9ef70a919c400a..00000000000000 --- a/docs/data/material/components/drawers/PersistentDrawerRight.js +++ /dev/null @@ -1,193 +0,0 @@ -import * as React from 'react'; -import { styled, useTheme } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Drawer from '@mui/material/Drawer'; -import MuiAppBar from '@mui/material/AppBar'; -import Toolbar from '@mui/material/Toolbar'; -import CssBaseline from '@mui/material/CssBaseline'; -import List from '@mui/material/List'; -import Typography from '@mui/material/Typography'; -import Divider from '@mui/material/Divider'; -import IconButton from '@mui/material/IconButton'; -import MenuIcon from '@mui/icons-material/Menu'; -import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; -import ChevronRightIcon from '@mui/icons-material/ChevronRight'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import InboxIcon from '@mui/icons-material/MoveToInbox'; -import MailIcon from '@mui/icons-material/Mail'; - -const drawerWidth = 240; - -const Main = styled('main', { shouldForwardProp: (prop) => prop !== 'open' })( - ({ theme }) => ({ - flexGrow: 1, - padding: theme.spacing(3), - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - marginRight: -drawerWidth, - /** - * This is necessary to enable the selection of content. In the DOM, the stacking order is determined - * by the order of appearance. Following this rule, elements appearing later in the markup will overlay - * those that appear earlier. Since the Drawer comes after the Main content, this adjustment ensures - * proper interaction with the underlying content. - */ - position: 'relative', - variants: [ - { - props: ({ open }) => open, - style: { - transition: theme.transitions.create('margin', { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginRight: 0, - }, - }, - ], - }), -); - -const AppBar = styled(MuiAppBar, { - shouldForwardProp: (prop) => prop !== 'open', -})(({ theme }) => ({ - transition: theme.transitions.create(['margin', 'width'], { - easing: theme.transitions.easing.sharp, - duration: theme.transitions.duration.leavingScreen, - }), - variants: [ - { - props: ({ open }) => open, - style: { - width: `calc(100% - ${drawerWidth}px)`, - transition: theme.transitions.create(['margin', 'width'], { - easing: theme.transitions.easing.easeOut, - duration: theme.transitions.duration.enteringScreen, - }), - marginRight: drawerWidth, - }, - }, - ], -})); - -const DrawerHeader = styled('div')(({ theme }) => ({ - display: 'flex', - alignItems: 'center', - padding: theme.spacing(0, 1), - // necessary for content to be below app bar - ...theme.mixins.toolbar, - justifyContent: 'flex-start', -})); - -export default function PersistentDrawerRight() { - const theme = useTheme(); - const [open, setOpen] = React.useState(false); - - const handleDrawerOpen = () => { - setOpen(true); - }; - - const handleDrawerClose = () => { - setOpen(false); - }; - - return ( - - - - - - Persistent drawer - - - - - - -
    - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non - enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus - imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. - Convallis convallis tellus id interdum velit laoreet id donec ultrices. - Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra - nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum - leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis - feugiat vivamus at augue. At augue eget arcu dictum varius duis at - consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa - sapien faucibus et molestie ac. - - - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper - eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim - neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra - tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis - sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi - tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit - gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem - et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis - tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla - posuere sollicitudin aliquam ultrices sagittis orci a. - -
    - - - - {theme.direction === 'rtl' ? : } - - - - - {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - - {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - -     - ); -} diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.js b/docs/data/material/components/drawers/ResponsiveDrawer.js deleted file mode 100644 index 94a20757fba1db..00000000000000 --- a/docs/data/material/components/drawers/ResponsiveDrawer.js +++ /dev/null @@ -1,182 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import AppBar from '@mui/material/AppBar'; -import Box from '@mui/material/Box'; -import CssBaseline from '@mui/material/CssBaseline'; -import Divider from '@mui/material/Divider'; -import Drawer from '@mui/material/Drawer'; -import IconButton from '@mui/material/IconButton'; -import InboxIcon from '@mui/icons-material/MoveToInbox'; -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import MailIcon from '@mui/icons-material/Mail'; -import MenuIcon from '@mui/icons-material/Menu'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; - -const drawerWidth = 240; - -function ResponsiveDrawer(props) { - const { window } = props; - const [mobileOpen, setMobileOpen] = React.useState(false); - const [isClosing, setIsClosing] = React.useState(false); - - const handleDrawerClose = () => { - setIsClosing(true); - setMobileOpen(false); - }; - - const handleDrawerTransitionEnd = () => { - setIsClosing(false); - }; - - const handleDrawerToggle = () => { - if (!isClosing) { - setMobileOpen(!mobileOpen); - } - }; - - const drawer = ( -
    - - - - {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - - {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - -
    - ); - - // Remove this const when copying and pasting into your project. - const container = window !== undefined ? () => window().document.body : undefined; - - return ( - - - - - - - - - Responsive drawer - - - - - {/* The implementation can be swapped with js to avoid SEO duplication of links. */} - - {drawer} - - - {drawer} - - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. Rhoncus dolor purus non - enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus - imperdiet. Semper risus in hendrerit gravida rutrum quisque non tellus. - Convallis convallis tellus id interdum velit laoreet id donec ultrices. - Odio morbi quis commodo odio aenean sed adipiscing. Amet nisl suscipit - adipiscing bibendum est ultricies integer quis. Cursus euismod quis viverra - nibh cras. Metus vulputate eu scelerisque felis imperdiet proin fermentum - leo. Mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis - feugiat vivamus at augue. At augue eget arcu dictum varius duis at - consectetur lorem. Velit sed ullamcorper morbi tincidunt. Lorem donec massa - sapien faucibus et molestie ac. - - - Consequat mauris nunc congue nisi vitae suscipit. Fringilla est ullamcorper - eget nulla facilisi etiam dignissim diam. Pulvinar elementum integer enim - neque volutpat ac tincidunt. Ornare suspendisse sed nisi lacus sed viverra - tellus. Purus sit amet volutpat consequat mauris. Elementum eu facilisis - sed odio morbi. Euismod lacinia at quis risus sed vulputate odio. Morbi - tincidunt ornare massa eget egestas purus viverra accumsan in. In hendrerit - gravida rutrum quisque non tellus orci ac. Pellentesque nec nam aliquam sem - et tortor. Habitant morbi tristique senectus et. Adipiscing elit duis - tristique sollicitudin nibh sit. Ornare aenean euismod elementum nisi quis - eleifend. Commodo viverra maecenas accumsan lacus vel facilisis. Nulla - posuere sollicitudin aliquam ultrices sagittis orci a. - - - - ); -} - -ResponsiveDrawer.propTypes = { - /** - * Injected by the documentation to work in an iframe. - * Remove this when copying and pasting into your project. - */ - window: PropTypes.func, -}; - -export default ResponsiveDrawer; diff --git a/docs/data/material/components/drawers/SwipeableEdgeDrawer.js b/docs/data/material/components/drawers/SwipeableEdgeDrawer.js deleted file mode 100644 index f2c18f6853c889..00000000000000 --- a/docs/data/material/components/drawers/SwipeableEdgeDrawer.js +++ /dev/null @@ -1,108 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { Global } from '@emotion/react'; -import { styled } from '@mui/material/styles'; -import CssBaseline from '@mui/material/CssBaseline'; -import { grey } from '@mui/material/colors'; -import Button from '@mui/material/Button'; -import Box from '@mui/material/Box'; -import Skeleton from '@mui/material/Skeleton'; -import Typography from '@mui/material/Typography'; -import SwipeableDrawer from '@mui/material/SwipeableDrawer'; - -const drawerBleeding = 56; - -const Root = styled('div')(({ theme }) => ({ - height: '100%', - backgroundColor: grey[100], - ...theme.applyStyles('dark', { - backgroundColor: (theme.vars || theme).palette.background.default, - }), -})); - -const StyledBox = styled('div')(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.applyStyles('dark', { - backgroundColor: grey[800], - }), -})); - -const Puller = styled('div')(({ theme }) => ({ - width: 30, - height: 6, - backgroundColor: grey[300], - borderRadius: 3, - position: 'absolute', - top: 8, - left: 'calc(50% - 15px)', - ...theme.applyStyles('dark', { - backgroundColor: grey[900], - }), -})); - -function SwipeableEdgeDrawer(props) { - const { window } = props; - const [open, setOpen] = React.useState(false); - - const toggleDrawer = (newOpen) => () => { - setOpen(newOpen); - }; - - // This is used only for the example - const container = window !== undefined ? () => window().document.body : undefined; - - return ( - - - .MuiPaper-root': { - height: `calc(50% - ${drawerBleeding}px)`, - overflow: 'visible', - }, - }} - /> - - - - - - - 51 results - - - - - - - ); -} - -SwipeableEdgeDrawer.propTypes = { - /** - * Injected by the documentation to work in an iframe. - * You won't need it on your project. - */ - window: PropTypes.func, -}; - -export default SwipeableEdgeDrawer; diff --git a/docs/data/material/components/drawers/SwipeableTemporaryDrawer.js b/docs/data/material/components/drawers/SwipeableTemporaryDrawer.js deleted file mode 100644 index b26834605b226a..00000000000000 --- a/docs/data/material/components/drawers/SwipeableTemporaryDrawer.js +++ /dev/null @@ -1,86 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import SwipeableDrawer from '@mui/material/SwipeableDrawer'; -import Button from '@mui/material/Button'; -import List from '@mui/material/List'; -import Divider from '@mui/material/Divider'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import InboxIcon from '@mui/icons-material/MoveToInbox'; -import MailIcon from '@mui/icons-material/Mail'; - -export default function SwipeableTemporaryDrawer() { - const [state, setState] = React.useState({ - top: false, - left: false, - bottom: false, - right: false, - }); - - const toggleDrawer = (anchor, open) => (event) => { - if ( - event && - event.type === 'keydown' && - (event.key === 'Tab' || event.key === 'Shift') - ) { - return; - } - - setState({ ...state, [anchor]: open }); - }; - - const list = (anchor) => ( - - - {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - - {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - ); - - return ( -
    - {['left', 'right', 'top', 'bottom'].map((anchor) => ( - - - - {list(anchor)} - - - ))} -
    - ); -} diff --git a/docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx.preview b/docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx.preview deleted file mode 100644 index 9d1db86ace412e..00000000000000 --- a/docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ -{(['left', 'right', 'top', 'bottom'] as const).map((anchor) => ( - - - - {list(anchor)} - - -))} \ No newline at end of file diff --git a/docs/data/material/components/drawers/TemporaryDrawer.js b/docs/data/material/components/drawers/TemporaryDrawer.js deleted file mode 100644 index 55cc4b06d2d935..00000000000000 --- a/docs/data/material/components/drawers/TemporaryDrawer.js +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Drawer from '@mui/material/Drawer'; -import Button from '@mui/material/Button'; -import List from '@mui/material/List'; -import Divider from '@mui/material/Divider'; -import ListItem from '@mui/material/ListItem'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import InboxIcon from '@mui/icons-material/MoveToInbox'; -import MailIcon from '@mui/icons-material/Mail'; - -export default function TemporaryDrawer() { - const [open, setOpen] = React.useState(false); - - const toggleDrawer = (newOpen) => () => { - setOpen(newOpen); - }; - - const DrawerList = ( - - - {['Inbox', 'Starred', 'Send email', 'Drafts'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - - {['All mail', 'Trash', 'Spam'].map((text, index) => ( - - - - {index % 2 === 0 ? : } - - - - - ))} - - - ); - - return ( -
    - - - {DrawerList} - -
    - ); -} diff --git a/docs/data/material/components/drawers/TemporaryDrawer.tsx.preview b/docs/data/material/components/drawers/TemporaryDrawer.tsx.preview deleted file mode 100644 index 9a79963627fa1d..00000000000000 --- a/docs/data/material/components/drawers/TemporaryDrawer.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - - {DrawerList} - \ No newline at end of file diff --git a/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx b/docs/data/material/components/drawers/demos/anchor-temporary/AnchorTemporaryDrawer.tsx similarity index 98% rename from docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx rename to docs/data/material/components/drawers/demos/anchor-temporary/AnchorTemporaryDrawer.tsx index a6f333aa9edc4d..338f4ed8a67a3b 100644 --- a/docs/data/material/components/drawers/AnchorTemporaryDrawer.tsx +++ b/docs/data/material/components/drawers/demos/anchor-temporary/AnchorTemporaryDrawer.tsx @@ -72,6 +72,7 @@ export default function AnchorTemporaryDrawer() { return (
    + {/* @focus-start */} {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => ( @@ -84,6 +85,7 @@ export default function AnchorTemporaryDrawer() { ))} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/drawers/demos/anchor-temporary/client.ts b/docs/data/material/components/drawers/demos/anchor-temporary/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/drawers/demos/anchor-temporary/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/drawers/demos/anchor-temporary/index.ts b/docs/data/material/components/drawers/demos/anchor-temporary/index.ts new file mode 100644 index 00000000000000..53a58a2048bbd9 --- /dev/null +++ b/docs/data/material/components/drawers/demos/anchor-temporary/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AnchorTemporaryDrawer from './AnchorTemporaryDrawer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AnchorTemporaryDrawer, { ClientProvider }); diff --git a/docs/data/material/components/drawers/ClippedDrawer.tsx b/docs/data/material/components/drawers/demos/clipped/ClippedDrawer.tsx similarity index 98% rename from docs/data/material/components/drawers/ClippedDrawer.tsx rename to docs/data/material/components/drawers/demos/clipped/ClippedDrawer.tsx index e8d6bd1fa637f1..988be0ba266f4b 100644 --- a/docs/data/material/components/drawers/ClippedDrawer.tsx +++ b/docs/data/material/components/drawers/demos/clipped/ClippedDrawer.tsx @@ -18,6 +18,7 @@ const drawerWidth = 240; export default function ClippedDrawer() { return ( + {/* @focus-start */} theme.zIndex.drawer + 1 }}> @@ -93,6 +94,7 @@ export default function ClippedDrawer() { posuere sollicitudin aliquam ultrices sagittis orci a. + {/* @focus-end */} ); } diff --git a/docs/data/material/components/drawers/demos/clipped/client.ts b/docs/data/material/components/drawers/demos/clipped/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/drawers/demos/clipped/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/drawers/demos/clipped/index.ts b/docs/data/material/components/drawers/demos/clipped/index.ts new file mode 100644 index 00000000000000..175128961795ad --- /dev/null +++ b/docs/data/material/components/drawers/demos/clipped/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ClippedDrawer from './ClippedDrawer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ClippedDrawer, { ClientProvider }); diff --git a/docs/data/material/components/drawers/MiniDrawer.tsx b/docs/data/material/components/drawers/demos/mini/MiniDrawer.tsx similarity index 97% rename from docs/data/material/components/drawers/MiniDrawer.tsx rename to docs/data/material/components/drawers/demos/mini/MiniDrawer.tsx index a70bf205f5c256..1d2e7e938613a3 100644 --- a/docs/data/material/components/drawers/MiniDrawer.tsx +++ b/docs/data/material/components/drawers/demos/mini/MiniDrawer.tsx @@ -1,8 +1,10 @@ import * as React from 'react'; -import { styled, useTheme, Theme, CSSObject } from '@mui/material/styles'; +import { styled, useTheme } from '@mui/material/styles'; +import type { Theme, CSSObject } from '@mui/material/styles'; import Box from '@mui/material/Box'; import MuiDrawer from '@mui/material/Drawer'; -import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'; +import MuiAppBar from '@mui/material/AppBar'; +import type { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import List from '@mui/material/List'; import CssBaseline from '@mui/material/CssBaseline'; @@ -104,6 +106,7 @@ const Drawer = styled(MuiDrawer, { shouldForwardProp: (prop) => prop !== 'open' ); export default function MiniDrawer() { + // @focus-start @padding 1 const theme = useTheme(); const [open, setOpen] = React.useState(false); @@ -282,4 +285,5 @@ export default function MiniDrawer() { ); + // @focus-end } diff --git a/docs/data/material/components/drawers/demos/mini/client.ts b/docs/data/material/components/drawers/demos/mini/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/drawers/demos/mini/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/drawers/demos/mini/index.ts b/docs/data/material/components/drawers/demos/mini/index.ts new file mode 100644 index 00000000000000..114a4d4844dde2 --- /dev/null +++ b/docs/data/material/components/drawers/demos/mini/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MiniDrawer from './MiniDrawer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MiniDrawer, { ClientProvider }); diff --git a/docs/data/material/components/drawers/PermanentDrawerLeft.tsx b/docs/data/material/components/drawers/demos/permanent-left/PermanentDrawerLeft.tsx similarity index 98% rename from docs/data/material/components/drawers/PermanentDrawerLeft.tsx rename to docs/data/material/components/drawers/demos/permanent-left/PermanentDrawerLeft.tsx index 81c7ac61a581ea..89c47d5ccfc6b1 100644 --- a/docs/data/material/components/drawers/PermanentDrawerLeft.tsx +++ b/docs/data/material/components/drawers/demos/permanent-left/PermanentDrawerLeft.tsx @@ -18,6 +18,7 @@ const drawerWidth = 240; export default function PermanentDrawerLeft() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/drawers/demos/permanent-left/client.ts b/docs/data/material/components/drawers/demos/permanent-left/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/drawers/demos/permanent-left/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/drawers/demos/permanent-left/index.ts b/docs/data/material/components/drawers/demos/permanent-left/index.ts new file mode 100644 index 00000000000000..eedbf92acb685b --- /dev/null +++ b/docs/data/material/components/drawers/demos/permanent-left/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PermanentDrawerLeft from './PermanentDrawerLeft'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PermanentDrawerLeft, { ClientProvider }); diff --git a/docs/data/material/components/drawers/PermanentDrawerRight.tsx b/docs/data/material/components/drawers/demos/permanent-right/PermanentDrawerRight.tsx similarity index 98% rename from docs/data/material/components/drawers/PermanentDrawerRight.tsx rename to docs/data/material/components/drawers/demos/permanent-right/PermanentDrawerRight.tsx index 804664167d2ff5..24ad00f7c30b20 100644 --- a/docs/data/material/components/drawers/PermanentDrawerRight.tsx +++ b/docs/data/material/components/drawers/demos/permanent-right/PermanentDrawerRight.tsx @@ -18,6 +18,7 @@ const drawerWidth = 240; export default function PermanentDrawerRight() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/drawers/demos/permanent-right/client.ts b/docs/data/material/components/drawers/demos/permanent-right/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/drawers/demos/permanent-right/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/drawers/demos/permanent-right/index.ts b/docs/data/material/components/drawers/demos/permanent-right/index.ts new file mode 100644 index 00000000000000..221a2df73cc7e2 --- /dev/null +++ b/docs/data/material/components/drawers/demos/permanent-right/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PermanentDrawerRight from './PermanentDrawerRight'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PermanentDrawerRight, { ClientProvider }); diff --git a/docs/data/material/components/drawers/PersistentDrawerLeft.tsx b/docs/data/material/components/drawers/demos/persistent-left/PersistentDrawerLeft.tsx similarity index 97% rename from docs/data/material/components/drawers/PersistentDrawerLeft.tsx rename to docs/data/material/components/drawers/demos/persistent-left/PersistentDrawerLeft.tsx index 84e7902ba327f0..9a8a1de3e17c52 100644 --- a/docs/data/material/components/drawers/PersistentDrawerLeft.tsx +++ b/docs/data/material/components/drawers/demos/persistent-left/PersistentDrawerLeft.tsx @@ -3,7 +3,8 @@ import { styled, useTheme } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Drawer from '@mui/material/Drawer'; import CssBaseline from '@mui/material/CssBaseline'; -import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'; +import MuiAppBar from '@mui/material/AppBar'; +import type { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import List from '@mui/material/List'; import Typography from '@mui/material/Typography'; @@ -81,6 +82,7 @@ const DrawerHeader = styled('div')(({ theme }) => ({ })); export default function PersistentDrawerLeft() { + // @focus-start @padding 1 const theme = useTheme(); const [open, setOpen] = React.useState(false); @@ -193,4 +195,5 @@ export default function PersistentDrawerLeft() { ); + // @focus-end } diff --git a/docs/data/material/components/drawers/demos/persistent-left/client.ts b/docs/data/material/components/drawers/demos/persistent-left/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/drawers/demos/persistent-left/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/drawers/demos/persistent-left/index.ts b/docs/data/material/components/drawers/demos/persistent-left/index.ts new file mode 100644 index 00000000000000..a64560a0433d09 --- /dev/null +++ b/docs/data/material/components/drawers/demos/persistent-left/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PersistentDrawerLeft from './PersistentDrawerLeft'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PersistentDrawerLeft, { ClientProvider }); diff --git a/docs/data/material/components/drawers/PersistentDrawerRight.tsx b/docs/data/material/components/drawers/demos/persistent-right/PersistentDrawerRight.tsx similarity index 97% rename from docs/data/material/components/drawers/PersistentDrawerRight.tsx rename to docs/data/material/components/drawers/demos/persistent-right/PersistentDrawerRight.tsx index 78746b5478ac6e..ce6fe8f386e4f1 100644 --- a/docs/data/material/components/drawers/PersistentDrawerRight.tsx +++ b/docs/data/material/components/drawers/demos/persistent-right/PersistentDrawerRight.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import { styled, useTheme } from '@mui/material/styles'; import Box from '@mui/material/Box'; import Drawer from '@mui/material/Drawer'; -import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'; +import MuiAppBar from '@mui/material/AppBar'; +import type { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar'; import Toolbar from '@mui/material/Toolbar'; import CssBaseline from '@mui/material/CssBaseline'; import List from '@mui/material/List'; @@ -88,6 +89,7 @@ const DrawerHeader = styled('div')(({ theme }) => ({ })); export default function PersistentDrawerRight() { + // @focus-start @padding 1 const theme = useTheme(); const [open, setOpen] = React.useState(false); @@ -194,4 +196,5 @@ export default function PersistentDrawerRight() { ); + // @focus-end } diff --git a/docs/data/material/components/drawers/demos/persistent-right/client.ts b/docs/data/material/components/drawers/demos/persistent-right/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/drawers/demos/persistent-right/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/drawers/demos/persistent-right/index.ts b/docs/data/material/components/drawers/demos/persistent-right/index.ts new file mode 100644 index 00000000000000..6c77f822037317 --- /dev/null +++ b/docs/data/material/components/drawers/demos/persistent-right/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PersistentDrawerRight from './PersistentDrawerRight'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PersistentDrawerRight, { ClientProvider }); diff --git a/docs/data/material/components/drawers/ResponsiveDrawer.tsx b/docs/data/material/components/drawers/demos/responsive/ResponsiveDrawer.tsx similarity index 99% rename from docs/data/material/components/drawers/ResponsiveDrawer.tsx rename to docs/data/material/components/drawers/demos/responsive/ResponsiveDrawer.tsx index abd4df47889566..c6e095227d1938 100644 --- a/docs/data/material/components/drawers/ResponsiveDrawer.tsx +++ b/docs/data/material/components/drawers/demos/responsive/ResponsiveDrawer.tsx @@ -27,6 +27,7 @@ interface Props { } export default function ResponsiveDrawer(props: Props) { + // @focus-start @padding 1 const { window } = props; const [mobileOpen, setMobileOpen] = React.useState(false); const [isClosing, setIsClosing] = React.useState(false); @@ -176,4 +177,5 @@ export default function ResponsiveDrawer(props: Props) { ); + // @focus-end } diff --git a/docs/data/material/components/drawers/demos/responsive/client.ts b/docs/data/material/components/drawers/demos/responsive/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/drawers/demos/responsive/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/drawers/demos/responsive/index.ts b/docs/data/material/components/drawers/demos/responsive/index.ts new file mode 100644 index 00000000000000..bec6e60d404c97 --- /dev/null +++ b/docs/data/material/components/drawers/demos/responsive/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ResponsiveDrawer from './ResponsiveDrawer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ResponsiveDrawer, { ClientProvider }); diff --git a/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx b/docs/data/material/components/drawers/demos/swipeable-edge/SwipeableEdgeDrawer.tsx similarity index 98% rename from docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx rename to docs/data/material/components/drawers/demos/swipeable-edge/SwipeableEdgeDrawer.tsx index a247bdd170515a..224a97e936a454 100644 --- a/docs/data/material/components/drawers/SwipeableEdgeDrawer.tsx +++ b/docs/data/material/components/drawers/demos/swipeable-edge/SwipeableEdgeDrawer.tsx @@ -48,6 +48,7 @@ const Puller = styled('div')(({ theme }) => ({ })); export default function SwipeableEdgeDrawer(props: Props) { + // @focus-start @padding 1 const { window } = props; const [open, setOpen] = React.useState(false); @@ -102,4 +103,5 @@ export default function SwipeableEdgeDrawer(props: Props) { ); + // @focus-end } diff --git a/docs/data/material/components/drawers/demos/swipeable-edge/client.ts b/docs/data/material/components/drawers/demos/swipeable-edge/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/drawers/demos/swipeable-edge/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/drawers/demos/swipeable-edge/index.ts b/docs/data/material/components/drawers/demos/swipeable-edge/index.ts new file mode 100644 index 00000000000000..a98fbd42e6706e --- /dev/null +++ b/docs/data/material/components/drawers/demos/swipeable-edge/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SwipeableEdgeDrawer from './SwipeableEdgeDrawer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SwipeableEdgeDrawer, { ClientProvider }); diff --git a/docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx b/docs/data/material/components/drawers/demos/swipeable-temporary/SwipeableTemporaryDrawer.tsx similarity index 98% rename from docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx rename to docs/data/material/components/drawers/demos/swipeable-temporary/SwipeableTemporaryDrawer.tsx index 94e8a5bb06260e..e53b74fda24fb7 100644 --- a/docs/data/material/components/drawers/SwipeableTemporaryDrawer.tsx +++ b/docs/data/material/components/drawers/demos/swipeable-temporary/SwipeableTemporaryDrawer.tsx @@ -73,6 +73,7 @@ export default function SwipeableTemporaryDrawer() { return (
    + {/* @focus-start */} {(['left', 'right', 'top', 'bottom'] as const).map((anchor) => ( @@ -86,6 +87,7 @@ export default function SwipeableTemporaryDrawer() { ))} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/drawers/demos/swipeable-temporary/client.ts b/docs/data/material/components/drawers/demos/swipeable-temporary/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/drawers/demos/swipeable-temporary/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/drawers/demos/swipeable-temporary/index.ts b/docs/data/material/components/drawers/demos/swipeable-temporary/index.ts new file mode 100644 index 00000000000000..6ca30a8f544591 --- /dev/null +++ b/docs/data/material/components/drawers/demos/swipeable-temporary/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SwipeableTemporaryDrawer from './SwipeableTemporaryDrawer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SwipeableTemporaryDrawer, { ClientProvider }); diff --git a/docs/data/material/components/drawers/TemporaryDrawer.tsx b/docs/data/material/components/drawers/demos/temporary/TemporaryDrawer.tsx similarity index 97% rename from docs/data/material/components/drawers/TemporaryDrawer.tsx rename to docs/data/material/components/drawers/demos/temporary/TemporaryDrawer.tsx index 65bf707c0a93e7..04c7edca8ed859 100644 --- a/docs/data/material/components/drawers/TemporaryDrawer.tsx +++ b/docs/data/material/components/drawers/demos/temporary/TemporaryDrawer.tsx @@ -50,10 +50,12 @@ export default function TemporaryDrawer() { return (
    + {/* @focus-start */} {DrawerList} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/drawers/demos/temporary/client.ts b/docs/data/material/components/drawers/demos/temporary/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/drawers/demos/temporary/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/drawers/demos/temporary/index.ts b/docs/data/material/components/drawers/demos/temporary/index.ts new file mode 100644 index 00000000000000..6dcc92b92b75bd --- /dev/null +++ b/docs/data/material/components/drawers/demos/temporary/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TemporaryDrawer from './TemporaryDrawer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TemporaryDrawer, { ClientProvider }); diff --git a/docs/data/material/components/drawers/drawers.md b/docs/data/material/components/drawers/drawers.md index 74531f438b997e..6b58685c36d0ac 100644 --- a/docs/data/material/components/drawers/drawers.md +++ b/docs/data/material/components/drawers/drawers.md @@ -24,7 +24,7 @@ Temporary navigation drawers can toggle open or closed. Closed by default, the d The Drawer can be cancelled by clicking the overlay or pressing the Esc key. It closes when an item is selected, handled by controlling the `open` prop. -{{"demo": "TemporaryDrawer.js"}} +{{"component": "file://./demos/temporary/index.ts"}} ### Anchor @@ -32,7 +32,7 @@ Use the `anchor` prop to specify which side of the screen the Drawer should orig The default value is `left`. -{{"demo": "AnchorTemporaryDrawer.js"}} +{{"component": "file://./demos/anchor-temporary/index.ts"}} ### Swipeable @@ -42,7 +42,7 @@ This component comes with a 2 kB gzipped payload overhead. Some low-end mobile devices won't be able to follow the fingers at 60 FPS. You can use the `disableBackdropTransition` prop to help. -{{"demo": "SwipeableTemporaryDrawer.js"}} +{{"component": "file://./demos/swipeable-temporary/index.ts"}} The following properties are used in this documentation website for optimal usability of the component: @@ -66,7 +66,7 @@ You can configure the `SwipeableDrawer` to have a visible edge when closed. If you are on a desktop, you can toggle the drawer with the "OPEN" button. If you are on mobile, you can open the demo in CodeSandbox ("edit" icon) and swipe. -{{"demo": "SwipeableEdgeDrawer.js", "iframe": true, "disableLiveEdit": true, "height": 400, "maxWidth": 300}} +{{"component": "file://./demos/swipeable-edge/index.ts", "iframe": true, "disableLiveEdit": true, "height": 400, "maxWidth": 300}} ### Keep mounted @@ -93,7 +93,7 @@ Use `slots.transition` and `slotProps.transition` to replace it with another tra You can use the `temporary` variant to display a drawer for small screens and `permanent` for a drawer for wider screens. -{{"demo": "ResponsiveDrawer.js", "iframe": true, "disableLiveEdit": true}} +{{"component": "file://./demos/responsive/index.ts", "iframe": true, "disableLiveEdit": true}} ## Persistent drawer @@ -107,9 +107,9 @@ When the drawer is outside of the page grid and opens, the drawer forces other c Persistent navigation drawers are acceptable for all sizes larger than mobile. They are not recommended for apps with multiple levels of hierarchy that require using an up arrow for navigation. -{{"demo": "PersistentDrawerLeft.js", "iframe": true}} +{{"component": "file://./demos/persistent-left/index.ts", "iframe": true}} -{{"demo": "PersistentDrawerRight.js", "iframe": true}} +{{"component": "file://./demos/persistent-right/index.ts", "iframe": true}} ## Mini variant drawer @@ -119,7 +119,7 @@ When expanded, it appears as the standard persistent navigation drawer. The mini variant is recommended for apps sections that need quick selection access alongside content. -{{"demo": "MiniDrawer.js", "iframe": true}} +{{"component": "file://./demos/mini/index.ts", "iframe": true}} ## Permanent drawer @@ -131,12 +131,12 @@ Permanent navigation drawers are the **recommended default for desktop**. Apps focused on information consumption that use a left-to-right hierarchy. -{{"demo": "PermanentDrawerLeft.js", "iframe": true}} +{{"component": "file://./demos/permanent-left/index.ts", "iframe": true}} -{{"demo": "PermanentDrawerRight.js", "iframe": true}} +{{"component": "file://./demos/permanent-right/index.ts", "iframe": true}} ### Clipped under the app bar Apps focused on productivity that require balance across the screen. -{{"demo": "ClippedDrawer.js", "iframe": true}} +{{"component": "file://./demos/clipped/index.ts", "iframe": true}} diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.js b/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.js deleted file mode 100644 index 5183158712b997..00000000000000 --- a/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.js +++ /dev/null @@ -1,22 +0,0 @@ -import Box from '@mui/material/Box'; -import Fab from '@mui/material/Fab'; -import NavigationIcon from '@mui/icons-material/Navigation'; - -export default function FloatingActionButtonExtendedSize() { - return ( - :not(style)': { m: 1 } }}> - - - Extended - - - - Extended - - - - Extended - - - ); -} diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx.preview b/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx.preview deleted file mode 100644 index 8fd7b14b9adcc8..00000000000000 --- a/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - Extended - - - - Extended - - - - Extended - \ No newline at end of file diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonSize.js b/docs/data/material/components/floating-action-button/FloatingActionButtonSize.js deleted file mode 100644 index c384cece050f53..00000000000000 --- a/docs/data/material/components/floating-action-button/FloatingActionButtonSize.js +++ /dev/null @@ -1,19 +0,0 @@ -import Box from '@mui/material/Box'; -import Fab from '@mui/material/Fab'; -import AddIcon from '@mui/icons-material/Add'; - -export default function FloatingActionButtonSize() { - return ( - :not(style)': { m: 1 } }}> - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx.preview b/docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx.preview deleted file mode 100644 index fb3cea362f87e6..00000000000000 --- a/docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.js b/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.js deleted file mode 100644 index c8313b1319066e..00000000000000 --- a/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.js +++ /dev/null @@ -1,143 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { useTheme } from '@mui/material/styles'; -import AppBar from '@mui/material/AppBar'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import Typography from '@mui/material/Typography'; -import Zoom from '@mui/material/Zoom'; -import Fab from '@mui/material/Fab'; -import AddIcon from '@mui/icons-material/Add'; -import EditIcon from '@mui/icons-material/Edit'; -import UpIcon from '@mui/icons-material/KeyboardArrowUp'; -import { green } from '@mui/material/colors'; -import Box from '@mui/material/Box'; - -function TabPanel(props) { - const { children, value, index, ...other } = props; - - return ( - - ); -} - -TabPanel.propTypes = { - children: PropTypes.node, - index: PropTypes.number.isRequired, - value: PropTypes.number.isRequired, -}; - -function a11yProps(index) { - return { - id: `action-tab-${index}`, - 'aria-controls': `action-tabpanel-${index}`, - }; -} - -const fabStyle = { - position: 'absolute', - bottom: 16, - right: 16, -}; - -const fabGreenStyle = { - color: 'common.white', - bgcolor: green[500], - '&:hover': { - bgcolor: green[600], - }, -}; - -export default function FloatingActionButtonZoom() { - const theme = useTheme(); - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - const transitionDuration = { - enter: theme.transitions.duration.enteringScreen, - exit: theme.transitions.duration.leavingScreen, - }; - - const fabs = [ - { - color: 'primary', - sx: fabStyle, - icon: , - label: 'Add', - }, - { - color: 'secondary', - sx: fabStyle, - icon: , - label: 'Edit', - }, - { - color: 'inherit', - sx: { ...fabStyle, ...fabGreenStyle }, - icon: , - label: 'Expand', - }, - ]; - - return ( - - - - - - - - - - Item One - - - Item Two - - - Item Three - - {fabs.map((fab, index) => ( - - - {fab.icon} - - - ))} - - ); -} diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtons.js b/docs/data/material/components/floating-action-button/FloatingActionButtons.js deleted file mode 100644 index b7e88c57ee92bf..00000000000000 --- a/docs/data/material/components/floating-action-button/FloatingActionButtons.js +++ /dev/null @@ -1,26 +0,0 @@ -import Box from '@mui/material/Box'; -import Fab from '@mui/material/Fab'; -import AddIcon from '@mui/icons-material/Add'; -import EditIcon from '@mui/icons-material/Edit'; -import FavoriteIcon from '@mui/icons-material/Favorite'; -import NavigationIcon from '@mui/icons-material/Navigation'; - -export default function FloatingActionButtons() { - return ( - :not(style)': { m: 1 } }}> - - - - - - - - - Navigate - - - - - - ); -} diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtons.tsx.preview b/docs/data/material/components/floating-action-button/FloatingActionButtons.tsx.preview deleted file mode 100644 index eefdddcd6bd7e0..00000000000000 --- a/docs/data/material/components/floating-action-button/FloatingActionButtons.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - - Navigate - - - - \ No newline at end of file diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx b/docs/data/material/components/floating-action-button/demos/extended-size/FloatingActionButtonExtendedSize.tsx similarity index 92% rename from docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx rename to docs/data/material/components/floating-action-button/demos/extended-size/FloatingActionButtonExtendedSize.tsx index 5183158712b997..47b1c4f161cf14 100644 --- a/docs/data/material/components/floating-action-button/FloatingActionButtonExtendedSize.tsx +++ b/docs/data/material/components/floating-action-button/demos/extended-size/FloatingActionButtonExtendedSize.tsx @@ -5,6 +5,7 @@ import NavigationIcon from '@mui/icons-material/Navigation'; export default function FloatingActionButtonExtendedSize() { return ( :not(style)': { m: 1 } }}> + {/* @focus-start */} Extended @@ -17,6 +18,7 @@ export default function FloatingActionButtonExtendedSize() { Extended + {/* @focus-end */} ); } diff --git a/docs/data/material/components/floating-action-button/demos/extended-size/client.ts b/docs/data/material/components/floating-action-button/demos/extended-size/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/floating-action-button/demos/extended-size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/floating-action-button/demos/extended-size/index.ts b/docs/data/material/components/floating-action-button/demos/extended-size/index.ts new file mode 100644 index 00000000000000..3fc9645eeb1fad --- /dev/null +++ b/docs/data/material/components/floating-action-button/demos/extended-size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FloatingActionButtonExtendedSize from './FloatingActionButtonExtendedSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FloatingActionButtonExtendedSize, { ClientProvider }); diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtons.tsx b/docs/data/material/components/floating-action-button/demos/floating-action-buttons/FloatingActionButtons.tsx similarity index 93% rename from docs/data/material/components/floating-action-button/FloatingActionButtons.tsx rename to docs/data/material/components/floating-action-button/demos/floating-action-buttons/FloatingActionButtons.tsx index b7e88c57ee92bf..32cadf6b05312f 100644 --- a/docs/data/material/components/floating-action-button/FloatingActionButtons.tsx +++ b/docs/data/material/components/floating-action-button/demos/floating-action-buttons/FloatingActionButtons.tsx @@ -8,6 +8,7 @@ import NavigationIcon from '@mui/icons-material/Navigation'; export default function FloatingActionButtons() { return ( :not(style)': { m: 1 } }}> + {/* @focus-start */} @@ -21,6 +22,7 @@ export default function FloatingActionButtons() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/floating-action-button/demos/floating-action-buttons/client.ts b/docs/data/material/components/floating-action-button/demos/floating-action-buttons/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/floating-action-button/demos/floating-action-buttons/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/floating-action-button/demos/floating-action-buttons/index.ts b/docs/data/material/components/floating-action-button/demos/floating-action-buttons/index.ts new file mode 100644 index 00000000000000..fc794597918e9a --- /dev/null +++ b/docs/data/material/components/floating-action-button/demos/floating-action-buttons/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FloatingActionButtons from './FloatingActionButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FloatingActionButtons, { ClientProvider }); diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx b/docs/data/material/components/floating-action-button/demos/size/FloatingActionButtonSize.tsx similarity index 90% rename from docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx rename to docs/data/material/components/floating-action-button/demos/size/FloatingActionButtonSize.tsx index c384cece050f53..e343c0adf232c0 100644 --- a/docs/data/material/components/floating-action-button/FloatingActionButtonSize.tsx +++ b/docs/data/material/components/floating-action-button/demos/size/FloatingActionButtonSize.tsx @@ -5,6 +5,7 @@ import AddIcon from '@mui/icons-material/Add'; export default function FloatingActionButtonSize() { return ( :not(style)': { m: 1 } }}> + {/* @focus-start */} @@ -14,6 +15,7 @@ export default function FloatingActionButtonSize() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/floating-action-button/demos/size/client.ts b/docs/data/material/components/floating-action-button/demos/size/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/floating-action-button/demos/size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/floating-action-button/demos/size/index.ts b/docs/data/material/components/floating-action-button/demos/size/index.ts new file mode 100644 index 00000000000000..b3476ac545bf6f --- /dev/null +++ b/docs/data/material/components/floating-action-button/demos/size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FloatingActionButtonSize from './FloatingActionButtonSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FloatingActionButtonSize, { ClientProvider }); diff --git a/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.tsx b/docs/data/material/components/floating-action-button/demos/zoom/FloatingActionButtonZoom.tsx similarity index 97% rename from docs/data/material/components/floating-action-button/FloatingActionButtonZoom.tsx rename to docs/data/material/components/floating-action-button/demos/zoom/FloatingActionButtonZoom.tsx index 0af35b2bfa8565..41a29250df0a0c 100644 --- a/docs/data/material/components/floating-action-button/FloatingActionButtonZoom.tsx +++ b/docs/data/material/components/floating-action-button/demos/zoom/FloatingActionButtonZoom.tsx @@ -11,7 +11,7 @@ import EditIcon from '@mui/icons-material/Edit'; import UpIcon from '@mui/icons-material/KeyboardArrowUp'; import { green } from '@mui/material/colors'; import Box from '@mui/material/Box'; -import { SxProps } from '@mui/system'; +import type { SxProps } from '@mui/system'; interface TabPanelProps { children?: React.ReactNode; @@ -59,6 +59,7 @@ const fabGreenStyle = { }; export default function FloatingActionButtonZoom() { + // @focus-start @padding 1 const theme = useTheme(); const [value, setValue] = React.useState(0); @@ -141,4 +142,5 @@ export default function FloatingActionButtonZoom() { ))} ); + // @focus-end } diff --git a/docs/data/material/components/floating-action-button/demos/zoom/client.ts b/docs/data/material/components/floating-action-button/demos/zoom/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/floating-action-button/demos/zoom/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/floating-action-button/demos/zoom/index.ts b/docs/data/material/components/floating-action-button/demos/zoom/index.ts new file mode 100644 index 00000000000000..e9ae1c35e15a57 --- /dev/null +++ b/docs/data/material/components/floating-action-button/demos/zoom/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FloatingActionButtonZoom from './FloatingActionButtonZoom'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FloatingActionButtonZoom, { ClientProvider }); diff --git a/docs/data/material/components/floating-action-button/floating-action-button.md b/docs/data/material/components/floating-action-button/floating-action-button.md index cd565f8dfc8949..1e7b2234a2d147 100644 --- a/docs/data/material/components/floating-action-button/floating-action-button.md +++ b/docs/data/material/components/floating-action-button/floating-action-button.md @@ -21,15 +21,15 @@ Only one component is recommended per screen to represent the most common action ## Basic FAB -{{"demo": "FloatingActionButtons.js"}} +{{"component": "file://./demos/floating-action-buttons/index.ts"}} ## Size By default, the size is `large`. Use the `size` prop for smaller floating action buttons. -{{"demo": "FloatingActionButtonSize.js"}} +{{"component": "file://./demos/size/index.ts"}} -{{"demo": "FloatingActionButtonExtendedSize.js"}} +{{"component": "file://./demos/extended-size/index.ts"}} ## Animation @@ -42,4 +42,4 @@ The Zoom transition can be used to achieve this. Note that since both the exitin animations are triggered at the same time, we use `enterDelay` to allow the outgoing Floating Action Button's animation to finish before the new one enters. -{{"demo": "FloatingActionButtonZoom.js", "bg": true}} +{{"component": "file://./demos/zoom/index.ts", "bg": true}} diff --git a/docs/data/material/components/grid/AutoGrid.js b/docs/data/material/components/grid/AutoGrid.js deleted file mode 100644 index d5e720e1412422..00000000000000 --- a/docs/data/material/components/grid/AutoGrid.js +++ /dev/null @@ -1,33 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function AutoGrid() { - return ( - - - - size=grow - - - size=6 - - - size=grow - - - - ); -} diff --git a/docs/data/material/components/grid/AutoGrid.tsx b/docs/data/material/components/grid/AutoGrid.tsx deleted file mode 100644 index d5e720e1412422..00000000000000 --- a/docs/data/material/components/grid/AutoGrid.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function AutoGrid() { - return ( - - - - size=grow - - - size=6 - - - size=grow - - - - ); -} diff --git a/docs/data/material/components/grid/AutoGrid.tsx.preview b/docs/data/material/components/grid/AutoGrid.tsx.preview deleted file mode 100644 index 422f5122eb59a6..00000000000000 --- a/docs/data/material/components/grid/AutoGrid.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - - size=grow - - - size=6 - - - size=grow - - \ No newline at end of file diff --git a/docs/data/material/components/grid/BasicGrid.js b/docs/data/material/components/grid/BasicGrid.js deleted file mode 100644 index 3f508ee2f1ae0b..00000000000000 --- a/docs/data/material/components/grid/BasicGrid.js +++ /dev/null @@ -1,36 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function BasicGrid() { - return ( - - - - size=8 - - - size=4 - - - size=4 - - - size=8 - - - - ); -} diff --git a/docs/data/material/components/grid/BasicGrid.tsx b/docs/data/material/components/grid/BasicGrid.tsx deleted file mode 100644 index 3f508ee2f1ae0b..00000000000000 --- a/docs/data/material/components/grid/BasicGrid.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function BasicGrid() { - return ( - - - - size=8 - - - size=4 - - - size=4 - - - size=8 - - - - ); -} diff --git a/docs/data/material/components/grid/BasicGrid.tsx.preview b/docs/data/material/components/grid/BasicGrid.tsx.preview deleted file mode 100644 index 94df5430aefb49..00000000000000 --- a/docs/data/material/components/grid/BasicGrid.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - - size=8 - - - size=4 - - - size=4 - - - size=8 - - \ No newline at end of file diff --git a/docs/data/material/components/grid/CenteredElementGrid.js b/docs/data/material/components/grid/CenteredElementGrid.js deleted file mode 100644 index 0f5fa14c9da4a8..00000000000000 --- a/docs/data/material/components/grid/CenteredElementGrid.js +++ /dev/null @@ -1,29 +0,0 @@ -import Avatar from '@mui/material/Avatar'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; - -export default function CenteredElementGrid() { - return ( - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/grid/ColumnLayoutInsideGrid.js b/docs/data/material/components/grid/ColumnLayoutInsideGrid.js deleted file mode 100644 index 97944a56346868..00000000000000 --- a/docs/data/material/components/grid/ColumnLayoutInsideGrid.js +++ /dev/null @@ -1,35 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; -import Stack from '@mui/material/Stack'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function ColumnLayoutInsideGrid() { - return ( - - - - - Column 1 - Row 1 - Column 1 - Row 2 - Column 1 - Row 3 - - - - Column 2 - - - - ); -} diff --git a/docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx.preview b/docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx.preview deleted file mode 100644 index 14c49db798e79f..00000000000000 --- a/docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - - Column 1 - Row 1 - Column 1 - Row 2 - Column 1 - Row 3 - - - - Column 2 - - \ No newline at end of file diff --git a/docs/data/material/components/grid/ColumnsGrid.js b/docs/data/material/components/grid/ColumnsGrid.js deleted file mode 100644 index 6adb4f0de58d5f..00000000000000 --- a/docs/data/material/components/grid/ColumnsGrid.js +++ /dev/null @@ -1,30 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function ColumnsGrid() { - return ( - - - - size=8 - - - size=8 - - - - ); -} diff --git a/docs/data/material/components/grid/ColumnsGrid.tsx b/docs/data/material/components/grid/ColumnsGrid.tsx deleted file mode 100644 index 6adb4f0de58d5f..00000000000000 --- a/docs/data/material/components/grid/ColumnsGrid.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function ColumnsGrid() { - return ( - - - - size=8 - - - size=8 - - - - ); -} diff --git a/docs/data/material/components/grid/ColumnsGrid.tsx.preview b/docs/data/material/components/grid/ColumnsGrid.tsx.preview deleted file mode 100644 index 25d454075c6863..00000000000000 --- a/docs/data/material/components/grid/ColumnsGrid.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - - size=8 - - - size=8 - - \ No newline at end of file diff --git a/docs/data/material/components/grid/FullBorderedGrid.js b/docs/data/material/components/grid/FullBorderedGrid.js deleted file mode 100644 index b516e9032275a3..00000000000000 --- a/docs/data/material/components/grid/FullBorderedGrid.js +++ /dev/null @@ -1,36 +0,0 @@ -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; - -export default function FullBorderedGrid() { - return ( - - div': { - borderRight: 'var(--Grid-borderWidth) solid', - borderBottom: 'var(--Grid-borderWidth) solid', - borderColor: 'divider', - }, - }} - > - {[...Array(6)].map((_, index) => ( - - ))} - - - ); -} diff --git a/docs/data/material/components/grid/FullWidthGrid.js b/docs/data/material/components/grid/FullWidthGrid.js deleted file mode 100644 index be186d30f5bbb8..00000000000000 --- a/docs/data/material/components/grid/FullWidthGrid.js +++ /dev/null @@ -1,36 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function FullWidthGrid() { - return ( - - - - xs=6 md=8 - - - xs=6 md=4 - - - xs=6 md=4 - - - xs=6 md=8 - - - - ); -} diff --git a/docs/data/material/components/grid/FullWidthGrid.tsx b/docs/data/material/components/grid/FullWidthGrid.tsx deleted file mode 100644 index be186d30f5bbb8..00000000000000 --- a/docs/data/material/components/grid/FullWidthGrid.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function FullWidthGrid() { - return ( - - - - xs=6 md=8 - - - xs=6 md=4 - - - xs=6 md=4 - - - xs=6 md=8 - - - - ); -} diff --git a/docs/data/material/components/grid/FullWidthGrid.tsx.preview b/docs/data/material/components/grid/FullWidthGrid.tsx.preview deleted file mode 100644 index 255782d9b57349..00000000000000 --- a/docs/data/material/components/grid/FullWidthGrid.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - - xs=6 md=8 - - - xs=6 md=4 - - - xs=6 md=4 - - - xs=6 md=8 - - \ No newline at end of file diff --git a/docs/data/material/components/grid/HalfBorderedGrid.js b/docs/data/material/components/grid/HalfBorderedGrid.js deleted file mode 100644 index a26a26dba0f398..00000000000000 --- a/docs/data/material/components/grid/HalfBorderedGrid.js +++ /dev/null @@ -1,38 +0,0 @@ -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; - -export default function HalfBorderedGrid() { - const colWidth = { xs: 12, sm: 6, md: 4, lg: 3 }; - return ( - - ({ - '--Grid-borderWidth': '1px', - borderTop: 'var(--Grid-borderWidth) solid', - borderColor: 'divider', - '& > div': { - borderRight: 'var(--Grid-borderWidth) solid', - borderBottom: 'var(--Grid-borderWidth) solid', - borderColor: 'divider', - ...Object.keys(colWidth).reduce( - (result, key) => ({ - ...result, - [`&:nth-of-type(${12 / colWidth[key]}n)`]: { - [theme.breakpoints.only(key)]: { - borderRight: 'none', - }, - }, - }), - {}, - ), - }, - })} - > - {[...Array(6)].map((_, index) => ( - - ))} - - - ); -} diff --git a/docs/data/material/components/grid/InteractiveGrid.js b/docs/data/material/components/grid/InteractiveGrid.js deleted file mode 100644 index 5f904add0d1fe7..00000000000000 --- a/docs/data/material/components/grid/InteractiveGrid.js +++ /dev/null @@ -1,174 +0,0 @@ -import * as React from 'react'; -import Grid from '@mui/material/Grid'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import RadioGroup from '@mui/material/RadioGroup'; -import Radio from '@mui/material/Radio'; -import Paper from '@mui/material/Paper'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -export default function InteractiveGrid() { - const [direction, setDirection] = React.useState('row'); - const [justifyContent, setJustifyContent] = React.useState('center'); - const [alignItems, setAlignItems] = React.useState('center'); - - const jsx = ` - -`; - - return ( - - - - {[0, 1, 2].map((value) => ( - - ({ - p: 2, - backgroundColor: '#fff', - height: '100%', - color: 'text.secondary', - pt: `${(value + 1) * 10}px`, - pb: `${(value + 1) * 10}px`, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), - })} - > - {`Cell ${value + 1}`} - - - ))} - - - - - - - - direction - { - setDirection(event.target.value); - }} - > - } label="row" /> - } - label="row-reverse" - /> - - - - - - justifyContent - { - setJustifyContent(event.target.value); - }} - > - } - label="flex-start" - /> - } - label="center" - /> - } - label="flex-end" - /> - } - label="space-between" - /> - } - label="space-around" - /> - } - label="space-evenly" - /> - - - - - - alignItems - { - setAlignItems(event.target.value); - }} - > - } - label="flex-start" - /> - } - label="center" - /> - } - label="flex-end" - /> - } - label="stretch" - /> - } - label="baseline" - /> - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/grid/NestedGrid.js b/docs/data/material/components/grid/NestedGrid.js deleted file mode 100644 index 8d92b226f3723a..00000000000000 --- a/docs/data/material/components/grid/NestedGrid.js +++ /dev/null @@ -1,114 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function NestedGrid() { - return ( - - - - Email subscribe section - - - - - - Category A - - -
  • Link 1.1
    • -
  • Link 1.2
    • -
  • Link 1.3
    • - - - - - - - Category B - - -
  • Link 2.1
    • -
  • Link 2.2
    • -
  • Link 2.3
    • -     -     -     - - - - Category C - - -
  • Link 3.1
    • -
  • Link 3.2
    • -
  • Link 3.3
    • -     -     -     - - - - Category D - - -
  • Link 4.1
    • -
  • Link 4.2
    • -
  • Link 4.3
    • -     -     -     - - - - © Copyright - - - - Link A - - - Link B - - - Link C - - - - - - ); -} diff --git a/docs/data/material/components/grid/NestedGrid.tsx b/docs/data/material/components/grid/NestedGrid.tsx deleted file mode 100644 index 8d92b226f3723a..00000000000000 --- a/docs/data/material/components/grid/NestedGrid.tsx +++ /dev/null @@ -1,114 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function NestedGrid() { - return ( - - - - Email subscribe section - - - - - - Category A - - -
  • Link 1.1
    • -
  • Link 1.2
    • -
  • Link 1.3
    • -     -     -     - - - - Category B - - -
  • Link 2.1
    • -
  • Link 2.2
    • -
  • Link 2.3
    • -     -     -     - - - - Category C - - -
  • Link 3.1
    • -
  • Link 3.2
    • -
  • Link 3.3
    • -     -     -     - - - - Category D - - -
  • Link 4.1
    • -
  • Link 4.2
    • -
  • Link 4.3
    • -     -     -     -     - - - © Copyright - - - - Link A - - - Link B - - - Link C - - - -     -     - ); -} diff --git a/docs/data/material/components/grid/NestedGridColumns.js b/docs/data/material/components/grid/NestedGridColumns.js deleted file mode 100644 index 1e9f23d290708a..00000000000000 --- a/docs/data/material/components/grid/NestedGridColumns.js +++ /dev/null @@ -1,46 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function NestedGridColumns() { - return ( - - - - size=8/24 - - - - nested size=12/24 - - - nested size=12/24 - - - - size=8/24 - - - - nested size=6/12 - - - nested size=6/12 - - - - - ); -} diff --git a/docs/data/material/components/grid/OffsetGrid.js b/docs/data/material/components/grid/OffsetGrid.js deleted file mode 100644 index 26b9b7f12e83ff..00000000000000 --- a/docs/data/material/components/grid/OffsetGrid.js +++ /dev/null @@ -1,33 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function OffsetGrid() { - return ( - - - 1 - - - 2 - - - 3 - - - 4 - - - ); -} diff --git a/docs/data/material/components/grid/OffsetGrid.tsx b/docs/data/material/components/grid/OffsetGrid.tsx deleted file mode 100644 index 26b9b7f12e83ff..00000000000000 --- a/docs/data/material/components/grid/OffsetGrid.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function OffsetGrid() { - return ( - - - 1 - - - 2 - - - 3 - - - 4 - - - ); -} diff --git a/docs/data/material/components/grid/OffsetGrid.tsx.preview b/docs/data/material/components/grid/OffsetGrid.tsx.preview deleted file mode 100644 index 946759cedfe43c..00000000000000 --- a/docs/data/material/components/grid/OffsetGrid.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - - 1 - - - 2 - - - 3 - - - 4 - - \ No newline at end of file diff --git a/docs/data/material/components/grid/ResponsiveGrid.js b/docs/data/material/components/grid/ResponsiveGrid.js deleted file mode 100644 index 500e7bf1c50193..00000000000000 --- a/docs/data/material/components/grid/ResponsiveGrid.js +++ /dev/null @@ -1,29 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(2), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function ResponsiveGrid() { - return ( - - - {Array.from(Array(6)).map((_, index) => ( - - {index + 1} - - ))} - - - ); -} diff --git a/docs/data/material/components/grid/ResponsiveGrid.tsx b/docs/data/material/components/grid/ResponsiveGrid.tsx deleted file mode 100644 index 500e7bf1c50193..00000000000000 --- a/docs/data/material/components/grid/ResponsiveGrid.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(2), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function ResponsiveGrid() { - return ( - - - {Array.from(Array(6)).map((_, index) => ( - - {index + 1} - - ))} - - - ); -} diff --git a/docs/data/material/components/grid/ResponsiveGrid.tsx.preview b/docs/data/material/components/grid/ResponsiveGrid.tsx.preview deleted file mode 100644 index b960ec563a5e61..00000000000000 --- a/docs/data/material/components/grid/ResponsiveGrid.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - {Array.from(Array(6)).map((_, index) => ( - - {index + 1} - - ))} - \ No newline at end of file diff --git a/docs/data/material/components/grid/RowAndColumnSpacing.js b/docs/data/material/components/grid/RowAndColumnSpacing.js deleted file mode 100644 index c61f32fb9a2580..00000000000000 --- a/docs/data/material/components/grid/RowAndColumnSpacing.js +++ /dev/null @@ -1,36 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Grid from '@mui/material/Grid'; -import Paper from '@mui/material/Paper'; -import Box from '@mui/material/Box'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function RowAndColumnSpacing() { - return ( - - - - 1 - - - 2 - - - 3 - - - 4 - - - - ); -} diff --git a/docs/data/material/components/grid/RowAndColumnSpacing.tsx b/docs/data/material/components/grid/RowAndColumnSpacing.tsx deleted file mode 100644 index c61f32fb9a2580..00000000000000 --- a/docs/data/material/components/grid/RowAndColumnSpacing.tsx +++ /dev/null @@ -1,36 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Grid from '@mui/material/Grid'; -import Paper from '@mui/material/Paper'; -import Box from '@mui/material/Box'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function RowAndColumnSpacing() { - return ( - - - - 1 - - - 2 - - - 3 - - - 4 - - - - ); -} diff --git a/docs/data/material/components/grid/RowAndColumnSpacing.tsx.preview b/docs/data/material/components/grid/RowAndColumnSpacing.tsx.preview deleted file mode 100644 index 83d7265a44d051..00000000000000 --- a/docs/data/material/components/grid/RowAndColumnSpacing.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - - 1 - - - 2 - - - 3 - - - 4 - - \ No newline at end of file diff --git a/docs/data/material/components/grid/SpacingGrid.js b/docs/data/material/components/grid/SpacingGrid.js deleted file mode 100644 index bf2c4f496a21ed..00000000000000 --- a/docs/data/material/components/grid/SpacingGrid.js +++ /dev/null @@ -1,74 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; -import FormLabel from '@mui/material/FormLabel'; -import FormControl from '@mui/material/FormControl'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import RadioGroup from '@mui/material/RadioGroup'; -import Radio from '@mui/material/Radio'; -import Paper from '@mui/material/Paper'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -export default function SpacingGrid() { - const [spacing, setSpacing] = React.useState(2); - - const handleChange = (event) => { - setSpacing(Number(event.target.value)); - }; - - const jsx = ` - -`; - - return ( - - - {[0, 1, 2].map((value) => ( - - ({ - height: 140, - width: 100, - backgroundColor: '#fff', - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), - })} - /> - - ))} - - - - spacing - - {[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => ( - } - label={value.toString()} - /> - ))} - - - - - - ); -} diff --git a/docs/data/material/components/grid/SpacingGrid.tsx b/docs/data/material/components/grid/SpacingGrid.tsx deleted file mode 100644 index 9d7e5691ec78ce..00000000000000 --- a/docs/data/material/components/grid/SpacingGrid.tsx +++ /dev/null @@ -1,74 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; -import FormLabel from '@mui/material/FormLabel'; -import FormControl from '@mui/material/FormControl'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import RadioGroup from '@mui/material/RadioGroup'; -import Radio from '@mui/material/Radio'; -import Paper from '@mui/material/Paper'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -export default function SpacingGrid() { - const [spacing, setSpacing] = React.useState(2); - - const handleChange = (event: React.ChangeEvent) => { - setSpacing(Number((event.target as HTMLInputElement).value)); - }; - - const jsx = ` - -`; - - return ( - - - {[0, 1, 2].map((value) => ( - - ({ - height: 140, - width: 100, - backgroundColor: '#fff', - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), - })} - /> - - ))} - - - - spacing - - {[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => ( - } - label={value.toString()} - /> - ))} - - - - - - ); -} diff --git a/docs/data/material/components/grid/VariableWidthGrid.js b/docs/data/material/components/grid/VariableWidthGrid.js deleted file mode 100644 index 0c7c188076f4ad..00000000000000 --- a/docs/data/material/components/grid/VariableWidthGrid.js +++ /dev/null @@ -1,33 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function VariableWidthGrid() { - return ( - - - - size=auto - - - size=6 - - - size=grow - - - - ); -} diff --git a/docs/data/material/components/grid/VariableWidthGrid.tsx b/docs/data/material/components/grid/VariableWidthGrid.tsx deleted file mode 100644 index 0c7c188076f4ad..00000000000000 --- a/docs/data/material/components/grid/VariableWidthGrid.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Grid from '@mui/material/Grid'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function VariableWidthGrid() { - return ( - - - - size=auto - - - size=6 - - - size=grow - - - - ); -} diff --git a/docs/data/material/components/grid/VariableWidthGrid.tsx.preview b/docs/data/material/components/grid/VariableWidthGrid.tsx.preview deleted file mode 100644 index e88443265d2ec0..00000000000000 --- a/docs/data/material/components/grid/VariableWidthGrid.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - - size=auto - - - size=6 - - - size=grow - - \ No newline at end of file diff --git a/docs/data/material/components/grid/demos/auto/AutoGrid.tsx b/docs/data/material/components/grid/demos/auto/AutoGrid.tsx new file mode 100644 index 00000000000000..3eed5ffe9ae5df --- /dev/null +++ b/docs/data/material/components/grid/demos/auto/AutoGrid.tsx @@ -0,0 +1,35 @@ +import { styled } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Grid from '@mui/material/Grid'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: (theme.vars ?? theme).palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function AutoGrid() { + return ( + + {/* @focus-start */} + + + size=grow + + + size=6 + + + size=grow + + + {/* @focus-end */} + + ); +} diff --git a/docs/data/material/components/grid/demos/auto/client.ts b/docs/data/material/components/grid/demos/auto/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/auto/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/auto/index.ts b/docs/data/material/components/grid/demos/auto/index.ts new file mode 100644 index 00000000000000..7a9705b942bf67 --- /dev/null +++ b/docs/data/material/components/grid/demos/auto/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AutoGrid from './AutoGrid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AutoGrid, { ClientProvider }); diff --git a/docs/data/material/components/grid/demos/basic/BasicGrid.tsx b/docs/data/material/components/grid/demos/basic/BasicGrid.tsx new file mode 100644 index 00000000000000..13125531ad2acb --- /dev/null +++ b/docs/data/material/components/grid/demos/basic/BasicGrid.tsx @@ -0,0 +1,38 @@ +import { styled } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Grid from '@mui/material/Grid'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: (theme.vars ?? theme).palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function BasicGrid() { + return ( + + {/* @focus-start */} + + + size=8 + + + size=4 + + + size=4 + + + size=8 + + + {/* @focus-end */} + + ); +} diff --git a/docs/data/material/components/grid/demos/basic/client.ts b/docs/data/material/components/grid/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/basic/index.ts b/docs/data/material/components/grid/demos/basic/index.ts new file mode 100644 index 00000000000000..48cbf9bd50bfed --- /dev/null +++ b/docs/data/material/components/grid/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicGrid from './BasicGrid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicGrid, { ClientProvider }); diff --git a/docs/data/material/components/grid/CenteredElementGrid.tsx b/docs/data/material/components/grid/demos/centered-element/CenteredElementGrid.tsx similarity index 94% rename from docs/data/material/components/grid/CenteredElementGrid.tsx rename to docs/data/material/components/grid/demos/centered-element/CenteredElementGrid.tsx index 0f5fa14c9da4a8..a18deab3589997 100644 --- a/docs/data/material/components/grid/CenteredElementGrid.tsx +++ b/docs/data/material/components/grid/demos/centered-element/CenteredElementGrid.tsx @@ -5,6 +5,7 @@ import Grid from '@mui/material/Grid'; export default function CenteredElementGrid() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/grid/demos/centered-element/client.ts b/docs/data/material/components/grid/demos/centered-element/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/centered-element/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/centered-element/index.ts b/docs/data/material/components/grid/demos/centered-element/index.ts new file mode 100644 index 00000000000000..c3fab6f3128346 --- /dev/null +++ b/docs/data/material/components/grid/demos/centered-element/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CenteredElementGrid from './CenteredElementGrid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CenteredElementGrid, { ClientProvider }); diff --git a/docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx b/docs/data/material/components/grid/demos/column-layout-inside/ColumnLayoutInsideGrid.tsx similarity index 94% rename from docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx rename to docs/data/material/components/grid/demos/column-layout-inside/ColumnLayoutInsideGrid.tsx index 97944a56346868..8ded310a959926 100644 --- a/docs/data/material/components/grid/ColumnLayoutInsideGrid.tsx +++ b/docs/data/material/components/grid/demos/column-layout-inside/ColumnLayoutInsideGrid.tsx @@ -18,6 +18,7 @@ const Item = styled(Paper)(({ theme }) => ({ export default function ColumnLayoutInsideGrid() { return ( + {/* @focus-start */} @@ -30,6 +31,7 @@ export default function ColumnLayoutInsideGrid() { Column 2 + {/* @focus-end */} ); } diff --git a/docs/data/material/components/grid/demos/column-layout-inside/client.ts b/docs/data/material/components/grid/demos/column-layout-inside/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/column-layout-inside/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/column-layout-inside/index.ts b/docs/data/material/components/grid/demos/column-layout-inside/index.ts new file mode 100644 index 00000000000000..7a7f3d2ab92a8a --- /dev/null +++ b/docs/data/material/components/grid/demos/column-layout-inside/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColumnLayoutInsideGrid from './ColumnLayoutInsideGrid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColumnLayoutInsideGrid, { ClientProvider }); diff --git a/docs/data/material/components/grid/demos/columns/ColumnsGrid.tsx b/docs/data/material/components/grid/demos/columns/ColumnsGrid.tsx new file mode 100644 index 00000000000000..b9beebd7524782 --- /dev/null +++ b/docs/data/material/components/grid/demos/columns/ColumnsGrid.tsx @@ -0,0 +1,32 @@ +import { styled } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Grid from '@mui/material/Grid'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: (theme.vars ?? theme).palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function ColumnsGrid() { + return ( + + {/* @focus-start */} + + + size=8 + + + size=8 + + + {/* @focus-end */} + + ); +} diff --git a/docs/data/material/components/grid/demos/columns/client.ts b/docs/data/material/components/grid/demos/columns/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/columns/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/columns/index.ts b/docs/data/material/components/grid/demos/columns/index.ts new file mode 100644 index 00000000000000..c53dbcfa287e49 --- /dev/null +++ b/docs/data/material/components/grid/demos/columns/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColumnsGrid from './ColumnsGrid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColumnsGrid, { ClientProvider }); diff --git a/docs/data/material/components/grid/FullBorderedGrid.tsx b/docs/data/material/components/grid/demos/full-bordered/FullBorderedGrid.tsx similarity index 94% rename from docs/data/material/components/grid/FullBorderedGrid.tsx rename to docs/data/material/components/grid/demos/full-bordered/FullBorderedGrid.tsx index b516e9032275a3..62445d043c3f30 100644 --- a/docs/data/material/components/grid/FullBorderedGrid.tsx +++ b/docs/data/material/components/grid/demos/full-bordered/FullBorderedGrid.tsx @@ -4,6 +4,7 @@ import Grid from '@mui/material/Grid'; export default function FullBorderedGrid() { return ( + {/* @focus-start */} ))} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/grid/demos/full-bordered/client.ts b/docs/data/material/components/grid/demos/full-bordered/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/full-bordered/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/full-bordered/index.ts b/docs/data/material/components/grid/demos/full-bordered/index.ts new file mode 100644 index 00000000000000..1797c46d0b2fe0 --- /dev/null +++ b/docs/data/material/components/grid/demos/full-bordered/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FullBorderedGrid from './FullBorderedGrid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FullBorderedGrid, { ClientProvider }); diff --git a/docs/data/material/components/grid/demos/full-width/FullWidthGrid.tsx b/docs/data/material/components/grid/demos/full-width/FullWidthGrid.tsx new file mode 100644 index 00000000000000..a569651a547ea2 --- /dev/null +++ b/docs/data/material/components/grid/demos/full-width/FullWidthGrid.tsx @@ -0,0 +1,38 @@ +import { styled } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Grid from '@mui/material/Grid'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: (theme.vars ?? theme).palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function FullWidthGrid() { + return ( + + {/* @focus-start */} + + + xs=6 md=8 + + + xs=6 md=4 + + + xs=6 md=4 + + + xs=6 md=8 + + + {/* @focus-end */} + + ); +} diff --git a/docs/data/material/components/grid/demos/full-width/client.ts b/docs/data/material/components/grid/demos/full-width/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/full-width/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/full-width/index.ts b/docs/data/material/components/grid/demos/full-width/index.ts new file mode 100644 index 00000000000000..3871a3dce1bba1 --- /dev/null +++ b/docs/data/material/components/grid/demos/full-width/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FullWidthGrid from './FullWidthGrid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FullWidthGrid, { ClientProvider }); diff --git a/docs/data/material/components/grid/HalfBorderedGrid.tsx b/docs/data/material/components/grid/demos/half-bordered/HalfBorderedGrid.tsx similarity index 96% rename from docs/data/material/components/grid/HalfBorderedGrid.tsx rename to docs/data/material/components/grid/demos/half-bordered/HalfBorderedGrid.tsx index 938b43e06ed82a..a8d697ddd5e0f6 100644 --- a/docs/data/material/components/grid/HalfBorderedGrid.tsx +++ b/docs/data/material/components/grid/demos/half-bordered/HalfBorderedGrid.tsx @@ -2,6 +2,7 @@ import Box from '@mui/material/Box'; import Grid from '@mui/material/Grid'; export default function HalfBorderedGrid() { + // @focus-start @padding 1 const colWidth = { xs: 12, sm: 6, md: 4, lg: 3 } as const; return ( @@ -35,4 +36,5 @@ export default function HalfBorderedGrid() { ); + // @focus-end } diff --git a/docs/data/material/components/grid/demos/half-bordered/client.ts b/docs/data/material/components/grid/demos/half-bordered/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/half-bordered/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/half-bordered/index.ts b/docs/data/material/components/grid/demos/half-bordered/index.ts new file mode 100644 index 00000000000000..12655d499353ab --- /dev/null +++ b/docs/data/material/components/grid/demos/half-bordered/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HalfBorderedGrid from './HalfBorderedGrid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HalfBorderedGrid, { ClientProvider }); diff --git a/docs/data/material/components/grid/InteractiveGrid.tsx b/docs/data/material/components/grid/demos/interactive/InteractiveGrid.tsx similarity index 97% rename from docs/data/material/components/grid/InteractiveGrid.tsx rename to docs/data/material/components/grid/demos/interactive/InteractiveGrid.tsx index dfa776c81fba8e..953e7639abd423 100644 --- a/docs/data/material/components/grid/InteractiveGrid.tsx +++ b/docs/data/material/components/grid/demos/interactive/InteractiveGrid.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import Grid, { GridDirection } from '@mui/material/Grid'; +import Grid from '@mui/material/Grid'; +import type { GridDirection } from '@mui/material/Grid'; import FormControl from '@mui/material/FormControl'; import FormLabel from '@mui/material/FormLabel'; import FormControlLabel from '@mui/material/FormControlLabel'; @@ -20,6 +21,7 @@ type GridJustification = | 'space-evenly'; export default function InteractiveGrid() { + // @focus-start @padding 1 const [direction, setDirection] = React.useState('row'); const [justifyContent, setJustifyContent] = React.useState('center'); @@ -189,4 +191,5 @@ export default function InteractiveGrid() { ); + // @focus-end } diff --git a/docs/data/material/components/grid/demos/interactive/client.ts b/docs/data/material/components/grid/demos/interactive/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/interactive/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/interactive/index.ts b/docs/data/material/components/grid/demos/interactive/index.ts new file mode 100644 index 00000000000000..529eee83e8b8f7 --- /dev/null +++ b/docs/data/material/components/grid/demos/interactive/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import InteractiveGrid from './InteractiveGrid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, InteractiveGrid, { ClientProvider }); diff --git a/docs/data/material/components/grid/NestedGridColumns.tsx b/docs/data/material/components/grid/demos/nested-columns/NestedGridColumns.tsx similarity index 95% rename from docs/data/material/components/grid/NestedGridColumns.tsx rename to docs/data/material/components/grid/demos/nested-columns/NestedGridColumns.tsx index 1e9f23d290708a..92764c83463418 100644 --- a/docs/data/material/components/grid/NestedGridColumns.tsx +++ b/docs/data/material/components/grid/demos/nested-columns/NestedGridColumns.tsx @@ -17,6 +17,7 @@ const Item = styled(Paper)(({ theme }) => ({ export default function NestedGridColumns() { return ( + {/* @focus-start */} size=8/24 @@ -41,6 +42,7 @@ export default function NestedGridColumns() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/grid/demos/nested-columns/client.ts b/docs/data/material/components/grid/demos/nested-columns/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/nested-columns/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/nested-columns/index.ts b/docs/data/material/components/grid/demos/nested-columns/index.ts new file mode 100644 index 00000000000000..ca3f0a002b9fab --- /dev/null +++ b/docs/data/material/components/grid/demos/nested-columns/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import NestedGridColumns from './NestedGridColumns'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, NestedGridColumns, { ClientProvider }); diff --git a/docs/data/material/components/grid/demos/nested/NestedGrid.tsx b/docs/data/material/components/grid/demos/nested/NestedGrid.tsx new file mode 100644 index 00000000000000..cb040b4117ad1a --- /dev/null +++ b/docs/data/material/components/grid/demos/nested/NestedGrid.tsx @@ -0,0 +1,116 @@ +import { styled } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Grid from '@mui/material/Grid'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: (theme.vars ?? theme).palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function NestedGrid() { + return ( + + {/* @focus-start */} + + + Email subscribe section + + + + + + Category A + + +
  • Link 1.1
    • +
  • Link 1.2
    • +
  • Link 1.3
    • +     +     +     + + + + Category B + + +
  • Link 2.1
    • +
  • Link 2.2
    • +
  • Link 2.3
    • +     +     +     + + + + Category C + + +
  • Link 3.1
    • +
  • Link 3.2
    • +
  • Link 3.3
    • +     +     +     + + + + Category D + + +
  • Link 4.1
    • +
  • Link 4.2
    • +
  • Link 4.3
    • +     +     +     +     + + + © Copyright + + + + Link A + + + Link B + + + Link C + + + +     + {/* @focus-end */} +     + ); +} diff --git a/docs/data/material/components/grid/demos/nested/client.ts b/docs/data/material/components/grid/demos/nested/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/nested/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/nested/index.ts b/docs/data/material/components/grid/demos/nested/index.ts new file mode 100644 index 00000000000000..5b0c4764982775 --- /dev/null +++ b/docs/data/material/components/grid/demos/nested/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import NestedGrid from './NestedGrid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, NestedGrid, { ClientProvider }); diff --git a/docs/data/material/components/grid/demos/offset/OffsetGrid.tsx b/docs/data/material/components/grid/demos/offset/OffsetGrid.tsx new file mode 100644 index 00000000000000..297dafa72f802f --- /dev/null +++ b/docs/data/material/components/grid/demos/offset/OffsetGrid.tsx @@ -0,0 +1,35 @@ +import { styled } from '@mui/material/styles'; +import Paper from '@mui/material/Paper'; +import Grid from '@mui/material/Grid'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: (theme.vars ?? theme).palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function OffsetGrid() { + return ( + // @focus-start @padding 2 + + + 1 + + + 2 + + + 3 + + + 4 + + + // @focus-end + ); +} diff --git a/docs/data/material/components/grid/demos/offset/client.ts b/docs/data/material/components/grid/demos/offset/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/offset/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/offset/index.ts b/docs/data/material/components/grid/demos/offset/index.ts new file mode 100644 index 00000000000000..03172d35f401ae --- /dev/null +++ b/docs/data/material/components/grid/demos/offset/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import OffsetGrid from './OffsetGrid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, OffsetGrid, { ClientProvider }); diff --git a/docs/data/material/components/grid/demos/responsive/ResponsiveGrid.tsx b/docs/data/material/components/grid/demos/responsive/ResponsiveGrid.tsx new file mode 100644 index 00000000000000..da628f5dd8d75f --- /dev/null +++ b/docs/data/material/components/grid/demos/responsive/ResponsiveGrid.tsx @@ -0,0 +1,31 @@ +import { styled } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Grid from '@mui/material/Grid'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(2), + textAlign: 'center', + color: (theme.vars ?? theme).palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function ResponsiveGrid() { + return ( + + {/* @focus-start */} + + {Array.from(Array(6)).map((_, index) => ( + + {index + 1} + + ))} + + {/* @focus-end */} + + ); +} diff --git a/docs/data/material/components/grid/demos/responsive/client.ts b/docs/data/material/components/grid/demos/responsive/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/responsive/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/responsive/index.ts b/docs/data/material/components/grid/demos/responsive/index.ts new file mode 100644 index 00000000000000..c7c038746067a2 --- /dev/null +++ b/docs/data/material/components/grid/demos/responsive/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ResponsiveGrid from './ResponsiveGrid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ResponsiveGrid, { ClientProvider }); diff --git a/docs/data/material/components/grid/demos/row-and-column-spacing/RowAndColumnSpacing.tsx b/docs/data/material/components/grid/demos/row-and-column-spacing/RowAndColumnSpacing.tsx new file mode 100644 index 00000000000000..48de5132dbcefc --- /dev/null +++ b/docs/data/material/components/grid/demos/row-and-column-spacing/RowAndColumnSpacing.tsx @@ -0,0 +1,38 @@ +import { styled } from '@mui/material/styles'; +import Grid from '@mui/material/Grid'; +import Paper from '@mui/material/Paper'; +import Box from '@mui/material/Box'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: (theme.vars ?? theme).palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function RowAndColumnSpacing() { + return ( + + {/* @focus-start */} + + + 1 + + + 2 + + + 3 + + + 4 + + + {/* @focus-end */} + + ); +} diff --git a/docs/data/material/components/grid/demos/row-and-column-spacing/client.ts b/docs/data/material/components/grid/demos/row-and-column-spacing/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/row-and-column-spacing/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/row-and-column-spacing/index.ts b/docs/data/material/components/grid/demos/row-and-column-spacing/index.ts new file mode 100644 index 00000000000000..9b551331bc48c2 --- /dev/null +++ b/docs/data/material/components/grid/demos/row-and-column-spacing/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RowAndColumnSpacing from './RowAndColumnSpacing'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RowAndColumnSpacing, { ClientProvider }); diff --git a/docs/data/material/components/grid/demos/spacing/SpacingGrid.tsx b/docs/data/material/components/grid/demos/spacing/SpacingGrid.tsx new file mode 100644 index 00000000000000..9ae12cb042e861 --- /dev/null +++ b/docs/data/material/components/grid/demos/spacing/SpacingGrid.tsx @@ -0,0 +1,76 @@ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import Grid from '@mui/material/Grid'; +import FormLabel from '@mui/material/FormLabel'; +import FormControl from '@mui/material/FormControl'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import RadioGroup from '@mui/material/RadioGroup'; +import Radio from '@mui/material/Radio'; +import Paper from '@mui/material/Paper'; +import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; + +export default function SpacingGrid() { + // @focus-start @padding 1 + const [spacing, setSpacing] = React.useState(2); + + const handleChange = (event: React.ChangeEvent) => { + setSpacing(Number((event.target as HTMLInputElement).value)); + }; + + const jsx = ` + +`; + + return ( + + + {[0, 1, 2].map((value) => ( + + ({ + height: 140, + width: 100, + backgroundColor: '#fff', + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), + })} + /> + + ))} + + + + spacing + + {[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => ( + } + label={value.toString()} + /> + ))} + + + + + + ); + // @focus-end +} diff --git a/docs/data/material/components/grid/demos/spacing/client.ts b/docs/data/material/components/grid/demos/spacing/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/spacing/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/spacing/index.ts b/docs/data/material/components/grid/demos/spacing/index.ts new file mode 100644 index 00000000000000..da698341cc8648 --- /dev/null +++ b/docs/data/material/components/grid/demos/spacing/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SpacingGrid from './SpacingGrid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SpacingGrid, { ClientProvider }); diff --git a/docs/data/material/components/grid/demos/variable-width/VariableWidthGrid.tsx b/docs/data/material/components/grid/demos/variable-width/VariableWidthGrid.tsx new file mode 100644 index 00000000000000..c8be0e536c2a7b --- /dev/null +++ b/docs/data/material/components/grid/demos/variable-width/VariableWidthGrid.tsx @@ -0,0 +1,35 @@ +import { styled } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Grid from '@mui/material/Grid'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: (theme.vars ?? theme).palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function VariableWidthGrid() { + return ( + + {/* @focus-start */} + + + size=auto + + + size=6 + + + size=grow + + + {/* @focus-end */} + + ); +} diff --git a/docs/data/material/components/grid/demos/variable-width/client.ts b/docs/data/material/components/grid/demos/variable-width/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/grid/demos/variable-width/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/grid/demos/variable-width/index.ts b/docs/data/material/components/grid/demos/variable-width/index.ts new file mode 100644 index 00000000000000..be9e9f5b637ba0 --- /dev/null +++ b/docs/data/material/components/grid/demos/variable-width/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VariableWidthGrid from './VariableWidthGrid'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VariableWidthGrid, { ClientProvider }); diff --git a/docs/data/material/components/grid/grid.md b/docs/data/material/components/grid/grid.md index 60f9586bc98aaf..266eaf898ef81d 100644 --- a/docs/data/material/components/grid/grid.md +++ b/docs/data/material/components/grid/grid.md @@ -46,7 +46,7 @@ Use the `container` prop to create a grid container that wraps the grid items (t Column widths are integer values between 1 and 12. For example, an item with `size={6}` occupies half of the grid container's width. -{{"demo": "BasicGrid.js", "bg": true}} +{{"component": "file://./demos/basic/index.ts", "bg": true}} ### Multiple breakpoints @@ -56,7 +56,7 @@ Width values apply to all wider breakpoints, and larger breakpoints override tho For example, a component with `size={{ xs: 12, sm: 6 }}` occupies the entire viewport width when the viewport is [less than 600 pixels wide](/material-ui/customization/breakpoints/#default-breakpoints). When the viewport grows beyond this size, the component occupies half of the total width—six columns rather than 12. -{{"demo": "FullWidthGrid.js", "bg": true}} +{{"component": "file://./demos/full-width/index.ts", "bg": true}} ## Spacing @@ -66,21 +66,21 @@ The prop is converted into a CSS property using the [`theme.spacing()`](/materia The following demo illustrates the use of the `spacing` prop: -{{"demo": "SpacingGrid.js", "bg": true, "hideToolbar": true}} +{{"component": "file://./demos/spacing/index.ts", "bg": true, "hideToolbar": true}} ### Row and column spacing The `rowSpacing` and `columnSpacing` props let you specify row and column gaps independently of one another. They behave similarly to the `row-gap` and `column-gap` properties of [CSS Grid](/system/grid/#row-gap-column-gap). -{{"demo": "RowAndColumnSpacing.js", "bg": true}} +{{"component": "file://./demos/row-and-column-spacing/index.ts", "bg": true}} ## Responsive values You can set prop values to change when a given breakpoint is active. For instance, we can implement Material Design's [recommended](https://m2.material.io/design/layout/responsive-layout-grid.html) responsive layout grid, as seen in the following demo: -{{"demo": "ResponsiveGrid.js", "bg": true}} +{{"component": "file://./demos/responsive/index.ts", "bg": true}} Responsive values are supported by: @@ -96,21 +96,21 @@ Responsive values are supported by: Below is an interactive demo that lets you explore the visual results of the different settings: -{{"demo": "InteractiveGrid.js", "hideToolbar": true, "bg": true}} +{{"component": "file://./demos/interactive/index.ts", "hideToolbar": true, "bg": true}} ## Auto-layout The auto-layout feature gives equal space to all items present. When you set the width of one item, the others will automatically resize to match it. -{{"demo": "AutoGrid.js", "bg": true}} +{{"component": "file://./demos/auto/index.ts", "bg": true}} ### Variable width content When a breakpoint's value is given as `"auto"`, then a column's size will automatically adjust to match the width of its content. The demo below shows how this works: -{{"demo": "VariableWidthGrid.js", "bg": true}} +{{"component": "file://./demos/variable-width/index.ts", "bg": true}} ## Nested grid @@ -134,19 +134,19 @@ Note that a nested grid container should be a direct child of another grid conta A nested grid container inherits the row and column spacing from its parent unless the `spacing` prop is specified to the instance. -{{"demo": "NestedGrid.js", "bg": true}} +{{"component": "file://./demos/nested/index.ts", "bg": true}} ### Inheriting columns A nested grid container inherits the columns from its parent unless the `columns` prop is specified to the instance. -{{"demo": "NestedGridColumns.js", "bg": true}} +{{"component": "file://./demos/nested-columns/index.ts", "bg": true}} ## Columns Use the `columns` prop to change the default number of columns (12) in the grid, as shown below: -{{"demo": "ColumnsGrid.js", "bg": true}} +{{"component": "file://./demos/columns/index.ts", "bg": true}} ## Offset @@ -158,7 +158,7 @@ This props accepts: The demo below illustrates how to use the offset props: -{{"demo": "OffsetGrid.js", "bg": true}} +{{"component": "file://./demos/offset/index.ts", "bg": true}} ## Custom breakpoints @@ -226,7 +226,7 @@ declare module '@mui/system' { To center a grid item's content, specify `display="flex"` directly on the item. Then use `justifyContent` and/or `alignItems` to adjust the position of the content, as shown below: -{{"demo": "CenteredElementGrid.js", "bg": true}} +{{"component": "file://./demos/centered-element/index.ts", "bg": true}} :::warning Using the `container` prop does not work in this situation because the grid container is designed exclusively to wrap grid items. @@ -235,11 +235,11 @@ It cannot wrap other elements. ### Full border -{{"demo": "FullBorderedGrid.js"}} +{{"component": "file://./demos/full-bordered/index.ts"}} ### Half border -{{"demo": "HalfBorderedGrid.js"}} +{{"component": "file://./demos/half-bordered/index.ts"}} ## Limitations @@ -250,4 +250,4 @@ The Grid component is specifically designed to subdivide a layout into columns, You should not use the Grid component on its own to stack layout elements vertically. Instead, you should use the [Stack component](/material-ui/react-stack/) inside of a Grid to create vertical layouts as shown below: -{{"demo": "ColumnLayoutInsideGrid.js"}} +{{"component": "file://./demos/column-layout-inside/index.ts"}} diff --git a/docs/data/material/components/icons/CreateSvgIcon.js b/docs/data/material/components/icons/CreateSvgIcon.js deleted file mode 100644 index e19985430ce663..00000000000000 --- a/docs/data/material/components/icons/CreateSvgIcon.js +++ /dev/null @@ -1,26 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { createSvgIcon } from '@mui/material/utils'; - -const HomeIcon = createSvgIcon( - , - 'Home', -); - -const PlusIcon = createSvgIcon( - // credit: plus icon from https://heroicons.com - - - , - 'Plus', -); - -export default function CreateSvgIcon() { - return ( - - - - - - - ); -} diff --git a/docs/data/material/components/icons/CreateSvgIcon.tsx.preview b/docs/data/material/components/icons/CreateSvgIcon.tsx.preview deleted file mode 100644 index f7d39e80460db9..00000000000000 --- a/docs/data/material/components/icons/CreateSvgIcon.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/material/components/icons/FontAwesomeIcon.js b/docs/data/material/components/icons/FontAwesomeIcon.js deleted file mode 100644 index 95b0dda7e369f4..00000000000000 --- a/docs/data/material/components/icons/FontAwesomeIcon.js +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import { loadCSS } from 'fg-loadcss'; -import Stack from '@mui/material/Stack'; -import { green } from '@mui/material/colors'; -import Icon from '@mui/material/Icon'; - -export default function FontAwesomeIcon() { - React.useEffect(() => { - const node = loadCSS( - 'https://use.fontawesome.com/releases/v5.14.0/css/all.css', - // Inject before JSS - document.querySelector('#font-awesome-css') || document.head.firstChild, - ); - - return () => { - node.parentNode.removeChild(node); - }; - }, []); - - return ( - - - - - - - - ); -} diff --git a/docs/data/material/components/icons/FontAwesomeIcon.tsx.preview b/docs/data/material/components/icons/FontAwesomeIcon.tsx.preview deleted file mode 100644 index e8fcf1ceb7f8b1..00000000000000 --- a/docs/data/material/components/icons/FontAwesomeIcon.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/icons/FontAwesomeIconSize.js b/docs/data/material/components/icons/FontAwesomeIconSize.js deleted file mode 100644 index 59535c200a9e5d..00000000000000 --- a/docs/data/material/components/icons/FontAwesomeIconSize.js +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; -import { loadCSS } from 'fg-loadcss'; -import { ThemeProvider, createTheme } from '@mui/material/styles'; -import Stack from '@mui/material/Stack'; -import Icon from '@mui/material/Icon'; -import MdPhone from '@mui/icons-material/Phone'; -import Chip from '@mui/material/Chip'; - -const theme = createTheme({ - colorSchemes: { light: true, dark: true }, - components: { - MuiIcon: { - styleOverrides: { - root: { - // Match 24px = 3 * 2 + 1.125 * 16 - boxSizing: 'content-box', - padding: 3, - fontSize: '1.125rem', - }, - }, - }, - }, -}); - -export default function FontAwesomeIconSize() { - React.useEffect(() => { - const node = loadCSS( - 'https://use.fontawesome.com/releases/v5.14.0/css/all.css', - // Inject before JSS - document.querySelector('#font-awesome-css') || document.head.firstChild, - ); - - return () => { - node.parentNode.removeChild(node); - }; - }, []); - - return ( - - - } label="Call me" /> - } label="Call me" /> - - - ); -} diff --git a/docs/data/material/components/icons/FontAwesomeIconSize.tsx.preview b/docs/data/material/components/icons/FontAwesomeIconSize.tsx.preview deleted file mode 100644 index c7360ee433455f..00000000000000 --- a/docs/data/material/components/icons/FontAwesomeIconSize.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - } label="Call me" /> - } label="Call me" /> - \ No newline at end of file diff --git a/docs/data/material/components/icons/Icons.js b/docs/data/material/components/icons/Icons.js deleted file mode 100644 index f0c5758a290ef7..00000000000000 --- a/docs/data/material/components/icons/Icons.js +++ /dev/null @@ -1,15 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { green } from '@mui/material/colors'; -import Icon from '@mui/material/Icon'; - -export default function Icons() { - return ( - - add_circle - add_circle - add_circle - add_circle - add_circle - - ); -} diff --git a/docs/data/material/components/icons/Icons.tsx.preview b/docs/data/material/components/icons/Icons.tsx.preview deleted file mode 100644 index 27c109ce20eaf2..00000000000000 --- a/docs/data/material/components/icons/Icons.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ -add_circle -add_circle -add_circle -add_circle -add_circle \ No newline at end of file diff --git a/docs/data/material/components/icons/SvgIconChildren.js b/docs/data/material/components/icons/SvgIconChildren.js deleted file mode 100644 index bdf033d36916bc..00000000000000 --- a/docs/data/material/components/icons/SvgIconChildren.js +++ /dev/null @@ -1,16 +0,0 @@ -import SvgIcon from '@mui/material/SvgIcon'; - -export default function SvgIconChildren() { - return ( - - {/* credit: cog icon from https://heroicons.com */} - - - - - ); -} diff --git a/docs/data/material/components/icons/SvgIconChildren.tsx.preview b/docs/data/material/components/icons/SvgIconChildren.tsx.preview deleted file mode 100644 index a64abc81772664..00000000000000 --- a/docs/data/material/components/icons/SvgIconChildren.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - {/* credit: cog icon from https://heroicons.com */} - - - - \ No newline at end of file diff --git a/docs/data/material/components/icons/SvgIconsColor.js b/docs/data/material/components/icons/SvgIconsColor.js deleted file mode 100644 index 1501eaf3391ad1..00000000000000 --- a/docs/data/material/components/icons/SvgIconsColor.js +++ /dev/null @@ -1,25 +0,0 @@ -import Stack from '@mui/material/Stack'; -import { pink } from '@mui/material/colors'; -import SvgIcon from '@mui/material/SvgIcon'; - -function HomeIcon(props) { - return ( - - - - ); -} - -export default function SvgIconsColor() { - return ( - - - - - - - - - - ); -} diff --git a/docs/data/material/components/icons/SvgIconsColor.tsx.preview b/docs/data/material/components/icons/SvgIconsColor.tsx.preview deleted file mode 100644 index bddc1fd64c3ecd..00000000000000 --- a/docs/data/material/components/icons/SvgIconsColor.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/icons/SvgIconsSize.js b/docs/data/material/components/icons/SvgIconsSize.js deleted file mode 100644 index 87b91aad4afa02..00000000000000 --- a/docs/data/material/components/icons/SvgIconsSize.js +++ /dev/null @@ -1,21 +0,0 @@ -import Stack from '@mui/material/Stack'; -import SvgIcon from '@mui/material/SvgIcon'; - -function HomeIcon(props) { - return ( - - - - ); -} - -export default function SvgIconsSize() { - return ( - - - - - - - ); -} diff --git a/docs/data/material/components/icons/SvgIconsSize.tsx.preview b/docs/data/material/components/icons/SvgIconsSize.tsx.preview deleted file mode 100644 index e3f3f8a51de838..00000000000000 --- a/docs/data/material/components/icons/SvgIconsSize.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/material/components/icons/SvgMaterialIcons.js b/docs/data/material/components/icons/SvgMaterialIcons.js deleted file mode 100644 index 73f2a9796f04a5..00000000000000 --- a/docs/data/material/components/icons/SvgMaterialIcons.js +++ /dev/null @@ -1,68 +0,0 @@ -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; -import Typography from '@mui/material/Typography'; -import DeleteIcon from '@mui/icons-material/Delete'; -import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined'; -import DeleteRoundedIcon from '@mui/icons-material/DeleteRounded'; -import DeleteTwoToneIcon from '@mui/icons-material/DeleteTwoTone'; -import DeleteSharpIcon from '@mui/icons-material/DeleteSharp'; -import DeleteForeverIcon from '@mui/icons-material/DeleteForever'; -import DeleteForeverOutlinedIcon from '@mui/icons-material/DeleteForeverOutlined'; -import DeleteForeverRoundedIcon from '@mui/icons-material/DeleteForeverRounded'; -import DeleteForeverTwoToneIcon from '@mui/icons-material/DeleteForeverTwoTone'; -import DeleteForeverSharpIcon from '@mui/icons-material/DeleteForeverSharp'; -import ThreeDRotationIcon from '@mui/icons-material/ThreeDRotation'; -import FourKIcon from '@mui/icons-material/FourK'; -import ThreeSixtyIcon from '@mui/icons-material/ThreeSixty'; - -export default function SvgMaterialIcons() { - return ( - - - - Filled - - - - - - - Outlined - - - - - - - Rounded - - - - - - - Two Tone - - - - - - - Sharp - - - - - - - Edge-cases - - - - - - - - - ); -} diff --git a/docs/data/material/components/icons/TwoToneIcons.js b/docs/data/material/components/icons/TwoToneIcons.js deleted file mode 100644 index 3343d558513980..00000000000000 --- a/docs/data/material/components/icons/TwoToneIcons.js +++ /dev/null @@ -1,20 +0,0 @@ -import { useTheme } from '@mui/material/styles'; -import Icon from '@mui/material/Icon'; - -const useIsDarkMode = () => { - const theme = useTheme(); - return theme.palette.mode === 'dark'; -}; - -export default function TwoToneIcons() { - const isDarkMode = useIsDarkMode(); - - return ( - - add_circle - - ); -} diff --git a/docs/data/material/components/icons/TwoToneIcons.tsx.preview b/docs/data/material/components/icons/TwoToneIcons.tsx.preview deleted file mode 100644 index cb8e32dc53f440..00000000000000 --- a/docs/data/material/components/icons/TwoToneIcons.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - - add_circle - \ No newline at end of file diff --git a/docs/data/material/components/icons/CreateSvgIcon.tsx b/docs/data/material/components/icons/demos/create-svg/CreateSvgIcon.tsx similarity index 92% rename from docs/data/material/components/icons/CreateSvgIcon.tsx rename to docs/data/material/components/icons/demos/create-svg/CreateSvgIcon.tsx index e19985430ce663..ef3d3f23d8c18d 100644 --- a/docs/data/material/components/icons/CreateSvgIcon.tsx +++ b/docs/data/material/components/icons/demos/create-svg/CreateSvgIcon.tsx @@ -17,10 +17,12 @@ const PlusIcon = createSvgIcon( export default function CreateSvgIcon() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/icons/demos/create-svg/client.ts b/docs/data/material/components/icons/demos/create-svg/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/icons/demos/create-svg/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/icons/demos/create-svg/index.ts b/docs/data/material/components/icons/demos/create-svg/index.ts new file mode 100644 index 00000000000000..a1c5c24a8c4958 --- /dev/null +++ b/docs/data/material/components/icons/demos/create-svg/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CreateSvgIcon from './CreateSvgIcon'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CreateSvgIcon, { ClientProvider }); diff --git a/docs/data/material/components/icons/FontAwesomeIconSize.tsx b/docs/data/material/components/icons/demos/font-awesome-size/FontAwesomeIconSize.tsx similarity index 96% rename from docs/data/material/components/icons/FontAwesomeIconSize.tsx rename to docs/data/material/components/icons/demos/font-awesome-size/FontAwesomeIconSize.tsx index 035734923fa8dc..52577fe12764aa 100644 --- a/docs/data/material/components/icons/FontAwesomeIconSize.tsx +++ b/docs/data/material/components/icons/demos/font-awesome-size/FontAwesomeIconSize.tsx @@ -38,10 +38,12 @@ export default function FontAwesomeIconSize() { return ( + {/* @focus-start */} } label="Call me" /> } label="Call me" /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/icons/demos/font-awesome-size/client.ts b/docs/data/material/components/icons/demos/font-awesome-size/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/icons/demos/font-awesome-size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/icons/demos/font-awesome-size/index.ts b/docs/data/material/components/icons/demos/font-awesome-size/index.ts new file mode 100644 index 00000000000000..a9d653d236dc41 --- /dev/null +++ b/docs/data/material/components/icons/demos/font-awesome-size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FontAwesomeIconSize from './FontAwesomeIconSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FontAwesomeIconSize, { ClientProvider }); diff --git a/docs/data/material/components/icons/FontAwesomeIcon.tsx b/docs/data/material/components/icons/demos/font-awesome/FontAwesomeIcon.tsx similarity index 95% rename from docs/data/material/components/icons/FontAwesomeIcon.tsx rename to docs/data/material/components/icons/demos/font-awesome/FontAwesomeIcon.tsx index fcb3304d718288..7fe0f73d197610 100644 --- a/docs/data/material/components/icons/FontAwesomeIcon.tsx +++ b/docs/data/material/components/icons/demos/font-awesome/FontAwesomeIcon.tsx @@ -20,6 +20,7 @@ export default function FontAwesomeIcon() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/icons/demos/font-awesome/client.ts b/docs/data/material/components/icons/demos/font-awesome/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/icons/demos/font-awesome/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/icons/demos/font-awesome/index.ts b/docs/data/material/components/icons/demos/font-awesome/index.ts new file mode 100644 index 00000000000000..c4c50bfeef66ca --- /dev/null +++ b/docs/data/material/components/icons/demos/font-awesome/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FontAwesomeIcon from './FontAwesomeIcon'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FontAwesomeIcon, { ClientProvider }); diff --git a/docs/data/material/components/icons/Icons.tsx b/docs/data/material/components/icons/demos/icons/Icons.tsx similarity index 89% rename from docs/data/material/components/icons/Icons.tsx rename to docs/data/material/components/icons/demos/icons/Icons.tsx index f0c5758a290ef7..a0edadc1b3ef1d 100644 --- a/docs/data/material/components/icons/Icons.tsx +++ b/docs/data/material/components/icons/demos/icons/Icons.tsx @@ -5,11 +5,13 @@ import Icon from '@mui/material/Icon'; export default function Icons() { return ( + {/* @focus-start */} add_circle add_circle add_circle add_circle add_circle + {/* @focus-end */} ); } diff --git a/docs/data/material/components/icons/demos/icons/client.ts b/docs/data/material/components/icons/demos/icons/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/icons/demos/icons/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/icons/demos/icons/index.ts b/docs/data/material/components/icons/demos/icons/index.ts new file mode 100644 index 00000000000000..a2446ca2591c1e --- /dev/null +++ b/docs/data/material/components/icons/demos/icons/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Icons from './Icons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Icons, { ClientProvider }); diff --git a/docs/data/material/components/icons/SvgIconChildren.tsx b/docs/data/material/components/icons/demos/svg-children/SvgIconChildren.tsx similarity index 94% rename from docs/data/material/components/icons/SvgIconChildren.tsx rename to docs/data/material/components/icons/demos/svg-children/SvgIconChildren.tsx index bdf033d36916bc..a142709b578fef 100644 --- a/docs/data/material/components/icons/SvgIconChildren.tsx +++ b/docs/data/material/components/icons/demos/svg-children/SvgIconChildren.tsx @@ -2,6 +2,7 @@ import SvgIcon from '@mui/material/SvgIcon'; export default function SvgIconChildren() { return ( + // @focus-start @padding 2 {/* credit: cog icon from https://heroicons.com */} @@ -12,5 +13,6 @@ export default function SvgIconChildren() { /> + // @focus-end ); } diff --git a/docs/data/material/components/icons/demos/svg-children/client.ts b/docs/data/material/components/icons/demos/svg-children/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/icons/demos/svg-children/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/icons/demos/svg-children/index.ts b/docs/data/material/components/icons/demos/svg-children/index.ts new file mode 100644 index 00000000000000..b3552c1fc24484 --- /dev/null +++ b/docs/data/material/components/icons/demos/svg-children/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SvgIconChildren from './SvgIconChildren'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SvgIconChildren, { ClientProvider }); diff --git a/docs/data/material/components/icons/SvgIconsColor.tsx b/docs/data/material/components/icons/demos/svg-color/SvgIconsColor.tsx similarity index 79% rename from docs/data/material/components/icons/SvgIconsColor.tsx rename to docs/data/material/components/icons/demos/svg-color/SvgIconsColor.tsx index 731b9dbd5032b4..61340a56f1b422 100644 --- a/docs/data/material/components/icons/SvgIconsColor.tsx +++ b/docs/data/material/components/icons/demos/svg-color/SvgIconsColor.tsx @@ -1,6 +1,7 @@ import Stack from '@mui/material/Stack'; import { pink } from '@mui/material/colors'; -import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; +import type { SvgIconProps } from '@mui/material/SvgIcon'; function HomeIcon(props: SvgIconProps) { return ( @@ -13,6 +14,7 @@ function HomeIcon(props: SvgIconProps) { export default function SvgIconsColor() { return ( + {/* @focus-start */} @@ -20,6 +22,7 @@ export default function SvgIconsColor() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/icons/demos/svg-color/client.ts b/docs/data/material/components/icons/demos/svg-color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/icons/demos/svg-color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/icons/demos/svg-color/index.ts b/docs/data/material/components/icons/demos/svg-color/index.ts new file mode 100644 index 00000000000000..1219602fd4d861 --- /dev/null +++ b/docs/data/material/components/icons/demos/svg-color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SvgIconsColor from './SvgIconsColor'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SvgIconsColor, { ClientProvider }); diff --git a/docs/data/material/components/icons/SvgMaterialIcons.tsx b/docs/data/material/components/icons/demos/svg-material/SvgMaterialIcons.tsx similarity index 97% rename from docs/data/material/components/icons/SvgMaterialIcons.tsx rename to docs/data/material/components/icons/demos/svg-material/SvgMaterialIcons.tsx index 73f2a9796f04a5..4a3e23a4e49613 100644 --- a/docs/data/material/components/icons/SvgMaterialIcons.tsx +++ b/docs/data/material/components/icons/demos/svg-material/SvgMaterialIcons.tsx @@ -18,6 +18,7 @@ import ThreeSixtyIcon from '@mui/icons-material/ThreeSixty'; export default function SvgMaterialIcons() { return ( + {/* @focus-start */} Filled @@ -63,6 +64,7 @@ export default function SvgMaterialIcons() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/icons/demos/svg-material/client.ts b/docs/data/material/components/icons/demos/svg-material/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/icons/demos/svg-material/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/icons/demos/svg-material/index.ts b/docs/data/material/components/icons/demos/svg-material/index.ts new file mode 100644 index 00000000000000..0f2c66058806ab --- /dev/null +++ b/docs/data/material/components/icons/demos/svg-material/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SvgMaterialIcons from './SvgMaterialIcons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SvgMaterialIcons, { ClientProvider }); diff --git a/docs/data/material/components/icons/SvgIconsSize.tsx b/docs/data/material/components/icons/demos/svg-size/SvgIconsSize.tsx similarity index 75% rename from docs/data/material/components/icons/SvgIconsSize.tsx rename to docs/data/material/components/icons/demos/svg-size/SvgIconsSize.tsx index 304a06ce26d142..7dac8e0ef2203d 100644 --- a/docs/data/material/components/icons/SvgIconsSize.tsx +++ b/docs/data/material/components/icons/demos/svg-size/SvgIconsSize.tsx @@ -1,5 +1,6 @@ import Stack from '@mui/material/Stack'; -import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon'; +import SvgIcon from '@mui/material/SvgIcon'; +import type { SvgIconProps } from '@mui/material/SvgIcon'; function HomeIcon(props: SvgIconProps) { return ( @@ -12,10 +13,12 @@ function HomeIcon(props: SvgIconProps) { export default function SvgIconsSize() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/icons/demos/svg-size/client.ts b/docs/data/material/components/icons/demos/svg-size/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/icons/demos/svg-size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/icons/demos/svg-size/index.ts b/docs/data/material/components/icons/demos/svg-size/index.ts new file mode 100644 index 00000000000000..9fa6498ecc36c8 --- /dev/null +++ b/docs/data/material/components/icons/demos/svg-size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SvgIconsSize from './SvgIconsSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SvgIconsSize, { ClientProvider }); diff --git a/docs/data/material/components/icons/TwoToneIcons.tsx b/docs/data/material/components/icons/demos/two-tone/TwoToneIcons.tsx similarity index 89% rename from docs/data/material/components/icons/TwoToneIcons.tsx rename to docs/data/material/components/icons/demos/two-tone/TwoToneIcons.tsx index 3343d558513980..23ffe4b10065dc 100644 --- a/docs/data/material/components/icons/TwoToneIcons.tsx +++ b/docs/data/material/components/icons/demos/two-tone/TwoToneIcons.tsx @@ -10,11 +10,13 @@ export default function TwoToneIcons() { const isDarkMode = useIsDarkMode(); return ( + // @focus-start @padding 2 add_circle + // @focus-end ); } diff --git a/docs/data/material/components/icons/demos/two-tone/client.ts b/docs/data/material/components/icons/demos/two-tone/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/icons/demos/two-tone/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/icons/demos/two-tone/index.ts b/docs/data/material/components/icons/demos/two-tone/index.ts new file mode 100644 index 00000000000000..a1418edd049b3d --- /dev/null +++ b/docs/data/material/components/icons/demos/two-tone/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TwoToneIcons from './TwoToneIcons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TwoToneIcons, { ClientProvider }); diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md index 9b31f7b752d703..12cceb19a6bb69 100644 --- a/docs/data/material/components/icons/icons.md +++ b/docs/data/material/components/icons/icons.md @@ -79,7 +79,7 @@ Each Material icon also has a "theme": Filled (default), Outlined, Rounded, Two- The Material Design guidelines name the icons using "snake_case" naming (for example `delete_forever`, `add_a_photo`), while `@mui/icons-material` exports the respective icons using "PascalCase" naming (for example `DeleteForever`, `AddAPhoto`). There are three exceptions to this naming rule: `3d_rotation` exported as `ThreeDRotation`, `4k` exported as `FourK`, and `360` exported as `ThreeSixty`. ::: -{{"demo": "SvgMaterialIcons.js"}} +{{"component": "file://./demos/svg-material/index.ts"}} ## SvgIcon @@ -93,15 +93,15 @@ This component extends the native `` element: - By default, the component inherits the current color. Optionally, you can apply one of the theme colors using the `color` prop. - It supports `` element as a child so you can copy and paste your SVG directly to `SvgIcon` component. -{{"demo": "SvgIconChildren.js"}} +{{"component": "file://./demos/svg-children/index.ts"}} ### Color -{{"demo": "SvgIconsColor.js"}} +{{"component": "file://./demos/svg-color/index.ts"}} ### Size -{{"demo": "SvgIconsSize.js"}} +{{"component": "file://./demos/svg-size/index.ts"}} ### Component prop @@ -161,7 +161,7 @@ const PlusIcon = createSvgIcon( ); ``` -{{"demo": "CreateSvgIcon.js"}} +{{"component": "file://./demos/create-svg/index.ts"}} ### Other libraries @@ -201,7 +201,7 @@ All you need to do is load the font, for instance, via Google Web Fonts: /> ``` -{{"demo": "Icons.js"}} +{{"component": "file://./demos/icons/index.ts"}} ### Custom font @@ -218,7 +218,7 @@ import Icon from '@mui/material/Icon'; />; ``` -{{"demo": "TwoToneIcons.js"}} +{{"component": "file://./demos/two-tone/index.ts"}} #### Global base class name @@ -248,7 +248,7 @@ Then, you can use the two-tone font directly: [Font Awesome](https://fontawesome.com/icons) can be used with the `Icon` component as follows: -{{"demo": "FontAwesomeIcon.js"}} +{{"component": "file://./demos/font-awesome/index.ts"}} Note that the Font Awesome icons weren't designed like the Material Icons (compare the two previous demos). The fa icons are cropped to use all the space available. You can adjust for this with a global override: @@ -270,7 +270,7 @@ const theme = createTheme({ }); ``` -{{"demo": "FontAwesomeIconSize.js"}} +{{"component": "file://./demos/font-awesome-size/index.ts"}} ## Font vs. SVGs: Which approach to use? diff --git a/docs/data/material/components/image-list/CustomImageList.js b/docs/data/material/components/image-list/CustomImageList.js deleted file mode 100644 index ba38c5381c653b..00000000000000 --- a/docs/data/material/components/image-list/CustomImageList.js +++ /dev/null @@ -1,127 +0,0 @@ -import ImageList from '@mui/material/ImageList'; -import ImageListItem from '@mui/material/ImageListItem'; -import ImageListItemBar from '@mui/material/ImageListItemBar'; -import IconButton from '@mui/material/IconButton'; -import StarBorderIcon from '@mui/icons-material/StarBorder'; - -function srcset(image, width, height, rows = 1, cols = 1) { - return { - src: `${image}?w=${width * cols}&h=${height * rows}&fit=crop&auto=format`, - srcSet: `${image}?w=${width * cols}&h=${ - height * rows - }&fit=crop&auto=format&dpr=2 2x`, - }; -} - -export default function CustomImageList() { - return ( - - {itemData.map((item) => { - const cols = item.featured ? 2 : 1; - const rows = item.featured ? 2 : 1; - - return ( - - {item.title} - - - - } - actionPosition="left" - /> - - ); - })} - - ); -} - -const itemData = [ - { - img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e', - title: 'Breakfast', - author: '@bkristastucchio', - featured: true, - }, - { - img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d', - title: 'Burger', - author: '@rollelflex_graphy726', - }, - { - img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45', - title: 'Camera', - author: '@helloimnik', - }, - { - img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c', - title: 'Coffee', - author: '@nolanissac', - }, - { - img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8', - title: 'Hats', - author: '@hjrc33', - }, - { - img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62', - title: 'Honey', - author: '@arwinneil', - featured: true, - }, - { - img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6', - title: 'Basketball', - author: '@tjdragotta', - }, - { - img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f', - title: 'Fern', - author: '@katie_wasserman', - }, - { - img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25', - title: 'Mushrooms', - author: '@silverdalex', - }, - { - img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af', - title: 'Tomato basil', - author: '@shelleypauls', - }, - { - img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1', - title: 'Sea star', - author: '@peterlaster', - }, - { - img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6', - title: 'Bike', - author: '@southside_customs', - }, -]; diff --git a/docs/data/material/components/image-list/MasonryImageList.js b/docs/data/material/components/image-list/MasonryImageList.js deleted file mode 100644 index 7924de334be790..00000000000000 --- a/docs/data/material/components/image-list/MasonryImageList.js +++ /dev/null @@ -1,73 +0,0 @@ -import Box from '@mui/material/Box'; -import ImageList from '@mui/material/ImageList'; -import ImageListItem from '@mui/material/ImageListItem'; - -export default function MasonryImageList() { - return ( - - - {itemData.map((item) => ( - - {item.title} - - ))} - - - ); -} - -const itemData = [ - { - img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110', - title: 'Bed', - }, - { - img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31', - title: 'Books', - }, - { - img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6', - title: 'Sink', - }, - { - img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3', - title: 'Kitchen', - }, - { - img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3', - title: 'Blinds', - }, - { - img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622', - title: 'Chairs', - }, - { - img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77', - title: 'Laptop', - }, - { - img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61', - title: 'Doors', - }, - { - img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7', - title: 'Coffee', - }, - { - img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee', - title: 'Storage', - }, - { - img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62', - title: 'Candle', - }, - { - img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4', - title: 'Coffee table', - }, -]; diff --git a/docs/data/material/components/image-list/MasonryImageList.tsx.preview b/docs/data/material/components/image-list/MasonryImageList.tsx.preview deleted file mode 100644 index a56d1725430767..00000000000000 --- a/docs/data/material/components/image-list/MasonryImageList.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - {itemData.map((item) => ( - - {item.title} - - ))} - \ No newline at end of file diff --git a/docs/data/material/components/image-list/QuiltedImageList.js b/docs/data/material/components/image-list/QuiltedImageList.js deleted file mode 100644 index 38125a4ceaf58e..00000000000000 --- a/docs/data/material/components/image-list/QuiltedImageList.js +++ /dev/null @@ -1,93 +0,0 @@ -import ImageList from '@mui/material/ImageList'; -import ImageListItem from '@mui/material/ImageListItem'; - -function srcset(image, size, rows = 1, cols = 1) { - return { - src: `${image}?w=${size * cols}&h=${size * rows}&fit=crop&auto=format`, - srcSet: `${image}?w=${size * cols}&h=${ - size * rows - }&fit=crop&auto=format&dpr=2 2x`, - }; -} - -export default function QuiltedImageList() { - return ( - - {itemData.map((item) => ( - - {item.title} - - ))} - - ); -} - -const itemData = [ - { - img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e', - title: 'Breakfast', - rows: 2, - cols: 2, - }, - { - img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d', - title: 'Burger', - }, - { - img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45', - title: 'Camera', - }, - { - img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c', - title: 'Coffee', - cols: 2, - }, - { - img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8', - title: 'Hats', - cols: 2, - }, - { - img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62', - title: 'Honey', - author: '@arwinneil', - rows: 2, - cols: 2, - }, - { - img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6', - title: 'Basketball', - }, - { - img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f', - title: 'Fern', - }, - { - img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25', - title: 'Mushrooms', - rows: 2, - cols: 2, - }, - { - img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af', - title: 'Tomato basil', - }, - { - img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1', - title: 'Sea star', - }, - { - img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6', - title: 'Bike', - cols: 2, - }, -]; diff --git a/docs/data/material/components/image-list/QuiltedImageList.tsx.preview b/docs/data/material/components/image-list/QuiltedImageList.tsx.preview deleted file mode 100644 index 31f3094d62fa54..00000000000000 --- a/docs/data/material/components/image-list/QuiltedImageList.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - {itemData.map((item) => ( - - {item.title} - - ))} - \ No newline at end of file diff --git a/docs/data/material/components/image-list/StandardImageList.js b/docs/data/material/components/image-list/StandardImageList.js deleted file mode 100644 index b214bb9c68d093..00000000000000 --- a/docs/data/material/components/image-list/StandardImageList.js +++ /dev/null @@ -1,70 +0,0 @@ -import ImageList from '@mui/material/ImageList'; -import ImageListItem from '@mui/material/ImageListItem'; - -export default function StandardImageList() { - return ( - - {itemData.map((item) => ( - - {item.title} - - ))} - - ); -} - -const itemData = [ - { - img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e', - title: 'Breakfast', - }, - { - img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d', - title: 'Burger', - }, - { - img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45', - title: 'Camera', - }, - { - img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c', - title: 'Coffee', - }, - { - img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8', - title: 'Hats', - }, - { - img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62', - title: 'Honey', - }, - { - img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6', - title: 'Basketball', - }, - { - img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f', - title: 'Fern', - }, - { - img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25', - title: 'Mushrooms', - }, - { - img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af', - title: 'Tomato basil', - }, - { - img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1', - title: 'Sea star', - }, - { - img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6', - title: 'Bike', - }, -]; diff --git a/docs/data/material/components/image-list/StandardImageList.tsx.preview b/docs/data/material/components/image-list/StandardImageList.tsx.preview deleted file mode 100644 index 613d25ded6ca18..00000000000000 --- a/docs/data/material/components/image-list/StandardImageList.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - {itemData.map((item) => ( - - {item.title} - - ))} - \ No newline at end of file diff --git a/docs/data/material/components/image-list/TitlebarBelowImageList.js b/docs/data/material/components/image-list/TitlebarBelowImageList.js deleted file mode 100644 index f85329767ce86a..00000000000000 --- a/docs/data/material/components/image-list/TitlebarBelowImageList.js +++ /dev/null @@ -1,88 +0,0 @@ -import ImageList from '@mui/material/ImageList'; -import ImageListItem from '@mui/material/ImageListItem'; -import ImageListItemBar from '@mui/material/ImageListItemBar'; - -export default function TitlebarBelowImageList() { - return ( - - {itemData.map((item) => ( - - {item.title} - by: {item.author}} - position="below" - /> - - ))} - - ); -} - -const itemData = [ - { - img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e', - title: 'Breakfast', - author: '@bkristastucchio', - }, - { - img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d', - title: 'Burger', - author: '@rollelflex_graphy726', - }, - { - img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45', - title: 'Camera', - author: '@helloimnik', - }, - { - img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c', - title: 'Coffee', - author: '@nolanissac', - }, - { - img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8', - title: 'Hats', - author: '@hjrc33', - }, - { - img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62', - title: 'Honey', - author: '@arwinneil', - }, - { - img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6', - title: 'Basketball', - author: '@tjdragotta', - }, - { - img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f', - title: 'Fern', - author: '@katie_wasserman', - }, - { - img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25', - title: 'Mushrooms', - author: '@silverdalex', - }, - { - img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af', - title: 'Tomato basil', - author: '@shelleypauls', - }, - { - img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1', - title: 'Sea star', - author: '@peterlaster', - }, - { - img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6', - title: 'Bike', - author: '@southside_customs', - }, -]; diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js deleted file mode 100644 index 8fd466ec3332bd..00000000000000 --- a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.js +++ /dev/null @@ -1,87 +0,0 @@ -import Box from '@mui/material/Box'; -import ImageList from '@mui/material/ImageList'; -import ImageListItem from '@mui/material/ImageListItem'; -import ImageListItemBar from '@mui/material/ImageListItemBar'; - -export default function TitlebarBelowMasonryImageList() { - return ( - - - {itemData.map((item) => ( - - {item.title} - - - ))} - - - ); -} - -const itemData = [ - { - img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110', - title: 'Bed', - author: 'swabdesign', - }, - { - img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31', - title: 'Books', - author: 'Pavel Nekoranec', - }, - { - img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6', - title: 'Sink', - author: 'Charles Deluvio', - }, - { - img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3', - title: 'Kitchen', - author: 'Christian Mackie', - }, - { - img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3', - title: 'Blinds', - author: 'Darren Richardson', - }, - { - img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622', - title: 'Chairs', - author: 'Taylor Simpson', - }, - { - img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77', - title: 'Laptop', - author: 'Ben Kolde', - }, - { - img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61', - title: 'Doors', - author: 'Philipp Berndt', - }, - { - img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7', - title: 'Coffee', - author: 'Jen P.', - }, - { - img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee', - title: 'Storage', - author: 'Douglas Sheppard', - }, - { - img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62', - title: 'Candle', - author: 'Fi Bell', - }, - { - img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4', - title: 'Coffee table', - author: 'Hutomo Abrianto', - }, -]; diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview b/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview deleted file mode 100644 index b58e789212f8cd..00000000000000 --- a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - - {itemData.map((item) => ( - - {item.title} - - - ))} - \ No newline at end of file diff --git a/docs/data/material/components/image-list/TitlebarImageList.js b/docs/data/material/components/image-list/TitlebarImageList.js deleted file mode 100644 index a12f2908a8ebef..00000000000000 --- a/docs/data/material/components/image-list/TitlebarImageList.js +++ /dev/null @@ -1,112 +0,0 @@ -import ImageList from '@mui/material/ImageList'; -import ImageListItem from '@mui/material/ImageListItem'; -import ImageListItemBar from '@mui/material/ImageListItemBar'; -import ListSubheader from '@mui/material/ListSubheader'; -import IconButton from '@mui/material/IconButton'; -import InfoIcon from '@mui/icons-material/Info'; - -export default function TitlebarImageList() { - return ( - - - December - - {itemData.map((item) => ( - - {item.title} - - - - } - /> - - ))} - - ); -} - -const itemData = [ - { - img: 'https://images.unsplash.com/photo-1551963831-b3b1ca40c98e', - title: 'Breakfast', - author: '@bkristastucchio', - rows: 2, - cols: 2, - featured: true, - }, - { - img: 'https://images.unsplash.com/photo-1551782450-a2132b4ba21d', - title: 'Burger', - author: '@rollelflex_graphy726', - }, - { - img: 'https://images.unsplash.com/photo-1522770179533-24471fcdba45', - title: 'Camera', - author: '@helloimnik', - }, - { - img: 'https://images.unsplash.com/photo-1444418776041-9c7e33cc5a9c', - title: 'Coffee', - author: '@nolanissac', - cols: 2, - }, - { - img: 'https://images.unsplash.com/photo-1533827432537-70133748f5c8', - title: 'Hats', - author: '@hjrc33', - cols: 2, - }, - { - img: 'https://images.unsplash.com/photo-1558642452-9d2a7deb7f62', - title: 'Honey', - author: '@arwinneil', - rows: 2, - cols: 2, - featured: true, - }, - { - img: 'https://images.unsplash.com/photo-1516802273409-68526ee1bdd6', - title: 'Basketball', - author: '@tjdragotta', - }, - { - img: 'https://images.unsplash.com/photo-1518756131217-31eb79b20e8f', - title: 'Fern', - author: '@katie_wasserman', - }, - { - img: 'https://images.unsplash.com/photo-1597645587822-e99fa5d45d25', - title: 'Mushrooms', - author: '@silverdalex', - rows: 2, - cols: 2, - }, - { - img: 'https://images.unsplash.com/photo-1567306301408-9b74779a11af', - title: 'Tomato basil', - author: '@shelleypauls', - }, - { - img: 'https://images.unsplash.com/photo-1471357674240-e1a485acb3e1', - title: 'Sea star', - author: '@peterlaster', - }, - { - img: 'https://images.unsplash.com/photo-1589118949245-7d38baf380d6', - title: 'Bike', - author: '@southside_customs', - cols: 2, - }, -]; diff --git a/docs/data/material/components/image-list/WovenImageList.js b/docs/data/material/components/image-list/WovenImageList.js deleted file mode 100644 index 0f7853629fa3eb..00000000000000 --- a/docs/data/material/components/image-list/WovenImageList.js +++ /dev/null @@ -1,70 +0,0 @@ -import ImageList from '@mui/material/ImageList'; -import ImageListItem from '@mui/material/ImageListItem'; - -export default function WovenImageList() { - return ( - - {itemData.map((item) => ( - - {item.title} - - ))} - - ); -} - -const itemData = [ - { - img: 'https://images.unsplash.com/photo-1549388604-817d15aa0110', - title: 'Bed', - }, - { - img: 'https://images.unsplash.com/photo-1563298723-dcfebaa392e3', - title: 'Kitchen', - }, - { - img: 'https://images.unsplash.com/photo-1523413651479-597eb2da0ad6', - title: 'Sink', - }, - { - img: 'https://images.unsplash.com/photo-1525097487452-6278ff080c31', - title: 'Books', - }, - { - img: 'https://images.unsplash.com/photo-1574180045827-681f8a1a9622', - title: 'Chairs', - }, - { - img: 'https://images.unsplash.com/photo-1597262975002-c5c3b14bbd62', - title: 'Candle', - }, - { - img: 'https://images.unsplash.com/photo-1530731141654-5993c3016c77', - title: 'Laptop', - }, - { - img: 'https://images.unsplash.com/photo-1481277542470-605612bd2d61', - title: 'Doors', - }, - { - img: 'https://images.unsplash.com/photo-1517487881594-2787fef5ebf7', - title: 'Coffee', - }, - { - img: 'https://images.unsplash.com/photo-1516455207990-7a41ce80f7ee', - title: 'Storage', - }, - { - img: 'https://images.unsplash.com/photo-1519710164239-da123dc03ef4', - title: 'Coffee table', - }, - { - img: 'https://images.unsplash.com/photo-1588436706487-9d55d73a39e3', - title: 'Blinds', - }, -]; diff --git a/docs/data/material/components/image-list/WovenImageList.tsx.preview b/docs/data/material/components/image-list/WovenImageList.tsx.preview deleted file mode 100644 index 329a1d42b3511a..00000000000000 --- a/docs/data/material/components/image-list/WovenImageList.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - {itemData.map((item) => ( - - {item.title} - - ))} - \ No newline at end of file diff --git a/docs/data/material/components/image-list/CustomImageList.tsx b/docs/data/material/components/image-list/demos/custom/CustomImageList.tsx similarity index 98% rename from docs/data/material/components/image-list/CustomImageList.tsx rename to docs/data/material/components/image-list/demos/custom/CustomImageList.tsx index 6de3ad156ac350..13f6e3bf2474e0 100644 --- a/docs/data/material/components/image-list/CustomImageList.tsx +++ b/docs/data/material/components/image-list/demos/custom/CustomImageList.tsx @@ -15,6 +15,7 @@ function srcset(image: string, width: number, height: number, rows = 1, cols = 1 export default function CustomImageList() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/image-list/demos/custom/client.ts b/docs/data/material/components/image-list/demos/custom/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/image-list/demos/custom/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/image-list/demos/custom/index.ts b/docs/data/material/components/image-list/demos/custom/index.ts new file mode 100644 index 00000000000000..83a4ffad5f16f1 --- /dev/null +++ b/docs/data/material/components/image-list/demos/custom/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomImageList from './CustomImageList'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomImageList, { ClientProvider }); diff --git a/docs/data/material/components/image-list/MasonryImageList.tsx b/docs/data/material/components/image-list/demos/masonry/MasonryImageList.tsx similarity index 97% rename from docs/data/material/components/image-list/MasonryImageList.tsx rename to docs/data/material/components/image-list/demos/masonry/MasonryImageList.tsx index 7924de334be790..d0dbd61d1e24da 100644 --- a/docs/data/material/components/image-list/MasonryImageList.tsx +++ b/docs/data/material/components/image-list/demos/masonry/MasonryImageList.tsx @@ -5,6 +5,7 @@ import ImageListItem from '@mui/material/ImageListItem'; export default function MasonryImageList() { return ( + {/* @focus-start */} {itemData.map((item) => ( @@ -17,6 +18,7 @@ export default function MasonryImageList() { ))} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/image-list/demos/masonry/client.ts b/docs/data/material/components/image-list/demos/masonry/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/image-list/demos/masonry/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/image-list/demos/masonry/index.ts b/docs/data/material/components/image-list/demos/masonry/index.ts new file mode 100644 index 00000000000000..d9bedde3732643 --- /dev/null +++ b/docs/data/material/components/image-list/demos/masonry/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MasonryImageList from './MasonryImageList'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MasonryImageList, { ClientProvider }); diff --git a/docs/data/material/components/image-list/QuiltedImageList.tsx b/docs/data/material/components/image-list/demos/quilted/QuiltedImageList.tsx similarity index 97% rename from docs/data/material/components/image-list/QuiltedImageList.tsx rename to docs/data/material/components/image-list/demos/quilted/QuiltedImageList.tsx index f567b2d448155e..f307b47eb6ab4f 100644 --- a/docs/data/material/components/image-list/QuiltedImageList.tsx +++ b/docs/data/material/components/image-list/demos/quilted/QuiltedImageList.tsx @@ -12,6 +12,7 @@ function srcset(image: string, size: number, rows = 1, cols = 1) { export default function QuiltedImageList() { return ( + // @focus-start @padding 2 ))} + // @focus-end ); } diff --git a/docs/data/material/components/image-list/demos/quilted/client.ts b/docs/data/material/components/image-list/demos/quilted/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/image-list/demos/quilted/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/image-list/demos/quilted/index.ts b/docs/data/material/components/image-list/demos/quilted/index.ts new file mode 100644 index 00000000000000..a829479956aee9 --- /dev/null +++ b/docs/data/material/components/image-list/demos/quilted/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import QuiltedImageList from './QuiltedImageList'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, QuiltedImageList, { ClientProvider }); diff --git a/docs/data/material/components/image-list/StandardImageList.tsx b/docs/data/material/components/image-list/demos/standard/StandardImageList.tsx similarity index 97% rename from docs/data/material/components/image-list/StandardImageList.tsx rename to docs/data/material/components/image-list/demos/standard/StandardImageList.tsx index b214bb9c68d093..2f263e8f99d5e8 100644 --- a/docs/data/material/components/image-list/StandardImageList.tsx +++ b/docs/data/material/components/image-list/demos/standard/StandardImageList.tsx @@ -3,6 +3,7 @@ import ImageListItem from '@mui/material/ImageListItem'; export default function StandardImageList() { return ( + // @focus-start @padding 2 {itemData.map((item) => ( @@ -15,6 +16,7 @@ export default function StandardImageList() { ))} + // @focus-end ); } diff --git a/docs/data/material/components/image-list/demos/standard/client.ts b/docs/data/material/components/image-list/demos/standard/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/image-list/demos/standard/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/image-list/demos/standard/index.ts b/docs/data/material/components/image-list/demos/standard/index.ts new file mode 100644 index 00000000000000..455e6c8c633006 --- /dev/null +++ b/docs/data/material/components/image-list/demos/standard/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StandardImageList from './StandardImageList'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StandardImageList, { ClientProvider }); diff --git a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx b/docs/data/material/components/image-list/demos/titlebar-below-masonry/TitlebarBelowMasonryImageList.tsx similarity index 97% rename from docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx rename to docs/data/material/components/image-list/demos/titlebar-below-masonry/TitlebarBelowMasonryImageList.tsx index 8fd466ec3332bd..e442d915e15be9 100644 --- a/docs/data/material/components/image-list/TitlebarBelowMasonryImageList.tsx +++ b/docs/data/material/components/image-list/demos/titlebar-below-masonry/TitlebarBelowMasonryImageList.tsx @@ -6,6 +6,7 @@ import ImageListItemBar from '@mui/material/ImageListItemBar'; export default function TitlebarBelowMasonryImageList() { return ( + {/* @focus-start */} {itemData.map((item) => ( @@ -19,6 +20,7 @@ export default function TitlebarBelowMasonryImageList() { ))} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/image-list/demos/titlebar-below-masonry/client.ts b/docs/data/material/components/image-list/demos/titlebar-below-masonry/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/image-list/demos/titlebar-below-masonry/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/image-list/demos/titlebar-below-masonry/index.ts b/docs/data/material/components/image-list/demos/titlebar-below-masonry/index.ts new file mode 100644 index 00000000000000..803476b6215433 --- /dev/null +++ b/docs/data/material/components/image-list/demos/titlebar-below-masonry/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TitlebarBelowMasonryImageList from './TitlebarBelowMasonryImageList'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TitlebarBelowMasonryImageList, { ClientProvider }); diff --git a/docs/data/material/components/image-list/TitlebarBelowImageList.tsx b/docs/data/material/components/image-list/demos/titlebar-below/TitlebarBelowImageList.tsx similarity index 97% rename from docs/data/material/components/image-list/TitlebarBelowImageList.tsx rename to docs/data/material/components/image-list/demos/titlebar-below/TitlebarBelowImageList.tsx index f85329767ce86a..d3be4d1778fa91 100644 --- a/docs/data/material/components/image-list/TitlebarBelowImageList.tsx +++ b/docs/data/material/components/image-list/demos/titlebar-below/TitlebarBelowImageList.tsx @@ -4,6 +4,7 @@ import ImageListItemBar from '@mui/material/ImageListItemBar'; export default function TitlebarBelowImageList() { return ( + // @focus-start @padding 2 {itemData.map((item) => ( @@ -21,6 +22,7 @@ export default function TitlebarBelowImageList() { ))} + // @focus-end ); } diff --git a/docs/data/material/components/image-list/demos/titlebar-below/client.ts b/docs/data/material/components/image-list/demos/titlebar-below/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/image-list/demos/titlebar-below/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/image-list/demos/titlebar-below/index.ts b/docs/data/material/components/image-list/demos/titlebar-below/index.ts new file mode 100644 index 00000000000000..c4509c1d9135e8 --- /dev/null +++ b/docs/data/material/components/image-list/demos/titlebar-below/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TitlebarBelowImageList from './TitlebarBelowImageList'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TitlebarBelowImageList, { ClientProvider }); diff --git a/docs/data/material/components/image-list/TitlebarImageList.tsx b/docs/data/material/components/image-list/demos/titlebar/TitlebarImageList.tsx similarity index 98% rename from docs/data/material/components/image-list/TitlebarImageList.tsx rename to docs/data/material/components/image-list/demos/titlebar/TitlebarImageList.tsx index a12f2908a8ebef..41aea0c62882f0 100644 --- a/docs/data/material/components/image-list/TitlebarImageList.tsx +++ b/docs/data/material/components/image-list/demos/titlebar/TitlebarImageList.tsx @@ -7,6 +7,7 @@ import InfoIcon from '@mui/icons-material/Info'; export default function TitlebarImageList() { return ( + // @focus-start @padding 2 December @@ -34,6 +35,7 @@ export default function TitlebarImageList() { ))} + // @focus-end ); } diff --git a/docs/data/material/components/image-list/demos/titlebar/client.ts b/docs/data/material/components/image-list/demos/titlebar/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/image-list/demos/titlebar/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/image-list/demos/titlebar/index.ts b/docs/data/material/components/image-list/demos/titlebar/index.ts new file mode 100644 index 00000000000000..8ccfbc01274eb0 --- /dev/null +++ b/docs/data/material/components/image-list/demos/titlebar/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TitlebarImageList from './TitlebarImageList'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TitlebarImageList, { ClientProvider }); diff --git a/docs/data/material/components/image-list/WovenImageList.tsx b/docs/data/material/components/image-list/demos/woven/WovenImageList.tsx similarity index 97% rename from docs/data/material/components/image-list/WovenImageList.tsx rename to docs/data/material/components/image-list/demos/woven/WovenImageList.tsx index 0f7853629fa3eb..f7df51f83b9a6d 100644 --- a/docs/data/material/components/image-list/WovenImageList.tsx +++ b/docs/data/material/components/image-list/demos/woven/WovenImageList.tsx @@ -3,6 +3,7 @@ import ImageListItem from '@mui/material/ImageListItem'; export default function WovenImageList() { return ( + // @focus-start @padding 2 {itemData.map((item) => ( @@ -15,6 +16,7 @@ export default function WovenImageList() { ))} + // @focus-end ); } diff --git a/docs/data/material/components/image-list/demos/woven/client.ts b/docs/data/material/components/image-list/demos/woven/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/image-list/demos/woven/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/image-list/demos/woven/index.ts b/docs/data/material/components/image-list/demos/woven/index.ts new file mode 100644 index 00000000000000..9c15c042513869 --- /dev/null +++ b/docs/data/material/components/image-list/demos/woven/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import WovenImageList from './WovenImageList'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, WovenImageList, { ClientProvider }); diff --git a/docs/data/material/components/image-list/image-list.md b/docs/data/material/components/image-list/image-list.md index 8272088eefdccb..22f642bcb60ad7 100644 --- a/docs/data/material/components/image-list/image-list.md +++ b/docs/data/material/components/image-list/image-list.md @@ -19,46 +19,46 @@ Image lists represent a collection of items in a repeated pattern. They help imp Standard image lists are best for items of equal importance. They have a uniform container size, ratio, and spacing. -{{"demo": "StandardImageList.js"}} +{{"component": "file://./demos/standard/index.ts"}} ## Quilted image list Quilted image lists emphasize certain items over others in a collection. They create hierarchy using varied container sizes and ratios. -{{"demo": "QuiltedImageList.js"}} +{{"component": "file://./demos/quilted/index.ts"}} ## Woven image list Woven image lists use alternating container ratios to create a rhythmic layout. A woven image list is best for browsing peer content. -{{"demo": "WovenImageList.js"}} +{{"component": "file://./demos/woven/index.ts"}} ## Masonry image list Masonry image lists use dynamically sized container heights that reflect the aspect ratio of each image. This image list is best used for browsing uncropped peer content. -{{"demo": "MasonryImageList.js"}} +{{"component": "file://./demos/masonry/index.ts"}} ## Image list with title bars This example demonstrates the use of the `ImageListItemBar` to add an overlay to each item. The overlay can accommodate a `title`, `subtitle` and secondary action - in this example an `IconButton`. -{{"demo": "TitlebarImageList.js"}} +{{"component": "file://./demos/titlebar/index.ts"}} ### Title bar below image (standard) The title bar can be placed below the image. -{{"demo": "TitlebarBelowImageList.js"}} +{{"component": "file://./demos/titlebar-below/index.ts"}} ### Title bar below image (masonry) -{{"demo": "TitlebarBelowMasonryImageList.js"}} +{{"component": "file://./demos/titlebar-below-masonry/index.ts"}} ## Custom image list In this example the items have a customized titlebar, positioned at the top and with a custom gradient `titleBackground`. The secondary action `IconButton` is positioned on the left. The `gap` prop is used to adjust the gap between items. -{{"demo": "CustomImageList.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/custom/index.ts", "collapseToEmpty": true}} diff --git a/docs/data/material/components/links/ButtonLink.js b/docs/data/material/components/links/ButtonLink.js deleted file mode 100644 index 1c3872b5bf4bc3..00000000000000 --- a/docs/data/material/components/links/ButtonLink.js +++ /dev/null @@ -1,15 +0,0 @@ -import Link from '@mui/material/Link'; - -export default function ButtonLink() { - return ( - { - console.info("I'm a button."); - }} - > - Button Link - - ); -} diff --git a/docs/data/material/components/links/ButtonLink.tsx.preview b/docs/data/material/components/links/ButtonLink.tsx.preview deleted file mode 100644 index 3c6eaed9713e66..00000000000000 --- a/docs/data/material/components/links/ButtonLink.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - { - console.info("I'm a button."); - }} -> - Button Link - \ No newline at end of file diff --git a/docs/data/material/components/links/Links.js b/docs/data/material/components/links/Links.js deleted file mode 100644 index 44d3be3712deee..00000000000000 --- a/docs/data/material/components/links/Links.js +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Link from '@mui/material/Link'; - -const preventDefault = (event) => event.preventDefault(); - -export default function Links() { - return ( - :not(style) ~ :not(style)': { - ml: 2, - }, - }} - onClick={preventDefault} - > - Link - - {'color="inherit"'} - - - {'variant="body2"'} - - - ); -} diff --git a/docs/data/material/components/links/Links.tsx.preview b/docs/data/material/components/links/Links.tsx.preview deleted file mode 100644 index 642167ec32d212..00000000000000 --- a/docs/data/material/components/links/Links.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ -Link - - {'color="inherit"'} - - - {'variant="body2"'} - \ No newline at end of file diff --git a/docs/data/material/components/links/UnderlineLink.js b/docs/data/material/components/links/UnderlineLink.js deleted file mode 100644 index 5fe1efc0f3ce4f..00000000000000 --- a/docs/data/material/components/links/UnderlineLink.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Link from '@mui/material/Link'; - -const preventDefault = (event) => event.preventDefault(); - -export default function UnderlineLink() { - return ( - :not(style) ~ :not(style)': { - ml: 2, - }, - }} - onClick={preventDefault} - > - - {'underline="none"'} - - - {'underline="hover"'} - - - {'underline="always"'} - - - ); -} diff --git a/docs/data/material/components/links/UnderlineLink.tsx.preview b/docs/data/material/components/links/UnderlineLink.tsx.preview deleted file mode 100644 index 1b943da67a2490..00000000000000 --- a/docs/data/material/components/links/UnderlineLink.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - {'underline="none"'} - - - {'underline="hover"'} - - - {'underline="always"'} - \ No newline at end of file diff --git a/docs/data/material/components/links/ButtonLink.tsx b/docs/data/material/components/links/demos/button/ButtonLink.tsx similarity index 84% rename from docs/data/material/components/links/ButtonLink.tsx rename to docs/data/material/components/links/demos/button/ButtonLink.tsx index 1c3872b5bf4bc3..b71efed3ba93fe 100644 --- a/docs/data/material/components/links/ButtonLink.tsx +++ b/docs/data/material/components/links/demos/button/ButtonLink.tsx @@ -2,6 +2,7 @@ import Link from '@mui/material/Link'; export default function ButtonLink() { return ( + // @focus-start @padding 2 Button Link + // @focus-end ); } diff --git a/docs/data/material/components/links/demos/button/client.ts b/docs/data/material/components/links/demos/button/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/links/demos/button/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/links/demos/button/index.ts b/docs/data/material/components/links/demos/button/index.ts new file mode 100644 index 00000000000000..a6408c985875c8 --- /dev/null +++ b/docs/data/material/components/links/demos/button/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ButtonLink from './ButtonLink'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ButtonLink, { ClientProvider }); diff --git a/docs/data/material/components/links/Links.tsx b/docs/data/material/components/links/demos/links/Links.tsx similarity index 92% rename from docs/data/material/components/links/Links.tsx rename to docs/data/material/components/links/demos/links/Links.tsx index eefeeb0cf82bae..f678ca28201cbd 100644 --- a/docs/data/material/components/links/Links.tsx +++ b/docs/data/material/components/links/demos/links/Links.tsx @@ -15,6 +15,7 @@ export default function Links() { }} onClick={preventDefault} > + {/* @focus-start */} Link {'color="inherit"'} @@ -22,6 +23,7 @@ export default function Links() { {'variant="body2"'} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/links/demos/links/client.ts b/docs/data/material/components/links/demos/links/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/links/demos/links/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/links/demos/links/index.ts b/docs/data/material/components/links/demos/links/index.ts new file mode 100644 index 00000000000000..fb77d896019b77 --- /dev/null +++ b/docs/data/material/components/links/demos/links/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Links from './Links'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Links, { ClientProvider }); diff --git a/docs/data/material/components/links/UnderlineLink.tsx b/docs/data/material/components/links/demos/underline/UnderlineLink.tsx similarity index 93% rename from docs/data/material/components/links/UnderlineLink.tsx rename to docs/data/material/components/links/demos/underline/UnderlineLink.tsx index 7b3b274e6c7576..3f2a400e809f87 100644 --- a/docs/data/material/components/links/UnderlineLink.tsx +++ b/docs/data/material/components/links/demos/underline/UnderlineLink.tsx @@ -18,6 +18,7 @@ export default function UnderlineLink() { }} onClick={preventDefault} > + {/* @focus-start */} {'underline="none"'} @@ -27,6 +28,7 @@ export default function UnderlineLink() { {'underline="always"'} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/links/demos/underline/client.ts b/docs/data/material/components/links/demos/underline/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/links/demos/underline/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/links/demos/underline/index.ts b/docs/data/material/components/links/demos/underline/index.ts new file mode 100644 index 00000000000000..9593aab10a6e97 --- /dev/null +++ b/docs/data/material/components/links/demos/underline/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UnderlineLink from './UnderlineLink'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UnderlineLink, { ClientProvider }); diff --git a/docs/data/material/components/links/links.md b/docs/data/material/components/links/links.md index 0579d2348525cb..4dd2909ed10bd7 100644 --- a/docs/data/material/components/links/links.md +++ b/docs/data/material/components/links/links.md @@ -16,7 +16,7 @@ githubSource: packages/mui-material/src/Link The Link component is built on top of the [Typography](/material-ui/api/typography/) component, meaning that you can use its props. -{{"demo": "Links.js"}} +{{"component": "file://./demos/links/index.ts"}} However, the Link component has some different default props than the Typography component: @@ -27,7 +27,7 @@ However, the Link component has some different default props than the Typography The `underline` prop can be used to set the underline behavior. The default is `always`. -{{"demo": "UnderlineLink.js"}} +{{"component": "file://./demos/underline/index.ts"}} ## Third-party routing library @@ -45,7 +45,7 @@ Here is a [more detailed guide](/material-ui/integrations/routing/#link). - If a link doesn't have a meaningful href, [it should be rendered using a ` - - Profile - My account - Logout - -
    - ); -} diff --git a/docs/data/material/components/menus/ContextMenu.js b/docs/data/material/components/menus/ContextMenu.js deleted file mode 100644 index 7ccec3ddf1bd87..00000000000000 --- a/docs/data/material/components/menus/ContextMenu.js +++ /dev/null @@ -1,68 +0,0 @@ -import * as React from 'react'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import Typography from '@mui/material/Typography'; - -export default function ContextMenu() { - const [contextMenu, setContextMenu] = React.useState(null); - - const handleContextMenu = (event) => { - event.preventDefault(); - - setContextMenu( - contextMenu === null - ? { - mouseX: event.clientX + 2, - mouseY: event.clientY - 6, - } - : // repeated contextmenu when it is already open closes it with Chrome 84 on Ubuntu - // Other native context menus might behave different. - // With this behavior we prevent contextmenu from the backdrop to re-locale existing context menus. - null, - ); - - // Prevent text selection lost after opening the context menu on Safari and Firefox - const selection = document.getSelection(); - if (selection && selection.rangeCount > 0) { - const range = selection.getRangeAt(0); - - setTimeout(() => { - selection.addRange(range); - }); - } - }; - - const handleClose = () => { - setContextMenu(null); - }; - - return ( -
    - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, - bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum - vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor - porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis - vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus - massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit - amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus - consequat. Suspendisse lacinia tellus a libero volutpat maximus. - - - Copy - Print - Highlight - Email - -
    - ); -} diff --git a/docs/data/material/components/menus/CustomizedMenus.js b/docs/data/material/components/menus/CustomizedMenus.js deleted file mode 100644 index 4cbae94457099d..00000000000000 --- a/docs/data/material/components/menus/CustomizedMenus.js +++ /dev/null @@ -1,114 +0,0 @@ -import * as React from 'react'; -import { styled, alpha } from '@mui/material/styles'; -import Button from '@mui/material/Button'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import EditIcon from '@mui/icons-material/Edit'; -import Divider from '@mui/material/Divider'; -import ArchiveIcon from '@mui/icons-material/Archive'; -import FileCopyIcon from '@mui/icons-material/FileCopy'; -import MoreHorizIcon from '@mui/icons-material/MoreHoriz'; -import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; - -const StyledMenu = styled((props) => ( - -))(({ theme }) => ({ - '& .MuiPaper-root': { - borderRadius: 6, - marginTop: theme.spacing(1), - minWidth: 180, - color: 'rgb(55, 65, 81)', - boxShadow: - 'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px', - '& .MuiMenu-list': { - padding: '4px 0', - }, - '& .MuiMenuItem-root': { - '& .MuiSvgIcon-root': { - fontSize: 18, - color: theme.palette.text.secondary, - marginRight: theme.spacing(1.5), - ...theme.applyStyles('dark', { - color: 'inherit', - }), - }, - '&:active': { - backgroundColor: alpha( - theme.palette.primary.main, - theme.palette.action.selectedOpacity, - ), - }, - }, - ...theme.applyStyles('dark', { - color: theme.palette.grey[300], - }), - }, -})); - -export default function CustomizedMenus() { - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - const handleClose = () => { - setAnchorEl(null); - }; - - return ( -
    - - - - - Edit - - - - Duplicate - - - - - Archive - - - - More - - -
    - ); -} diff --git a/docs/data/material/components/menus/DenseMenu.js b/docs/data/material/components/menus/DenseMenu.js deleted file mode 100644 index e37081dc34732e..00000000000000 --- a/docs/data/material/components/menus/DenseMenu.js +++ /dev/null @@ -1,42 +0,0 @@ -import Paper from '@mui/material/Paper'; -import Divider from '@mui/material/Divider'; -import MenuList from '@mui/material/MenuList'; -import MenuItem from '@mui/material/MenuItem'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import Check from '@mui/icons-material/Check'; - -export default function DenseMenu() { - return ( - - - - Single - - - 1.15 - - - Double - - - - - - Custom: 1.2 - - - - Add space before paragraph - - - Add space after paragraph - - - - Custom spacing… - - - - ); -} diff --git a/docs/data/material/components/menus/FadeMenu.js b/docs/data/material/components/menus/FadeMenu.js deleted file mode 100644 index 549b30995aae68..00000000000000 --- a/docs/data/material/components/menus/FadeMenu.js +++ /dev/null @@ -1,46 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import Fade from '@mui/material/Fade'; - -export default function FadeMenu() { - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - const handleClose = () => { - setAnchorEl(null); - }; - - return ( -
    - - - Profile - My account - Logout - -
    - ); -} diff --git a/docs/data/material/components/menus/GroupedMenu.js b/docs/data/material/components/menus/GroupedMenu.js deleted file mode 100644 index fc3dc3ad5c9665..00000000000000 --- a/docs/data/material/components/menus/GroupedMenu.js +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import ListSubheader from '@mui/material/ListSubheader'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import { styled } from '@mui/material/styles'; - -const StyledListHeader = styled(ListSubheader)({ - backgroundImage: 'var(--Paper-overlay)', -}); - -export default function GroupedMenu() { - const id = React.useId(); - const buttonId = `${id}-button`; - const menuId = `${id}-menu`; - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - const handleClose = () => { - setAnchorEl(null); - }; - - return ( -
    - - - Category 1 - Option 1 - Option 2 - Category 2 - Option 3 - Option 4 - -
    - ); -} diff --git a/docs/data/material/components/menus/IconMenu.js b/docs/data/material/components/menus/IconMenu.js deleted file mode 100644 index edb78c615296d9..00000000000000 --- a/docs/data/material/components/menus/IconMenu.js +++ /dev/null @@ -1,54 +0,0 @@ -import Divider from '@mui/material/Divider'; -import Paper from '@mui/material/Paper'; -import MenuList from '@mui/material/MenuList'; -import MenuItem from '@mui/material/MenuItem'; -import ListItemText from '@mui/material/ListItemText'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import Typography from '@mui/material/Typography'; -import ContentCut from '@mui/icons-material/ContentCut'; -import ContentCopy from '@mui/icons-material/ContentCopy'; -import ContentPaste from '@mui/icons-material/ContentPaste'; -import Cloud from '@mui/icons-material/Cloud'; - -export default function IconMenu() { - return ( - - - - - - - Cut - - ⌘X - - - - - - - Copy - - ⌘C - - - - - - - Paste - - ⌘V - - - - - - - - Web Clipboard - - - - ); -} diff --git a/docs/data/material/components/menus/LongMenu.js b/docs/data/material/components/menus/LongMenu.js deleted file mode 100644 index 5bb73eed149cb6..00000000000000 --- a/docs/data/material/components/menus/LongMenu.js +++ /dev/null @@ -1,73 +0,0 @@ -import * as React from 'react'; -import IconButton from '@mui/material/IconButton'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import MoreVertIcon from '@mui/icons-material/MoreVert'; - -const options = [ - 'None', - 'Atria', - 'Callisto', - 'Dione', - 'Ganymede', - 'Hangouts Call', - 'Luna', - 'Oberon', - 'Phobos', - 'Pyxis', - 'Sedna', - 'Titania', - 'Triton', - 'Umbriel', -]; - -const ITEM_HEIGHT = 48; - -export default function LongMenu() { - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - const handleClose = () => { - setAnchorEl(null); - }; - - return ( -
    - - - - - {options.map((option) => ( - - {option} - - ))} - -
    - ); -} diff --git a/docs/data/material/components/menus/MenuListComposition.js b/docs/data/material/components/menus/MenuListComposition.js deleted file mode 100644 index e07381c3336d2e..00000000000000 --- a/docs/data/material/components/menus/MenuListComposition.js +++ /dev/null @@ -1,102 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import ClickAwayListener from '@mui/material/ClickAwayListener'; -import Grow from '@mui/material/Grow'; -import Paper from '@mui/material/Paper'; -import Popper from '@mui/material/Popper'; -import MenuItem from '@mui/material/MenuItem'; -import MenuList from '@mui/material/MenuList'; -import Stack from '@mui/material/Stack'; - -export default function MenuListComposition() { - const [open, setOpen] = React.useState(false); - const anchorRef = React.useRef(null); - - const handleToggle = () => { - setOpen((prevOpen) => !prevOpen); - }; - - const handleClose = (event) => { - if (anchorRef.current && anchorRef.current.contains(event.target)) { - return; - } - - setOpen(false); - }; - - function handleListKeyDown(event) { - if (event.key === 'Tab') { - event.preventDefault(); - setOpen(false); - } else if (event.key === 'Escape') { - setOpen(false); - } - } - - // return focus to the button when we transitioned from !open -> open - const prevOpen = React.useRef(open); - React.useEffect(() => { - if (prevOpen.current === true && open === false) { - anchorRef.current.focus(); - } - - prevOpen.current = open; - }, [open]); - - return ( - - - - Profile - My account - Logout - - -
    - - - {({ TransitionProps, placement }) => ( - - - - - Profile - My account - Logout - - - - - )} - -
    -     - ); -} diff --git a/docs/data/material/components/menus/MenuPopupState.js b/docs/data/material/components/menus/MenuPopupState.js deleted file mode 100644 index 5dd429ebecf4e2..00000000000000 --- a/docs/data/material/components/menus/MenuPopupState.js +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; -import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state'; - -export default function MenuPopupState() { - return ( - - {(popupState) => ( - - - - Profile - My account - Logout - - - )} - - ); -} diff --git a/docs/data/material/components/menus/MenuPopupState.tsx.preview b/docs/data/material/components/menus/MenuPopupState.tsx.preview deleted file mode 100644 index 163e35dcc37a0c..00000000000000 --- a/docs/data/material/components/menus/MenuPopupState.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - {(popupState) => ( - - - - Profile - My account - Logout - - - )} - \ No newline at end of file diff --git a/docs/data/material/components/menus/PositionedMenu.js b/docs/data/material/components/menus/PositionedMenu.js deleted file mode 100644 index d664cec05e5737..00000000000000 --- a/docs/data/material/components/menus/PositionedMenu.js +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Menu from '@mui/material/Menu'; -import MenuItem from '@mui/material/MenuItem'; - -export default function PositionedMenu() { - const [anchorEl, setAnchorEl] = React.useState(null); - const open = Boolean(anchorEl); - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - const handleClose = () => { - setAnchorEl(null); - }; - - return ( -
    - - - Profile - My account - Logout - -
    - ); -} diff --git a/docs/data/material/components/menus/SimpleListMenu.js b/docs/data/material/components/menus/SimpleListMenu.js deleted file mode 100644 index 32931375e5aa35..00000000000000 --- a/docs/data/material/components/menus/SimpleListMenu.js +++ /dev/null @@ -1,78 +0,0 @@ -import * as React from 'react'; -import List from '@mui/material/List'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemText from '@mui/material/ListItemText'; -import MenuItem from '@mui/material/MenuItem'; -import Menu from '@mui/material/Menu'; - -const options = [ - 'Show some love to MUI', - 'Show all notification content', - 'Hide sensitive notification content', - 'Hide all notification content', -]; - -export default function SimpleListMenu() { - const [anchorEl, setAnchorEl] = React.useState(null); - const [selectedIndex, setSelectedIndex] = React.useState(1); - const open = Boolean(anchorEl); - const handleClickListItem = (event) => { - setAnchorEl(event.currentTarget); - }; - - const handleMenuItemClick = (event, index) => { - setSelectedIndex(index); - setAnchorEl(null); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - return ( -
    - - - - - - - {options.map((option, index) => ( - handleMenuItemClick(event, index)} - > - {option} - - ))} - -
    - ); -} diff --git a/docs/data/material/components/menus/TypographyMenu.js b/docs/data/material/components/menus/TypographyMenu.js deleted file mode 100644 index 54837639eb0e3d..00000000000000 --- a/docs/data/material/components/menus/TypographyMenu.js +++ /dev/null @@ -1,37 +0,0 @@ -import MenuList from '@mui/material/MenuList'; -import MenuItem from '@mui/material/MenuItem'; -import Paper from '@mui/material/Paper'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import Typography from '@mui/material/Typography'; -import DraftsIcon from '@mui/icons-material/Drafts'; -import SendIcon from '@mui/icons-material/Send'; -import PriorityHighIcon from '@mui/icons-material/PriorityHigh'; - -export default function TypographyMenu() { - return ( - - - - - - - A short message - - - - - - A very long text that overflows - - - - - - - A very long text that overflows - - - - - ); -} diff --git a/docs/data/material/components/menus/AccountMenu.tsx b/docs/data/material/components/menus/demos/account/AccountMenu.tsx similarity index 98% rename from docs/data/material/components/menus/AccountMenu.tsx rename to docs/data/material/components/menus/demos/account/AccountMenu.tsx index dc5b87f33863e8..13d1777261a298 100644 --- a/docs/data/material/components/menus/AccountMenu.tsx +++ b/docs/data/material/components/menus/demos/account/AccountMenu.tsx @@ -13,6 +13,7 @@ import Settings from '@mui/icons-material/Settings'; import Logout from '@mui/icons-material/Logout'; export default function AccountMenu() { + // @focus-start @padding 1 const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const handleClick = (event: React.MouseEvent) => { @@ -104,4 +105,5 @@ export default function AccountMenu() {     ); + // @focus-end } diff --git a/docs/data/material/components/menus/demos/account/client.ts b/docs/data/material/components/menus/demos/account/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/menus/demos/account/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/menus/demos/account/index.ts b/docs/data/material/components/menus/demos/account/index.ts new file mode 100644 index 00000000000000..7b7e3d70da272a --- /dev/null +++ b/docs/data/material/components/menus/demos/account/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AccountMenu from './AccountMenu'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AccountMenu, { ClientProvider }); diff --git a/docs/data/material/components/menus/BasicMenu.tsx b/docs/data/material/components/menus/demos/basic/BasicMenu.tsx similarity index 96% rename from docs/data/material/components/menus/BasicMenu.tsx rename to docs/data/material/components/menus/demos/basic/BasicMenu.tsx index ea70ef23026202..b690a5c9138bc6 100644 --- a/docs/data/material/components/menus/BasicMenu.tsx +++ b/docs/data/material/components/menus/demos/basic/BasicMenu.tsx @@ -4,6 +4,7 @@ import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; export default function BasicMenu() { + // @focus-start @padding 1 const id = React.useId(); const buttonId = `${id}-button`; const menuId = `${id}-menu`; @@ -44,4 +45,5 @@ export default function BasicMenu() {
    ); + // @focus-end } diff --git a/docs/data/material/components/menus/demos/basic/client.ts b/docs/data/material/components/menus/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/menus/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/menus/demos/basic/index.ts b/docs/data/material/components/menus/demos/basic/index.ts new file mode 100644 index 00000000000000..8fba53423964ab --- /dev/null +++ b/docs/data/material/components/menus/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicMenu from './BasicMenu'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicMenu, { ClientProvider }); diff --git a/docs/data/material/components/menus/ContextMenu.tsx b/docs/data/material/components/menus/demos/context/ContextMenu.tsx similarity index 98% rename from docs/data/material/components/menus/ContextMenu.tsx rename to docs/data/material/components/menus/demos/context/ContextMenu.tsx index 394ad859584d11..e57b086cbc1c16 100644 --- a/docs/data/material/components/menus/ContextMenu.tsx +++ b/docs/data/material/components/menus/demos/context/ContextMenu.tsx @@ -4,6 +4,7 @@ import MenuItem from '@mui/material/MenuItem'; import Typography from '@mui/material/Typography'; export default function ContextMenu() { + // @focus-start @padding 1 const [contextMenu, setContextMenu] = React.useState<{ mouseX: number; mouseY: number; @@ -68,4 +69,5 @@ export default function ContextMenu() {
    ); + // @focus-end } diff --git a/docs/data/material/components/menus/demos/context/client.ts b/docs/data/material/components/menus/demos/context/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/menus/demos/context/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/menus/demos/context/index.ts b/docs/data/material/components/menus/demos/context/index.ts new file mode 100644 index 00000000000000..4ba24ed82a4163 --- /dev/null +++ b/docs/data/material/components/menus/demos/context/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ContextMenu from './ContextMenu'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ContextMenu, { ClientProvider }); diff --git a/docs/data/material/components/menus/CustomizedMenus.tsx b/docs/data/material/components/menus/demos/customized/CustomizedMenus.tsx similarity index 95% rename from docs/data/material/components/menus/CustomizedMenus.tsx rename to docs/data/material/components/menus/demos/customized/CustomizedMenus.tsx index 46a8823ffc118c..8eae5306187275 100644 --- a/docs/data/material/components/menus/CustomizedMenus.tsx +++ b/docs/data/material/components/menus/demos/customized/CustomizedMenus.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { styled, alpha } from '@mui/material/styles'; import Button from '@mui/material/Button'; -import Menu, { MenuProps } from '@mui/material/Menu'; +import Menu from '@mui/material/Menu'; +import type { MenuProps } from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; import EditIcon from '@mui/icons-material/Edit'; import Divider from '@mui/material/Divider'; @@ -57,6 +58,7 @@ const StyledMenu = styled((props: MenuProps) => ( })); export default function CustomizedMenus() { + // @focus-start @padding 1 const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const handleClick = (event: React.MouseEvent) => { @@ -111,4 +113,5 @@ export default function CustomizedMenus() { ); + // @focus-end } diff --git a/docs/data/material/components/menus/demos/customized/client.ts b/docs/data/material/components/menus/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/menus/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/menus/demos/customized/index.ts b/docs/data/material/components/menus/demos/customized/index.ts new file mode 100644 index 00000000000000..e80453ae163589 --- /dev/null +++ b/docs/data/material/components/menus/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedMenus from './CustomizedMenus'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedMenus, { ClientProvider }); diff --git a/docs/data/material/components/menus/DenseMenu.tsx b/docs/data/material/components/menus/demos/dense/DenseMenu.tsx similarity index 96% rename from docs/data/material/components/menus/DenseMenu.tsx rename to docs/data/material/components/menus/demos/dense/DenseMenu.tsx index e37081dc34732e..87e7295f60aea3 100644 --- a/docs/data/material/components/menus/DenseMenu.tsx +++ b/docs/data/material/components/menus/demos/dense/DenseMenu.tsx @@ -8,6 +8,7 @@ import Check from '@mui/icons-material/Check'; export default function DenseMenu() { return ( + // @focus-start @padding 2 @@ -38,5 +39,6 @@ export default function DenseMenu() { + // @focus-end ); } diff --git a/docs/data/material/components/menus/demos/dense/client.ts b/docs/data/material/components/menus/demos/dense/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/menus/demos/dense/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/menus/demos/dense/index.ts b/docs/data/material/components/menus/demos/dense/index.ts new file mode 100644 index 00000000000000..4e2c99208b8684 --- /dev/null +++ b/docs/data/material/components/menus/demos/dense/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DenseMenu from './DenseMenu'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DenseMenu, { ClientProvider }); diff --git a/docs/data/material/components/menus/FadeMenu.tsx b/docs/data/material/components/menus/demos/fade/FadeMenu.tsx similarity index 96% rename from docs/data/material/components/menus/FadeMenu.tsx rename to docs/data/material/components/menus/demos/fade/FadeMenu.tsx index 7a0655425bbb67..ef46485aac76c0 100644 --- a/docs/data/material/components/menus/FadeMenu.tsx +++ b/docs/data/material/components/menus/demos/fade/FadeMenu.tsx @@ -5,6 +5,7 @@ import MenuItem from '@mui/material/MenuItem'; import Fade from '@mui/material/Fade'; export default function FadeMenu() { + // @focus-start @padding 1 const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const handleClick = (event: React.MouseEvent) => { @@ -43,4 +44,5 @@ export default function FadeMenu() { ); + // @focus-end } diff --git a/docs/data/material/components/menus/demos/fade/client.ts b/docs/data/material/components/menus/demos/fade/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/menus/demos/fade/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/menus/demos/fade/index.ts b/docs/data/material/components/menus/demos/fade/index.ts new file mode 100644 index 00000000000000..8b59e150aa1a13 --- /dev/null +++ b/docs/data/material/components/menus/demos/fade/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FadeMenu from './FadeMenu'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FadeMenu, { ClientProvider }); diff --git a/docs/data/material/components/menus/GroupedMenu.tsx b/docs/data/material/components/menus/demos/grouped/GroupedMenu.tsx similarity index 97% rename from docs/data/material/components/menus/GroupedMenu.tsx rename to docs/data/material/components/menus/demos/grouped/GroupedMenu.tsx index cb32bdad2b0256..dfbda5cacb8624 100644 --- a/docs/data/material/components/menus/GroupedMenu.tsx +++ b/docs/data/material/components/menus/demos/grouped/GroupedMenu.tsx @@ -10,6 +10,7 @@ const StyledListHeader = styled(ListSubheader)({ }); export default function GroupedMenu() { + // @focus-start @padding 1 const id = React.useId(); const buttonId = `${id}-button`; const menuId = `${id}-menu`; @@ -56,4 +57,5 @@ export default function GroupedMenu() { ); + // @focus-end } diff --git a/docs/data/material/components/menus/demos/grouped/client.ts b/docs/data/material/components/menus/demos/grouped/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/menus/demos/grouped/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/menus/demos/grouped/index.ts b/docs/data/material/components/menus/demos/grouped/index.ts new file mode 100644 index 00000000000000..37aa99312622e0 --- /dev/null +++ b/docs/data/material/components/menus/demos/grouped/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GroupedMenu from './GroupedMenu'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GroupedMenu, { ClientProvider }); diff --git a/docs/data/material/components/menus/IconMenu.tsx b/docs/data/material/components/menus/demos/icon/IconMenu.tsx similarity index 97% rename from docs/data/material/components/menus/IconMenu.tsx rename to docs/data/material/components/menus/demos/icon/IconMenu.tsx index edb78c615296d9..3cad6178fed38a 100644 --- a/docs/data/material/components/menus/IconMenu.tsx +++ b/docs/data/material/components/menus/demos/icon/IconMenu.tsx @@ -12,6 +12,7 @@ import Cloud from '@mui/icons-material/Cloud'; export default function IconMenu() { return ( + // @focus-start @padding 2 @@ -50,5 +51,6 @@ export default function IconMenu() { + // @focus-end ); } diff --git a/docs/data/material/components/menus/demos/icon/client.ts b/docs/data/material/components/menus/demos/icon/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/menus/demos/icon/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/menus/demos/icon/index.ts b/docs/data/material/components/menus/demos/icon/index.ts new file mode 100644 index 00000000000000..0a2c870bdc1d33 --- /dev/null +++ b/docs/data/material/components/menus/demos/icon/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IconMenu from './IconMenu'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IconMenu, { ClientProvider }); diff --git a/docs/data/material/components/menus/MenuListComposition.tsx b/docs/data/material/components/menus/demos/list-composition/MenuListComposition.tsx similarity index 98% rename from docs/data/material/components/menus/MenuListComposition.tsx rename to docs/data/material/components/menus/demos/list-composition/MenuListComposition.tsx index b90632cac28cd5..ccfa18eba57d95 100644 --- a/docs/data/material/components/menus/MenuListComposition.tsx +++ b/docs/data/material/components/menus/demos/list-composition/MenuListComposition.tsx @@ -9,6 +9,7 @@ import MenuList from '@mui/material/MenuList'; import Stack from '@mui/material/Stack'; export default function MenuListComposition() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const anchorRef = React.useRef(null); @@ -102,4 +103,5 @@ export default function MenuListComposition() { ); + // @focus-end } diff --git a/docs/data/material/components/menus/demos/list-composition/client.ts b/docs/data/material/components/menus/demos/list-composition/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/menus/demos/list-composition/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/menus/demos/list-composition/index.ts b/docs/data/material/components/menus/demos/list-composition/index.ts new file mode 100644 index 00000000000000..e03af2838b57a6 --- /dev/null +++ b/docs/data/material/components/menus/demos/list-composition/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MenuListComposition from './MenuListComposition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MenuListComposition, { ClientProvider }); diff --git a/docs/data/material/components/menus/LongMenu.tsx b/docs/data/material/components/menus/demos/long/LongMenu.tsx similarity index 97% rename from docs/data/material/components/menus/LongMenu.tsx rename to docs/data/material/components/menus/demos/long/LongMenu.tsx index 6b203951b684f5..e173c52c5d092c 100644 --- a/docs/data/material/components/menus/LongMenu.tsx +++ b/docs/data/material/components/menus/demos/long/LongMenu.tsx @@ -24,6 +24,7 @@ const options = [ const ITEM_HEIGHT = 48; export default function LongMenu() { + // @focus-start @padding 1 const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const handleClick = (event: React.MouseEvent) => { @@ -70,4 +71,5 @@ export default function LongMenu() { ); + // @focus-end } diff --git a/docs/data/material/components/menus/demos/long/client.ts b/docs/data/material/components/menus/demos/long/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/menus/demos/long/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/menus/demos/long/index.ts b/docs/data/material/components/menus/demos/long/index.ts new file mode 100644 index 00000000000000..8c5cc660ca7c79 --- /dev/null +++ b/docs/data/material/components/menus/demos/long/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LongMenu from './LongMenu'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LongMenu, { ClientProvider }); diff --git a/docs/data/material/components/menus/MenuPopupState.tsx b/docs/data/material/components/menus/demos/popup-state/MenuPopupState.tsx similarity index 94% rename from docs/data/material/components/menus/MenuPopupState.tsx rename to docs/data/material/components/menus/demos/popup-state/MenuPopupState.tsx index 5dd429ebecf4e2..09d2298bf07e48 100644 --- a/docs/data/material/components/menus/MenuPopupState.tsx +++ b/docs/data/material/components/menus/demos/popup-state/MenuPopupState.tsx @@ -6,6 +6,7 @@ import PopupState, { bindTrigger, bindMenu } from 'material-ui-popup-state'; export default function MenuPopupState() { return ( + // @focus-start @padding 2 {(popupState) => ( @@ -20,5 +21,6 @@ export default function MenuPopupState() { )} + // @focus-end ); } diff --git a/docs/data/material/components/menus/demos/popup-state/client.ts b/docs/data/material/components/menus/demos/popup-state/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/menus/demos/popup-state/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/menus/demos/popup-state/index.ts b/docs/data/material/components/menus/demos/popup-state/index.ts new file mode 100644 index 00000000000000..95c93b299d3759 --- /dev/null +++ b/docs/data/material/components/menus/demos/popup-state/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MenuPopupState from './MenuPopupState'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MenuPopupState, { ClientProvider }); diff --git a/docs/data/material/components/menus/PositionedMenu.tsx b/docs/data/material/components/menus/demos/positioned/PositionedMenu.tsx similarity index 96% rename from docs/data/material/components/menus/PositionedMenu.tsx rename to docs/data/material/components/menus/demos/positioned/PositionedMenu.tsx index 5a2e9d903f2ef5..b977b0c8d7497f 100644 --- a/docs/data/material/components/menus/PositionedMenu.tsx +++ b/docs/data/material/components/menus/demos/positioned/PositionedMenu.tsx @@ -4,6 +4,7 @@ import Menu from '@mui/material/Menu'; import MenuItem from '@mui/material/MenuItem'; export default function PositionedMenu() { + // @focus-start @padding 1 const [anchorEl, setAnchorEl] = React.useState(null); const open = Boolean(anchorEl); const handleClick = (event: React.MouseEvent) => { @@ -45,4 +46,5 @@ export default function PositionedMenu() { ); + // @focus-end } diff --git a/docs/data/material/components/menus/demos/positioned/client.ts b/docs/data/material/components/menus/demos/positioned/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/menus/demos/positioned/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/menus/demos/positioned/index.ts b/docs/data/material/components/menus/demos/positioned/index.ts new file mode 100644 index 00000000000000..70dae74c75a43d --- /dev/null +++ b/docs/data/material/components/menus/demos/positioned/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PositionedMenu from './PositionedMenu'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PositionedMenu, { ClientProvider }); diff --git a/docs/data/material/components/menus/SimpleListMenu.tsx b/docs/data/material/components/menus/demos/simple-list/SimpleListMenu.tsx similarity index 97% rename from docs/data/material/components/menus/SimpleListMenu.tsx rename to docs/data/material/components/menus/demos/simple-list/SimpleListMenu.tsx index 31688998e0333c..94467738bd15c6 100644 --- a/docs/data/material/components/menus/SimpleListMenu.tsx +++ b/docs/data/material/components/menus/demos/simple-list/SimpleListMenu.tsx @@ -13,6 +13,7 @@ const options = [ ]; export default function SimpleListMenu() { + // @focus-start @padding 1 const [anchorEl, setAnchorEl] = React.useState(null); const [selectedIndex, setSelectedIndex] = React.useState(1); const open = Boolean(anchorEl); @@ -78,4 +79,5 @@ export default function SimpleListMenu() { ); + // @focus-end } diff --git a/docs/data/material/components/menus/demos/simple-list/client.ts b/docs/data/material/components/menus/demos/simple-list/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/menus/demos/simple-list/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/menus/demos/simple-list/index.ts b/docs/data/material/components/menus/demos/simple-list/index.ts new file mode 100644 index 00000000000000..d780e4ff365743 --- /dev/null +++ b/docs/data/material/components/menus/demos/simple-list/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleListMenu from './SimpleListMenu'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleListMenu, { ClientProvider }); diff --git a/docs/data/material/components/menus/TypographyMenu.tsx b/docs/data/material/components/menus/demos/typography/TypographyMenu.tsx similarity index 96% rename from docs/data/material/components/menus/TypographyMenu.tsx rename to docs/data/material/components/menus/demos/typography/TypographyMenu.tsx index 54837639eb0e3d..c76af7cc41c39f 100644 --- a/docs/data/material/components/menus/TypographyMenu.tsx +++ b/docs/data/material/components/menus/demos/typography/TypographyMenu.tsx @@ -9,6 +9,7 @@ import PriorityHighIcon from '@mui/icons-material/PriorityHigh'; export default function TypographyMenu() { return ( + // @focus-start @padding 2 @@ -33,5 +34,6 @@ export default function TypographyMenu() { + // @focus-end ); } diff --git a/docs/data/material/components/menus/demos/typography/client.ts b/docs/data/material/components/menus/demos/typography/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/menus/demos/typography/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/menus/demos/typography/index.ts b/docs/data/material/components/menus/demos/typography/index.ts new file mode 100644 index 00000000000000..bca52344dcef37 --- /dev/null +++ b/docs/data/material/components/menus/demos/typography/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TypographyMenu from './TypographyMenu'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TypographyMenu, { ClientProvider }); diff --git a/docs/data/material/components/menus/menus.md b/docs/data/material/components/menus/menus.md index 9ae8536ade0a43..e12bdf200982ad 100644 --- a/docs/data/material/components/menus/menus.md +++ b/docs/data/material/components/menus/menus.md @@ -30,19 +30,19 @@ A basic menu opens over the anchor element by default (this option can be [chang You should configure the component so that selecting an option immediately confirms it and closes the menu, as shown in the demo below. -{{"demo": "BasicMenu.js"}} +{{"component": "file://./demos/basic/index.ts"}} ## Icon menu In desktop viewport, padding is increased to give more space to the menu. -{{"demo": "IconMenu.js", "bg": true}} +{{"component": "file://./demos/icon/index.ts", "bg": true}} ## Dense menu For the menu that has long list and long text, you can use the `dense` prop to reduce the padding and text size. -{{"demo": "DenseMenu.js", "bg": true}} +{{"component": "file://./demos/dense/index.ts", "bg": true}} ## Selected menu @@ -50,14 +50,14 @@ If used for item selection, when opened, simple menus places the initial focus o The currently selected menu item is set using the `selected` prop (from [ListItem](/material-ui/api/list-item/)). To use a selected menu item without impacting the initial focus, set the `variant` prop to "menu". -{{"demo": "SimpleListMenu.js"}} +{{"component": "file://./demos/simple-list/index.ts"}} ## Positioned menu Because the `Menu` component uses the `Popover` component to position itself, you can use the same [positioning props](/material-ui/react-popover/#anchor-playground) to position it. For instance, you can display the menu on top of the anchor: -{{"demo": "PositionedMenu.js"}} +{{"component": "file://./demos/positioned/index.ts"}} ## Composition with Menu List @@ -67,20 +67,20 @@ But you might want to use a different positioning strategy, or prefer not to blo The Menu List component lets you compose your own menu for these kinds of use cases—its primary purpose is to handle focus. See the demo below for an example of composition that uses Menu List and replaces the Menu's default Popover with a Popper component instead: -{{"demo": "MenuListComposition.js", "bg": true}} +{{"component": "file://./demos/list-composition/index.ts", "bg": true}} ## Account menu `Menu` content can be mixed with other components like `Avatar`. -{{"demo": "AccountMenu.js"}} +{{"component": "file://./demos/account/index.ts"}} ## Customization Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedMenus.js"}} +{{"component": "file://./demos/customized/index.ts"}} The `MenuItem` is a wrapper around `ListItem` with some additional styles. You can use the same list composition features with the `MenuItem` component: @@ -91,32 +91,32 @@ You can use the same list composition features with the `MenuItem` component: If the height of a menu prevents all menu items from being displayed, the menu can scroll internally. -{{"demo": "LongMenu.js"}} +{{"component": "file://./demos/long/index.ts"}} ## Limitations There is [a flexbox bug](https://issues.chromium.org/issues/40344463) that prevents `text-overflow: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: -{{"demo": "TypographyMenu.js", "bg": true}} +{{"component": "file://./demos/typography/index.ts", "bg": true}} ## Change transition Use `slots.transition` and `slotProps.transition` to use a different transition. -{{"demo": "FadeMenu.js"}} +{{"component": "file://./demos/fade/index.ts"}} ## Context menu Here is an example of a context menu. (Right click to open.) -{{"demo": "ContextMenu.js"}} +{{"component": "file://./demos/context/index.ts"}} ## Grouped Menu Display categories with the `ListSubheader` component. -{{"demo": "GroupedMenu.js"}} +{{"component": "file://./demos/grouped/index.ts"}} ## Supplementary projects @@ -129,4 +129,4 @@ For more advanced use cases you might be able to take advantage of: The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. -{{"demo": "MenuPopupState.js"}} +{{"component": "file://./demos/popup-state/index.ts"}} diff --git a/docs/data/material/components/modal/BasicModal.js b/docs/data/material/components/modal/BasicModal.js deleted file mode 100644 index d65efec6408e85..00000000000000 --- a/docs/data/material/components/modal/BasicModal.js +++ /dev/null @@ -1,44 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; -import Modal from '@mui/material/Modal'; - -const style = { - position: 'absolute', - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - width: 400, - bgcolor: 'background.paper', - border: '2px solid #000', - boxShadow: 24, - p: 4, -}; - -export default function BasicModal() { - const [open, setOpen] = React.useState(false); - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - - return ( -
    - - - - - Text in a modal - - - Duis mollis, est non commodo luctus, nisi erat porttitor ligula. - - - -
    - ); -} diff --git a/docs/data/material/components/modal/BasicModal.tsx.preview b/docs/data/material/components/modal/BasicModal.tsx.preview deleted file mode 100644 index 2ef5a0e2b515dd..00000000000000 --- a/docs/data/material/components/modal/BasicModal.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - - - - Text in a modal - - - Duis mollis, est non commodo luctus, nisi erat porttitor ligula. - - - \ No newline at end of file diff --git a/docs/data/material/components/modal/KeepMountedModal.js b/docs/data/material/components/modal/KeepMountedModal.js deleted file mode 100644 index d1c3187539a07c..00000000000000 --- a/docs/data/material/components/modal/KeepMountedModal.js +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Modal from '@mui/material/Modal'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; - -const style = { - position: 'absolute', - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - width: 400, - bgcolor: 'background.paper', - border: '2px solid #000', - boxShadow: 24, - p: 4, -}; - -export default function KeepMountedModal() { - const [open, setOpen] = React.useState(false); - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - - return ( -
    - - - - - Text in a modal - - - Duis mollis, est non commodo luctus, nisi erat porttitor ligula. - - - -
    - ); -} diff --git a/docs/data/material/components/modal/NestedModal.js b/docs/data/material/components/modal/NestedModal.js deleted file mode 100644 index ba0d00593d26e3..00000000000000 --- a/docs/data/material/components/modal/NestedModal.js +++ /dev/null @@ -1,78 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Modal from '@mui/material/Modal'; -import Button from '@mui/material/Button'; - -const style = { - position: 'absolute', - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - width: 400, - bgcolor: 'background.paper', - border: '2px solid #000', - boxShadow: 24, - pt: 2, - px: 4, - pb: 3, -}; - -function ChildModal() { - const [open, setOpen] = React.useState(false); - const handleOpen = () => { - setOpen(true); - }; - const handleClose = () => { - setOpen(false); - }; - - return ( - - - - -

    Text in a child modal

    -

    - Lorem ipsum, dolor sit amet consectetur adipisicing elit. -

    - -     -     -     - ); -} - -export default function NestedModal() { - const [open, setOpen] = React.useState(false); - const handleOpen = () => { - setOpen(true); - }; - const handleClose = () => { - setOpen(false); - }; - - return ( -
    - - - -

    Text in a modal

    -

    - Duis mollis, est non commodo luctus, nisi erat porttitor ligula. -

    - -     -     -
    - ); -} diff --git a/docs/data/material/components/modal/NestedModal.tsx.preview b/docs/data/material/components/modal/NestedModal.tsx.preview deleted file mode 100644 index d18728f01466ed..00000000000000 --- a/docs/data/material/components/modal/NestedModal.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - - -

    Text in a modal

    -

    - Duis mollis, est non commodo luctus, nisi erat porttitor ligula. -

    - -     -     \ No newline at end of file diff --git a/docs/data/material/components/modal/ServerModal.js b/docs/data/material/components/modal/ServerModal.js deleted file mode 100644 index 9fc6526b8e55f8..00000000000000 --- a/docs/data/material/components/modal/ServerModal.js +++ /dev/null @@ -1,54 +0,0 @@ -import * as React from 'react'; -import Modal from '@mui/material/Modal'; -import Typography from '@mui/material/Typography'; -import Box from '@mui/material/Box'; - -export default function ServerModal() { - const rootRef = React.useRef(null); - - return ( - - rootRef.current} - > - ({ - position: 'relative', - width: 400, - bgcolor: 'background.paper', - border: '2px solid #000', - boxShadow: theme.shadows[5], - p: 4, - })} - > - - Server-side modal - - - If you disable JavaScript, you will still see me. - - - - - ); -} diff --git a/docs/data/material/components/modal/SpringModal.js b/docs/data/material/components/modal/SpringModal.js deleted file mode 100644 index bb012c520d0357..00000000000000 --- a/docs/data/material/components/modal/SpringModal.js +++ /dev/null @@ -1,95 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Backdrop from '@mui/material/Backdrop'; -import Box from '@mui/material/Box'; -import Modal from '@mui/material/Modal'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; -import { useSpring, animated } from '@react-spring/web'; - -const Fade = React.forwardRef(function Fade(props, ref) { - const { - children, - in: open, - onClick, - onEnter, - onExited, - ownerState, - ...other - } = props; - const style = useSpring({ - from: { opacity: 0 }, - to: { opacity: open ? 1 : 0 }, - onStart: () => { - if (open && onEnter) { - onEnter(null, true); - } - }, - onRest: () => { - if (!open && onExited) { - onExited(null, true); - } - }, - }); - - return ( - - {React.cloneElement(children, { onClick })} - - ); -}); - -Fade.propTypes = { - children: PropTypes.element.isRequired, - in: PropTypes.bool, - onClick: PropTypes.any, - onEnter: PropTypes.func, - onExited: PropTypes.func, - ownerState: PropTypes.any, -}; - -const style = { - position: 'absolute', - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - width: 400, - bgcolor: 'background.paper', - border: '2px solid #000', - boxShadow: 24, - p: 4, -}; - -export default function SpringModal() { - const [open, setOpen] = React.useState(false); - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - - return ( -
    - - - - - - Text in a modal - - - Duis mollis, est non commodo luctus, nisi erat porttitor ligula. - - - - -
    - ); -} diff --git a/docs/data/material/components/modal/TransitionsModal.js b/docs/data/material/components/modal/TransitionsModal.js deleted file mode 100644 index 8a2304e534bb0b..00000000000000 --- a/docs/data/material/components/modal/TransitionsModal.js +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; -import Backdrop from '@mui/material/Backdrop'; -import Box from '@mui/material/Box'; -import Modal from '@mui/material/Modal'; -import Fade from '@mui/material/Fade'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; - -const style = { - position: 'absolute', - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - width: 400, - bgcolor: 'background.paper', - border: '2px solid #000', - boxShadow: 24, - p: 4, -}; - -export default function TransitionsModal() { - const [open, setOpen] = React.useState(false); - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - - return ( -
    - - - - - - Text in a modal - - - Duis mollis, est non commodo luctus, nisi erat porttitor ligula. - - - - -
    - ); -} diff --git a/docs/data/material/components/modal/BasicModal.tsx b/docs/data/material/components/modal/demos/basic/BasicModal.tsx similarity index 95% rename from docs/data/material/components/modal/BasicModal.tsx rename to docs/data/material/components/modal/demos/basic/BasicModal.tsx index d65efec6408e85..45c94227f3aa74 100644 --- a/docs/data/material/components/modal/BasicModal.tsx +++ b/docs/data/material/components/modal/demos/basic/BasicModal.tsx @@ -23,6 +23,7 @@ export default function BasicModal() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/modal/demos/basic/client.ts b/docs/data/material/components/modal/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/modal/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/modal/demos/basic/index.ts b/docs/data/material/components/modal/demos/basic/index.ts new file mode 100644 index 00000000000000..b7c3a115e3e883 --- /dev/null +++ b/docs/data/material/components/modal/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicModal from './BasicModal'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicModal, { ClientProvider }); diff --git a/docs/data/material/components/modal/KeepMountedModal.tsx b/docs/data/material/components/modal/demos/keep-mounted/KeepMountedModal.tsx similarity index 96% rename from docs/data/material/components/modal/KeepMountedModal.tsx rename to docs/data/material/components/modal/demos/keep-mounted/KeepMountedModal.tsx index d1c3187539a07c..8b839b4a579af2 100644 --- a/docs/data/material/components/modal/KeepMountedModal.tsx +++ b/docs/data/material/components/modal/demos/keep-mounted/KeepMountedModal.tsx @@ -17,6 +17,7 @@ const style = { }; export default function KeepMountedModal() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); @@ -42,4 +43,5 @@ export default function KeepMountedModal() { ); + // @focus-end } diff --git a/docs/data/material/components/modal/demos/keep-mounted/client.ts b/docs/data/material/components/modal/demos/keep-mounted/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/modal/demos/keep-mounted/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/modal/demos/keep-mounted/index.ts b/docs/data/material/components/modal/demos/keep-mounted/index.ts new file mode 100644 index 00000000000000..2d8aff8f74dca0 --- /dev/null +++ b/docs/data/material/components/modal/demos/keep-mounted/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import KeepMountedModal from './KeepMountedModal'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, KeepMountedModal, { ClientProvider }); diff --git a/docs/data/material/components/modal/NestedModal.tsx b/docs/data/material/components/modal/demos/nested/NestedModal.tsx similarity index 97% rename from docs/data/material/components/modal/NestedModal.tsx rename to docs/data/material/components/modal/demos/nested/NestedModal.tsx index ba0d00593d26e3..e247d7fcd7bb3e 100644 --- a/docs/data/material/components/modal/NestedModal.tsx +++ b/docs/data/material/components/modal/demos/nested/NestedModal.tsx @@ -58,6 +58,7 @@ export default function NestedModal() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/modal/demos/nested/client.ts b/docs/data/material/components/modal/demos/nested/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/modal/demos/nested/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/modal/demos/nested/index.ts b/docs/data/material/components/modal/demos/nested/index.ts new file mode 100644 index 00000000000000..dbe5375940378b --- /dev/null +++ b/docs/data/material/components/modal/demos/nested/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import NestedModal from './NestedModal'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, NestedModal, { ClientProvider }); diff --git a/docs/data/material/components/modal/ServerModal.tsx b/docs/data/material/components/modal/demos/server/ServerModal.tsx similarity index 96% rename from docs/data/material/components/modal/ServerModal.tsx rename to docs/data/material/components/modal/demos/server/ServerModal.tsx index 7663a97cecf15a..fd487b254cbf69 100644 --- a/docs/data/material/components/modal/ServerModal.tsx +++ b/docs/data/material/components/modal/demos/server/ServerModal.tsx @@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; export default function ServerModal() { + // @focus-start @padding 1 const rootRef = React.useRef(null); return ( @@ -51,4 +52,5 @@ export default function ServerModal() { ); + // @focus-end } diff --git a/docs/data/material/components/modal/demos/server/client.ts b/docs/data/material/components/modal/demos/server/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/modal/demos/server/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/modal/demos/server/index.ts b/docs/data/material/components/modal/demos/server/index.ts new file mode 100644 index 00000000000000..f3c52c4ac5598f --- /dev/null +++ b/docs/data/material/components/modal/demos/server/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ServerModal from './ServerModal'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ServerModal, { ClientProvider }); diff --git a/docs/data/material/components/modal/SpringModal.tsx b/docs/data/material/components/modal/demos/spring/SpringModal.tsx similarity index 98% rename from docs/data/material/components/modal/SpringModal.tsx rename to docs/data/material/components/modal/demos/spring/SpringModal.tsx index 03c1f05d28b3e8..41afa0fbde23bc 100644 --- a/docs/data/material/components/modal/SpringModal.tsx +++ b/docs/data/material/components/modal/demos/spring/SpringModal.tsx @@ -60,6 +60,7 @@ const style = { }; export default function SpringModal() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); @@ -91,4 +92,5 @@ export default function SpringModal() { ); + // @focus-end } diff --git a/docs/data/material/components/modal/demos/spring/client.ts b/docs/data/material/components/modal/demos/spring/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/modal/demos/spring/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/modal/demos/spring/index.ts b/docs/data/material/components/modal/demos/spring/index.ts new file mode 100644 index 00000000000000..1f34f7e54a0ade --- /dev/null +++ b/docs/data/material/components/modal/demos/spring/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SpringModal from './SpringModal'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SpringModal, { ClientProvider }); diff --git a/docs/data/material/components/modal/TransitionsModal.tsx b/docs/data/material/components/modal/demos/transitions/TransitionsModal.tsx similarity index 97% rename from docs/data/material/components/modal/TransitionsModal.tsx rename to docs/data/material/components/modal/demos/transitions/TransitionsModal.tsx index 8a2304e534bb0b..8ed0ffbbb81891 100644 --- a/docs/data/material/components/modal/TransitionsModal.tsx +++ b/docs/data/material/components/modal/demos/transitions/TransitionsModal.tsx @@ -19,6 +19,7 @@ const style = { }; export default function TransitionsModal() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); @@ -52,4 +53,5 @@ export default function TransitionsModal() { ); + // @focus-end } diff --git a/docs/data/material/components/modal/demos/transitions/client.ts b/docs/data/material/components/modal/demos/transitions/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/modal/demos/transitions/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/modal/demos/transitions/index.ts b/docs/data/material/components/modal/demos/transitions/index.ts new file mode 100644 index 00000000000000..7a505a506083ce --- /dev/null +++ b/docs/data/material/components/modal/demos/transitions/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TransitionsModal from './TransitionsModal'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TransitionsModal, { ClientProvider }); diff --git a/docs/data/material/components/modal/modal.md b/docs/data/material/components/modal/modal.md index 51948880403b19..76524310c32f37 100644 --- a/docs/data/material/components/modal/modal.md +++ b/docs/data/material/components/modal/modal.md @@ -39,7 +39,7 @@ Modal is a lower-level construct that is leveraged by the following components: ## Basic modal -{{"demo": "BasicModal.js"}} +{{"component": "file://./demos/basic/index.ts"}} Notice that you can disable the outline (often blue or gold) with the `outline: 0` CSS property. @@ -49,7 +49,7 @@ Modals can be nested, for example a select within a dialog, but stacking of more If you need to nest modals, use the `hideBackdrop` prop on nested Modals to avoid stacking multiple backdrops, which can obscure the active modal or affect interactions. -{{"demo": "NestedModal.js"}} +{{"component": "file://./demos/nested/index.ts"}} ## Transitions @@ -64,11 +64,11 @@ This component should respect the following conditions: Modal has built-in support for [react-transition-group](https://github.com/reactjs/react-transition-group). -{{"demo": "TransitionsModal.js"}} +{{"component": "file://./demos/transitions/index.ts"}} Alternatively, you can use [react-spring](https://github.com/pmndrs/react-spring). -{{"demo": "SpringModal.js"}} +{{"component": "file://./demos/spring/index.ts"}} ## Performance @@ -80,7 +80,7 @@ it might be a good idea to change this default behavior by enabling the `keepMou ``` -{{"demo": "KeepMountedModal.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/keep-mounted/index.ts", "collapseToEmpty": true}} As with any performance optimization, this is not a silver bullet. Be sure to identify bottlenecks first, and then try out these optimization strategies. @@ -90,7 +90,7 @@ Be sure to identify bottlenecks first, and then try out these optimization strat React [doesn't support](https://github.com/react/react/issues/13097) the [`createPortal()`](https://react.dev/reference/react-dom/createPortal) API on the server. In order to display the modal, you need to disable the portal feature with the `disablePortal` prop: -{{"demo": "ServerModal.js"}} +{{"component": "file://./demos/server/index.ts"}} ## Limitations diff --git a/docs/data/material/components/no-ssr/FrameDeferring.js b/docs/data/material/components/no-ssr/FrameDeferring.js deleted file mode 100644 index 12bb991d7c4bf5..00000000000000 --- a/docs/data/material/components/no-ssr/FrameDeferring.js +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import NoSsr from '@mui/material/NoSsr'; - -function LargeTree() { - return Array.from(new Array(5000)).map((_, index) => .); -} - -export default function FrameDeferring() { - const [state, setState] = React.useState({ - open: false, - defer: false, - }); - - return ( -
    - -
    - -
    -
    - - {state.open ? ( - -
    Outside NoSsr
    - - .....Inside NoSsr - - -     - ) : null} -     -
    - ); -} diff --git a/docs/data/material/components/no-ssr/SimpleNoSsr.js b/docs/data/material/components/no-ssr/SimpleNoSsr.js deleted file mode 100644 index a707f142936b87..00000000000000 --- a/docs/data/material/components/no-ssr/SimpleNoSsr.js +++ /dev/null @@ -1,19 +0,0 @@ -import NoSsr from '@mui/material/NoSsr'; -import Box from '@mui/material/Box'; - -export default function SimpleNoSsr() { - return ( -
    - - Server and Client - - - - Client only - - -
    - ); -} diff --git a/docs/data/material/components/no-ssr/SimpleNoSsr.tsx.preview b/docs/data/material/components/no-ssr/SimpleNoSsr.tsx.preview deleted file mode 100644 index a8a7f332c0e2b7..00000000000000 --- a/docs/data/material/components/no-ssr/SimpleNoSsr.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - Server and Client - - - - Client only - - \ No newline at end of file diff --git a/docs/data/material/components/no-ssr/FrameDeferring.tsx b/docs/data/material/components/no-ssr/demos/frame-deferring/FrameDeferring.tsx similarity index 96% rename from docs/data/material/components/no-ssr/FrameDeferring.tsx rename to docs/data/material/components/no-ssr/demos/frame-deferring/FrameDeferring.tsx index 0026a85acf4bea..5bf4c049779e20 100644 --- a/docs/data/material/components/no-ssr/FrameDeferring.tsx +++ b/docs/data/material/components/no-ssr/demos/frame-deferring/FrameDeferring.tsx @@ -7,6 +7,7 @@ function LargeTree(): any { } export default function FrameDeferring() { + // @focus-start @padding 1 const [state, setState] = React.useState({ open: false, defer: false, @@ -52,4 +53,5 @@ export default function FrameDeferring() { ); + // @focus-end } diff --git a/docs/data/material/components/no-ssr/demos/frame-deferring/client.ts b/docs/data/material/components/no-ssr/demos/frame-deferring/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/no-ssr/demos/frame-deferring/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/no-ssr/demos/frame-deferring/index.ts b/docs/data/material/components/no-ssr/demos/frame-deferring/index.ts new file mode 100644 index 00000000000000..bc099724854358 --- /dev/null +++ b/docs/data/material/components/no-ssr/demos/frame-deferring/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FrameDeferring from './FrameDeferring'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FrameDeferring, { ClientProvider }); diff --git a/docs/data/material/components/no-ssr/SimpleNoSsr.tsx b/docs/data/material/components/no-ssr/demos/simple/SimpleNoSsr.tsx similarity index 89% rename from docs/data/material/components/no-ssr/SimpleNoSsr.tsx rename to docs/data/material/components/no-ssr/demos/simple/SimpleNoSsr.tsx index a707f142936b87..ca832dd5f7c7ff 100644 --- a/docs/data/material/components/no-ssr/SimpleNoSsr.tsx +++ b/docs/data/material/components/no-ssr/demos/simple/SimpleNoSsr.tsx @@ -4,6 +4,7 @@ import Box from '@mui/material/Box'; export default function SimpleNoSsr() { return (
    + {/* @focus-start */} Server and Client @@ -14,6 +15,7 @@ export default function SimpleNoSsr() { Client only + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/no-ssr/demos/simple/client.ts b/docs/data/material/components/no-ssr/demos/simple/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/no-ssr/demos/simple/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/no-ssr/demos/simple/index.ts b/docs/data/material/components/no-ssr/demos/simple/index.ts new file mode 100644 index 00000000000000..af63c870226fcd --- /dev/null +++ b/docs/data/material/components/no-ssr/demos/simple/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleNoSsr from './SimpleNoSsr'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleNoSsr, { ClientProvider }); diff --git a/docs/data/material/components/no-ssr/no-ssr.md b/docs/data/material/components/no-ssr/no-ssr.md index b1af9967999b90..c822223c4b1af7 100644 --- a/docs/data/material/components/no-ssr/no-ssr.md +++ b/docs/data/material/components/no-ssr/no-ssr.md @@ -23,7 +23,7 @@ This can be useful in a variety of situations, including: The demo below illustrates how this component works: -{{"demo": "SimpleNoSsr.js"}} +{{"component": "file://./demos/simple/index.ts"}} ## Basics @@ -41,7 +41,7 @@ You can also use No-SSR to delay the rendering of specific components on the cli The following demo shows how to use the `defer` prop to prioritize rendering the rest of the app outside of what is nested within No-SSR: -{{"demo": "FrameDeferring.js"}} +{{"component": "file://./demos/frame-deferring/index.ts"}} :::warning When using No-SSR in this way, React applies [two commits](https://react.dev/learn/render-and-commit) instead of one. diff --git a/docs/data/material/components/number-field/FieldDemo.js b/docs/data/material/components/number-field/FieldDemo.js deleted file mode 100644 index 7368ee645d2a69..00000000000000 --- a/docs/data/material/components/number-field/FieldDemo.js +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import NumberField from './components/NumberField'; - -export default function FieldDemo() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/number-field/FieldDemo.tsx.preview b/docs/data/material/components/number-field/FieldDemo.tsx.preview deleted file mode 100644 index 0c7c714c1af82d..00000000000000 --- a/docs/data/material/components/number-field/FieldDemo.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/number-field/SpinnerDemo.js b/docs/data/material/components/number-field/SpinnerDemo.js deleted file mode 100644 index 626b59e807598a..00000000000000 --- a/docs/data/material/components/number-field/SpinnerDemo.js +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import NumberSpinner from './components/NumberSpinner'; - -export default function SpinnerDemo() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/number-field/SpinnerDemo.tsx.preview b/docs/data/material/components/number-field/SpinnerDemo.tsx.preview deleted file mode 100644 index 1eaf1dcfe23c9d..00000000000000 --- a/docs/data/material/components/number-field/SpinnerDemo.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/number-field/components/NumberField.js b/docs/data/material/components/number-field/components/NumberField.js deleted file mode 100644 index 64583e566e7133..00000000000000 --- a/docs/data/material/components/number-field/components/NumberField.js +++ /dev/null @@ -1,117 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { NumberField as BaseNumberField } from '@base-ui/react/number-field'; -import IconButton from '@mui/material/IconButton'; -import FormControl from '@mui/material/FormControl'; -import FormHelperText from '@mui/material/FormHelperText'; -import OutlinedInput from '@mui/material/OutlinedInput'; -import InputAdornment from '@mui/material/InputAdornment'; -import InputLabel from '@mui/material/InputLabel'; -import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; -import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; - -/** - * This component is a placeholder for FormControl to correctly set the shrink label state on SSR. - */ -function SSRInitialFilled(_) { - return null; -} -SSRInitialFilled.muiName = 'Input'; - -function NumberField({ id: idProp, label, error, size = 'medium', ...other }) { - let id = React.useId(); - if (idProp) { - id = idProp; - } - return ( - ( - - {props.children} - - )} - > - - {label} - ( - - } - > - - - - } - > - - - - } - sx={{ pr: 0 }} - /> - )} - /> - - Enter value between 10 and 40 - - - ); -} - -NumberField.propTypes = { - error: PropTypes.bool, - /** - * The id of the input element. - */ - id: PropTypes.string, - label: PropTypes.node, - size: PropTypes.oneOf(['medium', 'small']), -}; - -export default NumberField; diff --git a/docs/data/material/components/number-field/components/NumberSpinner.js b/docs/data/material/components/number-field/components/NumberSpinner.js deleted file mode 100644 index 14a5de9d6a5574..00000000000000 --- a/docs/data/material/components/number-field/components/NumberSpinner.js +++ /dev/null @@ -1,157 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { NumberField as BaseNumberField } from '@base-ui/react/number-field'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import AddIcon from '@mui/icons-material/Add'; -import RemoveIcon from '@mui/icons-material/Remove'; -import OutlinedInput from '@mui/material/OutlinedInput'; -import OpenInFullIcon from '@mui/icons-material/OpenInFull'; - -function NumberSpinner({ id: idProp, label, error, size = 'medium', ...other }) { - let id = React.useId(); - if (idProp) { - id = idProp; - } - return ( - ( - - {props.children} - - )} - > - - } - > - - {label} - - - - - - - - } - > - - - - ( - - )} - /> - - } - > - - - - - ); -} - -NumberSpinner.propTypes = { - error: PropTypes.bool, - /** - * The id of the input element. - */ - id: PropTypes.string, - label: PropTypes.node, - /** - * The minimum value of the input element. - */ - min: PropTypes.number, - size: PropTypes.oneOf(['medium', 'small']), -}; - -export default NumberSpinner; diff --git a/docs/data/material/components/number-field/FieldDemo.tsx b/docs/data/material/components/number-field/demos/field-demo/FieldDemo.tsx similarity index 83% rename from docs/data/material/components/number-field/FieldDemo.tsx rename to docs/data/material/components/number-field/demos/field-demo/FieldDemo.tsx index 7368ee645d2a69..62dc22caa81308 100644 --- a/docs/data/material/components/number-field/FieldDemo.tsx +++ b/docs/data/material/components/number-field/demos/field-demo/FieldDemo.tsx @@ -1,10 +1,11 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import NumberField from './components/NumberField'; +import NumberField from './NumberField'; export default function FieldDemo() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/number-field/components/NumberField.tsx b/docs/data/material/components/number-field/demos/field-demo/NumberField.tsx similarity index 98% rename from docs/data/material/components/number-field/components/NumberField.tsx rename to docs/data/material/components/number-field/demos/field-demo/NumberField.tsx index 9dfcf922eb0c0f..9cbc887160a992 100644 --- a/docs/data/material/components/number-field/components/NumberField.tsx +++ b/docs/data/material/components/number-field/demos/field-demo/NumberField.tsx @@ -28,6 +28,7 @@ export default function NumberField({ size?: 'small' | 'medium'; error?: boolean; }) { + // @focus-start @padding 1 let id = React.useId(); if (idProp) { id = idProp; @@ -111,4 +112,5 @@ export default function NumberField({ ); + // @focus-end } diff --git a/docs/data/material/components/number-field/demos/field-demo/client.ts b/docs/data/material/components/number-field/demos/field-demo/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/number-field/demos/field-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/number-field/demos/field-demo/index.ts b/docs/data/material/components/number-field/demos/field-demo/index.ts new file mode 100644 index 00000000000000..a1924670cb03cb --- /dev/null +++ b/docs/data/material/components/number-field/demos/field-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FieldDemo from './FieldDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FieldDemo, { ClientProvider }); diff --git a/docs/data/material/components/number-field/components/NumberSpinner.tsx b/docs/data/material/components/number-field/demos/spinner-demo/NumberSpinner.tsx similarity index 98% rename from docs/data/material/components/number-field/components/NumberSpinner.tsx rename to docs/data/material/components/number-field/demos/spinner-demo/NumberSpinner.tsx index 324f6b3f7964dd..5b0adc303809f3 100644 --- a/docs/data/material/components/number-field/components/NumberSpinner.tsx +++ b/docs/data/material/components/number-field/demos/spinner-demo/NumberSpinner.tsx @@ -20,6 +20,7 @@ export default function NumberSpinner({ size?: 'small' | 'medium'; error?: boolean; }) { + // @focus-start @padding 1 let id = React.useId(); if (idProp) { id = idProp; @@ -148,4 +149,5 @@ export default function NumberSpinner({ ); + // @focus-end } diff --git a/docs/data/material/components/number-field/SpinnerDemo.tsx b/docs/data/material/components/number-field/demos/spinner-demo/SpinnerDemo.tsx similarity index 85% rename from docs/data/material/components/number-field/SpinnerDemo.tsx rename to docs/data/material/components/number-field/demos/spinner-demo/SpinnerDemo.tsx index 626b59e807598a..baca92b9bdae9c 100644 --- a/docs/data/material/components/number-field/SpinnerDemo.tsx +++ b/docs/data/material/components/number-field/demos/spinner-demo/SpinnerDemo.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import NumberSpinner from './components/NumberSpinner'; +import NumberSpinner from './NumberSpinner'; export default function SpinnerDemo() { return ( @@ -12,6 +12,7 @@ export default function SpinnerDemo() { justifyContent: 'center', }} > + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/number-field/demos/spinner-demo/client.ts b/docs/data/material/components/number-field/demos/spinner-demo/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/number-field/demos/spinner-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/number-field/demos/spinner-demo/index.ts b/docs/data/material/components/number-field/demos/spinner-demo/index.ts new file mode 100644 index 00000000000000..40955eb00d546d --- /dev/null +++ b/docs/data/material/components/number-field/demos/spinner-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SpinnerDemo from './SpinnerDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SpinnerDemo, { ClientProvider }); diff --git a/docs/data/material/components/number-field/number-field.md b/docs/data/material/components/number-field/number-field.md index ae837f5d6436d3..fd4dd826ee041c 100644 --- a/docs/data/material/components/number-field/number-field.md +++ b/docs/data/material/components/number-field/number-field.md @@ -48,14 +48,14 @@ yarn add @base-ui/react The outlined field uses the same building-block components as Material UI's outlined `TextField`—`FormControl`, `OutlinedInput`, `InputLabel`, and `FormHelperText`—with end adornments for the increment and decrement buttons. See [Text Field—Components](/material-ui/react-text-field/#components) for more details. -{{"demo": "FieldDemo.js"}} +{{"component": "file://./demos/field-demo/index.ts"}} ## Spinner field For the spinner field component, the increment and decrement buttons are placed next to the outlined input. This is ideal for touch devices and narrow ranges of values. -{{"demo": "SpinnerDemo.js"}} +{{"component": "file://./demos/spinner-demo/index.ts"}} ## Base UI API diff --git a/docs/data/material/components/pagination/BasicPagination.js b/docs/data/material/components/pagination/BasicPagination.js deleted file mode 100644 index 11d5885528adf6..00000000000000 --- a/docs/data/material/components/pagination/BasicPagination.js +++ /dev/null @@ -1,13 +0,0 @@ -import Pagination from '@mui/material/Pagination'; -import Stack from '@mui/material/Stack'; - -export default function BasicPagination() { - return ( - - - - - - - ); -} diff --git a/docs/data/material/components/pagination/BasicPagination.tsx.preview b/docs/data/material/components/pagination/BasicPagination.tsx.preview deleted file mode 100644 index e32005c97eebfe..00000000000000 --- a/docs/data/material/components/pagination/BasicPagination.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/material/components/pagination/CustomIcons.js b/docs/data/material/components/pagination/CustomIcons.js deleted file mode 100644 index ac465677357e59..00000000000000 --- a/docs/data/material/components/pagination/CustomIcons.js +++ /dev/null @@ -1,21 +0,0 @@ -import Pagination from '@mui/material/Pagination'; -import PaginationItem from '@mui/material/PaginationItem'; -import Stack from '@mui/material/Stack'; -import ArrowBackIcon from '@mui/icons-material/ArrowBack'; -import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; - -export default function CustomIcons() { - return ( - - ( - - )} - /> - - ); -} diff --git a/docs/data/material/components/pagination/CustomIcons.tsx.preview b/docs/data/material/components/pagination/CustomIcons.tsx.preview deleted file mode 100644 index dc248b16b36278..00000000000000 --- a/docs/data/material/components/pagination/CustomIcons.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - ( - - )} -/> \ No newline at end of file diff --git a/docs/data/material/components/pagination/PaginationButtons.js b/docs/data/material/components/pagination/PaginationButtons.js deleted file mode 100644 index 1f07e27fdaeac9..00000000000000 --- a/docs/data/material/components/pagination/PaginationButtons.js +++ /dev/null @@ -1,11 +0,0 @@ -import Pagination from '@mui/material/Pagination'; -import Stack from '@mui/material/Stack'; - -export default function PaginationButtons() { - return ( - - - - - ); -} diff --git a/docs/data/material/components/pagination/PaginationButtons.tsx.preview b/docs/data/material/components/pagination/PaginationButtons.tsx.preview deleted file mode 100644 index d4f3b3312f4839..00000000000000 --- a/docs/data/material/components/pagination/PaginationButtons.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/pagination/PaginationControlled.js b/docs/data/material/components/pagination/PaginationControlled.js deleted file mode 100644 index 9e7404ec0422d2..00000000000000 --- a/docs/data/material/components/pagination/PaginationControlled.js +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; -import Typography from '@mui/material/Typography'; -import Pagination from '@mui/material/Pagination'; -import Stack from '@mui/material/Stack'; - -export default function PaginationControlled() { - const [page, setPage] = React.useState(1); - const handleChange = (event, value) => { - setPage(value); - }; - - return ( - - Page: {page} - - - ); -} diff --git a/docs/data/material/components/pagination/PaginationControlled.tsx.preview b/docs/data/material/components/pagination/PaginationControlled.tsx.preview deleted file mode 100644 index b3cc9eb0e2b1c2..00000000000000 --- a/docs/data/material/components/pagination/PaginationControlled.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ -Page: {page} - \ No newline at end of file diff --git a/docs/data/material/components/pagination/PaginationLink.js b/docs/data/material/components/pagination/PaginationLink.js deleted file mode 100644 index bc52b3a5de18e4..00000000000000 --- a/docs/data/material/components/pagination/PaginationLink.js +++ /dev/null @@ -1,32 +0,0 @@ -import { Link, MemoryRouter, Route, Routes, useLocation } from 'react-router'; -import Pagination from '@mui/material/Pagination'; -import PaginationItem from '@mui/material/PaginationItem'; - -function Content() { - const location = useLocation(); - const query = new URLSearchParams(location.search); - const page = parseInt(query.get('page') || '1', 10); - return ( - ( - - )} - /> - ); -} - -export default function PaginationLink() { - return ( - - - } /> - - - ); -} diff --git a/docs/data/material/components/pagination/PaginationLink.tsx.preview b/docs/data/material/components/pagination/PaginationLink.tsx.preview deleted file mode 100644 index 25701dd44750c9..00000000000000 --- a/docs/data/material/components/pagination/PaginationLink.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - - } /> - - \ No newline at end of file diff --git a/docs/data/material/components/pagination/PaginationOutlined.js b/docs/data/material/components/pagination/PaginationOutlined.js deleted file mode 100644 index 63ca021e9ef448..00000000000000 --- a/docs/data/material/components/pagination/PaginationOutlined.js +++ /dev/null @@ -1,13 +0,0 @@ -import Pagination from '@mui/material/Pagination'; -import Stack from '@mui/material/Stack'; - -export default function PaginationOutlined() { - return ( - - - - - - - ); -} diff --git a/docs/data/material/components/pagination/PaginationOutlined.tsx.preview b/docs/data/material/components/pagination/PaginationOutlined.tsx.preview deleted file mode 100644 index 9735159ed2c6fc..00000000000000 --- a/docs/data/material/components/pagination/PaginationOutlined.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/material/components/pagination/PaginationRanges.js b/docs/data/material/components/pagination/PaginationRanges.js deleted file mode 100644 index bfff73f9465774..00000000000000 --- a/docs/data/material/components/pagination/PaginationRanges.js +++ /dev/null @@ -1,13 +0,0 @@ -import Pagination from '@mui/material/Pagination'; -import Stack from '@mui/material/Stack'; - -export default function PaginationRanges() { - return ( - - - {/* Default ranges */} - - - - ); -} diff --git a/docs/data/material/components/pagination/PaginationRanges.tsx.preview b/docs/data/material/components/pagination/PaginationRanges.tsx.preview deleted file mode 100644 index 4689414bd4e16a..00000000000000 --- a/docs/data/material/components/pagination/PaginationRanges.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - {/* Default ranges */} - - \ No newline at end of file diff --git a/docs/data/material/components/pagination/PaginationRounded.js b/docs/data/material/components/pagination/PaginationRounded.js deleted file mode 100644 index c9edb52be900ae..00000000000000 --- a/docs/data/material/components/pagination/PaginationRounded.js +++ /dev/null @@ -1,11 +0,0 @@ -import Pagination from '@mui/material/Pagination'; -import Stack from '@mui/material/Stack'; - -export default function PaginationRounded() { - return ( - - - - - ); -} diff --git a/docs/data/material/components/pagination/PaginationRounded.tsx.preview b/docs/data/material/components/pagination/PaginationRounded.tsx.preview deleted file mode 100644 index 42a90978c1ac03..00000000000000 --- a/docs/data/material/components/pagination/PaginationRounded.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/pagination/PaginationSize.js b/docs/data/material/components/pagination/PaginationSize.js deleted file mode 100644 index 5106cfb136f909..00000000000000 --- a/docs/data/material/components/pagination/PaginationSize.js +++ /dev/null @@ -1,12 +0,0 @@ -import Pagination from '@mui/material/Pagination'; -import Stack from '@mui/material/Stack'; - -export default function PaginationSize() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/pagination/PaginationSize.tsx.preview b/docs/data/material/components/pagination/PaginationSize.tsx.preview deleted file mode 100644 index e9a96f630a3dd8..00000000000000 --- a/docs/data/material/components/pagination/PaginationSize.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/pagination/TablePaginationDemo.js b/docs/data/material/components/pagination/TablePaginationDemo.js deleted file mode 100644 index e76af075c3a4be..00000000000000 --- a/docs/data/material/components/pagination/TablePaginationDemo.js +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react'; -import TablePagination from '@mui/material/TablePagination'; - -export default function TablePaginationDemo() { - const [page, setPage] = React.useState(2); - const [rowsPerPage, setRowsPerPage] = React.useState(10); - - const handleChangePage = (event, newPage) => { - setPage(newPage); - }; - - const handleChangeRowsPerPage = (event) => { - setRowsPerPage(parseInt(event.target.value, 10)); - setPage(0); - }; - - return ( - - ); -} diff --git a/docs/data/material/components/pagination/TablePaginationDemo.tsx.preview b/docs/data/material/components/pagination/TablePaginationDemo.tsx.preview deleted file mode 100644 index 960b6db3263d2c..00000000000000 --- a/docs/data/material/components/pagination/TablePaginationDemo.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/pagination/UsePagination.js b/docs/data/material/components/pagination/UsePagination.js deleted file mode 100644 index dfca24c73e5be3..00000000000000 --- a/docs/data/material/components/pagination/UsePagination.js +++ /dev/null @@ -1,49 +0,0 @@ -import usePagination from '@mui/material/usePagination'; -import { styled } from '@mui/material/styles'; - -const List = styled('ul')({ - listStyle: 'none', - padding: 0, - margin: 0, - display: 'flex', -}); - -export default function UsePagination() { - const { items } = usePagination({ - count: 10, - }); - - return ( - - ); -} diff --git a/docs/data/material/components/pagination/BasicPagination.tsx b/docs/data/material/components/pagination/demos/basic/BasicPagination.tsx similarity index 87% rename from docs/data/material/components/pagination/BasicPagination.tsx rename to docs/data/material/components/pagination/demos/basic/BasicPagination.tsx index 11d5885528adf6..a69888f388da7b 100644 --- a/docs/data/material/components/pagination/BasicPagination.tsx +++ b/docs/data/material/components/pagination/demos/basic/BasicPagination.tsx @@ -4,10 +4,12 @@ import Stack from '@mui/material/Stack'; export default function BasicPagination() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/pagination/demos/basic/client.ts b/docs/data/material/components/pagination/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/pagination/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/pagination/demos/basic/index.ts b/docs/data/material/components/pagination/demos/basic/index.ts new file mode 100644 index 00000000000000..d8cc20c318bd14 --- /dev/null +++ b/docs/data/material/components/pagination/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicPagination from './BasicPagination'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicPagination, { ClientProvider }); diff --git a/docs/data/material/components/pagination/PaginationButtons.tsx b/docs/data/material/components/pagination/demos/buttons/PaginationButtons.tsx similarity index 85% rename from docs/data/material/components/pagination/PaginationButtons.tsx rename to docs/data/material/components/pagination/demos/buttons/PaginationButtons.tsx index 1f07e27fdaeac9..89546863c49b76 100644 --- a/docs/data/material/components/pagination/PaginationButtons.tsx +++ b/docs/data/material/components/pagination/demos/buttons/PaginationButtons.tsx @@ -4,8 +4,10 @@ import Stack from '@mui/material/Stack'; export default function PaginationButtons() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/pagination/demos/buttons/client.ts b/docs/data/material/components/pagination/demos/buttons/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/pagination/demos/buttons/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/pagination/demos/buttons/index.ts b/docs/data/material/components/pagination/demos/buttons/index.ts new file mode 100644 index 00000000000000..257c12f575b7e2 --- /dev/null +++ b/docs/data/material/components/pagination/demos/buttons/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PaginationButtons from './PaginationButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PaginationButtons, { ClientProvider }); diff --git a/docs/data/material/components/pagination/PaginationControlled.tsx b/docs/data/material/components/pagination/demos/controlled/PaginationControlled.tsx similarity index 91% rename from docs/data/material/components/pagination/PaginationControlled.tsx rename to docs/data/material/components/pagination/demos/controlled/PaginationControlled.tsx index 8bd3bfba3b7f26..4eae0c81d1501f 100644 --- a/docs/data/material/components/pagination/PaginationControlled.tsx +++ b/docs/data/material/components/pagination/demos/controlled/PaginationControlled.tsx @@ -11,8 +11,10 @@ export default function PaginationControlled() { return ( + {/* @focus-start */} Page: {page} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/pagination/demos/controlled/client.ts b/docs/data/material/components/pagination/demos/controlled/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/pagination/demos/controlled/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/pagination/demos/controlled/index.ts b/docs/data/material/components/pagination/demos/controlled/index.ts new file mode 100644 index 00000000000000..bca710d0e6bc28 --- /dev/null +++ b/docs/data/material/components/pagination/demos/controlled/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PaginationControlled from './PaginationControlled'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PaginationControlled, { ClientProvider }); diff --git a/docs/data/material/components/pagination/CustomIcons.tsx b/docs/data/material/components/pagination/demos/custom-icons/CustomIcons.tsx similarity index 91% rename from docs/data/material/components/pagination/CustomIcons.tsx rename to docs/data/material/components/pagination/demos/custom-icons/CustomIcons.tsx index ac465677357e59..66456dece61051 100644 --- a/docs/data/material/components/pagination/CustomIcons.tsx +++ b/docs/data/material/components/pagination/demos/custom-icons/CustomIcons.tsx @@ -7,6 +7,7 @@ import ArrowForwardIcon from '@mui/icons-material/ArrowForward'; export default function CustomIcons() { return ( + {/* @focus-start */} ( @@ -16,6 +17,7 @@ export default function CustomIcons() { /> )} /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/pagination/demos/custom-icons/client.ts b/docs/data/material/components/pagination/demos/custom-icons/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/pagination/demos/custom-icons/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/pagination/demos/custom-icons/index.ts b/docs/data/material/components/pagination/demos/custom-icons/index.ts new file mode 100644 index 00000000000000..961487f6312daf --- /dev/null +++ b/docs/data/material/components/pagination/demos/custom-icons/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomIcons from './CustomIcons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomIcons, { ClientProvider }); diff --git a/docs/data/material/components/pagination/PaginationLink.tsx b/docs/data/material/components/pagination/demos/link/PaginationLink.tsx similarity index 94% rename from docs/data/material/components/pagination/PaginationLink.tsx rename to docs/data/material/components/pagination/demos/link/PaginationLink.tsx index bc52b3a5de18e4..233f3b1b9062ab 100644 --- a/docs/data/material/components/pagination/PaginationLink.tsx +++ b/docs/data/material/components/pagination/demos/link/PaginationLink.tsx @@ -23,10 +23,12 @@ function Content() { export default function PaginationLink() { return ( + // @focus-start @padding 2 } /> + // @focus-end ); } diff --git a/docs/data/material/components/pagination/demos/link/client.ts b/docs/data/material/components/pagination/demos/link/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/pagination/demos/link/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/pagination/demos/link/index.ts b/docs/data/material/components/pagination/demos/link/index.ts new file mode 100644 index 00000000000000..b5996ff2066daf --- /dev/null +++ b/docs/data/material/components/pagination/demos/link/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PaginationLink from './PaginationLink'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PaginationLink, { ClientProvider }); diff --git a/docs/data/material/components/pagination/PaginationOutlined.tsx b/docs/data/material/components/pagination/demos/outlined/PaginationOutlined.tsx similarity index 89% rename from docs/data/material/components/pagination/PaginationOutlined.tsx rename to docs/data/material/components/pagination/demos/outlined/PaginationOutlined.tsx index 63ca021e9ef448..b62b05938f0654 100644 --- a/docs/data/material/components/pagination/PaginationOutlined.tsx +++ b/docs/data/material/components/pagination/demos/outlined/PaginationOutlined.tsx @@ -4,10 +4,12 @@ import Stack from '@mui/material/Stack'; export default function PaginationOutlined() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/pagination/demos/outlined/client.ts b/docs/data/material/components/pagination/demos/outlined/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/pagination/demos/outlined/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/pagination/demos/outlined/index.ts b/docs/data/material/components/pagination/demos/outlined/index.ts new file mode 100644 index 00000000000000..e4e08cc35642bb --- /dev/null +++ b/docs/data/material/components/pagination/demos/outlined/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PaginationOutlined from './PaginationOutlined'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PaginationOutlined, { ClientProvider }); diff --git a/docs/data/material/components/pagination/PaginationRanges.tsx b/docs/data/material/components/pagination/demos/ranges/PaginationRanges.tsx similarity index 90% rename from docs/data/material/components/pagination/PaginationRanges.tsx rename to docs/data/material/components/pagination/demos/ranges/PaginationRanges.tsx index bfff73f9465774..b63a4e2b33b6ea 100644 --- a/docs/data/material/components/pagination/PaginationRanges.tsx +++ b/docs/data/material/components/pagination/demos/ranges/PaginationRanges.tsx @@ -4,10 +4,12 @@ import Stack from '@mui/material/Stack'; export default function PaginationRanges() { return ( + {/* @focus-start */} {/* Default ranges */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/pagination/demos/ranges/client.ts b/docs/data/material/components/pagination/demos/ranges/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/pagination/demos/ranges/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/pagination/demos/ranges/index.ts b/docs/data/material/components/pagination/demos/ranges/index.ts new file mode 100644 index 00000000000000..47ded0beec296d --- /dev/null +++ b/docs/data/material/components/pagination/demos/ranges/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PaginationRanges from './PaginationRanges'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PaginationRanges, { ClientProvider }); diff --git a/docs/data/material/components/pagination/PaginationRounded.tsx b/docs/data/material/components/pagination/demos/rounded/PaginationRounded.tsx similarity index 85% rename from docs/data/material/components/pagination/PaginationRounded.tsx rename to docs/data/material/components/pagination/demos/rounded/PaginationRounded.tsx index c9edb52be900ae..17d586d7c9d3c2 100644 --- a/docs/data/material/components/pagination/PaginationRounded.tsx +++ b/docs/data/material/components/pagination/demos/rounded/PaginationRounded.tsx @@ -4,8 +4,10 @@ import Stack from '@mui/material/Stack'; export default function PaginationRounded() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/pagination/demos/rounded/client.ts b/docs/data/material/components/pagination/demos/rounded/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/pagination/demos/rounded/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/pagination/demos/rounded/index.ts b/docs/data/material/components/pagination/demos/rounded/index.ts new file mode 100644 index 00000000000000..f083c2fcaf82f5 --- /dev/null +++ b/docs/data/material/components/pagination/demos/rounded/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PaginationRounded from './PaginationRounded'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PaginationRounded, { ClientProvider }); diff --git a/docs/data/material/components/pagination/PaginationSize.tsx b/docs/data/material/components/pagination/demos/size/PaginationSize.tsx similarity index 85% rename from docs/data/material/components/pagination/PaginationSize.tsx rename to docs/data/material/components/pagination/demos/size/PaginationSize.tsx index 5106cfb136f909..817a607dc2effc 100644 --- a/docs/data/material/components/pagination/PaginationSize.tsx +++ b/docs/data/material/components/pagination/demos/size/PaginationSize.tsx @@ -4,9 +4,11 @@ import Stack from '@mui/material/Stack'; export default function PaginationSize() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/pagination/demos/size/client.ts b/docs/data/material/components/pagination/demos/size/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/pagination/demos/size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/pagination/demos/size/index.ts b/docs/data/material/components/pagination/demos/size/index.ts new file mode 100644 index 00000000000000..9f5916ef536d9d --- /dev/null +++ b/docs/data/material/components/pagination/demos/size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PaginationSize from './PaginationSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PaginationSize, { ClientProvider }); diff --git a/docs/data/material/components/pagination/TablePaginationDemo.tsx b/docs/data/material/components/pagination/demos/table-demo/TablePaginationDemo.tsx similarity index 94% rename from docs/data/material/components/pagination/TablePaginationDemo.tsx rename to docs/data/material/components/pagination/demos/table-demo/TablePaginationDemo.tsx index 876237975d5e12..0cd50ccf12d904 100644 --- a/docs/data/material/components/pagination/TablePaginationDemo.tsx +++ b/docs/data/material/components/pagination/demos/table-demo/TablePaginationDemo.tsx @@ -20,6 +20,7 @@ export default function TablePaginationDemo() { }; return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/pagination/demos/table-demo/client.ts b/docs/data/material/components/pagination/demos/table-demo/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/pagination/demos/table-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/pagination/demos/table-demo/index.ts b/docs/data/material/components/pagination/demos/table-demo/index.ts new file mode 100644 index 00000000000000..762d645f413f78 --- /dev/null +++ b/docs/data/material/components/pagination/demos/table-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TablePaginationDemo from './TablePaginationDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TablePaginationDemo, { ClientProvider }); diff --git a/docs/data/material/components/pagination/UsePagination.tsx b/docs/data/material/components/pagination/demos/use/UsePagination.tsx similarity index 96% rename from docs/data/material/components/pagination/UsePagination.tsx rename to docs/data/material/components/pagination/demos/use/UsePagination.tsx index dfca24c73e5be3..98f8b1166f218d 100644 --- a/docs/data/material/components/pagination/UsePagination.tsx +++ b/docs/data/material/components/pagination/demos/use/UsePagination.tsx @@ -9,6 +9,7 @@ const List = styled('ul')({ }); export default function UsePagination() { + // @focus-start @padding 1 const { items } = usePagination({ count: 10, }); @@ -46,4 +47,5 @@ export default function UsePagination() { ); + // @focus-end } diff --git a/docs/data/material/components/pagination/demos/use/client.ts b/docs/data/material/components/pagination/demos/use/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/pagination/demos/use/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/pagination/demos/use/index.ts b/docs/data/material/components/pagination/demos/use/index.ts new file mode 100644 index 00000000000000..4a27343133cb88 --- /dev/null +++ b/docs/data/material/components/pagination/demos/use/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UsePagination from './UsePagination'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UsePagination, { ClientProvider }); diff --git a/docs/data/material/components/pagination/pagination.md b/docs/data/material/components/pagination/pagination.md index 302568bf23f159..af566113977625 100644 --- a/docs/data/material/components/pagination/pagination.md +++ b/docs/data/material/components/pagination/pagination.md @@ -14,45 +14,45 @@ githubSource: packages/mui-material/src/Pagination ## Basic pagination -{{"demo": "BasicPagination.js"}} +{{"component": "file://./demos/basic/index.ts"}} ## Outlined pagination -{{"demo": "PaginationOutlined.js"}} +{{"component": "file://./demos/outlined/index.ts"}} ## Rounded pagination -{{"demo": "PaginationRounded.js"}} +{{"component": "file://./demos/rounded/index.ts"}} ## Pagination size -{{"demo": "PaginationSize.js"}} +{{"component": "file://./demos/size/index.ts"}} ## Buttons You can optionally enable first-page and last-page buttons, or disable the previous-page and next-page buttons. -{{"demo": "PaginationButtons.js"}} +{{"component": "file://./demos/buttons/index.ts"}} ## Custom icons It's possible to customize the control icons. -{{"demo": "CustomIcons.js"}} +{{"component": "file://./demos/custom-icons/index.ts"}} ## Pagination ranges You can specify how many digits to display either side of current page with the `siblingCount` prop, and adjacent to the start and end page number with the `boundaryCount` prop. -{{"demo": "PaginationRanges.js"}} +{{"component": "file://./demos/ranges/index.ts"}} ## Controlled pagination -{{"demo": "PaginationControlled.js"}} +{{"component": "file://./demos/controlled/index.ts"}} ## Router integration -{{"demo": "PaginationLink.js"}} +{{"component": "file://./demos/link/index.ts"}} ## `usePagination` @@ -65,7 +65,7 @@ The Pagination component is built on this hook. import usePagination from '@mui/material/usePagination'; ``` -{{"demo": "UsePagination.js"}} +{{"component": "file://./demos/use/index.ts"}} ## Table pagination @@ -74,7 +74,7 @@ It's preferred in contexts where SEO is important, for instance, a blog. For the pagination of a large set of tabular data, you should use the `TablePagination` component. -{{"demo": "TablePaginationDemo.js"}} +{{"component": "file://./demos/table-demo/index.ts"}} :::warning Note that the `Pagination` page prop starts at 1 to match the requirement of including the value in the URL, while the `TablePagination` page prop starts at 0 to match the requirement of zero-based JavaScript arrays that come with rendering a lot of tabular data. diff --git a/docs/data/material/components/paper/Elevation.js b/docs/data/material/components/paper/Elevation.js deleted file mode 100644 index 4428a1c77a28f7..00000000000000 --- a/docs/data/material/components/paper/Elevation.js +++ /dev/null @@ -1,46 +0,0 @@ -import Grid from '@mui/material/Grid'; -import Paper from '@mui/material/Paper'; -import Box from '@mui/material/Box'; -import { createTheme, ThemeProvider, styled } from '@mui/material/styles'; - -const Item = styled(Paper)(({ theme }) => ({ - ...theme.typography.body2, - textAlign: 'center', - color: theme.palette.text.secondary, - height: 60, - lineHeight: '60px', -})); - -const darkTheme = createTheme({ palette: { mode: 'dark' } }); -const lightTheme = createTheme({ palette: { mode: 'light' } }); - -export default function Elevation() { - return ( - - - {[lightTheme, darkTheme].map((theme, index) => ( - - - - {[0, 1, 2, 3, 4, 6, 8, 12, 16, 24].map((elevation) => ( - - {`elevation=${elevation}`} - - ))} - - - - ))} - - - ); -} diff --git a/docs/data/material/components/paper/SimplePaper.js b/docs/data/material/components/paper/SimplePaper.js deleted file mode 100644 index 48dfdc91ca12f6..00000000000000 --- a/docs/data/material/components/paper/SimplePaper.js +++ /dev/null @@ -1,22 +0,0 @@ -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; - -export default function SimplePaper() { - return ( - :not(style)': { - m: 1, - width: 128, - height: 128, - }, - }} - > - - - - - ); -} diff --git a/docs/data/material/components/paper/SimplePaper.tsx.preview b/docs/data/material/components/paper/SimplePaper.tsx.preview deleted file mode 100644 index 8cb24f550d9835..00000000000000 --- a/docs/data/material/components/paper/SimplePaper.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/paper/SquareCorners.js b/docs/data/material/components/paper/SquareCorners.js deleted file mode 100644 index 76e8d1cb133b13..00000000000000 --- a/docs/data/material/components/paper/SquareCorners.js +++ /dev/null @@ -1,20 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Paper from '@mui/material/Paper'; -import { styled } from '@mui/material/styles'; - -const DemoPaper = styled(Paper)(({ theme }) => ({ - width: 120, - height: 120, - padding: theme.spacing(2), - ...theme.typography.body2, - textAlign: 'center', -})); - -export default function SquareCorners() { - return ( - - rounded corners - square corners - - ); -} diff --git a/docs/data/material/components/paper/SquareCorners.tsx.preview b/docs/data/material/components/paper/SquareCorners.tsx.preview deleted file mode 100644 index 5bf5b6adf2dce1..00000000000000 --- a/docs/data/material/components/paper/SquareCorners.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ -rounded corners -square corners \ No newline at end of file diff --git a/docs/data/material/components/paper/Variants.js b/docs/data/material/components/paper/Variants.js deleted file mode 100644 index 41cc2ea10ef3ad..00000000000000 --- a/docs/data/material/components/paper/Variants.js +++ /dev/null @@ -1,20 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Paper from '@mui/material/Paper'; -import { styled } from '@mui/material/styles'; - -const DemoPaper = styled(Paper)(({ theme }) => ({ - width: 120, - height: 120, - padding: theme.spacing(2), - ...theme.typography.body2, - textAlign: 'center', -})); - -export default function Variants() { - return ( - - default variant - outlined variant - - ); -} diff --git a/docs/data/material/components/paper/Variants.tsx b/docs/data/material/components/paper/Variants.tsx deleted file mode 100644 index 41cc2ea10ef3ad..00000000000000 --- a/docs/data/material/components/paper/Variants.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Paper from '@mui/material/Paper'; -import { styled } from '@mui/material/styles'; - -const DemoPaper = styled(Paper)(({ theme }) => ({ - width: 120, - height: 120, - padding: theme.spacing(2), - ...theme.typography.body2, - textAlign: 'center', -})); - -export default function Variants() { - return ( - - default variant - outlined variant - - ); -} diff --git a/docs/data/material/components/paper/Variants.tsx.preview b/docs/data/material/components/paper/Variants.tsx.preview deleted file mode 100644 index fc9f6c8dcb4854..00000000000000 --- a/docs/data/material/components/paper/Variants.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ -default variant -outlined variant \ No newline at end of file diff --git a/docs/data/material/components/paper/Elevation.tsx b/docs/data/material/components/paper/demos/elevation/Elevation.tsx similarity index 96% rename from docs/data/material/components/paper/Elevation.tsx rename to docs/data/material/components/paper/demos/elevation/Elevation.tsx index 4428a1c77a28f7..a14905089cb7e2 100644 --- a/docs/data/material/components/paper/Elevation.tsx +++ b/docs/data/material/components/paper/demos/elevation/Elevation.tsx @@ -17,6 +17,7 @@ const lightTheme = createTheme({ palette: { mode: 'light' } }); export default function Elevation() { return ( + {/* @focus-start */} {[lightTheme, darkTheme].map((theme, index) => ( @@ -41,6 +42,7 @@ export default function Elevation() { ))} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/paper/demos/elevation/client.ts b/docs/data/material/components/paper/demos/elevation/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/paper/demos/elevation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/paper/demos/elevation/index.ts b/docs/data/material/components/paper/demos/elevation/index.ts new file mode 100644 index 00000000000000..a4803c08c7958c --- /dev/null +++ b/docs/data/material/components/paper/demos/elevation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Elevation from './Elevation'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Elevation, { ClientProvider }); diff --git a/docs/data/material/components/paper/SimplePaper.tsx b/docs/data/material/components/paper/demos/simple/SimplePaper.tsx similarity index 88% rename from docs/data/material/components/paper/SimplePaper.tsx rename to docs/data/material/components/paper/demos/simple/SimplePaper.tsx index 48dfdc91ca12f6..bff7f0fd6981a8 100644 --- a/docs/data/material/components/paper/SimplePaper.tsx +++ b/docs/data/material/components/paper/demos/simple/SimplePaper.tsx @@ -14,9 +14,11 @@ export default function SimplePaper() { }, }} > + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/paper/demos/simple/client.ts b/docs/data/material/components/paper/demos/simple/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/paper/demos/simple/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/paper/demos/simple/index.ts b/docs/data/material/components/paper/demos/simple/index.ts new file mode 100644 index 00000000000000..ffb80d0e4aa0cc --- /dev/null +++ b/docs/data/material/components/paper/demos/simple/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimplePaper from './SimplePaper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimplePaper, { ClientProvider }); diff --git a/docs/data/material/components/paper/SquareCorners.tsx b/docs/data/material/components/paper/demos/square-corners/SquareCorners.tsx similarity index 90% rename from docs/data/material/components/paper/SquareCorners.tsx rename to docs/data/material/components/paper/demos/square-corners/SquareCorners.tsx index 76e8d1cb133b13..fb758d73dc4bc4 100644 --- a/docs/data/material/components/paper/SquareCorners.tsx +++ b/docs/data/material/components/paper/demos/square-corners/SquareCorners.tsx @@ -13,8 +13,10 @@ const DemoPaper = styled(Paper)(({ theme }) => ({ export default function SquareCorners() { return ( + {/* @focus-start */} rounded corners square corners + {/* @focus-end */} ); } diff --git a/docs/data/material/components/paper/demos/square-corners/client.ts b/docs/data/material/components/paper/demos/square-corners/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/paper/demos/square-corners/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/paper/demos/square-corners/index.ts b/docs/data/material/components/paper/demos/square-corners/index.ts new file mode 100644 index 00000000000000..095dbf3552ec69 --- /dev/null +++ b/docs/data/material/components/paper/demos/square-corners/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SquareCorners from './SquareCorners'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SquareCorners, { ClientProvider }); diff --git a/docs/data/material/components/paper/demos/variants/Variants.tsx b/docs/data/material/components/paper/demos/variants/Variants.tsx new file mode 100644 index 00000000000000..009d6ca8a7ef27 --- /dev/null +++ b/docs/data/material/components/paper/demos/variants/Variants.tsx @@ -0,0 +1,22 @@ +import Stack from '@mui/material/Stack'; +import Paper from '@mui/material/Paper'; +import { styled } from '@mui/material/styles'; + +const DemoPaper = styled(Paper)(({ theme }) => ({ + width: 120, + height: 120, + padding: theme.spacing(2), + ...theme.typography.body2, + textAlign: 'center', +})); + +export default function Variants() { + return ( + + {/* @focus-start */} + default variant + outlined variant + {/* @focus-end */} + + ); +} diff --git a/docs/data/material/components/paper/demos/variants/client.ts b/docs/data/material/components/paper/demos/variants/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/paper/demos/variants/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/paper/demos/variants/index.ts b/docs/data/material/components/paper/demos/variants/index.ts new file mode 100644 index 00000000000000..cec70dd15986b5 --- /dev/null +++ b/docs/data/material/components/paper/demos/variants/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Variants from './Variants'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Variants, { ClientProvider }); diff --git a/docs/data/material/components/paper/paper.md b/docs/data/material/components/paper/paper.md index 5f8da4d0972fc9..de19f416c8beff 100644 --- a/docs/data/material/components/paper/paper.md +++ b/docs/data/material/components/paper/paper.md @@ -25,7 +25,7 @@ The Paper component is ideally suited for designs that follow [Material Design's If you just need a generic container, you may prefer to use the [Box](/material-ui/react-box/) or [Container](/material-ui/react-container/) components. ::: -{{"demo": "SimplePaper.js", "bg": true}} +{{"component": "file://./demos/simple/index.ts", "bg": true}} ## Component @@ -50,20 +50,20 @@ The aforementioned dark mode behavior can lead to confusion when overriding the To override it, you must either use a new background value, or customize the values for both `background-color` and `background-image`. ::: -{{"demo": "Elevation.js", "bg": "outlined"}} +{{"component": "file://./demos/elevation/index.ts", "bg": "outlined"}} ### Variants Set the `variant` prop to `"outlined"` for a flat, outlined Paper with no shadows: -{{"demo": "Variants.js", "bg": true}} +{{"component": "file://./demos/variants/index.ts", "bg": true}} ### Corners The Paper component features rounded corners by default. Add the `square` prop for square corners: -{{"demo": "SquareCorners.js", "bg": true}} +{{"component": "file://./demos/square-corners/index.ts", "bg": true}} ## Anatomy diff --git a/docs/data/material/components/popover/BasicPopover.js b/docs/data/material/components/popover/BasicPopover.js deleted file mode 100644 index 0c75a9d1795d44..00000000000000 --- a/docs/data/material/components/popover/BasicPopover.js +++ /dev/null @@ -1,39 +0,0 @@ -import * as React from 'react'; -import Popover from '@mui/material/Popover'; -import Typography from '@mui/material/Typography'; -import Button from '@mui/material/Button'; - -export default function BasicPopover() { - const [anchorEl, setAnchorEl] = React.useState(null); - - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - }; - - const handleClose = () => { - setAnchorEl(null); - }; - - const open = Boolean(anchorEl); - const id = open ? 'simple-popover' : undefined; - - return ( -
    - - - The content of the Popover. - -
    - ); -} diff --git a/docs/data/material/components/popover/BasicPopover.tsx.preview b/docs/data/material/components/popover/BasicPopover.tsx.preview deleted file mode 100644 index 73c923e1cfaf71..00000000000000 --- a/docs/data/material/components/popover/BasicPopover.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - - The content of the Popover. - \ No newline at end of file diff --git a/docs/data/material/components/popover/MouseHoverPopover.js b/docs/data/material/components/popover/MouseHoverPopover.js deleted file mode 100644 index 83a57ffd90aa62..00000000000000 --- a/docs/data/material/components/popover/MouseHoverPopover.js +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import Popover from '@mui/material/Popover'; -import Typography from '@mui/material/Typography'; - -export default function MouseHoverPopover() { - const [anchorEl, setAnchorEl] = React.useState(null); - - const handlePopoverOpen = (event) => { - setAnchorEl(event.currentTarget); - }; - - const handlePopoverClose = () => { - setAnchorEl(null); - }; - - const open = Boolean(anchorEl); - - return ( -
    - - Hover with a Popover. - - - I use Popover. - -
    - ); -} diff --git a/docs/data/material/components/popover/PopoverPopupState.js b/docs/data/material/components/popover/PopoverPopupState.js deleted file mode 100644 index 376fd5acc4c3d4..00000000000000 --- a/docs/data/material/components/popover/PopoverPopupState.js +++ /dev/null @@ -1,31 +0,0 @@ -import Typography from '@mui/material/Typography'; -import Button from '@mui/material/Button'; -import Popover from '@mui/material/Popover'; -import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state'; - -export default function PopoverPopupState() { - return ( - - {(popupState) => ( -
    - - - The content of the Popover. - -
    - )} -     - ); -} diff --git a/docs/data/material/components/popover/VirtualElementPopover.js b/docs/data/material/components/popover/VirtualElementPopover.js deleted file mode 100644 index afec24bcba3a58..00000000000000 --- a/docs/data/material/components/popover/VirtualElementPopover.js +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import Popover from '@mui/material/Popover'; -import Typography from '@mui/material/Typography'; -import Paper from '@mui/material/Paper'; - -export default function VirtualElementPopover() { - const [open, setOpen] = React.useState(false); - const [anchorEl, setAnchorEl] = React.useState(null); - - const handleClose = () => { - setOpen(false); - }; - - const handleMouseUp = () => { - const selection = window.getSelection(); - - // Skip if selection has a length of 0 - if (!selection || selection.anchorOffset === selection.focusOffset) { - return; - } - - const getBoundingClientRect = () => { - return selection.getRangeAt(0).getBoundingClientRect(); - }; - - setOpen(true); - - setAnchorEl({ getBoundingClientRect, nodeType: 1 }); - }; - - const id = open ? 'virtual-element-popover' : undefined; - - return ( -
    - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, - bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum - vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor - porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis - vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus - massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit - amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus - consequat. Suspendisse lacinia tellus a libero volutpat maximus. - - - - The content of the Popover. - - -
    - ); -} diff --git a/docs/data/material/components/popover/AnchorPlayground.js b/docs/data/material/components/popover/demos/anchor-playground/AnchorPlayground.js similarity index 100% rename from docs/data/material/components/popover/AnchorPlayground.js rename to docs/data/material/components/popover/demos/anchor-playground/AnchorPlayground.js diff --git a/docs/data/material/components/popover/demos/anchor-playground/client.ts b/docs/data/material/components/popover/demos/anchor-playground/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/popover/demos/anchor-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/popover/demos/anchor-playground/index.ts b/docs/data/material/components/popover/demos/anchor-playground/index.ts new file mode 100644 index 00000000000000..ebb5fabfd49bbb --- /dev/null +++ b/docs/data/material/components/popover/demos/anchor-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AnchorPlayground from './AnchorPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AnchorPlayground, { ClientProvider }); diff --git a/docs/data/material/components/popover/BasicPopover.tsx b/docs/data/material/components/popover/demos/basic/BasicPopover.tsx similarity index 95% rename from docs/data/material/components/popover/BasicPopover.tsx rename to docs/data/material/components/popover/demos/basic/BasicPopover.tsx index 5ee41b9d09d527..9e87e94d759f08 100644 --- a/docs/data/material/components/popover/BasicPopover.tsx +++ b/docs/data/material/components/popover/demos/basic/BasicPopover.tsx @@ -19,6 +19,7 @@ export default function BasicPopover() { return (
    + {/* @focus-start */} @@ -34,6 +35,7 @@ export default function BasicPopover() { > The content of the Popover. + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/popover/demos/basic/client.ts b/docs/data/material/components/popover/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/popover/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/popover/demos/basic/index.ts b/docs/data/material/components/popover/demos/basic/index.ts new file mode 100644 index 00000000000000..e49155210fbe63 --- /dev/null +++ b/docs/data/material/components/popover/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicPopover from './BasicPopover'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicPopover, { ClientProvider }); diff --git a/docs/data/material/components/popover/MouseHoverPopover.tsx b/docs/data/material/components/popover/demos/mouse-hover/MouseHoverPopover.tsx similarity index 96% rename from docs/data/material/components/popover/MouseHoverPopover.tsx rename to docs/data/material/components/popover/demos/mouse-hover/MouseHoverPopover.tsx index 2891baf1863157..03e8e3ce333a86 100644 --- a/docs/data/material/components/popover/MouseHoverPopover.tsx +++ b/docs/data/material/components/popover/demos/mouse-hover/MouseHoverPopover.tsx @@ -3,6 +3,7 @@ import Popover from '@mui/material/Popover'; import Typography from '@mui/material/Typography'; export default function MouseHoverPopover() { + // @focus-start @padding 1 const [anchorEl, setAnchorEl] = React.useState(null); const handlePopoverOpen = (event: React.MouseEvent) => { @@ -45,4 +46,5 @@ export default function MouseHoverPopover() { ); + // @focus-end } diff --git a/docs/data/material/components/popover/demos/mouse-hover/client.ts b/docs/data/material/components/popover/demos/mouse-hover/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/popover/demos/mouse-hover/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/popover/demos/mouse-hover/index.ts b/docs/data/material/components/popover/demos/mouse-hover/index.ts new file mode 100644 index 00000000000000..4656d3c4523778 --- /dev/null +++ b/docs/data/material/components/popover/demos/mouse-hover/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MouseHoverPopover from './MouseHoverPopover'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MouseHoverPopover, { ClientProvider }); diff --git a/docs/data/material/components/popover/PopoverPopupState.tsx b/docs/data/material/components/popover/demos/popup-state/PopoverPopupState.tsx similarity index 95% rename from docs/data/material/components/popover/PopoverPopupState.tsx rename to docs/data/material/components/popover/demos/popup-state/PopoverPopupState.tsx index 376fd5acc4c3d4..b6073e50cfb975 100644 --- a/docs/data/material/components/popover/PopoverPopupState.tsx +++ b/docs/data/material/components/popover/demos/popup-state/PopoverPopupState.tsx @@ -5,6 +5,7 @@ import PopupState, { bindTrigger, bindPopover } from 'material-ui-popup-state'; export default function PopoverPopupState() { return ( + // @focus-start @padding 2 {(popupState) => (
    @@ -27,5 +28,6 @@ export default function PopoverPopupState() {
    )}     + // @focus-end ); } diff --git a/docs/data/material/components/popover/demos/popup-state/client.ts b/docs/data/material/components/popover/demos/popup-state/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/popover/demos/popup-state/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/popover/demos/popup-state/index.ts b/docs/data/material/components/popover/demos/popup-state/index.ts new file mode 100644 index 00000000000000..1717e52c18786c --- /dev/null +++ b/docs/data/material/components/popover/demos/popup-state/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PopoverPopupState from './PopoverPopupState'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PopoverPopupState, { ClientProvider }); diff --git a/docs/data/material/components/popover/VirtualElementPopover.tsx b/docs/data/material/components/popover/demos/virtual-element/VirtualElementPopover.tsx similarity index 92% rename from docs/data/material/components/popover/VirtualElementPopover.tsx rename to docs/data/material/components/popover/demos/virtual-element/VirtualElementPopover.tsx index 61a483445def78..1a7e59aeff3c76 100644 --- a/docs/data/material/components/popover/VirtualElementPopover.tsx +++ b/docs/data/material/components/popover/demos/virtual-element/VirtualElementPopover.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; -import Popover, { PopoverProps } from '@mui/material/Popover'; +import Popover from '@mui/material/Popover'; +import type { PopoverProps } from '@mui/material/Popover'; import Typography from '@mui/material/Typography'; import Paper from '@mui/material/Paper'; export default function VirtualElementPopover() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const [anchorEl, setAnchorEl] = React.useState(null); @@ -56,4 +58,5 @@ export default function VirtualElementPopover() { ); + // @focus-end } diff --git a/docs/data/material/components/popover/demos/virtual-element/client.ts b/docs/data/material/components/popover/demos/virtual-element/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/popover/demos/virtual-element/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/popover/demos/virtual-element/index.ts b/docs/data/material/components/popover/demos/virtual-element/index.ts new file mode 100644 index 00000000000000..ea7cd615c85a3a --- /dev/null +++ b/docs/data/material/components/popover/demos/virtual-element/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VirtualElementPopover from './VirtualElementPopover'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VirtualElementPopover, { ClientProvider }); diff --git a/docs/data/material/components/popover/popover.md b/docs/data/material/components/popover/popover.md index b222ad53ef57bc..f2b74a817a911d 100644 --- a/docs/data/material/components/popover/popover.md +++ b/docs/data/material/components/popover/popover.md @@ -19,7 +19,7 @@ Things to know when using the `Popover` component: ## Basic Popover -{{"demo": "BasicPopover.js"}} +{{"component": "file://./demos/basic/index.ts"}} ## Anchor playground @@ -29,13 +29,13 @@ When it is `anchorPosition`, the component will, instead of `anchorEl`, refer to the `anchorPosition` prop which you can adjust to set the position of the popover. -{{"demo": "AnchorPlayground.js", "hideToolbar": true}} +{{"component": "file://./demos/anchor-playground/index.ts", "hideToolbar": true}} ## Mouse hover interaction This demo demonstrates how to use the `Popover` component with `mouseenter` and `mouseleave` events to achieve popover behavior. -{{"demo": "MouseHoverPopover.js"}} +{{"component": "file://./demos/mouse-hover/index.ts"}} ## Virtual element @@ -51,7 +51,7 @@ interface PopoverVirtualElement { Highlight part of the text to see the popover: -{{"demo": "VirtualElementPopover.js"}} +{{"component": "file://./demos/virtual-element/index.ts"}} For more information on the virtual element's properties, see the following resources: @@ -80,4 +80,4 @@ For more advanced use cases, you might be able to take advantage of: The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popover state for you in most cases. -{{"demo": "PopoverPopupState.js"}} +{{"component": "file://./demos/popup-state/index.ts"}} diff --git a/docs/data/material/components/popper/PopperPopupState.js b/docs/data/material/components/popper/PopperPopupState.js deleted file mode 100644 index 46100f8ca6f0ce..00000000000000 --- a/docs/data/material/components/popper/PopperPopupState.js +++ /dev/null @@ -1,29 +0,0 @@ -import Typography from '@mui/material/Typography'; -import Button from '@mui/material/Button'; -import Popper from '@mui/material/Popper'; -import PopupState, { bindToggle, bindPopper } from 'material-ui-popup-state'; -import Fade from '@mui/material/Fade'; -import Paper from '@mui/material/Paper'; - -export default function PopperPopupState() { - return ( - - {(popupState) => ( -
    - - - {({ TransitionProps }) => ( - - - The content of the Popper. - - - )} - -
    - )} -     - ); -} diff --git a/docs/data/material/components/popper/PositionedPopper.js b/docs/data/material/components/popper/PositionedPopper.js deleted file mode 100644 index 1976cb0f757214..00000000000000 --- a/docs/data/material/components/popper/PositionedPopper.js +++ /dev/null @@ -1,63 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Popper from '@mui/material/Popper'; -import Typography from '@mui/material/Typography'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; -import Fade from '@mui/material/Fade'; -import Paper from '@mui/material/Paper'; - -export default function PositionedPopper() { - const [anchorEl, setAnchorEl] = React.useState(null); - const [open, setOpen] = React.useState(false); - const [placement, setPlacement] = React.useState(); - - const handleClick = (newPlacement) => (event) => { - setAnchorEl(event.currentTarget); - setOpen((prev) => placement !== newPlacement || !prev); - setPlacement(newPlacement); - }; - - return ( - - - {({ TransitionProps }) => ( - - - The content of the Popper. - - - )} - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/popper/SimplePopper.js b/docs/data/material/components/popper/SimplePopper.js deleted file mode 100644 index d001adba4a3f41..00000000000000 --- a/docs/data/material/components/popper/SimplePopper.js +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Popper from '@mui/material/Popper'; - -export default function SimplePopper() { - const [anchorEl, setAnchorEl] = React.useState(null); - - const handleClick = (event) => { - setAnchorEl(anchorEl ? null : event.currentTarget); - }; - - const open = Boolean(anchorEl); - const id = open ? 'simple-popper' : undefined; - - return ( -
    - - - - The content of the Popper. - - -
    - ); -} diff --git a/docs/data/material/components/popper/SimplePopper.tsx.preview b/docs/data/material/components/popper/SimplePopper.tsx.preview deleted file mode 100644 index a344e00a2e734a..00000000000000 --- a/docs/data/material/components/popper/SimplePopper.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - - - The content of the Popper. - - \ No newline at end of file diff --git a/docs/data/material/components/popper/SpringPopper.js b/docs/data/material/components/popper/SpringPopper.js deleted file mode 100644 index c86ecf815a0454..00000000000000 --- a/docs/data/material/components/popper/SpringPopper.js +++ /dev/null @@ -1,66 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Box from '@mui/material/Box'; -import Popper from '@mui/material/Popper'; -import { useSpring, animated } from '@react-spring/web'; - -const Fade = React.forwardRef(function Fade(props, ref) { - const { in: open, children, onEnter, onExited, ...other } = props; - const style = useSpring({ - from: { opacity: 0 }, - to: { opacity: open ? 1 : 0 }, - onStart: () => { - if (open && onEnter) { - onEnter(); - } - }, - onRest: () => { - if (!open && onExited) { - onExited(); - } - }, - }); - - return ( - - {children} - - ); -}); - -Fade.propTypes = { - children: PropTypes.element, - in: PropTypes.bool, - onEnter: PropTypes.func, - onExited: PropTypes.func, -}; - -export default function SpringPopper() { - const [open, setOpen] = React.useState(false); - const [anchorEl, setAnchorEl] = React.useState(null); - - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - setOpen((previousOpen) => !previousOpen); - }; - - const canBeOpen = open && Boolean(anchorEl); - const id = canBeOpen ? 'spring-popper' : undefined; - - return ( -
    - - - {({ TransitionProps }) => ( - - - The content of the Popper. - - - )} - -
    - ); -} diff --git a/docs/data/material/components/popper/SpringPopper.tsx.preview b/docs/data/material/components/popper/SpringPopper.tsx.preview deleted file mode 100644 index 7dbf85d6411e6f..00000000000000 --- a/docs/data/material/components/popper/SpringPopper.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - {({ TransitionProps }) => ( - - - The content of the Popper. - - - )} - \ No newline at end of file diff --git a/docs/data/material/components/popper/TransitionsPopper.js b/docs/data/material/components/popper/TransitionsPopper.js deleted file mode 100644 index 28f24c7bba8b64..00000000000000 --- a/docs/data/material/components/popper/TransitionsPopper.js +++ /dev/null @@ -1,34 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Popper from '@mui/material/Popper'; -import Fade from '@mui/material/Fade'; - -export default function TransitionsPopper() { - const [open, setOpen] = React.useState(false); - const [anchorEl, setAnchorEl] = React.useState(null); - - const handleClick = (event) => { - setAnchorEl(event.currentTarget); - setOpen((previousOpen) => !previousOpen); - }; - - const canBeOpen = open && Boolean(anchorEl); - const id = canBeOpen ? 'transition-popper' : undefined; - - return ( -
    - - - {({ TransitionProps }) => ( - - - The content of the Popper. - - - )} - -
    - ); -} diff --git a/docs/data/material/components/popper/TransitionsPopper.tsx.preview b/docs/data/material/components/popper/TransitionsPopper.tsx.preview deleted file mode 100644 index 489db41e08f70b..00000000000000 --- a/docs/data/material/components/popper/TransitionsPopper.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - {({ TransitionProps }) => ( - - - The content of the Popper. - - - )} - \ No newline at end of file diff --git a/docs/data/material/components/popper/VirtualElementPopper.js b/docs/data/material/components/popper/VirtualElementPopper.js deleted file mode 100644 index 3139f86d717134..00000000000000 --- a/docs/data/material/components/popper/VirtualElementPopper.js +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from 'react'; -import Popper from '@mui/material/Popper'; -import Typography from '@mui/material/Typography'; -import Fade from '@mui/material/Fade'; -import Paper from '@mui/material/Paper'; - -export default function VirtualElementPopper() { - const [open, setOpen] = React.useState(false); - const [anchorEl, setAnchorEl] = React.useState(null); - - const previousAnchorElPosition = React.useRef(undefined); - - React.useEffect(() => { - if (anchorEl) { - if (typeof anchorEl === 'object') { - previousAnchorElPosition.current = anchorEl.getBoundingClientRect(); - } else { - previousAnchorElPosition.current = anchorEl().getBoundingClientRect(); - } - } - }, [anchorEl]); - - const handleClose = () => { - setOpen(false); - }; - - const handleMouseUp = () => { - const selection = window.getSelection(); - - // Resets when the selection has a length of 0 - if (!selection || selection.anchorOffset === selection.focusOffset) { - handleClose(); - return; - } - - const getBoundingClientRect = () => { - if (selection.rangeCount === 0 && previousAnchorElPosition.current) { - setOpen(false); - return previousAnchorElPosition.current; - } - return selection.getRangeAt(0).getBoundingClientRect(); - }; - - setOpen(true); - - setAnchorEl({ getBoundingClientRect }); - }; - - const id = open ? 'virtual-element-popper' : undefined; - - return ( -
    - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, - bibendum sit amet vulputate eget, porta semper ligula. Donec bibendum - vulputate erat, ac fringilla mi finibus nec. Donec ac dolor sed dolor - porttitor blandit vel vel purus. Fusce vel malesuada ligula. Nam quis - vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis finibus - massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit - amet facilisis neque enim sed neque. Quisque accumsan metus vel maximus - consequat. Suspendisse lacinia tellus a libero volutpat maximus. - - - {({ TransitionProps }) => ( - - - The content of the Popper. - - - )} - -
    - ); -} diff --git a/docs/data/material/components/popper/PopperPopupState.tsx b/docs/data/material/components/popper/demos/popup-state/PopperPopupState.tsx similarity index 95% rename from docs/data/material/components/popper/PopperPopupState.tsx rename to docs/data/material/components/popper/demos/popup-state/PopperPopupState.tsx index 46100f8ca6f0ce..bd22133822217a 100644 --- a/docs/data/material/components/popper/PopperPopupState.tsx +++ b/docs/data/material/components/popper/demos/popup-state/PopperPopupState.tsx @@ -7,6 +7,7 @@ import Paper from '@mui/material/Paper'; export default function PopperPopupState() { return ( + // @focus-start @padding 2 {(popupState) => (
    @@ -25,5 +26,6 @@ export default function PopperPopupState() {
    )}     + // @focus-end ); } diff --git a/docs/data/material/components/popper/demos/popup-state/client.ts b/docs/data/material/components/popper/demos/popup-state/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/popper/demos/popup-state/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/popper/demos/popup-state/index.ts b/docs/data/material/components/popper/demos/popup-state/index.ts new file mode 100644 index 00000000000000..c84f02e533d98f --- /dev/null +++ b/docs/data/material/components/popper/demos/popup-state/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PopperPopupState from './PopperPopupState'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PopperPopupState, { ClientProvider }); diff --git a/docs/data/material/components/popper/PositionedPopper.tsx b/docs/data/material/components/popper/demos/positioned/PositionedPopper.tsx similarity index 94% rename from docs/data/material/components/popper/PositionedPopper.tsx rename to docs/data/material/components/popper/demos/positioned/PositionedPopper.tsx index c9ff67a9d17822..be35424f365f6d 100644 --- a/docs/data/material/components/popper/PositionedPopper.tsx +++ b/docs/data/material/components/popper/demos/positioned/PositionedPopper.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; -import Popper, { PopperPlacementType } from '@mui/material/Popper'; +import Popper from '@mui/material/Popper'; +import type { PopperPlacementType } from '@mui/material/Popper'; import Typography from '@mui/material/Typography'; import Stack from '@mui/material/Stack'; import Button from '@mui/material/Button'; @@ -8,6 +9,7 @@ import Fade from '@mui/material/Fade'; import Paper from '@mui/material/Paper'; export default function PositionedPopper() { + // @focus-start @padding 1 const [anchorEl, setAnchorEl] = React.useState(null); const [open, setOpen] = React.useState(false); const [placement, setPlacement] = React.useState(); @@ -62,4 +64,5 @@ export default function PositionedPopper() { ); + // @focus-end } diff --git a/docs/data/material/components/popper/demos/positioned/client.ts b/docs/data/material/components/popper/demos/positioned/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/popper/demos/positioned/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/popper/demos/positioned/index.ts b/docs/data/material/components/popper/demos/positioned/index.ts new file mode 100644 index 00000000000000..56a2ac257e0c35 --- /dev/null +++ b/docs/data/material/components/popper/demos/positioned/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PositionedPopper from './PositionedPopper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PositionedPopper, { ClientProvider }); diff --git a/docs/data/material/components/popper/ScrollPlayground.js b/docs/data/material/components/popper/demos/scroll-playground/ScrollPlayground.js similarity index 100% rename from docs/data/material/components/popper/ScrollPlayground.js rename to docs/data/material/components/popper/demos/scroll-playground/ScrollPlayground.js diff --git a/docs/data/material/components/popper/demos/scroll-playground/client.ts b/docs/data/material/components/popper/demos/scroll-playground/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/popper/demos/scroll-playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/popper/demos/scroll-playground/index.ts b/docs/data/material/components/popper/demos/scroll-playground/index.ts new file mode 100644 index 00000000000000..53f9939fdd78cf --- /dev/null +++ b/docs/data/material/components/popper/demos/scroll-playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScrollPlayground from './ScrollPlayground'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScrollPlayground, { ClientProvider }); diff --git a/docs/data/material/components/popper/SimplePopper.tsx b/docs/data/material/components/popper/demos/simple/SimplePopper.tsx similarity index 93% rename from docs/data/material/components/popper/SimplePopper.tsx rename to docs/data/material/components/popper/demos/simple/SimplePopper.tsx index 4770d36c0f34ac..5b34ba7f239acc 100644 --- a/docs/data/material/components/popper/SimplePopper.tsx +++ b/docs/data/material/components/popper/demos/simple/SimplePopper.tsx @@ -14,6 +14,7 @@ export default function SimplePopper() { return (
    + {/* @focus-start */} @@ -22,6 +23,7 @@ export default function SimplePopper() { The content of the Popper. + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/popper/demos/simple/client.ts b/docs/data/material/components/popper/demos/simple/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/popper/demos/simple/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/popper/demos/simple/index.ts b/docs/data/material/components/popper/demos/simple/index.ts new file mode 100644 index 00000000000000..3eff4eb6490169 --- /dev/null +++ b/docs/data/material/components/popper/demos/simple/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimplePopper from './SimplePopper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimplePopper, { ClientProvider }); diff --git a/docs/data/material/components/popper/SpringPopper.tsx b/docs/data/material/components/popper/demos/spring/SpringPopper.tsx similarity index 97% rename from docs/data/material/components/popper/SpringPopper.tsx rename to docs/data/material/components/popper/demos/spring/SpringPopper.tsx index 636bedcfc229c1..d85ab8ac878c4c 100644 --- a/docs/data/material/components/popper/SpringPopper.tsx +++ b/docs/data/material/components/popper/demos/spring/SpringPopper.tsx @@ -48,6 +48,7 @@ export default function SpringPopper() { return (
    + {/* @focus-start */} @@ -60,6 +61,7 @@ export default function SpringPopper() { )} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/popper/demos/spring/client.ts b/docs/data/material/components/popper/demos/spring/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/popper/demos/spring/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/popper/demos/spring/index.ts b/docs/data/material/components/popper/demos/spring/index.ts new file mode 100644 index 00000000000000..1bc5599c957c48 --- /dev/null +++ b/docs/data/material/components/popper/demos/spring/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SpringPopper from './SpringPopper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SpringPopper, { ClientProvider }); diff --git a/docs/data/material/components/popper/TransitionsPopper.tsx b/docs/data/material/components/popper/demos/transitions/TransitionsPopper.tsx similarity index 95% rename from docs/data/material/components/popper/TransitionsPopper.tsx rename to docs/data/material/components/popper/demos/transitions/TransitionsPopper.tsx index f3eb24fd787fb7..197742510ef459 100644 --- a/docs/data/material/components/popper/TransitionsPopper.tsx +++ b/docs/data/material/components/popper/demos/transitions/TransitionsPopper.tsx @@ -17,6 +17,7 @@ export default function TransitionsPopper() { return (
    + {/* @focus-start */} @@ -29,6 +30,7 @@ export default function TransitionsPopper() { )} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/popper/demos/transitions/client.ts b/docs/data/material/components/popper/demos/transitions/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/popper/demos/transitions/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/popper/demos/transitions/index.ts b/docs/data/material/components/popper/demos/transitions/index.ts new file mode 100644 index 00000000000000..be30312823a919 --- /dev/null +++ b/docs/data/material/components/popper/demos/transitions/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TransitionsPopper from './TransitionsPopper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TransitionsPopper, { ClientProvider }); diff --git a/docs/data/material/components/popper/VirtualElementPopper.tsx b/docs/data/material/components/popper/demos/virtual-element/VirtualElementPopper.tsx similarity index 94% rename from docs/data/material/components/popper/VirtualElementPopper.tsx rename to docs/data/material/components/popper/demos/virtual-element/VirtualElementPopper.tsx index 634a940c4445aa..4f9ba4e9fb875e 100644 --- a/docs/data/material/components/popper/VirtualElementPopper.tsx +++ b/docs/data/material/components/popper/demos/virtual-element/VirtualElementPopper.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; -import Popper, { PopperProps } from '@mui/material/Popper'; +import Popper from '@mui/material/Popper'; +import type { PopperProps } from '@mui/material/Popper'; import Typography from '@mui/material/Typography'; import Fade from '@mui/material/Fade'; import Paper from '@mui/material/Paper'; export default function VirtualElementPopper() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const [anchorEl, setAnchorEl] = React.useState(null); @@ -77,4 +79,5 @@ export default function VirtualElementPopper() { ); + // @focus-end } diff --git a/docs/data/material/components/popper/demos/virtual-element/client.ts b/docs/data/material/components/popper/demos/virtual-element/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/popper/demos/virtual-element/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/popper/demos/virtual-element/index.ts b/docs/data/material/components/popper/demos/virtual-element/index.ts new file mode 100644 index 00000000000000..e362a284616157 --- /dev/null +++ b/docs/data/material/components/popper/demos/virtual-element/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VirtualElementPopper from './VirtualElementPopper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VirtualElementPopper, { ClientProvider }); diff --git a/docs/data/material/components/popper/popper.md b/docs/data/material/components/popper/popper.md index 085b2266e9454a..c49895b03d7a05 100644 --- a/docs/data/material/components/popper/popper.md +++ b/docs/data/material/components/popper/popper.md @@ -26,7 +26,7 @@ Some important features of the Popper component: ## Basic Popper -{{"demo": "SimplePopper.js"}} +{{"component": "file://./demos/simple/index.ts"}} ## Transitions @@ -40,19 +40,19 @@ This component should respect the following conditions: Popper has built-in support for [react-transition-group](https://github.com/reactjs/react-transition-group). -{{"demo": "TransitionsPopper.js"}} +{{"component": "file://./demos/transitions/index.ts"}} Alternatively, you can use [react-spring](https://github.com/pmndrs/react-spring). -{{"demo": "SpringPopper.js"}} +{{"component": "file://./demos/spring/index.ts"}} ## Positioned popper -{{"demo": "PositionedPopper.js"}} +{{"component": "file://./demos/positioned/index.ts"}} ## Scroll playground -{{"demo": "ScrollPlayground.js", "hideToolbar": true, "bg": true}} +{{"component": "file://./demos/scroll-playground/index.ts", "hideToolbar": true, "bg": true}} ## Virtual element @@ -61,7 +61,7 @@ You need to create an object shaped like the [`VirtualElement`](https://popper.j Highlight part of the text to see the popper: -{{"demo": "VirtualElementPopper.js"}} +{{"component": "file://./demos/virtual-element/index.ts"}} ## Supplementary projects @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of: The package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of popper state for you in most cases. -{{"demo": "PopperPopupState.js"}} +{{"component": "file://./demos/popup-state/index.ts"}} diff --git a/docs/data/material/components/portal/SimplePortal.js b/docs/data/material/components/portal/SimplePortal.js deleted file mode 100644 index 2f36c6b139184c..00000000000000 --- a/docs/data/material/components/portal/SimplePortal.js +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import Portal from '@mui/material/Portal'; -import { Box } from '@mui/system'; - -export default function SimplePortal() { - const [show, setShow] = React.useState(false); - const container = React.useRef(null); - - const handleClick = () => { - setShow(!show); - }; - - return ( -
    - - - It looks like I will render here. - {show ? ( - container.current}> - But I actually render here! - - ) : null} - - -
    - ); -} diff --git a/docs/data/material/components/portal/SimplePortal.tsx.preview b/docs/data/material/components/portal/SimplePortal.tsx.preview deleted file mode 100644 index 8d96c108b1317b..00000000000000 --- a/docs/data/material/components/portal/SimplePortal.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - It looks like I will render here. - {show ? ( - container.current!}> - But I actually render here! - - ) : null} - - \ No newline at end of file diff --git a/docs/data/material/components/portal/SimplePortal.tsx b/docs/data/material/components/portal/demos/simple/SimplePortal.tsx similarity index 93% rename from docs/data/material/components/portal/SimplePortal.tsx rename to docs/data/material/components/portal/demos/simple/SimplePortal.tsx index f7927816df8f9c..81cd1bb132f711 100644 --- a/docs/data/material/components/portal/SimplePortal.tsx +++ b/docs/data/material/components/portal/demos/simple/SimplePortal.tsx @@ -12,6 +12,7 @@ export default function SimplePortal() { return (
    + {/* @focus-start */} @@ -24,6 +25,7 @@ export default function SimplePortal() { ) : null} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/portal/demos/simple/client.ts b/docs/data/material/components/portal/demos/simple/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/portal/demos/simple/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/portal/demos/simple/index.ts b/docs/data/material/components/portal/demos/simple/index.ts new file mode 100644 index 00000000000000..b3e45ffbe6c0ef --- /dev/null +++ b/docs/data/material/components/portal/demos/simple/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimplePortal from './SimplePortal'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimplePortal, { ClientProvider }); diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md index cf5a21c3a99e68..aced63a6a6ff1d 100644 --- a/docs/data/material/components/portal/portal.md +++ b/docs/data/material/components/portal/portal.md @@ -27,7 +27,7 @@ The Portal component accepts a `container` prop that passes a `ref` to the DOM n The following demo shows how a `` nested within a Portal can be appended to a node outside of the Portal's DOM hierarchy—click **Mount children** to see how it behaves: -{{"demo": "SimplePortal.js"}} +{{"component": "file://./demos/simple/index.ts"}} ## Basics diff --git a/docs/data/material/components/progress/CircularColor.js b/docs/data/material/components/progress/CircularColor.js deleted file mode 100644 index 797c052f7b8db0..00000000000000 --- a/docs/data/material/components/progress/CircularColor.js +++ /dev/null @@ -1,12 +0,0 @@ -import Stack from '@mui/material/Stack'; -import CircularProgress from '@mui/material/CircularProgress'; - -export default function CircularColor() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/progress/CircularColor.tsx.preview b/docs/data/material/components/progress/CircularColor.tsx.preview deleted file mode 100644 index ef32897dac8f97..00000000000000 --- a/docs/data/material/components/progress/CircularColor.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/progress/CircularCustomScale.js b/docs/data/material/components/progress/CircularCustomScale.js deleted file mode 100644 index 4c1634a3fb50de..00000000000000 --- a/docs/data/material/components/progress/CircularCustomScale.js +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; -import CircularProgress from '@mui/material/CircularProgress'; - -export default function CircularCustomScale() { - const [progress, setProgress] = React.useState(10); - - React.useEffect(() => { - const timer = setInterval(() => { - setProgress((prevProgress) => (prevProgress >= 20 ? 10 : prevProgress + 2)); - }, 800); - - return () => { - clearInterval(timer); - }; - }, []); - - return ( - - ); -} diff --git a/docs/data/material/components/progress/CircularCustomScale.tsx.preview b/docs/data/material/components/progress/CircularCustomScale.tsx.preview deleted file mode 100644 index a7c766ecf33d4c..00000000000000 --- a/docs/data/material/components/progress/CircularCustomScale.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/progress/CircularDeterminate.js b/docs/data/material/components/progress/CircularDeterminate.js deleted file mode 100644 index 4bf66e0a3f8813..00000000000000 --- a/docs/data/material/components/progress/CircularDeterminate.js +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import CircularProgress from '@mui/material/CircularProgress'; - -export default function CircularDeterminate() { - const [progress, setProgress] = React.useState(0); - - React.useEffect(() => { - const timer = setInterval(() => { - setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10)); - }, 800); - - return () => { - clearInterval(timer); - }; - }, []); - - return ( - - - - - - - - ); -} diff --git a/docs/data/material/components/progress/CircularDeterminate.tsx.preview b/docs/data/material/components/progress/CircularDeterminate.tsx.preview deleted file mode 100644 index c34d4c06f49798..00000000000000 --- a/docs/data/material/components/progress/CircularDeterminate.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/progress/CircularEnableTrack.js b/docs/data/material/components/progress/CircularEnableTrack.js deleted file mode 100644 index ce7c55fe32de31..00000000000000 --- a/docs/data/material/components/progress/CircularEnableTrack.js +++ /dev/null @@ -1,38 +0,0 @@ -import * as React from 'react'; -import Stack from '@mui/material/Stack'; -import CircularProgress from '@mui/material/CircularProgress'; - -export default function CircularEnableTrack() { - const [progress, setProgress] = React.useState(0); - - React.useEffect(() => { - const timer = setInterval(() => { - setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10)); - }, 800); - - return () => { - clearInterval(timer); - }; - }, []); - - return ( - - - - - - - - ); -} diff --git a/docs/data/material/components/progress/CircularEnableTrack.tsx.preview b/docs/data/material/components/progress/CircularEnableTrack.tsx.preview deleted file mode 100644 index 5a19e342c3f3b8..00000000000000 --- a/docs/data/material/components/progress/CircularEnableTrack.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/progress/CircularIndeterminate.js b/docs/data/material/components/progress/CircularIndeterminate.js deleted file mode 100644 index b111b101ad0aae..00000000000000 --- a/docs/data/material/components/progress/CircularIndeterminate.js +++ /dev/null @@ -1,10 +0,0 @@ -import CircularProgress from '@mui/material/CircularProgress'; -import Box from '@mui/material/Box'; - -export default function CircularIndeterminate() { - return ( - - - - ); -} diff --git a/docs/data/material/components/progress/CircularIndeterminate.tsx.preview b/docs/data/material/components/progress/CircularIndeterminate.tsx.preview deleted file mode 100644 index cd47d3bb3ca74b..00000000000000 --- a/docs/data/material/components/progress/CircularIndeterminate.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/progress/CircularIntegration.js b/docs/data/material/components/progress/CircularIntegration.js deleted file mode 100644 index 5cf2773d615ffc..00000000000000 --- a/docs/data/material/components/progress/CircularIntegration.js +++ /dev/null @@ -1,92 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import CircularProgress from '@mui/material/CircularProgress'; -import { green } from '@mui/material/colors'; -import Button from '@mui/material/Button'; -import Fab from '@mui/material/Fab'; -import CheckIcon from '@mui/icons-material/Check'; -import SaveIcon from '@mui/icons-material/Save'; - -export default function CircularIntegration() { - const [loading, setLoading] = React.useState(false); - const [success, setSuccess] = React.useState(false); - const timer = React.useRef(undefined); - - const buttonSx = { - ...(success && { - bgcolor: green[500], - '&:hover': { - bgcolor: green[700], - }, - }), - }; - - React.useEffect(() => { - return () => { - clearTimeout(timer.current); - }; - }, []); - - const handleButtonClick = () => { - if (!loading) { - setSuccess(false); - setLoading(true); - timer.current = setTimeout(() => { - setSuccess(true); - setLoading(false); - }, 2000); - } - }; - - return ( - - - - {success ? : } - - {loading && ( - - )} - - - - {loading && ( - - )} - - - ); -} diff --git a/docs/data/material/components/progress/CircularSize.js b/docs/data/material/components/progress/CircularSize.js deleted file mode 100644 index 278f82571a17f3..00000000000000 --- a/docs/data/material/components/progress/CircularSize.js +++ /dev/null @@ -1,12 +0,0 @@ -import Stack from '@mui/material/Stack'; -import CircularProgress from '@mui/material/CircularProgress'; - -export default function CircularSize() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/progress/CircularSize.tsx.preview b/docs/data/material/components/progress/CircularSize.tsx.preview deleted file mode 100644 index 71677644573bb3..00000000000000 --- a/docs/data/material/components/progress/CircularSize.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/progress/CircularUnderLoad.js b/docs/data/material/components/progress/CircularUnderLoad.js deleted file mode 100644 index 7fe1d62f352a8f..00000000000000 --- a/docs/data/material/components/progress/CircularUnderLoad.js +++ /dev/null @@ -1,5 +0,0 @@ -import CircularProgress from '@mui/material/CircularProgress'; - -export default function CircularUnderLoad() { - return ; -} diff --git a/docs/data/material/components/progress/CircularUnderLoad.tsx b/docs/data/material/components/progress/CircularUnderLoad.tsx deleted file mode 100644 index 7fe1d62f352a8f..00000000000000 --- a/docs/data/material/components/progress/CircularUnderLoad.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import CircularProgress from '@mui/material/CircularProgress'; - -export default function CircularUnderLoad() { - return ; -} diff --git a/docs/data/material/components/progress/CircularUnderLoad.tsx.preview b/docs/data/material/components/progress/CircularUnderLoad.tsx.preview deleted file mode 100644 index 8131e8d407196f..00000000000000 --- a/docs/data/material/components/progress/CircularUnderLoad.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/progress/CircularWithValueLabel.js b/docs/data/material/components/progress/CircularWithValueLabel.js deleted file mode 100644 index fbb9d0b12882f8..00000000000000 --- a/docs/data/material/components/progress/CircularWithValueLabel.js +++ /dev/null @@ -1,61 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import CircularProgress from '@mui/material/CircularProgress'; -import Typography from '@mui/material/Typography'; -import Box from '@mui/material/Box'; - -function CircularProgressWithLabel(props) { - return ( - - - - - {`${Math.round(props.value)}%`} - - - - ); -} - -CircularProgressWithLabel.propTypes = { - /** - * The value of the progress indicator for the determinate variant. - * Value between `min` and `max`. - * @default props.min ?? 0 - */ - value: PropTypes.number.isRequired, -}; - -export default function CircularWithValueLabel() { - const [progress, setProgress] = React.useState(10); - - React.useEffect(() => { - const timer = setInterval(() => { - setProgress((prevProgress) => (prevProgress >= 100 ? 0 : prevProgress + 10)); - }, 800); - return () => { - clearInterval(timer); - }; - }, []); - - return ; -} diff --git a/docs/data/material/components/progress/CircularWithValueLabel.tsx.preview b/docs/data/material/components/progress/CircularWithValueLabel.tsx.preview deleted file mode 100644 index 52f3070a137d9b..00000000000000 --- a/docs/data/material/components/progress/CircularWithValueLabel.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/progress/CustomizedProgressBars.js b/docs/data/material/components/progress/CustomizedProgressBars.js deleted file mode 100644 index b6f4e9e13bed99..00000000000000 --- a/docs/data/material/components/progress/CustomizedProgressBars.js +++ /dev/null @@ -1,92 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import Stack from '@mui/material/Stack'; -import CircularProgress, { - circularProgressClasses, -} from '@mui/material/CircularProgress'; -import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'; - -const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({ - height: 10, - borderRadius: 5, - [`&.${linearProgressClasses.colorPrimary}`]: { - backgroundColor: theme.palette.grey[200], - ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[800], - }), - }, - [`& .${linearProgressClasses.bar}`]: { - borderRadius: 5, - backgroundColor: '#1a90ff', - ...theme.applyStyles('dark', { - backgroundColor: '#308fe8', - }), - }, -})); - -// Inspired by the former Facebook spinners. -function FacebookCircularProgress(props) { - return ( - ({ - color: '#1a90ff', - animationDuration: '550ms', - [`& .${circularProgressClasses.circle}`]: { - strokeLinecap: 'round', - }, - [`& .${circularProgressClasses.track}`]: { - opacity: 1, - stroke: (theme.vars || theme).palette.grey[200], - ...theme.applyStyles('dark', { - stroke: (theme.vars || theme).palette.grey[800], - }), - }, - ...theme.applyStyles('dark', { - color: '#308fe8', - }), - })} - size={40} - thickness={4} - aria-label="Loading…" - {...props} - /> - ); -} - -// From https://github.com/mui/material-ui/issues/9496#issuecomment-959408221 - -function GradientCircularProgress() { - return ( - - - - - - - - - - - - ); -} -export default function CustomizedProgressBars() { - return ( - - - -
    - -     - ); -} diff --git a/docs/data/material/components/progress/CustomizedProgressBars.tsx.preview b/docs/data/material/components/progress/CustomizedProgressBars.tsx.preview deleted file mode 100644 index e900e636bf88f8..00000000000000 --- a/docs/data/material/components/progress/CustomizedProgressBars.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - -
    - \ No newline at end of file diff --git a/docs/data/material/components/progress/DelayingAppearance.js b/docs/data/material/components/progress/DelayingAppearance.js deleted file mode 100644 index 3ae33bd7a2dd5f..00000000000000 --- a/docs/data/material/components/progress/DelayingAppearance.js +++ /dev/null @@ -1,76 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Fade from '@mui/material/Fade'; -import Button from '@mui/material/Button'; -import CircularProgress from '@mui/material/CircularProgress'; -import Typography from '@mui/material/Typography'; - -export default function DelayingAppearance() { - const [loading, setLoading] = React.useState(false); - const [query, setQuery] = React.useState('idle'); - const timerRef = React.useRef(undefined); - - React.useEffect( - () => () => { - clearTimeout(timerRef.current); - }, - [], - ); - - const handleClickLoading = () => { - setLoading((prevLoading) => !prevLoading); - }; - - const handleClickQuery = () => { - if (timerRef.current) { - clearTimeout(timerRef.current); - } - - if (query !== 'idle') { - setQuery('idle'); - return; - } - - setQuery('progress'); - timerRef.current = setTimeout(() => { - setQuery('success'); - }, 2000); - }; - - return ( - - - - - - - - - {query === 'success' ? ( - Success! - ) : ( - - - - )} - - - - ); -} diff --git a/docs/data/material/components/progress/LinearBuffer.js b/docs/data/material/components/progress/LinearBuffer.js deleted file mode 100644 index ad1582954900ef..00000000000000 --- a/docs/data/material/components/progress/LinearBuffer.js +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import LinearProgress from '@mui/material/LinearProgress'; - -export default function LinearBuffer() { - const [progress, setProgress] = React.useState(0); - const [buffer, setBuffer] = React.useState(10); - - const progressRef = React.useRef(() => {}); - React.useEffect(() => { - progressRef.current = () => { - if (progress === 100) { - setProgress(0); - setBuffer(10); - } else { - setProgress(progress + 1); - if (buffer < 100 && progress % 5 === 0) { - const newBuffer = buffer + 1 + Math.random() * 10; - setBuffer(newBuffer > 100 ? 100 : newBuffer); - } - } - }; - }); - - React.useEffect(() => { - const timer = setInterval(() => { - progressRef.current(); - }, 100); - - return () => { - clearInterval(timer); - }; - }, []); - - return ( - - - - ); -} diff --git a/docs/data/material/components/progress/LinearBuffer.tsx.preview b/docs/data/material/components/progress/LinearBuffer.tsx.preview deleted file mode 100644 index 190e5d9bddfc68..00000000000000 --- a/docs/data/material/components/progress/LinearBuffer.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/progress/LinearColor.js b/docs/data/material/components/progress/LinearColor.js deleted file mode 100644 index 97bc1b44967c1f..00000000000000 --- a/docs/data/material/components/progress/LinearColor.js +++ /dev/null @@ -1,12 +0,0 @@ -import Stack from '@mui/material/Stack'; -import LinearProgress from '@mui/material/LinearProgress'; - -export default function LinearColor() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/progress/LinearColor.tsx.preview b/docs/data/material/components/progress/LinearColor.tsx.preview deleted file mode 100644 index 498ddbaa1d77b7..00000000000000 --- a/docs/data/material/components/progress/LinearColor.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/progress/LinearDeterminate.js b/docs/data/material/components/progress/LinearDeterminate.js deleted file mode 100644 index 1e1f7967a5d27a..00000000000000 --- a/docs/data/material/components/progress/LinearDeterminate.js +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import LinearProgress from '@mui/material/LinearProgress'; - -export default function LinearDeterminate() { - const [progress, setProgress] = React.useState(0); - - React.useEffect(() => { - const timer = setInterval(() => { - setProgress((oldProgress) => { - if (oldProgress === 100) { - return 0; - } - const diff = Math.random() * 10; - return Math.min(oldProgress + diff, 100); - }); - }, 500); - - return () => { - clearInterval(timer); - }; - }, []); - - return ( - - - - ); -} diff --git a/docs/data/material/components/progress/LinearDeterminate.tsx.preview b/docs/data/material/components/progress/LinearDeterminate.tsx.preview deleted file mode 100644 index 7650306943e164..00000000000000 --- a/docs/data/material/components/progress/LinearDeterminate.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/progress/LinearIndeterminate.js b/docs/data/material/components/progress/LinearIndeterminate.js deleted file mode 100644 index eb76b58f630e47..00000000000000 --- a/docs/data/material/components/progress/LinearIndeterminate.js +++ /dev/null @@ -1,10 +0,0 @@ -import Box from '@mui/material/Box'; -import LinearProgress from '@mui/material/LinearProgress'; - -export default function LinearIndeterminate() { - return ( - - - - ); -} diff --git a/docs/data/material/components/progress/LinearIndeterminate.tsx.preview b/docs/data/material/components/progress/LinearIndeterminate.tsx.preview deleted file mode 100644 index 95249d733f051e..00000000000000 --- a/docs/data/material/components/progress/LinearIndeterminate.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/progress/LinearQuery.js b/docs/data/material/components/progress/LinearQuery.js deleted file mode 100644 index 4785ca8d14b3cd..00000000000000 --- a/docs/data/material/components/progress/LinearQuery.js +++ /dev/null @@ -1,10 +0,0 @@ -import Box from '@mui/material/Box'; -import LinearProgress from '@mui/material/LinearProgress'; - -export default function LinearQuery() { - return ( - - - - ); -} diff --git a/docs/data/material/components/progress/LinearQuery.tsx.preview b/docs/data/material/components/progress/LinearQuery.tsx.preview deleted file mode 100644 index b14a4d9082d17d..00000000000000 --- a/docs/data/material/components/progress/LinearQuery.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/progress/LinearWithAriaValueText.js b/docs/data/material/components/progress/LinearWithAriaValueText.js deleted file mode 100644 index 3aa59fda652f93..00000000000000 --- a/docs/data/material/components/progress/LinearWithAriaValueText.js +++ /dev/null @@ -1,77 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import LinearProgress from '@mui/material/LinearProgress'; -import Typography from '@mui/material/Typography'; -import Box from '@mui/material/Box'; - -function LinearProgressWithLabelAndValue({ max, min, value, ...rest }) { - const progressText = `Elevator at floor ${value} out of ${max}.`; - const progressId = React.useId(); - return ( -
    - - Elevator status - - - - - - - - {progressText} - - - -
    - ); -} - -LinearProgressWithLabelAndValue.propTypes = { - /** - * The maximum value for the progress indicator for the determinate and buffer variants. - * @default 100 - */ - max: PropTypes.number.isRequired, - /** - * The minimum value for the progress indicator for the determinate and buffer variants. - * @default 0 - */ - min: PropTypes.number.isRequired, - /** - * The value of the progress indicator for the determinate and buffer variants. - * Value between `min` and `max`. - */ - value: PropTypes.number.isRequired, -}; - -export default function LinearWithAriaValueText() { - const [progress, setProgress] = React.useState(1); - - React.useEffect(() => { - const timer = setInterval(() => { - setProgress((prevProgress) => (prevProgress >= 10 ? 1 : prevProgress + 1)); - }, 800); - return () => { - clearInterval(timer); - }; - }, []); - - return ( - - - - ); -} diff --git a/docs/data/material/components/progress/LinearWithAriaValueText.tsx.preview b/docs/data/material/components/progress/LinearWithAriaValueText.tsx.preview deleted file mode 100644 index 1595531620a5ba..00000000000000 --- a/docs/data/material/components/progress/LinearWithAriaValueText.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/progress/LinearWithValueLabel.js b/docs/data/material/components/progress/LinearWithValueLabel.js deleted file mode 100644 index da8e5aa0169a36..00000000000000 --- a/docs/data/material/components/progress/LinearWithValueLabel.js +++ /dev/null @@ -1,57 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import LinearProgress from '@mui/material/LinearProgress'; -import Typography from '@mui/material/Typography'; -import Box from '@mui/material/Box'; - -function LinearProgressWithLabelAndValue(props) { - const progressId = React.useId(); - return ( -
    - - Uploading photos… - - - - - - - - {`${Math.round(props.value)}%`} - - - -
    - ); -} - -LinearProgressWithLabelAndValue.propTypes = { - /** - * The value of the progress indicator for the determinate and buffer variants. - * Value between `min` and `max`. - */ - value: PropTypes.number.isRequired, -}; - -export default function LinearWithValueLabel() { - const [progress, setProgress] = React.useState(10); - - React.useEffect(() => { - const timer = setInterval(() => { - setProgress((prevProgress) => (prevProgress >= 100 ? 10 : prevProgress + 10)); - }, 800); - return () => { - clearInterval(timer); - }; - }, []); - - return ( - - - - ); -} diff --git a/docs/data/material/components/progress/LinearWithValueLabel.tsx.preview b/docs/data/material/components/progress/LinearWithValueLabel.tsx.preview deleted file mode 100644 index 62528e5a310292..00000000000000 --- a/docs/data/material/components/progress/LinearWithValueLabel.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/progress/CircularColor.tsx b/docs/data/material/components/progress/demos/circular-color/CircularColor.tsx similarity index 89% rename from docs/data/material/components/progress/CircularColor.tsx rename to docs/data/material/components/progress/demos/circular-color/CircularColor.tsx index 797c052f7b8db0..029abc9d677615 100644 --- a/docs/data/material/components/progress/CircularColor.tsx +++ b/docs/data/material/components/progress/demos/circular-color/CircularColor.tsx @@ -4,9 +4,11 @@ import CircularProgress from '@mui/material/CircularProgress'; export default function CircularColor() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/progress/demos/circular-color/client.ts b/docs/data/material/components/progress/demos/circular-color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/circular-color/index.ts b/docs/data/material/components/progress/demos/circular-color/index.ts new file mode 100644 index 00000000000000..e02b57e894526c --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CircularColor from './CircularColor'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CircularColor, { ClientProvider }); diff --git a/docs/data/material/components/progress/CircularCustomScale.tsx b/docs/data/material/components/progress/demos/circular-custom-scale/CircularCustomScale.tsx similarity index 92% rename from docs/data/material/components/progress/CircularCustomScale.tsx rename to docs/data/material/components/progress/demos/circular-custom-scale/CircularCustomScale.tsx index 4c1634a3fb50de..30e85a1d2811a5 100644 --- a/docs/data/material/components/progress/CircularCustomScale.tsx +++ b/docs/data/material/components/progress/demos/circular-custom-scale/CircularCustomScale.tsx @@ -15,6 +15,7 @@ export default function CircularCustomScale() { }, []); return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/progress/demos/circular-custom-scale/client.ts b/docs/data/material/components/progress/demos/circular-custom-scale/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-custom-scale/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/circular-custom-scale/index.ts b/docs/data/material/components/progress/demos/circular-custom-scale/index.ts new file mode 100644 index 00000000000000..107ac2b0781023 --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-custom-scale/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CircularCustomScale from './CircularCustomScale'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CircularCustomScale, { ClientProvider }); diff --git a/docs/data/material/components/progress/CircularDeterminate.tsx b/docs/data/material/components/progress/demos/circular-determinate/CircularDeterminate.tsx similarity index 95% rename from docs/data/material/components/progress/CircularDeterminate.tsx rename to docs/data/material/components/progress/demos/circular-determinate/CircularDeterminate.tsx index 4bf66e0a3f8813..3e4f08787b88c0 100644 --- a/docs/data/material/components/progress/CircularDeterminate.tsx +++ b/docs/data/material/components/progress/demos/circular-determinate/CircularDeterminate.tsx @@ -17,6 +17,7 @@ export default function CircularDeterminate() { return ( + {/* @focus-start */} @@ -26,6 +27,7 @@ export default function CircularDeterminate() { value={progress} aria-label="Export data" /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/progress/demos/circular-determinate/client.ts b/docs/data/material/components/progress/demos/circular-determinate/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-determinate/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/circular-determinate/index.ts b/docs/data/material/components/progress/demos/circular-determinate/index.ts new file mode 100644 index 00000000000000..2c929b3fc1a56e --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-determinate/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CircularDeterminate from './CircularDeterminate'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CircularDeterminate, { ClientProvider }); diff --git a/docs/data/material/components/progress/CircularEnableTrack.tsx b/docs/data/material/components/progress/demos/circular-enable-track/CircularEnableTrack.tsx similarity index 95% rename from docs/data/material/components/progress/CircularEnableTrack.tsx rename to docs/data/material/components/progress/demos/circular-enable-track/CircularEnableTrack.tsx index ce7c55fe32de31..4874f483c3ef6c 100644 --- a/docs/data/material/components/progress/CircularEnableTrack.tsx +++ b/docs/data/material/components/progress/demos/circular-enable-track/CircularEnableTrack.tsx @@ -17,6 +17,7 @@ export default function CircularEnableTrack() { return ( + {/* @focus-start */} @@ -33,6 +34,7 @@ export default function CircularEnableTrack() { value={progress} aria-label="Upload photos" /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/progress/demos/circular-enable-track/client.ts b/docs/data/material/components/progress/demos/circular-enable-track/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-enable-track/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/circular-enable-track/index.ts b/docs/data/material/components/progress/demos/circular-enable-track/index.ts new file mode 100644 index 00000000000000..8458cc5400736f --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-enable-track/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CircularEnableTrack from './CircularEnableTrack'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CircularEnableTrack, { ClientProvider }); diff --git a/docs/data/material/components/progress/CircularIndeterminate.tsx b/docs/data/material/components/progress/demos/circular-indeterminate/CircularIndeterminate.tsx similarity index 83% rename from docs/data/material/components/progress/CircularIndeterminate.tsx rename to docs/data/material/components/progress/demos/circular-indeterminate/CircularIndeterminate.tsx index b111b101ad0aae..8003bb178ef169 100644 --- a/docs/data/material/components/progress/CircularIndeterminate.tsx +++ b/docs/data/material/components/progress/demos/circular-indeterminate/CircularIndeterminate.tsx @@ -4,7 +4,9 @@ import Box from '@mui/material/Box'; export default function CircularIndeterminate() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/progress/demos/circular-indeterminate/client.ts b/docs/data/material/components/progress/demos/circular-indeterminate/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-indeterminate/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/circular-indeterminate/index.ts b/docs/data/material/components/progress/demos/circular-indeterminate/index.ts new file mode 100644 index 00000000000000..4062d6bbcf3cb4 --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-indeterminate/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CircularIndeterminate from './CircularIndeterminate'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CircularIndeterminate, { ClientProvider }); diff --git a/docs/data/material/components/progress/CircularIntegration.tsx b/docs/data/material/components/progress/demos/circular-integration/CircularIntegration.tsx similarity index 98% rename from docs/data/material/components/progress/CircularIntegration.tsx rename to docs/data/material/components/progress/demos/circular-integration/CircularIntegration.tsx index 911e106765a6e0..c4d6088ad5646e 100644 --- a/docs/data/material/components/progress/CircularIntegration.tsx +++ b/docs/data/material/components/progress/demos/circular-integration/CircularIntegration.tsx @@ -8,6 +8,7 @@ import CheckIcon from '@mui/icons-material/Check'; import SaveIcon from '@mui/icons-material/Save'; export default function CircularIntegration() { + // @focus-start @padding 1 const [loading, setLoading] = React.useState(false); const [success, setSuccess] = React.useState(false); const timer = React.useRef>(undefined); @@ -89,4 +90,5 @@ export default function CircularIntegration() {     ); + // @focus-end } diff --git a/docs/data/material/components/progress/demos/circular-integration/client.ts b/docs/data/material/components/progress/demos/circular-integration/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-integration/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/circular-integration/index.ts b/docs/data/material/components/progress/demos/circular-integration/index.ts new file mode 100644 index 00000000000000..eddd2a824c7db4 --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-integration/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CircularIntegration from './CircularIntegration'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CircularIntegration, { ClientProvider }); diff --git a/docs/data/material/components/progress/CircularSize.tsx b/docs/data/material/components/progress/demos/circular-size/CircularSize.tsx similarity index 89% rename from docs/data/material/components/progress/CircularSize.tsx rename to docs/data/material/components/progress/demos/circular-size/CircularSize.tsx index 278f82571a17f3..22fa61b8d3ae32 100644 --- a/docs/data/material/components/progress/CircularSize.tsx +++ b/docs/data/material/components/progress/demos/circular-size/CircularSize.tsx @@ -4,9 +4,11 @@ import CircularProgress from '@mui/material/CircularProgress'; export default function CircularSize() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/progress/demos/circular-size/client.ts b/docs/data/material/components/progress/demos/circular-size/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/circular-size/index.ts b/docs/data/material/components/progress/demos/circular-size/index.ts new file mode 100644 index 00000000000000..a1eb7792a1c507 --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CircularSize from './CircularSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CircularSize, { ClientProvider }); diff --git a/docs/data/material/components/progress/demos/circular-under-load/CircularUnderLoad.tsx b/docs/data/material/components/progress/demos/circular-under-load/CircularUnderLoad.tsx new file mode 100644 index 00000000000000..d94f547a3567ad --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-under-load/CircularUnderLoad.tsx @@ -0,0 +1,8 @@ +import CircularProgress from '@mui/material/CircularProgress'; + +export default function CircularUnderLoad() { + return ( + // @focus @padding 2 + + ); +} diff --git a/docs/data/material/components/progress/demos/circular-under-load/client.ts b/docs/data/material/components/progress/demos/circular-under-load/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-under-load/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/circular-under-load/index.ts b/docs/data/material/components/progress/demos/circular-under-load/index.ts new file mode 100644 index 00000000000000..2777140a6c8308 --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-under-load/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CircularUnderLoad from './CircularUnderLoad'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CircularUnderLoad, { ClientProvider }); diff --git a/docs/data/material/components/progress/CircularWithValueLabel.tsx b/docs/data/material/components/progress/demos/circular-with-value-label/CircularWithValueLabel.tsx similarity index 87% rename from docs/data/material/components/progress/CircularWithValueLabel.tsx rename to docs/data/material/components/progress/demos/circular-with-value-label/CircularWithValueLabel.tsx index 5b97eb3a7ecdb1..45e2d0c996172e 100644 --- a/docs/data/material/components/progress/CircularWithValueLabel.tsx +++ b/docs/data/material/components/progress/demos/circular-with-value-label/CircularWithValueLabel.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import CircularProgress, { - CircularProgressProps, -} from '@mui/material/CircularProgress'; +import CircularProgress from '@mui/material/CircularProgress'; +import type { CircularProgressProps } from '@mui/material/CircularProgress'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; @@ -38,6 +37,7 @@ function CircularProgressWithLabel( } export default function CircularWithValueLabel() { + // @focus-start @padding 1 const [progress, setProgress] = React.useState(10); React.useEffect(() => { @@ -50,4 +50,5 @@ export default function CircularWithValueLabel() { }, []); return ; + // @focus-end } diff --git a/docs/data/material/components/progress/demos/circular-with-value-label/client.ts b/docs/data/material/components/progress/demos/circular-with-value-label/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-with-value-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/circular-with-value-label/index.ts b/docs/data/material/components/progress/demos/circular-with-value-label/index.ts new file mode 100644 index 00000000000000..40ef7790bc7610 --- /dev/null +++ b/docs/data/material/components/progress/demos/circular-with-value-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CircularWithValueLabel from './CircularWithValueLabel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CircularWithValueLabel, { ClientProvider }); diff --git a/docs/data/material/components/progress/CustomizedProgressBars.tsx b/docs/data/material/components/progress/demos/customized-bars/CustomizedProgressBars.tsx similarity index 95% rename from docs/data/material/components/progress/CustomizedProgressBars.tsx rename to docs/data/material/components/progress/demos/customized-bars/CustomizedProgressBars.tsx index c6fd5802600c41..360a49ec8dbac2 100644 --- a/docs/data/material/components/progress/CustomizedProgressBars.tsx +++ b/docs/data/material/components/progress/demos/customized-bars/CustomizedProgressBars.tsx @@ -3,8 +3,8 @@ import { styled } from '@mui/material/styles'; import Stack from '@mui/material/Stack'; import CircularProgress, { circularProgressClasses, - CircularProgressProps, } from '@mui/material/CircularProgress'; +import type { CircularProgressProps } from '@mui/material/CircularProgress'; import LinearProgress, { linearProgressClasses } from '@mui/material/LinearProgress'; const BorderLinearProgress = styled(LinearProgress)(({ theme }) => ({ @@ -79,6 +79,7 @@ function GradientCircularProgress() { export default function CustomizedProgressBars() { return ( + {/* @focus-start */}
    @@ -87,6 +88,7 @@ export default function CustomizedProgressBars() { value={50} aria-label="Export data" /> + {/* @focus-end */}     ); } diff --git a/docs/data/material/components/progress/demos/customized-bars/client.ts b/docs/data/material/components/progress/demos/customized-bars/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/customized-bars/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/customized-bars/index.ts b/docs/data/material/components/progress/demos/customized-bars/index.ts new file mode 100644 index 00000000000000..8ae077ba44e11f --- /dev/null +++ b/docs/data/material/components/progress/demos/customized-bars/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedProgressBars from './CustomizedProgressBars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedProgressBars, { ClientProvider }); diff --git a/docs/data/material/components/progress/DelayingAppearance.tsx b/docs/data/material/components/progress/demos/delaying-appearance/DelayingAppearance.tsx similarity index 97% rename from docs/data/material/components/progress/DelayingAppearance.tsx rename to docs/data/material/components/progress/demos/delaying-appearance/DelayingAppearance.tsx index ba0523d1d4f2c1..1030673feb3492 100644 --- a/docs/data/material/components/progress/DelayingAppearance.tsx +++ b/docs/data/material/components/progress/demos/delaying-appearance/DelayingAppearance.tsx @@ -6,6 +6,7 @@ import CircularProgress from '@mui/material/CircularProgress'; import Typography from '@mui/material/Typography'; export default function DelayingAppearance() { + // @focus-start @padding 1 const [loading, setLoading] = React.useState(false); const [query, setQuery] = React.useState('idle'); const timerRef = React.useRef>(undefined); @@ -73,4 +74,5 @@ export default function DelayingAppearance() { ); + // @focus-end } diff --git a/docs/data/material/components/progress/demos/delaying-appearance/client.ts b/docs/data/material/components/progress/demos/delaying-appearance/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/delaying-appearance/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/delaying-appearance/index.ts b/docs/data/material/components/progress/demos/delaying-appearance/index.ts new file mode 100644 index 00000000000000..fc49a318d06287 --- /dev/null +++ b/docs/data/material/components/progress/demos/delaying-appearance/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DelayingAppearance from './DelayingAppearance'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DelayingAppearance, { ClientProvider }); diff --git a/docs/data/material/components/progress/LinearBuffer.tsx b/docs/data/material/components/progress/demos/linear-buffer/LinearBuffer.tsx similarity index 95% rename from docs/data/material/components/progress/LinearBuffer.tsx rename to docs/data/material/components/progress/demos/linear-buffer/LinearBuffer.tsx index ad1582954900ef..fc5ecfbd95e136 100644 --- a/docs/data/material/components/progress/LinearBuffer.tsx +++ b/docs/data/material/components/progress/demos/linear-buffer/LinearBuffer.tsx @@ -34,12 +34,14 @@ export default function LinearBuffer() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/progress/demos/linear-buffer/client.ts b/docs/data/material/components/progress/demos/linear-buffer/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/linear-buffer/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/linear-buffer/index.ts b/docs/data/material/components/progress/demos/linear-buffer/index.ts new file mode 100644 index 00000000000000..a2c0759fecd791 --- /dev/null +++ b/docs/data/material/components/progress/demos/linear-buffer/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LinearBuffer from './LinearBuffer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LinearBuffer, { ClientProvider }); diff --git a/docs/data/material/components/progress/LinearColor.tsx b/docs/data/material/components/progress/demos/linear-color/LinearColor.tsx similarity index 89% rename from docs/data/material/components/progress/LinearColor.tsx rename to docs/data/material/components/progress/demos/linear-color/LinearColor.tsx index 97bc1b44967c1f..520bc911ceca3b 100644 --- a/docs/data/material/components/progress/LinearColor.tsx +++ b/docs/data/material/components/progress/demos/linear-color/LinearColor.tsx @@ -4,9 +4,11 @@ import LinearProgress from '@mui/material/LinearProgress'; export default function LinearColor() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/progress/demos/linear-color/client.ts b/docs/data/material/components/progress/demos/linear-color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/linear-color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/linear-color/index.ts b/docs/data/material/components/progress/demos/linear-color/index.ts new file mode 100644 index 00000000000000..355d601fa0dcaf --- /dev/null +++ b/docs/data/material/components/progress/demos/linear-color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LinearColor from './LinearColor'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LinearColor, { ClientProvider }); diff --git a/docs/data/material/components/progress/LinearDeterminate.tsx b/docs/data/material/components/progress/demos/linear-determinate/LinearDeterminate.tsx similarity index 93% rename from docs/data/material/components/progress/LinearDeterminate.tsx rename to docs/data/material/components/progress/demos/linear-determinate/LinearDeterminate.tsx index 1e1f7967a5d27a..d38c96ae3d8e2d 100644 --- a/docs/data/material/components/progress/LinearDeterminate.tsx +++ b/docs/data/material/components/progress/demos/linear-determinate/LinearDeterminate.tsx @@ -23,11 +23,13 @@ export default function LinearDeterminate() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/progress/demos/linear-determinate/client.ts b/docs/data/material/components/progress/demos/linear-determinate/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/linear-determinate/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/linear-determinate/index.ts b/docs/data/material/components/progress/demos/linear-determinate/index.ts new file mode 100644 index 00000000000000..1e6a486e4fe775 --- /dev/null +++ b/docs/data/material/components/progress/demos/linear-determinate/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LinearDeterminate from './LinearDeterminate'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LinearDeterminate, { ClientProvider }); diff --git a/docs/data/material/components/progress/LinearIndeterminate.tsx b/docs/data/material/components/progress/demos/linear-indeterminate/LinearIndeterminate.tsx similarity index 83% rename from docs/data/material/components/progress/LinearIndeterminate.tsx rename to docs/data/material/components/progress/demos/linear-indeterminate/LinearIndeterminate.tsx index eb76b58f630e47..83a6504ede14bd 100644 --- a/docs/data/material/components/progress/LinearIndeterminate.tsx +++ b/docs/data/material/components/progress/demos/linear-indeterminate/LinearIndeterminate.tsx @@ -4,7 +4,9 @@ import LinearProgress from '@mui/material/LinearProgress'; export default function LinearIndeterminate() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/progress/demos/linear-indeterminate/client.ts b/docs/data/material/components/progress/demos/linear-indeterminate/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/linear-indeterminate/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/linear-indeterminate/index.ts b/docs/data/material/components/progress/demos/linear-indeterminate/index.ts new file mode 100644 index 00000000000000..14ff872e1363bc --- /dev/null +++ b/docs/data/material/components/progress/demos/linear-indeterminate/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LinearIndeterminate from './LinearIndeterminate'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LinearIndeterminate, { ClientProvider }); diff --git a/docs/data/material/components/progress/LinearQuery.tsx b/docs/data/material/components/progress/demos/linear-query/LinearQuery.tsx similarity index 83% rename from docs/data/material/components/progress/LinearQuery.tsx rename to docs/data/material/components/progress/demos/linear-query/LinearQuery.tsx index 4785ca8d14b3cd..d6ff63f3a9a460 100644 --- a/docs/data/material/components/progress/LinearQuery.tsx +++ b/docs/data/material/components/progress/demos/linear-query/LinearQuery.tsx @@ -4,7 +4,9 @@ import LinearProgress from '@mui/material/LinearProgress'; export default function LinearQuery() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/progress/demos/linear-query/client.ts b/docs/data/material/components/progress/demos/linear-query/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/linear-query/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/linear-query/index.ts b/docs/data/material/components/progress/demos/linear-query/index.ts new file mode 100644 index 00000000000000..343f93e96310df --- /dev/null +++ b/docs/data/material/components/progress/demos/linear-query/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LinearQuery from './LinearQuery'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LinearQuery, { ClientProvider }); diff --git a/docs/data/material/components/progress/LinearWithAriaValueText.tsx b/docs/data/material/components/progress/demos/linear-with-aria-value-text/LinearWithAriaValueText.tsx similarity index 90% rename from docs/data/material/components/progress/LinearWithAriaValueText.tsx rename to docs/data/material/components/progress/demos/linear-with-aria-value-text/LinearWithAriaValueText.tsx index 0ec123cad46176..48d7ea2cfed0fb 100644 --- a/docs/data/material/components/progress/LinearWithAriaValueText.tsx +++ b/docs/data/material/components/progress/demos/linear-with-aria-value-text/LinearWithAriaValueText.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgress'; +import LinearProgress from '@mui/material/LinearProgress'; +import type { LinearProgressProps } from '@mui/material/LinearProgress'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; @@ -63,7 +64,9 @@ export default function LinearWithAriaValueText() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/progress/demos/linear-with-aria-value-text/client.ts b/docs/data/material/components/progress/demos/linear-with-aria-value-text/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/linear-with-aria-value-text/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/linear-with-aria-value-text/index.ts b/docs/data/material/components/progress/demos/linear-with-aria-value-text/index.ts new file mode 100644 index 00000000000000..1690c3aca37d39 --- /dev/null +++ b/docs/data/material/components/progress/demos/linear-with-aria-value-text/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LinearWithAriaValueText from './LinearWithAriaValueText'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LinearWithAriaValueText, { ClientProvider }); diff --git a/docs/data/material/components/progress/LinearWithValueLabel.tsx b/docs/data/material/components/progress/demos/linear-with-value-label/LinearWithValueLabel.tsx similarity index 87% rename from docs/data/material/components/progress/LinearWithValueLabel.tsx rename to docs/data/material/components/progress/demos/linear-with-value-label/LinearWithValueLabel.tsx index e7362decef5287..4b3090d09d9341 100644 --- a/docs/data/material/components/progress/LinearWithValueLabel.tsx +++ b/docs/data/material/components/progress/demos/linear-with-value-label/LinearWithValueLabel.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import LinearProgress, { LinearProgressProps } from '@mui/material/LinearProgress'; +import LinearProgress from '@mui/material/LinearProgress'; +import type { LinearProgressProps } from '@mui/material/LinearProgress'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; @@ -44,7 +45,9 @@ export default function LinearWithValueLabel() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/progress/demos/linear-with-value-label/client.ts b/docs/data/material/components/progress/demos/linear-with-value-label/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/progress/demos/linear-with-value-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/progress/demos/linear-with-value-label/index.ts b/docs/data/material/components/progress/demos/linear-with-value-label/index.ts new file mode 100644 index 00000000000000..6ace0bd059a3c4 --- /dev/null +++ b/docs/data/material/components/progress/demos/linear-with-value-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LinearWithValueLabel from './LinearWithValueLabel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LinearWithValueLabel, { ClientProvider }); diff --git a/docs/data/material/components/progress/progress.md b/docs/data/material/components/progress/progress.md index 40e8e38bdc6ed7..9fbd222178b322 100644 --- a/docs/data/material/components/progress/progress.md +++ b/docs/data/material/components/progress/progress.md @@ -26,45 +26,45 @@ The animations of the components rely on CSS as much as possible to work even be The default version of CircularProgress renders an indeterminate spinner. -{{"demo": "CircularIndeterminate.js"}} +{{"component": "file://./demos/circular-indeterminate/index.ts"}} ### Circular color -{{"demo": "CircularColor.js"}} +{{"component": "file://./demos/circular-color/index.ts"}} ### Circular size -{{"demo": "CircularSize.js"}} +{{"component": "file://./demos/circular-size/index.ts"}} ### Circular determinate To specify the loading progress of an operation, use the `determinate` value for the `variant` prop. To show the actual progress, use the `value` prop. -{{"demo": "CircularDeterminate.js"}} +{{"component": "file://./demos/circular-determinate/index.ts"}} ### Circular custom scale By default, progress values are expected in the 0–100 range. You can customize this range by using the `min` and `max` props. -{{"demo": "CircularCustomScale.js"}} +{{"component": "file://./demos/circular-custom-scale/index.ts"}} ### Circular track To have the circular track always visible, pass the `enableTrackSlot` prop. -{{"demo": "CircularEnableTrack.js"}} +{{"component": "file://./demos/circular-enable-track/index.ts"}} ### Interactive integration The following examples show how to integrate the CircularProgress with the Button and FAB components, creating loading states that can be triggered by user actions. -{{"demo": "CircularIntegration.js"}} +{{"component": "file://./demos/circular-integration/index.ts"}} ### Circular with label The example shows how to integrate the visual progress value with the CircularProgress component. -{{"demo": "CircularWithValueLabel.js"}} +{{"component": "file://./demos/circular-with-value-label/index.ts"}} ## Linear @@ -72,48 +72,48 @@ The example shows how to integrate the visual progress value with the CircularPr LinearProgress shows an indeterminate progress bar by default. -{{"demo": "LinearIndeterminate.js"}} +{{"component": "file://./demos/linear-indeterminate/index.ts"}} ### Linear query To reverse the direction of the indeterminate animation, use the `query` value for the `variant` prop. -{{"demo": "LinearQuery.js"}} +{{"component": "file://./demos/linear-query/index.ts"}} ### Linear color -{{"demo": "LinearColor.js"}} +{{"component": "file://./demos/linear-color/index.ts"}} ### Linear determinate To show the progress on the loading bar, use the `determinate` value for the `variant` prop, along with the `value` prop. -{{"demo": "LinearDeterminate.js"}} +{{"component": "file://./demos/linear-determinate/index.ts"}} ### Linear buffer Use the `buffer` value for the `variant` prop to show a buffer progress alongside the actual progress value. The `valueBuffer` prop should be greater than the `value` prop. -{{"demo": "LinearBuffer.js"}} +{{"component": "file://./demos/linear-buffer/index.ts"}} ### Linear with label The progress `value` can also be displayed alongside the progress bar. -{{"demo": "LinearWithValueLabel.js"}} +{{"component": "file://./demos/linear-with-value-label/index.ts"}} ### Linear with custom value text By default, the progress value is read by assistive technology as percentages. Use `aria-valuetext` when the progress value does not involve percentages. -{{"demo": "LinearWithAriaValueText.js"}} +{{"component": "file://./demos/linear-with-aria-value-text/index.ts"}} ## Customization Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedProgressBars.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/customized-bars/index.ts", "collapseToEmpty": true}} ## Delaying appearance @@ -122,7 +122,7 @@ The ripple effect of the `ButtonBase` component ensures that the user feels that Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second. After 1.0 second, you can display a loader to keep user's flow of thought uninterrupted. -{{"demo": "DelayingAppearance.js"}} +{{"component": "file://./demos/delaying-appearance/index.ts"}} ## Accessibility @@ -142,7 +142,7 @@ You should run processor intensive operations in a web worker or by batch in ord When it's not possible, you can leverage the `disableShrink` prop to mitigate the issue. See [this issue](https://github.com/mui/material-ui/issues/10327). -{{"demo": "CircularUnderLoad.js"}} +{{"component": "file://./demos/circular-under-load/index.ts"}} ### High frequency updates diff --git a/docs/data/material/components/radio-buttons/ColorRadioButtons.js b/docs/data/material/components/radio-buttons/ColorRadioButtons.js deleted file mode 100644 index 0c18596d524934..00000000000000 --- a/docs/data/material/components/radio-buttons/ColorRadioButtons.js +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react'; -import { pink } from '@mui/material/colors'; -import Radio from '@mui/material/Radio'; - -export default function ColorRadioButtons() { - const [selectedValue, setSelectedValue] = React.useState('a'); - - const handleChange = (event) => { - setSelectedValue(event.target.value); - }; - - const controlProps = (item) => ({ - checked: selectedValue === item, - onChange: handleChange, - value: item, - name: 'color-radio-button-demo', - inputProps: { 'aria-label': item }, - }); - - return ( -
    - - - - - -
    - ); -} diff --git a/docs/data/material/components/radio-buttons/ColorRadioButtons.tsx.preview b/docs/data/material/components/radio-buttons/ColorRadioButtons.tsx.preview deleted file mode 100644 index 044dec01c2ca27..00000000000000 --- a/docs/data/material/components/radio-buttons/ColorRadioButtons.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.js b/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.js deleted file mode 100644 index fd589fe57156c8..00000000000000 --- a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.js +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from 'react'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; - -export default function ControlledRadioButtonsGroup() { - const id = React.useId(); - const [value, setValue] = React.useState('female'); - - const handleChange = (event) => { - setValue(event.target.value); - }; - - return ( - - Gender - - } label="Female" /> - } label="Male" /> - - - ); -} diff --git a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx.preview b/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx.preview deleted file mode 100644 index a55cc2986e65c0..00000000000000 --- a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - Gender - - } label="Female" /> - } label="Male" /> - - \ No newline at end of file diff --git a/docs/data/material/components/radio-buttons/CustomizedRadios.js b/docs/data/material/components/radio-buttons/CustomizedRadios.js deleted file mode 100644 index 53a8b995395947..00000000000000 --- a/docs/data/material/components/radio-buttons/CustomizedRadios.js +++ /dev/null @@ -1,107 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; - -const BpIcon = styled('span')(({ theme }) => ({ - borderRadius: '50%', - width: 16, - height: 16, - boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)', - backgroundColor: '#f5f8fa', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))', - '.Mui-focusVisible &': { - outline: '2px auto rgba(19,124,189,.6)', - outlineOffset: 2, - }, - 'input:hover ~ &': { - backgroundColor: '#ebf1f5', - ...theme.applyStyles('dark', { - backgroundColor: '#30404d', - }), - }, - 'input:disabled ~ &': { - boxShadow: 'none', - background: 'rgba(206,217,224,.5)', - ...theme.applyStyles('dark', { - background: 'rgba(57,75,89,.5)', - }), - '@media (forced-colors: active)': { - outline: '1px solid GrayText', - }, - }, - '@media (forced-colors: active)': { - outline: '1px solid ButtonText', - }, - ...theme.applyStyles('dark', { - boxShadow: '0 0 0 1px rgb(16 22 26 / 40%)', - backgroundColor: '#394b59', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.05),hsla(0,0%,100%,0))', - }), -})); - -const BpCheckedIcon = styled(BpIcon)({ - backgroundColor: '#137cbd', - backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))', - '&::before': { - display: 'block', - width: 16, - height: 16, - backgroundImage: 'radial-gradient(#fff,#fff 28%,transparent 32%)', - content: '""', - '@media (forced-colors: active)': { - backgroundImage: 'none', - backgroundColor: 'ButtonText', - borderRadius: '50%', - width: 8, - height: 8, - margin: 4, - }, - }, - 'input:hover ~ &': { - backgroundColor: '#106ba3', - }, - '@media (forced-colors: active)': { - outline: '2px solid ButtonText', - }, -}); - -// Inspired by blueprintjs -function BpRadio(props) { - return ( - } - icon={} - {...props} - /> - ); -} - -export default function CustomizedRadios() { - const id = React.useId(); - return ( - - Gender - - } label="Female" /> - } label="Male" /> - } label="Other" /> - } - label="(Disabled option)" - /> - - - ); -} diff --git a/docs/data/material/components/radio-buttons/ErrorRadios.js b/docs/data/material/components/radio-buttons/ErrorRadios.js deleted file mode 100644 index 9888779964408a..00000000000000 --- a/docs/data/material/components/radio-buttons/ErrorRadios.js +++ /dev/null @@ -1,57 +0,0 @@ -import * as React from 'react'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormControl from '@mui/material/FormControl'; -import FormHelperText from '@mui/material/FormHelperText'; -import FormLabel from '@mui/material/FormLabel'; -import Button from '@mui/material/Button'; - -export default function ErrorRadios() { - const id = React.useId(); - const [value, setValue] = React.useState(''); - const [error, setError] = React.useState(false); - const [helperText, setHelperText] = React.useState('Choose wisely'); - - const handleRadioChange = (event) => { - setValue(event.target.value); - setError(false); - setHelperText('Choose wisely'); - }; - - const handleSubmit = (event) => { - event.preventDefault(); - - if (value === 'best') { - setHelperText('You got it!'); - setError(false); - } else if (value === 'worst') { - setHelperText('Sorry, wrong answer!'); - setError(true); - } else { - setHelperText('Please select an option.'); - setError(true); - } - }; - - return ( -
    - - Pop quiz: MUI is… - - } label="The best!" /> - } label="The worst." /> - - {helperText} - - -
    - ); -} diff --git a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.js b/docs/data/material/components/radio-buttons/FormControlLabelPlacement.js deleted file mode 100644 index 16cfec6691e334..00000000000000 --- a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.js +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; - -export default function FormControlLabelPlacement() { - const id = React.useId(); - return ( - - Label placement - - } - label="Bottom" - labelPlacement="bottom" - /> - } label="End" /> - - - ); -} diff --git a/docs/data/material/components/radio-buttons/RadioButtons.js b/docs/data/material/components/radio-buttons/RadioButtons.js deleted file mode 100644 index ecfc8d4104a4c0..00000000000000 --- a/docs/data/material/components/radio-buttons/RadioButtons.js +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import Radio from '@mui/material/Radio'; - -export default function RadioButtons() { - const [selectedValue, setSelectedValue] = React.useState('a'); - - const handleChange = (event) => { - setSelectedValue(event.target.value); - }; - - return ( -
    - - -
    - ); -} diff --git a/docs/data/material/components/radio-buttons/RadioButtons.tsx.preview b/docs/data/material/components/radio-buttons/RadioButtons.tsx.preview deleted file mode 100644 index 49c7808d7f1f1f..00000000000000 --- a/docs/data/material/components/radio-buttons/RadioButtons.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/radio-buttons/RadioButtonsGroup.js b/docs/data/material/components/radio-buttons/RadioButtonsGroup.js deleted file mode 100644 index f79ba69a7a6176..00000000000000 --- a/docs/data/material/components/radio-buttons/RadioButtonsGroup.js +++ /dev/null @@ -1,24 +0,0 @@ -import * as React from 'react'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; - -export default function RadioButtonsGroup() { - const id = React.useId(); - return ( - - Gender - - } label="Female" /> - } label="Male" /> - } label="Other" /> - - - ); -} diff --git a/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx.preview b/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx.preview deleted file mode 100644 index 4a3e55b4d7fd41..00000000000000 --- a/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - Gender - - } label="Female" /> - } label="Male" /> - } label="Other" /> - - \ No newline at end of file diff --git a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.js b/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.js deleted file mode 100644 index 17a38345157dc1..00000000000000 --- a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.js +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; - -export default function RowRadioButtonsGroup() { - const id = React.useId(); - return ( - - Gender - - } label="Female" /> - } label="Male" /> - } label="Other" /> - } - label="other" - /> - - - ); -} diff --git a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx.preview b/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx.preview deleted file mode 100644 index 02735d38677625..00000000000000 --- a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - Gender - - } label="Female" /> - } label="Male" /> - } label="Other" /> - } - label="other" - /> - - \ No newline at end of file diff --git a/docs/data/material/components/radio-buttons/SizeRadioButtons.js b/docs/data/material/components/radio-buttons/SizeRadioButtons.js deleted file mode 100644 index 02a9ca4f90498c..00000000000000 --- a/docs/data/material/components/radio-buttons/SizeRadioButtons.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import Radio from '@mui/material/Radio'; - -export default function SizeRadioButtons() { - const [selectedValue, setSelectedValue] = React.useState('a'); - const handleChange = (event) => { - setSelectedValue(event.target.value); - }; - - const controlProps = (item) => ({ - checked: selectedValue === item, - onChange: handleChange, - value: item, - name: 'size-radio-button-demo', - inputProps: { 'aria-label': item }, - }); - - return ( -
    - - - -
    - ); -} diff --git a/docs/data/material/components/radio-buttons/SizeRadioButtons.tsx.preview b/docs/data/material/components/radio-buttons/SizeRadioButtons.tsx.preview deleted file mode 100644 index cbff2af0924935..00000000000000 --- a/docs/data/material/components/radio-buttons/SizeRadioButtons.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/radio-buttons/UseRadioGroup.js b/docs/data/material/components/radio-buttons/UseRadioGroup.js deleted file mode 100644 index fb55ea63850606..00000000000000 --- a/docs/data/material/components/radio-buttons/UseRadioGroup.js +++ /dev/null @@ -1,48 +0,0 @@ -import { styled } from '@mui/material/styles'; -import PropTypes from 'prop-types'; -import RadioGroup, { useRadioGroup } from '@mui/material/RadioGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Radio from '@mui/material/Radio'; - -const StyledFormControlLabel = styled((props) => )( - ({ theme }) => ({ - variants: [ - { - props: { checked: true }, - style: { - '.MuiFormControlLabel-label': { - color: theme.palette.primary.main, - }, - }, - }, - ], - }), -); - -function MyFormControlLabel(props) { - const radioGroup = useRadioGroup(); - - let checked = false; - - if (radioGroup) { - checked = radioGroup.value === props.value; - } - - return ; -} - -MyFormControlLabel.propTypes = { - /** - * The value of the component. - */ - value: PropTypes.any, -}; - -export default function UseRadioGroup() { - return ( - - } /> - } /> - - ); -} diff --git a/docs/data/material/components/radio-buttons/UseRadioGroup.tsx.preview b/docs/data/material/components/radio-buttons/UseRadioGroup.tsx.preview deleted file mode 100644 index 990455a38ca53b..00000000000000 --- a/docs/data/material/components/radio-buttons/UseRadioGroup.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - } /> - } /> - \ No newline at end of file diff --git a/docs/data/material/components/radio-buttons/ColorRadioButtons.tsx b/docs/data/material/components/radio-buttons/demos/color/ColorRadioButtons.tsx similarity index 94% rename from docs/data/material/components/radio-buttons/ColorRadioButtons.tsx rename to docs/data/material/components/radio-buttons/demos/color/ColorRadioButtons.tsx index f01f5dd5ec82e5..b6d2b5adb58997 100644 --- a/docs/data/material/components/radio-buttons/ColorRadioButtons.tsx +++ b/docs/data/material/components/radio-buttons/demos/color/ColorRadioButtons.tsx @@ -19,6 +19,7 @@ export default function ColorRadioButtons() { return (
    + {/* @focus-start */} @@ -32,6 +33,7 @@ export default function ColorRadioButtons() { }, }} /> + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/radio-buttons/demos/color/client.ts b/docs/data/material/components/radio-buttons/demos/color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/radio-buttons/demos/color/index.ts b/docs/data/material/components/radio-buttons/demos/color/index.ts new file mode 100644 index 00000000000000..6023409bacfad8 --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorRadioButtons from './ColorRadioButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorRadioButtons, { ClientProvider }); diff --git a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx b/docs/data/material/components/radio-buttons/demos/controlled-group/ControlledRadioButtonsGroup.tsx similarity index 95% rename from docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx rename to docs/data/material/components/radio-buttons/demos/controlled-group/ControlledRadioButtonsGroup.tsx index 7845fb14516c9b..249391fcc9bc92 100644 --- a/docs/data/material/components/radio-buttons/ControlledRadioButtonsGroup.tsx +++ b/docs/data/material/components/radio-buttons/demos/controlled-group/ControlledRadioButtonsGroup.tsx @@ -14,6 +14,7 @@ export default function ControlledRadioButtonsGroup() { }; return ( + // @focus-start @padding 2 Gender } label="Male" /> + // @focus-end ); } diff --git a/docs/data/material/components/radio-buttons/demos/controlled-group/client.ts b/docs/data/material/components/radio-buttons/demos/controlled-group/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/controlled-group/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/radio-buttons/demos/controlled-group/index.ts b/docs/data/material/components/radio-buttons/demos/controlled-group/index.ts new file mode 100644 index 00000000000000..6ad38a82026b0b --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/controlled-group/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ControlledRadioButtonsGroup from './ControlledRadioButtonsGroup'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ControlledRadioButtonsGroup, { ClientProvider }); diff --git a/docs/data/material/components/radio-buttons/CustomizedRadios.tsx b/docs/data/material/components/radio-buttons/demos/customized-radios/CustomizedRadios.tsx similarity index 95% rename from docs/data/material/components/radio-buttons/CustomizedRadios.tsx rename to docs/data/material/components/radio-buttons/demos/customized-radios/CustomizedRadios.tsx index d49a4e06dee0af..1a2952404131d7 100644 --- a/docs/data/material/components/radio-buttons/CustomizedRadios.tsx +++ b/docs/data/material/components/radio-buttons/demos/customized-radios/CustomizedRadios.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; -import Radio, { RadioProps } from '@mui/material/Radio'; +import Radio from '@mui/material/Radio'; +import type { RadioProps } from '@mui/material/Radio'; import RadioGroup from '@mui/material/RadioGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; import FormControl from '@mui/material/FormControl'; @@ -83,6 +84,7 @@ function BpRadio(props: RadioProps) { } export default function CustomizedRadios() { + // @focus-start @padding 1 const id = React.useId(); return ( @@ -104,4 +106,5 @@ export default function CustomizedRadios() { ); + // @focus-end } diff --git a/docs/data/material/components/radio-buttons/demos/customized-radios/client.ts b/docs/data/material/components/radio-buttons/demos/customized-radios/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/customized-radios/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/radio-buttons/demos/customized-radios/index.ts b/docs/data/material/components/radio-buttons/demos/customized-radios/index.ts new file mode 100644 index 00000000000000..802cd8e719aafd --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/customized-radios/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedRadios from './CustomizedRadios'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedRadios, { ClientProvider }); diff --git a/docs/data/material/components/radio-buttons/ErrorRadios.tsx b/docs/data/material/components/radio-buttons/demos/error-radios/ErrorRadios.tsx similarity index 97% rename from docs/data/material/components/radio-buttons/ErrorRadios.tsx rename to docs/data/material/components/radio-buttons/demos/error-radios/ErrorRadios.tsx index c47ed2fbd94aa2..f7302a52055ee0 100644 --- a/docs/data/material/components/radio-buttons/ErrorRadios.tsx +++ b/docs/data/material/components/radio-buttons/demos/error-radios/ErrorRadios.tsx @@ -8,6 +8,7 @@ import FormLabel from '@mui/material/FormLabel'; import Button from '@mui/material/Button'; export default function ErrorRadios() { + // @focus-start @padding 1 const id = React.useId(); const [value, setValue] = React.useState(''); const [error, setError] = React.useState(false); @@ -54,4 +55,5 @@ export default function ErrorRadios() { ); + // @focus-end } diff --git a/docs/data/material/components/radio-buttons/demos/error-radios/client.ts b/docs/data/material/components/radio-buttons/demos/error-radios/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/error-radios/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/radio-buttons/demos/error-radios/index.ts b/docs/data/material/components/radio-buttons/demos/error-radios/index.ts new file mode 100644 index 00000000000000..d8f3d4cba954d9 --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/error-radios/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ErrorRadios from './ErrorRadios'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ErrorRadios, { ClientProvider }); diff --git a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx b/docs/data/material/components/radio-buttons/demos/form-control-label-placement/FormControlLabelPlacement.tsx similarity index 95% rename from docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx rename to docs/data/material/components/radio-buttons/demos/form-control-label-placement/FormControlLabelPlacement.tsx index 16cfec6691e334..b2a3f2bc180b14 100644 --- a/docs/data/material/components/radio-buttons/FormControlLabelPlacement.tsx +++ b/docs/data/material/components/radio-buttons/demos/form-control-label-placement/FormControlLabelPlacement.tsx @@ -6,6 +6,7 @@ import FormControl from '@mui/material/FormControl'; import FormLabel from '@mui/material/FormLabel'; export default function FormControlLabelPlacement() { + // @focus-start @padding 1 const id = React.useId(); return ( @@ -26,4 +27,5 @@ export default function FormControlLabelPlacement() { ); + // @focus-end } diff --git a/docs/data/material/components/radio-buttons/demos/form-control-label-placement/client.ts b/docs/data/material/components/radio-buttons/demos/form-control-label-placement/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/form-control-label-placement/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/radio-buttons/demos/form-control-label-placement/index.ts b/docs/data/material/components/radio-buttons/demos/form-control-label-placement/index.ts new file mode 100644 index 00000000000000..682da13fe1cb86 --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/form-control-label-placement/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FormControlLabelPlacement from './FormControlLabelPlacement'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FormControlLabelPlacement, { ClientProvider }); diff --git a/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx b/docs/data/material/components/radio-buttons/demos/group/RadioButtonsGroup.tsx similarity index 94% rename from docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx rename to docs/data/material/components/radio-buttons/demos/group/RadioButtonsGroup.tsx index f79ba69a7a6176..40a455a50834e8 100644 --- a/docs/data/material/components/radio-buttons/RadioButtonsGroup.tsx +++ b/docs/data/material/components/radio-buttons/demos/group/RadioButtonsGroup.tsx @@ -8,6 +8,7 @@ import FormLabel from '@mui/material/FormLabel'; export default function RadioButtonsGroup() { const id = React.useId(); return ( + // @focus-start @padding 2 Gender } label="Other" /> + // @focus-end ); } diff --git a/docs/data/material/components/radio-buttons/demos/group/client.ts b/docs/data/material/components/radio-buttons/demos/group/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/group/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/radio-buttons/demos/group/index.ts b/docs/data/material/components/radio-buttons/demos/group/index.ts new file mode 100644 index 00000000000000..8c89b5cdf45c1b --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/group/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RadioButtonsGroup from './RadioButtonsGroup'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RadioButtonsGroup, { ClientProvider }); diff --git a/docs/data/material/components/radio-buttons/RadioButtons.tsx b/docs/data/material/components/radio-buttons/demos/radio-buttons/RadioButtons.tsx similarity index 93% rename from docs/data/material/components/radio-buttons/RadioButtons.tsx rename to docs/data/material/components/radio-buttons/demos/radio-buttons/RadioButtons.tsx index cdf3cb8c95137f..4501874983c3b8 100644 --- a/docs/data/material/components/radio-buttons/RadioButtons.tsx +++ b/docs/data/material/components/radio-buttons/demos/radio-buttons/RadioButtons.tsx @@ -10,6 +10,7 @@ export default function RadioButtons() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/radio-buttons/demos/radio-buttons/client.ts b/docs/data/material/components/radio-buttons/demos/radio-buttons/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/radio-buttons/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/radio-buttons/demos/radio-buttons/index.ts b/docs/data/material/components/radio-buttons/demos/radio-buttons/index.ts new file mode 100644 index 00000000000000..aca2d19b5bb094 --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/radio-buttons/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RadioButtons from './RadioButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RadioButtons, { ClientProvider }); diff --git a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx b/docs/data/material/components/radio-buttons/demos/row-group/RowRadioButtonsGroup.tsx similarity index 95% rename from docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx rename to docs/data/material/components/radio-buttons/demos/row-group/RowRadioButtonsGroup.tsx index 17a38345157dc1..d10f17ddcc1bab 100644 --- a/docs/data/material/components/radio-buttons/RowRadioButtonsGroup.tsx +++ b/docs/data/material/components/radio-buttons/demos/row-group/RowRadioButtonsGroup.tsx @@ -8,6 +8,7 @@ import FormLabel from '@mui/material/FormLabel'; export default function RowRadioButtonsGroup() { const id = React.useId(); return ( + // @focus-start @padding 2 Gender @@ -22,5 +23,6 @@ export default function RowRadioButtonsGroup() { /> + // @focus-end ); } diff --git a/docs/data/material/components/radio-buttons/demos/row-group/client.ts b/docs/data/material/components/radio-buttons/demos/row-group/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/row-group/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/radio-buttons/demos/row-group/index.ts b/docs/data/material/components/radio-buttons/demos/row-group/index.ts new file mode 100644 index 00000000000000..8252cc3e09c94f --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/row-group/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RowRadioButtonsGroup from './RowRadioButtonsGroup'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RowRadioButtonsGroup, { ClientProvider }); diff --git a/docs/data/material/components/radio-buttons/SizeRadioButtons.tsx b/docs/data/material/components/radio-buttons/demos/size/SizeRadioButtons.tsx similarity index 93% rename from docs/data/material/components/radio-buttons/SizeRadioButtons.tsx rename to docs/data/material/components/radio-buttons/demos/size/SizeRadioButtons.tsx index 2f39da5d669e17..1044130ba1c87a 100644 --- a/docs/data/material/components/radio-buttons/SizeRadioButtons.tsx +++ b/docs/data/material/components/radio-buttons/demos/size/SizeRadioButtons.tsx @@ -17,6 +17,7 @@ export default function SizeRadioButtons() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/radio-buttons/demos/size/client.ts b/docs/data/material/components/radio-buttons/demos/size/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/radio-buttons/demos/size/index.ts b/docs/data/material/components/radio-buttons/demos/size/index.ts new file mode 100644 index 00000000000000..bba58ded6e0ff1 --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SizeRadioButtons from './SizeRadioButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SizeRadioButtons, { ClientProvider }); diff --git a/docs/data/material/components/radio-buttons/UseRadioGroup.tsx b/docs/data/material/components/radio-buttons/demos/use-radio-group/UseRadioGroup.tsx similarity index 85% rename from docs/data/material/components/radio-buttons/UseRadioGroup.tsx rename to docs/data/material/components/radio-buttons/demos/use-radio-group/UseRadioGroup.tsx index 44f486f8d0b5a7..9b3ce14cb42ac5 100644 --- a/docs/data/material/components/radio-buttons/UseRadioGroup.tsx +++ b/docs/data/material/components/radio-buttons/demos/use-radio-group/UseRadioGroup.tsx @@ -1,8 +1,7 @@ import { styled } from '@mui/material/styles'; import RadioGroup, { useRadioGroup } from '@mui/material/RadioGroup'; -import FormControlLabel, { - FormControlLabelProps, -} from '@mui/material/FormControlLabel'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import type { FormControlLabelProps } from '@mui/material/FormControlLabel'; import Radio from '@mui/material/Radio'; interface StyledFormControlLabelProps extends FormControlLabelProps { @@ -38,9 +37,11 @@ function MyFormControlLabel(props: FormControlLabelProps) { export default function UseRadioGroup() { return ( + // @focus-start @padding 2 } /> } /> + // @focus-end ); } diff --git a/docs/data/material/components/radio-buttons/demos/use-radio-group/client.ts b/docs/data/material/components/radio-buttons/demos/use-radio-group/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/use-radio-group/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/radio-buttons/demos/use-radio-group/index.ts b/docs/data/material/components/radio-buttons/demos/use-radio-group/index.ts new file mode 100644 index 00000000000000..330c3cbbf2b795 --- /dev/null +++ b/docs/data/material/components/radio-buttons/demos/use-radio-group/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UseRadioGroup from './UseRadioGroup'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UseRadioGroup, { ClientProvider }); diff --git a/docs/data/material/components/radio-buttons/radio-buttons.md b/docs/data/material/components/radio-buttons/radio-buttons.md index 0b74ddae5b3c2b..2aec79a1e3d1d8 100644 --- a/docs/data/material/components/radio-buttons/radio-buttons.md +++ b/docs/data/material/components/radio-buttons/radio-buttons.md @@ -23,54 +23,54 @@ Radio buttons should have the most commonly used option selected by default. `RadioGroup` is a helpful wrapper used to group `Radio` components that provides an easier API, and proper keyboard accessibility to the group. -{{"demo": "RadioButtonsGroup.js"}} +{{"component": "file://./demos/group/index.ts"}} ### Direction To lay out the buttons horizontally, set the `row` prop: -{{"demo": "RowRadioButtonsGroup.js"}} +{{"component": "file://./demos/row-group/index.ts"}} ### Controlled You can control the radio with the `value` and `onChange` props: -{{"demo": "ControlledRadioButtonsGroup.js"}} +{{"component": "file://./demos/controlled-group/index.ts"}} ## Standalone radio buttons `Radio` can also be used standalone, without the RadioGroup wrapper. -{{"demo": "RadioButtons.js"}} +{{"component": "file://./demos/radio-buttons/index.ts"}} ## Size Use the `size` prop or customize the font size of the svg icons to change the size of the radios. -{{"demo": "SizeRadioButtons.js"}} +{{"component": "file://./demos/size/index.ts"}} ## Color -{{"demo": "ColorRadioButtons.js"}} +{{"component": "file://./demos/color/index.ts"}} ## Label placement You can change the placement of the label with the `FormControlLabel` component's `labelPlacement` prop: -{{"demo": "FormControlLabelPlacement.js"}} +{{"component": "file://./demos/form-control-label-placement/index.ts"}} ## Show error In general, radio buttons should have a value selected by default. If this is not the case, you can display an error if no value is selected when the form is submitted: -{{"demo": "ErrorRadios.js"}} +{{"component": "file://./demos/error-radios/index.ts"}} ## Customization Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedRadios.js"}} +{{"component": "file://./demos/customized-radios/index.ts"}} ## `useRadioGroup` @@ -94,7 +94,7 @@ import { useRadioGroup } from '@mui/material/RadioGroup'; #### Example -{{"demo": "UseRadioGroup.js"}} +{{"component": "file://./demos/use-radio-group/index.ts"}} ## When to use diff --git a/docs/data/material/components/rating/BasicRating.js b/docs/data/material/components/rating/BasicRating.js deleted file mode 100644 index 637eff13f24f63..00000000000000 --- a/docs/data/material/components/rating/BasicRating.js +++ /dev/null @@ -1,35 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Rating from '@mui/material/Rating'; -import Typography from '@mui/material/Typography'; - -export default function BasicRating() { - const [value, setValue] = React.useState(2); - - return ( - legend': { mt: 2 } }}> - Controlled - { - setValue(newValue); - }} - /> - Uncontrolled - { - console.log(newValue); - }} - defaultValue={2} - /> - Read only - - Disabled - - No rating given - - - ); -} diff --git a/docs/data/material/components/rating/CustomizedRating.js b/docs/data/material/components/rating/CustomizedRating.js deleted file mode 100644 index a88cf26440cc30..00000000000000 --- a/docs/data/material/components/rating/CustomizedRating.js +++ /dev/null @@ -1,33 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Rating from '@mui/material/Rating'; -import FavoriteIcon from '@mui/icons-material/Favorite'; -import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder'; -import Typography from '@mui/material/Typography'; - -const StyledRating = styled(Rating)({ - '& .MuiRating-iconFilled': { - color: '#ff6d75', - }, - '& .MuiRating-iconHover': { - color: '#ff3d47', - }, -}); - -export default function CustomizedRating() { - return ( - legend': { mt: 2 } }}> - Custom icon and color - `${value} Heart${value !== 1 ? 's' : ''}`} - precision={0.5} - icon={} - emptyIcon={} - /> - 10 stars - - - ); -} diff --git a/docs/data/material/components/rating/CustomizedRating.tsx.preview b/docs/data/material/components/rating/CustomizedRating.tsx.preview deleted file mode 100644 index af39623d881110..00000000000000 --- a/docs/data/material/components/rating/CustomizedRating.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ -Custom icon and color - `${value} Heart${value !== 1 ? 's' : ''}`} - precision={0.5} - icon={} - emptyIcon={} -/> -10 stars - \ No newline at end of file diff --git a/docs/data/material/components/rating/HalfRating.js b/docs/data/material/components/rating/HalfRating.js deleted file mode 100644 index 004627b5d5b3e0..00000000000000 --- a/docs/data/material/components/rating/HalfRating.js +++ /dev/null @@ -1,11 +0,0 @@ -import Rating from '@mui/material/Rating'; -import Stack from '@mui/material/Stack'; - -export default function HalfRating() { - return ( - - - - - ); -} diff --git a/docs/data/material/components/rating/HalfRating.tsx.preview b/docs/data/material/components/rating/HalfRating.tsx.preview deleted file mode 100644 index ad7fdd68e84898..00000000000000 --- a/docs/data/material/components/rating/HalfRating.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/rating/HoverRating.js b/docs/data/material/components/rating/HoverRating.js deleted file mode 100644 index 4b7d7738e2a0c4..00000000000000 --- a/docs/data/material/components/rating/HoverRating.js +++ /dev/null @@ -1,47 +0,0 @@ -import * as React from 'react'; -import Rating from '@mui/material/Rating'; -import Box from '@mui/material/Box'; -import StarIcon from '@mui/icons-material/Star'; - -const labels = { - 0.5: 'Useless', - 1: 'Useless+', - 1.5: 'Poor', - 2: 'Poor+', - 2.5: 'Ok', - 3: 'Ok+', - 3.5: 'Good', - 4: 'Good+', - 4.5: 'Excellent', - 5: 'Excellent+', -}; - -function getLabelText(value) { - return `${value} Star${value !== 1 ? 's' : ''}, ${labels[value]}`; -} - -export default function HoverRating() { - const [value, setValue] = React.useState(2); - const [hover, setHover] = React.useState(-1); - - return ( - - { - setValue(newValue); - }} - onChangeActive={(event, newHover) => { - setHover(newHover); - }} - emptyIcon={} - /> - {value !== null && ( - {labels[hover !== -1 ? hover : value]} - )} - - ); -} diff --git a/docs/data/material/components/rating/HoverRating.tsx.preview b/docs/data/material/components/rating/HoverRating.tsx.preview deleted file mode 100644 index 8f7aff0c844e42..00000000000000 --- a/docs/data/material/components/rating/HoverRating.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - { - setValue(newValue); - }} - onChangeActive={(event, newHover) => { - setHover(newHover); - }} - emptyIcon={} -/> -{value !== null && ( - {labels[hover !== -1 ? hover : value]} -)} \ No newline at end of file diff --git a/docs/data/material/components/rating/RadioGroupRating.js b/docs/data/material/components/rating/RadioGroupRating.js deleted file mode 100644 index 03368836cbe8e8..00000000000000 --- a/docs/data/material/components/rating/RadioGroupRating.js +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { styled } from '@mui/material/styles'; -import Rating from '@mui/material/Rating'; -import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied'; -import SentimentDissatisfiedIcon from '@mui/icons-material/SentimentDissatisfied'; -import SentimentSatisfiedIcon from '@mui/icons-material/SentimentSatisfied'; -import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAltOutlined'; -import SentimentVerySatisfiedIcon from '@mui/icons-material/SentimentVerySatisfied'; - -const StyledRating = styled(Rating)(({ theme }) => ({ - '& .MuiRating-iconEmpty .MuiSvgIcon-root': { - color: (theme.vars || theme).palette.action.disabled, - }, -})); - -const customIcons = { - 1: { - icon: , - label: 'Very Dissatisfied', - }, - 2: { - icon: , - label: 'Dissatisfied', - }, - 3: { - icon: , - label: 'Neutral', - }, - 4: { - icon: , - label: 'Satisfied', - }, - 5: { - icon: , - label: 'Very Satisfied', - }, -}; - -function IconContainer(props) { - const { value, ...other } = props; - return {customIcons[value].icon}; -} - -IconContainer.propTypes = { - value: PropTypes.number.isRequired, -}; - -export default function RadioGroupRating() { - return ( - customIcons[value].label} - slotProps={{ icon: { component: IconContainer } }} - highlightSelectedOnly - /> - ); -} diff --git a/docs/data/material/components/rating/RadioGroupRating.tsx.preview b/docs/data/material/components/rating/RadioGroupRating.tsx.preview deleted file mode 100644 index 264aa41d532cb5..00000000000000 --- a/docs/data/material/components/rating/RadioGroupRating.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - customIcons[value].label} - slotProps={{ icon: { component: IconContainer } }} - highlightSelectedOnly -/> \ No newline at end of file diff --git a/docs/data/material/components/rating/RatingSize.js b/docs/data/material/components/rating/RatingSize.js deleted file mode 100644 index 158434315e1eff..00000000000000 --- a/docs/data/material/components/rating/RatingSize.js +++ /dev/null @@ -1,12 +0,0 @@ -import Rating from '@mui/material/Rating'; -import Stack from '@mui/material/Stack'; - -export default function RatingSize() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/rating/RatingSize.tsx.preview b/docs/data/material/components/rating/RatingSize.tsx.preview deleted file mode 100644 index 829b917f8a812b..00000000000000 --- a/docs/data/material/components/rating/RatingSize.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/rating/TextRating.js b/docs/data/material/components/rating/TextRating.js deleted file mode 100644 index e7259c4885122f..00000000000000 --- a/docs/data/material/components/rating/TextRating.js +++ /dev/null @@ -1,33 +0,0 @@ -import Box from '@mui/material/Box'; -import Rating from '@mui/material/Rating'; -import StarIcon from '@mui/icons-material/Star'; - -const labels = { - 0.5: 'Useless', - 1: 'Useless+', - 1.5: 'Poor', - 2: 'Poor+', - 2.5: 'Ok', - 3: 'Ok+', - 3.5: 'Good', - 4: 'Good+', - 4.5: 'Excellent', - 5: 'Excellent+', -}; - -export default function TextRating() { - const value = 3.5; - - return ( - - } - /> - {labels[value]} - - ); -} diff --git a/docs/data/material/components/rating/TextRating.tsx.preview b/docs/data/material/components/rating/TextRating.tsx.preview deleted file mode 100644 index 6420fad826c8c9..00000000000000 --- a/docs/data/material/components/rating/TextRating.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ -} -/> -{labels[value]} \ No newline at end of file diff --git a/docs/data/material/components/rating/BasicRating.tsx b/docs/data/material/components/rating/demos/basic/BasicRating.tsx similarity index 96% rename from docs/data/material/components/rating/BasicRating.tsx rename to docs/data/material/components/rating/demos/basic/BasicRating.tsx index 56c463b687612e..b9bae29d47a64d 100644 --- a/docs/data/material/components/rating/BasicRating.tsx +++ b/docs/data/material/components/rating/demos/basic/BasicRating.tsx @@ -4,6 +4,7 @@ import Rating from '@mui/material/Rating'; import Typography from '@mui/material/Typography'; export default function BasicRating() { + // @focus-start @padding 1 const [value, setValue] = React.useState(2); return ( @@ -32,4 +33,5 @@ export default function BasicRating() { ); + // @focus-end } diff --git a/docs/data/material/components/rating/demos/basic/client.ts b/docs/data/material/components/rating/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/rating/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/rating/demos/basic/index.ts b/docs/data/material/components/rating/demos/basic/index.ts new file mode 100644 index 00000000000000..2aba1d90b1cfca --- /dev/null +++ b/docs/data/material/components/rating/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicRating from './BasicRating'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicRating, { ClientProvider }); diff --git a/docs/data/material/components/rating/CustomizedRating.tsx b/docs/data/material/components/rating/demos/customized/CustomizedRating.tsx similarity index 95% rename from docs/data/material/components/rating/CustomizedRating.tsx rename to docs/data/material/components/rating/demos/customized/CustomizedRating.tsx index 1f747576af63ed..50ab4d6cfbaba2 100644 --- a/docs/data/material/components/rating/CustomizedRating.tsx +++ b/docs/data/material/components/rating/demos/customized/CustomizedRating.tsx @@ -17,6 +17,7 @@ const StyledRating = styled(Rating)({ export default function CustomizedRating() { return ( legend': { mt: 2 } }}> + {/* @focus-start */} Custom icon and color 10 stars + {/* @focus-end */} ); } diff --git a/docs/data/material/components/rating/demos/customized/client.ts b/docs/data/material/components/rating/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/rating/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/rating/demos/customized/index.ts b/docs/data/material/components/rating/demos/customized/index.ts new file mode 100644 index 00000000000000..d23e5f099974c2 --- /dev/null +++ b/docs/data/material/components/rating/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedRating from './CustomizedRating'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedRating, { ClientProvider }); diff --git a/docs/data/material/components/rating/HalfRating.tsx b/docs/data/material/components/rating/demos/half/HalfRating.tsx similarity index 86% rename from docs/data/material/components/rating/HalfRating.tsx rename to docs/data/material/components/rating/demos/half/HalfRating.tsx index 004627b5d5b3e0..2eaad6a7dc2d98 100644 --- a/docs/data/material/components/rating/HalfRating.tsx +++ b/docs/data/material/components/rating/demos/half/HalfRating.tsx @@ -4,8 +4,10 @@ import Stack from '@mui/material/Stack'; export default function HalfRating() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/rating/demos/half/client.ts b/docs/data/material/components/rating/demos/half/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/rating/demos/half/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/rating/demos/half/index.ts b/docs/data/material/components/rating/demos/half/index.ts new file mode 100644 index 00000000000000..83609ffdcbd9ff --- /dev/null +++ b/docs/data/material/components/rating/demos/half/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HalfRating from './HalfRating'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HalfRating, { ClientProvider }); diff --git a/docs/data/material/components/rating/HoverRating.tsx b/docs/data/material/components/rating/demos/hover/HoverRating.tsx similarity index 95% rename from docs/data/material/components/rating/HoverRating.tsx rename to docs/data/material/components/rating/demos/hover/HoverRating.tsx index a282d886c314c2..ec0ca2edbb923b 100644 --- a/docs/data/material/components/rating/HoverRating.tsx +++ b/docs/data/material/components/rating/demos/hover/HoverRating.tsx @@ -26,6 +26,7 @@ export default function HoverRating() { return ( + {/* @focus-start */} {labels[hover !== -1 ? hover : value]} )} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/rating/demos/hover/client.ts b/docs/data/material/components/rating/demos/hover/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/rating/demos/hover/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/rating/demos/hover/index.ts b/docs/data/material/components/rating/demos/hover/index.ts new file mode 100644 index 00000000000000..48052af6eae277 --- /dev/null +++ b/docs/data/material/components/rating/demos/hover/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HoverRating from './HoverRating'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HoverRating, { ClientProvider }); diff --git a/docs/data/material/components/rating/RadioGroupRating.tsx b/docs/data/material/components/rating/demos/radio-group/RadioGroupRating.tsx similarity index 91% rename from docs/data/material/components/rating/RadioGroupRating.tsx rename to docs/data/material/components/rating/demos/radio-group/RadioGroupRating.tsx index 92cf8dc3cbeb3d..dbd8d06b69b636 100644 --- a/docs/data/material/components/rating/RadioGroupRating.tsx +++ b/docs/data/material/components/rating/demos/radio-group/RadioGroupRating.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; -import Rating, { IconContainerProps } from '@mui/material/Rating'; +import Rating from '@mui/material/Rating'; +import type { IconContainerProps } from '@mui/material/Rating'; import SentimentVeryDissatisfiedIcon from '@mui/icons-material/SentimentVeryDissatisfied'; import SentimentDissatisfiedIcon from '@mui/icons-material/SentimentDissatisfied'; import SentimentSatisfiedIcon from '@mui/icons-material/SentimentSatisfied'; @@ -48,6 +49,7 @@ function IconContainer(props: IconContainerProps) { export default function RadioGroupRating() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/rating/demos/radio-group/client.ts b/docs/data/material/components/rating/demos/radio-group/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/rating/demos/radio-group/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/rating/demos/radio-group/index.ts b/docs/data/material/components/rating/demos/radio-group/index.ts new file mode 100644 index 00000000000000..73f2789ee7c180 --- /dev/null +++ b/docs/data/material/components/rating/demos/radio-group/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RadioGroupRating from './RadioGroupRating'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RadioGroupRating, { ClientProvider }); diff --git a/docs/data/material/components/rating/RatingSize.tsx b/docs/data/material/components/rating/demos/size/RatingSize.tsx similarity index 87% rename from docs/data/material/components/rating/RatingSize.tsx rename to docs/data/material/components/rating/demos/size/RatingSize.tsx index 158434315e1eff..2667dc36736d89 100644 --- a/docs/data/material/components/rating/RatingSize.tsx +++ b/docs/data/material/components/rating/demos/size/RatingSize.tsx @@ -4,9 +4,11 @@ import Stack from '@mui/material/Stack'; export default function RatingSize() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/rating/demos/size/client.ts b/docs/data/material/components/rating/demos/size/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/rating/demos/size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/rating/demos/size/index.ts b/docs/data/material/components/rating/demos/size/index.ts new file mode 100644 index 00000000000000..64799f83b96751 --- /dev/null +++ b/docs/data/material/components/rating/demos/size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RatingSize from './RatingSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RatingSize, { ClientProvider }); diff --git a/docs/data/material/components/rating/TextRating.tsx b/docs/data/material/components/rating/demos/text/TextRating.tsx similarity index 93% rename from docs/data/material/components/rating/TextRating.tsx rename to docs/data/material/components/rating/demos/text/TextRating.tsx index 9850ca0a0b657f..7e6d2abf6e3754 100644 --- a/docs/data/material/components/rating/TextRating.tsx +++ b/docs/data/material/components/rating/demos/text/TextRating.tsx @@ -20,6 +20,7 @@ export default function TextRating() { return ( + {/* @focus-start */} } /> {labels[value]} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/rating/demos/text/client.ts b/docs/data/material/components/rating/demos/text/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/rating/demos/text/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/rating/demos/text/index.ts b/docs/data/material/components/rating/demos/text/index.ts new file mode 100644 index 00000000000000..95f88de374ce56 --- /dev/null +++ b/docs/data/material/components/rating/demos/text/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TextRating from './TextRating'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TextRating, { ClientProvider }); diff --git a/docs/data/material/components/rating/rating.md b/docs/data/material/components/rating/rating.md index 36ed71c49af02c..d0a66c553826c9 100644 --- a/docs/data/material/components/rating/rating.md +++ b/docs/data/material/components/rating/rating.md @@ -15,40 +15,40 @@ githubSource: packages/mui-material/src/Rating ## Basic rating -{{"demo": "BasicRating.js"}} +{{"component": "file://./demos/basic/index.ts"}} ## Rating precision The rating can display any float number with the `value` prop. Use the `precision` prop to define the minimum increment value change allowed. -{{"demo": "HalfRating.js"}} +{{"component": "file://./demos/half/index.ts"}} ## Hover feedback You can display a label on hover to help the user pick the correct rating value. The demo uses the `onChangeActive` prop. -{{"demo": "HoverRating.js"}} +{{"component": "file://./demos/hover/index.ts"}} ## Sizes For larger or smaller ratings use the `size` prop. -{{"demo": "RatingSize.js"}} +{{"component": "file://./demos/size/index.ts"}} ## Customization Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedRating.js"}} +{{"component": "file://./demos/customized/index.ts"}} ## Radio group The rating is implemented with a radio group, set `highlightSelectedOnly` to restore the natural behavior. -{{"demo": "RadioGroupRating.js"}} +{{"component": "file://./demos/radio-group/index.ts"}} ## Accessibility @@ -63,7 +63,7 @@ The accessibility of this component relies on: - A visually distinct appearance for the rating icons. By default, the rating component uses both a difference of color and shape (filled and empty icons) to indicate the value. In the event that you are using color as the only means to indicate the value, the information should also be also displayed as text, as in this demo. This is important to meet [WCAG 2.2 Success Criterion 1.4.1](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html). -{{"demo": "TextRating.js"}} +{{"component": "file://./demos/text/index.ts"}} ### ARIA diff --git a/docs/data/material/components/selects/BasicSelect.js b/docs/data/material/components/selects/BasicSelect.js deleted file mode 100644 index 376005e57f5c77..00000000000000 --- a/docs/data/material/components/selects/BasicSelect.js +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; - -export default function BasicSelect() { - const [age, setAge] = React.useState(''); - - const handleChange = (event) => { - setAge(event.target.value); - }; - - return ( - - - Age - - - - ); -} diff --git a/docs/data/material/components/selects/BasicSelect.tsx.preview b/docs/data/material/components/selects/BasicSelect.tsx.preview deleted file mode 100644 index 2294528ef8b6f5..00000000000000 --- a/docs/data/material/components/selects/BasicSelect.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - Age - - \ No newline at end of file diff --git a/docs/data/material/components/selects/ControlledOpenSelect.js b/docs/data/material/components/selects/ControlledOpenSelect.js deleted file mode 100644 index 80071d0d4cca4e..00000000000000 --- a/docs/data/material/components/selects/ControlledOpenSelect.js +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; -import Button from '@mui/material/Button'; - -export default function ControlledOpenSelect() { - const [age, setAge] = React.useState(''); - const [open, setOpen] = React.useState(false); - - const handleChange = (event) => { - setAge(event.target.value); - }; - - const handleClose = () => { - setOpen(false); - }; - - const handleOpen = () => { - setOpen(true); - }; - - return ( -
    - - - Age - - -
    - ); -} diff --git a/docs/data/material/components/selects/CustomizedSelects.js b/docs/data/material/components/selects/CustomizedSelects.js deleted file mode 100644 index 8e75004d9ebab7..00000000000000 --- a/docs/data/material/components/selects/CustomizedSelects.js +++ /dev/null @@ -1,90 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; -import NativeSelect from '@mui/material/NativeSelect'; -import InputBase from '@mui/material/InputBase'; - -const BootstrapInput = styled(InputBase)(({ theme }) => ({ - 'label + &': { - marginTop: theme.spacing(3), - }, - '& .MuiInputBase-input': { - borderRadius: 4, - position: 'relative', - backgroundColor: (theme.vars ?? theme).palette.background.paper, - border: '1px solid #ced4da', - fontSize: 16, - padding: '10px 26px 10px 12px', - transition: theme.transitions.create(['border-color', 'box-shadow']), - // Use the system font instead of the default Roboto font. - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - '&:focus': { - borderRadius: 4, - borderColor: '#80bdff', - boxShadow: '0 0 0 0.2rem rgba(0,123,255,.25)', - }, - }, -})); - -export default function CustomizedSelects() { - const textboxId = React.useId(); - const selectId = React.useId(); - const nativeId = React.useId(); - const [age, setAge] = React.useState(''); - const handleChange = (event) => { - setAge(event.target.value); - }; - return ( -
    - - Age - - - - Age - - - - Age - } - > - - - - - -
    - ); -} diff --git a/docs/data/material/components/selects/DialogSelect.js b/docs/data/material/components/selects/DialogSelect.js deleted file mode 100644 index 5387e53d5c16bc..00000000000000 --- a/docs/data/material/components/selects/DialogSelect.js +++ /dev/null @@ -1,85 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogActions from '@mui/material/DialogActions'; -import DialogContent from '@mui/material/DialogContent'; -import DialogTitle from '@mui/material/DialogTitle'; -import InputLabel from '@mui/material/InputLabel'; -import OutlinedInput from '@mui/material/OutlinedInput'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; - -export default function DialogSelect() { - const nativeId = React.useId(); - const selectId = React.useId(); - const [open, setOpen] = React.useState(false); - const [age, setAge] = React.useState(''); - - const handleChange = (event) => { - setAge(Number(event.target.value) || ''); - }; - - const handleClickOpen = () => { - setOpen(true); - }; - - const handleDialogClose = (_event, reason) => { - if (!['backdropClick', 'escapeKeyDown'].includes(reason)) { - setOpen(false); - } - }; - - const handleActionButtonClick = () => { - setOpen(false); - }; - - return ( -
    - - - Fill the form - - - - Age - - - - Age - - - - - - - - - -
    - ); -} diff --git a/docs/data/material/components/selects/GroupedSelect.js b/docs/data/material/components/selects/GroupedSelect.js deleted file mode 100644 index 4eff428d7fe755..00000000000000 --- a/docs/data/material/components/selects/GroupedSelect.js +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import ListSubheader from '@mui/material/ListSubheader'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; - -export default function GroupedSelect() { - const nativeId = React.useId(); - const id = React.useId(); - return ( -
    - - Grouping - - - - Grouping - - -
    - ); -} diff --git a/docs/data/material/components/selects/MultipleSelect.js b/docs/data/material/components/selects/MultipleSelect.js deleted file mode 100644 index f09250077f32d8..00000000000000 --- a/docs/data/material/components/selects/MultipleSelect.js +++ /dev/null @@ -1,83 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/material/styles'; -import OutlinedInput from '@mui/material/OutlinedInput'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; - -const ITEM_HEIGHT = 48; -const ITEM_PADDING_TOP = 8; -const MenuProps = { - slotProps: { - paper: { - style: { - maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, - width: 250, - }, - }, - }, -}; - -const names = [ - 'Oliver Hansen', - 'Van Henry', - 'April Tucker', - 'Ralph Hubbard', - 'Omar Alexander', - 'Carlos Abbott', - 'Miriam Wagner', - 'Bradley Wilkerson', - 'Virginia Andrews', - 'Kelly Snyder', -]; - -function getStyles(name, personName, theme) { - return { - fontWeight: personName.includes(name) - ? theme.typography.fontWeightMedium - : theme.typography.fontWeightRegular, - }; -} - -export default function MultipleSelect() { - const theme = useTheme(); - const [personName, setPersonName] = React.useState([]); - - const handleChange = (event) => { - const { - target: { value }, - } = event; - setPersonName( - // On autofill we get a stringified value. - typeof value === 'string' ? value.split(',') : value, - ); - }; - - return ( -
    - - Name - - -
    - ); -} diff --git a/docs/data/material/components/selects/MultipleSelectCheckmarks.js b/docs/data/material/components/selects/MultipleSelectCheckmarks.js deleted file mode 100644 index a6f9b6f76da66a..00000000000000 --- a/docs/data/material/components/selects/MultipleSelectCheckmarks.js +++ /dev/null @@ -1,82 +0,0 @@ -import * as React from 'react'; -import OutlinedInput from '@mui/material/OutlinedInput'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import ListItemText from '@mui/material/ListItemText'; -import Select from '@mui/material/Select'; -import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'; -import CheckBoxIcon from '@mui/icons-material/CheckBox'; - -const ITEM_HEIGHT = 48; -const ITEM_PADDING_TOP = 8; -const MenuProps = { - slotProps: { - paper: { - style: { - maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, - width: 250, - }, - }, - }, -}; - -const names = [ - 'Oliver Hansen', - 'Van Henry', - 'April Tucker', - 'Ralph Hubbard', - 'Omar Alexander', - 'Carlos Abbott', - 'Miriam Wagner', - 'Bradley Wilkerson', - 'Virginia Andrews', - 'Kelly Snyder', -]; - -export default function MultipleSelectCheckmarks() { - const [personName, setPersonName] = React.useState([]); - - const handleChange = (event) => { - const { - target: { value }, - } = event; - setPersonName( - // On autofill we get a stringified value. - typeof value === 'string' ? value.split(',') : value, - ); - }; - - return ( -
    - - Tag - - -
    - ); -} diff --git a/docs/data/material/components/selects/MultipleSelectChip.js b/docs/data/material/components/selects/MultipleSelectChip.js deleted file mode 100644 index e533d6ac94cfd0..00000000000000 --- a/docs/data/material/components/selects/MultipleSelectChip.js +++ /dev/null @@ -1,92 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import OutlinedInput from '@mui/material/OutlinedInput'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; -import Chip from '@mui/material/Chip'; - -const ITEM_HEIGHT = 48; -const ITEM_PADDING_TOP = 8; -const MenuProps = { - slotProps: { - paper: { - style: { - maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, - width: 250, - }, - }, - }, -}; - -const names = [ - 'Oliver Hansen', - 'Van Henry', - 'April Tucker', - 'Ralph Hubbard', - 'Omar Alexander', - 'Carlos Abbott', - 'Miriam Wagner', - 'Bradley Wilkerson', - 'Virginia Andrews', - 'Kelly Snyder', -]; - -function getStyles(name, personName, theme) { - return { - fontWeight: personName.includes(name) - ? theme.typography.fontWeightMedium - : theme.typography.fontWeightRegular, - }; -} - -export default function MultipleSelectChip() { - const theme = useTheme(); - const [personName, setPersonName] = React.useState([]); - - const handleChange = (event) => { - const { - target: { value }, - } = event; - setPersonName( - // On autofill we get a stringified value. - typeof value === 'string' ? value.split(',') : value, - ); - }; - - return ( -
    - - Chip - - -
    - ); -} diff --git a/docs/data/material/components/selects/MultipleSelectNative.js b/docs/data/material/components/selects/MultipleSelectNative.js deleted file mode 100644 index 4abb16e831979e..00000000000000 --- a/docs/data/material/components/selects/MultipleSelectNative.js +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import InputLabel from '@mui/material/InputLabel'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; - -const names = [ - 'Oliver Hansen', - 'Van Henry', - 'April Tucker', - 'Ralph Hubbard', - 'Omar Alexander', - 'Carlos Abbott', - 'Miriam Wagner', - 'Bradley Wilkerson', - 'Virginia Andrews', - 'Kelly Snyder', -]; - -export default function MultipleSelectNative() { - const id = React.useId(); - const [personName, setPersonName] = React.useState([]); - const handleChangeMultiple = (event) => { - const { options } = event.target; - const value = []; - for (let i = 0, l = options.length; i < l; i += 1) { - if (options[i].selected) { - value.push(options[i].value); - } - } - setPersonName(value); - }; - - return ( -
    - - - Native - - - -
    - ); -} diff --git a/docs/data/material/components/selects/MultipleSelectPlaceholder.js b/docs/data/material/components/selects/MultipleSelectPlaceholder.js deleted file mode 100644 index 44d5ce4068e10b..00000000000000 --- a/docs/data/material/components/selects/MultipleSelectPlaceholder.js +++ /dev/null @@ -1,91 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/material/styles'; -import OutlinedInput from '@mui/material/OutlinedInput'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; - -const ITEM_HEIGHT = 48; -const ITEM_PADDING_TOP = 8; -const MenuProps = { - slotProps: { - paper: { - style: { - maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP, - width: 250, - }, - }, - }, -}; - -const names = [ - 'Oliver Hansen', - 'Van Henry', - 'April Tucker', - 'Ralph Hubbard', - 'Omar Alexander', - 'Carlos Abbott', - 'Miriam Wagner', - 'Bradley Wilkerson', - 'Virginia Andrews', - 'Kelly Snyder', -]; - -function getStyles(name, personName, theme) { - return { - fontWeight: personName.includes(name) - ? theme.typography.fontWeightMedium - : theme.typography.fontWeightRegular, - }; -} - -export default function MultipleSelectPlaceholder() { - const theme = useTheme(); - const [personName, setPersonName] = React.useState([]); - - const handleChange = (event) => { - const { - target: { value }, - } = event; - setPersonName( - // On autofill we get a stringified value. - typeof value === 'string' ? value.split(',') : value, - ); - }; - - return ( -
    - - - -
    - ); -} diff --git a/docs/data/material/components/selects/NativeSelectDemo.js b/docs/data/material/components/selects/NativeSelectDemo.js deleted file mode 100644 index 8ffbec6206cc5b..00000000000000 --- a/docs/data/material/components/selects/NativeSelectDemo.js +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import InputLabel from '@mui/material/InputLabel'; -import FormControl from '@mui/material/FormControl'; -import NativeSelect from '@mui/material/NativeSelect'; - -export default function NativeSelectDemo() { - const id = React.useId(); - return ( - - - - Age - - - - - - - - - ); -} diff --git a/docs/data/material/components/selects/NativeSelectDemo.tsx.preview b/docs/data/material/components/selects/NativeSelectDemo.tsx.preview deleted file mode 100644 index c6ef912aff766b..00000000000000 --- a/docs/data/material/components/selects/NativeSelectDemo.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - - Age - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/selects/SelectAutoWidth.js b/docs/data/material/components/selects/SelectAutoWidth.js deleted file mode 100644 index 0d56a041c980f4..00000000000000 --- a/docs/data/material/components/selects/SelectAutoWidth.js +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; - -export default function SelectAutoWidth() { - const [age, setAge] = React.useState(''); - - const handleChange = (event) => { - setAge(event.target.value); - }; - - return ( -
    - - Age - - -
    - ); -} diff --git a/docs/data/material/components/selects/SelectLabels.js b/docs/data/material/components/selects/SelectLabels.js deleted file mode 100644 index 8078421b06cca1..00000000000000 --- a/docs/data/material/components/selects/SelectLabels.js +++ /dev/null @@ -1,61 +0,0 @@ -import * as React from 'react'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormHelperText from '@mui/material/FormHelperText'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; - -export default function SelectLabels() { - const id = React.useId(); - const noLabelId = React.useId(); - const [age, setAge] = React.useState(''); - - const handleChange = (event) => { - setAge(event.target.value); - }; - - return ( -
    - - Age - - - Visible label and helper text - - - - - - aria-label and helper text - - -
    - ); -} diff --git a/docs/data/material/components/selects/SelectOtherProps.js b/docs/data/material/components/selects/SelectOtherProps.js deleted file mode 100644 index ce504047f1b3e6..00000000000000 --- a/docs/data/material/components/selects/SelectOtherProps.js +++ /dev/null @@ -1,93 +0,0 @@ -import * as React from 'react'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormHelperText from '@mui/material/FormHelperText'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; - -export default function SelectOtherProps() { - const [age, setAge] = React.useState(''); - - const handleChange = (event) => { - setAge(event.target.value); - }; - - return ( -
    - - Age - - Disabled - - - Age - - Error - - - Age - - Read only - - - Age - - Required - -
    - ); -} diff --git a/docs/data/material/components/selects/SelectSmall.js b/docs/data/material/components/selects/SelectSmall.js deleted file mode 100644 index 99d073e5ed2a93..00000000000000 --- a/docs/data/material/components/selects/SelectSmall.js +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; - -export default function SelectSmall() { - const [age, setAge] = React.useState(''); - - const handleChange = (event) => { - setAge(event.target.value); - }; - - return ( - - Age - - - ); -} diff --git a/docs/data/material/components/selects/SelectVariants.js b/docs/data/material/components/selects/SelectVariants.js deleted file mode 100644 index 43b1c546860cc4..00000000000000 --- a/docs/data/material/components/selects/SelectVariants.js +++ /dev/null @@ -1,67 +0,0 @@ -import * as React from 'react'; -import InputLabel from '@mui/material/InputLabel'; -import MenuItem from '@mui/material/MenuItem'; -import FormControl from '@mui/material/FormControl'; -import Select from '@mui/material/Select'; - -export default function SelectVariants() { - const [age, setAge] = React.useState(''); - - const handleChange = (event) => { - setAge(event.target.value); - }; - - return ( -
    - - Age - - - - Age - - - - Age - - -
    - ); -} diff --git a/docs/data/material/components/selects/SelectAutoWidth.tsx b/docs/data/material/components/selects/demos/auto-width/SelectAutoWidth.tsx similarity index 87% rename from docs/data/material/components/selects/SelectAutoWidth.tsx rename to docs/data/material/components/selects/demos/auto-width/SelectAutoWidth.tsx index 8f0c8a7acb3d96..821c3b6f3a302a 100644 --- a/docs/data/material/components/selects/SelectAutoWidth.tsx +++ b/docs/data/material/components/selects/demos/auto-width/SelectAutoWidth.tsx @@ -2,9 +2,11 @@ import * as React from 'react'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import type { SelectChangeEvent } from '@mui/material/Select'; export default function SelectAutoWidth() { + // @focus-start @padding 1 const [age, setAge] = React.useState(''); const handleChange = (event: SelectChangeEvent) => { @@ -33,4 +35,5 @@ export default function SelectAutoWidth() { ); + // @focus-end } diff --git a/docs/data/material/components/selects/demos/auto-width/client.ts b/docs/data/material/components/selects/demos/auto-width/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/auto-width/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/auto-width/index.ts b/docs/data/material/components/selects/demos/auto-width/index.ts new file mode 100644 index 00000000000000..68c2bf3d96ff59 --- /dev/null +++ b/docs/data/material/components/selects/demos/auto-width/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SelectAutoWidth from './SelectAutoWidth'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SelectAutoWidth, { ClientProvider }); diff --git a/docs/data/material/components/selects/BasicSelect.tsx b/docs/data/material/components/selects/demos/basic/BasicSelect.tsx similarity index 85% rename from docs/data/material/components/selects/BasicSelect.tsx rename to docs/data/material/components/selects/demos/basic/BasicSelect.tsx index 58b3a21499fc30..548fcbf4d0ca53 100644 --- a/docs/data/material/components/selects/BasicSelect.tsx +++ b/docs/data/material/components/selects/demos/basic/BasicSelect.tsx @@ -3,7 +3,8 @@ import Box from '@mui/material/Box'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import type { SelectChangeEvent } from '@mui/material/Select'; export default function BasicSelect() { const [age, setAge] = React.useState(''); @@ -14,6 +15,7 @@ export default function BasicSelect() { return ( + {/* @focus-start */} Age + {/* @focus-end */} ); } diff --git a/docs/data/material/components/selects/demos/basic/client.ts b/docs/data/material/components/selects/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/basic/index.ts b/docs/data/material/components/selects/demos/basic/index.ts new file mode 100644 index 00000000000000..c5b979430eaee8 --- /dev/null +++ b/docs/data/material/components/selects/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicSelect from './BasicSelect'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicSelect, { ClientProvider }); diff --git a/docs/data/material/components/selects/ControlledOpenSelect.tsx b/docs/data/material/components/selects/demos/controlled-open/ControlledOpenSelect.tsx similarity index 90% rename from docs/data/material/components/selects/ControlledOpenSelect.tsx rename to docs/data/material/components/selects/demos/controlled-open/ControlledOpenSelect.tsx index 82ed200bd00093..ba22e9961ab2ae 100644 --- a/docs/data/material/components/selects/ControlledOpenSelect.tsx +++ b/docs/data/material/components/selects/demos/controlled-open/ControlledOpenSelect.tsx @@ -2,10 +2,12 @@ import * as React from 'react'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import type { SelectChangeEvent } from '@mui/material/Select'; import Button from '@mui/material/Button'; export default function ControlledOpenSelect() { + // @focus-start @padding 1 const [age, setAge] = React.useState(''); const [open, setOpen] = React.useState(false); @@ -48,4 +50,5 @@ export default function ControlledOpenSelect() { ); + // @focus-end } diff --git a/docs/data/material/components/selects/demos/controlled-open/client.ts b/docs/data/material/components/selects/demos/controlled-open/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/controlled-open/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/controlled-open/index.ts b/docs/data/material/components/selects/demos/controlled-open/index.ts new file mode 100644 index 00000000000000..90d1d493413f00 --- /dev/null +++ b/docs/data/material/components/selects/demos/controlled-open/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ControlledOpenSelect from './ControlledOpenSelect'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ControlledOpenSelect, { ClientProvider }); diff --git a/docs/data/material/components/selects/CustomizedSelects.tsx b/docs/data/material/components/selects/demos/customized/CustomizedSelects.tsx similarity index 98% rename from docs/data/material/components/selects/CustomizedSelects.tsx rename to docs/data/material/components/selects/demos/customized/CustomizedSelects.tsx index b184257ca42b24..ae45069dbc5baa 100644 --- a/docs/data/material/components/selects/CustomizedSelects.tsx +++ b/docs/data/material/components/selects/demos/customized/CustomizedSelects.tsx @@ -41,6 +41,7 @@ const BootstrapInput = styled(InputBase)(({ theme }) => ({ })); export default function CustomizedSelects() { + // @focus-start @padding 1 const textboxId = React.useId(); const selectId = React.useId(); const nativeId = React.useId(); @@ -87,4 +88,5 @@ export default function CustomizedSelects() { ); + // @focus-end } diff --git a/docs/data/material/components/selects/demos/customized/client.ts b/docs/data/material/components/selects/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/customized/index.ts b/docs/data/material/components/selects/demos/customized/index.ts new file mode 100644 index 00000000000000..9363d8dc402ba8 --- /dev/null +++ b/docs/data/material/components/selects/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedSelects from './CustomizedSelects'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedSelects, { ClientProvider }); diff --git a/docs/data/material/components/selects/DialogSelect.tsx b/docs/data/material/components/selects/demos/dialog/DialogSelect.tsx similarity index 95% rename from docs/data/material/components/selects/DialogSelect.tsx rename to docs/data/material/components/selects/demos/dialog/DialogSelect.tsx index 1b28ae0d519277..86971a6d455495 100644 --- a/docs/data/material/components/selects/DialogSelect.tsx +++ b/docs/data/material/components/selects/demos/dialog/DialogSelect.tsx @@ -9,9 +9,11 @@ import InputLabel from '@mui/material/InputLabel'; import OutlinedInput from '@mui/material/OutlinedInput'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import type { SelectChangeEvent } from '@mui/material/Select'; export default function DialogSelect() { + // @focus-start @padding 1 const nativeId = React.useId(); const selectId = React.useId(); const [open, setOpen] = React.useState(false); @@ -85,4 +87,5 @@ export default function DialogSelect() { ); + // @focus-end } diff --git a/docs/data/material/components/selects/demos/dialog/client.ts b/docs/data/material/components/selects/demos/dialog/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/dialog/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/dialog/index.ts b/docs/data/material/components/selects/demos/dialog/index.ts new file mode 100644 index 00000000000000..bdb3a35795d776 --- /dev/null +++ b/docs/data/material/components/selects/demos/dialog/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DialogSelect from './DialogSelect'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DialogSelect, { ClientProvider }); diff --git a/docs/data/material/components/selects/GroupedSelect.tsx b/docs/data/material/components/selects/demos/grouped/GroupedSelect.tsx similarity index 97% rename from docs/data/material/components/selects/GroupedSelect.tsx rename to docs/data/material/components/selects/demos/grouped/GroupedSelect.tsx index 4eff428d7fe755..33a6715057cb33 100644 --- a/docs/data/material/components/selects/GroupedSelect.tsx +++ b/docs/data/material/components/selects/demos/grouped/GroupedSelect.tsx @@ -6,6 +6,7 @@ import FormControl from '@mui/material/FormControl'; import Select from '@mui/material/Select'; export default function GroupedSelect() { + // @focus-start @padding 1 const nativeId = React.useId(); const id = React.useId(); return ( @@ -47,4 +48,5 @@ export default function GroupedSelect() { ); + // @focus-end } diff --git a/docs/data/material/components/selects/demos/grouped/client.ts b/docs/data/material/components/selects/demos/grouped/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/grouped/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/grouped/index.ts b/docs/data/material/components/selects/demos/grouped/index.ts new file mode 100644 index 00000000000000..ab9156180d8fb7 --- /dev/null +++ b/docs/data/material/components/selects/demos/grouped/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GroupedSelect from './GroupedSelect'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GroupedSelect, { ClientProvider }); diff --git a/docs/data/material/components/selects/SelectLabels.tsx b/docs/data/material/components/selects/demos/labels/SelectLabels.tsx similarity index 92% rename from docs/data/material/components/selects/SelectLabels.tsx rename to docs/data/material/components/selects/demos/labels/SelectLabels.tsx index e5ca89ea7dd93d..eb0658d7c526b3 100644 --- a/docs/data/material/components/selects/SelectLabels.tsx +++ b/docs/data/material/components/selects/demos/labels/SelectLabels.tsx @@ -3,9 +3,11 @@ import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormHelperText from '@mui/material/FormHelperText'; import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import type { SelectChangeEvent } from '@mui/material/Select'; export default function SelectLabels() { + // @focus-start @padding 1 const id = React.useId(); const noLabelId = React.useId(); const [age, setAge] = React.useState(''); @@ -58,4 +60,5 @@ export default function SelectLabels() { ); + // @focus-end } diff --git a/docs/data/material/components/selects/demos/labels/client.ts b/docs/data/material/components/selects/demos/labels/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/labels/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/labels/index.ts b/docs/data/material/components/selects/demos/labels/index.ts new file mode 100644 index 00000000000000..df6317e7fd2298 --- /dev/null +++ b/docs/data/material/components/selects/demos/labels/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SelectLabels from './SelectLabels'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SelectLabels, { ClientProvider }); diff --git a/docs/data/material/components/selects/MultipleSelectCheckmarks.tsx b/docs/data/material/components/selects/demos/multiple-checkmarks/MultipleSelectCheckmarks.tsx similarity index 93% rename from docs/data/material/components/selects/MultipleSelectCheckmarks.tsx rename to docs/data/material/components/selects/demos/multiple-checkmarks/MultipleSelectCheckmarks.tsx index 6ff1f7b844c82f..13ded4f24b5e8a 100644 --- a/docs/data/material/components/selects/MultipleSelectCheckmarks.tsx +++ b/docs/data/material/components/selects/demos/multiple-checkmarks/MultipleSelectCheckmarks.tsx @@ -4,7 +4,8 @@ import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; import ListItemText from '@mui/material/ListItemText'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import type { SelectChangeEvent } from '@mui/material/Select'; import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank'; import CheckBoxIcon from '@mui/icons-material/CheckBox'; @@ -35,6 +36,7 @@ const names = [ ]; export default function MultipleSelectCheckmarks() { + // @focus-start @padding 1 const [personName, setPersonName] = React.useState([]); const handleChange = (event: SelectChangeEvent) => { @@ -79,4 +81,5 @@ export default function MultipleSelectCheckmarks() { ); + // @focus-end } diff --git a/docs/data/material/components/selects/demos/multiple-checkmarks/client.ts b/docs/data/material/components/selects/demos/multiple-checkmarks/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/multiple-checkmarks/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/multiple-checkmarks/index.ts b/docs/data/material/components/selects/demos/multiple-checkmarks/index.ts new file mode 100644 index 00000000000000..c7d0c57e70bcbc --- /dev/null +++ b/docs/data/material/components/selects/demos/multiple-checkmarks/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MultipleSelectCheckmarks from './MultipleSelectCheckmarks'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MultipleSelectCheckmarks, { ClientProvider }); diff --git a/docs/data/material/components/selects/MultipleSelectChip.tsx b/docs/data/material/components/selects/demos/multiple-chip/MultipleSelectChip.tsx similarity index 90% rename from docs/data/material/components/selects/MultipleSelectChip.tsx rename to docs/data/material/components/selects/demos/multiple-chip/MultipleSelectChip.tsx index a41405f9215bc6..fefbddcec44dd9 100644 --- a/docs/data/material/components/selects/MultipleSelectChip.tsx +++ b/docs/data/material/components/selects/demos/multiple-chip/MultipleSelectChip.tsx @@ -1,11 +1,13 @@ import * as React from 'react'; -import { Theme, useTheme } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; +import type { Theme } from '@mui/material/styles'; import Box from '@mui/material/Box'; import OutlinedInput from '@mui/material/OutlinedInput'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import type { SelectChangeEvent } from '@mui/material/Select'; import Chip from '@mui/material/Chip'; const ITEM_HEIGHT = 48; @@ -43,6 +45,7 @@ function getStyles(name: string, personName: readonly string[], theme: Theme) { } export default function MultipleSelectChip() { + // @focus-start @padding 1 const theme = useTheme(); const [personName, setPersonName] = React.useState([]); @@ -89,4 +92,5 @@ export default function MultipleSelectChip() { ); + // @focus-end } diff --git a/docs/data/material/components/selects/demos/multiple-chip/client.ts b/docs/data/material/components/selects/demos/multiple-chip/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/multiple-chip/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/multiple-chip/index.ts b/docs/data/material/components/selects/demos/multiple-chip/index.ts new file mode 100644 index 00000000000000..2c900c26f46ba7 --- /dev/null +++ b/docs/data/material/components/selects/demos/multiple-chip/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MultipleSelectChip from './MultipleSelectChip'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MultipleSelectChip, { ClientProvider }); diff --git a/docs/data/material/components/selects/MultipleSelectNative.tsx b/docs/data/material/components/selects/demos/multiple-native/MultipleSelectNative.tsx similarity index 97% rename from docs/data/material/components/selects/MultipleSelectNative.tsx rename to docs/data/material/components/selects/demos/multiple-native/MultipleSelectNative.tsx index c3d217b37d5f94..a4cd7923e3582c 100644 --- a/docs/data/material/components/selects/MultipleSelectNative.tsx +++ b/docs/data/material/components/selects/demos/multiple-native/MultipleSelectNative.tsx @@ -17,6 +17,7 @@ const names = [ ]; export default function MultipleSelectNative() { + // @focus-start @padding 1 const id = React.useId(); const [personName, setPersonName] = React.useState([]); const handleChangeMultiple = (event: React.ChangeEvent) => { @@ -56,4 +57,5 @@ export default function MultipleSelectNative() { ); + // @focus-end } diff --git a/docs/data/material/components/selects/demos/multiple-native/client.ts b/docs/data/material/components/selects/demos/multiple-native/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/multiple-native/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/multiple-native/index.ts b/docs/data/material/components/selects/demos/multiple-native/index.ts new file mode 100644 index 00000000000000..c11aa03e6e011a --- /dev/null +++ b/docs/data/material/components/selects/demos/multiple-native/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MultipleSelectNative from './MultipleSelectNative'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MultipleSelectNative, { ClientProvider }); diff --git a/docs/data/material/components/selects/MultipleSelectPlaceholder.tsx b/docs/data/material/components/selects/demos/multiple-placeholder/MultipleSelectPlaceholder.tsx similarity index 89% rename from docs/data/material/components/selects/MultipleSelectPlaceholder.tsx rename to docs/data/material/components/selects/demos/multiple-placeholder/MultipleSelectPlaceholder.tsx index a98fbeac55b217..52757dffd8053b 100644 --- a/docs/data/material/components/selects/MultipleSelectPlaceholder.tsx +++ b/docs/data/material/components/selects/demos/multiple-placeholder/MultipleSelectPlaceholder.tsx @@ -1,9 +1,11 @@ import * as React from 'react'; -import { Theme, useTheme } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; +import type { Theme } from '@mui/material/styles'; import OutlinedInput from '@mui/material/OutlinedInput'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import type { SelectChangeEvent } from '@mui/material/Select'; const ITEM_HEIGHT = 48; const ITEM_PADDING_TOP = 8; @@ -40,6 +42,7 @@ function getStyles(name: string, personName: readonly string[], theme: Theme) { } export default function MultipleSelectPlaceholder() { + // @focus-start @padding 1 const theme = useTheme(); const [personName, setPersonName] = React.useState([]); @@ -88,4 +91,5 @@ export default function MultipleSelectPlaceholder() { ); + // @focus-end } diff --git a/docs/data/material/components/selects/demos/multiple-placeholder/client.ts b/docs/data/material/components/selects/demos/multiple-placeholder/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/multiple-placeholder/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/multiple-placeholder/index.ts b/docs/data/material/components/selects/demos/multiple-placeholder/index.ts new file mode 100644 index 00000000000000..233d7d668253a5 --- /dev/null +++ b/docs/data/material/components/selects/demos/multiple-placeholder/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MultipleSelectPlaceholder from './MultipleSelectPlaceholder'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MultipleSelectPlaceholder, { ClientProvider }); diff --git a/docs/data/material/components/selects/MultipleSelect.tsx b/docs/data/material/components/selects/demos/multiple/MultipleSelect.tsx similarity index 88% rename from docs/data/material/components/selects/MultipleSelect.tsx rename to docs/data/material/components/selects/demos/multiple/MultipleSelect.tsx index 3040a713c096d9..4818affc15ee1b 100644 --- a/docs/data/material/components/selects/MultipleSelect.tsx +++ b/docs/data/material/components/selects/demos/multiple/MultipleSelect.tsx @@ -1,10 +1,12 @@ import * as React from 'react'; -import { Theme, useTheme } from '@mui/material/styles'; +import { useTheme } from '@mui/material/styles'; +import type { Theme } from '@mui/material/styles'; import OutlinedInput from '@mui/material/OutlinedInput'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import type { SelectChangeEvent } from '@mui/material/Select'; const ITEM_HEIGHT = 48; const ITEM_PADDING_TOP = 8; @@ -41,6 +43,7 @@ function getStyles(name: string, personName: string[], theme: Theme) { } export default function MultipleSelect() { + // @focus-start @padding 1 const theme = useTheme(); const [personName, setPersonName] = React.useState([]); @@ -80,4 +83,5 @@ export default function MultipleSelect() { ); + // @focus-end } diff --git a/docs/data/material/components/selects/demos/multiple/client.ts b/docs/data/material/components/selects/demos/multiple/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/multiple/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/multiple/index.ts b/docs/data/material/components/selects/demos/multiple/index.ts new file mode 100644 index 00000000000000..263be9f423b4a4 --- /dev/null +++ b/docs/data/material/components/selects/demos/multiple/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MultipleSelect from './MultipleSelect'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MultipleSelect, { ClientProvider }); diff --git a/docs/data/material/components/selects/NativeSelectDemo.tsx b/docs/data/material/components/selects/demos/native-demo/NativeSelectDemo.tsx similarity index 94% rename from docs/data/material/components/selects/NativeSelectDemo.tsx rename to docs/data/material/components/selects/demos/native-demo/NativeSelectDemo.tsx index 8ffbec6206cc5b..2fcc3c5dbf3a6b 100644 --- a/docs/data/material/components/selects/NativeSelectDemo.tsx +++ b/docs/data/material/components/selects/demos/native-demo/NativeSelectDemo.tsx @@ -8,6 +8,7 @@ export default function NativeSelectDemo() { const id = React.useId(); return ( + {/* @focus-start */} Age @@ -24,6 +25,7 @@ export default function NativeSelectDemo() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/selects/demos/native-demo/client.ts b/docs/data/material/components/selects/demos/native-demo/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/native-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/native-demo/index.ts b/docs/data/material/components/selects/demos/native-demo/index.ts new file mode 100644 index 00000000000000..3fe7ad882f4349 --- /dev/null +++ b/docs/data/material/components/selects/demos/native-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import NativeSelectDemo from './NativeSelectDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, NativeSelectDemo, { ClientProvider }); diff --git a/docs/data/material/components/selects/SelectOtherProps.tsx b/docs/data/material/components/selects/demos/other-props/SelectOtherProps.tsx similarity index 95% rename from docs/data/material/components/selects/SelectOtherProps.tsx rename to docs/data/material/components/selects/demos/other-props/SelectOtherProps.tsx index 38720f7494f56b..5ab7220eaa4f42 100644 --- a/docs/data/material/components/selects/SelectOtherProps.tsx +++ b/docs/data/material/components/selects/demos/other-props/SelectOtherProps.tsx @@ -3,9 +3,11 @@ import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormHelperText from '@mui/material/FormHelperText'; import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import type { SelectChangeEvent } from '@mui/material/Select'; export default function SelectOtherProps() { + // @focus-start @padding 1 const [age, setAge] = React.useState(''); const handleChange = (event: SelectChangeEvent) => { @@ -90,4 +92,5 @@ export default function SelectOtherProps() { ); + // @focus-end } diff --git a/docs/data/material/components/selects/demos/other-props/client.ts b/docs/data/material/components/selects/demos/other-props/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/other-props/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/other-props/index.ts b/docs/data/material/components/selects/demos/other-props/index.ts new file mode 100644 index 00000000000000..9afcd7dfbbeebe --- /dev/null +++ b/docs/data/material/components/selects/demos/other-props/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SelectOtherProps from './SelectOtherProps'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SelectOtherProps, { ClientProvider }); diff --git a/docs/data/material/components/selects/SelectSmall.tsx b/docs/data/material/components/selects/demos/small/SelectSmall.tsx similarity index 85% rename from docs/data/material/components/selects/SelectSmall.tsx rename to docs/data/material/components/selects/demos/small/SelectSmall.tsx index 0e0f6c78b985bd..42927390340a0c 100644 --- a/docs/data/material/components/selects/SelectSmall.tsx +++ b/docs/data/material/components/selects/demos/small/SelectSmall.tsx @@ -2,9 +2,11 @@ import * as React from 'react'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import type { SelectChangeEvent } from '@mui/material/Select'; export default function SelectSmall() { + // @focus-start @padding 1 const [age, setAge] = React.useState(''); const handleChange = (event: SelectChangeEvent) => { @@ -30,4 +32,5 @@ export default function SelectSmall() { ); + // @focus-end } diff --git a/docs/data/material/components/selects/demos/small/client.ts b/docs/data/material/components/selects/demos/small/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/small/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/small/index.ts b/docs/data/material/components/selects/demos/small/index.ts new file mode 100644 index 00000000000000..c620a38c05cf76 --- /dev/null +++ b/docs/data/material/components/selects/demos/small/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SelectSmall from './SelectSmall'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SelectSmall, { ClientProvider }); diff --git a/docs/data/material/components/selects/SelectVariants.tsx b/docs/data/material/components/selects/demos/variants/SelectVariants.tsx similarity index 93% rename from docs/data/material/components/selects/SelectVariants.tsx rename to docs/data/material/components/selects/demos/variants/SelectVariants.tsx index 023429903898e6..fe9763b0311b3f 100644 --- a/docs/data/material/components/selects/SelectVariants.tsx +++ b/docs/data/material/components/selects/demos/variants/SelectVariants.tsx @@ -2,9 +2,11 @@ import * as React from 'react'; import InputLabel from '@mui/material/InputLabel'; import MenuItem from '@mui/material/MenuItem'; import FormControl from '@mui/material/FormControl'; -import Select, { SelectChangeEvent } from '@mui/material/Select'; +import Select from '@mui/material/Select'; +import type { SelectChangeEvent } from '@mui/material/Select'; export default function SelectVariants() { + // @focus-start @padding 1 const [age, setAge] = React.useState(''); const handleChange = (event: SelectChangeEvent) => { @@ -64,4 +66,5 @@ export default function SelectVariants() { ); + // @focus-end } diff --git a/docs/data/material/components/selects/demos/variants/client.ts b/docs/data/material/components/selects/demos/variants/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/selects/demos/variants/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/selects/demos/variants/index.ts b/docs/data/material/components/selects/demos/variants/index.ts new file mode 100644 index 00000000000000..5c682f5c8e02cf --- /dev/null +++ b/docs/data/material/components/selects/demos/variants/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SelectVariants from './SelectVariants'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SelectVariants, { ClientProvider }); diff --git a/docs/data/material/components/selects/selects.md b/docs/data/material/components/selects/selects.md index c7f4de1697f402..421706e3071e73 100644 --- a/docs/data/material/components/selects/selects.md +++ b/docs/data/material/components/selects/selects.md @@ -18,7 +18,7 @@ githubSource: packages/mui-material/src/Select Menus are positioned under their emitting elements, unless they are close to the bottom of the viewport. -{{"demo": "BasicSelect.js"}} +{{"component": "file://./demos/basic/index.ts"}} ## Advanced features @@ -39,7 +39,7 @@ Unlike input components, the `placeholder` prop is not available in Select. To a ### Variants -{{"demo": "SelectVariants.js"}} +{{"component": "file://./demos/variants/index.ts"}} :::warning Note that when using FormControl with the outlined variant of the Select, you need to provide a label in two places: in the InputLabel component and in the `label` prop of the Select component (see the above demo). This is needed for the label floating animation to work correctly. @@ -49,26 +49,26 @@ Note that when using FormControl with the outlined variant of the Select, you ne Select always needs an accessible name. This can come from an associated visible label, such as an `InputLabel` linked to the `Select` with `labelId` or from adding an `aria-label` prop to the input element props (`inputProps`). If more information is needed, provide a helper text element and link it to the `Select` using `aria-describedby`. -{{"demo": "SelectLabels.js"}} +{{"component": "file://./demos/labels/index.ts"}} ### Auto width -{{"demo": "SelectAutoWidth.js"}} +{{"component": "file://./demos/auto-width/index.ts"}} ### Small Size -{{"demo": "SelectSmall.js"}} +{{"component": "file://./demos/small/index.ts"}} ### Other props -{{"demo": "SelectOtherProps.js"}} +{{"component": "file://./demos/other-props/index.ts"}} ## Native select As the user experience can be improved on mobile using the native select of the platform, we allow such pattern. -{{"demo": "NativeSelectDemo.js"}} +{{"component": "file://./demos/native-demo/index.ts"}} ## TextField @@ -84,7 +84,7 @@ The first step is to style the `InputBase` component. Once it's styled, you can either use it directly as a text field or provide it to the select `input` prop to have a `select` field. Notice that the `"standard"` variant is easier to customize, since it does not wrap the contents in a `fieldset`/`legend` markup. -{{"demo": "CustomizedSelects.js"}} +{{"component": "file://./demos/customized/index.ts"}} 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/select). @@ -97,25 +97,25 @@ Like with the single selection, you can pull out the new value by accessing `eve ### Default -{{"demo": "MultipleSelect.js"}} +{{"component": "file://./demos/multiple/index.ts"}} ### Selection indicators This example demonstrates how icons are used to indicate the selection state of each item in the listbox. -{{"demo": "MultipleSelectCheckmarks.js"}} +{{"component": "file://./demos/multiple-checkmarks/index.ts"}} ### Chip -{{"demo": "MultipleSelectChip.js"}} +{{"component": "file://./demos/multiple-chip/index.ts"}} ### Placeholder -{{"demo": "MultipleSelectPlaceholder.js"}} +{{"component": "file://./demos/multiple-placeholder/index.ts"}} ### Native -{{"demo": "MultipleSelectNative.js"}} +{{"component": "file://./demos/multiple-native/index.ts"}} ## Controlling the open state @@ -129,19 +129,19 @@ You can control the open state of the select with the `open` prop. Alternatively Learn more about controlled and uncontrolled components in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: -{{"demo": "ControlledOpenSelect.js"}} +{{"component": "file://./demos/controlled-open/index.ts"}} ## With a dialog While it's discouraged by the Material Design guidelines, you can use a select inside a dialog. -{{"demo": "DialogSelect.js"}} +{{"component": "file://./demos/dialog/index.ts"}} ## Grouping Display categories with the `ListSubheader` component or the native `` element. -{{"demo": "GroupedSelect.js"}} +{{"component": "file://./demos/grouped/index.ts"}} ## Accessibility diff --git a/docs/data/material/components/skeleton/Animations.js b/docs/data/material/components/skeleton/Animations.js deleted file mode 100644 index 8ad3465e7493c2..00000000000000 --- a/docs/data/material/components/skeleton/Animations.js +++ /dev/null @@ -1,12 +0,0 @@ -import Box from '@mui/material/Box'; -import Skeleton from '@mui/material/Skeleton'; - -export default function Animations() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/skeleton/Animations.tsx.preview b/docs/data/material/components/skeleton/Animations.tsx.preview deleted file mode 100644 index 182e0436a1c966..00000000000000 --- a/docs/data/material/components/skeleton/Animations.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/skeleton/Facebook.js b/docs/data/material/components/skeleton/Facebook.js deleted file mode 100644 index 3d32456125fa77..00000000000000 --- a/docs/data/material/components/skeleton/Facebook.js +++ /dev/null @@ -1,95 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Card from '@mui/material/Card'; -import CardHeader from '@mui/material/CardHeader'; -import CardContent from '@mui/material/CardContent'; -import CardMedia from '@mui/material/CardMedia'; -import Avatar from '@mui/material/Avatar'; -import Typography from '@mui/material/Typography'; -import IconButton from '@mui/material/IconButton'; -import MoreVertIcon from '@mui/icons-material/MoreVert'; -import Skeleton from '@mui/material/Skeleton'; - -function Media(props) { - const { loading = false } = props; - - return ( - - - ) : ( - - ) - } - action={ - loading ? null : ( - - - - ) - } - title={ - loading ? ( - - ) : ( - 'Ted' - ) - } - subheader={ - loading ? ( - - ) : ( - '5 hours ago' - ) - } - /> - {loading ? ( - - ) : ( - - )} - - {loading ? ( - - - - - ) : ( - - { - "Why First Minister of Scotland Nicola Sturgeon thinks GDP is the wrong measure of a country's success:" - } - - )} - - - ); -} - -Media.propTypes = { - loading: PropTypes.bool, -}; - -export default function Facebook() { - return ( -
    - - -
    - ); -} diff --git a/docs/data/material/components/skeleton/Facebook.tsx.preview b/docs/data/material/components/skeleton/Facebook.tsx.preview deleted file mode 100644 index 98c81533a5154d..00000000000000 --- a/docs/data/material/components/skeleton/Facebook.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/skeleton/SkeletonChildren.js b/docs/data/material/components/skeleton/SkeletonChildren.js deleted file mode 100644 index 4e95d3f09d3e1e..00000000000000 --- a/docs/data/material/components/skeleton/SkeletonChildren.js +++ /dev/null @@ -1,67 +0,0 @@ -import { styled } from '@mui/material/styles'; -import PropTypes from 'prop-types'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Avatar from '@mui/material/Avatar'; -import Grid from '@mui/material/Grid'; -import Skeleton from '@mui/material/Skeleton'; - -const Image = styled('img')({ - width: '100%', -}); - -function SkeletonChildrenDemo(props) { - const { loading = false } = props; - - return ( -
    - - - {loading ? ( - - - - ) : ( - - )} - - - {loading ? ( - - . - - ) : ( - Ted - )} - - - {loading ? ( - -
    - - ) : ( - - )} -
    - ); -} - -SkeletonChildrenDemo.propTypes = { - loading: PropTypes.bool, -}; - -export default function SkeletonChildren() { - return ( - - - - - - - - - ); -} diff --git a/docs/data/material/components/skeleton/SkeletonChildren.tsx.preview b/docs/data/material/components/skeleton/SkeletonChildren.tsx.preview deleted file mode 100644 index 0463b633476667..00000000000000 --- a/docs/data/material/components/skeleton/SkeletonChildren.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/skeleton/SkeletonColor.js b/docs/data/material/components/skeleton/SkeletonColor.js deleted file mode 100644 index 3d1abfa95cddd8..00000000000000 --- a/docs/data/material/components/skeleton/SkeletonColor.js +++ /dev/null @@ -1,23 +0,0 @@ -import Skeleton from '@mui/material/Skeleton'; -import Box from '@mui/material/Box'; - -export default function SkeletonColor() { - return ( - - - - ); -} diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview b/docs/data/material/components/skeleton/SkeletonColor.tsx.preview deleted file mode 100644 index 47ff5795e47d3c..00000000000000 --- a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/skeleton/SkeletonTypography.js b/docs/data/material/components/skeleton/SkeletonTypography.js deleted file mode 100644 index 4baf0ecb5943c9..00000000000000 --- a/docs/data/material/components/skeleton/SkeletonTypography.js +++ /dev/null @@ -1,37 +0,0 @@ -import Typography from '@mui/material/Typography'; -import PropTypes from 'prop-types'; -import Skeleton from '@mui/material/Skeleton'; -import Grid from '@mui/material/Grid'; - -const variants = ['h1', 'h3', 'body1', 'caption']; - -function TypographyDemo(props) { - const { loading = false } = props; - - return ( -
    - {variants.map((variant) => ( - - {loading ? : variant} - - ))} -
    - ); -} - -TypographyDemo.propTypes = { - loading: PropTypes.bool, -}; - -export default function SkeletonTypography() { - return ( - - - - - - - - - ); -} diff --git a/docs/data/material/components/skeleton/SkeletonTypography.tsx.preview b/docs/data/material/components/skeleton/SkeletonTypography.tsx.preview deleted file mode 100644 index 06037c529af923..00000000000000 --- a/docs/data/material/components/skeleton/SkeletonTypography.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/skeleton/Variants.js b/docs/data/material/components/skeleton/Variants.js deleted file mode 100644 index 1ba6576f1aaec2..00000000000000 --- a/docs/data/material/components/skeleton/Variants.js +++ /dev/null @@ -1,15 +0,0 @@ -import Skeleton from '@mui/material/Skeleton'; -import Stack from '@mui/material/Stack'; - -export default function Variants() { - return ( - - {/* For variant="text", adjust the height via font-size */} - - {/* For other variants, adjust the size with `width` and `height` */} - - - - - ); -} diff --git a/docs/data/material/components/skeleton/Variants.tsx b/docs/data/material/components/skeleton/Variants.tsx deleted file mode 100644 index 5d3af8094b8851..00000000000000 --- a/docs/data/material/components/skeleton/Variants.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import Skeleton from '@mui/material/Skeleton'; -import Stack from '@mui/material/Stack'; - -export default function Variants() { - return ( - - {/* For variant="text", adjust the height via font-size */} - - - {/* For other variants, adjust the size with `width` and `height` */} - - - - - ); -} diff --git a/docs/data/material/components/skeleton/Variants.tsx.preview b/docs/data/material/components/skeleton/Variants.tsx.preview deleted file mode 100644 index 8b1bb76eaa17b2..00000000000000 --- a/docs/data/material/components/skeleton/Variants.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ -{/* For variant="text", adjust the height via font-size */} - - -{/* For other variants, adjust the size with `width` and `height` */} - - - \ No newline at end of file diff --git a/docs/data/material/components/skeleton/YouTube.js b/docs/data/material/components/skeleton/YouTube.js deleted file mode 100644 index 83da2af1317673..00000000000000 --- a/docs/data/material/components/skeleton/YouTube.js +++ /dev/null @@ -1,85 +0,0 @@ -import Grid from '@mui/material/Grid'; -import PropTypes from 'prop-types'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Skeleton from '@mui/material/Skeleton'; - -const data = [ - { - src: 'https://i.ytimg.com/vi/pLqipJNItIo/hqdefault.jpg?sqp=-oaymwEYCNIBEHZIVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLBkklsyaw9FxDmMKapyBYCn9tbPNQ', - title: 'Don Diablo @ Tomorrowland Main Stage 2019 | Official…', - channel: 'Don Diablo', - views: '396k views', - createdAt: 'a week ago', - }, - { - src: 'https://i.ytimg.com/vi/_Uu12zY01ts/hqdefault.jpg?sqp=-oaymwEZCPYBEIoBSFXyq4qpAwsIARUAAIhCGAFwAQ==&rs=AOn4CLCpX6Jan2rxrCAZxJYDXppTP4MoQA', - title: 'Queen - Greatest Hits', - channel: 'Queen Official', - views: '40M views', - createdAt: '3 years ago', - }, - { - src: 'https://i.ytimg.com/vi/kkLk2XWMBf8/hqdefault.jpg?sqp=-oaymwEYCNIBEHZIVfKriqkDCwgBFQAAiEIYAXAB&rs=AOn4CLB4GZTFu1Ju2EPPPXnhMZtFVvYBaw', - title: 'Calvin Harris, Sam Smith - Promises (Official Video)', - channel: 'Calvin Harris', - views: '130M views', - createdAt: '10 months ago', - }, -]; - -function Media(props) { - const { loading = false } = props; - - return ( - - {(loading ? Array.from(new Array(3)) : data).map((item, index) => ( - - {item ? ( - {item.title} - ) : ( - - )} - {item ? ( - - - {item.title} - - - {item.channel} - - - {`${item.views} • ${item.createdAt}`} - - - ) : ( - - - - - )} - - ))} - - ); -} - -Media.propTypes = { - loading: PropTypes.bool, -}; - -export default function YouTube() { - return ( - - - - - ); -} diff --git a/docs/data/material/components/skeleton/YouTube.tsx.preview b/docs/data/material/components/skeleton/YouTube.tsx.preview deleted file mode 100644 index 98c81533a5154d..00000000000000 --- a/docs/data/material/components/skeleton/YouTube.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/skeleton/Animations.tsx b/docs/data/material/components/skeleton/demos/animations/Animations.tsx similarity index 84% rename from docs/data/material/components/skeleton/Animations.tsx rename to docs/data/material/components/skeleton/demos/animations/Animations.tsx index 8ad3465e7493c2..33ab8e02dad07e 100644 --- a/docs/data/material/components/skeleton/Animations.tsx +++ b/docs/data/material/components/skeleton/demos/animations/Animations.tsx @@ -4,9 +4,11 @@ import Skeleton from '@mui/material/Skeleton'; export default function Animations() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/skeleton/demos/animations/client.ts b/docs/data/material/components/skeleton/demos/animations/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/skeleton/demos/animations/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/skeleton/demos/animations/index.ts b/docs/data/material/components/skeleton/demos/animations/index.ts new file mode 100644 index 00000000000000..318d340b0f1414 --- /dev/null +++ b/docs/data/material/components/skeleton/demos/animations/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Animations from './Animations'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Animations, { ClientProvider }); diff --git a/docs/data/material/components/skeleton/SkeletonChildren.tsx b/docs/data/material/components/skeleton/demos/children/SkeletonChildren.tsx similarity index 97% rename from docs/data/material/components/skeleton/SkeletonChildren.tsx rename to docs/data/material/components/skeleton/demos/children/SkeletonChildren.tsx index 166f2082e57a8c..4c27d820b1acf1 100644 --- a/docs/data/material/components/skeleton/SkeletonChildren.tsx +++ b/docs/data/material/components/skeleton/demos/children/SkeletonChildren.tsx @@ -50,6 +50,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) { export default function SkeletonChildren() { return ( + // @focus-start @padding 2 @@ -58,5 +59,6 @@ export default function SkeletonChildren() { + // @focus-end ); } diff --git a/docs/data/material/components/skeleton/demos/children/client.ts b/docs/data/material/components/skeleton/demos/children/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/skeleton/demos/children/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/skeleton/demos/children/index.ts b/docs/data/material/components/skeleton/demos/children/index.ts new file mode 100644 index 00000000000000..342ebb0e373829 --- /dev/null +++ b/docs/data/material/components/skeleton/demos/children/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SkeletonChildren from './SkeletonChildren'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SkeletonChildren, { ClientProvider }); diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx b/docs/data/material/components/skeleton/demos/color/SkeletonColor.tsx similarity index 89% rename from docs/data/material/components/skeleton/SkeletonColor.tsx rename to docs/data/material/components/skeleton/demos/color/SkeletonColor.tsx index 3d1abfa95cddd8..ae1329e27e9fcb 100644 --- a/docs/data/material/components/skeleton/SkeletonColor.tsx +++ b/docs/data/material/components/skeleton/demos/color/SkeletonColor.tsx @@ -12,12 +12,14 @@ export default function SkeletonColor() { justifyContent: 'center', }} > + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/skeleton/demos/color/client.ts b/docs/data/material/components/skeleton/demos/color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/skeleton/demos/color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/skeleton/demos/color/index.ts b/docs/data/material/components/skeleton/demos/color/index.ts new file mode 100644 index 00000000000000..3d63281ecb3a4e --- /dev/null +++ b/docs/data/material/components/skeleton/demos/color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SkeletonColor from './SkeletonColor'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SkeletonColor, { ClientProvider }); diff --git a/docs/data/material/components/skeleton/Facebook.tsx b/docs/data/material/components/skeleton/demos/facebook/Facebook.tsx similarity index 98% rename from docs/data/material/components/skeleton/Facebook.tsx rename to docs/data/material/components/skeleton/demos/facebook/Facebook.tsx index dd5ff4e4c68eb1..9dd03e46136b43 100644 --- a/docs/data/material/components/skeleton/Facebook.tsx +++ b/docs/data/material/components/skeleton/demos/facebook/Facebook.tsx @@ -87,8 +87,10 @@ function Media(props: MediaProps) { export default function Facebook() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/skeleton/demos/facebook/client.ts b/docs/data/material/components/skeleton/demos/facebook/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/skeleton/demos/facebook/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/skeleton/demos/facebook/index.ts b/docs/data/material/components/skeleton/demos/facebook/index.ts new file mode 100644 index 00000000000000..3fb8a664cee215 --- /dev/null +++ b/docs/data/material/components/skeleton/demos/facebook/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Facebook from './Facebook'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Facebook, { ClientProvider }); diff --git a/docs/data/material/components/skeleton/SkeletonTypography.tsx b/docs/data/material/components/skeleton/demos/typography/SkeletonTypography.tsx similarity index 82% rename from docs/data/material/components/skeleton/SkeletonTypography.tsx rename to docs/data/material/components/skeleton/demos/typography/SkeletonTypography.tsx index f6b9b1bba8748b..97c84148e25cda 100644 --- a/docs/data/material/components/skeleton/SkeletonTypography.tsx +++ b/docs/data/material/components/skeleton/demos/typography/SkeletonTypography.tsx @@ -1,4 +1,5 @@ -import Typography, { TypographyProps } from '@mui/material/Typography'; +import Typography from '@mui/material/Typography'; +import type { TypographyProps } from '@mui/material/Typography'; import Skeleton from '@mui/material/Skeleton'; import Grid from '@mui/material/Grid'; @@ -25,6 +26,7 @@ function TypographyDemo(props: { loading?: boolean }) { export default function SkeletonTypography() { return ( + // @focus-start @padding 2 @@ -33,5 +35,6 @@ export default function SkeletonTypography() { + // @focus-end ); } diff --git a/docs/data/material/components/skeleton/demos/typography/client.ts b/docs/data/material/components/skeleton/demos/typography/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/skeleton/demos/typography/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/skeleton/demos/typography/index.ts b/docs/data/material/components/skeleton/demos/typography/index.ts new file mode 100644 index 00000000000000..f0c34bed8fc95f --- /dev/null +++ b/docs/data/material/components/skeleton/demos/typography/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SkeletonTypography from './SkeletonTypography'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SkeletonTypography, { ClientProvider }); diff --git a/docs/data/material/components/skeleton/demos/variants/Variants.tsx b/docs/data/material/components/skeleton/demos/variants/Variants.tsx new file mode 100644 index 00000000000000..6fc4ac14286837 --- /dev/null +++ b/docs/data/material/components/skeleton/demos/variants/Variants.tsx @@ -0,0 +1,18 @@ +import Skeleton from '@mui/material/Skeleton'; +import Stack from '@mui/material/Stack'; + +export default function Variants() { + return ( + + {/* @focus-start */} + {/* For variant="text", adjust the height via font-size */} + + + {/* For other variants, adjust the size with `width` and `height` */} + + + + {/* @focus-end */} + + ); +} diff --git a/docs/data/material/components/skeleton/demos/variants/client.ts b/docs/data/material/components/skeleton/demos/variants/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/skeleton/demos/variants/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/skeleton/demos/variants/index.ts b/docs/data/material/components/skeleton/demos/variants/index.ts new file mode 100644 index 00000000000000..cec70dd15986b5 --- /dev/null +++ b/docs/data/material/components/skeleton/demos/variants/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Variants from './Variants'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Variants, { ClientProvider }); diff --git a/docs/data/material/components/skeleton/YouTube.tsx b/docs/data/material/components/skeleton/demos/you-tube/YouTube.tsx similarity index 97% rename from docs/data/material/components/skeleton/YouTube.tsx rename to docs/data/material/components/skeleton/demos/you-tube/YouTube.tsx index ac2edaed9dad57..09f5309e26e0cf 100644 --- a/docs/data/material/components/skeleton/YouTube.tsx +++ b/docs/data/material/components/skeleton/demos/you-tube/YouTube.tsx @@ -77,8 +77,10 @@ function Media(props: MediaProps) { export default function YouTube() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/skeleton/demos/you-tube/client.ts b/docs/data/material/components/skeleton/demos/you-tube/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/skeleton/demos/you-tube/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/skeleton/demos/you-tube/index.ts b/docs/data/material/components/skeleton/demos/you-tube/index.ts new file mode 100644 index 00000000000000..ff0b8a71b04feb --- /dev/null +++ b/docs/data/material/components/skeleton/demos/you-tube/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import YouTube from './YouTube'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, YouTube, { ClientProvider }); diff --git a/docs/data/material/components/skeleton/skeleton.md b/docs/data/material/components/skeleton/skeleton.md index b5c90610facd79..f03db74f2e5371 100644 --- a/docs/data/material/components/skeleton/skeleton.md +++ b/docs/data/material/components/skeleton/skeleton.md @@ -43,21 +43,21 @@ The component supports 4 shape variants: - `text` (default): represents a single line of text (you can adjust the height via font size). - `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the size. -{{"demo": "Variants.js"}} +{{"component": "file://./demos/variants/index.ts"}} ## Animations By default, the skeleton pulsates, but you can change the animation to a wave or disable it entirely. -{{"demo": "Animations.js"}} +{{"component": "file://./demos/animations/index.ts"}} ### Pulsate example -{{"demo": "YouTube.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/you-tube/index.ts", "collapseToEmpty": true}} ### Wave example -{{"demo": "Facebook.js", "defaultCodeOpen": false, "bg": true}} +{{"component": "file://./demos/facebook/index.ts", "collapseToEmpty": true, "bg": true}} ## Inferring dimensions @@ -69,7 +69,7 @@ It works well when it comes to typography as its height is set using `em` units. {loading ? : 'h1'} ``` -{{"demo": "SkeletonTypography.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/typography/index.ts", "collapseToEmpty": true}} Use `variant="text"` when inferring dimensions from typography, and customize the border radius with the `sx` prop if you need a different shape while preserving typography-based sizing. @@ -87,14 +87,14 @@ loading ? ( ); ``` -{{"demo": "SkeletonChildren.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/children/index.ts", "collapseToEmpty": true}} ## Color The color of the component can be customized by changing its `background-color` CSS property. This is especially useful when on a black background (as the skeleton will otherwise be invisible). -{{"demo": "SkeletonColor.js", "bg": "inline"}} +{{"component": "file://./demos/color/index.ts", "bg": "inline"}} ## Accessibility diff --git a/docs/data/material/components/slider/ColorSlider.js b/docs/data/material/components/slider/ColorSlider.js deleted file mode 100644 index dae7fd90359e5a..00000000000000 --- a/docs/data/material/components/slider/ColorSlider.js +++ /dev/null @@ -1,19 +0,0 @@ -import Box from '@mui/material/Box'; -import Slider from '@mui/material/Slider'; - -function valuetext(value) { - return `${value}°C`; -} - -export default function ColorSlider() { - return ( - - - - ); -} diff --git a/docs/data/material/components/slider/ColorSlider.tsx.preview b/docs/data/material/components/slider/ColorSlider.tsx.preview deleted file mode 100644 index b7b178746431e4..00000000000000 --- a/docs/data/material/components/slider/ColorSlider.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/slider/ContinuousSlider.js b/docs/data/material/components/slider/ContinuousSlider.js deleted file mode 100644 index ffaeea46d1e1b3..00000000000000 --- a/docs/data/material/components/slider/ContinuousSlider.js +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import Slider from '@mui/material/Slider'; -import VolumeDown from '@mui/icons-material/VolumeDown'; -import VolumeUp from '@mui/icons-material/VolumeUp'; - -export default function ContinuousSlider() { - const [value, setValue] = React.useState(30); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - - ); -} diff --git a/docs/data/material/components/slider/ContinuousSlider.tsx.preview b/docs/data/material/components/slider/ContinuousSlider.tsx.preview deleted file mode 100644 index 7a74aebbc99028..00000000000000 --- a/docs/data/material/components/slider/ContinuousSlider.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/slider/CustomMarks.js b/docs/data/material/components/slider/CustomMarks.js deleted file mode 100644 index f32f5f9c3e2075..00000000000000 --- a/docs/data/material/components/slider/CustomMarks.js +++ /dev/null @@ -1,54 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Slider from '@mui/material/Slider'; -import Typography from '@mui/material/Typography'; - -const MAX = 100; -const MIN = 0; -const marks = [ - { - value: MIN, - label: '', - }, - { - value: MAX, - label: '', - }, -]; - -export default function CustomMarks() { - const [val, setVal] = React.useState(MIN); - const handleChange = (_, newValue) => { - setVal(newValue); - }; - - return ( - - - - setVal(MIN)} - sx={{ cursor: 'pointer' }} - > - {MIN} min - - setVal(MAX)} - sx={{ cursor: 'pointer' }} - > - {MAX} max - - - - ); -} diff --git a/docs/data/material/components/slider/CustomizedSlider.js b/docs/data/material/components/slider/CustomizedSlider.js deleted file mode 100644 index c3292d12ff1419..00000000000000 --- a/docs/data/material/components/slider/CustomizedSlider.js +++ /dev/null @@ -1,199 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Slider, { SliderThumb } from '@mui/material/Slider'; -import { styled } from '@mui/material/styles'; -import Typography from '@mui/material/Typography'; -import Tooltip from '@mui/material/Tooltip'; -import Box from '@mui/material/Box'; - -function ValueLabelComponent(props) { - const { children, value } = props; - - return ( - - {children} - - ); -} - -ValueLabelComponent.propTypes = { - children: PropTypes.element.isRequired, - value: PropTypes.node, -}; - -const iOSBoxShadow = - '0 3px 1px rgba(0,0,0,0.1),0 4px 8px rgba(0,0,0,0.13),0 0 0 1px rgba(0,0,0,0.02)'; - -const IOSSlider = styled(Slider)(({ theme }) => ({ - color: '#007bff', - height: 5, - padding: '15px 0', - '& .MuiSlider-thumb': { - height: 20, - width: 20, - backgroundColor: '#fff', - boxShadow: '0 0 2px 0px rgba(0, 0, 0, 0.1)', - '&:focus, &:hover, &.Mui-active': { - boxShadow: '0px 0px 3px 1px rgba(0, 0, 0, 0.1)', - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - boxShadow: iOSBoxShadow, - }, - }, - '&:before': { - boxShadow: - '0px 0px 1px 0px rgba(0,0,0,0.2), 0px 0px 0px 0px rgba(0,0,0,0.14), 0px 0px 1px 0px rgba(0,0,0,0.12)', - }, - }, - '& .MuiSlider-valueLabel': { - fontSize: 12, - fontWeight: 'normal', - top: -6, - backgroundColor: 'unset', - color: theme.palette.text.primary, - '&::before': { - display: 'none', - }, - '& *': { - background: 'transparent', - color: '#000', - ...theme.applyStyles('dark', { - color: '#fff', - }), - }, - }, - '& .MuiSlider-track': { - border: 'none', - height: 5, - }, - '& .MuiSlider-rail': { - opacity: 0.5, - boxShadow: 'inset 0px 0px 4px -2px #000', - backgroundColor: '#d0d0d0', - }, - ...theme.applyStyles('dark', { - color: '#0a84ff', - }), -})); - -const PrettoSlider = styled(Slider)({ - color: '#52af77', - height: 8, - '& .MuiSlider-track': { - border: 'none', - }, - '& .MuiSlider-thumb': { - height: 24, - width: 24, - backgroundColor: '#fff', - border: '2px solid currentColor', - '&:focus, &:hover, &.Mui-active, &.Mui-focusVisible': { - boxShadow: 'inherit', - }, - '&::before': { - display: 'none', - }, - }, - '& .MuiSlider-valueLabel': { - lineHeight: 1.2, - fontSize: 12, - background: 'unset', - padding: 0, - width: 32, - height: 32, - borderRadius: '50% 50% 50% 0', - backgroundColor: '#52af77', - transformOrigin: 'bottom left', - transform: 'translate(50%, -100%) rotate(-45deg) scale(0)', - '&::before': { display: 'none' }, - '&.MuiSlider-valueLabelOpen': { - transform: 'translate(50%, -100%) rotate(-45deg) scale(1)', - }, - '& > *': { - transform: 'rotate(45deg)', - }, - }, -}); - -const AirbnbSlider = styled(Slider)(({ theme }) => ({ - color: '#3a8589', - height: 3, - padding: '13px 0', - '& .MuiSlider-thumb': { - height: 27, - width: 27, - backgroundColor: '#fff', - border: '1px solid currentColor', - '&:hover': { - boxShadow: '0 0 0 8px rgba(58, 133, 137, 0.16)', - }, - '& .airbnb-bar': { - height: 9, - width: 1, - backgroundColor: 'currentColor', - marginLeft: 1, - marginRight: 1, - }, - }, - '& .MuiSlider-track': { - height: 3, - }, - '& .MuiSlider-rail': { - color: '#d8d8d8', - opacity: 1, - height: 3, - ...theme.applyStyles('dark', { - color: '#bfbfbf', - opacity: undefined, - }), - }, -})); - -function AirbnbThumbComponent(props) { - const { children, ...other } = props; - return ( - - {children} - - - - - ); -} - -AirbnbThumbComponent.propTypes = { - children: PropTypes.node, -}; - -export default function CustomizedSlider() { - return ( - - iOS - - - pretto.fr - - - Tooltip value label - - - Airbnb - (index === 0 ? 'Minimum price' : 'Maximum price')} - defaultValue={[20, 40]} - /> - - ); -} diff --git a/docs/data/material/components/slider/DiscreteSlider.js b/docs/data/material/components/slider/DiscreteSlider.js deleted file mode 100644 index 9b9970a3ab01aa..00000000000000 --- a/docs/data/material/components/slider/DiscreteSlider.js +++ /dev/null @@ -1,25 +0,0 @@ -import Box from '@mui/material/Box'; -import Slider from '@mui/material/Slider'; - -function valuetext(value) { - return `${value}°C`; -} - -export default function DiscreteSlider() { - return ( - - - - - ); -} diff --git a/docs/data/material/components/slider/DiscreteSlider.tsx.preview b/docs/data/material/components/slider/DiscreteSlider.tsx.preview deleted file mode 100644 index 44207ee5458b9e..00000000000000 --- a/docs/data/material/components/slider/DiscreteSlider.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/slider/DiscreteSliderLabel.js b/docs/data/material/components/slider/DiscreteSliderLabel.js deleted file mode 100644 index 78324e4faec0e7..00000000000000 --- a/docs/data/material/components/slider/DiscreteSliderLabel.js +++ /dev/null @@ -1,40 +0,0 @@ -import Box from '@mui/material/Box'; -import Slider from '@mui/material/Slider'; - -const marks = [ - { - value: 0, - label: '0°C', - }, - { - value: 20, - label: '20°C', - }, - { - value: 37, - label: '37°C', - }, - { - value: 100, - label: '100°C', - }, -]; - -function valuetext(value) { - return `${value}°C`; -} - -export default function DiscreteSliderLabel() { - return ( - - - - ); -} diff --git a/docs/data/material/components/slider/DiscreteSliderLabel.tsx.preview b/docs/data/material/components/slider/DiscreteSliderLabel.tsx.preview deleted file mode 100644 index a087f58db02bd7..00000000000000 --- a/docs/data/material/components/slider/DiscreteSliderLabel.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/slider/DiscreteSliderMarks.js b/docs/data/material/components/slider/DiscreteSliderMarks.js deleted file mode 100644 index 46b6ca397b9e91..00000000000000 --- a/docs/data/material/components/slider/DiscreteSliderMarks.js +++ /dev/null @@ -1,40 +0,0 @@ -import Box from '@mui/material/Box'; -import Slider from '@mui/material/Slider'; - -const marks = [ - { - value: 0, - label: '0°C', - }, - { - value: 20, - label: '20°C', - }, - { - value: 37, - label: '37°C', - }, - { - value: 100, - label: '100°C', - }, -]; - -function valuetext(value) { - return `${value}°C`; -} - -export default function DiscreteSliderMarks() { - return ( - - - - ); -} diff --git a/docs/data/material/components/slider/DiscreteSliderMarks.tsx.preview b/docs/data/material/components/slider/DiscreteSliderMarks.tsx.preview deleted file mode 100644 index e2a243d029e4c5..00000000000000 --- a/docs/data/material/components/slider/DiscreteSliderMarks.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/slider/DiscreteSliderSteps.js b/docs/data/material/components/slider/DiscreteSliderSteps.js deleted file mode 100644 index 4809b0601f25a5..00000000000000 --- a/docs/data/material/components/slider/DiscreteSliderSteps.js +++ /dev/null @@ -1,23 +0,0 @@ -import Box from '@mui/material/Box'; -import Slider from '@mui/material/Slider'; - -function valuetext(value) { - return `${value}°C`; -} - -export default function DiscreteSliderSteps() { - return ( - - - - ); -} diff --git a/docs/data/material/components/slider/DiscreteSliderSteps.tsx.preview b/docs/data/material/components/slider/DiscreteSliderSteps.tsx.preview deleted file mode 100644 index 2c1a1ca41eeeda..00000000000000 --- a/docs/data/material/components/slider/DiscreteSliderSteps.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/slider/DiscreteSliderValues.js b/docs/data/material/components/slider/DiscreteSliderValues.js deleted file mode 100644 index 8537e6d63d0347..00000000000000 --- a/docs/data/material/components/slider/DiscreteSliderValues.js +++ /dev/null @@ -1,40 +0,0 @@ -import Box from '@mui/material/Box'; -import Slider from '@mui/material/Slider'; - -const marks = [ - { - value: 0, - label: '0°C', - }, - { - value: 20, - label: '20°C', - }, - { - value: 37, - label: '37°C', - }, - { - value: 100, - label: '100°C', - }, -]; - -function valuetext(value) { - return `${value}°C`; -} - -export default function DiscreteSliderValues() { - return ( - - - - ); -} diff --git a/docs/data/material/components/slider/DiscreteSliderValues.tsx.preview b/docs/data/material/components/slider/DiscreteSliderValues.tsx.preview deleted file mode 100644 index 6b150f284a051f..00000000000000 --- a/docs/data/material/components/slider/DiscreteSliderValues.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/slider/InputSlider.js b/docs/data/material/components/slider/InputSlider.js deleted file mode 100644 index 55fd60e3efecb1..00000000000000 --- a/docs/data/material/components/slider/InputSlider.js +++ /dev/null @@ -1,67 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; -import Typography from '@mui/material/Typography'; -import Slider from '@mui/material/Slider'; -import MuiInput from '@mui/material/Input'; -import VolumeUp from '@mui/icons-material/VolumeUp'; - -const Input = styled(MuiInput)` - width: 42px; -`; - -export default function InputSlider() { - const [value, setValue] = React.useState(30); - - const handleSliderChange = (event, newValue) => { - setValue(newValue); - }; - - const handleInputChange = (event) => { - setValue(event.target.value === '' ? 0 : Number(event.target.value)); - }; - - const handleBlur = () => { - if (value < 0) { - setValue(0); - } else if (value > 100) { - setValue(100); - } - }; - - return ( - - - Volume - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/slider/MinimumDistanceSlider.js b/docs/data/material/components/slider/MinimumDistanceSlider.js deleted file mode 100644 index 2bc6e4341d8063..00000000000000 --- a/docs/data/material/components/slider/MinimumDistanceSlider.js +++ /dev/null @@ -1,58 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Slider from '@mui/material/Slider'; - -function valuetext(value) { - return `${value}°C`; -} - -const minDistance = 10; - -export default function MinimumDistanceSlider() { - const [value1, setValue1] = React.useState([20, 37]); - - const handleChange1 = (event, newValue, activeThumb) => { - if (activeThumb === 0) { - setValue1([Math.min(newValue[0], value1[1] - minDistance), value1[1]]); - } else { - setValue1([value1[0], Math.max(newValue[1], value1[0] + minDistance)]); - } - }; - - const [value2, setValue2] = React.useState([20, 37]); - - const handleChange2 = (event, newValue, activeThumb) => { - if (newValue[1] - newValue[0] < minDistance) { - if (activeThumb === 0) { - const clamped = Math.min(newValue[0], 100 - minDistance); - setValue2([clamped, clamped + minDistance]); - } else { - const clamped = Math.max(newValue[1], minDistance); - setValue2([clamped - minDistance, clamped]); - } - } else { - setValue2(newValue); - } - }; - - return ( - - 'Minimum distance'} - value={value1} - onChange={handleChange1} - valueLabelDisplay="auto" - getAriaValueText={valuetext} - disableSwap - /> - 'Minimum distance shift'} - value={value2} - onChange={handleChange2} - valueLabelDisplay="auto" - getAriaValueText={valuetext} - disableSwap - /> - - ); -} diff --git a/docs/data/material/components/slider/MinimumDistanceSlider.tsx.preview b/docs/data/material/components/slider/MinimumDistanceSlider.tsx.preview deleted file mode 100644 index cb6e409f5ab4e9..00000000000000 --- a/docs/data/material/components/slider/MinimumDistanceSlider.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - 'Minimum distance'} - value={value1} - onChange={handleChange1} - valueLabelDisplay="auto" - getAriaValueText={valuetext} - disableSwap -/> - 'Minimum distance shift'} - value={value2} - onChange={handleChange2} - valueLabelDisplay="auto" - getAriaValueText={valuetext} - disableSwap -/> \ No newline at end of file diff --git a/docs/data/material/components/slider/MusicPlayerSlider.js b/docs/data/material/components/slider/MusicPlayerSlider.js deleted file mode 100644 index 145bbc2beed973..00000000000000 --- a/docs/data/material/components/slider/MusicPlayerSlider.js +++ /dev/null @@ -1,241 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Slider from '@mui/material/Slider'; -import IconButton from '@mui/material/IconButton'; -import Stack from '@mui/material/Stack'; -import PauseRounded from '@mui/icons-material/PauseRounded'; -import PlayArrowRounded from '@mui/icons-material/PlayArrowRounded'; -import FastForwardRounded from '@mui/icons-material/FastForwardRounded'; -import FastRewindRounded from '@mui/icons-material/FastRewindRounded'; -import VolumeUpRounded from '@mui/icons-material/VolumeUpRounded'; -import VolumeDownRounded from '@mui/icons-material/VolumeDownRounded'; - -const WallPaper = styled('div')({ - position: 'absolute', - width: '100%', - height: '100%', - top: 0, - left: 0, - overflow: 'hidden', - background: 'linear-gradient(rgb(255, 38, 142) 0%, rgb(255, 105, 79) 100%)', - transition: 'all 500ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s', - '&::before': { - content: '""', - width: '140%', - height: '140%', - position: 'absolute', - top: '-40%', - right: '-50%', - background: - 'radial-gradient(at center center, rgb(62, 79, 249) 0%, rgba(62, 79, 249, 0) 64%)', - }, - '&::after': { - content: '""', - width: '140%', - height: '140%', - position: 'absolute', - bottom: '-50%', - left: '-30%', - background: - 'radial-gradient(at center center, rgb(247, 237, 225) 0%, rgba(247, 237, 225, 0) 70%)', - transform: 'rotate(30deg)', - }, -}); - -const Widget = styled('div')(({ theme }) => ({ - padding: 16, - borderRadius: 16, - width: 343, - maxWidth: '100%', - margin: 'auto', - position: 'relative', - zIndex: 1, - backgroundColor: 'rgba(255,255,255,0.4)', - backdropFilter: 'blur(40px)', - ...theme.applyStyles('dark', { - backgroundColor: 'rgba(0,0,0,0.6)', - }), -})); - -const CoverImage = styled('div')({ - width: 100, - height: 100, - objectFit: 'cover', - overflow: 'hidden', - flexShrink: 0, - borderRadius: 8, - backgroundColor: 'rgba(0,0,0,0.08)', - '& > img': { - width: '100%', - }, -}); - -const TinyText = styled(Typography)({ - fontSize: '0.75rem', - opacity: 0.38, - fontWeight: 500, - letterSpacing: 0.2, -}); - -export default function MusicPlayerSlider() { - const duration = 200; // seconds - const [position, setPosition] = React.useState(32); - const [paused, setPaused] = React.useState(false); - function formatDuration(value) { - const minute = Math.floor(value / 60); - const secondLeft = value - minute * 60; - return `${minute}:${secondLeft < 10 ? `0${secondLeft}` : secondLeft}`; - } - return ( - - - - - can't win - Chilling Sunday - - - - Jun Pulse - - - คนเก่าเขาทำไว้ดี (Can't win) - - - Chilling Sunday — คนเก่าเขาทำไว้ดี - - - - setPosition(value)} - sx={(t) => ({ - color: 'rgba(0,0,0,0.87)', - height: 4, - '& .MuiSlider-thumb': { - width: 8, - height: 8, - transition: '0.3s cubic-bezier(.47,1.64,.41,.8)', - '&::before': { - boxShadow: '0 2px 12px 0 rgba(0,0,0,0.4)', - }, - '&:hover, &.Mui-focusVisible': { - boxShadow: `0px 0px 0px 8px ${'rgb(0 0 0 / 16%)'}`, - ...t.applyStyles('dark', { - boxShadow: `0px 0px 0px 8px ${'rgb(255 255 255 / 16%)'}`, - }), - }, - '&.Mui-active': { - width: 20, - height: 20, - }, - }, - '& .MuiSlider-rail': { - opacity: 0.28, - }, - ...t.applyStyles('dark', { - color: '#fff', - }), - })} - /> - - {formatDuration(position)} - -{formatDuration(duration - position)} - - ({ - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - mt: -1, - '& svg': { - color: '#000', - ...theme.applyStyles('dark', { - color: '#fff', - }), - }, - })} - > - - - - setPaused(!paused)} - > - {paused ? ( - - ) : ( - - )} - - - - - - ({ - alignItems: 'center', - mb: 1, - px: 1, - '& > svg': { - color: 'rgba(0,0,0,0.4)', - ...theme.applyStyles('dark', { - color: 'rgba(255,255,255,0.4)', - }), - }, - })} - > - - ({ - color: 'rgba(0,0,0,0.87)', - '& .MuiSlider-track': { - border: 'none', - }, - '& .MuiSlider-thumb': { - width: 24, - height: 24, - backgroundColor: '#fff', - '&::before': { - boxShadow: '0 4px 8px rgba(0,0,0,0.4)', - }, - '&:hover, &.Mui-focusVisible, &.Mui-active': { - boxShadow: 'none', - }, - }, - ...t.applyStyles('dark', { - color: '#fff', - }), - })} - /> - - - - - - ); -} diff --git a/docs/data/material/components/slider/NonLinearSlider.js b/docs/data/material/components/slider/NonLinearSlider.js deleted file mode 100644 index 8937e8972f9475..00000000000000 --- a/docs/data/material/components/slider/NonLinearSlider.js +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Slider from '@mui/material/Slider'; - -function valueLabelFormat(value) { - const units = ['KB', 'MB', 'GB', 'TB']; - - let unitIndex = 0; - let scaledValue = value; - - while (scaledValue >= 1024 && unitIndex < units.length - 1) { - unitIndex += 1; - scaledValue /= 1024; - } - - return `${scaledValue} ${units[unitIndex]}`; -} - -function calculateValue(value) { - return 2 ** value; -} - -export default function NonLinearSlider() { - const [value, setValue] = React.useState(10); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - Storage: {valueLabelFormat(calculateValue(value))} - - - - ); -} diff --git a/docs/data/material/components/slider/NonLinearSlider.tsx.preview b/docs/data/material/components/slider/NonLinearSlider.tsx.preview deleted file mode 100644 index c3477a0865bf1d..00000000000000 --- a/docs/data/material/components/slider/NonLinearSlider.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - Storage: {valueLabelFormat(calculateValue(value))} - - \ No newline at end of file diff --git a/docs/data/material/components/slider/RangeSlider.js b/docs/data/material/components/slider/RangeSlider.js deleted file mode 100644 index 3b80e96778bdbb..00000000000000 --- a/docs/data/material/components/slider/RangeSlider.js +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Slider from '@mui/material/Slider'; - -function valuetext(value) { - return `${value}°C`; -} - -export default function RangeSlider() { - const [value, setValue] = React.useState([20, 37]); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - 'Temperature range'} - value={value} - onChange={handleChange} - valueLabelDisplay="auto" - getAriaValueText={valuetext} - /> - - ); -} diff --git a/docs/data/material/components/slider/RangeSlider.tsx.preview b/docs/data/material/components/slider/RangeSlider.tsx.preview deleted file mode 100644 index 208db139a37cd2..00000000000000 --- a/docs/data/material/components/slider/RangeSlider.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - 'Temperature range'} - value={value} - onChange={handleChange} - valueLabelDisplay="auto" - getAriaValueText={valuetext} -/> \ No newline at end of file diff --git a/docs/data/material/components/slider/SliderSizes.js b/docs/data/material/components/slider/SliderSizes.js deleted file mode 100644 index 85c868e49f46fb..00000000000000 --- a/docs/data/material/components/slider/SliderSizes.js +++ /dev/null @@ -1,16 +0,0 @@ -import Box from '@mui/material/Box'; -import Slider from '@mui/material/Slider'; - -export default function SliderSizes() { - return ( - - - - - ); -} diff --git a/docs/data/material/components/slider/SliderSizes.tsx.preview b/docs/data/material/components/slider/SliderSizes.tsx.preview deleted file mode 100644 index f1bfcf4b0f9a13..00000000000000 --- a/docs/data/material/components/slider/SliderSizes.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/slider/TrackFalseSlider.js b/docs/data/material/components/slider/TrackFalseSlider.js deleted file mode 100644 index d9923a1adcb930..00000000000000 --- a/docs/data/material/components/slider/TrackFalseSlider.js +++ /dev/null @@ -1,64 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Slider from '@mui/material/Slider'; - -const Separator = styled('div')( - ({ theme }) => ` - height: ${theme.spacing(3)}; -`, -); - -const marks = [ - { - value: 0, - label: '0°C', - }, - { - value: 20, - label: '20°C', - }, - { - value: 37, - label: '37°C', - }, - { - value: 100, - label: '100°C', - }, -]; - -function valuetext(value) { - return `${value}°C`; -} - -export default function TrackFalseSlider() { - const id = React.useId(); - const rangeId = React.useId(); - return ( - - - Removed track - - - - - Removed track range slider - - - - ); -} diff --git a/docs/data/material/components/slider/TrackInvertedSlider.js b/docs/data/material/components/slider/TrackInvertedSlider.js deleted file mode 100644 index 3dc2d778e26927..00000000000000 --- a/docs/data/material/components/slider/TrackInvertedSlider.js +++ /dev/null @@ -1,61 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Slider from '@mui/material/Slider'; - -const Separator = styled('div')( - ({ theme }) => ` - height: ${theme.spacing(3)}; -`, -); - -const marks = [ - { - value: 0, - label: '0°C', - }, - { - value: 20, - label: '20°C', - }, - { - value: 37, - label: '37°C', - }, - { - value: 100, - label: '100°C', - }, -]; - -function valuetext(value) { - return `${value}°C`; -} - -export default function TrackInvertedSlider() { - return ( - - - Inverted track - - - - - Inverted track range - - - - ); -} diff --git a/docs/data/material/components/slider/VerticalSlider.js b/docs/data/material/components/slider/VerticalSlider.js deleted file mode 100644 index 1e25716ca13ba3..00000000000000 --- a/docs/data/material/components/slider/VerticalSlider.js +++ /dev/null @@ -1,54 +0,0 @@ -import Stack from '@mui/material/Stack'; -import Slider from '@mui/material/Slider'; - -export default function VerticalSlider() { - return ( - - - - 'Temperature'} - orientation="vertical" - getAriaValueText={getAriaValueText} - defaultValue={[20, 37]} - valueLabelDisplay="auto" - marks={marks} - /> - - ); -} - -function getAriaValueText(value) { - return `${value}°C`; -} - -const marks = [ - { - value: 0, - label: '0°C', - }, - { - value: 20, - label: '20°C', - }, - { - value: 37, - label: '37°C', - }, - { - value: 100, - label: '100°C', - }, -]; diff --git a/docs/data/material/components/slider/ColorSlider.tsx b/docs/data/material/components/slider/demos/color/ColorSlider.tsx similarity index 88% rename from docs/data/material/components/slider/ColorSlider.tsx rename to docs/data/material/components/slider/demos/color/ColorSlider.tsx index 58d6d40badc927..f3f053f4141530 100644 --- a/docs/data/material/components/slider/ColorSlider.tsx +++ b/docs/data/material/components/slider/demos/color/ColorSlider.tsx @@ -8,12 +8,14 @@ function valuetext(value: number) { export default function ColorSlider() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/slider/demos/color/client.ts b/docs/data/material/components/slider/demos/color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/color/index.ts b/docs/data/material/components/slider/demos/color/index.ts new file mode 100644 index 00000000000000..e41533f94c3bd8 --- /dev/null +++ b/docs/data/material/components/slider/demos/color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorSlider from './ColorSlider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorSlider, { ClientProvider }); diff --git a/docs/data/material/components/slider/ContinuousSlider.tsx b/docs/data/material/components/slider/demos/continuous/ContinuousSlider.tsx similarity index 93% rename from docs/data/material/components/slider/ContinuousSlider.tsx rename to docs/data/material/components/slider/demos/continuous/ContinuousSlider.tsx index f9dee3cebed908..afa1941f13d51f 100644 --- a/docs/data/material/components/slider/ContinuousSlider.tsx +++ b/docs/data/material/components/slider/demos/continuous/ContinuousSlider.tsx @@ -14,12 +14,14 @@ export default function ContinuousSlider() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/slider/demos/continuous/client.ts b/docs/data/material/components/slider/demos/continuous/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/continuous/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/continuous/index.ts b/docs/data/material/components/slider/demos/continuous/index.ts new file mode 100644 index 00000000000000..d3e64c23ee2aef --- /dev/null +++ b/docs/data/material/components/slider/demos/continuous/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ContinuousSlider from './ContinuousSlider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ContinuousSlider, { ClientProvider }); diff --git a/docs/data/material/components/slider/CustomMarks.tsx b/docs/data/material/components/slider/demos/custom-marks/CustomMarks.tsx similarity index 96% rename from docs/data/material/components/slider/CustomMarks.tsx rename to docs/data/material/components/slider/demos/custom-marks/CustomMarks.tsx index b5824e51201cf7..4bcdc1b0246c38 100644 --- a/docs/data/material/components/slider/CustomMarks.tsx +++ b/docs/data/material/components/slider/demos/custom-marks/CustomMarks.tsx @@ -17,6 +17,7 @@ const marks = [ ]; export default function CustomMarks() { + // @focus-start @padding 1 const [val, setVal] = React.useState(MIN); const handleChange = (_: Event, newValue: number) => { setVal(newValue); @@ -51,4 +52,5 @@ export default function CustomMarks() { ); + // @focus-end } diff --git a/docs/data/material/components/slider/demos/custom-marks/client.ts b/docs/data/material/components/slider/demos/custom-marks/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/custom-marks/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/custom-marks/index.ts b/docs/data/material/components/slider/demos/custom-marks/index.ts new file mode 100644 index 00000000000000..1f7b7a2e55b0a4 --- /dev/null +++ b/docs/data/material/components/slider/demos/custom-marks/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomMarks from './CustomMarks'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomMarks, { ClientProvider }); diff --git a/docs/data/material/components/slider/CustomizedSlider.tsx b/docs/data/material/components/slider/demos/customized/CustomizedSlider.tsx similarity index 96% rename from docs/data/material/components/slider/CustomizedSlider.tsx rename to docs/data/material/components/slider/demos/customized/CustomizedSlider.tsx index e0e788c8d6a89f..3f8096d2c1a084 100644 --- a/docs/data/material/components/slider/CustomizedSlider.tsx +++ b/docs/data/material/components/slider/demos/customized/CustomizedSlider.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; -import Slider, { SliderThumb, SliderValueLabelProps } from '@mui/material/Slider'; +import Slider, { SliderThumb } from '@mui/material/Slider'; +import type { SliderValueLabelProps } from '@mui/material/Slider'; import { styled } from '@mui/material/styles'; import Typography from '@mui/material/Typography'; import Tooltip from '@mui/material/Tooltip'; @@ -160,6 +161,7 @@ function AirbnbThumbComponent(props: AirbnbThumbComponentProps) { export default function CustomizedSlider() { return ( + {/* @focus-start */} iOS @@ -186,6 +188,7 @@ export default function CustomizedSlider() { getAriaLabel={(index) => (index === 0 ? 'Minimum price' : 'Maximum price')} defaultValue={[20, 40]} /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/slider/demos/customized/client.ts b/docs/data/material/components/slider/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/customized/index.ts b/docs/data/material/components/slider/demos/customized/index.ts new file mode 100644 index 00000000000000..40587848056469 --- /dev/null +++ b/docs/data/material/components/slider/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedSlider from './CustomizedSlider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedSlider, { ClientProvider }); diff --git a/docs/data/material/components/slider/DiscreteSliderLabel.tsx b/docs/data/material/components/slider/demos/discrete-label/DiscreteSliderLabel.tsx similarity index 92% rename from docs/data/material/components/slider/DiscreteSliderLabel.tsx rename to docs/data/material/components/slider/demos/discrete-label/DiscreteSliderLabel.tsx index 17ec1dcf44f1ba..519d272d2208ae 100644 --- a/docs/data/material/components/slider/DiscreteSliderLabel.tsx +++ b/docs/data/material/components/slider/demos/discrete-label/DiscreteSliderLabel.tsx @@ -27,6 +27,7 @@ function valuetext(value: number) { export default function DiscreteSliderLabel() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/slider/demos/discrete-label/client.ts b/docs/data/material/components/slider/demos/discrete-label/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/discrete-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/discrete-label/index.ts b/docs/data/material/components/slider/demos/discrete-label/index.ts new file mode 100644 index 00000000000000..9449a03ddbb99b --- /dev/null +++ b/docs/data/material/components/slider/demos/discrete-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DiscreteSliderLabel from './DiscreteSliderLabel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DiscreteSliderLabel, { ClientProvider }); diff --git a/docs/data/material/components/slider/DiscreteSliderMarks.tsx b/docs/data/material/components/slider/demos/discrete-marks/DiscreteSliderMarks.tsx similarity index 92% rename from docs/data/material/components/slider/DiscreteSliderMarks.tsx rename to docs/data/material/components/slider/demos/discrete-marks/DiscreteSliderMarks.tsx index f51938c55f49c3..d156ff252509ad 100644 --- a/docs/data/material/components/slider/DiscreteSliderMarks.tsx +++ b/docs/data/material/components/slider/demos/discrete-marks/DiscreteSliderMarks.tsx @@ -27,6 +27,7 @@ function valuetext(value: number) { export default function DiscreteSliderMarks() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/slider/demos/discrete-marks/client.ts b/docs/data/material/components/slider/demos/discrete-marks/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/discrete-marks/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/discrete-marks/index.ts b/docs/data/material/components/slider/demos/discrete-marks/index.ts new file mode 100644 index 00000000000000..2f19148d05b686 --- /dev/null +++ b/docs/data/material/components/slider/demos/discrete-marks/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DiscreteSliderMarks from './DiscreteSliderMarks'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DiscreteSliderMarks, { ClientProvider }); diff --git a/docs/data/material/components/slider/DiscreteSliderSteps.tsx b/docs/data/material/components/slider/demos/discrete-steps/DiscreteSliderSteps.tsx similarity index 90% rename from docs/data/material/components/slider/DiscreteSliderSteps.tsx rename to docs/data/material/components/slider/demos/discrete-steps/DiscreteSliderSteps.tsx index ecb8f24503e49e..ac3565c7852a83 100644 --- a/docs/data/material/components/slider/DiscreteSliderSteps.tsx +++ b/docs/data/material/components/slider/demos/discrete-steps/DiscreteSliderSteps.tsx @@ -8,6 +8,7 @@ function valuetext(value: number) { export default function DiscreteSliderSteps() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/slider/demos/discrete-steps/client.ts b/docs/data/material/components/slider/demos/discrete-steps/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/discrete-steps/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/discrete-steps/index.ts b/docs/data/material/components/slider/demos/discrete-steps/index.ts new file mode 100644 index 00000000000000..24942a15004a18 --- /dev/null +++ b/docs/data/material/components/slider/demos/discrete-steps/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DiscreteSliderSteps from './DiscreteSliderSteps'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DiscreteSliderSteps, { ClientProvider }); diff --git a/docs/data/material/components/slider/DiscreteSliderValues.tsx b/docs/data/material/components/slider/demos/discrete-values/DiscreteSliderValues.tsx similarity index 92% rename from docs/data/material/components/slider/DiscreteSliderValues.tsx rename to docs/data/material/components/slider/demos/discrete-values/DiscreteSliderValues.tsx index 71caa8ed1f554b..1702ae6f9deca6 100644 --- a/docs/data/material/components/slider/DiscreteSliderValues.tsx +++ b/docs/data/material/components/slider/demos/discrete-values/DiscreteSliderValues.tsx @@ -27,6 +27,7 @@ function valuetext(value: number) { export default function DiscreteSliderValues() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/slider/demos/discrete-values/client.ts b/docs/data/material/components/slider/demos/discrete-values/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/discrete-values/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/discrete-values/index.ts b/docs/data/material/components/slider/demos/discrete-values/index.ts new file mode 100644 index 00000000000000..aae8639780b8dd --- /dev/null +++ b/docs/data/material/components/slider/demos/discrete-values/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DiscreteSliderValues from './DiscreteSliderValues'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DiscreteSliderValues, { ClientProvider }); diff --git a/docs/data/material/components/slider/DiscreteSlider.tsx b/docs/data/material/components/slider/demos/discrete/DiscreteSlider.tsx similarity index 91% rename from docs/data/material/components/slider/DiscreteSlider.tsx rename to docs/data/material/components/slider/demos/discrete/DiscreteSlider.tsx index e32e9ce436844d..8f8a628c5f5b6a 100644 --- a/docs/data/material/components/slider/DiscreteSlider.tsx +++ b/docs/data/material/components/slider/demos/discrete/DiscreteSlider.tsx @@ -8,6 +8,7 @@ function valuetext(value: number) { export default function DiscreteSlider() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/slider/demos/discrete/client.ts b/docs/data/material/components/slider/demos/discrete/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/discrete/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/discrete/index.ts b/docs/data/material/components/slider/demos/discrete/index.ts new file mode 100644 index 00000000000000..e4e6512928203f --- /dev/null +++ b/docs/data/material/components/slider/demos/discrete/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DiscreteSlider from './DiscreteSlider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DiscreteSlider, { ClientProvider }); diff --git a/docs/data/material/components/slider/InputSlider.tsx b/docs/data/material/components/slider/demos/input/InputSlider.tsx similarity index 97% rename from docs/data/material/components/slider/InputSlider.tsx rename to docs/data/material/components/slider/demos/input/InputSlider.tsx index c6820349ffe53a..4bd5c2ae4bc5a0 100644 --- a/docs/data/material/components/slider/InputSlider.tsx +++ b/docs/data/material/components/slider/demos/input/InputSlider.tsx @@ -12,6 +12,7 @@ const Input = styled(MuiInput)` `; export default function InputSlider() { + // @focus-start @padding 1 const [value, setValue] = React.useState(30); const handleSliderChange = (event: Event, newValue: number) => { @@ -64,4 +65,5 @@ export default function InputSlider() { ); + // @focus-end } diff --git a/docs/data/material/components/slider/demos/input/client.ts b/docs/data/material/components/slider/demos/input/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/input/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/input/index.ts b/docs/data/material/components/slider/demos/input/index.ts new file mode 100644 index 00000000000000..eb6c1b27b49112 --- /dev/null +++ b/docs/data/material/components/slider/demos/input/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import InputSlider from './InputSlider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, InputSlider, { ClientProvider }); diff --git a/docs/data/material/components/slider/MinimumDistanceSlider.tsx b/docs/data/material/components/slider/demos/minimum-distance/MinimumDistanceSlider.tsx similarity index 96% rename from docs/data/material/components/slider/MinimumDistanceSlider.tsx rename to docs/data/material/components/slider/demos/minimum-distance/MinimumDistanceSlider.tsx index db05d4a176e7ed..75fb9744a58400 100644 --- a/docs/data/material/components/slider/MinimumDistanceSlider.tsx +++ b/docs/data/material/components/slider/demos/minimum-distance/MinimumDistanceSlider.tsx @@ -37,6 +37,7 @@ export default function MinimumDistanceSlider() { return ( + {/* @focus-start */} 'Minimum distance'} value={value1} @@ -53,6 +54,7 @@ export default function MinimumDistanceSlider() { getAriaValueText={valuetext} disableSwap /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/slider/demos/minimum-distance/client.ts b/docs/data/material/components/slider/demos/minimum-distance/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/minimum-distance/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/minimum-distance/index.ts b/docs/data/material/components/slider/demos/minimum-distance/index.ts new file mode 100644 index 00000000000000..7b8dd6ad4326af --- /dev/null +++ b/docs/data/material/components/slider/demos/minimum-distance/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MinimumDistanceSlider from './MinimumDistanceSlider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MinimumDistanceSlider, { ClientProvider }); diff --git a/docs/data/material/components/slider/MusicPlayerSlider.tsx b/docs/data/material/components/slider/demos/music-player/MusicPlayerSlider.tsx similarity index 99% rename from docs/data/material/components/slider/MusicPlayerSlider.tsx rename to docs/data/material/components/slider/demos/music-player/MusicPlayerSlider.tsx index ad4bda4ce4bec0..c677d2d40a5468 100644 --- a/docs/data/material/components/slider/MusicPlayerSlider.tsx +++ b/docs/data/material/components/slider/demos/music-player/MusicPlayerSlider.tsx @@ -80,6 +80,7 @@ const TinyText = styled(Typography)({ }); export default function MusicPlayerSlider() { + // @focus-start @padding 1 const duration = 200; // seconds const [position, setPosition] = React.useState(32); const [paused, setPaused] = React.useState(false); @@ -238,4 +239,5 @@ export default function MusicPlayerSlider() { ); + // @focus-end } diff --git a/docs/data/material/components/slider/demos/music-player/client.ts b/docs/data/material/components/slider/demos/music-player/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/music-player/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/music-player/index.ts b/docs/data/material/components/slider/demos/music-player/index.ts new file mode 100644 index 00000000000000..d7fc3c97a01e1a --- /dev/null +++ b/docs/data/material/components/slider/demos/music-player/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MusicPlayerSlider from './MusicPlayerSlider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MusicPlayerSlider, { ClientProvider }); diff --git a/docs/data/material/components/slider/NonLinearSlider.tsx b/docs/data/material/components/slider/demos/non-linear/NonLinearSlider.tsx similarity index 95% rename from docs/data/material/components/slider/NonLinearSlider.tsx rename to docs/data/material/components/slider/demos/non-linear/NonLinearSlider.tsx index 78acb2fc23eaaf..09dc6b9a17d8cd 100644 --- a/docs/data/material/components/slider/NonLinearSlider.tsx +++ b/docs/data/material/components/slider/demos/non-linear/NonLinearSlider.tsx @@ -30,6 +30,7 @@ export default function NonLinearSlider() { return ( + {/* @focus-start */} Storage: {valueLabelFormat(calculateValue(value))} @@ -45,6 +46,7 @@ export default function NonLinearSlider() { valueLabelDisplay="auto" aria-labelledby="non-linear-slider" /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/slider/demos/non-linear/client.ts b/docs/data/material/components/slider/demos/non-linear/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/non-linear/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/non-linear/index.ts b/docs/data/material/components/slider/demos/non-linear/index.ts new file mode 100644 index 00000000000000..557878c1b05847 --- /dev/null +++ b/docs/data/material/components/slider/demos/non-linear/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import NonLinearSlider from './NonLinearSlider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, NonLinearSlider, { ClientProvider }); diff --git a/docs/data/material/components/slider/RangeSlider.tsx b/docs/data/material/components/slider/demos/range/RangeSlider.tsx similarity index 92% rename from docs/data/material/components/slider/RangeSlider.tsx rename to docs/data/material/components/slider/demos/range/RangeSlider.tsx index 988e57190c08c4..ff2c5f5b67c59c 100644 --- a/docs/data/material/components/slider/RangeSlider.tsx +++ b/docs/data/material/components/slider/demos/range/RangeSlider.tsx @@ -15,6 +15,7 @@ export default function RangeSlider() { return ( + {/* @focus-start */} 'Temperature range'} value={value} @@ -22,6 +23,7 @@ export default function RangeSlider() { valueLabelDisplay="auto" getAriaValueText={valuetext} /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/slider/demos/range/client.ts b/docs/data/material/components/slider/demos/range/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/range/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/range/index.ts b/docs/data/material/components/slider/demos/range/index.ts new file mode 100644 index 00000000000000..4a8bb47cc0d634 --- /dev/null +++ b/docs/data/material/components/slider/demos/range/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RangeSlider from './RangeSlider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RangeSlider, { ClientProvider }); diff --git a/docs/data/material/components/slider/SliderSizes.tsx b/docs/data/material/components/slider/demos/sizes/SliderSizes.tsx similarity index 88% rename from docs/data/material/components/slider/SliderSizes.tsx rename to docs/data/material/components/slider/demos/sizes/SliderSizes.tsx index 85c868e49f46fb..d52a47435a1fa2 100644 --- a/docs/data/material/components/slider/SliderSizes.tsx +++ b/docs/data/material/components/slider/demos/sizes/SliderSizes.tsx @@ -4,6 +4,7 @@ import Slider from '@mui/material/Slider'; export default function SliderSizes() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/slider/demos/sizes/client.ts b/docs/data/material/components/slider/demos/sizes/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/sizes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/sizes/index.ts b/docs/data/material/components/slider/demos/sizes/index.ts new file mode 100644 index 00000000000000..b460c5d8df4f3b --- /dev/null +++ b/docs/data/material/components/slider/demos/sizes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SliderSizes from './SliderSizes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SliderSizes, { ClientProvider }); diff --git a/docs/data/material/components/slider/TrackFalseSlider.tsx b/docs/data/material/components/slider/demos/track-false/TrackFalseSlider.tsx similarity index 96% rename from docs/data/material/components/slider/TrackFalseSlider.tsx rename to docs/data/material/components/slider/demos/track-false/TrackFalseSlider.tsx index 06ccb2f9cd7a49..7dbd5f00cc2ff2 100644 --- a/docs/data/material/components/slider/TrackFalseSlider.tsx +++ b/docs/data/material/components/slider/demos/track-false/TrackFalseSlider.tsx @@ -34,6 +34,7 @@ function valuetext(value: number) { } export default function TrackFalseSlider() { + // @focus-start @padding 1 const id = React.useId(); const rangeId = React.useId(); return ( @@ -61,4 +62,5 @@ export default function TrackFalseSlider() { /> ); + // @focus-end } diff --git a/docs/data/material/components/slider/demos/track-false/client.ts b/docs/data/material/components/slider/demos/track-false/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/track-false/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/track-false/index.ts b/docs/data/material/components/slider/demos/track-false/index.ts new file mode 100644 index 00000000000000..b2b0f8c7ec7568 --- /dev/null +++ b/docs/data/material/components/slider/demos/track-false/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TrackFalseSlider from './TrackFalseSlider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TrackFalseSlider, { ClientProvider }); diff --git a/docs/data/material/components/slider/TrackInvertedSlider.tsx b/docs/data/material/components/slider/demos/track-inverted/TrackInvertedSlider.tsx similarity index 95% rename from docs/data/material/components/slider/TrackInvertedSlider.tsx rename to docs/data/material/components/slider/demos/track-inverted/TrackInvertedSlider.tsx index 7937b89d66ddc7..e38b692d4c3772 100644 --- a/docs/data/material/components/slider/TrackInvertedSlider.tsx +++ b/docs/data/material/components/slider/demos/track-inverted/TrackInvertedSlider.tsx @@ -35,6 +35,7 @@ function valuetext(value: number) { export default function TrackInvertedSlider() { return ( + {/* @focus-start */} Inverted track @@ -56,6 +57,7 @@ export default function TrackInvertedSlider() { defaultValue={[20, 37]} marks={marks} /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/slider/demos/track-inverted/client.ts b/docs/data/material/components/slider/demos/track-inverted/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/track-inverted/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/track-inverted/index.ts b/docs/data/material/components/slider/demos/track-inverted/index.ts new file mode 100644 index 00000000000000..109e2fb47b2909 --- /dev/null +++ b/docs/data/material/components/slider/demos/track-inverted/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TrackInvertedSlider from './TrackInvertedSlider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TrackInvertedSlider, { ClientProvider }); diff --git a/docs/data/material/components/slider/VerticalSlider.tsx b/docs/data/material/components/slider/demos/vertical/VerticalSlider.tsx similarity index 95% rename from docs/data/material/components/slider/VerticalSlider.tsx rename to docs/data/material/components/slider/demos/vertical/VerticalSlider.tsx index fe1c321ca43906..5d3fe72e40c698 100644 --- a/docs/data/material/components/slider/VerticalSlider.tsx +++ b/docs/data/material/components/slider/demos/vertical/VerticalSlider.tsx @@ -4,6 +4,7 @@ import Slider from '@mui/material/Slider'; export default function VerticalSlider() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/slider/demos/vertical/client.ts b/docs/data/material/components/slider/demos/vertical/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/slider/demos/vertical/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/slider/demos/vertical/index.ts b/docs/data/material/components/slider/demos/vertical/index.ts new file mode 100644 index 00000000000000..a8d27d2a53e325 --- /dev/null +++ b/docs/data/material/components/slider/demos/vertical/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VerticalSlider from './VerticalSlider'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VerticalSlider, { ClientProvider }); diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md index 3c9306f6cbfb95..8f9cdd87ea1403 100644 --- a/docs/data/material/components/slider/slider.md +++ b/docs/data/material/components/slider/slider.md @@ -20,51 +20,51 @@ Sliders reflect a range of values along a bar, from which users may select a sin Continuous sliders allow users to select a value along a subjective range. -{{"demo": "ContinuousSlider.js"}} +{{"component": "file://./demos/continuous/index.ts"}} ## Sizes For smaller slider, use the prop `size="small"`. -{{"demo": "SliderSizes.js"}} +{{"component": "file://./demos/sizes/index.ts"}} ## Discrete sliders Discrete sliders can be adjusted to a specific value by referencing its value indicator. You can generate a mark for each step with `marks={true}`. -{{"demo": "DiscreteSlider.js"}} +{{"component": "file://./demos/discrete/index.ts"}} ### Small steps You can change the default step increment. Make sure to adjust the `shiftStep` prop (the granularity with which the slider can step when using Page Up/Down or Shift + Arrow Up/Down) to a value divisible by the `step`. -{{"demo": "DiscreteSliderSteps.js"}} +{{"component": "file://./demos/discrete-steps/index.ts"}} ### Custom marks You can have custom marks by providing a rich array to the `marks` prop. -{{"demo": "DiscreteSliderMarks.js"}} +{{"component": "file://./demos/discrete-marks/index.ts"}} ### Restricted values You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. -{{"demo": "DiscreteSliderValues.js"}} +{{"component": "file://./demos/discrete-values/index.ts"}} ### Label always visible You can force the thumb label to be always visible with `valueLabelDisplay="on"`. -{{"demo": "DiscreteSliderLabel.js"}} +{{"component": "file://./demos/discrete-label/index.ts"}} ## Range slider The slider can be used to set the start and end of a range by supplying an array of values to the `value` prop. -{{"demo": "RangeSlider.js"}} +{{"component": "file://./demos/range/index.ts"}} ### Minimum distance @@ -72,34 +72,34 @@ You can enforce a minimum distance between values in the `onChange` event handle By default, when you move the pointer over a thumb while dragging another thumb, the active thumb will swap to the hovered thumb. You can disable this behavior with the `disableSwap` prop. If you want the range to shift when reaching minimum distance, you can utilize the `activeThumb` parameter in `onChange`. -{{"demo": "MinimumDistanceSlider.js"}} +{{"component": "file://./demos/minimum-distance/index.ts"}} ## Slider with input field In this example, an input allows a discrete value to be set. -{{"demo": "InputSlider.js"}} +{{"component": "file://./demos/input/index.ts"}} ## Color -{{"demo": "ColorSlider.js"}} +{{"component": "file://./demos/color/index.ts"}} ## Customization Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedSlider.js"}} +{{"component": "file://./demos/customized/index.ts"}} ### Music player -{{"demo": "MusicPlayerSlider.js", "bg": "inline"}} +{{"component": "file://./demos/music-player/index.ts", "bg": "inline"}} ## Vertical sliders Set the `orientation` prop to `"vertical"` to create vertical sliders. The thumb will track vertical movement instead of horizontal movement. -{{"demo": "VerticalSlider.js"}} +{{"component": "file://./demos/vertical/index.ts"}} :::warning Chrome versions below 124 implement `aria-orientation` incorrectly for vertical sliders and expose them as `'horizontal'` in the accessibility tree. ([Chromium issue #40736841](https://issues.chromium.org/issues/40736841)) @@ -118,7 +118,7 @@ The `-webkit-appearance: slider-vertical` CSS property can be used to correct th You can customize your slider by adding and repositioning marks for minimum and maximum values. -{{"demo": "CustomMarks.js"}} +{{"component": "file://./demos/custom-marks/index.ts"}} ## Track @@ -128,13 +128,13 @@ The track shows the range available for user selection. The track can be turned off with `track={false}`. -{{"demo": "TrackFalseSlider.js"}} +{{"component": "file://./demos/track-false/index.ts"}} ### Inverted track The track can be inverted with `track="inverted"`. -{{"demo": "TrackInvertedSlider.js"}} +{{"component": "file://./demos/track-inverted/index.ts"}} ## Non-linear scale @@ -143,7 +143,7 @@ You can use the `scale` prop to represent the `value` on a different scale. In the following demo, the value _x_ represents the value _2^x_. Increasing _x_ by one increases the represented value by factor _2_. -{{"demo": "NonLinearSlider.js"}} +{{"component": "file://./demos/non-linear/index.ts"}} ## Accessibility diff --git a/docs/data/material/components/snackbars/AutohideSnackbar.js b/docs/data/material/components/snackbars/AutohideSnackbar.js deleted file mode 100644 index 1e33edb45cdc2f..00000000000000 --- a/docs/data/material/components/snackbars/AutohideSnackbar.js +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Snackbar from '@mui/material/Snackbar'; - -export default function AutohideSnackbar() { - const [open, setOpen] = React.useState(false); - - const handleClick = () => { - setOpen(true); - }; - - const handleClose = (event, reason) => { - if (reason === 'clickaway') { - return; - } - - setOpen(false); - }; - - return ( -
    - - -
    - ); -} diff --git a/docs/data/material/components/snackbars/AutohideSnackbar.tsx.preview b/docs/data/material/components/snackbars/AutohideSnackbar.tsx.preview deleted file mode 100644 index a0c6adacc9eb6e..00000000000000 --- a/docs/data/material/components/snackbars/AutohideSnackbar.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/snackbars/ConsecutiveSnackbars.js b/docs/data/material/components/snackbars/ConsecutiveSnackbars.js deleted file mode 100644 index 3328ba085e5484..00000000000000 --- a/docs/data/material/components/snackbars/ConsecutiveSnackbars.js +++ /dev/null @@ -1,68 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Snackbar from '@mui/material/Snackbar'; -import IconButton from '@mui/material/IconButton'; -import CloseIcon from '@mui/icons-material/Close'; - -export default function ConsecutiveSnackbars() { - const [snackPack, setSnackPack] = React.useState([]); - const [open, setOpen] = React.useState(false); - const [messageInfo, setMessageInfo] = React.useState(undefined); - - React.useEffect(() => { - if (snackPack.length && !messageInfo) { - // Set a new snack when we don't have an active one - setMessageInfo({ ...snackPack[0] }); - setSnackPack((prev) => prev.slice(1)); - setOpen(true); - } else if (snackPack.length && messageInfo && open) { - // Close an active snack when a new one is added - setOpen(false); - } - }, [snackPack, messageInfo, open]); - - const handleClick = (message) => () => { - setSnackPack((prev) => [...prev, { message, key: new Date().getTime() }]); - }; - - const handleClose = (event, reason) => { - if (reason === 'clickaway') { - return; - } - setOpen(false); - }; - - const handleExited = () => { - setMessageInfo(undefined); - }; - - return ( -
    - - - - - - - - - } - /> -
    - ); -} diff --git a/docs/data/material/components/snackbars/CustomizedSnackbars.js b/docs/data/material/components/snackbars/CustomizedSnackbars.js deleted file mode 100644 index 6e2ea3b2f718a7..00000000000000 --- a/docs/data/material/components/snackbars/CustomizedSnackbars.js +++ /dev/null @@ -1,36 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Snackbar from '@mui/material/Snackbar'; -import Alert from '@mui/material/Alert'; - -export default function CustomizedSnackbars() { - const [open, setOpen] = React.useState(false); - - const handleClick = () => { - setOpen(true); - }; - - const handleClose = (event, reason) => { - if (reason === 'clickaway') { - return; - } - - setOpen(false); - }; - - return ( -
    - - - - This is a success Alert inside a Snackbar! - - -
    - ); -} diff --git a/docs/data/material/components/snackbars/CustomizedSnackbars.tsx.preview b/docs/data/material/components/snackbars/CustomizedSnackbars.tsx.preview deleted file mode 100644 index 21e1e8f052c0ff..00000000000000 --- a/docs/data/material/components/snackbars/CustomizedSnackbars.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - - - This is a success Alert inside a Snackbar! - - \ No newline at end of file diff --git a/docs/data/material/components/snackbars/DirectionSnackbar.js b/docs/data/material/components/snackbars/DirectionSnackbar.js deleted file mode 100644 index 4cb3f89fd55f45..00000000000000 --- a/docs/data/material/components/snackbars/DirectionSnackbar.js +++ /dev/null @@ -1,62 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; -import Button from '@mui/material/Button'; -import Snackbar from '@mui/material/Snackbar'; -import Slide from '@mui/material/Slide'; - -function TransitionLeft(props) { - return ; -} - -function TransitionUp(props) { - return ; -} - -function TransitionRight(props) { - return ; -} - -function TransitionDown(props) { - return ; -} - -export default function DirectionSnackbar() { - const [open, setOpen] = React.useState(false); - const [transition, setTransition] = React.useState(undefined); - - const handleClick = (Transition) => () => { - setTransition(() => Transition); - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - - return ( - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/snackbars/DirectionSnackbar.tsx b/docs/data/material/components/snackbars/DirectionSnackbar.tsx deleted file mode 100644 index 2957aac5a35d2f..00000000000000 --- a/docs/data/material/components/snackbars/DirectionSnackbar.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Grid from '@mui/material/Grid'; -import Button from '@mui/material/Button'; -import Snackbar from '@mui/material/Snackbar'; -import Slide, { SlideProps } from '@mui/material/Slide'; - -type TransitionProps = Omit; - -function TransitionLeft(props: TransitionProps) { - return ; -} - -function TransitionUp(props: TransitionProps) { - return ; -} - -function TransitionRight(props: TransitionProps) { - return ; -} - -function TransitionDown(props: TransitionProps) { - return ; -} - -export default function DirectionSnackbar() { - const [open, setOpen] = React.useState(false); - const [transition, setTransition] = React.useState< - React.ComponentType | undefined - >(undefined); - - const handleClick = (Transition: React.ComponentType) => () => { - setTransition(() => Transition); - setOpen(true); - }; - - const handleClose = () => { - setOpen(false); - }; - - return ( - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/snackbars/FabIntegrationSnackbar.js b/docs/data/material/components/snackbars/FabIntegrationSnackbar.js deleted file mode 100644 index 034f858be59943..00000000000000 --- a/docs/data/material/components/snackbars/FabIntegrationSnackbar.js +++ /dev/null @@ -1,69 +0,0 @@ -import * as React from 'react'; -import AppBar from '@mui/material/AppBar'; -import CssBaseline from '@mui/material/CssBaseline'; -import GlobalStyles from '@mui/material/GlobalStyles'; -import Toolbar from '@mui/material/Toolbar'; -import IconButton from '@mui/material/IconButton'; -import MenuIcon from '@mui/icons-material/Menu'; -import Typography from '@mui/material/Typography'; -import Button from '@mui/material/Button'; -import Fab from '@mui/material/Fab'; -import AddIcon from '@mui/icons-material/Add'; -import Snackbar from '@mui/material/Snackbar'; - -export default function FabIntegrationSnackbar() { - return ( - - - ({ - body: { backgroundColor: theme.palette.background.paper }, - })} - /> -
    - - - - - - - App bar - - - - ({ - position: 'absolute', - bottom: theme.spacing(2), - right: theme.spacing(2), - })} - > - - - - Undo - - } - sx={{ bottom: { xs: 90, sm: 0 } }} - /> -
    -     - ); -} diff --git a/docs/data/material/components/snackbars/IntegrationNotistack.js b/docs/data/material/components/snackbars/IntegrationNotistack.js deleted file mode 100644 index c74275de543c1c..00000000000000 --- a/docs/data/material/components/snackbars/IntegrationNotistack.js +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import { SnackbarProvider, useSnackbar } from 'notistack'; - -function MyApp() { - const { enqueueSnackbar } = useSnackbar(); - - const handleClick = () => { - enqueueSnackbar('I love snacks.'); - }; - - const handleClickVariant = (variant) => () => { - // variant could be success, error, warning, info, or default - enqueueSnackbar('This is a success message!', { variant }); - }; - - return ( - - - - - ); -} - -export default function IntegrationNotistack() { - return ( - - - - ); -} diff --git a/docs/data/material/components/snackbars/IntegrationNotistack.tsx.preview b/docs/data/material/components/snackbars/IntegrationNotistack.tsx.preview deleted file mode 100644 index 45d30592df5d8d..00000000000000 --- a/docs/data/material/components/snackbars/IntegrationNotistack.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/snackbars/LongTextSnackbar.js b/docs/data/material/components/snackbars/LongTextSnackbar.js deleted file mode 100644 index eb68859a6ca90b..00000000000000 --- a/docs/data/material/components/snackbars/LongTextSnackbar.js +++ /dev/null @@ -1,34 +0,0 @@ -import Button from '@mui/material/Button'; -import Stack from '@mui/material/Stack'; -import SnackbarContent from '@mui/material/SnackbarContent'; - -const action = ( - -); - -export default function LongTextSnackbar() { - return ( - - - - - - - ); -} diff --git a/docs/data/material/components/snackbars/PositionedSnackbar.js b/docs/data/material/components/snackbars/PositionedSnackbar.js deleted file mode 100644 index c170cb55f53969..00000000000000 --- a/docs/data/material/components/snackbars/PositionedSnackbar.js +++ /dev/null @@ -1,72 +0,0 @@ -import * as React from 'react'; -import Grid from '@mui/material/Grid'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Snackbar from '@mui/material/Snackbar'; - -export default function PositionedSnackbar() { - const [state, setState] = React.useState({ - open: false, - vertical: 'top', - horizontal: 'center', - }); - const { vertical, horizontal, open } = state; - - const handleClick = (newState) => () => { - setState({ ...newState, open: true }); - }; - - const handleClose = () => { - setState({ ...state, open: false }); - }; - - const buttons = ( - - - - - - - - - - - - - - - - - - - - - - - ); - - return ( - - {buttons} - - - ); -} diff --git a/docs/data/material/components/snackbars/PositionedSnackbar.tsx.preview b/docs/data/material/components/snackbars/PositionedSnackbar.tsx.preview deleted file mode 100644 index 3d15bac005fa10..00000000000000 --- a/docs/data/material/components/snackbars/PositionedSnackbar.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ -{buttons} - \ No newline at end of file diff --git a/docs/data/material/components/snackbars/SimpleSnackbar.js b/docs/data/material/components/snackbars/SimpleSnackbar.js deleted file mode 100644 index 301b5888d295f5..00000000000000 --- a/docs/data/material/components/snackbars/SimpleSnackbar.js +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Snackbar from '@mui/material/Snackbar'; -import IconButton from '@mui/material/IconButton'; -import CloseIcon from '@mui/icons-material/Close'; - -export default function SimpleSnackbar() { - const [open, setOpen] = React.useState(false); - - const handleClick = () => { - setOpen(true); - }; - - const handleClose = (event, reason) => { - if (reason === 'clickaway') { - return; - } - - setOpen(false); - }; - - const action = ( - - - - - - - ); - - return ( -
    - - -
    - ); -} diff --git a/docs/data/material/components/snackbars/SimpleSnackbar.tsx.preview b/docs/data/material/components/snackbars/SimpleSnackbar.tsx.preview deleted file mode 100644 index 323a3b0d99288a..00000000000000 --- a/docs/data/material/components/snackbars/SimpleSnackbar.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/snackbars/TransitionsSnackbar.js b/docs/data/material/components/snackbars/TransitionsSnackbar.js deleted file mode 100644 index 538a37f32ce465..00000000000000 --- a/docs/data/material/components/snackbars/TransitionsSnackbar.js +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Snackbar from '@mui/material/Snackbar'; -import Fade from '@mui/material/Fade'; -import Slide from '@mui/material/Slide'; -import Grow from '@mui/material/Grow'; - -function SlideTransition(props) { - return ; -} - -function GrowTransition(props) { - return ; -} - -export default function TransitionsSnackbar() { - const [state, setState] = React.useState({ - open: false, - Transition: Fade, - }); - - const handleClick = (Transition) => () => { - setState({ - open: true, - Transition, - }); - }; - - const handleClose = () => { - setState({ - ...state, - open: false, - }); - }; - - return ( -
    - - - - -
    - ); -} diff --git a/docs/data/material/components/snackbars/TransitionsSnackbar.tsx.preview b/docs/data/material/components/snackbars/TransitionsSnackbar.tsx.preview deleted file mode 100644 index 9682f78977d3f7..00000000000000 --- a/docs/data/material/components/snackbars/TransitionsSnackbar.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/material/components/snackbars/AutohideSnackbar.tsx b/docs/data/material/components/snackbars/demos/autohide/AutohideSnackbar.tsx similarity index 80% rename from docs/data/material/components/snackbars/AutohideSnackbar.tsx rename to docs/data/material/components/snackbars/demos/autohide/AutohideSnackbar.tsx index b5fd1f75e775b0..fd98e177c394e1 100644 --- a/docs/data/material/components/snackbars/AutohideSnackbar.tsx +++ b/docs/data/material/components/snackbars/demos/autohide/AutohideSnackbar.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import Button from '@mui/material/Button'; -import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar'; +import Snackbar from '@mui/material/Snackbar'; +import type { SnackbarCloseReason } from '@mui/material/Snackbar'; export default function AutohideSnackbar() { const [open, setOpen] = React.useState(false); @@ -22,6 +23,7 @@ export default function AutohideSnackbar() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/snackbars/demos/autohide/client.ts b/docs/data/material/components/snackbars/demos/autohide/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/snackbars/demos/autohide/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/snackbars/demos/autohide/index.ts b/docs/data/material/components/snackbars/demos/autohide/index.ts new file mode 100644 index 00000000000000..512fc9eded6140 --- /dev/null +++ b/docs/data/material/components/snackbars/demos/autohide/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AutohideSnackbar from './AutohideSnackbar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AutohideSnackbar, { ClientProvider }); diff --git a/docs/data/material/components/snackbars/ConsecutiveSnackbars.tsx b/docs/data/material/components/snackbars/demos/consecutive/ConsecutiveSnackbars.tsx similarity index 93% rename from docs/data/material/components/snackbars/ConsecutiveSnackbars.tsx rename to docs/data/material/components/snackbars/demos/consecutive/ConsecutiveSnackbars.tsx index 22d29214f9ced5..1202de3eb32c9c 100644 --- a/docs/data/material/components/snackbars/ConsecutiveSnackbars.tsx +++ b/docs/data/material/components/snackbars/demos/consecutive/ConsecutiveSnackbars.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import Button from '@mui/material/Button'; -import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar'; +import Snackbar from '@mui/material/Snackbar'; +import type { SnackbarCloseReason } from '@mui/material/Snackbar'; import IconButton from '@mui/material/IconButton'; import CloseIcon from '@mui/icons-material/Close'; @@ -10,6 +11,7 @@ export interface SnackbarMessage { } export default function ConsecutiveSnackbars() { + // @focus-start @padding 1 const [snackPack, setSnackPack] = React.useState([]); const [open, setOpen] = React.useState(false); const [messageInfo, setMessageInfo] = React.useState( @@ -75,4 +77,5 @@ export default function ConsecutiveSnackbars() { />
    ); + // @focus-end } diff --git a/docs/data/material/components/snackbars/demos/consecutive/client.ts b/docs/data/material/components/snackbars/demos/consecutive/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/snackbars/demos/consecutive/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/snackbars/demos/consecutive/index.ts b/docs/data/material/components/snackbars/demos/consecutive/index.ts new file mode 100644 index 00000000000000..3301cafcc2400e --- /dev/null +++ b/docs/data/material/components/snackbars/demos/consecutive/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ConsecutiveSnackbars from './ConsecutiveSnackbars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ConsecutiveSnackbars, { ClientProvider }); diff --git a/docs/data/material/components/snackbars/CustomizedSnackbars.tsx b/docs/data/material/components/snackbars/demos/customized/CustomizedSnackbars.tsx similarity index 83% rename from docs/data/material/components/snackbars/CustomizedSnackbars.tsx rename to docs/data/material/components/snackbars/demos/customized/CustomizedSnackbars.tsx index 912af5eae4927d..66cb1f3f76e727 100644 --- a/docs/data/material/components/snackbars/CustomizedSnackbars.tsx +++ b/docs/data/material/components/snackbars/demos/customized/CustomizedSnackbars.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import Button from '@mui/material/Button'; -import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar'; +import Snackbar from '@mui/material/Snackbar'; +import type { SnackbarCloseReason } from '@mui/material/Snackbar'; import Alert from '@mui/material/Alert'; export default function CustomizedSnackbars() { @@ -23,6 +24,7 @@ export default function CustomizedSnackbars() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/snackbars/demos/customized/client.ts b/docs/data/material/components/snackbars/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/snackbars/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/snackbars/demos/customized/index.ts b/docs/data/material/components/snackbars/demos/customized/index.ts new file mode 100644 index 00000000000000..6f8701841d699d --- /dev/null +++ b/docs/data/material/components/snackbars/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedSnackbars from './CustomizedSnackbars'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedSnackbars, { ClientProvider }); diff --git a/docs/data/material/components/snackbars/FabIntegrationSnackbar.tsx b/docs/data/material/components/snackbars/demos/fab-integration/FabIntegrationSnackbar.tsx similarity index 97% rename from docs/data/material/components/snackbars/FabIntegrationSnackbar.tsx rename to docs/data/material/components/snackbars/demos/fab-integration/FabIntegrationSnackbar.tsx index 034f858be59943..f04e7121c457f9 100644 --- a/docs/data/material/components/snackbars/FabIntegrationSnackbar.tsx +++ b/docs/data/material/components/snackbars/demos/fab-integration/FabIntegrationSnackbar.tsx @@ -14,6 +14,7 @@ import Snackbar from '@mui/material/Snackbar'; export default function FabIntegrationSnackbar() { return ( + {/* @focus-start */} ({ @@ -64,6 +65,7 @@ export default function FabIntegrationSnackbar() { sx={{ bottom: { xs: 90, sm: 0 } }} /> + {/* @focus-end */} ); } diff --git a/docs/data/material/components/snackbars/demos/fab-integration/client.ts b/docs/data/material/components/snackbars/demos/fab-integration/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/snackbars/demos/fab-integration/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/snackbars/demos/fab-integration/index.ts b/docs/data/material/components/snackbars/demos/fab-integration/index.ts new file mode 100644 index 00000000000000..3ef5d40782d4f9 --- /dev/null +++ b/docs/data/material/components/snackbars/demos/fab-integration/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FabIntegrationSnackbar from './FabIntegrationSnackbar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FabIntegrationSnackbar, { ClientProvider }); diff --git a/docs/data/material/components/snackbars/IntegrationNotistack.tsx b/docs/data/material/components/snackbars/demos/integration-notistack/IntegrationNotistack.tsx similarity index 83% rename from docs/data/material/components/snackbars/IntegrationNotistack.tsx rename to docs/data/material/components/snackbars/demos/integration-notistack/IntegrationNotistack.tsx index 0f4ffa9baaf149..ce0c4ff02f9864 100644 --- a/docs/data/material/components/snackbars/IntegrationNotistack.tsx +++ b/docs/data/material/components/snackbars/demos/integration-notistack/IntegrationNotistack.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import Button from '@mui/material/Button'; -import { SnackbarProvider, VariantType, useSnackbar } from 'notistack'; +import { SnackbarProvider, useSnackbar } from 'notistack'; +import type { VariantType } from 'notistack'; function MyApp() { const { enqueueSnackbar } = useSnackbar(); @@ -24,8 +25,10 @@ function MyApp() { export default function IntegrationNotistack() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/snackbars/demos/integration-notistack/client.ts b/docs/data/material/components/snackbars/demos/integration-notistack/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/snackbars/demos/integration-notistack/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/snackbars/demos/integration-notistack/index.ts b/docs/data/material/components/snackbars/demos/integration-notistack/index.ts new file mode 100644 index 00000000000000..3cbbb98107ce43 --- /dev/null +++ b/docs/data/material/components/snackbars/demos/integration-notistack/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IntegrationNotistack from './IntegrationNotistack'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IntegrationNotistack, { ClientProvider }); diff --git a/docs/data/material/components/snackbars/LongTextSnackbar.tsx b/docs/data/material/components/snackbars/demos/long-text/LongTextSnackbar.tsx similarity index 94% rename from docs/data/material/components/snackbars/LongTextSnackbar.tsx rename to docs/data/material/components/snackbars/demos/long-text/LongTextSnackbar.tsx index eb68859a6ca90b..eebf686e892d18 100644 --- a/docs/data/material/components/snackbars/LongTextSnackbar.tsx +++ b/docs/data/material/components/snackbars/demos/long-text/LongTextSnackbar.tsx @@ -11,6 +11,7 @@ const action = ( export default function LongTextSnackbar() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/snackbars/demos/long-text/client.ts b/docs/data/material/components/snackbars/demos/long-text/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/snackbars/demos/long-text/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/snackbars/demos/long-text/index.ts b/docs/data/material/components/snackbars/demos/long-text/index.ts new file mode 100644 index 00000000000000..6878b0053bc280 --- /dev/null +++ b/docs/data/material/components/snackbars/demos/long-text/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LongTextSnackbar from './LongTextSnackbar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LongTextSnackbar, { ClientProvider }); diff --git a/docs/data/material/components/snackbars/PositionedSnackbar.tsx b/docs/data/material/components/snackbars/demos/positioned/PositionedSnackbar.tsx similarity index 93% rename from docs/data/material/components/snackbars/PositionedSnackbar.tsx rename to docs/data/material/components/snackbars/demos/positioned/PositionedSnackbar.tsx index 98941a590d6762..e73ac7b11e5920 100644 --- a/docs/data/material/components/snackbars/PositionedSnackbar.tsx +++ b/docs/data/material/components/snackbars/demos/positioned/PositionedSnackbar.tsx @@ -2,7 +2,8 @@ import * as React from 'react'; import Grid from '@mui/material/Grid'; import Box from '@mui/material/Box'; import Button from '@mui/material/Button'; -import Snackbar, { SnackbarOrigin } from '@mui/material/Snackbar'; +import Snackbar from '@mui/material/Snackbar'; +import type { SnackbarOrigin } from '@mui/material/Snackbar'; interface State extends SnackbarOrigin { open: boolean; @@ -63,6 +64,7 @@ export default function PositionedSnackbar() { return ( + {/* @focus-start */} {buttons} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/snackbars/demos/positioned/client.ts b/docs/data/material/components/snackbars/demos/positioned/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/snackbars/demos/positioned/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/snackbars/demos/positioned/index.ts b/docs/data/material/components/snackbars/demos/positioned/index.ts new file mode 100644 index 00000000000000..013e6678eb8a03 --- /dev/null +++ b/docs/data/material/components/snackbars/demos/positioned/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PositionedSnackbar from './PositionedSnackbar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PositionedSnackbar, { ClientProvider }); diff --git a/docs/data/material/components/snackbars/SimpleSnackbar.tsx b/docs/data/material/components/snackbars/demos/simple/SimpleSnackbar.tsx similarity index 87% rename from docs/data/material/components/snackbars/SimpleSnackbar.tsx rename to docs/data/material/components/snackbars/demos/simple/SimpleSnackbar.tsx index bf0aed8afdd95b..c453e8d37ca191 100644 --- a/docs/data/material/components/snackbars/SimpleSnackbar.tsx +++ b/docs/data/material/components/snackbars/demos/simple/SimpleSnackbar.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import Button from '@mui/material/Button'; -import Snackbar, { SnackbarCloseReason } from '@mui/material/Snackbar'; +import Snackbar from '@mui/material/Snackbar'; +import type { SnackbarCloseReason } from '@mui/material/Snackbar'; import IconButton from '@mui/material/IconButton'; import CloseIcon from '@mui/icons-material/Close'; @@ -40,6 +41,7 @@ export default function SimpleSnackbar() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/snackbars/demos/simple/client.ts b/docs/data/material/components/snackbars/demos/simple/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/snackbars/demos/simple/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/snackbars/demos/simple/index.ts b/docs/data/material/components/snackbars/demos/simple/index.ts new file mode 100644 index 00000000000000..f235fca77766ac --- /dev/null +++ b/docs/data/material/components/snackbars/demos/simple/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleSnackbar from './SimpleSnackbar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleSnackbar, { ClientProvider }); diff --git a/docs/data/material/components/snackbars/TransitionsSnackbar.tsx b/docs/data/material/components/snackbars/demos/transitions/TransitionsSnackbar.tsx similarity index 82% rename from docs/data/material/components/snackbars/TransitionsSnackbar.tsx rename to docs/data/material/components/snackbars/demos/transitions/TransitionsSnackbar.tsx index f8430b4a4aa106..56156bd92739b7 100644 --- a/docs/data/material/components/snackbars/TransitionsSnackbar.tsx +++ b/docs/data/material/components/snackbars/demos/transitions/TransitionsSnackbar.tsx @@ -2,9 +2,11 @@ import * as React from 'react'; import Button from '@mui/material/Button'; import Snackbar from '@mui/material/Snackbar'; import Fade from '@mui/material/Fade'; -import Slide, { SlideProps } from '@mui/material/Slide'; -import Grow, { GrowProps } from '@mui/material/Grow'; -import { TransitionProps } from '@mui/material/transitions'; +import Slide from '@mui/material/Slide'; +import type { SlideProps } from '@mui/material/Slide'; +import Grow from '@mui/material/Grow'; +import type { GrowProps } from '@mui/material/Grow'; +import type { TransitionProps } from '@mui/material/transitions'; function SlideTransition(props: SlideProps) { return ; @@ -51,6 +53,7 @@ export default function TransitionsSnackbar() { return (
    + {/* @focus-start */} @@ -62,6 +65,7 @@ export default function TransitionsSnackbar() { key={state.Transition.name} autoHideDuration={1200} /> + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/snackbars/demos/transitions/client.ts b/docs/data/material/components/snackbars/demos/transitions/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/snackbars/demos/transitions/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/snackbars/demos/transitions/index.ts b/docs/data/material/components/snackbars/demos/transitions/index.ts new file mode 100644 index 00000000000000..d6e744b6ce4a22 --- /dev/null +++ b/docs/data/material/components/snackbars/demos/transitions/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TransitionsSnackbar from './TransitionsSnackbar'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TransitionsSnackbar, { ClientProvider }); diff --git a/docs/data/material/components/snackbars/snackbars.md b/docs/data/material/components/snackbars/snackbars.md index f6f26b2a7e4cb3..8059e96aefdc05 100644 --- a/docs/data/material/components/snackbars/snackbars.md +++ b/docs/data/material/components/snackbars/snackbars.md @@ -19,7 +19,7 @@ githubSource: packages/mui-material/src/Snackbar The Snackbar component appears temporarily and floats above the UI to provide users with (non-critical) updates on an app's processes. The demo below, inspired by Google Keep, shows a basic Snackbar with a text element and two actions: -{{"demo": "SimpleSnackbar.js"}} +{{"component": "file://./demos/simple/index.ts"}} ### Usage @@ -39,7 +39,7 @@ import Snackbar from '@mui/material/Snackbar'; Use the `anchorOrigin` prop to control the Snackbar's position on the screen. -{{"demo": "PositionedSnackbar.js"}} +{{"component": "file://./demos/positioned/index.ts"}} ### Content @@ -49,7 +49,7 @@ import SnackbarContent from '@mui/material/SnackbarContent'; Use the Snackbar Content component to add text and actions to the Snackbar. -{{"demo": "LongTextSnackbar.js"}} +{{"component": "file://./demos/long-text/index.ts"}} ### Automatic dismiss @@ -57,13 +57,13 @@ Use the `autoHideDuration` prop to automatically trigger the Snackbar's `onClose Make sure to [provide sufficient time](https://www.w3.org/WAI/WCAG22/Understanding/timing-adjustable.html) for the user to process the information displayed on it. -{{"demo": "AutohideSnackbar.js"}} +{{"component": "file://./demos/autohide/index.ts"}} ### Transitions Use `slots.transition` and `slotProps.transition` to change the transition of the Snackbar from [Grow](/material-ui/transitions/#grow) (the default) to others such as [Slide](/material-ui/transitions/#slide). -{{"demo": "TransitionsSnackbar.js"}} +{{"component": "file://./demos/transitions/index.ts"}} ## Customization @@ -88,13 +88,13 @@ If you would like to prevent the default onClickAway behavior, you can set the e Use an Alert inside a Snackbar for messages that communicate a certain severity. -{{"demo": "CustomizedSnackbars.js"}} +{{"component": "file://./demos/customized/index.ts"}} ### Use with Floating Action Buttons If you're using a [Floating Action Button](/material-ui/react-floating-action-button/) on mobile, Material Design recommends positioning snackbars directly above it, as shown in the demo below: -{{"demo": "FabIntegrationSnackbar.js", "iframe": true, "maxWidth": 400}} +{{"component": "file://./demos/fab-integration/index.ts", "iframe": true, "maxWidth": 400}} ## Common examples @@ -102,7 +102,7 @@ If you're using a [Floating Action Button](/material-ui/react-floating-action-bu This demo shows how to display multiple Snackbars without stacking them by using a consecutive animation. -{{"demo": "ConsecutiveSnackbars.js"}} +{{"component": "file://./demos/consecutive/index.ts"}} ## Supplementary components @@ -114,7 +114,7 @@ This demo shows how to display multiple Snackbars without stacking them by using With an imperative API, [notistack](https://github.com/iamhosseindhv/notistack) lets you vertically stack multiple Snackbars without having to handle their open and close states. Even though this is discouraged in the Material Design guidelines, it is still a common pattern. -{{"demo": "IntegrationNotistack.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/integration-notistack/index.ts", "collapseToEmpty": true}} :::warning Note that notistack prevents Snackbars from being [closed by pressing Escape](#accessibility). diff --git a/docs/data/material/components/speed-dial/BasicSpeedDial.js b/docs/data/material/components/speed-dial/BasicSpeedDial.js deleted file mode 100644 index 2c9c28e576c8e9..00000000000000 --- a/docs/data/material/components/speed-dial/BasicSpeedDial.js +++ /dev/null @@ -1,39 +0,0 @@ -import Box from '@mui/material/Box'; -import SpeedDial from '@mui/material/SpeedDial'; -import SpeedDialIcon from '@mui/material/SpeedDialIcon'; -import SpeedDialAction from '@mui/material/SpeedDialAction'; -import FileCopyIcon from '@mui/icons-material/FileCopyOutlined'; -import SaveIcon from '@mui/icons-material/Save'; -import PrintIcon from '@mui/icons-material/Print'; -import ShareIcon from '@mui/icons-material/Share'; - -const actions = [ - { icon: , name: 'Copy' }, - { icon: , name: 'Save' }, - { icon: , name: 'Print' }, - { icon: , name: 'Share' }, -]; - -export default function BasicSpeedDial() { - return ( - - } - > - {actions.map((action) => ( - - ))} - - - ); -} diff --git a/docs/data/material/components/speed-dial/ControlledOpenSpeedDial.js b/docs/data/material/components/speed-dial/ControlledOpenSpeedDial.js deleted file mode 100644 index 56f606cd1b4c23..00000000000000 --- a/docs/data/material/components/speed-dial/ControlledOpenSpeedDial.js +++ /dev/null @@ -1,48 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import SpeedDial from '@mui/material/SpeedDial'; -import SpeedDialIcon from '@mui/material/SpeedDialIcon'; -import SpeedDialAction from '@mui/material/SpeedDialAction'; -import FileCopyIcon from '@mui/icons-material/FileCopyOutlined'; -import SaveIcon from '@mui/icons-material/Save'; -import PrintIcon from '@mui/icons-material/Print'; -import ShareIcon from '@mui/icons-material/Share'; - -const actions = [ - { icon: , name: 'Copy' }, - { icon: , name: 'Save' }, - { icon: , name: 'Print' }, - { icon: , name: 'Share' }, -]; - -export default function ControlledOpenSpeedDial() { - const [open, setOpen] = React.useState(false); - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - - return ( - - } - onClose={handleClose} - onOpen={handleOpen} - open={open} - > - {actions.map((action) => ( - - ))} - - - ); -} diff --git a/docs/data/material/components/speed-dial/OpenIconSpeedDial.js b/docs/data/material/components/speed-dial/OpenIconSpeedDial.js deleted file mode 100644 index 84a0c5417f6217..00000000000000 --- a/docs/data/material/components/speed-dial/OpenIconSpeedDial.js +++ /dev/null @@ -1,40 +0,0 @@ -import Box from '@mui/material/Box'; -import SpeedDial from '@mui/material/SpeedDial'; -import SpeedDialIcon from '@mui/material/SpeedDialIcon'; -import SpeedDialAction from '@mui/material/SpeedDialAction'; -import FileCopyIcon from '@mui/icons-material/FileCopyOutlined'; -import SaveIcon from '@mui/icons-material/Save'; -import PrintIcon from '@mui/icons-material/Print'; -import ShareIcon from '@mui/icons-material/Share'; -import EditIcon from '@mui/icons-material/Edit'; - -const actions = [ - { icon: , name: 'Copy' }, - { icon: , name: 'Save' }, - { icon: , name: 'Print' }, - { icon: , name: 'Share' }, -]; - -export default function OpenIconSpeedDial() { - return ( - - } />} - > - {actions.map((action) => ( - - ))} - - - ); -} diff --git a/docs/data/material/components/speed-dial/PlaygroundSpeedDial.js b/docs/data/material/components/speed-dial/PlaygroundSpeedDial.js deleted file mode 100644 index 41ab636415daed..00000000000000 --- a/docs/data/material/components/speed-dial/PlaygroundSpeedDial.js +++ /dev/null @@ -1,94 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import FormControl from '@mui/material/FormControl'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormLabel from '@mui/material/FormLabel'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; -import Switch from '@mui/material/Switch'; -import SpeedDial from '@mui/material/SpeedDial'; -import SpeedDialIcon from '@mui/material/SpeedDialIcon'; -import SpeedDialAction from '@mui/material/SpeedDialAction'; -import FileCopyIcon from '@mui/icons-material/FileCopyOutlined'; -import SaveIcon from '@mui/icons-material/Save'; -import PrintIcon from '@mui/icons-material/Print'; -import ShareIcon from '@mui/icons-material/Share'; - -const StyledSpeedDial = styled(SpeedDial)(({ theme }) => ({ - position: 'absolute', - '&.MuiSpeedDial-directionUp, &.MuiSpeedDial-directionLeft': { - bottom: theme.spacing(2), - right: theme.spacing(2), - }, - '&.MuiSpeedDial-directionDown, &.MuiSpeedDial-directionRight': { - top: theme.spacing(2), - left: theme.spacing(2), - }, -})); - -const actions = [ - { icon: , name: 'Copy' }, - { icon: , name: 'Save' }, - { icon: , name: 'Print' }, - { icon: , name: 'Share' }, -]; - -export default function PlaygroundSpeedDial() { - const [direction, setDirection] = React.useState('up'); - const [hidden, setHidden] = React.useState(false); - - const handleDirectionChange = (event) => { - setDirection(event.target.value); - }; - - const handleHiddenChange = (event) => { - setHidden(event.target.checked); - }; - - return ( - - - } - label="Hidden" - /> - - Direction - - } label="Up" /> - } label="Right" /> - } label="Down" /> - } label="Left" /> - - - - - - - ); -} diff --git a/docs/data/material/components/speed-dial/SpeedDialTooltipOpen.js b/docs/data/material/components/speed-dial/SpeedDialTooltipOpen.js deleted file mode 100644 index 15a928bfd57fca..00000000000000 --- a/docs/data/material/components/speed-dial/SpeedDialTooltipOpen.js +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Backdrop from '@mui/material/Backdrop'; -import SpeedDial from '@mui/material/SpeedDial'; -import SpeedDialIcon from '@mui/material/SpeedDialIcon'; -import SpeedDialAction from '@mui/material/SpeedDialAction'; -import FileCopyIcon from '@mui/icons-material/FileCopyOutlined'; -import SaveIcon from '@mui/icons-material/Save'; -import PrintIcon from '@mui/icons-material/Print'; -import ShareIcon from '@mui/icons-material/Share'; - -const actions = [ - { icon: , name: 'Copy' }, - { icon: , name: 'Save' }, - { icon: , name: 'Print' }, - { icon: , name: 'Share' }, -]; - -export default function SpeedDialTooltipOpen() { - const [open, setOpen] = React.useState(false); - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - - return ( - - - } - onClose={handleClose} - onOpen={handleOpen} - open={open} - > - {actions.map((action) => ( - - ))} - - - ); -} diff --git a/docs/data/material/components/speed-dial/BasicSpeedDial.tsx b/docs/data/material/components/speed-dial/demos/basic/BasicSpeedDial.tsx similarity index 95% rename from docs/data/material/components/speed-dial/BasicSpeedDial.tsx rename to docs/data/material/components/speed-dial/demos/basic/BasicSpeedDial.tsx index 2c9c28e576c8e9..4ab34b19dcea59 100644 --- a/docs/data/material/components/speed-dial/BasicSpeedDial.tsx +++ b/docs/data/material/components/speed-dial/demos/basic/BasicSpeedDial.tsx @@ -17,6 +17,7 @@ const actions = [ export default function BasicSpeedDial() { return ( + {/* @focus-start */} ))} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/speed-dial/demos/basic/client.ts b/docs/data/material/components/speed-dial/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/speed-dial/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/speed-dial/demos/basic/index.ts b/docs/data/material/components/speed-dial/demos/basic/index.ts new file mode 100644 index 00000000000000..e6754e0f88336e --- /dev/null +++ b/docs/data/material/components/speed-dial/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicSpeedDial from './BasicSpeedDial'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicSpeedDial, { ClientProvider }); diff --git a/docs/data/material/components/speed-dial/ControlledOpenSpeedDial.tsx b/docs/data/material/components/speed-dial/demos/controlled-open/ControlledOpenSpeedDial.tsx similarity index 97% rename from docs/data/material/components/speed-dial/ControlledOpenSpeedDial.tsx rename to docs/data/material/components/speed-dial/demos/controlled-open/ControlledOpenSpeedDial.tsx index 56f606cd1b4c23..871e986fdb6a97 100644 --- a/docs/data/material/components/speed-dial/ControlledOpenSpeedDial.tsx +++ b/docs/data/material/components/speed-dial/demos/controlled-open/ControlledOpenSpeedDial.tsx @@ -16,6 +16,7 @@ const actions = [ ]; export default function ControlledOpenSpeedDial() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); @@ -45,4 +46,5 @@ export default function ControlledOpenSpeedDial() { ); + // @focus-end } diff --git a/docs/data/material/components/speed-dial/demos/controlled-open/client.ts b/docs/data/material/components/speed-dial/demos/controlled-open/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/speed-dial/demos/controlled-open/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/speed-dial/demos/controlled-open/index.ts b/docs/data/material/components/speed-dial/demos/controlled-open/index.ts new file mode 100644 index 00000000000000..f806a2c034f800 --- /dev/null +++ b/docs/data/material/components/speed-dial/demos/controlled-open/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ControlledOpenSpeedDial from './ControlledOpenSpeedDial'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ControlledOpenSpeedDial, { ClientProvider }); diff --git a/docs/data/material/components/speed-dial/OpenIconSpeedDial.tsx b/docs/data/material/components/speed-dial/demos/open-icon/OpenIconSpeedDial.tsx similarity index 96% rename from docs/data/material/components/speed-dial/OpenIconSpeedDial.tsx rename to docs/data/material/components/speed-dial/demos/open-icon/OpenIconSpeedDial.tsx index 84a0c5417f6217..6483191ac12ccf 100644 --- a/docs/data/material/components/speed-dial/OpenIconSpeedDial.tsx +++ b/docs/data/material/components/speed-dial/demos/open-icon/OpenIconSpeedDial.tsx @@ -18,6 +18,7 @@ const actions = [ export default function OpenIconSpeedDial() { return ( + {/* @focus-start */} ))} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/speed-dial/demos/open-icon/client.ts b/docs/data/material/components/speed-dial/demos/open-icon/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/speed-dial/demos/open-icon/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/speed-dial/demos/open-icon/index.ts b/docs/data/material/components/speed-dial/demos/open-icon/index.ts new file mode 100644 index 00000000000000..6335aabbc7d2b7 --- /dev/null +++ b/docs/data/material/components/speed-dial/demos/open-icon/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import OpenIconSpeedDial from './OpenIconSpeedDial'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, OpenIconSpeedDial, { ClientProvider }); diff --git a/docs/data/material/components/speed-dial/PlaygroundSpeedDial.tsx b/docs/data/material/components/speed-dial/demos/playground/PlaygroundSpeedDial.tsx similarity index 95% rename from docs/data/material/components/speed-dial/PlaygroundSpeedDial.tsx rename to docs/data/material/components/speed-dial/demos/playground/PlaygroundSpeedDial.tsx index a740a1fa2bddf4..4139fd2e2c471e 100644 --- a/docs/data/material/components/speed-dial/PlaygroundSpeedDial.tsx +++ b/docs/data/material/components/speed-dial/demos/playground/PlaygroundSpeedDial.tsx @@ -7,7 +7,8 @@ import FormLabel from '@mui/material/FormLabel'; import Radio from '@mui/material/Radio'; import RadioGroup from '@mui/material/RadioGroup'; import Switch from '@mui/material/Switch'; -import SpeedDial, { SpeedDialProps } from '@mui/material/SpeedDial'; +import SpeedDial from '@mui/material/SpeedDial'; +import type { SpeedDialProps } from '@mui/material/SpeedDial'; import SpeedDialIcon from '@mui/material/SpeedDialIcon'; import SpeedDialAction from '@mui/material/SpeedDialAction'; import FileCopyIcon from '@mui/icons-material/FileCopyOutlined'; @@ -35,6 +36,7 @@ const actions = [ ]; export default function PlaygroundSpeedDial() { + // @focus-start @padding 1 const [direction, setDirection] = React.useState('up'); const [hidden, setHidden] = React.useState(false); @@ -94,4 +96,5 @@ export default function PlaygroundSpeedDial() { ); + // @focus-end } diff --git a/docs/data/material/components/speed-dial/demos/playground/client.ts b/docs/data/material/components/speed-dial/demos/playground/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/speed-dial/demos/playground/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/speed-dial/demos/playground/index.ts b/docs/data/material/components/speed-dial/demos/playground/index.ts new file mode 100644 index 00000000000000..58b9fb32865cf0 --- /dev/null +++ b/docs/data/material/components/speed-dial/demos/playground/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PlaygroundSpeedDial from './PlaygroundSpeedDial'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PlaygroundSpeedDial, { ClientProvider }); diff --git a/docs/data/material/components/speed-dial/SpeedDialTooltipOpen.tsx b/docs/data/material/components/speed-dial/demos/tooltip-open/SpeedDialTooltipOpen.tsx similarity index 97% rename from docs/data/material/components/speed-dial/SpeedDialTooltipOpen.tsx rename to docs/data/material/components/speed-dial/demos/tooltip-open/SpeedDialTooltipOpen.tsx index 15a928bfd57fca..d80337a4647df8 100644 --- a/docs/data/material/components/speed-dial/SpeedDialTooltipOpen.tsx +++ b/docs/data/material/components/speed-dial/demos/tooltip-open/SpeedDialTooltipOpen.tsx @@ -17,6 +17,7 @@ const actions = [ ]; export default function SpeedDialTooltipOpen() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const handleOpen = () => setOpen(true); const handleClose = () => setOpen(false); @@ -48,4 +49,5 @@ export default function SpeedDialTooltipOpen() { ); + // @focus-end } diff --git a/docs/data/material/components/speed-dial/demos/tooltip-open/client.ts b/docs/data/material/components/speed-dial/demos/tooltip-open/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/speed-dial/demos/tooltip-open/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/speed-dial/demos/tooltip-open/index.ts b/docs/data/material/components/speed-dial/demos/tooltip-open/index.ts new file mode 100644 index 00000000000000..9faa9e7bec71f7 --- /dev/null +++ b/docs/data/material/components/speed-dial/demos/tooltip-open/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SpeedDialTooltipOpen from './SpeedDialTooltipOpen'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SpeedDialTooltipOpen, { ClientProvider }); diff --git a/docs/data/material/components/speed-dial/speed-dial.md b/docs/data/material/components/speed-dial/speed-dial.md index bb13c916cc39e2..b510890c346429 100644 --- a/docs/data/material/components/speed-dial/speed-dial.md +++ b/docs/data/material/components/speed-dial/speed-dial.md @@ -20,24 +20,24 @@ If more than six actions are needed, something other than a FAB should be used t The floating action button can display related actions. -{{"demo": "BasicSpeedDial.js"}} +{{"component": "file://./demos/basic/index.ts"}} ## Playground -{{"demo": "PlaygroundSpeedDial.js"}} +{{"component": "file://./demos/playground/index.ts"}} ## Controlled speed dial The open state of the component can be controlled with the `open`/`onOpen`/`onClose` props. -{{"demo": "ControlledOpenSpeedDial.js"}} +{{"component": "file://./demos/controlled-open/index.ts"}} ## Custom close icon You can provide an alternate icon for the closed and open states using the `icon` and `openIcon` props of the `SpeedDialIcon` component. -{{"demo": "OpenIconSpeedDial.js"}} +{{"component": "file://./demos/open-icon/index.ts"}} ## Persistent action tooltips @@ -45,7 +45,7 @@ The SpeedDialActions tooltips can be displayed persistently so that users don't It is enabled here across all devices for demo purposes, but in production it could use the `isTouch` logic to conditionally set the prop. -{{"demo": "SpeedDialTooltipOpen.js"}} +{{"component": "file://./demos/tooltip-open/index.ts"}} ## Transitions diff --git a/docs/data/material/components/stack/BasicStack.js b/docs/data/material/components/stack/BasicStack.js deleted file mode 100644 index 4c10a398f585b1..00000000000000 --- a/docs/data/material/components/stack/BasicStack.js +++ /dev/null @@ -1,27 +0,0 @@ -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import { styled } from '@mui/material/styles'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function BasicStack() { - return ( - - - Item 1 - Item 2 - Item 3 - - - ); -} diff --git a/docs/data/material/components/stack/BasicStack.tsx b/docs/data/material/components/stack/BasicStack.tsx deleted file mode 100644 index 4c10a398f585b1..00000000000000 --- a/docs/data/material/components/stack/BasicStack.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import { styled } from '@mui/material/styles'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function BasicStack() { - return ( - - - Item 1 - Item 2 - Item 3 - - - ); -} diff --git a/docs/data/material/components/stack/BasicStack.tsx.preview b/docs/data/material/components/stack/BasicStack.tsx.preview deleted file mode 100644 index fc62473153d42e..00000000000000 --- a/docs/data/material/components/stack/BasicStack.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - Item 1 - Item 2 - Item 3 - \ No newline at end of file diff --git a/docs/data/material/components/stack/DirectionStack.js b/docs/data/material/components/stack/DirectionStack.js deleted file mode 100644 index 8ed5e4215d21d7..00000000000000 --- a/docs/data/material/components/stack/DirectionStack.js +++ /dev/null @@ -1,26 +0,0 @@ -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import { styled } from '@mui/material/styles'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function DirectionStack() { - return ( -
    - - Item 1 - Item 2 - Item 3 - -
    - ); -} diff --git a/docs/data/material/components/stack/DirectionStack.tsx b/docs/data/material/components/stack/DirectionStack.tsx deleted file mode 100644 index 8ed5e4215d21d7..00000000000000 --- a/docs/data/material/components/stack/DirectionStack.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import { styled } from '@mui/material/styles'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function DirectionStack() { - return ( -
    - - Item 1 - Item 2 - Item 3 - -
    - ); -} diff --git a/docs/data/material/components/stack/DirectionStack.tsx.preview b/docs/data/material/components/stack/DirectionStack.tsx.preview deleted file mode 100644 index 0b432fbd09105e..00000000000000 --- a/docs/data/material/components/stack/DirectionStack.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - Item 1 - Item 2 - Item 3 - \ No newline at end of file diff --git a/docs/data/material/components/stack/DividerStack.js b/docs/data/material/components/stack/DividerStack.js deleted file mode 100644 index fb56191fa7aeb9..00000000000000 --- a/docs/data/material/components/stack/DividerStack.js +++ /dev/null @@ -1,31 +0,0 @@ -import Divider from '@mui/material/Divider'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import { styled } from '@mui/material/styles'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function DividerStack() { - return ( -
    - } - spacing={2} - > - Item 1 - Item 2 - Item 3 - -
    - ); -} diff --git a/docs/data/material/components/stack/DividerStack.tsx b/docs/data/material/components/stack/DividerStack.tsx deleted file mode 100644 index fb56191fa7aeb9..00000000000000 --- a/docs/data/material/components/stack/DividerStack.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import Divider from '@mui/material/Divider'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import { styled } from '@mui/material/styles'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function DividerStack() { - return ( -
    - } - spacing={2} - > - Item 1 - Item 2 - Item 3 - -
    - ); -} diff --git a/docs/data/material/components/stack/DividerStack.tsx.preview b/docs/data/material/components/stack/DividerStack.tsx.preview deleted file mode 100644 index 6dff777f9c51cf..00000000000000 --- a/docs/data/material/components/stack/DividerStack.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ -} - spacing={2} -> - Item 1 - Item 2 - Item 3 - \ No newline at end of file diff --git a/docs/data/material/components/stack/FlexboxGapStack.js b/docs/data/material/components/stack/FlexboxGapStack.js deleted file mode 100644 index 3d9e1bb6bd523b..00000000000000 --- a/docs/data/material/components/stack/FlexboxGapStack.js +++ /dev/null @@ -1,33 +0,0 @@ -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import { styled } from '@mui/material/styles'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - flexGrow: 1, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function FlexboxGapStack() { - return ( - - - Item 1 - Item 2 - Long content - - - ); -} diff --git a/docs/data/material/components/stack/FlexboxGapStack.tsx b/docs/data/material/components/stack/FlexboxGapStack.tsx deleted file mode 100644 index 3d9e1bb6bd523b..00000000000000 --- a/docs/data/material/components/stack/FlexboxGapStack.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import Box from '@mui/material/Box'; -import { styled } from '@mui/material/styles'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - flexGrow: 1, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function FlexboxGapStack() { - return ( - - - Item 1 - Item 2 - Long content - - - ); -} diff --git a/docs/data/material/components/stack/FlexboxGapStack.tsx.preview b/docs/data/material/components/stack/FlexboxGapStack.tsx.preview deleted file mode 100644 index 28eef419d3034b..00000000000000 --- a/docs/data/material/components/stack/FlexboxGapStack.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - Item 1 - Item 2 - Long content - \ No newline at end of file diff --git a/docs/data/material/components/stack/InteractiveStack.js b/docs/data/material/components/stack/InteractiveStack.js deleted file mode 100644 index 8730dbce62e7d5..00000000000000 --- a/docs/data/material/components/stack/InteractiveStack.js +++ /dev/null @@ -1,201 +0,0 @@ -import * as React from 'react'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Grid from '@mui/material/Grid'; -import Paper from '@mui/material/Paper'; -import RadioGroup from '@mui/material/RadioGroup'; -import Radio from '@mui/material/Radio'; -import Stack from '@mui/material/Stack'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -export default function InteractiveStack() { - const [direction, setDirection] = React.useState('row'); - const [justifyContent, setJustifyContent] = React.useState('center'); - const [alignItems, setAlignItems] = React.useState('center'); - const [spacing, setSpacing] = React.useState(2); - - const jsx = ` - -`; - - return ( - - - {[0, 1, 2].map((value) => ( - ({ - p: 2, - pt: value + 1, - pb: value + 1, - color: 'text.secondary', - typography: 'body2', - backgroundColor: '#fff', - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), - })} - > - {`Item ${value + 1}`} - - ))} - - - - - - direction - { - setDirection(event.target.value); - }} - > - } label="row" /> - } - label="row-reverse" - /> - } - label="column" - /> - } - label="column-reverse" - /> - - - - - - alignItems - { - setAlignItems(event.target.value); - }} - > - } - label="flex-start" - /> - } - label="center" - /> - } - label="flex-end" - /> - } - label="stretch" - /> - } - label="baseline" - /> - - - - - - justifyContent - { - setJustifyContent(event.target.value); - }} - > - } - label="flex-start" - /> - } - label="center" - /> - } - label="flex-end" - /> - } - label="space-between" - /> - } - label="space-around" - /> - } - label="space-evenly" - /> - - - - - - spacing - { - setSpacing(Number(event.target.value)); - }} - > - {[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => ( - } - label={value} - /> - ))} - - - - - - - - ); -} diff --git a/docs/data/material/components/stack/InteractiveStack.tsx b/docs/data/material/components/stack/InteractiveStack.tsx deleted file mode 100644 index b73eaffc963168..00000000000000 --- a/docs/data/material/components/stack/InteractiveStack.tsx +++ /dev/null @@ -1,201 +0,0 @@ -import * as React from 'react'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Grid from '@mui/material/Grid'; -import Paper from '@mui/material/Paper'; -import RadioGroup from '@mui/material/RadioGroup'; -import Radio from '@mui/material/Radio'; -import Stack, { StackProps } from '@mui/material/Stack'; -import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; - -export default function InteractiveStack() { - const [direction, setDirection] = React.useState('row'); - const [justifyContent, setJustifyContent] = React.useState('center'); - const [alignItems, setAlignItems] = React.useState('center'); - const [spacing, setSpacing] = React.useState(2); - - const jsx = ` - -`; - - return ( - - - {[0, 1, 2].map((value) => ( - ({ - p: 2, - pt: value + 1, - pb: value + 1, - color: 'text.secondary', - typography: 'body2', - backgroundColor: '#fff', - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), - })} - > - {`Item ${value + 1}`} - - ))} - - - - - - direction - { - setDirection(event.target.value as StackProps['direction']); - }} - > - } label="row" /> - } - label="row-reverse" - /> - } - label="column" - /> - } - label="column-reverse" - /> - - - - - - alignItems - { - setAlignItems(event.target.value); - }} - > - } - label="flex-start" - /> - } - label="center" - /> - } - label="flex-end" - /> - } - label="stretch" - /> - } - label="baseline" - /> - - - - - - justifyContent - { - setJustifyContent(event.target.value); - }} - > - } - label="flex-start" - /> - } - label="center" - /> - } - label="flex-end" - /> - } - label="space-between" - /> - } - label="space-around" - /> - } - label="space-evenly" - /> - - - - - - spacing - ) => { - setSpacing(Number((event.target as HTMLInputElement).value)); - }} - > - {[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => ( - } - label={value} - /> - ))} - - - - - - - - ); -} diff --git a/docs/data/material/components/stack/ResponsiveStack.js b/docs/data/material/components/stack/ResponsiveStack.js deleted file mode 100644 index 8748fc90e12fb1..00000000000000 --- a/docs/data/material/components/stack/ResponsiveStack.js +++ /dev/null @@ -1,29 +0,0 @@ -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import { styled } from '@mui/material/styles'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function ResponsiveStack() { - return ( -
    - - Item 1 - Item 2 - Item 3 - -
    - ); -} diff --git a/docs/data/material/components/stack/ResponsiveStack.tsx b/docs/data/material/components/stack/ResponsiveStack.tsx deleted file mode 100644 index 8748fc90e12fb1..00000000000000 --- a/docs/data/material/components/stack/ResponsiveStack.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import { styled } from '@mui/material/styles'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -export default function ResponsiveStack() { - return ( -
    - - Item 1 - Item 2 - Item 3 - -
    - ); -} diff --git a/docs/data/material/components/stack/ResponsiveStack.tsx.preview b/docs/data/material/components/stack/ResponsiveStack.tsx.preview deleted file mode 100644 index 86c8eaeab63109..00000000000000 --- a/docs/data/material/components/stack/ResponsiveStack.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - Item 1 - Item 2 - Item 3 - \ No newline at end of file diff --git a/docs/data/material/components/stack/ZeroWidthStack.js b/docs/data/material/components/stack/ZeroWidthStack.js deleted file mode 100644 index 11d05a932b5e22..00000000000000 --- a/docs/data/material/components/stack/ZeroWidthStack.js +++ /dev/null @@ -1,44 +0,0 @@ -import Avatar from '@mui/material/Avatar'; -import Box from '@mui/material/Box'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; -import { styled } from '@mui/material/styles'; -import Typography from '@mui/material/Typography'; - -const Item = styled(Paper)(({ theme }) => ({ - backgroundColor: '#fff', - ...theme.typography.body2, - padding: theme.spacing(1), - textAlign: 'center', - color: (theme.vars ?? theme).palette.text.secondary, - maxWidth: 400, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - }), -})); - -const message = `Truncation should be conditionally applicable on this long line of text - as this is a much longer line than what the container can support.`; - -export default function ZeroWidthStack() { - return ( - - - - W - {message} - - - - - - W - - - {message} - - - - - ); -} diff --git a/docs/data/material/components/stack/ZeroWidthStack.tsx.preview b/docs/data/material/components/stack/ZeroWidthStack.tsx.preview deleted file mode 100644 index b920913909ceaa..00000000000000 --- a/docs/data/material/components/stack/ZeroWidthStack.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - - W - {message} - - - - - - W - - - {message} - - - \ No newline at end of file diff --git a/docs/data/material/components/stack/demos/basic/BasicStack.tsx b/docs/data/material/components/stack/demos/basic/BasicStack.tsx new file mode 100644 index 00000000000000..2f65d29b30c356 --- /dev/null +++ b/docs/data/material/components/stack/demos/basic/BasicStack.tsx @@ -0,0 +1,29 @@ +import Box from '@mui/material/Box'; +import Paper from '@mui/material/Paper'; +import Stack from '@mui/material/Stack'; +import { styled } from '@mui/material/styles'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: (theme.vars ?? theme).palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function BasicStack() { + return ( + + {/* @focus-start */} + + Item 1 + Item 2 + Item 3 + + {/* @focus-end */} + + ); +} diff --git a/docs/data/material/components/stack/demos/basic/client.ts b/docs/data/material/components/stack/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/stack/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/stack/demos/basic/index.ts b/docs/data/material/components/stack/demos/basic/index.ts new file mode 100644 index 00000000000000..284f5cb5d7147e --- /dev/null +++ b/docs/data/material/components/stack/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicStack from './BasicStack'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicStack, { ClientProvider }); diff --git a/docs/data/material/components/stack/demos/direction/DirectionStack.tsx b/docs/data/material/components/stack/demos/direction/DirectionStack.tsx new file mode 100644 index 00000000000000..cd3d3be2a4a360 --- /dev/null +++ b/docs/data/material/components/stack/demos/direction/DirectionStack.tsx @@ -0,0 +1,28 @@ +import Paper from '@mui/material/Paper'; +import Stack from '@mui/material/Stack'; +import { styled } from '@mui/material/styles'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: (theme.vars ?? theme).palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function DirectionStack() { + return ( +
    + {/* @focus-start */} + + Item 1 + Item 2 + Item 3 + + {/* @focus-end */} +
    + ); +} diff --git a/docs/data/material/components/stack/demos/direction/client.ts b/docs/data/material/components/stack/demos/direction/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/stack/demos/direction/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/stack/demos/direction/index.ts b/docs/data/material/components/stack/demos/direction/index.ts new file mode 100644 index 00000000000000..afe26cf768c4e6 --- /dev/null +++ b/docs/data/material/components/stack/demos/direction/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DirectionStack from './DirectionStack'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DirectionStack, { ClientProvider }); diff --git a/docs/data/material/components/stack/demos/divider/DividerStack.tsx b/docs/data/material/components/stack/demos/divider/DividerStack.tsx new file mode 100644 index 00000000000000..a5f1b09c13beb4 --- /dev/null +++ b/docs/data/material/components/stack/demos/divider/DividerStack.tsx @@ -0,0 +1,33 @@ +import Divider from '@mui/material/Divider'; +import Paper from '@mui/material/Paper'; +import Stack from '@mui/material/Stack'; +import { styled } from '@mui/material/styles'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: (theme.vars ?? theme).palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function DividerStack() { + return ( +
    + {/* @focus-start */} + } + spacing={2} + > + Item 1 + Item 2 + Item 3 + + {/* @focus-end */} +
    + ); +} diff --git a/docs/data/material/components/stack/demos/divider/client.ts b/docs/data/material/components/stack/demos/divider/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/stack/demos/divider/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/stack/demos/divider/index.ts b/docs/data/material/components/stack/demos/divider/index.ts new file mode 100644 index 00000000000000..7bdeffae96981b --- /dev/null +++ b/docs/data/material/components/stack/demos/divider/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DividerStack from './DividerStack'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DividerStack, { ClientProvider }); diff --git a/docs/data/material/components/stack/demos/flexbox-gap/FlexboxGapStack.tsx b/docs/data/material/components/stack/demos/flexbox-gap/FlexboxGapStack.tsx new file mode 100644 index 00000000000000..bd5f61fa338ad5 --- /dev/null +++ b/docs/data/material/components/stack/demos/flexbox-gap/FlexboxGapStack.tsx @@ -0,0 +1,35 @@ +import Paper from '@mui/material/Paper'; +import Stack from '@mui/material/Stack'; +import Box from '@mui/material/Box'; +import { styled } from '@mui/material/styles'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: (theme.vars ?? theme).palette.text.secondary, + flexGrow: 1, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function FlexboxGapStack() { + return ( + + {/* @focus-start */} + + Item 1 + Item 2 + Long content + + {/* @focus-end */} + + ); +} diff --git a/docs/data/material/components/stack/demos/flexbox-gap/client.ts b/docs/data/material/components/stack/demos/flexbox-gap/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/stack/demos/flexbox-gap/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/stack/demos/flexbox-gap/index.ts b/docs/data/material/components/stack/demos/flexbox-gap/index.ts new file mode 100644 index 00000000000000..3a9ff68145d45b --- /dev/null +++ b/docs/data/material/components/stack/demos/flexbox-gap/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FlexboxGapStack from './FlexboxGapStack'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FlexboxGapStack, { ClientProvider }); diff --git a/docs/data/material/components/stack/demos/interactive/InteractiveStack.tsx b/docs/data/material/components/stack/demos/interactive/InteractiveStack.tsx new file mode 100644 index 00000000000000..d944f7d0ccbd84 --- /dev/null +++ b/docs/data/material/components/stack/demos/interactive/InteractiveStack.tsx @@ -0,0 +1,204 @@ +import * as React from 'react'; +import FormControl from '@mui/material/FormControl'; +import FormLabel from '@mui/material/FormLabel'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import Grid from '@mui/material/Grid'; +import Paper from '@mui/material/Paper'; +import RadioGroup from '@mui/material/RadioGroup'; +import Radio from '@mui/material/Radio'; +import Stack from '@mui/material/Stack'; +import type { StackProps } from '@mui/material/Stack'; +import { HighlightedCode } from '@mui/internal-core-docs/HighlightedCode'; + +export default function InteractiveStack() { + // @focus-start @padding 1 + const [direction, setDirection] = React.useState('row'); + const [justifyContent, setJustifyContent] = React.useState('center'); + const [alignItems, setAlignItems] = React.useState('center'); + const [spacing, setSpacing] = React.useState(2); + + const jsx = ` + +`; + + return ( + + + {[0, 1, 2].map((value) => ( + ({ + p: 2, + pt: value + 1, + pb: value + 1, + color: 'text.secondary', + typography: 'body2', + backgroundColor: '#fff', + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), + })} + > + {`Item ${value + 1}`} + + ))} + + + + + + direction + { + setDirection(event.target.value as StackProps['direction']); + }} + > + } label="row" /> + } + label="row-reverse" + /> + } + label="column" + /> + } + label="column-reverse" + /> + + + + + + alignItems + { + setAlignItems(event.target.value); + }} + > + } + label="flex-start" + /> + } + label="center" + /> + } + label="flex-end" + /> + } + label="stretch" + /> + } + label="baseline" + /> + + + + + + justifyContent + { + setJustifyContent(event.target.value); + }} + > + } + label="flex-start" + /> + } + label="center" + /> + } + label="flex-end" + /> + } + label="space-between" + /> + } + label="space-around" + /> + } + label="space-evenly" + /> + + + + + + spacing + ) => { + setSpacing(Number((event.target as HTMLInputElement).value)); + }} + > + {[0, 0.5, 1, 2, 3, 4, 8, 12].map((value) => ( + } + label={value} + /> + ))} + + + + + + + + ); + // @focus-end +} diff --git a/docs/data/material/components/stack/demos/interactive/client.ts b/docs/data/material/components/stack/demos/interactive/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/stack/demos/interactive/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/stack/demos/interactive/index.ts b/docs/data/material/components/stack/demos/interactive/index.ts new file mode 100644 index 00000000000000..80cf73c941c7da --- /dev/null +++ b/docs/data/material/components/stack/demos/interactive/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import InteractiveStack from './InteractiveStack'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, InteractiveStack, { ClientProvider }); diff --git a/docs/data/material/components/stack/demos/responsive/ResponsiveStack.tsx b/docs/data/material/components/stack/demos/responsive/ResponsiveStack.tsx new file mode 100644 index 00000000000000..a29709cf63862e --- /dev/null +++ b/docs/data/material/components/stack/demos/responsive/ResponsiveStack.tsx @@ -0,0 +1,31 @@ +import Paper from '@mui/material/Paper'; +import Stack from '@mui/material/Stack'; +import { styled } from '@mui/material/styles'; + +const Item = styled(Paper)(({ theme }) => ({ + backgroundColor: '#fff', + ...theme.typography.body2, + padding: theme.spacing(1), + textAlign: 'center', + color: (theme.vars ?? theme).palette.text.secondary, + ...theme.applyStyles('dark', { + backgroundColor: '#1A2027', + }), +})); + +export default function ResponsiveStack() { + return ( +
    + {/* @focus-start */} + + Item 1 + Item 2 + Item 3 + + {/* @focus-end */} +
    + ); +} diff --git a/docs/data/material/components/stack/demos/responsive/client.ts b/docs/data/material/components/stack/demos/responsive/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/stack/demos/responsive/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/stack/demos/responsive/index.ts b/docs/data/material/components/stack/demos/responsive/index.ts new file mode 100644 index 00000000000000..bc8a1754e92947 --- /dev/null +++ b/docs/data/material/components/stack/demos/responsive/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ResponsiveStack from './ResponsiveStack'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ResponsiveStack, { ClientProvider }); diff --git a/docs/data/material/components/stack/ZeroWidthStack.tsx b/docs/data/material/components/stack/demos/zero-width/ZeroWidthStack.tsx similarity index 96% rename from docs/data/material/components/stack/ZeroWidthStack.tsx rename to docs/data/material/components/stack/demos/zero-width/ZeroWidthStack.tsx index 11d05a932b5e22..07897efa78a712 100644 --- a/docs/data/material/components/stack/ZeroWidthStack.tsx +++ b/docs/data/material/components/stack/demos/zero-width/ZeroWidthStack.tsx @@ -23,6 +23,7 @@ const message = `Truncation should be conditionally applicable on this long line export default function ZeroWidthStack() { return ( + {/* @focus-start */} W @@ -39,6 +40,7 @@ export default function ZeroWidthStack() {     + {/* @focus-end */} ); } diff --git a/docs/data/material/components/stack/demos/zero-width/client.ts b/docs/data/material/components/stack/demos/zero-width/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/stack/demos/zero-width/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/stack/demos/zero-width/index.ts b/docs/data/material/components/stack/demos/zero-width/index.ts new file mode 100644 index 00000000000000..0fa0d5f7143d6e --- /dev/null +++ b/docs/data/material/components/stack/demos/zero-width/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ZeroWidthStack from './ZeroWidthStack'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ZeroWidthStack, { ClientProvider }); diff --git a/docs/data/material/components/stack/stack.md b/docs/data/material/components/stack/stack.md index ecee7a0b1a5f00..017512dc552d0a 100644 --- a/docs/data/material/components/stack/stack.md +++ b/docs/data/material/components/stack/stack.md @@ -32,7 +32,7 @@ Use the `spacing` prop to control the space between children. The spacing value can be any number, including decimals, or a string. (The prop is converted into a CSS property using the [`theme.spacing()`](/material-ui/customization/spacing/) helper.) -{{"demo": "BasicStack.js", "bg": true}} +{{"component": "file://./demos/basic/index.ts", "bg": true}} ### Stack vs. Grid @@ -43,20 +43,20 @@ The spacing value can be any number, including decimals, or a string. By default, Stack arranges items vertically in a column. Use the `direction` prop to position items horizontally in a row: -{{"demo": "DirectionStack.js", "bg": true}} +{{"component": "file://./demos/direction/index.ts", "bg": true}} ## Dividers Use the `divider` prop to insert an element between each child. This works particularly well with the [Divider](/material-ui/react-divider/) component, as shown below: -{{"demo": "DividerStack.js", "bg": true}} +{{"component": "file://./demos/divider/index.ts", "bg": true}} ## Responsive values You can switch the `direction` or `spacing` values based on the active breakpoint. -{{"demo": "ResponsiveStack.js", "bg": true}} +{{"component": "file://./demos/responsive/index.ts", "bg": true}} ## Flexbox gap @@ -66,7 +66,7 @@ It removes the [known limitations](#limitations) of the default implementation t We recommend checking the [support percentage](https://caniuse.com/?search=flex%20gap) before using it. -{{"demo": "FlexboxGapStack.js", "bg": true}} +{{"component": "file://./demos/flexbox-gap/index.ts", "bg": true}} To set the prop to all stack instances, create a theme with default props: @@ -97,7 +97,7 @@ function App() { Below is an interactive demo that lets you explore the visual results of the different settings: -{{"demo": "InteractiveStack.js", "hideToolbar": true, "bg": true}} +{{"component": "file://./demos/interactive/index.ts", "hideToolbar": true, "bg": true}} ## Customization @@ -146,7 +146,7 @@ In order for the item to stay within the container you need to set `min-width: 0 ``` -{{"demo": "ZeroWidthStack.js", "bg": true}} +{{"component": "file://./demos/zero-width/index.ts", "bg": true}} ## Anatomy diff --git a/docs/data/material/components/steppers/CustomizedSteppers.js b/docs/data/material/components/steppers/CustomizedSteppers.js deleted file mode 100644 index f8b86949bed8a8..00000000000000 --- a/docs/data/material/components/steppers/CustomizedSteppers.js +++ /dev/null @@ -1,211 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { styled } from '@mui/material/styles'; -import Stack from '@mui/material/Stack'; -import Stepper from '@mui/material/Stepper'; -import Step from '@mui/material/Step'; -import StepLabel from '@mui/material/StepLabel'; -import Check from '@mui/icons-material/Check'; -import SettingsIcon from '@mui/icons-material/Settings'; -import GroupAddIcon from '@mui/icons-material/GroupAdd'; -import VideoLabelIcon from '@mui/icons-material/VideoLabel'; -import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector'; - -const QontoConnector = styled(StepConnector)(({ theme }) => ({ - [`&.${stepConnectorClasses.alternativeLabel}`]: { - top: 10, - left: 'calc(-50% + 16px)', - right: 'calc(50% + 16px)', - }, - [`&.${stepConnectorClasses.active}`]: { - [`& .${stepConnectorClasses.line}`]: { - borderColor: '#784af4', - }, - }, - [`&.${stepConnectorClasses.completed}`]: { - [`& .${stepConnectorClasses.line}`]: { - borderColor: '#784af4', - }, - }, - [`& .${stepConnectorClasses.line}`]: { - borderColor: '#eaeaf0', - borderTopWidth: 3, - borderRadius: 1, - ...theme.applyStyles('dark', { - borderColor: theme.palette.grey[800], - }), - }, -})); - -const QontoStepIconRoot = styled('div')(({ theme }) => ({ - color: '#eaeaf0', - display: 'flex', - height: 22, - alignItems: 'center', - '& .QontoStepIcon-completedIcon': { - color: '#784af4', - zIndex: 1, - fontSize: 18, - }, - '& .QontoStepIcon-circle': { - width: 8, - height: 8, - borderRadius: '50%', - backgroundColor: 'currentColor', - }, - ...theme.applyStyles('dark', { - color: theme.palette.grey[700], - }), - variants: [ - { - props: ({ ownerState }) => ownerState.active, - style: { - color: '#784af4', - }, - }, - ], -})); - -function QontoStepIcon(props) { - const { active, completed, className } = props; - - return ( - - {completed ? ( - - ) : ( -
    - )} - - ); -} - -QontoStepIcon.propTypes = { - /** - * Whether this step is active. - * @default false - */ - active: PropTypes.bool, - className: PropTypes.string, - /** - * Mark the step as completed. Is passed to child components. - * @default false - */ - completed: PropTypes.bool, -}; - -const ColorlibConnector = styled(StepConnector)(({ theme }) => ({ - [`&.${stepConnectorClasses.alternativeLabel}`]: { - top: 22, - }, - [`&.${stepConnectorClasses.active}`]: { - [`& .${stepConnectorClasses.line}`]: { - backgroundImage: - 'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)', - }, - }, - [`&.${stepConnectorClasses.completed}`]: { - [`& .${stepConnectorClasses.line}`]: { - backgroundImage: - 'linear-gradient( 95deg,rgb(242,113,33) 0%,rgb(233,64,87) 50%,rgb(138,35,135) 100%)', - }, - }, - [`& .${stepConnectorClasses.line}`]: { - height: 3, - border: 0, - backgroundColor: '#eaeaf0', - borderRadius: 1, - ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[800], - }), - }, -})); - -const ColorlibStepIconRoot = styled('div')(({ theme }) => ({ - backgroundColor: '#ccc', - zIndex: 1, - color: '#fff', - width: 50, - height: 50, - display: 'flex', - borderRadius: '50%', - justifyContent: 'center', - alignItems: 'center', - ...theme.applyStyles('dark', { - backgroundColor: theme.palette.grey[700], - }), - variants: [ - { - props: ({ ownerState }) => ownerState.active, - style: { - backgroundImage: - 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)', - boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)', - }, - }, - { - props: ({ ownerState }) => ownerState.completed, - style: { - backgroundImage: - 'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)', - }, - }, - ], -})); - -function ColorlibStepIcon(props) { - const { active, completed, className } = props; - - const icons = { - 1: , - 2: , - 3: , - }; - - return ( - - {icons[String(props.icon)]} - - ); -} - -ColorlibStepIcon.propTypes = { - /** - * Whether this step is active. - * @default false - */ - active: PropTypes.bool, - className: PropTypes.string, - /** - * Mark the step as completed. Is passed to child components. - * @default false - */ - completed: PropTypes.bool, - /** - * The label displayed in the step icon. - */ - icon: PropTypes.node, -}; - -const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad']; - -export default function CustomizedSteppers() { - return ( - - }> - {steps.map((label) => ( - - {label} - - ))} - - }> - {steps.map((label) => ( - - {label} - - ))} - - - ); -} diff --git a/docs/data/material/components/steppers/CustomizedSteppers.tsx.preview b/docs/data/material/components/steppers/CustomizedSteppers.tsx.preview deleted file mode 100644 index 5448dc5701c1a4..00000000000000 --- a/docs/data/material/components/steppers/CustomizedSteppers.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ -}> - {steps.map((label) => ( - - {label} - - ))} - -}> - {steps.map((label) => ( - - {label} - - ))} - \ No newline at end of file diff --git a/docs/data/material/components/steppers/DotsMobileStepper.js b/docs/data/material/components/steppers/DotsMobileStepper.js deleted file mode 100644 index 43010553bb60aa..00000000000000 --- a/docs/data/material/components/steppers/DotsMobileStepper.js +++ /dev/null @@ -1,86 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/material/styles'; -import MobileStepper from '@mui/material/MobileStepper'; -import Button from '@mui/material/Button'; -import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'; -import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; - -const steps = 6; - -export default function DotsMobileStepper() { - const theme = useTheme(); - const [activeStep, setActiveStep] = React.useState(0); - - const handleNext = () => { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const nextButtonRef = React.useRef(null); - const backButtonRef = React.useRef(null); - const previousActiveStepRef = React.useRef(activeStep); - - // Manage focus when the active step changes. - React.useEffect(() => { - const previousActiveStep = previousActiveStepRef.current; - previousActiveStepRef.current = activeStep; - - if (activeStep === 0 && previousActiveStep === 1) { - // If the user is going back to the first step, focus the "Next" button. - nextButtonRef.current.focus(); - return; - } - if (activeStep === steps - 1 && previousActiveStep === steps - 2) { - // If the user is going to the last step, focus the "Back" button. - backButtonRef.current.focus(); - } - }, [activeStep]); - - return ( - - Next - {theme.direction === 'rtl' ? ( - - ) : ( - - )} - - } - backButton={ - - } - /> - ); -} diff --git a/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.js b/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.js deleted file mode 100644 index 47c0714a8a6edd..00000000000000 --- a/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.js +++ /dev/null @@ -1,24 +0,0 @@ -import Box from '@mui/material/Box'; -import Stepper from '@mui/material/Stepper'; -import Step from '@mui/material/Step'; -import StepLabel from '@mui/material/StepLabel'; - -const steps = [ - 'Select master blaster campaign settings', - 'Create an ad group', - 'Create an ad', -]; - -export default function HorizontalLinearAlternativeLabelStepper() { - return ( - - - {steps.map((label) => ( - - {label} - - ))} - - - ); -} diff --git a/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx.preview b/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx.preview deleted file mode 100644 index f56572d3978e78..00000000000000 --- a/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - {steps.map((label) => ( - - {label} - - ))} - \ No newline at end of file diff --git a/docs/data/material/components/steppers/HorizontalLinearStepper.js b/docs/data/material/components/steppers/HorizontalLinearStepper.js deleted file mode 100644 index 86a9e45eb6b50e..00000000000000 --- a/docs/data/material/components/steppers/HorizontalLinearStepper.js +++ /dev/null @@ -1,141 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stepper from '@mui/material/Stepper'; -import Step from '@mui/material/Step'; -import StepLabel from '@mui/material/StepLabel'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; - -const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad']; - -export default function HorizontalLinearStepper() { - const [activeStep, setActiveStep] = React.useState(0); - const [skipped, setSkipped] = React.useState(new Set()); - - const isStepOptional = React.useCallback((step) => { - return step === 1; - }, []); - - const isStepSkipped = (step) => { - return skipped.has(step); - }; - - const handleNext = () => { - let newSkipped = skipped; - if (isStepSkipped(activeStep)) { - newSkipped = new Set(newSkipped.values()); - newSkipped.delete(activeStep); - } - - setActiveStep((prevActiveStep) => prevActiveStep + 1); - setSkipped(newSkipped); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const handleSkip = () => { - if (!isStepOptional(activeStep)) { - // You probably want to guard against something like this, - // it should never occur unless someone's actively trying to break something. - throw new Error("You can't skip a step that isn't optional."); - } - - setActiveStep((prevActiveStep) => prevActiveStep + 1); - setSkipped((prevSkipped) => { - const newSkipped = new Set(prevSkipped.values()); - newSkipped.add(activeStep); - return newSkipped; - }); - }; - - const handleReset = () => { - setActiveStep(0); - }; - - const previousActiveStepRef = React.useRef(activeStep); - const resetButtonRef = React.useRef(null); - const nextButtonRef = React.useRef(null); - - // Manage focus when the active step changes. - React.useEffect(() => { - const previousActiveStep = previousActiveStepRef.current; - previousActiveStepRef.current = activeStep; - - if (activeStep === steps.length) { - // If the user has completed all steps and hits "Finish", focus the "Reset" button. - resetButtonRef.current.focus(); - return; - } - if (activeStep === 0 && previousActiveStep === steps.length) { - // If the user has completed all steps and hits "Reset", focus the "Next" button. - nextButtonRef.current.focus(); - return; - } - if (isStepOptional(previousActiveStep) && !isStepOptional(activeStep)) { - // If the user hits "Skip" and the next step is not optional, focus the "Next" button. - nextButtonRef.current.focus(); - } - }, [activeStep, isStepOptional]); - - return ( - - - {steps.map((label, index) => { - const stepProps = {}; - const labelProps = {}; - if (isStepOptional(index)) { - labelProps.optional = ( - Optional - ); - } - if (isStepSkipped(index)) { - stepProps.completed = false; - } - return ( - - {label} - - ); - })} - - {activeStep === steps.length ? ( - - - All steps completed - you're finished - - - - - - - ) : ( - - Step {activeStep + 1} - - - - {isStepOptional(activeStep) && ( - - )} - - - - )} - - ); -} diff --git a/docs/data/material/components/steppers/HorizontalNonLinearStepper.js b/docs/data/material/components/steppers/HorizontalNonLinearStepper.js deleted file mode 100644 index a9a026c7006617..00000000000000 --- a/docs/data/material/components/steppers/HorizontalNonLinearStepper.js +++ /dev/null @@ -1,148 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stepper from '@mui/material/Stepper'; -import Step from '@mui/material/Step'; -import StepButton from '@mui/material/StepButton'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; - -const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad']; - -export default function HorizontalNonLinearStepper() { - const [activeStep, setActiveStep] = React.useState(0); - const [completed, setCompleted] = React.useState({}); - - const totalSteps = steps.length; - const completedSteps = Object.keys(completed).length; - const isLastStep = activeStep === totalSteps - 1; - const allStepsCompleted = completedSteps === totalSteps; - - const handleNext = () => { - const newActiveStep = - isLastStep && !allStepsCompleted - ? // It's the last step, but not all steps have been completed, - // find the first step that has not been completed - steps.findIndex((_step, i) => !(i in completed)) - : activeStep + 1; - setActiveStep(newActiveStep); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const handleStep = (step) => () => { - setActiveStep(step); - }; - - const handleComplete = () => { - setCompleted({ - ...completed, - [activeStep]: true, - }); - handleNext(); - }; - - const handleReset = () => { - setActiveStep(0); - setCompleted({}); - }; - - const resetButtonRef = React.useRef(null); - const nextButtonRef = React.useRef(null); - const previousActiveStepRef = React.useRef(activeStep); - const previousCompletedRef = React.useRef(completed); - - // Manage focus when the completed steps change. - React.useEffect(() => { - const previousCompleted = previousCompletedRef.current; - previousCompletedRef.current = completed; - - if (allStepsCompleted) { - // If the user has completed all steps and hits "Finish", focus the "Reset" button. - resetButtonRef.current.focus(); - return; - } - - if ( - Object.keys(completed).length === 0 && - Object.keys(previousCompleted).length !== 0 - ) { - // If the user has completed all steps and hits "Reset", focus the "Next" button. - nextButtonRef.current.focus(); - } - }, [completed, allStepsCompleted]); - - // Manage focus when the active step changes. - React.useEffect(() => { - if (activeStep === 0 && previousActiveStepRef.current === 1) { - // If the user navigated to first step via "Back" button, focus the "Next" button. - nextButtonRef.current.focus(); - } - - previousActiveStepRef.current = activeStep; - }, [activeStep]); - - return ( - - - {steps.map((label, index) => ( - - - {label} - - - ))} - -
    - {allStepsCompleted ? ( - - - All steps completed - you're finished - - - - - - - ) : ( - - - Step {activeStep + 1} - - - - - - {activeStep !== steps.length && - (completed[activeStep] ? ( - - Step {activeStep + 1} already completed - - ) : ( - - ))} - - - )} -
    -     - ); -} diff --git a/docs/data/material/components/steppers/HorizontalStepperWithError.js b/docs/data/material/components/steppers/HorizontalStepperWithError.js deleted file mode 100644 index 3827ba627ea271..00000000000000 --- a/docs/data/material/components/steppers/HorizontalStepperWithError.js +++ /dev/null @@ -1,39 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stepper from '@mui/material/Stepper'; -import Step from '@mui/material/Step'; -import StepLabel from '@mui/material/StepLabel'; -import Typography from '@mui/material/Typography'; - -const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad']; - -export default function HorizontalStepperWithError() { - const isStepFailed = (step) => { - return step === 1; - }; - - return ( - - - {steps.map((label, index) => { - const labelProps = {}; - if (isStepFailed(index)) { - labelProps.optional = ( - - Alert message - - ); - - labelProps.error = true; - } - - return ( - - {label} - - ); - })} - - - ); -} diff --git a/docs/data/material/components/steppers/ProgressMobileStepper.js b/docs/data/material/components/steppers/ProgressMobileStepper.js deleted file mode 100644 index 68e89fe7d468f1..00000000000000 --- a/docs/data/material/components/steppers/ProgressMobileStepper.js +++ /dev/null @@ -1,83 +0,0 @@ -import * as React from 'react'; -import { useTheme } from '@mui/material/styles'; -import MobileStepper from '@mui/material/MobileStepper'; -import Button from '@mui/material/Button'; -import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'; -import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; - -export default function ProgressMobileStepper() { - const theme = useTheme(); - const [activeStep, setActiveStep] = React.useState(0); - - const handleNext = () => { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const nextButtonRef = React.useRef(null); - const backButtonRef = React.useRef(null); - const previousActiveStepRef = React.useRef(activeStep); - - // Manage focus when the active step changes. - React.useEffect(() => { - const previousActiveStep = previousActiveStepRef.current; - - if (activeStep === 0 && previousActiveStep === 1) { - // If the user is going back to the first step, focus the "Next" button. - nextButtonRef.current.focus(); - } else if (activeStep === 5 && previousActiveStep === 4) { - // If the user is going to the last step, focus the "Back" button. - backButtonRef.current.focus(); - } - - previousActiveStepRef.current = activeStep; - }, [activeStep]); - - return ( - - Next - {theme.direction === 'rtl' ? ( - - ) : ( - - )} - - } - backButton={ - - } - /> - ); -} diff --git a/docs/data/material/components/steppers/TextMobileStepper.js b/docs/data/material/components/steppers/TextMobileStepper.js deleted file mode 100644 index 93e03baf878be7..00000000000000 --- a/docs/data/material/components/steppers/TextMobileStepper.js +++ /dev/null @@ -1,122 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import { useTheme } from '@mui/material/styles'; -import MobileStepper from '@mui/material/MobileStepper'; -import Paper from '@mui/material/Paper'; -import Typography from '@mui/material/Typography'; -import Button from '@mui/material/Button'; -import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'; -import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; - -const steps = [ - { - label: 'Select campaign settings', - description: `For each ad campaign that you create, you can control how much - you're willing to spend on clicks and conversions, which networks - and geographical locations you want your ads to show on, and more.`, - }, - { - label: 'Create an ad group', - description: - 'An ad group contains one or more ads which target a shared set of keywords.', - }, - { - label: 'Create an ad', - description: `Try out different ad text to see what brings in the most customers, - and learn how to enhance your ads using features like ad extensions. - If you run into any problems with your ads, find out how to tell if - they're running and how to resolve approval issues.`, - }, -]; - -export default function TextMobileStepper() { - const theme = useTheme(); - const [activeStep, setActiveStep] = React.useState(0); - const maxSteps = steps.length; - - const handleNext = () => { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const nextButtonRef = React.useRef(null); - const backButtonRef = React.useRef(null); - const previousActiveStepRef = React.useRef(activeStep); - - // Manage focus when the active step changes. - React.useEffect(() => { - const previousActiveStep = previousActiveStepRef.current; - previousActiveStepRef.current = activeStep; - - if (activeStep === 0 && previousActiveStep === 1) { - // If the user is going back to the first step, focus the "Next" button. - nextButtonRef.current.focus(); - return; - } - - if (activeStep === maxSteps - 1 && previousActiveStep === maxSteps - 2) { - // If the user is going to the last step, focus the "Back" button. - backButtonRef.current.focus(); - } - }, [activeStep, maxSteps]); - - return ( - - - {steps[activeStep].label} - - - {steps[activeStep].description} - - - Next - {theme.direction === 'rtl' ? ( - - ) : ( - - )} - - } - backButton={ - - } - /> - - ); -} diff --git a/docs/data/material/components/steppers/VerticalLinearAlternativeLabelStepper.js b/docs/data/material/components/steppers/VerticalLinearAlternativeLabelStepper.js deleted file mode 100644 index ac340f4e8715cb..00000000000000 --- a/docs/data/material/components/steppers/VerticalLinearAlternativeLabelStepper.js +++ /dev/null @@ -1,93 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stepper from '@mui/material/Stepper'; -import Step from '@mui/material/Step'; -import StepLabel from '@mui/material/StepLabel'; -import StepContent from '@mui/material/StepContent'; -import Button from '@mui/material/Button'; -import Paper from '@mui/material/Paper'; -import Typography from '@mui/material/Typography'; - -const steps = [ - { - label: 'Select campaign settings', - description: `For each ad campaign that you create, you can control how much - you're willing to spend on clicks and conversions, which networks - and geographical locations you want your ads to show on, and more.`, - }, - { - label: 'Create an ad group', - description: - 'An ad group contains one or more ads which target a shared set of keywords.', - }, - { - label: 'Create an ad', - description: `Try out different ad text to see what brings in the most customers, - and learn how to enhance your ads using features like ad extensions. - If you run into any problems with your ads, find out how to tell if - they're running and how to resolve approval issues.`, - }, -]; - -export default function VerticalLinearAlternativeLabelStepper() { - const [activeStep, setActiveStep] = React.useState(0); - - const handleNext = () => { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const handleReset = () => { - setActiveStep(0); - }; - - return ( - - - {steps.map((step, index) => ( - - Last step - ) : null - } - > - {step.label} - - - {step.description} - - - - - - - ))} - - {activeStep === steps.length && ( - - All steps completed - you're finished - - - )} - - ); -} diff --git a/docs/data/material/components/steppers/VerticalLinearStepper.js b/docs/data/material/components/steppers/VerticalLinearStepper.js deleted file mode 100644 index 0b5f81e987795c..00000000000000 --- a/docs/data/material/components/steppers/VerticalLinearStepper.js +++ /dev/null @@ -1,129 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Stepper from '@mui/material/Stepper'; -import Step from '@mui/material/Step'; -import StepLabel from '@mui/material/StepLabel'; -import StepContent from '@mui/material/StepContent'; -import Button from '@mui/material/Button'; -import Paper from '@mui/material/Paper'; -import Typography from '@mui/material/Typography'; - -const steps = [ - { - label: 'Select campaign settings', - description: `For each ad campaign that you create, you can control how much - you're willing to spend on clicks and conversions, which networks - and geographical locations you want your ads to show on, and more.`, - }, - { - label: 'Create an ad group', - description: - 'An ad group contains one or more ads which target a shared set of keywords.', - }, - { - label: 'Create an ad', - description: `Try out different ad text to see what brings in the most customers, - and learn how to enhance your ads using features like ad extensions. - If you run into any problems with your ads, find out how to tell if - they're running and how to resolve approval issues.`, - }, -]; - -export default function VerticalLinearStepper() { - const [activeStep, setActiveStep] = React.useState(0); - - const handleNext = () => { - setActiveStep((prevActiveStep) => prevActiveStep + 1); - }; - - const handleBack = () => { - setActiveStep((prevActiveStep) => prevActiveStep - 1); - }; - - const handleReset = () => { - setActiveStep(0); - }; - - const previousActiveStepRef = React.useRef(activeStep); - const continueButtonRef = React.useRef(null); - const backButtonRef = React.useRef(null); - const resetButtonRef = React.useRef(null); - - // Manage focus when the active step changes. - React.useEffect(() => { - const previousActiveStep = previousActiveStepRef.current; - previousActiveStepRef.current = activeStep; - - // If the user is going forward. - if (previousActiveStep < activeStep) { - if (activeStep === steps.length) { - // If the user has completed all steps and hits "Finish", focus the "Reset" button. - resetButtonRef.current.focus(); - } else { - // Focus the "Continue" button otherwise. - continueButtonRef.current.focus(); - } - return; - } - // Otherwise, the user is going back. - - if (activeStep === 0) { - // If the user hit "Back" on the second step, or hit "Reset", focus the "Continue" button. - continueButtonRef.current.focus(); - return; - } - - // Focus the "Back" button otherwise. - backButtonRef.current.focus(); - }, [activeStep]); - - return ( - - - {steps.map((step, index) => ( - - Last step - ) : null - } - > - {step.label} - - - {step.description} - - - {index !== 0 && ( - - )} - - - - ))} - - {activeStep === steps.length && ( - - All steps completed - you're finished - - - )} - - ); -} diff --git a/docs/data/material/components/steppers/CustomizedSteppers.tsx b/docs/data/material/components/steppers/demos/customized/CustomizedSteppers.tsx similarity index 97% rename from docs/data/material/components/steppers/CustomizedSteppers.tsx rename to docs/data/material/components/steppers/demos/customized/CustomizedSteppers.tsx index de27716a81a489..1c8de81ef7109a 100644 --- a/docs/data/material/components/steppers/CustomizedSteppers.tsx +++ b/docs/data/material/components/steppers/demos/customized/CustomizedSteppers.tsx @@ -9,7 +9,7 @@ import SettingsIcon from '@mui/icons-material/Settings'; import GroupAddIcon from '@mui/icons-material/GroupAdd'; import VideoLabelIcon from '@mui/icons-material/VideoLabel'; import StepConnector, { stepConnectorClasses } from '@mui/material/StepConnector'; -import { StepIconProps } from '@mui/material/StepIcon'; +import type { StepIconProps } from '@mui/material/StepIcon'; const QontoConnector = styled(StepConnector)(({ theme }) => ({ [`&.${stepConnectorClasses.alternativeLabel}`]: { @@ -164,6 +164,7 @@ const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad'] export default function CustomizedSteppers() { return ( + {/* @focus-start */} }> {steps.map((label) => ( @@ -178,6 +179,7 @@ export default function CustomizedSteppers() { ))} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/steppers/demos/customized/client.ts b/docs/data/material/components/steppers/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/steppers/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/steppers/demos/customized/index.ts b/docs/data/material/components/steppers/demos/customized/index.ts new file mode 100644 index 00000000000000..d88a0234dde8ab --- /dev/null +++ b/docs/data/material/components/steppers/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedSteppers from './CustomizedSteppers'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedSteppers, { ClientProvider }); diff --git a/docs/data/material/components/steppers/DotsMobileStepper.tsx b/docs/data/material/components/steppers/demos/dots-mobile/DotsMobileStepper.tsx similarity index 98% rename from docs/data/material/components/steppers/DotsMobileStepper.tsx rename to docs/data/material/components/steppers/demos/dots-mobile/DotsMobileStepper.tsx index b7fe84f9502011..e36b50cf42177c 100644 --- a/docs/data/material/components/steppers/DotsMobileStepper.tsx +++ b/docs/data/material/components/steppers/demos/dots-mobile/DotsMobileStepper.tsx @@ -8,6 +8,7 @@ import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; const steps = 6; export default function DotsMobileStepper() { + // @focus-start @padding 1 const theme = useTheme(); const [activeStep, setActiveStep] = React.useState(0); @@ -83,4 +84,5 @@ export default function DotsMobileStepper() { } /> ); + // @focus-end } diff --git a/docs/data/material/components/steppers/demos/dots-mobile/client.ts b/docs/data/material/components/steppers/demos/dots-mobile/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/steppers/demos/dots-mobile/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/steppers/demos/dots-mobile/index.ts b/docs/data/material/components/steppers/demos/dots-mobile/index.ts new file mode 100644 index 00000000000000..ea0030277feed6 --- /dev/null +++ b/docs/data/material/components/steppers/demos/dots-mobile/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DotsMobileStepper from './DotsMobileStepper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DotsMobileStepper, { ClientProvider }); diff --git a/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx b/docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/HorizontalLinearAlternativeLabelStepper.tsx similarity index 92% rename from docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx rename to docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/HorizontalLinearAlternativeLabelStepper.tsx index 47c0714a8a6edd..35b5c92b370463 100644 --- a/docs/data/material/components/steppers/HorizontalLinearAlternativeLabelStepper.tsx +++ b/docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/HorizontalLinearAlternativeLabelStepper.tsx @@ -12,6 +12,7 @@ const steps = [ export default function HorizontalLinearAlternativeLabelStepper() { return ( + {/* @focus-start */} {steps.map((label) => ( @@ -19,6 +20,7 @@ export default function HorizontalLinearAlternativeLabelStepper() { ))} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/client.ts b/docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/index.ts b/docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/index.ts new file mode 100644 index 00000000000000..89b5eb17f89e5f --- /dev/null +++ b/docs/data/material/components/steppers/demos/horizontal-linear-alternative-label/index.ts @@ -0,0 +1,8 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HorizontalLinearAlternativeLabelStepper from './HorizontalLinearAlternativeLabelStepper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HorizontalLinearAlternativeLabelStepper, { + ClientProvider, +}); diff --git a/docs/data/material/components/steppers/HorizontalLinearStepper.tsx b/docs/data/material/components/steppers/demos/horizontal-linear/HorizontalLinearStepper.tsx similarity index 99% rename from docs/data/material/components/steppers/HorizontalLinearStepper.tsx rename to docs/data/material/components/steppers/demos/horizontal-linear/HorizontalLinearStepper.tsx index 66a788090f93d9..5472bd6e0347bc 100644 --- a/docs/data/material/components/steppers/HorizontalLinearStepper.tsx +++ b/docs/data/material/components/steppers/demos/horizontal-linear/HorizontalLinearStepper.tsx @@ -9,6 +9,7 @@ import Typography from '@mui/material/Typography'; const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad']; export default function HorizontalLinearStepper() { + // @focus-start @padding 1 const [activeStep, setActiveStep] = React.useState(0); const [skipped, setSkipped] = React.useState(new Set()); @@ -140,4 +141,5 @@ export default function HorizontalLinearStepper() { )} ); + // @focus-end } diff --git a/docs/data/material/components/steppers/demos/horizontal-linear/client.ts b/docs/data/material/components/steppers/demos/horizontal-linear/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/steppers/demos/horizontal-linear/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/steppers/demos/horizontal-linear/index.ts b/docs/data/material/components/steppers/demos/horizontal-linear/index.ts new file mode 100644 index 00000000000000..5f3dd8712ce0a8 --- /dev/null +++ b/docs/data/material/components/steppers/demos/horizontal-linear/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HorizontalLinearStepper from './HorizontalLinearStepper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HorizontalLinearStepper, { ClientProvider }); diff --git a/docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx b/docs/data/material/components/steppers/demos/horizontal-non-linear/HorizontalNonLinearStepper.tsx similarity index 99% rename from docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx rename to docs/data/material/components/steppers/demos/horizontal-non-linear/HorizontalNonLinearStepper.tsx index b88260f4b7a3c9..3c76be02e2d707 100644 --- a/docs/data/material/components/steppers/HorizontalNonLinearStepper.tsx +++ b/docs/data/material/components/steppers/demos/horizontal-non-linear/HorizontalNonLinearStepper.tsx @@ -9,6 +9,7 @@ import Typography from '@mui/material/Typography'; const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad']; export default function HorizontalNonLinearStepper() { + // @focus-start @padding 1 const [activeStep, setActiveStep] = React.useState(0); const [completed, setCompleted] = React.useState<{ [k: number]: boolean; @@ -147,4 +148,5 @@ export default function HorizontalNonLinearStepper() {
    ); + // @focus-end } diff --git a/docs/data/material/components/steppers/demos/horizontal-non-linear/client.ts b/docs/data/material/components/steppers/demos/horizontal-non-linear/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/steppers/demos/horizontal-non-linear/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/steppers/demos/horizontal-non-linear/index.ts b/docs/data/material/components/steppers/demos/horizontal-non-linear/index.ts new file mode 100644 index 00000000000000..260efd793b1712 --- /dev/null +++ b/docs/data/material/components/steppers/demos/horizontal-non-linear/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HorizontalNonLinearStepper from './HorizontalNonLinearStepper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HorizontalNonLinearStepper, { ClientProvider }); diff --git a/docs/data/material/components/steppers/HorizontalStepperWithError.tsx b/docs/data/material/components/steppers/demos/horizontal-with-error/HorizontalStepperWithError.tsx similarity index 96% rename from docs/data/material/components/steppers/HorizontalStepperWithError.tsx rename to docs/data/material/components/steppers/demos/horizontal-with-error/HorizontalStepperWithError.tsx index 47b41eefe0c176..14a69174d0c399 100644 --- a/docs/data/material/components/steppers/HorizontalStepperWithError.tsx +++ b/docs/data/material/components/steppers/demos/horizontal-with-error/HorizontalStepperWithError.tsx @@ -8,6 +8,7 @@ import Typography from '@mui/material/Typography'; const steps = ['Select campaign settings', 'Create an ad group', 'Create an ad']; export default function HorizontalStepperWithError() { + // @focus-start @padding 1 const isStepFailed = (step: number) => { return step === 1; }; @@ -38,4 +39,5 @@ export default function HorizontalStepperWithError() { ); + // @focus-end } diff --git a/docs/data/material/components/steppers/demos/horizontal-with-error/client.ts b/docs/data/material/components/steppers/demos/horizontal-with-error/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/steppers/demos/horizontal-with-error/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/steppers/demos/horizontal-with-error/index.ts b/docs/data/material/components/steppers/demos/horizontal-with-error/index.ts new file mode 100644 index 00000000000000..dda8390eeb3975 --- /dev/null +++ b/docs/data/material/components/steppers/demos/horizontal-with-error/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HorizontalStepperWithError from './HorizontalStepperWithError'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HorizontalStepperWithError, { ClientProvider }); diff --git a/docs/data/material/components/steppers/ProgressMobileStepper.tsx b/docs/data/material/components/steppers/demos/progress-mobile/ProgressMobileStepper.tsx similarity index 98% rename from docs/data/material/components/steppers/ProgressMobileStepper.tsx rename to docs/data/material/components/steppers/demos/progress-mobile/ProgressMobileStepper.tsx index 0115ca7793ea78..0315a17a4842ed 100644 --- a/docs/data/material/components/steppers/ProgressMobileStepper.tsx +++ b/docs/data/material/components/steppers/demos/progress-mobile/ProgressMobileStepper.tsx @@ -6,6 +6,7 @@ import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'; import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; export default function ProgressMobileStepper() { + // @focus-start @padding 1 const theme = useTheme(); const [activeStep, setActiveStep] = React.useState(0); @@ -80,4 +81,5 @@ export default function ProgressMobileStepper() { } /> ); + // @focus-end } diff --git a/docs/data/material/components/steppers/demos/progress-mobile/client.ts b/docs/data/material/components/steppers/demos/progress-mobile/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/steppers/demos/progress-mobile/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/steppers/demos/progress-mobile/index.ts b/docs/data/material/components/steppers/demos/progress-mobile/index.ts new file mode 100644 index 00000000000000..07b8ccc13ebbb0 --- /dev/null +++ b/docs/data/material/components/steppers/demos/progress-mobile/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ProgressMobileStepper from './ProgressMobileStepper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ProgressMobileStepper, { ClientProvider }); diff --git a/docs/data/material/components/steppers/TextMobileStepper.tsx b/docs/data/material/components/steppers/demos/text-mobile/TextMobileStepper.tsx similarity index 98% rename from docs/data/material/components/steppers/TextMobileStepper.tsx rename to docs/data/material/components/steppers/demos/text-mobile/TextMobileStepper.tsx index cc5cc9731206ab..e980f4c5e5ee5d 100644 --- a/docs/data/material/components/steppers/TextMobileStepper.tsx +++ b/docs/data/material/components/steppers/demos/text-mobile/TextMobileStepper.tsx @@ -30,6 +30,7 @@ const steps = [ ]; export default function TextMobileStepper() { + // @focus-start @padding 1 const theme = useTheme(); const [activeStep, setActiveStep] = React.useState(0); const maxSteps = steps.length; @@ -119,4 +120,5 @@ export default function TextMobileStepper() { /> ); + // @focus-end } diff --git a/docs/data/material/components/steppers/demos/text-mobile/client.ts b/docs/data/material/components/steppers/demos/text-mobile/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/steppers/demos/text-mobile/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/steppers/demos/text-mobile/index.ts b/docs/data/material/components/steppers/demos/text-mobile/index.ts new file mode 100644 index 00000000000000..af988f32216682 --- /dev/null +++ b/docs/data/material/components/steppers/demos/text-mobile/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TextMobileStepper from './TextMobileStepper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TextMobileStepper, { ClientProvider }); diff --git a/docs/data/material/components/steppers/VerticalLinearAlternativeLabelStepper.tsx b/docs/data/material/components/steppers/demos/vertical-linear-alternative-label/VerticalLinearAlternativeLabelStepper.tsx similarity index 98% rename from docs/data/material/components/steppers/VerticalLinearAlternativeLabelStepper.tsx rename to docs/data/material/components/steppers/demos/vertical-linear-alternative-label/VerticalLinearAlternativeLabelStepper.tsx index ac340f4e8715cb..99477849f6f9ee 100644 --- a/docs/data/material/components/steppers/VerticalLinearAlternativeLabelStepper.tsx +++ b/docs/data/material/components/steppers/demos/vertical-linear-alternative-label/VerticalLinearAlternativeLabelStepper.tsx @@ -30,6 +30,7 @@ const steps = [ ]; export default function VerticalLinearAlternativeLabelStepper() { + // @focus-start @padding 1 const [activeStep, setActiveStep] = React.useState(0); const handleNext = () => { @@ -90,4 +91,5 @@ export default function VerticalLinearAlternativeLabelStepper() { )} ); + // @focus-end } diff --git a/docs/data/material/components/steppers/demos/vertical-linear-alternative-label/client.ts b/docs/data/material/components/steppers/demos/vertical-linear-alternative-label/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/steppers/demos/vertical-linear-alternative-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/steppers/demos/vertical-linear-alternative-label/index.ts b/docs/data/material/components/steppers/demos/vertical-linear-alternative-label/index.ts new file mode 100644 index 00000000000000..d1b4eafc90722b --- /dev/null +++ b/docs/data/material/components/steppers/demos/vertical-linear-alternative-label/index.ts @@ -0,0 +1,8 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VerticalLinearAlternativeLabelStepper from './VerticalLinearAlternativeLabelStepper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VerticalLinearAlternativeLabelStepper, { + ClientProvider, +}); diff --git a/docs/data/material/components/steppers/VerticalLinearStepper.tsx b/docs/data/material/components/steppers/demos/vertical-linear/VerticalLinearStepper.tsx similarity index 98% rename from docs/data/material/components/steppers/VerticalLinearStepper.tsx rename to docs/data/material/components/steppers/demos/vertical-linear/VerticalLinearStepper.tsx index f173cdef88866a..b8f7d020ca58fc 100644 --- a/docs/data/material/components/steppers/VerticalLinearStepper.tsx +++ b/docs/data/material/components/steppers/demos/vertical-linear/VerticalLinearStepper.tsx @@ -30,6 +30,7 @@ const steps = [ ]; export default function VerticalLinearStepper() { + // @focus-start @padding 1 const [activeStep, setActiveStep] = React.useState(0); const handleNext = () => { @@ -126,4 +127,5 @@ export default function VerticalLinearStepper() { )} ); + // @focus-end } diff --git a/docs/data/material/components/steppers/demos/vertical-linear/client.ts b/docs/data/material/components/steppers/demos/vertical-linear/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/steppers/demos/vertical-linear/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/steppers/demos/vertical-linear/index.ts b/docs/data/material/components/steppers/demos/vertical-linear/index.ts new file mode 100644 index 00000000000000..3ef020f344284a --- /dev/null +++ b/docs/data/material/components/steppers/demos/vertical-linear/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VerticalLinearStepper from './VerticalLinearStepper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VerticalLinearStepper, { ClientProvider }); diff --git a/docs/data/material/components/steppers/steppers.md b/docs/data/material/components/steppers/steppers.md index 97d2408251170e..edd4b28d575226 100644 --- a/docs/data/material/components/steppers/steppers.md +++ b/docs/data/material/components/steppers/steppers.md @@ -60,7 +60,7 @@ The `Stepper` can be controlled by passing the current step index (zero-based) a This example also shows the use of an optional step by placing the `optional` prop on the second `Step` component. Note that it's up to you to manage when an optional step is skipped. Once you've determined this for a particular step you must set `completed={false}` to signify that even though the active step index has gone beyond the optional step, it's not actually complete. -{{"demo": "HorizontalLinearStepper.js"}} +{{"component": "file://./demos/horizontal-linear/index.ts"}} ### Non-linear @@ -74,36 +74,36 @@ determine when all steps are completed (or even if they need to be completed). Actionable steps mean that they control the content update of a section. From an accessibility standpoint, this means that each `StepButton` requires an `aria-controls` attribute pointing at the content section element. -{{"demo": "HorizontalNonLinearStepper.js"}} +{{"component": "file://./demos/horizontal-non-linear/index.ts"}} ### Alternative label Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component. -{{"demo": "HorizontalLinearAlternativeLabelStepper.js"}} +{{"component": "file://./demos/horizontal-linear-alternative-label/index.ts"}} ### Error step -{{"demo": "HorizontalStepperWithError.js"}} +{{"component": "file://./demos/horizontal-with-error/index.ts"}} ### Customized horizontal stepper Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedSteppers.js"}} +{{"component": "file://./demos/customized/index.ts"}} ## Vertical stepper Vertical steppers are designed for narrow screen sizes. They are ideal for mobile. All the features of the horizontal stepper can be implemented. -{{"demo": "VerticalLinearStepper.js"}} +{{"component": "file://./demos/vertical-linear/index.ts"}} ### Alternative label Use `alternativeLabel` prop on the vertical `Stepper` component to reverse the placement of the label and content. -{{"demo": "VerticalLinearAlternativeLabelStepper.js"}} +{{"component": "file://./demos/vertical-linear-alternative-label/index.ts"}} ## Transition @@ -129,16 +129,16 @@ The mobile stepper supports three variants to display progress through the avail The current step and total number of steps are displayed as text. -{{"demo": "TextMobileStepper.js", "bg": true}} +{{"component": "file://./demos/text-mobile/index.ts", "bg": true}} ### Dots Use dots when the number of steps is small. -{{"demo": "DotsMobileStepper.js", "bg": true}} +{{"component": "file://./demos/dots-mobile/index.ts", "bg": true}} ### Progress Use a progress bar when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps). -{{"demo": "ProgressMobileStepper.js", "bg": true}} +{{"component": "file://./demos/progress-mobile/index.ts", "bg": true}} diff --git a/docs/data/material/components/switches/BasicSwitches.js b/docs/data/material/components/switches/BasicSwitches.js deleted file mode 100644 index 19469eb9ed2647..00000000000000 --- a/docs/data/material/components/switches/BasicSwitches.js +++ /dev/null @@ -1,14 +0,0 @@ -import Switch from '@mui/material/Switch'; - -const label = { slotProps: { input: { 'aria-label': 'Switch demo' } } }; - -export default function BasicSwitches() { - return ( -
    - - - - -
    - ); -} diff --git a/docs/data/material/components/switches/BasicSwitches.tsx.preview b/docs/data/material/components/switches/BasicSwitches.tsx.preview deleted file mode 100644 index 98e1020e8367a0..00000000000000 --- a/docs/data/material/components/switches/BasicSwitches.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/material/components/switches/ColorSwitches.js b/docs/data/material/components/switches/ColorSwitches.js deleted file mode 100644 index 5cfac499452c89..00000000000000 --- a/docs/data/material/components/switches/ColorSwitches.js +++ /dev/null @@ -1,29 +0,0 @@ -import { alpha, styled } from '@mui/material/styles'; -import { pink } from '@mui/material/colors'; -import Switch from '@mui/material/Switch'; - -const PinkSwitch = styled(Switch)(({ theme }) => ({ - '& .MuiSwitch-switchBase.Mui-checked': { - color: pink[600], - '&:hover': { - backgroundColor: alpha(pink[600], theme.palette.action.hoverOpacity), - }, - }, - '& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track': { - backgroundColor: pink[600], - }, -})); - -const label = { slotProps: { input: { 'aria-label': 'Color switch demo' } } }; - -export default function ColorSwitches() { - return ( -
    - - - - - -
    - ); -} diff --git a/docs/data/material/components/switches/ColorSwitches.tsx.preview b/docs/data/material/components/switches/ColorSwitches.tsx.preview deleted file mode 100644 index b99a931dc275d3..00000000000000 --- a/docs/data/material/components/switches/ColorSwitches.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/switches/ControlledSwitches.js b/docs/data/material/components/switches/ControlledSwitches.js deleted file mode 100644 index 60c65ea47ce4f0..00000000000000 --- a/docs/data/material/components/switches/ControlledSwitches.js +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; -import Switch from '@mui/material/Switch'; - -export default function ControlledSwitches() { - const [checked, setChecked] = React.useState(true); - - const handleChange = (event) => { - setChecked(event.target.checked); - }; - - return ( - - ); -} diff --git a/docs/data/material/components/switches/ControlledSwitches.tsx.preview b/docs/data/material/components/switches/ControlledSwitches.tsx.preview deleted file mode 100644 index 2cc4ae088f2569..00000000000000 --- a/docs/data/material/components/switches/ControlledSwitches.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/switches/CustomizedSwitches.js b/docs/data/material/components/switches/CustomizedSwitches.js deleted file mode 100644 index f4b1de73f582ac..00000000000000 --- a/docs/data/material/components/switches/CustomizedSwitches.js +++ /dev/null @@ -1,229 +0,0 @@ -import { styled } from '@mui/material/styles'; -import FormGroup from '@mui/material/FormGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; -import Stack from '@mui/material/Stack'; -import Typography from '@mui/material/Typography'; - -const MaterialUISwitch = styled(Switch)(({ theme }) => ({ - width: 62, - height: 34, - padding: 7, - '& .MuiSwitch-switchBase': { - margin: 1, - padding: 0, - transform: 'translateX(6px)', - '&.Mui-checked': { - color: '#fff', - transform: 'translateX(22px)', - '& .MuiSwitch-thumb:before': { - backgroundImage: `url('data:image/svg+xml;utf8,')`, - }, - '& + .MuiSwitch-track': { - opacity: 1, - backgroundColor: '#aab4be', - ...theme.applyStyles('dark', { - backgroundColor: '#8796A5', - }), - }, - }, - }, - '& .MuiSwitch-thumb': { - backgroundColor: '#001e3c', - width: 32, - height: 32, - '&::before': { - content: "''", - position: 'absolute', - width: '100%', - height: '100%', - left: 0, - top: 0, - backgroundRepeat: 'no-repeat', - backgroundPosition: 'center', - backgroundImage: `url('data:image/svg+xml;utf8,')`, - }, - ...theme.applyStyles('dark', { - backgroundColor: '#003892', - }), - }, - '& .MuiSwitch-track': { - opacity: 1, - backgroundColor: '#aab4be', - borderRadius: 20 / 2, - ...theme.applyStyles('dark', { - backgroundColor: '#8796A5', - }), - }, -})); - -const Android12Switch = styled(Switch)(({ theme }) => ({ - padding: 8, - '& .MuiSwitch-track': { - borderRadius: 22 / 2, - '&::before, &::after': { - content: '""', - position: 'absolute', - top: '50%', - transform: 'translateY(-50%)', - width: 16, - height: 16, - }, - '&::before': { - backgroundImage: `url('data:image/svg+xml;utf8,')`, - left: 12, - }, - '&::after': { - backgroundImage: `url('data:image/svg+xml;utf8,')`, - right: 12, - }, - }, - '& .MuiSwitch-thumb': { - boxShadow: 'none', - width: 16, - height: 16, - margin: 2, - }, -})); - -const IOSSwitch = styled((props) => ( - -))(({ theme }) => ({ - width: 42, - height: 26, - padding: 0, - '& .MuiSwitch-switchBase': { - padding: 0, - margin: 2, - transitionDuration: '300ms', - '&.Mui-checked': { - transform: 'translateX(16px)', - color: '#fff', - '& + .MuiSwitch-track': { - backgroundColor: '#65C466', - opacity: 1, - border: 0, - ...theme.applyStyles('dark', { - backgroundColor: '#2ECA45', - }), - }, - '&.Mui-disabled + .MuiSwitch-track': { - opacity: 0.5, - }, - }, - '&.Mui-focusVisible .MuiSwitch-thumb': { - color: '#33cf4d', - border: '6px solid #fff', - }, - '&.Mui-disabled .MuiSwitch-thumb': { - color: theme.palette.grey[100], - ...theme.applyStyles('dark', { - color: theme.palette.grey[600], - }), - }, - '&.Mui-disabled + .MuiSwitch-track': { - opacity: 0.7, - ...theme.applyStyles('dark', { - opacity: 0.3, - }), - }, - }, - '& .MuiSwitch-thumb': { - boxSizing: 'border-box', - width: 22, - height: 22, - }, - '& .MuiSwitch-track': { - borderRadius: 26 / 2, - backgroundColor: '#E9E9EA', - opacity: 1, - transition: theme.transitions.create(['background-color'], { - duration: 500, - }), - ...theme.applyStyles('dark', { - backgroundColor: '#39393D', - }), - }, -})); - -const AntSwitch = styled(Switch)(({ theme }) => ({ - width: 28, - height: 16, - padding: 0, - display: 'flex', - '&:active': { - '& .MuiSwitch-thumb': { - width: 15, - }, - '& .MuiSwitch-switchBase.Mui-checked': { - transform: 'translateX(9px)', - }, - }, - '& .MuiSwitch-switchBase': { - padding: 2, - '&.Mui-checked': { - transform: 'translateX(12px)', - color: '#fff', - '& + .MuiSwitch-track': { - opacity: 1, - backgroundColor: '#1890ff', - ...theme.applyStyles('dark', { - backgroundColor: '#177ddc', - }), - }, - }, - }, - '& .MuiSwitch-thumb': { - boxShadow: '0 2px 4px 0 rgb(0 35 11 / 20%)', - width: 12, - height: 12, - borderRadius: 6, - transition: theme.transitions.create(['width'], { - duration: 200, - }), - }, - '& .MuiSwitch-track': { - borderRadius: 16 / 2, - opacity: 1, - backgroundColor: 'rgba(0,0,0,.25)', - boxSizing: 'border-box', - ...theme.applyStyles('dark', { - backgroundColor: 'rgba(255,255,255,.35)', - }), - }, -})); - -export default function CustomizedSwitches() { - return ( - - } - label="MUI switch" - /> - } - label="Android 12" - /> - } - label="iOS style" - /> - - Off - - On - - - ); -} diff --git a/docs/data/material/components/switches/FormControlLabelPosition.js b/docs/data/material/components/switches/FormControlLabelPosition.js deleted file mode 100644 index e495a03d166352..00000000000000 --- a/docs/data/material/components/switches/FormControlLabelPosition.js +++ /dev/null @@ -1,27 +0,0 @@ -import Switch from '@mui/material/Switch'; -import FormGroup from '@mui/material/FormGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; - -export default function FormControlLabelPosition() { - return ( - - Label placement - - } - label="Bottom" - labelPlacement="bottom" - /> - } - label="End" - labelPlacement="end" - /> - - - ); -} diff --git a/docs/data/material/components/switches/FormControlLabelPosition.tsx b/docs/data/material/components/switches/FormControlLabelPosition.tsx deleted file mode 100644 index e495a03d166352..00000000000000 --- a/docs/data/material/components/switches/FormControlLabelPosition.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import Switch from '@mui/material/Switch'; -import FormGroup from '@mui/material/FormGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormControl from '@mui/material/FormControl'; -import FormLabel from '@mui/material/FormLabel'; - -export default function FormControlLabelPosition() { - return ( - - Label placement - - } - label="Bottom" - labelPlacement="bottom" - /> - } - label="End" - labelPlacement="end" - /> - - - ); -} diff --git a/docs/data/material/components/switches/SwitchLabels.js b/docs/data/material/components/switches/SwitchLabels.js deleted file mode 100644 index cbf52187d034ea..00000000000000 --- a/docs/data/material/components/switches/SwitchLabels.js +++ /dev/null @@ -1,13 +0,0 @@ -import FormGroup from '@mui/material/FormGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; - -export default function SwitchLabels() { - return ( - - } label="Label" /> - } label="Required" /> - } label="Disabled" /> - - ); -} diff --git a/docs/data/material/components/switches/SwitchLabels.tsx.preview b/docs/data/material/components/switches/SwitchLabels.tsx.preview deleted file mode 100644 index f388391917b436..00000000000000 --- a/docs/data/material/components/switches/SwitchLabels.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - } label="Label" /> - } label="Required" /> - } label="Disabled" /> - \ No newline at end of file diff --git a/docs/data/material/components/switches/SwitchesGroup.js b/docs/data/material/components/switches/SwitchesGroup.js deleted file mode 100644 index c8a5fb6be247d6..00000000000000 --- a/docs/data/material/components/switches/SwitchesGroup.js +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from 'react'; -import FormLabel from '@mui/material/FormLabel'; -import FormControl from '@mui/material/FormControl'; -import FormGroup from '@mui/material/FormGroup'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormHelperText from '@mui/material/FormHelperText'; -import Switch from '@mui/material/Switch'; - -export default function SwitchesGroup() { - const [state, setState] = React.useState({ - gilad: true, - jason: false, - antoine: true, - }); - - const handleChange = (event) => { - setState({ - ...state, - [event.target.name]: event.target.checked, - }); - }; - - return ( - - Assign responsibility - - - } - label="Gilad Gray" - /> - - } - label="Jason Killian" - /> - - } - label="Antoine Llorca" - /> - - Be careful - - ); -} diff --git a/docs/data/material/components/switches/SwitchesSize.js b/docs/data/material/components/switches/SwitchesSize.js deleted file mode 100644 index 84138b49a13dc7..00000000000000 --- a/docs/data/material/components/switches/SwitchesSize.js +++ /dev/null @@ -1,12 +0,0 @@ -import Switch from '@mui/material/Switch'; - -const label = { slotProps: { input: { 'aria-label': 'Size switch demo' } } }; - -export default function SwitchesSize() { - return ( -
    - - -
    - ); -} diff --git a/docs/data/material/components/switches/SwitchesSize.tsx.preview b/docs/data/material/components/switches/SwitchesSize.tsx.preview deleted file mode 100644 index 1e1aacb66d7735..00000000000000 --- a/docs/data/material/components/switches/SwitchesSize.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/switches/BasicSwitches.tsx b/docs/data/material/components/switches/demos/basic/BasicSwitches.tsx similarity index 87% rename from docs/data/material/components/switches/BasicSwitches.tsx rename to docs/data/material/components/switches/demos/basic/BasicSwitches.tsx index 19469eb9ed2647..268dd5e12ae47a 100644 --- a/docs/data/material/components/switches/BasicSwitches.tsx +++ b/docs/data/material/components/switches/demos/basic/BasicSwitches.tsx @@ -5,10 +5,12 @@ const label = { slotProps: { input: { 'aria-label': 'Switch demo' } } }; export default function BasicSwitches() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/switches/demos/basic/client.ts b/docs/data/material/components/switches/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/switches/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/switches/demos/basic/index.ts b/docs/data/material/components/switches/demos/basic/index.ts new file mode 100644 index 00000000000000..4a2facde612e8a --- /dev/null +++ b/docs/data/material/components/switches/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicSwitches from './BasicSwitches'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicSwitches, { ClientProvider }); diff --git a/docs/data/material/components/switches/ColorSwitches.tsx b/docs/data/material/components/switches/demos/color/ColorSwitches.tsx similarity index 94% rename from docs/data/material/components/switches/ColorSwitches.tsx rename to docs/data/material/components/switches/demos/color/ColorSwitches.tsx index 5cfac499452c89..0c88f4ec6f016a 100644 --- a/docs/data/material/components/switches/ColorSwitches.tsx +++ b/docs/data/material/components/switches/demos/color/ColorSwitches.tsx @@ -19,11 +19,13 @@ const label = { slotProps: { input: { 'aria-label': 'Color switch demo' } } }; export default function ColorSwitches() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/switches/demos/color/client.ts b/docs/data/material/components/switches/demos/color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/switches/demos/color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/switches/demos/color/index.ts b/docs/data/material/components/switches/demos/color/index.ts new file mode 100644 index 00000000000000..80beff98ef8dec --- /dev/null +++ b/docs/data/material/components/switches/demos/color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorSwitches from './ColorSwitches'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorSwitches, { ClientProvider }); diff --git a/docs/data/material/components/switches/ControlledSwitches.tsx b/docs/data/material/components/switches/demos/controlled/ControlledSwitches.tsx similarity index 90% rename from docs/data/material/components/switches/ControlledSwitches.tsx rename to docs/data/material/components/switches/demos/controlled/ControlledSwitches.tsx index 7094e6da0b9567..f59b50335fc7c8 100644 --- a/docs/data/material/components/switches/ControlledSwitches.tsx +++ b/docs/data/material/components/switches/demos/controlled/ControlledSwitches.tsx @@ -9,10 +9,12 @@ export default function ControlledSwitches() { }; return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/switches/demos/controlled/client.ts b/docs/data/material/components/switches/demos/controlled/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/switches/demos/controlled/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/switches/demos/controlled/index.ts b/docs/data/material/components/switches/demos/controlled/index.ts new file mode 100644 index 00000000000000..63e944c2150f02 --- /dev/null +++ b/docs/data/material/components/switches/demos/controlled/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ControlledSwitches from './ControlledSwitches'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ControlledSwitches, { ClientProvider }); diff --git a/docs/data/material/components/switches/CustomizedSwitches.tsx b/docs/data/material/components/switches/demos/customized/CustomizedSwitches.tsx similarity index 97% rename from docs/data/material/components/switches/CustomizedSwitches.tsx rename to docs/data/material/components/switches/demos/customized/CustomizedSwitches.tsx index d5352f9fe96484..d42e1f05752743 100644 --- a/docs/data/material/components/switches/CustomizedSwitches.tsx +++ b/docs/data/material/components/switches/demos/customized/CustomizedSwitches.tsx @@ -1,7 +1,8 @@ import { styled } from '@mui/material/styles'; import FormGroup from '@mui/material/FormGroup'; import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch, { SwitchProps } from '@mui/material/Switch'; +import Switch from '@mui/material/Switch'; +import type { SwitchProps } from '@mui/material/Switch'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; @@ -203,6 +204,7 @@ const AntSwitch = styled(Switch)(({ theme }) => ({ export default function CustomizedSwitches() { return ( + // @focus-start @padding 2 } @@ -225,5 +227,6 @@ export default function CustomizedSwitches() { On     + // @focus-end ); } diff --git a/docs/data/material/components/switches/demos/customized/client.ts b/docs/data/material/components/switches/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/switches/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/switches/demos/customized/index.ts b/docs/data/material/components/switches/demos/customized/index.ts new file mode 100644 index 00000000000000..11c5a9444c5ba1 --- /dev/null +++ b/docs/data/material/components/switches/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedSwitches from './CustomizedSwitches'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedSwitches, { ClientProvider }); diff --git a/docs/data/material/components/switches/demos/form-control-label-position/FormControlLabelPosition.tsx b/docs/data/material/components/switches/demos/form-control-label-position/FormControlLabelPosition.tsx new file mode 100644 index 00000000000000..6f3ee2132ed32c --- /dev/null +++ b/docs/data/material/components/switches/demos/form-control-label-position/FormControlLabelPosition.tsx @@ -0,0 +1,29 @@ +import Switch from '@mui/material/Switch'; +import FormGroup from '@mui/material/FormGroup'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import FormControl from '@mui/material/FormControl'; +import FormLabel from '@mui/material/FormLabel'; + +export default function FormControlLabelPosition() { + return ( + // @focus-start @padding 2 + + Label placement + + } + label="Bottom" + labelPlacement="bottom" + /> + } + label="End" + labelPlacement="end" + /> + + + // @focus-end + ); +} diff --git a/docs/data/material/components/switches/demos/form-control-label-position/client.ts b/docs/data/material/components/switches/demos/form-control-label-position/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/switches/demos/form-control-label-position/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/switches/demos/form-control-label-position/index.ts b/docs/data/material/components/switches/demos/form-control-label-position/index.ts new file mode 100644 index 00000000000000..38bfab8ebaf820 --- /dev/null +++ b/docs/data/material/components/switches/demos/form-control-label-position/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FormControlLabelPosition from './FormControlLabelPosition'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FormControlLabelPosition, { ClientProvider }); diff --git a/docs/data/material/components/switches/SwitchesGroup.tsx b/docs/data/material/components/switches/demos/group/SwitchesGroup.tsx similarity index 97% rename from docs/data/material/components/switches/SwitchesGroup.tsx rename to docs/data/material/components/switches/demos/group/SwitchesGroup.tsx index 9b06493499dfa7..dfd5220a6a57a4 100644 --- a/docs/data/material/components/switches/SwitchesGroup.tsx +++ b/docs/data/material/components/switches/demos/group/SwitchesGroup.tsx @@ -7,6 +7,7 @@ import FormHelperText from '@mui/material/FormHelperText'; import Switch from '@mui/material/Switch'; export default function SwitchesGroup() { + // @focus-start @padding 1 const [state, setState] = React.useState({ gilad: true, jason: false, @@ -46,4 +47,5 @@ export default function SwitchesGroup() { Be careful ); + // @focus-end } diff --git a/docs/data/material/components/switches/demos/group/client.ts b/docs/data/material/components/switches/demos/group/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/switches/demos/group/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/switches/demos/group/index.ts b/docs/data/material/components/switches/demos/group/index.ts new file mode 100644 index 00000000000000..4fca2274009390 --- /dev/null +++ b/docs/data/material/components/switches/demos/group/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SwitchesGroup from './SwitchesGroup'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SwitchesGroup, { ClientProvider }); diff --git a/docs/data/material/components/switches/SwitchLabels.tsx b/docs/data/material/components/switches/demos/labels/SwitchLabels.tsx similarity index 90% rename from docs/data/material/components/switches/SwitchLabels.tsx rename to docs/data/material/components/switches/demos/labels/SwitchLabels.tsx index cbf52187d034ea..e63cfeae0a6d1b 100644 --- a/docs/data/material/components/switches/SwitchLabels.tsx +++ b/docs/data/material/components/switches/demos/labels/SwitchLabels.tsx @@ -4,10 +4,12 @@ import Switch from '@mui/material/Switch'; export default function SwitchLabels() { return ( + // @focus-start @padding 2 } label="Label" /> } label="Required" /> } label="Disabled" /> + // @focus-end ); } diff --git a/docs/data/material/components/switches/demos/labels/client.ts b/docs/data/material/components/switches/demos/labels/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/switches/demos/labels/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/switches/demos/labels/index.ts b/docs/data/material/components/switches/demos/labels/index.ts new file mode 100644 index 00000000000000..03b3f50a02fa29 --- /dev/null +++ b/docs/data/material/components/switches/demos/labels/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SwitchLabels from './SwitchLabels'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SwitchLabels, { ClientProvider }); diff --git a/docs/data/material/components/switches/SwitchesSize.tsx b/docs/data/material/components/switches/demos/size/SwitchesSize.tsx similarity index 85% rename from docs/data/material/components/switches/SwitchesSize.tsx rename to docs/data/material/components/switches/demos/size/SwitchesSize.tsx index 84138b49a13dc7..194a13679163a4 100644 --- a/docs/data/material/components/switches/SwitchesSize.tsx +++ b/docs/data/material/components/switches/demos/size/SwitchesSize.tsx @@ -5,8 +5,10 @@ const label = { slotProps: { input: { 'aria-label': 'Size switch demo' } } }; export default function SwitchesSize() { return (
    + {/* @focus-start */} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/switches/demos/size/client.ts b/docs/data/material/components/switches/demos/size/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/switches/demos/size/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/switches/demos/size/index.ts b/docs/data/material/components/switches/demos/size/index.ts new file mode 100644 index 00000000000000..441f322523505e --- /dev/null +++ b/docs/data/material/components/switches/demos/size/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SwitchesSize from './SwitchesSize'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SwitchesSize, { ClientProvider }); diff --git a/docs/data/material/components/switches/switches.md b/docs/data/material/components/switches/switches.md index e1488a93cff8a7..c760c83a0fe96d 100644 --- a/docs/data/material/components/switches/switches.md +++ b/docs/data/material/components/switches/switches.md @@ -19,43 +19,43 @@ should be made clear from the corresponding inline label. ## Basic switches -{{"demo": "BasicSwitches.js"}} +{{"component": "file://./demos/basic/index.ts"}} ## Label You can provide a label to the `Switch` thanks to the `FormControlLabel` component. -{{"demo": "SwitchLabels.js"}} +{{"component": "file://./demos/labels/index.ts"}} ## Size Use the `size` prop to change the size of the switch. -{{"demo": "SwitchesSize.js"}} +{{"component": "file://./demos/size/index.ts"}} ## Color -{{"demo": "ColorSwitches.js"}} +{{"component": "file://./demos/color/index.ts"}} ## Controlled You can control the switch with the `checked` and `onChange` props: -{{"demo": "ControlledSwitches.js"}} +{{"component": "file://./demos/controlled/index.ts"}} ## Switches with FormGroup `FormGroup` is a helpful wrapper used to group selection controls components that provides an easier API. However, you are encouraged to use [Checkboxes](/material-ui/react-checkbox/) instead if multiple related controls are required. (See: [When to use](#when-to-use)). -{{"demo": "SwitchesGroup.js"}} +{{"component": "file://./demos/group/index.ts"}} ## Customization Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedSwitches.js"}} +{{"component": "file://./demos/customized/index.ts"}} 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/switch). @@ -63,7 +63,7 @@ You can learn more about this in the [overrides documentation page](/material-ui You can change the placement of the label: -{{"demo": "FormControlLabelPosition.js"}} +{{"component": "file://./demos/form-control-label-position/index.ts"}} ## When to use diff --git a/docs/data/material/components/table/AccessibleTable.js b/docs/data/material/components/table/AccessibleTable.js deleted file mode 100644 index a5e0501a62a407..00000000000000 --- a/docs/data/material/components/table/AccessibleTable.js +++ /dev/null @@ -1,49 +0,0 @@ -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import Paper from '@mui/material/Paper'; - -function createData(name, calories, fat, carbs, protein) { - return { name, calories, fat, carbs, protein }; -} - -const rows = [ - createData('Frozen yoghurt', 159, 6.0, 24, 4.0), - createData('Ice cream sandwich', 237, 9.0, 37, 4.3), - createData('Eclair', 262, 16.0, 24, 6.0), -]; - -export default function AccessibleTable() { - return ( - - - - - - Dessert (100g serving) - Calories - Fat (g) - Carbs (g) - Protein (g) - - - - {rows.map((row) => ( - - - {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - - ))} - -
    A basic table example with a caption
    -     - ); -} diff --git a/docs/data/material/components/table/BasicTable.js b/docs/data/material/components/table/BasicTable.js deleted file mode 100644 index 19627070c15b56..00000000000000 --- a/docs/data/material/components/table/BasicTable.js +++ /dev/null @@ -1,53 +0,0 @@ -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import Paper from '@mui/material/Paper'; - -function createData(name, calories, fat, carbs, protein) { - return { name, calories, fat, carbs, protein }; -} - -const rows = [ - createData('Frozen yoghurt', 159, 6.0, 24, 4.0), - createData('Ice cream sandwich', 237, 9.0, 37, 4.3), - createData('Eclair', 262, 16.0, 24, 6.0), - createData('Cupcake', 305, 3.7, 67, 4.3), - createData('Gingerbread', 356, 16.0, 49, 3.9), -]; - -export default function BasicTable() { - return ( - - - - - Dessert (100g serving) - Calories - Fat (g) - Carbs (g) - Protein (g) - - - - {rows.map((row) => ( - - - {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - - ))} - -
    -     - ); -} diff --git a/docs/data/material/components/table/CollapsibleTable.js b/docs/data/material/components/table/CollapsibleTable.js deleted file mode 100644 index d045f102e5069e..00000000000000 --- a/docs/data/material/components/table/CollapsibleTable.js +++ /dev/null @@ -1,151 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Box from '@mui/material/Box'; -import Collapse from '@mui/material/Collapse'; -import IconButton from '@mui/material/IconButton'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import Typography from '@mui/material/Typography'; -import Paper from '@mui/material/Paper'; -import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; -import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; - -function createData(name, calories, fat, carbs, protein, price) { - return { - name, - calories, - fat, - carbs, - protein, - price, - history: [ - { - date: '2020-01-05', - customerId: '11091700', - amount: 3, - }, - { - date: '2020-01-02', - customerId: 'Anonymous', - amount: 1, - }, - ], - }; -} - -function Row(props) { - const { row } = props; - const [open, setOpen] = React.useState(false); - - return ( - - .MuiTableCell-root': { borderBottom: 'unset' } }}> - - setOpen(!open)} - > - {open ? : } - - - - {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - - - - - - - History - - - - - Date - Customer - Amount - Total price ($) - - - - {row.history.map((historyRow) => ( - - - {historyRow.date} - - {historyRow.customerId} - {historyRow.amount} - - {Math.round(historyRow.amount * row.price * 100) / 100} - - - ))} - -
    -     -     -     -     -     - ); -} - -Row.propTypes = { - row: PropTypes.shape({ - calories: PropTypes.number.isRequired, - carbs: PropTypes.number.isRequired, - fat: PropTypes.number.isRequired, - history: PropTypes.arrayOf( - PropTypes.shape({ - amount: PropTypes.number.isRequired, - customerId: PropTypes.string.isRequired, - date: PropTypes.string.isRequired, - }), - ).isRequired, - name: PropTypes.string.isRequired, - price: PropTypes.number.isRequired, - protein: PropTypes.number.isRequired, - }).isRequired, -}; - -const rows = [ - createData('Frozen yoghurt', 159, 6.0, 24, 4.0, 3.99), - createData('Ice cream sandwich', 237, 9.0, 37, 4.3, 4.99), - createData('Eclair', 262, 16.0, 24, 6.0, 3.79), - createData('Cupcake', 305, 3.7, 67, 4.3, 2.5), - createData('Gingerbread', 356, 16.0, 49, 3.9, 1.5), -]; - -export default function CollapsibleTable() { - return ( - - - - - - Dessert (100g serving) - Calories - Fat (g) - Carbs (g) - Protein (g) - - - - {rows.map((row) => ( - - ))} - -
    -     - ); -} diff --git a/docs/data/material/components/table/ColumnGroupingTable.js b/docs/data/material/components/table/ColumnGroupingTable.js deleted file mode 100644 index da3cb161550c78..00000000000000 --- a/docs/data/material/components/table/ColumnGroupingTable.js +++ /dev/null @@ -1,131 +0,0 @@ -import * as React from 'react'; -import Paper from '@mui/material/Paper'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TablePagination from '@mui/material/TablePagination'; -import TableRow from '@mui/material/TableRow'; - -const columns = [ - { id: 'name', label: 'Name', minWidth: 170 }, - { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 }, - { - id: 'population', - label: 'Population', - minWidth: 170, - align: 'right', - format: (value) => value.toLocaleString('en-US'), - }, - { - id: 'size', - label: 'Size\u00a0(km\u00b2)', - minWidth: 170, - align: 'right', - format: (value) => value.toLocaleString('en-US'), - }, - { - id: 'density', - label: 'Density', - minWidth: 170, - align: 'right', - format: (value) => value.toFixed(2), - }, -]; - -function createData(name, code, population, size) { - const density = population / size; - return { name, code, population, size, density }; -} - -const rows = [ - createData('India', 'IN', 1324171354, 3287263), - createData('China', 'CN', 1403500365, 9596961), - createData('Italy', 'IT', 60483973, 301340), - createData('United States', 'US', 327167434, 9833520), - createData('Canada', 'CA', 37602103, 9984670), - createData('Australia', 'AU', 25475400, 7692024), - createData('Germany', 'DE', 83019200, 357578), - createData('Ireland', 'IE', 4857000, 70273), - createData('Mexico', 'MX', 126577691, 1972550), - createData('Japan', 'JP', 126317000, 377973), - createData('France', 'FR', 67022000, 640679), - createData('United Kingdom', 'GB', 67545757, 242495), - createData('Russia', 'RU', 146793744, 17098246), - createData('Nigeria', 'NG', 200962417, 923768), - createData('Brazil', 'BR', 210147125, 8515767), -]; - -export default function ColumnGroupingTable() { - const [page, setPage] = React.useState(0); - const [rowsPerPage, setRowsPerPage] = React.useState(10); - - const handleChangePage = (event, newPage) => { - setPage(newPage); - }; - - const handleChangeRowsPerPage = (event) => { - setRowsPerPage(+event.target.value); - setPage(0); - }; - - return ( - - - - - - - Country - - - Details - - - - {columns.map((column) => ( - - {column.label} - - ))} - - - - {rows - .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - .map((row) => { - return ( - - {columns.map((column) => { - const value = row[column.id]; - return ( - - {column.format && typeof value === 'number' - ? column.format(value) - : value} - - ); - })} - - ); - })} - -
    -     - -     - ); -} diff --git a/docs/data/material/components/table/CustomPaginationActionsTable.js b/docs/data/material/components/table/CustomPaginationActionsTable.js deleted file mode 100644 index f3eafc5c9acbf8..00000000000000 --- a/docs/data/material/components/table/CustomPaginationActionsTable.js +++ /dev/null @@ -1,168 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { useTheme } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableFooter from '@mui/material/TableFooter'; -import TablePagination from '@mui/material/TablePagination'; -import TableRow from '@mui/material/TableRow'; -import Paper from '@mui/material/Paper'; -import IconButton from '@mui/material/IconButton'; -import FirstPageIcon from '@mui/icons-material/FirstPage'; -import KeyboardArrowLeft from '@mui/icons-material/KeyboardArrowLeft'; -import KeyboardArrowRight from '@mui/icons-material/KeyboardArrowRight'; -import LastPageIcon from '@mui/icons-material/LastPage'; - -function TablePaginationActions(props) { - const theme = useTheme(); - const { count, page, rowsPerPage, onPageChange } = props; - - const handleFirstPageButtonClick = (event) => { - onPageChange(event, 0); - }; - - const handleBackButtonClick = (event) => { - onPageChange(event, page - 1); - }; - - const handleNextButtonClick = (event) => { - onPageChange(event, page + 1); - }; - - const handleLastPageButtonClick = (event) => { - onPageChange(event, Math.max(0, Math.ceil(count / rowsPerPage) - 1)); - }; - - return ( - - - {theme.direction === 'rtl' ? : } - - - {theme.direction === 'rtl' ? : } - - = Math.ceil(count / rowsPerPage) - 1} - aria-label="next page" - > - {theme.direction === 'rtl' ? : } - - = Math.ceil(count / rowsPerPage) - 1} - aria-label="last page" - > - {theme.direction === 'rtl' ? : } - - - ); -} - -TablePaginationActions.propTypes = { - count: PropTypes.number.isRequired, - onPageChange: PropTypes.func.isRequired, - page: PropTypes.number.isRequired, - rowsPerPage: PropTypes.number.isRequired, -}; - -function createData(name, calories, fat) { - return { name, calories, fat }; -} - -const rows = [ - createData('Cupcake', 305, 3.7), - createData('Donut', 452, 25.0), - createData('Eclair', 262, 16.0), - createData('Frozen yoghurt', 159, 6.0), - createData('Gingerbread', 356, 16.0), - createData('Honeycomb', 408, 3.2), - createData('Ice cream sandwich', 237, 9.0), - createData('Jelly Bean', 375, 0.0), - createData('KitKat', 518, 26.0), - createData('Lollipop', 392, 0.2), - createData('Marshmallow', 318, 0), - createData('Nougat', 360, 19.0), - createData('Oreo', 437, 18.0), -].sort((a, b) => (a.calories < b.calories ? -1 : 1)); - -export default function CustomPaginationActionsTable() { - const [page, setPage] = React.useState(0); - const [rowsPerPage, setRowsPerPage] = React.useState(5); - - // Avoid a layout jump when reaching the last page with empty rows. - const emptyRows = - page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; - - const handleChangePage = (event, newPage) => { - setPage(newPage); - }; - - const handleChangeRowsPerPage = (event) => { - setRowsPerPage(parseInt(event.target.value, 10)); - setPage(0); - }; - - return ( - - - - {(rowsPerPage > 0 - ? rows.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - : rows - ).map((row) => ( - - - {row.name} - - - {row.calories} - - - {row.fat} - - - ))} - {emptyRows > 0 && ( - - - - )} - - - - - - -
    -     - ); -} diff --git a/docs/data/material/components/table/CustomizedTables.js b/docs/data/material/components/table/CustomizedTables.js deleted file mode 100644 index fae643fd8fee02..00000000000000 --- a/docs/data/material/components/table/CustomizedTables.js +++ /dev/null @@ -1,71 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell, { tableCellClasses } from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import Paper from '@mui/material/Paper'; - -const StyledTableCell = styled(TableCell)(({ theme }) => ({ - [`&.${tableCellClasses.head}`]: { - backgroundColor: theme.palette.common.black, - color: theme.palette.common.white, - }, - [`&.${tableCellClasses.body}`]: { - fontSize: 14, - }, -})); - -const StyledTableRow = styled(TableRow)(({ theme }) => ({ - '&:nth-of-type(odd)': { - backgroundColor: theme.palette.action.hover, - }, - // hide last border - '&:last-child td, &:last-child th': { - border: 0, - }, -})); - -function createData(name, calories, fat, carbs, protein) { - return { name, calories, fat, carbs, protein }; -} - -const rows = [ - createData('Frozen yoghurt', 159, 6.0, 24, 4.0), - createData('Ice cream sandwich', 237, 9.0, 37, 4.3), - createData('Eclair', 262, 16.0, 24, 6.0), - createData('Cupcake', 305, 3.7, 67, 4.3), - createData('Gingerbread', 356, 16.0, 49, 3.9), -]; - -export default function CustomizedTables() { - return ( - - - - - Dessert (100g serving) - Calories - Fat (g) - Carbs (g) - Protein (g) - - - - {rows.map((row) => ( - - - {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - - ))} - -
    -     - ); -} diff --git a/docs/data/material/components/table/DataTable.js b/docs/data/material/components/table/DataTable.js deleted file mode 100644 index ef6cce4dc18388..00000000000000 --- a/docs/data/material/components/table/DataTable.js +++ /dev/null @@ -1,51 +0,0 @@ -import { DataGrid } from '@mui/x-data-grid'; -import Paper from '@mui/material/Paper'; - -const columns = [ - { field: 'id', headerName: 'ID', width: 70 }, - { field: 'firstName', headerName: 'First name', width: 130 }, - { field: 'lastName', headerName: 'Last name', width: 130 }, - { - field: 'age', - headerName: 'Age', - type: 'number', - width: 90, - }, - { - field: 'fullName', - headerName: 'Full name', - description: 'This column has a value getter and is not sortable.', - sortable: false, - width: 160, - valueGetter: (value, row) => `${row.firstName || ''} ${row.lastName || ''}`, - }, -]; - -const rows = [ - { id: 1, lastName: 'Snow', firstName: 'Jon', age: 35 }, - { id: 2, lastName: 'Lannister', firstName: 'Cersei', age: 42 }, - { id: 3, lastName: 'Lannister', firstName: 'Jaime', age: 45 }, - { id: 4, lastName: 'Stark', firstName: 'Arya', age: 16 }, - { id: 5, lastName: 'Targaryen', firstName: 'Daenerys', age: null }, - { id: 6, lastName: 'Melisandre', firstName: null, age: 150 }, - { id: 7, lastName: 'Clifford', firstName: 'Ferrara', age: 44 }, - { id: 8, lastName: 'Frances', firstName: 'Rossini', age: 36 }, - { id: 9, lastName: 'Roxie', firstName: 'Harvey', age: 65 }, -]; - -const paginationModel = { page: 0, pageSize: 5 }; - -export default function DataTable() { - return ( - - - - ); -} diff --git a/docs/data/material/components/table/DataTable.tsx.preview b/docs/data/material/components/table/DataTable.tsx.preview deleted file mode 100644 index 876664a4a842c2..00000000000000 --- a/docs/data/material/components/table/DataTable.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/table/DenseTable.js b/docs/data/material/components/table/DenseTable.js deleted file mode 100644 index 7b7a626bd3dc7b..00000000000000 --- a/docs/data/material/components/table/DenseTable.js +++ /dev/null @@ -1,53 +0,0 @@ -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import Paper from '@mui/material/Paper'; - -function createData(name, calories, fat, carbs, protein) { - return { name, calories, fat, carbs, protein }; -} - -const rows = [ - createData('Frozen yoghurt', 159, 6.0, 24, 4.0), - createData('Ice cream sandwich', 237, 9.0, 37, 4.3), - createData('Eclair', 262, 16.0, 24, 6.0), - createData('Cupcake', 305, 3.7, 67, 4.3), - createData('Gingerbread', 356, 16.0, 49, 3.9), -]; - -export default function DenseTable() { - return ( - - - - - Dessert (100g serving) - Calories - Fat (g) - Carbs (g) - Protein (g) - - - - {rows.map((row) => ( - - - {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - - ))} - -
    -     - ); -} diff --git a/docs/data/material/components/table/EnhancedTable.js b/docs/data/material/components/table/EnhancedTable.js deleted file mode 100644 index c6e0bf0a170cc2..00000000000000 --- a/docs/data/material/components/table/EnhancedTable.js +++ /dev/null @@ -1,367 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { alpha } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TablePagination from '@mui/material/TablePagination'; -import TableRow from '@mui/material/TableRow'; -import TableSortLabel from '@mui/material/TableSortLabel'; -import Toolbar from '@mui/material/Toolbar'; -import Typography from '@mui/material/Typography'; -import Paper from '@mui/material/Paper'; -import Checkbox from '@mui/material/Checkbox'; -import IconButton from '@mui/material/IconButton'; -import Tooltip from '@mui/material/Tooltip'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; -import DeleteIcon from '@mui/icons-material/Delete'; -import FilterListIcon from '@mui/icons-material/FilterList'; -import { visuallyHidden } from '@mui/utils'; - -function createData(id, name, calories, fat, carbs, protein) { - return { - id, - name, - calories, - fat, - carbs, - protein, - }; -} - -const rows = [ - createData(1, 'Cupcake', 305, 3.7, 67, 4.3), - createData(2, 'Donut', 452, 25.0, 51, 4.9), - createData(3, 'Eclair', 262, 16.0, 24, 6.0), - createData(4, 'Frozen yoghurt', 159, 6.0, 24, 4.0), - createData(5, 'Gingerbread', 356, 16.0, 49, 3.9), - createData(6, 'Honeycomb', 408, 3.2, 87, 6.5), - createData(7, 'Ice cream sandwich', 237, 9.0, 37, 4.3), - createData(8, 'Jelly Bean', 375, 0.0, 94, 0.0), - createData(9, 'KitKat', 518, 26.0, 65, 7.0), - createData(10, 'Lollipop', 392, 0.2, 98, 0.0), - createData(11, 'Marshmallow', 318, 0, 81, 2.0), - createData(12, 'Nougat', 360, 19.0, 9, 37.0), - createData(13, 'Oreo', 437, 18.0, 63, 4.0), -]; - -function descendingComparator(a, b, orderBy) { - if (b[orderBy] < a[orderBy]) { - return -1; - } - if (b[orderBy] > a[orderBy]) { - return 1; - } - return 0; -} - -function getComparator(order, orderBy) { - return order === 'desc' - ? (a, b) => descendingComparator(a, b, orderBy) - : (a, b) => -descendingComparator(a, b, orderBy); -} - -const headCells = [ - { - id: 'name', - numeric: false, - disablePadding: true, - label: 'Dessert (100g serving)', - }, - { - id: 'calories', - numeric: true, - disablePadding: false, - label: 'Calories', - }, - { - id: 'fat', - numeric: true, - disablePadding: false, - label: 'Fat (g)', - }, - { - id: 'carbs', - numeric: true, - disablePadding: false, - label: 'Carbs (g)', - }, - { - id: 'protein', - numeric: true, - disablePadding: false, - label: 'Protein (g)', - }, -]; - -function EnhancedTableHead(props) { - const { onSelectAllClick, order, orderBy, numSelected, rowCount, onRequestSort } = - props; - const createSortHandler = (property) => (event) => { - onRequestSort(event, property); - }; - - return ( - - - - 0 && numSelected < rowCount} - checked={rowCount > 0 && numSelected === rowCount} - onChange={onSelectAllClick} - slotProps={{ - input: { 'aria-label': 'select all desserts' }, - }} - /> - - {headCells.map((headCell) => ( - - - {headCell.label} - {orderBy === headCell.id ? ( - - {order === 'desc' ? 'sorted descending' : 'sorted ascending'} - - ) : null} - - - ))} - - - ); -} - -EnhancedTableHead.propTypes = { - numSelected: PropTypes.number.isRequired, - onRequestSort: PropTypes.func.isRequired, - onSelectAllClick: PropTypes.func.isRequired, - order: PropTypes.oneOf(['asc', 'desc']).isRequired, - orderBy: PropTypes.string.isRequired, - rowCount: PropTypes.number.isRequired, -}; - -function EnhancedTableToolbar(props) { - const { numSelected } = props; - return ( - 0 && { - bgcolor: (theme) => - alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity), - }, - ]} - > - {numSelected > 0 ? ( - - {numSelected} selected - - ) : ( - - Nutrition - - )} - {numSelected > 0 ? ( - - - - - - ) : ( - - - - - - )} - - ); -} - -EnhancedTableToolbar.propTypes = { - numSelected: PropTypes.number.isRequired, -}; - -export default function EnhancedTable() { - const [order, setOrder] = React.useState('asc'); - const [orderBy, setOrderBy] = React.useState('calories'); - const [selected, setSelected] = React.useState([]); - const [page, setPage] = React.useState(0); - const [dense, setDense] = React.useState(false); - const [rowsPerPage, setRowsPerPage] = React.useState(5); - - const handleRequestSort = (event, property) => { - const isAsc = orderBy === property && order === 'asc'; - setOrder(isAsc ? 'desc' : 'asc'); - setOrderBy(property); - }; - - const handleSelectAllClick = (event) => { - if (event.target.checked) { - const newSelected = rows.map((n) => n.id); - setSelected(newSelected); - return; - } - setSelected([]); - }; - - const handleClick = (event, id) => { - const selectedIndex = selected.indexOf(id); - let newSelected = []; - - if (selectedIndex === -1) { - newSelected = newSelected.concat(selected, id); - } else if (selectedIndex === 0) { - newSelected = newSelected.concat(selected.slice(1)); - } else if (selectedIndex === selected.length - 1) { - newSelected = newSelected.concat(selected.slice(0, -1)); - } else if (selectedIndex > 0) { - newSelected = newSelected.concat( - selected.slice(0, selectedIndex), - selected.slice(selectedIndex + 1), - ); - } - setSelected(newSelected); - }; - - const handleChangePage = (event, newPage) => { - setPage(newPage); - }; - - const handleChangeRowsPerPage = (event) => { - setRowsPerPage(parseInt(event.target.value, 10)); - setPage(0); - }; - - const handleChangeDense = (event) => { - setDense(event.target.checked); - }; - - // Avoid a layout jump when reaching the last page with empty rows. - const emptyRows = - page > 0 ? Math.max(0, (1 + page) * rowsPerPage - rows.length) : 0; - - const visibleRows = React.useMemo( - () => - [...rows] - .sort(getComparator(order, orderBy)) - .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage), - [order, orderBy, page, rowsPerPage], - ); - - return ( - - - - - - - - {visibleRows.map((row, index) => { - const isItemSelected = selected.includes(row.id); - const labelId = `enhanced-table-checkbox-${index}`; - - return ( - handleClick(event, row.id)} - role="checkbox" - aria-checked={isItemSelected} - tabIndex={-1} - key={row.id} - selected={isItemSelected} - sx={{ cursor: 'pointer' }} - > - - - - - {row.name} - - {row.calories} - {row.fat} - {row.carbs} - {row.protein} - - ); - })} - {emptyRows > 0 && ( - - - - )} - -
    -     - -     - } - label="Dense padding" - /> -     - ); -} diff --git a/docs/data/material/components/table/ReactVirtualizedTable.js b/docs/data/material/components/table/ReactVirtualizedTable.js deleted file mode 100644 index edf07da6576333..00000000000000 --- a/docs/data/material/components/table/ReactVirtualizedTable.js +++ /dev/null @@ -1,112 +0,0 @@ -import * as React from 'react'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import Paper from '@mui/material/Paper'; -import { TableVirtuoso } from 'react-virtuoso'; -import Chance from 'chance'; - -const chance = new Chance(42); - -function createData(id) { - return { - id, - firstName: chance.first(), - lastName: chance.last(), - age: chance.age(), - phone: chance.phone(), - state: chance.state({ full: true }), - }; -} - -const columns = [ - { - width: 100, - label: 'First Name', - dataKey: 'firstName', - }, - { - width: 100, - label: 'Last Name', - dataKey: 'lastName', - }, - { - width: 50, - label: 'Age', - dataKey: 'age', - numeric: true, - }, - { - width: 110, - label: 'State', - dataKey: 'state', - }, - { - width: 130, - label: 'Phone Number', - dataKey: 'phone', - }, -]; - -const rows = Array.from({ length: 200 }, (_, index) => createData(index)); - -const VirtuosoTableComponents = { - Scroller: React.forwardRef((props, ref) => ( - - )), - Table: (props) => ( - - ), - TableHead: React.forwardRef((props, ref) => ), - TableRow, - TableBody: React.forwardRef((props, ref) => ), -}; - -function fixedHeaderContent() { - return ( - - {columns.map((column) => ( - - {column.label} - - ))} - - ); -} - -function rowContent(_index, row) { - return ( - - {columns.map((column) => ( - - {row[column.dataKey]} - - ))} - - ); -} - -export default function ReactVirtualizedTable() { - return ( - - - - ); -} diff --git a/docs/data/material/components/table/ReactVirtualizedTable.tsx.preview b/docs/data/material/components/table/ReactVirtualizedTable.tsx.preview deleted file mode 100644 index 4d83b69f40940f..00000000000000 --- a/docs/data/material/components/table/ReactVirtualizedTable.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/table/SpanningTable.js b/docs/data/material/components/table/SpanningTable.js deleted file mode 100644 index 0eb6085abc3d21..00000000000000 --- a/docs/data/material/components/table/SpanningTable.js +++ /dev/null @@ -1,83 +0,0 @@ -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TableRow from '@mui/material/TableRow'; -import Paper from '@mui/material/Paper'; - -const TAX_RATE = 0.07; - -function ccyFormat(num) { - return `${num.toFixed(2)}`; -} - -function priceRow(qty, unit) { - return qty * unit; -} - -function createRow(desc, qty, unit) { - const price = priceRow(qty, unit); - return { desc, qty, unit, price }; -} - -function subtotal(items) { - return items.map(({ price }) => price).reduce((sum, i) => sum + i, 0); -} - -const rows = [ - createRow('Paperclips (Box)', 100, 1.15), - createRow('Paper (Case)', 10, 45.99), - createRow('Waste Basket', 2, 17.99), -]; - -const invoiceSubtotal = subtotal(rows); -const invoiceTaxes = TAX_RATE * invoiceSubtotal; -const invoiceTotal = invoiceTaxes + invoiceSubtotal; - -export default function SpanningTable() { - return ( - -
    - - - - Details - - Price - - - Desc - Qty. - Unit - Sum - - - - {rows.map((row) => ( - - {row.desc} - {row.qty} - {row.unit} - {ccyFormat(row.price)} - - ))} - - - Subtotal - {ccyFormat(invoiceSubtotal)} - - - Tax - {`${(TAX_RATE * 100).toFixed(0)} %`} - {ccyFormat(invoiceTaxes)} - - - Total - {ccyFormat(invoiceTotal)} - - -
    -     - ); -} diff --git a/docs/data/material/components/table/StickyHeadTable.js b/docs/data/material/components/table/StickyHeadTable.js deleted file mode 100644 index 7b0fa4f20e1a95..00000000000000 --- a/docs/data/material/components/table/StickyHeadTable.js +++ /dev/null @@ -1,123 +0,0 @@ -import * as React from 'react'; -import Paper from '@mui/material/Paper'; -import Table from '@mui/material/Table'; -import TableBody from '@mui/material/TableBody'; -import TableCell from '@mui/material/TableCell'; -import TableContainer from '@mui/material/TableContainer'; -import TableHead from '@mui/material/TableHead'; -import TablePagination from '@mui/material/TablePagination'; -import TableRow from '@mui/material/TableRow'; - -const columns = [ - { id: 'name', label: 'Name', minWidth: 170 }, - { id: 'code', label: 'ISO\u00a0Code', minWidth: 100 }, - { - id: 'population', - label: 'Population', - minWidth: 170, - align: 'right', - format: (value) => value.toLocaleString('en-US'), - }, - { - id: 'size', - label: 'Size\u00a0(km\u00b2)', - minWidth: 170, - align: 'right', - format: (value) => value.toLocaleString('en-US'), - }, - { - id: 'density', - label: 'Density', - minWidth: 170, - align: 'right', - format: (value) => value.toFixed(2), - }, -]; - -function createData(name, code, population, size) { - const density = population / size; - return { name, code, population, size, density }; -} - -const rows = [ - createData('India', 'IN', 1324171354, 3287263), - createData('China', 'CN', 1403500365, 9596961), - createData('Italy', 'IT', 60483973, 301340), - createData('United States', 'US', 327167434, 9833520), - createData('Canada', 'CA', 37602103, 9984670), - createData('Australia', 'AU', 25475400, 7692024), - createData('Germany', 'DE', 83019200, 357578), - createData('Ireland', 'IE', 4857000, 70273), - createData('Mexico', 'MX', 126577691, 1972550), - createData('Japan', 'JP', 126317000, 377973), - createData('France', 'FR', 67022000, 640679), - createData('United Kingdom', 'GB', 67545757, 242495), - createData('Russia', 'RU', 146793744, 17098246), - createData('Nigeria', 'NG', 200962417, 923768), - createData('Brazil', 'BR', 210147125, 8515767), -]; - -export default function StickyHeadTable() { - const [page, setPage] = React.useState(0); - const [rowsPerPage, setRowsPerPage] = React.useState(10); - - const handleChangePage = (event, newPage) => { - setPage(newPage); - }; - - const handleChangeRowsPerPage = (event) => { - setRowsPerPage(+event.target.value); - setPage(0); - }; - - return ( - - - - - - {columns.map((column) => ( - - {column.label} - - ))} - - - - {rows - .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage) - .map((row) => { - return ( - - {columns.map((column) => { - const value = row[column.id]; - return ( - - {column.format && typeof value === 'number' - ? column.format(value) - : value} - - ); - })} - - ); - })} - -
    -     - -     - ); -} diff --git a/docs/data/material/components/table/AccessibleTable.tsx b/docs/data/material/components/table/demos/accessible/AccessibleTable.tsx similarity index 97% rename from docs/data/material/components/table/AccessibleTable.tsx rename to docs/data/material/components/table/demos/accessible/AccessibleTable.tsx index 8d425f85a6b8a4..a0c49a18ecaa14 100644 --- a/docs/data/material/components/table/AccessibleTable.tsx +++ b/docs/data/material/components/table/demos/accessible/AccessibleTable.tsx @@ -24,6 +24,7 @@ const rows = [ export default function AccessibleTable() { return ( + // @focus-start @padding 2 @@ -51,5 +52,6 @@ export default function AccessibleTable() {
    A basic table example with a caption
    + // @focus-end ); } diff --git a/docs/data/material/components/table/demos/accessible/client.ts b/docs/data/material/components/table/demos/accessible/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/table/demos/accessible/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/table/demos/accessible/index.ts b/docs/data/material/components/table/demos/accessible/index.ts new file mode 100644 index 00000000000000..eb09f80fdc36f3 --- /dev/null +++ b/docs/data/material/components/table/demos/accessible/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AccessibleTable from './AccessibleTable'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AccessibleTable, { ClientProvider }); diff --git a/docs/data/material/components/table/BasicTable.tsx b/docs/data/material/components/table/demos/basic/BasicTable.tsx similarity index 97% rename from docs/data/material/components/table/BasicTable.tsx rename to docs/data/material/components/table/demos/basic/BasicTable.tsx index 1b9af02ccac519..acb2f36e2c5789 100644 --- a/docs/data/material/components/table/BasicTable.tsx +++ b/docs/data/material/components/table/demos/basic/BasicTable.tsx @@ -26,6 +26,7 @@ const rows = [ export default function BasicTable() { return ( + // @focus-start @padding 2 @@ -55,5 +56,6 @@ export default function BasicTable() {
    + // @focus-end ); } diff --git a/docs/data/material/components/table/demos/basic/client.ts b/docs/data/material/components/table/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/table/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/table/demos/basic/index.ts b/docs/data/material/components/table/demos/basic/index.ts new file mode 100644 index 00000000000000..07c91bbb21362c --- /dev/null +++ b/docs/data/material/components/table/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicTable from './BasicTable'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicTable, { ClientProvider }); diff --git a/docs/data/material/components/table/CollapsibleTable.tsx b/docs/data/material/components/table/demos/collapsible/CollapsibleTable.tsx similarity index 98% rename from docs/data/material/components/table/CollapsibleTable.tsx rename to docs/data/material/components/table/demos/collapsible/CollapsibleTable.tsx index ac2968d17f97b8..53fb074ab03297 100644 --- a/docs/data/material/components/table/CollapsibleTable.tsx +++ b/docs/data/material/components/table/demos/collapsible/CollapsibleTable.tsx @@ -114,6 +114,7 @@ const rows = [ ]; export default function CollapsibleTable() { return ( + // @focus-start @padding 2 @@ -133,5 +134,6 @@ export default function CollapsibleTable() {
    + // @focus-end ); } diff --git a/docs/data/material/components/table/demos/collapsible/client.ts b/docs/data/material/components/table/demos/collapsible/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/table/demos/collapsible/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/table/demos/collapsible/index.ts b/docs/data/material/components/table/demos/collapsible/index.ts new file mode 100644 index 00000000000000..25f917238cf44b --- /dev/null +++ b/docs/data/material/components/table/demos/collapsible/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CollapsibleTable from './CollapsibleTable'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CollapsibleTable, { ClientProvider }); diff --git a/docs/data/material/components/table/ColumnGroupingTable.tsx b/docs/data/material/components/table/demos/column-grouping/ColumnGroupingTable.tsx similarity index 99% rename from docs/data/material/components/table/ColumnGroupingTable.tsx rename to docs/data/material/components/table/demos/column-grouping/ColumnGroupingTable.tsx index acac568bc0f84d..196a1297dd7d4b 100644 --- a/docs/data/material/components/table/ColumnGroupingTable.tsx +++ b/docs/data/material/components/table/demos/column-grouping/ColumnGroupingTable.tsx @@ -79,6 +79,7 @@ const rows = [ ]; export default function ColumnGroupingTable() { + // @focus-start @padding 1 const [page, setPage] = React.useState(0); const [rowsPerPage, setRowsPerPage] = React.useState(10); @@ -149,4 +150,5 @@ export default function ColumnGroupingTable() { />     ); + // @focus-end } diff --git a/docs/data/material/components/table/demos/column-grouping/client.ts b/docs/data/material/components/table/demos/column-grouping/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/table/demos/column-grouping/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/table/demos/column-grouping/index.ts b/docs/data/material/components/table/demos/column-grouping/index.ts new file mode 100644 index 00000000000000..d4959207fd0983 --- /dev/null +++ b/docs/data/material/components/table/demos/column-grouping/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColumnGroupingTable from './ColumnGroupingTable'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColumnGroupingTable, { ClientProvider }); diff --git a/docs/data/material/components/table/CustomPaginationActionsTable.tsx b/docs/data/material/components/table/demos/custom-pagination-actions/CustomPaginationActionsTable.tsx similarity index 99% rename from docs/data/material/components/table/CustomPaginationActionsTable.tsx rename to docs/data/material/components/table/demos/custom-pagination-actions/CustomPaginationActionsTable.tsx index df40a5df9f2f58..6e322e911f4ee9 100644 --- a/docs/data/material/components/table/CustomPaginationActionsTable.tsx +++ b/docs/data/material/components/table/demos/custom-pagination-actions/CustomPaginationActionsTable.tsx @@ -102,6 +102,7 @@ const rows = [ ].sort((a, b) => (a.calories < b.calories ? -1 : 1)); export default function CustomPaginationActionsTable() { + // @focus-start @padding 1 const [page, setPage] = React.useState(0); const [rowsPerPage, setRowsPerPage] = React.useState(5); @@ -174,4 +175,5 @@ export default function CustomPaginationActionsTable() { ); + // @focus-end } diff --git a/docs/data/material/components/table/demos/custom-pagination-actions/client.ts b/docs/data/material/components/table/demos/custom-pagination-actions/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/table/demos/custom-pagination-actions/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/table/demos/custom-pagination-actions/index.ts b/docs/data/material/components/table/demos/custom-pagination-actions/index.ts new file mode 100644 index 00000000000000..2cc395963212f6 --- /dev/null +++ b/docs/data/material/components/table/demos/custom-pagination-actions/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomPaginationActionsTable from './CustomPaginationActionsTable'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomPaginationActionsTable, { ClientProvider }); diff --git a/docs/data/material/components/table/CustomizedTables.tsx b/docs/data/material/components/table/demos/customized/CustomizedTables.tsx similarity index 98% rename from docs/data/material/components/table/CustomizedTables.tsx rename to docs/data/material/components/table/demos/customized/CustomizedTables.tsx index cf937f9359be58..198087f744375e 100644 --- a/docs/data/material/components/table/CustomizedTables.tsx +++ b/docs/data/material/components/table/demos/customized/CustomizedTables.tsx @@ -47,6 +47,7 @@ const rows = [ export default function CustomizedTables() { return ( + // @focus-start @padding 2 @@ -73,5 +74,6 @@ export default function CustomizedTables() {
    + // @focus-end ); } diff --git a/docs/data/material/components/table/demos/customized/client.ts b/docs/data/material/components/table/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/table/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/table/demos/customized/index.ts b/docs/data/material/components/table/demos/customized/index.ts new file mode 100644 index 00000000000000..a6569b464f57de --- /dev/null +++ b/docs/data/material/components/table/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedTables from './CustomizedTables'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedTables, { ClientProvider }); diff --git a/docs/data/material/components/table/DataTable.tsx b/docs/data/material/components/table/demos/data/DataTable.tsx similarity index 91% rename from docs/data/material/components/table/DataTable.tsx rename to docs/data/material/components/table/demos/data/DataTable.tsx index 7deb0ece8e298e..54ded13907a8ef 100644 --- a/docs/data/material/components/table/DataTable.tsx +++ b/docs/data/material/components/table/demos/data/DataTable.tsx @@ -1,4 +1,5 @@ -import { DataGrid, GridColDef } from '@mui/x-data-grid'; +import { DataGrid } from '@mui/x-data-grid'; +import type { GridColDef } from '@mui/x-data-grid'; import Paper from '@mui/material/Paper'; const columns: GridColDef[] = [ @@ -37,6 +38,7 @@ const paginationModel = { page: 0, pageSize: 5 }; export default function DataTable() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/table/demos/data/client.ts b/docs/data/material/components/table/demos/data/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/table/demos/data/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/table/demos/data/index.ts b/docs/data/material/components/table/demos/data/index.ts new file mode 100644 index 00000000000000..d384663af74716 --- /dev/null +++ b/docs/data/material/components/table/demos/data/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DataTable from './DataTable'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DataTable, { ClientProvider }); diff --git a/docs/data/material/components/table/DenseTable.tsx b/docs/data/material/components/table/demos/dense/DenseTable.tsx similarity index 97% rename from docs/data/material/components/table/DenseTable.tsx rename to docs/data/material/components/table/demos/dense/DenseTable.tsx index 5272f9dbc71a34..cae60635fa01b5 100644 --- a/docs/data/material/components/table/DenseTable.tsx +++ b/docs/data/material/components/table/demos/dense/DenseTable.tsx @@ -26,6 +26,7 @@ const rows = [ export default function DenseTable() { return ( + // @focus-start @padding 2 @@ -55,5 +56,6 @@ export default function DenseTable() {
    + // @focus-end ); } diff --git a/docs/data/material/components/table/demos/dense/client.ts b/docs/data/material/components/table/demos/dense/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/table/demos/dense/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/table/demos/dense/index.ts b/docs/data/material/components/table/demos/dense/index.ts new file mode 100644 index 00000000000000..acc2d93d634562 --- /dev/null +++ b/docs/data/material/components/table/demos/dense/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DenseTable from './DenseTable'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DenseTable, { ClientProvider }); diff --git a/docs/data/material/components/table/EnhancedTable.tsx b/docs/data/material/components/table/demos/enhanced/EnhancedTable.tsx similarity index 99% rename from docs/data/material/components/table/EnhancedTable.tsx rename to docs/data/material/components/table/demos/enhanced/EnhancedTable.tsx index cc80746fb2eb33..6d784f9849d7f9 100644 --- a/docs/data/material/components/table/EnhancedTable.tsx +++ b/docs/data/material/components/table/demos/enhanced/EnhancedTable.tsx @@ -240,6 +240,7 @@ function EnhancedTableToolbar(props: EnhancedTableToolbarProps) { ); } export default function EnhancedTable() { + // @focus-start @padding 1 const [order, setOrder] = React.useState('asc'); const [orderBy, setOrderBy] = React.useState('calories'); const [selected, setSelected] = React.useState([]); @@ -395,4 +396,5 @@ export default function EnhancedTable() { /> ); + // @focus-end } diff --git a/docs/data/material/components/table/demos/enhanced/client.ts b/docs/data/material/components/table/demos/enhanced/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/table/demos/enhanced/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/table/demos/enhanced/index.ts b/docs/data/material/components/table/demos/enhanced/index.ts new file mode 100644 index 00000000000000..e6da9c1735f549 --- /dev/null +++ b/docs/data/material/components/table/demos/enhanced/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import EnhancedTable from './EnhancedTable'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, EnhancedTable, { ClientProvider }); diff --git a/docs/data/material/components/table/ReactVirtualizedTable.tsx b/docs/data/material/components/table/demos/react-virtualized/ReactVirtualizedTable.tsx similarity index 95% rename from docs/data/material/components/table/ReactVirtualizedTable.tsx rename to docs/data/material/components/table/demos/react-virtualized/ReactVirtualizedTable.tsx index 6b041710cdc85c..ed0ed41a2a0bfa 100644 --- a/docs/data/material/components/table/ReactVirtualizedTable.tsx +++ b/docs/data/material/components/table/demos/react-virtualized/ReactVirtualizedTable.tsx @@ -6,7 +6,8 @@ import TableContainer from '@mui/material/TableContainer'; import TableHead from '@mui/material/TableHead'; import TableRow from '@mui/material/TableRow'; import Paper from '@mui/material/Paper'; -import { TableVirtuoso, TableComponents } from 'react-virtuoso'; +import { TableVirtuoso } from 'react-virtuoso'; +import type { TableComponents } from 'react-virtuoso'; import Chance from 'chance'; interface Data { @@ -120,6 +121,7 @@ function rowContent(_index: number, row: Data) { export default function ReactVirtualizedTable() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/table/demos/react-virtualized/client.ts b/docs/data/material/components/table/demos/react-virtualized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/table/demos/react-virtualized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/table/demos/react-virtualized/index.ts b/docs/data/material/components/table/demos/react-virtualized/index.ts new file mode 100644 index 00000000000000..e543d103993c0b --- /dev/null +++ b/docs/data/material/components/table/demos/react-virtualized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ReactVirtualizedTable from './ReactVirtualizedTable'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ReactVirtualizedTable, { ClientProvider }); diff --git a/docs/data/material/components/table/SpanningTable.tsx b/docs/data/material/components/table/demos/spanning/SpanningTable.tsx similarity index 98% rename from docs/data/material/components/table/SpanningTable.tsx rename to docs/data/material/components/table/demos/spanning/SpanningTable.tsx index bcc3a80dfcb154..0a6129b81c9114 100644 --- a/docs/data/material/components/table/SpanningTable.tsx +++ b/docs/data/material/components/table/demos/spanning/SpanningTable.tsx @@ -44,6 +44,7 @@ const invoiceTotal = invoiceTaxes + invoiceSubtotal; export default function SpanningTable() { return ( + // @focus-start @padding 2 @@ -86,5 +87,6 @@ export default function SpanningTable() {
    + // @focus-end ); } diff --git a/docs/data/material/components/table/demos/spanning/client.ts b/docs/data/material/components/table/demos/spanning/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/table/demos/spanning/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/table/demos/spanning/index.ts b/docs/data/material/components/table/demos/spanning/index.ts new file mode 100644 index 00000000000000..126b6d6ef7dfa4 --- /dev/null +++ b/docs/data/material/components/table/demos/spanning/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SpanningTable from './SpanningTable'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SpanningTable, { ClientProvider }); diff --git a/docs/data/material/components/table/StickyHeadTable.tsx b/docs/data/material/components/table/demos/sticky-head/StickyHeadTable.tsx similarity index 98% rename from docs/data/material/components/table/StickyHeadTable.tsx rename to docs/data/material/components/table/demos/sticky-head/StickyHeadTable.tsx index 5b05434875d19b..a121a5cd964340 100644 --- a/docs/data/material/components/table/StickyHeadTable.tsx +++ b/docs/data/material/components/table/demos/sticky-head/StickyHeadTable.tsx @@ -79,6 +79,7 @@ const rows = [ ]; export default function StickyHeadTable() { + // @focus-start @padding 1 const [page, setPage] = React.useState(0); const [rowsPerPage, setRowsPerPage] = React.useState(10); @@ -141,4 +142,5 @@ export default function StickyHeadTable() { />     ); + // @focus-end } diff --git a/docs/data/material/components/table/demos/sticky-head/client.ts b/docs/data/material/components/table/demos/sticky-head/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/table/demos/sticky-head/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/table/demos/sticky-head/index.ts b/docs/data/material/components/table/demos/sticky-head/index.ts new file mode 100644 index 00000000000000..165b183845a52f --- /dev/null +++ b/docs/data/material/components/table/demos/sticky-head/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StickyHeadTable from './StickyHeadTable'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StickyHeadTable, { ClientProvider }); diff --git a/docs/data/material/components/table/table.md b/docs/data/material/components/table/table.md index 439218bee32ccf..8f13a73bd2a493 100644 --- a/docs/data/material/components/table/table.md +++ b/docs/data/material/components/table/table.md @@ -38,7 +38,7 @@ Tables are implemented using a collection of related components: A simple example with no frills. -{{"demo": "BasicTable.js", "bg": true}} +{{"component": "file://./demos/basic/index.ts", "bg": true}} ## Data table @@ -48,13 +48,13 @@ This constraint makes building rich data tables challenging. The [`DataGrid` component](/x/react-data-grid/) is designed for use-cases that are focused on handling large amounts of tabular data. While it comes with a more rigid structure, in exchange, you gain more powerful features. -{{"demo": "DataTable.js", "bg": true}} +{{"component": "file://./demos/data/index.ts", "bg": true}} ## Dense table A simple example of a dense table with no frills. -{{"demo": "DenseTable.js", "bg": true}} +{{"component": "file://./demos/dense/index.ts", "bg": true}} ## Sorting & selecting @@ -62,14 +62,14 @@ This example demonstrates the use of `Checkbox` and clickable rows for selection The Table has been given a fixed width to demonstrate horizontal scrolling. In order to prevent the pagination controls from scrolling, the TablePagination component is used outside of the Table. (The ['Custom Table Pagination Action' example](#custom-pagination-actions) below shows the pagination within the TableFooter.) -{{"demo": "EnhancedTable.js", "bg": true}} +{{"component": "file://./demos/enhanced/index.ts", "bg": true}} ## Customization Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedTables.js", "bg": true}} +{{"component": "file://./demos/customized/index.ts", "bg": true}} ### Custom pagination options @@ -92,14 +92,14 @@ You should either provide an array of: The `ActionsComponent` prop of the `TablePagination` component allows the implementation of custom actions. -{{"demo": "CustomPaginationActionsTable.js", "bg": true}} +{{"component": "file://./demos/custom-pagination-actions/index.ts", "bg": true}} ## Sticky header Here is an example of a table with scrollable rows and fixed column headers. It leverages the `stickyHeader` prop. -{{"demo": "StickyHeadTable.js", "bg": true}} +{{"component": "file://./demos/sticky-head/index.ts", "bg": true}} ## Column grouping @@ -112,20 +112,20 @@ You can group column headers by rendering multiple table rows inside a table hea ``` -{{"demo": "ColumnGroupingTable.js", "bg": true}} +{{"component": "file://./demos/column-grouping/index.ts", "bg": true}} ## Collapsible table An example of a table with expandable rows, revealing more information. It utilizes the [`Collapse`](/material-ui/api/collapse/) component. -{{"demo": "CollapsibleTable.js", "bg": true}} +{{"component": "file://./demos/collapsible/index.ts", "bg": true}} ## Spanning table A simple example with spanning rows & columns. -{{"demo": "SpanningTable.js", "bg": true}} +{{"component": "file://./demos/spanning/index.ts", "bg": true}} ## Virtualized table @@ -133,7 +133,7 @@ In the following example, we demonstrate how to use [react-virtuoso](https://git It renders 200 rows and can easily handle more. Virtualization helps with performance issues. -{{"demo": "ReactVirtualizedTable.js", "bg": true}} +{{"component": "file://./demos/react-virtualized/index.ts", "bg": true}} ## Accessibility @@ -143,4 +143,4 @@ Virtualization helps with performance issues. A caption functions like a heading for a table. Most screen readers announce the content of captions. Captions help users to find a table and understand what it's about and decide if they want to read it. -{{"demo": "AccessibleTable.js", "bg": true}} +{{"component": "file://./demos/accessible/index.ts", "bg": true}} diff --git a/docs/data/material/components/tabs/AccessibleTabs1.js b/docs/data/material/components/tabs/AccessibleTabs1.js deleted file mode 100644 index aaf530529906e7..00000000000000 --- a/docs/data/material/components/tabs/AccessibleTabs1.js +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import Box from '@mui/material/Box'; - -export default function AccessibleTabs1() { - const [value, setValue] = React.useState(0); - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - ); -} diff --git a/docs/data/material/components/tabs/AccessibleTabs1.tsx.preview b/docs/data/material/components/tabs/AccessibleTabs1.tsx.preview deleted file mode 100644 index b96957549efcc3..00000000000000 --- a/docs/data/material/components/tabs/AccessibleTabs1.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/tabs/AccessibleTabs2.js b/docs/data/material/components/tabs/AccessibleTabs2.js deleted file mode 100644 index 22850b7585e7e8..00000000000000 --- a/docs/data/material/components/tabs/AccessibleTabs2.js +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import Box from '@mui/material/Box'; - -export default function AccessibleTabs2() { - const [value, setValue] = React.useState(0); - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - ); -} diff --git a/docs/data/material/components/tabs/AccessibleTabs2.tsx.preview b/docs/data/material/components/tabs/AccessibleTabs2.tsx.preview deleted file mode 100644 index 3cacc0f8ed1286..00000000000000 --- a/docs/data/material/components/tabs/AccessibleTabs2.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/tabs/BasicTabs.js b/docs/data/material/components/tabs/BasicTabs.js deleted file mode 100644 index e8ba27f0025385..00000000000000 --- a/docs/data/material/components/tabs/BasicTabs.js +++ /dev/null @@ -1,63 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import Box from '@mui/material/Box'; - -function CustomTabPanel(props) { - const { children, value, index, ...other } = props; - - return ( - - ); -} - -CustomTabPanel.propTypes = { - children: PropTypes.node, - index: PropTypes.number.isRequired, - value: PropTypes.number.isRequired, -}; - -function a11yProps(index) { - return { - id: `simple-tab-${index}`, - 'aria-controls': `simple-tabpanel-${index}`, - }; -} - -export default function BasicTabs() { - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - - - Item One - - - Item Two - - - Item Three - - - ); -} diff --git a/docs/data/material/components/tabs/BasicTabs.tsx.preview b/docs/data/material/components/tabs/BasicTabs.tsx.preview deleted file mode 100644 index 8584e8a76583fb..00000000000000 --- a/docs/data/material/components/tabs/BasicTabs.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - Item One - - - Item Two - - - Item Three - \ No newline at end of file diff --git a/docs/data/material/components/tabs/CenteredTabs.js b/docs/data/material/components/tabs/CenteredTabs.js deleted file mode 100644 index 19380cb7260007..00000000000000 --- a/docs/data/material/components/tabs/CenteredTabs.js +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; - -export default function CenteredTabs() { - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - ); -} diff --git a/docs/data/material/components/tabs/CenteredTabs.tsx.preview b/docs/data/material/components/tabs/CenteredTabs.tsx.preview deleted file mode 100644 index be555235150d66..00000000000000 --- a/docs/data/material/components/tabs/CenteredTabs.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/tabs/ColorTabs.js b/docs/data/material/components/tabs/ColorTabs.js deleted file mode 100644 index c7dd8c5de233d9..00000000000000 --- a/docs/data/material/components/tabs/ColorTabs.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import Box from '@mui/material/Box'; - -export default function ColorTabs() { - const [value, setValue] = React.useState('one'); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - ); -} diff --git a/docs/data/material/components/tabs/ColorTabs.tsx.preview b/docs/data/material/components/tabs/ColorTabs.tsx.preview deleted file mode 100644 index d661c938994d6a..00000000000000 --- a/docs/data/material/components/tabs/ColorTabs.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/tabs/CustomizedTabs.js b/docs/data/material/components/tabs/CustomizedTabs.js deleted file mode 100644 index b3f379fc9ed934..00000000000000 --- a/docs/data/material/components/tabs/CustomizedTabs.js +++ /dev/null @@ -1,115 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import Box from '@mui/material/Box'; - -const AntTabs = styled(Tabs)({ - borderBottom: '1px solid #e8e8e8', - '& .MuiTabs-indicator': { - backgroundColor: '#1890ff', - }, -}); - -const AntTab = styled((props) => )(({ theme }) => ({ - textTransform: 'none', - minWidth: 0, - [theme.breakpoints.up('sm')]: { - minWidth: 0, - }, - fontWeight: theme.typography.fontWeightRegular, - marginRight: theme.spacing(1), - color: 'rgba(0, 0, 0, 0.85)', - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - '&:hover': { - color: '#40a9ff', - opacity: 1, - }, - '&.Mui-selected': { - color: '#1890ff', - fontWeight: theme.typography.fontWeightMedium, - }, - '&.Mui-focusVisible': { - backgroundColor: '#d1eaff', - }, -})); - -const StyledTabs = styled((props) => ( - }, - }} - /> -))({ - '& .MuiTabs-indicator': { - display: 'flex', - justifyContent: 'center', - backgroundColor: 'transparent', - }, - '& .MuiTabs-indicatorSpan': { - maxWidth: 40, - width: '100%', - backgroundColor: '#635ee7', - }, -}); - -const StyledTab = styled((props) => )( - ({ theme }) => ({ - textTransform: 'none', - fontWeight: theme.typography.fontWeightRegular, - fontSize: theme.typography.pxToRem(15), - marginRight: theme.spacing(1), - color: 'rgba(255, 255, 255, 0.7)', - '&.Mui-selected': { - color: '#fff', - }, - '&.Mui-focusVisible': { - backgroundColor: 'rgba(100, 95, 228, 0.32)', - }, - }), -); - -export default function CustomizedTabs() { - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/tabs/DisabledTabs.js b/docs/data/material/components/tabs/DisabledTabs.js deleted file mode 100644 index effba54701aa44..00000000000000 --- a/docs/data/material/components/tabs/DisabledTabs.js +++ /dev/null @@ -1,19 +0,0 @@ -import * as React from 'react'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; - -export default function DisabledTabs() { - const [value, setValue] = React.useState(2); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - ); -} diff --git a/docs/data/material/components/tabs/DisabledTabs.tsx.preview b/docs/data/material/components/tabs/DisabledTabs.tsx.preview deleted file mode 100644 index cca085c5baa64b..00000000000000 --- a/docs/data/material/components/tabs/DisabledTabs.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/tabs/FullWidthTabs.js b/docs/data/material/components/tabs/FullWidthTabs.js deleted file mode 100644 index 2e8a08deba0e8a..00000000000000 --- a/docs/data/material/components/tabs/FullWidthTabs.js +++ /dev/null @@ -1,78 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { useTheme } from '@mui/material/styles'; -import AppBar from '@mui/material/AppBar'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import Typography from '@mui/material/Typography'; -import Box from '@mui/material/Box'; - -function TabPanel(props) { - const { children, value, index, ...other } = props; - - return ( - - ); -} - -TabPanel.propTypes = { - children: PropTypes.node, - index: PropTypes.number.isRequired, - value: PropTypes.number.isRequired, -}; - -function a11yProps(index) { - return { - id: `full-width-tab-${index}`, - 'aria-controls': `full-width-tabpanel-${index}`, - }; -} - -export default function FullWidthTabs() { - const theme = useTheme(); - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - - - Item One - - - Item Two - - - Item Three - - - ); -} diff --git a/docs/data/material/components/tabs/IconLabelTabs.js b/docs/data/material/components/tabs/IconLabelTabs.js deleted file mode 100644 index 77531308b8e977..00000000000000 --- a/docs/data/material/components/tabs/IconLabelTabs.js +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import PhoneIcon from '@mui/icons-material/Phone'; -import FavoriteIcon from '@mui/icons-material/Favorite'; -import PersonPinIcon from '@mui/icons-material/PersonPin'; - -export default function IconLabelTabs() { - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - } label="RECENTS" /> - } label="FAVORITES" /> - } label="NEARBY" /> - - ); -} diff --git a/docs/data/material/components/tabs/IconLabelTabs.tsx.preview b/docs/data/material/components/tabs/IconLabelTabs.tsx.preview deleted file mode 100644 index 21d91a937b3838..00000000000000 --- a/docs/data/material/components/tabs/IconLabelTabs.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - } label="RECENTS" /> - } label="FAVORITES" /> - } label="NEARBY" /> - \ No newline at end of file diff --git a/docs/data/material/components/tabs/IconPositionTabs.js b/docs/data/material/components/tabs/IconPositionTabs.js deleted file mode 100644 index 0072597feefb4d..00000000000000 --- a/docs/data/material/components/tabs/IconPositionTabs.js +++ /dev/null @@ -1,28 +0,0 @@ -import * as React from 'react'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import PhoneIcon from '@mui/icons-material/Phone'; -import FavoriteIcon from '@mui/icons-material/Favorite'; -import PersonPinIcon from '@mui/icons-material/PersonPin'; -import PhoneMissedIcon from '@mui/icons-material/PhoneMissed'; - -export default function IconPositionTabs() { - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - } label="top" /> - } iconPosition="start" label="start" /> - } iconPosition="end" label="end" /> - } iconPosition="bottom" label="bottom" /> - - ); -} diff --git a/docs/data/material/components/tabs/IconPositionTabs.tsx.preview b/docs/data/material/components/tabs/IconPositionTabs.tsx.preview deleted file mode 100644 index d04bb5211a450a..00000000000000 --- a/docs/data/material/components/tabs/IconPositionTabs.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - } label="top" /> - } iconPosition="start" label="start" /> - } iconPosition="end" label="end" /> - } iconPosition="bottom" label="bottom" /> - \ No newline at end of file diff --git a/docs/data/material/components/tabs/IconTabs.js b/docs/data/material/components/tabs/IconTabs.js deleted file mode 100644 index d6d44179a3de7c..00000000000000 --- a/docs/data/material/components/tabs/IconTabs.js +++ /dev/null @@ -1,22 +0,0 @@ -import * as React from 'react'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import PhoneIcon from '@mui/icons-material/Phone'; -import FavoriteIcon from '@mui/icons-material/Favorite'; -import PersonPinIcon from '@mui/icons-material/PersonPin'; - -export default function IconTabs() { - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - } aria-label="phone" /> - } aria-label="favorite" /> - } aria-label="person" /> - - ); -} diff --git a/docs/data/material/components/tabs/IconTabs.tsx.preview b/docs/data/material/components/tabs/IconTabs.tsx.preview deleted file mode 100644 index 654efefa22ae2a..00000000000000 --- a/docs/data/material/components/tabs/IconTabs.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - } aria-label="phone" /> - } aria-label="favorite" /> - } aria-label="person" /> - \ No newline at end of file diff --git a/docs/data/material/components/tabs/LabTabs.js b/docs/data/material/components/tabs/LabTabs.js deleted file mode 100644 index 8c3d7ac3c456ff..00000000000000 --- a/docs/data/material/components/tabs/LabTabs.js +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Tab from '@mui/material/Tab'; -import TabContext from '@mui/lab/TabContext'; -import TabList from '@mui/lab/TabList'; -import TabPanel from '@mui/lab/TabPanel'; - -export default function LabTabs() { - const [value, setValue] = React.useState('1'); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - - - Item One - Item Two - Item Three - - - ); -} diff --git a/docs/data/material/components/tabs/LabTabs.tsx.preview b/docs/data/material/components/tabs/LabTabs.tsx.preview deleted file mode 100644 index 82f9740c27b581..00000000000000 --- a/docs/data/material/components/tabs/LabTabs.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - - - - Item One - Item Two - Item Three - \ No newline at end of file diff --git a/docs/data/material/components/tabs/NavTabs.js b/docs/data/material/components/tabs/NavTabs.js deleted file mode 100644 index 288b734b71318e..00000000000000 --- a/docs/data/material/components/tabs/NavTabs.js +++ /dev/null @@ -1,68 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Box from '@mui/material/Box'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; - -function samePageLinkNavigation(event) { - if ( - event.defaultPrevented || - event.button !== 0 || // ignore everything but left-click - event.metaKey || - event.ctrlKey || - event.altKey || - event.shiftKey - ) { - return false; - } - return true; -} - -function LinkTab(props) { - return ( - { - // Routing libraries handle this, you can remove the onClick handle when using them. - if (samePageLinkNavigation(event)) { - event.preventDefault(); - } - }} - aria-current={props.selected && 'page'} - {...props} - /> - ); -} - -LinkTab.propTypes = { - selected: PropTypes.bool, -}; - -export default function NavTabs() { - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - // event.type can be equal to focus with selectionFollowsFocus. - if ( - event.type !== 'click' || - (event.type === 'click' && samePageLinkNavigation(event)) - ) { - setValue(newValue); - } - }; - - return ( - - - - - - - - ); -} diff --git a/docs/data/material/components/tabs/NavTabs.tsx.preview b/docs/data/material/components/tabs/NavTabs.tsx.preview deleted file mode 100644 index 586cccfc1bfee0..00000000000000 --- a/docs/data/material/components/tabs/NavTabs.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonAuto.js b/docs/data/material/components/tabs/ScrollableTabsButtonAuto.js deleted file mode 100644 index 27da03994b5955..00000000000000 --- a/docs/data/material/components/tabs/ScrollableTabsButtonAuto.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import Box from '@mui/material/Box'; - -export default function ScrollableTabsButtonAuto() { - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx.preview b/docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx.preview deleted file mode 100644 index f4659b68b0d63c..00000000000000 --- a/docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonForce.js b/docs/data/material/components/tabs/ScrollableTabsButtonForce.js deleted file mode 100644 index 138dbeb41cfc1a..00000000000000 --- a/docs/data/material/components/tabs/ScrollableTabsButtonForce.js +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import Box from '@mui/material/Box'; - -export default function ScrollableTabsButtonForce() { - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx.preview b/docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx.preview deleted file mode 100644 index a539c79fbbb122..00000000000000 --- a/docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.js b/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.js deleted file mode 100644 index 32a41cf39c20f3..00000000000000 --- a/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.js +++ /dev/null @@ -1,32 +0,0 @@ -import * as React from 'react'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import Box from '@mui/material/Box'; - -export default function ScrollableTabsButtonPrevent() { - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx.preview b/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx.preview deleted file mode 100644 index 0604eaa68aecd1..00000000000000 --- a/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonVisible.js b/docs/data/material/components/tabs/ScrollableTabsButtonVisible.js deleted file mode 100644 index c78ee7ef08cf06..00000000000000 --- a/docs/data/material/components/tabs/ScrollableTabsButtonVisible.js +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Tabs, { tabsClasses } from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; - -export default function ScrollableTabsButtonVisible() { - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/tabs/TabsWrappedLabel.js b/docs/data/material/components/tabs/TabsWrappedLabel.js deleted file mode 100644 index ea2feb7659cb0d..00000000000000 --- a/docs/data/material/components/tabs/TabsWrappedLabel.js +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from 'react'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import Box from '@mui/material/Box'; - -export default function TabsWrappedLabel() { - const [value, setValue] = React.useState('one'); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - ); -} diff --git a/docs/data/material/components/tabs/TabsWrappedLabel.tsx.preview b/docs/data/material/components/tabs/TabsWrappedLabel.tsx.preview deleted file mode 100644 index b99f48c0ee40d9..00000000000000 --- a/docs/data/material/components/tabs/TabsWrappedLabel.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/tabs/VerticalTabs.js b/docs/data/material/components/tabs/VerticalTabs.js deleted file mode 100644 index 342d42d39fb0f2..00000000000000 --- a/docs/data/material/components/tabs/VerticalTabs.js +++ /dev/null @@ -1,91 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Tabs from '@mui/material/Tabs'; -import Tab from '@mui/material/Tab'; -import Typography from '@mui/material/Typography'; -import Box from '@mui/material/Box'; - -function TabPanel(props) { - const { children, value, index, ...other } = props; - - return ( - - ); -} - -TabPanel.propTypes = { - children: PropTypes.node, - index: PropTypes.number.isRequired, - value: PropTypes.number.isRequired, -}; - -function a11yProps(index) { - return { - id: `vertical-tab-${index}`, - 'aria-controls': `vertical-tabpanel-${index}`, - }; -} - -export default function VerticalTabs() { - const [value, setValue] = React.useState(0); - - const handleChange = (event, newValue) => { - setValue(newValue); - }; - - return ( - - - - - - - - - - - - Item One - - - Item Two - - - Item Three - - - Item Four - - - Item Five - - - Item Six - - - Item Seven - - - ); -} diff --git a/docs/data/material/components/tabs/AccessibleTabs1.tsx b/docs/data/material/components/tabs/demos/accessible-tabs1/AccessibleTabs1.tsx similarity index 92% rename from docs/data/material/components/tabs/AccessibleTabs1.tsx rename to docs/data/material/components/tabs/demos/accessible-tabs1/AccessibleTabs1.tsx index 3e64af5f42d079..14dd2fe754804e 100644 --- a/docs/data/material/components/tabs/AccessibleTabs1.tsx +++ b/docs/data/material/components/tabs/demos/accessible-tabs1/AccessibleTabs1.tsx @@ -11,6 +11,7 @@ export default function AccessibleTabs1() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/tabs/demos/accessible-tabs1/client.ts b/docs/data/material/components/tabs/demos/accessible-tabs1/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/accessible-tabs1/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/accessible-tabs1/index.ts b/docs/data/material/components/tabs/demos/accessible-tabs1/index.ts new file mode 100644 index 00000000000000..6f674a522dc018 --- /dev/null +++ b/docs/data/material/components/tabs/demos/accessible-tabs1/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AccessibleTabs1 from './AccessibleTabs1'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AccessibleTabs1, { ClientProvider }); diff --git a/docs/data/material/components/tabs/AccessibleTabs2.tsx b/docs/data/material/components/tabs/demos/accessible-tabs2/AccessibleTabs2.tsx similarity index 92% rename from docs/data/material/components/tabs/AccessibleTabs2.tsx rename to docs/data/material/components/tabs/demos/accessible-tabs2/AccessibleTabs2.tsx index 7d546f4956fd9c..d206a3d4d04b69 100644 --- a/docs/data/material/components/tabs/AccessibleTabs2.tsx +++ b/docs/data/material/components/tabs/demos/accessible-tabs2/AccessibleTabs2.tsx @@ -11,6 +11,7 @@ export default function AccessibleTabs2() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/tabs/demos/accessible-tabs2/client.ts b/docs/data/material/components/tabs/demos/accessible-tabs2/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/accessible-tabs2/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/accessible-tabs2/index.ts b/docs/data/material/components/tabs/demos/accessible-tabs2/index.ts new file mode 100644 index 00000000000000..408afbab1c29a1 --- /dev/null +++ b/docs/data/material/components/tabs/demos/accessible-tabs2/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AccessibleTabs2 from './AccessibleTabs2'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AccessibleTabs2, { ClientProvider }); diff --git a/docs/data/material/components/tabs/BasicTabs.tsx b/docs/data/material/components/tabs/demos/basic/BasicTabs.tsx similarity index 96% rename from docs/data/material/components/tabs/BasicTabs.tsx rename to docs/data/material/components/tabs/demos/basic/BasicTabs.tsx index 947ad4d993b354..91c557ba1f8fff 100644 --- a/docs/data/material/components/tabs/BasicTabs.tsx +++ b/docs/data/material/components/tabs/demos/basic/BasicTabs.tsx @@ -41,6 +41,7 @@ export default function BasicTabs() { return ( + {/* @focus-start */} @@ -57,6 +58,7 @@ export default function BasicTabs() { Item Three + {/* @focus-end */} ); } diff --git a/docs/data/material/components/tabs/demos/basic/client.ts b/docs/data/material/components/tabs/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/basic/index.ts b/docs/data/material/components/tabs/demos/basic/index.ts new file mode 100644 index 00000000000000..13304757473c7e --- /dev/null +++ b/docs/data/material/components/tabs/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicTabs from './BasicTabs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicTabs, { ClientProvider }); diff --git a/docs/data/material/components/tabs/CenteredTabs.tsx b/docs/data/material/components/tabs/demos/centered/CenteredTabs.tsx similarity index 92% rename from docs/data/material/components/tabs/CenteredTabs.tsx rename to docs/data/material/components/tabs/demos/centered/CenteredTabs.tsx index 4d3db456b53937..e7f4cf738b6d7d 100644 --- a/docs/data/material/components/tabs/CenteredTabs.tsx +++ b/docs/data/material/components/tabs/demos/centered/CenteredTabs.tsx @@ -12,11 +12,13 @@ export default function CenteredTabs() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/tabs/demos/centered/client.ts b/docs/data/material/components/tabs/demos/centered/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/centered/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/centered/index.ts b/docs/data/material/components/tabs/demos/centered/index.ts new file mode 100644 index 00000000000000..2ff3e2225d1ae4 --- /dev/null +++ b/docs/data/material/components/tabs/demos/centered/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CenteredTabs from './CenteredTabs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CenteredTabs, { ClientProvider }); diff --git a/docs/data/material/components/tabs/ColorTabs.tsx b/docs/data/material/components/tabs/demos/color/ColorTabs.tsx similarity index 93% rename from docs/data/material/components/tabs/ColorTabs.tsx rename to docs/data/material/components/tabs/demos/color/ColorTabs.tsx index 059732d5f72fce..5f266d5d372932 100644 --- a/docs/data/material/components/tabs/ColorTabs.tsx +++ b/docs/data/material/components/tabs/demos/color/ColorTabs.tsx @@ -12,6 +12,7 @@ export default function ColorTabs() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/tabs/demos/color/client.ts b/docs/data/material/components/tabs/demos/color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/color/index.ts b/docs/data/material/components/tabs/demos/color/index.ts new file mode 100644 index 00000000000000..c170a098a8cf00 --- /dev/null +++ b/docs/data/material/components/tabs/demos/color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorTabs from './ColorTabs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorTabs, { ClientProvider }); diff --git a/docs/data/material/components/tabs/CustomizedTabs.tsx b/docs/data/material/components/tabs/demos/customized/CustomizedTabs.tsx similarity index 98% rename from docs/data/material/components/tabs/CustomizedTabs.tsx rename to docs/data/material/components/tabs/demos/customized/CustomizedTabs.tsx index 75b3f88fe6ad35..217c748b9cd101 100644 --- a/docs/data/material/components/tabs/CustomizedTabs.tsx +++ b/docs/data/material/components/tabs/demos/customized/CustomizedTabs.tsx @@ -94,6 +94,7 @@ const StyledTab = styled((props: StyledTabProps) => ( })); export default function CustomizedTabs() { + // @focus-start @padding 1 const [value, setValue] = React.useState(0); const handleChange = (event: React.SyntheticEvent, newValue: number) => { @@ -124,4 +125,5 @@ export default function CustomizedTabs() { ); + // @focus-end } diff --git a/docs/data/material/components/tabs/demos/customized/client.ts b/docs/data/material/components/tabs/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/customized/index.ts b/docs/data/material/components/tabs/demos/customized/index.ts new file mode 100644 index 00000000000000..19c5c262e827e9 --- /dev/null +++ b/docs/data/material/components/tabs/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedTabs from './CustomizedTabs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedTabs, { ClientProvider }); diff --git a/docs/data/material/components/tabs/DisabledTabs.tsx b/docs/data/material/components/tabs/demos/disabled/DisabledTabs.tsx similarity index 91% rename from docs/data/material/components/tabs/DisabledTabs.tsx rename to docs/data/material/components/tabs/demos/disabled/DisabledTabs.tsx index 144001a850c06e..acf44d3b0243fb 100644 --- a/docs/data/material/components/tabs/DisabledTabs.tsx +++ b/docs/data/material/components/tabs/demos/disabled/DisabledTabs.tsx @@ -10,10 +10,12 @@ export default function DisabledTabs() { }; return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/tabs/demos/disabled/client.ts b/docs/data/material/components/tabs/demos/disabled/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/disabled/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/disabled/index.ts b/docs/data/material/components/tabs/demos/disabled/index.ts new file mode 100644 index 00000000000000..f88d48935ad1f7 --- /dev/null +++ b/docs/data/material/components/tabs/demos/disabled/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DisabledTabs from './DisabledTabs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DisabledTabs, { ClientProvider }); diff --git a/docs/data/material/components/tabs/FullWidthTabs.tsx b/docs/data/material/components/tabs/demos/full-width/FullWidthTabs.tsx similarity index 97% rename from docs/data/material/components/tabs/FullWidthTabs.tsx rename to docs/data/material/components/tabs/demos/full-width/FullWidthTabs.tsx index 99ff253bb02f63..79535b60dc3049 100644 --- a/docs/data/material/components/tabs/FullWidthTabs.tsx +++ b/docs/data/material/components/tabs/demos/full-width/FullWidthTabs.tsx @@ -41,6 +41,7 @@ function a11yProps(index: number) { } export default function FullWidthTabs() { + // @focus-start @padding 1 const theme = useTheme(); const [value, setValue] = React.useState(0); @@ -75,4 +76,5 @@ export default function FullWidthTabs() { ); + // @focus-end } diff --git a/docs/data/material/components/tabs/demos/full-width/client.ts b/docs/data/material/components/tabs/demos/full-width/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/full-width/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/full-width/index.ts b/docs/data/material/components/tabs/demos/full-width/index.ts new file mode 100644 index 00000000000000..f258d73aa965ff --- /dev/null +++ b/docs/data/material/components/tabs/demos/full-width/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FullWidthTabs from './FullWidthTabs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FullWidthTabs, { ClientProvider }); diff --git a/docs/data/material/components/tabs/IconLabelTabs.tsx b/docs/data/material/components/tabs/demos/icon-label/IconLabelTabs.tsx similarity index 93% rename from docs/data/material/components/tabs/IconLabelTabs.tsx rename to docs/data/material/components/tabs/demos/icon-label/IconLabelTabs.tsx index 32fa1313f962d4..cb9c452df28d24 100644 --- a/docs/data/material/components/tabs/IconLabelTabs.tsx +++ b/docs/data/material/components/tabs/demos/icon-label/IconLabelTabs.tsx @@ -13,10 +13,12 @@ export default function IconLabelTabs() { }; return ( + // @focus-start @padding 2 } label="RECENTS" /> } label="FAVORITES" /> } label="NEARBY" /> + // @focus-end ); } diff --git a/docs/data/material/components/tabs/demos/icon-label/client.ts b/docs/data/material/components/tabs/demos/icon-label/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/icon-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/icon-label/index.ts b/docs/data/material/components/tabs/demos/icon-label/index.ts new file mode 100644 index 00000000000000..6b57c98cf45caa --- /dev/null +++ b/docs/data/material/components/tabs/demos/icon-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IconLabelTabs from './IconLabelTabs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IconLabelTabs, { ClientProvider }); diff --git a/docs/data/material/components/tabs/IconPositionTabs.tsx b/docs/data/material/components/tabs/demos/icon-position/IconPositionTabs.tsx similarity index 95% rename from docs/data/material/components/tabs/IconPositionTabs.tsx rename to docs/data/material/components/tabs/demos/icon-position/IconPositionTabs.tsx index 180e97f6378649..d320b897e4732d 100644 --- a/docs/data/material/components/tabs/IconPositionTabs.tsx +++ b/docs/data/material/components/tabs/demos/icon-position/IconPositionTabs.tsx @@ -14,6 +14,7 @@ export default function IconPositionTabs() { }; return ( + // @focus-start @padding 2 } iconPosition="end" label="end" /> } iconPosition="bottom" label="bottom" /> + // @focus-end ); } diff --git a/docs/data/material/components/tabs/demos/icon-position/client.ts b/docs/data/material/components/tabs/demos/icon-position/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/icon-position/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/icon-position/index.ts b/docs/data/material/components/tabs/demos/icon-position/index.ts new file mode 100644 index 00000000000000..a276d57ab3c665 --- /dev/null +++ b/docs/data/material/components/tabs/demos/icon-position/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IconPositionTabs from './IconPositionTabs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IconPositionTabs, { ClientProvider }); diff --git a/docs/data/material/components/tabs/IconTabs.tsx b/docs/data/material/components/tabs/demos/icon/IconTabs.tsx similarity index 93% rename from docs/data/material/components/tabs/IconTabs.tsx rename to docs/data/material/components/tabs/demos/icon/IconTabs.tsx index 3bbc029e8844cf..08541625fffb29 100644 --- a/docs/data/material/components/tabs/IconTabs.tsx +++ b/docs/data/material/components/tabs/demos/icon/IconTabs.tsx @@ -13,10 +13,12 @@ export default function IconTabs() { }; return ( + // @focus-start @padding 2 } aria-label="phone" /> } aria-label="favorite" /> } aria-label="person" /> + // @focus-end ); } diff --git a/docs/data/material/components/tabs/demos/icon/client.ts b/docs/data/material/components/tabs/demos/icon/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/icon/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/icon/index.ts b/docs/data/material/components/tabs/demos/icon/index.ts new file mode 100644 index 00000000000000..59eed2a3e548bc --- /dev/null +++ b/docs/data/material/components/tabs/demos/icon/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import IconTabs from './IconTabs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, IconTabs, { ClientProvider }); diff --git a/docs/data/material/components/tabs/LabTabs.tsx b/docs/data/material/components/tabs/demos/lab/LabTabs.tsx similarity index 95% rename from docs/data/material/components/tabs/LabTabs.tsx rename to docs/data/material/components/tabs/demos/lab/LabTabs.tsx index 2fa54fc967bf2a..81ac212206c8c0 100644 --- a/docs/data/material/components/tabs/LabTabs.tsx +++ b/docs/data/material/components/tabs/demos/lab/LabTabs.tsx @@ -14,6 +14,7 @@ export default function LabTabs() { return ( + {/* @focus-start */} @@ -26,6 +27,7 @@ export default function LabTabs() { Item Two Item Three + {/* @focus-end */} ); } diff --git a/docs/data/material/components/tabs/demos/lab/client.ts b/docs/data/material/components/tabs/demos/lab/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/lab/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/lab/index.ts b/docs/data/material/components/tabs/demos/lab/index.ts new file mode 100644 index 00000000000000..93b558d1585b42 --- /dev/null +++ b/docs/data/material/components/tabs/demos/lab/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LabTabs from './LabTabs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LabTabs, { ClientProvider }); diff --git a/docs/data/material/components/tabs/NavTabs.tsx b/docs/data/material/components/tabs/demos/nav/NavTabs.tsx similarity index 97% rename from docs/data/material/components/tabs/NavTabs.tsx rename to docs/data/material/components/tabs/demos/nav/NavTabs.tsx index 525feabea0698a..3a4ccf87d2e653 100644 --- a/docs/data/material/components/tabs/NavTabs.tsx +++ b/docs/data/material/components/tabs/demos/nav/NavTabs.tsx @@ -59,6 +59,7 @@ export default function NavTabs() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/tabs/demos/nav/client.ts b/docs/data/material/components/tabs/demos/nav/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/nav/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/nav/index.ts b/docs/data/material/components/tabs/demos/nav/index.ts new file mode 100644 index 00000000000000..13df22f98c3fee --- /dev/null +++ b/docs/data/material/components/tabs/demos/nav/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import NavTabs from './NavTabs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, NavTabs, { ClientProvider }); diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx b/docs/data/material/components/tabs/demos/scrollable-button-auto/ScrollableTabsButtonAuto.tsx similarity index 94% rename from docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx rename to docs/data/material/components/tabs/demos/scrollable-button-auto/ScrollableTabsButtonAuto.tsx index 9e2a9b4f5c2c41..2d625d79b6b15b 100644 --- a/docs/data/material/components/tabs/ScrollableTabsButtonAuto.tsx +++ b/docs/data/material/components/tabs/demos/scrollable-button-auto/ScrollableTabsButtonAuto.tsx @@ -12,6 +12,7 @@ export default function ScrollableTabsButtonAuto() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/tabs/demos/scrollable-button-auto/client.ts b/docs/data/material/components/tabs/demos/scrollable-button-auto/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/scrollable-button-auto/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/scrollable-button-auto/index.ts b/docs/data/material/components/tabs/demos/scrollable-button-auto/index.ts new file mode 100644 index 00000000000000..b9458911e3f47d --- /dev/null +++ b/docs/data/material/components/tabs/demos/scrollable-button-auto/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScrollableTabsButtonAuto from './ScrollableTabsButtonAuto'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScrollableTabsButtonAuto, { ClientProvider }); diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx b/docs/data/material/components/tabs/demos/scrollable-button-force/ScrollableTabsButtonForce.tsx similarity index 94% rename from docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx rename to docs/data/material/components/tabs/demos/scrollable-button-force/ScrollableTabsButtonForce.tsx index decae50b7cc48e..a55534882ce14b 100644 --- a/docs/data/material/components/tabs/ScrollableTabsButtonForce.tsx +++ b/docs/data/material/components/tabs/demos/scrollable-button-force/ScrollableTabsButtonForce.tsx @@ -12,6 +12,7 @@ export default function ScrollableTabsButtonForce() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/tabs/demos/scrollable-button-force/client.ts b/docs/data/material/components/tabs/demos/scrollable-button-force/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/scrollable-button-force/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/scrollable-button-force/index.ts b/docs/data/material/components/tabs/demos/scrollable-button-force/index.ts new file mode 100644 index 00000000000000..f06c417cdd0687 --- /dev/null +++ b/docs/data/material/components/tabs/demos/scrollable-button-force/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScrollableTabsButtonForce from './ScrollableTabsButtonForce'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScrollableTabsButtonForce, { ClientProvider }); diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx b/docs/data/material/components/tabs/demos/scrollable-button-prevent/ScrollableTabsButtonPrevent.tsx similarity index 94% rename from docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx rename to docs/data/material/components/tabs/demos/scrollable-button-prevent/ScrollableTabsButtonPrevent.tsx index 5ba0e7242c8e18..da0c41ab3089ce 100644 --- a/docs/data/material/components/tabs/ScrollableTabsButtonPrevent.tsx +++ b/docs/data/material/components/tabs/demos/scrollable-button-prevent/ScrollableTabsButtonPrevent.tsx @@ -12,6 +12,7 @@ export default function ScrollableTabsButtonPrevent() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/tabs/demos/scrollable-button-prevent/client.ts b/docs/data/material/components/tabs/demos/scrollable-button-prevent/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/scrollable-button-prevent/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/scrollable-button-prevent/index.ts b/docs/data/material/components/tabs/demos/scrollable-button-prevent/index.ts new file mode 100644 index 00000000000000..0a46d6f2744011 --- /dev/null +++ b/docs/data/material/components/tabs/demos/scrollable-button-prevent/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScrollableTabsButtonPrevent from './ScrollableTabsButtonPrevent'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScrollableTabsButtonPrevent, { ClientProvider }); diff --git a/docs/data/material/components/tabs/ScrollableTabsButtonVisible.tsx b/docs/data/material/components/tabs/demos/scrollable-button-visible/ScrollableTabsButtonVisible.tsx similarity index 96% rename from docs/data/material/components/tabs/ScrollableTabsButtonVisible.tsx rename to docs/data/material/components/tabs/demos/scrollable-button-visible/ScrollableTabsButtonVisible.tsx index 3c4b8df12a959d..9ce54f71fdbdcd 100644 --- a/docs/data/material/components/tabs/ScrollableTabsButtonVisible.tsx +++ b/docs/data/material/components/tabs/demos/scrollable-button-visible/ScrollableTabsButtonVisible.tsx @@ -4,6 +4,7 @@ import Tabs, { tabsClasses } from '@mui/material/Tabs'; import Tab from '@mui/material/Tab'; export default function ScrollableTabsButtonVisible() { + // @focus-start @padding 1 const [value, setValue] = React.useState(0); const handleChange = (event: React.SyntheticEvent, newValue: number) => { @@ -40,4 +41,5 @@ export default function ScrollableTabsButtonVisible() { ); + // @focus-end } diff --git a/docs/data/material/components/tabs/demos/scrollable-button-visible/client.ts b/docs/data/material/components/tabs/demos/scrollable-button-visible/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/scrollable-button-visible/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/scrollable-button-visible/index.ts b/docs/data/material/components/tabs/demos/scrollable-button-visible/index.ts new file mode 100644 index 00000000000000..9f77d65816502d --- /dev/null +++ b/docs/data/material/components/tabs/demos/scrollable-button-visible/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ScrollableTabsButtonVisible from './ScrollableTabsButtonVisible'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ScrollableTabsButtonVisible, { ClientProvider }); diff --git a/docs/data/material/components/tabs/VerticalTabs.tsx b/docs/data/material/components/tabs/demos/vertical/VerticalTabs.tsx similarity index 98% rename from docs/data/material/components/tabs/VerticalTabs.tsx rename to docs/data/material/components/tabs/demos/vertical/VerticalTabs.tsx index 33d26e5b7233b7..2d00fd1d0feb12 100644 --- a/docs/data/material/components/tabs/VerticalTabs.tsx +++ b/docs/data/material/components/tabs/demos/vertical/VerticalTabs.tsx @@ -38,6 +38,7 @@ function a11yProps(index: number) { } export default function VerticalTabs() { + // @focus-start @padding 1 const [value, setValue] = React.useState(0); const handleChange = (event: React.SyntheticEvent, newValue: number) => { @@ -87,4 +88,5 @@ export default function VerticalTabs() { ); + // @focus-end } diff --git a/docs/data/material/components/tabs/demos/vertical/client.ts b/docs/data/material/components/tabs/demos/vertical/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/vertical/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/vertical/index.ts b/docs/data/material/components/tabs/demos/vertical/index.ts new file mode 100644 index 00000000000000..32c5fe96496ad4 --- /dev/null +++ b/docs/data/material/components/tabs/demos/vertical/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VerticalTabs from './VerticalTabs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VerticalTabs, { ClientProvider }); diff --git a/docs/data/material/components/tabs/TabsWrappedLabel.tsx b/docs/data/material/components/tabs/demos/wrapped-label/TabsWrappedLabel.tsx similarity index 93% rename from docs/data/material/components/tabs/TabsWrappedLabel.tsx rename to docs/data/material/components/tabs/demos/wrapped-label/TabsWrappedLabel.tsx index 8373571d1b57d9..14609c50a29474 100644 --- a/docs/data/material/components/tabs/TabsWrappedLabel.tsx +++ b/docs/data/material/components/tabs/demos/wrapped-label/TabsWrappedLabel.tsx @@ -12,6 +12,7 @@ export default function TabsWrappedLabel() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/tabs/demos/wrapped-label/client.ts b/docs/data/material/components/tabs/demos/wrapped-label/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tabs/demos/wrapped-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tabs/demos/wrapped-label/index.ts b/docs/data/material/components/tabs/demos/wrapped-label/index.ts new file mode 100644 index 00000000000000..0a66982067e8a6 --- /dev/null +++ b/docs/data/material/components/tabs/demos/wrapped-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TabsWrappedLabel from './TabsWrappedLabel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TabsWrappedLabel, { ClientProvider }); diff --git a/docs/data/material/components/tabs/tabs.md b/docs/data/material/components/tabs/tabs.md index 824b2e1d7426ba..f9432d29ff8172 100644 --- a/docs/data/material/components/tabs/tabs.md +++ b/docs/data/material/components/tabs/tabs.md @@ -23,7 +23,7 @@ Tabs are implemented using a collection of related components: - `` - the tab element itself. Clicking on a tab displays its corresponding panel. - `` - the container that houses the tabs. Responsible for handling focus and keyboard navigation between tabs. -{{"demo": "BasicTabs.js"}} +{{"component": "file://./demos/basic/index.ts"}} ## Basics @@ -41,24 +41,24 @@ following [WAI-ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/pattern - `` - the card that hosts the content associated with a tab. - `` - the top-level component that wraps the Tab List and Tab Panel components. -{{"demo": "LabTabs.js"}} +{{"component": "file://./demos/lab/index.ts"}} ## Wrapped labels Long labels will automatically wrap on tabs. If the label is too long for the tab, it will overflow, and the text will not be visible. -{{"demo": "TabsWrappedLabel.js"}} +{{"component": "file://./demos/wrapped-label/index.ts"}} ## Colored tab -{{"demo": "ColorTabs.js"}} +{{"component": "file://./demos/color/index.ts"}} ## Disabled tab A tab can be disabled by setting the `disabled` prop. -{{"demo": "DisabledTabs.js"}} +{{"component": "file://./demos/disabled/index.ts"}} ## Fixed tabs @@ -68,13 +68,13 @@ Fixed tabs should be used with a limited number of tabs, and when a consistent p The `variant="fullWidth"` prop should be used for smaller views. -{{"demo": "FullWidthTabs.js", "bg": true}} +{{"component": "file://./demos/full-width/index.ts", "bg": true}} ### Centered The `centered` prop should be used for larger views. -{{"demo": "CenteredTabs.js", "bg": true}} +{{"component": "file://./demos/centered/index.ts", "bg": true}} ## Scrollable tabs @@ -82,13 +82,13 @@ The `centered` prop should be used for larger views. Use the `variant="scrollable"` and `scrollButtons="auto"` props to display left and right scroll buttons on desktop that are hidden on mobile: -{{"demo": "ScrollableTabsButtonAuto.js", "bg": true}} +{{"component": "file://./demos/scrollable-button-auto/index.ts", "bg": true}} ### Forced scroll buttons Apply `scrollButtons={true}` and the `allowScrollButtonsMobile` prop to display the left and right scroll buttons on all viewports: -{{"demo": "ScrollableTabsButtonForce.js", "bg": true}} +{{"component": "file://./demos/scrollable-button-force/index.ts", "bg": true}} If you want to make sure the buttons are always visible, you should customize the opacity. @@ -98,21 +98,21 @@ If you want to make sure the buttons are always visible, you should customize th } ``` -{{"demo": "ScrollableTabsButtonVisible.js", "bg": true}} +{{"component": "file://./demos/scrollable-button-visible/index.ts", "bg": true}} ### Prevent scroll buttons Left and right scroll buttons are never be presented with `scrollButtons={false}`. All scrolling must be initiated through user agent scrolling mechanisms (for example left/right swipe, shift mouse wheel, etc.) -{{"demo": "ScrollableTabsButtonPrevent.js", "bg": true}} +{{"component": "file://./demos/scrollable-button-prevent/index.ts", "bg": true}} ## Customization Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedTabs.js"}} +{{"component": "file://./demos/customized/index.ts"}} 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/tabs). @@ -120,7 +120,7 @@ You can learn more about this in the [overrides documentation page](/material-ui To make vertical tabs instead of default horizontal ones, there is `orientation="vertical"`: -{{"demo": "VerticalTabs.js", "bg": true}} +{{"component": "file://./demos/vertical/index.ts", "bg": true}} Note that you can restore the scrollbar with `visibleScrollbar`. @@ -128,7 +128,7 @@ Note that you can restore the scrollbar with `visibleScrollbar`. By default, tabs use a `button` element, but you can provide your custom tag or component. Here's an example of implementing tabbed navigation: -{{"demo": "NavTabs.js"}} +{{"component": "file://./demos/nav/index.ts"}} ### Third-party routing library @@ -140,15 +140,15 @@ Here is a [more detailed guide](/material-ui/integrations/routing/#tabs). Tab labels may be either all icons or all text. -{{"demo": "IconTabs.js"}} +{{"component": "file://./demos/icon/index.ts"}} -{{"demo": "IconLabelTabs.js"}} +{{"component": "file://./demos/icon-label/index.ts"}} ## Icon position By default, the icon is positioned at the `top` of a tab. Other supported positions are `start`, `end`, `bottom`. -{{"demo": "IconPositionTabs.js"}} +{{"component": "file://./demos/icon-position/index.ts"}} ## Accessibility @@ -179,11 +179,11 @@ Focus a tab and navigate with arrow keys to notice the difference, for example < ``` -{{"demo": "AccessibleTabs1.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/accessible-tabs1/index.ts", "collapseToEmpty": true}} ```jsx /* Tabs where each tab needs to be selected manually */ ``` -{{"demo": "AccessibleTabs2.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/accessible-tabs2/index.ts", "collapseToEmpty": true}} diff --git a/docs/data/material/components/text-fields/BasicTextFields.js b/docs/data/material/components/text-fields/BasicTextFields.js deleted file mode 100644 index fa90de3b497ae7..00000000000000 --- a/docs/data/material/components/text-fields/BasicTextFields.js +++ /dev/null @@ -1,17 +0,0 @@ -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; - -export default function BasicTextFields() { - return ( - :not(style)': { m: 1, width: '25ch' } }} - noValidate - autoComplete="off" - > - - - - - ); -} diff --git a/docs/data/material/components/text-fields/BasicTextFields.tsx.preview b/docs/data/material/components/text-fields/BasicTextFields.tsx.preview deleted file mode 100644 index 6008d56150727a..00000000000000 --- a/docs/data/material/components/text-fields/BasicTextFields.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/text-fields/ColorTextFields.js b/docs/data/material/components/text-fields/ColorTextFields.js deleted file mode 100644 index 5c78011456a36c..00000000000000 --- a/docs/data/material/components/text-fields/ColorTextFields.js +++ /dev/null @@ -1,22 +0,0 @@ -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; - -export default function ColorTextFields() { - return ( - :not(style)': { m: 1, width: '25ch' } }} - noValidate - autoComplete="off" - > - - - - - ); -} diff --git a/docs/data/material/components/text-fields/ColorTextFields.tsx.preview b/docs/data/material/components/text-fields/ColorTextFields.tsx.preview deleted file mode 100644 index f8bed77d5743c6..00000000000000 --- a/docs/data/material/components/text-fields/ColorTextFields.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/text-fields/ComposedTextField.js b/docs/data/material/components/text-fields/ComposedTextField.js deleted file mode 100644 index aebda7e1aaa5db..00000000000000 --- a/docs/data/material/components/text-fields/ComposedTextField.js +++ /dev/null @@ -1,67 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import FilledInput from '@mui/material/FilledInput'; -import FormControl from '@mui/material/FormControl'; -import FormHelperText from '@mui/material/FormHelperText'; -import Input from '@mui/material/Input'; -import InputLabel from '@mui/material/InputLabel'; -import OutlinedInput from '@mui/material/OutlinedInput'; - -export default function ComposedTextField() { - const simpleId = React.useId(); - const helperId = React.useId(); - const disabledId = React.useId(); - const errorId = React.useId(); - const outlinedId = React.useId(); - const filledId = React.useId(); - return ( - :not(style)': { m: 1 } }} - noValidate - autoComplete="off" - > - - Name - - - - Name - - - Some important helper text - - - - Name - - Disabled - - - Name - - Error - - - Name - - - - Name - - - - ); -} diff --git a/docs/data/material/components/text-fields/CustomizedInputBase.js b/docs/data/material/components/text-fields/CustomizedInputBase.js deleted file mode 100644 index cc6e6ecf18f1d7..00000000000000 --- a/docs/data/material/components/text-fields/CustomizedInputBase.js +++ /dev/null @@ -1,32 +0,0 @@ -import Paper from '@mui/material/Paper'; -import InputBase from '@mui/material/InputBase'; -import Divider from '@mui/material/Divider'; -import IconButton from '@mui/material/IconButton'; -import MenuIcon from '@mui/icons-material/Menu'; -import SearchIcon from '@mui/icons-material/Search'; -import DirectionsIcon from '@mui/icons-material/Directions'; - -export default function CustomizedInputBase() { - return ( - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js deleted file mode 100644 index 2e30ffe8239512..00000000000000 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.js +++ /dev/null @@ -1,86 +0,0 @@ -import TextField from '@mui/material/TextField'; -import { outlinedInputClasses } from '@mui/material/OutlinedInput'; -import Box from '@mui/material/Box'; -import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles'; - -const customTheme = (outerTheme) => - createTheme({ - palette: { - mode: outerTheme.palette.mode, - }, - components: { - MuiTextField: { - styleOverrides: { - root: { - '--TextField-brandBorderColor': '#E0E3E7', - '--TextField-brandBorderHoverColor': '#B2BAC2', - '--TextField-brandBorderFocusedColor': '#6F7E8C', - '& label.Mui-focused': { - color: 'var(--TextField-brandBorderFocusedColor)', - }, - }, - }, - }, - MuiOutlinedInput: { - styleOverrides: { - notchedOutline: { - borderColor: 'var(--TextField-brandBorderColor)', - }, - root: { - [`&:hover .${outlinedInputClasses.notchedOutline}`]: { - borderColor: 'var(--TextField-brandBorderHoverColor)', - }, - [`&.Mui-focused .${outlinedInputClasses.notchedOutline}`]: { - borderColor: 'var(--TextField-brandBorderFocusedColor)', - }, - }, - }, - }, - MuiFilledInput: { - styleOverrides: { - root: { - '&::before, &::after': { - borderBottom: '2px solid var(--TextField-brandBorderColor)', - }, - '&:hover:not(.Mui-disabled, .Mui-error):before': { - borderBottom: '2px solid var(--TextField-brandBorderHoverColor)', - }, - '&.Mui-focused:after': { - borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)', - }, - }, - }, - }, - MuiInput: { - styleOverrides: { - root: { - '&::before': { - borderBottom: '2px solid var(--TextField-brandBorderColor)', - }, - '&:hover:not(.Mui-disabled, .Mui-error):before': { - borderBottom: '2px solid var(--TextField-brandBorderHoverColor)', - }, - '&.Mui-focused:after': { - borderBottom: '2px solid var(--TextField-brandBorderFocusedColor)', - }, - }, - }, - }, - }, - }); - -export default function CustomizedInputsStyleOverrides() { - const outerTheme = useTheme(); - - return ( - - - - - - - - ); -} diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview b/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview deleted file mode 100644 index 0a8fdd9694a9c3..00000000000000 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.js b/docs/data/material/components/text-fields/CustomizedInputsStyled.js deleted file mode 100644 index f28c3712d10245..00000000000000 --- a/docs/data/material/components/text-fields/CustomizedInputsStyled.js +++ /dev/null @@ -1,154 +0,0 @@ -import * as React from 'react'; -import { alpha, styled } from '@mui/material/styles'; -import InputBase from '@mui/material/InputBase'; -import Box from '@mui/material/Box'; -import InputLabel from '@mui/material/InputLabel'; -import TextField from '@mui/material/TextField'; -import FormControl from '@mui/material/FormControl'; - -const CssTextField = styled(TextField)({ - '& label.Mui-focused': { - color: '#A0AAB4', - }, - '& .MuiInput-underline:after': { - borderBottomColor: '#B2BAC2', - }, - '& .MuiOutlinedInput-root': { - '& fieldset': { - borderColor: '#E0E3E7', - }, - '&:hover fieldset': { - borderColor: '#B2BAC2', - }, - '&.Mui-focused fieldset': { - borderColor: '#6F7E8C', - }, - }, -}); - -const BootstrapInput = styled(InputBase)(({ theme }) => ({ - 'label + &': { - marginTop: theme.spacing(3), - }, - '& .MuiInputBase-input': { - borderRadius: 4, - position: 'relative', - backgroundColor: '#F3F6F9', - border: '1px solid', - borderColor: '#E0E3E7', - fontSize: 16, - width: 'auto', - padding: '10px 12px', - transition: theme.transitions.create([ - 'border-color', - 'background-color', - 'box-shadow', - ]), - // Use the system font instead of the default Roboto font. - fontFamily: [ - '-apple-system', - 'BlinkMacSystemFont', - '"Segoe UI"', - 'Roboto', - '"Helvetica Neue"', - 'Arial', - 'sans-serif', - '"Apple Color Emoji"', - '"Segoe UI Emoji"', - '"Segoe UI Symbol"', - ].join(','), - '&:focus': { - boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 0.2rem`, - borderColor: theme.palette.primary.main, - }, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - borderColor: '#2D3843', - }), - }, -})); - -const RedditTextField = styled((props) => ( - -))(({ theme }) => ({ - '& .MuiFilledInput-root': { - overflow: 'hidden', - borderRadius: 4, - border: '1px solid', - backgroundColor: '#F3F6F9', - borderColor: '#E0E3E7', - transition: theme.transitions.create([ - 'border-color', - 'background-color', - 'box-shadow', - ]), - '&:hover': { - backgroundColor: 'transparent', - }, - '&.Mui-focused': { - backgroundColor: 'transparent', - boxShadow: `${alpha(theme.palette.primary.main, 0.25)} 0 0 0 2px`, - borderColor: theme.palette.primary.main, - }, - ...theme.applyStyles('dark', { - backgroundColor: '#1A2027', - borderColor: '#2D3843', - }), - }, -})); - -const ValidationTextField = styled(TextField)({ - '& input:valid + fieldset': { - borderColor: '#E0E3E7', - borderWidth: 1, - }, - '& input:invalid + fieldset': { - borderColor: 'red', - borderWidth: 1, - }, - '& input:valid:focus + fieldset': { - borderLeftWidth: 4, - padding: '4px !important', // override inline-style - }, -}); - -export default function CustomizedInputsStyled() { - const bootstrapId = React.useId(); - const redditId = React.useId(); - const cssId = React.useId(); - const validationId = React.useId(); - return ( - - - - Bootstrap - - - - - - - - ); -} diff --git a/docs/data/material/components/text-fields/FormPropsTextFields.js b/docs/data/material/components/text-fields/FormPropsTextFields.js deleted file mode 100644 index 40dd800194e399..00000000000000 --- a/docs/data/material/components/text-fields/FormPropsTextFields.js +++ /dev/null @@ -1,145 +0,0 @@ -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; - -export default function FormPropsTextFields() { - return ( - -
    - - - - - - -
    -
    - - - - - - -
    -
    - - - - - - -
    -     - ); -} diff --git a/docs/data/material/components/text-fields/FormattedInputs.js b/docs/data/material/components/text-fields/FormattedInputs.js deleted file mode 100644 index 10303fbb6905e9..00000000000000 --- a/docs/data/material/components/text-fields/FormattedInputs.js +++ /dev/null @@ -1,70 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { IMaskInput } from 'react-imask'; -import { NumericFormat } from 'react-number-format'; -import Stack from '@mui/material/Stack'; -import Input from '@mui/material/Input'; -import InputLabel from '@mui/material/InputLabel'; -import TextField from '@mui/material/TextField'; -import FormControl from '@mui/material/FormControl'; - -const TextMaskCustom = React.forwardRef(function TextMaskCustom(props, ref) { - const { onChange, ...other } = props; - return ( - onChange({ target: { name: props.name, value } })} - overwrite - /> - ); -}); - -TextMaskCustom.propTypes = { - name: PropTypes.string.isRequired, - onChange: PropTypes.func.isRequired, -}; - -export default function FormattedInputs() { - const id = React.useId(); - const [values, setValues] = React.useState({ - textmask: '(100) 000-0000', - numberformat: '1320', - }); - - const handleChange = (event) => { - setValues({ - ...values, - [event.target.name]: event.target.value, - }); - }; - - return ( - - - react-imask - - - - - ); -} diff --git a/docs/data/material/components/text-fields/FullWidthTextField.js b/docs/data/material/components/text-fields/FullWidthTextField.js deleted file mode 100644 index 6641106537e87e..00000000000000 --- a/docs/data/material/components/text-fields/FullWidthTextField.js +++ /dev/null @@ -1,10 +0,0 @@ -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; - -export default function FullWidthTextField() { - return ( - - - - ); -} diff --git a/docs/data/material/components/text-fields/FullWidthTextField.tsx.preview b/docs/data/material/components/text-fields/FullWidthTextField.tsx.preview deleted file mode 100644 index 158d3febed5c4a..00000000000000 --- a/docs/data/material/components/text-fields/FullWidthTextField.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/text-fields/HelperTextAligned.js b/docs/data/material/components/text-fields/HelperTextAligned.js deleted file mode 100644 index d09fb55b463503..00000000000000 --- a/docs/data/material/components/text-fields/HelperTextAligned.js +++ /dev/null @@ -1,19 +0,0 @@ -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; - -export default function HelperTextAligned() { - return ( - :not(style)': { m: 1 } }}> - - - - ); -} diff --git a/docs/data/material/components/text-fields/HelperTextAligned.tsx.preview b/docs/data/material/components/text-fields/HelperTextAligned.tsx.preview deleted file mode 100644 index d2fbae44cb013c..00000000000000 --- a/docs/data/material/components/text-fields/HelperTextAligned.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/text-fields/HelperTextMisaligned.js b/docs/data/material/components/text-fields/HelperTextMisaligned.js deleted file mode 100644 index bda9b80ed1cd6c..00000000000000 --- a/docs/data/material/components/text-fields/HelperTextMisaligned.js +++ /dev/null @@ -1,15 +0,0 @@ -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; - -export default function HelperTextMisaligned() { - return ( - :not(style)': { m: 1 } }}> - - - - ); -} diff --git a/docs/data/material/components/text-fields/HelperTextMisaligned.tsx.preview b/docs/data/material/components/text-fields/HelperTextMisaligned.tsx.preview deleted file mode 100644 index bc3d39de5dc74c..00000000000000 --- a/docs/data/material/components/text-fields/HelperTextMisaligned.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/text-fields/InputAdornments.js b/docs/data/material/components/text-fields/InputAdornments.js deleted file mode 100644 index 4e15a4da27cc39..00000000000000 --- a/docs/data/material/components/text-fields/InputAdornments.js +++ /dev/null @@ -1,306 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import IconButton from '@mui/material/IconButton'; -import Input from '@mui/material/Input'; -import FilledInput from '@mui/material/FilledInput'; -import OutlinedInput from '@mui/material/OutlinedInput'; -import InputLabel from '@mui/material/InputLabel'; -import InputAdornment from '@mui/material/InputAdornment'; -import FormHelperText from '@mui/material/FormHelperText'; -import FormControl from '@mui/material/FormControl'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; -import Visibility from '@mui/icons-material/Visibility'; -import VisibilityOff from '@mui/icons-material/VisibilityOff'; -import InfoOutlined from '@mui/icons-material/InfoOutlined'; - -export default function InputAdornments() { - const outlinedStartId = React.useId(); - const outlinedWeightId = React.useId(); - const outlinedPasswordId = React.useId(); - const outlinedAmountId = React.useId(); - const filledStartId = React.useId(); - const filledWeightId = React.useId(); - const filledPasswordId = React.useId(); - const filledAmountId = React.useId(); - const standardStartId = React.useId(); - const standardWeightId = React.useId(); - const standardPasswordId = React.useId(); - const standardAmountId = React.useId(); - const [showPassword, setShowPassword] = React.useState(false); - - const handleClickShowPassword = () => setShowPassword((show) => !show); - - const handleMouseDownPassword = (event) => { - event.preventDefault(); - }; - - const handleMouseUpPassword = (event) => { - event.preventDefault(); - }; - - // An endAdornment coexists with the Select's chevron without overlapping it. - const infoEndAdornment = ( - - - - ); - - const infoStartAdornment = ( - - - - ); - - return ( - -
    - kg, - }, - }} - /> - - kg} - aria-describedby={`${outlinedWeightId}-helper-text`} - inputProps={{ - 'aria-label': 'weight', - }} - /> - - Weight - - - - Password - - - {showPassword ? : } - - - } - label="Password" - /> - -
    - - Amount - $} - label="Amount" - /> - - - Ten - Twenty - Thirty - - - - - - -
    -
    -
    - kg, - }, - }} - variant="filled" - /> - - kg} - aria-describedby={`${filledWeightId}-helper-text`} - inputProps={{ - 'aria-label': 'weight', - }} - /> - - Weight - - - - Password - - - {showPassword ? : } - - - } - /> - -
    - - Amount - $} - /> - - - Ten - Twenty - Thirty - - - - - - -
    -
    -
    - kg, - }, - }} - variant="standard" - /> - - kg} - aria-describedby={`${standardWeightId}-helper-text`} - inputProps={{ - 'aria-label': 'weight', - }} - /> - - Weight - - - - Password - - - {showPassword ? : } - - - } - /> - -
    - - Amount - $} - /> - - - Ten - Twenty - Thirty - - - - - - -
    -
    -     - ); -} diff --git a/docs/data/material/components/text-fields/InputSuffixShrink.js b/docs/data/material/components/text-fields/InputSuffixShrink.js deleted file mode 100644 index d65a35395ecc11..00000000000000 --- a/docs/data/material/components/text-fields/InputSuffixShrink.js +++ /dev/null @@ -1,96 +0,0 @@ -import Box from '@mui/material/Box'; -import { filledInputClasses } from '@mui/material/FilledInput'; -import { inputBaseClasses } from '@mui/material/InputBase'; -import TextField from '@mui/material/TextField'; -import InputAdornment from '@mui/material/InputAdornment'; - -export default function InputSuffixShrink() { - return ( - :not(style)': { m: 1, width: '25ch' } }} - noValidate - autoComplete="off" - > - &`]: { - opacity: 1, - }, - }} - > - lbs - - ), - }, - }} - /> - &`]: { - opacity: 1, - }, - }} - > - days - - ), - }, - }} - /> - &`]: { - opacity: 1, - }, - }} - > - @gmail.com - - ), - }, - }} - /> - - ); -} diff --git a/docs/data/material/components/text-fields/InputWithIcon.js b/docs/data/material/components/text-fields/InputWithIcon.js deleted file mode 100644 index 7e51551b6cc057..00000000000000 --- a/docs/data/material/components/text-fields/InputWithIcon.js +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Input from '@mui/material/Input'; -import InputLabel from '@mui/material/InputLabel'; -import InputAdornment from '@mui/material/InputAdornment'; -import FormControl from '@mui/material/FormControl'; -import TextField from '@mui/material/TextField'; -import AccountCircle from '@mui/icons-material/AccountCircle'; - -export default function InputWithIcon() { - const adornmentId = React.useId(); - const textFieldId = React.useId(); - const sxId = React.useId(); - return ( - :not(style)': { m: 1 } }}> - - - With a start adornment - - - - - } - /> - - - - - ), - }, - }} - variant="standard" - /> - - - - - - ); -} diff --git a/docs/data/material/components/text-fields/Inputs.js b/docs/data/material/components/text-fields/Inputs.js deleted file mode 100644 index 80ee5f8aaf6f3f..00000000000000 --- a/docs/data/material/components/text-fields/Inputs.js +++ /dev/null @@ -1,20 +0,0 @@ -import Box from '@mui/material/Box'; -import Input from '@mui/material/Input'; - -const ariaLabel = { 'aria-label': 'description' }; - -export default function Inputs() { - return ( - :not(style)': { m: 1 } }} - noValidate - autoComplete="off" - > - - - - - - ); -} diff --git a/docs/data/material/components/text-fields/Inputs.tsx.preview b/docs/data/material/components/text-fields/Inputs.tsx.preview deleted file mode 100644 index 58bb4920bbdcd1..00000000000000 --- a/docs/data/material/components/text-fields/Inputs.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/data/material/components/text-fields/LayoutTextFields.js b/docs/data/material/components/text-fields/LayoutTextFields.js deleted file mode 100644 index 7faa68bb843efc..00000000000000 --- a/docs/data/material/components/text-fields/LayoutTextFields.js +++ /dev/null @@ -1,36 +0,0 @@ -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; - -function RedBar() { - return ( - ({ - height: 20, - backgroundColor: 'rgba(255, 0, 0, 0.1)', - ...theme.applyStyles('dark', { - backgroundColor: 'rgb(255 132 132 / 25%)', - }), - })} - /> - ); -} - -export default function LayoutTextFields() { - return ( - - - - - - - - - - ); -} diff --git a/docs/data/material/components/text-fields/LayoutTextFields.tsx.preview b/docs/data/material/components/text-fields/LayoutTextFields.tsx.preview deleted file mode 100644 index fde53365366ebb..00000000000000 --- a/docs/data/material/components/text-fields/LayoutTextFields.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/text-fields/MultilineTextFields.js b/docs/data/material/components/text-fields/MultilineTextFields.js deleted file mode 100644 index 72e7c3cb344e49..00000000000000 --- a/docs/data/material/components/text-fields/MultilineTextFields.js +++ /dev/null @@ -1,83 +0,0 @@ -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; - -export default function MultilineTextFields() { - return ( - -
    - - - -
    -
    - - - -
    -
    - - - -
    -     - ); -} diff --git a/docs/data/material/components/text-fields/SelectTextFields.js b/docs/data/material/components/text-fields/SelectTextFields.js deleted file mode 100644 index d7d902f93f5a8e..00000000000000 --- a/docs/data/material/components/text-fields/SelectTextFields.js +++ /dev/null @@ -1,137 +0,0 @@ -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; -import MenuItem from '@mui/material/MenuItem'; - -const currencies = [ - { - value: 'USD', - label: '$', - }, - { - value: 'EUR', - label: '€', - }, - { - value: 'BTC', - label: '฿', - }, - { - value: 'JPY', - label: '¥', - }, -]; - -export default function SelectTextFields() { - return ( - -
    - - {currencies.map((option) => ( - - {option.label} - - ))} - - - {currencies.map((option) => ( - - ))} - -
    -
    - - {currencies.map((option) => ( - - {option.label} - - ))} - - - {currencies.map((option) => ( - - ))} - -
    -
    - - {currencies.map((option) => ( - - {option.label} - - ))} - - - {currencies.map((option) => ( - - ))} - -
    -     - ); -} diff --git a/docs/data/material/components/text-fields/StateTextFields.js b/docs/data/material/components/text-fields/StateTextFields.js deleted file mode 100644 index 07e26402bd1f08..00000000000000 --- a/docs/data/material/components/text-fields/StateTextFields.js +++ /dev/null @@ -1,30 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; - -export default function StateTextFields() { - const [name, setName] = React.useState('Cat in the Hat'); - - return ( - :not(style)': { m: 1, width: '25ch' } }} - noValidate - autoComplete="off" - > - { - setName(event.target.value); - }} - /> - - - ); -} diff --git a/docs/data/material/components/text-fields/StateTextFields.tsx.preview b/docs/data/material/components/text-fields/StateTextFields.tsx.preview deleted file mode 100644 index a62dac2cb6988f..00000000000000 --- a/docs/data/material/components/text-fields/StateTextFields.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ -) => { - setName(event.target.value); - }} -/> - \ No newline at end of file diff --git a/docs/data/material/components/text-fields/TextFieldHiddenLabel.js b/docs/data/material/components/text-fields/TextFieldHiddenLabel.js deleted file mode 100644 index 7b00cc84717016..00000000000000 --- a/docs/data/material/components/text-fields/TextFieldHiddenLabel.js +++ /dev/null @@ -1,28 +0,0 @@ -import Stack from '@mui/material/Stack'; -import TextField from '@mui/material/TextField'; - -export default function TextFieldHiddenLabel() { - return ( - - - - - ); -} diff --git a/docs/data/material/components/text-fields/TextFieldHiddenLabel.tsx.preview b/docs/data/material/components/text-fields/TextFieldHiddenLabel.tsx.preview deleted file mode 100644 index 037a57484707d2..00000000000000 --- a/docs/data/material/components/text-fields/TextFieldHiddenLabel.tsx.preview +++ /dev/null @@ -1,13 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/components/text-fields/TextFieldSizes.js b/docs/data/material/components/text-fields/TextFieldSizes.js deleted file mode 100644 index d9f7beec2c8324..00000000000000 --- a/docs/data/material/components/text-fields/TextFieldSizes.js +++ /dev/null @@ -1,53 +0,0 @@ -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; - -export default function TextFieldSizes() { - return ( - -
    - - -
    -
    - - -
    -
    - - -
    -     - ); -} diff --git a/docs/data/material/components/text-fields/UseFormControl.js b/docs/data/material/components/text-fields/UseFormControl.js deleted file mode 100644 index 5e7535cc2ee439..00000000000000 --- a/docs/data/material/components/text-fields/UseFormControl.js +++ /dev/null @@ -1,29 +0,0 @@ -import * as React from 'react'; -import FormControl, { useFormControl } from '@mui/material/FormControl'; -import OutlinedInput from '@mui/material/OutlinedInput'; -import FormHelperText from '@mui/material/FormHelperText'; - -function MyFormHelperText() { - const { focused } = useFormControl() || {}; - - const helperText = React.useMemo(() => { - if (focused) { - return 'This field is being focused'; - } - - return 'Helper text'; - }, [focused]); - - return {helperText}; -} - -export default function UseFormControl() { - return ( -
    - - - - -
    - ); -} diff --git a/docs/data/material/components/text-fields/UseFormControl.tsx.preview b/docs/data/material/components/text-fields/UseFormControl.tsx.preview deleted file mode 100644 index b252c35ab46c5c..00000000000000 --- a/docs/data/material/components/text-fields/UseFormControl.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ -
    - - - - -
    \ No newline at end of file diff --git a/docs/data/material/components/text-fields/ValidationTextFields.js b/docs/data/material/components/text-fields/ValidationTextFields.js deleted file mode 100644 index c9355c4ec49031..00000000000000 --- a/docs/data/material/components/text-fields/ValidationTextFields.js +++ /dev/null @@ -1,63 +0,0 @@ -import Box from '@mui/material/Box'; -import TextField from '@mui/material/TextField'; - -export default function ValidationTextFields() { - return ( - -
    - - -
    -
    - - -
    -
    - - -
    -     - ); -} diff --git a/docs/data/material/components/text-fields/BasicTextFields.tsx b/docs/data/material/components/text-fields/demos/basic/BasicTextFields.tsx similarity index 90% rename from docs/data/material/components/text-fields/BasicTextFields.tsx rename to docs/data/material/components/text-fields/demos/basic/BasicTextFields.tsx index fa90de3b497ae7..620e543ce3992c 100644 --- a/docs/data/material/components/text-fields/BasicTextFields.tsx +++ b/docs/data/material/components/text-fields/demos/basic/BasicTextFields.tsx @@ -9,9 +9,11 @@ export default function BasicTextFields() { noValidate autoComplete="off" > + {/* @focus-start */} + {/* @focus-end */}     ); } diff --git a/docs/data/material/components/text-fields/demos/basic/client.ts b/docs/data/material/components/text-fields/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/basic/index.ts b/docs/data/material/components/text-fields/demos/basic/index.ts new file mode 100644 index 00000000000000..cf614c63a72cbd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicTextFields from './BasicTextFields'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicTextFields, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/ColorTextFields.tsx b/docs/data/material/components/text-fields/demos/color/ColorTextFields.tsx similarity index 91% rename from docs/data/material/components/text-fields/ColorTextFields.tsx rename to docs/data/material/components/text-fields/demos/color/ColorTextFields.tsx index 5c78011456a36c..b07787bf748ff6 100644 --- a/docs/data/material/components/text-fields/ColorTextFields.tsx +++ b/docs/data/material/components/text-fields/demos/color/ColorTextFields.tsx @@ -9,6 +9,7 @@ export default function ColorTextFields() { noValidate autoComplete="off" > + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/color/client.ts b/docs/data/material/components/text-fields/demos/color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/color/index.ts b/docs/data/material/components/text-fields/demos/color/index.ts new file mode 100644 index 00000000000000..c41d6b055ad7c5 --- /dev/null +++ b/docs/data/material/components/text-fields/demos/color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorTextFields from './ColorTextFields'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorTextFields, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/ComposedTextField.tsx b/docs/data/material/components/text-fields/demos/composed/ComposedTextField.tsx similarity index 98% rename from docs/data/material/components/text-fields/ComposedTextField.tsx rename to docs/data/material/components/text-fields/demos/composed/ComposedTextField.tsx index aebda7e1aaa5db..ae1a1775d5e9b5 100644 --- a/docs/data/material/components/text-fields/ComposedTextField.tsx +++ b/docs/data/material/components/text-fields/demos/composed/ComposedTextField.tsx @@ -8,6 +8,7 @@ import InputLabel from '@mui/material/InputLabel'; import OutlinedInput from '@mui/material/OutlinedInput'; export default function ComposedTextField() { + // @focus-start @padding 1 const simpleId = React.useId(); const helperId = React.useId(); const disabledId = React.useId(); @@ -64,4 +65,5 @@ export default function ComposedTextField() { ); + // @focus-end } diff --git a/docs/data/material/components/text-fields/demos/composed/client.ts b/docs/data/material/components/text-fields/demos/composed/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/composed/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/composed/index.ts b/docs/data/material/components/text-fields/demos/composed/index.ts new file mode 100644 index 00000000000000..443c128804c440 --- /dev/null +++ b/docs/data/material/components/text-fields/demos/composed/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ComposedTextField from './ComposedTextField'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ComposedTextField, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/CustomizedInputBase.tsx b/docs/data/material/components/text-fields/demos/customized-input-base/CustomizedInputBase.tsx similarity index 95% rename from docs/data/material/components/text-fields/CustomizedInputBase.tsx rename to docs/data/material/components/text-fields/demos/customized-input-base/CustomizedInputBase.tsx index cc6e6ecf18f1d7..fa5b1082a6e9f5 100644 --- a/docs/data/material/components/text-fields/CustomizedInputBase.tsx +++ b/docs/data/material/components/text-fields/demos/customized-input-base/CustomizedInputBase.tsx @@ -8,6 +8,7 @@ import DirectionsIcon from '@mui/icons-material/Directions'; export default function CustomizedInputBase() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/text-fields/demos/customized-input-base/client.ts b/docs/data/material/components/text-fields/demos/customized-input-base/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/customized-input-base/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/customized-input-base/index.ts b/docs/data/material/components/text-fields/demos/customized-input-base/index.ts new file mode 100644 index 00000000000000..97299e0d019973 --- /dev/null +++ b/docs/data/material/components/text-fields/demos/customized-input-base/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedInputBase from './CustomizedInputBase'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedInputBase, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx b/docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/CustomizedInputsStyleOverrides.tsx similarity index 93% rename from docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx rename to docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/CustomizedInputsStyleOverrides.tsx index 9a203155dae19d..902f4b6e29aed0 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyleOverrides.tsx +++ b/docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/CustomizedInputsStyleOverrides.tsx @@ -1,7 +1,8 @@ import TextField from '@mui/material/TextField'; import { outlinedInputClasses } from '@mui/material/OutlinedInput'; import Box from '@mui/material/Box'; -import { createTheme, ThemeProvider, Theme, useTheme } from '@mui/material/styles'; +import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles'; +import type { Theme } from '@mui/material/styles'; const customTheme = (outerTheme: Theme) => createTheme({ @@ -76,11 +77,13 @@ export default function CustomizedInputsStyleOverrides() { + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/client.ts b/docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/index.ts b/docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/index.ts new file mode 100644 index 00000000000000..9b07bef2a72b89 --- /dev/null +++ b/docs/data/material/components/text-fields/demos/customized-inputs-style-overrides/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedInputsStyleOverrides from './CustomizedInputsStyleOverrides'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedInputsStyleOverrides, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx b/docs/data/material/components/text-fields/demos/customized-inputs-styled/CustomizedInputsStyled.tsx similarity index 94% rename from docs/data/material/components/text-fields/CustomizedInputsStyled.tsx rename to docs/data/material/components/text-fields/demos/customized-inputs-styled/CustomizedInputsStyled.tsx index 2975d2e5732163..1ca449aabb2e4f 100644 --- a/docs/data/material/components/text-fields/CustomizedInputsStyled.tsx +++ b/docs/data/material/components/text-fields/demos/customized-inputs-styled/CustomizedInputsStyled.tsx @@ -3,9 +3,10 @@ import { alpha, styled } from '@mui/material/styles'; import InputBase from '@mui/material/InputBase'; import Box from '@mui/material/Box'; import InputLabel from '@mui/material/InputLabel'; -import TextField, { TextFieldProps } from '@mui/material/TextField'; +import TextField from '@mui/material/TextField'; +import type { TextFieldProps } from '@mui/material/TextField'; import FormControl from '@mui/material/FormControl'; -import { OutlinedInputProps } from '@mui/material/OutlinedInput'; +import type { OutlinedInputProps } from '@mui/material/OutlinedInput'; const CssTextField = styled(TextField)({ '& label.Mui-focused': { @@ -119,6 +120,7 @@ const ValidationTextField = styled(TextField)({ }); export default function CustomizedInputsStyled() { + // @focus-start @padding 1 const bootstrapId = React.useId(); const redditId = React.useId(); const cssId = React.useId(); @@ -152,4 +154,5 @@ export default function CustomizedInputsStyled() { /> ); + // @focus-end } diff --git a/docs/data/material/components/text-fields/demos/customized-inputs-styled/client.ts b/docs/data/material/components/text-fields/demos/customized-inputs-styled/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/customized-inputs-styled/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/customized-inputs-styled/index.ts b/docs/data/material/components/text-fields/demos/customized-inputs-styled/index.ts new file mode 100644 index 00000000000000..fa058b13ed9713 --- /dev/null +++ b/docs/data/material/components/text-fields/demos/customized-inputs-styled/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedInputsStyled from './CustomizedInputsStyled'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedInputsStyled, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/FormPropsTextFields.tsx b/docs/data/material/components/text-fields/demos/form-props/FormPropsTextFields.tsx similarity index 98% rename from docs/data/material/components/text-fields/FormPropsTextFields.tsx rename to docs/data/material/components/text-fields/demos/form-props/FormPropsTextFields.tsx index 40dd800194e399..bbb22c4178ac15 100644 --- a/docs/data/material/components/text-fields/FormPropsTextFields.tsx +++ b/docs/data/material/components/text-fields/demos/form-props/FormPropsTextFields.tsx @@ -9,6 +9,7 @@ export default function FormPropsTextFields() { noValidate autoComplete="off" > + {/* @focus-start */}
    + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/form-props/client.ts b/docs/data/material/components/text-fields/demos/form-props/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/form-props/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/form-props/index.ts b/docs/data/material/components/text-fields/demos/form-props/index.ts new file mode 100644 index 00000000000000..b785d1b9674d8f --- /dev/null +++ b/docs/data/material/components/text-fields/demos/form-props/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FormPropsTextFields from './FormPropsTextFields'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FormPropsTextFields, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/FormattedInputs.tsx b/docs/data/material/components/text-fields/demos/formatted-inputs/FormattedInputs.tsx similarity index 97% rename from docs/data/material/components/text-fields/FormattedInputs.tsx rename to docs/data/material/components/text-fields/demos/formatted-inputs/FormattedInputs.tsx index e57b0141244f52..5cff129d89b23c 100644 --- a/docs/data/material/components/text-fields/FormattedInputs.tsx +++ b/docs/data/material/components/text-fields/demos/formatted-inputs/FormattedInputs.tsx @@ -31,6 +31,7 @@ const TextMaskCustom = React.forwardRef( ); export default function FormattedInputs() { + // @focus-start @padding 1 const id = React.useId(); const [values, setValues] = React.useState({ textmask: '(100) 000-0000', @@ -68,4 +69,5 @@ export default function FormattedInputs() { /> ); + // @focus-end } diff --git a/docs/data/material/components/text-fields/demos/formatted-inputs/client.ts b/docs/data/material/components/text-fields/demos/formatted-inputs/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/formatted-inputs/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/formatted-inputs/index.ts b/docs/data/material/components/text-fields/demos/formatted-inputs/index.ts new file mode 100644 index 00000000000000..b9136cb80fdeaf --- /dev/null +++ b/docs/data/material/components/text-fields/demos/formatted-inputs/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FormattedInputs from './FormattedInputs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FormattedInputs, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/FullWidthTextField.tsx b/docs/data/material/components/text-fields/demos/full-width/FullWidthTextField.tsx similarity index 84% rename from docs/data/material/components/text-fields/FullWidthTextField.tsx rename to docs/data/material/components/text-fields/demos/full-width/FullWidthTextField.tsx index 6641106537e87e..a6fa8feea59a47 100644 --- a/docs/data/material/components/text-fields/FullWidthTextField.tsx +++ b/docs/data/material/components/text-fields/demos/full-width/FullWidthTextField.tsx @@ -4,7 +4,9 @@ import TextField from '@mui/material/TextField'; export default function FullWidthTextField() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/full-width/client.ts b/docs/data/material/components/text-fields/demos/full-width/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/full-width/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/full-width/index.ts b/docs/data/material/components/text-fields/demos/full-width/index.ts new file mode 100644 index 00000000000000..47e20807a03ad7 --- /dev/null +++ b/docs/data/material/components/text-fields/demos/full-width/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FullWidthTextField from './FullWidthTextField'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FullWidthTextField, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/HelperTextAligned.tsx b/docs/data/material/components/text-fields/demos/helper-text-aligned/HelperTextAligned.tsx similarity index 90% rename from docs/data/material/components/text-fields/HelperTextAligned.tsx rename to docs/data/material/components/text-fields/demos/helper-text-aligned/HelperTextAligned.tsx index d09fb55b463503..995c7ad8011046 100644 --- a/docs/data/material/components/text-fields/HelperTextAligned.tsx +++ b/docs/data/material/components/text-fields/demos/helper-text-aligned/HelperTextAligned.tsx @@ -4,6 +4,7 @@ import TextField from '@mui/material/TextField'; export default function HelperTextAligned() { return ( :not(style)': { m: 1 } }}> + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/helper-text-aligned/client.ts b/docs/data/material/components/text-fields/demos/helper-text-aligned/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/helper-text-aligned/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/helper-text-aligned/index.ts b/docs/data/material/components/text-fields/demos/helper-text-aligned/index.ts new file mode 100644 index 00000000000000..884c0d705618fe --- /dev/null +++ b/docs/data/material/components/text-fields/demos/helper-text-aligned/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HelperTextAligned from './HelperTextAligned'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HelperTextAligned, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/HelperTextMisaligned.tsx b/docs/data/material/components/text-fields/demos/helper-text-misaligned/HelperTextMisaligned.tsx similarity index 89% rename from docs/data/material/components/text-fields/HelperTextMisaligned.tsx rename to docs/data/material/components/text-fields/demos/helper-text-misaligned/HelperTextMisaligned.tsx index bda9b80ed1cd6c..6586a0d6b138ac 100644 --- a/docs/data/material/components/text-fields/HelperTextMisaligned.tsx +++ b/docs/data/material/components/text-fields/demos/helper-text-misaligned/HelperTextMisaligned.tsx @@ -4,12 +4,14 @@ import TextField from '@mui/material/TextField'; export default function HelperTextMisaligned() { return ( :not(style)': { m: 1 } }}> + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/helper-text-misaligned/client.ts b/docs/data/material/components/text-fields/demos/helper-text-misaligned/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/helper-text-misaligned/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/helper-text-misaligned/index.ts b/docs/data/material/components/text-fields/demos/helper-text-misaligned/index.ts new file mode 100644 index 00000000000000..a9d52e49043e8c --- /dev/null +++ b/docs/data/material/components/text-fields/demos/helper-text-misaligned/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HelperTextMisaligned from './HelperTextMisaligned'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HelperTextMisaligned, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/TextFieldHiddenLabel.tsx b/docs/data/material/components/text-fields/demos/hidden-label/TextFieldHiddenLabel.tsx similarity index 92% rename from docs/data/material/components/text-fields/TextFieldHiddenLabel.tsx rename to docs/data/material/components/text-fields/demos/hidden-label/TextFieldHiddenLabel.tsx index 7b00cc84717016..644815511cd487 100644 --- a/docs/data/material/components/text-fields/TextFieldHiddenLabel.tsx +++ b/docs/data/material/components/text-fields/demos/hidden-label/TextFieldHiddenLabel.tsx @@ -10,6 +10,7 @@ export default function TextFieldHiddenLabel() { noValidate autoComplete="off" > + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/hidden-label/client.ts b/docs/data/material/components/text-fields/demos/hidden-label/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/hidden-label/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/hidden-label/index.ts b/docs/data/material/components/text-fields/demos/hidden-label/index.ts new file mode 100644 index 00000000000000..fde35288259609 --- /dev/null +++ b/docs/data/material/components/text-fields/demos/hidden-label/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TextFieldHiddenLabel from './TextFieldHiddenLabel'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TextFieldHiddenLabel, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/InputAdornments.tsx b/docs/data/material/components/text-fields/demos/input-adornments/InputAdornments.tsx similarity index 99% rename from docs/data/material/components/text-fields/InputAdornments.tsx rename to docs/data/material/components/text-fields/demos/input-adornments/InputAdornments.tsx index af61ee8a6266ba..85416816cdb286 100644 --- a/docs/data/material/components/text-fields/InputAdornments.tsx +++ b/docs/data/material/components/text-fields/demos/input-adornments/InputAdornments.tsx @@ -15,6 +15,7 @@ import VisibilityOff from '@mui/icons-material/VisibilityOff'; import InfoOutlined from '@mui/icons-material/InfoOutlined'; export default function InputAdornments() { + // @focus-start @padding 1 const outlinedStartId = React.useId(); const outlinedWeightId = React.useId(); const outlinedPasswordId = React.useId(); @@ -302,4 +303,5 @@ export default function InputAdornments() { ); + // @focus-end } diff --git a/docs/data/material/components/text-fields/demos/input-adornments/client.ts b/docs/data/material/components/text-fields/demos/input-adornments/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/input-adornments/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/input-adornments/index.ts b/docs/data/material/components/text-fields/demos/input-adornments/index.ts new file mode 100644 index 00000000000000..17cedcca2764be --- /dev/null +++ b/docs/data/material/components/text-fields/demos/input-adornments/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import InputAdornments from './InputAdornments'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, InputAdornments, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/InputSuffixShrink.tsx b/docs/data/material/components/text-fields/demos/input-suffix-shrink/InputSuffixShrink.tsx similarity index 98% rename from docs/data/material/components/text-fields/InputSuffixShrink.tsx rename to docs/data/material/components/text-fields/demos/input-suffix-shrink/InputSuffixShrink.tsx index d65a35395ecc11..db9a0b0dfbb569 100644 --- a/docs/data/material/components/text-fields/InputSuffixShrink.tsx +++ b/docs/data/material/components/text-fields/demos/input-suffix-shrink/InputSuffixShrink.tsx @@ -12,6 +12,7 @@ export default function InputSuffixShrink() { noValidate autoComplete="off" > + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/input-suffix-shrink/client.ts b/docs/data/material/components/text-fields/demos/input-suffix-shrink/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/input-suffix-shrink/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/input-suffix-shrink/index.ts b/docs/data/material/components/text-fields/demos/input-suffix-shrink/index.ts new file mode 100644 index 00000000000000..d09602dc65832d --- /dev/null +++ b/docs/data/material/components/text-fields/demos/input-suffix-shrink/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import InputSuffixShrink from './InputSuffixShrink'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, InputSuffixShrink, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/InputWithIcon.tsx b/docs/data/material/components/text-fields/demos/input-with-icon/InputWithIcon.tsx similarity index 97% rename from docs/data/material/components/text-fields/InputWithIcon.tsx rename to docs/data/material/components/text-fields/demos/input-with-icon/InputWithIcon.tsx index 7e51551b6cc057..9749cb2ff8e2e1 100644 --- a/docs/data/material/components/text-fields/InputWithIcon.tsx +++ b/docs/data/material/components/text-fields/demos/input-with-icon/InputWithIcon.tsx @@ -8,6 +8,7 @@ import TextField from '@mui/material/TextField'; import AccountCircle from '@mui/icons-material/AccountCircle'; export default function InputWithIcon() { + // @focus-start @padding 1 const adornmentId = React.useId(); const textFieldId = React.useId(); const sxId = React.useId(); @@ -46,4 +47,5 @@ export default function InputWithIcon() { ); + // @focus-end } diff --git a/docs/data/material/components/text-fields/demos/input-with-icon/client.ts b/docs/data/material/components/text-fields/demos/input-with-icon/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/input-with-icon/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/input-with-icon/index.ts b/docs/data/material/components/text-fields/demos/input-with-icon/index.ts new file mode 100644 index 00000000000000..e8eb54a420c7fa --- /dev/null +++ b/docs/data/material/components/text-fields/demos/input-with-icon/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import InputWithIcon from './InputWithIcon'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, InputWithIcon, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/Inputs.tsx b/docs/data/material/components/text-fields/demos/inputs/Inputs.tsx similarity index 91% rename from docs/data/material/components/text-fields/Inputs.tsx rename to docs/data/material/components/text-fields/demos/inputs/Inputs.tsx index 80ee5f8aaf6f3f..17a8e28f9ada59 100644 --- a/docs/data/material/components/text-fields/Inputs.tsx +++ b/docs/data/material/components/text-fields/demos/inputs/Inputs.tsx @@ -11,10 +11,12 @@ export default function Inputs() { noValidate autoComplete="off" > + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/inputs/client.ts b/docs/data/material/components/text-fields/demos/inputs/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/inputs/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/inputs/index.ts b/docs/data/material/components/text-fields/demos/inputs/index.ts new file mode 100644 index 00000000000000..5c42030d36996e --- /dev/null +++ b/docs/data/material/components/text-fields/demos/inputs/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Inputs from './Inputs'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Inputs, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/LayoutTextFields.tsx b/docs/data/material/components/text-fields/demos/layout/LayoutTextFields.tsx similarity index 94% rename from docs/data/material/components/text-fields/LayoutTextFields.tsx rename to docs/data/material/components/text-fields/demos/layout/LayoutTextFields.tsx index 7faa68bb843efc..e447ce0b0a06c7 100644 --- a/docs/data/material/components/text-fields/LayoutTextFields.tsx +++ b/docs/data/material/components/text-fields/demos/layout/LayoutTextFields.tsx @@ -24,6 +24,7 @@ export default function LayoutTextFields() { '& .MuiTextField-root': { width: '25ch' }, }} > + {/* @focus-start */} @@ -31,6 +32,7 @@ export default function LayoutTextFields() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/layout/client.ts b/docs/data/material/components/text-fields/demos/layout/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/layout/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/layout/index.ts b/docs/data/material/components/text-fields/demos/layout/index.ts new file mode 100644 index 00000000000000..4a89f99e06f102 --- /dev/null +++ b/docs/data/material/components/text-fields/demos/layout/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LayoutTextFields from './LayoutTextFields'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LayoutTextFields, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/MultilineTextFields.tsx b/docs/data/material/components/text-fields/demos/multiline/MultilineTextFields.tsx similarity index 97% rename from docs/data/material/components/text-fields/MultilineTextFields.tsx rename to docs/data/material/components/text-fields/demos/multiline/MultilineTextFields.tsx index 72e7c3cb344e49..c0469e0248fd0d 100644 --- a/docs/data/material/components/text-fields/MultilineTextFields.tsx +++ b/docs/data/material/components/text-fields/demos/multiline/MultilineTextFields.tsx @@ -9,6 +9,7 @@ export default function MultilineTextFields() { noValidate autoComplete="off" > + {/* @focus-start */}
    + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/multiline/client.ts b/docs/data/material/components/text-fields/demos/multiline/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/multiline/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/multiline/index.ts b/docs/data/material/components/text-fields/demos/multiline/index.ts new file mode 100644 index 00000000000000..9dfdd4f4ab5d85 --- /dev/null +++ b/docs/data/material/components/text-fields/demos/multiline/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MultilineTextFields from './MultilineTextFields'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MultilineTextFields, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/SelectTextFields.tsx b/docs/data/material/components/text-fields/demos/select/SelectTextFields.tsx similarity index 98% rename from docs/data/material/components/text-fields/SelectTextFields.tsx rename to docs/data/material/components/text-fields/demos/select/SelectTextFields.tsx index d7d902f93f5a8e..756a0ad3d34249 100644 --- a/docs/data/material/components/text-fields/SelectTextFields.tsx +++ b/docs/data/material/components/text-fields/demos/select/SelectTextFields.tsx @@ -29,6 +29,7 @@ export default function SelectTextFields() { noValidate autoComplete="off" > + {/* @focus-start */}
    + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/select/client.ts b/docs/data/material/components/text-fields/demos/select/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/select/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/select/index.ts b/docs/data/material/components/text-fields/demos/select/index.ts new file mode 100644 index 00000000000000..f01bf0224c49b6 --- /dev/null +++ b/docs/data/material/components/text-fields/demos/select/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SelectTextFields from './SelectTextFields'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SelectTextFields, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/TextFieldSizes.tsx b/docs/data/material/components/text-fields/demos/sizes/TextFieldSizes.tsx similarity index 95% rename from docs/data/material/components/text-fields/TextFieldSizes.tsx rename to docs/data/material/components/text-fields/demos/sizes/TextFieldSizes.tsx index d9f7beec2c8324..fef67964f30b57 100644 --- a/docs/data/material/components/text-fields/TextFieldSizes.tsx +++ b/docs/data/material/components/text-fields/demos/sizes/TextFieldSizes.tsx @@ -9,6 +9,7 @@ export default function TextFieldSizes() { noValidate autoComplete="off" > + {/* @focus-start */}
    + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/sizes/client.ts b/docs/data/material/components/text-fields/demos/sizes/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/sizes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/sizes/index.ts b/docs/data/material/components/text-fields/demos/sizes/index.ts new file mode 100644 index 00000000000000..4c34ff342e443c --- /dev/null +++ b/docs/data/material/components/text-fields/demos/sizes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TextFieldSizes from './TextFieldSizes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TextFieldSizes, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/StateTextFields.tsx b/docs/data/material/components/text-fields/demos/state/StateTextFields.tsx similarity index 93% rename from docs/data/material/components/text-fields/StateTextFields.tsx rename to docs/data/material/components/text-fields/demos/state/StateTextFields.tsx index b24a3d71826a92..5b3c645b521beb 100644 --- a/docs/data/material/components/text-fields/StateTextFields.tsx +++ b/docs/data/material/components/text-fields/demos/state/StateTextFields.tsx @@ -12,6 +12,7 @@ export default function StateTextFields() { noValidate autoComplete="off" > + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/state/client.ts b/docs/data/material/components/text-fields/demos/state/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/state/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/state/index.ts b/docs/data/material/components/text-fields/demos/state/index.ts new file mode 100644 index 00000000000000..e76ac2c338be46 --- /dev/null +++ b/docs/data/material/components/text-fields/demos/state/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StateTextFields from './StateTextFields'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StateTextFields, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/UseFormControl.tsx b/docs/data/material/components/text-fields/demos/use-form-control/UseFormControl.tsx similarity index 94% rename from docs/data/material/components/text-fields/UseFormControl.tsx rename to docs/data/material/components/text-fields/demos/use-form-control/UseFormControl.tsx index 5e7535cc2ee439..7d4b2d1977024b 100644 --- a/docs/data/material/components/text-fields/UseFormControl.tsx +++ b/docs/data/material/components/text-fields/demos/use-form-control/UseFormControl.tsx @@ -19,11 +19,13 @@ function MyFormHelperText() { export default function UseFormControl() { return ( + // @focus-start @padding 2
    + // @focus-end ); } diff --git a/docs/data/material/components/text-fields/demos/use-form-control/client.ts b/docs/data/material/components/text-fields/demos/use-form-control/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/use-form-control/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/use-form-control/index.ts b/docs/data/material/components/text-fields/demos/use-form-control/index.ts new file mode 100644 index 00000000000000..ba4060876f5019 --- /dev/null +++ b/docs/data/material/components/text-fields/demos/use-form-control/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UseFormControl from './UseFormControl'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UseFormControl, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/ValidationTextFields.tsx b/docs/data/material/components/text-fields/demos/validation/ValidationTextFields.tsx similarity index 96% rename from docs/data/material/components/text-fields/ValidationTextFields.tsx rename to docs/data/material/components/text-fields/demos/validation/ValidationTextFields.tsx index c9355c4ec49031..e17cce8c1f5af1 100644 --- a/docs/data/material/components/text-fields/ValidationTextFields.tsx +++ b/docs/data/material/components/text-fields/demos/validation/ValidationTextFields.tsx @@ -9,6 +9,7 @@ export default function ValidationTextFields() { noValidate autoComplete="off" > + {/* @focus-start */}
    + {/* @focus-end */} ); } diff --git a/docs/data/material/components/text-fields/demos/validation/client.ts b/docs/data/material/components/text-fields/demos/validation/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/text-fields/demos/validation/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/text-fields/demos/validation/index.ts b/docs/data/material/components/text-fields/demos/validation/index.ts new file mode 100644 index 00000000000000..ae540aaa396d7a --- /dev/null +++ b/docs/data/material/components/text-fields/demos/validation/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ValidationTextFields from './ValidationTextFields'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ValidationTextFields, { ClientProvider }); diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md index bee171231cdf13..8fc04dc34ab004 100644 --- a/docs/data/material/components/text-fields/text-fields.md +++ b/docs/data/material/components/text-fields/text-fields.md @@ -20,7 +20,7 @@ Text fields allow users to enter text into a UI. They typically appear in forms The `TextField` wrapper component is a complete form control including a label, input, and help text. It comes with three variants: outlined (default), filled, and standard. -{{"demo": "BasicTextFields.js"}} +{{"component": "file://./demos/basic/index.ts"}} :::info The standard variant of the Text Field is no longer documented in the [Material Design guidelines](https://m2.material.io/) @@ -32,7 +32,7 @@ but Material UI will continue to support it. Standard form attributes are supported, for example `required`, `disabled`, `type`, etc. as well as a `helperText` which is used to give context about a field's input, such as how the input will be used. -{{"demo": "FormPropsTextFields.js"}} +{{"component": "file://./demos/form-props/index.ts"}} ## Controlling the HTML input @@ -64,7 +64,7 @@ The rendered HTML input will look like this: The `error` prop toggles the error state. The `helperText` prop can then be used to provide feedback to the user about the error. -{{"demo": "ValidationTextFields.js"}} +{{"component": "file://./demos/validation/index.ts"}} ## Multiline @@ -72,19 +72,19 @@ The `multiline` prop transforms the Text Field into a [Textarea Autosize](/mater Unless the `rows` prop is set, the height of the text field dynamically matches its content. You can use the `minRows` and `maxRows` props to bound it. -{{"demo": "MultilineTextFields.js"}} +{{"component": "file://./demos/multiline/index.ts"}} ## Select The `select` prop makes the text field use the [Select](/material-ui/react-select/) component internally. -{{"demo": "SelectTextFields.js"}} +{{"component": "file://./demos/select/index.ts"}} ## Icons There are multiple ways to display an icon with a text field. -{{"demo": "InputWithIcon.js"}} +{{"component": "file://./demos/input-with-icon/index.ts"}} ### Input Adornments @@ -92,37 +92,37 @@ The main way is with an `InputAdornment`. This can be used to add a prefix, a suffix, or an action to an input. For instance, you can use an icon button to hide or reveal the password. -{{"demo": "InputAdornments.js"}} +{{"component": "file://./demos/input-adornments/index.ts"}} #### Customizing adornments You can apply custom styles to adornments, and trigger changes to one based on attributes from another. For example, the demo below uses the label's `[data-shrink=true]` attribute to make the suffix visible (via opacity) when the label is in its shrunken state. -{{"demo": "InputSuffixShrink.js"}} +{{"component": "file://./demos/input-suffix-shrink/index.ts"}} ## Sizes Fancy smaller inputs? Use the `size` prop. -{{"demo": "TextFieldSizes.js"}} +{{"component": "file://./demos/sizes/index.ts"}} The `filled` variant input height can be further reduced by rendering the label outside of it. -{{"demo": "TextFieldHiddenLabel.js"}} +{{"component": "file://./demos/hidden-label/index.ts"}} ## Margin The `margin` prop can be used to alter the vertical spacing of the text field. Using `none` (default) doesn't apply margins to the `FormControl` whereas `dense` and `normal` do. -{{"demo": "LayoutTextFields.js"}} +{{"component": "file://./demos/layout/index.ts"}} ## Full width `fullWidth` can be used to make the input take up the full width of its container. -{{"demo": "FullWidthTextField.js"}} +{{"component": "file://./demos/full-width/index.ts"}} ## Uncontrolled vs. Controlled @@ -136,7 +136,7 @@ The component can be controlled or uncontrolled. Learn more about controlled and uncontrolled components in the [React documentation](https://react.dev/learn/sharing-state-between-components#controlled-and-uncontrolled-components). ::: -{{"demo": "StateTextFields.js"}} +{{"component": "file://./demos/state/index.ts"}} ## Components @@ -154,17 +154,17 @@ This is on purpose. The component takes care of the most used properties. Then, it's up to the user to use the underlying component shown in the following demo. Still, you can use `slotProps.htmlInput` (and `slotProps.input`, `slotProps.inputLabel` properties) if you want to avoid some boilerplate. -{{"demo": "ComposedTextField.js"}} +{{"component": "file://./demos/composed/index.ts"}} ## Inputs -{{"demo": "Inputs.js"}} +{{"component": "file://./demos/inputs/index.ts"}} ## Color The `color` prop changes the highlight color of the text field when focused. -{{"demo": "ColorTextFields.js"}} +{{"component": "file://./demos/color/index.ts"}} ## Customization @@ -173,20 +173,20 @@ You can learn more about this in the [overrides documentation page](/material-ui ### Using the styled API -{{"demo": "CustomizedInputsStyled.js"}} +{{"component": "file://./demos/customized-inputs-styled/index.ts"}} ### Using the theme style overrides API Use the `styleOverrides` key to change any style injected by Material UI into the DOM. See the [theme style overrides](/material-ui/customization/theme-components/#theme-style-overrides) documentation for further details. -{{"demo": "CustomizedInputsStyleOverrides.js"}} +{{"component": "file://./demos/customized-inputs-style-overrides/index.ts"}} Customization does not stop at CSS. You can use composition to build custom components and give your app a unique feel. Below is an example using the [`InputBase`](/material-ui/api/input-base/) component, inspired by Google Maps. -{{"demo": "CustomizedInputBase.js", "bg": true}} +{{"component": "file://./demos/customized-input-base/index.ts", "bg": true}} 🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/primitive/text-field). @@ -224,7 +224,7 @@ import { useFormControl } from '@mui/material/FormControl'; **Example** -{{"demo": "UseFormControl.js"}} +{{"component": "file://./demos/use-form-control/index.ts"}} ## Performance @@ -307,11 +307,11 @@ If you need a text field with number validation, you can use [Number Field](/mat The helper text prop affects the height of the text field. If two text fields are placed side by side, one with a helper text and one without, they will have different heights. For example: -{{"demo": "HelperTextMisaligned.js"}} +{{"component": "file://./demos/helper-text-misaligned/index.ts"}} This can be fixed by passing a space character to the `helperText` prop: -{{"demo": "HelperTextAligned.js"}} +{{"component": "file://./demos/helper-text-aligned/index.ts"}} ## Integration with 3rd party input libraries @@ -320,7 +320,7 @@ You have to provide a custom implementation of the `` element with the `i The following demo uses the [react-imask](https://github.com/uNmAnNeR/imaskjs) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries. The same concept could be applied to, for example [react-stripe-element](https://github.com/mui/material-ui/issues/16037). -{{"demo": "FormattedInputs.js"}} +{{"component": "file://./demos/formatted-inputs/index.ts"}} The provided input component should expose a ref with a value that implements the following interface: diff --git a/docs/data/material/components/textarea-autosize/EmptyTextarea.js b/docs/data/material/components/textarea-autosize/EmptyTextarea.js deleted file mode 100644 index c62f0d02bca92b..00000000000000 --- a/docs/data/material/components/textarea-autosize/EmptyTextarea.js +++ /dev/null @@ -1,11 +0,0 @@ -import TextareaAutosize from '@mui/material/TextareaAutosize'; - -export default function EmptyTextarea() { - return ( - - ); -} diff --git a/docs/data/material/components/textarea-autosize/EmptyTextarea.tsx.preview b/docs/data/material/components/textarea-autosize/EmptyTextarea.tsx.preview deleted file mode 100644 index ddba1a325d06a7..00000000000000 --- a/docs/data/material/components/textarea-autosize/EmptyTextarea.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/textarea-autosize/MaxHeightTextarea.js b/docs/data/material/components/textarea-autosize/MaxHeightTextarea.js deleted file mode 100644 index 7ee50b18095399..00000000000000 --- a/docs/data/material/components/textarea-autosize/MaxHeightTextarea.js +++ /dev/null @@ -1,15 +0,0 @@ -import TextareaAutosize from '@mui/material/TextareaAutosize'; - -export default function MaxHeightTextarea() { - return ( - - ); -} diff --git a/docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx.preview b/docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx.preview deleted file mode 100644 index 4d769cae273a54..00000000000000 --- a/docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/textarea-autosize/MinHeightTextarea.js b/docs/data/material/components/textarea-autosize/MinHeightTextarea.js deleted file mode 100644 index d8d17e6d8c8456..00000000000000 --- a/docs/data/material/components/textarea-autosize/MinHeightTextarea.js +++ /dev/null @@ -1,12 +0,0 @@ -import TextareaAutosize from '@mui/material/TextareaAutosize'; - -export default function MinHeightTextarea() { - return ( - - ); -} diff --git a/docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx.preview b/docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx.preview deleted file mode 100644 index f56b4f1227ce73..00000000000000 --- a/docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx.preview +++ /dev/null @@ -1,6 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/components/textarea-autosize/EmptyTextarea.tsx b/docs/data/material/components/textarea-autosize/demos/empty-textarea/EmptyTextarea.tsx similarity index 83% rename from docs/data/material/components/textarea-autosize/EmptyTextarea.tsx rename to docs/data/material/components/textarea-autosize/demos/empty-textarea/EmptyTextarea.tsx index c62f0d02bca92b..6b2db75f81eda5 100644 --- a/docs/data/material/components/textarea-autosize/EmptyTextarea.tsx +++ b/docs/data/material/components/textarea-autosize/demos/empty-textarea/EmptyTextarea.tsx @@ -2,10 +2,12 @@ import TextareaAutosize from '@mui/material/TextareaAutosize'; export default function EmptyTextarea() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/textarea-autosize/demos/empty-textarea/client.ts b/docs/data/material/components/textarea-autosize/demos/empty-textarea/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/textarea-autosize/demos/empty-textarea/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/textarea-autosize/demos/empty-textarea/index.ts b/docs/data/material/components/textarea-autosize/demos/empty-textarea/index.ts new file mode 100644 index 00000000000000..c21c781e8f345c --- /dev/null +++ b/docs/data/material/components/textarea-autosize/demos/empty-textarea/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import EmptyTextarea from './EmptyTextarea'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, EmptyTextarea, { ClientProvider }); diff --git a/docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx b/docs/data/material/components/textarea-autosize/demos/max-height-textarea/MaxHeightTextarea.tsx similarity index 89% rename from docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx rename to docs/data/material/components/textarea-autosize/demos/max-height-textarea/MaxHeightTextarea.tsx index c0f3cf6656abc2..0a45b6e28b25ff 100644 --- a/docs/data/material/components/textarea-autosize/MaxHeightTextarea.tsx +++ b/docs/data/material/components/textarea-autosize/demos/max-height-textarea/MaxHeightTextarea.tsx @@ -2,13 +2,16 @@ import TextareaAutosize from '@mui/material/TextareaAutosize'; export default function MaxHeightTextarea() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/textarea-autosize/demos/max-height-textarea/client.ts b/docs/data/material/components/textarea-autosize/demos/max-height-textarea/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/textarea-autosize/demos/max-height-textarea/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/textarea-autosize/demos/max-height-textarea/index.ts b/docs/data/material/components/textarea-autosize/demos/max-height-textarea/index.ts new file mode 100644 index 00000000000000..45234526f853df --- /dev/null +++ b/docs/data/material/components/textarea-autosize/demos/max-height-textarea/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MaxHeightTextarea from './MaxHeightTextarea'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MaxHeightTextarea, { ClientProvider }); diff --git a/docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx b/docs/data/material/components/textarea-autosize/demos/min-height-textarea/MinHeightTextarea.tsx similarity index 84% rename from docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx rename to docs/data/material/components/textarea-autosize/demos/min-height-textarea/MinHeightTextarea.tsx index d8d17e6d8c8456..ad09a879e3b4c8 100644 --- a/docs/data/material/components/textarea-autosize/MinHeightTextarea.tsx +++ b/docs/data/material/components/textarea-autosize/demos/min-height-textarea/MinHeightTextarea.tsx @@ -2,11 +2,13 @@ import TextareaAutosize from '@mui/material/TextareaAutosize'; export default function MinHeightTextarea() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/textarea-autosize/demos/min-height-textarea/client.ts b/docs/data/material/components/textarea-autosize/demos/min-height-textarea/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/textarea-autosize/demos/min-height-textarea/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/textarea-autosize/demos/min-height-textarea/index.ts b/docs/data/material/components/textarea-autosize/demos/min-height-textarea/index.ts new file mode 100644 index 00000000000000..0b28f706064596 --- /dev/null +++ b/docs/data/material/components/textarea-autosize/demos/min-height-textarea/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MinHeightTextarea from './MinHeightTextarea'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MinHeightTextarea, { ClientProvider }); diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize.md b/docs/data/material/components/textarea-autosize/textarea-autosize.md index 596cc7fe31b2fc..94ec7442b6bedc 100644 --- a/docs/data/material/components/textarea-autosize/textarea-autosize.md +++ b/docs/data/material/components/textarea-autosize/textarea-autosize.md @@ -18,7 +18,7 @@ Its height automatically adjusts as a response to keyboard inputs and window res By default, an empty Textarea Autosize component renders as a single row, as shown in the following demo: -{{"demo": "EmptyTextarea.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/empty-textarea/index.ts", "collapseToEmpty": true}} ## Basics @@ -32,10 +32,10 @@ import TextareaAutosize from '@mui/material/TextareaAutosize'; Use the `minRows` prop to define the minimum height of the component: -{{"demo": "MinHeightTextarea.js"}} +{{"component": "file://./demos/min-height-textarea/index.ts"}} ### Maximum height Use the `maxRows` prop to define the maximum height of the component: -{{"demo": "MaxHeightTextarea.js"}} +{{"component": "file://./demos/max-height-textarea/index.ts"}} diff --git a/docs/data/material/components/timeline/AlternateReverseTimeline.js b/docs/data/material/components/timeline/AlternateReverseTimeline.js deleted file mode 100644 index 2b5b4d4e28a9c9..00000000000000 --- a/docs/data/material/components/timeline/AlternateReverseTimeline.js +++ /dev/null @@ -1,40 +0,0 @@ -import Timeline from '@mui/lab/Timeline'; -import TimelineItem from '@mui/lab/TimelineItem'; -import TimelineSeparator from '@mui/lab/TimelineSeparator'; -import TimelineConnector from '@mui/lab/TimelineConnector'; -import TimelineContent from '@mui/lab/TimelineContent'; -import TimelineDot from '@mui/lab/TimelineDot'; - -export default function AlternateReverseTimeline() { - return ( - - - - - - - Eat - - - - - - - Code - - - - - - - Sleep - - - - - - Repeat - - - ); -} diff --git a/docs/data/material/components/timeline/AlternateTimeline.js b/docs/data/material/components/timeline/AlternateTimeline.js deleted file mode 100644 index 9839a341390a37..00000000000000 --- a/docs/data/material/components/timeline/AlternateTimeline.js +++ /dev/null @@ -1,40 +0,0 @@ -import Timeline from '@mui/lab/Timeline'; -import TimelineItem from '@mui/lab/TimelineItem'; -import TimelineSeparator from '@mui/lab/TimelineSeparator'; -import TimelineConnector from '@mui/lab/TimelineConnector'; -import TimelineContent from '@mui/lab/TimelineContent'; -import TimelineDot from '@mui/lab/TimelineDot'; - -export default function AlternateTimeline() { - return ( - - - - - - - Eat - - - - - - - Code - - - - - - - Sleep - - - - - - Repeat - - - ); -} diff --git a/docs/data/material/components/timeline/BasicTimeline.js b/docs/data/material/components/timeline/BasicTimeline.js deleted file mode 100644 index ad64a5e4a3312e..00000000000000 --- a/docs/data/material/components/timeline/BasicTimeline.js +++ /dev/null @@ -1,33 +0,0 @@ -import Timeline from '@mui/lab/Timeline'; -import TimelineItem from '@mui/lab/TimelineItem'; -import TimelineSeparator from '@mui/lab/TimelineSeparator'; -import TimelineConnector from '@mui/lab/TimelineConnector'; -import TimelineContent from '@mui/lab/TimelineContent'; -import TimelineDot from '@mui/lab/TimelineDot'; - -export default function BasicTimeline() { - return ( - - - - - - - Eat - - - - - - - Code - - - - - - Sleep - - - ); -} diff --git a/docs/data/material/components/timeline/ColorsTimeline.js b/docs/data/material/components/timeline/ColorsTimeline.js deleted file mode 100644 index 3575431524e63e..00000000000000 --- a/docs/data/material/components/timeline/ColorsTimeline.js +++ /dev/null @@ -1,26 +0,0 @@ -import Timeline from '@mui/lab/Timeline'; -import TimelineItem from '@mui/lab/TimelineItem'; -import TimelineSeparator from '@mui/lab/TimelineSeparator'; -import TimelineConnector from '@mui/lab/TimelineConnector'; -import TimelineContent from '@mui/lab/TimelineContent'; -import TimelineDot from '@mui/lab/TimelineDot'; - -export default function ColorsTimeline() { - return ( - - - - - - - Secondary - - - - - - Success - - - ); -} diff --git a/docs/data/material/components/timeline/ColorsTimeline.tsx.preview b/docs/data/material/components/timeline/ColorsTimeline.tsx.preview deleted file mode 100644 index 7e4f8afbb3c3e6..00000000000000 --- a/docs/data/material/components/timeline/ColorsTimeline.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - - Secondary - - - - - - Success - - \ No newline at end of file diff --git a/docs/data/material/components/timeline/CustomizedTimeline.js b/docs/data/material/components/timeline/CustomizedTimeline.js deleted file mode 100644 index 005d0d240ed75d..00000000000000 --- a/docs/data/material/components/timeline/CustomizedTimeline.js +++ /dev/null @@ -1,98 +0,0 @@ -import Timeline from '@mui/lab/Timeline'; -import TimelineItem from '@mui/lab/TimelineItem'; -import TimelineSeparator from '@mui/lab/TimelineSeparator'; -import TimelineConnector from '@mui/lab/TimelineConnector'; -import TimelineContent from '@mui/lab/TimelineContent'; -import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'; -import TimelineDot from '@mui/lab/TimelineDot'; -import FastfoodIcon from '@mui/icons-material/Fastfood'; -import LaptopMacIcon from '@mui/icons-material/LaptopMac'; -import HotelIcon from '@mui/icons-material/Hotel'; -import RepeatIcon from '@mui/icons-material/Repeat'; -import Typography from '@mui/material/Typography'; - -export default function CustomizedTimeline() { - return ( - - - - 9:30 am - - - - - - - - - - - Eat - - Because you need strength - - - - - 10:00 am - - - - - - - - - - - Code - - Because it's awesome! - - - - - - - - - - - - - Sleep - - Because you need rest - - - - - - - - - - - - - Repeat - - Because this is the life you love! - - - - ); -} diff --git a/docs/data/material/components/timeline/LeftAlignedTimeline.js b/docs/data/material/components/timeline/LeftAlignedTimeline.js deleted file mode 100644 index 1642ed39eb9b62..00000000000000 --- a/docs/data/material/components/timeline/LeftAlignedTimeline.js +++ /dev/null @@ -1,41 +0,0 @@ -import Timeline from '@mui/lab/Timeline'; -import TimelineItem from '@mui/lab/TimelineItem'; -import TimelineSeparator from '@mui/lab/TimelineSeparator'; -import TimelineConnector from '@mui/lab/TimelineConnector'; -import TimelineContent from '@mui/lab/TimelineContent'; -import TimelineDot from '@mui/lab/TimelineDot'; -import TimelineOppositeContent, { - timelineOppositeContentClasses, -} from '@mui/lab/TimelineOppositeContent'; - -export default function LeftAlignedTimeline() { - return ( - - - - 09:30 am - - - - - - Eat - - - - 10:00 am - - - - - Code - - - ); -} diff --git a/docs/data/material/components/timeline/LeftPositionedTimeline.js b/docs/data/material/components/timeline/LeftPositionedTimeline.js deleted file mode 100644 index ce680b4732e382..00000000000000 --- a/docs/data/material/components/timeline/LeftPositionedTimeline.js +++ /dev/null @@ -1,40 +0,0 @@ -import Timeline from '@mui/lab/Timeline'; -import TimelineItem from '@mui/lab/TimelineItem'; -import TimelineSeparator from '@mui/lab/TimelineSeparator'; -import TimelineConnector from '@mui/lab/TimelineConnector'; -import TimelineContent from '@mui/lab/TimelineContent'; -import TimelineDot from '@mui/lab/TimelineDot'; - -export default function LeftPositionedTimeline() { - return ( - - - - - - - Eat - - - - - - - Code - - - - - - - Sleep - - - - - - Repeat - - - ); -} diff --git a/docs/data/material/components/timeline/NoOppositeContent.js b/docs/data/material/components/timeline/NoOppositeContent.js deleted file mode 100644 index a45b7fbd2a5109..00000000000000 --- a/docs/data/material/components/timeline/NoOppositeContent.js +++ /dev/null @@ -1,33 +0,0 @@ -import Timeline from '@mui/lab/Timeline'; -import TimelineItem, { timelineItemClasses } from '@mui/lab/TimelineItem'; -import TimelineSeparator from '@mui/lab/TimelineSeparator'; -import TimelineConnector from '@mui/lab/TimelineConnector'; -import TimelineContent from '@mui/lab/TimelineContent'; -import TimelineDot from '@mui/lab/TimelineDot'; - -export default function NoOppositeContent() { - return ( - - - - - - - Eat - - - - - - Code - - - ); -} diff --git a/docs/data/material/components/timeline/OppositeContentTimeline.js b/docs/data/material/components/timeline/OppositeContentTimeline.js deleted file mode 100644 index 5d300d5fbeef0c..00000000000000 --- a/docs/data/material/components/timeline/OppositeContentTimeline.js +++ /dev/null @@ -1,70 +0,0 @@ -import Timeline from '@mui/lab/Timeline'; -import TimelineItem from '@mui/lab/TimelineItem'; -import TimelineSeparator from '@mui/lab/TimelineSeparator'; -import TimelineConnector from '@mui/lab/TimelineConnector'; -import TimelineContent from '@mui/lab/TimelineContent'; -import TimelineDot from '@mui/lab/TimelineDot'; -import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'; - -export default function OppositeContentTimeline() { - return ( - - - - 09:30 am - - - - - - Eat - - - - 10:00 am - - - - - - Code - - - - 12:00 am - - - - - - Sleep - - - - 9:00 am - - - - - - Repeat - - - ); -} diff --git a/docs/data/material/components/timeline/OutlinedTimeline.js b/docs/data/material/components/timeline/OutlinedTimeline.js deleted file mode 100644 index 632b63697a0f50..00000000000000 --- a/docs/data/material/components/timeline/OutlinedTimeline.js +++ /dev/null @@ -1,40 +0,0 @@ -import Timeline from '@mui/lab/Timeline'; -import TimelineItem from '@mui/lab/TimelineItem'; -import TimelineSeparator from '@mui/lab/TimelineSeparator'; -import TimelineConnector from '@mui/lab/TimelineConnector'; -import TimelineContent from '@mui/lab/TimelineContent'; -import TimelineDot from '@mui/lab/TimelineDot'; - -export default function OutlinedTimeline() { - return ( - - - - - - - Eat - - - - - - - Code - - - - - - - Sleep - - - - - - Repeat - - - ); -} diff --git a/docs/data/material/components/timeline/RightAlignedTimeline.js b/docs/data/material/components/timeline/RightAlignedTimeline.js deleted file mode 100644 index 67be11f844a7cb..00000000000000 --- a/docs/data/material/components/timeline/RightAlignedTimeline.js +++ /dev/null @@ -1,39 +0,0 @@ -import Timeline from '@mui/lab/Timeline'; -import TimelineItem from '@mui/lab/TimelineItem'; -import TimelineSeparator from '@mui/lab/TimelineSeparator'; -import TimelineConnector from '@mui/lab/TimelineConnector'; -import TimelineContent, { timelineContentClasses } from '@mui/lab/TimelineContent'; -import TimelineDot from '@mui/lab/TimelineDot'; -import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'; - -export default function RightAlignedTimeline() { - return ( - - - - 09:30 am - - - - - - Eat - - - - 10:00 am - - - - - Code - - - ); -} diff --git a/docs/data/material/components/timeline/AlternateReverseTimeline.tsx b/docs/data/material/components/timeline/demos/alternate-reverse/AlternateReverseTimeline.tsx similarity index 96% rename from docs/data/material/components/timeline/AlternateReverseTimeline.tsx rename to docs/data/material/components/timeline/demos/alternate-reverse/AlternateReverseTimeline.tsx index 2b5b4d4e28a9c9..f35a9bfee3bbed 100644 --- a/docs/data/material/components/timeline/AlternateReverseTimeline.tsx +++ b/docs/data/material/components/timeline/demos/alternate-reverse/AlternateReverseTimeline.tsx @@ -7,6 +7,7 @@ import TimelineDot from '@mui/lab/TimelineDot'; export default function AlternateReverseTimeline() { return ( + // @focus-start @padding 2 @@ -36,5 +37,6 @@ export default function AlternateReverseTimeline() { Repeat + // @focus-end ); } diff --git a/docs/data/material/components/timeline/demos/alternate-reverse/client.ts b/docs/data/material/components/timeline/demos/alternate-reverse/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/timeline/demos/alternate-reverse/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/timeline/demos/alternate-reverse/index.ts b/docs/data/material/components/timeline/demos/alternate-reverse/index.ts new file mode 100644 index 00000000000000..77aafeb8b136cc --- /dev/null +++ b/docs/data/material/components/timeline/demos/alternate-reverse/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AlternateReverseTimeline from './AlternateReverseTimeline'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AlternateReverseTimeline, { ClientProvider }); diff --git a/docs/data/material/components/timeline/AlternateTimeline.tsx b/docs/data/material/components/timeline/demos/alternate/AlternateTimeline.tsx similarity index 96% rename from docs/data/material/components/timeline/AlternateTimeline.tsx rename to docs/data/material/components/timeline/demos/alternate/AlternateTimeline.tsx index 9839a341390a37..7df8d6c9699782 100644 --- a/docs/data/material/components/timeline/AlternateTimeline.tsx +++ b/docs/data/material/components/timeline/demos/alternate/AlternateTimeline.tsx @@ -7,6 +7,7 @@ import TimelineDot from '@mui/lab/TimelineDot'; export default function AlternateTimeline() { return ( + // @focus-start @padding 2 @@ -36,5 +37,6 @@ export default function AlternateTimeline() { Repeat + // @focus-end ); } diff --git a/docs/data/material/components/timeline/demos/alternate/client.ts b/docs/data/material/components/timeline/demos/alternate/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/timeline/demos/alternate/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/timeline/demos/alternate/index.ts b/docs/data/material/components/timeline/demos/alternate/index.ts new file mode 100644 index 00000000000000..b6a702bb0c0fc7 --- /dev/null +++ b/docs/data/material/components/timeline/demos/alternate/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AlternateTimeline from './AlternateTimeline'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AlternateTimeline, { ClientProvider }); diff --git a/docs/data/material/components/timeline/BasicTimeline.tsx b/docs/data/material/components/timeline/demos/basic/BasicTimeline.tsx similarity index 95% rename from docs/data/material/components/timeline/BasicTimeline.tsx rename to docs/data/material/components/timeline/demos/basic/BasicTimeline.tsx index ad64a5e4a3312e..819547f49e1271 100644 --- a/docs/data/material/components/timeline/BasicTimeline.tsx +++ b/docs/data/material/components/timeline/demos/basic/BasicTimeline.tsx @@ -7,6 +7,7 @@ import TimelineDot from '@mui/lab/TimelineDot'; export default function BasicTimeline() { return ( + // @focus-start @padding 2 @@ -29,5 +30,6 @@ export default function BasicTimeline() { Sleep + // @focus-end ); } diff --git a/docs/data/material/components/timeline/demos/basic/client.ts b/docs/data/material/components/timeline/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/timeline/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/timeline/demos/basic/index.ts b/docs/data/material/components/timeline/demos/basic/index.ts new file mode 100644 index 00000000000000..0d1d21e50a0c8e --- /dev/null +++ b/docs/data/material/components/timeline/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicTimeline from './BasicTimeline'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicTimeline, { ClientProvider }); diff --git a/docs/data/material/components/timeline/ColorsTimeline.tsx b/docs/data/material/components/timeline/demos/colors/ColorsTimeline.tsx similarity index 94% rename from docs/data/material/components/timeline/ColorsTimeline.tsx rename to docs/data/material/components/timeline/demos/colors/ColorsTimeline.tsx index 3575431524e63e..dba8e8e83ccd21 100644 --- a/docs/data/material/components/timeline/ColorsTimeline.tsx +++ b/docs/data/material/components/timeline/demos/colors/ColorsTimeline.tsx @@ -7,6 +7,7 @@ import TimelineDot from '@mui/lab/TimelineDot'; export default function ColorsTimeline() { return ( + // @focus-start @padding 2 @@ -22,5 +23,6 @@ export default function ColorsTimeline() { Success + // @focus-end ); } diff --git a/docs/data/material/components/timeline/demos/colors/client.ts b/docs/data/material/components/timeline/demos/colors/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/timeline/demos/colors/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/timeline/demos/colors/index.ts b/docs/data/material/components/timeline/demos/colors/index.ts new file mode 100644 index 00000000000000..37b058cca99f88 --- /dev/null +++ b/docs/data/material/components/timeline/demos/colors/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorsTimeline from './ColorsTimeline'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorsTimeline, { ClientProvider }); diff --git a/docs/data/material/components/timeline/CustomizedTimeline.tsx b/docs/data/material/components/timeline/demos/customized/CustomizedTimeline.tsx similarity index 98% rename from docs/data/material/components/timeline/CustomizedTimeline.tsx rename to docs/data/material/components/timeline/demos/customized/CustomizedTimeline.tsx index 005d0d240ed75d..be60153bf4ded7 100644 --- a/docs/data/material/components/timeline/CustomizedTimeline.tsx +++ b/docs/data/material/components/timeline/demos/customized/CustomizedTimeline.tsx @@ -13,6 +13,7 @@ import Typography from '@mui/material/Typography'; export default function CustomizedTimeline() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/timeline/demos/customized/client.ts b/docs/data/material/components/timeline/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/timeline/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/timeline/demos/customized/index.ts b/docs/data/material/components/timeline/demos/customized/index.ts new file mode 100644 index 00000000000000..a16484a6bfce80 --- /dev/null +++ b/docs/data/material/components/timeline/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedTimeline from './CustomizedTimeline'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedTimeline, { ClientProvider }); diff --git a/docs/data/material/components/timeline/LeftAlignedTimeline.tsx b/docs/data/material/components/timeline/demos/left-aligned/LeftAlignedTimeline.tsx similarity index 96% rename from docs/data/material/components/timeline/LeftAlignedTimeline.tsx rename to docs/data/material/components/timeline/demos/left-aligned/LeftAlignedTimeline.tsx index 1642ed39eb9b62..933d5c06add4fd 100644 --- a/docs/data/material/components/timeline/LeftAlignedTimeline.tsx +++ b/docs/data/material/components/timeline/demos/left-aligned/LeftAlignedTimeline.tsx @@ -10,6 +10,7 @@ import TimelineOppositeContent, { export default function LeftAlignedTimeline() { return ( + // @focus-start @padding 2 Code + // @focus-end ); } diff --git a/docs/data/material/components/timeline/demos/left-aligned/client.ts b/docs/data/material/components/timeline/demos/left-aligned/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/timeline/demos/left-aligned/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/timeline/demos/left-aligned/index.ts b/docs/data/material/components/timeline/demos/left-aligned/index.ts new file mode 100644 index 00000000000000..6bfeb3ca324bff --- /dev/null +++ b/docs/data/material/components/timeline/demos/left-aligned/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LeftAlignedTimeline from './LeftAlignedTimeline'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LeftAlignedTimeline, { ClientProvider }); diff --git a/docs/data/material/components/timeline/LeftPositionedTimeline.tsx b/docs/data/material/components/timeline/demos/left-positioned/LeftPositionedTimeline.tsx similarity index 96% rename from docs/data/material/components/timeline/LeftPositionedTimeline.tsx rename to docs/data/material/components/timeline/demos/left-positioned/LeftPositionedTimeline.tsx index ce680b4732e382..f42e0e4297415e 100644 --- a/docs/data/material/components/timeline/LeftPositionedTimeline.tsx +++ b/docs/data/material/components/timeline/demos/left-positioned/LeftPositionedTimeline.tsx @@ -7,6 +7,7 @@ import TimelineDot from '@mui/lab/TimelineDot'; export default function LeftPositionedTimeline() { return ( + // @focus-start @padding 2 @@ -36,5 +37,6 @@ export default function LeftPositionedTimeline() { Repeat + // @focus-end ); } diff --git a/docs/data/material/components/timeline/demos/left-positioned/client.ts b/docs/data/material/components/timeline/demos/left-positioned/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/timeline/demos/left-positioned/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/timeline/demos/left-positioned/index.ts b/docs/data/material/components/timeline/demos/left-positioned/index.ts new file mode 100644 index 00000000000000..965477036b75e2 --- /dev/null +++ b/docs/data/material/components/timeline/demos/left-positioned/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import LeftPositionedTimeline from './LeftPositionedTimeline'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, LeftPositionedTimeline, { ClientProvider }); diff --git a/docs/data/material/components/timeline/NoOppositeContent.tsx b/docs/data/material/components/timeline/demos/no-opposite-content/NoOppositeContent.tsx similarity index 95% rename from docs/data/material/components/timeline/NoOppositeContent.tsx rename to docs/data/material/components/timeline/demos/no-opposite-content/NoOppositeContent.tsx index a45b7fbd2a5109..323e3a84f5d2c4 100644 --- a/docs/data/material/components/timeline/NoOppositeContent.tsx +++ b/docs/data/material/components/timeline/demos/no-opposite-content/NoOppositeContent.tsx @@ -7,6 +7,7 @@ import TimelineDot from '@mui/lab/TimelineDot'; export default function NoOppositeContent() { return ( + // @focus-start @padding 2 Code + // @focus-end ); } diff --git a/docs/data/material/components/timeline/demos/no-opposite-content/client.ts b/docs/data/material/components/timeline/demos/no-opposite-content/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/timeline/demos/no-opposite-content/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/timeline/demos/no-opposite-content/index.ts b/docs/data/material/components/timeline/demos/no-opposite-content/index.ts new file mode 100644 index 00000000000000..bd5b79078ed199 --- /dev/null +++ b/docs/data/material/components/timeline/demos/no-opposite-content/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import NoOppositeContent from './NoOppositeContent'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, NoOppositeContent, { ClientProvider }); diff --git a/docs/data/material/components/timeline/OppositeContentTimeline.tsx b/docs/data/material/components/timeline/demos/opposite-content/OppositeContentTimeline.tsx similarity index 97% rename from docs/data/material/components/timeline/OppositeContentTimeline.tsx rename to docs/data/material/components/timeline/demos/opposite-content/OppositeContentTimeline.tsx index 5d300d5fbeef0c..3b9a7af60ed739 100644 --- a/docs/data/material/components/timeline/OppositeContentTimeline.tsx +++ b/docs/data/material/components/timeline/demos/opposite-content/OppositeContentTimeline.tsx @@ -8,6 +8,7 @@ import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'; export default function OppositeContentTimeline() { return ( + // @focus-start @padding 2 Repeat + // @focus-end ); } diff --git a/docs/data/material/components/timeline/demos/opposite-content/client.ts b/docs/data/material/components/timeline/demos/opposite-content/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/timeline/demos/opposite-content/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/timeline/demos/opposite-content/index.ts b/docs/data/material/components/timeline/demos/opposite-content/index.ts new file mode 100644 index 00000000000000..3901c5e69d9b55 --- /dev/null +++ b/docs/data/material/components/timeline/demos/opposite-content/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import OppositeContentTimeline from './OppositeContentTimeline'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, OppositeContentTimeline, { ClientProvider }); diff --git a/docs/data/material/components/timeline/OutlinedTimeline.tsx b/docs/data/material/components/timeline/demos/outlined/OutlinedTimeline.tsx similarity index 96% rename from docs/data/material/components/timeline/OutlinedTimeline.tsx rename to docs/data/material/components/timeline/demos/outlined/OutlinedTimeline.tsx index 632b63697a0f50..7f635761249b5c 100644 --- a/docs/data/material/components/timeline/OutlinedTimeline.tsx +++ b/docs/data/material/components/timeline/demos/outlined/OutlinedTimeline.tsx @@ -7,6 +7,7 @@ import TimelineDot from '@mui/lab/TimelineDot'; export default function OutlinedTimeline() { return ( + // @focus-start @padding 2 @@ -36,5 +37,6 @@ export default function OutlinedTimeline() { Repeat + // @focus-end ); } diff --git a/docs/data/material/components/timeline/demos/outlined/client.ts b/docs/data/material/components/timeline/demos/outlined/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/timeline/demos/outlined/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/timeline/demos/outlined/index.ts b/docs/data/material/components/timeline/demos/outlined/index.ts new file mode 100644 index 00000000000000..8bb5979fbf79d6 --- /dev/null +++ b/docs/data/material/components/timeline/demos/outlined/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import OutlinedTimeline from './OutlinedTimeline'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, OutlinedTimeline, { ClientProvider }); diff --git a/docs/data/material/components/timeline/RightAlignedTimeline.tsx b/docs/data/material/components/timeline/demos/right-aligned/RightAlignedTimeline.tsx similarity index 96% rename from docs/data/material/components/timeline/RightAlignedTimeline.tsx rename to docs/data/material/components/timeline/demos/right-aligned/RightAlignedTimeline.tsx index 67be11f844a7cb..aa5f3ea2f4b200 100644 --- a/docs/data/material/components/timeline/RightAlignedTimeline.tsx +++ b/docs/data/material/components/timeline/demos/right-aligned/RightAlignedTimeline.tsx @@ -8,6 +8,7 @@ import TimelineOppositeContent from '@mui/lab/TimelineOppositeContent'; export default function RightAlignedTimeline() { return ( + // @focus-start @padding 2 Code + // @focus-end ); } diff --git a/docs/data/material/components/timeline/demos/right-aligned/client.ts b/docs/data/material/components/timeline/demos/right-aligned/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/timeline/demos/right-aligned/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/timeline/demos/right-aligned/index.ts b/docs/data/material/components/timeline/demos/right-aligned/index.ts new file mode 100644 index 00000000000000..4c15cd5adb97fd --- /dev/null +++ b/docs/data/material/components/timeline/demos/right-aligned/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import RightAlignedTimeline from './RightAlignedTimeline'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, RightAlignedTimeline, { ClientProvider }); diff --git a/docs/data/material/components/timeline/timeline.md b/docs/data/material/components/timeline/timeline.md index 52388829d37493..cc9b5833281f1d 100644 --- a/docs/data/material/components/timeline/timeline.md +++ b/docs/data/material/components/timeline/timeline.md @@ -20,48 +20,48 @@ This component is not documented in the [Material Design guidelines](https://m2. A basic timeline showing list of events. -{{"demo": "BasicTimeline.js"}} +{{"component": "file://./demos/basic/index.ts"}} ## Left-positioned timeline The main content of the timeline can be positioned on the left side relative to the time axis. -{{"demo": "LeftPositionedTimeline.js"}} +{{"component": "file://./demos/left-positioned/index.ts"}} ## Alternating timeline The timeline can display the events on alternating sides. -{{"demo": "AlternateTimeline.js"}} +{{"component": "file://./demos/alternate/index.ts"}} ## Reverse Alternating timeline The timeline can display the events on alternating sides in reverse order. -{{"demo": "AlternateReverseTimeline.js"}} +{{"component": "file://./demos/alternate-reverse/index.ts"}} ## Color The `TimelineDot` can appear in different colors from theme palette. -{{"demo": "ColorsTimeline.js"}} +{{"component": "file://./demos/colors/index.ts"}} ## Outlined -{{"demo": "OutlinedTimeline.js"}} +{{"component": "file://./demos/outlined/index.ts"}} ## Opposite content The timeline can display content on opposite sides. -{{"demo": "OppositeContentTimeline.js"}} +{{"component": "file://./demos/opposite-content/index.ts"}} ## Customization Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedTimeline.js"}} +{{"component": "file://./demos/customized/index.ts"}} ## Alignment @@ -75,12 +75,12 @@ The demos below show how to adjust the relative width of the left and right side ### Left-aligned -{{"demo": "LeftAlignedTimeline.js"}} +{{"component": "file://./demos/left-aligned/index.ts"}} ### Right-aligned -{{"demo": "RightAlignedTimeline.js"}} +{{"component": "file://./demos/right-aligned/index.ts"}} ### Left-aligned with no opposite content -{{"demo": "NoOppositeContent.js"}} +{{"component": "file://./demos/no-opposite-content/index.ts"}} diff --git a/docs/data/material/components/toggle-button/ColorToggleButton.js b/docs/data/material/components/toggle-button/ColorToggleButton.js deleted file mode 100644 index c584b8bbcabbba..00000000000000 --- a/docs/data/material/components/toggle-button/ColorToggleButton.js +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; - -export default function ColorToggleButton() { - const [alignment, setAlignment] = React.useState('web'); - - const handleChange = (event, newAlignment) => { - setAlignment(newAlignment); - }; - - return ( - - Web - Android - iOS - - ); -} diff --git a/docs/data/material/components/toggle-button/ColorToggleButton.tsx.preview b/docs/data/material/components/toggle-button/ColorToggleButton.tsx.preview deleted file mode 100644 index 009ab8c9f6322f..00000000000000 --- a/docs/data/material/components/toggle-button/ColorToggleButton.tsx.preview +++ /dev/null @@ -1,11 +0,0 @@ - - Web - Android - iOS - \ No newline at end of file diff --git a/docs/data/material/components/toggle-button/CustomizedDividers.js b/docs/data/material/components/toggle-button/CustomizedDividers.js deleted file mode 100644 index 7a66fe7a345bda..00000000000000 --- a/docs/data/material/components/toggle-button/CustomizedDividers.js +++ /dev/null @@ -1,101 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft'; -import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter'; -import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight'; -import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify'; -import FormatBoldIcon from '@mui/icons-material/FormatBold'; -import FormatItalicIcon from '@mui/icons-material/FormatItalic'; -import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined'; -import FormatColorFillIcon from '@mui/icons-material/FormatColorFill'; -import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; -import Divider from '@mui/material/Divider'; -import Paper from '@mui/material/Paper'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup, { - toggleButtonGroupClasses, -} from '@mui/material/ToggleButtonGroup'; - -const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({ - [`& .${toggleButtonGroupClasses.grouped}`]: { - margin: theme.spacing(0.5), - border: 0, - borderRadius: theme.shape.borderRadius, - [`&.${toggleButtonGroupClasses.disabled}`]: { - border: 0, - }, - }, - [`& .${toggleButtonGroupClasses.middleButton},& .${toggleButtonGroupClasses.lastButton}`]: - { - marginLeft: -1, - borderLeft: '1px solid transparent', - }, -})); - -export default function CustomizedDividers() { - const [alignment, setAlignment] = React.useState('left'); - const [formats, setFormats] = React.useState(() => ['italic']); - - const handleFormat = (event, newFormats) => { - setFormats(newFormats); - }; - - const handleAlignment = (event, newAlignment) => { - setAlignment(newAlignment); - }; - - return ( -
    - ({ - display: 'flex', - border: `1px solid ${theme.palette.divider}`, - flexWrap: 'wrap', - })} - > - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - ); -} diff --git a/docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.js b/docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.js deleted file mode 100644 index 1e7fb0a076f917..00000000000000 --- a/docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.js +++ /dev/null @@ -1,59 +0,0 @@ -import * as React from 'react'; -import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft'; -import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter'; -import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight'; -import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify'; -import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton'; -import ToggleButtonGroup, { - toggleButtonGroupClasses, -} from '@mui/material/ToggleButtonGroup'; -import { styled } from '@mui/material/styles'; - -const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({ - gap: '2rem', - [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]: - { - borderTopRightRadius: (theme.vars || theme).shape.borderRadius, - borderBottomRightRadius: (theme.vars || theme).shape.borderRadius, - }, - [`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]: - { - borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, - borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius, - borderLeft: `1px solid ${(theme.vars || theme).palette.divider}`, - }, - [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: - { - borderLeft: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`, - }, -})); - -export default function HorizontalSpacingToggleButton() { - const [alignment, setAlignment] = React.useState('left'); - - const handleAlignment = (event, newAlignment) => { - setAlignment(newAlignment); - }; - - return ( - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/toggle-button/StandaloneToggleButton.js b/docs/data/material/components/toggle-button/StandaloneToggleButton.js deleted file mode 100644 index ab6f99ffd379ef..00000000000000 --- a/docs/data/material/components/toggle-button/StandaloneToggleButton.js +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; -import CheckIcon from '@mui/icons-material/Check'; -import ToggleButton from '@mui/material/ToggleButton'; - -export default function StandaloneToggleButton() { - const [selected, setSelected] = React.useState(false); - - return ( - setSelected((prevSelected) => !prevSelected)} - > - - - ); -} diff --git a/docs/data/material/components/toggle-button/StandaloneToggleButton.tsx.preview b/docs/data/material/components/toggle-button/StandaloneToggleButton.tsx.preview deleted file mode 100644 index b59402da9c7a3d..00000000000000 --- a/docs/data/material/components/toggle-button/StandaloneToggleButton.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ - setSelected((prevSelected) => !prevSelected)} -> - - \ No newline at end of file diff --git a/docs/data/material/components/toggle-button/ToggleButtonNotEmpty.js b/docs/data/material/components/toggle-button/ToggleButtonNotEmpty.js deleted file mode 100644 index 9917313024c6bf..00000000000000 --- a/docs/data/material/components/toggle-button/ToggleButtonNotEmpty.js +++ /dev/null @@ -1,64 +0,0 @@ -import * as React from 'react'; -import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft'; -import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter'; -import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight'; -import LaptopIcon from '@mui/icons-material/Laptop'; -import TvIcon from '@mui/icons-material/Tv'; -import PhoneAndroidIcon from '@mui/icons-material/PhoneAndroid'; -import Stack from '@mui/material/Stack'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; - -export default function ToggleButtonNotEmpty() { - const [alignment, setAlignment] = React.useState('left'); - const [devices, setDevices] = React.useState(() => ['phone']); - - const handleAlignment = (event, newAlignment) => { - if (newAlignment !== null) { - setAlignment(newAlignment); - } - }; - - const handleDevices = (event, newDevices) => { - if (newDevices.length) { - setDevices(newDevices); - } - }; - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/toggle-button/ToggleButtonSizes.js b/docs/data/material/components/toggle-button/ToggleButtonSizes.js deleted file mode 100644 index 3dd11c52371173..00000000000000 --- a/docs/data/material/components/toggle-button/ToggleButtonSizes.js +++ /dev/null @@ -1,51 +0,0 @@ -import * as React from 'react'; -import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft'; -import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter'; -import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight'; -import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify'; -import Stack from '@mui/material/Stack'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; - -export default function ToggleButtonSizes() { - const [alignment, setAlignment] = React.useState('left'); - - const handleChange = (event, newAlignment) => { - setAlignment(newAlignment); - }; - - const children = [ - - - , - - - , - - - , - - - , - ]; - - const control = { - value: alignment, - onChange: handleChange, - exclusive: true, - }; - - return ( - - - {children} - - - {children} - - - {children} - - - ); -} diff --git a/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx.preview b/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx.preview deleted file mode 100644 index ec837343370a64..00000000000000 --- a/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - {children} - - - {children} - - - {children} - \ No newline at end of file diff --git a/docs/data/material/components/toggle-button/ToggleButtons.js b/docs/data/material/components/toggle-button/ToggleButtons.js deleted file mode 100644 index 089e54589fff61..00000000000000 --- a/docs/data/material/components/toggle-button/ToggleButtons.js +++ /dev/null @@ -1,37 +0,0 @@ -import * as React from 'react'; -import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft'; -import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter'; -import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight'; -import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; - -export default function ToggleButtons() { - const [alignment, setAlignment] = React.useState('left'); - - const handleAlignment = (event, newAlignment) => { - setAlignment(newAlignment); - }; - - return ( - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/toggle-button/ToggleButtonsMultiple.js b/docs/data/material/components/toggle-button/ToggleButtonsMultiple.js deleted file mode 100644 index d54e4dd6100ab7..00000000000000 --- a/docs/data/material/components/toggle-button/ToggleButtonsMultiple.js +++ /dev/null @@ -1,38 +0,0 @@ -import * as React from 'react'; -import FormatBoldIcon from '@mui/icons-material/FormatBold'; -import FormatItalicIcon from '@mui/icons-material/FormatItalic'; -import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined'; -import FormatColorFillIcon from '@mui/icons-material/FormatColorFill'; -import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; - -export default function ToggleButtonsMultiple() { - const [formats, setFormats] = React.useState(() => ['bold', 'italic']); - - const handleFormat = (event, newFormats) => { - setFormats(newFormats); - }; - - return ( - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/toggle-button/VerticalSpacingToggleButton.js b/docs/data/material/components/toggle-button/VerticalSpacingToggleButton.js deleted file mode 100644 index 472d5aa09cbfde..00000000000000 --- a/docs/data/material/components/toggle-button/VerticalSpacingToggleButton.js +++ /dev/null @@ -1,60 +0,0 @@ -import * as React from 'react'; -import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft'; -import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter'; -import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight'; -import FormatAlignJustifyIcon from '@mui/icons-material/FormatAlignJustify'; -import ToggleButton, { toggleButtonClasses } from '@mui/material/ToggleButton'; -import ToggleButtonGroup, { - toggleButtonGroupClasses, -} from '@mui/material/ToggleButtonGroup'; -import { styled } from '@mui/material/styles'; - -const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({ - gap: '2rem', - [`& .${toggleButtonGroupClasses.firstButton}, & .${toggleButtonGroupClasses.middleButton}`]: - { - borderBottomRightRadius: (theme.vars || theme).shape.borderRadius, - borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius, - }, - [`& .${toggleButtonGroupClasses.lastButton}, & .${toggleButtonGroupClasses.middleButton}`]: - { - borderTopRightRadius: (theme.vars || theme).shape.borderRadius, - borderTopLeftRadius: (theme.vars || theme).shape.borderRadius, - borderTop: `1px solid ${(theme.vars || theme).palette.divider}`, - }, - [`& .${toggleButtonGroupClasses.lastButton}.${toggleButtonClasses.disabled}, & .${toggleButtonGroupClasses.middleButton}.${toggleButtonClasses.disabled}`]: - { - borderTop: `1px solid ${(theme.vars || theme).palette.action.disabledBackground}`, - }, -})); - -export default function VerticalSpacingToggleButton() { - const [alignment, setAlignment] = React.useState('left'); - - const handleAlignment = (event, newAlignment) => { - setAlignment(newAlignment); - }; - - return ( - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/toggle-button/VerticalToggleButtons.js b/docs/data/material/components/toggle-button/VerticalToggleButtons.js deleted file mode 100644 index c38050bec67d7e..00000000000000 --- a/docs/data/material/components/toggle-button/VerticalToggleButtons.js +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import ViewListIcon from '@mui/icons-material/ViewList'; -import ViewModuleIcon from '@mui/icons-material/ViewModule'; -import ViewQuiltIcon from '@mui/icons-material/ViewQuilt'; -import ToggleButton from '@mui/material/ToggleButton'; -import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; - -export default function VerticalToggleButtons() { - const [view, setView] = React.useState('list'); - - const handleChange = (event, nextView) => { - setView(nextView); - }; - - return ( - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/toggle-button/VerticalToggleButtons.tsx.preview b/docs/data/material/components/toggle-button/VerticalToggleButtons.tsx.preview deleted file mode 100644 index fb9d138e72d73c..00000000000000 --- a/docs/data/material/components/toggle-button/VerticalToggleButtons.tsx.preview +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/toggle-button/ColorToggleButton.tsx b/docs/data/material/components/toggle-button/demos/color/ColorToggleButton.tsx similarity index 93% rename from docs/data/material/components/toggle-button/ColorToggleButton.tsx rename to docs/data/material/components/toggle-button/demos/color/ColorToggleButton.tsx index 21f5a57e40d51e..05ce0c7677788d 100644 --- a/docs/data/material/components/toggle-button/ColorToggleButton.tsx +++ b/docs/data/material/components/toggle-button/demos/color/ColorToggleButton.tsx @@ -13,6 +13,7 @@ export default function ColorToggleButton() { }; return ( + // @focus-start @padding 2 Android iOS + // @focus-end ); } diff --git a/docs/data/material/components/toggle-button/demos/color/client.ts b/docs/data/material/components/toggle-button/demos/color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/toggle-button/demos/color/index.ts b/docs/data/material/components/toggle-button/demos/color/index.ts new file mode 100644 index 00000000000000..bd9756c18515ce --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorToggleButton from './ColorToggleButton'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorToggleButton, { ClientProvider }); diff --git a/docs/data/material/components/toggle-button/CustomizedDividers.tsx b/docs/data/material/components/toggle-button/demos/customized-dividers/CustomizedDividers.tsx similarity index 98% rename from docs/data/material/components/toggle-button/CustomizedDividers.tsx rename to docs/data/material/components/toggle-button/demos/customized-dividers/CustomizedDividers.tsx index 11783a42150a92..b14cdab4369df0 100644 --- a/docs/data/material/components/toggle-button/CustomizedDividers.tsx +++ b/docs/data/material/components/toggle-button/demos/customized-dividers/CustomizedDividers.tsx @@ -33,6 +33,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({ })); export default function CustomizedDividers() { + // @focus-start @padding 1 const [alignment, setAlignment] = React.useState('left'); const [formats, setFormats] = React.useState(() => ['italic']); @@ -104,4 +105,5 @@ export default function CustomizedDividers() {     ); + // @focus-end } diff --git a/docs/data/material/components/toggle-button/demos/customized-dividers/client.ts b/docs/data/material/components/toggle-button/demos/customized-dividers/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/customized-dividers/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/toggle-button/demos/customized-dividers/index.ts b/docs/data/material/components/toggle-button/demos/customized-dividers/index.ts new file mode 100644 index 00000000000000..64c0f06b426187 --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/customized-dividers/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedDividers from './CustomizedDividers'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedDividers, { ClientProvider }); diff --git a/docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.tsx b/docs/data/material/components/toggle-button/demos/horizontal-spacing/HorizontalSpacingToggleButton.tsx similarity index 98% rename from docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.tsx rename to docs/data/material/components/toggle-button/demos/horizontal-spacing/HorizontalSpacingToggleButton.tsx index a60ff3051e75cd..746b3071f46fe0 100644 --- a/docs/data/material/components/toggle-button/HorizontalSpacingToggleButton.tsx +++ b/docs/data/material/components/toggle-button/demos/horizontal-spacing/HorizontalSpacingToggleButton.tsx @@ -29,6 +29,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({ })); export default function HorizontalSpacingToggleButton() { + // @focus-start @padding 1 const [alignment, setAlignment] = React.useState('left'); const handleAlignment = ( @@ -59,4 +60,5 @@ export default function HorizontalSpacingToggleButton() { ); + // @focus-end } diff --git a/docs/data/material/components/toggle-button/demos/horizontal-spacing/client.ts b/docs/data/material/components/toggle-button/demos/horizontal-spacing/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/horizontal-spacing/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/toggle-button/demos/horizontal-spacing/index.ts b/docs/data/material/components/toggle-button/demos/horizontal-spacing/index.ts new file mode 100644 index 00000000000000..90138ac31eca2f --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/horizontal-spacing/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import HorizontalSpacingToggleButton from './HorizontalSpacingToggleButton'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, HorizontalSpacingToggleButton, { ClientProvider }); diff --git a/docs/data/material/components/toggle-button/ToggleButtonsMultiple.tsx b/docs/data/material/components/toggle-button/demos/multiple/ToggleButtonsMultiple.tsx similarity index 96% rename from docs/data/material/components/toggle-button/ToggleButtonsMultiple.tsx rename to docs/data/material/components/toggle-button/demos/multiple/ToggleButtonsMultiple.tsx index 768301867615dc..7968114940f79c 100644 --- a/docs/data/material/components/toggle-button/ToggleButtonsMultiple.tsx +++ b/docs/data/material/components/toggle-button/demos/multiple/ToggleButtonsMultiple.tsx @@ -8,6 +8,7 @@ import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; export default function ToggleButtonsMultiple() { + // @focus-start @padding 1 const [formats, setFormats] = React.useState(() => ['bold', 'italic']); const handleFormat = ( @@ -38,4 +39,5 @@ export default function ToggleButtonsMultiple() { ); + // @focus-end } diff --git a/docs/data/material/components/toggle-button/demos/multiple/client.ts b/docs/data/material/components/toggle-button/demos/multiple/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/multiple/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/toggle-button/demos/multiple/index.ts b/docs/data/material/components/toggle-button/demos/multiple/index.ts new file mode 100644 index 00000000000000..9fbaa002deefe2 --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/multiple/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ToggleButtonsMultiple from './ToggleButtonsMultiple'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ToggleButtonsMultiple, { ClientProvider }); diff --git a/docs/data/material/components/toggle-button/ToggleButtonNotEmpty.tsx b/docs/data/material/components/toggle-button/demos/not-empty/ToggleButtonNotEmpty.tsx similarity index 97% rename from docs/data/material/components/toggle-button/ToggleButtonNotEmpty.tsx rename to docs/data/material/components/toggle-button/demos/not-empty/ToggleButtonNotEmpty.tsx index e753e13b67fab3..c00c00c055c51c 100644 --- a/docs/data/material/components/toggle-button/ToggleButtonNotEmpty.tsx +++ b/docs/data/material/components/toggle-button/demos/not-empty/ToggleButtonNotEmpty.tsx @@ -10,6 +10,7 @@ import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; export default function ToggleButtonNotEmpty() { + // @focus-start @padding 1 const [alignment, setAlignment] = React.useState('left'); const [devices, setDevices] = React.useState(() => ['phone']); @@ -67,4 +68,5 @@ export default function ToggleButtonNotEmpty() { ); + // @focus-end } diff --git a/docs/data/material/components/toggle-button/demos/not-empty/client.ts b/docs/data/material/components/toggle-button/demos/not-empty/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/not-empty/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/toggle-button/demos/not-empty/index.ts b/docs/data/material/components/toggle-button/demos/not-empty/index.ts new file mode 100644 index 00000000000000..8999db1dc1e600 --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/not-empty/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ToggleButtonNotEmpty from './ToggleButtonNotEmpty'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ToggleButtonNotEmpty, { ClientProvider }); diff --git a/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx b/docs/data/material/components/toggle-button/demos/sizes/ToggleButtonSizes.tsx similarity index 97% rename from docs/data/material/components/toggle-button/ToggleButtonSizes.tsx rename to docs/data/material/components/toggle-button/demos/sizes/ToggleButtonSizes.tsx index e036450cced868..257e2fd1ddba56 100644 --- a/docs/data/material/components/toggle-button/ToggleButtonSizes.tsx +++ b/docs/data/material/components/toggle-button/demos/sizes/ToggleButtonSizes.tsx @@ -40,6 +40,7 @@ export default function ToggleButtonSizes() { return ( + {/* @focus-start */} {children} @@ -49,6 +50,7 @@ export default function ToggleButtonSizes() { {children} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/toggle-button/demos/sizes/client.ts b/docs/data/material/components/toggle-button/demos/sizes/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/sizes/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/toggle-button/demos/sizes/index.ts b/docs/data/material/components/toggle-button/demos/sizes/index.ts new file mode 100644 index 00000000000000..78001d3fe7ce80 --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/sizes/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ToggleButtonSizes from './ToggleButtonSizes'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ToggleButtonSizes, { ClientProvider }); diff --git a/docs/data/material/components/toggle-button/StandaloneToggleButton.tsx b/docs/data/material/components/toggle-button/demos/standalone/StandaloneToggleButton.tsx similarity index 90% rename from docs/data/material/components/toggle-button/StandaloneToggleButton.tsx rename to docs/data/material/components/toggle-button/demos/standalone/StandaloneToggleButton.tsx index ab6f99ffd379ef..253a3170f89393 100644 --- a/docs/data/material/components/toggle-button/StandaloneToggleButton.tsx +++ b/docs/data/material/components/toggle-button/demos/standalone/StandaloneToggleButton.tsx @@ -6,6 +6,7 @@ export default function StandaloneToggleButton() { const [selected, setSelected] = React.useState(false); return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/toggle-button/demos/standalone/client.ts b/docs/data/material/components/toggle-button/demos/standalone/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/standalone/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/toggle-button/demos/standalone/index.ts b/docs/data/material/components/toggle-button/demos/standalone/index.ts new file mode 100644 index 00000000000000..4888ab324cc354 --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/standalone/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StandaloneToggleButton from './StandaloneToggleButton'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StandaloneToggleButton, { ClientProvider }); diff --git a/docs/data/material/components/toggle-button/ToggleButtons.tsx b/docs/data/material/components/toggle-button/demos/toggle-buttons/ToggleButtons.tsx similarity index 96% rename from docs/data/material/components/toggle-button/ToggleButtons.tsx rename to docs/data/material/components/toggle-button/demos/toggle-buttons/ToggleButtons.tsx index 065bca2a86b9cf..29d57d015ba73c 100644 --- a/docs/data/material/components/toggle-button/ToggleButtons.tsx +++ b/docs/data/material/components/toggle-button/demos/toggle-buttons/ToggleButtons.tsx @@ -7,6 +7,7 @@ import ToggleButton from '@mui/material/ToggleButton'; import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; export default function ToggleButtons() { + // @focus-start @padding 1 const [alignment, setAlignment] = React.useState('left'); const handleAlignment = ( @@ -37,4 +38,5 @@ export default function ToggleButtons() { ); + // @focus-end } diff --git a/docs/data/material/components/toggle-button/demos/toggle-buttons/client.ts b/docs/data/material/components/toggle-button/demos/toggle-buttons/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/toggle-buttons/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/toggle-button/demos/toggle-buttons/index.ts b/docs/data/material/components/toggle-button/demos/toggle-buttons/index.ts new file mode 100644 index 00000000000000..2a33a40e2aed86 --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/toggle-buttons/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ToggleButtons from './ToggleButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ToggleButtons, { ClientProvider }); diff --git a/docs/data/material/components/toggle-button/VerticalSpacingToggleButton.tsx b/docs/data/material/components/toggle-button/demos/vertical-spacing/VerticalSpacingToggleButton.tsx similarity index 98% rename from docs/data/material/components/toggle-button/VerticalSpacingToggleButton.tsx rename to docs/data/material/components/toggle-button/demos/vertical-spacing/VerticalSpacingToggleButton.tsx index d8f7fd31356fc4..a98b101e404c2a 100644 --- a/docs/data/material/components/toggle-button/VerticalSpacingToggleButton.tsx +++ b/docs/data/material/components/toggle-button/demos/vertical-spacing/VerticalSpacingToggleButton.tsx @@ -29,6 +29,7 @@ const StyledToggleButtonGroup = styled(ToggleButtonGroup)(({ theme }) => ({ })); export default function VerticalSpacingToggleButton() { + // @focus-start @padding 1 const [alignment, setAlignment] = React.useState('left'); const handleAlignment = ( @@ -60,4 +61,5 @@ export default function VerticalSpacingToggleButton() { ); + // @focus-end } diff --git a/docs/data/material/components/toggle-button/demos/vertical-spacing/client.ts b/docs/data/material/components/toggle-button/demos/vertical-spacing/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/vertical-spacing/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/toggle-button/demos/vertical-spacing/index.ts b/docs/data/material/components/toggle-button/demos/vertical-spacing/index.ts new file mode 100644 index 00000000000000..2343b87165983d --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/vertical-spacing/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VerticalSpacingToggleButton from './VerticalSpacingToggleButton'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VerticalSpacingToggleButton, { ClientProvider }); diff --git a/docs/data/material/components/toggle-button/VerticalToggleButtons.tsx b/docs/data/material/components/toggle-button/demos/vertical/VerticalToggleButtons.tsx similarity index 95% rename from docs/data/material/components/toggle-button/VerticalToggleButtons.tsx rename to docs/data/material/components/toggle-button/demos/vertical/VerticalToggleButtons.tsx index 00b2b6e4b332bf..9a8407896c8e8b 100644 --- a/docs/data/material/components/toggle-button/VerticalToggleButtons.tsx +++ b/docs/data/material/components/toggle-button/demos/vertical/VerticalToggleButtons.tsx @@ -13,6 +13,7 @@ export default function VerticalToggleButtons() { }; return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/toggle-button/demos/vertical/client.ts b/docs/data/material/components/toggle-button/demos/vertical/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/vertical/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/toggle-button/demos/vertical/index.ts b/docs/data/material/components/toggle-button/demos/vertical/index.ts new file mode 100644 index 00000000000000..080a6b31979791 --- /dev/null +++ b/docs/data/material/components/toggle-button/demos/vertical/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VerticalToggleButtons from './VerticalToggleButtons'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VerticalToggleButtons, { ClientProvider }); diff --git a/docs/data/material/components/toggle-button/toggle-button.md b/docs/data/material/components/toggle-button/toggle-button.md index f923862839cb76..ca03b36d93b7e0 100644 --- a/docs/data/material/components/toggle-button/toggle-button.md +++ b/docs/data/material/components/toggle-button/toggle-button.md @@ -25,29 +25,29 @@ In this example, text justification toggle buttons present options for left, cen **Note**: Exclusive selection does not enforce that a button must be active. For that effect see [enforce value set](#enforce-value-set). -{{"demo": "ToggleButtons.js"}} +{{"component": "file://./demos/toggle-buttons/index.ts"}} ## Multiple selection Multiple selection allows for logically-grouped options, like bold, italic, and underline, to have multiple options selected. -{{"demo": "ToggleButtonsMultiple.js"}} +{{"component": "file://./demos/multiple/index.ts"}} ## Size For larger or smaller buttons, use the `size` prop. -{{"demo": "ToggleButtonSizes.js"}} +{{"component": "file://./demos/sizes/index.ts"}} ## Color -{{"demo": "ColorToggleButton.js"}} +{{"component": "file://./demos/color/index.ts"}} ## Vertical buttons The buttons can be stacked vertically with the `orientation` prop set to "vertical". -{{"demo": "VerticalToggleButtons.js"}} +{{"component": "file://./demos/vertical/index.ts"}} ## Enforce value set @@ -67,18 +67,18 @@ const handleDevices = (event, newDevices) => { }; ``` -{{"demo": "ToggleButtonNotEmpty.js"}} +{{"component": "file://./demos/not-empty/index.ts"}} ## Standalone toggle button -{{"demo": "StandaloneToggleButton.js"}} +{{"component": "file://./demos/standalone/index.ts"}} ## Customization Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedDividers.js", "bg": true}} +{{"component": "file://./demos/customized-dividers/index.ts", "bg": true}} ### Spacing @@ -86,11 +86,11 @@ The demos below show how to adjust spacing between toggle buttons in horizontal #### Horizontal Spacing -{{"demo": "HorizontalSpacingToggleButton.js"}} +{{"component": "file://./demos/horizontal-spacing/index.ts"}} #### Vertical Spacing -{{"demo": "VerticalSpacingToggleButton.js"}} +{{"component": "file://./demos/vertical-spacing/index.ts"}} ## Accessibility diff --git a/docs/data/material/components/tooltips/AccessibilityTooltips.js b/docs/data/material/components/tooltips/AccessibilityTooltips.js deleted file mode 100644 index 8527b1959edfc0..00000000000000 --- a/docs/data/material/components/tooltips/AccessibilityTooltips.js +++ /dev/null @@ -1,19 +0,0 @@ -import DeleteIcon from '@mui/icons-material/Delete'; -import Button from '@mui/material/Button'; -import IconButton from '@mui/material/IconButton'; -import Tooltip from '@mui/material/Tooltip'; - -export default function AccessibilityTooltips() { - return ( -
    - - - - - - - - -
    - ); -} diff --git a/docs/data/material/components/tooltips/AccessibilityTooltips.tsx.preview b/docs/data/material/components/tooltips/AccessibilityTooltips.tsx.preview deleted file mode 100644 index 5ff06ac9abf03f..00000000000000 --- a/docs/data/material/components/tooltips/AccessibilityTooltips.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/tooltips/AnchorElTooltips.js b/docs/data/material/components/tooltips/AnchorElTooltips.js deleted file mode 100644 index fee0a65a7925f7..00000000000000 --- a/docs/data/material/components/tooltips/AnchorElTooltips.js +++ /dev/null @@ -1,52 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Tooltip from '@mui/material/Tooltip'; - -export default function AnchorElTooltips() { - const positionRef = React.useRef({ - x: 0, - y: 0, - }); - const popperRef = React.useRef(null); - const areaRef = React.useRef(null); - - const handleMouseMove = (event) => { - positionRef.current = { x: event.clientX, y: event.clientY }; - - if (popperRef.current != null) { - popperRef.current.update(); - } - }; - - return ( - { - return new DOMRect( - positionRef.current.x, - areaRef.current.getBoundingClientRect().y, - 0, - 0, - ); - }, - }, - }, - }} - > - - Hover - - - ); -} diff --git a/docs/data/material/components/tooltips/ArrowTooltips.js b/docs/data/material/components/tooltips/ArrowTooltips.js deleted file mode 100644 index 7dea8baa62af5b..00000000000000 --- a/docs/data/material/components/tooltips/ArrowTooltips.js +++ /dev/null @@ -1,10 +0,0 @@ -import Button from '@mui/material/Button'; -import Tooltip from '@mui/material/Tooltip'; - -export default function ArrowTooltips() { - return ( - - - - ); -} diff --git a/docs/data/material/components/tooltips/ArrowTooltips.tsx.preview b/docs/data/material/components/tooltips/ArrowTooltips.tsx.preview deleted file mode 100644 index b9830f9db54447..00000000000000 --- a/docs/data/material/components/tooltips/ArrowTooltips.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/tooltips/BasicTooltip.js b/docs/data/material/components/tooltips/BasicTooltip.js deleted file mode 100644 index fea6036c38e34a..00000000000000 --- a/docs/data/material/components/tooltips/BasicTooltip.js +++ /dev/null @@ -1,13 +0,0 @@ -import DeleteIcon from '@mui/icons-material/Delete'; -import IconButton from '@mui/material/IconButton'; -import Tooltip from '@mui/material/Tooltip'; - -export default function BasicTooltip() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/tooltips/BasicTooltip.tsx.preview b/docs/data/material/components/tooltips/BasicTooltip.tsx.preview deleted file mode 100644 index 1517d7939db2ff..00000000000000 --- a/docs/data/material/components/tooltips/BasicTooltip.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/tooltips/ControlledTooltips.js b/docs/data/material/components/tooltips/ControlledTooltips.js deleted file mode 100644 index 3b2fee878fbecd..00000000000000 --- a/docs/data/material/components/tooltips/ControlledTooltips.js +++ /dev/null @@ -1,27 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Tooltip from '@mui/material/Tooltip'; - -export default function ControlledTooltips() { - const [open, setOpen] = React.useState(false); - - const handleClose = () => { - setOpen(false); - }; - - const handleOpen = () => { - setOpen(true); - }; - - return ( - - - - ); -} diff --git a/docs/data/material/components/tooltips/ControlledTooltips.tsx.preview b/docs/data/material/components/tooltips/ControlledTooltips.tsx.preview deleted file mode 100644 index 8136b3df529900..00000000000000 --- a/docs/data/material/components/tooltips/ControlledTooltips.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/tooltips/CustomizedTooltips.js b/docs/data/material/components/tooltips/CustomizedTooltips.js deleted file mode 100644 index 9ff2739954dc34..00000000000000 --- a/docs/data/material/components/tooltips/CustomizedTooltips.js +++ /dev/null @@ -1,69 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import Button from '@mui/material/Button'; -import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; -import Typography from '@mui/material/Typography'; - -const LightTooltip = styled(({ className, ...props }) => ( - -))(({ theme }) => ({ - [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: theme.palette.common.white, - color: 'rgba(0, 0, 0, 0.87)', - boxShadow: theme.shadows[1], - fontSize: 11, - }, -})); - -const BootstrapTooltip = styled(({ className, ...props }) => ( - -))(({ theme }) => ({ - [`& .${tooltipClasses.arrow}`]: { - color: theme.palette.common.black, - }, - [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: theme.palette.common.black, - }, -})); - -const HtmlTooltip = styled(({ className, ...props }) => ( - -))(({ theme }) => ({ - [`& .${tooltipClasses.tooltip}`]: { - backgroundColor: '#f5f5f9', - color: 'rgba(0, 0, 0, 0.87)', - maxWidth: 220, - fontSize: theme.typography.pxToRem(12), - border: '1px solid #dadde9', - }, -})); - -export default function CustomizedTooltips() { - return ( -
    - - - - - - - - - Tooltip with HTML - - {"And here's"} {'some'} {'amazing content'}.{' '} - {"It's very engaging. Right?"} - - } - > - - -
    - ); -} diff --git a/docs/data/material/components/tooltips/DelayTooltips.js b/docs/data/material/components/tooltips/DelayTooltips.js deleted file mode 100644 index a0b109338a067b..00000000000000 --- a/docs/data/material/components/tooltips/DelayTooltips.js +++ /dev/null @@ -1,10 +0,0 @@ -import Button from '@mui/material/Button'; -import Tooltip from '@mui/material/Tooltip'; - -export default function DelayTooltips() { - return ( - - - - ); -} diff --git a/docs/data/material/components/tooltips/DelayTooltips.tsx.preview b/docs/data/material/components/tooltips/DelayTooltips.tsx.preview deleted file mode 100644 index 20661a0c4bfeb7..00000000000000 --- a/docs/data/material/components/tooltips/DelayTooltips.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/tooltips/DisabledTooltips.js b/docs/data/material/components/tooltips/DisabledTooltips.js deleted file mode 100644 index a00764ef2a437e..00000000000000 --- a/docs/data/material/components/tooltips/DisabledTooltips.js +++ /dev/null @@ -1,12 +0,0 @@ -import Button from '@mui/material/Button'; -import Tooltip from '@mui/material/Tooltip'; - -export default function DisabledTooltips() { - return ( - - - - - - ); -} diff --git a/docs/data/material/components/tooltips/DisabledTooltips.tsx.preview b/docs/data/material/components/tooltips/DisabledTooltips.tsx.preview deleted file mode 100644 index f83193be661f3d..00000000000000 --- a/docs/data/material/components/tooltips/DisabledTooltips.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - - - - \ No newline at end of file diff --git a/docs/data/material/components/tooltips/FollowCursorTooltips.js b/docs/data/material/components/tooltips/FollowCursorTooltips.js deleted file mode 100644 index 4fa8046377dbff..00000000000000 --- a/docs/data/material/components/tooltips/FollowCursorTooltips.js +++ /dev/null @@ -1,12 +0,0 @@ -import Box from '@mui/material/Box'; -import Tooltip from '@mui/material/Tooltip'; - -export default function FollowCursorTooltips() { - return ( - - - Disabled Action - - - ); -} diff --git a/docs/data/material/components/tooltips/FollowCursorTooltips.tsx.preview b/docs/data/material/components/tooltips/FollowCursorTooltips.tsx.preview deleted file mode 100644 index 8f1153073eda3e..00000000000000 --- a/docs/data/material/components/tooltips/FollowCursorTooltips.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - - Disabled Action - - \ No newline at end of file diff --git a/docs/data/material/components/tooltips/NonInteractiveTooltips.js b/docs/data/material/components/tooltips/NonInteractiveTooltips.js deleted file mode 100644 index 461de1d6c4d40a..00000000000000 --- a/docs/data/material/components/tooltips/NonInteractiveTooltips.js +++ /dev/null @@ -1,10 +0,0 @@ -import Button from '@mui/material/Button'; -import Tooltip from '@mui/material/Tooltip'; - -export default function NonInteractiveTooltips() { - return ( - - - - ); -} diff --git a/docs/data/material/components/tooltips/NonInteractiveTooltips.tsx.preview b/docs/data/material/components/tooltips/NonInteractiveTooltips.tsx.preview deleted file mode 100644 index 70a4b79ad75636..00000000000000 --- a/docs/data/material/components/tooltips/NonInteractiveTooltips.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/tooltips/PositionedTooltips.js b/docs/data/material/components/tooltips/PositionedTooltips.js deleted file mode 100644 index 6bd6e80525109b..00000000000000 --- a/docs/data/material/components/tooltips/PositionedTooltips.js +++ /dev/null @@ -1,57 +0,0 @@ -import Box from '@mui/material/Box'; -import Stack from '@mui/material/Stack'; -import Button from '@mui/material/Button'; -import Tooltip from '@mui/material/Tooltip'; - -export default function PositionedTooltips() { - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -} diff --git a/docs/data/material/components/tooltips/TooltipMargin.js b/docs/data/material/components/tooltips/TooltipMargin.js deleted file mode 100644 index 080ce8cf3e0b78..00000000000000 --- a/docs/data/material/components/tooltips/TooltipMargin.js +++ /dev/null @@ -1,35 +0,0 @@ -import Button from '@mui/material/Button'; -import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; - -export default function TooltipMargin() { - return ( - - - - ); -} diff --git a/docs/data/material/components/tooltips/TooltipOffset.js b/docs/data/material/components/tooltips/TooltipOffset.js deleted file mode 100644 index 948426086fe660..00000000000000 --- a/docs/data/material/components/tooltips/TooltipOffset.js +++ /dev/null @@ -1,25 +0,0 @@ -import Button from '@mui/material/Button'; -import Tooltip from '@mui/material/Tooltip'; - -export default function TooltipOffset() { - return ( - - - - ); -} diff --git a/docs/data/material/components/tooltips/TransitionsTooltips.js b/docs/data/material/components/tooltips/TransitionsTooltips.js deleted file mode 100644 index c28111d77296e5..00000000000000 --- a/docs/data/material/components/tooltips/TransitionsTooltips.js +++ /dev/null @@ -1,35 +0,0 @@ -import Button from '@mui/material/Button'; -import Tooltip from '@mui/material/Tooltip'; -import Fade from '@mui/material/Fade'; -import Zoom from '@mui/material/Zoom'; - -export default function TransitionsTooltips() { - return ( -
    - - - - - - - - - -
    - ); -} diff --git a/docs/data/material/components/tooltips/TriggersTooltips.js b/docs/data/material/components/tooltips/TriggersTooltips.js deleted file mode 100644 index 8415fd79d4fb29..00000000000000 --- a/docs/data/material/components/tooltips/TriggersTooltips.js +++ /dev/null @@ -1,66 +0,0 @@ -import * as React from 'react'; -import Grid from '@mui/material/Grid'; -import Button from '@mui/material/Button'; -import Tooltip from '@mui/material/Tooltip'; -import ClickAwayListener from '@mui/material/ClickAwayListener'; - -export default function TriggersTooltips() { - const [open, setOpen] = React.useState(false); - - const handleTooltipClose = () => { - setOpen(false); - }; - - const handleTooltipOpen = () => { - setOpen(true); - }; - - return ( -
    - - - - - - - - - - - - - - - - - - -
    - - - -
    -     -     -     -
    - ); -} diff --git a/docs/data/material/components/tooltips/VariableWidth.js b/docs/data/material/components/tooltips/VariableWidth.js deleted file mode 100644 index 8705920c069b67..00000000000000 --- a/docs/data/material/components/tooltips/VariableWidth.js +++ /dev/null @@ -1,41 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Button from '@mui/material/Button'; -import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; - -const CustomWidthTooltip = styled(({ className, ...props }) => ( - -))({ - [`& .${tooltipClasses.tooltip}`]: { - maxWidth: 500, - }, -}); - -const NoMaxWidthTooltip = styled(({ className, ...props }) => ( - -))({ - [`& .${tooltipClasses.tooltip}`]: { - maxWidth: 'none', - }, -}); - -const longText = ` -Aliquam eget finibus ante, non facilisis lectus. Sed vitae dignissim est, vel aliquam tellus. -Praesent non nunc mollis, fermentum neque at, semper arcu. -Nullam eget est sed sem iaculis gravida eget vitae justo. -`; - -export default function VariableWidth() { - return ( -
    - - - - - - - - - -
    - ); -} diff --git a/docs/data/material/components/tooltips/VariableWidth.tsx.preview b/docs/data/material/components/tooltips/VariableWidth.tsx.preview deleted file mode 100644 index 429c676a4f46ac..00000000000000 --- a/docs/data/material/components/tooltips/VariableWidth.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/docs/data/material/components/tooltips/AccessibilityTooltips.tsx b/docs/data/material/components/tooltips/demos/accessibility/AccessibilityTooltips.tsx similarity index 90% rename from docs/data/material/components/tooltips/AccessibilityTooltips.tsx rename to docs/data/material/components/tooltips/demos/accessibility/AccessibilityTooltips.tsx index 8527b1959edfc0..b8b1b6eb1eb208 100644 --- a/docs/data/material/components/tooltips/AccessibilityTooltips.tsx +++ b/docs/data/material/components/tooltips/demos/accessibility/AccessibilityTooltips.tsx @@ -6,6 +6,7 @@ import Tooltip from '@mui/material/Tooltip'; export default function AccessibilityTooltips() { return (
    + {/* @focus-start */} @@ -14,6 +15,7 @@ export default function AccessibilityTooltips() { + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/tooltips/demos/accessibility/client.ts b/docs/data/material/components/tooltips/demos/accessibility/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/accessibility/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/accessibility/index.ts b/docs/data/material/components/tooltips/demos/accessibility/index.ts new file mode 100644 index 00000000000000..5f5d1eaff1236d --- /dev/null +++ b/docs/data/material/components/tooltips/demos/accessibility/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AccessibilityTooltips from './AccessibilityTooltips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AccessibilityTooltips, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/AnchorElTooltips.tsx b/docs/data/material/components/tooltips/demos/anchor-el/AnchorElTooltips.tsx similarity index 92% rename from docs/data/material/components/tooltips/AnchorElTooltips.tsx rename to docs/data/material/components/tooltips/demos/anchor-el/AnchorElTooltips.tsx index 522d364b63dde7..c9d7ef0f001cfc 100644 --- a/docs/data/material/components/tooltips/AnchorElTooltips.tsx +++ b/docs/data/material/components/tooltips/demos/anchor-el/AnchorElTooltips.tsx @@ -1,9 +1,10 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Tooltip from '@mui/material/Tooltip'; -import { Instance } from '@popperjs/core'; +import type { Instance } from '@popperjs/core'; export default function AnchorElTooltips() { + // @focus-start @padding 1 const positionRef = React.useRef<{ x: number; y: number }>({ x: 0, y: 0, @@ -50,4 +51,5 @@ export default function AnchorElTooltips() {     ); + // @focus-end } diff --git a/docs/data/material/components/tooltips/demos/anchor-el/client.ts b/docs/data/material/components/tooltips/demos/anchor-el/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/anchor-el/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/anchor-el/index.ts b/docs/data/material/components/tooltips/demos/anchor-el/index.ts new file mode 100644 index 00000000000000..22d76d643efd53 --- /dev/null +++ b/docs/data/material/components/tooltips/demos/anchor-el/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AnchorElTooltips from './AnchorElTooltips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AnchorElTooltips, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/ArrowTooltips.tsx b/docs/data/material/components/tooltips/demos/arrow/ArrowTooltips.tsx similarity index 82% rename from docs/data/material/components/tooltips/ArrowTooltips.tsx rename to docs/data/material/components/tooltips/demos/arrow/ArrowTooltips.tsx index 7dea8baa62af5b..ad45838751749d 100644 --- a/docs/data/material/components/tooltips/ArrowTooltips.tsx +++ b/docs/data/material/components/tooltips/demos/arrow/ArrowTooltips.tsx @@ -3,8 +3,10 @@ import Tooltip from '@mui/material/Tooltip'; export default function ArrowTooltips() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/tooltips/demos/arrow/client.ts b/docs/data/material/components/tooltips/demos/arrow/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/arrow/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/arrow/index.ts b/docs/data/material/components/tooltips/demos/arrow/index.ts new file mode 100644 index 00000000000000..317f4f13075254 --- /dev/null +++ b/docs/data/material/components/tooltips/demos/arrow/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ArrowTooltips from './ArrowTooltips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ArrowTooltips, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/BasicTooltip.tsx b/docs/data/material/components/tooltips/demos/basic/BasicTooltip.tsx similarity index 86% rename from docs/data/material/components/tooltips/BasicTooltip.tsx rename to docs/data/material/components/tooltips/demos/basic/BasicTooltip.tsx index fea6036c38e34a..813ae3fed61c65 100644 --- a/docs/data/material/components/tooltips/BasicTooltip.tsx +++ b/docs/data/material/components/tooltips/demos/basic/BasicTooltip.tsx @@ -4,10 +4,12 @@ import Tooltip from '@mui/material/Tooltip'; export default function BasicTooltip() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/tooltips/demos/basic/client.ts b/docs/data/material/components/tooltips/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/basic/index.ts b/docs/data/material/components/tooltips/demos/basic/index.ts new file mode 100644 index 00000000000000..fcedda30b74c67 --- /dev/null +++ b/docs/data/material/components/tooltips/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicTooltip from './BasicTooltip'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicTooltip, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/ControlledTooltips.tsx b/docs/data/material/components/tooltips/demos/controlled/ControlledTooltips.tsx similarity index 91% rename from docs/data/material/components/tooltips/ControlledTooltips.tsx rename to docs/data/material/components/tooltips/demos/controlled/ControlledTooltips.tsx index 3b2fee878fbecd..8532577905a1da 100644 --- a/docs/data/material/components/tooltips/ControlledTooltips.tsx +++ b/docs/data/material/components/tooltips/demos/controlled/ControlledTooltips.tsx @@ -14,6 +14,7 @@ export default function ControlledTooltips() { }; return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/tooltips/demos/controlled/client.ts b/docs/data/material/components/tooltips/demos/controlled/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/controlled/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/controlled/index.ts b/docs/data/material/components/tooltips/demos/controlled/index.ts new file mode 100644 index 00000000000000..4e001deae430d7 --- /dev/null +++ b/docs/data/material/components/tooltips/demos/controlled/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ControlledTooltips from './ControlledTooltips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ControlledTooltips, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/CustomizedTooltips.tsx b/docs/data/material/components/tooltips/demos/customized/CustomizedTooltips.tsx similarity index 91% rename from docs/data/material/components/tooltips/CustomizedTooltips.tsx rename to docs/data/material/components/tooltips/demos/customized/CustomizedTooltips.tsx index 082af52991e22a..293675c711517f 100644 --- a/docs/data/material/components/tooltips/CustomizedTooltips.tsx +++ b/docs/data/material/components/tooltips/demos/customized/CustomizedTooltips.tsx @@ -1,7 +1,8 @@ import * as React from 'react'; import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; -import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip'; +import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; +import type { TooltipProps } from '@mui/material/Tooltip'; import Typography from '@mui/material/Typography'; const LightTooltip = styled(({ className, ...props }: TooltipProps) => ( @@ -41,6 +42,7 @@ const HtmlTooltip = styled(({ className, ...props }: TooltipProps) => ( export default function CustomizedTooltips() { return (
    + {/* @focus-start */} @@ -64,6 +66,7 @@ export default function CustomizedTooltips() { > + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/tooltips/demos/customized/client.ts b/docs/data/material/components/tooltips/demos/customized/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/customized/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/customized/index.ts b/docs/data/material/components/tooltips/demos/customized/index.ts new file mode 100644 index 00000000000000..3a26cd88bb5b4a --- /dev/null +++ b/docs/data/material/components/tooltips/demos/customized/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CustomizedTooltips from './CustomizedTooltips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CustomizedTooltips, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/DelayTooltips.tsx b/docs/data/material/components/tooltips/demos/delay/DelayTooltips.tsx similarity index 84% rename from docs/data/material/components/tooltips/DelayTooltips.tsx rename to docs/data/material/components/tooltips/demos/delay/DelayTooltips.tsx index a0b109338a067b..5412fad98c3a65 100644 --- a/docs/data/material/components/tooltips/DelayTooltips.tsx +++ b/docs/data/material/components/tooltips/demos/delay/DelayTooltips.tsx @@ -3,8 +3,10 @@ import Tooltip from '@mui/material/Tooltip'; export default function DelayTooltips() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/tooltips/demos/delay/client.ts b/docs/data/material/components/tooltips/demos/delay/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/delay/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/delay/index.ts b/docs/data/material/components/tooltips/demos/delay/index.ts new file mode 100644 index 00000000000000..dbac8b9be5f3ad --- /dev/null +++ b/docs/data/material/components/tooltips/demos/delay/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DelayTooltips from './DelayTooltips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DelayTooltips, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/DisabledTooltips.tsx b/docs/data/material/components/tooltips/demos/disabled/DisabledTooltips.tsx similarity index 86% rename from docs/data/material/components/tooltips/DisabledTooltips.tsx rename to docs/data/material/components/tooltips/demos/disabled/DisabledTooltips.tsx index a00764ef2a437e..5528284181b60e 100644 --- a/docs/data/material/components/tooltips/DisabledTooltips.tsx +++ b/docs/data/material/components/tooltips/demos/disabled/DisabledTooltips.tsx @@ -3,10 +3,12 @@ import Tooltip from '@mui/material/Tooltip'; export default function DisabledTooltips() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/tooltips/demos/disabled/client.ts b/docs/data/material/components/tooltips/demos/disabled/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/disabled/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/disabled/index.ts b/docs/data/material/components/tooltips/demos/disabled/index.ts new file mode 100644 index 00000000000000..d7f2838aee2b51 --- /dev/null +++ b/docs/data/material/components/tooltips/demos/disabled/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DisabledTooltips from './DisabledTooltips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DisabledTooltips, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/FollowCursorTooltips.tsx b/docs/data/material/components/tooltips/demos/follow-cursor/FollowCursorTooltips.tsx similarity index 88% rename from docs/data/material/components/tooltips/FollowCursorTooltips.tsx rename to docs/data/material/components/tooltips/demos/follow-cursor/FollowCursorTooltips.tsx index 4fa8046377dbff..bffe9de28c984f 100644 --- a/docs/data/material/components/tooltips/FollowCursorTooltips.tsx +++ b/docs/data/material/components/tooltips/demos/follow-cursor/FollowCursorTooltips.tsx @@ -3,10 +3,12 @@ import Tooltip from '@mui/material/Tooltip'; export default function FollowCursorTooltips() { return ( + // @focus-start @padding 2 Disabled Action + // @focus-end ); } diff --git a/docs/data/material/components/tooltips/demos/follow-cursor/client.ts b/docs/data/material/components/tooltips/demos/follow-cursor/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/follow-cursor/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/follow-cursor/index.ts b/docs/data/material/components/tooltips/demos/follow-cursor/index.ts new file mode 100644 index 00000000000000..065d0ab8c62512 --- /dev/null +++ b/docs/data/material/components/tooltips/demos/follow-cursor/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import FollowCursorTooltips from './FollowCursorTooltips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, FollowCursorTooltips, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/TooltipMargin.tsx b/docs/data/material/components/tooltips/demos/margin/TooltipMargin.tsx similarity index 95% rename from docs/data/material/components/tooltips/TooltipMargin.tsx rename to docs/data/material/components/tooltips/demos/margin/TooltipMargin.tsx index 080ce8cf3e0b78..85d67a328ca739 100644 --- a/docs/data/material/components/tooltips/TooltipMargin.tsx +++ b/docs/data/material/components/tooltips/demos/margin/TooltipMargin.tsx @@ -3,6 +3,7 @@ import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; export default function TooltipMargin() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/tooltips/demos/margin/client.ts b/docs/data/material/components/tooltips/demos/margin/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/margin/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/margin/index.ts b/docs/data/material/components/tooltips/demos/margin/index.ts new file mode 100644 index 00000000000000..ca0393b82d085d --- /dev/null +++ b/docs/data/material/components/tooltips/demos/margin/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TooltipMargin from './TooltipMargin'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TooltipMargin, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/NonInteractiveTooltips.tsx b/docs/data/material/components/tooltips/demos/non-interactive/NonInteractiveTooltips.tsx similarity index 84% rename from docs/data/material/components/tooltips/NonInteractiveTooltips.tsx rename to docs/data/material/components/tooltips/demos/non-interactive/NonInteractiveTooltips.tsx index 461de1d6c4d40a..aa5289fd71d4dd 100644 --- a/docs/data/material/components/tooltips/NonInteractiveTooltips.tsx +++ b/docs/data/material/components/tooltips/demos/non-interactive/NonInteractiveTooltips.tsx @@ -3,8 +3,10 @@ import Tooltip from '@mui/material/Tooltip'; export default function NonInteractiveTooltips() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/tooltips/demos/non-interactive/client.ts b/docs/data/material/components/tooltips/demos/non-interactive/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/non-interactive/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/non-interactive/index.ts b/docs/data/material/components/tooltips/demos/non-interactive/index.ts new file mode 100644 index 00000000000000..9883b3b3f1b741 --- /dev/null +++ b/docs/data/material/components/tooltips/demos/non-interactive/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import NonInteractiveTooltips from './NonInteractiveTooltips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, NonInteractiveTooltips, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/TooltipOffset.tsx b/docs/data/material/components/tooltips/demos/offset/TooltipOffset.tsx similarity index 90% rename from docs/data/material/components/tooltips/TooltipOffset.tsx rename to docs/data/material/components/tooltips/demos/offset/TooltipOffset.tsx index 948426086fe660..31fc6ac25d5c59 100644 --- a/docs/data/material/components/tooltips/TooltipOffset.tsx +++ b/docs/data/material/components/tooltips/demos/offset/TooltipOffset.tsx @@ -3,6 +3,7 @@ import Tooltip from '@mui/material/Tooltip'; export default function TooltipOffset() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/tooltips/demos/offset/client.ts b/docs/data/material/components/tooltips/demos/offset/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/offset/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/offset/index.ts b/docs/data/material/components/tooltips/demos/offset/index.ts new file mode 100644 index 00000000000000..e8c07eb89c3db7 --- /dev/null +++ b/docs/data/material/components/tooltips/demos/offset/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TooltipOffset from './TooltipOffset'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TooltipOffset, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/PositionedTooltips.tsx b/docs/data/material/components/tooltips/demos/positioned/PositionedTooltips.tsx similarity index 97% rename from docs/data/material/components/tooltips/PositionedTooltips.tsx rename to docs/data/material/components/tooltips/demos/positioned/PositionedTooltips.tsx index 6bd6e80525109b..a4c26a0db72233 100644 --- a/docs/data/material/components/tooltips/PositionedTooltips.tsx +++ b/docs/data/material/components/tooltips/demos/positioned/PositionedTooltips.tsx @@ -6,6 +6,7 @@ import Tooltip from '@mui/material/Tooltip'; export default function PositionedTooltips() { return ( + {/* @focus-start */} @@ -52,6 +53,7 @@ export default function PositionedTooltips() { + {/* @focus-end */} ); } diff --git a/docs/data/material/components/tooltips/demos/positioned/client.ts b/docs/data/material/components/tooltips/demos/positioned/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/positioned/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/positioned/index.ts b/docs/data/material/components/tooltips/demos/positioned/index.ts new file mode 100644 index 00000000000000..c06c64c22a727c --- /dev/null +++ b/docs/data/material/components/tooltips/demos/positioned/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import PositionedTooltips from './PositionedTooltips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, PositionedTooltips, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/TransitionsTooltips.tsx b/docs/data/material/components/tooltips/demos/transitions/TransitionsTooltips.tsx similarity index 93% rename from docs/data/material/components/tooltips/TransitionsTooltips.tsx rename to docs/data/material/components/tooltips/demos/transitions/TransitionsTooltips.tsx index c28111d77296e5..d990ead5bf2b34 100644 --- a/docs/data/material/components/tooltips/TransitionsTooltips.tsx +++ b/docs/data/material/components/tooltips/demos/transitions/TransitionsTooltips.tsx @@ -6,6 +6,7 @@ import Zoom from '@mui/material/Zoom'; export default function TransitionsTooltips() { return (
    + {/* @focus-start */} @@ -30,6 +31,7 @@ export default function TransitionsTooltips() { > + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/tooltips/demos/transitions/client.ts b/docs/data/material/components/tooltips/demos/transitions/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/transitions/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/transitions/index.ts b/docs/data/material/components/tooltips/demos/transitions/index.ts new file mode 100644 index 00000000000000..350247354e71a5 --- /dev/null +++ b/docs/data/material/components/tooltips/demos/transitions/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TransitionsTooltips from './TransitionsTooltips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TransitionsTooltips, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/TriggersTooltips.tsx b/docs/data/material/components/tooltips/demos/triggers/TriggersTooltips.tsx similarity index 97% rename from docs/data/material/components/tooltips/TriggersTooltips.tsx rename to docs/data/material/components/tooltips/demos/triggers/TriggersTooltips.tsx index 8415fd79d4fb29..8a13f386a9665d 100644 --- a/docs/data/material/components/tooltips/TriggersTooltips.tsx +++ b/docs/data/material/components/tooltips/demos/triggers/TriggersTooltips.tsx @@ -5,6 +5,7 @@ import Tooltip from '@mui/material/Tooltip'; import ClickAwayListener from '@mui/material/ClickAwayListener'; export default function TriggersTooltips() { + // @focus-start @padding 1 const [open, setOpen] = React.useState(false); const handleTooltipClose = () => { @@ -63,4 +64,5 @@ export default function TriggersTooltips() { ); + // @focus-end } diff --git a/docs/data/material/components/tooltips/demos/triggers/client.ts b/docs/data/material/components/tooltips/demos/triggers/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/triggers/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/triggers/index.ts b/docs/data/material/components/tooltips/demos/triggers/index.ts new file mode 100644 index 00000000000000..9b789dfde5dee0 --- /dev/null +++ b/docs/data/material/components/tooltips/demos/triggers/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TriggersTooltips from './TriggersTooltips'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TriggersTooltips, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/VariableWidth.tsx b/docs/data/material/components/tooltips/demos/variable-width/VariableWidth.tsx similarity index 87% rename from docs/data/material/components/tooltips/VariableWidth.tsx rename to docs/data/material/components/tooltips/demos/variable-width/VariableWidth.tsx index 61f42777029f8c..2195cf13b21e73 100644 --- a/docs/data/material/components/tooltips/VariableWidth.tsx +++ b/docs/data/material/components/tooltips/demos/variable-width/VariableWidth.tsx @@ -1,6 +1,7 @@ import { styled } from '@mui/material/styles'; import Button from '@mui/material/Button'; -import Tooltip, { TooltipProps, tooltipClasses } from '@mui/material/Tooltip'; +import Tooltip, { tooltipClasses } from '@mui/material/Tooltip'; +import type { TooltipProps } from '@mui/material/Tooltip'; const CustomWidthTooltip = styled(({ className, ...props }: TooltipProps) => ( @@ -27,6 +28,7 @@ Nullam eget est sed sem iaculis gravida eget vitae justo. export default function VariableWidth() { return (
    + {/* @focus-start */} @@ -36,6 +38,7 @@ export default function VariableWidth() { + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/tooltips/demos/variable-width/client.ts b/docs/data/material/components/tooltips/demos/variable-width/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/tooltips/demos/variable-width/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/tooltips/demos/variable-width/index.ts b/docs/data/material/components/tooltips/demos/variable-width/index.ts new file mode 100644 index 00000000000000..a36e35cbe0f8e3 --- /dev/null +++ b/docs/data/material/components/tooltips/demos/variable-width/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import VariableWidth from './VariableWidth'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, VariableWidth, { ClientProvider }); diff --git a/docs/data/material/components/tooltips/tooltips.md b/docs/data/material/components/tooltips/tooltips.md index 42dc76cfee6928..d05a980b8d6ab8 100644 --- a/docs/data/material/components/tooltips/tooltips.md +++ b/docs/data/material/components/tooltips/tooltips.md @@ -18,7 +18,7 @@ When activated, Tooltips display a text label identifying an element, such as a ## Basic tooltip -{{"demo": "BasicTooltip.js"}} +{{"component": "file://./demos/basic/index.ts"}} ## Labels and descriptions @@ -36,37 +36,37 @@ In that case, the child would have no accessible name and the tooltip would viol If the trigger already has either visible text or an `aria-label`, use the tooltip as a description and pass the `describeChild` prop. Otherwise, you can use the default behavior and let the tooltip label the trigger. -{{"demo": "AccessibilityTooltips.js"}} +{{"component": "file://./demos/accessibility/index.ts"}} ## Positioned tooltips The `Tooltip` has 12 **placement** choices. They don't have directional arrows; instead, they rely on motion emanating from the source to convey direction. -{{"demo": "PositionedTooltips.js"}} +{{"component": "file://./demos/positioned/index.ts"}} ## Customization Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/material-ui/customization/how-to-customize/). -{{"demo": "CustomizedTooltips.js"}} +{{"component": "file://./demos/customized/index.ts"}} ## Arrow tooltips You can use the `arrow` prop to give your tooltip an arrow indicating which element it refers to. -{{"demo": "ArrowTooltips.js"}} +{{"component": "file://./demos/arrow/index.ts"}} ## Distance from anchor To adjust the distance between the tooltip and its anchor, you can use the `slotProps` prop to modify the [offset](https://popper.js.org/docs/v2/modifiers/offset/) of the popper. -{{"demo": "TooltipOffset.js"}} +{{"component": "file://./demos/offset/index.ts"}} Alternatively, you can use the `slotProps` prop to customize the margin of the popper. -{{"demo": "TooltipMargin.js"}} +{{"component": "file://./demos/margin/index.ts"}} ## Custom child element @@ -123,19 +123,19 @@ You can define the types of events that cause a tooltip to show. The touch action requires a long press due to the `enterTouchDelay` prop being set to `700`ms by default. -{{"demo": "TriggersTooltips.js"}} +{{"component": "file://./demos/triggers/index.ts"}} ## Controlled tooltips You can use the `open`, `onOpen` and `onClose` props to control the behavior of the tooltip. -{{"demo": "ControlledTooltips.js"}} +{{"component": "file://./demos/controlled/index.ts"}} ## Variable width The `Tooltip` wraps long text by default to make it readable. -{{"demo": "VariableWidth.js"}} +{{"component": "file://./demos/variable-width/index.ts"}} ## Interactive @@ -143,7 +143,7 @@ Tooltips are interactive by default (to pass [WCAG 2.2 Success Criterion 1.4.13] It won't close when the user hovers over the tooltip before the `leaveDelay` is expired. You can disable this behavior (thus failing the success criterion which is required to reach Level AA) by passing `disableInteractive`. -{{"demo": "NonInteractiveTooltips.js"}} +{{"component": "file://./demos/non-interactive/index.ts"}} ## Disabled elements @@ -153,7 +153,7 @@ By default disabled elements like ` - - - {customList('Chosen', right)} - - ); -} diff --git a/docs/data/material/components/transfer-list/TransferList.js b/docs/data/material/components/transfer-list/TransferList.js deleted file mode 100644 index d1a0ba7badc391..00000000000000 --- a/docs/data/material/components/transfer-list/TransferList.js +++ /dev/null @@ -1,145 +0,0 @@ -import * as React from 'react'; -import Grid from '@mui/material/Grid'; -import List from '@mui/material/List'; -import ListItemButton from '@mui/material/ListItemButton'; -import ListItemIcon from '@mui/material/ListItemIcon'; -import ListItemText from '@mui/material/ListItemText'; -import Checkbox from '@mui/material/Checkbox'; -import Button from '@mui/material/Button'; -import Paper from '@mui/material/Paper'; -import Stack from '@mui/material/Stack'; - -function not(a, b) { - return a.filter((value) => !b.includes(value)); -} - -function intersection(a, b) { - return a.filter((value) => b.includes(value)); -} - -export default function TransferList() { - const [checked, setChecked] = React.useState([]); - const [left, setLeft] = React.useState([0, 1, 2, 3]); - const [right, setRight] = React.useState([4, 5, 6, 7]); - - const leftChecked = intersection(checked, left); - const rightChecked = intersection(checked, right); - - const handleToggle = (value) => () => { - const currentIndex = checked.indexOf(value); - const newChecked = [...checked]; - - if (currentIndex === -1) { - newChecked.push(value); - } else { - newChecked.splice(currentIndex, 1); - } - - setChecked(newChecked); - }; - - const handleAllRight = () => { - setRight(right.concat(left)); - setLeft([]); - }; - - const handleCheckedRight = () => { - setRight(right.concat(leftChecked)); - setLeft(not(left, leftChecked)); - setChecked(not(checked, leftChecked)); - }; - - const handleCheckedLeft = () => { - setLeft(left.concat(rightChecked)); - setRight(not(right, rightChecked)); - setChecked(not(checked, rightChecked)); - }; - - const handleAllLeft = () => { - setLeft(left.concat(right)); - setRight([]); - }; - - const customList = (items) => ( - - - {items.map((value) => { - const labelId = `transfer-list-item-${value}-label`; - - return ( - - - - - - - ); - })} - - - ); - - return ( - - {customList(left)} - - - - - - - {customList(right)} - - ); -} diff --git a/docs/data/material/components/transfer-list/SelectAllTransferList.tsx b/docs/data/material/components/transfer-list/demos/select-all/SelectAllTransferList.tsx similarity index 99% rename from docs/data/material/components/transfer-list/SelectAllTransferList.tsx rename to docs/data/material/components/transfer-list/demos/select-all/SelectAllTransferList.tsx index 48c8af9ef9efd3..23081fa7278da7 100644 --- a/docs/data/material/components/transfer-list/SelectAllTransferList.tsx +++ b/docs/data/material/components/transfer-list/demos/select-all/SelectAllTransferList.tsx @@ -24,6 +24,7 @@ function union(a: readonly number[], b: readonly number[]) { } export default function SelectAllTransferList() { + // @focus-start @padding 1 const [checked, setChecked] = React.useState([]); const [left, setLeft] = React.useState([0, 1, 2, 3]); const [right, setRight] = React.useState([4, 5, 6, 7]); @@ -158,4 +159,5 @@ export default function SelectAllTransferList() { {customList('Chosen', right)} ); + // @focus-end } diff --git a/docs/data/material/components/transfer-list/demos/select-all/client.ts b/docs/data/material/components/transfer-list/demos/select-all/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/transfer-list/demos/select-all/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/transfer-list/demos/select-all/index.ts b/docs/data/material/components/transfer-list/demos/select-all/index.ts new file mode 100644 index 00000000000000..5b8fce84ae331e --- /dev/null +++ b/docs/data/material/components/transfer-list/demos/select-all/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SelectAllTransferList from './SelectAllTransferList'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SelectAllTransferList, { ClientProvider }); diff --git a/docs/data/material/components/transfer-list/TransferList.tsx b/docs/data/material/components/transfer-list/demos/transfer-list/TransferList.tsx similarity index 98% rename from docs/data/material/components/transfer-list/TransferList.tsx rename to docs/data/material/components/transfer-list/demos/transfer-list/TransferList.tsx index afa8d133a1a35f..4a036636d12aee 100644 --- a/docs/data/material/components/transfer-list/TransferList.tsx +++ b/docs/data/material/components/transfer-list/demos/transfer-list/TransferList.tsx @@ -18,6 +18,7 @@ function intersection(a: readonly number[], b: readonly number[]) { } export default function TransferList() { + // @focus-start @padding 1 const [checked, setChecked] = React.useState([]); const [left, setLeft] = React.useState([0, 1, 2, 3]); const [right, setRight] = React.useState([4, 5, 6, 7]); @@ -142,4 +143,5 @@ export default function TransferList() { {customList(right)} ); + // @focus-end } diff --git a/docs/data/material/components/transfer-list/demos/transfer-list/client.ts b/docs/data/material/components/transfer-list/demos/transfer-list/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/transfer-list/demos/transfer-list/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/transfer-list/demos/transfer-list/index.ts b/docs/data/material/components/transfer-list/demos/transfer-list/index.ts new file mode 100644 index 00000000000000..7d02059ed99ef3 --- /dev/null +++ b/docs/data/material/components/transfer-list/demos/transfer-list/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TransferList from './TransferList'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TransferList, { ClientProvider }); diff --git a/docs/data/material/components/transfer-list/transfer-list.md b/docs/data/material/components/transfer-list/transfer-list.md index 5ce538d7fa69a3..ba259c753c3016 100644 --- a/docs/data/material/components/transfer-list/transfer-list.md +++ b/docs/data/material/components/transfer-list/transfer-list.md @@ -15,13 +15,13 @@ githubLabel: 'scope: transfer list' For completeness, this example includes buttons for "move all", but not every transfer list needs these. -{{"demo": "TransferList.js", "bg": true}} +{{"component": "file://./demos/transfer-list/index.ts", "bg": true}} ## Enhanced transfer list This example exchanges the "move all" buttons for a "select all / select none" checkbox and adds a counter. -{{"demo": "SelectAllTransferList.js", "bg": true}} +{{"component": "file://./demos/select-all/index.ts", "bg": true}} ## Limitations diff --git a/docs/data/material/components/transitions/SimpleCollapse.js b/docs/data/material/components/transitions/SimpleCollapse.js deleted file mode 100644 index 0195f7d15a780f..00000000000000 --- a/docs/data/material/components/transitions/SimpleCollapse.js +++ /dev/null @@ -1,68 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Switch from '@mui/material/Switch'; -import Paper from '@mui/material/Paper'; -import Collapse from '@mui/material/Collapse'; -import FormControlLabel from '@mui/material/FormControlLabel'; - -const icon = ( - - - ({ - fill: theme.palette.common.white, - stroke: theme.palette.divider, - strokeWidth: 1, - })} - /> - - -); - -export default function SimpleCollapse() { - const [checked, setChecked] = React.useState(false); - - const handleChange = () => { - setChecked((prev) => !prev); - }; - - return ( - - } - label="Show" - /> - :not(style)': { - display: 'flex', - justifyContent: 'space-around', - height: 120, - width: 250, - }, - }} - > -
    - {icon} - - {icon} - -
    -
    - - - {icon} - - - - - {icon} - - -
    -     -     - ); -} diff --git a/docs/data/material/components/transitions/SimpleFade.js b/docs/data/material/components/transitions/SimpleFade.js deleted file mode 100644 index d680390909373c..00000000000000 --- a/docs/data/material/components/transitions/SimpleFade.js +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Switch from '@mui/material/Switch'; -import Paper from '@mui/material/Paper'; -import Fade from '@mui/material/Fade'; -import FormControlLabel from '@mui/material/FormControlLabel'; - -const icon = ( - - - ({ - fill: theme.palette.common.white, - stroke: theme.palette.divider, - strokeWidth: 1, - })} - /> - - -); - -export default function SimpleFade() { - const [checked, setChecked] = React.useState(false); - - const handleChange = () => { - setChecked((prev) => !prev); - }; - - return ( - - } - label="Show" - /> - - {icon} - - - ); -} diff --git a/docs/data/material/components/transitions/SimpleFade.tsx.preview b/docs/data/material/components/transitions/SimpleFade.tsx.preview deleted file mode 100644 index 63022735ab057b..00000000000000 --- a/docs/data/material/components/transitions/SimpleFade.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ -} - label="Show" -/> - - {icon} - \ No newline at end of file diff --git a/docs/data/material/components/transitions/SimpleGrow.js b/docs/data/material/components/transitions/SimpleGrow.js deleted file mode 100644 index a3842113a4fc0f..00000000000000 --- a/docs/data/material/components/transitions/SimpleGrow.js +++ /dev/null @@ -1,50 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Switch from '@mui/material/Switch'; -import Paper from '@mui/material/Paper'; -import Grow from '@mui/material/Grow'; -import FormControlLabel from '@mui/material/FormControlLabel'; - -const icon = ( - - - ({ - fill: theme.palette.common.white, - stroke: theme.palette.divider, - strokeWidth: 1, - })} - /> - - -); - -export default function SimpleGrow() { - const [checked, setChecked] = React.useState(false); - - const handleChange = () => { - setChecked((prev) => !prev); - }; - - return ( - - } - label="Show" - /> - - {icon} - {/* Conditionally applies the timeout prop to change the entry speed. */} - - {icon} - - - - ); -} diff --git a/docs/data/material/components/transitions/SimpleGrow.tsx.preview b/docs/data/material/components/transitions/SimpleGrow.tsx.preview deleted file mode 100644 index d4e5279d1f5659..00000000000000 --- a/docs/data/material/components/transitions/SimpleGrow.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ -} - label="Show" -/> - - {icon} - {/* Conditionally applies the timeout prop to change the entry speed. */} - - {icon} - - \ No newline at end of file diff --git a/docs/data/material/components/transitions/SimpleSlide.js b/docs/data/material/components/transitions/SimpleSlide.js deleted file mode 100644 index bd0999fae04195..00000000000000 --- a/docs/data/material/components/transitions/SimpleSlide.js +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Switch from '@mui/material/Switch'; -import Paper from '@mui/material/Paper'; -import Slide from '@mui/material/Slide'; -import FormControlLabel from '@mui/material/FormControlLabel'; - -const icon = ( - - - ({ - fill: theme.palette.common.white, - stroke: theme.palette.divider, - strokeWidth: 1, - })} - /> - - -); - -export default function SimpleSlide() { - const [checked, setChecked] = React.useState(false); - - const handleChange = () => { - setChecked((prev) => !prev); - }; - - return ( - - } - label="Show" - /> - - {icon} - - - ); -} diff --git a/docs/data/material/components/transitions/SimpleSlide.tsx.preview b/docs/data/material/components/transitions/SimpleSlide.tsx.preview deleted file mode 100644 index ed74e27912e1dc..00000000000000 --- a/docs/data/material/components/transitions/SimpleSlide.tsx.preview +++ /dev/null @@ -1,7 +0,0 @@ -} - label="Show" -/> - - {icon} - \ No newline at end of file diff --git a/docs/data/material/components/transitions/SimpleZoom.js b/docs/data/material/components/transitions/SimpleZoom.js deleted file mode 100644 index a76325309b8e2c..00000000000000 --- a/docs/data/material/components/transitions/SimpleZoom.js +++ /dev/null @@ -1,45 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Switch from '@mui/material/Switch'; -import Paper from '@mui/material/Paper'; -import Zoom from '@mui/material/Zoom'; -import FormControlLabel from '@mui/material/FormControlLabel'; - -const icon = ( - - - ({ - fill: theme.palette.common.white, - stroke: theme.palette.divider, - strokeWidth: 1, - })} - /> - - -); - -export default function SimpleZoom() { - const [checked, setChecked] = React.useState(false); - - const handleChange = () => { - setChecked((prev) => !prev); - }; - - return ( - - } - label="Show" - /> - - {icon} - - {icon} - - - - ); -} diff --git a/docs/data/material/components/transitions/SimpleZoom.tsx.preview b/docs/data/material/components/transitions/SimpleZoom.tsx.preview deleted file mode 100644 index d4f9fef6bf6463..00000000000000 --- a/docs/data/material/components/transitions/SimpleZoom.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ -} - label="Show" -/> - - {icon} - - {icon} - - \ No newline at end of file diff --git a/docs/data/material/components/transitions/SlideFromContainer.js b/docs/data/material/components/transitions/SlideFromContainer.js deleted file mode 100644 index 3b0b000c68cea3..00000000000000 --- a/docs/data/material/components/transitions/SlideFromContainer.js +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from 'react'; -import Box from '@mui/material/Box'; -import Switch from '@mui/material/Switch'; -import Paper from '@mui/material/Paper'; -import Slide from '@mui/material/Slide'; -import FormControlLabel from '@mui/material/FormControlLabel'; - -const icon = ( - - - ({ - fill: theme.palette.common.white, - stroke: theme.palette.divider, - strokeWidth: 1, - })} - /> - - -); - -export default function SlideFromContainer() { - const [checked, setChecked] = React.useState(false); - const containerRef = React.useRef(null); - - const handleChange = () => { - setChecked((prev) => !prev); - }; - - return ( - - - } - label="Show from target" - /> - - {icon} - - - - ); -} diff --git a/docs/data/material/components/transitions/SlideFromContainer.tsx.preview b/docs/data/material/components/transitions/SlideFromContainer.tsx.preview deleted file mode 100644 index 2daaae75f57d57..00000000000000 --- a/docs/data/material/components/transitions/SlideFromContainer.tsx.preview +++ /dev/null @@ -1,9 +0,0 @@ - - } - label="Show from target" - /> - - {icon} - - \ No newline at end of file diff --git a/docs/data/material/components/transitions/TransitionGroupExample.js b/docs/data/material/components/transitions/TransitionGroupExample.js deleted file mode 100644 index b3a09a88de263b..00000000000000 --- a/docs/data/material/components/transitions/TransitionGroupExample.js +++ /dev/null @@ -1,74 +0,0 @@ -import * as React from 'react'; -import Button from '@mui/material/Button'; -import Collapse from '@mui/material/Collapse'; -import IconButton from '@mui/material/IconButton'; -import List from '@mui/material/List'; -import ListItem from '@mui/material/ListItem'; -import ListItemText from '@mui/material/ListItemText'; -import DeleteIcon from '@mui/icons-material/Delete'; -import { TransitionGroup } from 'react-transition-group'; - -const FRUITS = [ - '🍏 Apple', - '🍌 Banana', - '🍍 Pineapple', - '🥥 Coconut', - '🍉 Watermelon', -]; - -function renderItem({ item, handleRemoveFruit }) { - return ( - handleRemoveFruit(item)} - > - - - } - > - - - ); -} - -export default function TransitionGroupExample() { - const [fruitsInBasket, setFruitsInBasket] = React.useState(FRUITS.slice(0, 3)); - - const handleAddFruit = () => { - const nextHiddenItem = FRUITS.find((i) => !fruitsInBasket.includes(i)); - if (nextHiddenItem) { - setFruitsInBasket((prev) => [nextHiddenItem, ...prev]); - } - }; - - const handleRemoveFruit = (item) => { - setFruitsInBasket((prev) => [...prev.filter((i) => i !== item)]); - }; - - const addFruitButton = ( - - ); - - return ( -
    - {addFruitButton} - - - {fruitsInBasket.map((item) => ( - {renderItem({ item, handleRemoveFruit })} - ))} - - -
    - ); -} diff --git a/docs/data/material/components/transitions/TransitionGroupExample.tsx.preview b/docs/data/material/components/transitions/TransitionGroupExample.tsx.preview deleted file mode 100644 index f1829ad7cdb1dc..00000000000000 --- a/docs/data/material/components/transitions/TransitionGroupExample.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ -{addFruitButton} - - - {fruitsInBasket.map((item) => ( - {renderItem({ item, handleRemoveFruit })} - ))} - - \ No newline at end of file diff --git a/docs/data/material/components/transitions/TransitionGroupExample.tsx b/docs/data/material/components/transitions/demos/group-example/TransitionGroupExample.tsx similarity index 97% rename from docs/data/material/components/transitions/TransitionGroupExample.tsx rename to docs/data/material/components/transitions/demos/group-example/TransitionGroupExample.tsx index e7a44ad24810bf..1427773fcdcf8a 100644 --- a/docs/data/material/components/transitions/TransitionGroupExample.tsx +++ b/docs/data/material/components/transitions/demos/group-example/TransitionGroupExample.tsx @@ -66,6 +66,7 @@ export default function TransitionGroupExample() { return (
    + {/* @focus-start */} {addFruitButton} @@ -74,6 +75,7 @@ export default function TransitionGroupExample() { ))} + {/* @focus-end */}
    ); } diff --git a/docs/data/material/components/transitions/demos/group-example/client.ts b/docs/data/material/components/transitions/demos/group-example/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/transitions/demos/group-example/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/transitions/demos/group-example/index.ts b/docs/data/material/components/transitions/demos/group-example/index.ts new file mode 100644 index 00000000000000..63c8e0e3cb6f54 --- /dev/null +++ b/docs/data/material/components/transitions/demos/group-example/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TransitionGroupExample from './TransitionGroupExample'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TransitionGroupExample, { ClientProvider }); diff --git a/docs/data/material/components/transitions/SimpleCollapse.tsx b/docs/data/material/components/transitions/demos/simple-collapse/SimpleCollapse.tsx similarity index 97% rename from docs/data/material/components/transitions/SimpleCollapse.tsx rename to docs/data/material/components/transitions/demos/simple-collapse/SimpleCollapse.tsx index 0195f7d15a780f..71deb16fa4cfa5 100644 --- a/docs/data/material/components/transitions/SimpleCollapse.tsx +++ b/docs/data/material/components/transitions/demos/simple-collapse/SimpleCollapse.tsx @@ -22,6 +22,7 @@ const icon = ( ); export default function SimpleCollapse() { + // @focus-start @padding 1 const [checked, setChecked] = React.useState(false); const handleChange = () => { @@ -65,4 +66,5 @@ export default function SimpleCollapse() { ); + // @focus-end } diff --git a/docs/data/material/components/transitions/demos/simple-collapse/client.ts b/docs/data/material/components/transitions/demos/simple-collapse/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/transitions/demos/simple-collapse/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/transitions/demos/simple-collapse/index.ts b/docs/data/material/components/transitions/demos/simple-collapse/index.ts new file mode 100644 index 00000000000000..2cbf1f3c6405b3 --- /dev/null +++ b/docs/data/material/components/transitions/demos/simple-collapse/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleCollapse from './SimpleCollapse'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleCollapse, { ClientProvider }); diff --git a/docs/data/material/components/transitions/SimpleFade.tsx b/docs/data/material/components/transitions/demos/simple-fade/SimpleFade.tsx similarity index 95% rename from docs/data/material/components/transitions/SimpleFade.tsx rename to docs/data/material/components/transitions/demos/simple-fade/SimpleFade.tsx index d680390909373c..2b7d1893a488b4 100644 --- a/docs/data/material/components/transitions/SimpleFade.tsx +++ b/docs/data/material/components/transitions/demos/simple-fade/SimpleFade.tsx @@ -30,6 +30,7 @@ export default function SimpleFade() { return ( + {/* @focus-start */} } label="Show" @@ -37,6 +38,7 @@ export default function SimpleFade() { {icon} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/transitions/demos/simple-fade/client.ts b/docs/data/material/components/transitions/demos/simple-fade/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/transitions/demos/simple-fade/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/transitions/demos/simple-fade/index.ts b/docs/data/material/components/transitions/demos/simple-fade/index.ts new file mode 100644 index 00000000000000..9712cc8dcc16d9 --- /dev/null +++ b/docs/data/material/components/transitions/demos/simple-fade/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleFade from './SimpleFade'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleFade, { ClientProvider }); diff --git a/docs/data/material/components/transitions/SimpleGrow.tsx b/docs/data/material/components/transitions/demos/simple-grow/SimpleGrow.tsx similarity index 96% rename from docs/data/material/components/transitions/SimpleGrow.tsx rename to docs/data/material/components/transitions/demos/simple-grow/SimpleGrow.tsx index a3842113a4fc0f..3909cda557cb38 100644 --- a/docs/data/material/components/transitions/SimpleGrow.tsx +++ b/docs/data/material/components/transitions/demos/simple-grow/SimpleGrow.tsx @@ -30,6 +30,7 @@ export default function SimpleGrow() { return ( + {/* @focus-start */} } label="Show" @@ -45,6 +46,7 @@ export default function SimpleGrow() { {icon} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/transitions/demos/simple-grow/client.ts b/docs/data/material/components/transitions/demos/simple-grow/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/transitions/demos/simple-grow/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/transitions/demos/simple-grow/index.ts b/docs/data/material/components/transitions/demos/simple-grow/index.ts new file mode 100644 index 00000000000000..bbe34e9b9fa036 --- /dev/null +++ b/docs/data/material/components/transitions/demos/simple-grow/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleGrow from './SimpleGrow'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleGrow, { ClientProvider }); diff --git a/docs/data/material/components/transitions/SimpleSlide.tsx b/docs/data/material/components/transitions/demos/simple-slide/SimpleSlide.tsx similarity index 95% rename from docs/data/material/components/transitions/SimpleSlide.tsx rename to docs/data/material/components/transitions/demos/simple-slide/SimpleSlide.tsx index bd0999fae04195..fb0583e13090b4 100644 --- a/docs/data/material/components/transitions/SimpleSlide.tsx +++ b/docs/data/material/components/transitions/demos/simple-slide/SimpleSlide.tsx @@ -30,6 +30,7 @@ export default function SimpleSlide() { return ( + {/* @focus-start */} } label="Show" @@ -37,6 +38,7 @@ export default function SimpleSlide() { {icon} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/transitions/demos/simple-slide/client.ts b/docs/data/material/components/transitions/demos/simple-slide/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/transitions/demos/simple-slide/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/transitions/demos/simple-slide/index.ts b/docs/data/material/components/transitions/demos/simple-slide/index.ts new file mode 100644 index 00000000000000..837f94f5332fff --- /dev/null +++ b/docs/data/material/components/transitions/demos/simple-slide/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleSlide from './SimpleSlide'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleSlide, { ClientProvider }); diff --git a/docs/data/material/components/transitions/SimpleZoom.tsx b/docs/data/material/components/transitions/demos/simple-zoom/SimpleZoom.tsx similarity index 95% rename from docs/data/material/components/transitions/SimpleZoom.tsx rename to docs/data/material/components/transitions/demos/simple-zoom/SimpleZoom.tsx index a76325309b8e2c..d1d69837aae5f4 100644 --- a/docs/data/material/components/transitions/SimpleZoom.tsx +++ b/docs/data/material/components/transitions/demos/simple-zoom/SimpleZoom.tsx @@ -30,6 +30,7 @@ export default function SimpleZoom() { return ( + {/* @focus-start */} } label="Show" @@ -40,6 +41,7 @@ export default function SimpleZoom() { {icon} + {/* @focus-end */} ); } diff --git a/docs/data/material/components/transitions/demos/simple-zoom/client.ts b/docs/data/material/components/transitions/demos/simple-zoom/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/transitions/demos/simple-zoom/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/transitions/demos/simple-zoom/index.ts b/docs/data/material/components/transitions/demos/simple-zoom/index.ts new file mode 100644 index 00000000000000..f6daf6112258f3 --- /dev/null +++ b/docs/data/material/components/transitions/demos/simple-zoom/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleZoom from './SimpleZoom'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleZoom, { ClientProvider }); diff --git a/docs/data/material/components/transitions/SlideFromContainer.tsx b/docs/data/material/components/transitions/demos/slide-from-container/SlideFromContainer.tsx similarity index 96% rename from docs/data/material/components/transitions/SlideFromContainer.tsx rename to docs/data/material/components/transitions/demos/slide-from-container/SlideFromContainer.tsx index 891a0afbeda139..9b30355d3dcaee 100644 --- a/docs/data/material/components/transitions/SlideFromContainer.tsx +++ b/docs/data/material/components/transitions/demos/slide-from-container/SlideFromContainer.tsx @@ -39,6 +39,7 @@ export default function SlideFromContainer() { backgroundColor: 'background.default', }} > + {/* @focus-start */} } @@ -48,6 +49,7 @@ export default function SlideFromContainer() { {icon}     + {/* @focus-end */} ); } diff --git a/docs/data/material/components/transitions/demos/slide-from-container/client.ts b/docs/data/material/components/transitions/demos/slide-from-container/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/transitions/demos/slide-from-container/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/transitions/demos/slide-from-container/index.ts b/docs/data/material/components/transitions/demos/slide-from-container/index.ts new file mode 100644 index 00000000000000..13ceb96b64874e --- /dev/null +++ b/docs/data/material/components/transitions/demos/slide-from-container/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SlideFromContainer from './SlideFromContainer'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SlideFromContainer, { ClientProvider }); diff --git a/docs/data/material/components/transitions/transitions.md b/docs/data/material/components/transitions/transitions.md index b45e867f09f926..af1a4841db43f6 100644 --- a/docs/data/material/components/transitions/transitions.md +++ b/docs/data/material/components/transitions/transitions.md @@ -20,13 +20,13 @@ Expand from the start edge of the child element. Use the `orientation` prop if you need a horizontal collapse. The `collapsedSize` prop can be used to set the minimum width/height when not expanded. -{{"demo": "SimpleCollapse.js", "bg": true}} +{{"component": "file://./demos/simple-collapse/index.ts", "bg": true}} ## Fade Fade in from transparent to opaque. -{{"demo": "SimpleFade.js", "bg": true}} +{{"component": "file://./demos/simple-fade/index.ts", "bg": true}} ## Grow @@ -35,7 +35,7 @@ Expands outwards from the center of the child element, while also fading in from The second example demonstrates how to change the `transform-origin`, and conditionally applies the `timeout` prop to change the entry speed. -{{"demo": "SimpleGrow.js", "bg": true}} +{{"component": "file://./demos/simple-grow/index.ts", "bg": true}} ## Slide @@ -48,14 +48,14 @@ This prevents the relatively positioned component from scrolling into view from its off-screen position. Similarly, the `unmountOnExit` prop removes the component from the DOM after it has been transition off-screen. -{{"demo": "SimpleSlide.js", "bg": true}} +{{"component": "file://./demos/simple-slide/index.ts", "bg": true}} ### Slide relative to a container The Slide component also accepts `container` prop, which is a reference to a DOM node. If this prop is set, the Slide component will slide from the edge of that DOM node. -{{"demo": "SlideFromContainer.js", "bg": true}} +{{"component": "file://./demos/slide-from-container/index.ts", "bg": true}} ## Zoom @@ -63,7 +63,7 @@ Expand outwards from the center of the child element. This example also demonstrates how to delay the enter transition. -{{"demo": "SimpleZoom.js", "bg": true}} +{{"component": "file://./demos/simple-zoom/index.ts", "bg": true}} ## Reduced motion @@ -124,7 +124,7 @@ export default function Main() { To animate a component when it is mounted or unmounted, you can use the [`TransitionGroup`](https://reactcommunity.org/react-transition-group/transition-group/) component from _react-transition-group_. As components are added or removed, the `in` prop is toggled automatically by `TransitionGroup`. -{{"demo": "TransitionGroupExample.js"}} +{{"component": "file://./demos/group-example/index.ts"}} ## Transition slots diff --git a/docs/data/material/components/typography/Types.js b/docs/data/material/components/typography/Types.js deleted file mode 100644 index 3e9657a99f3f14..00000000000000 --- a/docs/data/material/components/typography/Types.js +++ /dev/null @@ -1,56 +0,0 @@ -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; - -export default function Types() { - return ( - - - h1. Heading - - - h2. Heading - - - h3. Heading - - - h4. Heading - - - h5. Heading - - - h6. Heading - - - subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos - blanditiis tenetur - - - subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos - blanditiis tenetur - - - body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos - blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, - neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum - quasi quidem quibusdam. - - - body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos - blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, - neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum - quasi quidem quibusdam. - - - button text - - - caption text - - - overline text - - - ); -} diff --git a/docs/data/material/components/typography/TypographyTheme.js b/docs/data/material/components/typography/TypographyTheme.js deleted file mode 100644 index 4b4dc1ea323b07..00000000000000 --- a/docs/data/material/components/typography/TypographyTheme.js +++ /dev/null @@ -1,11 +0,0 @@ -import { styled } from '@mui/material/styles'; - -const Div = styled('div')(({ theme }) => ({ - ...theme.typography.button, - backgroundColor: (theme.vars || theme).palette.background.paper, - padding: theme.spacing(1), -})); - -export default function TypographyTheme() { - return
    {"This div's text looks like that of a button."}
    ; -} diff --git a/docs/data/material/components/typography/TypographyTheme.tsx b/docs/data/material/components/typography/TypographyTheme.tsx deleted file mode 100644 index 4b4dc1ea323b07..00000000000000 --- a/docs/data/material/components/typography/TypographyTheme.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { styled } from '@mui/material/styles'; - -const Div = styled('div')(({ theme }) => ({ - ...theme.typography.button, - backgroundColor: (theme.vars || theme).palette.background.paper, - padding: theme.spacing(1), -})); - -export default function TypographyTheme() { - return
    {"This div's text looks like that of a button."}
    ; -} diff --git a/docs/data/material/components/typography/TypographyTheme.tsx.preview b/docs/data/material/components/typography/TypographyTheme.tsx.preview deleted file mode 100644 index 60293bb62afcab..00000000000000 --- a/docs/data/material/components/typography/TypographyTheme.tsx.preview +++ /dev/null @@ -1 +0,0 @@ -
    {"This div's text looks like that of a button."}
    \ No newline at end of file diff --git a/docs/data/material/components/typography/demos/theme/TypographyTheme.tsx b/docs/data/material/components/typography/demos/theme/TypographyTheme.tsx new file mode 100644 index 00000000000000..3779d645611d8e --- /dev/null +++ b/docs/data/material/components/typography/demos/theme/TypographyTheme.tsx @@ -0,0 +1,14 @@ +import { styled } from '@mui/material/styles'; + +const Div = styled('div')(({ theme }) => ({ + ...theme.typography.button, + backgroundColor: (theme.vars || theme).palette.background.paper, + padding: theme.spacing(1), +})); + +export default function TypographyTheme() { + return ( + // @focus @padding 2 +
    {"This div's text looks like that of a button."}
    + ); +} diff --git a/docs/data/material/components/typography/demos/theme/client.ts b/docs/data/material/components/typography/demos/theme/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/typography/demos/theme/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/typography/demos/theme/index.ts b/docs/data/material/components/typography/demos/theme/index.ts new file mode 100644 index 00000000000000..c6a33d98bd1571 --- /dev/null +++ b/docs/data/material/components/typography/demos/theme/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import TypographyTheme from './TypographyTheme'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, TypographyTheme, { ClientProvider }); diff --git a/docs/data/material/components/typography/Types.tsx b/docs/data/material/components/typography/demos/types/Types.tsx similarity index 97% rename from docs/data/material/components/typography/Types.tsx rename to docs/data/material/components/typography/demos/types/Types.tsx index 3e9657a99f3f14..d9e4769b83ad05 100644 --- a/docs/data/material/components/typography/Types.tsx +++ b/docs/data/material/components/typography/demos/types/Types.tsx @@ -4,6 +4,7 @@ import Typography from '@mui/material/Typography'; export default function Types() { return ( + {/* @focus-start */} h1. Heading @@ -51,6 +52,7 @@ export default function Types() { overline text + {/* @focus-end */} ); } diff --git a/docs/data/material/components/typography/demos/types/client.ts b/docs/data/material/components/typography/demos/types/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/typography/demos/types/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/typography/demos/types/index.ts b/docs/data/material/components/typography/demos/types/index.ts new file mode 100644 index 00000000000000..ae067e7662b966 --- /dev/null +++ b/docs/data/material/components/typography/demos/types/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Types from './Types'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Types, { ClientProvider }); diff --git a/docs/data/material/components/typography/typography.md b/docs/data/material/components/typography/typography.md index e793e29150ee56..fe722b052f291e 100644 --- a/docs/data/material/components/typography/typography.md +++ b/docs/data/material/components/typography/typography.md @@ -66,14 +66,14 @@ To install Roboto through the Google Web Fonts CDN, add the following code insid The Typography component follows the [Material Design typographic scale](https://m2.material.io/design/typography/#type-scale) that provides a limited set of type sizes that work well together for a consistent layout. -{{"demo": "Types.js"}} +{{"component": "file://./demos/types/index.ts"}} ### Theme keys In some situations you might not be able to use the Typography component. Hopefully, you might be able to take advantage of the [`typography`](/material-ui/customization/default-theme/?expand-path=$.typography) keys of the theme. -{{"demo": "TypographyTheme.js"}} +{{"component": "file://./demos/theme/index.ts"}} ## Customization diff --git a/docs/data/material/components/use-media-query/JavaScriptMedia.js b/docs/data/material/components/use-media-query/JavaScriptMedia.js deleted file mode 100644 index a2dca57414d100..00000000000000 --- a/docs/data/material/components/use-media-query/JavaScriptMedia.js +++ /dev/null @@ -1,12 +0,0 @@ -import json2mq from 'json2mq'; -import useMediaQuery from '@mui/material/useMediaQuery'; - -export default function JavaScriptMedia() { - const matches = useMediaQuery( - json2mq({ - minWidth: 600, - }), - ); - - return {`{ minWidth: 600 } matches: ${matches}`}; -} diff --git a/docs/data/material/components/use-media-query/JavaScriptMedia.tsx.preview b/docs/data/material/components/use-media-query/JavaScriptMedia.tsx.preview deleted file mode 100644 index f04cfcf32991be..00000000000000 --- a/docs/data/material/components/use-media-query/JavaScriptMedia.tsx.preview +++ /dev/null @@ -1 +0,0 @@ -{`{ minWidth: 600 } matches: ${matches}`} \ No newline at end of file diff --git a/docs/data/material/components/use-media-query/ServerSide.js b/docs/data/material/components/use-media-query/ServerSide.js deleted file mode 100644 index be6d1fc9c45ee1..00000000000000 --- a/docs/data/material/components/use-media-query/ServerSide.js +++ /dev/null @@ -1,33 +0,0 @@ -import mediaQuery from 'css-mediaquery'; -import { ThemeProvider } from '@mui/material/styles'; -import useMediaQuery from '@mui/material/useMediaQuery'; - -function MyComponent() { - const matches = useMediaQuery('(min-width:600px)'); - - return {`(min-width:600px) matches: ${matches}`}; -} - -export default function ServerSide() { - const ssrMatchMedia = (query) => ({ - matches: mediaQuery.match(query, { - // The estimated CSS width of the browser. - width: 800, - }), - }); - - return ( - - - - ); -} diff --git a/docs/data/material/components/use-media-query/ServerSide.tsx.preview b/docs/data/material/components/use-media-query/ServerSide.tsx.preview deleted file mode 100644 index dc1a782c3712da..00000000000000 --- a/docs/data/material/components/use-media-query/ServerSide.tsx.preview +++ /dev/null @@ -1,12 +0,0 @@ - - theme={{ - components: { - MuiUseMediaQuery: { - // Change the default options of useMediaQuery - defaultProps: { ssrMatchMedia }, - }, - }, - }} -> - - \ No newline at end of file diff --git a/docs/data/material/components/use-media-query/SimpleMediaQuery.js b/docs/data/material/components/use-media-query/SimpleMediaQuery.js deleted file mode 100644 index a241fe806003de..00000000000000 --- a/docs/data/material/components/use-media-query/SimpleMediaQuery.js +++ /dev/null @@ -1,7 +0,0 @@ -import useMediaQuery from '@mui/material/useMediaQuery'; - -export default function SimpleMediaQuery() { - const matches = useMediaQuery('(min-width:600px)'); - - return {`(min-width:600px) matches: ${matches}`}; -} diff --git a/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx.preview b/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx.preview deleted file mode 100644 index 95f09d4ba38e01..00000000000000 --- a/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx.preview +++ /dev/null @@ -1 +0,0 @@ -{`(min-width:600px) matches: ${matches}`} \ No newline at end of file diff --git a/docs/data/material/components/use-media-query/ThemeHelper.js b/docs/data/material/components/use-media-query/ThemeHelper.js deleted file mode 100644 index c737feaa1a24e9..00000000000000 --- a/docs/data/material/components/use-media-query/ThemeHelper.js +++ /dev/null @@ -1,19 +0,0 @@ -import { createTheme, ThemeProvider, useTheme } from '@mui/material/styles'; -import useMediaQuery from '@mui/material/useMediaQuery'; - -function MyComponent() { - const theme = useTheme(); - const matches = useMediaQuery(theme.breakpoints.up('sm')); - - return {`theme.breakpoints.up('sm') matches: ${matches}`}; -} - -const theme = createTheme(); - -export default function ThemeHelper() { - return ( - - - - ); -} diff --git a/docs/data/material/components/use-media-query/ThemeHelper.tsx.preview b/docs/data/material/components/use-media-query/ThemeHelper.tsx.preview deleted file mode 100644 index 99dd5b5f3f688f..00000000000000 --- a/docs/data/material/components/use-media-query/ThemeHelper.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/use-media-query/UseWidth.js b/docs/data/material/components/use-media-query/UseWidth.js deleted file mode 100644 index 2d4493be696a45..00000000000000 --- a/docs/data/material/components/use-media-query/UseWidth.js +++ /dev/null @@ -1,35 +0,0 @@ -import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles'; -import useMediaQuery from '@mui/material/useMediaQuery'; - -/** - * Be careful using this hook. It only works because the number of - * breakpoints in theme is static. It will break once you change the number of - * breakpoints. See https://legacy.reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level - */ -function useWidth() { - const theme = useTheme(); - const keys = [...theme.breakpoints.keys].reverse(); - return ( - keys.reduce((output, key) => { - // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler -- useMediaQuery is called inside callback - // eslint-disable-next-line react-hooks/rules-of-hooks - const matches = useMediaQuery(theme.breakpoints.up(key)); - return !output && matches ? key : output; - }, null) || 'xs' - ); -} - -function MyComponent() { - const width = useWidth(); - return {`width: ${width}`}; -} - -const theme = createTheme(); - -export default function UseWidth() { - return ( - - - - ); -} diff --git a/docs/data/material/components/use-media-query/UseWidth.tsx.preview b/docs/data/material/components/use-media-query/UseWidth.tsx.preview deleted file mode 100644 index 99dd5b5f3f688f..00000000000000 --- a/docs/data/material/components/use-media-query/UseWidth.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/components/use-media-query/JavaScriptMedia.tsx b/docs/data/material/components/use-media-query/demos/java-script-media/JavaScriptMedia.tsx similarity index 86% rename from docs/data/material/components/use-media-query/JavaScriptMedia.tsx rename to docs/data/material/components/use-media-query/demos/java-script-media/JavaScriptMedia.tsx index a2dca57414d100..ff7245dc90da46 100644 --- a/docs/data/material/components/use-media-query/JavaScriptMedia.tsx +++ b/docs/data/material/components/use-media-query/demos/java-script-media/JavaScriptMedia.tsx @@ -2,6 +2,7 @@ import json2mq from 'json2mq'; import useMediaQuery from '@mui/material/useMediaQuery'; export default function JavaScriptMedia() { + // @focus-start @padding 1 const matches = useMediaQuery( json2mq({ minWidth: 600, @@ -9,4 +10,5 @@ export default function JavaScriptMedia() { ); return {`{ minWidth: 600 } matches: ${matches}`}; + // @focus-end } diff --git a/docs/data/material/components/use-media-query/demos/java-script-media/client.ts b/docs/data/material/components/use-media-query/demos/java-script-media/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/use-media-query/demos/java-script-media/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/use-media-query/demos/java-script-media/index.ts b/docs/data/material/components/use-media-query/demos/java-script-media/index.ts new file mode 100644 index 00000000000000..d436c050681e61 --- /dev/null +++ b/docs/data/material/components/use-media-query/demos/java-script-media/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import JavaScriptMedia from './JavaScriptMedia'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, JavaScriptMedia, { ClientProvider }); diff --git a/docs/data/material/components/use-media-query/ServerSide.tsx b/docs/data/material/components/use-media-query/demos/server-side/ServerSide.tsx similarity index 82% rename from docs/data/material/components/use-media-query/ServerSide.tsx rename to docs/data/material/components/use-media-query/demos/server-side/ServerSide.tsx index e0f5659f166e10..7d400fdcf34169 100644 --- a/docs/data/material/components/use-media-query/ServerSide.tsx +++ b/docs/data/material/components/use-media-query/demos/server-side/ServerSide.tsx @@ -1,5 +1,6 @@ import mediaQuery from 'css-mediaquery'; -import { ThemeProvider, Theme } from '@mui/material/styles'; +import { ThemeProvider } from '@mui/material/styles'; +import type { Theme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; function MyComponent() { @@ -17,6 +18,7 @@ export default function ServerSide() { }); return ( + // @focus-start @padding 2 theme={{ components: { @@ -29,5 +31,6 @@ export default function ServerSide() { > + // @focus-end ); } diff --git a/docs/data/material/components/use-media-query/demos/server-side/client.ts b/docs/data/material/components/use-media-query/demos/server-side/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/use-media-query/demos/server-side/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/use-media-query/demos/server-side/index.ts b/docs/data/material/components/use-media-query/demos/server-side/index.ts new file mode 100644 index 00000000000000..97313955676ef2 --- /dev/null +++ b/docs/data/material/components/use-media-query/demos/server-side/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ServerSide from './ServerSide'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ServerSide, { ClientProvider }); diff --git a/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx b/docs/data/material/components/use-media-query/demos/simple-media-query/SimpleMediaQuery.tsx similarity index 83% rename from docs/data/material/components/use-media-query/SimpleMediaQuery.tsx rename to docs/data/material/components/use-media-query/demos/simple-media-query/SimpleMediaQuery.tsx index a241fe806003de..669013f07abfb8 100644 --- a/docs/data/material/components/use-media-query/SimpleMediaQuery.tsx +++ b/docs/data/material/components/use-media-query/demos/simple-media-query/SimpleMediaQuery.tsx @@ -1,7 +1,9 @@ import useMediaQuery from '@mui/material/useMediaQuery'; export default function SimpleMediaQuery() { + // @focus-start @padding 1 const matches = useMediaQuery('(min-width:600px)'); return {`(min-width:600px) matches: ${matches}`}; + // @focus-end } diff --git a/docs/data/material/components/use-media-query/demos/simple-media-query/client.ts b/docs/data/material/components/use-media-query/demos/simple-media-query/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/use-media-query/demos/simple-media-query/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/use-media-query/demos/simple-media-query/index.ts b/docs/data/material/components/use-media-query/demos/simple-media-query/index.ts new file mode 100644 index 00000000000000..45274fb9435300 --- /dev/null +++ b/docs/data/material/components/use-media-query/demos/simple-media-query/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SimpleMediaQuery from './SimpleMediaQuery'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SimpleMediaQuery, { ClientProvider }); diff --git a/docs/data/material/components/use-media-query/ThemeHelper.tsx b/docs/data/material/components/use-media-query/demos/theme-helper/ThemeHelper.tsx similarity index 90% rename from docs/data/material/components/use-media-query/ThemeHelper.tsx rename to docs/data/material/components/use-media-query/demos/theme-helper/ThemeHelper.tsx index c737feaa1a24e9..aafedc7c7b97cb 100644 --- a/docs/data/material/components/use-media-query/ThemeHelper.tsx +++ b/docs/data/material/components/use-media-query/demos/theme-helper/ThemeHelper.tsx @@ -12,8 +12,10 @@ const theme = createTheme(); export default function ThemeHelper() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/use-media-query/demos/theme-helper/client.ts b/docs/data/material/components/use-media-query/demos/theme-helper/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/use-media-query/demos/theme-helper/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/use-media-query/demos/theme-helper/index.ts b/docs/data/material/components/use-media-query/demos/theme-helper/index.ts new file mode 100644 index 00000000000000..ef3ada653d7458 --- /dev/null +++ b/docs/data/material/components/use-media-query/demos/theme-helper/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ThemeHelper from './ThemeHelper'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ThemeHelper, { ClientProvider }); diff --git a/docs/data/material/components/use-media-query/UseWidth.tsx b/docs/data/material/components/use-media-query/demos/use-width/UseWidth.tsx similarity index 86% rename from docs/data/material/components/use-media-query/UseWidth.tsx rename to docs/data/material/components/use-media-query/demos/use-width/UseWidth.tsx index f949778d46bd10..37c2031a59308d 100644 --- a/docs/data/material/components/use-media-query/UseWidth.tsx +++ b/docs/data/material/components/use-media-query/demos/use-width/UseWidth.tsx @@ -1,10 +1,5 @@ -import { - Breakpoint, - Theme, - ThemeProvider, - useTheme, - createTheme, -} from '@mui/material/styles'; +import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles'; +import type { Breakpoint, Theme } from '@mui/material/styles'; import useMediaQuery from '@mui/material/useMediaQuery'; type BreakpointOrNull = Breakpoint | null; @@ -36,8 +31,10 @@ const theme = createTheme(); export default function UseWidth() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/components/use-media-query/demos/use-width/client.ts b/docs/data/material/components/use-media-query/demos/use-width/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/components/use-media-query/demos/use-width/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/components/use-media-query/demos/use-width/index.ts b/docs/data/material/components/use-media-query/demos/use-width/index.ts new file mode 100644 index 00000000000000..2275177eeff43a --- /dev/null +++ b/docs/data/material/components/use-media-query/demos/use-width/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import UseWidth from './UseWidth'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, UseWidth, { ClientProvider }); diff --git a/docs/data/material/components/use-media-query/use-media-query.md b/docs/data/material/components/use-media-query/use-media-query.md index 76879bf76fd8e8..255f4ba26c1c26 100644 --- a/docs/data/material/components/use-media-query/use-media-query.md +++ b/docs/data/material/components/use-media-query/use-media-query.md @@ -23,7 +23,7 @@ Some of the key features: You should provide a media query to the first argument of the hook. The media query string can be any valid CSS media query, for example [`'(prefers-color-scheme: dark)'`](/material-ui/customization/dark-mode/#system-preference). -{{"demo": "SimpleMediaQuery.js", "defaultCodeOpen": true}} +{{"component": "file://./demos/simple-media-query/index.ts", "initialExpanded": true}} :::warning Using the query `'print'` to modify a document for printing is not supported, as changes made in re-rendering may not be accurately reflected. @@ -47,7 +47,7 @@ function MyComponent() { } ``` -{{"demo": "ThemeHelper.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/theme-helper/index.ts", "collapseToEmpty": true}} Alternatively, you can use a callback function, accepting the theme as a first argument: @@ -67,7 +67,7 @@ function MyComponent() { You can use [json2mq](https://github.com/akiran/json2mq) to generate media query string from a JavaScript object. -{{"demo": "JavaScriptMedia.js", "defaultCodeOpen": true}} +{{"component": "file://./demos/java-script-media/index.ts", "initialExpanded": true}} ## Testing @@ -188,7 +188,7 @@ function handleRender(req, res) { } ``` -{{"demo": "ServerSide.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/server-side/index.ts", "collapseToEmpty": true}} Make sure you provide the same custom match media implementation to the client-side to guarantee a hydration match. @@ -197,7 +197,7 @@ Make sure you provide the same custom match media implementation to the client-s The `withWidth()` higher-order component injects the screen width of the page. You can reproduce the same behavior with a `useWidth` hook: -{{"demo": "UseWidth.js"}} +{{"component": "file://./demos/use-width/index.ts"}} ## API diff --git a/docs/data/material/customization/breakpoints/MediaQuery.js b/docs/data/material/customization/breakpoints/MediaQuery.js deleted file mode 100644 index be899841d08d6d..00000000000000 --- a/docs/data/material/customization/breakpoints/MediaQuery.js +++ /dev/null @@ -1,26 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Typography from '@mui/material/Typography'; -import { red, green, blue } from '@mui/material/colors'; - -const Root = styled('div')(({ theme }) => ({ - padding: theme.spacing(1), - [theme.breakpoints.down('md')]: { - backgroundColor: red[500], - }, - [theme.breakpoints.up('md')]: { - backgroundColor: blue[500], - }, - [theme.breakpoints.up('lg')]: { - backgroundColor: green[500], - }, -})); - -export default function MediaQuery() { - return ( - - down(md): red - up(md): blue - up(lg): green - - ); -} diff --git a/docs/data/material/customization/breakpoints/MediaQuery.tsx.preview b/docs/data/material/customization/breakpoints/MediaQuery.tsx.preview deleted file mode 100644 index 335837831f1279..00000000000000 --- a/docs/data/material/customization/breakpoints/MediaQuery.tsx.preview +++ /dev/null @@ -1,5 +0,0 @@ - - down(md): red - up(md): blue - up(lg): green - \ No newline at end of file diff --git a/docs/data/material/customization/breakpoints/breakpoints.md b/docs/data/material/customization/breakpoints/breakpoints.md index 7897e4c8d44b02..bc8d0212116d9b 100644 --- a/docs/data/material/customization/breakpoints/breakpoints.md +++ b/docs/data/material/customization/breakpoints/breakpoints.md @@ -53,7 +53,7 @@ const styles = (theme) => ({ }); ``` -{{"demo": "MediaQuery.js"}} +{{"component": "file://./demos/media-query/index.ts"}} ## JavaScript Media Queries diff --git a/docs/data/material/customization/breakpoints/MediaQuery.tsx b/docs/data/material/customization/breakpoints/demos/media-query/MediaQuery.tsx similarity index 93% rename from docs/data/material/customization/breakpoints/MediaQuery.tsx rename to docs/data/material/customization/breakpoints/demos/media-query/MediaQuery.tsx index be899841d08d6d..8f9883956efc2a 100644 --- a/docs/data/material/customization/breakpoints/MediaQuery.tsx +++ b/docs/data/material/customization/breakpoints/demos/media-query/MediaQuery.tsx @@ -17,10 +17,12 @@ const Root = styled('div')(({ theme }) => ({ export default function MediaQuery() { return ( + // @focus-start @padding 2 down(md): red up(md): blue up(lg): green + // @focus-end ); } diff --git a/docs/data/material/customization/breakpoints/demos/media-query/client.ts b/docs/data/material/customization/breakpoints/demos/media-query/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/breakpoints/demos/media-query/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/breakpoints/demos/media-query/index.ts b/docs/data/material/customization/breakpoints/demos/media-query/index.ts new file mode 100644 index 00000000000000..b124bb4cff112f --- /dev/null +++ b/docs/data/material/customization/breakpoints/demos/media-query/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import MediaQuery from './MediaQuery'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, MediaQuery, { ClientProvider }); diff --git a/docs/data/material/customization/color/color.md b/docs/data/material/customization/color/color.md index 231c0761620836..6437a9ed1948b4 100644 --- a/docs/data/material/customization/color/color.md +++ b/docs/data/material/customization/color/color.md @@ -45,7 +45,7 @@ const theme = createTheme({ To test a [material.io/design/color](https://m2.material.io/design/color/) color scheme with the Material UI documentation, simply select colors using the palette and sliders below. Alternatively, you can enter hex values in the Primary and Secondary text fields. -{{"demo": "ColorTool.js", "hideToolbar": true, "bg": true}} +{{"component": "file://./demos/tool/index.ts", "hideToolbar": true, "bg": true}} The output shown in the color sample can be pasted directly into a [`createTheme()`](/material-ui/customization/theming/#createtheme-options-args-theme) function (to be used with [`ThemeProvider`](/material-ui/customization/theming/#theme-provider)): @@ -97,7 +97,7 @@ import { red } from '@mui/material/colors'; const color = red[500]; ``` -{{"demo": "Color.js", "hideToolbar": true, "bg": "inline"}} +{{"component": "file://./demos/color/index.ts", "hideToolbar": true, "bg": "inline"}} ### Examples diff --git a/docs/data/material/customization/color/Color.js b/docs/data/material/customization/color/demos/color/Color.js similarity index 100% rename from docs/data/material/customization/color/Color.js rename to docs/data/material/customization/color/demos/color/Color.js diff --git a/docs/data/material/customization/color/demos/color/client.ts b/docs/data/material/customization/color/demos/color/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/color/demos/color/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/color/demos/color/index.ts b/docs/data/material/customization/color/demos/color/index.ts new file mode 100644 index 00000000000000..3641699d81bf2f --- /dev/null +++ b/docs/data/material/customization/color/demos/color/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import Color from './Color'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, Color, { ClientProvider }); diff --git a/docs/data/material/customization/color/ColorDemo.js b/docs/data/material/customization/color/demos/tool/ColorDemo.js similarity index 100% rename from docs/data/material/customization/color/ColorDemo.js rename to docs/data/material/customization/color/demos/tool/ColorDemo.js diff --git a/docs/data/material/customization/color/ColorTool.js b/docs/data/material/customization/color/demos/tool/ColorTool.js similarity index 100% rename from docs/data/material/customization/color/ColorTool.js rename to docs/data/material/customization/color/demos/tool/ColorTool.js diff --git a/docs/data/material/customization/color/demos/tool/client.ts b/docs/data/material/customization/color/demos/tool/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/color/demos/tool/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/color/demos/tool/index.ts b/docs/data/material/customization/color/demos/tool/index.ts new file mode 100644 index 00000000000000..15cb019735984b --- /dev/null +++ b/docs/data/material/customization/color/demos/tool/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ColorTool from './ColorTool'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ColorTool, { ClientProvider }); diff --git a/docs/data/material/customization/container-queries/BasicContainerQueries.js b/docs/data/material/customization/container-queries/BasicContainerQueries.js deleted file mode 100644 index 7a108f731cd319..00000000000000 --- a/docs/data/material/customization/container-queries/BasicContainerQueries.js +++ /dev/null @@ -1,91 +0,0 @@ -import { styled } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Card from '@mui/material/Card'; -import CardContent from '@mui/material/CardContent'; -import Chip from '@mui/material/Chip'; -import Typography from '@mui/material/Typography'; -import ResizableDemo from './ResizableDemo'; - -const DynamicCard = styled(Card)(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - [theme.containerQueries.up(350)]: { - flexDirection: 'row', - }, -})); - -const Image = styled('img')(({ theme }) => ({ - alignSelf: 'stretch', - aspectRatio: '16 / 9', - objectFit: 'cover', - width: '100%', - maxHeight: 160, - transition: '0.4s', - [theme.containerQueries.up(350)]: { - maxWidth: '36%', - maxHeight: 'initial', - }, - [theme.containerQueries.up(500)]: { - maxWidth: 240, - }, -})); - -const Content = styled(CardContent)(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(1), - padding: theme.spacing(2), - flex: 'auto', - transition: 'padding 0.4s', - [theme.containerQueries.up(500)]: { - padding: theme.spacing(3), - }, -})); - -export default function BasicContainerQueries() { - return ( - - - - The house from the offer. - -
    - - 123 Main St, Phoenix AZ - - - $280,000 — $310,000 - -
    - -     -     -     -     - ); -} diff --git a/docs/data/material/customization/container-queries/SxPropContainerQueries.js b/docs/data/material/customization/container-queries/SxPropContainerQueries.js deleted file mode 100644 index d101e63b1e250d..00000000000000 --- a/docs/data/material/customization/container-queries/SxPropContainerQueries.js +++ /dev/null @@ -1,91 +0,0 @@ -import Box from '@mui/material/Box'; -import Card from '@mui/material/Card'; -import CardContent from '@mui/material/CardContent'; -import Chip from '@mui/material/Chip'; -import Typography from '@mui/material/Typography'; -import ResizableDemo from './ResizableDemo'; - -export default function SxPropContainerQueries() { - return ( - - - - - -
    - - 123 Main St, Phoenix AZ - - - $280,000 — $310,000 - -
    - -     -     -     -     - ); -} diff --git a/docs/data/material/customization/container-queries/container-queries.md b/docs/data/material/customization/container-queries/container-queries.md index e52b55c911fb26..b84ae0687b6611 100644 --- a/docs/data/material/customization/container-queries/container-queries.md +++ b/docs/data/material/customization/container-queries/container-queries.md @@ -11,7 +11,7 @@ The value can be unitless (in which case it'll be rendered in pixels), a string, theme.containerQueries.up('sm'); // => '@container (min-width: 600px)' ``` -{{"demo": "BasicContainerQueries.js"}} +{{"component": "file://./demos/basic/index.ts"}} :::info One of the ancestors must have the CSS container type specified. @@ -32,7 +32,7 @@ When adding styles using the `sx` prop, use the `@` or `@/` no - ``: a width or a breakpoint key. - `` (optional): a named containment context. -{{"demo": "SxPropContainerQueries.js"}} +{{"component": "file://./demos/sx-prop/index.ts"}} ### Caveats diff --git a/docs/data/material/customization/container-queries/ResizableDemo.js b/docs/data/material/customization/container-queries/demos/ResizableDemo.js similarity index 100% rename from docs/data/material/customization/container-queries/ResizableDemo.js rename to docs/data/material/customization/container-queries/demos/ResizableDemo.js diff --git a/docs/data/material/customization/container-queries/BasicContainerQueries.tsx b/docs/data/material/customization/container-queries/demos/basic/BasicContainerQueries.tsx similarity index 96% rename from docs/data/material/customization/container-queries/BasicContainerQueries.tsx rename to docs/data/material/customization/container-queries/demos/basic/BasicContainerQueries.tsx index 7a108f731cd319..77b669fd5c802c 100644 --- a/docs/data/material/customization/container-queries/BasicContainerQueries.tsx +++ b/docs/data/material/customization/container-queries/demos/basic/BasicContainerQueries.tsx @@ -4,7 +4,7 @@ import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import Chip from '@mui/material/Chip'; import Typography from '@mui/material/Typography'; -import ResizableDemo from './ResizableDemo'; +import ResizableDemo from '../ResizableDemo'; const DynamicCard = styled(Card)(({ theme }) => ({ display: 'flex', @@ -44,6 +44,7 @@ const Content = styled(CardContent)(({ theme }) => ({ export default function BasicContainerQueries() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/customization/container-queries/demos/basic/client.ts b/docs/data/material/customization/container-queries/demos/basic/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/container-queries/demos/basic/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/container-queries/demos/basic/index.ts b/docs/data/material/customization/container-queries/demos/basic/index.ts new file mode 100644 index 00000000000000..04830bc6e4e068 --- /dev/null +++ b/docs/data/material/customization/container-queries/demos/basic/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import BasicContainerQueries from './BasicContainerQueries'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, BasicContainerQueries, { ClientProvider }); diff --git a/docs/data/material/customization/container-queries/SxPropContainerQueries.tsx b/docs/data/material/customization/container-queries/demos/sx-prop/SxPropContainerQueries.tsx similarity index 96% rename from docs/data/material/customization/container-queries/SxPropContainerQueries.tsx rename to docs/data/material/customization/container-queries/demos/sx-prop/SxPropContainerQueries.tsx index d101e63b1e250d..74006d915cef26 100644 --- a/docs/data/material/customization/container-queries/SxPropContainerQueries.tsx +++ b/docs/data/material/customization/container-queries/demos/sx-prop/SxPropContainerQueries.tsx @@ -3,10 +3,11 @@ import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import Chip from '@mui/material/Chip'; import Typography from '@mui/material/Typography'; -import ResizableDemo from './ResizableDemo'; +import ResizableDemo from '../ResizableDemo'; export default function SxPropContainerQueries() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/customization/container-queries/demos/sx-prop/client.ts b/docs/data/material/customization/container-queries/demos/sx-prop/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/container-queries/demos/sx-prop/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/container-queries/demos/sx-prop/index.ts b/docs/data/material/customization/container-queries/demos/sx-prop/index.ts new file mode 100644 index 00000000000000..9f067bc39dfc75 --- /dev/null +++ b/docs/data/material/customization/container-queries/demos/sx-prop/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SxPropContainerQueries from './SxPropContainerQueries'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SxPropContainerQueries, { ClientProvider }); diff --git a/docs/data/material/customization/creating-themed-components/StatFullTemplate.js b/docs/data/material/customization/creating-themed-components/StatFullTemplate.js deleted file mode 100644 index ddfbc8cffac7f4..00000000000000 --- a/docs/data/material/customization/creating-themed-components/StatFullTemplate.js +++ /dev/null @@ -1,80 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import Stack from '@mui/material/Stack'; -import { styled, useThemeProps } from '@mui/material/styles'; - -const StatRoot = styled('div', { - name: 'MuiStat', - slot: 'root', -})(({ theme }) => ({ - display: 'flex', - flexDirection: 'column', - gap: theme.spacing(0.5), - padding: theme.spacing(3, 4), - backgroundColor: theme.palette.background.paper, - borderRadius: theme.shape.borderRadius, - boxShadow: theme.shadows[2], - letterSpacing: '-0.025em', - fontWeight: 600, - variants: [ - { - props: { - variant: 'outlined', - }, - style: { - border: `2px solid ${theme.palette.divider}`, - boxShadow: 'none', - }, - }, - ], - ...theme.applyStyles('dark', { - backgroundColor: 'inherit', - }), -})); - -const StatValue = styled('div', { - name: 'MuiStat', - slot: 'value', -})(({ theme }) => ({ - ...theme.typography.h3, -})); - -const StatUnit = styled('div', { - name: 'MuiStat', - slot: 'unit', -})(({ theme }) => ({ - ...theme.typography.body2, - color: theme.palette.text.secondary, - ...theme.applyStyles('dark', { - color: 'inherit', - }), -})); - -const Stat = React.forwardRef(function Stat(inProps, ref) { - const props = useThemeProps({ props: inProps, name: 'MuiStat' }); - const { value, unit, variant, ...other } = props; - - const ownerState = { ...props, variant }; - - return ( - - {value} - {unit} - - ); -}); - -Stat.propTypes = { - unit: PropTypes.string.isRequired, - value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired, - variant: PropTypes.oneOf(['outlined']), -}; - -export default function StatFullTemplate() { - return ( - - - - - ); -} diff --git a/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx.preview b/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx.preview deleted file mode 100644 index 7319a013202f84..00000000000000 --- a/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx.preview +++ /dev/null @@ -1,2 +0,0 @@ - - \ No newline at end of file diff --git a/docs/data/material/customization/creating-themed-components/creating-themed-components.md b/docs/data/material/customization/creating-themed-components/creating-themed-components.md index dd43e973024727..990e62882ad2ca 100644 --- a/docs/data/material/customization/creating-themed-components/creating-themed-components.md +++ b/docs/data/material/customization/creating-themed-components/creating-themed-components.md @@ -18,7 +18,7 @@ You don't need to connect your component to the theme if you are only using it i This guide will walk you through how to build this statistics component, which accepts the app's theme as though it were a built-in Material UI component: -{{"demo": "StatComponent.js", "hideToolbar": true}} +{{"component": "file://./demos/stat-component/index.ts", "hideToolbar": true}} ### 1. Create the component slots @@ -34,7 +34,7 @@ This statistics component is composed of three slots: Though you can give these slots any names you prefer, we recommend using `root` for the outermost container element for consistency with the rest of the library. ::: -{{"demo": "StatSlots.js", "hideToolbar": true}} +{{"component": "file://./demos/stat-slots/index.ts", "hideToolbar": true}} Use the `styled` API with `name` and `slot` parameters to create the slots, as shown below: @@ -327,4 +327,4 @@ declare module '@mui/material/styles' { This template is the final product of the step-by-step guide above, demonstrating how to build a custom component that can be styled with the theme as if it was a built-in component. -{{"demo": "StatFullTemplate.js", "defaultCodeOpen": true}} +{{"component": "file://./demos/stat-full-template/index.ts", "initialExpanded": true}} diff --git a/docs/data/material/customization/creating-themed-components/StatComponent.js b/docs/data/material/customization/creating-themed-components/demos/stat-component/StatComponent.js similarity index 100% rename from docs/data/material/customization/creating-themed-components/StatComponent.js rename to docs/data/material/customization/creating-themed-components/demos/stat-component/StatComponent.js diff --git a/docs/data/material/customization/creating-themed-components/demos/stat-component/client.ts b/docs/data/material/customization/creating-themed-components/demos/stat-component/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/creating-themed-components/demos/stat-component/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/creating-themed-components/demos/stat-component/index.ts b/docs/data/material/customization/creating-themed-components/demos/stat-component/index.ts new file mode 100644 index 00000000000000..ff7bc9eb6b44b7 --- /dev/null +++ b/docs/data/material/customization/creating-themed-components/demos/stat-component/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StatComponent from './StatComponent'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StatComponent, { ClientProvider }); diff --git a/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx b/docs/data/material/customization/creating-themed-components/demos/stat-full-template/StatFullTemplate.tsx similarity index 97% rename from docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx rename to docs/data/material/customization/creating-themed-components/demos/stat-full-template/StatFullTemplate.tsx index 0992776ef11765..01d34352f2d6ca 100644 --- a/docs/data/material/customization/creating-themed-components/StatFullTemplate.tsx +++ b/docs/data/material/customization/creating-themed-components/demos/stat-full-template/StatFullTemplate.tsx @@ -79,8 +79,10 @@ const Stat = React.forwardRef( export default function StatFullTemplate() { return ( + {/* @focus-start */} + {/* @focus-end */} ); } diff --git a/docs/data/material/customization/creating-themed-components/demos/stat-full-template/client.ts b/docs/data/material/customization/creating-themed-components/demos/stat-full-template/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/creating-themed-components/demos/stat-full-template/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/creating-themed-components/demos/stat-full-template/index.ts b/docs/data/material/customization/creating-themed-components/demos/stat-full-template/index.ts new file mode 100644 index 00000000000000..a66274ff10c0b7 --- /dev/null +++ b/docs/data/material/customization/creating-themed-components/demos/stat-full-template/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StatFullTemplate from './StatFullTemplate'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StatFullTemplate, { ClientProvider }); diff --git a/docs/data/material/customization/creating-themed-components/StatSlots.js b/docs/data/material/customization/creating-themed-components/demos/stat-slots/StatSlots.js similarity index 100% rename from docs/data/material/customization/creating-themed-components/StatSlots.js rename to docs/data/material/customization/creating-themed-components/demos/stat-slots/StatSlots.js diff --git a/docs/data/material/customization/creating-themed-components/demos/stat-slots/client.ts b/docs/data/material/customization/creating-themed-components/demos/stat-slots/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/creating-themed-components/demos/stat-slots/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/creating-themed-components/demos/stat-slots/index.ts b/docs/data/material/customization/creating-themed-components/demos/stat-slots/index.ts new file mode 100644 index 00000000000000..0f5242b54afb24 --- /dev/null +++ b/docs/data/material/customization/creating-themed-components/demos/stat-slots/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StatSlots from './StatSlots'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StatSlots, { ClientProvider }); diff --git a/docs/data/material/customization/css-layers/CssLayersCaveat.js b/docs/data/material/customization/css-layers/CssLayersCaveat.js deleted file mode 100644 index 5ea05464d76d8d..00000000000000 --- a/docs/data/material/customization/css-layers/CssLayersCaveat.js +++ /dev/null @@ -1,84 +0,0 @@ -import * as React from 'react'; -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import Accordion from '@mui/material/Accordion'; -import AccordionSummary from '@mui/material/AccordionSummary'; -import AccordionDetails from '@mui/material/AccordionDetails'; -import Typography from '@mui/material/Typography'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import Box from '@mui/material/Box'; -import Switch from '@mui/material/Switch'; - -export default function CssLayersCaveat() { - const [cssLayers, setCssLayers] = React.useState(false); - const theme = React.useMemo(() => { - return createTheme({ - modularCssLayers: cssLayers, - cssVariables: true, - components: { - MuiAccordion: { - styleOverrides: { - root: { - margin: 0, - }, - }, - }, - }, - }); - }, [cssLayers]); - return ( -
    - - - No CSS Layers - - setCssLayers(!cssLayers)} /> - - With CSS Layers - - - -
    - - } - aria-controls="panel1-content" - id="panel1-header" - > - Accordion 1 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - } - aria-controls="panel2-content" - id="panel2-header" - > - Accordion 2 - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - malesuada lacus ex, sit amet blandit leo lobortis eget. - - -
    -     -
    - ); -} diff --git a/docs/data/material/customization/css-layers/CssLayersInput.js b/docs/data/material/customization/css-layers/CssLayersInput.js deleted file mode 100644 index 6a54efd504a27b..00000000000000 --- a/docs/data/material/customization/css-layers/CssLayersInput.js +++ /dev/null @@ -1,43 +0,0 @@ -import { createTheme, ThemeProvider } from '@mui/material/styles'; -import FormControl from '@mui/material/FormControl'; -import InputLabel from '@mui/material/InputLabel'; -import OutlinedInput from '@mui/material/OutlinedInput'; -import FormHelperText from '@mui/material/FormHelperText'; - -const theme = createTheme({ - modularCssLayers: true, - cssVariables: true, -}); - -export default function CssLayersInput() { - return ( - - - - Label - - - Helper text goes here - - - ); -} diff --git a/docs/data/material/customization/css-layers/css-layers.md b/docs/data/material/customization/css-layers/css-layers.md index f5e1813660c35f..8d0173f14748aa 100644 --- a/docs/data/material/customization/css-layers/css-layers.md +++ b/docs/data/material/customization/css-layers/css-layers.md @@ -129,7 +129,7 @@ export default function AppTheme({ children }: { children: ReactNode }) { } ``` -{{"demo": "CssLayersInput.js"}} +{{"component": "file://./demos/input/index.ts"}} When this feature is enabled, Material UI generates these layers: @@ -284,4 +284,4 @@ By default, the margin from the theme does _not_ take precedence over the defaul After enabling the `modularCssLayers` option, the margin from the theme _does_ take precedence because the theme layer comes after the components layer in the cascade order—so the style override is applied and the accordion has no margins when expanded. -{{"demo": "CssLayersCaveat.js"}} +{{"component": "file://./demos/caveat/index.ts"}} diff --git a/docs/data/material/customization/css-layers/CssLayersCaveat.tsx b/docs/data/material/customization/css-layers/demos/caveat/CssLayersCaveat.tsx similarity index 98% rename from docs/data/material/customization/css-layers/CssLayersCaveat.tsx rename to docs/data/material/customization/css-layers/demos/caveat/CssLayersCaveat.tsx index 5ea05464d76d8d..eab3781315272c 100644 --- a/docs/data/material/customization/css-layers/CssLayersCaveat.tsx +++ b/docs/data/material/customization/css-layers/demos/caveat/CssLayersCaveat.tsx @@ -9,6 +9,7 @@ import Box from '@mui/material/Box'; import Switch from '@mui/material/Switch'; export default function CssLayersCaveat() { + // @focus-start @padding 1 const [cssLayers, setCssLayers] = React.useState(false); const theme = React.useMemo(() => { return createTheme({ @@ -81,4 +82,5 @@ export default function CssLayersCaveat() { ); + // @focus-end } diff --git a/docs/data/material/customization/css-layers/demos/caveat/client.ts b/docs/data/material/customization/css-layers/demos/caveat/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/css-layers/demos/caveat/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/css-layers/demos/caveat/index.ts b/docs/data/material/customization/css-layers/demos/caveat/index.ts new file mode 100644 index 00000000000000..f5ee7b3141959d --- /dev/null +++ b/docs/data/material/customization/css-layers/demos/caveat/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CssLayersCaveat from './CssLayersCaveat'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CssLayersCaveat, { ClientProvider }); diff --git a/docs/data/material/customization/css-layers/CssLayersInput.tsx b/docs/data/material/customization/css-layers/demos/input/CssLayersInput.tsx similarity index 96% rename from docs/data/material/customization/css-layers/CssLayersInput.tsx rename to docs/data/material/customization/css-layers/demos/input/CssLayersInput.tsx index 6a54efd504a27b..977f9ec54e00ae 100644 --- a/docs/data/material/customization/css-layers/CssLayersInput.tsx +++ b/docs/data/material/customization/css-layers/demos/input/CssLayersInput.tsx @@ -11,6 +11,7 @@ const theme = createTheme({ export default function CssLayersInput() { return ( + // @focus-start @padding 2 Helper text goes here + // @focus-end ); } diff --git a/docs/data/material/customization/css-layers/demos/input/client.ts b/docs/data/material/customization/css-layers/demos/input/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/css-layers/demos/input/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/css-layers/demos/input/index.ts b/docs/data/material/customization/css-layers/demos/input/index.ts new file mode 100644 index 00000000000000..253caeb37bf20b --- /dev/null +++ b/docs/data/material/customization/css-layers/demos/input/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import CssLayersInput from './CssLayersInput'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, CssLayersInput, { ClientProvider }); diff --git a/docs/data/material/customization/css-theme-variables/AliasColorVariables.js b/docs/data/material/customization/css-theme-variables/AliasColorVariables.js deleted file mode 100644 index 67662af25b71eb..00000000000000 --- a/docs/data/material/customization/css-theme-variables/AliasColorVariables.js +++ /dev/null @@ -1,37 +0,0 @@ -import { ThemeProvider, createTheme } from '@mui/material/styles'; -import GlobalStyles from '@mui/material/GlobalStyles'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; - -const theme = createTheme({ - cssVariables: { - nativeColor: true, - cssVarPrefix: 'alias', // This is for the demo only, you don't need to set this to use the feature - }, - palette: { - primary: { - main: 'var(--colors-brand-primary)', - }, - }, -}); - -export default function AliasColorVariables() { - return ( -
    - {/* This is just a demo to replicate the global CSS file */} - - {/* Your App */} - - - - - -
    - ); -} diff --git a/docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx.preview b/docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx.preview deleted file mode 100644 index 600f858b811500..00000000000000 --- a/docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx.preview +++ /dev/null @@ -1,15 +0,0 @@ -{/* This is just a demo to replicate the global CSS file */} - - -{/* Your App */} - - - - - \ No newline at end of file diff --git a/docs/data/material/customization/css-theme-variables/ContrastTextDemo.js b/docs/data/material/customization/css-theme-variables/ContrastTextDemo.js deleted file mode 100644 index 0a740379235278..00000000000000 --- a/docs/data/material/customization/css-theme-variables/ContrastTextDemo.js +++ /dev/null @@ -1,122 +0,0 @@ -import * as React from 'react'; -import { ThemeProvider, createTheme } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Slider from '@mui/material/Slider'; - -const theme = createTheme({ - cssVariables: { - nativeColor: true, - cssVarPrefix: 'contrast', // This is for the demo only, you don't need to set this to use the feature - }, -}); - -export default function ContrastTextDemo() { - const [lightness, setLightness] = React.useState(0.65); - const [chroma, setChroma] = React.useState(0.3); - const [hue, setHue] = React.useState(29); - - // Create OKLCH color from slider values - const backgroundColor = `oklch(${lightness} ${chroma} ${hue})`; - - // Get contrast text using theme function - const contrastText = theme.palette.getContrastText(backgroundColor); - - return ( - - - {/* Live Preview Square */} - - - {backgroundColor} - - - {/* Sliders */} - - - OKLCH - -
    - - Lightness: {lightness} - - setLightness(value)} - min={0} - max={1} - step={0.01} - valueLabelDisplay="auto" - /> -
    - -
    - - Chroma: {chroma} - - setChroma(value)} - min={0} - max={0.4} - step={0.01} - valueLabelDisplay="auto" - /> -
    - -
    - - Hue: {hue}° - - setHue(value)} - min={0} - max={360} - step={1} - valueLabelDisplay="auto" - /> -
    -     - - - Text color: {contrastText} - - -     -     - ); -} diff --git a/docs/data/material/customization/css-theme-variables/CustomColorSpace.js b/docs/data/material/customization/css-theme-variables/CustomColorSpace.js deleted file mode 100644 index 09062b4c240937..00000000000000 --- a/docs/data/material/customization/css-theme-variables/CustomColorSpace.js +++ /dev/null @@ -1,43 +0,0 @@ -import { ThemeProvider, createTheme } from '@mui/material/styles'; -import Card from '@mui/material/Card'; -import CardContent from '@mui/material/CardContent'; -import CardActions from '@mui/material/CardActions'; -import Alert from '@mui/material/Alert'; -import Button from '@mui/material/Button'; - -const theme = createTheme({ - cssVariables: { - nativeColor: true, - cssVarPrefix: 'colorSpace', // This is for the demo only, you don't need to set this to use the feature - }, - palette: { - primary: { - main: 'oklch(0.65 0.3 28.95)', - }, - warning: { - main: 'oklch(0.72 0.24 44.32)', - }, - }, -}); - -export default function CustomColorSpace() { - return ( - - - - - This theme uses the oklch color space. - - - - - - - - - ); -} diff --git a/docs/data/material/customization/css-theme-variables/DisableTransitionOnChange.js b/docs/data/material/customization/css-theme-variables/DisableTransitionOnChange.js deleted file mode 100644 index f1822ea689bc55..00000000000000 --- a/docs/data/material/customization/css-theme-variables/DisableTransitionOnChange.js +++ /dev/null @@ -1,69 +0,0 @@ -import * as React from 'react'; -import { createTheme, ThemeProvider, useColorScheme } from '@mui/material/styles'; -import Stack from '@mui/material/Stack'; -import MenuItem from '@mui/material/MenuItem'; -import Switch from '@mui/material/Switch'; -import Select from '@mui/material/Select'; -import FormControlLabel from '@mui/material/FormControlLabel'; - -const theme = createTheme({ - cssVariables: { - colorSchemeSelector: '.demo-disable-transition-%s', - }, - colorSchemes: { dark: true }, -}); - -function ModeSwitcher() { - const { mode, setMode } = useColorScheme(); - if (!mode) { - return null; - } - return ( - - ); -} - -export default function DisableTransitionOnChange() { - const [disableTransition, setDisableTransition] = React.useState(false); - return ( - - - - setDisableTransition(event.target.checked)} - /> - } - label="Disable transition" - /> - - - ); -} diff --git a/docs/data/material/customization/css-theme-variables/ModernColorSpaces.js b/docs/data/material/customization/css-theme-variables/ModernColorSpaces.js deleted file mode 100644 index 5149b4feb0350e..00000000000000 --- a/docs/data/material/customization/css-theme-variables/ModernColorSpaces.js +++ /dev/null @@ -1,64 +0,0 @@ -import * as React from 'react'; -import { ThemeProvider, createTheme } from '@mui/material/styles'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Radio from '@mui/material/Radio'; -import RadioGroup from '@mui/material/RadioGroup'; -import FormLabel from '@mui/material/FormLabel'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormControl from '@mui/material/FormControl'; - -export default function ModernColorSpaces() { - const colorSpaces = [ - 'color(display-p3 0.7 0.5 0)', // Mud - 'oklch(0.62 0.25 29)', // Orange - 'oklab(0.59 0.1 -0.14)', // Purple - 'hsl(141, 70%, 48%)', // Green - 'rgb(25, 118, 210)', // Blue - ]; - - const [selectedColor, setSelectedColor] = React.useState(colorSpaces[0]); - - const theme = React.useMemo( - () => - createTheme({ - cssVariables: { - nativeColor: true, - cssVarPrefix: 'modern-color-spaces', - }, - palette: { - primary: { - main: selectedColor, - }, - }, - }), - [selectedColor], - ); - - return ( - - - Main color - setSelectedColor(event.target.value)} - > - {colorSpaces.map((value) => ( - } - label={value} - /> - ))} - - - - - - - - ); -} diff --git a/docs/data/material/customization/css-theme-variables/NativeCssColors.js b/docs/data/material/customization/css-theme-variables/NativeCssColors.js deleted file mode 100644 index dce82d8c7a0e6b..00000000000000 --- a/docs/data/material/customization/css-theme-variables/NativeCssColors.js +++ /dev/null @@ -1,40 +0,0 @@ -import { ThemeProvider, createTheme } from '@mui/material/styles'; -import Card from '@mui/material/Card'; -import CardContent from '@mui/material/CardContent'; -import CardActions from '@mui/material/CardActions'; -import Alert from '@mui/material/Alert'; -import Button from '@mui/material/Button'; - -const theme = createTheme({ - cssVariables: { - nativeColor: true, - cssVarPrefix: 'nativeColor', // This is for the demo only, you don't need to set this to use the feature - colorSchemeSelector: 'data-mui-color-scheme', - }, - colorSchemes: { - light: true, - dark: true, - }, -}); - -export default function NativeCssColors() { - return ( - - - - - This theme uses the oklch color space. - - - - - - - - - ); -} diff --git a/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.js b/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.js deleted file mode 100644 index 80ab57d195a33a..00000000000000 --- a/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.js +++ /dev/null @@ -1,142 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { ThemeProvider, createTheme } from '@mui/material/styles'; -import { blue, purple, red, green, orange, brown } from '@mui/material/colors'; -import Box from '@mui/material/Box'; -import Button from '@mui/material/Button'; -import Typography from '@mui/material/Typography'; - -const theme = createTheme({ - cssVariables: { - nativeColor: true, - // This is for the demo only, you don't need to set this to use the feature - cssVarPrefix: 'demo', - colorSchemeSelector: 'data', - }, - colorSchemes: { - light: true, - dark: true, - }, -}); - -const colorSwatches = [ - { color: blue[500] }, - { color: purple[500] }, - { color: red[500] }, - { color: brown[600] }, - { color: green[600] }, - { color: orange[500] }, -]; - -function ColorDisplay({ color }) { - return ( - - - - {color} - - - ); -} - -ColorDisplay.propTypes = { - color: PropTypes.string.isRequired, -}; - -export default function ThemeColorFunctions() { - const [selectedColor, setSelectedColor] = React.useState(colorSwatches[0]); - - const colorValues = { - alpha: theme.alpha(selectedColor.color, 0.5), - lighten: theme.lighten(selectedColor.color, 0.5), - darken: theme.darken(selectedColor.color, 0.5), - }; - - return ( - - - - {colorSwatches.map((swatch) => { - const isSelected = selectedColor.color === swatch.color; - return ( - - ); - })} - - -
    - - theme.alpha(color, 0.5) - - -
    -
    - - theme.lighten(color, 0.5) - - -
    -
    - - theme.darken(color, 0.5) - - -
    -     -     -     - ); -} diff --git a/docs/data/material/customization/css-theme-variables/configuration.md b/docs/data/material/customization/css-theme-variables/configuration.md index ea53b475c10049..af198b2064d4ae 100644 --- a/docs/data/material/customization/css-theme-variables/configuration.md +++ b/docs/data/material/customization/css-theme-variables/configuration.md @@ -308,7 +308,7 @@ To disable CSS transitions when switching between modes, apply the `disableTrans ``` -{{"demo": "DisableTransitionOnChange.js"}} +{{"component": "file://./demos/disable-transition-on-change/index.ts"}} ## Force theme recalculation between modes diff --git a/docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx b/docs/data/material/customization/css-theme-variables/demos/alias-color-variables/AliasColorVariables.tsx similarity index 94% rename from docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx rename to docs/data/material/customization/css-theme-variables/demos/alias-color-variables/AliasColorVariables.tsx index ec99dcd6857697..aba3931603e147 100644 --- a/docs/data/material/customization/css-theme-variables/AliasColorVariables.tsx +++ b/docs/data/material/customization/css-theme-variables/demos/alias-color-variables/AliasColorVariables.tsx @@ -18,6 +18,7 @@ const theme = createTheme({ export default function AliasColorVariables() { return (
    + {/* @focus-start */} {/* This is just a demo to replicate the global CSS file */} Branded Button + {/* @focus-end */}
    ); } diff --git a/docs/data/material/customization/css-theme-variables/demos/alias-color-variables/client.ts b/docs/data/material/customization/css-theme-variables/demos/alias-color-variables/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/css-theme-variables/demos/alias-color-variables/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/css-theme-variables/demos/alias-color-variables/index.ts b/docs/data/material/customization/css-theme-variables/demos/alias-color-variables/index.ts new file mode 100644 index 00000000000000..787abb3b5ea6bb --- /dev/null +++ b/docs/data/material/customization/css-theme-variables/demos/alias-color-variables/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import AliasColorVariables from './AliasColorVariables'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, AliasColorVariables, { ClientProvider }); diff --git a/docs/data/material/customization/css-theme-variables/ContrastTextDemo.tsx b/docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/ContrastTextDemo.tsx similarity index 98% rename from docs/data/material/customization/css-theme-variables/ContrastTextDemo.tsx rename to docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/ContrastTextDemo.tsx index 0a740379235278..eb1bd5844fb31e 100644 --- a/docs/data/material/customization/css-theme-variables/ContrastTextDemo.tsx +++ b/docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/ContrastTextDemo.tsx @@ -12,6 +12,7 @@ const theme = createTheme({ }); export default function ContrastTextDemo() { + // @focus-start @padding 1 const [lightness, setLightness] = React.useState(0.65); const [chroma, setChroma] = React.useState(0.3); const [hue, setHue] = React.useState(29); @@ -119,4 +120,5 @@ export default function ContrastTextDemo() {     ); + // @focus-end } diff --git a/docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/client.ts b/docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/index.ts b/docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/index.ts new file mode 100644 index 00000000000000..4b20639c263edd --- /dev/null +++ b/docs/data/material/customization/css-theme-variables/demos/contrast-text-demo/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ContrastTextDemo from './ContrastTextDemo'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ContrastTextDemo, { ClientProvider }); diff --git a/docs/data/material/customization/css-theme-variables/CustomColorSpace.tsx b/docs/data/material/customization/css-theme-variables/demos/custom-color-space/CustomColorSpace.tsx similarity index 96% rename from docs/data/material/customization/css-theme-variables/CustomColorSpace.tsx rename to docs/data/material/customization/css-theme-variables/demos/custom-color-space/CustomColorSpace.tsx index 09062b4c240937..20b4a4cfe322bd 100644 --- a/docs/data/material/customization/css-theme-variables/CustomColorSpace.tsx +++ b/docs/data/material/customization/css-theme-variables/demos/custom-color-space/CustomColorSpace.tsx @@ -22,6 +22,7 @@ const theme = createTheme({ export default function CustomColorSpace() { return ( + // @focus-start @padding 2 @@ -39,5 +40,6 @@ export default function CustomColorSpace() { + // @focus-end ); } diff --git a/docs/data/material/customization/css-theme-variables/DisableTransitionOnChange.tsx b/docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/DisableTransitionOnChange.tsx similarity index 97% rename from docs/data/material/customization/css-theme-variables/DisableTransitionOnChange.tsx rename to docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/DisableTransitionOnChange.tsx index 23a1358fc23ffd..a25aba7017019d 100644 --- a/docs/data/material/customization/css-theme-variables/DisableTransitionOnChange.tsx +++ b/docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/DisableTransitionOnChange.tsx @@ -34,6 +34,7 @@ function ModeSwitcher() { } export default function DisableTransitionOnChange() { + // @focus-start @padding 1 const [disableTransition, setDisableTransition] = React.useState(false); return ( ); + // @focus-end } diff --git a/docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/client.ts b/docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/index.ts b/docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/index.ts new file mode 100644 index 00000000000000..07392f9e0e1c47 --- /dev/null +++ b/docs/data/material/customization/css-theme-variables/demos/disable-transition-on-change/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DisableTransitionOnChange from './DisableTransitionOnChange'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DisableTransitionOnChange, { ClientProvider }); diff --git a/docs/data/material/customization/css-theme-variables/ModernColorSpaces.tsx b/docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/ModernColorSpaces.tsx similarity index 97% rename from docs/data/material/customization/css-theme-variables/ModernColorSpaces.tsx rename to docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/ModernColorSpaces.tsx index 5149b4feb0350e..1eb8a52da5f1a1 100644 --- a/docs/data/material/customization/css-theme-variables/ModernColorSpaces.tsx +++ b/docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/ModernColorSpaces.tsx @@ -9,6 +9,7 @@ import FormControlLabel from '@mui/material/FormControlLabel'; import FormControl from '@mui/material/FormControl'; export default function ModernColorSpaces() { + // @focus-start @padding 1 const colorSpaces = [ 'color(display-p3 0.7 0.5 0)', // Mud 'oklch(0.62 0.25 29)', // Orange @@ -61,4 +62,5 @@ export default function ModernColorSpaces() { ); + // @focus-end } diff --git a/docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/client.ts b/docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/index.ts b/docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/index.ts new file mode 100644 index 00000000000000..83d51e6a1e0d1b --- /dev/null +++ b/docs/data/material/customization/css-theme-variables/demos/modern-color-spaces/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ModernColorSpaces from './ModernColorSpaces'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ModernColorSpaces, { ClientProvider }); diff --git a/docs/data/material/customization/css-theme-variables/NativeCssColors.tsx b/docs/data/material/customization/css-theme-variables/demos/native-css-colors/NativeCssColors.tsx similarity index 95% rename from docs/data/material/customization/css-theme-variables/NativeCssColors.tsx rename to docs/data/material/customization/css-theme-variables/demos/native-css-colors/NativeCssColors.tsx index dce82d8c7a0e6b..ad7bf5ea766579 100644 --- a/docs/data/material/customization/css-theme-variables/NativeCssColors.tsx +++ b/docs/data/material/customization/css-theme-variables/demos/native-css-colors/NativeCssColors.tsx @@ -19,6 +19,7 @@ const theme = createTheme({ export default function NativeCssColors() { return ( + // @focus-start @padding 2 @@ -36,5 +37,6 @@ export default function NativeCssColors() { + // @focus-end ); } diff --git a/docs/data/material/customization/css-theme-variables/demos/native-css-colors/client.ts b/docs/data/material/customization/css-theme-variables/demos/native-css-colors/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/css-theme-variables/demos/native-css-colors/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/css-theme-variables/demos/native-css-colors/index.ts b/docs/data/material/customization/css-theme-variables/demos/native-css-colors/index.ts new file mode 100644 index 00000000000000..846bb1dbd9d71f --- /dev/null +++ b/docs/data/material/customization/css-theme-variables/demos/native-css-colors/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import NativeCssColors from './NativeCssColors'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, NativeCssColors, { ClientProvider }); diff --git a/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.tsx b/docs/data/material/customization/css-theme-variables/demos/theme-color-functions/ThemeColorFunctions.tsx similarity index 98% rename from docs/data/material/customization/css-theme-variables/ThemeColorFunctions.tsx rename to docs/data/material/customization/css-theme-variables/demos/theme-color-functions/ThemeColorFunctions.tsx index f3b3b839a96606..a08349ffa4ddf2 100644 --- a/docs/data/material/customization/css-theme-variables/ThemeColorFunctions.tsx +++ b/docs/data/material/customization/css-theme-variables/demos/theme-color-functions/ThemeColorFunctions.tsx @@ -55,6 +55,7 @@ function ColorDisplay({ color }: { color: string }) { } export default function ThemeColorFunctions() { + // @focus-start @padding 1 const [selectedColor, setSelectedColor] = React.useState(colorSwatches[0]); const colorValues = { @@ -134,4 +135,5 @@ export default function ThemeColorFunctions() { ); + // @focus-end } diff --git a/docs/data/material/customization/css-theme-variables/demos/theme-color-functions/client.ts b/docs/data/material/customization/css-theme-variables/demos/theme-color-functions/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/css-theme-variables/demos/theme-color-functions/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/css-theme-variables/demos/theme-color-functions/index.ts b/docs/data/material/customization/css-theme-variables/demos/theme-color-functions/index.ts new file mode 100644 index 00000000000000..09445ba48d3f6c --- /dev/null +++ b/docs/data/material/customization/css-theme-variables/demos/theme-color-functions/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ThemeColorFunctions from './ThemeColorFunctions'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ThemeColorFunctions, { ClientProvider }); diff --git a/docs/data/material/customization/css-theme-variables/native-color.md b/docs/data/material/customization/css-theme-variables/native-color.md index 9f9473e4b976ac..7e0d075698e2b3 100644 --- a/docs/data/material/customization/css-theme-variables/native-color.md +++ b/docs/data/material/customization/css-theme-variables/native-color.md @@ -30,7 +30,7 @@ const theme = createTheme({ }); ``` -{{"demo": "NativeCssColors.js"}} +{{"component": "file://./demos/native-css-colors/index.ts"}} ## Modern color spaces @@ -47,7 +47,7 @@ const theme = createTheme({ }); ``` -{{"demo": "ModernColorSpaces.js"}} +{{"component": "file://./demos/modern-color-spaces/index.ts"}} ## Aliasing color variables @@ -66,7 +66,7 @@ const theme = createTheme({ }); ``` -{{"demo": "AliasColorVariables.js"}} +{{"component": "file://./demos/alias-color-variables/index.ts"}} ## Theme color functions @@ -74,7 +74,7 @@ The theme object contains these color utilities: `alpha()`, `lighten()`, and `da When native color is enabled, these functions use CSS `color-mix()` and relative color instead of the JavaScript color manipulation. -{{"demo": "ThemeColorFunctions.js"}} +{{"component": "file://./demos/theme-color-functions/index.ts"}} :::info The theme color functions are backward compatible. @@ -86,7 +86,7 @@ If native color is not enabled, they will fall back to the JavaScript color mani The `theme.palette.getContrastText()` function produces the contrast color. The demo below shows the result of the `theme.palette.getContrastText()` function, which produces the text color based on the selected background. -{{"demo": "ContrastTextDemo.js"}} +{{"component": "file://./demos/contrast-text-demo/index.ts"}} :::info The CSS variables `--__l` and `--__a` are internal variables set globally by Material UI. diff --git a/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.js b/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.js deleted file mode 100644 index 96076915883012..00000000000000 --- a/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.js +++ /dev/null @@ -1,62 +0,0 @@ -import Box from '@mui/material/Box'; -import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles'; -import { amber, deepOrange, grey } from '@mui/material/colors'; - -const getDesignTokens = (mode) => ({ - palette: { - mode, - primary: { - ...amber, - ...(mode === 'dark' && { - main: amber[300], - }), - }, - ...(mode === 'dark' && { - background: { - default: deepOrange[900], - paper: deepOrange[900], - }, - }), - text: { - ...(mode === 'light' - ? { - primary: grey[900], - secondary: grey[800], - } - : { - primary: '#fff', - secondary: grey[500], - }), - }, - }, -}); - -function MyApp() { - const theme = useTheme(); - return ( - - This is a {theme.palette.mode} mode theme with custom palette - - ); -} - -const darkModeTheme = createTheme(getDesignTokens('dark')); - -export default function DarkThemeWithCustomPalette() { - return ( - - - - ); -} diff --git a/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx.preview b/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx.preview deleted file mode 100644 index d5025e4e55283a..00000000000000 --- a/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/customization/dark-mode/ToggleColorMode.js b/docs/data/material/customization/dark-mode/ToggleColorMode.js deleted file mode 100644 index 42cda6a83ab3de..00000000000000 --- a/docs/data/material/customization/dark-mode/ToggleColorMode.js +++ /dev/null @@ -1,58 +0,0 @@ -import Box from '@mui/material/Box'; -import RadioGroup from '@mui/material/RadioGroup'; -import Radio from '@mui/material/Radio'; -import FormControl from '@mui/material/FormControl'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import FormLabel from '@mui/material/FormLabel'; -import { ThemeProvider, createTheme, useColorScheme } from '@mui/material/styles'; - -function MyApp() { - const { mode, setMode } = useColorScheme(); - if (!mode) { - return null; - } - return ( - - - Theme - setMode(event.target.value)} - > - } label="System" /> - } label="Light" /> - } label="Dark" /> - - - - ); -} - -const theme = createTheme({ - colorSchemes: { - dark: true, - }, -}); - -export default function ToggleColorMode() { - return ( - - - - ); -} diff --git a/docs/data/material/customization/dark-mode/ToggleColorMode.tsx.preview b/docs/data/material/customization/dark-mode/ToggleColorMode.tsx.preview deleted file mode 100644 index 95f392ac920cbb..00000000000000 --- a/docs/data/material/customization/dark-mode/ToggleColorMode.tsx.preview +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/data/material/customization/dark-mode/dark-mode.md b/docs/data/material/customization/dark-mode/dark-mode.md index 80d6b8fa18c8cd..1c2cdd6b249ec5 100644 --- a/docs/data/material/customization/dark-mode/dark-mode.md +++ b/docs/data/material/customization/dark-mode/dark-mode.md @@ -32,7 +32,7 @@ export default function App() { Adding `mode: 'dark'` to the `createTheme()` helper modifies several palette values, as shown in the following demo: -{{"demo": "DarkTheme.js", "bg": "inline", "hideToolbar": true}} +{{"component": "file://./demos/dark-theme/index.ts", "bg": "inline", "hideToolbar": true}} Adding `` inside of the `` component will also enable dark mode for the app's background. @@ -124,7 +124,7 @@ To give your users a way to toggle between modes for [built-in support](#built-i The `mode` is always `undefined` on first render, so make sure to handle this case as shown in the demo below—otherwise you may encounter a hydration mismatch error. ::: -{{"demo": "ToggleColorMode.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/toggle-color-mode/index.ts", "collapseToEmpty": true}} ## Storage manager diff --git a/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx b/docs/data/material/customization/dark-mode/demos/dark-theme-with-custom-palette/DarkThemeWithCustomPalette.tsx similarity index 87% rename from docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx rename to docs/data/material/customization/dark-mode/demos/dark-theme-with-custom-palette/DarkThemeWithCustomPalette.tsx index e6ac66e997a385..9b6749109143b8 100644 --- a/docs/data/material/customization/dark-mode/DarkThemeWithCustomPalette.tsx +++ b/docs/data/material/customization/dark-mode/demos/dark-theme-with-custom-palette/DarkThemeWithCustomPalette.tsx @@ -1,10 +1,6 @@ import Box from '@mui/material/Box'; -import { - ThemeProvider, - useTheme, - createTheme, - PaletteMode, -} from '@mui/material/styles'; +import { ThemeProvider, useTheme, createTheme } from '@mui/material/styles'; +import type { PaletteMode } from '@mui/material/styles'; import { amber, deepOrange, grey } from '@mui/material/colors'; const getDesignTokens = (mode: PaletteMode) => ({ @@ -60,8 +56,10 @@ const darkModeTheme = createTheme(getDesignTokens('dark')); export default function DarkThemeWithCustomPalette() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/customization/dark-mode/DarkTheme.js b/docs/data/material/customization/dark-mode/demos/dark-theme/DarkTheme.js similarity index 100% rename from docs/data/material/customization/dark-mode/DarkTheme.js rename to docs/data/material/customization/dark-mode/demos/dark-theme/DarkTheme.js diff --git a/docs/data/material/customization/dark-mode/demos/dark-theme/client.ts b/docs/data/material/customization/dark-mode/demos/dark-theme/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/dark-mode/demos/dark-theme/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/dark-mode/demos/dark-theme/index.ts b/docs/data/material/customization/dark-mode/demos/dark-theme/index.ts new file mode 100644 index 00000000000000..a38255609e2f36 --- /dev/null +++ b/docs/data/material/customization/dark-mode/demos/dark-theme/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DarkTheme from './DarkTheme'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DarkTheme, { ClientProvider }); diff --git a/docs/data/material/customization/dark-mode/ToggleColorMode.tsx b/docs/data/material/customization/dark-mode/demos/toggle-color-mode/ToggleColorMode.tsx similarity index 97% rename from docs/data/material/customization/dark-mode/ToggleColorMode.tsx rename to docs/data/material/customization/dark-mode/demos/toggle-color-mode/ToggleColorMode.tsx index 1e2f49d44b559b..ca3466f4291505 100644 --- a/docs/data/material/customization/dark-mode/ToggleColorMode.tsx +++ b/docs/data/material/customization/dark-mode/demos/toggle-color-mode/ToggleColorMode.tsx @@ -53,8 +53,10 @@ const theme = createTheme({ export default function ToggleColorMode() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/customization/dark-mode/demos/toggle-color-mode/client.ts b/docs/data/material/customization/dark-mode/demos/toggle-color-mode/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/dark-mode/demos/toggle-color-mode/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/dark-mode/demos/toggle-color-mode/index.ts b/docs/data/material/customization/dark-mode/demos/toggle-color-mode/index.ts new file mode 100644 index 00000000000000..d05de38ebfe47c --- /dev/null +++ b/docs/data/material/customization/dark-mode/demos/toggle-color-mode/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import ToggleColorMode from './ToggleColorMode'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, ToggleColorMode, { ClientProvider }); diff --git a/docs/data/material/customization/default-theme/default-theme.md b/docs/data/material/customization/default-theme/default-theme.md index 27460c267baffa..9e1e105df66c71 100644 --- a/docs/data/material/customization/default-theme/default-theme.md +++ b/docs/data/material/customization/default-theme/default-theme.md @@ -14,4 +14,4 @@ Please note that **the documentation site is using a custom theme** (the MUI's o
    -{{"demo": "DefaultTheme.js", "hideToolbar": true, "bg": "inline"}} +{{"component": "file://./demos/default-theme/index.ts", "hideToolbar": true, "bg": "inline"}} diff --git a/docs/data/material/customization/default-theme/DefaultTheme.js b/docs/data/material/customization/default-theme/demos/default-theme/DefaultTheme.js similarity index 100% rename from docs/data/material/customization/default-theme/DefaultTheme.js rename to docs/data/material/customization/default-theme/demos/default-theme/DefaultTheme.js diff --git a/docs/data/material/customization/default-theme/demos/default-theme/client.ts b/docs/data/material/customization/default-theme/demos/default-theme/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/default-theme/demos/default-theme/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/default-theme/demos/default-theme/index.ts b/docs/data/material/customization/default-theme/demos/default-theme/index.ts new file mode 100644 index 00000000000000..fc108eb0ad0829 --- /dev/null +++ b/docs/data/material/customization/default-theme/demos/default-theme/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DefaultTheme from './DefaultTheme'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DefaultTheme, { ClientProvider }); diff --git a/docs/data/material/customization/density/DensityTool.js b/docs/data/material/customization/density/demos/tool/DensityTool.js similarity index 100% rename from docs/data/material/customization/density/DensityTool.js rename to docs/data/material/customization/density/demos/tool/DensityTool.js diff --git a/docs/data/material/customization/density/demos/tool/client.ts b/docs/data/material/customization/density/demos/tool/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/density/demos/tool/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/density/demos/tool/index.ts b/docs/data/material/customization/density/demos/tool/index.ts new file mode 100644 index 00000000000000..af305a3c6f70dd --- /dev/null +++ b/docs/data/material/customization/density/demos/tool/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DensityTool from './DensityTool'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DensityTool, { ClientProvider }); diff --git a/docs/data/material/customization/density/density.md b/docs/data/material/customization/density/density.md index cd2eb75a29168c..40ee93da8a27a7 100644 --- a/docs/data/material/customization/density/density.md +++ b/docs/data/material/customization/density/density.md @@ -116,4 +116,4 @@ const theme = createTheme({ }); ``` -{{"demo": "DensityTool.js", "hideToolbar": true}} +{{"component": "file://./demos/tool/index.ts", "hideToolbar": true}} diff --git a/docs/data/material/customization/how-to-customize/DevTools.js b/docs/data/material/customization/how-to-customize/DevTools.js deleted file mode 100644 index be2ab7897ed18f..00000000000000 --- a/docs/data/material/customization/how-to-customize/DevTools.js +++ /dev/null @@ -1,16 +0,0 @@ -import Slider from '@mui/material/Slider'; - -export default function DevTools() { - return ( - - ); -} diff --git a/docs/data/material/customization/how-to-customize/DevTools.tsx.preview b/docs/data/material/customization/how-to-customize/DevTools.tsx.preview deleted file mode 100644 index 8445ed7a14110f..00000000000000 --- a/docs/data/material/customization/how-to-customize/DevTools.tsx.preview +++ /dev/null @@ -1,10 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/customization/how-to-customize/DynamicCSS.js b/docs/data/material/customization/how-to-customize/DynamicCSS.js deleted file mode 100644 index bc7b3e3ed3a639..00000000000000 --- a/docs/data/material/customization/how-to-customize/DynamicCSS.js +++ /dev/null @@ -1,52 +0,0 @@ -import * as React from 'react'; -import { alpha, styled } from '@mui/material/styles'; -import Slider from '@mui/material/Slider'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; - -const StyledSlider = styled(Slider, { - shouldForwardProp: (prop) => prop !== 'success', -})(({ theme }) => ({ - width: 300, - variants: [ - { - props: ({ success }) => success, - style: { - color: theme.palette.success.main, - '& .MuiSlider-thumb': { - [`&:hover, &.Mui-focusVisible`]: { - boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`, - }, - [`&.Mui-active`]: { - boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`, - }, - }, - }, - }, - ], -})); - -export default function DynamicCSS() { - const [success, setSuccess] = React.useState(false); - - const handleChange = (event) => { - setSuccess(event.target.checked); - }; - - return ( - - - } - label="Success" - /> - - - ); -} diff --git a/docs/data/material/customization/how-to-customize/DynamicCSS.tsx.preview b/docs/data/material/customization/how-to-customize/DynamicCSS.tsx.preview deleted file mode 100644 index cd2ab526ad39cd..00000000000000 --- a/docs/data/material/customization/how-to-customize/DynamicCSS.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - - } - label="Success" - /> - - \ No newline at end of file diff --git a/docs/data/material/customization/how-to-customize/DynamicCSSVariables.js b/docs/data/material/customization/how-to-customize/DynamicCSSVariables.js deleted file mode 100644 index e38eb2935ea5cd..00000000000000 --- a/docs/data/material/customization/how-to-customize/DynamicCSSVariables.js +++ /dev/null @@ -1,53 +0,0 @@ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import Slider from '@mui/material/Slider'; -import FormControlLabel from '@mui/material/FormControlLabel'; -import Switch from '@mui/material/Switch'; - -const CustomSlider = styled(Slider)({ - width: 300, - color: 'var(--color)', - '& .MuiSlider-thumb': { - [`&:hover, &.Mui-focusVisible`]: { - boxShadow: '0px 0px 0px 8px var(--box-shadow)', - }, - [`&.Mui-active`]: { - boxShadow: '0px 0px 0px 14px var(--box-shadow)', - }, - }, -}); - -const successVars = { - '--color': '#4caf50', - '--box-shadow': 'rgb(76, 175, 80, .16)', -}; - -const defaultVars = { - '--color': '#1976d2', - '--box-shadow': 'rgb(25, 118, 210, .16)', -}; - -export default function DynamicCSSVariables() { - const [vars, setVars] = React.useState(defaultVars); - - const handleChange = (event) => { - setVars(event.target.checked ? successVars : defaultVars); - }; - - return ( - - - } - label="Success" - /> - - - ); -} diff --git a/docs/data/material/customization/how-to-customize/DynamicCSSVariables.tsx.preview b/docs/data/material/customization/how-to-customize/DynamicCSSVariables.tsx.preview deleted file mode 100644 index 202b26caefe2eb..00000000000000 --- a/docs/data/material/customization/how-to-customize/DynamicCSSVariables.tsx.preview +++ /dev/null @@ -1,14 +0,0 @@ - - - } - label="Success" - /> - - \ No newline at end of file diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverride.js b/docs/data/material/customization/how-to-customize/GlobalCssOverride.js deleted file mode 100644 index 91ae4acc113873..00000000000000 --- a/docs/data/material/customization/how-to-customize/GlobalCssOverride.js +++ /dev/null @@ -1,11 +0,0 @@ -import * as React from 'react'; -import GlobalStyles from '@mui/material/GlobalStyles'; - -export default function GlobalCssOverride() { - return ( - - -

    Grey h1 element

    -     - ); -} diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverride.tsx.preview b/docs/data/material/customization/how-to-customize/GlobalCssOverride.tsx.preview deleted file mode 100644 index 3aa3aa7c161d78..00000000000000 --- a/docs/data/material/customization/how-to-customize/GlobalCssOverride.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - -

    Grey h1 element

    -     \ No newline at end of file diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.js b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.js deleted file mode 100644 index d0a3d09300bc39..00000000000000 --- a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.js +++ /dev/null @@ -1,15 +0,0 @@ -import * as React from 'react'; -import GlobalStyles from '@mui/material/GlobalStyles'; - -export default function GlobalCssOverrideTheme() { - return ( - - ({ - h1: { color: theme.palette.primary.main }, - })} - /> -

    Grey h1 element

    -     - ); -} diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx.preview b/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx.preview deleted file mode 100644 index 591f0b2d5b4c93..00000000000000 --- a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx.preview +++ /dev/null @@ -1,8 +0,0 @@ - - ({ - h1: { color: theme.palette.primary.main }, - })} - /> -

    Grey h1 element

    -     \ No newline at end of file diff --git a/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.js b/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.js deleted file mode 100644 index 3b0c3d4677161c..00000000000000 --- a/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.js +++ /dev/null @@ -1,28 +0,0 @@ -import CssBaseline from '@mui/material/CssBaseline'; -import { ThemeProvider, createTheme } from '@mui/material/styles'; - -const theme = createTheme({ - palette: { - success: { - main: '#ff0000', - }, - }, - components: { - MuiCssBaseline: { - styleOverrides: (themeParam) => ` - h1 { - color: ${themeParam.palette.success.main}; - } - `, - }, - }, -}); - -export default function OverrideCallbackCssBaseline() { - return ( - - -

    h1 element

    -     - ); -} diff --git a/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.tsx.preview b/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.tsx.preview deleted file mode 100644 index b8bf6451061d82..00000000000000 --- a/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - -

    h1 element

    -     \ No newline at end of file diff --git a/docs/data/material/customization/how-to-customize/OverrideCssBaseline.js b/docs/data/material/customization/how-to-customize/OverrideCssBaseline.js deleted file mode 100644 index fcffc651118c49..00000000000000 --- a/docs/data/material/customization/how-to-customize/OverrideCssBaseline.js +++ /dev/null @@ -1,23 +0,0 @@ -import CssBaseline from '@mui/material/CssBaseline'; -import { ThemeProvider, createTheme } from '@mui/material/styles'; - -const theme = createTheme({ - components: { - MuiCssBaseline: { - styleOverrides: ` - h1 { - color: grey; - } - `, - }, - }, -}); - -export default function OverrideCssBaseline() { - return ( - - -

    Grey h1 element

    -     - ); -} diff --git a/docs/data/material/customization/how-to-customize/OverrideCssBaseline.tsx.preview b/docs/data/material/customization/how-to-customize/OverrideCssBaseline.tsx.preview deleted file mode 100644 index 3763c68e726438..00000000000000 --- a/docs/data/material/customization/how-to-customize/OverrideCssBaseline.tsx.preview +++ /dev/null @@ -1,4 +0,0 @@ - - -

    Grey h1 element

    -     \ No newline at end of file diff --git a/docs/data/material/customization/how-to-customize/StyledCustomization.js b/docs/data/material/customization/how-to-customize/StyledCustomization.js deleted file mode 100644 index d7c03d30b1045b..00000000000000 --- a/docs/data/material/customization/how-to-customize/StyledCustomization.js +++ /dev/null @@ -1,19 +0,0 @@ -import Slider from '@mui/material/Slider'; -import { alpha, styled } from '@mui/material/styles'; - -const SuccessSlider = styled(Slider)(({ theme }) => ({ - width: 300, - color: theme.palette.success.main, - '& .MuiSlider-thumb': { - '&:hover, &.Mui-focusVisible': { - boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`, - }, - '&.Mui-active': { - boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`, - }, - }, -})); - -export default function StyledCustomization() { - return ; -} diff --git a/docs/data/material/customization/how-to-customize/StyledCustomization.tsx b/docs/data/material/customization/how-to-customize/StyledCustomization.tsx deleted file mode 100644 index a3acc2287ca2d8..00000000000000 --- a/docs/data/material/customization/how-to-customize/StyledCustomization.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import Slider, { SliderProps } from '@mui/material/Slider'; -import { alpha, styled } from '@mui/material/styles'; - -const SuccessSlider = styled(Slider)(({ theme }) => ({ - width: 300, - color: theme.palette.success.main, - '& .MuiSlider-thumb': { - '&:hover, &.Mui-focusVisible': { - boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`, - }, - '&.Mui-active': { - boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`, - }, - }, -})); - -export default function StyledCustomization() { - return ; -} diff --git a/docs/data/material/customization/how-to-customize/StyledCustomization.tsx.preview b/docs/data/material/customization/how-to-customize/StyledCustomization.tsx.preview deleted file mode 100644 index deec1e19088ddc..00000000000000 --- a/docs/data/material/customization/how-to-customize/StyledCustomization.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/customization/how-to-customize/SxProp.js b/docs/data/material/customization/how-to-customize/SxProp.js deleted file mode 100644 index ff423b0e47249a..00000000000000 --- a/docs/data/material/customization/how-to-customize/SxProp.js +++ /dev/null @@ -1,5 +0,0 @@ -import Slider from '@mui/material/Slider'; - -export default function SxProp() { - return ; -} diff --git a/docs/data/material/customization/how-to-customize/SxProp.tsx b/docs/data/material/customization/how-to-customize/SxProp.tsx deleted file mode 100644 index ff423b0e47249a..00000000000000 --- a/docs/data/material/customization/how-to-customize/SxProp.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import Slider from '@mui/material/Slider'; - -export default function SxProp() { - return ; -} diff --git a/docs/data/material/customization/how-to-customize/SxProp.tsx.preview b/docs/data/material/customization/how-to-customize/SxProp.tsx.preview deleted file mode 100644 index 6c947e4412e198..00000000000000 --- a/docs/data/material/customization/how-to-customize/SxProp.tsx.preview +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/data/material/customization/how-to-customize/DevTools.tsx b/docs/data/material/customization/how-to-customize/demos/dev-tools/DevTools.tsx similarity index 85% rename from docs/data/material/customization/how-to-customize/DevTools.tsx rename to docs/data/material/customization/how-to-customize/demos/dev-tools/DevTools.tsx index be2ab7897ed18f..6f6aa362aa5efa 100644 --- a/docs/data/material/customization/how-to-customize/DevTools.tsx +++ b/docs/data/material/customization/how-to-customize/demos/dev-tools/DevTools.tsx @@ -2,6 +2,7 @@ import Slider from '@mui/material/Slider'; export default function DevTools() { return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/customization/how-to-customize/demos/dev-tools/client.ts b/docs/data/material/customization/how-to-customize/demos/dev-tools/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/dev-tools/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/how-to-customize/demos/dev-tools/index.ts b/docs/data/material/customization/how-to-customize/demos/dev-tools/index.ts new file mode 100644 index 00000000000000..ff830d62dfd3a5 --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/dev-tools/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DevTools from './DevTools'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DevTools, { ClientProvider }); diff --git a/docs/data/material/customization/how-to-customize/DynamicCSSVariables.tsx b/docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/DynamicCSSVariables.tsx similarity index 96% rename from docs/data/material/customization/how-to-customize/DynamicCSSVariables.tsx rename to docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/DynamicCSSVariables.tsx index 6e9fc508bbed08..098561de98895b 100644 --- a/docs/data/material/customization/how-to-customize/DynamicCSSVariables.tsx +++ b/docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/DynamicCSSVariables.tsx @@ -35,6 +35,7 @@ export default function DynamicCSSVariables() { }; return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/client.ts b/docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/index.ts b/docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/index.ts new file mode 100644 index 00000000000000..95af342a704693 --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/dynamic-css-variables/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DynamicCSSVariables from './DynamicCSSVariables'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DynamicCSSVariables, { ClientProvider }); diff --git a/docs/data/material/customization/how-to-customize/DynamicCSS.tsx b/docs/data/material/customization/how-to-customize/demos/dynamic-css/DynamicCSS.tsx similarity index 90% rename from docs/data/material/customization/how-to-customize/DynamicCSS.tsx rename to docs/data/material/customization/how-to-customize/demos/dynamic-css/DynamicCSS.tsx index 5e399164e84e0e..e51a13370316ad 100644 --- a/docs/data/material/customization/how-to-customize/DynamicCSS.tsx +++ b/docs/data/material/customization/how-to-customize/demos/dynamic-css/DynamicCSS.tsx @@ -1,6 +1,7 @@ import * as React from 'react'; import { alpha, styled } from '@mui/material/styles'; -import Slider, { SliderProps } from '@mui/material/Slider'; +import Slider from '@mui/material/Slider'; +import type { SliderProps } from '@mui/material/Slider'; import FormControlLabel from '@mui/material/FormControlLabel'; import Switch from '@mui/material/Switch'; @@ -38,6 +39,7 @@ export default function DynamicCSS() { }; return ( + // @focus-start @padding 2 + // @focus-end ); } diff --git a/docs/data/material/customization/how-to-customize/demos/dynamic-css/client.ts b/docs/data/material/customization/how-to-customize/demos/dynamic-css/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/dynamic-css/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/how-to-customize/demos/dynamic-css/index.ts b/docs/data/material/customization/how-to-customize/demos/dynamic-css/index.ts new file mode 100644 index 00000000000000..124ccc6a596409 --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/dynamic-css/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import DynamicCSS from './DynamicCSS'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, DynamicCSS, { ClientProvider }); diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx b/docs/data/material/customization/how-to-customize/demos/global-css-override-theme/GlobalCssOverrideTheme.tsx similarity index 87% rename from docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx rename to docs/data/material/customization/how-to-customize/demos/global-css-override-theme/GlobalCssOverrideTheme.tsx index d0a3d09300bc39..eb0df3941a3511 100644 --- a/docs/data/material/customization/how-to-customize/GlobalCssOverrideTheme.tsx +++ b/docs/data/material/customization/how-to-customize/demos/global-css-override-theme/GlobalCssOverrideTheme.tsx @@ -3,6 +3,7 @@ import GlobalStyles from '@mui/material/GlobalStyles'; export default function GlobalCssOverrideTheme() { return ( + // @focus-start @padding 2 ({ @@ -11,5 +12,6 @@ export default function GlobalCssOverrideTheme() { />

    Grey h1 element

     + // @focus-end ); } diff --git a/docs/data/material/customization/how-to-customize/demos/global-css-override-theme/client.ts b/docs/data/material/customization/how-to-customize/demos/global-css-override-theme/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/global-css-override-theme/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/how-to-customize/demos/global-css-override-theme/index.ts b/docs/data/material/customization/how-to-customize/demos/global-css-override-theme/index.ts new file mode 100644 index 00000000000000..cbc39a2864880c --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/global-css-override-theme/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GlobalCssOverrideTheme from './GlobalCssOverrideTheme'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GlobalCssOverrideTheme, { ClientProvider }); diff --git a/docs/data/material/customization/how-to-customize/GlobalCssOverride.tsx b/docs/data/material/customization/how-to-customize/demos/global-css-override/GlobalCssOverride.tsx similarity index 85% rename from docs/data/material/customization/how-to-customize/GlobalCssOverride.tsx rename to docs/data/material/customization/how-to-customize/demos/global-css-override/GlobalCssOverride.tsx index 91ae4acc113873..247c986c632846 100644 --- a/docs/data/material/customization/how-to-customize/GlobalCssOverride.tsx +++ b/docs/data/material/customization/how-to-customize/demos/global-css-override/GlobalCssOverride.tsx @@ -3,9 +3,11 @@ import GlobalStyles from '@mui/material/GlobalStyles'; export default function GlobalCssOverride() { return ( + // @focus-start @padding 2

    Grey h1 element

     + // @focus-end ); } diff --git a/docs/data/material/customization/how-to-customize/demos/global-css-override/client.ts b/docs/data/material/customization/how-to-customize/demos/global-css-override/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/global-css-override/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/how-to-customize/demos/global-css-override/index.ts b/docs/data/material/customization/how-to-customize/demos/global-css-override/index.ts new file mode 100644 index 00000000000000..e30889721d94ca --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/global-css-override/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import GlobalCssOverride from './GlobalCssOverride'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, GlobalCssOverride, { ClientProvider }); diff --git a/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.tsx b/docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/OverrideCallbackCssBaseline.tsx similarity index 92% rename from docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.tsx rename to docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/OverrideCallbackCssBaseline.tsx index 3b0c3d4677161c..ebab4d954d6be2 100644 --- a/docs/data/material/customization/how-to-customize/OverrideCallbackCssBaseline.tsx +++ b/docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/OverrideCallbackCssBaseline.tsx @@ -20,9 +20,11 @@ const theme = createTheme({ export default function OverrideCallbackCssBaseline() { return ( + // @focus-start @padding 2

    h1 element

     + // @focus-end ); } diff --git a/docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/client.ts b/docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/index.ts b/docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/index.ts new file mode 100644 index 00000000000000..f27517c70c2869 --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/override-callback-css-baseline/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import OverrideCallbackCssBaseline from './OverrideCallbackCssBaseline'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, OverrideCallbackCssBaseline, { ClientProvider }); diff --git a/docs/data/material/customization/how-to-customize/OverrideCssBaseline.tsx b/docs/data/material/customization/how-to-customize/demos/override-css-baseline/OverrideCssBaseline.tsx similarity index 90% rename from docs/data/material/customization/how-to-customize/OverrideCssBaseline.tsx rename to docs/data/material/customization/how-to-customize/demos/override-css-baseline/OverrideCssBaseline.tsx index fcffc651118c49..f8dfb05dda28ed 100644 --- a/docs/data/material/customization/how-to-customize/OverrideCssBaseline.tsx +++ b/docs/data/material/customization/how-to-customize/demos/override-css-baseline/OverrideCssBaseline.tsx @@ -15,9 +15,11 @@ const theme = createTheme({ export default function OverrideCssBaseline() { return ( + // @focus-start @padding 2

    Grey h1 element

     + // @focus-end ); } diff --git a/docs/data/material/customization/how-to-customize/demos/override-css-baseline/client.ts b/docs/data/material/customization/how-to-customize/demos/override-css-baseline/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/override-css-baseline/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/how-to-customize/demos/override-css-baseline/index.ts b/docs/data/material/customization/how-to-customize/demos/override-css-baseline/index.ts new file mode 100644 index 00000000000000..387c8ec7b8cb0b --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/override-css-baseline/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import OverrideCssBaseline from './OverrideCssBaseline'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, OverrideCssBaseline, { ClientProvider }); diff --git a/docs/data/material/customization/how-to-customize/demos/styled-customization/StyledCustomization.tsx b/docs/data/material/customization/how-to-customize/demos/styled-customization/StyledCustomization.tsx new file mode 100644 index 00000000000000..e38b19cf3d75e9 --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/styled-customization/StyledCustomization.tsx @@ -0,0 +1,23 @@ +import Slider from '@mui/material/Slider'; +import type { SliderProps } from '@mui/material/Slider'; +import { alpha, styled } from '@mui/material/styles'; + +const SuccessSlider = styled(Slider)(({ theme }) => ({ + width: 300, + color: theme.palette.success.main, + '& .MuiSlider-thumb': { + '&:hover, &.Mui-focusVisible': { + boxShadow: `0px 0px 0px 8px ${alpha(theme.palette.success.main, 0.16)}`, + }, + '&.Mui-active': { + boxShadow: `0px 0px 0px 14px ${alpha(theme.palette.success.main, 0.16)}`, + }, + }, +})); + +export default function StyledCustomization() { + return ( + // @focus @padding 2 + + ); +} diff --git a/docs/data/material/customization/how-to-customize/demos/styled-customization/client.ts b/docs/data/material/customization/how-to-customize/demos/styled-customization/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/styled-customization/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/how-to-customize/demos/styled-customization/index.ts b/docs/data/material/customization/how-to-customize/demos/styled-customization/index.ts new file mode 100644 index 00000000000000..b0c624d1aa9292 --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/styled-customization/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import StyledCustomization from './StyledCustomization'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, StyledCustomization, { ClientProvider }); diff --git a/docs/data/material/customization/how-to-customize/demos/sx-prop/SxProp.tsx b/docs/data/material/customization/how-to-customize/demos/sx-prop/SxProp.tsx new file mode 100644 index 00000000000000..89a50163dc8fc7 --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/sx-prop/SxProp.tsx @@ -0,0 +1,8 @@ +import Slider from '@mui/material/Slider'; + +export default function SxProp() { + return ( + // @focus @padding 2 + + ); +} diff --git a/docs/data/material/customization/how-to-customize/demos/sx-prop/client.ts b/docs/data/material/customization/how-to-customize/demos/sx-prop/client.ts new file mode 100644 index 00000000000000..c874a2038b3efd --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/sx-prop/client.ts @@ -0,0 +1,7 @@ +'use client'; + +import { createDemoClient } from '@mui/internal-core-docs/utils/createDemoClient'; + +const ClientProvider = createDemoClient(import.meta.url); + +export default ClientProvider; diff --git a/docs/data/material/customization/how-to-customize/demos/sx-prop/index.ts b/docs/data/material/customization/how-to-customize/demos/sx-prop/index.ts new file mode 100644 index 00000000000000..518016679b6a89 --- /dev/null +++ b/docs/data/material/customization/how-to-customize/demos/sx-prop/index.ts @@ -0,0 +1,6 @@ +import { createDemo } from '@mui/internal-core-docs/utils/createDemo'; + +import SxProp from './SxProp'; +import ClientProvider from './client'; + +export default createDemo(import.meta.url, SxProp, { ClientProvider }); diff --git a/docs/data/material/customization/how-to-customize/how-to-customize.md b/docs/data/material/customization/how-to-customize/how-to-customize.md index 1957700f8a8fa9..b5b73fb286def0 100644 --- a/docs/data/material/customization/how-to-customize/how-to-customize.md +++ b/docs/data/material/customization/how-to-customize/how-to-customize.md @@ -27,7 +27,7 @@ To change the styles of _one single instance_ of a component, you can use one of The [`sx` prop](/system/getting-started/the-sx-prop/) is the best option for adding style overrides to a single instance of a component in most cases. It can be used with all Material UI components. -{{"demo": "SxProp.js"}} +{{"component": "file://./demos/sx-prop/index.ts"}} ### Overriding nested component styles @@ -42,7 +42,7 @@ In this case, the styles are applied with `.css-ae2u5c-MuiSlider-thumb` but you dev-tools -{{"demo": "DevTools.js"}} +{{"component": "file://./demos/dev-tools/index.ts"}} :::warning These class names can't be used as CSS selectors because they are unstable. @@ -141,7 +141,7 @@ Never apply styles directly to state class names. This will impact all component To reuse the same overrides in different locations across your application, create a reusable component using the [`styled()`](/system/styled/) utility: -{{"demo": "StyledCustomization.js", "defaultCodeOpen": true}} +{{"component": "file://./demos/styled-customization/index.ts", "initialExpanded": true}} ### Dynamic overrides @@ -154,7 +154,7 @@ You can do this with **dynamic CSS** or **CSS variables**. If you are using TypeScript, you will need to update the prop's types of the new component. ::: -{{"demo": "DynamicCSS.js", "defaultCodeOpen": false}} +{{"component": "file://./demos/dynamic-css/index.ts", "collapseToEmpty": true}} ```tsx import * as React from 'react'; @@ -177,7 +177,7 @@ const StyledSlider = styled(Slider, { #### CSS variables -{{"demo": "DynamicCSSVariables.js"}} +{{"component": "file://./demos/dynamic-css-variables/index.ts"}} ## 3. Global theme overrides @@ -189,19 +189,19 @@ Visit the [Component theming customization](/material-ui/customization/theme-com To add global baseline styles for some of the HTML elements, use the `GlobalStyles` component. Here is an example of how you can override styles for the `h1` elements: -{{"demo": "GlobalCssOverride.js", "iframe": true, "height": 100}} +{{"component": "file://./demos/global-css-override/index.ts", "iframe": true, "height": 100}} The `styles` prop in the `GlobalStyles` component supports a callback in case you need to access the theme. -{{"demo": "GlobalCssOverrideTheme.js", "iframe": true, "height": 100}} +{{"component": "file://./demos/global-css-override-theme/index.ts", "iframe": true, "height": 100}} If you are already using the [CssBaseline](/material-ui/react-css-baseline/) component for setting baseline styles, you can also add these global styles as overrides for this component. Here is how you can achieve the same by using this approach. -{{"demo": "OverrideCssBaseline.js", "iframe": true, "height": 100}} +{{"component": "file://./demos/override-css-baseline/index.ts", "iframe": true, "height": 100}} The `styleOverrides` key in the `MuiCssBaseline` component slot also supports callback from which you can access the theme. Here is how you can achieve the same by using this approach. -{{"demo": "OverrideCallbackCssBaseline.js", "iframe": true, "height": 100}} +{{"component": "file://./demos/override-callback-css-baseline/index.ts", "iframe": true, "height": 100}} :::success It is a good practice to hoist the `` to a static constant, to avoid rerendering. This will ensure that the `