@udixio/ui-react 2.9.20 → 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, onFocus, onBlur, ...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,8QAyBvB,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,6 +21,7 @@ type Props = {
     variant?: TextFieldVariant;
     type?: 'text' | 'password' | 'number' | 'date';
     autoComplete?: 'on' | 'off' | string;
+    autoFocus?: boolean;
     multiline?: boolean;
     onFocus?: () => void;
     onBlur?: () => void;

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;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"}
+{"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,6 +20,7 @@ export declare const textFieldStyle: (states: {
     variant: any;
     type: any;
     autoComplete: any;
+    autoFocus: any;
     multiline: any;
     onFocus: any;
     onBlur: any;
@@ -42,6 +43,7 @@ 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;
@@ -67,6 +69,7 @@ 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;

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.20",
+  "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,
@@ -82,6 +83,16 @@ 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);
@@ -283,6 +294,7 @@ export const TextField = ({
             autoComplete={autoComplete}
             aria-invalid={!!errorText?.length}
             aria-describedby={hasSupportingText ? helperTextId : undefined}
+            autoFocus={autoFocus}
             {...textComponentProps}
           />
         </div>
@@ -349,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,6 +24,7 @@ type Props = {
   variant?: TextFieldVariant;
   type?: 'text' | 'password' | 'number' | 'date';
   autoComplete?: 'on' | 'off' | string;
+  autoFocus?: boolean;
   multiline?: boolean;
   onFocus?: () => void;
   onBlur?: () => void;