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 CHANGED
@@ -164,9 +164,7 @@ export default function ExampleForm() {
164
164
  ### Selection Components
165
165
 
166
166
  - `AppSelect`
167
- - `AppSearchableSelect`
168
167
  - `AppMultiSelector`
169
- - `AppSearchableMultiSelector`
170
168
  - `AppAutocomplete`
171
169
  - `AppTagsCreator`
172
170
 
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, SetStateAction } from 'react';
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, AutocompleteRenderInputParams, AutocompleteRenderOptionState, AutocompleteRenderGroupParams, CheckboxProps, ChipProps, BoxProps } from '@mui/material';
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$2 {
22
+ interface AppSelectOptions {
23
23
  label: string;
24
24
  value: string | number;
25
25
  }
26
- interface Props$8 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
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$2[];
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$8): React.JSX.Element;
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$7 {
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$7): React.JSX.Element | null;
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$6 extends Omit<SelectProps, 'name' | 'label' | 'value' | 'onChange'> {
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$6): React.JSX.Element;
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$5 extends Omit<AutocompleteProps<string, true, boolean, false, 'div'>, 'renderInput' | 'onChange' | 'value' | 'multiple' | 'freeSolo'> {
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$5): React.JSX.Element;
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$4 {
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$4) => react_jsx_runtime.JSX.Element;
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$3 extends Omit<TextFieldProps, 'variant'> {
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$3): React__default.JSX.Element;
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$2 {
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$2) => react_jsx_runtime.JSX.Element | null;
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, AppSearchableMultiSelector, AppSearchableSelectInput, AppSelectInput, AppSimpleUploadFile, AppSwitch, AppSwitchInput, AppTagsCreator, AppTextArea, AppUploadFile, Form, Iconify, IconifyProps, SubmitButton, UploadProps };
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 };