@allxsmith/bestax-bulma 5.26.4 → 5.26.6

package/dist/index.esm.js

@@ -7689,7 +7689,8 @@ const noAnnouncementsYet = {
 // the accessibility tree. The declarations match the `extras-sr-only` mixin,
 // plus `clip-path`, which replaces the deprecated `clip`. The negative margin
 // pulls the 1px box back inside the page, so it doesn't add scrollable
-// overflow.
+// overflow. Exported for other live regions that must work without a
+// stylesheet, such as a range calendar's.
 const visuallyHidden = {
     position: 'absolute',
     width: '1px',
@@ -8819,6 +8820,58 @@ const rendersOwnField = (component, options) => {
         (moved.length > 0 ? `, and set ${listOf(moved)} on that <Field>.` : '.'));
     return true;
 };
+// Each Control-level prop, with what takes its place on the `Control` the
+// caller wrapped around the wrapper. `bare-control.test.tsx` holds this to
+// what each wrapper hands its own `Control`, so a new Control-level prop
+// fails there until it is added here and passed to `rendersOwnControl`.
+const ON_CONTROL = {
+    isLoading: 'isLoading',
+    iconLeft: 'iconLeft',
+    iconLeftName: 'iconLeftName',
+    iconLeftSize: 'iconLeftSize',
+    iconRight: 'iconRight',
+    iconRightName: 'iconRightName',
+    iconRightSize: 'iconRightSize',
+    hasIconsLeft: 'hasIconsLeft',
+    hasIconsRight: 'hasIconsRight',
+    isExpanded: 'isExpanded',
+    controlSize: 'size (for controlSize)',
+    controlClassName: 'className (for controlClassName)',
+};
+/**
+ * Whether a convenience form wrapper renders a `Control` of its own (#921):
+ * only outside one. Inside a `Control` it renders none, so the props it
+ * would have handed its own do nothing there, and it warns in development,
+ * naming them and saying to set them on that `Control`. An `inline` picker
+ * renders none in either place, so it drops them inside a `Control` or not,
+ * and its warning says so without pointing at a `Control`. A wrapper passes
+ * only the props it hands its own `Control`, as the caller gave them, so a
+ * default the wrapper fills in itself never warns. A prop counts when it is
+ * truthy, since a falsy one would change nothing on a `Control` either.
+ * Internal; not part of the public API.
+ */
+const rendersOwnControl = (component, options) => {
+    if (!options.inline && !options.insideControl)
+        return true;
+    const held = Object.keys(ON_CONTROL).filter(prop => options[prop]);
+    if (held.length === 0)
+        return false;
+    const names = held.join(' ');
+    const doNothing = held.length > 1 ? 'those props do' : 'that prop does';
+    if (options.inline) {
+        warnOnce(`${component}:Control-props-inline:${held.join('+')}`, `[bestax-bulma] <${component} inline ${names}> renders no <Control> ` +
+            `in inline mode, inside a <Control> or not, so ${doNothing} ` +
+            `nothing. Leave ${held.length > 1 ? 'them' : 'it'} out of an ` +
+            `inline picker.`);
+    }
+    else {
+        warnOnce(`${component}:Control-props-in-Control:${held.join('+')}`, `[bestax-bulma] <${component} ${names}> inside a <Control> renders ` +
+            `no <Control> of its own, so ${doNothing} nothing there. Set ` +
+            `${listOf(held.map(prop => ON_CONTROL[prop]))} on that <Control> ` +
+            `instead.`);
+    }
+    return false;
+};
 const FieldLabelIdContext = createContext(undefined);
 /**
  * The id a labeled Field wants its single composed control to adopt (#495).
@@ -8953,6 +9006,7 @@ Checkbox.displayName = 'Checkbox';
 // picker bases read it so their right-side launcher gives way to that
 // spinner, which sits at the same edge, whether the `Control` is the one a
 // convenience input renders or one the caller wrapped around the input.
+// Autocomplete reads it for its clear button, which sits there too.
 // Kept apart from `FormContext`, whose contexts only report whether a `Field`
 // or `Control` is present. Internal; not part of the public API.
 const ControlLoadingContext = createContext(false);
@@ -9282,7 +9336,7 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
     }), [name, groupActive, currentValue, handleChange]);
     const checkboxesElement = (jsx("div", { className: wrapperClass, role: "group", "aria-labelledby": ariaLabelledBy, ...rest, children: jsx(CheckboxesProvider, { value: ctx, children: children }) }));
     let content = checkboxesElement;
-    if (!insideControl) {
+    if (rendersOwnControl('Checkboxes', { insideControl })) {
         content = jsx(Control, { children: content });
     }
     if (ownField) {
@@ -9522,7 +9576,7 @@ const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, me
     }), [name, groupActive, currentValue, handleChange]);
     const radiosElement = (jsx("div", { className: wrapperClass, role: "radiogroup", "aria-labelledby": ariaLabelledBy, ...rest, children: jsx(RadiosProvider, { value: ctx, children: children }) }));
     let content = radiosElement;
-    if (!insideControl) {
+    if (rendersOwnControl('Radios', { insideControl })) {
         content = jsx(Control, { children: content });
     }
     if (ownField) {
@@ -10056,7 +10110,7 @@ const Slider = forwardRef((props, ref) => {
                         '--slider-output-arrow-offset': `calc(50% - ${nudgeXHigh}px)`,
                     }, children: formatValue(currentRange[1]) })), renderTicks()] }));
     let content = sliderElement;
-    if (!insideControl) {
+    if (rendersOwnControl('Slider', { insideControl })) {
         content = jsx(Control, { children: content });
     }
     if (ownField) {
@@ -10087,7 +10141,11 @@ const Numberinput = forwardRef(({
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue, min, max, step = 1, size, color, inputColor, controlsPosition = 'both', controlsRounded = false, compact = false, bare, variant = 'plusminus', disabled = false, editable = true, isLoading = false, exponential = false, onChange, className, ...props }, ref) => {
     const insideField = useInsideField();
-    const effectiveBare = bare ?? insideField;
+    // Bare controls join their parent's row, which a `.control` does not lay
+    // out. `useInsideControl()` is true anywhere below a `Control`, even past
+    // a `Field` nested in it, so there they keep their own row as well.
+    const insideControl = useInsideControl();
+    const effectiveBare = bare ?? (insideField && !insideControl);
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const [internalValue, setInternalValue] = useState(defaultValue);
     const inputRef = useRef(null);
@@ -10500,7 +10558,7 @@ const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, me
     const rateCustomTextClass = usePrefixedClassNames('rate-custom-text');
     const rateElement = (jsxs("div", { ref: ref, className: combinedClasses, role: "radiogroup", "aria-label": ariaLabelledBy ? undefined : 'Rating', "aria-labelledby": ariaLabelledBy, "aria-valuenow": currentValue, "aria-valuemin": 0, "aria-valuemax": max, "aria-valuetext": ariaValueText, tabIndex: disabled ? -1 : 0, onKeyDown: handleKeyDown, ...rest, children: [jsx("div", { className: rateItemsClass, children: renderIcons() }), showScore && (jsx("span", { className: rateScoreClass, children: getScoreDisplay() })), text && jsx("span", { className: rateTextClass, children: text }), customText && (jsx("span", { className: rateCustomTextClass, children: customText })), name && (jsx("input", { type: "hidden", name: name, value: currentValue, form: form }))] }));
     let content = rateElement;
-    if (!insideControl) {
+    if (rendersOwnControl('Rate', { insideControl })) {
         content = jsx(Control, { children: content });
     }
     if (ownField) {
@@ -10739,7 +10797,11 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         [`is-${messageColor}`]: !!messageColor,
     });
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
-    const autocompleteElement = (jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxs("div", { className: controlClasses, children: [jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: placeholder, disabled: disabled, name: name, form: form, required: required, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": isActive, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), clearable && inputValue && !disabled && (jsx("span", { className: iconRightClickableClass, onClick: handleClear, role: "button", "aria-label": "Clear", children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsx("span", { className: iconRightClass, children: jsx("span", { className: loaderClass }) }))] }), isActive && (filteredData.length > 0 || empty) && (jsx("div", { className: dropdownMenuClasses, children: jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, role: "listbox", onScroll: handleDropdownScroll, children: [header && jsx("div", { className: dropdownHeaderClass, children: header }), filteredData.length > 0 ? (filteredData.map((item, index) => {
+    // The clear button gives way to a spinner at its spot: the `loading` one,
+    // or that of a loading Control this sits in.
+    const controlLoading = useControlLoading();
+    const showClear = clearable && !!inputValue && !disabled && !loading && !controlLoading;
+    const autocompleteElement = (jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxs("div", { className: controlClasses, children: [jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: placeholder, disabled: disabled, name: name, form: form, required: required, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, role: "combobox", "aria-expanded": isActive, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), showClear && (jsx("button", { type: "button", className: iconRightClickableClass, onClick: handleClear, "aria-label": "Clear", children: jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", width: "16", height: "16", "aria-hidden": "true", children: [jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsx("span", { className: iconRightClass, children: jsx("span", { className: loaderClass }) }))] }), isActive && (filteredData.length > 0 || empty) && (jsx("div", { className: dropdownMenuClasses, children: jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, role: "listbox", onScroll: handleDropdownScroll, children: [header && jsx("div", { className: dropdownHeaderClass, children: header }), filteredData.length > 0 ? (filteredData.map((item, index) => {
                             const isDisabled = typeof item !== 'string' && item.disabled;
                             const isHighlighted = index === highlightedIndex;
                             const itemClasses = prefixedClassNames(classPrefix, 'dropdown-item', {
@@ -11247,6 +11309,21 @@ fieldClassName, controlClassName,
         horizontal,
         fieldClassName,
     });
+    const ownControl = rendersOwnControl('Input', {
+        insideControl,
+        isLoading,
+        iconLeft,
+        iconLeftName,
+        iconLeftSize,
+        iconRight,
+        iconRightName,
+        iconRightSize,
+        hasIconsLeft,
+        hasIconsRight,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: inputProps.id,
@@ -11257,7 +11334,7 @@ fieldClassName, controlClassName,
         [`is-${messageColor}`]: !!messageColor,
     });
     let content = jsx(InputBase, { ref: ref, id: controlId, ...inputProps });
-    if (!insideControl) {
+    if (ownControl) {
         content = (jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
@@ -11305,6 +11382,17 @@ fieldClassName, controlClassName,
         horizontal,
         fieldClassName,
     });
+    // Not isLoading, which the select draws itself and so keeps in a Control.
+    const ownControl = rendersOwnControl('Select', {
+        insideControl,
+        iconLeft,
+        iconLeftName,
+        iconLeftSize,
+        hasIconsLeft,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: selectProps.id,
@@ -11315,7 +11403,7 @@ fieldClassName, controlClassName,
         [`is-${messageColor}`]: !!messageColor,
     });
     let content = jsx(SelectBase, { ref: ref, id: controlId, ...selectProps });
-    if (!insideControl) {
+    if (ownControl) {
         content = (jsx(Control, { iconLeft: iconLeft, iconLeftName: iconLeftName, iconLeftSize: iconLeftSize, hasIconsLeft: hasIconsLeft, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
@@ -11364,6 +11452,12 @@ fieldClassName, controlClassName,
         horizontal,
         fieldClassName,
     });
+    const ownControl = rendersOwnControl('TextArea', {
+        insideControl,
+        isLoading: controlIsLoading,
+        controlSize,
+        controlClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: textAreaProps.id,
@@ -11374,7 +11468,7 @@ fieldClassName, controlClassName,
         [`is-${messageColor}`]: !!messageColor,
     });
     let content = jsx(TextAreaBase, { ref: ref, id: controlId, ...textAreaProps });
-    if (!insideControl) {
+    if (ownControl) {
         content = (jsx(Control, { isLoading: controlIsLoading, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
@@ -11393,6 +11487,9 @@ const DEFAULT_PICKER_LABELS = {
     chooseDate: 'Choose date',
     chooseMonth: 'Choose month',
     chooseYear: 'Choose year',
+    rangeStart: 'Start date',
+    rangeEnd: 'End date',
+    rangePreviewEnd: 'Choose as end date',
     hours: 'hours',
     minutes: 'minutes',
     seconds: 'seconds',
@@ -11545,6 +11642,43 @@ function isPeriodUnselectable(d, granularity, c) {
     }
     return true;
 }
+/**
+ * The most days {@link canCloseRange} walks between a range's ends, about
+ * eleven years. A span it would have to walk further is refused, so the check
+ * stays cheap enough to run on every pointer move over the calendar.
+ */
+const RANGE_WALK_LIMIT = 4000;
+/**
+ * Whether `end` can close a range that opens on `start`: it falls on `start`'s
+ * day or later, and, unless `allowDisabled`, no day between the two is one
+ * that `shouldDisableDate` or `unselectableDates` disables. Checking that
+ * walks the days between, so with either rule set and `allowDisabled` off,
+ * an `end` more than {@link RANGE_WALK_LIMIT} days after `start` is refused.
+ * The ends' own constraints, `min` and `max` among them, are the caller's to
+ * check. Bounds can't fall between two days inside them, so they are not
+ * walked.
+ */
+function canCloseRange(start, end, c, allowDisabled = false) {
+    const first = startOfDay(start);
+    const last = startOfDay(end).getTime();
+    if (last < first.getTime())
+        return false;
+    if (allowDisabled)
+        return true;
+    const blocks = {
+        shouldDisableDate: c.shouldDisableDate,
+        unselectableDates: c.unselectableDates,
+    };
+    if (!blocks.shouldDisableDate && !blocks.unselectableDates?.length) {
+        return true;
+    }
+    for (let d = addDays(first, 1), walked = 1; d.getTime() < last; d = addDays(d, 1), walked++) {
+        if (walked >= RANGE_WALK_LIMIT || isDayUnselectable(d, blocks)) {
+            return false;
+        }
+    }
+    return true;
+}
 function addDays(d, n) {
     const r = new Date(d);
     r.setDate(r.getDate() + n);
@@ -12005,11 +12139,34 @@ function nearestEnabled(i, disabled) {
     }
     return i;
 }
+/** The long, spoken form of a date in a range's announcement. */
+const LONG_DATE = {
+    year: 'numeric',
+    month: 'long',
+    day: 'numeric',
+};
+/** A range's pending start: its start, when it has no end. */
+const pendingStartOf = (range) => range?.[0] && !range[1] ? startOfDay(range[0]) : null;
 /**
- * The year list's keyboard when it is the selection surface: arrows move a
- * year or a row, Home/End go to the list's ends. Returns the year to start
- * from and the direction to search past disabled years, or `null` for a key
- * the list doesn't handle.
+ * The day grid's cells in rows of a week. A grid owns rows and rows own
+ * cells, so assistive technology can walk the grid, and the selection it
+ * reports, row by row.
+ */
+const inWeeks = (days, className) => {
+    const rows = [];
+    for (let i = 0; i < days.length; i += 7) {
+        rows.push(jsx("div", { role: "row", className: className, children: days.slice(i, i + 7) }, i));
+    }
+    return rows;
+};
+/** A date's time, or `null` for none, for comparing ranges by value. */
+const timeOf = (d) => d ? d.getTime() : null;
+/**
+ * The year list's keyboard, as the selection surface and as navigation:
+ * arrows move a year or a row, Home/End go to the list's ends. Returns the
+ * year to start from and the direction to search past disabled years, or
+ * `null` for a key the list doesn't handle. As navigation no year is
+ * disabled, so only the year is used.
  */
 function yearStep(key, focusedYear, years) {
     switch (key) {
@@ -12029,7 +12186,7 @@ function yearStep(key, focusedYear, years) {
             return null;
     }
 }
-const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minProp, max, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, locale, dayNames, monthNames, nearbyMonthDays = true, color, size, className, id, autoFocusCell = false, labels, yearsRange, granularity = 'day', }) => {
+const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minProp, max, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, locale, dayNames, monthNames, nearbyMonthDays = true, color, size, className, id, autoFocusCell = false, labels, yearsRange, granularity = 'day', range, onRangeSelect, allowDisabledInRange = false, }) => {
     const gridRef = useRef(null);
     const monthGridRef = useRef(null);
     const yearGridRef = useRef(null);
@@ -12086,6 +12243,80 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
         const i = nearestEnabled(focusedDate.getDate() - 1, days.map(isDateUnselectable));
         return days[i];
     }, [cells, focusedDate, isDateUnselectable]);
