@trackunit/react-form-components 0.0.67 → 0.0.76

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 (69) hide show
  1. package/index.cjs +14355 -1195
  2. package/index.js +14372 -1206
  3. package/package.json +5 -5
  4. package/src/components/ActionButton/ActionButton.d.ts +26 -26
  5. package/src/components/ActionButton/index.d.ts +1 -1
  6. package/src/components/BaseInput/BaseInput.d.ts +62 -62
  7. package/src/components/BaseInput/index.d.ts +1 -1
  8. package/src/components/Checkbox/CheckIcon.d.ts +12 -12
  9. package/src/components/Checkbox/Checkbox.d.ts +48 -48
  10. package/src/components/Checkbox/IndeterminateIcon.d.ts +10 -10
  11. package/src/components/Checkbox/index.d.ts +1 -1
  12. package/src/components/DateField/DateField.d.ts +19 -19
  13. package/src/components/DateInput/DateInput.d.ts +28 -28
  14. package/src/components/DropZone/DropZone.d.ts +34 -34
  15. package/src/components/EmailField/EmailField.d.ts +17 -17
  16. package/src/components/EmailInput/EmailInput.d.ts +13 -13
  17. package/src/components/EmailInput/index.d.ts +1 -1
  18. package/src/components/FormGroup/FormGroup.d.ts +39 -39
  19. package/src/components/Label/Label.d.ts +34 -34
  20. package/src/components/Label/index.d.ts +1 -1
  21. package/src/components/NumberField/NumberField.d.ts +19 -19
  22. package/src/components/NumberInput/NumberInput.d.ts +12 -12
  23. package/src/components/OptionCard/OptionCard.d.ts +24 -24
  24. package/src/components/PhoneField/PhoneField.d.ts +28 -28
  25. package/src/components/PhoneInput/CountryCodeSelect.d.ts +23 -23
  26. package/src/components/PhoneInput/CountryCodes.d.ts +5 -5
  27. package/src/components/PhoneInput/PhoneInput.d.ts +34 -34
  28. package/src/components/PhoneInput/PhoneNumberUtilities.d.ts +13 -13
  29. package/src/components/PhoneInput/index.d.ts +1 -1
  30. package/src/components/RadioGroup/RadioGroup.d.ts +57 -57
  31. package/src/components/RadioGroup/RadioGroupContext.d.ts +11 -11
  32. package/src/components/RadioGroup/RadioItem.d.ts +23 -23
  33. package/src/components/RadioGroup/index.d.ts +2 -2
  34. package/src/components/Schedule/Schedule.d.ts +49 -37
  35. package/src/components/Schedule/Schedule.variants.d.ts +2 -2
  36. package/src/components/Search/Search.d.ts +62 -62
  37. package/src/components/Search/index.d.ts +1 -1
  38. package/src/components/Select/CreatableSelect.d.ts +38 -38
  39. package/src/components/Select/FieldContainer.d.ts +20 -20
  40. package/src/components/Select/Select.d.ts +18 -18
  41. package/src/components/Select/SelectMenuItem/SelectMenuItem.d.ts +49 -49
  42. package/src/components/Select/TagWithWidth.d.ts +17 -17
  43. package/src/components/Select/TagsContainer.d.ts +45 -45
  44. package/src/components/Select/index.d.ts +7 -7
  45. package/src/components/Select/shared.d.ts +15 -15
  46. package/src/components/Select/useCustomComponents.d.ts +19 -19
  47. package/src/components/Select/useCustomStyles.d.ts +14 -14
  48. package/src/components/Select/useSelect.d.ts +143 -143
  49. package/src/components/TextArea/TextArea.d.ts +30 -30
  50. package/src/components/TextArea/index.d.ts +1 -1
  51. package/src/components/TextAreaField/TextAreaField.d.ts +18 -18
  52. package/src/components/TextAreaField/index.d.ts +1 -1
  53. package/src/components/TextField/TextField.d.ts +24 -24
  54. package/src/components/TextField/TextLenghtIndicator.d.ts +19 -19
  55. package/src/components/TextField/index.d.ts +1 -1
  56. package/src/components/TextInput/TextInput.d.ts +12 -12
  57. package/src/components/TimeRange/TimeRange.d.ts +52 -52
  58. package/src/components/TimeRange/TimeRange.variants.d.ts +1 -3
  59. package/src/components/TimeRange/index.d.ts +1 -1
  60. package/src/components/TimeRangeField/TimeRangeField.d.ts +18 -18
  61. package/src/components/Toggle/Toggle.d.ts +61 -61
  62. package/src/components/Toggle/index.d.ts +1 -1
  63. package/src/components/UploadField/UploadField.d.ts +15 -15
  64. package/src/components/UploadInput/UploadInput.d.ts +33 -33
  65. package/src/index.d.ts +28 -28
  66. package/src/test-utils/hooks.d.ts +4 -4
  67. package/src/test-utils/test-utils.d.ts +5 -5
  68. package/src/translation.d.ts +34 -34
  69. package/src/utilities/usePhoneInput.d.ts +56 -56
