@dfds-ui/forms 2.0.14-alpha.7e5b90e5 → 2.0.14-alpha.95e19ee3
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/checkbox/Checkbox.d.ts +6 -0
- package/checkbox/Checkbox.js +13 -8
- package/checkbox/CheckboxGroup.d.ts +2 -2
- package/checkbox/CheckboxGroup.js +14 -6
- package/cjs/checkbox/Checkbox.js +13 -8
- package/cjs/checkbox/CheckboxGroup.js +14 -6
- package/cjs/field-wrap/FieldWrap.js +3 -3
- package/cjs/index.js +44 -11
- package/cjs/radio/RadioGroup.js +10 -4
- package/cjs/select-field/AsyncSelectField.js +111 -0
- package/cjs/select-field/NativeSelectField.js +4 -11
- package/cjs/select-field/SelectField.js +87 -46
- package/cjs/switch/SwitchGroup.js +12 -3
- package/cjs/switch/index.js +21 -6
- package/cjs/text-field/TextField.js +5 -4
- package/field-wrap/FieldWrap.js +3 -3
- package/index.d.ts +4 -1
- package/index.js +5 -2
- package/package.json +7 -7
- package/radio/RadioGroup.d.ts +2 -2
- package/radio/RadioGroup.js +10 -4
- package/select-field/AsyncSelectField.d.ts +13 -0
- package/select-field/AsyncSelectField.js +119 -0
- package/select-field/NativeSelectField.d.ts +0 -2
- package/select-field/NativeSelectField.js +4 -11
- package/select-field/SelectField.d.ts +14 -4
- package/select-field/SelectField.js +88 -47
- package/switch/SwitchGroup.js +21 -12
- package/switch/index.d.ts +2 -1
- package/switch/index.js +2 -1
- package/text-field/TextField.d.ts +12 -2
- package/text-field/TextField.js +5 -4
- package/cjs/assistive-text/AssistiveText.d.ts +0 -9
- package/cjs/asterisk/Asterisk.d.ts +0 -11
- package/cjs/checkbox/Checkbox.d.ts +0 -59
- package/cjs/checkbox/CheckboxContext.d.ts +0 -13
- package/cjs/checkbox/CheckboxGroup.d.ts +0 -20
- package/cjs/checkbox/index.d.ts +0 -2
- package/cjs/counter/Counter.d.ts +0 -66
- package/cjs/counter/index.d.ts +0 -1
- package/cjs/enhanced/EnhancedField.d.ts +0 -20
- package/cjs/enhanced/index.d.ts +0 -1
- package/cjs/error-text/ErrorText.d.ts +0 -8
- package/cjs/field-wrap/FieldWrap.d.ts +0 -10
- package/cjs/field-wrap/index.d.ts +0 -1
- package/cjs/help-icon/HelpIcon.d.ts +0 -7
- package/cjs/index.d.ts +0 -15
- package/cjs/label/Label.d.ts +0 -11
- package/cjs/password-field/PasswordField.d.ts +0 -4
- package/cjs/radio/Radio.d.ts +0 -51
- package/cjs/radio/RadioContext.d.ts +0 -13
- package/cjs/radio/RadioGroup.d.ts +0 -12
- package/cjs/radio/index.d.ts +0 -2
- package/cjs/rating/Rating.d.ts +0 -55
- package/cjs/rating/index.d.ts +0 -1
- package/cjs/select-field/NativeSelectField.d.ts +0 -10
- package/cjs/select-field/SelectField.d.ts +0 -83
- package/cjs/switch/Switch.d.ts +0 -32
- package/cjs/switch/SwitchContext.d.ts +0 -11
- package/cjs/switch/SwitchGroup.d.ts +0 -10
- package/cjs/switch/index.d.ts +0 -1
- package/cjs/tel-field/TelField.d.ts +0 -67
- package/cjs/text-field/TextField.d.ts +0 -47
- package/cjs/textarea-field/TextareaField.d.ts +0 -44
- package/cjs/types/field.d.ts +0 -52
- package/cjs/types/index.d.ts +0 -2
- package/cjs/types/size.d.ts +0 -1
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { BaseFieldProps } from '../types';
|
|
3
|
-
import { RadioProps } from './Radio';
|
|
4
|
-
export declare type RadioGroupProps = Pick<BaseFieldProps, 'label' | 'required' | 'hideAsterisk' | 'disabled' | 'errorMessage'> & Pick<RadioProps, 'visualSize'> & {
|
|
5
|
-
children: ReactNode;
|
|
6
|
-
/**
|
|
7
|
-
* Class name to be assigned to the component
|
|
8
|
-
*/
|
|
9
|
-
className?: string;
|
|
10
|
-
column?: boolean;
|
|
11
|
-
};
|
|
12
|
-
export declare const RadioGroup: ({ visualSize, label, children, column, errorMessage, required, hideAsterisk, className, }: RadioGroupProps) => JSX.Element;
|
package/cjs/radio/index.d.ts
DELETED
package/cjs/rating/Rating.d.ts
DELETED
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { FieldWrapProps } from '../field-wrap/FieldWrap';
|
|
3
|
-
import { Size } from '../types';
|
|
4
|
-
export declare type RatingProps = {
|
|
5
|
-
/**
|
|
6
|
-
* Amount of related checkboxes
|
|
7
|
-
*/
|
|
8
|
-
rangeCardinality: number;
|
|
9
|
-
/**
|
|
10
|
-
* Name for the checkbox group
|
|
11
|
-
*/
|
|
12
|
-
name: string;
|
|
13
|
-
/**
|
|
14
|
-
* Hint text on the left
|
|
15
|
-
*/
|
|
16
|
-
leadingHint?: string;
|
|
17
|
-
/**
|
|
18
|
-
* Hint text on the right
|
|
19
|
-
*/
|
|
20
|
-
trailingHint?: string;
|
|
21
|
-
/**
|
|
22
|
-
* Labels on top of the radio selectors, a string returning function called with the selector's index
|
|
23
|
-
*/
|
|
24
|
-
scaleLabels?: (index: number) => string;
|
|
25
|
-
/**
|
|
26
|
-
* If used as a controlled component, this value sets the selected radio
|
|
27
|
-
*/
|
|
28
|
-
value?: number;
|
|
29
|
-
/**
|
|
30
|
-
* Initial selected value
|
|
31
|
-
*/
|
|
32
|
-
defaultValue?: number;
|
|
33
|
-
/**
|
|
34
|
-
* Callback when the user changes the selected value
|
|
35
|
-
*/
|
|
36
|
-
onChange?: (index: number, event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
37
|
-
disabled?: boolean;
|
|
38
|
-
showScaleLabels?: boolean;
|
|
39
|
-
/**
|
|
40
|
-
* When this property is `true`, it styles the radios to the left of the selected as `checked`
|
|
41
|
-
*/
|
|
42
|
-
cumulative?: boolean;
|
|
43
|
-
Icon?: (index: number) => React.ComponentType;
|
|
44
|
-
};
|
|
45
|
-
export declare const Rating: React.ForwardRefExoticComponent<RatingProps & React.RefAttributes<HTMLInputElement>>;
|
|
46
|
-
export declare type RatingFieldProps = RatingProps & Omit<FieldWrapProps, 'size' | 'placeholder' | 'helpPlacement' | 'children'> & {
|
|
47
|
-
size: Exclude<Size, 'large'>;
|
|
48
|
-
};
|
|
49
|
-
/**
|
|
50
|
-
* The `RatingField` component will allow the user to provide feedback by ranking things on a specified scale.
|
|
51
|
-
*/
|
|
52
|
-
export declare const RatingField: React.ForwardRefExoticComponent<RatingProps & Omit<FieldWrapProps, "children" | "size" | "placeholder" | "helpPlacement"> & {
|
|
53
|
-
size: Exclude<Size, 'large'>;
|
|
54
|
-
} & React.RefAttributes<HTMLInputElement>>;
|
|
55
|
-
export default RatingField;
|
package/cjs/rating/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Rating';
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { BaseFieldProps, Size } from '../types';
|
|
3
|
-
export declare type NativeSelectFieldProps = BaseFieldProps & React.ComponentPropsWithRef<'select'> & {
|
|
4
|
-
className?: string;
|
|
5
|
-
visualSize?: Size;
|
|
6
|
-
onSelect?: (event: any) => void;
|
|
7
|
-
onChange?: (event: any) => void;
|
|
8
|
-
};
|
|
9
|
-
export declare const NativeSelectField: React.ForwardRefExoticComponent<Pick<NativeSelectFieldProps, "required" | "key" | "id" | "name" | "color" | "translate" | "value" | "hidden" | "form" | "label" | "slot" | "style" | "title" | "dir" | "accessKey" | "draggable" | "lang" | "className" | "prefix" | "children" | "contentEditable" | "inputMode" | "tabIndex" | "disabled" | "multiple" | "size" | "help" | "autoComplete" | "autoFocus" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "contextMenu" | "placeholder" | "spellCheck" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "css" | "hideAsterisk" | "assistiveText" | "errorMessage" | "visualSize" | "helpPlacement"> & React.RefAttributes<HTMLSelectElement>>;
|
|
10
|
-
export default NativeSelectField;
|
|
@@ -1,83 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import Select, { createFilter, GroupBase, OptionsOrGroups, SingleValue } from 'react-select';
|
|
3
|
-
import { BaseFieldProps } from '../types';
|
|
4
|
-
export declare type BaseReactSelectProps = Omit<React.PropsWithRef<Select>, 'size' | 'css'>;
|
|
5
|
-
export declare type Size = 'small' | 'medium' | 'large';
|
|
6
|
-
export declare const ReactSelectWrapper: import("@emotion/styled").StyledComponent<{
|
|
7
|
-
theme?: import("@emotion/react").Theme | undefined;
|
|
8
|
-
as?: React.ElementType<any> | undefined;
|
|
9
|
-
} & {
|
|
10
|
-
error?: boolean | undefined;
|
|
11
|
-
size?: string | undefined;
|
|
12
|
-
arrow?: boolean | undefined;
|
|
13
|
-
selected?: boolean | undefined;
|
|
14
|
-
}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
15
|
-
export declare const Menu: (props: any) => JSX.Element;
|
|
16
|
-
export declare type SelectFieldProps<T = string> = BaseFieldProps & {
|
|
17
|
-
defaultValue?: SingleValue<T>;
|
|
18
|
-
className?: string;
|
|
19
|
-
components?: any;
|
|
20
|
-
value?: SingleValue<T>;
|
|
21
|
-
visualSize?: Size;
|
|
22
|
-
options?: OptionsOrGroups<T, GroupBase<T>>;
|
|
23
|
-
isSearchable?: boolean;
|
|
24
|
-
onSelect?: (value: SingleValue<T>) => void;
|
|
25
|
-
onChange?: (value: SingleValue<T>) => void;
|
|
26
|
-
onBlur?: (value: any) => void;
|
|
27
|
-
menuIsOpen?: boolean;
|
|
28
|
-
placeholder?: string;
|
|
29
|
-
assistiveText?: string;
|
|
30
|
-
errorMessage?: string;
|
|
31
|
-
/**
|
|
32
|
-
* Indicates that the Select can be cleared after selecting an Option.
|
|
33
|
-
*
|
|
34
|
-
* Setting this to true will display a small dismiss cross when a value is selected
|
|
35
|
-
*/
|
|
36
|
-
isClearable?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* Configuration object passed to react-select createFilter function to create [custom filter
|
|
39
|
-
* logic](https://react-select.com/advanced#custom-filter-logic)
|
|
40
|
-
* @param ignoreCase - boolean (optional)
|
|
41
|
-
* @param ignoreAccents - boolean (optional)
|
|
42
|
-
* @param stringify (obj: any) => string (optional)
|
|
43
|
-
* @param trim - boolean (optional)
|
|
44
|
-
* @param matchForm - 'any' | 'start'
|
|
45
|
-
*/
|
|
46
|
-
filterConfig?: Parameters<typeof createFilter>[0];
|
|
47
|
-
};
|
|
48
|
-
declare function SelectFieldInner<T>({ components, name, label, defaultValue, value, placeholder, onSelect, onChange, isSearchable, onBlur, assistiveText, options, errorMessage, isClearable, disabled, visualSize, required, hideAsterisk, filterConfig, ...rest }: SelectFieldProps<T>, ref: React.ForwardedRef<any>): JSX.Element;
|
|
49
|
-
export declare const SelectField: <T>(props: BaseFieldProps & {
|
|
50
|
-
defaultValue?: SingleValue<T> | undefined;
|
|
51
|
-
className?: string | undefined;
|
|
52
|
-
components?: any;
|
|
53
|
-
value?: SingleValue<T> | undefined;
|
|
54
|
-
visualSize?: Size | undefined;
|
|
55
|
-
options?: OptionsOrGroups<T, GroupBase<T>> | undefined;
|
|
56
|
-
isSearchable?: boolean | undefined;
|
|
57
|
-
onSelect?: ((value: SingleValue<T>) => void) | undefined;
|
|
58
|
-
onChange?: ((value: SingleValue<T>) => void) | undefined;
|
|
59
|
-
onBlur?: ((value: any) => void) | undefined;
|
|
60
|
-
menuIsOpen?: boolean | undefined;
|
|
61
|
-
placeholder?: string | undefined;
|
|
62
|
-
assistiveText?: string | undefined;
|
|
63
|
-
errorMessage?: string | undefined;
|
|
64
|
-
/**
|
|
65
|
-
* Indicates that the Select can be cleared after selecting an Option.
|
|
66
|
-
*
|
|
67
|
-
* Setting this to true will display a small dismiss cross when a value is selected
|
|
68
|
-
*/
|
|
69
|
-
isClearable?: boolean | undefined;
|
|
70
|
-
/**
|
|
71
|
-
* Configuration object passed to react-select createFilter function to create [custom filter
|
|
72
|
-
* logic](https://react-select.com/advanced#custom-filter-logic)
|
|
73
|
-
* @param ignoreCase - boolean (optional)
|
|
74
|
-
* @param ignoreAccents - boolean (optional)
|
|
75
|
-
* @param stringify (obj: any) => string (optional)
|
|
76
|
-
* @param trim - boolean (optional)
|
|
77
|
-
* @param matchForm - 'any' | 'start'
|
|
78
|
-
*/
|
|
79
|
-
filterConfig?: Parameters<typeof createFilter>[0];
|
|
80
|
-
} & {
|
|
81
|
-
ref?: React.ForwardedRef<any> | undefined;
|
|
82
|
-
}) => ReturnType<typeof SelectFieldInner>;
|
|
83
|
-
export default SelectField;
|
package/cjs/switch/Switch.d.ts
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import React, { ChangeEvent } from 'react';
|
|
2
|
-
declare type Size = 'small' | 'medium';
|
|
3
|
-
export declare type SwitchProps = React.PropsWithRef<JSX.IntrinsicElements['label']> & {
|
|
4
|
-
/**
|
|
5
|
-
* Name of the input element
|
|
6
|
-
*/
|
|
7
|
-
name?: string;
|
|
8
|
-
/**
|
|
9
|
-
* State of the switch
|
|
10
|
-
*
|
|
11
|
-
*/
|
|
12
|
-
checked?: boolean;
|
|
13
|
-
/**
|
|
14
|
-
* Controls whether the input is disabled
|
|
15
|
-
*/
|
|
16
|
-
disabled?: boolean;
|
|
17
|
-
/**
|
|
18
|
-
* Callback to fire when the state of the input changes
|
|
19
|
-
*/
|
|
20
|
-
onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
|
|
21
|
-
/**
|
|
22
|
-
* Controls whether the input label should be displayed on the right of the input, displayed on the left by default
|
|
23
|
-
*/
|
|
24
|
-
right?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* Visual size of the switch
|
|
27
|
-
*/
|
|
28
|
-
size?: Size;
|
|
29
|
-
error?: boolean;
|
|
30
|
-
};
|
|
31
|
-
export declare const Switch: React.ForwardRefExoticComponent<Pick<SwitchProps, "error" | "key" | "name" | "right" | "disabled" | "size" | "checked" | "css" | keyof React.LabelHTMLAttributes<HTMLLabelElement>> & React.RefAttributes<HTMLInputElement>>;
|
|
32
|
-
export {};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { SwitchProps } from './Switch';
|
|
3
|
-
declare type SwitchContextProps = Required<Pick<SwitchProps, 'size' | 'error'>> & {
|
|
4
|
-
children?: React.ReactNode;
|
|
5
|
-
};
|
|
6
|
-
export declare const SwitchContext: React.Context<SwitchContextProps | undefined>;
|
|
7
|
-
export declare const SwitchContextProvider: React.FC<{
|
|
8
|
-
value: SwitchContextProps;
|
|
9
|
-
}>;
|
|
10
|
-
declare const useSwitchContext: () => SwitchContextProps | undefined;
|
|
11
|
-
export default useSwitchContext;
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import { BaseFieldProps } from '../types';
|
|
3
|
-
import { SwitchProps } from './Switch';
|
|
4
|
-
export declare type SwitchGroupProps = Pick<BaseFieldProps, 'label' | 'errorMessage' | 'hideAsterisk' | 'required'> & {
|
|
5
|
-
/**
|
|
6
|
-
* JSX enclosed by the group.
|
|
7
|
-
*/
|
|
8
|
-
children: ReactNode;
|
|
9
|
-
} & Pick<SwitchProps, 'size'>;
|
|
10
|
-
export declare const SwitchGroup: ({ size, label, errorMessage, required, hideAsterisk, children, }: SwitchGroupProps) => JSX.Element;
|
package/cjs/switch/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Switch } from './Switch';
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { Locale } from '@dfds-ui/react-components';
|
|
3
|
-
import { BaseFieldProps } from '../types';
|
|
4
|
-
export declare type TelFieldProps = BaseFieldProps & {
|
|
5
|
-
/**
|
|
6
|
-
* Class name to be added to the TelField.
|
|
7
|
-
*/
|
|
8
|
-
className?: string;
|
|
9
|
-
/**
|
|
10
|
-
* Default value for the phone number
|
|
11
|
-
*/
|
|
12
|
-
defaultValue?: string;
|
|
13
|
-
/**
|
|
14
|
-
* Default locale. Will set the matching country in the dropdown
|
|
15
|
-
*/
|
|
16
|
-
defaultLocale?: Locale;
|
|
17
|
-
/**
|
|
18
|
-
* Show trunk values (the local area code shown in parenthesis)
|
|
19
|
-
*/
|
|
20
|
-
showTrunkValues?: boolean;
|
|
21
|
-
/**
|
|
22
|
-
* Makes value splitted so easier to convert to object
|
|
23
|
-
*/
|
|
24
|
-
splitValues?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* Callback when value changes
|
|
27
|
-
*/
|
|
28
|
-
onChange?: (newValue: string) => void;
|
|
29
|
-
/**
|
|
30
|
-
* Callback when blur
|
|
31
|
-
*/
|
|
32
|
-
onBlur?: () => void;
|
|
33
|
-
};
|
|
34
|
-
export declare type TelFieldElement = {
|
|
35
|
-
focus?: () => void;
|
|
36
|
-
};
|
|
37
|
-
export declare const TelField: React.ForwardRefExoticComponent<BaseFieldProps & {
|
|
38
|
-
/**
|
|
39
|
-
* Class name to be added to the TelField.
|
|
40
|
-
*/
|
|
41
|
-
className?: string | undefined;
|
|
42
|
-
/**
|
|
43
|
-
* Default value for the phone number
|
|
44
|
-
*/
|
|
45
|
-
defaultValue?: string | undefined;
|
|
46
|
-
/**
|
|
47
|
-
* Default locale. Will set the matching country in the dropdown
|
|
48
|
-
*/
|
|
49
|
-
defaultLocale?: "en" | "nl-BE" | "bg-BG" | "pt-BR" | "en-CA" | "zh-CN" | "cs-CZ" | "da-DK" | "et-EE" | "fi-FI" | "fr-BE" | "fr-FR" | "de-DE" | "hu-HU" | "it-IT" | "ja-JP" | "lv-LV" | "lt-LT" | "nl-NL" | "nb-NO" | "pl-PL" | "ro-RO" | "ru-RU" | "sk-SK" | "ko-KR" | "es-ES" | "sv-SE" | "tr-TR" | "en-GB" | "en-US" | undefined;
|
|
50
|
-
/**
|
|
51
|
-
* Show trunk values (the local area code shown in parenthesis)
|
|
52
|
-
*/
|
|
53
|
-
showTrunkValues?: boolean | undefined;
|
|
54
|
-
/**
|
|
55
|
-
* Makes value splitted so easier to convert to object
|
|
56
|
-
*/
|
|
57
|
-
splitValues?: boolean | undefined;
|
|
58
|
-
/**
|
|
59
|
-
* Callback when value changes
|
|
60
|
-
*/
|
|
61
|
-
onChange?: ((newValue: string) => void) | undefined;
|
|
62
|
-
/**
|
|
63
|
-
* Callback when blur
|
|
64
|
-
*/
|
|
65
|
-
onBlur?: (() => void) | undefined;
|
|
66
|
-
} & React.RefAttributes<TelFieldElement>>;
|
|
67
|
-
export default TelField;
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { BaseFieldProps, Size } from '../types';
|
|
3
|
-
export declare type TextFieldProps = BaseFieldProps & {
|
|
4
|
-
defaultValue?: string;
|
|
5
|
-
prefix?: React.ReactNode;
|
|
6
|
-
suffix?: React.ReactNode;
|
|
7
|
-
icon?: React.ElementType;
|
|
8
|
-
/**
|
|
9
|
-
* Element to be placed after the input element.
|
|
10
|
-
*
|
|
11
|
-
* Useful for adding a button next to the TextField.
|
|
12
|
-
*/
|
|
13
|
-
adornment?: React.ReactNode;
|
|
14
|
-
className?: string;
|
|
15
|
-
value?: string;
|
|
16
|
-
visualSize?: Size;
|
|
17
|
-
onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
18
|
-
onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
19
|
-
onBlur?: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
20
|
-
inputType?: 'text' | 'tel' | 'time' | 'url' | 'date' | 'file' | 'number' | 'search' | 'password';
|
|
21
|
-
autoComplete?: string;
|
|
22
|
-
minValue?: string;
|
|
23
|
-
maxValue?: string;
|
|
24
|
-
};
|
|
25
|
-
export declare const TextField: React.ForwardRefExoticComponent<BaseFieldProps & {
|
|
26
|
-
defaultValue?: string | undefined;
|
|
27
|
-
prefix?: React.ReactNode;
|
|
28
|
-
suffix?: React.ReactNode;
|
|
29
|
-
icon?: React.ElementType<any> | undefined;
|
|
30
|
-
/**
|
|
31
|
-
* Element to be placed after the input element.
|
|
32
|
-
*
|
|
33
|
-
* Useful for adding a button next to the TextField.
|
|
34
|
-
*/
|
|
35
|
-
adornment?: React.ReactNode;
|
|
36
|
-
className?: string | undefined;
|
|
37
|
-
value?: string | undefined;
|
|
38
|
-
visualSize?: Size | undefined;
|
|
39
|
-
onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
40
|
-
onFocus?: ((event: React.FocusEvent<HTMLInputElement>) => void) | undefined;
|
|
41
|
-
onBlur?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
|
|
42
|
-
inputType?: "number" | "search" | "file" | "password" | "url" | "time" | "text" | "tel" | "date" | undefined;
|
|
43
|
-
autoComplete?: string | undefined;
|
|
44
|
-
minValue?: string | undefined;
|
|
45
|
-
maxValue?: string | undefined;
|
|
46
|
-
} & React.RefAttributes<HTMLInputElement>>;
|
|
47
|
-
export default TextField;
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import React, { ChangeEvent } from 'react';
|
|
2
|
-
import { BaseFieldProps, Size } from '../types';
|
|
3
|
-
export declare const inputPaddings: {
|
|
4
|
-
small: {
|
|
5
|
-
vertical: number;
|
|
6
|
-
horizontal: number;
|
|
7
|
-
};
|
|
8
|
-
medium: {
|
|
9
|
-
vertical: number;
|
|
10
|
-
horizontal: number;
|
|
11
|
-
};
|
|
12
|
-
};
|
|
13
|
-
declare type FieldSize = Extract<Size, 'small' | 'medium'>;
|
|
14
|
-
export declare type TextareaFieldProps = BaseFieldProps & {
|
|
15
|
-
defaultValue?: string;
|
|
16
|
-
size?: FieldSize;
|
|
17
|
-
/**
|
|
18
|
-
* Set a limit to the amount of characters the user may add. This number is also displayed on the bottom counter by default.
|
|
19
|
-
*/
|
|
20
|
-
maxValueLength?: number;
|
|
21
|
-
/**
|
|
22
|
-
* Whether to show the length counter at the bottom right
|
|
23
|
-
*/
|
|
24
|
-
showLengthCounter?: boolean;
|
|
25
|
-
value?: string;
|
|
26
|
-
onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
|
|
27
|
-
rows?: number;
|
|
28
|
-
};
|
|
29
|
-
export declare const TextareaField: React.ForwardRefExoticComponent<BaseFieldProps & {
|
|
30
|
-
defaultValue?: string | undefined;
|
|
31
|
-
size?: FieldSize | undefined;
|
|
32
|
-
/**
|
|
33
|
-
* Set a limit to the amount of characters the user may add. This number is also displayed on the bottom counter by default.
|
|
34
|
-
*/
|
|
35
|
-
maxValueLength?: number | undefined;
|
|
36
|
-
/**
|
|
37
|
-
* Whether to show the length counter at the bottom right
|
|
38
|
-
*/
|
|
39
|
-
showLengthCounter?: boolean | undefined;
|
|
40
|
-
value?: string | undefined;
|
|
41
|
-
onChange?: ((event: React.ChangeEvent<HTMLTextAreaElement>) => void) | undefined;
|
|
42
|
-
rows?: number | undefined;
|
|
43
|
-
} & React.RefAttributes<HTMLTextAreaElement>>;
|
|
44
|
-
export {};
|
package/cjs/types/field.d.ts
DELETED
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
/**
|
|
3
|
-
* Generic FieldProps
|
|
4
|
-
*/
|
|
5
|
-
export declare type BaseFieldProps = {
|
|
6
|
-
/**
|
|
7
|
-
* Field name.
|
|
8
|
-
*/
|
|
9
|
-
name: string;
|
|
10
|
-
/**
|
|
11
|
-
* Field label.
|
|
12
|
-
*/
|
|
13
|
-
label?: ReactNode;
|
|
14
|
-
/**
|
|
15
|
-
* Indicates if the field is required. Will add an asterisk to the label unless `hideAsterisk` is set to `true`.
|
|
16
|
-
*/
|
|
17
|
-
required?: boolean;
|
|
18
|
-
/**
|
|
19
|
-
* If set to `true` the asterisk will never be shown.
|
|
20
|
-
*/
|
|
21
|
-
hideAsterisk?: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* Hint for the field. For Input elements this maps to the `placeholder` attribute.
|
|
24
|
-
*/
|
|
25
|
-
placeholder?: string;
|
|
26
|
-
/**
|
|
27
|
-
* Indicates that the field is disabled.
|
|
28
|
-
*/
|
|
29
|
-
disabled?: boolean;
|
|
30
|
-
/**
|
|
31
|
-
* Sets an error message (if assistive text applies it will be replaced by this).
|
|
32
|
-
*/
|
|
33
|
-
errorMessage?: string;
|
|
34
|
-
/**
|
|
35
|
-
* Assistive text describing the field.
|
|
36
|
-
*
|
|
37
|
-
* NB! If space is needed for alignment you can use a space char (' ') here.
|
|
38
|
-
*/
|
|
39
|
-
assistiveText?: string;
|
|
40
|
-
/**
|
|
41
|
-
* Additional help.
|
|
42
|
-
*
|
|
43
|
-
* **This is an experimental prop and the behavior might change.**
|
|
44
|
-
*/
|
|
45
|
-
help?: string;
|
|
46
|
-
/**
|
|
47
|
-
* Controls the placement of the help icon.
|
|
48
|
-
*
|
|
49
|
-
* **This is an experimental prop and the behavior might change.**
|
|
50
|
-
*/
|
|
51
|
-
helpPlacement?: 'top' | 'right';
|
|
52
|
-
};
|
package/cjs/types/index.d.ts
DELETED
package/cjs/types/size.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare type Size = 'small' | 'medium' | 'large';
|