@allxsmith/bestax-bulma 5.27.4 → 5.27.6

package/dist/index.cjs

@@ -9068,9 +9068,10 @@ 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 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.
+ * Consumed by the single-control bases (InputBase, SelectBase, TextAreaBase,
+ * and the date and time picker bases unless inline, #968) 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. */
@@ -9079,26 +9080,30 @@ 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), and for a range Slider's thumbs, which each
- * need the label in a name of their own (#981). Set under the same conditions
- * as {@link useFieldLabelId}. Consumed through `useAutoLabelledBy` and
- * `useAutoLabelId`.
+ * 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 FieldLabelForContext = React.createContext({});
+/**
+ * The nearest labeled Field's `<label>`: what it points `htmlFor` at, the id
+ * it generated or the caller's own `labelProps.htmlFor`, and the id the label
+ * renders with, if it has one. An unlabeled Field passes both through
+ * together, so a control in the inner Field of a horizontal layout can tell
+ * the outer label names it, and point at that label by its id, as a range
+ * Slider's thumbs (#981) and Autocomplete's suggestion list (#998) do. The
+ * `htmlFor` is only ever compared with a control's own id, never adopted, so
+ * it hands out no id for a control. The `id` is set only while that label
+ * renders with it. Unlike {@link useFieldLabelId}, it is set in a `grouped`
+ * or `hasAddons` Field too, so a label wired by hand names the control its
+ * `for` picks in those rows as well. Consumed through `useAutoLabelId`.
+ * Internal; not part of the public API.
  */
 const useFieldLabelFor = () => React.useContext(FieldLabelForContext);
-/** Provider for the Field label's `htmlFor` target, used internally by Field. */
+/** Provider for the Field label's `htmlFor` target and id, used internally by Field. */
 const FieldLabelForProvider = FieldLabelForContext.Provider;
 const RadiosContext = React.createContext(undefined);
 const CheckboxesContext = React.createContext(undefined);
@@ -9298,14 +9303,26 @@ const Control = React.forwardRef(({ as = 'div', hasIconsLeft, hasIconsRight, isL
 Control.displayName = 'Control';
 
 /**
- * FieldLabel component for rendering a Bulma field label.
+ * FieldLabel component for rendering a Bulma field label. It renders the
+ * label column of a horizontal `Field` (a `div` with the `field-label` class),
+ * not a `<label>`, so text placed straight in it names nothing. Put a `<label>`
+ * with the `label` class inside it and point its `htmlFor` at the control's
+ * `id`, or give the horizontal `Field` a `label` prop, which renders this
+ * column and its `<label>` for you. A `<label>` you put here names the
+ * control through its `htmlFor` alone: a range `Slider`'s thumbs and an
+ * `Autocomplete`'s suggestion list point `aria-labelledby` at a `Field`'s
+ * label only when its `label` prop renders it and it names the control.
+ * Where it would not name the control on its own, as in an inner `Field`,
+ * pass `labelProps={{ htmlFor, id }}` with a matching `id` on the control.
  *
  * @function
  * @param {FieldLabelProps} props - Props for the FieldLabel component.
  * @returns {JSX.Element} The rendered field label.
  *
  * @example
- * <FieldLabel size="normal">Name</FieldLabel>
+ * <FieldLabel size="normal">
+ *   <label className="label" htmlFor="name">Name</label>
+ * </FieldLabel>
  */
 const FieldLabel = ({ size, textColor, bgColor, className, children, ...props }) => {
     const { bulmaHelperClasses, rest } = useBulmaClasses({
@@ -9390,8 +9407,8 @@ const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSi
     const effectiveLabelSize = labelSize ?? (horizontal ? 'normal' : undefined);
     const labelClass = usePrefixedClassNames('label');
     // Auto-associate the label with a single composed base control (#495): the
-    // label points at a generated id shared via context, which InputBase/
-    // SelectBase/TextAreaBase adopt when the user supplied no id of their own.
+    // label points at a generated id shared via context, which a composed base
+    // adopts when the user supplied no id of their own.
     // Presence semantics on htmlFor — even an explicit `htmlFor: undefined`
     // means the caller owns the association. Grouped/addons fields hold several
     // controls, so no single association is generated for them.
@@ -9405,15 +9422,19 @@ const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSi
     // 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.
+    // What the rendered label's `for` points at, generated or the caller's, and
+    // the id it renders with, so a control can tell when a label wired by hand
+    // names it and point at that label. An unlabeled Field passes on its
+    // parent's. Unlike `targetId`, a label wired by hand passes on its own in
+    // `grouped`/`hasAddons` Fields too, on purpose: those only stop the Field
+    // picking one control out of several, and the caller's `for` has picked
+    // one, so a range Slider or Autocomplete it names points at that label in
+    // a row as well. A group reads the label element id below instead, which
+    // stays off for a label wired by hand, since no group takes its `for`.
     const inheritedLabelFor = useFieldLabelFor();
-    const labelFor = label
-        ? userWiredLabel
-            ? labelProps.htmlFor
-            : targetId
-        : inheritedLabelFor;
+    const labelForTarget = userWiredLabel ? labelProps.htmlFor : targetId;
+    const ownLabelFor = React.useMemo(() => ({ htmlFor: labelForTarget, id: labelId }), [labelForTarget, labelId]);
+    const labelFor = label ? ownLabelFor : inheritedLabelFor;
     let renderedLabel = null;
     if (label) {
         if (horizontal) {
@@ -9471,10 +9492,11 @@ function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput = true,
     // 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.
+    // What an outer Field's label points at, even when wired by hand, and the
+    // id that label renders with, read together so the id is that label's.
+    // Set in `grouped`/`hasAddons` Fields too when the label is wired by hand,
+    // since its `for` names this one control whatever the layout (see Field).
     const fieldLabelFor = useFieldLabelFor();
-    // That Field's label element, set under the same conditions.
-    const fieldLabelElementId = useFieldLabelElementId();
     // Truthiness mirrors Field's own `if (label)` render gate.
     const active = !!label && rendersLabel;
     // Presence, not truthiness: `htmlFor: undefined` is an explicit opt-out and
@@ -9483,7 +9505,7 @@ function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput = true,
     const adopted = !active && hasInput ? fieldLabelId : undefined;
     const controlId = id ?? (active && !userWired ? generatedId : adopted);
     const ownLabelProps = { htmlFor: controlId, ...labelProps };
-    const labelTarget = active ? ownLabelProps.htmlFor : fieldLabelFor;
+    const labelTarget = active ? ownLabelProps.htmlFor : fieldLabelFor.htmlFor;
     const labelled = !!controlId && labelTarget === controlId;
     // Only a label that names the control gets an id to point at, with the
     // suffix Field gives its own, from an id that is already unique.
@@ -9504,7 +9526,7 @@ function useAutoLabelId({ label, id, labelProps, rendersLabel, hasInput = true,
     const labelId = needsLabelId && labelled
         ? active
             ? ownLabelId
-            : fieldLabelElementId
+            : fieldLabelFor.id
         : undefined;
     return { controlId, fieldLabelProps, labelled, labelId };
 }
@@ -10956,11 +10978,14 @@ const Autocomplete = React.forwardRef(({ data = [], value: controlledValue, plac
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, ...props }, ref) => {
     const insideField = useInsideField();
-    const { controlId, fieldLabelProps } = useAutoLabelId({
+    // The suggestion list points `aria-labelledby` at the label that names
+    // the input, so it needs that label's id.
+    const { controlId, fieldLabelProps, labelId: listLabelId, } = useAutoLabelId({
         label,
         id,
         labelProps,
         rendersLabel: !insideField,
+        needsLabelId: true,
     });
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const { classPrefix } = useConfig();
@@ -11163,12 +11188,11 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const controlLoading = useControlLoading();
     const showClear = clearable && !!inputValue && !disabled && !loading && !controlLoading;
     // The combobox controls its listbox and points at the highlighted option.
-    // The listbox takes its name from the label this renders, or a fallback
-    // when it renders none.
+    // The listbox takes its name from the label that names the combobox, the
+    // one this renders or a surrounding Field's, so the two say the same
+    // thing. When no label names the combobox, or the one that does has no
+    // id to point at, the list keeps a fallback name.
     const listOpen = isActive && (filteredData.length > 0 || !!empty);
-    const listLabelId = !insideField && label
-        ? (fieldLabelProps?.id ?? `${listboxId}-label`)
-        : undefined;
     const activeOptionId = listOpen &&
         highlightedIndex >= 0 &&
         highlightedIndex < filteredData.length
@@ -11186,9 +11210,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                                     : getDisplayValue(item) }, index));
                         })) : (jsxRuntime.jsx("div", { className: emptyItemClasses, children: empty })), footer && jsxRuntime.jsx("div", { className: dropdownFooterClass, children: footer })] }) }))] }));
     if (!insideField) {
-        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: listLabelId
-                ? { ...fieldLabelProps, id: listLabelId }
-                : fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
+        return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
     }
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [autocompleteElement, messageEl] }));
 });
