From cfd27b9e1cb9c4f61cc8bddc3d8aec685002ba70 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Mon, 14 Oct 2024 10:29:22 -0700 Subject: [PATCH 1/5] first pass --- CHANGELOG.md | 22 +++++++++---------- changelogOld/CHANGELOG.v6.md | 8 +++---- .../migration-tree-view-lab.md | 2 +- .../migration-tree-view-v6.md | 2 +- .../tree-view/accessibility/accessibility.md | 2 +- .../getting-started/getting-started.md | 2 +- .../rich-tree-view/headless/headless.md | 6 ++--- .../rich-tree-view/ordering/ordering.md | 2 +- .../rich-tree-view-pro.json | 2 +- .../rich-tree-view/rich-tree-view.json | 2 +- .../simple-tree-view/simple-tree-view.json | 2 +- .../tree-view/tree-view/tree-view.json | 2 +- packages/x-codemod/README.md | 4 ++-- .../src/RichTreeViewPro/RichTreeViewPro.tsx | 2 +- .../src/RichTreeView/RichTreeView.tsx | 2 +- .../src/SimpleTreeView/SimpleTreeView.tsx | 2 +- .../x-tree-view/src/TreeView/TreeView.tsx | 2 +- .../src/internals/corePlugins/corePlugins.ts | 2 +- .../useTreeViewLabel.types.ts | 2 +- .../useTreeViewSelection.types.ts | 2 +- 20 files changed, 36 insertions(+), 36 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index cad4db17e8860..85e28790baaec 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -367,7 +367,7 @@ Same changes as in `@mui/x-charts@7.17.0`. ### Docs -- [docs] Add missing callout on "Imperative API" tree view sections (#14503) @flaviendelangle +- [docs] Add missing callout on "Imperative API" Tree View sections (#14503) @flaviendelangle - [docs] Fix broken redirection to MUIΒ X v5 @oliviertassinari - [docs] Fix multiple `console.error` messages on `charts` docs (#14554) @JCQuintas - [docs] Fixed typo in Row Grouping recipes (#14549) @Miodini @@ -708,7 +708,7 @@ Same changes as in `@mui/x-charts@7.13.0`. - [core] Fix ESLint issue (#14207) @LukasTy - [core] Fix Netlify build cache issue (#14182) @cherniavskii - [code-infra] Refactor Netlify `cache-docs` plugin setup (#14105) @LukasTy -- [internals] Move utils needed for tree view virtualization to shared package (#14202) @flaviendelangle +- [internals] Move utils needed for Tree View virtualization to shared package (#14202) @flaviendelangle ## 7.12.1 @@ -1292,7 +1292,7 @@ Same changes as in `@mui/x-date-pickers@7.8.0`. - [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas - [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot -- [license] Allow usage of charts and tree view pro package for old premium licenses (#13619) @flaviendelangle +- [license] Allow usage of charts and Tree View pro package for old premium licenses (#13619) @flaviendelangle ## 7.7.1 @@ -1440,7 +1440,7 @@ Same changes as in `@mui/x-date-pickers@7.7.0`. - [TreeView] Improve TypeScript for plugins (#13380) @flaviendelangle - [TreeView] Improve the typing of the cancelable events (#13152) @flaviendelangle - [TreeView] Prepare support for PigmentCSS (#13412) @flaviendelangle -- [TreeView] Refactor the tree view internals to prepare for headless API (#13311) @flaviendelangle +- [TreeView] Refactor the Tree View internals to prepare for headless API (#13311) @flaviendelangle ### Docs @@ -1640,7 +1640,7 @@ _May 23, 2024_ We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨: -- 🧰 Improve tree view testing +- 🧰 Improve Tree View testing - πŸ“Š Add `label` to be displayed in BarChart ### Data Grid @@ -2126,7 +2126,7 @@ Same changes as in `@mui/x-date-pickers@7.2.0`, plus: ### Docs - [docs] Add `AxisFormatter` documentation for customizing tick/tooltip value formatting (#12700) @JCQuintas -- [docs] Add file explorer example to rich tree view customization docs (#12707) @noraleonte +- [docs] Add file explorer example to rich Tree View customization docs (#12707) @noraleonte - [docs] Do not use import of depth 3 in the doc (#12716) @flaviendelangle - [docs] Explain how to clip plots with composition (#12679) @alexfauquette - [docs] Fix typo in Data Grid v7 migration page (#12720) @bfaulk96 @@ -3323,7 +3323,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-beta.0`, plus: ### Docs -- [docs] Add `contextValue` to the headless tree view doc (#11705) @flaviendelangle +- [docs] Add `contextValue` to the headless Tree View doc (#11705) @flaviendelangle - [docs] Add section for the `disableSelection` prop (#11821) @flaviendelangle - [docs] Fix brand name non-breaking space (#11758) @oliviertassinari - [docs] Fix typo in Data Grid components page (#11775) @flaviendelangle @@ -3657,7 +3657,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`. - [docs] Cleanup and fix Pickers Playground styling (#11700) @LukasTy - [docs] First draft of the Tree View custom plugin doc (#11564) @flaviendelangle - [docs] Fix Pickers migration syntax and diffs (#11695) @LukasTy -- [docs] Fix generated tree view API docs (#11737) @LukasTy +- [docs] Fix generated Tree View API docs (#11737) @LukasTy - [docs] Generate docs for Tree View slots (#11730) @flaviendelangle - [docs] Improve codemod for v7 (#11650) @oliviertassinari - [docs] Improve Data Grid `pageSizeOptions` prop documentation (#11682) @oliviertassinari @@ -3740,8 +3740,8 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.8`. ### Tree View / `@mui/x-tree-view@7.0.0-alpha.8` -- [tree view] Cleanup `onKeyDown` handler (#11481) @flaviendelangle -- [tree view] Define the parameters used by each plugin to avoid listing them in each component (#11473) @flaviendelangle +- [Tree View] Cleanup `onKeyDown` handler (#11481) @flaviendelangle +- [Tree View] Define the parameters used by each plugin to avoid listing them in each component (#11473) @flaviendelangle ### Docs @@ -5099,7 +5099,7 @@ Here is an example of the renaming for the `` component. ### Core -- [core] Adds migration docs for charts, pickers and tree view (#10926) @michelengelen +- [core] Adds migration docs for charts, pickers and Tree View (#10926) @michelengelen - [core] Bump monorepo (#10959) @LukasTy - [core] Changed prettier branch value to next (#10917) @michelengelen - [core] Fix GitHub title tag consistency @oliviertassinari diff --git a/changelogOld/CHANGELOG.v6.md b/changelogOld/CHANGELOG.v6.md index 0401e317fe08f..985e7aba09055 100644 --- a/changelogOld/CHANGELOG.v6.md +++ b/changelogOld/CHANGELOG.v6.md @@ -1485,7 +1485,7 @@ Same changes as in `@mui/x-date-pickers@6.13.0`, plus: - [docs] Fix charts demo using too deep import (#10263) @LukasTy - [docs] Fix `e.g.` typo @oliviertassinari - [docs] Fix npm package indentation @oliviertassinari -- [docs] Fix typo in tree view docs @oliviertassinari +- [docs] Fix typo in Tree View docs @oliviertassinari - [docs] Improve the week picker example (#8257) @flaviendelangle - [docs] Include code links in the Data Grid demo (#10219) @cherniavskii - [docs] Polish page for SEO (#10216) @oliviertassinari @@ -1546,7 +1546,7 @@ Same changes as in `@mui/x-date-pickers@6.12.1`. - [docs] Add `DemoContainer` and `DemoItem` JSDoc (#10186) @LukasTy - [docs] Add link to `custom layout` page (#10184) @LukasTy -- [docs] Add tree view nav item (#10181) @LukasTy +- [docs] Add Tree View nav item (#10181) @LukasTy - [docs] Fix wrong chart tooltip reference (#10169) @oliviertassinari - [docs] Improve chart SEO (#10170) @oliviertassinari - [docs] Precise expired license key condition (#10165) @oliviertassinari @@ -1748,7 +1748,7 @@ _Aug 4, 2023_ We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨: -- ⌚️ Move the tree view component from `@mui/lab` package +- ⌚️ Move the Tree View component from `@mui/lab` package The `` component has been moved to the MUIΒ X repository. It is now accessible from its own package: `@mui/x-tree-view`. @@ -1804,7 +1804,7 @@ Same changes as in `@mui/x-date-pickers@6.11.0`. ### Tree View / `@mui/x-tree-view@6.0.0-alpha.0` - [TreeView] Add missing exported types (#9862) @flaviendelangle -- [TreeView] Add tree view to changelog generator script (#9903) @MBilalShafi +- [TreeView] Add Tree View to changelog generator script (#9903) @MBilalShafi - [TreeView] Create the package on the X repository (#9798) @flaviendelangle - [TreeView] Improve props typing (#9855) @flaviendelangle diff --git a/docs/data/migration/migration-tree-view-lab/migration-tree-view-lab.md b/docs/data/migration/migration-tree-view-lab/migration-tree-view-lab.md index 2b1a932e33ffe..3fc640a648322 100644 --- a/docs/data/migration/migration-tree-view-lab/migration-tree-view-lab.md +++ b/docs/data/migration/migration-tree-view-lab/migration-tree-view-lab.md @@ -8,7 +8,7 @@ productId: x-tree-view ## Introduction -This is a reference for migrating your site's tree view from `@mui/lab` to `@mui/x-tree-view`. +This is a reference for migrating your site's Tree View from `@mui/lab` to `@mui/x-tree-view`. This migration is about the npm packages used, it **does not** affect the behavior of the components in your application. [//]: # 'You can find why we are moving in this direction in the [announcement blog post](/blog/lab-tree-view-to-mui-x/).' diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md index 7d979f8af087e..e7e99e4e91473 100644 --- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md +++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md @@ -13,7 +13,7 @@ To read more about the changes from the new major, check out [the blog post abou ## Start using the new release -In `package.json`, change the version of the tree view package to `^7.0.0`. +In `package.json`, change the version of the Tree View package to `^7.0.0`. ```diff -"@mui/x-tree-view": "^6.0.0", diff --git a/docs/data/tree-view/accessibility/accessibility.md b/docs/data/tree-view/accessibility/accessibility.md index b1fc45bfc6903..cc9c2306612bd 100644 --- a/docs/data/tree-view/accessibility/accessibility.md +++ b/docs/data/tree-view/accessibility/accessibility.md @@ -54,7 +54,7 @@ Type-ahead is supported for single characters. When typing a character, focus mo ## Selection -The tree view supports both single and multi-selection. To learn more about the selection API, visit the dedicated page for the [Simple Tree View](/x/react-tree-view/simple-tree-view/selection/) or the [Rich Tree View](/x/react-tree-view/rich-tree-view/selection/). +The Tree View supports both single and multi-selection. To learn more about the selection API, visit the dedicated page for the [Simple Tree View](/x/react-tree-view/simple-tree-view/selection/) or the [Rich Tree View](/x/react-tree-view/rich-tree-view/selection/). To read more about the distinction between selection and focus, you can refer to the [WAI-ARIA Authoring Practices guide](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_focus_vs_selection). diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md index 79dc191bdc929..1439118521462 100644 --- a/docs/data/tree-view/getting-started/getting-started.md +++ b/docs/data/tree-view/getting-started/getting-started.md @@ -82,7 +82,7 @@ To make sure that everything is set up correctly, try rendering a `SimpleTreeVie The component follows the WAI-ARIA authoring practices. -To have an accessible tree view you must use `aria-labelledby` +To have an accessible Tree View you must use `aria-labelledby` or `aria-label` to reference or provide a label on the TreeView, otherwise, screen readers will announce it as "tree", making it hard to understand the context of a specific tree item. diff --git a/docs/data/tree-view/rich-tree-view/headless/headless.md b/docs/data/tree-view/rich-tree-view/headless/headless.md index 8d1c35ea57f04..4d997179eddcd 100644 --- a/docs/data/tree-view/rich-tree-view/headless/headless.md +++ b/docs/data/tree-view/rich-tree-view/headless/headless.md @@ -8,7 +8,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ # Rich Tree View - Headless -

Create your custom tree view.

+

Create your custom Tree View.

