diff --git a/docs/data/docs-infra/pages.ts b/docs/data/docs-infra/pages.ts index b1eddf2a6d9ecb..2178efac948bd9 100644 --- a/docs/data/docs-infra/pages.ts +++ b/docs/data/docs-infra/pages.ts @@ -14,6 +14,7 @@ const pages: readonly MuiPage[] = [ children: [ { pathname: '/experiments/docs/callouts' }, { pathname: '/experiments/docs/codeblock' }, + { pathname: '/experiments/docs/data-grid-premium', title: 'API DataGridPremium' }, { pathname: '/experiments/docs/demos' }, ], }, diff --git a/docs/pages/experiments/docs/data-grid-premium-translation.json b/docs/pages/experiments/docs/data-grid-premium-translation.json new file mode 100644 index 00000000000000..6777cb6c53e5a8 --- /dev/null +++ b/docs/pages/experiments/docs/data-grid-premium-translation.json @@ -0,0 +1,1559 @@ +{ + "componentDescription": "", + "propDescriptions": { + "aggregationFunctions": { + "description": "Aggregation functions available on the grid.", + "deprecated": "", + "typeDescriptions": {} + }, + "aggregationModel": { + "description": "Set the aggregation model of the grid.", + "deprecated": "", + "typeDescriptions": {} + }, + "aggregationRowsScope": { + "description": "Rows used to generate the aggregated value. If filtered, the aggregated values are generated using only the rows currently passing the filtering process. If all, the aggregated values are generated using all the rows.", + "deprecated": "", + "typeDescriptions": {} + }, + "apiRef": { + "description": "The ref object that allows grid manipulation. Can be instantiated with useGridApiRef().", + "deprecated": "", + "typeDescriptions": {} + }, + "aria-label": { + "description": "The label of the grid.", + "deprecated": "", + "typeDescriptions": {} + }, + "aria-labelledby": { + "description": "The id of the element containing a label for the grid.", + "deprecated": "", + "typeDescriptions": {} + }, + "autoHeight": { + "description": "If true, the grid height is dynamic and follow the number of rows in the grid.", + "deprecated": "", + "typeDescriptions": {} + }, + "autoPageSize": { + "description": "If true, the pageSize is calculated according to the container size and the max number of rows to avoid rendering a vertical scroll bar.", + "deprecated": "", + "typeDescriptions": {} + }, + "cellModesModel": { + "description": "Controls the modes of the cells.", + "deprecated": "", + "typeDescriptions": {} + }, + "checkboxSelection": { + "description": "If true, the grid get a first column with a checkbox that allows to select rows.", + "deprecated": "", + "typeDescriptions": {} + }, + "checkboxSelectionVisibleOnly": { + "description": "If true, the "Select All" header checkbox selects only the rows on the current page. To be used in combination with checkboxSelection. It only works if the pagination is enabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "classes": { + "description": "Override or extend the styles applied to the component.", + "deprecated": "", + "typeDescriptions": {} + }, + "clipboardCopyCellDelimiter": { + "description": "The character used to separate cell values when copying to the clipboard.", + "deprecated": "", + "typeDescriptions": {} + }, + "columnBuffer": { + "description": "Number of extra columns to be rendered before/after the visible slice.", + "deprecated": "", + "typeDescriptions": {} + }, + "columnHeaderHeight": { + "description": "Sets the height in pixel of the column headers in the grid.", + "deprecated": "", + "typeDescriptions": {} + }, + "columns": { + "description": "Set of columns of type GridColDef[].", + "deprecated": "", + "typeDescriptions": {} + }, + "columnThreshold": { + "description": "Number of rows from the columnBuffer that can be visible before a new slice is rendered.", + "deprecated": "", + "typeDescriptions": {} + }, + "columnVisibilityModel": { + "description": "Set the column visibility model of the grid. If defined, the grid will ignore the hide property in GridColDef.", + "deprecated": "", + "typeDescriptions": {} + }, + "components": { + "description": "Overridable components.", + "deprecated": "", + "typeDescriptions": {} + }, + "componentsProps": { + "description": "Overridable components props dynamically passed to the component at rendering.", + "deprecated": "", + "typeDescriptions": {} + }, + "defaultGroupingExpansionDepth": { + "description": "If above 0, the row children will be expanded up to this depth. If equal to -1, all the row children will be expanded.", + "deprecated": "", + "typeDescriptions": {} + }, + "density": { + "description": "Set the density of the grid.", + "deprecated": "", + "typeDescriptions": {} + }, + "detailPanelExpandedRowIds": { + "description": "The row ids to show the detail panel.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableAggregation": { + "description": "If true, aggregation is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableChildrenFiltering": { + "description": "If true, the filtering will only be applied to the top level rows when grouping rows with the treeData prop.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableChildrenSorting": { + "description": "If true, the sorting will only be applied to the top level rows when grouping rows with the treeData prop.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableClipboardPaste": { + "description": "If true, the clipboard paste is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableColumnFilter": { + "description": "If true, column filters are disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableColumnMenu": { + "description": "If true, the column menu is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableColumnPinning": { + "description": "If true, the column pinning is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableColumnReorder": { + "description": "If true, reordering columns is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableColumnResize": { + "description": "If true, resizing columns is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableColumnSelector": { + "description": "If true, hiding/showing columns is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableDensitySelector": { + "description": "If true, the density selector is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableMultipleColumnsFiltering": { + "description": "If true, filtering with multiple columns is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableMultipleColumnsSorting": { + "description": "If true, sorting with multiple columns is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableMultipleRowSelection": { + "description": "If true, multiple selection using the Ctrl or CMD key is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableRowGrouping": { + "description": "If true, the row grouping is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableRowSelectionOnClick": { + "description": "If true, the selection on click on a row or cell is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "disableVirtualization": { + "description": "If true, the virtualization is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "editMode": { + "description": "Controls whether to use the cell or row editing.", + "deprecated": "", + "typeDescriptions": {} + }, + "experimentalFeatures": { + "description": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to true, then the feature is fully disabled, and neither property nor method calls will have any effect.", + "deprecated": "", + "typeDescriptions": {} + }, + "filterDebounceMs": { + "description": "The milliseconds delay to wait after a keystroke before triggering filtering.", + "deprecated": "", + "typeDescriptions": {} + }, + "filterMode": { + "description": "Filtering can be processed on the server or client-side. Set it to 'server' if you would like to handle filtering on the server-side.", + "deprecated": "", + "typeDescriptions": {} + }, + "filterModel": { + "description": "Set the filter model of the grid.", + "deprecated": "", + "typeDescriptions": {} + }, + "getAggregationPosition": { + "description": "Determines the position of an aggregated value.", + "deprecated": "", + "typeDescriptions": { + "groupNode": "The current group.", + "GridAggregationPosition | null": "Position of the aggregated value (if null, the group isn't aggregated)." + } + }, + "getCellClassName": { + "description": "Function that applies CSS classes dynamically on cells.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridCellParams.", + "string": "The CSS class to apply to the cell." + } + }, + "getDetailPanelContent": { + "description": "Function that returns the element to render in row detail.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridRowParams.", + "React.JSX.Element": "The row detail element." + } + }, + "getDetailPanelHeight": { + "description": "Function that returns the height of the row detail panel.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridRowParams.", + "number | string": "The height in pixels or "auto" to use the content height." + } + }, + "getEstimatedRowHeight": { + "description": "Function that returns the estimated height for a row. Only works if dynamic row height is used. Once the row height is measured this value is discarded.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridRowHeightParams.", + "number | null": "The estimated row height value. If null or undefined then the default row height, based on the density, is applied." + } + }, + "getRowClassName": { + "description": "Function that applies CSS classes dynamically on rows.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridRowClassNameParams.", + "string": "The CSS class to apply to the row." + } + }, + "getRowHeight": { + "description": "Function that sets the row height per row.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridRowHeightParams.", + "GridRowHeightReturnValue": "The row height value. If null or undefined then the default row height is applied. If "auto" then the row height is calculated based on the content." + } + }, + "getRowId": { + "description": "Return the id of a given GridRowModel.", + "deprecated": "", + "typeDescriptions": {} + }, + "getRowSpacing": { + "description": "Function that allows to specify the spacing between rows.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridRowSpacingParams.", + "GridRowSpacing": "The row spacing values." + } + }, + "getTreeDataPath": { + "description": "Determines the path of a row in the tree data. For instance, a row with the path ["A", "B"] is the child of the row with the path ["A"]. Note that all paths must contain at least one element.", + "deprecated": "", + "typeDescriptions": { + "row": "The row from which we want the path.", + "Array": "The path to the row." + } + }, + "groupingColDef": { + "description": "The grouping column used by the tree data.", + "deprecated": "", + "typeDescriptions": {} + }, + "hideFooter": { + "description": "If true, the footer component is hidden.", + "deprecated": "", + "typeDescriptions": {} + }, + "hideFooterPagination": { + "description": "If true, the pagination component in the footer is hidden.", + "deprecated": "", + "typeDescriptions": {} + }, + "hideFooterRowCount": { + "description": "If true, the row count in the footer is hidden. It has no effect if the pagination is enabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "hideFooterSelectedRowCount": { + "description": "If true, the selected row count in the footer is hidden.", + "deprecated": "", + "typeDescriptions": {} + }, + "initialState": { + "description": "The initial state of the DataGridPremium. The data in it is set in the state on initialization but isn't controlled. If one of the data in initialState is also being controlled, then the control state wins.", + "deprecated": "", + "typeDescriptions": {} + }, + "isCellEditable": { + "description": "Callback fired when a cell is rendered, returns true if the cell is editable.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridCellParams.", + "boolean": "A boolean indicating if the cell is editable." + } + }, + "isGroupExpandedByDefault": { + "description": "Determines if a group should be expanded after its creation. This prop takes priority over the defaultGroupingExpansionDepth prop.", + "deprecated": "", + "typeDescriptions": { + "node": "The node of the group to test.", + "boolean": "A boolean indicating if the group is expanded." + } + }, + "isRowSelectable": { + "description": "Determines if a row can be selected.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridRowParams.", + "boolean": "A boolean indicating if the cell is selectable." + } + }, + "keepColumnPositionIfDraggedOutside": { + "description": "If true, moving the mouse pointer outside the grid before releasing the mouse button in a column re-order action will not cause the column to jump back to its original position.", + "deprecated": "", + "typeDescriptions": {} + }, + "keepNonExistentRowsSelected": { + "description": "If true, the selection model will retain selected rows that do not exist. Useful when using server side pagination and row selections need to be retained when changing pages.", + "deprecated": "", + "typeDescriptions": {} + }, + "loading": { + "description": "If true, a loading overlay is displayed.", + "deprecated": "", + "typeDescriptions": {} + }, + "localeText": { + "description": "Set the locale text of the grid. You can find all the translation keys supported in the source in the GitHub repository.", + "deprecated": "", + "typeDescriptions": {} + }, + "logger": { + "description": "Pass a custom logger in the components that implements the Logger interface.", + "deprecated": "", + "typeDescriptions": {} + }, + "logLevel": { + "description": "Allows to pass the logging level or false to turn off logging.", + "deprecated": "", + "typeDescriptions": {} + }, + "nonce": { + "description": "Nonce of the inline styles for Content Security Policy.", + "deprecated": "", + "typeDescriptions": {} + }, + "onAggregationModelChange": { + "description": "Callback fired when the row grouping model changes.", + "deprecated": "", + "typeDescriptions": { + "model": "The aggregated columns.", + "details": "Additional details for this callback." + } + }, + "onCellClick": { + "description": "Callback fired when any cell is clicked.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridCellParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onCellDoubleClick": { + "description": "Callback fired when a double click event comes from a cell element.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridCellParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onCellEditStart": { + "description": "Callback fired when the cell turns to edit mode.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridCellParams.", + "event": "The event that caused this prop to be called." + } + }, + "onCellEditStop": { + "description": "Callback fired when the cell turns to view mode.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridCellParams.", + "event": "The event that caused this prop to be called." + } + }, + "onCellKeyDown": { + "description": "Callback fired when a keydown event comes from a cell element.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridCellParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onCellModesModelChange": { + "description": "Callback fired when the cellModesModel prop changes.", + "deprecated": "", + "typeDescriptions": { + "cellModesModel": "Object containing which cells are in "edit" mode.", + "details": "Additional details for this callback." + } + }, + "onClipboardCopy": { + "description": "Callback called when the data is copied to the clipboard.", + "deprecated": "", + "typeDescriptions": { "data": "The data copied to the clipboard." } + }, + "onClipboardPasteEnd": { + "description": "Callback fired when the clipboard paste operation ends.", + "deprecated": "", + "typeDescriptions": {} + }, + "onClipboardPasteStart": { + "description": "Callback fired when the clipboard paste operation starts.", + "deprecated": "", + "typeDescriptions": {} + }, + "onColumnHeaderClick": { + "description": "Callback fired when a click event comes from a column header element.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridColumnHeaderParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onColumnHeaderDoubleClick": { + "description": "Callback fired when a double click event comes from a column header element.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridColumnHeaderParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onColumnHeaderEnter": { + "description": "Callback fired when a mouse enter event comes from a column header element.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridColumnHeaderParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onColumnHeaderLeave": { + "description": "Callback fired when a mouse leave event comes from a column header element.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridColumnHeaderParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onColumnHeaderOut": { + "description": "Callback fired when a mouseout event comes from a column header element.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridColumnHeaderParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onColumnHeaderOver": { + "description": "Callback fired when a mouseover event comes from a column header element.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridColumnHeaderParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onColumnOrderChange": { + "description": "Callback fired when a column is reordered.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridColumnOrderChangeParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onColumnResize": { + "description": "Callback fired while a column is being resized.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridColumnResizeParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onColumnVisibilityModelChange": { + "description": "Callback fired when the column visibility model changes.", + "deprecated": "", + "typeDescriptions": { + "model": "The new model.", + "details": "Additional details for this callback." + } + }, + "onColumnWidthChange": { + "description": "Callback fired when the width of a column is changed.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridColumnResizeParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onDetailPanelExpandedRowIdsChange": { + "description": "Callback fired when the detail panel of a row is opened or closed.", + "deprecated": "", + "typeDescriptions": { + "ids": "The ids of the rows which have the detail panel open.", + "details": "Additional details for this callback." + } + }, + "onExcelExportStateChange": { + "description": "Callback fired when the state of the Excel export changes.", + "deprecated": "", + "typeDescriptions": { "inProgress": "Indicates if the task is in progress." } + }, + "onFetchRows": { + "description": "Callback fired when rowCount is set and the next batch of virtualized rows is rendered.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridFetchRowsParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onFilterModelChange": { + "description": "Callback fired when the Filter model changes before the filters are applied.", + "deprecated": "", + "typeDescriptions": { + "model": "With all properties from GridFilterModel.", + "details": "Additional details for this callback." + } + }, + "onMenuClose": { + "description": "Callback fired when the menu is closed.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridMenuParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onMenuOpen": { + "description": "Callback fired when the menu is opened.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridMenuParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onPaginationModelChange": { + "description": "Callback fired when the pagination model has changed.", + "deprecated": "", + "typeDescriptions": { + "model": "Updated pagination model.", + "details": "Additional details for this callback." + } + }, + "onPinnedColumnsChange": { + "description": "Callback fired when the pinned columns have changed.", + "deprecated": "", + "typeDescriptions": { + "pinnedColumns": "The changed pinned columns.", + "details": "Additional details for this callback." + } + }, + "onPreferencePanelClose": { + "description": "Callback fired when the preferences panel is closed.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridPreferencePanelParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onPreferencePanelOpen": { + "description": "Callback fired when the preferences panel is opened.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridPreferencePanelParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onProcessRowUpdateError": { + "description": "Callback called when processRowUpdate throws an error or rejects.", + "deprecated": "", + "typeDescriptions": { "error": "The error thrown." } + }, + "onResize": { + "description": "Callback fired when the grid is resized.", + "deprecated": "", + "typeDescriptions": { + "containerSize": "With all properties from ElementSize.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onRowClick": { + "description": "Callback fired when a row is clicked. Not called if the target clicked is an interactive element added by the built-in columns.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridRowParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onRowDoubleClick": { + "description": "Callback fired when a double click event comes from a row container element.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from RowParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onRowEditCommit": { + "description": "Callback fired when the row changes are committed.", + "deprecated": "", + "typeDescriptions": { + "id": "The row id.", + "event": "The event that caused this prop to be called." + } + }, + "onRowEditStart": { + "description": "Callback fired when the row turns to edit mode.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridRowParams.", + "event": "The event that caused this prop to be called." + } + }, + "onRowEditStop": { + "description": "Callback fired when the row turns to view mode.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridRowParams.", + "event": "The event that caused this prop to be called." + } + }, + "onRowGroupingModelChange": { + "description": "Callback fired when the row grouping model changes.", + "deprecated": "", + "typeDescriptions": { + "model": "Columns used as grouping criteria.", + "details": "Additional details for this callback." + } + }, + "onRowModesModelChange": { + "description": "Callback fired when the rowModesModel prop changes.", + "deprecated": "", + "typeDescriptions": { + "rowModesModel": "Object containing which rows are in "edit" mode.", + "details": "Additional details for this callback." + } + }, + "onRowOrderChange": { + "description": "Callback fired when a row is being reordered.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridRowOrderChangeParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onRowSelectionModelChange": { + "description": "Callback fired when the selection state of one or multiple rows changes.", + "deprecated": "", + "typeDescriptions": { + "rowSelectionModel": "With all the row ids GridSelectionModel.", + "details": "Additional details for this callback." + } + }, + "onRowsScrollEnd": { + "description": "Callback fired when scrolling to the bottom of the grid viewport.", + "deprecated": "", + "typeDescriptions": { + "params": "With all properties from GridRowScrollEndParams.", + "event": "The event object.", + "details": "Additional details for this callback." + } + }, + "onSortModelChange": { + "description": "Callback fired when the sort model changes before a column is sorted.", + "deprecated": "", + "typeDescriptions": { + "model": "With all properties from GridSortModel.", + "details": "Additional details for this callback." + } + }, + "pageSizeOptions": { + "description": "Select the pageSize dynamically using the component UI.", + "deprecated": "", + "typeDescriptions": {} + }, + "pagination": { + "description": "If true, pagination is enabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "paginationMode": { + "description": "Pagination can be processed on the server or client-side. Set it to 'client' if you would like to handle the pagination on the client-side. Set it to 'server' if you would like to handle the pagination on the server-side.", + "deprecated": "", + "typeDescriptions": {} + }, + "paginationModel": { + "description": "The pagination model of type GridPaginationModel which refers to current page and pageSize.", + "deprecated": "", + "typeDescriptions": {} + }, + "pinnedColumns": { + "description": "The column fields to display pinned to left or right.", + "deprecated": "", + "typeDescriptions": {} + }, + "pinnedRows": { + "description": "Rows data to pin on top or bottom.", + "deprecated": "", + "typeDescriptions": {} + }, + "processRowUpdate": { + "description": "Callback called before updating a row with new values in the row and cell editing.", + "deprecated": "", + "typeDescriptions": { + "newRow": "Row object with the new values.", + "oldRow": "Row object with the old values.", + "Promise | R": "The final values to update the row." + } + }, + "rowBuffer": { + "description": "Number of extra rows to be rendered before/after the visible slice.", + "deprecated": "", + "typeDescriptions": {} + }, + "rowCount": { + "description": "Set the total number of rows, if it is different from the length of the value rows prop. If some rows have children (for instance in the tree data), this number represents the amount of top level rows.", + "deprecated": "", + "typeDescriptions": {} + }, + "rowGroupingColumnMode": { + "description": "If single, all the columns that are grouped are represented in the same grid column. If multiple, each column that is grouped is represented in its own grid column.", + "deprecated": "", + "typeDescriptions": {} + }, + "rowGroupingModel": { + "description": "Set the row grouping model of the grid.", + "deprecated": "", + "typeDescriptions": {} + }, + "rowHeight": { + "description": "Sets the height in pixel of a row in the grid.", + "deprecated": "", + "typeDescriptions": {} + }, + "rowModesModel": { + "description": "Controls the modes of the rows.", + "deprecated": "", + "typeDescriptions": {} + }, + "rowReordering": { + "description": "If true, the reordering of rows is enabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "rows": { + "description": "Set of rows of type GridRowsProp.", + "deprecated": "", + "typeDescriptions": {} + }, + "rowSelection": { + "description": "If false, the row selection mode is disabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "rowSelectionModel": { + "description": "Sets the row selection model of the grid.", + "deprecated": "", + "typeDescriptions": {} + }, + "rowsLoadingMode": { + "description": "Loading rows can be processed on the server or client-side. Set it to 'client' if you would like enable infnite loading. Set it to 'server' if you would like to enable lazy loading. * @default "client"", + "deprecated": "", + "typeDescriptions": {} + }, + "rowSpacingType": { + "description": "Sets the type of space between rows added by getRowSpacing.", + "deprecated": "", + "typeDescriptions": {} + }, + "rowThreshold": { + "description": "Number of rows from the rowBuffer that can be visible before a new slice is rendered.", + "deprecated": "", + "typeDescriptions": {} + }, + "scrollbarSize": { + "description": "Override the height/width of the grid inner scrollbar.", + "deprecated": "", + "typeDescriptions": {} + }, + "scrollEndThreshold": { + "description": "Set the area in px at the bottom of the grid viewport where onRowsScrollEnd is called.", + "deprecated": "", + "typeDescriptions": {} + }, + "showCellVerticalBorder": { + "description": "If true, the vertical borders of the cells are displayed.", + "deprecated": "", + "typeDescriptions": {} + }, + "showColumnVerticalBorder": { + "description": "If true, the right border of the column headers are displayed.", + "deprecated": "", + "typeDescriptions": {} + }, + "slotProps": { + "description": "Overridable components props dynamically passed to the component at rendering.", + "deprecated": "", + "typeDescriptions": {} + }, + "slots": { "description": "Overridable components.", "deprecated": "", "typeDescriptions": {} }, + "sortingMode": { + "description": "Sorting can be processed on the server or client-side. Set it to 'client' if you would like to handle sorting on the client-side. Set it to 'server' if you would like to handle sorting on the server-side.", + "deprecated": "", + "typeDescriptions": {} + }, + "sortingOrder": { + "description": "The order of the sorting sequence.", + "deprecated": "", + "typeDescriptions": {} + }, + "sortModel": { + "description": "Set the sort model of the grid.", + "deprecated": "", + "typeDescriptions": {} + }, + "sx": { + "description": "The system prop that allows defining system overrides as well as additional CSS styles.", + "deprecated": "", + "typeDescriptions": {} + }, + "throttleRowsMs": { + "description": "If positive, the Grid will throttle updates coming from apiRef.current.updateRows and apiRef.current.setRows. It can be useful if you have a high update rate but do not want to do heavy work like filtering / sorting or rendering on each individual update.", + "deprecated": "", + "typeDescriptions": {} + }, + "treeData": { + "description": "If true, the rows will be gathered in a tree structure according to the getTreeDataPath prop.", + "deprecated": "", + "typeDescriptions": {} + }, + "unstable_cellSelection": { + "description": "If true, the cell selection mode is enabled.", + "deprecated": "", + "typeDescriptions": {} + }, + "unstable_cellSelectionModel": { + "description": "Set the cell selection model of the grid.", + "deprecated": "", + "typeDescriptions": {} + }, + "unstable_headerFilters": { + "description": "If true, enables the data grid filtering on header feature.", + "deprecated": "", + "typeDescriptions": {} + }, + "unstable_ignoreValueFormatterDuringExport": { + "description": "If true, the grid will not use valueFormatter when exporting to CSV or copying to clipboard. If an object is provided, you can choose to ignore the valueFormatter for CSV export or clipboard export.", + "deprecated": "", + "typeDescriptions": {} + }, + "unstable_onCellSelectionModelChange": { + "description": "Callback fired when the selection state of one or multiple cells changes.", + "deprecated": "", + "typeDescriptions": { + "cellSelectionModel": "Object in the shape of GridCellSelectionModel containing the selected cells.", + "details": "Additional details for this callback." + } + }, + "unstable_splitClipboardPastedText": { + "description": "The function is used to split the pasted text into rows and cells.", + "deprecated": "", + "typeDescriptions": { "text": "The text pasted from the clipboard." } + } + }, + "classDescriptions": { + "actionsCell": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the root element of the cell with type=\"actions\"" + }, + "aggregationColumnHeader": { + "description": "Styles applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the root element of the column header", + "conditions": "aggregated" + }, + "aggregationColumnHeader--alignLeft": { + "description": "Styles applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the root element of the header", + "conditions": "aggregation if headerAlign=\"left\"" + }, + "aggregationColumnHeader--alignCenter": { + "description": "Styles applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the root element of the header", + "conditions": "aggregation if headerAlign=\"center\"" + }, + "aggregationColumnHeader--alignRight": { + "description": "Styles applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the root element of the header", + "conditions": "aggregation if headerAlign=\"right\"" + }, + "aggregationColumnHeaderLabel": { + "description": "Styles applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the aggregation label in the column header", + "conditions": "aggregated" + }, + "autoHeight": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "autoHeight={true}" + }, + "booleanCell": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the icon of the boolean cell" + }, + "cell--editable": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the cell element", + "conditions": "the cell is editable" + }, + "cell--editing": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the cell element", + "conditions": "the cell is in edit mode" + }, + "cell--textCenter": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the cell element", + "conditions": "align=\"center\"" + }, + "cell--textLeft": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the cell element", + "conditions": "align=\"left\"" + }, + "cell--textRight": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the cell element", + "conditions": "align=\"right\"" + }, + "cell--withRenderer": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the cell element", + "conditions": "the cell has a custom renderer" + }, + "cell--rangeTop": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the cell element", + "conditions": "it is at the top edge of a cell selection range" + }, + "cell--rangeBottom": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the cell element", + "conditions": "it is at the bottom edge of a cell selection range" + }, + "cell--rangeLeft": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the cell element", + "conditions": "it is at the left edge of a cell selection range" + }, + "cell--rangeRight": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the cell element", + "conditions": "it is at the right edge of a cell selection range" + }, + "cell": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the cell element" }, + "cellContent": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the element that wraps the cell content" + }, + "cellCheckbox": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the cell checkbox element" + }, + "cellSkeleton": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the skeleton cell element" + }, + "checkboxInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the selection checkbox element" + }, + "columnHeader--alignCenter": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column header", + "conditions": "headerAlign=\"center\"" + }, + "columnHeader--alignLeft": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column header", + "conditions": "headerAlign=\"left\"" + }, + "columnHeader--alignRight": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column header", + "conditions": "headerAlign=\"right\"" + }, + "columnHeader--dragging": { + "description": "Styles applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the floating column header element", + "conditions": "it is dragged" + }, + "columnHeader--moving": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column header", + "conditions": "it is being dragged" + }, + "columnHeader--numeric": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column header", + "conditions": "the type of the column is number" + }, + "columnHeader--sortable": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column header", + "conditions": "the column is sortable" + }, + "columnHeader--sorted": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column header", + "conditions": "the column is sorted" + }, + "columnHeader--filtered": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column header", + "conditions": "the column has a filter applied to it" + }, + "columnHeader": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column header element" + }, + "columnGroupHeader": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column group header element" + }, + "columnHeaderCheckbox": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the header checkbox cell element" + }, + "columnHeaderDraggableContainer": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column header's draggable container element" + }, + "rowReorderCellPlaceholder": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the row's draggable placeholder element inside the special row reorder cell" + }, + "columnHeaderDropZone": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column headers wrapper", + "conditions": "a column is being dragged" + }, + "columnHeaderTitle": { "description": "Styles applied to the column header's title element;" }, + "columnHeaderTitleContainer": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column header's title container element" + }, + "columnHeaderTitleContainerContent": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column header's title excepted buttons" + }, + "columnHeader--filledGroup": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column group header cell", + "conditions": "not empty" + }, + "columnHeader--emptyGroup": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the empty column group header cell" + }, + "columnHeader--showColumnBorder": { + "description": "Styles applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the column group header cell", + "conditions": "show column border" + }, + "columnHeaders": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column headers" + }, + "columnHeadersInner": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column headers's inner element" + }, + "columnHeadersInner--scrollable": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column headers's inner element", + "conditions": "there is a horizontal scrollbar" + }, + "columnSeparator--resizable": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column header separator", + "conditions": "the column is resizable" + }, + "columnSeparator--resizing": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column header separator", + "conditions": "the column is being resized" + }, + "columnSeparator--sideLeft": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column header separator", + "conditions": "the side is \"left\"" + }, + "columnSeparator--sideRight": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the column header separator", + "conditions": "the side is \"right\"" + }, + "columnSeparator": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column header separator element" + }, + "columnsPanel": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the columns panel element" + }, + "columnsPanelRow": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the columns panel row element" + }, + "detailPanel": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the detail panel element" + }, + "detailPanels": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the detail panels wrapper element" + }, + "detailPanelToggleCell": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the detail panel toggle cell element" + }, + "detailPanelToggleCell--expanded": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the detail panel toggle cell element", + "conditions": "expanded" + }, + "footerCell": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the root element of the cell inside a footer row" + }, + "panel": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the panel element" }, + "panelHeader": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the panel header element" + }, + "panelWrapper": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the panel wrapper element" + }, + "panelContent": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the panel content element" + }, + "panelFooter": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the panel footer element" + }, + "paper": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the paper element" }, + "editBooleanCell": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "root of the boolean edit component" + }, + "filterForm": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the root of the filter form component" + }, + "filterFormDeleteIcon": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the delete icon of the filter form component" + }, + "filterFormLogicOperatorInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the link operator input of the filter form component" + }, + "filterFormColumnInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column input of the filter form component" + }, + "filterFormOperatorInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the operator input of the filter form component" + }, + "filterFormValueInput": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the value input of the filter form component" + }, + "editInputCell": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the root of the input component" + }, + "filterIcon": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the filter icon element" + }, + "footerContainer": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the footer container element" + }, + "iconButtonContainer": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column header icon's container" + }, + "iconSeparator": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column header separator icon element" + }, + "headerFilterRow": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the column header filter row" + }, + "main": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the main container element" + }, + "menu": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the menu element" }, + "menuIcon": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the menu icon element" + }, + "menuIconButton": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the menu icon button element" + }, + "menuOpen": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the menu icon element", + "conditions": "the menu is open" + }, + "menuList": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the menu list element" + }, + "overlayWrapper": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the overlay wrapper element" + }, + "overlayWrapperInner": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the overlay wrapper inner element" + }, + "overlay": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the overlay element" + }, + "virtualScroller": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the virtualization container" + }, + "virtualScrollerContent": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the virtualization content" + }, + "virtualScrollerContent--overflowed": { + "description": "Styles applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the virtualization content", + "conditions": "its height is bigger than the virtualization container" + }, + "virtualScrollerRenderZone": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the virtualization render zone" + }, + "pinnedColumns": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the pinned columns" + }, + "pinnedColumns--left": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the left pinned columns" + }, + "pinnedColumns--right": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the right pinned columns" + }, + "pinnedColumnHeaders": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the pinned column headers" + }, + "pinnedColumnHeaders--left": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the left pinned column headers" + }, + "pinnedColumnHeaders--right": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the right pinned column headers" + }, + "root": { "description": "Styles applied to the root element." }, + "root--densityStandard": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "density is \"standard\" (default)" + }, + "root--densityComfortable": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "density is \"comfortable\"" + }, + "root--densityCompact": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the root element", + "conditions": "density is \"compact\"" + }, + "root--disableUserSelection": { + "description": "Styles applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the root element", + "conditions": "user selection is disabled" + }, + "row--editable": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the row element", + "conditions": "the row is editable" + }, + "row--editing": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the row element", + "conditions": "the row is in edit mode" + }, + "row--dragging": { + "description": "Styles applied to {{nodeName}} when {{conditions}}.", + "nodeName": "the floating special row reorder cell element", + "conditions": "it is dragged" + }, + "row--lastVisible": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the last visible row element on every page of the grid" + }, + "row--dynamicHeight": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the row", + "conditions": "it has dynamic row height" + }, + "row--detailPanelExpanded": { + "description": "Styles applied to {{nodeName}} if {{conditions}}.", + "nodeName": "the row", + "conditions": "its detail panel is open" + }, + "row": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the row element" }, + "rowCount": { + "description": "Styles applied to {{nodeName}}.\nOnly works when pagination is disabled.", + "nodeName": "the footer row count element to show the total number of rows" + }, + "rowReorderCellContainer": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the row reorder cell container element" + }, + "rowReorderCell": { + "description": "Styles applied to the root element of the row reorder cell" + }, + "rowReorderCell--draggable": { + "description": "Styles applied to the root element of the row reorder cell when dragging is allowed" + }, + "scrollArea": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "both scroll area elements" + }, + "scrollArea--left": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the left scroll area element" + }, + "scrollArea--right": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the right scroll area element" + }, + "selectedRowCount": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the footer selected row count element" + }, + "sortIcon": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the sort icon element" + }, + "toolbarContainer": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the toolbar container element" + }, + "toolbarFilterList": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the toolbar filter list element" + }, + "withBorderColor": { + "description": "Styles applied to {{nodeName}}, {{conditions}}.\nSets border color only.", + "nodeName": "cells", + "conditions": "column header and other elements that have border" + }, + "cell--withRightBorder": { + "description": "Styles applied the cell if `showColumnVerticalBorder={true}`." + }, + "columnHeader--withRightBorder": { + "description": "Styles applied the column header if `showColumnVerticalBorder={true}`." + }, + "treeDataGroupingCell": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the root of the grouping column of the tree data" + }, + "treeDataGroupingCellToggle": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the toggle of the grouping cell of the tree data" + }, + "groupingCriteriaCell": { + "description": "Styles applied to the root element of the grouping criteria cell" + }, + "groupingCriteriaCellToggle": { + "description": "Styles applied to the toggle of the grouping criteria cell" + }, + "pinnedRows": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the pinned rows container" + }, + "pinnedRows--top": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the top pinned rows container" + }, + "pinnedRows--bottom": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "the bottom pinned rows container" + }, + "pinnedRowsRenderZone": { + "description": "Styles applied to {{nodeName}}.", + "nodeName": "pinned rows render zones" + } + }, + "slotDescriptions": { + "baseButton": "The custom Button component used in the grid.", + "baseCheckbox": "The custom Checkbox component used in the grid for both header and cells.", + "baseChip": "The custom Chip component used in the grid.", + "baseFormControl": "The custom FormControl component used in the grid.", + "baseIconButton": "The custom IconButton component used in the grid.", + "baseInputAdornment": "The custom InputAdornment component used in the grid.", + "baseInputLabel": "The custom InputLabel component used in the grid.", + "basePopper": "The custom Popper component used in the grid.", + "baseSelect": "The custom Select component used in the grid.", + "baseSelectOption": "The custom SelectOption component used in the grid.", + "baseSwitch": "The custom Switch component used in the grid.", + "baseTextField": "The custom TextField component used in the grid.", + "baseTooltip": "The custom Tooltip component used in the grid.", + "booleanCellFalseIcon": "Icon displayed on the boolean cell to represent the false value.", + "booleanCellTrueIcon": "Icon displayed on the boolean cell to represent the true value.", + "cell": "Component rendered for each cell.", + "columnFilteredIcon": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "columnHeaderFilterIconButton": "Filter icon component rendered in each column header.", + "columnHeaders": "Component responsible for rendering the column headers.", + "columnMenu": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", + "columnMenuAggregationIcon": "Icon displayed in column menu for aggregation", + "columnMenuClearIcon": "Icon displayed in column menu for clearing values", + "columnMenuFilterIcon": "Icon displayed in column menu for filter", + "columnMenuGroupIcon": "Icon displayed in column menu for grouping", + "columnMenuHideIcon": "Icon displayed in column menu for hiding column", + "columnMenuIcon": "Icon displayed on the side of the column header title to display the filter input component.", + "columnMenuManageColumnsIcon": "Icon displayed in column menu for showing all columns", + "columnMenuPinLeftIcon": "Icon displayed in column menu for left pinning", + "columnMenuPinRightIcon": "Icon displayed in column menu for right pinning", + "columnMenuSortAscendingIcon": "Icon displayed in column menu for ascending sort", + "columnMenuSortDescendingIcon": "Icon displayed in column menu for descending sort", + "columnMenuUngroupIcon": "Icon displayed in column menu for ungrouping", + "columnReorderIcon": "Icon displayed on the column reorder button.", + "columnResizeIcon": "Icon displayed in between two column headers that allows to resize the column header.", + "columnSelectorIcon": "Icon displayed on the column menu selector tab.", + "columnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.", + "columnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.", + "columnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.", + "columnsPanel": "GridColumns panel component rendered when clicking the columns button.", + "densityComfortableIcon": "Icon displayed on the "comfortable" density option in the toolbar.", + "densityCompactIcon": "Icon displayed on the compact density option in the toolbar.", + "densityStandardIcon": "Icon displayed on the standard density option in the toolbar.", + "detailPanelCollapseIcon": "Icon displayed on the detail panel toggle column when expanded.", + "detailPanelExpandIcon": "Icon displayed on the detail panel toggle column when collapsed.", + "exportIcon": "Icon displayed on the open export button present in the toolbar by default.", + "filterPanel": "Filter panel component rendered when clicking the filter button.", + "filterPanelAddIcon": "Icon displayed for deleting the filter from filter panel.", + "filterPanelDeleteIcon": "Icon displayed for deleting the filter from filter panel.", + "filterPanelRemoveAllIcon": "Icon displayed for deleting all the active filters from filter panel.", + "footer": "Footer component rendered at the bottom of the grid viewport.", + "footerRowCount": "Row count component rendered in the footer", + "groupingCriteriaCollapseIcon": "Icon displayed on the grouping column when the children are expanded", + "groupingCriteriaExpandIcon": "Icon displayed on the grouping column when the children are collapsed", + "headerFilterCell": "Component responsible for showing menu adornment in Header filter row", + "headerFilterMenu": "Component responsible for showing menu in Header filter row", + "loadIcon": "Icon displayed on the input while processing.", + "loadingOverlay": "Loading overlay component rendered when the grid is in a loading state.", + "moreActionsIcon": "Icon displayed on the actions column type to open the menu.", + "noResultsOverlay": "No results overlay component rendered when the grid has no results after filtering.", + "noRowsOverlay": "No rows overlay component rendered when the grid has no rows.", + "openFilterButtonIcon": "Icon displayed on the open filter button present in the toolbar by default.", + "pagination": "Pagination component rendered in the grid footer by default.", + "panel": "Panel component wrapping the filters and columns panels.", + "preferencesPanel": "PreferencesPanel component rendered inside the Header component.", + "quickFilterClearIcon": "Icon displayed on the quick filter reset input.", + "quickFilterIcon": "Icon displayed on the quick filter input.", + "row": "Component rendered for each row.", + "rowReorderIcon": "Icon displayed on the reorder column type to reorder a row.", + "skeletonCell": "Component rendered for each skeleton cell.", + "toolbar": "Toolbar component rendered inside the Header component.", + "treeDataCollapseIcon": "Icon displayed on the tree data toggling column when the children are expanded", + "treeDataExpandIcon": "Icon displayed on the tree data toggling column when the children are collapsed" + } +} diff --git a/docs/pages/experiments/docs/data-grid-premium.js b/docs/pages/experiments/docs/data-grid-premium.js new file mode 100644 index 00000000000000..6e044bfa9aef45 --- /dev/null +++ b/docs/pages/experiments/docs/data-grid-premium.js @@ -0,0 +1,8 @@ +import * as React from 'react'; +import ApiPage from 'docs/src/modules/components/ApiPage'; +import jsonPageContent from './data-grid-premium.json'; +import descriptions from './data-grid-premium-translation.json'; + +export default function Page() { + return ; +} diff --git a/docs/pages/experiments/docs/data-grid-premium.json b/docs/pages/experiments/docs/data-grid-premium.json new file mode 100644 index 00000000000000..bdc26c3d9d2878 --- /dev/null +++ b/docs/pages/experiments/docs/data-grid-premium.json @@ -0,0 +1,1196 @@ +{ + "props": { + "columns": { + "type": { "name": "arrayOf", "description": "Array<object>" }, + "required": true + }, + "rows": { + "type": { "name": "arrayOf", "description": "Array<object>" }, + "required": true + }, + "aggregationFunctions": { + "type": { "name": "object" }, + "default": "GRID_AGGREGATION_FUNCTIONS" + }, + "aggregationModel": { "type": { "name": "object" } }, + "aggregationRowsScope": { + "type": { "name": "enum", "description": "'all'
| 'filtered'" }, + "default": "\"filtered\"" + }, + "apiRef": { "type": { "name": "shape", "description": "{ current: object }" } }, + "aria-label": { "type": { "name": "string" } }, + "aria-labelledby": { "type": { "name": "string" } }, + "autoHeight": { "type": { "name": "bool" } }, + "autoPageSize": { "type": { "name": "bool" } }, + "cellModesModel": { "type": { "name": "object" } }, + "checkboxSelection": { "type": { "name": "bool" } }, + "checkboxSelectionVisibleOnly": { + "type": { "name": "custom", "description": "bool" }, + "default": "false" + }, + "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, + "clipboardCopyCellDelimiter": { "type": { "name": "string" }, "default": "'\\t'" }, + "columnBuffer": { "type": { "name": "number" }, "default": "3" }, + "columnHeaderHeight": { "type": { "name": "number" }, "default": "56" }, + "columnThreshold": { "type": { "name": "number" }, "default": "3" }, + "columnVisibilityModel": { "type": { "name": "object" } }, + "components": { + "type": { "name": "object" }, + "deprecated": true, + "deprecationInfo": "Use the slots prop instead." + }, + "componentsProps": { + "type": { "name": "object" }, + "deprecated": true, + "deprecationInfo": "Use the slotProps prop instead." + }, + "defaultGroupingExpansionDepth": { "type": { "name": "number" }, "default": "0" }, + "density": { + "type": { + "name": "enum", + "description": "'comfortable'
| 'compact'
| 'standard'" + }, + "default": "\"standard\"" + }, + "detailPanelExpandedRowIds": { + "type": { "name": "arrayOf", "description": "Array<number
| string>" } + }, + "disableAggregation": { "type": { "name": "bool" } }, + "disableChildrenFiltering": { "type": { "name": "bool" } }, + "disableChildrenSorting": { "type": { "name": "bool" } }, + "disableClipboardPaste": { "type": { "name": "bool" } }, + "disableColumnFilter": { "type": { "name": "bool" } }, + "disableColumnMenu": { "type": { "name": "bool" } }, + "disableColumnPinning": { "type": { "name": "bool" } }, + "disableColumnReorder": { "type": { "name": "bool" } }, + "disableColumnResize": { "type": { "name": "bool" } }, + "disableColumnSelector": { "type": { "name": "bool" } }, + "disableDensitySelector": { "type": { "name": "bool" } }, + "disableMultipleColumnsFiltering": { "type": { "name": "bool" } }, + "disableMultipleColumnsSorting": { "type": { "name": "bool" } }, + "disableMultipleRowSelection": { "type": { "name": "bool" } }, + "disableRowGrouping": { "type": { "name": "bool" } }, + "disableRowSelectionOnClick": { "type": { "name": "bool" } }, + "disableVirtualization": { "type": { "name": "bool" } }, + "editMode": { + "type": { "name": "enum", "description": "'cell'
| 'row'" }, + "default": "\"cell\"" + }, + "experimentalFeatures": { + "type": { + "name": "shape", + "description": "{ ariaV7?: bool, clipboardPaste?: bool, columnGrouping?: bool, lazyLoading?: bool, warnIfFocusStateIsNotSynced?: bool }" + } + }, + "filterDebounceMs": { "type": { "name": "number" }, "default": "150" }, + "filterMode": { + "type": { "name": "custom", "description": "'client'
| 'server'" }, + "default": "\"client\"" + }, + "filterModel": { + "type": { + "name": "shape", + "description": "{ items: Array<{ field: string, id?: number
| string, operator: string, value?: any }>, logicOperator?: 'and'
| 'or', quickFilterExcludeHiddenColumns?: bool, quickFilterLogicOperator?: 'and'
| 'or', quickFilterValues?: array }" + } + }, + "getAggregationPosition": { + "type": { "name": "func" }, + "default": "`(groupNode) => groupNode == null ? 'footer' : 'inline'`", + "signature": { + "type": "function(groupNode: GridGroupNode) => GridAggregationPosition | null", + "describedArgs": ["groupNode"], + "returned": "GridAggregationPosition | null" + } + }, + "getCellClassName": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridCellParams) => string", + "describedArgs": ["params"], + "returned": "string" + } + }, + "getDetailPanelContent": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridRowParams) => React.JSX.Element", + "describedArgs": ["params"], + "returned": "React.JSX.Element" + } + }, + "getDetailPanelHeight": { + "type": { "name": "func" }, + "default": "\"() => 500\"", + "signature": { + "type": "function(params: GridRowParams) => number | string", + "describedArgs": ["params"], + "returned": "number | string" + } + }, + "getEstimatedRowHeight": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridRowHeightParams) => number | null", + "describedArgs": ["params"], + "returned": "number | null" + } + }, + "getRowClassName": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridRowClassNameParams) => string", + "describedArgs": ["params"], + "returned": "string" + } + }, + "getRowHeight": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridRowHeightParams) => GridRowHeightReturnValue", + "describedArgs": ["params"], + "returned": "GridRowHeightReturnValue" + } + }, + "getRowId": { "type": { "name": "func" } }, + "getRowSpacing": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridRowSpacingParams) => GridRowSpacing", + "describedArgs": ["params"], + "returned": "GridRowSpacing" + } + }, + "getTreeDataPath": { + "type": { "name": "func" }, + "signature": { + "type": "function(row: R) => Array", + "describedArgs": ["row"], + "returned": "Array" + } + }, + "groupingColDef": { "type": { "name": "union", "description": "func
| object" } }, + "hideFooter": { "type": { "name": "bool" } }, + "hideFooterPagination": { "type": { "name": "bool" } }, + "hideFooterRowCount": { + "type": { "name": "custom", "description": "bool" }, + "default": "false" + }, + "hideFooterSelectedRowCount": { "type": { "name": "bool" } }, + "initialState": { "type": { "name": "object" } }, + "isCellEditable": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridCellParams) => boolean", + "describedArgs": ["params"], + "returned": "boolean" + } + }, + "isGroupExpandedByDefault": { + "type": { "name": "func" }, + "signature": { + "type": "function(node: GridGroupNode) => boolean", + "describedArgs": ["node"], + "returned": "boolean" + } + }, + "isRowSelectable": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridRowParams) => boolean", + "describedArgs": ["params"], + "returned": "boolean" + } + }, + "keepColumnPositionIfDraggedOutside": { "type": { "name": "bool" } }, + "keepNonExistentRowsSelected": { "type": { "name": "bool" } }, + "loading": { "type": { "name": "bool" } }, + "localeText": { "type": { "name": "object" } }, + "logger": { + "type": { + "name": "shape", + "description": "{ debug: func, error: func, info: func, warn: func }" + }, + "default": "console" + }, + "logLevel": { + "type": { + "name": "enum", + "description": "'debug'
| 'error'
| 'info'
| 'warn'
| false" + }, + "default": "\"error\" (\"warn\" in dev mode)" + }, + "nonce": { "type": { "name": "string" } }, + "onAggregationModelChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(model: GridAggregationModel, details: GridCallbackDetails) => void", + "describedArgs": ["model", "details"] + } + }, + "onCellClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onCellDoubleClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onCellEditStart": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridCellParams, event: MuiEvent) => void", + "describedArgs": ["params", "event"] + } + }, + "onCellEditStop": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridCellParams, event: MuiEvent) => void", + "describedArgs": ["params", "event"] + } + }, + "onCellKeyDown": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridCellParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onCellModesModelChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(cellModesModel: GridCellModesModel, details: GridCallbackDetails) => void", + "describedArgs": ["cellModesModel", "details"] + } + }, + "onClipboardCopy": { + "type": { "name": "func" }, + "signature": { "type": "function(data: string) => void", "describedArgs": ["data"] } + }, + "onClipboardPasteEnd": { "type": { "name": "func" } }, + "onClipboardPasteStart": { "type": { "name": "func" } }, + "onColumnHeaderClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onColumnHeaderDoubleClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onColumnHeaderEnter": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onColumnHeaderLeave": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onColumnHeaderOut": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onColumnHeaderOver": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridColumnHeaderParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onColumnOrderChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridColumnOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onColumnResize": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onColumnVisibilityModelChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(model: GridColumnVisibilityModel, details: GridCallbackDetails) => void", + "describedArgs": ["model", "details"] + } + }, + "onColumnWidthChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridColumnResizeParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onDetailPanelExpandedRowIdsChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(ids: Array, details: GridCallbackDetails) => void", + "describedArgs": ["ids", "details"] + } + }, + "onExcelExportStateChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(inProgress: string) => void", + "describedArgs": ["inProgress"] + } + }, + "onFetchRows": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridFetchRowsParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onFilterModelChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(model: GridFilterModel, details: GridCallbackDetails) => void", + "describedArgs": ["model", "details"] + } + }, + "onMenuClose": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onMenuOpen": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridMenuParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onPaginationModelChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(model: GridPaginationModel, details: GridCallbackDetails) => void", + "describedArgs": ["model", "details"] + } + }, + "onPinnedColumnsChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(pinnedColumns: GridPinnedColumns, details: GridCallbackDetails) => void", + "describedArgs": ["pinnedColumns", "details"] + } + }, + "onPreferencePanelClose": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onPreferencePanelOpen": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridPreferencePanelParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onProcessRowUpdateError": { + "type": { "name": "func" }, + "signature": { "type": "function(error: any) => void", "describedArgs": ["error"] } + }, + "onResize": { + "type": { "name": "func" }, + "signature": { + "type": "function(containerSize: ElementSize, event: MuiEvent<{}>, details: GridCallbackDetails) => void", + "describedArgs": ["containerSize", "event", "details"] + } + }, + "onRowClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onRowDoubleClick": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridRowParams, event: MuiEvent, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onRowEditCommit": { + "type": { "name": "func" }, + "signature": { + "type": "function(id: GridRowId, event: MuiEvent) => void", + "describedArgs": ["id", "event"] + } + }, + "onRowEditStart": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridRowParams, event: MuiEvent) => void", + "describedArgs": ["params", "event"] + } + }, + "onRowEditStop": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridRowParams, event: MuiEvent) => void", + "describedArgs": ["params", "event"] + } + }, + "onRowGroupingModelChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(model: GridRowGroupingModel, details: GridCallbackDetails) => void", + "describedArgs": ["model", "details"] + } + }, + "onRowModesModelChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(rowModesModel: GridRowModesModel, details: GridCallbackDetails) => void", + "describedArgs": ["rowModesModel", "details"] + } + }, + "onRowOrderChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridRowOrderChangeParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onRowSelectionModelChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(rowSelectionModel: GridRowSelectionModel, details: GridCallbackDetails) => void", + "describedArgs": ["rowSelectionModel", "details"] + } + }, + "onRowsScrollEnd": { + "type": { "name": "func" }, + "signature": { + "type": "function(params: GridRowScrollEndParams, event: MuiEvent<{}>, details: GridCallbackDetails) => void", + "describedArgs": ["params", "event", "details"] + } + }, + "onSortModelChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(model: GridSortModel, details: GridCallbackDetails) => void", + "describedArgs": ["model", "details"] + } + }, + "pageSizeOptions": { + "type": { + "name": "arrayOf", + "description": "Array<number
| { label: string, value: number }>" + }, + "default": "[25, 50, 100]" + }, + "pagination": { "type": { "name": "bool" } }, + "paginationMode": { + "type": { "name": "enum", "description": "'client'
| 'server'" }, + "default": "\"client\"" + }, + "paginationModel": { + "type": { "name": "shape", "description": "{ page: number, pageSize: number }" } + }, + "pinnedColumns": { + "type": { + "name": "shape", + "description": "{ left?: Array<string>, right?: Array<string> }" + } + }, + "pinnedRows": { + "type": { + "name": "shape", + "description": "{ bottom?: Array<object>, top?: Array<object> }" + } + }, + "processRowUpdate": { + "type": { "name": "func" }, + "signature": { + "type": "function(newRow: R, oldRow: R) => Promise | R", + "describedArgs": ["newRow", "oldRow"], + "returned": "Promise | R" + } + }, + "rowBuffer": { "type": { "name": "number" }, "default": "3" }, + "rowCount": { "type": { "name": "number" } }, + "rowGroupingColumnMode": { + "type": { "name": "enum", "description": "'multiple'
| 'single'" }, + "default": "'single'" + }, + "rowGroupingModel": { "type": { "name": "arrayOf", "description": "Array<string>" } }, + "rowHeight": { "type": { "name": "number" }, "default": "52" }, + "rowModesModel": { "type": { "name": "object" } }, + "rowReordering": { "type": { "name": "bool" } }, + "rowSelection": { "type": { "name": "bool" }, "default": "true" }, + "rowSelectionModel": { + "type": { + "name": "union", + "description": "Array<number
| string>
| number
| string" + } + }, + "rowsLoadingMode": { + "type": { "name": "enum", "description": "'client'
| 'server'" } + }, + "rowSpacingType": { + "type": { "name": "enum", "description": "'border'
| 'margin'" }, + "default": "\"margin\"" + }, + "rowThreshold": { "type": { "name": "number" }, "default": "3" }, + "scrollbarSize": { "type": { "name": "number" } }, + "scrollEndThreshold": { "type": { "name": "number" }, "default": "80" }, + "showCellVerticalBorder": { "type": { "name": "bool" } }, + "showColumnVerticalBorder": { "type": { "name": "bool" } }, + "slotProps": { "type": { "name": "object" } }, + "slots": { "type": { "name": "object" } }, + "sortingMode": { + "type": { "name": "enum", "description": "'client'
| 'server'" }, + "default": "\"client\"" + }, + "sortingOrder": { + "type": { "name": "arrayOf", "description": "Array<'asc'
| 'desc'>" }, + "default": "['asc', 'desc', null]" + }, + "sortModel": { + "type": { + "name": "arrayOf", + "description": "Array<{ field: string, sort?: 'asc'
| 'desc' }>" + } + }, + "sx": { + "type": { + "name": "union", + "description": "Array<func
| object
| bool>
| func
| object" + }, + "additionalInfo": { "sx": true } + }, + "throttleRowsMs": { "type": { "name": "number" }, "default": "0" }, + "treeData": { "type": { "name": "bool" } }, + "unstable_cellSelection": { "type": { "name": "bool" } }, + "unstable_cellSelectionModel": { "type": { "name": "object" } }, + "unstable_headerFilters": { "type": { "name": "bool" } }, + "unstable_ignoreValueFormatterDuringExport": { + "type": { + "name": "union", + "description": "{ clipboardExport?: bool, csvExport?: bool }
| bool" + }, + "default": ": false" + }, + "unstable_onCellSelectionModelChange": { + "type": { "name": "func" }, + "signature": { + "type": "function(cellSelectionModel: GridCellSelectionModel, details: GridCallbackDetails) => void", + "describedArgs": ["cellSelectionModel", "details"] + } + }, + "unstable_splitClipboardPastedText": { + "type": { "name": "func" }, + "signature": { "type": "function(text: string) => void", "describedArgs": ["text"] } + } + }, + "slots": [ + { + "class": null, + "name": "baseButton", + "description": "The custom Button component used in the grid.", + "default": "Button" + }, + { + "class": null, + "name": "baseCheckbox", + "description": "The custom Checkbox component used in the grid for both header and cells.", + "default": "Checkbox" + }, + { + "class": null, + "name": "baseChip", + "description": "The custom Chip component used in the grid.", + "default": "Chip" + }, + { + "class": null, + "name": "baseFormControl", + "description": "The custom FormControl component used in the grid.", + "default": "FormControl" + }, + { + "class": null, + "name": "baseIconButton", + "description": "The custom IconButton component used in the grid.", + "default": "IconButton" + }, + { + "class": null, + "name": "baseInputAdornment", + "description": "The custom InputAdornment component used in the grid.", + "default": "InputAdornment" + }, + { + "class": null, + "name": "baseInputLabel", + "description": "The custom InputLabel component used in the grid.", + "default": "InputLabel" + }, + { + "class": null, + "name": "basePopper", + "description": "The custom Popper component used in the grid.", + "default": "Popper" + }, + { + "class": null, + "name": "baseSelect", + "description": "The custom Select component used in the grid.", + "default": "Select" + }, + { + "class": null, + "name": "baseSelectOption", + "description": "The custom SelectOption component used in the grid.", + "default": "MenuItem" + }, + { + "class": null, + "name": "baseSwitch", + "description": "The custom Switch component used in the grid.", + "default": "Switch" + }, + { + "class": null, + "name": "baseTextField", + "description": "The custom TextField component used in the grid.", + "default": "TextField" + }, + { + "class": null, + "name": "baseTooltip", + "description": "The custom Tooltip component used in the grid.", + "default": "Tooltip" + }, + { + "class": null, + "name": "booleanCellFalseIcon", + "description": "Icon displayed on the boolean cell to represent the false value.", + "default": "GridCloseIcon" + }, + { + "class": null, + "name": "booleanCellTrueIcon", + "description": "Icon displayed on the boolean cell to represent the true value.", + "default": "GridCheckIcon" + }, + { + "class": null, + "name": "cell", + "description": "Component rendered for each cell.", + "default": "GridCell" + }, + { + "class": null, + "name": "columnFilteredIcon", + "description": "Icon displayed on the column header menu to show that a filter has been applied to the column.", + "default": "GridFilterAltIcon" + }, + { + "class": null, + "name": "columnHeaderFilterIconButton", + "description": "Filter icon component rendered in each column header.", + "default": "GridColumnHeaderFilterIconButton" + }, + { + "class": null, + "name": "columnHeaders", + "description": "Component responsible for rendering the column headers.", + "default": "DataGridColumnHeaders" + }, + { + "class": null, + "name": "columnMenu", + "description": "Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.", + "default": "GridColumnMenu" + }, + { + "class": null, + "name": "columnMenuAggregationIcon", + "description": "Icon displayed in column menu for aggregation", + "default": "GridFunctionsIcon" + }, + { + "class": null, + "name": "columnMenuClearIcon", + "description": "Icon displayed in column menu for clearing values", + "default": "GridClearIcon" + }, + { + "class": null, + "name": "columnMenuFilterIcon", + "description": "Icon displayed in column menu for filter", + "default": "GridFilterAltIcon" + }, + { + "class": null, + "name": "columnMenuGroupIcon", + "description": "Icon displayed in column menu for grouping", + "default": "GridGroupWorkIcon" + }, + { + "class": null, + "name": "columnMenuHideIcon", + "description": "Icon displayed in column menu for hiding column", + "default": "GridVisibilityOffIcon" + }, + { + "class": null, + "name": "columnMenuIcon", + "description": "Icon displayed on the side of the column header title to display the filter input component.", + "default": "GridTripleDotsVerticalIcon" + }, + { + "class": null, + "name": "columnMenuManageColumnsIcon", + "description": "Icon displayed in column menu for showing all columns", + "default": "GridViewColumnIcon" + }, + { + "class": null, + "name": "columnMenuPinLeftIcon", + "description": "Icon displayed in column menu for left pinning", + "default": "GridPushPinLeftIcon" + }, + { + "class": null, + "name": "columnMenuPinRightIcon", + "description": "Icon displayed in column menu for right pinning", + "default": "GridPushPinRightIcon" + }, + { + "class": null, + "name": "columnMenuSortAscendingIcon", + "description": "Icon displayed in column menu for ascending sort", + "default": "GridArrowUpwardIcon" + }, + { + "class": null, + "name": "columnMenuSortDescendingIcon", + "description": "Icon displayed in column menu for descending sort", + "default": "GridArrowDownwardIcon" + }, + { + "class": null, + "name": "columnMenuUngroupIcon", + "description": "Icon displayed in column menu for ungrouping", + "default": "GridWorkspacesIcon" + }, + { + "class": null, + "name": "columnReorderIcon", + "description": "Icon displayed on the column reorder button.", + "default": "GridDragIcon" + }, + { + "class": null, + "name": "columnResizeIcon", + "description": "Icon displayed in between two column headers that allows to resize the column header.", + "default": "GridSeparatorIcon" + }, + { + "class": null, + "name": "columnSelectorIcon", + "description": "Icon displayed on the column menu selector tab.", + "default": "GridColumnIcon" + }, + { + "class": null, + "name": "columnSortedAscendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in ascending order.", + "default": "GridArrowUpwardIcon" + }, + { + "class": null, + "name": "columnSortedDescendingIcon", + "description": "Icon displayed on the side of the column header title when sorted in descending order.", + "default": "GridArrowDownwardIcon" + }, + { + "class": null, + "name": "columnUnsortedIcon", + "description": "Icon displayed on the side of the column header title when unsorted.", + "default": "GridColumnUnsortedIcon" + }, + { + "class": null, + "name": "columnsPanel", + "description": "GridColumns panel component rendered when clicking the columns button.", + "default": "GridColumnsPanel" + }, + { + "class": null, + "name": "densityComfortableIcon", + "description": "Icon displayed on the "comfortable" density option in the toolbar.", + "default": "GridViewStreamIcon" + }, + { + "class": null, + "name": "densityCompactIcon", + "description": "Icon displayed on the compact density option in the toolbar.", + "default": "GridViewHeadlineIcon" + }, + { + "class": null, + "name": "densityStandardIcon", + "description": "Icon displayed on the standard density option in the toolbar.", + "default": "GridTableRowsIcon" + }, + { + "class": null, + "name": "detailPanelCollapseIcon", + "description": "Icon displayed on the detail panel toggle column when expanded.", + "default": "GridRemoveIcon" + }, + { + "class": null, + "name": "detailPanelExpandIcon", + "description": "Icon displayed on the detail panel toggle column when collapsed.", + "default": "GridAddIcon" + }, + { + "class": null, + "name": "exportIcon", + "description": "Icon displayed on the open export button present in the toolbar by default.", + "default": "GridSaveAltIcon" + }, + { + "class": null, + "name": "filterPanel", + "description": "Filter panel component rendered when clicking the filter button.", + "default": "GridFilterPanel" + }, + { + "class": null, + "name": "filterPanelAddIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridAddIcon" + }, + { + "class": null, + "name": "filterPanelDeleteIcon", + "description": "Icon displayed for deleting the filter from filter panel.", + "default": "GridDeleteIcon" + }, + { + "class": null, + "name": "filterPanelRemoveAllIcon", + "description": "Icon displayed for deleting all the active filters from filter panel.", + "default": "GridDeleteForeverIcon" + }, + { + "class": null, + "name": "footer", + "description": "Footer component rendered at the bottom of the grid viewport.", + "default": "GridFooter" + }, + { + "class": null, + "name": "footerRowCount", + "description": "Row count component rendered in the footer", + "default": "GridRowCount" + }, + { + "class": null, + "name": "groupingCriteriaCollapseIcon", + "description": "Icon displayed on the grouping column when the children are expanded", + "default": "GridExpandMoreIcon" + }, + { + "class": null, + "name": "groupingCriteriaExpandIcon", + "description": "Icon displayed on the grouping column when the children are collapsed", + "default": "GridKeyboardArrowRight" + }, + { + "class": null, + "name": "headerFilterCell", + "description": "Component responsible for showing menu adornment in Header filter row", + "default": "GridHeaderFilterCell" + }, + { + "class": null, + "name": "headerFilterMenu", + "description": "Component responsible for showing menu in Header filter row", + "default": "GridHeaderFilterMenu" + }, + { + "class": null, + "name": "loadIcon", + "description": "Icon displayed on the input while processing.", + "default": "GridLoadIcon" + }, + { + "class": null, + "name": "loadingOverlay", + "description": "Loading overlay component rendered when the grid is in a loading state.", + "default": "GridLoadingOverlay" + }, + { + "class": null, + "name": "moreActionsIcon", + "description": "Icon displayed on the actions column type to open the menu.", + "default": "GridMoreVertIcon" + }, + { + "class": null, + "name": "noResultsOverlay", + "description": "No results overlay component rendered when the grid has no results after filtering.", + "default": "GridNoResultsOverlay" + }, + { + "class": null, + "name": "noRowsOverlay", + "description": "No rows overlay component rendered when the grid has no rows.", + "default": "GridNoRowsOverlay" + }, + { + "class": null, + "name": "openFilterButtonIcon", + "description": "Icon displayed on the open filter button present in the toolbar by default.", + "default": "GridFilterListIcon" + }, + { + "class": null, + "name": "pagination", + "description": "Pagination component rendered in the grid footer by default.", + "default": "Pagination" + }, + { + "class": null, + "name": "panel", + "description": "Panel component wrapping the filters and columns panels.", + "default": "GridPanel" + }, + { + "class": null, + "name": "preferencesPanel", + "description": "PreferencesPanel component rendered inside the Header component.", + "default": "GridPreferencesPanel" + }, + { + "class": null, + "name": "quickFilterClearIcon", + "description": "Icon displayed on the quick filter reset input.", + "default": "GridCloseIcon" + }, + { + "class": null, + "name": "quickFilterIcon", + "description": "Icon displayed on the quick filter input.", + "default": "GridSearchIcon" + }, + { + "class": null, + "name": "row", + "description": "Component rendered for each row.", + "default": "GridRow" + }, + { + "class": null, + "name": "rowReorderIcon", + "description": "Icon displayed on the reorder column type to reorder a row.", + "default": "GridDragIcon" + }, + { + "class": null, + "name": "skeletonCell", + "description": "Component rendered for each skeleton cell.", + "default": "GridSkeletonCell" + }, + { + "class": null, + "name": "toolbar", + "description": "Toolbar component rendered inside the Header component.", + "default": "null" + }, + { + "class": null, + "name": "treeDataCollapseIcon", + "description": "Icon displayed on the tree data toggling column when the children are expanded", + "default": "GridExpandMoreIcon" + }, + { + "class": null, + "name": "treeDataExpandIcon", + "description": "Icon displayed on the tree data toggling column when the children are collapsed", + "default": "GridKeyboardArrowRight" + } + ], + "name": "DataGridPremium", + "imports": [ + "import { DataGridPremium } from '@mui/x-data-grid-premium/DataGridPremium';", + "import { DataGridPremium } from '@mui/x-data-grid-premium';" + ], + "styles": { + "classes": [ + "actionsCell", + "aggregationColumnHeader", + "aggregationColumnHeader--alignLeft", + "aggregationColumnHeader--alignCenter", + "aggregationColumnHeader--alignRight", + "aggregationColumnHeaderLabel", + "autoHeight", + "booleanCell", + "cell--editable", + "cell--editing", + "cell--textCenter", + "cell--textLeft", + "cell--textRight", + "cell--withRenderer", + "cell--rangeTop", + "cell--rangeBottom", + "cell--rangeLeft", + "cell--rangeRight", + "cell", + "cellContent", + "cellCheckbox", + "cellSkeleton", + "checkboxInput", + "columnHeader--alignCenter", + "columnHeader--alignLeft", + "columnHeader--alignRight", + "columnHeader--dragging", + "columnHeader--moving", + "columnHeader--numeric", + "columnHeader--sortable", + "columnHeader--sorted", + "columnHeader--filtered", + "columnHeader", + "columnGroupHeader", + "columnHeaderCheckbox", + "columnHeaderDraggableContainer", + "rowReorderCellPlaceholder", + "columnHeaderDropZone", + "columnHeaderTitle", + "columnHeaderTitleContainer", + "columnHeaderTitleContainerContent", + "columnHeader--filledGroup", + "columnHeader--emptyGroup", + "columnHeader--showColumnBorder", + "columnHeaders", + "columnHeadersInner", + "columnHeadersInner--scrollable", + "columnSeparator--resizable", + "columnSeparator--resizing", + "columnSeparator--sideLeft", + "columnSeparator--sideRight", + "columnSeparator", + "columnsPanel", + "columnsPanelRow", + "detailPanel", + "detailPanels", + "detailPanelToggleCell", + "detailPanelToggleCell--expanded", + "footerCell", + "panel", + "panelHeader", + "panelWrapper", + "panelContent", + "panelFooter", + "paper", + "editBooleanCell", + "filterForm", + "filterFormDeleteIcon", + "filterFormLogicOperatorInput", + "filterFormColumnInput", + "filterFormOperatorInput", + "filterFormValueInput", + "editInputCell", + "filterIcon", + "footerContainer", + "iconButtonContainer", + "iconSeparator", + "headerFilterRow", + "main", + "menu", + "menuIcon", + "menuIconButton", + "menuOpen", + "menuList", + "overlayWrapper", + "overlayWrapperInner", + "overlay", + "virtualScroller", + "virtualScrollerContent", + "virtualScrollerContent--overflowed", + "virtualScrollerRenderZone", + "pinnedColumns", + "pinnedColumns--left", + "pinnedColumns--right", + "pinnedColumnHeaders", + "pinnedColumnHeaders--left", + "pinnedColumnHeaders--right", + "root", + "root--densityStandard", + "root--densityComfortable", + "root--densityCompact", + "root--disableUserSelection", + "row--editable", + "row--editing", + "row--dragging", + "row--lastVisible", + "row--dynamicHeight", + "row--detailPanelExpanded", + "row", + "rowCount", + "rowReorderCellContainer", + "rowReorderCell", + "rowReorderCell--draggable", + "scrollArea", + "scrollArea--left", + "scrollArea--right", + "selectedRowCount", + "sortIcon", + "toolbarContainer", + "toolbarFilterList", + "withBorderColor", + "cell--withRightBorder", + "columnHeader--withRightBorder", + "treeDataGroupingCell", + "treeDataGroupingCellToggle", + "groupingCriteriaCell", + "groupingCriteriaCellToggle", + "pinnedRows", + "pinnedRows--top", + "pinnedRows--bottom", + "pinnedRowsRenderZone" + ], + "globalClasses": {}, + "name": "MuiDataGrid" + }, + "forwardsRefTo": "GridRoot", + "filename": "/packages/grid/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx", + "demos": "" +} diff --git a/docs/src/components/productDesignKit/DesignKitHero.tsx b/docs/src/components/productDesignKit/DesignKitHero.tsx index 8651c294cca2cf..295a62bc583d70 100644 --- a/docs/src/components/productDesignKit/DesignKitHero.tsx +++ b/docs/src/components/productDesignKit/DesignKitHero.tsx @@ -34,7 +34,8 @@ export default function TemplateHero() { }), })} > - Design kits + Design + kits Material UI diff --git a/docs/src/modules/components/ApiPage.js b/docs/src/modules/components/ApiPage.js index 997fbd3e516570..f5c6dbb9b7a45a 100644 --- a/docs/src/modules/components/ApiPage.js +++ b/docs/src/modules/components/ApiPage.js @@ -11,14 +11,17 @@ import AlertTitle from '@mui/material/AlertTitle'; import ReviewsRoundedIcon from '@mui/icons-material/ReviewsRounded'; import { alpha } from '@mui/material/styles'; import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n'; -import PropertiesTable, { getPropsToC } from 'docs/src/modules/components/PropertiesTable'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import AppLayoutDocs from 'docs/src/modules/components/AppLayoutDocs'; import Ad from 'docs/src/modules/components/Ad'; -import CSSList, { getCssToC } from './ApiPage/CSSList'; -import ClassesList from './ApiPage/ClassesList'; -import SlotsList from './ApiPage/SlotsList'; + +import PropertiesSection, { + getPropsToC, +} from 'docs/src/modules/components/ApiPage/sections/PropertiesSection'; +import CSSSection, { getCssToC } from 'docs/src/modules/components/ApiPage/sections/CssSection'; +import ClassesSection from 'docs/src/modules/components/ApiPage/sections/ClassesSection'; +import SlotsSection from 'docs/src/modules/components/ApiPage/sections/SlotsSection'; export function getTranslatedHeader(t, header) { const translations = { @@ -253,13 +256,13 @@ export default function ApiPage(props) { ) : null} - -

- + {cssComponent && ( )} +

- + {inheritance && ( @@ -291,6 +300,7 @@ export default function ApiPage(props) { )} + {pageContent.themeDefaultProps && ( @@ -301,73 +311,35 @@ export default function ApiPage(props) { .replace(/{{defaultPropsLink}}/, defaultPropsLink), }} /> - + )} - {Object.keys(componentStyles.classes).length ? ( - - -

-
- -

- - - ) : null} - {componentSlots?.length > 0 ? ( - - - {slotGuideLink && ( -

- )} - -

- - - - ) : null} - {hasClasses ? ( - - -

- - - ) : null} + + + + + + diff --git a/docs/src/modules/components/ApiPage/ApiItem.tsx b/docs/src/modules/components/ApiPage/ApiItem.tsx deleted file mode 100644 index 15aa828326b22c..00000000000000 --- a/docs/src/modules/components/ApiPage/ApiItem.tsx +++ /dev/null @@ -1,272 +0,0 @@ -/* eslint-disable react/no-danger */ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { alpha, styled } from '@mui/material/styles'; -import Divider from '@mui/material/Divider'; -import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; -import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; -import { IconButton } from '@mui/material'; -import { - brandingDarkTheme as darkTheme, - brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; - -type DescriptionType = 'props' | 'classes' | 'CSS' | 'slots'; - -const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>( - ({ theme }) => ({ - '& .MuiApi-item-header': { - ...theme.typography.caption, - fontSize: 13, - fontFamily: theme.typography.fontFamilyCode, - display: 'flex', - alignItems: 'flex-end', - position: 'relative', - marginBottom: 8, - marginLeft: -40, - '& .MuiApi-item-link-visual': { - display: 'none', - flexShrink: 0, - border: '1px solid', - borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`, - borderRadius: 8, - backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, - height: 26, - width: 26, - lineHeight: '30px', - textAlign: 'center', - '& svg': { - fill: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`, - height: '14px', - width: '14px', - }, - }, - '&>span, &>div': { - fontWeight: theme.typography.fontWeightRegular, - borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`, - }, - '&>*': { - height: 26, - }, - '& .MuiApi-item-title': { - flexShrink: 0, - padding: '2px 6px', - marginLeft: 32, - borderWidth: '1px', - borderStyle: 'solid', - borderRadius: 8, - fontWeight: theme.typography.fontWeightSemiBold, - color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`, - backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, - }, - '& .MuiApi-item-description': { - padding: '4px 6px', - textOverflow: 'ellipsis', - overflow: 'hidden', - whiteSpace: 'nowrap', - '&.MuiApi-item-description-extended': { - whiteSpace: 'normal', - alignSelf: 'start', - height: 'auto', - }, - }, - '& .MuiApi-item-extend-description': { - alignItems: 'center', - display: 'flex', - placeItems: 'end', - }, - '& .MuiApi-item-note': { - paddingTop: 5, - fontSize: 11, - letterSpacing: '1px', - lineHeight: 1.6, - textTransform: 'uppercase', - color: `var(--muidocs-palette-success-800, ${lightTheme.palette.success[800]})`, - fontWeight: theme.typography.fontWeightBold, - }, - [theme.breakpoints.up('lg')]: { - '&:hover, &:target': { - '.MuiApi-item-link-visual': { - display: 'inline-block', - }, - '.MuiApi-item-title': { - marginLeft: 6, - }, - '.MuiApi-item-link-visual:hover': { - cursor: 'pointer', - backgroundColor: alpha(lightTheme.palette.primary[100], 0.4), - borderColor: `var(--muidocs-palette-primary-100, ${lightTheme.palette.primary[100]})`, - '& svg': { - fill: `var(--muidocs-palette-primary-main, ${lightTheme.palette.primary.main})`, - }, - }, - }, - '&:target': { - '.MuiApi-item-link-visual': { - '&>svg': { - transform: 'rotate(90deg) translateX(-0.5px) translateY(0.1px)', - }, - }, - }, - }, - }, - '& .MuiAlert-standardWarning': { - display: 'flex', - alignItems: 'baseline', - fontSize: theme.typography.pxToRem(16), - padding: '6px 16px', - border: '1px solid', - color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, - backgroundColor: alpha(lightTheme.palette.warning[50], 0.5), - borderColor: `var(--muidocs-palette-warning-200, ${lightTheme.palette.warning[200]})`, - borderRadius: `var(--muidocs-shape-borderRadius, ${ - theme.shape?.borderRadius ?? lightTheme.shape.borderRadius - }px)`, - marginBottom: 16, - '.MuiAlert-icon': { - fill: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, - }, - }, - '& code.Api-code': { - ...theme.typography.caption, - fontFamily: theme.typography.fontFamilyCode, - fontWeight: theme.typography.fontWeightRegular, - padding: '1px 4px', - border: '1px solid', - borderColor: alpha(darkTheme.palette.primary[100], 0.5), - backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, - }, - '&>hr': { - margin: '18px 0', - }, - }), - ({ theme }) => ({ - [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { - '& .MuiApi-item-header': { - '&>span, &>div': { - borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, - }, - '& .MuiApi-item-title': { - color: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`, - backgroundColor: alpha(darkTheme.palette.primary[900], 0.5), - }, - '& .MuiApi-item-link-visual': { - borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, - backgroundColor: alpha(darkTheme.palette.primary[900], 0.5), - '& svg': { - fill: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`, - }, - }, - '&:hover, &:target': { - '.MuiApi-item-link-visual:hover': { - borderColor: `var(--muidocs-palette-primary-900, ${darkTheme.palette.primary[900]})`, - backgroundColor: alpha(darkTheme.palette.primary[900], 0.6), - '& svg': { - fill: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`, - }, - }, - }, - '& .MuiApi-item-description': { - color: `var(--muidocs-palette-grey-500, ${darkTheme.palette.grey[500]})`, - }, - '& .MuiApi-item-note': { - color: `var(--muidocs-palette-success-400, ${darkTheme.palette.success[400]})`, - }, - }, - '& .MuiAlert-standardWarning': { - color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`, - backgroundColor: alpha(darkTheme.palette.warning[700], 0.15), - borderColor: alpha(darkTheme.palette.warning[600], 0.3), - '.MuiAlert-icon svg': { - fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`, - }, - }, - '& code.Api-code': { - borderColor: alpha(darkTheme.palette.primary[400], 0.1), - backgroundColor: alpha(darkTheme.palette.primary[900], 0.4), - }, - }, - }), -); - -export type ApiItemProps = { - id: string; - title: string; - description?: string; - note?: string; - type?: DescriptionType; - children: React.ReactNode; -}; - -export default function ApiItem(props: ApiItemProps) { - const { title, description, note, children, type, id, ...other } = props; - const descriptionRef = React.useRef(null); - const [isOverflow, setIsOverflow] = React.useState(false); - const [isExtended, setIsExtended] = React.useState(false); - - React.useEffect(() => { - const handler = () => { - if (descriptionRef.current === null) { - return; - } - setIsOverflow(descriptionRef.current.scrollWidth > descriptionRef.current.offsetWidth); - }; - - handler(); - - window.addEventListener('resize', handler); - return () => { - window.removeEventListener('resize', handler); - }; - }, []); - - return ( - -

- - - - - - - {title} - - /g, ' '), - }} - title={(description ?? '') - .replace(/
/g, ' ') - .replace(/ /g, ' ') - .replace(/|/g, '|')} - /> - {isOverflow && ( -
- setIsExtended((prev) => !prev)}> - {isExtended ? ( - - ) : ( - - )} - -
- )} - {note && {note}} -
- {children} - - - ); -} - -ApiItem.propTypes = { - description: PropTypes.string, - note: PropTypes.string, - title: PropTypes.string.isRequired, -}; diff --git a/docs/src/modules/components/ApiPage/CSSList.tsx b/docs/src/modules/components/ApiPage/CSSList.tsx deleted file mode 100644 index 15f38c95f7a180..00000000000000 --- a/docs/src/modules/components/ApiPage/CSSList.tsx +++ /dev/null @@ -1,95 +0,0 @@ -/* eslint-disable react/no-danger */ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { useTranslate } from 'docs/src/modules/utils/i18n'; -import ApiItem from './ApiItem'; - -export type CSSListProps = { - componentStyles: { - classes: string[]; - globalClasses: { [classeKey: string]: string }; - name: null | string; - }; - classDescriptions: { - [classeKey: string]: { - description: string; - nodeName?: string; - conditions?: string; - }; - }; - componentName?: string; -}; - -type HashParams = { componentName?: string; className: string }; - -export type GetPropsToCParams = { - componentName: string; - componentStyles: CSSListProps['componentStyles']; - t: (key: any, options?: {}) => any; - hash?: string; -}; -const getHash = ({ componentName, className }: HashParams) => - `${componentName ? `${componentName}-` : ''}css-${className}`; - -export const getCssToC = ({ componentName, componentStyles, t, hash }: GetPropsToCParams) => - componentStyles.classes.length === 0 - ? [] - : [ - { - text: t('api-docs.css'), - hash: hash ?? 'css', - children: [ - ...componentStyles.classes.map((className) => ({ - text: className, - hash: getHash({ componentName, className }), - children: [], - })), - ], - }, - ]; - -export default function CSSList(props: CSSListProps) { - const { componentStyles, classDescriptions, componentName } = props; - const t = useTranslate(); - - return ( -
- {componentStyles.classes.map((className) => { - const isGlobalStateClass = !!componentStyles.globalClasses[className]; - return ( - -

- - ); - })} -

- ); -} - -CSSList.propTypes = { - classDescriptions: PropTypes.object.isRequired, - componentStyles: PropTypes.object.isRequired, -}; diff --git a/docs/src/modules/components/ApiPage/ClassesList.tsx b/docs/src/modules/components/ApiPage/ClassesList.tsx deleted file mode 100644 index 166c3d75654bb1..00000000000000 --- a/docs/src/modules/components/ApiPage/ClassesList.tsx +++ /dev/null @@ -1,69 +0,0 @@ -/* eslint-disable react/no-danger */ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { useTranslate } from 'docs/src/modules/utils/i18n'; -import ApiItem from './ApiItem'; - -export type ClassesListProps = { - componentClasses: { - classes: string[]; - globalClasses: { [classeKey: string]: string }; - }; - classDescriptions: { - [classeKey: string]: { - description: string; - nodeName?: string; - conditions?: string; - }; - }; - componentName: string; -}; - -export default function ClassesList(props: ClassesListProps) { - const { componentClasses, classDescriptions, componentName } = props; - const t = useTranslate(); - - const list = componentClasses.classes.map((classes) => ({ - classes, - className: - componentClasses.globalClasses[classes] || - `Mui${componentName.replace('Unstyled', '')}-${classes}`, - })); - - const hashPrefix = componentName ? `${componentName}-` : ''; - return ( -
- {list - .sort((a, b) => a.className.localeCompare(b.className)) - .map((item) => { - const isGlobalStateClass = !!componentClasses.globalClasses[item.classes]; - const cssClassName = `.${item.className}`; - return ( - -

- - ); - })} -

- ); -} - -ClassesList.propTypes = { - classDescriptions: PropTypes.object.isRequired, - componentClasses: PropTypes.object.isRequired, - componentName: PropTypes.string.isRequired, -}; diff --git a/docs/src/modules/components/ApiPage/SlotsList.tsx b/docs/src/modules/components/ApiPage/SlotsList.tsx deleted file mode 100644 index b75bb068f7924d..00000000000000 --- a/docs/src/modules/components/ApiPage/SlotsList.tsx +++ /dev/null @@ -1,72 +0,0 @@ -/* eslint-disable react/no-danger */ -import * as React from 'react'; -import { styled } from '@mui/material/styles'; -import { brandingDarkTheme as darkTheme } from 'docs/src/modules/brandingTheme'; -import { useTranslate } from 'docs/src/modules/utils/i18n'; -import ApiItem from './ApiItem'; - -const StyledApiItem = styled(ApiItem)( - ({ theme }) => ({ - '.slot-classname, .slot-default-element': { - ...theme.typography.body2, - fontWeight: theme.typography.fontWeightSemiBold, - marginBottom: 8, - }, - }), - ({ theme }) => ({ - [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { - '& .slot-classname': { - color: `var(--muidocs-palette-grey-300, ${darkTheme.palette.grey[300]})`, - }, - }, - }), -); - -export type SlotsListProps = { - componentSlots: { class: string; name: string; default: string }[]; - slotDescriptions: { [key: string]: string }; - componentName?: string; -}; - -export default function SlotsList(props: SlotsListProps) { - const { componentSlots, slotDescriptions, componentName } = props; - const t = useTranslate(); - - const hashPrefix = componentName ? `${componentName}-` : ''; - return ( -
- {componentSlots.map(({ class: className, name, default: defaultValue }) => { - return ( - - {slotDescriptions[name] && ( -

- )} - {defaultValue && ( -

- {t('api-docs.default')}:{' '} - {defaultValue} -

- )} - {className && ( -

- {t('api-docs.globalClass')}:{' '} - -

- )} - - ); - })} -
- ); -} diff --git a/docs/src/modules/components/ApiPage/list/CSSList.tsx b/docs/src/modules/components/ApiPage/list/CSSList.tsx new file mode 100644 index 00000000000000..0d4b88d557f169 --- /dev/null +++ b/docs/src/modules/components/ApiPage/list/CSSList.tsx @@ -0,0 +1,89 @@ +/* eslint-disable react/no-danger */ +import * as React from 'react'; +import { styled } from '@mui/material/styles'; +import { useTranslate } from 'docs/src/modules/utils/i18n'; +import ExpendableApiItem, { + ApiItemContaier, +} from 'docs/src/modules/components/ApiPage/list/ExpendableApiItem'; +import { brandingDarkTheme as darkTheme } from 'docs/src/modules/brandingTheme'; + +const StyledApiItem = styled(ExpendableApiItem)( + ({ theme }) => ({ + '& p': { + margin: 0, + }, + '& .prop-list-title': { + ...theme.typography.body2, + fontWeight: theme.typography.fontWeightSemiBold, + color: theme.palette.text.primary, + paddingRight: 5, + whiteSpace: 'nowrap', + margin: 0, + }, + '& .prop-list-class': { + margin: 0, + }, + }), + ({ theme }) => ({ + [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { + '& .prop-list-title': { + color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`, + }, + }, + }), +); + +type HashParams = { componentName?: string; className: string }; + +export type CSSFormatedParams = { + componentName?: string; + className: string; + isGlobalStateClass: boolean; + selector: string; + description?: string; +}; + +export const getHash = ({ componentName, className }: HashParams) => + `${componentName ? `${componentName}-` : ''}css-${className}`; + +interface CSSListProps { + classes: CSSFormatedParams[]; + displayOption: 'collapsed' | 'expended'; +} +export default function CSSList(props: CSSListProps) { + const { classes, displayOption } = props; + const t = useTranslate(); + + return ( + + {classes.map((params) => { + const { componentName, className, isGlobalStateClass, selector, description } = params; + + return ( + + {description && ( +

+ )} + {className && ( +

+ {'Rule name'}: + {className} +

+ )} + + ); + })} + + ); +} diff --git a/docs/src/modules/components/ApiPage/list/ClassesList.tsx b/docs/src/modules/components/ApiPage/list/ClassesList.tsx new file mode 100644 index 00000000000000..11e60503118dd7 --- /dev/null +++ b/docs/src/modules/components/ApiPage/list/ClassesList.tsx @@ -0,0 +1,51 @@ +/* eslint-disable react/no-danger */ +import * as React from 'react'; +import { useTranslate } from 'docs/src/modules/utils/i18n'; +import ExpendableApiItem, { + ApiItemContaier, +} from 'docs/src/modules/components/ApiPage/list/ExpendableApiItem'; + +export type ClassesFormatedParams = { + className: string; + isGlobalStateClass: boolean; + cssClassName: string; + description?: string; + componentName: string; +}; + +type ClassesListProps = { + classes: ClassesFormatedParams[]; + displayOption: 'collapsed' | 'expended'; +}; +type HashParams = { componentName?: string; className: string }; + +export const getHash = ({ componentName, className }: HashParams) => + `${componentName ? `${componentName}-` : ''}classes-${className}`; + +export default function ClassesList(props: ClassesListProps) { + const { classes, displayOption } = props; + + const t = useTranslate(); + + return ( + + {classes.map((params) => { + const { className, isGlobalStateClass, cssClassName, description, componentName } = params; + + return ( + + {description &&

} + + ); + })} + + ); +} diff --git a/docs/src/modules/components/ApiPage/list/ExpendableApiItem.tsx b/docs/src/modules/components/ApiPage/list/ExpendableApiItem.tsx new file mode 100644 index 00000000000000..bd8d3e61e1d672 --- /dev/null +++ b/docs/src/modules/components/ApiPage/list/ExpendableApiItem.tsx @@ -0,0 +1,265 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { alpha, styled } from '@mui/material/styles'; +import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; +import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown'; +import { Divider, IconButton, SxProps } from '@mui/material'; +import { + brandingDarkTheme as darkTheme, + brandingLightTheme as lightTheme, +} from 'docs/src/modules/brandingTheme'; + +type DescriptionType = 'props' | 'classes' | 'CSS' | 'slots'; + +const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>( + ({ theme }) => ({ + position: 'relative', + marginBottom: 12, + '& .MuiApi-item-header': { + minHeight: 26, + display: 'flex', + alignItems: 'center', + marginLeft: -38, + marginBottom: 8, + lineHeight: 1.5, + }, + '& .MuiApi-item-link-visual': { + display: 'none', + flexShrink: 0, + border: '1px solid', + borderColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`, + borderRadius: 8, + backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, + height: 26, + width: 26, + textAlign: 'center', + lineHeight: '26px', + '& svg': { + fill: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`, + height: '14px', + width: '14px', + }, + }, + '& .MuiApi-item-title': { + marginLeft: 32, + padding: '2px 6px', + flexShrink: 0, + fontWeight: theme.typography.fontWeightSemiBold, + fontFamily: theme.typography.fontFamilyCode, + fontSize: theme.typography.pxToRem(13), + color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`, + }, + '& .MuiApi-item-content': { + verticalAlign: 'top', + paddingBottom: theme.spacing(2), + p: { marginBottom: theme.spacing(1.5) }, + }, + '& .MuiApi-item-note': { + fontSize: 11, + marginLeft: 6, + letterSpacing: '1px', + textTransform: 'uppercase', + color: `var(--muidocs-palette-success-800, ${lightTheme.palette.success[800]})`, + fontWeight: theme.typography.fontWeightBold, + lineHeight: '24px', + }, + '& .MuiApi-expend-button': {}, + '& hr': { + margin: 0, + }, + [theme.breakpoints.up('lg')]: { + '&:hover, &:target': { + '.MuiApi-item-link-visual': { + display: 'inline-block', + }, + '.MuiApi-item-title': { + marginLeft: 6, + }, + '.MuiApi-item-link-visual:hover': { + cursor: 'pointer', + backgroundColor: alpha(lightTheme.palette.primary[100], 0.4), + borderColor: `var(--muidocs-palette-primary-100, ${lightTheme.palette.primary[100]})`, + '& svg': { + fill: `var(--muidocs-palette-primary-main, ${lightTheme.palette.primary.main})`, + }, + }, + }, + '&:target': { + '.MuiApi-item-link-visual': { + '&>svg': { + transform: 'rotate(90deg) translateX(-0.5px) translateY(0.1px)', + }, + }, + }, + }, + '& .MuiAlert-standardWarning': { + padding: '6px 12px', + fontWeight: theme.typography.fontWeightMedium, + border: '1px solid', + borderColor: `var(--muidocs-palette-warning-300, ${lightTheme.palette.warning[300]})`, + borderRadius: 12, + backgroundColor: `var(--muidocs-palette-warning-50, ${lightTheme.palette.warning[50]})`, + color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, + marginBottom: 16, + '.MuiAlert-icon': { + display: 'flex', + alignItems: 'center', + fill: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, + }, + }, + '& code.Api-code': { + ...theme.typography.caption, + fontFamily: theme.typography.fontFamilyCode, + fontWeight: theme.typography.fontWeightRegular, + padding: '1px 4px', + border: '1px solid', + borderColor: alpha(darkTheme.palette.primary[100], 0.5), + backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, + }, + }), + ({ theme }) => ({ + [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { + '& .MuiApi-item-header': { + '&>span, &>div': { + borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, + }, + '& .MuiApi-item-title': { + color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`, + }, + '& .MuiApi-item-link-visual': { + borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, + backgroundColor: alpha(darkTheme.palette.primary[900], 0.5), + '& svg': { + fill: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`, + }, + }, + '&:hover, &:target': { + '.MuiApi-item-link-visual:hover': { + borderColor: `var(--muidocs-palette-primary-900, ${darkTheme.palette.primary[900]})`, + backgroundColor: alpha(darkTheme.palette.primary[900], 0.6), + '& svg': { + fill: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`, + }, + }, + }, + '& .MuiApi-item-description': { + color: `var(--muidocs-palette-grey-500, ${darkTheme.palette.grey[500]})`, + }, + '& .MuiApi-item-note': { + color: `var(--muidocs-palette-success-400, ${darkTheme.palette.success[400]})`, + }, + }, + '& .MuiAlert-standardWarning': { + borderColor: alpha(darkTheme.palette.warning[800], 0.3), + backgroundColor: alpha(darkTheme.palette.warning[800], 0.2), + color: `var(--muidocs-palette-warning-100, ${darkTheme.palette.warning[100]})`, + '.MuiAlert-icon svg': { + fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`, + }, + }, + '& code.Api-code': { + borderColor: alpha(darkTheme.palette.primary[400], 0.1), + backgroundColor: alpha(darkTheme.palette.primary[900], 0.4), + }, + }, + }), +); + +export type ApiItemProps = { + id: string; + title: string; + description?: string; + note?: string; + type?: DescriptionType; + isExtendable?: boolean; + className?: string; + children?: React.ReactNode; + sx?: SxProps; + displayOption?: 'collapsed' | 'expended'; +}; + +function ApiItem(props: ApiItemProps) { + const { + title, + description, + note, + children, + type, + id, + isExtendable = true, + className, + displayOption, + ...other + } = props; + + const [isExtended, setIsExtended] = React.useState(() => displayOption === 'expended'); + + React.useEffect(() => { + setIsExtended(displayOption === 'expended'); + }, [displayOption]); + return ( + +

+ { + navigator.clipboard.writeText( + `${window.location.origin}${window.location.pathname}#${id}`, + ); + }} + > + + + + + + + {title} + + {note && {note}} + {isExtendable && ( + setIsExtended((prev) => !prev)} + className="MuiApi-expend-button" + size="small" + sx={{ p: 0, ml: 'auto' }} + > + {isExtended ? ( + + ) : ( + + )} + + )} +
+ {isExtended &&
{isExtended && children}
} + + + ); +} + +ApiItem.propTypes = { + description: PropTypes.string, + note: PropTypes.string, + title: PropTypes.string.isRequired, +}; + +export const ApiItemContaier = styled('div')({ + width: '100%', + display: 'flex', + flexDirection: 'column', +}); + +export default ApiItem; diff --git a/docs/src/modules/components/ApiPage/list/PropertiesList.tsx b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx new file mode 100644 index 00000000000000..7ed55c9addc308 --- /dev/null +++ b/docs/src/modules/components/ApiPage/list/PropertiesList.tsx @@ -0,0 +1,278 @@ +/* eslint-disable react/no-danger */ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { styled } from '@mui/material/styles'; +import Alert from '@mui/material/Alert'; +import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; +import { useTranslate } from 'docs/src/modules/utils/i18n'; +import { + brandingDarkTheme as darkTheme, + brandingLightTheme as lightTheme, +} from 'docs/src/modules/brandingTheme'; +import ExpendableApiItem, { + ApiItemContaier, +} from 'docs/src/modules/components/ApiPage/list/ExpendableApiItem'; + +const StyledApiItem = styled(ExpendableApiItem)( + ({ theme }) => ({ + '& .prop-list-description': { + marginBottom: 10, + }, + '& .prop-list-additional-info': { + display: 'flex', + flexDirection: 'column', + gap: 8, + '&>p': { + margin: 0, + }, + '& .prop-list-title': { + ...theme.typography.body2, + fontWeight: theme.typography.fontWeightSemiBold, + color: theme.palette.text.primary, + paddingRight: 5, + whiteSpace: 'nowrap', + margin: 0, + }, + '& .default-value': { + fontSize: theme.typography.pxToRem(12), + }, + }, + '& .prop-list-default-props': { + ...theme.typography.body2, + fontWeight: theme.typography.fontWeightSemiBold, + }, + '& .prop-list-signature': { + p: { + ...theme.typography.body2, + fontWeight: theme.typography.fontWeightSemiBold, + marginBottom: 8, + }, + ul: { + paddingLeft: 24, + marginTop: 2, + marginBottom: 0, + }, + '&>code': { + borderRadius: 8, + padding: 12, + width: '100%', + marginBottom: 8, + color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[50]})`, + border: '1px solid', + borderColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`, + backgroundColor: `var(--muidocs-palette-primaryDark-800, ${lightTheme.palette.primaryDark[800]})`, + }, + }, + }), + ({ theme }) => ({ + [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { + '& .prop-list-additional-info': { + '& .prop-list-title': { + p: { + color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`, + }, + }, + }, + + '& .prop-list-default-props': { + color: `var(--muidocs-palette-grey-300, ${darkTheme.palette.grey[300]})`, + }, + }, + }), +); + +function PropDescription({ description }: { description: string }) { + const isUlPresent = description.includes('
    '); + + const ComponentToRender = isUlPresent ? 'div' : 'p'; + + return ( + + ); +} + +PropDescription.propTypes = { + description: PropTypes.string.isRequired, +}; + +export const getHash = ({ componentName, propName }: { componentName: string; propName: string }) => + `${componentName ? `${componentName}-` : ''}prop-${propName}`; + +export interface PropDescriptionParams { + componentName: string; + propName: string; + description?: string; + requiresRef?: string; + isOptional?: boolean; + isRequired?: boolean; + isDeprecated?: boolean; + deprecationInfo?: string; + typeName: string; + propDefault?: string; + additionalInfo: string[]; + signature?: string; + signatureArgs?: { argName: string; argDescription?: string }[]; + signatureReturnDescription?: string; +} + +interface PropertiesListProps { + properties: PropDescriptionParams[]; + displayOption: 'collapsed' | 'expended'; +} + +export default function PropertiesList(props: PropertiesListProps) { + const { properties, displayOption } = props; + const t = useTranslate(); + return ( + + {properties.map((params) => { + const { + componentName, + propName, + description, + requiresRef, + isOptional, + isRequired, + isDeprecated, + deprecationInfo, + typeName, + propDefault, + additionalInfo, + signature, + signatureArgs, + signatureReturnDescription, + } = params; + return ( + + {description && } + + {requiresRef && ( + } + sx={{ + '& .MuiAlert-icon': { + height: 'fit-content', + py: '8px', + }, + }} + > + + + )} + + {additionalInfo.map((key) => ( +

    + ))} + {isDeprecated && ( + } + sx={{ + '& .MuiAlert-icon': { + height: 'fit-content', + py: '8px', + }, + }} + > + {t('api-docs.deprecated')} + {deprecationInfo && ( + + {' - '} + /g, '') + .replace(/<\/code>/g, ''), + }} + /> + + )} + + )} +

    + {typeName && ( +

    + {t('api-docs.type')}: + |/g, ' |'), + }} + /> +

    + )} + {propDefault && ( +

    + {t('api-docs.default')}: + {propDefault} +

    + )} + {signature && ( +
    + {t('api-docs.signature')}: + +
    + + + {signatureArgs && ( +
    +
      + {signatureArgs.map(({ argName, argDescription }) => ( +
    • ${argName} ${argDescription}`, + }} + /> + ))} +
    +
    + )} + {signatureReturnDescription && ( +

    + {t('api-docs.returns')} + +

    + )} +
    +
    + )} +
    +     + ); + })} +     + ); +} diff --git a/docs/src/modules/components/ApiPage/list/SlotsList.tsx b/docs/src/modules/components/ApiPage/list/SlotsList.tsx new file mode 100644 index 00000000000000..1e1b33b297b769 --- /dev/null +++ b/docs/src/modules/components/ApiPage/list/SlotsList.tsx @@ -0,0 +1,112 @@ +/* eslint-disable react/no-danger */ +import * as React from 'react'; +import { styled, alpha } from '@mui/material/styles'; +import { + brandingLightTheme as lightTheme, + brandingDarkTheme as darkTheme, +} from 'docs/src/modules/brandingTheme'; +import { useTranslate } from 'docs/src/modules/utils/i18n'; +import ExpendableApiItem, { + ApiItemContaier, +} from 'docs/src/modules/components/ApiPage/list/ExpendableApiItem'; + +const StyledApiItem = styled(ExpendableApiItem)( + ({ theme }) => ({ + '.slot-classname, .slot-default-element': { + marginBottom: 8, + '& .prop-list-title': { + ...theme.typography.body2, + fontWeight: theme.typography.fontWeightSemiBold, + color: theme.palette.text.primary, + }, + }, + '& .default-slot-value': { + ...theme.typography.caption, + fontFamily: theme.typography.fontFamilyCode, + fontWeight: theme.typography.fontWeightRegular, + }, + '& .global-class-value': { + ...theme.typography.caption, + fontFamily: theme.typography.fontFamilyCode, + fontWeight: theme.typography.fontWeightRegular, + borderColor: alpha(darkTheme.palette.primary[100], 0.5), + backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, + }, + }), + ({ theme }) => ({ + [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { + '& .global-class-value': { + borderColor: alpha(darkTheme.palette.primary[400], 0.1), + backgroundColor: alpha(darkTheme.palette.primary[900], 0.4), + }, + }, + }), +); + +export type SlotsFormatedParams = { + className: string; + componentName?: string; + description?: string; + name: string; + defaultValue?: string; +}; + +type HashParams = { componentName?: string; className: string }; + +export const getHash = ({ componentName, className }: HashParams) => + `${componentName ? `${componentName}-` : ''}css-${className}`; + +interface SlotsListProps { + slots: SlotsFormatedParams[]; + displayOption: 'collapsed' | 'expended'; +} + +export default function SlotsList(props: SlotsListProps) { + const { slots, displayOption } = props; + const t = useTranslate(); + + return ( + + {slots.map((params) => { + const { description, className, name, defaultValue, componentName } = params; + + const isExtendable = description || defaultValue || className; + + return ( + + {description && ( +

    + )} + {className && ( +

    + {t('api-docs.globalClass')}:{' '} + +

    + )} + {defaultValue && ( +

    + {t('api-docs.default')}:{' '} + {defaultValue} +

    + )} +     + ); + })} +     + ); +} diff --git a/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx new file mode 100644 index 00000000000000..8801a653da8eeb --- /dev/null +++ b/docs/src/modules/components/ApiPage/sections/ClassesSection.tsx @@ -0,0 +1,97 @@ +/* eslint-disable react/no-danger */ +import * as React from 'react'; +import { useTranslate } from 'docs/src/modules/utils/i18n'; +import Box from '@mui/material/Box'; +import ToggleDisplayOption, { + API_LAYOUT_STORAGE_KEYS, + useApiPageOption, +} from 'docs/src/modules/components/ApiPage/sections/ToggleDisplayOption'; +import ClassesList from 'docs/src/modules/components/ApiPage/list/ClassesList'; +import ClassesTable from 'docs/src/modules/components/ApiPage/table/ClassesTable'; + +type ComponentClasses = { + classes: string[]; + globalClasses: { [classeKey: string]: string }; +}; +type ClassDescription = { + [classeKey: string]: { + description: string; + nodeName?: string; + conditions?: string; + }; +}; +export type ClassesSectionProps = { + componentClasses: ComponentClasses; + classDescriptions: ClassDescription; + componentName: string; + spreadHint?: string; + title: string; + titleHash: string; + level?: 'h2' | 'h3' | 'h4'; +}; + +export default function ClassesSection(props: ClassesSectionProps) { + const { + componentClasses, + classDescriptions, + componentName, + spreadHint, + title = 'api-docs.classes', + titleHash = 'classes', + level: Level = 'h2', + } = props; + const t = useTranslate(); + + const [displayOption, setDisplayOption] = useApiPageOption(API_LAYOUT_STORAGE_KEYS.classes); + + if (!componentClasses?.classes || componentClasses.classes.length === 0) { + return null; + } + + const formatedClasses = componentClasses.classes + .map((classKey) => { + const className = + componentClasses.globalClasses[classKey] || + `Mui${componentName.replace('Unstyled', '')}-${classKey}`; + + const isGlobalStateClass = !!componentClasses.globalClasses[classKey]; + const cssClassName = `.${className}`; + + const description = + classDescriptions[classKey] && + classDescriptions[classKey].description + .replace(/{{conditions}}/, classDescriptions[classKey].conditions!) + .replace(/{{nodeName}}/, classDescriptions[classKey].nodeName!); + return { className, isGlobalStateClass, cssClassName, description, componentName }; + }) + .sort((a, b) => a.className.localeCompare(b.className)); + + return ( + + + + {t(title)} + + + + + + + + + + {spreadHint &&

    } + + {displayOption === 'table' ? ( + + ) : ( + + )} + + ); +} diff --git a/docs/src/modules/components/ApiPage/sections/CssSection.tsx b/docs/src/modules/components/ApiPage/sections/CssSection.tsx new file mode 100644 index 00000000000000..837633a375cd3a --- /dev/null +++ b/docs/src/modules/components/ApiPage/sections/CssSection.tsx @@ -0,0 +1,137 @@ +/* eslint-disable react/no-danger */ +import * as React from 'react'; +import { useTranslate } from 'docs/src/modules/utils/i18n'; +import Box from '@mui/material/Box'; +import ToggleDisplayOption, { + API_LAYOUT_STORAGE_KEYS, + useApiPageOption, +} from 'docs/src/modules/components/ApiPage/sections/ToggleDisplayOption'; +import CSSList, { getHash } from 'docs/src/modules/components/ApiPage/list/CSSList'; +import CSSTable from 'docs/src/modules/components/ApiPage/table/CSSTable'; + +type ComponentStyles = { + classes: string[]; + globalClasses: { [classeKey: string]: string }; + name: null | string; +}; +type ClassDescription = { + [classeKey: string]: { + description: string; + nodeName?: string; + conditions?: string; + }; +}; + +export type GetCssToCParams = { + componentName: string; + componentStyles: ComponentStyles; + t: (key: any, options?: {}) => any; + hash?: string; +}; + +export const getCssToC = ({ componentName, componentStyles, t, hash }: GetCssToCParams) => + componentStyles.classes.length === 0 + ? [] + : [ + { + text: t('api-docs.css'), + hash: hash ?? 'css', + children: [ + ...componentStyles.classes.map((className) => ({ + text: className, + hash: getHash({ componentName, className }), + children: [], + })), + ], + }, + ]; + +export type CSSSectionProps = { + componentStyles: ComponentStyles; + classDescriptions: ClassDescription; + componentName?: string; + spreadHint?: string; + title: string; + titleHash: string; + level?: 'h2' | 'h3' | 'h4'; + styleOverridesLink: string; +}; + +export default function CSSSection(props: CSSSectionProps) { + const { + componentStyles, + classDescriptions, + componentName, + spreadHint, + styleOverridesLink, + title = 'api-docs.css', + titleHash = 'css', + level: Level = 'h2', + } = props; + const t = useTranslate(); + + const [displayOption, setDisplayOption] = useApiPageOption(API_LAYOUT_STORAGE_KEYS.css); + + if (!componentStyles?.classes || componentStyles.classes.length === 0) { + return null; + } + + const formatedClasses = componentStyles.classes.map((className) => { + const isGlobalStateClass = !!componentStyles.globalClasses[className]; + const selector = `.${ + componentStyles.globalClasses[className] || `${componentStyles.name}-${className}` + }`; + const description = + classDescriptions[className] && + classDescriptions[className].description + .replace(/{{conditions}}/, classDescriptions[className].conditions ?? '{{conditions}}') + .replace(/{{nodeName}}/, classDescriptions[className].nodeName ?? '{{nodeName}}'); + + return { + componentName, + className, + isGlobalStateClass, + selector, + description, + }; + }); + + return ( + + + + {t(title)} + + + + + + + + + + {spreadHint &&

    } + + {displayOption === 'table' ? ( + + ) : ( + + )} +
    +

    + + + ); +} diff --git a/docs/src/modules/components/ApiPage/sections/PropertiesSection.js b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js new file mode 100644 index 00000000000000..8d2ca4615fcc02 --- /dev/null +++ b/docs/src/modules/components/ApiPage/sections/PropertiesSection.js @@ -0,0 +1,144 @@ +/* eslint-disable react/no-danger */ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import Box from '@mui/material/Box'; +import { useTranslate } from 'docs/src/modules/utils/i18n'; +import ToggleDisplayOption, { + API_LAYOUT_STORAGE_KEYS, + useApiPageOption, +} from 'docs/src/modules/components/ApiPage/sections/ToggleDisplayOption'; +import PropertiesList, { getHash } from 'docs/src/modules/components/ApiPage/list/PropertiesList'; +import PropertiesTable from 'docs/src/modules/components/ApiPage/table/PropertiesTable'; + +export const getPropsToC = ({ + componentName, + componentProps, + inheritance, + themeDefaultProps, + t, + hash, +}) => ({ + text: t('api-docs.props'), + hash: hash ?? 'props', + children: [ + ...Object.entries(componentProps) + .filter(([, propData]) => propData.description !== '@ignore') + .map(([propName]) => ({ + text: propName, + hash: getHash({ propName, componentName }), + children: [], + })), + ...(inheritance + ? [{ text: t('api-docs.inheritance'), hash: 'inheritance', children: [] }] + : []), + ...(themeDefaultProps + ? [{ text: t('api-docs.themeDefaultProps'), hash: 'theme-default-props', children: [] }] + : []), + ], +}); + +export default function PropertiesSection(props) { + const { + properties, + propertiesDescriptions, + componentName = '', + showOptionalAbbr = false, + title = 'api-docs.props', + titleHash = 'props', + level: Level = 'h2', + spreadHint, + } = props; + const t = useTranslate(); + + const [displayOption, setDisplayOption] = useApiPageOption(API_LAYOUT_STORAGE_KEYS.props); + const formatedProperties = Object.entries(properties) + .filter(([, propData]) => propData.description !== '@ignore') + .map(([propName, propData]) => { + const isRequired = propData.required && !showOptionalAbbr; + const isOptional = !propData.required && showOptionalAbbr; + + const isDeprecated = propData.deprecated; + const deprecationInfo = propData.deprecationInfo + ?.replace(//g, '') + ?.replace(/<\/code>/g, ''); + + const typeName = propData.type?.description || propData.type.name; + const propDefault = propData.default; + const propDescription = propertiesDescriptions[propName]; + + const additionalInfo = [ + 'cssApi', + 'sx', + 'slotsApi', + 'joy-size', + 'joy-color', + 'joy-variant', + ].filter((key) => propData.additionalInfo?.[key]); + + const signature = propData.signature?.type; + const signatureArgs = propData.signature?.describedArgs?.map((argName) => ({ + argName, + argDescription: propertiesDescriptions[propName].typeDescriptions[argName], + })); + const signatureReturnDescription = + propData.signature?.returned && + propertiesDescriptions[propName].typeDescriptions[propData.signature.returned]; + + return { + componentName, + propName, + description: propDescription?.description, + requiresRef: propDescription?.requiresRef, + isOptional, + isRequired, + isDeprecated, + deprecationInfo, + typeName, + propDefault, + additionalInfo, + signature, + signatureArgs, + signatureReturnDescription, + }; + }); + + return ( + + + + {t(title)} + + + + + + + + + + {spreadHint &&

    } + + {displayOption === 'table' ? ( + + ) : ( + + )} + + ); +} + +PropertiesSection.propTypes = { + componentName: PropTypes.string, + level: PropTypes.string, + properties: PropTypes.object.isRequired, + propertiesDescriptions: PropTypes.object.isRequired, + showOptionalAbbr: PropTypes.bool, + spreadHint: PropTypes.string, + title: PropTypes.string, + titleHash: PropTypes.string, +}; diff --git a/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx new file mode 100644 index 00000000000000..13dbaa19e763d7 --- /dev/null +++ b/docs/src/modules/components/ApiPage/sections/SlotsSection.tsx @@ -0,0 +1,79 @@ +/* eslint-disable react/no-danger */ +import * as React from 'react'; +import Box from '@mui/material/Box'; +import { useTranslate } from 'docs/src/modules/utils/i18n'; +import ToggleDisplayOption, { + API_LAYOUT_STORAGE_KEYS, + useApiPageOption, +} from 'docs/src/modules/components/ApiPage/sections/ToggleDisplayOption'; +import SlotsList from 'docs/src/modules/components/ApiPage/list/SlotsList'; +import SlotsTable from 'docs/src/modules/components/ApiPage/table/SlotsTable'; + +export type SlotsSectionProps = { + componentSlots: { class: string; name: string; default: string }[]; + slotDescriptions: { [key: string]: string }; + componentName?: string; + title?: string; + titleHash?: string; + level?: 'h2' | 'h3' | 'h4'; + spreadHint?: string; +}; + +export default function SlotsSection(props: SlotsSectionProps) { + const { + componentSlots, + slotDescriptions, + componentName, + title = 'api-docs.slots', + titleHash = 'slots', + level: Level = 'h2', + spreadHint, + } = props; + const t = useTranslate(); + + const [displayOption, setDisplayOption] = useApiPageOption(API_LAYOUT_STORAGE_KEYS.slots); + + if (!componentSlots || componentSlots.length === 0) { + return null; + } + + const formatedSlots = componentSlots?.map(({ class: className, name, default: defaultValue }) => { + const description = slotDescriptions[name]; + return { + description, + className, + name, + defaultValue, + componentName, + }; + }); + + return ( + + + + {t(title)} + + + + + + + + + + {spreadHint &&

    } + + {displayOption === 'table' ? ( + + ) : ( + + )} + + ); +} diff --git a/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx b/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx new file mode 100644 index 00000000000000..b114ba162bbf62 --- /dev/null +++ b/docs/src/modules/components/ApiPage/sections/ToggleDisplayOption.tsx @@ -0,0 +1,174 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import Tooltip, { TooltipProps } from '@mui/material/Tooltip'; +import ToggleButtonGroup from '@mui/material/ToggleButtonGroup'; +import ToggleButton, { ToggleButtonProps } from '@mui/material/ToggleButton'; +import CalendarViewDayRoundedIcon from '@mui/icons-material/CalendarViewDayRounded'; +import TableChartRoundedIcon from '@mui/icons-material/TableChartRounded'; +import ReorderRoundedIcon from '@mui/icons-material/ReorderRounded'; + +export type ApiDisplayOptions = 'collapsed' | 'expended' | 'table'; + +const options: ApiDisplayOptions[] = ['collapsed', 'expended', 'table']; + +export const API_LAYOUT_STORAGE_KEYS = { + default: 'apiPage_default', + slots: 'apiPage_slots', + props: 'apiPage_props', + css: 'apiPage_css', + classes: 'apiPage_classes', +} as const; + +const getRandomOption = () => { + // A default layout is saved in localstorage at first render to make sure all section start with the same layout. + const savedDefaultOption = localStorage.getItem( + API_LAYOUT_STORAGE_KEYS.default, + ) as null | ApiDisplayOptions; + + if (savedDefaultOption !== null && options.includes(savedDefaultOption)) { + return savedDefaultOption; + } + + const randomOption = options[Math.floor(options.length * Math.random())]; + try { + localStorage.setItem(API_LAYOUT_STORAGE_KEYS.default, randomOption); + } catch (error) { + // Do nothing + } + return randomOption; +}; + +export function useApiPageOption( + storageKey: string, +): [ApiDisplayOptions, (newOption: ApiDisplayOptions) => void] { + const [option, setOption] = React.useState(options[0]); + + const updateOption = React.useCallback( + (newOption: ApiDisplayOptions) => { + try { + localStorage.setItem(storageKey, newOption); + } catch (error) { + // Do nothing + } + setOption(newOption); + }, + [storageKey], + ); + + React.useEffect(() => { + try { + const savedOption = localStorage.getItem(storageKey); + if (savedOption !== null) { + setOption(savedOption as ApiDisplayOptions); + return; + } + + const randomOption = getRandomOption(); + updateOption(randomOption); + } catch (error) { + // do nothing + } + }, [storageKey, updateOption]); + + return [option, updateOption]; +} + +export function getApiPageLayout() { + const rep: { [key: string]: string } = {}; + + Object.values(API_LAYOUT_STORAGE_KEYS).forEach((localStorageKey) => { + try { + const savedOption = localStorage.getItem(localStorageKey); + rep[localStorageKey] = savedOption || 'none'; + } catch { + rep[localStorageKey] = 'none'; + } + }); + return rep; +} + +// Fix Toggle buton highlight (taken from https://github.com/mui/material-ui/issues/18091) +type TooltipToggleButtonProps = ToggleButtonProps & { + /** + * The title passed to the Tooltip + */ + title: string; + TooltipProps?: Omit; +}; + +// Catch props and forward to ToggleButton +const TooltipToggleButton: React.FC = React.forwardRef( + ({ title, TooltipProps: tooltipProps, ...props }, ref) => { + return ( + + + + ); + }, +); + +TooltipToggleButton.propTypes = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- + title: PropTypes.string.isRequired, + TooltipProps: PropTypes.object, +}; + +interface ToggleDisplayOptionProps { + displayOption: ApiDisplayOptions; + setDisplayOption: (newValue: ApiDisplayOptions) => void; +} + +export default function ToggleDisplayOption(props: ToggleDisplayOptionProps) { + const { displayOption, setDisplayOption } = props; + + const handleAlignment = ( + event: React.MouseEvent, + newDisplayOption: ApiDisplayOptions | null, + ) => { + if (newDisplayOption === null) { + return; + } + setDisplayOption(newDisplayOption); + }; + + return ( + + + + + + + + + + + + ); +} diff --git a/docs/src/modules/components/ApiPage/table/CSSTable.tsx b/docs/src/modules/components/ApiPage/table/CSSTable.tsx new file mode 100644 index 00000000000000..987eb67cea3cfa --- /dev/null +++ b/docs/src/modules/components/ApiPage/table/CSSTable.tsx @@ -0,0 +1,120 @@ +/* eslint-disable react/no-danger */ +import * as React from 'react'; +import { styled, alpha } from '@mui/material/styles'; +import { + brandingDarkTheme as darkTheme, + brandingLightTheme as lightTheme, +} from 'docs/src/modules/brandingTheme'; +import { CSSFormatedParams, getHash } from 'docs/src/modules/components/ApiPage/list/CSSList'; + +const StyledTable = styled('table')( + ({ theme }) => ({ + '& .table-headers': { + paddingTop: 8, + paddingBottom: 8, + textAlign: 'left', + fontWeight: theme.typography.fontWeightSemiBold, + fontSize: theme.typography.pxToRem(14), + }, + '& tr': { + '&:hover': { + backgroundColor: alpha(darkTheme.palette.grey[50], 0.5), + }, + }, + '& .MuiApi-table-rule-name': { + fontFamily: theme.typography.fontFamilyCode, + fontWeight: theme.typography.fontWeightSemiBold, + fontSize: theme.typography.pxToRem(13), + color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`, + }, + '& .MuiApi-table-ruleName': { + padding: '0 4px', + borderRadius: 5, + border: '1px solid', + borderColor: alpha(darkTheme.palette.primary[100], 0.5), + backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, + ...theme.typography.caption, + fontFamily: theme.typography.fontFamilyCode, + fontWeight: theme.typography.fontWeightRegular, + color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, + }, + '& .MuiApi-table-global-class': { + fontWeight: theme.typography.fontWeightSemiBold, + fontFamily: theme.typography.fontFamilyCode, + fontSize: theme.typography.pxToRem(13), + color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`, + }, + '& .MuiCssTable-description-column': { + width: '50%', + paddingRight: 8, + }, + }), + ({ theme }) => ({ + [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { + '& tr': { + '&:hover': { + backgroundColor: alpha(darkTheme.palette.primaryDark[800], 0.5), + }, + }, + '& .MuiApi-table-ruleName': { + color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`, + borderColor: alpha(darkTheme.palette.primary[400], 0.1), + backgroundColor: alpha(darkTheme.palette.primary[900], 0.4), + }, + '& .MuiApi-table-global-class': { + color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`, + }, + }, + }), +); + +interface CSSTableProps { + classes: CSSFormatedParams[]; +} + +export default function CSSTable(props: CSSTableProps) { + const { classes } = props; + return ( + + + + Global class + Rule name + Description + + + + {classes.map((params) => { + const { componentName, className, selector, description } = params; + + return ( + + + { + + } + + + {className} + + + + + + + ); + })} + + + ); +} diff --git a/docs/src/modules/components/ApiPage/table/ClassesTable.tsx b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx new file mode 100644 index 00000000000000..dc4b715a81e2ba --- /dev/null +++ b/docs/src/modules/components/ApiPage/table/ClassesTable.tsx @@ -0,0 +1,86 @@ +/* eslint-disable react/no-danger */ +import * as React from 'react'; +import { styled, alpha } from '@mui/material/styles'; +import { + brandingDarkTheme as darkTheme, + brandingLightTheme as lightTheme, +} from 'docs/src/modules/brandingTheme'; +import { + ClassesFormatedParams, + getHash, +} from 'docs/src/modules/components/ApiPage/list/ClassesList'; + +const StyledTable = styled('table')( + ({ theme }) => ({ + '& .table-headers': { + paddingTop: 8, + paddingBottom: 8, + textAlign: 'left', + fontWeight: theme.typography.fontWeightSemiBold, + fontSize: theme.typography.pxToRem(14), + }, + '& tr': { + '&:hover': { + backgroundColor: alpha(darkTheme.palette.grey[50], 0.5), + }, + }, + '& .rule-name': { + flexShrink: 0, + fontWeight: theme.typography.fontWeightSemiBold, + fontFamily: theme.typography.fontFamilyCode, + fontSize: theme.typography.pxToRem(13), + color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`, + }, + }), + ({ theme }) => ({ + [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { + '& tr': { + '&:hover': { + backgroundColor: alpha(darkTheme.palette.primaryDark[800], 0.5), + }, + }, + '& .rule-name': { + color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`, + }, + }, + }), +); + +interface ClassesTableProps { + classes: ClassesFormatedParams[]; +} + +export default function ClassesTable(props: ClassesTableProps) { + const { classes } = props; + return ( + + + + Rule name + Description + + + + {classes.map((params) => { + const { className, cssClassName, description, componentName } = params; + + return ( + + + {cssClassName} + + + + + + ); + })} + + + ); +} diff --git a/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx new file mode 100644 index 00000000000000..6509e32a34949d --- /dev/null +++ b/docs/src/modules/components/ApiPage/table/PropertiesTable.tsx @@ -0,0 +1,336 @@ +/* eslint-disable react/no-danger */ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { styled, alpha } from '@mui/material/styles'; +import Alert from '@mui/material/Alert'; +import WarningRoundedIcon from '@mui/icons-material/WarningRounded'; +import { useTranslate } from 'docs/src/modules/utils/i18n'; +import { + brandingDarkTheme as darkTheme, + brandingLightTheme as lightTheme, +} from 'docs/src/modules/brandingTheme'; +import { PropDescriptionParams } from 'docs/src/modules/components/ApiPage/list/PropertiesList'; + +const StyledTable = styled('table')( + ({ theme }) => ({ + '& .table-headers': { + paddingTop: 8, + paddingBottom: 8, + textAlign: 'left', + fontWeight: theme.typography.fontWeightSemiBold, + fontSize: theme.typography.pxToRem(14), + }, + '& tr': { + '&:hover': { + backgroundColor: alpha(darkTheme.palette.grey[50], 0.5), + }, + }, + '& .type-column': { + minWidth: '20%', + }, + '& .default-column': { + minWidth: '20%', + }, + '& .MuiApi-table-item-title': { + minWidth: '20%', + fontFamily: theme.typography.fontFamilyCode, + fontWeight: theme.typography.fontWeightSemiBold, + fontSize: theme.typography.pxToRem(13), + color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`, + }, + '& .MuiApi-table-item-type': { + padding: '0 4px', + borderRadius: 5, + border: '1px solid', + borderColor: alpha(darkTheme.palette.primary[100], 0.5), + backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, + ...theme.typography.caption, + fontFamily: theme.typography.fontFamilyCode, + fontWeight: theme.typography.fontWeightRegular, + }, + '& .MuiApi-table-item-default': { + padding: '0 4px', + borderRadius: 5, + color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, + backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`, + border: '1px solid', + borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`, + ...theme.typography.caption, + fontFamily: theme.typography.fontFamilyCode, + fontWeight: theme.typography.fontWeightRegular, + }, + '& .MuiPropTable-description-column': { + width: '40%', + paddingRight: 8, + '& .prop-list-description': { + marginBottom: 0, + }, + '& .prop-list-additional-description': { + marginTop: 12, + marginBottom: 0, + }, + '& .refAlert': { + padding: '2px 12px', + marginTop: 12, + color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, + backgroundColor: alpha(lightTheme.palette.warning[50], 0.5), + borderColor: `var(--muidocs-palette-warning-200, ${lightTheme.palette.warning[200]})`, + '& strong': { + color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, + }, + '&>svg': { + fill: `var(--muidocs-palette-warning-600, ${lightTheme.palette.warning[600]})`, + }, + '& a': { + color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, + textDecorationColor: alpha(lightTheme.palette.warning.main, 0.4), + '&:hover': { + textDecorationColor: 'inherit', + }, + }, + }, + }, + '& .prop-list-signature': { + marginTop: 12, + marginBottom: 0, + display: 'flex', + flexDirection: 'column', + gap: 16, + '& .prop-list-title': { + fontWeight: theme.typography.fontWeightMedium, + }, + }, + }), + ({ theme }) => ({ + [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { + '& tr': { + '&:hover': { + backgroundColor: alpha(darkTheme.palette.primaryDark[800], 0.5), + }, + }, + '& .MuiApi-table-item-title': { + color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`, + }, + '& .MuiApi-table-item-type': { + color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`, + borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, + backgroundColor: alpha(darkTheme.palette.primary[900], 0.5), + }, + '& .MuiApi-table-item-default': { + color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`, + backgroundColor: `var(--muidocs-palette-grey-900, ${darkTheme.palette.grey[900]})`, + borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, + }, + '& .prop-list-signature': { + '& .prop-list-title': { + color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`, + }, + }, + '& .MuiPropTable-description-column': { + '& .refAlert': { + color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`, + backgroundColor: alpha(darkTheme.palette.warning[700], 0.15), + borderColor: alpha(darkTheme.palette.warning[600], 0.3), + '& strong': { + color: `var(--muidocs-palette-warning-200, ${darkTheme.palette.warning[200]})`, + }, + '&>svg': { + fill: `var(--muidocs-palette-warning-400, ${darkTheme.palette.warning[400]})`, + }, + '& a': { + color: `var(--muidocs-palette-warning-100, ${darkTheme.palette.warning[100]})`, + }, + }, + }, + }, + }), +); + +function PropDescription({ description }: { description: string }) { + const isUlPresent = description.includes('

      '); + + const ComponentToRender = isUlPresent ? 'div' : 'p'; + + return ( + + ); +} + +PropDescription.propTypes = { + description: PropTypes.string.isRequired, +}; + +export const getHash = ({ componentName, propName }: { componentName: string; propName: string }) => + `${componentName ? `${componentName}-` : ''}prop-${propName}`; + +interface PropertiesTableProps { + properties: PropDescriptionParams[]; +} + +export default function PropertiesTable(props: PropertiesTableProps) { + const { properties } = props; + const t = useTranslate(); + return ( + + + + Name + Type + Default + Description + + + + {properties.map((params) => { + const { + componentName, + propName, + description, + requiresRef, + isOptional, + isRequired, + isDeprecated, + deprecationInfo, + typeName, + propDefault, + additionalInfo, + signature, + signatureArgs, + signatureReturnDescription, + } = params; + + return ( + + + {propName} + {isRequired ? '*' : ''} + {isOptional ? '?' : ''} + + + { + + } + + + {propDefault} + + + {description && } + {requiresRef && ( + } + sx={{ + alignItems: 'center', + '& .MuiAlert-icon': { + height: 'fit-content', + p: 0, + mr: 1, + mb: 0.3, + }, + }} + > + + + )} + {additionalInfo.map((key) => ( +

      + ))} + {isDeprecated && ( + + + + ), + }} + > + {t('api-docs.deprecated')} + {deprecationInfo && ( + + {' - '} + /g, '') + .replace(/<\/code>/g, ''), + }} + /> + + )} + + )} + {signature && ( +

      + {t('api-docs.signature')}: + + + + {signatureArgs && ( +
      +
        + {signatureArgs.map(({ argName, argDescription }) => ( +
      • ${argName} ${argDescription}`, + }} + /> + ))} +
      +
      + )} + {signatureReturnDescription && ( +

      + {t('api-docs.returns')} + +

      + )} +
      + )} + + + ); + })} + +       + ); +} diff --git a/docs/src/modules/components/ApiPage/table/SlotsTable.tsx b/docs/src/modules/components/ApiPage/table/SlotsTable.tsx new file mode 100644 index 00000000000000..112d5480771403 --- /dev/null +++ b/docs/src/modules/components/ApiPage/table/SlotsTable.tsx @@ -0,0 +1,122 @@ +/* eslint-disable react/no-danger */ +import * as React from 'react'; +import { styled, alpha } from '@mui/material/styles'; +import { + brandingDarkTheme as darkTheme, + brandingLightTheme as lightTheme, +} from 'docs/src/modules/brandingTheme'; +import { SlotsFormatedParams, getHash } from 'docs/src/modules/components/ApiPage/list/SlotsList'; + +const StyledTable = styled('table')( + ({ theme }) => ({ + '& .table-headers': { + paddingTop: 8, + paddingBottom: 8, + textAlign: 'left', + fontWeight: theme.typography.fontWeightSemiBold, + fontSize: theme.typography.pxToRem(14), + }, + '& tr': { + '&:hover': { + backgroundColor: alpha(darkTheme.palette.grey[50], 0.5), + }, + }, + '& .slot-name': { + fontFamily: theme.typography.fontFamilyCode, + fontWeight: theme.typography.fontWeightSemiBold, + fontSize: theme.typography.pxToRem(13), + color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`, + }, + '& .class-name': { + padding: '0 4px', + borderRadius: 5, + border: '1px solid', + borderColor: alpha(darkTheme.palette.primary[100], 0.5), + backgroundColor: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, + ...theme.typography.caption, + fontFamily: theme.typography.fontFamilyCode, + fontWeight: theme.typography.fontWeightRegular, + }, + '& .item-default': { + padding: '0 4px', + borderRadius: 5, + color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, + backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`, + border: '1px solid', + borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`, + ...theme.typography.caption, + fontFamily: theme.typography.fontFamilyCode, + fontWeight: theme.typography.fontWeightRegular, + }, + '& .description-column': { + width: '40%', + paddingRight: 8, + }, + }), + ({ theme }) => ({ + [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { + '& tr': { + '&:hover': { + backgroundColor: alpha(darkTheme.palette.primaryDark[800], 0.5), + }, + }, + '& .slot-name': { + color: `var(--muidocs-palette-primary-200, ${darkTheme.palette.primary[200]})`, + }, + '& .class-name': { + color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`, + borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, + backgroundColor: alpha(darkTheme.palette.primary[900], 0.5), + }, + '& .item-default': { + color: `var(--muidocs-palette-text-primary, ${darkTheme.palette.text.primary})`, + backgroundColor: `var(--muidocs-palette-grey-900, ${darkTheme.palette.grey[900]})`, + borderColor: `var(--muidocs-palette-divider, ${darkTheme.palette.divider})`, + }, + }, + }), +); + +interface SlotsTableProps { + slots: SlotsFormatedParams[]; +} + +export default function SlotsTable(props: SlotsTableProps) { + const { slots } = props; + return ( + + + + Slot name + Class name + Default + Description + + + + {slots.map((params) => { + const { description, className, name, defaultValue, componentName } = params; + + return ( + + + {name} + + + {className} + + {defaultValue && {defaultValue}} + + + + + ); + })} + + + ); +} diff --git a/docs/src/modules/components/ComponentsApiContent.js b/docs/src/modules/components/ComponentsApiContent.js index 5b9afc2cbe6492..9d9bde866df108 100644 --- a/docs/src/modules/components/ComponentsApiContent.js +++ b/docs/src/modules/components/ComponentsApiContent.js @@ -5,13 +5,12 @@ import kebabCase from 'lodash/kebabCase'; import { useRouter } from 'next/router'; import { exactProp } from '@mui/utils'; import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n'; -import Divider from 'docs/src/modules/components/ApiDivider'; -import PropertiesTable from 'docs/src/modules/components/PropertiesTable'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; -import CSSList from './ApiPage/CSSList'; -import ClassesList from './ApiPage/ClassesList'; -import SlotsList from './ApiPage/SlotsList'; +import PropertiesSection from 'docs/src/modules/components/ApiPage/sections/PropertiesSection'; +import CSSSection from 'docs/src/modules/components/ApiPage/sections/CssSection'; +import ClassesSection from 'docs/src/modules/components/ApiPage/sections/ClassesSection'; +import SlotsSection from 'docs/src/modules/components/ApiPage/sections/SlotsSection'; function getTranslatedHeader(t, header, text) { const translations = { @@ -74,9 +73,8 @@ export default function ComponentsApiContent(props) { }, [router]); const components = Object.keys(pageContents); - const numberOfComponents = components.length; - return components.map((key, idx) => { + return components.map((key) => { const pageContent = pageContents[key]; const { cssComponent, @@ -146,14 +144,18 @@ export default function ComponentsApiContent(props) { - -

      - +
      + {cssComponent && ( )} - + +

      + {inheritance && ( )} + {pageContent.themeDefaultProps && ( )} - {Object.keys(componentStyles.classes).length ? ( - - - -
      -

      - - - ) : null} - {componentSlots?.length ? ( - - - {slotGuideLink && ( -

      - )} - -
      -

      - - - ) : null} - {componentClasses?.classes?.length || - Object.keys(componentClasses?.classes?.globalClasses || {}).length ? ( - - -

      - -
      - - ) : null} + + + + + + - {idx < numberOfComponents - 1 && } ); }); diff --git a/docs/src/modules/components/GoogleAnalytics.js b/docs/src/modules/components/GoogleAnalytics.js index fb4c511f87c2d6..0931581890bab3 100644 --- a/docs/src/modules/components/GoogleAnalytics.js +++ b/docs/src/modules/components/GoogleAnalytics.js @@ -6,6 +6,7 @@ import { useNoSsrCodeVariant } from 'docs/src/modules/utils/codeVariant'; import { useNoSsrCodeStyling } from 'docs/src/modules/utils/codeStylingSolution'; import { useUserLanguage } from 'docs/src/modules/utils/i18n'; import { pathnameToLanguage } from 'docs/src/modules/utils/helpers'; +import { getApiPageLayout } from 'docs/src/modules/components/ApiPage/sections/ToggleDisplayOption'; // So we can write code like: // @@ -138,6 +139,12 @@ function GoogleAnalytics() { }); }, [codeStylingVariant]); + React.useEffect(() => { + window.gtag('set', 'user_properties', { + ...getApiPageLayout(), + }); + }, []); + return null; } diff --git a/docs/src/modules/components/HooksApiContent.js b/docs/src/modules/components/HooksApiContent.js index 051d5b687141ec..b60851c1b5fd7c 100644 --- a/docs/src/modules/components/HooksApiContent.js +++ b/docs/src/modules/components/HooksApiContent.js @@ -4,8 +4,7 @@ import PropTypes from 'prop-types'; import kebabCase from 'lodash/kebabCase'; import { exactProp } from '@mui/utils'; import { useTranslate, useUserLanguage } from 'docs/src/modules/utils/i18n'; -import Divider from 'docs/src/modules/components/ApiDivider'; -import PropertiesTable from 'docs/src/modules/components/PropertiesTable'; +import PropertiesTable from 'docs/src/modules/components/ApiPage/sections/PropertiesSection'; import HighlightedCode from 'docs/src/modules/components/HighlightedCode'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; @@ -49,9 +48,8 @@ export default function HooksApiContent(props) { const t = useTranslate(); const hooks = Object.keys(pagesContents); - const numberOfHooks = hooks.length; - return hooks.map((key, idx) => { + return hooks.map((key) => { const { name: hookName, parameters, returnValue, imports } = pagesContents[key]; const { parametersDescriptions, returnValueDescriptions } = descriptions[key][userLanguage]; @@ -69,20 +67,24 @@ export default function HooksApiContent(props) { - {Object.keys(parameters).length > 0 ? ( ) : ( {t('api-docs.hooksNoParameters')} )} -
      @@ -91,7 +93,6 @@ export default function HooksApiContent(props) { - {idx < numberOfHooks - 1 && } ); }); diff --git a/docs/src/modules/components/MarkdownDocsV2.js b/docs/src/modules/components/MarkdownDocsV2.js index a6073d25d266bc..4d629e081333ba 100644 --- a/docs/src/modules/components/MarkdownDocsV2.js +++ b/docs/src/modules/components/MarkdownDocsV2.js @@ -17,8 +17,8 @@ import Ad from 'docs/src/modules/components/Ad'; import { HEIGHT as AppFrameHeight } from 'docs/src/modules/components/AppFrame'; import { HEIGHT as TabsHeight } from 'docs/src/modules/components/ComponentPageTabs'; import AdGuest from 'docs/src/modules/components/AdGuest'; -import { getPropsToC } from 'docs/src/modules/components/PropertiesTable'; -import { getCssToC } from 'docs/src/modules/components/ApiPage/CSSList'; +import { getPropsToC } from 'docs/src/modules/components/ApiPage/sections/PropertiesSection'; +import { getCssToC } from 'docs/src/modules/components/ApiPage/sections/CssSection'; function JoyModeObserver({ mode }) { const { setMode } = useColorScheme(); diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index dbc067bfcefb6d..0703414afeec50 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -228,8 +228,8 @@ const Root = styled('div')( ...theme.typography.body2, borderBottom: `1px solid var(--muidocs-palette-divider, ${lightTheme.palette.divider})`, paddingRight: 20, - paddingTop: 12, - paddingBottom: 12, + paddingTop: 16, + paddingBottom: 16, color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`, }, '& td code': { diff --git a/docs/src/modules/components/PropertiesTable.js b/docs/src/modules/components/PropertiesTable.js deleted file mode 100644 index b3dad89a43810f..00000000000000 --- a/docs/src/modules/components/PropertiesTable.js +++ /dev/null @@ -1,318 +0,0 @@ -/* eslint-disable react/no-danger */ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { styled } from '@mui/material/styles'; -import Alert from '@mui/material/Alert'; -import { - brandingDarkTheme as darkTheme, - brandingLightTheme as lightTheme, -} from 'docs/src/modules/brandingTheme'; -import { useTranslate } from 'docs/src/modules/utils/i18n'; -import ApiItem from './ApiPage/ApiItem'; - -// TODO: Move to translation -const additionalPropsInfoText = { - cssApi: 'See CSS API below for more details.', - sx: 'See the `sx` page for more details.', - slotsApi: 'See Slots API below for more details.', - 'joy-size': - 'To learn how to add custom sizes to the component, check out Themed components—Extend sizes.', - 'joy-color': - 'To learn how to add your own colors, check out Themed components—Extend colors.', - 'joy-variant': - 'To learn how to add your own variants, check out Themed components—Extend variants.', -}; - -const StyledApiItem = styled(ApiItem)( - ({ theme }) => ({ - '& .prop-list-description': { - marginBottom: 10, - }, - '& .prop-list-additional-info': { - display: 'flex', - flexDirection: 'column', - gap: 8, - '& .prop-list-title': { - paddingRight: 5, - whiteSpace: 'nowrap', - p: { - ...theme.typography.body2, - margin: 0, - fontWeight: theme.typography.fontWeightSemiBold, - }, - }, - '&>div': { display: 'flex', alignItems: 'baseline' }, - }, - '& .prop-list-default-props': { - ...theme.typography.body2, - fontWeight: theme.typography.fontWeightSemiBold, - }, - '& .prop-list-signature': { - p: { - ...theme.typography.body2, - fontWeight: theme.typography.fontWeightSemiBold, - marginBottom: 8, - }, - ul: { - paddingLeft: 24, - marginTop: 2, - marginBottom: 0, - }, - '&>code': { - borderRadius: 8, - padding: 12, - width: '100%', - marginBottom: 8, - color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[50]})`, - border: '1px solid', - borderColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`, - backgroundColor: `var(--muidocs-palette-primaryDark-800, ${lightTheme.palette.primaryDark[800]})`, - }, - }, - }), - ({ theme }) => ({ - [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: { - '& .prop-list-additional-info': { - '& .prop-list-title': { - p: { - color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`, - }, - }, - }, - - '& .prop-list-default-props': { - color: `var(--muidocs-palette-grey-300, ${darkTheme.palette.grey[300]})`, - }, - }, - }), -); - -const getHash = ({ componentName, propName }) => - `${componentName ? `${componentName}-` : ''}prop-${propName}`; - -export const getPropsToC = ({ - componentName, - componentProps, - inheritance, - themeDefaultProps, - t, - hash, -}) => ({ - text: t('api-docs.props'), - hash: hash ?? 'props', - children: [ - ...Object.entries(componentProps) - .filter(([, propData]) => propData.description !== '@ignore') - .map(([propName]) => ({ - text: propName, - hash: getHash({ propName, componentName }), - children: [], - })), - ...(inheritance - ? [{ text: t('api-docs.inheritance'), hash: 'inheritance', children: [] }] - : []), - ...(themeDefaultProps - ? [{ text: t('api-docs.themeDefaultProps'), hash: 'theme-default-props', children: [] }] - : []), - ], -}); - -function PropDescription({ description }) { - const isUlPresent = description.includes('

        '); - - const ComponentToRender = isUlPresent ? 'div' : 'p'; - - return ( - - ); -} - -PropDescription.propTypes = { - description: PropTypes.string.isRequired, -}; - -export default function PropertiesTable(props) { - const { - properties, - propertiesDescriptions, - componentName = '', - showOptionalAbbr = false, - } = props; - const t = useTranslate(); - - return ( -
        - {Object.entries(properties) - .filter(([, propData]) => propData.description !== '@ignore') - .map(([propName, propData]) => { - // ApiItem - const typeName = propData.type?.description || propData.type.name; - const propDefault = propData.default; - const propDescription = propertiesDescriptions[propName]; - const signature = propData.signature?.type; - - return ( - - {propDescription?.description && ( - - )} - {propDescription?.requiresRef && ( - - - - ), - }} - > - - - )} - {Object.keys(additionalPropsInfoText) - .filter((key) => propData.additionalInfo?.[key]) - .map((key) => ( -

        - ))} - {propData.deprecated && ( - - - - ), - }} - > - {t('api-docs.deprecated')} - {propData.deprecationInfo && ' - '} - {propData.deprecationInfo && ( - /g, '') - .replace(/<\/code>/g, ''), - }} - /> - )} - - )} -

        - {typeName && ( -
        -
        -

        {t('api-docs.type')}:

        -
        -
        - |/g, ' |'), - }} - /> -
        -
        - )} - {propDefault && ( -
        -
        -

        {t('api-docs.default')}:

        -
        -
        - {propDefault} -
        -
        - )} - {signature && ( -
        -
        -

        {t('api-docs.signature')}:

        -
        -
        - - {propData.signature.describedArgs && ( -
        -
          - {propData.signature.describedArgs.map((argName) => ( -
        • ${argName} ${propertiesDescriptions[propName].typeDescriptions[argName]}`, - }} - /> - ))} -
        -
        - )} - {propData.signature.returned && ( -

        - {t('api-docs.returns')} - -

        - )} -
        -
        - )} -
        -         - ); - })} -
        - ); -} - -PropertiesTable.propTypes = { - componentName: PropTypes.string, - properties: PropTypes.object.isRequired, - propertiesDescriptions: PropTypes.object.isRequired, - showOptionalAbbr: PropTypes.bool, -}; diff --git a/docs/translations/translations.json b/docs/translations/translations.json index b9da2c11dbaf40..d245e4a1b9db70 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -46,7 +46,15 @@ "state": "STATE", "styleOverrides": "The name {{componentStyles.name}} can be used when providing default props or style overrides in the theme.", "slotDescription": "To learn how to customize the slot, check out the Overriding component structure guide.", - "type": "Type" + "type": "Type", + "additional-info": { + "cssApi": "See CSS API below for more details.", + "sx": "See the `sx` page for more details.", + "slotsApi": "See Slots API below for more details.", + "joy-size": "To learn how to add custom sizes to the component, check out Themed components—Extend sizes.", + "joy-color": "To learn how to add your own colors, check out Themed components—Extend colors.", + "joy-variant": "To learn how to add your own variants, check out Themed components—Extend variants." + } }, "albumDescr": "A responsive album / gallery page layout with a hero unit and footer.", "albumTitle": "Album", diff --git a/examples/base-ui-cra-ts/src/App.tsx b/examples/base-ui-cra-ts/src/App.tsx index e9c3576e76b3db..20b0d82bd5463d 100644 --- a/examples/base-ui-cra-ts/src/App.tsx +++ b/examples/base-ui-cra-ts/src/App.tsx @@ -6,10 +6,9 @@ export default function App() {

        Base UI + Create React App scaffold (TypeScript)

        - Base UI is a library of - unstyled React UI components which includes prebuilt components with production-ready - functionality, along with low-level hooks for transferring that functionality to other - components. + Base UI is a library of unstyled React UI components + which includes prebuilt components with production-ready functionality, along with low-level + hooks for transferring that functionality to other components.
        Create React App is a framework for quickly diff --git a/examples/base-ui-cra/src/App.js b/examples/base-ui-cra/src/App.js index ac2c5fbb40c00c..6c936be8aceebf 100644 --- a/examples/base-ui-cra/src/App.js +++ b/examples/base-ui-cra/src/App.js @@ -6,8 +6,8 @@ export default function App() {

        Base UI + Create React App scaffold (JavaScript)

        - Base UI is a library of - unstyled React UI components and hooks. + Base UI is a library of unstyled React UI components + and hooks.
        Create React App is a framework for quickly