@archbase/components 3.0.0

package/src/editors/ArchbaseDatePickerRange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseDatePickerRange.d.ts","sourceRoot":"","sources":["ArchbaseDatePickerRange.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,WAAW,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGjD,MAAM,WAAW,4BAA4B;IAC5C,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gHAAgH;IAChH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kCAAkC;IAClC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,mCAAmC;IACnC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,0CAA0C;IAC1C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,0CAA0C;IAC1C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,kCAAkC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gDAAgD;IAChD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClE,sDAAsD;IACtD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnE,4DAA4D;IAC5D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACjD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,qEAAqE;IACrE,iBAAiB,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,IAAI,CAAC;IACjD,uDAAuD;IACvD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;IAC9D,qDAAqD;IACrD,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;CAC5D;AAED,wBAAgB,uBAAuB,CAAC,EACvC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,KAAK,EACL,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,gBAAgB,EAChB,cAAc,EACd,KAAK,GACL,EAAE,4BAA4B,2CAsD9B"}

package/src/editors/ArchbaseDatePickerRange.tsx

@@ -0,0 +1,142 @@
+import { Flex, Input, MantineSize } from '@mantine/core';
+import { DateValue } from '@mantine/dates';
+import { IconArrowRight, IconCalendar } from '@tabler/icons-react';
+import React, { useEffect, useState } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { ArchbaseDatePickerEdit } from './ArchbaseDatePickerEdit';
+import { useValidationErrors } from '@archbase/core';
+
+export interface ArchbaseDatePickerRangeProps {
+	/** Indicador se o date picker range está desabilitado */
+	disabled?: boolean;
+	/** Indicador se o date picker range é somente leitura. Obs: usado em conjunto com o status da fonte de dados */
+	readOnly?: boolean;
+	/** Indicador se o preenchimento do date picker range é obrigatório */
+	required?: boolean;
+	/** Valor inicial */
+	value?: string;
+	/** Estilo do date picker range */
+	style?: CSSProperties;
+	/** Tamanho do date picker range */
+	size?: MantineSize;
+	/** Largura do date picker range */
+	width?: string | number | undefined;
+	/** Icone à direita */
+	icon?: ReactNode;
+	/** Texto sugestão do date picker range */
+	placeholderStart?: string;
+	/** Texto sugestão do date picker range */
+	placeholderEnd?: string;
+	/** Título do date picker range */
+	label?: string;
+	/** Descrição do date picker range */
+	description?: string;
+	/** Último erro ocorrido no date picker range */
+	error?: string;
+	/** Evento quando o foco sai do date picker range */
+	onFocusExit?: (event: React.FocusEvent<HTMLInputElement>) => void;
+	/** Evento quando o date picker range recebe o foco */
+	onFocusEnter?: (event: React.FocusEvent<HTMLInputElement>) => void;
+	/** Evento quando o valor do date picker range é alterado */
+	onChangeValue?: (value: any, event: any) => void;
+	onKeyDown?: (event: any) => void;
+	onKeyUp?: (event: any) => void;
+	/** Evento quando o valor do range do date picker range é alterado */
+	onSelectDateRange?: (value: DateValue[]) => void;
+	/** Referência para o componente interno data inicial*/
+	innerRefStart?: React.RefObject<HTMLInputElement> | undefined;
+	/** Referência para o componente interno data final*/
+	innerRefEnd?: React.RefObject<HTMLInputElement> | undefined;
+}
+
+export function ArchbaseDatePickerRange({
+	label,
+	disabled,
+	readOnly,
+	size,
+	width,
+	style,
+	onSelectDateRange,
+	onFocusEnter,
+	onFocusExit,
+	placeholderStart,
+	placeholderEnd,
+	error,
+}: ArchbaseDatePickerRangeProps) {
+	const [startDate, setStartDate] = useState<DateValue>();
+	const [endDate, setEndDate] = useState<DateValue>();
+	const [internalError, setInternalError] = useState<string | undefined>(error);
+
+	// Contexto de validação (opcional - pode não existir)
+	const validationContext = useValidationErrors();
+
+	// Chave única para o field (usando label como fallback)
+	const fieldKey = label || 'date-picker-range';
+
+	// Recuperar erro do contexto se existir
+	const contextError = validationContext?.getError(fieldKey);
+
+	// ✅ CORRIGIDO: Apenas atualizar se o prop error vier definido
+	// Não limpar o internalError se o prop error for undefined
+	useEffect(() => {
+		if (error !== undefined && error !== internalError) {
+			setInternalError(error);
+		}
+	}, [error]);
+
+	const handleSelectRange = (sDt?: DateValue, eDt?: DateValue) => {
+		// ✅ Limpa erro quando usuário edita o campo (tanto do estado local quanto do contexto)
+		const hasError = internalError || contextError;
+		if (hasError) {
+			setInternalError(undefined);
+			validationContext?.clearError(fieldKey);
+		}
+
+		setStartDate(sDt);
+		setEndDate(eDt);
+		if (onSelectDateRange) {
+			onSelectDateRange([sDt, eDt]);
+		}
+	};
+
+	// Erro a ser exibido: local ou do contexto
+	const displayError = internalError || contextError;
+
+	return (
+		<Input.Wrapper
+			label={label}
+			size={size!}
+			error={displayError}
+			style={{
+				width,
+				...style,
+			}}
+		>
+			<Flex gap="sm" justify="flex-start" align="center" direction="row">
+				<ArchbaseDatePickerEdit
+					clearable={true}
+					rightSection={<IconCalendar />}
+					readOnly={readOnly}
+					disabled={disabled}
+					placeholder={placeholderStart}
+					onFocusEnter={onFocusEnter}
+					onFocusExit={onFocusExit}
+					onChange={(value: DateValue) => handleSelectRange(value, endDate)}
+					style={{ width: width ? width : 180 }}
+				/>
+				<IconArrowRight size={'1rem'} />
+				<ArchbaseDatePickerEdit
+					clearable={true}
+					rightSection={<IconCalendar />}
+					readOnly={readOnly}
+					disabled={disabled}
+					placeholder={placeholderEnd}
+					onFocusEnter={onFocusEnter}
+					onFocusExit={onFocusExit}
+					onChange={(value: DateValue) => handleSelectRange(startDate, value)}
+					style={{ width: width ? width : 180 }}
+				/>
+			</Flex>
+		</Input.Wrapper>
+	);
+}

