formik-form-components 0.2.27 → 0.2.28

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 import * as React$1 from 'react';
 import React__default, { ReactElement, ReactNode, SyntheticEvent, ElementType, SetStateAction } from 'react';
 import { FormikValues, FormikConfig, FormikProps } from 'formik';
-import { SxProps, Theme, AutocompleteProps, AutocompleteChangeReason, AutocompleteChangeDetails, TextFieldProps, SelectChangeEvent, RadioGroupProps, AutocompleteRenderInputParams, AutocompleteRenderOptionState, AutocompleteRenderGroupParams, CheckboxProps, ChipProps, BoxProps } from '@mui/material';
+import { SxProps, Theme, AutocompleteProps, AutocompleteChangeReason, AutocompleteChangeDetails, TextFieldProps, 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 { SelectProps } from '@mui/material/Select';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { Dayjs } from 'dayjs';
 import { DropzoneOptions } from 'react-dropzone';
@@ -19,7 +19,7 @@ type AppDatePickerProps = {
 };
 declare const AppDatePicker: React__default.ForwardRefExoticComponent<AppDatePickerProps & React__default.RefAttributes<HTMLDivElement>>;
 
-interface AppSelectOptions$4 {
+interface AppSelectOptions$2 {
     label: string;
     value: string | number;
 }
@@ -27,7 +27,7 @@ interface Props$8 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChan
     name: string;
     label?: string;
     placeholder?: string;
-    options: AppSelectOptions$4[];
+    options: AppSelectOptions$2[];
     disabled?: boolean;
     sx?: SxProps<Theme>;
     formControlSx?: SxProps<Theme>;
@@ -253,73 +253,50 @@ interface Props$3 extends Omit<TextFieldProps, 'variant'> {
 }
 declare function AppInputField({ name, label, type, InputProps, required, variant, ...otherProps }: Props$3): React__default.JSX.Element;
 
-interface AppSelectOptions$3 {
-    /** The label to display for this option */
+interface AppSelectOption$1 {
     label: string;
-    /** The value to be used when this option is selected */
     value: string | number;
-    /** Whether this option is disabled */
     disabled?: boolean;
-    /** Custom styles for this specific menu item */
+    searchAbleValue1?: string;
+    searchAbleValue2?: string;
+    searchAbleValue3?: string;
     sx?: SxProps<Theme>;
-    /** Custom styles for this specific menu item text */
     textSx?: SxProps<Theme>;
+    icon?: ReactNode;
 }
-interface AppMultiSelectorProps extends Omit<SelectProps<(string | number)[]>, "name" | "label" | "value" | "onChange"> {
-    /** Field name for formik */
+interface BaseMultiSelectProps {
     name: string;
-    /** Label for the multi-selector */
     label?: string;
-    /** Whether multiple selection is allowed */
-    multiple?: boolean;
-    /** Array of select options */
-    options: AppSelectOptions$3[];
-    /** Whether the field is required */
+    options: AppSelectOption$1[];
     required?: boolean;
-    /** Whether the field is disabled */
     disabled?: boolean;
-    /** Maximum number of items that can be selected */
     maxSelections?: number;
-    /** Whether to show the selected count in the label */
     showSelectedCount?: boolean;
-    /** Whether to show the helper text when no error */
-    showHelperText?: boolean;
-    /** Variant of the input field */
-    variant?: 'outlined' | 'filled' | 'standard';
-    /** Custom helper text to display */
     helperText?: string;
-    /** Custom styles for the root container */
+    variant?: "outlined" | "filled" | "standard";
+    placeholder?: string;
     sx?: SxProps<Theme>;
-    /** Custom styles for the form control */
     formControlSx?: SxProps<Theme>;
-    /** Custom styles for the select component */
-    selectSx?: SxProps<Theme>;
-    /** Custom styles for the label */
     labelSx?: SxProps<Theme>;
-    /** Custom styles for the chip components */
     chipSx?: SxProps<Theme>;
-    /** Custom styles for the checkbox components */
     checkboxSx?: SxProps<Theme>;
-    /** Custom styles for the menu items */
-    menuItemSx?: SxProps<Theme>;
-    /** Custom styles for the error message */
-    errorSx?: SxProps<Theme>;
-    /** Custom styles for the helper text */
-    helperTextSx?: SxProps<Theme>;
-    /** Custom styles for the select icon */
-    iconSx?: SxProps<Theme>;
-    /** Callback when the value changes */
-    onChange?: (event: SelectChangeEvent<(string | number)[]>, child: ReactNode) => void;
-    /** Callback when the menu opens */
-    onOpen?: (event: React.SyntheticEvent) => void;
-    /** Callback when the menu closes */
-    onClose?: (event: React.SyntheticEvent) => void;
-    /** Custom render function for the selected value */
-    renderValue?: (selected: Array<string | number>) => ReactNode;
-    /** Custom render function for menu items */
-    renderMenuItem?: (option: AppSelectOptions$3, isSelected: boolean) => ReactNode;
+    onChange?: (value: Array<string | number>) => void;
+    onMaxSelectionsReached?: (maxSelections: number) => void;
+}
+interface AutocompleteMultiSelectProps extends BaseMultiSelectProps {
+    mode?: "autocomplete";
+    onSearchChange?: (query: string) => void;
+    searchDebounce?: number;
+    clearable?: boolean;
+}
+interface DropdownMultiSelectProps extends BaseMultiSelectProps {
+    mode: "dropdown";
+    onSearchChange?: never;
+    searchDebounce?: never;
+    clearable?: never;
 }
-declare const AppMultiSelector: React$1.ForwardRefExoticComponent<Omit<AppMultiSelectorProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+type AppMultiSelectorProps = AutocompleteMultiSelectProps | DropdownMultiSelectProps;
+declare const AppMultiSelector: React__default.ForwardRefExoticComponent<AppMultiSelectorProps & React__default.RefAttributes<HTMLDivElement>>;
 
 interface AppPhoneNoInputProps {
     name: string;
@@ -478,7 +455,7 @@ interface Props$2 {
 }
 declare const AppRichTextEditor: ({ name, label, required, variant, placeholder, sx, editorSx, toolbarSx, contentSx, errorSx, labelSx, buttonSx, activeButtonSx, dialogSx, }: Props$2) => react_jsx_runtime.JSX.Element | null;
 
-interface AppSelectOptions$2 {
+interface AppSelectOptions$1 {
     /** Display text for the option */
     label: string;
     /** Unique value for the option */
@@ -502,7 +479,7 @@ interface AppSelectOptions$2 {
     /** Custom props for the option component */
     componentProps?: Record<string, any>;
 }
-type CustomAutocompleteProps = Omit<AutocompleteProps<AppSelectOptions$2, boolean, boolean, boolean>, "renderInput" | "options" | "renderTags" | "onChange" | "value" | "multiple">;
+type CustomAutocompleteProps = Omit<AutocompleteProps<AppSelectOptions$1, boolean, boolean, boolean>, "renderInput" | "options" | "renderTags" | "onChange" | "value" | "multiple">;
 interface AppSearchableMultiSelectorProps extends CustomAutocompleteProps {
     /** Field name for formik */
     name: string;
@@ -511,7 +488,7 @@ interface AppSearchableMultiSelectorProps extends CustomAutocompleteProps {
     /** Whether multiple selections are allowed */
     multiple?: boolean;
     /** Available options */
-    options: AppSelectOptions$2[];
+    options: AppSelectOptions$1[];
     /** Callback when search query changes */
     setSearchQuery: React__default.Dispatch<SetStateAction<string>>;
     /** Whether the field is required */
@@ -557,9 +534,9 @@ interface AppSearchableMultiSelectorProps extends CustomAutocompleteProps {
     /** Custom render function for the input */
     renderInput?: (params: AutocompleteRenderInputParams) => ReactNode;
     /** Custom render function for the option */
-    renderOption?: (props: React__default.HTMLAttributes<HTMLLIElement>, option: AppSelectOptions$2, state: AutocompleteRenderOptionState, ownerState: any) => ReactNode;
+    renderOption?: (props: React__default.HTMLAttributes<HTMLLIElement>, option: AppSelectOptions$1, state: AutocompleteRenderOptionState, ownerState: any) => ReactNode;
     /** Custom render function for the selected value */
-    renderTags?: (value: AppSelectOptions$2[], getTagProps: (params: {
+    renderTags?: (value: AppSelectOptions$1[], getTagProps: (params: {
         index: number;
     }) => {
         key: number | string;
@@ -613,7 +590,7 @@ interface AppSearchableMultiSelectorProps extends CustomAutocompleteProps {
     /** Custom class name for the helper text */
     helperTextClassName?: string;
     /** Callback when the selection changes */
-    onChange?: (event: React__default.SyntheticEvent, value: AppSelectOptions$2[], reason: string) => void;
+    onChange?: (event: React__default.SyntheticEvent, value: AppSelectOptions$1[], reason: string) => void;
     /** Callback when the input value changes */
     onInputChange?: (event: React__default.SyntheticEvent, value: string, reason: string) => void;
     /** Callback when the dropdown is opened */
@@ -629,23 +606,23 @@ interface AppSearchableMultiSelectorProps extends CustomAutocompleteProps {
     /** Callback when the maximum number of selections is reached */
     onMaxSelectionsReached?: (maxSelections: number) => void;
     /** Callback when a selection is removed */
-    onRemove?: (value: AppSelectOptions$2) => void;
+    onRemove?: (value: AppSelectOptions$1) => void;
     /** Callback when a selection is added */
-    onAdd?: (value: AppSelectOptions$2) => void;
+    onAdd?: (value: AppSelectOptions$1) => void;
 }
 declare const AppSearchableMultiSelector: React__default.ForwardRefExoticComponent<Omit<AppSearchableMultiSelectorProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-interface AppSelectOptions$1 {
+interface AppSelectOptions {
     label: string;
     value: string | number;
     searchAbleValue1?: string;
     searchAbleValue2?: string;
     searchAbleValue3?: string;
 }
-interface Props$1 extends Omit<AutocompleteProps<AppSelectOptions$1, false, false, false>, "options" | "renderInput" | "value" | "onChange"> {
+interface Props$1 extends Omit<AutocompleteProps<AppSelectOptions, false, false, false>, "options" | "renderInput" | "value" | "onChange"> {
     name: string;
     label: string;
-    options: AppSelectOptions$1[];
+    options: AppSelectOptions[];
     setSearchQuery?: React__default.Dispatch<SetStateAction<string>> | undefined;
     required?: boolean;
     placeholder?: string;
@@ -654,93 +631,47 @@ interface Props$1 extends Omit<AutocompleteProps<AppSelectOptions$1, false, fals
 }
 declare function AppSearchableSelectInput({ name, label, options, required, variant, placeholder, setSearchQuery, isResetRequired, ...otherProps }: Props$1): React__default.JSX.Element;
 
-interface AppSelectOptions {
-    /** The label to display for this option */
+interface AppSelectOption {
     label: string;
-    /** The value to be used when this option is selected */
     value: string | number;
-    /** Whether this option is disabled */
     disabled?: boolean;
-    /** Custom styles for this specific menu item */
+    searchAbleValue1?: string;
+    searchAbleValue2?: string;
+    searchAbleValue3?: string;
     sx?: SxProps<Theme>;
-    /** Custom styles for this specific menu item text */
     textSx?: SxProps<Theme>;
-    /** Custom icon for the option */
     icon?: ReactNode;
-    /** Custom component to render the option */
-    component?: ElementType;
-    /** Custom props for the option component */
-    componentProps?: Record<string, any>;
 }
-interface AppSelectInputProps extends Omit<SelectProps, "name" | "label" | "value" | "onChange" | "sx"> {
-    /** Field name for formik */
+interface BaseSelectProps {
     name: string;
-    /** Label for the select */
     label?: string;
-    /** Array of select options */
-    options: AppSelectOptions[];
-    /** Whether the field is required */
+    options: AppSelectOption[];
     required?: boolean;
-    /** Whether the field is disabled */
     disabled?: boolean;
-    /** Whether the field is read-only */
-    readOnly?: boolean;
-    /** Variant of the select input */
-    variant?: "outlined" | "filled" | "standard";
-    /** Whether to show a 'None' option */
     showNoneOption?: boolean;
-    /** Text to display for the 'None' option */
     noneOptionText?: string;
-    /** Whether to show the helper text when no error */
-    showHelperText?: boolean;
-    /** Custom helper text to display */
     helperText?: string;
-    /** Custom styles for the root container */
+    variant?: "outlined" | "filled" | "standard";
+    placeholder?: string;
     sx?: SxProps<Theme>;
-    /** Custom styles for the form control */
     formControlSx?: SxProps<Theme>;
-    /** Custom styles for the select component */
-    selectSx?: SxProps<Theme>;
-    /** Custom styles for the input */
-    inputSx?: SxProps<Theme>;
-    /** Custom styles for the label */
     labelSx?: SxProps<Theme>;
-    /** Custom styles for the menu paper */
-    menuPaperSx?: SxProps<Theme>;
-    /** Custom styles for all menu items */
-    menuItemSx?: SxProps<Theme>;
-    /** Custom styles for the selected menu item */
-    selectedMenuItemSx?: SxProps<Theme>;
-    /** Custom styles for the error message */
-    errorSx?: SxProps<Theme>;
-    /** Custom styles for the helper text */
-    helperTextSx?: SxProps<Theme>;
-    /** Custom styles for the select icon */
-    iconSx?: SxProps<Theme>;
-    /** Custom component for the label */
-    labelComponent?: ElementType;
-    /** Custom component for the error message */
-    errorComponent?: ElementType;
-    /** Custom component for the helper text */
-    helperTextComponent?: ElementType;
-    /** Callback when the value changes */
-    onChange?: (event: SelectChangeEvent$1<unknown>, child: ReactNode) => void;
-    /** Callback when the menu opens */
-    onOpen?: (event: React.SyntheticEvent) => void;
-    /** Callback when the menu closes */
-    onClose?: (event: React.SyntheticEvent) => void;
-    /** Callback when the field is blurred */
-    onBlur?: (event: React.FocusEvent) => void;
-    /** Custom render function for the selected value */
-    renderValue?: (value: unknown) => ReactNode;
-    /** Custom render function for menu items */
-    renderMenuItem?: (option: AppSelectOptions, index: number) => ReactNode;
-    /** Custom props for the MenuProps */
-    MenuProps?: any;
-    /** Custom props for the input component */
-    inputProps?: any;
-}
-declare const AppSelectInput: React$1.ForwardRefExoticComponent<Omit<AppSelectInputProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+    onChange?: (value: string | number) => void;
+}
+interface AutocompleteSelectProps extends BaseSelectProps {
+    mode?: "autocomplete";
+    onSearchChange?: (query: string) => void;
+    searchDebounce?: number;
+    clearable?: boolean;
+}
+interface DropdownSelectProps extends BaseSelectProps {
+    mode: "dropdown";
+    onSearchChange?: never;
+    searchDebounce?: never;
+    clearable?: never;
+}
+type AppSelectInputProps = AutocompleteSelectProps | DropdownSelectProps;
+declare const AppSelectInput: React__default.ForwardRefExoticComponent<AppSelectInputProps & React__default.RefAttributes<HTMLDivElement>>;
 
 interface AppSimpleUploadFileProps {
     name: string;