@allxsmith/bestax-bulma 5.8.3 → 5.9.0

package/dist/index.esm.js

@@ -5558,6 +5558,17 @@ const useInsideControl = () => useContext(ControlContext);
 const FieldProvider = FieldContext.Provider;
 /** Provider for Control context — used internally by Control component. */
 const ControlProvider = ControlContext.Provider;
+const FieldLabelIdContext = 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.
+ */
+const useFieldLabelId = () => useContext(FieldLabelIdContext);
+/** Provider for the Field label-target id — used internally by Field. */
+const FieldLabelIdProvider = FieldLabelIdContext.Provider;
 const RadiosContext = createContext(undefined);
 const CheckboxesContext = createContext(undefined);
 /**
@@ -5765,15 +5776,19 @@ const FieldBody = ({ textColor, bgColor, className, children, ...props }) => {
  * @see {@link https://bulma.io/documentation/form/general/#field | Bulma Field documentation}
  *
  * @example
- * // Labelled field
+ * // Labelled field — the label auto-associates with the composed base
  * <Field label="Email">
- *   <input className="input" type="email" />
+ *   <Control>
+ *     <InputBase type="email" />
+ *   </Control>
  * </Field>
  *
  * @example
  * // Horizontal field
  * <Field horizontal label="Name">
- *   <input className="input" />
+ *   <Control>
+ *     <InputBase />
+ *   </Control>
  * </Field>
  */
 const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSize, labelProps, textColor, color: _fieldColor, bgColor, className, children, ...props }) => {
@@ -5800,13 +5815,24 @@ const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSi
     // Default labelSize to 'normal' when horizontal for proper baseline alignment
     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.
+    // 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.
+    const generatedId = useId();
+    const userWiredLabel = !!labelProps && 'htmlFor' in labelProps;
+    const targetId = label && !userWiredLabel && !grouped && !hasAddons
+        ? generatedId
+        : undefined;
     let renderedLabel = null;
     if (label) {
         if (horizontal) {
-            renderedLabel = (jsx(FieldLabel, { size: effectiveLabelSize, children: jsx("label", { ...labelProps, className: classNames(labelClass, labelProps?.className), style: labelProps?.style, children: label }) }));
+            renderedLabel = (jsx(FieldLabel, { size: effectiveLabelSize, children: jsx("label", { htmlFor: targetId, ...labelProps, className: classNames(labelClass, labelProps?.className), style: labelProps?.style, children: label }) }));
         }
         else {
-            renderedLabel = (jsx("label", { ...labelProps, className: classNames(labelClass, labelProps?.className), style: { display: 'block', ...(labelProps?.style || {}) }, children: label }));
+            renderedLabel = (jsx("label", { htmlFor: targetId, ...labelProps, className: classNames(labelClass, labelProps?.className), style: { display: 'block', ...(labelProps?.style || {}) }, children: label }));
         }
     }
     // If horizontal, wrap children in FieldBody (unless the user already provided
@@ -5829,7 +5855,7 @@ const FieldComponent = ({ horizontal, grouped, hasAddons, narrow, label, labelSi
             content = jsx(FieldBody, { children: children });
         }
     }
-    return (jsx(FieldProvider, { value: true, children: jsxs("div", { className: fieldClass, ...rest, children: [renderedLabel, content] }) }));
+    return (jsx(FieldProvider, { value: true, children: jsx(FieldLabelIdProvider, { value: targetId, children: jsxs("div", { className: fieldClass, ...rest, children: [renderedLabel, content] }) }) }));
 };
 FieldLabel.displayName = 'FieldLabel';
 FieldBody.displayName = 'FieldBody';
@@ -5839,6 +5865,55 @@ const Field = withSubComponents(FieldComponent, {
     Control,
 }, 'Field');
 
