formik-form-components 0.2.12 → 0.2.13

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as React$1 from 'react';
-import React__default, { ReactElement, ReactNode, ElementType, SetStateAction } from 'react';
+import React__default, { ReactElement, ReactNode, SyntheticEvent, ElementType, SetStateAction } from 'react';
 import { FormikValues, FormikConfig, FormikProps } from 'formik';
-import { SxProps, Theme, SelectProps as SelectProps$1, StandardTextFieldProps, SelectChangeEvent, RadioGroupProps, AutocompleteRenderInputParams, AutocompleteRenderOptionState, AutocompleteRenderGroupParams, CheckboxProps, ChipProps, AutocompleteProps, BoxProps } from '@mui/material';
+import { SxProps, Theme, AutocompleteProps, AutocompleteChangeReason, AutocompleteChangeDetails, TextFieldProps, SelectChangeEvent, RadioGroupProps, AutocompleteRenderInputParams, AutocompleteRenderOptionState, AutocompleteRenderGroupParams, CheckboxProps, ChipProps, BoxProps } from '@mui/material';
 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';
@@ -219,25 +219,28 @@ interface FormProps<T> extends FormikConfig<T> {
 }
 declare const Form: <T extends FormikValues>({ children, className, ...props }: FormProps<T>) => ReactElement;
 
