Bump eslint-plugin-import to ^2.28.0 (mui#38226)

benchmark/browser/scripts/benchmark.js

@@ -1,10 +1,10 @@
 /* eslint-disable no-console */
 /* eslint-disable no-await-in-loop */
-const fse = require('fs-extra');
 const path = require('path');
+const http = require('http');
+const fse = require('fs-extra');
 const playwright = require('playwright');
 const handler = require('serve-handler');
-const http = require('http');
 
 const PORT = 1122;
 

benchmark/server/scenarios/docs.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
-import Benchmark from 'benchmark';
 import fs from 'fs';
 import path from 'path';
+import Benchmark from 'benchmark';
 import * as React from 'react';
 import * as ReactDOMServer from 'react-dom/server';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';

dangerfile.ts

@@ -1,3 +1,4 @@
+/* eslint-disable import/order */
 // inspire by reacts dangerfile
 // danger has to be the first thing required!
 import { danger, markdown } from 'danger';

docs/babel.config.js

@@ -1,5 +1,5 @@
-const fse = require('fs-extra');
 const path = require('path');
+const fse = require('fs-extra');
 
 const errorCodesPath = path.resolve(__dirname, './public/static/error-codes.json');
 

docs/data/joy/components/autocomplete/AutocompleteVariables.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 import Autocomplete from '@mui/joy/Autocomplete';
 import Stack from '@mui/joy/Stack';
 import LiveTv from '@mui/icons-material/LiveTv';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 
 export default function ButtonVariables() {
   return (

docs/data/joy/components/avatar/AvatarGroupVariables.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 import AvatarGroup from '@mui/joy/AvatarGroup';
 import Avatar from '@mui/joy/Avatar';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 
 export default function AvatarGroupVariables() {
   return (

docs/data/joy/components/badge/BadgeAlignment.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import BrandingProvider from 'docs/src/BrandingProvider';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import Avatar from '@mui/joy/Avatar';
 import Badge from '@mui/joy/Badge';
 import Box from '@mui/joy/Box';
 import IconButton from '@mui/joy/IconButton';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import BrandingProvider from 'docs/src/BrandingProvider';
 
 export default function BadgeAlignment() {
   const [anchorOrigin, setAnchorOrigin] = React.useState({

docs/data/joy/components/badge/BadgeAlignment.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import BrandingProvider from 'docs/src/BrandingProvider';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import Avatar from '@mui/joy/Avatar';
 import Badge, { BadgeProps } from '@mui/joy/Badge';
 import Box from '@mui/joy/Box';
 import IconButton from '@mui/joy/IconButton';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import BrandingProvider from 'docs/src/BrandingProvider';
 
 export default function BadgeAlignment() {
   const [anchorOrigin, setAnchorOrigin] = React.useState<BadgeProps['anchorOrigin']>(

docs/data/joy/components/button-group/ButtonGroupUsage.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 import ButtonGroup from '@mui/joy/ButtonGroup';
 import Button from '@mui/joy/Button';
 import IconButton from '@mui/joy/IconButton';
 import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
 export default function ButtonUsage() {
   return (

docs/data/joy/components/button/ButtonUsage.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import IconButton from '@mui/joy/IconButton';
 import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
 export default function ButtonUsage() {
   return (

docs/data/joy/components/button/ButtonVariables.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 import Button from '@mui/joy/Button';
 import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 
 export default function ButtonVariables() {
   return (

docs/data/joy/components/button/IconButtonVariables.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 import IconButton from '@mui/joy/IconButton';
 import FavoriteBorder from '@mui/icons-material/FavoriteBorder';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 
 export default function IconButtonVariables() {
   return (

docs/data/joy/components/card/CardUsage.js

@@ -3,8 +3,8 @@ import AspectRatio from '@mui/joy/AspectRatio';
 import Button from '@mui/joy/Button';
 import Card from '@mui/joy/Card';
 import Typography from '@mui/joy/Typography';
-import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 import { CardActions, CardContent } from '@mui/joy';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
 export default function CardUsage() {
   return (

docs/data/joy/components/checkbox/CheckboxUsage.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 import Checkbox from '@mui/joy/Checkbox';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
 export default function CheckboxUsage() {
   return (

docs/data/joy/components/chip/ChipUsage.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 import Chip from '@mui/joy/Chip';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
 export default function ChipUsages() {
   return (

docs/data/joy/components/chip/ChipVariables.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 import Avatar from '@mui/joy/Avatar';
 import Box from '@mui/joy/Box';
 import Chip from '@mui/joy/Chip';
 import ChipDelete from '@mui/joy/ChipDelete';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 
 export default function ChipVariables() {
   return (

docs/data/joy/components/circular-progress/CircularProgressUsage.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 import CircularProgress from '@mui/joy/CircularProgress';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
 export default function CircularProgressUsage() {
   return (

docs/data/joy/components/circular-progress/CircularProgressVariables.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 import CircularProgress from '@mui/joy/CircularProgress';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 
 export default function CircularProgressVariables() {
   return (

docs/data/joy/components/divider/DividerUsage.js

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 import Stack from '@mui/joy/Stack';
 import Sheet from '@mui/joy/Sheet';
 import Divider from '@mui/joy/Divider';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
 export default function DividerUsage() {
   return (

docs/data/joy/components/divider/DividerUsage.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 import Stack from '@mui/joy/Stack';
 import Sheet from '@mui/joy/Sheet';
 import Divider from '@mui/joy/Divider';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
 export default function DividerUsage() {
   return (

docs/data/joy/components/grid/InteractiveGrid.js

@@ -5,6 +5,7 @@ import FormLabel from '@mui/joy/FormLabel';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
+
 import BrandingProvider from 'docs/src/BrandingProvider';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 

docs/data/joy/components/grid/InteractiveGrid.tsx

@@ -5,9 +5,9 @@ import FormLabel from '@mui/joy/FormLabel';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
+import { GridDirection } from '@mui/system';
 import BrandingProvider from 'docs/src/BrandingProvider';
 import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
-import { GridDirection } from '@mui/system';
 
 type GridItemsAlignment =
   | 'flex-start'

docs/data/joy/components/grid/SpacingGrid.js

@@ -2,11 +2,11 @@ import * as React from 'react';
 import Grid from '@mui/joy/Grid';
 import FormLabel from '@mui/joy/FormLabel';
 import FormControl from '@mui/joy/FormControl';
-import BrandingProvider from 'docs/src/BrandingProvider';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import BrandingProvider from 'docs/src/BrandingProvider';
 
 export default function SpacingGrid() {
   const [spacing, setSpacing] = React.useState(2);

docs/data/joy/components/grid/SpacingGrid.tsx

@@ -2,11 +2,11 @@ import * as React from 'react';
 import Grid from '@mui/joy/Grid';
 import FormLabel from '@mui/joy/FormLabel';
 import FormControl from '@mui/joy/FormControl';
-import BrandingProvider from 'docs/src/BrandingProvider';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Sheet from '@mui/joy/Sheet';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import BrandingProvider from 'docs/src/BrandingProvider';
 
 export default function SpacingGrid() {
   const [spacing, setSpacing] = React.useState(2);

docs/data/joy/components/input/InputUsage.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 import Input from '@mui/joy/Input';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
 export default function InputUsage() {
   return (

docs/data/joy/components/input/InputVariables.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 import Box from '@mui/joy/Box';
 import Input from '@mui/joy/Input';
 import Button from '@mui/joy/Button';
 import MailIcon from '@mui/icons-material/Mail';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 
 export default function InputVariables() {
   return (

docs/data/joy/components/linear-progress/LinearProgressUsage.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 import LinearProgress from '@mui/joy/LinearProgress';
 import Box from '@mui/joy/Box';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
 export default function LinearProgressUsage() {
   return (

docs/data/joy/components/linear-progress/LinearProgressVariables.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 import LinearProgress from '@mui/joy/LinearProgress';
 import Box from '@mui/joy/Box';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 
 export default function LinearProgressVariables() {
   return (

docs/data/joy/components/linear-progress/LinearProgressVariables.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 import LinearProgress from '@mui/joy/LinearProgress';
 import Box from '@mui/joy/Box';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 
 export default function LinearProgressVariables() {
   return (

docs/data/joy/components/list/ListVariables.js

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 import Avatar from '@mui/joy/Avatar';
 import IconButton from '@mui/joy/IconButton';
 import List from '@mui/joy/List';
@@ -12,6 +11,7 @@ import Sheet from '@mui/joy/Sheet';
 import Home from '@mui/icons-material/Home';
 import Apps from '@mui/icons-material/Apps';
 import MoreVert from '@mui/icons-material/MoreVert';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 
 export default function ListVariables() {
   return (

docs/data/joy/components/menu/MenuUsage.js

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 import Box from '@mui/joy/Box';
 import MenuButton from '@mui/joy/MenuButton';
 import Menu from '@mui/joy/Menu';
 import MenuItem from '@mui/joy/MenuItem';
 import ListDivider from '@mui/joy/ListDivider';
 import Dropdown from '@mui/joy/Dropdown';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
 export default function MenuUsage() {
   return (

docs/data/joy/components/modal/ModalUsage.js

@@ -1,12 +1,12 @@
 import * as React from 'react';
-import JoyUsageDemo, {
-  prependLinesSpace,
-} from 'docs/src/modules/components/JoyUsageDemo';
 import Button from '@mui/joy/Button';
 import Modal from '@mui/joy/Modal';
 import ModalClose from '@mui/joy/ModalClose';
 import ModalDialog from '@mui/joy/ModalDialog';
 import Typography from '@mui/joy/Typography';
+import JoyUsageDemo, {
+  prependLinesSpace,
+} from 'docs/src/modules/components/JoyUsageDemo';
 
 export default function ModalUsage() {
   const [open, setOpen] = React.useState(false);

docs/data/joy/components/radio-button/RadioUsage.js

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 import FormControl from '@mui/joy/FormControl';
 import FormLabel from '@mui/joy/FormLabel';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
 export default function RadioUsage() {
   return (

docs/data/joy/components/sheet/SheetUsage.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 import Sheet from '@mui/joy/Sheet';
+import JoyUsageDemo from 'docs/src/modules/components/JoyUsageDemo';
 
 export default function SheetUsage() {
   return (

docs/data/joy/components/slider/SliderVariables.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 import Slider from '@mui/joy/Slider';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 
 export default function SliderVariables() {
   return (

docs/data/joy/components/stack/InteractiveStack.js

@@ -2,13 +2,13 @@ import * as React from 'react';
 import FormControl from '@mui/joy/FormControl';
 import FormLabel from '@mui/joy/FormLabel';
 import Grid from '@mui/joy/Grid';
-import BrandingProvider from 'docs/src/BrandingProvider';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import Sheet from '@mui/joy/Sheet';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Stack from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import BrandingProvider from 'docs/src/BrandingProvider';
 
 const Item = styled(Sheet)(({ theme }) => ({
   backgroundColor:

docs/data/joy/components/stack/InteractiveStack.tsx

@@ -2,13 +2,13 @@ import * as React from 'react';
 import FormControl from '@mui/joy/FormControl';
 import FormLabel from '@mui/joy/FormLabel';
 import Grid from '@mui/joy/Grid';
-import BrandingProvider from 'docs/src/BrandingProvider';
-import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
 import Sheet from '@mui/joy/Sheet';
 import RadioGroup from '@mui/joy/RadioGroup';
 import Radio from '@mui/joy/Radio';
 import Stack, { StackProps } from '@mui/joy/Stack';
 import { styled } from '@mui/joy/styles';
+import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
+import BrandingProvider from 'docs/src/BrandingProvider';
 
 const Item = styled(Sheet)(({ theme }) => ({
   backgroundColor:

docs/data/joy/components/switch/SwitchVariables.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
-import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 import Switch from '@mui/joy/Switch';
 import Typography from '@mui/joy/Typography';
+import JoyVariablesDemo from 'docs/src/modules/components/JoyVariablesDemo';
 
 export default function SwitchVariables() {
   return (