@12-apps/ui 1.0.0 → 1.3.1

package/src/components/navigation/Tabs/Tabs.tsx

@@ -1,165 +1,24 @@
-import { Close } from '@mui/icons-material';
+import Close from '@mui/icons-material/Close';
 import {
   alpha,
   Badge,
   Box,
-  CircularProgress,
   Divider,
-  Fade,
   Tab as MuiTab,
-  Tabs as MuiTabs,
-} from '@mui/material';
+  Tabs as MuiTabs } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import React from 'react';
 
-import type { TabItem,TabPanelProps, TabsProps } from './Tabs.types';
+import { CustomTabPanel } from './TabsPanel';
+import { tabsRootStyles } from './Tabs.styles';
+import type { TabItem, TabsProps } from './Tabs.types';
 
 const StyledTabs = styled(MuiTabs, {
-  shouldForwardProp: (prop) => !['customVariant', 'size', 'showDividers'].includes(prop as string),
-})<{ customVariant?: string; size?: string; showDividers?: boolean }>(
+  shouldForwardProp: (prop) => !['customVariant', 'size', 'showDividers'].includes(prop as string) })<{ customVariant?: string; size?: string; showDividers?: boolean }>(
   ({ theme, customVariant, size, showDividers }) => ({
-    position: 'relative',
-
-    // Collapse disabled scroll buttons (e.g. the left button at the start of a
-    // scrollable row) so they don't reserve empty space before the first tab.
-    '& .MuiTabs-scrollButtons.Mui-disabled': {
-      width: 0,
-      minWidth: 0,
-      overflow: 'hidden',
-    },
-
-    // Size variants
-    ...(size === 'sm' && {
-      minHeight: 32,
-      '& .MuiTab-root': {
-        fontSize: '0.875rem',
-        minHeight: 32,
-        padding: theme.spacing(0.5, 1.5),
-      },
-    }),
-
-    ...(size === 'lg' && {
-      minHeight: 56,
-      '& .MuiTab-root': {
-        fontSize: '1.125rem',
-        minHeight: 56,
-        padding: theme.spacing(1.5, 3),
-      },
-    }),
-
-    // Default variant (standard Material-UI style)
-    ...(customVariant === 'default' && {
-      '& .MuiTabs-indicator': {
-        height: 3,
-        borderRadius: '3px 3px 0 0',
-        background: `linear-gradient(90deg, ${theme.palette.primary.main}, ${theme.palette.primary.dark})`,
-      },
-    }),
-
-    // Pills variant (rounded tabs)
-    ...(customVariant === 'pills' && {
-      '& .MuiTabs-indicator': {
-        display: 'none',
-      },
-      '& .MuiTab-root': {
-        borderRadius: theme.spacing(3),
-        margin: theme.spacing(0, 0.5),
-        minWidth: 'auto',
-        transition: 'all 0.3s ease',
-        '&:hover': {
-          backgroundColor: alpha(theme.palette.primary.main, 0.08),
-          transform: 'translateY(-1px)',
-        },
-        '&.Mui-selected': {
-          backgroundColor: theme.palette.primary.main,
-          color: theme.palette.primary.contrastText,
-          boxShadow: `0 4px 12px ${alpha(theme.palette.primary.main, 0.3)}`,
-          '&:hover': {
-            backgroundColor: theme.palette.primary.dark,
-          },
-        },
-      },
-    }),
-
-    // Underline variant (minimal underline indicator)
-    ...(customVariant === 'underline' && {
-      '& .MuiTabs-flexContainer': {
-        gap: theme.spacing(2),
-      },
-      '& .MuiTabs-indicator': {
-        height: 2,
-        backgroundColor: theme.palette.primary.main,
-        borderRadius: 1,
-      },
-      '& .MuiTab-root': {
-        textTransform: 'none',
-        fontWeight: 500,
-        padding: theme.spacing(1, 0),
-        minWidth: 'auto',
-        '&:hover': {
-          color: theme.palette.primary.main,
-        },
-        '&.Mui-selected': {
-          color: theme.palette.primary.main,
-          fontWeight: 600,
-        },
-      },
-    }),
-
-    // Enclosed variant (bordered tabs)
-    ...(customVariant === 'enclosed' && {
-      '& .MuiTabs-indicator': {
-        display: 'none',
-      },
-      '& .MuiTabs-flexContainer': {
-        borderBottom: `1px solid ${theme.palette.divider}`,
-      },
-      '& .MuiTab-root': {
-        border: `1px solid ${theme.palette.divider}`,
-        borderBottom: 'none',
-        borderRadius: `${theme.spacing(1)} ${theme.spacing(1)} 0 0`,
-        margin: theme.spacing(0, 0.5),
-        marginBottom: -1,
-        backgroundColor: alpha(theme.palette.action.hover, 0.5),
-        '&:hover': {
-          backgroundColor: alpha(theme.palette.action.hover, 0.8),
-        },
-        '&.Mui-selected': {
-          backgroundColor: theme.palette.background.paper,
-          borderColor: theme.palette.divider,
-          borderBottomColor: theme.palette.background.paper,
-          zIndex: 1,
-        },
-      },
-    }),
-
-    // Show dividers
-    ...(showDividers &&
-      customVariant !== 'enclosed' &&
-      customVariant !== 'pills' && {
-        '& .MuiTab-root:not(:last-child)': {
-          borderRight: `1px solid ${alpha(theme.palette.divider, 0.5)}`,
-        },
-      }),
-  }),
+    ...tabsRootStyles({ theme, customVariant, size, showDividers }) }),
 );
 
