@trackunit/react-components 0.0.89 → 0.0.99

package/components/Chart/Chart.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
+import { CommonProps } from "../../common";
 export interface IOptionsType {
     [key: string]: any;
 }
-export interface ChartProps {
+export interface ChartProps extends CommonProps {
     /**
      * Option values for EChart.
      */
@@ -31,10 +32,6 @@ export interface ChartProps {
      * Event fired when mouse leaves the chart.
      */
     mouseLeaveChart?: () => void;
-    /**
-     * Class values to be passed to the component.
-     */
-    className?: string;
     /**
      * CSS styles for the chart.
      */

package/components/Collapse/Collapse.d.ts

@@ -20,7 +20,7 @@ export interface CollapseProps extends CommonProps {
     label: React.ReactNode;
 }
 /**
- * The Collapse component is ued to condense non-important information.
+ * The Collapse component is used to condense non-important information.
  *
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component

package/components/CopyableText/CopyableText.d.ts

@@ -1,17 +1,16 @@
 /// <reference types="react" />
-interface CopyableTextProps {
+import { CommonProps } from "../../common";
+export interface CopyableTextProps extends CommonProps {
     /**
-     * The text to be displayed.
+     * The text shown in the ui.
+     * By default this is also the text that gets copied when component is clicked.
      */
     text?: string;
     /**
-     * Alternative text to be displayed.
+     * Alternative text to get copied to on click.
+     * This text is not visible in the ui.
      */
     alternativeText?: string;
-    /**
-     * ID of the component to be used while testing.
-     */
-    dataTestId?: string;
 }
 /**
  * The CopyableText component is used where the user should have easy access to copy some information.
@@ -20,4 +19,3 @@ interface CopyableTextProps {
  * @returns {JSX.Element} CopyableText component
  */
 export declare const CopyableText: ({ text, alternativeText, dataTestId }: CopyableTextProps) => JSX.Element;
-export {};

package/components/Label/Label.d.ts

@@ -8,22 +8,17 @@ export interface LabelProps extends CommonProps {
     /**
      * Specifies the element to which the label belongs to.
      */
-    htmlFor: string | false;
+    htmlFor?: string;
     /**
      * The label value.
      */
-    label?: React.ReactNode;
-    /**
-     *  Description for the label.
-     */
-    description?: React.ReactNode;
+    children?: React.ReactNode;
 }
 /**
  * The Label component is used for labels for input fields.
- *
- * **Have a look at the FormGroup first**
+ * 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
  */
-export declare const Label: ({ id, htmlFor, label, description, className, dataTestId }: LabelProps) => JSX.Element;
+export declare const Label: ({ id, htmlFor, children, className, dataTestId }: LabelProps) => JSX.Element;

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/Tip/Tip.d.ts

@@ -7,7 +7,13 @@ export interface TipProps extends CommonProps {
      * Child nodes to render inside the tip.
      */
     children: React.ReactNode;
+    /**
+     * The props for setting the icon on this tip.
+     */
     iconProps?: Partial<IconProps>;
+    /**
+     * The props for setting the tooltip on this tip.
+     */
     tooltipProps?: Partial<TooltipProps>;
 }
 /**

package/components/index.d.ts

@@ -17,7 +17,6 @@ export * from "./Label";
 export * from "./LegendItem";
 export * from "./Menu";
 export * from "./Modal";
-export * from "./MultiRowTableCell";
 export * from "./NumberField/NumberField";
 export * from "./NumberInput/NumberInput";
 export * from "./PageHeading";

package/index.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { tw, tws } from '@trackunit/tailwind-styled-components';
 import * as React from 'react';
-import { useMemo, useState, forwardRef, useCallback, useRef, Fragment as Fragment$1, createElement, useContext, useEffect, memo } from 'react';
+import { useState, forwardRef, useCallback, useRef, Fragment as Fragment$1, createElement, useContext, useEffect, memo } from 'react';
 import { HeroIconsArray, heroIconLookup, TrackunitSolidIconsArray, TrackunitOutlineIconsArray, trackunitIconLookup } from '@trackunit/ui-icons';
 import EChart from 'echarts-for-react';
 import { v4 } from 'uuid';
@@ -650,7 +650,7 @@ const Alert = ({
       weight: "bold"
     }, {
       children: title !== null && title !== void 0 ? title : children
-    })), children && jsx(Description$3, Object.assign({
+    })), children && jsx(Description$2, Object.assign({
       weight: !title ? "bold" : "default",
       "$hasTitle": !!title
     }, {
@@ -661,7 +661,7 @@ const Alert = ({
       weight: "bold"
     }, {
       children: title !== null && title !== void 0 ? title : children
-    })), children && jsx(Description$3, Object.assign({
+    })), children && jsx(Description$2, Object.assign({
       weight: !title ? "bold" : "default",
       "$hasTitle": !!title
     }, {
@@ -688,7 +688,26 @@ const Alert = ({
     })), jsxs(Content$1, Object.assign({
       "$inline": inline
     }, {
-      children: [body, (primaryAction || secondaryAction) && jsxs(RightAligned, Object.assign({
+      children: [jsxs(ContentDetails, {
+        children: [jsx(ContentBody, {
+          children: body
+        }), onClose && !inline ? jsx(CloseButtonContainer, Object.assign({
+          "$inline": inline
+        }, {
+          children: jsx(IconButton, {
+            size: "small",
+            variant: "transparent",
+            intent: "secondary",
+            onClick: onClose,
+            icon: jsx(Icon$1, {
+              name: "XIcon",
+              size: "small"
+            }),
+            title: "Close Alert",
+            circular: true
+          })
+        })) : null]
+      }), (primaryAction || secondaryAction || onClose) && jsxs(RightAligned, Object.assign({
         "$inline": inline
       }, {
         children: [secondaryAction && jsx(Button, Object.assign({
@@ -706,24 +725,24 @@ const Alert = ({
           loading: primaryAction === null || primaryAction === void 0 ? void 0 : primaryAction.loading
         }, {
           children: primaryAction.label
-        }))]
+        })), onClose && inline ? jsx(CloseButtonContainer, Object.assign({
+          "$inline": inline
+        }, {
+          children: jsx(IconButton, {
+            size: "small",
+            variant: "transparent",
+            intent: "secondary",
+            onClick: onClose,
+            icon: jsx(Icon$1, {
+              name: "XIcon",
+              size: "small"
+            }),
+            title: "Close Alert",
+            circular: true
+          })
+        })) : null]
       }))]
-    })), onClose ? jsx(CloseButtonContainer, Object.assign({
-      "$inline": inline
-    }, {
-      children: jsx(IconButton, {
-        size: "small",
-        variant: "transparent",
-        intent: "secondary",
-        onClick: onClose,
-        icon: jsx(Icon$1, {
-          name: "XIcon",
-          size: "small"
-        }),
-        title: "Close Alert",
-        circular: true
-      })
-    })) : null]
+    }))]
   }));
 };
 const CloseButtonContainer = tw.div`
@@ -750,7 +769,13 @@ const Container$7 = tw.div`
 const Content$1 = tw.div`
   ${p => p.$inline ? tws`tu-alert__content--inline` : tws`tu-alert__content`}
 `;
-const Description$3 = tw(Text)`
+const ContentDetails = tw.div`
+  tu-alert__content-details
+`;
+const ContentBody = tw.div`
+  tu-alert__content-body
+`;
+const Description$2 = tw(Text)`
   ${p => p.$hasTitle ? tws`tu-alert__description` : null}
 `;
 const RightAligned = tw.div`
@@ -1554,7 +1579,7 @@ ${({
 `;
 
 /**
- * The Collapse component is ued to condense non-important information.
+ * The Collapse component is used to condense non-important information.
  *
  * @param {CollapseProps} props - The props for the Collapse component
  * @returns {JSX.Element} Collapse component
@@ -1680,11 +1705,9 @@ const CopyableText = ({
   alternativeText,
   dataTestId
 }) => {
-  const value = useMemo(() => {
-    var _a;
+  var _a;
 
-    return (_a = alternativeText !== null && alternativeText !== void 0 ? alternativeText : text) !== null && _a !== void 0 ? _a : "";
-  }, [alternativeText, text]);
+  const value = (_a = alternativeText !== null && alternativeText !== void 0 ? alternativeText : text) !== null && _a !== void 0 ? _a : "";
   const [animating, setAnimating] = useState(false);
   const [, copyToClipboard] = useCopyToClipboard();
 
@@ -1693,16 +1716,17 @@ const CopyableText = ({
     setAnimating(true);
   };
 
-  return jsx(CopyableTextContainer, Object.assign({
+  return jsx(StyledCopyableText, Object.assign({
     "data-testid": dataTestId,
     onClick: handleOnClick,
     onAnimationEnd: () => setAnimating(false),
-    "$animating": animating
+    "$animating": animating,
+    title: value
   }, {
     children: text
   }));
 };
-const CopyableTextContainer = tw.span`
+const StyledCopyableText = tw.span`
   py-1
   px-2
   border
@@ -2283,6 +2307,34 @@ const DayRangePicker = ({
   }));
 };
 
+/**
+ * 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.
  *
@@ -2381,7 +2433,7 @@ const Tip = _a => {
       label: children,
       dataTestId: `${dataTestId}-tooltip`
     }, tooltipProps, {
-      className: `${(_b = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className) !== null && _b !== void 0 ? _b : ""} ${tws`inline-flex`}`
+      className: `${(_b = tooltipProps === null || tooltipProps === void 0 ? void 0 : tooltipProps.className) !== null && _b !== void 0 ? _b : ""} tu-tip-tooltip`
     }, {
       children: jsx(Icon$1, Object.assign({
         name: "QuestionMarkCircleIcon",
@@ -2418,7 +2470,7 @@ const FormGroup = ({
     "data-testid": dataTestId
   }, {
     children: [jsxs(ContainerBefore, {
-      children: [jsx(StyledTitle, Object.assign({
+      children: [jsx(Label$5, Object.assign({
         "data-testid": `${dataTestId}-label`
       }, {
         children: label
@@ -2444,14 +2496,6 @@ const FormGroup = ({
 };
 const FormGroupRoot = tw.label`
   tu-form-group
-`; // TODO: Update and use Label component instead
-
-const StyledTitle = tw.span`
-  block 
-  text-sm
-  text-slate-700
-  font-medium
-  mb-1
 `;
 const ContainerBefore = tw.div`
   tu-form-group__container-before
@@ -2498,7 +2542,7 @@ const Indicator$1 = _a => {
       "$withBackground": withBackground
     }, {
       children: icon
-    })), label !== undefined && jsx(Label$5, Object.assign({
+    })), label !== undefined && jsx(Label$4, Object.assign({
       "data-testid": dataTestId ? `${dataTestId}-label` : "indicator-label"
     }, {
       children: label
@@ -2567,52 +2611,10 @@ const IconBackground = tw.div`
   return $withBackground ? "" : "tu-indicator__icon-background--none";
 }}
 `;
-const Label$5 = tw.div`
+const Label$4 = tw.div`
   tu-indicator__label
 `;
 
-/**
- * The Label component is used for labels for input fields.
- *
- * **Have a look at the FormGroup first**
- *
- * @param {LabelProps} props - The props for the Label component
- * @returns {JSX.Element} Label component
- */
-
-const Label$4 = ({
-  id,
-  htmlFor,
-  label,
-  description,
-  className,
-  dataTestId
-}) => {
-  const labelElement = jsx(Text, Object.assign({
-    weight: "thick",
-    className: className,
-    dataTestId: dataTestId
-  }, {
-    children: label
-  }));
-
-  return jsxs(Fragment, {
-    children: [htmlFor === false ? labelElement : jsx("label", Object.assign({
-      id: id,
-      htmlFor: htmlFor
-    }, {
-      children: labelElement
-    })), jsx(Description$2, Object.assign({
-      subtle: true
-    }, {
-      children: description
-    }))]
-  });
-};
-const Description$2 = tw(Text)`
-  tu-label
-`;
-
 /**
  * The LegendItem component is used to show form legends.
  *
@@ -2630,7 +2632,7 @@ const LegendItem = ({
   dataTestId
 }) => {
   const handleOnClick = onClick && !disabled ? () => onClick() : undefined;
-  return jsxs(Root$2, Object.assign({
+  return jsxs(Root$1, Object.assign({
     "data-testid": dataTestId,
     disabled: disabled,
     className: className,
@@ -2646,7 +2648,7 @@ const LegendItem = ({
     })]
   }));
 };
-const Root$2 = tw.div`
+const Root$1 = tw.div`
   inline-flex
   items-center
   transition-all
@@ -2703,7 +2705,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
@@ -3005,382 +3007,104 @@ const useModal = ({
 };
 
 /**
- * The MinTopFullContentLayout component.
+ * A thin wrapper around the `BaseInput` component for number input fields.
  *
- * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
- * @returns {JSX.Element} MinTopFullContentLayout component
+ * NOTE: If shown with a label, please use the `NumberField` component instead.
  */
 
-const MinTopFullContentLayout = ({
-  children,
-  className,
-  dataTestId
-}) => jsx(Layout$5, Object.assign({
-  className: className,
-  "data-testid": dataTestId
-}, {
-  children: children
-}));
-const Layout$5 = tw.span`
-  grid
-  h-full
-  grid-rows-min-fr
-`;
+const NumberInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
+  ref: ref,
+  type: "number"
+}, props)));
 
 /**
- * Responsive layout component setting up three grid areas
- * one for filtering, (result-)list and (result-map)
- *
- * List needs to handle its own min size - and map takes up the rest.
- *
- * Will be inlined to
- *  - filter
- *  - list
- *  - map
- * on screens < mediaQuery.xxl
+ * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
  *
+ * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
  *
- * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
- * @returns {JSX.Element} FilterListMapLayout component
+ * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
  */
 