package/src/editors/ArchbaseDateTimePickerEdit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseDateTimePickerEdit.d.ts","sourceRoot":"","sources":["ArchbaseDateTimePickerEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,mBAAmB,EACjB,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAE,aAAa,EAAqB,YAAY,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,KAAK,EAAE,kBAAkB,EAAmB,MAAM,gBAAgB,CAAC;AAK1E,KAAK,0BAA0B,GAAG,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,UAAU,CAAC,CAAC;AAElF,MAAM,WAAW,+BAA+B,CAAC,CAAC,EAAE,EAAE,CAAE,SAAQ,0BAA0B;IAC3F,wDAAwD;IACxD,UAAU,CAAC,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACvC,uEAAuE;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,wCAAwC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gDAAgD;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACpB,iBAAiB;IACjB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC,6CAA6C;IAC7C,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IAClE,gDAAgD;IAChD,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnE,uDAAuD;IACvD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,uDAAuD;IACvD,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;IAC7C,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IACvC,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,mBAAmB;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;CACnB;AAsJD,eAAO,MAAM,0BAA0B,EAKlC,CAAC,CAAC,EAAE,EAAE,EACZ,KAAK,EAAE,+BAA+B,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,CAAA;CAAE,KACnF,KAAK,CAAC,GAAG,CAAC,OAAO,CAAC"}

package/src/editors/ArchbaseDateTimePickerEdit.tsx

