@12-apps/ui 1.4.0 → 1.4.1

package/src/components/form/Menubar/Menubar.styles.ts

@@ -0,0 +1,110 @@
+import { alpha } from '@mui/material';
+import type { CSSObject, Theme } from '@mui/material';
+
+import type { MenubarProps } from './Menubar.types';
+
+type Size = NonNullable<MenubarProps['size']>;
+type Variant = NonNullable<MenubarProps['variant']>;
+type Color = NonNullable<MenubarProps['color']>;
+
+const SIZES: Record<Size, (theme: Theme) => CSSObject> = {
+  xs: (theme) => ({ minHeight: 40, fontSize: '0.75rem', padding: theme.spacing(0.5, 1) }),
+  sm: (theme) => ({ minHeight: 48, fontSize: '0.875rem', padding: theme.spacing(0.75, 1.5) }),
+  md: (theme) => ({ minHeight: 56, fontSize: '1rem', padding: theme.spacing(1, 2) }),
+  lg: (theme) => ({ minHeight: 64, fontSize: '1.125rem', padding: theme.spacing(1.25, 2.5) }),
+  xl: (theme) => ({ minHeight: 72, fontSize: '1.25rem', padding: theme.spacing(1.5, 3) }),
+};
+
+export const sizeStyles = (theme: Theme, size: Size): CSSObject =>
+  (SIZES[size] ?? SIZES.md)(theme);
+
+/** `default` is not a palette entry — it means the paper surface and its text. */
+const accentOf = (theme: Theme, color: Color) =>
+  color === 'default' ? theme.palette.primary.main : theme.palette[color].main;
+
+const colorStyles = (theme: Theme, color: Color, transparent: boolean): CSSObject => {
+  const surface =
+    color === 'default'
+      ? { backgroundColor: theme.palette.background.paper, color: theme.palette.text.primary }
+      : { backgroundColor: theme.palette[color].main, color: theme.palette[color].contrastText };
+
+  return transparent ? { ...surface, backgroundColor: 'transparent' } : surface;
+};
+
+interface MenubarStyleFlags {
+  variant: Variant;
+  size: Size;
+  color: Color;
+  glow: boolean;
+  pulse: boolean;
+  glass: boolean;
+  gradient: boolean;
+  blur: boolean;
+  transparent: boolean;
+  elevation: number;
+}
+
+/**
+ * Each variant's own additions to the shared bar. The `glass` and `gradient`
+ * arms deliberately do not take the blur spread: glass sets its own
+ * backdropFilter, and a blurred gradient loses the gradient.
+ */
+const SURFACES: Record<Variant, (theme: Theme, flags: MenubarStyleFlags) => CSSObject> = {
+  glass: (theme, { glass }) => ({
+    backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.8),
+    backdropFilter: 'blur(20px)',
+    borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
+  }),
+
+  gradient: (theme, { color, gradient }) => {
+    const key = color === 'default' ? 'primary' : color;
+    return {
+      background: gradient
+        ? `linear-gradient(135deg, ${theme.palette[key].light}, ${theme.palette[key].dark})`
+        : theme.palette[key].main,
+      color: theme.palette[key].contrastText,
+    };
+  },
+
+  elevated: (theme, { blur, elevation }) => ({
+    ...(blur && { backdropFilter: 'blur(10px)' }),
+    boxShadow: theme.shadows[elevation],
+  }),
+
+  minimal: (_theme, { blur }) => ({
+    ...(blur && { backdropFilter: 'blur(10px)' }),
+    boxShadow: 'none',
+    borderBottom: 'none',
+  }),
+
+  bordered: (theme, { blur, color }) => ({
+    ...(blur && { backdropFilter: 'blur(10px)' }),
+    borderBottom: `2px solid ${
+      color === 'default' ? theme.palette.divider : theme.palette[color].main
+    }`,
+  }),
+
+  default: (_theme, { blur }) => ({ ...(blur && { backdropFilter: 'blur(10px)' }) }),
+};
+
+export const barStyles = (theme: Theme, flags: MenubarStyleFlags): CSSObject => {
+  const { variant, size, color, glow, pulse, transparent } = flags;
+
+  return {
+    transition: theme.transitions.create(['all'], {
+      duration: theme.transitions.duration.standard,
+    }),
+    ...sizeStyles(theme, size),
+    ...colorStyles(theme, color, transparent),
+    ...(glow && { boxShadow: `0 0 20px ${alpha(accentOf(theme, color), 0.4)}` }),
+    ...(pulse && {
+      animation: 'pulse 2s infinite',
+      '@keyframes pulse': {
+        '0%': { opacity: 1 },
+        '50%': { opacity: 0.8 },
+        '100%': { opacity: 1 },
+      },
+    }),
+    ...(SURFACES[variant] ?? SURFACES.default)(theme, flags),
+  };
+};