@@ -14129,7 +14151,13 @@ const SKIPPED_SEGMENTS = {
  * @returns {JSX.Element}
  */
 const DateInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, granularity = 'day', format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, dayNames, monthNames, nearbyMonthDays = true, className, name, form, required, id, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, ...rest } = props;
+    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, granularity = 'day', format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = true, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, dayNames, monthNames, nearbyMonthDays = true, className, name, form, required, id: idProp, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, ...rest } = props;
+    // Inside a labeled Field the input takes the id the label points at
+    // when the caller set none, as InputBase does, and the popover's ids
+    // follow it. Inline there is no input to name, so nothing takes the
+    // Field's id or builds on it.
+    const fieldLabelId = useFieldLabelId();
+    const id = idProp ?? (inline ? undefined : fieldLabelId);
     // The launcher gives way to the loading spinner of a Control this sits in.
     const controlLoading = useControlLoading();
     const triggerIcon = triggerIconProp ?? !controlLoading;
@@ -15305,7 +15333,13 @@ const fromIsoTime = (s) => {
  * @returns {JSX.Element}
  */
 const TimeInputBase = React.forwardRef((props, ref) => {
-    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, hourFormat = '24', enableSeconds = false, incrementHours = 1, incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, audioTick = false, haptics = false, ...rest } = props;
+    const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, hourFormat = '24', enableSeconds = false, incrementHours = 1, incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id: idProp, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', labels, audioTick = false, haptics = false, ...rest } = props;
+    // Inside a labeled Field the input takes the id the label points at
+    // when the caller set none, as InputBase does, and the popover's ids
+    // follow it. Inline there is no input to name, so nothing takes the
+    // Field's id or builds on it.
+    const fieldLabelId = useFieldLabelId();
+    const id = idProp ?? (inline ? undefined : fieldLabelId);
     // The launcher gives way to the loading spinner of a Control this sits in.
     const controlLoading = useControlLoading();
     const triggerIcon = triggerIconProp ?? !controlLoading;
@@ -15617,7 +15651,13 @@ const fromIsoDateTime = (s) => {
 const DateTimeInputBase = React.forwardRef((props, ref) => {
     const { value: controlledValue, defaultValue, onChange, onOpen, onClose, min, max, disabled, readOnly, placeholder, format, parse, locale, inline = false, mobileNative = 'auto', editable = true, popover = true, openOnFocus = true, closeOnSelect = false, position = 'bottom-left', appendToBody = false, color, size, isRounded, shouldDisableDate, unselectableDates, firstDayOfWeek = 0, dayNames, monthNames, nearbyMonthDays = true, hourFormat = '24', enableSeconds = false, incrementHours = 1, 
     // Step between visible wheel values; 1 gives the iOS-style every-minute wheel.
-    incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', audioTick = false, haptics = false, labels, ...rest } = props;
+    incrementMinutes = 1, incrementSeconds = 1, unselectableTimes, className, name, form, required, id: idProp, onFocus, onClick, onKeyDown, onBlur, iconLeftName: _iconLeftName, triggerIcon: triggerIconProp, triggerIconName = 'chevron-down', audioTick = false, haptics = false, labels, ...rest } = props;
+    // Inside a labeled Field the input takes the id the label points at
+    // when the caller set none, as InputBase does, and the popover's ids
+    // follow it. Inline there is no input to name, so nothing takes the
+    // Field's id or builds on it.
+    const fieldLabelId = useFieldLabelId();
+    const id = idProp ?? (inline ? undefined : fieldLabelId);
     // The launcher gives way to the loading spinner of a Control this sits in.
     const controlLoading = useControlLoading();
     const triggerIcon = triggerIconProp ?? !controlLoading;