formik-form-components 0.2.20 → 0.2.21

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { useFormikContext, Formik, Form as Form$1, ErrorMessage } from 'formik';
-import { forwardRef, memo, createElement, useState, useEffect } from 'react';
+import { forwardRef, memo, createElement, useState, useMemo, useEffect } from 'react';
 import { Box, useTheme, FormControl, Typography, FormHelperText, TextField, InputLabel, FormLabel, RadioGroup, FormControlLabel, Radio, Stack, Rating, Autocomplete, MenuItem, Chip, Switch, InputAdornment, IconButton, Checkbox, Tooltip, Dialog, DialogTitle, DialogContent, DialogActions, Button, CircularProgress, Paper, Menu } from '@mui/material';
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
@@ -1478,7 +1478,9 @@ var AppMultiSelector_default = AppMultiSelector;
 var AppPhoneNoInput = ({
   name,
   label,
-  required,
+  required = false,
+  defaultCountry = "us",
+  placeholder,
   sx,
   containerSx,
   labelSx,
@@ -1486,18 +1488,21 @@ var AppPhoneNoInput = ({
   errorSx,
   ...otherProps
 }) => {
-  const { values, errors, touched, setFieldValue, getFieldProps } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
+  const { values, errors, touched, setFieldValue, setFieldTouched } = useFormikContext();
+  const fieldError = useMemo(() => _19.get(errors, name), [errors, name]);
+  const isTouched = useMemo(() => _19.get(touched, name), [touched, name]);
   return /* @__PURE__ */ jsxs(Box, { sx: [{ mb: 2 }, containerSx, sx], children: [
     label && /* @__PURE__ */ jsxs(
       Typography,
       {
         variant: "subtitle2",
-        sx: [{
-          mb: 0.5,
-          color: isTouched && fieldError ? "error.main" : "text.primary"
-        }, labelSx],
+        sx: [
+          {
+            mb: 0.5,
+            color: isTouched && fieldError ? "error.main" : "text.primary"
+          },
+          labelSx
+        ],
         children: [
           label,
           required && /* @__PURE__ */ jsx(
@@ -1517,8 +1522,17 @@ var AppPhoneNoInput = ({
     /* @__PURE__ */ jsx(
       PhoneInput,
       {
-        country: "us",
+        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",
@@ -1530,24 +1544,25 @@ var AppPhoneNoInput = ({
           width: "100%"
         },
         ...otherProps,
-        ...getFieldProps(name),
         value: values[name],
-        onChange: (value) => setFieldValue(name, value)
+        onChange: (value) => setFieldValue(name, value),
+        onBlur: () => setFieldTouched(name, true)
       }
     ),
-    isTouched && fieldError && /* @__PURE__ */ jsxs(
+    isTouched && fieldError && /* @__PURE__ */ jsx(
       Typography,
       {
         variant: "caption",
-        sx: [{
-          mt: 0.5,
-          display: "block",
-          color: "error.main"
-        }, errorSx],
-        children: [
-          String(fieldError),
-          " "
-        ]
+        id: `${name}-error`,
+        sx: [
+          {
+            mt: 0.5,
+            display: "block",
+            color: "error.main"
+          },
+          errorSx
+        ],
+        children: String(fieldError)
       }
     )
   ] });