@openg2p/registry-widgets 1.1.0-dev.13 → 1.1.0-dev.15

package/dist/index.js

@@ -808,6 +808,40 @@ const parseDateFromFormat = (dateString, format) => {
     }
     return parseDate(dateString);
 };
+/**
+ * Resolve a stored date value (ISO or parseable string) to YYYY-MM-DD for comparisons.
+ */
+const resolveDateBoundFromFieldValue = (fieldValue) => {
+    if (fieldValue == null || fieldValue === '') {
+        return undefined;
+    }
+    const iso = formatDateToISO(fieldValue);
+    return iso || undefined;
+};
+/**
+ * Pick the stricter (later) minimum when combining static and field-based bounds.
+ */
+const mergeMinDateBounds = (boundA, boundB) => {
+    if (!boundA) {
+        return boundB;
+    }
+    if (!boundB) {
+        return boundA;
+    }
+    return boundA > boundB ? boundA : boundB;
+};
+/**
+ * Pick the stricter (earlier) maximum when combining static and field-based bounds.
+ */
+const mergeMaxDateBounds = (boundA, boundB) => {
+    if (!boundA) {
+        return boundB;
+    }
+    if (!boundB) {
+        return boundA;
+    }
+    return boundA < boundB ? boundA : boundB;
+};
 /**
  * Get min date based on constraint type
  */
@@ -850,10 +884,7 @@ const getMaxDate = (constraint, maxDate) => {
     }
     return undefined;
 };
