@12-apps/ui 1.0.0

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

@@ -0,0 +1,108 @@
+'use client';
+
+import { Box, Button, Divider, Typography } from '@mui/material';
+import React from 'react';
+
+import type { ContentToolbarProps } from './ContentToolbar.types';
+
+const selectionButtonSx = {
+  minWidth: 0,
+  height: 'auto',
+  borderRadius: 0.5,
+  fontWeight: 600,
+  py: 0.5,
+  px: 1.5,
+  fontSize: '0.75rem',
+  textTransform: 'none',
+  color: 'text.primary',
+} as const;
+
+/**
+ * Shared toolbar for content pages (Favorites, Personal Space, Recents, …). The
+ * left cluster owns selection chrome — **Select All**, and once items are
+ * selected, **Clear All** + an "N items selected" count + an optional `actions`
+ * slot. The right cluster is a free `rightControls` slot for page-specific
+ * controls (ViewSelector, SortByDropdown, MultiSelectDropdown, FilterTrigger).
+ *
+ * Faithful, generic MUI port of the reference `ContentPageToolbar` — the
+ * domain-specific default actions are intentionally left to the consumer via
+ * the `actions` slot so this stays agnostic and reusable across projects.
+ *
+ * @example
+ * ```tsx
+ * <ContentToolbar
+ *   hasSelection={selected.size > 0}
+ *   selectedCount={selected.size}
+ *   selectAll={selectAll}
+ *   clearSelection={clear}
+ *   rightControls={
+ *     <>
+ *       <ViewSelector viewMode={view} onViewModeChange={setView} zoom={zoom} onZoomChange={setZoom} />
+ *       <SortByDropdown fields={FIELDS} activeField={field} onFieldChange={setField} />
+ *       <MultiSelectDropdown label="Content Type" options={types} selected={typeSet} onToggle={toggle} onClear={clear} />
+ *       <FilterTrigger open={panelOpen} onOpenChange={setPanelOpen} hasActiveFilters={hasFilters} />
+ *     </>
+ *   }
+ * />
+ * ```
+ */
+export function ContentToolbar({
+  hasSelection,
+  selectedCount,
+  selectAll,
+  clearSelection,
+  rightControls,
+  actions,
+  selectAllTestId,
+  clearAllTestId,
+  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>
+
+        {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>
+          )
+        )}
+      </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

