@archbase/components 3.0.0 → 3.0.3

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

@@ -156,12 +156,14 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
     csvOptions,
     toolbarAlignment = 'right',
     positionActionsColumn = 'first',
+    actionsColumnWidth = 60,
     toolbarLeftContent,
     columnAutoWidth = false,
     rowHeight = 52,
     paginationLabels,
     onExport,
     onPrint,
+    onFilterModelChange,
     showProgressBars = true,
     variant = 'filled',
     fontSize,
@@ -192,6 +194,11 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
     activeFilters: externalActiveFilters,
     onFiltersChange: externalOnFiltersChange,
     hideMuiFilters = false,
+    // Props para controle de bordas internas
+    withToolbarBorder = true,
+    withPaginationBorder = true,
+    toolbarPadding,
+    paginationPadding,
   } = props
   const theme = useArchbaseTheme()
   const { colorScheme } = useMantineColorScheme();
@@ -567,6 +574,11 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
     // Atualizar o estado do filtro primeiro
     setFilterModel(newFilterModel)
 
+    // Notificar callback externo (parent component) se fornecido
+    if (onFilterModelChange) {
+      onFilterModelChange(newFilterModel)
+    }
+
     // Certificar que estamos usando o valor mais recente
     console.log('[FILTER] Aplicando filtro:', newFilterModel)
 
@@ -727,15 +739,17 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
       expandRow: (rowId: GridRowId) => expandDetailPanel(rowId),
       collapseRow: (rowId: GridRowId) => closeDetailPanel(rowId),
       collapseAllRows: closeAllDetailPanels,
-      getExpandedRows: () => Array.from(expandedRowIds)
+      getExpandedRows: () => Array.from(expandedRowIds),
+      getFilterModel: () => filterModel
     }),
-    [selectedRows, expandedRowIds, expandDetailPanel, closeDetailPanel, closeAllDetailPanels]
+    [selectedRows, expandedRowIds, expandDetailPanel, closeDetailPanel, closeAllDetailPanels, filterModel]
   )
 
   // Configurar estilos personalizados para o grid
   const getThemedStyles = () => {
     return {
       root: {
+        height: '100%', // Garante que o DataGrid ocupe toda a altura do container
         border: withBorder
           ? `1px solid ${theme.colors.gray[colorScheme === 'dark' ? 8 : 3]}`
           : '0',
@@ -743,6 +757,46 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
         overflow: 'hidden', // Garante que o conteúdo respeite o border-radius
         backgroundColor: colorScheme === 'dark' ? theme.colors.dark[6] : theme.white,
         color: colorScheme === 'dark' ? theme.colors.gray[0] : theme.colors.dark[9],
+
+        // Scrollbar customizada do MUI DataGrid - estilo Mantine (mais fina e elegante)
+        '& .MuiDataGrid-scrollbar': {
+          '&.MuiDataGrid-scrollbar--horizontal': {
+            height: '8px !important',
+          },
+          '&.MuiDataGrid-scrollbar--vertical': {
+            width: '8px !important',
+          },
+          backgroundColor: colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
+          borderRadius: '4px',
+          '& .MuiDataGrid-scrollbarContent': {
+            borderRadius: '4px',
+          },
+        },
+
+        // Scrollbar nativa (fallback) - estilo Mantine
+        '& .MuiDataGrid-virtualScroller': {
+          '&::-webkit-scrollbar': {
+            width: '8px',
+            height: '8px',
+          },
+          '&::-webkit-scrollbar-track': {
+            backgroundColor: colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[1],
+            borderRadius: '4px',
+          },
+          '&::-webkit-scrollbar-thumb': {
+            backgroundColor: colorScheme === 'dark' ? theme.colors.dark[3] : theme.colors.gray[4],
+            borderRadius: '4px',
+            '&:hover': {
+              backgroundColor: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[5],
+            },
+          },
+          // Firefox
+          scrollbarWidth: 'thin',
+          scrollbarColor: colorScheme === 'dark'
+            ? `${theme.colors.dark[3]} ${theme.colors.dark[6]}`
+            : `${theme.colors.gray[4]} ${theme.colors.gray[1]}`,
+        },
+
         fontSize:
           typeof fontSize === 'string' &&
           ['xs', 'sm', 'md', 'lg', 'xl'].includes(fontSize as string)
@@ -868,7 +922,7 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
         type: 'string' as const,
         sortable: false,
         filterable: false,
-        width: 120,
+        width: actionsColumnWidth,
         renderCell: (params) => renderRowActions(params.row as T)
       }
 
@@ -1368,6 +1422,9 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
           activeFilters={activeFilters}
           onFiltersChange={handleCompositeFiltersChange}
           hideMuiFilters={hideMuiFilters}
+          // Props para controle de bordas
+          withBorder={withToolbarBorder}
+          padding={toolbarPadding}
         />
       )}
 
