formik-form-components 0.2.19 → 0.2.21

package/dist/index.d.ts

@@ -325,6 +325,8 @@ interface AppPhoneNoInputProps {
     name: string;
     label?: string;
     required?: boolean;
+    defaultCountry?: string;
+    placeholder?: string;
     sx?: SxProps<Theme>;
     containerSx?: SxProps<Theme>;
     labelSx?: SxProps<Theme>;

package/dist/index.js

@@ -1506,7 +1506,9 @@ var AppMultiSelector_default = AppMultiSelector;
 var AppPhoneNoInput = ({
   name,
   label,
-  required,
+  required = false,
+  defaultCountry = "us",
+  placeholder,
   sx,
   containerSx,
   labelSx,
@@ -1514,18 +1516,21 @@ var AppPhoneNoInput = ({
   errorSx,
   ...otherProps
 }) => {
-  const { values, errors, touched, setFieldValue, getFieldProps } = formik.useFormikContext();
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
+  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], children: [
     label && /* @__PURE__ */ jsxRuntime.jsxs(
       material.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__ */ jsxRuntime.jsx(
@@ -1545,8 +1550,17 @@ var AppPhoneNoInput = ({
     /* @__PURE__ */ jsxRuntime.jsx(
       PhoneInput__default.default,
       {
-        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",
@@ -1558,24 +1572,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__ */ jsxRuntime.jsxs(
+    isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(
       material.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)
       }
     )
   ] });