@hoddy-ui/next 2.0.36 → 2.0.37

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import React, { ReactNode, FC } from 'react';
-import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps } from 'react-native';
+import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps, TextInput } from 'react-native';
 import * as index from 'index';
 
 type ThemeTypes = "dark" | "light";
@@ -353,7 +353,7 @@ declare const SelectMenu: React.FC<SelectMenuProps>;
 declare const Spinner: React.FC<SpinnerProps>;
 
 declare const TextField: React.FC<TextFieldProps>;
-declare const TextField2: React.FC<TextFieldProps>;
+declare const TextField2: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<TextInput>>;
 
 declare const Typography: React.FC<TypographyProps>;
 

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React, { ReactNode, FC } from 'react';
-import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps } from 'react-native';
+import { ViewStyle, TextStyle, NativeSyntheticEvent, NativeScrollEvent, TextInputProps, TextProps, TextInput } from 'react-native';
 import * as index from 'index';
 
 type ThemeTypes = "dark" | "light";
@@ -353,7 +353,7 @@ declare const SelectMenu: React.FC<SelectMenuProps>;
 declare const Spinner: React.FC<SpinnerProps>;
 
 declare const TextField: React.FC<TextFieldProps>;
-declare const TextField2: React.FC<TextFieldProps>;
+declare const TextField2: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<TextInput>>;
 
 declare const Typography: React.FC<TypographyProps>;
 

package/dist/index.js

@@ -1573,191 +1573,194 @@ var TextField = ({
     }
   ));
 };