+/**
+ * Associates the convenience `label` prop with its control (#368): generates
+ * an id for the control and returns labelProps carrying a matching `htmlFor`.
+ * 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.
+ */
+function useAutoLabelId({ label, id, labelProps, rendersLabel, }) {
+    // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.
+    const generatedId = useId();
+    // 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);
+    // 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 }
+        : label
+            ? { htmlFor: undefined, ...labelProps }
+            : labelProps;
+    return { controlId, fieldLabelProps };
+}
+/**
+ * Group-input counterpart of {@link useAutoLabelId} (#494): a group of
+ * controls cannot take a single `htmlFor`, so instead the rendered `<label>`
+ * gets a generated id and the group container points at it with
+ * `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`.
+ * Internal; not part of the public API.
+ */
+function useAutoLabelledBy({ label, labelProps, rendersLabel, }) {
+    // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.
+    const generatedId = useId();
+    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 };
+}
+
 /**
  * The `Checkboxes` component wraps multiple `Checkbox` components in a Bulma-styled group.
  *
@@ -5867,6 +5942,11 @@ const Field = withSubComponents(FieldComponent, {
 const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, ...props }) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
+        label,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
@@ -5889,37 +5969,18 @@ const CheckboxesComponent = ({ label, labelSize, labelProps, horizontal, message
         name,
         ...(groupActive ? { value: currentValue, onChange: handleChange } : {}),
     }), [name, groupActive, currentValue, handleChange]);
-    const checkboxesElement = (jsx("div", { className: wrapperClass, ...rest, children: jsx(CheckboxesProvider, { value: ctx, children: children }) }));
+    const checkboxesElement = (jsx("div", { className: wrapperClass, role: "group", "aria-labelledby": ariaLabelledBy, ...rest, children: jsx(CheckboxesProvider, { value: ctx, children: children }) }));
     let content = checkboxesElement;
     if (!insideControl) {
         content = jsx(Control, { children: content });
     }
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
 };
 const Checkboxes = withSubComponents(CheckboxesComponent, { Checkbox }, 'Checkboxes');
 
-/**
- * Associates the convenience `label` prop with its control (#368): generates
- * an id for the control and returns labelProps carrying a matching `htmlFor`.
- * A user-supplied `id` is used as the target instead of the generated one, and
- * an explicit `labelProps.htmlFor` disables generation entirely — the user has
- * taken over the association. Internal; not part of the public API.
- */
-function useAutoLabelId({ label, id, labelProps, rendersLabel, }) {
-    // Called unconditionally per the rules of hooks; SSR-safe on React 18 and 19.
-    const generatedId = useId();
-    // Truthiness mirrors Field's own `if (label)` render gate.
-    const active = !!label && rendersLabel;
-    const controlId = id ?? (active && !labelProps?.htmlFor ? generatedId : undefined);
-    const fieldLabelProps = active
-        ? { htmlFor: controlId, ...labelProps }
-        : labelProps;
-    return { controlId, fieldLabelProps };
-}
-
 /**
  * The `File` component provides a Bulma-styled file input, supporting color, size, boxed/fullwidth/align styles, icons, "has name", and filename display.
  *
@@ -6075,6 +6136,11 @@ Radio.displayName = 'Radio';
 const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, name, value, defaultValue, onChange, children, className, ...props }) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
+        label,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     const { bulmaHelperClasses, rest } = useBulmaClasses({
         ...props,
     });
@@ -6100,13 +6166,13 @@ const RadiosComponent = ({ label, labelSize, labelProps, horizontal, message, me
         name,
         ...(groupActive ? { value: currentValue, onChange: handleChange } : {}),
     }), [name, groupActive, currentValue, handleChange]);
-    const radiosElement = (jsx("div", { className: wrapperClass, ...rest, children: jsx(RadiosProvider, { value: ctx, children: children }) }));
+    const radiosElement = (jsx("div", { className: wrapperClass, role: "radiogroup", "aria-labelledby": ariaLabelledBy, ...rest, children: jsx(RadiosProvider, { value: ctx, children: children }) }));
     let content = radiosElement;
     if (!insideControl) {
         content = jsx(Control, { children: content });
     }
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
 };
@@ -6835,6 +6901,11 @@ function getFillPercent(iconIndex, value) {
 const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = 0, max = 5, size, disabled = false, showScore = false, showText = false, texts, onChange, customIcon, spaced = false, rtl = false, iconName, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, precision = 1, customText, name, form, className, ...props }, ref) => {
     const insideField = useInsideField();
     const insideControl = useInsideControl();
+    const { ariaLabelledBy, fieldLabelProps } = useAutoLabelledBy({
+        label,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const [internalValue, setInternalValue] = useState(defaultValue);
     const [hoverValue, setHoverValue] = useState(null);
@@ -7031,13 +7102,13 @@ const Rate = forwardRef(({ label, labelSize, labelProps, horizontal, message, me
     const rateScoreClass = usePrefixedClassNames('rate-score');
     const rateTextClass = usePrefixedClassNames('rate-text');
     const rateCustomTextClass = usePrefixedClassNames('rate-custom-text');
-    const rateElement = (jsxs("div", { ref: ref, className: combinedClasses, role: "radiogroup", "aria-label": "Rating", "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 }))] }));
+    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) {
         content = jsx(Control, { children: content });
     }
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [content, messageEl] }));
     }
     return (jsxs(Fragment, { children: [content, messageEl] }));
 });
@@ -7631,6 +7702,7 @@ const InputBase = forwardRef(({ color, size, isRounded, isStatic, isHovered, isF
         color,
         ...props,
     });
+    const fieldLabelId = useFieldLabelId();
     const mainClass = usePrefixedClassNames('input', {
         [`is-${color}`]: !!color,
         [`is-${size}`]: !!size,
@@ -7641,7 +7713,10 @@ const InputBase = forwardRef(({ color, size, isRounded, isStatic, isHovered, isF
         'is-loading': isLoading,
     });
     const inputClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsx("input", { ref: ref, className: inputClass, disabled: disabled, readOnly: readOnly, ...rest }));
+    return (jsx("input", { ref: ref, className: inputClass, disabled: disabled, readOnly: readOnly, ...rest, 
+        // After the spread: a labeled Field's generated id is adopted only
+        // when no user id arrived (rest.id may be an undefined own key).
+        id: rest.id ?? fieldLabelId }));
 });
 InputBase.displayName = 'InputBase';
 
@@ -7658,6 +7733,7 @@ const SelectBase = forwardRef(({ color, size, isRounded, isLoading, isActive, is
         color,
         ...props,
     });
+    const fieldLabelId = useFieldLabelId();
     const mainClass = usePrefixedClassNames('select', {
         [`is-${color}`]: !!color,
         [`is-${size}`]: !!size,
@@ -7682,7 +7758,10 @@ const SelectBase = forwardRef(({ color, size, isRounded, isLoading, isActive, is
     if (multiple && typeof multipleSize === 'number') {
         selectProps.size = multipleSize;
     }
-    return (jsx("div", { className: selectClass, children: jsx("select", { ref: ref, className: innerSelectClass || undefined, ...selectProps, children: children }) }));
+    return (jsx("div", { className: selectClass, children: jsx("select", { ref: ref, className: innerSelectClass || undefined, ...selectProps, 
+            // After the spread: a labeled Field's generated id is adopted only
+            // when no user id arrived; the id belongs on the inner <select>.
+            id: selectProps.id ?? fieldLabelId, children: children }) }));
 });
 SelectBase.displayName = 'SelectBase';
 
@@ -7699,6 +7778,7 @@ const TextAreaBase = forwardRef(({ color, size, isRounded, isStatic, isHovered,
         color,
         ...props,
     });
+    const fieldLabelId = useFieldLabelId();
     // Note: `is-loading` is intentionally NOT applied to the <textarea> itself —
     // Bulma documents `<div class="control is-loading">` as the loading pattern
     // for textareas, not `<textarea class="textarea is-loading">`. The convenience
@@ -7714,7 +7794,10 @@ const TextAreaBase = forwardRef(({ color, size, isRounded, isStatic, isHovered,
         'has-fixed-size': hasFixedSize,
     });
     const textareaClass = classNames(mainClass, bulmaHelperClasses, className);
-    return (jsx("textarea", { ref: ref, className: textareaClass, disabled: disabled, readOnly: readOnly, rows: rows, ...rest }));
+    return (jsx("textarea", { ref: ref, className: textareaClass, disabled: disabled, readOnly: readOnly, rows: rows, ...rest, 
+        // After the spread: a labeled Field's generated id is adopted only
+        // when no user id arrived (rest.id may be an undefined own key).
+        id: rest.id ?? fieldLabelId }));
 });
 TextAreaBase.displayName = 'TextAreaBase';