:::warning The `useTreeView` hook is not public API for now, @@ -268,7 +268,7 @@ type UseCustomPluginSignature = TreeViewPluginSignature<{ params: UseCustomPluginParams; // The params specific to your plugins after running `getDefaultizedParams` defaultizedParams: UseCustomPluginDefaultizedParams; - // The methods added to the tree view instance by your plugin + // The methods added to the Tree View instance by your plugin instance: UseCustomPluginInstance; // The events emitted by your plugin events: UseCustomPluginEvents; @@ -325,6 +325,6 @@ type UseCustomPluginSignature = TreeViewPluginSignature<{ ### Log expanded items -Interact with the tree view to see the expanded items being logged: +Interact with the Tree View to see the expanded items being logged: {{"demo": "LogExpandedItems.js"}} diff --git a/docs/data/tree-view/rich-tree-view/ordering/ordering.md b/docs/data/tree-view/rich-tree-view/ordering/ordering.md index ed28ace0806b5..891f3588e634a 100644 --- a/docs/data/tree-view/rich-tree-view/ordering/ordering.md +++ b/docs/data/tree-view/rich-tree-view/ordering/ordering.md @@ -50,7 +50,7 @@ You can use the `onItemPositionChange` to send the new position of an item to yo {{"demo": "OnItemPositionChange.js"}} If you want to send the entire dataset to your backend, you can use the [`getItemTree`](/x/react-tree-view/rich-tree-view/items/#get-the-current-item-tree) API method. -The following demo demonstrates it by synchronizing the first tree view with the second one whenever you do a re-ordering: +The following demo demonstrates it by synchronizing the first Tree View with the second one whenever you do a re-ordering: {{"demo": "SendAllItemsToServer.js"}} diff --git a/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json b/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json index 3a33b96c08bd8..ae2a942b1ea1f 100644 --- a/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json +++ b/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json @@ -15,7 +15,7 @@ } }, "checkboxSelection": { - "description": "If true, the tree view renders a checkbox at the left of its label that allows selecting it." + "description": "If true, the Tree View renders a checkbox at the left of its label that allows selecting it." }, "classes": { "description": "Override or extend the styles applied to the component." }, "defaultExpandedItems": { diff --git a/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json b/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json index 3ba5993e51879..adecf87a86eab 100644 --- a/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json +++ b/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json @@ -5,7 +5,7 @@ "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." + "description": "If true, the Tree View renders a checkbox at the left of its label that allows selecting it." }, "classes": { "description": "Override or extend the styles applied to the component." }, "defaultExpandedItems": { diff --git a/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json b/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json index a56fd8d2d75af..7e352ea3413a2 100644 --- a/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json +++ b/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json @@ -5,7 +5,7 @@ "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." + "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." }, 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 index 765c53c0efd9e..34914eb5f40ff 100644 --- a/docs/translations/api-docs/tree-view/tree-view/tree-view.json +++ b/docs/translations/api-docs/tree-view/tree-view/tree-view.json @@ -5,7 +5,7 @@ "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." + "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." }, diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md index 453f783b567d3..b2b39eed5ab0c 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -227,9 +227,9 @@ npx @mui/x-codemod@latest v7.0.0/data-grid/remove-stabilized-experimentalFeature ### Tree View codemods -#### `preset-safe` for tree view v7.0.0 +#### `preset-safe` for Tree View v7.0.0 -The `preset-safe` codemods for tree view. +The `preset-safe` codemods for Tree View. ```bash npx @mui/x-codemod@latest v7.0.0/tree-view/preset-safe diff --git a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx index 5f6da5132f335..afe086fd1f039 100644 --- a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx +++ b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx @@ -140,7 +140,7 @@ RichTreeViewPro.propTypes = { */ canMoveItemToNewPosition: PropTypes.func, /** - * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it. + * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it. * @default false */ checkboxSelection: PropTypes.bool, diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx index d030df14bd9a0..c714f5717b090 100644 --- a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx +++ b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx @@ -123,7 +123,7 @@ RichTreeView.propTypes = { }), }), /** - * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it. + * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it. * @default false */ checkboxSelection: PropTypes.bool, diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx index adfe2d35415b4..55ba8c41386c6 100644 --- a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx +++ b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx @@ -117,7 +117,7 @@ SimpleTreeView.propTypes = { }), }), /** - * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it. + * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it. * @default false */ checkboxSelection: PropTypes.bool, diff --git a/packages/x-tree-view/src/TreeView/TreeView.tsx b/packages/x-tree-view/src/TreeView/TreeView.tsx index 73c38055ee9a9..701e4351cd7c5 100644 --- a/packages/x-tree-view/src/TreeView/TreeView.tsx +++ b/packages/x-tree-view/src/TreeView/TreeView.tsx @@ -104,7 +104,7 @@ TreeView.propTypes = { }), }), /** - * If `true`, the tree view renders a checkbox at the left of its label that allows selecting it. + * If `true`, the Tree View renders a checkbox at the left of its label that allows selecting it. * @default false */ checkboxSelection: PropTypes.bool, diff --git a/packages/x-tree-view/src/internals/corePlugins/corePlugins.ts b/packages/x-tree-view/src/internals/corePlugins/corePlugins.ts index f6aa4c84a2193..76f050c33c8fa 100644 --- a/packages/x-tree-view/src/internals/corePlugins/corePlugins.ts +++ b/packages/x-tree-view/src/internals/corePlugins/corePlugins.ts @@ -5,7 +5,7 @@ import { ConvertPluginsIntoSignatures } from '../models'; /** * Internal plugins that create the tools used by the other plugins. - * These plugins are used by the tree view components. + * These plugins are used by the Tree View components. */ export const TREE_VIEW_CORE_PLUGINS = [ useTreeViewInstanceEvents, diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.ts index 3f23f27ca86d1..949abca3a40fa 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.types.ts @@ -39,7 +39,7 @@ export interface UseTreeViewLabelInstance extends UseTreeViewLabelPublicAPI { */ isItemEditable: (itemId: TreeViewItemId) => boolean; /** - * Set to `true` if the tree view is editable. + * Set to `true` if the Tree View is editable. */ isTreeViewEditable: boolean; } diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts index aa115aed15498..4469308168010 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts @@ -90,7 +90,7 @@ export interface UseTreeViewSelectionParameters Date: Mon, 14 Oct 2024 10:36:03 -0700 Subject: [PATCH 2/5] no backticks --- CHANGELOG.md | 22 +++++++++---------- .../custom-components/custom-components.md | 2 +- .../migration-tree-view-v6.md | 10 ++++----- .../getting-started/getting-started.md | 2 +- docs/data/tree-view/overview/overview.md | 14 ++++++------ .../tree-view/rich-tree-view/items/items.md | 10 ++++----- docs/pages/x/api/tree-view/tree-item-2.json | 2 +- .../tree-view/tree-view/tree-view.json | 2 +- packages/x-codemod/README.md | 2 +- .../src/RichTreeViewPro/RichTreeViewPro.tsx | 2 +- .../useTreeViewItemsReordering.ts | 2 +- .../src/RichTreeView/RichTreeView.tsx | 2 +- .../src/SimpleTreeView/SimpleTreeView.tsx | 2 +- .../src/TreeItem2/TreeItem2.types.ts | 2 +- .../x-tree-view/src/TreeView/TreeView.tsx | 2 +- .../src/internals/models/treeView.ts | 4 ++-- .../useTreeViewItems.types.ts | 2 +- .../useTreeViewJSXItems.tsx | 2 +- .../useTreeViewLabel/useTreeViewLabel.ts | 2 +- .../src/useTreeItem2/useTreeItem2.types.ts | 2 +- .../describeTreeView/describeTreeView.tsx | 2 +- 21 files changed, 46 insertions(+), 46 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 85e28790baaec..a31e8b150a61b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -799,7 +799,7 @@ This expansion of the Pro plan comes with some adjustments to our pricing strate We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨: -- 🎁 Introduce [item reordering using drag and drop](https://mui.com/x/react-tree-view/rich-tree-view/ordering/) on the `RichTreeViewPro` component +- 🎁 Introduce [item reordering using drag and drop](https://mui.com/x/react-tree-view/rich-tree-view/ordering/) on the Rich Tree View Pro component Item reordering using drag and drop @@ -1360,7 +1360,7 @@ Same changes as in `@mui/x-date-pickers@7.7.1`, plus: - [TreeView] Improve typing to support optional dependencies in plugins and in the item (#13523) @flaviendelangle - [TreeView] Move `useTreeViewId` to the core plugins (#13566) @flaviendelangle - [TreeView] Remove unused state from `useTreeViewId` (#13579) @flaviendelangle -- [TreeView] Support `itemId` with escaping characters when using `SimpleTreeView` (#13487) @oukunan +- [TreeView] Support `itemId` with escaping characters when using Simple Tree View (#13487) @oukunan ### Docs @@ -2202,7 +2202,7 @@ Same changes as in `@mui/x-date-pickers@7.1.1`, plus: #### `@mui/x-tree-view@7.1.1` - [TreeView] Add JSDoc to all `publicAPI` methods (#12649) @flaviendelangle -- [TreeView] Create `RichTreeViewPro` component (not released yet) (#12610) @flaviendelangle +- [TreeView] Create Rich Tree View Pro component (not released yet) (#12610) @flaviendelangle - [TreeView] Create Pro package (not released yet) (#12240) @flaviendelangle - [TreeView] Fix typo in errors (#12623) @alissa-tung - [TreeView] New API method: `setItemExpansion` (#12595) @flaviendelangle @@ -2222,13 +2222,13 @@ Same changes as in `@mui/x-date-pickers@7.1.1`, plus: - [docs] Move Data Grid interfaces to standard API page layout (#12016) @alexfauquette - [docs] Remove ` around @default values (#12158) @alexfauquette - [docs] Remove `day` from the default `dayOfWeekFormatter` function params (#12644) @LukasTy -- [docs] Use `TreeItem2` for icon expansion example on `RichTreeView` (#12563) @flaviendelangle +- [docs] Use `TreeItem2` for icon expansion example on Rich Tree View (#12563) @flaviendelangle ### Core - [core] Add cherry-pick `master` to `v6` action (#12648) @LukasTy - [core] Fix typo in `@mui/x-tree-view-pro/themeAugmentation` (#12674) @flaviendelangle -- [core] Introduce `describeTreeView` to run test on `SimpleTreeView` and `RichTreeView`, using `TreeItem` and `TreeItem2` + migrate expansion tests (#12428) @flaviendelangle +- [core] Introduce `describeTreeView` to run test on Simple Tree View and Rich Tree View, using `TreeItem` and `TreeItem2` + migrate expansion tests (#12428) @flaviendelangle - [core] Limit `test-types` CI step allowed memory (#12651) @LukasTy - [core] Remove explicit `express` package (#12602) @LukasTy - [core] Update to new embedded translations in the docs package (#12232) @Janpot @@ -2293,7 +2293,7 @@ Same changes as in `@mui/x-date-pickers@7.1.0`, plus: #### `@mui/x-tree-view@7.1.0` -- [TreeView] Do not use outdated version of the state to compute new label first char in `RichTreeView` (#12512) @flaviendelangle +- [TreeView] Do not use outdated version of the state to compute new label first char in Rich Tree View (#12512) @flaviendelangle ### Docs @@ -2663,14 +2663,14 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.6`. #### `@mui/x-tree-view@7.0.0-beta.6` - [TreeView] Fix invalid nodes state when updating `props.items` (#12359) @flaviendelangle -- [TreeView] In the `RichTreeView`, do not use the item id as the HTML id attribute (#12319) @flaviendelangle +- [TreeView] In the Rich Tree View, do not use the item id as the HTML id attribute (#12319) @flaviendelangle - [TreeView] New instance and publicAPI method: `getItem` (#12251) @flaviendelangle - [TreeView] Replace `TransitionComponent` and `TransitionProps` with a `groupTransition` slot (#12336) @flaviendelangle ### Docs - [docs] Add a note about `z-index` usage in SVG (#12337) @alexfauquette -- [docs] `RichTreeView` customization docs (#12231) @noraleonte +- [docs] Rich Tree View customization docs (#12231) @noraleonte ### Core @@ -3346,7 +3346,7 @@ We'd like to offer a big thanks to the 11 contributors who made this release pos - 🎁 The Data Grid headers have been refactored to bring immense improvements to scrolling, state management, and overall performance of the grid. - βš™οΈ The Data Grid disabled column-specific features like filtering, sorting, grouping, etc. could now be accessed programmatically. See the related [docs](https://next.mui.com/x/react-data-grid/api-object/#access-the-disabled-column-features) section. -- πŸš€ Uplift the `SimpleTreeView` customization examples (#11424) @noraleonte +- πŸš€ Uplift the Simple Tree View customization examples (#11424) @noraleonte - 🌍 Add Croatian (hr-HR), Portuguese (pt-PT), and Chinese (Hong Kong) (zh-HK) locales (#11668) on the Data Grid @BCaspari - 🐞 Bugfixes - πŸ’” Bump `@mui/material` peer dependency for all packages (#11692) @LukasTy @@ -3663,7 +3663,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`. - [docs] Improve Data Grid `pageSizeOptions` prop documentation (#11682) @oliviertassinari - [docs] Parse markdown on API docs demo titles (#11728) @LukasTy - [docs] Remove the description from the `className` prop (#11693) @oliviertassinari -- [docs] Uplift `SimpleTreeView` customization examples (#11424) @noraleonte +- [docs] Uplift Simple Tree View customization examples (#11424) @noraleonte - [docs] Uplift the Date Pickers playground (#11555) @danilo-leal ### Core @@ -3768,7 +3768,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss - 🎁 New component to create a Tree View from a structured data source: - You can now directly pass your data to the `RichTreeView` component instead of manually converting it into JSX `TreeItem` components: + You can now directly pass your data to the Rich Tree View component instead of manually converting it into JSX `TreeItem` components: ```tsx const ITEMS = [ diff --git a/docs/data/common-concepts/custom-components/custom-components.md b/docs/data/common-concepts/custom-components/custom-components.md index cd89c78cbe620..1875037ac5bfa 100644 --- a/docs/data/common-concepts/custom-components/custom-components.md +++ b/docs/data/common-concepts/custom-components/custom-components.md @@ -11,7 +11,7 @@ This is the role of all the `baseXXX` component on the Data Grid component (`bas These slots receive props that should be as generic as possible so that it is easy to interface any other design system. Other slots allow you to override parts of the MUIΒ X UI components with a custom UI built specifically for this component. -This is the role of slots like `calendarHeader` on the `DateCalendar` component or `item` on the `RichTreeView` component. +This is the role of slots like `calendarHeader` on the `DateCalendar` component or `item` on the Rich Tree View component. These slots receive props specific to this part of the UI and will most likely not be re-use throughout your application. ## Basic usage diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md index e7e99e4e91473..0fcd53b811bde 100644 --- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md +++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md @@ -140,10 +140,10 @@ The same change has been applied to the `ContentComponent` prop: } ``` -### βœ… Use `SimpleTreeView` instead of `TreeView` +### βœ… Use Simple Tree View instead of Tree View -The `TreeView` component has been deprecated and will be removed in the next major. -You can start replacing it with the new `SimpleTreeView` component which has exactly the same API: +The Tree View component has been deprecated and will be removed in the next major. +You can start replacing it with the new Simple Tree View component which has exactly the same API: ```diff -import { TreeView } from '@mui/x-tree-view'; @@ -423,7 +423,7 @@ If you were using the `onNodeToggle` prop to react to the expansion or collapse you can use the new `onItemExpansionToggle` prop which is called whenever an item is expanded or collapsed with its id and expansion status ```tsx -// It is also available on the deprecated `TreeView` component +// It is also available on the deprecated Tree View component console.log(itemId, isExpanded) @@ -461,7 +461,7 @@ If you were using the `onNodeSelect` prop to react to the selection or deselecti you can use the new `onItemSelectionToggle` prop which is called whenever an item is selected or deselected with its id and selection status. ```tsx -// It is also available on the deprecated `TreeView` component +// It is also available on the deprecated Tree View component console.log(itemId, isSelected) diff --git a/docs/data/tree-view/getting-started/getting-started.md b/docs/data/tree-view/getting-started/getting-started.md index 1439118521462..6acc9e5382c17 100644 --- a/docs/data/tree-view/getting-started/getting-started.md +++ b/docs/data/tree-view/getting-started/getting-started.md @@ -72,7 +72,7 @@ Take a look at the [Styled engine guide](/material-ui/integrations/styled-compon ## Render your first component -To make sure that everything is set up correctly, try rendering a `SimpleTreeView` component: +To make sure that everything is set up correctly, try rendering a Simple Tree View component: {{"demo": "FirstComponent.js"}} diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md index 64c3749656524..dc29f8b5bb92c 100644 --- a/docs/data/tree-view/overview/overview.md +++ b/docs/data/tree-view/overview/overview.md @@ -53,8 +53,8 @@ The `@mui/x-tree-view` package exposes two different components to define your t This is the long-standing component that is very similar to the one used in previous versions (`@mui/x-tree-view@6` and `@mui/lab`). -When using `SimpleTreeView`, -you can import it from `@mui/x-tree-view/TreeItem` and use it as a child of the `SimpleTreeView` component: +When using Simple Tree View, +you can import it from `@mui/x-tree-view/TreeItem` and use it as a child of the Simple Tree View component: ```tsx import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; @@ -70,7 +70,7 @@ export default function App() { } ``` -When using `RichTreeView`, +When using Rich Tree View, you don't have to import anything; it's the default component used to render the items: ```tsx @@ -85,8 +85,8 @@ export default function App() { This is a new component that provides a more powerful customization API, and will eventually replace `TreeItem`. -When using `SimpleTreeView`, -you can import it from `@mui/x-tree-view/TreeItem2` and use it as a child of the `SimpleTreeView` component: +When using Simple Tree View, +you can import it from `@mui/x-tree-view/TreeItem2` and use it as a child of the Simple Tree View component: ```tsx import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView'; @@ -102,8 +102,8 @@ export default function App() { } ``` -When using `RichTreeView`, -you can import it from `@mui/x-tree-view/TreeItem2` and pass it as a slot of the `RichTreeView` component: +When using Rich Tree View, +you can import it from `@mui/x-tree-view/TreeItem2` and pass it as a slot of the Rich Tree View component: ```tsx import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; diff --git a/docs/data/tree-view/rich-tree-view/items/items.md b/docs/data/tree-view/rich-tree-view/items/items.md index fbf179e3685e8..964ee3b266f2b 100644 --- a/docs/data/tree-view/rich-tree-view/items/items.md +++ b/docs/data/tree-view/rich-tree-view/items/items.md @@ -28,7 +28,7 @@ Each item must have a unique identifier. This identifier is used internally to identify the item in the various models and to track the item across updates. -By default, the `RichTreeView` component looks for a property named `id` in the data set to get that identifier: +By default, the Rich Tree View component looks for a property named `id` in the data set to get that identifier: ```tsx const ITEMS = [{ id: 'tree-view-community' }]; @@ -36,7 +36,7 @@ const ITEMS = [{ id: 'tree-view-community' }]; ; ``` -If the item's identifier is not called `id`, then you need to use the `getItemId` prop to tell the `RichTreeView` component where it is located. +If the item's identifier is not called `id`, then you need to use the `getItemId` prop to tell the Rich Tree View component where it is located. The following demo shows how to use `getItemId` to grab the unique identifier from a property named `internalId`: @@ -63,7 +63,7 @@ It could be achieved by either defining the prop outside the component scope or Each item must have a label which does not need to be unique. -By default, the `RichTreeView` component looks for a property named `label` in the data set to get that label: +By default, the Rich Tree View component looks for a property named `label` in the data set to get that label: ```tsx const ITEMS = [{ label: '@mui/x-tree-view' }]; @@ -71,7 +71,7 @@ const ITEMS = [{ label: '@mui/x-tree-view' }]; ; ``` -If the item's label is not called `label`, then you need to use the `getItemLabel` prop to tell the `RichTreeView` component where it's located: +If the item's label is not called `label`, then you need to use the `getItemLabel` prop to tell the Rich Tree View component where it's located: The following demo shows how to use `getItemLabel` to grab the unique identifier from a property named `name`: @@ -95,7 +95,7 @@ It could be achieved by either defining the prop outside the component scope or ::: :::warning -Unlike the `SimpleTreeView` component, the `RichTreeView` component only supports string labels, you cannot pass React nodes to it. +Unlike the Simple Tree View component, the Rich Tree View component only supports string labels, you cannot pass React nodes to it. ::: ## Disabled items diff --git a/docs/pages/x/api/tree-view/tree-item-2.json b/docs/pages/x/api/tree-view/tree-item-2.json index 547383a665af3..0cd0b0264d171 100644 --- a/docs/pages/x/api/tree-view/tree-item-2.json +++ b/docs/pages/x/api/tree-view/tree-item-2.json @@ -67,7 +67,7 @@ }, { "name": "dragAndDropOverlay", - "description": "The component that renders the overlay when an item reordering is ongoing.\nWarning: This slot is only useful when using the `RichTreeViewPro` component.", + "description": "The component that renders the overlay when an item reordering is ongoing.\nWarning: This slot is only useful when using the Rich Tree View Pro component.", "default": "TreeItem2DragAndDropOverlay", "class": "MuiTreeItem2-dragAndDropOverlay" }, 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 index 34914eb5f40ff..8048132ac3f75 100644 --- a/docs/translations/api-docs/tree-view/tree-view/tree-view.json +++ b/docs/translations/api-docs/tree-view/tree-view/tree-view.json @@ -1,5 +1,5 @@ { - "componentDescription": "This component has been deprecated in favor of the new `SimpleTreeView` 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)", + "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()." diff --git a/packages/x-codemod/README.md b/packages/x-codemod/README.md index b2b39eed5ab0c..32eb12c7aa557 100644 --- a/packages/x-codemod/README.md +++ b/packages/x-codemod/README.md @@ -247,7 +247,7 @@ The list includes these transformers #### `rename-tree-view-simple-tree-view` -Renames the `TreeView` component to `SimpleTreeView` +Renames the Tree View component to Simple Tree View ```diff -import { TreeView } from '@mui/x-tree-view'; diff --git a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx index afe086fd1f039..456405ff0d68b 100644 --- a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx +++ b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx @@ -68,7 +68,7 @@ const RichTreeViewPro = React.forwardRef(function RichTreeViewPro< if (process.env.NODE_ENV !== 'production') { if ((props as any).children != null) { warnOnce([ - 'MUI X: The `RichTreeViewPro` component does not support JSX children.', + 'MUI X: The Rich Tree View Pro component does not support JSX children.', 'If you want to add items, you need to use the `items` prop.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/.', ]); diff --git a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts index 263083dce4a99..fb95da679102a 100644 --- a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts +++ b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts @@ -256,7 +256,7 @@ useTreeViewItemsReordering.getDefaultizedParams = ({ params, experimentalFeature if (params.itemsReordering && !canUseFeature) { warnOnce([ 'MUI X: The items reordering feature requires the `indentationAtItemLevel` and `itemsReordering` experimental features to be enabled.', - 'You can do it by passing `experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }}` to the `RichTreeViewPro` component.', + 'You can do it by passing `experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }}` to the Rich Tree View Pro component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/', ]); } diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx index c714f5717b090..bccfc5462328b 100644 --- a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx +++ b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx @@ -61,7 +61,7 @@ const RichTreeView = React.forwardRef(function RichTreeView< if (process.env.NODE_ENV !== 'production') { if ((props as any).children != null) { warnOnce([ - 'MUI X: The `RichTreeView` component does not support JSX children.', + 'MUI X: The Rich Tree View component does not support JSX children.', 'If you want to add items, you need to use the `items` prop.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/.', ]); diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx index 55ba8c41386c6..75d91fe8f9b57 100644 --- a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx +++ b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx @@ -62,7 +62,7 @@ const SimpleTreeView = React.forwardRef(function SimpleTreeView< if (process.env.NODE_ENV !== 'production') { if ((props as any).items != null) { warnOnce([ - 'MUI X: The `SimpleTreeView` component does not support the `items` prop.', + 'MUI X: The Simple Tree View component does not support the `items` prop.', 'If you want to add items, you need to pass them as JSX children.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/simple-tree-view/items/.', ]); diff --git a/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts b/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts index 192e62a92716e..816e6638f7908 100644 --- a/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts +++ b/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts @@ -44,7 +44,7 @@ export interface TreeItem2Slots extends TreeItem2IconSlots { labelInput?: React.ElementType; /** * The component that renders the overlay when an item reordering is ongoing. - * Warning: This slot is only useful when using the `RichTreeViewPro` component. + * Warning: This slot is only useful when using the Rich Tree View Pro component. * @default TreeItem2DragAndDropOverlay */ dragAndDropOverlay?: React.ElementType; diff --git a/packages/x-tree-view/src/TreeView/TreeView.tsx b/packages/x-tree-view/src/TreeView/TreeView.tsx index 701e4351cd7c5..9ad39060897ab 100644 --- a/packages/x-tree-view/src/TreeView/TreeView.tsx +++ b/packages/x-tree-view/src/TreeView/TreeView.tsx @@ -50,7 +50,7 @@ const warn = () => { }; /** - * This component has been deprecated in favor of the new `SimpleTreeView` component. + * 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: diff --git a/packages/x-tree-view/src/internals/models/treeView.ts b/packages/x-tree-view/src/internals/models/treeView.ts index ad86ffeb39acc..6930a9625500e 100644 --- a/packages/x-tree-view/src/internals/models/treeView.ts +++ b/packages/x-tree-view/src/internals/models/treeView.ts @@ -9,11 +9,11 @@ export interface TreeViewItemMeta { expandable: boolean; disabled: boolean; /** - * Only defined for `RichTreeView` and `RichTreeViewPro`. + * Only defined for Rich Tree View and Rich Tree View Pro. */ depth?: number; /** - * Only defined for `RichTreeView` and `RichTreeViewPro`. + * Only defined for Rich Tree View and Rich Tree View Pro. */ label?: string; } diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts index 93761ead527e8..64e32040cc064 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts @@ -12,7 +12,7 @@ export interface TreeViewItemToRenderProps { export interface UseTreeViewItemsPublicAPI { /** * Get the item with the given id. - * When used in the `SimpleTreeView`, it returns an object with the `id` and `label` properties. + * When used in the Simple Tree View, it returns an object with the `id` and `label` properties. * @param {string} itemId The id of the item to retrieve. * @returns {R} The item with the given id. */ diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx index cdfd84fa5acae..99cb192142c15 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewJSXItems/useTreeViewJSXItems.tsx @@ -42,7 +42,7 @@ export const useTreeViewJSXItems: TreeViewPlugin = items: { ...prevState.items, itemMetaMap: { ...prevState.items.itemMetaMap, [item.id]: item }, - // For `SimpleTreeView`, we don't have a proper `item` object, so we create a very basic one. + // For Simple Tree View, we don't have a proper `item` object, so we create a very basic one. itemMap: { ...prevState.items.itemMap, [item.id]: { id: item.id, label: item.label } }, }, }; diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.ts index ef43558d8394a..460b4667674c4 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewLabel/useTreeViewLabel.ts @@ -91,7 +91,7 @@ useTreeViewLabel.getDefaultizedParams = ({ params, experimentalFeatures }) => { if (params.isItemEditable && !canUseFeature) { warnOnce([ 'MUI X: The label editing feature requires the `labelEditing` experimental feature to be enabled.', - 'You can do it by passing `experimentalFeatures={{ labelEditing: true}}` to the `RichTreeViewPro` component.', + 'You can do it by passing `experimentalFeatures={{ labelEditing: true}}` to the Rich Tree View Pro component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/editing/', ]); } diff --git a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts index 68080b4f4f735..00cc5152db767 100644 --- a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts +++ b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts @@ -201,7 +201,7 @@ export interface UseTreeItem2ReturnValue< ) => UseTreeItem2GroupTransitionSlotProps; /** * Resolver for the DragAndDropOverlay slot's props. - * Warning: This slot is only useful when using the `RichTreeViewPro` component. + * Warning: This slot is only useful when using the Rich Tree View Pro component. * @param {ExternalProps} externalProps Additional props for the DragAndDropOverlay slot. * @returns {UseTreeItem2DragAndDropOverlaySlotProps} Props that should be spread on the DragAndDropOverlay slot. */ diff --git a/test/utils/tree-view/describeTreeView/describeTreeView.tsx b/test/utils/tree-view/describeTreeView/describeTreeView.tsx index ce3368a259da1..8063e32ad3302 100644 --- a/test/utils/tree-view/describeTreeView/describeTreeView.tsx +++ b/test/utils/tree-view/describeTreeView/describeTreeView.tsx @@ -325,7 +325,7 @@ type DescribeTreeView = { * ``` * * Several things to note: - * - The `render` function takes an array of items, even for `SimpleTreeView` + * - The `render` function takes an array of items, even for Simple Tree View * - Except for `items`, all the other properties passed to `render` will be forwarded to the Tree View as props * - If an item has no label, its `id` will be used as the label */ From 252b7d5374a05783da9aa182c4bd18a0855418d4 Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Mon, 14 Oct 2024 10:41:29 -0700 Subject: [PATCH 3/5] tree item --- CHANGELOG.md | 24 ++++++++-------- .../migration-tree-view-v6.md | 28 +++++++++---------- docs/data/tree-view/overview/overview.md | 10 +++---- .../customization/customization.md | 4 +-- .../rich-tree-view/editing/editing.md | 4 +-- .../rich-tree-view/headless/headless.md | 2 +- .../customization/customization.md | 4 +-- .../tree-item-customization.md | 4 +-- .../x/api/tree-view/rich-tree-view-pro.json | 2 +- .../pages/x/api/tree-view/rich-tree-view.json | 2 +- .../x/api/tree-view/simple-tree-view.json | 2 +- docs/pages/x/api/tree-view/tree-item-2.json | 2 +- docs/pages/x/api/tree-view/tree-item.json | 4 +-- docs/pages/x/api/tree-view/tree-view.json | 2 +- .../modules/components/TreeItem2Anatomy.js | 2 +- .../rich-tree-view-pro.json | 16 +++++------ .../rich-tree-view/rich-tree-view.json | 14 +++++----- .../simple-tree-view/simple-tree-view.json | 14 +++++----- .../tree-view/tree-item-2/tree-item-2.json | 2 +- .../tree-view/tree-item/tree-item.json | 6 ++-- .../tree-view/tree-view/tree-view.json | 14 +++++----- .../src/RichTreeViewPro/RichTreeViewPro.tsx | 14 +++++----- .../useTreeViewItemsReordering.types.ts | 2 +- .../src/RichTreeView/RichTreeView.tsx | 12 ++++---- .../src/SimpleTreeView/SimpleTreeView.tsx | 12 ++++---- .../x-tree-view/src/TreeItem/TreeItem.tsx | 8 +++--- .../src/TreeItem/TreeItem.types.ts | 12 ++++---- .../src/TreeItem/TreeItemContent.tsx | 18 ++++++------ .../src/TreeItem/treeItemClasses.ts | 2 +- .../src/TreeItem2Icon/TreeItem2Icon.types.ts | 2 +- .../x-tree-view/src/TreeView/TreeView.tsx | 12 ++++---- .../useTreeViewId/useTreeViewId.utils.ts | 2 +- .../useTreeViewExpansion.types.ts | 4 +-- .../useTreeViewFocus.types.ts | 2 +- .../useTreeViewIcons.types.ts | 2 +- .../useTreeViewItems.types.ts | 2 +- .../useTreeViewSelection.types.ts | 4 +-- .../src/useTreeItem2/useTreeItem2.ts | 2 +- 38 files changed, 137 insertions(+), 137 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a31e8b150a61b..fd5d06f705463 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -79,7 +79,7 @@ Same changes as in `@mui/x-charts@7.20.0`. - [docs] Add custom columns panel demo (#14825) @cherniavskii - [docs] Capitalize all instances of "Data Grid" (#14884) @samuelsycamore - [docs] Divide charts `tooltip` and `highlighting` pages (#14824) @JCQuintas -- [docs] Document the `TreeItem2` component and the `useTreeItem2` hook (#14551) @noraleonte +- [docs] Document the Tree Item 2 component and the `useTreeItem2` hook (#14551) @noraleonte - [docs] Fix column pinning for "Disable detail panel content scroll" section (#14854 and #14885) @kalyan90 - [docs] Fix detail panel demo not working well with pinned columns (#14883) @cherniavskii - [docs] New recipe of a read-only field (#14606) @flaviendelangle @@ -1455,7 +1455,7 @@ Same changes as in `@mui/x-date-pickers@7.7.0`. - [core] Add `eslint-plugin-react-compiler` experimental version and rules (#13415) @JCQuintas - [core] Minor setup cleanup (#13467) @LukasTy - [infra] Adjust CI setup (#13448) @LukasTy -- [test] Add tests for the custom slots of `TreeItem2` (#13314) @flaviendelangle +- [test] Add tests for the custom slots of Tree Item 2 (#13314) @flaviendelangle ## 7.6.2 @@ -1816,7 +1816,7 @@ Same changes as in `@mui/x-date-pickers@7.4.0`. #### `@mui/x-tree-view@7.4.0` -- [TreeView] Fix props propagation and theme entry in `TreeItem2` (#12889) @flaviendelangle +- [TreeView] Fix props propagation and theme entry in Tree Item 2 (#12889) @flaviendelangle ### Docs @@ -2222,13 +2222,13 @@ Same changes as in `@mui/x-date-pickers@7.1.1`, plus: - [docs] Move Data Grid interfaces to standard API page layout (#12016) @alexfauquette - [docs] Remove ` around @default values (#12158) @alexfauquette - [docs] Remove `day` from the default `dayOfWeekFormatter` function params (#12644) @LukasTy -- [docs] Use `TreeItem2` for icon expansion example on Rich Tree View (#12563) @flaviendelangle +- [docs] Use Tree Item 2 for icon expansion example on Rich Tree View (#12563) @flaviendelangle ### Core - [core] Add cherry-pick `master` to `v6` action (#12648) @LukasTy - [core] Fix typo in `@mui/x-tree-view-pro/themeAugmentation` (#12674) @flaviendelangle -- [core] Introduce `describeTreeView` to run test on Simple Tree View and Rich Tree View, using `TreeItem` and `TreeItem2` + migrate expansion tests (#12428) @flaviendelangle +- [core] Introduce `describeTreeView` to run test on Simple Tree View and Rich Tree View, using Tree Item and Tree Item 2 + migrate expansion tests (#12428) @flaviendelangle - [core] Limit `test-types` CI step allowed memory (#12651) @LukasTy - [core] Remove explicit `express` package (#12602) @LukasTy - [core] Update to new embedded translations in the docs package (#12232) @Janpot @@ -2420,7 +2420,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0`, plus: #### Breaking changes -- The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency: +- The required `nodeId` prop used by the Tree Item has been renamed to `itemId` for consistency: ```diff @@ -2573,7 +2573,7 @@ The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency: #### `@mui/x-tree-view@7.0.0-beta.7` - [TreeView] Clean the usage of the term "item" and "node" in API introduced during v7 (#12368) @noraleonte -- [TreeView] Introduce a new `TreeItem2` component and a new `useTreeItem2` hook (#11721) @flaviendelangle +- [TreeView] Introduce a new Tree Item 2 component and a new `useTreeItem2` hook (#11721) @flaviendelangle - [TreeView] Rename `onNodeFocus` to `onItemFocus` (#12419) @noraleonte ### Docs @@ -2631,9 +2631,9 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.6`. #### Breaking changes -- The component used to animate the item children is now defined as a slot on the `TreeItem` component. +- The component used to animate the item children is now defined as a slot on the Tree Item component. - If you were passing a `TransitionComponent` or `TransitionProps` to your `TreeItem` component, + If you were passing a `TransitionComponent` or `TransitionProps` to your Tree Item component, you need to use the new `groupTransition` slot on this component: ```diff @@ -2649,7 +2649,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.6`. ``` -- The `group` class of the `TreeItem` component has been renamed to `groupTransition` to match with its new slot name. +- The `group` class of the Tree Item component has been renamed to `groupTransition` to match with its new slot name. ```diff const StyledTreeItem = styled(TreeItem)({ @@ -3557,7 +3557,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.9`. ``` - The `useTreeItem` hook has been renamed `useTreeItemState`. - This will help create a new headless version of the `TreeItem` component based on a future `useTreeItem` hook. + This will help create a new headless version of the Tree Item component based on a future `useTreeItem` hook. ```diff -import { TreeItem, useTreeItem } from '@mui/x-tree-view/TreeItem'; @@ -3768,7 +3768,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss - 🎁 New component to create a Tree View from a structured data source: - You can now directly pass your data to the Rich Tree View component instead of manually converting it into JSX `TreeItem` components: + You can now directly pass your data to the Rich Tree View component instead of manually converting it into JSX Tree Item components: ```tsx const ITEMS = [ diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md index 0fcd53b811bde..a5b2975c08bd0 100644 --- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md +++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md @@ -113,7 +113,7 @@ Here is an example of how you can transpile these features on Webpack 4 using th ### βœ… Rename `nodeId` to `itemId` -The required `nodeId` prop used by the `TreeItem` has been renamed to `itemId` for consistency: +The required `nodeId` prop used by the Tree Item has been renamed to `itemId` for consistency: ```diff @@ -193,7 +193,7 @@ If you were using the `treeViewClasses` object, you can replace it with the new #### Define `expandIcon` The icon used to expand the children of an item (rendered when this item is collapsed) -is now defined as a slot both on the Tree View and the `TreeItem` components. +is now defined as a slot both on the Tree View and the Tree Item components. If you were using the `ChevronRight` icon from `@mui/icons-material`, you can stop passing it to your component because it is now the default value: @@ -224,7 +224,7 @@ you need to use the new `expandIcon` slot on this component: Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component. ::: -If you were passing another icon to your `TreeItem` component, +If you were passing another icon to your Tree Item component, you need to use the new `expandIcon` slot on this component: ```diff @@ -241,7 +241,7 @@ you need to use the new `expandIcon` slot on this component: #### Define `collapseIcon` The icon used to collapse the children of an item (rendered when this item is expanded) -is now defined as a slot both on the Tree View and the `TreeItem` components. +is now defined as a slot both on the Tree View and the Tree Item components. If you were using the `ExpandMore` icon from `@mui/icons-material`, you can stop passing it to your component because it is now the default value: @@ -272,7 +272,7 @@ you need to use the new `collapseIcon` slot on this component: Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component. ::: -If you were passing another icon to your `TreeItem` component, +If you were passing another icon to your Tree Item component, you need to use the new `collapseIcon` slot on this component: ```diff @@ -306,7 +306,7 @@ by passing the same icon to both the `collapseIcon` and the `expandIcon` slots o #### Define `endIcon` The icon rendered next to an item without children -is now defined as a slot both on the Tree View and the `TreeItem` components. +is now defined as a slot both on the Tree View and the Tree Item components. If you were passing an icon to your Tree View component, you need to use the new `endIcon` slot on this component: @@ -324,7 +324,7 @@ you need to use the new `endIcon` slot on this component: Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component. ::: -If you were passing an icon to your `TreeItem` component, +If you were passing an icon to your Tree Item component, you need to use the new `endIcon` slot on this component: ```diff @@ -341,9 +341,9 @@ you need to use the new `endIcon` slot on this component: #### Define `icon` The icon rendered next to an item -is now defined as a slot on the `TreeItem` component. +is now defined as a slot on the Tree Item component. -If you were passing an icon to your `TreeItem` component, +If you were passing an icon to your Tree Item component, you need to use the new `icon` slot on this component: ```diff @@ -364,9 +364,9 @@ Note that the `slots` prop expects a React component, not the JSX element return ### βœ… Use slots to define the group transition The component used to animate the item children -is now defined as a slot on the `TreeItem` component. +is now defined as a slot on the Tree Item component. -If you were passing a `TransitionComponent` or `TransitionProps` to your `TreeItem` component, +If you were passing a `TransitionComponent` or `TransitionProps` to your Tree Item component, you need to use the new `groupTransition` slot on this component: ```diff @@ -382,9 +382,9 @@ you need to use the new `groupTransition` slot on this component: ``` -### Rename the `group` class of the `TreeItem` component +### Rename the `group` class of the Tree Item component -The `group` class of the `TreeItem` component has been renamed to `groupTransition` to match with its new slot name. +The `group` class of the Tree Item component has been renamed to `groupTransition` to match with its new slot name. ```diff const StyledTreeItem = styled(TreeItem)({ @@ -512,7 +512,7 @@ For example, if you were writing a test with `react-testing-library`, here is wh ### βœ… Use `useTreeItemState` instead of `useTreeItem` The `useTreeItem` hook has been renamed `useTreeItemState`. -This will help create a new headless version of the `TreeItem` component based on a future `useTreeItem` hook. +This will help create a new headless version of the Tree Item component based on a future `useTreeItem` hook. ```diff -import { TreeItem, useTreeItem } from '@mui/x-tree-view/TreeItem'; diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md index dc29f8b5bb92c..efe857df23cef 100644 --- a/docs/data/tree-view/overview/overview.md +++ b/docs/data/tree-view/overview/overview.md @@ -46,10 +46,10 @@ At the moment, the Simple and Rich Tree Views are similar in terms of feature su The `@mui/x-tree-view` package exposes two different components to define your tree items: -- `TreeItem` -- `TreeItem2` +- Tree Item +- Tree Item 2 -#### `TreeItem` +#### Tree Item This is the long-standing component that is very similar to the one used in previous versions (`@mui/x-tree-view@6` and `@mui/lab`). @@ -81,9 +81,9 @@ export default function App() { } ``` -#### `TreeItem2` +#### Tree Item 2 -This is a new component that provides a more powerful customization API, and will eventually replace `TreeItem`. +This is a new component that provides a more powerful customization API, and will eventually replace Tree Item. When using Simple Tree View, you can import it from `@mui/x-tree-view/TreeItem2` and use it as a child of the Simple Tree View component: diff --git a/docs/data/tree-view/rich-tree-view/customization/customization.md b/docs/data/tree-view/rich-tree-view/customization/customization.md index adfe395f9c196..32b222f605ba7 100644 --- a/docs/data/tree-view/rich-tree-view/customization/customization.md +++ b/docs/data/tree-view/rich-tree-view/customization/customization.md @@ -26,7 +26,7 @@ The demo below shows how to add icons using both an existing icon library, such ### Custom toggle animations -Use the `groupTransition` slot on the `TreeItem` to pass a component that handles your animation. +Use the `groupTransition` slot on the Tree Item to pass a component that handles your animation. The demo below is animated using MaterialΒ UI's [Collapse](/material-ui/transitions/#collapse) component together with the [react-spring](https://www.react-spring.dev/) library. @@ -55,7 +55,7 @@ The demo below shows how to add an avatar and custom typography elements. ### File explorer :::warning -This example is built using the new `TreeItem2` component +This example is built using the new Tree Item 2 component which adds several slots to modify the content of the Tree Item or change its behavior. You can learn more about this new component in the [Overview page](/x/react-tree-view/#tree-item-components). diff --git a/docs/data/tree-view/rich-tree-view/editing/editing.md b/docs/data/tree-view/rich-tree-view/editing/editing.md index 73e923bb7cffa..9ad100768ad72 100644 --- a/docs/data/tree-view/rich-tree-view/editing/editing.md +++ b/docs/data/tree-view/rich-tree-view/editing/editing.md @@ -45,8 +45,8 @@ Use the `onItemLabelChange` prop to trigger an action when the label of an item ## Change the default behavior -By default, blurring the tree item saves the new value if there is one. -To modify this behavior, use the `slotProps` of the `TreeItem2`. +By default, blurring the Tree Item saves the new value if there is one. +To modify this behavior, use the `slotProps` of the Tree Item 2. {{"demo": "CustomBehavior.js"}} diff --git a/docs/data/tree-view/rich-tree-view/headless/headless.md b/docs/data/tree-view/rich-tree-view/headless/headless.md index 4d997179eddcd..ece539bc73d5d 100644 --- a/docs/data/tree-view/rich-tree-view/headless/headless.md +++ b/docs/data/tree-view/rich-tree-view/headless/headless.md @@ -143,7 +143,7 @@ Once `focusedItemId` becomes a model, we could consider removing the notion of s ### Populate the Tree View instance -The Tree View instance is an object accessible in all the plugins and in the `TreeItem`. +The Tree View instance is an object accessible in all the plugins and in the Tree Item. It is the main way a plugin can provide features to the rest of the component. ```ts diff --git a/docs/data/tree-view/simple-tree-view/customization/customization.md b/docs/data/tree-view/simple-tree-view/customization/customization.md index 4a18e36b438b5..6cd1695ce2f6c 100644 --- a/docs/data/tree-view/simple-tree-view/customization/customization.md +++ b/docs/data/tree-view/simple-tree-view/customization/customization.md @@ -26,7 +26,7 @@ The demo below shows how to add icons using both an existing icon library, such ### Custom toggle animations -Use the `groupTransition` slot on the `TreeItem` to pass a component that handles your animation. +Use the `groupTransition` slot on the Tree Item to pass a component that handles your animation. The demo below is animated using MaterialΒ UI's [Collapse](/material-ui/transitions/#collapse) component together with the [react-spring](https://www.react-spring.dev/) library. @@ -62,7 +62,7 @@ Target the `treeItemClasses.groupTransition` class to add connection borders bet ### Gmail clone :::warning -This example is built using the new `TreeItem2` component +This example is built using the new Tree Item 2 component which adds several slots to modify the content of the Tree Item or change its behavior. You can learn more about this new component in the [Overview page](/x/react-tree-view/#tree-item-components). diff --git a/docs/data/tree-view/tree-item-customization/tree-item-customization.md b/docs/data/tree-view/tree-item-customization/tree-item-customization.md index 93c39d69cd276..f752249029edf 100644 --- a/docs/data/tree-view/tree-item-customization/tree-item-customization.md +++ b/docs/data/tree-view/tree-item-customization/tree-item-customization.md @@ -81,7 +81,7 @@ By default, a nested item is indented by `12px` from its parent item. {{"demo": "ItemChildrenIndentationProp.js"}} :::success -This feature is compatible with both the `TreeItem` and `TreeItem2` components +This feature is compatible with both the Tree Item and Tree Item 2 components If you are using a custom Tree Item component, and you want to override the padding, then apply the following padding to your `groupTransition` element: @@ -116,7 +116,7 @@ It will become the default behavior in the next major version of the Tree View c {{"demo": "IndentationAtItemLevel.js"}} :::success -This feature is compatible with both the `TreeItem` and `TreeItem2` components and with the `itemChildrenIndentation` prop. +This feature is compatible with both the Tree Item and Tree Item 2 components and with the `itemChildrenIndentation` prop. If you are using a custom Tree Item component, and you want to override the padding, then apply the following padding to your `content` element: diff --git a/docs/pages/x/api/tree-view/rich-tree-view-pro.json b/docs/pages/x/api/tree-view/rich-tree-view-pro.json index 7cd100636eb8f..fb4b208b9f1de 100644 --- a/docs/pages/x/api/tree-view/rich-tree-view-pro.json +++ b/docs/pages/x/api/tree-view/rich-tree-view-pro.json @@ -178,7 +178,7 @@ }, { "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.", + "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 } ], diff --git a/docs/pages/x/api/tree-view/rich-tree-view.json b/docs/pages/x/api/tree-view/rich-tree-view.json index 53335f98fc5e9..98191cec2fc07 100644 --- a/docs/pages/x/api/tree-view/rich-tree-view.json +++ b/docs/pages/x/api/tree-view/rich-tree-view.json @@ -153,7 +153,7 @@ }, { "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.", + "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 } ], diff --git a/docs/pages/x/api/tree-view/simple-tree-view.json b/docs/pages/x/api/tree-view/simple-tree-view.json index 0e9d838a73275..b3507fdce74d7 100644 --- a/docs/pages/x/api/tree-view/simple-tree-view.json +++ b/docs/pages/x/api/tree-view/simple-tree-view.json @@ -108,7 +108,7 @@ }, { "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.", + "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 } ], diff --git a/docs/pages/x/api/tree-view/tree-item-2.json b/docs/pages/x/api/tree-view/tree-item-2.json index 0cd0b0264d171..595e223354131 100644 --- a/docs/pages/x/api/tree-view/tree-item-2.json +++ b/docs/pages/x/api/tree-view/tree-item-2.json @@ -76,7 +76,7 @@ { "name": "endIcon", "description": "The icon displayed next to an end item.", "class": null }, { "name": "icon", - "description": "The icon to display next to the tree item's label.", + "description": "The icon to display next to the Tree Item's label.", "class": null } ], diff --git a/docs/pages/x/api/tree-view/tree-item.json b/docs/pages/x/api/tree-view/tree-item.json index 33853fb02fb1e..a9d7f6058830d 100644 --- a/docs/pages/x/api/tree-view/tree-item.json +++ b/docs/pages/x/api/tree-view/tree-item.json @@ -44,7 +44,7 @@ { "name": "endIcon", "description": "The icon displayed next to an end item.", "class": null }, { "name": "icon", - "description": "The icon to display next to the tree item's label.", + "description": "The icon to display next to the Tree Item's label.", "class": null }, { @@ -106,7 +106,7 @@ { "key": "iconContainer", "className": "MuiTreeItem-iconContainer", - "description": "Styles applied to the tree item icon.", + "description": "Styles applied to the Tree Item icon.", "isGlobal": false }, { diff --git a/docs/pages/x/api/tree-view/tree-view.json b/docs/pages/x/api/tree-view/tree-view.json index c03fa0e611a9e..dc8fc5e8013fe 100644 --- a/docs/pages/x/api/tree-view/tree-view.json +++ b/docs/pages/x/api/tree-view/tree-view.json @@ -108,7 +108,7 @@ }, { "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.", + "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 } ], diff --git a/docs/src/modules/components/TreeItem2Anatomy.js b/docs/src/modules/components/TreeItem2Anatomy.js index 2f46bb4dce947..0dded349e5b0a 100644 --- a/docs/src/modules/components/TreeItem2Anatomy.js +++ b/docs/src/modules/components/TreeItem2Anatomy.js @@ -15,7 +15,7 @@ export default function TreeItem2Anatomy() { ); diff --git a/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json b/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json index ae2a942b1ea1f..d7edf9c18d6d7 100644 --- a/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json +++ b/docs/translations/api-docs/tree-view/rich-tree-view-pro/rich-tree-view-pro.json @@ -75,21 +75,21 @@ "description": "If true, ctrl and shift will trigger multiselect." }, "onExpandedItemsChange": { - "description": "Callback fired when tree items are expanded/collapsed.", + "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.", + "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.", + "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.", @@ -97,7 +97,7 @@ } }, "onItemFocus": { - "description": "Callback fired when a given tree item is focused.", + "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." @@ -111,7 +111,7 @@ } }, "onItemPositionChange": { - "description": "Callback fired when a tree item is moved in the tree.", + "description": "Callback fired when a Tree Item is moved in the tree.", "typeDescriptions": { "params": "The params describing the item re-ordering.", "params.itemId": "The id of the item moved.", @@ -120,7 +120,7 @@ } }, "onItemSelectionToggle": { - "description": "Callback fired when a tree item is selected or deselected.", + "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.", @@ -128,7 +128,7 @@ } }, "onSelectedItemsChange": { - "description": "Callback fired when tree items are selected/deselected.", + "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." @@ -146,7 +146,7 @@ "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.", + "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.", "item": "Custom component for the item.", "root": "Element rendered at the root." diff --git a/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json b/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json index adecf87a86eab..feba556e087cb 100644 --- a/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json +++ b/docs/translations/api-docs/tree-view/rich-tree-view/rich-tree-view.json @@ -55,21 +55,21 @@ "description": "If true, ctrl and shift will trigger multiselect." }, "onExpandedItemsChange": { - "description": "Callback fired when tree items are expanded/collapsed.", + "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.", + "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.", + "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.", @@ -77,7 +77,7 @@ } }, "onItemFocus": { - "description": "Callback fired when a given tree item is focused.", + "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." @@ -91,7 +91,7 @@ } }, "onItemSelectionToggle": { - "description": "Callback fired when a tree item is selected or deselected.", + "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.", @@ -99,7 +99,7 @@ } }, "onSelectedItemsChange": { - "description": "Callback fired when tree items are selected/deselected.", + "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." @@ -117,7 +117,7 @@ "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.", + "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.", "item": "Custom component for the item.", "root": "Element rendered at the root." diff --git a/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json b/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json index 7e352ea3413a2..1d9142ee23a96 100644 --- a/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json +++ b/docs/translations/api-docs/tree-view/simple-tree-view/simple-tree-view.json @@ -38,21 +38,21 @@ "description": "If true, ctrl and shift will trigger multiselect." }, "onExpandedItemsChange": { - "description": "Callback fired when tree items are expanded/collapsed.", + "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.", + "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.", + "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.", @@ -60,14 +60,14 @@ } }, "onItemFocus": { - "description": "Callback fired when a given tree item is focused.", + "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.", + "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.", @@ -75,7 +75,7 @@ } }, "onSelectedItemsChange": { - "description": "Callback fired when tree items are selected/deselected.", + "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." @@ -93,7 +93,7 @@ "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.", + "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/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json b/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json index 1ec2e89e98d8e..c714f359c7e9f 100644 --- a/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json +++ b/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json @@ -56,7 +56,7 @@ "endIcon": "The icon displayed next to an end item.", "expandIcon": "The icon used to expand the item.", "groupTransition": "The component that renders the children of the item.", - "icon": "The icon to display next to the tree item's label.", + "icon": "The icon to display next to the Tree Item's label.", "iconContainer": "The component that renders the icon.", "label": "The component that renders the item label.", "labelInput": "The component that renders the input to edit the label when the item is editable and is currently being edited.", diff --git a/docs/translations/api-docs/tree-view/tree-item/tree-item.json b/docs/translations/api-docs/tree-view/tree-item/tree-item.json index f0febee14167b..19addf4e001fa 100644 --- a/docs/translations/api-docs/tree-view/tree-item/tree-item.json +++ b/docs/translations/api-docs/tree-view/tree-item/tree-item.json @@ -10,7 +10,7 @@ "ContentProps": { "description": "Props applied to ContentComponent." }, "disabled": { "description": "If true, the item is disabled." }, "itemId": { "description": "The id of the item." }, - "label": { "description": "The tree item label." }, + "label": { "description": "The Tree Item label." }, "onFocus": { "description": "This prop isn't supported. Use the onItemFocus callback on the tree if you need to monitor a item's focus." }, @@ -62,7 +62,7 @@ }, "iconContainer": { "description": "Styles applied to {{nodeName}}.", - "nodeName": "the tree item icon" + "nodeName": "the Tree Item icon" }, "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the label element" }, "labelInput": { @@ -82,6 +82,6 @@ "endIcon": "The icon displayed next to an end item.", "expandIcon": "The icon used to expand the item.", "groupTransition": "The component that animates the appearance / disappearance of the item's children.", - "icon": "The icon to display next to the tree item's label." + "icon": "The icon to display next to the Tree Item's label." } } 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 index 8048132ac3f75..069ba6b9dbc67 100644 --- a/docs/translations/api-docs/tree-view/tree-view/tree-view.json +++ b/docs/translations/api-docs/tree-view/tree-view/tree-view.json @@ -38,21 +38,21 @@ "description": "If true, ctrl and shift will trigger multiselect." }, "onExpandedItemsChange": { - "description": "Callback fired when tree items are expanded/collapsed.", + "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.", + "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.", + "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.", @@ -60,14 +60,14 @@ } }, "onItemFocus": { - "description": "Callback fired when a given tree item is focused.", + "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.", + "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.", @@ -75,7 +75,7 @@ } }, "onSelectedItemsChange": { - "description": "Callback fired when tree items are selected/deselected.", + "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." @@ -93,7 +93,7 @@ "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.", + "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-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx index 456405ff0d68b..6285b77d1f072 100644 --- a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx +++ b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx @@ -258,26 +258,26 @@ RichTreeViewPro.propTypes = { */ multiSelect: PropTypes.bool, /** - * Callback fired when tree items are expanded/collapsed. + * 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. + * 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. + * 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. + * 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. */ @@ -289,7 +289,7 @@ RichTreeViewPro.propTypes = { */ onItemLabelChange: PropTypes.func, /** - * Callback fired when a tree item is moved in the tree. + * Callback fired when a Tree Item is moved in the tree. * @param {object} params The params describing the item re-ordering. * @param {string} params.itemId The id of the item moved. * @param {TreeViewItemReorderPosition} params.oldPosition The old position of the item. @@ -297,14 +297,14 @@ RichTreeViewPro.propTypes = { */ onItemPositionChange: PropTypes.func, /** - * Callback fired when a tree item is selected or deselected. + * 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. + * 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. diff --git a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts index 25f2fe2a4b307..aa5f519e2c85b 100644 --- a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts +++ b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.types.ts @@ -90,7 +90,7 @@ export interface UseTreeViewItemsReorderingParameters { newPosition: TreeViewItemReorderPosition; }) => boolean; /** - * Callback fired when a tree item is moved in the tree. + * Callback fired when a Tree Item is moved in the tree. * @param {object} params The params describing the item re-ordering. * @param {string} params.itemId The id of the item moved. * @param {TreeViewItemReorderPosition} params.oldPosition The old position of the item. diff --git a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx index bccfc5462328b..cf5ff069ef5b8 100644 --- a/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx +++ b/packages/x-tree-view/src/RichTreeView/RichTreeView.tsx @@ -226,26 +226,26 @@ RichTreeView.propTypes = { */ multiSelect: PropTypes.bool, /** - * Callback fired when tree items are expanded/collapsed. + * 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. + * 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. + * 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. + * 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. */ @@ -257,14 +257,14 @@ RichTreeView.propTypes = { */ onItemLabelChange: PropTypes.func, /** - * Callback fired when a tree item is selected or deselected. + * 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. + * 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. diff --git a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx index 75d91fe8f9b57..ff7ae43139351 100644 --- a/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx +++ b/packages/x-tree-view/src/SimpleTreeView/SimpleTreeView.tsx @@ -187,39 +187,39 @@ SimpleTreeView.propTypes = { */ multiSelect: PropTypes.bool, /** - * Callback fired when tree items are expanded/collapsed. + * 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. + * 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. + * 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. + * 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. + * 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. + * 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. diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx index 6cc7d7cbec99c..7e8cf06ff2ba9 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.tsx @@ -382,7 +382,7 @@ export const TreeItem = React.forwardRef(function TreeItem( onBlur?.(event); if ( editing || - // we can exit the editing state by clicking outside the input (within the tree item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases + // we can exit the editing state by clicking outside the input (within the Tree Item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases // we can also exit the editing state by clicking on the root itself -> want to remove the focused item from the state in this case (event.relatedTarget && isTargetInDescendants(event.relatedTarget as HTMLElement, rootRefObject.current) && @@ -523,13 +523,13 @@ TreeItem.propTypes = { className: PropTypes.string, /** * The component used to render the content of the item. - * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/. + * @deprecated Consider using the Tree Item 2 component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/. * @default TreeItemContent */ ContentComponent: elementTypeAcceptingRef, /** * Props applied to ContentComponent. - * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/. + * @deprecated Consider using the Tree Item 2 component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/. */ ContentProps: PropTypes.object, /** @@ -542,7 +542,7 @@ TreeItem.propTypes = { */ itemId: PropTypes.string.isRequired, /** - * The tree item label. + * The Tree Item label. */ label: PropTypes.node, /** diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts b/packages/x-tree-view/src/TreeItem/TreeItem.types.ts index d8e49fc3cea58..63fee0bc7b637 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts +++ b/packages/x-tree-view/src/TreeItem/TreeItem.types.ts @@ -29,7 +29,7 @@ export interface TreeItemSlots { */ endIcon?: React.ElementType; /** - * The icon to display next to the tree item's label. + * The icon to display next to the Tree Item's label. */ icon?: React.ElementType; /** @@ -69,13 +69,13 @@ export interface TreeItemProps extends Omit, slotProps?: TreeItemSlotProps; /** * The component used to render the content of the item. - * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/. + * @deprecated Consider using the Tree Item 2 component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/. * @default TreeItemContent */ ContentComponent?: React.JSXElementConstructor; /** * Props applied to ContentComponent. - * @deprecated Consider using the `TreeItem2` component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/. + * @deprecated Consider using the Tree Item 2 component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/. */ ContentProps?: React.HTMLAttributes & { ref?: React.Ref }; /** @@ -89,7 +89,7 @@ export interface TreeItemProps extends Omit, */ onFocus?: null; /** - * The tree item label. + * The Tree Item label. */ label?: React.ReactNode; /** @@ -115,7 +115,7 @@ export interface TreeItemOwnerState extends TreeItemProps { } /** - * Plugins that need to be present in the Tree View in order for `TreeItem` to work correctly. + * Plugins that need to be present in the Tree View in order for Tree Item to work correctly. */ export type TreeItemMinimalPlugins = readonly [ UseTreeViewIconsSignature, @@ -127,6 +127,6 @@ export type TreeItemMinimalPlugins = readonly [ ]; /** - * Plugins that `TreeItem` can use if they are present, but are not required. + * Plugins that Tree Item can use if they are present, but are not required. */ export type TreeItemOptionalPlugins = readonly []; diff --git a/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx b/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx index 61f3bacc9203a..5df9134e2cf1d 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx @@ -26,7 +26,7 @@ export interface TreeItemContentProps extends React.HTMLAttributes focused: string; /** State class applied to the element when disabled. */ disabled: string; - /** Styles applied to the tree item icon and collapse/expand icon. */ + /** Styles applied to the Tree Item icon and collapse/expand icon. */ iconContainer: string; /** Styles applied to the label element. */ label: string; @@ -40,7 +40,7 @@ export interface TreeItemContentProps extends React.HTMLAttributes editable: string; }; /** - * The tree item label. + * The Tree Item label. */ label?: React.ReactNode; /** @@ -48,15 +48,15 @@ export interface TreeItemContentProps extends React.HTMLAttributes */ itemId: string; /** - * The icon to display next to the tree item's label. + * The icon to display next to the Tree Item's label. */ icon?: React.ReactNode; /** - * The icon to display next to the tree item's label. Either an expansion or collapse icon. + * The icon to display next to the Tree Item's label. Either an expansion or collapse icon. */ expansionIcon?: React.ReactNode; /** - * The icon to display next to the tree item's label. Either a parent or end icon. + * The icon to display next to the Tree Item's label. Either a parent or end icon. */ displayIcon?: React.ReactNode; dragAndDropOverlayProps?: TreeItem2DragAndDropOverlayProps; @@ -199,7 +199,7 @@ TreeItemContent.propTypes = { classes: PropTypes.object.isRequired, className: PropTypes.string, /** - * The icon to display next to the tree item's label. Either a parent or end icon. + * The icon to display next to the Tree Item's label. Either a parent or end icon. */ displayIcon: PropTypes.node, dragAndDropOverlayProps: PropTypes.shape({ @@ -207,11 +207,11 @@ TreeItemContent.propTypes = { style: PropTypes.object, }), /** - * The icon to display next to the tree item's label. Either an expansion or collapse icon. + * The icon to display next to the Tree Item's label. Either an expansion or collapse icon. */ expansionIcon: PropTypes.node, /** - * The icon to display next to the tree item's label. + * The icon to display next to the Tree Item's label. */ icon: PropTypes.node, /** @@ -219,7 +219,7 @@ TreeItemContent.propTypes = { */ itemId: PropTypes.string.isRequired, /** - * The tree item label. + * The Tree Item label. */ label: PropTypes.node, labelInputProps: PropTypes.shape({ diff --git a/packages/x-tree-view/src/TreeItem/treeItemClasses.ts b/packages/x-tree-view/src/TreeItem/treeItemClasses.ts index 6b0efd7279ce5..2769166f46767 100644 --- a/packages/x-tree-view/src/TreeItem/treeItemClasses.ts +++ b/packages/x-tree-view/src/TreeItem/treeItemClasses.ts @@ -16,7 +16,7 @@ export interface TreeItemClasses { focused: string; /** State class applied to the element when disabled. */ disabled: string; - /** Styles applied to the tree item icon. */ + /** Styles applied to the Tree Item icon. */ iconContainer: string; /** Styles applied to the label element. */ label: string; diff --git a/packages/x-tree-view/src/TreeItem2Icon/TreeItem2Icon.types.ts b/packages/x-tree-view/src/TreeItem2Icon/TreeItem2Icon.types.ts index cd66abb4f8a2d..80336366ac46a 100644 --- a/packages/x-tree-view/src/TreeItem2Icon/TreeItem2Icon.types.ts +++ b/packages/x-tree-view/src/TreeItem2Icon/TreeItem2Icon.types.ts @@ -16,7 +16,7 @@ export interface TreeItem2IconSlots { */ endIcon?: React.ElementType; /** - * The icon to display next to the tree item's label. + * The icon to display next to the Tree Item's label. */ icon?: React.ElementType; } diff --git a/packages/x-tree-view/src/TreeView/TreeView.tsx b/packages/x-tree-view/src/TreeView/TreeView.tsx index 9ad39060897ab..efe8947e4c943 100644 --- a/packages/x-tree-view/src/TreeView/TreeView.tsx +++ b/packages/x-tree-view/src/TreeView/TreeView.tsx @@ -174,39 +174,39 @@ TreeView.propTypes = { */ multiSelect: PropTypes.bool, /** - * Callback fired when tree items are expanded/collapsed. + * 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. + * 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. + * 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. + * 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. + * 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. + * 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. diff --git a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.utils.ts b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.utils.ts index 8a8e42ef69ec6..f1cffe3debfd7 100644 --- a/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.utils.ts +++ b/packages/x-tree-view/src/internals/corePlugins/useTreeViewId/useTreeViewId.utils.ts @@ -7,7 +7,7 @@ export const createTreeViewDefaultId = () => { }; /** - * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a tree item. + * Generate the id attribute (i.e.: the `id` attribute passed to the DOM element) of a Tree Item. * If the user explicitly defined an id attribute, it will be returned. * Otherwise, the method creates a unique id for the item based on the Tree View id attribute and the item `itemId` * @param {object} params The parameters to determine the id attribute of the item. diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts index 88460ccf2fee3..504676c31d77c 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewExpansion/useTreeViewExpansion.types.ts @@ -57,13 +57,13 @@ export interface UseTreeViewExpansionParameters { */ defaultExpandedItems?: string[]; /** - * Callback fired when tree items are expanded/collapsed. + * 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?: (event: React.SyntheticEvent, itemIds: string[]) => void; /** - * Callback fired when a tree item is expanded or collapsed. + * 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. diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts index 9fb3d1038316b..c84b650be8d54 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewFocus/useTreeViewFocus.types.ts @@ -40,7 +40,7 @@ export interface UseTreeViewFocusInstance extends UseTreeViewFocusPublicAPI { export interface UseTreeViewFocusParameters { /** - * Callback fired when a given tree item is focused. + * 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. */ diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.ts index a303f54a84109..19b8b5e96ccd5 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewIcons/useTreeViewIcons.types.ts @@ -19,7 +19,7 @@ interface UseTreeViewIconsSlots { expandIcon?: React.ElementType; /** * 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. + * This is applied to all Tree Items and can be overridden by the TreeItem `icon` slot prop. */ endIcon?: React.ElementType; } diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts index 64e32040cc064..864fc7c3c5ba2 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewItems/useTreeViewItems.types.ts @@ -119,7 +119,7 @@ export interface UseTreeViewItemsParameters { */ getItemId?: (item: R) => TreeViewItemId; /** - * Callback fired when the `content` slot of a given tree item is clicked. + * 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. */ diff --git a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts index 4469308168010..d70f440eec262 100644 --- a/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts +++ b/packages/x-tree-view/src/internals/plugins/useTreeViewSelection/useTreeViewSelection.types.ts @@ -95,7 +95,7 @@ export interface UseTreeViewSelectionParameters, ) => void; /** - * Callback fired when a tree item is selected or deselected. + * 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. diff --git a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts index a8b8fff491e4a..93be60f8f1500 100644 --- a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts +++ b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.ts @@ -92,7 +92,7 @@ export const useTreeItem2 = < // when we enter the editing state, we focus the input -> we don't want to remove the focused item from the state if ( status.editing || - // we can exit the editing state by clicking outside the input (within the tree item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases + // we can exit the editing state by clicking outside the input (within the Tree Item) or by pressing Enter or Escape -> we don't want to remove the focused item from the state in these cases // we can also exit the editing state by clicking on the root itself -> want to remove the focused item from the state in this case (event.relatedTarget && isTargetInDescendants(event.relatedTarget as HTMLElement, rootElement) && From 7b52807112b2f8a32edd96db221ba067d2078db3 Mon Sep 17 00:00:00 2001 From: Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 16 Oct 2024 13:15:56 -0700 Subject: [PATCH 4/5] component case Signed-off-by: Sycamore <71297412+samuelsycamore@users.noreply.github.com> --- CHANGELOG.md | 34 +++++++++---------- .../migration-tree-view-v6.md | 28 +++++++-------- docs/data/tree-view/overview/overview.md | 6 ++-- .../customization/customization.md | 4 +-- .../rich-tree-view/editing/editing.md | 2 +- .../customization/customization.md | 2 +- .../tree-item-customization.md | 4 +-- docs/pages/x/api/tree-view/tree-item-2.json | 2 +- .../src/RichTreeViewPro/RichTreeViewPro.tsx | 2 +- .../useTreeViewItemsReordering.ts | 2 +- .../x-tree-view/src/TreeItem/TreeItem.tsx | 4 +-- .../src/TreeItem/TreeItem.types.ts | 4 +-- .../src/TreeItem2/TreeItem2.types.ts | 2 +- .../src/internals/models/treeView.ts | 4 +-- .../src/useTreeItem2/useTreeItem2.types.ts | 2 +- 15 files changed, 51 insertions(+), 51 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index fd5d06f705463..8ea900a5cd110 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -79,7 +79,7 @@ Same changes as in `@mui/x-charts@7.20.0`. - [docs] Add custom columns panel demo (#14825) @cherniavskii - [docs] Capitalize all instances of "Data Grid" (#14884) @samuelsycamore - [docs] Divide charts `tooltip` and `highlighting` pages (#14824) @JCQuintas -- [docs] Document the Tree Item 2 component and the `useTreeItem2` hook (#14551) @noraleonte +- [docs] Document the `` component and the `useTreeItem2` hook (#14551) @noraleonte - [docs] Fix column pinning for "Disable detail panel content scroll" section (#14854 and #14885) @kalyan90 - [docs] Fix detail panel demo not working well with pinned columns (#14883) @cherniavskii - [docs] New recipe of a read-only field (#14606) @flaviendelangle @@ -799,7 +799,7 @@ This expansion of the Pro plan comes with some adjustments to our pricing strate We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨: -- 🎁 Introduce [item reordering using drag and drop](https://mui.com/x/react-tree-view/rich-tree-view/ordering/) on the Rich Tree View Pro component +- 🎁 Introduce [item reordering using drag and drop](https://mui.com/x/react-tree-view/rich-tree-view/ordering/) on the `` component Item reordering using drag and drop @@ -1292,7 +1292,7 @@ Same changes as in `@mui/x-date-pickers@7.8.0`. - [core] Add eslint rule to restrict import from `../internals` root (#13633) @JCQuintas - [docs-infra] Sync `\_app` folder with monorepo (#13582) @Janpot -- [license] Allow usage of charts and Tree View pro package for old premium licenses (#13619) @flaviendelangle +- [license] Allow usage of Charts and Tree View Pro package for old premium licenses (#13619) @flaviendelangle ## 7.7.1 @@ -1455,7 +1455,7 @@ Same changes as in `@mui/x-date-pickers@7.7.0`. - [core] Add `eslint-plugin-react-compiler` experimental version and rules (#13415) @JCQuintas - [core] Minor setup cleanup (#13467) @LukasTy - [infra] Adjust CI setup (#13448) @LukasTy -- [test] Add tests for the custom slots of Tree Item 2 (#13314) @flaviendelangle +- [test] Add tests for the custom slots of `` (#13314) @flaviendelangle ## 7.6.2 @@ -1816,7 +1816,7 @@ Same changes as in `@mui/x-date-pickers@7.4.0`. #### `@mui/x-tree-view@7.4.0` -- [TreeView] Fix props propagation and theme entry in Tree Item 2 (#12889) @flaviendelangle +- [TreeView] Fix props propagation and theme entry in `` (#12889) @flaviendelangle ### Docs @@ -2202,7 +2202,7 @@ Same changes as in `@mui/x-date-pickers@7.1.1`, plus: #### `@mui/x-tree-view@7.1.1` - [TreeView] Add JSDoc to all `publicAPI` methods (#12649) @flaviendelangle -- [TreeView] Create Rich Tree View Pro component (not released yet) (#12610) @flaviendelangle +- [TreeView] Create `` component (not released yet) (#12610) @flaviendelangle - [TreeView] Create Pro package (not released yet) (#12240) @flaviendelangle - [TreeView] Fix typo in errors (#12623) @alissa-tung - [TreeView] New API method: `setItemExpansion` (#12595) @flaviendelangle @@ -2222,13 +2222,13 @@ Same changes as in `@mui/x-date-pickers@7.1.1`, plus: - [docs] Move Data Grid interfaces to standard API page layout (#12016) @alexfauquette - [docs] Remove ` around @default values (#12158) @alexfauquette - [docs] Remove `day` from the default `dayOfWeekFormatter` function params (#12644) @LukasTy -- [docs] Use Tree Item 2 for icon expansion example on Rich Tree View (#12563) @flaviendelangle +- [docs] Use `` for icon expansion example on `` (#12563) @flaviendelangle ### Core - [core] Add cherry-pick `master` to `v6` action (#12648) @LukasTy - [core] Fix typo in `@mui/x-tree-view-pro/themeAugmentation` (#12674) @flaviendelangle -- [core] Introduce `describeTreeView` to run test on Simple Tree View and Rich Tree View, using Tree Item and Tree Item 2 + migrate expansion tests (#12428) @flaviendelangle +- [core] Introduce `describeTreeView` to run test on `` and ``, using `` and `` + migrate expansion tests (#12428) @flaviendelangle - [core] Limit `test-types` CI step allowed memory (#12651) @LukasTy - [core] Remove explicit `express` package (#12602) @LukasTy - [core] Update to new embedded translations in the docs package (#12232) @Janpot @@ -2420,7 +2420,7 @@ Same changes as in `@mui/x-date-pickers@7.0.0`, plus: #### Breaking changes -- The required `nodeId` prop used by the Tree Item has been renamed to `itemId` for consistency: +- The required `nodeId` prop used by `` has been renamed to `itemId` for consistency: ```diff @@ -2573,7 +2573,7 @@ The `onNodeFocus` callback has been renamed to `onItemFocus` for consistency: #### `@mui/x-tree-view@7.0.0-beta.7` - [TreeView] Clean the usage of the term "item" and "node" in API introduced during v7 (#12368) @noraleonte -- [TreeView] Introduce a new Tree Item 2 component and a new `useTreeItem2` hook (#11721) @flaviendelangle +- [TreeView] Introduce a new `` component and a new `useTreeItem2` hook (#11721) @flaviendelangle - [TreeView] Rename `onNodeFocus` to `onItemFocus` (#12419) @noraleonte ### Docs @@ -2631,9 +2631,9 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.6`. #### Breaking changes -- The component used to animate the item children is now defined as a slot on the Tree Item component. +- The component used to animate the item children is now defined as a slot on the `` component. - If you were passing a `TransitionComponent` or `TransitionProps` to your Tree Item component, + If you were passing a `TransitionComponent` or `TransitionProps` to your `` component, you need to use the new `groupTransition` slot on this component: ```diff @@ -2649,7 +2649,7 @@ Same changes as in `@mui/x-data-grid-pro@7.0.0-beta.6`. ``` -- The `group` class of the Tree Item component has been renamed to `groupTransition` to match with its new slot name. +- The `group` class of the `` component has been renamed to `groupTransition` to match with its new slot name. ```diff const StyledTreeItem = styled(TreeItem)({ @@ -3740,8 +3740,8 @@ Same changes as in `@mui/x-date-pickers@7.0.0-alpha.8`. ### Tree View / `@mui/x-tree-view@7.0.0-alpha.8` -- [Tree View] Cleanup `onKeyDown` handler (#11481) @flaviendelangle -- [Tree View] Define the parameters used by each plugin to avoid listing them in each component (#11473) @flaviendelangle +- [TreeView] Cleanup `onKeyDown` handler (#11481) @flaviendelangle +- [TreeView] Define the parameters used by each plugin to avoid listing them in each component (#11473) @flaviendelangle ### Docs @@ -3768,7 +3768,7 @@ We'd like to offer a big thanks to the 7 contributors who made this release poss - 🎁 New component to create a Tree View from a structured data source: - You can now directly pass your data to the Rich Tree View component instead of manually converting it into JSX Tree Item components: + You can now directly pass your data to the `` component instead of manually converting it into JSX `` components: ```tsx const ITEMS = [ @@ -5099,7 +5099,7 @@ Here is an example of the renaming for the `` component. ### Core -- [core] Adds migration docs for charts, pickers and Tree View (#10926) @michelengelen +- [core] Adds migration docs for Charts, Pickers, and Tree View (#10926) @michelengelen - [core] Bump monorepo (#10959) @LukasTy - [core] Changed prettier branch value to next (#10917) @michelengelen - [core] Fix GitHub title tag consistency @oliviertassinari diff --git a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md index a5b2975c08bd0..2efbd13455fdd 100644 --- a/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md +++ b/docs/data/migration/migration-tree-view-v6/migration-tree-view-v6.md @@ -142,8 +142,8 @@ The same change has been applied to the `ContentComponent` prop: ### βœ… Use Simple Tree View instead of Tree View -The Tree View component has been deprecated and will be removed in the next major. -You can start replacing it with the new Simple Tree View component which has exactly the same API: +The `` component has been deprecated and will be removed in the next major. +You can start replacing it with the new `` component which has exactly the same API: ```diff -import { TreeView } from '@mui/x-tree-view'; @@ -193,7 +193,7 @@ If you were using the `treeViewClasses` object, you can replace it with the new #### Define `expandIcon` The icon used to expand the children of an item (rendered when this item is collapsed) -is now defined as a slot both on the Tree View and the Tree Item components. +is now defined as a slot both on the `` and the `` components. If you were using the `ChevronRight` icon from `@mui/icons-material`, you can stop passing it to your component because it is now the default value: @@ -224,7 +224,7 @@ you need to use the new `expandIcon` slot on this component: Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component. ::: -If you were passing another icon to your Tree Item component, +If you were passing another icon to your `` component, you need to use the new `expandIcon` slot on this component: ```diff @@ -241,7 +241,7 @@ you need to use the new `expandIcon` slot on this component: #### Define `collapseIcon` The icon used to collapse the children of an item (rendered when this item is expanded) -is now defined as a slot both on the Tree View and the Tree Item components. +is now defined as a slot both on the `` and `` components. If you were using the `ExpandMore` icon from `@mui/icons-material`, you can stop passing it to your component because it is now the default value: @@ -272,7 +272,7 @@ you need to use the new `collapseIcon` slot on this component: Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component. ::: -If you were passing another icon to your Tree Item component, +If you were passing another icon to your `` component, you need to use the new `collapseIcon` slot on this component: ```diff @@ -306,7 +306,7 @@ by passing the same icon to both the `collapseIcon` and the `expandIcon` slots o #### Define `endIcon` The icon rendered next to an item without children -is now defined as a slot both on the Tree View and the Tree Item components. +is now defined as a slot both on the `` and `` components. If you were passing an icon to your Tree View component, you need to use the new `endIcon` slot on this component: @@ -324,7 +324,7 @@ you need to use the new `endIcon` slot on this component: Note that the `slots` prop expects a React component, not the JSX element returned when rendering this component. ::: -If you were passing an icon to your Tree Item component, +If you were passing an icon to your `` component, you need to use the new `endIcon` slot on this component: ```diff @@ -341,9 +341,9 @@ you need to use the new `endIcon` slot on this component: #### Define `icon` The icon rendered next to an item -is now defined as a slot on the Tree Item component. +is now defined as a slot on the `` component. -If you were passing an icon to your Tree Item component, +If you were passing an icon to your `` component, you need to use the new `icon` slot on this component: ```diff @@ -364,9 +364,9 @@ Note that the `slots` prop expects a React component, not the JSX element return ### βœ… Use slots to define the group transition The component used to animate the item children -is now defined as a slot on the Tree Item component. +is now defined as a slot on the `` component. -If you were passing a `TransitionComponent` or `TransitionProps` to your Tree Item component, +If you were passing a `TransitionComponent` or `TransitionProps` to your `` component, you need to use the new `groupTransition` slot on this component: ```diff @@ -384,7 +384,7 @@ you need to use the new `groupTransition` slot on this component: ### Rename the `group` class of the Tree Item component -The `group` class of the Tree Item component has been renamed to `groupTransition` to match with its new slot name. +The `group` class of the `` component has been renamed to `groupTransition` to match with its new slot name. ```diff const StyledTreeItem = styled(TreeItem)({ @@ -461,7 +461,7 @@ If you were using the `onNodeSelect` prop to react to the selection or deselecti you can use the new `onItemSelectionToggle` prop which is called whenever an item is selected or deselected with its id and selection status. ```tsx -// It is also available on the deprecated Tree View component +// It is also available on the deprecated `` component console.log(itemId, isSelected) diff --git a/docs/data/tree-view/overview/overview.md b/docs/data/tree-view/overview/overview.md index efe857df23cef..05a98d903ddfc 100644 --- a/docs/data/tree-view/overview/overview.md +++ b/docs/data/tree-view/overview/overview.md @@ -46,8 +46,8 @@ At the moment, the Simple and Rich Tree Views are similar in terms of feature su The `@mui/x-tree-view` package exposes two different components to define your tree items: -- Tree Item -- Tree Item 2 +- `` +- `` #### Tree Item @@ -83,7 +83,7 @@ export default function App() { #### Tree Item 2 -This is a new component that provides a more powerful customization API, and will eventually replace Tree Item. +This is a new component that provides a more powerful customization API, and will eventually replace ``. When using Simple Tree View, you can import it from `@mui/x-tree-view/TreeItem2` and use it as a child of the Simple Tree View component: diff --git a/docs/data/tree-view/rich-tree-view/customization/customization.md b/docs/data/tree-view/rich-tree-view/customization/customization.md index 32b222f605ba7..bb6aba1d24538 100644 --- a/docs/data/tree-view/rich-tree-view/customization/customization.md +++ b/docs/data/tree-view/rich-tree-view/customization/customization.md @@ -26,7 +26,7 @@ The demo below shows how to add icons using both an existing icon library, such ### Custom toggle animations -Use the `groupTransition` slot on the Tree Item to pass a component that handles your animation. +Use the `groupTransition` slot on the `` to pass a component that handles your animation. The demo below is animated using MaterialΒ UI's [Collapse](/material-ui/transitions/#collapse) component together with the [react-spring](https://www.react-spring.dev/) library. @@ -55,7 +55,7 @@ The demo below shows how to add an avatar and custom typography elements. ### File explorer :::warning -This example is built using the new Tree Item 2 component +This example is built using the new `` component which adds several slots to modify the content of the Tree Item or change its behavior. You can learn more about this new component in the [Overview page](/x/react-tree-view/#tree-item-components). diff --git a/docs/data/tree-view/rich-tree-view/editing/editing.md b/docs/data/tree-view/rich-tree-view/editing/editing.md index 9ad100768ad72..158a5728e25b2 100644 --- a/docs/data/tree-view/rich-tree-view/editing/editing.md +++ b/docs/data/tree-view/rich-tree-view/editing/editing.md @@ -46,7 +46,7 @@ Use the `onItemLabelChange` prop to trigger an action when the label of an item ## Change the default behavior By default, blurring the Tree Item saves the new value if there is one. -To modify this behavior, use the `slotProps` of the Tree Item 2. +To modify this behavior, use the `slotProps` of the ``. {{"demo": "CustomBehavior.js"}} diff --git a/docs/data/tree-view/simple-tree-view/customization/customization.md b/docs/data/tree-view/simple-tree-view/customization/customization.md index 6cd1695ce2f6c..26da29b34139c 100644 --- a/docs/data/tree-view/simple-tree-view/customization/customization.md +++ b/docs/data/tree-view/simple-tree-view/customization/customization.md @@ -62,7 +62,7 @@ Target the `treeItemClasses.groupTransition` class to add connection borders bet ### Gmail clone :::warning -This example is built using the new Tree Item 2 component +This example is built using the new `` component which adds several slots to modify the content of the Tree Item or change its behavior. You can learn more about this new component in the [Overview page](/x/react-tree-view/#tree-item-components). diff --git a/docs/data/tree-view/tree-item-customization/tree-item-customization.md b/docs/data/tree-view/tree-item-customization/tree-item-customization.md index f752249029edf..6864d0d2b477c 100644 --- a/docs/data/tree-view/tree-item-customization/tree-item-customization.md +++ b/docs/data/tree-view/tree-item-customization/tree-item-customization.md @@ -81,7 +81,7 @@ By default, a nested item is indented by `12px` from its parent item. {{"demo": "ItemChildrenIndentationProp.js"}} :::success -This feature is compatible with both the Tree Item and Tree Item 2 components +This feature is compatible with both the `` and `` components If you are using a custom Tree Item component, and you want to override the padding, then apply the following padding to your `groupTransition` element: @@ -116,7 +116,7 @@ It will become the default behavior in the next major version of the Tree View c {{"demo": "IndentationAtItemLevel.js"}} :::success -This feature is compatible with both the Tree Item and Tree Item 2 components and with the `itemChildrenIndentation` prop. +This feature is compatible with both the `` and `` components and with the `itemChildrenIndentation` prop. If you are using a custom Tree Item component, and you want to override the padding, then apply the following padding to your `content` element: diff --git a/docs/pages/x/api/tree-view/tree-item-2.json b/docs/pages/x/api/tree-view/tree-item-2.json index 595e223354131..2b9cb932216b4 100644 --- a/docs/pages/x/api/tree-view/tree-item-2.json +++ b/docs/pages/x/api/tree-view/tree-item-2.json @@ -67,7 +67,7 @@ }, { "name": "dragAndDropOverlay", - "description": "The component that renders the overlay when an item reordering is ongoing.\nWarning: This slot is only useful when using the Rich Tree View Pro component.", + "description": "The component that renders the overlay when an item reordering is ongoing.\nWarning: This slot is only useful when using the `` component.", "default": "TreeItem2DragAndDropOverlay", "class": "MuiTreeItem2-dragAndDropOverlay" }, diff --git a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx index 6285b77d1f072..126919c04ba50 100644 --- a/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx +++ b/packages/x-tree-view-pro/src/RichTreeViewPro/RichTreeViewPro.tsx @@ -68,7 +68,7 @@ const RichTreeViewPro = React.forwardRef(function RichTreeViewPro< if (process.env.NODE_ENV !== 'production') { if ((props as any).children != null) { warnOnce([ - 'MUI X: The Rich Tree View Pro component does not support JSX children.', + 'MUI X: The `` component does not support JSX children.', 'If you want to add items, you need to use the `items` prop.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/.', ]); diff --git a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts index fb95da679102a..fe0d7a8a29c64 100644 --- a/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts +++ b/packages/x-tree-view-pro/src/internals/plugins/useTreeViewItemsReordering/useTreeViewItemsReordering.ts @@ -256,7 +256,7 @@ useTreeViewItemsReordering.getDefaultizedParams = ({ params, experimentalFeature if (params.itemsReordering && !canUseFeature) { warnOnce([ 'MUI X: The items reordering feature requires the `indentationAtItemLevel` and `itemsReordering` experimental features to be enabled.', - 'You can do it by passing `experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }}` to the Rich Tree View Pro component.', + 'You can do it by passing `experimentalFeatures={{ indentationAtItemLevel: true, itemsReordering: true }}` to the ``component.', 'Check the documentation for more details: https://mui.com/x/react-tree-view/rich-tree-view/items/', ]); } diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.tsx b/packages/x-tree-view/src/TreeItem/TreeItem.tsx index 7e8cf06ff2ba9..85291756b1c0e 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.tsx +++ b/packages/x-tree-view/src/TreeItem/TreeItem.tsx @@ -523,13 +523,13 @@ TreeItem.propTypes = { className: PropTypes.string, /** * The component used to render the content of the item. - * @deprecated Consider using the Tree Item 2 component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/. + * @deprecated Consider using the `` component or the `useTreeItem2` hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/. * @default TreeItemContent */ ContentComponent: elementTypeAcceptingRef, /** * Props applied to ContentComponent. - * @deprecated Consider using the Tree Item 2 component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/. + * @deprecated Consider using the `` component or the `useTreeItem2` hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/. */ ContentProps: PropTypes.object, /** diff --git a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts b/packages/x-tree-view/src/TreeItem/TreeItem.types.ts index 63fee0bc7b637..c00ccde26717c 100644 --- a/packages/x-tree-view/src/TreeItem/TreeItem.types.ts +++ b/packages/x-tree-view/src/TreeItem/TreeItem.types.ts @@ -69,13 +69,13 @@ export interface TreeItemProps extends Omit, slotProps?: TreeItemSlotProps; /** * The component used to render the content of the item. - * @deprecated Consider using the Tree Item 2 component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/. + * @deprecated Consider using the `` component or the `useTreeItem2` hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/. * @default TreeItemContent */ ContentComponent?: React.JSXElementConstructor; /** * Props applied to ContentComponent. - * @deprecated Consider using the Tree Item 2 component or the `useTreeItem2` hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/. + * @deprecated Consider using the `` component or the `useTreeItem2` hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/. */ ContentProps?: React.HTMLAttributes & { ref?: React.Ref }; /** diff --git a/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts b/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts index 816e6638f7908..e72de430bd953 100644 --- a/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts +++ b/packages/x-tree-view/src/TreeItem2/TreeItem2.types.ts @@ -44,7 +44,7 @@ export interface TreeItem2Slots extends TreeItem2IconSlots { labelInput?: React.ElementType; /** * The component that renders the overlay when an item reordering is ongoing. - * Warning: This slot is only useful when using the Rich Tree View Pro component. + * Warning: This slot is only useful when using the `` component. * @default TreeItem2DragAndDropOverlay */ dragAndDropOverlay?: React.ElementType; diff --git a/packages/x-tree-view/src/internals/models/treeView.ts b/packages/x-tree-view/src/internals/models/treeView.ts index 6930a9625500e..df139e9529248 100644 --- a/packages/x-tree-view/src/internals/models/treeView.ts +++ b/packages/x-tree-view/src/internals/models/treeView.ts @@ -9,11 +9,11 @@ export interface TreeViewItemMeta { expandable: boolean; disabled: boolean; /** - * Only defined for Rich Tree View and Rich Tree View Pro. + * Only defined for `` and ``. */ depth?: number; /** - * Only defined for Rich Tree View and Rich Tree View Pro. + * Only defined for `` and ``. */ label?: string; } diff --git a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts index 00cc5152db767..a859514bd2833 100644 --- a/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts +++ b/packages/x-tree-view/src/useTreeItem2/useTreeItem2.types.ts @@ -201,7 +201,7 @@ export interface UseTreeItem2ReturnValue< ) => UseTreeItem2GroupTransitionSlotProps; /** * Resolver for the DragAndDropOverlay slot's props. - * Warning: This slot is only useful when using the Rich Tree View Pro component. + * Warning: This slot is only useful when using the `` component. * @param {ExternalProps} externalProps Additional props for the DragAndDropOverlay slot. * @returns {UseTreeItem2DragAndDropOverlaySlotProps} Props that should be spread on the DragAndDropOverlay slot. */ From 8dc36dbf960d895b7bdcd5dc3cc3595a1f01be4d Mon Sep 17 00:00:00 2001 From: Sam Sycamore <71297412+samuelsycamore@users.noreply.github.com> Date: Wed, 16 Oct 2024 15:21:42 -0700 Subject: [PATCH 5/5] cleanup --- docs/pages/x/api/tree-view/tree-item.json | 4 ++-- .../api-docs/tree-view/tree-item-2/tree-item-2.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/docs/pages/x/api/tree-view/tree-item.json b/docs/pages/x/api/tree-view/tree-item.json index a9d7f6058830d..1d0f0081cc6a8 100644 --- a/docs/pages/x/api/tree-view/tree-item.json +++ b/docs/pages/x/api/tree-view/tree-item.json @@ -7,12 +7,12 @@ "type": { "name": "custom", "description": "element type" }, "default": "TreeItemContent", "deprecated": true, - "deprecationInfo": "Consider using the TreeItem2 component or the useTreeItem2 hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/." + "deprecationInfo": "Consider using the <TreeItem2 /> component or the useTreeItem2 hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/." }, "ContentProps": { "type": { "name": "object" }, "deprecated": true, - "deprecationInfo": "Consider using the TreeItem2 component or the useTreeItem2 hook instead. For more detail, see https://mui.com/x/react-tree-view/tree-item-customization/." + "deprecationInfo": "Consider using the <TreeItem2 /> component or the useTreeItem2 hook instead. For more details, see https://mui.com/x/react-tree-view/tree-item-customization/." }, "disabled": { "type": { "name": "bool" }, "default": "false" }, "label": { "type": { "name": "node" } }, diff --git a/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json b/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json index c714f359c7e9f..5177a55030aaa 100644 --- a/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json +++ b/docs/translations/api-docs/tree-view/tree-item-2/tree-item-2.json @@ -52,7 +52,7 @@ "checkbox": "The component that renders the item checkbox for selection.", "collapseIcon": "The icon used to collapse the item.", "content": "The component that renders the content of the item. (e.g.: everything related to this item, not to its children).", - "dragAndDropOverlay": "The component that renders the overlay when an item reordering is ongoing. Warning: This slot is only useful when using the RichTreeViewPro component.", + "dragAndDropOverlay": "The component that renders the overlay when an item reordering is ongoing. Warning: This slot is only useful when using the <RichTreeViewPro /> component.", "endIcon": "The icon displayed next to an end item.", "expandIcon": "The icon used to expand the item.", "groupTransition": "The component that renders the children of the item.",