-var TextField2 = ({
-  label,
-  keyboardType,
-  color = "primary",
-  value,
-  type,
-  helperText,
-  onChangeText,
-  onSubmitEditing = () => {
-  },
-  onFocus = () => {
-  },
-  onBlur = () => {
-  },
-  error,
-  start,
-  rounded,
-  disabled = false,
-  style = {},
-  inputStyles = {},
-  gutterBottom = 8,
-  placeholder,
-  end,
-  options,
-  ...props
-}) => {
-  const colors2 = useColors();
-  const [focused, _setFocused] = (0, import_react16.useState)(false);
-  const [showPassword, setShowPassword] = (0, import_react16.useState)(false);
-  const height = (0, import_react_native_size_matters14.moderateScale)(
-    props.multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
-  );
-  const setFocused = (value2) => {
-    _setFocused(value2);
-  };
-  const styles2 = import_react_native_size_matters14.ScaledSheet.create({
-    root: {
-      marginBottom: gutterBottom + "@vs",
-      ...style
-    },
-    container: {
-      height,
-      overflow: "hidden",
-      flexDirection: "row",
-      borderColor: error ? colors2.error.main : focused ? colors2[color].main : colors2.white[5],
-      borderWidth: error ? 1 : focused ? 2 : 1,
-      width: "100%",
-      borderRadius: rounded ? 30 : 10,
-      alignItems: "center",
-      ...inputStyles
-    },
-    input: {
-      fontSize: "14@s",
-      flex: 1,
-      alignSelf: "stretch",
-      paddingLeft: (0, import_react_native_size_matters14.moderateScale)(10),
-      paddingRight: (0, import_react_native_size_matters14.moderateScale)(10),
-      color: colors2.dark.main,
-      zIndex: 10
-      // backgroundColor: "#284",
-    },
-    inputText: {
-      fontSize: "14@ms",
-      color: colors2.dark.main,
-      paddingLeft: (0, import_react_native_size_matters14.moderateScale)(10)
-    },
-    placeholder: {
-      fontSize: "14@ms",
-      color: colors2.textSecondary.main,
-      paddingLeft: (0, import_react_native_size_matters14.moderateScale)(10)
+var TextField2 = import_react16.default.forwardRef(
+  ({
+    label,
+    keyboardType,
+    color = "primary",
+    value,
+    type,
+    helperText,
+    onChangeText,
+    onSubmitEditing = () => {
     },
-    label: {},
-    helperText: {
-      paddingHorizontal: "15@s",
-      color: focused ? colors2[color].dark : "#fffa",
-      paddingTop: "4@ms"
+    onFocus = () => {
     },
-    error: {
-      paddingLeft: 10,
-      paddingRight: 10,
-      paddingTop: 5,
-      flexDirection: "row",
-      alignItems: "center"
-    },
-    errorText: {
-      fontSize: 12,
-      marginLeft: 10
-    }
-  });
-  const formProps = type === "email" ? {
-    textContentType: "emailAddress",
-    keyboardType: "email-address",
-    autoCapitalize: "none",
-    autoCompleteType: "email"
-  } : type === "number" ? {
-    keyboardType: "numeric"
-  } : type === "tel" ? {
-    textContentType: "telephoneNumber",
-    keyboardType: "phone-pad"
-  } : type === "search" ? {
-    keyboardType: "web-search",
-    returnKeyType: "search",
-    autoCapitalize: "none"
-  } : type === "password" ? {
-    secureTextEntry: !showPassword,
-    autoCompleteType: "password",
-    autoCapitalize: "none",
-    textContentType: "password"
-  } : {};
-  return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles2.root }, label && /* @__PURE__ */ import_react16.default.createElement(Typography_default, { variant: "body1", color: "textSecondary", gutterBottom: 7 }, label), /* @__PURE__ */ import_react16.default.createElement(
-    import_react_native16.TouchableOpacity,
-    {
-      onPress: () => setFocused(true),
-      style: styles2.container
+    onBlur = () => {
     },
+    error,
     start,
-    options ? /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, value ? /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles2.inputText }, options.find((cur) => cur.value === value)?.label) : /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles2.placeholder }, placeholder), /* @__PURE__ */ import_react16.default.createElement(
-      import_vector_icons8.Ionicons,
-      {
-        name: "chevron-down",
-        size: 24,
-        style: { marginLeft: "auto", marginRight: 15 },
-        color: colors2.dark.light
-      }
-    )) : /* @__PURE__ */ import_react16.default.createElement(
-      import_react_native16.TextInput,
-      {
-        onFocus: () => {
-          onFocus();
-          setFocused(true);
-        },
-        onBlur: () => {
-          onBlur();
-          setFocused(false);
-        },
-        value,
-        onChangeText,
-        key: showPassword ? "show" : "hide",
-        keyboardType,
-        placeholderTextColor: colors2.textSecondary.main,
-        editable: !disabled,
-        placeholder,
-        selectTextOnFocus: !disabled,
-        onSubmitEditing,
-        ...formProps,
-        ...props,
-        style: styles2.input
+    rounded,
+    disabled = false,
+    style = {},
+    inputStyles = {},
+    gutterBottom = 8,
+    placeholder,
+    end,
+    options,
+    ...props
+  }, ref) => {
+    const colors2 = useColors();
+    const [focused, _setFocused] = (0, import_react16.useState)(false);
+    const [showPassword, setShowPassword] = (0, import_react16.useState)(false);
+    const height = (0, import_react_native_size_matters14.moderateScale)(
+      props.multiline ? 50 + (props.numberOfLines || 1) * 18 : 50
+    );
+    const setFocused = (value2) => {
+      _setFocused(value2);
+    };
+    const styles2 = import_react_native_size_matters14.ScaledSheet.create({
+      root: {
+        marginBottom: gutterBottom + "@vs",
+        ...style
+      },
+      container: {
+        height,
+        overflow: "hidden",
+        flexDirection: "row",
+        borderColor: error ? colors2.error.main : focused ? colors2[color].main : colors2.white[5],
+        borderWidth: error ? 1 : focused ? 2 : 1,
+        width: "100%",
+        borderRadius: rounded ? 30 : 10,
+        alignItems: "center",
+        ...inputStyles
+      },
+      input: {
+        fontSize: "14@s",
+        flex: 1,
+        alignSelf: "stretch",
+        paddingLeft: (0, import_react_native_size_matters14.moderateScale)(10),
+        paddingRight: (0, import_react_native_size_matters14.moderateScale)(10),
+        color: colors2.dark.main,
+        zIndex: 10
+        // backgroundColor: "#284",
+      },
+      inputText: {
+        fontSize: "14@ms",
+        color: colors2.dark.main,
+        paddingLeft: (0, import_react_native_size_matters14.moderateScale)(10)
+      },
+      placeholder: {
+        fontSize: "14@ms",
+        color: colors2.textSecondary.main,
+        paddingLeft: (0, import_react_native_size_matters14.moderateScale)(10)
+      },
+      label: {},
+      helperText: {
+        paddingHorizontal: "15@s",
+        color: focused ? colors2[color].dark : "#fffa",
+        paddingTop: "4@ms"
+      },
+      error: {
+        paddingLeft: 10,
+        paddingRight: 10,
+        paddingTop: 5,
+        flexDirection: "row",
+        alignItems: "center"
+      },
+      errorText: {
+        fontSize: 12,
+        marginLeft: 10
       }
-    ),
-    end ? /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: { marginRight: 20 } }, end) : type === "password" && /* @__PURE__ */ import_react16.default.createElement(
+    });
+    const formProps = type === "email" ? {
+      textContentType: "emailAddress",
+      keyboardType: "email-address",
+      autoCapitalize: "none",
+      autoCompleteType: "email"
+    } : type === "number" ? {
+      keyboardType: "numeric"
+    } : type === "tel" ? {
+      textContentType: "telephoneNumber",
+      keyboardType: "phone-pad"
+    } : type === "search" ? {
+      keyboardType: "web-search",
+      returnKeyType: "search",
+      autoCapitalize: "none"
+    } : type === "password" ? {
+      secureTextEntry: !showPassword,
+      autoCompleteType: "password",
+      autoCapitalize: "none",
+      textContentType: "password"
+    } : {};
+    return /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles2.root }, label && /* @__PURE__ */ import_react16.default.createElement(Typography_default, { variant: "body1", color: "textSecondary", gutterBottom: 7 }, label), /* @__PURE__ */ import_react16.default.createElement(
       import_react_native16.TouchableOpacity,
       {
-        style: { marginRight: 20 },
-        onPress: () => setShowPassword(!showPassword)
+        onPress: () => setFocused(true),
+        style: styles2.container
       },
-      /* @__PURE__ */ import_react16.default.createElement(
+      start,
+      options ? /* @__PURE__ */ import_react16.default.createElement(import_react16.default.Fragment, null, value ? /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles2.inputText }, options.find((cur) => cur.value === value)?.label) : /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles2.placeholder }, placeholder), /* @__PURE__ */ import_react16.default.createElement(
         import_vector_icons8.Ionicons,
         {
-          name: showPassword ? "eye-outline" : "eye-off-outline",
+          name: "chevron-down",
           size: 24,
-          color: colors2.textSecondary.main
+          style: { marginLeft: "auto", marginRight: 15 },
+          color: colors2.dark.light
+        }
+      )) : /* @__PURE__ */ import_react16.default.createElement(
+        import_react_native16.TextInput,
+        {
+          ref,
+          onFocus: () => {
+            onFocus();
+            setFocused(true);
+          },
+          onBlur: () => {
+            onBlur();
+            setFocused(false);
+          },
+          value,
+          onChangeText,
+          key: showPassword ? "show" : "hide",
+          keyboardType,
+          placeholderTextColor: colors2.textSecondary.main,
+          editable: !disabled,
+          placeholder,
+          selectTextOnFocus: !disabled,
+          onSubmitEditing,
+          ...formProps,
+          ...props,
+          style: styles2.input
         }
+      ),
+      end ? /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: { marginRight: 20 } }, end) : type === "password" && /* @__PURE__ */ import_react16.default.createElement(
+        import_react_native16.TouchableOpacity,
+        {
+          style: { marginRight: 20 },
+          onPress: () => setShowPassword(!showPassword)
+        },
+        /* @__PURE__ */ import_react16.default.createElement(
+          import_vector_icons8.Ionicons,
+          {
+            name: showPassword ? "eye-outline" : "eye-off-outline",
+            size: 24,
+            color: colors2.textSecondary.main
+          }
+        )
       )