+    // ----- Range mode -----
+    // Range props come only with the day grid.
+    const rangeMode = !!range;
+    const valuePending = pendingStartOf(range);
+    // The start of a range being picked, which nothing outside the calendar
+    // sees until its end is picked too. It starts as the range's own pending
+    // start, and starts there again whenever the range changes from outside.
+    const [anchor, setAnchor] = useState(valuePending);
+    const rangeKey = `${timeOf(range?.[0])}|${timeOf(range?.[1])}`;
+    const [anchorRangeKey, setAnchorRangeKey] = useState(rangeKey);
+    if (anchorRangeKey !== rangeKey) {
+        setAnchorRangeKey(rangeKey);
+        setAnchor(valuePending);
+    }
+    // The day under the pointer while a start is pending, which the preview
+    // runs to ahead of the focused day.
+    const [hoverDate, setHoverDate] = useState(null);
+    // Whether `day` can end a range that starts on `start`. The start is
+    // checked as well as the end: one the range brought, or one picked before
+    // the bounds or the disabled days changed, can rule itself out.
+    const canEndAt = useCallback((start, day) => !isDateUnselectable(start) &&
+        !isDateUnselectable(day) &&
+        canCloseRange(start, day, { shouldDisableDate, unselectableDates }, allowDisabledInRange), [
+        isDateUnselectable,
+        shouldDisableDate,
+        unselectableDates,
+        allowDisabledInRange,
+    ]);
+    // A pick in range mode: the end of the pending range when it can be one,
+    // and otherwise the start of a new one.
+    const pickRangeDay = useCallback((picked) => {
+        const day = startOfDay(picked);
+        // The pointer is on the picked day, which the focused day now is too.
+        setHoverDate(null);
+        if (anchor && canEndAt(anchor, day)) {
+            setAnchor(null);
+            onRangeSelect?.(anchor, day);
+        }
+        else {
+            setAnchor(day);
+        }
+    }, [anchor, canEndAt, onRangeSelect]);
+    // What the grid shows: while a start is pending, the range from it to the
+    // hovered or focused day, when that day can end it; otherwise the
+    // committed range.
+    let shownStart;
+    let shownEnd;
+    if (anchor) {
+        shownStart = anchor;
+        const previewEnd = startOfDay(hoverDate ?? focusedDate);
+        shownEnd = canEndAt(anchor, previewEnd) ? previewEnd : null;
+    }
+    else {
+        shownStart = range?.[0] ? startOfDay(range[0]) : null;
+        shownEnd = range?.[1] ? startOfDay(range[1]) : null;
+    }
+    const previewing = !!anchor;
+    // Ids for the words that name a range's ends and state the whole range.
+    const reactId = useId();
+    const rangeIdBase = id ?? `calendar-${reactId}`;
+    const rangeStartId = `${rangeIdBase}-range-start`;
+    const rangeEndId = `${rangeIdBase}-range-end`;
+    const rangePreviewEndId = `${rangeIdBase}-range-preview-end`;
+    const rangeSummaryId = `${rangeIdBase}-range-summary`;
+    // The selection in words: the pending start alone, or the committed ends.
+    const selectedEnd = previewing ? null : shownEnd;
+    const rangeSummary = [
+        shownStart &&
+            `${t.rangeStart}: ${formatDate(shownStart, LONG_DATE, locale)}`,
+        selectedEnd &&
+            `${t.rangeEnd}: ${formatDate(selectedEnd, LONG_DATE, locale)}`,
+    ]
+        .filter(Boolean)
+        .join(', ');
     // Whether the grid on show holds focus, or held it last before focus went
     // nowhere: the cell that had it left the page or became disabled. A blur
     // that takes focus out of the grid, to nowhere included, is the user
