@trackunit/react-components 0.0.98 → 0.0.101

package/components/BaseInput/BaseInput.d.ts

@@ -16,19 +16,19 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      */
     suffix?: React.ReactNode;
     /**
-     * An React element to render in a seperate container before the text in the input.
+     * An React element to render in a separate container before the text in the input.
      * This is typically used to render text.
      * For icons, please concider using the prefix prop.
      */
     addonBefore?: React.ReactNode;
     /**
-     * An React element to render in a seperate container after the text in the input.
+     * An React element to render in a separate container after the text in the input.
      * This is typically used to render text.
      * For icons, please concider using the suffix prop.
      */
     addonAfter?: React.ReactNode;
     /**
-     * An ReactNode to render at the end of the input field befire the addonAfter.
+     * An ReactNode to render at the end of the input field before the addonAfter.
      * Mainly meant for the icon button actions for special input types.
      */
     actions?: React.ReactNode;
@@ -38,7 +38,7 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      */
     fieldSize?: FieldSize;
     /**
-     * If ture the field is rendered in its invalid state.
+     * If true the field is rendered in its invalid state.
      */
     isInvalid?: boolean;
     /**

package/components/Card/Card.d.ts

@@ -3,10 +3,6 @@ import { CommonProps } from "../../common/CommonProps";
 export declare const ROLE_CARD = "region";
 declare type Overflow = "visible" | "hidden" | "scroll" | "auto";
 export interface CardProps extends CommonProps {
-    children?: React.ReactNode;
-    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     /**
      * Whether the card should have full height or not.
      */
@@ -16,15 +12,31 @@ export interface CardProps extends CommonProps {
      */
     overflow?: Overflow;
     /**
+     * The css grid area to place the card.
      *
      * @deprecated Use tailwind based grid layouts instead.
-     * @memberof CardProps
      */
     gridArea?: string;
+    /**
+     * Children to show in the card
+     */
+    children?: React.ReactNode;
+    /**
+     * A Click handler function
+     */
+    onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * A MouseEnter handler function
+     */
+    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * A MouseLEave handler function
+     */
+    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }
 /**
- * The Card component is a container for ui elements.
- * Is also used for modals etc.
+ * The Card component is a container for ui elements, and is the main component of the modal.
+ * To get the most out of the Card use it in combination with the CardHeader, CardBody and CardFooter.
  *
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} Card component

package/components/Card/CardBody.d.ts

@@ -1,13 +1,23 @@
 import * as React from "react";
 import { CommonProps, Density } from "../../common/CommonProps";
 declare type Overflow = "visible" | "hidden" | "scroll" | "auto" | "inherit";
-interface CardContentProps extends CommonProps {
+export interface CardBodyProps extends CommonProps {
+    /**
+     * Tells the body how to handle overflowing elements.
+     * Directly mapped to the overflow css property.
+     */
     overflow?: Overflow;
+    /**
+     * Sets gap, padding and margin.
+     */
     density?: Density;
     /**
      * Set gap to be 0px (not preferable)
      */
     disableGap?: boolean;
+    /**
+     * Child elements to render in the body
+     */
     children: React.ReactNode | null;
 }
 /**
@@ -15,8 +25,8 @@ interface CardContentProps extends CommonProps {
  *
  * @summary For applying padding and gap to a Card.
  * @description The padding must live here, and not on the Card itself, as to not inset the scrollbar in case of overflow
- * @param {CardContentProps} props - The props for the CardBody component
+ * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
-export declare const CardBody: ({ density, overflow, children, dataTestId, className, disableGap, }: CardContentProps) => JSX.Element;
+export declare const CardBody: ({ density, overflow, children, dataTestId, className, disableGap, }: CardBodyProps) => JSX.Element;
 export {};

package/components/Card/CardFooter.d.ts

@@ -1,8 +1,14 @@
 import * as React from "react";
 import { CommonProps, Density } from "../../common/CommonProps";
-interface CardFooterProps extends CommonProps {
-    children?: React.ReactNode | null;
+export interface CardFooterProps extends CommonProps {
+    /**
+     * Sets gap, padding and margin.
+     */
     density?: Density;
