@archbase/components 3.0.0

package/src/charts/vis-timeline/index.ts

@@ -0,0 +1,36 @@
+/**
+ * ArchbaseVisTimeline - Timeline Component (vis-timeline wrapper)
+ *
+ * Timeline visual avançada baseada em vis-timeline
+ * Suporta grupos, ranges, zoom, pan, e muito mais.
+ */
+
+// Main component
+export { ArchbaseVisTimeline } from './ArchbaseVisTimeline';
+
+// Types
+export type {
+  ArchbaseVisTimelineProps,
+  TimelineItem,
+  TimelineGroup,
+  TimelineItemType,
+  TimelineEvents,
+  TimelineOptions,
+  TimelineZoomOptions,
+  TimelineMoveOptions,
+  TimelineOrientation,
+  TimelineLayout,
+  TimelineDateFormatOptions,
+} from './ArchbaseVisTimeline.types';
+
+// Utils
+export {
+  DEFAULT_TIMELINE_OPTIONS,
+  mergeTimelineOptions,
+  normalizeTimelineItems,
+  normalizeTimelineGroups,
+  normalizeDate,
+  normalizeRange,
+  formatTimelineDate,
+  formatDuration,
+} from './utils/timelineOptions';

package/src/charts/vis-timeline/utils/timelineOptions.ts

@@ -0,0 +1,213 @@
+import type { TimelineOptions, TimelineOrientation, TimelineLayout } from '../ArchbaseVisTimeline.types';
+
+/**
+ * Opções padrão para a timeline
+ */
+export const DEFAULT_TIMELINE_OPTIONS: Partial<TimelineOptions> = {
+  height: '100%',
+  width: '100%',
+  minHeight: 200,
+  orientation: 'bottom',
+  autoResize: true,
+  showCurrentTime: true,
+  showTooltips: true,
+  // @ts-ignore
+  zoomable: true,
+  // @ts-ignore
+  moveable: true,
+  selectable: true,
+  multiselect: true,
+  editable: false,
+  stack: true,
+  locale: 'pt-BR',
+  format: {
+    minorLabels: {
+      millisecond: 'SSS',
+      second: 's',
+      minute: 'HH:mm',
+      hour: 'HH:mm',
+      weekday: 'ddd D',
+      day: 'D',
+      month: 'MMM',
+      year: 'YYYY',
+    },
+    majorLabels: {
+      millisecond: 'HH:mm:ss',
+      second: 'D MMMM HH:mm',
+      minute: 'ddd D MMMM',
+      hour: 'ddd D MMMM',
+      weekday: 'MMMM YYYY',
+      day: 'MMMM YYYY',
+      month: 'YYYY',
+      year: '',
+    },
+  },
+};
+
+/**
+ * Opções por orientação
+ */
+export const ORIENTATION_OPTIONS: Record<TimelineOrientation, Partial<TimelineOptions>> = {
+  bottom: { orientation: 'bottom' },
+  top: { orientation: 'top' },
+  none: { orientation: 'none' },
+  both: { orientation: 'both' },
+};
+
+/**
+ * Opções por layout
+ */
+export const LAYOUT_OPTIONS: Record<TimelineLayout, Partial<TimelineOptions>> = {
+  box: { layout: 'box' },
+  list: { layout: 'list' },
+};
+
+/**
+ * Merge opções customizadas com padrão
+ */
+export function mergeTimelineOptions(
+  custom?: Partial<TimelineOptions>
+): TimelineOptions {
+  return {
+    ...DEFAULT_TIMELINE_OPTIONS,
+    ...custom,
+    format: {
+      ...DEFAULT_TIMELINE_OPTIONS.format,
+      ...(custom?.format || {}),
+    },
+  };
+}
+
+/**
+ * Converte itens para formato vis-timeline
+ */
+export function normalizeTimelineItems<T extends Record<string, any>>(
+  items: T[]
+): Array<T & { start: Date; end?: Date; content: string; type?: string }> {
+  return items.map((item) => ({
+    ...item,
+    start: normalizeDate(item.start),
+    end: item.end ? normalizeDate(item.end) : undefined,
+    content: typeof item.content === 'string' ? item.content : String(item.content),
+  }));
+}
+
+/**
+ * Converte grupos para formato vis-timeline
+ */
+export function normalizeTimelineGroups<T extends Record<string, any>>(
+  groups: T[]
+): Array<T & { content: string }> {
+  return groups.map((group) => ({
+    ...group,
+    content: typeof group.content === 'string' ? group.content : String(group.content),
+  }));
+}
+
+/**
+ * Normaliza data para objeto Date
+ */
+export function normalizeDate(date: Date | string | number): Date {
+  if (date instanceof Date) {
+    return date;
+  }
+  if (typeof date === 'string') {
+    return new Date(date);
+  }
+  if (typeof date === 'number') {
+    return new Date(date);
+  }
+  return new Date();
+}
+
+/**
+ * Converte range para array de datas
+ */
+export function normalizeRange(
+  range?: [Date | string | number, Date | string | number]
+): [Date, Date] | undefined {
+  if (!range) return undefined;
+  return [normalizeDate(range[0]), normalizeDate(range[1])];
+}
+
+/**
+ * Gera opções de cores para timeline
+ */
+export function generateColorOptions(
+  itemColor?: string,
+  groupColor?: string,
+  backgroundColor?: string
+): Partial<TimelineOptions> {
+  const options: any = {};
+
+  if (backgroundColor) {
+    // @ts-ignore
+    options.backgroundColor = backgroundColor;
+  }
+
+  if (itemColor) {
+    // @ts-ignore
+    options.locale = {
+      current: 'Agora',
+    };
+  }
+
+  return options;
+}
+
+/**
+ * Mapeia tipos de itens para tipos vis-timeline
+ */
+export const ITEM_TYPE_MAP = {
+  box: 'box',
+  point: 'point',
+  range: 'range',
+  background: 'background',
+} as const;
+
+/**
+ * Calcula margem apropriada baseado no tipo de item
+ */
+export function calculateItemMargin(type: string = 'box'): { horizontal: number; vertical: number } {
+  const margins: Record<string, { horizontal: number; vertical: number }> = {
+    background: { horizontal: 0, vertical: 0 },
+    box: { horizontal: 10, vertical: 5 },
+    point: { horizontal: 10, vertical: 5 },
+    range: { horizontal: 10, vertical: 5 },
+  };
+
+  return margins[type] || margins.box;
+}
+
+/**
+ * Formata data para exibição
+ */
+export function formatTimelineDate(date: Date, format: 'short' | 'long' = 'short'): string {
+  const options: Intl.DateTimeFormatOptions =
+    format === 'short'
+      ? { day: '2-digit', month: '2-digit', year: 'numeric' }
+      : { day: 'numeric', month: 'long', year: 'numeric', hour: '2-digit', minute: '2-digit' };
+
+  return date.toLocaleDateString('pt-BR', options);
+}
+
+/**
+ * Calcula duração entre duas datas em formato legível
+ */
+export function formatDuration(start: Date, end: Date): string {
+  const diffMs = end.getTime() - start.getTime();
+  const diffSecs = Math.floor(diffMs / 1000);
+  const diffMins = Math.floor(diffSecs / 60);
+  const diffHours = Math.floor(diffMins / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffSecs < 60) {
+    return `${diffSecs}s`;
+  } else if (diffMins < 60) {
+    return `${diffMins}m`;
+  } else if (diffHours < 24) {
+    return `${diffHours}h`;
+  } else {
+    return `${diffDays}d`;
+  }
+}