-const FilterListMapLayout = ({
-  children
-}) => jsx(Layout$4, {
-  children: children
-});
-const Layout$4 = tw.span`
-  tu-layout-FilterListMap 
-`;
-
-/**
- * Layout component with repeating full width areas, default one height fraction each but option to use content height instead
- * Row min height can optionally be set here or managed by children
- * Scrolling happens if/when children's a min-height is reached
- *
- * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
- * @returns {JSX.Element} FullWidthRepeatingLayout component
- */
+const NumberField = forwardRef((_a, ref) => {
+  var {
+    label,
+    tip,
+    helpText,
+    errorMessage,
+    helpAddon,
+    isInvalid,
+    maxLength,
+    className,
+    value,
+    dataTestId
+  } = _a,
+      rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "dataTestId"]);
 
-const FullWidthRepeatingLayout = ({
-  children,
-  rowSizing = "Unmanaged",
-  rowMinHeight,
-  dataTestId,
-  className
-}) => jsx(Layout$3, Object.assign({
-  "data-testid": dataTestId,
-  className: className,
-  "$rowSizing": rowSizing,
-  "$rowMinHeight": rowMinHeight !== null && rowMinHeight !== void 0 ? rowMinHeight : 0
-}, {
-  children: children
-}));
-const Layout$3 = tw.span`
-  tu-layout-FullWidthRepeatingLayout
+  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(NumberInput, Object.assign({
+      ref: ref,
+      maxLength: maxLength,
+      value: value,
+      isInvalid: renderAsInvalid
+    }, rest, {
+      className: className,
+      dataTestId: dataTestId
+    }))
+  }));
+});
 
-  ${({
-  $rowSizing
+const GetSpacerHeight = () => ({
+  minHeight
 }) => {
-  switch ($rowSizing) {
-    case "MinContent":
-      return tws` tu-layout-FullWidthRepeatingLayout--MinContent`;
+  if (!minHeight) {
+    return "";
+  }
 
-    case "Equal":
-      return tws` tu-layout-FullWidthRepeatingLayout--Equal`;
+  switch (minHeight) {
+    case "normal":
+      return tws`min-h-[8px]`;
+
+    case "large":
+      return tws`min-h-[32px]`;
 
-    case "Unmanaged":
     default:
-      return null;
+      return "";
   }
-}}
-`;
-
+};
 /**
- * Simply applies a Grid Area to the element
+ * The Spacer component is used for adding a bit of space.
  *
- * @param {GridAreaProps} props - The props for the GridArea component
- * @returns {JSX.Element} GridArea component
+ * @param {SpacerProps} props - The props for the Spacer component
+ * @returns {JSX.Element} Spacer component
  */
 
