formik-form-components 0.2.25 → 0.2.26

package/dist/index.js

@@ -92,14 +92,16 @@ var AppDatePicker = react.forwardRef(
         onChange: handleChange,
         format,
         disabled,
+        slots: {
+          openPickerIcon: CalendarMonthIcon__default.default
+        },
         slotProps: {
           textField: {
             variant: "outlined",
             fullWidth: true,
             error: isTouched && Boolean(fieldError),
             helperText: isTouched && fieldError ? fieldError : void 0,
-            sx: textFieldSx,
-            openPickerIcon: CalendarMonthIcon__default.default
+            sx: textFieldSx
           }
         },
         ...otherProps
@@ -11866,106 +11868,447 @@ var AppSearchableMultiSelector = react.forwardRef(
 );
 AppSearchableMultiSelector.displayName = "AppSearchableMultiSelector";
 var AppSearchableMultiSelector_default = AppSearchableMultiSelector;
-function AppSearchableSelectInput({
-  name,
-  label,
-  options = [],
-  required = false,
-  variant = "outlined",
-  placeholder,
-  setSearchQuery,
-  isResetRequired,
-  ...otherProps
-}) {
-  const { errors, touched, setFieldValue, values } = formik.useFormikContext();
+var AppSearchableMultiSelector2 = react.forwardRef((props, ref) => {
+  const {
+    name,
+    label,
+    multiple = true,
+    options = [],
+    setSearchQuery,
+    required = false,
+    variant = "outlined",
+    disabled = false,
+    readOnly = false,
+    showHelperText = false,
+    helperText,
+    maxSelections,
+    showSelectedCount = false,
+    sx,
+    formControlSx,
+    labelSx,
+    inputSx,
+    textFieldSx,
+    autocompleteSx,
+    listboxSx,
+    optionSx,
+    chipSx,
+    errorSx,
+    helperTextSx,
+    selectedCountSx,
+    renderInput: externalRenderInput,
+    renderOption: externalRenderOption,
+    renderTags: externalRenderTags,
+    renderGroup: externalRenderGroup,
+    labelComponent: LabelComponent = material.InputLabel,
+    inputComponent: InputComponent = "input",
+    errorComponent: ErrorComponent = material.Typography,
+    helperTextComponent: HelperTextComponent = material.FormHelperText,
+    labelProps = {},
+    inputProps = {},
+    textFieldProps = {},
+    autocompleteProps = {},
+    checkboxProps = {},
+    chipProps = {},
+    errorProps = {},
+    helperTextProps = {},
+    className = "",
+    formControlClassName = "",
+    labelClassName = "",
+    inputClassName = "",
+    textFieldClassName = "",
+    autocompleteClassName = "",
+    listboxClassName = "",
+    optionClassName = "",
+    chipClassName = "",
+    errorClassName = "",
+    helperTextClassName = "",
+    onInputChange: externalOnInputChange,
+    onChange: externalOnChange,
+    onOpen,
+    onClose,
+    onBlur: externalOnBlur,
+    onFocus: externalOnFocus,
+    onClear,
+    onMaxSelectionsReached,
+    onRemove,
+    onAdd,
+    ...otherProps
+  } = props;
+  material.useTheme();
+  const { values, setFieldValue, errors, touched, setFieldTouched } = formik.useFormikContext();
   const fieldError = _19__default.default.get(errors, name);
-  const isTouched = _19__default.default.get(touched, name);
+  const isTouched = Boolean(_19__default.default.get(touched, name));
+  const hasError = Boolean(fieldError) && isTouched;
   const val = _19__default.default.get(values, name);
-  const selectedOption = options.find((option) => option.value === val) || null;
-  const handleChange = (event, newValue) => {
-    setFieldValue(name, newValue ? newValue.value : "");
-  };
-  const handleSearchChange = (event) => {
-    const { value } = event.target;
-    if (setSearchQuery) {
-      setSearchQuery(value);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    material.FormControl,
-    {
-      fullWidth: true,
-      variant,
-      error: isTouched && Boolean(fieldError),
-      sx: {
-        padding: "0px !important",
-        ".MuiAutocomplete-endAdornment": { right: "0 !important" },
-        ".MuiInputBase-root": {
-          padding: "0px !important",
-          pr: "39px !important",
-          pl: "10px !important"
+  const selectedValues = Array.isArray(val) ? val : [];
+  const selectedCount = selectedValues.length;
+  const handleChange = react.useCallback(
+    (event, value, reason, details) => {
+      const normalizedValue = (() => {
+        if (value === null)
+          return [];
+        const arr = Array.isArray(value) ? value : [value];
+        return arr.map(
+          (item) => typeof item === "string" ? { value: item, label: item } : item
+        );
+      })();
+      if (maxSelections && normalizedValue.length > maxSelections) {
+        onMaxSelectionsReached == null ? void 0 : onMaxSelectionsReached(maxSelections);
+        return;
+      }
+      if (reason === "selectOption" || reason === "removeOption") {
+        const added = normalizedValue.filter(
+          (item) => !selectedValues.some((v) => v.value === item.value)
+        );
+        const removed = selectedValues.filter(
+          (item) => !normalizedValue.some((v) => v.value === item.value)
+        );
+        added.forEach((item) => onAdd == null ? void 0 : onAdd(item));
+        removed.forEach((item) => onRemove == null ? void 0 : onRemove(item));
+      }
+      setFieldValue(name, normalizedValue, true);
+      externalOnChange == null ? void 0 : externalOnChange(event, normalizedValue, reason);
+    },
+    [
+      maxSelections,
+      selectedValues,
+      setFieldValue,
+      name,
+      onMaxSelectionsReached,
+      onAdd,
+      onRemove,
+      externalOnChange
+    ]
+  );
+  const handleInputChange = react.useCallback(
+    (event, value, reason) => {
+      setSearchQuery == null ? void 0 : setSearchQuery(value);
+      externalOnInputChange == null ? void 0 : externalOnInputChange(event, value, reason);
+    },
+    [setSearchQuery, externalOnInputChange]
+  );
+  const handleBlur = react.useCallback(
+    (event) => {
+      setFieldTouched(name, true, true);
+      externalOnBlur == null ? void 0 : externalOnBlur(event);
+    },
+    [name, setFieldTouched, externalOnBlur]
+  );
+  const handleFocus = react.useCallback(
+    (event) => {
+      externalOnFocus == null ? void 0 : externalOnFocus(event);
+    },
+    [externalOnFocus]
+  );
+  const filterOptions = react.useCallback(
+    (options2, { inputValue }) => {
+      if (!inputValue)
+        return options2;
+      const inputValueLower = inputValue.toLowerCase();
+      return options2.filter(
+        (option) => {
+          var _a, _b, _c, _d;
+          return ((_a = option == null ? void 0 : option.label) == null ? void 0 : _a.toLowerCase().includes(inputValueLower)) || String(option.value).toLowerCase().includes(inputValueLower) || ((_b = option == null ? void 0 : option.searchAbleValue1) == null ? void 0 : _b.toLowerCase().includes(inputValueLower)) || ((_c = option == null ? void 0 : option.searchAbleValue2) == null ? void 0 : _c.toLowerCase().includes(inputValueLower)) || ((_d = option == null ? void 0 : option.searchAbleValue3) == null ? void 0 : _d.toLowerCase().includes(inputValueLower));
+        }
+      );
+    },
+    []
+  );
+  const defaultRenderInput = react.useCallback(
+    (params) => /* @__PURE__ */ jsxRuntime.jsx(
+      material.TextField,
+      {
+        ...params,
+        variant,
+        error: hasError,
+        helperText: "",
+        placeholder: "",
+        inputRef: inputProps.ref,
+        inputProps: {
+          ...params.inputProps,
+          ...inputProps,
+          className: `${params.inputProps.className || ""} ${inputClassName}`.trim()
         },
-        ".MuiOutlinedInput-root": {
-          backgroundColor: (theme) => `${theme.palette.common.white} !important`
+        InputProps: {
+          ...params.InputProps,
+          ...textFieldProps.InputProps,
+          className: `${params.InputProps.className || ""} ${textFieldClassName}`.trim()
+        },
+        sx: [
+          {
+            "& .MuiOutlinedInput-root": {
+              borderRadius: "8px",
+              "& fieldset": {
+                borderColor: hasError ? "error.main" : "divider"
+              },
+              "&:hover fieldset": {
+                borderColor: hasError ? "error.main" : "text.primary"
+              },
+              "&.Mui-focused fieldset": {
+                borderColor: hasError ? "error.main" : "primary.main"
+              }
+            }
+          },
+          ...Array.isArray(textFieldSx) ? textFieldSx : textFieldSx ? [textFieldSx] : []
+        ],
+        ...textFieldProps
+      }
+    ),
+    [
+      variant,
+      hasError,
+      inputProps,
+      inputClassName,
+      textFieldProps,
+      textFieldClassName,
+      textFieldSx
+    ]
+  );
+  const defaultRenderOption = react.useCallback(
+    (props2, option, { selected }) => /* @__PURE__ */ react.createElement(
+      "li",
+      {
+        ...props2,
+        key: option.value,
+        className: `${props2.className || ""} ${optionClassName}`.trim(),
+        style: {
+          ...props2.style,
+          opacity: option.disabled ? 0.5 : 1,
+          pointerEvents: option.disabled ? "none" : "auto"
         }
       },
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        material.Autocomplete,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Checkbox,
         {
-          options,
-          getOptionLabel: (option) => option.label || String(option.value),
-          isOptionEqualToValue: (option, value) => option.value === value.value,
-          value: selectedOption,
-          onChange: handleChange,
-          filterOptions: (options2, { inputValue }) => {
-            return options2.filter(
-              (option) => {
-                var _a, _b, _c, _d;
-                return ((_a = option == null ? void 0 : option.label) == null ? void 0 : _a.toLowerCase().includes(inputValue.toLowerCase())) || String(option.value).toLowerCase().includes(inputValue.toLowerCase()) || ((_b = option == null ? void 0 : option.searchAbleValue1) == null ? void 0 : _b.toLowerCase().includes(inputValue.toLowerCase())) || ((_c = option == null ? void 0 : option.searchAbleValue2) == null ? void 0 : _c.toLowerCase().includes(inputValue.toLowerCase())) || ((_d = option == null ? void 0 : option.searchAbleValue3) == null ? void 0 : _d.toLowerCase().includes(inputValue.toLowerCase()));
-              }
-            );
+          checked: selected,
+          disabled: option.disabled,
+          sx: {
+            color: "text.secondary",
+            "&.Mui-checked": {
+              color: "primary.main"
+            },
+            "&.Mui-disabled": {
+              color: "text.disabled"
+            },
+            mr: 1,
+            ...checkboxProps.sx
           },
-          renderInput: (params) => /* @__PURE__ */ jsxRuntime.jsx(
-            material.TextField,
+          ...checkboxProps
+        }
+      ),
+      option.icon && /* @__PURE__ */ jsxRuntime.jsx(material.Box, { component: "span", sx: { mr: 1 }, children: option.icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        material.Typography,
+        {
+          variant: "body2",
+          sx: [
             {
-              ...params,
-              onChange: handleSearchChange,
-              label: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-                label,
-                required && /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { color: "red" }, component: "span", children: " *" })
-              ] }),
-              variant,
-              placeholder,
-              error: Boolean(fieldError) && isTouched,
-              helperText: isTouched && fieldError ? fieldError : "",
-              FormHelperTextProps: {
-                sx: { color: "#FF5630" }
-              },
-              sx: {
-                "& .MuiInputLabel-root": {
-                  color: "text.primary"
-                },
-                "& .MuiInputLabel-root.Mui-focused": {
+              color: option.disabled ? "text.disabled" : "text.primary",
+              ...option.textSx
+            },
+            ...Array.isArray(optionSx) ? optionSx : [optionSx]
+          ],
+          children: option.label
+        }
+      )
+    ),
+    [optionClassName, checkboxProps, optionSx]
+  );
+  const defaultRenderTags = react.useCallback(
+    (value, getTagProps) => /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", flexWrap: "wrap", gap: 0.5, mt: 0.5 }, children: value.map((option, index) => {
+      const { key, ...tagProps } = getTagProps({ index });
+      return /* @__PURE__ */ react.createElement(
+        material.Chip,
+        {
+          ...tagProps,
+          key: option.value,
+          label: option.label,
+          disabled: disabled || option.disabled,
+          sx: [
+            {
+              height: "24px",
+              borderRadius: "4px",
+              "& .MuiChip-deleteIcon": {
+                color: "text.secondary",
+                "&:hover": {
                   color: "text.primary"
+                }
+              }
+            },
+            ...Array.isArray(chipSx) ? chipSx : [chipSx]
+          ],
+          className: `${chipClassName} ${option.disabled ? "Mui-disabled" : ""}`.trim(),
+          ...chipProps
+        }
+      );
+    }) }),
+    [disabled, chipSx, chipClassName, chipProps]
+  );
+  const renderSelectedCount = react.useCallback(() => {
+    if (!showSelectedCount || !multiple)
+      return null;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      material.Typography,
+      {
+        variant: "caption",
+        sx: [
+          {
+            mt: 0.5,
+            color: "text.secondary"
+          },
+          ...Array.isArray(selectedCountSx) ? selectedCountSx : [selectedCountSx]
+        ],
+        children: [
+          `${selectedCount} selected`,
+          maxSelections ? ` (max ${maxSelections})` : ""
+        ]
+      }
+    );
+  }, [
+    showSelectedCount,
+    multiple,
+    selectedCount,
+    maxSelections,
+    selectedCountSx
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    material.Box,
+    {
+      ref,
+      className: `app-searchable-multi-selector ${className}`.trim(),
+      sx: [{ width: "100%" }, ...Array.isArray(sx) ? sx : sx ? [sx] : []],
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        material.FormControl,
+        {
+          fullWidth: true,
+          error: hasError,
+          disabled,
+          className: `app-searchable-multi-selector-form-control ${formControlClassName}`.trim(),
+          sx: [
+            {
+              "& .MuiAutocomplete-root": {
+                "& .MuiOutlinedInput-root": {
+                  padding: "4px"
                 },
-                "& .MuiOutlinedInput-input": {
-                  color: "common.black"
-                },
-                "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
-                  borderColor: "common.white"
-                },
-                "& .MuiSvgIcon-root": {
-                  color: "common.black"
+                "& .MuiAutocomplete-input": {
+                  padding: "8.5px 4px"
                 }
               }
-            }
-          ),
-          ...otherProps
+            },
+            ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
+          ],
+          children: [
+            label && /* @__PURE__ */ jsxRuntime.jsxs(
+              LabelComponent,
+              {
+                shrink: true,
+                htmlFor: `autocomplete-${name}`,
+                className: `app-searchable-multi-selector-label ${labelClassName}`.trim(),
+                sx: [
+                  {
+                    mb: 1,
+                    color: hasError ? "error.main" : "text.primary",
+                    "&.Mui-focused": {
+                      color: hasError ? "error.main" : "primary.main"
+                    }
+                  },
+                  ...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.Autocomplete,
+              {
+                multiple,
+                id: `autocomplete-${name}`,
+                options,
+                value: selectedValues,
+                filterOptions,
+                onInputChange: handleInputChange,
+                onChange: handleChange,
+                onOpen,
+                onClose,
+                onBlur: handleBlur,
+                onFocus: handleFocus,
+                disableCloseOnSelect: multiple,
+                readOnly,
+                disabled,
+                isOptionEqualToValue: (option, value) => option.value === value.value,
+                getOptionLabel: (option) => typeof option === "string" ? option : option.label,
+                getOptionDisabled: (option) => !!option.disabled,
+                renderInput: externalRenderInput || defaultRenderInput,
+                renderOption: externalRenderOption || defaultRenderOption,
+                renderTags: externalRenderTags || defaultRenderTags,
+                renderGroup: externalRenderGroup,
+                ListboxProps: {
+                  className: `app-searchable-multi-selector-listbox ${listboxClassName}`.trim(),
+                  sx: [
+                    {
+                      "& .MuiAutocomplete-option": {
+                        px: 2,
+                        py: 1,
+                        '&[aria-selected="true"]': {
+                          backgroundColor: "action.selected",
+                          "&.Mui-focused": {
+                            backgroundColor: "action.hover"
+                          }
+                        },
+                        "&.Mui-focused": {
+                          backgroundColor: "action.hover"
+                        }
+                      }
+                    },
+                    ...Array.isArray(optionSx) ? optionSx : optionSx ? [optionSx] : [],
+                    ...Array.isArray(listboxSx) ? listboxSx : listboxSx ? [listboxSx] : []
+                  ]
+                },
+                className: `app-searchable-multi-selector-autocomplete ${autocompleteClassName}`.trim(),
+                sx: [
+                  {
+                    "& .MuiAutocomplete-tag": {
+                      margin: 0,
+                      height: "auto"
+                    },
+                    "& .MuiAutocomplete-endAdornment": {
+                      right: 8
+                    }
+                  },
+                  ...Array.isArray(autocompleteSx) ? autocompleteSx : autocompleteSx ? [autocompleteSx] : []
+                ],
+                ...autocompleteProps,
+                ...otherProps
+              }
+            ),
+            (showHelperText || hasError) && /* @__PURE__ */ jsxRuntime.jsx(
+              HelperTextComponent,
+              {
+                error: hasError,
+                sx: [
+                  {
+                    mx: 0,
+                    mt: 0.5,
+                    ...hasError ? { color: "error.main", ...errorSx } : { color: "text.secondary", ...helperTextSx }
+                  }
+                ],
+                className: `app-searchable-multi-selector-helper-text ${helperTextClassName} ${hasError ? "Mui-error" : ""}`.trim(),
+                ...helperTextProps,
+                children: hasError ? fieldError : helperText
+              }
+            ),
+            renderSelectedCount()
+          ]
         }
       )
     }
   );
-}
+});
+AppSearchableMultiSelector2.displayName = "AppSearchableMultiSelector";
+var AppSearchableSelect_default = AppSearchableMultiSelector2;
 var AppSelectInput = react.forwardRef(
   ({
     name,
@@ -12076,16 +12419,9 @@ var AppSelectInput = react.forwardRef(
         className: "app-select-input",
         sx: [
           {
-            "& .MuiInputLabel-root": {
-              "&.Mui-focused": {
-                color: hasError ? "error.main" : "primary.main"
-              },
-              "&.Mui-disabled": {
-                color: "text.disabled"
-              }
-            }
+            width: fullWidth ? "100%" : "auto"
           },
-          ...Array.isArray(formControlSx) ? formControlSx : [formControlSx].filter(Boolean)
+          ...Array.isArray(sx) ? sx : [sx].filter(Boolean)
         ],
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           material.FormControl,
@@ -12097,13 +12433,24 @@ var AppSelectInput = react.forwardRef(
             className: "app-select-form-control",
             sx: [
               {
+                position: "relative",
+                "& .MuiOutlinedInput-notchedOutline": {
+                  borderWidth: "1px"
+                },
                 "& .MuiInputLabel-root": {
+                  position: "relative",
+                  transform: "none",
+                  fontSize: "0.875rem",
+                  mb: 1,
                   "&.Mui-focused": {
                     color: hasError ? "error.main" : "primary.main"
                   },
                   "&.Mui-disabled": {
                     color: "text.disabled"
                   }
+                },
+                "& .MuiInputLabel-shrink": {
+                  transform: "none"
                 }
               },
               ...Array.isArray(formControlSx) ? formControlSx : formControlSx ? [formControlSx] : []
@@ -12115,15 +12462,23 @@ var AppSelectInput = react.forwardRef(
                   id: `select-${name}-label`,
                   htmlFor: `select-${name}`,
                   className: "app-select-label",
+                  shrink: false,
                   sx: [
                     {
+                      position: "relative",
+                      transform: "none",
+                      fontSize: "0.875rem",
+                      fontWeight: 500,
                       color: hasError ? "error.main" : "text.secondary",
+                      mb: 1,
                       "&.Mui-focused": {
                         color: hasError ? "error.main" : "primary.main"
                       },
-                      mb: 1,
-                      ...Array.isArray(labelSx) ? labelSx : [labelSx]
-                    }
+                      "&.Mui-disabled": {
+                        color: "text.disabled"
+                      }
+                    },
+                    ...Array.isArray(labelSx) ? labelSx : [labelSx].filter(Boolean)
                   ],
                   children: [
                     label,
@@ -12154,6 +12509,8 @@ var AppSelectInput = react.forwardRef(
                   onOpen,
                   onClose,
                   renderValue,
+                  label: void 0,
+                  displayEmpty: true,
                   inputProps: {
                     readOnly,
                     ...inputProps
@@ -12164,6 +12521,7 @@ var AppSelectInput = react.forwardRef(
                         {
                           mt: 1,
                           boxShadow: theme.shadows[3],
+                          maxHeight: 300,
                           "& .MuiMenuItem-root": {
                             px: 2,
                             py: 1,
@@ -12182,7 +12540,24 @@ var AppSelectInput = react.forwardRef(
                   },
                   sx: [
                     {
-                      // Your base styles here
+                      "& .MuiSelect-select": {
+                        minHeight: "1.4375em",
+                        padding: "16.5px 14px",
+                        "&.MuiInputBase-input": {
+                          padding: "16.5px 14px"
+                        }
+                      },
+                      "&.MuiOutlinedInput-root": {
+                        "& fieldset": {
+                          borderWidth: "1px"
+                        },
+                        "&:hover fieldset": {
+                          borderWidth: "1px"
+                        },
+                        "&.Mui-focused fieldset": {
+                          borderWidth: "2px"
+                        }
+                      },
                       "&.Mui-disabled": {
                         backgroundColor: "action.disabledBackground",
                         "& .MuiOutlinedInput-notchedOutline": {
@@ -12212,6 +12587,7 @@ var AppSelectInput = react.forwardRef(
                     {
                       mx: 0,
                       mt: 0.5,
+                      fontSize: "0.75rem",
                       ...hasError ? {
                         color: "error.main",
                         ...errorSx
@@ -14006,7 +14382,7 @@ exports.AppRadioGroup = AppRadioGroup_default;
 exports.AppRating = AppRating_default;
 exports.AppRichTextEditor = AppRichTextEditor_default;
 exports.AppSearchableMultiSelector = AppSearchableMultiSelector_default;
-exports.AppSearchableSelectInput = AppSearchableSelectInput;
+exports.AppSearchableSelectInput = AppSearchableSelect_default;
 exports.AppSelectInput = AppSelectInput_default;
 exports.AppSimpleUploadFile = AppSimpleUploadFile_default;
 exports.AppSwitch = AppSwitch;