Merge branch 'master' into fix-cellValue-type-in-quick-filter-v7

mui · Nov 6, 2023 · decaba4 · decaba4
2 parents f41c87e + a9ec0fc
commit decaba4
Show file tree

Hide file tree

Showing 37 changed files with 1,787 additions and 997 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,67 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.18.0
+
+_Nov 3, 2023_
+
+We'd like to offer a big thanks to the 7 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 The Charts package is now officially stable!
+- 🥧 Pie charts are now animated.
+- 📈 Line charts now support partial data, and can interpolate missing data.
+
+<img width="380" alt="line charts with partial data" src="https://github.com/mui/mui-x/assets/45398769/385ecf77-19b2-4a03-8aef-5d547db1d9ad">
+
+- ✨ Allow to ignore [diacritics](https://en.wikipedia.org/wiki/Diacritic) when filtering
+- 📚 Documentation improvements
+
+### Data Grid
+
+#### `@mui/x-data-grid@6.18.0`
+
+- [DataGrid] Allow to ignore [diacritics](https://en.wikipedia.org/wiki/Diacritic) when filtering (#10569) @cherniavskii
+- [DataGrid] Fix a typo in `gridFilterApi` (#10786) @vu-dao-93
+- [DataGrid] Fix `undefined` row id (#10670) @romgrk
+- [DataGrid] Make column autosizing work with dynamic row height (#10693) @cherniavskii
+- [l10n] Allow to customize sorting label per column (#10839) @JerryWu1234
+
+#### `@mui/x-data-grid-pro@6.18.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-data-grid@6.18.0`.
+
+#### `@mui/x-data-grid-premium@6.18.0` [![premium](https://mui.com/r/x-premium-svg)](https://mui.com/r/x-premium-svg-link 'Premium plan')
+
+Same changes as in `@mui/x-data-grid-pro@6.18.0`.
+
+### Date Pickers
+
+#### `@mui/x-date-pickers@6.18.0`
+
+- [pickers] Add reference links to calendar components (#10644) @michelengelen
+
+#### `@mui/x-date-pickers-pro@6.18.0` [![pro](https://mui.com/r/x-pro-svg)](https://mui.com/r/x-pro-svg-link 'Pro plan')
+
+Same changes as in `@mui/x-date-pickers@6.18.0`.
+
+### Charts / `@mui/x-charts@6.18.0`
+
+- [charts] Add animation on pie chart (#10782) @alexfauquette
+- [charts] Add reference links to shared/misc chart components (#10660) @michelengelen
+- [charts] Allows to connect nulls (#10803) @alexfauquette
+- [charts] Fix axis highlight in dark mode (#10820) @LukasTy
+
+### Docs
+
+- [docs] Add a data grid recipe for autosizing columns after fetching row-data (#10822) @michelengelen
+- [docs] Add a data grid recipe showing how to remove cell outline on `focus` (#10843) @michelengelen
+- [docs] Add demo about how to use charts margin (#10886) @alexfauquette
+- [docs] Improve custom field input demos readability (#10559) @LukasTy
+
+### Core
+
+- [core] Generate `slot` API descriptions based on `slots` or `components` (#10879) @LukasTy
+
 ## 6.17.0
 
 _Oct 27, 2023_

diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt
@@ -15,4 +15,3 @@ Broken links found by `yarn docs:link-check` that exist:
 - https://mui.com/x/api/data-grid/data-grid/#props
 - https://mui.com/x/api/data-grid/data-grid/#slots
 - https://mui.com/x/api/date-pickers/date-picker/#slots
-- https://mui.com/x/react-data-grid/migration-v4/
diff --git a/docs/data/charts/overview/overview.md b/docs/data/charts/overview/overview.md
@@ -8,10 +8,6 @@ packageName: '@mui/x-charts'
 
 <p class="description">A fast and extendable library of react chart components for data visualization.</p>
 
-:::warning
-This library is in the alpha phase. This means it might receive some breaking changes if they are needed to improve the components.
-:::
-
 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}}
 
 ## Overview

diff --git a/docs/data/charts/styling/MarginNoSnap.js b/docs/data/charts/styling/MarginNoSnap.js
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import ChartsUsageDemo from 'docsx/src/modules/components/ChartsUsageDemo';
+import { BarChart } from '@mui/x-charts/BarChart';
+import { DEFAULT_X_AXIS_KEY, DEFAULT_Y_AXIS_KEY } from '@mui/x-charts/constants';
+
+const data = ['left', 'right', 'top', 'bottom'].map((propName) => ({
+  propName,
+  knob: 'number',
+  defaultValue: 80,
+  step: 1,
+  min: 0,
+  max: 200,
+}));
+export default function MarginNoSnap() {
+  return (
+    <ChartsUsageDemo
+      componentName="Margin demos"
+      data={data}
+      renderDemo={(props) => (
+        <BarChart
+          series={[{ data: [6, 18, 12] }]}
+          width={500}
+          height={300}
+          margin={{
+            left: props.left,
+            right: props.right,
+            top: props.top,
+            bottom: props.bottom,
+          }}
+          xAxis={[
+            {
+              id: DEFAULT_X_AXIS_KEY,
+              scaleType: 'band',
+              data: ['Page 1', 'Page 2', 'Page 3'],
+            },
+          ]}
+          topAxis={DEFAULT_X_AXIS_KEY}
+          rightAxis={DEFAULT_Y_AXIS_KEY}
+        />
+      )}
+      getCode={({ props }) => {
+        return [
+          `import { BarChart } from '@mui/x-charts/BarChart';`,
+          '',
+          `<BarChart`,
+          `  // ...`,
+          `  margin={{`,
+          `    left: ${props.left},`,
+          `    right: ${props.right},`,
+          `    top: ${props.top},`,
+          `    bottom: ${props.bottom},`,
+          `  }}`,
+          '/>',
+        ].join('\n');
+      }}
+    />
+  );
+}
diff --git a/docs/data/charts/styling/styling.md b/docs/data/charts/styling/styling.md
@@ -52,16 +52,18 @@ Those will fix the chart's size to the given value (in px).
 
 ### Placement
 
-At the core of charts layout is the drawing area which corresponds to the space available to represent data.
+At the core of chart layout is the drawing area which corresponds to the space available to represent data.
 
-This space can be fined with the `margin` prop and its properties `top`, `bottom`, `left`, and `right`.
+This space can be defined with the `margin` prop and its properties `top`, `bottom`, `left`, and `right`.
 Those values define the space between the SVG border and the drawing area.
 
-You might want to modify those values to let more space for your axis ticks or reduce them to provide more space for the data.
+You might want to modify those values to leave more space for your axis ticks or reduce them to provide more space for the data.
+
+{{"demo": "MarginNoSnap.js"}}
 
 ### CSS
 
 Since the library relies on SVG for rendering, you can customize them as you do with other MUI components with CSS overriding.
 
 Chart components accept the `sx` props.
-And you can target any sub elements with its class name.
+From here, you can target any subcomponents with its class name.
diff --git a/docs/data/date-pickers/custom-field/PickerWithBrowserField.js b/docs/data/date-pickers/custom-field/PickerWithBrowserField.js
@@ -1,18 +1,9 @@
 import * as React from 'react';
 
 import { unstable_useForkRef as useForkRef } from '@mui/utils';
-import { useSlotProps } from '@mui/base/utils';
 import Box from '@mui/material/Box';
-import Stack from '@mui/material/Stack';
-import IconButton from '@mui/material/IconButton';
-import InputAdornment from '@mui/material/InputAdornment';
-import { DemoContainer } from '@mui/x-date-pickers/internals/demo';
-import { DateRangeIcon } from '@mui/x-date-pickers/icons';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
-import { unstable_useSingleInputDateRangeField as useSingleInputDateRangeField } from '@mui/x-date-pickers-pro/SingleInputDateRangeField';
-import { unstable_useMultiInputDateRangeField as useMultiInputDateRangeField } from '@mui/x-date-pickers-pro/MultiInputDateRangeField';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { unstable_useDateField as useDateField } from '@mui/x-date-pickers/DateField';
 
@@ -37,7 +28,7 @@ const BrowserField = React.forwardRef((props, ref) => {
 
   return (
     <Box
-      sx={{ ...(sx || {}), display: 'flex', alignItems: 'center', flexGrow: 1 }}
+      sx={{ ...(sx || {}), display: 'flex', alignItems: 'center' }}
       id={id}
       ref={handleRef}
     >
@@ -48,166 +39,6 @@ const BrowserField = React.forwardRef((props, ref) => {
   );
 });
 
-const BrowserSingleInputDateRangeField = React.forwardRef((props, ref) => {
-  const { slots, slotProps, onAdornmentClick, ...other } = props;
-
-  const { inputRef: externalInputRef, ...textFieldProps } = useSlotProps({
-    elementType: 'input',
-    externalSlotProps: slotProps?.textField,
-    externalForwardedProps: other,
-    ownerState: props,
-  });
-
-  const {
-    ref: inputRef,
-    onClear,
-    clearable,
-    ...fieldProps
-  } = useSingleInputDateRangeField({
-    props: textFieldProps,
-    inputRef: externalInputRef,
-  });
-
-  /* If you don't need a clear button, you can skip the use of this hook */
-  const { InputProps: ProcessedInputProps, fieldProps: processedFieldProps } =
-    useClearableField({
-      onClear,
-      clearable,
-      fieldProps,
-      InputProps: {
-        ...fieldProps.InputProps,
-        endAdornment: (
-          <InputAdornment position="end">
-            <IconButton onClick={onAdornmentClick}>
-              <DateRangeIcon />
-            </IconButton>
-          </InputAdornment>
-        ),
-      },
-      slots,
-      slotProps,
-    });
-
-  return (
-    <BrowserField
-      {...processedFieldProps}
-      ref={ref}
-      style={{
-        minWidth: 300,
-      }}
-      inputRef={inputRef}
-      InputProps={{ ...ProcessedInputProps }}
-    />
-  );
-});
-
-BrowserSingleInputDateRangeField.fieldType = 'single-input';
-
-const BrowserSingleInputDateRangePicker = React.forwardRef((props, ref) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-
-  const toggleOpen = () => setIsOpen((currentOpen) => !currentOpen);
-
-  const handleOpen = () => setIsOpen(true);
-
-  const handleClose = () => setIsOpen(false);
-
-  return (
-    <DateRangePicker
-      ref={ref}
-      {...props}
-      open={isOpen}
-      onClose={handleClose}
-      onOpen={handleOpen}
-      slots={{ field: BrowserSingleInputDateRangeField }}
-      slotProps={{
-        ...props?.slotProps,
-        field: {
-          onAdornmentClick: toggleOpen,
-          ...props?.slotProps?.field,
-        },
-      }}
-    />
-  );
-});
-
-const BrowserMultiInputDateRangeField = React.forwardRef((props, ref) => {
-  const {
-    slotProps,
-    value,
-    defaultValue,
-    format,
-    onChange,
-    readOnly,
-    disabled,
-    onError,
-    shouldDisableDate,
-    minDate,
-    maxDate,
-    disableFuture,
-    disablePast,
-    selectedSections,
-    onSelectedSectionsChange,
-    className,
-  } = props;
-
-  const { inputRef: startInputRef, ...startTextFieldProps } = useSlotProps({
-    elementType: 'input',
-    externalSlotProps: slotProps?.textField,
-    ownerState: { ...props, position: 'start' },
-  });
-
-  const { inputRef: endInputRef, ...endTextFieldProps } = useSlotProps({
-    elementType: 'input',
-    externalSlotProps: slotProps?.textField,
-    ownerState: { ...props, position: 'end' },
-  });
-
-  const {
-    startDate: { ref: startRef, ...startDateProps },
-    endDate: { ref: endRef, ...endDateProps },
-  } = useMultiInputDateRangeField({
-    sharedProps: {
-      value,
-      defaultValue,
-      format,
-      onChange,
-      readOnly,
-      disabled,
-      onError,
-      shouldDisableDate,
-      minDate,
-      maxDate,
-      disableFuture,
-      disablePast,
-      selectedSections,
-      onSelectedSectionsChange,
-    },
-    startTextFieldProps,
-    endTextFieldProps,
-    startInputRef,
-    endInputRef,
-  });
-
-  return (
-    <Stack ref={ref} spacing={2} direction="row" className={className}>
-      <BrowserField {...startDateProps} inputRef={startRef} />
-      <span> — </span>
-      <BrowserField {...endDateProps} inputRef={endRef} />
-    </Stack>
-  );
-});
-
-const BrowserDateRangePicker = React.forwardRef((props, ref) => {
-  return (
-    <DateRangePicker
-      ref={ref}
-      {...props}
-      slots={{ ...props?.slots, field: BrowserMultiInputDateRangeField }}
-    />
-  );
-});
-
 const BrowserDateField = React.forwardRef((props, ref) => {
   const { inputRef: externalInputRef, slots, slotProps, ...textFieldProps } = props;
 
@@ -254,21 +85,11 @@ const BrowserDatePicker = React.forwardRef((props, ref) => {
 export default function PickerWithBrowserField() {
   return (
     <LocalizationProvider dateAdapter={AdapterDayjs}>
-      <DemoContainer
-        components={['DatePicker', 'SingleInputDateRangeField', 'DateRangePicker']}
-      >
-        <BrowserDatePicker
-          slotProps={{
-            field: { clearable: true },
-          }}
-        />
-        <BrowserSingleInputDateRangePicker
-          slotProps={{
-            field: { clearable: true },
-          }}
-        />
-        <BrowserDateRangePicker />
-      </DemoContainer>
+      <BrowserDatePicker
+        slotProps={{
+          field: { clearable: true },
+        }}
+      />
     </LocalizationProvider>
   );
 }