@@ -0,0 +1,259 @@
+import {
+	DateTimePicker,
+	DateTimePickerProps,
+  } from '@mantine/dates';
+  import { useForceUpdate } from '@mantine/hooks';
+  import type { CSSProperties, FocusEventHandler, ForwardedRef } from 'react';
+  import React, { useCallback, useEffect, useRef, useState } from 'react';
+  import type { ArchbaseDataSource, DataSourceEvent, IArchbaseDataSourceBase } from '@archbase/data';
+  import { DataSourceEventNames } from '@archbase/data';
+  import { useArchbaseDidUpdate } from '@archbase/data';
+  import { useArchbaseV1V2Compatibility } from '@archbase/data';
+  import { useValidationErrors } from '@archbase/core';
+  
+  type OmittedDateTimePickerProps = Omit<DateTimePickerProps, 'value' | 'onChange'>;
+  
+  export interface ArchbaseDateTimePickerEditProps<T, ID> extends OmittedDateTimePickerProps {
+	/** Data source where the edit value will be assigned (V1 ou V2) */
+	dataSource?: IArchbaseDataSourceBase<T>;
+	/** Field where the edit value should be assigned in the data source */
+	dataField?: string;
+	/** Indicates if the edit is disabled */
+	disabled?: boolean;
+	/** Indicates if the edit is read-only. Note: used in conjunction with data source status */
+	readOnly?: boolean;
+	/** Indicates if filling the edit is required */
+	required?: boolean;
+	/** Initial value */
+	value?: Date | null;
+	/** Edit style */
+	style?: CSSProperties;
+	/** Edit width */
+	width?: string | number | undefined;
+	/** Event occurs when focus exits the edit */
+	onFocusExit?: (event: React.FocusEvent<HTMLInputElement>) => void;
+	/** Event occurs when the edit receives focus */
+	onFocusEnter?: (event: React.FocusEvent<HTMLInputElement>) => void;
+	/** Event when the edit value changes (internal use) */
+	onChange?: (value: Date | null) => void;
+	/** Event when the edit value changes (external use) */
+	onChangeValue?: (value: Date | null) => void;
+	/** Clear button properties */
+	clearButtonProps?: Record<string, any>;
+	/** With seconds input */
+	withSeconds?: boolean;
+	/** Value format */
+	valueFormat?: string;
+	/** Error message */
+	error?: string;
+  }
+  
+  function ArchbaseDateTimePickerEditComponent<T, ID>({
+	dataSource,
+	dataField,
+	disabled = false,
+	readOnly = false,
+	style,
+	required,
+	value,
+	onFocusExit = () => {},
+	onFocusEnter = () => {},
+	onChange,
+	onChangeValue = () => {},
+	width,
+	error,
+	...rest
+  }: ArchbaseDateTimePickerEditProps<T, ID>, ref: ForwardedRef<HTMLButtonElement>) {
+	const [currentValue, setCurrentValue] = useState<Date | null>(value || null);
+	const [internalError, setInternalError] = useState<string | undefined>(undefined);
+	const forceUpdate = useForceUpdate();
+
+	// 🔄 MIGRAÇÃO V1/V2: Hook de compatibilidade
+	const v1v2Compatibility = useArchbaseV1V2Compatibility<Date | null>(
+		'ArchbaseDateTimePickerEdit',
+		dataSource,
+		dataField,
+		null
+	);
+
+	// Contexto de validação (opcional - pode não existir)
+	const validationContext = useValidationErrors();
+
+	// Chave única para o field
+	const fieldKey = `${dataField}`;
+
+	// Recuperar erro do contexto se existir
+	const contextError = validationContext?.getError(fieldKey);
+
+	// 🔄 MIGRAÇÃO V1/V2: Debug info para desenvolvimento
+	if (process.env.NODE_ENV === 'development' && dataSource) {
+	}
+
+	// ✅ CORRIGIDO: Apenas atualizar se o prop error vier definido
+	// Não limpar o internalError se o prop error for undefined
+	useEffect(() => {
+		if (error !== undefined && error !== internalError) {
+			setInternalError(error);
+		}
+	}, [error]);
+  
+	const loadDataSourceFieldValue = () => {
+	  let initialValue: Date | null = currentValue;
+
+	  if (dataSource && dataField) {
+		const rawValue = dataSource.getFieldValue(dataField);
+		if (!rawValue) {
+		  initialValue = null;
+		} else if (rawValue instanceof Date) {
+		  // Verificar se é uma data válida
+		  initialValue = isNaN(rawValue.getTime()) ? null : rawValue;
+		} else if (typeof rawValue === 'string') {
+		  // Converter string ISO para Date
+		  const date = new Date(rawValue);
+		  initialValue = isNaN(date.getTime()) ? null : date;
+		} else {
+		  initialValue = null;
+		}
+	  }
+
+	  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();
+		  // 🔄 MIGRAÇÃO V1/V2: forceUpdate apenas para V1
+		  if (!v1v2Compatibility.isDataSourceV2) {
+			forceUpdate();
+		  }
+		}
+
+		if (event.type === DataSourceEventNames.onFieldError && event.fieldName === dataField) {
+		  setInternalError(event.error);
+		  // Salvar no contexto (se disponível)
+		  validationContext?.setError(fieldKey, event.error);
+		}
+	  }
+	}, [v1v2Compatibility.isDataSourceV2, validationContext, fieldKey]);
+  
+	// Ref para manter callback sempre atualizado (corrige problema de closure desatualizada)
+	const dataSourceEventRef = useRef(dataSourceEvent);
+	useEffect(() => {
+		dataSourceEventRef.current = dataSourceEvent;
+	}, [dataSourceEvent]);
+
+	// Wrapper estável que delega para ref
+	const stableDataSourceEvent = useCallback((event: DataSourceEvent<T>) => {
+		dataSourceEventRef.current(event);
+	}, []);
+
+	// Registrar listeners com cleanup apropriado
+useEffect(() => {
+  loadDataSourceFieldValue();
+	if (dataSource && dataField) {
+		const hasFieldListener = typeof (dataSource as any).addFieldChangeListener === 'function';
+		dataSource.addListener(stableDataSourceEvent);
+		if (hasFieldListener) {
+			(dataSource as any).addFieldChangeListener(dataField, fieldChangedListener);
+		}
+
+		return () => {
+			dataSource.removeListener(stableDataSourceEvent);
+			if (hasFieldListener) {
+				(dataSource as any).removeFieldChangeListener(dataField, fieldChangedListener);
+			}
+		};
+	}
+}, [dataSource, dataField, stableDataSourceEvent, fieldChangedListener]);
+
+	useArchbaseDidUpdate(() => {
+	  loadDataSourceFieldValue();
+	}, []);
+
+	const handleChange = (changedValue: string | null) => {
+	  // ✅ Limpa erro quando usuário edita o campo (tanto do estado local quanto do contexto)
+	  const hasError = internalError || contextError;
+	  if (hasError) {
+		setInternalError(undefined);
+		validationContext?.clearError(fieldKey);
+	  }
+
+	  // Mantine DateTimePicker retorna string | null, converter para Date
+	  const dateValue = changedValue ? new Date(changedValue) : null;
+	  // Validar se a data é válida
+	  const validDate = dateValue && !isNaN(dateValue.getTime()) ? dateValue : null;
+	  setCurrentValue(validDate);
+
+	  // 🔄 MIGRAÇÃO V1/V2: Usar handleValueChange do padrão de compatibilidade
+	  v1v2Compatibility.handleValueChange(validDate);
+
+	  if (onChange) {
+		onChange(validDate);
+	  }
+
+	  if (onChangeValue) {
+		onChangeValue(validDate);
+	  }
+	};
+  
+	const handleOnFocusExit = (event) => {
+	  if (onFocusExit) {
+		onFocusExit(event);
+	  }
+	};
+  
+	const handleOnFocusEnter = (event) => {
+	  if (onFocusEnter) {
+		onFocusEnter(event);
+	  }
+	};
+  
+	const isReadOnly = () => {
+	  // 🔄 MIGRAÇÃO V1/V2: Usar padrão de compatibilidade para isReadOnly
+	  return readOnly || v1v2Compatibility.isReadOnly;
+	};
+
+	// Erro a ser exibido: local ou do contexto
+	const displayError = internalError || contextError;
+
+	return (
+	  <DateTimePicker
+		{...rest}
+		disabled={disabled}
+		readOnly={isReadOnly()}
+		value={currentValue}
+		onChange={handleChange}
+		onBlur={handleOnFocusExit}
+		onFocus={handleOnFocusEnter}
+		ref={ref}
+		required={required}
+		error={displayError}
+		style={{
+		  width,
+		  ...style,
+		}}
+	  />
+	);
+  }
+  
+  export const ArchbaseDateTimePickerEdit = React.forwardRef(
+	<T, ID>(
+	  props: ArchbaseDateTimePickerEditProps<T, ID>,
+	  ref: ForwardedRef<HTMLButtonElement>
+	) => ArchbaseDateTimePickerEditComponent<T, ID>({ ...props }, ref)
+  ) as <T, ID>(
+	props: ArchbaseDateTimePickerEditProps<T, ID> & { ref?: ForwardedRef<HTMLButtonElement> }
+  ) => React.JSX.Element;
+  
+  (ArchbaseDateTimePickerEdit as any).displayName = 'ArchbaseDateTimePickerEdit';

