@controleonline/ui-default 1.0.267 → 1.0.269

package/AGENTS.md

@@ -21,8 +21,9 @@
 - `requestParams` serve para contexto fixo do fluxo, nao para duplicar estado de filtro que ja vive no store.
 - `pageSize` so deve ser usado quando o contrato externo exigir e com justificativa clara no modulo.
 - `summary` e `totalItems` vem do backend/store e pertencem ao rodape interno do `DefaultTable`.
-- `add: true` abre o `DefaultForm` quando a tela nao prover `onAdd`.
-- O modo controlado continua existindo apenas para excecoes reais de integracao; o padrao do sistema e o modo store-driven.
+- `add: true` abre o `DefaultForm` quando a tela nao prover `onAdd`.
+- `rowActionsComponent` e o slot canonico para acoes por linha quando a tela precisa renderizar mais do que o botao padrao de edicao. Ele pode ser componente, funcao ou elemento React, recebe `row`, `storeName`, `openEdit`, `openRow` e `helpers`, e a largura da coluna deve ser ajustada com `rowActionsWidth` quando houver mais de uma acao.
+- O modo controlado continua existindo apenas para excecoes reais de integracao; o padrao do sistema e o modo store-driven.
 - Loadings e erros devem seguir o fluxo central do sistema, sem banners ou estados paralelos na tela.
 - O `get` do store default pode preservar o `item` atual durante refresh quando receber `__storeMeta.preserveItem = true`; use esse modo quando a tela precisa atualizar o registro sem desmontar o detalhe em exibição.
 - Explicacoes permanentes de tela devem sair do corpo principal e ir para o `DefaultTooltip`, acionado por `?`, quando houver contexto necessario para o usuario.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-default",
-  "version": "1.0.267",
+  "version": "1.0.269",
   "author": "ControleOnline",
   "description": "ControleOnline Default Quasar UI Component",
   "license": "MIT",

