formik-form-components 0.2.20 → 0.2.22

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,79 +1478,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 } = useFormikContext();
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(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],
-        children: [
-          label,
-          required && /* @__PURE__ */ jsx(
-            Typography,
-            {
-              component: "span",
-              sx: {
-                color: "error.main",
-                ml: 0.3
+  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],
+      "data-testid": `phone-input-${name}`,
+      children: [
+        label && /* @__PURE__ */ jsxs(
+          Typography,
+          {
+            variant: "subtitle2",
+            sx: [
+              {
+                mb: 0.5,
+                color: isTouched && fieldError ? "error.main" : "text.primary"
               },
-              children: "*"
-            }
-          )
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      PhoneInput,
-      {
-        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__ */ jsxs(
-      Typography,
-      {
-        variant: "caption",
-        sx: [{
-          mt: 0.5,
-          display: "block",
-          color: "error.main"
-        }, errorSx],
-        children: [
-          String(fieldError),
-          " "
-        ]
-      }
-    )
-  ] });
+              labelSx
+            ],
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx(
+                Typography,
+                {
+                  component: "span",
+                  sx: {
+                    color: "error.main",
+                    ml: 0.3
+                  },
+                  children: "*"
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          PhoneInput,
+          {
+            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__ */ jsx(
+          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 = forwardRef(({