-const TabPanel = styled(Box, {
-  shouldForwardProp: (prop) => !['animate', 'persist'].includes(prop as string),
-})<{ animate?: boolean; persist?: boolean }>(({ animate, persist }) => ({
-  width: '100%',
-
-  ...(animate && {
-    transition: 'all 0.3s ease-in-out',
-  }),
-
-  ...(persist && {
-    '&[hidden]': {
-      display: 'none !important',
-    },
-  }),
-}));
-
 const CloseButton = styled(Box)(({ theme }) => ({
   marginLeft: theme.spacing(0.5),
   padding: theme.spacing(0.25),
@@ -173,9 +32,7 @@ const CloseButton = styled(Box)(({ theme }) => ({
   color: theme.palette.action.active,
   '&:hover': {
     backgroundColor: alpha(theme.palette.error.main, 0.1),
-    color: theme.palette.error.main,
-  },
-}));
+    color: theme.palette.error.main } }));
 
 const BadgeWrapper = styled(Badge)(() => ({
   '& .MuiBadge-badge': {
@@ -184,122 +41,202 @@ const BadgeWrapper = styled(Badge)(() => ({
     fontSize: '0.75rem',
     minWidth: 16,
     height: 16,
-    padding: 0,
-  },
-}));
-
-const LoadingContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  minHeight: 200,
-  color: theme.palette.text.secondary,
-}));
+    padding: 0 } }));
 
-const CustomTabPanel: React.FC<TabPanelProps & { dataTestId?: string; index: number }> = ({
-  children,
-  id,
-  value,
-  animate = false,
-  animationDuration = 300,
-  persist = false,
-  loading = false,
-  loadingComponent,
-  className,
-  dataTestId,
-  index,
-  ...props
-}) => {
-  const isActive = value === id;
-  const shouldRender = isActive || persist;
+const TABS_DEFAULTS: Partial<TabsProps> = {
+  variant: 'default',
+  size: 'md',
+  color: 'primary',
+  fullWidth: false,
+  orientation: 'horizontal',
+  showDividers: false,
+  centered: false,
+  scrollable: false,
+  scrollButtons: 'auto',
+  sticky: false,
+  stickyOffset: 0,
+  animateContent: false,
+  animationDuration: 300,
+  persistContent: false,
+  disabled: false,
+  loading: false };
 
-  if (!shouldRender) {
-    return null;
-  }
+// Strips explicitly-undefined props before the merge, so `prop={undefined}`
+// still falls back to the default as a destructuring default would.
+const definedProps = (props: TabsProps): Partial<TabsProps> =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, value]) => value !== undefined),
+  ) as Partial<TabsProps>;
 