package/src/datagrid/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAGhE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,8BAA8B,CAAC;AAGzE,cAAc,UAAU,CAAC"}

package/src/datagrid/components/index.tsx

@@ -0,0 +1,14 @@
+// Toolbar components
+export { default as GlobalSearchInput } from './toolbar/global-search-input';
+export { default as GridToolbar } from './toolbar/grid-toolbar';
+
+// Pagination components
+export { default as GridPagination } from './pagination/grid-pagination';
+
+export { ArchbaseItemRender} from "./render/archbase-data-grid-item-renderer";
+export type {ArchbaseItemRenderProps, ArchbaseItemRenderType } from "./render/archbase-data-grid-item-renderer.tsx";
+
+// Re-export types
+export * from '../types';
+
+

package/src/datagrid/components/pagination/grid-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-pagination.d.ts","sourceRoot":"","sources":["grid-pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAyIpD,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/src/datagrid/components/pagination/grid-pagination.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import { Group, Select, Text, ActionIcon, Pagination, Box } from '@mantine/core';
+import { useArchbaseTranslation } from '@archbase/core';
+import { IconChevronLeft, IconChevronRight } from '@tabler/icons-react';
+import { PaginationProps } from '../../types';
+
+/**
+ * Componente de paginação para o grid
+ */
+export const GridPagination: React.FC<PaginationProps> = ({
+  currentPage,
+  pageSize,
+  totalRecords,
+  pageSizeOptions = [10, 20, 30, 50, 100],
+  onPageChange,
+  onPageSizeChange,
+  showPageSizeSelector = true,
+  showNavigationButtons = true,
+  showRecordInfo = true,
+  labels
+}) => {
+  const { t } = useArchbaseTranslation();
+  const tString = (key: string) => String(t(key));
+  
+  // Garantir que os valores sejam números válidos
+  const safePageSize = isNaN(pageSize) || pageSize <= 0 ? 10 : pageSize;
+  const safeTotalRecords = isNaN(totalRecords) || totalRecords < 0 ? 0 : totalRecords;
+  const safeCurrentPage = isNaN(currentPage) || currentPage <= 0 ? 1 : currentPage;
+  
+  // Calcular total de páginas com proteção contra divisão por zero
+  const totalPages = (() => {
+    // Se pageSize for zero ou inválido, retorna 1
+    if (safePageSize <= 0) return 1;
+    
+    // Calcula o número de páginas
+    const calculatedPages = Math.ceil(safeTotalRecords / safePageSize);
+    
+    // Verifica se o resultado é um número finito
+    if (!Number.isFinite(calculatedPages) || calculatedPages <= 0) {
+      return 1; // Se não for finito ou for menor que 1, retorna 1
+    }
+    
+    return calculatedPages;
+  })();
+  
+  // Validar página atual
+  const validatedCurrentPage = Math.max(1, Math.min(safeCurrentPage, totalPages));
+  
+  // Calcular range de registros exibidos com proteção contra valores inválidos
+  const recordRange = (() => {
+    if (safeTotalRecords === 0) {
+      return { start: 0, end: 0 };
+    }
+    const start = Math.min((validatedCurrentPage - 1) * safePageSize + 1, safeTotalRecords);
+    const end = Math.min(validatedCurrentPage * safePageSize, safeTotalRecords);
+    return { start, end };
+  })();
+
+  // Handler para mudança de página
+  const handlePageChange = (newPage: number) => {
+    if (newPage !== validatedCurrentPage) {
+      onPageChange(newPage);
+    }
+  };
+
+  // Handler para mudança do tamanho da página
+  const handlePageSizeChange = (value: string | null) => {
+    if (!value) return;
+    const newSize = parseInt(value, 10);
+    if (!isNaN(newSize) && newSize > 0 && newSize !== safePageSize) {
+      onPageSizeChange(newSize);
+    }
+  };
+
+  return (
+    <Group className="archbase-data-grid-pagination" gap="lg" justify="space-between">
+      {/* Informações sobre registros */}
+      {showRecordInfo && (
+        <Text size="sm" color="dimmed">
+          {safeTotalRecords === 0 ? (
+            tString('archbase:Nenhum registro')
+          ) : (
+            `${recordRange.start}-${recordRange.end} ${labels.of || tString('archbase:de')} ${safeTotalRecords} ${labels.totalRecords || tString('archbase:registros')}`
+          )}
+        </Text>
+      )}
+
+      <Group gap="md">
+        {/* Seletor de tamanho de página */}
+        {showPageSizeSelector && (
+          <Group gap="xs">
+            <Text size="sm" color="dimmed">{labels.pageSize || tString('archbase:Registros por página')}:</Text>
+            <Select
+              size="xs"
+              value={safePageSize.toString()}
+              onChange={handlePageSizeChange}
+              data={pageSizeOptions.map(size => ({
+                value: size.toString(),
+                label: size.toString()
+              }))}
+              styles={{
+                input: {
+                  width: '70px'
+                }
+              }}
+            />
+          </Group>
+        )}
+
+        {/* Navegação de páginas */}
+        {showNavigationButtons && totalPages > 0 && (
+          <Group gap={4}>
+            <ActionIcon
+              size="sm"
+              variant="subtle"
+              disabled={validatedCurrentPage === 1}
+              onClick={() => handlePageChange(validatedCurrentPage - 1)}
+            >
+              <IconChevronLeft size={16} />
+            </ActionIcon>
+
+            <Box style={{ width: 'auto', minWidth: '150px', textAlign: 'center' }}>
+              <Pagination
+                value={validatedCurrentPage}
+                onChange={handlePageChange}
+                total={isFinite(totalPages) ? totalPages : 1}
+                size="sm"
+                radius="xs"
+                withControls={false}
+                siblings={1}
+                boundaries={1}
+              />
+            </Box>
+
+            <ActionIcon
+              size="sm"
+              variant="subtle"
+              disabled={validatedCurrentPage === totalPages}
+              onClick={() => handlePageChange(validatedCurrentPage + 1)}
+            >
+              <IconChevronRight size={16} />
+            </ActionIcon>
+          </Group>
+        )}
+      </Group>
+    </Group>
+  );
+};
+
+export default GridPagination;

