@trackunit/react-components 0.0.96 → 0.0.100

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.
@@ -16,19 +16,19 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
16
16
  */
17
17
  suffix?: React.ReactNode;
18
18
  /**
19
- * An React element to render in a seperate container before the text in the input.
19
+ * An React element to render in a separate container before the text in the input.
20
20
  * This is typically used to render text.
21
21
  * For icons, please concider using the prefix prop.
22
22
  */
23
23
  addonBefore?: React.ReactNode;
24
24
  /**
25
- * An React element to render in a seperate container after the text in the input.
25
+ * An React element to render in a separate container after the text in the input.
26
26
  * This is typically used to render text.
27
27
  * For icons, please concider using the suffix prop.
28
28
  */
29
29
  addonAfter?: React.ReactNode;
30
30
  /**
31
- * An ReactNode to render at the end of the input field befire the addonAfter.
31
+ * An ReactNode to render at the end of the input field before the addonAfter.
32
32
  * Mainly meant for the icon button actions for special input types.
33
33
  */
34
34
  actions?: React.ReactNode;
@@ -38,7 +38,7 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
38
38
  */
39
39
  fieldSize?: FieldSize;
40
40
  /**
41
- * If ture the field is rendered in its invalid state.
41
+ * If true the field is rendered in its invalid state.
42
42
  */
43
43
  isInvalid?: boolean;
44
44
  /**
@@ -3,10 +3,6 @@ import { CommonProps } from "../../common/CommonProps";
3
3
  export declare const ROLE_CARD = "region";
4
4
  declare type Overflow = "visible" | "hidden" | "scroll" | "auto";
5
5
  export interface CardProps extends CommonProps {
6
- children?: React.ReactNode;
7
- onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
8
- onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
9
- onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
10
6
  /**
11
7
  * Whether the card should have full height or not.
12
8
  */
@@ -16,15 +12,31 @@ export interface CardProps extends CommonProps {
16
12
  */
17
13
  overflow?: Overflow;
18
14
  /**
15
+ * The css grid area to place the card.
19
16
  *
20
17
  * @deprecated Use tailwind based grid layouts instead.
21
- * @memberof CardProps
22
18
  */
23
19
  gridArea?: string;
20
+ /**
21
+ * Children to show in the card
22
+ */
23
+ children?: React.ReactNode;
24
+ /**
25
+ * A Click handler function
26
+ */
27
+ onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
28
+ /**
29
+ * A MouseEnter handler function
30
+ */
31
+ onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
32
+ /**
33
+ * A MouseLEave handler function
34
+ */
35
+ onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
24
36
  }
25
37
  /**
26
- * The Card component is a container for ui elements.
27
- * Is also used for modals etc.
38
+ * The Card component is a container for ui elements, and is the main component of the modal.
39
+ * To get the most out of the Card use it in combination with the CardHeader, CardBody and CardFooter.
28
40
  *
29
41
  * @param {CardProps} props - The props for the Card component
30
42
  * @returns {JSX.Element} Card component
@@ -1,13 +1,23 @@
1
1
  import * as React from "react";
2
2
  import { CommonProps, Density } from "../../common/CommonProps";
3
3
  declare type Overflow = "visible" | "hidden" | "scroll" | "auto" | "inherit";
4
- interface CardContentProps extends CommonProps {
4
+ export interface CardBodyProps extends CommonProps {
5
+ /**
6
+ * Tells the body how to handle overflowing elements.
7
+ * Directly mapped to the overflow css property.
8
+ */
5
9
  overflow?: Overflow;
10
+ /**
11
+ * Sets gap, padding and margin.
12
+ */
6
13
  density?: Density;
7
14
  /**
8
15
  * Set gap to be 0px (not preferable)
9
16
  */
10
17
  disableGap?: boolean;
18
+ /**
19
+ * Child elements to render in the body
20
+ */
11
21
  children: React.ReactNode | null;
12
22
  }
13
23
  /**
@@ -15,8 +25,8 @@ interface CardContentProps extends CommonProps {
15
25
  *
16
26
  * @summary For applying padding and gap to a Card.
17
27
  * @description The padding must live here, and not on the Card itself, as to not inset the scrollbar in case of overflow
18
- * @param {CardContentProps} props - The props for the CardBody component
28
+ * @param {CardBodyProps} props - The props for the CardBody component
19
29
  * @returns {JSX.Element} CardBody component
20
30
  */