-    )
-  ), helperText && /* @__PURE__ */ import_react16.default.createElement(
-    Typography_default,
-    {
-      color: "textSecondary",
-      style: styles2.helperText,
-      variant: "caption"
-    },
-    helperText
-  ), error && /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles2.error }, /* @__PURE__ */ import_react16.default.createElement(import_vector_icons8.MaterialIcons, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles2.errorText, color: "error" }, error))), options && /* @__PURE__ */ import_react16.default.createElement(
-    SelectMenu_default,
-    {
-      options,
-      value,
-      open: focused,
-      onClose: () => setFocused(false),
-      label,
-      helperText,
-      onChange: onChangeText
-    }
-  ));
-};
+    ), helperText && /* @__PURE__ */ import_react16.default.createElement(
+      Typography_default,
+      {
+        color: "textSecondary",
+        style: styles2.helperText,
+        variant: "caption"
+      },
+      helperText
+    ), error && /* @__PURE__ */ import_react16.default.createElement(import_react_native16.View, { style: styles2.error }, /* @__PURE__ */ import_react16.default.createElement(import_vector_icons8.MaterialIcons, { name: "error", color: colors2.error.main, size: 16 }), /* @__PURE__ */ import_react16.default.createElement(Typography_default, { style: styles2.errorText, color: "error" }, error))), options && /* @__PURE__ */ import_react16.default.createElement(
+      SelectMenu_default,
+      {
+        options,
+        value,
+        open: focused,
+        onClose: () => setFocused(false),
+        label,
+        helperText,
+        onChange: onChangeText
+      }
+    ));
+  }
+);
 var TextField_default = TextField;
 
 // ../src/Components/Locator.tsx