+ Get started by editing
+ src/app/page.tsx
+
Find in-depth information about Next.js features and API.
+Learn about Next.js in an interactive course with quizzes!
+Explore the Next.js 13 playground.
+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 `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 `
-- **Ship faster:** Joy UI gives you pre-built components with a sleek and carefully designed look and feel, so you don't need design skills to ship beautiful UIs rapidly.
-- **Extensive customization options:** you can customize each and every tiny piece of Joy UI's components to match your own unique design.
-- **Accessibility in mind:** Joy UI components are built on top of [Base UI's unstyled components and low-level hooks](/base-ui/getting-started/), giving you support for many accessibility features out of the box.
- We do our best to make all components screen reader-friendly, and also offer suggestions for optimizing accessibility throughout our documentation.
+### Highly customizable
-## Joy UI vs. Material UI
+You should feel inspired and empowered to change, extend, and revamp Joy UI's appearance and behavior with ease.
+Drawing from many years of experience maintaining Material UI, Joy UI applies new approaches to customization, enabling you to customize every piece of the components to match your unique design.
-Joy UI is intended to serve as an alternative to Material UI for designs that don't adhere to Material Design specifications.
-These two sister libraries feature many of the same components, and similarly designed component APIs, so you can quickly start building with one if you've used the other before.
+For example, the demo below shows how to customize the [List](/joy-ui/react-list/) component using built-in CSS variables to match the design of the [Gatsby documentation side nav](https://www.gatsbyjs.com/docs/):
-Try Joy UI if you appreciate the comprehensiveness and reliability of Material UI, but don't need all of the additional baggage that comes along with Material Design.
+{{"demo": "../../components/list/ExampleCollapsibleList.js"}}
-## Principles
+### Developer experience
-### Include only what's essential
+Joy UI draws its name from the idea that it should spark joy in the creative process of building apps.
+Providing an unrivaled developer experience is at the heart of this.
-Joy UI should work with the least amount of effort possible.
-We're striving for the essential only, both in the component API and design (look and feel).
+For example, observe how each element of the [Input](/joy-ui/react-input/) component automatically calculates and adjusts its own dimensions relative to the border radius, saving you from the tedium of doing it yourself:
-Components should have only what they need to do the job.
-What is considered essential is drawn from MUI's experience over the years developing component libraries, as well as from benchmarks of modern API and design guidelines—especially when it comes to developing web apps.
+{{"demo": "../../main-features/automatic-adjustment/InputVariables.js"}}
-### Make it beautiful out of the box
+### Accessibility
-Joy UI needs to be simple yet characteristic.
-Visual attributes such as scale, size, and density should be consistent across all of the components so they live together nicely.
+Joy UI components are built on top of [Base UI's unstyled components and low-level hooks](/base-ui/getting-started/), giving you many accessibility features out of the box.
+We strive to make all components accessible to end users who require assistive technology, and offer suggestions for optimizing accessibility throughout our documentation.
-We aim to spark delight with simplicity and attention to detail.
-You should feel like your UI looks great from the start.
+Joy UI's Form Control component automatically generates a unique ID that links the Input that it wraps with the Form Label and Form Helper Text components, ensuring that your app complies with this guideline:
-### Encourage creativity
+{{"demo": "../../components/input/InputField.js"}}
-Working with Joy UI shouldn't feel stiff or rigid—you should feel inspired and empowered to change, extend, and revamp Joy UI's appearance and behavior with ease.
-We want it to become your go-to starting point for building UIs.
+## Start now
-### Prioritize developer experience
+Get started with Joy UI today through some of these useful resources:
-A great developer experience is not only about the quality of the code we ship, but also about how clear the documentation is, and what learning resources are available for developers.
-We hope that every step of the experience brings you joy.
+{{"component": "modules/components/JoyStartingLinksCollection.js"}}
diff --git a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx
index 6348e1c013a851..77865e8a5c8522 100644
--- a/docs/data/joy/getting-started/templates/sign-in-side/App.tsx
+++ b/docs/data/joy/getting-started/templates/sign-in-side/App.tsx
@@ -5,14 +5,17 @@ import CssBaseline from '@mui/joy/CssBaseline';
import Box from '@mui/joy/Box';
import Button from '@mui/joy/Button';
import Checkbox from '@mui/joy/Checkbox';
+import Divider from '@mui/joy/Divider';
import FormControl from '@mui/joy/FormControl';
import FormLabel, { formLabelClasses } from '@mui/joy/FormLabel';
import IconButton, { IconButtonProps } from '@mui/joy/IconButton';
import Link from '@mui/joy/Link';
import Input from '@mui/joy/Input';
import Typography from '@mui/joy/Typography';
+import Stack from '@mui/joy/Stack';
import DarkModeRoundedIcon from '@mui/icons-material/DarkModeRounded';
import LightModeRoundedIcon from '@mui/icons-material/LightModeRounded';
+import BadgeRoundedIcon from '@mui/icons-material/BadgeRounded';
import GoogleIcon from './GoogleIcon';
interface FormElements extends HTMLFormControlsCollection {
@@ -31,13 +34,13 @@ function ColorSchemeToggle({ onClick, ...props }: IconButtonProps) {
setMounted(true);
}, []);
if (!mounted) {
- return 
+ 
+ 
);
-
- if (title) {
- return
- {t('api-docs.default')}: {defaultValue}
-
+ {t('api-docs.default')}:{' '}
+ {defaultValue}
+
{t('api-docs.globalClass')}:{' '}
diff --git a/docs/src/modules/components/AppSearch.js b/docs/src/modules/components/AppSearch.js
index 1026b22fe92a25..25243d2056006d 100644
--- a/docs/src/modules/components/AppSearch.js
+++ b/docs/src/modules/components/AppSearch.js
@@ -332,7 +332,7 @@ export default function AppSearch(props) {
})}
/>
{error.toString()}
-
true, the component is disabled. The prop defaults to the value (false) inherited from the parent FormControl component."
},
+ "endAdornment": { "description": "Trailing adornment for this input." },
"error": {
"description": "If true, the input will indicate an error by setting the aria-invalid attribute on the input and the Mui-error class on the root element."
},
@@ -37,6 +38,7 @@
"slots": {
"description": "The components used for each slot inside the InputBase. Either a string to use a HTML element or a component."
},
+ "startAdornment": { "description": "Leading adornment for this input." },
"step": { "description": "The amount that the value changes on each increment or decrement." },
"value": { "description": "The current value. Use when the component is controlled." }
},
@@ -47,6 +49,16 @@
"nodeName": "the root element",
"conditions": "the component is a descendant of FormControl"
},
+ "adornedStart": {
+ "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "startAdornment is provided"
+ },
+ "adornedEnd": {
+ "description": "Class name applied to {{nodeName}} if {{conditions}}.",
+ "nodeName": "the root element",
+ "conditions": "endAdornment is provided"
+ },
"focused": {
"description": "Class name applied to {{nodeName}} if {{conditions}}.",
"nodeName": "the root element",
diff --git a/docs/translations/api-docs/use-option/use-option.json b/docs/translations/api-docs/use-option/use-option.json
index e3eb65c6e43006..07b5b62753ad2c 100644
--- a/docs/translations/api-docs/use-option/use-option.json
+++ b/docs/translations/api-docs/use-option/use-option.json
@@ -1 +1,10 @@
-{ "hookDescription": "", "parametersDescriptions": {}, "returnValueDescriptions": {} }
+{
+ "hookDescription": "",
+ "parametersDescriptions": {},
+ "returnValueDescriptions": {
+ "getRootProps": { "description": "Resolver for the root slot's props." },
+ "highlighted": { "description": "If true, the option is highlighted." },
+ "rootRef": { "description": "Ref to the root slot DOM node." },
+ "selected": { "description": "If true, the option is selected." }
+ }
+}
diff --git a/package.json b/package.json
index e0779ec929640d..713dc77ce80719 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/monorepo",
- "version": "5.14.9",
+ "version": "5.14.10",
"private": true,
"scripts": {
"proptypes": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./scripts/generateProptypes.ts",
diff --git a/packages/api-docs-builder/package.json b/packages/api-docs-builder/package.json
index 4c0fb7e20f7254..88a910e16f9c22 100644
--- a/packages/api-docs-builder/package.json
+++ b/packages/api-docs-builder/package.json
@@ -12,7 +12,7 @@
"@babel/traverse": "^7.22.17",
"@mui-internal/docs-utilities": "^1.0.0",
"@mui/markdown": "^5.0.0",
- "@mui/utils": "^5.14.9",
+ "@mui/utils": "^5.14.10",
"ast-types": "^0.14.2",
"docs": "^5.0.0",
"doctrine": "^3.0.0",
diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json
index 85555720f539a4..3b137eb5c24c3d 100644
--- a/packages/eslint-plugin-material-ui/package.json
+++ b/packages/eslint-plugin-material-ui/package.json
@@ -12,6 +12,9 @@
"@typescript-eslint/parser": "^6.6.0",
"eslint": "^8.47.0"
},
+ "peerDependencies": {
+ "eslint": "^8.47.0"
+ },
"scripts": {
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/eslint-plugin-material-ui/**/*.test.js'"
},
diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
index c4d0eeacea967a..1236c2b3efce42 100644
--- a/packages/mui-base/package.json
+++ b/packages/mui-base/package.json
@@ -1,6 +1,6 @@
{
"name": "@mui/base",
- "version": "5.0.0-beta.15",
+ "version": "5.0.0-beta.16",
"private": false,
"author": "MUI Team",
"description": "A library of headless ('unstyled') React UI components and low-level hooks.",
@@ -44,13 +44,13 @@
"@babel/runtime": "^7.22.15",
"@floating-ui/react-dom": "^2.0.2",
"@mui/types": "^7.2.4",
- "@mui/utils": "^5.14.9",
+ "@mui/utils": "^5.14.10",
"@popperjs/core": "^2.11.8",
"clsx": "^2.0.0",
"prop-types": "^15.8.1"
},
"devDependencies": {
- "@mui/material": "^5.14.9",
+ "@mui/material": "^5.14.10",
"@testing-library/react": "^14.0.0",
"@testing-library/user-event": "^14.4.3",
"@types/chai": "^4.3.5",
diff --git a/packages/mui-base/src/FormControl/FormControl.tsx b/packages/mui-base/src/FormControl/FormControl.tsx
index f5959d15700ab1..1ee347e07059a1 100644
--- a/packages/mui-base/src/FormControl/FormControl.tsx
+++ b/packages/mui-base/src/FormControl/FormControl.tsx
@@ -1,7 +1,7 @@
'use client';
import * as React from 'react';
import PropTypes from 'prop-types';
-import { unstable_useControlled as useControlled } from '@mui/utils';
+import useControlled from '@mui/utils/useControlled';
import { PolymorphicComponent } from '../utils/PolymorphicComponent';
import { FormControlContext } from './FormControlContext';
import { getFormControlUtilityClass } from './formControlClasses';
diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
index 1740aa8eb6b37b..3d70576baacd46 100644
--- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
+++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.test.tsx
@@ -4,6 +4,8 @@ import sinon, { spy, stub } from 'sinon';
import {
describeConformanceUnstyled,
act,
+ screen,
+ waitFor,
createMount,
createRenderer,
fireEvent,
@@ -15,6 +17,29 @@ function getStyleValue(value: string) {
return parseInt(value, 10) || 0;
}
+// TODO: merge into a shared test helpers.
+// MUI X already have one under mui-x/test/utils/helperFn.ts
+function sleep(duration: number): Promise