@@ -0,0 +1,229 @@
+import type { ReactNode } from 'react';
+
+/* ── ContentToolbar (the bar shell) ──────────────────────────────────────── */
+
+/** Props for {@link ContentToolbar} — the shared content-page toolbar. */
+export interface ContentToolbarProps {
+  /** Whether the page is in selection mode (shows Clear All + count + actions). */
+  hasSelection: boolean;
+  /** Number of currently selected items. */
+  selectedCount: number;
+  /** Select every item on the page. */
+  selectAll: () => void;
+  /** Clear the current selection. */
+  clearSelection: () => void;
+  /** Page-specific right-aligned controls (ViewSelector, SortByDropdown, …). */
+  rightControls: ReactNode;
+  /**
+   * Selection actions slot, rendered after the count when items are selected
+   * (e.g. a "Delete" / "Send email" control). Kept generic — the consumer owns
+   * what the action does.
+   */
+  actions?: ReactNode;
+  /** Test id for the Select All button. */
+  selectAllTestId?: string;
+  /** Test id for the Clear All button. */
+  clearAllTestId?: string;
+  /**
+   * Compensate for inner button padding so the leading "Select All" and the
+   * trailing control align flush with a `px-N` parent's edges. Only enable when
+   * the toolbar is the sole child of that padded wrapper.
+   */
+  edgeAlign?: boolean;
+}
+
+/* ── ViewSelector ────────────────────────────────────────────────────────── */
+
+/** Grid or list layout for a content page. */
+export type ViewMode = 'grid' | 'list';
+
+/** Props for {@link ViewSelector}. */
+export interface ViewSelectorProps {
+  /** Current view mode. */
+  viewMode: ViewMode;
+  /** Called when the view mode changes. */
+  onViewModeChange: (mode: ViewMode) => void;
+  /** Card-size zoom for grid view (single-element `[0–100]`); grid mode only. */
+  zoom: number[];
+  /** Called when the zoom slider changes. */
+  onZoomChange: (value: number[]) => void;
+}
+
+/* ── SortByDropdown ──────────────────────────────────────────────────────── */
+
+/** A single order option (e.g. "Newest"/"Oldest") for a sort field. */
+export interface SortOrderOption {
+  value: string;
+  label: string;
+  /** Arrow shown in the trigger. Defaults to `down` for the first option. */
+  arrowDirection?: 'up' | 'down';
+}
+
+/** Definition of one sortable field. */
+export interface SortFieldDefinition<TField extends string = string> {
+  value: TField;
+  label: string;
+  /** When present, the "Order" section renders with these options. */
+  orderOptions?: SortOrderOption[];
+  /** Show the active order label in the trigger text. @default true */
+  showOrderInTrigger?: boolean;
+  /**
+   * Trigger-label style: `single` shows the selected order + a direction arrow
+   * (e.g. "Name (a–z) ↓"); `range` shows both ends joined (e.g. "Size
+   * (large–small)") and hides the arrow. @default 'single'
+   */
+  triggerLabelStyle?: 'single' | 'range';
+}
+
+/** Props for {@link SortByDropdown}. */
+export interface SortByDropdownProps<TField extends string = string> {
+  fields: SortFieldDefinition<TField>[];
+  activeField: TField;
+  activeOrder?: string;
+  onFieldChange: (field: TField) => void;
+  onOrderChange?: (order: string) => void;
+  'data-testid'?: string;
+}
+
+/* ── MultiSelectDropdown ─────────────────────────────────────────────────── */
+
+/** A selectable option with an optional item count. */
+export interface MultiSelectOption<TValue extends string = string> {
+  value: TValue;
+  label: string;
+  count?: number;
+}
+
+/** A toggle in the optional "Options" section below the main list. */
+export interface MultiSelectExtraOption {
+  id: string;
+  label: string;
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+}
+
+/** Props for {@link MultiSelectDropdown}. */
+export interface MultiSelectDropdownProps<TValue extends string = string> {
+  /** Label before the trigger (e.g. "Content Type"). */
+  label: string;
+  options: MultiSelectOption<TValue>[];
+  /** Selected values. Empty or full set both display `allLabel`. */
+  selected: ReadonlySet<TValue>;
+  onToggle: (value: TValue, checked: boolean) => void;
+  onClear: () => void;
+  /** Text when nothing or everything is selected. @default "All" */
+  allLabel?: string;
+  /** Extra toggles under a labelled "Options" section. */
+  extraOptions?: MultiSelectExtraOption[];
+  /**
+   * Show a search box that filters options by label (case-insensitive). Useful
+   * for long lists (e.g. many categories). @default `options.length > 8`
+   */
+  searchable?: boolean;
+  /** Placeholder for the search box (when `searchable`). @default "Search…" */
+  searchPlaceholder?: string;
+  /** Shown when the search matches no options. @default "No results" */
+  noResultsLabel?: string;
+  'data-testid'?: string;
+}
+
+/* ── FilterTrigger ───────────────────────────────────────────────────────── */
+
+/** Props for {@link FilterTrigger} — the labeled "Filtros" toggle button. */
+export interface FilterTriggerProps {
+  /** Whether the associated filter panel is open. */
+  open: boolean;
+  /** Toggle the filter panel open/closed. */
+  onOpenChange: (open: boolean) => void;
+  /** Mark the button as "filtered" (active styling) — implied when `activeCount > 0`. */
+  hasActiveFilters?: boolean;
+  /** Number of active filters; renders a count badge and active styling when > 0. */
+  activeCount?: number;
+  /** Button label. @default "Filtros" */
+  label?: string;
+  'data-testid'?: string;
+}
+
+/* ── ColumnsMenu ─────────────────────────────────────────────────────────── */
+
+/** One toggleable column in the {@link ColumnsMenu}. */
+export interface ColumnVisibilityOption {
+  /** Stable column id passed back to `onToggle`. */
+  id: string;
+  /** Human label shown beside the checkbox. */
+  label: string;
+  /** Whether the column is currently visible (checkbox checked). */
+  visible: boolean;
+  /** Disable the row (e.g. a required column that can't be hidden). */
+  locked?: boolean;
+}
+
+/** Props for {@link ColumnsMenu} — the stateless column-visibility selector. */
+export interface ColumnsMenuProps {
+  /** The hideable columns and their current visibility. */
+  columns: ColumnVisibilityOption[];
+  /** Called when a column is toggled; the caller owns the state. */
+  onToggle: (id: string, visible: boolean) => void;
+  /** Popover header. @default "Columns" */
+  title?: string;
+  /** Accessible label for the icon trigger. @default "Toggle columns" */
+  ariaLabel?: string;
+  'data-testid'?: string;
+}
+
+/* ── SavedViewsMenu ──────────────────────────────────────────────────────── */
+
+/** Minimal shape the {@link SavedViewsMenu} needs to render a saved view. */
+export interface SavedViewLike {
+  id: string;
+  name: string;
+  /** Pinned views surface under the "pinned" section. */
+  pinned?: boolean;
+  /** The user's default view (shows a tag). */
+  isDefault?: boolean;
+  /** Whether the signed-in user owns (and may mutate) this view. */
+  isOwner?: boolean;
+  /** Whether the view is shared with the team. */
+  shared?: boolean;
+}
+
+/** All user-facing strings in {@link SavedViewsMenu}; every field is optional. */
+export interface SavedViewsLabels {
+  trigger: string;
+  /** The built-in no-filter default view (shown at the top + as the trigger label). */
+  mainView: string;
+  pinned: string;
+  recent: string;
+  empty: string;
+  saveCurrent: string;
+  manageAll: string;
+  apply: string;
+  setDefault: string;
+  pin: string;
+  unpin: string;
+  share: string;
+  unshare: string;
+  edit: string;
+  remove: string;
+  defaultTag: string;
+}
+
+/** Props for {@link SavedViewsMenu} — the stateless saved-views dropdown. */
+export interface SavedViewsMenuProps<V extends SavedViewLike = SavedViewLike> {
+  views: V[];
+  /** When set, the trigger + active row reflect this saved view; else "Main vision" is active. */
+  activeViewName?: string;
+  onApply: (view: V) => void;
+  /** Switch to the built-in no-filter "Main vision" default. */
+  onSelectMain: () => void;
+  onSaveCurrent: () => void;
+  onEdit: (view: V) => void;
+  onDelete: (view: V) => void;
+  onSetDefault: (view: V) => void;
+  onTogglePin: (view: V) => void;
+  onToggleShare: (view: V) => void;
+  onManageAll: () => void;
+  /** Override any of the default (pt-BR) strings. */
+  labels?: Partial<SavedViewsLabels>;
+  testIdPrefix?: string;
+}

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

