@sustaina/shared-ui 1.70.6 → 1.70.8

package/dist/index.mjs

@@ -15,7 +15,7 @@ import { createPortal } from 'react-dom';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import { useForm, FormProvider, Controller, useFormContext, useFormState, useFieldArray, useWatch } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
-import { format, isValid, parseISO, isAfter, compareAsc, parse } from 'date-fns';
+import { format, isValid, parseISO, compareAsc, parse, isAfter } from 'date-fns';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { Command as Command$1 } from 'cmdk';
 import * as DialogPrimitive2 from '@radix-ui/react-dialog';
@@ -5500,6 +5500,77 @@ var DatePicker2 = (props) => {
 // src/components/advanceSearch/components/constants/index.ts
 var fallbackShortDateFormat = "DD/MM/YYYY";
 var UUIDregex = /^[0-9a-f]{8}-?[0-9a-f]{4}-?4[0-9a-f]{3}-?[89ab][0-9a-f]{3}-?[0-9a-f]{12}$/i;
+var RANGE_START_ERROR = "Start value must be before end value.";
+var RANGE_END_ERROR = "End value must be after start value.";
+var RANGE_VALIDATED_TYPES = ["date", "datetime", "datemonth"];
+var sanitizeInput = (val) => {
+  if (!val) return val;
+  if (Array.isArray(val)) {
+    return val.map((v) => sanitizeInput(v));
+  }
+  if (val.includes("\n") || val.includes("\r") || /[\u2028\u2029]/u.test(val))
+    return "__INVALID_NEWLINE__";
+  if (/\\\\/.test(val)) return "__INVALID_ESCAPE__";
+  if (/\\(n|t|r|b|f|u[0-9a-fA-F]{4})/.test(val)) return "__INVALID_ESCAPE__";
+  if (/\p{Cf}/u.test(val)) return "__INVALID_UNICODE_WHITESPACE__";
+  if (/[\u00A0\u1680\u180E\u202F\u205F\u3000]/u.test(val)) return "__INVALID_UNICODE_WHITESPACE__";
+  const trimmed = val.trim();
+  if (/^\{.*\}$/s.test(trimmed) || /^\[.*\]$/s.test(trimmed)) return "__INVALID_JSON_LITERAL__";
+  if (/\\\{/.test(val) || /\\\}/.test(val)) return "__INVALID_JSON_ESCAPE__";
+  if (/[%*~^]/.test(trimmed)) return "__INVALID_WILDCARD__";
+  if (/[%><={}\\[\]"']/u.test(trimmed)) return "__INVALID_CHAR__";
+  if (/\p{Cc}/u.test(val)) return "__INVALID_CONTROL_CHAR__";
+  return val;
+};
+var numericTypes = ["number"];
+var dateTypes = ["date", "datemonth"];
+var validateByFieldType = (value, fieldType) => {
+  if (!value) return { valid: true };
+  if (Array.isArray(value)) {
+    return { valid: true };
+  }
+  if (numericTypes.includes(fieldType)) {
+    if (!/^-?\d+(\.\d+)?$/.test(value)) {
+      return { valid: false, message: "Please enter a valid number." };
+    }
+  }
+  if (fieldType === "uuid") {
+    if (!UUIDregex.test(value)) {
+      return { valid: false, message: "Please enter a valid UUID." };
+    }
+  }
+  if (dateTypes.includes(fieldType)) {
+    const normalized = fieldType === "datemonth" ? `${value}-01` : value;
+    const parsed = parseISO(normalized);
+    if (!isValid(parsed)) {
+      return { valid: false, message: "Invalid date format." };
+    }
+  }
+  return { valid: true };
+};
+var parseRangeValue = (raw, fieldType) => {
+  if (!raw) return void 0;
+  const normalized = fieldType === "datemonth" ? `${raw}-01` : raw;
+  const parsed = parseISO(normalized);
+  return isValid(parsed) ? parsed : void 0;
+};
+var validateDateRange = (which, row, formValues) => {
+  if (row.operator !== "between" || !RANGE_VALIDATED_TYPES.includes(row.fieldType)) return true;
+  const start = formValues[`value_${row.id}`];
+  const end = formValues[`value2_${row.id}`];
+  if (typeof start !== "string" || typeof end !== "string" || !start || !end) return true;
+  const d1 = parseRangeValue(start, row.fieldType);
+  const d2 = parseRangeValue(end, row.fieldType);
+  if (d1 && d2 && isAfter(d1, d2)) {
+    return which === "value" ? RANGE_START_ERROR : RANGE_END_ERROR;
+  }
+  return true;
+};
+var buildValueRules = (which, row) => ({
+  required: "This field is required.",
+  validate: (_value, formValues) => validateDateRange(which, row, formValues),
+  deps: [which === "value" ? `value2_${row.id}` : `value_${row.id}`]
+});
 var ConditionDateInput = ({
   row,
   control,
@@ -5523,8 +5594,9 @@ var ConditionDateInput = ({
     {
       control,
       name: fieldName,
-      rules: { required: "This field is required." },
+      rules: buildValueRules(which, row),
       render: ({ field, fieldState }) => {
+        const { value: fieldValue, ...fieldRest } = field;
         const handleValueChange = (next) => {
           field.onChange(next ?? void 0);
           if (!next) {
@@ -5535,8 +5607,8 @@ var ConditionDateInput = ({
           /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
             DatePicker2,
             {
-              ...field,
-              value: field.value || void 0,
+              ...fieldRest,
+              value: fieldValue || void 0,
               onValueChange: handleValueChange,
               placeholder: dateFormat,
               ariaLabel: buildAriaLabel(options?.isEnd),
@@ -5656,12 +5728,9 @@ function MonthCal({
   );
   const min = React.useMemo(() => normalizeMonth(minDate), [minDate]);
   const max = React.useMemo(() => normalizeMonth(maxDate), [maxDate]);
-  let effectiveMin = min;
-  if (min && max && min > max) {
-    effectiveMin = max;
-  }
-  const minYear = effectiveMin?.getFullYear();
-  const minMonth = effectiveMin?.getMonth();
+  const hasConflictingBounds = Boolean(min && max && min > max);
+  const minYear = min?.getFullYear();
+  const minMonth = min?.getMonth();
   const maxYear = max?.getFullYear();
   const maxMonth = max?.getMonth();
   const selectedMonthYear = selectedMonthDate?.getFullYear();
@@ -5674,6 +5743,7 @@ function MonthCal({
     }
   }, [selectedMonthYear]);
   React.useEffect(() => {
+    if (hasConflictingBounds) return;
     if (typeof minYear === "number" && menuYear < minYear) {
       setMenuYear(minYear);
       return;
@@ -5681,10 +5751,11 @@ function MonthCal({
     if (typeof maxYear === "number" && menuYear > maxYear) {
       setMenuYear(maxYear);
     }
-  }, [minYear, maxYear, menuYear]);
-  const disablePrevYear = typeof minYear === "number" ? menuYear <= minYear : false;
-  const disableNextYear = typeof maxYear === "number" ? menuYear >= maxYear : false;
+  }, [hasConflictingBounds, minYear, maxYear, menuYear]);
+  const disablePrevYear = hasConflictingBounds || (typeof minYear === "number" ? menuYear <= minYear : false);
+  const disableNextYear = hasConflictingBounds || (typeof maxYear === "number" ? menuYear >= maxYear : false);
   const yearOptions = React.useMemo(() => {
+    if (hasConflictingBounds) return [menuYear];
     const fallbackWindow = 50;
     const start = typeof minYear === "number" ? minYear : menuYear - fallbackWindow;
     const end = typeof maxYear === "number" ? maxYear : menuYear + fallbackWindow;
@@ -5697,7 +5768,7 @@ function MonthCal({
       years.sort((a, b) => a - b);
     }
     return years;
-  }, [maxYear, menuYear, minYear]);
+  }, [hasConflictingBounds, maxYear, menuYear, minYear]);
   const formatYearLabel = React.useCallback(
     (year) => {
       const raw = callbacks?.yearLabel?.(year);
@@ -5708,13 +5779,14 @@ function MonthCal({
   );
   const handleYearSelect = React.useCallback(
     (nextValue) => {
+      if (hasConflictingBounds) return;
       const nextYear = Number.parseInt(nextValue, 10);
       if (Number.isNaN(nextYear)) return;
       if (typeof minYear === "number" && nextYear < minYear) return;
       if (typeof maxYear === "number" && nextYear > maxYear) return;
       setMenuYear(nextYear);
     },
-    [maxYear, minYear]
+    [hasConflictingBounds, maxYear, minYear]
   );
   const disabledPairs = React.useMemo(() => {
     if (!disabledDates?.length) return [];
@@ -5799,7 +5871,7 @@ function MonthCal({
       const disabledByList = disabledPairs.some(
         (d) => d.year === menuYear && d.month === m.number
       );
-      const isDisabled = afterMax || beforeMin || disabledByList;
+      const isDisabled = hasConflictingBounds || afterMax || beforeMin || disabledByList;
       const cellDate = new Date(menuYear, m.number, 1);
       cellDate.setHours(0, 0, 0, 0);
       const isSelected = !isDisabled && !!selectedMonthDate && selectedMonthDate.getFullYear() === menuYear && selectedMonthDate.getMonth() === m.number;
@@ -6045,9 +6117,10 @@ var ConditionMonthInput = ({ row, control, onClear }) => {
     {
       control,
       name: fieldName,
-      rules: { required: "This field is required." },
+      rules: buildValueRules(which, row),
       render: ({ field, fieldState }) => {
-        const value = field.value || void 0;
+        const { value: fieldValue, ...fieldRest } = field;
+        const value = fieldValue || void 0;
         const handleValueChange = (next) => {
           field.onChange(next ?? void 0);
           if (!next) {
@@ -6058,7 +6131,7 @@ var ConditionMonthInput = ({ row, control, onClear }) => {
           /* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(
             MonthPicker2,
             {
-              ...field,
+              ...fieldRest,
               value,
               onValueChange: handleValueChange,
               placeholder,
@@ -8605,51 +8678,6 @@ function transformFilterKeys(obj, fieldMap = FILTER_FIELD_MAP) {
   }
   return obj;
 }
-var sanitizeInput = (val) => {
-  if (!val) return val;
-  if (Array.isArray(val)) {
-    return val.map((v) => sanitizeInput(v));
-  }
-  if (val.includes("\n") || val.includes("\r") || /[\u2028\u2029]/u.test(val))
-    return "__INVALID_NEWLINE__";
-  if (/\\\\/.test(val)) return "__INVALID_ESCAPE__";
-  if (/\\(n|t|r|b|f|u[0-9a-fA-F]{4})/.test(val)) return "__INVALID_ESCAPE__";
-  if (/\p{Cf}/u.test(val)) return "__INVALID_UNICODE_WHITESPACE__";
-  if (/[\u00A0\u1680\u180E\u202F\u205F\u3000]/u.test(val)) return "__INVALID_UNICODE_WHITESPACE__";
-  const trimmed = val.trim();
-  if (/^\{.*\}$/s.test(trimmed) || /^\[.*\]$/s.test(trimmed)) return "__INVALID_JSON_LITERAL__";
-  if (/\\\{/.test(val) || /\\\}/.test(val)) return "__INVALID_JSON_ESCAPE__";
-  if (/[%*~^]/.test(trimmed)) return "__INVALID_WILDCARD__";
-  if (/[%><={}\\[\]"']/u.test(trimmed)) return "__INVALID_CHAR__";
-  if (/\p{Cc}/u.test(val)) return "__INVALID_CONTROL_CHAR__";
-  return val;
-};
-var numericTypes = ["number"];
-var dateTypes = ["date", "datemonth"];
-var validateByFieldType = (value, fieldType) => {
-  if (!value) return { valid: true };
-  if (Array.isArray(value)) {
-    return { valid: true };
-  }
-  if (numericTypes.includes(fieldType)) {
-    if (!/^-?\d+(\.\d+)?$/.test(value)) {
-      return { valid: false, message: "Please enter a valid number." };
-    }
-  }
-  if (fieldType === "uuid") {
-    if (!UUIDregex.test(value)) {
-      return { valid: false, message: "Please enter a valid UUID." };
-    }
-  }
-  if (dateTypes.includes(fieldType)) {
-    const normalized = fieldType === "datemonth" ? `${value}-01` : value;
-    const parsed = parseISO(normalized);
-    if (!isValid(parsed)) {
-      return { valid: false, message: "Invalid date format." };
-    }
-  }
-  return { valid: true };
-};
 var AdvanceSearch = ({
   fields,
   portalId,
@@ -8677,7 +8705,7 @@ var AdvanceSearch = ({
   } = useAdvanceSearch({ fields: fieldsData, limitRows });
   const form = useForm({
     mode: "onSubmit",
-    reValidateMode: "onSubmit",
+    reValidateMode: "onChange",
     defaultValues: {}
   });
   const { handleSubmit, unregister, resetField, getValues, clearErrors, setError } = form;
@@ -8702,13 +8730,6 @@ var AdvanceSearch = ({
     },
     [resetField, clearErrors]
   );
-  const parseRangeValue = useCallback((raw, fieldType) => {
-    if (!raw) return void 0;
-    if (Array.isArray(raw)) return void 0;
-    const normalized = fieldType === "datemonth" ? `${raw}-01` : raw;
-    const parsed = parseISO(normalized);
-    return isValid(parsed) ? parsed : void 0;
-  }, []);
   const onSubmit = useCallback(() => {
     const operatorValidation = {};
     rows.forEach((r) => {
@@ -8752,16 +8773,6 @@ var AdvanceSearch = ({
           setError(endField, { type: "validate", message: valid2.message });
           return null;
         }
-        if (v1 && v2 && ["date", "datemonth"].includes(r.fieldType)) {
-          const d1 = parseRangeValue(v1, r.fieldType);
-          const d2 = parseRangeValue(v2, r.fieldType);
-          if (d1 && d2 && isAfter(d1, d2)) {
-            hasError = true;
-            setError(startField, { type: "validate", message: "Start value must be before end value." });
-            setError(endField, { type: "validate", message: "End value must be after start value." });
-            return null;
-          }
-        }
         return { ...r, value: v1, value2: v2 };
       }
       return { ...r, value: v1 };
@@ -8791,7 +8802,6 @@ var AdvanceSearch = ({
     rows,
     operatorsForField,
     getValues,
-    parseRangeValue,
     setError,
     setOperatorErrors,
     filterFieldMap,
@@ -13831,8 +13841,8 @@ var GridSettingsModal = ({
     }
   }, [isOpen, currentColumns, form]);
   const addColumn = async () => {
-    const isValid7 = await trigger("columns");
-    if (isValid7) {
+    const isValid6 = await trigger("columns");
+    if (isValid6) {
       append({ id: "" });
       requestAnimationFrame(() => {
         const container = scrollRef.current;