package/src/editors/ArchbaseDateTimePickerRange.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseDateTimePickerRange.d.ts","sourceRoot":"","sources":["ArchbaseDateTimePickerRange.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAe,WAAW,EAAE,MAAM,eAAe,CAAC;AAEzD,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAEzD,MAAM,WAAW,gCAAgC,CAAC,CAAC,EAAE,EAAE;IACrD,0DAA0D;IAC1D,UAAU,CAAC,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACvC,8CAA8C;IAC9C,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qDAAqD;IACrD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,6DAA6D;IAC7D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,CAAC;IACnC,qCAAqC;IACrC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,oCAAoC;IACpC,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC,gCAAgC;IAChC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,oCAAoC;IACpC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qCAAqC;IACrC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,IAAI,GAAG,IAAI,EAAE,IAAI,GAAG,IAAI,CAAC,KAAK,IAAI,CAAC;IAC5D,0BAA0B;IAC1B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACnE,wBAAwB;IACxB,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACjE,2BAA2B;IAC3B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,2BAA2B;IAC3B,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,kBAAkB;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,8BAA8B;IAC9B,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;CACxC;AAED,wBAAgB,2BAA2B,CAAC,CAAC,EAAE,EAAE,EAAE,EACjD,UAAU,EACV,cAAc,EACd,YAAY,EACZ,KAAK,EACL,QAAgB,EAChB,QAAgB,EAChB,IAAI,EACJ,KAAK,EACL,KAAK,EACL,WAAW,EACX,aAAa,EACb,gBAAgB,EAChB,cAAc,EACd,IAAI,EACJ,KAAK,EACL,KAAK,EACL,OAAO,EACP,OAAO,EACP,WAAgC,EAChC,WAAmB,EACnB,gBAAgB,EAChB,QAAgB,GACjB,EAAE,gCAAgC,CAAC,CAAC,EAAE,EAAE,CAAC,2CAuGzC;yBA9He,2BAA2B"}

