formik-form-components 0.2.20 → 0.2.22

package/dist/index.d.ts

@@ -325,12 +325,13 @@ interface AppPhoneNoInputProps {
     name: string;
     label?: string;
     required?: boolean;
+    defaultCountry?: string;
+    placeholder?: string;
     sx?: SxProps<Theme>;
     containerSx?: SxProps<Theme>;
     labelSx?: SxProps<Theme>;
     inputSx?: React__default.CSSProperties;
     errorSx?: SxProps<Theme>;
-    [key: string]: unknown;
 }
 declare const AppPhoneNoInput: React__default.FC<AppPhoneNoInputProps>;
 

package/dist/index.js

@@ -1506,79 +1506,99 @@ var AppMultiSelector_default = AppMultiSelector;
 var AppPhoneNoInput = ({
   name,
   label,
-  required,
+  required = false,
+  defaultCountry = "us",
+  placeholder,
   sx,
   containerSx,
   labelSx,
   inputSx,
-  errorSx,
-  ...otherProps
+  errorSx
 }) => {
-  const { values, errors, touched, setFieldValue, getFieldProps } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
-  return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: [{ mb: 2 }, containerSx, sx], children: [
-    label && /* @__PURE__ */ jsxRuntime.jsxs(
-      material.Typography,
-      {
-        variant: "subtitle2",
-        sx: [{
-          mb: 0.5,
-          color: isTouched && fieldError ? "error.main" : "text.primary"
-        }, labelSx],
-        children: [
-          label,
-          required && /* @__PURE__ */ jsxRuntime.jsx(
-            material.Typography,
-            {
-              component: "span",
-              sx: {
-                color: "error.main",
-                ml: 0.3
+  const { values, errors, touched, setFieldValue, setFieldTouched } = formik.useFormikContext();
+  const fieldError = react.useMemo(() => _19__default.default.get(errors, name), [errors, name]);
+  const isTouched = react.useMemo(() => _19__default.default.get(touched, name), [touched, name]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    material.Box,
+    {
+      sx: [{ mb: 2 }, containerSx, sx],
+      "data-testid": `phone-input-${name}`,
+      children: [
+        label && /* @__PURE__ */ jsxRuntime.jsxs(
+          material.Typography,
+          {
+            variant: "subtitle2",
+            sx: [
+              {
+                mb: 0.5,
+                color: isTouched && fieldError ? "error.main" : "text.primary"
               },
-              children: "*"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      PhoneInput__default.default,
-      {
-        country: "us",
-        specialLabel: "",
-        inputStyle: {
-          width: "100%",
-          border: isTouched && fieldError ? "1px solid #f44336" : "1px solid #ccc",
-          padding: "10px",
-          borderRadius: "4px",
-          ...inputSx
-        },
-        containerStyle: {
-          width: "100%"
-        },
-        ...otherProps,
-        ...getFieldProps(name),
-        value: values[name],
-        onChange: (value) => setFieldValue(name, value)
-      }
-    ),
-    isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsxs(
-      material.Typography,
-      {
-        variant: "caption",
-        sx: [{
-          mt: 0.5,
-          display: "block",
-          color: "error.main"
-        }, errorSx],
-        children: [
-          String(fieldError),
-          " "
-        ]
-      }
-    )
-  ] });
+              labelSx
+            ],
+            children: [
+              label,
+              required && /* @__PURE__ */ jsxRuntime.jsx(
+                material.Typography,
+                {
+                  component: "span",
+                  sx: {
+                    color: "error.main",
+                    ml: 0.3
+                  },
+                  children: "*"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          PhoneInput__default.default,
+          {
+            country: defaultCountry,
+            specialLabel: "",
+            placeholder,
+            inputProps: {
+              name,
+              id: name,
+              required,
+              "aria-describedby": fieldError ? `${name}-error` : void 0,
+              "aria-invalid": !!fieldError,
+              "aria-required": required
+            },
+            inputStyle: {
+              width: "100%",
+              border: isTouched && fieldError ? "1px solid #f44336" : "1px solid #ccc",
+              padding: "10px",
+              borderRadius: "4px",
+              ...inputSx
+            },
+            containerStyle: {
+              width: "100%"
+            },
+            value: values[name],
+            onChange: (value) => setFieldValue(name, value),
+            onBlur: () => setFieldTouched(name, true)
+          }
+        ),
+        isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(
+          material.Typography,
+          {
+            variant: "caption",
+            id: `${name}-error`,
+            sx: [
+              {
+                mt: 0.5,
+                display: "block",
+                color: "error.main"
+              },
+              errorSx
+            ],
+            children: String(fieldError)
+          }
+        )
+      ]
+    }
+  );
 };
 var AppPhoneNoInput_default = AppPhoneNoInput;
 var AppRadioGroup = react.forwardRef(({