package/src/datagrid/components/render/archbase-data-grid-item-renderer.tsx

@@ -0,0 +1,26 @@
+import { Badge, Box } from '@mantine/core';
+import { t } from 'i18next';
+import React from 'react';
+
+export type ArchbaseItemRenderType = {
+	value: any;
+	label: string;
+	color: string;
+};
+
+export interface ArchbaseItemRenderProps {
+	currentValue: string | undefined;
+	values: ArchbaseItemRenderType[];
+}
+
+export function ArchbaseItemRender({ currentValue, values }: ArchbaseItemRenderProps) {
+	const index = values.findIndex((item) => item.value.toString() === currentValue);
+	if (index !== -1) {
+		return (
+			<Box>
+				<Badge color={values[index].color}>{t(values[index].label)}</Badge>
+			</Box>
+		);
+	}
+	return null;
+}

package/src/datagrid/components/toolbar/global-search-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"global-search-input.d.ts","sourceRoot":"","sources":["global-search-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AAOzC;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CA4E9D,CAAC;AAEF,eAAe,iBAAiB,CAAC"}

package/src/datagrid/components/toolbar/global-search-input.tsx

@@ -0,0 +1,118 @@
+import React, { useEffect } from 'react';
+import { TextInput, ActionIcon, useMantineColorScheme } from '@mantine/core';
+import { IconSearch, IconX } from '@tabler/icons-react';
+import { useArchbaseTranslation } from '@archbase/core';
+import { useDebouncedValue } from '@mantine/hooks';
+import { useArchbaseTheme } from '@archbase/core';
+
+/**
+ * Props para o componente de pesquisa global
+ */
+export interface GlobalSearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  onClear: () => void;
+  debounceTime?: number;
+}
+
+/**
+ * Componente para barra de pesquisa global integrado com Mantine
+ * Usa debounce para evitar chamadas excessivas durante a digitação
+ */
+export const GlobalSearchInput: React.FC<GlobalSearchInputProps> = ({
+  value,
+  onChange,
+  onClear,
+  debounceTime = 500 // Valor padrão de debounce (300ms)
+}) => {
+  const { t } = useArchbaseTranslation();
+  const tString = (key: string) => String(t(key));
+  const theme = useArchbaseTheme();
+  const scheme = useMantineColorScheme();
+
+  // Estado interno para o input
+  const [inputValue, setInputValue] = React.useState(value);
+
+  // Flag para indicar que o clear foi chamado intencionalmente
+  // Isso evita que o debounce restaure o valor antigo após o clear
+  const clearIntentionalRef = React.useRef(false);
+
+  // Aplicar debounce ao valor digitado
+  const [debouncedValue] = useDebouncedValue(inputValue, debounceTime);
+
+  // Atualizar o valor interno quando o valor externo muda
+  React.useEffect(() => {
+    setInputValue(value);
+  }, [value]);
+
+  // Propagar o valor com debounce para o callback
+  React.useEffect(() => {
+    // Se o clear foi intencional e o inputValue está vazio, não fazer nada
+    // Isso evita que o debounce com valor antigo sobrescreva o clear
+    if (clearIntentionalRef.current && inputValue === '') {
+      // Se o debouncedValue também está vazio, resetar a flag
+      if (debouncedValue === '') {
+        clearIntentionalRef.current = false;
+      }
+      return;
+    }
+
+    if (debouncedValue !== value) {
+      onChange(debouncedValue);
+    }
+  }, [debouncedValue, onChange, value, inputValue]);
+
+  // Manipular mudança no input
+  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    clearIntentionalRef.current = false; // Reset flag ao digitar
+    setInputValue(event.currentTarget.value);
+  };
+
+  // Manipular limpar input
+  const handleClear = () => {
+    console.log('[GlobalSearchInput] handleClear chamado');
+    clearIntentionalRef.current = true; // Marcar que o clear foi intencional
+    setInputValue('');
+    onClear();
+  };
+
+  // Renderizar botão de limpar quando houver texto
+  const rightSection = inputValue ? (
+    <ActionIcon
+      onClick={handleClear}
+      variant="transparent"
+      color="gray"
+      aria-label="Limpar busca"
+    >
+      <IconX size={16} />
+    </ActionIcon>
+  ) : null;
+
+  return (
+    <TextInput
+      placeholder={tString('Buscar...')}
+      value={inputValue}
+      onChange={handleInputChange}
+      leftSection={<IconSearch size={16} color={theme.colors.gray[6]} />}
+      rightSection={rightSection}
+      styles={(theme) => ({
+        root: {
+          width: '300px',
+        },
+        input: {
+          '&:focus': {
+            borderColor: theme.colors[theme.primaryColor][6],
+          },
+          '&::placeholder': {
+            color: scheme.colorScheme === 'dark' ? theme.colors.gray[5] : theme.colors.gray[6],
+          },
+          backgroundColor: scheme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.white,
+          color: scheme.colorScheme === 'dark' ? theme.colors.gray[2] : theme.colors.dark[9],
+        },
+      })}
+      size="sm"
+    />
+  );
+};
+
+export default GlobalSearchInput;