-const GridArea = ({
-  area,
-  dataTestId,
-  className,
-  children
-}) => jsx("section", Object.assign({
-  className: className,
-  "data-testid": dataTestId,
-  style: {
-    gridArea: area
-  }
-}, {
-  children: children
-}));
+
+const Spacer = ({
+  minHeight = "",
+  border,
+  dataTestId
+}) => {
+  return jsx(Space, {
+    "data-testid": dataTestId,
+    minHeight: minHeight,
+    border: border
+  });
+};
+const Space = tw.div`
+${p => `${p.border ? `tu-spacer--border` : null}`}
+${GetSpacerHeight()}
+`;
 
 /**
- * A grid container that has a flexible number of columns.
- * Adds more columns if constraints allow it, otherwise wraps to next row
- *
- * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
- * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
- */
-
-const IntrinsicallyResponsiveGrid = ({
-  children,
-  occupation = "auto-fill",
-  minColumnWidth = "normal",
-  gap = "auto",
-  dataTestId,
-  className
-}) => jsx(Layout$2, Object.assign({
-  "$minColumnWidth": minColumnWidth,
-  "data-testid": dataTestId,
-  "$gap": gap,
-  "$occupation": occupation,
-  className: className
-}, {
-  children: children
-}));
-const Layout$2 = tw.span`
-  tu-layout-IntrinsicallyResponsiveGrid
-  ${({
-  $occupation
-}) => {
-  switch ($occupation) {
-    case "auto-fit":
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--fit`;
-
-    case "auto-fill":
-    default:
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--fill`;
-  }
-}}
-
-  ${({
-  $minColumnWidth
-}) => {
-  switch ($minColumnWidth) {
-    case "slim":
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--slim`;
-
-    case "narrow":
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--narrow`;
-
-    case "wide":
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--wide`;
-
-    case "normal":
-    default:
-      return tws`tu-layout-IntrinsicallyResponsiveGrid--normal`;
-  }
-}}
-  
-  ${({
-  $gap
-}) => {
-  switch ($gap) {
-    case "tiny":
-      return tws`gap-1`;
-
-    case "mini":
-      return tws`gap-2`;
-
-    case "small":
-      return tws`gap-3`;
-
-    case "medium":
-      return tws`gap-4`;
-
-    case "large":
-      return tws`gap-6`;
-
-    case "giant":
-      return tws`gap-8`;
-
-    case "enormous":
-      return tws`gap-10`;
-
-    case "none":
-      return tws`gap-0`;
-
-    case "inherit":
-      return tws`gap-[inherit]`;
-
-    case "auto":
-    default:
-      return tws`gap-3 sm:gap-4 md:gap-6`;
-  }
-}};
-`;
-
-/**
- * The TitleNavContentLayout.
- *
- * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
- * @returns {JSX.Element} TitleNavContentLayout component
- */
-
-const TitleNavContentLayout = ({
-  children
-}) => jsx(Layout$1, {
-  children: children
-});
-const Layout$1 = tw.div`
-  tu-layout-TitleNavContentLayout
-`;
-
-/**
- * TwoColumnLayout.
- *
- * @param {TwoColumnLayoutProps} props - The props for the TwoColumnLayout component
- * @returns {JSX.Element} TwoColumnLayout component
- */
-
-const TwoColumnLayout = ({
-  children
-}) => jsx(Layout, {
-  children: children
-});
-const Layout = tw.div`
-  tu-layout-TwoColumnLayout
-`;
-
-/**
- * The MultiRowTableCell component extendins Table Cell component and formats your content supporting 2 rows.
- *
- * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
- * @returns {JSX.Element} MultiRowTableCell component
- */
-
-const MultiRowTableCell = ({
-  main,
-  secondary,
-  area = "none",
-  dataTestId
-}) => {
-  return jsxs(Root$1, Object.assign({
-    area: area,
-    dataTestId: dataTestId
-  }, {
-    children: [jsx(Header, {
-      children: main
-    }), secondary && jsx(Secondary, {
-      children: secondary
-    })]
-  }));
-};
-const Root$1 = tw(GridArea)`
-  tu-multi-row-table-cell-container
-`;
-const Header = tw.div`
-  tu-multi-row-table-cell
-  tu-multi-row-table-cell__header
-`;
-const Secondary = tw.div`
-  tu-multi-row-table-cell
-  tu-multi-row-table-cell__secondary
-`;
-
-/**
- * A thin wrapper around the `BaseInput` component for number input fields.
- *
- * NOTE: If shown with a label, please use the `NumberField` component instead.
- */
-
-const NumberInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
-  ref: ref,
-  type: "number"
-}, props)));
-
-/**
- * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
- *
- * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
- *
- * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
- */
-
-const NumberField = forwardRef((_a, ref) => {
-  var {
-    label,
-    tip,
-    helpText,
-    errorMessage,
-    helpAddon,
-    isInvalid,
-    maxLength,
-    className,
-    value,
-    dataTestId
-  } = _a,
-      rest = __rest(_a, ["label", "tip", "helpText", "errorMessage", "helpAddon", "isInvalid", "maxLength", "className", "value", "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(NumberInput, Object.assign({
-      ref: ref,
-      maxLength: maxLength,
-      value: value,
-      isInvalid: renderAsInvalid
-    }, rest, {
-      className: className,
-      dataTestId: dataTestId
-    }))
-  }));
-});
-
-const GetSpacerHeight = () => ({
-  minHeight
-}) => {
-  if (!minHeight) {
-    return "";
-  }
-
-  switch (minHeight) {
-    case "normal":
-      return tws`min-h-[8px]`;
-
-    case "large":
-      return tws`min-h-[32px]`;
-
-    default:
-      return "";
-  }
-};
-/**
- * The Spacer component is used for adding a bit of space.
- *
- * @param {SpacerProps} props - The props for the Spacer component
- * @returns {JSX.Element} Spacer component
- */
-
-
-const Spacer = ({
-  minHeight = "",
-  border,
-  dataTestId
-}) => {
-  return jsx(Space, {
-    "data-testid": dataTestId,
-    minHeight: minHeight,
-    border: border
-  });
-};
-const Space = tw.div`
-${p => `${p.border ? `tu-spacer--border` : null}`}
-${GetSpacerHeight()}
-`;
-
-/**
- * Tags allow users to enter information and filter content.
+ * Tags allow users to enter information and filter content.
  *
  * Multiple or single tags can be used to categorise items.
  *
@@ -3740,11 +3464,11 @@ const SelectContainer = ({
   return jsxs(Container, Object.assign({
     "data-testid": dataTestId
   }, {
-    children: [label && !hideLabel && jsx(Label$4, {
-      label: label,
-      htmlFor: id !== null && id !== void 0 ? id : false,
-      description: description
-    }), children, (hasError || info) && jsx(InformativeText$1, Object.assign({
+    children: [label && !hideLabel && jsx(Label$5, Object.assign({
+      htmlFor: id
+    }, {
+      children: label
+    })), children, (hasError || info) && jsx(InformativeText$1, Object.assign({
       size: "small",
       "$hasError": hasError !== null && hasError !== void 0 ? hasError : false
     }, {
@@ -4059,16 +3783,16 @@ const TextArea = React.forwardRef(({
 }, ref) => {
   const hasError = !!error;
   return jsxs(TextAreaContainer, Object.assign({
-    className: className,
-    "data-testid": dataTestId
+    className: className
   }, {
-    children: [jsx(Label$4, {
-      htmlFor: id !== null && id !== void 0 ? id : false,
-      id: id,
-      label: label,
-      description: description
-    }), jsx(StyledTextArea, {
+    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,
@@ -4540,4 +4264,246 @@ const 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$4 as Label, LegendItem, MenuButton, MenuItem, MenuList, MinTopFullContentLayout, Modal, ModalBackdrop, MultiRowTableCell, 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 };
+/**
+ * The MinTopFullContentLayout component.
+ *
+ * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
+ * @returns {JSX.Element} MinTopFullContentLayout component
+ */
+
+const MinTopFullContentLayout = ({
+  children,
+  className,
+  dataTestId
+}) => jsx(Layout$5, Object.assign({
+  className: className,
+  "data-testid": dataTestId
+}, {
+  children: children
+}));
+const Layout$5 = tw.span`
+  grid
+  h-full
+  grid-rows-min-fr
+`;
+
+/**
+ * Responsive layout component setting up three grid areas
+ * one for filtering, (result-)list and (result-map)
+ *
+ * List needs to handle its own min size - and map takes up the rest.
+ *
+ * Will be inlined to
+ *  - filter
+ *  - list
+ *  - map
+ * on screens < mediaQuery.xxl
+ *
+ *
+ * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
+ * @returns {JSX.Element} FilterListMapLayout component
+ */
+
+const FilterListMapLayout = ({
+  children
+}) => jsx(Layout$4, {
+  children: children
+});
+const Layout$4 = tw.span`
+  tu-layout-FilterListMap 
+`;
+
+/**
+ * Layout component with repeating full width areas, default one height fraction each but option to use content height instead
+ * Row min height can optionally be set here or managed by children
+ * Scrolling happens if/when children's a min-height is reached
+ *
+ * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
+ * @returns {JSX.Element} FullWidthRepeatingLayout component
+ */
+
+const FullWidthRepeatingLayout = ({
+  children,
+  rowSizing = "Unmanaged",
+  rowMinHeight,
+  dataTestId,
+  className
+}) => jsx(Layout$3, Object.assign({
+  "data-testid": dataTestId,
+  className: className,
+  "$rowSizing": rowSizing,
+  "$rowMinHeight": rowMinHeight !== null && rowMinHeight !== void 0 ? rowMinHeight : 0
+}, {
+  children: children
+}));
+const Layout$3 = tw.span`
+  tu-layout-FullWidthRepeatingLayout
+
+  ${({
+  $rowSizing
+}) => {
+  switch ($rowSizing) {
+    case "MinContent":
+      return tws` tu-layout-FullWidthRepeatingLayout--MinContent`;
+
+    case "Equal":
+      return tws` tu-layout-FullWidthRepeatingLayout--Equal`;
+
+    case "Unmanaged":
+    default:
+      return null;
+  }
+}}
+`;
+
+/**
+ * Simply applies a Grid Area to the element
+ *
+ * @param {GridAreaProps} props - The props for the GridArea component
+ * @returns {JSX.Element} GridArea component
+ */
+
+const GridArea = ({
+  area,
+  dataTestId,
+  className,
+  children
+}) => jsx("section", Object.assign({
+  className: className,
+  "data-testid": dataTestId,
+  style: {
+    gridArea: area
+  }
+}, {
+  children: children
+}));
+
+/**
+ * A grid container that has a flexible number of columns.
+ * Adds more columns if constraints allow it, otherwise wraps to next row
+ *
+ * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
+ * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
+ */
+
+const IntrinsicallyResponsiveGrid = ({
+  children,
+  occupation = "auto-fill",
+  minColumnWidth = "normal",
+  gap = "auto",
+  dataTestId,
+  className
+}) => jsx(Layout$2, Object.assign({
+  "$minColumnWidth": minColumnWidth,
+  "data-testid": dataTestId,
+  "$gap": gap,
+  "$occupation": occupation,
+  className: className
+}, {
+  children: children
+}));
+const Layout$2 = tw.span`
+  tu-layout-IntrinsicallyResponsiveGrid
+  ${({
+  $occupation
+}) => {
+  switch ($occupation) {
+    case "auto-fit":
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--fit`;
+
+    case "auto-fill":
+    default:
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--fill`;
+  }
+}}
+
+  ${({
+  $minColumnWidth
+}) => {
+  switch ($minColumnWidth) {
+    case "slim":
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--slim`;
+
+    case "narrow":
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--narrow`;
+
+    case "wide":
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--wide`;
+
+    case "normal":
+    default:
+      return tws`tu-layout-IntrinsicallyResponsiveGrid--normal`;
+  }
+}}
+  
+  ${({
+  $gap
+}) => {
+  switch ($gap) {
+    case "tiny":
+      return tws`gap-1`;
+
+    case "mini":
+      return tws`gap-2`;
+
+    case "small":
+      return tws`gap-3`;
+
+    case "medium":
+      return tws`gap-4`;
+
+    case "large":
+      return tws`gap-6`;
+
+    case "giant":
+      return tws`gap-8`;
+
+    case "enormous":
+      return tws`gap-10`;
+
+    case "none":
+      return tws`gap-0`;
+
+    case "inherit":
+      return tws`gap-[inherit]`;
+
+    case "auto":
+    default:
+      return tws`gap-3 sm:gap-4 md:gap-6`;
+  }
+}};
+`;
+
+/**
+ * The TitleNavContentLayout.
+ *
+ * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
+ * @returns {JSX.Element} TitleNavContentLayout component
+ */
+
+const TitleNavContentLayout = ({
+  children
+}) => jsx(Layout$1, {
+  children: children
+});
+const Layout$1 = tw.div`
+  tu-layout-TitleNavContentLayout
+`;
+
+/**
+ * TwoColumnLayout.
+ *
+ * @param {TwoColumnLayoutProps} props - The props for the TwoColumnLayout component
+ * @returns {JSX.Element} TwoColumnLayout component
+ */
+
+const TwoColumnLayout = ({
+  children
+}) => jsx(Layout, {
+  children: children
+});
+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 };

package/package.json

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

package/components/MultiRowTableCell/MultiRowTableCell.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import { CommonProps } from "../../common/CommonProps";
-interface MultiRowTableCellProps extends CommonProps {
-    /**
-     * Main header.
-     */
-    main: string;
-    /**
-     * Secondary string.
-     */
-    secondary?: string;
-    /**
-     * Grid area.
-     */
-    area?: string;
-}
-/**
- * The MultiRowTableCell component extendins Table Cell component and formats your content supporting 2 rows.
- *
- * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
- * @returns {JSX.Element} MultiRowTableCell component
- */
-export declare const MultiRowTableCell: ({ main, secondary, area, dataTestId }: MultiRowTableCellProps) => JSX.Element;
-export {};

package/components/MultiRowTableCell/index.d.ts

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