diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.js b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.js index 83403dab50..653344f4b8 100644 --- a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.js +++ b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; -import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox'; +import * as BaseCheckbox from '@base_ui/react/Checkbox'; import HorizontalRule from '@mui/icons-material/HorizontalRule'; export default function UnstyledCheckboxIndeterminate() { @@ -30,7 +30,7 @@ const grey = { 100: '#E5EAF2', }; -const Checkbox = styled(BaseCheckbox)( +const Checkbox = styled(BaseCheckbox.Root)( ({ theme }) => ` width: 24px; height: 24px; diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx index 83403dab50..653344f4b8 100644 --- a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx +++ b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; -import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox'; +import * as BaseCheckbox from '@base_ui/react/Checkbox'; import HorizontalRule from '@mui/icons-material/HorizontalRule'; export default function UnstyledCheckboxIndeterminate() { @@ -30,7 +30,7 @@ const grey = { 100: '#E5EAF2', }; -const Checkbox = styled(BaseCheckbox)( +const Checkbox = styled(BaseCheckbox.Root)( ({ theme }) => ` width: 24px; height: 24px; diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js index 86a1366f3a..af25dd54fe 100644 --- a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js +++ b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; -import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox'; +import * as BaseCheckbox from '@base_ui/react/Checkbox'; import HorizontalRule from '@mui/icons-material/HorizontalRule'; import Check from '@mui/icons-material/Check'; @@ -76,7 +76,7 @@ const grey = { 800: '#303740', }; -const Checkbox = styled(BaseCheckbox)( +const Checkbox = styled(BaseCheckbox.Root)( ({ theme }) => ` width: 24px; height: 24px; diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx index 86a1366f3a..af25dd54fe 100644 --- a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx +++ b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; -import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox'; +import * as BaseCheckbox from '@base_ui/react/Checkbox'; import HorizontalRule from '@mui/icons-material/HorizontalRule'; import Check from '@mui/icons-material/Check'; @@ -76,7 +76,7 @@ const grey = { 800: '#303740', }; -const Checkbox = styled(BaseCheckbox)( +const Checkbox = styled(BaseCheckbox.Root)( ({ theme }) => ` width: 24px; height: 24px; diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.js b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.js index 9b54f4ec1e..cd38cbc76b 100644 --- a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.js +++ b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.js @@ -1,12 +1,12 @@ import * as React from 'react'; -import { Checkbox } from '@base_ui/react/Checkbox'; +import * as Checkbox from '@base_ui/react/Checkbox'; import { useTheme } from '@mui/system'; import Check from '@mui/icons-material/Check'; export default function UnstyledCheckboxIntroduction() { return (
- - - + + - - + - - + - +
); diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.tsx index 9b54f4ec1e..cd38cbc76b 100644 --- a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.tsx +++ b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/css/index.tsx @@ -1,12 +1,12 @@ import * as React from 'react'; -import { Checkbox } from '@base_ui/react/Checkbox'; +import * as Checkbox from '@base_ui/react/Checkbox'; import { useTheme } from '@mui/system'; import Check from '@mui/icons-material/Check'; export default function UnstyledCheckboxIntroduction() { return (
- - - + + - - + - - + - +
); diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.js b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.js index 47a4ecba04..e0e5c9c066 100644 --- a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.js +++ b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; -import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox'; +import * as BaseCheckbox from '@base_ui/react/Checkbox'; import Check from '@mui/icons-material/Check'; export default function UnstyledSwitchIntroduction() { @@ -44,7 +44,7 @@ const blue = { 800: '#004C99', }; -const Checkbox = styled(BaseCheckbox)( +const Checkbox = styled(BaseCheckbox.Root)( ({ theme }) => ` width: 24px; height: 24px; diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx index 47a4ecba04..e0e5c9c066 100644 --- a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx +++ b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/system/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; -import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox'; +import * as BaseCheckbox from '@base_ui/react/Checkbox'; import Check from '@mui/icons-material/Check'; export default function UnstyledSwitchIntroduction() { @@ -44,7 +44,7 @@ const blue = { 800: '#004C99', }; -const Checkbox = styled(BaseCheckbox)( +const Checkbox = styled(BaseCheckbox.Root)( ({ theme }) => ` width: 24px; height: 24px; diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js index b1b9f7d71e..ef5cea9ea1 100644 --- a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js +++ b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.js @@ -1,6 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { Checkbox as BaseCheckbox } from '@base_ui/react/Checkbox'; +import * as BaseCheckbox from '@base_ui/react/Checkbox'; + import { useTheme } from '@mui/system'; import Check from '@mui/icons-material/Check'; @@ -41,7 +42,7 @@ export default function UnstyledCheckboxIntroduction() { const Checkbox = React.forwardRef(function Checkbox(props, ref) { return ( - diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx index 26a0cb0cb8..ca8f93db4a 100644 --- a/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx +++ b/docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { - Checkbox as BaseCheckbox, - type CheckboxIndicatorProps, - type CheckboxProps, +import * as BaseCheckbox from '@base_ui/react/Checkbox'; +import type { + CheckboxIndicatorProps, + CheckboxRootProps, } from '@base_ui/react/Checkbox'; import { useTheme } from '@mui/system'; import Check from '@mui/icons-material/Check'; @@ -42,10 +42,10 @@ export default function UnstyledCheckboxIntroduction() { ); } -const Checkbox = React.forwardRef( +const Checkbox = React.forwardRef( function Checkbox(props, ref) { return ( - diff --git a/docs/data/base/components/checkbox/checkbox.md b/docs/data/base/components/checkbox/checkbox.md index 6a74ca7863..f4caf40e62 100644 --- a/docs/data/base/components/checkbox/checkbox.md +++ b/docs/data/base/components/checkbox/checkbox.md @@ -1,7 +1,7 @@ --- productId: base-ui title: React Checkbox component and hook -components: Checkbox, CheckboxIndicator +components: CheckboxRoot, CheckboxIndicator hooks: useCheckbox githubLabel: 'component: checkbox' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ @@ -24,7 +24,7 @@ The Checkbox component provides users with a checkbox for toggling a checked sta ## Component ```jsx -import { Checkbox } from '@base_ui/react/Checkbox'; +import * as Checkbox from '@base_ui/react/Checkbox'; ``` ### Anatomy @@ -32,29 +32,29 @@ import { Checkbox } from '@base_ui/react/Checkbox'; The `Checkbox` component is composed of a root component and an indicator child component: ```tsx - + - + ``` The indicator can contain children, such as an icon: ```tsx - + - + ``` The indicator conditionally unmounts its children when the checkbox is unchecked. For CSS animations, you can use the `keepMounted` prop to transition `visibility` and `opacity` for example: ```tsx - + - + ``` ### Custom structure @@ -62,9 +62,9 @@ The indicator conditionally unmounts its children when the checkbox is unchecked Use the `render` prop to override the rendered checkbox or indicator element with your own components: ```jsx - }> + }> } /> - + ``` To ensure behavior works as expected: @@ -113,9 +113,9 @@ You may not need to use hooks unless you find that you're limited by the customi Ensure the checkbox has an accessible name via a `label` element. ```jsx - + - + diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldFormat.js b/docs/data/base/components/number-field/UnstyledNumberFieldFormat.js index b080f2b423..e7b8fcf6f6 100644 --- a/docs/data/base/components/number-field/UnstyledNumberFieldFormat.js +++ b/docs/data/base/components/number-field/UnstyledNumberFieldFormat.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { NumberField as BaseNumberField } from '@base_ui/react/NumberField'; +import * as BaseNumberField from '@base_ui/react/NumberField'; import { styled, css } from '@mui/system'; export default function UnstyledNumberFieldFormat() { @@ -49,7 +49,7 @@ const NumberLabel = styled('label')` font-weight: bold; `; -const NumberField = styled(BaseNumberField)` +const NumberField = styled(BaseNumberField.Root)` font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; `; diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldFormat.tsx b/docs/data/base/components/number-field/UnstyledNumberFieldFormat.tsx index b080f2b423..e7b8fcf6f6 100644 --- a/docs/data/base/components/number-field/UnstyledNumberFieldFormat.tsx +++ b/docs/data/base/components/number-field/UnstyledNumberFieldFormat.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { NumberField as BaseNumberField } from '@base_ui/react/NumberField'; +import * as BaseNumberField from '@base_ui/react/NumberField'; import { styled, css } from '@mui/system'; export default function UnstyledNumberFieldFormat() { @@ -49,7 +49,7 @@ const NumberLabel = styled('label')` font-weight: bold; `; -const NumberField = styled(BaseNumberField)` +const NumberField = styled(BaseNumberField.Root)` font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; `; diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/css/index.js b/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/css/index.js index 13fe4e39cf..81dca23513 100644 --- a/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/css/index.js +++ b/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/css/index.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { NumberField } from '@base_ui/react/NumberField'; +import * as NumberField from '@base_ui/react/NumberField'; import { useTheme } from '@mui/system'; function useIsDarkMode() { @@ -14,7 +14,7 @@ export default function UnstyledNumberFieldIntroduction() { return (
- - +
); diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/css/index.tsx b/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/css/index.tsx index 13fe4e39cf..81dca23513 100644 --- a/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/css/index.tsx +++ b/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/css/index.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { NumberField } from '@base_ui/react/NumberField'; +import * as NumberField from '@base_ui/react/NumberField'; import { useTheme } from '@mui/system'; function useIsDarkMode() { @@ -14,7 +14,7 @@ export default function UnstyledNumberFieldIntroduction() { return (
- - +
); diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/system/index.js b/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/system/index.js index 16b902cad3..b6f794b434 100644 --- a/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/system/index.js +++ b/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/system/index.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { NumberField as BaseNumberField } from '@base_ui/react/NumberField'; +import * as BaseNumberField from '@base_ui/react/NumberField'; import { css, styled, useTheme } from '@mui/system'; function useIsDarkMode() { @@ -71,7 +71,7 @@ const grey = { 900: '#1C2025', }; -const NumberField = styled(BaseNumberField)` +const NumberField = styled(BaseNumberField.Root)` font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; `; diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/system/index.tsx b/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/system/index.tsx index 16b902cad3..b6f794b434 100644 --- a/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/system/index.tsx +++ b/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/system/index.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { NumberField as BaseNumberField } from '@base_ui/react/NumberField'; +import * as BaseNumberField from '@base_ui/react/NumberField'; import { css, styled, useTheme } from '@mui/system'; function useIsDarkMode() { @@ -71,7 +71,7 @@ const grey = { 900: '#1C2025', }; -const NumberField = styled(BaseNumberField)` +const NumberField = styled(BaseNumberField.Root)` font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; `; diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js b/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js index 703361616f..5a4e44a292 100644 --- a/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js +++ b/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.js @@ -1,6 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; -import { NumberField as BaseNumberField } from '@base_ui/react/NumberField'; +import * as BaseNumberField from '@base_ui/react/NumberField'; + import { useTheme } from '@mui/system'; function classNames(...classes) { @@ -58,7 +59,7 @@ export default function NumberFieldIntroduction() { } const NumberField = React.forwardRef(function NumberField(props, ref) { - return ; + return ; }); const NumberFieldGroup = React.forwardRef(function NumberFieldGroup(props, ref) { diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.tsx b/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.tsx index da82eab7a4..d3751d9cba 100644 --- a/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.tsx +++ b/docs/data/base/components/number-field/UnstyledNumberFieldIntroduction/tailwind/index.tsx @@ -1,11 +1,11 @@ import * as React from 'react'; -import { - NumberField as BaseNumberField, - NumberFieldDecrementProps, +import * as BaseNumberField from '@base_ui/react/NumberField'; +import type { + NumberFieldRootProps, NumberFieldGroupProps, + NumberFieldDecrementProps, NumberFieldIncrementProps, NumberFieldInputProps, - NumberFieldProps, NumberFieldScrubAreaProps, } from '@base_ui/react/NumberField'; import { useTheme } from '@mui/system'; @@ -65,10 +65,10 @@ export default function NumberFieldIntroduction() { } const NumberField = React.forwardRef(function NumberField( - props: NumberFieldProps, + props: NumberFieldRootProps, ref: React.ForwardedRef, ) { - return ; + return ; }); const NumberFieldGroup = React.forwardRef(function NumberFieldGroup( diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldScrub.js b/docs/data/base/components/number-field/UnstyledNumberFieldScrub.js index 837070714c..9b63ccb09c 100644 --- a/docs/data/base/components/number-field/UnstyledNumberFieldScrub.js +++ b/docs/data/base/components/number-field/UnstyledNumberFieldScrub.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { NumberField as BaseNumberField } from '@base_ui/react/NumberField'; +import * as BaseNumberField from '@base_ui/react/NumberField'; import { styled } from '@mui/system'; export default function UnstyledNumberFieldScrub() { @@ -40,7 +40,7 @@ const grey = { 900: '#1C2025', }; -const NumberField = styled(BaseNumberField)` +const NumberField = styled(BaseNumberField.Root)` font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; `; diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldScrub.tsx b/docs/data/base/components/number-field/UnstyledNumberFieldScrub.tsx index 837070714c..9b63ccb09c 100644 --- a/docs/data/base/components/number-field/UnstyledNumberFieldScrub.tsx +++ b/docs/data/base/components/number-field/UnstyledNumberFieldScrub.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { NumberField as BaseNumberField } from '@base_ui/react/NumberField'; +import * as BaseNumberField from '@base_ui/react/NumberField'; import { styled } from '@mui/system'; export default function UnstyledNumberFieldScrub() { @@ -40,7 +40,7 @@ const grey = { 900: '#1C2025', }; -const NumberField = styled(BaseNumberField)` +const NumberField = styled(BaseNumberField.Root)` font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; `; diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldWheelScrub.js b/docs/data/base/components/number-field/UnstyledNumberFieldWheelScrub.js index 7d5edc13eb..1d75392517 100644 --- a/docs/data/base/components/number-field/UnstyledNumberFieldWheelScrub.js +++ b/docs/data/base/components/number-field/UnstyledNumberFieldWheelScrub.js @@ -1,5 +1,5 @@ import * as React from 'react'; -import { NumberField as BaseNumberField } from '@base_ui/react/NumberField'; +import * as BaseNumberField from '@base_ui/react/NumberField'; import { styled } from '@mui/system'; export default function UnstyledNumberFieldWheelScrub() { @@ -42,7 +42,7 @@ const NumberLabel = styled('label')` font-weight: bold; `; -const NumberField = styled(BaseNumberField)` +const NumberField = styled(BaseNumberField.Root)` font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; `; diff --git a/docs/data/base/components/number-field/UnstyledNumberFieldWheelScrub.tsx b/docs/data/base/components/number-field/UnstyledNumberFieldWheelScrub.tsx index 7d5edc13eb..1d75392517 100644 --- a/docs/data/base/components/number-field/UnstyledNumberFieldWheelScrub.tsx +++ b/docs/data/base/components/number-field/UnstyledNumberFieldWheelScrub.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { NumberField as BaseNumberField } from '@base_ui/react/NumberField'; +import * as BaseNumberField from '@base_ui/react/NumberField'; import { styled } from '@mui/system'; export default function UnstyledNumberFieldWheelScrub() { @@ -42,7 +42,7 @@ const NumberLabel = styled('label')` font-weight: bold; `; -const NumberField = styled(BaseNumberField)` +const NumberField = styled(BaseNumberField.Root)` font-family: 'IBM Plex Sans', sans-serif; font-size: 1rem; `; diff --git a/docs/data/base/components/number-field/number-field.md b/docs/data/base/components/number-field/number-field.md index 65b2159d8c..244cfaf36d 100644 --- a/docs/data/base/components/number-field/number-field.md +++ b/docs/data/base/components/number-field/number-field.md @@ -2,7 +2,7 @@ productId: base-ui title: React NumberField component and hook githubLabel: 'component: number-field' -components: NumberField, NumberFieldGroup, NumberFieldInput, NumberFieldIncrement, NumberFieldDecrement, NumberFieldScrubArea, NumberFieldScrubAreaCursor +components: NumberFieldRoot, NumberFieldGroup, NumberFieldInput, NumberFieldIncrement, NumberFieldDecrement, NumberFieldScrubArea, NumberFieldScrubAreaCursor hooks: useNumberField waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/ --- @@ -24,7 +24,7 @@ A number field is a UI element that accepts numeric values from the user. `Numbe ## Component ```jsx -import { NumberField } from '@base_ui/react/NumberField'; +import * as NumberField from '@base_ui/react/NumberField'; ``` ### Anatomy @@ -32,7 +32,7 @@ import { NumberField } from '@base_ui/react/NumberField'; The `NumberField` component is composed of a root component and a group component which contains an input, and optionally, an increment button, decrement button, and a scrub area with a virtual cursor: ```tsx - + @@ -41,7 +41,7 @@ The `NumberField` component is composed of a root component and a group componen - + ``` ### Custom structure @@ -49,9 +49,9 @@ The `NumberField` component is composed of a root component and a group componen Use the `render` prop to override the rendered elements with your own components: ```jsx - }> + }> {/* Subcomponents */} - + ``` All subcomponents accept the `render` prop. @@ -77,13 +77,13 @@ The `value` prop holds the number value, and `onChange` is called when it update function App() { const [value, setValue] = useState(0); return ( - + − + - + ); } ``` @@ -95,13 +95,13 @@ This is the controlled way of handling the number field. When the number field is uncontrolled, the `defaultValue` prop sets the initial value of the input: ```jsx - + − + - + ``` ### Min and max values @@ -109,13 +109,13 @@ When the number field is uncontrolled, the `defaultValue` prop sets the initial To prevent the value from going below or above a certain amount, the `min` and `max` props can be used: ```jsx - + − + - + ``` ### Step @@ -123,13 +123,13 @@ To prevent the value from going below or above a certain amount, the `min` and ` The `step` prop snaps values of the input to ones that are multiples of the given number, affecting how the stepper buttons change the value: ```jsx - + − + - + ``` In the above example, the numbers are snapped to multiples of `step` starting from the `min` value: `2`, `7`, `12`, `17` and so on. @@ -140,13 +140,13 @@ The `largeStep` and `smallStep` props can be specified to change the step when a - `smallStep` is used when alt is held, incrementing and snapping to multiples of `0.1`. ```jsx - + − + - + ``` ### Format diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js index b5e052a2bf..6f067c8253 100644 --- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js +++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.js @@ -1,38 +1,38 @@ import * as React from 'react'; -import { Switch } from '@base_ui/react/Switch'; +import * as Switch from '@base_ui/react/Switch'; import { useTheme } from '@mui/system'; export default function UnstyledSwitchIntroduction() { return (
- - - + - - + - - + - +
); diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx index b5e052a2bf..6f067c8253 100644 --- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx +++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/css/index.tsx @@ -1,38 +1,38 @@ import * as React from 'react'; -import { Switch } from '@base_ui/react/Switch'; +import * as Switch from '@base_ui/react/Switch'; import { useTheme } from '@mui/system'; export default function UnstyledSwitchIntroduction() { return (
- - - + - - + - - + - +
); diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js index d82799f3b6..a4c76f7ff4 100644 --- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js +++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; -import { Switch as BaseSwitch } from '@base_ui/react/Switch'; +import * as BaseSwitch from '@base_ui/react/Switch'; export default function UnstyledSwitchIntroduction() { return ( @@ -39,7 +39,7 @@ const grey = { 900: '#1C2025', }; -const Switch = styled(BaseSwitch)( +const Switch = styled(BaseSwitch.Root)( ({ theme }) => ` width: 38px; height: 24px; diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx index d82799f3b6..a4c76f7ff4 100644 --- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx +++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/system/index.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { styled } from '@mui/system'; -import { Switch as BaseSwitch } from '@base_ui/react/Switch'; +import * as BaseSwitch from '@base_ui/react/Switch'; export default function UnstyledSwitchIntroduction() { return ( @@ -39,7 +39,7 @@ const grey = { 900: '#1C2025', }; -const Switch = styled(BaseSwitch)( +const Switch = styled(BaseSwitch.Root)( ({ theme }) => ` width: 38px; height: 24px; diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js index 55636dabff..9949aff9ff 100644 --- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js +++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.js @@ -1,5 +1,6 @@ import * as React from 'react'; -import { Switch as BaseSwitch } from '@base_ui/react/Switch'; +import * as BaseSwitch from '@base_ui/react/Switch'; + import { useTheme } from '@mui/system'; function useIsDarkMode() { @@ -41,7 +42,7 @@ const Switch = React.forwardRef(function Switch( ${checked ? 'bg-purple-500' : 'bg-slate-100 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800'} ${classNameProp}`; - return ; + return ; }); const Thumb = React.forwardRef(function Thumb( diff --git a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx index dbc12d2f27..9aa486dcc5 100644 --- a/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx +++ b/docs/data/base/components/switch/UnstyledSwitchIntroduction/tailwind/index.tsx @@ -1,9 +1,6 @@ import * as React from 'react'; -import { - Switch as BaseSwitch, - SwitchOwnerState, - SwitchProps, -} from '@base_ui/react/Switch'; +import * as BaseSwitch from '@base_ui/react/Switch'; +import type { SwitchOwnerState, SwitchRootProps } from '@base_ui/react/Switch'; import { useTheme } from '@mui/system'; function useIsDarkMode() { @@ -33,7 +30,7 @@ export default function UnstyledSwitchIntroduction() { ); } -const Switch = React.forwardRef(function Switch( +const Switch = React.forwardRef(function Switch( { className: classNameProp = '', ...props }, ref, ) { @@ -45,7 +42,7 @@ const Switch = React.forwardRef(function Switch( ${checked ? 'bg-purple-500' : 'bg-slate-100 dark:bg-slate-900 hover:bg-slate-200 dark:hover:bg-slate-800'} ${classNameProp}`; - return ; + return ; }); const Thumb = React.forwardRef< diff --git a/docs/data/base/components/switch/switch.md b/docs/data/base/components/switch/switch.md index f9bd965915..9e22166a75 100644 --- a/docs/data/base/components/switch/switch.md +++ b/docs/data/base/components/switch/switch.md @@ -1,7 +1,7 @@ --- productId: base-ui title: React Switch component and hook -components: Switch, SwitchThumb +components: SwitchRoot, SwitchThumb hooks: useSwitch githubLabel: 'component: switch' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/switch/ diff --git a/docs/data/base/pagesApi.js b/docs/data/base/pagesApi.js index a2102d1a77..268eaf961b 100644 --- a/docs/data/base/pagesApi.js +++ b/docs/data/base/pagesApi.js @@ -1,14 +1,14 @@ module.exports = [ { pathname: '/base-ui/react-badge/components-api/#badge', title: 'Badge' }, { pathname: '/base-ui/react-button/components-api/#button', title: 'Button' }, - { - pathname: '/base-ui/react-checkbox/components-api/#checkbox', - title: 'Checkbox', - }, { pathname: '/base-ui/react-checkbox/components-api/#checkbox-indicator', title: 'CheckboxIndicator', }, + { + pathname: '/base-ui/react-checkbox/components-api/#checkbox-root', + title: 'CheckboxRoot', + }, { pathname: '/base-ui/react-click-away-listener/components-api/#click-away-listener', @@ -40,10 +40,6 @@ module.exports = [ { pathname: '/base-ui/react-menu/components-api/#menu-item', title: 'MenuItem' }, { pathname: '/base-ui/react-modal/components-api/#modal', title: 'Modal' }, { pathname: '/base-ui/react-no-ssr/components-api/#no-ssr', title: 'NoSsr' }, - { - pathname: '/base-ui/react-number-field/components-api/#number-field', - title: 'NumberField', - }, { pathname: '/base-ui/react-number-field/components-api/#number-field-decrement', title: 'NumberFieldDecrement', @@ -60,6 +56,10 @@ module.exports = [ pathname: '/base-ui/react-number-field/components-api/#number-field-input', title: 'NumberFieldInput', }, + { + pathname: '/base-ui/react-number-field/components-api/#number-field-root', + title: 'NumberFieldRoot', + }, { pathname: '/base-ui/react-number-field/components-api/#number-field-scrub-area', title: 'NumberFieldScrubArea', @@ -83,7 +83,10 @@ module.exports = [ pathname: '/base-ui/react-snackbar/components-api/#snackbar', title: 'Snackbar', }, - { pathname: '/base-ui/react-switch/components-api/#switch', title: 'Switch' }, + { + pathname: '/base-ui/react-switch/components-api/#switch-root', + title: 'SwitchRoot', + }, { pathname: '/base-ui/react-switch/components-api/#switch-thumb', title: 'SwitchThumb', diff --git a/docs/pages/base-ui/api/checkbox-indicator.json b/docs/pages/base-ui/api/checkbox-indicator.json index 1a095cad05..46f919a73a 100644 --- a/docs/pages/base-ui/api/checkbox-indicator.json +++ b/docs/pages/base-ui/api/checkbox-indicator.json @@ -2,7 +2,7 @@ "props": { "className": { "type": { "name": "union", "description": "func
| string" } }, "keepMounted": { "type": { "name": "bool" }, "default": "false" }, - "render": { "type": { "name": "func" } } + "render": { "type": { "name": "union", "description": "element
| func" } } }, "name": "CheckboxIndicator", "imports": [ diff --git a/docs/pages/base-ui/api/checkbox.json b/docs/pages/base-ui/api/checkbox-root.json similarity index 74% rename from docs/pages/base-ui/api/checkbox.json rename to docs/pages/base-ui/api/checkbox-root.json index 5753f8b053..de7a4e1a7a 100644 --- a/docs/pages/base-ui/api/checkbox.json +++ b/docs/pages/base-ui/api/checkbox-root.json @@ -14,20 +14,17 @@ } }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, - "render": { "type": { "name": "func" } }, + "render": { "type": { "name": "union", "description": "element
| func" } }, "required": { "type": { "name": "bool" }, "default": "false" } }, - "name": "Checkbox", + "name": "CheckboxRoot", "imports": [ - "import { Checkbox } from '@mui/base/Checkbox';", - "import { Checkbox } from '@mui/base';" + "import { CheckboxRoot } from '@mui/base/Checkbox';", + "import { CheckboxRoot } from '@mui/base';" ], "classes": [], - "spread": true, - "themeDefaultProps": true, - "muiName": "Checkbox", - "forwardsRefTo": "HTMLButtonElement", - "filename": "/packages/mui-base/src/Checkbox/Checkbox.tsx", + "muiName": "CheckboxRoot", + "filename": "/packages/mui-base/src/Checkbox/CheckboxRoot.tsx", "inheritance": null, "demos": "", "cssComponent": false diff --git a/docs/pages/base-ui/api/number-field-decrement.json b/docs/pages/base-ui/api/number-field-decrement.json index 2f1f57e9eb..69dae919cf 100644 --- a/docs/pages/base-ui/api/number-field-decrement.json +++ b/docs/pages/base-ui/api/number-field-decrement.json @@ -1,7 +1,7 @@ { "props": { "className": { "type": { "name": "union", "description": "func
| string" } }, - "render": { "type": { "name": "func" } } + "render": { "type": { "name": "union", "description": "element
| func" } } }, "name": "NumberFieldDecrement", "imports": [ diff --git a/docs/pages/base-ui/api/number-field-group.json b/docs/pages/base-ui/api/number-field-group.json index 6a42dcc539..abf82f4cb2 100644 --- a/docs/pages/base-ui/api/number-field-group.json +++ b/docs/pages/base-ui/api/number-field-group.json @@ -1,7 +1,7 @@ { "props": { "className": { "type": { "name": "union", "description": "func
| string" } }, - "render": { "type": { "name": "func" } } + "render": { "type": { "name": "union", "description": "element
| func" } } }, "name": "NumberFieldGroup", "imports": [ diff --git a/docs/pages/base-ui/api/number-field-increment.json b/docs/pages/base-ui/api/number-field-increment.json index ae0f180c34..0a0f8483ec 100644 --- a/docs/pages/base-ui/api/number-field-increment.json +++ b/docs/pages/base-ui/api/number-field-increment.json @@ -1,7 +1,7 @@ { "props": { "className": { "type": { "name": "union", "description": "func
| string" } }, - "render": { "type": { "name": "func" } } + "render": { "type": { "name": "union", "description": "element
| func" } } }, "name": "NumberFieldIncrement", "imports": [ diff --git a/docs/pages/base-ui/api/number-field-input.json b/docs/pages/base-ui/api/number-field-input.json index 0a65886362..1c4019b73e 100644 --- a/docs/pages/base-ui/api/number-field-input.json +++ b/docs/pages/base-ui/api/number-field-input.json @@ -1,7 +1,7 @@ { "props": { "className": { "type": { "name": "union", "description": "func
| string" } }, - "render": { "type": { "name": "func" } } + "render": { "type": { "name": "union", "description": "element
| func" } } }, "name": "NumberFieldInput", "imports": [ diff --git a/docs/pages/base-ui/api/number-field-root.json b/docs/pages/base-ui/api/number-field-root.json new file mode 100644 index 0000000000..f171af5a3b --- /dev/null +++ b/docs/pages/base-ui/api/number-field-root.json @@ -0,0 +1,30 @@ +{ + "props": { + "allowWheelScrub": { "type": { "name": "bool" }, "default": "false" }, + "className": { "type": { "name": "union", "description": "func
| string" } }, + "disabled": { "type": { "name": "bool" }, "default": "false" }, + "id": { "type": { "name": "string" } }, + "invalid": { "type": { "name": "bool" }, "default": "false" }, + "largeStep": { "type": { "name": "number" }, "default": "10" }, + "max": { "type": { "name": "number" } }, + "min": { "type": { "name": "number" } }, + "name": { "type": { "name": "string" } }, + "readOnly": { "type": { "name": "bool" }, "default": "false" }, + "render": { "type": { "name": "union", "description": "element
| func" } }, + "required": { "type": { "name": "bool" }, "default": "false" }, + "smallStep": { "type": { "name": "number" }, "default": "0.1" }, + "step": { "type": { "name": "number" } }, + "value": { "type": { "name": "number" } } + }, + "name": "NumberFieldRoot", + "imports": [ + "import { NumberFieldRoot } from '@mui/base/NumberField';", + "import { NumberFieldRoot } from '@mui/base';" + ], + "classes": [], + "muiName": "NumberFieldRoot", + "filename": "/packages/mui-base/src/NumberField/NumberFieldRoot.tsx", + "inheritance": null, + "demos": "", + "cssComponent": false +} diff --git a/docs/pages/base-ui/api/number-field-scrub-area-cursor.json b/docs/pages/base-ui/api/number-field-scrub-area-cursor.json index 689164e3bf..1ff715c669 100644 --- a/docs/pages/base-ui/api/number-field-scrub-area-cursor.json +++ b/docs/pages/base-ui/api/number-field-scrub-area-cursor.json @@ -1,7 +1,7 @@ { "props": { "className": { "type": { "name": "union", "description": "func
| string" } }, - "render": { "type": { "name": "func" } } + "render": { "type": { "name": "union", "description": "element
| func" } } }, "name": "NumberFieldScrubAreaCursor", "imports": [ diff --git a/docs/pages/base-ui/api/number-field-scrub-area.json b/docs/pages/base-ui/api/number-field-scrub-area.json index a9f3562a60..afbdf745d1 100644 --- a/docs/pages/base-ui/api/number-field-scrub-area.json +++ b/docs/pages/base-ui/api/number-field-scrub-area.json @@ -6,7 +6,7 @@ "default": "'vertical'" }, "pixelSensitivity": { "type": { "name": "number" }, "default": "2" }, - "render": { "type": { "name": "func" } }, + "render": { "type": { "name": "union", "description": "element
| func" } }, "teleportDistance": { "type": { "name": "number" } } }, "name": "NumberFieldScrubArea", diff --git a/docs/pages/base-ui/api/number-field.json b/docs/pages/base-ui/api/number-field.json deleted file mode 100644 index 7361dd519e..0000000000 --- a/docs/pages/base-ui/api/number-field.json +++ /dev/null @@ -1,41 +0,0 @@ -{ - "props": { - "allowWheelScrub": { "type": { "name": "bool" }, "default": "false" }, - "autoFocus": { "type": { "name": "bool" }, "default": "false" }, - "className": { "type": { "name": "union", "description": "func
| string" } }, - "defaultValue": { "type": { "name": "number" } }, - "disabled": { "type": { "name": "bool" }, "default": "false" }, - "format": { - "type": { - "name": "shape", - "description": "{ compactDisplay?: 'long'
| 'short', currency?: string, currencyDisplay?: string, currencySign?: string, localeMatcher?: string, maximumFractionDigits?: number, maximumSignificantDigits?: number, minimumFractionDigits?: number, minimumIntegerDigits?: number, minimumSignificantDigits?: number, notation?: 'compact'
| 'engineering'
| 'scientific'
| 'standard', signDisplay?: 'always'
| 'auto'
| 'exceptZero'
| 'never', style?: string, unit?: string, unitDisplay?: 'long'
| 'narrow'
| 'short', useGrouping?: bool }" - } - }, - "id": { "type": { "name": "string" } }, - "invalid": { "type": { "name": "bool" }, "default": "false" }, - "largeStep": { "type": { "name": "number" }, "default": "10" }, - "max": { "type": { "name": "number" } }, - "min": { "type": { "name": "number" } }, - "name": { "type": { "name": "string" } }, - "readOnly": { "type": { "name": "bool" }, "default": "false" }, - "render": { "type": { "name": "func" } }, - "required": { "type": { "name": "bool" }, "default": "false" }, - "smallStep": { "type": { "name": "number" }, "default": "0.1" }, - "step": { "type": { "name": "number" } }, - "value": { "type": { "name": "number" } } - }, - "name": "NumberField", - "imports": [ - "import { NumberField } from '@mui/base/NumberField';", - "import { NumberField } from '@mui/base';" - ], - "classes": [], - "spread": true, - "themeDefaultProps": true, - "muiName": "NumberField", - "forwardsRefTo": "HTMLDivElement", - "filename": "/packages/mui-base/src/NumberField/NumberField.tsx", - "inheritance": null, - "demos": "", - "cssComponent": false -} diff --git a/docs/pages/base-ui/api/switch.json b/docs/pages/base-ui/api/switch-root.json similarity index 72% rename from docs/pages/base-ui/api/switch.json rename to docs/pages/base-ui/api/switch-root.json index dc6f6d24d1..07a9990df5 100644 --- a/docs/pages/base-ui/api/switch.json +++ b/docs/pages/base-ui/api/switch-root.json @@ -14,17 +14,17 @@ } }, "readOnly": { "type": { "name": "bool" }, "default": "false" }, - "render": { "type": { "name": "func" } }, + "render": { "type": { "name": "union", "description": "element
| func" } }, "required": { "type": { "name": "bool" }, "default": "false" } }, - "name": "Switch", - "imports": ["import { Switch } from '@mui/base/Switch';", "import { Switch } from '@mui/base';"], + "name": "SwitchRoot", + "imports": [ + "import { SwitchRoot } from '@mui/base/Switch';", + "import { SwitchRoot } from '@mui/base';" + ], "classes": [], - "spread": true, - "themeDefaultProps": true, - "muiName": "Switch", - "forwardsRefTo": "HTMLButtonElement", - "filename": "/packages/mui-base/src/Switch/Switch.tsx", + "muiName": "SwitchRoot", + "filename": "/packages/mui-base/src/Switch/SwitchRoot.tsx", "inheritance": null, "demos": "", "cssComponent": false diff --git a/docs/pages/base-ui/api/switch-thumb.json b/docs/pages/base-ui/api/switch-thumb.json index 3960248469..100b089f77 100644 --- a/docs/pages/base-ui/api/switch-thumb.json +++ b/docs/pages/base-ui/api/switch-thumb.json @@ -1,7 +1,7 @@ { "props": { "className": { "type": { "name": "union", "description": "func
| string" } }, - "render": { "type": { "name": "func" } } + "render": { "type": { "name": "union", "description": "element
| func" } } }, "name": "SwitchThumb", "imports": [ diff --git a/docs/pages/base-ui/react-checkbox/[docsTab]/index.js b/docs/pages/base-ui/react-checkbox/[docsTab]/index.js index 54b9ae7edf..3f50b307ac 100644 --- a/docs/pages/base-ui/react-checkbox/[docsTab]/index.js +++ b/docs/pages/base-ui/react-checkbox/[docsTab]/index.js @@ -3,8 +3,8 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; import * as pageProps from 'docs/data/base/components/checkbox/checkbox.md?@mui/markdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import CheckboxApiJsonPageContent from '../../api/checkbox.json'; import CheckboxIndicatorApiJsonPageContent from '../../api/checkbox-indicator.json'; +import CheckboxRootApiJsonPageContent from '../../api/checkbox-root.json'; import useCheckboxApiJsonPageContent from '../../api/use-checkbox.json'; export default function Page(props) { @@ -24,13 +24,6 @@ export const getStaticPaths = () => { }; export const getStaticProps = () => { - const CheckboxApiReq = require.context( - 'docs/translations/api-docs-base/checkbox', - false, - /checkbox.*.json$/, - ); - const CheckboxApiDescriptions = mapApiPageTranslations(CheckboxApiReq); - const CheckboxIndicatorApiReq = require.context( 'docs/translations/api-docs-base/checkbox-indicator', false, @@ -38,6 +31,13 @@ export const getStaticProps = () => { ); const CheckboxIndicatorApiDescriptions = mapApiPageTranslations(CheckboxIndicatorApiReq); + const CheckboxRootApiReq = require.context( + 'docs/translations/api-docs-base/checkbox-root', + false, + /checkbox-root.*.json$/, + ); + const CheckboxRootApiDescriptions = mapApiPageTranslations(CheckboxRootApiReq); + const useCheckboxApiReq = require.context( 'docs/translations/api-docs/use-checkbox', false, @@ -48,12 +48,12 @@ export const getStaticProps = () => { return { props: { componentsApiDescriptions: { - Checkbox: CheckboxApiDescriptions, CheckboxIndicator: CheckboxIndicatorApiDescriptions, + CheckboxRoot: CheckboxRootApiDescriptions, }, componentsApiPageContents: { - Checkbox: CheckboxApiJsonPageContent, CheckboxIndicator: CheckboxIndicatorApiJsonPageContent, + CheckboxRoot: CheckboxRootApiJsonPageContent, }, hooksApiDescriptions: { useCheckbox: useCheckboxApiDescriptions }, hooksApiPageContents: { useCheckbox: useCheckboxApiJsonPageContent }, diff --git a/docs/pages/base-ui/react-number-field/[docsTab]/index.js b/docs/pages/base-ui/react-number-field/[docsTab]/index.js index 2d9b189ed2..1f474d77db 100644 --- a/docs/pages/base-ui/react-number-field/[docsTab]/index.js +++ b/docs/pages/base-ui/react-number-field/[docsTab]/index.js @@ -3,11 +3,11 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; import * as pageProps from 'docs/data/base/components/number-field/number-field.md?@mui/markdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import NumberFieldApiJsonPageContent from '../../api/number-field.json'; import NumberFieldDecrementApiJsonPageContent from '../../api/number-field-decrement.json'; import NumberFieldGroupApiJsonPageContent from '../../api/number-field-group.json'; import NumberFieldIncrementApiJsonPageContent from '../../api/number-field-increment.json'; import NumberFieldInputApiJsonPageContent from '../../api/number-field-input.json'; +import NumberFieldRootApiJsonPageContent from '../../api/number-field-root.json'; import NumberFieldScrubAreaApiJsonPageContent from '../../api/number-field-scrub-area.json'; import NumberFieldScrubAreaCursorApiJsonPageContent from '../../api/number-field-scrub-area-cursor.json'; import useNumberFieldApiJsonPageContent from '../../api/use-number-field.json'; @@ -29,13 +29,6 @@ export const getStaticPaths = () => { }; export const getStaticProps = () => { - const NumberFieldApiReq = require.context( - 'docs/translations/api-docs-base/number-field', - false, - /number-field.*.json$/, - ); - const NumberFieldApiDescriptions = mapApiPageTranslations(NumberFieldApiReq); - const NumberFieldDecrementApiReq = require.context( 'docs/translations/api-docs-base/number-field-decrement', false, @@ -64,6 +57,13 @@ export const getStaticProps = () => { ); const NumberFieldInputApiDescriptions = mapApiPageTranslations(NumberFieldInputApiReq); + const NumberFieldRootApiReq = require.context( + 'docs/translations/api-docs-base/number-field-root', + false, + /number-field-root.*.json$/, + ); + const NumberFieldRootApiDescriptions = mapApiPageTranslations(NumberFieldRootApiReq); + const NumberFieldScrubAreaApiReq = require.context( 'docs/translations/api-docs-base/number-field-scrub-area', false, @@ -90,20 +90,20 @@ export const getStaticProps = () => { return { props: { componentsApiDescriptions: { - NumberField: NumberFieldApiDescriptions, NumberFieldDecrement: NumberFieldDecrementApiDescriptions, NumberFieldGroup: NumberFieldGroupApiDescriptions, NumberFieldIncrement: NumberFieldIncrementApiDescriptions, NumberFieldInput: NumberFieldInputApiDescriptions, + NumberFieldRoot: NumberFieldRootApiDescriptions, NumberFieldScrubArea: NumberFieldScrubAreaApiDescriptions, NumberFieldScrubAreaCursor: NumberFieldScrubAreaCursorApiDescriptions, }, componentsApiPageContents: { - NumberField: NumberFieldApiJsonPageContent, NumberFieldDecrement: NumberFieldDecrementApiJsonPageContent, NumberFieldGroup: NumberFieldGroupApiJsonPageContent, NumberFieldIncrement: NumberFieldIncrementApiJsonPageContent, NumberFieldInput: NumberFieldInputApiJsonPageContent, + NumberFieldRoot: NumberFieldRootApiJsonPageContent, NumberFieldScrubArea: NumberFieldScrubAreaApiJsonPageContent, NumberFieldScrubAreaCursor: NumberFieldScrubAreaCursorApiJsonPageContent, }, diff --git a/docs/pages/base-ui/react-switch/[docsTab]/index.js b/docs/pages/base-ui/react-switch/[docsTab]/index.js index 94d9aa559a..b97d1861a2 100644 --- a/docs/pages/base-ui/react-switch/[docsTab]/index.js +++ b/docs/pages/base-ui/react-switch/[docsTab]/index.js @@ -3,7 +3,7 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocsV2'; import AppFrame from 'docs/src/modules/components/AppFrame'; import * as pageProps from 'docs/data/base/components/switch/switch.md?@mui/markdown'; import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import SwitchApiJsonPageContent from '../../api/switch.json'; +import SwitchRootApiJsonPageContent from '../../api/switch-root.json'; import SwitchThumbApiJsonPageContent from '../../api/switch-thumb.json'; import useSwitchApiJsonPageContent from '../../api/use-switch.json'; @@ -24,12 +24,12 @@ export const getStaticPaths = () => { }; export const getStaticProps = () => { - const SwitchApiReq = require.context( - 'docs/translations/api-docs-base/switch', + const SwitchRootApiReq = require.context( + 'docs/translations/api-docs-base/switch-root', false, - /switch.*.json$/, + /switch-root.*.json$/, ); - const SwitchApiDescriptions = mapApiPageTranslations(SwitchApiReq); + const SwitchRootApiDescriptions = mapApiPageTranslations(SwitchRootApiReq); const SwitchThumbApiReq = require.context( 'docs/translations/api-docs-base/switch-thumb', @@ -48,11 +48,11 @@ export const getStaticProps = () => { return { props: { componentsApiDescriptions: { - Switch: SwitchApiDescriptions, + SwitchRoot: SwitchRootApiDescriptions, SwitchThumb: SwitchThumbApiDescriptions, }, componentsApiPageContents: { - Switch: SwitchApiJsonPageContent, + SwitchRoot: SwitchRootApiJsonPageContent, SwitchThumb: SwitchThumbApiJsonPageContent, }, hooksApiDescriptions: { useSwitch: useSwitchApiDescriptions }, diff --git a/docs/translations/api-docs-base/checkbox/checkbox.json b/docs/translations/api-docs-base/checkbox-root/checkbox-root.json similarity index 100% rename from docs/translations/api-docs-base/checkbox/checkbox.json rename to docs/translations/api-docs-base/checkbox-root/checkbox-root.json diff --git a/docs/translations/api-docs-base/number-field/number-field.json b/docs/translations/api-docs-base/number-field-root/number-field-root.json similarity index 86% rename from docs/translations/api-docs-base/number-field/number-field.json rename to docs/translations/api-docs-base/number-field-root/number-field-root.json index 20a652500c..be650a3e5e 100644 --- a/docs/translations/api-docs-base/number-field/number-field.json +++ b/docs/translations/api-docs-base/number-field-root/number-field-root.json @@ -4,15 +4,10 @@ "allowWheelScrub": { "description": "Whether to allow the user to scrub the input value with the mouse wheel while focused and hovering over the input." }, - "autoFocus": { "description": "If true, the input element is focused on mount." }, "className": { "description": "Class names applied to the element or a function that returns them based on the component's state." }, - "defaultValue": { - "description": "The default value of the input element. Use when the component is not controlled." - }, "disabled": { "description": "If true, the input element is disabled." }, - "format": { "description": "Options to format the input value." }, "id": { "description": "The id of the input element." }, "invalid": { "description": "If true, the input element is invalid." }, "largeStep": { diff --git a/docs/translations/api-docs-base/switch/switch.json b/docs/translations/api-docs-base/switch-root/switch-root.json similarity index 100% rename from docs/translations/api-docs-base/switch/switch.json rename to docs/translations/api-docs-base/switch-root/switch-root.json diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 3ed5a22de8..979cd16d00 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -258,8 +258,8 @@ "/base-ui/react-transitions": "Transitions", "/base-ui/react-badge/components-api/#badge": "Badge", "/base-ui/react-button/components-api/#button": "Button", - "/base-ui/react-checkbox/components-api/#checkbox": "Checkbox", "/base-ui/react-checkbox/components-api/#checkbox-indicator": "CheckboxIndicator", + "/base-ui/react-checkbox/components-api/#checkbox-root": "CheckboxRoot", "/base-ui/react-click-away-listener/components-api/#click-away-listener": "ClickAwayListener", "/base-ui/react-transitions/components-api/#css-animation": "CssAnimation", "/base-ui/react-transitions/components-api/#css-transition": "CssTransition", @@ -272,11 +272,11 @@ "/base-ui/react-menu/components-api/#menu-item": "MenuItem", "/base-ui/react-modal/components-api/#modal": "Modal", "/base-ui/react-no-ssr/components-api/#no-ssr": "NoSsr", - "/base-ui/react-number-field/components-api/#number-field": "NumberField", "/base-ui/react-number-field/components-api/#number-field-decrement": "NumberFieldDecrement", "/base-ui/react-number-field/components-api/#number-field-group": "NumberFieldGroup", "/base-ui/react-number-field/components-api/#number-field-increment": "NumberFieldIncrement", "/base-ui/react-number-field/components-api/#number-field-input": "NumberFieldInput", + "/base-ui/react-number-field/components-api/#number-field-root": "NumberFieldRoot", "/base-ui/react-number-field/components-api/#number-field-scrub-area": "NumberFieldScrubArea", "/base-ui/react-number-field/components-api/#number-field-scrub-area-cursor": "NumberFieldScrubAreaCursor", "/base-ui/react-select/components-api/#option": "Option", @@ -287,7 +287,7 @@ "/base-ui/react-select/components-api/#select": "Select", "/base-ui/react-slider/components-api/#slider": "Slider", "/base-ui/react-snackbar/components-api/#snackbar": "Snackbar", - "/base-ui/react-switch/components-api/#switch": "Switch", + "/base-ui/react-switch/components-api/#switch-root": "SwitchRoot", "/base-ui/react-switch/components-api/#switch-thumb": "SwitchThumb", "/base-ui/react-tabs/components-api/#tab": "Tab", "/base-ui/react-tabs/components-api/#tab-panel": "TabPanel", diff --git a/packages/mui-base/src/Checkbox/CheckboxIndicator.tsx b/packages/mui-base/src/Checkbox/CheckboxIndicator.tsx index 6996db5123..6e409c6620 100644 --- a/packages/mui-base/src/Checkbox/CheckboxIndicator.tsx +++ b/packages/mui-base/src/Checkbox/CheckboxIndicator.tsx @@ -70,7 +70,7 @@ CheckboxIndicator.propTypes /* remove-proptypes */ = { /** * A function to customize rendering of the component. */ - render: PropTypes.func, + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), } as any; export { CheckboxIndicator }; diff --git a/packages/mui-base/src/Checkbox/CheckboxRoot.tsx b/packages/mui-base/src/Checkbox/CheckboxRoot.tsx index f44973fd0f..1662433376 100644 --- a/packages/mui-base/src/Checkbox/CheckboxRoot.tsx +++ b/packages/mui-base/src/Checkbox/CheckboxRoot.tsx @@ -132,7 +132,7 @@ CheckboxRoot.propTypes /* remove-proptypes */ = { /** * A function to customize rendering of the component. */ - render: PropTypes.func, + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), /** * If `true`, the `input` element is required. * diff --git a/packages/mui-base/src/NumberField/NumberFieldDecrement.tsx b/packages/mui-base/src/NumberField/NumberFieldDecrement.tsx index 3426c20519..1a5d6c60bc 100644 --- a/packages/mui-base/src/NumberField/NumberFieldDecrement.tsx +++ b/packages/mui-base/src/NumberField/NumberFieldDecrement.tsx @@ -54,7 +54,7 @@ NumberFieldDecrement.propTypes /* remove-proptypes */ = { /** * A function to customize rendering of the component. */ - render: PropTypes.func, + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), } as any; export { NumberFieldDecrement }; diff --git a/packages/mui-base/src/NumberField/NumberFieldGroup.tsx b/packages/mui-base/src/NumberField/NumberFieldGroup.tsx index f034c294e4..3880d1102b 100644 --- a/packages/mui-base/src/NumberField/NumberFieldGroup.tsx +++ b/packages/mui-base/src/NumberField/NumberFieldGroup.tsx @@ -54,7 +54,7 @@ NumberFieldGroup.propTypes /* remove-proptypes */ = { /** * A function to customize rendering of the component. */ - render: PropTypes.func, + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), } as any; export { NumberFieldGroup }; diff --git a/packages/mui-base/src/NumberField/NumberFieldIncrement.tsx b/packages/mui-base/src/NumberField/NumberFieldIncrement.tsx index 4f07452fa9..e3f55f9a50 100644 --- a/packages/mui-base/src/NumberField/NumberFieldIncrement.tsx +++ b/packages/mui-base/src/NumberField/NumberFieldIncrement.tsx @@ -54,7 +54,7 @@ NumberFieldIncrement.propTypes /* remove-proptypes */ = { /** * A function to customize rendering of the component. */ - render: PropTypes.func, + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), } as any; export { NumberFieldIncrement }; diff --git a/packages/mui-base/src/NumberField/NumberFieldInput.tsx b/packages/mui-base/src/NumberField/NumberFieldInput.tsx index cdef8c0151..7398e57881 100644 --- a/packages/mui-base/src/NumberField/NumberFieldInput.tsx +++ b/packages/mui-base/src/NumberField/NumberFieldInput.tsx @@ -61,7 +61,7 @@ NumberFieldInput.propTypes /* remove-proptypes */ = { /** * A function to customize rendering of the component. */ - render: PropTypes.func, + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), } as any; export { NumberFieldInput }; diff --git a/packages/mui-base/src/NumberField/NumberFieldRoot.tsx b/packages/mui-base/src/NumberField/NumberFieldRoot.tsx index 8b36acfb7f..2cebbf69cf 100644 --- a/packages/mui-base/src/NumberField/NumberFieldRoot.tsx +++ b/packages/mui-base/src/NumberField/NumberFieldRoot.tsx @@ -101,11 +101,6 @@ NumberFieldRoot.propTypes /* remove-proptypes */ = { * @default false */ allowWheelScrub: PropTypes.bool, - /** - * If `true`, the input element is focused on mount. - * @default false - */ - autoFocus: PropTypes.bool, /** * @ignore */ @@ -114,36 +109,11 @@ NumberFieldRoot.propTypes /* remove-proptypes */ = { * Class names applied to the element or a function that returns them based on the component's state. */ className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - /** - * The default value of the input element. Use when the component is not controlled. - */ - defaultValue: PropTypes.number, /** * If `true`, the input element is disabled. * @default false */ disabled: PropTypes.bool, - /** - * Options to format the input value. - */ - format: PropTypes.shape({ - compactDisplay: PropTypes.oneOf(['long', 'short']), - currency: PropTypes.string, - currencyDisplay: PropTypes.string, - currencySign: PropTypes.string, - localeMatcher: PropTypes.string, - maximumFractionDigits: PropTypes.number, - maximumSignificantDigits: PropTypes.number, - minimumFractionDigits: PropTypes.number, - minimumIntegerDigits: PropTypes.number, - minimumSignificantDigits: PropTypes.number, - notation: PropTypes.oneOf(['compact', 'engineering', 'scientific', 'standard']), - signDisplay: PropTypes.oneOf(['always', 'auto', 'exceptZero', 'never']), - style: PropTypes.string, - unit: PropTypes.string, - unitDisplay: PropTypes.oneOf(['long', 'narrow', 'short']), - useGrouping: PropTypes.bool, - }), /** * The id of the input element. */ @@ -183,7 +153,7 @@ NumberFieldRoot.propTypes /* remove-proptypes */ = { /** * A function to customize rendering of the component. */ - render: PropTypes.func, + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), /** * If `true`, the input element is required. * @default false diff --git a/packages/mui-base/src/NumberField/NumberFieldScrubArea.tsx b/packages/mui-base/src/NumberField/NumberFieldScrubArea.tsx index 26386487aa..df326b7e1b 100644 --- a/packages/mui-base/src/NumberField/NumberFieldScrubArea.tsx +++ b/packages/mui-base/src/NumberField/NumberFieldScrubArea.tsx @@ -83,7 +83,7 @@ NumberFieldScrubArea.propTypes /* remove-proptypes */ = { /** * A function to customize rendering of the component. */ - render: PropTypes.func, + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), /** * If specified, how much the cursor can move around the center of the scrub area element before * it will loop back around. diff --git a/packages/mui-base/src/NumberField/NumberFieldScrubAreaCursor.tsx b/packages/mui-base/src/NumberField/NumberFieldScrubAreaCursor.tsx index bc70c76b0e..ef74fa4ac7 100644 --- a/packages/mui-base/src/NumberField/NumberFieldScrubAreaCursor.tsx +++ b/packages/mui-base/src/NumberField/NumberFieldScrubAreaCursor.tsx @@ -68,7 +68,7 @@ NumberFieldScrubAreaCursor.propTypes /* remove-proptypes */ = { /** * A function to customize rendering of the component. */ - render: PropTypes.func, + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), } as any; export { NumberFieldScrubAreaCursor }; diff --git a/packages/mui-base/src/Switch/SwitchRoot.tsx b/packages/mui-base/src/Switch/SwitchRoot.tsx index 893c3fdcb4..7a950a6378 100644 --- a/packages/mui-base/src/Switch/SwitchRoot.tsx +++ b/packages/mui-base/src/Switch/SwitchRoot.tsx @@ -125,7 +125,7 @@ SwitchRoot.propTypes /* remove-proptypes */ = { /** * A function to customize rendering of the component. */ - render: PropTypes.func, + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), /** * If `true`, the switch must be checked for the browser validation to pass. * diff --git a/packages/mui-base/src/Switch/SwitchThumb.tsx b/packages/mui-base/src/Switch/SwitchThumb.tsx index d2cd9861a4..b81d66774b 100644 --- a/packages/mui-base/src/Switch/SwitchThumb.tsx +++ b/packages/mui-base/src/Switch/SwitchThumb.tsx @@ -51,7 +51,7 @@ SwitchThumb.propTypes /* remove-proptypes */ = { /** * A function to customize rendering of the component. */ - render: PropTypes.func, + render: PropTypes.oneOfType([PropTypes.element, PropTypes.func]), } as any; export { SwitchThumb };