{"_id":"@bolttech/ob-atoms-tree-view","_rev":"4-fd61e40941b8ea803c3a766a8e5633af","name":"@bolttech/ob-atoms-tree-view","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"@bolttech/ob-atoms-tree-view","version":"1.0.0","_id":"@bolttech/ob-atoms-tree-view@1.0.0","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"5e6f0e760c99101d6b758590a200a0e0709fd272","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tree-view/-/ob-atoms-tree-view-1.0.0.tgz","fileCount":11,"integrity":"sha512-+QJ4JJl+RWqCTffAnnbIVuDeZ6fHqFYMyVEJILKr3vK3/HMLZ6K7x6MG6lBE+OgceNuoINesQAX1H61bqWi+wg==","signatures":[{"sig":"MEUCIG+Z32CNJhEiGFfLF2dPbIJVNDecMOsaparHMUWb9oxoAiEAqjpSOUp4AiSAaeQ7HHLV1seZSnbyCGUuRFYipq4ppBM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":84712},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"55413656245c215d2962d3cadb1f45c3c806ae02","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"11.10.1","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"@bolttech/ui-utils":"0.6.5"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-tree-view_1.0.0_1778516222540_0.07323299895898439","host":"s3://npm-registry-packages-npm-production"}},"1.0.1":{"name":"@bolttech/ob-atoms-tree-view","version":"1.0.1","_id":"@bolttech/ob-atoms-tree-view@1.0.1","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"bf655408f518258d6a50666cdfcf7e6706012c4b","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tree-view/-/ob-atoms-tree-view-1.0.1.tgz","fileCount":5,"integrity":"sha512-fYaU5rKf+ibpyl3h42C2W1V4GC186/qd03mZMdvBmyNLyYUKrIQepQpZgPmg/F2lbXNo9Yptn3bo5/NpB0EP6Q==","signatures":[{"sig":"MEUCIDEzJ6pV6oeu38N/AxMQvvjrL8+OLgv9Fb5aKDJGce8mAiEAjpEM+g29Kesn0T6wM4Vz8RZXi4ASY6vW/VsNntvKFIM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":79445},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"4722eb93af0b5b86a654138ec9e5a73bdd408de1","_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"},"_npmVersion":"10.9.4","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7","@bolttech/ob-atoms-icon":"1.0.1","@bolttech/ob-atoms-tree-view":"1.0.0"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-tree-view_1.0.1_1780927307403_0.8557502675528279","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"@bolttech/ob-atoms-tree-view","version":"1.0.2","_id":"@bolttech/ob-atoms-tree-view@1.0.2","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"dist":{"shasum":"f74dcabb6f53133e36a3c6096b11ca97355168ad","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tree-view/-/ob-atoms-tree-view-1.0.2.tgz","fileCount":11,"integrity":"sha512-DG3hqGNZTi9g8raVYA9BzDENP4g1uSv4Ut1H4dWH/c9olqjRPv/IKxG/GDv+1O6W43ZADVU4r3lncoO4npDTow==","signatures":[{"sig":"MEYCIQD3fOiC860Em4NCZBqWOANpx4iMpAMIPvkrnahzeIg9fgIhAM6SbJfhPjvBW087yTa89ufaxcXdlpauW+E9yOqbY7QV","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":83447},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"c547d800747d7e9d74baa712a88ffccdc91c0944","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"10.9.8","description":"```bash npx nx g @nx/react:lib ${lib_name} ```","directories":{},"_nodeVersion":"22.17.1","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7","@bolttech/ob-atoms-icon":"1.0.1","@bolttech/ob-atoms-tree-view":"1.0.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/ob-atoms-tree-view_1.0.2_1788779517728_0.6585144936903033","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"@bolttech/ob-atoms-tree-view","version":"1.0.3","dependencies":{"react":"19.1.2","classnames":"^2.5.1","@bolttech/ui-utils":"0.6.7","@bolttech/ob-atoms-tree-view":"1.0.1","@bolttech/ob-atoms-icon":"1.0.1"},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","_id":"@bolttech/ob-atoms-tree-view@1.0.3","gitHead":"0e182071efc7a310626e450c12f694db02b8961e","description":"The **TreeView** component is a React component that provides a hierarchical structure for displaying nested items.","_nodeVersion":"22.17.1","_npmVersion":"10.9.8","dist":{"integrity":"sha512-zqLVjnmzHAnzXvwcl04B6HIePfw5meq8dGg/GoMrq+jbwbAc+Myi3K1bbjvNaoGfSi7J3N7wW1w5mUBYrmjfzg==","shasum":"15a3f1cf871b2f1464e336fd236bfdddeab71562","tarball":"https://registry.npmjs.org/@bolttech/ob-atoms-tree-view/-/ob-atoms-tree-view-1.0.3.tgz","fileCount":10,"unpackedSize":88612,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIFcf16J62Wd5WVS678WFS8t28JSx4up+9slTfSjLTCUkAiBBZoh9nmwHyL3b39PsZlSsyQbWxKqoULgJ8QlElU4ooQ=="}]},"_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"directories":{},"maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/ob-atoms-tree-view_1.0.3_1788796762184_0.9777481369324921"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-11T16:17:02.459Z","modified":"2026-09-07T15:59:22.483Z","1.0.0":"2026-05-11T16:17:02.658Z","1.0.1":"2026-06-08T14:01:47.557Z","1.0.2":"2026-09-07T11:11:57.867Z","1.0.3":"2026-09-07T15:59:22.310Z"},"description":"The **TreeView** component is a React component that provides a hierarchical structure for displaying nested items.","maintainers":[{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},{"name":"danielkhalebbatista","email":"daniel.batista@bolttech.io"},{"name":"pauloazevedo-ed","email":"paulo.azevedo@bolttech.io"},{"name":"bruno.gomes","email":"bruno.gomes@bolttech.io"},{"name":"plinio.altoe","email":"plinio.altoe@bolttech.io"},{"name":"joaoteixeira20","email":"joao.teixeira@bolttech.io"},{"name":"esteve-cabrera","email":"esteve.cabrera@bolttech.io"},{"name":"jabolttech","email":"jhonatan.amorim@bolttech.io"},{"name":"lucasvpaiva","email":"lucas.paiva@bolttech.io"},{"name":"herberts.fortuna","email":"herberts.fortuna@bolttech.io"},{"name":"matheus.maciel.bolttech","email":"matheus.maciel@bolttech.io"},{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"}],"readme":"# TreeView Component\n\nThe **TreeView** component is a React component that provides a hierarchical structure for displaying nested items.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Props](#props)\n - [TreeView Props](#treeview-props)\n - [TreeViewItem Props](#treeviewitem-props)\n- [Example](#example)\n- [Contributing](#contributing)\n\n---\n\n## Installation\n\nTo use the **TreeView** component in your project, install the required dependencies:\n\n```bash\nnpm @bolttech/atoms-tree-view\n```\n\n---\n\n## Usage\n\nThe **TreeView** component organizes content into a collapsible tree structure. It works in conjunction with **TreeViewItem** to represent individual nodes in the tree.\n\n### Basic Example\n\n```tsx\nimport React, { useState } from 'react';\nimport { TreeView, TreeViewItem } from '@bolttech/atoms-tree-view';\nimport { bolttechTheme, BolttechThemeProvider } from '@bolttech/frontend-foundations';\n\nfunction App() {\n const [selected, setSelected] = useState('');\n\n return (\n \n \n \n

Item 1.1

\n \n \n

Item 1.2

\n \n \n \n

Item 1.3.1

\n \n \n

Item 1.3.2

\n \n \n

Item 1.3.3

\n \n \n \n \n \n

Item 2.1

\n \n \n \n \n

Item 2.2.1.1

\n \n \n \n \n \n );\n}\n\nexport default App;\n```\n\n---\n\n## Props\n\n### TreeView Props\n\n| Prop | Type | Description |\n| --------------- | --------------------- | ------------------------------------------------------ |\n| `id` | `string` | The unique identifier for the tree view. |\n| `dataTestId` | `string` | The `data-testid` attribute for testing purposes. |\n| `children` | `React.ReactNode` | The nested `TreeViewItem` components. |\n| `arrowPosition` | `'left'` or `'right'` | Position of the expand/collapse arrows. |\n| `showLines` | `boolean` | Whether to show connector lines between tree levels. |\n| `selected` | `string` | The value of the currently selected tree item. |\n| `icons` | `TreeIconType` | Customizable icons for opened, closed, and leaf nodes. |\n| `className` | `string` | Custom CSS classes for styling the tree view. |\n\n### TreeIconType\n\n| Prop | Type | Description |\n| -------- | -------- | ------------------------------------------ |\n| `opened` | `string` | Icon displayed for expanded nodes. |\n| `closed` | `string` | Icon displayed for collapsed nodes. |\n| `leaf` | `string` | Icon displayed for leaf (childless) nodes. |\n\n---\n\n### TreeViewItem Props\n\n| Prop | Type | Description |\n| ------------ | -------------------------- | -------------------------------------------------------- |\n| `id` | `string` | The unique identifier for the tree view item. |\n| `dataTestId` | `string` | The `data-testid` attribute for testing purposes. |\n| `icon` | `string` | Icon to display next to the label. |\n| `label` | `string` | The label text for the tree item. |\n| `children` | `React.ReactNode` | Nested `TreeViewItem` components representing sub-nodes. |\n| `href` | `string` | A hyperlink for the tree item. |\n| `className` | `string` | Custom CSS classes for styling the tree item. |\n| `value` | `string` | The unique value associated with the tree item. |\n| `onClick` | `(value?: string) => void` | Callback triggered when the item is clicked. |\n\n---\n\n## Contributing\n\nContributions to the **TreeView** component are welcome! Please open an issue or submit a pull request on the project's repository if you find bugs or have feature suggestions.\n\n---\n","readmeFilename":"README.md"}