package/src/editors/ArchbaseDateTimePickerRange.tsx

@@ -0,0 +1,220 @@
+import { Flex, Input, MantineSize } from '@mantine/core';
+import { IconArrowRight, IconCalendar } from '@tabler/icons-react';
+import React, { useState, useEffect } from 'react';
+import { CSSProperties, ReactNode } from 'react';
+import { ArchbaseDateTimePickerEdit } from './ArchbaseDateTimePickerEdit';
+import type { ArchbaseDataSource, IArchbaseDataSourceBase } from '@archbase/data';
+import { useValidationErrors } from '@archbase/core';
+
+export interface ArchbaseDateTimePickerRangeProps<T, ID> {
+  /** Data source where the range values will be assigned (V1 ou V2) */
+  dataSource?: IArchbaseDataSourceBase<T>;
+  /** Field for start date in the data source */
+  dataFieldStart?: string;
+  /** Field for end date in the data source */
+  dataFieldEnd?: string;
+  /** Indicates if the date picker range is disabled */
+  disabled?: boolean;
+  /** Indicates if the date picker range is read-only */
+  readOnly?: boolean;
+  /** Indicates if filling the date picker range is required */
+  required?: boolean;
+  /** Initial value */
+  value?: [Date | null, Date | null];
+  /** Style of the date picker range */
+  style?: CSSProperties;
+  /** Size of the date picker range */
+  size?: MantineSize;
+  /** Width of the date picker range */
+  width?: string | number | undefined;
+  /** Custom right section icon */
+  icon?: ReactNode;
+  /** Placeholder text for start date */
+  placeholderStart?: string;
+  /** Placeholder text for end date */
+  placeholderEnd?: string;
+  /** Label for the date picker range */
+  label?: string;
+  /** Description for the date picker range */
+  description?: string;
+  /** Error message */
+  error?: string;
+  /** Event when range value changes */
+  onRangeChange?: (value: [Date | null, Date | null]) => void;
+  /** Event when key down */
+  onKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  /** Event when key up */
+  onKeyUp?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
+  /** Minimum date allowed */
+  minDate?: Date;
+  /** Maximum date allowed */
+  maxDate?: Date;
+  /** Date format */
+  valueFormat?: string;
+  /** With seconds input */
+  withSeconds?: boolean;
+  /** Clear button properties */
+  clearButtonProps?: Record<string, any>;
+}
+
+export function ArchbaseDateTimePickerRange<T, ID>({
+  dataSource,
+  dataFieldStart,
+  dataFieldEnd,
+  label,
+  disabled = false,
+  readOnly = false,
+  size,
+  width,
+  style,
+  description,
+  onRangeChange,
+  placeholderStart,
+  placeholderEnd,
+  icon,
+  error,
+  value,
+  minDate,
+  maxDate,
+  valueFormat = "DD/MM/YYYY HH:mm",
+  withSeconds = false,
+  clearButtonProps,
+  required = false,
+}: ArchbaseDateTimePickerRangeProps<T, ID>) {
+  const [startDate, setStartDate] = useState<Date | null>(value?.[0] || null);
+  const [endDate, setEndDate] = useState<Date | null>(value?.[1] || null);
+  const [internalError, setInternalError] = useState<string | undefined>(error);
+
+  // Contexto de validação (opcional - pode não existir)
+  const validationContext = useValidationErrors();
+
+  // Chave única para o field (usando combinação de dataFieldStart/End ou label)
+  const fieldKey = dataFieldStart && dataFieldEnd ? `${dataFieldStart}-${dataFieldEnd}` : label || 'datetime-picker-range';
+
+  // Recuperar erro do contexto se existir
+  const contextError = validationContext?.getError(fieldKey);
+
+  useEffect(() => {
+    if (error !== undefined && error !== internalError) {
+      setInternalError(error);
+    }
+  }, [error]);
+
+  useEffect(() => {
+    if (value) {
+      setStartDate(value[0]);
+      setEndDate(value[1]);
+    }
+  }, [value]);
+
+  const handleStartDateChange = (date: Date | null) => {
+    // ✅ Limpa erro quando usuário edita o campo (tanto do estado local quanto do contexto)
+    const hasError = internalError || contextError;
+    if (hasError) {
+      setInternalError(undefined);
+      validationContext?.clearError(fieldKey);
+    }
+
+    setStartDate(date);
+    if (onRangeChange) {
+      onRangeChange([date, endDate]);
+    }
+  };
+
+  const handleEndDateChange = (date: Date | null) => {
+    // ✅ Limpa erro quando usuário edita o campo (tanto do estado local quanto do contexto)
+    const hasError = internalError || contextError;
+    if (hasError) {
+      setInternalError(undefined);
+      validationContext?.clearError(fieldKey);
+    }
+
+    setEndDate(date);
+    if (onRangeChange) {
+      onRangeChange([startDate, date]);
+    }
+  };
+
+  const validateDateRange = (start: Date | null, end: Date | null): boolean => {
+    if (start && end && start > end) {
+      const errorMsg = 'Data inicial não pode ser maior que a data final';
+      setInternalError(errorMsg);
+      // Salvar no contexto (se disponível)
+      validationContext?.setError(fieldKey, errorMsg);
+      return false;
+    }
+    setInternalError(undefined);
+    validationContext?.clearError(fieldKey);
+    return true;
+  };
+
+  // Erro a ser exibido: local ou do contexto
+  const displayError = internalError || contextError;
+
+  return (
+    <Input.Wrapper
+      label={label}
+      size={size}
+      error={displayError}
+      description={description}
+      style={{
+        width,
+        ...style,
+      }}
+    >
+      <Flex gap="sm" justify="flex-start" align="center" direction="row">
+        <ArchbaseDateTimePickerEdit
+          dataSource={dataSource}
+          dataField={dataFieldStart}
+          clearable
+          rightSection={icon || <IconCalendar size="1rem" />}
+          readOnly={readOnly}
+          placeholder={placeholderStart}
+          disabled={disabled}
+          value={startDate}
+          onChangeValue={handleStartDateChange}
+          error={internalError}
+          style={{ width: width ? width : 180 }}
+          minDate={minDate}
+          maxDate={endDate || maxDate}
+          valueFormat={valueFormat}
+          withSeconds={withSeconds}
+          clearButtonProps={clearButtonProps}
+          required={required}
+          onChange={(value) => {
+            if (validateDateRange(value, endDate)) {
+              handleStartDateChange(value);
+            }
+          }}
+        />
+        <IconArrowRight size="1rem" />
+        <ArchbaseDateTimePickerEdit
+          dataSource={dataSource}
+          dataField={dataFieldEnd}
+          clearable
+          rightSection={icon || <IconCalendar size="1rem" />}
+          placeholder={placeholderEnd}
+          readOnly={readOnly}
+          disabled={disabled}
+          value={endDate}
+          onChangeValue={handleEndDateChange}
+          error={internalError}
+          style={{ width: width ? width : 180 }}
+          minDate={startDate || minDate}
+          maxDate={maxDate}
+          valueFormat={valueFormat}
+          withSeconds={withSeconds}
+          clearButtonProps={clearButtonProps}
+          required={required}
+          onChange={(value) => {
+            if (validateDateRange(startDate, value)) {
+              handleEndDateChange(value);
+            }
+          }}
+        />
+      </Flex>
+    </Input.Wrapper>
+  );
+}
+
+ArchbaseDateTimePickerRange.displayName = 'ArchbaseDateTimePickerRange';

