Merge branch 'master' into docs-slots

docs/data/charts/lines/AreaBaseline.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+export default function AreaBaseline() {
+  return (
+    <LineChart
+      xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
+      series={[
+        {
+          data: [2, -5.5, 2, -7.5, 1.5, 6],
+          area: true,
+          baseline: 'min',
+        },
+      ]}
+      width={500}
+      height={300}
+    />
+  );
+}

docs/data/charts/lines/AreaBaseline.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { LineChart } from '@mui/x-charts/LineChart';
+
+export default function AreaBaseline() {
+  return (
+    <LineChart
+      xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
+      series={[
+        {
+          data: [2, -5.5, 2, -7.5, 1.5, 6],
+          area: true,
+          baseline: 'min',
+        },
+      ]}
+      width={500}
+      height={300}
+    />
+  );
+}

docs/data/charts/lines/AreaBaseline.tsx.preview

@@ -0,0 +1,12 @@
+<LineChart
+  xAxis={[{ data: [1, 2, 3, 5, 8, 10] }]}
+  series={[
+    {
+      data: [2, -5.5, 2, -7.5, 1.5, 6],
+      area: true,
+      baseline: 'min',
+    },
+  ]}
+  width={500}
+  height={300}
+/>

docs/data/charts/lines/lines.md

@@ -175,6 +175,20 @@ Different series could even have different interpolations.
 
 {{"demo": "InterpolationDemoNoSnap.js", "hideToolbar": true}}
 
+### Baseline
+
+The area chart draws a `baseline` on the Y axis `0`.
+This is useful as a base value, but customized visualizations may require a different baseline.
+
+To get the area filling the space above or below the line, set `baseline` to `"min"` or `"max"`.
+It is also possible to provide a `number` value to fix the baseline at the desired position.
+
+:::warning
+The `baseline` should not be used with stacked areas, as it will not work as expected.
+:::
+
+{{"demo": "AreaBaseline.js"}}
+
 ### Optimization
 
 To show mark elements, use `showMark` series property.

docs/data/pages.ts

@@ -516,6 +516,7 @@ const pages: MuiPage[] = [
           { pathname: '/x/react-tree-view/rich-tree-view/expansion' },
           { pathname: '/x/react-tree-view/rich-tree-view/customization' },
           { pathname: '/x/react-tree-view/rich-tree-view/focus' },
+          { pathname: '/x/react-tree-view/rich-tree-view/editing' },
           { pathname: '/x/react-tree-view/rich-tree-view/ordering', plan: 'pro' },
         ],
       },

docs/data/tree-view/rich-tree-view/editing/ApiMethodUpdateItemLabel.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { MUI_X_PRODUCTS } from './products';
+
+export default function ApiMethodUpdateItemLabel() {
+  const [isLabelUpdated, setIsLabelUpdated] = React.useState(false);
+  const apiRef = useTreeViewApiRef();
+
+  const handleUpdateLabel = () => {
+    if (isLabelUpdated) {
+      apiRef.current.updateItemLabel('grid', 'Data Grid');
+      setIsLabelUpdated(false);
+    } else {
+      apiRef.current.updateItemLabel('grid', 'New Label');
+      setIsLabelUpdated(true);
+    }
+  };
+
+  return (
+    <Stack spacing={2}>
+      <Stack spacing={2} direction="row">
+        <Button onClick={handleUpdateLabel}>
+          {isLabelUpdated ? 'Reset Data Grid label' : 'Change Data Grid label'}
+        </Button>
+      </Stack>
+      <Box sx={{ minHeight: 352, minWidth: 260 }}>
+        <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
+      </Box>
+    </Stack>
+  );
+}

docs/data/tree-view/rich-tree-view/editing/ApiMethodUpdateItemLabel.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
+import Button from '@mui/material/Button';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { useTreeViewApiRef } from '@mui/x-tree-view/hooks';
+import { MUI_X_PRODUCTS } from './products';
+
+export default function ApiMethodUpdateItemLabel() {
+  const [isLabelUpdated, setIsLabelUpdated] = React.useState(false);
+  const apiRef = useTreeViewApiRef();
+
+  const handleUpdateLabel = () => {
+    if (isLabelUpdated) {
+      apiRef.current!.updateItemLabel('grid', 'Data Grid');
+      setIsLabelUpdated(false);
+    } else {
+      apiRef.current!.updateItemLabel('grid', 'New Label');
+      setIsLabelUpdated(true);
+    }
+  };
+
+  return (
+    <Stack spacing={2}>
+      <Stack spacing={2} direction="row">
+        <Button onClick={handleUpdateLabel}>
+          {isLabelUpdated ? 'Reset Data Grid label' : 'Change Data Grid label'}
+        </Button>
+      </Stack>
+      <Box sx={{ minHeight: 352, minWidth: 260 }}>
+        <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
+      </Box>
+    </Stack>
+  );
+}

