diff --git a/docs/data/base/components/number-input/number-input.md b/docs/data/base/components/number-input/number-input.md index d00eacecc62f90..93b3d9562c69bd 100644 --- a/docs/data/base/components/number-input/number-input.md +++ b/docs/data/base/components/number-input/number-input.md @@ -94,7 +94,7 @@ The following code snippet: ## Hook ```js -import useNumberInput from '@mui/base/unstable_useNumberInput'; +import { unstable_useNumberInput as useNumberInput } from '@mui/base/unstable_useNumberInput'; ``` The `useNumberInput` hook lets you apply the functionality of a Number Input to a fully custom component. diff --git a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.js b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.js index 05cd2ca21960ce..b34b4e6c75f3db 100644 --- a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.js +++ b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.js @@ -86,7 +86,6 @@ export default function BaseButtonPlainCss() { - diff --git a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx index 05cd2ca21960ce..b34b4e6c75f3db 100644 --- a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx +++ b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx @@ -86,7 +86,6 @@ export default function BaseButtonPlainCss() { - diff --git a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx.preview b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx.preview index 7235640e360d3d..57ba0be3dc5ef8 100644 --- a/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx.preview +++ b/docs/data/base/getting-started/quickstart/BaseButtonPlainCss.tsx.preview @@ -2,7 +2,6 @@ - diff --git a/docs/data/joy/customization/dark-mode/dark-mode-pt.md b/docs/data/joy/customization/dark-mode/dark-mode-pt.md deleted file mode 100644 index 030974a641d946..00000000000000 --- a/docs/data/joy/customization/dark-mode/dark-mode-pt.md +++ /dev/null @@ -1,106 +0,0 @@ -# Applying dark mode - -

A how-to-guide for applying dark mode to your application with Joy UI.

