@udixio/ui-react 2.9.17 → 2.9.19

package/dist/lib/components/AnchorPositioner.d.ts

@@ -1,4 +1,5 @@
 import { default as React, CSSProperties, RefObject } from 'react';
+import IntrinsicElements = React.JSX.IntrinsicElements;
 export type Position = 'top' | 'bottom' | 'left' | 'right' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 export interface AnchorPositionerProps {
     anchorRef: RefObject<HTMLElement | null>;
@@ -7,5 +8,5 @@ export interface AnchorPositionerProps {
     style?: CSSProperties;
     className?: string;
 }
-export declare const AnchorPositioner: ({ anchorRef, position, children, style, }: AnchorPositionerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AnchorPositioner: ({ anchorRef, position, children, style, ...restProps }: AnchorPositionerProps & IntrinsicElements["div"]) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=AnchorPositioner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AnchorPositioner.d.ts","sourceRoot":"","sources":["../../../src/lib/components/AnchorPositioner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,SAAS,EAIV,MAAM,OAAO,CAAC;AAGf,MAAM,MAAM,QAAQ,GAChB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,GAAI,2CAK9B,qBAAqB,4CAmGvB,CAAC"}
+{"version":3,"file":"AnchorPositioner.d.ts","sourceRoot":"","sources":["../../../src/lib/components/AnchorPositioner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,aAAa,EACb,SAAS,EAIV,MAAM,OAAO,CAAC;AAGf,OAAO,iBAAiB,GAAG,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC;AAEvD,MAAM,MAAM,QAAQ,GAChB,KAAK,GACL,QAAQ,GACR,MAAM,GACN,OAAO,GACP,UAAU,GACV,WAAW,GACX,aAAa,GACb,cAAc,CAAC;AAEnB,MAAM,WAAW,qBAAqB;IACpC,SAAS,EAAE,SAAS,CAAC,WAAW,GAAG,IAAI,CAAC,CAAC;IACzC,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,GAAI,wDAM9B,qBAAqB,GAAG,iBAAiB,CAAC,KAAK,CAAC,4CA0GlD,CAAC"}

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,6PAuBvB,UAAU,CAAC,kBAAkB,CAAC,4CAuUhC,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,6PAuBvB,UAAU,CAAC,kBAAkB,CAAC,4CAwVhC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "2.9.17",
+  "version": "2.9.19",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/lib/components/AnchorPositioner.tsx

@@ -6,6 +6,8 @@ import React, {
   useState,
 } from 'react';
 import { SyncedFixedWrapper } from '../effects';
+import { createPortal } from 'react-dom';
+import IntrinsicElements = React.JSX.IntrinsicElements;
 
 export type Position =
   | 'top'
@@ -30,7 +32,8 @@ export const AnchorPositioner = ({
   position = 'bottom',
   children,
   style,
-}: AnchorPositionerProps) => {
+  ...restProps
+}: AnchorPositionerProps & IntrinsicElements['div']) => {
   const uniqueId = useId();
   const anchorName = `--anchor-${uniqueId.replace(/:/g, '')}`;
   const [supportsAnchor, setSupportsAnchor] = useState(false);
@@ -76,7 +79,12 @@ export const AnchorPositioner = ({
       ...style,
     } as any;
 
-    return <div style={floatingStyles}>{children}</div>;
+    return createPortal(
+      <div style={floatingStyles} {...restProps}>
+        {children}
+      </div>,
+      document.body,
+    );
   }
 
   const fallbackStyles: CSSProperties = {
@@ -126,7 +134,9 @@ export const AnchorPositioner = ({
 
   return (
     <SyncedFixedWrapper targetRef={anchorRef}>
-      <div style={fallbackStyles}>{children}</div>
+      <div style={fallbackStyles} {...restProps}>
+        {children}
+      </div>
     </SyncedFixedWrapper>
   );
 };

package/src/lib/components/TextField.tsx

@@ -65,6 +65,7 @@ export const TextField = ({
 
   const textFieldRef = useRef<HTMLDivElement>(null);
   const calendarTriggerRef = useRef<HTMLDivElement>(null);
+  const datePickerRef = useRef<HTMLDivElement>(null);
 
   const hasSupportingText =
     showSupportingText ?? (!!errorText?.length || !!supportingText?.length);
@@ -79,13 +80,17 @@ export const TextField = ({
     }
   };
 
-  const handleOnFocus = (
-    e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    setIsFocused(true);
-    setShowErrorIcon(false);
-    restProps.onFocus?.(e);
-  };
+  useEffect(() => {
+    if (isFocused) {
+      setShowErrorIcon(false);
+      restProps.onFocus?.(e);
+    } else {
+      if (errorText?.length) {
+        setShowErrorIcon(true);
+      }
+      restProps.onBlur?.(e);
+    }
+  }, [isFocused]);
 
   const handleChange = (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
@@ -103,16 +108,6 @@ export const TextField = ({
     }
   };
 
-  const handleBlur = (
-    e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    setIsFocused(false);
-    if (errorText?.length) {
-      setShowErrorIcon(true);
-    }
-    restProps.onBlur?.(e);
-  };
-
   // Date Picker Logic
   const isDateInput = type === 'date';
   const [showDatePicker, setShowDatePicker] = useState(false);
@@ -132,6 +127,14 @@ export const TextField = ({
     setShowDatePicker(true);
   };
 
+  useEffect(() => {
+    if (showDatePicker) {
+      setIsFocused(true);
+    } else {
+      setIsFocused(false);
+    }
+  }, [showDatePicker]);
+
   const handleDateConfirm = () => {
     const newValue = tempDate ? tempDate.toLocaleDateString('en-CA') : '';
 
@@ -272,8 +275,8 @@ export const TextField = ({
             id={id}
             name={name}
             placeholder={isFocused ? (placeholder ?? undefined) : ''}
-            onFocus={handleOnFocus}
-            onBlur={handleBlur}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
             disabled={disabled}
             autoComplete={autoComplete}
             aria-invalid={!!errorText?.length}
@@ -342,12 +345,26 @@ export const TextField = ({
 
       {isDateInput && showDatePicker && (
         <>
-          <div
-            className="fixed inset-0 z-40 bg-transparent"
-            onClick={() => setShowDatePicker(false)}
-          />
-          <AnchorPositioner anchorRef={textFieldRef} position="bottom">
-            <div className="z-50 shadow-xl rounded-[28px] bg-surface-container-high overflow-hidden">
+          <AnchorPositioner
+            onBlur={(e) => {
+              console.log(
+                datePickerRef.current,
+                !datePickerRef.current?.contains(e.relatedTarget),
+              );
+              if (
+                datePickerRef.current &&
+                !datePickerRef.current?.contains(e.relatedTarget)
+              ) {
+                setShowDatePicker(false);
+              }
+            }}
+            anchorRef={textFieldRef}
+            position="bottom"
+          >
+            <div
+              ref={datePickerRef}
+              className="z-50 shadow-xl rounded-[28px] bg-surface-container-high overflow-hidden"
+            >
               <DatePicker
                 className={''}
                 value={tempDate}