@udixio/ui-react 2.9.21 → 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,4CA+VhC,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.21",
+  "version": "2.9.23",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

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') : '';
 
@@ -294,7 +341,6 @@ export const TextField = ({
             autoComplete={autoComplete}
             aria-invalid={!!errorText?.length}
             aria-describedby={hasSupportingText ? helperTextId : undefined}
-            autoFocus={autoFocus}
             {...textComponentProps}
           />
         </div>
@@ -308,7 +354,7 @@ export const TextField = ({
                 ref={isDateInput ? calendarTriggerRef : undefined}
                 onClick={(event) => {
                   event.stopPropagation();
-                  if (isDateInput) handleDatePickerOpen();
+                  if (isDateInput) handleDatePickerToggle();
                 }}
                 className={classNames(
                   styles.trailingIcon,
@@ -359,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"