@underverse-ui/underverse 0.1.21 → 0.1.23

package/dist/index.cjs

@@ -4764,6 +4764,7 @@ var DatePicker = ({
   const [dropdownPosition, setDropdownPosition] = React21.useState(null);
   const [viewDate, setViewDate] = React21.useState(value || /* @__PURE__ */ new Date());
   const triggerRef = React21.useRef(null);
+  const dropdownRef = React21.useRef(null);
   useShadCNAnimations();
   const calculatePosition = React21.useCallback(() => {
     if (!triggerRef.current) return null;
@@ -4789,15 +4790,24 @@ var DatePicker = ({
       window.removeEventListener("scroll", handler, true);
     };
   }, [isOpen, calculatePosition]);
+  React21.useEffect(() => {
+    if (value) {
+      setViewDate(value);
+    } else {
+      setViewDate(/* @__PURE__ */ new Date());
+    }
+  }, [value]);
   React21.useEffect(() => {
     if (!isOpen) return;
     const handleClickOutside = (event) => {
       const target = event.target;
-      if (triggerRef.current && !triggerRef.current.contains(target)) {
-        const dropdown = document.querySelector("[data-datepicker]");
-        if (dropdown && !dropdown.contains(target)) {
-          setIsOpen(false);
-        }
+      const trigger = triggerRef.current;
+      const dropdown = dropdownRef.current;
+      if (!trigger || !dropdown) return;
+      const clickedOutsideTrigger = !trigger.contains(target);
+      const clickedOutsideDropdown = !dropdown.contains(target);
+      if (clickedOutsideTrigger && clickedOutsideDropdown) {
+        setIsOpen(false);
       }
     };
     const handleEscape = (event) => {
@@ -4813,11 +4823,18 @@ var DatePicker = ({
     };
   }, [isOpen]);
   const handleDateSelect = (date) => {
-    onChange(date);
+    let selectedDate;
+    if (value && (value.getHours() !== 0 || value.getMinutes() !== 0 || value.getSeconds() !== 0)) {
+      selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), value.getHours(), value.getMinutes(), value.getSeconds());
+    } else {
+      const now = /* @__PURE__ */ new Date();
+      selectedDate = new Date(date.getFullYear(), date.getMonth(), date.getDate(), now.getHours(), now.getMinutes(), now.getSeconds());
+    }
+    onChange(selectedDate);
     setIsOpen(false);
   };
   const formatDateDisplay = (date) => {
-    return locale === "vi" /* VI */ ? formatDate(date) : formatDateShort(date);
+    return formatDate(date);
   };
   const getDaysInMonth = (date) => {
     return new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
@@ -4878,7 +4895,8 @@ var DatePicker = ({
         top: dropdownPosition?.top || 0,
         left: dropdownPosition?.left || 0,
         width: size === "sm" ? dropdownPosition?.width || 224 : dropdownPosition?.width || 256,
-        zIndex: 9999
+        zIndex: 9999,
+        pointerEvents: "none"
       },
       "data-state": isOpen ? "open" : "closed",
       className: cn(
@@ -4889,11 +4907,13 @@ var DatePicker = ({
       children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         "div",
         {
+          ref: dropdownRef,
           className: cn(
             "rounded-md border bg-popover text-popover-foreground shadow-md",
             "backdrop-blur-sm bg-popover/95 border-border/60",
             size === "sm" ? "p-3 w-56" : "p-4 w-64"
           ),
+          style: { pointerEvents: "auto" },
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-center justify-between mb-4", children: [
               /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("prev"), className: "p-1 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.ChevronLeft, { className: "h-4 w-4" }) }),
@@ -4901,7 +4921,20 @@ var DatePicker = ({
               /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Button_default, { variant: "ghost", size: "sm", onClick: () => navigateMonth("next"), className: "p-1 h-auto", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.ChevronRight, { className: "h-4 w-4" }) })
             ] }),
             /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("grid grid-cols-7 gap-1", size === "sm" ? "mb-1" : "mb-2"), children: (weekdayLabels || ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"]).map((day) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("text-muted-foreground text-center font-medium", size === "sm" ? "text-[10px] py-0.5" : "text-xs py-1"), children: day }, day)) }),
-            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "grid grid-cols-7 gap-1", children: renderCalendar() })
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "grid grid-cols-7 gap-1", children: renderCalendar() }),
+            /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "flex items-center justify-end mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+              Button_default,
+              {
+                variant: "outline",
+                size: "sm",
+                onClick: () => {
+                  onChange(void 0);
+                  setIsOpen(false);
+                  setViewDate(/* @__PURE__ */ new Date());
+                },
+                children: clearLabel || t("clear")
+              }
+            ) })
           ]
         }
       )
@@ -4959,6 +4992,31 @@ var DatePicker = ({
         ),
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: cn("truncate", !value && "text-muted-foreground"), children: value ? formatDateDisplay(value) : placeholder || t("placeholder") }),
+          value && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+            "span",
+            {
+              role: "button",
+              "aria-label": clearLabel || t("clear"),
+              tabIndex: 0,
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onChange(void 0);
+                setViewDate(/* @__PURE__ */ new Date());
+              },
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  onChange(void 0);
+                  setViewDate(/* @__PURE__ */ new Date());
+                }
+              },
+              className: "absolute right-8 inline-flex items-center justify-center rounded-sm text-muted-foreground hover:text-foreground hover:bg-accent/50 transition-colors cursor-pointer",
+              style: { width: 20, height: 20 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.X, { className: "h-3.5 w-3.5" })
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react14.Calendar, { className: "h-4 w-4 text-muted-foreground ml-2" })
         ]
       }
@@ -5383,14 +5441,23 @@ var MultiCombobox = ({
             return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { className: "inline-flex items-center gap-1 bg-accent text-accent-foreground rounded px-2 py-1 text-xs", children: [
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "truncate max-w-[120px]", children: option ? displayFormat(option) : itemValue }),
               /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-                "button",
+                "div",
                 {
-                  type: "button",
+                  role: "button",
+                  tabIndex: 0,
+                  "aria-label": `Remove ${option ? option.label : itemValue}`,
                   onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
                     handleRemove(itemValue);
                   },
+                  onKeyDown: (e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleRemove(itemValue);
+                    }
+                  },
                   className: "hover:text-destructive transition-colors cursor-pointer",
                   children: "\xD7"
                 }