Make the `responsive` breakpoint configurable for pickers (currently hardcoded to xsOnly)
Problem Statement
responsive on DateRangePicker / DatePicker defaults to true, but the drawer only shows on xsOnly, i.e. below 576px. That threshold cannot be changed, which makes the prop unusable for apps whose mobile layout breakpoint is wider than rsuite's sm.
PickerToggleTrigger hardcodes it:
const breakpoint = useBreakpointValue({ xsOnly: 'xs' }, { enabled: responsive });There is no existing API to work around this: CustomProvider has no breakpoints config, and since the trigger is a JS media query it cannot be overridden from CSS either.
Concretely: our app switches to its mobile calendar layout at max-width: 1279px. With responsive we get the drawer only below 576px, so between 576px and 1279px users get the positioned popup — which at ~576-640px is wider than the viewport. This is not specific to us: any project whose "mobile" breakpoint is not exactly 576px runs into it, so the current default silently works for only a subset of layouts.
Version: 6.2.4
Proposed Solution
Either of these would solve it, and both are backwards compatible:
1. Accept a breakpoint key or media query as the value of responsive:
<DateRangePicker responsive /> // unchanged: xsOnly
<DateRangePicker responsive="mdDown" />
<DateRangePicker responsive="(max-width: 1279px)" />2. Allow a custom breakpoint map on CustomProvider. createBreakpoints() already accepts an arbitrary BreakpointMap — the machinery exists, it just isn't reachable from userland (it is not re-exported from useMediaQuery):
<CustomProvider breakpoints={{ xs: 0, sm: 1280, md: 1440, lg: 1600, xl: 1920 }}>
<DateRangePicker responsive />
</CustomProvider>Option 1 seems lighter, since it keeps the change local to the picker and needs no global config.
Docs
The DateRangePicker docs say the popup "is displayed as a full-width Drawer on extra-small screens" without naming the value. Stating 576px there would save a trip into the source.
Source: rsuite/rsuite