{"_id":"@abpjs/components","_rev":"3-dd96a112380f4c1bf40e0f4128d06653","name":"@abpjs/components","dist-tags":{"latest":"4.0.0"},"versions":{"3.1.0":{"name":"@abpjs/components","version":"3.1.0","keywords":["abp","react","framework","components","tree"],"author":{"name":"tekthar.com"},"license":"LGPL-3.0","_id":"@abpjs/components@3.1.0","maintainers":[{"name":"aitani","email":"aitani@tekthar.com"}],"homepage":"https://docs.abpjs.io/docs/packages/components/overview","bugs":{"url":"https://github.com/abpjs/abp-react/issues"},"dist":{"shasum":"7a297e0957907cc02bcdb1c626199d8c05e3c9b3","tarball":"https://registry.npmjs.org/@abpjs/components/-/components-3.1.0.tgz","fileCount":12,"integrity":"sha512-QtIPGir1tCGnDPudQaKl5NUE5cm/RhM9/YWw68+yY3RonTbAorkiu+FGP9fO7Kn9OpAuQlCBFHGRAFJTKr/8Ig==","signatures":[{"sig":"MEYCIQDMMoD/Se1joX/d8EyzhPM2R2Ab83brFk18BEWEMvNMPQIhAM31Gy0TpfJEl6YfKOwNj0yfdp2U0/dNIufrv5blqvrx","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":80650},"main":"dist/index.js","_from":"file:abpjs-components-3.1.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./tree":{"types":"./dist/tree/index.d.ts","import":"./dist/tree/index.mjs","require":"./dist/tree/index.js"}},"scripts":{"dev":"tsup --watch","lint":"eslint src","test":"vitest run","build":"tsup","format":"prettier --write \"src/**/*.{ts,tsx,json,md}\"","lint:fix":"eslint src --fix","test:watch":"vitest","type-check":"tsc --noEmit","format:check":"prettier --check \"src/**/*.{ts,tsx,json,md}\""},"_npmUser":{"name":"aitani","email":"aitani@tekthar.com"},"_resolved":"C:\\Users\\DELL\\AppData\\Local\\Temp\\5c15d47bd349f11e9f8297aadf5226e0\\abpjs-components-3.1.0.tgz","_integrity":"sha512-QtIPGir1tCGnDPudQaKl5NUE5cm/RhM9/YWw68+yY3RonTbAorkiu+FGP9fO7Kn9OpAuQlCBFHGRAFJTKr/8Ig==","repository":{"url":"git+https://github.com/abpjs/abp-react.git","type":"git","directory":"packages/components"},"_npmVersion":"10.9.2","description":"ABP Framework shared components for React - translated from @abp/ng.components","directories":{},"_nodeVersion":"22.17.0","dependencies":{"@abpjs/core":"3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^24.0.0","react":"^18.2.0","eslint":"^8.0.0","vitest":"^1.0.0","prettier":"^3.7.4","react-dom":"^18.2.0","typescript":"^5.0.0","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@abp/ng.components":"3.1.0","@vitest/coverage-v8":"^1.0.0","eslint-plugin-react":"^7.0.0","@testing-library/react":"^14.0.0","eslint-config-prettier":"^9.1.2","@testing-library/jest-dom":"^6.9.1","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.0.0","@testing-library/user-event":"^14.6.1","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0"},"_npmOperationalInternal":{"tmp":"tmp/components_3.1.0_1770430471802_0.9987365315657442","host":"s3://npm-registry-packages-npm-production"}},"3.2.0":{"name":"@abpjs/components","version":"3.2.0","keywords":["abp","react","framework","components","tree"],"author":{"name":"tekthar.com"},"license":"LGPL-3.0","_id":"@abpjs/components@3.2.0","maintainers":[{"name":"aitani","email":"aitani@tekthar.com"}],"homepage":"https://docs.abpjs.io/docs/packages/components/overview","bugs":{"url":"https://github.com/abpjs/abp-react/issues"},"dist":{"shasum":"4fcd18a5b4a4ff07b4579132e92cccbfa57b6842","tarball":"https://registry.npmjs.org/@abpjs/components/-/components-3.2.0.tgz","fileCount":12,"integrity":"sha512-0qXX4UfskqLM/g3iES0U+YqYmbU3+7WpobRUr/wAgeeqaJ/pz+lX9QIdcfSmLfVbZ4aZ+BvVjaGGUeUadZU6bg==","signatures":[{"sig":"MEYCIQC3Ejc4QX3rjdOzvcDWRCK09pllgGvae9cQcKs1iL/iQAIhAIv3UsIsUjUPVPXwaNfSon0F7b+hlFMRL0fkvtlLr0Zv","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":92490},"main":"dist/index.js","_from":"file:abpjs-components-3.2.0.tgz","types":"dist/index.d.ts","module":"dist/index.mjs","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./tree":{"types":"./dist/tree/index.d.ts","import":"./dist/tree/index.mjs","require":"./dist/tree/index.js"}},"scripts":{"dev":"tsup --watch","lint":"eslint src","test":"vitest run","build":"tsup","format":"prettier --write \"src/**/*.{ts,tsx,json,md}\"","lint:fix":"eslint src --fix","test:watch":"vitest","type-check":"tsc --noEmit","format:check":"prettier --check \"src/**/*.{ts,tsx,json,md}\""},"_npmUser":{"name":"aitani","email":"aitani@tekthar.com"},"_resolved":"C:\\Users\\DELL\\AppData\\Local\\Temp\\1604ec9f489089f53da114038741377a\\abpjs-components-3.2.0.tgz","_integrity":"sha512-0qXX4UfskqLM/g3iES0U+YqYmbU3+7WpobRUr/wAgeeqaJ/pz+lX9QIdcfSmLfVbZ4aZ+BvVjaGGUeUadZU6bg==","repository":{"url":"git+https://github.com/abpjs/abp-react.git","type":"git","directory":"packages/components"},"_npmVersion":"10.9.2","description":"ABP Framework shared components for React - translated from @abp/ng.components","directories":{},"_nodeVersion":"22.17.0","dependencies":{"@abpjs/core":"3.2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"tsup":"^8.0.0","jsdom":"^24.0.0","react":"^18.2.0","eslint":"^8.0.0","vitest":"^1.0.0","prettier":"^3.7.4","react-dom":"^18.2.0","typescript":"^5.0.0","react-icons":"^5.5.0","@types/react":"^18.2.0","@chakra-ui/react":"^3.2.0","@types/react-dom":"^18.2.0","@abp/ng.components":"3.2.0","@abpjs/theme-shared":"3.2.0","@vitest/coverage-v8":"^1.0.0","eslint-plugin-react":"^7.0.0","@testing-library/react":"^14.0.0","eslint-config-prettier":"^9.1.2","@testing-library/jest-dom":"^6.9.1","@typescript-eslint/parser":"^6.0.0","eslint-plugin-react-hooks":"^4.0.0","@testing-library/user-event":"^14.6.1","@typescript-eslint/eslint-plugin":"^6.0.0"},"peerDependencies":{"react":">=17.0.0","react-dom":">=17.0.0","react-icons":">=5.0.0","@chakra-ui/react":"^3.2.0","@abpjs/theme-shared":"3.2.0"},"peerDependenciesMeta":{"react-icons":{"optional":true}},"_npmOperationalInternal":{"tmp":"tmp/components_3.2.0_1770464557926_0.5741073479933851","host":"s3://npm-registry-packages-npm-production"}},"4.0.0":{"name":"@abpjs/components","version":"4.0.0","description":"ABP Framework shared components for React - translated from @abp/ng.components","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","import":"./dist/index.mjs","require":"./dist/index.js"},"./tree":{"types":"./dist/tree/index.d.ts","import":"./dist/tree/index.mjs","require":"./dist/tree/index.js"}},"keywords":["abp","react","framework","components","tree"],"dependencies":{"@abpjs/core":"4.0.0"},"peerDependencies":{"@chakra-ui/react":"^3.2.0","react":">=17.0.0","react-dom":">=17.0.0","react-icons":">=5.0.0","@abpjs/theme-shared":"4.0.0"},"devDependencies":{"@abp/ng.components":"4.0.0","@chakra-ui/react":"^3.2.0","@testing-library/jest-dom":"^6.9.1","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.6.1","@types/react":"^18.2.0","@types/react-dom":"^18.2.0","@typescript-eslint/eslint-plugin":"^6.0.0","@typescript-eslint/parser":"^6.0.0","eslint":"^8.0.0","eslint-config-prettier":"^9.1.2","eslint-plugin-react":"^7.0.0","eslint-plugin-react-hooks":"^4.0.0","jsdom":"^24.0.0","prettier":"^3.7.4","react":"^18.2.0","react-icons":"^5.5.0","react-dom":"^18.2.0","tsup":"^8.0.0","typescript":"^5.0.0","vitest":"^1.0.0","@vitest/coverage-v8":"^1.0.0","@abpjs/theme-shared":"4.0.0"},"author":{"name":"tekthar.com"},"license":"LGPL-3.0","publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/abpjs/abp-react.git","directory":"packages/components"},"homepage":"https://docs.abpjs.io/docs/packages/components/overview","bugs":{"url":"https://github.com/abpjs/abp-react/issues"},"peerDependenciesMeta":{"react-icons":{"optional":true}},"scripts":{"build":"tsup","dev":"tsup --watch","lint":"eslint src","lint:fix":"eslint src --fix","format":"prettier --write \"src/**/*.{ts,tsx,json,md}\"","format:check":"prettier --check \"src/**/*.{ts,tsx,json,md}\"","type-check":"tsc --noEmit","test":"vitest run","test:watch":"vitest"},"_id":"@abpjs/components@4.0.0","_integrity":"sha512-vKOXHlAZr0wcSI9w1VHMXNSYK4DQpgdZhOTU1ZRyClyo4ZUJuAX911XQ78uzKlgUjPTQI6ZFw0lUWdp0vHs2GQ==","_resolved":"C:\\Users\\DELL\\AppData\\Local\\Temp\\0062a9c4a87e84b57a9e33fece6c2ae3\\abpjs-components-4.0.0.tgz","_from":"file:abpjs-components-4.0.0.tgz","_nodeVersion":"22.17.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-vKOXHlAZr0wcSI9w1VHMXNSYK4DQpgdZhOTU1ZRyClyo4ZUJuAX911XQ78uzKlgUjPTQI6ZFw0lUWdp0vHs2GQ==","shasum":"1e9727397e4f1610724f0af9be017483fe1b1a19","tarball":"https://registry.npmjs.org/@abpjs/components/-/components-4.0.0.tgz","fileCount":12,"unpackedSize":92490,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIGsKoowWyJPlEcyGg/CDNbOYla+PxE8BoPM5tz4yejo1AiEAk00fLSVQe9EXKVK9jsQcGhY0WH9+cttiwdvqrXfeakQ="}]},"_npmUser":{"name":"aitani","email":"aitani@tekthar.com"},"directories":{},"maintainers":[{"name":"aitani","email":"aitani@tekthar.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/components_4.0.0_1770567988321_0.4297590538971279"},"_hasShrinkwrap":false}},"time":{"created":"2026-02-07T02:14:31.743Z","modified":"2026-02-08T16:26:28.621Z","3.1.0":"2026-02-07T02:14:32.006Z","3.2.0":"2026-02-07T11:42:38.077Z","4.0.0":"2026-02-08T16:26:28.479Z"},"bugs":{"url":"https://github.com/abpjs/abp-react/issues"},"author":{"name":"tekthar.com"},"license":"LGPL-3.0","homepage":"https://docs.abpjs.io/docs/packages/components/overview","keywords":["abp","react","framework","components","tree"],"repository":{"type":"git","url":"git+https://github.com/abpjs/abp-react.git","directory":"packages/components"},"description":"ABP Framework shared components for React - translated from @abp/ng.components","maintainers":[{"name":"aitani","email":"aitani@tekthar.com"}],"readme":"# @abpjs/components\r\n\r\nABP Framework shared components for React - translated from `@abp/ng.components`.\r\n\r\n## Installation\r\n\r\n```bash\r\nnpm install @abpjs/components\r\n# or\r\npnpm add @abpjs/components\r\n```\r\n\r\n## Tree Component\r\n\r\nThe Tree component provides a hierarchical tree view with support for:\r\n\r\n- Expandable/collapsible nodes\r\n- Checkable nodes\r\n- Drag and drop\r\n- Custom node templates\r\n- Context menus\r\n\r\n### Usage\r\n\r\n```tsx\r\nimport { Tree, TreeAdapter, BaseNode } from '@abpjs/components/tree';\r\n\r\ninterface MyNode extends BaseNode {\r\n  id: string;\r\n  parentId: string | null;\r\n  name: string;\r\n}\r\n\r\nconst data: MyNode[] = [\r\n  { id: '1', parentId: null, name: 'Root' },\r\n  { id: '2', parentId: '1', name: 'Child 1' },\r\n  { id: '3', parentId: '1', name: 'Child 2' },\r\n];\r\n\r\nfunction MyTreeComponent() {\r\n  const adapter = new TreeAdapter(data);\r\n\r\n  return (\r\n    <Tree\r\n      nodes={adapter.getTree()}\r\n      expandedKeys={['1']}\r\n      onExpandedKeysChange={(keys) => console.log('Expanded:', keys)}\r\n      onSelectedNodeChange={(node) => console.log('Selected:', node)}\r\n    />\r\n  );\r\n}\r\n```\r\n\r\n### TreeAdapter\r\n\r\nThe `TreeAdapter` class converts a flat list of nodes into a hierarchical tree structure:\r\n\r\n```tsx\r\nimport { TreeAdapter, BaseNode } from '@abpjs/components/tree';\r\n\r\ninterface OrgUnit extends BaseNode {\r\n  id: string;\r\n  parentId: string | null;\r\n  displayName: string;\r\n}\r\n\r\nconst flatList: OrgUnit[] = [\r\n  { id: '1', parentId: null, displayName: 'Company' },\r\n  { id: '2', parentId: '1', displayName: 'Engineering' },\r\n  { id: '3', parentId: '1', displayName: 'Marketing' },\r\n];\r\n\r\nconst adapter = new TreeAdapter(flatList);\r\n\r\n// Get the tree structure\r\nconst tree = adapter.getTree();\r\n\r\n// Get the flat list\r\nconst list = adapter.getList();\r\n\r\n// Handle drag and drop\r\nadapter.handleDrop(node);\r\n\r\n// Handle node removal\r\nadapter.handleRemove(node);\r\n```\r\n\r\n## API Reference\r\n\r\n### Tree Props\r\n\r\n| Prop | Type | Default | Description |\r\n|------|------|---------|-------------|\r\n| `nodes` | `TreeNode[]` | `[]` | The tree data |\r\n| `checkedKeys` | `string[]` | `[]` | Keys of checked nodes |\r\n| `expandedKeys` | `string[]` | `[]` | Keys of expanded nodes |\r\n| `selectedNode` | `any` | - | The currently selected node |\r\n| `checkable` | `boolean` | `false` | Whether nodes have checkboxes |\r\n| `draggable` | `boolean` | `false` | Whether nodes are draggable |\r\n| `checkStrictly` | `boolean` | `false` | Check strictly (parent and children not associated) |\r\n| `isNodeSelected` | `(node) => boolean` | - | Custom function to determine if node is selected |\r\n| `beforeDrop` | `(event) => boolean \\| Promise<boolean>` | - | Called before drop to allow/prevent |\r\n| `menu` | `ReactNode` | - | Context menu template |\r\n| `onCheckedKeysChange` | `(keys: string[]) => void` | - | Called when checked keys change |\r\n| `onExpandedKeysChange` | `(keys: string[]) => void` | - | Called when expanded keys change |\r\n| `onSelectedNodeChange` | `(node: any) => void` | - | Called when selected node changes |\r\n| `onDrop` | `(event: DropEvent) => void` | - | Called when a node is dropped |\r\n\r\n### BaseNode Interface\r\n\r\n```typescript\r\ninterface BaseNode {\r\n  id: string;\r\n  parentId: string | null;\r\n  name?: string;\r\n  displayName?: string;\r\n}\r\n```\r\n\r\n### TreeNode Interface\r\n\r\n```typescript\r\ninterface TreeNode<T extends BaseNode = BaseNode> extends BaseNode {\r\n  entity: T;\r\n  key: string;\r\n  title: string;\r\n  icon: string | null;\r\n  children: TreeNode<T>[];\r\n  isLeaf: boolean;\r\n  checked: boolean;\r\n  selected: boolean;\r\n  expanded: boolean;\r\n  selectable: boolean;\r\n  disabled: boolean;\r\n  disableCheckbox: boolean;\r\n}\r\n```\r\n\r\n## License\r\n\r\nLGPL-3.0\r\n","readmeFilename":"README.md"}