We've just shipped Chakra UI v3.22! This release introduces the Tree View component, along with quality improvements to make building with Chakra even smoother.
Tree View
The Tree View component is a versatile component that allows users to display hierarchical data in a tree structure.
Basic Usage
The basic tree view provides a tree structure with nested items.
Tree
node_modules
zag-js
panda
@types
react
react-dom
src
app.tsx
index.ts
panda.config.ts
package.json
renovate.json
README.md
Async Loading
Lazy loading is a feature that allows the tree view to load children of a node on demand (or async). This helps to improve the initial load time and memory usage.
Tree
node_modules
src
panda.config.ts
package.json
renovate.json
README.md
Other Improvements
Clipboard
- Fix issue where
clipboardAnatomywas not exported from@chakra-ui/react/anatomy
Combobox
- Expose
reasontoonOpenChangeandonInputValueChangecallbacks - Expose
api.clearHighlightedValuefunction to clear highlighted value
Toast
- Fix issue where toast
titleordescriptioncould not accept React element
Select
- Select highlighted item only if it exists in the collection
- Expose
api.clearHighlightedValuefunction to clear highlighted value
Upgrading
To upgrade to the latest version, run:
npm install @chakra-ui/react@latest