package/src/components/form/Menubar/Menubar.toolbar.tsx

@@ -0,0 +1,103 @@
+import { Box, CircularProgress, Toolbar } from '@mui/material';
+import type { CSSObject } from '@mui/material';
+import React from 'react';
+
+import { MenubarItemView } from './Menubar.item';
+import { MenubarSeparator } from './Menubar.separator';
+import type { MenubarItem, MenubarProps } from './Menubar.types';
+
+export interface MenubarToolbarProps {
+  barSx: CSSObject;
+  items: MenubarItem[];
+  size: NonNullable<MenubarProps['size']>;
+  orientation: NonNullable<MenubarProps['orientation']>;
+  disabled: boolean;
+  loading: boolean;
+  logo?: React.ReactNode;
+  endContent?: React.ReactNode;
+  fullWidth: boolean;
+  activeMenu: string | null;
+  menuRefs: React.MutableRefObject<{ [key: string]: HTMLElement | null }>;
+  onOpen: (itemId: string, anchorEl: HTMLElement) => void;
+  onActivate: (item: MenubarItem) => void;
+  onClose: () => void;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+}
+
+/**
+ * The bar's contents: an optional logo, the entries themselves, and whatever the
+ * caller hangs off the end. Shared by both orientations — only the element
+ * wrapping it differs.
+ */
+export const MenubarToolbar: React.FC<MenubarToolbarProps> = ({
+  barSx,
+  items,
+  size,
+  orientation,
+  disabled,
+  loading,
+  logo,
+  endContent,
+  fullWidth,
+  activeMenu,
+  menuRefs,
+  onOpen,
+  onActivate,
+  onClose,
+  onFocus,
+  onBlur,
+}) => {
+  const isVertical = orientation === 'vertical';
+
+  return (
+    <Toolbar
+      role="toolbar"
+      aria-label="Main navigation"
+      sx={{
+        ...barSx,
+        width: fullWidth ? '100%' : 'auto',
+        flexDirection: isVertical ? 'column' : 'row',
+        alignItems: isVertical ? 'flex-start' : 'center',
+        gap: 1,
+      }}
+    >
+      {logo && <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>{logo}</Box>}
+
+      {loading ? (
+        <CircularProgress size={20} color="inherit" />
+      ) : (
+        <Box
+          sx={{
+            display: 'flex',
+            flexDirection: isVertical ? 'column' : 'row',
+            gap: isVertical ? 0.5 : 1,
+            flex: 1,
+          }}
+        >
+          {items.map((item) =>
+            item.divider ? (
+              <MenubarSeparator key={item.id} orientation={orientation} />
+            ) : (
+              <MenubarItemView
+                key={item.id}
+                item={item}
+                size={size}
+                disabled={disabled}
+                isOpen={activeMenu === item.id}
+                anchorEl={menuRefs.current[item.id] ?? null}
+                onOpen={onOpen}
+                onActivate={onActivate}
+                onClose={onClose}
+                onFocus={onFocus}
+                onBlur={onBlur}
+              />
+            ),
+          )}
+        </Box>
+      )}
+
+      {endContent && <Box sx={{ ml: 'auto' }}>{endContent}</Box>}
+    </Toolbar>
+  );
+};

package/src/components/form/Menubar/Menubar.tsx

@@ -1,357 +1,91 @@
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import {
-  alpha,
   AppBar,
   Box,
   Button,
-  Chip,
-  CircularProgress,
   Divider,
   ListItemIcon,
   ListItemText,
   Menu,
   MenuItem,
-  Toolbar,
   Typography,
   useTheme,
 } from '@mui/material';
