Merge branch 'master' into issue-38978-buttongroup-conditional-elements

.eslintrc.js

@@ -74,6 +74,7 @@ module.exports = {
         ],
       },
     ],
+    'no-continue': 'off',
     'no-constant-condition': 'error',
     // Use the proptype inheritance chain
     'no-prototype-builtins': 'off',
@@ -83,6 +84,16 @@ module.exports = {
     // Destructuring harm grep potential.
     'prefer-destructuring': 'off',
 
+    '@typescript-eslint/no-use-before-define': [
+      'error',
+      {
+        functions: false,
+        classes: true,
+        variables: true,
+      },
+    ],
+    'no-use-before-define': 'off',
+
     // disabled type-aware linting due to performance considerations
     '@typescript-eslint/dot-notation': 'off',
     'dot-notation': 'error',

apps/zero-runtime-next-app/next.config.js

@@ -10,9 +10,7 @@ const theme = createTheme({
 // @ts-ignore
 theme.applyDarkStyles = function applyDarkStyles(obj) {
   return {
-    // @TODO - Use custom stylis plugin as in docs/src/createEmotionCache.ts
-    // so that we don't need to use *
-    '* :where([data-mui-color-scheme="dark"]) &': obj,
+    ':where([data-mui-color-scheme="dark"]) &': obj,
   };
 };
 

apps/zero-runtime-vite-app/src/App.tsx

@@ -1,12 +1,41 @@
 import * as React from 'react';
-import { styled } from '@mui/zero-runtime';
+import { styled, keyframes } from '@mui/zero-runtime';
 import Slider from './Slider/ZeroSlider';
 
+const bounce = keyframes`
+  from, 20%, 53%, 80%, to {
+    transform: translate3d(0,0,0);
+  }
+  40%, 43% {
+    transform: translate3d(0, -30px, 0);
+  }
+  70% {
+    transform: translate3d(0, -15px, 0);
+  }
+  90% {
+    transform: translate3d(0,-4px,0);
+  }
+`;
+
+const bounceAnim = keyframes({
+  'from, 20%, 53%, 80%, to': {
+    transform: 'translate3d(0,0,0)',
+  },
+  '40%, 43%': {
+    transform: 'translate3d(0, -30px, 0)',
+  },
+  '70%': {
+    transform: 'translate3d(0, -15px, 0)',
+  },
+  '90%': {
+    transform: 'translate3d(0,-4px,0)',
+  },
+});
+
 const Button = styled('button', {
   name: 'MuiButton',
   slot: 'Root',
 })(
-  'color:red',
   ({ theme }: any) => ({
     fontFamily: 'sans-serif',
     backgroundColor: [theme.palette.primary.main, 'text.primary', 'background.paper'],
@@ -30,6 +59,7 @@ const HalfWidth = styled.div({
   maxHeight: 100,
   padding: 20,
   border: '1px solid #ccc',
+  animation: [`${bounce} 1s ease infinite`, `${bounceAnim} 1s ease infinite`],
 });
 
 export default function App({ isRed }: any) {

apps/zero-runtime-vite-app/vite.config.ts

@@ -10,9 +10,7 @@ const theme = createTheme();
 // @ts-ignore
 theme.applyDarkStyles = function applyDarkStyles(obj) {
   return {
-    // @TODO - Use custom stylis plugin as in docs/src/createEmotionCache.ts
-    // so that we don't need to use *
-    '* :where([data-mui-color-scheme="dark"]) &': obj,
+    ':where([data-mui-color-scheme="dark"]) &': obj,
   };
 };
 

docs/data/base/components/number-input/number-input.md

@@ -3,7 +3,7 @@ productId: base-ui
 title: React Number Input component and hook
 components: NumberInput
 hooks: useNumberInput
-githubLabel: 'component: NumberInput'
+githubLabel: 'component: number input'
 ---
 
 # Number Input

docs/data/joy/getting-started/templates/messages/components/Sidebar.tsx

@@ -19,15 +19,15 @@ import Stack from '@mui/joy/Stack';
 import SearchRoundedIcon from '@mui/icons-material/SearchRounded';
 import HomeRoundedIcon from '@mui/icons-material/HomeRounded';
 import DashboardRoundedIcon from '@mui/icons-material/DashboardRounded';
-import CollectionsBookmarkRoundedIcon from '@mui/icons-material/CollectionsBookmarkRounded';
+import ShoppingCartRoundedIcon from '@mui/icons-material/ShoppingCartRounded';
 import AssignmentRoundedIcon from '@mui/icons-material/AssignmentRounded';
 import QuestionAnswerRoundedIcon from '@mui/icons-material/QuestionAnswerRounded';
 import GroupRoundedIcon from '@mui/icons-material/GroupRounded';
 import SupportRoundedIcon from '@mui/icons-material/SupportRounded';
 import SettingsRoundedIcon from '@mui/icons-material/SettingsRounded';
 import CloseRoundedIcon from '@mui/icons-material/CloseRounded';
 import LogoutRoundedIcon from '@mui/icons-material/LogoutRounded';
-import BadgeRoundedIcon from '@mui/icons-material/BadgeRounded';
+import BrightnessAutoRoundedIcon from '@mui/icons-material/BrightnessAutoRounded';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 
 import ColorSchemeToggle from './ColorSchemeToggle';
@@ -83,8 +83,7 @@ export default function Sidebar() {
         height: '100dvh',
         width: 'var(--Sidebar-width)',
         top: 0,
-        p: 1.5,
-        py: 2,
+        p: 2,
         flexShrink: 0,
         display: 'flex',
         flexDirection: 'column',
@@ -124,9 +123,9 @@ export default function Sidebar() {
       />
       <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
         <IconButton variant="soft" color="primary" size="sm">
-          <BadgeRoundedIcon />
+          <BrightnessAutoRoundedIcon />
         </IconButton>
-        <Typography level="title-lg">Profiles</Typography>
+        <Typography level="title-lg">Acme Co.</Typography>
         <ColorSchemeToggle sx={{ ml: 'auto' }} />
       </Box>
       <Input size="sm" startDecorator={<SearchRoundedIcon />} placeholder="Search" />
@@ -169,10 +168,14 @@ export default function Sidebar() {
           </ListItem>
 
           <ListItem>
-            <ListItemButton>
-              <CollectionsBookmarkRoundedIcon />
+            <ListItemButton
+              role="menuitem"
+              component="a"
+              href="/joy-ui/getting-started/templates/order-dashboard/"
+            >
+              <ShoppingCartRoundedIcon />
               <ListItemContent>
-                <Typography level="title-sm">Projects</Typography>
+                <Typography level="title-sm">Orders</Typography>
               </ListItemContent>
             </ListItemButton>
           </ListItem>

docs/data/joy/getting-started/templates/order-dashboard/App.tsx

@@ -12,12 +12,10 @@ import ChevronRightRoundedIcon from '@mui/icons-material/ChevronRightRounded';
 import DownloadRoundedIcon from '@mui/icons-material/DownloadRounded';
 
 import useScript from './useScript';
-import FirstSidebar from './components/FirstSidebar';
-import SecondSidebar from './components/SecondSidebar';
+import Sidebar from './components/Sidebar';
 import OrderTable from './components/OrderTable';
 import OrderList from './components/OrderList';
 import Header from './components/Header';
-import ColorSchemeToggle from './components/ColorSchemeToggle';
 
 const useEnhancedEffect =
   typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
@@ -39,8 +37,7 @@ export default function JoyOrderDashboardTemplate() {
       <CssBaseline />
       <Box sx={{ display: 'flex', minHeight: '100dvh' }}>
         <Header />
-        <FirstSidebar />
-        <SecondSidebar />
+        <Sidebar />
         <Box
           component="main"
           className="MainContent"
@@ -95,9 +92,6 @@ export default function JoyOrderDashboardTemplate() {
                 Orders
               </Typography>
             </Breadcrumbs>
-            <ColorSchemeToggle
-              sx={{ ml: 'auto', display: { xs: 'none', md: 'inline-flex' } }}
-            />
           </Box>
           <Box
             sx={{

docs/data/joy/getting-started/templates/order-dashboard/components/Header.tsx

@@ -4,7 +4,6 @@ import Sheet from '@mui/joy/Sheet';
 import IconButton from '@mui/joy/IconButton';
 import MenuIcon from '@mui/icons-material/Menu';
 
-import ColorSchemeToggle from './ColorSchemeToggle';
 import { toggleSidebar } from '../utils';
 
 export default function Header() {
@@ -44,7 +43,6 @@ export default function Header() {
       >
         <MenuIcon />
       </IconButton>
-      <ColorSchemeToggle id={undefined} />
     </Sheet>
   );
 }