@allxsmith/bestax-bulma 5.27.1 → 5.27.2

package/dist/index.cjs

@@ -9068,12 +9068,36 @@ const FieldLabelIdContext = React.createContext(undefined);
  * The id a labeled Field wants its single composed control to adopt (#495).
  * `undefined` outside a Field, in unlabeled/grouped/addons Fields, or when the
  * user took over the association with an explicit `labelProps.htmlFor`.
- * Consumed only by the single-control bases (InputBase, SelectBase,
- * TextAreaBase). Internal; not part of the public API.
+ * Consumed by the single-control bases (InputBase, SelectBase, TextAreaBase)
+ * and, through `useAutoLabelId`, by the convenience inputs that render an
+ * input of their own (#939). Internal; not part of the public API.
  */
 const useFieldLabelId = () => React.useContext(FieldLabelIdContext);
 /** Provider for the Field label-target id — used internally by Field. */
 const FieldLabelIdProvider = FieldLabelIdContext.Provider;
+const FieldLabelElementIdContext = React.createContext(undefined);
+/**
+ * The id of a labeled Field's own `<label>`, for a group control (Radios,
+ * Checkboxes, Rate, DateRangeInput) to point `aria-labelledby` at, since a group cannot take
+ * the label's `htmlFor` (#939). Set under the same conditions as
+ * {@link useFieldLabelId}. Consumed through `useAutoLabelledBy`.
+ * Internal; not part of the public API.
+ */
+const useFieldLabelElementId = () => React.useContext(FieldLabelElementIdContext);
+/** Provider for the Field label's own id, used internally by Field. */
+const FieldLabelElementIdProvider = FieldLabelElementIdContext.Provider;
+const FieldLabelForContext = React.createContext(undefined);
+/**
+ * What the nearest labeled Field's `<label>` points `htmlFor` at: the id it
+ * generated, or the caller's own `labelProps.htmlFor`. An unlabeled Field
+ * passes it through, so a control in the inner Field of a horizontal layout
+ * can tell the outer label names it. Only ever compared with a control's own
+ * id, never adopted, so it hands out no id. Internal; not part of the public
+ * API.
+ */
+const useFieldLabelFor = () => React.useContext(FieldLabelForContext);
+/** Provider for the Field label's `htmlFor` target, used internally by Field. */
+const FieldLabelForProvider = FieldLabelForContext.Provider;
 const RadiosContext = React.createContext(undefined);
 const CheckboxesContext = React.createContext(undefined);
 /**
@@ -9374,13 +9398,27 @@ const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSi
     const targetId = label && !userWiredLabel && !grouped && !hasAddons
         ? generatedId
         : undefined;
+    // A group control (Radios, Checkboxes, Rate, DateRangeInput) cannot take
+    // that `for`, so it points `aria-labelledby` at the label itself (#939).
+    // The label gets an id whenever the association is on, unless the caller
+    // gave it one.
+    const labelId = labelProps?.id ?? (targetId ? `${targetId}-label` : undefined);
+    // What the rendered label's `for` points at, generated or the caller's, so
+    // a control can tell when a label wired by hand names it. An unlabeled
+    // Field passes on its parent's.
+    const inheritedLabelFor = useFieldLabelFor();
+    const labelFor = label
+        ? userWiredLabel
+            ? labelProps.htmlFor
+            : targetId
+        : inheritedLabelFor;
     let renderedLabel = null;
     if (label) {
         if (horizontal) {
-            renderedLabel = (jsxRuntime.jsx(FieldLabel, { size: effectiveLabelSize, children: jsxRuntime.jsx("label", { htmlFor: targetId, ...labelProps, className: classNames(labelClass, labelProps?.className), style: labelProps?.style, children: label }) }));
+            renderedLabel = (jsxRuntime.jsx(FieldLabel, { size: effectiveLabelSize, children: jsxRuntime.jsx("label", { htmlFor: targetId, ...labelProps, id: labelId, className: classNames(labelClass, labelProps?.className), style: labelProps?.style, children: label }) }));
         }
         else {
-            renderedLabel = (jsxRuntime.jsx("label", { htmlFor: targetId, ...labelProps, className: classNames(labelClass, labelProps?.className), style: { display: 'block', ...(labelProps?.style || {}) }, children: label }));
+            renderedLabel = (jsxRuntime.jsx("label", { htmlFor: targetId, ...labelProps, id: labelId, className: classNames(labelClass, labelProps?.className), style: { display: 'block', ...(labelProps?.style || {}) }, children: label }));
         }
     }
     // If horizontal, wrap children in FieldBody (unless the user already provided
@@ -9403,7 +9441,7 @@ const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSi
             content = jsxRuntime.jsx(FieldBody, { children: children });
         }
     }
-    return (jsxRuntime.jsx(FieldProvider, { value: true, children: jsxRuntime.jsx(FieldLabelIdProvider, { value: targetId, children: jsxRuntime.jsxs("div", { className: fieldClass, ...rest, children: [renderedLabel, content] }) }) }));
+    return (jsxRuntime.jsx(FieldProvider, { value: true, children: jsxRuntime.jsx(FieldLabelIdProvider, { value: targetId, children: jsxRuntime.jsx(FieldLabelElementIdProvider, { value: targetId ? labelId : undefined, children: jsxRuntime.jsx(FieldLabelForProvider, { value: labelFor, children: jsxRuntime.jsxs("div", { className: fieldClass, ...rest, children: [renderedLabel, content] }) }) }) }) }));
 };
 FieldLabel.displayName = 'FieldLabel';
 FieldBody.displayName = 'FieldBody';
@@ -9419,27 +9457,42 @@ const Field = withSubComponents(FieldComponent, {
  * A user-supplied `id` is used as the target instead of the generated one, and
  * an explicit `htmlFor` key in labelProps — even set to `undefined` — disables
  * generation entirely: the user has taken over the association (#495 presence
- * semantics). Internal; not part of the public API.
+ * semantics). When the control renders no label of its own, it adopts the id
+ * a labeled Field around it offers, the way the bases do, so that Field's
+ * label names it (#939); a user `id` still wins there.
+ * Internal; not part of the public API.
  */
-function useAutoLabelId({ label, id, labelProps, rendersLabel, }) {
+function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput = true, }) {
     // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.
     const generatedId = React.useId();
+    // Read outside the control's own Field, so it is set only when an outer
+    // Field holds the control, which then renders no label of its own.
+    const fieldLabelId = useFieldLabelId();
+    // What an outer Field's label points at, even when wired by hand.
+    const fieldLabelFor = useFieldLabelFor();
     // Truthiness mirrors Field's own `if (label)` render gate.
     const active = !!label && rendersLabel;
     // Presence, not truthiness: `htmlFor: undefined` is an explicit opt-out and
     // must not leave an orphan generated id on the control.
     const userWired = !!labelProps && 'htmlFor' in labelProps;
-    const controlId = id ?? (active && !userWired ? generatedId : undefined);
+    const adopted = !active && hasInput ? fieldLabelId : undefined;
+    const controlId = id ?? (active && !userWired ? generatedId : adopted);
+    const ownLabelProps = { htmlFor: controlId, ...labelProps };
     // Inactive with a label still means an own Field may render it (pickers'
     // inline mode, Taginput at maxTags) — the explicit `htmlFor: undefined`
     // tells Field the association is owned here, so it must not generate one
     // that would dangle (#495 presence semantics).
     const fieldLabelProps = active
-        ? { htmlFor: controlId, ...labelProps }
+        ? ownLabelProps
         : label
             ? { htmlFor: undefined, ...labelProps }
             : labelProps;
-    return { controlId, fieldLabelProps };
+    const labelTarget = active ? ownLabelProps.htmlFor : fieldLabelFor;
+    return {
+        controlId,
+        fieldLabelProps,
+        labelled: !!controlId && labelTarget === controlId,
+    };
 }
 /**
  * Group-input counterpart of {@link useAutoLabelId} (#494): a group of
@@ -9448,18 +9501,36 @@ function useAutoLabelId({ label, id, labelProps, rendersLabel, }) {
  * `aria-labelledby`. A user-supplied `labelProps.id` is used as the target
  * instead of generating one. Any caller `htmlFor` is stripped — a group label
  * names the group, never a single control — so the merged labelProps always
- * carry an explicit `htmlFor: undefined`.
+ * carry an explicit `htmlFor: undefined`. When the group renders no label of
+ * its own, it points at the label of a labeled Field around it instead
+ * (#939). A caller who named the group with `aria-label` or
+ * `aria-labelledby` gets no `aria-labelledby` from either label, so their
+ * name wins wherever the label sits.
  * Internal; not part of the public API.
  */
-function useAutoLabelledBy({ label, labelProps, rendersLabel, }) {
+function useAutoLabelledBy({ label, labelProps, rendersLabel, callerProps, }) {
     // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.
     const generatedId = React.useId();
+    // Set only when an outer Field holds the group (see useAutoLabelId).
+    const fieldLabelElementId = useFieldLabelElementId();
     const active = !!label && rendersLabel;
     const labelId = labelProps?.id ?? (active ? generatedId : undefined);
     const fieldLabelProps = active
         ? { ...labelProps, id: labelId, htmlFor: undefined }
         : labelProps;
-    return { ariaLabelledBy: active ? labelId : undefined, fieldLabelProps };
+    const aria = callerProps;
+    // Presence for aria-labelledby: the caller's key replaces the attribute
+    // through the spread whatever its value, and pointing it at a label would
+    // only take a Rate's fallback name away. Checked before either label, so
+    // the caller's name wins over the group's own `label` as it does over a
+    // Field's, the way an aria-label beats a `<label for>` on a single input.
+    const callerNamed = !!aria['aria-label'] || 'aria-labelledby' in aria;
+    const ariaLabelledBy = callerNamed
+        ? undefined
+        : active
+            ? labelId
+            : fieldLabelElementId;
+    return { ariaLabelledBy, fieldLabelProps };
 }
 
 /**
@@ -9502,6 +9573,7 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
         label,
         labelProps,
         rendersLabel: ownField,
+        callerProps: props,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
@@ -9598,9 +9670,12 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         rendersLabel: ownField,
     });
     const { classPrefix } = useConfig();
+    // The input takes `controlId`, so `id` stays out of the spread, where an
+    // undefined `id` key would wipe the id the label points at.
+    const { id: _id, ...inputProps } = props;
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         color,
-        ...props,
+        ...inputProps,
     });
     // Mutually exclusive alignment
     let alignmentClass;
@@ -9772,6 +9847,7 @@ const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, me
         label,
         labelProps,
         rendersLabel: ownField,
+        callerProps: props,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
@@ -10264,7 +10340,9 @@ const Slider = React.forwardRef((props, ref) => {
     // --- Single slider ---
     const sliderElement = !range ? (jsxRuntime.jsxs("div", { ref: wrapperRef, className: combinedClasses, style: wrapperStyle, children: [jsxRuntime.jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentSingle, disabled: disabled, onChange: handleSingleChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input'), style: {
                     '--slider-progress': `${progressSingle}%`,
-                }, "aria-valuenow": currentSingle, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel, ...getAriaProps(currentSingle), id: controlId, ...rest }), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', {
+                }, "aria-valuenow": currentSingle, "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel, ...getAriaProps(currentSingle), ...rest, 
+                // After the spread: an undefined `id` key in rest would wipe it.
+                id: controlId }), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', {
                     'is-visible': showTipLow,
                     'is-flipped': flipped,
                     'is-flipped-left': isVertical && verticalFlippedLeft,
@@ -10292,7 +10370,7 @@ const Slider = React.forwardRef((props, ref) => {
                     : {
                         '--slider-progress-low': `${progressLow}%`,
                         '--slider-progress-high': `${progressHigh}%`,
-                    } }), jsxRuntime.jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentRange[0], disabled: disabled, onChange: handleRangeLowChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-low'), "aria-valuenow": currentRange[0], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[0] ?? 'Minimum value', ...getAriaProps(currentRange[0]), id: controlId, ...rest, ...(nameLow !== undefined ? { name: nameLow } : {}) }), jsxRuntime.jsx("input", { ref: inputHighRef, type: "range", min: min, max: max, step: step, value: currentRange[1], disabled: disabled, onChange: handleRangeHighChange, onMouseEnter: () => setShowTooltipHigh(true), onMouseLeave: () => setShowTooltipHigh(false), onFocus: () => setShowTooltipHigh(true), onBlur: () => setShowTooltipHigh(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-high'), "aria-valuenow": currentRange[1], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[1] ?? 'Maximum value', ...getAriaProps(currentRange[1]), name: nameHigh }), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', 'slider-output-low', {
+                    } }), jsxRuntime.jsx("input", { ref: combinedRef, type: "range", min: min, max: max, step: step, value: currentRange[0], disabled: disabled, onChange: handleRangeLowChange, onKeyDown: handleKeyDown, onMouseEnter: () => setShowTooltip(true), onMouseLeave: () => setShowTooltip(false), onFocus: () => setShowTooltip(true), onBlur: () => setShowTooltip(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-low'), "aria-valuenow": currentRange[0], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[0] ?? 'Minimum value', ...getAriaProps(currentRange[0]), ...rest, id: controlId, ...(nameLow !== undefined ? { name: nameLow } : {}) }), jsxRuntime.jsx("input", { ref: inputHighRef, type: "range", min: min, max: max, step: step, value: currentRange[1], disabled: disabled, onChange: handleRangeHighChange, onMouseEnter: () => setShowTooltipHigh(true), onMouseLeave: () => setShowTooltipHigh(false), onFocus: () => setShowTooltipHigh(true), onBlur: () => setShowTooltipHigh(false), className: prefixedClassNames(classPrefix, 'slider-input', 'slider-input-high'), "aria-valuenow": currentRange[1], "aria-valuemin": min, "aria-valuemax": max, "aria-orientation": isVertical ? 'vertical' : undefined, "aria-label": ariaLabel?.[1] ?? 'Maximum value', ...getAriaProps(currentRange[1]), name: nameHigh }), tooltipMode !== 'hidden' && (jsxRuntime.jsx("output", { ref: outputRef, className: prefixedClassNames(classPrefix, 'slider-output', 'slider-output-low', {
                     'is-visible': showTipLow,
                     'is-flipped': flipped,
                     'is-flipped-left': isVertical && verticalFlippedLeft,
@@ -10485,7 +10563,9 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         }
     };
     // Shared input element
-    const inputControl = (jsxRuntime.jsx("div", { className: expandedControlClasses, children: jsxRuntime.jsx("input", { ref: combinedRef, type: "number", className: inputClasses, value: currentValue ?? '', min: min, max: max, step: step, disabled: disabled, readOnly: !editable, onChange: handleInputChange, onKeyDown: handleKeyDown, "aria-valuenow": currentValue ?? undefined, "aria-valuemin": min, "aria-valuemax": max, id: controlId, ...rest }) }));
+    const inputControl = (jsxRuntime.jsx("div", { className: expandedControlClasses, children: jsxRuntime.jsx("input", { ref: combinedRef, type: "number", className: inputClasses, value: currentValue ?? '', min: min, max: max, step: step, disabled: disabled, readOnly: !editable, onChange: handleInputChange, onKeyDown: handleKeyDown, "aria-valuenow": currentValue ?? undefined, "aria-valuemin": min, "aria-valuemax": max, ...rest, 
+            // After the spread: an undefined `id` key in rest would wipe it.
+            id: controlId }) }));
     // Stepper variant
     if (isStepper) {
         const stepperElement = (jsxRuntime.jsxs("div", { className: combinedClasses, children: [inputControl, jsxRuntime.jsx("div", { className: controlClasses, children: jsxRuntime.jsxs("div", { className: stepperClasses, children: [jsxRuntime.jsx("button", { type: "button", className: stepperButtonClasses, onClick: handleIncrement, disabled: disabled || isAtMax, tabIndex: -1, "aria-label": "Increase value", children: jsxRuntime.jsx(ArrowDropUp, {}) }), jsxRuntime.jsx("button", { type: "button", className: stepperButtonClasses, onClick: handleDecrement, disabled: disabled || isAtMin, tabIndex: -1, "aria-label": "Decrease value", children: jsxRuntime.jsx(ArrowDropDown, {}) })] }) })] }));
@@ -10583,6 +10663,7 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
         label,
         labelProps,
         rendersLabel: ownField,
+        callerProps: props,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const starBaseId = React.useId();
@@ -11115,12 +11196,13 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const tags = controlledValue !== undefined ? controlledValue : internalTags;
     const isMaxReached = maxTags !== undefined && tags.length >= maxTags;
     // At the tag limit the text input is not rendered, so there is nothing to
-    // wire the label to.
-    const { controlId, fieldLabelProps } = useAutoLabelId({
+    // wire a label to, its own or a surrounding Field's.
+    const { controlId, fieldLabelProps, labelled } = useAutoLabelId({
         label,
         id,
         labelProps,
         rendersLabel: ownField && !isMaxReached,
+        hasInput: !isMaxReached,
     });
     // Get display value from tag
     const getDisplayValue = (tag) => {
@@ -11386,9 +11468,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                                                 e.stopPropagation();
                                                 removeTag(index);
                                             }, "aria-label": ariaCloseLabel || `Remove ${displayVal}` }))] }, index));
-                            }), !isMaxReached && (jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, readOnly: readonly, maxLength: maxlength, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, "aria-label": controlId && fieldLabelProps?.htmlFor === controlId
-                                    ? undefined
-                                    : 'Add tag' }))] }), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), isActive && filteredData.length > 0 && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsx("div", { ref: dropdownRef, className: dropdownContentClasses, role: "listbox", children: filteredData.map((item, index) => (jsxRuntime.jsx("a", { className: pcn('dropdown-item', {
+                            }), !isMaxReached && (jsxRuntime.jsx("input", { ref: combinedRef, type: "text", className: inputClasses, id: controlId, value: inputValue, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, readOnly: readonly, maxLength: maxlength, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, "aria-label": labelled ? undefined : 'Add tag' }))] }), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), isActive && filteredData.length > 0 && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsx("div", { ref: dropdownRef, className: dropdownContentClasses, role: "listbox", children: filteredData.map((item, index) => (jsxRuntime.jsx("a", { className: pcn('dropdown-item', {
                             'is-active': index === highlightedIndex,
                         }), onClick: () => addTag(item), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": index === highlightedIndex, children: item }, index))) }) })), showCounter && jsxRuntime.jsx("small", { className: counterClasses, children: counterText }), name &&
                 tags.map((tag, i) => (jsxRuntime.jsx("input", { type: "hidden", name: name, value: getDisplayValue(tag), form: form }, `tag-input-${i}`)))] }));
@@ -11577,7 +11657,7 @@ fieldClassName, controlClassName,
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    let content = jsxRuntime.jsx(InputBase, { ref: ref, id: controlId, ...inputProps });
+    let content = jsxRuntime.jsx(InputBase, { ref: ref, ...inputProps, id: controlId });
     if (ownControl) {
         content = (jsxRuntime.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 }));
     }
@@ -11646,7 +11726,7 @@ fieldClassName, controlClassName,
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    let content = jsxRuntime.jsx(SelectBase, { ref: ref, id: controlId, ...selectProps });
+    let content = jsxRuntime.jsx(SelectBase, { ref: ref, ...selectProps, id: controlId });
     if (ownControl) {
         content = (jsxRuntime.jsx(Control, { iconLeft: iconLeft, iconLeftName: iconLeftName, iconLeftSize: iconLeftSize, hasIconsLeft: hasIconsLeft, isExpanded: isExpanded, size: controlSize, className: controlClassName, children: content }));
     }
@@ -11711,7 +11791,7 @@ fieldClassName, controlClassName,
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
-    let content = jsxRuntime.jsx(TextAreaBase, { ref: ref, id: controlId, ...textAreaProps });
+    let content = jsxRuntime.jsx(TextAreaBase, { ref: ref, ...textAreaProps, id: controlId });
     if (ownControl) {
         content = (jsxRuntime.jsx(Control, { isLoading: controlIsLoading, size: controlSize, className: controlClassName, children: content }));
     }
@@ -14280,13 +14360,14 @@ const DateInput = React.forwardRef((props, ref) => {
         labelProps,
         // Inline mode renders a bare calendar with no input to label.
         rendersLabel: ownField && !baseProps.inline,
+        hasInput: !baseProps.inline,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     // 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 = (jsxRuntime.jsx(DateInputBase, { ref: ref, id: controlId, ...baseProps }));
+    let content = (jsxRuntime.jsx(DateInputBase, { ref: ref, ...baseProps, id: controlId }));
     if (ownControl) {
         content = (jsxRuntime.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 }));
     }
@@ -15429,13 +15510,14 @@ const TimeInput = React.forwardRef((props, ref) => {
         labelProps,
         // Inline mode renders a bare panel with no input to label.
         rendersLabel: ownField && !baseProps.inline,
+        hasInput: !baseProps.inline,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     // 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 = (jsxRuntime.jsx(TimeInputBase, { ref: ref, id: controlId, ...baseProps }));
+    let content = (jsxRuntime.jsx(TimeInputBase, { ref: ref, ...baseProps, id: controlId }));
     if (ownControl) {
         content = (jsxRuntime.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 }));
     }
@@ -15817,13 +15899,14 @@ const DateTimeInput = React.forwardRef((props, ref) => {
         labelProps,
         // Inline mode renders a bare picker with no input to label.
         rendersLabel: ownField && !baseProps.inline,
+        hasInput: !baseProps.inline,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,
     });
     // 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 = (jsxRuntime.jsx(DateTimeInputBase, { ref: ref, id: controlId, ...baseProps }));
+    let content = (jsxRuntime.jsx(DateTimeInputBase, { ref: ref, ...baseProps, id: controlId }));
     if (ownControl) {
         content = (jsxRuntime.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 }));
     }
@@ -16167,6 +16250,7 @@ const DateRangeInput = React.forwardRef((props, ref) => {
         label,
         labelProps,
         rendersLabel: ownField,
+        callerProps: baseProps,
     });
     const helpClass = usePrefixedClassNames('help', {
         [`is-${messageColor}`]: !!messageColor,