@12-apps/ui 1.4.0 → 1.4.1

package/src/components/form/Label/Label.tsx

@@ -1,296 +1,51 @@
-import {
-  alpha,
-  Box,
-  CircularProgress,
-  Tooltip,
-  Typography,
-  useTheme,
-} from '@mui/material';
+import { Box, Tooltip, Typography, useTheme } from '@mui/material';
 import React, { forwardRef } from 'react';
 
-import type { LabelProps } from './Label.types';
-
-export const Label = forwardRef<globalThis.HTMLLabelElement, LabelProps>(({
-  children,
-  htmlFor,
-  required = false,
-  disabled = false,
-  error = false,
-  variant = 'default',
-  size = 'md',
-  color = 'default',
-  glow = false,
-  pulse = false,
-  ripple = false,
-  loading = false,
-  className,
-  style,
-  tooltip,
-  helperText,
-  asteriskPlacement = 'end',
-  icon,
-  iconPosition = 'start',
-  onClick,
-  onFocus,
-  onBlur,
-  srOnly = false,
-  weight = 'regular',
-  transform = 'none',
-  align = 'left',
-  nowrap = false,
-  truncate = false,
-  dataTestId,
-  ...props
-}, ref) => {
-  const theme = useTheme();
-
-  const getSizeStyles = () => {
-    switch (size) {
-      case 'xs':
-        return {
-          fontSize: '0.75rem',
-          lineHeight: 1.2,
-          padding: theme.spacing(0.25, 0.5),
-        };
-      case 'sm':
-        return {
-          fontSize: '0.875rem',
-          lineHeight: 1.3,
-          padding: theme.spacing(0.5, 0.75),
-        };
-      case 'md':
-        return {
-          fontSize: '1rem',
-          lineHeight: 1.5,
-          padding: theme.spacing(0.75, 1),
-        };
-      case 'lg':
-        return {
-          fontSize: '1.125rem',
-          lineHeight: 1.6,
-          padding: theme.spacing(1, 1.25),
-        };
-      case 'xl':
-        return {
-          fontSize: '1.25rem',
-          lineHeight: 1.7,
-          padding: theme.spacing(1.25, 1.5),
-        };
-      default:
-        return {
-          fontSize: '1rem',
-          lineHeight: 1.5,
-          padding: theme.spacing(0.75, 1),
-        };
-    }
-  };
-
-  const getColorStyles = () => {
-    if (error) {
-      return { color: theme.palette.error.main };
-    }
-    if (disabled) {
-      return { color: theme.palette.text.disabled };
-    }
-    if (color === 'default') {
-      return { color: theme.palette.text.primary };
-    }
-    return { color: theme.palette[color].main };
-  };
-
-  const getVariantStyles = () => {
-    const baseStyles = {
-      display: srOnly ? 'none' : 'inline-flex',
-      alignItems: 'center',
-      gap: theme.spacing(0.5),
-      transition: theme.transitions.create(['all'], {
-        duration: theme.transitions.duration.standard,
-      }),
-      cursor: onClick ? 'pointer' : 'default',
-      textAlign: align,
-      fontWeight: getFontWeight(),
-      textTransform: transform,
-      whiteSpace: nowrap ? 'nowrap' : 'normal',
-      overflow: truncate ? 'hidden' : 'visible',
-      textOverflow: truncate ? 'ellipsis' : 'clip',
-      position: 'relative' as const,
-      ...getSizeStyles(),
-      ...getColorStyles(),
-    };
-
-    const glowStyles = glow ? {
-      textShadow: `0 0 10px ${alpha(getColorStyles().color || theme.palette.primary.main, 0.5)}`,
-    } : {};
-
-    const pulseStyles = pulse ? {
-      animation: 'pulse 2s infinite',
-      '@keyframes pulse': {
-        '0%': { opacity: 1 },
-        '50%': { opacity: 0.6 },
-        '100%': { opacity: 1 },
-      },
-    } : {};
-
-    const rippleStyles = ripple && onClick ? {
-      overflow: 'hidden',
-      '&::after': {
-        content: '""',
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        width: 0,
-        height: 0,
-        borderRadius: '50%',
-        backgroundColor: alpha(theme.palette.primary.main, 0.3),
-        transform: 'translate(-50%, -50%)',
-        transition: 'width 0.6s, height 0.6s',
-      },
-      '&:active::after': {
-        width: '300%',
-        height: '300%',
-      },
-    } : {};
+import { withDefaults } from '../../../utils/withDefaults';
 
-    switch (variant) {
-      case 'filled':
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          ...rippleStyles,
-          backgroundColor: alpha(getColorStyles().color || theme.palette.primary.main, 0.1),
-          borderRadius: theme.spacing(0.5),
-          '&:hover': onClick ? {
-            backgroundColor: alpha(getColorStyles().color || theme.palette.primary.main, 0.15),
-          } : {},
-        };
-
-      case 'outlined':
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          ...rippleStyles,
-          border: `1px solid ${alpha(getColorStyles().color || theme.palette.primary.main, 0.5)}`,
-          borderRadius: theme.spacing(0.5),
-          '&:hover': onClick ? {
-            borderColor: getColorStyles().color || theme.palette.primary.main,
-            backgroundColor: alpha(getColorStyles().color || theme.palette.primary.main, 0.05),
-          } : {},
-        };
-
-      case 'glass':
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          ...rippleStyles,
-          backgroundColor: alpha(theme.palette.background.paper, 0.1),
-          backdropFilter: 'blur(10px)',
-          border: `1px solid ${alpha(theme.palette.divider, 0.2)}`,
-          borderRadius: theme.spacing(0.5),
-          '&:hover': onClick ? {
-            backgroundColor: alpha(theme.palette.background.paper, 0.15),
-            borderColor: alpha(theme.palette.primary.main, 0.3),
-          } : {},
-        };
-
-      case 'gradient': {
-        const gradientColor = color === 'default' ? 'primary' : color;
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          ...rippleStyles,
-          background: `linear-gradient(135deg, ${theme.palette[gradientColor].light}, ${theme.palette[gradientColor].main})`,
-          WebkitBackgroundClip: 'text',
-          WebkitTextFillColor: 'transparent',
-          backgroundClip: 'text',
-          '&:hover': onClick ? {
-            background: `linear-gradient(135deg, ${theme.palette[gradientColor].main}, ${theme.palette[gradientColor].dark})`,
-            WebkitBackgroundClip: 'text',
-            WebkitTextFillColor: 'transparent',
-            backgroundClip: 'text',
-          } : {},
-        };
-      }
-
-      case 'minimal':
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          ...rippleStyles,
-          padding: 0,
-          '&:hover': onClick ? {
-            color: theme.palette.primary.main,
-          } : {},
-        };
-
-      default:
-        return {
-          ...baseStyles,
-          ...glowStyles,
-          ...pulseStyles,
-          ...rippleStyles,
-        };
-    }
-  };
+import { LabelBody } from './Label.parts';
+import { labelStyles, sizeStyles, SR_ONLY_SX, textColor } from './Label.styles';
+import type { LabelStyleFlags } from './Label.styles';
+import type { LabelProps } from './Label.types';
 