21
- export declare const CardBody: ({ density, overflow, children, dataTestId, className, disableGap, }: CardContentProps) => JSX.Element;
31
+ export declare const CardBody: ({ density, overflow, children, dataTestId, className, disableGap, }: CardBodyProps) => JSX.Element;
22
32
  export {};
@@ -1,8 +1,14 @@
1
1
  import * as React from "react";
2
2
  import { CommonProps, Density } from "../../common/CommonProps";
3
- interface CardFooterProps extends CommonProps {
4
- children?: React.ReactNode | null;
3
+ export interface CardFooterProps extends CommonProps {
4
+ /**
5
+ * Sets gap, padding and margin.
6
+ */
5
7
  density?: Density;
8
+ /**
9
+ * Element to render in the footer
10
+ */
11
+ children?: React.ReactNode | null;
6
12
  }
7
13
  /**
8
14
  * A simple footer intended to use with Cards and Modals.
@@ -13,4 +19,3 @@ interface CardFooterProps extends CommonProps {
13
19
  * @returns {JSX.Element} CardFooter component
14
20
  */
15
21
  export declare const CardFooter: ({ dataTestId, className, children, density }: CardFooterProps) => JSX.Element;
16
- export {};
@@ -1,8 +1,10 @@
1
1
  import * as React from "react";
2
2
  import { CommonProps, Density } from "../../common/CommonProps";
3
3
  import { HeadingVariant } from "../Heading/Heading";
4
- interface CardHeaderProps extends CommonProps {
5
- /** The text to show in the modal main heading */
4
+ export interface CardHeaderProps extends CommonProps {
5
+ /**
6
+ * The text to show in the Cards main heading
7
+ */
6
8
  heading: string;
7
9
  /**
8
10
  * The variant/size of the heading.
@@ -13,12 +15,24 @@ interface CardHeaderProps extends CommonProps {
13
15
  headingVariant?: HeadingVariant;
14
16
  /** Adds an extra heading below the main heading. */
15
17
  subHeading?: string;
16
- /** Function to call when the close button is clicked */
17
- onClose?: () => void;
18
- children?: React.ReactNode | null;
18
+ /**
19
+ * Items to render next to the heading
20
+ */
19
21
  accessories?: React.ReactNode;
22
+ /**
23
+ * Sets gap, padding and margin.
24
+ */
20
25
  density?: Density;
26
+ /**
27
+ * Wether or not a seperator line should be rendered
28
+ */
21
29
  showSeparator?: boolean;
30
+ /** Function to call when the close button is clicked */
31
+ onClose?: () => void;
32
+ /**
33
+ * Children to render in the header
34
+ */
35
+ children?: React.ReactNode | null;
22
36
  }
23
37
  /**
24
38
  * Header for Cards and Modals.
@@ -27,4 +41,3 @@ interface CardHeaderProps extends CommonProps {
27
41
  * @returns {JSX.Element} CardHeader component
28
42
  */
29
43
  export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, density, }: CardHeaderProps) => JSX.Element;
30
- export {};
@@ -20,7 +20,7 @@ export interface CollapseProps extends CommonProps {
20
20
  label: React.ReactNode;
21
21
  }
