@delightui/components 0.1.162-alpha.5 → 0.1.162
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
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & import("
|
|
1
|
+
declare const Checkbox: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
|
|
2
2
|
children?: React.ReactNode;
|
|
3
3
|
size?: import("./Checkbox.types").CheckboxSizeEnum;
|
|
4
4
|
type?: import("./Checkbox.types").CheckboxTypeEnum;
|
|
@@ -271,8 +271,8 @@ declare const usePresenter: (props: CheckboxProps) => {
|
|
|
271
271
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
|
|
272
272
|
pattern?: string | undefined;
|
|
273
273
|
step?: number | string | undefined;
|
|
274
|
-
accept?: string | undefined;
|
|
275
274
|
autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
|
|
275
|
+
accept?: string | undefined;
|
|
276
276
|
capture?: boolean | "user" | "environment" | undefined;
|
|
277
277
|
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
|
|
278
278
|
formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const CheckboxItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & import("
|
|
2
|
+
declare const CheckboxItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
|
|
3
3
|
children?: React.ReactNode;
|
|
4
4
|
size?: import("..").CheckboxSizeEnum;
|
|
5
5
|
type?: import("..").CheckboxTypeEnum;
|
|
@@ -278,8 +278,9 @@ declare const usePresenter: (props: CheckboxItemProps) => {
|
|
|
278
278
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
|
|
279
279
|
pattern?: string | undefined;
|
|
280
280
|
step?: number | string | undefined;
|
|
281
|
-
accept?: string | undefined;
|
|
282
281
|
autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
|
|
282
|
+
name?: string | undefined;
|
|
283
|
+
accept?: string | undefined;
|
|
283
284
|
capture?: boolean | "user" | "environment" | undefined;
|
|
284
285
|
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
|
|
285
286
|
formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
|
|
@@ -292,7 +293,6 @@ declare const usePresenter: (props: CheckboxItemProps) => {
|
|
|
292
293
|
min?: number | string | undefined;
|
|
293
294
|
minLength?: number | undefined;
|
|
294
295
|
multiple?: boolean | undefined;
|
|
295
|
-
name?: string | undefined;
|
|
296
296
|
placeholder?: string | undefined;
|
|
297
297
|
readOnly?: boolean | undefined;
|
|
298
298
|
initialValue?: boolean | undefined;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const CustomToggle: import("react").ForwardRefExoticComponent<import("
|
|
1
|
+
declare const CustomToggle: import("react").ForwardRefExoticComponent<import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
|
|
2
2
|
offContent?: import("react").ReactNode;
|
|
3
3
|
onContent?: import("react").ReactNode;
|
|
4
4
|
className?: string;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & import("
|
|
1
|
+
declare const Input: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<string> & {
|
|
2
2
|
inputType?: import("./Input.types").InputTypeEnum;
|
|
3
3
|
leadingIcon?: React.ReactNode;
|
|
4
4
|
trailingIcon?: React.ReactNode;
|
|
@@ -280,8 +280,9 @@ declare const usePresenter: (props: InputProps, ref: React.ForwardedRef<HTMLInpu
|
|
|
280
280
|
pattern?: string | undefined;
|
|
281
281
|
size?: number | undefined;
|
|
282
282
|
step?: number | string | undefined;
|
|
283
|
-
accept?: string | undefined;
|
|
284
283
|
autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
|
|
284
|
+
name?: string | undefined;
|
|
285
|
+
accept?: string | undefined;
|
|
285
286
|
capture?: boolean | "user" | "environment" | undefined;
|
|
286
287
|
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
|
|
287
288
|
formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
|
|
@@ -294,7 +295,6 @@ declare const usePresenter: (props: InputProps, ref: React.ForwardedRef<HTMLInpu
|
|
|
294
295
|
min?: number | string | undefined;
|
|
295
296
|
minLength?: number | undefined;
|
|
296
297
|
multiple?: boolean | undefined;
|
|
297
|
-
name?: string | undefined;
|
|
298
298
|
placeholder?: string | undefined;
|
|
299
299
|
readOnly?: boolean | undefined;
|
|
300
300
|
initialValue?: string | undefined;
|
|
@@ -287,8 +287,9 @@ declare const usePresenter: (props: PasswordProps) => {
|
|
|
287
287
|
size?: number | undefined;
|
|
288
288
|
leadingIcon?: React.ReactNode;
|
|
289
289
|
step?: number | string | undefined;
|
|
290
|
-
accept?: string | undefined;
|
|
291
290
|
autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
|
|
291
|
+
name?: string | undefined;
|
|
292
|
+
accept?: string | undefined;
|
|
292
293
|
capture?: boolean | "user" | "environment" | undefined;
|
|
293
294
|
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
|
|
294
295
|
formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
|
|
@@ -301,7 +302,6 @@ declare const usePresenter: (props: PasswordProps) => {
|
|
|
301
302
|
min?: number | string | undefined;
|
|
302
303
|
minLength?: number | undefined;
|
|
303
304
|
multiple?: boolean | undefined;
|
|
304
|
-
name?: string | undefined;
|
|
305
305
|
placeholder?: string | undefined;
|
|
306
306
|
readOnly?: boolean | undefined;
|
|
307
307
|
onValueChange?: ((value: string) => void) | undefined;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size"> & import("
|
|
1
|
+
declare const RadioButton: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<string | number> & {
|
|
2
2
|
children?: React.ReactNode;
|
|
3
3
|
size?: import("./RadioButton.types").RadioButtonSizeEnum;
|
|
4
4
|
labelAlignment?: import("./RadioButton.types").RadioButtonLabelAlignmentEnum;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const RadioButtonItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size"> & import("
|
|
2
|
+
declare const RadioButtonItem: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "type" | "size"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<string | number> & {
|
|
3
3
|
children?: React.ReactNode;
|
|
4
4
|
size?: import("..").RadioButtonSizeEnum;
|
|
5
5
|
labelAlignment?: import("..").RadioButtonLabelAlignmentEnum;
|
|
@@ -285,8 +285,9 @@ declare const usePresenter: (props: RadioButtonItemProps) => {
|
|
|
285
285
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLInputElement> | undefined;
|
|
286
286
|
pattern?: string | undefined;
|
|
287
287
|
step?: number | string | undefined;
|
|
288
|
-
accept?: string | undefined;
|
|
289
288
|
autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
|
|
289
|
+
name?: string | undefined;
|
|
290
|
+
accept?: string | undefined;
|
|
290
291
|
capture?: boolean | "user" | "environment" | undefined;
|
|
291
292
|
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
|
|
292
293
|
formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
|
|
@@ -299,7 +300,6 @@ declare const usePresenter: (props: RadioButtonItemProps) => {
|
|
|
299
300
|
min?: number | string | undefined;
|
|
300
301
|
minLength?: number | undefined;
|
|
301
302
|
multiple?: boolean | undefined;
|
|
302
|
-
name?: string | undefined;
|
|
303
303
|
placeholder?: string | undefined;
|
|
304
304
|
readOnly?: boolean | undefined;
|
|
305
305
|
initialValue?: string | number | undefined;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
declare const TextArea: import("react").ForwardRefExoticComponent<Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & import("
|
|
1
|
+
declare const TextArea: import("react").ForwardRefExoticComponent<Omit<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<string> & import("react").RefAttributes<HTMLTextAreaElement>>;
|
|
2
2
|
export default TextArea;
|
|
@@ -273,9 +273,9 @@ declare const usePresenter: (props: TextAreaProps) => {
|
|
|
273
273
|
onTransitionEnd?: import("react").TransitionEventHandler<HTMLTextAreaElement> | undefined;
|
|
274
274
|
onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLTextAreaElement> | undefined;
|
|
275
275
|
autoComplete?: string | undefined;
|
|
276
|
+
name?: string | undefined;
|
|
276
277
|
maxLength?: number | undefined;
|
|
277
278
|
minLength?: number | undefined;
|
|
278
|
-
name?: string | undefined;
|
|
279
279
|
placeholder?: string | undefined;
|
|
280
280
|
readOnly?: boolean | undefined;
|
|
281
281
|
cols?: number | undefined;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
declare const Toggle: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & import("
|
|
1
|
+
declare const Toggle: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "checked" | "value" | "type"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
|
|
2
2
|
children?: React.ReactNode;
|
|
3
3
|
labelAlignment?: import("./Toggle.types").ToggleLabelAlignmentEnum;
|
|
4
4
|
} & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -278,8 +278,9 @@ declare const usePresenter: (props: ToggleProps) => {
|
|
|
278
278
|
pattern?: string | undefined;
|
|
279
279
|
size?: number | undefined;
|
|
280
280
|
step?: number | string | undefined;
|
|
281
|
-
accept?: string | undefined;
|
|
282
281
|
autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
|
|
282
|
+
name?: string | undefined;
|
|
283
|
+
accept?: string | undefined;
|
|
283
284
|
capture?: boolean | "user" | "environment" | undefined;
|
|
284
285
|
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
|
|
285
286
|
formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
|
|
@@ -292,7 +293,6 @@ declare const usePresenter: (props: ToggleProps) => {
|
|
|
292
293
|
min?: number | string | undefined;
|
|
293
294
|
minLength?: number | undefined;
|
|
294
295
|
multiple?: boolean | undefined;
|
|
295
|
-
name?: string | undefined;
|
|
296
296
|
placeholder?: string | undefined;
|
|
297
297
|
readOnly?: boolean | undefined;
|
|
298
298
|
initialValue?: boolean | undefined;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
declare const ToggleButton: React.ForwardRefExoticComponent<Omit<import("../Button").ButtonProps, "type" | "actionType"> & import("
|
|
2
|
+
declare const ToggleButton: React.ForwardRefExoticComponent<Omit<import("../Button").ButtonProps, "type" | "actionType"> & import("../../molecules/FormField/FormField.types").ControlledFormComponentProps<boolean> & {
|
|
3
3
|
defaultChecked?: boolean;
|
|
4
4
|
children?: React.ReactNode;
|
|
5
5
|
className?: string;
|
|
@@ -1,29 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Smart FormField component that works both inside and outside Form context
|
|
5
|
-
*
|
|
6
|
-
* Usage inside Form:
|
|
7
|
-
* ```tsx
|
|
8
|
-
* <Form defaultValues={{ email: '' }}>
|
|
9
|
-
* <FormField name="email" label="Email" required>
|
|
10
|
-
* <Input placeholder="Enter email" />
|
|
11
|
-
* </FormField>
|
|
12
|
-
* </Form>
|
|
13
|
-
* ```
|
|
14
|
-
*
|
|
15
|
-
* Usage standalone:
|
|
16
|
-
* ```tsx
|
|
17
|
-
* <FormField
|
|
18
|
-
* name="email"
|
|
19
|
-
* label="Email"
|
|
20
|
-
* value={email}
|
|
21
|
-
* onChange={setEmail}
|
|
22
|
-
* required
|
|
23
|
-
* >
|
|
24
|
-
* <Input placeholder="Enter email" />
|
|
25
|
-
* </FormField>
|
|
26
|
-
* ```
|
|
27
|
-
*/
|
|
28
|
-
declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>(props: FormFieldProps<TFieldValues, TName> | StandaloneFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
1
|
+
import { FormFieldProps } from './FormField.types';
|
|
2
|
+
declare const FormField: (props: FormFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
29
3
|
export default FormField;
|
|
@@ -1,25 +1,16 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Presenter hook for FormField
|
|
5
|
-
* Handles both Form-integrated and standalone modes
|
|
6
|
-
*/
|
|
7
|
-
declare const usePresenter: <TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>>(props: FormFieldProps<TFieldValues, TName> | StandaloneFieldProps) => {
|
|
8
|
-
fieldId: string;
|
|
1
|
+
import { FormFieldProps } from './FormField.types';
|
|
2
|
+
declare const usePresenter: (props: FormFieldProps) => {
|
|
9
3
|
label: string | undefined;
|
|
10
4
|
required: boolean | undefined;
|
|
11
|
-
messageText: string | undefined;
|
|
12
|
-
isInvalid: boolean;
|
|
13
|
-
isValidating: boolean;
|
|
14
5
|
infoIcon: import("react").ReactNode;
|
|
6
|
+
children: import("react").ReactNode;
|
|
7
|
+
messageText: string | undefined;
|
|
8
|
+
fieldId: string;
|
|
15
9
|
variantProps: {
|
|
16
10
|
'component-variant': string;
|
|
17
11
|
};
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
className: string | undefined;
|
|
22
|
-
style: import("react").CSSProperties | undefined;
|
|
23
|
-
hasMessage: boolean | undefined;
|
|
12
|
+
showMessageContainer: string | true | undefined;
|
|
13
|
+
showErrorIcon: string | false | undefined;
|
|
14
|
+
showInfoIcon: string | false | undefined;
|
|
24
15
|
};
|
|
25
16
|
export default usePresenter;
|
|
@@ -1,20 +1,64 @@
|
|
|
1
|
-
import type { HTMLAttributes
|
|
2
|
-
import
|
|
1
|
+
import type { HTMLAttributes } from 'react';
|
|
2
|
+
import { FieldValidationFunction, FieldValue } from '../../organisms/Form/Form.types';
|
|
3
3
|
/**
|
|
4
|
-
*
|
|
4
|
+
* Props for the FormField component.
|
|
5
5
|
*/
|
|
6
|
-
export type
|
|
6
|
+
export type FormFieldProps = HTMLAttributes<HTMLDivElement> & {
|
|
7
|
+
/**
|
|
8
|
+
* Name of the form field
|
|
9
|
+
*/
|
|
10
|
+
name: string;
|
|
11
|
+
/**
|
|
12
|
+
* Label for the form field
|
|
13
|
+
*/
|
|
14
|
+
label?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Children for the form field
|
|
17
|
+
*/
|
|
18
|
+
children: React.ReactNode;
|
|
19
|
+
/**
|
|
20
|
+
* Message for the form field
|
|
21
|
+
*/
|
|
22
|
+
message?: string;
|
|
23
|
+
/**
|
|
24
|
+
* There is a message/error for the form field
|
|
25
|
+
*/
|
|
26
|
+
hasMessage?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Info icon for the form field
|
|
29
|
+
*/
|
|
30
|
+
infoIcon?: React.ReactNode;
|
|
31
|
+
/**
|
|
32
|
+
* Indicates if the form field is required
|
|
33
|
+
*/
|
|
34
|
+
required?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Validation function for the form field
|
|
37
|
+
*/
|
|
38
|
+
validate?: FieldValidationFunction;
|
|
39
|
+
/**
|
|
40
|
+
* Indicates if the form field is disabled
|
|
41
|
+
*/
|
|
42
|
+
disabled?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Indicates if the form field is invalid
|
|
45
|
+
*/
|
|
46
|
+
invalid?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Id for the form field
|
|
49
|
+
*/
|
|
50
|
+
id?: string;
|
|
51
|
+
};
|
|
7
52
|
/**
|
|
8
|
-
* Props that all
|
|
9
|
-
* This allows them to work both standalone and within FormField
|
|
53
|
+
* Props that must be implemented by all form field components that are controlled inputs
|
|
10
54
|
*/
|
|
11
55
|
export type ControlledFormComponentProps<T extends FieldValue> = {
|
|
12
56
|
/**
|
|
13
|
-
*
|
|
57
|
+
* the initial value for the field
|
|
14
58
|
*/
|
|
15
59
|
initialValue?: T;
|
|
16
60
|
/**
|
|
17
|
-
*
|
|
61
|
+
* the initial value for the field
|
|
18
62
|
*/
|
|
19
63
|
checked?: boolean;
|
|
20
64
|
/**
|
|
@@ -46,110 +90,3 @@ export type ControlledFormComponentProps<T extends FieldValue> = {
|
|
|
46
90
|
*/
|
|
47
91
|
id?: string;
|
|
48
92
|
};
|
|
49
|
-
/**
|
|
50
|
-
* Field-level validation function
|
|
51
|
-
* Returns error message string if invalid, undefined if valid
|
|
52
|
-
*/
|
|
53
|
-
export type FieldValidationFunction<TValue = FieldValue> = (value: TValue) => string | undefined;
|
|
54
|
-
/**
|
|
55
|
-
* Field-level async validation function
|
|
56
|
-
* Returns error message string if invalid, undefined if valid
|
|
57
|
-
*/
|
|
58
|
-
export type AsyncFieldValidationFunction<TValue = FieldValue> = (value: TValue) => Promise<string | undefined>;
|
|
59
|
-
/**
|
|
60
|
-
* @deprecated This type is deprecated and maintained for backwards compatibility only.
|
|
61
|
-
* Use the new FieldValidationFunction signature that returns error messages instead.
|
|
62
|
-
*
|
|
63
|
-
* Type representing a validation function for a form field
|
|
64
|
-
* It takes an error setter function and the field value (optional) and returns a boolean indicating if the value is valid
|
|
65
|
-
* @example
|
|
66
|
-
* ```typescript
|
|
67
|
-
* const nameValidator: LegacyFieldValidationFunction = (setError, value) => {
|
|
68
|
-
* if (!value) {
|
|
69
|
-
* setError('Name is required');
|
|
70
|
-
* return false;
|
|
71
|
-
* }
|
|
72
|
-
* return true;
|
|
73
|
-
* };
|
|
74
|
-
* ```
|
|
75
|
-
*/
|
|
76
|
-
export type LegacyFieldValidationFunction<T extends FieldValue = FieldValue> = (setError: (message: string) => void, value?: T) => boolean;
|
|
77
|
-
/**
|
|
78
|
-
* @deprecated This type is deprecated and maintained for backwards compatibility only.
|
|
79
|
-
* Use the new AsyncFieldValidationFunction signature that returns error messages instead.
|
|
80
|
-
*
|
|
81
|
-
* Type representing an async validation function for a form field
|
|
82
|
-
* It takes an error setter function and the field value (optional) and returns a Promise<boolean> indicating if the value is valid
|
|
83
|
-
*/
|
|
84
|
-
export type LegacyAsyncFieldValidationFunction<T extends FieldValue = FieldValue> = (setError: (message: string) => void, value?: T) => Promise<boolean>;
|
|
85
|
-
/**
|
|
86
|
-
* FormField component props for use within a Form
|
|
87
|
-
*/
|
|
88
|
-
export type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends Path<TFieldValues> = Path<TFieldValues>> = Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'children'> & {
|
|
89
|
-
/** Field name (must match form value key) - type-safe */
|
|
90
|
-
name: TName;
|
|
91
|
-
/** Field label */
|
|
92
|
-
label?: string;
|
|
93
|
-
/** Display name for validation messages (defaults to label or name) */
|
|
94
|
-
displayName?: string;
|
|
95
|
-
/**
|
|
96
|
-
* Child component - will be cloned with injected props:
|
|
97
|
-
* value, onValueChange, onBlur, ref, disabled, invalid, required, id, name
|
|
98
|
-
*/
|
|
99
|
-
children: ReactNode;
|
|
100
|
-
/** Field is required */
|
|
101
|
-
required?: boolean;
|
|
102
|
-
/** Sync validation function (supports both new and legacy signatures) */
|
|
103
|
-
validate?: FieldValidationFunction<PathValue<TFieldValues, TName>> | LegacyFieldValidationFunction<PathValue<TFieldValues, TName>>;
|
|
104
|
-
/** Async validation function (supports both new and legacy signatures) */
|
|
105
|
-
asyncValidate?: AsyncFieldValidationFunction<PathValue<TFieldValues, TName>> | LegacyAsyncFieldValidationFunction<PathValue<TFieldValues, TName>>;
|
|
106
|
-
/** Default value for this field */
|
|
107
|
-
defaultValue?: PathValue<TFieldValues, TName>;
|
|
108
|
-
/** Info message to display */
|
|
109
|
-
message?: string;
|
|
110
|
-
/** Disabled state */
|
|
111
|
-
disabled?: boolean;
|
|
112
|
-
/** External invalid state */
|
|
113
|
-
invalid?: boolean;
|
|
114
|
-
/** Info icon element */
|
|
115
|
-
infoIcon?: ReactNode;
|
|
116
|
-
/** Field ID - for the input element */
|
|
117
|
-
id?: string;
|
|
118
|
-
/** @deprecated Legacy prop for backwards compatibility - use message prop instead */
|
|
119
|
-
hasMessage?: boolean;
|
|
120
|
-
};
|
|
121
|
-
/**
|
|
122
|
-
* Standalone FormField props (works without Form context)
|
|
123
|
-
*/
|
|
124
|
-
export type StandaloneFieldProps<TValue extends FieldValue = FieldValue> = Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'children' | 'onChange'> & {
|
|
125
|
-
/** Field name */
|
|
126
|
-
name: string;
|
|
127
|
-
/** Field label */
|
|
128
|
-
label?: string;
|
|
129
|
-
/** Display name for validation messages */
|
|
130
|
-
displayName?: string;
|
|
131
|
-
/** Child component to render */
|
|
132
|
-
children: ReactNode;
|
|
133
|
-
/** Field is required */
|
|
134
|
-
required?: boolean;
|
|
135
|
-
/** Sync validation function (supports both new and legacy signatures) */
|
|
136
|
-
validate?: FieldValidationFunction<TValue> | LegacyFieldValidationFunction<TValue>;
|
|
137
|
-
/** Async validation function (supports both new and legacy signatures) */
|
|
138
|
-
asyncValidate?: AsyncFieldValidationFunction<TValue> | LegacyAsyncFieldValidationFunction<TValue>;
|
|
139
|
-
/** Controlled value */
|
|
140
|
-
value?: TValue;
|
|
141
|
-
/** Controlled onChange */
|
|
142
|
-
onChange?: (value: TValue) => void;
|
|
143
|
-
/** External error */
|
|
144
|
-
error?: string;
|
|
145
|
-
/** Info message */
|
|
146
|
-
message?: string;
|
|
147
|
-
/** Disabled state */
|
|
148
|
-
disabled?: boolean;
|
|
149
|
-
/** Info icon element */
|
|
150
|
-
infoIcon?: ReactNode;
|
|
151
|
-
/** Field ID - for the input element */
|
|
152
|
-
id?: string;
|
|
153
|
-
/** @deprecated Legacy prop for backwards compatibility - use message prop instead */
|
|
154
|
-
hasMessage?: boolean;
|
|
155
|
-
};
|
|
@@ -1,8 +1,11 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { FieldValue } from '../../organisms';
|
|
3
|
+
export declare const injectPropsToMatchingFields: (node: React.ReactNode, propsToInject: {
|
|
4
|
+
id: string;
|
|
5
|
+
name: string;
|
|
6
|
+
value: any;
|
|
7
|
+
onValueChange: (value: FieldValue) => void;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
invalid?: boolean;
|
|
10
|
+
required?: boolean;
|
|
11
|
+
}, shouldInjectValueProps: boolean) => React.ReactNode;
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* @param ref - Forward ref to the input element
|
|
6
6
|
* @returns Search component
|
|
7
7
|
*/
|
|
8
|
-
declare const Search: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & import("
|
|
8
|
+
declare const Search: import("react").ForwardRefExoticComponent<Omit<import("react").InputHTMLAttributes<HTMLInputElement>, "value" | "type"> & import("../FormField/FormField.types").ControlledFormComponentProps<string> & {
|
|
9
9
|
style?: import("./Search.types").SearchStyleEnum;
|
|
10
10
|
onSearch?: import("./Search.types").SearchCallback;
|
|
11
11
|
onClear?: () => void;
|
|
@@ -295,8 +295,9 @@ declare const useSearchPresenter: (props: SearchProps) => {
|
|
|
295
295
|
pattern?: string | undefined;
|
|
296
296
|
size?: number | undefined;
|
|
297
297
|
step?: number | string | undefined;
|
|
298
|
-
accept?: string | undefined;
|
|
299
298
|
autoComplete?: import("react").HTMLInputAutoCompleteAttribute | undefined;
|
|
299
|
+
name?: string | undefined;
|
|
300
|
+
accept?: string | undefined;
|
|
300
301
|
capture?: boolean | "user" | "environment" | undefined;
|
|
301
302
|
enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
|
|
302
303
|
formAction?: string | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_EXPERIMENTAL_FORM_ACTIONS] | undefined;
|
|
@@ -309,7 +310,6 @@ declare const useSearchPresenter: (props: SearchProps) => {
|
|
|
309
310
|
min?: number | string | undefined;
|
|
310
311
|
minLength?: number | undefined;
|
|
311
312
|
multiple?: boolean | undefined;
|
|
312
|
-
name?: string | undefined;
|
|
313
313
|
placeholder?: string | undefined;
|
|
314
314
|
readOnly?: boolean | undefined;
|
|
315
315
|
invalid?: boolean;
|
|
@@ -12,17 +12,17 @@ declare const usePresenter: (props: SelectProps) => {
|
|
|
12
12
|
'component-variant': string;
|
|
13
13
|
};
|
|
14
14
|
isOpen: boolean;
|
|
15
|
-
selectedValue: import("
|
|
15
|
+
selectedValue: import("../..").FieldValue;
|
|
16
16
|
resetSelectedValue: () => void;
|
|
17
17
|
triggerProps: {
|
|
18
18
|
disabled?: boolean;
|
|
19
19
|
required?: boolean;
|
|
20
20
|
checked?: boolean;
|
|
21
|
-
value?: import("
|
|
21
|
+
value?: import("../..").FieldValue | undefined;
|
|
22
22
|
id?: string;
|
|
23
23
|
invalid?: boolean;
|
|
24
|
-
onValueChange?: ((value: import("
|
|
25
|
-
initialValue?: import("
|
|
24
|
+
onValueChange?: ((value: import("../..").FieldValue) => void) | undefined;
|
|
25
|
+
initialValue?: import("../..").FieldValue | undefined;
|
|
26
26
|
closeSelectOptions?: () => void;
|
|
27
27
|
role?: import("react").AriaRole | undefined;
|
|
28
28
|
onLoad?: import("react").ReactEventHandler<HTMLElement> | undefined;
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
declare const DropzoneFileModeExample: () => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const DropzoneURLModeExample: () => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
declare const DropzoneURLModeWithMetadataExample: () => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
declare const DropzoneFormExample: () => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
export default DropzoneFormExample;
|
|
6
|
+
export { DropzoneFileModeExample, DropzoneURLModeExample, DropzoneURLModeWithMetadataExample };
|
|
@@ -1,24 +1,3 @@
|
|
|
1
|
-
import { type FieldValues } from 'react-hook-form';
|
|
2
1
|
import type { FormProps } from './Form.types';
|
|
3
|
-
|
|
4
|
-
* Form component - clean wrapper around React Hook Form
|
|
5
|
-
*
|
|
6
|
-
* Usage:
|
|
7
|
-
* ```tsx
|
|
8
|
-
* <Form defaultValues={{ name: '' }} onSubmit={handleSubmit}>
|
|
9
|
-
* <FormField name="name" label="Name">
|
|
10
|
-
* <Input />
|
|
11
|
-
* </FormField>
|
|
12
|
-
* <Button actionType="submit">Submit</Button>
|
|
13
|
-
* </Form>
|
|
14
|
-
* ```
|
|
15
|
-
*
|
|
16
|
-
* Access RHF methods anywhere in form:
|
|
17
|
-
* ```tsx
|
|
18
|
-
* import { useFormContext, useWatch } from 'react-hook-form';
|
|
19
|
-
* const { setValue, reset } = useFormContext();
|
|
20
|
-
* const name = useWatch({ name: 'name' });
|
|
21
|
-
* ```
|
|
22
|
-
*/
|
|
23
|
-
declare const Form: <TFormValues extends FieldValues = FieldValues>(props: FormProps<TFormValues>) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
declare const Form: (props: FormProps) => import("react/jsx-runtime").JSX.Element;
|
|
24
3
|
export default Form;
|