formik-form-components 0.2.17 → 0.2.18

package/dist/index.d.ts

@@ -6,48 +6,18 @@ import { Theme as Theme$1 } from '@mui/material/styles';
 import { SelectProps, SelectChangeEvent as SelectChangeEvent$1 } from '@mui/material/Select';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Dayjs } from 'dayjs';
-import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
 import { DropzoneOptions } from 'react-dropzone';
 import { IconifyIcon } from '@iconify/react';
 
-type PickerChangeHandlerContext = {
-    validationError: string | null;
-};
-
-declare const AppDatePicker: React__default.ForwardRefExoticComponent<Omit<DatePickerProps<boolean, Dayjs, Dayjs>, "value" | "onChange" | "renderInput" | "slotProps"> & {
-    /** Variant of the input field */
-    variant?: "outlined" | "filled" | "standard";
-    /** Field name for formik */
+type AppDatePickerProps = {
     name: string;
-    /** Label for the date picker */
     label?: string;
-    /** Whether the field is required */
-    required?: boolean;
-    /** Whether the field is disabled */
     disabled?: boolean;
-    /** Whether to show the calendar icon */
-    showIcon?: boolean;
-    /** Format for the displayed date */
     format?: string;
-    /** Custom styles for the root container */
     sx?: SxProps<Theme>;
-    /** Custom styles for the form control */
-    formControlSx?: SxProps<Theme>;
-    /** Custom styles for the text field */
     textFieldSx?: SxProps<Theme>;
-    /** Custom styles for the label */
-    labelSx?: SxProps<Theme>;
-    /** Custom styles for the input */
-    inputSx?: SxProps<Theme>;
-    /** Custom styles for the error message */
-    errorSx?: SxProps<Theme>;
-    /** Custom styles for the calendar icon */
-    iconSx?: SxProps<Theme>;
-    /** Callback when the value changes */
-    onChange?: (value: Dayjs | null, context: PickerChangeHandlerContext) => void;
-    /** Callback when the field is blurred */
-    onBlur?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
-} & React__default.RefAttributes<HTMLDivElement>>;
+};
+declare const AppDatePicker: React__default.ForwardRefExoticComponent<AppDatePickerProps & React__default.RefAttributes<HTMLDivElement>>;
 
 interface AppSelectOptions$4 {
     label: string;
@@ -73,7 +43,7 @@ interface AppDateAndTimePickerProps {
     /** Label for the date and time picker */
     label?: string;
     /** Variant of the input field */
-    variant?: 'outlined' | 'filled' | 'standard';
+    variant?: "outlined" | "filled" | "standard";
     /** Placeholder text */
     placeholder?: string;
     /** Whether the field is required */
@@ -428,7 +398,7 @@ interface AppRatingProps {
     /** Precision of the rating */
     precision?: number;
     /** Size of the rating icons */
-    size?: 'small' | 'medium' | 'large' | number;
+    size?: "small" | "medium" | "large" | number;
     /** Custom icon for empty rating */
     emptyIcon?: ReactNode;
     /** Custom icon for filled rating */

package/dist/index.js

@@ -6,12 +6,12 @@ var material = require('@mui/material');
 var DatePicker = require('@mui/x-date-pickers/DatePicker');
 var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
 var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
-var dayjs = require('dayjs');
+var CalendarMonthIcon = require('@mui/icons-material/CalendarMonth');
 var _19 = require('lodash');
 var jsxRuntime = require('react/jsx-runtime');
 var DateTimePicker = require('@mui/x-date-pickers/DateTimePicker');
 var Autocomplete3 = require('@mui/material/Autocomplete');
-var Typography10 = require('@mui/material/Typography');
+var Typography9 = require('@mui/material/Typography');
 var react$1 = require('@iconify/react');
 var Select = require('@mui/material/Select');
 var PhoneInput = require('react-phone-input-2');
@@ -42,9 +42,10 @@ var reactI18next = require('react-i18next');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
+var CalendarMonthIcon__default = /*#__PURE__*/_interopDefault(CalendarMonthIcon);
 var _19__default = /*#__PURE__*/_interopDefault(_19);
 var Autocomplete3__default = /*#__PURE__*/_interopDefault(Autocomplete3);
-var Typography10__default = /*#__PURE__*/_interopDefault(Typography10);
+var Typography9__default = /*#__PURE__*/_interopDefault(Typography9);
 var Select__default = /*#__PURE__*/_interopDefault(Select);
 var PhoneInput__default = /*#__PURE__*/_interopDefault(PhoneInput);
 var StarterKit__default = /*#__PURE__*/_interopDefault(StarterKit);
@@ -70,129 +71,35 @@ var AppDatePicker = react.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 } = formik.useFormikContext();
     const fieldValue = _19__default.default.get(values, name);
     const fieldError = _19__default.default.get(errors, name);
     const isTouched = _19__default.default.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__ */ jsxRuntime.jsx(LocalizationProvider.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, children: /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx, ref, children: /* @__PURE__ */ jsxRuntime.jsx(
       DatePicker.DatePicker,
       {
         label,
-        value: fieldValue ? fieldValue instanceof dayjs.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__ */ jsxRuntime.jsx(
-                material.Box,
-                {
-                  component: "span",
-                  sx: [
-                    {
-                      color: "text.secondary",
-                      "&:hover": {
-                        color: "primary.main"
-                      },
-                      "&.Mui-disabled": {
-                        color: "action.disabled"
-                      },
-                      ...iconSx
-                    }
-                  ]
-                }
-              ) : null
-            }
+            sx: textFieldSx,
+            openPickerIcon: CalendarMonthIcon__default.default
           }
         },
         ...otherProps
@@ -1122,7 +1029,7 @@ var AppCheckBox = ({
       }, ...Array.isArray(sx) ? sx : [sx]],
       children: [
         label && /* @__PURE__ */ jsxRuntime.jsx(
-          Typography10__default.default,
+          Typography9__default.default,
           {
             variant: "subtitle2",
             gutterBottom: true,
@@ -1199,7 +1106,7 @@ var AppCheckBox = ({
                     }
                   ),
                   /* @__PURE__ */ jsxRuntime.jsx(
-                    Typography10__default.default,
+                    Typography9__default.default,
                     {
                       variant: "body2",
                       sx: [{
@@ -1218,7 +1125,7 @@ var AppCheckBox = ({
           }
         ),
         isTouched && fieldError && /* @__PURE__ */ jsxRuntime.jsx(
-          Typography10__default.default,
+          Typography9__default.default,
           {
             variant: "caption",
             sx: [{
@@ -1834,206 +1741,208 @@ var AppRadioGroup = react.forwardRef(({
 });
 AppRadioGroup.displayName = "AppRadioGroup";
 var AppRadioGroup_default = AppRadioGroup;
-var AppRating = react.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 = material.Typography,
-  ratingComponent: RatingComponent = material.Rating,
-  errorComponent: ErrorComponent = material.Typography,
-  helperTextComponent: HelperTextComponent = material.FormHelperText,
-  labelProps = {},
-  ratingProps = {},
-  errorProps = {},
-  helperTextProps = {},
-  className = "",
-  labelClassName = "",
-  ratingClassName = "",
-  errorClassName = "",
-  helperTextClassName = "",
-  ...otherProps
-}, ref) => {
-  material.useTheme();
-  const { errors, touched, setFieldValue, values, setFieldTouched } = formik.useFormikContext();
-  const val = _19__default.default.get(values, name);
-  const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.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__ */ jsxRuntime.jsxs(
-    material.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__ */ jsxRuntime.jsxs(
-          material.Stack,
+var AppRating = react.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 = material.Typography,
+    ratingComponent: RatingComponent = material.Rating,
+    errorComponent: ErrorComponent = material.Typography,
+    helperTextComponent: HelperTextComponent = material.FormHelperText,
+    labelProps = {},
+    ratingProps = {},
+    errorProps = {},
+    helperTextProps = {},
+    className = "",
+    labelClassName = "",
+    ratingClassName = "",
+    errorClassName = "",
+    helperTextClassName = "",
+    ...otherProps
+  }, ref) => {
+    material.useTheme();
+    const { errors, touched, setFieldValue, values, setFieldTouched } = formik.useFormikContext();
+    const val = _19__default.default.get(values, name);
+    const fieldError = _19__default.default.get(errors, name);
+    const isTouched = _19__default.default.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__ */ jsxRuntime.jsxs(
+      material.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                      material.Box,
-                      {
-                        component: "span",
-                        sx: {
-                          color: "error.main",
-                          ml: 0.5
-                        },
-                        children: "*"
-                      }
-                    )
-                  ]
+            }
+          },
+          ...Array.isArray(sx) ? sx : [sx]
+        ],
+        ...otherProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            material.Stack,
+            {
+              direction: "row",
+              alignItems: "center",
+              spacing: 1,
+              sx: {
+                "&.Mui-disabled": {
+                  opacity: 0.5,
+                  cursor: "not-allowed"
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                material.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                        material.Box,
+                        {
+                          component: "span",
+                          sx: {
+                            color: "error.main",
+                            ml: 0.5
+                          },
+                          children: "*"
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  material.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+            HelperTextComponent,
+            {
+              error: hasError,
+              sx: [
+                {
+                  mx: 0,
+                  mt: 0.5,
+                  ...hasError && {
+                    color: "error.main",
+                    ...errorSx
+                  },
+                  ...helperTextSx
                 }
-              )
-            ]
-          }
-        ),
-        (showHelperText || hasError) && /* @__PURE__ */ jsxRuntime.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;