22
22
  /**
23
- * The Collapse component is ued to condense non-important information.
23
+ * The Collapse component is used to condense non-important information.
24
24
  *
25
25
  * @param {CollapseProps} props - The props for the Collapse component
26
26
  * @returns {JSX.Element} Collapse component
@@ -49,7 +49,7 @@ export interface MenuItemProps {
49
49
  disabled?: boolean;
50
50
  }
51
51
  /**
52
- * The MenuItem component should be used to inform the user of important information.
52
+ * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
53
53
  *
54
54
  * @param {MenuItemProps} props - The props for the MenuItem component
55
55
  * @returns {JSX.Element} MenuItem component
@@ -1,73 +1,16 @@
1
1
  import * as React from "react";
2
- import { CommonProps } from "../../common/CommonProps";
2
+ import { CommonProps } from "../../common";
3
3
  export declare type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
4
- export interface TextAreaProps extends CommonProps {
5
- /**
6
- * ID of the text area.
7
- */
8
- id?: string;
9
- /**
10
- * Name of the text area.
11
- */
12
- name?: string;
13
- /**
14
- * Label of the text area.
15
- */
16
- label?: string;
17
- /**
18
- * Description of the text area.
19
- */
20
- description?: string;
21
- /**
22
- * Information about the text area.
23
- */
24
- info?: React.ReactNode;
25
- /**
26
- * Error message of the text area.
27
- */
28
- error?: React.ReactNode;
29
- /**
30
- * Value of the text area.
31
- */
32
- value?: React.ReactText;
33
- /**
34
- * Tab index specifies the keyboard tab order of the textarea relative to the other controls on the page.
35
- */
36
- tabIndex?: number;
37
- /**
38
- * Whether the text area is disabled or not.
39
- */
40
- disabled?: boolean;
41
- /**
42
- * Whether the text area is readonly or not.
43
- */
44
- readOnly?: boolean;
4
+ declare type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "prefix" | "suffix">;
5
+ export interface TextAreaProps extends FilteredInputProps, CommonProps {
45
6
  /**
46
7
  * Number of rows in the text area.
47
8
  */
48
9
  rows?: number;
49
- /**
50
- * Placeholder text for the text area.
51
- */
52
- placeholder?: string;
53
- /**
54
- * onChange handler of the text area.
55
- */
56
- onChange?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
57
- /**
58
- * onFocus handler of the text area.
59
- */
60
- onFocus?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
61
- /**
62
- * onBlur handler of the text area.
63
- */
64
- onBlur?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
65
- /**
66
- * Maximum length of the text area.
67
- */
68
- maxLength?: number;
69
10
  /**
70
11
  * Resize of the text area.
12
+ *
13
+ * @default "vertical"
71
14
  */
72
15
  resize?: TextAreaResize;
73
16
  /**
@@ -75,8 +18,13 @@ export interface TextAreaProps extends CommonProps {
75
18
  */
76
19
  defaultValue?: React.ReactText;
77
20
  /**
78
- * Whether the text area is required or not.
21
+ * If true the field is rendered in its invalid state.
79
22
  */
80
- required?: boolean;
23
+ isInvalid?: boolean;
81
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
+ */
82
29
  export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
30
+ export {};
@@ -0,0 +1,18 @@
1
+ import * as React from "react";
2
+ import { CommonProps } from "../../common";
3
+ import { FormGroupProps } from "../FormGroup/FormGroup";
4
+ import { TextAreaProps } from "../TextArea/TextArea";
5
+ declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
6
+ export interface TextAreaFieldProps extends TextAreaProps, FormGroupExposedProps, CommonProps {
7
+ /**
8
+ * Set the Maximal length of the value for the input.
9
+ * Adds a TextLengthIndicator to the right of the helpText.
10
+ */
11
+ maxLength?: number;
12
+ /**
13
+ * If a value is set, the field is rendered in its invalid state.
14
+ */
15
+ errorMessage?: string;
16
+ }
17
+ export declare const TextAreaField: React.ForwardRefExoticComponent<TextAreaFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
18
+ export {};
@@ -0,0 +1 @@
1
+ export * from "./TextAreaField";
@@ -5,7 +5,7 @@ declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "hel
5
5
  export interface TextFieldProps extends TextInputProps, FormGroupExposedProps {
6
6
  /**
7
7
  * Set the Maximal length of the value for the input.
8
- * Adds a TextLenghtIndicator to the right of the helpText.
8
+ * Adds a TextLengthIndicator to the right of the helpText.
9
9
  */
10
10
  maxLength?: number;
11
11
  /**
@@ -7,7 +7,13 @@ export interface TipProps extends CommonProps {
7
7
  * Child nodes to render inside the tip.
8
8
  */
9
9
  children: React.ReactNode;
10
+ /**
11
+ * The props for setting the icon on this tip.
12
+ */
10
13
  iconProps?: Partial<IconProps>;
14
+ /**
15
+ * The props for setting the tooltip on this tip.
16
+ */
11
17
  tooltipProps?: Partial<TooltipProps>;
12
18
  }
13
19
  /**
@@ -30,6 +30,7 @@ export * from "./Spinner";
30
30
  export * from "./Tag";
31
31
  export * from "./Text";
32
32
  export * from "./TextArea";
33
+ export * from "./TextAreaField";
33
34
  export * from "./TextField";
34
35
  export * from "./TextInput/TextInput";
35
36
  export * from "./Timeline/Timeline";
package/index.js CHANGED
@@ -947,8 +947,8 @@ const InputContainer = tw.div`
947
947
 
948
948
  const ROLE_CARD = "region";
949
949
  /**
950
- * The Card component is a container for ui elements.
951
- * Is also used for modals etc.
950
+ * The Card component is a container for ui elements, and is the main component of the modal.
951
+ * To get the most out of the Card use it in combination with the CardHeader, CardBody and CardFooter.
952
952
  *
953
953
  * @param {CardProps} props - The props for the Card component
954
954
  * @returns {JSX.Element} Card component
@@ -1090,7 +1090,7 @@ ${DensityFinder}
1090
1090
  *
1091
1091
  * @summary For applying padding and gap to a Card.
1092
1092
  * @description The padding must live here, and not on the Card itself, as to not inset the scrollbar in case of overflow
1093
- * @param {CardContentProps} props - The props for the CardBody component
1093
+ * @param {CardBodyProps} props - The props for the CardBody component
1094
1094
  * @returns {JSX.Element} CardBody component
1095
1095
  */
1096
1096
 
@@ -1154,20 +1154,16 @@ const CardFooter = ({
1154
1154
  className: className,
1155
1155
  "$density": density
1156
1156
  }, {
1157
- children: jsx(StyledFlex$1, {
1157
+ children: jsx(Body, {
1158
1158
  children: children
1159
1159
  })
1160
1160
  }));
1161
1161
  };
1162
1162
  const TopBorderedDensityContainer = tw(DensityContainer)`
1163
- border-t-2
1164
- border-neutral-200
1163
+ tu-card__footer-density-container
1165
1164
  `;
1166
- const StyledFlex$1 = tw.div`
1167
- flex
1168
- gap-2
1169
- flex-wrap
1170
- justify-end
1165
+ const Body = tw.div`
1166
+ tu-card__footer
1171
1167
  `;
1172
1168
 
1173
1169
  /**
@@ -1281,17 +1277,13 @@ const CardHeader = ({
1281
1277
  }));
1282
1278
  };
1283
1279
  const BottomBorderedDensityContainer = tw(DensityContainer)`
1284
- border-b-2
1285
- border-neutral-200`;
1280
+ tu-card__header-density-container
1281
+ `;
1286
1282
  const Container$6 = tw.div`
1287
- flex
1288
- justify-between
1289
- items-start
1283
+ tu-card__header
1290
1284
  `;
1291
1285
  const HeadingContainer = tw.div`
1292
- flex
1293
- items-center
1294
- gap-4
1286
+ tu-card__header-heading-container
1295
1287
  `;
1296
1288
 
1297
1289
  /**
@@ -1579,7 +1571,7 @@ ${({
1579
1571
  `;
1580
1572
 
1581
1573
  /**
1582
- * The Collapse component is ued to condense non-important information.
1574
+ * The Collapse component is used to condense non-important information.
1583
1575
  *
1584
1576
  * @param {CollapseProps} props - The props for the Collapse component
1585
1577
  * @returns {JSX.Element} Collapse component
@@ -2433,7 +2425,7 @@ const Tip = _a => {
2433
2425
  label: children,
2434
2426
  dataTestId: `${dataTestId}-tooltip`
2435
2427
  }, tooltipProps, {
2436
- className: `${(_b = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className) !== null && _b !== void 0 ? _b : ""} ${tws`inline-flex`}`
2428
+ className: `${(_b = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className) !== null && _b !== void 0 ? _b : ""} tu-tip-tooltip`
2437
2429
  }, {
2438
2430
  children: jsx(Icon$1, Object.assign({
2439
2431
  name: "QuestionMarkCircleIcon",
@@ -2705,7 +2697,7 @@ const MobileIconButton = tw(IconButton)`
2705
2697
  `;
2706
2698
 
2707
2699
  /**
2708
- * The MenuItem component should be used to inform the user of important information.
2700
+ * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
2709
2701
  *
2710
2702
  * @param {MenuItemProps} props - The props for the MenuItem component
2711
2703
  * @returns {JSX.Element} MenuItem component
@@ -3468,7 +3460,7 @@ const SelectContainer = ({
3468
3460
  htmlFor: id
3469
3461
  }, {
3470
3462
  children: label
3471
- })), children, (hasError || info) && jsx(InformativeText$1, Object.assign({
3463
+ })), children, (hasError || info) && jsx(InformativeText, Object.assign({
3472
3464
  size: "small",
3473
3465
  "$hasError": hasError !== null && hasError !== void 0 ? hasError : false
3474
3466
  }, {
@@ -3479,7 +3471,7 @@ const SelectContainer = ({
3479
3471
  const Container = tw.label`
3480
3472
  tu-select__container
3481
3473
  `;
3482
- const InformativeText$1 = tw(Text)`
3474
+ const InformativeText = tw(Text)`
3483
3475
  tu-informative-text
3484
3476
  ${p => p.$hasError ? `tu-informative-text--error` : null}
3485
3477
  `;
@@ -3758,87 +3750,63 @@ const SkeletonLine = tw.div`
3758
3750
  tu-skeleton-line
3759
3751
  `;
3760
3752
 
3761
- const TextArea = React.forwardRef(({
3762
- id,
3763
- name,
3764
- label,
3765
- description,
3766
- info,
3767
- error,
3768
- value,
3769
- rows,
3770
- disabled,
3771
- placeholder,
3772
- readOnly,
3773
- tabIndex,
3774
- onChange,
3775
- onFocus,
3776
- onBlur,
3777
- maxLength,
3778
- resize = "vertical",
3779
- defaultValue,
3780
- className,
3781
- required,
3782
- dataTestId
3783
- }, ref) => {
3784
- const hasError = !!error;
3785
- return jsxs(TextAreaContainer, Object.assign({
3786
- className: className
3787
- }, {
3788
- children: [jsx(Label$5, Object.assign({
3789
- htmlFor: id
3790
- }, {
3791
- children: label
3792
- })), jsx(StyledTextArea, {
3793
- name: name,
3794
- id: id,
3795
- "data-testid": dataTestId,
3796
- value: value,
3797
- rows: rows,
3798
- disabled: disabled,
3799
- placeholder: placeholder,
3800
- readOnly: readOnly,
3801
- tabIndex: tabIndex,
3802
- onChange: onChange,
3803
- onFocus: onFocus,
3804
- onBlur: onBlur,
3805
- maxLength: maxLength,
3806
- "$resize": resize,
3807
- "$hasError": hasError,
3808
- ref: ref,
3809
- defaultValue: defaultValue,
3810
- required: required
3811
- }), (hasError || info) && jsx(InformativeText, Object.assign({
3812
- size: "small",
3813
- "$hasError": hasError
3814
- }, {
3815
- children: hasError ? error : info
3816
- }))]
3753
+ /**
3754
+ * The TextArea is a base component, and should not be used very often.
3755
+ * For most cases the TextAreaField is the correct component.
3756
+ */
3757
+
3758
+ const TextArea = React.forwardRef((_a, ref) => {
3759
+ var {
3760
+ id,
3761
+ name,
3762
+ value,
3763
+ rows,
3764
+ disabled,
3765
+ placeholder,
3766
+ readOnly,
3767
+ tabIndex,
3768
+ onChange,
3769
+ onFocus,
3770
+ onBlur,
3771
+ maxLength,
3772
+ resize = "vertical",
3773
+ defaultValue,
3774
+ className,
3775
+ required,
3776
+ dataTestId,
3777
+ isInvalid
3778
+ } = _a,
3779
+ rest = __rest(_a, ["id", "name", "value", "rows", "disabled", "placeholder", "readOnly", "tabIndex", "onChange", "onFocus", "onBlur", "maxLength", "resize", "defaultValue", "className", "required", "dataTestId", "isInvalid"]);
3780
+
3781
+ return jsx(StyledTextArea, Object.assign({
3782
+ name: name,
3783
+ value: value,
3784
+ rows: rows,
3785
+ disabled: disabled,
3786
+ placeholder: placeholder,
3787
+ readOnly: readOnly,
3788
+ tabIndex: tabIndex,
3789
+ onFocus: onFocus,
3790
+ onBlur: onBlur,
3791
+ maxLength: maxLength,
3792
+ "$resize": resize,
3793
+ "$invalid": isInvalid,
3794
+ ref: ref,
3795
+ defaultValue: defaultValue,
3796
+ required: required
3797
+ }, rest, {
3798
+ onChange: onChange,
3799
+ "data-testId": dataTestId
3817
3800
  }));
3818
3801
  });
3819
- const TextAreaContainer = tw.div``;
3820
3802
  const StyledTextArea = tw.textarea`
3821
- input
3822
- w-full
3823
- block
3824
- p-2
3825
- overflow-auto
3826
- appearance-none
3827
- text-base
3828
- text-slate-900
3829
- placeholder-slate-400
3830
- focus-visible:outline-none
3831
- border-box
3832
- h-20
3833
-
3834
- transition
3835
-
3803
+ tu-textarea
3836
3804
  ${({
3837
- $hasError
3838
- }) => $hasError ? tws`tu-input--invalid` : null}
3805
+ $invalid
3806
+ }) => $invalid ? tws`tu-textarea--invalid` : null}
3839
3807
  ${({
3840
3808
  disabled
3841
- }) => disabled ? tws`tu-input--disabled` : null}
3809
+ }) => disabled ? tws`tu-textarea--disabled` : null}
3842
3810
  ${({
3843
3811
  $resize
3844
3812
  }) => {
@@ -3859,25 +3827,8 @@ const StyledTextArea = tw.textarea`
3859
3827
  return null;
3860
3828
  }