@@ -12123,6 +12354,8 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
         }
     }, [min, max, isDateUnselectable, onFocusedDateChange]);
     const handleKeyDown = useCallback((e) => {
+        // A key takes the range preview back from the pointer.
+        setHoverDate(null);
         switch (e.key) {
             case 'ArrowLeft':
                 e.preventDefault();
@@ -12165,11 +12398,35 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
             case 'Enter':
             case ' ':
                 e.preventDefault();
-                if (!isDateUnselectable(focusedDate))
-                    onSelect(focusedDate);
+                if (isDateUnselectable(focusedDate))
+                    break;
+                if (rangeMode)
+                    pickRangeDay(focusedDate);
+                else
+                    onSelect?.(focusedDate);
+                break;
+            case 'Escape':
+                // A pending pick is taken back, and the key stops there so a
+                // popover around the calendar stays open. The range's own pending
+                // start is no pick, so Escape goes on to close the popover.
+                if (anchor && !(valuePending && isSameDay(anchor, valuePending))) {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    setAnchor(valuePending);
+                }
                 break;
         }
-    }, [focusedDate, firstDayOfWeek, isDateUnselectable, moveFocus, onSelect]);
+    }, [
+        focusedDate,
+        firstDayOfWeek,
+        isDateUnselectable,
+        moveFocus,
+        onSelect,
+        rangeMode,
+        pickRangeDay,
+        anchor,
+        valuePending,
+    ]);
     // The month grid's counterpart to `moveFocus`: step by `direction` months
     // until a month with a selectable day turns up, stopping at the min/max
     // months. The cap guards against a range with nothing selectable.
