@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.
Files changed (143) hide show
  1. package/README.md +22 -0
  2. package/common/CommonProps.d.ts +12 -0
  3. package/common/LegacyComponentStory.d.ts +7 -0
  4. package/common/StorybookProps.d.ts +6 -0
  5. package/common/index.d.ts +3 -0
  6. package/common/useContainerProps.d.ts +16 -0
  7. package/components/ActionButton/ActionButton.d.ts +30 -0
  8. package/components/ActionButton/index.d.ts +1 -0
  9. package/components/Alert/Alert.d.ts +53 -0
  10. package/components/Alert/index.d.ts +1 -0
  11. package/components/Badge/Badge.d.ts +47 -0
  12. package/components/Badge/index.d.ts +1 -0
  13. package/components/BaseInput/BaseInput.d.ts +62 -0
  14. package/components/BaseInput/index.d.ts +1 -0
  15. package/components/Card/Card.d.ts +45 -0
  16. package/components/Card/CardBody.d.ts +32 -0
  17. package/components/Card/CardFooter.d.ts +21 -0
  18. package/components/Card/CardHeader.d.ts +43 -0
  19. package/components/Card/DensityContainer.d.ts +30 -0
  20. package/components/Card/index.d.ts +5 -0
  21. package/components/Chart/Chart.d.ts +81 -0
  22. package/components/Chart/index.d.ts +1 -0
  23. package/components/Checkbox/CheckIcon.d.ts +12 -0
  24. package/components/Checkbox/Checkbox.d.ts +40 -0
  25. package/components/Checkbox/IndeterminateIcon.d.ts +10 -0
  26. package/components/Checkbox/index.d.ts +1 -0
  27. package/components/Collapse/Collapse.d.ts +28 -0
  28. package/components/Collapse/index.d.ts +1 -0
  29. package/components/CopyableText/CopyableText.d.ts +21 -0
  30. package/components/CopyableText/index.d.ts +1 -0
  31. package/components/DateField/DateField.d.ts +19 -0
  32. package/components/DateInput/DateInput.d.ts +28 -0
  33. package/components/DayPicker/DayPicker.d.ts +28 -0
  34. package/components/DayPicker/DayPickerPopover.d.ts +23 -0
  35. package/components/DayPicker/DayRangePicker.d.ts +18 -0
  36. package/components/DayPicker/index.d.ts +21 -0
  37. package/components/DayPicker/useLocale.d.ts +8 -0
  38. package/components/EmailInput/EmailInput.d.ts +20 -0
  39. package/components/FormGroup/FormGroup.d.ts +38 -0
  40. package/components/Heading/Heading.d.ts +28 -0
  41. package/components/Heading/index.d.ts +1 -0
  42. package/components/Icon/Icon.d.ts +51 -0
  43. package/components/Indicator/Indicator.d.ts +42 -0
  44. package/components/Indicator/index.d.ts +1 -0
  45. package/components/Label/Label.d.ts +34 -0
  46. package/components/Label/index.d.ts +1 -0
  47. package/components/LegendItem/LegendItem.d.ts +17 -0
  48. package/components/LegendItem/index.d.ts +1 -0
  49. package/components/Menu/MenuItem.d.ts +58 -0
  50. package/components/Menu/MenuList.d.ts +34 -0
  51. package/components/Menu/index.d.ts +2 -0
  52. package/components/Modal/Modal.d.ts +32 -0
  53. package/components/Modal/ModalBackdrop.d.ts +13 -0
  54. package/components/Modal/index.d.ts +3 -0
  55. package/components/Modal/useModal.d.ts +21 -0
  56. package/components/NumberField/NumberField.d.ts +19 -0
  57. package/components/NumberInput/NumberInput.d.ts +12 -0
  58. package/components/PageHeader/PageHeader.d.ts +47 -0
  59. package/components/PageHeader/index.d.ts +1 -0
  60. package/components/Pagination/Pagination.d.ts +71 -0
  61. package/components/PhoneInput/PhoneInput.d.ts +20 -0
  62. package/components/Popover/AnimatedPopover.d.ts +43 -0
  63. package/components/Popover/PopoverList.d.ts +12 -0
  64. package/components/Popover/PopoverListItem.d.ts +30 -0
  65. package/components/Popover/PopoverTitle.d.ts +20 -0
  66. package/components/Popover/index.d.ts +5 -0
  67. package/components/Popover/usePopover.d.ts +42 -0
  68. package/components/Prompt/Prompt.d.ts +20 -0
  69. package/components/Prompt/index.d.ts +1 -0
  70. package/components/RadioGroup/RadioGroup.d.ts +57 -0
  71. package/components/RadioGroup/RadioGroupContext.d.ts +11 -0
  72. package/components/RadioGroup/RadioItem.d.ts +24 -0
  73. package/components/RadioGroup/index.d.ts +2 -0
  74. package/components/SectionHeader/SectionHeader.d.ts +24 -0
  75. package/components/SectionHeader/index.d.ts +1 -0
  76. package/components/Select/CreatableSelect.d.ts +38 -0
  77. package/components/Select/FieldContainer.d.ts +20 -0
  78. package/components/Select/Select.d.ts +18 -0
  79. package/components/Select/SelectMenuItem/SelectMenuItem.d.ts +49 -0
  80. package/components/Select/TagWithWidth.d.ts +17 -0
  81. package/components/Select/TagsContainer.d.ts +45 -0
  82. package/components/Select/index.d.ts +7 -0
  83. package/components/Select/shared.d.ts +15 -0
  84. package/components/Select/useCustomComponents.d.ts +19 -0
  85. package/components/Select/useCustomStyles.d.ts +14 -0
  86. package/components/Select/useSelect.d.ts +143 -0
  87. package/components/SkeletonLines/SkeletonLines.d.ts +25 -0
  88. package/components/SkeletonLines/index.d.ts +1 -0
  89. package/components/Spacer/Spacer.d.ts +20 -0
  90. package/components/Spacer/index.d.ts +1 -0
  91. package/components/Spinner/Spinner.d.ts +37 -0
  92. package/components/Spinner/index.d.ts +1 -0
  93. package/components/Tag/Tag.d.ts +39 -0
  94. package/components/Tag/index.d.ts +1 -0
  95. package/components/Text/Text.d.ts +58 -0
  96. package/components/Text/index.d.ts +1 -0
  97. package/components/TextArea/TextArea.d.ts +30 -0
  98. package/components/TextArea/index.d.ts +1 -0
  99. package/components/TextAreaField/TextAreaField.d.ts +19 -0
  100. package/components/TextAreaField/index.d.ts +1 -0
  101. package/components/TextField/TextField.d.ts +24 -0
  102. package/components/TextField/TextLenghtIndicator.d.ts +19 -0
  103. package/components/TextField/index.d.ts +1 -0
  104. package/components/TextInput/TextInput.d.ts +12 -0
  105. package/components/Timeline/Timeline.d.ts +30 -0
  106. package/components/Tip/Tip.d.ts +34 -0
  107. package/components/Tip/index.d.ts +1 -0
  108. package/components/Toggle/Toggle.d.ts +57 -0
  109. package/components/Toggle/index.d.ts +1 -0
  110. package/components/Tooltip/Tooltip.d.ts +48 -0
  111. package/components/Tooltip/index.d.ts +1 -0
  112. package/components/ValueBar/ValueBar.d.ts +44 -0
  113. package/components/ValueBar/ValueBarHelper.d.ts +35 -0
  114. package/components/ValueBar/ValueBarTypes.d.ts +9 -0
  115. package/components/ValueBar/index.d.ts +3 -0
  116. package/components/buttons/Button/Button.d.ts +48 -0
  117. package/components/buttons/IconButton/IconButton.d.ts +25 -0
  118. package/components/buttons/StarButton/StarButton.d.ts +13 -0
  119. package/components/buttons/index.d.ts +4 -0
  120. package/components/buttons/shared/ButtonProps.d.ts +40 -0
  121. package/components/buttons/shared/helpers.d.ts +20 -0
  122. package/components/index.d.ts +44 -0
  123. package/components/theme/DefaultTheme.d.ts +2 -0
  124. package/components/theme/index.d.ts +1 -0
  125. package/hooks/index.d.ts +3 -0
  126. package/hooks/useDebounce.d.ts +8 -0
  127. package/hooks/useLocalStorage.d.ts +9 -0
  128. package/hooks/useTimeout.d.ts +15 -0
  129. package/index.css +488 -0
  130. package/index.d.ts +4 -0
  131. package/index.js +5553 -0
  132. package/layout/helper/MinTopFullContentLayout.d.ts +18 -0
  133. package/layout/index.d.ts +7 -0
  134. package/layout/responsive/FilterListMapLayout.d.ts +22 -0
  135. package/layout/responsive/FullWidthRepeatingLayout.d.ts +19 -0
  136. package/layout/responsive/GridArea.d.ts +13 -0
  137. package/layout/responsive/IntrinsicallyResponsiveGrid.d.ts +30 -0
  138. package/layout/responsive/TitleNavContentLayout.d.ts +12 -0
  139. package/layout/responsive/TwoColumnLayout.d.ts +12 -0
  140. package/package.json +31 -0
  141. package/test-config/jest.setup.d.ts +1 -0
  142. package/test-utils/hooks.d.ts +4 -0
  143. 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";