-/**
- * Validate date constraints
- */
-const validateDateConstraints = (date, minDate, maxDate, constraint) => {
+const validateDateConstraints = (date, minDate, maxDate, constraint, messages) => {
     if (!date)
         return null;
     const dateObj = date instanceof Date ? date : parseDate(date);
@@ -872,15 +903,12 @@ const validateDateConstraints = (date, minDate, maxDate, constraint) => {
             return 'Date must be in the future';
         }
     }
-    // Check minDate
-    const effectiveMinDate = getMinDate(constraint, minDate);
-    if (effectiveMinDate && dateISO < effectiveMinDate) {
-        return `Date must be on or after ${effectiveMinDate}`;
+    // minDate / maxDate are effective bounds (static + field-based), resolved by the caller
+    if (minDate && dateISO < minDate) {
+        return messages?.minDateMessage ?? `Date must be on or after ${minDate}`;
     }
-    // Check maxDate
-    const effectiveMaxDate = getMaxDate(constraint, maxDate);
-    if (effectiveMaxDate && dateISO > effectiveMaxDate) {
-        return `Date must be on or before ${effectiveMaxDate}`;
+    if (maxDate && dateISO > maxDate) {
+        return messages?.maxDateMessage ?? `Date must be on or before ${maxDate}`;
     }
     return null;
 };
@@ -7648,42 +7676,76 @@ const BooleanWidget = ({ config }) => {
 };
 
 const DateInputWidget = ({ config }) => {
-    const { value, formattedValue, error, touched, isEnabled, onChange, onBlur, config: widgetConfig, } = useBaseWidget({ config });
-    const { translate, translateConfig } = useWidgetTranslation();
+    const { value, error, touched, isEnabled, onChange, onBlur, setError, config: widgetConfig, } = useBaseWidget({ config });
+    const formValues = reactRedux.useSelector((state) => state.widget.values);
+    const { translateConfig } = useWidgetTranslation();
     const formatConfig = widgetConfig['widget-data-format'];
     const optionsConfig = widgetConfig['widget-data-options'];
     const dateFormat = formatConfig?.dateFormat || 'YYYY-MM-DD';
-    const inputMethod = formatConfig?.inputMethod || 'picker'; // Default to picker for better UX
+    const inputMethod = formatConfig?.inputMethod || 'picker';
     const dateConstraint = formatConfig?.dateConstraint || 'any';
     const minDate = optionsConfig?.minDate;
     const maxDate = optionsConfig?.maxDate;
+    const minDateField = optionsConfig?.minDateField;
+    const maxDateField = optionsConfig?.maxDateField;
+    const minDateMessage = optionsConfig?.minDateMessage
+        ? translateConfig(optionsConfig.minDateMessage)
+        : undefined;
+    const maxDateMessage = optionsConfig?.maxDateMessage
+        ? translateConfig(optionsConfig.maxDateMessage)
+        : undefined;
     const defaultToToday = widgetConfig['widget-data-default'] === 'today';
-    // Track manual input value (for manual/hybrid modes)
     const [manualInputValue, setManualInputValue] = React.useState('');
     const [isFocused, setIsFocused] = React.useState(false);
-    // Initialize default value to today if configured
+    const fieldMinDate = React.useMemo(() => {
+        if (!minDateField) {
+            return undefined;
+        }
+        return resolveDateBoundFromFieldValue(getValueByPath(formValues, minDateField));
+    }, [formValues, minDateField]);
+    const fieldMaxDate = React.useMemo(() => {
+        if (!maxDateField) {
+            return undefined;
+        }
+        return resolveDateBoundFromFieldValue(getValueByPath(formValues, maxDateField));
+    }, [formValues, maxDateField]);
+    const effectiveMinDate = React.useMemo(() => {
+        const staticMin = getMinDate(dateConstraint, minDate);
+        return mergeMinDateBounds(staticMin, fieldMinDate);
+    }, [dateConstraint, minDate, fieldMinDate]);
+    const effectiveMaxDate = React.useMemo(() => {
+        const staticMax = getMaxDate(dateConstraint, maxDate);
+        return mergeMaxDateBounds(staticMax, fieldMaxDate);
+    }, [dateConstraint, maxDate, fieldMaxDate]);
+    const constraintMessages = React.useMemo(() => ({ minDateMessage, maxDateMessage }), [minDateMessage, maxDateMessage]);
+    const runDateConstraintValidation = React.useCallback((dateValue) => {
+        if (!dateValue) {
+            return null;
+        }
+        return validateDateConstraints(dateValue, effectiveMinDate, effectiveMaxDate, dateConstraint, constraintMessages);
+    }, [effectiveMinDate, effectiveMaxDate, dateConstraint, constraintMessages]);
     React.useEffect(() => {
         if (defaultToToday && (value === null || value === undefined || value === '')) {
             const todayISO = formatDateToISO(new Date());
             onChange(todayISO);
         }
     }, [defaultToToday, value, onChange]);
-    // Get effective min/max dates
-    const effectiveMinDate = React.useMemo(() => {
-        return getMinDate(dateConstraint, minDate);
-    }, [dateConstraint, minDate]);
-    const effectiveMaxDate = React.useMemo(() => {
-        return getMaxDate(dateConstraint, maxDate);
-    }, [dateConstraint, maxDate]);
-    // Convert ISO value to display format
+    // Re-validate when a relative bound field changes (e.g. start date set after end date)
+    React.useEffect(() => {
+        if (!value) {
+            return;
+        }
+        const constraintError = runDateConstraintValidation(value);
+        if (constraintError) {
+            setError([constraintError]);
+        }
+    }, [fieldMinDate, fieldMaxDate, value, runDateConstraintValidation, setError]);
     const getDisplayValue = React.useCallback(() => {
-        // For picker mode, always use YYYY-MM-DD
         if (inputMethod === 'picker') {
             if (!value)
                 return '';
             return formatDateToISO(value);
         }
-        // For manual/hybrid modes, use custom format
         if (isFocused && manualInputValue) {
             return manualInputValue;
         }
@@ -7694,7 +7756,6 @@ const DateInputWidget = ({ config }) => {
         }
         return formatDateToString(value, dateFormat);
     }, [value, inputMethod, dateFormat, isFocused, manualInputValue]);
-    // Initialize manual input value
     React.useEffect(() => {
         if (!isFocused && value) {
             if (dateFormat === 'YYYY-MM-DD') {
@@ -7705,66 +7766,81 @@ const DateInputWidget = ({ config }) => {
             }
         }
     }, [value, dateFormat, isFocused]);
-    // Handle input change
+    const applyConstraintError = React.useCallback((dateValue) => {
+        const constraintError = runDateConstraintValidation(dateValue);
+        setError(constraintError ? [constraintError] : []);
+    }, [runDateConstraintValidation, setError]);
     const handleChange = React.useCallback((e) => {
         const inputValue = e.target.value;
         if (inputMethod === 'picker') {
-            // Picker mode: input is always YYYY-MM-DD
             if (inputValue) {
                 const date = parseDate(inputValue);
                 if (date) {
-                    onChange(formatDateToISO(date));
+                    const iso = formatDateToISO(date);
+                    onChange(iso);
+                    applyConstraintError(iso);
                 }
                 else {
                     onChange('');
+                    setError([]);
                 }
             }
             else {
                 onChange('');
+                setError([]);
             }
         }
         else {
-            // Manual/hybrid mode: parse custom format
             setManualInputValue(inputValue);
             if (inputValue) {
                 const date = parseDateFromFormat(inputValue, dateFormat);
                 if (date) {
-                    // Validate constraints
-                    const constraintError = validateDateConstraints(date, minDate, maxDate, dateConstraint);
-                    if (!constraintError) {
-                        onChange(formatDateToISO(date));
-                    }
-                    else {
-                        // Still update the value but validation will catch it
-                        onChange(formatDateToISO(date));
-                    }
+                    const iso = formatDateToISO(date);
+                    onChange(iso);
+                    applyConstraintError(iso);
                 }
             }
             else {
                 onChange('');
+                setError([]);
             }
         }
-    }, [inputMethod, dateFormat, onChange, minDate, maxDate, dateConstraint]);
-    // Handle blur - validate and format
+    }, [inputMethod, dateFormat, onChange, applyConstraintError, setError]);
     const handleBlur = React.useCallback(() => {
         setIsFocused(false);
         if (inputMethod !== 'picker' && manualInputValue) {
             const date = parseDateFromFormat(manualInputValue, dateFormat);
             if (date) {
-                // Format the value according to the format
                 const formatted = formatDateToString(date, dateFormat);
                 setManualInputValue(formatted);
-                onChange(formatDateToISO(date));
+                const iso = formatDateToISO(date);
+                onChange(iso);
+                applyConstraintError(iso);
             }
             else {
-                // Invalid date, clear it
                 setManualInputValue('');
                 onChange('');
+                setError([]);
             }
         }
         onBlur();
-    }, [inputMethod, manualInputValue, dateFormat, onChange, onBlur]);
-    // Handle focus
+        if (value) {
+            const constraintError = runDateConstraintValidation(value);
+            if (constraintError) {
+                setError([constraintError]);
+            }
+        }
+    }, [
+        inputMethod,
+        manualInputValue,
+        dateFormat,
+        onChange,
+        onBlur,
+        applyConstraintError,
+        value,
+        runDateConstraintValidation,
+        setError,
+    ]);
     const handleFocus = React.useCallback(() => {
         setIsFocused(true);
         if (value) {
@@ -7776,15 +7852,15 @@ const DateInputWidget = ({ config }) => {
             }
         }
     }, [value, dateFormat]);