-import React, { useRef,useState } from 'react';
+import React, { useState } from 'react';
 
+import { withDefaults } from '../../../utils/withDefaults';
+
+import { useMenubarMenus } from './Menubar.hooks';
+import { barStyles } from './Menubar.styles';
+import { MenubarToolbar } from './Menubar.toolbar';
 import type {
   MenubarGroupProps,
   MenubarItem,
   MenubarProps,
-  MenubarSeparatorProps,
 } from './Menubar.types';
 
-export const Menubar: React.FC<MenubarProps> = ({
-  items,
-  variant = 'default',
-  size = 'md',
-  color = 'default',
-  orientation = 'horizontal',
-  glow = false,
-  pulse = false,
-  glass = false,
-  gradient = false,
-  loading = false,
-  disabled = false,
-  className,
-  style,
-  logo,
-  endContent,
-  sticky = false,
-  transparent = false,
-  blur = false,
-  elevation = 4,
-  fullWidth = true,
-  onClick,
-  onFocus,
-  onBlur,
-  'data-testid': dataTestId,
-}) => {
-  const theme = useTheme();
-  const [activeMenu, setActiveMenu] = useState<string | null>(null);
-  const menuRefs = useRef<{ [key: string]: HTMLElement | null }>({});
-
-  const handleMenuOpen = (itemId: string, anchorEl: HTMLElement) => {
-    setActiveMenu(itemId);
-    menuRefs.current[itemId] = anchorEl;
-  };
-
-  const handleMenuClose = () => {
-    const previousMenu = activeMenu;
-    setActiveMenu(null);
-    // Return focus to the button that opened the menu
-    if (previousMenu && menuRefs.current[previousMenu]) {
-      menuRefs.current[previousMenu].focus();
-    }
-  };
-
-  const handleItemClick = (item: MenubarItem) => {
-    if (item.action) {
-      item.action();
-    }
-    onClick?.(item);
-    handleMenuClose();
-  };
-
-  const getSizeStyles = () => {
-    switch (size) {
-      case 'xs':
-        return {
-          minHeight: 40,
-          fontSize: '0.75rem',
-          padding: theme.spacing(0.5, 1),
-        };
-      case 'sm':
-        return {
-          minHeight: 48,
-          fontSize: '0.875rem',
-          padding: theme.spacing(0.75, 1.5),
-        };
-      case 'md':
-        return {
-          minHeight: 56,
-          fontSize: '1rem',
-          padding: theme.spacing(1, 2),
-        };
-      case 'lg':
-        return {
-          minHeight: 64,
-          fontSize: '1.125rem',
-          padding: theme.spacing(1.25, 2.5),
-        };
-      case 'xl':
-        return {
-          minHeight: 72,
-          fontSize: '1.25rem',
-          padding: theme.spacing(1.5, 3),
-        };
-      default:
-        return {
-          minHeight: 56,
-          fontSize: '1rem',
-          padding: theme.spacing(1, 2),
-        };
-    }
-  };
-
-  const getColorStyles = () => {
-    if (color === 'default') {
-      return {
-        backgroundColor: transparent ? 'transparent' : theme.palette.background.paper,
-        color: theme.palette.text.primary,
-      };
-    }
-    return {
-      backgroundColor: transparent ? 'transparent' : theme.palette[color].main,
-      color: theme.palette[color].contrastText,
-    };
-  };
-
-  const getVariantStyles = () => {
-    const baseStyles = {
-      transition: theme.transitions.create(['all'], {
-        duration: theme.transitions.duration.standard,
-      }),
-      ...getSizeStyles(),
-      ...getColorStyles(),
-    };
-
-    const glowStyles = glow
-      ? {
-          boxShadow: `0 0 20px ${alpha(
-            color === 'default' ? theme.palette.primary.main : theme.palette[color].main,
-            0.4,
-          )}`,
-        }
-      : {};
-
-    const pulseStyles = pulse
-      ? {
-          animation: 'pulse 2s infinite',
-          '@keyframes pulse': {
-            '0%': { opacity: 1 },
-            '50%': { opacity: 0.8 },
-            '100%': { opacity: 1 },
-          },
-        }
-      : {};
+const DEFAULTS = {
+  variant: 'default',
+  size: 'md',
+  color: 'default',
+  orientation: 'horizontal',
+  glow: false,
+  pulse: false,
+  glass: false,
+  gradient: false,
+  loading: false,
+  disabled: false,
+  sticky: false,
+  transparent: false,
+  blur: false,
+  elevation: 4,
+  fullWidth: true,
+} satisfies Partial<MenubarProps>;
+
+type ResolvedProps = MenubarProps & Required<Pick<MenubarProps, keyof typeof DEFAULTS>>;
+
+export const Menubar: React.FC<MenubarProps> = (props) => {
+  const {
+    items, variant, size, color, orientation, glow, pulse, glass, gradient,
+    loading, disabled, className, style, logo, endContent, sticky, transparent,
+    blur, elevation, fullWidth, onClick, onFocus, onBlur,
+    'data-testid': dataTestId,
+  } = withDefaults(props, DEFAULTS) as ResolvedProps;
 
-    const blurStyles = blur
-      ? {
-          backdropFilter: 'blur(10px)',
-        }
-      : {};
-
-    switch (variant) {
-      case 'glass':
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          backgroundColor: alpha(theme.palette.background.paper, glass ? 0.1 : 0.8),
-          backdropFilter: 'blur(20px)',
-          borderBottom: `1px solid ${alpha(theme.palette.divider, 0.1)}`,
-        };
-
-      case 'gradient': {
-        const gradientColor = color === 'default' ? 'primary' : color;
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          background: gradient
-            ? `linear-gradient(135deg, ${theme.palette[gradientColor].light}, ${theme.palette[gradientColor].dark})`
-            : theme.palette[gradientColor].main,
-          color: theme.palette[gradientColor].contrastText,
-        };
-      }
-
-      case 'elevated':
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          ...blurStyles,
-          boxShadow: theme.shadows[elevation],
-        };
-
-      case 'minimal':
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          ...blurStyles,
-          boxShadow: 'none',
-          borderBottom: 'none',
-        };
-
-      case 'bordered':
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          ...blurStyles,
-          borderBottom: `2px solid ${
-            color === 'default' ? theme.palette.divider : theme.palette[color].main
-          }`,
-        };
-
-      default:
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          ...blurStyles,
-        };
-    }
-  };
+  const theme = useTheme();
+  const { activeMenu, menuRefs, handleMenuOpen, handleMenuClose, handleItemClick } =
+    useMenubarMenus(onClick);
 
