@12-apps/ui 1.0.0 → 1.3.0

package/src/components/layout/Collapsible/Collapsible.tsx

@@ -1,49 +1,26 @@
 import { Box, Collapse,useTheme } from '@mui/material';
 import React, { useCallback,useEffect, useRef, useState } from 'react';
 
+import {
+  dimmedStyles,
+  regionAttrs,
+  transitionSettings,
+  triggerStyles,
+} from './Collapsible.helpers';
 import type { CollapsibleContentProps,CollapsibleProps, CollapsibleTriggerProps } from './Collapsible.types';
 
-export const Collapsible: React.FC<CollapsibleProps> = ({
-  children,
-  open,
-  variant = 'default',
-  duration = 300,
-  easing,
-  onToggle,
-  disabled = false,
-  keepMounted = false,
-  maxHeight,
-  sx,
-  className,
-  dataTestId,
-  ...otherProps
-}) => {
-  const theme = useTheme();
+/**
+ * The smooth and spring variants animate an explicit pixel height, so the content
+ * has to be measured after every render that could have changed it.
+ */
+const useMeasuredHeight = (
+  open: boolean,
+  maxHeight: number | undefined,
+  children: React.ReactNode,
+) => {
   const contentRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number | 'auto'>('auto');
 
-  const getTransitionSettings = () => {
-    switch (variant) {
-      case 'smooth':
-        return {
-          duration,
-          easing: easing || theme.transitions.easing.easeInOut,
-        };
-      case 'spring':
-        return {
-          duration: duration * 1.2,
-          easing: easing || 'cubic-bezier(0.34, 1.56, 0.64, 1)',
-        };
-      default:
-        return {
-          duration,
-          easing: easing || theme.transitions.easing.easeInOut,
-        };
-    }
-  };
-
-  const transition = getTransitionSettings();
-
   const measureHeight = useCallback(() => {
     if (contentRef.current) {
       const scrollHeight = contentRef.current.scrollHeight;
@@ -60,41 +37,64 @@ export const Collapsible: React.FC<CollapsibleProps> = ({
     }
   }, [open, measureHeight, children]);
 
-  // Trigger onToggle callback when open state changes
-  useEffect(() => {
-    if (onToggle && !disabled) {
-      onToggle(open);
-    }
-  }, [open, onToggle, disabled]);
+  return { contentRef, height };
+};
 
+type VariantProps = Omit<CollapsibleProps, 'variant' | 'onToggle'> & {
+  duration: number;
+  disabled: boolean;
+  keepMounted: boolean;
+  transition: { duration: number; easing: string };
+};
+
+// Use MUI's built-in Collapse for the default variant.
+const DefaultCollapsible: React.FC<VariantProps> = ({
+  children,
+  open,
+  duration,
+  disabled,
+  keepMounted,
+  maxHeight,
+  sx,
+  className,
+  dataTestId,
+  transition: _transition,
+  easing: _easing,
+  ...otherProps
+}) => (
+  <Collapse
+    in={open && !disabled}
+    timeout={disabled ? 0 : duration}
+    sx={{
+      ...dimmedStyles(disabled),
+      ...(maxHeight && { maxHeight, overflow: 'hidden' }),
+      ...sx,
+    }}
+    className={className}
+    unmountOnExit={!keepMounted}
+    {...regionAttrs({ open, disabled, dataTestId })}
+    {...otherProps}
+  >
+    <Box>{children}</Box>
+  </Collapse>
+);
+
+const AnimatedCollapsible: React.FC<VariantProps> = ({
+  children,
+  open,
+  disabled,
+  keepMounted,
+  maxHeight,
+  transition,
+  sx,
+  className,
+  dataTestId,
+  duration: _duration,
+  easing: _easing,
+  ...otherProps
+}) => {
+  const { contentRef, height } = useMeasuredHeight(open, maxHeight, children);
 
-  if (variant === 'default') {
-    // Use MUI's built-in Collapse for default variant
-    return (
-      <Collapse
-        in={open && !disabled}
-        timeout={disabled ? 0 : duration}
-        sx={{
-          opacity: disabled ? 0.6 : 1,
-          pointerEvents: disabled ? 'none' : 'auto',
-          ...(maxHeight && { maxHeight, overflow: 'hidden' }),
-          ...sx,
-        }}
-        className={className}
-        unmountOnExit={!keepMounted}
-        data-disabled={disabled}
-        data-testid={dataTestId}
-        role="region"
-        aria-expanded={open && !disabled}
-        aria-hidden={disabled || !open}
-        {...otherProps}
-      >
-        <Box>{children}</Box>
-      </Collapse>
-    );
-  }
-
-  // Custom implementation for smooth and spring variants
   return (
     <Box
       component="div"
@@ -103,25 +103,53 @@ export const Collapsible: React.FC<CollapsibleProps> = ({
         height: open && !disabled ? height : 0,
         transition: disabled ? 'none' : `height ${transition.duration}ms ${transition.easing}`,
         willChange: disabled ? 'auto' : 'height',
-        opacity: disabled ? 0.6 : 1,
-        pointerEvents: disabled ? 'none' : 'auto',
+        ...dimmedStyles(disabled),
         ...sx,
       }}
       className={className}
-      data-disabled={disabled}
-      data-testid={dataTestId}
-      role="region"
-      aria-expanded={open && !disabled}
-      aria-hidden={disabled || !open}
+      {...regionAttrs({ open, disabled, dataTestId })}
       {...otherProps}
     >
-      <Box ref={contentRef}>
-        {(keepMounted || (open && !disabled)) && children}
-      </Box>
+      <Box ref={contentRef}>{(keepMounted || (open && !disabled)) && children}</Box>
     </Box>
   );
 };
 
+export const Collapsible: React.FC<CollapsibleProps> = ({
+  variant = 'default',
+  duration = 300,
+  easing,
+  onToggle,
+  disabled = false,
+  keepMounted = false,
+  ...rest
+}) => {
+  const theme = useTheme();
+  const { open } = rest;
+
+  // Trigger onToggle callback when open state changes
+  useEffect(() => {
+    if (onToggle && !disabled) {
+      onToggle(open);
+    }
+  }, [open, onToggle, disabled]);
+
+  const variantProps: VariantProps = {
+    ...rest,
+    duration,
+    easing,
+    disabled,
+    keepMounted,
+    transition: transitionSettings(theme, variant, duration, easing),
+  };
+
+  return variant === 'default' ? (
+    <DefaultCollapsible {...variantProps} />
+  ) : (
+    <AnimatedCollapsible {...variantProps} />
+  );
+};
+
 export const CollapsibleTrigger: React.FC<CollapsibleTriggerProps> = ({
   children,
   onClick,
@@ -145,31 +173,7 @@ export const CollapsibleTrigger: React.FC<CollapsibleTriggerProps> = ({
       role="button"
       tabIndex={disabled ? -1 : 0}
       data-state={expanded ? 'open' : 'closed'}
-      sx={{
-        width: '100%',
-        padding: theme.spacing(1, 2),
-        border: 'none',
-        backgroundColor: expanded ? theme.palette.action.selected : 'transparent',
-        cursor: disabled ? 'not-allowed' : 'pointer',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        transition: theme.transitions.create(['background-color', 'opacity'], {
-          duration: theme.transitions.duration.short,
-        }),
-        opacity: disabled ? 0.6 : 1,
-        '&:hover': {
-          backgroundColor: disabled ? 'transparent' :
-            expanded ? theme.palette.action.selected : theme.palette.action.hover,
-        },
-        '&:focus': {
-          outline: `2px solid ${theme.palette.primary.main}`,
-          outlineOffset: 2,
-        },
-        '&:active': {
-          backgroundColor: disabled ? 'transparent' : theme.palette.action.focus,
-        },
-      }}
+      sx={triggerStyles(theme, { disabled, expanded })}
       {...otherProps}
     >
       {children}
@@ -195,4 +199,4 @@ export const CollapsibleContent: React.FC<CollapsibleContentProps> = ({
       {children}
     </Box>
   );
-};
+};

package/src/components/layout/Container/Container.test.stories.tsx

@@ -1,6 +1,6 @@
 import { Box, Button, Card, CardContent,Paper, Typography } from '@mui/material';
 import type { Meta, StoryObj } from '@storybook/react-vite';
-import { expect, fn,userEvent, within } from 'storybook/test';
+import { expect, fn,userEvent, within, waitFor } from 'storybook/test';
 
 import { Container } from './Container';
 
@@ -196,17 +196,17 @@ export const KeyboardNavigation: Story = {
       
       // Focus first element
       await userEvent.click(firstButton);
-      await expect(firstButton).toHaveFocus();
+      await waitFor(() => expect(firstButton).toHaveFocus());
       
       // Tab to next element
       await userEvent.tab();
-      await expect(secondButton).toHaveFocus();
+      await waitFor(() => expect(secondButton).toHaveFocus());
     });
     
     await step('Tab navigation backward', async () => {
       await userEvent.tab({ shift: true });
       const firstButton = canvas.getByTestId('first-focusable');
-      await expect(firstButton).toHaveFocus();
+      await waitFor(() => expect(firstButton).toHaveFocus());
     });
     
     await step('Enter key activation', async () => {
@@ -214,14 +214,14 @@ export const KeyboardNavigation: Story = {
       await userEvent.click(button);
       await userEvent.keyboard('{Enter}');
       // Verify button is still focused after activation
-      await expect(button).toHaveFocus();
+      await waitFor(() => expect(button).toHaveFocus());
     });
     
     await step('Space key activation', async () => {
       const nativeButton = canvas.getByTestId('native-button');
-      nativeButton.focus();
+      await userEvent.click(nativeButton);
       await userEvent.keyboard(' ');
-      await expect(nativeButton).toHaveFocus();
+      await waitFor(() => expect(nativeButton).toHaveFocus());
     });
   }
 };
@@ -296,23 +296,23 @@ export const FocusManagement: Story = {
     await step('Initial focus state', async () => {
       const triggerButton = canvas.getByTestId('trigger-button');
       await userEvent.click(triggerButton);
-      await expect(triggerButton).toHaveFocus();
+      await waitFor(() => expect(triggerButton).toHaveFocus());
     });
     
     await step('Focus cycling through elements', async () => {
       await userEvent.tab();
       const firstElement = canvas.getByTestId('first-focus-element');
-      await expect(firstElement).toHaveFocus();
+      await waitFor(() => expect(firstElement).toHaveFocus());
       
       await userEvent.tab();
       const secondElement = canvas.getByTestId('second-focus-element');
-      await expect(secondElement).toHaveFocus();
+      await waitFor(() => expect(secondElement).toHaveFocus());
     });
     
     await step('Focus restoration', async () => {
       const triggerButton = canvas.getByTestId('trigger-button');
       await userEvent.click(triggerButton);
-      await expect(triggerButton).toHaveFocus();
+      await waitFor(() => expect(triggerButton).toHaveFocus());
     });
   }
 };
@@ -551,13 +551,8 @@ export const PerformanceTest: Story = {
     const canvas = within(canvasElement);
     
     await step('Measure render time', async () => {
-      const startTime = window.performance.now();
       const elements = canvas.getAllByTestId(/item-/);
-      const endTime = window.performance.now();
       
-      const renderTime = endTime - startTime;
-      // eslint-disable-next-line no-console
-      console.log(`Render time for ${elements.length} items: ${renderTime}ms`);
       
       // Verify reasonable number of elements rendered
       await expect(elements.length).toBeGreaterThan(50);

package/src/components/layout/ContentToolbar/ColumnsMenu.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { ViewColumnRounded as ColumnsIcon } from '@mui/icons-material';
+import ColumnsIcon from '@mui/icons-material/ViewColumnRounded';
 import { Box, Checkbox, IconButton, ListSubheader, Menu, MenuItem } from '@mui/material';
 import React, { useState } from 'react';
 

package/src/components/layout/ContentToolbar/ContentToolbar.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { Box, Button, Divider, Typography } from '@mui/material';
+import { Box, Button, Checkbox, Divider, Typography } from '@mui/material';
 import React from 'react';
 
 import type { ContentToolbarProps } from './ContentToolbar.types';
@@ -17,6 +17,87 @@ const selectionButtonSx = {
   color: 'text.primary',
 } as const;
 
+type SelectionClusterProps = Pick<
+  ContentToolbarProps,
+  'hasSelection' | 'selectedCount' | 'selectAll' | 'clearSelection' | 'actions' | 'selectAllTestId' | 'clearAllTestId' | 'edgeAlign'
+>;
+
+/** The left cluster: Select All + (when selecting) Clear All / count / actions. */
+function SelectionCluster({
+  hasSelection,
+  selectedCount,
+  selectAll,
+  clearSelection,
+  actions,
+  selectAllTestId,
+  clearAllTestId,
+  edgeAlign = false,
+}: SelectionClusterProps): React.JSX.Element {
+  const actionsSlot = actions !== undefined && (
+    <Box sx={{ ml: 0.5, display: 'flex', flexShrink: 0, alignItems: 'center' }}>{actions}</Box>
+  );
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        minWidth: 0,
+        // Mobile: don't grow, so the controls sit on the SAME line as the checkbox
+        // (no orphaned selection row). Desktop: grow to push controls right.
+        flex: { xs: '0 0 auto', md: 1 },
+        alignItems: 'center',
+        gap: 1.5,
+        ml: edgeAlign ? -1.5 : 0,
+      }}
+    >
+      {/* Desktop: a "Select All" text button (md+). Mobile: a compact checkbox
+          that toggles select-all/clear — the text would eat the tight row. */}
+      <Button
+        variant="text"
+        size="small"
+        color="inherit"
+        onClick={selectAll}
+        data-testid={selectAllTestId}
+        sx={{ ...selectionButtonSx, display: { xs: 'none', md: 'inline-flex' } }}
+      >
+        Select All
+      </Button>
+      <Checkbox
+        size="small"
+        checked={hasSelection}
+        onChange={(event) => (event.target.checked ? selectAll() : clearSelection())}
+        data-testid={`${selectAllTestId}-checkbox`}
+        inputProps={{ 'aria-label': 'Selecionar todos' }}
+        sx={{ p: 0.5, display: { xs: 'inline-flex', md: 'none' } }}
+      />
+      {hasSelection ? (
+        <>
+          <Button
+            variant="text"
+            size="small"
+            color="inherit"
+            onClick={clearSelection}
+            data-testid={clearAllTestId}
+            sx={selectionButtonSx}
+          >
+            Clear All
+          </Button>
+          <Divider orientation="vertical" flexItem sx={{ height: 16, alignSelf: 'center' }} />
+          <Typography
+            component="span"
+            data-testid="selected-count-indicator"
+            sx={{ fontSize: '0.875rem', color: 'text.secondary', whiteSpace: 'nowrap', flexShrink: 0 }}
+          >
+            {selectedCount} {selectedCount === 1 ? 'item' : 'items'} selected
+          </Typography>
+          {actionsSlot}
+        </>
+      ) : (
+        actionsSlot
+      )}
+    </Box>
+  );
+}
+
 /**
  * Shared toolbar for content pages (Favorites, Personal Space, Recents, …). The
  * left cluster owns selection chrome — **Select All**, and once items are
@@ -58,51 +139,46 @@ export function ContentToolbar({
   edgeAlign = false,
 }: ContentToolbarProps): React.JSX.Element {
   return (
-    <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 2 }}>
-      <Box sx={{ display: 'flex', minWidth: 0, flex: 1, alignItems: 'center', gap: 1.5, ml: edgeAlign ? -1.5 : 0 }}>
-        <Button
-          variant="text"
-          size="small"
-          color="inherit"
-          onClick={selectAll}
-          data-testid={selectAllTestId}
-          sx={selectionButtonSx}
-        >
-          Select All
-        </Button>
+    // Wrap the two clusters onto separate rows when they can't share one line
+    // (narrow screens / phones) instead of letting the controls collide.
+    <Box
+      sx={{
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        gap: 2,
+        flexWrap: 'wrap',
+        rowGap: 1,
+      }}
+    >
+      <SelectionCluster
+        hasSelection={hasSelection}
+        selectedCount={selectedCount}
+        selectAll={selectAll}
+        clearSelection={clearSelection}
+        actions={actions}
+        selectAllTestId={selectAllTestId}
+        clearAllTestId={clearAllTestId}
+        edgeAlign={edgeAlign}
+      />
 
-        {hasSelection ? (
-          <>
-            <Button
-              variant="text"
-              size="small"
-              color="inherit"
-              onClick={clearSelection}
-              data-testid={clearAllTestId}
-              sx={selectionButtonSx}
-            >
-              Clear All
-            </Button>
-            <Divider orientation="vertical" flexItem sx={{ height: 16, alignSelf: 'center' }} />
-            <Typography
-              component="span"
-              data-testid="selected-count-indicator"
-              sx={{ fontSize: '0.875rem', color: 'text.secondary', whiteSpace: 'nowrap', flexShrink: 0 }}
-            >
-              {selectedCount} {selectedCount === 1 ? 'item' : 'items'} selected
-            </Typography>
-            {actions !== undefined && (
-              <Box sx={{ ml: 0.5, display: 'flex', flexShrink: 0, alignItems: 'center' }}>{actions}</Box>
-            )}
-          </>
-        ) : (
-          actions !== undefined && (
-            <Box sx={{ ml: 0.5, display: 'flex', flexShrink: 0, alignItems: 'center' }}>{actions}</Box>
-          )
-        )}
+      {/* ml:auto keeps the controls right-aligned even when the cluster wraps to
+       * its own row (where justify-content:space-between would otherwise snap a
+       * lone item to the left); it's a no-op on a shared row. */}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          flexWrap: 'wrap',
+          // Tight (5px) when browsing so the controls fit one line beside the
+          // checkbox; roomier (14px) in selection mode where they get their own row.
+          gap: hasSelection ? '14px' : '5px',
+          ml: 'auto',
+          mr: edgeAlign ? -1.5 : 0,
+        }}
+      >
+        {rightControls}
       </Box>
-
-      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mr: edgeAlign ? -1.5 : 0 }}>{rightControls}</Box>
     </Box>
   );
 }

package/src/components/layout/ContentToolbar/ContentToolbar.types.ts

@@ -124,6 +124,15 @@ export interface MultiSelectDropdownProps<TValue extends string = string> {
   searchPlaceholder?: string;
   /** Shown when the search matches no options. @default "No results" */
   noResultsLabel?: string;
+  /**
+   * Trigger layout. `inline` (default) renders a compact `Label:` text button for
+   * a horizontal toolbar. `stacked` renders the label on its own line above a
+   * full-width, outlined select-style control (a filter panel). `pill` renders a
+   * rounded outlined chip (`Label ▾`, with a count when a selection is active) —
+   * for a horizontal filter row.
+   * @default "inline"
+   */
+  layout?: 'inline' | 'stacked' | 'pill';
   'data-testid'?: string;
 }
 

package/src/components/layout/ContentToolbar/FilterTrigger.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { FilterListRounded as FilterIcon } from '@mui/icons-material';
+import FilterIcon from '@mui/icons-material/FilterListRounded';
 import { Box, Button } from '@mui/material';
 import React from 'react';