@availity/mui-tree 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,15 @@
+# Changelog
+
+This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
+
+## 0.1.0 (2024-09-09)
+
+### Dependency Updates
+
+* `mui-icon` updated to version `0.1.0`
+* `mui-layout` updated to version `0.1.0`
+
+### Features
+
+* **mui-tree:** add truncate props ([fef6fff](https://github.com/Availity/element/commit/fef6fffc317280d81d7521358e4f23383d607a74))
+* **mui-tree:** initial commit ([de6c23b](https://github.com/Availity/element/commit/de6c23bfdd01d58ee0ddac116ed80c3d8942ad1e))

package/README.md

@@ -0,0 +1,65 @@
+# @availity/mui-tree
+
+> Availity MUI Tree component to be used with @availity/element design system.
+
+[![Version](https://img.shields.io/npm/v/@availity/mui-tree.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-tree)
+[![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-tree.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-tree)
+[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-tree?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/mui-tree/package.json)
+
+## Documentation
+
+This package extends the MUI Tree component: [MUI Tree Docs](https://mui.com/x/react-tree-view/)
+
+Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-tree-introduction--docs)
+
+Availity standards for design and usage can be found in the [Availity Design Guide](https://zeroheight.com/2e36e50c7)
+
+## Installation
+
+### Import Through @availity/element (Recommended)
+
+#### NPM
+
+```bash
+npm install @availity/element
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/element
+```
+
+### Direct Import
+
+#### NPM
+
+_This package has a few peer dependencies. Add `@mui/material`, `@emotion/react`, & `@availity/mui-icon` to your project if not already installed._
+
+```bash
+npm install @availity/mui-tree
+```
+
+#### Yarn
+
+```bash
+yarn add @availity/mui-tree
+```
+
+### Usage
+
+#### Import through @availity/element
+
+```tsx
+import { DynamicTreeView, TreeView, TreeItem } from '@availity/element';
+```
+
+#### Direct import
+
+```tsx
+import { DynamicTreeView, TreeView, TreeItem } from '@availity/mui-tree';
+```
+
+#### DynamicTreeView vs TreeView
+
+TreeView receives its items as JSX Children. DynamicTreeView receives its items via an items prop making it easier to dynamically load them from an external source. Furthermore, DynamicTreeView includes the ability to make the TreeItem's editable.

package/dist/index.d.mts

@@ -0,0 +1,17 @@
+import { SimpleTreeViewProps } from '@mui/x-tree-view/SimpleTreeView';
+import { RichTreeViewProps } from '@mui/x-tree-view/RichTreeView';
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+import { TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
+
+type TreeViewProps = SimpleTreeViewProps<true>;
+declare const TreeView: ({ children, ...rest }: TreeViewProps) => JSX.Element;
+
+type DynamicTreeViewProps = RichTreeViewProps<TreeViewBaseItem, true>;
+declare const DynamicTreeView: ({ children, slots, ...rest }: DynamicTreeViewProps) => JSX.Element;
+
+interface TreeItemProps extends TreeItem2Props {
+    truncate?: boolean;
+}
+declare const TreeItem: ({ children, slots, slotProps, truncate, ...rest }: TreeItemProps) => JSX.Element;
+
+export { DynamicTreeView, type DynamicTreeViewProps, TreeItem, type TreeItemProps, TreeView, type TreeViewProps };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import { SimpleTreeViewProps } from '@mui/x-tree-view/SimpleTreeView';
+import { RichTreeViewProps } from '@mui/x-tree-view/RichTreeView';
+import { TreeViewBaseItem } from '@mui/x-tree-view/models';
+import { TreeItem2Props } from '@mui/x-tree-view/TreeItem2';
+
+type TreeViewProps = SimpleTreeViewProps<true>;
+declare const TreeView: ({ children, ...rest }: TreeViewProps) => JSX.Element;
+
+type DynamicTreeViewProps = RichTreeViewProps<TreeViewBaseItem, true>;
+declare const DynamicTreeView: ({ children, slots, ...rest }: DynamicTreeViewProps) => JSX.Element;
+
+interface TreeItemProps extends TreeItem2Props {
+    truncate?: boolean;
+}
+declare const TreeItem: ({ children, slots, slotProps, truncate, ...rest }: TreeItemProps) => JSX.Element;
+
+export { DynamicTreeView, type DynamicTreeViewProps, TreeItem, type TreeItemProps, TreeView, type TreeViewProps };

package/dist/index.js

@@ -0,0 +1,102 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  DynamicTreeView: () => DynamicTreeView,
+  TreeItem: () => TreeItem,
+  TreeView: () => TreeView
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/lib/TreeView.tsx
+var import_SimpleTreeView = require("@mui/x-tree-view/SimpleTreeView");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TreeView = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_SimpleTreeView.SimpleTreeView, __spreadProps(__spreadValues({}, rest), { children }));
+};
+
+// src/lib/DynamicTreeView.tsx
+var import_RichTreeView = require("@mui/x-tree-view/RichTreeView");
+
+// src/lib/TreeItem.tsx
+var import_TreeItem2 = require("@mui/x-tree-view/TreeItem2");
+var import_mui_icon = require("@availity/mui-icon");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var TreeItem = (_a) => {
+  var _b = _a, { children, slots, slotProps, truncate } = _b, rest = __objRest(_b, ["children", "slots", "slotProps", "truncate"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_TreeItem2.TreeItem2,
+    __spreadProps(__spreadValues({}, rest), {
+      slots: __spreadProps(__spreadValues({}, slots), { expandIcon: import_mui_icon.TriangleRightIcon, collapseIcon: import_mui_icon.TriangleExpandIcon }),
+      slotProps: __spreadProps(__spreadValues({}, slotProps), {
+        expandIcon: { fontSize: "Xsmall" },
+        collapseIcon: { fontSize: "Xsmall" },
+        label: {
+          style: truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : {}
+        }
+      }),
+      children
+    })
+  );
+};
+
+// src/lib/DynamicTreeView.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DynamicTreeView = (_a) => {
+  var _b = _a, { children, slots } = _b, rest = __objRest(_b, ["children", "slots"]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_RichTreeView.RichTreeView, __spreadProps(__spreadValues({}, rest), { slots: __spreadProps(__spreadValues({}, slots), { item: TreeItem }), children }));
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DynamicTreeView,
+  TreeItem,
+  TreeView
+});

package/dist/index.mjs

@@ -0,0 +1,76 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/lib/TreeView.tsx
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
+import { jsx } from "react/jsx-runtime";
+var TreeView = (_a) => {
+  var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+  return /* @__PURE__ */ jsx(SimpleTreeView, __spreadProps(__spreadValues({}, rest), { children }));
+};
+
+// src/lib/DynamicTreeView.tsx
+import { RichTreeView } from "@mui/x-tree-view/RichTreeView";
+
+// src/lib/TreeItem.tsx
+import { TreeItem2 } from "@mui/x-tree-view/TreeItem2";
+import { TriangleRightIcon, TriangleExpandIcon } from "@availity/mui-icon";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var TreeItem = (_a) => {
+  var _b = _a, { children, slots, slotProps, truncate } = _b, rest = __objRest(_b, ["children", "slots", "slotProps", "truncate"]);
+  return /* @__PURE__ */ jsx2(
+    TreeItem2,
+    __spreadProps(__spreadValues({}, rest), {
+      slots: __spreadProps(__spreadValues({}, slots), { expandIcon: TriangleRightIcon, collapseIcon: TriangleExpandIcon }),
+      slotProps: __spreadProps(__spreadValues({}, slotProps), {
+        expandIcon: { fontSize: "Xsmall" },
+        collapseIcon: { fontSize: "Xsmall" },
+        label: {
+          style: truncate ? { overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" } : {}
+        }
+      }),
+      children
+    })
+  );
+};
+
+// src/lib/DynamicTreeView.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var DynamicTreeView = (_a) => {
+  var _b = _a, { children, slots } = _b, rest = __objRest(_b, ["children", "slots"]);
+  return /* @__PURE__ */ jsx3(RichTreeView, __spreadProps(__spreadValues({}, rest), { slots: __spreadProps(__spreadValues({}, slots), { item: TreeItem }), children }));
+};
+export {
+  DynamicTreeView,
+  TreeItem,
+  TreeView
+};

package/introduction.stories.mdx

@@ -0,0 +1,7 @@
+import { Markdown } from '@storybook/blocks';
+import { Meta } from '@storybook/addon-docs';
+import ReadMe from './README.md?raw';
+
+<Meta title="Components/TreeView/Introduction" />
+
+<Markdown>{ReadMe}</Markdown>

package/jest.config.js

@@ -0,0 +1,7 @@
+const global = require('../../jest.config.global');
+
+module.exports = {
+  ...global,
+  displayName: 'tree',
+  coverageDirectory: '../../coverage/tree',
+};

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@availity/mui-tree",
+  "version": "0.1.0",
+  "description": "Availity MUI Tree Component - part of the @availity/element design system",
+  "keywords": [
+    "react",
+    "typescript",
+    "availity",
+    "mui"
+  ],
+  "homepage": "https://availity.github.io/element/?path=/docs/components-tree-introduction--docs",
+  "bugs": {
+    "url": "https://github.com/Availity/element/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Availity/element.git",
+    "directory": "packages/tree"
+  },
+  "license": "MIT",
+  "author": "Availity Developers <AVOSS@availity.com>",
+  "browser": "./dist/index.js",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "scripts": {
+    "build": "tsup src/index.ts --format esm,cjs --dts",
+    "dev": "tsup src/index.ts --format esm,cjs --watch --dts",
+    "clean": "rm -rf dist",
+    "clean:nm": "rm -rf node_modules",
+    "publish": "yarn npm publish --tolerate-republish --access public",
+    "publish:canary": "yarn npm publish --access public --tag canary"
+  },
+  "devDependencies": {
+    "@availity/mui-icon": "^0.10.1",
+    "@availity/mui-layout": "^0.1.6",
+    "@mui/material": "^5.15.15",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "@availity/mui-icon": "^0.10.1",
+    "@mui/material": "^5.11.9",
+    "react": ">=16.3.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@mui/x-tree-view": "^7.15.0"
+  }
+}

package/project.json

@@ -0,0 +1,41 @@
+{
+  "name": "mui-tree",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/tree/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "options": {
+        "eslintConfig": ".eslintrc.json",
+        "silent": false,
+        "fix": false,
+        "cache": true,
+        "cacheLocation": "./node_modules/.cache/tree/.eslintcache",
+        "maxWarnings": -1,
+        "quiet": false,
+        "noEslintrc": false,
+        "hasTypeAwareRules": true,
+        "cacheStrategy": "metadata"
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/tree"],
+      "options": {
+        "jestConfig": "packages/tree/jest.config.js"
+      }
+    },
+    "version": {
+      "executor": "@jscutlery/semver:version",
+      "options": {
+        "preset": "conventional",
+        "commitMessageFormat": "chore({projectName}): release version ${version} [skip ci]",
+        "tagPrefix": "@availity/{projectName}@",
+        "trackDeps": true,
+        "skipCommitTypes": ["docs"]
+      }
+    }
+  }
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from './lib/TreeView';
+export * from './lib/DynamicTreeView';
+export * from './lib/TreeItem';

package/src/lib/DynamicTreeView.stories.tsx

@@ -0,0 +1,72 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import type { TreeViewBaseItem } from '@mui/x-tree-view/models';
+import { DynamicTreeView, DynamicTreeViewProps } from './DynamicTreeView';
+
+/**
+ * The `DynamicTreeView` receives its items via an `items` prop, making it easier
+ * to dynamically load them from an external source. Furthermore,
+ * `DynamicTreeView` includes the ability to make the `TreeItem`'s editable.
+ */
+
+const meta: Meta<typeof DynamicTreeView> = {
+  title: 'Components/TreeView/DynamicTreeView',
+  component: DynamicTreeView,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const items: TreeViewBaseItem[] = [
+  {
+    id: 'tree-1',
+    label: 'Tree 1',
+    children: [
+      { id: 'sub-tree-1.1', label: 'Sub Tree 1.1' },
+      { id: 'sub-tree-1.2', label: 'Sub Tree 1.2' },
+      { id: 'sub-tree-1.3', label: 'Sub Tree 1.3' },
+    ],
+  },
+  {
+    id: 'tree-2',
+    label: 'Tree 2',
+    children: [
+      { id: 'sub-tree-2.1', label: 'Sub Tree 2.1' },
+      { id: 'sub-tree-2.2', label: 'Sub Tree 2.2' },
+    ],
+  },
+  {
+    id: 'tree-3',
+    label: 'Tree 3',
+    children: [{ id: 'sub-tree-3.1', label: 'Sub Tree 3.1' }],
+  },
+  {
+    id: 'tree-4',
+    label: 'Tree 4',
+    children: [{ id: 'sub-tree-4.1', label: 'Sub Tree 4.1' }],
+  },
+];
+
+export const _DynamicTreeView: StoryObj<typeof DynamicTreeView> = {
+  render: (args: DynamicTreeViewProps) => <DynamicTreeView {...args} />,
+  args: {
+    items,
+  },
+};
+export const _DynamicTreeViewCheckbox: StoryObj<typeof DynamicTreeView> = {
+  render: (args: DynamicTreeViewProps) => <DynamicTreeView {...args} />,
+  args: {
+    items,
+    checkboxSelection: true,
+  },
+};
+
+export const _DynamicTreeViewEditable: StoryObj<typeof DynamicTreeView> = {
+  render: (args: DynamicTreeViewProps) => <DynamicTreeView {...args} />,
+  args: {
+    items,
+    isItemEditable: true,
+    experimentalFeatures: { labelEditing: true },
+  },
+};

package/src/lib/DynamicTreeView.test.tsx

@@ -0,0 +1,43 @@
+import { fireEvent, render } from '@testing-library/react';
+import { DynamicTreeView } from './DynamicTreeView';
+
+describe('Tree', () => {
+  test('should render successfully', () => {
+    const items = [
+      {
+        id: 'tree-1',
+        label: 'Tree 1',
+        children: [
+          { id: 'sub-tree-1.1', label: 'Sub Tree 1.1' },
+          { id: 'sub-tree-1.2', label: 'Sub Tree 1.2' },
+          { id: 'sub-tree-1.3', label: 'Sub Tree 1.3' },
+        ],
+      },
+      {
+        id: 'tree-2',
+        label: 'Tree 2',
+        children: [
+          { id: 'sub-tree-2.1', label: 'Sub Tree 2.1' },
+          { id: 'sub-tree-2.2', label: 'Sub Tree 2.2' },
+        ],
+      },
+      {
+        id: 'tree-3',
+        label: 'Tree 3',
+        children: [{ id: 'sub-tree-3.1', label: 'Sub Tree 3.1' }],
+      },
+      {
+        id: 'tree-4',
+        label: 'Tree 4',
+        children: [{ id: 'sub-tree-4.1', label: 'Sub Tree 4.1' }],
+      },
+    ];
+    const { getByText } = render(<DynamicTreeView items={items} />);
+
+    const Tree1 = getByText('Tree 1');
+
+    fireEvent.click(Tree1);
+
+    expect(getByText('Sub Tree 1.1')).toBeTruthy();
+  });
+});

package/src/lib/DynamicTreeView.tsx

@@ -0,0 +1,13 @@
+import { RichTreeView, RichTreeViewProps as MuiDynamicTreeViewProps } from '@mui/x-tree-view/RichTreeView';
+import type { TreeViewBaseItem } from '@mui/x-tree-view/models';
+import { TreeItem } from './TreeItem';
+
+export type DynamicTreeViewProps = MuiDynamicTreeViewProps<TreeViewBaseItem, true>;
+
+export const DynamicTreeView = ({ children, slots, ...rest }: DynamicTreeViewProps): JSX.Element => {
+  return (
+    <RichTreeView {...rest} slots={{ ...slots, item: TreeItem }}>
+      {children}
+    </RichTreeView>
+  );
+};

package/src/lib/TreeItem.stories.tsx

@@ -0,0 +1,61 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { TreeItem, TreeItemProps } from './TreeItem';
+import { TreeView } from './TreeView';
+import { FolderIcon } from '@availity/mui-icon';
+import { Grid } from '@availity/mui-layout';
+
+const meta: Meta<typeof TreeItem> = {
+  title: 'Components/TreeView/TreeItem',
+  component: TreeItem,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+export const _Tree: StoryObj<typeof TreeItem> = {
+  render: (args: TreeItemProps) => (
+    <TreeView>
+      <TreeItem {...args} />
+    </TreeView>
+  ),
+  args: {
+    truncate: true,
+    itemId: 'Tree Item Label',
+    label: 'Tree Item Label',
+    children: <TreeItem itemId="This text is a child of TreeItem" label="This text is a child of TreeItem" />,
+  },
+};
+
+export const _TreeCheckboxSelection: StoryObj<typeof TreeItem> = {
+  render: (args: TreeItemProps) => (
+    <TreeView checkboxSelection>
+      <TreeItem {...args} />
+    </TreeView>
+  ),
+  args: {
+    itemId: 'Tree Item Label',
+    label: 'Tree Item Label',
+    children: <TreeItem itemId="This text is a child of TreeItem" label="This text is a child of TreeItem" />,
+  },
+};
+
+export const _TreeIcon: StoryObj<typeof TreeItem> = {
+  render: (args: TreeItemProps) => (
+    <TreeView checkboxSelection>
+      <TreeItem {...args} />
+    </TreeView>
+  ),
+  args: {
+    itemId: 'tree-item',
+    label: (
+      <Grid container alignItems="center">
+        <FolderIcon sx={{ marginRight: 1 }} />
+        Tree Item
+      </Grid>
+    ),
+    // slots: { icon: FolderIcon },
+    children: <TreeItem itemId="sub-tree-item" label="Sub Tree Item" />,
+  },
+};

package/src/lib/TreeItem.test.tsx

@@ -0,0 +1,39 @@
+import { fireEvent, render } from '@testing-library/react';
+import { TreeItem } from './TreeItem';
+import { TreeView } from './TreeView';
+import { TriangleRightIcon, TriangleExpandIcon } from '@availity/mui-icon';
+
+describe('TreeView', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(
+      <TreeView>
+        <TreeItem itemId="test-tree-item" label="Test" />
+      </TreeView>
+    );
+    expect(getByText('Test')).toBeTruthy();
+  });
+
+  test('should use correct command and collapse icons', () => {
+    const { container, getByText } = render(
+      <TreeView>
+        <TreeItem
+          itemId="test-tree-item"
+          label="Test"
+          children={<TreeItem itemId="test-sub-tree-item" label="Sub Item Test" />}
+        />
+      </TreeView>
+    );
+
+    const expandIcon = container.getElementsByTagName('path');
+
+    const { container: RenderedTriangleRightIcon } = render(<TriangleRightIcon />);
+    expect(expandIcon[0]).toStrictEqual(RenderedTriangleRightIcon.getElementsByTagName('path')[0]);
+
+    fireEvent.click(getByText('Test'));
+
+    const collapseIcon = container.getElementsByTagName('path');
+
+    const { container: RenderedTriangleExpandIcon } = render(<TriangleExpandIcon />);
+    expect(collapseIcon[0]).toStrictEqual(RenderedTriangleExpandIcon.getElementsByTagName('path')[0]);
+  });
+});

package/src/lib/TreeItem.tsx

@@ -0,0 +1,25 @@
+import { TreeItem2, TreeItem2Props as MuiTreeItem2Props } from '@mui/x-tree-view/TreeItem2';
+import { TriangleRightIcon, TriangleExpandIcon } from '@availity/mui-icon';
+
+export interface TreeItemProps extends MuiTreeItem2Props {
+  truncate?: boolean;
+}
+
+export const TreeItem = ({ children, slots, slotProps, truncate, ...rest }: TreeItemProps): JSX.Element => {
+  return (
+    <TreeItem2
+      {...rest}
+      slots={{ ...slots, expandIcon: TriangleRightIcon, collapseIcon: TriangleExpandIcon }}
+      slotProps={{
+        ...slotProps,
+        expandIcon: { fontSize: 'Xsmall' },
+        collapseIcon: { fontSize: 'Xsmall' },
+        label: {
+          style: truncate ? { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } : {},
+        },
+      }}
+    >
+      {children}
+    </TreeItem2>
+  );
+};

package/src/lib/TreeView.stories.tsx

@@ -0,0 +1,52 @@
+// Each exported component in the package should have its own stories file
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { TreeView, TreeViewProps } from './TreeView';
+import { TreeItem } from './TreeItem';
+
+/**
+ * The `TreeView` component receives its items as JSX Children. This makes it
+ * a good option for hardcoded items.
+ */
+
+const meta: Meta<typeof TreeView> = {
+  title: 'Components/TreeView/TreeView',
+  component: TreeView,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+const items = (
+  <>
+    <TreeItem itemId="tree-1" label="Tree 1">
+      <TreeItem itemId="sub-tree-1.1" label="Sub Tree 1.1" />
+      <TreeItem itemId="sub-tree-1.2" label="Sub Tree 1.2" />
+      <TreeItem itemId="sub-tree-1.3" label="Sub Tree 1.3" />
+    </TreeItem>
+    <TreeItem itemId="tree-2" label="Tree 2">
+      <TreeItem itemId="sub-tree-2.1" label="Sub Tree 2.1" />
+      <TreeItem itemId="sub-tree-2.2" label="Sub Tree 2.2" />
+    </TreeItem>
+    <TreeItem itemId="tree-3" label="Tree 3">
+      <TreeItem itemId="sub-tree-3.1" label="Sub Tree 3.1" />
+    </TreeItem>
+    <TreeItem itemId="tree-4" label="Tree 4">
+      <TreeItem itemId="sub-tree-4.1" label="Sub Tree 4.1" />
+    </TreeItem>
+  </>
+);
+
+export const _TreeView: StoryObj<typeof TreeView> = {
+  render: (args: TreeViewProps) => <TreeView {...args} />,
+  args: {
+    children: items,
+  },
+};
+
+export const _TreeViewCheckbox: StoryObj<typeof TreeView> = {
+  render: (args: TreeViewProps) => <TreeView checkboxSelection {...args} />,
+  args: {
+    children: items,
+  },
+};

package/src/lib/TreeView.test.tsx

@@ -0,0 +1,18 @@
+import { fireEvent, render } from '@testing-library/react';
+import { TreeView } from './TreeView';
+import { TreeItem } from './TreeItem';
+
+describe('TreeView', () => {
+  test('should render successfully', () => {
+    const { getByText } = render(
+      <TreeView>
+        <TreeItem itemId="test" label="Test" children={<TreeItem itemId="sub-test" label="Sub Test" />} />
+      </TreeView>
+    );
+    const Tree1 = getByText('Test');
+
+    fireEvent.click(Tree1);
+
+    expect('Sub Test').toBeTruthy();
+  });
+});

package/src/lib/TreeView.tsx

@@ -0,0 +1,7 @@
+import { SimpleTreeView, SimpleTreeViewProps } from '@mui/x-tree-view/SimpleTreeView';
+
+export type TreeViewProps = SimpleTreeViewProps<true>;
+
+export const TreeView = ({ children, ...rest }: TreeViewProps): JSX.Element => {
+  return <SimpleTreeView {...rest}>{children}</SimpleTreeView>;
+};

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"]
+}

package/tsconfig.spec.json

@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node", "@testing-library/jest-dom"],
+    "allowJs": true
+  },
+  "include": ["**/*.test.js", "**/*.test.ts", "**/*.test.tsx", "**/*.d.ts"]
+}