@cube-dev/ui-kit 0.6.54 → 0.6.55
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/actions/Button/Button.d.ts +2 -1
- package/dist/cjs/components/forms/FieldWrapper.d.ts +1 -1
- package/dist/cjs/components/forms/Form/Field.d.ts +9 -4
- package/dist/cjs/components/forms/Form/useForm.d.ts +10 -6
- package/dist/cjs/components/overlays/AlertDialog/AlertDialog.d.ts +1 -0
- package/dist/cjs/components/overlays/Dialog/DialogForm.d.ts +19 -0
- package/dist/cjs/components/overlays/Dialog/api.d.ts +1 -1
- package/dist/cjs/components/overlays/Dialog/index.d.ts +4 -2
- package/dist/cjs/index.d.ts +2 -2
- package/dist/cjs/index.js +6 -6
- package/dist/cjs/index.js.map +1 -1
- package/dist/cjs/shared/form.d.ts +6 -3
- package/dist/mjs/components/actions/Button/Button.d.ts +2 -1
- package/dist/mjs/components/forms/FieldWrapper.d.ts +1 -1
- package/dist/mjs/components/forms/Form/Field.d.ts +9 -4
- package/dist/mjs/components/forms/Form/useForm.d.ts +10 -6
- package/dist/mjs/components/overlays/AlertDialog/AlertDialog.d.ts +1 -0
- package/dist/mjs/components/overlays/Dialog/DialogForm.d.ts +19 -0
- package/dist/mjs/components/overlays/Dialog/api.d.ts +1 -1
- package/dist/mjs/components/overlays/Dialog/index.d.ts +4 -2
- package/dist/mjs/index.d.ts +2 -2
- package/dist/mjs/index.js +7 -7
- package/dist/mjs/index.js.map +1 -1
- package/dist/mjs/shared/form.d.ts +6 -3
- package/package.json +2 -1
|
@@ -7,9 +7,7 @@ export declare type NecessityIndicator = 'icon' | 'label';
|
|
|
7
7
|
export declare type ValidationState = 'invalid' | 'valid';
|
|
8
8
|
/** On which event perform validation for the field */
|
|
9
9
|
export declare type ValidateTrigger = 'onBlur' | 'onChange' | 'onSubmit';
|
|
10
|
-
export interface
|
|
11
|
-
/** The field name */
|
|
12
|
-
name: string;
|
|
10
|
+
export interface OptionalFieldBaseProps {
|
|
13
11
|
/** The label of the field */
|
|
14
12
|
label?: string;
|
|
15
13
|
/** The validation state of the field */
|
|
@@ -19,6 +17,10 @@ export interface FieldBaseProps {
|
|
|
19
17
|
necessityIndicator?: NecessityIndicator;
|
|
20
18
|
necessityLabel?: ReactNode;
|
|
21
19
|
}
|
|
20
|
+
export interface FieldBaseProps extends OptionalFieldBaseProps {
|
|
21
|
+
/** The field name */
|
|
22
|
+
name: string[] | string;
|
|
23
|
+
}
|
|
22
24
|
export interface FormBaseProps {
|
|
23
25
|
labelStyles?: Styles;
|
|
24
26
|
labelPosition?: LabelPosition;
|
|
@@ -40,6 +42,7 @@ export interface FormFieldProps extends FormBaseProps {
|
|
|
40
42
|
label?: ReactNode;
|
|
41
43
|
labelProps?: Props;
|
|
42
44
|
message?: ReactNode;
|
|
45
|
+
tooltip?: ReactNode;
|
|
43
46
|
}
|
|
44
47
|
export declare type ValidationRuleBase = {
|
|
45
48
|
[key: string]: any;
|
|
@@ -7,12 +7,13 @@ export interface CubeButtonProps extends CubeActionProps {
|
|
|
7
7
|
type?: 'primary' | 'default' | 'danger' | 'link' | 'clear' | 'outline' | 'neutral' | string;
|
|
8
8
|
size?: 'small' | 'default' | 'large' | string;
|
|
9
9
|
}
|
|
10
|
-
export declare function provideStyles({ size, type, theme, isLoading, icon, children, }: {
|
|
10
|
+
export declare function provideStyles({ size, type, theme, isLoading, icon, children, label, }: {
|
|
11
11
|
size: any;
|
|
12
12
|
type: any;
|
|
13
13
|
theme: any;
|
|
14
14
|
isLoading: any;
|
|
15
15
|
icon: any;
|
|
16
16
|
children: any;
|
|
17
|
+
label: any;
|
|
17
18
|
}): any;
|
|
18
19
|
export declare const Button: import("react").ForwardRefExoticComponent<CubeButtonProps & import("react").RefAttributes<import("@react-types/shared").FocusableRefValue<HTMLElement, HTMLElement>>>;
|
|
@@ -5,7 +5,6 @@ export declare type CubeFieldWrapperProps = {
|
|
|
5
5
|
as: string;
|
|
6
6
|
labelPosition: LabelPosition;
|
|
7
7
|
label?: string;
|
|
8
|
-
insideForm?: boolean;
|
|
9
8
|
styles?: Styles;
|
|
10
9
|
isRequired?: boolean;
|
|
11
10
|
isDisabled?: boolean;
|
|
@@ -18,6 +17,7 @@ export declare type CubeFieldWrapperProps = {
|
|
|
18
17
|
Component?: JSX.Element;
|
|
19
18
|
validationState?: ValidationState;
|
|
20
19
|
requiredMark?: boolean;
|
|
20
|
+
tooltip?: ReactNode;
|
|
21
21
|
};
|
|
22
22
|
/**
|
|
23
23
|
* A wrapper for form fields to provide additional decoration for inputs.
|
|
@@ -1,7 +1,9 @@
|
|
|
1
|
-
import { ReactElement } from 'react';
|
|
2
|
-
import {
|
|
1
|
+
import { ReactElement, ReactNode } from 'react';
|
|
2
|
+
import { OptionalFieldBaseProps, ValidationRule } from '../../../shared';
|
|
3
3
|
import { FormStore } from './useForm';
|
|
4
|
-
export interface CubeFieldProps extends
|
|
4
|
+
export interface CubeFieldProps extends OptionalFieldBaseProps {
|
|
5
|
+
/** The initial value of the input. */
|
|
6
|
+
defaultValue?: any;
|
|
5
7
|
/** The type of the input. `Input`, `Checkbox`, RadioGroup`, `Select`, `ComboBox` etc... */
|
|
6
8
|
type?: string;
|
|
7
9
|
/** The unique ID of the field */
|
|
@@ -9,11 +11,14 @@ export interface CubeFieldProps extends FieldBaseProps {
|
|
|
9
11
|
/** The id prefix for the field to avoid collisions between forms */
|
|
10
12
|
idPrefix?: string;
|
|
11
13
|
children?: ReactElement | ((FormStore: any) => ReactElement);
|
|
14
|
+
shouldUpdate?: boolean | ((prevValues: any, nextValues: any) => boolean);
|
|
12
15
|
/** Validation rules */
|
|
13
16
|
rules?: ValidationRule[];
|
|
14
17
|
/** The form instance */
|
|
15
18
|
form?: FormStore;
|
|
16
19
|
/** The message for the field or text for the error */
|
|
17
20
|
message?: string;
|
|
21
|
+
tooltip?: ReactNode;
|
|
22
|
+
name?: string[] | string;
|
|
18
23
|
}
|
|
19
|
-
export declare function Field(allProps: CubeFieldProps):
|
|
24
|
+
export declare function Field(allProps: CubeFieldProps): JSX.Element | null;
|
|
@@ -19,24 +19,28 @@ export declare class FormStore {
|
|
|
19
19
|
onSubmit: (CubeFormData: any) => void | Promise<any>;
|
|
20
20
|
constructor(forceReRender?: () => void);
|
|
21
21
|
submit(): Promise<any>;
|
|
22
|
-
|
|
22
|
+
setFieldsValue(newData: {
|
|
23
23
|
[key: string]: any;
|
|
24
|
-
}, touched?: boolean): void;
|
|
24
|
+
}, touched?: boolean, reRender?: boolean, createFields?: boolean): void;
|
|
25
25
|
getFieldValue(name: any): any;
|
|
26
26
|
getFieldsValue(): CubeFormData;
|
|
27
|
-
|
|
27
|
+
/**
|
|
28
|
+
* Similar to getFieldsValue() but respects '.' notation and creates nested objects.
|
|
29
|
+
*/
|
|
30
|
+
getFormData(): CubeFormData;
|
|
31
|
+
setFieldValue(name: string, value: any, touched?: boolean, reRender?: boolean): void;
|
|
28
32
|
getFieldInstance(name: string): CubeField;
|
|
29
|
-
|
|
33
|
+
setInitialFieldsValue(values: {
|
|
30
34
|
[key: string]: any;
|
|
31
35
|
}): void;
|
|
32
|
-
resetFields(): void;
|
|
36
|
+
resetFields(reRender?: boolean): void;
|
|
33
37
|
validateField(name: string): Promise<any>;
|
|
34
38
|
validateFields(list?: string[]): Promise<any>;
|
|
35
39
|
isFieldValid(name: string): boolean;
|
|
36
40
|
isFieldInvalid(name: string): boolean;
|
|
37
41
|
isFieldTouched(name: string): boolean;
|
|
38
42
|
getFieldError(name: string): string[];
|
|
39
|
-
createField(name: string): void;
|
|
43
|
+
createField(name: string, reRender?: boolean): void;
|
|
40
44
|
setFields(newFields: CubeField[]): void;
|
|
41
45
|
setSubmitting(isSubmitting: boolean): void;
|
|
42
46
|
_createField(name: any, data?: Partial<CubeField>): CubeField;
|
|
@@ -8,6 +8,7 @@ export interface CubeAlertDialogProps extends CubeDialogProps {
|
|
|
8
8
|
secondaryProps?: CubeButtonProps;
|
|
9
9
|
cancelProps?: CubeButtonProps;
|
|
10
10
|
title?: string;
|
|
11
|
+
noActions?: boolean;
|
|
11
12
|
}
|
|
12
13
|
/**
|
|
13
14
|
* AlertDialogs are a specific type of Dialog. They display important information that users need to acknowledge.
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CubeDialogProps } from './Dialog';
|
|
3
|
+
import { CubeFormProps } from '../../forms/Form/Form';
|
|
4
|
+
import { CubeButtonProps } from '../../actions/Button/Button';
|
|
5
|
+
export interface CubeDialogFormProps extends CubeDialogProps, Omit<CubeFormProps, 'role'> {
|
|
6
|
+
danger?: boolean;
|
|
7
|
+
submitProps?: CubeButtonProps;
|
|
8
|
+
cancelProps?: CubeButtonProps;
|
|
9
|
+
preserve?: boolean;
|
|
10
|
+
}
|
|
11
|
+
export interface CubeDialogFormRef {
|
|
12
|
+
open: () => void;
|
|
13
|
+
close: () => void;
|
|
14
|
+
}
|
|
15
|
+
/**
|
|
16
|
+
* DialogForms are a specific type of Dialog. They contain forms to fill.
|
|
17
|
+
*/
|
|
18
|
+
declare let _DialogForm: import("react").ForwardRefExoticComponent<Pick<any, string | number | symbol> & import("react").RefAttributes<CubeDialogFormRef>>;
|
|
19
|
+
export { _DialogForm as DialogForm };
|
|
@@ -8,7 +8,7 @@ export interface DialogData extends Omit<CubeDialogContainerProps, 'onDismiss'>,
|
|
|
8
8
|
reject: (any: any) => void;
|
|
9
9
|
content: ReactNode;
|
|
10
10
|
isVisible?: boolean;
|
|
11
|
-
dialogType?: 'info' | 'confirm';
|
|
11
|
+
dialogType?: 'info' | 'confirm' | 'form';
|
|
12
12
|
}
|
|
13
13
|
export interface DialogService {
|
|
14
14
|
root: Element | null;
|
|
@@ -2,9 +2,11 @@
|
|
|
2
2
|
import { CubeDialogProps } from './Dialog';
|
|
3
3
|
import { CubeDialogTriggerProps, DialogTrigger } from './DialogTrigger';
|
|
4
4
|
import { CubeDialogContainerProps, DialogContainer } from './DialogContainer';
|
|
5
|
+
import { CubeDialogFormRef, CubeDialogFormProps, DialogForm } from './DialogForm';
|
|
5
6
|
declare const _Dialog: import("react").ForwardRefExoticComponent<CubeDialogProps & import("react").RefAttributes<import("@react-types/shared").DOMRefValue<HTMLDivElement>>> & {
|
|
6
7
|
confirm: (options: any) => void;
|
|
7
8
|
info: (options: any) => void;
|
|
9
|
+
form: (options: any) => void;
|
|
8
10
|
};
|
|
9
|
-
export { _Dialog as Dialog, DialogContainer, DialogTrigger };
|
|
10
|
-
export type { CubeDialogProps, CubeDialogTriggerProps, CubeDialogContainerProps, };
|
|
11
|
+
export { _Dialog as Dialog, DialogContainer, DialogTrigger, DialogForm };
|
|
12
|
+
export type { CubeDialogProps, CubeDialogTriggerProps, CubeDialogContainerProps, CubeDialogFormRef, CubeDialogFormProps, };
|
package/dist/mjs/index.d.ts
CHANGED
|
@@ -98,8 +98,8 @@ export { NumberInput } from './components/forms/NumberInput/NumberInput';
|
|
|
98
98
|
export type { CubeNumberInputProps } from './components/forms/NumberInput/NumberInput';
|
|
99
99
|
export { Avatar } from './components/content/Avatar/Avatar';
|
|
100
100
|
export type { CubeAvatarProps } from './components/content/Avatar/Avatar';
|
|
101
|
-
export { Dialog, DialogTrigger, DialogContainer, } from './components/overlays/Dialog';
|
|
102
|
-
export type { CubeDialogTriggerProps, CubeDialogContainerProps, CubeDialogProps, } from './components/overlays/Dialog';
|
|
101
|
+
export { Dialog, DialogTrigger, DialogContainer, DialogForm, } from './components/overlays/Dialog';
|
|
102
|
+
export type { CubeDialogTriggerProps, CubeDialogContainerProps, CubeDialogProps, CubeDialogFormRef, CubeDialogFormProps, } from './components/overlays/Dialog';
|
|
103
103
|
export { Tooltip } from './components/overlays/Tooltip/Tooltip';
|
|
104
104
|
export type { CubeTooltipProps } from './components/overlays/Tooltip/Tooltip';
|
|
105
105
|
export { TooltipTrigger } from './components/overlays/Tooltip/TooltipTrigger';
|