@gnwebsoft/ui 4.0.0 → 4.0.2

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.
Files changed (56) hide show
  1. package/dist/chunk-BXF3QEBN.js +2181 -0
  2. package/dist/chunk-DS524L7W.cjs +467 -0
  3. package/dist/chunk-FYU2OIMD.js +15 -0
  4. package/dist/chunk-GHW77WIM.cjs +72 -0
  5. package/dist/chunk-GLN5JSFF.cjs +2181 -0
  6. package/dist/chunk-GVWCGJ3F.js +140 -0
  7. package/dist/chunk-LUW7V5GI.cjs +15 -0
  8. package/dist/chunk-M526GQZS.js +2490 -0
  9. package/dist/chunk-MULSVYFT.js +72 -0
  10. package/dist/chunk-MVPLBJRK.cjs +1 -1
  11. package/dist/chunk-PUQIPRL2.js +467 -0
  12. package/dist/chunk-QLQ6OH25.cjs +2490 -0
  13. package/dist/chunk-Y3QTSDLJ.cjs +140 -0
  14. package/dist/core/index.cjs +121 -0
  15. package/dist/core/index.js +121 -0
  16. package/dist/hooks/index.cjs +3 -3
  17. package/dist/hooks/index.js +1 -1
  18. package/dist/index.cjs +85 -7
  19. package/dist/index.js +147 -69
  20. package/dist/types/index.cjs +3 -3
  21. package/dist/types/index.js +1 -1
  22. package/dist/utils/index.cjs +4 -24
  23. package/dist/utils/index.js +6 -26
  24. package/dist/wrappers/index.cjs +7 -4
  25. package/dist/wrappers/index.js +21 -18
  26. package/package.json +22 -17
  27. package/dist/AsyncSelectPayload-B9-6l33R.d.cts +0 -10
  28. package/dist/AsyncSelectPayload-B9-6l33R.d.ts +0 -10
  29. package/dist/chunk-3OPVOWQK.js +0 -140
  30. package/dist/chunk-AEOF2TUF.cjs +0 -2273
  31. package/dist/chunk-ALHC7RLK.js +0 -575
  32. package/dist/chunk-BRRLB22L.js +0 -72
  33. package/dist/chunk-CHZU4PZB.js +0 -2273
  34. package/dist/chunk-EBRUE2WR.cjs +0 -493
  35. package/dist/chunk-HEHPKM4B.cjs +0 -140
  36. package/dist/chunk-K2EJ4YKO.cjs +0 -72
  37. package/dist/chunk-U6SDYCWF.js +0 -493
  38. package/dist/chunk-XY4U6A77.cjs +0 -575
  39. package/dist/components/index.cjs +0 -25
  40. package/dist/components/index.d.cts +0 -752
  41. package/dist/components/index.d.ts +0 -752
  42. package/dist/components/index.js +0 -25
  43. package/dist/enhanced-CDTkKUlj.d.ts +0 -134
  44. package/dist/enhanced-ZQoS03Cd.d.cts +0 -134
  45. package/dist/events-BcHVCLBz.d.cts +0 -77
  46. package/dist/events-BcHVCLBz.d.ts +0 -77
  47. package/dist/hooks/index.d.cts +0 -96
  48. package/dist/hooks/index.d.ts +0 -96
  49. package/dist/index.d.cts +0 -16
  50. package/dist/index.d.ts +0 -16
  51. package/dist/types/index.d.cts +0 -820
  52. package/dist/types/index.d.ts +0 -820
  53. package/dist/utils/index.d.cts +0 -683
  54. package/dist/utils/index.d.ts +0 -683
  55. package/dist/wrappers/index.d.cts +0 -1753
  56. package/dist/wrappers/index.d.ts +0 -1753
