@archbase/components 4.0.21 → 4.0.23

package/dist/viewers/index.d.ts

@@ -4,8 +4,6 @@ export { ArchbasePDFAnnotations, ArchbasePDFAnnotationsList, } from './ArchbaseP
 export type { ArchbasePDFViewerProps, PDFSource, PDFAnnotation, PDFRenderMode, PDFTextLayerMode, PDFToolbarActions, } from './ArchbasePDFViewer.types';
 export { ArchbaseXmlViewer } from './ArchbaseXmlViewer';
 export type { ArchbaseXmlViewerProps } from './ArchbaseXmlViewer';
-export { ArchbasePdfBuilder } from './ArchbasePdfBuilder';
-export type { ArchbasePdfBuilderProps, ArchbasePdfBuilderRef } from './ArchbasePdfBuilder';
 export { ArchbaseDocViewer } from './ArchbaseDocViewer';
 export type { ArchbaseDocViewerProps } from './ArchbaseDocViewer';
 export * from './file-preview';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@archbase/components",
-  "version": "4.0.21",
+  "version": "4.0.23",
   "description": "UI Components for Archbase React v3 - Form editors, data visualization, and business components",
   "author": "Edson Martins <edsonmartins2005@gmail.com>",
   "license": "MIT",
@@ -42,10 +42,6 @@
     "@fortune-sheet/react": "^1.0.4",
     "@gfazioli/mantine-list-view-table": "^2.2.0",
     "@mui/x-data-grid": "^7.28.3",
-    "@pdfme/common": "^5.3.6",
-    "@pdfme/generator": "^5.3.6",
-    "@pdfme/schemas": "^5.3.6",
-    "@pdfme/ui": "^5.3.6",
     "@rehooks/component-size": "^1.0.3",
     "ag-grid-community": "^35.3.0",
     "ag-grid-react": "^35.3.0",
@@ -122,9 +118,9 @@
     "vis-timeline": "^7.7.3",
     "xlsx": "^0.18.5",
     "yet-another-react-lightbox": "^3.21.0",
-    "@archbase/core": "4.0.21",
-    "@archbase/data": "4.0.21",
-    "@archbase/layout": "4.0.21"
+    "@archbase/core": "4.0.23",
+    "@archbase/data": "4.0.23",
+    "@archbase/layout": "4.0.23"
   },
   "devDependencies": {
     "@types/d3": "^7.4.3",

package/src/datagrid/main/archbase-data-grid.tsx

@@ -757,7 +757,11 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
   )
 
   // Configurar estilos personalizados para o grid
