@dfds-ui/forms 2.0.14-alpha.bdca388a → 2.0.14-alpha.c7c0881c

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.
Files changed (70) hide show
  1. package/asterisk/Asterisk.d.ts +0 -1
  2. package/checkbox/Checkbox.d.ts +6 -0
  3. package/checkbox/Checkbox.js +13 -8
  4. package/checkbox/CheckboxGroup.d.ts +2 -2
  5. package/checkbox/CheckboxGroup.js +14 -6
  6. package/cjs/checkbox/Checkbox.js +13 -8
  7. package/cjs/checkbox/CheckboxGroup.js +14 -6
  8. package/cjs/field-wrap/FieldWrap.js +3 -3
  9. package/cjs/index.js +44 -11
  10. package/cjs/radio/RadioGroup.js +10 -4
  11. package/cjs/select-field/AsyncSelectField.js +114 -0
  12. package/cjs/select-field/NativeSelectField.js +4 -6
  13. package/cjs/select-field/SelectField.js +88 -47
  14. package/cjs/switch/SwitchGroup.js +12 -3
  15. package/cjs/switch/index.js +21 -6
  16. package/cjs/text-field/TextField.js +5 -4
  17. package/field-wrap/FieldWrap.js +3 -3
  18. package/help-icon/HelpIcon.d.ts +0 -1
  19. package/index.d.ts +4 -1
  20. package/index.js +5 -2
  21. package/package.json +7 -7
  22. package/radio/RadioGroup.d.ts +2 -2
  23. package/radio/RadioGroup.js +10 -4
  24. package/select-field/AsyncSelectField.d.ts +99 -0
  25. package/select-field/AsyncSelectField.js +124 -0
  26. package/select-field/NativeSelectField.d.ts +1 -2
  27. package/select-field/NativeSelectField.js +4 -10
  28. package/select-field/SelectField.d.ts +14 -4
  29. package/select-field/SelectField.js +92 -49
  30. package/switch/SwitchGroup.js +21 -12
  31. package/switch/index.d.ts +2 -1
  32. package/switch/index.js +2 -1
  33. package/tel-field/TelField.d.ts +1 -1
  34. package/text-field/TextField.d.ts +12 -2
  35. package/text-field/TextField.js +5 -4
  36. package/cjs/assistive-text/AssistiveText.d.ts +0 -9
  37. package/cjs/asterisk/Asterisk.d.ts +0 -11
  38. package/cjs/checkbox/Checkbox.d.ts +0 -59
  39. package/cjs/checkbox/CheckboxContext.d.ts +0 -13
  40. package/cjs/checkbox/CheckboxGroup.d.ts +0 -20
  41. package/cjs/checkbox/index.d.ts +0 -2
  42. package/cjs/counter/Counter.d.ts +0 -66
  43. package/cjs/counter/index.d.ts +0 -1
  44. package/cjs/enhanced/EnhancedField.d.ts +0 -20
  45. package/cjs/enhanced/index.d.ts +0 -1
  46. package/cjs/error-text/ErrorText.d.ts +0 -8
  47. package/cjs/field-wrap/FieldWrap.d.ts +0 -10
  48. package/cjs/field-wrap/index.d.ts +0 -1
  49. package/cjs/help-icon/HelpIcon.d.ts +0 -7
  50. package/cjs/index.d.ts +0 -15
  51. package/cjs/label/Label.d.ts +0 -11
  52. package/cjs/password-field/PasswordField.d.ts +0 -4
  53. package/cjs/radio/Radio.d.ts +0 -51
  54. package/cjs/radio/RadioContext.d.ts +0 -13
  55. package/cjs/radio/RadioGroup.d.ts +0 -12
  56. package/cjs/radio/index.d.ts +0 -2
  57. package/cjs/rating/Rating.d.ts +0 -55
  58. package/cjs/rating/index.d.ts +0 -1
  59. package/cjs/select-field/NativeSelectField.d.ts +0 -9
  60. package/cjs/select-field/SelectField.d.ts +0 -83
  61. package/cjs/switch/Switch.d.ts +0 -32
  62. package/cjs/switch/SwitchContext.d.ts +0 -11
  63. package/cjs/switch/SwitchGroup.d.ts +0 -10
  64. package/cjs/switch/index.d.ts +0 -1
  65. package/cjs/tel-field/TelField.d.ts +0 -67
  66. package/cjs/text-field/TextField.d.ts +0 -47
  67. package/cjs/textarea-field/TextareaField.d.ts +0 -44
  68. package/cjs/types/field.d.ts +0 -52
  69. package/cjs/types/index.d.ts +0 -2
  70. package/cjs/types/size.d.ts +0 -1
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- import { RadioProps } from './Radio';
3
- declare type RadioContextProps = {
4
- children?: React.ReactNode;
5
- visualSize: NonNullable<RadioProps['visualSize']>;
6
- error: RadioProps['error'];
7
- };
8
- export declare const RadioContext: React.Context<RadioContextProps | undefined>;
9
- export declare const RadioContextProvider: React.FC<{
10
- value: RadioContextProps;
11
- }>;
12
- declare const useRadioContext: () => RadioContextProps | undefined;
13
- export default useRadioContext;
@@ -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;
@@ -1,2 +0,0 @@
1
- export * from './Radio';
2
- export * from './RadioGroup';
@@ -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;
@@ -1 +0,0 @@
1
- export * from './Rating';
@@ -1,9 +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
- onChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
7
- };
8
- 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>>;
9
- 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;
@@ -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;
@@ -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 {};
@@ -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
- };
@@ -1,2 +0,0 @@
1
- export * from './field';
2
- export * from './size';
@@ -1 +0,0 @@
1
- export declare type Size = 'small' | 'medium' | 'large';