@@ -12192,7 +12449,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
         if (e.key === 'Enter' || e.key === ' ') {
             e.preventDefault();
             if (!isMonthUnselectable(focusedDate)) {
-                onSelect(startOfMonth(focusedDate));
+                onSelect?.(startOfMonth(focusedDate));
             }
             return;
         }
@@ -12218,6 +12475,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
     const dayNamesRowClass = usePrefixedClassNames('dateinput-day-names');
     const dayNameClass = usePrefixedClassNames('dateinput-day-name');
     const gridClass = usePrefixedClassNames('dateinput-grid');
+    const weekClass = usePrefixedClassNames('dateinput-week');
     const monthsGridClass = usePrefixedClassNames('dateinput-months-grid');
     const monthsRowClass = usePrefixedClassNames('dateinput-months-row');
     const yearsGridClass = usePrefixedClassNames('dateinput-years-grid');
@@ -12270,8 +12528,8 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
     // year is disabled the stop moves to the nearest enabled year in the list,
     // and focusing it makes it the focused year. As the selection surface a
     // year outside a non-empty list starts from the end it fell past, so the
-    // list keeps a stop. As navigation the stop marks the current year, so a
-    // year outside the list marks no option.
+    // list keeps a stop. As navigation it marks the current year, so a year
+    // outside the list marks no option, and the stop itself follows focus.
     const tabStopYear = useMemo(() => {
         let i = yearList.indexOf(focusedYear);
         if (i < 0) {
@@ -12281,6 +12539,12 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
         }
         return yearList[nearestEnabled(i, yearList.map(y => disabledYears.has(y)))];
     }, [yearList, focusedYear, disabledYears, isYearGranularity]);
