@trackunit/react-components 0.0.1-alpha-59a0a75488.0
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/README.md +22 -0
- package/common/CommonProps.d.ts +12 -0
- package/common/LegacyComponentStory.d.ts +7 -0
- package/common/StorybookProps.d.ts +6 -0
- package/common/index.d.ts +3 -0
- package/common/useContainerProps.d.ts +16 -0
- package/components/ActionButton/ActionButton.d.ts +30 -0
- package/components/ActionButton/index.d.ts +1 -0
- package/components/Alert/Alert.d.ts +53 -0
- package/components/Alert/index.d.ts +1 -0
- package/components/Badge/Badge.d.ts +47 -0
- package/components/Badge/index.d.ts +1 -0
- package/components/BaseInput/BaseInput.d.ts +62 -0
- package/components/BaseInput/index.d.ts +1 -0
- package/components/Card/Card.d.ts +45 -0
- package/components/Card/CardBody.d.ts +32 -0
- package/components/Card/CardFooter.d.ts +21 -0
- package/components/Card/CardHeader.d.ts +43 -0
- package/components/Card/DensityContainer.d.ts +30 -0
- package/components/Card/index.d.ts +5 -0
- package/components/Chart/Chart.d.ts +81 -0
- package/components/Chart/index.d.ts +1 -0
- package/components/Checkbox/CheckIcon.d.ts +12 -0
- package/components/Checkbox/Checkbox.d.ts +40 -0
- package/components/Checkbox/IndeterminateIcon.d.ts +10 -0
- package/components/Checkbox/index.d.ts +1 -0
- package/components/Collapse/Collapse.d.ts +28 -0
- package/components/Collapse/index.d.ts +1 -0
- package/components/CopyableText/CopyableText.d.ts +21 -0
- package/components/CopyableText/index.d.ts +1 -0
- package/components/DateField/DateField.d.ts +19 -0
- package/components/DateInput/DateInput.d.ts +28 -0
- package/components/DayPicker/DayPicker.d.ts +28 -0
- package/components/DayPicker/DayPickerPopover.d.ts +23 -0
- package/components/DayPicker/DayRangePicker.d.ts +18 -0
- package/components/DayPicker/index.d.ts +21 -0
- package/components/DayPicker/useLocale.d.ts +8 -0
- package/components/EmailInput/EmailInput.d.ts +20 -0
- package/components/FormGroup/FormGroup.d.ts +38 -0
- package/components/Heading/Heading.d.ts +28 -0
- package/components/Heading/index.d.ts +1 -0
- package/components/Icon/Icon.d.ts +51 -0
- package/components/Indicator/Indicator.d.ts +42 -0
- package/components/Indicator/index.d.ts +1 -0
- package/components/Label/Label.d.ts +34 -0
- package/components/Label/index.d.ts +1 -0
- package/components/LegendItem/LegendItem.d.ts +17 -0
- package/components/LegendItem/index.d.ts +1 -0
- package/components/Menu/MenuItem.d.ts +58 -0
- package/components/Menu/MenuList.d.ts +34 -0
- package/components/Menu/index.d.ts +2 -0
- package/components/Modal/Modal.d.ts +32 -0
- package/components/Modal/ModalBackdrop.d.ts +13 -0
- package/components/Modal/index.d.ts +3 -0
- package/components/Modal/useModal.d.ts +21 -0
- package/components/NumberField/NumberField.d.ts +19 -0
- package/components/NumberInput/NumberInput.d.ts +12 -0
- package/components/PageHeader/PageHeader.d.ts +47 -0
- package/components/PageHeader/index.d.ts +1 -0
- package/components/Pagination/Pagination.d.ts +71 -0
- package/components/PhoneInput/PhoneInput.d.ts +20 -0
- package/components/Popover/AnimatedPopover.d.ts +43 -0
- package/components/Popover/PopoverList.d.ts +12 -0
- package/components/Popover/PopoverListItem.d.ts +30 -0
- package/components/Popover/PopoverTitle.d.ts +20 -0
- package/components/Popover/index.d.ts +5 -0
- package/components/Popover/usePopover.d.ts +42 -0
- package/components/Prompt/Prompt.d.ts +20 -0
- package/components/Prompt/index.d.ts +1 -0
- package/components/RadioGroup/RadioGroup.d.ts +57 -0
- package/components/RadioGroup/RadioGroupContext.d.ts +11 -0
- package/components/RadioGroup/RadioItem.d.ts +24 -0
- package/components/RadioGroup/index.d.ts +2 -0
- package/components/SectionHeader/SectionHeader.d.ts +24 -0
- package/components/SectionHeader/index.d.ts +1 -0
- package/components/Select/CreatableSelect.d.ts +38 -0
- package/components/Select/FieldContainer.d.ts +20 -0
- package/components/Select/Select.d.ts +18 -0
- package/components/Select/SelectMenuItem/SelectMenuItem.d.ts +49 -0
- package/components/Select/TagWithWidth.d.ts +17 -0
- package/components/Select/TagsContainer.d.ts +45 -0
- package/components/Select/index.d.ts +7 -0
- package/components/Select/shared.d.ts +15 -0
- package/components/Select/useCustomComponents.d.ts +19 -0
- package/components/Select/useCustomStyles.d.ts +14 -0
- package/components/Select/useSelect.d.ts +143 -0
- package/components/SkeletonLines/SkeletonLines.d.ts +25 -0
- package/components/SkeletonLines/index.d.ts +1 -0
- package/components/Spacer/Spacer.d.ts +20 -0
- package/components/Spacer/index.d.ts +1 -0
- package/components/Spinner/Spinner.d.ts +37 -0
- package/components/Spinner/index.d.ts +1 -0
- package/components/Tag/Tag.d.ts +39 -0
- package/components/Tag/index.d.ts +1 -0
- package/components/Text/Text.d.ts +58 -0
- package/components/Text/index.d.ts +1 -0
- package/components/TextArea/TextArea.d.ts +30 -0
- package/components/TextArea/index.d.ts +1 -0
- package/components/TextAreaField/TextAreaField.d.ts +19 -0
- package/components/TextAreaField/index.d.ts +1 -0
- package/components/TextField/TextField.d.ts +24 -0
- package/components/TextField/TextLenghtIndicator.d.ts +19 -0
- package/components/TextField/index.d.ts +1 -0
- package/components/TextInput/TextInput.d.ts +12 -0
- package/components/Timeline/Timeline.d.ts +30 -0
- package/components/Tip/Tip.d.ts +34 -0
- package/components/Tip/index.d.ts +1 -0
- package/components/Toggle/Toggle.d.ts +57 -0
- package/components/Toggle/index.d.ts +1 -0
- package/components/Tooltip/Tooltip.d.ts +48 -0
- package/components/Tooltip/index.d.ts +1 -0
- package/components/ValueBar/ValueBar.d.ts +44 -0
- package/components/ValueBar/ValueBarHelper.d.ts +35 -0
- package/components/ValueBar/ValueBarTypes.d.ts +9 -0
- package/components/ValueBar/index.d.ts +3 -0
- package/components/buttons/Button/Button.d.ts +48 -0
- package/components/buttons/IconButton/IconButton.d.ts +25 -0
- package/components/buttons/StarButton/StarButton.d.ts +13 -0
- package/components/buttons/index.d.ts +4 -0
- package/components/buttons/shared/ButtonProps.d.ts +40 -0
- package/components/buttons/shared/helpers.d.ts +20 -0
- package/components/index.d.ts +44 -0
- package/components/theme/DefaultTheme.d.ts +2 -0
- package/components/theme/index.d.ts +1 -0
- package/hooks/index.d.ts +3 -0
- package/hooks/useDebounce.d.ts +8 -0
- package/hooks/useLocalStorage.d.ts +9 -0
- package/hooks/useTimeout.d.ts +15 -0
- package/index.css +488 -0
- package/index.d.ts +4 -0
- package/index.js +5553 -0
- package/layout/helper/MinTopFullContentLayout.d.ts +18 -0
- package/layout/index.d.ts +7 -0
- package/layout/responsive/FilterListMapLayout.d.ts +22 -0
- package/layout/responsive/FullWidthRepeatingLayout.d.ts +19 -0
- package/layout/responsive/GridArea.d.ts +13 -0
- package/layout/responsive/IntrinsicallyResponsiveGrid.d.ts +30 -0
- package/layout/responsive/TitleNavContentLayout.d.ts +12 -0
- package/layout/responsive/TwoColumnLayout.d.ts +12 -0
- package/package.json +31 -0
- package/test-config/jest.setup.d.ts +1 -0
- package/test-utils/hooks.d.ts +4 -0
- package/test-utils/test-utils.d.ts +5 -0
|
@@ -0,0 +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">, {}>;
|
|
@@ -0,0 +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} menuIsClosing a flag to trigger fade out animation for the menu
|
|
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, menuIsClosing: boolean, refMenuIsEnabled: React.MutableRefObject<boolean>, dataTestId: string, maxSelectedDisplayCount: number | undefined, dropdownIcon?: JSX.Element) => Partial<SelectComponents<Option, IsMulti, Group>>;
|
|
@@ -0,0 +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
|
+
};
|
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { GroupBase, MenuPlacement, OptionsOrGroups, Props, StylesConfig } from "react-select";
|
|
3
|
+
import { SelectComponents } from "react-select/dist/declarations/src/components";
|
|
4
|
+
import { CommonProps } from "../../common/CommonProps";
|
|
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 {};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CommonProps } from "../../common/CommonProps";
|
|
3
|
+
export interface SkeletonLinesProps extends CommonProps {
|
|
4
|
+
/**
|
|
5
|
+
* The number of lines to display.
|
|
6
|
+
*/
|
|
7
|
+
lines?: number;
|
|
8
|
+
/**
|
|
9
|
+
* The height of lines. Can be a number or an array of numbers or string.
|
|
10
|
+
*/
|
|
11
|
+
height?: number | number[] | string;
|
|
12
|
+
/**
|
|
13
|
+
* The width of each line. Can be a number or an array of numbers or string.
|
|
14
|
+
*/
|
|
15
|
+
width?: number | number[] | string;
|
|
16
|
+
/**
|
|
17
|
+
* Margin of lines.
|
|
18
|
+
*/
|
|
19
|
+
margin?: string;
|
|
20
|
+
}
|
|
21
|
+
/**
|
|
22
|
+
* Display placeholder lines before the data gets loaded to reduce load-time frustration.
|
|
23
|
+
*/
|
|
24
|
+
export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId }: SkeletonLinesProps) => JSX.Element>;
|
|
25
|
+
export default SkeletonLines;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./SkeletonLines";
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CommonProps } from "../../common";
|
|
3
|
+
export interface SpacerProps extends CommonProps {
|
|
4
|
+
/**
|
|
5
|
+
* The minimum height of the spacer. Defaults to 1px.
|
|
6
|
+
* Possible values are "normal"(8px), and "large" (32px).
|
|
7
|
+
*/
|
|
8
|
+
minHeight?: "normal" | "large";
|
|
9
|
+
/**
|
|
10
|
+
* The border of the spacer.
|
|
11
|
+
*/
|
|
12
|
+
border?: boolean;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* The Spacer component is used for adding a bit of space in the ui.
|
|
16
|
+
*
|
|
17
|
+
* @param {SpacerProps} props - The props for the Spacer component
|
|
18
|
+
* @returns {JSX.Element} Spacer component
|
|
19
|
+
*/
|
|
20
|
+
export declare const Spacer: ({ minHeight, border, dataTestId }: SpacerProps) => JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Spacer";
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CommonProps, Size } from "../../common/CommonProps";
|
|
3
|
+
export interface SpinnerProps extends CommonProps {
|
|
4
|
+
/**
|
|
5
|
+
* Defines the size of the spinner.
|
|
6
|
+
*/
|
|
7
|
+
size?: Size;
|
|
8
|
+
/**
|
|
9
|
+
* When true, the spinner will be centered in the parent element using css grid.
|
|
10
|
+
*/
|
|
11
|
+
centered?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Select either "light" or "dark" mode.
|
|
14
|
+
* Use "dark" when the spinner is used on a dark background.
|
|
15
|
+
*/
|
|
16
|
+
mode?: "light" | "dark";
|
|
17
|
+
/**
|
|
18
|
+
* Add custom className to the spinners container element.
|
|
19
|
+
* Useful for sizing to minimize jumping on load.
|
|
20
|
+
*/
|
|
21
|
+
containerClassName?: string;
|
|
22
|
+
}
|
|
23
|
+
/**
|
|
24
|
+
* The spinner component provides visual feedback that data is being processed.
|
|
25
|
+
*
|
|
26
|
+
* Spinners are used when performing actions. They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed.
|
|
27
|
+
*
|
|
28
|
+
* Common actions that benefit from spinners include any create, update, or delete actions that may have a lot of data to process. It can be used in a table, after a primary or secondary button click, or even in a modal.
|
|
29
|
+
*
|
|
30
|
+
* Use a spinner component for any action that cannot be performed instantly and will only require a short time (between 1 to 5 seconds) to process.
|
|
31
|
+
*
|
|
32
|
+
* Use when retrieving or refreshing small data amounts, such as status.
|
|
33
|
+
*
|
|
34
|
+
* @param {SpinnerProps} props - The props for the Spinner component
|
|
35
|
+
* @returns {JSX.Element} Spinner component
|
|
36
|
+
*/
|
|
37
|
+
export declare const Spinner: ({ mode, size, centered, className, containerClassName, dataTestId, }: SpinnerProps) => JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Spinner";
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { ThemeColors } from "@trackunit/ui-design-tokens";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { CommonProps } from "../../common/CommonProps";
|
|
4
|
+
export declare type TagSize = "small" | "medium";
|
|
5
|
+
export interface TagProps extends CommonProps {
|
|
6
|
+
/**
|
|
7
|
+
* The color of the tag.
|
|
8
|
+
*
|
|
9
|
+
*/
|
|
10
|
+
color?: ThemeColors;
|
|
11
|
+
/**
|
|
12
|
+
* A handler for a click event triggered on X icon.
|
|
13
|
+
* If not passed then x icon won't be visible.
|
|
14
|
+
*
|
|
15
|
+
*/
|
|
16
|
+
onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Child nodes of the tag.
|
|
19
|
+
*
|
|
20
|
+
*/
|
|
21
|
+
children?: React.ReactNode;
|
|
22
|
+
/**
|
|
23
|
+
* Size of the tag.
|
|
24
|
+
*/
|
|
25
|
+
size?: TagSize;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* The tag component is used to categorize elements in the ui.
|
|
29
|
+
*
|
|
30
|
+
* This could be to tell the state of an asset, or label a page as Beta.
|
|
31
|
+
*
|
|
32
|
+
* The tag is also used in multiselect components to show selected options.
|
|
33
|
+
*
|
|
34
|
+
* **Do:** Use short labels for easy scanning.
|
|
35
|
+
*
|
|
36
|
+
* @param {TagProps} props - The props for the tag component
|
|
37
|
+
* @returns {JSX.Element} tag component
|
|
38
|
+
*/
|
|
39
|
+
export declare const Tag: React.ForwardRefExoticComponent<TagProps & React.RefAttributes<HTMLElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Tag";
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { CommonProps, Size } from "../../common/CommonProps";
|
|
3
|
+
export declare type TextType = "p" | "span" | "div";
|
|
4
|
+
export declare type TextAlign = "left" | "center" | "right";
|
|
5
|
+
export declare type TextWeight = "normal" | "thick" | "bold";
|
|
6
|
+
export interface TextProps extends CommonProps {
|
|
7
|
+
/**
|
|
8
|
+
* Child nodes.
|
|
9
|
+
*/
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Type of element. Element can be of types "p", "span", or "div".
|
|
13
|
+
*/
|
|
14
|
+
type?: TextType;
|
|
15
|
+
/**
|
|
16
|
+
* Size of element. Values can be "small", "medium", or "large".
|
|
17
|
+
*/
|
|
18
|
+
size?: Size;
|
|
19
|
+
/**
|
|
20
|
+
* Alignment of the text. Values can be "left", "center", or "right".
|
|
21
|
+
*/
|
|
22
|
+
align?: TextAlign;
|
|
23
|
+
/**
|
|
24
|
+
* Weight of the text. Values can be "normal", "thick", or "bold".
|
|
25
|
+
*/
|
|
26
|
+
weight?: TextWeight;
|
|
27
|
+
/**
|
|
28
|
+
* Whether font styles are inverted.
|
|
29
|
+
*/
|
|
30
|
+
inverted?: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Whether font styles are subtle or not.
|
|
33
|
+
*/
|
|
34
|
+
subtle?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Whether text is italicized.
|
|
37
|
+
*/
|
|
38
|
+
italicize?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Whether text is uppercase.
|
|
41
|
+
*/
|
|
42
|
+
uppercase?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Whether text is underlined or not.
|
|
45
|
+
*/
|
|
46
|
+
underline?: boolean;
|
|
47
|
+
}
|
|
48
|
+
/**
|
|
49
|
+
* The Text component is used to apply Trackunit default typography styles to text.
|
|
50
|
+
*
|
|
51
|
+
* ### When to use
|
|
52
|
+
*
|
|
53
|
+
* Use Text when you want to show a text section, use Heading if you want to show a heading.
|
|
54
|
+
*
|
|
55
|
+
* @param {TextProps} props - The props for the Text component
|
|
56
|
+
* @returns {JSX.Element} Text component
|
|
57
|
+
*/
|
|
58
|
+
export declare const Text: ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, className, dataTestId, }: TextProps) => JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Text";
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { CommonProps } from "../../common";
|
|
3
|
+
export declare type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
|
|
4
|
+
declare 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 {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./TextArea";
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { CommonProps } from "../../common";
|
|
3
|
+
import { FormGroupProps } from "../FormGroup/FormGroup";
|
|
4
|
+
import { TextAreaProps } from "../TextArea/TextArea";
|
|
5
|
+
import "../TextArea/TextArea.css";
|
|
6
|
+
declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
|
|
7
|
+
export interface TextAreaFieldProps extends TextAreaProps, FormGroupExposedProps, CommonProps {
|
|
8
|
+
/**
|
|
9
|
+
* Set the Maximal length of the value for the input.
|
|
10
|
+
* Adds a TextLengthIndicator to the right of the helpText.
|
|
11
|
+
*/
|
|
12
|
+
maxLength?: number;
|
|
13
|
+
/**
|
|
14
|
+
* If a value is set, the field is rendered in its invalid state.
|
|
15
|
+
*/
|
|
16
|
+
errorMessage?: string;
|
|
17
|
+
}
|
|
18
|
+
export declare const TextAreaField: React.ForwardRefExoticComponent<TextAreaFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
|
|
19
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./TextAreaField";
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { FormGroupProps } from "../FormGroup/FormGroup";
|
|
3
|
+
import { TextInputProps } from "../TextInput/TextInput";
|
|
4
|
+
declare 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 {};
|
|
@@ -0,0 +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>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./TextField";
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { BaseInputProps } from "../BaseInput/BaseInput";
|
|
3
|
+
declare 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 {};
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { CommonProps } from "../../common/CommonProps";
|
|
3
|
+
export interface TimelineProps extends CommonProps {
|
|
4
|
+
children: React.ReactNode;
|
|
5
|
+
}
|
|
6
|
+
/**
|
|
7
|
+
* Timeline - used to contain TimelineElements for building a sequence of timed entries - each rendered on a line
|
|
8
|
+
* - with an indicator (dot)
|
|
9
|
+
* - a header (next to the dot)
|
|
10
|
+
* - and a body.
|
|
11
|
+
*
|
|
12
|
+
* @param {TimelineProps} props - The props for the Timeline component
|
|
13
|
+
* @returns {JSX.Element} Timeline component
|
|
14
|
+
*/
|
|
15
|
+
export declare const Timeline: ({ className, dataTestId, children }: TimelineProps) => JSX.Element;
|
|
16
|
+
interface TimeLineElementProps extends CommonProps {
|
|
17
|
+
date: Date;
|
|
18
|
+
header?: React.ReactNode;
|
|
19
|
+
children: React.ReactNode;
|
|
20
|
+
dot?: React.ReactNode;
|
|
21
|
+
}
|
|
22
|
+
/**
|
|
23
|
+
* TimelineElement - entry on a timeline - rendered with an icon on the timeline
|
|
24
|
+
* - a date as the header and the children provided as body.
|
|
25
|
+
*
|
|
26
|
+
* @param {TimeLineElementProps} props the props
|
|
27
|
+
* @returns {JSX.Element} component
|
|
28
|
+
*/
|
|
29
|
+
export declare const TimelineElement: ({ date, children, className, dataTestId, dot, header, }: TimeLineElementProps) => JSX.Element;
|
|
30
|
+
export {};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { CommonProps } from "../../common";
|
|
3
|
+
import { IconProps } from "../Icon/Icon";
|
|
4
|
+
import { TooltipProps } from "../Tooltip";
|
|
5
|
+
export interface TipProps extends CommonProps {
|
|
6
|
+
/**
|
|
7
|
+
* Child nodes to render inside the tip.
|
|
8
|
+
*/
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
/**
|
|
11
|
+
* The props for setting the icon on this tip.
|
|
12
|
+
*/
|
|
13
|
+
iconProps?: Partial<IconProps>;
|
|
14
|
+
/**
|
|
15
|
+
* The props for setting the tooltip on this tip.
|
|
16
|
+
*/
|
|
17
|
+
tooltipProps?: Partial<TooltipProps>;
|
|
18
|
+
/**
|
|
19
|
+
* The element type the tip will be rendered as.
|
|
20
|
+
*/
|
|
21
|
+
renderAs?: keyof JSX.IntrinsicElements;
|
|
22
|
+
/**
|
|
23
|
+
* The href attribute if the tip is rendered as an anchor tag.
|
|
24
|
+
*/
|
|
25
|
+
link?: string;
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* The Tip component is used to show helpful tips or contextual information to the users.
|
|
29
|
+
* The tip can optionally be rendered as an anchor tag, which redirects to users to an external link on click.
|
|
30
|
+
*
|
|
31
|
+
* @param {TipProps} props - The props for the Tip component
|
|
32
|
+
* @returns {JSX.Element} Tip component
|
|
33
|
+
*/
|
|
34
|
+
export declare const Tip: ({ children, iconProps, tooltipProps, dataTestId, link, renderAs, className, }: TipProps) => JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Tip";
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { CommonProps } from "../../common/CommonProps";
|
|
3
|
+
import "./Toggle.css";
|
|
4
|
+
export declare type ToggleSize = "small" | "medium";
|
|
5
|
+
export interface ToggleProps extends CommonProps {
|
|
6
|
+
/**
|
|
7
|
+
* ID of the toggle.
|
|
8
|
+
*/
|
|
9
|
+
id: string;
|
|
10
|
+
/**
|
|
11
|
+
* Whether the toggle is toggled(active) or not.
|
|
12
|
+
*/
|
|
13
|
+
toggled: boolean;
|
|
14
|
+
/**
|
|
15
|
+
* onChange event handler.
|
|
16
|
+
*/
|
|
17
|
+
onChange: (toggled: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
|
|
18
|
+
/**
|
|
19
|
+
* Whether the toggle is disabled or not.
|
|
20
|
+
*/
|
|
21
|
+
disabled?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Size of the toggle.
|
|
24
|
+
*/
|
|
25
|
+
size?: ToggleSize;
|
|
26
|
+
/**
|
|
27
|
+
* Tab index specifies the keyboard tab order of the toggle relative to the other controls on the page.
|
|
28
|
+
*/
|
|
29
|
+
tabIndex?: number;
|
|
30
|
+
/**
|
|
31
|
+
* Whether the toggle is required or not.
|
|
32
|
+
*/
|
|
33
|
+
required?: boolean;
|
|
34
|
+
/**
|
|
35
|
+
* Name of the toggle.
|
|
36
|
+
*/
|
|
37
|
+
name?: string;
|
|
38
|
+
/**
|
|
39
|
+
* The description of the toggle.
|
|
40
|
+
*/
|
|
41
|
+
description?: string;
|
|
42
|
+
/**
|
|
43
|
+
* onBlur event handler.
|
|
44
|
+
*/
|
|
45
|
+
onBlur?: React.FocusEventHandler<HTMLInputElement>;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Use Toggle when you have to only enable/disable a feature.
|
|
49
|
+
*
|
|
50
|
+
* _**Do use** Toggle in forms or settings._
|
|
51
|
+
*
|
|
52
|
+
* _**Do not use** Toggle if a user can select many option from a list, use checkboxes instead of toggle._
|
|
53
|
+
*
|
|
54
|
+
* @param {ToggleProps} props - The props for the Toggle component
|
|
55
|
+
* @returns {JSX.Element} Toggle component
|
|
56
|
+
*/
|
|
57
|
+
export declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./Toggle";
|