formik-form-components 0.2.16 → 0.2.18

package/dist/index.mjs

@@ -4,12 +4,12 @@ import { Box, useTheme, FormControl, Typography, FormHelperText, TextField, Inpu
 import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
-import { Dayjs } from 'dayjs';
+import CalendarMonthIcon from '@mui/icons-material/CalendarMonth';
 import _19, { get } from 'lodash';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
 import Autocomplete3 from '@mui/material/Autocomplete';
-import Typography10 from '@mui/material/Typography';
+import Typography9 from '@mui/material/Typography';
 import { Icon } from '@iconify/react';
 import Select from '@mui/material/Select';
 import PhoneInput from 'react-phone-input-2';
@@ -43,129 +43,35 @@ var AppDatePicker = forwardRef(
   ({
     name,
     label,
-    required = false,
     disabled = false,
-    variant = "outlined",
-    showIcon = true,
     format = "DD/MM/YYYY",
     sx,
-    formControlSx,
     textFieldSx,
-    labelSx,
-    inputSx,
-    errorSx,
-    iconSx,
-    onChange: externalOnChange,
-    onBlur: externalOnBlur,
     ...otherProps
   }, ref) => {
     const { values, setFieldValue, touched, errors, setFieldTouched } = useFormikContext();
     const fieldValue = _19.get(values, name);
     const fieldError = _19.get(errors, name);
     const isTouched = _19.get(touched, name);
-    const handleChange = (newValue, context) => {
+    const handleChange = (newValue) => {
       setFieldValue(name, newValue);
-      if (externalOnChange) {
-        externalOnChange(newValue, context);
-      }
-    };
-    const handleBlur = (event) => {
-      setFieldTouched(name, true);
-      if (externalOnBlur) {
-        externalOnBlur(event);
-      }
     };
     return /* @__PURE__ */ jsx(LocalizationProvider, { dateAdapter: AdapterDayjs, children: /* @__PURE__ */ jsx(Box, { sx, ref, children: /* @__PURE__ */ jsx(
       DatePicker,
       {
         label,
-        value: fieldValue ? fieldValue instanceof Dayjs ? fieldValue : null : null,
+        value: fieldValue,
         onChange: handleChange,
         format,
         disabled,
         slotProps: {
           textField: {
+            variant: "outlined",
             fullWidth: true,
-            variant,
             error: isTouched && Boolean(fieldError),
             helperText: isTouched && fieldError ? fieldError : void 0,
-            onBlur: handleBlur,
-            sx: [
-              {
-                "& .MuiOutlinedInput-root": {
-                  backgroundColor: "background.paper",
-                  "&.Mui-focused": {
-                    "& .MuiOutlinedInput-notchedOutline": {
-                      borderColor: "primary.main"
-                    }
-                  },
-                  "&.Mui-error": {
-                    backgroundColor: "error.lighter",
-                    "& .MuiOutlinedInput-input": {
-                      color: "error.main"
-                    }
-                  },
-                  "&.Mui-disabled": {
-                    backgroundColor: "action.disabledBackground",
-                    "& .MuiOutlinedInput-notchedOutline": {
-                      borderColor: "action.disabled"
-                    }
-                  },
-                  ...inputSx
-                },
-                "& .MuiOutlinedInput-notchedOutline": {
-                  borderColor: isTouched && fieldError ? "error.main" : "divider"
-                },
-                "&:hover .MuiOutlinedInput-notchedOutline": {
-                  borderColor: isTouched && fieldError ? "error.main" : "primary.main"
-                },
-                ...textFieldSx
-              }
-            ],
-            FormHelperTextProps: {
-              sx: [
-                {
-                  color: "error.main",
-                  mx: 0,
-                  mt: 0.5,
-                  ...errorSx
-                }
-              ]
-            },
-            InputLabelProps: {
-              sx: [
-                {
-                  color: "text.secondary",
-                  "&.Mui-focused": {
-                    color: "primary.main"
-                  },
-                  "&.Mui-error": {
-                    color: "error.main"
-                  },
-                  ...labelSx
-                }
-              ]
-            },
-            InputProps: {
-              endAdornment: showIcon ? /* @__PURE__ */ jsx(
-                Box,
-                {
-                  component: "span",
-                  sx: [
-                    {
-                      color: "text.secondary",
-                      "&:hover": {
-                        color: "primary.main"
-                      },
-                      "&.Mui-disabled": {
-                        color: "action.disabled"
-                      },
-                      ...iconSx
-                    }
-                  ]
-                }
-              ) : null
-            }
+            sx: textFieldSx,
+            openPickerIcon: CalendarMonthIcon
           }
         },
         ...otherProps
@@ -1095,7 +1001,7 @@ var AppCheckBox = ({
       }, ...Array.isArray(sx) ? sx : [sx]],
       children: [
         label && /* @__PURE__ */ jsx(
-          Typography10,
+          Typography9,
           {
             variant: "subtitle2",
             gutterBottom: true,
@@ -1172,7 +1078,7 @@ var AppCheckBox = ({
                     }
                   ),
                   /* @__PURE__ */ jsx(
-                    Typography10,
+                    Typography9,
                     {
                       variant: "body2",
                       sx: [{
@@ -1191,7 +1097,7 @@ var AppCheckBox = ({
           }
         ),
         isTouched && fieldError && /* @__PURE__ */ jsx(
-          Typography10,
+          Typography9,
           {
             variant: "caption",
             sx: [{
@@ -1807,206 +1713,208 @@ var AppRadioGroup = forwardRef(({
 });
 AppRadioGroup.displayName = "AppRadioGroup";
 var AppRadioGroup_default = AppRadioGroup;
-var AppRating = forwardRef(({
-  name,
-  label,
-  required = false,
-  readOnly = false,
-  disabled = false,
-  max = 5,
-  precision = 1,
-  size = "medium",
-  emptyIcon,
-  icon,
-  IconContainerComponent,
-  getLabelText,
-  onChange: externalOnChange,
-  onChangeActive,
-  sx,
-  labelSx,
-  ratingSx,
-  errorSx,
-  helperTextSx,
-  showHelperText = false,
-  helperText,
-  labelComponent: LabelComponent = Typography,
-  ratingComponent: RatingComponent = Rating,
-  errorComponent: ErrorComponent = Typography,
-  helperTextComponent: HelperTextComponent = FormHelperText,
-  labelProps = {},
-  ratingProps = {},
-  errorProps = {},
-  helperTextProps = {},
-  className = "",
-  labelClassName = "",
-  ratingClassName = "",
-  errorClassName = "",
-  helperTextClassName = "",
-  ...otherProps
-}, ref) => {
-  useTheme();
-  const { errors, touched, setFieldValue, values, setFieldTouched } = useFormikContext();
-  const val = _19.get(values, name);
-  const fieldError = _19.get(errors, name);
-  const isTouched = _19.get(touched, name);
-  const hasError = Boolean(fieldError) && isTouched;
-  const handleChange = (event, newValue) => {
-    setFieldValue(name, newValue);
-    setFieldTouched(name, true, false);
-    if (externalOnChange) {
-      externalOnChange(event, newValue);
-    }
-  };
-  const handleBlur = () => {
-    setFieldTouched(name, true, true);
-  };
-  return /* @__PURE__ */ jsxs(
-    Box,
-    {
-      ref,
-      className: `app-rating ${className}`,
-      sx: [
-        {
-          display: "flex",
-          flexDirection: "column",
-          width: "100%",
-          "&:hover": {
-            "& .MuiRating-iconEmpty": {
-              color: "primary.light"
-            }
-          }
-        },
-        ...Array.isArray(sx) ? sx : [sx]
-      ],
-      ...otherProps,
-      children: [
-        /* @__PURE__ */ jsxs(
-          Stack,
+var AppRating = forwardRef(
+  ({
+    name,
+    label,
+    required = false,
+    readOnly = false,
+    disabled = false,
+    max = 5,
+    precision = 1,
+    size = "medium",
+    emptyIcon,
+    icon,
+    IconContainerComponent,
+    getLabelText,
+    onChange: externalOnChange,
+    onChangeActive,
+    sx,
+    labelSx,
+    ratingSx,
+    errorSx,
+    helperTextSx,
+    showHelperText = false,
+    helperText,
+    labelComponent: LabelComponent = Typography,
+    ratingComponent: RatingComponent = Rating,
+    errorComponent: ErrorComponent = Typography,
+    helperTextComponent: HelperTextComponent = FormHelperText,
+    labelProps = {},
+    ratingProps = {},
+    errorProps = {},
+    helperTextProps = {},
+    className = "",
+    labelClassName = "",
+    ratingClassName = "",
+    errorClassName = "",
+    helperTextClassName = "",
+    ...otherProps
+  }, ref) => {
+    useTheme();
+    const { errors, touched, setFieldValue, values, setFieldTouched } = useFormikContext();
+    const val = _19.get(values, name);
+    const fieldError = _19.get(errors, name);
+    const isTouched = _19.get(touched, name);
+    const hasError = Boolean(fieldError) && isTouched;
+    const handleChange = (event, newValue) => {
+      setFieldValue(name, newValue);
+      setFieldTouched(name, true, false);
+      if (externalOnChange) {
+        externalOnChange(event, newValue);
+      }
+    };
+    const handleBlur = () => {
+      setFieldTouched(name, true, true);
+    };
+    return /* @__PURE__ */ jsxs(
+      Box,
+      {
+        ref,
+        className: `app-rating ${className}`,
+        sx: [
           {
-            direction: "row",
-            alignItems: "center",
-            spacing: 1,
-            sx: {
-              "&.Mui-disabled": {
-                opacity: 0.5,
-                cursor: "not-allowed"
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            "&:hover": {
+              "& .MuiRating-iconEmpty": {
+                color: "primary.light"
               }
-            },
-            className: disabled ? "Mui-disabled" : "",
-            children: [
-              label && /* @__PURE__ */ jsxs(
-                LabelComponent,
-                {
-                  variant: "body2",
-                  color: hasError ? "error" : "text.primary",
-                  className: `app-rating-label ${labelClassName}`,
-                  sx: [
-                    {
-                      margin: 0,
-                      fontWeight: 500,
-                      ...disabled && {
-                        color: "text.disabled"
-                      }
-                    },
-                    ...Array.isArray(labelSx) ? labelSx : [labelSx]
-                  ],
-                  ...labelProps,
-                  children: [
-                    label,
-                    required && /* @__PURE__ */ jsx(
-                      Box,
-                      {
-                        component: "span",
-                        sx: {
-                          color: "error.main",
-                          ml: 0.5
-                        },
-                        children: "*"
-                      }
-                    )
-                  ]
+            }
+          },
+          ...Array.isArray(sx) ? sx : [sx]
+        ],
+        ...otherProps,
+        children: [
+          /* @__PURE__ */ jsxs(
+            Stack,
+            {
+              direction: "row",
+              alignItems: "center",
+              spacing: 1,
+              sx: {
+                "&.Mui-disabled": {
+                  opacity: 0.5,
+                  cursor: "not-allowed"
                 }
-              ),
-              /* @__PURE__ */ jsx(
-                Box,
-                {
-                  onBlur: handleBlur,
-                  sx: [
-                    {
-                      display: "inline-flex",
-                      "& .MuiRating-icon": {
-                        color: "primary.main"
-                      },
-                      "& .MuiRating-iconEmpty": {
-                        color: "action.disabled"
-                      },
-                      "& .MuiRating-iconFilled": {
-                        color: "primary.main"
-                      },
-                      "& .MuiRating-iconHover": {
-                        color: "primary.dark"
-                      },
-                      "&.Mui-disabled": {
-                        opacity: 0.5,
-                        cursor: "not-allowed"
+              },
+              className: disabled ? "Mui-disabled" : "",
+              children: [
+                label && /* @__PURE__ */ jsxs(
+                  LabelComponent,
+                  {
+                    variant: "body2",
+                    color: hasError ? "error" : "text.primary",
+                    className: `app-rating-label ${labelClassName}`,
+                    sx: [
+                      {
+                        margin: 0,
+                        fontWeight: 500,
+                        ...disabled && {
+                          color: "text.disabled"
+                        }
                       },
-                      ...hasError && {
+                      ...Array.isArray(labelSx) ? labelSx : [labelSx]
+                    ],
+                    ...labelProps,
+                    children: [
+                      label,
+                      required && /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          component: "span",
+                          sx: {
+                            color: "error.main",
+                            ml: 0.5
+                          },
+                          children: "*"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  Box,
+                  {
+                    onBlur: handleBlur,
+                    sx: [
+                      {
+                        display: "inline-flex",
                         "& .MuiRating-icon": {
-                          color: "error.main"
+                          color: "primary.main"
+                        },
+                        "& .MuiRating-iconEmpty": {
+                          color: "action.disabled"
+                        },
+                        "& .MuiRating-iconFilled": {
+                          color: "primary.main"
+                        },
+                        "& .MuiRating-iconHover": {
+                          color: "primary.dark"
+                        },
+                        "&.Mui-disabled": {
+                          opacity: 0.5,
+                          cursor: "not-allowed"
+                        },
+                        ...hasError && {
+                          "& .MuiRating-icon": {
+                            color: "error.main"
+                          }
                         }
+                      },
+                      ...Array.isArray(ratingSx) ? ratingSx : [ratingSx]
+                    ],
+                    className: `app-rating-stars ${ratingClassName} ${disabled ? "Mui-disabled" : ""}`,
+                    children: /* @__PURE__ */ jsx(
+                      RatingComponent,
+                      {
+                        value: val != null ? val : null,
+                        onChange: handleChange,
+                        onChangeActive,
+                        max,
+                        precision,
+                        size,
+                        readOnly,
+                        disabled,
+                        emptyIcon,
+                        icon,
+                        IconContainerComponent,
+                        getLabelText,
+                        className: ratingClassName,
+                        ...ratingProps
                       }
-                    },
-                    ...Array.isArray(ratingSx) ? ratingSx : [ratingSx]
-                  ],
-                  className: `app-rating-stars ${ratingClassName} ${disabled ? "Mui-disabled" : ""}`,
-                  children: /* @__PURE__ */ jsx(
-                    RatingComponent,
-                    {
-                      value: val != null ? val : null,
-                      onChange: handleChange,
-                      onChangeActive,
-                      max,
-                      precision,
-                      size,
-                      readOnly,
-                      disabled,
-                      emptyIcon,
-                      icon,
-                      IconContainerComponent,
-                      getLabelText,
-                      className: ratingClassName,
-                      ...ratingProps
-                    }
-                  )
+                    )
+                  }
+                )
+              ]
+            }
+          ),
+          (showHelperText || hasError) && /* @__PURE__ */ jsx(
+            HelperTextComponent,
+            {
+              error: hasError,
+              sx: [
+                {
+                  mx: 0,
+                  mt: 0.5,
+                  ...hasError && {
+                    color: "error.main",
+                    ...errorSx
+                  },
+                  ...helperTextSx
                 }
-              )
-            ]
-          }
-        ),
-        (showHelperText || hasError) && /* @__PURE__ */ jsx(
-          HelperTextComponent,
-          {
-            error: hasError,
-            sx: [
-              {
-                mx: 0,
-                mt: 0.5,
-                ...hasError && {
-                  color: "error.main",
-                  ...errorSx
-                },
-                ...helperTextSx
-              }
-            ],
-            className: `app-rating-helper-text ${helperTextClassName} ${hasError ? "Mui-error" : ""}`,
-            ...helperTextProps,
-            children: hasError ? fieldError : helperText
-          }
-        )
-      ]
-    }
-  );
-});
+              ],
+              className: `app-rating-helper-text ${helperTextClassName} ${hasError ? "Mui-error" : ""}`,
+              ...helperTextProps,
+              children: hasError ? fieldError : helperText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
 AppRating.displayName = "AppRating";
 var AppRating_default = AppRating;
 
@@ -13766,16 +13674,7 @@ function Upload({
         },
         children: [
           /* @__PURE__ */ jsx("input", { ...getInputProps() }),
-          /* @__PURE__ */ jsx(
-            Placeholder,
-            {
-              sx: {
-                ...hasFile && {
-                  opacity: 0
-                }
-              }
-            }
-          ),
+          hasFile ? null : /* @__PURE__ */ jsx(Placeholder, {}),
           hasFile && /* @__PURE__ */ jsx(SingleFilePreview, { file })
         ]
       }
@@ -13928,15 +13827,22 @@ var AppUploadFile = ({ name, ...rest }) => {
             setFieldValue(name, "", true);
           }
         },
-        onRemove: (e) => {
-          const afterFilter = val.filter((file) => {
-            var _a2;
-            if ((_a2 = file.file) != null ? _a2 : false) {
-              return !_19.isEqual(e, file.file);
-            }
-            return !_19.isEqual(e, file);
-          });
-          setFieldValue(name, afterFilter, true);
+        onRemove: (fileToRemove) => {
+          if (rest.multiple) {
+            const currentFiles = Array.isArray(val) ? val : [];
+            const updatedFiles = currentFiles.filter((f) => {
+              if (f.file && f.file === fileToRemove)
+                return false;
+              if (f === fileToRemove)
+                return false;
+              if (f.preview === fileToRemove)
+                return false;
+              return true;
+            });
+            setFieldValue(name, updatedFiles, true);
+          } else {
+            setFieldValue(name, null, true);
+          }
         }
       }
     ),