[docs] Add docs for filter panel components

docs/data/data-grid/filtering/filtering.md

@@ -135,7 +135,7 @@ In the example below, the _rating_ column can not be filtered.
 
 ## Customize the operators
 
-The full typing details can be found on the [GridFilterOperator api page](/x/api/data-grid/grid-filter-operator/).
+The full typing details can be found on the [GridFilterOperator API page](/x/api/data-grid/grid-filter-operator/).
 
 An operator determines if a cell value should be considered as a valid filtered value.
 The candidate value used by the operator is the one corresponding to the `field` attribute or the value returned by the `valueGetter` of the `GridColDef`.
@@ -272,7 +272,7 @@ You can customize the rendering of the filter panel as shown in [the component s
 
 ### Customize the filter panel content
 
-The customization of the filter panel content can be performed by passing props to the default `<GridFilterPanel />` component.
+The customization of the filter panel content can be performed by passing props to the default [`<GridFilterPanel />`](/x/api/data-grid/grid-filter-panel) component.
 The available props allow overriding:
 
 - The `linkOperators` (can contains `GridLinkOperator.And` and `GridLinkOperator.Or`)
@@ -399,6 +399,8 @@ More information about the selectors and how to use them on the [dedicated page]
 
 - [DataGrid](/x/api/data-grid/data-grid/)
 - [DataGridPro](/x/api/data-grid/data-grid-pro/)
-- [GridFilterModel](/x/api/data-grid/grid-filter-model/)
+- [GridFilterForm](/x/api/data-grid/grid-filter-form/)
 - [GridFilterItem](/x/api/data-grid/grid-filter-item/)
+- [GridFilterModel](/x/api/data-grid/grid-filter-model/)
 - [GridFilterOperator](/x/api/data-grid/grid-filter-operator/)
+- [GridFilterPanel](/x/api/data-grid/grid-filter-panel/)

docs/data/pages.ts

@@ -75,9 +75,11 @@ const pages: MuiPage[] = [
           { pathname: '/x/api/data-grid/grid-api', title: 'GridApi' },
           { pathname: '/x/api/data-grid/grid-cell-params', title: 'GridCellParams' },
           { pathname: '/x/api/data-grid/grid-col-def', title: 'GridColDef' },
+          { pathname: '/x/api/data-grid/grid-filter-form', title: 'GridFilterForm' },
           { pathname: '/x/api/data-grid/grid-filter-item', title: 'GridFilterItem' },
           { pathname: '/x/api/data-grid/grid-filter-model', title: 'GridFilterModel' },
           { pathname: '/x/api/data-grid/grid-filter-operator', title: 'GridFilterOperator' },
+          { pathname: '/x/api/data-grid/grid-filter-panel', title: 'GridFilterPanel' },
           {
             pathname: '/x/api/data-grid/grid-row-class-name-params',
             title: 'GridRowClassNameParams',

docs/pages/x/api/data-grid/data-grid-premium.json

@@ -339,5 +339,6 @@
   },
   "forwardsRefTo": "GridRoot",
   "filename": "/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx",
-  "demos": "<ul><li><a href=\"/x/react-data-grid#commercial-version\">DataGridPremium</a></li></ul>"
+  "demos": "<ul><li><a href=\"/x/react-data-grid#commercial-version\">DataGridPremium</a></li></ul>",
+  "packages": ["@mui/x-data-grid-premium"]
 }

docs/pages/x/api/data-grid/data-grid-pro.json

@@ -412,5 +412,6 @@
   },
   "forwardsRefTo": "GridRoot",
   "filename": "/packages/grid/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx",
-  "demos": "<ul><li><a href=\"/x/react-data-grid#commercial-version\">DataGridPro</a></li></ul>"
+  "demos": "<ul><li><a href=\"/x/react-data-grid#commercial-version\">DataGridPro</a></li></ul>",
+  "packages": ["@mui/x-data-grid-pro"]
 }

docs/pages/x/api/data-grid/data-grid.json

@@ -360,5 +360,6 @@
   },
   "forwardsRefTo": "GridRoot",
   "filename": "/packages/grid/x-data-grid/src/DataGrid/DataGrid.tsx",
-  "demos": "<ul><li><a href=\"/x/react-data-grid/#mit-version\">DataGrid</a></li></ul>"
+  "demos": "<ul><li><a href=\"/x/react-data-grid/#mit-version\">DataGrid</a></li></ul>",
+  "packages": ["@mui/x-data-grid"]
 }

docs/pages/x/api/data-grid/grid-filter-form.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docsx/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './grid-filter-form.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docsx/translations/api-docs/data-grid',
+    false,
+    /\/grid-filter-form(-[a-z]{2})?\.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/x/api/data-grid/grid-filter-form.json