-  const renderMenubarItem = (item: MenubarItem) => {
-    if (item.divider) {
-      return <MenubarSeparator key={item.id} orientation={orientation} />;
-    }
+  const isVertical = orientation === 'vertical';
 
-    const hasChildren = item.children && item.children.length > 0;
-
-    return (
-      <Box key={item.id}>
-        <Button
-          data-testid={`menubar-button-${item.id}`}
-          onClick={(e) => {
-            if (hasChildren) {
-              handleMenuOpen(item.id, e.currentTarget);
-            } else {
-              handleItemClick(item);
-            }
-          }}
-          onKeyDown={(e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              e.preventDefault();
-              if (hasChildren) {
-                handleMenuOpen(item.id, e.currentTarget);
-              } else {
-                handleItemClick(item);
-              }
-            }
-          }}
-          onMouseDown={(e) => {
-            // Prevent default to maintain focus
-            e.preventDefault();
-          }}
-          onFocus={onFocus}
-          onBlur={onBlur}
-          disabled={item.disabled || disabled}
-          startIcon={item.icon}
-          endIcon={hasChildren ? <KeyboardArrowDownIcon /> : null}
-          aria-haspopup={hasChildren ? 'menu' : undefined}
-          aria-expanded={hasChildren ? activeMenu === item.id : undefined}
-          sx={{
-            color: 'inherit',
-            textTransform: 'none',
-            ...getSizeStyles(),
-          }}
-        >
-          {item.label}
-        </Button>
-
-        {hasChildren && (
-          <Menu
-            anchorEl={menuRefs.current[item.id]}
-            open={activeMenu === item.id}
-            onClose={handleMenuClose}
-            autoFocus
-            PaperProps={{
-              sx: {
-                minWidth: 200,
-                mt: 1,
-              },
-            }}
-          >
-            {item.children?.map((child) =>
-              child.divider ? (
-                <Divider key={child.id} />
-              ) : (
-                <MenuItem
-                  key={child.id}
-                  onClick={() => handleItemClick(child)}
-                  disabled={child.disabled}
-                >
-                  {child.icon && <ListItemIcon>{child.icon}</ListItemIcon>}
-                  <ListItemText>{child.label}</ListItemText>
-                  {child.shortcut && (
-                    <Chip
-                      label={child.shortcut}
-                      size="small"
-                      variant="outlined"
-                      sx={{ ml: 2, height: 20, fontSize: '0.7rem' }}
-                    />
-                  )}
-                </MenuItem>
-              ),
-            )}
-          </Menu>
-        )}
-      </Box>
-    );
-  };
+  const barSx = barStyles(theme, {
+    variant, size, color, glow, pulse, glass, gradient, blur, transparent, elevation,
+  });
 
   const content = (
-    <Toolbar
-      role="toolbar"
-      aria-label="Main navigation"
-      sx={{
-        ...getVariantStyles(),
-        width: fullWidth ? '100%' : 'auto',
-        flexDirection: orientation === 'vertical' ? 'column' : 'row',
-        alignItems: orientation === 'vertical' ? 'flex-start' : 'center',
-        gap: 1,
-      }}
-    >
-      {logo && <Box sx={{ mr: 2, display: 'flex', alignItems: 'center' }}>{logo}</Box>}
-
-      {loading ? (
-        <CircularProgress size={20} color="inherit" />
-      ) : (
-        <Box
-          sx={{
-            display: 'flex',
-            flexDirection: orientation === 'vertical' ? 'column' : 'row',
-            gap: orientation === 'vertical' ? 0.5 : 1,
-            flex: 1,
-          }}
-        >
-          {items.map(renderMenubarItem)}
-        </Box>
-      )}
-
-      {endContent && <Box sx={{ ml: 'auto' }}>{endContent}</Box>}
-    </Toolbar>
+    <MenubarToolbar
+      barSx={barSx}
+      items={items}
+      size={size}
+      orientation={orientation}
+      disabled={disabled}
+      loading={loading}
+      logo={logo}
+      endContent={endContent}
+      fullWidth={fullWidth}
+      activeMenu={activeMenu}
+      menuRefs={menuRefs}
+      onOpen={handleMenuOpen}
+      onActivate={handleItemClick}
+      onClose={handleMenuClose}
+      onFocus={onFocus}
+      onBlur={onBlur}
+    />
   );
 