@@ -0,0 +1,71 @@
+'use client';
+
+import { FilterListRounded as FilterIcon } from '@mui/icons-material';
+import { Box, Button } from '@mui/material';
+import React from 'react';
+
+import type { FilterTriggerProps } from './ContentToolbar.types';
+
+/**
+ * Labeled filter toggle: a "Filtros" button (styled like the sibling toolbar
+ * controls) with a funnel icon and, when filters are active, a count badge — so
+ * it's obvious that the list is filtered and by how many facets. The panel itself
+ * is supplied by the consumer.
+ */
+export function FilterTrigger({
+  open,
+  onOpenChange,
+  hasActiveFilters = false,
+  activeCount = 0,
+  label = 'Filtros',
+  'data-testid': testId = 'toggle-filters-btn',
+}: FilterTriggerProps): React.JSX.Element {
+  const active = activeCount > 0 || hasActiveFilters;
+  return (
+    <Button
+      variant="text"
+      size="small"
+      color="inherit"
+      data-testid={testId}
+      aria-expanded={open}
+      aria-label={open ? 'Close filters' : 'Open filters'}
+      onClick={() => onOpenChange(!open)}
+      startIcon={<FilterIcon sx={{ fontSize: 16 }} />}
+      sx={{
+        minWidth: 0,
+        height: 32,
+        px: 1,
+        gap: 0.25,
+        textTransform: 'none',
+        fontWeight: 600,
+        color: active ? 'primary.main' : 'text.primary',
+        bgcolor: open ? 'action.selected' : 'transparent',
+      }}
+    >
+      {label}
+      {activeCount > 0 && (
+        <Box
+          component="span"
+          data-testid={`${testId}-count`}
+          sx={{
+            ml: 0.5,
+            minWidth: 18,
+            height: 18,
+            px: 0.5,
+            borderRadius: 999,
+            display: 'inline-flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '0.7rem',
+            fontWeight: 700,
+            lineHeight: 1,
+            bgcolor: 'primary.main',
+            color: 'primary.contrastText',
+          }}
+        >
+          {activeCount}
+        </Box>
+      )}
+    </Button>
+  );
+}

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

