@epam/ai-dial-ui-kit 0.7.0 → 0.8.0-rc.1
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/dial-ui-kit.cjs.js +17 -17
- package/dist/dial-ui-kit.es.js +5502 -5669
- package/dist/index.css +2 -2
- package/dist/src/components/FormItem/FormItem.d.ts +3 -3
- package/dist/src/components/FormItem/constants.d.ts +1 -1
- package/dist/src/components/InfoButton/InfoButton.d.ts +19 -0
- package/dist/src/components/InfoButton/InfoButton.stories.d.ts +6 -0
- package/dist/src/components/InfoButton/constants.d.ts +1 -0
- package/dist/src/components/Input/Input.d.ts +23 -25
- package/dist/src/components/Input/utils.d.ts +1 -1
- package/dist/src/components/Label/Label.d.ts +22 -0
- package/dist/src/components/LabelledText/LabelledText.d.ts +1 -1
- package/dist/src/components/NumberInput/NumberInput.d.ts +25 -0
- package/dist/src/components/RadioGroupPopupField/RadioGroupPopupField.d.ts +2 -2
- package/dist/src/components/RemoveButton/RemoveButton.d.ts +3 -4
- package/dist/src/components/SelectField/SelectField.d.ts +3 -3
- package/dist/src/components/TagInput/TagInput.d.ts +2 -2
- package/dist/src/components/Textarea/Textarea.d.ts +14 -17
- package/dist/src/constants/storybook/input.d.ts +3 -4
- package/dist/src/index.d.ts +2 -5
- package/dist/src/types/form-item.d.ts +2 -4
- package/package.json +1 -1
- package/dist/src/components/Field/Field.d.ts +0 -24
- package/dist/src/components/InputField/InputField.d.ts +0 -68
- package/dist/src/components/PasswordInput/PasswordInputField.d.ts +0 -29
- package/dist/src/components/TextAreaField/TextAreaField.d.ts +0 -41
- package/dist/src/models/field-control-props.d.ts +0 -53
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { FieldControlProps, InputBaseProps, NumberInputBaseProps } from '../../models/field-control-props';
|
|
3
|
-
import { DialFormItemBaseProps } from '../../types/form-item';
|
|
4
|
-
export interface DialInputFieldBaseProps extends FieldControlProps, DialFormItemBaseProps, InputBaseProps {
|
|
5
|
-
value?: string | number;
|
|
6
|
-
defaultEmptyText?: string;
|
|
7
|
-
errorText?: string;
|
|
8
|
-
elementClassName?: string;
|
|
9
|
-
elementContainerClassName?: string;
|
|
10
|
-
containerClassName?: string;
|
|
11
|
-
}
|
|
12
|
-
export interface DialInputFieldProps extends DialInputFieldBaseProps, Partial<NumberInputBaseProps> {
|
|
13
|
-
type: string;
|
|
14
|
-
onChange?: (value?: string | number) => void;
|
|
15
|
-
}
|
|
16
|
-
export interface DialNumberInputFieldProps extends DialInputFieldBaseProps, Partial<NumberInputBaseProps> {
|
|
17
|
-
onChange?: (value?: number | string) => void;
|
|
18
|
-
}
|
|
19
|
-
/**
|
|
20
|
-
* A number input field component
|
|
21
|
-
*
|
|
22
|
-
* @example
|
|
23
|
-
* ```tsx
|
|
24
|
-
* <DialNumberInputField
|
|
25
|
-
* elementId="age"
|
|
26
|
-
* fieldTitle="Age"
|
|
27
|
-
* placeholder="Enter your age"
|
|
28
|
-
* value={25}
|
|
29
|
-
* onChange={(value) => setAge(value)}
|
|
30
|
-
* />
|
|
31
|
-
* ```
|
|
32
|
-
*
|
|
33
|
-
* @params - Component properties extending:
|
|
34
|
-
* - {@link FieldControlProps} - Field control properties (fieldTitle, optional)
|
|
35
|
-
* - {@link DialFormItemBaseProps} - Form item properties (label, error, description, etc.)
|
|
36
|
-
* - {@link InputBaseProps} - Base input properties (elementId, value, placeholder, disabled, readonly, invalid, icons, etc.)
|
|
37
|
-
* - {@link NumberInputBaseProps} - Number input properties (min, max) - partial
|
|
38
|
-
*
|
|
39
|
-
* @param onChange - Callback function called when the input value changes.
|
|
40
|
-
* Returns either a number (for most values) or a string (for decimal values < 1 with leading zeros)
|
|
41
|
-
*/
|
|
42
|
-
export declare const DialNumberInputField: FC<DialNumberInputFieldProps>;
|
|
43
|
-
export interface DialTextInputFieldProps extends DialInputFieldBaseProps {
|
|
44
|
-
onChange?: (value?: string) => void;
|
|
45
|
-
}
|
|
46
|
-
/**
|
|
47
|
-
* A text input field component
|
|
48
|
-
*
|
|
49
|
-
* @example
|
|
50
|
-
* Basic usage:
|
|
51
|
-
* ```tsx
|
|
52
|
-
* <DialTextInputField
|
|
53
|
-
* elementId="name"
|
|
54
|
-
* fieldTitle="Full Name"
|
|
55
|
-
* placeholder="Enter your full name"
|
|
56
|
-
* value="John Doe"
|
|
57
|
-
* onChange={(value) => setName(value)}
|
|
58
|
-
* />
|
|
59
|
-
* ```
|
|
60
|
-
*
|
|
61
|
-
* @params - Component properties extending:
|
|
62
|
-
* - {@link FieldControlProps} - Field control properties (fieldTitle, optional)
|
|
63
|
-
* - {@link DialFormItemBaseProps} - Form item properties (label, error, description, etc.)
|
|
64
|
-
* - {@link InputBaseProps} - Base input properties (elementId, value, placeholder, disabled, readonly, invalid, icons, etc.)
|
|
65
|
-
*
|
|
66
|
-
* @param onChange - Callback function called when the input value changes, receives the new string value
|
|
67
|
-
*/
|
|
68
|
-
export declare const DialTextInputField: FC<DialTextInputFieldProps>;
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { DialInputFieldBaseProps } from '../InputField/InputField';
|
|
3
|
-
export interface DialPasswordInputFieldProps extends DialInputFieldBaseProps {
|
|
4
|
-
onChange?: (value?: string) => void;
|
|
5
|
-
}
|
|
6
|
-
/**
|
|
7
|
-
* A password input field component with label, error text, and show/hide functionality.
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* ```tsx
|
|
11
|
-
* <DialPasswordInputField
|
|
12
|
-
* elementId="password"
|
|
13
|
-
* fieldTitle="Password"
|
|
14
|
-
* value={password}
|
|
15
|
-
* onChange={setPassword}
|
|
16
|
-
* errorText={error}
|
|
17
|
-
* optional={false}
|
|
18
|
-
* />
|
|
19
|
-
* ```
|
|
20
|
-
*
|
|
21
|
-
* @param elementId - Unique identifier for the input element
|
|
22
|
-
* @param [fieldTitle] - The label text for the field
|
|
23
|
-
* @param [value] - The current value of the input
|
|
24
|
-
* @param [onChange] - Callback function called when the input value changes
|
|
25
|
-
* @param [errorText] - Error message to display below the input
|
|
26
|
-
* @param [optional=false] - Whether the field is optional
|
|
27
|
-
* @param [className] - Custom CSS class for the input element
|
|
28
|
-
*/
|
|
29
|
-
export declare const DialPasswordInputField: FC<DialPasswordInputFieldProps>;
|
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import { FC } from 'react';
|
|
2
|
-
import { DialInputFieldBaseProps } from '../InputField/InputField';
|
|
3
|
-
export interface DialTextAreaFieldProps extends DialInputFieldBaseProps {
|
|
4
|
-
onChange?: (value: string) => void;
|
|
5
|
-
disableTooltip?: boolean;
|
|
6
|
-
}
|
|
7
|
-
/**
|
|
8
|
-
* A complete textarea field component that combines a field label, textarea input, and error text
|
|
9
|
-
* with consistent styling and validation support
|
|
10
|
-
*
|
|
11
|
-
* @example
|
|
12
|
-
* ```tsx
|
|
13
|
-
* <DialTextAreaField
|
|
14
|
-
* fieldTitle="Description"
|
|
15
|
-
* elementId="description"
|
|
16
|
-
* value={description}
|
|
17
|
-
* onChange={(value) => setDescription(value)}
|
|
18
|
-
* errorText={errors.description}
|
|
19
|
-
* optional={true}
|
|
20
|
-
* />
|
|
21
|
-
* ```
|
|
22
|
-
*
|
|
23
|
-
* @param elementId - Unique identifier for the textarea element
|
|
24
|
-
* @param [fieldTitle] - The label text for the field
|
|
25
|
-
* @param [value] - The current value of the textarea
|
|
26
|
-
* @param [onChange] - Callback function called when the textarea value changes
|
|
27
|
-
* @param [errorText] - Error message to display below the textarea
|
|
28
|
-
* @param [optional=false] - Whether to show optional indicator next to the label
|
|
29
|
-
* @param [readonly=false] - Whether the textarea is read-only (no user input allowed)
|
|
30
|
-
* @param [disabled=false] - Whether the input is disabled and cannot be interacted with
|
|
31
|
-
* @param [invalid=false] - Whether the input has validation errors (applies error styling)
|
|
32
|
-
* @param [defaultEmptyText="None"] - Text to display when readonly and value is empty
|
|
33
|
-
* @param [iconBefore] - Icon or element to display before the input
|
|
34
|
-
* @param [iconAfter] - Icon or element to display after the input
|
|
35
|
-
* @param [textBeforeInput] - Text to display before the input
|
|
36
|
-
* @param [elementClassName] - Additional CSS classes to apply to the textarea element
|
|
37
|
-
* @param [containerClassName] - Additional CSS classes to apply to the outer container
|
|
38
|
-
* @param [elementContainerClassName] - Additional CSS classes to apply to the textarea container
|
|
39
|
-
* @param [disableTooltip] - Whether to disable the tooltip that shows the full value on hover
|
|
40
|
-
*/
|
|
41
|
-
export declare const DialTextAreaField: FC<DialTextAreaFieldProps>;
|
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Base properties for field controls providing label and optional status
|
|
4
|
-
*
|
|
5
|
-
* @param fieldTitle - The label text to display above the input field
|
|
6
|
-
* @param optional - Whether the field is optional (displays "(Optional)" indicator when true)
|
|
7
|
-
*/
|
|
8
|
-
export interface FieldControlProps {
|
|
9
|
-
fieldTitle?: string;
|
|
10
|
-
optional?: boolean;
|
|
11
|
-
}
|
|
12
|
-
/**
|
|
13
|
-
* Base properties for input elements providing core input functionality
|
|
14
|
-
*
|
|
15
|
-
* @param elementId - Unique identifier for the input element
|
|
16
|
-
* @param value - The current value of the input (string, number, or null)
|
|
17
|
-
* @param defaultValue - The default value for the input
|
|
18
|
-
* @param placeholder - Placeholder text shown when input is empty
|
|
19
|
-
* @param disabled - Whether the input is disabled and cannot be interacted with
|
|
20
|
-
* @param readonly - Whether the input is read-only (displays value as text, no input element)
|
|
21
|
-
* @param invalid - Whether the input has validation errors (applies error styling)
|
|
22
|
-
* @param iconAfter - Icon or element to display after the input
|
|
23
|
-
* @param iconBefore - Icon or element to display before the input
|
|
24
|
-
* @param textBeforeInput - Text to display before the input
|
|
25
|
-
* @param textAfterInput - Text to display after the input
|
|
26
|
-
* @param prefix - Text to display inside the input on the left
|
|
27
|
-
* @param suffix - Text to display inside the input on the right
|
|
28
|
-
*/
|
|
29
|
-
export interface InputBaseProps {
|
|
30
|
-
elementId: string;
|
|
31
|
-
value?: string | number | null;
|
|
32
|
-
defaultValue?: string | number;
|
|
33
|
-
placeholder?: string;
|
|
34
|
-
disabled?: boolean;
|
|
35
|
-
readonly?: boolean;
|
|
36
|
-
invalid?: boolean;
|
|
37
|
-
iconAfter?: ReactNode;
|
|
38
|
-
iconBefore?: ReactNode;
|
|
39
|
-
textBeforeInput?: string;
|
|
40
|
-
textAfterInput?: string;
|
|
41
|
-
prefix?: string;
|
|
42
|
-
suffix?: string;
|
|
43
|
-
}
|
|
44
|
-
/**
|
|
45
|
-
* Properties specific to numeric input controls for validation and formatting
|
|
46
|
-
*
|
|
47
|
-
* @param min - Minimum allowed value for the number input
|
|
48
|
-
* @param max - Maximum allowed value for the number input
|
|
49
|
-
*/
|
|
50
|
-
export interface NumberInputBaseProps {
|
|
51
|
-
min?: number;
|
|
52
|
-
max?: number;
|
|
53
|
-
}
|