docs/data/tree-view/rich-tree-view/editing/ApiMethodUpdateItemLabel.tsx.preview

@@ -0,0 +1,8 @@
+<Stack spacing={2} direction="row">
+  <Button onClick={handleUpdateLabel}>
+    {isLabelUpdated ? 'Reset Data Grid label' : 'Change Data Grid label'}
+  </Button>
+</Stack>
+<Box sx={{ minHeight: 352, minWidth: 260 }}>
+  <RichTreeView items={MUI_X_PRODUCTS} apiRef={apiRef} />
+</Box>

docs/data/tree-view/rich-tree-view/editing/CustomBehavior.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
+import { TreeItem2 } from '@mui/x-tree-view/TreeItem2';
+
+import { MUI_X_PRODUCTS } from './products';
+
+const CustomTreeItem2 = React.forwardRef(function CustomTreeItem2(props, ref) {
+  const { interactions } = useTreeItem2Utils({
+    itemId: props.itemId,
+    children: props.children,
+  });
+
+  const handleInputBlur = (event) => {
+    interactions.handleCancelItemLabelEditing(event);
+  };
+
+  return (
+    <TreeItem2
+      {...props}
+      ref={ref}
+      slotProps={{
+        labelInput: {
+          onBlur: handleInputBlur,
+        },
+      }}
+    />
+  );
+});
+
+export default function CustomBehavior() {
+  return (
+    <Box sx={{ minHeight: 352, minWidth: 260 }}>
+      <RichTreeView
+        items={MUI_X_PRODUCTS}
+        slots={{ item: CustomTreeItem2 }}
+        experimentalFeatures={{ labelEditing: true }}
+        isItemEditable
+        defaultExpandedItems={['grid', 'pickers']}
+      />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/editing/CustomBehavior.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { RichTreeView } from '@mui/x-tree-view/RichTreeView';
+import { useTreeItem2Utils } from '@mui/x-tree-view/hooks';
+import { TreeItem2, TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
+import { UseTreeItem2LabelInputSlotOwnProps } from '@mui/x-tree-view/useTreeItem2';
+import { MUI_X_PRODUCTS } from './products';
+
+const CustomTreeItem2 = React.forwardRef(function CustomTreeItem2(
+  props: TreeItem2Props,
+  ref: React.Ref<HTMLLIElement>,
+) {
+  const { interactions } = useTreeItem2Utils({
+    itemId: props.itemId,
+    children: props.children,
+  });
+
+  const handleInputBlur: UseTreeItem2LabelInputSlotOwnProps['onBlur'] = (event) => {
+    interactions.handleCancelItemLabelEditing(event);
+  };
+
+  return (
+    <TreeItem2
+      {...props}
+      ref={ref}
+      slotProps={{
+        labelInput: {
+          onBlur: handleInputBlur,
+        },
+      }}
+    />
+  );
+});
+
+export default function CustomBehavior() {
+  return (
+    <Box sx={{ minHeight: 352, minWidth: 260 }}>
+      <RichTreeView
+        items={MUI_X_PRODUCTS}
+        slots={{ item: CustomTreeItem2 }}
+        experimentalFeatures={{ labelEditing: true }}
+        isItemEditable
+        defaultExpandedItems={['grid', 'pickers']}
+      />
+    </Box>
+  );
+}

docs/data/tree-view/rich-tree-view/editing/CustomBehavior.tsx.preview

@@ -0,0 +1,7 @@
+<RichTreeView
+  items={MUI_X_PRODUCTS}
+  slots={{ item: CustomTreeItem2 }}
+  experimentalFeatures={{ labelEditing: true }}
+  isItemEditable
+  defaultExpandedItems={['grid', 'pickers']}
+/>