-  if (orientation === 'vertical') {
+  // A vertical bar is not an app bar: AppBar's fixed/sticky positioning assumes
+  // a horizontal strip at the top of the page.
+  if (isVertical) {
     return (
       <Box
         className={className}
@@ -372,10 +106,7 @@ export const Menubar: React.FC<MenubarProps> = ({
       position={sticky ? 'sticky' : 'static'}
       className={className}
       data-testid={dataTestId}
-      sx={{
-        ...getVariantStyles(),
-        ...style,
-      }}
+      sx={{ ...barSx, ...style }}
       elevation={0}
       component="header"
     >
@@ -384,6 +115,7 @@ export const Menubar: React.FC<MenubarProps> = ({
   );
 };
 
+
 export const MenubarGroup: React.FC<MenubarGroupProps> = ({
   label,
   items,
@@ -449,19 +181,4 @@ export const MenubarGroup: React.FC<MenubarGroupProps> = ({
   );
 };
 
-export const MenubarSeparator: React.FC<MenubarSeparatorProps> = ({
-  orientation = 'horizontal',
-  className,
-  style,
-}) => (
-    <Divider
-      orientation={orientation === 'horizontal' ? 'vertical' : 'horizontal'}
-      flexItem
-      className={className}
-      sx={{
-        mx: orientation === 'horizontal' ? 1 : 0,
-        my: orientation === 'vertical' ? 1 : 0,
-        ...style,
-      }}
-    />
-  );
+export { MenubarSeparator } from './Menubar.separator';