@udixio/ui-react 2.9.16 → 2.9.18

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;AAIf,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,4CAsGvB,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,4CAwUhC,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,4CAuUhC,CAAC"}

package/package.json

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

package/src/lib/components/AnchorPositioner.tsx

@@ -6,6 +6,7 @@ import React, {
   useState,
 } from 'react';
 import { SyncedFixedWrapper } from '../effects';
+import { createPortal } from 'react-dom';
 
 export type Position =
   | 'top'
@@ -76,7 +77,10 @@ export const AnchorPositioner = ({
       ...style,
     } as any;
 
-    return <div style={floatingStyles}>{children}</div>;
+    return createPortal(
+      <div style={floatingStyles}>{children}</div>,
+      document.body,
+    );
   }
 
   const fallbackStyles: CSSProperties = {

package/src/lib/components/TextField.tsx

@@ -79,9 +79,12 @@ export const TextField = ({
     }
   };
 
-  const handleOnFocus = () => {
+  const handleOnFocus = (
+    e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
     setIsFocused(true);
     setShowErrorIcon(false);
+    restProps.onFocus?.(e);
   };
 
   const handleChange = (
@@ -100,11 +103,14 @@ export const TextField = ({
     }
   };
 
-  const handleBlur = () => {
+  const handleBlur = (
+    e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
+  ) => {
     setIsFocused(false);
     if (errorText?.length) {
       setShowErrorIcon(true);
     }
+    restProps.onBlur?.(e);
   };
 
   // Date Picker Logic
@@ -258,6 +264,7 @@ export const TextField = ({
           )}
 
           <TextComponent
+            {...(restProps as any)}
             ref={inputRef as any}
             value={value}
             onChange={handleChange}
@@ -265,21 +272,13 @@ export const TextField = ({
             id={id}
             name={name}
             placeholder={isFocused ? (placeholder ?? undefined) : ''}
-            onFocus={(e) => {
-              handleOnFocus();
-              if (isDateInput) {
-                // Maybe open picker on focus? User preference.
-                // Often better on click/icon click.
-                // But let's stick to icon click for now or explicit open.
-              }
-            }}
+            onFocus={handleOnFocus}
             onBlur={handleBlur}
             disabled={disabled}
             autoComplete={autoComplete}
             aria-invalid={!!errorText?.length}
             aria-describedby={hasSupportingText ? helperTextId : undefined}
             {...textComponentProps}
-            {...(restProps as any)}
           />
         </div>