-  const content = loading
-    ? loadingComponent || (
-        <LoadingContainer>
-          <CircularProgress size={32} />
-        </LoadingContainer>
-      )
-    : children;
+// Once the row is scrollable every accepted scrollButtons value ends up as
+// MUI's 'auto'. That is exactly what the previous nested ternary did — it mapped
+// 'on'/'off'/'desktop' to 'auto', and its remaining branch could only ever be
+// 'auto' anyway — so the behaviour is preserved here rather than quietly
+// changed. Worth knowing that scrollButtons="off" therefore still shows buttons.
+const resolveScrollButtons = (scrollable?: boolean): 'auto' | false =>
+  scrollable ? 'auto' : false;
 
-  const testId = dataTestId ? `${dataTestId}-panel-${index}` : `tabs-panel-${index}`;
+const buildTabsSx = ({
+  fullWidth,
+  sticky,
+  stickyOffset,
+  indicatorColor,
+  disabled }: {
+  fullWidth?: boolean;
+  sticky?: boolean;
+  stickyOffset?: number;
+  indicatorColor?: string;
+  disabled?: boolean;
+}) => ({
+  ...(fullWidth && { width: '100%' }),
+  // Pin the tab list while panels scroll beneath it. Opaque background + bottom
+  // divider so scrolled content does not show through.
+  ...(sticky && {
+    position: 'sticky',
+    top: stickyOffset,
+    zIndex: 2,
+    backgroundColor: 'background.default',
+    borderBottom: 1,
+    borderColor: 'divider' }),
+  ...(indicatorColor && {
+    '& .MuiTabs-indicator': { backgroundColor: indicatorColor } }),
+  ...(disabled && { opacity: 0.6, pointerEvents: 'none' }) });
 
