@udixio/ui-react 2.9.22 → 2.9.23

package/dist/lib/components/TextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TextField.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,GAAI,yRA0BvB,UAAU,CAAC,kBAAkB,CAAC,4CA8VhC,CAAC"}
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/lib/components/TextField.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAEhD,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAEnD;;;;;;;;;GASG;AACH,eAAO,MAAM,SAAS,GAAI,yRA0BvB,UAAU,CAAC,kBAAkB,CAAC,4CAkYhC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "2.9.22",
+  "version": "2.9.23",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -37,8 +37,8 @@
   "devDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "@udixio/tailwind": "2.4.13",
-    "@udixio/theme": "2.1.13"
+    "@udixio/theme": "2.1.13",
+    "@udixio/tailwind": "2.4.13"
   },
   "repository": {
     "type": "git",

package/src/lib/components/TextField.tsx

@@ -134,10 +134,14 @@ export const TextField = ({
     return null;
   }, [value]);
 
-  const handleDatePickerOpen = () => {
+  const handleDatePickerToggle = () => {
     if (disabled) return;
-    setTempDate(initialDateValue);
-    setShowDatePicker(true);
+    if (showDatePicker) {
+      setShowDatePicker(false);
+    } else {
+      setTempDate(initialDateValue);
+      setShowDatePicker(true);
+    }
   };
 
   useEffect(() => {
@@ -148,6 +152,49 @@ export const TextField = ({
     }
   }, [showDatePicker]);
 
+  useEffect(() => {
+    if (!showDatePicker) return;
+
+    const isInside = (target: Node | null) => {
+      if (!target) return false;
+      return (
+        textFieldRef.current?.contains(target) ||
+        datePickerRef.current?.contains(target)
+      );
+    };
+
+    const handlePointerDown = (e: PointerEvent) => {
+      const target = e.target as Node;
+      const inDatePicker = datePickerRef.current?.contains(target);
+      const inCalendarTrigger = calendarTriggerRef.current?.contains(target);
+      if (!inDatePicker && !inCalendarTrigger) {
+        setShowDatePicker(false);
+      }
+    };
+
+    const handleFocusIn = (e: FocusEvent) => {
+      if (!isInside(e.target as Node)) {
+        setShowDatePicker(false);
+      }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        setShowDatePicker(false);
+      }
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    document.addEventListener('focusin', handleFocusIn);
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('pointerdown', handlePointerDown);
+      document.removeEventListener('focusin', handleFocusIn);
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [showDatePicker]);
+
   const handleDateConfirm = () => {
     const newValue = tempDate ? tempDate.toLocaleDateString('en-CA') : '';
 
@@ -307,7 +354,7 @@ export const TextField = ({
                 ref={isDateInput ? calendarTriggerRef : undefined}
                 onClick={(event) => {
                   event.stopPropagation();
-                  if (isDateInput) handleDatePickerOpen();
+                  if (isDateInput) handleDatePickerToggle();
                 }}
                 className={classNames(
                   styles.trailingIcon,
@@ -358,18 +405,7 @@ export const TextField = ({
 
       {isDateInput && showDatePicker && (
         <>
-          <AnchorPositioner
-            onBlur={(e) => {
-              if (
-                datePickerRef.current &&
-                !datePickerRef.current?.contains(e.relatedTarget)
-              ) {
-                setShowDatePicker(false);
-              }
-            }}
-            anchorRef={textFieldRef}
-            position="bottom"
-          >
+          <AnchorPositioner anchorRef={textFieldRef} position="bottom">
             <div
               ref={datePickerRef}
               className="z-50 shadow-xl rounded-[28px] bg-surface-container-high overflow-hidden"