-  const getFontWeight = () => {
-    switch (weight) {
-      case 'light': return 300;
-      case 'regular': return 400;
-      case 'medium': return 500;
-      case 'semibold': return 600;
-      case 'bold': return 700;
-      default: return 400;
-    }
-  };
+const DEFAULTS = {
+  required: false,
+  disabled: false,
+  error: false,
+  variant: 'default',
+  size: 'md',
+  color: 'default',
+  glow: false,
+  pulse: false,
+  ripple: false,
+  loading: false,
+  asteriskPlacement: 'end',
+  iconPosition: 'start',
+  srOnly: false,
+  weight: 'regular',
+  transform: 'none',
+  align: 'left',
+  nowrap: false,
+  truncate: false,
+} satisfies Partial<LabelProps>;
+
+type ResolvedProps = LabelProps & Required<Pick<LabelProps, keyof typeof DEFAULTS>>;
+
+export const Label = forwardRef<globalThis.HTMLLabelElement, LabelProps>((props, ref) => {
+  const {
+    children, htmlFor, required, disabled, error, variant, size, color,
+    glow, pulse, ripple, loading, className, style, tooltip, helperText,
+    asteriskPlacement, icon, iconPosition, onClick, onFocus, onBlur,
+    srOnly, weight, transform, align, nowrap, truncate, dataTestId,
+    ...rest
+  } = withDefaults(props, DEFAULTS) as ResolvedProps;
 
-  const renderAsterisk = () => {
-    if (!required) return null;
-    return (
-      <Box
-        component="span"
-        sx={{
-          color: theme.palette.error.main,
-          marginLeft: asteriskPlacement === 'end' ? theme.spacing(0.5) : 0,
-          marginRight: asteriskPlacement === 'start' ? theme.spacing(0.5) : 0,
-        }}
-      >
-        *
-      </Box>
-    );
-  };
-
-  const renderIcon = () => {
-    if (!icon) return null;
-    return (
-      <Box
-        component="span"
-        sx={{
-          display: 'inline-flex',
-          alignItems: 'center',
-          fontSize: 'inherit',
-        }}
-      >
-        {icon}
-      </Box>
-    );
-  };
+  const theme = useTheme();
 
-  const renderLoading = () => {
-    if (!loading) return null;
-    return (
-      <CircularProgress
-        size={getSizeStyles().fontSize}
-        sx={{
-          color: getColorStyles().color,
-          marginLeft: theme.spacing(0.5),
-        }}
-      />
-    );
+  const flags: LabelStyleFlags = {
+    variant, size, color, weight, transform, align,
+    error, disabled, glow, pulse, ripple, srOnly, nowrap, truncate,
+    clickable: Boolean(onClick),
   };
 
   const labelContent = (
@@ -303,51 +58,44 @@ export const Label = forwardRef<globalThis.HTMLLabelElement, LabelProps>(({
       onBlur={onBlur}
       className={className}
       data-testid={dataTestId}
-      sx={{
-        ...getVariantStyles(),
-        ...style,
-      }}
-      {...props}
+      sx={{ ...labelStyles(theme, flags), ...style }}
+      {...rest}
     >
-      {asteriskPlacement === 'start' && renderAsterisk()}
-      {iconPosition === 'start' && renderIcon()}
-      {children}
-      {iconPosition === 'end' && renderIcon()}
-      {asteriskPlacement === 'end' && renderAsterisk()}
-      {renderLoading()}
+      <LabelBody
+        required={required}
+        asteriskPlacement={asteriskPlacement}
+        icon={icon}
+        iconPosition={iconPosition}
+        loading={loading}
+        fontSize={sizeStyles(theme, size).fontSize as string}
+        color={textColor(theme, flags)}
+      >
+        {children}
+      </LabelBody>
     </Box>
   );
 
-  const wrappedContent = tooltip ? (
-    <Tooltip title={tooltip} arrow>
-      {labelContent}
-    </Tooltip>
-  ) : labelContent;
+  // A screen-reader-only label is rendered on its own: the tooltip, the styling
+  // and the helper text all describe something nothing can see.
+  if (srOnly) {
+    return (
+      <Box component="label" htmlFor={htmlFor} data-testid={dataTestId} sx={SR_ONLY_SX}>
+        {children}
+      </Box>
+    );
+  }
 
   return (
     <>
-      {srOnly && (
-        <Box
-          component="label"
-          htmlFor={htmlFor}
-          data-testid={dataTestId}
-          sx={{
-            position: 'absolute',
-            width: '1px',
-            height: '1px',
-            padding: 0,
-            margin: '-1px',
-            overflow: 'hidden',
-            clip: 'rect(0, 0, 0, 0)',
-            whiteSpace: 'nowrap',
-            border: 0,
-          }}
-        >
-          {children}
-        </Box>
+      {tooltip ? (
+        <Tooltip title={tooltip} arrow>
+          {labelContent}
+        </Tooltip>
+      ) : (
+        labelContent
       )}
-      {!srOnly && wrappedContent}
-      {helperText && !srOnly && (
+
+      {helperText && (
         <Typography
           variant="caption"
           sx={{
@@ -364,4 +112,4 @@ export const Label = forwardRef<globalThis.HTMLLabelElement, LabelProps>(({
   );
 });
 
-Label.displayName = 'Label';
+Label.displayName = 'Label';

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

@@ -0,0 +1,41 @@
+import { useCallback, useRef, useState } from 'react';
+
+import type { MenubarItem, MenubarProps } from './Menubar.types';
+
+/**
+ * Which dropdown is open, and the buttons that opened them.
+ *
+ * The anchors are kept in a ref rather than state because closing needs to
+ * return focus to the button that opened the menu, and that lookup must not
+ * itself cause a render.
+ */
+export const useMenubarMenus = (onClick?: MenubarProps['onClick']) => {
+  const [activeMenu, setActiveMenu] = useState<string | null>(null);
+  const menuRefs = useRef<{ [key: string]: HTMLElement | null }>({});
+
+  const handleMenuOpen = useCallback((itemId: string, anchorEl: HTMLElement) => {
+    setActiveMenu(itemId);
+    menuRefs.current[itemId] = anchorEl;
+  }, []);
+
+  const handleMenuClose = useCallback(() => {
+    setActiveMenu((previous) => {
+      // Return focus to the button that opened the menu.
+      if (previous && menuRefs.current[previous]) {
+        menuRefs.current[previous].focus();
+      }
+      return null;
+    });
+  }, []);
+
+  const handleItemClick = useCallback(
+    (item: MenubarItem) => {
+      item.action?.();
+      onClick?.(item);
+      handleMenuClose();
+    },
+    [onClick, handleMenuClose],
+  );
+
+  return { activeMenu, menuRefs, handleMenuOpen, handleMenuClose, handleItemClick };
+};

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

@@ -0,0 +1,121 @@
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
+import {
+  Box,
+  Button,
+  Chip,
+  Divider,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  useTheme,
+} from '@mui/material';
+import React from 'react';
+
+import { sizeStyles } from './Menubar.styles';
+import type { MenubarItem, MenubarProps } from './Menubar.types';
+
+export interface MenubarItemViewProps {
+  item: MenubarItem;
+  size: NonNullable<MenubarProps['size']>;
+  disabled: boolean;
+  isOpen: boolean;
+  anchorEl: HTMLElement | null;
+  onOpen: (itemId: string, anchorEl: HTMLElement) => void;
+  onActivate: (item: MenubarItem) => void;
+  onClose: () => void;
+  onFocus?: React.FocusEventHandler;
+  onBlur?: React.FocusEventHandler;
+}
+
+/** One row of an open menu: its icon, its label, and its shortcut hint. */
+const DropdownItem: React.FC<{ child: MenubarItem; onActivate: (item: MenubarItem) => void }> = ({
+  child,
+  onActivate,
+}) =>
+  child.divider ? (
+    <Divider />
+  ) : (
+    <MenuItem onClick={() => onActivate(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>
+  );
+
+/**
+ * A top-level menubar entry. An entry with children opens its dropdown; one
+ * without acts immediately — a decision the click and keyboard paths both need,
+ * so it is made once here rather than in each handler.
+ */
+export const MenubarItemView: React.FC<MenubarItemViewProps> = ({
+  item,
+  size,
+  disabled,
+  isOpen,
+  anchorEl,
+  onOpen,
+  onActivate,
+  onClose,
+  onFocus,
+  onBlur,
+}) => {
+  const theme = useTheme();
+  const hasChildren = Boolean(item.children && item.children.length > 0);
+
+  const activate = (target: HTMLElement) => {
+    if (hasChildren) {
+      onOpen(item.id, target);
+    } else {
+      onActivate(item);
+    }
+  };
+
+  return (
+    <Box>
+      <Button
+        data-testid={`menubar-button-${item.id}`}
+        onClick={(e) => activate(e.currentTarget)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            activate(e.currentTarget);
+          }
+        }}
+        // Keeping focus on mousedown is what lets handleMenuClose return it here.
+        onMouseDown={(e) => 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 ? isOpen : undefined}
+        sx={{ color: 'inherit', textTransform: 'none', ...sizeStyles(theme, size) }}
+      >
+        {item.label}
+      </Button>
+
+      {hasChildren && (
+        <Menu
+          anchorEl={anchorEl}
+          open={isOpen}
+          onClose={onClose}
+          autoFocus
+          PaperProps={{ sx: { minWidth: 200, mt: 1 } }}
+        >
+          {item.children?.map((child) => (
+            <DropdownItem key={child.id} child={child} onActivate={onActivate} />
+          ))}
+        </Menu>
+      )}
+    </Box>
+  );
+};

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

@@ -0,0 +1,25 @@
+import { Divider } from '@mui/material';
+import React from 'react';
+
+import type { MenubarSeparatorProps } from './Menubar.types';
+
+/**
+ * The rule between two entries. Its own orientation is the bar's turned ninety
+ * degrees: a horizontal bar is divided by vertical rules.
+ */
+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,
+    }}
+  />
+);