@trackunit/react-components 0.0.48 → 0.0.51

package/components/checkbox/CheckIcon.d.ts

@@ -1,4 +1,12 @@
 /// <reference types="react" />
-export declare const CheckIcon: ({ className }: {
-    className?: string | undefined;
-}) => JSX.Element;
+import { CommonProps } from "../../common";
+interface CheckIconProps extends CommonProps {
+}
+/**
+ * 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
+ */
+export declare const CheckIcon: ({ className, dataTestId }: CheckIconProps) => JSX.Element;
+export {};

package/components/checkbox/Checkbox.d.ts

@@ -4,14 +4,12 @@ export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HT
     /**
      * A string element to be displayed as a label
      *
-     * @type string
      * @memberof CheckboxProps
      */
     label?: React.ReactNode;
     /**
      * An boolean flag to set checkbox to disabled state
      *
-     * @type boolean
      * @memberof CheckboxProps
      */
     disabled?: boolean;
@@ -19,28 +17,24 @@ export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HT
      * An boolean flag to set invalid mode
      * can be used for handling errors
      *
-     * @type boolean
      * @memberof CheckboxProps
      */
     isInvalid?: boolean;
     /**
      * An boolean flag to set checkbox to readonly mode
      *
-     * @type boolean
      * @memberof CheckboxProps
      */
     readOnly?: boolean;
     /**
      * An string element to be used as input name
      *
-     * @type React.ReactNode
      * @memberof CheckboxProps
      */
     name?: string;
     /**
      * An boolean flag to set checkbox to intermediate state
      *
-     * @type boolean
      * @memberof CheckboxProps
      */
     indeterminate?: boolean;

package/components/checkbox/IndeterminateIcon.d.ts

@@ -1,4 +1,10 @@
 /// <reference types="react" />
+/**
+ * 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
+ */
 export declare const IndeterminateIcon: ({ className }: {
     className?: string | undefined;
 }) => JSX.Element;

package/components/collapse/Collapse.d.ts

@@ -5,7 +5,6 @@ export interface CollapseProps extends CommonProps {
     /**
      * Expands the collapse component during initialization.
      *
-     * @type boolean
      * @memberof CollapseProps
      */
     initialExpanded?: boolean;
@@ -18,16 +17,20 @@ export interface CollapseProps extends CommonProps {
     /**
      * Child nodes.
      *
-     * @type React.ReactNode
      * @memberof CollapseProps
      */
     children: React.ReactNode;
     /**
      * Label to be displayed.
      *
-     * @type React.ReactNode
      * @memberof CollapseProps
      */
     label: React.ReactNode;
 }
+/**
+ * The Collapse component is ued to condense non-important information.
+ *
+ * @param {CollapseProps} props - The props for the Collapse component
+ * @returns {JSX.Element} Collapse component
+ */
 export declare const Collapse: ({ id, initialExpanded, onToggle, label, children, className, dataTestId, }: CollapseProps) => JSX.Element;

package/components/copyableText/CopyableText.d.ts

@@ -3,24 +3,27 @@ interface CopyableTextProps {
     /**
      * The text to be displayed.
      *
-     * @type string
      * @memberof CopyableTextProps
      */
     text?: string;
     /**
      * Alternative text to be displayed.
      *
-     * @type string
      * @memberof CopyableTextProps
      */
     alternativeText?: string;
     /**
      * ID of the component to be used while testing.
      *
-     * @type string
      * @memberof CopyableTextProps
      */
     dataTestId?: string;
 }
+/**
+ * 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
+ */
 export declare const CopyableText: ({ text, alternativeText, dataTestId }: CopyableTextProps) => JSX.Element;
 export {};

package/components/dateField/DateField.d.ts

@@ -5,40 +5,36 @@ export interface DateFieldProps extends Pick<BaseInputProps, "placeholder" | "id
     /**
      * A text label to be displayed next to the indicator
      *
-     * @type string
      * @memberof DateFieldProps
      */
     label?: string;
     /**
      * A text to be displayed under the input with a short description of field purpose
      *
-     * @type string
      * @memberof DateFieldProps
      */
     description?: string;
     /**
      * A default value to be displayed by a input field
      *
-     * @type string
      * @memberof DateFieldProps
      */
     defaultValue?: string;
     /**
      * A flag that can be used to disable the input, default value is false
      *
-     * @type boolean
      * @memberof DateFieldProps
      */
     disabled?: boolean;
     /**
      * Specification of dates not allowed to be selected - i the form of react-day-picker matcher
-     * @type boolean
+     *
      * @memberof DateFieldProps
      */
     disabledDays?: Matcher | Matcher[] | undefined;
     /**
      * A flag that can be set to true to disallow the user to deselect a date. (if false the user can click the selected date to deselect)
-     * @type Matcher | Matcher[] | undefined
+     *
      * @memberof DateFieldProps
      */
     preventDeselect?: boolean;

package/components/dayPicker/DayPicker.d.ts

@@ -1,9 +1,27 @@
 /// <reference types="react" />
 import { Matcher } from "react-day-picker";
 export interface DayPickerProps {
+    /**
+     * A callback function for when a date is selected
+     */
     onDaySelect?: (day: Date) => void;
+    /**
+     * Define any days which may not be selected
+     */
     disabledDays: Matcher | Matcher[] | undefined;
+    /**
+     * Set any days which are selected
+     */
     selectedDays: Matcher | Matcher[] | undefined;
+    /**
+     * Set the language
+     */
     language: string;
 }
+/**
+ * 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
+ */
 export declare const DayPicker: ({ onDaySelect, disabledDays, selectedDays, language, ...rest }: DayPickerProps) => JSX.Element;

package/components/dayPicker/DayPickerPopover.d.ts

@@ -13,4 +13,10 @@ export interface DayPickerPopoverProps {
     buttonContent: JSX.Element;
     language: string;
 }
+/**
+ * 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
+ */
 export declare const DayPickerPopover: ({ disabledDays, className, selectedDay, onDaySelect, intent, placement, size, buttonContent, language, }: DayPickerPopoverProps) => JSX.Element;

package/components/dayPicker/DayRangePicker.d.ts

@@ -8,4 +8,10 @@ export interface DayRangePickerProps {
     disabledDays?: Matcher | Matcher[];
     language: string;
 }
+/**
+ * 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
+ */
 export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, }: DayRangePickerProps) => JSX.Element;