@@ -1,1753 +0,0 @@
1
- import * as react_jsx_runtime from 'react/jsx-runtime';
2
- import * as react_hook_form from 'react-hook-form';
3
- import { FieldValues, FieldPath, Control, FieldError, PathValue, UseControllerProps, UseControllerReturn, Path } from 'react-hook-form';
4
- import { GridProps, TextFieldVariants, SxProps, AutocompleteRenderInputParams, CheckboxProps, FormControlLabelProps, Theme, TextFieldProps, IconButtonProps, FormLabelProps, RadioProps, ChipTypeMap, AutocompleteProps, TextField } from '@mui/material';
5
- import * as React$1 from 'react';
6
- import React__default, { ReactNode, ChangeEvent } from 'react';
7
- import { E as EventOrValue } from '../events-BcHVCLBz.cjs';
8
- import { PickerValidDate, DateValidationError, PickerChangeHandlerContext, DatePickerSlotProps, DatePickerProps, TimeValidationError, TimePickerSlotProps, TimePickerProps } from '@mui/x-date-pickers';
9
- import { useLocalizationContext } from '@mui/x-date-pickers/internals';
10
- import { F as FieldType } from '../enhanced-ZQoS03Cd.cjs';
11
- import { A as AsyncSelectPayload } from '../AsyncSelectPayload-B9-6l33R.cjs';
12
-
13
- interface AsyncSelect2Payload {
14
- query: string | null;
15
- initialValues?: Array<string | number> | null;
16
- }
17
- interface Option2Item {
18
- value: string | number;
19
- label: string;
20
- [key: string]: unknown;
21
- }
22
- interface AsyncMultiSelect2Props<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
23
- name: TName;
24
- control?: Control<TFieldValues>;
25
- gridProps?: GridProps;
26
- placeholder?: string;
27
- label?: string;
28
- initialValues?: Array<string | number> | null;
29
- queryFn: (payload: AsyncSelect2Payload) => Promise<Option2Item[]>;
30
- variant?: TextFieldVariants;
31
- sx?: SxProps;
32
- disabled?: boolean;
33
- debounceMs?: number;
34
- loadingText?: string;
35
- noOptionsText?: string;
36
- renderInput?: (params: AutocompleteRenderInputParams) => React__default.ReactNode;
37
- }
38
-
39
- declare const AsyncMultiSelect2: {
40
- <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ gridProps, ...props }: AsyncMultiSelect2Props<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
41
- displayName: string;
42
- };
43
-
44
- /**
45
- * Props for the CheckboxElement component.
46
- *
47
- * @template TFieldValues - The form values type
48
- * @template TName - The field name type
49
- *
50
- * @public
51
- */
52
- interface CheckboxElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<CheckboxProps, "name" | "checked" | "value" | "onChange"> {
53
- /**
54
- * The field name in the form
55
- * @example "acceptTerms" | "user.isActive"
56
- */
57
- name: TName;
58
- /**
59
- * The form control instance from react-hook-form
60
- */
61
- control?: Control<TFieldValues>;
62
- /**
63
- * Label text to display next to the checkbox
64
- * @example "I agree to the terms and conditions"
65
- */
66
- label?: FormControlLabelProps["label"];
67
- /**
68
- * Additional props for the FormControlLabel component
69
- */
70
- labelProps?: Omit<FormControlLabelProps, "label" | "control">;
71
- /**
72
- * Grid layout props for the wrapper Grid component
73
- * @defaultValue { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } }
74
- */
75
- gridProps?: GridProps;
76
- /**
77
- * Helper text to display below the checkbox
78
- */
79
- helperText?: ReactNode;
80
- /**
81
- * Custom error parser function
82
- * @param error - The field error from react-hook-form
83
- * @returns Formatted error message
84
- */
85
- parseError?: (error: FieldError) => ReactNode;
86
- /**
87
- * Value transformation functions for custom data handling.
88
- *
89
- * The component expects boolean values by default.
90
- * Use transform functions for custom conversion logic when working with non-boolean form data.
91
- */
92
- transform?: {
93
- /**
94
- * Transform the field value for display in the checkbox.
95
- * If not provided, the value is converted to boolean using !!value.
96
- * @param value - The current field value
97
- * @returns The transformed boolean value for checkbox display
98
- */
99
- input?: (value: PathValue<TFieldValues, TName>) => boolean;
100
- /**
101
- * Transform the checkbox change event back to the desired field value.
102
- * If not provided, the boolean checked state is used directly.
103
- * @param event - The checkbox change event
104
- * @param checked - The new checked state
105
- * @returns The transformed value to store in the form
106
- */
107
- output?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => PathValue<TFieldValues, TName>;
108
- };
109
- /**
110
- * Custom onChange handler that works alongside the form controller
111
- * @param event - The checkbox change event
112
- * @param checked - The new checked state
113
- */
114
- onChange?: (event: React.ChangeEvent<HTMLInputElement>, checked: boolean) => void;
115
- /**
116
- * Custom sx props for styling
117
- */
118
- sx?: SxProps<Theme>;
119
- }
120
-
121
- /**
122
- * A react-hook-form integrated Checkbox component with automatic validation and grid layout.
123
- *
124
- * This component provides a fully integrated checkbox input that works seamlessly with react-hook-form,
125
- * including automatic validation, error handling, value transformation, and optional Grid wrapper for responsive layouts.
126
- *
127
- * Features:
128
- * - Full react-hook-form integration with useController
129
- * - Automatic error display with custom parsing support
130
- * - Value transformation with useTransform hook for boolean values
131
- * - Customizable label and positioning
132
- * - Grid layout wrapper with responsive design
133
- * - TypeScript type safety with generic constraints
134
- * - Disabled state support with proper theming
135
- * - Helper text support for additional context
136
- * - Custom error parsing for internationalization
137
- * - Simple boolean value handling with optional custom transforms
138
- *
139
- * @example
140
- * Basic usage:
141
- * ```tsx
142
- * <CheckboxElement
143
- * control={control}
144
- * name="acceptTerms"
145
- * label="I agree to the terms and conditions"
146
- * />
147
- * ```
148
- *
149
- * @example
150
- * With validation and helper text:
151
- * ```tsx
152
- * <CheckboxElement
153
- * control={control}
154
- * name="newsletter"
155
- * label="Subscribe to newsletter"
156
- * helperText="You can unsubscribe at any time"
157
- * rules={{ required: 'Please accept to continue' }}
158
- * />
159
- * ```
160
- *
161
- * @example
162
- * Custom grid layout and styling:
163
- * ```tsx
164
- * <CheckboxElement
165
- * control={control}
166
- * name="isPublic"
167
- * label="Make this public"
168
- * gridProps={{ size: { xs: 12, md: 6 } }}
169
- * labelProps={{ sx: { fontWeight: 'bold' } }}
170
- * sx={{ color: 'primary.main' }}
171
- * />
172
- * ```
173
- *
174
- * @example
175
- * With value transformation (string to boolean):
176
- * ```tsx
177
- * <CheckboxElement
178
- * control={control}
179
- * name="status"
180
- * label="Active"
181
- * transform={{
182
- * input: (value) => value === 'active',
183
- * output: (checked) => checked ? 'active' : 'inactive'
184
- * }}
185
- * />
186
- * ```
187
- *
188
- * @example
189
- * Simple boolean field:
190
- * ```tsx
191
- * <CheckboxElement
192
- * control={control}
193
- * name="isEnabled"
194
- * label="Enable feature"
195
- * />
196
- * ```
197
- *
198
- * @example
199
- * Custom error parsing for internationalization:
200
- * ```tsx
201
- * <CheckboxElement
202
- * control={control}
203
- * name="terms"
204
- * label="Accept Terms"
205
- * parseError={(error) => t(`validation.${error.type}`, { field: 'Terms' })}
206
- * />
207
- * ```
208
- *
209
- * @template TFieldValues - The form values type
210
- * @template TName - The field name type
211
- *
212
- * @param props - Component props
213
- * @returns React element with optional Grid wrapper
214
- *
215
- * @public
216
- */
217
- declare const CheckboxElement: {
218
- <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ gridProps, ...props }: CheckboxElementProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
219
- displayName: string;
220
- };
221
-
222
- type CheckboxGroupProps$1<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends number[] = number[]> = Omit<CheckboxProps, "name"> & {
223
- name: TName;
224
- control?: Control<TFieldValues>;
225
- label?: FormControlLabelProps["label"];
226
- labelProps?: Omit<FormControlLabelProps, "label" | "control">;
227
- gridProps?: GridProps;
228
- options: Array<{
229
- Value: number;
230
- Label: string;
231
- }>;
232
- };
233
- declare const CheckboxGroup: {
234
- <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends number[] = number[]>({ gridProps, ...props }: CheckboxGroupProps$1<TFieldValues, TName, TValue>): react_jsx_runtime.JSX.Element;
235
- displayName: string;
236
- };
237
-
238
- type PrimitiveValue$2 = string | number | boolean;
239
- type OptionObject$2<TValueKey extends string = string, TLabelKey extends string = string, TDisabledKey extends string = string> = Record<TValueKey, PrimitiveValue$2> & Record<TLabelKey, string> & Partial<Record<TDisabledKey, boolean>> & Record<string, unknown>;
240
- /**
241
- * Props for the CheckboxGroup component.
242
- *
243
- * @template TFieldValues - The form values type
244
- * @template TName - The field name type
245
- * @template TOption - The option object type
246
- * @template TValueKey - The key for option values
247
- * @template TLabelKey - The key for option labels
248
- * @template TDisabledKey - The key for option disabled state
249
- *
250
- * @public
251
- */
252
- interface CheckboxGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TOption extends OptionObject$2<TValueKey, TLabelKey, TDisabledKey> = OptionObject$2, TValueKey extends keyof TOption & string = "Value", TLabelKey extends keyof TOption & string = "Label", TDisabledKey extends keyof TOption & string = "disabled"> extends Omit<CheckboxProps, "name" | "checked" | "value" | "onChange"> {
253
- /**
254
- * The field name in the form
255
- * @example "selectedItems" | "user.preferences"
256
- */
257
- name: TName;
258
- /**
259
- * The form control instance from react-hook-form
260
- */
261
- control?: Control<TFieldValues>;
262
- /**
263
- * Array of options to display as checkboxes
264
- */
265
- options: TOption[];
266
- /**
267
- * Label text to display above the checkbox group
268
- * @example "Select your preferences"
269
- */
270
- label?: ReactNode;
271
- /**
272
- * Additional props for each FormControlLabel component
273
- */
274
- labelProps?: Omit<FormControlLabelProps, "label" | "control">;
275
- /**
276
- * Grid layout props for the wrapper Grid component
277
- * @defaultValue { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } }
278
- */
279
- gridProps?: GridProps;
280
- /**
281
- * Helper text to display below the checkbox group
282
- */
283
- helperText?: ReactNode;
284
- /**
285
- * Custom error parser function
286
- * @param error - The field error from react-hook-form
287
- * @returns Formatted error message
288
- */
289
- parseError?: (error: FieldError) => ReactNode;
290
- /**
291
- * Key in the option object that contains the value
292
- * @defaultValue "Value"
293
- */
294
- valueKey?: TValueKey;
295
- /**
296
- * Key in the option object that contains the label
297
- * @defaultValue "Label"
298
- */
299
- labelKey?: TLabelKey;
300
- /**
301
- * Key in the option object that contains the disabled state
302
- * @defaultValue "disabled"
303
- */
304
- disabledKey?: TDisabledKey;
305
- /**
306
- * Whether to display checkboxes in a single row
307
- * @defaultValue false
308
- */
309
- row?: boolean;
310
- /**
311
- * Value transformation functions for custom data handling
312
- * Supports arrays of string, boolean, or number values
313
- */
314
- transform?: {
315
- /**
316
- * Transform the field value for display in the checkboxes
317
- * @param value - The current field value (array of values)
318
- * @returns The transformed value to display
319
- */
320
- input?: (value: PathValue<TFieldValues, TName>) => Array<TOption[TValueKey]>;
321
- /**
322
- * Transform the checkbox selections back to the field value
323
- * @param selectedValues - Array of selected option values
324
- * @returns The transformed value to store in the form
325
- */
326
- output?: (eventOrValue: EventOrValue<PathValue<TFieldValues, TName>>, value?: PathValue<TFieldValues, TName>) => PathValue<TFieldValues, TName>;
327
- };
328
- /**
329
- * Custom onChange handler that works alongside the form controller
330
- * @param selectedValues - Array of selected option values
331
- * @param selectedOptions - Array of selected option objects
332
- */
333
- onChange?: (selectedValues: Array<TOption[TValueKey]>, selectedOptions: TOption[]) => void;
334
- /**
335
- * Custom sx props for styling
336
- */
337
- sx?: SxProps<Theme>;
338
- }
339
-
340
- /**
341
- * Branded type for validated date values to ensure type safety
342
- * @template TDate - The date type (from date adapter)
343
- */
344
- type ValidatedDate<TDate extends PickerValidDate = PickerValidDate> = TDate & {
345
- readonly __brand: 'ValidatedDate';
346
- };
347
- /**
348
- * Transformation functions for date values with strict typing
349
- * @template TFieldValues - The form values type
350
- * @template TName - The field name type
351
- * @template TValue - The transformed value type
352
- */
353
- interface DateTransform<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate> {
354
- /**
355
- * Transform the stored field value for display in the date picker
356
- * @param value - The current field value from react-hook-form
357
- * @returns The transformed value to display in the picker
358
- */
359
- input?: (value: PathValue<TFieldValues, TName>) => TValue | null;
360
- /**
361
- * Transform the picker value back to the form field value
362
- * @param value - The selected date value from the picker
363
- * @param context - Additional context from the picker change handler
364
- * @returns The transformed value to store in the form
365
- */
366
- output?: (value: TValue | null, context: PickerChangeHandlerContext<DateValidationError>) => PathValue<TFieldValues, TName>;
367
- }
368
- /**
369
- * Configuration options for date picker validation
370
- * @template TDate - The date type (from date adapter)
371
- */
372
- interface DatePickerValidationConfig<TDate extends PickerValidDate = PickerValidDate> {
373
- /** Minimum allowed date */
374
- minDate?: TDate;
375
- /** Maximum allowed date */
376
- maxDate?: TDate;
377
- /** Function to disable specific dates */
378
- shouldDisableDate?: (date: TDate) => boolean;
379
- /** Custom validation error messages */
380
- errorMessages?: {
381
- invalidDate?: string;
382
- minDate?: string;
383
- maxDate?: string;
384
- disabledDate?: string;
385
- };
386
- }
387
- /**
388
- * Slot props for customizing date picker subcomponents with strict typing
389
- * @template TEnableAccessibleFieldDOMStructure - Whether accessible field DOM structure is enabled
390
- */
391
- interface TypedDatePickerSlotProps<TEnableAccessibleFieldDOMStructure extends boolean = false> extends Omit<DatePickerSlotProps<TEnableAccessibleFieldDOMStructure>, "textField"> {
392
- textField?: Partial<TextFieldProps> & {
393
- /** Custom input component */
394
- InputComponent?: React.ComponentType<any>;
395
- /** Additional input props with type safety */
396
- inputProps?: TextFieldProps["inputProps"] & Record<string, unknown>;
397
- };
398
- }
399
- /**
400
- * Core props for the DatePickerElement component with enhanced type safety
401
- * @template TFieldValues - The form values type
402
- * @template TName - The field name type
403
- * @template TValue - The transformed value type
404
- * @template TEnableAccessibleFieldDOMStructure - Whether accessible field DOM structure is enabled
405
- */
406
- interface DatePickerElementCoreProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> {
407
- /**
408
- * The field name in the form - must be a valid path in TFieldValues
409
- * @example "birthDate" | "user.dateOfBirth" | "settings.startDate"
410
- */
411
- name: TName;
412
- /**
413
- * Whether the field is required for form validation
414
- * @defaultValue false
415
- */
416
- required?: boolean;
417
- /**
418
- * Validation rules for react-hook-form with type-safe field reference
419
- */
420
- rules?: UseControllerProps<TFieldValues, TName>["rules"];
421
- /**
422
- * The form control instance from useForm() hook
423
- */
424
- control?: Control<TFieldValues>;
425
- /**
426
- * Custom error message parser with proper typing for both form and date validation errors
427
- * @param error - The validation error (either from react-hook-form or date picker)
428
- * @returns Custom error message or React component
429
- */
430
- parseError?: (error: FieldError | DateValidationError) => ReactNode;
431
- /**
432
- * Value transformation functions for converting between form and picker formats
433
- */
434
- transform?: DateTransform<TFieldValues, TName, TValue>;
435
- /**
436
- * Validation configuration specific to date selection
437
- */
438
- validation?: DatePickerValidationConfig<TValue>;
439
- /**
440
- * The input label with support for React nodes
441
- * @example "Select Date" | <span>Birth Date <em>(required)</em></span>
442
- */
443
- label?: ReactNode;
444
- /**
445
- * Placeholder text for the input field
446
- * @example "MM/DD/YYYY" | "Select a date..."
447
- */
448
- placeholder?: string;
449
- /**
450
- * Whether the text input should be read-only (picker interaction only)
451
- * @defaultValue false
452
- */
453
- textReadOnly?: boolean;
454
- /**
455
- * Helper text to display below the input field
456
- */
457
- helperText?: TextFieldProps["helperText"];
458
- /**
459
- * Props for the underlying TextField component
460
- */
461
- inputProps?: Omit<TextFieldProps, "name" | "value" | "onChange" | "error" | "helperText">;
462
- /**
463
- * Props for customizing date picker slots and subcomponents
464
- */
465
- slotProps?: TypedDatePickerSlotProps<TEnableAccessibleFieldDOMStructure>;
466
- /**
467
- * Props for the underlying DatePicker component
468
- */
469
- datePickerProps?: Omit<DatePickerProps<TEnableAccessibleFieldDOMStructure>, "value" | "onChange" | "slotProps" | "name">;
470
- /**
471
- * The TextField variant to use
472
- * @defaultValue "outlined"
473
- */
474
- variant?: TextFieldVariants;
475
- /**
476
- * Custom styles for the date picker with theme-aware typing
477
- */
478
- sx?: SxProps<Theme>;
479
- /**
480
- * Whether the component is in a loading state
481
- * @defaultValue false
482
- */
483
- loading?: boolean;
484
- /**
485
- * Custom loading indicator component
486
- */
487
- LoadingComponent?: React.ComponentType;
488
- }
489
- /**
490
- * Props for the grid wrapper functionality
491
- */
492
- interface DatePickerElementGridProps {
493
- /**
494
- * Grid layout configuration for the wrapper Grid component
495
- * @defaultValue { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } }
496
- */
497
- gridProps?: GridProps | false;
498
- }
499
- /**
500
- * Complete props interface for DatePickerElement combining core and grid props
501
- * @template TFieldValues - The form values type
502
- * @template TName - The field name type
503
- * @template TValue - The transformed value type
504
- * @template TEnableAccessibleFieldDOMStructure - Whether accessible field DOM structure is enabled
505
- */
506
- interface DatePickerElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> extends DatePickerElementCoreProps<TFieldValues, TName, TValue, TEnableAccessibleFieldDOMStructure>, DatePickerElementGridProps {
507
- }
508
- /**
509
- * Return type for date picker hooks with strict typing
510
- * @template TFieldValues - The form values type
511
- * @template TName - The field name type
512
- * @template TValue - The transformed value type
513
- */
514
- interface DatePickerHookReturn<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate> {
515
- /** The current transformed value for the picker */
516
- value: TValue | null;
517
- /** Change handler with proper typing */
518
- onChange: (value: TValue | null, context: PickerChangeHandlerContext<DateValidationError>) => void;
519
- /** Current validation error if any */
520
- error: FieldError | DateValidationError | undefined;
521
- /** Whether the field has an error */
522
- hasError: boolean;
523
- /** Formatted error message for display */
524
- errorMessage: ReactNode;
525
- }
526
-
527
- /**
528
- * A fully-featured, type-safe DatePickerElement component for react-hook-form integration.
529
- *
530
- * This component combines the core date picker functionality with optional Grid layout wrapping,
531
- * providing a complete solution for form-based date selection with comprehensive TypeScript support.
532
- *
533
- * Key Features:
534
- * - 🎯 **Type Safety**: Full TypeScript inference for form field types and date values
535
- * - 🔧 **React Hook Form Integration**: Seamless integration with react-hook-form validation
536
- * - 🎨 **Theming**: Automatic adaptation to MUI theme with customizable styles
537
- * - ♿ **Accessibility**: WCAG-compliant with proper ARIA attributes and keyboard navigation
538
- * - 🚀 **Performance**: Optimized with memoization and efficient re-rendering
539
- * - 📱 **Responsive**: Built-in Grid layout with configurable breakpoints
540
- * - 🛡️ **Validation**: Comprehensive validation with custom error messages
541
- * - 🔄 **Transformation**: Flexible value transformation between form and picker formats
542
- * - 📚 **Developer Experience**: Rich TypeScript IntelliSense and comprehensive documentation
543
- *
544
- * @example
545
- * Basic usage with automatic Grid wrapper:
546
- * ```tsx
547
- * import { useForm } from 'react-hook-form';
548
- * import { DatePickerElement } from '@gnwebsoft/ui/wrappers';
549
- *
550
- * function MyForm() {
551
- * const { control } = useForm<{ birthDate: string }>();
552
- *
553
- * return (
554
- * <DatePickerElement
555
- * name="birthDate"
556
- * control={control}
557
- * label="Date of Birth"
558
- * required
559
- * />
560
- * );
561
- * }
562
- * ```
563
- *
564
- * @example
565
- * Advanced usage with custom transformation and validation:
566
- * ```tsx
567
- * function AdvancedForm() {
568
- * const { control } = useForm<{ startDate: Date }>();
569
- *
570
- * return (
571
- * <DatePickerElement
572
- * name="startDate"
573
- * control={control}
574
- * label="Project Start Date"
575
- * transform={{
576
- * input: (dateString) => dateString ? new Date(dateString) : null,
577
- * output: (date) => date ? date.toISOString() : null
578
- * }}
579
- * validation={{
580
- * minDate: new Date(),
581
- * maxDate: addYears(new Date(), 2),
582
- * errorMessages: {
583
- * minDate: 'Start date must be today or later',
584
- * maxDate: 'Start date cannot be more than 2 years in the future'
585
- * }
586
- * }}
587
- * gridProps={{ size: { xs: 12, md: 6 } }}
588
- * sx={{
589
- * '& .MuiInputLabel-root': {
590
- * fontWeight: 'bold'
591
- * }
592
- * }}
593
- * />
594
- * );
595
- * }
596
- * ```
597
- *
598
- * @example
599
- * Without Grid wrapper for custom layouts:
600
- * ```tsx
601
- * function CustomLayout() {
602
- * const { control } = useForm<{ eventDate: string }>();
603
- *
604
- * return (
605
- * <Box display="flex" gap={2}>
606
- * <DatePickerElement
607
- * name="eventDate"
608
- * control={control}
609
- * label="Event Date"
610
- * gridProps={false} // Disables Grid wrapper
611
- * />
612
- * <Button type="submit">Submit</Button>
613
- * </Box>
614
- * );
615
- * }
616
- * ```
617
- *
618
- * @example
619
- * With loading state and custom error handling:
620
- * ```tsx
621
- * function LoadingForm() {
622
- * const { control } = useForm();
623
- * const [isValidating, setIsValidating] = useState(false);
624
- *
625
- * return (
626
- * <DatePickerElement
627
- * name="appointmentDate"
628
- * control={control}
629
- * label="Appointment Date"
630
- * loading={isValidating}
631
- * LoadingComponent={() => <CircularProgress size={20} />}
632
- * parseError={(error) => {
633
- * if (typeof error === 'object' && error?.type === 'custom') {
634
- * return 'This date conflicts with another appointment';
635
- * }
636
- * return error.message || 'Please select a valid date';
637
- * }}
638
- * />
639
- * );
640
- * }
641
- * ```
642
- *
643
- * @template TFieldValues - The form values type (inferred from control)
644
- * @template TName - The field name type (inferred from name prop)
645
- * @template TValue - The transformed value type (inferred from transform functions)
646
- * @template TEnableAccessibleFieldDOMStructure - Whether accessible field DOM structure is enabled
647
- *
648
- * @param props - Component props with full TypeScript inference
649
- * @param ref - Forward ref for the root element (Grid or DatePicker container)
650
- * @returns Rendered DatePickerElement component with optional Grid wrapper
651
- */
652
- declare const DatePickerElement: React__default.ForwardRefExoticComponent<DatePickerElementProps<any, any, any, any> & React__default.RefAttributes<HTMLDivElement>>;
653
-
654
- /**
655
- * The core DatePickerElement component without Grid wrapper.
656
- *
657
- * This is a lightweight, performant date picker component that integrates seamlessly
658
- * with react-hook-form while providing comprehensive TypeScript support and
659
- * accessibility features.
660
- *
661
- * Features:
662
- * - Full TypeScript inference for form field types
663
- * - Automatic value transformation between form and picker formats
664
- * - Comprehensive validation with custom error messages
665
- * - Theme-aware styling with accessibility support
666
- * - Performance optimized with proper memoization
667
- * - Forward ref support for advanced use cases
668
- *
669
- * @example
670
- * Basic usage:
671
- * ```tsx
672
- * <DatePickerElementCore
673
- * name="birthDate"
674
- * control={control}
675
- * label="Date of Birth"
676
- * required
677
- * />
678
- * ```
679
- *
680
- * @example
681
- * With custom transformation:
682
- * ```tsx
683
- * <DatePickerElementCore
684
- * name="startDate"
685
- * control={control}
686
- * label="Start Date"
687
- * transform={{
688
- * input: (dateString) => dateString ? new Date(dateString) : null,
689
- * output: (date) => date ? date.toISOString() : null
690
- * }}
691
- * validation={{
692
- * minDate: new Date(),
693
- * errorMessages: {
694
- * minDate: 'Start date must be today or later'
695
- * }
696
- * }}
697
- * />
698
- * ```
699
- *
700
- * @template TFieldValues - The form values type
701
- * @template TName - The field name type
702
- * @template TValue - The transformed value type
703
- * @template TEnableAccessibleFieldDOMStructure - Whether accessible field DOM structure is enabled
704
- */
705
- declare const DatePickerElementCore: React__default.ForwardRefExoticComponent<DatePickerElementCoreProps<any, any, any, any> & React__default.RefAttributes<HTMLDivElement>>;
706
-
707
- /**
708
- * Type-safe date value reader that handles string to date conversion
709
- * @template TDate - The date type from the date adapter
710
- * @param adapter - The localization context from MUI date pickers
711
- * @param value - The value to convert (string, date, or null)
712
- * @returns Properly typed date value or null
713
- */
714
- declare function readDatePickerValueAsDate<TDate extends PickerValidDate>(adapter: ReturnType<typeof useLocalizationContext>, value: string | null | TDate | undefined): TDate | null;
715
- /**
716
- * Options for the useDatePickerValue hook
717
- * @template TFieldValues - The form values type
718
- * @template TName - The field name type
719
- * @template TValue - The transformed value type
720
- */
721
- interface UseDatePickerValueOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate> {
722
- /** The field controller from react-hook-form */
723
- field: UseControllerReturn<TFieldValues, TName>["field"];
724
- /** Optional transformation functions */
725
- transform?: DateTransform<TFieldValues, TName, TValue>;
726
- }
727
- /**
728
- * Return type for the useDatePickerValue hook
729
- * @template TValue - The transformed value type
730
- */
731
- interface UseDatePickerValueReturn<TValue extends PickerValidDate = PickerValidDate> {
732
- /** The transformed value for display in the picker */
733
- value: TValue | null;
734
- /** Change handler for picker value updates */
735
- onChange: (value: TValue | null, context: PickerChangeHandlerContext<DateValidationError>) => void;
736
- }
737
- /**
738
- * Hook for managing date picker value transformations with type safety
739
- *
740
- * This hook handles the conversion between form field values and date picker values,
741
- * applying custom transformations while maintaining strict TypeScript typing.
742
- *
743
- * @example
744
- * Basic usage with string to date conversion:
745
- * ```tsx
746
- * const { value, onChange } = useDatePickerValue({
747
- * field,
748
- * transform: {
749
- * input: (dateString) => dateString ? new Date(dateString) : null,
750
- * output: (date) => date ? date.toISOString() : null
751
- * }
752
- * });
753
- * ```
754
- *
755
- * @example
756
- * Usage with Day.js dates:
757
- * ```tsx
758
- * const { value, onChange } = useDatePickerValue({
759
- * field,
760
- * transform: {
761
- * input: (dateString) => dateString ? dayjs(dateString) : null,
762
- * output: (date) => date ? date.format('YYYY-MM-DD') : null
763
- * }
764
- * });
765
- * ```
766
- *
767
- * @template TFieldValues - The form values type
768
- * @template TName - The field name type
769
- * @template TValue - The transformed value type
770
- * @param options - Configuration options for value transformation
771
- * @returns Object with transformed value and change handler
772
- */
773
- declare function useDatePickerValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate>(options: UseDatePickerValueOptions<TFieldValues, TName, TValue>): UseDatePickerValueReturn<TValue>;
774
-
775
- /**
776
- * Options for the useDatePickerValidation hook
777
- * @template TFieldValues - The form values type
778
- * @template TName - The field name type
779
- * @template TValue - The transformed value type
780
- */
781
- interface UseDatePickerValidationOptions<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate> {
782
- /** The field state from react-hook-form controller */
783
- fieldState: UseControllerReturn<TFieldValues, TName>["fieldState"];
784
- /** Validation configuration for the date picker */
785
- validation?: DatePickerValidationConfig<TValue>;
786
- /** Custom error message parser */
787
- parseError?: (error: FieldError | DateValidationError) => ReactNode;
788
- /** The current date value for validation */
789
- value?: TValue | null;
790
- }
791
- /**
792
- * Return type for the useDatePickerValidation hook
793
- */
794
- interface UseDatePickerValidationReturn {
795
- /** Whether the field has any validation errors */
796
- hasError: boolean;
797
- /** The current validation error (form or date-specific) */
798
- error: FieldError | DateValidationError | undefined;
799
- /** Formatted error message for display */
800
- errorMessage: ReactNode;
801
- /** Whether the field is in an invalid state */
802
- invalid: boolean;
803
- }
804
- /**
805
- * Hook for managing date picker validation with comprehensive error handling
806
- *
807
- * This hook centralizes validation logic for date pickers, handling both
808
- * react-hook-form validation errors and date-specific validation errors
809
- * from MUI date pickers.
810
- *
811
- * @example
812
- * Basic usage with form validation:
813
- * ```tsx
814
- * const { hasError, errorMessage, invalid } = useDatePickerValidation({
815
- * fieldState,
816
- * validation: {
817
- * minDate: dayjs().subtract(1, 'year'),
818
- * maxDate: dayjs().add(1, 'year'),
819
- * errorMessages: {
820
- * minDate: 'Date must be within the last year',
821
- * maxDate: 'Date cannot be more than 1 year in the future'
822
- * }
823
- * }
824
- * });
825
- * ```
826
- *
827
- * @example
828
- * Usage with custom error parser:
829
- * ```tsx
830
- * const { hasError, errorMessage } = useDatePickerValidation({
831
- * fieldState,
832
- * parseError: (error) => {
833
- * if (typeof error === 'string') {
834
- * return `Date Error: ${error}`;
835
- * }
836
- * return error.message || 'Invalid date';
837
- * }
838
- * });
839
- * ```
840
- *
841
- * @template TFieldValues - The form values type
842
- * @template TName - The field name type
843
- * @template TValue - The transformed value type
844
- * @param options - Validation configuration options
845
- * @returns Validation state and error information
846
- */
847
- declare function useDatePickerValidation<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate>(options: UseDatePickerValidationOptions<TFieldValues, TName, TValue>): UseDatePickerValidationReturn;
848
-
849
- /**
850
- * Options for the useDatePickerStyles hook
851
- */
852
- interface UseDatePickerStylesOptions {
853
- /** Whether the component is disabled */
854
- disabled?: boolean;
855
- /** Whether the component has a validation error */
856
- hasError?: boolean;
857
- /** Whether the component is in loading state */
858
- loading?: boolean;
859
- /** Whether the text input is read-only */
860
- textReadOnly?: boolean;
861
- /** Custom styles to merge with defaults */
862
- sx?: SxProps<Theme>;
863
- }
864
- /**
865
- * Return type for the useDatePickerStyles hook
866
- */
867
- interface UseDatePickerStylesReturn {
868
- /** Computed styles for the date picker component */
869
- sx: SxProps<Theme>;
870
- /** Additional class names for styling */
871
- className?: string;
872
- }
873
- /**
874
- * Hook for managing theme-aware date picker styles with consistent design system integration
875
- *
876
- * This hook provides optimized, memoized styles for date picker components that automatically
877
- * adapt to the current MUI theme and component state (disabled, error, loading, etc.).
878
- * It ensures consistent styling across all date picker instances while allowing customization.
879
- *
880
- * @example
881
- * Basic usage:
882
- * ```tsx
883
- * const { sx } = useDatePickerStyles({
884
- * disabled: isDisabled,
885
- * hasError: !!error,
886
- * loading: isLoading
887
- * });
888
- *
889
- * return <DatePicker sx={sx} ... />;
890
- * ```
891
- *
892
- * @example
893
- * With custom styles:
894
- * ```tsx
895
- * const { sx } = useDatePickerStyles({
896
- * hasError: !!error,
897
- * sx: {
898
- * '& .MuiInputLabel-root': {
899
- * color: 'primary.main'
900
- * }
901
- * }
902
- * });
903
- * ```
904
- *
905
- * @param options - Style configuration options
906
- * @returns Computed styles and class names
907
- */
908
- declare function useDatePickerStyles(options?: UseDatePickerStylesOptions): UseDatePickerStylesReturn;
909
-
910
- /**
911
- * Utility type for creating branded date types to prevent mixing different date formats
912
- * @template TDate - The base date type
913
- * @template TBrand - The brand string for type safety
914
- */
915
- type BrandedDate<TDate extends PickerValidDate, TBrand extends string> = TDate & {
916
- readonly __brand: TBrand;
917
- };
918
- /**
919
- * Type guard to check if a value is a valid date
920
- * @param value - The value to check
921
- * @returns True if the value is a valid date-like object
922
- */
923
- declare function isValidDate(value: unknown): value is PickerValidDate;
924
- /**
925
- * Type guard to check if a value is a string that can be parsed as a date
926
- * @param value - The value to check
927
- * @returns True if the value is a parseable date string
928
- */
929
- declare function isParsableDateString(value: unknown): value is string;
930
- /**
931
- * Creates a type-safe date transformation function that converts form values to date picker values
932
- * @template TFieldValues - The form values type
933
- * @template TName - The field name type
934
- * @template TDate - The date type used by the picker
935
- * @param adapter - The date adapter from MUI localization context
936
- * @returns A transformation function that safely converts form values to dates
937
- */
938
- declare function createDateInputTransform<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>, TDate extends PickerValidDate = PickerValidDate>(adapter: ReturnType<typeof useLocalizationContext>): (value: PathValue<TFieldValues, TName>) => TDate | null;
939
- /**
940
- * Creates a type-safe date transformation function that converts date picker values back to form values
941
- * @template TFieldValues - The form values type
942
- * @template TName - The field name type
943
- * @template TDate - The date type used by the picker
944
- * @param format - The format to use for string conversion (optional)
945
- * @returns A transformation function that safely converts dates to form values
946
- */
947
- declare function createDateOutputTransform<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>, TDate extends PickerValidDate = PickerValidDate>(format?: string): (value: TDate | null) => PathValue<TFieldValues, TName>;
948
- /**
949
- * Utility function to create default date picker configuration
950
- * @template TDate - The date type
951
- * @returns Default configuration object
952
- */
953
- declare function createDefaultDatePickerConfig<TDate extends PickerValidDate = PickerValidDate>(): {
954
- readonly slotProps: {
955
- readonly actionBar: {
956
- readonly actions: readonly ["clear", "today", "cancel", "accept"];
957
- };
958
- readonly textField: {
959
- readonly fullWidth: true;
960
- readonly variant: "outlined";
961
- };
962
- };
963
- readonly gridProps: {
964
- readonly size: {
965
- readonly xs: 12;
966
- readonly sm: 12;
967
- readonly md: 12;
968
- readonly lg: 12;
969
- readonly xl: 12;
970
- };
971
- };
972
- readonly validation: {
973
- readonly errorMessages: {
974
- readonly invalidDate: "Please enter a valid date";
975
- readonly minDate: "Date must be after the minimum allowed date";
976
- readonly maxDate: "Date must be before the maximum allowed date";
977
- readonly disabledDate: "This date is not allowed";
978
- };
979
- };
980
- };
981
- /**
982
- * Utility to safely extract error message from various error types
983
- * @param error - The error object (could be from react-hook-form or MUI date picker)
984
- * @returns A user-friendly error message string
985
- */
986
- declare function extractErrorMessage(error: unknown): string;
987
- /**
988
- * Performance utility to create stable references for complex props
989
- * This helps prevent unnecessary re-renders when using complex configuration objects
990
- * @template T - The type of the configuration object
991
- * @param config - The configuration object
992
- * @returns A JSON string that can be used as a dependency in useMemo/useCallback
993
- */
994
- declare function createStableKey<T extends Record<string, unknown>>(config: T): string;
995
-
996
- /**
997
- * Props for the PasswordElement component.
998
- *
999
- * @template TFieldValues - The form values type
1000
- * @template TName - The field name type
1001
- * @template TValue - The value type
1002
- *
1003
- * @public
1004
- */
1005
- type PasswordElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown> = Omit<TextFieldProps, "name"> & {
1006
- /**
1007
- * The field name in the form
1008
- * @example "password" | "user.currentPassword"
1009
- */
1010
- name: TName;
1011
- /**
1012
- * The form control instance from react-hook-form
1013
- */
1014
- control?: Control<TFieldValues>;
1015
- /**
1016
- * Color of the visibility toggle icon button
1017
- * @defaultValue "default"
1018
- */
1019
- iconColor?: IconButtonProps["color"];
1020
- /**
1021
- * Custom render function for the visibility toggle icon
1022
- * @param password - Whether password is currently hidden
1023
- * @returns ReactNode to render as the icon
1024
- * @defaultValue Default visibility/visibility-off icons
1025
- */
1026
- renderIcon?: (password: boolean) => ReactNode;
1027
- /**
1028
- * Grid layout props for the wrapper Grid component
1029
- * @defaultValue { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } }
1030
- */
1031
- gridProps?: GridProps;
1032
- };
1033
- /**
1034
- * A react-hook-form integrated password TextField with show/hide functionality.
1035
- *
1036
- * This component provides a fully integrated password input that works seamlessly with react-hook-form,
1037
- * including automatic validation, error handling, and a built-in visibility toggle button. The password
1038
- * can be shown or hidden by clicking the eye icon in the input's end adornment.
1039
- *
1040
- * Features:
1041
- * - Full react-hook-form integration
1042
- * - Password visibility toggle
1043
- * - Automatic error display
1044
- * - Customizable visibility icons
1045
- * - Grid layout wrapper
1046
- * - TypeScript type safety
1047
- * - Disabled state support
1048
- *
1049
- * @example
1050
- * Basic usage:
1051
- * ```tsx
1052
- * <PasswordElement
1053
- * control={control}
1054
- * name="password"
1055
- * label="Password"
1056
- * rules={{
1057
- * required: 'Password is required',
1058
- * minLength: { value: 8, message: 'Minimum 8 characters' }
1059
- * }}
1060
- * />
1061
- * ```
1062
- *
1063
- * @example
1064
- * With custom icon color:
1065
- * ```tsx
1066
- * <PasswordElement
1067
- * control={control}
1068
- * name="confirmPassword"
1069
- * label="Confirm Password"
1070
- * iconColor="primary"
1071
- * placeholder="Re-enter your password"
1072
- * />
1073
- * ```
1074
- *
1075
- * @example
1076
- * Custom grid layout:
1077
- * ```tsx
1078
- * <PasswordElement
1079
- * control={control}
1080
- * name="newPassword"
1081
- * label="New Password"
1082
- * gridProps={{ size: { xs: 12, md: 6 } }}
1083
- * renderIcon={(hidden) => hidden ? <CustomHideIcon /> : <CustomShowIcon />}
1084
- * />
1085
- * ```
1086
- *
1087
- * @template TFieldValues - The form values type
1088
- * @template TName - The field name type
1089
- * @template TValue - The value type
1090
- *
1091
- * @param props - Component props
1092
- * @returns React element with optional Grid wrapper
1093
- *
1094
- * @public
1095
- */
1096
- declare const PasswordElement: {
1097
- <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown>({ gridProps, ...props }: PasswordElementProps<TFieldValues, TName, TValue>): react_jsx_runtime.JSX.Element;
1098
- displayName: string;
1099
- };
1100
-
1101
- type PrimitiveValue$1 = string | number | boolean;
1102
- type OptionObject$1<TValueKey extends string = string, TLabelKey extends string = string, TDisabledKey extends string = string> = Record<TValueKey, PrimitiveValue$1> & Record<TLabelKey, string> & Partial<Record<TDisabledKey, boolean>> & Record<string, unknown>;
1103
- interface RadioButtonGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TOption extends OptionObject$1<TValueKey, TLabelKey, TDisabledKey> = OptionObject$1, TValueKey extends keyof TOption & string = "id", TLabelKey extends keyof TOption & string = "label", TDisabledKey extends keyof TOption & string = "disabled"> {
1104
- options: TOption[];
1105
- helperText?: ReactNode;
1106
- name: TName;
1107
- required?: boolean;
1108
- parseError?: (error: FieldError) => ReactNode;
1109
- label?: string;
1110
- labelKey?: TLabelKey;
1111
- valueKey?: TValueKey;
1112
- disabledKey?: TDisabledKey;
1113
- type?: "number" | "string" | "boolean";
1114
- emptyOptionLabel?: string;
1115
- onChange?: (value: TOption[TValueKey] | TOption | undefined) => void;
1116
- returnObject?: boolean;
1117
- row?: boolean;
1118
- control?: Control<TFieldValues>;
1119
- labelProps?: Omit<FormControlLabelProps, "label" | "control" | "value">;
1120
- formLabelProps?: Omit<FormLabelProps, "required" | "error">;
1121
- radioProps?: RadioProps;
1122
- disabled?: boolean;
1123
- transform?: {
1124
- input?: (value: PathValue<TFieldValues, TName>) => TOption[TValueKey];
1125
- output?: (eventOrValue: EventOrValue<PathValue<TFieldValues, TName>>, value?: PathValue<TFieldValues, TName>) => PathValue<TFieldValues, TName>;
1126
- };
1127
- gridProps?: GridProps;
1128
- }
1129
- declare const RadioButtonGroup: {
1130
- <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TOption extends OptionObject$1<TValueKey, TLabelKey, TDisabledKey> = OptionObject$1<string, string, string>, TValueKey extends keyof TOption & string = "id", TLabelKey extends keyof TOption & string = "label", TDisabledKey extends keyof TOption & string = "disabled">({ gridProps, ...props }: RadioButtonGroupProps<TFieldValues, TName, TOption, TValueKey, TLabelKey, TDisabledKey>): react_jsx_runtime.JSX.Element;
1131
- displayName: string;
1132
- };
1133
-
1134
- type SelectCascadeElementProps<TOption, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = Omit<AutocompleteProps<TOption, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'name' | 'renderInput' | 'isOptionEqualToValue' | 'getOptionLabel' | 'disabled'> & {
1135
- rules?: UseControllerProps<TFieldValues, TName>['rules'];
1136
- name: TName;
1137
- dependsOn: TName;
1138
- control?: Control<TFieldValues>;
1139
- gridProps?: GridProps;
1140
- placeholder?: string;
1141
- label?: string;
1142
- variant?: TextFieldVariants;
1143
- disabled?: boolean;
1144
- sx?: SxProps;
1145
- isEdit?: boolean;
1146
- labelKey?: keyof TOption;
1147
- valueKey?: keyof TOption;
1148
- textFieldProps?: Omit<TextFieldProps, 'name'>;
1149
- };
1150
- declare const SelectCascadeElement: {
1151
- <TOption, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ gridProps, ...props }: SelectCascadeElementProps<TOption, TFieldValues, TName>): React.ReactElement;
1152
- displayName: string;
1153
- };
1154
-
1155
- /**
1156
- * Props for the SelectElement component.
1157
- *
1158
- * @template TOption - The option object type
1159
- * @template TFieldValues - The form values type
1160
- * @template TName - The field name type
1161
- * @template Multiple - Whether multiple selection is enabled
1162
- * @template DisableClearable - Whether the clear button is disabled
1163
- * @template FreeSolo - Whether free text input is allowed
1164
- * @template ChipComponent - The chip component type for multiple selection
1165
- *
1166
- * @public
1167
- */
1168
- type SelectElementProps<TOption, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap["defaultComponent"]> = Omit<AutocompleteProps<TOption, Multiple, DisableClearable, FreeSolo, ChipComponent>, "name" | "renderInput" | "isOptionEqualToValue" | "getOptionLabel" | "disabled"> & {
1169
- /**
1170
- * Validation rules for the field
1171
- * @example { required: 'Please select an option' }
1172
- */
1173
- rules?: UseControllerProps<TFieldValues, TName>["rules"];
1174
- /**
1175
- * The field name in the form
1176
- * @example "category" | "user.department"
1177
- */
1178
- name: TName;
1179
- /**
1180
- * The form control instance from react-hook-form
1181
- */
1182
- control?: Control<TFieldValues>;
1183
- /**
1184
- * Grid layout props for the wrapper Grid component
1185
- * @defaultValue { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } }
1186
- */
1187
- gridProps?: GridProps;
1188
- /**
1189
- * Placeholder text for the select input
1190
- * @example "Choose an option..."
1191
- */
1192
- placeholder?: string;
1193
- /**
1194
- * The input label text
1195
- * @example "Category"
1196
- */
1197
- label?: string;
1198
- /**
1199
- * The TextField variant
1200
- * @defaultValue "outlined"
1201
- */
1202
- variant?: TextFieldVariants;
1203
- /**
1204
- * Custom styles for the component
1205
- */
1206
- sx?: SxProps;
1207
- /**
1208
- * Whether the component is in edit mode (affects auto-selection behavior)
1209
- * When false and only one option exists, that option is auto-selected
1210
- * @defaultValue false
1211
- */
1212
- isEdit?: boolean;
1213
- /**
1214
- * Whether the select is disabled
1215
- */
1216
- disabled?: boolean;
1217
- /**
1218
- * The property name in option objects to use as display label
1219
- * @defaultValue "Label"
1220
- * @example "name" | "title"
1221
- */
1222
- labelKey?: string;
1223
- /**
1224
- * The property name in option objects to use as the value
1225
- * @defaultValue "Value"
1226
- * @example "id" | "code"
1227
- */
1228
- valueKey?: keyof TOption;
1229
- /**
1230
- * Additional props for the underlying TextField component
1231
- */
1232
- textFieldProps?: Omit<TextFieldProps, "name">;
1233
- };
1234
- /**
1235
- * A react-hook-form integrated Autocomplete component for selecting from predefined options.
1236
- *
1237
- * This component provides a fully integrated select/autocomplete input that works seamlessly
1238
- * with react-hook-form, including automatic validation, error handling, and optional Grid wrapper
1239
- * for responsive layouts. It supports both single and multiple selection modes.
1240
- *
1241
- * Features:
1242
- * - Full react-hook-form integration
1243
- * - Autocomplete with filtering
1244
- * - Single and multiple selection support
1245
- * - Automatic error display
1246
- * - Customizable option display (labelKey/valueKey)
1247
- * - Auto-selection when only one option exists
1248
- * - Grid layout wrapper
1249
- * - TypeScript type safety
1250
- * - Disabled state styling
1251
- *
1252
- * @example
1253
- * Basic usage:
1254
- * ```tsx
1255
- * <SelectElement
1256
- * control={control}
1257
- * name="category"
1258
- * label="Category"
1259
- * options={[
1260
- * { Label: 'Technology', Value: 'tech' },
1261
- * { Label: 'Finance', Value: 'finance' }
1262
- * ]}
1263
- * rules={{ required: 'Please select a category' }}
1264
- * />
1265
- * ```
1266
- *
1267
- * @example
1268
- * With custom keys:
1269
- * ```tsx
1270
- * <SelectElement
1271
- * control={control}
1272
- * name="userId"
1273
- * label="Assign to User"
1274
- * options={users}
1275
- * labelKey="fullName"
1276
- * valueKey="id"
1277
- * placeholder="Choose a user..."
1278
- * />
1279
- * ```
1280
- *
1281
- * @example
1282
- * Multiple selection:
1283
- * ```tsx
1284
- * <SelectElement
1285
- * control={control}
1286
- * name="tags"
1287
- * label="Tags"
1288
- * options={availableTags}
1289
- * multiple
1290
- * gridProps={{ size: { xs: 12, md: 8 } }}
1291
- * />
1292
- * ```
1293
- *
1294
- * @template TOption - The option object type
1295
- * @template TFieldValues - The form values type
1296
- * @template TName - The field name type
1297
- * @template Multiple - Whether multiple selection is enabled
1298
- * @template DisableClearable - Whether the clear button is disabled
1299
- * @template FreeSolo - Whether free text input is allowed
1300
- * @template ChipComponent - The chip component type for multiple selection
1301
- *
1302
- * @param props - Component props
1303
- * @returns React element with optional Grid wrapper
1304
- *
1305
- * @public
1306
- */
1307
- declare const SelectElement: {
1308
- <TOption extends Record<string, any> = Record<string, any>, TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">({ gridProps, ...props }: SelectElementProps<TOption, TFieldValues, TName, Multiple, DisableClearable, FreeSolo, ChipComponent>): React.ReactElement;
1309
- displayName: string;
1310
- };
1311
-
1312
- type BaseAutocompleteProps<TOption, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined, ChipComponent extends React.ElementType> = Omit<AutocompleteProps<TOption, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'name' | 'renderInput' | 'multiple' | 'onChange' | 'value'>;
1313
- type SelectMultiElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TOption extends Record<string, any> = Record<string, any>, Multiple extends boolean | undefined = true, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = BaseAutocompleteProps<TOption, Multiple, DisableClearable, FreeSolo, ChipComponent> & {
1314
- rules?: UseControllerProps<TFieldValues, TName>['rules'];
1315
- name: TName;
1316
- control?: Control<TFieldValues>;
1317
- gridProps?: GridProps;
1318
- placeholder?: string;
1319
- label?: string;
1320
- variant?: TextFieldVariants;
1321
- sx?: SxProps;
1322
- labelKey?: keyof TOption;
1323
- valueKey?: keyof TOption;
1324
- };
1325
- declare const SelectMultiElement: {
1326
- <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TOption extends Record<string, any> = Record<string, any>>({ gridProps, ...props }: SelectMultiElementProps<TFieldValues, TName, TOption>): React.ReactElement;
1327
- displayName: string;
1328
- };
1329
-
1330
- /**
1331
- * Props for the TextFieldElement component.
1332
- *
1333
- * @template TFieldValues - The form values type
1334
- * @template TName - The field name type
1335
- * @template TValue - The transformed value type
1336
- *
1337
- * @public
1338
- */
1339
- interface TextFieldElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown> {
1340
- /**
1341
- * Validation rules for the field
1342
- * @example { required: 'This field is required', minLength: { value: 3, message: 'Minimum 3 characters' } }
1343
- */
1344
- rules?: UseControllerProps<TFieldValues, TName>["rules"];
1345
- /**
1346
- * The field name in the form
1347
- * @example "firstName" | "user.email"
1348
- */
1349
- name: TName;
1350
- /**
1351
- * Custom error message parser
1352
- * @param error - The field error object
1353
- * @returns Custom error message or component
1354
- */
1355
- parseError?: (error: FieldError) => ReactNode;
1356
- /**
1357
- * The form control instance from react-hook-form
1358
- */
1359
- control?: Control<TFieldValues>;
1360
- /**
1361
- * Custom TextField component to use instead of default MUI TextField
1362
- */
1363
- component?: typeof TextField;
1364
- /**
1365
- * Value transformation functions for input/output
1366
- */
1367
- transform?: {
1368
- /** Transform value before displaying in input */
1369
- input?: (value: PathValue<TFieldValues, TName>) => TValue;
1370
- /** Transform input event to form value */
1371
- output?: (eventOrValue: EventOrValue<PathValue<TFieldValues, TName>>, value?: PathValue<TFieldValues, TName>) => PathValue<TFieldValues, TName>;
1372
- };
1373
- /**
1374
- * The input label text
1375
- * @example "Email Address"
1376
- */
1377
- label?: string;
1378
- /**
1379
- * Placeholder text for the input
1380
- * @example "Enter your email"
1381
- */
1382
- placeholder?: string;
1383
- /**
1384
- * Additional props for the underlying TextField component
1385
- */
1386
- textFieldProps?: Omit<TextFieldProps, "name">;
1387
- /**
1388
- * Grid layout props for the wrapper Grid component
1389
- * @defaultValue { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } }
1390
- */
1391
- gridProps?: GridProps;
1392
- /**
1393
- * The TextField variant
1394
- * @defaultValue "outlined"
1395
- */
1396
- variant?: TextFieldVariants;
1397
- /**
1398
- * Custom styles for the TextField
1399
- */
1400
- sx?: SxProps;
1401
- }
1402
- /**
1403
- * A react-hook-form integrated TextField component with automatic validation and grid layout.
1404
- *
1405
- * This component provides a fully integrated TextField that works seamlessly with react-hook-form,
1406
- * including automatic validation, error handling, and optional Grid wrapper for responsive layouts.
1407
- *
1408
- * Features:
1409
- * - Full react-hook-form integration
1410
- * - Automatic error display
1411
- * - Value transformation support
1412
- * - Grid layout wrapper
1413
- * - TypeScript type safety
1414
- * - Number input handling
1415
- * - Disabled state styling
1416
- *
1417
- * @example
1418
- * Basic usage:
1419
- * ```tsx
1420
- * <TextFieldElement
1421
- * control={control}
1422
- * name="firstName"
1423
- * label="First Name"
1424
- * rules={{ required: 'First name is required' }}
1425
- * />
1426
- * ```
1427
- *
1428
- * @example
1429
- * With custom grid layout:
1430
- * ```tsx
1431
- * <TextFieldElement
1432
- * control={control}
1433
- * name="email"
1434
- * label="Email"
1435
- * type="email"
1436
- * gridProps={{ size: { xs: 12, md: 6 } }}
1437
- * rules={{
1438
- * required: 'Email is required',
1439
- * pattern: { value: /\S+@\S+\.\S+/, message: 'Invalid email' }
1440
- * }}
1441
- * />
1442
- * ```
1443
- *
1444
- * @example
1445
- * Number input with transformation:
1446
- * ```tsx
1447
- * <TextFieldElement
1448
- * control={control}
1449
- * name="age"
1450
- * label="Age"
1451
- * textFieldProps={{ type: 'number' }}
1452
- * transform={{
1453
- * input: (value) => value?.toString() || '',
1454
- * output: (event) => parseInt(event.target.value) || null
1455
- * }}
1456
- * />
1457
- * ```
1458
- *
1459
- * @template TFieldValues - The form values type
1460
- * @template TName - The field name type
1461
- * @template TValue - The transformed value type
1462
- *
1463
- * @param props - Component props
1464
- * @returns React element with optional Grid wrapper
1465
- *
1466
- * @public
1467
- */
1468
- declare const TextFieldElement: {
1469
- <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = unknown>({ gridProps, ...props }: TextFieldElementProps<TFieldValues, TName, TValue>): React__default.ReactElement;
1470
- displayName: string;
1471
- };
1472
-
1473
- /**
1474
- * Props for the EnhancedTextFieldElement component.
1475
- *
1476
- * @template TFieldValues - The form values type
1477
- * @template TName - The field name type
1478
- * @template TValue - The transformed value type
1479
- *
1480
- * @public
1481
- */
1482
- interface EnhancedTextFieldElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = PathValue<TFieldValues, TName>> {
1483
- /**
1484
- * Validation rules for the field
1485
- * @example { required: 'This field is required', minLength: { value: 3, message: 'Minimum 3 characters' } }
1486
- */
1487
- rules?: UseControllerProps<TFieldValues, TName>["rules"];
1488
- /**
1489
- * The field name in the form
1490
- * @example "firstName" | "user.email"
1491
- */
1492
- name: TName;
1493
- /**
1494
- * Custom error message parser
1495
- * @param error - The field error object
1496
- * @returns Custom error message or component
1497
- */
1498
- parseError?: (error: FieldError) => ReactNode;
1499
- /**
1500
- * The form control instance from react-hook-form
1501
- */
1502
- control?: Control<TFieldValues>;
1503
- /**
1504
- * Custom TextField component to use instead of default MUI TextField
1505
- */
1506
- component?: typeof TextField;
1507
- /**
1508
- * Value transformation functions for input/output
1509
- * @deprecated Use fieldType for common patterns or custom transforms for complex cases
1510
- */
1511
- transform?: {
1512
- /** Transform value before displaying in input */
1513
- input?: (value: PathValue<TFieldValues, TName>) => TValue;
1514
- /** Transform input event to form value */
1515
- output?: (eventOrValue: EventOrValue<PathValue<TFieldValues, TName>>, value?: PathValue<TFieldValues, TName>) => PathValue<TFieldValues, TName>;
1516
- };
1517
- /**
1518
- * Built-in field type for automatic transformation
1519
- * @example 'text' | 'number' | 'date' | 'time' | 'select'
1520
- */
1521
- fieldType?: FieldType;
1522
- /**
1523
- * Default value to display when field value is null/undefined
1524
- * @example ""
1525
- */
1526
- defaultValue?: TValue;
1527
- /**
1528
- * The input label text
1529
- * @example "Email Address"
1530
- */
1531
- label?: string;
1532
- /**
1533
- * Placeholder text for the input
1534
- * @example "Enter your email"
1535
- */
1536
- placeholder?: string;
1537
- /**
1538
- * Additional props for the underlying TextField component
1539
- */
1540
- textFieldProps?: Omit<TextFieldProps, "name">;
1541
- /**
1542
- * Grid layout props for the wrapper Grid component
1543
- * @defaultValue { size: { xs: 12, sm: 12, md: 12, lg: 12, xl: 12 } }
1544
- */
1545
- gridProps?: GridProps;
1546
- /**
1547
- * The TextField variant
1548
- * @defaultValue "outlined"
1549
- */
1550
- variant?: TextFieldVariants;
1551
- /**
1552
- * Custom styles for the TextField
1553
- */
1554
- sx?: SxProps;
1555
- /**
1556
- * Custom onChange handler called after transformation
1557
- */
1558
- onChange?: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
1559
- /**
1560
- * Enable development warnings for debugging transformation issues
1561
- * @defaultValue process.env.NODE_ENV === 'development'
1562
- */
1563
- enableWarnings?: boolean;
1564
- }
1565
- /**
1566
- * An enhanced react-hook-form integrated TextField component with automatic validation,
1567
- * performance optimizations, and built-in field type handling.
1568
- *
1569
- * This enhanced version provides all the functionality of the original TextFieldElement
1570
- * plus additional features:
1571
- * - Performance optimizations with memoized transformations
1572
- * - Built-in field type handling (number, text, etc.)
1573
- * - Better TypeScript inference and type safety
1574
- * - Development warnings for debugging
1575
- * - Stable references to prevent unnecessary re-renders
1576
- * - Enhanced error handling with custom parseError support
1577
- *
1578
- * Features:
1579
- * - Full react-hook-form integration
1580
- * - Automatic error display with custom parsing
1581
- * - Value transformation support (backward compatible)
1582
- * - Built-in field types for common patterns
1583
- * - Grid layout wrapper
1584
- * - Enhanced TypeScript type safety
1585
- * - Optimized number input handling
1586
- * - Disabled state styling
1587
- * - Performance optimizations
1588
- *
1589
- * @example
1590
- * Basic usage with built-in number handling:
1591
- * ```tsx
1592
- * <EnhancedTextFieldElement
1593
- * control={control}
1594
- * name="age"
1595
- * label="Age"
1596
- * fieldType="number"
1597
- * rules={{ required: 'Age is required', min: { value: 0, message: 'Age must be positive' } }}
1598
- * />
1599
- * ```
1600
- *
1601
- * @example
1602
- * Advanced usage with custom grid layout:
1603
- * ```tsx
1604
- * <EnhancedTextFieldElement
1605
- * control={control}
1606
- * name="email"
1607
- * label="Email"
1608
- * fieldType="text"
1609
- * placeholder="Enter your email address"
1610
- * gridProps={{ size: { xs: 12, md: 6 } }}
1611
- * rules={{
1612
- * required: 'Email is required',
1613
- * pattern: { value: /\S+@\S+\.\S+/, message: 'Invalid email' }
1614
- * }}
1615
- * />
1616
- * ```
1617
- *
1618
- * @example
1619
- * Custom transformation (backward compatible):
1620
- * ```tsx
1621
- * <EnhancedTextFieldElement
1622
- * control={control}
1623
- * name="price"
1624
- * label="Price"
1625
- * transform={{
1626
- * input: (value) => value ? `$${value}` : '',
1627
- * output: (event) => parseFloat(event.target.value.replace('$', '')) || null
1628
- * }}
1629
- * />
1630
- * ```
1631
- *
1632
- * @example
1633
- * With custom error parsing:
1634
- * ```tsx
1635
- * <EnhancedTextFieldElement
1636
- * control={control}
1637
- * name="username"
1638
- * label="Username"
1639
- * fieldType="text"
1640
- * parseError={(error) => (
1641
- * <span style={{ color: 'red' }}>
1642
- * ⚠️ {error.message}
1643
- * </span>
1644
- * )}
1645
- * />
1646
- * ```
1647
- *
1648
- * @template TFieldValues - The form values type
1649
- * @template TName - The field name type
1650
- * @template TValue - The transformed value type
1651
- *
1652
- * @param props - Component props
1653
- * @returns React element with optional Grid wrapper
1654
- *
1655
- * @public
1656
- */
1657
- declare const EnhancedTextFieldElement: {
1658
- <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue = PathValue<TFieldValues, TName>>({ gridProps, ...props }: EnhancedTextFieldElementProps<TFieldValues, TName, TValue>): React__default.ReactElement;
1659
- displayName: string;
1660
- };
1661
-
1662
- interface TimePickerElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends PickerValidDate = PickerValidDate, TEnableAccessibleFieldDOMStructure extends boolean = false> {
1663
- name: TName;
1664
- required?: boolean;
1665
- isDate?: boolean;
1666
- parseError?: (error: FieldError | TimeValidationError) => ReactNode;
1667
- rules?: UseControllerProps<TFieldValues, TName>["rules"];
1668
- control?: Control<TFieldValues>;
1669
- inputProps?: TextFieldProps;
1670
- helperText?: TextFieldProps["helperText"];
1671
- label?: ReactNode;
1672
- placeholder?: string;
1673
- textReadOnly?: boolean;
1674
- slotProps?: Omit<TimePickerSlotProps<TEnableAccessibleFieldDOMStructure>, "textField">;
1675
- transform?: {
1676
- input?: (value: PathValue<TFieldValues, TName>) => TValue | null;
1677
- output?: (eventOrValue: EventOrValue<PathValue<TFieldValues, TName>>, value?: PathValue<TFieldValues, TName>) => PathValue<TFieldValues, TName>;
1678
- };
1679
- gridProps?: GridProps;
1680
- timePickerProps?: Omit<TimePickerProps<TEnableAccessibleFieldDOMStructure>, "value" | "slotProps">;
1681
- variant?: TextFieldVariants;
1682
- sx?: SxProps;
1683
- }
1684
- declare const TimePickerElement: {
1685
- <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>, TValue extends unknown = any>({ gridProps, ...props }: TimePickerElementProps<TFieldValues, TName, TValue>): React__default.ReactElement;
1686
- displayName: string;
1687
- };
1688
-
1689
- type PrimitiveValue = string | number | boolean;
1690
- type OptionObject<TValueKey extends string = string, TLabelKey extends string = string> = Record<TValueKey, PrimitiveValue> & Record<TLabelKey, string> & Record<string, unknown>;
1691
- type AsyncSelectElementProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = Path<TFieldValues>, TValueKey extends string = "Value", TLabelKey extends string = "Label", TOption extends OptionObject<TValueKey, TLabelKey> = OptionObject<TValueKey, TLabelKey>, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent']> = Omit<AutocompleteProps<TOption, Multiple, DisableClearable, FreeSolo, ChipComponent>, 'name' | 'control' | 'ref' | 'multiple' | 'loading' | 'getOptionLabel' | 'getOptionKey' | 'isOptionEqualToValue' | 'options' | 'value' | 'filterSelectedOptions' | 'filterOptions' | 'onChange' | 'onInputChange' | 'renderInput'> & {
1692
- name: TName;
1693
- control?: Control<TFieldValues>;
1694
- gridProps?: GridProps;
1695
- placeholder?: string;
1696
- label?: string;
1697
- initialValue?: TOption[TValueKey] | null;
1698
- queryFn: (data: AsyncSelectPayload) => Promise<TOption[] | undefined>;
1699
- variant?: TextFieldVariants;
1700
- sx?: SxProps;
1701
- labelKey?: TLabelKey;
1702
- valueKey?: TValueKey;
1703
- };
1704
-
1705
- declare const Field: {
1706
- Text: {
1707
- <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, TValue = unknown>({ gridProps, ...props }: TextFieldElementProps<TFieldValues, TName, TValue>): React.ReactElement;
1708
- displayName: string;
1709
- };
1710
- Checkbox: {
1711
- <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>>({ gridProps, ...props }: CheckboxElementProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
1712
- displayName: string;
1713
- };
1714
- Date: React$1.ForwardRefExoticComponent<DatePickerElementProps<any, any, any, any> & React$1.RefAttributes<HTMLDivElement>>;
1715
- RadioGroup: {
1716
- <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, TOption extends Record<TValueKey, string | number | boolean> & Record<TLabelKey, string> & Partial<Record<TDisabledKey, boolean>> & Record<string, unknown> = Record<string, string | number | boolean> & Record<string, string> & Partial<Record<string, boolean>> & Record<string, unknown>, TValueKey extends keyof TOption & string = "id", TLabelKey extends keyof TOption & string = "label", TDisabledKey extends keyof TOption & string = "disabled">({ gridProps, ...props }: RadioButtonGroupProps<TFieldValues, TName, TOption, TValueKey, TLabelKey, TDisabledKey>): react_jsx_runtime.JSX.Element;
1717
- displayName: string;
1718
- };
1719
- Password: {
1720
- <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, TValue = unknown>({ gridProps, ...props }: PasswordElementProps<TFieldValues, TName, TValue>): react_jsx_runtime.JSX.Element;
1721
- displayName: string;
1722
- };
1723
- Time: {
1724
- <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, TValue extends unknown = any>({ gridProps, ...props }: TimePickerElementProps<TFieldValues, TName, TValue>): React.ReactElement;
1725
- displayName: string;
1726
- };
1727
- Select: {
1728
- <TOption extends Record<string, any> = Record<string, any>, TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, Multiple extends boolean | undefined = false, DisableClearable extends boolean | undefined = false, FreeSolo extends boolean | undefined = false, ChipComponent extends React.ElementType = "div">({ gridProps, ...props }: SelectElementProps<TOption, TFieldValues, TName, Multiple, DisableClearable, FreeSolo, ChipComponent>): React.ReactElement;
1729
- displayName: string;
1730
- };
1731
- SelectMulti: {
1732
- <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, TOption extends Record<string, any> = Record<string, any>>({ gridProps, ...props }: SelectMultiElementProps<TFieldValues, TName, TOption>): React.ReactElement;
1733
- displayName: string;
1734
- };
1735
- SelectCascade: {
1736
- <TOption, TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>>({ gridProps, ...props }: SelectCascadeElementProps<TOption, TFieldValues, TName>): React.ReactElement;
1737
- displayName: string;
1738
- };
1739
- AsyncSelect: {
1740
- <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, TValueKey extends string = "Value", TLabelKey extends string = "Label", TOption extends OptionObject<TValueKey, TLabelKey> = OptionObject<TValueKey, TLabelKey>>({ gridProps, ...props }: AsyncSelectElementProps<TFieldValues, TName, TValueKey, TLabelKey, TOption>): React.ReactElement;
1741
- displayName: string;
1742
- };
1743
- AsyncMultiSelect: {
1744
- <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>>({ gridProps, ...props }: AsyncMultiSelect2Props<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
1745
- displayName: string;
1746
- };
1747
- CheckboxGroup: {
1748
- <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues, TName extends react_hook_form.FieldPath<TFieldValues> = react_hook_form.FieldPath<TFieldValues>, TValue extends number[] = number[]>({ gridProps, ...props }: CheckboxGroupProps$1<TFieldValues, TName, TValue>): react_jsx_runtime.JSX.Element;
1749
- displayName: string;
1750
- };
1751
- };
1752
-
1753
- export { AsyncMultiSelect2, type AsyncMultiSelect2Props, type AsyncSelect2Payload, type BrandedDate, CheckboxElement, type CheckboxElementProps, CheckboxGroup, type CheckboxGroupProps, DatePickerElement, DatePickerElementCore, type DatePickerElementCoreProps, type DatePickerElementGridProps, type DatePickerElementProps, type DatePickerHookReturn, type DatePickerValidationConfig, type DateTransform, EnhancedTextFieldElement, type EnhancedTextFieldElementProps, Field, type Option2Item, type OptionObject$2 as OptionObject, PasswordElement, RadioButtonGroup, SelectCascadeElement, SelectElement, SelectMultiElement, TextFieldElement, TimePickerElement, type TypedDatePickerSlotProps, type UseDatePickerStylesOptions, type UseDatePickerStylesReturn, type UseDatePickerValidationOptions, type UseDatePickerValidationReturn, type UseDatePickerValueOptions, type UseDatePickerValueReturn, type ValidatedDate, createDateInputTransform, createDateOutputTransform, createDefaultDatePickerConfig, createStableKey, extractErrorMessage, isParsableDateString, isValidDate, readDatePickerValueAsDate, useDatePickerStyles, useDatePickerValidation, useDatePickerValue };