@@ -0,0 +1,297 @@
+'use client';
+
+import { KeyboardArrowDown as ChevronDownIcon, Search as SearchIcon } from '@mui/icons-material';
+import {
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  InputAdornment,
+  ListSubheader,
+  Menu,
+  MenuItem,
+  TextField,
+  Typography,
+} from '@mui/material';
+import React, { useMemo, useState } from 'react';
+
+import type {
+  MultiSelectDropdownProps,
+  MultiSelectExtraOption,
+  MultiSelectOption,
+} from './ContentToolbar.types';
+
+/**
+ * Trigger label from the current selection: `allLabel` when none/all are
+ * selected, the single label when one, else "first (+N)". Uses Set iteration
+ * order so the label reflects the first-clicked option.
+ */
+function buildTriggerLabel<TValue extends string>(
+  selected: ReadonlySet<TValue>,
+  options: MultiSelectOption<TValue>[],
+  allLabel: string,
+): string {
+  const size = selected.size;
+  if (size === 0 || size === options.length) return allLabel;
+  const labelMap = new Map(options.map((option) => [option.value, option.label]));
+  const firstValue = selected.values().next().value as TValue;
+  const firstLabel = labelMap.get(firstValue) ?? allLabel;
+  if (size === 1) return firstLabel;
+  return `${firstLabel} (+${size - 1})`;
+}
+
+/** One checkbox menu row with an optional trailing count. */
+function CheckboxRow({
+  label,
+  count,
+  checked,
+  onToggle,
+}: {
+  label: string;
+  count?: number;
+  checked: boolean;
+  onToggle: (next: boolean) => void;
+}): React.JSX.Element {
+  return (
+    <MenuItem onClick={() => onToggle(!checked)} sx={{ gap: 1 }}>
+      <Checkbox checked={checked} size="small" disableRipple sx={{ p: 0, pointerEvents: 'none' }} tabIndex={-1} />
+      <Box component="span" sx={{ flex: 1, minWidth: 0, textAlign: 'left' }}>
+        {label}
+        {count != null && (
+          <Box component="span" sx={{ color: 'text.secondary' }}>
+            {' '}
+            ({count})
+          </Box>
+        )}
+      </Box>
+    </MenuItem>
+  );
+}
+
+/**
+ * Generic multi-select dropdown with checkboxes, counts, an optional "Options"
+ * section, and a "Clear" action. Faithful MUI port of the reference toolbar's
+ * "Content Type" control. The menu stays open while toggling options.
+ */
+export function MultiSelectDropdown<TValue extends string = string>({
+  label,
+  options,
+  selected,
+  onToggle,
+  onClear,
+  allLabel = 'All',
+  extraOptions,
+  searchable,
+  searchPlaceholder = 'Search…',
+  noResultsLabel = 'No results',
+  'data-testid': testId,
+}: MultiSelectDropdownProps<TValue>): React.JSX.Element {
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
+  const [query, setQuery] = useState('');
+  const open = Boolean(anchorEl);
+  // Reset the query each time the menu closes so it reopens showing everything.
+  const close = (): void => {
+    setAnchorEl(null);
+    setQuery('');
+  };
+  const triggerLabel = buildTriggerLabel(selected, options, allLabel);
+  // Auto-enable search for long lists (e.g. many categories) unless overridden.
+  const showSearch = searchable ?? options.length > 8;
+  const anyExtraChecked = extraOptions?.some((option) => option.checked) ?? false;
+  const clearDisabled = selected.size === 0 && !anyExtraChecked;
+
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, fontSize: '0.875rem' }}>
+      <Typography component="span" sx={{ color: 'text.secondary', fontSize: '0.875rem' }}>
+        {label}:
+      </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 }}
+      >
+        {triggerLabel}
+        <ChevronDownIcon sx={{ fontSize: 14 }} />
+      </Button>
+      <MultiSelectMenu
+        anchorEl={anchorEl}
+        open={open}
+        close={close}
+        options={options}
+        selected={selected}
+        onToggle={onToggle}
+        extraOptions={extraOptions}
+        clearDisabled={clearDisabled}
+        onClear={onClear}
+        showSearch={showSearch}
+        query={query}
+        onQueryChange={setQuery}
+        searchPlaceholder={searchPlaceholder}
+        noResultsLabel={noResultsLabel}
+        testId={testId}
+      />
+    </Box>
+  );
+}
+
+/** Sticky search box at the top of the menu; keydowns don't reach the Menu's typeahead. */
+function MenuSearchField({
+  query,
+  onQueryChange,
+  placeholder,
+  testId,
+}: {
+  query: string;
+  onQueryChange: (value: string) => void;
+  placeholder: string;
+  testId?: string;
+}): React.JSX.Element {
+  return (
+    <Box
+      sx={{ position: 'sticky', top: 0, zIndex: 1, bgcolor: 'background.paper', px: 1, py: 0.75 }}
+      onKeyDown={(event) => event.stopPropagation()}
+    >
+      <TextField
+        autoFocus
+        size="small"
+        fullWidth
+        value={query}
+        onChange={(event) => onQueryChange(event.target.value)}
+        placeholder={placeholder}
+        inputProps={{ 'aria-label': placeholder, 'data-testid': testId ? `${testId}-search` : undefined }}
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <SearchIcon sx={{ fontSize: 16 }} />
+            </InputAdornment>
+          ),
+        }}
+      />
+    </Box>
+  );
+}
+
+interface MultiSelectMenuProps<TValue extends string> {
+  anchorEl: HTMLElement | null;
+  open: boolean;
+  close: () => void;
+  options: MultiSelectOption<TValue>[];
+  selected: ReadonlySet<TValue>;
+  onToggle: (value: TValue, checked: boolean) => void;
+  extraOptions?: MultiSelectExtraOption[];
+  clearDisabled: boolean;
+  onClear: () => void;
+  showSearch: boolean;
+  query: string;
+  onQueryChange: (value: string) => void;
+  searchPlaceholder: string;
+  noResultsLabel: string;
+  testId?: string;
+}
+
+/** The (optional) search box + checkbox list + optional "Options" section + a "Clear" footer. */
+function MultiSelectMenu<TValue extends string>({
+  anchorEl,
+  open,
+  close,
+  options,
+  selected,
+  onToggle,
+  extraOptions,
+  clearDisabled,
+  onClear,
+  showSearch,
+  query,
+  onQueryChange,
+  searchPlaceholder,
+  noResultsLabel,
+  testId,
+}: MultiSelectMenuProps<TValue>): React.JSX.Element {
+  const trimmed = query.trim().toLowerCase();
+  const visibleOptions = useMemo(
+    () => (trimmed ? options.filter((option) => option.label.toLowerCase().includes(trimmed)) : options),
+    [options, trimmed],
+  );
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      open={open}
+      onClose={close}
+      anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
+      transformOrigin={{ vertical: 'top', horizontal: 'right' }}
+      // Keep focus on the search box (don't let the Menu grab the first item),
+      // and stop MUI's typeahead from swallowing keystrokes meant for the input.
+      autoFocus={!showSearch}
+      disableAutoFocusItem
+      slotProps={{ paper: { sx: { minWidth: 180 } }, list: { sx: { pt: showSearch ? 0 : undefined } } }}
+    >
+      {showSearch && (
+        <MenuSearchField query={query} onQueryChange={onQueryChange} placeholder={searchPlaceholder} testId={testId} />
+      )}
+      {visibleOptions.length === 0 && showSearch ? (
+        <MenuItem disabled data-testid={testId ? `${testId}-no-results` : undefined} sx={{ fontSize: '0.8125rem' }}>
+          {noResultsLabel}
+        </MenuItem>
+      ) : (
+        visibleOptions.map((option) => (
+          <CheckboxRow
+            key={option.value}
+            label={option.label}
+            count={option.count}
+            checked={selected.has(option.value)}
+            onToggle={(next) => onToggle(option.value, next)}
+          />
+        ))
+      )}
+      {extraOptions && extraOptions.length > 0
+        ? [
+            <Divider key="extra-divider" />,
+            <ListSubheader key="extra-label" sx={{ px: 1, py: 0.75, fontSize: '0.75rem', fontWeight: 600 }}>
+              Options
+            </ListSubheader>,
+            ...extraOptions.map((extra) => (
+              <CheckboxRow key={extra.id} label={extra.label} checked={extra.checked} onToggle={(next) => extra.onCheckedChange(next)} />
+            )),
+          ]
+        : null}
+      <MenuClearFooter clearDisabled={clearDisabled} onClear={onClear} close={close} testId={testId} />
+    </Menu>
+  );
+}
+
+/** The bottom "Clear" footer that resets the selection and closes the menu. */
+function MenuClearFooter({
+  clearDisabled,
+  onClear,
+  close,
+  testId,
+}: {
+  clearDisabled: boolean;
+  onClear: () => void;
+  close: () => void;
+  testId?: string;
+}): React.JSX.Element {
+  return (
+    <Box sx={{ display: 'flex', justifyContent: 'flex-end', borderTop: 1, borderColor: 'divider', px: 1, py: 0.75 }}>
+      <Button
+        variant="text"
+        size="small"
+        color="inherit"
+        data-testid={testId ? `${testId}-clear` : undefined}
+        disabled={clearDisabled}
+        onClick={() => {
+          onClear();
+          close();
+        }}
+        sx={{ minWidth: 0, px: 1, py: 0.25, fontSize: '0.75rem', fontWeight: 400, textTransform: 'none', color: 'text.secondary' }}
+      >
+        Clear
+      </Button>
+    </Box>
+  );
+}