@@ -1377,7 +1434,7 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
         renderFixedDetailPanel()}
 
       {/* Grid sem toolbar interna */}
-      <Box style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
+      <Box style={{ flex: 1, overflow: 'hidden', position: 'relative', minHeight: 0 }}>
         <DataGrid
           apiRef={apiRef}
           rows={rows}
@@ -1427,6 +1484,9 @@ function ArchbaseDataGrid<T extends object = any, ID = any>(props: ArchbaseDataG
         paginationLabels={paginationLabels}
         bottomToolbarMinHeight={bottomToolbarMinHeight}
         theme={theme}
+        // Props para controle de bordas
+        withBorder={withPaginationBorder}
+        padding={paginationPadding}
       />:null}
 
       {/* Painéis de detalhes nos modos não-inline (modal/drawer) */}

package/src/index.ts

@@ -15,7 +15,6 @@ export * from './masonry';
 export * from './notification';
 export * from './onboarding';
 export * from './viewers';
-export * from './spreadsheet';
 export * from './filters';
 
 // New Components

package/dist/debug/index.d.ts

@@ -1,4 +0,0 @@
-export { ArchbaseJsonView } from './jsonview/index';
-export { ArchbaseJsonPathPicker } from './jsonpathpicker';
-export { ArchbaseObjectInspector, ArchbaseDebugInspector } from './objectinspector';
-export type { ArchbaseObjectToInspect } from './objectinspector';

package/dist/debug/jsonpathpicker/ArchbaseJsonPathPicker.d.ts

@@ -1,37 +0,0 @@
-import { Component } from 'react';
-import './ArchbaseJsonPathPicker.css';
-export interface ArchbaseJsonPathPickerOptions {
-    outputCollapsed: boolean;
-    outputWithQuotes: boolean;
-    pathNotation: string;
-    pathQuotesType: string;
-    processKeys: boolean;
-    keyReplaceRegexPattern: string | undefined;
-    keyReplaceRegexFlags: string | undefined;
-    keyReplacementText: string;
-    pickerIcon: string;
-    withoutPicker: boolean;
-}
-export interface ArchbaseJsonPathPickerProps {
-    data: any;
-    onSelect: (path: string) => void;
-    options?: ArchbaseJsonPathPickerOptions;
-}
-export declare class ArchbaseJsonPathPicker extends Component<ArchbaseJsonPathPickerProps> {
-    static defaultProps: {
-        options: ArchbaseJsonPathPickerOptions;
-    };
-    private pickerRef;
-    private destRef;
-    private jsonPathPickerInstance;
-    constructor(props: ArchbaseJsonPathPickerProps);
-    json2jsx: (json: any, options: any) => import("react/jsx-runtime").JSX.Element | "[]" | "{}";
-    handlerEventToggle: (elm: any, event: any) => void;
-    toggleEventListener: (event: any) => void;
-    simulateClickHandler: (elm: any, event: any) => void;
-    simulateClickEventListener: (event: any) => void;
-    pickPathHandler: (elm: any) => void;
-    pickEventListener: (event: any) => void;
-    componentDidMount(): void;
-    render(): import("react/jsx-runtime").JSX.Element;
-}

package/dist/debug/jsonpathpicker/index.d.ts

@@ -1 +0,0 @@
-export { ArchbaseJsonPathPicker } from './ArchbaseJsonPathPicker';

package/dist/debug/jsonview/ArchbaseJsonViewDataRenderer.d.ts