+    // As navigation the keys move focus and leave the focused year alone, so
+    // the tab stop goes to the year that last had focus while it is listed,
+    // and Tab leaves the list rather than landing on the current year. It
+    // starts over each time the list opens.
+    const [navYear, setNavYear] = useState(null);
+    const listTabStop = navYear !== null && yearList.includes(navYear) ? navYear : tabStopYear;
     // Which of the focused year's months have no selectable day.
     const disabledMonths = useMemo(() => granularity === 'month'
         ? Array.from({ length: 12 }, (_, m) => isMonthUnselectable(makeDate(focusedYear, m)))
@@ -12301,7 +12565,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
     // pick and `onSelect` gets the year's first day.
     const handleYearPick = useCallback((year) => {
         onFocusedDateChange(clampDate(makeDate(year), min, max));
-        onSelect(makeDate(year));
+        onSelect?.(makeDate(year));
     }, [min, max, onFocusedDateChange, onSelect]);
     // Step through the listed years from `year` by `direction`, skipping
     // disabled ones, and focus the first selectable year found.
@@ -12316,19 +12580,39 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
         }
     }, [yearList, disabledYears, onFocusedDateChange, min, max]);
     const handleYearListKeyDown = useCallback((e) => {
-        if (!isYearGranularity) {
-            // As navigation, Escape returns to the grid the list was opened from.
-            if (e.key === 'Escape') {
-                e.preventDefault();
-                setView(baseView);
-            }
+        if (isYearGranularity) {
+            const step = yearStep(e.key, focusedYear, yearList);
+            if (!step)
+                return;
+            e.preventDefault();
+            moveYearFocus(step[0], step[1]);
             return;
         }
-        const step = yearStep(e.key, focusedYear, yearList);
+        // As navigation, Escape returns to the grid the list was opened from.
+        // It stops there, so a popover around the calendar stays open and only
+        // a second Escape closes it.
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            e.stopPropagation();
+            setView(baseView);
+            return;
+        }
+        // The other keys move DOM focus from the year that has it and leave
+        // the focused date alone. The list is centred on that date, so moving
+        // it would reflow the list under the keyboard, and it would turn the
+        // grid behind the list before anything is picked. Enter or Space
+        // clicks the year with focus, which picks it.
+        const options = Array.from(e.currentTarget.querySelectorAll('[role="option"]'));
+        const from = options.indexOf(e.target);
+        if (from < 0)
+            return;
+        const step = yearStep(e.key, yearList[from], yearList);
         if (!step)
             return;
         e.preventDefault();
-        moveYearFocus(step[0], step[1]);
+        // The listed years run one apart, so a year's index is its distance
+        // from the first. A step past either end finds no option.
+        options[step[0] - yearList[0]]?.focus();
     }, [isYearGranularity, baseView, focusedYear, yearList, moveYearFocus]);
     // The day or month grid takes focus as the popover opens on it, or comes
     // back to it from the year list.
