@allxsmith/bestax-bulma 5.26.4 → 5.26.5

package/dist/index.esm.js

@@ -8819,6 +8819,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 +9005,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 +9335,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 +9575,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 +10109,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) {
@@ -10500,7 +10553,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 +10792,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 +11304,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 +11329,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 +11377,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 +11398,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 +11447,12 @@ fieldClassName, controlClassName,
         horizontal,
         fieldClassName,
     });
+    const ownControl = rendersOwnControl('TextArea', {
+        insideControl,
+        isLoading: controlIsLoading,
+        controlSize,
+        controlClassName,
+    });
     const { controlId, fieldLabelProps } = useAutoLabelId({
         label,
         id: textAreaProps.id,
@@ -11374,7 +11463,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;
@@ -12006,10 +12095,11 @@ function nearestEnabled(i, disabled) {
     return i;
 }
 /**
- * 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 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) {
@@ -12270,8 +12360,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 +12371,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)))
@@ -12316,19 +12412,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,7 +12515,10 @@ 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, className: gridClass, onKeyDown: handleKeyDown, ...gridFocusHandlers, children: cells.map(cell => {
                             const disabled = isDateUnselectable(cell.date);
                             const isSelected = !!value && isSameDay(value, cell.date);
                             const isFocused = isSameDay(cell.date, tabStopDay);
@@ -12459,10 +12578,16 @@ 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
@@ -13608,7 +13733,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 +13745,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 +13779,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 +14861,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 +14873,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 +14907,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 +15202,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 +15214,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 +15248,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;