[TreeView] Create the package on the X repository (#9798)

.codesandbox/ci.json

@@ -10,7 +10,8 @@
  "packages/grid/x-data-grid-generator",
  "packages/x-date-pickers",
  "packages/x-date-pickers-pro",
- "packages/x-charts"
+ "packages/x-charts",
+ "packages/x-tree-view"
  ],
  "publishDirectory": {
  "@mui/x-license-pro": "packages/x-license-pro/build",
@@ -20,7 +21,8 @@
  "@mui/x-data-grid-generator": "packages/grid/x-data-grid-generator/build",
  "@mui/x-date-pickers": "packages/x-date-pickers/build",
  "@mui/x-date-pickers-pro": "packages/x-date-pickers-pro/build",
- "@mui/x-charts": "packages/x-charts/build"
+ "@mui/x-charts": "packages/x-charts/build",
+ "@mui/x-tree-view": "packages/x-tree-view/build"
  },
  "sandboxes": [
  "new",

babel.config.js

@@ -14,6 +14,8 @@ const defaultAlias = {
  '@mui/x-license-pro': resolveAliasPath('./packages/x-license-pro/src'),
  '@mui/x-date-pickers': resolveAliasPath('./packages/x-date-pickers/src'),
  '@mui/x-date-pickers-pro': resolveAliasPath('./packages/x-date-pickers-pro/src'),
+ '@mui/x-charts': resolveAliasPath('./packages/x-charts/src'),
+ '@mui/x-tree-view': resolveAliasPath('./packages/x-tree-view/src'),
  '@mui/markdown': '@mui/monorepo/packages/markdown',
  '@mui-internal/docs-utilities': '@mui/monorepo/packages/docs-utilities',
  'typescript-to-proptypes': '@mui/monorepo/packages/typescript-to-proptypes/src',

docs/babel.config.js

@@ -8,6 +8,7 @@ const alias = {
  '@mui/x-date-pickers': '../packages/x-date-pickers/src',
  '@mui/x-date-pickers-pro': '../packages/x-date-pickers-pro/src',
  '@mui/x-charts': '../packages/x-charts/src',
+ '@mui/x-tree-view': '../packages/x-tree-view/src',
  '@mui/x-license-pro': '../packages/x-license-pro/src',
  '@mui/docs': '../node_modules/@mui/monorepo/packages/mui-docs/src',
  '@mui/markdown': '../node_modules/@mui/monorepo/packages/markdown',

docs/data/tree-view-component-api-pages.ts

@@ -0,0 +1,6 @@
+import type { MuiPage } from '@mui/monorepo/docs/src/MuiPage';
+
+export default [
+ { pathname: '/x/api/tree-view/tree-item', title: 'TreeItem' },
+ { pathname: '/x/api/tree-view/tree-view', title: 'TreeView' },
+] as MuiPage[];

docs/pages/x/api/tree-view/tree-item-content.js

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

docs/pages/x/api/tree-view/tree-item-content.json

@@ -0,0 +1,26 @@
+{
+ "props": {
+ "classes": { "type": { "name": "object" }, "required": true },
+ "nodeId": { "type": { "name": "string" }, "required": true },
+ "className": { "type": { "name": "string" } },
+ "displayIcon": { "type": { "name": "node" } },
+ "expansionIcon": { "type": { "name": "node" } },
+ "icon": { "type": { "name": "node" } },
+ "label": { "type": { "name": "node" } }
+ },
+ "slots": {},
+ "name": "TreeItemContent",
+ "styles": {
+ "classes": ["root", "expanded", "selected", "focused", "disabled", "iconContainer", "label"],
+ "globalClasses": {
+ "expanded": "Mui-expanded",
+ "selected": "Mui-selected",
+ "focused": "Mui-focused",
+ "disabled": "Mui-disabled"
+ },
+ "name": "MuiTreeItemContent"
+ },
+ "filename": "/packages/x-tree-view/src/TreeItem/TreeItemContent.tsx",
+ "demos": "<ul></ul>",
+ "packages": [{ "packageName": "@mui/x-tree-view", "componentName": "TreeItemContent" }]
+}

docs/pages/x/api/tree-view/tree-item.js

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

docs/pages/x/api/tree-view/tree-item.json

@@ -0,0 +1,55 @@
+{
+ "props": {
+ "nodeId": { "type": { "name": "string" }, "required": true },
+ "children": { "type": { "name": "node" } },
+ "classes": { "type": { "name": "object" } },
+ "collapseIcon": { "type": { "name": "node" } },
+ "ContentComponent": {
+ "type": { "name": "custom", "description": "element type" },
+ "default": "TreeItemContent"
+ },
+ "ContentProps": { "type": { "name": "object" } },
+ "disabled": { "type": { "name": "bool" } },
+ "endIcon": { "type": { "name": "node" } },
+ "expandIcon": { "type": { "name": "node" } },
+ "icon": { "type": { "name": "node" } },
+ "label": { "type": { "name": "node" } },
+ "onFocus": { "type": { "name": "custom", "description": "unsupportedProp" } },
+ "sx": {
+ "type": {
+ "name": "union",
+ "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+ }
+ },
+ "TransitionComponent": { "type": { "name": "elementType" }, "default": "Collapse" },
+ "TransitionProps": { "type": { "name": "object" } }
+ },
+ "slots": {},
+ "name": "TreeItem",
+ "styles": {
+ "classes": [
+ "root",
+ "group",
+ "content",
+ "expanded",
+ "selected",
+ "focused",
+ "disabled",
+ "iconContainer",
+ "label"
+ ],
+ "globalClasses": {
+ "expanded": "Mui-expanded",
+ "selected": "Mui-selected",
+ "focused": "Mui-focused",
+ "disabled": "Mui-disabled"
+ },
+ "name": "MuiTreeItem"
+ },
+ "spread": true,
+ "forwardsRefTo": "HTMLLIElement",
+ "filename": "/packages/x-tree-view/src/TreeItem/TreeItem.tsx",
+ "inheritance": null,
+ "demos": "<ul></ul>",
+ "packages": [{ "packageName": "@mui/x-tree-view", "componentName": "TreeItem" }]
+}

docs/pages/x/api/tree-view/tree-view.js

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

docs/pages/x/api/tree-view/tree-view.json

@@ -0,0 +1,44 @@
+{
+ "props": {
+ "children": { "type": { "name": "node" } },
+ "classes": { "type": { "name": "object" } },
+ "defaultCollapseIcon": { "type": { "name": "node" } },
+ "defaultEndIcon": { "type": { "name": "node" } },
+ "defaultExpanded": {
+ "type": { "name": "arrayOf", "description": "Array<string>" },
+ "default": "[]"
+ },
+ "defaultExpandIcon": { "type": { "name": "node" } },
+ "defaultParentIcon": { "type": { "name": "node" } },
+ "defaultSelected": {
+ "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;string" },
+ "default": "[]"
+ },
+ "disabledItemsFocusable": { "type": { "name": "bool" } },
+ "disableSelection": { "type": { "name": "bool" } },
+ "expanded": { "type": { "name": "arrayOf", "description": "Array&lt;string&gt;" } },
+ "id": { "type": { "name": "string" } },
+ "multiSelect": { "type": { "name": "bool" } },
+ "onNodeFocus": { "type": { "name": "func" } },
+ "onNodeSelect": { "type": { "name": "func" } },
+ "onNodeToggle": { "type": { "name": "func" } },
+ "selected": {
+ "type": { "name": "union", "description": "Array&lt;string&gt;<br>&#124;&nbsp;string" }
+ },
+ "sx": {
+ "type": {
+ "name": "union",
+ "description": "Array&lt;func<br>&#124;&nbsp;object<br>&#124;&nbsp;bool&gt;<br>&#124;&nbsp;func<br>&#124;&nbsp;object"
+ }
+ }
+ },
+ "slots": {},
+ "name": "TreeView",
+ "styles": { "classes": ["root"], "globalClasses": {}, "name": "MuiTreeView" },
+ "spread": true,
+ "forwardsRefTo": "HTMLUListElement",
+ "filename": "/packages/x-tree-view/src/TreeView/TreeView.tsx",
+ "inheritance": null,
+ "demos": "<ul></ul>",
+ "packages": [{ "packageName": "@mui/x-tree-view", "componentName": "TreeView" }]
+}

docs/scripts/getTypeScriptProjects.ts

@@ -37,7 +37,8 @@ export type ProjectNames =
  | 'x-data-grid-generator'
  | 'x-date-pickers'
  | 'x-date-pickers-pro'
- | 'x-charts';
+ | 'x-charts'
+ | 'x-tree-view';
 
 export type Projects = Map<ProjectNames, Project>;
 
@@ -288,5 +289,22 @@ export const getTypeScriptProjects = () => {
  }),
  );
 
+ projects.set(
+ 'x-tree-view',
+ createProject({
+ name: 'x-tree-view',
+ rootPath: path.join(workspaceRoot, 'packages/x-tree-view'),
+ documentationFolderName: 'tree-view',
+ getComponentsWithPropTypes: getComponentPaths({
+ folders: ['src'],
+ includeUnstableComponents: true,
+ }),
+ getComponentsWithApiDoc: getComponentPaths({
+ folders: ['src'],
+ includeUnstableComponents: true,
+ }),
+ }),
+ );
+
  return projects;
 };