@@ -0,0 +1,38 @@
+{
+  "props": {
+    "applyFilterChanges": { "type": { "name": "func" }, "required": true },
+    "applyMultiFilterOperatorChanges": { "type": { "name": "func" }, "required": true },
+    "deleteFilter": { "type": { "name": "func" }, "required": true },
+    "hasMultipleFilters": { "type": { "name": "bool" }, "required": true },
+    "item": {
+      "type": {
+        "name": "shape",
+        "description": "{ columnField: string, id?: number<br>&#124;&nbsp;string, operatorValue?: string, value?: any }"
+      },
+      "required": true
+    },
+    "columnInputProps": { "type": { "name": "any" }, "default": "{}" },
+    "columnsSort": { "type": { "name": "enum", "description": "'asc'<br>&#124;&nbsp;'desc'" } },
+    "deleteIconProps": { "type": { "name": "any" }, "default": "{}" },
+    "disableMultiFilterOperator": { "type": { "name": "bool" } },
+    "focusElementRef": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;object" } },
+    "linkOperatorInputProps": { "type": { "name": "any" }, "default": "{}" },
+    "linkOperators": {
+      "type": { "name": "arrayOf", "description": "Array&lt;'and'<br>&#124;&nbsp;'or'&gt;" },
+      "default": "[GridLinkOperator.And, GridLinkOperator.Or]"
+    },
+    "multiFilterOperator": {
+      "type": { "name": "enum", "description": "'and'<br>&#124;&nbsp;'or'" }
+    },
+    "operatorInputProps": { "type": { "name": "any" }, "default": "{}" },
+    "showMultiFilterOperators": { "type": { "name": "bool" } },
+    "valueInputProps": { "type": { "name": "any" }, "default": "{}" }
+  },
+  "slots": {},
+  "name": "GridFilterForm",
+  "styles": { "classes": [], "globalClasses": {}, "name": "MuiDataGrid" },
+  "forwardsRefTo": "GridRoot",
+  "filename": "/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterForm.tsx",
+  "demos": "<ul><li><a href=\"/x/react-data-grid/#mit-version\">DataGrid</a></li>\n<li><a href=\"/x/react-data-grid#commercial-version\">DataGridPro</a></li>\n<li><a href=\"/x/react-data-grid#commercial-version\">DataGridPremium</a></li></ul>",
+  "packages": ["@mui/x-data-grid-premium", "@mui/x-data-grid-pro", "@mui/x-data-grid"]
+}

docs/pages/x/api/data-grid/grid-filter-panel.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import ApiPage from 'docsx/src/modules/components/ApiPage';
+import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations';
+import jsonPageContent from './grid-filter-panel.json';
+
+export default function Page(props) {
+  const { descriptions, pageContent } = props;
+  return <ApiPage descriptions={descriptions} pageContent={pageContent} />;
+}
+
+Page.getInitialProps = () => {
+  const req = require.context(
+    'docsx/translations/api-docs/data-grid',
+    false,
+    /\/grid-filter-panel(-[a-z]{2})?\.json$/,
+  );
+  const descriptions = mapApiPageTranslations(req);
+
+  return {
+    descriptions,
+    pageContent: jsonPageContent,
+  };
+};

docs/pages/x/api/data-grid/grid-filter-panel.json

@@ -0,0 +1,28 @@
+{
+  "props": {
+    "columnsSort": { "type": { "name": "enum", "description": "'asc'<br>&#124;&nbsp;'desc'" } },
+    "filterFormProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ columnInputProps?: any, columnsSort?: 'asc'<br>&#124;&nbsp;'desc', deleteIconProps?: any, linkOperatorInputProps?: any, operatorInputProps?: any, valueInputProps?: any }"
+      }
+    },
+    "linkOperators": {
+      "type": { "name": "arrayOf", "description": "Array&lt;'and'<br>&#124;&nbsp;'or'&gt;" },
+      "default": "[GridLinkOperator.And, GridLinkOperator.Or]"
+    },
+    "sx": {
+      "type": {
+        "name": "union",
+        "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+      }
+    }
+  },
+  "slots": {},
+  "name": "GridFilterPanel",
+  "styles": { "classes": [], "globalClasses": {}, "name": "MuiDataGrid" },
+  "forwardsRefTo": "GridRoot",
+  "filename": "/packages/grid/x-data-grid/src/components/panel/filterPanel/GridFilterPanel.tsx",
+  "demos": "<ul><li><a href=\"/x/react-data-grid/#mit-version\">DataGrid</a></li>\n<li><a href=\"/x/react-data-grid#commercial-version\">DataGridPro</a></li>\n<li><a href=\"/x/react-data-grid#commercial-version\">DataGridPremium</a></li></ul>",
+  "packages": ["@mui/x-data-grid-premium", "@mui/x-data-grid-pro", "@mui/x-data-grid"]
+}

docs/pages/x/api/data-grid/index.md

@@ -6,6 +6,8 @@
 
 - [DataGrid](/x/api/data-grid/data-grid/)
 - [DataGridPro](/x/api/data-grid/data-grid-pro/)
+- [GridFilterForm](/x/api/data-grid/grid-filter-form/)
+- [GridFilterPanel](/x/api/data-grid/grid-filter-panel/)
 
 ## Interfaces
 

docs/pages/x/api/date-pickers/calendar-picker-skeleton.json

@@ -19,5 +19,6 @@
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/x-date-pickers/src/CalendarPickerSkeleton/CalendarPickerSkeleton.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/calendar-picker.json

