@kcascend/liquid-ui 0.0.4 → 0.0.6

package/dist/components/HeaderShell/HeaderShell.js

@@ -1,8 +1,8 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId, useMemo, useState } from 'react';
-import { Icon } from '../Icon/Icon';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useId, useMemo, useState } from "react";
+import { Icon } from "../Icon/Icon";
 function getClassName(className) {
-    return ['liquid-header-shell', className].filter(Boolean).join(' ');
+    return ["liquid-header-shell", className].filter(Boolean).join(" ");
 }
 function getFirstEnabledNavigationItem(items) {
     return items?.find((item) => !item.disabled)?.id;
@@ -10,61 +10,90 @@ function getFirstEnabledNavigationItem(items) {
 function HeaderNavigationLink({ activeItemId, item, onSelect, }) {
     const isSelected = item.id === activeItemId;
     if (item.href) {
-        return (_jsx("a", { className: "liquid-header-shell__nav-link", "data-selected": isSelected ? 'true' : undefined, href: item.href, onClick: (event) => {
+        return (_jsx("a", { className: "liquid-header-shell__nav-link", "data-selected": isSelected ? "true" : undefined, href: item.href, onClick: (event) => {
                 if (item.disabled) {
                     event.preventDefault();
                     return;
                 }
                 onSelect(item);
-            }, "aria-current": isSelected ? 'page' : undefined, "aria-disabled": item.disabled ? true : undefined, children: item.label }));
+            }, "aria-current": isSelected ? "page" : undefined, "aria-disabled": item.disabled ? true : undefined, children: item.label }));
     }
-    return (_jsx("button", { className: "liquid-header-shell__nav-link", "data-selected": isSelected ? 'true' : undefined, disabled: item.disabled, onClick: () => {
+    return (_jsx("button", { className: "liquid-header-shell__nav-link", "data-selected": isSelected ? "true" : undefined, disabled: item.disabled, onClick: () => {
             if (!item.disabled) {
                 onSelect(item);
             }
-        }, type: "button", "aria-current": isSelected ? 'page' : undefined, children: item.label }));
+        }, type: "button", "aria-current": isSelected ? "page" : undefined, children: item.label }));
 }
-function HeaderUtilityAction({ action, onAction, }) {
+function HeaderUtilityAction({ action, showLabel = false, onAction, }) {
     const icon = _jsx(Icon, { name: action.icon, size: action.iconSize ?? 20 });
     if (action.href) {
-        return (_jsx("a", { "aria-label": action.label, className: "liquid-header-shell__action", href: action.href, onClick: (event) => {
+        return (_jsxs("a", { "aria-label": action.label, className: "liquid-header-shell__action", href: action.href, onClick: (event) => {
                 if (action.disabled) {
                     event.preventDefault();
                     return;
                 }
                 onAction(action);
-            }, "aria-disabled": action.disabled ? true : undefined, children: icon }));
+            }, "aria-disabled": action.disabled ? true : undefined, children: [icon, showLabel ? (_jsx("span", { className: "liquid-header-shell__action-label", children: action.label })) : null] }));
     }
-    return (_jsx("button", { "aria-label": action.label, className: "liquid-header-shell__action", disabled: action.disabled, onClick: () => {
+    return (_jsxs("button", { "aria-label": action.label, className: "liquid-header-shell__action", disabled: action.disabled, onClick: () => {
             if (!action.disabled) {
                 onAction(action);
             }
-        }, type: "button", children: icon }));
+        }, type: "button", children: [icon, showLabel ? (_jsx("span", { className: "liquid-header-shell__action-label", children: action.label })) : null] }));
 }
-export function HeaderShell({ activeNavigationItemId, actions, brand, className, defaultActiveNavigationItemId, menuTriggerLabel = 'Open menu', navigationItems, navLabel = 'Primary', onAction, onMenuTriggerClick, onNavigationChange, showMenuTrigger, style, ...props }) {
+export function HeaderShell({ activeNavigationItemId, actions, brand, className, defaultActiveNavigationItemId, menuTriggerLabel = "Open menu", navigationItems, navLabel = "Primary", onAction, onMenuTriggerClick, onNavigationChange, showMenuTrigger, style, ...props }) {
     const fallbackActiveId = useMemo(() => getFirstEnabledNavigationItem(navigationItems), [navigationItems]);
     const [internalActiveId, setInternalActiveId] = useState(defaultActiveNavigationItemId ?? fallbackActiveId);
     const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
     const mobileAccordionId = useId();
     const shouldShowMenuTrigger = showMenuTrigger ?? true;
     const resolvedActiveId = activeNavigationItemId ?? internalActiveId ?? fallbackActiveId;
+    const closeMobileMenu = () => {
+        setIsMobileMenuOpen(false);
+    };
     const handleNavigationSelect = (item) => {
         if (activeNavigationItemId === undefined) {
             setInternalActiveId(item.id);
         }
         onNavigationChange?.(item.id, item);
-        setIsMobileMenuOpen(false);
+        closeMobileMenu();
     };
     const handleAction = (action) => {
         onAction?.(action.id, action);
         action.onClick?.();
-        setIsMobileMenuOpen(false);
+        closeMobileMenu();
     };
     const handleMenuTriggerClick = () => {
         setIsMobileMenuOpen((current) => !current);
         onMenuTriggerClick?.();
     };
+    useEffect(() => {
+        if (!isMobileMenuOpen) {
+            return;
+        }
+        const handleEscape = (event) => {
+            if (event.key === "Escape") {
+                closeMobileMenu();
+            }
+        };
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        window.addEventListener("keydown", handleEscape);
+        return () => {
+            document.body.style.overflow = previousOverflow;
+            window.removeEventListener("keydown", handleEscape);
+        };
+    }, [isMobileMenuOpen]);
     const navigationContent = (_jsx(_Fragment, { children: navigationItems.map((item) => (_jsx(HeaderNavigationLink, { activeItemId: resolvedActiveId, item: item, onSelect: handleNavigationSelect }, item.id))) }));
     const actionsContent = actions?.length ? (_jsx(_Fragment, { children: actions.map((action) => (_jsx(HeaderUtilityAction, { action: action, onAction: handleAction }, action.id))) })) : null;
-    return (_jsxs("header", { ...props, className: getClassName(className), "data-mobile-menu-enabled": shouldShowMenuTrigger ? 'true' : undefined, style: style, children: [_jsxs("div", { className: "liquid-header-shell__inner", children: [_jsxs("div", { className: "liquid-header-shell__left", children: [shouldShowMenuTrigger ? (_jsx("button", { "aria-label": menuTriggerLabel, "aria-controls": mobileAccordionId, "aria-expanded": isMobileMenuOpen, className: "liquid-header-shell__action liquid-header-shell__menu-trigger", onClick: handleMenuTriggerClick, type: "button", children: _jsx(Icon, { name: "menu", size: 20 }) })) : null, _jsx("div", { className: "liquid-header-shell__brand", children: brand }), _jsx("nav", { "aria-label": navLabel, className: "liquid-header-shell__nav", children: _jsx("div", { className: "liquid-header-shell__nav-list", children: navigationContent }) })] }), actionsContent ? (_jsx("div", { className: "liquid-header-shell__actions", children: actionsContent })) : null, shouldShowMenuTrigger ? (_jsx("div", { "aria-hidden": "true", className: "liquid-header-shell__right-spacer" })) : null] }), shouldShowMenuTrigger ? (_jsxs("div", { className: "liquid-header-shell__mobile-accordion", hidden: !isMobileMenuOpen, id: mobileAccordionId, role: "region", children: [_jsx("nav", { "aria-label": navLabel, className: "liquid-header-shell__mobile-nav", children: _jsx("div", { className: "liquid-header-shell__mobile-nav-list", children: navigationContent }) }), actionsContent ? (_jsx("div", { className: "liquid-header-shell__mobile-actions", children: actionsContent })) : null] })) : null] }));
+    const mobileActionsContent = actions?.length ? (_jsx(_Fragment, { children: actions.map((action) => (_jsx(HeaderUtilityAction, { action: action, showLabel: true, onAction: handleAction }, `mobile:${action.id}`))) })) : null;
+    return (_jsxs("header", { ...props, className: getClassName(className), "data-mobile-menu-enabled": shouldShowMenuTrigger ? "true" : undefined, style: style, children: [_jsxs("div", { className: "liquid-header-shell__inner", children: [_jsxs("div", { className: "liquid-header-shell__left", children: [shouldShowMenuTrigger ? (_jsx("button", { "aria-label": menuTriggerLabel, "aria-controls": mobileAccordionId, "aria-expanded": isMobileMenuOpen, className: "liquid-header-shell__action liquid-header-shell__menu-trigger", onClick: handleMenuTriggerClick, type: "button", children: _jsx(Icon, { name: isMobileMenuOpen ? "close" : "menu", size: 20 }) })) : null, _jsx("div", { className: "liquid-header-shell__brand", children: brand }), _jsx("nav", { "aria-label": navLabel, className: "liquid-header-shell__nav", children: _jsx("div", { className: "liquid-header-shell__nav-list", children: navigationContent }) })] }), actionsContent ? (_jsx("div", { className: "liquid-header-shell__actions", children: actionsContent })) : null, shouldShowMenuTrigger ? (_jsx("div", { "aria-hidden": "true", className: "liquid-header-shell__right-spacer" })) : null] }), shouldShowMenuTrigger ? (_jsxs("div", { className: "liquid-header-shell__mobile-layer", "data-open": isMobileMenuOpen ? "true" : undefined, hidden: !isMobileMenuOpen, children: [_jsx("button", { "aria-label": "Close menu", className: "liquid-header-shell__mobile-backdrop", onClick: () => {
+                            closeMobileMenu();
+                        }, type: "button" }), _jsxs("aside", { className: "liquid-header-shell__mobile-panel", id: mobileAccordionId, role: "dialog", "aria-modal": "true", "aria-label": navLabel, onClick: (event) => {
+                            const target = event.target;
+                            if (target.closest(".liquid-header-shell__nav-link") ||
+                                target.closest(".liquid-header-shell__action")) {
+                                closeMobileMenu();
+                            }
+                        }, children: [_jsx("nav", { "aria-label": navLabel, className: "liquid-header-shell__mobile-nav", children: _jsx("div", { className: "liquid-header-shell__mobile-nav-list", children: navigationContent }) }), mobileActionsContent ? (_jsx("div", { className: "liquid-header-shell__mobile-actions", children: mobileActionsContent })) : null] })] })) : null] }));
 }