docs/translations/api-docs/tree-view/tree-item-content.json

@@ -0,0 +1,41 @@
+{
+ "componentDescription": "@ignore - internal component.",
+ "propDescriptions": {
+ "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+ "className": "className applied to the root element.",
+ "displayIcon": "The icon to display next to the tree node&#39;s label. Either a parent or end icon.",
+ "expansionIcon": "The icon to display next to the tree node&#39;s label. Either an expansion or collapse icon.",
+ "icon": "The icon to display next to the tree node&#39;s label.",
+ "label": "The tree node label.",
+ "nodeId": "The id of the node."
+ },
+ "classDescriptions": {
+ "root": { "description": "Styles applied to the root element." },
+ "expanded": {
+ "description": "State class applied to {{nodeName}} when {{conditions}}.",
+ "nodeName": "the content element",
+ "conditions": "expanded"
+ },
+ "selected": {
+ "description": "State class applied to {{nodeName}} when {{conditions}}.",
+ "nodeName": "the content element",
+ "conditions": "selected"
+ },
+ "focused": {
+ "description": "State class applied to {{nodeName}} when {{conditions}}.",
+ "nodeName": "the content element",
+ "conditions": "focused"
+ },
+ "disabled": {
+ "description": "State class applied to {{nodeName}} when {{conditions}}.",
+ "nodeName": "the element",
+ "conditions": "disabled"
+ },
+ "iconContainer": {
+ "description": "Styles applied to {{nodeName}}.",
+ "nodeName": "the tree node icon and collapse/expand icon"
+ },
+ "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the label element" }
+ },
+ "slotDescriptions": {}
+}

