@delightui/components 0.1.160 → 0.1.162-alpha.0
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 +28 -2
- package/dist/cjs/components/molecules/FormField/FormField.presenter.d.ts +14 -8
- package/dist/cjs/components/molecules/FormField/FormField.types.d.ts +85 -52
- package/dist/cjs/components/molecules/FormField/FormField.utils.d.ts +8 -11
- package/dist/cjs/components/molecules/FormField/index.d.ts +1 -2
- package/dist/cjs/components/molecules/FormField/useSafeController.d.ts +14 -0
- package/dist/cjs/components/molecules/FormField/useSafeFormContext.d.ts +8 -0
- package/dist/cjs/components/molecules/Modal/DemoModal.d.ts +1 -0
- package/dist/cjs/components/molecules/Modal/ModalContext/ModalContext.types.d.ts +24 -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/Form.d.ts +22 -1
- package/dist/cjs/components/organisms/Form/Form.presenter.d.ts +21 -0
- package/dist/cjs/components/organisms/Form/Form.types.d.ts +27 -131
- package/dist/cjs/components/organisms/Form/examples/DropzoneFormExample.d.ts +6 -0
- package/dist/cjs/components/organisms/Form/examples/UpdatedFormExample.d.ts +2 -0
- package/dist/cjs/components/organisms/Form/{UseFormExample.d.ts → examples/UseFormExample.d.ts} +0 -3
- package/dist/cjs/components/organisms/Form/index.d.ts +4 -4
- package/dist/cjs/components/organisms/Form/useAutosave.d.ts +10 -0
- 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 +28 -2
- package/dist/esm/components/molecules/FormField/FormField.presenter.d.ts +14 -8
- package/dist/esm/components/molecules/FormField/FormField.types.d.ts +85 -52
- package/dist/esm/components/molecules/FormField/FormField.utils.d.ts +8 -11
- package/dist/esm/components/molecules/FormField/index.d.ts +1 -2
- package/dist/esm/components/molecules/FormField/useSafeController.d.ts +14 -0
- package/dist/esm/components/molecules/FormField/useSafeFormContext.d.ts +8 -0
- package/dist/esm/components/molecules/Modal/DemoModal.d.ts +1 -0
- package/dist/esm/components/molecules/Modal/ModalContext/ModalContext.types.d.ts +24 -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/Form.d.ts +22 -1
- package/dist/esm/components/organisms/Form/Form.presenter.d.ts +21 -0
- package/dist/esm/components/organisms/Form/Form.types.d.ts +27 -131
- package/dist/esm/components/organisms/Form/examples/DropzoneFormExample.d.ts +6 -0
- package/dist/esm/components/organisms/Form/examples/UpdatedFormExample.d.ts +2 -0
- package/dist/esm/components/organisms/Form/{UseFormExample.d.ts → examples/UseFormExample.d.ts} +0 -3
- package/dist/esm/components/organisms/Form/index.d.ts +4 -4
- package/dist/esm/components/organisms/Form/useAutosave.d.ts +10 -0
- package/dist/esm/library.js +3 -3
- package/dist/esm/library.js.map +1 -1
- package/dist/index.d.ts +172 -232
- package/docs/FORM_MIGRATION_GUIDE.md +631 -0
- package/docs/components/molecules/FormField.md +129 -34
- package/docs/components/organisms/Form.md +858 -162
- package/package.json +4 -1
- package/dist/cjs/components/organisms/Form/DropzoneFormExample.d.ts +0 -6
- package/dist/cjs/components/organisms/Form/Form.utils.d.ts +0 -2
- package/dist/cjs/components/organisms/Form/FormContext.d.ts +0 -5
- package/dist/cjs/components/organisms/Form/UpdatedFormExample.d.ts +0 -23
- package/dist/cjs/components/organisms/Form/useForm.d.ts +0 -50
- package/dist/esm/components/organisms/Form/DropzoneFormExample.d.ts +0 -6
- package/dist/esm/components/organisms/Form/Form.utils.d.ts +0 -2
- package/dist/esm/components/organisms/Form/FormContext.d.ts +0 -5
- package/dist/esm/components/organisms/Form/UpdatedFormExample.d.ts +0 -23
- package/dist/esm/components/organisms/Form/useForm.d.ts +0 -50
- /package/dist/cjs/components/organisms/Form/{AutosaveFormExample.d.ts → examples/AutosaveFormExample.d.ts} +0 -0
- /package/dist/esm/components/organisms/Form/{AutosaveFormExample.d.ts → examples/AutosaveFormExample.d.ts} +0 -0
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
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,
|
|
3
|
+
import React__default, { ImgHTMLAttributes, SyntheticEvent, HTMLAttributes, ReactNode, MouseEvent, InputHTMLAttributes, TextareaHTMLAttributes, ComponentType, LiHTMLAttributes, CSSProperties, TableHTMLAttributes, TdHTMLAttributes, ReactElement, AriaRole, KeyboardEventHandler, Ref } from 'react';
|
|
4
|
+
import { FieldValues, Path, PathValue, UseFormProps } from 'react-hook-form';
|
|
4
5
|
import { LinkProps } from 'react-router-dom';
|
|
5
6
|
import { Plugin } from 'flatpickr/dist/types/options';
|
|
6
7
|
import FlatPickr, { DateTimePickerProps } from 'react-flatpickr';
|
|
@@ -188,201 +189,20 @@ interface IconButtonProps extends Omit<ButtonProps, 'leadingIcon' | 'trailingIco
|
|
|
188
189
|
declare const IconButton: (props: IconButtonProps) => react_jsx_runtime.JSX.Element;
|
|
189
190
|
|
|
190
191
|
/**
|
|
191
|
-
* Type representing
|
|
192
|
+
* Type representing allowed field values
|
|
192
193
|
*/
|
|
193
|
-
type FieldValue = string | number | Date | boolean | File | Array<string | number | Date | File>;
|
|
194
|
+
type FieldValue = string | number | Date | boolean | File | null | Array<string | number | Date | File | Record<string, unknown>> | Record<string, unknown>;
|
|
194
195
|
/**
|
|
195
|
-
*
|
|
196
|
-
*
|
|
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
|
|
196
|
+
* Props that all controlled form components should accept
|
|
197
|
+
* This allows them to work both standalone and within FormField
|
|
378
198
|
*/
|
|
379
199
|
type ControlledFormComponentProps<T extends FieldValue> = {
|
|
380
200
|
/**
|
|
381
|
-
*
|
|
201
|
+
* The initial value for the field
|
|
382
202
|
*/
|
|
383
203
|
initialValue?: T;
|
|
384
204
|
/**
|
|
385
|
-
*
|
|
205
|
+
* The initial checked state (for checkboxes/toggles)
|
|
386
206
|
*/
|
|
387
207
|
checked?: boolean;
|
|
388
208
|
/**
|
|
@@ -414,6 +234,83 @@ type ControlledFormComponentProps<T extends FieldValue> = {
|
|
|
414
234
|
*/
|
|
415
235
|
id?: string;
|
|
416
236
|
};
|
|
237
|
+
/**
|
|
238
|
+
* Field-level validation function
|
|
239
|
+
* Returns error message string if invalid, undefined if valid
|
|
240
|
+
*/
|
|
241
|
+
type FieldValidationFunction<TValue = FieldValue> = (value: TValue) => string | undefined;
|
|
242
|
+
/**
|
|
243
|
+
* Field-level async validation function
|
|
244
|
+
* Returns error message string if invalid, undefined if valid
|
|
245
|
+
*/
|
|
246
|
+
type AsyncFieldValidationFunction<TValue = FieldValue> = (value: TValue) => Promise<string | undefined>;
|
|
247
|
+
/**
|
|
248
|
+
* FormField component props for use within a Form
|
|
249
|
+
*/
|
|
250
|
+
type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = {
|
|
251
|
+
/** Field name (must match form value key) - type-safe */
|
|
252
|
+
name: TName;
|
|
253
|
+
/** Field label */
|
|
254
|
+
label?: string;
|
|
255
|
+
/** Display name for validation messages (defaults to label or name) */
|
|
256
|
+
displayName?: string;
|
|
257
|
+
/**
|
|
258
|
+
* Child component - will be cloned with injected props:
|
|
259
|
+
* value, onValueChange, onBlur, ref, disabled, invalid, required, id, name
|
|
260
|
+
*/
|
|
261
|
+
children: ReactNode;
|
|
262
|
+
/** Field is required */
|
|
263
|
+
required?: boolean;
|
|
264
|
+
/** Sync validation function */
|
|
265
|
+
validate?: FieldValidationFunction<PathValue<TFieldValues, TName>>;
|
|
266
|
+
/** Async validation function */
|
|
267
|
+
asyncValidate?: AsyncFieldValidationFunction<PathValue<TFieldValues, TName>>;
|
|
268
|
+
/** Default value for this field */
|
|
269
|
+
defaultValue?: PathValue<TFieldValues, TName>;
|
|
270
|
+
/** Info message to display */
|
|
271
|
+
message?: string;
|
|
272
|
+
/** Disabled state */
|
|
273
|
+
disabled?: boolean;
|
|
274
|
+
/** External invalid state */
|
|
275
|
+
invalid?: boolean;
|
|
276
|
+
/** Info icon element */
|
|
277
|
+
infoIcon?: ReactNode;
|
|
278
|
+
/** Field ID */
|
|
279
|
+
id?: string;
|
|
280
|
+
};
|
|
281
|
+
/**
|
|
282
|
+
* Standalone FormField props (works without Form context)
|
|
283
|
+
*/
|
|
284
|
+
type StandaloneFieldProps<TValue = FieldValue> = {
|
|
285
|
+
/** Field name */
|
|
286
|
+
name: string;
|
|
287
|
+
/** Field label */
|
|
288
|
+
label?: string;
|
|
289
|
+
/** Display name for validation messages */
|
|
290
|
+
displayName?: string;
|
|
291
|
+
/** Child component to render */
|
|
292
|
+
children: ReactNode;
|
|
293
|
+
/** Field is required */
|
|
294
|
+
required?: boolean;
|
|
295
|
+
/** Sync validation function */
|
|
296
|
+
validate?: FieldValidationFunction<TValue>;
|
|
297
|
+
/** Async validation function */
|
|
298
|
+
asyncValidate?: AsyncFieldValidationFunction<TValue>;
|
|
299
|
+
/** Controlled value */
|
|
300
|
+
value?: TValue;
|
|
301
|
+
/** Controlled onChange */
|
|
302
|
+
onChange?: (value: TValue) => void;
|
|
303
|
+
/** External error */
|
|
304
|
+
error?: string;
|
|
305
|
+
/** Info message */
|
|
306
|
+
message?: string;
|
|
307
|
+
/** Disabled state */
|
|
308
|
+
disabled?: boolean;
|
|
309
|
+
/** Info icon element */
|
|
310
|
+
infoIcon?: ReactNode;
|
|
311
|
+
/** Field ID */
|
|
312
|
+
id?: string;
|
|
313
|
+
};
|
|
417
314
|
|
|
418
315
|
/**
|
|
419
316
|
* Enum for different input types.
|
|
@@ -1419,7 +1316,32 @@ type DatePickerProps = Omit<DatePickerBaseSharedProps, 'noCalendar' | 'inline'>
|
|
|
1419
1316
|
|
|
1420
1317
|
declare const DatePicker: (props: DatePickerProps) => react_jsx_runtime.JSX.Element;
|
|
1421
1318
|
|
|
1422
|
-
|
|
1319
|
+
/**
|
|
1320
|
+
* Smart FormField component that works both inside and outside Form context
|
|
1321
|
+
*
|
|
1322
|
+
* Usage inside Form:
|
|
1323
|
+
* ```tsx
|
|
1324
|
+
* <Form defaultValues={{ email: '' }}>
|
|
1325
|
+
* <FormField name="email" label="Email" required>
|
|
1326
|
+
* <Input placeholder="Enter email" />
|
|
1327
|
+
* </FormField>
|
|
1328
|
+
* </Form>
|
|
1329
|
+
* ```
|
|
1330
|
+
*
|
|
1331
|
+
* Usage standalone:
|
|
1332
|
+
* ```tsx
|
|
1333
|
+
* <FormField
|
|
1334
|
+
* name="email"
|
|
1335
|
+
* label="Email"
|
|
1336
|
+
* value={email}
|
|
1337
|
+
* onChange={setEmail}
|
|
1338
|
+
* required
|
|
1339
|
+
* >
|
|
1340
|
+
* <Input placeholder="Enter email" />
|
|
1341
|
+
* </FormField>
|
|
1342
|
+
* ```
|
|
1343
|
+
*/
|
|
1344
|
+
declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>(props: FormFieldProps<TFieldValues, TName> | StandaloneFieldProps) => react_jsx_runtime.JSX.Element;
|
|
1423
1345
|
|
|
1424
1346
|
type GridProps = HTMLAttributes<HTMLDivElement> & {
|
|
1425
1347
|
columns?: number;
|
|
@@ -1544,6 +1466,13 @@ type UseModalReturn<T extends ModalComponentProps> = {
|
|
|
1544
1466
|
closeModal: () => void;
|
|
1545
1467
|
/** The unique identifier for this modal instance */
|
|
1546
1468
|
modalId: string;
|
|
1469
|
+
/**
|
|
1470
|
+
* Updates the props of the modal instance managed by this hook.
|
|
1471
|
+
*
|
|
1472
|
+
* @param newProps - The new props to merge with the existing props
|
|
1473
|
+
* @returns void
|
|
1474
|
+
*/
|
|
1475
|
+
updateModal: (newProps: Partial<T>) => void;
|
|
1547
1476
|
};
|
|
1548
1477
|
|
|
1549
1478
|
/**
|
|
@@ -1857,6 +1786,38 @@ type RadioGroupProps = ControlledFormComponentProps<string | number> & {
|
|
|
1857
1786
|
|
|
1858
1787
|
declare const RadioGroup: (props: RadioGroupProps) => react_jsx_runtime.JSX.Element;
|
|
1859
1788
|
|
|
1789
|
+
/**
|
|
1790
|
+
* Form submission handler
|
|
1791
|
+
*/
|
|
1792
|
+
type FormSubmitHandler<TFormValues extends FieldValues = FieldValues> = (values: TFormValues) => void | Promise<void>;
|
|
1793
|
+
/**
|
|
1794
|
+
* Form component props
|
|
1795
|
+
*/
|
|
1796
|
+
type FormProps<TFormValues extends FieldValues = FieldValues> = {
|
|
1797
|
+
children: ReactNode;
|
|
1798
|
+
/** Initial form values (uncontrolled mode) */
|
|
1799
|
+
defaultValues?: UseFormProps<TFormValues>['defaultValues'];
|
|
1800
|
+
/** Form submission handler */
|
|
1801
|
+
onSubmit?: FormSubmitHandler<TFormValues>;
|
|
1802
|
+
/** Enable autosave functionality */
|
|
1803
|
+
autosave?: boolean;
|
|
1804
|
+
/** Autosave debounce delay in milliseconds */
|
|
1805
|
+
autosaveDelayMs?: number;
|
|
1806
|
+
/** RHF validation mode */
|
|
1807
|
+
mode?: UseFormProps<TFormValues>['mode'];
|
|
1808
|
+
/** Additional RHF options */
|
|
1809
|
+
formOptions?: Omit<UseFormProps<TFormValues>, 'defaultValues' | 'mode'>;
|
|
1810
|
+
/** Form HTML attributes */
|
|
1811
|
+
className?: string;
|
|
1812
|
+
style?: React.CSSProperties;
|
|
1813
|
+
formRef?: React.Ref<HTMLFormElement>;
|
|
1814
|
+
};
|
|
1815
|
+
/**
|
|
1816
|
+
* @deprecated Use FormProps instead
|
|
1817
|
+
* Legacy alias for backwards compatibility
|
|
1818
|
+
*/
|
|
1819
|
+
type FormProviderProps<TFormValues extends FieldValues = FieldValues> = Omit<FormProps<TFormValues>, 'className' | 'style' | 'formRef'>;
|
|
1820
|
+
|
|
1860
1821
|
/**
|
|
1861
1822
|
* Props for the Option component, extending LiHTMLAttributes<HTMLLIElement>.
|
|
1862
1823
|
* Represents an option within a Select component.
|
|
@@ -2439,56 +2400,35 @@ type DropzoneContentProps = {
|
|
|
2439
2400
|
declare const DropzoneContent: (props: DropzoneContentProps) => react_jsx_runtime.JSX.Element;
|
|
2440
2401
|
|
|
2441
2402
|
/**
|
|
2442
|
-
*
|
|
2443
|
-
* Provides direct access to all form state management functions and values.
|
|
2444
|
-
*
|
|
2445
|
-
* @throws {Error} If used outside of a Form component
|
|
2446
|
-
* @returns {FormContextValues} Object containing form state and control functions
|
|
2403
|
+
* Form component - clean wrapper around React Hook Form
|
|
2447
2404
|
*
|
|
2448
|
-
*
|
|
2405
|
+
* Usage:
|
|
2449
2406
|
* ```tsx
|
|
2450
|
-
*
|
|
2451
|
-
*
|
|
2452
|
-
*
|
|
2453
|
-
*
|
|
2454
|
-
*
|
|
2455
|
-
*
|
|
2456
|
-
* } = useForm();
|
|
2457
|
-
*
|
|
2458
|
-
* return (
|
|
2459
|
-
* <div>
|
|
2460
|
-
* <input
|
|
2461
|
-
* value={formState.myField || ''}
|
|
2462
|
-
* onChange={(e) => updateFieldValue('myField', e.target.value)}
|
|
2463
|
-
* />
|
|
2464
|
-
* {formErrors.myField && <span>{formErrors.myField}</span>}
|
|
2465
|
-
* </div>
|
|
2466
|
-
* );
|
|
2467
|
-
* };
|
|
2407
|
+
* <Form defaultValues={{ name: '' }} onSubmit={handleSubmit}>
|
|
2408
|
+
* <FormField name="name" label="Name">
|
|
2409
|
+
* <Input />
|
|
2410
|
+
* </FormField>
|
|
2411
|
+
* <Button actionType="submit">Submit</Button>
|
|
2412
|
+
* </Form>
|
|
2468
2413
|
* ```
|
|
2469
|
-
*/
|
|
2470
|
-
declare const useForm: <T extends FormState = Partial<Record<string, FieldValue>>>() => FormContextValues<T>;
|
|
2471
|
-
/**
|
|
2472
|
-
* Type-safe version of useForm that returns properly typed form context
|
|
2473
2414
|
*
|
|
2474
|
-
*
|
|
2415
|
+
* Access RHF methods anywhere in form:
|
|
2475
2416
|
* ```tsx
|
|
2476
|
-
*
|
|
2477
|
-
*
|
|
2478
|
-
*
|
|
2479
|
-
* age: number;
|
|
2480
|
-
* }
|
|
2481
|
-
*
|
|
2482
|
-
* const MyComponent = () => {
|
|
2483
|
-
* const form = useFormTyped<MyFormData>();
|
|
2484
|
-
* // form.formState is now typed as MyFormData
|
|
2485
|
-
* // form.formErrors is now typed as FormErrors<MyFormData>
|
|
2486
|
-
* };
|
|
2417
|
+
* import { useFormContext, useWatch } from 'react-hook-form';
|
|
2418
|
+
* const { setValue, reset } = useFormContext();
|
|
2419
|
+
* const name = useWatch({ name: 'name' });
|
|
2487
2420
|
* ```
|
|
2488
2421
|
*/
|
|
2489
|
-
declare const
|
|
2422
|
+
declare const Form: <TFormValues extends FieldValues = FieldValues>(props: FormProps<TFormValues>) => react_jsx_runtime.JSX.Element;
|
|
2490
2423
|
|
|
2491
|
-
|
|
2424
|
+
/**
|
|
2425
|
+
* Hook to enable autosave functionality for forms
|
|
2426
|
+
* Debounces changes and validates before submitting
|
|
2427
|
+
*
|
|
2428
|
+
* Note: Uses formState.isDirty to detect changes instead of watching all values
|
|
2429
|
+
* for better performance
|
|
2430
|
+
*/
|
|
2431
|
+
declare const useAutosave: <TFormValues extends FieldValues>(enabled: boolean, onSubmit: FormSubmitHandler<TFormValues> | undefined, delayMs?: number) => void;
|
|
2492
2432
|
|
|
2493
2433
|
type TableProps = TableHTMLAttributes<HTMLTableElement> & {
|
|
2494
2434
|
/**
|
|
@@ -2849,4 +2789,4 @@ declare const NotificationContext: React__default.Context<NotificationContextVal
|
|
|
2849
2789
|
declare const NotificationProvider: React__default.FC<NotificationProviderProps>;
|
|
2850
2790
|
declare const useNotification: () => NotificationContextValue;
|
|
2851
2791
|
|
|
2852
|
-
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
|
|
2792
|
+
export { type AccessibilityActions, type AccessibilityProps, Accordion, AccordionDetails, AccordionGroup, AccordionSummary, ActionCard, type ActionCardProps, ActionImage, type ActionImageProps, type AsyncFieldValidationFunction, 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 ControlledFormComponentProps, 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 FieldValue, Form, FormField, type FormFieldProps, type FormProps, type FormProviderProps, type FormSubmitHandler, 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, 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, type StandaloneFieldProps, 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, useAutosave, useDebounce, useDropzoneContext, useInflateView, useModal, useNotification, useSelectContext, useTab };
|