@allxsmith/bestax-bulma 5.8.2 → 5.8.4

package/dist/index.esm.js

@@ -5839,6 +5839,45 @@ 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 `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 };
+}
+/**
+ * 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 +5906,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 +5933,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 +6100,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 +6130,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 +6865,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 +7066,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] }));
 });
@@ -7067,10 +7102,16 @@ Rate.displayName = 'Rate';
  *   onSelect={(item) => console.log(item)}
  * />
  */
-const Autocomplete = forwardRef(({ data = [], value: controlledValue, placeholder, field = 'label', clearable = false, openOnFocus = false, keepFirst = false, keepOpen = false, selectOnClickOutside = false, maxHeight = 200, loading = false, disabled = false, checkInfiniteScroll = false, infiniteScrollDistance = 50, color, size, onInput, onSelect, onActiveChange, onInfiniteScroll, itemTemplate, header, footer, empty, name, form, required, 
+const Autocomplete = forwardRef(({ data = [], value: controlledValue, placeholder, field = 'label', clearable = false, openOnFocus = false, keepFirst = false, keepOpen = false, selectOnClickOutside = false, maxHeight = 200, loading = false, disabled = false, checkInfiniteScroll = false, infiniteScrollDistance = 50, color, size, onInput, onSelect, onActiveChange, onInfiniteScroll, itemTemplate, header, footer, empty, name, form, required, id, 
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, ...props }, ref) => {
     const insideField = useInsideField();
+    const { controlId, fieldLabelProps } = useAutoLabelId({
+        label,
+        id,
+        labelProps,
+        rendersLabel: !insideField,
+    });
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const { classPrefix } = useConfig();
     const containerRef = useRef(null);
@@ -7266,7 +7307,7 @@ 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, 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) => {
+    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) => {
                             const isDisabled = typeof item !== 'string' && item.disabled;
                             const isHighlighted = index === highlightedIndex;
                             const itemClasses = prefixedClassNames(classPrefix, 'dropdown-item', {
@@ -7278,7 +7319,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                                     : getDisplayValue(item) }, index));
                         })) : (jsx("div", { className: emptyItemClasses, children: empty })), footer && jsx("div", { className: dropdownFooterClass, children: footer })] }) }))] }));
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
     }
     return (jsxs(Fragment, { children: [autocompleteElement, messageEl] }));
 });
@@ -7309,7 +7350,7 @@ Autocomplete.displayName = 'Autocomplete';
  */
 const Taginput = forwardRef(({ 
 // Field props
-label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data = [], placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled = false, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, className, ...props }, ref) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data = [], placeholder, field = 'label', allowNew = true, allowDuplicates = false, openOnFocus = false, removeOnKeys = true, confirmKeys = ['Enter', ','], closable = true, attached = false, maxTags, maxlength, disabled = false, readonly = false, rounded = false, ellipsis = false, hasCounter = true, onPasteSeparators = [','], beforeAdding, createTag, keepFirst = false, keepOpen = true, loading = false, ariaCloseLabel, icon, iconLibrary: iconLibraryProp, iconVariant, iconFeatures, color, tagColor, size, onChange, onAdd, onRemove, onTyping, tagTemplate, name, form, id, className, ...props }, ref) => {
     const insideField = useInsideField();
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     const { classPrefix } = useConfig();
@@ -7325,6 +7366,15 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const [highlightedIndex, setHighlightedIndex] = useState(-1);
     // Use controlled or internal tags
     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({
+        label,
+        id,
+        labelProps,
+        rendersLabel: !insideField && !isMaxReached,
+    });
     // Get display value from tag
     const getDisplayValue = (tag) => {
         if (typeof tag === 'string')
@@ -7567,7 +7617,6 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         [`is-${size}`]: !!size,
     });
     const combinedClasses = classNames(taginputClasses, bulmaHelperClasses, className);
-    const isMaxReached = maxTags !== undefined && tags.length >= maxTags;
     // Counter text
     const showCounter = hasCounter && (maxTags !== undefined || maxlength !== undefined);
     const counterText = maxTags !== undefined
@@ -7591,12 +7640,14 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                                                 e.stopPropagation();
                                                 removeTag(index);
                                             }, "aria-label": ariaCloseLabel || `Remove ${displayVal}` }))] }, index));
-                            }), !isMaxReached && (jsx("input", { ref: combinedRef, type: "text", className: inputClasses, value: inputValue, placeholder: tags.length === 0 ? placeholder : undefined, disabled: disabled, readOnly: readonly, maxLength: maxlength, onChange: handleInputChange, onFocus: handleFocus, onKeyDown: handleKeyDown, onPaste: handlePaste, "aria-label": "Add tag" }))] }), loading && (jsx("span", { className: iconRightClass, children: jsx("span", { className: loaderClass }) }))] }), isActive && filteredData.length > 0 && (jsx("div", { className: dropdownMenuClasses, children: jsx("div", { ref: dropdownRef, className: dropdownContentClasses, role: "listbox", children: filteredData.map((item, index) => (jsx("a", { className: pcn('dropdown-item', {
+                            }), !isMaxReached && (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 && (jsx("span", { className: iconRightClass, children: jsx("span", { className: loaderClass }) }))] }), isActive && filteredData.length > 0 && (jsx("div", { className: dropdownMenuClasses, children: jsx("div", { ref: dropdownRef, className: dropdownContentClasses, role: "listbox", children: filteredData.map((item, index) => (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 && jsx("small", { className: counterClasses, children: counterText }), name &&
                 tags.map((tag, i) => (jsx("input", { type: "hidden", name: name, value: getDisplayValue(tag), form: form }, `tag-input-${i}`)))] }));
     if (!insideField) {
-        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: labelProps, horizontal: horizontal, className: fieldClassName, children: [taginputElement, messageEl] }));
+        return (jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [taginputElement, messageEl] }));
     }
     return (jsxs(Fragment, { children: [taginputElement, messageEl] }));
 });