formik-form-components 0.2.28 → 0.2.30

package/README.md

@@ -164,9 +164,7 @@ export default function ExampleForm() {
 ### Selection Components
 
 - `AppSelect`
-- `AppSearchableSelect`
 - `AppMultiSelector`
-- `AppSearchableMultiSelector`
 - `AppAutocomplete`
 - `AppTagsCreator`
 

package/dist/index.d.ts

@@ -1,43 +1,27 @@
 import * as React$1 from 'react';
-import React__default, { ReactElement, ReactNode, SyntheticEvent, ElementType, SetStateAction } from 'react';
+import React__default, { ReactElement, ReactNode, SyntheticEvent, ElementType } from 'react';
 import { FormikValues, FormikConfig, FormikProps } from 'formik';
-import { SxProps, Theme, AutocompleteProps, AutocompleteChangeReason, AutocompleteChangeDetails, TextFieldProps, RadioGroupProps, AutocompleteRenderInputParams, AutocompleteRenderOptionState, AutocompleteRenderGroupParams, CheckboxProps, ChipProps, BoxProps } from '@mui/material';
+import { SxProps, Theme, SwitchProps, AutocompleteProps, AutocompleteChangeReason, AutocompleteChangeDetails, Checkbox, TextFieldProps, RadioGroupProps, BoxProps } from '@mui/material';
 import { Theme as Theme$1 } from '@mui/material/styles';
-import { SelectProps } from '@mui/material/Select';
 import * as react_jsx_runtime from 'react/jsx-runtime';
+import { DateTimePickerProps } from '@mui/x-date-pickers/DateTimePicker';
 import { Dayjs } from 'dayjs';
+import { DatePickerProps } from '@mui/x-date-pickers/DatePicker';
+import { SelectProps } from '@mui/material/Select';
 import { DropzoneOptions } from 'react-dropzone';
 import { IconifyIcon } from '@iconify/react';
 
-type AppDatePickerProps = {
+declare const AppDatePicker: React__default.ForwardRefExoticComponent<{
     name: string;
     label?: string;
     disabled?: boolean;
+    disablePast?: boolean;
     format?: string;
     sx?: SxProps<Theme>;
     textFieldSx?: SxProps<Theme>;
-};
-declare const AppDatePicker: React__default.ForwardRefExoticComponent<AppDatePickerProps & React__default.RefAttributes<HTMLDivElement>>;
-
-interface AppSelectOptions$2 {
-    label: string;
-    value: string | number;
-}
-interface Props$8 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
-    name: string;
-    label?: string;
-    placeholder?: string;
-    options: AppSelectOptions$2[];
-    disabled?: boolean;
-    sx?: SxProps<Theme>;
-    formControlSx?: SxProps<Theme>;
-    textFieldSx?: SxProps<Theme>;
-    listboxSx?: SxProps<Theme>;
-    errorSx?: SxProps<Theme>;
-}
-declare function AppAutoCompleter({ placeholder, name, label, options, disabled, sx, formControlSx, textFieldSx, listboxSx, errorSx }: Props$8): React.JSX.Element;
+} & Omit<DatePickerProps<true, Dayjs, Dayjs>, "value" | "onChange" | "renderInput"> & React__default.RefAttributes<HTMLDivElement>>;
 