-  if (animate) {
-    return (
-      <Fade in={isActive} timeout={animationDuration}>
-        <TabPanel
-          role="tabpanel"
-          hidden={!isActive}
-          id={`tabpanel-${id}`}
-          aria-labelledby={`tab-${id}`}
-          animate={animate}
-          persist={persist}
-          className={className}
-          data-testid={testId}
-          {...props}
+// A tab's label: icon, text, optional close affordance, optionally badged.
+const TabLabel: React.FC<{
+  item: TabItem;
+  onClose: (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => void;
+}> = ({ item, onClose }) => {
+  const content = (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+      {item.icon}
+      <span>{item.label}</span>
+      {item.closable && (
+        <CloseButton
+          onClick={(e) => onClose(e, item.id)}
+          role="button"
+          tabIndex={0}
+          aria-label="Close tab"
+          onKeyDown={(e) => {
+            if (e.key !== 'Enter' && e.key !== ' ') return;
+            onClose(e, item.id);
+          }}
         >
-          {content}
-        </TabPanel>
-      </Fade>
-    );
-  }
+          <Close fontSize="inherit" />
+        </CloseButton>
+      )}
+    </Box>
+  );
+
+  if (item.badge === undefined) return content;
 
   return (
-    <TabPanel
-      role="tabpanel"
-      hidden={!isActive}
-      id={`tabpanel-${id}`}
-      aria-labelledby={`tab-${id}`}
-      animate={animate}
-      persist={persist}
-      className={className}
-      data-testid={testId}
-      {...props}
-    >
+    <BadgeWrapper badgeContent={item.badge} color="error">
       {content}
-    </TabPanel>
+    </BadgeWrapper>
   );
 };
 
+type ResolvedTabs = TabsProps;
+
+// The tab strip. Kept in this file because StyledTabs cannot cross a module
+// boundary (TS2742).
+const TabsBar: React.FC<
+  ResolvedTabs & {
+    rest: Record<string, unknown>;
+    onChange: (event: React.SyntheticEvent, newValue: string) => void;
+    onCloseTab: (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => void;
+  }
+> = ({ rest, items, value, onChange, onCloseTab, dataTestId, ...p }) => (
+  <StyledTabs
+    {...rest}
+    value={value}
+    onChange={onChange}
+    customVariant={p.variant}
+    size={p.size}
+    showDividers={p.showDividers}
+    orientation={p.orientation}
+    centered={p.centered}
+    // MUI only scrolls when its own `variant` is `scrollable`; map our
+    // `scrollable` flag onto it so overflowing tab rows actually scroll.
+    variant={p.scrollable ? 'scrollable' : 'standard'}
+    data-testid={dataTestId ? `${dataTestId}-list` : 'tabs-list'}
+    scrollButtons={resolveScrollButtons(p.scrollable)}
+    allowScrollButtonsMobile={p.scrollable}
+    textColor={p.color}
+    indicatorColor={p.color}
+    sx={buildTabsSx({
+      fullWidth: p.fullWidth,
+      sticky: p.sticky,
+      stickyOffset: p.stickyOffset,
+      indicatorColor: p.indicatorColor,
+      disabled: p.disabled })}
+  >
+    {items.map((item, index) => (
+      <MuiTab
+        key={item.id}
+        value={item.id}
+        label={<TabLabel item={item} onClose={onCloseTab} />}
+        disabled={item.disabled || p.disabled}
+        className={item.className}
+        id={`tab-${item.id}`}
+        aria-controls={`tabpanel-${item.id}`}
+        aria-disabled={item.disabled || p.disabled}
+        data-testid={dataTestId ? `${dataTestId}-tab-${index}` : `tabs-tab-${index}`}
+      />
+    ))}
+  </StyledTabs>
+);
+
+const TabsPanels: React.FC<ResolvedTabs> = ({
+  items,
+  value,
+  variant,
+  animateContent,
+  animationDuration,
+  persistContent,
+  loading,
+  loadingComponent,
+  tabPanelProps,
+  dataTestId }) => (
+  <Box sx={{ mt: variant === 'enclosed' ? 0 : 2 }}>
+    {items.map((item, index) => (
+      <CustomTabPanel
+        key={item.id}
+        id={item.id}
+        value={value}
+        animate={animateContent}
+        animationDuration={animationDuration}
+        persist={persistContent}
+        loading={loading}
+        loadingComponent={loadingComponent}
+        className={tabPanelProps?.className}
+        dataTestId={dataTestId}
+        index={index}
+      >
+        {item.content}
+      </CustomTabPanel>
+    ))}
+  </Box>
+);
+
 export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
-  (
-    {
-      variant = 'default',
-      size = 'md',
-      items,
-      value,
+  (tabsProps, ref) => {
+    const resolved = { ...TABS_DEFAULTS, ...definedProps(tabsProps) } as TabsProps;
+    const {
+      value: _value,
       onChange,
-      color = 'primary',
-      fullWidth = false,
-      orientation = 'horizontal',
-      showDividers = false,
-      centered = false,
-      scrollable = false,
-      scrollButtons = 'auto',
-      sticky = false,
-      stickyOffset = 0,
-      animateContent = false,
-      animationDuration = 300,
-      persistContent = false,
       onTabClose,
       className,
-      disabled = false,
-      indicatorColor,
-      tabPanelProps,
-      loading = false,
-      loadingComponent,
+      disabled,
+      showDividers,
+      variant,
       dataTestId,
-      ...props
-    },
-    ref,
-  ) => {
+      ...rest
+    } = resolved;
+
     const handleChange = (event: React.SyntheticEvent, newValue: string) => {
-      if (!disabled) {
-        onChange(event, newValue);
-      }
+      if (!disabled) onChange(event, newValue);
     };
 
     const handleTabClose = (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => {
@@ -307,124 +244,18 @@ export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
       onTabClose?.(tabId);
     };
 
-    const renderTabContent = (item: TabItem) => {
-      const tabContent = (
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-          {item.icon}
-          <span>{item.label}</span>
-          {item.closable && (
-            <CloseButton
-              onClick={(e) => handleTabClose(e, item.id)}
-              role="button"
-              tabIndex={0}
-              aria-label="Close tab"
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  handleTabClose(e, item.id);
-                }
-              }}
-            >
-              <Close fontSize="inherit" />
-            </CloseButton>
-          )}
-        </Box>
-      );
-
-      if (item.badge !== undefined) {
-        return (
-          <BadgeWrapper badgeContent={item.badge} color="error">
-            {tabContent}
-          </BadgeWrapper>
-        );
-      }
-
-      return tabContent;
-    };
-
     return (
       <Box className={className} ref={ref} data-testid={dataTestId || 'tabs'}>
-        <StyledTabs
-          {...props}
-          value={value}
+        <TabsBar
+          {...resolved}
+          rest={rest as unknown as Record<string, unknown>}
           onChange={handleChange}
-          customVariant={variant}
-          size={size}
-          showDividers={showDividers}
-          orientation={orientation}
-          centered={centered}
-          // MUI only scrolls when its own `variant` is `scrollable`; map our
-          // `scrollable` flag onto it so overflowing tab rows actually scroll.
-          variant={scrollable ? 'scrollable' : 'standard'}
-          data-testid={dataTestId ? `${dataTestId}-list` : 'tabs-list'}
-          scrollButtons={
-            scrollable
-              ? scrollButtons === 'on' || scrollButtons === 'off' || scrollButtons === 'desktop'
-                ? 'auto'
-                : scrollButtons
-              : false
-          }
-          allowScrollButtonsMobile={scrollable}
-          textColor={color}
-          indicatorColor={color}
-          sx={{
-            ...(fullWidth && { width: '100%' }),
-            // Pin the tab list while panels scroll beneath it. Opaque background
-            // + bottom divider so scrolled content does not show through.
-            ...(sticky && {
-              position: 'sticky',
-              top: stickyOffset,
-              zIndex: 2,
-              backgroundColor: 'background.default',
-              borderBottom: 1,
-              borderColor: 'divider',
-            }),
-            ...(indicatorColor && {
-              '& .MuiTabs-indicator': {
-                backgroundColor: indicatorColor,
-              },
-            }),
-            ...(disabled && {
-              opacity: 0.6,
-              pointerEvents: 'none',
-            }),
-          }}
-        >
-          {items.map((item, index) => (
-            <MuiTab
-              key={item.id}
-              value={item.id}
-              label={renderTabContent(item)}
-              disabled={item.disabled || disabled}
-              className={item.className}
-              id={`tab-${item.id}`}
-              aria-controls={`tabpanel-${item.id}`}
-              aria-disabled={item.disabled || disabled}
-              data-testid={dataTestId ? `${dataTestId}-tab-${index}` : `tabs-tab-${index}`}
-            />
-          ))}
-        </StyledTabs>
+          onCloseTab={handleTabClose}
+        />
 
         {showDividers && variant !== 'enclosed' && <Divider />}
 
-        <Box sx={{ mt: variant === 'enclosed' ? 0 : 2 }}>
-          {items.map((item, index) => (
-            <CustomTabPanel
-              key={item.id}
-              id={item.id}
-              value={value}
-              animate={animateContent}
-              animationDuration={animationDuration}
-              persist={persistContent}
-              loading={loading}
-              loadingComponent={loadingComponent}
-              className={tabPanelProps?.className}
-              dataTestId={dataTestId}
-              index={index}
-            >
-              {item.content}
-            </CustomTabPanel>
-          ))}
-        </Box>
+        <TabsPanels {...resolved} />
       </Box>
     );
   },