@trackunit/react-components 0.0.99 → 0.0.100

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/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

@@ -30,6 +30,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 
 `;
 
 /**
@@ -3468,7 +3460,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 +3471,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 +3750,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,25 +3827,8 @@ 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.
  * Used for TextFields to communicate a maximum allowed input length.
@@ -3898,6 +3849,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 +4518,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, 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.99",
+  "version": "0.0.100",
   "repository": "https://github.com/Trackunit/manager",
   "license": "UNLICENSED",
   "dependencies": {