-    // Determine placeholder
     const placeholder = React.useMemo(() => {
-        const hasValue = getDisplayValue() && getDisplayValue().trim().length > 0;
+        const display = getDisplayValue();
+        const hasValue = display && display.trim().length > 0;
         const placeholderText = translateConfig(widgetConfig['widget-data-placeholder']);
-        return hasValue ? undefined : (placeholderText || dateFormat);
+        return hasValue ? undefined : placeholderText || dateFormat;
     }, [getDisplayValue, widgetConfig, translateConfig, dateFormat]);
-    // Determine input type
     const inputType = inputMethod === 'picker' ? 'date' : 'text';
-    // For readonly mode, render as display text
+    const showRequiredError = widgetConfig['widget-required'] && (!value || value === '');
+    const showValidationError = touched && error.length > 0;
     if (widgetConfig['widget-readonly']) {
         const label = translateConfig(widgetConfig['widget-label']);
         let displayValue = '';
@@ -7801,9 +7877,9 @@ const DateInputWidget = ({ config }) => {
         }
         return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] DateDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: label, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("input", { type: inputType, value: getDisplayValue(), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: placeholder, min: inputMethod === 'picker' ? effectiveMinDate : undefined, max: inputMethod === 'picker' ? effectiveMaxDate : undefined, className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${(touched && error.length > 0) || (widgetConfig['widget-required'] && (!value || value === ''))
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, title: translateConfig(widgetConfig['widget-label']), children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" })] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("input", { type: inputType, value: getDisplayValue(), onChange: handleChange, onBlur: handleBlur, onFocus: handleFocus, disabled: !isEnabled || widgetConfig['widget-readonly'], placeholder: placeholder, min: inputMethod === 'picker' ? effectiveMinDate : undefined, max: inputMethod === 'picker' ? effectiveMaxDate : undefined, className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${showValidationError || showRequiredError
                                 ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
-                                : 'border-gray-300'} ${!isEnabled || widgetConfig['widget-readonly'] ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: { borderRadius: '10px' }, title: translateConfig(widgetConfig['widget-data-tooltip']) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
+                                : 'border-gray-300'} ${!isEnabled || widgetConfig['widget-readonly'] ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: { borderRadius: '10px' }, title: translateConfig(widgetConfig['widget-data-tooltip']) }), showValidationError && jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] })] })] }) }));
 };
 
 /**
@@ -8747,16 +8823,70 @@ const TableCellNumber = ({ config, value, onValueChange }) => {
             backgroundColor: isReadonly ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
         } }));
 };
-const TableCellDate = ({ config, value, onValueChange }) => {
+const TableCellDate = ({ config, value, rowValues, onValueChange }) => {
+    const { translateConfig } = useWidgetTranslation();
     const isReadonly = config['widget-readonly'] || false;
     const placeholder = config['widget-data-placeholder'] || '';
+    const optionsConfig = config['widget-data-options'];
+    const formatConfig = config['widget-data-format'];
+    const dateConstraint = formatConfig?.dateConstraint || 'any';
+    const minDate = optionsConfig?.minDate;
+    const maxDate = optionsConfig?.maxDate;
+    const minDateField = optionsConfig?.minDateField;
+    const maxDateField = optionsConfig?.maxDateField;
+    const minDateMessage = optionsConfig?.minDateMessage
+        ? translateConfig(optionsConfig.minDateMessage)
+        : undefined;
+    const maxDateMessage = optionsConfig?.maxDateMessage
+        ? translateConfig(optionsConfig.maxDateMessage)
+        : undefined;
+    const [constraintError, setConstraintError] = React.useState(null);
+    const resolveSiblingDate = (fieldRef) => {
+        if (!fieldRef || !rowValues) {
+            return undefined;
+        }
+        const raw = getValueByPath(rowValues, fieldRef) ?? rowValues[fieldRef];
+        return resolveDateBoundFromFieldValue(raw);
+    };
+    const fieldMinDate = React.useMemo(() => resolveSiblingDate(minDateField), [minDateField, rowValues]);
+    const fieldMaxDate = React.useMemo(() => resolveSiblingDate(maxDateField), [maxDateField, rowValues]);
+    const effectiveMinDate = React.useMemo(() => {
+        const staticMin = getMinDate(dateConstraint, minDate);
+        return mergeMinDateBounds(staticMin, fieldMinDate);
+    }, [dateConstraint, minDate, fieldMinDate]);
+    const effectiveMaxDate = React.useMemo(() => {
+        const staticMax = getMaxDate(dateConstraint, maxDate);
+        return mergeMaxDateBounds(staticMax, fieldMaxDate);
+    }, [dateConstraint, maxDate, fieldMaxDate]);
+    const constraintMessages = React.useMemo(() => ({ minDateMessage, maxDateMessage }), [minDateMessage, maxDateMessage]);
     // input type="date" requires YYYY-MM-DD format
     const displayValue = value && typeof value === 'string' ? value.split('T')[0] : '';
-    return (jsxRuntimeExports.jsx("input", { type: "date", value: displayValue, onChange: (e) => onValueChange(e.target.value), disabled: isReadonly, placeholder: placeholder, className: `w-full h-[28px] px-2 text-sm border focus:outline-none ${isReadonly ? 'cursor-not-allowed' : ''} table-cell-input`, style: {
-            borderRadius: '10px',
-            borderColor: 'var(--owt-widget-input-border, #C4C4C4)',
-            backgroundColor: isReadonly ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
-        } }));
+    React.useEffect(() => {
+        if (!displayValue) {
+            setConstraintError(null);
+            return;
+        }
+        const error = validateDateConstraints(displayValue, effectiveMinDate, effectiveMaxDate, dateConstraint, constraintMessages);
+        setConstraintError(error);
+    }, [displayValue, effectiveMinDate, effectiveMaxDate, dateConstraint, constraintMessages]);
+    const handleChange = (e) => {
+        const nextValue = e.target.value;
+        onValueChange(nextValue);
+        if (!nextValue) {
+            setConstraintError(null);
+            return;
+        }
+        const error = validateDateConstraints(nextValue, effectiveMinDate, effectiveMaxDate, dateConstraint, constraintMessages);
+        setConstraintError(error);
+    };
+    const hasError = Boolean(constraintError);
+    return (jsxRuntimeExports.jsxs("div", { className: "w-full", children: [jsxRuntimeExports.jsx("input", { type: "date", value: displayValue, onChange: handleChange, disabled: isReadonly, placeholder: placeholder, min: effectiveMinDate, max: effectiveMaxDate, title: constraintError || translateConfig(config['widget-data-tooltip']), className: `w-full h-[28px] px-2 text-sm border focus:outline-none ${isReadonly ? 'cursor-not-allowed' : ''} ${hasError ? 'border-red-500' : ''} table-cell-input`, style: {
+                    borderRadius: '10px',
+                    borderColor: hasError
+                        ? 'var(--owt-color-error, #B91C1C)'
+                        : 'var(--owt-widget-input-border, #C4C4C4)',
+                    backgroundColor: isReadonly ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
+                } }), hasError && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-xs mt-0.5 leading-tight", children: constraintError }))] }));
 };
 const TableWidget = ({ config }) => {
     const { value, error, touched, isEnabled, onChange, config: widgetConfig, } = useBaseWidget({ config });
@@ -9115,11 +9245,21 @@ const TableWidget = ({ config }) => {
             });
         }
     }, [isAdding, newRowData, columns, widgetConfig, rows.length, dispatch]);
+    const getRowValuesForEdit = React.useCallback((rowIndex) => {
+        if (editingState && editingState.rowIndex === rowIndex) {
+            return editingState.currentValue ?? {};
+        }
+        if (isAdding && rowIndex === rows.length && newRowData) {
+            return newRowData;
+        }
+        return rows[rowIndex] ?? {};
+    }, [editingState, isAdding, rows, newRowData]);
     // Lightweight cell renderer for table cells (no labels, compact)
     const renderTableCell = React.useCallback((rowIndex, column, cellValue, isReadonly) => {
         const columnKey = column['column-key'];
         const widgetType = column.widget || 'text';
         const cellWidgetId = `${widgetConfig['widget-id']}-row-${rowIndex}-col-${columnKey}`;
+        const rowValues = getRowValuesForEdit(rowIndex);
         // Use lightweight cell config (no label, minimal styling)
         const cellConfig = {
             ...column,
@@ -9142,7 +9282,7 @@ const TableWidget = ({ config }) => {
             return jsxRuntimeExports.jsx(TableCellNumber, { config: cellConfig, value: cellValue, onValueChange: (newValue) => updateCellValue(columnKey, newValue, rowIndex) });
         }
         else if (widgetType === 'date') {
-            return jsxRuntimeExports.jsx(TableCellDate, { config: cellConfig, value: cellValue, onValueChange: (newValue) => updateCellValue(columnKey, newValue, rowIndex) });
+            return jsxRuntimeExports.jsx(TableCellDate, { config: cellConfig, value: cellValue, rowValues: rowValues, onValueChange: (newValue) => updateCellValue(columnKey, newValue, rowIndex) });
         }
         // For other widget types, use WidgetRenderer but with compact styling
         return (jsxRuntimeExports.jsx("div", { className: "table-cell-widget", style: { margin: 0, padding: 0 }, children: jsxRuntimeExports.jsx(WidgetRenderer, { config: cellConfig, schemaData: {
@@ -9150,7 +9290,7 @@ const TableWidget = ({ config }) => {
                 }, onValueChange: (widgetId, newValue) => {
                     updateCellValue(columnKey, newValue, rowIndex);
                 } }) }));
-    }, [widgetConfig, updateCellValue]);
+    }, [widgetConfig, updateCellValue, getRowValuesForEdit]);
     // Render cell content (widget in edit mode, formatted value in view mode)
     const renderCell = React.useCallback((rowIndex, column, row) => {
         const columnKey = column['column-key'];