Box Kite 2.2.10

28 October 2026 · npm · 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: 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.

<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.