3861
3829
  }};
3862
-
3863
-
3864
- `;
3865
- const InformativeText = tw(Text)`
3866
- mt-1
3867
- ${p => p.$hasError ? tws`text-red-500` : tws`text-neutral-600`};
3868
3830
  `;
3869
3831
 
3870
- /**
3871
- * A thin wrapper around the `BaseInput` component for text input fields.
3872
- *
3873
- * NOTE: If shown with a label, please use the `TextField` component instead.
3874
- */
3875
-
3876
- const TextInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
3877
- ref: ref,
3878
- type: "text"
3879
- }, props)));
3880
-
3881
3832
  /**
3882
3833
  * The TextLengthIndicator component shows a `{length}/{maxLength}` label.
3883
3834
  * Used for TextFields to communicate a maximum allowed input length.
@@ -3898,6 +3849,67 @@ const Root = tw.span`
3898
3849
  font-mono
3899
3850
  `;
3900
3851
 
3852
+ const TextAreaField = React.forwardRef((_a, ref) => {
3853
+ var {
3854
+ label,
3855
+ tip,
3856
+ helpText,
3857
+ helpAddon,
3858
+ errorMessage,
3859
+ isInvalid,
3860
+ maxLength,
3861
+ onChange,
3862
+ className,
3863
+ value,
3864
+ dataTestId
3865
+ } = _a,
3866
+ rest = __rest(_a, ["label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
3867
+
3868
+ const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
3869
+ const renderAsInvalid = isInvalid || Boolean(errorMessage);
3870
+ const handleChange = React.useCallback(event => {
3871
+ setValueLength(event.target.value.length);
3872
+
3873
+ if (onChange) {
3874
+ onChange(event);
3875
+ }
3876
+ }, [onChange]);
3877
+ return jsx(FormGroup, Object.assign({
3878
+ label: label,
3879
+ tip: tip,
3880
+ isInvalid: renderAsInvalid,
3881
+ helpText: errorMessage || helpText,
3882
+ helpAddon: helpAddon || maxLength !== null && maxLength !== undefined && jsx(TextLengthIndicator, {
3883
+ length: valueLength,
3884
+ maxLength: maxLength
3885
+ }),
3886
+ className: className,
3887
+ dataTestId: `${dataTestId}-FormGroup`
3888
+ }, {
3889
+ children: jsx(TextArea, Object.assign({
3890
+ ref: ref,
3891
+ maxLength: maxLength,
3892
+ value: value,
3893
+ isInvalid: renderAsInvalid
3894
+ }, rest, {
3895
+ className: className,
3896
+ onChange: handleChange,
3897
+ dataTestId: dataTestId
3898
+ }))
3899
+ }));
3900
+ });
3901
+
3902
+ /**
3903
+ * A thin wrapper around the `BaseInput` component for text input fields.
3904
+ *
3905
+ * NOTE: If shown with a label, please use the `TextField` component instead.
3906
+ */
3907
+
3908
+ const TextInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
3909
+ ref: ref,
3910
+ type: "text"
3911
+ }, props)));
3912
+
3901
3913
  /**
3902
3914
  * 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.
3903
3915
  *
@@ -4506,4 +4518,4 @@ const Layout = tw.div`
4506
4518
  tu-layout-TwoColumnLayout
4507
4519
  `;
4508
4520
 
4509
- export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$5 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
4521
+ export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DayPicker, DayPickerPopover, DayRangePicker, DensityContainer, FilterListMapLayout, FormGroup, FullWidthRepeatingLayout, GridArea, Heading, Icon$1 as Icon, IconButton, Indicator$1 as Indicator, IntrinsicallyResponsiveGrid, Label$5 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, NumberField, NumberInput, PageHeading, PopoverLifecycle, PopoverList, PopoverListItem, PopoverTitle, Prompt, ROLE_CARD, RadioGroup, RadioItem, Select, SkeletonLines, Spacer, Spinner, StarButton, Tag, Text, TextArea, TextAreaField, TextField, TextInput, Timeline, TimelineElement, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-components",
3
- "version": "0.0.96",
3
+ "version": "0.0.100",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "UNLICENSED",
6
6
  "dependencies": {