-  const getThemedStyles = () => {
+  // Memoizado para evitar regenerar o objeto sx massivo a cada render — sem isso,
+  // o emotion regera centenas de classes CSS sempre que o pai re-renderiza, o que
+  // torna o scroll lento porque cada linha que entra/sai do viewport durante a
+  // virtualização aciona o pipeline de styling pesado.
+  const themedStyles = useMemo(() => {
     return {
       root: {
         height: '100%', // Garante que o DataGrid ocupe toda a altura do container
@@ -1044,7 +1048,23 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
         }
       }
     }
-  }
+  }, [
+    theme,
+    colorScheme,
+    withBorder,
+    withColumnBorders,
+    cellPadding,
+    striped,
+    highlightOnHover,
+    fontSize
+  ])
+
+  // Ref estável para getRowId — evita que o MUI DataGrid reconstrua o mapeamento
+  // interno de linhas a cada render, o que invalida virtualização e performance de scroll.
+  const stableGetRowId = useCallback(
+    (row: any) => safeGetRowId(row, getRowId) || '',
+    [getRowId]
+  )
 
   // Calcular a altura total da grid, incluindo os painéis de detalhes
   const gridHeight = useMemo(() => {
@@ -1614,8 +1634,8 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
           onRowSelectionModelChange={handleSelectionModelChange}
           onCellDoubleClick={handleCellDoubleClick}
           onColumnVisibilityModelChange={setColumnVisibilityModel}
-          getRowId={(row) => safeGetRowId(row, getRowId) || ''}
-          sx={getThemedStyles().root}
+          getRowId={stableGetRowId}
+          sx={themedStyles.root}
           disableColumnFilter={!allowColumnFilters}
           disableColumnMenu={true}
           hideFooter={hideFooter}

package/src/viewers/index.ts

@@ -17,10 +17,6 @@ export type {
 export { ArchbaseXmlViewer } from './ArchbaseXmlViewer';
 export type { ArchbaseXmlViewerProps } from './ArchbaseXmlViewer';
 
-// PDF Builder (pdfme)
-export { ArchbasePdfBuilder } from './ArchbasePdfBuilder';
-export type { ArchbasePdfBuilderProps, ArchbasePdfBuilderRef } from './ArchbasePdfBuilder';
-
 // Document Viewer
 export { ArchbaseDocViewer } from './ArchbaseDocViewer';
 export type { ArchbaseDocViewerProps } from './ArchbaseDocViewer';

package/dist/viewers/ArchbasePdfBuilder.d.ts

@@ -1,53 +0,0 @@
-import { CSSProperties } from 'react';
-import { Designer, Form, Viewer } from '@pdfme/ui';
-import { Template, Font } from '@pdfme/common';
-export interface ArchbasePdfBuilderRef {
-    /** Generate a PDF from the current template + inputs and return its bytes. */
-    generatePdf(): Promise<Uint8Array>;
-    /** Return the current pdfme instance (Designer | Form | Viewer) if available. */
-    getInstance(): Designer | Form | Viewer | null;
-}
-export interface ArchbasePdfBuilderProps<T = unknown> {
-    /** Which pdfme UI to render. */
-    mode?: 'designer' | 'form' | 'viewer';
-    /** The pdfme template object. */
-    template: Template;
-    /**
-     * Optional Archbase DataSource – used in `form` mode to populate inputs
-     * from the current record.
-     */
-    dataSource?: any;
-    /** Field path inside the data source record. */
-    dataField?: string;
-    /**
-     * Standalone inputs for `form` / `viewer` mode.
-     * Each element maps schema field names to string values.
-     */
-    inputs?: Record<string, string>[];
-    /** Fired whenever the designer changes the template. */
-    onTemplateChange?: (template: Template) => void;
-    /** Fired when `generatePdf` completes. */
-    onGenerate?: (pdf: Uint8Array) => void;
-    /**
-     * Additional pdfme schema plugins.
-     * Defaults to `[text, image, barcodes]`.
-     */
-    plugins?: Record<string, any>;
-    /** Custom font configuration forwarded to pdfme. */
-    font?: Font;
-    /** Container height. */
-    height?: string | number;
-    /** Container width. */
-    width?: string | number;
-    /** Optional label rendered above the builder (uses Mantine Input.Wrapper). */
-    label?: string;
-    /** Optional description rendered below the label. */
-    description?: string;
-    /** Extra inline styles applied to the outer wrapper. */
-    style?: CSSProperties;
-    /** Extra CSS class name applied to the outer wrapper. */
-    className?: string;
-}
-export declare const ArchbasePdfBuilder: <T = unknown>(props: ArchbasePdfBuilderProps<T> & {
-    ref?: React.Ref<ArchbasePdfBuilderRef>;
-}) => React.ReactElement | null;

package/src/viewers/ArchbasePdfBuilder.tsx

@@ -1,291 +0,0 @@
-import {
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-  useRef,
-  useState,
-  useCallback,
-  type CSSProperties,
-} from 'react';
-import { Box, Input } from '@mantine/core';
-import { Designer, Form, Viewer } from '@pdfme/ui';
-import type { Template, Font } from '@pdfme/common';
-import { text, image, barcodes } from '@pdfme/schemas';
-import { generate } from '@pdfme/generator';
-import { useArchbaseV1V2Compatibility } from '@archbase/data';
-
-// ---------------------------------------------------------------------------
-// Public ref interface
-// ---------------------------------------------------------------------------
-
-export interface ArchbasePdfBuilderRef {
-  /** Generate a PDF from the current template + inputs and return its bytes. */
-  generatePdf(): Promise<Uint8Array>;
-  /** Return the current pdfme instance (Designer | Form | Viewer) if available. */
-  getInstance(): Designer | Form | Viewer | null;
-}
-
-// ---------------------------------------------------------------------------
-// Props
-// ---------------------------------------------------------------------------
-
-export interface ArchbasePdfBuilderProps<T = unknown> {
-  /** Which pdfme UI to render. */
-  mode?: 'designer' | 'form' | 'viewer';
-
-  /** The pdfme template object. */
-  template: Template;
-
-  /**
-   * Optional Archbase DataSource – used in `form` mode to populate inputs
-   * from the current record.
-   */
-  dataSource?: any;
-  /** Field path inside the data source record. */
-  dataField?: string;
-
-  /**
-   * Standalone inputs for `form` / `viewer` mode.
-   * Each element maps schema field names to string values.
-   */
-  inputs?: Record<string, string>[];
-
-  /** Fired whenever the designer changes the template. */
-  onTemplateChange?: (template: Template) => void;
-
-  /** Fired when `generatePdf` completes. */
-  onGenerate?: (pdf: Uint8Array) => void;
-
-  /**
-   * Additional pdfme schema plugins.
-   * Defaults to `[text, image, barcodes]`.
-   */
-  plugins?: Record<string, any>;
-
-  /** Custom font configuration forwarded to pdfme. */
-  font?: Font;
-
-  /** Container height. */
-  height?: string | number;
-  /** Container width. */
-  width?: string | number;
-
-  /** Optional label rendered above the builder (uses Mantine Input.Wrapper). */
-  label?: string;
-  /** Optional description rendered below the label. */
-  description?: string;
-
-  /** Extra inline styles applied to the outer wrapper. */
-  style?: CSSProperties;
-  /** Extra CSS class name applied to the outer wrapper. */
-  className?: string;
-}
-
-// ---------------------------------------------------------------------------
-// Default plugins helper
-// ---------------------------------------------------------------------------
-
-const DEFAULT_PLUGINS: Record<string, any> = { Text: text, Image: image, ...barcodes };
-
-// ---------------------------------------------------------------------------
-// Component
-// ---------------------------------------------------------------------------
-
-function ArchbasePdfBuilderInner<T = unknown>(
-  {
-    mode = 'designer',
-    template,
-    dataSource,
-    dataField,
-    inputs: inputsProp,
-    onTemplateChange,
-    onGenerate,
-    plugins,
-    font,
-    height = '100vh',
-    width = '100%',
-    label,
-    description,
-    style,
-    className,
-  }: ArchbasePdfBuilderProps<T>,
-  ref: React.Ref<ArchbasePdfBuilderRef>,
-) {
-  // ---- Container ref ----
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // ---- pdfme instance ----
-  const instanceRef = useRef<Designer | Form | Viewer | null>(null);
-
-  // ---- Keep latest template in a ref so callbacks always see current value ----
-  const templateRef = useRef<Template>(template);
-  templateRef.current = template;
-
-  // ---- DataSource integration (form mode) ----
-  const { currentValue: dsValue, loadDataSourceFieldValue } =
-    useArchbaseV1V2Compatibility<Record<string, string>[] | undefined>(
-      'ArchbasePdfBuilder',
-      dataSource,
-      dataField,
-      undefined,
-    );
-
-  useEffect(() => {
-    if (dataSource && dataField) {
-      loadDataSourceFieldValue();
-    }
-  }, [dataSource, dataField, loadDataSourceFieldValue]);
-
-  // Resolve inputs: prop takes precedence, then data-source value, then empty.
-  const resolvedInputs: Record<string, string>[] =
-    inputsProp ?? dsValue ?? [{}];
-
-  // ---- Merged plugins ----
-  const mergedPlugins = plugins
-    ? { ...DEFAULT_PLUGINS, ...plugins }
-    : DEFAULT_PLUGINS;
-
-  // ---- Initialise / re-create pdfme instance ----
-  useEffect(() => {
-    if (!containerRef.current) return;
-
-    // Destroy previous instance
-    if (instanceRef.current) {
-      instanceRef.current.destroy();
-      instanceRef.current = null;
-    }
-
-    const domContainer = containerRef.current;
-
-    const commonOpts: any = {
-      domContainer,
-      template,
-      plugins: mergedPlugins,
-      ...(font ? { options: { font } } : {}),
-    };
-
-    try {
-      if (mode === 'designer') {
-        const designer = new Designer(commonOpts);
-
-        designer.onChangeTemplate((updated: Template) => {
-          templateRef.current = updated;
-          onTemplateChange?.(updated);
-        });
-
-        instanceRef.current = designer;
-      } else if (mode === 'form') {
-        const form = new Form({
-          ...commonOpts,
-          inputs: resolvedInputs,
-        });
-
-        instanceRef.current = form;
-      } else {
-        // viewer
-        const viewer = new Viewer({
-          ...commonOpts,
-          inputs: resolvedInputs,
-        });
-
-        instanceRef.current = viewer;
-      }
-    } catch (err) {
-      console.error('[ArchbasePdfBuilder] Failed to initialise pdfme:', err);
-    }
-
-    return () => {
-      if (instanceRef.current) {
-        instanceRef.current.destroy();
-        instanceRef.current = null;
-      }
-    };
-    // We intentionally re-create when mode or template identity changes.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [mode, template, font]);
-
-  // ---- Update inputs on form/viewer when they change ----
-  useEffect(() => {
-    const inst = instanceRef.current;
-    if (!inst) return;
-    if (mode === 'form' || mode === 'viewer') {
-      try {
-        (inst as Form | Viewer).setInputs(resolvedInputs);
-      } catch {
-        // instance may not be ready yet
-      }
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [resolvedInputs, mode]);
-
-  // ---- Imperative handle ----
-  useImperativeHandle(
-    ref,
-    () => ({
-      async generatePdf(): Promise<Uint8Array> {
-        const currentTemplate = templateRef.current;
-        let currentInputs = resolvedInputs;
-
-        // In form mode we can grab the latest user-edited inputs
-        if (mode === 'form' && instanceRef.current) {
-          try {
-            currentInputs = (instanceRef.current as Form).getInputs();
-          } catch {
-            // fallback to prop inputs
-          }
-        }
-
-        const pdf = await generate({
-          template: currentTemplate,
-          inputs: currentInputs,
-          plugins: mergedPlugins,
-          ...(font ? { options: { font } } : {}),
-        });
-
-        onGenerate?.(pdf);
-        return pdf;
-      },
-
-      getInstance() {
-        return instanceRef.current;
-      },
-    }),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [mode, font, resolvedInputs],
-  );
-
-  // ---- Render ----
-  const content = (
-    <Box
-      ref={containerRef}
-      style={{
-        width: typeof width === 'number' ? `${width}px` : width,
-        height: typeof height === 'number' ? `${height}px` : height,
-        ...style,
-      }}
-      className={className}
-    />
-  );
-
-  if (label || description) {
-    return (
-      <Input.Wrapper label={label} description={description}>
-        {content}
-      </Input.Wrapper>
-    );
-  }
-
-  return content;
-}
-
-// ---------------------------------------------------------------------------
-// Forward-ref wrapper that preserves the generic parameter
-// ---------------------------------------------------------------------------
-
-export const ArchbasePdfBuilder = forwardRef(ArchbasePdfBuilderInner) as <
-  T = unknown,
->(
-  props: ArchbasePdfBuilderProps<T> & { ref?: React.Ref<ArchbasePdfBuilderRef> },
-) => React.ReactElement | null;
-
-(ArchbasePdfBuilder as any).displayName = 'ArchbasePdfBuilder';