@12-apps/ui 1.0.0

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

@@ -0,0 +1,334 @@
+'use client';
+
+import { Check as CheckIcon, KeyboardArrowDown as ChevronDownIcon, MoreVert as KebabIcon } from '@mui/icons-material';
+import { Box, Button, IconButton, Menu, MenuItem, Popover, Stack, Typography } from '@mui/material';
+import React, { useState } from 'react';
+
+import type {
+  SavedViewLike,
+  SavedViewsLabels,
+  SavedViewsMenuProps,
+} from './ContentToolbar.types';
+
+/** Default (pt-BR) strings; override any via the `labels` prop. */
+const DEFAULT_LABELS: SavedViewsLabels = {
+  trigger: 'Visões',
+  mainView: 'Visão principal',
+  pinned: 'Fixadas',
+  recent: 'Recentes',
+  empty: 'Nenhuma visão salva ainda.',
+  saveCurrent: '+ Salvar visão atual',
+  manageAll: 'Gerenciar visões',
+  apply: 'Aplicar',
+  setDefault: 'Definir como padrão',
+  pin: 'Fixar na barra lateral',
+  unpin: 'Desafixar',
+  share: 'Compartilhar com a equipe',
+  unshare: 'Tornar privada',
+  edit: 'Editar',
+  remove: 'Excluir',
+  defaultTag: 'Padrão',
+};
+
+/** How many non-pinned views show under "Recentes". */
+const RECENT_LIMIT = 5;
+
+interface RowHandlers<V extends SavedViewLike> {
+  apply: (view: V) => void;
+  onEdit: (view: V) => void;
+  onDelete: (view: V) => void;
+  onSetDefault: (view: V) => void;
+  onTogglePin: (view: V) => void;
+  onToggleShare: (view: V) => void;
+}
+
+function DefaultTag({ label, testId }: { label: string; testId: string }): React.JSX.Element {
+  return (
+    <Box
+      component="span"
+      data-testid={testId}
+      sx={{ px: 0.75, py: 0.125, borderRadius: 1, fontSize: '0.7rem', bgcolor: 'primary.main', color: 'primary.contrastText' }}
+    >
+      {label}
+    </Box>
+  );
+}
+
+interface KebabAction {
+  id: string;
+  label: string;
+  danger?: boolean;
+  run: () => void;
+}
+
+/** Build the per-view ⋮ actions; owner-only mutations follow "Apply". */
+function buildActions<V extends SavedViewLike>(
+  view: V,
+  handlers: RowHandlers<V>,
+  labels: SavedViewsLabels,
+): KebabAction[] {
+  const actions: KebabAction[] = [{ id: 'apply', label: labels.apply, run: () => handlers.apply(view) }];
+  if (!view.isOwner) return actions;
+  if (!view.isDefault) {
+    actions.push({ id: 'default', label: labels.setDefault, run: () => handlers.onSetDefault(view) });
+  }
+  actions.push({ id: 'pin', label: view.pinned ? labels.unpin : labels.pin, run: () => handlers.onTogglePin(view) });
+  actions.push({ id: 'share', label: view.shared ? labels.unshare : labels.share, run: () => handlers.onToggleShare(view) });
+  actions.push({ id: 'edit', label: labels.edit, run: () => handlers.onEdit(view) });
+  actions.push({ id: 'delete', label: labels.remove, danger: true, run: () => handlers.onDelete(view) });
+  return actions;
+}
+
+function ViewKebab<V extends SavedViewLike>({
+  view,
+  handlers,
+  labels,
+  testIdPrefix,
+}: {
+  view: V;
+  handlers: RowHandlers<V>;
+  labels: SavedViewsLabels;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const close = (): void => setAnchorEl(null);
+  return (
+    <>
+      <IconButton
+        size="small"
+        aria-label={`${labels.apply} ${view.name}`}
+        data-testid={`${testIdPrefix}-kebab-${view.id}`}
+        onClick={(event) => setAnchorEl(event.currentTarget)}
+        sx={{ width: 28, height: 28, color: 'text.secondary' }}
+      >
+        <KebabIcon sx={{ fontSize: 16 }} />
+      </IconButton>
+      <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={close}>
+        {buildActions(view, handlers, labels).map((action) => (
+          <MenuItem
+            key={action.id}
+            data-testid={`${testIdPrefix}-item-${action.id}-${view.id}`}
+            onClick={() => {
+              action.run();
+              close();
+            }}
+            sx={action.danger ? { color: 'error.main' } : undefined}
+          >
+            {action.label}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+}
+
+function ViewRow<V extends SavedViewLike>({
+  view,
+  handlers,
+  labels,
+  testIdPrefix,
+}: {
+  view: V;
+  handlers: RowHandlers<V>;
+  labels: SavedViewsLabels;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  return (
+    <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }} data-testid={`${testIdPrefix}-row-${view.id}`}>
+      <Box
+        onClick={() => handlers.apply(view)}
+        sx={{ flex: 1, minWidth: 0, cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 0.75 }}
+        data-testid={`${testIdPrefix}-apply-${view.id}`}
+      >
+        <Typography component="span" sx={{ fontSize: '0.875rem' }}>
+          {view.name}
+        </Typography>
+        {view.isDefault && <DefaultTag label={labels.defaultTag} testId={`${testIdPrefix}-default-${view.id}`} />}
+      </Box>
+      <ViewKebab view={view} handlers={handlers} labels={labels} testIdPrefix={testIdPrefix} />
+    </Stack>
+  );
+}
+
+function ViewSection<V extends SavedViewLike>({
+  title,
+  list,
+  sectionKey,
+  handlers,
+  labels,
+  testIdPrefix,
+}: {
+  title: string;
+  list: V[];
+  sectionKey: string;
+  handlers: RowHandlers<V>;
+  labels: SavedViewsLabels;
+  testIdPrefix: string;
+}): React.JSX.Element | null {
+  if (list.length === 0) return null;
+  return (
+    <Box data-testid={`${testIdPrefix}-section-${sectionKey}`}>
+      <Typography component="span" sx={{ fontSize: '0.75rem', fontWeight: 600, color: 'text.secondary' }}>
+        {title}
+      </Typography>
+      <Stack spacing={0.5} sx={{ mt: 0.5 }}>
+        {list.map((view) => (
+          <ViewRow key={view.id} view={view} handlers={handlers} labels={labels} testIdPrefix={testIdPrefix} />
+        ))}
+      </Stack>
+    </Box>
+  );
+}
+
+/** A borderless footer text button (Save current / Manage all). */
+function FooterButton({
+  label,
+  testId,
+  onClick,
+}: {
+  label: string;
+  testId: string;
+  onClick: () => void;
+}): React.JSX.Element {
+  return (
+    <Button variant="text" size="small" color="inherit" onClick={onClick} data-testid={testId} sx={{ textTransform: 'none' }}>
+      {label}
+    </Button>
+  );
+}
+
+/** The popover contents: the built-in Main vision default, saved-view sections, and footer. */
+function PopoverBody<V extends SavedViewLike>({
+  views,
+  pinned,
+  recent,
+  activeViewName,
+  labels,
+  handlers,
+  onSelectMain,
+  onSaveCurrent,
+  onManageAll,
+  testIdPrefix,
+}: {
+  views: V[];
+  pinned: V[];
+  recent: V[];
+  activeViewName?: string;
+  labels: SavedViewsLabels;
+  handlers: RowHandlers<V>;
+  onSelectMain: () => void;
+  onSaveCurrent: () => void;
+  onManageAll: () => void;
+  testIdPrefix: string;
+}): React.JSX.Element {
+  return (
+    <Stack spacing={1.5} sx={{ p: 1.5, width: 300 }} data-testid={`${testIdPrefix}-popover`}>
+      {/* Built-in no-filter default, always available above the saved views. */}
+      <MenuItem data-testid={`${testIdPrefix}-main`} selected={!activeViewName} onClick={onSelectMain} sx={{ borderRadius: 1, px: 1, gap: 1 }}>
+        <Box component="span" sx={{ flex: 1, minWidth: 0, fontSize: '0.875rem' }}>
+          {labels.mainView}
+        </Box>
+        {!activeViewName && <CheckIcon sx={{ fontSize: 16, color: 'primary.main' }} />}
+      </MenuItem>
+      {views.length === 0 ? (
+        <Typography sx={{ fontSize: '0.75rem', color: 'text.secondary' }}>{labels.empty}</Typography>
+      ) : (
+        <>
+          <ViewSection title={labels.pinned} list={pinned} sectionKey="pinned" handlers={handlers} labels={labels} testIdPrefix={testIdPrefix} />
+          <ViewSection title={labels.recent} list={recent} sectionKey="recent" handlers={handlers} labels={labels} testIdPrefix={testIdPrefix} />
+        </>
+      )}
+      <Box sx={{ borderTop: 1, borderColor: 'divider', pt: 1 }}>
+        <Stack spacing={0.5} sx={{ alignItems: 'flex-start' }}>
+          <FooterButton label={labels.saveCurrent} testId={`${testIdPrefix}-save-current`} onClick={onSaveCurrent} />
+          <FooterButton label={labels.manageAll} testId={`${testIdPrefix}-manage-all`} onClick={onManageAll} />
+        </Stack>
+      </Box>
+    </Stack>
+  );
+}
+
+/**
+ * Stateless saved-views dropdown: a neutral trigger (styled like the sibling
+ * toolbar controls) that shows `activeViewName` when a view is applied, else the
+ * built-in "Main vision" label. The popover lists the Main vision default plus
+ * pinned + recent views; a per-view ⋮ exposes owner-only mutations. This
+ * component owns NO data — every action is a callback, so a page-level Connector
+ * wires it to the backend.
+ */
+export function SavedViewsMenu<V extends SavedViewLike = SavedViewLike>({
+  views,
+  activeViewName,
+  onApply,
+  onSelectMain,
+  onSaveCurrent,
+  onEdit,
+  onDelete,
+  onSetDefault,
+  onTogglePin,
+  onToggleShare,
+  onManageAll,
+  labels: labelOverrides,
+  testIdPrefix = 'views',
+}: SavedViewsMenuProps<V>): React.JSX.Element {
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
+  const close = (): void => setAnchorEl(null);
+  const runAndClose = (action: () => void) => (): void => {
+    action();
+    close();
+  };
+  const labels = { ...DEFAULT_LABELS, ...labelOverrides };
+
+  const pinned = views.filter((view) => view.pinned);
+  const recent = views.filter((view) => !view.pinned).slice(0, RECENT_LIMIT);
+
+  const handlers: RowHandlers<V> = {
+    apply: (view) => {
+      onApply(view);
+      close();
+    },
+    onEdit,
+    onDelete,
+    onSetDefault,
+    onTogglePin,
+    onToggleShare,
+  };
+
+  return (
+    <>
+      <Button
+        variant="text"
+        size="small"
+        color="inherit"
+        onClick={(event) => setAnchorEl(event.currentTarget)}
+        data-testid={`${testIdPrefix}-button`}
+        aria-haspopup="menu"
+        aria-expanded={Boolean(anchorEl)}
+        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
+      >
+        {activeViewName ?? labels.mainView}
+        <ChevronDownIcon sx={{ fontSize: 14 }} />
+      </Button>
+      <Popover
+        open={Boolean(anchorEl)}
+        anchorEl={anchorEl}
+        onClose={close}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      >
+        <PopoverBody
+          views={views}
+          pinned={pinned}
+          recent={recent}
+          activeViewName={activeViewName}
+          labels={labels}
+          handlers={handlers}
+          onSelectMain={runAndClose(onSelectMain)}
+          onSaveCurrent={runAndClose(onSaveCurrent)}
+          onManageAll={runAndClose(onManageAll)}
+          testIdPrefix={testIdPrefix}
+        />
+      </Popover>
+    </>
+  );
+}

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

@@ -0,0 +1,213 @@
+'use client';
+
+import { Check as CheckIcon, KeyboardArrowDown as ChevronDownIcon } from '@mui/icons-material';
+import { Box, Button, Divider, ListSubheader, Menu, MenuItem, Typography } from '@mui/material';
+import React, { useState } from 'react';
+
+import type {
+  SortByDropdownProps,
+  SortFieldDefinition,
+  SortOrderOption,
+} from './ContentToolbar.types';
+
+function findActiveField<TField extends string>(
+  fields: SortFieldDefinition<TField>[] | undefined,
+  activeField: TField,
+): SortFieldDefinition<TField> | undefined {
+  return fields?.find((field) => field.value === activeField);
+}
+
+function findActiveOrder(
+  fieldDef: SortFieldDefinition | undefined,
+  activeOrder: string | undefined,
+): SortOrderOption | undefined {
+  const options = fieldDef?.orderOptions;
+  if (!options?.length) return undefined;
+  return options.find((option) => option.value === activeOrder) ?? options[0];
+}
+
+function resolveArrowDirection(option: SortOrderOption | undefined, indexInList: number): 'up' | 'down' {
+  if (option?.arrowDirection) return option.arrowDirection;
+  // A missing (<0) or first index sorts "down"; any later option sorts "up".
+  return indexInList <= 0 ? 'down' : 'up';
+}
+
+function buildTriggerLabel(
+  fieldDef: SortFieldDefinition | undefined,
+  orderOption: SortOrderOption | undefined,
+): string {
+  if (!fieldDef) return '';
+  if (fieldDef.showOrderInTrigger === false || !orderOption) return fieldDef.label;
+  if (fieldDef.triggerLabelStyle === 'range' && fieldDef.orderOptions?.length === 2) {
+    const other = fieldDef.orderOptions.find((option) => option.value !== orderOption.value);
+    if (other) return `${fieldDef.label} (${orderOption.label.toLowerCase()}-${other.label.toLowerCase()})`;
+  }
+  return `${fieldDef.label} (${orderOption.label.toLowerCase()})`;
+}
+
+const sectionLabelSx = { px: 1, py: 0.75, fontSize: '0.75rem', fontWeight: 600, color: 'text.primary', lineHeight: 1.5 } as const;
+
+/** A fixed-width check slot (empty when unchecked) so labels align. */
+function SortCheck({ checked }: { checked: boolean }): React.JSX.Element {
+  return (
+    <Box component="span" sx={{ display: 'flex', width: 16, flexShrink: 0, alignItems: 'center', justifyContent: 'center' }} aria-hidden>
+      {checked ? <CheckIcon sx={{ fontSize: 14 }} /> : null}
+    </Box>
+  );
+}
+
+/** One `id`/`label` menu row with a leading check + testid. */
+function SortRow({
+  value,
+  label,
+  checked,
+  onSelect,
+}: {
+  value: string;
+  label: string;
+  checked: boolean;
+  onSelect: () => void;
+}): React.JSX.Element {
+  return (
+    <MenuItem data-testid={`sort-${value}-option`} onClick={onSelect} sx={{ gap: 1 }}>
+      <SortCheck checked={checked} />
+      <Box component="span" sx={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
+        {label}
+      </Box>
+    </MenuItem>
+  );
+}
+
+interface SortMenuProps<TField extends string> {
+  anchorEl: HTMLElement | null;
+  open: boolean;
+  close: () => void;
+  orderOptions: SortOrderOption[];
+  activeOrderValue: string | undefined;
+  onOrderSelect: (value: string) => void;
+  fields: SortFieldDefinition<TField>[];
+  activeField: TField;
+  onFieldSelect: (field: TField) => void;
+}
+
+/** The Order + Sort sections of the dropdown menu. */
+function SortMenu<TField extends string>({
+  anchorEl,
+  open,
+  close,
+  orderOptions,
+  activeOrderValue,
+  onOrderSelect,
+  fields,
+  activeField,
+  onFieldSelect,
+}: SortMenuProps<TField>): React.JSX.Element {
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      open={open}
+      onClose={close}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+      transformOrigin={{ vertical: 'top', horizontal: 'left' }}
+      slotProps={{ paper: { sx: { minWidth: 180 } } }}
+    >
+      {orderOptions.length > 0 && [
+        <ListSubheader key="order-label" sx={sectionLabelSx}>
+          Order
+        </ListSubheader>,
+        ...orderOptions.map((option) => (
+          <SortRow
+            key={`order-${option.value}`}
+            value={option.value}
+            label={option.label}
+            checked={activeOrderValue === option.value}
+            onSelect={() => onOrderSelect(option.value)}
+          />
+        )),
+        <Divider key="order-divider" />,
+      ]}
+      <ListSubheader sx={sectionLabelSx}>Sort</ListSubheader>
+      {fields.map((field) => (
+        <SortRow
+          key={field.value}
+          value={field.value}
+          label={field.label}
+          checked={activeField === field.value}
+          onSelect={() => onFieldSelect(field.value)}
+        />
+      ))}
+    </Menu>
+  );
+}
+
+/**
+ * Generic "Sort By" dropdown: a "Sort By:" label + a trigger whose menu has an
+ * **Order** section (direction within the active field) and a **Sort** section
+ * (which field). The Order section is hidden when the field defines no order
+ * options. Faithful MUI port of the reference control.
+ */
+export function SortByDropdown<TField extends string = string>({
+  fields,
+  activeField,
+  activeOrder,
+  onFieldChange,
+  onOrderChange,
+  'data-testid': testId,
+}: SortByDropdownProps<TField>): React.JSX.Element {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const open = Boolean(anchorEl);
+  const close = (): void => setAnchorEl(null);
+
+  const safeFields = fields ?? [];
+  const activeFieldDef = findActiveField(fields, activeField);
+  const orderOptions = activeFieldDef?.orderOptions ?? [];
+  const activeOrderOption = findActiveOrder(activeFieldDef, activeOrder);
+  const useRangeLabel = activeFieldDef?.triggerLabelStyle === 'range' && orderOptions.length === 2;
+
+  const orderIndex = orderOptions.findIndex((option) => option.value === activeOrderOption?.value);
+  const arrow = resolveArrowDirection(activeOrderOption, orderIndex);
+  const arrowSuffix = orderOptions.length > 0 && !useRangeLabel ? ` ${arrow === 'down' ? '↓' : '↑'}` : '';
+
+  function handleFieldChange(field: TField): void {
+    onFieldChange(field);
+    const nextOrder = safeFields.find((candidate) => candidate.value === field)?.orderOptions?.[0]?.value;
+    if (nextOrder && onOrderChange) onOrderChange(nextOrder);
+    close();
+  }
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, fontSize: '0.875rem' }}>
+      <Typography component="span" sx={{ color: 'text.secondary', fontSize: '0.875rem' }}>
+        Sort By:
+      </Typography>
+      <Button
+        variant="text"
+        size="small"
+        color="inherit"
+        data-testid={testId}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={(event) => setAnchorEl(event.currentTarget)}
+        sx={{ minWidth: 0, height: 32, px: 1, gap: 0.5, color: 'text.primary', textTransform: 'none', fontWeight: 600 }}
+      >
+        {buildTriggerLabel(activeFieldDef, activeOrderOption)}
+        {arrowSuffix}
+        <ChevronDownIcon sx={{ fontSize: 14 }} />
+      </Button>
+      <SortMenu
+        anchorEl={anchorEl}
+        open={open}
+        close={close}
+        orderOptions={orderOptions}
+        activeOrderValue={activeOrderOption?.value}
+        onOrderSelect={(value) => {
+          onOrderChange?.(value);
+          close();
+        }}
+        fields={safeFields}
+        activeField={activeField}
+        onFieldSelect={handleFieldChange}
+      />
+    </Box>
+  );
+}

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

@@ -0,0 +1,98 @@
+'use client';
+
+import {
+  Check as CheckIcon,
+  KeyboardArrowDown as ChevronDownIcon,
+  GridViewOutlined as GridIcon,
+  FormatListBulletedRounded as ListIcon,
+} from '@mui/icons-material';
+import { Box, Button, ListItemIcon, ListItemText, Menu, MenuItem, Slider } from '@mui/material';
+import type { SvgIconComponent } from '@mui/icons-material';
+import React, { useState } from 'react';
+
+import type { ViewMode, ViewSelectorProps } from './ContentToolbar.types';
+
+const VIEW_OPTIONS: { value: ViewMode; label: string; icon: SvgIconComponent }[] = [
+  { value: 'grid', label: 'Grid View', icon: GridIcon },
+  { value: 'list', label: 'List View', icon: ListIcon },
+];
+
+/**
+ * View selector: a grid/list dropdown plus a card-size zoom slider (grid mode
+ * only). Faithful MUI port of the reference toolbar's view control.
+ */
+export function ViewSelector({
+  viewMode,
+  onViewModeChange,
+  zoom,
+  onZoomChange,
+}: ViewSelectorProps): React.JSX.Element {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const open = Boolean(anchorEl);
+  const activeOption = VIEW_OPTIONS.find((option) => option.value === viewMode) ?? VIEW_OPTIONS[0]!;
+  const ActiveIcon = activeOption.icon;
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
+      {viewMode === 'grid' && (
+        <Box sx={{ width: 96, display: 'flex', alignItems: 'center' }}>
+          <Slider
+            data-testid="resize-card-slider"
+            aria-label="Card size"
+            value={zoom[0] ?? 0}
+            onChange={(_, value) => onZoomChange([value as number])}
+            min={0}
+            max={100}
+            step={1}
+            size="small"
+          />
+        </Box>
+      )}
+
+      <Button
+        data-testid="view-mode-btn"
+        variant="text"
+        size="small"
+        color="inherit"
+        aria-label={activeOption.label}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={(event) => setAnchorEl(event.currentTarget)}
+        sx={{ minWidth: 0, height: 32, px: 1, gap: 1, color: 'text.secondary' }}
+      >
+        <ActiveIcon sx={{ fontSize: 16 }} />
+        <ChevronDownIcon sx={{ fontSize: 14 }} />
+      </Button>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={() => setAnchorEl(null)}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+        transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+        slotProps={{ paper: { sx: { minWidth: 180 } } }}
+      >
+        {VIEW_OPTIONS.map((option) => {
+          const OptionIcon = option.icon;
+          const selected = viewMode === option.value;
+          return (
+            <MenuItem
+              key={option.value}
+              data-testid={`view-mode-${option.value}`}
+              onClick={() => {
+                onViewModeChange(option.value);
+                setAnchorEl(null);
+              }}
+              sx={{ gap: 1.5 }}
+            >
+              <ListItemText>{option.label}</ListItemText>
+              <OptionIcon sx={{ fontSize: 16, color: 'text.secondary' }} />
+              <ListItemIcon sx={{ minWidth: 'auto !important' }}>
+                <CheckIcon sx={{ fontSize: 16, color: selected ? 'text.primary' : 'transparent' }} />
+              </ListItemIcon>
+            </MenuItem>
+          );
+        })}
+      </Menu>
+    </Box>
+  );
+}

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

