@trackunit/react-components 0.0.52 → 0.0.55

package/components/{icon → Icon}/Icon.d.ts

@@ -6,16 +6,12 @@ export interface IconProps extends CommonProps {
     /**
      * The name of the icon to be rendered.
      * HeroIconName and TrackunitIconName are supported.
-     *
-     * @memberof IconProps
      */
     name: TrackunitIconName | HeroIconName;
     /**
      * The color of the icon.
      * Supports any colors from the theme.
      * Custom colors can be used by setting a text color in the className.
-     *
-     * @memberof IconProps
      */
     color?: Colors;
     /**
@@ -23,16 +19,12 @@ export interface IconProps extends CommonProps {
      * Small = 16x16px, Normal = 20x20px, Large = 24x24px.
      * Default value is Large.
      * If a custom size is needed, set it in the className.
-     *
-     * @memberof IconProps
      */
     size?: "small" | "normal" | "large";
     /**
      * Select if the icon should be rendered as solid or outline.
      * Default value depends on the Size prop, small == solid, normal == solid, large == outline.
      * Trackunit icons might not support both outline and Solid.
-     *
-     * @memberof IconProps
      */
     type?: "solid" | "outline";
     onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
@@ -41,6 +33,12 @@ export interface IconProps extends CommonProps {
      */
     fillColor?: string;
     forwardedRef?: React.RefObject<HTMLSpanElement>;
+    /**
+     * Custom styles object used to override existing styles or add some extra styling
+     *
+     * @memberof IconProps
+     */
+    style?: Record<string, string>;
 }
 /**
  * The Icon component is ued to display an Icon.
@@ -48,4 +46,4 @@ export interface IconProps extends CommonProps {
  * @param {IconProps} props - The props for the Icon component
  * @returns {JSX.Element} Icon component
  */
-export declare const Icon: ({ name, size, className, dataTestId, color, onClick, fillColor, type, forwardedRef, }: IconProps) => JSX.Element | null;
+export declare const Icon: ({ name, size, className, dataTestId, color, onClick, fillColor, type, style, forwardedRef, }: IconProps) => JSX.Element | null;

package/components/{indicator → Indicator}/Indicator.d.ts

@@ -4,31 +4,29 @@ import { Colors } from "../../constants/colors";
 export interface IndicatorProps extends CommonProps {
     /**
      * The icon to be rendered inside the indicator component
-     *
-     * @memberof IndicatorProps
      */
     icon: JSX.Element;
     /**
      * A color token used to style the icon and the icon background
-     *
-     * @memberof IndicatorProps
      */
     color?: Colors;
     /**
      * A text label to be displayed next to the indicator
-     *
-     * @memberof IndicatorProps
      */
     label?: string;
     /**
      * A boolean parameter to display or hide icon background, default value is true
-     *
-     * @memberof IndicatorProps
      */
     withBackground?: boolean;
 }
 /**
- * The Indicator components are non-interactive elements that communicate essential aspects of the state of an asset.
+ * Indicators are non-interactive elements that communicate essential aspects of the state of an asset.
+ *
+ * Whenever an asset is presented, indicators provide the necessary information for a user to comprehend the state of the asset.
+ *
+ * _**Do use** indicators to communicate essential aspects of the state of an asset._
+ *
+ * _**Do not use** indicators for non-essential information, or to communicate information unrelated to the state of an asset._
  *
  * @param {IndicatorProps} props - The props for the Indicator component
  * @returns {JSX.Element} Indicator component

package/components/{label → Label}/Label.d.ts

@@ -3,26 +3,18 @@ import { CommonProps } from "../../common/CommonProps";
 export interface LabelProps extends CommonProps {
     /**
      * ID of the label.
-     *
-     * @memberof LabelProps
      */
     id?: string;
     /**
      * Specifies the element to which the label belongs to.
-     *
-     * @memberof LabelProps
      */
     htmlFor: string | false;
     /**
      * The label value.
-     *
-     * @memberof LabelProps
      */
     label?: React.ReactNode;
     /**
      *  Description for the label.
-     *
-     * @memberof LabelProps
      */
     description?: React.ReactNode;
 }

package/components/{menu → Menu}/MenuItem.d.ts

@@ -1,40 +1,30 @@
 /// <reference types="react" />
