@12-apps/ui 1.0.0 → 1.3.1

package/src/components/navigation/DropdownMenu/DropdownMenu.tsx

@@ -1,4 +1,5 @@
-import { ChevronRight, MoreVert } from '@mui/icons-material';
+import ChevronRight from '@mui/icons-material/ChevronRight';
+import MoreVert from '@mui/icons-material/MoreVert';
 import {
   alpha,
   Box,
@@ -10,10 +11,60 @@ import {
   Typography,
 } from '@mui/material';
 import { styled } from '@mui/material/styles';
+import type { CSSObject, Theme } from '@mui/material/styles';
 import React, { cloneElement, isValidElement,useRef, useState } from 'react';
 
 import type { DropdownMenuItem,DropdownMenuProps } from './DropdownMenu.types';
 
+// Resolves every light/dark decision once. The inline version repeated
+// `theme.palette.mode === 'dark' ? … : …` nine times, and two of those had the
+// SAME expression on both branches (background.paper, and common.white for the
+// inset highlight) — so they read as mode-dependent while never varying.
+const glassTokens = (theme: Theme) => {
+  const isDark = theme.palette.mode === 'dark';
+
+  return {
+    edge: isDark ? theme.palette.common.white : theme.palette.common.black,
+    dropShadowAlpha: isDark ? 0.4 : 0.12,
+    insetHighlightAlpha: isDark ? 0.2 : 0.8,
+    sheenAlpha: isDark ? 0.1 : 0.8,
+  };
+};
+
+const glassMenuStyles = (theme: Theme): CSSObject => {
+  const { edge, dropShadowAlpha, insetHighlightAlpha, sheenAlpha } = glassTokens(theme);
+
+  return {
+    backgroundColor: alpha(theme.palette.background.paper, 0.75),
+    backdropFilter: 'blur(24px) saturate(1.8)',
+    WebkitBackdropFilter: 'blur(24px) saturate(1.8)', // Safari support
+    border: `1px solid ${alpha(edge, 0.12)}`,
+    boxShadow: [
+      `0 8px 32px ${alpha(theme.palette.common.black, dropShadowAlpha)}`,
+      `0 0 0 1px ${alpha(edge, 0.05)}`,
+      `inset 0 1px 0 ${alpha(theme.palette.common.white, insetHighlightAlpha)}`,
+    ].join(', '),
+    // Enhanced glass morphism with subtle gradient overlay
+    '&::before': {
+      content: '""',
+      position: 'absolute',
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      background: `linear-gradient(135deg, ${alpha(theme.palette.common.white, sheenAlpha)} 0%, transparent 50%)`,
+      borderRadius: 'inherit',
+      pointerEvents: 'none',
+      zIndex: 1,
+    },
+    // Ensure content appears above the overlay
+    '& .MuiList-root': {
+      position: 'relative',
+      zIndex: 2,
+    },
+  };
+};
+
 const StyledMenu = styled(Menu, {
   shouldForwardProp: (prop) => prop !== 'customVariant' && prop !== 'size',
 })<{ customVariant?: string; size?: string }>(({ theme, customVariant, size }) => ({
@@ -21,52 +72,7 @@ const StyledMenu = styled(Menu, {
     minWidth: 180,
     borderRadius: theme.spacing(1),
 
-    ...(customVariant === 'glass' && {
-      backgroundColor: alpha(
-        theme.palette.mode === 'dark'
-          ? theme.palette.background.paper
-          : theme.palette.background.paper,
-        0.75,
-      ),
-      backdropFilter: 'blur(24px) saturate(1.8)',
-      WebkitBackdropFilter: 'blur(24px) saturate(1.8)', // Safari support
-      border: `1px solid ${alpha(
-        theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black,
-        0.12,
-      )}`,
-      boxShadow: [
-        `0 8px 32px ${alpha(theme.palette.common.black, theme.palette.mode === 'dark' ? 0.4 : 0.12)}`,
-        `0 0 0 1px ${alpha(
-          theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.black,
-          0.05,
-        )}`,
-        `inset 0 1px 0 ${alpha(
-          theme.palette.mode === 'dark' ? theme.palette.common.white : theme.palette.common.white,
-          theme.palette.mode === 'dark' ? 0.2 : 0.8,
-        )}`,
-      ].join(', '),
-      // Enhanced glass morphism with subtle gradient overlay
-      '&::before': {
-        content: '""',
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        background:
-          theme.palette.mode === 'dark'
-            ? `linear-gradient(135deg, ${alpha(theme.palette.common.white, 0.1)} 0%, transparent 50%)`
-            : `linear-gradient(135deg, ${alpha(theme.palette.common.white, 0.8)} 0%, transparent 50%)`,
-        borderRadius: 'inherit',
-        pointerEvents: 'none',
-        zIndex: 1,
-      },
-      // Ensure content appears above the overlay
-      '& .MuiList-root': {
-        position: 'relative',
-        zIndex: 2,
-      },
-    }),
+    ...(customVariant === 'glass' && glassMenuStyles(theme)),
 
     ...(customVariant === 'minimal' && {
       boxShadow: `0 2px 8px ${alpha(theme.palette.common.black, 0.08)}`,
@@ -164,6 +170,15 @@ const renderMenuItem = (
     );
   }
 
+  return renderLeafMenuItem(item, handleItemClick, showIconSpace, size);
+};
+
+const renderLeafMenuItem = (
+  item: DropdownMenuItem,
+  handleItemClick: (item: DropdownMenuItem) => void,
+  showIconSpace?: boolean,
+  size?: string,
+) => {
   const hasIcon = !!item.icon;
   const hasChildren = item.children && item.children.length > 0;
 
@@ -187,6 +202,113 @@ const renderMenuItem = (
   );
 };
 
+// Open state and anchor are each either caller-supplied or ours. Resolving both
+// here keeps those four branches out of the render body.
+const resolveMenuState = (
+  controlledOpen: boolean | undefined,
+  internalOpen: boolean,
+  providedAnchorEl: DropdownMenuProps['anchorEl'],
+  anchorRef: React.RefObject<HTMLElement | null>,
+) => {
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const anchorEl = providedAnchorEl || anchorRef.current;
+
+  return { isControlled, open, anchorEl, isOpen: Boolean(anchorEl) && open };
+};
+
+// Open/close state is either ours or the caller's; every handler has to respect
+// that, so they are grouped here rather than repeating the isControlled check
+// inline four times in the render.
+const useDropdownHandlers = ({
+  isControlled,
+  open,
+  setInternalOpen,
+  onOpen,
+  onClose,
+  closeOnItemClick,
+  anchorRef,
+}: {
+  isControlled: boolean;
+  open: boolean;
+  setInternalOpen: (value: boolean) => void;
+  onOpen?: () => void;
+  onClose?: () => void;
+  closeOnItemClick?: boolean;
+  anchorRef: React.RefObject<HTMLElement | null>;
+}) => {
+  const handleOpen = () => {
+    if (!isControlled) {
+      setInternalOpen(true);
+    }
+    onOpen?.();
+  };
+
+  const handleClose = () => {
+    if (!isControlled) {
+      setInternalOpen(false);
+    }
+    onClose?.();
+  };
+
+  const handleItemClick = (item: DropdownMenuItem) => {
+    item.onClick?.();
+    if (closeOnItemClick && !item.children?.length) {
+      handleClose();
+    }
+  };
+
+  const handleTriggerClick = (event: React.MouseEvent<HTMLElement>) => {
+    if (isControlled) return;
+
+    if (open) {
+      handleClose();
+      return;
+    }
+
+    (anchorRef as React.MutableRefObject<HTMLElement>).current = event.currentTarget;
+    handleOpen();
+  };
+
+  return { handleClose, handleItemClick, handleTriggerClick };
+};
+
+// The trigger is either a caller-supplied element we clone to attach our click
+// handler and ref, arbitrary children we wrap, or the default kebab icon.
+const DropdownTrigger: React.FC<{
+  trigger: DropdownMenuProps['trigger'];
+  anchorRef: React.RefObject<HTMLElement | null>;
+  onTriggerClick: (event: React.MouseEvent<HTMLElement>) => void;
+}> = ({ trigger, anchorRef, onTriggerClick }) => {
+  if (isValidElement(trigger)) {
+    return cloneElement(
+      trigger as React.ReactElement<{
+        onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+        ref?: React.Ref<HTMLElement>;
+      }>,
+      { onClick: onTriggerClick, ref: anchorRef },
+    );
+  }
+
+  if (trigger) {
+    return (
+      <Box ref={anchorRef} onClick={onTriggerClick}>
+        {trigger}
+      </Box>
+    );
+  }
+
+  return (
+    <Box
+      ref={anchorRef}
+      onClick={onTriggerClick}
+      sx={{ cursor: 'pointer', display: 'inline-flex' }}
+    >
+      <MoreVert />
+    </Box>
+  );
+};
+
 export const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
   (
     {
@@ -209,69 +331,25 @@ export const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
     const [internalOpen, setInternalOpen] = useState(false);
     const anchorRef = useRef<HTMLElement>(null);
 
-    const isControlled = controlledOpen !== undefined;
-    const open = isControlled ? controlledOpen : internalOpen;
-    const anchorEl = providedAnchorEl || anchorRef.current;
-
-    const handleOpen = () => {
-      if (!isControlled) {
-        setInternalOpen(true);
-      }
-      onOpen?.();
-    };
-
-    const handleClose = () => {
-      if (!isControlled) {
-        setInternalOpen(false);
-      }
-      onClose?.();
-    };
-
-    const handleItemClick = (item: DropdownMenuItem) => {
-      if (item.onClick) {
-        item.onClick();
-      }
-      if (closeOnItemClick && !item.children?.length) {
-        handleClose();
-      }
-    };
-
-    const handleTriggerClick = (event: React.MouseEvent<HTMLElement>) => {
-      if (!isControlled) {
-        if (open) {
-          handleClose();
-        } else {
-          (anchorRef as React.MutableRefObject<HTMLElement>).current = event.currentTarget;
-          handleOpen();
-        }
-      }
-    };
-
-    const triggerElement = trigger ? (
-      isValidElement(trigger) ? (
-        cloneElement(
-          trigger as React.ReactElement<{
-            onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-            ref?: React.Ref<HTMLElement>;
-          }>,
-          {
-            onClick: handleTriggerClick,
-            ref: anchorRef,
-          }
-        )
-      ) : (
-        <Box ref={anchorRef} onClick={handleTriggerClick}>
-          {trigger}
-        </Box>
-      )
-    ) : (
-      <Box
-        ref={anchorRef}
-        onClick={handleTriggerClick}
-        sx={{ cursor: 'pointer', display: 'inline-flex' }}
-      >
-        <MoreVert />
-      </Box>
+    const { isControlled, open, anchorEl, isOpen } = resolveMenuState(
+      controlledOpen,
+      internalOpen,
+      providedAnchorEl,
+      anchorRef,
+    );
+
+    const { handleClose, handleItemClick, handleTriggerClick } = useDropdownHandlers({
+      isControlled,
+      open,
+      setInternalOpen,
+      onOpen,
+      onClose,
+      closeOnItemClick,
+      anchorRef,
+    });
+
+    const triggerElement = (
+      <DropdownTrigger trigger={trigger} anchorRef={anchorRef} onTriggerClick={handleTriggerClick} />
     );
 
     return (
@@ -280,7 +358,7 @@ export const DropdownMenu = React.forwardRef<HTMLDivElement, DropdownMenuProps>(
         <StyledMenu
           ref={ref}
           anchorEl={anchorEl}
-          open={Boolean(anchorEl) && open}
+          open={isOpen}
           onClose={handleClose}
           customVariant={variant}
           size={size}

package/src/components/navigation/NavigationMenu/NavigationMegaSection.tsx

@@ -0,0 +1,66 @@
+import { Box, List, Typography } from '@mui/material';
+import type { FC } from 'react';
+import React from 'react';
+
+import { MegaSection } from './NavigationMenu.shell';
+import { slideIn } from './NavigationMenu.styles';
+import type { NavigationMenuItem } from './NavigationMenu.types';
+import { renderMenuItem } from './NavigationMenuItem';
+
+const SECTION_TITLE_SX = {
+  mb: 2.5,
+  color: 'primary.main',
+  fontWeight: 600,
+  position: 'relative',
+  paddingBottom: 1,
+  // The short rule under each section heading.
+  '&::after': {
+    content: '""',
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    width: '40px',
+    height: '3px',
+    background: (theme: { palette: { primary: { main: string } } }) =>
+      `linear-gradient(90deg, ${theme.palette.primary.main} 0%, transparent 100%)`,
+    borderRadius: '2px',
+  },
+} as const;
+
+export interface NavigationMegaSectionProps {
+  section: NavigationMenuItem;
+  sectionIndex: number;
+  variant?: string;
+  size?: string;
+  minimal?: boolean;
+}
+
+// One column of the mega menu: a heading and its children, each staggered so the
+// grid fills in rather than appearing all at once.
+export const NavigationMegaSection: FC<NavigationMegaSectionProps> = ({
+  section,
+  sectionIndex,
+  variant,
+  size,
+  minimal,
+}) => (
+  <MegaSection>
+    <Typography variant="h6" sx={SECTION_TITLE_SX}>
+      {section.label}
+    </Typography>
+    <List sx={{ p: 0 }}>
+      {section.children?.map((item, itemIndex) => (
+        <Box
+          key={item.id}
+          sx={{
+            animation: `${slideIn} 0.4s ease-out`,
+            animationDelay: `${sectionIndex * 0.1 + itemIndex * 0.05}s`,
+            animationFillMode: 'both',
+          }}
+        >
+          {renderMenuItem(item, variant, size, false, minimal, 0)}
+        </Box>
+      ))}
+    </List>
+  </MegaSection>
+);

package/src/components/navigation/NavigationMenu/NavigationMenu.md

@@ -56,7 +56,9 @@ A flexible and feature-rich navigation menu component that supports horizontal,
 
 ```tsx
 import { NavigationMenu } from '@procurement/ui';
-import { Dashboard, ShoppingCart, People } from '@mui/icons-material';
+import Dashboard from '@mui/icons-material/Dashboard';
+import ShoppingCart from '@mui/icons-material/ShoppingCart';
+import People from '@mui/icons-material/People';
 
 const items = [
   {
@@ -129,7 +131,10 @@ function TopNav() {
 
 ```tsx
 import { NavigationMenu } from '@procurement/ui';
-import { Home, ShoppingCart, Business, Analytics } from '@mui/icons-material';
+import Home from '@mui/icons-material/Home';
+import ShoppingCart from '@mui/icons-material/ShoppingCart';
+import Business from '@mui/icons-material/Business';
+import Analytics from '@mui/icons-material/Analytics';
 
 const horizontalWithDropdowns = [
   {

package/src/components/navigation/NavigationMenu/NavigationMenu.shell.tsx

@@ -0,0 +1,218 @@
+import { Box, List, ListItemButton } from '@mui/material';
+import { alpha, keyframes, styled } from '@mui/material/styles';
+import type { CSSProperties, PropsWithChildren, ReactNode } from 'react';
+import React from 'react';
+
+import { slideIn } from './NavigationMenu.styles';
+
+const megaMenuSlide = keyframes`
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+
+// These styled() components stay module-local: their inferred types cannot be
+// named across a module boundary here (TS2742). The plain components exported
+// below are what the layouts import.
+const NavigationContainer = styled(Box, {
+  shouldForwardProp: (prop) => !['variant', 'collapsed', 'minimal'].includes(prop as string),
+})<{ variant?: string; collapsed?: boolean; minimal?: boolean }>(({ theme, variant, collapsed, minimal }) => ({
+  display: 'flex',
+  position: 'relative',
+  animation: `${slideIn} 0.4s ease-out`,
+  ...(variant === 'horizontal' && {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    ...(!minimal && {
+      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.95)} 0%, ${alpha(theme.palette.background.paper, 0.98)} 100%)`,
+      backdropFilter: 'blur(10px)',
+      borderRadius: theme.spacing(2),
+      boxShadow: `0 8px 32px ${alpha(theme.palette.common.black, 0.08)}`,
+    }),
+  }),
+  ...(variant === 'vertical' && {
+    flexDirection: 'column',
+    width: collapsed ? 80 : 280,
+    transition: 'all 0.4s cubic-bezier(0.4, 0, 0.2, 1)',
+    height: '100%',
+    ...(!minimal && {
+      background: `linear-gradient(180deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.paper, 0.95)} 100%)`,
+      backdropFilter: 'blur(12px)',
+      borderRadius: theme.spacing(2),
+      boxShadow: `0 12px 40px ${alpha(theme.palette.common.black, 0.1)}`,
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        height: '200px',
+        background: `radial-gradient(ellipse at top, ${alpha(theme.palette.primary.main, 0.05)} 0%, transparent 70%)`,
+        pointerEvents: 'none',
+      },
+    }),
+  }),
+  ...(variant === 'mega' && {
+    flexDirection: 'column',
+    width: '100%',
+    ...(!minimal && {
+      background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.98)} 0%, ${alpha(theme.palette.background.default, 0.95)} 100%)`,
+      backdropFilter: 'blur(15px)',
+      borderRadius: theme.spacing(3),
+      overflow: 'hidden',
+      boxShadow: `0 20px 60px ${alpha(theme.palette.common.black, 0.12)}`,
+    }),
+  }),
+}));
+
+const StyledList = styled(List, {
+  shouldForwardProp: (prop) => !['variant', 'size'].includes(prop as string),
+})<{ variant?: string; size?: string }>(({ theme, variant }) => ({
+  padding: 0,
+  width: '100%',
+  ...(variant === 'horizontal' && {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+  }),
+  ...(variant === 'mega' && {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))',
+    gap: theme.spacing(2),
+    padding: theme.spacing(2),
+  }),
+}));
+
+const LogoContainer = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(2.5),
+  marginBottom: theme.spacing(2),
+  position: 'relative',
+  background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.08)} 0%, ${alpha(theme.palette.primary.dark, 0.04)} 100%)`,
+  borderBottom: `2px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+  overflow: 'hidden',
+
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: '-50%',
+    right: '-50%',
+    width: '200%',
+    height: '200%',
+    background: `radial-gradient(circle, ${alpha(theme.palette.primary.light, 0.1)} 0%, transparent 70%)`,
+    animation: `${slideIn} 1s ease-out`,
+  },
+
+  '& > *': {
+    position: 'relative',
+    zIndex: 1,
+  },
+}));
+
+const CollapseButton = styled(ListItemButton)(({ theme }) => ({
+  borderRadius: theme.spacing(1.5),
+  margin: theme.spacing(1),
+  background: `linear-gradient(135deg, ${alpha(theme.palette.primary.main, 0.08)} 0%, ${alpha(theme.palette.primary.dark, 0.04)} 100%)`,
+  border: `1px solid ${alpha(theme.palette.primary.main, 0.2)}`,
+  transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.primary.main, 0.12),
+    transform: 'scale(1.05)',
+    boxShadow: `0 6px 20px ${alpha(theme.palette.primary.main, 0.2)}`,
+
+    '& .MuiListItemIcon-root': {
+      transform: 'rotate(180deg)',
+      transition: 'transform 0.3s ease',
+    },
+  },
+
+  '&:active': {
+    transform: 'scale(0.98)',
+  },
+}));
+
+const MegaMenuSection = styled(Box)(({ theme }) => ({
+  padding: theme.spacing(3),
+  borderRadius: theme.spacing(2),
+  background: `linear-gradient(145deg, ${theme.palette.background.paper} 0%, ${alpha(theme.palette.background.default, 0.9)} 100%)`,
+  boxShadow: `0 10px 30px ${alpha(theme.palette.common.black, 0.08)}`,
+  border: `1px solid ${alpha(theme.palette.divider, 0.08)}`,
+  position: 'relative',
+  overflow: 'hidden',
+  animation: `${megaMenuSlide} 0.5s ease-out`,
+  animationFillMode: 'both',
+
+  '&::before': {
+    content: '""',
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    height: '3px',
+    background: `linear-gradient(90deg, ${theme.palette.primary.main} 0%, ${theme.palette.primary.light} 50%, ${theme.palette.primary.main} 100%)`,
+    backgroundSize: '200% 100%',
+    animation: 'shimmer 3s ease-in-out infinite',
+  },
+
+  '@keyframes shimmer': {
+    '0%': {
+      backgroundPosition: '200% 0',
+    },
+    '100%': {
+      backgroundPosition: '-200% 0',
+    },
+  },
+
+  '&:hover': {
+    transform: 'translateY(-4px)',
+    boxShadow: `0 15px 40px ${alpha(theme.palette.common.black, 0.12)}`,
+    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
+  },
+
+  '&:nth-of-type(1)': { animationDelay: '0.1s' },
+  '&:nth-of-type(2)': { animationDelay: '0.2s' },
+  '&:nth-of-type(3)': { animationDelay: '0.3s' },
+  '&:nth-of-type(4)': { animationDelay: '0.4s' },
+}));
+
+export interface NavigationShellProps extends PropsWithChildren {
+  variant?: string;
+  collapsed?: boolean;
+  minimal?: boolean;
+  className?: string;
+  style?: CSSProperties;
+}
+
+export const NavigationShell = React.forwardRef<HTMLDivElement, NavigationShellProps>(
+  ({ children, ...props }, ref) => (
+    <NavigationContainer ref={ref} {...props}>
+      {children}
+    </NavigationContainer>
+  ),
+);
+
+NavigationShell.displayName = 'NavigationShell';
+
+export const LogoBar: React.FC<PropsWithChildren> = ({ children }) => (
+  <LogoContainer>{children}</LogoContainer>
+);
+
+export const MenuList: React.FC<PropsWithChildren<{ variant?: string; size?: string }>> = ({
+  children,
+  ...props
+}) => <StyledList {...props}>{children}</StyledList>;
+
+export const CollapseToggle: React.FC<PropsWithChildren<{ onClick: () => void }>> = ({
+  children,
+  onClick,
+}) => <CollapseButton onClick={onClick}>{children}</CollapseButton>;
+
+export const MegaSection: React.FC<{ children: ReactNode }> = ({ children }) => (
+  <MegaMenuSection>{children}</MegaMenuSection>
+);