feat: create useTagGroup hook #1665
Conversation
silviuaavram
force-pushed
the
feat/use-tag-list
branch
from
082ad56 to
7e0e332
Compare
silviuaavram
force-pushed
the
feat/use-tag-list
branch
from
8849f1e to
7841392
Compare
There was a problem hiding this comment.
Pull request overview
This pull request introduces a new useTagGroup hook to the Downshift library for building accessible tag group components. The PR includes comprehensive implementation, TypeScript type definitions, testing, documentation, and a major refactoring to convert several utility functions from JavaScript to TypeScript.
Changes:
- Created new
useTagGrouphook with full implementation, types, tests, and documentation - Refactored utility functions from JavaScript to TypeScript in
src/utils-ts/ - Updated TypeScript configuration to emit declaration files
- Added Cypress end-to-end tests and Docusaurus example pages for the new hook
Reviewed changes
Copilot reviewed 118 out of 123 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/hooks/useTagGroup/index.ts | Main hook implementation providing tag group functionality |
| src/hooks/useTagGroup/index.types.ts | TypeScript type definitions for the hook API |
| src/hooks/useTagGroup/reducer.ts | State reducer handling tag group actions |
| src/utils-ts/* | Refactored utility functions from JS to TS |
| typings/index.d.ts | Updated type declarations to export useTagGroup types |
| src/hooks/useTagGroup/tests/* | Comprehensive test suite for the new hook |
| docusaurus/pages/useTagGroup.tsx | Documentation example page |
| cypress/e2e/useTagGroup.cy.js | End-to-end tests |
| tsconfig.json | Updated to emit TypeScript declarations |
| src/hooks/useTagGroup/README.md | Detailed documentation for the hook |
Comments suppressed due to low confidence (1)
docusaurus/utils.ts:38
- Corrected typo in variable name from 'tagGroupSyles' to 'tagGroupStyles'. Note: This change should be propagated to all usage sites in docusaurus/pages/useMultipleSelect.js and docusaurus/pages/useMultipleCombobox.js.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| @@ -0,0 +1,771 @@ | |||
| # useSelect | |||
There was a problem hiding this comment.
Corrected heading from 'useSelect' to 'useTagGroup' to match the hook being documented.
|
|
||
| previousActiveIndexRef.current = activeIndex | ||
| previousItemsLengthRef.current = items.length | ||
| }, [activeIndex, elementIds, items]) |
There was a problem hiding this comment.
The useEffect dependency array includes the entire items array, which will trigger the effect whenever the items reference changes. This might cause unnecessary re-renders. Consider using items.length in the dependency array instead since the effect only checks the length, or memoize the effect logic.
What:
Why:
How:
Checklist: