@archbase/components 4.0.1 → 4.0.3

package/src/editors/ArchbaseTagInputEdit.tsx

@@ -0,0 +1,395 @@
+import {
+	ActionIcon,
+	ActionIconVariant,
+	MantineSize,
+	TagsInput,
+	Tooltip,
+	useMantineColorScheme,
+	useMantineTheme,
+} from '@mantine/core';
+import { useForceUpdate } from '@mantine/hooks';
+import type { CSSProperties, FocusEventHandler, ReactNode } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import type { ArchbaseDataSource, DataSourceEvent } from '@archbase/data';
+import { DataSourceEventNames } from '@archbase/data';
+import { useArchbaseDidMount, useArchbaseDidUpdate, useArchbaseWillUnmount } from '@archbase/core';
+import type { ComboboxData, ComboboxLikeRenderOptionInput, ComboboxGenericItem } from '@mantine/core';
+import type { InputClearButtonProps, ScrollAreaProps } from '@mantine/core';
+
+export interface ArchbaseTagInputEditProps<T, ID> {
+	/** Fonte de dados onde será atribuido o valor do edit */
+	dataSource?: ArchbaseDataSource<T, ID>;
+	/** Campo onde deverá ser atribuido o valor do edit na fonte de dados */
+	dataField?: string;
+	/** Indicador se o edit está desabilitado */
+	disabled?: boolean;
+	/** Indicador se o edit é somente leitura. Obs: usado em conjunto com o status da fonte de dados */
+	readOnly?: boolean;
+	/** Indicador se o preenchimento do edit é obrigatório */
+	required?: boolean;
+	/** Valor controlado do componente */
+	value?: string[];
+	/** Valor padrão para componente não controlado */
+	defaultValue?: string[];
+	/** Estilo do edit */
+	style?: CSSProperties;
+	/** Tamanho do edit */
+	size?: MantineSize;
+	/** Largura do edit */
+	width?: string | number | undefined;
+	/** Icone à direita */
+	icon?: ReactNode;
+	/** Dica para botão localizar */
+	tooltipIconSearch?: string;
+	/** Evento ocorre quando clica no botão localizar */
+	onActionSearchExecute?: () => void;
+	/** Texto sugestão do edit */
+	placeholder?: string;
+	/** Título do edit */
+	label?: string;
+	/** Descrição do edit */
+	description?: string;
+	/** Último erro ocorrido no edit */
+	error?: string;
+	/** Evento quando o foco sai do edit */
+	onFocusExit?: FocusEventHandler<T> | undefined;
+	/** Evento quando o edit recebe o foco */
+	onFocusEnter?: FocusEventHandler<T> | undefined;
+	/** Evento quando o valor do edit é alterado */
+	onChangeValue?: (value: string[]) => void;
+	/** Chamado quando uma tag é removida */
+	onRemove?: (value: string) => void;
+	/** Chamado quando o botão limpar é clicado */
+	onClear?: () => void;
+	onKeyDown?: (event: any) => void;
+	onKeyUp?: (event: any) => void;
+	/** Referência para o componente interno */
+	innerRef?: React.RefObject<HTMLInputElement> | undefined;
+	variant?: ActionIconVariant;
+
+	// Props específicas do TagsInput baseadas na interface oficial
+	/** Dados exibidos no dropdown. Valores devem ser únicos */
+	data?: ComboboxData;
+	/** Valor de busca controlado */
+	searchValue?: string;
+	/** Valor de busca padrão */
+	defaultSearchValue?: string;
+	/** Chamado quando a busca muda */
+	onSearchChange?: (value: string) => void;
+	/** Número máximo de tags, `Infinity` por padrão */
+	maxTags?: number;
+	/** Determina se tags duplicadas são permitidas, `false` por padrão */
+	allowDuplicates?: boolean;
+	/** Chamado quando usuário tenta submeter uma tag duplicada */
+	onDuplicate?: (value: string) => void;
+	/** Caracteres que devem disparar a divisão de tags, `[',']` por padrão */
+	splitChars?: string[];
+	/** Determina se o botão limpar deve ser exibido quando o componente tem valor, `false` por padrão */
+	clearable?: boolean;
+	/** Props passadas para o botão limpar */
+	clearButtonProps?: InputClearButtonProps & React.ComponentPropsWithoutRef<'button'>;
+	/** Props passadas para o input oculto */
+	hiddenInputProps?: Omit<React.ComponentPropsWithoutRef<'input'>, 'value'>;
+	/** Divisor usado para separar valores no atributo `value` do input oculto, `','` por padrão */
+	hiddenInputValuesDivider?: string;
+	/** Função para renderizar o conteúdo da opção */
+	renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxGenericItem>) => React.ReactNode;
+	/** Props passadas para o componente `ScrollArea` subjacente no dropdown */
+	scrollAreaProps?: ScrollAreaProps;
+	/** Determina se o valor digitado pelo usuário mas não submetido deve ser aceito quando o input perde o foco, `true` por padrão */
+	acceptValueOnBlur?: boolean;
+	/** Limite de itens exibidos no dropdown */
+	limit?: number;
+	/** Converter para transformar o valor antes de salvar no dataSource */
+	outputConverter?: (tags: string[]) => any;
+	/** Converter para transformar o valor do dataSource antes de exibir */
+	inputConverter?: (value: any) => string[];
+}
+
+export function ArchbaseTagInputEdit<T, ID>({
+	dataSource,
+	dataField,
+	disabled = false,
+	readOnly = false,
+	style,
+	placeholder,
+	label,
+	description,
+	error,
+	required,
+	size,
+	width,
+	innerRef,
+	value,
+	defaultValue,
+	icon,
+	onKeyDown,
+	onKeyUp,
+	onActionSearchExecute,
+	tooltipIconSearch = 'Clique aqui para Localizar',
+	onFocusExit = () => {},
+	onFocusEnter = () => {},
+	onChangeValue = () => {},
+	onRemove,
+	onClear,
+	variant,
+
+	// Props específicas do TagsInput
+	data,
+	searchValue,
+	defaultSearchValue,
+	onSearchChange,
+	maxTags = Infinity,
+	allowDuplicates = false,
+	onDuplicate,
+	splitChars = [','],
+	clearable = false,
+	clearButtonProps,
+	hiddenInputProps,
+	hiddenInputValuesDivider = ',',
+	renderOption,
+	scrollAreaProps,
+	acceptValueOnBlur = true,
+	limit,
+	outputConverter,
+	inputConverter,
+}: ArchbaseTagInputEditProps<T, ID>) {
+	const [currentValue, setCurrentValue] = useState<string[]>(value || defaultValue || []);
+	const innerComponentRef = useRef<any>(null);
+	const theme = useMantineTheme();
+	const { colorScheme } = useMantineColorScheme();
+	const [internalError, setInternalError] = useState<string | undefined>(error);
+	const forceUpdate = useForceUpdate();
+
+	useEffect(() => {
+		setInternalError(undefined);
+	}, [currentValue]);
+
+	useEffect(() => {
+		if (error !== internalError) {
+			setInternalError(error);
+		}
+	}, [error]);
+
+	useEffect(() => {
+		if (value !== undefined && JSON.stringify(value) !== JSON.stringify(currentValue)) {
+			setCurrentValue(value);
+		}
+	}, [value]);
+
+	const loadDataSourceFieldValue = () => {
+		let initialValue: string[] = currentValue;
+
+		if (dataSource && dataField) {
+			const fieldValue = dataSource.getFieldValue(dataField);
+
+			// Usa o inputConverter se fornecido
+			if (inputConverter) {
+				initialValue = inputConverter(fieldValue);
+			} else {
+				// Lógica padrão de conversão
+				if (Array.isArray(fieldValue)) {
+					initialValue = fieldValue;
+				} else if (typeof fieldValue === 'string' && fieldValue) {
+					// Se o valor no datasource for uma string, tenta fazer parse como JSON ou separar por vírgula
+					try {
+						const parsed = JSON.parse(fieldValue);
+						initialValue = Array.isArray(parsed) ? parsed : [fieldValue];
+					} catch {
+						initialValue = fieldValue.split(',').map(item => item.trim()).filter(item => item);
+					}
+				} else {
+					initialValue = [];
+				}
+			}
+		}
+
+		initialValue = initialValue.filter(value => value && value.trim() !== '');
+		setCurrentValue(initialValue);
+	};
+
+	const fieldChangedListener = useCallback(() => {
+		loadDataSourceFieldValue();
+	}, []);
+
+	const dataSourceEvent = useCallback((event: DataSourceEvent<T>) => {
+		if (dataSource && dataField) {
+			if (
+				event.type === DataSourceEventNames.dataChanged ||
+				event.type === DataSourceEventNames.recordChanged ||
+				event.type === DataSourceEventNames.afterScroll ||
+				event.type === DataSourceEventNames.afterCancel ||
+				event.type === DataSourceEventNames.afterEdit
+			) {
+				loadDataSourceFieldValue();
+				forceUpdate();
+			}
+
+			if (event.type === DataSourceEventNames.onFieldError && event.fieldName === dataField) {
+				setInternalError(event.error);
+			}
+		}
+	}, []);
+
+	useArchbaseDidMount(() => {
+		loadDataSourceFieldValue();
+		if (dataSource && dataField) {
+			dataSource.addListener(dataSourceEvent);
+			dataSource.addFieldChangeListener(dataField, fieldChangedListener);
+		}
+	});
+
+	useArchbaseDidUpdate(() => {
+		if (!value) { // Só carrega do datasource se não é controlado
+			loadDataSourceFieldValue();
+		}
+	}, []);
+
+	const handleChange = (changedValue: string[]) => {
+		// Filtra valores vazios ou que contenham apenas espaços
+		const filteredValue = changedValue.filter(value => value && value.trim() !== '');
+
+		setCurrentValue(filteredValue);
+
+		if (dataSource && !dataSource.isBrowsing() && dataField) {
+			// Usa o outputConverter se fornecido, senão salva como array
+			const valueToSave = outputConverter ? outputConverter(filteredValue) : filteredValue;
+			dataSource.setFieldValue(dataField, valueToSave);
+		}
+
+		if (onChangeValue) {
+			onChangeValue(filteredValue);
+		}
+	};
+
+	const handleRemove = (removedValue: string) => {
+		const newValue = currentValue.filter(value => value !== removedValue && value && value.trim() !== '');
+		setCurrentValue(newValue);
+
+		if (dataSource && !dataSource.isBrowsing() && dataField) {
+			const valueToSave = outputConverter ? outputConverter(newValue) : newValue;
+			dataSource.setFieldValue(dataField, valueToSave);
+		}
+
+		if (onChangeValue) {
+			onChangeValue(newValue);
+		}
+
+		if (onRemove) {
+			onRemove(removedValue);
+		}
+	};
+
+	const handleClear = () => {
+		const emptyValue: string[] = [];
+		setCurrentValue(emptyValue);
+
+		if (dataSource && !dataSource.isBrowsing() && dataField) {
+			// Usa o outputConverter se fornecido, senão salva como array vazio
+			const valueToSave = outputConverter ? outputConverter(emptyValue) : emptyValue;
+			dataSource.setFieldValue(dataField, valueToSave);
+		}
+
+		if (onChangeValue) {
+			onChangeValue(emptyValue);
+		}
+
+		if (onClear) {
+			onClear();
+		}
+	};
+
+	useArchbaseWillUnmount(() => {
+		if (dataSource && dataField) {
+			dataSource.removeListener(dataSourceEvent);
+			dataSource.removeFieldChangeListener(dataField, fieldChangedListener);
+		}
+	});
+
+	const handleOnFocusExit = (event) => {
+		if (onFocusExit) {
+			onFocusExit(event);
+		}
+	};
+
+	const handleOnFocusEnter = (event) => {
+		if (onFocusEnter) {
+			onFocusEnter(event);
+		}
+	};
+
+	const isReadOnly = () => {
+		let tmpReadOnly = readOnly;
+		if (dataSource && !readOnly) {
+			tmpReadOnly = dataSource.isBrowsing();
+		}
+		return tmpReadOnly;
+	};
+
+	return (
+		<TagsInput
+			disabled={disabled}
+			readOnly={isReadOnly()}
+			size={size!}
+			style={{
+				width,
+				...style,
+			}}
+			value={currentValue}
+			defaultValue={defaultValue}
+			ref={innerRef || innerComponentRef}
+			required={required}
+			onChange={handleChange}
+			onRemove={handleRemove}
+			onClear={handleClear}
+			onBlur={handleOnFocusExit}
+			onFocus={handleOnFocusEnter}
+			placeholder={placeholder}
+			description={description}
+			onKeyDown={onKeyDown}
+			onKeyUp={onKeyUp}
+			label={label}
+			error={internalError}
+
+			// Props específicas do TagsInput
+			data={data}
+			searchValue={searchValue}
+			defaultSearchValue={defaultSearchValue}
+			onSearchChange={onSearchChange}
+			maxTags={maxTags}
+			allowDuplicates={allowDuplicates}
+			onDuplicate={onDuplicate}
+			splitChars={splitChars}
+			clearable={clearable}
+			clearButtonProps={clearButtonProps}
+			hiddenInputProps={hiddenInputProps}
+			hiddenInputValuesDivider={hiddenInputValuesDivider}
+			renderOption={renderOption}
+			scrollAreaProps={scrollAreaProps}
+			acceptValueOnBlur={acceptValueOnBlur}
+			limit={limit}
+
+			rightSection={
+				onActionSearchExecute ? (
+					<Tooltip withinPortal withArrow label={tooltipIconSearch}>
+						<ActionIcon
+							style={{
+								backgroundColor:
+									variant === 'filled'
+										? colorScheme === 'dark'
+											? theme.colors[theme.primaryColor][5]
+											: theme.colors[theme.primaryColor][6]
+										: undefined,
+							}}
+							tabIndex={-1}
+							variant={variant}
+							onClick={onActionSearchExecute}
+						>
+							{icon}
+						</ActionIcon>
+					</Tooltip>
+				) : null
+			}
+		/>
+	);
+}

package/src/editors/index.tsx

@@ -138,6 +138,12 @@ export type { ArchbaseMentionInputProps, ArchbaseMentionConfig } from './Archbas
 export { ArchbaseSignaturePad } from './ArchbaseSignaturePad'
 export type { ArchbaseSignaturePadProps } from './ArchbaseSignaturePad'
 
+export { ArchbaseMultiSelect, SelectItem, SelectedItem } from './ArchbaseMultiSelect'
+export type { ArchbaseMultiSelectProps } from './ArchbaseMultiSelect'
+
+export { ArchbaseTagInputEdit } from './ArchbaseTagInputEdit'
+export type { ArchbaseTagInputEditProps } from './ArchbaseTagInputEdit'
+
 export { ArchbaseBarcodeScanner } from './ArchbaseBarcodeScanner'
 export type { ArchbaseBarcodeScannerProps } from './ArchbaseBarcodeScanner'
 

package/src/image/editor/index.tsx

@@ -156,6 +156,90 @@ function extractFormat(dataUri: string | null | undefined): string {
 	return 'png';
 }
 
+/**
+ * Redimensiona uma imagem se exceder os limites de tamanho
+ * @param dataUri Data URI da imagem original
+ * @param maxWidth Largura máxima em pixels
+ * @param maxHeight Altura máxima em pixels
+ * @param maxSizeKb Tamanho máximo em KB
+ * @param quality Qualidade inicial da compressão (0-100)
+ * @returns Promise com o data URI redimensionado
+ */
+async function resizeImageIfNeeded(
+	dataUri: string,
+	maxWidth?: number,
+	maxHeight?: number,
+	maxSizeKb?: number,
+	quality: number = 80
+): Promise<string> {
+	return new Promise((resolve) => {
+		// Se não há limites definidos, retorna como está
+		if (!maxWidth && !maxHeight && !maxSizeKb) {
+			resolve(dataUri);
+			return;
+		}
+
+		const img = new Image();
+		img.onload = () => {
+			let targetWidth = img.width;
+			let targetHeight = img.height;
+
+			// Calcular novo tamanho se exceder limites
+			if (maxWidth && img.width > maxWidth) {
+				const ratio = maxWidth / img.width;
+				targetWidth = maxWidth;
+				targetHeight = Math.round(img.height * ratio);
+			}
+			if (maxHeight && targetHeight > maxHeight) {
+				const ratio = maxHeight / targetHeight;
+				targetHeight = maxHeight;
+				targetWidth = Math.round(targetWidth * ratio);
+			}
+
+			// Se não precisa redimensionar e não há limite de tamanho, retorna original
+			if (targetWidth === img.width && targetHeight === img.height && !maxSizeKb) {
+				resolve(dataUri);
+				return;
+			}
+
+			// Criar canvas para redimensionar
+			const canvas = document.createElement('canvas');
+			canvas.width = targetWidth;
+			canvas.height = targetHeight;
+			const ctx = canvas.getContext('2d');
+			if (!ctx) {
+				resolve(dataUri);
+				return;
+			}
+
+			ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
+
+			// Determinar formato de saída
+			const format = extractFormat(dataUri);
+			const mimeType = format === 'png' ? 'image/png' : 'image/jpeg';
+
+			// Função para comprimir até atingir o tamanho desejado
+			const compressToSize = (currentQuality: number): string => {
+				const result = canvas.toDataURL(mimeType, currentQuality / 100);
+				if (maxSizeKb) {
+					const sizeKb = Math.ceil(((3 / 4) * result.split(',')[1].length) / 1024);
+					// Se ainda está grande e qualidade pode ser reduzida
+					if (sizeKb > maxSizeKb && currentQuality > 20) {
+						return compressToSize(currentQuality - 10);
+					}
+				}
+				return result;
+			};
+
+			resolve(compressToSize(quality));
+		};
+		img.onerror = () => {
+			resolve(dataUri);
+		};
+		img.src = dataUri;
+	});
+}
+
 /**
  * Props do ArchbaseImagePickerEditor
  * Mantém compatibilidade total com a versão anterior
@@ -174,6 +258,8 @@ export interface ArchbaseImagePickerEditorProps {
 	imageChanged?: (newDataUri: string | undefined) => void;
 	/** Variante dos botões de ação */
 	variant?: ActionIconVariant;