package/src/react/components/filters/CompactFilterSelector.js

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
-import {
+import {
+  Image,
   Modal,
   ScrollView,
   Text,
@@ -10,12 +11,13 @@ import {
   View,
 } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
-import {
-  formatStoreColumnLabel,
-  resolveStoreColumn,
-  resolveStoreConfigByName,
-} from '@controleonline/ui-common/src/react/utils/storeColumns';
-import createStyles from './CompactFilterSelector.styles';
+import {
+  formatStoreColumnLabel,
+  resolveStoreColumn,
+  resolveStoreConfigByName,
+} from '@controleonline/ui-common/src/react/utils/storeColumns';
+import { isValidFeatherIcon } from '../inputs/defaultInputUtils';
+import createStyles from './CompactFilterSelector.styles';
 
 const buildTheme = ({ accentColor, themeColors = {} }) => ({
   accentColor: accentColor,
@@ -117,8 +119,23 @@ const CompactFilterSelector = ({
     field,
     store,
   });
-  const resolvedLabelCaption = labelCaption || storeFieldLabel;
-  const resolvedTitle = title || storeFieldLabel;
+  const resolvedLabelCaption = labelCaption || storeFieldLabel;
+  const resolvedTitle = title || storeFieldLabel;
+  const selectedOption = useMemo(
+    () => options.find(option => option?.key === selectedKey),
+    [options, selectedKey],
+  );
+  const selectedOptionColor = normalizeText(selectedOption?.color);
+  const selectedOptionIcon = normalizeText(selectedOption?.icon);
+  const selectedOptionIconName = isValidFeatherIcon(selectedOptionIcon)
+    ? selectedOptionIcon
+    : '';
+  const triggerIconName = active && selectedOptionIconName
+    ? selectedOptionIconName
+    : icon;
+  const triggerIconColor = active
+    ? selectedOptionColor || resolvedTheme.activeIconColor
+    : resolvedTheme.iconColor;
 
   const closeModal = useCallback(() => {
     setVisible(false);
@@ -201,22 +218,31 @@ const CompactFilterSelector = ({
         disabled={disabled}
         onPress={openModal}
       >
-        <View style={[styles.iconWrap, active ? styles.iconWrapActive : null]}>
-          <Icon
-            name={icon}
-            size={dense ? 14 : 15}
-            color={active ? resolvedTheme.activeIconColor : resolvedTheme.iconColor}
-          />
-        </View>
+        <View style={[styles.iconWrap, active ? styles.iconWrapActive : null]}>
+          {active && selectedOption?.image ? (
+            <Image
+              source={selectedOption.image}
+              style={styles.triggerIconImage}
+              resizeMode="contain"
+            />
+          ) : (
+            <Icon
+              name={triggerIconName}
+              size={dense ? 14 : 15}
+              color={triggerIconColor}
+            />
+          )}
+        </View>
 
         <View style={styles.textWrap}>
           {!!resolvedLabelCaption && (
             <Text
               numberOfLines={1}
               style={[
-                styles.triggerCaption,
-                active ? styles.triggerCaptionActive : null,
-              ]}
+                styles.triggerCaption,
+                active ? styles.triggerCaptionActive : null,
+                active && selectedOptionColor ? { color: selectedOptionColor } : null,
+              ]}
             >
               {resolvedLabelCaption}
             </Text>
@@ -224,7 +250,11 @@ const CompactFilterSelector = ({
 
           <Text
             numberOfLines={1}
-            style={[styles.triggerText, active ? styles.triggerTextActive : null]}
+            style={[
+              styles.triggerText,
+              active ? styles.triggerTextActive : null,
+              active && selectedOptionColor ? { color: selectedOptionColor } : null,
+            ]}
           >
             {label}
           </Text>
@@ -270,33 +300,74 @@ const CompactFilterSelector = ({
                   ) : null}
 
                   {filteredOptions.map(option => {
-                    const isSelected = option.key === selectedKey;
-
-                    return (
+                    const isSelected = option.key === selectedKey;
+                    const optionColor = normalizeText(option?.color);
+                    const optionIcon = normalizeText(option?.icon);
+                    const optionIconName = isValidFeatherIcon(optionIcon)
+                      ? optionIcon
+                      : '';
+                    const shouldRenderOptionFallbackText = Boolean(
+                      !option?.image &&
+                      !optionIconName &&
+                      optionColor &&
+                      normalizeText(option?.label),
+                    );
+                    const hasOptionVisual = Boolean(option?.image || optionIconName || shouldRenderOptionFallbackText);
+
+                    return (
                       <TouchableOpacity
                         key={option.key}
                         style={[
                           styles.modalOption,
                           isSelected ? styles.modalOptionActive : null,
                         ]}
-                        activeOpacity={0.9}
-                        onPress={() => handleSelect(option.key)}
-                      >
-                        <Text
-                          style={[
-                            styles.modalOptionText,
-                            isSelected ? styles.modalOptionTextActive : null,
-                          ]}
-                        >
-                          {option.label}
-                        </Text>
+                        activeOpacity={0.9}
+                        onPress={() => handleSelect(option.key)}
+                      >
+                        {option?.image ? (
+                          <Image
+                            source={option.image}
+                            style={styles.modalOptionImage}
+                            resizeMode="contain"
+                          />
+                        ) : optionIconName ? (
+                          <Icon
+                            style={styles.modalOptionIcon}
+                            name={optionIconName}
+                            size={16}
+                            color={optionColor || resolvedTheme.iconColor}
+                          />
+                        ) : shouldRenderOptionFallbackText ? (
+                          <Text
+                            style={[
+                              styles.modalOptionFallbackText,
+                              { color: optionColor },
+                            ]}
+                            numberOfLines={1}
+                          >
+                            {option.label}
+                          </Text>
+                        ) : null}
+
+                        {shouldRenderOptionFallbackText ? null : (
+                          <Text
+                            style={[
+                              styles.modalOptionText,
+                              isSelected ? styles.modalOptionTextActive : null,
+                              optionColor ? { color: optionColor } : null,
+                              !hasOptionVisual ? styles.modalOptionTextNoVisual : null,
+                            ]}
+                          >
+                            {option.label}
+                          </Text>
+                        )}
 
                         {isSelected ? (
-                          <Icon
-                            name="check"
-                            size={16}
-                            color={resolvedTheme.activeIconColor}
-                          />
+                          <Icon
+                            name="check"
+                            size={16}
+                            color={optionColor || resolvedTheme.activeIconColor}
+                          />
                         ) : null}
                       </TouchableOpacity>
                     );

package/src/react/components/filters/CompactFilterSelector.styles.js

@@ -29,9 +29,14 @@ const createStyles = (theme, dense = false, windowWidth = 0) => {
       justifyContent: 'center',
       backgroundColor: theme.iconBackgroundColor,
     },
-    iconWrapActive: {
-      backgroundColor: theme.activeIconBackgroundColor,
-    },
+    iconWrapActive: {
+      backgroundColor: theme.activeIconBackgroundColor,
+    },
+    triggerIconImage: {
+      width: dense ? 16 : 18,
+      height: dense ? 16 : 18,
+      flexShrink: 0,
+    },
     textWrap: {
       flex: 1,
       minWidth: 0,
@@ -105,7 +110,7 @@ const createStyles = (theme, dense = false, windowWidth = 0) => {
       fontWeight: '700',
     },
     modalOption: {
-      minHeight: 50,
+      minHeight: 50,
       borderWidth: 1,
       borderColor: theme.optionBorderColor,
       borderRadius: 16,
@@ -115,18 +120,35 @@ const createStyles = (theme, dense = false, windowWidth = 0) => {
       flexDirection: 'row',
       alignItems: 'center',
       justifyContent: 'space-between',
-      gap: 8,
-    },
-    modalOptionActive: {
-      borderColor: theme.accentColor,
-      backgroundColor: theme.activeBackgroundColor,
+      gap: 8,
+    },
+    modalOptionIcon: {
+      flexShrink: 0,
+    },
+    modalOptionImage: {
+      width: 18,
+      height: 18,
+      flexShrink: 0,
+    },
+    modalOptionFallbackText: {
+      flex: 1,
+      minWidth: 0,
+      fontSize: 14,
+      fontWeight: '800',
+    },
+    modalOptionActive: {
+      borderColor: theme.accentColor,
+      backgroundColor: theme.activeBackgroundColor,
     },
     modalOptionText: {
       flex: 1,
       fontSize: 14,
-      fontWeight: '700',
-      color: theme.textColor,
-    },
+      fontWeight: '700',
+      color: theme.textColor,
+    },
+    modalOptionTextNoVisual: {
+      marginLeft: 0,
+    },
     modalOptionTextActive: {
       color: theme.optionSelectedTextColor,
     },

package/src/react/components/inputs/DefaultInput.js

@@ -6,6 +6,7 @@ import {
   getColumnKey,
   isDateLikeColumn,
   isEditableColumn,
+  isValidFeatherIcon,
   normalizeText,
   resolveCellPresentation,
   resolveCellText,
@@ -142,6 +143,17 @@ const DefaultInput = ({
   };
 
   if (!editing && !isForm) {
+    const readIconName = isValidFeatherIcon(readPresentation.icon)
+      ? readPresentation.icon
+      : '';
+    const shouldRenderIconFallbackText = Boolean(
+      readPresentationStyles.hasDecoration &&
+      !readIconName &&
+      readPresentationStyles.color &&
+      normalizeText(resolvedLabel) &&
+      resolvedLabel !== '-',
+    );
+
     return (
       <View style={[styles.wrap, containerStyle]}>
         {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
@@ -151,43 +163,57 @@ const DefaultInput = ({
           disabled={!canEdit}
           onPress={() => onStartEditing?.()}
         >
-          <View
-            style={[
-              styles.readValueWrap,
-              readPresentationStyles.hasDecoration ? styles.readBadge : null,
-              readPresentationStyles.badgeStyle,
-            ]}
-          >
-            {readPresentation.image ? (
-              <Image
-                source={readPresentation.image}
-                style={styles.readImage}
-                resizeMode="contain"
-              />
-            ) : null}
-            {readPresentationStyles.hasDecoration && readPresentation.icon && readPresentationStyles.color ? (
-              <Icon
-                style={styles.readBadgeIcon}
-                name={readPresentation.icon}
-                size={12}
-                color={readPresentationStyles.color}
-              />
-            ) : null}
+          {shouldRenderIconFallbackText ? (
             <Text
               style={[
                 styles.readText,
-                readPresentationStyles.hasDecoration ? styles.readBadgeText : null,
-                resolvedLabel === '-' ? styles.mutedText : null,
+                styles.readTextBadge,
                 readPresentationStyles.color ? { color: readPresentationStyles.color } : null,
                 readTextStyle,
               ]}
               numberOfLines={numberOfLines}
             >
-              {column?.prefix || ''}
-              {resolvedLabel || '-'}
-              {column?.sufix || column?.suffix || ''}
+              {resolvedLabel}
             </Text>
-          </View>
+          ) : (
+            <View
+              style={[
+                styles.readValueWrap,
+                readPresentationStyles.hasDecoration ? styles.readBadge : null,
+                readPresentationStyles.badgeStyle,
+              ]}
+            >
+              {readPresentation.image ? (
+                <Image
+                  source={readPresentation.image}
+                  style={styles.readImage}
+                  resizeMode="contain"
+                />
+              ) : null}
+              {readPresentationStyles.hasDecoration && readIconName && readPresentationStyles.color ? (
+                <Icon
+                  style={styles.readBadgeIcon}
+                  name={readIconName}
+                  size={12}
+                  color={readPresentationStyles.color}
+                />
+              ) : null}
+              <Text
+                style={[
+                  styles.readText,
+                  readPresentationStyles.hasDecoration ? styles.readBadgeText : null,
+                  resolvedLabel === '-' ? styles.mutedText : null,
+                  readPresentationStyles.color ? { color: readPresentationStyles.color } : null,
+                  readTextStyle,
+                ]}
+                numberOfLines={numberOfLines}
+              >
+                {column?.prefix || ''}
+                {resolvedLabel || '-'}
+                {column?.sufix || column?.suffix || ''}
+              </Text>
+            </View>
+          )}
           {saving ? (
             <Text style={[styles.savingText, { color: accentColor }]}>Salvando</Text>
           ) : canEdit ? (

package/src/react/components/inputs/DefaultInput.styles.js

@@ -24,6 +24,7 @@ const styles = StyleSheet.create({
   readBadge: {
     flex: 0,
     alignSelf: 'flex-start',
+    minWidth: 22,
     minHeight: 22,
     maxWidth: '100%',
     borderWidth: 1,
@@ -33,10 +34,15 @@ const styles = StyleSheet.create({
   },
   readBadgeText: {
     flex: 0,
-    flexShrink: 1,
+    flexShrink: 0,
+    maxWidth: '100%',
     fontSize: 11,
     fontWeight: '800',
   },
+  readTextBadge: {
+    flex: 1,
+    maxWidth: '100%',
+  },
   readBadgeIcon: {
     flexShrink: 0,
   },

package/src/react/components/inputs/DefaultSelect.js

@@ -15,6 +15,7 @@ import {
   buildOptionsFromColumn,
   getColumnKey,
   isEditableColumn,
+  isValidFeatherIcon,
   mapOptions,
   normalizeOptionKey,
   normalizeText,
@@ -159,7 +160,17 @@ const DefaultSelect = ({
     [readPresentation, resolvedLabel],
   );
   const canEdit = isEditableColumn(column) && typeof onStartEditing === 'function';
-  const isForm = variant === 'form';
+  const isForm = variant === 'form';
+  const readIconName = isValidFeatherIcon(readPresentation.icon)
+    ? readPresentation.icon
+    : '';
+  const shouldRenderIconFallbackText = Boolean(
+    readPresentationStyles.hasDecoration &&
+    !readIconName &&
+    readPresentationStyles.color &&
+    normalizeText(resolvedLabel) &&
+    resolvedLabel !== '-',
+  );
   const filteredOptions = useMemo(() => {
     const query = normalizeText(searchText).toLowerCase();
     if (!query || onSearchChange) return options;
@@ -290,47 +301,61 @@ const DefaultSelect = ({
     <View style={[inputStyles.wrap, containerStyle]}>
       {showLabel ? <Text style={inputStyles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
 
-      <TouchableOpacity
-        style={[inputStyles.readButton, isForm ? inputStyles.readButtonForm : null]}
-        activeOpacity={canEdit || isForm ? 0.78 : 1}
-        disabled={!canEdit && !isForm}
-        onPress={open}
+      <TouchableOpacity
+        style={[inputStyles.readButton, isForm ? inputStyles.readButtonForm : null]}
+        activeOpacity={canEdit || isForm ? 0.78 : 1}
+        disabled={!canEdit && !isForm}
+        onPress={open}
       >
-        <View
-          style={[
-            inputStyles.readValueWrap,
-            readPresentationStyles.hasDecoration ? inputStyles.readBadge : null,
-            readPresentationStyles.badgeStyle,
-          ]}
-        >
-          {readPresentation.image ? (
-            <Image
-              source={readPresentation.image}
-              style={inputStyles.readImage}
-              resizeMode="contain"
-            />
-          ) : null}
-          {readPresentationStyles.hasDecoration && readPresentation.icon && readPresentationStyles.color ? (
-            <Icon
-              style={inputStyles.readBadgeIcon}
-              name={readPresentation.icon}
-              size={12}
-              color={readPresentationStyles.color}
-            />
-          ) : null}
+        {shouldRenderIconFallbackText ? (
           <Text
             style={[
               inputStyles.readText,
-              readPresentationStyles.hasDecoration ? inputStyles.readBadgeText : null,
-              resolvedLabel === '-' ? inputStyles.mutedText : null,
+              inputStyles.readTextBadge,
               readPresentationStyles.color ? { color: readPresentationStyles.color } : null,
               readTextStyle,
             ]}
             numberOfLines={numberOfLines}
           >
-            {resolvedLabel || '-'}
+            {resolvedLabel}
           </Text>
-        </View>
+        ) : (
+          <View
+            style={[
+              inputStyles.readValueWrap,
+              readPresentationStyles.hasDecoration ? inputStyles.readBadge : null,
+              readPresentationStyles.badgeStyle,
+            ]}
+          >
+            {readPresentation.image ? (
+              <Image
+                source={readPresentation.image}
+                style={inputStyles.readImage}
+                resizeMode="contain"
+              />
+            ) : null}
+            {readPresentationStyles.hasDecoration && readIconName && readPresentationStyles.color ? (
+              <Icon
+                style={inputStyles.readBadgeIcon}
+                name={readIconName}
+                size={12}
+                color={readPresentationStyles.color}
+              />
+            ) : null}
+            <Text
+              style={[
+                inputStyles.readText,
+                readPresentationStyles.hasDecoration ? inputStyles.readBadgeText : null,
+                resolvedLabel === '-' ? inputStyles.mutedText : null,
+                readPresentationStyles.color ? { color: readPresentationStyles.color } : null,
+                readTextStyle,
+              ]}
+              numberOfLines={numberOfLines}
+            >
+              {resolvedLabel || '-'}
+            </Text>
+          </View>
+        )}
         {saving ? (
           <Text style={[inputStyles.savingText, { color: accentColor }]}>Salvando</Text>
         ) : canEdit || isForm ? (
@@ -363,6 +388,16 @@ const DefaultSelect = ({
               {filteredOptions.length > 0 ? (
                 filteredOptions.map(option => {
                   const isSelected = option.key === selectedKey;
+                  const optionColor = normalizeText(option.color);
+                  const optionIconName = isValidFeatherIcon(option.icon)
+                    ? option.icon
+                    : '';
+                  const shouldRenderOptionFallbackText = Boolean(
+                    !option.image &&
+                    !optionIconName &&
+                    optionColor &&
+                    normalizeText(option.label),
+                  );
                   return (
                     <TouchableOpacity
                       key={`${option.key}_${option.label}`}
@@ -377,14 +412,20 @@ const DefaultSelect = ({
                           resizeMode="contain"
                         />
                       ) : null}
-                      {isSelected || (option.icon && option.color) ? (
+                      {isSelected || (optionIconName && optionColor) ? (
                         <Icon
-                          name={isSelected ? 'check-circle' : option.icon}
+                          name={isSelected ? 'check-circle' : optionIconName}
                           size={15}
-                          color={isSelected ? accentColor : option.color}
+                          color={isSelected ? accentColor : optionColor}
                         />
                       ) : null}
-                      <Text style={[styles.optionText, option.color ? { color: option.color } : null]}>
+                      <Text
+                        style={[
+                          styles.optionText,
+                          optionColor ? { color: optionColor } : null,
+                          shouldRenderOptionFallbackText ? styles.optionFallbackText : null,
+                        ]}
+                      >
                         {option.label}
                       </Text>
                     </TouchableOpacity>

package/src/react/components/inputs/DefaultSelect.styles.js

@@ -51,6 +51,9 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: '700',
   },
+  optionFallbackText: {
+    fontWeight: '800',
+  },
   emptyBox: {
     padding: 18,
     alignItems: 'center',

package/src/react/components/inputs/defaultInputUtils.js

@@ -1,9 +1,11 @@
-import { getAllStores } from '@store';
-import Formatter from '@controleonline/ui-common/src/utils/formatter.js';
-import { formatStoreColumnValue } from '@controleonline/ui-common/src/react/utils/storeColumns';
+import { getAllStores } from '@store';
+import Formatter from '@controleonline/ui-common/src/utils/formatter.js';
+import { formatStoreColumnValue } from '@controleonline/ui-common/src/react/utils/storeColumns';
+import FeatherGlyphMap from 'react-native-vector-icons/glyphmaps/Feather.json';
 
-export const normalizeText = value => String(value ?? '').trim();
-const formatHumanLabel = value =>
+export const normalizeText = value => String(value ?? '').trim();
+export const isValidFeatherIcon = icon => Boolean(FeatherGlyphMap[normalizeText(icon)]);
+const formatHumanLabel = value =>
   normalizeText(value)
     .replace(/([a-z])([A-Z])/g, '$1 $2')
     .replace(/[_-]+/g, ' ')
@@ -242,6 +244,15 @@ const resolveFormattedListMeta = (column, rawValue, row) => {
   return normalizeObject(formatted);
 };
 
+const resolveFormattedValueMeta = (column, rawValue, row) => {
+  if (typeof column?.format !== 'function') {
+    return {};
+  }
+
+  const formatted = column.format(rawValue, column, row, false);
+  return normalizeObject(formatted);
+};
+
 const resolveStyleMeta = (column, row) => {
   if (typeof column?.style !== 'function') {
     return normalizeObject(column?.style);
@@ -260,6 +271,7 @@ export const resolveCellPresentation = ({
   const fieldName = getColumnKey(column);
   const rawValue = value ?? row?.[fieldName];
   const rawMeta = normalizeObject(rawValue);
+  const formattedValueMeta = resolveFormattedValueMeta(column, rawValue, row);
   const formattedMeta = resolveFormattedListMeta(column, rawValue, row);
   const styleMeta = resolveStyleMeta(column, row);
   const label = resolveCellText({
@@ -272,23 +284,29 @@ export const resolveCellPresentation = ({
 
   return {
     backgroundColor:
+      formattedValueMeta.backgroundColor ??
       formattedMeta.backgroundColor ??
+      formattedValueMeta.bgColor ??
       formattedMeta.bgColor ??
       rawMeta.backgroundColor ??
       rawMeta.bgColor ??
       styleMeta.backgroundColor ??
       styleMeta.bgColor,
     borderColor:
+      formattedValueMeta.borderColor ??
       formattedMeta.borderColor ??
       rawMeta.borderColor ??
       styleMeta.borderColor,
     color:
+      formattedValueMeta.color ??
       formattedMeta.color ??
       rawMeta.color ??
       rawMeta.statusColor ??
       rawMeta.categoryColor ??
       styleMeta.color,
     icon:
+      formattedValueMeta.icon ??
+      formattedValueMeta.iconName ??
       formattedMeta.icon ??
       formattedMeta.iconName ??
       rawMeta.icon ??
@@ -296,6 +314,9 @@ export const resolveCellPresentation = ({
       styleMeta.icon ??
       styleMeta.iconName,
     image:
+      formattedValueMeta.image ??
+      formattedValueMeta.logo ??
+      formattedValueMeta.source ??
       formattedMeta.image ??
       formattedMeta.logo ??
       formattedMeta.source ??

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

@@ -77,6 +77,7 @@ const DefaultTable = ({
   renderCard = null,
   requestParams = {},
   rowActionsComponent = null,
+  rowActionsWidth = null,
   rowStyle = null,
   showColumnFiltersButton = true,
   showRowActions = true,
@@ -221,6 +222,7 @@ const DefaultTable = ({
       requestSort,
       resolvedSort,
       rowActionsComponent,
+      rowActionsWidth,
       rowStyle,
       showColumnFiltersButton,
       showRowActions,
@@ -260,6 +262,7 @@ const DefaultTable = ({
       requestSort,
       resolvedSort,
       rowActionsComponent,
+      rowActionsWidth,
       rowStyle,
       showColumnFiltersButton,
       showRowActions,
@@ -279,12 +282,13 @@ const DefaultTable = ({
       stableSerialize({
         add,
         compactBreakpoint,
-        debugFallbackParameters,
         effectiveViewMode,
         filters,
         forceCardsOnCompact,
         initialViewMode,
         pinRowActions,
+        rowActionsComponentType: rowActionsComponent ? typeof rowActionsComponent : '',
+        rowActionsWidth,
         resolvedSort,
         showColumnFiltersButton,
         showRowActions,
@@ -305,6 +309,8 @@ const DefaultTable = ({
       forceCardsOnCompact,
       initialViewMode,
       pinRowActions,
+      rowActionsComponent,
+      rowActionsWidth,
       resolvedSort,
       showColumnFiltersButton,
       showRowActions,

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

@@ -445,9 +445,11 @@ const styles = StyleSheet.create({
   },
   rowActionsGroup: {
     flexDirection: 'row',
+    flexWrap: 'wrap',
     alignItems: 'center',
     justifyContent: 'center',
     gap: 6,
+    width: '100%',
   },
   iconButton: {
     width: 28,

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

@@ -485,14 +485,44 @@ export const resolveSortComparable = ({ column, row, storeName, columns }) => {
 
 export const getColumnStyle = column => {
   const key = getColumnKey(column);
-  if (column?.isIdentity) return [styles.cell, styles.identityCell];
+  const customSize = {};
+  const columnWidth = Number(column?.width);
+  const columnMinWidth = Number(column?.minWidth);
+  const columnFlexBasis = Number(column?.flexBasis);
+
+  if (Number.isFinite(columnWidth) && columnWidth > 0) {
+    customSize.width = columnWidth;
+    customSize.flexBasis = columnWidth;
+  }
+
+  if (Number.isFinite(columnMinWidth) && columnMinWidth > 0) {
+    customSize.minWidth = columnMinWidth;
+  }
+
+  if (Number.isFinite(columnFlexBasis) && columnFlexBasis > 0) {
+    customSize.flexBasis = columnFlexBasis;
+  }
+
+  const columnSizeStyle = Object.keys(customSize).length ? customSize : null;
+
+  if (column?.isIdentity) return [styles.cell, styles.identityCell, columnSizeStyle];
   if (['price', 'total', 'amount', 'value'].includes(key)) {
-    return [styles.cell, styles.moneyCell];
+    return [styles.cell, styles.moneyCell, columnSizeStyle];
   }
-  return styles.cell;
+  return [styles.cell, columnSizeStyle];
 };
 
 export const getColumnMinWidth = column => {
+  const columnMinWidth = Number(column?.minWidth);
+  if (Number.isFinite(columnMinWidth) && columnMinWidth > 0) {
+    return columnMinWidth;
+  }
+
+  const columnWidth = Number(column?.width);
+  if (Number.isFinite(columnWidth) && columnWidth > 0) {
+    return columnWidth;
+  }
+
   const key = getColumnKey(column);
   if (column?.isIdentity) return IDENTITY_CELL_MIN_WIDTH;
   if (['price', 'total', 'amount', 'value'].includes(key)) {

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

@@ -5,6 +5,9 @@ import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/util
 import { getColumnKey, resolveCellText } from '../inputs/defaultInputUtils';
 import DefaultTableEmptyState from './DefaultTableEmptyState';
 import DefaultTableInput from './DefaultTableInput';
+import DefaultTableRowActions, {
+  hasDefaultTableRowActionsComponent,
+} from './DefaultTableRowActions';
 import {
   END_REACHED_THRESHOLD,
   getRowKey,
@@ -63,14 +66,20 @@ const DefaultTableCards = ({ storeName }) => {
     };
     const RowActionsComponent = configs.rowActionsComponent;
     const hasRowPress = typeof configs.onRowPress === 'function';
-    const hasCustomRowActions = typeof RowActionsComponent === 'function';
+    const hasCustomRowActions = hasDefaultTableRowActionsComponent(RowActionsComponent);
     const hasEditAction = typeof configs.onEditRow === 'function';
     const hasRowActions = configs.showRowActions !== false && (hasCustomRowActions || hasEditAction);
     const customRowActions = hasCustomRowActions ? (
-      <RowActionsComponent
+      <DefaultTableRowActions
+        component={RowActionsComponent}
+        helpers={{
+          openEdit: () => configs.onEditRow?.(row),
+          openRow: hasRowPress ? () => configs.onRowPress(row) : null,
+        }}
         openEdit={() => configs.onEditRow?.(row)}
         openRow={hasRowPress ? () => configs.onRowPress(row) : null}
         row={row}
+        storeName={storeName}
       />
     ) : null;
     const editButton = hasEditAction ? (

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

@@ -0,0 +1,41 @@
+import React from 'react';
+
+const DEFAULT_ROW_ACTIONS_WIDTH = 96;
+
+const isReactComponentType = value =>
+  value &&
+  typeof value === 'object' &&
+  typeof value.$$typeof === 'symbol';
+
+export const hasDefaultTableRowActionsComponent = component =>
+  typeof component === 'function' ||
+  React.isValidElement(component) ||
+  isReactComponentType(component);
+
+export const resolveDefaultTableRowActionsWidth = configs => {
+  const rawWidth = configs?.rowActionsWidth ?? configs?.actionsColumnWidth;
+  const width = Number(rawWidth);
+
+  if (Number.isFinite(width) && width > 0) {
+    return width;
+  }
+
+  return DEFAULT_ROW_ACTIONS_WIDTH;
+};
+
+const DefaultTableRowActions = ({ component, ...props }) => {
+  if (React.isValidElement(component)) {
+    return React.cloneElement(component, {
+      ...(component.props || {}),
+      ...props,
+    });
+  }
+
+  if (hasDefaultTableRowActionsComponent(component)) {
+    return React.createElement(component, props);
+  }
+
+  return null;
+};
+
+export default DefaultTableRowActions;

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

@@ -5,8 +5,12 @@ import { useStore } from '@store';
 import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
 import { getColumnKey } from '../inputs/defaultInputUtils';
 import DefaultColumnFilter from '../filters/DefaultColumnFilter';
-import DefaultTableEmptyState from './DefaultTableEmptyState';
-import DefaultTableInput from './DefaultTableInput';
+import DefaultTableEmptyState from './DefaultTableEmptyState';
+import DefaultTableInput from './DefaultTableInput';
+import DefaultTableRowActions, {
+  hasDefaultTableRowActionsComponent,
+  resolveDefaultTableRowActionsWidth,
+} from './DefaultTableRowActions';
 import {
   END_REACHED_THRESHOLD,
   getColumnStyle,
@@ -48,14 +52,14 @@ const DefaultTableRows = ({ storeName }) => {
   const tableTextColor = palette.text;
   const rowStyle = configs.rowStyle;
   const hasRowPress = typeof configs.onRowPress === 'function';
-  const hasCustomRowActions = typeof configs.rowActionsComponent === 'function';
-  const hasEditAction = typeof configs.onEditRow === 'function';
-  const hasRowActions = configs.showRowActions !== false && (hasCustomRowActions || hasEditAction);
+  const hasCustomRowActions = hasDefaultTableRowActionsComponent(configs.rowActionsComponent);
+  const hasEditAction = typeof configs.onEditRow === 'function';
+  const hasRowActions = configs.showRowActions !== false && (hasCustomRowActions || hasEditAction);
   const shouldPinRowActions = configs.pinRowActions !== false;
   const hasColumnFilters =
     configs.showColumnFiltersButton !== false &&
     configs.tableFiltersVisible === true;
-  const actionsCellWidth = hasRowActions ? 96 : 0;
+  const actionsCellWidth = hasRowActions ? resolveDefaultTableRowActionsWidth(configs) : 0;
   const [horizontalMetrics, setHorizontalMetrics] = useState({
     contentWidth: 0,
     viewportWidth: 0,
@@ -179,13 +183,19 @@ const DefaultTableRows = ({ storeName }) => {
             ]}
           >
             <View style={styles.rowActionsGroup}>
-              {hasCustomRowActions ? (
-                <RowActionsComponent
-                  openEdit={() => configs.onEditRow?.(row)}
-                  openRow={hasRowPress ? () => configs.onRowPress(row) : null}
-                  row={row}
-                />
-              ) : null}
+              {hasCustomRowActions ? (
+                <DefaultTableRowActions
+                  component={RowActionsComponent}
+                  helpers={{
+                    openEdit: () => configs.onEditRow?.(row),
+                    openRow: hasRowPress ? () => configs.onRowPress(row) : null,
+                  }}
+                  openEdit={() => configs.onEditRow?.(row)}
+                  openRow={hasRowPress ? () => configs.onRowPress(row) : null}
+                  row={row}
+                  storeName={storeName}
+                />
+              ) : null}
               {hasEditAction ? (
                 <TouchableOpacity
                   style={[styles.iconButton, { borderColor: tableBorderColor, backgroundColor: tableSurfaceColor }]}

package/src/tests/react/components/inputs/DefaultSelect.test.js

@@ -182,4 +182,76 @@ describe('DefaultSelect', () => {
       }),
     });
   });
+
+  it('keeps the status label visible when the row status has color but no icon', async () => {
+    global.t = {
+      t: jest.fn(() => 'Waiting payment'),
+    };
+    let tree;
+
+    await renderer.act(async () => {
+      tree = renderer.create(
+        React.createElement(DefaultSelect, {
+          column: {
+            name: 'status',
+            label: 'Status',
+            list: 'status/getItems',
+            translate: false,
+            format(value) {
+              return {
+                value: value.id,
+                label: global.t.t('orders', 'status', value.status),
+                color: value.color,
+              };
+            },
+            formatList(value) {
+              return {
+                value: value.id,
+                label: global.t.t('orders', 'status', value.status),
+                color: value.color,
+              };
+            },
+          },
+          row: {
+            status: {
+              id: 6,
+              status: 'waiting payment',
+              color: '#000000',
+            },
+          },
+          storeName: 'orders',
+        }),
+      );
+    });
+
+    const visibleStatus = tree.root
+      .findAllByType('Text')
+      .find(node => node.props.children === 'Waiting payment');
+
+    expect(visibleStatus).toBeTruthy();
+    expect(visibleStatus.props.style).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          flex: 1,
+          fontSize: 13,
+          fontWeight: '600',
+        }),
+        {color: '#000000'},
+      ]),
+    );
+    expect(visibleStatus.props.style).not.toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          backgroundColor: expect.any(String),
+        }),
+      ]),
+    );
+    expect(visibleStatus.props.style).not.toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          borderColor: expect.any(String),
+        }),
+      ]),
+    );
+  });
 });

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

@@ -401,6 +401,61 @@ describe('DefaultTable', () => {
     );
   });
 
+  it('renders a custom row actions component with the configured actions width', () => {
+    mockWindowDimensions = {width: 1200, height: 800};
+    mockStores.orders = {
+      actions: {},
+      getters: {
+        columns: [
+          {key: 'id', label: 'ID', isIdentity: true},
+          {key: 'name', label: 'Nome'},
+        ],
+        items: [{id: 12, name: 'Pedido'}],
+        visibleColumns: {},
+      },
+    };
+    const rowActionsComponent = props =>
+      React.createElement('row-actions', props, props.row.name);
+    let tree;
+
+    renderer.act(() => {
+      tree = renderer.create(
+        React.createElement(DefaultTable, {
+          onEditRow: jest.fn(),
+          rowActionsComponent,
+          rowActionsWidth: 180,
+          storeName: 'orders',
+        }),
+      );
+    });
+
+    const rowActions = tree.root.findByType('row-actions');
+    expect(rowActions.props.row).toEqual({id: 12, name: 'Pedido'});
+    expect(rowActions.props.storeName).toBe('orders');
+    expect(typeof rowActions.props.openEdit).toBe('function');
+    expect(rowActions.props.helpers).toEqual(
+      expect.objectContaining({
+        openEdit: expect.any(Function),
+      }),
+    );
+
+    const renderedStyles = [
+      ...tree.root.findAllByType('View'),
+      ...tree.root.findAllByType('TouchableOpacity'),
+    ].map(node => flattenStyle(node.props.style));
+
+    expect(renderedStyles).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          flexBasis: 180,
+          maxWidth: 180,
+          minWidth: 180,
+          width: 180,
+        }),
+      ]),
+    );
+  });
+
   it('keeps only the identity column pinned when row actions are not pinned', () => {
     mockWindowDimensions = {width: 1200, height: 800};
     mockStores.orders = {

package/src/tests/react/components/table/DefaultTable.utils.test.js

@@ -0,0 +1,37 @@
+const {describe, expect, it} = require('@jest/globals');
+
+jest.mock('@store', () => ({
+  getAllStores: () => ({}),
+}));
+
+jest.mock('react-native', () => ({
+  Platform: {
+    select: value => value.web || value.default,
+  },
+  StyleSheet: {
+    create: value => value,
+  },
+}));
+
+jest.mock('@controleonline/ui-common/src/utils/formatter.js', () => ({}));
+jest.mock('@controleonline/ui-common/src/react/utils/dateRangeFilter', () => ({
+  getDateRange: () => ({}),
+}));
+
+const {
+  getColumnMinWidth,
+  getColumnStyle,
+} = require('../../../../react/components/table/DefaultTable.utils');
+
+describe('DefaultTable utils', () => {
+  it('uses column width metadata from the store configuration', () => {
+    expect(getColumnMinWidth({name: 'status', minWidth: 180})).toBe(180);
+    expect(getColumnStyle({name: 'status', minWidth: 180})).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          minWidth: 180,
+        }),
+      ]),
+    );
+  });
+});

package/src/tests/react/inputs/defaultInputUtils.test.js

@@ -1,8 +1,8 @@
-const {describe, expect, it, jest} = require('@jest/globals');
-
-jest.mock('@store', () => ({
-  getAllStores: () => ({}),
-}));
+const {describe, expect, it, jest} = require('@jest/globals');
+
+jest.mock('@store', () => ({
+  getAllStores: () => ({}),
+}));
 
 jest.mock('@controleonline/ui-common/src/utils/formatter.js', () => ({}));
 
@@ -16,7 +16,7 @@ const {
   resolveCellPresentation,
 } = require('../../../react/components/inputs/defaultInputUtils');
 
-describe('defaultInputUtils', () => {
+describe('defaultInputUtils', () => {
   it('deduplicates list options by normalized key', () => {
     const column = {
       formatList(item) {
@@ -100,6 +100,38 @@ describe('defaultInputUtils', () => {
     });
   });
 
+  it('resolves table cell presentation from the column format object', () => {
+    const presentation = resolveCellPresentation({
+      column: {
+        name: 'status',
+        format(value) {
+          return {
+            label: value.status,
+            color: value.color,
+            icon: value.icon,
+          };
+        },
+      },
+      row: {
+        status: {
+          status: 'Preparando',
+          color: '#0EA5E9',
+          icon: 'clock',
+        },
+      },
+      storeName: 'orders',
+    });
+
+    expect(presentation).toEqual({
+      backgroundColor: undefined,
+      borderColor: undefined,
+      color: '#0EA5E9',
+      icon: 'clock',
+      image: undefined,
+      label: 'Preparando',
+    });
+  });
+
   it('builds subtle badge colors from resource colors', () => {
     expect(buildReadPresentationStyles({
       color: '#16A34A',