formik-form-components 0.2.24 → 0.2.26

package/dist/index.d.ts

@@ -23,7 +23,7 @@ interface AppSelectOptions$4 {
     label: string;
     value: string | number;
 }
-interface Props$8 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
+interface Props$7 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
     name: string;
     label?: string;
     placeholder?: string;
@@ -35,7 +35,7 @@ interface Props$8 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChan
     listboxSx?: SxProps<Theme>;
     errorSx?: SxProps<Theme>;
 }
-declare function AppAutoCompleter({ placeholder, name, label, options, disabled, sx, formControlSx, textFieldSx, listboxSx, errorSx }: Props$8): React.JSX.Element;
+declare function AppAutoCompleter({ placeholder, name, label, options, disabled, sx, formControlSx, textFieldSx, listboxSx, errorSx }: Props$7): React.JSX.Element;
 
 interface AppDateAndTimePickerProps {
     /** Field name for formik */
@@ -83,14 +83,14 @@ interface AppDateAndTimePickerProps {
 }
 declare const AppDateAndTimePicker: React__default.ForwardRefExoticComponent<Omit<AppDateAndTimePickerProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
-interface Props$7 {
+interface Props$6 {
     name: string;
     alwaysShow?: boolean;
     sx?: SxProps<Theme>;
     containerSx?: SxProps<Theme>;
     textSx?: SxProps<Theme>;
 }
-declare function AppFormErrorMessage({ name, alwaysShow, sx, containerSx, textSx }: Props$7): React.JSX.Element | null;
+declare function AppFormErrorMessage({ name, alwaysShow, sx, containerSx, textSx }: Props$6): React.JSX.Element | null;
 
 interface AppTextAreaProps {
     /** Field name for formik */
@@ -136,7 +136,7 @@ interface AppTextAreaProps {
 }
 declare const AppTextArea: React$1.ForwardRefExoticComponent<Omit<AppTextAreaProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 
-interface Props$6 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
+interface Props$5 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
     name: string;
     freeSolo?: boolean;
     multiple?: boolean;
@@ -153,7 +153,7 @@ interface Props$6 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChan
     chipContainerSx?: SxProps<Theme>;
     inputSx?: SxProps<Theme>;
 }
-declare function AppTagsCreator({ placeholder, name, multiple, label, options, disabled, sx, formControlSx, textFieldSx, chipSx, listboxSx, errorSx, chipContainerSx, inputSx, }: Props$6): React.JSX.Element;
+declare function AppTagsCreator({ placeholder, name, multiple, label, options, disabled, sx, formControlSx, textFieldSx, chipSx, listboxSx, errorSx, chipContainerSx, inputSx, }: Props$5): React.JSX.Element;
 
 interface AppSwitchInputProps {
     name: string;
@@ -189,7 +189,7 @@ interface FormProps<T> extends FormikConfig<T> {
 }
 declare const Form: <T extends FormikValues>({ children, className, ...props }: FormProps<T>) => ReactElement;
 
-interface Props$5 extends Omit<AutocompleteProps<string, true, boolean, false, 'div'>, 'renderInput' | 'onChange' | 'value' | 'multiple' | 'freeSolo'> {
+interface Props$4 extends Omit<AutocompleteProps<string, true, boolean, false, 'div'>, 'renderInput' | 'onChange' | 'value' | 'multiple' | 'freeSolo'> {
     name: string;
     freeSolo?: boolean;
     label?: string;
@@ -205,7 +205,7 @@ interface Props$5 extends Omit<AutocompleteProps<string, true, boolean, false, '
     chipSx?: SxProps<Theme$1>;
     errorSx?: SxProps<Theme$1>;
 }
-declare function AppAutoComplete({ placeholder, name, variant, label, options, value: propValue, onChange: propOnChange, 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$4): React.JSX.Element;
 
 interface CheckboxOption {
     label: string;
@@ -213,7 +213,7 @@ interface CheckboxOption {
     value: string | boolean | number;
     disabled?: boolean;
 }
-interface Props$4 {
+interface Props$3 {
     /** Array of checkbox options with label and value */
     option: CheckboxOption[];
     /** Field name for formik */
@@ -241,9 +241,9 @@ interface Props$4 {
     /** Custom styles for the checked state */
     checkedSx?: SxProps<Theme>;
 }
-declare const AppCheckBox: ({ name, option, label, required, disabled, row, sx, checkboxSx, labelSx, errorSx, containerSx, iconSx, checkedSx, ...rest }: Props$4) => react_jsx_runtime.JSX.Element;
+declare const AppCheckBox: ({ name, option, label, required, disabled, row, sx, checkboxSx, labelSx, errorSx, containerSx, iconSx, checkedSx, ...rest }: Props$3) => react_jsx_runtime.JSX.Element;
 
-interface Props$3 extends Omit<TextFieldProps, 'variant'> {
+interface Props$2 extends Omit<TextFieldProps, 'variant'> {
     name: string;
     label: ReactNode;
     tagUser?: string;
@@ -251,7 +251,7 @@ interface Props$3 extends Omit<TextFieldProps, 'variant'> {
     required?: boolean;
     variant?: 'outlined' | 'filled' | 'standard';
 }
-declare function AppInputField({ name, label, type, InputProps, required, variant, ...otherProps }: Props$3): React__default.JSX.Element;
+declare function AppInputField({ name, label, type, InputProps, required, variant, ...otherProps }: Props$2): React__default.JSX.Element;
 
 interface AppSelectOptions$3 {
     /** The label to display for this option */
@@ -323,7 +323,7 @@ declare const AppMultiSelector: React$1.ForwardRefExoticComponent<Omit<AppMultiS
 
 interface AppPhoneNoInputProps {
     name: string;
-    label?: string;
+    label: string;
     required?: boolean;
     defaultCountry?: string;
     placeholder?: string;
@@ -332,6 +332,8 @@ interface AppPhoneNoInputProps {
     labelSx?: SxProps<Theme>;
     inputSx?: React__default.CSSProperties;
     errorSx?: SxProps<Theme>;
+    international?: boolean;
+    withCountryCallingCode?: boolean;
 }
 declare const AppPhoneNoInput: React__default.FC<AppPhoneNoInputProps>;
 
@@ -457,7 +459,7 @@ interface AppRatingProps {
 }
 declare const AppRating: React$1.ForwardRefExoticComponent<AppRatingProps & React$1.RefAttributes<HTMLDivElement>>;
 
-interface Props$2 {
+interface Props$1 {
     name: string;
     label?: string;
     placeholder?: string;
@@ -474,7 +476,7 @@ interface Props$2 {
     activeButtonSx?: SxProps<Theme>;
     dialogSx?: SxProps<Theme>;
 }
-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;
+declare const AppRichTextEditor: ({ name, label, required, variant, placeholder, sx, editorSx, toolbarSx, contentSx, errorSx, labelSx, buttonSx, activeButtonSx, dialogSx, }: Props$1) => react_jsx_runtime.JSX.Element | null;
 
 interface AppSelectOptions$2 {
     /** Display text for the option */
@@ -500,8 +502,8 @@ 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">;
-interface AppSearchableMultiSelectorProps extends CustomAutocompleteProps {
+type CustomAutocompleteProps$1 = Omit<AutocompleteProps<AppSelectOptions$2, boolean, boolean, boolean>, "renderInput" | "options" | "renderTags" | "onChange" | "value" | "multiple">;
+interface AppSearchableMultiSelectorProps$1 extends CustomAutocompleteProps$1 {
     /** Field name for formik */
     name: string;
     /** Label for the input */
@@ -510,8 +512,8 @@ interface AppSearchableMultiSelectorProps extends CustomAutocompleteProps {
     multiple?: boolean;
     /** Available options */
     options: AppSelectOptions$2[];
-    /** Callback when search query changes */
-    setSearchQuery: React__default.Dispatch<SetStateAction<string>>;
+    /** Callback when search query changes - useful for remote searching */
+    setSearchQuery?: React__default.Dispatch<SetStateAction<string>>;
     /** Whether the field is required */
     required?: boolean;
     /** Whether the field is disabled */
@@ -527,7 +529,7 @@ interface AppSearchableMultiSelectorProps extends CustomAutocompleteProps {
     /** Whether to show the selected count */
     showSelectedCount?: boolean;
     /** Variant of the input field */
-    variant?: 'outlined' | 'filled' | 'standard';
+    variant?: "outlined" | "filled" | "standard";
     /** Custom styles for the root container */
     sx?: SxProps<Theme>;
     /** Custom styles for the form control */
@@ -631,111 +633,135 @@ interface AppSearchableMultiSelectorProps extends CustomAutocompleteProps {
     /** Callback when a selection is added */
     onAdd?: (value: AppSelectOptions$2) => void;
 }
-declare const AppSearchableMultiSelector: React__default.ForwardRefExoticComponent<Omit<AppSearchableMultiSelectorProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
+declare const AppSearchableMultiSelector$1: React__default.ForwardRefExoticComponent<Omit<AppSearchableMultiSelectorProps$1, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 interface AppSelectOptions$1 {
     label: string;
-    value: string | number;
+    value: number | string;
     searchAbleValue1?: string;
     searchAbleValue2?: string;
     searchAbleValue3?: string;
+    disabled?: boolean;
+    sx?: SxProps<Theme>;
+    textSx?: SxProps<Theme>;
+    icon?: ReactNode;
+    component?: ElementType;
+    componentProps?: Record<string, any>;
 }
-interface Props$1 extends Omit<AutocompleteProps<AppSelectOptions$1, false, false, false>, 'options' | 'renderInput' | 'value' | 'onChange'> {
+type CustomAutocompleteProps = Omit<AutocompleteProps<AppSelectOptions$1, boolean, boolean, boolean>, "renderInput" | "options" | "renderTags" | "onChange" | "value" | "multiple">;
+interface AppSearchableMultiSelectorProps extends CustomAutocompleteProps {
     name: string;
-    label: string;
+    label?: string;
+    multiple?: boolean;
     options: AppSelectOptions$1[];
-    setSearchQuery?: React__default.Dispatch<SetStateAction<string>> | undefined;
+    setSearchQuery?: React__default.Dispatch<SetStateAction<string>>;
     required?: boolean;
-    placeholder?: string;
-    isResetRequired?: boolean;
-    variant?: 'outlined' | 'filled' | 'standard';
+    disabled?: boolean;
+    readOnly?: boolean;
+    showHelperText?: boolean;
+    helperText?: string;
+    maxSelections?: number;
+    showSelectedCount?: boolean;
+    variant?: "outlined" | "filled" | "standard";
+    sx?: SxProps<Theme>;
+    formControlSx?: SxProps<Theme>;
+    labelSx?: SxProps<Theme>;
+    inputSx?: SxProps<Theme>;
+    textFieldSx?: SxProps<Theme>;
+    autocompleteSx?: SxProps<Theme>;
+    listboxSx?: SxProps<Theme>;
+    optionSx?: SxProps<Theme>;
+    chipSx?: SxProps<Theme>;
+    errorSx?: SxProps<Theme>;
+    helperTextSx?: SxProps<Theme>;
+    selectedCountSx?: SxProps<Theme>;
+    renderInput?: (params: AutocompleteRenderInputParams) => ReactNode;
+    renderOption?: (props: React__default.HTMLAttributes<HTMLLIElement>, option: AppSelectOptions$1, state: AutocompleteRenderOptionState, ownerState: any) => ReactNode;
+    renderTags?: (value: AppSelectOptions$1[], getTagProps: (params: {
+        index: number;
+    }) => {
+        key: number | string;
+    }, ownerState: any) => ReactNode;
+    renderGroup?: (params: AutocompleteRenderGroupParams) => ReactNode;
+    labelComponent?: ElementType;
+    inputComponent?: ElementType;
+    errorComponent?: ElementType;
+    helperTextComponent?: ElementType;
+    labelProps?: Record<string, any>;
+    inputProps?: Record<string, any>;
+    textFieldProps?: Record<string, any>;
+    autocompleteProps?: Record<string, any>;
+    checkboxProps?: CheckboxProps;
+    chipProps?: ChipProps;
+    errorProps?: Record<string, any>;
+    helperTextProps?: Record<string, any>;
+    className?: string;
+    formControlClassName?: string;
+    labelClassName?: string;
+    inputClassName?: string;
+    textFieldClassName?: string;
+    autocompleteClassName?: string;
+    listboxClassName?: string;
+    optionClassName?: string;
+    chipClassName?: string;
+    errorClassName?: string;
+    helperTextClassName?: string;
+    onChange?: (event: React__default.SyntheticEvent, value: AppSelectOptions$1[], reason: string) => void;
+    onInputChange?: (event: React__default.SyntheticEvent, value: string, reason: string) => void;
+    onOpen?: (event: React__default.SyntheticEvent) => void;
+    onClose?: (event: React__default.SyntheticEvent, reason: string) => void;
+    onBlur?: (event: React__default.FocusEvent) => void;
+    onFocus?: (event: React__default.FocusEvent) => void;
+    onClear?: () => void;
+    onMaxSelectionsReached?: (maxSelections: number) => void;
+    onRemove?: (value: AppSelectOptions$1) => void;
+    onAdd?: (value: AppSelectOptions$1) => void;
 }
-declare function AppSearchableSelectInput({ name, label, options, required, variant, placeholder, setSearchQuery, isResetRequired, ...otherProps }: Props$1): React__default.JSX.Element;
+declare const AppSearchableMultiSelector: React__default.ForwardRefExoticComponent<Omit<AppSearchableMultiSelectorProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
 
 interface AppSelectOptions {
-    /** The label to display for this option */
     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 */
     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 */
     name: string;
-    /** Label for the select */
     label?: string;
-    /** Array of select options */
     options: AppSelectOptions[];
-    /** Whether the field is required */
     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 */
+    variant?: "outlined" | "filled" | "standard";
     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 */
     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>>;
@@ -824,4 +850,4 @@ interface Props extends BoxProps {
 }
 declare const Iconify: React$1.ForwardRefExoticComponent<Omit<Props, "ref"> & React$1.RefAttributes<SVGElement>>;
 
-export { AppAutoComplete, AppAutoCompleter, AppCheckBox, AppDateAndTimePicker, AppDatePicker, AppFormErrorMessage, AppInputField, AppMultiSelector, AppPhoneNoInput, AppRadioGroup, AppRating, AppRichTextEditor, AppSearchableMultiSelector, AppSearchableSelectInput, AppSelectInput, AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea, AppUploadFile, Form, Iconify, IconifyProps, SubmitButton, UploadProps };
+export { AppAutoComplete, AppAutoCompleter, AppCheckBox, AppDateAndTimePicker, AppDatePicker, AppFormErrorMessage, AppInputField, AppMultiSelector, AppPhoneNoInput, AppRadioGroup, AppRating, AppRichTextEditor, AppSearchableMultiSelector$1 as AppSearchableMultiSelector, AppSearchableMultiSelector as AppSearchableSelectInput, AppSelectInput, AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea, AppUploadFile, Form, Iconify, IconifyProps, SubmitButton, UploadProps };