@@ -61,5 +61,6 @@
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/x-date-pickers/src/CalendarPicker/CalendarPicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/clock-picker.json

@@ -72,5 +72,6 @@
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/x-date-pickers/src/ClockPicker/ClockPicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/date-picker.json

@@ -119,5 +119,6 @@
   "styles": { "classes": [], "globalClasses": {}, "name": "MuiDatePicker" },
   "filename": "/packages/x-date-pickers/src/DatePicker/DatePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/date-range-picker-day.json

@@ -46,5 +46,6 @@
   "forwardsRefTo": "HTMLButtonElement",
   "filename": "/packages/x-date-pickers-pro/src/DateRangePickerDay/DateRangePickerDay.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro"]
 }

docs/pages/x/api/date-pickers/date-range-picker.json

@@ -120,5 +120,6 @@
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/x-date-pickers-pro/src/DateRangePicker/DateRangePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro"]
 }

docs/pages/x/api/date-pickers/date-time-picker.json

@@ -135,5 +135,6 @@
   "styles": { "classes": [], "globalClasses": {}, "name": "MuiDateTimePicker" },
   "filename": "/packages/x-date-pickers/src/DateTimePicker/DateTimePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/desktop-date-picker.json

@@ -95,5 +95,6 @@
   "styles": { "classes": [], "globalClasses": {}, "name": "MuiDesktopDatePicker" },
   "filename": "/packages/x-date-pickers/src/DesktopDatePicker/DesktopDatePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/desktop-date-range-picker.json

@@ -96,5 +96,6 @@
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/x-date-pickers-pro/src/DesktopDateRangePicker/DesktopDateRangePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro"]
 }

docs/pages/x/api/date-pickers/desktop-date-time-picker.json

@@ -111,5 +111,6 @@
   "styles": { "classes": [], "globalClasses": {}, "name": "MuiDesktopDateTimePicker" },
   "filename": "/packages/x-date-pickers/src/DesktopDateTimePicker/DesktopDateTimePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/desktop-time-picker.json

@@ -82,5 +82,6 @@
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/x-date-pickers/src/DesktopTimePicker/DesktopTimePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/localization-provider.json

@@ -20,5 +20,6 @@
   "name": "LocalizationProvider",
   "styles": { "classes": [], "globalClasses": {}, "name": "MuiLocalizationProvider" },
   "filename": "/packages/x-date-pickers/src/LocalizationProvider/LocalizationProvider.tsx",
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/mobile-date-picker.json

@@ -112,5 +112,6 @@
   "styles": { "classes": [], "globalClasses": {}, "name": "MuiMobileDatePicker" },
   "filename": "/packages/x-date-pickers/src/MobileDatePicker/MobileDatePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/mobile-date-range-picker.json

@@ -113,5 +113,6 @@
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/x-date-pickers-pro/src/MobileDateRangePicker/MobileDateRangePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro"]
 }

docs/pages/x/api/date-pickers/mobile-date-time-picker.json

@@ -128,5 +128,6 @@
   "styles": { "classes": [], "globalClasses": {}, "name": "MuiMobileDateTimePicker" },
   "filename": "/packages/x-date-pickers/src/MobileDateTimePicker/MobileDateTimePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/mobile-time-picker.json

@@ -99,5 +99,6 @@
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/x-date-pickers/src/MobileTimePicker/MobileTimePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/month-picker.json

@@ -26,5 +26,6 @@
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/x-date-pickers/src/MonthPicker/MonthPicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/pickers-day.json

@@ -35,5 +35,6 @@
   "forwardsRefTo": "HTMLButtonElement",
   "filename": "/packages/x-date-pickers/src/PickersDay/PickersDay.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/static-date-picker.json

@@ -86,5 +86,6 @@
   "styles": { "classes": [], "globalClasses": {}, "name": "MuiStaticDatePicker" },
   "filename": "/packages/x-date-pickers/src/StaticDatePicker/StaticDatePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/static-date-range-picker.json

@@ -87,5 +87,6 @@
   "forwardsRefTo": "undefined",
   "filename": "/packages/x-date-pickers-pro/src/StaticDateRangePicker/StaticDateRangePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro"]
 }

docs/pages/x/api/date-pickers/static-date-time-picker.json

@@ -102,5 +102,6 @@
   "styles": { "classes": [], "globalClasses": {}, "name": "MuiStaticDateTimePicker" },
   "filename": "/packages/x-date-pickers/src/StaticDateTimePicker/StaticDateTimePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/static-time-picker.json

@@ -73,5 +73,6 @@
   "forwardsRefTo": "undefined",
   "filename": "/packages/x-date-pickers/src/StaticTimePicker/StaticTimePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/time-picker.json

@@ -106,5 +106,6 @@
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/x-date-pickers/src/TimePicker/TimePicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }

docs/pages/x/api/date-pickers/year-picker.json

@@ -10,5 +10,6 @@
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/x-date-pickers/src/YearPicker/YearPicker.tsx",
   "inheritance": null,
-  "demos": "<ul></ul>"
+  "demos": "<ul></ul>",
+  "packages": ["@mui/x-date-pickers-pro", "@mui/x-date-pickers"]
 }