@trackunit/react-components 0.0.53 → 0.0.56

package/components/{tooltip → Tooltip}/Tooltip.d.ts

@@ -1,59 +1,41 @@
 import * as React from "react";
-import { PopoverPlacement } from "../popover";
-import { TextType } from "../text";
+import { PopoverPlacement } from "../Popover";
+import { TextType } from "../Text";
 export interface TooltipProps {
     /**
      * The text to be displayed in the tooltip.
-     *
-     * @memberof TooltipProps
      */
     label: string | React.ReactNode;
     /**
      * Where the tooltip should be placed.
-     *
-     * @memberof TooltipProps
      */
     placement?: PopoverPlacement;
     /**
      * Child nodes
-     *
-     * @memberof TooltipProps
      */
     children?: React.ReactNode;
     /**
      * Id of test component.
-     *
-     * @memberof TooltipProps
      */
     dataTestId?: string;
     /**
      * Whether the tooltip is disabled or not.
-     *
-     * @memberof TooltipProps
      */
     disabled?: boolean;
     /**
      *  To select either "light" or "dark" mode.
-     *
-     * @memberof TooltipProps
      */
     mode?: "light" | "dark";
     /**
      * Offset value of the tooltip.
-     *
-     * @memberof TooltipProps
      */
     offset?: [number, number];
     /**
      * Additional classes to the component.
-     *
-     * @memberof TooltipProps
      */
     className?: string;
     /**
      * Type of content.
-     *
-     * @memberof TooltipProps
      */
     contentTextType?: TextType;
 }

package/components/buttons/{button → Button}/Button.d.ts

@@ -11,38 +11,26 @@ export interface ButtonProps extends ButtonCommonProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
      * Child nodes. Can be used to pass in text to be displayed on the button.
-     *
-     * @memberof ButtonProps
      */
     children?: React.ReactNode;
     /**
      * Whether button is fullWidth or not.
-     *
-     * @memberof ButtonProps
      */
     fullWidth?: boolean;
     /**
      * The button prefix.
-     *
-     * @memberof ButtonProps
      */
     prefix?: React.ReactNode;
     /**
      * The button suffix.
-     *
-     * @memberof ButtonProps
      */
     suffix?: React.ReactNode;
     /**
      * The type of the button. Values can be "submit" or "button".
-     *
-     * @memberof ButtonProps
      */
     type?: ButtonType;
     /**
      * The element type the button will be rendered as.
-     *
-     * @memberof ButtonProps
      */
     renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /**

package/components/buttons/{icon-button → IconButton}/IconButton.d.ts

@@ -3,14 +3,10 @@ import { ButtonCommonProps, ButtonSize } from "../shared/ButtonProps";
 export interface IconButtonProps extends ButtonCommonProps {
     /**
      * The icon to display.
-     *
-     * @memberof IconButtonProps
      */
     icon: React.ReactNode;
     /**
      * Whether the button is circular or not.
-     *
-     * @memberof IconButtonProps
      */
     circular?: boolean;
     /**
@@ -22,8 +18,6 @@ export interface IconButtonProps extends ButtonCommonProps {
     renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
     /**
      * The size of the button. Defaults to "small".
-     *
-     * @memberof IconButtonProps
      */
     size?: ButtonSize;
 }

package/components/buttons/index.d.ts

@@ -1,4 +1,4 @@
-export * from "./button/Button";
-export * from "./icon-button/IconButton";
+export * from "./Button/Button";
+export * from "./IconButton/IconButton";
 export * from "./shared/ButtonProps";
-export * from "./star-button/StarButton";
+export * from "./StarButton/StarButton";

package/components/buttons/shared/ButtonProps.d.ts

