diff --git a/CHANGELOG.md b/CHANGELOG.md index f98c67d25d17..2dac6eb4e0c4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -69,7 +69,7 @@ Same changes as in `@mui/x-charts@7.21.0`. #### `@mui/x-tree-view@7.21.0` -- [TreeView] Fix `alpha` usage with CSS variables (#14969) @wangkailang +- [TreeView] Fix `alpha()` usage with CSS variables (#14969) @wangkailang - [TreeView] Fix usage of the `aria-selected` attribute (#14991) @flaviendelangle - [TreeView] Fix hydration error (#15002) @flaviendelangle @@ -1225,7 +1225,7 @@ _Jul 5, 2024_ We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨: - 🔄 Add loading overlay variants, including a skeleton loader option to the Data Grid component. See [Loading overlay docs](https://mui.com/x/react-data-grid/overlays/#loading-overlay) for more details. -- 🌳 Add `selectItem` and `getItemDOMElement` methods to the TreeView component public API +- 🌳 Add `selectItem()` and `getItemDOMElement()` methods to the TreeView component public API - ⛏️ Make the `usePickersTranslations` hook public in the pickers component - 🐞 Bugfixes @@ -1270,7 +1270,7 @@ Same changes as in `@mui/x-date-pickers@7.9.0`. #### `@mui/x-tree-view@7.9.0` -- [TreeView] Add `selectItem` and `getItemDOMElement` methods to the public API (#13485) @flaviendelangle +- [TreeView] Add `selectItem()` and `getItemDOMElement()` methods to the public API (#13485) @flaviendelangle ### Docs diff --git a/docs/data/charts/areas-demo/areas-demo.md b/docs/data/charts/areas-demo/areas-demo.md index 92432f02ad72..d784d0996c93 100644 --- a/docs/data/charts/areas-demo/areas-demo.md +++ b/docs/data/charts/areas-demo/areas-demo.md @@ -36,7 +36,7 @@ You can pass this gradient definition as a children of the `` and u To do so you will need to use the [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient) and [``](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/stop) SVG elements. The first part is to get the SVG total height. -Which can be done with the `useDrawingArea` hook. +Which can be done with the `useDrawingArea()` hook. It's useful to define the `` as a vector that goes from the top to the bottom of our SVG container. Then to define where the gradient should switch from one color to another, you can use the `useYScale` hook to get the y coordinate of value 0. diff --git a/docs/data/charts/axis/axis.md b/docs/data/charts/axis/axis.md index e415596c2583..e8edd2836409 100644 --- a/docs/data/charts/axis/axis.md +++ b/docs/data/charts/axis/axis.md @@ -56,7 +56,7 @@ Which expects an array of value coherent with the `scaleType`: Some series types also require specific axis attributes: - line plots require an `xAxis` to have `data` provided -- bar plots require an `xAxis` with `scaleType='band'` and some `data` provided. +- bar plots require an `xAxis` with `scaleType="band"` and some `data` provided. ### Axis formatter diff --git a/docs/data/charts/bars/bars.md b/docs/data/charts/bars/bars.md index 11c42dd85e93..606f2895de13 100644 --- a/docs/data/charts/bars/bars.md +++ b/docs/data/charts/bars/bars.md @@ -100,7 +100,7 @@ Learn more about the `colorMap` properties in the [Styling docs](/x/react-charts {{"demo": "ColorScale.js"}} -### Border Radius +### Border radius To give your bar chart rounded corners, you can change the value of the `borderRadius` property on the [BarChart](/x/api/charts/bar-chart/#bar-chart-prop-slots). @@ -117,7 +117,7 @@ Or you can pass `'value'` to display the raw value of the bar. {{"demo": "BarLabel.js"}} -### Custom Labels +### Custom labels You can display, change, or hide labels based on conditional logic. To do so, provide a function to the `barLabel`. @@ -174,7 +174,7 @@ import ChartsOnAxisClickHandler from '@mui/x-charts/ChartsOnAxisClickHandler'; To skip animation at the creation and update of your chart, you can use the `skipAnimation` prop. When set to `true` it skips animation powered by `@react-spring/web`. -Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important). +Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important). ```jsx // For a single component chart diff --git a/docs/data/charts/components/components.md b/docs/data/charts/components/components.md index 5cfff2f9f6d9..be2f67d72870 100644 --- a/docs/data/charts/components/components.md +++ b/docs/data/charts/components/components.md @@ -20,7 +20,7 @@ Charts dimensions are defined by a few props: The term **drawing area** refers to the space available to plot data (scatter points, lines, or pie arcs). The `margin` is used to leave some space for extra elements, such as the axes, the legend, or the title. -You can use the `useDrawingArea` hook in the charts subcomponents to get the coordinates of the **drawing area**. +You can use the `useDrawingArea()` hook in the charts subcomponents to get the coordinates of the **drawing area**. ```jsx import { useDrawingArea } from '@mui/x-charts'; diff --git a/docs/data/charts/gauge/gauge.md b/docs/data/charts/gauge/gauge.md index 30c5df560756..465560c8527d 100644 --- a/docs/data/charts/gauge/gauge.md +++ b/docs/data/charts/gauge/gauge.md @@ -101,7 +101,7 @@ import { ### Creating your components -To create your own components, use the `useGaugeState` hook which provides all you need about the gauge configuration: +To create your own components, use the `useGaugeState()` hook which provides all you need about the gauge configuration: - information about the value: `value`, `valueMin`, `valueMax` - information to plot the arc: `startAngle`, `endAngle`, `outerRadius`, `innerRadius`, `cornerRadius`, `cx`, and `cy` diff --git a/docs/data/charts/lines/lines.md b/docs/data/charts/lines/lines.md index be651d4dd57a..de9a55dfb928 100644 --- a/docs/data/charts/lines/lines.md +++ b/docs/data/charts/lines/lines.md @@ -235,7 +235,7 @@ sx={{ To skip animation at the creation and update of your chart, you can use the `skipAnimation` prop. When set to `true` it skips animation powered by `@react-spring/web`. -Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important). +Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important). :::warning If you support interactive ways to add or remove series from your chart, you have to provide the series' id. diff --git a/docs/data/charts/pie/pie.md b/docs/data/charts/pie/pie.md index 047a4cc576e2..eda5601ffc78 100644 --- a/docs/data/charts/pie/pie.md +++ b/docs/data/charts/pie/pie.md @@ -110,7 +110,7 @@ const onItemClick = ( To skip animation at the creation and update of your chart you can use the `skipAnimation` prop. When set to `true` it skips animation powered by `@react-spring/web`. -Charts containers already use the `useReducedMotion` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important). +Charts containers already use the `useReducedMotion()` from `@react-spring/web` to skip animation [according to user preferences](https://react-spring.dev/docs/utilities/use-reduced-motion#why-is-it-important). ```jsx // For a single component chart diff --git a/docs/data/charts/tooltip/tooltip.md b/docs/data/charts/tooltip/tooltip.md index 655886065223..474de7b274f0 100644 --- a/docs/data/charts/tooltip/tooltip.md +++ b/docs/data/charts/tooltip/tooltip.md @@ -15,8 +15,8 @@ If you are using composition, you can add the `` component and The tooltip can be triggered by two kinds of events: -- `'item'`—when the user's mouse hovers over an item on the chart, the tooltip will display data about this specific item. -- `'axis'`—the user's mouse position is associated with a value of the x-axis. The tooltip will display data about all series at this specific x value. +- `'item'`—when the user's mouse hovers over an item on the chart, the tooltip displays data about this specific item. +- `'axis'`—the user's mouse position is associated with a value of the x-axis. The tooltip displays data about all series at this specific x value. - `'none'`—disable the tooltip. {{"demo": "Interaction.js"}} @@ -79,7 +79,7 @@ See [Label—Conditional formatting](/x/react-charts/label/#conditional-formatti ### Hiding values You can hide the axis value with `hideTooltip` in the `xAxis` props. -It will remove the header showing the x-axis value from the tooltip. +It removes the header showing the x-axis value from the tooltip. ```jsx ; ``` -Note that `createTheme` accepts any number of arguments. +Note that `createTheme()` accepts any number of arguments. If you are already using the [translations of the core components](/material-ui/guides/localization/#locale-text), you can add `bgBG` as a new argument. The same import works for Data Grid Pro as it's an extension of Data Grid. @@ -86,7 +86,7 @@ const theme = createTheme( ; ``` -If you want to pass language translations directly to the Data Grid without using `createTheme` and `ThemeProvider`, you can directly load the language translations from `@mui/x-data-grid/locales`. +If you want to pass language translations directly to the Data Grid without using `createTheme()` and `ThemeProvider`, you can directly load the language translations from `@mui/x-data-grid/locales`. ```jsx import { DataGrid } from '@mui/x-data-grid'; diff --git a/docs/data/date-pickers/localization/localization.md b/docs/data/date-pickers/localization/localization.md index 9c17517d832a..dab97f4bcb5d 100644 --- a/docs/data/date-pickers/localization/localization.md +++ b/docs/data/date-pickers/localization/localization.md @@ -46,7 +46,7 @@ function App({ children }) { } ``` -Note that `createTheme` accepts any number of arguments. +Note that `createTheme()` accepts any number of arguments. If you are already using the [translations of the core components](/material-ui/guides/localization/#locale-text) or the [translations of the Data Grid](/x/react-data-grid/localization/#locale-text), you can add `deDE` as a new argument. ```jsx @@ -73,7 +73,7 @@ function App({ children }) { ### Using LocalizationProvider -If you want to pass language translations without using `createTheme` and `ThemeProvider`, +If you want to pass language translations without using `createTheme()` and `ThemeProvider`, you can directly load the language translations from the `@mui/x-date-pickers` or `@mui/x-date-pickers-pro` package and pass them to the `LocalizationProvider`. ```jsx diff --git a/docs/data/tree-view/rich-tree-view/focus/focus.md b/docs/data/tree-view/rich-tree-view/focus/focus.md index a293e75b0d20..9a23786173ea 100644 --- a/docs/data/tree-view/rich-tree-view/focus/focus.md +++ b/docs/data/tree-view/rich-tree-view/focus/focus.md @@ -41,7 +41,7 @@ apiRef.current.focusItem( :::info This method only works with items that are currently visible. -Calling `apiRef.focusItem` on an item whose parent is collapsed will do nothing. +Calling `apiRef.focusItem()` on an item whose parent is collapsed does nothing. ::: {{"demo": "ApiMethodFocusItem.js"}} diff --git a/docs/data/tree-view/rich-tree-view/items/items.md b/docs/data/tree-view/rich-tree-view/items/items.md index 964ee3b266f2..49db9da0a4e2 100644 --- a/docs/data/tree-view/rich-tree-view/items/items.md +++ b/docs/data/tree-view/rich-tree-view/items/items.md @@ -179,7 +179,7 @@ const item = apiRef.current.getItem( ### Get an item's DOM element by ID -Use the `getItemDOMElement` API method to get an item's DOM element by its ID. +Use the `getItemDOMElement()` API method to get an item's DOM element by its ID. ```ts const itemElement = apiRef.current.getItemDOMElement( diff --git a/docs/data/tree-view/rich-tree-view/selection/selection.md b/docs/data/tree-view/rich-tree-view/selection/selection.md index 6012a68e78d6..02036050d502 100644 --- a/docs/data/tree-view/rich-tree-view/selection/selection.md +++ b/docs/data/tree-view/rich-tree-view/selection/selection.md @@ -117,13 +117,13 @@ const apiRef = useTreeViewApiRef(); return ; ``` -When your component first renders, `apiRef` will be `undefined`. +When your component first renders, `apiRef` is `undefined`. After this initial render, `apiRef` holds methods to interact imperatively with the Tree View. ::: ### Select or deselect an item -Use the `selectItem` API method to select or deselect an item: +Use the `selectItem()` API method to select or deselect an item: ```ts apiRef.current.selectItem({ diff --git a/docs/data/tree-view/simple-tree-view/focus/focus.md b/docs/data/tree-view/simple-tree-view/focus/focus.md index ef9cd7d5558e..8cc4576f617e 100644 --- a/docs/data/tree-view/simple-tree-view/focus/focus.md +++ b/docs/data/tree-view/simple-tree-view/focus/focus.md @@ -41,7 +41,7 @@ apiRef.current.focusItem( :::info This method only works with items that are currently visible. -Calling `apiRef.focusItem` on an item whose parent is collapsed will do nothing. +Calling `apiRef.focusItem()` on an item whose parent is collapsed does nothing. ::: {{"demo": "ApiMethodFocusItem.js"}} diff --git a/docs/data/tree-view/simple-tree-view/items/items.md b/docs/data/tree-view/simple-tree-view/items/items.md index 6c1bc4f06e64..cd516f83665a 100644 --- a/docs/data/tree-view/simple-tree-view/items/items.md +++ b/docs/data/tree-view/simple-tree-view/items/items.md @@ -91,13 +91,13 @@ const apiRef = useTreeViewApiRef(); return {children}; ``` -When your component first renders, `apiRef` will be `undefined`. +When your component first renders, `apiRef` is `undefined`. After this initial render, `apiRef` holds methods to interact imperatively with the Tree View. ::: ### Get an item's DOM element by ID -Use the `getItemDOMElement` API method to get an item's DOM element by its ID. +Use the `getItemDOMElement()` API method to get an item's DOM element by its ID. ```ts const itemElement = apiRef.current.getItemDOMElement( diff --git a/docs/data/tree-view/simple-tree-view/selection/selection.md b/docs/data/tree-view/simple-tree-view/selection/selection.md index aceb02cb7215..c9f44a4e63ef 100644 --- a/docs/data/tree-view/simple-tree-view/selection/selection.md +++ b/docs/data/tree-view/simple-tree-view/selection/selection.md @@ -91,7 +91,7 @@ After this initial render, `apiRef` holds methods to interact imperatively with ### Select or deselect an item -Use the `selectItem` API method to select or deselect an item: +Use the `selectItem()` API method to select or deselect an item: ```ts apiRef.current.selectItem({ diff --git a/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx b/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx index 7278a105536f..24d575ca0095 100644 --- a/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx +++ b/packages/x-charts/src/ChartsLegend/DefaultChartsLegend.tsx @@ -20,7 +20,7 @@ export interface LegendRendererProps series: FormattedSeries; seriesToDisplay: LegendPerItemProps['itemsToDisplay']; /** - * @deprecated Use the `useDrawingArea` hook instead. + * @deprecated Use the `useDrawingArea()` hook instead. */ drawingArea: Omit; /** @@ -76,7 +76,7 @@ DefaultChartsLegend.propTypes = { */ direction: PropTypes.oneOf(['column', 'row']).isRequired, /** - * @deprecated Use the `useDrawingArea` hook instead. + * @deprecated Use the `useDrawingArea()` hook instead. */ drawingArea: PropTypes.shape({ bottom: PropTypes.number.isRequired,