package/src/editors/ArchbaseEdit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArchbaseEdit.d.ts","sourceRoot":"","sources":["ArchbaseEdit.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEN,iBAAiB,EACjB,WAAW,EAKX,MAAM,eAAe,CAAC;AAEvB,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,kBAAkB,EAAmB,MAAM,gBAAgB,CAAC;AAI1E,MAAM,WAAW,iBAAiB,CAAC,CAAC,EAAE,EAAE;IACvC,yDAAyD;IACzD,UAAU,CAAC,EAAE,kBAAkB,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IACvC,wEAAwE;IACxE,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mGAAmG;IACnG,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yDAAyD;IACzD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,sBAAsB;IACtB,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,sBAAsB;IACtB,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACpC,sBAAsB;IACtB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,gCAAgC;IAChC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oDAAoD;IACpD,qBAAqB,CAAC,EAAE,MAAM,IAAI,CAAC;IACnC,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,wBAAwB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAC/C,yCAAyC;IACzC,YAAY,CAAC,EAAE,iBAAiB,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC;IAChD,+CAA+C;IAC/C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACjD,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IACjC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,GAAG,KAAK,IAAI,CAAC;IAC/B,2CAA2C;IAC3C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,GAAG,SAAS,CAAC;IACzD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,YAAY,CAAC,CAAC,EAAE,EAAE,EAAE,EACnC,UAAU,EACV,SAAS,EACT,QAAgB,EAChB,QAAgB,EAChB,KAAK,EACL,WAAW,EACX,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,IAAI,EACJ,SAAS,EACT,OAAO,EACP,qBAAqB,EACrB,iBAAgD,EAChD,WAAsB,EACtB,YAAuB,EACvB,aAAwB,EACxB,OAAO,EACP,SAAS,EACT,SAAS,EACT,EAAE,iBAAiB,CAAC,CAAC,EAAE,EAAE,CAAC,2CAsL1B"}