- -## The mode-toggle component - -In the example below, we're using a `Button` component that calls `setMode` from the `useColorSchemes()` hook to handle the mode toggling. - -```js -import { useColorScheme } from '@mui/joy/styles'; -import Button from '@mui/joy/Button'; - -function ModeToggle() { - const { mode, setMode } = useColorScheme(); - return ( - - ); -} -``` - -{{"demo": "ModeToggle.js"}} - -:::warning -**Note:** Make sure to use `useColorScheme()` in a component that's inside ``, otherwise it will throw an error. -::: - -## Server-side rendering - -### Avoid hydration mismatch - -Make sure to render the UI when the page is mounted on the client. - -This is because the `mode` will only be available to the client-side (it is `undefined` on the server). If you try to render your UI based on the server, before mounting on the client, you'll see a hydration mismatch error. - -```diff - function ModeToggle() { - const { mode, setMode } = useColorScheme(); - const [mounted, setMounted] = React.useState(false); - -+ React.useEffect(() => { -+ setMounted(true); -+ }, []); -+ -+ if (!mounted) { -+ // to avoid layout shift, render a placeholder button -+ return - ); - }; -``` - -### Avoiding screen flickering - -To prevent [the UI of flickering](/joy-ui/main-features/perfect-dark-mode/#the-current-flickering-problem), apply `getInitColorSchemeScript()` before the main application script－it varies across frameworks: - -### Next.js - -To use the Joy UI API with a Next.js project, add the following code to the custom [`pages/_document.js`](https://nextjs.org/docs/advanced-features/custom-document) file: - -```jsx -import Document, { Html, Head, Main, NextScript } from 'next/document'; -import { getInitColorSchemeScript } from '@mui/joy/styles'; - -export default class MyDocument extends Document { - render() { - return ( - - ... - - {getInitColorSchemeScript()} -
- - - - ); - } -} -``` - -### Gatsby - -To use the Joy UI API with a Next.js project, add the following code to the custom [`gatsby-ssr.js`](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/) file: - -```jsx -import * as React from 'react'; -import { getInitColorSchemeScript } from '@mui/joy/styles'; - -export function onRenderBody({ setPreBodyComponents }) { - setPreBodyComponents([getInitColorSchemeScript()]); -} -``` diff --git a/docs/data/joy/customization/dark-mode/dark-mode-zh.md b/docs/data/joy/customization/dark-mode/dark-mode-zh.md deleted file mode 100644 index 030974a641d946..00000000000000 --- a/docs/data/joy/customization/dark-mode/dark-mode-zh.md +++ /dev/null @@ -1,106 +0,0 @@ -# Applying dark mode - -

A how-to-guide for applying dark mode to your application with Joy UI.

- -## The mode-toggle component - -In the example below, we're using a `Button` component that calls `setMode` from the `useColorSchemes()` hook to handle the mode toggling. - -```js -import { useColorScheme } from '@mui/joy/styles'; -import Button from '@mui/joy/Button'; - -function ModeToggle() { - const { mode, setMode } = useColorScheme(); - return ( - - ); -} -``` - -{{"demo": "ModeToggle.js"}} - -:::warning -**Note:** Make sure to use `useColorScheme()` in a component that's inside ``, otherwise it will throw an error. -::: - -## Server-side rendering - -### Avoid hydration mismatch - -Make sure to render the UI when the page is mounted on the client. - -This is because the `mode` will only be available to the client-side (it is `undefined` on the server). If you try to render your UI based on the server, before mounting on the client, you'll see a hydration mismatch error. - -```diff - function ModeToggle() { - const { mode, setMode } = useColorScheme(); - const [mounted, setMounted] = React.useState(false); - -+ React.useEffect(() => { -+ setMounted(true); -+ }, []); -+ -+ if (!mounted) { -+ // to avoid layout shift, render a placeholder button -+ return - ); - }; -``` - -### Avoiding screen flickering - -To prevent [the UI of flickering](/joy-ui/main-features/perfect-dark-mode/#the-current-flickering-problem), apply `getInitColorSchemeScript()` before the main application script－it varies across frameworks: - -### Next.js - -To use the Joy UI API with a Next.js project, add the following code to the custom [`pages/_document.js`](https://nextjs.org/docs/advanced-features/custom-document) file: - -```jsx -import Document, { Html, Head, Main, NextScript } from 'next/document'; -import { getInitColorSchemeScript } from '@mui/joy/styles'; - -export default class MyDocument extends Document { - render() { - return ( - - ... - - {getInitColorSchemeScript()} -
- - - - ); - } -} -``` - -### Gatsby - -To use the Joy UI API with a Next.js project, add the following code to the custom [`gatsby-ssr.js`](https://www.gatsbyjs.com/docs/reference/config-files/gatsby-ssr/) file: - -```jsx -import * as React from 'react'; -import { getInitColorSchemeScript } from '@mui/joy/styles'; - -export function onRenderBody({ setPreBodyComponents }) { - setPreBodyComponents([getInitColorSchemeScript()]); -} -``` diff --git a/docs/data/joy/customization/dark-mode/dark-mode.md b/docs/data/joy/customization/dark-mode/dark-mode.md index 586e7fce0713bb..f5f081179cd6bc 100644 --- a/docs/data/joy/customization/dark-mode/dark-mode.md +++ b/docs/data/joy/customization/dark-mode/dark-mode.md @@ -134,7 +134,7 @@ import { getInitColorSchemeScript } from '@mui/joy/styles'; export default class MyDocument extends Document { render() { return ( - + ... {getInitColorSchemeScript()} diff --git a/docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md b/docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md index 290122373edb9f..55fd3ae03d4948 100644 --- a/docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md +++ b/docs/data/joy/main-features/dark-mode-optimization/dark-mode-optimization.md @@ -39,7 +39,7 @@ import { getInitColorSchemeScript } from '@mui/joy/styles'; export default class MyDocument extends Document { render() { return ( - + ... {getInitColorSchemeScript()} diff --git a/docs/data/material/experimental-api/css-theme-variables/migration.md b/docs/data/material/experimental-api/css-theme-variables/migration.md index 9d7bf243912f0d..e3b3c9e8a5bb53 100644 --- a/docs/data/material/experimental-api/css-theme-variables/migration.md +++ b/docs/data/material/experimental-api/css-theme-variables/migration.md @@ -193,7 +193,7 @@ import { getInitColorSchemeScript } from '@mui/material/styles'; export default class MyDocument extends Document { render() { return ( - + ... {getInitColorSchemeScript()} diff --git a/docs/data/material/experimental-api/css-theme-variables/usage.md b/docs/data/material/experimental-api/css-theme-variables/usage.md index 86a8b708c41fb6..a1ea23f2a64609 100644 --- a/docs/data/material/experimental-api/css-theme-variables/usage.md +++ b/docs/data/material/experimental-api/css-theme-variables/usage.md @@ -133,7 +133,7 @@ import { getInitColorSchemeScript } from '@mui/material/styles'; export default class MyDocument extends Document { render() { return ( - + ... {getInitColorSchemeScript()} diff --git a/docs/pages/_document.js b/docs/pages/_document.js index c64520eac1c394..9d74dc2a55b3b5 100644 --- a/docs/pages/_document.js +++ b/docs/pages/_document.js @@ -41,7 +41,7 @@ export default class MyDocument extends Document { const { canonicalAsServer, userLanguage } = this.props; return ( - + {/* manifest.json provides metadata used when your web app is added to the @@ -146,6 +146,13 @@ export default class MyDocument extends Document { '.mode-dark .only-dark-mode': { display: 'block', }, + // TODO migrate to .only-dark-mode to .only-dark-mode-v2 + '[data-mui-color-scheme="light"] .only-dark-mode-v2': { + display: 'none', + }, + '[data-mui-color-scheme="dark"] .only-light-mode-v2': { + display: 'none', + }, '.plan-pro, .plan-premium': { display: 'inline-block', height: '1em', diff --git a/docs/pages/blog/first-look-at-joy.md b/docs/pages/blog/first-look-at-joy.md index 1e2ff5c23e8f1d..bc5a205248ddf6 100644 --- a/docs/pages/blog/first-look-at-joy.md +++ b/docs/pages/blog/first-look-at-joy.md @@ -103,7 +103,7 @@ import { getInitColorSchemeScript } from '@mui/joy/styles'; export default class MyDocument extends Document { render() { return ( - + ... {getInitColorSchemeScript()} diff --git a/docs/pages/careers.tsx b/docs/pages/careers.tsx index 42a5bee8d9c58c..1be0e2a1451f20 100644 --- a/docs/pages/careers.tsx +++ b/docs/pages/careers.tsx @@ -330,12 +330,9 @@ function CareersContent() { ], ['Time off:', 'We provide 33 days of paid time off globally.'], ].map((textArray) => ( - - - + + + {`${textArray[0]} `} {textArray[1]} diff --git a/docs/public/static/branding/companies/nasa-light.svg b/docs/public/static/branding/companies/nasa-light.svg deleted file mode 100644 index e2f7c84bbf9c88..00000000000000 --- a/docs/public/static/branding/companies/nasa-light.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - \ No newline at end of file diff --git a/docs/public/static/branding/companies/nasa-dark.svg b/docs/public/static/branding/companies/nasa.svg similarity index 100% rename from docs/public/static/branding/companies/nasa-dark.svg rename to docs/public/static/branding/companies/nasa.svg diff --git a/docs/public/static/branding/companies/netflix-light.svg b/docs/public/static/branding/companies/netflix-light.svg deleted file mode 100644 index 400c3d74d6434d..00000000000000 --- a/docs/public/static/branding/companies/netflix-light.svg +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - - - - - - \ No newline at end of file diff --git a/docs/public/static/branding/companies/netflix-dark.svg b/docs/public/static/branding/companies/netflix.svg similarity index 100% rename from docs/public/static/branding/companies/netflix-dark.svg rename to docs/public/static/branding/companies/netflix.svg diff --git a/docs/public/static/branding/companies/salesforce-light.svg b/docs/public/static/branding/companies/salesforce-light.svg deleted file mode 100644 index e2738cf286f860..00000000000000 --- a/docs/public/static/branding/companies/salesforce-light.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - \ No newline at end of file diff --git a/docs/public/static/branding/companies/salesforce-dark.svg b/docs/public/static/branding/companies/salesforce.svg similarity index 100% rename from docs/public/static/branding/companies/salesforce-dark.svg rename to docs/public/static/branding/companies/salesforce.svg diff --git a/docs/public/static/branding/companies/samsung-light.svg b/docs/public/static/branding/companies/samsung-light.svg deleted file mode 100644 index ef13739bb1f35a..00000000000000 --- a/docs/public/static/branding/companies/samsung-light.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - \ No newline at end of file diff --git a/docs/public/static/branding/companies/samsung-dark.svg b/docs/public/static/branding/companies/samsung.svg similarity index 99% rename from docs/public/static/branding/companies/samsung-dark.svg rename to docs/public/static/branding/companies/samsung.svg index ef13739bb1f35a..7a373423e0e920 100644 --- a/docs/public/static/branding/companies/samsung-dark.svg +++ b/docs/public/static/branding/companies/samsung.svg @@ -1,4 +1,4 @@ - \ No newline at end of file + diff --git a/docs/public/static/branding/companies/siemens-light.svg b/docs/public/static/branding/companies/siemens-light.svg deleted file mode 100644 index 81322130f31f7d..00000000000000 --- a/docs/public/static/branding/companies/siemens-light.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/docs/public/static/branding/companies/siemens-dark.svg b/docs/public/static/branding/companies/siemens.svg similarity index 100% rename from docs/public/static/branding/companies/siemens-dark.svg rename to docs/public/static/branding/companies/siemens.svg diff --git a/docs/public/static/branding/companies/twitter-light.svg b/docs/public/static/branding/companies/twitter-light.svg deleted file mode 100644 index 3fb727fc738d31..00000000000000 --- a/docs/public/static/branding/companies/twitter-light.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - \ No newline at end of file diff --git a/docs/public/static/branding/companies/twitter-dark.svg b/docs/public/static/branding/companies/twitter.svg similarity index 100% rename from docs/public/static/branding/companies/twitter-dark.svg rename to docs/public/static/branding/companies/twitter.svg diff --git a/docs/src/components/home/CompaniesGrid.tsx b/docs/src/components/home/CompaniesGrid.tsx index 0f6b963bda358d..e5ef0f15b9482f 100644 --- a/docs/src/components/home/CompaniesGrid.tsx +++ b/docs/src/components/home/CompaniesGrid.tsx @@ -4,32 +4,40 @@ import IconImage, { IconImageProps } from 'docs/src/components/icon/IconImage'; export const CORE_CUSTOMERS: Array = [ { - name: 'spotify', + alt: 'Spotify logo', + name: 'companies/spotify', width: 100, height: 52, }, { - name: 'amazon', + alt: 'Amazon logo', + name: 'companies/amazon', width: 80, height: 52, }, { - name: 'nasa', + alt: 'Nasa logo', + name: 'companies/nasa', + mode: '', width: 52, height: 42, }, { - name: 'netflix', + alt: 'Netflix logo', + name: 'companies/netflix', + mode: '', width: 80, height: 52, }, { - name: 'unity', + alt: 'Unity logo', + name: 'companies/unity', width: 69, height: 52, }, { - name: 'shutterstock', + alt: 'Shutterstock logo', + name: 'companies/shutterstock', width: 100, height: 52, }, @@ -37,7 +45,8 @@ export const CORE_CUSTOMERS: Array = [ export const ADVANCED_CUSTOMERS: Array = [ { - name: 'southwest', + alt: 'Southwest logo', + name: 'companies/southwest', width: 130, height: 54, style: { @@ -45,7 +54,8 @@ export const ADVANCED_CUSTOMERS: Array = [ }, }, { - name: 'boeing', + alt: 'Boeing logo', + name: 'companies/boeing', width: 160, height: 86, style: { @@ -53,7 +63,8 @@ export const ADVANCED_CUSTOMERS: Array = [ }, }, { - name: 'apple', + alt: 'Apple logo', + name: 'companies/apple', width: 29, height: 52, style: { @@ -61,7 +72,9 @@ export const ADVANCED_CUSTOMERS: Array = [ }, }, { - name: 'siemens', + alt: 'Siemens logo', + name: 'companies/siemens', + mode: '', width: 119, height: 59, style: { @@ -69,7 +82,8 @@ export const ADVANCED_CUSTOMERS: Array = [ }, }, { - name: 'volvo', + alt: 'Volvo logo', + name: 'companies/volvo', width: 128, height: 52, style: { @@ -77,7 +91,8 @@ export const ADVANCED_CUSTOMERS: Array = [ }, }, { - name: 'deloitte', + alt: 'Deloitte logo', + name: 'companies/deloitte', width: 97, height: 52, style: { @@ -88,32 +103,41 @@ export const ADVANCED_CUSTOMERS: Array = [ export const DESIGNKITS_CUSTOMERS: Array = [ { - name: 'spotify', + alt: 'Spotify logo', + name: 'companies/spotify', width: 100, height: 52, }, { - name: 'amazon', + alt: 'Amazon logo', + name: 'companies/amazon', width: 80, height: 52, }, { - name: 'apple', + alt: 'Apple logo', + name: 'companies/apple', width: 29, height: 52, }, { - name: 'netflix', + alt: 'Netflix logo', + name: 'companies/netflix', + mode: '', width: 80, height: 52, }, { - name: 'twitter', + alt: 'Twitter logo', + name: 'companies/twitter', + mode: '', width: 31, height: 52, }, { - name: 'salesforce', + alt: 'Salesforce logo', + name: 'companies/salesforce', + mode: '', width: 50, height: 52, }, @@ -121,33 +145,39 @@ export const DESIGNKITS_CUSTOMERS: Array = [ export const TEMPLATES_CUSTOMERS: Array = [ { - name: 'ebay', + alt: 'Ebay logo', + name: 'companies/ebay', width: 73, height: 52, }, { - name: 'amazon', + alt: 'Amazon logo', + name: 'companies/amazon', width: 80, height: 52, }, { - name: 'samsung', + alt: 'Samsung logo', + name: 'companies/samsung', + mode: '', width: 88, height: 52, }, { - name: 'patreon', + alt: 'Patreon logo', + name: 'companies/patreon', width: 103, height: 52, }, { - name: 'atandt', alt: 'AT&T logo', + name: 'companies/atandt', width: 71, height: 52, }, { - name: 'verizon', + alt: 'Verizon logo', + name: 'companies/verizon', width: 91, height: 52, }, @@ -170,7 +200,7 @@ export default function CompaniesGrid({ data }: { data: Array }) objectFit: 'contain', }} > - + ))} diff --git a/docs/src/components/home/ProductsSwitcher.tsx b/docs/src/components/home/ProductsSwitcher.tsx index 539597ab3e9371..a92fcbba30beac 100644 --- a/docs/src/components/home/ProductsSwitcher.tsx +++ b/docs/src/components/home/ProductsSwitcher.tsx @@ -74,7 +74,10 @@ function ProductItem({ event.stopPropagation(); }} > - Learn more {label} + Learn more{' '} + + {label} + diff --git a/docs/src/components/home/References.tsx b/docs/src/components/home/References.tsx index 54a8d76e109410..7446089a031e53 100644 --- a/docs/src/components/home/References.tsx +++ b/docs/src/components/home/References.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; import dynamic from 'next/dynamic'; -import { useInView } from 'react-intersection-observer'; import Box from '@mui/material/Box'; import Typography from '@mui/material/Typography'; import Section from 'docs/src/layouts/Section'; @@ -24,14 +23,10 @@ export default function References({ | typeof DESIGNKITS_CUSTOMERS | typeof TEMPLATES_CUSTOMERS; }) { - const { ref, inView } = useInView({ - triggerOnce: true, - threshold: 0, - }); return ( -
+
- {inView && } + ; + mode?: '' | 'light' | 'dark'; sx?: SxProps; - title?: string; width?: number; } & Omit; @@ -48,67 +46,67 @@ const Img = styled('img')({ display: 'inline-block', verticalAlign: 'bottom' }); let neverHydrated = true; export default function IconImage(props: IconImageProps) { - const { height: heightProp, name, title, width: widthProp, ...other } = props; + const { height: heightProp, name, width: widthProp, mode: modeProp, ...other } = props; const theme = useTheme(); - const [mounted, setMounted] = React.useState(false); + const [firstRender, setFirstRender] = React.useState(true); React.useEffect(() => { - neverHydrated = false; - setMounted(true); + if (neverHydrated) { + setFirstRender(false); + neverHydrated = false; + } }, []); let defaultWidth; let defaultHeight; - let category = ''; - let mode = `-${theme.palette.mode}`; + const mode = modeProp ?? (theme.palette.mode as any); if (name.startsWith('product-')) { defaultWidth = 36; defaultHeight = 36; - } else if (name.startsWith('x-plan-')) { - category = 'pricing/'; - mode = ''; + } else if (name.startsWith('pricing/x-plan-')) { defaultWidth = 13; defaultHeight = 15; - } else if (['yes', 'no', 'time'].indexOf(name) !== -1) { - category = 'pricing/'; + } else if (['pricing/yes', 'pricing/no', 'pricing/time'].indexOf(name) !== -1) { defaultWidth = 18; defaultHeight = 18; - } else if ( - [ - 'spotify', - 'amazon', - 'nasa', - 'netflix', - 'unity', - 'shutterstock', - 'southwest', - 'boeing', - 'siemens', - 'deloitte', - 'apple', - 'twitter', - 'salesforce', - 'volvo', - 'verizon', - 'atandt', - 'patreon', - 'ebay', - 'samsung', - ].indexOf(name) !== -1 - ) { - category = 'companies/'; } const width = widthProp ?? defaultWidth; const height = heightProp ?? defaultHeight; - if (!mounted && neverHydrated && !!theme.vars && mode !== '') { + // First time render with a theme depend image + if (firstRender && neverHydrated && mode !== '') { + if (other.loading === 'eager') { + return ( + + + + + ); + } + // Prevent hydration mismatch between the light and dark mode image source. return ; } - const child = ( + return ( ); - - if (title) { - return {child}; - } - - return child; } diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx index 3e2c12975d1b15..cba5f64e9286a8 100644 --- a/docs/src/components/pricing/PricingTable.tsx +++ b/docs/src/components/pricing/PricingTable.tsx @@ -19,17 +19,17 @@ import { useLicensingModel } from 'docs/src/components/pricing/LicensingModelCon const planInfo = { community: { - iconName: 'x-plan-community', + iconName: 'pricing/x-plan-community', title: 'Community', description: 'Get started with the industry-standard React UI library, MIT-licensed.', }, pro: { - iconName: 'x-plan-pro', + iconName: 'pricing/x-plan-pro', title: 'Pro', description: 'Best for professional developers building enterprise or data-rich applications.', }, premium: { - iconName: 'x-plan-premium', + iconName: 'pricing/x-plan-premium', title: 'Premium', description: 'The most advanced features for data-rich applications, as well as the highest priority for support.', @@ -57,7 +57,7 @@ export function PlanName({ fontWeight="bold" sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', pr: 0.5 }} > - {title} + {title} {!disableDescription && ( = { ), }; -const yes = ; -const pending = ; -const no = ; +const yes = ; +const pending = ; +const no = ; const communityData: Record = { // MUI Core diff --git a/docs/src/components/productMaterial/MaterialStyling.tsx b/docs/src/components/productMaterial/MaterialStyling.tsx index fe823ae53835b1..47ae8ae3cc1c36 100644 --- a/docs/src/components/productMaterial/MaterialStyling.tsx +++ b/docs/src/components/productMaterial/MaterialStyling.tsx @@ -42,7 +42,7 @@ const code = ` }} /> - + 123 Main St, Phoenix, AZ diff --git a/docs/src/components/productMaterial/MaterialTemplates.tsx b/docs/src/components/productMaterial/MaterialTemplates.tsx index 8534e82854d9d3..17f5cc3cd3fa0c 100644 --- a/docs/src/components/productMaterial/MaterialTemplates.tsx +++ b/docs/src/components/productMaterial/MaterialTemplates.tsx @@ -19,7 +19,78 @@ import Frame from 'docs/src/components/action/Frame'; import Link from 'docs/src/modules/components/Link'; import More from 'docs/src/components/action/More'; -const DEMOS = ['Dashboard', 'Landing Pages', 'E-commerce']; +export const DEMOS = ['Dashboard', 'Landing Pages', 'E-commerce']; + +export const icons = { + [DEMOS[0]]: , + [DEMOS[1]]: , + [DEMOS[2]]: , +}; + +export const TEMPLATES = { + [DEMOS[0]]: [ + { + name: 'Devias Kit Pro - Client & Admin Dashboard', + src: { + light: '/static/branding/store-templates/template-4light.jpg', + dark: '/static/branding/store-templates/template-4dark.jpg', + }, + href: 'https://mui.com/store/items/devias-kit-pro/', + }, + { + name: 'Minimal - Client & Admin Dashboard', + src: { + light: '/static/branding/store-templates/template-1light.jpg', + dark: '/static/branding/store-templates/template-1dark.jpg', + }, + href: 'https://mui.com/store/items/minimal-dashboard/', + }, + { + name: 'Berry - React Material Admin Dashboard Template', + src: { + light: '/static/branding/store-templates/template-5light.jpg', + dark: '/static/branding/store-templates/template-5dark.jpg', + }, + href: 'https://mui.com/store/items/berry-react-material-admin/', + }, + { + name: 'Mira Pro - React Material Admin Dashboard', + src: { + light: '/static/branding/store-templates/template-3light.jpg', + dark: '/static/branding/store-templates/template-3dark.jpg', + }, + href: 'https://mui.com/store/items/mira-pro-react-material-admin-dashboard/', + }, + ], + [DEMOS[1]]: [ + { + name: 'theFront - Multipurpose Template + UI Kit', + src: { + light: '/static/branding/store-templates/template-2light.jpg', + dark: '/static/branding/store-templates/template-2dark.jpg', + }, + href: 'https://mui.com/store/items/the-front-landing-page/', + }, + { + name: 'Webbee - Multipurpose landing page UI Kit', + src: { + light: '/static/branding/store-templates/template-6light.jpg', + dark: '/static/branding/store-templates/template-6dark.jpg', + }, + href: 'https://mui.com/store/items/webbee-landing-page/', + }, + ], + [DEMOS[2]]: [ + { + name: 'Bazar Pro - Multipurpose React Ecommerce Template', + src: { + light: '/static/branding/store-templates/template-bazar-light.jpg', + dark: '/static/branding/store-templates/template-bazar-dark.jpg', + }, + href: 'https://mui.com/store/items/bazar-pro-react-ecommerce-template/', + }, + ], +}; function ActionArea(props: ButtonBaseProps) { return ( @@ -54,77 +125,6 @@ function ActionArea(props: ButtonBaseProps) { export default function MaterialTemplates() { const [demo, setDemo] = React.useState(DEMOS[0]); const [templateIndex, setTemplateIndex] = React.useState(1); - const icons = { - [DEMOS[0]]: , - [DEMOS[1]]: , - [DEMOS[2]]: , - }; - - const TEMPLATES = { - [DEMOS[0]]: [ - { - name: 'Devias Kit Pro - Client & Admin Dashboard', - src: { - light: '/static/branding/store-templates/template-4light.jpg', - dark: '/static/branding/store-templates/template-4dark.jpg', - }, - href: 'https://mui.com/store/items/devias-kit-pro/', - }, - { - name: 'Minimal - Client & Admin Dashboard', - src: { - light: '/static/branding/store-templates/template-1light.jpg', - dark: '/static/branding/store-templates/template-1dark.jpg', - }, - href: 'https://mui.com/store/items/minimal-dashboard/', - }, - { - name: 'Berry - React Material Admin Dashboard Template', - src: { - light: '/static/branding/store-templates/template-5light.jpg', - dark: '/static/branding/store-templates/template-5dark.jpg', - }, - href: 'https://mui.com/store/items/berry-react-material-admin/', - }, - { - name: 'Mira Pro - React Material Admin Dashboard', - src: { - light: '/static/branding/store-templates/template-3light.jpg', - dark: '/static/branding/store-templates/template-3dark.jpg', - }, - href: 'https://mui.com/store/items/mira-pro-react-material-admin-dashboard/', - }, - ], - [DEMOS[1]]: [ - { - name: 'theFront - Multipurpose Template + UI Kit', - src: { - light: '/static/branding/store-templates/template-2light.jpg', - dark: '/static/branding/store-templates/template-2dark.jpg', - }, - href: 'https://mui.com/store/items/the-front-landing-page/', - }, - { - name: 'Webbee - Multipurpose landing page UI Kit', - src: { - light: '/static/branding/store-templates/template-6light.jpg', - dark: '/static/branding/store-templates/template-6dark.jpg', - }, - href: 'https://mui.com/store/items/webbee-landing-page/', - }, - ], - [DEMOS[2]]: [ - { - name: 'Bazar Pro - Multipurpose React Ecommerce Template', - src: { - light: '/static/branding/store-templates/template-bazar-light.jpg', - dark: '/static/branding/store-templates/template-bazar-dark.jpg', - }, - href: 'https://mui.com/store/items/bazar-pro-react-ecommerce-template/', - }, - ], - }; - const templates = TEMPLATES[demo]; return ( diff --git a/docs/src/components/productTemplate/TemplateDemo.tsx b/docs/src/components/productTemplate/TemplateDemo.tsx index 4832ea63cf35d0..228267cfa491a9 100644 --- a/docs/src/components/productTemplate/TemplateDemo.tsx +++ b/docs/src/components/productTemplate/TemplateDemo.tsx @@ -6,9 +6,6 @@ import ButtonBase, { ButtonBaseProps } from '@mui/material/ButtonBase'; import Grid from '@mui/material/Grid'; import Typography from '@mui/material/Typography'; import LaunchRounded from '@mui/icons-material/LaunchRounded'; -import DashboardRounded from '@mui/icons-material/DashboardRounded'; -import Layers from '@mui/icons-material/Layers'; -import ShoppingBag from '@mui/icons-material/ShoppingBag'; import KeyboardArrowLeftRounded from '@mui/icons-material/KeyboardArrowLeftRounded'; import KeyboardArrowRightRounded from '@mui/icons-material/KeyboardArrowRightRounded'; import Section from 'docs/src/layouts/Section'; @@ -19,8 +16,7 @@ import Highlighter from 'docs/src/components/action/Highlighter'; import Frame from 'docs/src/components/action/Frame'; import Link from 'docs/src/modules/components/Link'; import More from 'docs/src/components/action/More'; - -const DEMOS = ['Dashboard', 'Landing Pages', 'E-commerce']; +import { DEMOS, icons, TEMPLATES } from 'docs/src/components/productMaterial/MaterialTemplates'; function ActionArea(props: ButtonBaseProps) { return ( @@ -58,77 +54,6 @@ function ActionArea(props: ButtonBaseProps) { export default function TemplateDemo() { const [demo, setDemo] = React.useState(DEMOS[0]); const [templateIndex, setTemplateIndex] = React.useState(0); - const icons = { - [DEMOS[0]]: , - [DEMOS[1]]: , - [DEMOS[2]]: , - }; - - const TEMPLATES = { - [DEMOS[0]]: [ - { - name: 'Devias Kit Pro - Client & Admin Dashboard', - src: { - light: '/static/branding/store-templates/template-4light.jpg', - dark: '/static/branding/store-templates/template-4dark.jpg', - }, - href: 'https://mui.com/store/items/devias-kit-pro/', - }, - { - name: 'Minimal - Client & Admin Dashboard', - src: { - light: '/static/branding/store-templates/template-1light.jpg', - dark: '/static/branding/store-templates/template-1dark.jpg', - }, - href: 'https://mui.com/store/items/minimal-dashboard/', - }, - { - name: 'Berry - React Material Admin Dashboard Template', - src: { - light: '/static/branding/store-templates/template-5light.jpg', - dark: '/static/branding/store-templates/template-5dark.jpg', - }, - href: 'https://mui.com/store/items/berry-react-material-admin/', - }, - { - name: 'Mira Pro - React Material Admin Dashboard', - src: { - light: '/static/branding/store-templates/template-3light.jpg', - dark: '/static/branding/store-templates/template-3dark.jpg', - }, - href: 'https://mui.com/store/items/mira-pro-react-material-admin-dashboard/', - }, - ], - [DEMOS[1]]: [ - { - name: 'theFront - Multipurpose Template + UI Kit', - src: { - light: '/static/branding/store-templates/template-2light.jpg', - dark: '/static/branding/store-templates/template-2dark.jpg', - }, - href: 'https://mui.com/store/items/the-front-landing-page/', - }, - { - name: 'Webbee - Multipurpose landing page UI Kit', - src: { - light: '/static/branding/store-templates/template-6light.jpg', - dark: '/static/branding/store-templates/template-6dark.jpg', - }, - href: 'https://mui.com/store/items/webbee-landing-page/', - }, - ], - [DEMOS[2]]: [ - { - name: 'Bazar Pro - Multipurpose React Ecommerce Template', - src: { - light: '/static/branding/store-templates/template-bazar-light.jpg', - dark: '/static/branding/store-templates/template-bazar-dark.jpg', - }, - href: 'https://mui.com/store/items/bazar-pro-react-ecommerce-template/', - }, - ], - }; - const templates = TEMPLATES[demo]; return ( diff --git a/docs/src/components/productX/XComponents.tsx b/docs/src/components/productX/XComponents.tsx index 01c523912ed573..0b529dc54bd923 100644 --- a/docs/src/components/productX/XComponents.tsx +++ b/docs/src/components/productX/XComponents.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import Box from '@mui/material/Box'; import Fade from '@mui/material/Fade'; import Grid from '@mui/material/Grid'; +import Tooltip from '@mui/material/Tooltip'; import Typography from '@mui/material/Typography'; import TableChartRounded from '@mui/icons-material/TableChartRounded'; import DateRangeRounded from '@mui/icons-material/DateRangeRounded'; @@ -89,7 +90,9 @@ export default function XComponents() { setDemo(name)}> {WIP.includes(name) && ( - + + + )} ))} diff --git a/docs/src/components/showcase/RealEstateCard.tsx b/docs/src/components/showcase/RealEstateCard.tsx index b7e787c103d97c..7f89952d59da2e 100644 --- a/docs/src/components/showcase/RealEstateCard.tsx +++ b/docs/src/components/showcase/RealEstateCard.tsx @@ -38,7 +38,7 @@ export default function RealEstateCard({ sx, ...props }: CardProps) { /> - + 123 Main St, Phoenix, AZ diff --git a/packages/mui-utils/src/useEventCallback/useEventCallback.ts b/packages/mui-utils/src/useEventCallback/useEventCallback.ts index babd9a5efccfd4..398945443adc90 100644 --- a/packages/mui-utils/src/useEventCallback/useEventCallback.ts +++ b/packages/mui-utils/src/useEventCallback/useEventCallback.ts @@ -3,7 +3,8 @@ import * as React from 'react'; import useEnhancedEffect from '../useEnhancedEffect'; /** - * https://github.com/facebook/react/issues/14099#issuecomment-440013892 + * Inspired by https://github.com/facebook/react/issues/14099#issuecomment-440013892 + * See RFC in https://github.com/reactjs/rfcs/pull/220 */ function useEventCallback any = (...args: unknown[]) => unknown>( fn: Fn,