@12-apps/ui 6.97.1 → 6.98.1

package/src/components/form/DateRangePicker/DateRangePicker.md

@@ -45,6 +45,13 @@ interface DateRangePickerProps {
   messages?: Partial<DateRangePickerMessages>;
   dataTestId?: string;                      // default 'date-range-picker'
   className?: string;
+  // Opt-in, for a picker laid out IN a page (all off by default):
+  fieldsPlacement?: 'below' | 'beside';     // default 'below'
+  renderFields?: (args: { placement: 'beside' | 'below'; disabled: boolean }) => ReactNode;
+  openEnd?: boolean;                        // a start with no end is an answer
+  disabled?: boolean;                       // shown, not changeable (default false)
+  label?: string;                           // the disabled group's name (default: calendarLabel)
+  calendarLabels?: Partial<CalendarLabels>; // names for the month arrows
 }
 ```
 
@@ -144,8 +151,14 @@ mounts. The picker remounts it when a **quick pick** or a **typed date** moves
 the range, and never when a day inside the grid is clicked — a calendar that
 jumped under the pointer picking in it would be unusable.
 
-So the grid follows the range's **start**. Picking "This year" in August moves
-it to January, because that is where the range now begins.
+So the grid follows the range's **start** — or its **end** when only the end is
+chosen. Picking "This year" in August moves it to January, because that is
+where the range now begins.
+
+A consumer that owns the draft may complete a tap into a different draft than
+the one the picker handed it (keeping an end the tap would have dropped). That
+is still the tap's own result: the grid stays on its month and focus stays on
+the tapped day. Only a change that drops a bound the tap chose moves the grid.
 
 ## Layout
 
@@ -158,6 +171,68 @@ There is no `size` prop. The day grid has a fixed metric that a size scale would
 not change, and a prop that only altered the padding of the quick entries would
 be a scale in name only.
 
+## A picker laid out in a page
+
+The defaults above are a popover's: one framed block, fields underneath, a
+summary line. A form that shows the range ALWAYS OPEN among its other fields
+needs four more things, each opt-in so no existing screen changes:
+
+- **`fieldsPlacement="beside"`** — the months get their own outlined frame and
+  the typed half sits on the page: in a column BESIDE the frame when the
+  picker's own width holds both, under it when it does not, and with one month
+  instead of two when two would not fit either. Measured on the picker
+  (`ResizeObserver`), never the viewport: a form column beside a preview is
+  narrow on the widest screen. The root carries `data-fields-placement`.
+- **`renderFields({ placement, disabled })`** — the consumer's OWN fields instead of the
+  built-in pair, for a form whose fields carry rules this picker does not (a
+  half-typed date kept until submit, its own messages). The summary line goes
+  with the built-in pair: beside fields that say their own refusals it would
+  only repeat them. The calendar follows the value whenever the consumer moves
+  it, as it follows a typed date — never on a click in the grid.
+- **`openEnd`** — a start with no end is a finished answer ("from this day
+  on"), and the summary says `messages.openEnded` (default `No end date.`)
+  instead of asking for the end. It does not repeat the date: the field beside
+  it shows it. `resolveDayRange` is unchanged; what an open end means is the
+  caller's.
+- **`calendarLabels`** — names for the calendar's month arrows
+  (`PT_BR_UI_LABELS.calendar` in Portuguese); without them they stay unnamed,
+  as before. `PT_BR_UI_LABELS.dateRangePicker.openEnded` is the Portuguese
+  `openEnded`.
+- **`disabled`** — the period is shown but cannot be changed now (a consumer
+  that cannot place its days, FUT-4482). Every day is disabled and a tap
+  writes nothing, the quick ranges are not offered, the built-in boxes are
+  disabled, `renderFields` receives `disabled: true` so the consumer's fields
+  follow, and the root is a `group` named by `label` (default: the calendar
+  label) carrying `aria-disabled`. The month arrows are disabled and today's
+  ring takes the disabled ink. The days INSIDE a shown range keep the
+  secondary ink (`text.secondary`), so the period stays legible on the band
+  (the disabled ink there was 1.56:1). That is the locked picker only: on a
+  live one, a day `isDateDisabled` blocks inside the range keeps the disabled
+  ink. The control cannot say why: say it beside the
+  picker, and make that sentence your fields' `aria-describedby`. **In a
+  popover the consumer disables its own trigger** — the button or field that
+  opens the popover is the consumer's, and this prop cannot reach it.
+- **`showOutsideDays`, `todayIndicator`, `allowSameDayRange`** — `Calendar`'s
+  own options, passed through: hide the neighbouring months' days, ring today
+  (`'ring'`), or refuse one day as a whole range (a second tap on the start day
+  then does nothing). Defaults unchanged: drawn, bold, allowed.
+
+Under the fields' row (`placement="below"`) the frame is as wide as its months
+and centred, never stretched across the page around one month.
+
+- **`fullWidth`** (with `fieldsPlacement="beside"`) — the frame's edges are the
+  picker's: under the fields it spans the picker, beside them it takes what the
+  fields' column leaves (never less than its months at full size), and that
+  column stops at 320 design px. The calendar's seven columns spread across the
+  frame; the day faces keep their 40 design px, and the rows stay 40 tall. Under
+  the fields the frame trims its side padding before a column drops under 40
+  design px (a phone's tap target). For a picker laid into a form section whose
+  heading and fields the frame must line up with. Ignored in the default
+  (popover) layout. Default off.
+- **The in-page frame** is a card on the page: the raised surface role
+  (`surfaces(theme).raised`, `background.paper` unless the host states one) and the
+  default `Card`'s radius.
+
 ## Accessibility
 
 - The quick entries are native `<button>`s with `aria-pressed`; the active one

package/src/components/form/DateRangePicker/DateRangePicker.range.ts

@@ -64,6 +64,7 @@ export function defaultMessages(): DateRangePickerMessages {
     to: 'End date',
     quickRanges: 'Quick ranges',
     incomplete: 'Choose both dates.',
+    openEnded: EN_US_UI_LABELS.dateRangePicker.openEnded,
     reversed: 'The end date must be on or after the start date.',
     overMax: ({ maxRangeDays }) => `Choose a range of at most ${maxRangeDays} days.`,
     summary: ({ from, to }) => `${isoToMasked(from, dayMask)} – ${isoToMasked(to, dayMask)}`,
@@ -72,14 +73,21 @@ export function defaultMessages(): DateRangePickerMessages {
   };
 }
 
-/** The line under the fields: the chosen window, or why there isn't one. */
+/**
+ * The line under the fields: the chosen window, or why there isn't one. With
+ * `openEnd`, a start with no end is an answer of its own and is said as one.
+ */
 export function statusMessage(
   status: DateRangeStatus,
   messages: DateRangePickerMessages,
   maxRangeDays: number | undefined,
+  openEnd: { enabled: boolean; draft: DateRangeDraft } = { enabled: false, draft: { from: null, to: null } },
 ): string {
   if (status.ok) return messages.summary(status.window);
-  if (status.problem === 'incomplete') return messages.incomplete;
+  if (status.problem === 'incomplete') {
+    const openEnded = openEnd.enabled && openEnd.draft.from !== null && openEnd.draft.to === null;
+    return openEnded ? (messages.openEnded ?? messages.incomplete) : messages.incomplete;
+  }
   if (status.problem === 'reversed') return messages.reversed;
   return messages.overMax({ maxRangeDays: maxRangeDays ?? status.days, days: status.days });
 }

package/src/components/form/DateRangePicker/DateRangePicker.tsx

@@ -27,34 +27,27 @@ import Paper from '@mui/material/Paper/index.js';
 import useMediaQuery from '@mui/material/useMediaQuery/index.js';
 import { useTheme } from '@mui/material/styles/index.js';
 import type { SxProps, Theme } from '@mui/material/styles/index.js';
-import React from 'react';
+import React, { useRef } from 'react';
 
+import type { CalendarLabels } from '../../../copy/labels';
 import { Calendar } from '../Calendar';
 
 import { toLocalDay } from './DateRangePicker.dates';
 import { useDateRangePicker } from './DateRangePicker.hooks';
+import { CALENDAR_CLASS, FLAT_CALENDAR, fieldsColumnSx, frameSx } from './DateRangePicker.frame';
+import { besideLayout, useMeasuredWidth, type FieldsPlacement } from './DateRangePicker.layout';
 import { DEFAULT_QUICK_RANGES } from './DateRangePicker.quick';
 import type { DateRangeDraft, DateRangePickerProps, WeekStart } from './DateRangePicker.types';
 import { DateRangeFields } from './DateRangePickerFields';
 import { DateRangeQuickList } from './DateRangePickerQuickList';
 
-const CALENDAR_CLASS = 'date-range-picker__calendar';
-
 const ROOT_SX: SxProps<Theme> = {
   display: 'inline-flex',
   flexDirection: 'column',
   gap: 2,
   p: 2,
   maxWidth: '100%',
-  // `Calendar` renders its own `Paper` with 24px of padding. Nested in this one
-  // that reads as a box inside a box, so the inner frame is flattened here
-  // through the className hook the component exposes for exactly this.
-  [`& .${CALENDAR_CLASS}`]: {
-    p: 0,
-    boxShadow: 'none',
-    backgroundColor: 'transparent',
-    backgroundImage: 'none',
-  },
+  ...FLAT_CALENDAR,
 };
 
 const BODY_SX: SxProps<Theme> = {
@@ -132,6 +125,15 @@ function useMonthCount(requested: number | undefined): number | undefined {
 }
 
 /** The grid, in range mode — `Calendar`, never a second implementation of one. */
+/** The calendar options a picker passes through untouched. */
+type CalendarDisplay = Pick<
+  DateRangePickerProps,
+  'showOutsideDays' | 'todayIndicator' | 'allowSameDayRange' | 'fullWidth' | 'disabled'
+>;
+
+/** Every day, for a picker that is `disabled`. */
+const EVERY_DAY = (): boolean => true;
+
 function RangeCalendar({
   calendarLabel,
   picker,
@@ -140,7 +142,11 @@ function RangeCalendar({
   weekStartsOn,
   months,
   maxRangeDays,
+  labels,
+  display,
 }: {
+  labels: Partial<CalendarLabels> | undefined;
+  display: CalendarDisplay;
   picker: Picker;
   value: DateRangeDraft;
   locale: string;
@@ -169,6 +175,12 @@ function RangeCalendar({
       // The same ceiling the quick list is judged against, so the calendar
       // cannot hand back a window the control has just called too long.
       maxRangeLength={maxRangeDays}
+      {...(labels ? { labels } : {})}
+      showOutsideDays={display.showOutsideDays}
+      todayIndicator={display.todayIndicator}
+      allowSameDayRange={display.allowSameDayRange}
+      fullWidth={display.fullWidth}
+      {...(display.disabled === true ? { isDateDisabled: EVERY_DAY, navigationDisabled: true } : {})}
     />
   );
 }
@@ -200,59 +212,167 @@ function QuickColumn({
   );
 }
 
-export function DateRangePicker({
-  value,
-  onChange,
-  timeZone,
-  now,
-  maxRangeDays,
-  weekStartsOn = 0,
-  quickRanges = DEFAULT_QUICK_RANGES,
-  locale = 'en-US',
-  numberOfMonths,
-  messages,
-  dataTestId = 'date-range-picker',
-  className,
-}: DateRangePickerProps): React.JSX.Element {
+/** The typed half: the consumer's own fields, or the built-in pair and its line. */
+function TypedHalf({
+  props,
+  picker,
+  placement,
+}: {
+  props: DateRangePickerProps;
+  picker: Picker;
+  placement: FieldsPlacement;
+}): React.JSX.Element {
+  const disabled = props.disabled === true;
+  if (props.renderFields) return <>{props.renderFields({ placement, disabled })}</>;
+  return (
+    <DateRangeFields
+      value={props.value}
+      status={picker.status}
+      messages={picker.copy}
+      maxRangeDays={props.maxRangeDays}
+      onEdit={picker.editBound}
+      statusId={picker.statusId}
+      dataTestId={props.dataTestId ?? 'date-range-picker'}
+      openEnd={props.openEnd ?? false}
+      stacked={placement === 'beside'}
+      disabled={disabled}
+    />
+  );
+}
+
+/**
+ * How many months, and where the typed half goes. The default layout counts
+ * months by the viewport, as it always did; `beside` measures the picker.
+ */
+function usePickerLayout(props: DateRangePickerProps): {
+  root: React.RefObject<HTMLDivElement | null>;
+  months: number | undefined;
+  placement: FieldsPlacement;
+} {
+  const theme = useTheme();
+  const viewportMonths = useMonthCount(props.numberOfMonths);
+  const root = useRef<HTMLDivElement>(null);
+  const beside = props.fieldsPlacement === 'beside';
+  const width = useMeasuredWidth(root, beside);
+  if (!beside || width === null) return { root, months: viewportMonths, placement: 'below' };
+  const layout = besideLayout(width, props.numberOfMonths ?? 2, theme);
+  return { root, months: layout.months, placement: layout.placement };
+}
+
+/** The `beside` layout: the months in their own frame, the fields on the page. */
+function InPageLayout({
+  props,
+  picker,
+  layout,
+  body,
+}: {
+  props: DateRangePickerProps;
+  picker: Picker;
+  layout: ReturnType<typeof usePickerLayout>;
+  body: React.ReactNode;
+}): React.JSX.Element {
+  const sideBySide = layout.placement === 'beside';
+  return (
+    <Box
+      ref={layout.root}
+      className={props.className}
+      data-testid={props.dataTestId ?? 'date-range-picker'}
+      data-fields-placement={layout.placement}
+      {...disabledGroup(props, picker)}
+      sx={{
+        display: 'flex',
+        flexDirection: sideBySide ? 'row' : 'column',
+        alignItems: sideBySide ? 'flex-start' : 'stretch',
+        gap: sideBySide ? 4 : 2,
+        width: '100%',
+        minWidth: 0,
+      }}
+    >
+      <Paper variant="outlined" sx={frameSx(sideBySide, props.fullWidth === true, layout.months ?? 1)}>
+        {body}
+      </Paper>
+      <Box sx={fieldsColumnSx(sideBySide, props.fullWidth === true)}>
+        <TypedHalf props={props} picker={picker} placement={layout.placement} />
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * A disabled picker's root is a named GROUP (review round 6): `aria-disabled`
+ * is only valid on an element with a role, and the name says what is off.
+ * Enabled, the root carries neither, as it always did.
+ */
+function disabledGroup(props: DateRangePickerProps, picker: Picker) {
+  if (props.disabled !== true) return {};
+  return { role: 'group', 'aria-label': props.label ?? picker.copy.calendarLabel, 'aria-disabled': true } as const;
+}
+
+/** The default layout: one framed block, the typed half under the months. */
+function PopoverLayout({
+  props,
+  picker,
+  body,
+}: {
+  props: DateRangePickerProps;
+  picker: Picker;
+  body: React.ReactNode;
+}): React.JSX.Element {
+  const typed = <TypedHalf props={props} picker={picker} placement="below" />;
+  return (
+    <Paper
+      className={props.className}
+      data-testid={props.dataTestId ?? 'date-range-picker'}
+      {...disabledGroup(props, picker)}
+      sx={ROOT_SX}
+    >
+      {body}
+      {props.renderFields ? typed : <Box sx={FIELDS_DIVIDER_SX}>{typed}</Box>}
+    </Paper>
+  );
+}
+
+export function DateRangePicker(props: DateRangePickerProps): React.JSX.Element {
+  const { value, maxRangeDays, weekStartsOn = 0, locale = 'en-US', dataTestId = 'date-range-picker' } = props;
   const picker = useDateRangePicker({
     value,
-    onChange,
-    timeZone,
-    now,
+    onChange: props.onChange,
+    timeZone: props.timeZone,
+    now: props.now,
     maxRangeDays,
     weekStartsOn,
-    quickRanges,
-    messages,
+    quickRanges: props.quickRanges ?? DEFAULT_QUICK_RANGES,
+    messages: props.messages,
+    followValue: props.renderFields !== undefined,
   });
-  const months = useMonthCount(numberOfMonths);
+  const layout = usePickerLayout(props);
 
-  return (
-    <Paper className={className} data-testid={dataTestId} sx={ROOT_SX}>
-      <Box sx={BODY_SX}>
-        <RangeCalendar
-          calendarLabel={picker.copy.calendarLabel}
-          picker={picker}
-          value={value}
-          locale={locale}
-          weekStartsOn={weekStartsOn}
-          months={months}
-          maxRangeDays={maxRangeDays}
-        />
+  const body = (
+    <Box sx={BODY_SX}>
+      <RangeCalendar
+        calendarLabel={picker.copy.calendarLabel}
+        picker={picker}
+        value={value}
+        locale={locale}
+        weekStartsOn={weekStartsOn}
+        months={layout.months}
+        maxRangeDays={maxRangeDays}
+        labels={props.calendarLabels}
+        // `fullWidth` fills the in-page frame; the popover's frame is as wide
+        // as its months, and a filling calendar in it spread past the quick
+        // column and the typed pair (FUT-4156, round 3).
+        display={{ ...props, fullWidth: props.fieldsPlacement === 'beside' && props.fullWidth === true }}
+      />
+      {props.disabled === true ? null : (
         <QuickColumn picker={picker} maxRangeDays={maxRangeDays} dataTestId={dataTestId} />
-      </Box>
-      <Box sx={FIELDS_DIVIDER_SX}>
-        <DateRangeFields
-          value={value}
-          status={picker.status}
-          messages={picker.copy}
-          maxRangeDays={maxRangeDays}
-          onEdit={picker.editBound}
-          statusId={picker.statusId}
-          dataTestId={dataTestId}
-        />
-      </Box>
-    </Paper>
+      )}
+    </Box>
   );
+
+  if (props.fieldsPlacement === 'beside') {
+    return <InPageLayout props={props} picker={picker} layout={layout} body={body} />;
+  }
+  return <PopoverLayout props={props} picker={picker} body={body} />;
 }
 
 export default DateRangePicker;

package/src/components/form/DateRangePicker/DateRangePicker.types.ts

@@ -4,7 +4,10 @@
  * "1 August" is the same day in every zone, and only the question "which day is
  * TODAY" needs a zone to answer.
  */
-import type { DateRange } from '../Calendar';
+import type React from 'react';
+
+import type { CalendarLabels } from '../../../copy/labels';
+import type { CalendarTodayIndicator, DateRange } from '../Calendar';
 
 /** One inclusive calendar day as `AAAA-MM-DD`. Sorts lexicographically. */
 export type DayString = string;
@@ -90,6 +93,12 @@ export interface DateRangePickerMessages {
   quickRanges: string;
   /** Shown while only one end is chosen. */
   incomplete: string;
+  /**
+   * Shown, with `openEnd`, for a start with no end: a finished answer ("no end
+   * date"), worded WITHOUT the date, which the field beside it already shows.
+   * Optional so a full messages object written before it still type-checks.
+   */
+  openEnded?: string;
   /** Shown when the start is after the end. */
   reversed: string;
   /** Shown when the range — typed or quick-picked — exceeds the cap. */
@@ -164,6 +173,78 @@ export interface DateRangePickerProps {
   numberOfMonths?: number;
   /** Copy overrides, merged over the English defaults. */
   messages?: Partial<DateRangePickerMessages>;
+  /**
+   * Where the typed half sits. `below` (default) is the layout this picker
+   * always had. `beside` is for a picker laid out in a page rather than a
+   * popover: the months sit in their own frame and the fields in a column
+   * beside them when the PICKER's own width has room for both, under them when
+   * it has not — and one month instead of two when two would not fit either.
+   * Decided by measuring the picker, not the viewport, because a form column
+   * beside a preview is narrow on the widest screen.
+   */
+  fieldsPlacement?: 'below' | 'beside';
+  /**
+   * With `fieldsPlacement="beside"`: the months' frame meets the picker's own
+   * edges instead of hugging its months. Under the fields' row the frame spans
+   * the picker; beside them it takes what the fields' column leaves, and that
+   * column stops at 320 design px — a `dd/mm/aaaa` date and its message need
+   * no more. The calendar's seven columns spread across the frame and the day
+   * faces keep their size (`Calendar` `fullWidth`). For a picker laid into a
+   * form section whose edges the frame must line up with. Under the fields the
+   * frame trims its side padding before a column drops under 40 design px.
+   * Ignored without `fieldsPlacement="beside"`: the popover's frame is as wide
+   * as its months. Default: false — the frame as wide as its months, centred
+   * under the fields.
+   */
+  fullWidth?: boolean;
+  /**
+   * The consumer's OWN typed fields, in place of the built-in pair and the
+   * summary line under it — for a form whose fields carry its own rules (a
+   * half-typed date kept until submit, its own messages), which a second line
+   * would only repeat. Told where it sits, so it can lay its fields out for it.
+   * The calendar follows the value when the consumer changes it, as it follows
+   * a typed date.
+   */
+  renderFields?: (args: { placement: 'beside' | 'below'; disabled: boolean }) => React.ReactNode;
+  /**
+   * The period is shown but cannot be changed now — its consumer cannot place
+   * its days (FUT-4482). Every day of the grid is disabled and a tap writes
+   * nothing, the quick ranges are not offered, the built-in boxes are
+   * disabled, `renderFields` is told (`disabled`) so the consumer's own fields
+   * follow, and the root is a `group` named by `label` that carries
+   * `aria-disabled`. The month arrows are disabled too and today's ring takes
+   * the disabled ink (review round 6). Say WHY next to the picker; the control
+   * cannot — and describe the consumer's own fields with that sentence.
+   *
+   * In a popover, the picker is only what opens: the consumer disables its OWN
+   * trigger (the button or field that opens the popover); this prop cannot
+   * reach it. Default: false.
+   */
+  disabled?: boolean;
+  /**
+   * The picker's accessible name while it is `disabled` and its root is a
+   * group. Default: `messages.calendarLabel`.
+   */
+  label?: string;
+  /**
+   * A start with no end is a finished answer — "from this day on" — rather
+   * than half a range: the summary says `messages.openEnded` instead of asking
+   * for the end. `resolveDayRange` is unchanged; the caller decides what an
+   * open end means to it.
+   */
+  openEnd?: boolean;
+  /**
+   * The calendar's display options, passed through (`Calendar`'s own):
+   * whether a month shows its neighbours' days (default true), how today is
+   * marked (default `'bold'`), and whether one day may be the whole range
+   * (default true). With `allowSameDayRange={false}` a second tap on the start
+   * day does nothing.
+   */
+  showOutsideDays?: boolean;
+  todayIndicator?: CalendarTodayIndicator;
+  allowSameDayRange?: boolean;
+  /** Names for the calendar's own controls (the month arrows), in the host's language. */
+  calendarLabels?: Partial<CalendarLabels>;
   /** Root test id; every part derives from it (`-from`, `-quick-today`, …). */
   dataTestId?: string;
   className?: string;
@@ -182,6 +263,12 @@ export interface UseDateRangePickerArgs {
   weekStartsOn: WeekStart;
   quickRanges: QuickRange[];
   messages: Partial<DateRangePickerMessages> | undefined;
+  /**
+   * Remount the calendar onto the range whenever the CONSUMER moves it, not
+   * only when a typed field or a quick pick does — true when the consumer owns
+   * the fields (`renderFields`), whose edits never pass through the picker.
+   */
+  followValue?: boolean;
 }
 
 /** Everything the component renders from, and every way the range can move. */

package/src/components/form/DateRangePicker/DateRangePickerFields.tsx

@@ -38,6 +38,12 @@ export interface DateRangeFieldsProps {
   /** Id of the status line, so both fields can point at it. */
   statusId: string;
   dataTestId: string;
+  /** A start with no end is an answer (`openEnd`), not a half-chosen range. */
+  openEnd?: boolean;
+  /** Beside the months the pair stacks; under them it sits side by side. */
+  stacked?: boolean;
+  /** The picker is `disabled`: both boxes are. */
+  disabled?: boolean;
 }
 
 export function DateRangeFields({
@@ -48,6 +54,9 @@ export function DateRangeFields({
   onEdit,
   statusId,
   dataTestId,
+  openEnd = false,
+  stacked = false,
+  disabled = false,
 }: DateRangeFieldsProps): React.JSX.Element {
   // "Incomplete" is not an error — it is a range that is not finished yet, and
   // painting it red would make the first click on a two-click control look like
@@ -56,7 +65,7 @@ export function DateRangeFields({
 
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
-      <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 2 }}>
+      <Box sx={{ display: 'flex', flexDirection: stacked ? 'column' : 'row', flexWrap: 'wrap', gap: 2 }}>
         <DayBoundInput
           mask={messages.dayMask}
           label={messages.from}
@@ -65,6 +74,7 @@ export function DateRangeFields({
           testId={`${dataTestId}-from`}
           error={rejected}
           describedBy={statusId}
+          disabled={disabled}
         />
         <DayBoundInput
           mask={messages.dayMask}
@@ -74,6 +84,7 @@ export function DateRangeFields({
           testId={`${dataTestId}-to`}
           error={rejected}
           describedBy={statusId}
+          disabled={disabled}
         />
       </Box>
       <Typography
@@ -86,7 +97,7 @@ export function DateRangeFields({
         color={rejected ? 'error.main' : 'text.secondary'}
         data-testid={`${dataTestId}-status`}
       >
-        {statusMessage(status, messages, maxRangeDays)}
+        {statusMessage(status, messages, maxRangeDays, { enabled: openEnd, draft: value })}
       </Typography>
     </Box>
   );

package/src/components/navigation/Tabs/Tabs.md

@@ -78,7 +78,8 @@ The Tabs component provides an intuitive way to organize related content into se
 | Prop             | Type                                    | Default  | Description                    |
 | ---------------- | --------------------------------------- | -------- | ------------------------------ |
 | `scrollable`     | `boolean`                               | `false`  | Enable scrolling for many tabs |
-| `scrollButtons`  | `'auto' \| 'desktop' \| 'on' \| 'off'`  | `'auto'` | Scroll button behavior         |
+| `scrollButtons`  | `boolean \| 'auto' \| 'desktop' \| 'on' \| 'off'` | `'auto'` | The ‹ › buttons of a `scrollable` strip: `'auto'` while it overflows, `true` always, `false` never (swipe/wheel/keyboard still scroll). `'desktop'`, `'on'`, `'off'` are deprecated and behave as `'auto'` |
+| `allowScrollButtonsMobile` | `boolean`                      | `scrollable` | Show the scroll buttons on phone widths too; `false` keeps MUI's hide-below-`sm` rule |
 | `sticky`         | `boolean`                               | `false`  | Pin the tab list while panels scroll beneath it |
 | `stickyOffset`   | `number`                                | `0`      | Top offset (px) when `sticky` — e.g. a fixed header height |
 
@@ -270,6 +271,26 @@ function ScrollableTabsExample() {
 }
 ```
 
+### Scrollable Tabs Without Scroll Buttons
+
+`scrollButtons={false}` keeps the strip scrollable (swipe, wheel, keyboard) but
+renders no ‹ › buttons, so the tabs run edge to edge and nothing shifts when the
+strip leaves its start. A host that wants arrows draws its own, for example
+overlaid on a fade at the side with more tabs.
+
+```tsx
+<Tabs
+  items={items}
+  value={activeTab}
+  onChange={handleChange}
+  scrollable
+  scrollButtons={false}
+/>
+```
+
+Note that `scrollButtons="off"` does **not** do this: the legacy strings
+`'desktop'`, `'on'` and `'off'` all behave as `'auto'`, as they always have.
+
 ### Sticky, Scrollable Tabs
 
 Pin the tab list under a fixed header while the panels scroll, and let the row