@@ -12399,32 +12683,72 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
         list.querySelector('[data-focused-year="true"]')?.focus();
     }, [isYearGranularity, focusedYear]);
     const navArrow = (d) => (jsx("svg", { viewBox: "0 0 16 16", width: "14", height: "14", "aria-hidden": "true", children: jsx("path", { d: d, fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) }));
-    return (jsxs("div", { className: classNames(calendarClass, className), id: id, children: [jsxs("div", { className: headerClass, children: [isYearGranularity ? (jsx("span", { className: monthLabelClass, id: labelId, children: monthLabel })) : (jsxs("button", { type: "button", className: monthTriggerClass, "aria-haspopup": "listbox", "aria-expanded": view === 'years', onClick: () => setView(v => (v === 'years' ? baseView : 'years')), children: [jsx("span", { className: monthLabelClass, id: labelId, "aria-live": "polite", children: monthLabel }), jsx("svg", { className: monthCaretClass, viewBox: "0 0 12 12", width: "10", height: "10", "aria-hidden": "true", children: jsx("path", { d: "M2 4l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isYearGranularity && (jsxs("div", { className: navGroupClass, children: [jsx("button", { type: "button", className: navPrevClass, "aria-label": isDayGranularity ? t.prevMonth : t.prevYear, disabled: prevDisabled || view !== baseView, onClick: () => onFocusedDateChange(prevAnchor), children: navArrow('M10 3l-5 5 5 5') }), jsx("button", { type: "button", className: navNextClass, "aria-label": isDayGranularity ? t.nextMonth : t.nextYear, disabled: nextDisabled || view !== baseView, onClick: () => onFocusedDateChange(nextAnchor), children: navArrow('M6 3l5 5-5 5') })] }))] }), view === 'days' && (jsxs(Fragment, { children: [jsx("div", { className: dayNamesRowClass, "aria-hidden": "true", children: computedDayNames.map((name, i) => (jsx("div", { className: dayNameClass, children: name }, i))) }), jsx("div", { ref: gridRef, role: "grid", "aria-labelledby": labelId, className: gridClass, onKeyDown: handleKeyDown, ...gridFocusHandlers, children: cells.map(cell => {
+    return (jsxs("div", { className: classNames(calendarClass, className), id: id, children: [jsxs("div", { className: headerClass, children: [isYearGranularity ? (jsx("span", { className: monthLabelClass, id: labelId, children: monthLabel })) : (jsxs("button", { type: "button", className: monthTriggerClass, "aria-haspopup": "listbox", "aria-expanded": view === 'years', onClick: () => {
+                            setNavYear(null);
+                            setView(v => (v === 'years' ? baseView : 'years'));
+                        }, children: [jsx("span", { className: monthLabelClass, id: labelId, "aria-live": "polite", children: monthLabel }), jsx("svg", { className: monthCaretClass, viewBox: "0 0 12 12", width: "10", height: "10", "aria-hidden": "true", children: jsx("path", { d: "M2 4l4 4 4-4", fill: "none", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }) })] })), !isYearGranularity && (jsxs("div", { className: navGroupClass, children: [jsx("button", { type: "button", className: navPrevClass, "aria-label": isDayGranularity ? t.prevMonth : t.prevYear, disabled: prevDisabled || view !== baseView, onClick: () => onFocusedDateChange(prevAnchor), children: navArrow('M10 3l-5 5 5 5') }), jsx("button", { type: "button", className: navNextClass, "aria-label": isDayGranularity ? t.nextMonth : t.nextYear, disabled: nextDisabled || view !== baseView, onClick: () => onFocusedDateChange(nextAnchor), children: navArrow('M6 3l5 5-5 5') })] }))] }), view === 'days' && (jsxs(Fragment, { children: [jsx("div", { className: dayNamesRowClass, "aria-hidden": "true", children: computedDayNames.map((name, i) => (jsx("div", { className: dayNameClass, children: name }, i))) }), jsx("div", { ref: gridRef, role: "grid", "aria-labelledby": labelId, "aria-multiselectable": rangeMode || undefined, "aria-describedby": rangeMode ? rangeSummaryId : undefined, className: gridClass, onKeyDown: handleKeyDown, onMouseLeave: anchor ? () => setHoverDate(null) : undefined, ...gridFocusHandlers, children: inWeeks(cells.map(cell => {
                             const disabled = isDateUnselectable(cell.date);
-                            const isSelected = !!value && isSameDay(value, cell.date);
+                            const time = cell.date.getTime();
+                            // Range mode. The range on show has its ends filled. Every day
+                            // of a committed range is selected, and of a preview only the
+                            // start.
+                            const isStart = time === timeOf(shownStart);
+                            const isEnd = time === timeOf(shownEnd);
+                            const inRange = !!shownStart &&
+                                !!shownEnd &&
+                                time > shownStart.getTime() &&
+                                time < shownEnd.getTime();
+                            // The day a pending range would end on, which isn't picked
+                            // yet, so its description says what picking it does.
+                            const isPreviewEnd = previewing && isEnd && !isStart;
+                            const isPreview = (previewing && inRange) || isPreviewEnd;
+                            const isFilled = rangeMode
+                                ? isStart || (isEnd && !previewing)
+                                : !!value && isSameDay(value, cell.date);
+                            const isSelected = isFilled || (rangeMode && !previewing && inRange);
+                            const describedBy = rangeMode
+                                ? [
+                                    isStart && rangeStartId,
+                                    isEnd && !previewing && rangeEndId,
+                                    isPreviewEnd && rangePreviewEndId,
+                                ]
+                                    .filter(Boolean)
+                                    .join(' ') || undefined
+                                : undefined;
                             const isFocused = isSameDay(cell.date, tabStopDay);
                             const otherMonth = !cell.inCurrentMonth;
                             const cellClass = prefixedClassNames(classPrefix, 'dateinput-cell', {
-                                'is-selected': isSelected,
+                                'is-selected': isFilled,
+                                'is-range-start': isStart,
+                                'is-range-end': isEnd,
+                                'is-in-range': inRange,
+                                'is-preview': isPreview,
                                 'is-today': cell.isToday,
                                 'is-disabled': disabled,
                                 'is-other-month': otherMonth,
                             });
                             const display = !otherMonth || nearbyMonthDays;
-                            return (jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": cell.isToday ? 'date' : undefined, "data-focused": isFocused ? 'true' : undefined, disabled: disabled || !display, className: cellClass, onFocus: () => {
+                            return (jsx("button", { type: "button", role: "gridcell", tabIndex: isFocused ? 0 : -1, "aria-selected": isSelected, "aria-disabled": disabled, "aria-current": cell.isToday ? 'date' : undefined, "aria-describedby": describedBy, "data-focused": isFocused ? 'true' : undefined, disabled: disabled || !display, className: cellClass, onFocus: () => {
                                     // Reached by Tab while the focused day is disabled, or
                                     // by pointer: keys move on from here. A nearby month's
                                     // day waits for its click, which turns the grid.
                                     if (!otherMonth && !isSameDay(cell.date, focusedDate)) {
                                         onFocusedDateChange(cell.date);
                                     }
-                                }, onClick: () => {
+                                }, 
+                                // Mouseover rather than mouseenter: browsers send it to a
+                                // disabled day as well, where React holds mouseenter back,
+                                // so the preview leaves the last enabled day behind.
+                                onMouseOver: anchor ? () => setHoverDate(cell.date) : undefined, onClick: () => {
                                     if (disabled)
                                         return;
                                     onFocusedDateChange(cell.date);
-                                    onSelect(cell.date);
+                                    if (rangeMode)
+                                        pickRangeDay(cell.date);
+                                    else
+                                        onSelect?.(cell.date);
                                 }, style: !display ? { visibility: 'hidden' } : undefined, children: cell.date.getDate() }, cell.date.toISOString()));
-                        }) })] })), view === 'months' && (jsx("div", { ref: monthGridRef, role: "grid", "aria-labelledby": labelId, className: monthsGridClass, onKeyDown: handleMonthKeyDown, ...gridFocusHandlers, children: MONTH_ROWS.map(row => (jsx("div", { role: "row", className: monthsRowClass, children: row.map(month => {
+                        }), weekClass) })] })), view === 'months' && (jsx("div", { ref: monthGridRef, role: "grid", "aria-labelledby": labelId, className: monthsGridClass, onKeyDown: handleMonthKeyDown, ...gridFocusHandlers, children: MONTH_ROWS.map(row => (jsx("div", { role: "row", className: monthsRowClass, children: row.map(month => {
                         const date = makeDate(focusedYear, month);
                         const disabled = disabledMonths[month];
                         const isSelected = !!value && isSameMonth(value, date);
@@ -12443,7 +12767,7 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
                                 }
                             }, onClick: () => {
                                 onFocusedDateChange(clampDate(date, min, max));
-                                onSelect(date);
+                                onSelect?.(date);
                             }, children: monthCellNames[month] }, month));
                     }) }, row[0]))) })), view === 'years' && (jsx("div", { ref: yearGridRef, className: yearsGridClass, role: "listbox", "aria-label": isYearGranularity ? t.chooseYear : monthLabel, onKeyDown: handleYearListKeyDown, children: yearList.map(year => {
                     const isFocused = year === tabStopYear;
@@ -12459,16 +12783,22 @@ const Calendar = ({ value, focusedDate, onSelect, onFocusedDateChange, min: minP
                         'is-today': isToday,
                         'is-disabled': disabled,
                     });
-                    return (jsx("button", { type: "button", role: "option", "aria-selected": isSelected, "aria-disabled": isYearGranularity ? disabled : undefined, "aria-current": isYearGranularity && isToday ? 'date' : undefined, "data-focused-year": isFocused ? 'true' : undefined, tabIndex: isFocused ? 0 : -1, disabled: disabled, className: cellCls, onFocus: () => {
-                            // Reached by Tab while the focused year is disabled, or by
-                            // pointer: keys move on from here.
-                            if (isYearGranularity && year !== focusedYear) {
+                    return (jsx("button", { type: "button", role: "option", "aria-selected": isSelected, "aria-disabled": isYearGranularity ? disabled : undefined, "aria-current": isYearGranularity && isToday ? 'date' : undefined, "data-focused-year": isFocused ? 'true' : undefined, tabIndex: year === listTabStop ? 0 : -1, disabled: disabled, className: cellCls, onFocus: () => {
+                            // As navigation, focusing a year by key or pointer only
+                            // moves the tab stop: nothing is committed until a year is
+                            // picked. As the selection surface it is reached by Tab
+                            // while the focused year is disabled, or by pointer, and
+                            // keys move on from here.
+                            if (!isYearGranularity) {
+                                setNavYear(year);
+                            }
+                            else if (year !== focusedYear) {
                                 onFocusedDateChange(clampDate(makeDate(year), min, max));
                             }
                         }, onClick: () => isYearGranularity
                             ? handleYearPick(year)
                             : handleYearSelect(year), children: year }, year));
-                }) }))] }));
+                }) })), rangeMode && (jsxs(Fragment, { children: [jsx("span", { id: rangeStartId, hidden: true, children: t.rangeStart }), jsx("span", { id: rangeEndId, hidden: true, children: t.rangeEnd }), jsx("span", { id: rangePreviewEndId, hidden: true, children: t.rangePreviewEnd }), jsx("div", { id: rangeSummaryId, "aria-live": "polite", style: visuallyHidden, children: rangeSummary })] }))] }));
 };
 Calendar.displayName = 'Calendar';
 
@@ -13608,7 +13938,8 @@ DateInputBase.displayName = 'DateInputBase';
  *   shouldDisableDate={d => d.getDay() === 0 || d.getDay() === 6}
  * />
  */
-const DateInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
+const DateInput = forwardRef((props, ref) => {
+    const { label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps } = props;
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('DateInput', {
@@ -13619,6 +13950,27 @@ const DateInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLe
         horizontal,
         fieldClassName,
     });
+    // Inline mode renders a bare calendar with no input, so the Control's
+    // icon-left container has nothing to anchor to, and it renders no
+    // Control inside one or out. The left icon is checked as the caller
+    // passed it: the default glyph is this component's own choice, not a
+    // prop the caller set.
+    const ownControl = rendersOwnControl('DateInput', {
+        insideControl,
+        inline: baseProps.inline,
+        isLoading,
+        iconLeft,
+        iconLeftName: props.iconLeftName,
+        iconLeftSize,
+        iconRight,
+        iconRightName,
+        iconRightSize,
+        hasIconsLeft,
+        hasIconsRight,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: baseProps.id,
@@ -13632,9 +13984,7 @@ const DateInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLe
     // The base hides its launcher while the Control it sits in is loading,
     // whether that is the one rendered below or an enclosing one.
     let content = (jsx(DateInputBase, { ref: ref, id: controlId, ...baseProps }));
-    // Inline mode renders a bare calendar with no input, so the Control's
-    // icon-left container has nothing to anchor to. Skip the Control wrap.
-    if (!insideControl && !baseProps.inline) {
+    if (ownControl) {
         content = (jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
@@ -14716,7 +15066,8 @@ TimeInputBase.displayName = 'TimeInputBase';
  * @example
  * <TimeInput label="Slot" hourFormat="12" incrementMinutes={15} />
  */
-const TimeInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'clock', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
+const TimeInput = forwardRef((props, ref) => {
+    const { label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'clock', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps } = props;
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('TimeInput', {
@@ -14727,6 +15078,27 @@ const TimeInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLe
         horizontal,
         fieldClassName,
     });
+    // Inline mode renders a bare panel with no input, so the Control's
+    // icon-left container has nothing to anchor to, and it renders no
+    // Control inside one or out. The left icon is checked as the caller
+    // passed it: the default glyph is this component's own choice, not a
+    // prop the caller set.
+    const ownControl = rendersOwnControl('TimeInput', {
+        insideControl,
+        inline: baseProps.inline,
+        isLoading,
+        iconLeft,
+        iconLeftName: props.iconLeftName,
+        iconLeftSize,
+        iconRight,
+        iconRightName,
+        iconRightSize,
+        hasIconsLeft,
+        hasIconsRight,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: baseProps.id,
@@ -14740,9 +15112,7 @@ const TimeInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLe
     // The base hides its launcher while the Control it sits in is loading,
     // whether that is the one rendered below or an enclosing one.
     let content = (jsx(TimeInputBase, { ref: ref, id: controlId, ...baseProps }));
-    // Inline mode renders a bare panel with no input, so the Control's
-    // icon-left container has nothing to anchor to. Skip the Control wrap.
-    if (!insideControl && !baseProps.inline) {
+    if (ownControl) {
         content = (jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;
@@ -15037,7 +15407,8 @@ DateTimeInputBase.displayName = 'DateTimeInputBase';
  *   shouldDisableDate={d => d.getDay() === 0 || d.getDay() === 6}
  * />
  */
-const DateTimeInput = forwardRef(({ label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar-alt', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps }, ref) => {
+const DateTimeInput = forwardRef((props, ref) => {
+    const { label, labelSize, labelProps, horizontal, iconLeft, iconRight, iconLeftName = 'calendar-alt', iconRightName, iconLeftSize, iconRightSize, hasIconsLeft, hasIconsRight, isLoading, isExpanded, controlSize, message, messageColor, fieldClassName, controlClassName, ...baseProps } = props;
     const insideField = useInsideField();
     const insideControl = useInsideControl();
     const ownField = rendersOwnField('DateTimeInput', {
@@ -15048,6 +15419,27 @@ const DateTimeInput = forwardRef(({ label, labelSize, labelProps, horizontal, ic
         horizontal,
         fieldClassName,
     });
+    // Inline mode renders a bare picker with no input, so the Control's
+    // icon-left container has nothing to anchor to, and it renders no
+    // Control inside one or out. The left icon is checked as the caller
+    // passed it: the default glyph is this component's own choice, not a
+    // prop the caller set.
+    const ownControl = rendersOwnControl('DateTimeInput', {
+        insideControl,
+        inline: baseProps.inline,
+        isLoading,
+        iconLeft,
+        iconLeftName: props.iconLeftName,
+        iconLeftSize,
+        iconRight,
+        iconRightName,
+        iconRightSize,
+        hasIconsLeft,
+        hasIconsRight,
+        isExpanded,
+        controlSize,
+        controlClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: baseProps.id,
@@ -15061,9 +15453,7 @@ const DateTimeInput = forwardRef(({ label, labelSize, labelProps, horizontal, ic
     // The base hides its launcher while the Control it sits in is loading,
     // whether that is the one rendered below or an enclosing one.
     let content = (jsx(DateTimeInputBase, { ref: ref, id: controlId, ...baseProps }));
-    // Inline mode renders a bare picker with no input, so the Control's
-    // icon-left container has nothing to anchor to. Skip the Control wrap.
-    if (!insideControl && !baseProps.inline) {
+    if (ownControl) {
         content = (jsx(Control, { iconLeft: iconLeft, iconRight: iconRight, iconLeftName: iconLeftName, iconRightName: iconRightName, iconLeftSize: iconLeftSize, iconRightSize: iconRightSize, hasIconsLeft: hasIconsLeft || !!iconLeftName, hasIconsRight: hasIconsRight, isLoading: isLoading, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
     const messageEl = message ? jsx("p", { className: helpClass, children: message }) : null;