@trackunit/react-form-components 1.3.28 → 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.
Files changed (55) hide show
  1. package/index.cjs.js +112 -109
  2. package/index.esm.js +125 -122
  3. package/package.json +11 -11
  4. package/src/components/ActionButton/ActionButton.d.ts +5 -4
  5. package/src/components/BaseInput/BaseInput.d.ts +9 -2
  6. package/src/components/BaseInput/components/GenericActionsRenderer.d.ts +1 -1
  7. package/src/components/Checkbox/CheckIcon.d.ts +1 -1
  8. package/src/components/Checkbox/Checkbox.d.ts +9 -3
  9. package/src/components/Checkbox/IndeterminateIcon.d.ts +1 -1
  10. package/src/components/CheckboxField/CheckboxField.d.ts +9 -2
  11. package/src/components/ColorField/ColorField.d.ts +1 -2
  12. package/src/components/DateField/DateField.d.ts +9 -1
  13. package/src/components/DateInput/DateInput.d.ts +7 -1
  14. package/src/components/DropZone/DropZone.d.ts +4 -3
  15. package/src/components/EmailField/EmailField.d.ts +4 -2
  16. package/src/components/EmailInput/EmailInput.d.ts +4 -1
  17. package/src/components/FormGroup/FormGroup.d.ts +6 -6
  18. package/src/components/Label/Label.d.ts +4 -4
  19. package/src/components/NumberField/NumberField.d.ts +9 -1
  20. package/src/components/NumberInput/NumberInput.d.ts +4 -1
  21. package/src/components/OptionCard/OptionCard.d.ts +11 -4
  22. package/src/components/PasswordField/PasswordField.d.ts +9 -1
  23. package/src/components/PasswordInput/PasswordInput.d.ts +4 -1
  24. package/src/components/PhoneField/PhoneField.d.ts +9 -2
  25. package/src/components/PhoneFieldWithController/PhoneFieldWithController.d.ts +9 -2
  26. package/src/components/PhoneInput/CountryCodeSelect.d.ts +1 -1
  27. package/src/components/PhoneInput/PhoneInput.d.ts +4 -2
  28. package/src/components/RadioGroup/RadioGroup.d.ts +6 -6
  29. package/src/components/RadioGroup/RadioItem.d.ts +3 -3
  30. package/src/components/Schedule/Schedule.d.ts +1 -1
  31. package/src/components/Search/Search.d.ts +11 -5
  32. package/src/components/Select/CreatableSelect.d.ts +1 -1
  33. package/src/components/Select/Select.d.ts +1 -1
  34. package/src/components/Select/SelectMenuItem/SelectMenuItem.d.ts +5 -5
  35. package/src/components/Select/TagWithWidth.d.ts +1 -1
  36. package/src/components/Select/TagsContainer.d.ts +3 -2
  37. package/src/components/Select/useCustomComponents.d.ts +7 -7
  38. package/src/components/Select/useCustomStyles.d.ts +3 -3
  39. package/src/components/Select/useSelect.d.ts +3 -3
  40. package/src/components/SelectField/CreatableSelectField.d.ts +8 -20
  41. package/src/components/SelectField/FormFieldSelectAdapter.d.ts +14 -3
  42. package/src/components/SelectField/SelectField.d.ts +5 -20
  43. package/src/components/TextArea/TextArea.d.ts +9 -2
  44. package/src/components/TextAreaField/TextAreaField.d.ts +12 -2
  45. package/src/components/TextField/TextField.d.ts +4 -2
  46. package/src/components/TextField/TextLenghtIndicator.d.ts +1 -1
  47. package/src/components/TextInput/TextInput.d.ts +4 -1
  48. package/src/components/TimeRange/TimeRange.d.ts +3 -3
  49. package/src/components/TimeRangeField/TimeRangeField.d.ts +1 -1
  50. package/src/components/UploadField/UploadField.d.ts +4 -1
  51. package/src/components/UploadInput/UploadInput.d.ts +4 -1
  52. package/src/components/UrlField/UrlField.d.ts +4 -1
  53. package/src/components/UrlInput/UrlInput.d.ts +4 -1
  54. package/src/test-utils/test-utils.d.ts +0 -1
  55. 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 * as React from "react";
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?: React.CSSProperties;
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?: React.RefObject<HTMLButtonElement>;
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: React.ForwardRefExoticComponent<SearchProps & React.RefAttributes<HTMLInputElement>>;
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 {JSX.Element} CreatableSelect component
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 {JSX.Element} Select component
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 * as React from "react";
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?: React.MouseEventHandler<HTMLDivElement>;
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?: JSX.Element;
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 {JSX.Element} SingleSelectMenuItem
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 {JSX.Element} multi select menu item
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 {JSX.Element} TagWithWidth component
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: JSX.Element;
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 {JSX.Element} TagsContainer
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 { MutableRefObject } from "react";
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 {MutableRefObject<boolean>} refMenuIsEnabled a flag to block menu from open
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 {JSX.Element} dropdownIcon an custom dropdown icon
17
+ * @param {ReactElement} dropdownIcon an custom dropdown icon
18
18
  * @param {boolean} hasError decide to override hasError variant
