@allxsmith/bestax-bulma 5.33.0 → 5.33.1

package/dist/index.cjs

@@ -9185,7 +9185,8 @@ const visuallyHidden = {
     border: 0,
 };
 /**
- * Works out what a status region says. Each item is announced once. Its
+ * Works out what a status region says. Each item is announced once each time
+ * it appears, so one that goes and comes back is announced again. Its
  * announcement is written `announceDelay` after it appears, or after the last
  * item to join it when several appear in quick succession, alongside whatever
  * the region still says. Once written, it stays for `announcementLifetime`,
@@ -9220,8 +9221,8 @@ function useAnnouncements(items, describe) {
     React.useEffect(() => {
         const announced = onScreenIdsRef.current;
         const appeared = items.filter(item => !announced.has(item.id));
-        // Items that have gone drop out here too. Ids are never reused, so
-        // forgetting them can't bring an old item back.
+        // Items that have gone drop out here too, so one that comes back has
+        // appeared again.
         onScreenIdsRef.current = new Set(items.map(item => item.id));
         const next = [];
         for (const item of appeared) {
@@ -9234,9 +9235,13 @@ function useAnnouncements(items, describe) {
             setAnnouncements(current => ({
                 ...current,
                 key: current.key + 1,
-                // Announcements still waiting go out with the new ones. What's
-                // already written stays put.
-                waiting: [...current.waiting, ...next],
+                // Announcements still waiting go out with the new ones, apart from
+                // one whose item came back before it was written, which the new one
+                // replaces. What's already written stays put.
+                waiting: [
+                    ...current.waiting.filter(waiting => !next.some(({ id }) => id === waiting.id)),
+                    ...next,
+                ],
             }));
         }
     }, [items, describe]);
@@ -9395,10 +9400,10 @@ function readAloud(element) {
     return name || blockLevelTags.has(element.tagName) ? ` ${text} ` : text;
 }
 /**
- * A visually hidden, polite `status` live region that a programmatic
- * container announces its items through. The container renders it from the
- * moment it mounts, whether or not it has anything to show, so the region is
- * already in the page when an announcement is written into it.
+ * A visually hidden, polite `status` live region that a container announces
+ * its items through. The container renders it from the moment it mounts,
+ * whether or not it has anything to show, so the region is already in the
+ * page when an announcement is written into it.
  *
  * The announcements are this component's own state, so writing and clearing
  * them re-renders the region and leaves the container's items alone. Each one
@@ -9415,8 +9420,10 @@ function StatusRegion({ items, describe, }) {
     // reads the whole region on every change. Each announcement is its own
     // node, and only additions are relevant by default, so with atomic off a
     // screen reader reads just what was written, and removing one announcement
-    // doesn't read out the ones still there.
-    return (jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "false", style: visuallyHidden, children: announcements.map(announcement => (jsxRuntime.jsx("div", { children: announcement.text }, announcement.id))) }));
+    // doesn't read out the ones still there. A node is keyed by its batch as
+    // well as its item, since an item that comes back can be written again
+    // while what it said before is still there.
+    return (jsxRuntime.jsx("div", { role: "status", "aria-live": "polite", "aria-atomic": "false", style: visuallyHidden, children: announcements.map(announcement => (jsxRuntime.jsx("div", { children: announcement.text }, `${announcement.batch}:${announcement.id}`))) }));
 }
 
 /**
@@ -12492,6 +12499,10 @@ const Rate = React.forwardRef(({ label, labelSize, labelProps, horizontal, messa
 });
 Rate.displayName = 'Rate';
 
+// What the status region announces: the `empty` content, as the one item
+// it's handed while that content is on screen because of the user's typing.
+const typedNoMatches = [{ id: 'empty' }];
+const nothingToAnnounce = [];
 /**
  * The `Autocomplete` component provides an input field with dropdown suggestions that filter based on user input.
  *
@@ -12536,6 +12547,13 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const dropdownRef = React.useRef(null);
     const [internalValue, setInternalValue] = React.useState('');
     const [isActive, setIsActive] = React.useState(false);
+    // Whether the user has typed since the list opened, since only typing
+    // gets the `empty` content announced. Closing the list resets it (during
+    // render, React's pattern for adjusting state when other state changes),
+    // so opening the list again without typing stays quiet.
+    const [typed, setTyped] = React.useState(false);
+    if (typed && !isActive)
+        setTyped(false);
     const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
     const listboxId = `${React.useId()}-listbox`;
     // Use controlled or internal value
@@ -12554,6 +12572,11 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         const displayValue = getDisplayValue(item);
         return displayValue.toLowerCase().includes(inputValue.toLowerCase());
     });
+    // The dropdown shows the options or, when nothing matches, the `empty`
+    // content. The listbox holds only options, so it's on screen only while
+    // there are some.
+    const menuOpen = isActive && (filteredData.length > 0 || !!empty);
+    const listOpen = isActive && filteredData.length > 0;
     // Handle input change
     const handleInputChange = React.useCallback((e) => {
         const newValue = e.target.value;
@@ -12561,6 +12584,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
             setInternalValue(newValue);
         }
         onInput?.(newValue);
+        setTyped(true);
         if (!isActive && newValue) {
             setIsActive(true);
         }
@@ -12711,7 +12735,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     });
     const controlClasses = usePrefixedClassNames('control', 'is-expanded', 'has-icons-right');
     const dropdownMenuClasses = usePrefixedClassNames('dropdown-menu', {
-        'is-active': isActive && (filteredData.length > 0 || !!empty),
+        'is-active': menuOpen,
     });
     const dropdownContentClass = usePrefixedClassNames('dropdown-content');
     const dropdownHeaderClass = usePrefixedClassNames('dropdown-header');
@@ -12733,24 +12757,51 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     // 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);
+    // id to point at, the list keeps a fallback name. While the dropdown
+    // shows only the `empty` content there's no listbox, so the combobox is
+    // collapsed and points at nothing.
     const activeOptionId = listOpen &&
         highlightedIndex >= 0 &&
         highlightedIndex < filteredData.length
         ? `${listboxId}-${highlightedIndex}`
         : undefined;
-    const autocompleteElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxRuntime.jsxs("div", { className: controlClasses, children: [jsxRuntime.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": listOpen, "aria-controls": listOpen ? listboxId : undefined, "aria-activedescendant": activeOptionId, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), showClear && (jsxRuntime.jsx("button", { type: "button", className: iconRightClickableClass, onClick: handleClear, "aria-label": "Clear", children: jsxRuntime.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: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), listOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, id: listboxId, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', onScroll: handleDropdownScroll, children: [header && jsxRuntime.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', {
-                                'is-active': isHighlighted,
-                                'is-disabled': isDisabled,
-                            });
-                            return (jsxRuntime.jsx("a", { id: `${listboxId}-${index}`, "data-index": index, className: itemClasses, onClick: () => !isDisabled && handleSelect(item), onMouseEnter: () => !isDisabled && setHighlightedIndex(index), role: "option", "aria-selected": isHighlighted, "aria-disabled": isDisabled, children: itemTemplate
-                                    ? itemTemplate(item)
-                                    : getDisplayValue(item) }, index));
-                        })) : (jsxRuntime.jsx("div", { className: emptyItemClasses, children: empty })), footer && jsxRuntime.jsx("div", { className: dropdownFooterClass, children: footer })] }) }))] }));
+    // A polite status region, in the page from the start so it's there
+    // before anything is written into it, announces the `empty` content
+    // when the user's typing leaves nothing that matches what's in the
+    // field. It follows what's on screen, so results that come in after the
+    // typing count too. It's said once each time that happens, not again on
+    // each keystroke while nothing matches. An empty field isn't a search,
+    // so it stays quiet then, even with no data. While `loading`, or a
+    // loading Control around it, says results are on their way, it waits,
+    // and it's said once loading ends with nothing matching.
+    const emptyItems = typed &&
+        menuOpen &&
+        !listOpen &&
+        !!inputValue &&
+        !loading &&
+        !controlLoading
+        ? typedNoMatches
+        : nothingToAnnounce;
+    // The region reads the text on screen, whatever `empty` renders.
+    const emptyRef = React.useRef(null);
+    const describeEmpty = React.useCallback(() => {
+        const node = emptyRef.current;
+        /* istanbul ignore if: it's only announced while it's on screen */
+        if (!node)
+            return null;
+        return spokenText(node);
+    }, []);
+    const autocompleteElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, ...rest, children: [jsxRuntime.jsxs("div", { className: controlClasses, children: [jsxRuntime.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": listOpen, "aria-controls": listOpen ? listboxId : undefined, "aria-activedescendant": activeOptionId, "aria-haspopup": "listbox", "aria-autocomplete": "list", autoComplete: "off" }), showClear && (jsxRuntime.jsx("button", { type: "button", className: iconRightClickableClass, onClick: handleClear, "aria-label": "Clear", children: jsxRuntime.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: [jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })] }) })), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), menuOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsxs("div", { ref: dropdownRef, className: dropdownContentClass, style: { maxHeight: `${maxHeight}px`, overflowY: 'auto' }, onScroll: handleDropdownScroll, children: [header && jsxRuntime.jsx("div", { className: dropdownHeaderClass, children: header }), listOpen ? (jsxRuntime.jsx("div", { id: listboxId, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', children: filteredData.map((item, index) => {
+                                const isDisabled = typeof item !== 'string' && item.disabled;
+                                const isHighlighted = index === highlightedIndex;
+                                const itemClasses = prefixedClassNames(classPrefix, 'dropdown-item', {
+                                    'is-active': isHighlighted,
+                                    'is-disabled': isDisabled,
+                                });
+                                return (jsxRuntime.jsx("a", { id: `${listboxId}-${index}`, "data-index": index, className: itemClasses, onClick: () => !isDisabled && handleSelect(item), onMouseEnter: () => !isDisabled && setHighlightedIndex(index), role: "option", "aria-selected": isHighlighted, "aria-disabled": isDisabled, children: itemTemplate
+                                        ? itemTemplate(item)
+                                        : getDisplayValue(item) }, index));
+                            }) })) : (jsxRuntime.jsx("div", { ref: emptyRef, className: emptyItemClasses, children: empty })), footer && jsxRuntime.jsx("div", { className: dropdownFooterClass, children: footer })] }) })), jsxRuntime.jsx(StatusRegion, { items: emptyItems, describe: describeEmpty })] }));
     if (!insideField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [autocompleteElement, messageEl] }));
     }