formik-form-components 0.2.28 → 0.2.29
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -2
- package/dist/index.d.ts +19 -201
- package/dist/index.js +102 -639
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +100 -635
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React$1 from 'react';
|
|
2
|
-
import React__default, { ReactElement, ReactNode, SyntheticEvent, ElementType
|
|
2
|
+
import React__default, { ReactElement, ReactNode, SyntheticEvent, ElementType } from 'react';
|
|
3
3
|
import { FormikValues, FormikConfig, FormikProps } from 'formik';
|
|
4
|
-
import { SxProps, Theme, AutocompleteProps, AutocompleteChangeReason, AutocompleteChangeDetails, TextFieldProps, RadioGroupProps,
|
|
4
|
+
import { SxProps, Theme, AutocompleteProps, AutocompleteChangeReason, AutocompleteChangeDetails, TextFieldProps, RadioGroupProps, BoxProps } from '@mui/material';
|
|
5
5
|
import { Theme as Theme$1 } from '@mui/material/styles';
|
|
6
6
|
import { SelectProps } from '@mui/material/Select';
|
|
7
7
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
@@ -19,15 +19,15 @@ type AppDatePickerProps = {
|
|
|
19
19
|
};
|
|
20
20
|
declare const AppDatePicker: React__default.ForwardRefExoticComponent<AppDatePickerProps & React__default.RefAttributes<HTMLDivElement>>;
|
|
21
21
|
|
|
22
|
-
interface AppSelectOptions
|
|
22
|
+
interface AppSelectOptions {
|
|
23
23
|
label: string;
|
|
24
24
|
value: string | number;
|
|
25
25
|
}
|
|
26
|
-
interface Props$
|
|
26
|
+
interface Props$7 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
|
|
27
27
|
name: string;
|
|
28
28
|
label?: string;
|
|
29
29
|
placeholder?: string;
|
|
30
|
-
options: AppSelectOptions
|
|
30
|
+
options: AppSelectOptions[];
|
|
31
31
|
disabled?: boolean;
|
|
32
32
|
sx?: SxProps<Theme>;
|
|
33
33
|
formControlSx?: SxProps<Theme>;
|
|
@@ -35,7 +35,7 @@ interface Props$8 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChan
|
|
|
35
35
|
listboxSx?: SxProps<Theme>;
|
|
36
36
|
errorSx?: SxProps<Theme>;
|
|
37
37
|
}
|
|
38
|
-
declare function AppAutoCompleter({ placeholder, name, label, options, disabled, sx, formControlSx, textFieldSx, listboxSx, errorSx }: Props$
|
|
38
|
+
declare function AppAutoCompleter({ placeholder, name, label, options, disabled, sx, formControlSx, textFieldSx, listboxSx, errorSx }: Props$7): React.JSX.Element;
|
|
39
39
|
|
|
40
40
|
interface AppDateAndTimePickerProps {
|
|
41
41
|
/** Field name for formik */
|
|
@@ -83,14 +83,14 @@ interface AppDateAndTimePickerProps {
|
|
|
83
83
|
}
|
|
84
84
|
declare const AppDateAndTimePicker: React__default.ForwardRefExoticComponent<Omit<AppDateAndTimePickerProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
85
85
|
|
|
86
|
-
interface Props$
|
|
86
|
+
interface Props$6 {
|
|
87
87
|
name: string;
|
|
88
88
|
alwaysShow?: boolean;
|
|
89
89
|
sx?: SxProps<Theme>;
|
|
90
90
|
containerSx?: SxProps<Theme>;
|
|
91
91
|
textSx?: SxProps<Theme>;
|
|
92
92
|
}
|
|
93
|
-
declare function AppFormErrorMessage({ name, alwaysShow, sx, containerSx, textSx }: Props$
|
|
93
|
+
declare function AppFormErrorMessage({ name, alwaysShow, sx, containerSx, textSx }: Props$6): React.JSX.Element | null;
|
|
94
94
|
|
|
95
95
|
interface AppTextAreaProps {
|
|
96
96
|
/** Field name for formik */
|
|
@@ -136,7 +136,7 @@ interface AppTextAreaProps {
|
|
|
136
136
|
}
|
|
137
137
|
declare const AppTextArea: React$1.ForwardRefExoticComponent<Omit<AppTextAreaProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
|
|
138
138
|
|
|
139
|
-
interface Props$
|
|
139
|
+
interface Props$5 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
|
|
140
140
|
name: string;
|
|
141
141
|
freeSolo?: boolean;
|
|
142
142
|
multiple?: boolean;
|
|
@@ -153,7 +153,7 @@ interface Props$6 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChan
|
|
|
153
153
|
chipContainerSx?: SxProps<Theme>;
|
|
154
154
|
inputSx?: SxProps<Theme>;
|
|
155
155
|
}
|
|
156
|
-
declare function AppTagsCreator({ placeholder, name, multiple, label, options, disabled, sx, formControlSx, textFieldSx, chipSx, listboxSx, errorSx, chipContainerSx, inputSx, }: Props$
|
|
156
|
+
declare function AppTagsCreator({ placeholder, name, multiple, label, options, disabled, sx, formControlSx, textFieldSx, chipSx, listboxSx, errorSx, chipContainerSx, inputSx, }: Props$5): React.JSX.Element;
|
|
157
157
|
|
|
158
158
|
interface AppSwitchInputProps {
|
|
159
159
|
name: string;
|
|
@@ -189,7 +189,7 @@ interface FormProps<T> extends FormikConfig<T> {
|
|
|
189
189
|
}
|
|
190
190
|
declare const Form: <T extends FormikValues>({ children, className, ...props }: FormProps<T>) => ReactElement;
|
|
191
191
|
|
|
192
|
-
interface Props$
|
|
192
|
+
interface Props$4 extends Omit<AutocompleteProps<string, true, boolean, false, 'div'>, 'renderInput' | 'onChange' | 'value' | 'multiple' | 'freeSolo'> {
|
|
193
193
|
name: string;
|
|
194
194
|
freeSolo?: boolean;
|
|
195
195
|
label?: string;
|
|
@@ -205,7 +205,7 @@ interface Props$5 extends Omit<AutocompleteProps<string, true, boolean, false, '
|
|
|
205
205
|
chipSx?: SxProps<Theme$1>;
|
|
206
206
|
errorSx?: SxProps<Theme$1>;
|
|
207
207
|
}
|
|
208
|
-
declare function AppAutoComplete({ placeholder, name, variant, label, options, value: propValue, onChange: propOnChange, sx, formControlSx, textFieldSx, chipSx, errorSx, }: Props$
|
|
208
|
+
declare function AppAutoComplete({ placeholder, name, variant, label, options, value: propValue, onChange: propOnChange, sx, formControlSx, textFieldSx, chipSx, errorSx, }: Props$4): React.JSX.Element;
|
|
209
209
|
|
|
210
210
|
interface CheckboxOption {
|
|
211
211
|
label: string;
|
|
@@ -213,7 +213,7 @@ interface CheckboxOption {
|
|
|
213
213
|
value: string | boolean | number;
|
|
214
214
|
disabled?: boolean;
|
|
215
215
|
}
|
|
216
|
-
interface Props$
|
|
216
|
+
interface Props$3 {
|
|
217
217
|
/** Array of checkbox options with label and value */
|
|
218
218
|
option: CheckboxOption[];
|
|
219
219
|
/** Field name for formik */
|
|
@@ -241,9 +241,9 @@ interface Props$4 {
|
|
|
241
241
|
/** Custom styles for the checked state */
|
|
242
242
|
checkedSx?: SxProps<Theme>;
|
|
243
243
|
}
|
|
244
|
-
declare const AppCheckBox: ({ name, option, label, required, disabled, row, sx, checkboxSx, labelSx, errorSx, containerSx, iconSx, checkedSx, ...rest }: Props$
|
|
244
|
+
declare const AppCheckBox: ({ name, option, label, required, disabled, row, sx, checkboxSx, labelSx, errorSx, containerSx, iconSx, checkedSx, ...rest }: Props$3) => react_jsx_runtime.JSX.Element;
|
|
245
245
|
|
|
246
|
-
interface Props$
|
|
246
|
+
interface Props$2 extends Omit<TextFieldProps, 'variant'> {
|
|
247
247
|
name: string;
|
|
248
248
|
label: ReactNode;
|
|
249
249
|
tagUser?: string;
|
|
@@ -251,15 +251,12 @@ interface Props$3 extends Omit<TextFieldProps, 'variant'> {
|
|
|
251
251
|
required?: boolean;
|
|
252
252
|
variant?: 'outlined' | 'filled' | 'standard';
|
|
253
253
|
}
|
|
254
|
-
declare function AppInputField({ name, label, type, InputProps, required, variant, ...otherProps }: Props$
|
|
254
|
+
declare function AppInputField({ name, label, type, InputProps, required, variant, ...otherProps }: Props$2): React__default.JSX.Element;
|
|
255
255
|
|
|
256
256
|
interface AppSelectOption$1 {
|
|
257
257
|
label: string;
|
|
258
258
|
value: string | number;
|
|
259
259
|
disabled?: boolean;
|
|
260
|
-
searchAbleValue1?: string;
|
|
261
|
-
searchAbleValue2?: string;
|
|
262
|
-
searchAbleValue3?: string;
|
|
263
260
|
sx?: SxProps<Theme>;
|
|
264
261
|
textSx?: SxProps<Theme>;
|
|
265
262
|
icon?: ReactNode;
|
|
@@ -436,7 +433,7 @@ interface AppRatingProps {
|
|
|
436
433
|
}
|
|
437
434
|
declare const AppRating: React$1.ForwardRefExoticComponent<AppRatingProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
438
435
|
|
|
439
|
-
interface Props$
|
|
436
|
+
interface Props$1 {
|
|
440
437
|
name: string;
|
|
441
438
|
label?: string;
|
|
442
439
|
placeholder?: string;
|
|
@@ -453,191 +450,12 @@ interface Props$2 {
|
|
|
453
450
|
activeButtonSx?: SxProps<Theme>;
|
|
454
451
|
dialogSx?: SxProps<Theme>;
|
|
455
452
|
}
|
|
456
|
-
declare const AppRichTextEditor: ({ name, label, required, variant, placeholder, sx, editorSx, toolbarSx, contentSx, errorSx, labelSx, buttonSx, activeButtonSx, dialogSx, }: Props$
|
|
457
|
-
|
|
458
|
-
interface AppSelectOptions$1 {
|
|
459
|
-
/** Display text for the option */
|
|
460
|
-
label: string;
|
|
461
|
-
/** Unique value for the option */
|
|
462
|
-
value: number | string;
|
|
463
|
-
/** Additional searchable text */
|
|
464
|
-
searchAbleValue1?: string;
|
|
465
|
-
/** Additional searchable text */
|
|
466
|
-
searchAbleValue2?: string;
|
|
467
|
-
/** Additional searchable text */
|
|
468
|
-
searchAbleValue3?: string;
|
|
469
|
-
/** Whether the option is disabled */
|
|
470
|
-
disabled?: boolean;
|
|
471
|
-
/** Custom styles for the option */
|
|
472
|
-
sx?: SxProps<Theme>;
|
|
473
|
-
/** Custom styles for the option text */
|
|
474
|
-
textSx?: SxProps<Theme>;
|
|
475
|
-
/** Custom icon for the option */
|
|
476
|
-
icon?: ReactNode;
|
|
477
|
-
/** Custom component to render the option */
|
|
478
|
-
component?: ElementType;
|
|
479
|
-
/** Custom props for the option component */
|
|
480
|
-
componentProps?: Record<string, any>;
|
|
481
|
-
}
|
|
482
|
-
type CustomAutocompleteProps = Omit<AutocompleteProps<AppSelectOptions$1, boolean, boolean, boolean>, "renderInput" | "options" | "renderTags" | "onChange" | "value" | "multiple">;
|
|
483
|
-
interface AppSearchableMultiSelectorProps extends CustomAutocompleteProps {
|
|
484
|
-
/** Field name for formik */
|
|
485
|
-
name: string;
|
|
486
|
-
/** Label for the input */
|
|
487
|
-
label?: string;
|
|
488
|
-
/** Whether multiple selections are allowed */
|
|
489
|
-
multiple?: boolean;
|
|
490
|
-
/** Available options */
|
|
491
|
-
options: AppSelectOptions$1[];
|
|
492
|
-
/** Callback when search query changes */
|
|
493
|
-
setSearchQuery: React__default.Dispatch<SetStateAction<string>>;
|
|
494
|
-
/** Whether the field is required */
|
|
495
|
-
required?: boolean;
|
|
496
|
-
/** Whether the field is disabled */
|
|
497
|
-
disabled?: boolean;
|
|
498
|
-
/** Whether the field is read-only */
|
|
499
|
-
readOnly?: boolean;
|
|
500
|
-
/** Whether to show the helper text when no error */
|
|
501
|
-
showHelperText?: boolean;
|
|
502
|
-
/** Custom helper text */
|
|
503
|
-
helperText?: string;
|
|
504
|
-
/** Maximum number of selectable items */
|
|
505
|
-
maxSelections?: number;
|
|
506
|
-
/** Whether to show the selected count */
|
|
507
|
-
showSelectedCount?: boolean;
|
|
508
|
-
/** Variant of the input field */
|
|
509
|
-
variant?: "outlined" | "filled" | "standard";
|
|
510
|
-
/** Custom styles for the root container */
|
|
511
|
-
sx?: SxProps<Theme>;
|
|
512
|
-
/** Custom styles for the form control */
|
|
513
|
-
formControlSx?: SxProps<Theme>;
|
|
514
|
-
/** Custom styles for the label */
|
|
515
|
-
labelSx?: SxProps<Theme>;
|
|
516
|
-
/** Custom styles for the input */
|
|
517
|
-
inputSx?: SxProps<Theme>;
|
|
518
|
-
/** Custom styles for the text field */
|
|
519
|
-
textFieldSx?: SxProps<Theme>;
|
|
520
|
-
/** Custom styles for the autocomplete */
|
|
521
|
-
autocompleteSx?: SxProps<Theme>;
|
|
522
|
-
/** Custom styles for the listbox */
|
|
523
|
-
listboxSx?: SxProps<Theme>;
|
|
524
|
-
/** Custom styles for the option */
|
|
525
|
-
optionSx?: SxProps<Theme>;
|
|
526
|
-
/** Custom styles for the chip */
|
|
527
|
-
chipSx?: SxProps<Theme>;
|
|
528
|
-
/** Custom styles for the error message */
|
|
529
|
-
errorSx?: SxProps<Theme>;
|
|
530
|
-
/** Custom styles for the helper text */
|
|
531
|
-
helperTextSx?: SxProps<Theme>;
|
|
532
|
-
/** Custom styles for the selected count */
|
|
533
|
-
selectedCountSx?: SxProps<Theme>;
|
|
534
|
-
/** Custom render function for the input */
|
|
535
|
-
renderInput?: (params: AutocompleteRenderInputParams) => ReactNode;
|
|
536
|
-
/** Custom render function for the option */
|
|
537
|
-
renderOption?: (props: React__default.HTMLAttributes<HTMLLIElement>, option: AppSelectOptions$1, state: AutocompleteRenderOptionState, ownerState: any) => ReactNode;
|
|
538
|
-
/** Custom render function for the selected value */
|
|
539
|
-
renderTags?: (value: AppSelectOptions$1[], getTagProps: (params: {
|
|
540
|
-
index: number;
|
|
541
|
-
}) => {
|
|
542
|
-
key: number | string;
|
|
543
|
-
}, ownerState: any) => ReactNode;
|
|
544
|
-
/** Custom render function for the group */
|
|
545
|
-
renderGroup?: (params: AutocompleteRenderGroupParams) => ReactNode;
|
|
546
|
-
/** Custom component for the label */
|
|
547
|
-
labelComponent?: ElementType;
|
|
548
|
-
/** Custom component for the input */
|
|
549
|
-
inputComponent?: ElementType;
|
|
550
|
-
/** Custom component for the error */
|
|
551
|
-
errorComponent?: ElementType;
|
|
552
|
-
/** Custom component for the helper text */
|
|
553
|
-
helperTextComponent?: ElementType;
|
|
554
|
-
/** Custom props for the label component */
|
|
555
|
-
labelProps?: Record<string, any>;
|
|
556
|
-
/** Custom props for the input component */
|
|
557
|
-
inputProps?: Record<string, any>;
|
|
558
|
-
/** Custom props for the text field component */
|
|
559
|
-
textFieldProps?: Record<string, any>;
|
|
560
|
-
/** Custom props for the autocomplete component */
|
|
561
|
-
autocompleteProps?: Record<string, any>;
|
|
562
|
-
/** Custom props for the checkbox component */
|
|
563
|
-
checkboxProps?: CheckboxProps;
|
|
564
|
-
/** Custom props for the chip component */
|
|
565
|
-
chipProps?: ChipProps;
|
|
566
|
-
/** Custom props for the error component */
|
|
567
|
-
errorProps?: Record<string, any>;
|
|
568
|
-
/** Custom props for the helper text component */
|
|
569
|
-
helperTextProps?: Record<string, any>;
|
|
570
|
-
/** Custom class name for the root container */
|
|
571
|
-
className?: string;
|
|
572
|
-
/** Custom class name for the form control */
|
|
573
|
-
formControlClassName?: string;
|
|
574
|
-
/** Custom class name for the label */
|
|
575
|
-
labelClassName?: string;
|
|
576
|
-
/** Custom class name for the input */
|
|
577
|
-
inputClassName?: string;
|
|
578
|
-
/** Custom class name for the text field */
|
|
579
|
-
textFieldClassName?: string;
|
|
580
|
-
/** Custom class name for the autocomplete */
|
|
581
|
-
autocompleteClassName?: string;
|
|
582
|
-
/** Custom class name for the listbox */
|
|
583
|
-
listboxClassName?: string;
|
|
584
|
-
/** Custom class name for the option */
|
|
585
|
-
optionClassName?: string;
|
|
586
|
-
/** Custom class name for the chip */
|
|
587
|
-
chipClassName?: string;
|
|
588
|
-
/** Custom class name for the error */
|
|
589
|
-
errorClassName?: string;
|
|
590
|
-
/** Custom class name for the helper text */
|
|
591
|
-
helperTextClassName?: string;
|
|
592
|
-
/** Callback when the selection changes */
|
|
593
|
-
onChange?: (event: React__default.SyntheticEvent, value: AppSelectOptions$1[], reason: string) => void;
|
|
594
|
-
/** Callback when the input value changes */
|
|
595
|
-
onInputChange?: (event: React__default.SyntheticEvent, value: string, reason: string) => void;
|
|
596
|
-
/** Callback when the dropdown is opened */
|
|
597
|
-
onOpen?: (event: React__default.SyntheticEvent) => void;
|
|
598
|
-
/** Callback when the dropdown is closed */
|
|
599
|
-
onClose?: (event: React__default.SyntheticEvent, reason: string) => void;
|
|
600
|
-
/** Callback when the blur event occurs */
|
|
601
|
-
onBlur?: (event: React__default.FocusEvent) => void;
|
|
602
|
-
/** Callback when the focus event occurs */
|
|
603
|
-
onFocus?: (event: React__default.FocusEvent) => void;
|
|
604
|
-
/** Callback when the clear button is clicked */
|
|
605
|
-
onClear?: () => void;
|
|
606
|
-
/** Callback when the maximum number of selections is reached */
|
|
607
|
-
onMaxSelectionsReached?: (maxSelections: number) => void;
|
|
608
|
-
/** Callback when a selection is removed */
|
|
609
|
-
onRemove?: (value: AppSelectOptions$1) => void;
|
|
610
|
-
/** Callback when a selection is added */
|
|
611
|
-
onAdd?: (value: AppSelectOptions$1) => void;
|
|
612
|
-
}
|
|
613
|
-
declare const AppSearchableMultiSelector: React__default.ForwardRefExoticComponent<Omit<AppSearchableMultiSelectorProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
|
|
614
|
-
|
|
615
|
-
interface AppSelectOptions {
|
|
616
|
-
label: string;
|
|
617
|
-
value: string | number;
|
|
618
|
-
searchAbleValue1?: string;
|
|
619
|
-
searchAbleValue2?: string;
|
|
620
|
-
searchAbleValue3?: string;
|
|
621
|
-
}
|
|
622
|
-
interface Props$1 extends Omit<AutocompleteProps<AppSelectOptions, false, false, false>, "options" | "renderInput" | "value" | "onChange"> {
|
|
623
|
-
name: string;
|
|
624
|
-
label: string;
|
|
625
|
-
options: AppSelectOptions[];
|
|
626
|
-
setSearchQuery?: React__default.Dispatch<SetStateAction<string>> | undefined;
|
|
627
|
-
required?: boolean;
|
|
628
|
-
placeholder?: string;
|
|
629
|
-
isResetRequired?: boolean;
|
|
630
|
-
variant?: "outlined" | "filled" | "standard";
|
|
631
|
-
}
|
|
632
|
-
declare function AppSearchableSelectInput({ name, label, options, required, variant, placeholder, setSearchQuery, isResetRequired, ...otherProps }: Props$1): React__default.JSX.Element;
|
|
453
|
+
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;
|
|
633
454
|
|
|
634
455
|
interface AppSelectOption {
|
|
635
456
|
label: string;
|
|
636
457
|
value: string | number;
|
|
637
458
|
disabled?: boolean;
|
|
638
|
-
searchAbleValue1?: string;
|
|
639
|
-
searchAbleValue2?: string;
|
|
640
|
-
searchAbleValue3?: string;
|
|
641
459
|
sx?: SxProps<Theme>;
|
|
642
460
|
textSx?: SxProps<Theme>;
|
|
643
461
|
icon?: ReactNode;
|
|
@@ -757,4 +575,4 @@ interface Props extends BoxProps {
|
|
|
757
575
|
}
|
|
758
576
|
declare const Iconify: React$1.ForwardRefExoticComponent<Omit<Props, "ref"> & React$1.RefAttributes<SVGElement>>;
|
|
759
577
|
|
|
760
|
-
export { AppAutoComplete, AppAutoCompleter, AppCheckBox, AppDateAndTimePicker, AppDatePicker, AppFormErrorMessage, AppInputField, AppMultiSelector, AppPhoneNoInput, AppRadioGroup, AppRating, AppRichTextEditor,
|
|
578
|
+
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 };
|