@@ -1,7 +1,7 @@
1
- import ValueType from "react-select";
2
- export * from "./CreatableSelect";
3
- export * from "./Select";
4
- export * from "./SelectMenuItem/SelectMenuItem";
5
- export * from "./shared";
6
- export * from "./useCustomComponents";
7
- export { ValueType };
1
+ import ValueType from "react-select";
2
+ export * from "./CreatableSelect";
3
+ export * from "./Select";
4
+ export * from "./SelectMenuItem/SelectMenuItem";
5
+ export * from "./shared";
6
+ export * from "./useCustomComponents";
7
+ export { ValueType };
@@ -1,15 +1,15 @@
1
- import { GroupBase, MultiValue, OptionsOrGroups, PropsValue, SingleValue } from "react-select";
2
- /**
3
- * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
4
- * @returns {arg is MultiValue<Option> } is Multivalue
5
- */
6
- export declare function isMultiValue<Option>(arg: MultiValue<Option> | SingleValue<Option>): arg is MultiValue<Option>;
7
- /**
8
- * @template IsMulti
9
- * @template Group
10
- * @param {OptionsOrGroups<Option, Group> | undefined} options An array of options to select from
11
- * @param {PropsValue<Option> | undefined} value Selected values
12
- * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
13
- */
14
- export declare const getOrderedOptions: <Option, Group extends GroupBase<Option>>(options: OptionsOrGroups<Option, Group> | undefined, value: PropsValue<Option> | undefined) => OptionsOrGroups<Option, Group>;
15
- export declare const SelectPrefix: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"div">, {}>;
1
+ import { GroupBase, MultiValue, OptionsOrGroups, PropsValue, SingleValue } from "react-select";
2
+ /**
3
+ * @param {MultiValue<Option> | SingleValue<Option>} arg option to check type
4
+ * @returns {arg is MultiValue<Option> } is Multivalue
5
+ */
6
+ export declare function isMultiValue<Option>(arg: MultiValue<Option> | SingleValue<Option>): arg is MultiValue<Option>;
7
+ /**
8
+ * @template IsMulti
9
+ * @template Group
10
+ * @param {OptionsOrGroups<Option, Group> | undefined} options An array of options to select from
11
+ * @param {PropsValue<Option> | undefined} value Selected values
12
+ * @returns {OptionsOrGroups<Option, Group>} An array of ordered options with selected on top
13
+ */
14
+ export declare const getOrderedOptions: <Option, Group extends GroupBase<Option>>(options: OptionsOrGroups<Option, Group> | undefined, value: PropsValue<Option> | undefined) => OptionsOrGroups<Option, Group>;
15
+ export declare const SelectPrefix: import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindComponent<import("dist/libs/ui/tailwind-styled-components/src/lib/types").TailwindHtmlComponent<"div">, {}>;
@@ -1,19 +1,19 @@
1
- import * as React from "react";
2
- import { GroupBase } from "react-select";
3
- import { SelectComponents } from "react-select/dist/declarations/src/components";
4
- /**
5
- * A hook to retrieve components override object.
6
- * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
7
- *
8
- * @template IsMulti
9
- * @template Group
10
- * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
11
- * @param {boolean} disabled decide to override disabled variant
12
- * @param {boolean} menuIsOpen menu is open state
13
- * @param {React.MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
14
- * @param {string} dataTestId a test id
15
- * @param {number} maxSelectedDisplayCount a number of max display count
16
- * @param {JSX.Element} dropdownIcon an custom dropdown icon
17
- * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
18
- */
19
- export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined, disabled: boolean, menuIsOpen: boolean, refMenuIsEnabled: React.MutableRefObject<boolean>, dataTestId: string, maxSelectedDisplayCount: number | undefined, dropdownIcon?: JSX.Element) => Partial<SelectComponents<Option, IsMulti, Group>>;
1
+ import * as React from "react";
2
+ import { GroupBase } from "react-select";
3
+ import { SelectComponents } from "react-select/dist/declarations/src/components";
4
+ /**
5
+ * A hook to retrieve components override object.
6
+ * This complex object includes all the compositional components that are used in react-select. If you wish to overwrite a component, pass in an object with the appropriate namespace.
7
+ *
8
+ * @template IsMulti
9
+ * @template Group
10
+ * @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
11
+ * @param {boolean} disabled decide to override disabled variant
12
+ * @param {boolean} menuIsOpen menu is open state
13
+ * @param {React.MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
14
+ * @param {string} dataTestId a test id
15
+ * @param {number} maxSelectedDisplayCount a number of max display count
16
+ * @param {JSX.Element} dropdownIcon an custom dropdown icon
17
+ * @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
18
+ */
19
+ export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined, disabled: boolean, menuIsOpen: boolean, refMenuIsEnabled: React.MutableRefObject<boolean>, dataTestId: string, maxSelectedDisplayCount: number | undefined, dropdownIcon?: JSX.Element) => Partial<SelectComponents<Option, IsMulti, Group>>;
@@ -1,14 +1,14 @@
1
- import * as React from "react";
2
- import { GroupBase, StylesConfig } from "react-select";
3
- /**
4
- * @template IsMulti
5
- * @template Group
6
- * @param {React.RefObject<HTMLDivElement>} refContainer react ref to container element
7
- * @param {React.RefObject<HTMLDivElement>} refPrefix react ref to prefix element
8
- * @param {number | undefined} maxSelectedDisplayCount a number of max display count
9
- * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
10
- * @returns {StylesConfig<Option, boolean>} styles to override in select
11
- */
12
- export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(refContainer: React.RefObject<HTMLDivElement>, refPrefix: React.RefObject<HTMLDivElement>, maxSelectedDisplayCount: number | undefined, styles: StylesConfig<Option, IsMulti, Group> | undefined) => {
13
- customStyles: StylesConfig<Option, IsMulti, Group>;
14
- };
1
+ import * as React from "react";
2
+ import { GroupBase, StylesConfig } from "react-select";
3
+ /**
4
+ * @template IsMulti
5
+ * @template Group
6
+ * @param {React.RefObject<HTMLDivElement>} refContainer react ref to container element
7
+ * @param {React.RefObject<HTMLDivElement>} refPrefix react ref to prefix element
8
+ * @param {number | undefined} maxSelectedDisplayCount a number of max display count
9
+ * @param {StylesConfig<Option, IsMulti, Group> | undefined} styles a optional object to override styles of react-select
10
+ * @returns {StylesConfig<Option, boolean>} styles to override in select
11
+ */
12
+ export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(refContainer: React.RefObject<HTMLDivElement>, refPrefix: React.RefObject<HTMLDivElement>, maxSelectedDisplayCount: number | undefined, styles: StylesConfig<Option, IsMulti, Group> | undefined) => {
13
+ customStyles: StylesConfig<Option, IsMulti, Group>;
14
+ };
@@ -1,143 +1,143 @@
1
- import { CommonProps } from "@trackunit/react-components";
2
- import React from "react";
3
- import { GroupBase, MenuPlacement, OptionsOrGroups, Props, StylesConfig } from "react-select";
4
- import { SelectComponents } from "react-select/dist/declarations/src/components";
5
- export interface AsyncSelect<Option, Group extends GroupBase<Option> = GroupBase<Option>> {
6
- loadOptions: (input: string) => void | Promise<OptionsOrGroups<Option, Group>>;
7
- defaultOptions: OptionsOrGroups<Option, Group> | undefined;
8
- cacheOptions: boolean;
9
- }
10
- export interface SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> extends CommonProps, Props<Option, IsMulti, GroupType> {
11
- /**
12
- * An React element to render before the text in the select.
13
- * This is typically used to render an icon.
14
- *
15
- *
16
- * @memberof SelectProps
17
- */
18
- prefix?: JSX.Element;
19
- /**
20
- * An string to render in field when there is no value selected.
21
- * Can be used as a description, example or a hint.
22
- *
23
- *
24
- * @memberof SelectProps
25
- */
26
- placeholder?: string;
27
- /**
28
- * An boolean flag to disable field
29
- *
30
- *
31
- * @memberof SelectProps
32
- */
33
- disabled?: boolean;
34
- /**
35
- * An field id
36
- *
37
- *
38
- * @memberof SelectProps
39
- */
40
- id?: string;
41
- /**
42
- * An boolean flag to set select into async mode
43
- * This is typically used when data is fetched after render
44
- *
45
- *
46
- * @memberof SelectProps
47
- */
48
- async?: AsyncSelect<Option, GroupType>;
49
- /**
50
- * A custom icon to be used as a dropdown indicator
51
- * This is typically used during style customization
52
- *
53
- *
54
- * @memberof SelectProps
55
- */
56
- dropdownIcon?: JSX.Element;
57
- /**
58
- * A label to be used as a aria-label
59
- * This is typically used for accessibility
60
- *
61
- *
62
- * @memberof SelectProps
63
- */
64
- label?: string;
65
- /**
66
- * A number of pixels to limit maximal length of the select menu list
67
- *
68
- *
69
- * @memberof SelectProps
70
- */
71
- maxMenuHeight?: number;
72
- /**
73
- * A boolean prop to set select into invalid mode
74
- * typically used when selected value is not compliant with field requirement
75
- * ex if it breaks validation rules
76
- *
77
- *
78
- * @memberof SelectProps
79
- */
80
- hasError?: boolean;
81
- /**
82
- * A boolean flag to display loading indicator
83
- *
84
- *
85
- * @memberof SelectProps
86
- */
87
- isLoading?: boolean;
88
- /**
89
- * A number value to limit amount of visible tags for selected options
90
- *
91
- *
92
- * @memberof SelectProps
93
- */
94
- maxSelectedDisplayCount?: number;
95
- /**
96
- * A custom handler for menu open event
97
- * use if you want to trigger custom logic or fetch data
98
- *
99
- *
100
- * @memberof SelectProps
101
- */
102
- onMenuOpen?: () => void;
103
- /**
104
- * A flag to allow user to clear value once selected
105
- * default value is true
106
- *
107
- *
108
- * @memberof SelectProps
109
- */
110
- isClearable?: boolean;
111
- /**
112
- * A flag to allow user to filter option list by key from the text input
113
- *
114
- *
115
- * @memberof SelectProps
116
- */
117
- isSearchable?: boolean;
118
- /**
119
- * A flag to set select into async mode
120
- *
121
- * @memberof SelectProps
122
- */
123
- isAsync?: IsAsync;
124
- }
125
- interface IUseSelect<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
126
- customStyles: StylesConfig<Option, IsMulti, Group>;
127
- customComponents: Partial<SelectComponents<Option, IsMulti, Group>>;
128
- refContainer: React.RefObject<HTMLDivElement>;
129
- refPrefix: React.RefObject<HTMLDivElement>;
130
- menuIsOpen: boolean;
131
- menuPlacement: MenuPlacement;
132
- openMenuHandler: () => Promise<void>;
133
- closeMenuHandler: () => void;
134
- orderedOptions: OptionsOrGroups<Option, Group>;
135
- }
136
- /**
137
- * A hook used by selects to share the common code
138
- *
139
- * @param {SelectProps} props - The props for the Select component
140
- * @returns {IUseSelect} Select component
141
- */
142
- export declare const useSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, dataTestId, prefix, async, dropdownIcon, maxMenuHeight, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix, onMenuOpen, onMenuClose, maxSelectedDisplayCount, isClearable, isSearchable, onMenuScrollToBottom, styles, filterOption, onInputChange, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => IUseSelect<Option, IsMulti, Group>;
143
- export {};
1
+ import { CommonProps } from "@trackunit/react-components";
2
+ import React from "react";
3
+ import { GroupBase, MenuPlacement, OptionsOrGroups, Props, StylesConfig } from "react-select";
4
+ import { SelectComponents } from "react-select/dist/declarations/src/components";
5
+ export interface AsyncSelect<Option, Group extends GroupBase<Option> = GroupBase<Option>> {
6
+ loadOptions: (input: string) => void | Promise<OptionsOrGroups<Option, Group>>;
7
+ defaultOptions: OptionsOrGroups<Option, Group> | undefined;
8
+ cacheOptions: boolean;
9
+ }
10
+ export interface SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> extends CommonProps, Props<Option, IsMulti, GroupType> {
11
+ /**
12
+ * An React element to render before the text in the select.
13
+ * This is typically used to render an icon.
14
+ *
15
+ *
16
+ * @memberof SelectProps
17
+ */
18
+ prefix?: JSX.Element;
19
+ /**
20
+ * An string to render in field when there is no value selected.
21
+ * Can be used as a description, example or a hint.
22
+ *
23
+ *
24
+ * @memberof SelectProps
25
+ */
26
+ placeholder?: string;
27
+ /**
28
+ * An boolean flag to disable field
29
+ *
30
+ *
31
+ * @memberof SelectProps
32
+ */
33
+ disabled?: boolean;
34
+ /**
35
+ * An field id
36
+ *
37
+ *
38
+ * @memberof SelectProps
39
+ */
40
+ id?: string;
41
+ /**
42
+ * An boolean flag to set select into async mode
43
+ * This is typically used when data is fetched after render
44
+ *
45
+ *
46
+ * @memberof SelectProps
47
+ */
48
+ async?: AsyncSelect<Option, GroupType>;
49
+ /**
50
+ * A custom icon to be used as a dropdown indicator
51
+ * This is typically used during style customization
52
+ *
53
+ *
54
+ * @memberof SelectProps
55
+ */
56
+ dropdownIcon?: JSX.Element;
57
+ /**
58
+ * A label to be used as a aria-label
59
+ * This is typically used for accessibility
60
+ *
61
+ *
62
+ * @memberof SelectProps
63
+ */
64
+ label?: string;
65
+ /**
66
+ * A number of pixels to limit maximal length of the select menu list
67
+ *
68
+ *
69
+ * @memberof SelectProps
70
+ */
71
+ maxMenuHeight?: number;
72
+ /**
73
+ * A boolean prop to set select into invalid mode
74
+ * typically used when selected value is not compliant with field requirement
75
+ * ex if it breaks validation rules
76
+ *
77
+ *
78
+ * @memberof SelectProps
79
+ */
80
+ hasError?: boolean;
81
+ /**
82
+ * A boolean flag to display loading indicator
83
+ *
84
+ *
85
+ * @memberof SelectProps
86
+ */
87
+ isLoading?: boolean;
88
+ /**
89
+ * A number value to limit amount of visible tags for selected options
90
+ *
91
+ *
92
+ * @memberof SelectProps
93
+ */
94
+ maxSelectedDisplayCount?: number;
95
+ /**
96
+ * A custom handler for menu open event
97
+ * use if you want to trigger custom logic or fetch data
98
+ *
99
+ *
100
+ * @memberof SelectProps
101
+ */
102
+ onMenuOpen?: () => void;
103
+ /**
104
+ * A flag to allow user to clear value once selected
105
+ * default value is true
106
+ *
107
+ *
108
+ * @memberof SelectProps
109
+ */
110
+ isClearable?: boolean;
111
+ /**
112
+ * A flag to allow user to filter option list by key from the text input
113
+ *
114
+ *
115
+ * @memberof SelectProps
116
+ */
117
+ isSearchable?: boolean;
118
+ /**
119
+ * A flag to set select into async mode
120
+ *
121
+ * @memberof SelectProps
122
+ */
123
+ isAsync?: IsAsync;
124
+ }
125
+ interface IUseSelect<Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> {
126
+ customStyles: StylesConfig<Option, IsMulti, Group>;
127
+ customComponents: Partial<SelectComponents<Option, IsMulti, Group>>;
128
+ refContainer: React.RefObject<HTMLDivElement>;
129
+ refPrefix: React.RefObject<HTMLDivElement>;
130
+ menuIsOpen: boolean;
131
+ menuPlacement: MenuPlacement;
132
+ openMenuHandler: () => Promise<void>;
133
+ closeMenuHandler: () => void;
134
+ orderedOptions: OptionsOrGroups<Option, Group>;
135
+ }
136
+ /**
137
+ * A hook used by selects to share the common code
138
+ *
139
+ * @param {SelectProps} props - The props for the Select component
140
+ * @returns {IUseSelect} Select component
141
+ */
142
+ export declare const useSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ id, className, dataTestId, prefix, async, dropdownIcon, maxMenuHeight, label, hasError, disabled, isMulti, components, value, options, onChange, isLoading, classNamePrefix, onMenuOpen, onMenuClose, maxSelectedDisplayCount, isClearable, isSearchable, onMenuScrollToBottom, styles, filterOption, onInputChange, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => IUseSelect<Option, IsMulti, Group>;
143
+ export {};
@@ -1,30 +1,30 @@
1
- import { CommonProps } from "@trackunit/react-components";
2
- import * as React from "react";
3
- export type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
4
- type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "prefix" | "suffix">;
5
- export interface TextAreaProps extends FilteredInputProps, CommonProps {
6
- /**
7
- * Number of rows in the text area.
8
- */
9
- rows?: number;
10
- /**
11
- * Resize of the text area.
12
- *
13
- * @default "vertical"
14
- */
15
- resize?: TextAreaResize;
16
- /**
17
- * Default value of the textarea.
18
- */
19
- defaultValue?: React.ReactText;
20
- /**
21
- * If true the field is rendered in its invalid state.
22
- */
23
- isInvalid?: boolean;
24
- }
25
- /**
26
- * The TextArea is a base component, and should not be used very often.
27
- * For most cases the TextAreaField is the correct component.
28
- */
29
- export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
30
- export {};
1
+ import { CommonProps } from "@trackunit/react-components";
2
+ import * as React from "react";
3
+ export type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
4
+ type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "prefix" | "suffix">;
5
+ export interface TextAreaProps extends FilteredInputProps, CommonProps {
6
+ /**
7
+ * Number of rows in the text area.
8
+ */
9
+ rows?: number;
10
+ /**
11
+ * Resize of the text area.
12
+ *
13
+ * @default "vertical"
14
+ */
15
+ resize?: TextAreaResize;
16
+ /**
17
+ * Default value of the textarea.
18
+ */
19
+ defaultValue?: React.ReactText;
20
+ /**
21
+ * If true the field is rendered in its invalid state.
22
+ */
23
+ isInvalid?: boolean;
24
+ }
25
+ /**
26
+ * The TextArea is a base component, and should not be used very often.
27
+ * For most cases the TextAreaField is the correct component.
28
+ */
29
+ export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
30
+ export {};
@@ -1 +1 @@
1
- export * from "./TextArea";
1
+ export * from "./TextArea";
@@ -1,18 +1,18 @@
1
- import { CommonProps } from "@trackunit/react-components";
2
- import * as React from "react";
3
- import { FormGroupProps } from "../FormGroup/FormGroup";
4
- import { TextAreaProps } from "../TextArea/TextArea";
5
- type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
6
- export interface TextAreaFieldProps extends TextAreaProps, FormGroupExposedProps, CommonProps {
7
- /**
8
- * Set the Maximal length of the value for the input.
9
- * Adds a TextLengthIndicator to the right of the helpText.
10
- */
11
- maxLength?: number;
12
- /**
13
- * If a value is set, the field is rendered in its invalid state.
14
- */
15
- errorMessage?: string;
16
- }
17
- export declare const TextAreaField: React.ForwardRefExoticComponent<TextAreaFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
18
- export {};
1
+ import { CommonProps } from "@trackunit/react-components";
2
+ import * as React from "react";
3
+ import { FormGroupProps } from "../FormGroup/FormGroup";
4
+ import { TextAreaProps } from "../TextArea/TextArea";
5
+ type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
6
+ export interface TextAreaFieldProps extends TextAreaProps, FormGroupExposedProps, CommonProps {
7
+ /**
8
+ * Set the Maximal length of the value for the input.
9
+ * Adds a TextLengthIndicator to the right of the helpText.
10
+ */
11
+ maxLength?: number;
12
+ /**
13
+ * If a value is set, the field is rendered in its invalid state.
14
+ */
15
+ errorMessage?: string;
16
+ }
17
+ export declare const TextAreaField: React.ForwardRefExoticComponent<TextAreaFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
18
+ export {};
@@ -1 +1 @@
1
- export * from "./TextAreaField";
1
+ export * from "./TextAreaField";
@@ -1,24 +1,24 @@
1
- import * as React from "react";
2
- import { FormGroupProps } from "../FormGroup/FormGroup";
3
- import { TextInputProps } from "../TextInput/TextInput";
4
- type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
5
- export interface TextFieldProps extends TextInputProps, FormGroupExposedProps {
6
- /**
7
- * Set the Maximal length of the value for the input.
8
- * Adds a TextLengthIndicator to the right of the helpText.
9
- */
10
- maxLength?: number;
11
- /**
12
- * If a value is set, the field is rendered in its invalid state.
13
- */
14
- errorMessage?: string;
15
- }
16
- /**
17
- * Text fields enable the user to interact with and input content and data. This component can be used for long and short form entries. Allow the size of the text input box to reflect the length of the content you expect the user to enter.
18
- *
19
- * _**Do use** when the user has to input or edit simple text based information, such as metadata._
20
- *
21
- * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
22
- */
23
- export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
24
- export {};
1
+ import * as React from "react";
2
+ import { FormGroupProps } from "../FormGroup/FormGroup";
3
+ import { TextInputProps } from "../TextInput/TextInput";
4
+ type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
5
+ export interface TextFieldProps extends TextInputProps, FormGroupExposedProps {
6
+ /**
7
+ * Set the Maximal length of the value for the input.
8
+ * Adds a TextLengthIndicator to the right of the helpText.
9
+ */
10
+ maxLength?: number;
11
+ /**
12
+ * If a value is set, the field is rendered in its invalid state.
13
+ */
14
+ errorMessage?: string;
15
+ }
16
+ /**
17
+ * Text fields enable the user to interact with and input content and data. This component can be used for long and short form entries. Allow the size of the text input box to reflect the length of the content you expect the user to enter.
18
+ *
19
+ * _**Do use** when the user has to input or edit simple text based information, such as metadata._
20
+ *
21
+ * _**Do not use** to confirm user actions, such as deleting. Use a checkbox for such flows._
22
+ */
23
+ export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
24
+ export {};
@@ -1,19 +1,19 @@
1
- import * as React from "react";
2
- export interface TextLengthIndicatorProps {
3
- /**
4
- * The current length of the content of the input
5
- */
6
- length: number;
7
- /**
8
- * The max number of characters allowed in the input
9
- */
10
- maxLength: number;
11
- }
12
- /**
13
- * The TextLengthIndicator component shows a `{length}/{maxLength}` label.
14
- * Used for TextFields to communicate a maximum allowed input length.
15
- *
16
- * @param {TextLengthIndicatorProps} props - The props for the TextLengthIndicator component
17
- * @returns {JSX.Element} TextLengthIndicator component
18
- */
19
- export declare const TextLengthIndicator: React.FC<TextLengthIndicatorProps>;
1
+ import * as React from "react";
2
+ export interface TextLengthIndicatorProps {
3
+ /**
4
+ * The current length of the content of the input
5
+ */
6
+ length: number;
7
+ /**
8
+ * The max number of characters allowed in the input
9
+ */
10
+ maxLength: number;
11
+ }
12
+ /**
13
+ * The TextLengthIndicator component shows a `{length}/{maxLength}` label.
14
+ * Used for TextFields to communicate a maximum allowed input length.
15
+ *
16
+ * @param {TextLengthIndicatorProps} props - The props for the TextLengthIndicator component
17
+ * @returns {JSX.Element} TextLengthIndicator component
18
+ */
19
+ export declare const TextLengthIndicator: React.FC<TextLengthIndicatorProps>;
@@ -1 +1 @@
1
- export * from "./TextField";
1
+ export * from "./TextField";
@@ -1,12 +1,12 @@
1
- /// <reference types="react" />
2
- import { BaseInputProps } from "../BaseInput/BaseInput";
3
- type BaseInputExposedProps = Omit<BaseInputProps, "type">;
4
- export interface TextInputProps extends BaseInputExposedProps {
5
- }
6
- /**
7
- * A thin wrapper around the `BaseInput` component for text input fields.
8
- *
9
- * NOTE: If shown with a label, please use the `TextField` component instead.
10
- */
11
- export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;
12
- export {};
1
+ /// <reference types="react" />
2
+ import { BaseInputProps } from "../BaseInput/BaseInput";
3
+ type BaseInputExposedProps = Omit<BaseInputProps, "type">;
4
+ export interface TextInputProps extends BaseInputExposedProps {
5
+ }
6
+ /**
7
+ * A thin wrapper around the `BaseInput` component for text input fields.
8
+ *
9
+ * NOTE: If shown with a label, please use the `TextField` component instead.
10
+ */
11
+ export declare const TextInput: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;
12
+ export {};