@allxsmith/bestax-bulma 5.34.0 → 5.34.2

package/dist/index.cjs

@@ -2563,8 +2563,9 @@ const isBrowser$1 = (win, doc) => typeof win !== 'undefined' && typeof doc !== '
  * the menu, so a letter typed on the trigger does nothing. Escape closes the
  * menu and focuses the trigger, and Tab closes it and lets focus move on.
  * Anything focusable in the menu that isn't an item, such as a field, keeps
- * its own keys apart from Escape and Tab. For a panel built around fields,
- * use `Popover`.
+ * its own keys apart from Escape and Tab, though an Escape it calls
+ * `preventDefault()` on in its own `onKeyDown` stays its own and leaves the
+ * menu open. For a panel built around fields, use `Popover`.
  *
  * @function
  * @param {DropdownProps} props - Props for the Dropdown component.
@@ -2741,8 +2742,12 @@ const DropdownComponent = React.forwardRef(function DropdownComponent({ label, c
         // Closing is Dropdown's: Escape and Tab close the menu from anywhere in
         // it, a field included, and an empty or all-disabled menu too. Moving
         // between the items, running them and typeahead are the hook's, which
-        // acts only while focus is on the menu or one of its items.
+        // acts only while focus is on the menu or one of its items. An Escape
+        // something in the menu already used, such as a field's own list
+        // closing on it, leaves the menu open for the next one.
         if (e.key === 'Escape') {
+            if (e.defaultPrevented)
+                return;
             e.preventDefault();
             setActive(false);
             onActiveChange?.(false);
@@ -4056,6 +4061,9 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
         };
     }, [isModalActive]);
     // Escape closes; Tab cycles inside the modal. Both only for the topmost one.
+    // The listener is on `window`, where a keydown arrives last, so everything
+    // inside the modal has had the key first: React's handlers, and `document`
+    // listeners added after this one, such as a date picker's.
     React.useEffect(() => {
         if (!isModalActive)
             return undefined;
@@ -4065,11 +4073,15 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
                 return;
             }
             if (e.key === 'Escape') {
-                if (closeOnEscape)
+                // Something inside already used this Escape, such as a popup that
+                // closed on it, so the modal waits for the next one.
+                if (closeOnEscape && !e.defaultPrevented)
                     onClose?.();
                 return;
             }
-            if (e.key !== 'Tab' || !node)
+            // A trap inside the modal, such as a portaled popup's, already moved
+            // focus on this Tab, so the modal leaves it where it went.
+            if (e.key !== 'Tab' || !node || e.defaultPrevented)
                 return;
             // Keep Tab within the modal — `aria-modal` hides the rest of the page
             // from assistive technology, so the keyboard order has to agree.
@@ -4094,8 +4106,8 @@ const ModalRoot = React.forwardRef(function ModalRoot({ active, isActive, onClos
                 first.focus();
             }
         };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
     }, [isModalActive, closeOnEscape, onClose]);
     // Move focus into the modal on open, restore it on close
     React.useEffect(() => {
@@ -5375,17 +5387,18 @@ const Loading = ({ active = false, isFullPage = false, size, color, canCancel =
             onCancel();
         }
     };
-    // Handle escape key
+    // Handle escape key. On `window`, as in `Modal`, so a popup on the page has
+    // had the key first, and an Escape it closed on doesn't cancel as well.
     React.useEffect(() => {
         if (!active || !canCancel || !onCancel)
             return;
         const handleKeyDown = (e) => {
-            if (e.key === 'Escape') {
+            if (e.key === 'Escape' && !e.defaultPrevented) {
                 onCancel();
             }
         };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
     }, [active, canCancel, onCancel]);
     // Prevent body scroll when full page loading is active. Ref-counted through
     // the shared helper so an overlapping Modal/Dialog/Sidebar doesn't have its
@@ -7795,17 +7808,18 @@ const SidebarComponent = React.forwardRef(({ isOpen, onClose, position = 'left',
             handleClose();
         }
     }, [overlayClose, handleClose]);
-    // Handle escape key
+    // Handle escape key. On `window`, as in `Modal`, so everything inside the
+    // sidebar has had the key first, and an Escape it used is left to it.
     React.useEffect(() => {
         if (!isOpen || !escapeClose)
             return;
         const handleKeyDown = (e) => {
-            if (e.key === 'Escape') {
+            if (e.key === 'Escape' && !e.defaultPrevented) {
                 handleClose();
             }
         };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
     }, [isOpen, escapeClose, handleClose]);
     // Prevent body scroll when sidebar is open. Ref-counted through the shared
     // helper so an overlapping Modal/Dialog/Loading doesn't unlock underneath.
@@ -8060,17 +8074,19 @@ const Toast = React.forwardRef(({ message, type = 'default', actionType, positio
             document.removeEventListener('click', handleDocumentClick);
         };
     }, [dismissible, isVisible, handleClose]);
+    // On `window`, as in `Modal`, so a popup on the page has had the key
+    // first, and an Escape it closed on doesn't dismiss the toast as well.
     React.useEffect(() => {
-        if (!cancelable)
+        if (!cancelable || !isVisible)
             return undefined;
         const handleKeyDown = (e) => {
-            if (e.key === 'Escape') {
+            if (e.key === 'Escape' && !e.defaultPrevented) {
                 handleClose();
             }
         };
-        document.addEventListener('keydown', handleKeyDown);
-        return () => document.removeEventListener('keydown', handleKeyDown);
-    }, [cancelable, handleClose]);
+        window.addEventListener('keydown', handleKeyDown);
+        return () => window.removeEventListener('keydown', handleKeyDown);
+    }, [cancelable, isVisible, handleClose]);
     const containerClasses = usePrefixedClassNames('toast-container', {
         [`is-${position}`]: true,
     });
@@ -10694,7 +10710,8 @@ const FieldLabelForContext = React.createContext({});
  * 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
+ * Slider's thumbs (#981) and Autocomplete's and Taginput's suggestion lists
+ * (#998, #1082) do. The
  * `htmlFor` is only ever compared with a control's own id, never adopted, so
  * it hands out no id for a control. It keeps the generated id after the
  * label drops a `for` nothing took (#1004), which no control's id matches
@@ -10949,9 +10966,9 @@ Control.displayName = 'Control';
  * `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`,
+ * `Autocomplete`'s or `Taginput`'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
@@ -12654,6 +12671,11 @@ const nothingToAnnounce = [];
  * />
  */
 const Autocomplete = React.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, 
+// Deprecated no-ops, taken here so they stay off the wrapper.
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op
+selected, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- deprecated no-op
+dropdown, 
 // Field props
 label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, className, ...props }, ref) => {
     const insideField = useInsideField();
@@ -12806,7 +12828,10 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                 }
                 break;
             case 'Escape':
-                e.preventDefault();
+                // Only closing the dropdown claims the key. With it closed, the
+                // key goes on to a Modal around the field.
+                if (menuOpen)
+                    e.preventDefault();
                 setIsActive(false);
                 setHighlightedIndex(-1);
                 break;
@@ -12817,7 +12842,14 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                 setIsActive(false);
                 break;
         }
-    }, [disabled, isActive, highlightedIndex, filteredData, handleSelect]);
+    }, [
+        disabled,
+        isActive,
+        menuOpen,
+        highlightedIndex,
+        filteredData,
+        handleSelect,
+    ]);
     // Handle dropdown scroll for infinite scroll
     const handleDropdownScroll = React.useCallback(() => {
         if (!checkInfiniteScroll || !dropdownRef.current)
@@ -12960,7 +12992,7 @@ Autocomplete.displayName = 'Autocomplete';
  */
 const Taginput = React.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, id, className, ...props }, ref) => {
+label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName, value: controlledValue, defaultValue = [], data: dataProp, 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 insideControl = useInsideControl();
     const ownField = rendersOwnField('Taginput', {
@@ -12983,17 +13015,26 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
     const [inputValue, setInputValue] = React.useState('');
     const [isActive, setIsActive] = React.useState(false);
     const [highlightedIndex, setHighlightedIndex] = React.useState(-1);
+    const listboxId = `${React.useId()}-listbox`;
+    // With `data` the input offers suggestions, so it's a combobox, even
+    // while none match. Without it there's never a list, so it stays a plain
+    // text field.
+    const hasSuggestions = dataProp !== undefined;
+    const data = dataProp ?? [];
     // 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 a label to, its own or a surrounding Field's.
-    const { controlId, fieldLabelProps, labelled } = useAutoLabelId({
+    // wire a label to, its own or a surrounding Field's. The suggestion list
+    // points `aria-labelledby` at the label that names the input, so with
+    // suggestions it needs that label's id.
+    const { controlId, fieldLabelProps, labelled, labelId: listLabelId, } = useAutoLabelId({
         label,
         id,
         labelProps,
         rendersLabel: ownField && !isMaxReached,
         hasInput: !isMaxReached,
+        needsLabelId: hasSuggestions,
     });
     // Get display value from tag
     const getDisplayValue = (tag) => {
@@ -13013,6 +13054,7 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         const hasInput = inputValue || (openOnFocus && isActive);
         return matchesInput && notAlreadyAdded && hasInput;
     });
+    const listOpen = isActive && filteredData.length > 0;
     // keepFirst: auto-highlight first item when dropdown opens
     React.useEffect(() => {
         if (keepFirst && isActive && filteredData.length > 0) {
@@ -13181,6 +13223,10 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
                 }
                 break;
             case 'Escape':
+                // Closing the suggestions claims the key, so a Modal around the
+                // field stays open. With none showing, the key goes on to it.
+                if (isActive && filteredData.length > 0)
+                    e.preventDefault();
                 setIsActive(false);
                 setHighlightedIndex(-1);
                 break;
@@ -13253,15 +13299,35 @@ label, labelSize, labelProps, horizontal, message, messageColor, fieldClassName,
         [`is-${messageColor}`]: !!messageColor,
     });
     const messageEl = message ? jsxRuntime.jsx("p", { className: helpClass, children: message }) : null;
+    // The combobox controls its listbox and points at the highlighted option,
+    // the way Autocomplete's does. The listbox takes its name from the label
+    // that names the combobox, the one this renders or a surrounding Field's,
+    // and keeps a fallback name when no label names it or the one that does
+    // has no id to point at. While no suggestion matches there's no listbox,
+    // so the combobox is collapsed and points at nothing. It skips a
+    // highlighted suggestion that's blank once trimmed, since that one can't
+    // become a tag, and the option it points at is the one marked selected.
+    const optionId = (index) => `${listboxId}-${index}`;
+    const activeOptionId = listOpen && filteredData[highlightedIndex]?.trim()
+        ? optionId(highlightedIndex)
+        : undefined;
+    const comboboxProps = {
+        role: 'combobox',
+        'aria-expanded': listOpen,
+        'aria-controls': listOpen ? listboxId : undefined,
+        'aria-activedescendant': activeOptionId,
+        'aria-haspopup': 'listbox',
+        'aria-autocomplete': 'list',
+    };
     const taginputElement = (jsxRuntime.jsxs("div", { ref: containerRef, className: combinedClasses, onClick: handleContainerClick, ...rest, children: [jsxRuntime.jsxs("div", { className: containerClasses, children: [icon && (jsxRuntime.jsx(Icon, { name: icon, library: resolvedLibrary, variant: iconVariant, features: iconFeatures, containerClassName: pcn('icon', 'is-left') })), jsxRuntime.jsxs("div", { className: tagsClasses, children: [tags.map((tag, index) => {
                                 const displayVal = getDisplayValue(tag);
                                 return (jsxRuntime.jsxs("span", { className: tagClasses, children: [tagTemplate ? (tagTemplate(tag)) : ellipsis ? (jsxRuntime.jsx("span", { title: displayVal, children: displayVal })) : (displayVal), closable && !disabled && !readonly && (jsxRuntime.jsx("button", { type: "button", className: pcn('delete', 'is-small'), onClick: e => {
                                                 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": 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', {
+                            }), !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, ...(hasSuggestions && comboboxProps), "aria-label": labelled ? undefined : 'Add tag' }))] }), loading && (jsxRuntime.jsx("span", { className: iconRightClass, children: jsxRuntime.jsx("span", { className: loaderClass }) }))] }), listOpen && (jsxRuntime.jsx("div", { className: dropdownMenuClasses, children: jsxRuntime.jsx("div", { ref: dropdownRef, id: listboxId, className: dropdownContentClasses, role: "listbox", "aria-labelledby": listLabelId, "aria-label": listLabelId ? undefined : 'Suggestions', children: filteredData.map((item, index) => (jsxRuntime.jsx("a", { id: optionId(index), 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 &&
+                        }), onClick: () => addTag(item), onMouseEnter: () => setHighlightedIndex(index), role: "option", "aria-selected": optionId(index) === activeOptionId, 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}`)))] }));
     if (ownField) {
         return (jsxRuntime.jsxs(Field, { label: label, labelSize: labelSize, labelProps: fieldLabelProps, horizontal: horizontal, className: fieldClassName, children: [taginputElement, messageEl] }));
@@ -15022,13 +15088,20 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
         return () => document.removeEventListener('pointerdown', handler);
     }, [isOpen, closeOnClickOutside, anchorRef, onClose]);
     // Escape closes it, and so does Alt+ArrowUp, the combobox's key for it,
-    // which the calendar and the time wheels inside leave to it.
+    // which the calendar and the time wheels inside leave to it. Escape closes
+    // it from anywhere, but the key is only the picker's when it was pressed in
+    // the panel or the field: then it's marked used, so a Modal or Sidebar
+    // around the picker stays open. From anywhere else, such as a dialog opened
+    // over the picker, the key goes on to whatever has focus.
     React.useEffect(() => {
         if (!isOpen || !closeOnEscape || !isBrowser)
             return undefined;
         const handler = (e) => {
             if (e.key === 'Escape') {
-                e.stopPropagation();
+                if (isEventInside(e, panelRef.current) ||
+                    isEventInside(e, anchorRef.current)) {
+                    e.preventDefault();
+                }
                 onClose();
             }
             else if (e.altKey && e.key === 'ArrowUp') {
@@ -15039,7 +15112,7 @@ const PickerPopover = ({ isOpen, onClose, anchorRef, children, position = 'botto
         };
         document.addEventListener('keydown', handler);
         return () => document.removeEventListener('keydown', handler);
-    }, [isOpen, closeOnEscape, onClose]);
+    }, [isOpen, closeOnEscape, anchorRef, onClose]);
     useFocusTrap(panelRef, {
         active: isOpen && trapFocus,
         initialFocusRef,