{"_id":"@bolttech/atoms-tree-view","_rev":"12-ba4eded9d5f822bc457ebb7945cd51ec","name":"@bolttech/atoms-tree-view","dist-tags":{"latest":"0.4.2"},"versions":{"0.1.0":{"name":"@bolttech/atoms-tree-view","version":"0.1.0","_id":"@bolttech/atoms-tree-view@0.1.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":"lukaspiccinibt","email":"lukas.piccini@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"}],"dist":{"shasum":"eef0c0ca9caa2f07b986b3765b7671328b395d21","tarball":"https://registry.npmjs.org/@bolttech/atoms-tree-view/-/atoms-tree-view-0.1.0.tgz","fileCount":9,"integrity":"sha512-47K45Mz/fIphkYynzK2lZysxGb8mu6j9rM67Ti9UNIqs5gU75y6zC2rMiaYDanzV4ECfrZpElFxS1/7v7ah7oQ==","signatures":[{"sig":"MEUCIQCpAfwrlzFEmSfCV2gNwNAOngfHnJLZkxfDNvlriCMdtQIgQZjZlILlRugXOPVNFib1h6ARXyECHroukVriVZbT0kI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":117312},"main":"./index.cjs","type":"commonjs","types":"./src/index.d.ts","gitHead":"315bc01a7a40b8e0fba2ff8dc9072691a272832a","_npmUser":{"name":"lukaspiccinibt","email":"lukas.piccini@bolttech.io"},"_npmVersion":"10.7.0","description":"The **TreeView** component is a React component that provides a hierarchical structure for displaying nested items.","directories":{},"_nodeVersion":"18.20.3","dependencies":{"react":"18.2.0","styled-components":"6.1.1","@bolttech/ui-utils":"0.5.0","@bolttech/atoms-icon":"0.24.0","@bolttech/default-theme":"0.10.0","@bolttech/frontend-foundations":"0.10.0"},"_hasShrinkwrap":false,"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/atoms-tree-view_0.1.0_1733412307781_0.6384805189739875","host":"s3://npm-registry-packages"}},"0.1.1":{"name":"@bolttech/atoms-tree-view","version":"0.1.1","_id":"@bolttech/atoms-tree-view@0.1.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":"lukaspiccinibt","email":"lukas.piccini@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"}],"dist":{"shasum":"487c5e5eef8108bf602f96c8662cea102834e508","tarball":"https://registry.npmjs.org/@bolttech/atoms-tree-view/-/atoms-tree-view-0.1.1.tgz","fileCount":9,"integrity":"sha512-ZuTxoPnEB8Q5aEI6m/A/KxmLx1zuQInKs25Cd1qC9ew9s9yxNEIAxcPbq4w3LzF/oeSPbgZ0ZyQtop/ZEFs3vQ==","signatures":[{"sig":"MEUCIE06AoZvpOtYj5CDwt7+kW9j/pY6EYb8CrAXtr14r2JNAiEAvPoFa0mZG7X+4mUp/YFyWdVYj70Cc8QlX6IbU8s4f54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":117284},"main":"./index.cjs","type":"commonjs","types":"./src/index.d.ts","gitHead":"cf5b6ea5845aaa67ab0f2908ff8f0bc47c3a3aa7","_npmUser":{"name":"lukaspiccinibt","email":"lukas.piccini@bolttech.io"},"_npmVersion":"10.7.0","description":"The **TreeView** component is a React component that provides a hierarchical structure for displaying nested items.","directories":{},"_nodeVersion":"18.20.3","dependencies":{"react":"18.2.0","styled-components":"6.1.1","@bolttech/ui-utils":"0.5.0","@bolttech/atoms-icon":"0.24.0","@bolttech/default-theme":"0.10.0","@bolttech/frontend-foundations":"0.10.0"},"_hasShrinkwrap":false,"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/atoms-tree-view_0.1.1_1734379421210_0.6496644321672935","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@bolttech/atoms-tree-view","version":"0.1.2","_id":"@bolttech/atoms-tree-view@0.1.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":"lukaspiccinibt","email":"lukas.piccini@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":"lucasvpaiva","email":"lucas.paiva@bolttech.io"}],"dist":{"shasum":"3bb6cd206ab21af2a560b283e192c221fcdf5079","tarball":"https://registry.npmjs.org/@bolttech/atoms-tree-view/-/atoms-tree-view-0.1.2.tgz","fileCount":9,"integrity":"sha512-s4QQf++dlJ9JkJXuPPJltPWopcXoE0Nkco1jDh9rg63xmhGFq26Ywqw8f44uGhDMQZ/8nL2BvpuiKlgsW9zuCQ==","signatures":[{"sig":"MEYCIQCRCDcu+NsKqOr+Mdb6b0yiCrJGRN3ellMmrynLSEI5mQIhAOoz01mljctngKuSu0i5ZzIH9JHcuJLuA/1YOj0KkEN9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":117284},"main":"./index.cjs","type":"commonjs","types":"./src/index.d.ts","gitHead":"1de795acf8c96332c2184ce59d1586ef167d7399","_npmUser":{"name":"andsfranbolt","email":"anderson.francisco@bolttech.io"},"_npmVersion":"10.7.0","description":"The **TreeView** component is a React component that provides a hierarchical structure for displaying nested items.","directories":{},"_nodeVersion":"18.20.4","dependencies":{"react":"18.2.0","styled-components":"6.1.1","@bolttech/ui-utils":"0.5.0","@bolttech/atoms-icon":"0.24.0","@bolttech/default-theme":"0.10.0","@bolttech/frontend-foundations":"0.10.0"},"_hasShrinkwrap":false,"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/atoms-tree-view_0.1.2_1736180134667_0.7433950801806133","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"@bolttech/atoms-tree-view","version":"0.2.0","_id":"@bolttech/atoms-tree-view@0.2.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":"lukaspiccinibt","email":"lukas.piccini@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":"lucasvpaiva","email":"lucas.paiva@bolttech.io"}],"dist":{"shasum":"20dfe0f90e8507aecf0a30e59650d5369ff6f64e","tarball":"https://registry.npmjs.org/@bolttech/atoms-tree-view/-/atoms-tree-view-0.2.0.tgz","fileCount":9,"integrity":"sha512-dAgd/U70JNe+4agJCjBcA7/5hoblcgza9ppUd6FbawHcSG46srICQtDdgjo6iVLni12YlsaGXMwKsUWS3s+85A==","signatures":[{"sig":"MEUCIQDiRJ8Wwuw3DavGRNhV5isPqH85Jjr7cKFkxhfR09JqNQIgJEJw/X+hcYNYiUUdKCVUybkuG0Prkb9cBNFhpuMp3Pc=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":117376},"main":"./index.cjs","type":"commonjs","types":"./src/index.d.ts","gitHead":"59fa2828d526a037454fc7d7b826eb6fb89c77cb","_npmUser":{"name":"lukaspiccinibt","email":"lukas.piccini@bolttech.io"},"_npmVersion":"10.7.0","description":"The **TreeView** component is a React component that provides a hierarchical structure for displaying nested items.","directories":{},"_nodeVersion":"18.20.3","dependencies":{"react":"18.2.0","styled-components":"6.1.1","@bolttech/ui-utils":"0.5.0","@bolttech/atoms-icon":"0.24.0","@bolttech/default-theme":"0.14.0","@bolttech/frontend-foundations":"0.10.0"},"_hasShrinkwrap":false,"peerDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/atoms-tree-view_0.2.0_1741000984690_0.4093305717396667","host":"s3://npm-registry-packages-npm-production"}},"0.4.0":{"name":"@bolttech/atoms-tree-view","version":"0.4.0","_id":"@bolttech/atoms-tree-view@0.4.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":"19fdefac92eb06bf7a068f4a63f26b135701b803","tarball":"https://registry.npmjs.org/@bolttech/atoms-tree-view/-/atoms-tree-view-0.4.0.tgz","fileCount":10,"integrity":"sha512-jv3BPNqteqDSA1kiVXDHCsxZTf9aimfSX8IqAoRM12DTyNTWl+BphWSdy/MyCQZ/SUfz0LZonHbiXUrO8OieXQ==","signatures":[{"sig":"MEUCIERqnMw1WSoQcRLiEsmGCoL8Ve1BowCnALomkS5jDUVfAiEAolf/o1UXzJaiz4uE7gKi/sg/BCK8LoT53ZL4M4YrK5Q=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":156581},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","gitHead":"812acb2ca4719a7ec24989f55c3561392b695908","_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@bolttech.io"},"_npmVersion":"10.9.4","description":"The **TreeView** component is a React component that provides a hierarchical structure for displaying nested items.","directories":{},"_nodeVersion":"22.22.0","dependencies":{"react":"19.1.2","styled-components":"6.1.1","@bolttech/ui-utils":"0.6.4","@bolttech/atoms-icon":"0.24.7","@bolttech/frontend-foundations":"0.12.1"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/atoms-tree-view_0.4.0_1775667870725_0.7548251740999941","host":"s3://npm-registry-packages-npm-production"}},"0.4.2":{"name":"@bolttech/atoms-tree-view","version":"0.4.2","dependencies":{"react":"19.1.2","styled-components":"6.1.1","@bolttech/frontend-foundations":"0.12.3","@bolttech/atoms-icon":"0.24.9","@bolttech/ui-utils":"0.6.7"},"main":"./index.cjs.js","type":"commonjs","types":"./index.d.ts","_id":"@bolttech/atoms-tree-view@0.4.2","gitHead":"2773bb949c639471545faa5bc6cde1ec3bfec28a","description":"The **TreeView** component is a React component that provides a hierarchical structure for displaying nested items.","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-ZpkOH9OHu/tLeG4CHVy8M8uHbEODZq+Hc5h3g028ReCJiEaT1a+xB6Kwn2Yf/3N2SSDiYRslOt8/cEhqrHdYVw==","shasum":"c63cf4ddf2d99ed2e37760eae68a8d8e739bf9fe","tarball":"https://registry.npmjs.org/@bolttech/atoms-tree-view/-/atoms-tree-view-0.4.2.tgz","fileCount":10,"unpackedSize":156968,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCKV4o/njwem8LNcrjqfYcnCUq9OlNJg7Y1YT32AmAkLgIhAK+O7nAqCgz0DtgbePlA1J4i7PoAeG9MIscO2MjBQWh4"}]},"_npmUser":{"name":"silas.silva.bolttech","email":"silas.silva@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/atoms-tree-view_0.4.2_1780930380043_0.778918158095621"},"_hasShrinkwrap":false}},"time":{"created":"2024-12-05T15:25:07.639Z","modified":"2026-06-08T14:53:00.499Z","0.1.0":"2024-12-05T15:25:07.936Z","0.1.1":"2024-12-16T20:03:41.387Z","0.1.2":"2025-01-06T16:15:34.934Z","0.2.0":"2025-03-03T11:23:04.916Z","0.4.0":"2026-04-08T17:04:30.894Z","0.4.2":"2026-06-08T14:53:00.227Z"},"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    <BolttechThemeProvider theme={bolttechTheme}>\n      <TreeView arrowPosition=\"right\" showLines={false} selected={selected}>\n        <TreeViewItem label=\"Item 1\" icon=\"star\">\n          <TreeViewItem onClick={setSelected}>\n            <p>Item 1.1</p>\n          </TreeViewItem>\n          <TreeViewItem onClick={setSelected}>\n            <p>Item 1.2</p>\n          </TreeViewItem>\n          <TreeViewItem label=\"Item 1.3\">\n            <TreeViewItem onClick={setSelected}>\n              <p>Item 1.3.1</p>\n            </TreeViewItem>\n            <TreeViewItem onClick={setSelected}>\n              <p>Item 1.3.2</p>\n            </TreeViewItem>\n            <TreeViewItem onClick={setSelected}>\n              <p>Item 1.3.3</p>\n            </TreeViewItem>\n          </TreeViewItem>\n        </TreeViewItem>\n        <TreeViewItem label=\"Item 2\">\n          <TreeViewItem onClick={setSelected}>\n            <p>Item 2.1</p>\n          </TreeViewItem>\n          <TreeViewItem label=\"Item 2.2\">\n            <TreeViewItem label=\"Item 2.2.1\">\n              <TreeViewItem onClick={setSelected}>\n                <p>Item 2.2.1.1</p>\n              </TreeViewItem>\n            </TreeViewItem>\n          </TreeViewItem>\n        </TreeViewItem>\n      </TreeView>\n    </BolttechThemeProvider>\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"}