@@ -0,0 +1,39 @@
+import { describe, expect, it, vi } from "vitest";
+import { fireEvent, render, screen } from "@testing-library/react";
+
+import { ColumnsMenu } from "../ColumnsMenu";
+import type { ColumnVisibilityOption } from "../ContentToolbar.types";
+
+const columns: ColumnVisibilityOption[] = [
+  { id: "name", label: "Nome", visible: true },
+  { id: "sku", label: "SKU", visible: false },
+];
+
+function renderMenu(overrides: Partial<React.ComponentProps<typeof ColumnsMenu>> = {}) {
+  const onToggle = vi.fn();
+  render(<ColumnsMenu columns={columns} onToggle={onToggle} data-testid="cols" {...overrides} />);
+  return onToggle;
+}
+
+describe("ColumnsMenu", () => {
+  it("opens and lists each column with its visibility", () => {
+    renderMenu();
+    fireEvent.click(screen.getByTestId("cols"));
+    expect(screen.getByTestId("cols-name")).toBeInTheDocument();
+    expect(screen.getByTestId("cols-sku")).toBeInTheDocument();
+  });
+
+  it("toggles a hidden column on", () => {
+    const onToggle = renderMenu();
+    fireEvent.click(screen.getByTestId("cols"));
+    fireEvent.click(screen.getByTestId("cols-sku"));
+    expect(onToggle).toHaveBeenCalledWith("sku", true);
+  });
+
+  it("toggles a visible column off", () => {
+    const onToggle = renderMenu();
+    fireEvent.click(screen.getByTestId("cols"));
+    fireEvent.click(screen.getByTestId("cols-name"));
+    expect(onToggle).toHaveBeenCalledWith("name", false);
+  });
+});