19
- * @param {JSX.Element} prefix a prefix element
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: MutableRefObject<boolean>;
26
+ refMenuIsEnabled: RefObject<boolean>;
27
27
  dataTestId: string;
28
28
  maxSelectedDisplayCount: number | undefined;
29
- dropdownIcon?: JSX.Element;
30
- prefix?: JSX.Element;
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 * as React from "react";
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: React.RefObject<HTMLDivElement>;
15
- refPrefix: React.RefObject<HTMLDivElement>;
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 React from "react";
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?: JSX.Element;
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?: JSX.Element;
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: import("react").ForwardRefExoticComponent<import("dist/libs/react/components/src").CommonProps & {
14
- label: string | React.ReactNode;
15
- tip?: import("react").ReactNode;
16
- helpText?: string | null | undefined;
17
- helpAddon?: import("react").ReactNode;
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: React.FocusEvent<HTMLInputElement>) => void;
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>>) => JSX.Element;
45
+ children: (props: SelectProps<TOptionType, TIsAsync, TIsMulti, GroupBase<TOptionType>>) => ReactNode;
41
46
  }
42
- export declare const FormFieldSelectAdapter: import("react").ForwardRefExoticComponent<FormFieldSelectAdapterProps<BaseOptionType, false, false> & import("react").RefAttributes<HTMLSelectElement>>;
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: import("react").ForwardRefExoticComponent<import("dist/libs/react/components/src").CommonProps & {
13
- label: string | React.ReactNode;
14
- tip?: import("react").ReactNode;
15
- helpText?: string | null | undefined;
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 * as React from "react";
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: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
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 * as React from "react";
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
- export declare const TextAreaField: React.ForwardRefExoticComponent<TextAreaFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
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: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;
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 {JSX.Element} TextLengthIndicator component
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: import("react").ForwardRefExoticComponent<TextInputProps & import("react").RefAttributes<HTMLInputElement>>;
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 React from "react";
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?: React.ReactNode;
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 {JSX.Element} TimeRange component
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 {JSX.Element} TimeRangeField component
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: import("react").ForwardRefExoticComponent<UploadFieldProps & import("react").RefAttributes<HTMLInputElement>>;
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: import("react").ForwardRefExoticComponent<UploadInputProps & import("react").RefAttributes<HTMLInputElement>>;
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: import("react").ForwardRefExoticComponent<UrlFieldProps & import("react").RefAttributes<HTMLInputElement>>;
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: import("react").ForwardRefExoticComponent<UrlInputProps & import("react").RefAttributes<HTMLInputElement>>;
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 {};
@@ -1,5 +1,4 @@
1
1
  import { RenderOptions, RenderResult } from "@testing-library/react";
2
- import * as React from "react";
3
2
  /**
4
3
  * Enhanced render with providers
5
4
  *
@@ -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;