package/components/dayPicker/useLocale.d.ts

@@ -1,2 +1,8 @@
 import { Locale } from "date-fns";
+/**
+ * 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
+ */
 export declare const useLocale: (language: string) => Locale;

package/components/formGroup/FormGroup.d.ts

@@ -4,39 +4,41 @@ export interface FormGroupProps extends CommonProps {
     /**
      * The label for the form group.
      *
-     * @type string | React.ReactNode
      * @memberof FormGroupProps
      */
     label: string | React.ReactNode;
     /**
      * Content to display in the tooltip when hovering the ? icon next to the label.
      *
-     * @type string | React.ReactNode
      * @memberof FormGroupProps
      */
     tip?: string | React.ReactNode;
     /**
      * A string to display under the input element to help the user understand the input.
      *
-     * @type string
      * @memberof FormGroupProps
      */
     helpText?: string;
     /**
      * An addon element to render to the right under the input element.
-     * Used for diaplying maxLength etc.
+     * Used for displaying maxLength etc.
      *
-     * @type string | React.ReactNode
      * @memberof FormGroupProps
      */
     helpAddon?: string | React.ReactNode;
     /**
      * If true the input is rendered in its invalid state.
      *
-     * @type boolean
      * @memberof FormGroupProps
      */
     isInvalid?: boolean;
     children?: React.ReactNode;
 }
+/**
+ * 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
+ */
 export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, children, }: FormGroupProps) => JSX.Element;

package/components/heading/Heading.d.ts

@@ -5,30 +5,32 @@ export interface HeadingProps extends CommonProps {
     /**
      * Child Nodes.
      *
-     * @type React.ReactNode
      * @memberof HeadingProps
      */
     children: React.ReactNode;
     /**
      * Size of heading.
      *
-     * @type "primary" | "secondary" | "tertiary" | "subtitle"
      * @memberof HeadingProps
      */
     variant: HeadingVariant;
     /**
      * Whether the heading uses inverted styles or not.
      *
-     * @type boolean
      * @memberof HeadingProps
      */
     inverted?: boolean;
     /**
      * Whether the heading is a subtitle or not.
      *
-     * @type boolean
      * @memberof HeadingProps
      */
     subtle?: boolean;
 }
+/**
+ * The Heading component should be used for Headings.
+ *
+ * @param {HeadingProps} props - The props for the Heading component
+ * @returns {JSX.Element} Heading component
+ */
 export declare const Heading: ({ children, variant, inverted, subtle, className, dataTestId, }: HeadingProps) => JSX.Element;

package/components/icon/Icon.d.ts

