@trackunit/react-components 0.0.49 → 0.0.52

package/index.js

@@ -25,6 +25,14 @@ const docs = {
   }
 };
 
+/**
+ * Utility for common props on containers.
+ *
+ * @param {IUseContainerProps} ContainerProps - Props for the utility
+ * @param {string} ContainerProps.className - Optional custom className
+ * @param {string} ContainerProps.dataTestId - Optional custom data-TestId
+ * @returns {IUseContainerProps} - Object with undefined values removed
+ */
 const useContainerProps = ({
   className,
   dataTestId
@@ -72,6 +80,13 @@ function __rest(s, e) {
     return t;
 }
 
+/**
+ * The Spinner component should be used st show a loading state.
+ *
+ * @param {SpinnerProps} props - The props for the Spinner component
+ * @returns {JSX.Element} Spinner component
+ */
+
 const Spinner = ({
   mode = "light",
   size = "regular",
@@ -121,6 +136,12 @@ const Container$8 = tw.div`
   ${p => p.$centered ? tws`spinner--container-centered` : null}
 `;
 
+/**
+ * Helper to get the needed classname from buttonProps.
+ *
+ * @returns {string} - Classnames for the button
+ */
+
 const getStyles = () => ({
   $intent,
   $variant
@@ -143,6 +164,12 @@ const getStyles = () => ({
   };
   return styles[$variant][$intent];
 };
+/**
+ * Helper to get the needed classname for padding.
+ *
+ * @returns {string} - The correct class for setting padding.
+ */
+
 const getPadding = () => ({
   $size
 }) => {
@@ -299,6 +326,13 @@ const IconSizeClassMap = {
   large: tws`w-6` // 24x24px
 
 };
+/**
+ * The Icon component is ued to display an Icon.
+ *
+ * @param {IconProps} props - The props for the Icon component
+ * @returns {JSX.Element} Icon component
+ */
+
 const Icon$1 = ({
   name,
   size = "large",
@@ -417,6 +451,13 @@ const Root$3 = tw.span`
 }}
 `;
 
+/**
+ * The StarButton component is used for favorite actions or similar.
+ *
+ * @param {StarButtonProps} props - The props for the StarButton component
+ * @returns {JSX.Element} StarButton component
+ */
+
 const StarButton = ({
   starred,
   onClick
@@ -444,6 +485,13 @@ const CustomIcon = tw(Icon$1)`
   ${p => p.$starred ? tws`!fill-primary-600 !stroke-transparent` : tws`!fill-transparent !stroke-neutral-800`} 
 `;
 
+/**
+ * The Text component.
+ *
+ * @param {TextProps} props - The props for the Text component
+ * @returns {JSX.Element} Text component
+ */
+
 const Text = ({
   children,
   type = "p",
@@ -528,6 +576,13 @@ const StyledText$3 = tw.text`
   ${getTextWeight()}
 `;
 
+/**
+ * The Alert component should be used to inform the user of important information.
+ *
+ * @param {AlertProps} props - The props for the Alert component
+ * @returns {JSX.Element} Alert component
+ */
+
 const Alert = ({
   intent = "info",
   title,
@@ -615,7 +670,8 @@ const Alert = ({
     className: className,
     "data-testid": dataTestId,
     "$inline": inline,
-    ref: ref
+    ref: ref,
+    role: "alert"
   }, {
     children: [jsx(IconContainer, Object.assign({
       "$inline": inline
@@ -698,6 +754,13 @@ const IconContainer = tw.div`
   ${p => p.$inline ? tws`alert__icon-container--inline` : null}
 `;
 
+/**
+ * The Badge component us used to display states or similar short form information.
+ *
+ * @param {BadgeProps} props - The props for the Badge component
+ * @returns {JSX.Element} Badge component
+ */
+
 const Badge = _a => {
   var {
     color = "neutral",
@@ -874,6 +937,14 @@ const InputContainer = tw.div`
 BaseInput.displayName = "BaseInput";
 
 const ROLE_CARD = "region";
+/**
+ * The Card component is a container for ui elements.
+ * Is also used for modals etc.
+ *
+ * @param {CardProps} props - The props for the Card component
+ * @returns {JSX.Element} Card component
+ */
+
 const Card = ({
   children,
   onClick,
@@ -926,6 +997,15 @@ const StyledCard$1 = tw.div`
   ${getOverflow$1()}
 `;
 
+/**
+ * The DensityContainer component applies gap and padding.
+ * The padding should live here, and not on the Card itself, as to not inset the scrollbar in case of overflow.
+ *
+ * @summary For applying auto padding and gap to a Card or Modal or whatever.
+ * @param {ContainerProps} props - The props for the DensityContainer component
+ * @returns {JSX.Element} DensityContainer component
+ */
+
 const DensityContainer = ({
   children,
   className,
@@ -997,11 +1077,12 @@ ${DensityFinder}
 `;
 
 /**
- * @summary
- * For applying padding and gap to a Card.
+ * The CardBody component should be used to inform the user of important information.
  *
- * @description
- * The padding must live here, and not on the Card itself, as to not inset the scrollbar in case of overflow
+ * @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
+ * @returns {JSX.Element} CardBody component
  */
 
 const CardBody = ({
@@ -1049,8 +1130,8 @@ const StyledDensityContainer = tw(DensityContainer)`
  * Currently only intended to contain Buttons.
  * The buttons justifies to the right, but if you style a button with "margin-right: auto" it will move to the left
  *
- * @param {CardFooterProps} { dataTestId, className, children, density }
- * @return {*}
+ * @param {CardFooterProps} props - The props for the CardFooter component
+ * @returns {JSX.Element} CardFooter component
  */
 
 const CardFooter = ({
@@ -1080,6 +1161,13 @@ flex-wrap
 justify-end
 `;
 
+/**
+ * The Heading component should be used for Headings.
+ *
+ * @param {HeadingProps} props - The props for the Heading component
+ * @returns {JSX.Element} Heading component
+ */
+
 const Heading = ({
   children,
   variant = "primary",
@@ -1134,20 +1222,10 @@ const StyledHeading = tw.div`
 `;
 
 /**
- * Header for Cards and Models.
- *
+ * Header for Cards and Modals.
  *
- * @param {CardHeaderProps} {
- *   heading,
- *   headingVariant = "primary",
- *   subHeading,
- *   onClose,
- *   dataTestId,
- *   className,
- *   children,
- *   density,
- * }
- * @return {*}
+ * @param {CardHeaderProps} props - The props for the CardHeader component
+ * @returns {JSX.Element} CardHeader component
  */
 
 const CardHeader = ({
@@ -1208,8 +1286,11 @@ gap-4
 `;
 
 /**
- * A wrapper component for Echarts.
+ * The Chart component is a wrapper component for ECharts.
  * Handles events and click functionality.
+ *
+ * @param {IChartProps} props - The props for the Chart component
+ * @returns {JSX.Element} Chart component
  */
 
 const Chart = ({
@@ -1228,6 +1309,8 @@ const Chart = ({
   timezoneLabel,
   renderer = "canvas"
 }) => {
+  var _a, _b;
+
   const echartsRef = React.useRef(null);
   const eventHandlers = React.useMemo(() => {
     const values = {};
@@ -1265,28 +1348,13 @@ const Chart = ({
       }
     };
   }, [onClick, echartsRef]);
-
-  const getTypesafeDimension = dimension => {
-    if (typeof dimension === "string") {
-      return dimension;
-    } else if (typeof dimension === "number") {
-      return `${dimension}px`;
+  return jsx(ChartContainer, Object.assign({
+    style: {
+      height: (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px",
+      width: (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%"
     }
-
-    return "auto";
-  };
-
-  const classDimensions = React.useMemo(() => {
-    var _a, _b;
-
-    const height = (_a = style === null || style === void 0 ? void 0 : style.height) !== null && _a !== void 0 ? _a : "300px";
-    const width = (_b = style === null || style === void 0 ? void 0 : style.width) !== null && _b !== void 0 ? _b : "100%";
-    return `h-[${getTypesafeDimension(height)}] w-[${getTypesafeDimension(width)}]`;
-  }, [style === null || style === void 0 ? void 0 : style.height, style === null || style === void 0 ? void 0 : style.width]);
-  return jsx(ChartContainer, {
-    children: showLoading ? jsxs(SpinnerContainer, Object.assign({
-      dimensions: classDimensions
-    }, {
+  }, {
+    children: showLoading ? jsxs(SpinnerContainer, {
       children: [jsx(Spinner, {
         centered: true
       }), (loadingOption === null || loadingOption === void 0 ? void 0 : loadingOption.text) && jsx(Text, Object.assign({
@@ -1295,7 +1363,7 @@ const Chart = ({
       }, {
         children: loadingOption.text
       }))]
-    })) : jsxs(Fragment, {
+    }) : jsxs(Fragment, {
       children: [jsx(EChart, {
         ref: echartsRef,
         option: options,
@@ -1311,22 +1379,30 @@ const Chart = ({
         onChartReady: onChartReady
       }), timezoneLabel]
     })
-  });
+  }));
 };
 const SpinnerContainer = tw.div`
   chart-spinner-container
-  ${p => `${p.dimensions}`}
 `;
 const ChartContainer = tw.div`
   chart-container
 `;
 
+/**
+ * The CheckIcon component is used by the checkbox to display the checked state.
+ *
+ * @param {CheckIconProps} props - The props for the CheckIcon component
+ * @returns {JSX.Element} CheckIcon component
+ */
+
 const CheckIcon = ({
-  className
+  className,
+  dataTestId
 }) => {
   return jsx("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
     className: className,
+    "data-testId": dataTestId,
     fill: "none",
     viewBox: "0 0 10 10",
     stroke: "currentColor",
@@ -1340,6 +1416,13 @@ const CheckIcon = ({
   }));
 };
 
+/**
+ * The IndeterminateIcon component is used by the checkbox to display the Indeterminate state.
+ *
+ * @param {IndeterminateIconProps} props - The props for the IndeterminateIcon component
+ * @returns {JSX.Element} IndeterminateIcon component
+ */
+
 const IndeterminateIcon = ({
   className
 }) => jsx("svg", Object.assign({
@@ -1476,6 +1559,13 @@ ${({
 }) => $isInvalid ? tws`checkbox--invalid` : null}
 `;
 
+/**
+ * The Collapse component is ued to condense non-important information.
+ *
+ * @param {CollapseProps} props - The props for the Collapse component
+ * @returns {JSX.Element} Collapse component
+ */
+
 const Collapse = ({
   id,
   initialExpanded = false,
@@ -1584,6 +1674,13 @@ const StyledCollapsible = tw.div`
   collapsible
 `;
 
+/**
+ * The CopyableText component is used where the user should have easy access to copy some information.
+ *
+ * @param {CopyableTextProps} props - The props for the CopyableText component
+ * @returns {JSX.Element} CopyableText component
+ */
+
 const CopyableText = ({
   text,
   alternativeText,
@@ -1648,10 +1745,24 @@ const localeLookup = {
   ja,
   th
 };
+/**
+ * A helper function to get the matching Locale object for a given language.
+ *
+ * @param {string} language The language to match
+ * @returns {Locale} The corresponding Locale object
+ */
+
 const useLocale = language => {
   return localeLookup[language] || localeLookup.en;
 };
 
+/**
+ * The DayPicker component is used when the user needs to select a date.
+ *
+ * @param {DayPickerProps} props - The props for the DayPicker component
+ * @returns {JSX.Element} DayPicker component
+ */
+
 const DayPicker = _a => {
   var {
     onDaySelect,
@@ -1678,6 +1789,13 @@ var PopoverLifecycle;
   PopoverLifecycle["open"] = "open";
   PopoverLifecycle["closing"] = "closing";
 })(PopoverLifecycle || (PopoverLifecycle = {}));
+/**
+ * The usePopover Hook.
+ *
+ * @param {UsePopoverProps} props - The props for the usePopover hook
+ * @returns {UsePopoverProps} - UsePopoverProps
+ */
+
 
 const usePopover = ({
   targetRef,
@@ -1831,6 +1949,13 @@ const StyledContainer = tw.div`
   z-[21]
 `;
 
+/**
+ * The PopoverList component.
+ *
+ * @param {PopoverListProps} props - The props for the PopoverList component
+ * @returns {JSX.Element} PopoverList component
+ */
+
 const PopoverList = ({
   className,
   children,
@@ -1925,6 +2050,13 @@ const DateField = forwardRef(({
   });
 });
 
+/**
+ * The PopoverListItem component.
+ *
+ * @param {PopoverListItemProps} props - The props for the PopoverListItem component
+ * @returns {JSX.Element} PopoverListItem component
+ */
+
 const PopoverListItem = ({
   selected,
   children,
@@ -1985,6 +2117,13 @@ const UnstyledAnchor = tw.a`
   text-inherit
 `;
 
+/**
+ * The PopoverTitle component.
+ *
+ * @param {PopoverTitleProps} props - The props for the PopoverTitle component
+ * @returns {JSX.Element} PopoverTitle component
+ */
+
 const PopoverTitle = ({
   children,
   action,
@@ -2026,6 +2165,13 @@ const StyledText = 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,
@@ -2084,6 +2230,13 @@ const DayPickerPopover = ({
   });
 };
 
+/**
+ * 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,
@@ -2121,6 +2274,13 @@ const DayRangePicker = ({
   }));
 };
 
+/**
+ * The Tooltip component.
+ *
+ * @param {TooltipProps} props - The props for the Tooltip component
+ * @returns {JSX.Element} Tooltip component
+ */
+
 const Tooltip = ({
   label,
   placement = "bottom",
@@ -2187,6 +2347,13 @@ const Content$1 = tw.div`
   ${p => p.$mode === "light" ? tws`tooltip--light` : null}
 `;
 
+/**
+ * The Tip component is used to show helpful tips for users.
+ *
+ * @param {TipProps} props - The props for the Tip component
+ * @returns {JSX.Element} Tip component
+ */
+
 const Tip = _a => {
   var _b;
 
@@ -2220,6 +2387,14 @@ const TipContainer = tw.span`
 `;
 Tip.displayName = "Tip";
 
+/**
+ * The FormGroup component should be used to wrap any Input element that needs a label.
+ * Besides a label the component supplyes optional Tip, HelpText and HelpAddon support.
+ *
+ * @param {FormGroupProps} props - The props for the FormGroup component
+ * @returns {JSX.Element} FormGroup component
+ */
+
 const FormGroup = ({
   isInvalid,
   helpText,
@@ -2283,6 +2458,13 @@ const HelpAddon = tw.span`
   formGroup-helpAddon 
 `;
 
+/**
+ * The Indicator components are non-interactive elements that communicate essential aspects of the state of an asset.
+ *
+ * @param {IndicatorProps} props - The props for the Indicator component
+ * @returns {JSX.Element} Indicator component
+ */
+
 const Indicator$1 = _a => {
   var {
     dataTestId,
@@ -2375,6 +2557,15 @@ const Label$3 = tw.div`
   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$2 = ({
   id,
   htmlFor,
@@ -2383,7 +2574,7 @@ const Label$2 = ({
   className,
   dataTestId
 }) => {
-  const labelEl = jsx(Text, Object.assign({
+  const labelElement = jsx(Text, Object.assign({
     weight: "thick",
     className: className,
     dataTestId: dataTestId
@@ -2392,11 +2583,11 @@ const Label$2 = ({
   }));
 
   return jsxs(Fragment, {
-    children: [htmlFor === false ? labelEl : jsx("label", Object.assign({
+    children: [htmlFor === false ? labelElement : jsx("label", Object.assign({
       id: id,
       htmlFor: htmlFor
     }, {
-      children: labelEl
+      children: labelElement
     })), jsx(Description, Object.assign({
       subtle: true
     }, {
@@ -2408,6 +2599,13 @@ const Description = tw(Text)`
   label
 `;
 
+/**
+ * The LegendItem component is used to show form legends.
+ *
+ * @param {ILegendItem} props - The props for the LegendItem component
+ * @returns {JSX.Element} LegendItem component
+ */
+
 const LegendItem = ({
   className,
   label,
@@ -2456,6 +2654,13 @@ const Label$1 = tw.span`
   text-sm
 `;
 
+/**
+ * The MenuButton component.
+ *
+ * @param {IMobileButton} props - The props for the MenuButton component
+ * @returns {JSX.Element} MenuButton component
+ */
+
 const MenuButton = ({
   onClick,
   className
@@ -2483,6 +2688,13 @@ const MobileIconButton = tw(IconButton)`
   !border-gray-300
 `;
 
+/**
+ * The MenuItem component should be used to inform the user of important information.
+ *
+ * @param {IMenuItemProps} props - The props for the MenuItem component
+ * @returns {JSX.Element} MenuItem component
+ */
+
 const MenuItem = ({
   className,
   dataTestId,
@@ -2519,6 +2731,13 @@ const Label = tw.div`
   menuItem__label
 `;
 
+/**
+ * The MenuList component is used for menus and selects.
+ *
+ * @param {IMenuListProps} props - The props for the MenuList component
+ * @returns {JSX.Element} MenuList component
+ */
+
 const MenuList = _a => {
   var {
     dataTestId,
@@ -2556,6 +2775,13 @@ const Divider = tw.div`
   menuList__divider
 `;
 
+/**
+ * The Backdrop for the modal.
+ *
+ * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
+ * @returns {JSX.Element} ModalBackdrop component
+ */
+
 const ModalBackdrop = ({
   children,
   isVisible,
@@ -2674,6 +2900,13 @@ const StyledDiv = tw.div`
 `;
 const AnimatedDiv = animated(StyledDiv);
 
+/**
+ * The useModal component should be used to inform the user of important information.
+ *
+ * @param {UseModalProps} props - The props for the useModal hook
+ * @returns {*} useModal return
+ */
+
 const useModal = ({
   closeOnOutsideClick
 } = {}) => {
@@ -2719,6 +2952,13 @@ const useModal = ({
   };
 };
 
+/**
+ * The MinTopFullContentLayout component.
+ *
+ * @param {IMinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
+ * @returns {JSX.Element} MinTopFullContentLayout component
+ */
+
 const MinTopFullContentLayout = ({
   children,
   className,
@@ -2735,6 +2975,23 @@ const Layout$5 = tw.span`
   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 {IProps} props - The props for the FilterListMapLayout component
+ * @returns {JSX.Element} FilterListMapLayout component
+ */
+
 const FilterListMapLayout = ({
   children
 }) => jsx(Layout$4, {
@@ -2744,6 +3001,15 @@ const Layout$4 = tw.span`
   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 {IFullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
+ * @returns {JSX.Element} FullWidthRepeatingLayout component
+ */
+
 const FullWidthRepeatingLayout = ({
   children,
   rowSizing = "Unmanaged",
@@ -2780,7 +3046,9 @@ const Layout$3 = tw.span`
 
 /**
  * Simply applies a Grid Area to the element
- * @param {string} area
+ *
+ * @param {GridAreaProps} props - The props for the GridArea component
+ * @returns {JSX.Element} GridArea component
  */
 
 const GridArea = ({
@@ -2802,14 +3070,8 @@ const GridArea = ({
  * A grid container that has a flexible number of columns.
  * Adds more columns if constraints allow it, otherwise wraps to next row
  *
- *   @component
- *   @prop children - the children to be laid out,
- *   @prop occupation = "auto-fill" - stretch a little, till there's room for another column. Optionally set "auto-fit" to stretch children to fit entire container width,
- *   @prop minColumnWidth = "normal" - "small" | "normal" | "large"
- *   @prop gap = "auto" - the gap size between children,
- *   @prop dataTestId,
- *   @prop className ,
-
+ * @param {IIntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
+ * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
  */
 
 const IntrinsicallyResponsiveGrid = ({
@@ -2900,6 +3162,13 @@ const Layout$2 = tw.span`
 }};
 `;
 
+/**
+ * The TitleNavContentLayout.
+ *
+ * @param {TitleNavContentLayoutProps} props - The props for the TitleNavContentLayout component
+ * @returns {JSX.Element} TitleNavContentLayout component
+ */
+
 const TitleNavContentLayout = ({
   children
 }) => jsx(Layout$1, {
@@ -2909,6 +3178,13 @@ const Layout$1 = tw.div`
   layout-TitleNavContentLayout
 `;
 
+/**
+ * TwoColumnLayout.
+ *
+ * @param {TwoColumnLayoutProps} props - The props for the TwoColumnLayout component
+ * @returns {JSX.Element} TwoColumnLayout component
+ */
+
 const TwoColumnLayout = ({
   children
 }) => jsx(Layout, {
@@ -2919,7 +3195,10 @@ const Layout = tw.div`
 `;
 
 /**
- * Extending Table Cell component formats your content supporting 2 rows.
+ * The MultiRowTableCell component extendins Table Cell component and formats your content supporting 2 rows.
+ *
+ * @param {IMultiRowTableCellProps} props - The props for the MultiRowTableCell component
+ * @returns {JSX.Element} MultiRowTableCell component
  */
 
 const MultiRowTableCell = ({
@@ -2952,9 +3231,9 @@ const Secondary = tw.div`
 `;
 
 /**
- * A thin wrapper arround the `BaseInput` component for number input fields.
+ * A thin wrapper around the `BaseInput` component for number input fields.
  *
- * *NOTE: If shown with a label, please use the `NumberField` component instead.*
+ * NOTE: If shown with a label, please use the `NumberField` component instead.
  */
 
 const NumberInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
@@ -3018,6 +3297,13 @@ const GetSpacerHeight = () => ({
       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 = "",
@@ -3035,6 +3321,13 @@ ${p => `${p.border ? `spacer--border` : null}`}
 ${GetSpacerHeight()}
 `;
 
+/**
+ * The PageHeading component used on pages.
+ *
+ * @param {PageHeadingProps} props - The props for the PageHeading component
+ * @returns {JSX.Element} PageHeading component
+ */
+
 const PageHeading = ({
   title,
   subtitle,
@@ -3078,6 +3371,7 @@ function useInRouterContext() {
   return useContext(UNSAFE_LocationContext) !== null;
 } // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
+
 function invariant(cond, message) {
   if (!cond) {
     throw new Error(message);
@@ -3108,6 +3402,15 @@ function useBlocker(blocker, when = true) {
     return unblock;
   }, [navigator, blocker, when]);
 }
+/**
+ * The usePrompt hook.
+ *
+ * @param {string} message -
+ * @param {boolean} when -
+ * @returns {void} void
+ */
+
+
 function usePrompt(message, when = true) {
   const blocker = useCallback(tx => {
     if (window.confirm(message)) {
@@ -3116,6 +3419,13 @@ function usePrompt(message, when = true) {
   }, [message]);
   useBlocker(blocker, when);
 }
+/**
+ * The Prompt function.
+ *
+ * @param {IPromptProps} Props -
+ * @returns {void} void
+ */
+
 const Prompt = ({
   when,
   message
@@ -3126,6 +3436,13 @@ const Prompt = ({
 
 const RadioGroupContext = React.createContext(null);
 
+/**
+ * The RadioGroup component.
+ *
+ * @param {RadioGroupProps} props - The props for the RadioGroup component
+ * @returns {JSX.Element} RadioGroup component
+ */
+
 const RadioGroup = ({
   children,
   id,
@@ -3169,6 +3486,13 @@ const Flex = tw.div`
 }) => $inline ? tws`flex-row items-center` : tws`flex-col items-start`}
 `;
 
+/**
+ * The RadioItem component.
+ *
+ * @param {RadioItemProps} props - The props for the RadioItem component
+ * @returns {JSX.Element} RadioItem component
+ */
+
 const RadioItem = ({
   label,
   value,
@@ -3206,6 +3530,13 @@ const CustomFlex = tw.div`
   hover:cursor-pointer
 `;
 
+/**
+ * The SelectContainer component.
+ *
+ * @param {SelectContainerProps} props - The props for the SelectContainer component
+ * @returns {JSX.Element} SelectContainer component
+ */
+
 const SelectContainer = ({
   children,
   label,
@@ -3247,6 +3578,16 @@ const getSelectHeight = size => {
   };
   return tokens[size];
 };
+/**
+ * The useCustomStyles hook for getting trackunit specific styling on react-select.
+ *
+ * @param {StylesConfig} styles -
+ * @param {boolean} hasError -
+ * @param {boolean} isInvalid -
+ * @param {SelectSize} size -
+ * @returns {{StylesConfig}} useCustomStyles hook return
+ */
+
 
 const useCustomStyles = (styles, hasError, isInvalid, size) => {
   const customStyles = React.useMemo(() => {
@@ -3302,6 +3643,13 @@ const useCustomStyles = (styles, hasError, isInvalid, size) => {
     customStyles
   };
 };
+/**
+ * The useCustomComponents hook for getting trackunit specific components on react-select.
+ *
+ * @param {SelectComponents} components -
+ * @returns {*}} useCustomComponents hook return
+ */
+
 const useCustomComponents = components => {
   const customComponents = React.useMemo(() => {
     return Object.assign({
@@ -3321,6 +3669,13 @@ const useCustomComponents = components => {
   };
 };
 
+/**
+ * The CreatableSelect component.
+ *
+ * @param {SelectProps} props - The props for the CreatableSelect component
+ * @returns {JSX.Element} CreatableSelect component
+ */
+
 const CreatableSelect = _a => {
   var {
     dataTestId,
@@ -3371,6 +3726,13 @@ const CreatableSelect = _a => {
   }));
 };
 
+/**
+ * The Select component.
+ *
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {JSX.Element} Select component
+ */
+
 const Select = _a => {
   var {
     dataTestId,
@@ -3591,9 +3953,9 @@ const InformativeText = tw(Text)`
 `;
 
 /**
- * A thin wrapper arround the `BaseInput` component for text input fields.
+ * A thin wrapper around the `BaseInput` component for text input fields.
  *
- * *NOTE: If shown with a label, please use the `TextField` component instead.*
+ * NOTE: If shown with a label, please use the `TextField` component instead.
  */
 
 const TextInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
@@ -3602,6 +3964,14 @@ const TextInput = forwardRef((props, ref) => jsx(BaseInput, Object.assign({
 }, props)));
 TextInput.displayName = "TextInput";
 
+/**
+ * The TextLengthIndicator component shows a `{length}/{maxLength}` label.
+ * Used for TextFields to communicate a maximum allowed input length.
+ *
+ * @param {TextLengthIndicatorProps} props - The props for the TextLengthIndicator component
+ * @returns {JSX.Element} TextLengthIndicator component
+ */
+
 const TextLengthIndicator = ({
   length,
   maxLength
@@ -3744,6 +4114,14 @@ absolute
   -z-10
 `;
 
+/**
+ * The useDebounce hook works like useState, but adds a delay where previous values will be ignored.
+ *
+ * @param {any} value The value to set
+ * @param {number} delay The debounce time
+ * @returns {any} value The latest values received
+ */
+
 const useDebounce = (value, delay = 500) => {
   const [debouncedValue, setDebouncedValue] = useState(value);
   useEffect(() => {
@@ -3757,6 +4135,14 @@ const useDebounce = (value, delay = 500) => {
   return debouncedValue;
 };
 
+/**
+ * The useLocalStorage hook works like useState, but saves to localstorage.
+ *
+ * @param {string} key - The key the values is saved under.
+ * @param {string | null | undefined} initialValue - The initial value for the state/local storage item
+ * @returns {string | null | undefined} value
+ */
+
 const useLocalStorage = (key, initialValue) => {
   if (!key) {
     throw new Error("useLocalStorage key may not be falsy");
@@ -3812,6 +4198,13 @@ function tryParse(value) {
   }
 }
 
+/**
+ * The useTimeout hook.
+ *
+ * @param {UseTimeoutProps} props The props
+ * @returns {{ startTimeout: () => void; stopTimeout: () => void; }} return
+ */
+
 const useTimeout = ({
   onTimeout,
   duration
@@ -3842,4 +4235,4 @@ 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$2 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, Text, TextArea, TextField, TextInput, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useBlocker, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useInRouterContext, 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$2 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, Text, TextArea, TextField, TextInput, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };