@udixio/ui-react 2.9.18 → 2.9.20

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;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"}
+{"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

@@ -10,5 +10,5 @@ import { TextFieldInterface } from '../interfaces';
  * @a11y
  * - `aria-describedby` links supporting text/error to input.
  */
-export declare const TextField: ({ variant, disabled, errorText, placeholder, suffix, name, label, className, supportingText, trailingIcon, leadingIcon, type, multiline, autoComplete, onChange, value: valueProp, defaultValue, showSupportingText, id: idProp, style, ref, ...restProps }: ReactProps<TextFieldInterface>) => import("react/jsx-runtime").JSX.Element;
+export declare const TextField: ({ variant, disabled, errorText, placeholder, suffix, name, label, className, supportingText, trailingIcon, leadingIcon, type, multiline, autoComplete, onChange, value: valueProp, defaultValue, showSupportingText, id: idProp, style, ref, onFocus, onBlur, ...restProps }: ReactProps<TextFieldInterface>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=TextField.d.ts.map

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,8QAyBvB,UAAU,CAAC,kBAAkB,CAAC,4CAwVhC,CAAC"}

package/dist/lib/interfaces/text-field.interface.d.ts

@@ -22,6 +22,8 @@ type Props = {
     type?: 'text' | 'password' | 'number' | 'date';
     autoComplete?: 'on' | 'off' | string;
     multiline?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
 };
 export type TextFieldStates = {
     isFocused: boolean;

package/dist/lib/interfaces/text-field.interface.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/text-field.interface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErD,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC5E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE;QACR,WAAW;QACX,SAAS;QACT,OAAO;QACP,OAAO;QACP,iBAAiB;QACjB,gBAAgB;QAChB,aAAa;QACb,cAAc;QACd,QAAQ;QACR,YAAY;KACb,CAAC;CACH"}
+{"version":3,"file":"text-field.interface.d.ts","sourceRoot":"","sources":["../../../src/lib/interfaces/text-field.interface.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,MAAM,MAAM,gBAAgB,GAAG,QAAQ,GAAG,UAAU,CAAC;AAErD,KAAK,KAAK,GAAG;IACX,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,OAAO,UAAU,CAAC,GAAG,IAAI,CAAC;IAC3D,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,GAAG,mBAAmB,CAAC,CAAC;IAC5E,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C,YAAY,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,MAAM,CAAC;IACrC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AACF,MAAM,MAAM,eAAe,GAAG;IAC5B,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,OAAO,CAAC;IACvB,kBAAkB,EAAE,OAAO,CAAC;CAC7B,CAAC;AAEF,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,KAAK,CAAC;IACZ,KAAK,EAAE,KAAK,CAAC;IACb,MAAM,EAAE,eAAe,CAAC;IACxB,QAAQ,EAAE;QACR,WAAW;QACX,SAAS;QACT,OAAO;QACP,OAAO;QACP,iBAAiB;QACjB,gBAAgB;QAChB,aAAa;QACb,cAAc;QACd,QAAQ;QACR,YAAY;KACb,CAAC;CACH"}

package/dist/lib/styles/text-field.style.d.ts

@@ -21,6 +21,8 @@ export declare const textFieldStyle: (states: {
     type: any;
     autoComplete: any;
     multiline: any;
+    onFocus: any;
+    onBlur: any;
 } & {
     placeholder?: string;
     name?: string;
@@ -41,6 +43,8 @@ export declare const textFieldStyle: (states: {
     type?: "text" | "password" | "number" | "date";
     autoComplete?: "on" | "off" | string;
     multiline?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
 } & import('..').TextFieldStates & {
     className: string | ClassNameComponent<TextFieldInterface> | undefined;
 }) => Record<"input" | "label" | "content" | "stateLayer" | "leadingIcon" | "trailingIcon" | "activeIndicator" | "supportingText" | "textField" | "suffix", string>;
@@ -64,6 +68,8 @@ export declare const useTextFieldStyle: (states: import('..').TextFieldStates &
     type?: "text" | "password" | "number" | "date";
     autoComplete?: "on" | "off" | string;
     multiline?: boolean;
+    onFocus?: () => void;
+    onBlur?: () => void;
 } & {
     className?: string | ClassNameComponent<TextFieldInterface> | undefined;
 }) => Record<"input" | "label" | "content" | "stateLayer" | "leadingIcon" | "trailingIcon" | "activeIndicator" | "supportingText" | "textField" | "suffix", string>;

package/dist/lib/styles/text-field.style.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text-field.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/text-field.style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAmGnD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mKAG1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;mKAG7B,CAAC"}
+{"version":3,"file":"text-field.style.d.ts","sourceRoot":"","sources":["../../../src/lib/styles/text-field.style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,KAAK,kBAAkB,EAIxB,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAmGnD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mKAG1B,CAAC;AAEF,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;mKAG7B,CAAC"}

package/package.json

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

package/src/lib/components/AnchorPositioner.tsx

@@ -7,6 +7,7 @@ import React, {
 } from 'react';
 import { SyncedFixedWrapper } from '../effects';
 import { createPortal } from 'react-dom';
+import IntrinsicElements = React.JSX.IntrinsicElements;
 
 export type Position =
   | 'top'
@@ -31,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);
@@ -78,7 +80,9 @@ export const AnchorPositioner = ({
     } as any;
 
     return createPortal(
-      <div style={floatingStyles}>{children}</div>,
+      <div style={floatingStyles} {...restProps}>
+        {children}
+      </div>,
       document.body,
     );
   }
@@ -130,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

@@ -47,6 +47,8 @@ export const TextField = ({
   id: idProp,
   style,
   ref,
+  onFocus,
+  onBlur,
   ...restProps
 }: ReactProps<TextFieldInterface>) => {
   const generatedId = useId();
@@ -65,6 +67,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 +82,17 @@ export const TextField = ({
     }
   };
 
-  const handleOnFocus = (
-    e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>,
-  ) => {
-    setIsFocused(true);
-    setShowErrorIcon(false);
-    restProps.onFocus?.(e);
-  };
+  useEffect(() => {
+    if (isFocused) {
+      setShowErrorIcon(false);
+      onFocus?.();
+    } else {
+      if (errorText?.length) {
+        setShowErrorIcon(true);
+      }
+      onBlur?.();
+    }
+  }, [isFocused]);
 
   const handleChange = (
     event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
@@ -103,16 +110,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 +129,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 +277,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 +347,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}

package/src/lib/interfaces/text-field.interface.ts

@@ -25,6 +25,8 @@ type Props = {
   type?: 'text' | 'password' | 'number' | 'date';
   autoComplete?: 'on' | 'off' | string;
   multiline?: boolean;
+  onFocus?: () => void;
+  onBlur?: () => void;
 };
 export type TextFieldStates = {
   isFocused: boolean;