@controleonline/ui-default 1.0.266 → 1.0.268

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

@@ -16,15 +16,14 @@ const styles = StyleSheet.create({
     flex: 1,
     width: '100%',
     minHeight: 0,
-    borderWidth: 1,
-    borderRadius: 10,
-    overflow: 'visible',
+    borderRadius: 8,
+    overflow: 'hidden',
     position: 'relative',
   },
   toolbar: {
-    minHeight: 36,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
+    minHeight: 52,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
     borderBottomWidth: 1,
     flexDirection: 'row',
     flexWrap: 'nowrap',
@@ -51,7 +50,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'nowrap',
     alignItems: 'center',
-    gap: 6,
+    gap: 8,
     flexShrink: 0,
     marginLeft: 'auto',
   },
@@ -76,8 +75,8 @@ const styles = StyleSheet.create({
     marginLeft: 0,
   },
   toolbarSearch: {
-    width: 190,
-    maxWidth: 220,
+    width: 260,
+    maxWidth: 360,
     flexShrink: 1,
   },
   toolbarSearchButton: {
@@ -111,10 +110,10 @@ const styles = StyleSheet.create({
     fontWeight: '900',
   },
   toolbarButton: {
-    minWidth: 28,
-    height: 28,
-    borderRadius: 14,
-    paddingHorizontal: 7,
+    minWidth: 36,
+    height: 36,
+    borderRadius: 8,
+    paddingHorizontal: 10,
     borderWidth: 1,
     flexDirection: 'row',
     alignItems: 'center',
@@ -124,8 +123,8 @@ const styles = StyleSheet.create({
   toolbarButtonActive: {
   },
   toolbarAddButton: {
-    minWidth: 30,
-    width: 30,
+    minWidth: 36,
+    width: 36,
     paddingHorizontal: 0,
   },
   floatingAddButton: {
@@ -283,8 +282,8 @@ const styles = StyleSheet.create({
     minWidth: '100%',
     minHeight: 0,
   },
-  headerRow: {
-    minHeight: 34,
+  headerRow: {
+    minHeight: 40,
     width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
@@ -292,8 +291,8 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: '#E2E8F0',
   },
-  filterRow: {
-    minHeight: 40,
+  filterRow: {
+    minHeight: 46,
     width: '100%',
     flexDirection: 'row',
     alignItems: 'stretch',
@@ -301,25 +300,24 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: '#E2E8F0',
   },
-  row: {
-    minHeight: 44,
+  row: {
+    minHeight: 48,
     width: '100%',
     flexDirection: 'row',
     alignItems: 'stretch',
     borderBottomWidth: 1,
     borderBottomColor: '#EEF2F7',
   },
-  cell: {
-    minWidth: 118,
-    flexBasis: 118,
+  cell: {
+    minWidth: 118,
+    flexBasis: 118,
     flexGrow: 1,
     flexShrink: 0,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    justifyContent: 'center',
-    borderRightWidth: 1,
-    borderRightColor: '#EEF2F7',
-  },
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    justifyContent: 'center',
+    borderRightWidth: 0,
+  },
   identityCell: {
     minWidth: 76,
     flexBasis: 76,
@@ -377,13 +375,12 @@ const styles = StyleSheet.create({
     flexBasis: 132,
     flexGrow: 0.9,
   },
-  headerText: {
-    color: '#64748B',
-    fontSize: 10,
-    fontWeight: '900',
-    letterSpacing: 0.35,
-    textTransform: 'uppercase',
-  },
+  headerText: {
+    fontSize: 11,
+    fontWeight: '800',
+    letterSpacing: 0,
+    textTransform: 'uppercase',
+  },
   sortableHeader: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -404,11 +401,10 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: '700',
   },
-  cellText: {
-    color: '#0F172A',
-    fontSize: 12,
-    fontWeight: '700',
-  },
+  cellText: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
   mutedCellText: {
     color: '#94A3B8',
   },
@@ -449,9 +445,11 @@ const styles = StyleSheet.create({
   },
   rowActionsGroup: {
     flexDirection: 'row',
+    flexWrap: 'wrap',
     alignItems: 'center',
     justifyContent: 'center',
     gap: 6,
+    width: '100%',
   },
   iconButton: {
     width: 28,
@@ -491,23 +489,30 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     width: '100%',
   },
-  cardItem: {
-    position: 'relative',
-  },
+  cardItem: {
+    position: 'relative',
+  },
+  cardItemWithActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  cardContent: {
+    flex: 1,
+    minWidth: 0,
+  },
   cardActions: {
-    position: 'absolute',
-    right: 10,
-    bottom: 10,
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'flex-end',
     gap: 6,
+    flexShrink: 0,
   },
   cardActionGroup: {
-    position: 'absolute',
-    right: 8,
-    top: 8,
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'flex-end',
+    alignSelf: 'flex-end',
     gap: 6,
   },
   defaultCard: {

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 ? (
@@ -81,15 +90,24 @@ const DefaultTableCards = ({ storeName }) => {
 
     if (typeof configs.renderCard === 'function') {
       return (
-        <View key={row?.['@id'] || row?.id} style={[styles.cardItem, rowStyleValue]}>
-          {configs.renderCard({
-            item: row,
-            openEdit: () => configs.onEditRow?.(row),
-            openRow: hasRowPress ? () => configs.onRowPress(row) : null,
-            renderField,
-            renderValue,
-            row,
-          })}
+        <View
+          key={row?.['@id'] || row?.id}
+          style={[
+            styles.cardItem,
+            hasRowActions ? styles.cardItemWithActions : null,
+            rowStyleValue,
+          ]}
+        >
+          <View style={styles.cardContent}>
+            {configs.renderCard({
+              item: row,
+              openEdit: () => configs.onEditRow?.(row),
+              openRow: hasRowPress ? () => configs.onRowPress(row) : null,
+              renderField,
+              renderValue,
+              row,
+            })}
+          </View>
           {hasRowActions ? (
             <View style={styles.cardActions}>
               {customRowActions}

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

@@ -124,7 +124,16 @@ const DefaultTableFooter = ({ storeName }) => {
   }
 
   return (
-    <View style={[styles.footerBar, { backgroundColor: tableFooterBackgroundColor, borderTopColor: tableFooterBorderColor }]}>
+    <View
+      style={[
+        styles.footerBar,
+        {
+          backgroundColor: tableFooterBackgroundColor,
+          borderTopColor: tableFooterBorderColor,
+          borderTopWidth: tableFooterBorderColor ? 1 : 0,
+        },
+      ]}
+    >
       {summaryEntries.length > 0 ? (
         <View style={styles.footerSummaryList}>
           {summaryEntries.map(entry => (

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

@@ -0,0 +1,43 @@
+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)) {
+    const RowActionsComponent = component;
+
+    return <RowActionsComponent {...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,
@@ -23,7 +27,7 @@ import useDefaultTableTheme from './useDefaultTableTheme';
 const DefaultTableRows = ({ storeName }) => {
   const store = useStore(storeName);
   const configs = store?.getters?.configs || {};
-  const { palette, resolvedAccentColor, themeTokens } = useDefaultTableTheme();
+  const { palette, resolvedAccentColor, tableBorderColors, themeTokens } = useDefaultTableTheme();
   const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
   const visibleColumns = store?.getters?.visibleColumns || {};
   const tableColumns = columns.filter(
@@ -38,7 +42,8 @@ const DefaultTableRows = ({ storeName }) => {
   const emptyStateLabel = isLoading
     ? global.t?.t(storeName, 'label', 'loading')
     : global.t?.t(storeName, 'label', 'empty');
-  const tableBorderColor = palette.border;
+  const tableBorderColor = tableBorderColors.rowBorderColor;
+  const tableHeaderBorderColor = tableBorderColors.headerBorderColor || tableBorderColor;
   const tableEvenColor = themeTokens.listItemEvenRow || themeTokens['bg-even-light'] || palette.background;
   const tableHeaderColor = themeTokens['bg-headers-light'] || resolvedAccentColor;
   const tableMutedColor = palette.textSecondary;
@@ -47,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,
@@ -128,8 +133,12 @@ const DefaultTableRows = ({ storeName }) => {
       <RowComponent
         key={getRowKey(row)}
         style={[
-          styles.row,
-          { backgroundColor: rowBackgroundColor, borderBottomColor: tableBorderColor },
+          styles.row,
+          {
+            backgroundColor: rowBackgroundColor,
+            borderBottomColor: tableBorderColor,
+            borderBottomWidth: tableBorderColor ? 1 : 0,
+          },
           rowStyleValue,
         ]}
         {...rowPressProps}
@@ -174,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 }]}
@@ -209,7 +224,16 @@ const DefaultTableRows = ({ storeName }) => {
         contentContainerStyle={styles.horizontalScrollContent}
       >
         <View style={styles.content}>
-          <View style={[styles.headerRow, { backgroundColor: tableHeaderColor, borderBottomColor: tableBorderColor }]}>
+          <View
+            style={[
+              styles.headerRow,
+              {
+                backgroundColor: tableHeaderColor,
+                borderBottomColor: tableHeaderBorderColor,
+                borderBottomWidth: tableHeaderBorderColor ? 1 : 0,
+              },
+            ]}
+          >
             {tableColumns.map(column => {
               const fieldName = getColumnKey(column);
               const label = formatStoreColumnLabel({
@@ -267,7 +291,16 @@ const DefaultTableRows = ({ storeName }) => {
             ) : null}
           </View>
           {hasColumnFilters ? (
-            <View style={[styles.filterRow, { backgroundColor: tableHeaderColor, borderBottomColor: tableBorderColor }]}>
+            <View
+              style={[
+                styles.filterRow,
+                {
+                  backgroundColor: tableHeaderColor,
+                  borderBottomColor: tableHeaderBorderColor,
+                  borderBottomWidth: tableHeaderBorderColor ? 1 : 0,
+                },
+              ]}
+            >
               {tableColumns.map(column => {
                 const fieldName = getColumnKey(column);
 

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

@@ -20,13 +20,15 @@ const DefaultTableToolbar = ({ storeName }) => {
   const showTotalItemsInCompactToolbar = configs.showTotalItemsInCompactToolbar === true;
   const showTotalItemsInFooter = configs.showTotalItemsInFooter !== false;
   const toolbarActions = Array.isArray(configs.toolbarActions) ? configs.toolbarActions : [];
-  const { toolbarColors } = useDefaultTableTheme();
+  const { tableBorderColors, toolbarColors } = useDefaultTableTheme();
   const {
     backgroundColor: toolbarBackgroundColor,
     borderColor: toolbarBorderColor,
     countBackgroundColor: toolbarCountBackgroundColor,
     countTextColor: toolbarCountTextColor,
   } = toolbarColors;
+  const resolvedToolbarBorderColor =
+    tableBorderColors.toolbarBorderColor || toolbarBorderColor;
   const storeTotalItems = store?.getters?.totalItems;
   const resolvedTotalItems = storeTotalItems;
   const totalItemsNumber = Number(resolvedTotalItems);
@@ -63,7 +65,11 @@ const DefaultTableToolbar = ({ storeName }) => {
       style={[
         styles.toolbar,
         shouldRenderCompactToolbarTotalItems ? styles.toolbarWithCompactTotal : null,
-        { borderBottomColor: toolbarBorderColor, backgroundColor: toolbarBackgroundColor },
+        {
+          borderBottomColor: resolvedToolbarBorderColor,
+          borderBottomWidth: resolvedToolbarBorderColor ? 1 : 0,
+          backgroundColor: toolbarBackgroundColor,
+        },
       ]}
     >
       {shouldRenderCompactToolbarTotalItems ? (

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

@@ -1,20 +1,69 @@
-import { useMemo } from 'react';
-import { useStore } from '@store';
-
-const useDefaultTableTheme = (accentColor = null) => {
-  const themeStore = useStore('theme');
-  const themeColors = themeStore.getters.colors;
-  const themeTokens = useMemo(
-    () => ({ ...themeColors }),
-    [themeColors],
+import { useMemo } from 'react';
+import { useStore } from '@store';
+
+const firstThemeToken = (themeColors, keys) =>
+  keys.map(key => themeColors?.[key]).find(Boolean);
+
+const useDefaultTableTheme = (accentColor = null) => {
+  const themeStore = useStore('theme');
+  const rawThemeColors = themeStore?.getters?.colors || {};
+  const themeColors = useMemo(
+    () => ({ ...rawThemeColors }),
+    [rawThemeColors],
+  );
+  const themeTokens = useMemo(
+    () => ({ ...themeColors }),
+    [themeColors],
   );
-  const palette = themeColors;
-  const resolvedAccentColor = accentColor ?? themeColors.primary;
-
-  return {
-    palette,
-    resolvedAccentColor,
-    themeColors,
+  const palette = themeColors;
+  const resolvedAccentColor = accentColor ?? themeColors.primary;
+  const tableBorderColors = {
+    containerBorderColor: firstThemeToken(themeColors, [
+      'tableContainerBorder',
+      'tableBorder',
+      'tableHeaderBorder',
+      'tableToolbarBorder',
+      'cardBorder',
+      'listItemBorder',
+      'dividerBorder',
+      'dividerBackground',
+      'inputBorder',
+      'panelBorder',
+      'border',
+    ]),
+    headerBorderColor: firstThemeToken(themeColors, [
+      'tableHeaderBorder',
+      'tableToolbarBorder',
+      'tableBorder',
+      'dividerBorder',
+      'dividerBackground',
+      'listItemBorder',
+      'border',
+    ]),
+    rowBorderColor: firstThemeToken(themeColors, [
+      'tableRowBorder',
+      'listItemBorder',
+      'dividerBorder',
+      'dividerBackground',
+      'tableBorder',
+      'border',
+    ]),
+    toolbarBorderColor: firstThemeToken(themeColors, [
+      'tableToolbarBorder',
+      'tableHeaderBorder',
+      'toolbarBorder',
+      'tableBorder',
+      'dividerBorder',
+      'dividerBackground',
+      'border',
+    ]),
+  };
+
+  return {
+    palette,
+    resolvedAccentColor,
+    tableBorderColors,
+    themeColors,
     themeTokens,
     checkboxBorderColor: themeColors.checkboxBorder,
     checkboxSelectedMarkColor: themeColors.checkboxSelectedMark,