-interface AppDateAndTimePickerProps {
+type AppDateAndTimePickerProps = {
     /** Field name for formik */
     name: string;
     /** Label for the date and time picker */
@@ -80,17 +64,17 @@ interface AppDateAndTimePickerProps {
     onBlur?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
     /** Additional props to pass to the DateTimePicker */
     [key: string]: any;
-}
+} & Omit<DateTimePickerProps<true, Dayjs, Dayjs>, "value" | "onChange" | "renderInput">;
 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 +120,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,9 +137,9 @@ 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 {
+interface AppSwitchInputProps extends Omit<SwitchProps, "name" | "checked" | "onChange"> {
     name: string;
     label?: string;
     className?: string;
@@ -170,7 +154,7 @@ interface AppSwitchInputProps {
 }
 declare function AppSwitchInput({ name, label, className, sx, containerSx, switchSx, labelSx, errorSx, labelPlacement, disabled, ...otherProps }: AppSwitchInputProps): React__default.JSX.Element;
 
-interface AppSwitchProps {
+interface AppSwitchProps extends Omit<SwitchProps, "name" | "checked" | "onChange"> {
     name: string;
     label: string;
     sx?: SxProps<Theme>;
@@ -189,7 +173,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,61 +189,68 @@ 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 SelectOption {
+    label: string;
+    value: string | number;
+}
+type OptionType = string | SelectOption;
+interface Props$3 extends Omit<AutocompleteProps<OptionType, boolean, boolean, boolean>, "renderInput" | "options" | "value" | "onChange"> {
+    name: string;
+    label?: string;
+    placeholder?: string;
+    options: OptionType[];
+    multiple?: boolean;
+    freeSolo?: boolean;
+    sx?: SxProps<Theme>;
+    formControlSx?: SxProps<Theme>;
+    textFieldSx?: SxProps<Theme>;
+    chipSx?: SxProps<Theme>;
+    errorSx?: SxProps<Theme>;
+}
+declare function AppAutoCompleter({ name, label, placeholder, options, multiple, freeSolo, sx, formControlSx, textFieldSx, chipSx, errorSx, ...rest }: Props$3): React__default.JSX.Element;
 
 interface CheckboxOption {
     label: string;
     name: string;
-    value: string | boolean | number;
+    value: string | number | boolean;
     disabled?: boolean;
 }
-interface Props$4 {
-    /** Array of checkbox options with label and value */
-    option: CheckboxOption[];
-    /** Field name for formik */
+interface Props$2 {
     name: string;
-    /** Label for the checkbox group */
+    option: CheckboxOption[];
     label?: string;
-    /** Whether the field is required */
     required?: boolean;
-    /** Whether the checkbox group is disabled */
     disabled?: boolean;
-    /** Whether the checkbox group is in a row */
     row?: boolean;
-    /** Custom styles for the root container */
     sx?: SxProps<Theme>;
-    /** Custom styles for the checkbox component */
     checkboxSx?: SxProps<Theme>;
-    /** Custom styles for the label */
     labelSx?: SxProps<Theme>;
-    /** Custom styles for the error message */
     errorSx?: SxProps<Theme>;
-    /** Custom styles for the checkbox container */
     containerSx?: SxProps<Theme>;
-    /** Custom styles for the checkbox icon */
     iconSx?: SxProps<Theme>;
-    /** Custom styles for the checked state */
     checkedSx?: SxProps<Theme>;
+    checkboxProps?: React__default.ComponentProps<typeof Checkbox>;
 }
-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, checkboxProps, }: Props$2) => react_jsx_runtime.JSX.Element;
 
-interface Props$3 extends Omit<TextFieldProps, 'variant'> {
+interface CustomInputProps {
     name: string;
-    label: ReactNode;
+    label?: ReactNode;
+    required?: boolean;
     tagUser?: string;
     hasReply?: boolean;
-    required?: boolean;
-    variant?: 'outlined' | 'filled' | 'standard';
 }
-declare function AppInputField({ name, label, type, InputProps, required, variant, ...otherProps }: Props$3): React__default.JSX.Element;
+type AppInputFieldProps = CustomInputProps & Omit<TextFieldProps, "name" | "label" | "variant"> & {
+    variant?: "outlined" | "filled" | "standard";
+};
+declare function AppInputField({ name, label, type, required, variant, InputProps, ...otherProps }: AppInputFieldProps): React__default.JSX.Element;
 
 interface AppSelectOption$1 {
     label: string;
     value: string | number;
     disabled?: boolean;
-    searchAbleValue1?: string;
-    searchAbleValue2?: string;
-    searchAbleValue3?: string;
     sx?: SxProps<Theme>;
     textSx?: SxProps<Theme>;
     icon?: ReactNode;
@@ -315,49 +306,28 @@ interface AppPhoneNoInputProps {
 declare const AppPhoneNoInput: React__default.FC<AppPhoneNoInputProps>;
 
 interface RadioOption {
-    /** The label to be shown next to the radio button */
     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 radio option */
     sx?: SxProps<Theme>;
-    /** Custom styles for this specific radio button */
     radioSx?: SxProps<Theme>;
-    /** Custom styles for this specific label */
     labelSx?: SxProps<Theme>;
 }
-interface AppRadioGroupProps extends Omit<RadioGroupProps, 'onChange' | 'onBlur' | 'value'> {
-    /** Field name for formik */
+interface AppRadioGroupProps extends Omit<RadioGroupProps, "onChange" | "onBlur" | "value"> {
     name: string;
-    /** Array of radio options */
     options: RadioOption[];
-    /** Label for the radio group */
     label?: string;
-    /** Whether the field is required */
     required?: boolean;
-    /** Whether the radio group is disabled */
     disabled?: boolean;
-    /** Whether to show the radio group in a row */
     row?: boolean;
-    /** Custom styles for the root container */
     sx?: SxProps<Theme>;
-    /** Custom styles for the form control */
     formControlSx?: SxProps<Theme>;
-    /** Custom styles for the radio group */
     radioGroupSx?: SxProps<Theme>;
-    /** Custom styles for the form label */
     formLabelSx?: SxProps<Theme>;
-    /** Custom styles for the radio buttons */
     radioSx?: SxProps<Theme>;
-    /** Custom styles for the radio labels */
     labelSx?: SxProps<Theme>;
-    /** Custom styles for the error message */
     errorSx?: SxProps<Theme>;
-    /** Callback when the value changes */
     onChange?: (event: React__default.ChangeEvent<HTMLInputElement>, value: string) => void;
-    /** Callback when the field is blurred */
     onBlur?: (event: React__default.FocusEvent<HTMLInputElement>) => void;
 }
 declare const AppRadioGroup: React__default.ForwardRefExoticComponent<Omit<AppRadioGroupProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
@@ -436,12 +406,12 @@ interface AppRatingProps {
 }
 declare const AppRating: React$1.ForwardRefExoticComponent<AppRatingProps & React$1.RefAttributes<HTMLDivElement>>;
 
-interface Props$2 {
+type EditorButton = "bold" | "italic" | "underline" | "strike" | "bulletList" | "orderedList" | "alignLeft" | "alignCenter" | "alignRight" | "heading1" | "heading2" | "undo" | "redo" | "link";
+interface Props$1 {
     name: string;
     label?: string;
     placeholder?: string;
     required?: boolean;
-    /** Variant of the input field */
     variant?: "outlined" | "filled" | "standard";
     sx?: SxProps<Theme>;
     editorSx?: SxProps<Theme>;
@@ -452,192 +422,14 @@ interface Props$2 {
     buttonSx?: SxProps<Theme>;
     activeButtonSx?: SxProps<Theme>;
     dialogSx?: SxProps<Theme>;
+    showButtons?: EditorButton[];
 }
-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$1 {
-    /** Display text for the option */
-    label: string;
-    /** Unique value for the option */
-    value: number | string;
-    /** Additional searchable text */
-    searchAbleValue1?: string;
-    /** Additional searchable text */
-    searchAbleValue2?: string;
-    /** Additional searchable text */
-    searchAbleValue3?: string;
-    /** Whether the option is disabled */
-    disabled?: boolean;
-    /** Custom styles for the option */
-    sx?: SxProps<Theme>;
-    /** Custom styles for the option 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>;
-}
-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;
-    /** Label for the input */
-    label?: string;
-    /** Whether multiple selections are allowed */
-    multiple?: boolean;
-    /** Available options */
-    options: AppSelectOptions$1[];
-    /** Callback when search query changes */
-    setSearchQuery: React__default.Dispatch<SetStateAction<string>>;
-    /** Whether the field is required */
-    required?: boolean;
-    /** Whether the field is disabled */
-    disabled?: boolean;
-    /** Whether the field is read-only */
-    readOnly?: boolean;
-    /** Whether to show the helper text when no error */
-    showHelperText?: boolean;
-    /** Custom helper text */
-    helperText?: string;
-    /** Maximum number of selectable items */
-    maxSelections?: number;
-    /** Whether to show the selected count */
-    showSelectedCount?: boolean;
-    /** Variant of the input field */
-    variant?: "outlined" | "filled" | "standard";
-    /** Custom styles for the root container */
-    sx?: SxProps<Theme>;
-    /** Custom styles for the form control */
-    formControlSx?: SxProps<Theme>;
-    /** Custom styles for the label */
-    labelSx?: SxProps<Theme>;
-    /** Custom styles for the input */
-    inputSx?: SxProps<Theme>;
-    /** Custom styles for the text field */
-    textFieldSx?: SxProps<Theme>;
-    /** Custom styles for the autocomplete */
-    autocompleteSx?: SxProps<Theme>;
-    /** Custom styles for the listbox */
-    listboxSx?: SxProps<Theme>;
-    /** Custom styles for the option */
-    optionSx?: SxProps<Theme>;
-    /** Custom styles for the chip */
-    chipSx?: SxProps<Theme>;
-    /** Custom styles for the error message */
-    errorSx?: SxProps<Theme>;
-    /** Custom styles for the helper text */
-    helperTextSx?: SxProps<Theme>;
-    /** Custom styles for the selected count */
-    selectedCountSx?: SxProps<Theme>;
-    /** Custom render function for the input */
-    renderInput?: (params: AutocompleteRenderInputParams) => ReactNode;
-    /** Custom render function for the option */
-    renderOption?: (props: React__default.HTMLAttributes<HTMLLIElement>, option: AppSelectOptions$1, state: AutocompleteRenderOptionState, ownerState: any) => ReactNode;
-    /** Custom render function for the selected value */
-    renderTags?: (value: AppSelectOptions$1[], getTagProps: (params: {
-        index: number;
-    }) => {
-        key: number | string;
-    }, ownerState: any) => ReactNode;
-    /** Custom render function for the group */
-    renderGroup?: (params: AutocompleteRenderGroupParams) => ReactNode;
-    /** Custom component for the label */
-    labelComponent?: ElementType;
-    /** Custom component for the input */
-    inputComponent?: ElementType;
-    /** Custom component for the error */
-    errorComponent?: ElementType;
-    /** Custom component for the helper text */
-    helperTextComponent?: ElementType;
-    /** Custom props for the label component */
-    labelProps?: Record<string, any>;
-    /** Custom props for the input component */
-    inputProps?: Record<string, any>;
-    /** Custom props for the text field component */
-    textFieldProps?: Record<string, any>;
-    /** Custom props for the autocomplete component */
-    autocompleteProps?: Record<string, any>;
-    /** Custom props for the checkbox component */
-    checkboxProps?: CheckboxProps;
-    /** Custom props for the chip component */
-    chipProps?: ChipProps;
-    /** Custom props for the error component */
-    errorProps?: Record<string, any>;
-    /** Custom props for the helper text component */
-    helperTextProps?: Record<string, any>;
-    /** Custom class name for the root container */
-    className?: string;
-    /** Custom class name for the form control */
-    formControlClassName?: string;
-    /** Custom class name for the label */
-    labelClassName?: string;
-    /** Custom class name for the input */
-    inputClassName?: string;
-    /** Custom class name for the text field */
-    textFieldClassName?: string;
-    /** Custom class name for the autocomplete */
-    autocompleteClassName?: string;
-    /** Custom class name for the listbox */
-    listboxClassName?: string;
-    /** Custom class name for the option */
-    optionClassName?: string;
-    /** Custom class name for the chip */
-    chipClassName?: string;
-    /** Custom class name for the error */
-    errorClassName?: string;
-    /** Custom class name for the helper text */
-    helperTextClassName?: string;
-    /** Callback when the selection changes */
-    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 */
-    onOpen?: (event: React__default.SyntheticEvent) => void;
-    /** Callback when the dropdown is closed */
-    onClose?: (event: React__default.SyntheticEvent, reason: string) => void;
-    /** Callback when the blur event occurs */
-    onBlur?: (event: React__default.FocusEvent) => void;
-    /** Callback when the focus event occurs */
-    onFocus?: (event: React__default.FocusEvent) => void;
-    /** Callback when the clear button is clicked */
-    onClear?: () => void;
-    /** Callback when the maximum number of selections is reached */
-    onMaxSelectionsReached?: (maxSelections: number) => void;
-    /** Callback when a selection is removed */
-    onRemove?: (value: AppSelectOptions$1) => void;
-    /** Callback when a selection is added */
-    onAdd?: (value: AppSelectOptions$1) => void;
-}
-declare const AppSearchableMultiSelector: React__default.ForwardRefExoticComponent<Omit<AppSearchableMultiSelectorProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
-
-interface AppSelectOptions {
-    label: string;
-    value: string | number;
-    searchAbleValue1?: string;
-    searchAbleValue2?: string;
-    searchAbleValue3?: string;
-}
-interface Props$1 extends Omit<AutocompleteProps<AppSelectOptions, false, false, false>, "options" | "renderInput" | "value" | "onChange"> {
-    name: string;
-    label: string;
-    options: AppSelectOptions[];
-    setSearchQuery?: React__default.Dispatch<SetStateAction<string>> | undefined;
-    required?: boolean;
-    placeholder?: string;
-    isResetRequired?: boolean;
-    variant?: "outlined" | "filled" | "standard";
-}
-declare function AppSearchableSelectInput({ name, label, options, required, variant, placeholder, setSearchQuery, isResetRequired, ...otherProps }: Props$1): React__default.JSX.Element;
+declare const AppRichTextEditor: React__default.FC<Props$1>;
 
 interface AppSelectOption {
     label: string;
     value: string | number;
     disabled?: boolean;
-    searchAbleValue1?: string;
-    searchAbleValue2?: string;
-    searchAbleValue3?: string;
     sx?: SxProps<Theme>;
     textSx?: SxProps<Theme>;
     icon?: ReactNode;
@@ -757,4 +549,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, AppSelectInput, AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea, AppUploadFile, Form, Iconify, IconifyProps, SubmitButton, UploadProps };