@moontra/moonui 6.13.0 → 6.15.0

package/src/components/ui/date-picker.tsx

@@ -200,6 +200,13 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(func
 
   return (
     <div ref={ref} className="moonui-theme">
+      {/* #345: temizle kontrolü tetikleyici <button>ın İÇİNDEydi ve kendisi de
+          role="button" + tabIndex taşıyordu — hem `nested-interactive` (ARIA'da bir
+          button başka etkileşimli öğe içeremez) hem de geçersiz HTML (interactive
+          content model). #332'de tabs-pro kapat butonunda uygulanan desenle KARDEŞ
+          konuma alındı ve gerçek <button> oldu: rol taklidi, elle yazılmış Enter/Space
+          işleyicisi ve tabIndex artık gereksiz — tarayıcı hepsini kendisi verir. */}
+      <div className="relative">
       <Popover open={open} onOpenChange={setOpen}>
       <PopoverTrigger asChild>
         <Button
@@ -207,6 +214,9 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(func
           className={cn(
             datePickerVariants({ variant, size, state }),
             !displayValue && "text-muted-foreground",
+            // #345: temizle butonu artık MUTLAK konumlu bir kardeş — uzun tarih
+            // metninin altına girmemesi için sağda yer ayrılıyor.
+            allowClear && displayValue && !readOnly && !disabled && "pr-9",
             className
           )}
           disabled={disabled || readOnly}
@@ -228,41 +238,6 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(func
               {iconPosition === "right" && iconElement}
             </motion.div>
           </AnimatePresence>
-          {allowClear && displayValue && !readOnly && !disabled && (
-            <motion.div
-              initial={{ opacity: 0, scale: 0.8 }}
-              animate={{ opacity: 1, scale: 1 }}
-              exit={{ opacity: 0, scale: 0.8 }}
-              whileHover={{ scale: 1.1 }}
-              whileTap={{ scale: 0.9 }}
-              className="ml-2 h-4 w-4 shrink-0 opacity-50 hover:opacity-100 transition-opacity cursor-pointer"
-              onClick={handleClear}
-              role="button"
-              tabIndex={0}
-              onKeyDown={(e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                  e.preventDefault();
-                  handleClear(e);
-                }
-              }}
-            >
-              <span className="sr-only">Clear date</span>
-              <svg
-                width="15"
-                height="15"
-                viewBox="0 0 15 15"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
-                  fill="currentColor"
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                />
-              </svg>
-            </motion.div>
-          )}
         </Button>
       </PopoverTrigger>
       <PopoverContent 
@@ -297,7 +272,32 @@ export const DatePicker = React.forwardRef<HTMLDivElement, DatePickerProps>(func
           )}
         </motion.div>
       </PopoverContent>
-    </Popover>
+      </Popover>
+      {allowClear && displayValue && !readOnly && !disabled && (
+        <button
+          type="button"
+          onClick={handleClear}
+          aria-label="Clear date"
+          className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 shrink-0 opacity-50 hover:opacity-100 transition-opacity"
+        >
+          <svg
+            width="15"
+            height="15"
+            viewBox="0 0 15 15"
+            fill="none"
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z"
+              fill="currentColor"
+              fillRule="evenodd"
+              clipRule="evenodd"
+            />
+          </svg>
+        </button>
+      )}
+      </div>
     </div>
   );
 });