package/src/datagrid/components/toolbar/grid-toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-toolbar.d.ts","sourceRoot":"","sources":["grid-toolbar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAOxC,UAAU,gBAAgB;IACxB,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,oBAAoB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,uBAAuB,CAAC,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;IAChD,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IAC/C,kBAAkB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACtC;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+ElD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/src/datagrid/components/toolbar/grid-toolbar.tsx

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { Group, ActionIcon, Tooltip, Menu } from '@mantine/core';
+import { IconRefresh, IconDownload, IconPrinter, IconSearch } from '@tabler/icons-react';
+import { useArchbaseTranslation } from '@archbase/core';
+import { useArchbaseTheme } from '@archbase/core';
+
+
+interface GridToolbarProps {
+  onRefresh: () => void;
+  onExport: () => void;
+  onPrint: () => void;
+  globalFilterValue: string;
+  onGlobalFilterChange: (value: string) => void;
+  renderAdditionalActions?: () => React.ReactNode;
+  enableGlobalFilter?: boolean;
+  allowExportData?: boolean;
+  allowPrintData?: boolean;
+  toolbarAlignment?: 'left' | 'right' | 'center';
+  toolbarLeftContent?: React.ReactNode;
+}
+
+/**
+ * Componente para a barra de ferramentas do grid
+ */
+export const GridToolbar: React.FC<GridToolbarProps> = ({
+  onRefresh,
+  onExport,
+  onPrint,
+  globalFilterValue,
+  onGlobalFilterChange,
+  renderAdditionalActions,
+  enableGlobalFilter = true,
+  allowExportData = true,
+  allowPrintData = true,
+  toolbarAlignment = 'right', // Mantido como 'right' por padrão
+  toolbarLeftContent
+}) => {
+  const { t } = useArchbaseTranslation();
+  const theme = useArchbaseTheme();
+  const [showExportMenu, setShowExportMenu] = useState(false);
+
+  // Limpar o filtro global
+  const handleClearGlobalFilter = () => {
+    onGlobalFilterChange('');
+  };
+
+  // Botões de ação
+  const renderActionButtons = () => (
+    <Group gap="2">
+      <Tooltip label={`${t('Atualizar')}`}>
+        <ActionIcon
+          size="lg"
+          onClick={onRefresh}
+          color={theme.primaryColor}
+          variant="filled"
+        >
+          <IconRefresh size={20} />
+        </ActionIcon>
+      </Tooltip>
+
+      {allowExportData && (
+        <Menu opened={showExportMenu} onChange={setShowExportMenu}>
+          <Menu.Target>
+            <Tooltip label={`${t('Exportar')}`}>
+              <ActionIcon
+                size="lg"
+                color={theme.primaryColor}
+                variant="filled"
+              >
+                <IconDownload size={20} />
+              </ActionIcon>
+            </Tooltip>
+          </Menu.Target>
+          <Menu.Dropdown>
+            <Menu.Item onClick={onExport}>{`${t('Exportar')}`}</Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      )}
+
+      {allowPrintData && (
+        <Tooltip label={`${t('Imprimir')}`}>
+          <ActionIcon
+            size="lg"
+            onClick={onPrint}
+            color={theme.primaryColor}
+            variant="filled"
+          >
+            <IconPrinter size={20} />
+          </ActionIcon>
+        </Tooltip>
+      )}
+    </Group>
+  );
+
+  return (
+    <Group gap="md">
+      {/* Renderizamos os botões independentemente do alinhamento */}
+      {renderActionButtons()}
+
+      {/* Ações customizadas */}
+      {renderAdditionalActions && renderAdditionalActions()}
+    </Group>
+  );
+};
+
+export default GridToolbar;

package/src/datagrid/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,eAAe,EACf,uBAAuB,EACvB,uBAAuB,EACvB,iBAAiB,EAClB,MAAM,0BAA0B,CAAC;AAGlC,OAAO,EACL,WAAW,EACX,KAAK,iBAAiB,EACvB,MAAM,iBAAiB,CAAC;AAGzB,OAAO,EACL,kCAAkC,EACnC,MAAM,kCAAkC,CAAC"}