@underverse-ui/underverse 1.0.81 → 1.0.82

package/api-reference.json

@@ -1,6 +1,6 @@
 {
   "package": "@underverse-ui/underverse",
-  "version": "1.0.81",
+  "version": "1.0.82",
   "sourceEntry": "src/index.ts",
   "totalExports": 225,
   "exports": [

package/dist/index.cjs

@@ -7099,7 +7099,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,
@@ -7129,6 +7128,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);
@@ -7478,13 +7478,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"
       }
@@ -8196,7 +8197,6 @@ var import_lucide_react15 = require("lucide-react");
 var React28 = __toESM(require("react"), 1);
 var import_react19 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var REQUIRED_ERROR_MESSAGE2 = "This field is required";
 var DatePicker = ({
   id,
   value,
@@ -8216,6 +8216,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());
@@ -8633,13 +8634,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"
       }
@@ -9092,7 +9094,6 @@ var React30 = __toESM(require("react"), 1);
 var React29 = __toESM(require("react"), 1);
 var import_lucide_react16 = require("lucide-react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var REQUIRED_ERROR_MESSAGE3 = "This field is required";
 var DEFAULT_MONTH_NAMES = [
   "January",
   "February",
@@ -9570,6 +9571,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;
@@ -9587,6 +9589,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(() => {
@@ -9595,7 +9598,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) {
@@ -9626,15 +9634,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) => {
@@ -9882,13 +9892,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"
         }
@@ -9917,13 +9928,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"
       }
@@ -10599,7 +10611,6 @@ function Calendar3({
 var React31 = __toESM(require("react"), 1);
 var import_lucide_react18 = require("lucide-react");
 var import_jsx_runtime37 = require("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 = {
@@ -11083,6 +11094,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() });
@@ -11663,13 +11675,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"
         }
@@ -11712,13 +11725,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"
       }
@@ -11760,7 +11774,6 @@ function TimePicker({
 
 // src/components/DateTimePicker.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var REQUIRED_ERROR_MESSAGE5 = "This field is required";
 var DateTimePicker = ({
   value,
   onChange,
@@ -11779,6 +11792,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();
@@ -11930,13 +11944,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"
       }
@@ -14957,7 +14972,6 @@ var React39 = __toESM(require("react"), 1);
 var import_react20 = require("react");
 var import_lucide_react24 = require("lucide-react");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var REQUIRED_ERROR_MESSAGE6 = "This field is required";
 var MultiCombobox = ({
   id,
   options,
@@ -14991,6 +15005,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);
@@ -15404,13 +15419,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"
       }
@@ -16585,7 +16601,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();
@@ -16597,6 +16612,7 @@ function getInitialExpandedNodes(categories, defaultExpanded, viewOnly, inline)
   return parentIds;
 }
 function CategoryTreeSelect(props) {
+  const tv = useSmartTranslations("ValidationInput");
   const {
     id,
     label,
@@ -16917,13 +16933,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"
         }
@@ -16952,13 +16969,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"
         }
@@ -17067,13 +17085,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"
       }