@@ -1,34 +0,0 @@
-export interface StyleProps {
-    container: string;
-    basicChildStyle: string;
-    expander: string;
-    label: string;
-    nullValue: string;
-    undefinedValue: string;
-    numberValue: string;
-    stringValue: string;
-    booleanValue: string;
-    otherValue: string;
-    punctuation: string;
-    pointer: string;
-}
-export interface JsonRenderProps<T> {
-    field?: string;
-    value: T;
-    lastElement: boolean;
-    level: number;
-    style: StyleProps;
-    shouldInitiallyExpand: (level: number, value: any, field?: string) => boolean;
-}
-export interface ExpandableRenderProps {
-    field?: string;
-    value: Array<any> | object;
-    data: Array<[string | undefined, any]>;
-    openBracket: string;
-    closeBracket: string;
-    lastElement: boolean;
-    level: number;
-    style: StyleProps;
-    shouldInitiallyExpand: (level: number, value: any, field?: string) => boolean;
-}
-export default function ArchbaseJsonViewDataRender(props: JsonRenderProps<any>): import("react/jsx-runtime").JSX.Element;

package/dist/debug/jsonview/ArchbaseJsonViewDataTypeDetection.d.ts

@@ -1,8 +0,0 @@
-export declare const isBoolean: (data: any) => data is boolean | Boolean;
-export declare const isNumber: (data: any) => data is number | Number;
-export declare const isBigInt: (data: any) => data is bigint | BigInt;
-export declare const isString: (data: any) => data is string | String;
-export declare const isArray: (data: any) => data is any[];
-export declare const isObject: (data: any) => boolean;
-export declare const isNull: (data: any) => boolean;
-export declare const isUndefined: (data: any) => boolean;

package/dist/debug/jsonview/index.d.ts

@@ -1,11 +0,0 @@
-import { StyleProps } from './ArchbaseJsonViewDataRenderer';
-export interface ArchbaseJsonViewProps {
-    data: NonNullable<unknown> | Array<any>;
-    style?: StyleProps;
-    shouldInitiallyExpand?: (level: number, value: any, field?: string) => boolean;
-}
-export declare const defaultStyles: StyleProps;
-export declare const darkStyles: StyleProps;
-export declare const allExpanded: () => boolean;
-export declare const collapseAllNested: (level: number) => boolean;
-export declare const ArchbaseJsonView: ({ data, style, shouldInitiallyExpand, }: ArchbaseJsonViewProps) => import("react/jsx-runtime").JSX.Element;

package/dist/debug/objectinspector/ArchbaseDebugInspector.d.ts