-export interface IMenuItemProps {
+export interface MenuItemProps {
     /**
      * The icon to be rendered in the menu item.
-     *
-     * @memberof IMenuItemProps
      */
     icon?: JSX.Element;
     /**
      * Label of the menu item
-     *
-     * @memberof IMenuItemProps
      */
     label?: string;
     /**
      * Additional tailwind classes to be applied to the component.
-     *
-     * @memberof IMenuItemProps
      */
     className?: string;
     /**
      * Test id to be used for the component.
-     *
-     * @memberof IMenuItemProps
      */
     dataTestId?: string;
     /**
      * onClick event.
-     *
-     * @memberof IMenuItemProps
      */
     onClick: () => void;
 }
 /**
  * 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
  */
-export declare const MenuItem: ({ className, dataTestId, label, icon, onClick }: IMenuItemProps) => JSX.Element;
+export declare const MenuItem: ({ className, dataTestId, label, icon, onClick }: MenuItemProps) => JSX.Element;

package/components/{menu → Menu}/MenuList.d.ts

@@ -1,32 +1,26 @@
 /// <reference types="react" />
-import { IMenuItemProps } from "./MenuItem";
-export interface IMenuListItemProps extends IMenuItemProps {
+import { MenuItemProps } from "./MenuItem";
+export interface MenuListItemProps extends MenuItemProps {
     showDivider?: boolean;
 }
-export interface IMenuListProps {
+export interface MenuListProps {
     /**
      * Additional tailwind classes to be applied to the component.
-     *
-     * @memberof IMenuListProps
      */
     className?: string;
     /**
      * Test id to be used for the component.
-     *
-     * @memberof IMenuListProps
      */
     dataTestId?: string;
     /**
      * List of menu items to be rendered.
-     *
-     * @memberof IMenuListProps
      */
-    menuItems: IMenuListItemProps[];
+    menuItems: MenuListItemProps[];
 }
 /**
  * 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
  */
-export declare const MenuList: ({ dataTestId, className, menuItems, ...args }: IMenuListProps) => JSX.Element;
+export declare const MenuList: ({ dataTestId, className, menuItems, ...args }: MenuListProps) => JSX.Element;

package/components/{modal → Modal}/Modal.d.ts

@@ -4,32 +4,22 @@ declare type ModalWidth = "slim" | "narrow" | "normal" | "wide" | "full";
 export interface ModalProps extends CommonProps {
     /**
      * Whether modal is open or not.
-     *
-     * @memberof ModalProps
      */
     isOpen?: boolean;
     /**
      * Whether modal should be closed when clicked outside of it.
-     *
-     * @memberof ModalProps
      */
     onDismissClick?: () => void;
     /**
      * Child elements to be rendered inside the modal.
-     *
-     * @memberof ModalProps
      */
     children: React.ReactNode;
     /**
      * Test id to be applied to the modal.
-     *
-     * @memberof ModalProps
      */
     dataTestId?: string;
     /**
      * Maximum width of the modal.
-     *
-     * @memberof ModalProps
      */
     maxWidth?: ModalWidth;
 }

package/components/{multiRowTableCell → MultiRowTableCell}/MultiRowTableCell.d.ts

@@ -1,30 +1,24 @@
 /// <reference types="react" />
 import { CommonProps } from "../../common/CommonProps";
-interface IMultiRowTableCellProps extends CommonProps {
+interface MultiRowTableCellProps extends CommonProps {
     /**
      * Main header.
-     *
-     * @memberof IMultiRowTableCellProps
      */
     main: string;
     /**
      * Secondary string.
-     *
-     * @memberof IMultiRowTableCellProps
      */
     secondary?: string;
     /**
      * Grid area.
-     *
-     * @memberof IMultiRowTableCellProps
      */
     area?: string;
 }
 /**
  * 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
  */
-export declare const MultiRowTableCell: ({ main, secondary, area, dataTestId }: IMultiRowTableCellProps) => JSX.Element;
+export declare const MultiRowTableCell: ({ main, secondary, area, dataTestId }: MultiRowTableCellProps) => JSX.Element;
 export {};

package/components/NumberField/NumberField.d.ts

@@ -1,14 +1,19 @@
 /// <reference types="react" />
-import { FormGroupProps } from "../formGroup/FormGroup";
+import { FormGroupProps } from "../FormGroup/FormGroup";
 import { NumberInputProps } from "../NumberInput/NumberInput";
 declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
 export interface NumberFieldProps extends NumberInputProps, FormGroupExposedProps {
     /**
      * If a value is set, the field is rendered in its invalid state.
-     *
-     * @memberof NumberFieldProps
      */
     errorMessage?: string;
 }
+/**
+ * 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.
+ */
 export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/components/NumberInput/NumberInput.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseInputProps } from "../baseInput";
+import { BaseInputProps } from "../BaseInput";
 declare type BaseInputExposedProps = Omit<BaseInputProps, "type">;
 export interface NumberInputProps extends BaseInputExposedProps {
 }

package/components/{pageHeading → PageHeading}/PageHeading.d.ts

@@ -2,20 +2,14 @@
 interface PageHeadingProps {
     /**
      * The title of the page.
-     *
-     * @memberof PageHeadingProps
      */
     title: string;
     /**
      * Subtitle of the page.
-     *
-     * @memberof PageHeadingProps
      */
     subtitle?: string;
     /**
      * Test id to be used for the component.
-     *
-     * @memberof PageHeadingProps
      */
     dataTestId?: string;
     badge?: string;

package/components/{prompt → Prompt}/Prompt.d.ts

@@ -1,4 +1,4 @@
-interface IPromptProps {
+interface PromptProps {
     when: boolean;
     message: string;
 }
@@ -13,8 +13,8 @@ export declare function usePrompt(message: string, when?: boolean): void;
 /**
  * The Prompt function.
  *
- * @param {IPromptProps} Props -
+ * @param {PromptProps} Props -
  * @returns {void} void
  */
-export declare const Prompt: ({ when, message }: IPromptProps) => null;
+export declare const Prompt: ({ when, message }: PromptProps) => null;
 export {};

package/components/{radioGroup → RadioGroup}/RadioGroup.d.ts

@@ -2,50 +2,34 @@ import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 interface RadioGroupProps extends CommonProps {
     /**
-     *
-     * @memberof RadioGroupProps
      */
     children: React.ReactNode;
     /**
      * The id of the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     id: string;
     /**
      * onChange handler for the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     onChange: (e: React.FormEvent<HTMLInputElement>) => void;
     /**
      * The value of the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     value: string | number;
     /**
      * The name of the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     name?: string;
     /**
      * The label of the radio group.
-     *
-     * @memberof RadioGroupProps
      */
     label?: string;
     /**
      * Whether the radiogroup is inline or not.
-     *
-     * @memberof RadioGroupProps
      */
     inline?: boolean;
     /**
      * Whether the radio group is disabled or not.
-     *
-     * @memberof RadioGroupProps
      */
     disabled?: boolean;
 }

package/components/{radioGroup → RadioGroup}/RadioItem.d.ts

@@ -3,14 +3,10 @@ import { CommonProps } from "../../common/CommonProps";
 interface RadioItemProps extends CommonProps {
     /**
      * The label of the radio item.
-     *
-     * @memberof RadioItemProps
      */
     label: React.ReactNode;
     /**
      * The value of the radio item.
-     *
-     * @memberof RadioItemProps
      */
     value: string | number;
 }

package/components/{select → Select}/shared.d.ts

@@ -12,56 +12,38 @@ export declare type SelectSize = "small" | "default";
 export interface ISelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> extends CommonProps, Props<Option, IsMulti, GroupType> {
     /**
      * Label to be displayed.
-     *
-     * @memberof ISelectProps
      */
     label?: string;
     /**
      * To hide the label.
-     *
-     * @memberof ISelectProps
      */
     hideLabel?: boolean;
     /**
      * Description for the select component.
-     *
-     * @memberof ISelectProps
      */
     description?: string;
     /**
      * Whether the component is invalid.
-     *
-     * @memberof ISelectProps
      */
     isInvalid?: boolean;
     /**
      * Whether the component is disabled.
-     *
-     * @memberof ISelectProps
      */
     isDisabled?: boolean;
     /**
      * Info of the select component.
-     *
-     * @memberof ISelectProps
      */
     info?: React.ReactNode;
     /**
      * Error of the select component.
-     *
-     * @memberof ISelectProps
      */
     error?: React.ReactNode;
     /**
      * Size of the component.
-     *
-     * @memberof ISelectProps
      */
     size?: SelectSize;
     /**
      * Whether component is asynchronous or not.
-     *
-     * @memberof ISelectProps
      */
     isAsync?: IsAsync;
 }

package/components/{skeletonLines → SkeletonLines}/SkeletonLines.d.ts

@@ -1,36 +1,26 @@
 /// <reference types="react" />
 import { CommonProps } from "../../common/CommonProps";
-export interface ISkeletonLinesProps extends CommonProps {
+export interface SkeletonLinesProps extends CommonProps {
     /**
      * The number of lines to display.
-     *
-     * @memberof ISkeletonLinesProps
      */
     lines?: number;
     /**
      * The height of lines. Can be a number or an array of numbers or string.
-     *
-     * @memberof ISkeletonLinesProps
      */
     height?: number | number[] | string;
     /**
      * The width of each lines. Can be a number or an array of numbers or string.
-     *
-     * @memberof ISkeletonLinesProps
      */
     width?: number | number[] | string;
     /**
      * Margin of lines.
-     *
-     * @memberof ISkeletonLinesProps
      */
     margin?: string;
     /**
      * Additional CSS classes.
-     *
-     * @memberof ISkeletonLinesProps
      */
     className?: string;
 }
-export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId }: ISkeletonLinesProps) => JSX.Element>;
+export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId }: SkeletonLinesProps) => JSX.Element>;
 export default SkeletonLines;

package/components/{spacer → Spacer}/Spacer.d.ts

@@ -4,14 +4,10 @@ interface SpacerProps extends CommonProps {
     /**
      * The minimum height of the spacer. Defaults to 1px.
      * Possible values are "normal"(8px), and "large" (32px). Use className prop to use custom min-height values, example: min-h-[100px].
-     *
-     * @memberof SpacerProps
      */
     minHeight?: string;
     /**
      * The border of the spacer.
-     *
-     * @memberof SpacerProps
      */
     border?: boolean;
 }

package/components/{spinner → Spinner}/Spinner.d.ts

@@ -22,7 +22,15 @@ export interface SpinnerProps extends CommonProps {
     containerClassName?: string;
 }
 /**
- * The Spinner component should be used st show a loading state.
+ * The spinner component provides visual feedback that data is being processed.
+ *
+ * Spinners are used when performing actions. They notify to the user that their request is being processed. Although they do not provide details about what is occurring on the back-end, they reassure the user that their action is being processed.
+ *
+ * Common actions that benefit from spinners include any create, update, or delete actions that may have a lot of data to process. It can be used in a table, after a primary or secondary button click, or even in a modal.
+ *
+ * Use a spinner component for any action that cannot be performed instantly and will only require a short time (between 1 to 5 seconds) to process.
+ *
+ * Use when retrieving or refreshing small data amounts, such as status.
  *
  * @param {SpinnerProps} props - The props for the Spinner component
  * @returns {JSX.Element} Spinner component

package/components/Tag/Tag.d.ts

@@ -0,0 +1,44 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+import { Colors } from "../../constants/colors";
+export declare type TagSize = "default" | "small";
+interface TagProps extends CommonProps {
+    /**
+     * The color of the tag
+     *
+     */
+    color?: Colors;
+    /**
+     * A handler for a click event triggered on x icon
+     * if not passed then x icon won't be visible
+     *
+     */
+    onClose?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    /**
+     * Custom classNames can be added to make adjustments where needed.
+     * Example: Set a maximum width of the badge by adding the className "max-w-[your-max-width]" or similar tailwind max-w class.
+     * This will make the badge truncate the text if it is too long.
+     *
+     */
+    className?: string;
+    /**
+     * Child nodes of the tag.
+     *
+     */
+    children?: React.ReactNode;
+    /**
+     * Size of the tag.
+     *
+     */
+    size?: TagSize;
+}
+/**
+ * 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
+ */
+export declare const Tag: ({ className, dataTestId, children, size, onClose, color, ...rest }: TagProps) => JSX.Element;
+export {};

package/components/Tag/index.d.ts

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