refactor: remove unnecessary className passing to tv and make naming consistent

[wingkwong]

Closes #

📝 Description

When you pass className to tv, it is passing to base slot. Currently there are 3 types of patterns in our codebase.

1. passing className to tv because there is no classNames (i.e. no slots). e.g. accordion

  const classNames = useMemo(
    () =>
      accordion({
        variant,
        className,
      }),
    [variant, className],
  );

// getBaseProps
className: classNames,

2. merge className with classNames.base for those have slots. e.g calendar

const baseStyles = clsx(classNames?.base, className);
className: slots.base({class: baseStyles}),

3. combined 1 & 2 which is not necessary (i.e. pass className to tv and merge it with classNames.base). e.g. breadcrumb.

This PR does two things

• to refactor the 3rd case
• to keep the naming consistent across all components

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

• Performance Optimization

  • Removed className from various component memoization hooks to reduce unnecessary recalculations
  • Simplified dependency management for component slots and styles

• Styling Updates

  • Renamed classNames to styles in multiple components
  • Updated style generation and property handling in several components

• Deprecation Notice

  • Marked disableClearable prop for removal in a future minor release

The changes appear to be part of a systematic refactoring to optimize component performance and standardize styling approaches across the component library.

[changeset-bot]

⚠️ No Changeset found

Latest commit: d58b374

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nextui-docs-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 14, 2025 5:54am
nextui-storybook-v2	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 14, 2025 5:54am

[coderabbitai]

Walkthrough

The pull request introduces a series of modifications across multiple component hooks in the packages/components directory. The primary change involves removing className from the dependency arrays of useMemo hooks in various components like autocomplete, breadcrumbs, date input, dropdown, and others. This optimization potentially reduces unnecessary recalculations of component slots and styles. Additionally, some components saw variable renaming from classNames to styles and minor adjustments to styling and prop handling.

Changes