@@ -1,23 +0,0 @@
-export interface ArchbaseDebugInspectorProps {
-    /** Título a ser exibido */
-    title?: string;
-    /** Título a ser exibido*/
-    icon?: string | HTMLImageElement;
-    /** Comando para abrir e fechar o Object Inspector */
-    debugObjectInspectorHotKey?: string;
-    /** Lista de objetos a serem inspecionados */
-    objectsToInspect?: ArchbaseObjectToInspect[];
-    /** Indica se o Object Inspector será visível inicialmente ou não */
-    visible?: boolean;
-    /** Altura inicial do Object Inspector */
-    height?: number;
-    /** Largura inicial do Object Inspector */
-    width?: number;
-}
-export interface ArchbaseObjectToInspect {
-    /**Nome do objeto a ser inspecionado*/
-    name: string;
-    /**Objeto a ser inspecionado*/
-    object: NonNullable<unknown>;
-}
-export declare function ArchbaseDebugInspector({ title, icon, debugObjectInspectorHotKey, objectsToInspect, visible, height, width, }: ArchbaseDebugInspectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/debug/objectinspector/ArchbaseFloatingWindow.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-import './ArchbaseFloatingWindow.css';
-export interface ArchbaseFloatingWindowProps {
-    id: string;
-    children?: any;
-    height: number;
-    width: number;
-    top?: number;
-    left?: number;
-    resizable?: boolean;
-    titleBar?: {
-        icon?: string | HTMLImageElement;
-        title?: string;
-        buttons?: {
-            minimize?: boolean;
-            maximize?: boolean;
-            close?: () => void;
-        };
-    };
-    style?: React.CSSProperties;
-    /** Referência para o container que envolve o componente filho */
-    innerRef?: React.RefObject<HTMLInputElement> | undefined;
-}
-export declare const ArchbaseFloatingWindow: React.FC<ArchbaseFloatingWindowProps>;

package/dist/debug/objectinspector/ArchbaseObjectInspector.d.ts

@@ -1,6 +0,0 @@
-export interface ArchbaseObjectInspectorProps {
-    /** Objeto a ser exibido */
-    data: any;
-    expandLevel?: number;
-}
-export declare function ArchbaseObjectInspector({ data, expandLevel }: ArchbaseObjectInspectorProps): import("react/jsx-runtime").JSX.Element;

package/dist/debug/objectinspector/index.d.ts

@@ -1,3 +0,0 @@
-export { ArchbaseDebugInspector } from './ArchbaseDebugInspector';
-export { ArchbaseObjectInspector } from './ArchbaseObjectInspector';
-export type { ArchbaseObjectToInspect } from './ArchbaseDebugInspector';

package/dist/spreadsheet/ArchbaseSpreadsheetImport.d.ts

@@ -1,4 +0,0 @@
-import type { ArchbaseSpreadsheetImportProps } from './ArchbaseSpreadsheetImport.types';
-export declare function ArchbaseSpreadsheetImport<T = any>({ dataSource, onDataLoaded, onRowAdded, fields, isOpen, onClose, title, description, allowedFileTypes, maxFileSize, // 10MB
-maxRows, customHeaderComponent, customButtonComponent, translations, style, className, disabled, initialData, mapRows, validationCallback, }: ArchbaseSpreadsheetImportProps<T>): import("react/jsx-runtime").JSX.Element;
-export type { ArchbaseSpreadsheetImportProps, SpreadsheetField, SpreadsheetRow, SpreadsheetFileType, } from './ArchbaseSpreadsheetImport.types';

package/dist/spreadsheet/ArchbaseSpreadsheetImport.types.d.ts

@@ -1,65 +0,0 @@
-import type { CSSProperties, ReactNode } from 'react';
-import type { IArchbaseDataSourceBase } from '@archbase/data';
-export type SpreadsheetFileType = 'csv' | 'xlsx' | 'xls' | 'all';
-export interface SpreadsheetField {
-    key: string;
-    label: string;
-    required?: boolean;
-    fieldType?: 'text' | 'number' | 'date' | 'email' | 'boolean' | 'select';
-    options?: string[];
-    validations?: {
-        min?: number;
-        max?: number;
-        pattern?: string;
-        custom?: (value: any) => boolean | string;
-    };
-}
-export interface SpreadsheetRow {
-    [key: string]: any;
-}
-export interface ArchbaseSpreadsheetImportProps<T = any> {
-    dataSource?: IArchbaseDataSourceBase<T>;
-    onDataLoaded?: (data: T[]) => void;
-    onRowAdded?: (row: T) => void;
-    fields?: SpreadsheetField[];
-    isOpen?: boolean;
-    onClose?: () => void;
-    title?: string;
-    description?: string;
-    allowedFileTypes?: SpreadsheetFileType[];
-    maxFileSize?: number;
-    maxRows?: number;
-    customHeaderComponent?: ReactNode;
-    customButtonComponent?: ReactNode;
-    translations?: {
-        uploadStep?: string;
-        selectFile?: string;
-        dragDrop?: string;
-        supportedFormats?: string;
-        reviewStep?: string;
-        reviewDescription?: string;
-        confirmStep?: string;
-        confirmDescription?: string;
-        successStep?: string;
-        successDescription?: string;
-        uploadButton?: string;
-        nextButton?: string;
-        backButton?: string;
-        confirmButton?: string;
-        doneButton?: string;
-        closeButton?: string;
-        invalidRow?: string;
-        requiredField?: string;
-        rowsAdded?: string;
-        rowsSkipped?: string;
-    };
-    style?: CSSProperties;
-    className?: string;
-    disabled?: boolean;
-    initialData?: SpreadsheetRow[];
-    mapRows?: (rows: SpreadsheetRow[]) => T[];
-    validationCallback?: (row: SpreadsheetRow, index: number) => {
-        valid: boolean;
-        errors?: string[];
-    };
-}

package/dist/spreadsheet/index.d.ts

@@ -1,2 +0,0 @@
-export { ArchbaseSpreadsheetImport, } from './ArchbaseSpreadsheetImport';
-export type { ArchbaseSpreadsheetImportProps, SpreadsheetField, SpreadsheetRow, SpreadsheetFileType, } from './ArchbaseSpreadsheetImport.types';

package/src/debug/jsonview/styles.module.css.d.ts

@@ -1,4 +0,0 @@
-declare const styles: {
-  readonly [key: string]: string;
-};
-export default styles;

package/src/spreadsheet/ArchbaseSpreadsheetImport.tsx

@@ -1,223 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react';
-import { Modal, Button, Group, Text, Stack, Paper, Progress, Alert } from '@mantine/core';
-import { useArchbaseTranslation } from '@archbase/core';
-import { ReactSpreadsheetImport } from 'react-spreadsheet-import';
-import type {
-  ArchbaseSpreadsheetImportProps,
-  SpreadsheetField,
-  SpreadsheetRow,
-} from './ArchbaseSpreadsheetImport.types';
-
-type RsiField = {
-  label: string;
-  key: string;
-  description?: string;
-  alternateMatches?: string[];
-  validations?: any[];
-  fieldType: { type: 'input' } | { type: 'checkbox'; booleanMatches?: { [key: string]: boolean } } | { type: 'select'; options: { label: string; value: string }[] };
-  example?: string;
-};
-
-function convertFieldToRsi(field: SpreadsheetField): RsiField {
-  const baseField: RsiField = {
-    label: field.label,
-    key: field.key,
-    fieldType: { type: 'input' },
-  };
-
-  if (field.fieldType === 'boolean') {
-    baseField.fieldType = { type: 'checkbox' };
-  } else if (field.fieldType === 'select' && field.options) {
-    baseField.fieldType = {
-      type: 'select',
-      options: field.options.map((opt) => ({ label: opt, value: opt })),
-    };
-  }
-
-  // Add validations
-  if (field.validations) {
-    baseField.validations = [];
-
-    if (field.validations.pattern) {
-      baseField.validations!.push({
-        rule: 'regex',
-        value: field.validations.pattern,
-        errorMessage: 'Invalid format',
-      });
-    }
-  }
-
-  return baseField;
-}
-
-export function ArchbaseSpreadsheetImport<T = any>({
-  dataSource,
-  onDataLoaded,
-  onRowAdded,
-  fields,
-  isOpen = true,
-  onClose,
-  title,
-  description,
-  allowedFileTypes = ['csv', 'xlsx', 'xls'],
-  maxFileSize = 10 * 1024 * 1024, // 10MB
-  maxRows = 1000,
-  customHeaderComponent,
-  customButtonComponent,
-  translations,
-  style,
-  className,
-  disabled = false,
-  initialData,
-  mapRows,
-  validationCallback,
-}: ArchbaseSpreadsheetImportProps<T>) {
-  const { t } = useArchbaseTranslation();
-  const [isOpenState, setIsOpenState] = useState(isOpen);
-  const [step, setStep] = useState<'upload' | 'review' | 'complete'>('upload');
-  const [isProcessing, setIsProcessing] = useState(false);
-  const [errors, setErrors] = useState<string[]>([]);
-  const [resultData, setResultData] = useState<{ validCount: number; invalidCount: number } | null>(null);
-
-  const rsiFields = useMemo(() => {
-    if (!fields) return undefined;
-
-    return fields.map(convertFieldToRsi) as RsiField[];
-  }, [fields]);
-
-  const defaultFields = useMemo<RsiField[]>(() => {
-    if (rsiFields) return rsiFields;
-
-    return [
-      { label: 'Column 1', key: 'column1', fieldType: { type: 'input' }, validations: [{ rule: 'required' }] },
-      { label: 'Column 2', key: 'column2', fieldType: { type: 'input' } },
-      { label: 'Column 3', key: 'column3', fieldType: { type: 'input' } },
-    ];
-  }, [rsiFields]);
-
-  const rsiTranslations = useMemo(() => ({
-    uploadStep: {
-      title: translations?.uploadStep || String(t('Import Spreadsheet')),
-      description: translations?.dragDrop || String(t('Drag and drop your file here')),
-      fileFormatError: translations?.supportedFormats || String(t('Supported formats: CSV, XLSX, XLS')),
-      maxSizeError: `File size exceeds ${maxFileSize} bytes`,
-    },
-    selectHeaderStep: {
-      title: String(t('Select File')),
-      description: String(t('Upload File')),
-    },
-    matchColumnsStep: {
-      title: translations?.reviewStep || String(t('Review Data')),
-      description: translations?.reviewDescription || String(t('Review and edit your data before importing')),
-    },
-    validationStep: {
-      title: translations?.confirmStep || String(t('Confirm Import')),
-      description: translations?.confirmDescription || String(t('Confirm the data to be imported')),
-    },
-  }), [translations, t, maxFileSize]);
-
-  const handleClose = useCallback(() => {
-    setIsOpenState(false);
-    setStep('upload');
-    setResultData(null);
-    setErrors([]);
-    onClose?.();
-  }, [onClose]);
-
-  const handleSubmit = useCallback(async (data: any, file: File) => {
-    setIsProcessing(true);
-    setStep('complete');
-
-    try {
-      // Combine valid and invalid data
-      const allData = [...data.validData, ...data.invalidData];
-
-      // Map rows if mapper provided
-      const mappedData = mapRows ? mapRows(allData as SpreadsheetRow[]) : (allData as unknown[] as T[]);
-
-      // Add to data source if provided
-      if (dataSource && mappedData.length > 0) {
-        for (const row of mappedData) {
-          onRowAdded?.(row);
-        }
-      }
-
-      // Set result data
-      setResultData({
-        validCount: data.validData.length,
-        invalidCount: data.invalidData.length,
-      });
-
-      // Callback with loaded data
-      onDataLoaded?.(mappedData);
-
-      setIsProcessing(false);
-    } catch (error) {
-      setErrors([String(error)]);
-      setIsProcessing(false);
-    }
-  }, [mapRows, dataSource, onRowAdded, onDataLoaded]);
-
-  const controlledIsOpen = isOpen !== undefined ? isOpen : isOpenState;
-
-  return (
-    <Modal
-      opened={controlledIsOpen}
-      onClose={handleClose}
-      size={step === 'complete' ? 'md' : 'xl'}
-      title={title || String(t('Import Spreadsheet'))}
-      style={style}
-      className={className}
-    >
-      <Stack gap="md">
-        {description && <Text size="sm">{description}</Text>}
-
-        {errors.length > 0 && (
-          <Alert color="red" title={String(t('Error'))}>
-            {errors.map((error, i) => (
-              <Text key={i} size="sm">{error}</Text>
-            ))}
-          </Alert>
-        )}
-
-        {isProcessing && (
-          <Progress value={undefined} size="sm" />
-        )}
-
-        {step === 'complete' && resultData ? (
-          <Stack align="center" gap="md">
-            <Text size="lg" fw={500}>
-              {resultData.validCount} {String(t('rows imported'))}
-            </Text>
-            {resultData.invalidCount > 0 && (
-              <Text size="sm" c="orange">
-                {resultData.invalidCount} {String(t('rows skipped'))}
-              </Text>
-            )}
-            <Button onClick={handleClose}>
-              {translations?.closeButton || String(t('Close'))}
-            </Button>
-          </Stack>
-        ) : (
-          <ReactSpreadsheetImport
-            isOpen={controlledIsOpen}
-            onClose={handleClose}
-            onSubmit={handleSubmit}
-            fields={defaultFields}
-            translations={rsiTranslations}
-            maxRecords={maxRows}
-            maxFileSize={maxFileSize}
-          />
-        )}
-      </Stack>
-    </Modal>
-  );
-}
-
-// Export types
-export type {
-  ArchbaseSpreadsheetImportProps,
-  SpreadsheetField,
-  SpreadsheetRow,
-  SpreadsheetFileType,
-} from './ArchbaseSpreadsheetImport.types';