Internal issue 3142 - Nested Category Selector - Multi-select component for hierarchical lists

h3. Summary 

A modal-based component for selecting multiple items from nested/grouped option lists with search filtering and visual selection tracking.
h3. 💬 Description

This component handles multi-select scenarios where options are organized into groups with search capability.

*Core functionality:*
- Modal interface with grouped checkboxes
- Search box that filters items and groups in real-time
- Selection counter per group (e.g., "3 of 7 selected")
- Displays selected items as dismissible chips
- Confirm/cancel pattern to prevent accidental changes

*How it works:*
# Button shows current selection count (e.g., "Select Categories (3 selected)")
# Clicking opens a modal with all options grouped
# User can search to filter, check/uncheck items
# Confirm saves changes, Cancel discards them
# Selected items appear as chips that can be individually removed

*Current implementation details:*
* Built with React and TypeScript
* Uses ICDS components: {{{}IcButton{}}}, {{{}IcCheckbox{}}}, {{{}IcChip{}}}, Modal wrapper
* Includes MUI components for search UI ({{{}TextField{}}}, {{{}IconButton{}}})
* Coupled to React Hook Form via {{useFormContext()}}
* Supports 2-level nesting (groups → items)
* Tested with ~80 items across 10 groups

h3. 💰 User value

*For end-users:*
* Makes long option lists (20-100+ items) manageable through grouping and search
* Clear visual feedback via group counters and chips
* Prevents accidental changes with confirm/cancel workflow
* Accessible with ARIA labels, keyboard navigation, and screen reader support

*For developers:*
* Saves development time for a common complex pattern
* Handles edge cases (empty search, visual feedback, state management)
* Provides consistent pattern for hierarchical selection across applications

*For designers:*
* Establishes a consistent approach to grouped multi-select scenarios
* Solves the challenge of displaying many options without overwhelming users

h3. 📚 User Stories

*Story 1: Form with many grouped options*
_As an_ ICDS developer building a form with 50+ options organized into groups
_I need_ a component that presents these in a searchable, grouped interface
_So that_ I don't have to build custom modal and filtering logic myself

*Story 2: Quick option discovery*
_As an_ end-user filling out a form with many categories
_I need_ to search through options by keyword
_So that_ I can find what I need without scrolling through everything

*Story 3: Clear selection visibility*
_As an_ end-user
_I need_ to see my selected items displayed as chips
_So that_ I can verify my choices and remove mistakes easily

*Story 4: Safe exploration*
_As an_ end-user exploring different options
_I need_ a way to cancel my changes
_So that_ I don't accidentally modify my form data
h3. 📝 Acceptance Criteria

*AC1: Modal displays current state*
_Given_ a user has previously selected 3 items
_When_ they click the button
_Then_ the modal opens with those 3 items checked and button shows "(3 selected)"

*AC2: Search filters content*
_Given_ the modal is open
_When_ a user types in the search box
_Then_ only matching groups/items are displayed with a results counter (e.g., "12 results found")

*AC3: Selection tracking per group*
_Given_ a group with 7 items
_When_ a user checks 3 of them
_Then_ the group header shows "3 of 7 selected"

*AC4: Confirm commits changes*
_Given_ a user has checked 5 items in the modal
_When_ they click "Confirm (5 selected)"
_Then_ the modal closes, button updates to "(5 selected)", and 5 chips appear

*AC5: Cancel discards changes*
_Given_ a user had 3 items selected, opens modal, and checks 2 more
_When_ they click "Cancel"
_Then_ the modal closes and only the original 3 items remain selected

*AC6: Chips are dismissible*
_Given_ 4 items are selected and displayed as chips
_When_ a user clicks the dismiss icon on a chip
_Then_ that chip is removed and selection count updates to "(3 selected)"

*AC7: Empty search shows message*
_Given_ the modal is open
_When_ search returns no results
_Then_ "No results found" message displays

*AC8: Search clears properly*
_Given_ a user has typed in the search box showing filtered results
_When_ they click the clear button (X icon)
_Then_ the search clears and all groups/items become visible

*AC9: Keyboard navigation*
_Given_ a keyboard user
_When_ they tab through the modal
_Then_ they can reach search field, checkboxes, Cancel, and Confirm buttons in logical order
h3. ✏ Designs

Figma design was made using all ICDC components before issues during development meant some MUI components were used - currently design is accessible within the organisation.

### 🧾 Guidance
If there's written guidance or documentation, include a link to it here.
h3. 🚨 Urgency (low, medium or high)

If applicable, tell us how urgent it is that this issue gets resolved, based on the impact it has on your team's work or project timeline.
h3. Additional info

*Technical considerations:*
* Built in React - would need StencilJS rewrite for ICDS
* Coupled to React Hook Form - needs refactoring for standalone use
* Uses MUI for search UI - could be replaced with pure ICDS components
* Supports 2-level nesting only (not deeply nested hierarchies)
* No unit tests currently
* Performance tested up to ~80 items; may need optimization for larger datasets

*What would be needed for ICDS integration:*
* Remove React Hook Form dependency
* Replace MUI components with ICDS equivalents
* Add comprehensive test coverage
* Accessibility audit against WCAG 2.1 AA
* Documentation and Storybook examples

h3. Questions
# Is this pattern useful for ICDS? Does something similar already exist?
# Would you accept a React implementation, or is StencilJS required?
# Should this be a full component or pattern guidance?
# What are the minimum requirements for contribution acceptance?
# Is there interest in collaborating to refine this?

Start by comparing the proposed React/TypeScript component with existing ICDS components and the repository's StencilJS conventions; the issue names no files or entry point. Clarify whether the contribution should be a StencilJS component, a React implementation, or pattern guidance, then define tests, Storybook coverage, accessibility checks, and standalone state handling as the completion target.

Written by the indexing model from the issue text.