File	Change Summary
packages/components/*/src/use-*.ts	Removed className from useMemo hook dependency arrays
packages/components/button/src/button.tsx	Removed styles property from destructured props
packages/components/button/src/use-button.ts	Added className property to getButtonProps return object
Multiple files	Renamed classNames variable to styles

Suggested Labels

📋 Scope : Docs

Suggested Reviewers

• jrgarciadev

Possibly Related PRs

• fix(date-picker): update calendar classNames in useDateRangePicker #3258: Similar className dependency removal in useDateRangePicker
• feat(select): virtualization #4203: Select component optimization with className dependency removal
• feat(listbox): virtualization #4206: Listbox component dependency array adjustment

Finishing Touches

• 📝 Generate Docstrings (Beta)

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 1

🔭 Outside diff range comments (1)

packages/components/dropdown/src/use-dropdown.ts (1)

Line range hint 127-132: Keep naming consistent with other components.

The variable name styles introduces inconsistency with other components that use classNames. Consider keeping the naming convention consistent across the codebase.

-  const styles = useMemo(
+  const slots = useMemo(
     () =>
       dropdown({
         className,
       }),
     [className],
   );

🧹 Nitpick comments (1)

packages/components/select/src/use-select.ts (1)

Line range hint 248-248: Overall changes look good and align with PR objectives

The changes consistently remove className from the dependency arrays of useMemo hooks across all components. This is a valid optimization as:

1. className is only used for base styling
2. It doesn't affect the slot variants computation
3. Reduces unnecessary recalculations of the slots object

The changes improve performance while maintaining the correct functionality.

Also applies to: 282-282, 389-389, 385-385

📜 Review details

Configuration used: .coderabbit.yaml
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 26fc514 and d58b374.

📒 Files selected for processing (14)

• packages/components/autocomplete/src/use-autocomplete.ts (1 hunks)
• packages/components/breadcrumbs/src/use-breadcrumbs.ts (1 hunks)
• packages/components/button/src/button.tsx (1 hunks)
• packages/components/button/src/use-button.ts (2 hunks)
• packages/components/code/src/use-code.ts (2 hunks)
• packages/components/date-input/src/use-date-input.ts (1 hunks)
• packages/components/date-input/src/use-time-input.ts (1 hunks)
• packages/components/date-picker/src/use-date-range-picker.ts (1 hunks)
• packages/components/dropdown/src/use-dropdown.ts (2 hunks)
• packages/components/link/src/use-link.ts (2 hunks)
• packages/components/listbox/src/use-listbox.ts (1 hunks)
• packages/components/select/src/use-select.ts (1 hunks)
• packages/components/slider/src/use-slider.ts (1 hunks)
• packages/components/tabs/src/use-tabs.ts (1 hunks)

✅ Files skipped from review due to trivial changes (2)

• packages/components/code/src/use-code.ts
• packages/components/link/src/use-link.ts

🔇 Additional comments (11)

packages/components/button/src/button.tsx (1)

27-27: LGTM! Clean className handling.

The change correctly removes redundant className passing and relies on getButtonProps for style management.

packages/components/listbox/src/use-listbox.ts (1)

134-134: Verify empty dependency array impact.

While removing className from tv call is correct, ensure that the empty dependency array won't prevent necessary slot updates if variant props change.

✅ Verification successful

Empty dependency array is correct and safe

The listbox component's slots are static and don't depend on any variant props. All variant-dependent styles are handled by the listboxItem component separately.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Check if listbox has variant-dependent styles
ast-grep --pattern 'export const listbox = tv({
  $$$
  variants: {
    $$$
  }
  $$$
})'

Length of output: 91

---

Script:

#!/bin/bash
# Find files that might contain listbox definition
fd -t f listbox

# Search for listbox definition with tv
rg "const listbox.*=.*tv\(" -A 10

Length of output: 1049

---

Script:

#!/bin/bash
# Check theme file content
cat packages/core/theme/src/components/listbox.ts

# Broader search for tv with variants
rg "tv\({[^}]*variants:" -A 20 packages/core/theme/src/components/listbox.ts

Length of output: 1970

---

Script:

#!/bin/bash
# Check menu component implementation
cat packages/core/theme/src/components/menu.ts

# Search for tv definitions in menu
rg "export const menu = tv" -A 20 packages/core/theme/src/components/menu.ts

Length of output: 15101

packages/components/breadcrumbs/src/use-breadcrumbs.ts (1)

154-154: LGTM! Proper dependency handling.

The change correctly uses objectToDeps for tracking variant prop changes while removing unnecessary className dependency.

packages/components/tabs/src/use-tabs.ts (1)

130-130: Optimization: Removed unnecessary className dependency

The removal of className from the dependency array is correct as the slots don't need to be recalculated when only the className changes. The className is properly merged in the prop getters using clsx.

packages/components/button/src/use-button.ts (1)

179-179: LGTM: Consistent style handling

The addition of styles to both the props and dependency array ensures proper style application and updates. This change aligns with the PR's goal of making naming more consistent.

Also applies to: 193-193

packages/components/date-input/src/use-time-input.ts (1)

156-156: LGTM: Optimized slots memoization

Removing className from the dependency array is correct as the slots don't need to be recalculated when only the className changes. The className is still properly handled in the prop getters.

packages/components/date-input/src/use-date-input.ts (1)

214-214: LGTM: Consistent with time input changes

The removal of className from the dependency array matches the changes in the time input component, maintaining consistency across date-related components while optimizing the slots memoization.

packages/components/slider/src/use-slider.ts (1)

248-248: Optimization approved: Removed unnecessary className dependency

The removal of className from the dependency array is correct as it's only used for base styling and doesn't affect the slot variants computation.

packages/components/date-picker/src/use-date-range-picker.ts (1)

282-282: Optimization approved: Removed unnecessary className dependency

The removal of className from the dependency array is correct as it's only used for styling and doesn't affect the slot variants computation.

packages/components/autocomplete/src/use-autocomplete.ts (1)

389-389: Optimization approved: Removed unnecessary className dependency

The removal of className from the dependency array is correct as it's only used for base styling and doesn't affect the slot variants computation.

packages/components/select/src/use-select.ts (1)

385-385: Optimization approved: Removed unnecessary className dependency

The removal of className from the dependency array is correct as it's only used for base styling and doesn't affect the slot variants computation.