@controleonline/ui-default 1.0.277 → 1.0.279

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

@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { View } from 'react-native';
 import { useStore } from '@store';
 import DefaultInput from '../inputs/DefaultInput';
+import Formatter from '@controleonline/ui-common/src/utils/formatter';
 import {
   formatSaveValue,
   getColumnKey,
   isEditableColumn,
   normalizeId,
+  resolveCellPresentation,
 } from '../inputs/defaultInputUtils';
 import { getColumnStyle } from './DefaultTable.utils';
 import styles from './DefaultTable.styles';
@@ -58,34 +60,50 @@ const DefaultTableInput = ({
   const configs = store?.getters?.configs || {};
   const [isEditing, setIsEditing] = useState(false);
   const [isSaving, setIsSaving] = useState(false);
+  useEffect(() => {
+    options.onInteractionChange?.(isEditing || isSaving);
+    return () => options.onInteractionChange?.(false);
+  }, [isEditing, isSaving, options.onInteractionChange]);
   const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
   const hasRowPress = false;
-  const { resolvedAccentColor } = useDefaultTableTheme();
+  const { resolvedAccentColor, themeColors } = useDefaultTableTheme();
   const column = columnProp || columns.find(item => getColumnKey(item) === fieldName);
 
   if (!column) return null;
 
   const resolvedFieldName = getColumnKey(column);
+  const compact = configs.appearance === 'compact';
+  const presentation = resolveCellPresentation({column, columns, row, storeName});
+  const statusColor = compact && resolvedFieldName === 'status' && typeof column.compactStatusColor === 'function'
+    ? column.compactStatusColor(row, themeColors) : presentation.color || themeColors.textSecondary;
+  const compactType = storeName === 'orders' && resolvedFieldName === 'orderType' ? ({sale: 'Venda', purchase: 'Compra', transfer: 'Transferência', loss: 'Perda', cart: 'Carrinho', tab: 'Comanda', table: 'Mesa', stamp: 'Carimbo'})[row.orderType] : undefined;
+  const dateField = compact && storeName === 'orders' && ['orderDate', 'alterDate'].includes(resolvedFieldName);
+  const rawValue = row[resolvedFieldName];
+  const time = typeof rawValue === 'string' ? /[T ](\d{2}:\d{2})/.exec(rawValue)?.[1] : '';
+  const compactDisplay = compact && storeName === 'orders' ? (resolvedFieldName === 'price' ? Formatter.formatMoney(rawValue || 0) : dateField && rawValue ? `${Formatter.formatDateYmdTodmY(rawValue, false)}${time && (time !== '00:00' || resolvedFieldName === 'alterDate') ? '\n' + time : ''}` : compactType) : undefined;
+  const compactTextStyle = compact ? {fontSize: 13, fontWeight: column.isIdentity ? '600' : '400', ...(resolvedFieldName === 'status' ? {color: statusColor} : {color: themeColors.textPrimary})} : null;
+  const statusStyle = compact && resolvedFieldName === 'status' ? {width: 'auto', alignSelf: 'flex-start', borderWidth: 1, borderColor: statusColor, borderRadius: 18, paddingHorizontal: 8, paddingVertical: 3, backgroundColor: /^#[0-9a-f]{6}$/i.test(statusColor) ? statusColor + '10' : themeColors.panelBackground} : null;
   const input = (
     <DefaultInput
       accentColor={options.accentColor || resolvedAccentColor}
       column={column}
       columns={columns}
-      containerStyle={options.containerStyle}
+      containerStyle={[options.containerStyle, statusStyle, compact && column.isIdentity ? {alignSelf: 'flex-start', width: 'auto', borderWidth: 1, borderRadius: 8, borderColor: themeColors.border, backgroundColor: themeColors.inputBackground, paddingHorizontal: 9, paddingVertical: 5} : null]}
       defaultColor={options.defaultColor || configs.defaultColor}
-      displayValue={options.displayValue}
+      displayValue={options.displayValue ?? compactDisplay}
       editing={isEditing}
       getOptionsForColumn={configs.getOptionsForColumn}
       inputStyle={options.inputStyle}
       label={options.label}
-      numberOfLines={options.numberOfLines}
-      onCancelEditing={() => setIsEditing(false)}
+      numberOfLines={options.numberOfLines ?? (dateField ? 2 : undefined)}
+      onCancelEditing={() => {options.onInteractionChange?.(isSaving); setIsEditing(false);}}
       onSave={value => {
         if (typeof store?.actions?.save !== 'function') {
           setIsEditing(false);
           return Promise.resolve(null);
         }
 
+        options.onInteractionChange?.(true);
         setIsSaving(true);
         const savedItemPatch = buildSavedItemPatch(column, resolvedFieldName, value);
         const storeMeta =
@@ -109,12 +127,13 @@ const DefaultTableInput = ({
             return savedItem;
           })
           .finally(() => {
-          setIsSaving(false);
-          setIsEditing(false);
-        });
+            options.onInteractionChange?.(false);
+            setIsSaving(false);
+            setIsEditing(false);
+          });
       }}
-      onStartEditing={() => setIsEditing(true)}
-      readTextStyle={options.readTextStyle || options.textStyle}
+      onStartEditing={() => {options.onInteractionChange?.(true); setIsEditing(true);}}
+      readTextStyle={[compactTextStyle, options.readTextStyle || options.textStyle]}
       row={row}
       saving={isSaving}
       showLabel={options.showLabel}

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import {Text, TouchableOpacity, View, useWindowDimensions} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import {useStore} from '@store';
+import useDefaultTableTheme from './useDefaultTableTheme';
+import {getVisiblePageNumbers} from './DefaultTableCompact.helpers';
+import s from './DefaultTableCompact.styles';
+
+export default function DefaultTablePaginationBar({storeName}) {
+  const mobile = useWindowDimensions().width <= 768;
+  const store = useStore(storeName);
+  const configs = store?.getters?.configs || {};
+  const {themeColors: c} = useDefaultTableTheme();
+  if (configs.paginationMode !== 'pages') return null;
+  const page = configs.currentPage || 1;
+  const size = configs.pageSizeNumber || 20;
+  const total = Number(store.getters.totalItems || 0);
+  const pages = Math.max(1, Math.ceil(total / size));
+  const busy = Boolean(configs.paginationLoading);
+  const text = c.tableFooterText || c.textPrimary;
+  const background = c.tableFooterBackground || c.panelBackground;
+  const border = c.tableFooterBorder || c.inputBorder;
+  const button = (value, icon, label, disabled = false) => <TouchableOpacity key={label} accessibilityRole="button" accessibilityLabel={label}
+    accessibilityState={{disabled: disabled || busy, selected: !icon && page === value}} disabled={disabled || busy}
+    onPress={() => configs.onPageChange?.(value)} style={[s.page, {backgroundColor: !icon && page === value ? c.chipSelectedBackground || c.badgeBackground : background, borderColor: border}, (disabled || busy) && s.disabled]}>
+    {icon ? <Icon name={icon} size={16} color={text} /> : <Text style={[s.small, {color: text}]}>{value}</Text>}
+  </TouchableOpacity>;
+  return <View testID="default-table-pagination" style={[s.footer, {backgroundColor: background, borderTopColor: border}]}>
+    <Text accessibilityLiveRegion="polite" style={[s.small, {color: text}]}>{configs.showTotalItemsInFooter === false ? `Página ${page}` : `${total ? (page - 1) * size + 1 : 0}–${Math.min(page * size, total)} de ${total}`}</Text>
+    <View style={s.pager}>
+      {!mobile ? button(1, 'chevrons-left', 'Primeira página', page === 1) : null}
+      {button(page - 1, 'chevron-left', 'Página anterior', page === 1)}
+      {getVisiblePageNumbers(page, pages).map(value => button(value, null, `Página ${value}`))}
+      {button(page + 1, 'chevron-right', 'Próxima página', page >= pages)}
+      {!mobile ? button(pages, 'chevrons-right', 'Última página', page >= pages) : null}
+    </View>
+  </View>;
+}

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

@@ -23,6 +23,8 @@ import {
   shouldIncludeColumn,
 } from './DefaultTable.utils';
 import styles from './DefaultTable.styles';
+import {getCompactColumnLabel} from './DefaultTableCompact.helpers';
+import useDefaultTableRowInteraction from './useDefaultTableRowInteraction';
 import useDefaultTableTheme from './useDefaultTableTheme';
 
 /** Row stripes: themes-map listItemEvenRow / listItemOddRow — never status.color. */
@@ -31,6 +33,7 @@ export const resolveRowBackgroundColor = ({ index, tableOddColor, tableEvenColor
 };
 
 const DefaultTableRows = ({ storeName }) => {
+  const {canOpenRow, setRowInteraction} = useDefaultTableRowInteraction();
   const store = useStore(storeName);
   const configs = store?.getters?.configs || {};
   const { palette, resolvedAccentColor, tableBorderColors, themeTokens } = useDefaultTableTheme();
@@ -140,7 +143,7 @@ const DefaultTableRows = ({ storeName }) => {
     const rowPressProps = hasRowPress
       ? {
         activeOpacity: 0.84,
-        onPress: () => configs.onRowPress(row),
+        onPress: () => {if (canOpenRow(row)) configs.onRowPress(row);},
       }
       : {};
     const rowBackgroundColor = resolveRowBackgroundColor({
@@ -163,6 +166,7 @@ const DefaultTableRows = ({ storeName }) => {
             width: tableWidth,
           },
           rowStyleValue,
+          configs.appearance === 'compact' ? {minHeight: 58} : null,
         ]}
         {...rowPressProps}
       >
@@ -170,7 +174,7 @@ const DefaultTableRows = ({ storeName }) => {
           <React.Fragment key={getColumnKey(column)}>
             <DefaultTableInput
               column={column}
-              options={column?.isIdentity ? {
+              options={{...(column?.isIdentity ? {
                 cellStyle: [
                   styles.pinnedIdentityCell,
                   styles.stickyIdentityCell,
@@ -182,7 +186,7 @@ const DefaultTableRows = ({ storeName }) => {
                 cellStyle: {
                   backgroundColor: rowBackgroundColor,
                 },
-              }}
+              }), onInteractionChange: blocked => setRowInteraction(row, column, blocked)}}
               row={row}
               storeName={storeName}
               variant="cell"
@@ -215,10 +219,10 @@ const DefaultTableRows = ({ 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}
                 />
@@ -265,17 +269,21 @@ const DefaultTableRows = ({ storeName }) => {
           >
             {tableColumns.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;
               const sortFieldName = getSortField(column);
 
               return (
                 <TouchableOpacity
                   key={fieldName}
+                  accessibilityRole={isSortableColumn(column) ? 'button' : undefined}
+                  accessibilityLabel={`Ordenar por ${label}`}
+                  accessibilityHint={configs.resolvedSort?.field === sortFieldName ? `Ordem ${configs.resolvedSort.direction === 'asc' ? 'crescente' : 'decrescente'}` : undefined}
                   style={[
                     getColumnStyle(column),
                     column?.isIdentity
@@ -286,7 +294,7 @@ const DefaultTableRows = ({ storeName }) => {
                   onPress={() => configs.requestSort?.(column)}
                 >
                   <View style={styles.sortableHeader}>
-                    <Text style={[styles.headerText, { color: tableTextColor }]} numberOfLines={1}>{label}</Text>
+                    <Text style={[styles.headerText, { color: tableTextColor }, configs.appearance === 'compact' ? {fontSize: 12, fontWeight: '600', textTransform: 'none'} : null]} numberOfLines={1}>{label}</Text>
                     {isSortableColumn(column) && configs.resolvedSort?.field === sortFieldName ? (
                       <Icon name={configs.resolvedSort?.direction === 'desc' ? 'chevron-down' : 'chevron-up'} size={12} color={tableTextColor} />
                     ) : isSortableColumn(column) ? (
@@ -314,8 +322,8 @@ const DefaultTableRows = ({ storeName }) => {
                   },
                 ]}
               >
-                <Text style={[styles.headerText, { color: tableTextColor }]}>
-                  {global.t?.t(storeName, 'label', 'actions')}
+                <Text style={[styles.headerText, { color: tableTextColor }, configs.appearance === 'compact' ? {fontSize: 12, fontWeight: '600', textTransform: 'none'} : null]}>
+                  {configs.appearance === 'compact' ? 'Ações' : global.t?.t(storeName, 'label', 'actions')}
                 </Text>
               </View>
             ) : null}

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

@@ -1,6 +1,7 @@
 import React, {useMemo, useState} from 'react';
 import { Text, View, useWindowDimensions } from 'react-native';
 import { useStore } from '@store';
+import DefaultTableCompactToolbar from './DefaultTableCompactToolbar';
 import DefaultTableControls from './DefaultTableControls';
 import DefaultTableImportModal from './DefaultTableImportModal';
 import {
@@ -154,6 +155,12 @@ const DefaultTableToolbar = ({
       </View>
     ) : null;
 
+  if (configs.appearance === 'compact') {
+    return <>
+      <DefaultTableCompactToolbar storeName={storeName} actions={resolvedToolbarActions} showControls={showToolbarControls} />
+      <DefaultTableImportModal onClose={() => setIsImportModalVisible(false)} storeName={storeName} visible={isImportModalVisible} />
+    </>;
+  }
   return (
     <View
       style={[

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Modal, Text, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
+import DefaultTablePaginationBar from './DefaultTablePaginationBar';
 import DefaultTableBody from './DefaultTableBody';
 import DefaultTableFooter from './DefaultTableFooter';
 import DefaultTableToolbar from './DefaultTableToolbar';
 import DefaultForm from '../form/DefaultForm';
 import styles from './DefaultTable.styles';
+import {DefaultTableThemeContext} from './useDefaultTableTheme';
 
 export default function DefaultTableView({
   tablePanelBorderColor,
@@ -29,7 +31,7 @@ export default function DefaultTableView({
   requestParamsSeed
 }) {
   return (
-    <View
+    <DefaultTableThemeContext.Provider value={themeColors}><View
       style={[
         styles.wrap,
         {
@@ -48,6 +50,7 @@ export default function DefaultTableView({
       ) : null}
       <DefaultTableBody storeName={storeName} />
       <DefaultTableFooter storeName={storeName} />
+      <DefaultTablePaginationBar storeName={storeName} />
       {shouldRenderBottomAddButton ? (
         <View style={styles.bottomAddBar}>
           <TouchableOpacity
@@ -113,6 +116,6 @@ export default function DefaultTableView({
           </View>
         </View>
       </Modal>
-    </View>
+    </View></DefaultTableThemeContext.Provider>
   );
 }

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

@@ -0,0 +1,29 @@
+import {useCallback, useState} from 'react';
+
+export default function useDefaultTableCreateForm({onAdd, onSaved, resolvedActions, handleRefresh}) {
+  const [isCreateFormOpen, setIsCreateFormOpen] = useState(false);
+  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 handleDefaultCreateSaved = useCallback(
+    savedItem => {
+      closeCreateForm();
+      onSaved?.(savedItem, null);
+      handleRefresh?.();
+    },
+    [closeCreateForm, handleRefresh, onSaved],
+  );
+  return {isCreateFormOpen, closeCreateForm, resolvedOnAdd, handleDefaultCreateSaved};
+}

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

@@ -76,6 +76,7 @@ const useAutoPageLoader = ({
   showError,
   storeName,
 }) => {
+  const [currentPage, setCurrentPage] = useState(1);
   const [autoHasLoaded, setAutoHasLoaded] = useState(false);
   const [autoLoading, setAutoLoading] = useState(false);
   const [autoLoadingMore, setAutoLoadingMore] = useState(false);
@@ -123,6 +124,7 @@ const useAutoPageLoader = ({
 
           const pageItems = normalizeCollectionItems(response);
           autoPageRef.current = Number(response?.catalogPage) || page;
+          setCurrentPage(autoPageRef.current);
           autoLoadedQueryKeyRef.current = autoQuerySignature;
           autoErroredQueryKeyRef.current = '';
           setAutoHasLoaded(true);
@@ -161,6 +163,7 @@ const useAutoPageLoader = ({
   );
 
   return {
+    currentPage,
     autoErroredQueryKeyRef,
     autoHasLoaded,
     autoLastPageCount,
@@ -225,6 +228,7 @@ export const useDefaultTablePagination = ({
   onRefresh,
   onEndReached,
   pageSize,
+  paginationMode = 'infinite',
   requestParams,
   resolvedActions,
   resolvedSort,
@@ -275,6 +279,7 @@ export const useDefaultTablePagination = ({
     [columnsForTable, filters, pageSizeNumber, requestParams, resolvedSort, resourceEndpoint, storeName, storeReload],
   );
   const {
+    currentPage,
     autoErroredQueryKeyRef,
     autoHasLoaded,
     autoLastPageCount,
@@ -365,6 +370,7 @@ export const useDefaultTablePagination = ({
 
   const handleEndReached = useCallback(() => {
     if (
+      paginationMode === 'pages' ||
       !resolvedHasMore ||
       resolvedIsLoading ||
       endReachedLockRef.current === true
@@ -384,6 +390,7 @@ export const useDefaultTablePagination = ({
       onEndReached();
     }
   }, [
+    paginationMode,
     autoMode,
     autoPageRef,
     loadAutoPage,
@@ -408,7 +415,14 @@ export const useDefaultTablePagination = ({
 
   return {
     buildRequestQuery,
-    currentPage: autoPageRef.current,
+    currentPage,
+    goToPage: page => {
+      const totalPages = Math.max(1, Math.ceil(Number(resolvedTotalItems || 0) / pageSizeNumber));
+      if (autoMode && paginationMode === 'pages' && Number.isInteger(page) && page >= 1 && page <= totalPages && !resolvedIsLoading) {
+        return loadAutoPage(page, {append: false});
+      }
+      return Promise.resolve([]);
+    },
     handleEndReached,
     handleRefresh,
     pageSizeNumber,

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

@@ -0,0 +1,19 @@
+import {useRef} from 'react';
+import {getColumnKey} from '../inputs/defaultInputUtils';
+import {getRowKey} from './DefaultTable.utils';
+
+// Keep navigation locked while any cell in this row is editing or saving.
+export default function useDefaultTableRowInteraction() {
+  const blockedFields = useRef(new Map());
+  const setRowInteraction = (row, column, blocked) => {
+    const key = row?.id != null || row?.['@id'] != null ? getRowKey(row) : row;
+    const fields = blockedFields.current.get(key) || new Set();
+    const field = getColumnKey(column);
+    if (blocked) fields.add(field);
+    else fields.delete(field);
+    if (fields.size) blockedFields.current.set(key, fields);
+    else blockedFields.current.delete(key);
+  };
+  const canOpenRow = row => !blockedFields.current.has(row?.id != null || row?.['@id'] != null ? getRowKey(row) : row);
+  return {canOpenRow, setRowInteraction};
+}

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

@@ -1,5 +1,6 @@
 import { useEffect, useRef } from 'react';
 import {
+  persistTableFiltersPreference,
   resolveStoredTableFiltersPreference,
   resolveStoredVisibleColumnsPreference,
   sanitizeTableFiltersPreference,
@@ -48,12 +49,19 @@ export function useDefaultTableStoreSync({
   data,
   defaultTableConfigs,
   defaultTableConfigsSignature,
+  filters,
+  onFilterChange,
   store,
   storeColumnsLength,
   storeFilters,
   storeName,
   tablePreferenceScope,
 }) {
+  const onFilterChangeRef = useRef(onFilterChange);
+  onFilterChangeRef.current = onFilterChange;
+  const controlledFiltersRef = useRef(filters);
+  controlledFiltersRef.current = filters;
+  const lastControlledFiltersRef = useRef(filters);
   const storeRef = useRef(store);
   storeRef.current = store;
   const lastPublishedItemsRef = useRef(undefined);
@@ -123,35 +131,36 @@ export function useDefaultTableStoreSync({
       columnsForTable.map(c => c?.key || c?.name || '').join('|'),
     ].join('::');
 
+    if (lastHydratedFiltersKeyRef.current === scopeKey) return;
+    lastHydratedFiltersKeyRef.current = scopeKey;
     const storedFilters = resolveStoredTableFiltersPreference(tablePreferenceScope);
-    if (!storedFilters) {
-      lastHydratedFiltersKeyRef.current = scopeKey;
-      return;
-    }
-
+    const controlled = typeof onFilterChangeRef.current === 'function';
+    if (!storedFilters && !controlled) return;
     const nextFilters = sanitizeTableFiltersPreference({
       columns: columnsForTable,
-      filters: storedFilters,
+      filters: storedFilters || controlledFiltersRef.current || {},
     });
-
-    if (Object.keys(nextFilters).length === 0) {
-      lastHydratedFiltersKeyRef.current = scopeKey;
-      return;
+    if (!areTableFiltersEqual(storeFiltersRef.current, nextFilters)) {
+      publishStoreValue(storeRef.current, 'setFilters', nextFilters, 'filters');
     }
-
-    // Hydrate once per scope/columns; never chase storeFilters (loop on period toggle).
-    if (lastHydratedFiltersKeyRef.current === scopeKey) {
-      return;
+    // The screen builds requestParams from its controlled filters. Hydration must
+    // notify it too, including saved {}, or the UI and request disagree.
+    if (controlled && !areTableFiltersEqual(controlledFiltersRef.current, nextFilters)) {
+      onFilterChangeRef.current(nextFilters);
     }
+  }, [columnsForTable, storeName, tablePreferenceScope]);
 
-    if (areTableFiltersEqual(storeFiltersRef.current, nextFilters)) {
-      lastHydratedFiltersKeyRef.current = scopeKey;
-      return;
+  useEffect(() => {
+    if (typeof onFilterChangeRef.current !== 'function') return;
+    if (areTableFiltersEqual(lastControlledFiltersRef.current, filters)) return;
+    lastControlledFiltersRef.current = filters;
+    persistTableFiltersPreference(tablePreferenceScope, sanitizeTableFiltersPreference({
+      columns: columnsForTable, filters: filters || {},
+    }));
+    if (!areTableFiltersEqual(storeFiltersRef.current, filters)) {
+      publishStoreValue(storeRef.current, 'setFilters', filters || {}, 'filters');
     }
-
-    lastHydratedFiltersKeyRef.current = scopeKey;
-    publishStoreValue(storeRef.current, 'setFilters', nextFilters, 'filters');
-  }, [columnsForTable, storeName, tablePreferenceScope]);
+  }, [filters]);
 
   useEffect(() => {
     if (configsSignatureRef.current === defaultTableConfigsSignature) {

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

@@ -1,22 +1,25 @@
-import { useMemo } from 'react';
+import { createContext, useContext, useMemo } from 'react';
 import { useStore } from '@store';
 
+export const DefaultTableThemeContext = createContext(null);
+
 const firstThemeToken = (themeColors, keys) =>
   keys.map(key => themeColors?.[key]).find(Boolean);
 
-const useDefaultTableTheme = (accentColor = null) => {
+const useDefaultTableTheme = (accentColor = null, appearance = 'default') => {
+  const inheritedColors = useContext(DefaultTableThemeContext);
   const themeStore = useStore('theme');
   const rawThemeColors = themeStore?.getters?.colors || {};
   const themeColors = useMemo(
-    () => ({ ...rawThemeColors }),
-    [rawThemeColors],
+    () => inheritedColors || (appearance === 'compact' ? {...rawThemeColors, compact: true} : rawThemeColors),
+    [rawThemeColors, inheritedColors, appearance],
   );
   const themeTokens = useMemo(
     () => ({ ...themeColors }),
     [themeColors],
-  );
+  );
   const palette = themeColors;
-  const resolvedAccentColor = accentColor ?? themeColors.primary;
+  const resolvedAccentColor = appearance === 'compact' || inheritedColors ? themeColors.primary : accentColor ?? themeColors.primary;
   const tableBorderColors = {
     containerBorderColor: firstThemeToken(themeColors, [
       'tableContainerBorder',
@@ -64,38 +67,38 @@ const useDefaultTableTheme = (accentColor = null) => {
     resolvedAccentColor,
     tableBorderColors,
     themeColors,
-    themeTokens,
-    checkboxBorderColor: themeColors.checkboxBorder,
-    checkboxSelectedMarkColor: themeColors.checkboxSelectedMark,
-    modalColors: {
-      backgroundColor: themeColors.modalBackground,
-      borderColor: themeColors.modalBorder,
-      closeIconColor: themeColors.modalCloseIcon,
-      headerTextColor: themeColors.modalHeaderText,
-      overlayColor: themeColors.modalOverlay,
-      textColor: themeColors.modalText,
-    },
-    tableButtonColors: {
-      backgroundColor: themeColors.buttonBackground,
-      borderColor: themeColors.buttonBorder,
-      iconColor: themeColors.buttonIcon,
-      pressedBackgroundColor: themeColors.buttonPressedBackground,
-      pressedBorderColor: themeColors.buttonPressedBorder,
-      pressedIconColor: themeColors.buttonPressedIcon,
-      textColor: themeColors.buttonText,
-    },
-    tableActionColors: {
-      backgroundColor: themeColors.tableActionBackground,
-      borderColor: themeColors.tableActionBorder,
-      textColor: themeColors.tableActionIcon,
-    },
-    toolbarColors: {
-      backgroundColor: themeColors.toolbarBackground,
-      borderColor: themeColors.toolbarBorder,
-      countBackgroundColor: themeColors.badgeBackground,
-      countTextColor: themeColors.badgeText,
-    },
-  };
-};
-
-export default useDefaultTableTheme;
+    themeTokens,
+    checkboxBorderColor: themeColors.checkboxBorder,
+    checkboxSelectedMarkColor: themeColors.checkboxSelectedMark,
+    modalColors: {
+      backgroundColor: themeColors.modalBackground,
+      borderColor: themeColors.modalBorder,
+      closeIconColor: themeColors.modalCloseIcon,
+      headerTextColor: themeColors.modalHeaderText,
+      overlayColor: themeColors.modalOverlay,
+      textColor: themeColors.modalText,
+    },
+    tableButtonColors: {
+      backgroundColor: themeColors.buttonBackground,
+      borderColor: themeColors.buttonBorder,
+      iconColor: themeColors.buttonIcon,
+      pressedBackgroundColor: themeColors.buttonPressedBackground,
+      pressedBorderColor: themeColors.buttonPressedBorder,
+      pressedIconColor: themeColors.buttonPressedIcon,
+      textColor: themeColors.buttonText,
+    },
+    tableActionColors: {
+      backgroundColor: themeColors.tableActionBackground,
+      borderColor: themeColors.tableActionBorder,
+      textColor: themeColors.tableActionIcon,
+    },
+    toolbarColors: {
+      backgroundColor: themeColors.toolbarBackground,
+      borderColor: themeColors.toolbarBorder,
+      countBackgroundColor: themeColors.badgeBackground,
+      countTextColor: themeColors.badgeText,
+    },
+  };
+};
+
+export default useDefaultTableTheme;