-interface Props$5 extends Omit<SelectProps$1, 'name' | 'label' | 'value' | 'onChange' | 'variant'> {
+interface Props$5 extends Omit<AutocompleteProps<string, true, boolean, false, 'div'>, 'renderInput' | 'onChange' | 'value' | 'multiple' | 'freeSolo'> {
     name: string;
     freeSolo?: boolean;
     label?: string;
     placeholder?: string;
     options: string[];
+    value?: string[];
+    onChange?: (event: SyntheticEvent, value: string[], reason: AutocompleteChangeReason, details?: AutocompleteChangeDetails<string>) => void;
     /** Variant of the input field */
-    variant?: 'outlined' | 'filled' | 'standard';
+    variant?: "outlined" | "filled" | "standard";
     sx?: SxProps<Theme$1>;
     formControlSx?: SxProps<Theme$1>;
     textFieldSx?: SxProps<Theme$1>;
     chipSx?: SxProps<Theme$1>;
     errorSx?: SxProps<Theme$1>;
 }
-declare function AppAutoComplete({ placeholder, name, variant, label, options, sx, formControlSx, textFieldSx, chipSx, errorSx }: Props$5): React.JSX.Element;
+declare function AppAutoComplete({ placeholder, name, variant, label, options, value: propValue, onChange: propOnChange, sx, formControlSx, textFieldSx, chipSx, errorSx, }: Props$5): React.JSX.Element;
 
 interface CheckboxOption {
     label: string;
     name: string;
+    value: string | boolean | number;
     disabled?: boolean;
 }
 interface Props$4 {
@@ -270,7 +273,7 @@ interface Props$4 {
 }
 declare const AppCheckBox: ({ name, option, label, required, disabled, row, sx, checkboxSx, labelSx, errorSx, containerSx, iconSx, checkedSx, ...rest }: Props$4) => react_jsx_runtime.JSX.Element;
 
-interface Props$3 extends Omit<StandardTextFieldProps, 'variant'> {
+interface Props$3 extends Omit<TextFieldProps, 'variant'> {
     name: string;
     label: ReactNode;
     tagUser?: string;

package/dist/index.js

@@ -945,6 +945,8 @@ function AppAutoComplete({
   variant = "outlined",
   label,
   options = [],
+  value: propValue,
+  onChange: propOnChange,
   sx,
   formControlSx,
   textFieldSx,
@@ -954,7 +956,8 @@ function AppAutoComplete({
   const { errors, touched, getFieldProps, values, setFieldValue } = formik.useFormikContext();
   const fieldError = _19__default.default.get(errors, name);
   const isTouched = _19__default.default.get(touched, name);
-  const val = _19__default.default.get(values, name);
+  const formikValue = _19__default.default.get(values, name);
+  const val = propValue !== void 0 ? propValue : formikValue || [];
   return /* @__PURE__ */ jsxRuntime.jsxs(material.FormControl, { fullWidth: true, variant: "filled", sx: formControlSx, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       material.Autocomplete,
@@ -964,10 +967,23 @@ function AppAutoComplete({
         id: "tags-filled",
         options,
         freeSolo: true,
-        renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ react.createElement(material.Chip, { variant: "outlined", label: option, ...getTagProps({ index }), key: index, sx: chipSx })),
+        renderTags: (value, getTagProps) => value.map((option, index) => /* @__PURE__ */ react.createElement(
+          material.Chip,
+          {
+            variant: "outlined",
+            label: option,
+            ...getTagProps({ index }),
+            key: index,
+            sx: chipSx
+          }
+        )),
         value: val,
-        onChange: (event, newValue) => {
-          setFieldValue(name, newValue, true);
+        onChange: (event, newValue, reason, details) => {
+          if (propOnChange) {
+            propOnChange(event, newValue, reason, details);
+          } else {
+            setFieldValue(name, newValue, true);
+          }
         },
         renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
           material.TextField,
@@ -13834,7 +13850,7 @@ var AppUploadFile = ({
   dropZoneSx,
   ...rest
 }) => {
-  var _a, _b, _c, _d, _e;
+  var _a, _b;
   const { errors, touched, setFieldValue, values } = formik.useFormikContext();
   const fieldError = _19__default.default.get(errors, name);
   const isTouched = _19__default.default.get(touched, name);
@@ -13844,16 +13860,26 @@ var AppUploadFile = ({
   } else if (!((_b = rest.multiple) != null ? _b : false) && _19__default.default.isArray(val)) {
     val = val[0];
   }
-  const value = ((_c = rest.multiple) != null ? _c : false) ? (val != null ? val : []).map((__) => (__ == null ? void 0 : __.file) ? __ == null ? void 0 : __.file : __) : val;
+  const formatValue = (val2) => {
+    if (rest.multiple) {
+      return (Array.isArray(val2) ? val2 : []).map((item) => ({
+        ...(item == null ? void 0 : item.file) ? item : { file: item, preview: item == null ? void 0 : item.preview }
+      }));
+    }
+    return (val2 == null ? void 0 : val2.file) ? val2 : val2 ? { file: val2, preview: val2.preview } : null;
+  };
+  const formattedValue = formatValue(val);
+  const currentFiles = Array.isArray(val) ? val : [];
+  const isMaxFilesReached = rest.maxFiles !== null && rest.maxFiles !== void 0 && currentFiles.length >= rest.maxFiles;
   return /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Upload,
       {
         ...rest,
-        file: ((_d = rest.multiple) != null ? _d : false) ? void 0 : value,
-        files: ((_e = rest.multiple) != null ? _e : false) ? value : void 0,
+        file: rest.multiple ? void 0 : formattedValue,
+        files: rest.multiple ? formattedValue : void 0,
         error: Boolean(fieldError) && isTouched,
-        disabled: (rest == null ? void 0 : rest.maxFiles) !== null && (rest == null ? void 0 : rest.maxFiles) !== void 0 && (value == null ? void 0 : value.length) >= (rest == null ? void 0 : rest.maxFiles),
+        disabled: isMaxFilesReached,
         sx: [{
           "& .MuiDropzoneArea-root": {
             minHeight: 200,
@@ -13883,7 +13909,7 @@ var AppUploadFile = ({
                 };
               })
             );
-            const currentValue = Array.isArray(value) ? value : [];
+            const currentValue = Array.isArray(val) ? [...val] : [];
             if (rest.multiple === true) {
               if (currentValue.length >= ((_a2 = rest.maxFiles) != null ? _a2 : Infinity))
                 return;
@@ -13898,18 +13924,20 @@ var AppUploadFile = ({
           if ((_a2 = rest.multiple) != null ? _a2 : false) {
             setFieldValue(name, [], true);
           } else {
-            setFieldValue(name, "", true);
+            setFieldValue(name, null, true);
           }
         },
-        onRemove: (e) => {
-          const afterFilter = val.filter((file) => {
-            var _a2;
-            if ((_a2 = file.file) != null ? _a2 : false) {
-              return !_19__default.default.isEqual(e, file.file);
-            }
-            return !_19__default.default.isEqual(e, file);
-          });
-          setFieldValue(name, afterFilter, true);
+        onRemove: (fileToRemove) => {
+          if (rest.multiple) {
+            const currentFiles2 = Array.isArray(val) ? [...val] : [];
+            const filteredFiles = currentFiles2.filter((file) => {
+              const fileObj = (file == null ? void 0 : file.file) ? file.file : file;
+              return !_19__default.default.isEqual(fileObj, fileToRemove);
+            });
+            setFieldValue(name, filteredFiles, true);
+          } else {
+            setFieldValue(name, null, true);
+          }
         }
       }
     ),