+    /**
+     * Element to render in the footer
+     */
+    children?: React.ReactNode | null;
 }
 /**
  * A simple footer intended to use with Cards and Modals.
@@ -13,4 +19,3 @@ interface CardFooterProps extends CommonProps {
  * @returns {JSX.Element} CardFooter component
  */
 export declare const CardFooter: ({ dataTestId, className, children, density }: CardFooterProps) => JSX.Element;
-export {};

package/components/Card/CardHeader.d.ts

@@ -1,8 +1,10 @@
 import * as React from "react";
 import { CommonProps, Density } from "../../common/CommonProps";
 import { HeadingVariant } from "../Heading/Heading";
-interface CardHeaderProps extends CommonProps {
-    /** The text to show in the modal main heading */
+export interface CardHeaderProps extends CommonProps {
+    /**
+     * The text to show in the Cards main heading
+     */
     heading: string;
     /**
      * The variant/size of the heading.
@@ -13,12 +15,24 @@ interface CardHeaderProps extends CommonProps {
     headingVariant?: HeadingVariant;
     /** Adds an extra heading below the main heading. */
     subHeading?: string;
-    /** Function to call when the close button is clicked */
-    onClose?: () => void;
-    children?: React.ReactNode | null;
+    /**
+     * Items to render next to the heading
+     */
     accessories?: React.ReactNode;
+    /**
+     * Sets gap, padding and margin.
+     */
     density?: Density;
+    /**
+     * Wether or not a seperator line should be rendered
+     */
     showSeparator?: boolean;
+    /** Function to call when the close button is clicked */
+    onClose?: () => void;
+    /**
+     * Children to render in the header
+     */
+    children?: React.ReactNode | null;
 }
 /**
  * Header for Cards and Modals.
@@ -27,4 +41,3 @@ interface CardHeaderProps extends CommonProps {
  * @returns {JSX.Element} CardHeader component
  */
 export declare const CardHeader: ({ heading, headingVariant, subHeading, onClose, dataTestId, className, children, accessories, density, }: CardHeaderProps) => JSX.Element;
-export {};

package/components/DateField/DateField.d.ts

@@ -1,30 +1,19 @@
 /// <reference types="react" />
-import { Matcher } from "react-day-picker";
-import { BaseInputProps } from "../BaseInput";
-export interface DateFieldProps extends Pick<BaseInputProps, "placeholder" | "id" | "dataTestId" | "onChange" | "readOnly"> {
+import { DateInputProps } from "../DateInput/DateInput";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface DateFieldProps extends DateInputProps, FormGroupExposedProps {
     /**
-     * A text label to be displayed next to the indicator
+     * If a value is set, the field is rendered in its invalid state.
      */
-    label?: string;
-    /**
-     * A text to be displayed under the input with a short description of field purpose
-     */
-    description?: string;
-    /**
-     * A default value to be displayed by a input field
-     */
-    defaultValue?: string;
-    /**
-     * A flag that can be used to disable the input, default value is false
-     */
-    disabled?: boolean;
-    /**
-     * Specification of dates not allowed to be selected - i the form of react-day-picker matcher
-     */
-    disabledDays?: Matcher | Matcher[] | undefined;
-    /**
-     * A flag that can be set to true to disallow the user to deselect a date. (if false the user can click the selected date to deselect)
-     */
-    preventDeselect?: boolean;
+    errorMessage?: string;
 }
+/**
+ * The date field component is used for entering date values.
+ *
+ * _**Do use**_ the DateField for date input.
+ *
+ * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
+ */
 export declare const DateField: import("react").ForwardRefExoticComponent<DateFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/components/DateInput/DateInput.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+import { Matcher } from "react-day-picker";
+import { BaseInputProps } from "../BaseInput";
+declare type BaseInputExposedProps = Omit<BaseInputProps, "defaultValue" | "onChange">;
+export interface DateInputProps extends BaseInputExposedProps {
+    /**
+     * A default value to be displayed by a input field
+     */
+    defaultValue?: Date;
+    /**
+     * Specification of dates not allowed to be selected - i the form of react-day-picker matcher
+     */
+    disabledDays?: Matcher | Matcher[] | undefined;
+    /**
+     * A flag that can be set to true to disallow the user to deselect a date. (if false the user can click the selected date to deselect)
+     */
+    preventDeselect?: boolean;
+    /**
+     * onChange function returning the date instead of input event
+     */
+    onChange?: (date: Date) => void;
+}
+/**
+ * A wrapper around BaseInput with a pop-up day picker.
+ *
+ * NOTE: If shown with a label, please use the `DateField` component instead.
+ */
+export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/components/Menu/MenuItem.d.ts

@@ -49,7 +49,7 @@ export interface MenuItemProps {
     disabled?: boolean;
 }
 /**
- * The MenuItem component should be used to inform the user of important information.
+ * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
  *
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component

package/components/TextArea/TextArea.d.ts

@@ -1,73 +1,16 @@
 import * as React from "react";
-import { CommonProps } from "../../common/CommonProps";
+import { CommonProps } from "../../common";
 export declare type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
-export interface TextAreaProps extends CommonProps {
-    /**
-     * ID of the text area.
-     */
-    id?: string;
-    /**
-     * Name of the text area.
-     */
-    name?: string;
-    /**
-     * Label of the text area.
-     */
-    label?: string;
-    /**
-     * Description of the text area.
-     */
-    description?: string;
-    /**
-     * Information about the text area.
-     */
-    info?: React.ReactNode;
-    /**
-     * Error message of the text area.
-     */
-    error?: React.ReactNode;
-    /**
-     * Value of the text area.
-     */
-    value?: React.ReactText;
-    /**
-     * Tab index specifies the keyboard tab order of the textarea relative to the other controls on the page.
-     */
-    tabIndex?: number;
-    /**
-     * Whether the text area is disabled or not.
-     */
-    disabled?: boolean;
-    /**
-     * Whether the text area is readonly or not.
-     */
-    readOnly?: boolean;
+declare type FilteredInputProps = Omit<React.InputHTMLAttributes<HTMLTextAreaElement>, "prefix" | "suffix">;
+export interface TextAreaProps extends FilteredInputProps, CommonProps {
     /**
      * Number of rows in the text area.
      */
     rows?: number;
-    /**
-     * Placeholder text for the text area.
-     */
-    placeholder?: string;
-    /**
-     * onChange handler of the text area.
-     */
-    onChange?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
-    /**
-     * onFocus handler of the text area.
-     */
-    onFocus?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
-    /**
-     * onBlur handler of the text area.
-     */
-    onBlur?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
-    /**
-     * Maximum length of the text area.
-     */
-    maxLength?: number;
     /**
      * Resize of the text area.
+     *
+     * @default "vertical"
      */
     resize?: TextAreaResize;
     /**
@@ -75,8 +18,13 @@ export interface TextAreaProps extends CommonProps {
      */
     defaultValue?: React.ReactText;
     /**
-     * Whether the text area is required or not.
+     * If true the field is rendered in its invalid state.
      */
-    required?: boolean;
+    isInvalid?: boolean;
 }
+/**
+ * The TextArea is a base component, and should not be used very often.
+ * For most cases the TextAreaField is the correct component.
+ */
 export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/components/TextAreaField/TextAreaField.d.ts

@@ -0,0 +1,18 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { TextAreaProps } from "../TextArea/TextArea";
+declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface TextAreaFieldProps extends TextAreaProps, FormGroupExposedProps, CommonProps {
+    /**
+     * Set the Maximal length of the value for the input.
+     * Adds a TextLengthIndicator to the right of the helpText.
+     */
+    maxLength?: number;
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+export declare const TextAreaField: React.ForwardRefExoticComponent<TextAreaFieldProps & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

package/components/TextAreaField/index.d.ts

@@ -0,0 +1 @@
+export * from "./TextAreaField";

package/components/TextField/TextField.d.ts

@@ -5,7 +5,7 @@ declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "hel
 export interface TextFieldProps extends TextInputProps, FormGroupExposedProps {
     /**
      * Set the Maximal length of the value for the input.
-     * Adds a TextLenghtIndicator to the right of the helpText.
+     * Adds a TextLengthIndicator to the right of the helpText.
      */
     maxLength?: number;
     /**

package/components/index.d.ts

@@ -7,7 +7,8 @@ export * from "./Chart";
 export * from "./Checkbox";
 export * from "./Collapse";
 export * from "./CopyableText";
-export * from "./DateField";
+export * from "./DateField/DateField";
+export * from "./DateInput/DateInput";
 export * from "./DayPicker";
 export * from "./FormGroup/FormGroup";
 export * from "./Heading";
@@ -30,6 +31,7 @@ export * from "./Spinner";
 export * from "./Tag";
 export * from "./Text";
 export * from "./TextArea";
+export * from "./TextAreaField";
 export * from "./TextField";
 export * from "./TextInput/TextInput";
 export * from "./Timeline/Timeline";

package/index.js

@@ -947,8 +947,8 @@ const InputContainer = tw.div`
 
 const ROLE_CARD = "region";
 /**
- * The Card component is a container for ui elements.
- * Is also used for modals etc.
+ * The Card component is a container for ui elements, and is the main component of the modal.
+ * To get the most out of the Card use it in combination with the CardHeader, CardBody and CardFooter.
  *
  * @param {CardProps} props - The props for the Card component
  * @returns {JSX.Element} Card component
@@ -1090,7 +1090,7 @@ ${DensityFinder}
  *
  * @summary For applying padding and gap to a Card.
  * @description The padding must live here, and not on the Card itself, as to not inset the scrollbar in case of overflow
- * @param {CardContentProps} props - The props for the CardBody component
+ * @param {CardBodyProps} props - The props for the CardBody component
  * @returns {JSX.Element} CardBody component
  */
 
@@ -1154,20 +1154,16 @@ const CardFooter = ({
     className: className,
     "$density": density
   }, {
-    children: jsx(StyledFlex$1, {
+    children: jsx(Body, {
       children: children
     })
   }));
 };
 const TopBorderedDensityContainer = tw(DensityContainer)`
-  border-t-2
-  border-neutral-200
+  tu-card__footer-density-container
 `;
-const StyledFlex$1 = tw.div`
-flex
-gap-2
-flex-wrap
-justify-end
+const Body = tw.div`
+  tu-card__footer
 `;
 
 /**
@@ -1281,17 +1277,13 @@ const CardHeader = ({
   }));
 };
 const BottomBorderedDensityContainer = tw(DensityContainer)`
-  border-b-2
-  border-neutral-200`;
+  tu-card__header-density-container
+`;
 const Container$6 = tw.div`
-flex
-justify-between
-items-start
+  tu-card__header
 `;
 const HeadingContainer = tw.div`
-flex
-items-center
-gap-4
+  tu-card__header-heading-container 
 `;
 
 /**
@@ -2000,23 +1992,28 @@ const StyledCardBody = tw(CardBody)`
   max-h-full
 `;
 
-const DateField = forwardRef(({
-  defaultValue,
-  onChange,
-  disabled = false,
-  readOnly = false,
-  id,
-  dataTestId,
-  placeholder,
-  disabledDays,
-  preventDeselect = false
-}, ref) => {
-  const [selectedDay, setSelectedDay] = useState(defaultValue ? new Date(defaultValue) : undefined);
+/**
+ * A wrapper around BaseInput with a pop-up day picker.
+ *
+ * NOTE: If shown with a label, please use the `DateField` component instead.
+ */
+
+const DateInput = forwardRef((_a, ref) => {
+  var {
+    defaultValue,
+    disabledDays,
+    disabled,
+    preventDeselect,
+    onChange
+  } = _a,
+      rest = __rest(_a, ["defaultValue", "disabledDays", "disabled", "preventDeselect", "onChange"]);
+
+  const [selectedDay, setSelectedDay] = useState(defaultValue);
   const onChangeHandler = useCallback(value => {
     const newValue = (value === null || value === void 0 ? void 0 : value.toLocaleDateString()) === (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) && !preventDeselect ? undefined : value;
     setSelectedDay(newValue);
     onChange === null || onChange === void 0 ? void 0 : onChange(newValue);
-  }, [setSelectedDay, onChange, selectedDay, preventDeselect]);
+  }, [selectedDay, preventDeselect, onChange]);
   const target = useRef(null);
   const popover = useRef(null);
   const {
@@ -2031,15 +2028,11 @@ const DateField = forwardRef(({
     placement: "bottom"
   });
   return jsxs(Fragment, {
-    children: [jsx(BaseInput, {
-      placeholder: placeholder,
-      value: (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) || "",
-      onChange: () => {},
-      disabled: disabled,
-      readOnly: readOnly,
-      dataTestId: dataTestId,
-      id: id,
+    children: [jsx(BaseInput, Object.assign({
       ref: ref,
+      value: (selectedDay === null || selectedDay === void 0 ? void 0 : selectedDay.toLocaleDateString()) || "",
+      onChange: () => {}
+    }, rest, {
       suffix: jsx(Icon$1, {
         dataTestId: "calendar",
         name: "CalendarIcon",
@@ -2058,8 +2051,9 @@ const DateField = forwardRef(({
             size: "small"
           })
         }))
-      })
-    }), jsx(AnimatedPopover, Object.assign({
+      }),
+      onClick: e => e.preventDefault()
+    })), jsx(AnimatedPopover, Object.assign({
       ref: popoverRef,
       onRequestClose: () => {
         var _a;
@@ -2083,6 +2077,34 @@ const RemoveValueContainer = tw.div`
 tu-date__remove
   `;
 
+/**
+ * The Label component is used for labels for input fields.
+ * This component is **not used directly**, but is part of the FormGroup and Field components.
+ *
+ * @param {LabelProps} props - The props for the Label component
+ * @returns {JSX.Element} Label component
+ */
+
+const Label$5 = ({
+  id,
+  htmlFor,
+  children,
+  className,
+  dataTestId
+}) => {
+  return jsx(Root$2, Object.assign({
+    className: className,
+    id: id,
+    "data-testid": dataTestId,
+    htmlFor: htmlFor
+  }, {
+    children: children
+  }));
+};
+const Root$2 = tw.label`
+  tu-label
+`;
+
 /**
  * The PopoverListItem component.
  *
@@ -2198,143 +2220,6 @@ const StyledText$1 = tw(Text)`
   text-neutral-500
 `;
 
-/**
- * The DayPickerPopover component returns a button which when clicked shows the daypicker.
- *
- * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
- * @returns {JSX.Element} DayPickerPopover component
- */
-
-const DayPickerPopover = ({
-  disabledDays,
-  className,
-  selectedDay,
-  onDaySelect,
-  intent = "secondary",
-  placement = "bottom",
-  size = "small",
-  buttonContent,
-  language
-}) => {
-  const target = useRef(null);
-  const popover = useRef(null);
-  const {
-    popoverRef,
-    targetRef,
-    onShow,
-    onHide,
-    popoverProps
-  } = usePopover({
-    targetRef: target,
-    popoverRef: popover,
-    placement: placement
-  });
-  return jsxs(Fragment$1, {
-    children: [jsx(Button, Object.assign({
-      intent: intent,
-      size: size,
-      className: className,
-      prefix: jsx(Icon$1, {
-        name: "CalendarIcon",
-        size: "small"
-      }),
-      ref: targetRef,
-      onClick: onShow
-    }, {
-      children: buttonContent
-    })), jsx(AnimatedPopover, Object.assign({
-      ref: popoverRef,
-      onRequestClose: () => {
-        var _a;
-
-        onHide();
-        (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.blur();
-      }
-    }, popoverProps, {
-      children: jsx(PopoverList, {
-        children: jsx(DayPicker, {
-          disabledDays: disabledDays,
-          onDaySelect: onDaySelect,
-          selectedDays: selectedDay,
-          language: language
-        })
-      })
-    }))]
-  });
-};
-
-/**
- * The DayRangePicker component should be used when the user needs to select a range of dates.
- *
- * @param {DayRangePickerProps} props - The props for the DayRangePicker component
- * @returns {JSX.Element} DayRangePicker component
- */
-
-const DayRangePicker = ({
-  onRangeSelect,
-  selectedDays,
-  disabledDays,
-  dataTestId,
-  language
-}) => {
-  const locale = useLocale(language);
-  const onSelect = useCallback(range => {
-    if (onRangeSelect && range === undefined) {
-      onRangeSelect(undefined);
-    }
-
-    if (onRangeSelect && range) {
-      const from = range.from;
-      const to = range.to ? range.to : range.from;
-      onRangeSelect({
-        from,
-        to
-      });
-    }
-  }, [onRangeSelect]);
-  return jsx("div", Object.assign({
-    "data-testid": dataTestId
-  }, {
-    children: jsx(DayPicker$1, {
-      mode: "range",
-      onSelect: onSelect,
-      selected: selectedDays,
-      defaultMonth: selectedDays && selectedDays.from,
-      locale: locale,
-      disabled: disabledDays,
-      className: "custom-day-picker range-picker"
-    })
-  }));
-};
-
-/**
- * The Label component is used for labels for input fields.
- * This component is **not used directly**, but is part of the FormGroup and Field components.
- *
- * @param {LabelProps} props - The props for the Label component
- * @returns {JSX.Element} Label component
- */
-
-const Label$5 = ({
-  id,
-  htmlFor,
-  children,
-  className,
-  dataTestId
-}) => {
-  return jsx(Root$2, Object.assign({
-    className: className,
-    id: id,
-    "data-testid": dataTestId,
-    htmlFor: htmlFor
-  }, {
-    children: children
-  }));
-};
-const Root$2 = tw.label`
-  tu-label
-`;
-
 /**
  * The Tooltip component.
  *
@@ -2510,6 +2395,157 @@ const HelpAddon = tw.span`
   tu-form-group__help-addon 
 `;
 
+/**
+ * The date field component is used for entering date values.
+ *
+ * _**Do use**_ the DateField for date input.
+ *
+ * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
+ */
+
+const DateField = forwardRef((_a, ref) => {
+  var {
+    label,
+    tip,
+    helpText,
+    errorMessage,
+    helpAddon,
+    isInvalid,
+    className,
+    defaultValue,
+    dataTestId
+  } = _a,
+      rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "className", "defaultValue", "dataTestId"]);
+
+  const renderAsInvalid = isInvalid || Boolean(errorMessage);
+  return jsx(FormGroup, Object.assign({
+    label: label,
+    tip: tip,
+    isInvalid: renderAsInvalid,
+    helpText: errorMessage || helpText,
+    helpAddon: helpAddon,
+    dataTestId: `${dataTestId}-FormGroup`
+  }, {
+    children: jsx(DateInput, Object.assign({
+      ref: ref,
+      defaultValue: defaultValue,
+      isInvalid: renderAsInvalid
+    }, rest, {
+      className: className,
+      dataTestId: dataTestId
+    }))
+  }));
+});
+
+/**
+ * The DayPickerPopover component returns a button which when clicked shows the daypicker.
+ *
+ * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
+ * @returns {JSX.Element} DayPickerPopover component
+ */
+
+const DayPickerPopover = ({
+  disabledDays,
+  className,
+  selectedDay,
+  onDaySelect,
+  intent = "secondary",
+  placement = "bottom",
+  size = "small",
+  buttonContent,
+  language
+}) => {
+  const target = useRef(null);
+  const popover = useRef(null);
+  const {
+    popoverRef,
+    targetRef,
+    onShow,
+    onHide,
+    popoverProps
+  } = usePopover({
+    targetRef: target,
+    popoverRef: popover,
+    placement: placement
+  });
+  return jsxs(Fragment$1, {
+    children: [jsx(Button, Object.assign({
+      intent: intent,
+      size: size,
+      className: className,
+      prefix: jsx(Icon$1, {
+        name: "CalendarIcon",
+        size: "small"
+      }),
+      ref: targetRef,
+      onClick: onShow
+    }, {
+      children: buttonContent
+    })), jsx(AnimatedPopover, Object.assign({
+      ref: popoverRef,
+      onRequestClose: () => {
+        var _a;
+
+        onHide();
+        (_a = targetRef === null || targetRef === void 0 ? void 0 : targetRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    }, popoverProps, {
+      children: jsx(PopoverList, {
+        children: jsx(DayPicker, {
+          disabledDays: disabledDays,
+          onDaySelect: onDaySelect,
+          selectedDays: selectedDay,
+          language: language
+        })
+      })
+    }))]
+  });
+};
+
+/**
+ * The DayRangePicker component should be used when the user needs to select a range of dates.
+ *
+ * @param {DayRangePickerProps} props - The props for the DayRangePicker component
+ * @returns {JSX.Element} DayRangePicker component
+ */
+
+const DayRangePicker = ({
+  onRangeSelect,
+  selectedDays,
+  disabledDays,
+  dataTestId,
+  language
+}) => {
+  const locale = useLocale(language);
+  const onSelect = useCallback(range => {
+    if (onRangeSelect && range === undefined) {
+      onRangeSelect(undefined);
+    }
+
+    if (onRangeSelect && range) {
+      const from = range.from;
+      const to = range.to ? range.to : range.from;
+      onRangeSelect({
+        from,
+        to
+      });
+    }
+  }, [onRangeSelect]);
+  return jsx("div", Object.assign({
+    "data-testid": dataTestId
+  }, {
+    children: jsx(DayPicker$1, {
+      mode: "range",
+      onSelect: onSelect,
+      selected: selectedDays,
+      defaultMonth: selectedDays && selectedDays.from,
+      locale: locale,
+      disabled: disabledDays,
+      className: "custom-day-picker range-picker"
+    })
+  }));
+};
+
 /**
  * Indicators are non-interactive elements that communicate essential aspects of the state of an asset.
  *
@@ -2705,7 +2741,7 @@ const MobileIconButton = tw(IconButton)`
 `;
 
 /**
- * The MenuItem component should be used to inform the user of important information.
+ * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
  *
  * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
@@ -3468,7 +3504,7 @@ const SelectContainer = ({
       htmlFor: id
     }, {
       children: label
-    })), children, (hasError || info) && jsx(InformativeText$1, Object.assign({
+    })), children, (hasError || info) && jsx(InformativeText, Object.assign({
       size: "small",
       "$hasError": hasError !== null && hasError !== void 0 ? hasError : false
     }, {
@@ -3479,7 +3515,7 @@ const SelectContainer = ({
 const Container = tw.label`
   tu-select__container
 `;
-const InformativeText$1 = tw(Text)`
+const InformativeText = tw(Text)`
   tu-informative-text
   ${p => p.$hasError ? `tu-informative-text--error` : null}
 `;
@@ -3758,87 +3794,63 @@ const SkeletonLine = tw.div`
   tu-skeleton-line
 `;
 
-const TextArea = React.forwardRef(({
-  id,
-  name,
-  label,
-  description,
-  info,
-  error,
-  value,
-  rows,
-  disabled,
-  placeholder,
-  readOnly,
-  tabIndex,
-  onChange,
-  onFocus,
-  onBlur,
-  maxLength,
-  resize = "vertical",
-  defaultValue,
-  className,
-  required,
-  dataTestId
-}, ref) => {
-  const hasError = !!error;
-  return jsxs(TextAreaContainer, Object.assign({
-    className: className
-  }, {
-    children: [jsx(Label$5, Object.assign({
-      htmlFor: id
-    }, {
-      children: label
-    })), jsx(StyledTextArea, {
-      name: name,
-      id: id,
-      "data-testid": dataTestId,
-      value: value,
-      rows: rows,
-      disabled: disabled,
-      placeholder: placeholder,
-      readOnly: readOnly,
-      tabIndex: tabIndex,
-      onChange: onChange,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      maxLength: maxLength,
-      "$resize": resize,
-      "$hasError": hasError,
-      ref: ref,
-      defaultValue: defaultValue,
-      required: required
-    }), (hasError || info) && jsx(InformativeText, Object.assign({
-      size: "small",
-      "$hasError": hasError
-    }, {
-      children: hasError ? error : info
-    }))]
+/**
+ * The TextArea is a base component, and should not be used very often.
+ * For most cases the TextAreaField is the correct component.
+ */
+
+const TextArea = React.forwardRef((_a, ref) => {
+  var {
+    id,
+    name,
+    value,
+    rows,
+    disabled,
+    placeholder,
+    readOnly,
+    tabIndex,
+    onChange,
+    onFocus,
+    onBlur,
+    maxLength,
+    resize = "vertical",
+    defaultValue,
+    className,
+    required,
+    dataTestId,
+    isInvalid
+  } = _a,
+      rest = __rest(_a, ["id", "name", "value", "rows", "disabled", "placeholder", "readOnly", "tabIndex", "onChange", "onFocus", "onBlur", "maxLength", "resize", "defaultValue", "className", "required", "dataTestId", "isInvalid"]);
+
+  return jsx(StyledTextArea, Object.assign({
+    name: name,
+    value: value,
+    rows: rows,
+    disabled: disabled,
+    placeholder: placeholder,
+    readOnly: readOnly,
+    tabIndex: tabIndex,
+    onFocus: onFocus,
+    onBlur: onBlur,
+    maxLength: maxLength,
+    "$resize": resize,
+    "$invalid": isInvalid,
+    ref: ref,
+    defaultValue: defaultValue,
+    required: required
+  }, rest, {
+    onChange: onChange,
+    "data-testId": dataTestId
   }));
 });
-const TextAreaContainer = tw.div``;
 const StyledTextArea = tw.textarea`
-  input
-  w-full
-  block
-  p-2
-  overflow-auto
-  appearance-none
-  text-base
-  text-slate-900
-  placeholder-slate-400
-  focus-visible:outline-none
-  border-box
-  h-20
-
-  transition
-
+  tu-textarea
   ${({
-  $hasError
-}) => $hasError ? tws`tu-input--invalid` : null}
+  $invalid
+}) => $invalid ? tws`tu-textarea--invalid` : null}
   ${({
   disabled
-}) => disabled ? tws`tu-input--disabled` : null}
+}) => disabled ? tws`tu-textarea--disabled` : null}
   ${({
   $resize
 }) => {
@@ -3859,24 +3871,7 @@ const StyledTextArea = tw.textarea`
       return null;
   }
 }};
-
-
 `;
-const InformativeText = tw(Text)`
-  mt-1
-  ${p => p.$hasError ? tws`text-red-500` : tws`text-neutral-600`};
-`;
-
-/**
- * A thin wrapper around the `BaseInput` component for text input fields.
- *
- * NOTE: If shown with a label, please use the `TextField` component instead.
- */
-
-const TextInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
-  ref: ref,
-  type: "text"
-}, props)));
 
 /**
  * The TextLengthIndicator component shows a `{length}/{maxLength}` label.
@@ -3898,6 +3893,67 @@ const Root = tw.span`
  font-mono
 `;
 
+const TextAreaField = React.forwardRef((_a, ref) => {
+  var {
+    label,
+    tip,
+    helpText,
+    helpAddon,
+    errorMessage,
+    isInvalid,
+    maxLength,
+    onChange,
+    className,
+    value,
+    dataTestId
+  } = _a,
+      rest = __rest(_a, ["label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
+
+  const [valueLength, setValueLength] = React.useState(value ? `${value}`.length : 0);
+  const renderAsInvalid = isInvalid || Boolean(errorMessage);
+  const handleChange = React.useCallback(event => {
+    setValueLength(event.target.value.length);
+
+    if (onChange) {
+      onChange(event);
+    }
+  }, [onChange]);
+  return jsx(FormGroup, Object.assign({
+    label: label,
+    tip: tip,
+    isInvalid: renderAsInvalid,
+    helpText: errorMessage || helpText,
+    helpAddon: helpAddon || maxLength !== null && maxLength !== undefined && jsx(TextLengthIndicator, {
+      length: valueLength,
+      maxLength: maxLength
+    }),
+    className: className,
+    dataTestId: `${dataTestId}-FormGroup`
+  }, {
+    children: jsx(TextArea, Object.assign({
+      ref: ref,
+      maxLength: maxLength,
+      value: value,
+      isInvalid: renderAsInvalid
+    }, rest, {
+      className: className,
+      onChange: handleChange,
+      dataTestId: dataTestId
+    }))
+  }));
+});
+
+/**
+ * A thin wrapper around the `BaseInput` component for text input fields.
+ *
+ * NOTE: If shown with a label, please use the `TextField` component instead.
+ */
+
+const TextInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
+  ref: ref,
+  type: "text"
+}, props)));
+
 /**
  * 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.
  *
@@ -4506,4 +4562,4 @@ const Layout = tw.div`
   tu-layout-TwoColumnLayout
 `;
 
-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 };
+export { Alert, AnimatedPopover, Badge, BaseInput, Button, Card, CardBody, CardFooter, CardHeader, Chart, Checkbox, Collapse, CopyableText, CreatableSelect, DateField, DateInput, 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

@@ -1,6 +1,6 @@
 {
   "name": "@trackunit/react-components",
-  "version": "0.0.98",
+  "version": "0.0.101",
   "repository": "https://github.com/Trackunit/manager",
   "license": "UNLICENSED",
   "dependencies": {

package/components/DateField/index.d.ts

@@ -1 +0,0 @@
-export * from "./DateField";