@@ -2,13 +2,12 @@ import { HeroIconName, TrackunitIconName } from "@trackunit/ui-icons";
 import * as React from "react";
 import { CommonProps } from "../../common/CommonProps";
 import { Colors } from "../../constants/colors";
-export interface IIconProps extends CommonProps {
+export interface IconProps extends CommonProps {
     /**
      * The name of the icon to be rendered.
      * HeroIconName and TrackunitIconName are supported.
      *
-     * @type TrackunitIconName | HeroIconName
-     * @memberof IIconProps
+     * @memberof IconProps
      */
     name: TrackunitIconName | HeroIconName;
     /**
@@ -16,8 +15,7 @@ export interface IIconProps extends CommonProps {
      * Supports any colors from the theme.
      * Custom colors can be used by setting a text color in the className.
      *
-     * @type Colors
-     * @memberof IIconProps
+     * @memberof IconProps
      */
     color?: Colors;
     /**
@@ -26,8 +24,7 @@ export interface IIconProps extends CommonProps {
      * Default value is Large.
      * If a custom size is needed, set it in the className.
      *
-     * @type "small" | "normal" | "large"
-     * @memberof IIconProps
+     * @memberof IconProps
      */
     size?: "small" | "normal" | "large";
     /**
@@ -35,8 +32,7 @@ export interface IIconProps extends CommonProps {
      * Default value depends on the Size prop, small == solid, normal == solid, large == outline.
      * Trackunit icons might not support both outline and Solid.
      *
-     * @type "solid" | "outline"
-     * @memberof IIconProps
+     * @memberof IconProps
      */
     type?: "solid" | "outline";
     onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
@@ -46,4 +42,10 @@ export interface IIconProps extends CommonProps {
     fillColor?: string;
     forwardedRef?: React.RefObject<HTMLSpanElement>;
 }
-export declare const Icon: ({ name, size, className, dataTestId, color, onClick, fillColor, type, forwardedRef, }: IIconProps) => JSX.Element | null;
+/**
+ * The Icon component is ued to display an Icon.
+ *
+ * @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;

package/components/indicator/Indicator.d.ts

@@ -3,32 +3,34 @@ import { CommonProps } from "../../common/CommonProps";
 import { Colors } from "../../constants/colors";
 export interface IndicatorProps extends CommonProps {
     /**
-     * The icon to be rendered inside the indicator componeent
+     * The icon to be rendered inside the indicator component
      *
-     * @type {JSX.Element}
      * @memberof IndicatorProps
      */
     icon: JSX.Element;
     /**
      * A color token used to style the icon and the icon background
      *
-     * @type {Colors}
      * @memberof IndicatorProps
      */
     color?: Colors;
     /**
      * A text label to be displayed next to the indicator
      *
-     * @type string
      * @memberof IndicatorProps
      */
     label?: string;
     /**
      * A boolean parameter to display or hide icon background, default value is true
      *
-     * @type boolean
      * @memberof IndicatorProps
      */
     withBackground?: boolean;
 }
+/**
+ * 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
+ */
 export declare const Indicator: ({ dataTestId, icon, label, color, withBackground, ...rest }: IndicatorProps) => JSX.Element;

package/components/label/Label.d.ts

@@ -4,30 +4,34 @@ export interface LabelProps extends CommonProps {
     /**
      * ID of the label.
      *
-     * @type string
      * @memberof LabelProps
      */
     id?: string;
     /**
      * Specifies the element to which the label belongs to.
      *
-     * @type {(string | false)}
      * @memberof LabelProps
      */
     htmlFor: string | false;
     /**
      * The label value.
      *
-     * @type React.ReactNode
      * @memberof LabelProps
      */
     label?: React.ReactNode;
     /**
      *  Description for the label.
      *
-     * @type React.ReactNode
      * @memberof LabelProps
      */
     description?: React.ReactNode;
 }
+/**
+ * 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
+ */
 export declare const Label: ({ id, htmlFor, label, description, className, dataTestId }: LabelProps) => JSX.Element;

package/components/legendItem/LegendItem.d.ts

@@ -8,4 +8,10 @@ export interface ILegendItem {
     className?: string;
     dataTestId?: string;
 }
+/**
+ * The LegendItem component is used to show form legends.
+ *
+ * @param {ILegendItem} props - The props for the LegendItem component
+ * @returns {JSX.Element} LegendItem component
+ */
 export declare const LegendItem: ({ className, label, disabled, selected, onClick, color, dataTestId }: ILegendItem) => JSX.Element;

package/components/menu/MenuButton.d.ts

@@ -3,5 +3,11 @@ interface IMobileButton {
     onClick: () => void;
     className?: string;
 }
+/**
+ * The MenuButton component.
+ *
+ * @param {IMobileButton} props - The props for the MenuButton component
+ * @returns {JSX.Element} MenuButton component
+ */
 export declare const MenuButton: ({ onClick, className }: IMobileButton) => JSX.Element;
 export {};

package/components/menu/MenuItem.d.ts

@@ -3,28 +3,24 @@ export interface IMenuItemProps {
     /**
      * The icon to be rendered in the menu item.
      *
-     * @type {(JSX.Element)}
      * @memberof IMenuItemProps
      */
     icon?: JSX.Element;
     /**
      * Label of the menu item
      *
-     * @type string
      * @memberof IMenuItemProps
      */
     label?: string;
     /**
      * Additional tailwind classes to be applied to the component.
      *
-     * @type string
      * @memberof IMenuItemProps
      */
     className?: string;
     /**
      * Test id to be used for the component.
      *
-     * @type string
      * @memberof IMenuItemProps
      */
     dataTestId?: string;
@@ -35,4 +31,10 @@ export interface 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
+ * @returns {JSX.Element} MenuItem component
+ */
 export declare const MenuItem: ({ className, dataTestId, label, icon, onClick }: IMenuItemProps) => JSX.Element;

package/components/menu/MenuList.d.ts

@@ -7,23 +7,26 @@ export interface IMenuListProps {
     /**
      * Additional tailwind classes to be applied to the component.
      *
-     * @type string
      * @memberof IMenuListProps
      */
     className?: string;
     /**
      * Test id to be used for the component.
      *
-     * @type string
      * @memberof IMenuListProps
      */
     dataTestId?: string;
     /**
      * List of menu items to be rendered.
      *
-     * @type {IMenuListItemProps[]}
      * @memberof IMenuListProps
      */
     menuItems: IMenuListItemProps[];
 }
+/**
+ * The MenuList component is used for menus and selects.
+ *
+ * @param {IMenuListProps} props - The props for the MenuList component
+ * @returns {JSX.Element} MenuList component
+ */
 export declare const MenuList: ({ dataTestId, className, menuItems, ...args }: IMenuListProps) => JSX.Element;

package/components/modal/Modal.d.ts

@@ -5,7 +5,6 @@ export interface ModalProps extends CommonProps {
     /**
      * Whether modal is open or not.
      *
-     * @type boolean
      * @memberof ModalProps
      */
     isOpen?: boolean;
@@ -18,21 +17,18 @@ export interface ModalProps extends CommonProps {
     /**
      * Child elements to be rendered inside the modal.
      *
-     * @type React.ReactNode
      * @memberof ModalProps
      */
     children: React.ReactNode;
     /**
      * Test id to be applied to the modal.
      *
-     * @type string
      * @memberof ModalProps
      */
     dataTestId?: string;
     /**
      * Maximum width of the modal.
      *
-     * @type {ModalWidth}
      * @memberof ModalProps
      */
     maxWidth?: ModalWidth;

package/components/modal/ModalBackdrop.d.ts

@@ -4,4 +4,10 @@ export interface ModalBackdropProps {
     children: React.ReactNode;
     isVisible?: boolean;
 }
+/**
+ * The Backdrop for the modal.
+ *
+ * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
+ * @returns {JSX.Element} ModalBackdrop component
+ */
 export declare const ModalBackdrop: ({ children, isVisible, onClick }: ModalBackdropProps) => JSX.Element;

package/components/modal/useModal.d.ts

@@ -3,6 +3,12 @@ import { ModalProps } from "./Modal";
 export interface UseModalProps {
     closeOnOutsideClick?: boolean;
 }
+/**
+ * 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
+ */
 export declare const useModal: ({ closeOnOutsideClick }?: UseModalProps) => {
     Modal: {
         (props: ModalProps): JSX.Element;

package/components/multiRowTableCell/MultiRowTableCell.d.ts

@@ -4,27 +4,27 @@ interface IMultiRowTableCellProps extends CommonProps {
     /**
      * Main header.
      *
-     * @type string
      * @memberof IMultiRowTableCellProps
      */
     main: string;
     /**
      * Secondary string.
      *
-     * @type string
      * @memberof IMultiRowTableCellProps
      */
     secondary?: string;
     /**
      * Grid area.
      *
-     * @type string
      * @memberof IMultiRowTableCellProps
      */
     area?: string;
 }
 /**
- * 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
  */
 export declare const MultiRowTableCell: ({ main, secondary, area, dataTestId }: IMultiRowTableCellProps) => JSX.Element;
 export {};