[core] Apply () function convention (#15075)

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
 

docs/data/charts/areas-demo/areas-demo.md

@@ -36,7 +36,7 @@ You can pass this gradient definition as a children of the `<LineChart />` and u
 To do so you will need to use the [`<linearGradient />`](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/linearGradient) and [`<stop />`](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 `<linearGradient />` 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.

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
 

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

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';

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`

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.

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

docs/data/charts/tooltip/tooltip.md

@@ -15,8 +15,8 @@ If you are using composition, you can add the `<ChartsTooltip />` 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
 <LineChart
@@ -116,7 +116,7 @@ The second one when trigger is set to `"axis"`.
 
 ## Composition
 
-If you're using composition, by default, the axis will be listening for mouse events to get its current x/y values.
+If you're using composition, by default, the axis listens for mouse events to get its current x/y values.
 If you don't need it, you can disable those listeners with the `disableAxisListener` prop.
 
 You need those listeners if you are using [axes highlight](/x/react-charts/highlighting/#highlighting-axis) or you have a tooltip [triggered by axis](/x/react-charts/tooltip/#tooltip-trigger).
@@ -131,34 +131,34 @@ You need those listeners if you are using [axes highlight](/x/react-charts/highl
 
 #### Item Tooltip
 
-You can create your own tooltip by using `useItemTooltip`.
+You can create your own tooltip by using `useItemTooltip()`.
 This hook returns the information about the current item user is interacting with.
 It contains:
 
 - `identifier`: An object that identify the item. Which often contains its series type, series id, and data index.
 - `color`: The color used to display the item. This includes the impact of [color map](/x/react-charts/styling/#values-color).
 - `label`, `value`, `formattedValue`: Values computed to simplify the tooltip creation.
 
-To follow the mouse position, you can use the `useMouseTracker`, or track events on the SVG thanks to `useSvgRef`.
+To follow the mouse position, you can use the `useMouseTracker()`, or track events on the SVG thanks to `useSvgRef()`.
 
 {{"demo": "CustomTooltipContent.js"}}
 
 #### Axis Tooltip
 
-Like in previous section, you can create your own tooltip by using `useAxisTooltip`.
+Like in previous section, you can create your own tooltip by using `useAxisTooltip()`.
 This hook returns the information about the current axis user is interacting with and the relevant series.
 It contains:
 
 - `identifier`: An object that identify the axis. Which often contains its series type, series id, and data index.
 - `color`: The color used to display the item. This includes the impact of [color map](/x/react-charts/styling/#values-color).
 - `label`, `value`, `formattedValue`: Values computed to simplify the tooltip creation.
 
-To follow the mouse position, you can use the `useMouseTracker`, or track events on the SVG thanks to `useSvgRef`.
+To follow the mouse position, you can use the `useMouseTracker()`, or track events on the SVG thanks to `useSvgRef()`.
 
 {{"demo": "CustomAxisTooltipContent.js"}}
 
 ### Tooltip position
 
-This demo show example about how to use additional hooks such as `useXAxis` or `useDrawingArea` to customize the tooltip position.
+This demo show example about how to use additional hooks such as `useXAxis()` or `useDrawingArea()` to customize the tooltip position.
 
 {{"demo": "CustomTooltipPosition.js"}}

docs/data/data-grid/column-definition/column-definition.md

@@ -102,8 +102,8 @@ Read more in the [handling autogenerated rows](/x/react-data-grid/column-definit
 :::
 
 :::warning
-[Row grouping](/x/react-data-grid/row-grouping/) uses the [`groupingValueGetter`](/x/react-data-grid/row-grouping/#using-groupingvaluegetter-for-complex-grouping-value) instead of `valueGetter` to get the value for the grouping.
-The value passed to the `groupingValueGetter` is the raw row value (`row[field]`) even if the column definition has a `valueGetter` defined.
+[Row grouping](/x/react-data-grid/row-grouping/) uses the [`groupingValueGetter()`](/x/react-data-grid/row-grouping/#using-groupingvaluegetter-for-complex-grouping-value) instead of `valueGetter` to get the value for the grouping.
+The value passed to the `groupingValueGetter()` is the raw row value (`row[field]`) even if the column definition has a `valueGetter` defined.
 :::
 
 ### Value formatter

docs/data/data-grid/editing/editing.md

@@ -241,7 +241,7 @@ const columns: GridColDef[] = [
 You can use the `valueSetter` property of the column definition to customize how the row is updated with a new value.
 This lets you insert a value from a nested object.
 It is called with an object containing the new cell value to be saved as well as the row that the cell belongs to.
-If you are already using a `valueGetter` to extract the value from a nested object, then the `valueSetter` will probably also be necessary.
+If you are already using a `valueGetter` to extract the value from a nested object, then the `valueSetter` is probably also necessary.
 
 ```tsx
 const columns: GridColDef[] = [

docs/data/data-grid/localization/localization.md

@@ -59,7 +59,7 @@ const theme = createTheme(
 </ThemeProvider>;
 ```
 
-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(
 </ThemeProvider>;
 ```
 
-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';

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

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"}}

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(

docs/data/tree-view/rich-tree-view/selection/selection.md

@@ -117,13 +117,13 @@ const apiRef = useTreeViewApiRef();
 return <RichTreeView apiRef={apiRef} items={ITEMS}>;
 ```
 
-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({

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"}}

docs/data/tree-view/simple-tree-view/items/items.md

@@ -91,13 +91,13 @@ const apiRef = useTreeViewApiRef();
 return <SimpleTreeView apiRef={apiRef}>{children}</SimpleTreeView>;
 ```
 
-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(

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({

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<DrawingArea, 'isPointInside'>;
   /**
@@ -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,