@underverse-ui/underverse 1.0.81 → 1.0.82

package/dist/index.js

@@ -6914,7 +6914,6 @@ var getOptionDisabled = (option) => {
 var findOptionByValue = (options, value) => {
   return options.find((opt) => getOptionValue(opt) === value);
 };
-var REQUIRED_ERROR_MESSAGE = "This field is required";
 var Combobox = ({
   id,
   options,
@@ -6944,6 +6943,7 @@ var Combobox = ({
   helperText,
   useOverlayScrollbar = false
 }) => {
+  const tv = useSmartTranslations("ValidationInput");
   const [open, setOpen] = React24.useState(false);
   const [query, setQuery] = React24.useState("");
   const [activeIndex, setActiveIndex] = React24.useState(null);
@@ -7293,13 +7293,14 @@ var Combobox = ({
       {
         tabIndex: -1,
         "aria-hidden": "true",
-        readOnly: true,
         value: hasValue ? "selected" : "",
+        onChange: () => {
+        },
         required,
         disabled,
         onInvalid: (e) => {
           e.preventDefault();
-          setLocalRequiredError(REQUIRED_ERROR_MESSAGE);
+          setLocalRequiredError(tv("required"));
         },
         className: "pointer-events-none absolute h-0 w-0 opacity-0"
       }
@@ -8011,7 +8012,6 @@ import { Calendar, ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight3, S
 import * as React28 from "react";
 import { useId as useId6 } from "react";
 import { Fragment as Fragment6, jsx as jsx34, jsxs as jsxs24 } from "react/jsx-runtime";
-var REQUIRED_ERROR_MESSAGE2 = "This field is required";
 var DatePicker = ({
   id,
   value,
@@ -8031,6 +8031,7 @@ var DatePicker = ({
   maxDate
 }) => {
   const t = useSmartTranslations("DatePicker");
+  const tv = useSmartTranslations("ValidationInput");
   const locale = useSmartLocale();
   const [isOpen, setIsOpen] = React28.useState(false);
   const [viewDate, setViewDate] = React28.useState(value || /* @__PURE__ */ new Date());
@@ -8448,13 +8449,14 @@ var DatePicker = ({
       {
         tabIndex: -1,
         "aria-hidden": "true",
-        readOnly: true,
         value: value ? "selected" : "",
+        onChange: () => {
+        },
         required,
         disabled,
         onInvalid: (e) => {
           e.preventDefault();
-          setLocalRequiredError(REQUIRED_ERROR_MESSAGE2);
+          setLocalRequiredError(tv("required"));
         },
         className: "pointer-events-none absolute h-0 w-0 opacity-0"
       }
@@ -8907,7 +8909,6 @@ import * as React30 from "react";
 import * as React29 from "react";
 import { Calendar as Calendar2, X as X10, Check as Check4, ChevronDown as ChevronDown2 } from "lucide-react";
 import { jsx as jsx35, jsxs as jsxs25 } from "react/jsx-runtime";
-var REQUIRED_ERROR_MESSAGE3 = "This field is required";
 var DEFAULT_MONTH_NAMES = [
   "January",
   "February",
@@ -9385,6 +9386,7 @@ function MonthYearPicker({
   className,
   ...rest
 }) {
+  const tv = useSmartTranslations("ValidationInput");
   const now = /* @__PURE__ */ new Date();
   const currentYear = now.getFullYear();
   const resolvedMinYear = minYear ?? minDate?.getFullYear() ?? currentYear - 50;
@@ -9402,6 +9404,7 @@ function MonthYearPicker({
   const [parts, setParts] = React29.useState(initial);
   const [focusedColumn, setFocusedColumn] = React29.useState(null);
   const [localRequiredError, setLocalRequiredError] = React29.useState();
+  const [hasCommittedValue, setHasCommittedValue] = React29.useState(Boolean(parseValue(isControlled ? value : defaultValue)));
   const monthScrollRef = React29.useRef(null);
   const yearScrollRef = React29.useRef(null);
   React29.useEffect(() => {
@@ -9410,7 +9413,12 @@ function MonthYearPicker({
       if (parsed) setParts(parsed);
     }
   }, [value, isControlled]);
-  const hasValue = isControlled ? !!value : !!defaultValue || parts !== initial;
+  React29.useEffect(() => {
+    if (isControlled) {
+      setHasCommittedValue(Boolean(parseValue(value)));
+    }
+  }, [isControlled, value]);
+  const hasValue = hasCommittedValue;
   const effectiveError = error ?? localRequiredError;
   React29.useEffect(() => {
     if (disabled || !required || hasValue) {
@@ -9441,15 +9449,17 @@ function MonthYearPicker({
     (next) => {
       if (!next) {
         setLocalRequiredError(void 0);
+        if (!isControlled) setHasCommittedValue(false);
         onChange?.(void 0);
         return;
       }
       if (!isDateInRange(next.month, next.year)) return;
       const date = new Date(next.year, next.month, 1);
       setLocalRequiredError(void 0);
+      if (!isControlled) setHasCommittedValue(true);
       onChange?.({ ...next, date });
     },
-    [isDateInRange, onChange]
+    [isControlled, isDateInRange, onChange]
   );
   const tryUpdate = React29.useCallback(
     (next) => {
@@ -9697,13 +9707,14 @@ function MonthYearPicker({
         {
           tabIndex: -1,
           "aria-hidden": "true",
-          readOnly: true,
           value: hasValue ? "selected" : "",
+          onChange: () => {
+          },
           required,
           disabled,
           onInvalid: (e) => {
             e.preventDefault();
-            setLocalRequiredError(REQUIRED_ERROR_MESSAGE3);
+            setLocalRequiredError(tv("required"));
           },
           className: "pointer-events-none absolute h-0 w-0 opacity-0"
         }
@@ -9732,13 +9743,14 @@ function MonthYearPicker({
       {
         tabIndex: -1,
         "aria-hidden": "true",
-        readOnly: true,
         value: hasValue ? "selected" : "",
+        onChange: () => {
+        },
         required,
         disabled,
         onInvalid: (e) => {
           e.preventDefault();
-          setLocalRequiredError(REQUIRED_ERROR_MESSAGE3);
+          setLocalRequiredError(tv("required"));
         },
         className: "pointer-events-none absolute h-0 w-0 opacity-0"
       }
@@ -10414,7 +10426,6 @@ function Calendar3({
 import * as React31 from "react";
 import { Clock as Clock2, X as X11, Check as Check5, Sun, Moon, Sunset, Coffee } from "lucide-react";
 import { Fragment as Fragment9, jsx as jsx37, jsxs as jsxs27 } from "react/jsx-runtime";
-var REQUIRED_ERROR_MESSAGE4 = "This field is required";
 var pad = (n) => n.toString().padStart(2, "0");
 var clamp4 = (n, min, max) => Math.min(max, Math.max(min, n));
 var WHEEL_ITEM_HEIGHT2 = {
@@ -10898,6 +10909,7 @@ function TimePicker({
   className,
   ...rest
 }) {
+  const tv = useSmartTranslations("ValidationInput");
   const isControlled = value !== void 0;
   const now = /* @__PURE__ */ new Date();
   const initial = parseTime(isControlled ? value : defaultValue, format, includeSeconds) || (format === "12" ? { h: now.getHours() % 12 || 12, m: now.getMinutes(), s: now.getSeconds(), p: now.getHours() >= 12 ? "PM" : "AM" } : { h: now.getHours(), m: now.getMinutes(), s: now.getSeconds() });
@@ -11478,13 +11490,14 @@ function TimePicker({
         {
           tabIndex: -1,
           "aria-hidden": "true",
-          readOnly: true,
           value: hasCommittedValue ? "selected" : "",
+          onChange: () => {
+          },
           required,
           disabled,
           onInvalid: (e) => {
             e.preventDefault();
-            setLocalRequiredError(REQUIRED_ERROR_MESSAGE4);
+            setLocalRequiredError(tv("required"));
           },
           className: "pointer-events-none absolute h-0 w-0 opacity-0"
         }
@@ -11527,13 +11540,14 @@ function TimePicker({
       {
         tabIndex: -1,
         "aria-hidden": "true",
-        readOnly: true,
         value: hasCommittedValue ? "selected" : "",
+        onChange: () => {
+        },
         required,
         disabled,
         onInvalid: (e) => {
           e.preventDefault();
-          setLocalRequiredError(REQUIRED_ERROR_MESSAGE4);
+          setLocalRequiredError(tv("required"));
         },
         className: "pointer-events-none absolute h-0 w-0 opacity-0"
       }
@@ -11575,7 +11589,6 @@ function TimePicker({
 
 // src/components/DateTimePicker.tsx
 import { jsx as jsx38, jsxs as jsxs28 } from "react/jsx-runtime";
-var REQUIRED_ERROR_MESSAGE5 = "This field is required";
 var DateTimePicker = ({
   value,
   onChange,
@@ -11594,6 +11607,7 @@ var DateTimePicker = ({
   size = "md"
 }) => {
   const t = useSmartTranslations("DateTimePicker");
+  const tv = useSmartTranslations("ValidationInput");
   const locale = useSmartLocale();
   const [open, setOpen] = React32.useState(false);
   const [localRequiredError, setLocalRequiredError] = React32.useState();
@@ -11745,13 +11759,14 @@ var DateTimePicker = ({
       {
         tabIndex: -1,
         "aria-hidden": "true",
-        readOnly: true,
         value: value ? "selected" : "",
+        onChange: () => {
+        },
         required,
         disabled,
         onInvalid: (e) => {
           e.preventDefault();
-          setLocalRequiredError(REQUIRED_ERROR_MESSAGE5);
+          setLocalRequiredError(tv("required"));
         },
         className: "pointer-events-none absolute h-0 w-0 opacity-0"
       }
@@ -14772,7 +14787,6 @@ import * as React39 from "react";
 import { useId as useId7 } from "react";
 import { ChevronDown as ChevronDown4, Search as Search5, Check as Check6, SearchX as SearchX2, Loader2 as Loader24, X as X13, Sparkles as Sparkles3 } from "lucide-react";
 import { Fragment as Fragment13, jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
-var REQUIRED_ERROR_MESSAGE6 = "This field is required";
 var MultiCombobox = ({
   id,
   options,
@@ -14806,6 +14820,7 @@ var MultiCombobox = ({
   maxTagsVisible = 3,
   useOverlayScrollbar = false
 }) => {
+  const tv = useSmartTranslations("ValidationInput");
   const [query, setQuery] = React39.useState("");
   const [open, setOpen] = React39.useState(false);
   const [activeIndex, setActiveIndex] = React39.useState(null);
@@ -15219,13 +15234,14 @@ var MultiCombobox = ({
       {
         tabIndex: -1,
         "aria-hidden": "true",
-        readOnly: true,
         value: value.length > 0 ? "selected" : "",
+        onChange: () => {
+        },
         required,
         disabled,
         onInvalid: (e) => {
           e.preventDefault();
-          setLocalRequiredError(REQUIRED_ERROR_MESSAGE6);
+          setLocalRequiredError(tv("required"));
         },
         className: "pointer-events-none absolute h-0 w-0 opacity-0"
       }
@@ -16400,7 +16416,6 @@ var defaultLabels = {
   searchPlaceholder: "Search...",
   noResultsText: "No results found"
 };
-var REQUIRED_ERROR_MESSAGE7 = "This field is required";
 function getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline) {
   if (!(viewOnly || inline) || !defaultExpanded) return /* @__PURE__ */ new Set();
   const parentIds = /* @__PURE__ */ new Set();
@@ -16412,6 +16427,7 @@ function getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline)
   return parentIds;
 }
 function CategoryTreeSelect(props) {
+  const tv = useSmartTranslations("ValidationInput");
   const {
     id,
     label,
@@ -16732,13 +16748,14 @@ function CategoryTreeSelect(props) {
         {
           tabIndex: -1,
           "aria-hidden": "true",
-          readOnly: true,
           value: valueArray.length > 0 ? "selected" : "",
+          onChange: () => {
+          },
           required,
           disabled,
           onInvalid: (e) => {
             e.preventDefault();
-            setLocalRequiredError(REQUIRED_ERROR_MESSAGE7);
+            setLocalRequiredError(tv("required"));
           },
           className: "pointer-events-none absolute h-0 w-0 opacity-0"
         }
@@ -16767,13 +16784,14 @@ function CategoryTreeSelect(props) {
         {
           tabIndex: -1,
           "aria-hidden": "true",
-          readOnly: true,
           value: valueArray.length > 0 ? "selected" : "",
+          onChange: () => {
+          },
           required,
           disabled,
           onInvalid: (e) => {
             e.preventDefault();
-            setLocalRequiredError(REQUIRED_ERROR_MESSAGE7);
+            setLocalRequiredError(tv("required"));
           },
           className: "pointer-events-none absolute h-0 w-0 opacity-0"
         }
@@ -16882,13 +16900,14 @@ function CategoryTreeSelect(props) {
       {
         tabIndex: -1,
         "aria-hidden": "true",
-        readOnly: true,
         value: valueArray.length > 0 ? "selected" : "",
+        onChange: () => {
+        },
         required,
         disabled,
         onInvalid: (e) => {
           e.preventDefault();
-          setLocalRequiredError(REQUIRED_ERROR_MESSAGE7);
+          setLocalRequiredError(tv("required"));
         },
         className: "pointer-events-none absolute h-0 w-0 opacity-0"
       }