fix(filterChip): fix for breaking date type filterchip, width wrapping, and text value date

[Shreyag02]

Fixes the date-type FilterChip and makes its value fields hug their content. After PR #819 made DatePicker.value strictly Date | undefined and added a controlled-sync effect keyed on valueProp?.getTime(), the date filter chip crashed: FilterChip seeds its value state with '' and forwarded that string to the picker, so ''.getTime() threw TypeError: valueProp?.getTime is not a function (caught by the ErrorBoundary, regenerating the tree).

Changes:

• Fix the crash — the date field coerces non-Date values to undefined (value={filterValue instanceof Date ? filterValue : undefined}), so an unset/string-valued chip starts on the "Select date" placeholder instead of throwing.
• Migrate to slotProps.input — off the inputProps API fix(calendar): typing, controlled-value, slotProps API, tz-aware day keys #819 deprecated.
• Add a dateFormat prop (default 'DD MMM YYYY'), forwarded to the DatePicker, so the capture-date filter reads "27 May 2026" instead of "27/05/2026".
• Content-fit width — text/number and date inputs use field-sizing: content with width: auto plus guardrails (min-width: var(--rs-space-10), max-width: 200px), so the chip hugs its value like the "All Bands" select chip; falls back to a bounded intrinsic width where field-sizing is unsupported.
• Docs — new "Calendar, DatePicker & RangePicker" and "FilterChip" sections in V1-migration.md, a CHANGELOG entry under 0.49.0, the dateFormat prop documented in the FilterChip props doc, and the showcase/playground demos migrated off the deprecated picker props to slotProps.

Behavior note: existing date FilterChips now display month-as-text by default; this is overridable per-chip via the new dateFormat prop.

Type of Change

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Refactor (no functional changes, no bug fixes just code improvements)
• Chore (changes to the build process or auxiliary tools and libraries such as documentation generation)
• Style (changes that do not affect the meaning of the code (white-space, formatting, etc))
• Test (adding missing tests or correcting existing tests)
• Improvement (Improvements to existing code)
• Other (please specify)

How Has This Been Tested?

• Added 6 unit tests to filter-chip.test.tsx (12 → 18, all passing): no-crash regression for an unset date chip, non Date value coercion to unselected, default month-as-text formatting (27 May 2026), custom dateFormat (27/05/2026), and content-fit width wiring on both the string and date containers.
• Full @raystack/apsara Vitest suite passes (1,852 tests) — no cross-component regression; calendar + filter-chip together: 89/89.
• tsc --noEmit clean for filter-chip/calendar and the two edited apps/www files.
• Biome lint clean for components/filter-chip (only the 2 pre-existing any warnings in the original useCallback; no new warnings).

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation (.mdx files)
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works

Screenshots (if appropriate):

[Add screenshots here]

Related Issues

[Link any related issues here using #issue-number]

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	May 27, 2026 12:05pm

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR consolidates the DatePicker and RangePicker component APIs by switching from separate calendarProps, inputProps, and inputsProps props to a unified slotProps object structure. FilterChip gains a new optional dateFormat prop and implements stricter Date-only value handling for date columns to prevent crashes. Input fields now use CSS field-sizing: content for flexible sizing. The migration guide documents all breaking changes across calendar components, and examples demonstrate the new usage patterns.

Sequence Diagram

sequenceDiagram
    participant User
    participant FilterChip
    participant DatePicker
    participant Calendar

    User->>FilterChip: filterValue (Date or non-Date)
    alt filterValue is Date
        FilterChip->>FilterChip: Pass Date to DatePicker value
    else filterValue is not Date
        FilterChip->>FilterChip: Pass undefined to DatePicker value
    end
    FilterChip->>DatePicker: dateFormat, slotProps.input config
    DatePicker->>Calendar: slotProps.calendar config
    User->>Calendar: Select date
    Calendar->>DatePicker: onSelect(date)
    DatePicker->>FilterChip: Propagate selection
    FilterChip->>User: Update filter with selected Date

Loading

Possibly related issues

• [Calendar] Support ref as prop and fix date handling edge cases #602

Suggested reviewers

• paanSinghCoder
• rohanchkrabrty
• rsbh

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title specifically addresses multiple concrete issues fixed in the changeset: breaking date type filterchip behavior, width wrapping styling, and text-to-date value handling.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description check	✅ Passed	The PR description clearly describes fixing a date-type FilterChip crash, adding dateFormat prop, content-fit width styling, and migrating to slotProps API, all supported by the changeset.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

Warning

Review ran into problems

🔥 Problems

Git: Failed to clone repository. Please run the @coderabbitai full review command to re-trigger a full review. If the issue persists, set path_filters to include or exclude specific files.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[rohanchkrabrty]

Let's expose a calendarProps similar to selectProps and expose and forward all props

[rohanchkrabrty]

The input field should also shrink on parent resize which was working before, but not working now.