@udixio/ui-react 2.9.19 → 2.9.21

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, autoFocus, 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,4CAwVhC,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,4CA+VhC,CAAC"}

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

@@ -21,7 +21,10 @@ type Props = {
     variant?: TextFieldVariant;
     type?: 'text' | 'password' | 'number' | 'date';
     autoComplete?: 'on' | 'off' | string;
+    autoFocus?: boolean;
     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,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

@@ -20,7 +20,10 @@ export declare const textFieldStyle: (states: {
     variant: any;
     type: any;
     autoComplete: any;
+    autoFocus: any;
     multiline: any;
+    onFocus: any;
+    onBlur: any;
 } & {
     placeholder?: string;
     name?: string;
@@ -40,7 +43,10 @@ export declare const textFieldStyle: (states: {
     variant?: import('..').TextFieldVariant;
     type?: "text" | "password" | "number" | "date";
     autoComplete?: "on" | "off" | string;
+    autoFocus?: boolean;
     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>;
@@ -63,7 +69,10 @@ export declare const useTextFieldStyle: (states: import('..').TextFieldStates &
     variant?: import('..').TextFieldVariant;
     type?: "text" | "password" | "number" | "date";
     autoComplete?: "on" | "off" | string;
+    autoFocus?: boolean;
     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.19",
+  "version": "2.9.21",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",

package/src/lib/components/TextField.tsx

@@ -27,6 +27,7 @@ import { TextFieldInterface } from '../interfaces';
  */
 export const TextField = ({
   variant = 'filled',
+  autoFocus,
   disabled = false,
   errorText,
   placeholder,
@@ -47,6 +48,8 @@ export const TextField = ({
   id: idProp,
   style,
   ref,
+  onFocus,
+  onBlur,
   ...restProps
 }: ReactProps<TextFieldInterface>) => {
   const generatedId = useId();
@@ -80,15 +83,25 @@ export const TextField = ({
     }
   };
 
+  useEffect(() => {
+    if (!autoFocus || disabled) return;
+
+    const rafId = window.requestAnimationFrame(() => {
+      focusInput();
+    });
+
+    return () => window.cancelAnimationFrame(rafId);
+  }, [autoFocus, disabled, inputRef]);
+
   useEffect(() => {
     if (isFocused) {
       setShowErrorIcon(false);
-      restProps.onFocus?.(e);
+      onFocus?.();
     } else {
       if (errorText?.length) {
         setShowErrorIcon(true);
       }
-      restProps.onBlur?.(e);
+      onBlur?.();
     }
   }, [isFocused]);
 
@@ -281,6 +294,7 @@ export const TextField = ({
             autoComplete={autoComplete}
             aria-invalid={!!errorText?.length}
             aria-describedby={hasSupportingText ? helperTextId : undefined}
+            autoFocus={autoFocus}
             {...textComponentProps}
           />
         </div>
@@ -347,10 +361,6 @@ export const TextField = ({
         <>
           <AnchorPositioner
             onBlur={(e) => {
-              console.log(
-                datePickerRef.current,
-                !datePickerRef.current?.contains(e.relatedTarget),
-              );
               if (
                 datePickerRef.current &&
                 !datePickerRef.current?.contains(e.relatedTarget)

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

@@ -24,7 +24,10 @@ type Props = {
   variant?: TextFieldVariant;
   type?: 'text' | 'password' | 'number' | 'date';
   autoComplete?: 'on' | 'off' | string;
+  autoFocus?: boolean;
   multiline?: boolean;
+  onFocus?: () => void;
+  onBlur?: () => void;
 };
 export type TextFieldStates = {
   isFocused: boolean;