@controleonline/ui-default 1.0.277 → 1.0.279

package/src/react/components/table/DefaultFiltersModal.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import { Modal, ScrollView, Text, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
 import { useStore } from '@store';
@@ -6,6 +6,7 @@ import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/util
 import DefaultColumnFilter from '../filters/DefaultColumnFilter';
 import { getColumnKey, normalizeText } from '../inputs/defaultInputUtils';
 import styles from './DefaultTable.styles';
+import {getCompactColumnLabel} from './DefaultTableCompact.helpers';
 import { shouldIncludeColumn } from './DefaultTable.utils';
 import {
   persistTableFiltersPreference,
@@ -13,8 +14,9 @@ import {
   sanitizeTableFiltersPreference,
 } from '../../utils/tableVisibleColumnsPreferences';
 import useDefaultTableTheme from './useDefaultTableTheme';
+import DefaultCompactDialog from './DefaultCompactDialog';
 
-const DefaultFiltersModal = ({ storeName, visible = false, onClose }) => {
+const DefaultFiltersModal = ({ storeName, visible = false, deferred = false, onClose }) => {
   const store = useStore(storeName);
   const columns = (Array.isArray(store?.getters?.columns) ? store.getters.columns : []).filter(
     column =>
@@ -24,6 +26,9 @@ const DefaultFiltersModal = ({ storeName, visible = false, onClose }) => {
   );
   const filters = store?.getters?.filters || {};
   const configs = store?.getters?.configs || {};
+  const [draft, setDraft] = useState(filters);
+  useEffect(() => {if (visible) setDraft({...filters});}, [visible]);
+  const activeFilters = deferred ? draft : filters;
   const tablePreferenceScope =
     configs.tablePreferenceScope ||
     resolveDefaultTablePreferenceScope({ storeName });
@@ -35,6 +40,10 @@ const DefaultFiltersModal = ({ storeName, visible = false, onClose }) => {
 
     persistTableFiltersPreference(tablePreferenceScope, persistedFilters);
 
+    if (deferred && typeof configs.onFilterChange === 'function') {
+      configs.onFilterChange(nextFilters);
+      return;
+    }
     if (typeof store?.actions?.setFilters === 'function') {
       store.actions.setFilters(nextFilters);
     } else if (store?.getters) {
@@ -44,7 +53,7 @@ const DefaultFiltersModal = ({ storeName, visible = false, onClose }) => {
     configs.onFilterChange?.(nextFilters);
   };
   const updateFilter = (fieldName, value) => {
-    const nextFilters = { ...(filters || {}) };
+    const nextFilters = { ...(activeFilters || {}) };
     const isEmpty =
       value === null ||
       value === undefined ||
@@ -54,12 +63,13 @@ const DefaultFiltersModal = ({ storeName, visible = false, onClose }) => {
     if (isEmpty) delete nextFilters[fieldName];
     else nextFilters[fieldName] = value;
 
-    applyFilters(nextFilters);
+    if (deferred) setDraft(nextFilters);
+    else applyFilters(nextFilters);
   };
-  const applyLabel = global.t?.t(storeName, 'button', 'apply');
-  const clearLabel = global.t?.t(storeName, 'button', 'clear');
-  const title = global.t?.t(storeName, 'label', 'filters');
-  const { modalColors, resolvedAccentColor } = useDefaultTableTheme();
+  const applyLabel = deferred ? 'Aplicar filtros' : global.t?.t(storeName, 'button', 'apply');
+  const clearLabel = deferred ? 'Limpar' : global.t?.t(storeName, 'button', 'clear');
+  const title = deferred ? 'Filtros' : global.t?.t(storeName, 'label', 'filters');
+  const { modalColors, resolvedAccentColor, themeColors } = useDefaultTableTheme();
   if (!visible) return null;
 
   const {
@@ -71,6 +81,21 @@ const DefaultFiltersModal = ({ storeName, visible = false, onClose }) => {
     textColor,
   } = modalColors;
 
+  if (configs.appearance === 'compact') {
+    const fields = columns.filter(column => column.compactFilter !== false);
+    const action = (label, onPress, primary = false) => <TouchableOpacity accessibilityRole="button" accessibilityLabel={label} onPress={onPress}
+      style={{minHeight: 44, justifyContent: 'center', paddingHorizontal: 18, borderRadius: 9, borderWidth: 1, borderColor, backgroundColor: primary ? themeColors.buttonBackground : themeColors.modalBackground}}>
+      <Text style={{color: primary ? themeColors.buttonText : textColor, fontSize: 14, fontWeight: '600'}}>{label}</Text>
+    </TouchableOpacity>;
+    return <DefaultCompactDialog visible title="Filtros" description="Combine os filtros e aplique para atualizar os resultados." onClose={onClose}
+      bodyHeight={fields.length * 86 + 40} footer={<>{action(clearLabel, () => setDraft({}))}{action(applyLabel, () => {applyFilters(draft); onClose?.();}, true)}</>}>
+      {fields.map(column => <View key={getColumnKey(column)} style={{gap: 8}}>
+        <Text style={{fontSize: 14, fontWeight: '600', color: textColor}}>{getCompactColumnLabel(column, formatStoreColumnLabel({columns, fieldName: getColumnKey(column), fallbackLabel: column.label || getColumnKey(column), storeName}))}</Text>
+        <DefaultColumnFilter column={column} filters={activeFilters} onChange={updateFilter} storeName={storeName} />
+      </View>)}
+    </DefaultCompactDialog>;
+  }
+
   return (
     <Modal visible transparent animationType="fade" onRequestClose={onClose}>
       <View style={[styles.modalOverlay, { backgroundColor: overlayColor }]}>
@@ -80,6 +105,8 @@ const DefaultFiltersModal = ({ storeName, visible = false, onClose }) => {
               {title}
             </Text>
             <TouchableOpacity
+              accessibilityRole="button"
+              accessibilityLabel="Fechar filtros"
               style={[styles.modalCloseButton, { borderColor, backgroundColor }]}
               activeOpacity={0.82}
               onPress={onClose}
@@ -90,12 +117,13 @@ const DefaultFiltersModal = ({ storeName, visible = false, onClose }) => {
           <ScrollView style={styles.filtersModalBody} contentContainerStyle={styles.filtersModalList}>
             {columns.map(column => {
               const fieldName = getColumnKey(column);
-              const label = formatStoreColumnLabel({
+              const defaultLabel = formatStoreColumnLabel({
                 columns,
                 fieldName,
                 fallbackLabel: column?.label || fieldName,
                 storeName,
               });
+              const label = configs.appearance === 'compact' ? getCompactColumnLabel(column, defaultLabel) : defaultLabel;
 
               return (
                 <View key={fieldName} style={styles.filtersModalField}>
@@ -104,7 +132,7 @@ const DefaultFiltersModal = ({ storeName, visible = false, onClose }) => {
                   </Text>
                   <DefaultColumnFilter
                     column={column}
-                    filters={filters}
+                    filters={activeFilters}
                     onChange={updateFilter}
                     storeName={storeName}
                     style={styles.filtersModalInput}
@@ -115,18 +143,22 @@ const DefaultFiltersModal = ({ storeName, visible = false, onClose }) => {
           </ScrollView>
           <View style={[styles.modalActions, { borderTopColor: borderColor }]}>
             <TouchableOpacity
+              accessibilityRole="button"
+              accessibilityLabel={clearLabel}
               style={[styles.secondaryButton, { borderColor }]}
               activeOpacity={0.82}
-              onPress={() => applyFilters({})}
+              onPress={() => deferred ? setDraft({}) : applyFilters({})}
             >
               <Text style={[styles.secondaryButtonText, { color: textColor }]}>
                 {clearLabel}
               </Text>
             </TouchableOpacity>
             <TouchableOpacity
+              accessibilityRole="button"
+              accessibilityLabel={applyLabel}
               style={[styles.primaryButton, { backgroundColor: resolvedAccentColor }]}
               activeOpacity={0.82}
-              onPress={onClose}
+              onPress={() => {if (deferred) applyFilters(draft); onClose?.();}}
             >
               <Text style={styles.primaryButtonText}>
                 {applyLabel}

package/src/react/components/table/DefaultTable.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef } from 'react';
 import { useWindowDimensions } from 'react-native';
 import { NavigationRouteContext, useIsFocused } from '@react-navigation/native';
 import { useStore } from '@store';
@@ -16,6 +16,7 @@ import {
 } from './useDefaultTableSorting';
 import useDefaultTableTheme from './useDefaultTableTheme';
 import DefaultTableView from './DefaultTableView';
+import useDefaultTableCreateForm from './useDefaultTableCreateForm';
 
 import {
   assignGetterValue,
@@ -63,6 +64,8 @@ const DefaultTable = ({
   onSelectionChange = null,
   onSortChange = null,
   pageSize = null,
+  appearance = 'default',
+  paginationMode = 'infinite',
   pinRowActions = true,
   renderCard = null,
   requestParams = {},
@@ -86,7 +89,6 @@ const DefaultTable = ({
   toolbarActions = [],
   visibleColumnsPreferenceKey = '',
 }) => {
-  const [isCreateFormOpen, setIsCreateFormOpen] = useState(false);
   const { width } = useWindowDimensions();
   const route = React.useContext(NavigationRouteContext);
   const store = useStore(storeName);
@@ -94,7 +96,7 @@ const DefaultTable = ({
   const isFocused = useIsFocused();
   const storeDeclaredConfigsRef = useRef(null);
   const { showError } = useMessage() || {};
-  const { tableBorderColors, themeColors } = useDefaultTableTheme(accentColor);
+  const { tableBorderColors, themeColors } = useDefaultTableTheme(accentColor, appearance);
   const tablePanelBorderColor = tableBorderColors.containerBorderColor;
   const floatingAddBackgroundColor =
     themeColors.buttonBackground || themeColors.primary || accentColor;
@@ -165,6 +167,9 @@ const DefaultTable = ({
   const {
     buildRequestQuery,
     currentPage,
+    pageSizeNumber,
+    goToPage,
+    resolvedIsLoading,
     handleEndReached,
     handleRefresh,
     resolvedData,
@@ -180,6 +185,7 @@ const DefaultTable = ({
     onEndReached,
     onRefresh,
     pageSize,
+    paginationMode,
     requestParams: requestParamsSeed,
     resolvedActions,
     resolvedSort,
@@ -194,23 +200,10 @@ const DefaultTable = ({
     storeName,
     tableColumns: columnsForTable,
   });
-  const closeCreateForm = useCallback(() => setIsCreateFormOpen(false), []);
-  const canUseDefaultCreateForm = typeof resolvedActions?.save === 'function';
-  const handleAdd = useCallback(() => {
-    if (typeof onAdd === 'function') {
-      return onAdd();
-    }
-    if (!canUseDefaultCreateForm) {
-      return null;
-    }
-    setIsCreateFormOpen(true);
-    return null;
-  }, [canUseDefaultCreateForm, onAdd]);
-  const resolvedOnAdd = typeof onAdd === 'function' || canUseDefaultCreateForm
-    ? handleAdd
-    : null;
+  const {isCreateFormOpen, closeCreateForm, resolvedOnAdd, handleDefaultCreateSaved} =
+    useDefaultTableCreateForm({onAdd, onSaved, resolvedActions, handleRefresh});
   const hasAddAction =
-    (addConfig === true || add === true) &&
+    add !== false && (addConfig === true || add === true) &&
     typeof resolvedOnAdd === 'function';
   const shouldRenderFloatingAddButton =
     hasAddAction &&
@@ -219,14 +212,6 @@ const DefaultTable = ({
     hasAddAction &&
     showToolbar !== false &&
     normalizedAddButtonPlacement === 'bottom';
-  const handleDefaultCreateSaved = useCallback(
-    savedItem => {
-      closeCreateForm();
-      onSaved?.(savedItem, null);
-      handleRefresh?.();
-    },
-    [closeCreateForm, handleRefresh, onSaved],
-  );
   const debugFallbackParameters = useMemo(() => {
     if (autoMode) {
       return buildRequestQuery(currentPage || 1, false);
@@ -237,7 +222,11 @@ const DefaultTable = ({
       sort: resolvedSort || null,
     };
   }, [autoMode, buildRequestQuery, currentPage, requestParamsSeed, resolvedSort, storeFilters]);
+  const previousCompactRef = useRef(isCompactView);
+  const enteringCompact = isCompactView && !previousCompactRef.current;
+  useEffect(() => {previousCompactRef.current = isCompactView;}, [isCompactView]);
   const effectiveViewMode =
+    enteringCompact && forceCardsOnCompact !== false ? 'cards' :
     currentConfigs.viewMode ||
     storedViewMode ||
     (isCompactView && forceCardsOnCompact !== false ? 'cards' : initialViewMode);
@@ -245,6 +234,12 @@ const DefaultTable = ({
   const defaultTableConfigs = useMemo(
     () => ({
       ...storeDeclaredConfigs,
+      appearance,
+      paginationMode,
+      currentPage,
+      pageSizeNumber,
+      onPageChange: goToPage,
+      paginationLoading: resolvedIsLoading,
       add,
       addButtonPlacement: normalizedAddButtonPlacement,
       addLabel: resolvedAddLabel,
@@ -311,6 +306,7 @@ const DefaultTable = ({
       viewMode: effectiveViewMode,
     }),
     [
+      appearance, paginationMode, currentPage, pageSizeNumber, goToPage, resolvedIsLoading,
       add,
       normalizedAddButtonPlacement,
       resolvedAddLabel,
@@ -373,6 +369,7 @@ const DefaultTable = ({
   const defaultTableConfigsSignature = useMemo(
     () =>
       stableSerialize({
+        appearance, paginationMode, currentPage, pageSizeNumber, resolvedIsLoading,
         configuredImport: storeDeclaredConfigs.import || null,
         add,
         addButtonPlacement: normalizedAddButtonPlacement,
@@ -408,6 +405,7 @@ const DefaultTable = ({
         toolbarActionsLength: Array.isArray(toolbarActions) ? toolbarActions.length : 0,
       }),
     [
+      appearance, paginationMode, currentPage, pageSizeNumber, goToPage, resolvedIsLoading,
       add,
       normalizedAddButtonPlacement,
       resolvedAddLabel,
@@ -452,6 +450,8 @@ const DefaultTable = ({
   // opening Adicionar on DefaultTable (categories). Sync only in the hook
   // when defaultTableConfigsSignature changes.
   useDefaultTableStoreSync({
+    filters,
+    onFilterChange,
     columns,
     columnsForTable,
     data,

package/src/react/components/table/DefaultTableCards.js

@@ -1,5 +1,5 @@
-import React from 'react';
-import { FlatList, Text, View } from 'react-native';
+import React, {useState} from 'react';
+import { FlatList, Text, View, useWindowDimensions } from 'react-native';
 import { useStore } from '@store';
 import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
 import { getColumnKey, resolveCellText } from '../inputs/defaultInputUtils';
@@ -16,12 +16,25 @@ import {
   shouldIncludeColumn,
 } from './DefaultTable.utils';
 import styles from './DefaultTable.styles';
+import compactStyles from './DefaultTableCompact.styles';
+import useDefaultTableRowInteraction from './useDefaultTableRowInteraction';
 import useDefaultTableTheme from './useDefaultTableTheme';
 
 // Vertical cards must keep their intrinsic height; zero basis is only for grid rows.
 const intrinsicHeight = {flexBasis: 'auto', flexGrow: 0, flexShrink: 0};
 
+/** Responsive card grid (OrderHistory / compact lists). Explicit cardListProps.numColumns wins. */
+export const resolveResponsiveCardColumns = width => {
+  const w = Number(width) || 0;
+  if (w >= 1280) return 3;
+  if (w >= 800) return 2;
+  return 1;
+};
+
+
 const DefaultTableCards = ({ storeName }) => {
+  const [listWidth, setListWidth] = useState(0);
+  const {canOpenRow, setRowInteraction} = useDefaultTableRowInteraction();
   const store = useStore(storeName);
   const configs = store?.getters?.configs || {};
   const { palette } = useDefaultTableTheme();
@@ -38,10 +51,21 @@ const DefaultTableCards = ({ storeName }) => {
     configs.cardListProps && typeof configs.cardListProps === 'object'
       ? configs.cardListProps
       : {};
+  const compact = configs.appearance === 'compact';
+  const {width: windowWidth} = useWindowDimensions();
+  const explicitNumColumns = Number(cardListProps.numColumns);
+  const hasExplicitNumColumns = Number.isFinite(explicitNumColumns) && explicitNumColumns > 0;
+  // Default responsive grid for all card tables (same breakpoints as OrderHistory).
+  // Callers may still force a fixed column count via cardListProps.numColumns.
+  const gridColumns = hasExplicitNumColumns
+    ? explicitNumColumns
+    : resolveResponsiveCardColumns(windowWidth);
+  const compactCardWidth = listWidth ? Math.max(0, (listWidth - 24 - 12 * (gridColumns - 1)) / gridColumns) : undefined;
   const {
     contentContainerStyle,
     key: cardListKey,
     listKey,
+    numColumns: _ignoredNumColumns,
     ...flatListProps
   } = cardListProps;
   const isLoading = Boolean(store?.getters?.isLoadingList || store?.getters?.isLoading);
@@ -67,7 +91,7 @@ const DefaultTableCards = ({ storeName }) => {
     const renderField = (fieldName, options = {}) => (
       <DefaultTableInput
         fieldName={fieldName}
-        options={options}
+        options={{...options, onInteractionChange: blocked => {options.onInteractionChange?.(blocked); setRowInteraction(row, {key: fieldName}, blocked);}}}
         row={row}
         storeName={storeName}
         variant="card"
@@ -89,10 +113,10 @@ const DefaultTableCards = ({ storeName }) => {
         component={RowActionsComponent}
         helpers={{
           openEdit: () => configs.onEditRow?.(row),
-          openRow: hasRowPress ? () => configs.onRowPress(row) : null,
+          openRow: hasRowPress ? () => {if (canOpenRow(row)) configs.onRowPress(row);} : null,
         }}
         openEdit={() => configs.onEditRow?.(row)}
-        openRow={hasRowPress ? () => configs.onRowPress(row) : null}
+        openRow={hasRowPress ? () => {if (canOpenRow(row)) configs.onRowPress(row);} : null}
         row={row}
         storeName={storeName}
       />
@@ -109,23 +133,24 @@ const DefaultTableCards = ({ storeName }) => {
           key={row?.['@id'] || row?.id}
           style={[
             styles.cardItem,
-            (flatListProps.numColumns || 1) === 1 ? intrinsicHeight : null,
+            gridColumns === 1 ? intrinsicHeight : null,
             hasRowActions ? styles.cardItemWithActions : null,
             rowStyleValue,
+            compact ? [compactStyles.cardItem, {flex: 0, flexGrow: 0, flexShrink: 0, flexBasis: 'auto', width: compactCardWidth, maxWidth: compactCardWidth, backgroundColor: palette.cardBackground || palette.panelBackground, borderColor: palette.cardBorder || palette.inputBorder}] : null,
           ]}
         >
-          <View style={[styles.cardContent, hasRowActions ? null : intrinsicHeight]}>
+          <View style={[styles.cardContent, hasRowActions ? null : intrinsicHeight, compact ? {flex: 0, flexBasis: 'auto', flexGrow: 0} : null]}>
             {configs.renderCard({
               item: row,
               openEdit: () => configs.onEditRow?.(row),
-              openRow: hasRowPress ? () => configs.onRowPress(row) : null,
+              openRow: hasRowPress ? () => {if (canOpenRow(row)) configs.onRowPress(row);} : null,
               renderField,
               renderValue,
               row,
             })}
           </View>
           {hasRowActions ? (
-            <View style={styles.cardActions}>
+            <View style={compact ? [compactStyles.cardActions, {backgroundColor: palette.tableFooterBackground, borderTopColor: palette.border}] : styles.cardActions}>
               {customRowActions}
               {editButton}
             </View>
@@ -173,10 +198,18 @@ const DefaultTableCards = ({ storeName }) => {
     );
   };
 
+  // RN FlatList throws if numColumns changes without remount. Always derive key from numColumns
+  // and apply it AFTER the spread so callers cannot override it with a stale key.
+  const resolvedNumColumns = gridColumns;
+  const resolvedListKey = listKey || cardListKey || `cards-${resolvedNumColumns}`;
+
   return (
     <FlatList
-      key={listKey || cardListKey || `cards-${flatListProps.numColumns || 1}`}
       {...flatListProps}
+      key={resolvedListKey}
+      numColumns={resolvedNumColumns}
+      onLayout={event => {flatListProps.onLayout?.(event); setListWidth(event.nativeEvent.layout.width);}}
+      columnWrapperStyle={compact && gridColumns > 1 ? {gap: 12} : flatListProps.columnWrapperStyle}
       data={sortedData}
       keyExtractor={getRowKey}
       renderItem={({ item, index }) => renderCardItem(item, index)}
@@ -184,6 +217,7 @@ const DefaultTableCards = ({ storeName }) => {
       contentContainerStyle={[
         styles.cardsGrid,
         contentContainerStyle,
+        compact ? {padding: 12, gap: 12} : null,
         hasBottomAddButton ? styles.cardsGridWithBottomAdd : null,
       ]}
       ListEmptyComponent={(

package/src/react/components/table/DefaultTableCompact.helpers.js

@@ -0,0 +1,26 @@
+export const isActiveTableFilter = value => {
+  if (value === null || value === undefined || value === '') return false;
+  if (Array.isArray(value)) return value.length > 0;
+  if (typeof value === 'object') {
+    if (value.shortcut) return value.shortcut !== 'all';
+    if ('value' in value) return isActiveTableFilter(value.value);
+    return Object.values(value).some(isActiveTableFilter);
+  }
+  return true;
+};
+
+export const getCompactFilterLabel = value => {
+  if (Array.isArray(value)) return value.map(getCompactFilterLabel).join(', ');
+  if (value && typeof value === 'object') {
+    if (value.shortcut) return ({today: 'Hoje', yesterday: 'Ontem', all: 'Todos', custom: 'Personalizado'})[value.shortcut] || value.shortcut;
+    return String(value.label || value.value || 'Selecionado');
+  }
+  return String(value ?? '');
+};
+
+export const getVisiblePageNumbers = (page, totalPages) => {
+  const start = Math.max(1, Math.min(page - 1, totalPages - 2));
+  return Array.from({length: Math.min(3, totalPages)}, (_, index) => start + index);
+};
+
+export const getCompactColumnLabel = (column, fallback) => column?.compactLabel || fallback;

package/src/react/components/table/DefaultTableCompact.styles.js

@@ -0,0 +1,28 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  toolbar: {padding: 12, gap: 8, borderBottomWidth: 1, flexShrink: 0},
+  row: {flexDirection: 'row', alignItems: 'center', flexWrap: 'wrap', gap: 8},
+  search: {flex: 1, maxWidth: 620, minWidth: 210, flexDirection: 'row', alignItems: 'center', gap: 8, borderWidth: 1, borderRadius: 8, paddingHorizontal: 10},
+  searchMobile: {flexBasis: '100%', maxWidth: '100%', minWidth: 0},
+  input: {flex: 1, minWidth: 0, height: 42, fontSize: 14},
+  inputMobile: {fontSize: 16},
+  button: {minHeight: 44, minWidth: 44, paddingHorizontal: 10, borderWidth: 1, borderRadius: 8, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6},
+  label: {fontSize: 12, fontWeight: '600'},
+  small: {fontSize: 12},
+  chips: {flexDirection: 'row', flexWrap: 'wrap', gap: 6, alignItems: 'center'},
+  chip: {minHeight: 30, maxWidth: '100%', borderWidth: 1, borderRadius: 18, paddingHorizontal: 9, flexDirection: 'row', alignItems: 'center', gap: 6},
+  secondary: {flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', flexWrap: 'wrap', gap: 8},
+  mode: {flexDirection: 'row', gap: 3},
+  backdrop: {flex: 1, alignItems: 'center', justifyContent: 'center', padding: 16},
+  sheet: {width: '100%', maxWidth: 480, maxHeight: '85%', borderWidth: 1, borderRadius: 14, padding: 16, gap: 12},
+  sheetHeader: {flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 10},
+  sheetTitle: {fontSize: 17, fontWeight: '600'},
+  option: {minHeight: 44, paddingVertical: 10, flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', gap: 8},
+  footer: {padding: 10, flexShrink: 0, borderTopWidth: 1, flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', justifyContent: 'space-between', gap: 8},
+  pager: {flexDirection: 'row', flexWrap: 'wrap', gap: 4, alignItems: 'center'},
+  page: {minWidth: 44, minHeight: 44, borderWidth: 1, borderRadius: 7, justifyContent: 'center', alignItems: 'center'},
+  disabled: {opacity: 0.45},
+  cardItem: {flexDirection: 'column', alignItems: 'stretch', borderWidth: 1, borderRadius: 12, overflow: 'hidden', margin: 0},
+  cardActions: {alignSelf: 'stretch', flexDirection: 'row', justifyContent: 'flex-end', borderTopWidth: 1, paddingHorizontal: 12, paddingVertical: 8},
+});

package/src/react/components/table/DefaultTableCompactToolbar.js

@@ -0,0 +1,112 @@
+import React, {useEffect, useState} from 'react';
+import {Text, TextInput, TouchableOpacity, View, useWindowDimensions} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import {useStore} from '@store';
+import {formatStoreColumnLabel} from '@controleonline/ui-common/src/react/utils/storeColumns';
+import {getColumnKey} from '../inputs/defaultInputUtils';
+import {getSortField, isSortableColumn} from './DefaultTable.utils';
+import {persistTableFiltersPreference, persistTableViewModePreference} from '../../utils/tableVisibleColumnsPreferences';
+import DefaultCompactDialog from './DefaultCompactDialog';
+import DefaultFiltersModal from './DefaultFiltersModal';
+import DefaultColumnMenu from './DefaultColumnMenu';
+import DefaultDebug from './DefaultDebug';
+import DefaultToolbarAction from './DefaultToolbarAction';
+import useDefaultTableTheme from './useDefaultTableTheme';
+import {getCompactColumnLabel, getCompactFilterLabel, isActiveTableFilter} from './DefaultTableCompact.helpers';
+import s from './DefaultTableCompact.styles';
+
+export default function DefaultTableCompactToolbar({storeName, actions = [], showControls = true}) {
+  const store = useStore(storeName);
+  const configs = store?.getters?.configs || {};
+  const filters = store?.getters?.filters || {};
+  const columns = store?.getters?.columns || [];
+  const {themeColors: c} = useDefaultTableTheme();
+  const {width} = useWindowDimensions();
+  const mobile = width <= (configs.compactBreakpoint || 768);
+  const [modal, setModal] = useState('');
+  const searchKey = configs.searchKey || 'search';
+  const [draft, setDraft] = useState(String(filters[searchKey] || ''));
+  useEffect(() => setDraft(String(filters[searchKey] || '')), [filters[searchKey]]);
+  const entries = Object.entries(filters).filter(([, value]) => isActiveTableFilter(value));
+  const text = c.textPrimary || c.text;
+  const muted = c.textSecondary || text;
+  const panel = c.panelBackground || c.cardBackground || c.appBackground;
+  const border = c.inputBorder || c.cardBorder || c.border;
+  const apply = next => {
+    persistTableFiltersPreference(configs.tablePreferenceScope, next);
+    if (configs.onFilterChange) configs.onFilterChange(next);
+    else store.actions?.setFilters?.(next);
+  };
+  const remove = key => {const next = {...filters}; delete next[key]; apply(next);};
+  const submit = () => {const next = {...filters}; if (draft.trim()) next[searchKey] = draft.trim(); else delete next[searchKey]; apply(next);};
+  const button = (label, icon, onPress, selected = false, primary = false) => (
+    <TouchableOpacity accessibilityRole="button" accessibilityLabel={label} accessibilityState={{selected}} onPress={onPress}
+      style={[s.button, {backgroundColor: primary ? c.buttonBackground : selected ? c.chipSelectedBackground || panel : panel, borderColor: border}, !mobile && icon === 'sliders' ? {marginLeft: 'auto'} : null]}>
+      <Icon name={icon} size={16} color={primary ? c.buttonIcon || c.buttonText : text} />
+      {label && (!mobile || width >= 360 && (label === 'Filtros' || primary)) ? <Text style={[s.label, {color: primary ? c.buttonText : text}]}>{primary && mobile ? 'Novo' : label}</Text> : null}
+    </TouchableOpacity>
+  );
+  const mode = configs.effectiveViewMode || 'table';
+  const setMode = value => {
+    persistTableViewModePreference(configs.tablePreferenceScope, value);
+    store.actions?.setConfigs?.({...configs, effectiveViewMode: value, viewMode: value});
+  };
+  const canAdd = configs.add !== false && (configs.add === true || store.getters?.add === true) && configs.onAdd;
+  const buttonLabel = configs.addLabel || 'Novo pedido';
+  const columnButton = () => button('Colunas', 'columns', () => setModal('columns'));
+  const addButton = () => button(buttonLabel, 'plus', configs.onAdd, false, true);
+  const sortColumn = columns.find(column => getSortField(column) === configs.resolvedSort?.field);
+  const labelFor = column => getCompactColumnLabel(column, formatStoreColumnLabel({columns, fieldName: getColumnKey(column), fallbackLabel: column?.label || getColumnKey(column), storeName}));
+  return (
+    <View style={[s.toolbar, {backgroundColor: c.toolbarBackground || panel, borderBottomColor: border}]}>
+      <View style={[s.row, {gap: mobile ? 6 : 8}]}>
+        {configs.showSearch !== false ? <View style={[s.search, mobile && s.searchMobile, {borderColor: border, backgroundColor: c.inputBackground || panel}]}>
+          <Icon name="search" size={16} color={c.inputIcon || muted} />
+          <TextInput accessibilityLabel={configs.searchPlaceholder || 'Buscar'} placeholder={configs.searchPlaceholder || 'Buscar'} placeholderTextColor={c.inputPlaceholderText || muted}
+            value={draft} onChangeText={setDraft} onSubmitEditing={submit} returnKeyType="search" style={[s.input, mobile && s.inputMobile, {color: c.inputText || text}]} />
+          <TouchableOpacity accessibilityRole="button" accessibilityLabel="Pesquisar" onPress={submit} style={{padding: 8}}><Icon name="arrow-right" size={16} color={text} /></TouchableOpacity>
+        </View> : null}
+        {showControls ? <>
+          {button('Filtros', 'sliders', () => setModal('filters'))}
+          <View style={s.mode}>{button('Tabela', 'list', () => setMode('table'), mode === 'table')}{button('Cards', 'grid', () => setMode('cards'), mode === 'cards')}</View>
+          {!mobile ? columnButton() : null}
+          {button('Mais opções', 'more-horizontal', () => setModal('more'))}
+          {canAdd ? addButton() : null}
+        </> : null}
+      </View>
+      {entries.length ? <View style={s.chips}>{entries.map(([key, value]) => {
+        const column = columns.find(item => getColumnKey(item) === key);
+        const options = column ? configs.getOptionsForColumn?.(column) || column.options || [] : [];
+        const valueLabel = Array.isArray(options) ? (Array.isArray(value) ? value : [value]).map(item => options.find(option => String(option.value ?? option.key) === String(item))?.label || getCompactFilterLabel(item)).join(', ') : getCompactFilterLabel(value);
+        const label = `${column ? labelFor(column) + ': ' : key === searchKey ? 'Busca: ' : key + ': '}${valueLabel}`;
+        return <TouchableOpacity key={key} accessibilityRole="button" accessibilityLabel={`Remover filtro ${label}`} onPress={() => remove(key)} style={[s.chip, {borderColor: border, backgroundColor: c.chipBackground || panel}]}>
+          <Text numberOfLines={1} style={[s.small, {color: c.chipText || text, flexShrink: 1}]}>{label}</Text><Icon name="x" size={12} color={text} />
+        </TouchableOpacity>;
+      })}<TouchableOpacity accessibilityRole="button" onPress={() => apply({})}><Text style={[s.small, {color: muted}]}>Limpar filtros</Text></TouchableOpacity></View> : null}
+      <View style={s.secondary}>
+        <Text style={[s.small, {color: muted}]}>{configs.showTotalItemsInFooter !== false ? `${store.getters?.totalItems ?? 0} ${Number(store.getters?.totalItems) === 1 ? 'resultado' : 'resultados'}` : 'Pedidos'}</Text>
+        {showControls ? <TouchableOpacity accessibilityRole="button" accessibilityLabel="Escolher ordenação" onPress={() => setModal('sort')} style={s.row}>
+          <Icon name="arrow-down" size={14} color={muted} /><Text style={[s.small, {color: text}]}>{sortColumn ? labelFor(sortColumn) : 'Ordenar'} · {configs.resolvedSort?.direction === 'asc' ? '↑' : '↓'}</Text>
+        </TouchableOpacity> : null}
+      </View>
+      <DefaultFiltersModal storeName={storeName} visible={modal === 'filters'} deferred onClose={() => setModal('')} />
+      <DefaultColumnMenu storeName={storeName} visible={modal === 'columns'} onClose={() => setModal('')} />
+      <DefaultCompactDialog visible={modal === 'more' || modal === 'sort'} title={modal === 'sort' ? 'Ordenação' : 'Mais opções'}
+        description={modal === 'sort' ? 'Escolha a coluna. Toque novamente para inverter a ordem.' : undefined}
+        onClose={() => setModal('')} bodyHeight={modal === 'sort' ? columns.filter(isSortableColumn).length * 54 + 32 : 180}>
+        {modal === 'sort' ? columns.filter(isSortableColumn).map(column => <TouchableOpacity key={getColumnKey(column)} accessibilityRole="button"
+          accessibilityLabel={`Ordenar por ${labelFor(column)}`} style={[s.option, {borderBottomWidth: 1, borderBottomColor: c.tableRowBorder}]}
+          onPress={() => {configs.requestSort?.(column); setModal('');}}>
+          <Text style={{color: text, fontSize: 14}}>{labelFor(column)}</Text><Text style={{color: muted}}>{getSortField(column) === configs.resolvedSort?.field ? configs.resolvedSort.direction === 'asc' ? '↑' : '↓' : '↕'}</Text>
+        </TouchableOpacity>) : <View style={{gap: 8}}>{mobile ? <DefaultToolbarAction action={{label: 'Colunas visíveis', icon: 'columns', onPress: () => setModal('columns'), color: text,
+          style: {width: '100%', minHeight: 48, justifyContent: 'flex-start', paddingHorizontal: 12, borderWidth: 0, backgroundColor: c.inputBackground}, labelStyle: {fontSize: 14}}} /> : null}
+          {actions.filter(action => !action.hidden).map(action => <DefaultToolbarAction key={action.key || action.icon}
+            action={{...action, label: action.label || action.accessibilityLabel, color: text,
+              style: {width: '100%', minHeight: 48, justifyContent: 'flex-start', paddingHorizontal: 12, borderWidth: 0, backgroundColor: c.inputBackground}, labelStyle: {fontSize: 14, fontWeight: '400'},
+              onPress: () => {setModal(''); action.onPress?.();}}} />)}
+          <DefaultDebug storeName={storeName} />
+        </View>}
+      </DefaultCompactDialog>
+    </View>
+  );
+}