+	/** Callback quando o estado de processamento muda (útil para desabilitar botões enquanto processa) */
+	onProcessingChange?: (isProcessing: boolean) => void;
 }
 
 /**
@@ -209,6 +295,7 @@ export const ArchbaseImagePickerEditor = memo(
 		color = '#1e88e5',
 		imageChanged,
 		variant = 'transparent',
+		onProcessingChange,
 	}: ArchbaseImagePickerEditorProps) => {
 		const theme = useArchbaseTheme();
 		const { colorScheme } = useMantineColorScheme();
@@ -227,9 +314,19 @@ export const ArchbaseImagePickerEditor = memo(
 		// Ref para a imagem original (antes de normalização) para comparação
 		const originalImagePropRef = useRef<string | undefined>(imageSrcProp);
 
+		// Ref para onProcessingChange para evitar closure stale no debounce
+		const onProcessingChangeRef = useRef(onProcessingChange);
+		onProcessingChangeRef.current = onProcessingChange;
+
 		// Ref para saber se é a primeira renderização
 		const isFirstRender = useRef(true);
 
+		// Ref para saber se já recebemos a imagem inicial (evita que o picker zere antes de carregar)
+		const hasReceivedInitialImage = useRef(false);
+
+		// Timestamp de quando o componente foi montado (para ignorar valores vazios só no início)
+		const mountTimeRef = useRef(Date.now());
+
 		// Configuração padrão
 		const defaultConfig: ArchbaseImagePickerConf = {
 			objectFit: 'cover',
@@ -256,6 +353,8 @@ export const ArchbaseImagePickerEditor = memo(
 		const debouncedOnChange = useDebouncedCallback((newDataUri: string | undefined) => {
 			// Verificar se a imagem realmente mudou
 			if (lastReportedImageRef.current === newDataUri) {
+				// Notificar que o processamento terminou (usando ref para evitar closure stale)
+				onProcessingChangeRef.current?.(false);
 				return;
 			}
 
@@ -270,41 +369,76 @@ export const ArchbaseImagePickerEditor = memo(
 			if (imageChanged) {
 				imageChanged(newDataUri);
 			}
+
+			// Notificar que o processamento terminou (usando ref para evitar closure stale)
+			onProcessingChangeRef.current?.(false);
 		}, 300); // 300ms de debounce
 
 		// Sincronizar com prop externa
 		useEffect(() => {
-			// Só atualizar se a prop original realmente mudou
-			if (imageSrcProp !== originalImagePropRef.current) {
-				originalImagePropRef.current = imageSrcProp;
+			// Sempre atualizar quando a prop mudar (mesmo que seja a mesma do ref inicial)
+			const normalizedSrc = normalizeImageSrc(imageSrcProp);
+
+			// Marcar que recebemos a imagem inicial quando receber um valor não vazio
+			if (normalizedSrc && !hasReceivedInitialImage.current) {
+				hasReceivedInitialImage.current = true;
+			}
 
-				const normalizedSrc = normalizeImageSrc(imageSrcProp);
+			// Só atualizar o estado se o valor normalizado for diferente do atual
+			if (normalizedSrc !== imageSrc) {
 				setImageSrc(normalizedSrc);
 				setLoadImage(!!normalizedSrc);
+			}
 
-				// Atualizar a referência sem disparar callback na sincronização inicial
-				if (isFirstRender.current) {
-					lastReportedImageRef.current = normalizedSrc;
-					isFirstRender.current = false;
-				}
+			// Atualizar a referência
+			originalImagePropRef.current = imageSrcProp;
+
+			// Atualizar a referência sem disparar callback na sincronização inicial
+			if (isFirstRender.current) {
+				lastReportedImageRef.current = normalizedSrc;
+				isFirstRender.current = false;
 			}
 		}, [imageSrcProp]);
 
 		// Handler quando a imagem muda no editor
-		const handleImageChanged = useCallback((newDataUri: string) => {
-			const newValue = newDataUri || undefined;
+		const handleImageChanged = useCallback(async (newDataUri: string) => {
+			const timeSinceMount = Date.now() - mountTimeRef.current;
 
 			// Só processa se for diferente do valor atual
 			if (imageSrc === newDataUri) {
 				return;
 			}
 
-			setImageSrc(newDataUri || null);
-			setLoadImage(!!newDataUri);
+			// Ignorar valores vazios APENAS nos primeiros 1000ms após montar
+			// Isso evita que o react-image-picker-editor zere a imagem antes de carregar
+			// Mas permite que o usuário remova a imagem depois
+			if (!newDataUri && timeSinceMount < 1000) {
+				return;
+			}
+
+			// Notificar que o processamento iniciou
+			onProcessingChange?.(true);
+
+			// Redimensionar se necessário
+			let processedDataUri = newDataUri;
+			if (newDataUri && (mergedConfig.maxWidth || mergedConfig.maxHeight || mergedConfig.maxSizeKb)) {
+				processedDataUri = await resizeImageIfNeeded(
+					newDataUri,
+					mergedConfig.maxWidth,
+					mergedConfig.maxHeight,
+					mergedConfig.maxSizeKb,
+					mergedConfig.compressInitial ?? 80
+				);
+			}
+
+			const newValue = processedDataUri || undefined;
+
+			setImageSrc(processedDataUri || null);
+			setLoadImage(!!processedDataUri);
 
 			// Usar callback com debounce
 			debouncedOnChange(newValue);
-		}, [imageSrc, debouncedOnChange]);
+		}, [imageSrc, debouncedOnChange, onProcessingChange, mergedConfig.maxWidth, mergedConfig.maxHeight, mergedConfig.maxSizeKb, mergedConfig.compressInitial]);
 
 		// Calcular tamanho e formato da imagem (apenas para data URIs)
 		const sizeImage = useMemo(() => calculateImageSize(imageSrc), [imageSrc]);
@@ -319,8 +453,39 @@ export const ArchbaseImagePickerEditor = memo(
 			backgroundColor: mergedConfig.imageBackgroundColor ?? (colorScheme === 'dark' ? theme.colors.dark[7] : theme.white),
 		}), [mergedConfig.width, mergedConfig.imageBackgroundColor, colorScheme, theme]);
 
+		// Handler para prevenir submit de formulário e navegação acidental
+		const handleContainerClick = useCallback((e: React.MouseEvent) => {
+			const target = e.target as HTMLElement;
+
+			// Prevenir submit de formulário quando botões são clicados
+			// Os botões do react-image-picker-editor não têm type="button",
+			// então agem como type="submit" quando dentro de um form
+			const button = target.closest('button');
+			if (button && !button.getAttribute('type')) {
+				e.preventDefault();
+			}
+
+			// Prevenir navegação para data URIs em links
+			const anchor = target.closest('a');
+			if (anchor) {
+				const href = anchor.getAttribute('href');
+				if (href && href.startsWith('data:')) {
+					e.preventDefault();
+					// Se for o botão de download, fazer download manualmente
+					if (anchor.hasAttribute('download')) {
+						const link = document.createElement('a');
+						link.href = href;
+						link.download = anchor.getAttribute('download') || 'image';
+						document.body.appendChild(link);
+						link.click();
+						document.body.removeChild(link);
+					}
+				}
+			}
+		}, []);
+
 		return (
-			<div className="ArchbaseImagePickerEditor" style={containerStyle}>
+			<div className="ArchbaseImagePickerEditor" style={containerStyle} onClick={handleContainerClick}>
 				{/* Componente react-image-picker-editor */}
 				<ReactImagePickerEditor
 					config={pickerConfig}

package/src/image/editor/models/index.models.ts

@@ -12,6 +12,12 @@ export interface ArchbaseImagePickerConf {
   showImageSize?: boolean;
   onChangeImage?: (image: string|undefined) => void;
   imageBackgroundColor?: string;
+  /** Largura máxima da imagem em pixels (redimensiona automaticamente se exceder) */
+  maxWidth?: number;
+  /** Altura máxima da imagem em pixels (redimensiona automaticamente se exceder) */
+  maxHeight?: number;
+  /** Tamanho máximo da imagem em KB (recomprime se exceder) */
+  maxSizeKb?: number;
 }
 
 export interface IState {