@delightui/components 0.1.162-alpha.5 → 0.1.163
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/dist/cjs/components/atoms/Checkbox/Checkbox.d.ts +1 -1
- package/dist/cjs/components/atoms/Checkbox/Checkbox.presenter.d.ts +1 -1
- package/dist/cjs/components/atoms/CheckboxItem/CheckboxItem.d.ts +1 -1
- package/dist/cjs/components/atoms/CheckboxItem/CheckboxItem.presenter.d.ts +2 -2
- package/dist/cjs/components/atoms/CustomToggle/CustomToggle.d.ts +1 -1
- package/dist/cjs/components/atoms/Input/Input.d.ts +1 -1
- package/dist/cjs/components/atoms/Input/Input.presenter.d.ts +2 -2
- package/dist/cjs/components/atoms/Password/Password.presenter.d.ts +2 -2
- package/dist/cjs/components/atoms/RadioButton/RadioButton.d.ts +1 -1
- package/dist/cjs/components/atoms/RadioButtonItem/RadioButtonItem.d.ts +1 -1
- package/dist/cjs/components/atoms/RadioButtonItem/RadioButtonItem.presenter.d.ts +2 -2
- package/dist/cjs/components/atoms/TextArea/TextArea.d.ts +1 -1
- package/dist/cjs/components/atoms/TextArea/TextArea.presenter.d.ts +1 -1
- package/dist/cjs/components/atoms/Toggle/Toggle.d.ts +1 -1
- package/dist/cjs/components/atoms/Toggle/Toggle.presenter.d.ts +2 -2
- package/dist/cjs/components/atoms/ToggleButton/ToggleButton.d.ts +1 -1
- package/dist/cjs/components/molecules/FormField/FormField.d.ts +2 -28
- package/dist/cjs/components/molecules/FormField/FormField.presenter.d.ts +8 -17
- package/dist/cjs/components/molecules/FormField/FormField.types.d.ts +52 -115
- package/dist/cjs/components/molecules/FormField/FormField.utils.d.ts +11 -8
- package/dist/cjs/components/molecules/FormField/index.d.ts +2 -1
- package/dist/cjs/components/molecules/Search/Search.d.ts +1 -1
- package/dist/cjs/components/molecules/Search/Search.presenter.d.ts +2 -2
- package/dist/cjs/components/molecules/Select/Select.presenter.d.ts +4 -4
- package/dist/cjs/components/organisms/Form/DropzoneFormExample.d.ts +6 -0
- package/dist/cjs/components/organisms/Form/Form.d.ts +1 -22
- package/dist/cjs/components/organisms/Form/Form.types.d.ts +93 -64
- package/dist/cjs/components/organisms/Form/Form.utils.d.ts +2 -0
- package/dist/cjs/components/organisms/Form/FormContext.d.ts +5 -0
- package/dist/cjs/components/organisms/Form/UpdatedFormExample.d.ts +23 -0
- package/dist/cjs/components/organisms/Form/{examples/UseFormExample.d.ts → UseFormExample.d.ts} +3 -0
- package/dist/cjs/components/organisms/Form/index.d.ts +3 -7
- package/dist/cjs/components/organisms/Form/useForm.d.ts +40 -43
- package/dist/cjs/library.js +3 -3
- package/dist/cjs/library.js.map +1 -1
- package/dist/esm/components/atoms/Checkbox/Checkbox.d.ts +1 -1
- package/dist/esm/components/atoms/Checkbox/Checkbox.presenter.d.ts +1 -1
- package/dist/esm/components/atoms/CheckboxItem/CheckboxItem.d.ts +1 -1
- package/dist/esm/components/atoms/CheckboxItem/CheckboxItem.presenter.d.ts +2 -2
- package/dist/esm/components/atoms/CustomToggle/CustomToggle.d.ts +1 -1
- package/dist/esm/components/atoms/Input/Input.d.ts +1 -1
- package/dist/esm/components/atoms/Input/Input.presenter.d.ts +2 -2
- package/dist/esm/components/atoms/Password/Password.presenter.d.ts +2 -2
- package/dist/esm/components/atoms/RadioButton/RadioButton.d.ts +1 -1
- package/dist/esm/components/atoms/RadioButtonItem/RadioButtonItem.d.ts +1 -1
- package/dist/esm/components/atoms/RadioButtonItem/RadioButtonItem.presenter.d.ts +2 -2
- package/dist/esm/components/atoms/TextArea/TextArea.d.ts +1 -1
- package/dist/esm/components/atoms/TextArea/TextArea.presenter.d.ts +1 -1
- package/dist/esm/components/atoms/Toggle/Toggle.d.ts +1 -1
- package/dist/esm/components/atoms/Toggle/Toggle.presenter.d.ts +2 -2
- package/dist/esm/components/atoms/ToggleButton/ToggleButton.d.ts +1 -1
- package/dist/esm/components/molecules/FormField/FormField.d.ts +2 -28
- package/dist/esm/components/molecules/FormField/FormField.presenter.d.ts +8 -17
- package/dist/esm/components/molecules/FormField/FormField.types.d.ts +52 -115
- package/dist/esm/components/molecules/FormField/FormField.utils.d.ts +11 -8
- package/dist/esm/components/molecules/FormField/index.d.ts +2 -1
- package/dist/esm/components/molecules/Search/Search.d.ts +1 -1
- package/dist/esm/components/molecules/Search/Search.presenter.d.ts +2 -2
- package/dist/esm/components/molecules/Select/Select.presenter.d.ts +4 -4
- package/dist/esm/components/organisms/Form/DropzoneFormExample.d.ts +6 -0
- package/dist/esm/components/organisms/Form/Form.d.ts +1 -22
- package/dist/esm/components/organisms/Form/Form.types.d.ts +93 -64
- package/dist/esm/components/organisms/Form/Form.utils.d.ts +2 -0
- package/dist/esm/components/organisms/Form/FormContext.d.ts +5 -0
- package/dist/esm/components/organisms/Form/UpdatedFormExample.d.ts +23 -0
- package/dist/esm/components/organisms/Form/{examples/UseFormExample.d.ts → UseFormExample.d.ts} +3 -0
- package/dist/esm/components/organisms/Form/index.d.ts +3 -7
- package/dist/esm/components/organisms/Form/useForm.d.ts +40 -43
- package/dist/esm/library.js +3 -3
- package/dist/esm/library.js.map +1 -1
- package/dist/index.d.ts +228 -319
- package/docs/components/molecules/FormField.md +34 -129
- package/docs/components/organisms/Form.md +162 -858
- package/package.json +1 -4
- package/dist/cjs/components/molecules/FormField/useSafeController.d.ts +0 -14
- package/dist/cjs/components/molecules/FormField/useSafeFormContext.d.ts +0 -8
- package/dist/cjs/components/organisms/Form/Form.presenter.d.ts +0 -290
- package/dist/cjs/components/organisms/Form/examples/DropzoneFormExample.d.ts +0 -6
- package/dist/cjs/components/organisms/Form/examples/UpdatedFormExample.d.ts +0 -2
- package/dist/cjs/components/organisms/Form/useAutosave.d.ts +0 -10
- package/dist/esm/components/molecules/FormField/useSafeController.d.ts +0 -14
- package/dist/esm/components/molecules/FormField/useSafeFormContext.d.ts +0 -8
- package/dist/esm/components/organisms/Form/Form.presenter.d.ts +0 -290
- package/dist/esm/components/organisms/Form/examples/DropzoneFormExample.d.ts +0 -6
- package/dist/esm/components/organisms/Form/examples/UpdatedFormExample.d.ts +0 -2
- package/dist/esm/components/organisms/Form/useAutosave.d.ts +0 -10
- package/docs/FORM_MIGRATION_GUIDE.md +0 -631
- /package/dist/cjs/components/organisms/Form/{examples/AutosaveFormExample.d.ts → AutosaveFormExample.d.ts} +0 -0
- /package/dist/esm/components/organisms/Form/{examples/AutosaveFormExample.d.ts → AutosaveFormExample.d.ts} +0 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
2
|
import * as React$1 from 'react';
|
|
3
|
-
import React__default, { ImgHTMLAttributes, SyntheticEvent, HTMLAttributes, ReactNode, MouseEvent, InputHTMLAttributes, TextareaHTMLAttributes, ComponentType, LiHTMLAttributes, CSSProperties,
|
|
4
|
-
import * as react_hook_form from 'react-hook-form';
|
|
5
|
-
import { FieldValues, Path, PathValue, UseFormProps } from 'react-hook-form';
|
|
3
|
+
import React__default, { ImgHTMLAttributes, SyntheticEvent, HTMLAttributes, ReactNode, MouseEvent, FormHTMLAttributes, Ref, InputHTMLAttributes, TextareaHTMLAttributes, ComponentType, LiHTMLAttributes, CSSProperties, TableHTMLAttributes, TdHTMLAttributes, ReactElement, AriaRole, KeyboardEventHandler } from 'react';
|
|
6
4
|
import { LinkProps } from 'react-router-dom';
|
|
7
5
|
import { Plugin } from 'flatpickr/dist/types/options';
|
|
8
6
|
import FlatPickr, { DateTimePickerProps } from 'react-flatpickr';
|
|
@@ -190,20 +188,201 @@ interface IconButtonProps extends Omit<ButtonProps, 'leadingIcon' | 'trailingIco
|
|
|
190
188
|
declare const IconButton: (props: IconButtonProps) => react_jsx_runtime.JSX.Element;
|
|
191
189
|
|
|
192
190
|
/**
|
|
193
|
-
* Type representing allowed
|
|
191
|
+
* Type representing the allowed values for form fields
|
|
194
192
|
*/
|
|
195
|
-
type FieldValue = string | number | Date | boolean | File |
|
|
193
|
+
type FieldValue = string | number | Date | boolean | File | Array<string | number | Date | File>;
|
|
196
194
|
/**
|
|
197
|
-
*
|
|
198
|
-
*
|
|
195
|
+
* Type representing the form values as a partial record of field names to field values
|
|
196
|
+
* @example
|
|
197
|
+
* ```typescript
|
|
198
|
+
* const formState: FormState = {
|
|
199
|
+
* name: 'John Doe',
|
|
200
|
+
* age: 30,
|
|
201
|
+
* dob: new Date('1990-01-01')
|
|
202
|
+
* };
|
|
203
|
+
* ```
|
|
204
|
+
*/
|
|
205
|
+
type FormState<T extends FieldValue = FieldValue> = Partial<Record<string, T>>;
|
|
206
|
+
/**
|
|
207
|
+
* Type representing the form errors as a partial record of field names to error messages
|
|
208
|
+
*/
|
|
209
|
+
type FormErrors<T extends FormState = FormState> = Partial<Record<keyof T, string>>;
|
|
210
|
+
/**
|
|
211
|
+
* Type representing a validation function for a form field
|
|
212
|
+
* It takes an error setter function and the field value (optional) and returns a boolean indicating if the value is valid
|
|
213
|
+
* @example
|
|
214
|
+
* ```typescript
|
|
215
|
+
* const nameValidator: FieldValidationFunction = (setError, value) => {
|
|
216
|
+
* if (!value) {
|
|
217
|
+
* setError('Name is required');
|
|
218
|
+
* return false;
|
|
219
|
+
* }
|
|
220
|
+
* return true;
|
|
221
|
+
* };
|
|
222
|
+
* ```
|
|
223
|
+
*/
|
|
224
|
+
type FieldValidationFunction<T extends FieldValue = FieldValue> = (setError: (message: string) => void, value?: T) => boolean;
|
|
225
|
+
/**
|
|
226
|
+
* Type representing the required fields in a form
|
|
227
|
+
* It's a partial record of field names to a boolean indicating if the field is required
|
|
228
|
+
*/
|
|
229
|
+
type RequiredFields<T extends FormState = FormState> = Partial<Record<keyof T, boolean>>;
|
|
230
|
+
/**
|
|
231
|
+
* Type representing the validation functions for each field in a form
|
|
232
|
+
* It's a partial record of field names to validation functions (or undefined)
|
|
233
|
+
* @example
|
|
234
|
+
* ```typescript
|
|
235
|
+
* const nameValidator: FieldValidationFunction = (setError, value) => {
|
|
236
|
+
* if (!value) {
|
|
237
|
+
* setError('Name is required');
|
|
238
|
+
* return false;
|
|
239
|
+
* }
|
|
240
|
+
* return true;
|
|
241
|
+
* };
|
|
242
|
+
* const fieldValidators: FieldValidators = {
|
|
243
|
+
* name: nameValidator,
|
|
244
|
+
* age: undefined,
|
|
245
|
+
* };
|
|
246
|
+
* ```
|
|
247
|
+
*/
|
|
248
|
+
type FieldValidators<T extends FormState = FormState> = Partial<Record<keyof T, FieldValidationFunction | undefined>>;
|
|
249
|
+
/**
|
|
250
|
+
* Type representing a function that handles form state changes
|
|
251
|
+
* It takes the new form state and an error setter function and doesn't return anything
|
|
252
|
+
* @example
|
|
253
|
+
* ```typescript
|
|
254
|
+
* const handleFormStateChange: FormStateChangeHandler = (state, setError) => {
|
|
255
|
+
* // Validate form state and set errors
|
|
256
|
+
* if (!state.name) {
|
|
257
|
+
* setError('name', 'Name is required');
|
|
258
|
+
* }
|
|
259
|
+
* };
|
|
260
|
+
* ```
|
|
261
|
+
*/
|
|
262
|
+
type FormStateChangeHandler<T extends FormState = FormState> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => void;
|
|
263
|
+
/**
|
|
264
|
+
* Type representing a function that validates the entire form
|
|
265
|
+
* It takes the form values and an error setter function and returns a boolean indicating if the form is valid
|
|
266
|
+
* @example
|
|
267
|
+
* ```typescript
|
|
268
|
+
* const validateForm: FormValidator = (state, setError) => {
|
|
269
|
+
* let isValid = true;
|
|
270
|
+
* if (!state.name) {
|
|
271
|
+
* setError('name', 'Name is required');
|
|
272
|
+
* isValid = false;
|
|
273
|
+
* }
|
|
274
|
+
* if (!state.age || typeof state.age !== 'number') {
|
|
275
|
+
* setError('age', 'Age must be a number');
|
|
276
|
+
* isValid = false;
|
|
277
|
+
* }
|
|
278
|
+
* return isValid;
|
|
279
|
+
* };
|
|
280
|
+
* ```
|
|
281
|
+
*/
|
|
282
|
+
type FormValidator<T extends FormState = FormState> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => boolean;
|
|
283
|
+
/**
|
|
284
|
+
* Type representing a function that handles form submission.
|
|
285
|
+
* It takes updated form state and a function to set error messages for specific fields.
|
|
286
|
+
*
|
|
287
|
+
* @template T - The type of the form state, defaulting to `FormState`.
|
|
288
|
+
*
|
|
289
|
+
* @param {T} values - The updated form state values.
|
|
290
|
+
* @param {(field: keyof T, errorMessage: string) => void} setError - A function to set error messages for specific fields.
|
|
291
|
+
*
|
|
292
|
+
* @example
|
|
293
|
+
* ```typescript
|
|
294
|
+
* const handleFormSubmit: FormSubmitHandler = (values, setError) => {
|
|
295
|
+
* // Submit form data
|
|
296
|
+
* console.log(values);
|
|
297
|
+
* };
|
|
298
|
+
* ```
|
|
299
|
+
*/
|
|
300
|
+
type FormSubmitHandler<T extends FormState = FormState> = (values: T, setError: (field: keyof T, errorMessage: string) => void) => void;
|
|
301
|
+
type FormProps = Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> & {
|
|
302
|
+
formRef?: Ref<HTMLFormElement>;
|
|
303
|
+
};
|
|
304
|
+
type FormContextValues<T extends FormState = FormState> = {
|
|
305
|
+
formRef?: Ref<HTMLFormElement>;
|
|
306
|
+
formState?: T;
|
|
307
|
+
updateFieldValue: (name: string, value: FieldValue) => void;
|
|
308
|
+
formErrors: FormErrors<T>;
|
|
309
|
+
updateFieldError: (name: keyof T, errorMessage: string) => void;
|
|
310
|
+
onFormSubmit: React__default.FormEventHandler<HTMLFormElement>;
|
|
311
|
+
updateFieldValidators: (name: keyof T, validate?: FieldValidationFunction) => void;
|
|
312
|
+
updateRequiredFields: (name: keyof T, required?: boolean) => void;
|
|
313
|
+
resetForm: () => void;
|
|
314
|
+
};
|
|
315
|
+
type FormProviderProps<T extends FormState = FormState> = {
|
|
316
|
+
formRef?: Ref<HTMLFormElement>;
|
|
317
|
+
children?: React__default.ReactNode;
|
|
318
|
+
formState?: T;
|
|
319
|
+
onFormStateChange?: FormStateChangeHandler<T>;
|
|
320
|
+
formValidator?: FormValidator<T>;
|
|
321
|
+
onSubmit?: FormSubmitHandler<T>;
|
|
322
|
+
validateOnChange?: boolean;
|
|
323
|
+
autosave?: boolean;
|
|
324
|
+
autosaveDelayMs?: number;
|
|
325
|
+
};
|
|
326
|
+
|
|
327
|
+
/**
|
|
328
|
+
* Props for the FormField component.
|
|
329
|
+
*/
|
|
330
|
+
type FormFieldProps = HTMLAttributes<HTMLDivElement> & {
|
|
331
|
+
/**
|
|
332
|
+
* Name of the form field
|
|
333
|
+
*/
|
|
334
|
+
name: string;
|
|
335
|
+
/**
|
|
336
|
+
* Label for the form field
|
|
337
|
+
*/
|
|
338
|
+
label?: string;
|
|
339
|
+
/**
|
|
340
|
+
* Children for the form field
|
|
341
|
+
*/
|
|
342
|
+
children: React.ReactNode;
|
|
343
|
+
/**
|
|
344
|
+
* Message for the form field
|
|
345
|
+
*/
|
|
346
|
+
message?: string;
|
|
347
|
+
/**
|
|
348
|
+
* There is a message/error for the form field
|
|
349
|
+
*/
|
|
350
|
+
hasMessage?: boolean;
|
|
351
|
+
/**
|
|
352
|
+
* Info icon for the form field
|
|
353
|
+
*/
|
|
354
|
+
infoIcon?: React.ReactNode;
|
|
355
|
+
/**
|
|
356
|
+
* Indicates if the form field is required
|
|
357
|
+
*/
|
|
358
|
+
required?: boolean;
|
|
359
|
+
/**
|
|
360
|
+
* Validation function for the form field
|
|
361
|
+
*/
|
|
362
|
+
validate?: FieldValidationFunction;
|
|
363
|
+
/**
|
|
364
|
+
* Indicates if the form field is disabled
|
|
365
|
+
*/
|
|
366
|
+
disabled?: boolean;
|
|
367
|
+
/**
|
|
368
|
+
* Indicates if the form field is invalid
|
|
369
|
+
*/
|
|
370
|
+
invalid?: boolean;
|
|
371
|
+
/**
|
|
372
|
+
* Id for the form field
|
|
373
|
+
*/
|
|
374
|
+
id?: string;
|
|
375
|
+
};
|
|
376
|
+
/**
|
|
377
|
+
* Props that must be implemented by all form field components that are controlled inputs
|
|
199
378
|
*/
|
|
200
379
|
type ControlledFormComponentProps<T extends FieldValue> = {
|
|
201
380
|
/**
|
|
202
|
-
*
|
|
381
|
+
* the initial value for the field
|
|
203
382
|
*/
|
|
204
383
|
initialValue?: T;
|
|
205
384
|
/**
|
|
206
|
-
*
|
|
385
|
+
* the initial value for the field
|
|
207
386
|
*/
|
|
208
387
|
checked?: boolean;
|
|
209
388
|
/**
|
|
@@ -235,113 +414,6 @@ type ControlledFormComponentProps<T extends FieldValue> = {
|
|
|
235
414
|
*/
|
|
236
415
|
id?: string;
|
|
237
416
|
};
|
|
238
|
-
/**
|
|
239
|
-
* Field-level validation function
|
|
240
|
-
* Returns error message string if invalid, undefined if valid
|
|
241
|
-
*/
|
|
242
|
-
type FieldValidationFunction<TValue = FieldValue> = (value: TValue) => string | undefined;
|
|
243
|
-
/**
|
|
244
|
-
* Field-level async validation function
|
|
245
|
-
* Returns error message string if invalid, undefined if valid
|
|
246
|
-
*/
|
|
247
|
-
type AsyncFieldValidationFunction<TValue = FieldValue> = (value: TValue) => Promise<string | undefined>;
|
|
248
|
-
/**
|
|
249
|
-
* @deprecated This type is deprecated and maintained for backwards compatibility only.
|
|
250
|
-
* Use the new FieldValidationFunction signature that returns error messages instead.
|
|
251
|
-
*
|
|
252
|
-
* Type representing a validation function for a form field
|
|
253
|
-
* It takes an error setter function and the field value (optional) and returns a boolean indicating if the value is valid
|
|
254
|
-
* @example
|
|
255
|
-
* ```typescript
|
|
256
|
-
* const nameValidator: LegacyFieldValidationFunction = (setError, value) => {
|
|
257
|
-
* if (!value) {
|
|
258
|
-
* setError('Name is required');
|
|
259
|
-
* return false;
|
|
260
|
-
* }
|
|
261
|
-
* return true;
|
|
262
|
-
* };
|
|
263
|
-
* ```
|
|
264
|
-
*/
|
|
265
|
-
type LegacyFieldValidationFunction<T extends FieldValue = FieldValue> = (setError: (message: string) => void, value?: T) => boolean;
|
|
266
|
-
/**
|
|
267
|
-
* @deprecated This type is deprecated and maintained for backwards compatibility only.
|
|
268
|
-
* Use the new AsyncFieldValidationFunction signature that returns error messages instead.
|
|
269
|
-
*
|
|
270
|
-
* Type representing an async validation function for a form field
|
|
271
|
-
* It takes an error setter function and the field value (optional) and returns a Promise<boolean> indicating if the value is valid
|
|
272
|
-
*/
|
|
273
|
-
type LegacyAsyncFieldValidationFunction<T extends FieldValue = FieldValue> = (setError: (message: string) => void, value?: T) => Promise<boolean>;
|
|
274
|
-
/**
|
|
275
|
-
* FormField component props for use within a Form
|
|
276
|
-
*/
|
|
277
|
-
type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'children'> & {
|
|
278
|
-
/** Field name (must match form value key) - type-safe */
|
|
279
|
-
name: TName;
|
|
280
|
-
/** Field label */
|
|
281
|
-
label?: string;
|
|
282
|
-
/** Display name for validation messages (defaults to label or name) */
|
|
283
|
-
displayName?: string;
|
|
284
|
-
/**
|
|
285
|
-
* Child component - will be cloned with injected props:
|
|
286
|
-
* value, onValueChange, onBlur, ref, disabled, invalid, required, id, name
|
|
287
|
-
*/
|
|
288
|
-
children: ReactNode;
|
|
289
|
-
/** Field is required */
|
|
290
|
-
required?: boolean;
|
|
291
|
-
/** Sync validation function (supports both new and legacy signatures) */
|
|
292
|
-
validate?: FieldValidationFunction<PathValue<TFieldValues, TName>> | LegacyFieldValidationFunction<PathValue<TFieldValues, TName>>;
|
|
293
|
-
/** Async validation function (supports both new and legacy signatures) */
|
|
294
|
-
asyncValidate?: AsyncFieldValidationFunction<PathValue<TFieldValues, TName>> | LegacyAsyncFieldValidationFunction<PathValue<TFieldValues, TName>>;
|
|
295
|
-
/** Default value for this field */
|
|
296
|
-
defaultValue?: PathValue<TFieldValues, TName>;
|
|
297
|
-
/** Info message to display */
|
|
298
|
-
message?: string;
|
|
299
|
-
/** Disabled state */
|
|
300
|
-
disabled?: boolean;
|
|
301
|
-
/** External invalid state */
|
|
302
|
-
invalid?: boolean;
|
|
303
|
-
/** Info icon element */
|
|
304
|
-
infoIcon?: ReactNode;
|
|
305
|
-
/** Field ID - for the input element */
|
|
306
|
-
id?: string;
|
|
307
|
-
/** @deprecated Legacy prop for backwards compatibility - use message prop instead */
|
|
308
|
-
hasMessage?: boolean;
|
|
309
|
-
};
|
|
310
|
-
/**
|
|
311
|
-
* Standalone FormField props (works without Form context)
|
|
312
|
-
*/
|
|
313
|
-
type StandaloneFieldProps<TValue extends FieldValue = FieldValue> = Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'children' | 'onChange'> & {
|
|
314
|
-
/** Field name */
|
|
315
|
-
name: string;
|
|
316
|
-
/** Field label */
|
|
317
|
-
label?: string;
|
|
318
|
-
/** Display name for validation messages */
|
|
319
|
-
displayName?: string;
|
|
320
|
-
/** Child component to render */
|
|
321
|
-
children: ReactNode;
|
|
322
|
-
/** Field is required */
|
|
323
|
-
required?: boolean;
|
|
324
|
-
/** Sync validation function (supports both new and legacy signatures) */
|
|
325
|
-
validate?: FieldValidationFunction<TValue> | LegacyFieldValidationFunction<TValue>;
|
|
326
|
-
/** Async validation function (supports both new and legacy signatures) */
|
|
327
|
-
asyncValidate?: AsyncFieldValidationFunction<TValue> | LegacyAsyncFieldValidationFunction<TValue>;
|
|
328
|
-
/** Controlled value */
|
|
329
|
-
value?: TValue;
|
|
330
|
-
/** Controlled onChange */
|
|
331
|
-
onChange?: (value: TValue) => void;
|
|
332
|
-
/** External error */
|
|
333
|
-
error?: string;
|
|
334
|
-
/** Info message */
|
|
335
|
-
message?: string;
|
|
336
|
-
/** Disabled state */
|
|
337
|
-
disabled?: boolean;
|
|
338
|
-
/** Info icon element */
|
|
339
|
-
infoIcon?: ReactNode;
|
|
340
|
-
/** Field ID - for the input element */
|
|
341
|
-
id?: string;
|
|
342
|
-
/** @deprecated Legacy prop for backwards compatibility - use message prop instead */
|
|
343
|
-
hasMessage?: boolean;
|
|
344
|
-
};
|
|
345
417
|
|
|
346
418
|
/**
|
|
347
419
|
* Enum for different input types.
|
|
@@ -1347,32 +1419,7 @@ type DatePickerProps = Omit<DatePickerBaseSharedProps, 'noCalendar' | 'inline'>
|
|
|
1347
1419
|
|
|
1348
1420
|
declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
|
|
1349
1421
|
|
|
1350
|
-
|
|
1351
|
-
* Smart FormField component that works both inside and outside Form context
|
|
1352
|
-
*
|
|
1353
|
-
* Usage inside Form:
|
|
1354
|
-
* ```tsx
|
|
1355
|
-
* <Form defaultValues={{ email: '' }}>
|
|
1356
|
-
* <FormField name="email" label="Email" required>
|
|
1357
|
-
* <Input placeholder="Enter email" />
|
|
1358
|
-
* </FormField>
|
|
1359
|
-
* </Form>
|
|
1360
|
-
* ```
|
|
1361
|
-
*
|
|
1362
|
-
* Usage standalone:
|
|
1363
|
-
* ```tsx
|
|
1364
|
-
* <FormField
|
|
1365
|
-
* name="email"
|
|
1366
|
-
* label="Email"
|
|
1367
|
-
* value={email}
|
|
1368
|
-
* onChange={setEmail}
|
|
1369
|
-
* required
|
|
1370
|
-
* >
|
|
1371
|
-
* <Input placeholder="Enter email" />
|
|
1372
|
-
* </FormField>
|
|
1373
|
-
* ```
|
|
1374
|
-
*/
|
|
1375
|
-
declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>(props: FormFieldProps<TFieldValues, TName> | StandaloneFieldProps) => react_jsx_runtime.JSX.Element;
|
|
1422
|
+
declare const FormField: (props: FormFieldProps) => react_jsx_runtime.JSX.Element;
|
|
1376
1423
|
|
|
1377
1424
|
type GridProps = HTMLAttributes<HTMLDivElement> & {
|
|
1378
1425
|
columns?: number;
|
|
@@ -1817,113 +1864,6 @@ type RadioGroupProps = ControlledFormComponentProps<string | number> & {
|
|
|
1817
1864
|
|
|
1818
1865
|
declare const RadioGroup: (props: RadioGroupProps) => react_jsx_runtime.JSX.Element;
|
|
1819
1866
|
|
|
1820
|
-
/**
|
|
1821
|
-
* Form submission handler
|
|
1822
|
-
*/
|
|
1823
|
-
type FormSubmitHandler<TFormValues extends FieldValues = FieldValues> = (values: TFormValues) => void | Promise<void>;
|
|
1824
|
-
/**
|
|
1825
|
-
* @deprecated This type is deprecated and maintained for backwards compatibility only.
|
|
1826
|
-
* Use the new FormSubmitHandler signature without setError instead.
|
|
1827
|
-
*
|
|
1828
|
-
* Type representing a function that handles form submission.
|
|
1829
|
-
* It takes updated form state and a function to set error messages for specific fields.
|
|
1830
|
-
*
|
|
1831
|
-
* @template T - The type of the form state, defaulting to FieldValues.
|
|
1832
|
-
*
|
|
1833
|
-
* @param {T} values - The updated form state values.
|
|
1834
|
-
* @param {(field: keyof T, errorMessage: string) => void} setError - A function to set error messages for specific fields.
|
|
1835
|
-
*
|
|
1836
|
-
* @example
|
|
1837
|
-
* ```typescript
|
|
1838
|
-
* const handleFormSubmit: LegacyFormSubmitHandler = (values, setError) => {
|
|
1839
|
-
* // Submit form data
|
|
1840
|
-
* console.log(values);
|
|
1841
|
-
* };
|
|
1842
|
-
* ```
|
|
1843
|
-
*/
|
|
1844
|
-
type LegacyFormSubmitHandler<T extends FieldValues = FieldValues> = (values: T, setError: (field: keyof T, errorMessage: string) => void) => void | Promise<void>;
|
|
1845
|
-
/**
|
|
1846
|
-
* @deprecated This type is deprecated and maintained for backwards compatibility only.
|
|
1847
|
-
* Use React Hook Form's built-in validation or field-level validation instead.
|
|
1848
|
-
*
|
|
1849
|
-
* Type representing a function that handles form state changes
|
|
1850
|
-
* It takes the new form state and an error setter function and doesn't return anything
|
|
1851
|
-
* @example
|
|
1852
|
-
* ```typescript
|
|
1853
|
-
* const handleFormStateChange: FormStateChangeHandler = (state, setError) => {
|
|
1854
|
-
* // Validate form state and set errors
|
|
1855
|
-
* if (!state.name) {
|
|
1856
|
-
* setError('name', 'Name is required');
|
|
1857
|
-
* }
|
|
1858
|
-
* };
|
|
1859
|
-
* ```
|
|
1860
|
-
*/
|
|
1861
|
-
type FormStateChangeHandler<T extends FieldValues = FieldValues> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => void;
|
|
1862
|
-
/**
|
|
1863
|
-
* @deprecated This type is deprecated and maintained for backwards compatibility only.
|
|
1864
|
-
* Use React Hook Form's resolver or field-level validation instead.
|
|
1865
|
-
*
|
|
1866
|
-
* Type representing a function that validates the entire form
|
|
1867
|
-
* It takes the form values and an error setter function and returns a boolean indicating if the form is valid
|
|
1868
|
-
* @example
|
|
1869
|
-
* ```typescript
|
|
1870
|
-
* const validateForm: FormValidator = (state, setError) => {
|
|
1871
|
-
* let isValid = true;
|
|
1872
|
-
* if (!state.name) {
|
|
1873
|
-
* setError('name', 'Name is required');
|
|
1874
|
-
* isValid = false;
|
|
1875
|
-
* }
|
|
1876
|
-
* if (!state.age || typeof state.age !== 'number') {
|
|
1877
|
-
* setError('age', 'Age must be a number');
|
|
1878
|
-
* isValid = false;
|
|
1879
|
-
* }
|
|
1880
|
-
* return isValid;
|
|
1881
|
-
* };
|
|
1882
|
-
* ```
|
|
1883
|
-
*/
|
|
1884
|
-
type FormValidator<T extends FieldValues = FieldValues> = (state: T, setError: (field: keyof T, errorMessage: string) => void) => boolean;
|
|
1885
|
-
/**
|
|
1886
|
-
* Form component props
|
|
1887
|
-
*/
|
|
1888
|
-
type FormProps<TFormValues extends FieldValues = FieldValues> = Omit<FormHTMLAttributes<HTMLFormElement>, 'onSubmit' | 'ref'> & {
|
|
1889
|
-
/** Initial form values (uncontrolled mode) */
|
|
1890
|
-
defaultValues?: UseFormProps<TFormValues>['defaultValues'];
|
|
1891
|
-
/** Form submission handler - receives typed form values (supports both new and legacy signatures) */
|
|
1892
|
-
onSubmit?: FormSubmitHandler<TFormValues> | LegacyFormSubmitHandler<TFormValues>;
|
|
1893
|
-
/** Enable autosave functionality */
|
|
1894
|
-
autosave?: boolean;
|
|
1895
|
-
/** Autosave debounce delay in milliseconds */
|
|
1896
|
-
autosaveDelayMs?: number;
|
|
1897
|
-
/** RHF validation mode */
|
|
1898
|
-
mode?: UseFormProps<TFormValues>['mode'];
|
|
1899
|
-
/** Additional RHF options */
|
|
1900
|
-
formOptions?: Omit<UseFormProps<TFormValues>, 'defaultValues' | 'mode'>;
|
|
1901
|
-
/** Ref to the form element */
|
|
1902
|
-
formRef?: React.Ref<HTMLFormElement>;
|
|
1903
|
-
/**
|
|
1904
|
-
* @deprecated Use defaultValues instead. This prop is maintained for backwards compatibility only.
|
|
1905
|
-
* Alias for defaultValues - initial form values
|
|
1906
|
-
*/
|
|
1907
|
-
formState?: UseFormProps<TFormValues>['defaultValues'];
|
|
1908
|
-
/**
|
|
1909
|
-
* @deprecated Use React Hook Form's useWatch hook or field-level validation instead.
|
|
1910
|
-
* This prop is maintained for backwards compatibility only.
|
|
1911
|
-
* Callback fired whenever form values change
|
|
1912
|
-
*/
|
|
1913
|
-
onFormStateChange?: FormStateChangeHandler<TFormValues>;
|
|
1914
|
-
/**
|
|
1915
|
-
* @deprecated Use React Hook Form's resolver or field-level validation instead.
|
|
1916
|
-
* This prop is maintained for backwards compatibility only.
|
|
1917
|
-
* Custom validator function for the entire form
|
|
1918
|
-
*/
|
|
1919
|
-
formValidator?: FormValidator<TFormValues>;
|
|
1920
|
-
};
|
|
1921
|
-
/**
|
|
1922
|
-
* @deprecated Use FormProps instead
|
|
1923
|
-
* Legacy alias for backwards compatibility
|
|
1924
|
-
*/
|
|
1925
|
-
type FormProviderProps<TFormValues extends FieldValues = FieldValues> = Omit<FormProps<TFormValues>, 'className' | 'style' | 'formRef'>;
|
|
1926
|
-
|
|
1927
1867
|
/**
|
|
1928
1868
|
* Props for the Option component, extending LiHTMLAttributes<HTMLLIElement>.
|
|
1929
1869
|
* Represents an option within a Select component.
|
|
@@ -2506,87 +2446,56 @@ type DropzoneContentProps = {
|
|
|
2506
2446
|
declare const DropzoneContent: (props: DropzoneContentProps) => react_jsx_runtime.JSX.Element;
|
|
2507
2447
|
|
|
2508
2448
|
/**
|
|
2509
|
-
*
|
|
2449
|
+
* Custom hook to access form context values.
|
|
2450
|
+
* Provides direct access to all form state management functions and values.
|
|
2510
2451
|
*
|
|
2511
|
-
*
|
|
2512
|
-
*
|
|
2513
|
-
* <Form defaultValues={{ name: '' }} onSubmit={handleSubmit}>
|
|
2514
|
-
* <FormField name="name" label="Name">
|
|
2515
|
-
* <Input />
|
|
2516
|
-
* </FormField>
|
|
2517
|
-
* <Button actionType="submit">Submit</Button>
|
|
2518
|
-
* </Form>
|
|
2519
|
-
* ```
|
|
2452
|
+
* @throws {Error} If used outside of a Form component
|
|
2453
|
+
* @returns {FormContextValues} Object containing form state and control functions
|
|
2520
2454
|
*
|
|
2521
|
-
*
|
|
2455
|
+
* @example
|
|
2522
2456
|
* ```tsx
|
|
2523
|
-
*
|
|
2524
|
-
*
|
|
2525
|
-
*
|
|
2526
|
-
*
|
|
2527
|
-
|
|
2528
|
-
|
|
2529
|
-
|
|
2530
|
-
/**
|
|
2531
|
-
* Hook to enable autosave functionality for forms
|
|
2532
|
-
* Debounces changes and validates before submitting
|
|
2457
|
+
* const MyCustomField = () => {
|
|
2458
|
+
* const {
|
|
2459
|
+
* formState,
|
|
2460
|
+
* formErrors,
|
|
2461
|
+
* updateFieldValue,
|
|
2462
|
+
* resetForm
|
|
2463
|
+
* } = useForm();
|
|
2533
2464
|
*
|
|
2534
|
-
*
|
|
2535
|
-
*
|
|
2465
|
+
* return (
|
|
2466
|
+
* <div>
|
|
2467
|
+
* <input
|
|
2468
|
+
* value={formState.myField || ''}
|
|
2469
|
+
* onChange={(e) => updateFieldValue('myField', e.target.value)}
|
|
2470
|
+
* />
|
|
2471
|
+
* {formErrors.myField && <span>{formErrors.myField}</span>}
|
|
2472
|
+
* </div>
|
|
2473
|
+
* );
|
|
2474
|
+
* };
|
|
2475
|
+
* ```
|
|
2536
2476
|
*/
|
|
2537
|
-
declare const
|
|
2538
|
-
|
|
2477
|
+
declare const useForm: <T extends FormState = Partial<Record<string, FieldValue>>>() => FormContextValues<T>;
|
|
2539
2478
|
/**
|
|
2540
|
-
*
|
|
2541
|
-
* Use react-hook-form hooks directly instead:
|
|
2542
|
-
* - `useFormContext()` for setValue, setError, reset, handleSubmit
|
|
2543
|
-
* - `useWatch()` for form values
|
|
2544
|
-
* - `useFormState()` for errors, isDirty, isValid, etc.
|
|
2479
|
+
* Type-safe version of useForm that returns properly typed form context
|
|
2545
2480
|
*
|
|
2546
2481
|
* @example
|
|
2547
2482
|
* ```tsx
|
|
2548
|
-
*
|
|
2549
|
-
*
|
|
2483
|
+
* interface MyFormData {
|
|
2484
|
+
* name: string;
|
|
2485
|
+
* email: string;
|
|
2486
|
+
* age: number;
|
|
2487
|
+
* }
|
|
2550
2488
|
*
|
|
2551
|
-
*
|
|
2552
|
-
*
|
|
2553
|
-
*
|
|
2554
|
-
*
|
|
2555
|
-
*
|
|
2489
|
+
* const MyComponent = () => {
|
|
2490
|
+
* const form = useFormTyped<MyFormData>();
|
|
2491
|
+
* // form.formState is now typed as MyFormData
|
|
2492
|
+
* // form.formErrors is now typed as FormErrors<MyFormData>
|
|
2493
|
+
* };
|
|
2556
2494
|
* ```
|
|
2557
2495
|
*/
|
|
2558
|
-
declare const
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
/** Current form errors as { fieldName: "error message" } */
|
|
2562
|
-
formErrors: Record<keyof T, string>;
|
|
2563
|
-
/** Update a field value */
|
|
2564
|
-
updateFieldValue: (name: keyof T | string, value: FieldValue) => void;
|
|
2565
|
-
/** Set an error for a field */
|
|
2566
|
-
updateFieldError: (name: keyof T | string, errorMessage: string) => void;
|
|
2567
|
-
/** Reset form to initial values */
|
|
2568
|
-
resetForm: () => void;
|
|
2569
|
-
/** Submit handler (wrap your submit function) */
|
|
2570
|
-
onFormSubmit: react_hook_form.UseFormHandleSubmit<T, T>;
|
|
2571
|
-
};
|
|
2572
|
-
/**
|
|
2573
|
-
* @deprecated Use useForm instead, or better yet, use react-hook-form hooks directly.
|
|
2574
|
-
* Type-safe version of useForm that returns properly typed form context
|
|
2575
|
-
*/
|
|
2576
|
-
declare const useFormTyped: <T extends FieldValues>() => {
|
|
2577
|
-
/** Current form values */
|
|
2578
|
-
formState: T;
|
|
2579
|
-
/** Current form errors as { fieldName: "error message" } */
|
|
2580
|
-
formErrors: Record<keyof T, string>;
|
|
2581
|
-
/** Update a field value */
|
|
2582
|
-
updateFieldValue: (name: string | keyof T, value: FieldValue) => void;
|
|
2583
|
-
/** Set an error for a field */
|
|
2584
|
-
updateFieldError: (name: string | keyof T, errorMessage: string) => void;
|
|
2585
|
-
/** Reset form to initial values */
|
|
2586
|
-
resetForm: () => void;
|
|
2587
|
-
/** Submit handler (wrap your submit function) */
|
|
2588
|
-
onFormSubmit: react_hook_form.UseFormHandleSubmit<T, T>;
|
|
2589
|
-
};
|
|
2496
|
+
declare const useFormTyped: <T extends FormState>() => FormContextValues<T>;
|
|
2497
|
+
|
|
2498
|
+
declare const Form: <T extends FormState>(props: FormProviderProps<T> & FormProps) => react_jsx_runtime.JSX.Element;
|
|
2590
2499
|
|
|
2591
2500
|
type TableProps = TableHTMLAttributes<HTMLTableElement> & {
|
|
2592
2501
|
/**
|
|
@@ -2947,4 +2856,4 @@ declare const NotificationContext: React__default.Context<NotificationContextVal
|
|
|
2947
2856
|
declare const NotificationProvider: React__default.FC<NotificationProviderProps>;
|
|
2948
2857
|
declare const useNotification: () => NotificationContextValue;
|
|
2949
2858
|
|
|
2950
|
-
export { type AccessibilityActions, type AccessibilityProps, Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionCard, type ActionCardProps, ActionImage, type ActionImageProps,
|
|
2859
|
+
export { type AccessibilityActions, type AccessibilityProps, Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionCard, type ActionCardProps, ActionImage, type ActionImageProps, Breadcrumb, type BreadcrumbProps, Breadcrumbs, type BreadcrumbsProps, Breakpoint, type BreakpointProps, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, Card, type CardProps, Checkbox, CheckboxItem, type CheckboxItemProps, type CheckboxLabelAlignmentEnum, type CheckboxProps, type CheckboxSizeEnum, type CheckboxTypeEnum, Chip, ChipInput, type ChipInputProps, type ChipProps, ConditionalView, type ConditionalViewProps, ContextMenu, type ContextMenuProps, type CustomTimePickerConfig, CustomToggle, type CustomToggleProps, DateInput, type DateInputProps, DatePicker, type DatePickerProps, SortableItem as DraggableItem, SortableTrigger as DraggableItemTrigger, Dropzone, DropzoneClear, DropzoneContent, type DropzoneContentProps, type DropzoneContentTypeEnum, DropzoneFilename, DropzoneFilename as DropzonePreview, type DropzoneProps, DropzoneSupportedFormats as DropzoneReject, DropzoneTrigger as DropzoneRoot, DropzoneSupportedFormats, DropzoneTrigger, type FieldValidationFunction, type FieldValidators, type FieldValue, Form, type FormContextValues, type FormErrors, FormField, type FormFieldProps, type FormProps, type FormProviderProps, type FormState, type FormStateChangeHandler, type FormSubmitHandler, type FormValidator, Grid, GridItem, type GridItemProps, GridList, type GridListProps, type GridProps, Icon, IconButton, type IconButtonProps, type IconButtonStyleEnum, type IconProps, type IconSizeEnum, type IconStyleEnum, Image, type ImageFitEnum, type ImageProps, Input, type InputProps, type InputTypeEnum, List, ListItem, type ListItemProps$1 as ListItemProps, type ListProps, Modal, type ModalComponentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, ModalProvider, type ModalProviderProps, Nav, NavItem, type NavItemProps, NavLink, type NavLinkProps, type NavProps, type Notification, type NotificationContainerProps, NotificationContext, type NotificationOffset, type NotificationPosition, NotificationProvider, type NotificationTrigger, Option, type OptionLike, type OptionLikeKey, type OptionProps, type OverlayDirectionEnum, Pagination, PaginationNumberField, type PaginationNumberFieldProps, type PaginationProps, Password, Popover, type PopoverHandle, type PopoverProps, ProgressBar, type ProgressBarProps, RadioButton, RadioButtonItem, type RadioButtonItemProps, type RadioButtonLabelAlignmentEnum, type RadioButtonProps, type RadioButtonSizeEnum, RadioGroup, type RadioGroupProps, RenderStateView, type RenderStateViewProps, RepeaterList, type RepeaterListProps, type RequiredFields, ResponsiveComponent, type ResponsiveComponentProps, Search, type SearchCallback, type SearchStyleEnum as SearchModeEnum, type SearchProps, Select, SelectListItem, type SelectListItemProps, type SelectProps, SelectProvider, SlideOutPanel, type SlideOutPanelDirectionEnum, type SlideOutPanelProps, type SlideOutPanelSizeEnum, Slider, type SliderProps, Spinner, type SpinnerProps, TabContent, type TabContentProps, TabItem, type TabItemProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsProps, Text, TextArea, type TextAreaProps, type TextDecorationEnum, type TextProps, type TextTypeEnum, type TextWeightEnum, ThemeContext, type ThemeContextType, ThemeProvider, type ThemeProviderProps, Toggle, ToggleButton, type ToggleButtonProps, type ToggleLabelAlignmentEnum, type ToggleProps, Tooltip, type TooltipProps, type TriggerNotificationPayload, type UploadedFileMetadata, type UseModalReturn, WrapTextNodes, type WrapTextNodesProps, applyPropsToChildren, getClickAccessibilityProps, mergeRefs, useDebounce, useDropzoneContext, useForm, useFormTyped, useInflateView, useModal, useNotification, useSelectContext, useTab };
|