@allxsmith/bestax-bulma 5.12.0 → 5.13.0

package/dist/index.esm.js

@@ -322,6 +322,7 @@ const validDisplays = [
     'inline',
     'inline-block',
     'inline-flex',
+    'grid',
 ];
 /**
  * Valid Bulma visibility classes.
@@ -410,8 +411,12 @@ const validFlexGrowShrink = ['0', '1', '2', '3', '4', '5'];
 const validViewports = [
     'mobile',
     'tablet',
+    'tablet-only',
+    'touch',
     'desktop',
+    'desktop-only',
     'widescreen',
+    'widescreen-only',
     'fullhd',
 ];
 /**
@@ -431,9 +436,17 @@ const createBulmaClassHelpers = (classPrefix, viewport) => {
         classes.push(classPrefix ? `${classPrefix}${className}` : className);
     };
     // Helper to add class with optional viewport
-    const addClass = (prefix, value, validValues, supportsViewport = false) => {
+    //
+    // `supportedViewports` narrows which viewports may be suffixed onto this
+    // class. It defaults to every viewport, but a few Bulma helper families
+    // (notably `is-size-*`, which ships no `-only` bands) support only a subset,
+    // so passing the emitting set keeps us from producing dead classes.
+    const addClass = (prefix, value, validValues, supportsViewport = false, supportedViewports = validViewports) => {
         if (value && validValues.includes(value)) {
-            const className = supportsViewport && viewport && validViewports.includes(viewport)
+            const className = supportsViewport &&
+                viewport &&
+                validViewports.includes(viewport) &&
+                supportedViewports.includes(viewport)
                 ? `${prefix}-${value}-${viewport}`
                 : `${prefix}-${value}`;
             addPrefixedClass(className);
@@ -558,6 +571,19 @@ const useSpacingClasses = (props) => {
     }, [classPrefix, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py]);
 };
 
+/**
+ * Viewports Bulma generates `is-size-*` classes for. Unlike text alignment,
+ * text size ships no `-only` bands (`tablet-only`/`desktop-only`/`widescreen-only`),
+ * so the `viewport` prop's suffix is limited to these on the `is-size` path.
+ */
+const sizeSupportedViewports = [
+    'mobile',
+    'tablet',
+    'touch',
+    'desktop',
+    'widescreen',
+    'fullhd',
+];
 /**
  * A hook that generates Bulma typography helper classes, including
  * viewport-specific text size and alignment variants.
@@ -578,8 +604,11 @@ const useTypographyClasses = (props) => {
     return useMemo(() => {
         const { classes, addPrefixedClass, addClass, addClassNoViewport } = createBulmaClassHelpers(classPrefix, viewport);
         // Typography
-        addClass('is-size', textSize, validTextSizes, true); // supports viewport
-        addClass('has-text', textAlign, validAlignments$1, true); // supports viewport
+        // Bulma emits `is-size-*` for the six main/`touch` breakpoints but not the
+        // three `-only` bands, so restrict the viewport suffix to the ones it ships
+        // — otherwise `viewport="tablet-only"` would render a dead `is-size-N-tablet-only`.
+        addClass('is-size', textSize, validTextSizes, true, sizeSupportedViewports); // supports viewport (no `-only` bands)
+        addClass('has-text', textAlign, validAlignments$1, true); // supports viewport (all bands)
         addClassNoViewport('is', textTransform, validTextTransforms); // no viewport support
         addClassNoViewport('has-text-weight', textWeight, validTextWeights); // no viewport support
         addClassNoViewport('is-family', fontFamily, validFontFamilies); // no viewport support
@@ -645,7 +674,7 @@ const useTypographyClasses = (props) => {
  */
 const useVisibilityClasses = (props) => {
     const { classPrefix } = useConfig();
-    const { visibility, visibilityMobile, visibilityTablet, visibilityDesktop, visibilityWidescreen, visibilityFullhd, display, displayMobile, displayTablet, displayDesktop, displayWidescreen, displayFullhd, viewport, } = props;
+    const { visibility, visibilityMobile, visibilityTablet, visibilityTabletOnly, visibilityTouch, visibilityDesktop, visibilityDesktopOnly, visibilityWidescreen, visibilityWidescreenOnly, visibilityFullhd, display, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, viewport, } = props;
     return useMemo(() => {
         const { classes, addPrefixedClass, addClass } = createBulmaClassHelpers(classPrefix, viewport);
         // Viewport-specific visibility
@@ -662,8 +691,12 @@ const useVisibilityClasses = (props) => {
         };
         addViewportSpecificVisibilityClass(visibilityMobile, '-mobile');
         addViewportSpecificVisibilityClass(visibilityTablet, '-tablet');
+        addViewportSpecificVisibilityClass(visibilityTabletOnly, '-tablet-only');
+        addViewportSpecificVisibilityClass(visibilityTouch, '-touch');
         addViewportSpecificVisibilityClass(visibilityDesktop, '-desktop');
+        addViewportSpecificVisibilityClass(visibilityDesktopOnly, '-desktop-only');
         addViewportSpecificVisibilityClass(visibilityWidescreen, '-widescreen');
+        addViewportSpecificVisibilityClass(visibilityWidescreenOnly, '-widescreen-only');
         addViewportSpecificVisibilityClass(visibilityFullhd, '-fullhd');
         // Visibility and Display
         // Handle viewport-specific display properties first (they take precedence)
@@ -680,14 +713,22 @@ const useVisibilityClasses = (props) => {
         // Apply viewport-specific display classes
         addDisplayClass(displayMobile, '-mobile');
         addDisplayClass(displayTablet, '-tablet');
+        addDisplayClass(displayTabletOnly, '-tablet-only');
+        addDisplayClass(displayTouch, '-touch');
         addDisplayClass(displayDesktop, '-desktop');
+        addDisplayClass(displayDesktopOnly, '-desktop-only');
         addDisplayClass(displayWidescreen, '-widescreen');
+        addDisplayClass(displayWidescreenOnly, '-widescreen-only');
         addDisplayClass(displayFullhd, '-fullhd');
         // Apply legacy display/viewport combination if no viewport-specific display props are set
         const hasViewportSpecificDisplay = !!(displayMobile ||
             displayTablet ||
+            displayTabletOnly ||
+            displayTouch ||
             displayDesktop ||
+            displayDesktopOnly ||
             displayWidescreen ||
+            displayWidescreenOnly ||
             displayFullhd);
         if (!hasViewportSpecificDisplay) {
             // Legacy display handling
@@ -720,14 +761,22 @@ const useVisibilityClasses = (props) => {
         visibility,
         visibilityMobile,
         visibilityTablet,
+        visibilityTabletOnly,
+        visibilityTouch,
         visibilityDesktop,
+        visibilityDesktopOnly,
         visibilityWidescreen,
+        visibilityWidescreenOnly,
         visibilityFullhd,
         display,
         displayMobile,
         displayTablet,
+        displayTabletOnly,
+        displayTouch,
         displayDesktop,
+        displayDesktopOnly,
         displayWidescreen,
+        displayWidescreenOnly,
         displayFullhd,
         viewport,
     ]);
@@ -756,7 +805,7 @@ const useVisibilityClasses = (props) => {
  */
 const useFlexboxClasses = (props) => {
     const { classPrefix } = useConfig();
-    const { flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, display, displayMobile, displayTablet, displayDesktop, displayWidescreen, displayFullhd, } = props;
+    const { flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, display, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, } = props;
     return useMemo(() => {
         const { classes, addClassNoViewport } = createBulmaClassHelpers(classPrefix);
         // Flexbox
@@ -766,10 +815,18 @@ const useFlexboxClasses = (props) => {
             displayMobile === 'inline-flex' ||
             displayTablet === 'flex' ||
             displayTablet === 'inline-flex' ||
+            displayTabletOnly === 'flex' ||
+            displayTabletOnly === 'inline-flex' ||
+            displayTouch === 'flex' ||
+            displayTouch === 'inline-flex' ||
             displayDesktop === 'flex' ||
             displayDesktop === 'inline-flex' ||
+            displayDesktopOnly === 'flex' ||
+            displayDesktopOnly === 'inline-flex' ||
             displayWidescreen === 'flex' ||
             displayWidescreen === 'inline-flex' ||
+            displayWidescreenOnly === 'flex' ||
+            displayWidescreenOnly === 'inline-flex' ||
             displayFullhd === 'flex' ||
             displayFullhd === 'inline-flex';
         if (hasFlexDisplay) {
@@ -799,8 +856,12 @@ const useFlexboxClasses = (props) => {
         display,
         displayMobile,
         displayTablet,
+        displayTabletOnly,
+        displayTouch,
         displayDesktop,
+        displayDesktopOnly,
         displayWidescreen,
+        displayWidescreenOnly,
         displayFullhd,
     ]);
 };
@@ -913,7 +974,7 @@ const useOtherClasses = (props) => {
  * // rest: { className: 'custom-class' }
  */
 const useBulmaClasses = (props) => {
-    const { color, backgroundColor, colorShade, backgroundColorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overlay, interaction, cursor, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayDesktop, displayWidescreen, displayFullhd, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, visibilityMobile, visibilityTablet, visibilityDesktop, visibilityWidescreen, visibilityFullhd, skeleton, clearfix, relative, fullHeight, ...rest } = props;
+    const { color, backgroundColor, colorShade, backgroundColorShade, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, textSize, textAlign, textTransform, textWeight, fontFamily, display, visibility, flexDirection, flexWrap, justifyContent, alignContent, alignItems, alignSelf, flexGrow, flexShrink, float, overflow, overlay, interaction, cursor, radius, shadow, responsive, viewport, displayMobile, displayTablet, displayTabletOnly, displayTouch, displayDesktop, displayDesktopOnly, displayWidescreen, displayWidescreenOnly, displayFullhd, textSizeMobile, textSizeTablet, textSizeDesktop, textSizeWidescreen, textSizeFullhd, textAlignMobile, textAlignTablet, textAlignDesktop, textAlignWidescreen, textAlignFullhd, visibilityMobile, visibilityTablet, visibilityTabletOnly, visibilityTouch, visibilityDesktop, visibilityDesktopOnly, visibilityWidescreen, visibilityWidescreenOnly, visibilityFullhd, skeleton, clearfix, relative, fullHeight, ...rest } = props;
     const colorClasses = useColorClasses({
         color,
         colorShade,
@@ -959,14 +1020,22 @@ const useBulmaClasses = (props) => {
         visibility,
         visibilityMobile,
         visibilityTablet,
+        visibilityTabletOnly,
+        visibilityTouch,
         visibilityDesktop,
+        visibilityDesktopOnly,
         visibilityWidescreen,
+        visibilityWidescreenOnly,
         visibilityFullhd,
         display,
         displayMobile,
         displayTablet,
+        displayTabletOnly,
+        displayTouch,
         displayDesktop,
+        displayDesktopOnly,
         displayWidescreen,
+        displayWidescreenOnly,
         displayFullhd,
         viewport,
     });
@@ -982,8 +1051,12 @@ const useBulmaClasses = (props) => {
         display,
         displayMobile,
         displayTablet,
+        displayTabletOnly,
+        displayTouch,
         displayDesktop,
+        displayDesktopOnly,
         displayWidescreen,
+        displayWidescreenOnly,
         displayFullhd,
     });
     const otherClasses = useOtherClasses({
@@ -1707,6 +1780,8 @@ const isBrowser$1 = (win, doc) => typeof win !== 'undefined' && typeof doc !== '
 const DropdownComponent = ({ label, children, className, menuClassName, active: activeProp, up, right, hoverable, disabled, onActiveChange, closeOnClick = true, id, ...props }) => {
     const [active, setActive] = useState(!!activeProp);
     const dropdownRef = useRef(null);
+    const triggerRef = useRef(null);
+    const pendingFocusRef = useRef(null);
     const { bulmaHelperClasses, rest } = useBulmaClasses(props);
     // Generate Bulma classes with prefix
     const bulmaClasses = usePrefixedClassNames('dropdown', {
@@ -1755,8 +1830,126 @@ const DropdownComponent = ({ label, children, className, menuClassName, active:
             onActiveChange?.(false);
         }
     };
+    const getMenuItems = () => {
+        /* istanbul ignore next: dropdownRef.current is never null once mounted */
+        if (!dropdownRef.current)
+            return [];
+        return Array.from(dropdownRef.current.querySelectorAll('[role="menuitem"]')).filter(el => !el.hasAttribute('disabled') &&
+            el.getAttribute('aria-disabled') !== 'true');
+    };
+    // Focus the pending menu item once the menu becomes visible; the item is
+    // unfocusable while `display: none` applies, so this must wait for the
+    // `is-active` class to actually land in the DOM.
+    useEffect(() => {
+        if (!active || !pendingFocusRef.current)
+            return;
+        const items = getMenuItems();
+        if (items.length) {
+            const index = pendingFocusRef.current === 'first' ? 0 : items.length - 1;
+            items[index].focus();
+        }
+        pendingFocusRef.current = null;
+    }, [active]);
+    const handleTriggerKeyDown = (e) => {
+        if (disabled)
+            return;
+        switch (e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                pendingFocusRef.current = 'first';
+                if (!active) {
+                    setActive(true);
+                    onActiveChange?.(true);
+                }
+                else {
+                    const items = getMenuItems();
+                    if (items.length)
+                        items[0].focus();
+                    pendingFocusRef.current = null;
+                }
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                pendingFocusRef.current = 'last';
+                if (!active) {
+                    setActive(true);
+                    onActiveChange?.(true);
+                }
+                else {
+                    const items = getMenuItems();
+                    if (items.length)
+                        items[items.length - 1].focus();
+                    pendingFocusRef.current = null;
+                }
+                break;
+            case 'Enter':
+            case ' ':
+                e.preventDefault();
+                if (!active) {
+                    pendingFocusRef.current = 'first';
+                    setActive(true);
+                    onActiveChange?.(true);
+                }
+                else {
+                    setActive(false);
+                    onActiveChange?.(false);
+                }
+                break;
+            case 'Escape':
+                if (active) {
+                    e.preventDefault();
+                    setActive(false);
+                    onActiveChange?.(false);
+                }
+                break;
+        }
+    };
+    const handleMenuKeyDown = (e) => {
+        // Escape and Tab close the menu regardless of whether it has any focusable
+        // items — an empty or all-disabled menu must still honor the close contract.
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            setActive(false);
+            onActiveChange?.(false);
+            triggerRef.current?.focus();
+            return;
+        }
+        if (e.key === 'Tab') {
+            setActive(false);
+            onActiveChange?.(false);
+            return;
+        }
+        const items = getMenuItems();
+        if (!items.length)
+            return;
+        const currentIndex = items.indexOf(document.activeElement);
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                const next = currentIndex >= 0 ? (currentIndex + 1) % items.length : 0;
+                items[next].focus();
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                const prev = currentIndex >= 0
+                    ? (currentIndex - 1 + items.length) % items.length
+                    : items.length - 1;
+                items[prev].focus();
+                break;
+            }
+            case 'Home':
+                e.preventDefault();
+                items[0].focus();
+                break;
+            case 'End':
+                e.preventDefault();
+                items[items.length - 1].focus();
+                break;
+        }
+    };
     const dropdownClasses = classNames(bulmaClasses, bulmaHelperClasses, className);
-    return (jsxs("div", { className: dropdownClasses, ref: dropdownRef, id: id, "data-testid": "dropdown-root", ...rest, children: [jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxs("button", { className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, disabled: disabled, type: "button", children: [jsx("span", { children: label }), jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", children: jsx("div", { className: usePrefixedClassNames('dropdown-content'), onClick: handleMenuClick, tabIndex: -1, children: children }) })] }));
+    return (jsxs("div", { className: dropdownClasses, ref: dropdownRef, id: id, "data-testid": "dropdown-root", ...rest, children: [jsx("div", { className: usePrefixedClassNames('dropdown-trigger'), children: jsxs("button", { ref: triggerRef, className: buttonClass, "aria-haspopup": "true", "aria-controls": id ? `${id}-menu` : undefined, "aria-expanded": active, onClick: handleToggle, onKeyDown: handleTriggerKeyDown, disabled: disabled, type: "button", children: [jsx("span", { children: label }), jsx("span", { className: usePrefixedClassNames('icon', 'is-small'), "aria-hidden": "true", children: jsx("i", { className: "fas fa-angle-down" }) })] }) }), jsx("div", { className: classNames(usePrefixedClassNames('dropdown-menu'), menuClassName), id: id ? `${id}-menu` : undefined, role: "menu", "data-testid": "dropdown-menu", onKeyDown: handleMenuKeyDown, children: jsx("div", { className: usePrefixedClassNames('dropdown-content'), onClick: handleMenuClick, tabIndex: -1, children: children }) })] }));
 };
 /**
  * Bulma Dropdown item.
@@ -2085,6 +2278,7 @@ const Modal = withSubComponents(ModalRoot, {
     Close: ModalClose,
 }, 'Modal');
 
+const NavbarDropdownContext = React.createContext(null);
 /**
  * The `Navbar` component implements Bulma's powerful, responsive navigation bar for your Bulma React UI.
  *
@@ -2208,9 +2402,45 @@ const NavbarLink = ({ className, as: Component = 'a', arrowless, textColor, bgCo
         backgroundColor: bgColor,
         ...props,
     });
+    const dropdownContext = useContext(NavbarDropdownContext);
+    const hasHref = rest.href !== undefined;
+    const isNativeInteractive = Component === 'button' || hasHref;
+    const handleKeyDown = (e) => {
+        rest.onKeyDown?.(e);
+        if (!dropdownContext || e.defaultPrevented)
+            return;
+        if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            dropdownContext.toggle();
+        }
+        else if (e.key === 'Escape' && dropdownContext.active) {
+            e.preventDefault();
+            dropdownContext.close();
+        }
+    };
+    // When the link is not natively interactive (no `href`, not a `<button>`) it
+    // renders as `role="button"`, so a mouse/touch click has no default action to
+    // open the dropdown. Compose the caller's handler and toggle the dropdown
+    // unless the caller prevented the default. Native links/buttons keep their own
+    // click semantics (navigation / the caller's handler).
+    const handleClick = (e) => {
+        rest.onClick?.(e);
+        if (!dropdownContext || isNativeInteractive || e.defaultPrevented)
+            return;
+        dropdownContext.toggle();
+    };
     return (jsx(Component, { className: classNames(usePrefixedClassNames('navbar-link', {
             'is-arrowless': arrowless,
-        }), bulmaHelperClasses, className), ...rest, children: children }));
+        }), bulmaHelperClasses, className), ...rest, ...(dropdownContext && {
+            'aria-haspopup': 'true',
+            'aria-expanded': dropdownContext.active,
+            onKeyDown: handleKeyDown,
+            ...(!isNativeInteractive && {
+                role: 'button',
+                tabIndex: 0,
+                onClick: handleClick,
+            }),
+        }), children: children }));
 };
 /**
  * Dropdown parent (with options for hover, up, right, active)
@@ -2219,12 +2449,34 @@ const NavbarLink = ({ className, as: Component = 'a', arrowless, textColor, bgCo
  * @param {NavbarDropdownProps} props - Props for the NavbarDropdown component.
  * @returns {JSX.Element} The rendered dropdown.
  */
-const NavbarDropdown = ({ className, right, up, hoverable, active, children, ...props }) => (jsx("div", { className: classNames(usePrefixedClassNames('navbar-item', 'has-dropdown', {
-        'has-dropdown-up': up,
-        'is-right': right,
-        'is-hoverable': hoverable,
-        'is-active': active,
-    }), className), ...props, children: children }));
+const NavbarDropdown = ({ className, right, up, hoverable, active: activeProp, onActiveChange, children, ...props }) => {
+    const [active, setActive] = useState(!!activeProp);
+    useEffect(() => {
+        // eslint-disable-next-line react-hooks/set-state-in-effect -- syncing to controlled prop
+        if (typeof activeProp === 'boolean')
+            setActive(activeProp);
+    }, [activeProp]);
+    // Keep `onActiveChange` out of the state updater (a pure function) so Strict
+    // Mode's double-invoked updaters don't double-fire it — mirrors `Dropdown`.
+    const toggle = () => {
+        const next = !active;
+        setActive(next);
+        onActiveChange?.(next);
+    };
+    const close = () => {
+        /* istanbul ignore next: close() is only invoked once already active */
+        if (!active)
+            return;
+        setActive(false);
+        onActiveChange?.(false);
+    };
+    return (jsx(NavbarDropdownContext.Provider, { value: { active, toggle, close }, children: jsx("div", { className: classNames(usePrefixedClassNames('navbar-item', 'has-dropdown', {
+                'has-dropdown-up': up,
+                'is-right': right,
+                'is-hoverable': hoverable,
+                'is-active': active,
+            }), className), ...props, children: children }) }));
+};
 /**
  * Dropdown menu container
  *
@@ -5599,21 +5851,22 @@ const Tag = ({ className, color, size, isLight, isRounded, isDelete, isHoverable
 
 const validTagsSizes = ['medium', 'large'];
 /**
- * The `Tags` component groups multiple `Tag` components together in a horizontal (or multiline) Bulma-styled container.
+ * The `Tags` component groups multiple `Tag` components together in a Bulma-styled container that wraps onto multiple lines by default.
  *
  * @function
  * @param {TagsProps} props - Props for the Tags component.
  * @returns {JSX.Element} The rendered tags container.
  * @see {@link https://bulma.io/documentation/elements/tag/#list-of-tags | Bulma Tags documentation}
  */
-const TagsComponent = ({ className, hasAddons, isMultiline, size, children, ...props }) => {
+const TagsComponent = ({ className, hasAddons, 
+// eslint-disable-next-line @typescript-eslint/no-unused-vars -- accepted for backwards compatibility, deprecated no-op (no `are-multiline` CSS ships)
+isMultiline, size, children, ...props }) => {
     /**
      * Generates Bulma helper classes and separates out remaining props.
      */
     const { bulmaHelperClasses, rest } = useBulmaClasses({ ...props });
     const bulmaClasses = usePrefixedClassNames('tags', {
         'has-addons': hasAddons,
-        'are-multiline': isMultiline,
         [`are-${size}`]: size && validTagsSizes.includes(size),
     });
     const tagsClasses = classNames(bulmaClasses, bulmaHelperClasses, className);