docs/translations/api-docs/tree-view/tree-item.json

@@ -0,0 +1,57 @@
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "children": "The content of the component.",
+ "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+ "collapseIcon": "The icon used to collapse the node.",
+ "ContentComponent": "The component used for the content node.<br>⚠️ <a href=\"/material-ui/guides/composition/#caveat-with-refs\">Needs to be able to hold a ref</a>.",
+ "ContentProps": "Props applied to ContentComponent",
+ "disabled": "If <code>true</code>, the node is disabled.",
+ "endIcon": "The icon displayed next to a end node.",
+ "expandIcon": "The icon used to expand the node.",
+ "icon": "The icon to display next to the tree node&#39;s label.",
+ "label": "The tree node label.",
+ "nodeId": "The id of the node.",
+ "onFocus": "This prop isn&#39;t supported. Use the <code>onNodeFocus</code> callback on the tree if you need to monitor a node&#39;s focus.",
+ "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the <a href=\"/system/getting-started/the-sx-prop/\">`sx` page</a> for more details.",
+ "TransitionComponent": "The component used for the transition. <a href=\"/material-ui/transitions/#transitioncomponent-prop\">Follow this guide</a> to learn more about the requirements for this component.",
+ "TransitionProps": "Props applied to the transition element. By default, the element is based on this <a href=\"http:https://reactcommunity.org/react-transition-group/transition/\"><code>Transition</code></a> component."
+ },
+ "classDescriptions": {
+ "root": { "description": "Styles applied to the root element." },
+ "group": {
+ "description": "Styles applied to {{nodeName}}.",
+ "nodeName": "the transition component"
+ },
+ "content": {
+ "description": "Styles applied to {{nodeName}}.",
+ "nodeName": "the content element"
+ },
+ "expanded": {
+ "description": "State class applied to {{nodeName}} when {{conditions}}.",
+ "nodeName": "the content element",
+ "conditions": "expanded"
+ },
+ "selected": {
+ "description": "State class applied to {{nodeName}} when {{conditions}}.",
+ "nodeName": "the content element",
+ "conditions": "selected"
+ },
+ "focused": {
+ "description": "State class applied to {{nodeName}} when {{conditions}}.",
+ "nodeName": "the content element",
+ "conditions": "focused"
+ },
+ "disabled": {
+ "description": "State class applied to {{nodeName}} when {{conditions}}.",
+ "nodeName": "the element",
+ "conditions": "disabled"
+ },
+ "iconContainer": {
+ "description": "Styles applied to {{nodeName}}.",
+ "nodeName": "the tree node icon"
+ },
+ "label": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the label element" }
+ },
+ "slotDescriptions": {}
+}