@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.
- package/index.cjs +14355 -1195
- package/index.js +14372 -1206
- package/package.json +5 -5
- package/src/components/ActionButton/ActionButton.d.ts +26 -26
- package/src/components/ActionButton/index.d.ts +1 -1
- package/src/components/BaseInput/BaseInput.d.ts +62 -62
- package/src/components/BaseInput/index.d.ts +1 -1
- package/src/components/Checkbox/CheckIcon.d.ts +12 -12
- package/src/components/Checkbox/Checkbox.d.ts +48 -48
- package/src/components/Checkbox/IndeterminateIcon.d.ts +10 -10
- package/src/components/Checkbox/index.d.ts +1 -1
- package/src/components/DateField/DateField.d.ts +19 -19
- package/src/components/DateInput/DateInput.d.ts +28 -28
- package/src/components/DropZone/DropZone.d.ts +34 -34
- package/src/components/EmailField/EmailField.d.ts +17 -17
- package/src/components/EmailInput/EmailInput.d.ts +13 -13
- package/src/components/EmailInput/index.d.ts +1 -1
- package/src/components/FormGroup/FormGroup.d.ts +39 -39
- package/src/components/Label/Label.d.ts +34 -34
- package/src/components/Label/index.d.ts +1 -1
- package/src/components/NumberField/NumberField.d.ts +19 -19
- package/src/components/NumberInput/NumberInput.d.ts +12 -12
- package/src/components/OptionCard/OptionCard.d.ts +24 -24
- package/src/components/PhoneField/PhoneField.d.ts +28 -28
- package/src/components/PhoneInput/CountryCodeSelect.d.ts +23 -23
- package/src/components/PhoneInput/CountryCodes.d.ts +5 -5
- package/src/components/PhoneInput/PhoneInput.d.ts +34 -34
- package/src/components/PhoneInput/PhoneNumberUtilities.d.ts +13 -13
- package/src/components/PhoneInput/index.d.ts +1 -1
- package/src/components/RadioGroup/RadioGroup.d.ts +57 -57
- package/src/components/RadioGroup/RadioGroupContext.d.ts +11 -11
- package/src/components/RadioGroup/RadioItem.d.ts +23 -23
- package/src/components/RadioGroup/index.d.ts +2 -2
- package/src/components/Schedule/Schedule.d.ts +49 -37
- package/src/components/Schedule/Schedule.variants.d.ts +2 -2
- package/src/components/Search/Search.d.ts +62 -62
- package/src/components/Search/index.d.ts +1 -1
- package/src/components/Select/CreatableSelect.d.ts +38 -38
- package/src/components/Select/FieldContainer.d.ts +20 -20
- package/src/components/Select/Select.d.ts +18 -18
- package/src/components/Select/SelectMenuItem/SelectMenuItem.d.ts +49 -49
- package/src/components/Select/TagWithWidth.d.ts +17 -17
- package/src/components/Select/TagsContainer.d.ts +45 -45
- package/src/components/Select/index.d.ts +7 -7
- package/src/components/Select/shared.d.ts +15 -15
- package/src/components/Select/useCustomComponents.d.ts +19 -19
- package/src/components/Select/useCustomStyles.d.ts +14 -14
- package/src/components/Select/useSelect.d.ts +143 -143
- package/src/components/TextArea/TextArea.d.ts +30 -30
- package/src/components/TextArea/index.d.ts +1 -1
- package/src/components/TextAreaField/TextAreaField.d.ts +18 -18
- package/src/components/TextAreaField/index.d.ts +1 -1
- package/src/components/TextField/TextField.d.ts +24 -24
- package/src/components/TextField/TextLenghtIndicator.d.ts +19 -19
- package/src/components/TextField/index.d.ts +1 -1
- package/src/components/TextInput/TextInput.d.ts +12 -12
- package/src/components/TimeRange/TimeRange.d.ts +52 -52
- package/src/components/TimeRange/TimeRange.variants.d.ts +1 -3
- package/src/components/TimeRange/index.d.ts +1 -1
- package/src/components/TimeRangeField/TimeRangeField.d.ts +18 -18
- package/src/components/Toggle/Toggle.d.ts +61 -61
- package/src/components/Toggle/index.d.ts +1 -1
- package/src/components/UploadField/UploadField.d.ts +15 -15
- package/src/components/UploadInput/UploadInput.d.ts +33 -33
- package/src/index.d.ts +28 -28
- package/src/test-utils/hooks.d.ts +4 -4
- package/src/test-utils/test-utils.d.ts +5 -5
- package/src/translation.d.ts +34 -34
- 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 {};
|