# Box Kite 2.2.10

_Box Kite 2.2.17 · a markdown copy of https://www.box-kite.dev/releases/2.2.10/_

_28 October 2026 · [npm](https://www.npmjs.com/package/@box-kite/react) · [Compare v2.2.9...v2.2.10](https://github.com/box-kite/box-kite/compare/v2.2.9...v2.2.10)_

A date picker offers only the times within `min` and `max`, its panel can be as wide as a stretched field, and `pickOnly` turns the field into one button for a short list where typing adds nothing. `scrollbarColor` also takes a `Box.extend()` colour now.

## Highlights

- **[A date picker offers only the times it will accept](#a-date-picker-offers-only-the-times-it-will-accept)**: `min`/`max` limit the list of times, a time picker's panel is as wide as its field, and `pickOnly` makes the field one button.

## A date picker offers only the times it will accept

`DatePicker`'s list of times used to offer every slot of the day, and `min`/`max` only marked the field invalid once someone picked a time outside them. The list now holds only the times within `min` and `max`, both ends included, starting at the first slot on or after `min` rather than snapping it down to the grid (`min="18:20"` on a 15-minute step starts at 18:30). On a `type="datetime"` picker the bounds apply on their own day only, so the day of `min` starts late, the day of `max` ends early and every other day is whole. A range with no time in it renders a `role="status"` line, `emptyTimesLabel` (default `'No times available'`), instead of an empty listbox.

A picker's panel can now be at least as wide as its field, with `matchWidth`. It defaults to `true` for `type="time"` (so a stretched time picker no longer opens a narrow list at its left edge) and to `false` for a date, a date-time and `DateRangePicker`, which keep the calendar's width. It now means the same thing on the top layer and on the fallback for browsers with no Popover API, which used to disagree.

Where typing adds nothing, `pickOnly` makes the field one button that shows the value and opens the panel, on `DatePicker` and `DateRangePicker` alike. The button is named by the label and the value (`Delivery 6:30 PM`), a press anywhere on the field opens it, and `name`, `required`, `clearable` and a form reset work as they do on the typed field, which stays the default.

```tsx
<DatePicker type="time" label="Delivery today" width="fit" pickOnly min="18:30" max="19:30" step={15} />
```

## Breaking changes

None.

## Fixes

- **`scrollbarColor` refused a colour added with `Box.extend()`.** `scrollbarColor={['line-strong', 'transparent']}` typechecked, then wrote no CSS and logged a warning, while `bgColor="line-strong"` worked. Each position of the pair now takes what a colour prop takes: a palette token, a `Box.extend()` colour, or either with an opacity (`'line-strong/50'`). `catalog()` now describes the prop as a pair of colours too, where before it emitted a schema no value could pass.
- **A time-only `DatePicker` drew a line down the left edge of its panel.** That line separates the list of times from the calendar, so only a `type="datetime"` picker draws it now. The list also leaves room for an option's focus ring, which its scrolling used to clip on the first and last time.

---

_Every page: https://www.box-kite.dev/llms.txt · every prop, measured: https://www.box-kite.dev/props.md_

