@sincpro/mobile-ui 3.1.0 → 3.3.0

package/dist/Form/Form.Input.js

@@ -6,6 +6,7 @@ import { cn, tv } from "../theme/tw.js";
 import { Typography } from "../Typography/index.js";
 import { useState } from "react";
 import { TextInput, TouchableOpacity, View } from "react-native";
+import { KeyboardController } from "react-native-keyboard-controller";
 import { jsx as _jsx, jsxs as _jsxs } from "nativewind/jsx-runtime";
 // `card`: filled surface, the default of forms built with the DS. Same box as the
 // Select, DatePicker, PickerField and Dropdown triggers.
@@ -92,15 +93,17 @@ function SecureToggle(t0) {
  * | `outline` | bodyLarge              | border only, rounded, 44 high           | 16           |
  */
 function FormInput(t0) {
-  const $ = _c(94);
+  const $ = _c(98);
   let className;
   let error;
   let label;
   let onBlur;
   let onFocus;
+  let onSubmitEditing;
   let props;
   let ref;
   let style;
+  let submitBehavior;
   let t1;
   let t2;
   let t3;
@@ -118,6 +121,8 @@ function FormInput(t0) {
       numberOfLines: t4,
       onFocus,
       onBlur,
+      onSubmitEditing,
+      submitBehavior,
       className,
       ref,
       ...props
@@ -128,28 +133,32 @@ function FormInput(t0) {
     $[3] = label;
     $[4] = onBlur;
     $[5] = onFocus;
-    $[6] = props;
-    $[7] = ref;
-    $[8] = style;
-    $[9] = t1;
-    $[10] = t2;
-    $[11] = t3;
-    $[12] = t4;
-    $[13] = tooltip;
+    $[6] = onSubmitEditing;
+    $[7] = props;
+    $[8] = ref;
+    $[9] = style;
+    $[10] = submitBehavior;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = tooltip;
   } else {
     className = $[1];
     error = $[2];
     label = $[3];
     onBlur = $[4];
     onFocus = $[5];
-    props = $[6];
-    ref = $[7];
-    style = $[8];
-    t1 = $[9];
-    t2 = $[10];
-    t3 = $[11];
-    t4 = $[12];
-    tooltip = $[13];
+    onSubmitEditing = $[6];
+    props = $[7];
+    ref = $[8];
+    style = $[9];
+    submitBehavior = $[10];
+    t1 = $[11];
+    t2 = $[12];
+    t3 = $[13];
+    t4 = $[14];
+    tooltip = $[15];
   }
   const look = t1 === undefined ? "card" : t1;
   const secure = t2 === undefined ? false : t2;
@@ -161,325 +170,335 @@ function FormInput(t0) {
   const hasError = Boolean(error);
   const state = hasError ? "error" : isFocused ? "focused" : "default";
   let t5;
-  if ($[14] !== onFocus) {
+  if ($[16] !== onFocus) {
     t5 = e => {
       setIsFocused(true);
       onFocus?.(e);
     };
-    $[14] = onFocus;
-    $[15] = t5;
+    $[16] = onFocus;
+    $[17] = t5;
   } else {
-    t5 = $[15];
+    t5 = $[17];
   }
   const handleFocus = t5;
   let t6;
-  if ($[16] !== onBlur) {
+  if ($[18] !== onBlur) {
     t6 = e_0 => {
       setIsFocused(false);
       onBlur?.(e_0);
     };
-    $[16] = onBlur;
-    $[17] = t6;
+    $[18] = onBlur;
+    $[19] = t6;
   } else {
-    t6 = $[17];
+    t6 = $[19];
   }
   const handleBlur = t6;
   let t7;
-  if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
     t7 = () => setRevealed(_temp);
-    $[18] = t7;
+    $[20] = t7;
   } else {
-    t7 = $[18];
+    t7 = $[20];
   }
   const toggle = t7;
+  const advances = props.returnKeyType === "next" && !multiline && !onSubmitEditing;
   const t8 = error || tooltip;
-  const t9 = secure && !revealed;
-  let t10;
-  if ($[19] !== handleBlur || $[20] !== handleFocus || $[21] !== label || $[22] !== ref || $[23] !== t8 || $[24] !== t9 || $[25] !== theme.primary || $[26] !== theme.text.tertiary) {
-    t10 = {
+  const t9 = advances ? _temp2 : onSubmitEditing;
+  const t10 = advances ? "submit" : submitBehavior;
+  const t11 = secure && !revealed;
+  let t12;
+  if ($[21] !== handleBlur || $[22] !== handleFocus || $[23] !== label || $[24] !== ref || $[25] !== t10 || $[26] !== t11 || $[27] !== t8 || $[28] !== t9 || $[29] !== theme.primary || $[30] !== theme.text.tertiary) {
+    t12 = {
       accessibilityHint: t8,
       accessibilityLabel: label,
       onBlur: handleBlur,
       onFocus: handleFocus,
+      onSubmitEditing: t9,
+      submitBehavior: t10,
       placeholderTextColor: theme.text.tertiary,
       ref,
-      secureTextEntry: t9,
+      secureTextEntry: t11,
       selectionColor: theme.primary,
       underlineColorAndroid: "transparent"
     };
-    $[19] = handleBlur;
-    $[20] = handleFocus;
-    $[21] = label;
-    $[22] = ref;
-    $[23] = t8;
-    $[24] = t9;
-    $[25] = theme.primary;
-    $[26] = theme.text.tertiary;
-    $[27] = t10;
+    $[21] = handleBlur;
+    $[22] = handleFocus;
+    $[23] = label;
+    $[24] = ref;
+    $[25] = t10;
+    $[26] = t11;
+    $[27] = t8;
+    $[28] = t9;
+    $[29] = theme.primary;
+    $[30] = theme.text.tertiary;
+    $[31] = t12;
   } else {
-    t10 = $[27];
+    t12 = $[31];
   }
-  const shared = t10;
-  let t11;
-  if ($[28] !== error || $[29] !== hasError || $[30] !== look) {
-    t11 = hasError ? _jsx(Typography.Text, {
+  const shared = t12;
+  let t13;
+  if ($[32] !== error || $[33] !== hasError || $[34] !== look) {
+    t13 = hasError ? _jsx(Typography.Text, {
       accessibilityLiveRegion: "polite",
       className: look === "card" ? "mt-0.5 text-danger" : "mt-1 text-danger",
       variant: "bodySmall",
       children: error
     }) : null;
-    $[28] = error;
-    $[29] = hasError;
-    $[30] = look;
-    $[31] = t11;
+    $[32] = error;
+    $[33] = hasError;
+    $[34] = look;
+    $[35] = t13;
   } else {
-    t11 = $[31];
+    t13 = $[35];
   }
-  const errorText = t11;
+  const errorText = t13;
   if (look === "outline") {
-    let t12;
-    if ($[32] !== className) {
-      t12 = cn("mb-4", className);
-      $[32] = className;
-      $[33] = t12;
+    let t14;
+    if ($[36] !== className) {
+      t14 = cn("mb-4", className);
+      $[36] = className;
+      $[37] = t14;
     } else {
-      t12 = $[33];
+      t14 = $[37];
     }
-    let t13;
-    if ($[34] !== label) {
-      t13 = label ? _jsx(Typography.Text, {
+    let t15;
+    if ($[38] !== label) {
+      t15 = label ? _jsx(Typography.Text, {
         className: "mb-1",
         variant: "bodyLarge",
         children: label
       }) : null;
-      $[34] = label;
-      $[35] = t13;
+      $[38] = label;
+      $[39] = t15;
     } else {
-      t13 = $[35];
+      t15 = $[39];
     }
-    let t14;
-    if ($[36] !== state) {
-      t14 = outlineInput({
+    let t16;
+    if ($[40] !== state) {
+      t16 = outlineInput({
         state
       });
-      $[36] = state;
-      $[37] = t14;
+      $[40] = state;
+      $[41] = t16;
     } else {
-      t14 = $[37];
+      t16 = $[41];
     }
-    let t15;
-    if ($[38] === Symbol.for("react.memo_cache_sentinel")) {
-      t15 = inputTextStyle();
-      $[38] = t15;
+    let t17;
+    if ($[42] === Symbol.for("react.memo_cache_sentinel")) {
+      t17 = inputTextStyle();
+      $[42] = t17;
     } else {
-      t15 = $[38];
+      t17 = $[42];
     }
-    let t16;
-    if ($[39] !== style) {
-      t16 = [t15, style];
-      $[39] = style;
-      $[40] = t16;
+    let t18;
+    if ($[43] !== style) {
+      t18 = [t17, style];
+      $[43] = style;
+      $[44] = t18;
     } else {
-      t16 = $[40];
+      t18 = $[44];
     }
-    let t17;
-    if ($[41] !== multiline || $[42] !== numberOfLines || $[43] !== props || $[44] !== shared || $[45] !== t14 || $[46] !== t16) {
-      t17 = _jsx(TextInput, {
-        className: t14,
+    let t19;
+    if ($[45] !== multiline || $[46] !== numberOfLines || $[47] !== props || $[48] !== shared || $[49] !== t16 || $[50] !== t18) {
+      t19 = _jsx(TextInput, {
+        className: t16,
         multiline: multiline,
         numberOfLines: numberOfLines,
-        style: t16,
+        style: t18,
         ...shared,
         ...props
       });
-      $[41] = multiline;
-      $[42] = numberOfLines;
-      $[43] = props;
-      $[44] = shared;
-      $[45] = t14;
-      $[46] = t16;
-      $[47] = t17;
+      $[45] = multiline;
+      $[46] = numberOfLines;
+      $[47] = props;
+      $[48] = shared;
+      $[49] = t16;
+      $[50] = t18;
+      $[51] = t19;
     } else {
-      t17 = $[47];
+      t19 = $[51];
     }
-    let t18;
-    if ($[48] !== errorText || $[49] !== t12 || $[50] !== t13 || $[51] !== t17) {
-      t18 = _jsxs(View, {
-        className: t12,
-        children: [t13, t17, errorText]
+    let t20;
+    if ($[52] !== errorText || $[53] !== t14 || $[54] !== t15 || $[55] !== t19) {
+      t20 = _jsxs(View, {
+        className: t14,
+        children: [t15, t19, errorText]
       });
-      $[48] = errorText;
-      $[49] = t12;
-      $[50] = t13;
-      $[51] = t17;
-      $[52] = t18;
+      $[52] = errorText;
+      $[53] = t14;
+      $[54] = t15;
+      $[55] = t19;
+      $[56] = t20;
     } else {
-      t18 = $[52];
+      t20 = $[56];
     }
-    const field = t18;
+    const field = t20;
     if (!secure) {
       return field;
     }
-    let t19;
-    if ($[53] !== revealed) {
-      t19 = _jsx(SecureToggle, {
+    let t21;
+    if ($[57] !== revealed) {
+      t21 = _jsx(SecureToggle, {
         className: "absolute right-3 bottom-[25px]",
         onToggle: toggle,
         visible: revealed
       });
-      $[53] = revealed;
-      $[54] = t19;
+      $[57] = revealed;
+      $[58] = t21;
     } else {
-      t19 = $[54];
+      t21 = $[58];
     }
-    let t20;
-    if ($[55] !== field || $[56] !== t19) {
-      t20 = _jsxs(View, {
+    let t22;
+    if ($[59] !== field || $[60] !== t21) {
+      t22 = _jsxs(View, {
         className: "mb-4 relative",
-        children: [field, t19]
+        children: [field, t21]
       });
-      $[55] = field;
-      $[56] = t19;
-      $[57] = t20;
+      $[59] = field;
+      $[60] = t21;
+      $[61] = t22;
     } else {
-      t20 = $[57];
+      t22 = $[61];
     }
-    return t20;
+    return t22;
   }
-  let t12;
-  if ($[58] !== className) {
-    t12 = cn("mb-2", className);
-    $[58] = className;
-    $[59] = t12;
+  let t14;
+  if ($[62] !== className) {
+    t14 = cn("mb-2", className);
+    $[62] = className;
+    $[63] = t14;
   } else {
-    t12 = $[59];
+    t14 = $[63];
   }
-  let t13;
-  if ($[60] !== label) {
-    t13 = label ? _jsx(Typography.Text, {
+  let t15;
+  if ($[64] !== label) {
+    t15 = label ? _jsx(Typography.Text, {
       className: "mb-1 text-text-primary",
       semibold: true,
       variant: "bodySmall",
       children: label
     }) : null;
-    $[60] = label;
-    $[61] = t13;
+    $[64] = label;
+    $[65] = t15;
   } else {
-    t13 = $[61];
+    t15 = $[65];
   }
-  let t14;
-  if ($[62] !== secure || $[63] !== state) {
-    t14 = cn(cardBox({
+  let t16;
+  if ($[66] !== secure || $[67] !== state) {
+    t16 = cn(cardBox({
       state
     }), secure && "flex-row items-center");
-    $[62] = secure;
-    $[63] = state;
-    $[64] = t14;
-  } else {
-    t14 = $[64];
-  }
-  const t15 = multiline && "min-h-[64px] pt-2.5";
-  const t16 = secure && "flex-1";
-  let t17;
-  if ($[65] !== t15 || $[66] !== t16) {
-    t17 = cn("px-3 py-2.5 min-h-[48px] text-text-primary", t15, t16);
-    $[65] = t15;
-    $[66] = t16;
-    $[67] = t17;
+    $[66] = secure;
+    $[67] = state;
+    $[68] = t16;
   } else {
-    t17 = $[67];
+    t16 = $[68];
   }
-  let t18;
-  if ($[68] === Symbol.for("react.memo_cache_sentinel")) {
-    t18 = inputTextStyle();
-    $[68] = t18;
+  const t17 = multiline && "min-h-[64px] pt-2.5";
+  const t18 = secure && "flex-1";
+  let t19;
+  if ($[69] !== t17 || $[70] !== t18) {
+    t19 = cn("px-3 py-2.5 min-h-[48px] text-text-primary", t17, t18);
+    $[69] = t17;
+    $[70] = t18;
+    $[71] = t19;
   } else {
-    t18 = $[68];
+    t19 = $[71];
   }
-  const t19 = multiline ? 64 : 48;
   let t20;
-  if ($[69] !== t19) {
-    t20 = {
-      minHeight: t19
-    };
-    $[69] = t19;
-    $[70] = t20;
+  if ($[72] === Symbol.for("react.memo_cache_sentinel")) {
+    t20 = inputTextStyle();
+    $[72] = t20;
   } else {
-    t20 = $[70];
+    t20 = $[72];
   }
-  let t21;
-  if ($[71] !== style || $[72] !== t20) {
-    t21 = [t18, t20, style];
-    $[71] = style;
-    $[72] = t20;
+  const t21 = multiline ? 64 : 48;
+  let t22;
+  if ($[73] !== t21) {
+    t22 = {
+      minHeight: t21
+    };
     $[73] = t21;
+    $[74] = t22;
   } else {
-    t21 = $[73];
+    t22 = $[74];
   }
-  const t22 = multiline ? "top" : "center";
   let t23;
-  if ($[74] !== multiline || $[75] !== numberOfLines || $[76] !== props || $[77] !== shared || $[78] !== t17 || $[79] !== t21 || $[80] !== t22) {
-    t23 = _jsx(TextInput, {
-      className: t17,
+  if ($[75] !== style || $[76] !== t22) {
+    t23 = [t20, t22, style];
+    $[75] = style;
+    $[76] = t22;
+    $[77] = t23;
+  } else {
+    t23 = $[77];
+  }
+  const t24 = multiline ? "top" : "center";
+  let t25;
+  if ($[78] !== multiline || $[79] !== numberOfLines || $[80] !== props || $[81] !== shared || $[82] !== t19 || $[83] !== t23 || $[84] !== t24) {
+    t25 = _jsx(TextInput, {
+      className: t19,
       multiline: multiline,
       numberOfLines: numberOfLines,
-      style: t21,
-      textAlignVertical: t22,
+      style: t23,
+      textAlignVertical: t24,
       ...shared,
       ...props
     });
-    $[74] = multiline;
-    $[75] = numberOfLines;
-    $[76] = props;
-    $[77] = shared;
-    $[78] = t17;
-    $[79] = t21;
-    $[80] = t22;
-    $[81] = t23;
+    $[78] = multiline;
+    $[79] = numberOfLines;
+    $[80] = props;
+    $[81] = shared;
+    $[82] = t19;
+    $[83] = t23;
+    $[84] = t24;
+    $[85] = t25;
   } else {
-    t23 = $[81];
+    t25 = $[85];
   }
-  let t24;
-  if ($[82] !== revealed || $[83] !== secure) {
-    t24 = secure ? _jsx(SecureToggle, {
+  let t26;
+  if ($[86] !== revealed || $[87] !== secure) {
+    t26 = secure ? _jsx(SecureToggle, {
       className: "px-3",
       onToggle: toggle,
       visible: revealed
     }) : null;
-    $[82] = revealed;
-    $[83] = secure;
-    $[84] = t24;
+    $[86] = revealed;
+    $[87] = secure;
+    $[88] = t26;
   } else {
-    t24 = $[84];
+    t26 = $[88];
   }
-  let t25;
-  if ($[85] !== t14 || $[86] !== t23 || $[87] !== t24) {
-    t25 = _jsxs(View, {
-      className: t14,
-      children: [t23, t24]
+  let t27;
+  if ($[89] !== t16 || $[90] !== t25 || $[91] !== t26) {
+    t27 = _jsxs(View, {
+      className: t16,
+      children: [t25, t26]
     });
-    $[85] = t14;
-    $[86] = t23;
-    $[87] = t24;
-    $[88] = t25;
+    $[89] = t16;
+    $[90] = t25;
+    $[91] = t26;
+    $[92] = t27;
   } else {
-    t25 = $[88];
+    t27 = $[92];
   }
-  let t26;
-  if ($[89] !== errorText || $[90] !== t12 || $[91] !== t13 || $[92] !== t25) {
-    t26 = _jsxs(View, {
-      className: t12,
-      children: [t13, t25, errorText]
+  let t28;
+  if ($[93] !== errorText || $[94] !== t14 || $[95] !== t15 || $[96] !== t27) {
+    t28 = _jsxs(View, {
+      className: t14,
+      children: [t15, t27, errorText]
     });
-    $[89] = errorText;
-    $[90] = t12;
-    $[91] = t13;
-    $[92] = t25;
-    $[93] = t26;
+    $[93] = errorText;
+    $[94] = t14;
+    $[95] = t15;
+    $[96] = t27;
+    $[97] = t28;
   } else {
-    t26 = $[93];
+    t28 = $[97];
   }
-  return t26;
+  return t28;
+}
+function _temp2() {
+  return KeyboardController.setFocusTo("next");
 }
 function _temp(value) {
   return !value;