fix(frontend): remove @material-ui/core dependency from AccordionCard

[nielskaspers]

Summary

Removes @material-ui/core and material-ui-chip-input dependencies by replacing all MUI components with lightweight alternatives.

Issue

Fixes #7021

Changes

• Replaced MUI Collapse with a new CSS transition-based Collapse component
• Replaced MUI IconButton with Flagsmith's own Button component
• Rewrote ChipInput without material-ui-chip-input using native React
• Replaced MUI Chip in ChipInput with native <span> elements
• Replaced MUI SelectProps type in SegmentSelect with inline types
• Removed @material-ui/core and material-ui-chip-input from dependencies and overrides
• Regenerated package-lock.json

Testing

• Verify AccordionCard expand/collapse animation works smoothly
• Verify ChipInput in Create User modal accepts comma/space-separated values
• Check no visual regressions in feature edit modals
• Verify @material-ui/core and material-ui-chip-input are no longer in dependencies

[claude]

⚠️ Code review skipped — your organization's overage spend limit has been reached.

Code review is billed via overage credits. To resume reviews, an organization admin can raise the monthly limit in Settings → Usage.

Once credits are available, reopen this pull request to trigger a review.

[vercel]

@nielskaspers is attempting to deploy a commit to the Flagsmith Team on Vercel.

A member of the Team first needs to authorize it.

[cursor]

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[cursor]

Collapse race condition from uncancelled requestAnimationFrame callbacks

Medium Severity

The else branch (collapsing) schedules nested requestAnimationFrame callbacks that call setHeight(0), but no cleanup function is returned from this branch. If open toggles back to true before those callbacks fire, the stale setHeight(0) will execute during the expand phase, snapping the content to zero height mid-animation. The if branch correctly returns a cleanup to clear its timer, but the else branch's requestAnimationFrame handles are never cancelled via cancelAnimationFrame.

 

[cursor]

Delete click bubbles up triggering chip click handler

Medium Severity

The MUI Chip component internally called event.stopPropagation() on the delete icon click, preventing the chip's onClick from also firing. The replacement <span> structure nests the delete handler (onClick={handleDelete}) inside the chip's onClick={handleClick}, so clicking delete now triggers both handlers due to event bubbling. This is a behavioral regression from the MUI Chip replacement.

 

[cursor]

You have used all of your free Bugbot PR reviews.

To receive reviews on all of your PRs, visit the Cursor dashboard to activate Pro and start your 14-day free trial.

[talissoncosta]

Thanks for the contribution! Removing @material-ui/core is definitely something we want to do — it's been deprecated since 2021 and we only use it in a handful of places.

However, after smoke testing the branch, we found that the ChipInput rewrite has visual regressions — the chips and input aren't laid out correctly. The root cause is that the existing SCSS is tightly coupled to MUI's generated class names (.MuiChip-root, .MuiFormControl-root, .WAMuiChipInput-*), so replacing the components also requires rewriting the styles.

We're currently working on introducing semantic colour tokens and Storybook to the codebase. We're going to close this for now and revisit #7021 once that groundwork is in place, so we can:

1. Replace the hardcoded colour variables in the MUI overrides with semantic tokens
2. Visually validate the replacements in Storybook before merging

Appreciate the effort — the overall approach is sound, it's just a matter of timing. We'll reference your work when we pick this back up.