feat: flat Tree component

CHANGELOG.md

@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add `yellow`, `green`, `orange`, `pink`, `amethyst`, `silver` and `onyx` color schemes in Teams theme @mnajdova ([#1826](https://github.com/stardust-ui/react/pull/1826))
+- Add `Tree` component that is flat DOM structured @silviuavram ([#1779](https://github.com/stardust-ui/react/pull/1779))
 
 ### Fixes
 - Fix `muted` prop in `Video` component @layershifter ([#1847](https://github.com/stardust-ui/react/pull/1847))

docs/src/examples/components/Tree/Types/TreeExample.shorthand.tsx

@@ -0,0 +1,75 @@
+import * as React from 'react'
+import { Tree } from '@stardust-ui/react'
+
+const items = [
+  {
+    id: '1',
+    title: 'House Lannister',
+    items: [
+      {
+        id: '11',
+        title: 'Tywin',
+        items: [
+          {
+            id: '111',
+            title: 'Jaime',
+          },
+          {
+            id: '112',
+            title: 'Cersei',
+          },
+          {
+            id: '113',
+            title: 'Tyrion',
+          },
+        ],
+      },
+      {
+        id: '12',
+        title: 'Kevan',
+        items: [
+          {
+            id: '121',
+            title: 'Lancel',
+          },
+          {
+            id: '122',
+            title: 'Willem',
+          },
+          {
+            id: '123',
+            title: 'Martyn',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: '2',
+    title: 'House Targaryen',
+    items: [
+      {
+        id: '21',
+        title: 'Aerys',
+        items: [
+          {
+            id: '211',
+            title: 'Rhaegar',
+          },
+          {
+            id: '212',
+            title: 'Viserys',
+          },
+          {
+            id: '213',
+            title: 'Daenerys',
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const TreeExampleShorthand = () => <Tree items={items} />
+
+export default TreeExampleShorthand

docs/src/examples/components/Tree/Types/TreeExclusiveExample.shorthand.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import { Icon, Tree } from '@stardust-ui/react'
+
+const items = [
+  {
+    id: '1',
+    title: 'one',
+    items: [
+      {
+        id: '2',
+        title: 'one one',
+        items: [
+          {
+            id: '3',
+            title: 'one one one',
+          },
+        ],
+      },
+      {
+        id: '6',
+        title: 'one two',
+        items: [
+          {
+            id: '7',
+            title: 'one two one',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: '4',
+    title: 'two',
+    items: [
+      {
+        id: '5',
+        title: 'two one',
+      },
+    ],
+  },
+]
+
+const titleRenderer = (Component, { content, open, hasSubtree, ...restProps }) => (
+  <Component open={open} hasSubtree={hasSubtree} {...restProps}>
+    {hasSubtree && <Icon name={open ? 'triangle-down' : 'triangle-right'} />}
+    <span>{content}</span>
+  </Component>
+)
+
+const TreeExclusiveExample = () => <Tree items={items} renderItemTitle={titleRenderer} exclusive />
+
+export default TreeExclusiveExample

docs/src/examples/components/Tree/Types/TreeInitiallyOpenExample.shorthand.tsx

@@ -0,0 +1,77 @@
+import * as React from 'react'
+import { Tree } from '@stardust-ui/react'
+
+const items = [
+  {
+    id: '1',
+    title: 'House Lannister',
+    items: [
+      {
+        id: '11',
+        title: 'Tywin',
+        items: [
+          {
+            id: '111',
+            title: 'Jaime',
+          },
+          {
+            id: '112',
+            title: 'Cersei',
+          },
+          {
+            id: '113',
+            title: 'Tyrion',
+          },
+        ],
+      },
+      {
+        id: '12',
+        title: 'Kevan',
+        items: [
+          {
+            id: '121',
+            title: 'Lancel',
+          },
+          {
+            id: '122',
+            title: 'Willem',
+          },
+          {
+            id: '123',
+            title: 'Martyn',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: '2',
+    title: 'House Targaryen',
+    items: [
+      {
+        id: '21',
+        title: 'Aerys',
+        items: [
+          {
+            id: '211',
+            title: 'Rhaegar',
+          },
+          {
+            id: '212',
+            title: 'Viserys',
+          },
+          {
+            id: '213',
+            title: 'Daenerys',
+          },
+        ],
+      },
+    ],
+  },
+]
+
+const TreeInitiallyOpenExampleShorthand = () => (
+  <Tree items={items} defaultActiveItemIds={['1', '12', '2']} />
+)
+
+export default TreeInitiallyOpenExampleShorthand

docs/src/examples/components/Tree/Types/TreeTitleCustomizationExample.shorthand.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import { Icon, Tree } from '@stardust-ui/react'
+
+const items = [
+  {
+    id: '1',
+    title: 'one',
+    items: [
+      {
+        id: '2',
+        title: 'one one',
+        items: [
+          {
+            id: '3',
+            title: 'one one one',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    id: '4',
+    title: 'two',
+    items: [
+      {
+        id: '5',
+        title: 'two one',
+      },
+    ],
+  },
+]
+
+const titleRenderer = (Component, { content, open, hasSubtree, ...restProps }) => (
+  <Component open={open} hasSubtree={hasSubtree} {...restProps}>
+    {hasSubtree && <Icon name={open ? 'triangle-down' : 'triangle-right'} />}
+    <span>{content}</span>
+  </Component>
+)
+
+const TreeTitleCustomizationExample = () => <Tree items={items} renderItemTitle={titleRenderer} />
+
+export default TreeTitleCustomizationExample

docs/src/examples/components/Tree/Types/index.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Default"
+      description="A default Tree."
+      examplePath="components/Tree/Types/TreeExample"
+    />
+    <ComponentExample
+      title="Exclusive"
+      description="A Tree with only one subtree open at a time."
+      examplePath="components/Tree/Types/TreeExclusiveExample"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Tree/Usage/index.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Usage = () => (
+  <ExampleSection title="Usage">
+    <ComponentExample
+      title="Custom Title"
+      description="A Tree with customized title rendering."
+      examplePath="components/Tree/Types/TreeTitleCustomizationExample"
+    />
+    <ComponentExample
+      title="Initially Open"
+      description="A Tree with some items initially open."
+      examplePath="components/Tree/Types/TreeInitiallyOpenExample"
+    />
+  </ExampleSection>
+)
+
+export default Usage

docs/src/examples/components/Tree/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import Types from './Types'
+
+const TreeExamples = () => (
+  <>
+    <Types />
+  </>
+)
+
+export default TreeExamples

packages/react/src/components/HierarchicalTree/HierarchicalTree.tsx

@@ -95,7 +95,6 @@ class HierarchicalTree extends AutoControlledComponent<
     exclusive: PropTypes.bool,
     items: customPropTypes.collectionShorthand,
     renderItemTitle: PropTypes.func,
-    rtlAttributes: PropTypes.func,
     onActiveIndexChange: PropTypes.func,
   }
 

packages/react/src/components/HierarchicalTree/HierarchicalTreeItem.tsx

@@ -88,7 +88,6 @@ class HierarchicalTreeItem extends UIComponent<WithAsProp<HierarchicalTreeItemPr
     onTitleClick: PropTypes.func,
     open: PropTypes.bool,
     renderItemTitle: PropTypes.func,
-    treeItemRtlAttributes: PropTypes.func,
     title: customPropTypes.itemShorthand,
   }