formik-form-components 0.2.27 → 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,9 +1,9 @@
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, SelectChangeEvent, 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
- import { SelectProps, SelectChangeEvent as SelectChangeEvent$1 } from '@mui/material/Select';
6
+ import { SelectProps } from '@mui/material/Select';
7
7
  import * as react_jsx_runtime from 'react/jsx-runtime';
8
8
  import { Dayjs } from 'dayjs';
9
9
  import { DropzoneOptions } from 'react-dropzone';
@@ -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$4 {
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$4[];
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,75 +251,49 @@ 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
- interface AppSelectOptions$3 {
257
- /** The label to display for this option */
256
+ interface AppSelectOption$1 {
258
257
  label: string;
259
- /** The value to be used when this option is selected */
260
258
  value: string | number;
261
- /** Whether this option is disabled */
262
259
  disabled?: boolean;
263
- /** Custom styles for this specific menu item */
264
260
  sx?: SxProps<Theme>;
265
- /** Custom styles for this specific menu item text */
266
261
  textSx?: SxProps<Theme>;
262
+ icon?: ReactNode;
267
263
  }
268
- interface AppMultiSelectorProps extends Omit<SelectProps<(string | number)[]>, "name" | "label" | "value" | "onChange"> {
269
- /** Field name for formik */
264
+ interface BaseMultiSelectProps {
270
265
  name: string;
271
- /** Label for the multi-selector */
272
266
  label?: string;
273
- /** Whether multiple selection is allowed */
274
- multiple?: boolean;
275
- /** Array of select options */
276
- options: AppSelectOptions$3[];
277
- /** Whether the field is required */
267
+ options: AppSelectOption$1[];
278
268
  required?: boolean;
279
- /** Whether the field is disabled */
280
269
  disabled?: boolean;
281
- /** Maximum number of items that can be selected */
282
270
  maxSelections?: number;
283
- /** Whether to show the selected count in the label */
284
271
  showSelectedCount?: boolean;
285
- /** Whether to show the helper text when no error */
286
- showHelperText?: boolean;
287
- /** Variant of the input field */
288
- variant?: 'outlined' | 'filled' | 'standard';
289
- /** Custom helper text to display */
290
272
  helperText?: string;
291
- /** Custom styles for the root container */
273
+ variant?: "outlined" | "filled" | "standard";
274
+ placeholder?: string;
292
275
  sx?: SxProps<Theme>;
293
- /** Custom styles for the form control */
294
276
  formControlSx?: SxProps<Theme>;
295
- /** Custom styles for the select component */
296
- selectSx?: SxProps<Theme>;
297
- /** Custom styles for the label */
298
277
  labelSx?: SxProps<Theme>;
299
- /** Custom styles for the chip components */
300
278
  chipSx?: SxProps<Theme>;
301
- /** Custom styles for the checkbox components */
302
279
  checkboxSx?: SxProps<Theme>;
303
- /** Custom styles for the menu items */
304
- menuItemSx?: SxProps<Theme>;
305
- /** Custom styles for the error message */
306
- errorSx?: SxProps<Theme>;
307
- /** Custom styles for the helper text */
308
- helperTextSx?: SxProps<Theme>;
309
- /** Custom styles for the select icon */
310
- iconSx?: SxProps<Theme>;
311
- /** Callback when the value changes */
312
- onChange?: (event: SelectChangeEvent<(string | number)[]>, child: ReactNode) => void;
313
- /** Callback when the menu opens */
314
- onOpen?: (event: React.SyntheticEvent) => void;
315
- /** Callback when the menu closes */
316
- onClose?: (event: React.SyntheticEvent) => void;
317
- /** Custom render function for the selected value */
318
- renderValue?: (selected: Array<string | number>) => ReactNode;
319
- /** Custom render function for menu items */
320
- renderMenuItem?: (option: AppSelectOptions$3, isSelected: boolean) => ReactNode;
321
- }
322
- declare const AppMultiSelector: React$1.ForwardRefExoticComponent<Omit<AppMultiSelectorProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
280
+ onChange?: (value: Array<string | number>) => void;
281
+ onMaxSelectionsReached?: (maxSelections: number) => void;
282
+ }
283
+ interface AutocompleteMultiSelectProps extends BaseMultiSelectProps {
284
+ mode?: "autocomplete";
285
+ onSearchChange?: (query: string) => void;
286
+ searchDebounce?: number;
287
+ clearable?: boolean;
288
+ }
289
+ interface DropdownMultiSelectProps extends BaseMultiSelectProps {
290
+ mode: "dropdown";
291
+ onSearchChange?: never;
292
+ searchDebounce?: never;
293
+ clearable?: never;
294
+ }
295
+ type AppMultiSelectorProps = AutocompleteMultiSelectProps | DropdownMultiSelectProps;
296
+ declare const AppMultiSelector: React__default.ForwardRefExoticComponent<AppMultiSelectorProps & React__default.RefAttributes<HTMLDivElement>>;
323
297
 
324
298
  interface AppPhoneNoInputProps {
325
299
  name: string;
@@ -459,7 +433,7 @@ interface AppRatingProps {
459
433
  }
460
434
  declare const AppRating: React$1.ForwardRefExoticComponent<AppRatingProps & React$1.RefAttributes<HTMLDivElement>>;
461
435
 
462
- interface Props$2 {
436
+ interface Props$1 {
463
437
  name: string;
464
438
  label?: string;
465
439
  placeholder?: string;
@@ -476,271 +450,46 @@ interface Props$2 {
476
450
  activeButtonSx?: SxProps<Theme>;
477
451
  dialogSx?: SxProps<Theme>;
478
452
  }
479
- 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;
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;
480
454
 
481
- interface AppSelectOptions$2 {
482
- /** Display text for the option */
455
+ interface AppSelectOption {
483
456
  label: string;
484
- /** Unique value for the option */
485
- value: number | string;
486
- /** Additional searchable text */
487
- searchAbleValue1?: string;
488
- /** Additional searchable text */
489
- searchAbleValue2?: string;
490
- /** Additional searchable text */
491
- searchAbleValue3?: string;
492
- /** Whether the option is disabled */
493
- disabled?: boolean;
494
- /** Custom styles for the option */
495
- sx?: SxProps<Theme>;
496
- /** Custom styles for the option text */
497
- textSx?: SxProps<Theme>;
498
- /** Custom icon for the option */
499
- icon?: ReactNode;
500
- /** Custom component to render the option */
501
- component?: ElementType;
502
- /** Custom props for the option component */
503
- componentProps?: Record<string, any>;
504
- }
505
- type CustomAutocompleteProps = Omit<AutocompleteProps<AppSelectOptions$2, boolean, boolean, boolean>, "renderInput" | "options" | "renderTags" | "onChange" | "value" | "multiple">;
506
- interface AppSearchableMultiSelectorProps extends CustomAutocompleteProps {
507
- /** Field name for formik */
508
- name: string;
509
- /** Label for the input */
510
- label?: string;
511
- /** Whether multiple selections are allowed */
512
- multiple?: boolean;
513
- /** Available options */
514
- options: AppSelectOptions$2[];
515
- /** Callback when search query changes */
516
- setSearchQuery: React__default.Dispatch<SetStateAction<string>>;
517
- /** Whether the field is required */
518
- required?: boolean;
519
- /** Whether the field is disabled */
520
- disabled?: boolean;
521
- /** Whether the field is read-only */
522
- readOnly?: boolean;
523
- /** Whether to show the helper text when no error */
524
- showHelperText?: boolean;
525
- /** Custom helper text */
526
- helperText?: string;
527
- /** Maximum number of selectable items */
528
- maxSelections?: number;
529
- /** Whether to show the selected count */
530
- showSelectedCount?: boolean;
531
- /** Variant of the input field */
532
- variant?: "outlined" | "filled" | "standard";
533
- /** Custom styles for the root container */
534
- sx?: SxProps<Theme>;
535
- /** Custom styles for the form control */
536
- formControlSx?: SxProps<Theme>;
537
- /** Custom styles for the label */
538
- labelSx?: SxProps<Theme>;
539
- /** Custom styles for the input */
540
- inputSx?: SxProps<Theme>;
541
- /** Custom styles for the text field */
542
- textFieldSx?: SxProps<Theme>;
543
- /** Custom styles for the autocomplete */
544
- autocompleteSx?: SxProps<Theme>;
545
- /** Custom styles for the listbox */
546
- listboxSx?: SxProps<Theme>;
547
- /** Custom styles for the option */
548
- optionSx?: SxProps<Theme>;
549
- /** Custom styles for the chip */
550
- chipSx?: SxProps<Theme>;
551
- /** Custom styles for the error message */
552
- errorSx?: SxProps<Theme>;
553
- /** Custom styles for the helper text */
554
- helperTextSx?: SxProps<Theme>;
555
- /** Custom styles for the selected count */
556
- selectedCountSx?: SxProps<Theme>;
557
- /** Custom render function for the input */
558
- renderInput?: (params: AutocompleteRenderInputParams) => ReactNode;
559
- /** Custom render function for the option */
560
- renderOption?: (props: React__default.HTMLAttributes<HTMLLIElement>, option: AppSelectOptions$2, state: AutocompleteRenderOptionState, ownerState: any) => ReactNode;
561
- /** Custom render function for the selected value */
562
- renderTags?: (value: AppSelectOptions$2[], getTagProps: (params: {
563
- index: number;
564
- }) => {
565
- key: number | string;
566
- }, ownerState: any) => ReactNode;
567
- /** Custom render function for the group */
568
- renderGroup?: (params: AutocompleteRenderGroupParams) => ReactNode;
569
- /** Custom component for the label */
570
- labelComponent?: ElementType;
571
- /** Custom component for the input */
572
- inputComponent?: ElementType;
573
- /** Custom component for the error */
574
- errorComponent?: ElementType;
575
- /** Custom component for the helper text */
576
- helperTextComponent?: ElementType;
577
- /** Custom props for the label component */
578
- labelProps?: Record<string, any>;
579
- /** Custom props for the input component */
580
- inputProps?: Record<string, any>;
581
- /** Custom props for the text field component */
582
- textFieldProps?: Record<string, any>;
583
- /** Custom props for the autocomplete component */
584
- autocompleteProps?: Record<string, any>;
585
- /** Custom props for the checkbox component */
586
- checkboxProps?: CheckboxProps;
587
- /** Custom props for the chip component */
588
- chipProps?: ChipProps;
589
- /** Custom props for the error component */
590
- errorProps?: Record<string, any>;
591
- /** Custom props for the helper text component */
592
- helperTextProps?: Record<string, any>;
593
- /** Custom class name for the root container */
594
- className?: string;
595
- /** Custom class name for the form control */
596
- formControlClassName?: string;
597
- /** Custom class name for the label */
598
- labelClassName?: string;
599
- /** Custom class name for the input */
600
- inputClassName?: string;
601
- /** Custom class name for the text field */
602
- textFieldClassName?: string;
603
- /** Custom class name for the autocomplete */
604
- autocompleteClassName?: string;
605
- /** Custom class name for the listbox */
606
- listboxClassName?: string;
607
- /** Custom class name for the option */
608
- optionClassName?: string;
609
- /** Custom class name for the chip */
610
- chipClassName?: string;
611
- /** Custom class name for the error */
612
- errorClassName?: string;
613
- /** Custom class name for the helper text */
614
- helperTextClassName?: string;
615
- /** Callback when the selection changes */
616
- onChange?: (event: React__default.SyntheticEvent, value: AppSelectOptions$2[], reason: string) => void;
617
- /** Callback when the input value changes */
618
- onInputChange?: (event: React__default.SyntheticEvent, value: string, reason: string) => void;
619
- /** Callback when the dropdown is opened */
620
- onOpen?: (event: React__default.SyntheticEvent) => void;
621
- /** Callback when the dropdown is closed */
622
- onClose?: (event: React__default.SyntheticEvent, reason: string) => void;
623
- /** Callback when the blur event occurs */
624
- onBlur?: (event: React__default.FocusEvent) => void;
625
- /** Callback when the focus event occurs */
626
- onFocus?: (event: React__default.FocusEvent) => void;
627
- /** Callback when the clear button is clicked */
628
- onClear?: () => void;
629
- /** Callback when the maximum number of selections is reached */
630
- onMaxSelectionsReached?: (maxSelections: number) => void;
631
- /** Callback when a selection is removed */
632
- onRemove?: (value: AppSelectOptions$2) => void;
633
- /** Callback when a selection is added */
634
- onAdd?: (value: AppSelectOptions$2) => void;
635
- }
636
- declare const AppSearchableMultiSelector: React__default.ForwardRefExoticComponent<Omit<AppSearchableMultiSelectorProps, "ref"> & React__default.RefAttributes<HTMLDivElement>>;
637
-
638
- interface AppSelectOptions$1 {
639
- label: string;
640
- value: string | number;
641
- searchAbleValue1?: string;
642
- searchAbleValue2?: string;
643
- searchAbleValue3?: string;
644
- }
645
- interface Props$1 extends Omit<AutocompleteProps<AppSelectOptions$1, false, false, false>, "options" | "renderInput" | "value" | "onChange"> {
646
- name: string;
647
- label: string;
648
- options: AppSelectOptions$1[];
649
- setSearchQuery?: React__default.Dispatch<SetStateAction<string>> | undefined;
650
- required?: boolean;
651
- placeholder?: string;
652
- isResetRequired?: boolean;
653
- variant?: "outlined" | "filled" | "standard";
654
- }
655
- declare function AppSearchableSelectInput({ name, label, options, required, variant, placeholder, setSearchQuery, isResetRequired, ...otherProps }: Props$1): React__default.JSX.Element;
656
-
657
- interface AppSelectOptions {
658
- /** The label to display for this option */
659
- label: string;
660
- /** The value to be used when this option is selected */
661
457
  value: string | number;
662
- /** Whether this option is disabled */
663
458
  disabled?: boolean;
664
- /** Custom styles for this specific menu item */
665
459
  sx?: SxProps<Theme>;
666
- /** Custom styles for this specific menu item text */
667
460
  textSx?: SxProps<Theme>;
668
- /** Custom icon for the option */
669
461
  icon?: ReactNode;
670
- /** Custom component to render the option */
671
- component?: ElementType;
672
- /** Custom props for the option component */
673
- componentProps?: Record<string, any>;
674
462
  }
675
- interface AppSelectInputProps extends Omit<SelectProps, "name" | "label" | "value" | "onChange" | "sx"> {
676
- /** Field name for formik */
463
+ interface BaseSelectProps {
677
464
  name: string;
678
- /** Label for the select */
679
465
  label?: string;
680
- /** Array of select options */
681
- options: AppSelectOptions[];
682
- /** Whether the field is required */
466
+ options: AppSelectOption[];
683
467
  required?: boolean;
684
- /** Whether the field is disabled */
685
468
  disabled?: boolean;
686
- /** Whether the field is read-only */
687
- readOnly?: boolean;
688
- /** Variant of the select input */
689
- variant?: "outlined" | "filled" | "standard";
690
- /** Whether to show a 'None' option */
691
469
  showNoneOption?: boolean;
692
- /** Text to display for the 'None' option */
693
470
  noneOptionText?: string;
694
- /** Whether to show the helper text when no error */
695
- showHelperText?: boolean;
696
- /** Custom helper text to display */
697
471
  helperText?: string;
698
- /** Custom styles for the root container */
472
+ variant?: "outlined" | "filled" | "standard";
473
+ placeholder?: string;
699
474
  sx?: SxProps<Theme>;
700
- /** Custom styles for the form control */
701
475
  formControlSx?: SxProps<Theme>;
702
- /** Custom styles for the select component */
703
- selectSx?: SxProps<Theme>;
704
- /** Custom styles for the input */
705
- inputSx?: SxProps<Theme>;
706
- /** Custom styles for the label */
707
476
  labelSx?: SxProps<Theme>;
708
- /** Custom styles for the menu paper */
709
- menuPaperSx?: SxProps<Theme>;
710
- /** Custom styles for all menu items */
711
- menuItemSx?: SxProps<Theme>;
712
- /** Custom styles for the selected menu item */
713
- selectedMenuItemSx?: SxProps<Theme>;
714
- /** Custom styles for the error message */
715
- errorSx?: SxProps<Theme>;
716
- /** Custom styles for the helper text */
717
- helperTextSx?: SxProps<Theme>;
718
- /** Custom styles for the select icon */
719
- iconSx?: SxProps<Theme>;
720
- /** Custom component for the label */
721
- labelComponent?: ElementType;
722
- /** Custom component for the error message */
723
- errorComponent?: ElementType;
724
- /** Custom component for the helper text */
725
- helperTextComponent?: ElementType;
726
- /** Callback when the value changes */
727
- onChange?: (event: SelectChangeEvent$1<unknown>, child: ReactNode) => void;
728
- /** Callback when the menu opens */
729
- onOpen?: (event: React.SyntheticEvent) => void;
730
- /** Callback when the menu closes */
731
- onClose?: (event: React.SyntheticEvent) => void;
732
- /** Callback when the field is blurred */
733
- onBlur?: (event: React.FocusEvent) => void;
734
- /** Custom render function for the selected value */
735
- renderValue?: (value: unknown) => ReactNode;
736
- /** Custom render function for menu items */
737
- renderMenuItem?: (option: AppSelectOptions, index: number) => ReactNode;
738
- /** Custom props for the MenuProps */
739
- MenuProps?: any;
740
- /** Custom props for the input component */
741
- inputProps?: any;
742
- }
743
- declare const AppSelectInput: React$1.ForwardRefExoticComponent<Omit<AppSelectInputProps, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
477
+ onChange?: (value: string | number) => void;
478
+ }
479
+ interface AutocompleteSelectProps extends BaseSelectProps {
480
+ mode?: "autocomplete";
481
+ onSearchChange?: (query: string) => void;
482
+ searchDebounce?: number;
483
+ clearable?: boolean;
484
+ }
485
+ interface DropdownSelectProps extends BaseSelectProps {
486
+ mode: "dropdown";
487
+ onSearchChange?: never;
488
+ searchDebounce?: never;
489
+ clearable?: never;
490
+ }
491
+ type AppSelectInputProps = AutocompleteSelectProps | DropdownSelectProps;
492
+ declare const AppSelectInput: React__default.ForwardRefExoticComponent<AppSelectInputProps & React__default.RefAttributes<HTMLDivElement>>;
744
493
 
745
494
  interface AppSimpleUploadFileProps {
746
495
  name: string;
@@ -826,4 +575,4 @@ interface Props extends BoxProps {
826
575
  }
827
576
  declare const Iconify: React$1.ForwardRefExoticComponent<Omit<Props, "ref"> & React$1.RefAttributes<SVGElement>>;
828
577
 
829
- 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 };