From fc5bd874c9a8c061b98270f29ca14ce96f96daf3 Mon Sep 17 00:00:00 2001 From: Flavien DELANGLE Date: Thu, 7 Nov 2024 08:43:12 +0100 Subject: [PATCH] [TreeView] Remove deprecated `TreeView` component (#15093) --- .../migration-tree-view-v7.md | 49 +++- docs/data/treeViewApiPages.ts | 4 - docs/pages/x/api/tree-view/tree-view.js | 23 -- docs/pages/x/api/tree-view/tree-view.json | 129 --------- .../tree-view/tree-view/tree-view.json | 103 ------- packages/x-codemod/README.md | 23 +- .../tree-view/preset-safe/actual.spec.tsx | 8 +- .../tree-view/preset-safe/expected.spec.tsx | 2 +- .../src/v8.0.0/tree-view/preset-safe/index.ts | 2 + .../index.ts | 1 + packages/x-tree-view-pro/src/index.ts | 1 - .../src/TreeView/TreeView.test.tsx | 17 -- .../x-tree-view/src/TreeView/TreeView.tsx | 258 ------------------ .../src/TreeView/TreeView.types.ts | 15 - packages/x-tree-view/src/TreeView/index.ts | 9 - .../src/TreeView/treeViewClasses.ts | 15 - packages/x-tree-view/src/index.ts | 1 - .../src/themeAugmentation/components.d.ts | 5 - .../src/themeAugmentation/overrides.d.ts | 2 - .../src/themeAugmentation/props.d.ts | 2 - .../themeAugmentation.spec.ts | 20 -- scripts/x-tree-view-pro.exports.json | 10 - scripts/x-tree-view.exports.json | 10 - 23 files changed, 78 insertions(+), 631 deletions(-) delete mode 100644 docs/pages/x/api/tree-view/tree-view.js delete mode 100644 docs/pages/x/api/tree-view/tree-view.json delete mode 100644 docs/translations/api-docs/tree-view/tree-view/tree-view.json create mode 100644 packages/x-codemod/src/v8.0.0/tree-view/rename-tree-view-simple-tree-view/index.ts delete mode 100644 packages/x-tree-view/src/TreeView/TreeView.test.tsx delete mode 100644 packages/x-tree-view/src/TreeView/TreeView.tsx delete mode 100644 packages/x-tree-view/src/TreeView/TreeView.types.ts delete mode 100644 packages/x-tree-view/src/TreeView/index.ts delete mode 100644 packages/x-tree-view/src/TreeView/treeViewClasses.ts diff --git a/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md b/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md index c76698100726..53a4834232cb 100644 --- a/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md +++ b/docs/data/migration/migration-tree-view-v7/migration-tree-view-v7.md @@ -65,6 +65,53 @@ After running the codemods, make sure to test your application and that you don' Feel free to [open an issue](https://github.com/mui/mui-x/issues/new/choose) for support if you need help to proceed with your migration. ::: +### ✅ Use Simple Tree View instead of Tree View + +The `` component has been renamed `` which has exactly the same API: + +```diff +-import { TreeView } from '@mui/x-tree-view'; ++import { SimpleTreeView } from '@mui/x-tree-view'; + +-import { TreeView } from '@mui/x-tree-view/TreeView'; ++import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; + + return ( +- ++ + +- ++ + ); +``` + +If you were using theme augmentation, you will also need to migrate it: + +```diff + const theme = createTheme({ + components: { +- MuiTreeView: { ++ MuiSimpleTreeView: { + styleOverrides: { + root: { + opacity: 0.5, + }, + }, + }, + }, + }); +``` + +If you were using the `treeViewClasses` object, you can replace it with the new `simpleTreeViewClasses` object: + +```diff + import { treeViewClasses } from '@mui/x-tree-view/TreeView'; + import { simpleTreeViewClasses } from '@mui/x-tree-view/SimpleTreeView'; + +-const rootClass = treeViewClasses.root; ++const rootClass = simpleTreeViewClasses.root; +``` + ## New API to customize the Tree Item The `ContentComponent` or `ContentProps` props of the `TreeItem` component have been removed in favor of the new `slots`, `slotProps` props and of the `useTreeItem` hook. @@ -85,7 +132,7 @@ This inconsistency has been solved, all the event manager now target the root of ``` -## Rename the `TreeItem2` (and related utils) +## ✅ Rename the `TreeItem2` (and related utils) All the new Tree Item-related components and utils (introduced in the previous major to improve the DX of the Tree Item component) are becoming the default way of using the Tree Item and are therefore losing their `2` suffix: diff --git a/docs/data/treeViewApiPages.ts b/docs/data/treeViewApiPages.ts index b503ea53e2c8..c68f64fdefcc 100644 --- a/docs/data/treeViewApiPages.ts +++ b/docs/data/treeViewApiPages.ts @@ -26,9 +26,5 @@ const treeViewApiPages: MuiPage[] = [ pathname: '/x/api/tree-view/tree-item-icon', title: 'TreeItemIcon', }, - { - pathname: '/x/api/tree-view/tree-view', - title: 'TreeView', - }, ]; export default treeViewApiPages; diff --git a/docs/pages/x/api/tree-view/tree-view.js b/docs/pages/x/api/tree-view/tree-view.js deleted file mode 100644 index df4d81fbd97b..000000000000 --- a/docs/pages/x/api/tree-view/tree-view.js +++ /dev/null @@ -1,23 +0,0 @@ -import * as React from 'react'; -import ApiPage from 'docs/src/modules/components/ApiPage'; -import mapApiPageTranslations from 'docs/src/modules/utils/mapApiPageTranslations'; -import jsonPageContent from './tree-view.json'; - -export default function Page(props) { - const { descriptions, pageContent } = props; - return ; -} - -Page.getInitialProps = () => { - const req = require.context( - 'docsx/translations/api-docs/tree-view/tree-view', - false, - /\.\/tree-view.*.json$/, - ); - const descriptions = mapApiPageTranslations(req); - - return { - descriptions, - pageContent: jsonPageContent, - }; -}; diff --git a/docs/pages/x/api/tree-view/tree-view.json b/docs/pages/x/api/tree-view/tree-view.json deleted file mode 100644 index c9f0691c2b7b..000000000000 --- a/docs/pages/x/api/tree-view/tree-view.json +++ /dev/null @@ -1,129 +0,0 @@ -{ - "props": { - "apiRef": { - "type": { - "name": "shape", - "description": "{ current?: { focusItem: func, getItem: func, getItemDOMElement: func, getItemOrderedChildrenIds: func, getItemTree: func, selectItem: func, setItemExpansion: func } }" - } - }, - "checkboxSelection": { "type": { "name": "bool" }, "default": "false" }, - "children": { "type": { "name": "node" } }, - "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } }, - "defaultExpandedItems": { - "type": { "name": "arrayOf", "description": "Array<string>" }, - "default": "[]" - }, - "defaultSelectedItems": { "type": { "name": "any" }, "default": "[]" }, - "disabledItemsFocusable": { "type": { "name": "bool" }, "default": "false" }, - "disableSelection": { "type": { "name": "bool" }, "default": "false" }, - "expandedItems": { "type": { "name": "arrayOf", "description": "Array<string>" } }, - "expansionTrigger": { - "type": { "name": "enum", "description": "'content'
| 'iconContainer'" }, - "default": "'content'" - }, - "experimentalFeatures": { - "type": { "name": "shape", "description": "{ indentationAtItemLevel?: bool }" } - }, - "id": { "type": { "name": "string" } }, - "itemChildrenIndentation": { - "type": { "name": "union", "description": "number
| string" }, - "default": "12px" - }, - "multiSelect": { "type": { "name": "bool" }, "default": "false" }, - "onExpandedItemsChange": { - "type": { "name": "func" }, - "signature": { - "type": "function(event: React.SyntheticEvent, itemIds: array) => void", - "describedArgs": ["event", "itemIds"] - } - }, - "onItemClick": { - "type": { "name": "func" }, - "signature": { - "type": "function(event: React.MouseEvent, itemId: string) => void", - "describedArgs": ["event", "itemId"] - } - }, - "onItemExpansionToggle": { - "type": { "name": "func" }, - "signature": { - "type": "function(event: React.SyntheticEvent, itemId: array, isExpanded: array) => void", - "describedArgs": ["event", "itemId", "isExpanded"] - } - }, - "onItemFocus": { - "type": { "name": "func" }, - "signature": { - "type": "function(event: React.SyntheticEvent | null, itemId: string) => void", - "describedArgs": ["event", "itemId"] - } - }, - "onItemSelectionToggle": { - "type": { "name": "func" }, - "signature": { - "type": "function(event: React.SyntheticEvent, itemId: array, isSelected: array) => void", - "describedArgs": ["event", "itemId", "isSelected"] - } - }, - "onSelectedItemsChange": { - "type": { "name": "func" }, - "signature": { - "type": "function(event: React.SyntheticEvent, itemIds: Array | string) => void", - "describedArgs": ["event", "itemIds"] - } - }, - "selectedItems": { "type": { "name": "any" } }, - "selectionPropagation": { - "type": { "name": "shape", "description": "{ descendants?: bool, parents?: bool }" }, - "default": "{ parents: false, descendants: false }" - }, - "slotProps": { "type": { "name": "object" } }, - "slots": { "type": { "name": "object" }, "additionalInfo": { "slotsApi": true } }, - "sx": { - "type": { - "name": "union", - "description": "Array<func
| object
| bool>
| func
| object" - }, - "additionalInfo": { "sx": true } - } - }, - "name": "TreeView", - "imports": [ - "import { TreeView } from '@mui/x-tree-view/TreeView';", - "import { TreeView } from '@mui/x-tree-view';", - "import { TreeView } from '@mui/x-tree-view-pro';" - ], - "slots": [ - { - "name": "root", - "description": "Element rendered at the root.", - "default": "SimpleTreeViewRoot", - "class": "MuiTreeView-root" - }, - { - "name": "collapseIcon", - "description": "The default icon used to collapse the item.", - "class": null - }, - { - "name": "expandIcon", - "description": "The default icon used to expand the item.", - "class": null - }, - { - "name": "endIcon", - "description": "The default icon displayed next to an end item.\nThis is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop.", - "class": null - } - ], - "classes": [], - "spread": true, - "themeDefaultProps": true, - "muiName": "MuiTreeView", - "forwardsRefTo": "HTMLUListElement", - "filename": "/packages/x-tree-view/src/TreeView/TreeView.tsx", - "inheritance": null, - "demos": "", - "cssComponent": false, - "deprecated": true -} diff --git a/docs/translations/api-docs/tree-view/tree-view/tree-view.json b/docs/translations/api-docs/tree-view/tree-view/tree-view.json deleted file mode 100644 index 7558c542dc41..000000000000 --- a/docs/translations/api-docs/tree-view/tree-view/tree-view.json +++ /dev/null @@ -1,103 +0,0 @@ -{ - "componentDescription": "This component has been deprecated in favor of the new Simple Tree View component.\nYou can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview)", - "propDescriptions": { - "apiRef": { - "description": "The ref object that allows Tree View manipulation. Can be instantiated with useTreeViewApiRef()." - }, - "checkboxSelection": { - "description": "If true, the Tree View renders a checkbox at the left of its label that allows selecting it." - }, - "children": { "description": "The content of the component." }, - "classes": { "description": "Override or extend the styles applied to the component." }, - "defaultExpandedItems": { - "description": "Expanded item ids. Used when the item's expansion is not controlled." - }, - "defaultSelectedItems": { - "description": "Selected item ids. (Uncontrolled) When multiSelect is true this takes an array of strings; when false (default) a string." - }, - "disabledItemsFocusable": { - "description": "If true, will allow focus on disabled items." - }, - "disableSelection": { "description": "If true selection is disabled." }, - "expandedItems": { - "description": "Expanded item ids. Used when the item's expansion is controlled." - }, - "expansionTrigger": { - "description": "The slot that triggers the item's expansion when clicked." - }, - "experimentalFeatures": { - "description": "Unstable features, breaking changes might be introduced. For each feature, if the flag is not explicitly set to true, the feature will be fully disabled and any property / method call will not have any effect." - }, - "id": { - "description": "This prop is used to help implement the accessibility logic. If you don't provide this prop. It falls back to a randomly generated id." - }, - "itemChildrenIndentation": { - "description": "Horizontal indentation between an item and its children. Examples: 24, "24px", "2rem", "2em"." - }, - "multiSelect": { - "description": "If true, ctrl and shift will trigger multiselect." - }, - "onExpandedItemsChange": { - "description": "Callback fired when Tree Items are expanded/collapsed.", - "typeDescriptions": { - "event": "The DOM event that triggered the change.", - "itemIds": "The ids of the expanded items." - } - }, - "onItemClick": { - "description": "Callback fired when the content slot of a given Tree Item is clicked.", - "typeDescriptions": { - "event": "The DOM event that triggered the change.", - "itemId": "The id of the focused item." - } - }, - "onItemExpansionToggle": { - "description": "Callback fired when a Tree Item is expanded or collapsed.", - "typeDescriptions": { - "event": "The DOM event that triggered the change.", - "itemId": "The itemId of the modified item.", - "isExpanded": "true if the item has just been expanded, false if it has just been collapsed." - } - }, - "onItemFocus": { - "description": "Callback fired when a given Tree Item is focused.", - "typeDescriptions": { - "event": "The DOM event that triggered the change. Warning: This is a generic event not a focus event.", - "itemId": "The id of the focused item." - } - }, - "onItemSelectionToggle": { - "description": "Callback fired when a Tree Item is selected or deselected.", - "typeDescriptions": { - "event": "The DOM event that triggered the change.", - "itemId": "The itemId of the modified item.", - "isSelected": "true if the item has just been selected, false if it has just been deselected." - } - }, - "onSelectedItemsChange": { - "description": "Callback fired when Tree Items are selected/deselected.", - "typeDescriptions": { - "event": "The DOM event that triggered the change.", - "itemIds": "The ids of the selected items. When multiSelect is true, this is an array of strings; when false (default) a string." - } - }, - "selectedItems": { - "description": "Selected item ids. (Controlled) When multiSelect is true this takes an array of strings; when false (default) a string." - }, - "selectionPropagation": { - "description": "When selectionPropagation.descendants is set to true.
- Selecting a parent selects all its descendants automatically. - Deselecting a parent deselects all its descendants automatically.
When selectionPropagation.parents is set to true.
- Selecting all the descendants of a parent selects the parent automatically. - Deselecting a descendant of a selected parent deselects the parent automatically.
Only works when multiSelect is true. On the <SimpleTreeView />, only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all)" - }, - "slotProps": { "description": "The props used for each component slot." }, - "slots": { "description": "Overridable component slots." }, - "sx": { - "description": "The system prop that allows defining system overrides as well as additional CSS styles." - } - }, - "classDescriptions": {}, - "slotDescriptions": { - "collapseIcon": "The default icon used to collapse the item.", - "endIcon": "The default icon displayed next to an end item. This is applied to all Tree Items and can be overridden by the TreeItem icon slot prop.", - "expandIcon": "The default icon used to expand the item.", - "root": "Element rendered at the root." - } -} diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md index af1290cabb81..1c9dc72ef243 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -85,8 +85,29 @@ npx @mui/x-codemod@latest v8.0.0/tree-view/preset-safe The list includes these transformers +- [`rename-tree-view-simple-tree-view`](#rename-tree-view-simple-tree-view) - [`rename-tree-item-2`](#rename-tree-item-2) +#### `rename-tree-view-simple-tree-view` + +Renames the Tree View component to Simple Tree View + +```diff +-import { TreeView } from '@mui/x-tree-view'; ++import { SimpleTreeView } from '@mui/x-tree-view'; + +-import { TreeView } from '@mui/x-tree-view/TreeView'; ++import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; + + return ( +- ++ + +- ++ + ); +``` + #### `rename-tree-item-2` Renames the `TreeItem2` component to `TreeItem` (same for any subcomponents or utils like `useTreeItem2` or `TreeItem2Icon`). @@ -280,7 +301,7 @@ npx @mui/x-codemod@latest v7.0.0/tree-view/preset-safe The list includes these transformers -- [`rename-tree-view-simple-tree-view`](#rename-tree-view-simple-tree-view) +- [`rename-tree-view-simple-tree-view`](#rename-tree-view-simple-tree-view-1) - [`rename-use-tree-item`](#rename-use-tree-item) - [`rename-expansion-props`](#rename-expansion-props) - [`rename-selection-props`](#rename-selection-props) diff --git a/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/actual.spec.tsx b/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/actual.spec.tsx index 4b5b1a751562..fe2dbab805a7 100644 --- a/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/actual.spec.tsx +++ b/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/actual.spec.tsx @@ -1,11 +1,11 @@ // @ts-nocheck import * as React from 'react'; import { TreeItem2 } from '@mui/x-tree-view/TreeItem2'; -import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; +import { TreeView } from '@mui/x-tree-view/TreeView'; const className = treeViewClasses.root; // prettier-ignore - - -; + + +; diff --git a/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/expected.spec.tsx b/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/expected.spec.tsx index 4a5aa4e135b9..9e21b52fe43d 100644 --- a/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/expected.spec.tsx +++ b/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/expected.spec.tsx @@ -7,5 +7,5 @@ const className = treeViewClasses.root; // prettier-ignore - + ; diff --git a/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/index.ts b/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/index.ts index d94e0b16c030..071dabe5fb7f 100644 --- a/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/index.ts +++ b/packages/x-codemod/src/v8.0.0/tree-view/preset-safe/index.ts @@ -1,8 +1,10 @@ +import transformRenameTreeViewSimpleTreeView from '../rename-tree-view-simple-tree-view'; import transformRenameTreeItem2 from '../rename-tree-item-2'; import { JsCodeShiftAPI, JsCodeShiftFileInfo } from '../../../types'; export default function transformer(file: JsCodeShiftFileInfo, api: JsCodeShiftAPI, options: any) { + file.source = transformRenameTreeViewSimpleTreeView(file, api, options); file.source = transformRenameTreeItem2(file, api, options); return file.source; diff --git a/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-view-simple-tree-view/index.ts b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-view-simple-tree-view/index.ts new file mode 100644 index 000000000000..a0bc89def6e8 --- /dev/null +++ b/packages/x-codemod/src/v8.0.0/tree-view/rename-tree-view-simple-tree-view/index.ts @@ -0,0 +1 @@ +export { default } from '../../../v7.0.0/tree-view/rename-tree-view-simple-tree-view'; diff --git a/packages/x-tree-view-pro/src/index.ts b/packages/x-tree-view-pro/src/index.ts index b09ae6fff6ea..98eb0f18be9f 100644 --- a/packages/x-tree-view-pro/src/index.ts +++ b/packages/x-tree-view-pro/src/index.ts @@ -1,5 +1,4 @@ // Tree View -export * from '@mui/x-tree-view/TreeView'; export * from '@mui/x-tree-view/SimpleTreeView'; export * from './RichTreeViewPro'; diff --git a/packages/x-tree-view/src/TreeView/TreeView.test.tsx b/packages/x-tree-view/src/TreeView/TreeView.test.tsx deleted file mode 100644 index 56a029a5e61c..000000000000 --- a/packages/x-tree-view/src/TreeView/TreeView.test.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from 'react'; -import { createRenderer } from '@mui/internal-test-utils'; -import { TreeView, treeViewClasses as classes } from '@mui/x-tree-view/TreeView'; -import { describeConformance } from 'test/utils/describeConformance'; - -describe('', () => { - const { render } = createRenderer(); - - describeConformance(, () => ({ - classes, - inheritComponent: 'ul', - render, - refInstanceof: window.HTMLUListElement, - muiName: 'MuiTreeView', - skip: ['componentProp', 'componentsProp', 'themeVariants'], - })); -}); diff --git a/packages/x-tree-view/src/TreeView/TreeView.tsx b/packages/x-tree-view/src/TreeView/TreeView.tsx deleted file mode 100644 index 06be3ecba63a..000000000000 --- a/packages/x-tree-view/src/TreeView/TreeView.tsx +++ /dev/null @@ -1,258 +0,0 @@ -'use client'; -import * as React from 'react'; -import PropTypes from 'prop-types'; -import composeClasses from '@mui/utils/composeClasses'; -import { styled, createUseThemeProps } from '../internals/zero-styled'; -import { getTreeViewUtilityClass } from './treeViewClasses'; -import { TreeViewProps } from './TreeView.types'; -import { SimpleTreeView, SimpleTreeViewRoot } from '../SimpleTreeView'; - -const useThemeProps = createUseThemeProps('MuiTreeView'); - -const useUtilityClasses = ( - ownerState: TreeViewProps, -) => { - const { classes } = ownerState; - - const slots = { - root: ['root'], - }; - - return composeClasses(slots, getTreeViewUtilityClass, classes); -}; - -type TreeViewComponent = (( - props: TreeViewProps & React.RefAttributes, -) => React.JSX.Element) & { propTypes?: any }; - -const TreeViewRoot = styled(SimpleTreeViewRoot, { - name: 'MuiTreeView', - slot: 'Root', - overridesResolver: (props, styles) => styles.root, -})({}); - -let warnedOnce = false; - -const warn = () => { - if (!warnedOnce) { - console.warn( - [ - 'MUI X: The TreeView component was renamed SimpleTreeView.', - 'The component with the old naming will be removed in the version v8.0.0.', - '', - "You should use `import { SimpleTreeView } from '@mui/x-tree-view'`", - "or `import { SimpleTreeView } from '@mui/x-tree-view/TreeView'`", - ].join('\n'), - ); - - warnedOnce = true; - } -}; - -/** - * This component has been deprecated in favor of the new Simple Tree View component. - * You can have a look at how to migrate to the new component in the v7 [migration guide](https://mui.com/x/migration/migration-tree-view-v6/#use-simpletreeview-instead-of-treeview) - * - * Demos: - * - * - [Tree View](https://mui.com/x/react-tree-view/) - * - * API: - * - * - [TreeView API](https://mui.com/x/api/tree-view/tree-view/) - * - * @deprecated - */ -const TreeView = React.forwardRef(function TreeView< - Multiple extends boolean | undefined = undefined, ->(inProps: TreeViewProps, ref: React.Ref) { - if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') { - warn(); - } - - const props = useThemeProps({ props: inProps, name: 'MuiTreeView' }); - - const classes = useUtilityClasses(props); - - return ( - - ); -}) as TreeViewComponent; - -TreeView.propTypes = { - // ----------------------------- Warning -------------------------------- - // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the TypeScript types and run "pnpm proptypes" | - // ---------------------------------------------------------------------- - /** - * The ref object that allows Tree View manipulation. Can be instantiated with `useTreeViewApiRef()`. - */ - apiRef: PropTypes.shape({ - current: PropTypes.shape({ - focusItem: PropTypes.func.isRequired, - getItem: PropTypes.func.isRequired, - getItemDOMElement: PropTypes.func.isRequired, - getItemOrderedChildrenIds: PropTypes.func.isRequired, - getItemTree: PropTypes.func.isRequired, - selectItem: PropTypes.func.isRequired, - setItemExpansion: PropTypes.func.isRequired, - }), - }), - /** - * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it. - * @default false - */ - checkboxSelection: PropTypes.bool, - /** - * The content of the component. - */ - children: PropTypes.node, - /** - * Override or extend the styles applied to the component. - */ - classes: PropTypes.object, - className: PropTypes.string, - /** - * Expanded item ids. - * Used when the item's expansion is not controlled. - * @default [] - */ - defaultExpandedItems: PropTypes.arrayOf(PropTypes.string), - /** - * Selected item ids. (Uncontrolled) - * When `multiSelect` is true this takes an array of strings; when false (default) a string. - * @default [] - */ - defaultSelectedItems: PropTypes.any, - /** - * If `true`, will allow focus on disabled items. - * @default false - */ - disabledItemsFocusable: PropTypes.bool, - /** - * If `true` selection is disabled. - * @default false - */ - disableSelection: PropTypes.bool, - /** - * Expanded item ids. - * Used when the item's expansion is controlled. - */ - expandedItems: PropTypes.arrayOf(PropTypes.string), - /** - * The slot that triggers the item's expansion when clicked. - * @default 'content' - */ - expansionTrigger: PropTypes.oneOf(['content', 'iconContainer']), - /** - * Unstable features, breaking changes might be introduced. - * For each feature, if the flag is not explicitly set to `true`, - * the feature will be fully disabled and any property / method call will not have any effect. - */ - experimentalFeatures: PropTypes.shape({ - indentationAtItemLevel: PropTypes.bool, - }), - /** - * This prop is used to help implement the accessibility logic. - * If you don't provide this prop. It falls back to a randomly generated id. - */ - id: PropTypes.string, - /** - * Horizontal indentation between an item and its children. - * Examples: 24, "24px", "2rem", "2em". - * @default 12px - */ - itemChildrenIndentation: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), - /** - * If `true`, `ctrl` and `shift` will trigger multiselect. - * @default false - */ - multiSelect: PropTypes.bool, - /** - * Callback fired when Tree Items are expanded/collapsed. - * @param {React.SyntheticEvent} event The DOM event that triggered the change. - * @param {array} itemIds The ids of the expanded items. - */ - onExpandedItemsChange: PropTypes.func, - /** - * Callback fired when the `content` slot of a given Tree Item is clicked. - * @param {React.MouseEvent} event The DOM event that triggered the change. - * @param {string} itemId The id of the focused item. - */ - onItemClick: PropTypes.func, - /** - * Callback fired when a Tree Item is expanded or collapsed. - * @param {React.SyntheticEvent} event The DOM event that triggered the change. - * @param {array} itemId The itemId of the modified item. - * @param {array} isExpanded `true` if the item has just been expanded, `false` if it has just been collapsed. - */ - onItemExpansionToggle: PropTypes.func, - /** - * Callback fired when a given Tree Item is focused. - * @param {React.SyntheticEvent | null} event The DOM event that triggered the change. **Warning**: This is a generic event not a focus event. - * @param {string} itemId The id of the focused item. - */ - onItemFocus: PropTypes.func, - /** - * Callback fired when a Tree Item is selected or deselected. - * @param {React.SyntheticEvent} event The DOM event that triggered the change. - * @param {array} itemId The itemId of the modified item. - * @param {array} isSelected `true` if the item has just been selected, `false` if it has just been deselected. - */ - onItemSelectionToggle: PropTypes.func, - /** - * Callback fired when Tree Items are selected/deselected. - * @param {React.SyntheticEvent} event The DOM event that triggered the change. - * @param {string[] | string} itemIds The ids of the selected items. - * When `multiSelect` is `true`, this is an array of strings; when false (default) a string. - */ - onSelectedItemsChange: PropTypes.func, - /** - * Selected item ids. (Controlled) - * When `multiSelect` is true this takes an array of strings; when false (default) a string. - */ - selectedItems: PropTypes.any, - /** - * When `selectionPropagation.descendants` is set to `true`. - * - * - Selecting a parent selects all its descendants automatically. - * - Deselecting a parent deselects all its descendants automatically. - * - * When `selectionPropagation.parents` is set to `true`. - * - * - Selecting all the descendants of a parent selects the parent automatically. - * - Deselecting a descendant of a selected parent deselects the parent automatically. - * - * Only works when `multiSelect` is `true`. - * On the , only the expanded items are considered (since the collapsed item are not passed to the Tree View component at all) - * - * @default { parents: false, descendants: false } - */ - selectionPropagation: PropTypes.shape({ - descendants: PropTypes.bool, - parents: PropTypes.bool, - }), - /** - * The props used for each component slot. - */ - slotProps: PropTypes.object, - /** - * Overridable component slots. - */ - slots: PropTypes.object, - /** - * The system prop that allows defining system overrides as well as additional CSS styles. - */ - sx: PropTypes.oneOfType([ - PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), - PropTypes.func, - PropTypes.object, - ]), -} as any; - -export { TreeView }; diff --git a/packages/x-tree-view/src/TreeView/TreeView.types.ts b/packages/x-tree-view/src/TreeView/TreeView.types.ts deleted file mode 100644 index 48fb4c369526..000000000000 --- a/packages/x-tree-view/src/TreeView/TreeView.types.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { - SimpleTreeViewProps, - SimpleTreeViewSlotProps, - SimpleTreeViewSlots, -} from '../SimpleTreeView'; - -export interface TreeViewProps - extends SimpleTreeViewProps {} - -export interface TreeViewSlots extends SimpleTreeViewSlots {} - -export interface TreeViewSlotProps extends SimpleTreeViewSlotProps {} - -export type SingleSelectTreeViewProps = SimpleTreeViewProps; -export type MultiSelectTreeViewProps = SimpleTreeViewProps; diff --git a/packages/x-tree-view/src/TreeView/index.ts b/packages/x-tree-view/src/TreeView/index.ts deleted file mode 100644 index 2569edc0ca19..000000000000 --- a/packages/x-tree-view/src/TreeView/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -export * from './TreeView'; -export * from './treeViewClasses'; -export type { - TreeViewProps, - SingleSelectTreeViewProps, - MultiSelectTreeViewProps, - TreeViewSlots, - TreeViewSlotProps, -} from './TreeView.types'; diff --git a/packages/x-tree-view/src/TreeView/treeViewClasses.ts b/packages/x-tree-view/src/TreeView/treeViewClasses.ts deleted file mode 100644 index 419929d59041..000000000000 --- a/packages/x-tree-view/src/TreeView/treeViewClasses.ts +++ /dev/null @@ -1,15 +0,0 @@ -import generateUtilityClass from '@mui/utils/generateUtilityClass'; -import generateUtilityClasses from '@mui/utils/generateUtilityClasses'; - -export interface TreeViewClasses { - /** Styles applied to the root element. */ - root: string; -} - -export type TreeViewClassKey = keyof TreeViewClasses; - -export function getTreeViewUtilityClass(slot: string): string { - return generateUtilityClass('MuiTreeView', slot); -} - -export const treeViewClasses: TreeViewClasses = generateUtilityClasses('MuiTreeView', ['root']); diff --git a/packages/x-tree-view/src/index.ts b/packages/x-tree-view/src/index.ts index f927d204612b..fd368316ad13 100644 --- a/packages/x-tree-view/src/index.ts +++ b/packages/x-tree-view/src/index.ts @@ -1,5 +1,4 @@ // Tree View -export * from './TreeView'; export * from './SimpleTreeView'; export * from './RichTreeView'; diff --git a/packages/x-tree-view/src/themeAugmentation/components.d.ts b/packages/x-tree-view/src/themeAugmentation/components.d.ts index 3c953271789f..3a793245beaa 100644 --- a/packages/x-tree-view/src/themeAugmentation/components.d.ts +++ b/packages/x-tree-view/src/themeAugmentation/components.d.ts @@ -11,11 +11,6 @@ export interface TreeViewComponents { styleOverrides?: ComponentsOverrides['MuiRichTreeView']; variants?: ComponentsVariants['MuiRichTreeView']; }; - MuiTreeView?: { - defaultProps?: ComponentsProps['MuiTreeView']; - styleOverrides?: ComponentsOverrides['MuiTreeView']; - variants?: ComponentsVariants['MuiTreeView']; - }; MuiTreeItem?: { defaultProps?: ComponentsProps['MuiTreeItem']; styleOverrides?: ComponentsOverrides['MuiTreeItem']; diff --git a/packages/x-tree-view/src/themeAugmentation/overrides.d.ts b/packages/x-tree-view/src/themeAugmentation/overrides.d.ts index 8cedc3a2308c..13417bdf3ac6 100644 --- a/packages/x-tree-view/src/themeAugmentation/overrides.d.ts +++ b/packages/x-tree-view/src/themeAugmentation/overrides.d.ts @@ -1,13 +1,11 @@ import { RichTreeViewClassKey } from '../RichTreeView'; import { SimpleTreeViewClassKey } from '../SimpleTreeView'; -import { TreeViewClassKey } from '../TreeView'; import { TreeItemClassKey } from '../TreeItem'; // prettier-ignore export interface TreeViewComponentNameToClassKey { MuiSimpleTreeView: SimpleTreeViewClassKey; MuiRichTreeView: RichTreeViewClassKey; - MuiTreeView: TreeViewClassKey; MuiTreeItem: TreeItemClassKey; } diff --git a/packages/x-tree-view/src/themeAugmentation/props.d.ts b/packages/x-tree-view/src/themeAugmentation/props.d.ts index 9e3b18e3105b..fe2f39769f3e 100644 --- a/packages/x-tree-view/src/themeAugmentation/props.d.ts +++ b/packages/x-tree-view/src/themeAugmentation/props.d.ts @@ -1,4 +1,3 @@ -import { TreeViewProps } from '../TreeView'; import { SimpleTreeViewProps } from '../SimpleTreeView'; import { RichTreeViewProps } from '../RichTreeView'; import { TreeItemProps } from '../TreeItem'; @@ -6,7 +5,6 @@ import { TreeItemProps } from '../TreeItem'; export interface TreeViewComponentsPropsList { MuiSimpleTreeView: SimpleTreeViewProps; MuiRichTreeView: RichTreeViewProps; - MuiTreeView: TreeViewProps; MuiTreeItem: TreeItemProps; } diff --git a/packages/x-tree-view/src/themeAugmentation/themeAugmentation.spec.ts b/packages/x-tree-view/src/themeAugmentation/themeAugmentation.spec.ts index 67285be2ce2c..11d90c6be85e 100644 --- a/packages/x-tree-view/src/themeAugmentation/themeAugmentation.spec.ts +++ b/packages/x-tree-view/src/themeAugmentation/themeAugmentation.spec.ts @@ -2,7 +2,6 @@ import { createTheme } from '@mui/material/styles'; import { treeItemClasses } from '../TreeItem'; import { richTreeViewClasses } from '../RichTreeView'; import { simpleTreeViewClasses } from '../SimpleTreeView'; -import { treeViewClasses } from '../TreeView'; createTheme({ components: { @@ -44,25 +43,6 @@ createTheme({ }, }, }, - MuiTreeView: { - defaultProps: { - defaultExpandedItems: ['root'], - // @ts-expect-error invalid MuiTreeView prop - someRandomProp: true, - }, - styleOverrides: { - root: { - backgroundColor: 'red', - [`.${treeViewClasses.root}`]: { - backgroundColor: 'green', - }, - }, - // @ts-expect-error invalid MuiTreeView class key - main: { - backgroundColor: 'blue', - }, - }, - }, MuiTreeItem: { defaultProps: { itemId: '1', diff --git a/scripts/x-tree-view-pro.exports.json b/scripts/x-tree-view-pro.exports.json index 1a133d166da0..66646f1d424a 100644 --- a/scripts/x-tree-view-pro.exports.json +++ b/scripts/x-tree-view-pro.exports.json @@ -2,8 +2,6 @@ { "name": "getRichTreeViewProUtilityClass", "kind": "Function" }, { "name": "getSimpleTreeViewUtilityClass", "kind": "Function" }, { "name": "getTreeItemUtilityClass", "kind": "Function" }, - { "name": "getTreeViewUtilityClass", "kind": "Function" }, - { "name": "MultiSelectTreeViewProps", "kind": "TypeAlias" }, { "name": "PropsFromSlot", "kind": "TypeAlias" }, { "name": "RichTreeViewPro", "kind": "Variable" }, { "name": "richTreeViewProClasses", "kind": "Variable" }, @@ -22,7 +20,6 @@ { "name": "SimpleTreeViewRoot", "kind": "Variable" }, { "name": "SimpleTreeViewSlotProps", "kind": "Interface" }, { "name": "SimpleTreeViewSlots", "kind": "Interface" }, - { "name": "SingleSelectTreeViewProps", "kind": "TypeAlias" }, { "name": "TreeItem", "kind": "Variable" }, { "name": "TreeItemCheckbox", "kind": "Variable" }, { "name": "treeItemClasses", "kind": "Variable" }, @@ -46,21 +43,14 @@ { "name": "TreeItemRoot", "kind": "Variable" }, { "name": "TreeItemSlotProps", "kind": "Interface" }, { "name": "TreeItemSlots", "kind": "Interface" }, - { "name": "TreeView", "kind": "Variable" }, { "name": "TreeViewBaseItem", "kind": "TypeAlias" }, { "name": "TreeViewCancellableEvent", "kind": "TypeAlias" }, { "name": "TreeViewCancellableEventHandler", "kind": "TypeAlias" }, - { "name": "treeViewClasses", "kind": "Variable" }, - { "name": "TreeViewClasses", "kind": "Interface" }, - { "name": "TreeViewClassKey", "kind": "TypeAlias" }, { "name": "TreeViewCollapseIcon", "kind": "Variable" }, { "name": "TreeViewExpandIcon", "kind": "Variable" }, { "name": "TreeViewItemId", "kind": "TypeAlias" }, { "name": "TreeViewItemsReorderingAction", "kind": "TypeAlias" }, - { "name": "TreeViewProps", "kind": "Interface" }, { "name": "TreeViewSelectionPropagation", "kind": "Interface" }, - { "name": "TreeViewSlotProps", "kind": "Interface" }, - { "name": "TreeViewSlots", "kind": "Interface" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "useTreeItem", "kind": "Variable" }, { "name": "UseTreeItemCheckboxSlotOwnProps", "kind": "Interface" }, diff --git a/scripts/x-tree-view.exports.json b/scripts/x-tree-view.exports.json index 01fac9eb0846..6daaee01de81 100644 --- a/scripts/x-tree-view.exports.json +++ b/scripts/x-tree-view.exports.json @@ -2,8 +2,6 @@ { "name": "getRichTreeViewUtilityClass", "kind": "Function" }, { "name": "getSimpleTreeViewUtilityClass", "kind": "Function" }, { "name": "getTreeItemUtilityClass", "kind": "Function" }, - { "name": "getTreeViewUtilityClass", "kind": "Function" }, - { "name": "MultiSelectTreeViewProps", "kind": "TypeAlias" }, { "name": "PropsFromSlot", "kind": "TypeAlias" }, { "name": "RICH_TREE_VIEW_PLUGINS", "kind": "Variable" }, { "name": "RichTreeView", "kind": "Variable" }, @@ -26,7 +24,6 @@ { "name": "SimpleTreeViewRoot", "kind": "Variable" }, { "name": "SimpleTreeViewSlotProps", "kind": "Interface" }, { "name": "SimpleTreeViewSlots", "kind": "Interface" }, - { "name": "SingleSelectTreeViewProps", "kind": "TypeAlias" }, { "name": "TreeItem", "kind": "Variable" }, { "name": "TreeItemCheckbox", "kind": "Variable" }, { "name": "treeItemClasses", "kind": "Variable" }, @@ -50,21 +47,14 @@ { "name": "TreeItemRoot", "kind": "Variable" }, { "name": "TreeItemSlotProps", "kind": "Interface" }, { "name": "TreeItemSlots", "kind": "Interface" }, - { "name": "TreeView", "kind": "Variable" }, { "name": "TreeViewBaseItem", "kind": "TypeAlias" }, { "name": "TreeViewCancellableEvent", "kind": "TypeAlias" }, { "name": "TreeViewCancellableEventHandler", "kind": "TypeAlias" }, - { "name": "treeViewClasses", "kind": "Variable" }, - { "name": "TreeViewClasses", "kind": "Interface" }, - { "name": "TreeViewClassKey", "kind": "TypeAlias" }, { "name": "TreeViewCollapseIcon", "kind": "Variable" }, { "name": "TreeViewExpandIcon", "kind": "Variable" }, { "name": "TreeViewItemId", "kind": "TypeAlias" }, { "name": "TreeViewItemsReorderingAction", "kind": "TypeAlias" }, - { "name": "TreeViewProps", "kind": "Interface" }, { "name": "TreeViewSelectionPropagation", "kind": "Interface" }, - { "name": "TreeViewSlotProps", "kind": "Interface" }, - { "name": "TreeViewSlots", "kind": "Interface" }, { "name": "unstable_resetCleanupTracking", "kind": "Variable" }, { "name": "useTreeItem", "kind": "Variable" }, { "name": "UseTreeItemCheckboxSlotOwnProps", "kind": "Interface" },