@@ -8,44 +8,30 @@ export interface ButtonCommonProps extends CommonProps {
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     /**
      * Whether the button is loading.
-     *
-     * @memberof ButtonCommonProps
      */
     loading?: boolean;
     /**
      * Whether the button is disabled.
-     *
-     * @memberof ButtonCommonProps
      */
     disabled?: boolean;
     /**
      * Button with square aspect ratio.
-     *
-     * @memberof ButtonCommonProps
      */
     square?: boolean;
     /**
      * The button's variant. Values are filled, transparent, plain.
-     *
-     * @memberof ButtonCommonProps
      */
     intent?: ButtonIntent;
     /**
      * The variant of the button.
-     *
-     * @memberof ButtonCommonProps
      */
     variant?: ButtonVariant;
     /**
      * The size of the button.
-     *
-     * @memberof ButtonCommonProps
      */
     size?: ButtonSize;
     /**
      * The link to be used for the button.
-     *
-     * @memberof ButtonCommonProps
      */
     to?: string;
     title?: string;

package/components/buttons/shared/helpers.d.ts

@@ -1,4 +1,4 @@
-import { ButtonIntent, ButtonSize, ButtonVariant } from "../shared/ButtonProps";
+import { ButtonIntent, ButtonSize, ButtonVariant } from "./ButtonProps";
 interface ButtonProps {
     $intent: ButtonIntent;
     $variant: ButtonVariant;

package/components/index.d.ts

@@ -1,37 +1,38 @@
-export * from "./alert";
-export * from "./badge";
-export * from "./baseInput";
+export * from "./Alert";
+export * from "./Badge";
+export * from "./BaseInput";
 export * from "./buttons";
-export * from "./card";
-export * from "./chart";
-export * from "./checkbox";
-export * from "./collapse";
-export * from "./copyableText";
-export * from "./dateField";
-export * from "./dayPicker";
-export * from "./formGroup/FormGroup";
-export * from "./heading";
-export * from "./icon/Icon";
-export * from "./indicator";
-export * from "./label";
-export * from "./legendItem";
-export * from "./menu";
-export * from "./modal";
-export * from "./multiRowTableCell";
+export * from "./Card";
+export * from "./Chart";
+export * from "./Checkbox";
+export * from "./Collapse";
+export * from "./CopyableText";
+export * from "./DateField";
+export * from "./DayPicker";
+export * from "./FormGroup/FormGroup";
+export * from "./Heading";
+export * from "./Icon/Icon";
+export * from "./Indicator";
+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";
-export * from "./popover";
-export * from "./prompt";
-export * from "./radioGroup";
-export * from "./select";
-export * from "./skeletonLines";
-export * from "./spacer";
-export * from "./spinner";
-export * from "./text";
-export * from "./textArea";
-export * from "./textField";
+export * from "./PageHeading";
+export * from "./Popover";
+export * from "./Prompt";
+export * from "./RadioGroup";
+export * from "./Select";
+export * from "./SkeletonLines";
+export * from "./Spacer";
+export * from "./Spinner";
+export * from "./Tag";
+export * from "./Text";
+export * from "./TextArea";
+export * from "./TextField";
 export * from "./TextInput/TextInput";
-export * from "./tip";
-export * from "./toggle";
-export * from "./tooltip";
+export * from "./Tip";
+export * from "./Toggle";
+export * from "./Tooltip";

package/index.js

@@ -28,10 +28,10 @@ const docs = {
 /**
  * Utility for common props on containers.
  *
- * @param {IUseContainerProps} ContainerProps - Props for the utility
+ * @param {UseContainerProps} 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
+ * @returns {UseContainerProps} - Object with undefined values removed
  */
 const useContainerProps = ({
   className,
@@ -350,6 +350,7 @@ const Icon$1 = ({
   onClick,
   fillColor,
   type,
+  style,
   forwardedRef
 }) => {
   const iconSizeClassName = React.useMemo(() => IconSizeClassMap[size], [size]);
@@ -381,9 +382,9 @@ const Icon$1 = ({
       children: jsx(IconComponent, {
         "data-testid": `${dataTestId}-${name}`,
         className: `${iconSizeClassName} ${colorClassNames} ${className} ${name} aspect-square`,
-        style: fillColor ? {
+        style: fillColor ? Object.assign(Object.assign({}, style), {
           fill: fillColor
-        } : {}
+        }) : Object.assign({}, style)
       })
     }))
   }));
@@ -514,7 +515,7 @@ const Text = ({
   className,
   dataTestId
 }) => {
-  return jsx(StyledText$3, Object.assign({
+  return jsx(StyledText$4, Object.assign({
     "$as": type,
     className: className,
     "$align": align,
@@ -573,7 +574,7 @@ const getTextAlignment = () => ({
   return alignments[$align];
 };
 
-const StyledText$3 = tw.text`
+const StyledText$4 = tw.text`
   tu-text
   ${getFontColor$1()}
   ${p => p.$italicize ? tws`tu-text--italic` : ""}
@@ -681,7 +682,7 @@ const Alert = ({
     ref: ref,
     role: "alert"
   }, {
-    children: [jsx(IconContainer, Object.assign({
+    children: [jsx(IconContainer$1, Object.assign({
       "$inline": inline
     }, {
       children: getIconFromIntent()
@@ -757,7 +758,7 @@ const RightAligned = tw.div`
   alert__right-aligned
   ${p => p.$inline ? tws`alert__right-aligned--inline` : null}
 `;
-const IconContainer = tw.div`
+const IconContainer$1 = tw.div`
   alert__icon-container
   ${p => p.$inline ? tws`alert__icon-container--inline` : null}
 `;
@@ -778,49 +779,36 @@ const Badge = _a => {
     color = "neutral",
     subtle = false,
     className,
-    variant = "badge",
+    variant = "pill",
     dataTestId,
     children,
     size = "default"
-  } = _a,
-      rest = __rest(_a, ["color", "subtle", "className", "variant", "dataTestId", "children", "size"]);
+  } = _a;
+      __rest(_a, ["color", "subtle", "className", "variant", "dataTestId", "children", "size"]);
 
   const isPill = variant === "pill";
-  const tagProps = rest;
-  return jsxs(StyledText$2, Object.assign({
+  return jsx(StyledText$3, Object.assign({
     "$variant": variant,
     className: className,
     "$color": color,
     "$size": size,
     "$subtle": subtle ? subtle : isPill,
     "data-testid": dataTestId,
-    "$as": "span",
-    "$withXIcon": tagProps.onClose ? true : false
+    "$as": "span"
   }, {
-    children: [isPill ? children !== undefined && children !== null ? children > 99 ? "99+" : children : "" : children, variant === "tag" && tagProps.onClose && jsx(StyledIcon, {
-      name: "XCircleIcon",
-      dataTestId: dataTestId + "Icon",
-      onClick: tagProps.onClose,
-      type: "solid",
-      size: size === "default" ? "normal" : "large"
-    })]
+    children: isPill ? children !== undefined && children !== null ? children > 99 ? "99+" : children : "" : children
   }));
 };
 
-const getSizeModifierClass = () => ({
+const getSizeModifierClass$1 = () => ({
   $size,
-  $variant,
-  $withXIcon
+  $variant
 }) => {
   const sizeModifierClass = {
     large: tws`badge--large`,
     default: ""
   };
-  const tagSizeModifierClass = {
-    large: $withXIcon ? tws`tag--icon tag--icon-large` : tws`tag--icon tag--large`,
-    default: $withXIcon ? tws`tag--icon tag--icon-small` : ""
-  };
-  return $variant === "tag" ? tagSizeModifierClass[$size] : sizeModifierClass[$size];
+  return sizeModifierClass[$size];
 };
 
 const getBadgeModifierClass = () => ({
@@ -846,15 +834,12 @@ const getBadgeModifierClass = () => ({
   return colorClasses[$color];
 };
 
-const StyledText$2 = tw.text`
+const StyledText$3 = tw.text`
   ${p => {
   switch (p.$variant) {
     case "badge":
       return tws`badge`;
 
-    case "tag":
-      return tws`badge--tag`;
-
     case "pill":
       return tws`badge--pill`;
 
@@ -863,10 +848,7 @@ const StyledText$2 = tw.text`
   }
 }}
   ${getBadgeModifierClass()}
-  ${getSizeModifierClass()}
-`;
-const StyledIcon = tw(Icon$1)`
-tag__icon
+  ${getSizeModifierClass$1()}
 `;
 
 /**
@@ -1301,7 +1283,7 @@ gap-4
  * The Chart component is a wrapper component for ECharts.
  * Handles events and click functionality.
  *
- * @param {IChartProps} props - The props for the Chart component
+ * @param {ChartProps} props - The props for the Chart component
  * @returns {JSX.Element} Chart component
  */
 
@@ -2086,7 +2068,7 @@ const PopoverListItem = ({
   }, {
     children: [prefix && jsx("div", {
       children: prefix
-    }), jsx(StyledText$1, Object.assign({
+    }), jsx(StyledText$2, Object.assign({
       weight: selected ? "bold" : "default",
       "$selected": selected
     }, {
@@ -2111,7 +2093,7 @@ const PopoverListItem = ({
     })) : content
   }));
 };
-const StyledText$1 = tw(Text)`
+const StyledText$2 = tw(Text)`
   ${p => p.$selected ? tws`text-primary-600` : tws`text-neutral-600`}
   group-hover:text-primary-500
 `;
@@ -2148,7 +2130,7 @@ const PopoverTitle = ({
     className: className,
     "data-testid": dataTestId
   }, {
-    children: [jsx(StyledText, Object.assign({
+    children: [jsx(StyledText$1, Object.assign({
       type: "div",
       subtle: true,
       size: "small",
@@ -2172,7 +2154,7 @@ const Container$5 = tw.div`
       mb-1
     ` : null}
 `;
-const StyledText = tw(Text)`
+const StyledText$1 = tw(Text)`
   flex-1
   text-neutral-500
 `;
@@ -2709,7 +2691,7 @@ const MobileIconButton = tw(IconButton)`
 /**
  * The MenuItem component should be used to inform the user of important information.
  *
- * @param {IMenuItemProps} props - The props for the MenuItem component
+ * @param {MenuItemProps} props - The props for the MenuItem component
  * @returns {JSX.Element} MenuItem component
  */
 
@@ -2752,7 +2734,7 @@ const Label = tw.div`
 /**
  * The MenuList component is used for menus and selects.
  *
- * @param {IMenuListProps} props - The props for the MenuList component
+ * @param {MenuListProps} props - The props for the MenuList component
  * @returns {JSX.Element} MenuList component
  */
 
@@ -2973,7 +2955,7 @@ const useModal = ({
 /**
  * The MinTopFullContentLayout component.
  *
- * @param {IMinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
+ * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
  * @returns {JSX.Element} MinTopFullContentLayout component
  */
 
@@ -3006,7 +2988,7 @@ const Layout$5 = tw.span`
  * on screens < mediaQuery.xxl
  *
  *
- * @param {IProps} props - The props for the FilterListMapLayout component
+ * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
  * @returns {JSX.Element} FilterListMapLayout component
  */
 
@@ -3024,7 +3006,7 @@ const Layout$4 = tw.span`
  * 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
+ * @param {FullWidthRepeatingLayoutProps} props - The props for the FullWidthRepeatingLayout component
  * @returns {JSX.Element} FullWidthRepeatingLayout component
  */
 
@@ -3088,7 +3070,7 @@ const GridArea = ({
  * A grid container that has a flexible number of columns.
  * Adds more columns if constraints allow it, otherwise wraps to next row
  *
- * @param {IIntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
+ * @param {IntrinsicallyResponsiveGridProps} props - The props for the IntrinsicallyResponsiveGrid component
  * @returns {JSX.Element} IntrinsicallyResponsiveGrid component
  */
 
@@ -3215,7 +3197,7 @@ const Layout = tw.div`
 /**
  * The MultiRowTableCell component extendins Table Cell component and formats your content supporting 2 rows.
  *
- * @param {IMultiRowTableCellProps} props - The props for the MultiRowTableCell component
+ * @param {MultiRowTableCellProps} props - The props for the MultiRowTableCell component
  * @returns {JSX.Element} MultiRowTableCell component
  */
 
@@ -3448,7 +3430,7 @@ function usePrompt(message, when = true) {
 /**
  * The Prompt function.
  *
- * @param {IPromptProps} Props -
+ * @param {PromptProps} Props -
  * @returns {void} void
  */
 
@@ -3868,6 +3850,93 @@ const SkeletonLine = tw.div`
 `;
 SkeletonLines.displayName = "SkeletonLines";
 
+/**
+ * Tags allow users to enter information and filter content.
+ * Multiple or single tags can be used to categorise items.
+ * Use short labels for easy scanning. Use two words only if necessary to describe the status and differentiate it from other tags.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} tag component
+ */
+
+const Tag = _a => {
+  var {
+    className,
+    dataTestId,
+    children,
+    size = "default",
+    onClose,
+    color = "primary"
+  } = _a;
+      __rest(_a, ["className", "dataTestId", "children", "size", "onClose", "color"]);
+
+  return jsxs(StyledText, Object.assign({
+    className: className,
+    "$size": size,
+    "data-testid": dataTestId,
+    "$as": "span",
+    "$color": color,
+    "$withXIcon": !!onClose
+  }, {
+    children: [children, onClose && jsx(IconContainer, Object.assign({
+      onClick: onClose
+    }, {
+      children: jsx(Icon$1, {
+        name: "XCircleIcon",
+        dataTestId: dataTestId + "Icon",
+        type: "solid",
+        style: {
+          "-webkit-transition": "-webkit-transform 0.150s"
+        },
+        className: size === "default" ? tws`tag__icon` : tws`tag__icon tag__icon--small`
+      })
+    }))]
+  }));
+};
+
+const getSizeModifierClass = () => ({
+  $size,
+  $withXIcon
+}) => {
+  const tagSizeModifierClass = {
+    default: $withXIcon ? tws`tag--withIcon ` : tws` `,
+    small: $withXIcon ? tws`tag--small tag--withIcon` : tws`tag--small`
+  };
+  return tagSizeModifierClass[$size];
+};
+
+const getColorModifierClass = () => ({
+  $color
+}) => {
+  const colorClasses = {
+    primary: tws`tag--primary`,
+    accent: tws`tag--accent`,
+    success: tws`tag--success`,
+    danger: tws`tag--danger`,
+    warning: tws`tag--warning`,
+    info: tws`tag--info`,
+    neutral: tws`tag--neutral`,
+    good: tws`tag--good`,
+    low: tws`tag--low`,
+    critical: tws`tag--critical`,
+    working: tws`tag--working`,
+    idle: tws`tag--idle`,
+    stopped: tws`tag--stopped`,
+    unknown: tws`tag--unknown`
+  };
+  return colorClasses[$color];
+};
+
+const StyledText = tw.text`
+  tag
+  ${getSizeModifierClass()}
+  ${getColorModifierClass()}
+`;
+const IconContainer = tw.div`
+flex
+self-center	
+`;
+
 const TextArea = React.forwardRef(({
   id,
   name,
@@ -4269,4 +4338,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, 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$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, Tag, Text, TextArea, TextField, TextInput, Tip, TitleNavContentLayout, Toggle, Tooltip, TwoColumnLayout, activityColors, colors, criticalityColors, docs, generalColors, intentColors, useContainerProps, useCustomComponents, useCustomStyles, useDebounce, useLocalStorage, useModal, usePopover, usePrompt, useTimeout };

package/layout/helper/MinTopFullContentLayout.d.ts

@@ -5,14 +5,14 @@ import { CommonProps } from "../../common/CommonProps";
  * Useful when toy want the second child to have 100% height and be scrollable
  * Example: FilterBar + Fleet List
  */
-interface IMinTopFullContentLayoutProps extends CommonProps {
+interface MinTopFullContentLayoutProps extends CommonProps {
     children: ReactNode;
 }
 /**
  * The MinTopFullContentLayout component.
  *
- * @param {IMinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
+ * @param {MinTopFullContentLayoutProps} props - The props for the MinTopFullContentLayout component
  * @returns {JSX.Element} MinTopFullContentLayout component
  */
-export declare const MinTopFullContentLayout: ({ children, className, dataTestId }: IMinTopFullContentLayoutProps) => JSX.Element;
+export declare const MinTopFullContentLayout: ({ children, className, dataTestId }: MinTopFullContentLayoutProps) => JSX.Element;
 export {};

package/layout/responsive/FilterListMapLayout.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-interface IProps {
+interface FilterListMapLayoutProps {
     children: React.ReactNode;
 }
 /**
@@ -15,8 +15,8 @@ interface IProps {
  * on screens < mediaQuery.xxl
  *
  *
- * @param {IProps} props - The props for the FilterListMapLayout component
+ * @param {FilterListMapLayoutProps} props - The props for the FilterListMapLayout component
  * @returns {JSX.Element} FilterListMapLayout component
  */
-export declare const FilterListMapLayout: ({ children }: IProps) => JSX.Element;
+export declare const FilterListMapLayout: ({ children }: FilterListMapLayoutProps) => JSX.Element;
 export {};