[EuiTreeView] Export EuiTreeView.Item (#7526)

changelogs/upcoming/7526.md

@@ -0,0 +1 @@
+- Added top-level `EuiTreeView.Item` export

src/components/tree_view/tree_view.tsx

@@ -24,7 +24,7 @@ import { CommonProps } from '../common';
 import { EuiI18n } from '../i18n';
 import { EuiScreenReaderOnly } from '../accessibility';
 
-import { EuiTreeViewItem } from './_tree_view_item';
+import { EuiTreeViewItem } from './tree_view_item';
 import { euiTreeViewStyles } from './tree_view.styles';
 
 const EuiTreeViewContext = createContext<string>('');
@@ -367,4 +367,7 @@ export class EuiTreeViewClass extends Component<
   }
 }
 
-export const EuiTreeView = withEuiTheme<EuiTreeViewProps>(EuiTreeViewClass);
+export const EuiTreeView = Object.assign(
+  withEuiTheme<EuiTreeViewProps>(EuiTreeViewClass),
+  { Item: EuiTreeViewItem }
+);

src/components/tree_view/tree_view_item.stories.tsx

@@ -0,0 +1,39 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiIcon } from '../icon';
+
+import { EuiTreeView } from './tree_view';
+import type { EuiTreeViewItemProps } from './tree_view_item';
+
+const meta: Meta<EuiTreeViewItemProps> = {
+  title: 'EuiTreeView.Item',
+  component: EuiTreeView.Item,
+  args: {
+    // Component defaults
+    display: 'default',
+    hasArrow: false,
+    isActive: false,
+    isExpanded: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiTreeViewItemProps>;
+
+export const Playground: Story = {
+  args: {
+    id: 'id',
+    label: 'Hello world',
+    icon: <EuiIcon type="folderOpen" />,
+    children: '',
+  },
+};

src/components/tree_view/_tree_view_item.styles.ts → src/components/tree_view/tree_view_item.styles.ts

@@ -19,7 +19,9 @@ export const euiTreeViewItemStyles = (euiThemeContext: UseEuiTheme) => {
 
   return {
     li: {
-      euiTreeView__node: css``,
+      euiTreeView__node: css`
+        list-style: none;
+      `,
       default: css`
         ${logicalCSS('max-height', defaultSize)}
         line-height: ${defaultSize};

src/components/tree_view/_tree_view_item.tsx → src/components/tree_view/tree_view_item.tsx

@@ -8,7 +8,6 @@
 
 import React, {
   FunctionComponent,
-  PropsWithChildren,
   HTMLAttributes,
   ReactNode,
   Ref,
@@ -21,19 +20,49 @@ import { CommonProps } from '../common';
 import { EuiIcon } from '../icon';
 
 import { EuiTreeViewProps } from './tree_view';
-import { euiTreeViewItemStyles } from './_tree_view_item.styles';
+import { euiTreeViewItemStyles } from './tree_view_item.styles';
 
-type EuiTreeViewItemProps = HTMLAttributes<HTMLButtonElement> &
-  CommonProps &
-  PropsWithChildren & {
+export type EuiTreeViewItemProps = Omit<
+  HTMLAttributes<HTMLButtonElement>,
+  'id' | 'children'
+> &
+  CommonProps & {
+    /**
+     * Required for `aria-controls` accessibility
+     */
     id: string;
+    /**
+     * The main button content
+     */
     label: ReactNode;
+    /**
+     * Used to render nested `EuiTreeView`s
+     */
+    children?: ReactNode;
+    /**
+     * Optional icon to render. Pass, e.g., `<EuiIcon />` or `<EuiToken />`
+     */
     icon?: ReactNode;
+    /**
+     * Renders an arrow if `children` exists. Otherwise renders a blank icon
+     */
     hasArrow?: boolean;
+    /**
+     * Adds a targetable modifier class
+     */
     isActive?: boolean;
+    /**
+     * Sets the `aria-expanded` attribute
+     */
     isExpanded?: boolean;
+    /**
+     * Determines default or compressed display
+     */
     display?: EuiTreeViewProps['display'];
     buttonRef?: Ref<HTMLButtonElement>;
+    /**
+     * Optional extra props to pass to the wrapping `<li>`
+     */
     wrapperProps?: HTMLAttributes<HTMLLIElement>;
   };