@trackunit/react-form-components 1.3.26 → 1.3.32
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.js +112 -109
- package/index.esm.js +125 -122
- package/package.json +11 -11
- package/src/components/ActionButton/ActionButton.d.ts +5 -4
- package/src/components/BaseInput/BaseInput.d.ts +9 -2
- package/src/components/BaseInput/components/GenericActionsRenderer.d.ts +1 -1
- package/src/components/Checkbox/CheckIcon.d.ts +1 -1
- package/src/components/Checkbox/Checkbox.d.ts +9 -3
- package/src/components/Checkbox/IndeterminateIcon.d.ts +1 -1
- package/src/components/CheckboxField/CheckboxField.d.ts +9 -2
- package/src/components/ColorField/ColorField.d.ts +1 -2
- package/src/components/DateField/DateField.d.ts +9 -1
- package/src/components/DateInput/DateInput.d.ts +7 -1
- package/src/components/DropZone/DropZone.d.ts +4 -3
- package/src/components/EmailField/EmailField.d.ts +4 -2
- package/src/components/EmailInput/EmailInput.d.ts +4 -1
- package/src/components/FormGroup/FormGroup.d.ts +6 -6
- package/src/components/Label/Label.d.ts +4 -4
- package/src/components/NumberField/NumberField.d.ts +9 -1
- package/src/components/NumberInput/NumberInput.d.ts +4 -1
- package/src/components/OptionCard/OptionCard.d.ts +11 -4
- package/src/components/PasswordField/PasswordField.d.ts +9 -1
- package/src/components/PasswordInput/PasswordInput.d.ts +4 -1
- package/src/components/PhoneField/PhoneField.d.ts +9 -2
- package/src/components/PhoneFieldWithController/PhoneFieldWithController.d.ts +9 -2
- package/src/components/PhoneInput/CountryCodeSelect.d.ts +1 -1
- package/src/components/PhoneInput/PhoneInput.d.ts +4 -2
- package/src/components/RadioGroup/RadioGroup.d.ts +6 -6
- package/src/components/RadioGroup/RadioItem.d.ts +3 -3
- package/src/components/Schedule/Schedule.d.ts +1 -1
- package/src/components/Search/Search.d.ts +11 -5
- package/src/components/Select/CreatableSelect.d.ts +1 -1
- package/src/components/Select/Select.d.ts +1 -1
- package/src/components/Select/SelectMenuItem/SelectMenuItem.d.ts +5 -5
- package/src/components/Select/TagWithWidth.d.ts +1 -1
- package/src/components/Select/TagsContainer.d.ts +3 -2
- package/src/components/Select/useCustomComponents.d.ts +7 -7
- package/src/components/Select/useCustomStyles.d.ts +3 -3
- package/src/components/Select/useSelect.d.ts +3 -3
- package/src/components/SelectField/CreatableSelectField.d.ts +8 -20
- package/src/components/SelectField/FormFieldSelectAdapter.d.ts +14 -3
- package/src/components/SelectField/SelectField.d.ts +5 -20
- package/src/components/TextArea/TextArea.d.ts +9 -2
- package/src/components/TextAreaField/TextAreaField.d.ts +12 -2
- package/src/components/TextField/TextField.d.ts +4 -2
- package/src/components/TextField/TextLenghtIndicator.d.ts +1 -1
- package/src/components/TextInput/TextInput.d.ts +4 -1
- package/src/components/TimeRange/TimeRange.d.ts +3 -3
- package/src/components/TimeRangeField/TimeRangeField.d.ts +1 -1
- package/src/components/UploadField/UploadField.d.ts +4 -1
- package/src/components/UploadInput/UploadInput.d.ts +4 -1
- package/src/components/UrlField/UrlField.d.ts +4 -1
- package/src/components/UrlInput/UrlInput.d.ts +4 -1
- package/src/test-utils/test-utils.d.ts +0 -1
- package/src/utilities/compareReactNodes.d.ts +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CommonProps } from "@trackunit/react-components";
|
|
2
2
|
import { IconName } from "@trackunit/ui-icons";
|
|
3
|
-
import
|
|
3
|
+
import { CSSProperties, Ref } from "react";
|
|
4
4
|
import { TextInputProps } from "../TextInput/TextInput";
|
|
5
5
|
export interface SearchProps extends CommonProps, TextInputProps {
|
|
6
6
|
/**
|
|
@@ -60,20 +60,26 @@ export interface SearchProps extends CommonProps, TextInputProps {
|
|
|
60
60
|
* Indicates whether a loading spinner should be displayed in the search box.
|
|
61
61
|
*/
|
|
62
62
|
loading?: boolean;
|
|
63
|
+
/**
|
|
64
|
+
* A ref for the component
|
|
65
|
+
*/
|
|
66
|
+
ref?: Ref<HTMLInputElement>;
|
|
63
67
|
/**
|
|
64
68
|
* A custom icon to be displayed in the search box.
|
|
65
69
|
*/
|
|
66
70
|
iconName?: IconName;
|
|
67
|
-
style?:
|
|
71
|
+
style?: CSSProperties;
|
|
68
72
|
/**
|
|
69
73
|
* Ref object for the "Clear" button (with the XMark icon), allowing external control of the button.
|
|
70
74
|
*/
|
|
71
|
-
xMarkRef?:
|
|
75
|
+
xMarkRef?: Ref<HTMLButtonElement>;
|
|
72
76
|
}
|
|
73
77
|
/**
|
|
74
78
|
* The Search component is used to render a search input field.
|
|
75
79
|
*
|
|
76
80
|
* @param {SearchProps} props - The props for the Search component
|
|
77
|
-
* @returns {JSX.Element} Search component
|
|
78
81
|
*/
|
|
79
|
-
export declare const Search:
|
|
82
|
+
export declare const Search: {
|
|
83
|
+
({ className, placeholder, value, widenInputOnFocus, hideBorderWhenNotInFocus, disabled, onKeyUp, onChange, onFocus, onBlur, name, onClear, dataTestId, autoComplete, loading, inputClassName, iconName, style, xMarkRef, ref, ...rest }: SearchProps): import("react/jsx-runtime").JSX.Element;
|
|
84
|
+
displayName: string;
|
|
85
|
+
};
|
|
@@ -13,7 +13,7 @@ export type CreatableSelectProps = {
|
|
|
13
13
|
* CreatableSelects are input components used to choose a value from a set.
|
|
14
14
|
*
|
|
15
15
|
* @param {CreatableSelectProps} props - The props for the CreatableSelect component
|
|
16
|
-
* @returns {
|
|
16
|
+
* @returns {ReactElement} CreatableSelect component
|
|
17
17
|
*/
|
|
18
18
|
export declare const CreatableSelect: {
|
|
19
19
|
<Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectProps<Option, IsAsync, IsMulti, Group> & CreatableSelectProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -9,7 +9,7 @@ export interface SelectOption<TValue extends string> {
|
|
|
9
9
|
* Selects are input components used to choose a value from a set.
|
|
10
10
|
*
|
|
11
11
|
* @param {SelectProps} props - The props for the Select component
|
|
12
|
-
* @returns {
|
|
12
|
+
* @returns {ReactElement} Select component
|
|
13
13
|
*/
|
|
14
14
|
export declare const Select: {
|
|
15
15
|
<Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(props: SelectProps<Option, IsAsync, IsMulti, Group>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CommonProps } from "@trackunit/react-components";
|
|
2
|
-
import
|
|
2
|
+
import { MouseEventHandler, ReactElement } from "react";
|
|
3
3
|
import { FormComponentSizes } from "../../../types";
|
|
4
4
|
interface SelectMenuItemProps extends CommonProps {
|
|
5
5
|
/**
|
|
@@ -10,7 +10,7 @@ interface SelectMenuItemProps extends CommonProps {
|
|
|
10
10
|
/**
|
|
11
11
|
* An handler for click on element
|
|
12
12
|
*/
|
|
13
|
-
onClick?:
|
|
13
|
+
onClick?: MouseEventHandler<HTMLDivElement>;
|
|
14
14
|
/**
|
|
15
15
|
* A boolean prop to set menu item to selected state
|
|
16
16
|
*/
|
|
@@ -35,20 +35,20 @@ export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
|
|
|
35
35
|
* An React element to render before the text in the select.
|
|
36
36
|
* This is typically used to render an icon.
|
|
37
37
|
*/
|
|
38
|
-
icon?:
|
|
38
|
+
icon?: ReactElement;
|
|
39
39
|
}
|
|
40
40
|
/**
|
|
41
41
|
* A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
|
|
42
42
|
*
|
|
43
43
|
* @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
|
|
44
|
-
* @returns {
|
|
44
|
+
* @returns {ReactElement} SingleSelectMenuItem
|
|
45
45
|
*/
|
|
46
46
|
export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, disabled, optionLabelDescription, fieldSize, }: SingleSelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
47
47
|
/**
|
|
48
48
|
* A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
|
|
49
49
|
*
|
|
50
50
|
* @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
|
|
51
|
-
* @returns {
|
|
51
|
+
* @returns {ReactElement} multi select menu item
|
|
52
52
|
*/
|
|
53
53
|
export declare const MultiSelectMenuItem: ({ label, onClick, selected, dataTestId, disabled, optionLabelDescription, fieldSize, }: SelectMenuItemProps) => import("react/jsx-runtime").JSX.Element;
|
|
54
54
|
export {};
|
|
@@ -10,7 +10,7 @@ interface TagWithWidthProps extends TagsPropsNoRef {
|
|
|
10
10
|
* Used in the select component.
|
|
11
11
|
*
|
|
12
12
|
* @param {TagProps} props - The props for the tag component
|
|
13
|
-
* @returns {
|
|
13
|
+
* @returns {ReactElement} TagWithWidth component
|
|
14
14
|
*/
|
|
15
15
|
export declare const TagWithWidth: ({ onWidthKnown, children, ...rest }: TagWithWidthProps) => import("react/jsx-runtime").JSX.Element;
|
|
16
16
|
export {};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { ReactElement } from "react";
|
|
1
2
|
interface TagsContainerItem {
|
|
2
3
|
/**
|
|
3
4
|
* A text value to be passed to tags inside container
|
|
@@ -32,7 +33,7 @@ interface TagsContainerProps {
|
|
|
32
33
|
* @memberof TagsContainerProps
|
|
33
34
|
*/
|
|
34
35
|
itemsGap?: number;
|
|
35
|
-
postFix:
|
|
36
|
+
postFix: ReactElement;
|
|
36
37
|
/**
|
|
37
38
|
* Is the parent dropdown disabled
|
|
38
39
|
*/
|
|
@@ -42,7 +43,7 @@ interface TagsContainerProps {
|
|
|
42
43
|
* TagsContainer component to display tags in limited space when children can't fit space it displays counter
|
|
43
44
|
*
|
|
44
45
|
* @param {TagsContainerProps} props - The props for the TagContainer
|
|
45
|
-
* @returns {
|
|
46
|
+
* @returns {ReactElement} TagsContainer
|
|
46
47
|
*/
|
|
47
48
|
export declare const TagsContainer: ({ items, width, itemsGap, postFix, disabled }: TagsContainerProps) => import("react/jsx-runtime").JSX.Element;
|
|
48
49
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { ReactNode, RefObject } from "react";
|
|
2
2
|
import { GroupBase } from "react-select";
|
|
3
3
|
import { SelectComponents } from "react-select/dist/declarations/src/components";
|
|
4
4
|
import { FormComponentSizes } from "../../types";
|
|
@@ -11,23 +11,23 @@ import { FormComponentSizes } from "../../types";
|
|
|
11
11
|
* @param {Partial<SelectComponents<Option, IsMulti, Group>> | undefined} componentsProps a custom component prop that you can to override defaults
|
|
12
12
|
* @param {boolean} disabled decide to override disabled variant
|
|
13
13
|
* @param {boolean} menuIsOpen menu is open state
|
|
14
|
-
* @param {
|
|
14
|
+
* @param {RefObject<boolean>} refMenuIsEnabled a flag to block menu from open
|
|
15
15
|
* @param {string} dataTestId a test id
|
|
16
16
|
* @param {number} maxSelectedDisplayCount a number of max display count
|
|
17
|
-
* @param {
|
|
17
|
+
* @param {ReactElement} dropdownIcon an custom dropdown icon
|
|
18
18
|
* @param {boolean} hasError decide to override hasError variant
|
|
19
|
-
* @param {
|
|
19
|
+
* @param {ReactElement} prefix a prefix element
|
|
20
20
|
* @returns {Partial<SelectComponents<Option, boolean, GroupBase<Option>>> | undefined} components object to override react-select default components
|
|
21
21
|
*/
|
|
22
22
|
export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ componentsProps, disabled, readOnly, refMenuIsEnabled, dataTestId, maxSelectedDisplayCount, dropdownIcon, prefix, hasError, fieldSize, getOptionLabelDescription, }: {
|
|
23
23
|
componentsProps: Partial<SelectComponents<Option, IsMulti, Group>> | undefined;
|
|
24
24
|
disabled: boolean;
|
|
25
25
|
readOnly: boolean;
|
|
26
|
-
refMenuIsEnabled:
|
|
26
|
+
refMenuIsEnabled: RefObject<boolean>;
|
|
27
27
|
dataTestId: string;
|
|
28
28
|
maxSelectedDisplayCount: number | undefined;
|
|
29
|
-
dropdownIcon?:
|
|
30
|
-
prefix?:
|
|
29
|
+
dropdownIcon?: ReactNode;
|
|
30
|
+
prefix?: ReactNode;
|
|
31
31
|
hasError?: boolean;
|
|
32
32
|
fieldSize?: FormComponentSizes;
|
|
33
33
|
getOptionLabelDescription?: (option: Option) => string | undefined;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { RefObject } from "react";
|
|
2
2
|
import { GroupBase, StylesConfig } from "react-select";
|
|
3
3
|
import { FormComponentSizes } from "../../types";
|
|
4
4
|
/**
|
|
@@ -11,8 +11,8 @@ import { FormComponentSizes } from "../../types";
|
|
|
11
11
|
* @returns {StylesConfig<Option, boolean>} styles to override in select
|
|
12
12
|
*/
|
|
13
13
|
export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ refContainer, refPrefix, maxSelectedDisplayCount, styles, disabled, fieldSize, }: {
|
|
14
|
-
refContainer:
|
|
15
|
-
refPrefix:
|
|
14
|
+
refContainer: RefObject<HTMLDivElement | null>;
|
|
15
|
+
refPrefix: RefObject<HTMLDivElement | null>;
|
|
16
16
|
maxSelectedDisplayCount: number | undefined;
|
|
17
17
|
styles: StylesConfig<Option, IsMulti, Group> | undefined;
|
|
18
18
|
disabled: boolean | undefined;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { CommonProps } from "@trackunit/react-components";
|
|
2
2
|
import { MappedOmit } from "@trackunit/shared-utils";
|
|
3
|
-
import
|
|
3
|
+
import { ReactNode } from "react";
|
|
4
4
|
import { GroupBase, MenuPlacement, OptionsOrGroups, Props, StylesConfig } from "react-select";
|
|
5
5
|
import { SelectComponents } from "react-select/dist/declarations/src/components";
|
|
6
6
|
import { FormComponentSizes } from "../../types";
|
|
@@ -17,7 +17,7 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
|
|
|
17
17
|
*
|
|
18
18
|
* @memberof SelectProps
|
|
19
19
|
*/
|
|
20
|
-
prefix?:
|
|
20
|
+
prefix?: ReactNode;
|
|
21
21
|
/**
|
|
22
22
|
* An string to render in field when there is no value selected.
|
|
23
23
|
* Can be used as a description, example or a hint.
|
|
@@ -56,7 +56,7 @@ export type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean
|
|
|
56
56
|
*
|
|
57
57
|
* @memberof SelectProps
|
|
58
58
|
*/
|
|
59
|
-
dropdownIcon?:
|
|
59
|
+
dropdownIcon?: ReactNode;
|
|
60
60
|
/**
|
|
61
61
|
* A label to be used as a aria-label
|
|
62
62
|
* This is typically used for accessibility
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { CreatableSelectProps } from "../Select/CreatableSelect";
|
|
2
|
-
import { BaseOptionType } from "./FormFieldSelectAdapter";
|
|
2
|
+
import { BaseOptionType, SelectFieldProps } from "./FormFieldSelectAdapter";
|
|
3
|
+
interface CreatableSelectFieldProps extends SelectFieldProps<BaseOptionType>, CreatableSelectProps {
|
|
4
|
+
}
|
|
3
5
|
/**
|
|
4
6
|
* The CreatableSelectField component is a CreatableSelect component wrapped in the FromGroup component.
|
|
5
7
|
*
|
|
@@ -8,23 +10,9 @@ import { BaseOptionType } from "./FormFieldSelectAdapter";
|
|
|
8
10
|
* This is done to make the field compatible with the React-hook-form library.
|
|
9
11
|
*
|
|
10
12
|
* @param {SelectFieldProps & CreatableSelectProps} props - The props for the CreatableSelectField component
|
|
11
|
-
* @returns {JSX.Element} CreatableSelectField component
|
|
12
13
|
*/
|
|
13
|
-
export declare const CreatableSelectField:
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
isInvalid?: boolean | undefined;
|
|
19
|
-
} & import("dist/libs/shared/utils/src").MappedOmit<import("../Select/useSelect").SelectProps<BaseOptionType, false, false, import("react-select").GroupBase<BaseOptionType>>, "label" | "onBlur" | "onChange" | "options" | "value" | "defaultValue"> & {
|
|
20
|
-
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
21
|
-
options: BaseOptionType[];
|
|
22
|
-
value?: string | number | undefined;
|
|
23
|
-
defaultValue?: string | number | undefined;
|
|
24
|
-
onChange?: ((event: {
|
|
25
|
-
target: {
|
|
26
|
-
value?: string | number | undefined;
|
|
27
|
-
};
|
|
28
|
-
}) => void) | undefined;
|
|
29
|
-
errorMessage?: string;
|
|
30
|
-
} & CreatableSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
|
|
14
|
+
export declare const CreatableSelectField: {
|
|
15
|
+
({ allowCreateWhileLoading, onCreateOption, ref, ...props }: CreatableSelectFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
displayName: string;
|
|
17
|
+
};
|
|
18
|
+
export {};
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { CommonProps } from "@trackunit/react-components";
|
|
2
2
|
import { MappedOmit } from "@trackunit/shared-utils";
|
|
3
|
+
import { FocusEvent, ReactNode, Ref } from "react";
|
|
3
4
|
import { GroupBase } from "react-select";
|
|
4
5
|
import { FormGroupProps } from "../FormGroup/FormGroup";
|
|
5
6
|
import { SelectProps } from "../Select/useSelect";
|
|
@@ -10,7 +11,7 @@ export type BaseOptionType = {
|
|
|
10
11
|
type SelectExposedProps<TOptionType extends BaseOptionType> = MappedOmit<SelectProps<TOptionType, false, false, GroupBase<TOptionType>>, "value" | "label" | "onChange" | "defaultValue" | "onBlur" | "options">;
|
|
11
12
|
type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon" | "isInvalid">;
|
|
12
13
|
export type SelectFieldProps<TOptionType extends BaseOptionType> = CommonProps & FormGroupExposedProps & SelectExposedProps<TOptionType> & {
|
|
13
|
-
onBlur?: (event:
|
|
14
|
+
onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
|
|
14
15
|
/**
|
|
15
16
|
* The options available for the SelectField.
|
|
16
17
|
*/
|
|
@@ -35,9 +36,19 @@ export type SelectFieldProps<TOptionType extends BaseOptionType> = CommonProps &
|
|
|
35
36
|
* If a value is set, the field is rendered in its invalid state.
|
|
36
37
|
*/
|
|
37
38
|
errorMessage?: string;
|
|
39
|
+
/**
|
|
40
|
+
* A ref for the component
|
|
41
|
+
*/
|
|
42
|
+
ref?: Ref<HTMLSelectElement>;
|
|
38
43
|
};
|
|
39
44
|
interface FormFieldSelectAdapterProps<TOptionType extends BaseOptionType, TIsAsync extends boolean = false, TIsMulti extends boolean = false> extends SelectFieldProps<TOptionType> {
|
|
40
|
-
children: (props: SelectProps<TOptionType, TIsAsync, TIsMulti, GroupBase<TOptionType>>) =>
|
|
45
|
+
children: (props: SelectProps<TOptionType, TIsAsync, TIsMulti, GroupBase<TOptionType>>) => ReactNode;
|
|
41
46
|
}
|
|
42
|
-
|
|
47
|
+
/**
|
|
48
|
+
*
|
|
49
|
+
*/
|
|
50
|
+
export declare const FormFieldSelectAdapter: {
|
|
51
|
+
({ className, dataTestId, helpText, helpAddon, tip, label, isInvalid, errorMessage, name, onBlur, options, value, defaultValue, id, onChange, children, ref, ...rest }: FormFieldSelectAdapterProps<BaseOptionType>): import("react/jsx-runtime").JSX.Element;
|
|
52
|
+
displayName: string;
|
|
53
|
+
};
|
|
43
54
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { BaseOptionType } from "./FormFieldSelectAdapter";
|
|
1
|
+
import { BaseOptionType, SelectFieldProps } from "./FormFieldSelectAdapter";
|
|
2
2
|
/**
|
|
3
3
|
* The SelectField component is a Select component wrapped in the FromGroup component.
|
|
4
4
|
*
|
|
@@ -7,23 +7,8 @@ import { BaseOptionType } from "./FormFieldSelectAdapter";
|
|
|
7
7
|
* This is done to make the field compatible with the React-hook-form library.
|
|
8
8
|
*
|
|
9
9
|
* @param {SelectFieldProps} props - The props for the SelectField component
|
|
10
|
-
* @returns {JSX.Element} SelectField component
|
|
11
10
|
*/
|
|
12
|
-
export declare const SelectField:
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
helpAddon?: import("react").ReactNode;
|
|
17
|
-
isInvalid?: boolean | undefined;
|
|
18
|
-
} & import("dist/libs/shared/utils/src").MappedOmit<import("../Select/useSelect").SelectProps<BaseOptionType, false, false, import("react-select").GroupBase<BaseOptionType>>, "label" | "onBlur" | "onChange" | "options" | "value" | "defaultValue"> & {
|
|
19
|
-
onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
|
|
20
|
-
options: BaseOptionType[];
|
|
21
|
-
value?: string | number | undefined;
|
|
22
|
-
defaultValue?: string | number | undefined;
|
|
23
|
-
onChange?: ((event: {
|
|
24
|
-
target: {
|
|
25
|
-
value?: string | number | undefined;
|
|
26
|
-
};
|
|
27
|
-
}) => void) | undefined;
|
|
28
|
-
errorMessage?: string;
|
|
29
|
-
} & import("react").RefAttributes<HTMLSelectElement>>;
|
|
11
|
+
export declare const SelectField: {
|
|
12
|
+
({ ref, ...props }: SelectFieldProps<BaseOptionType>): import("react/jsx-runtime").JSX.Element;
|
|
13
|
+
displayName: string;
|
|
14
|
+
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CommonProps } from "@trackunit/react-components";
|
|
2
|
-
import
|
|
2
|
+
import { Ref } from "react";
|
|
3
3
|
export type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
|
|
4
4
|
type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "prefix" | "suffix">;
|
|
5
5
|
export interface TextAreaProps extends FilteredInputProps, CommonProps {
|
|
@@ -21,10 +21,17 @@ export interface TextAreaProps extends FilteredInputProps, CommonProps {
|
|
|
21
21
|
* If true the field is rendered in its invalid state.
|
|
22
22
|
*/
|
|
23
23
|
isInvalid?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* A ref for the component
|
|
26
|
+
*/
|
|
27
|
+
ref?: Ref<HTMLTextAreaElement>;
|
|
24
28
|
}
|
|
25
29
|
/**
|
|
26
30
|
* The TextArea is a base component, and should not be used very often.
|
|
27
31
|
* For most cases the TextAreaField is the correct component.
|
|
28
32
|
*/
|
|
29
|
-
export declare const TextArea:
|
|
33
|
+
export declare const TextArea: {
|
|
34
|
+
({ id, name, value, rows, disabled, placeholder, readOnly, tabIndex, onChange, onFocus, onBlur, maxLength, resize, defaultValue, required, dataTestId, isInvalid, className, ref, ...rest }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
|
|
35
|
+
displayName: string;
|
|
36
|
+
};
|
|
30
37
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CommonProps } from "@trackunit/react-components";
|
|
2
|
-
import
|
|
2
|
+
import { Ref } from "react";
|
|
3
3
|
import { FormGroupProps } from "../FormGroup/FormGroup";
|
|
4
4
|
import { TextAreaProps } from "../TextArea/TextArea";
|
|
5
5
|
type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
|
|
@@ -13,6 +13,16 @@ export interface TextAreaFieldProps extends TextAreaProps, FormGroupExposedProps
|
|
|
13
13
|
* If a value is set, the field is rendered in its invalid state.
|
|
14
14
|
*/
|
|
15
15
|
errorMessage?: string;
|
|
16
|
+
/**
|
|
17
|
+
* A ref for the component
|
|
18
|
+
*/
|
|
19
|
+
ref?: Ref<HTMLTextAreaElement>;
|
|
16
20
|
}
|
|
17
|
-
|
|
21
|
+
/**
|
|
22
|
+
*
|
|
23
|
+
*/
|
|
24
|
+
export declare const TextAreaField: {
|
|
25
|
+
({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, ref, ...rest }: TextAreaFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
26
|
+
displayName: string;
|
|
27
|
+
};
|
|
18
28
|
export {};
|
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import * as React from "react";
|
|
2
1
|
import { FormGroupProps } from "../FormGroup/FormGroup";
|
|
3
2
|
import { TextInputProps } from "../TextInput/TextInput";
|
|
4
3
|
type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
|
|
@@ -16,5 +15,8 @@ export interface TextFieldProps extends TextInputProps, FormGroupExposedProps {
|
|
|
16
15
|
/**
|
|
17
16
|
* 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
17
|
*/
|
|
19
|
-
export declare const TextField:
|
|
18
|
+
export declare const TextField: {
|
|
19
|
+
({ id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId, isWarning, ref, ...rest }: TextFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
20
|
+
displayName: string;
|
|
21
|
+
};
|
|
20
22
|
export {};
|
|
@@ -13,6 +13,6 @@ export interface TextLengthIndicatorProps {
|
|
|
13
13
|
* Used for TextFields to communicate a maximum allowed input length.
|
|
14
14
|
*
|
|
15
15
|
* @param {TextLengthIndicatorProps} props - The props for the TextLengthIndicator component
|
|
16
|
-
* @returns {
|
|
16
|
+
* @returns {ReactElement} TextLengthIndicator component
|
|
17
17
|
*/
|
|
18
18
|
export declare const TextLengthIndicator: ({ length, maxLength }: TextLengthIndicatorProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -7,5 +7,8 @@ export interface TextInputProps extends BaseInputExposedProps {
|
|
|
7
7
|
*
|
|
8
8
|
* NOTE: If shown with a label, please use the `TextField` component instead.
|
|
9
9
|
*/
|
|
10
|
-
export declare const TextInput:
|
|
10
|
+
export declare const TextInput: {
|
|
11
|
+
({ ref, ...rest }: TextInputProps): import("react/jsx-runtime").JSX.Element;
|
|
12
|
+
displayName: string;
|
|
13
|
+
};
|
|
11
14
|
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { CommonProps } from "@trackunit/react-components";
|
|
2
|
-
import
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
3
|
export interface TimeRangeInput {
|
|
4
4
|
/**
|
|
5
5
|
* The starting time of the range.
|
|
@@ -20,7 +20,7 @@ export interface TimeRangeProps extends CommonProps {
|
|
|
20
20
|
*
|
|
21
21
|
* @default <div data-testid={`${dataTestId}-separator`}>-</div>
|
|
22
22
|
*/
|
|
23
|
-
children?:
|
|
23
|
+
children?: ReactNode;
|
|
24
24
|
/**
|
|
25
25
|
* Sets start time of the range and end time of the range.
|
|
26
26
|
*
|
|
@@ -47,6 +47,6 @@ export interface TimeRangeProps extends CommonProps {
|
|
|
47
47
|
* TimeRange is used to create a time range entry.
|
|
48
48
|
*
|
|
49
49
|
* @param {TimeRangeProps} props - The props for the TimeRange component
|
|
50
|
-
* @returns {
|
|
50
|
+
* @returns {ReactElement} TimeRange component
|
|
51
51
|
*/
|
|
52
52
|
export declare const TimeRange: ({ id, className, dataTestId, children, range, onChange, disabled, isInvalid, }: TimeRangeProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -11,7 +11,7 @@ export interface TimeRangeFieldProps extends TimeRangeProps, FormGroupExposedPro
|
|
|
11
11
|
* TimeRangeField Description. <-- Please add a proper Description this is used in Storybook.
|
|
12
12
|
*
|
|
13
13
|
* @param {TimeRangeFieldProps} props - The props for the TimeRangeField component
|
|
14
|
-
* @returns {
|
|
14
|
+
* @returns {ReactElement} TimeRangeField component
|
|
15
15
|
*/
|
|
16
16
|
export declare const TimeRangeField: ({ className, dataTestId, onChange, isInvalid, errorMessage, label, tip, children, helpText, id, ...rest }: TimeRangeFieldProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
17
|
export {};
|
|
@@ -10,5 +10,8 @@ export interface UploadFieldProps extends UploadInputProps, FormGroupExposedProp
|
|
|
10
10
|
/**
|
|
11
11
|
* Upload fields enable the user to upload Files.
|
|
12
12
|
*/
|
|
13
|
-
export declare const UploadField:
|
|
13
|
+
export declare const UploadField: {
|
|
14
|
+
({ label, id, tip, helpText, errorMessage, isInvalid, className, value, dataTestId, ref, ...rest }: UploadFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
displayName: string;
|
|
16
|
+
};
|
|
14
17
|
export {};
|
|
@@ -28,5 +28,8 @@ export interface UploadInputProps extends BaseInputExposedProps, CommonProps {
|
|
|
28
28
|
*
|
|
29
29
|
* NOTE: If shown with a label, please use the `UploadField` component instead.
|
|
30
30
|
*/
|
|
31
|
-
export declare const UploadInput:
|
|
31
|
+
export declare const UploadInput: {
|
|
32
|
+
({ disabled, acceptedTypes, nonInteractive, uploadLabel, multipleFiles, ref, ...rest }: UploadInputProps): import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
displayName: string;
|
|
34
|
+
};
|
|
32
35
|
export {};
|
|
@@ -12,5 +12,8 @@ export interface UrlFieldProps extends FormGroupExposedProps, UrlInputProps {
|
|
|
12
12
|
* UrlField validates that user enters a valid web address.
|
|
13
13
|
*
|
|
14
14
|
*/
|
|
15
|
-
export declare const UrlField:
|
|
15
|
+
export declare const UrlField: {
|
|
16
|
+
({ label, id, tip, helpText, errorMessage, helpAddon, className, defaultValue, dataTestId, isInvalid, value, onBlur, ref, ...rest }: UrlFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
displayName: string;
|
|
18
|
+
};
|
|
16
19
|
export {};
|
|
@@ -16,5 +16,8 @@ export interface UrlInputProps extends BaseInputExposedProps {
|
|
|
16
16
|
*
|
|
17
17
|
* NOTE: If shown with a label, please use the `UrlField` component instead.
|
|
18
18
|
*/
|
|
19
|
-
export declare const UrlInput:
|
|
19
|
+
export declare const UrlInput: {
|
|
20
|
+
({ dataTestId, isInvalid, disabled, fieldSize, disableAction, value, defaultValue, ref, ...rest }: UrlInputProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
displayName: string;
|
|
22
|
+
};
|
|
20
23
|
export {};
|
|
@@ -2,4 +2,4 @@ import { ReactNode } from "react";
|
|
|
2
2
|
/**
|
|
3
3
|
* Used to compare two React nodes for deep equality.
|
|
4
4
|
*/
|
|
5
|
-
export declare const compareReactNodes: (node1: ReactNode, node2: ReactNode) => boolean;
|
|
5
|
+
export declare const compareReactNodes: (node1: ReactNode | Record<string, unknown>, node2: ReactNode | Record<string, unknown>) => boolean;
|