@trackunit/react-components 0.0.49 → 0.0.52

package/components/popover/PopoverListItem.d.ts

@@ -13,4 +13,10 @@ export interface PopoverListItemProps extends CommonProps {
     children: React.ReactNode;
     renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
 }
+/**
+ * The PopoverListItem component.
+ *
+ * @param {PopoverListItemProps} props - The props for the PopoverListItem component
+ * @returns {JSX.Element} PopoverListItem component
+ */
 export declare const PopoverListItem: ({ selected, children, disabled, ariaLabel, url, onClick, prefix, suffix, renderAs, dataTestId, }: PopoverListItemProps) => JSX.Element;

package/components/popover/PopoverTitle.d.ts

@@ -5,4 +5,10 @@ export interface PopoverTitleProps extends CommonProps {
     divider?: boolean;
     children?: React.ReactNode;
 }
+/**
+ * The PopoverTitle component.
+ *
+ * @param {PopoverTitleProps} props - The props for the PopoverTitle component
+ * @returns {JSX.Element} PopoverTitle component
+ */
 export declare const PopoverTitle: ({ children, action, divider, className, dataTestId }: PopoverTitleProps) => JSX.Element;

package/components/popover/usePopover.d.ts

@@ -12,6 +12,12 @@ export declare enum PopoverLifecycle {
     open = "open",
     closing = "closing"
 }
+/**
+ * The usePopover Hook.
+ *
+ * @param {UsePopoverProps} props - The props for the usePopover hook
+ * @returns {UsePopoverProps} - UsePopoverProps
+ */
 export declare const usePopover: <T extends HTMLElement, Y extends HTMLElement>({ targetRef, popoverRef, placement, offset, }: UsePopoverProps<T, Y>) => {
     targetRef: React.RefObject<T>;
     popoverRef: React.RefObject<Y>;

package/components/prompt/Prompt.d.ts

@@ -1,10 +1,20 @@
-import { Blocker } from "history";
 interface IPromptProps {
     when: boolean;
     message: string;
 }
-export declare function useInRouterContext(): boolean;
-export declare function useBlocker(blocker: Blocker, when?: boolean): void;
+/**
+ * The usePrompt hook.
+ *
+ * @param {string} message -
+ * @param {boolean} when -
+ * @returns {void} void
+ */
 export declare function usePrompt(message: string, when?: boolean): void;
+/**
+ * The Prompt function.
+ *
+ * @param {IPromptProps} Props -
+ * @returns {void} void
+ */
 export declare const Prompt: ({ when, message }: IPromptProps) => null;
 export {};

package/components/radioGroup/RadioGroup.d.ts

@@ -3,15 +3,12 @@ import { CommonProps } from "../../common/CommonProps";
 interface RadioGroupProps extends CommonProps {
     /**
      *
-     *
-     * @type {React.ReactNode}
      * @memberof RadioGroupProps
      */
     children: React.ReactNode;
     /**
      * The id of the radio group.
      *
-     * @type string
      * @memberof RadioGroupProps
      */
     id: string;
@@ -24,38 +21,39 @@ interface RadioGroupProps extends CommonProps {
     /**
      * The value of the radio group.
      *
-     * @type string | number
      * @memberof RadioGroupProps
      */
     value: string | number;
     /**
      * The name of the radio group.
      *
-     * @type string
      * @memberof RadioGroupProps
      */
     name?: string;
     /**
      * The label of the radio group.
      *
-     * @type string
      * @memberof RadioGroupProps
      */
     label?: string;
     /**
      * Whether the radiogroup is inline or not.
      *
-     * @type boolean
      * @memberof RadioGroupProps
      */
     inline?: boolean;
     /**
      * Whether the radio group is disabled or not.
      *
-     * @type boolean
      * @memberof RadioGroupProps
      */
     disabled?: boolean;
 }
+/**
+ * The RadioGroup component.
+ *
+ * @param {RadioGroupProps} props - The props for the RadioGroup component
+ * @returns {JSX.Element} RadioGroup component
+ */
 export declare const RadioGroup: ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, }: RadioGroupProps) => JSX.Element;
 export {};

package/components/radioGroup/RadioItem.d.ts

@@ -4,17 +4,21 @@ interface RadioItemProps extends CommonProps {
     /**
      * The label of the radio item.
      *
-     * @type {React.ReactNode}
      * @memberof RadioItemProps
      */
     label: React.ReactNode;
     /**
      * The value of the radio item.
      *
-     * @type {(string | number)}
      * @memberof RadioItemProps
      */
     value: string | number;
 }
+/**
+ * The RadioItem component.
+ *
+ * @param {RadioItemProps} props - The props for the RadioItem component
+ * @returns {JSX.Element} RadioItem component
+ */
 export declare const RadioItem: ({ label, value, dataTestId, className }: RadioItemProps) => JSX.Element;
 export {};

package/components/select/CreatableSelect.d.ts

@@ -1,4 +1,10 @@
 /// <reference types="react" />
 import { GroupBase } from "react-select";
 import { SelectProps } from "./shared";
+/**
+ * The CreatableSelect component.
+ *
+ * @param {SelectProps} props - The props for the CreatableSelect component
+ * @returns {JSX.Element} CreatableSelect component
+ */
 export declare const CreatableSelect: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ dataTestId, size, id, label, hideLabel, description, error, info, isInvalid, maxMenuHeight, styles, components, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => JSX.Element;

package/components/select/FieldContainer.d.ts

@@ -10,5 +10,11 @@ interface SelectContainerProps {
     info?: React.ReactNode;
     dataTestId?: string;
 }
+/**
+ * The SelectContainer component.
+ *
+ * @param {SelectContainerProps} props - The props for the SelectContainer component
+ * @returns {JSX.Element} SelectContainer component
+ */
 export declare const SelectContainer: ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, }: SelectContainerProps) => JSX.Element;
 export {};

package/components/select/Select.d.ts

@@ -1,4 +1,10 @@
 /// <reference types="react" />
 import { GroupBase } from "react-select";
 import { SelectProps } from "./shared";
+/**
+ * The Select component.
+ *
+ * @param {SelectProps} props - The props for the Select component
+ * @returns {JSX.Element} Select component
+ */
 export declare const Select: <Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>({ dataTestId, size, id, label, hideLabel, description, error, info, isInvalid, maxMenuHeight, styles, components, ...props }: SelectProps<Option, IsAsync, IsMulti, Group>) => JSX.Element;

package/components/select/shared.d.ts

@@ -13,71 +13,77 @@ export interface ISelectProps<Option, IsAsync extends boolean, IsMulti extends b
     /**
      * Label to be displayed.
      *
-     * @type string
      * @memberof ISelectProps
      */
     label?: string;
     /**
      * To hide the label.
      *
-     * @type boolean
      * @memberof ISelectProps
      */
     hideLabel?: boolean;
     /**
      * Description for the select component.
      *
-     * @type string
      * @memberof ISelectProps
      */
     description?: string;
     /**
      * Whether the component is invalid.
      *
-     * @type boolean
      * @memberof ISelectProps
      */
     isInvalid?: boolean;
     /**
      * Whether the component is disabled.
      *
-     * @type boolean
      * @memberof ISelectProps
      */
     isDisabled?: boolean;
     /**
      * Info of the select component.
      *
-     * @type ThemeReactNode
      * @memberof ISelectProps
      */
     info?: React.ReactNode;
     /**
      * Error of the select component.
      *
-     * @type React.ReactNode
      * @memberof ISelectProps
      */
     error?: React.ReactNode;
     /**
      * Size of the component.
      *
-     * @type "small" | "default"
      * @memberof ISelectProps
      */
     size?: SelectSize;
     /**
      * Whether component is asynchronous or not.
      *
-     * @type {IsAsync}
      * @memberof ISelectProps
      */
     isAsync?: IsAsync;
 }
 export declare type SelectProps<Option, IsAsync extends boolean, IsMulti extends boolean, GroupType extends GroupBase<Option>> = IsAsync extends true ? AsyncProps<Option, IsMulti, GroupType> & ISelectProps<Option, IsAsync, IsMulti, GroupType> : ISelectProps<Option, IsAsync, IsMulti, GroupType>;
+/**
+ * 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
+ */
 export declare const useCustomStyles: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(styles: StylesConfig<Option, IsMulti, Group> | undefined, hasError: boolean, isInvalid: boolean | undefined, size: SelectSize) => {
     customStyles: StylesConfig<Option, IsMulti, Group>;
 };
+/**
+ * The useCustomComponents hook for getting trackunit specific components on react-select.
+ *
+ * @param {SelectComponents} components -
+ * @returns {*}} useCustomComponents hook return
+ */
 export declare const useCustomComponents: <Option, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>>(components: Partial<SelectComponents<Option, IsMulti, Group>> | undefined) => {
     customComponents: Partial<SelectComponents<Option, IsMulti, Group>>;
 };

package/components/skeletonLines/SkeletonLines.d.ts

@@ -4,35 +4,30 @@ export interface ISkeletonLinesProps extends CommonProps {
     /**
      * The number of lines to display.
      *
-     * @type number
      * @memberof ISkeletonLinesProps
      */
     lines?: number;
     /**
      * The height of lines. Can be a number or an array of numbers or string.
      *
-     * @type number | number[] | string
      * @memberof ISkeletonLinesProps
      */
     height?: number | number[] | string;
     /**
      * The width of each lines. Can be a number or an array of numbers or string.
      *
-     * @type number | number[] | string
      * @memberof ISkeletonLinesProps
      */
     width?: number | number[] | string;
     /**
      * Margin of lines.
      *
-     * @type string
      * @memberof ISkeletonLinesProps
      */
     margin?: string;
     /**
      * Additional CSS classes.
      *
-     * @type string
      * @memberof ISkeletonLinesProps
      */
     className?: string;

package/components/spacer/Spacer.d.ts

@@ -5,17 +5,21 @@ 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].
      *
-     * @type number | string
      * @memberof SpacerProps
      */
     minHeight?: string;
     /**
      * The border of the spacer.
      *
-     * @type boolean
      * @memberof SpacerProps
      */
     border?: boolean;
 }
+/**
+ * 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
+ */
 export declare const Spacer: ({ minHeight, border, dataTestId }: SpacerProps) => JSX.Element;
 export {};

package/components/spinner/Spinner.d.ts

@@ -21,4 +21,10 @@ export interface SpinnerProps extends CommonProps {
      */
     containerClassName?: string;
 }
+/**
+ * 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
+ */
 export declare const Spinner: ({ mode, size, centered, className, containerClassName, dataTestId, }: SpinnerProps) => JSX.Element;

package/components/text/Text.d.ts

@@ -8,72 +8,68 @@ export interface TextProps extends CommonProps {
     /**
      * Child nodes.
      *
-     * @type React.ReactNode
      * @memberof TextProps
      */
     children: React.ReactNode;
     /**
      * Type of element. Element can be of types "p", "span", or "div".
      *
-     * @type "p" | "span" | "div"
      * @memberof TextProps
      */
     type?: TextType;
     /**
      * Size of element. Values can be "default", "small", or "large".
      *
-     * @type "small" | "default" | "large"
      * @memberof TextProps
      */
     size?: TextSize;
     /**
      * Alignment of the text. Values can be "left", "center", or "right".
      *
-     * @type "left" | "center" | "right"
      * @memberof TextProps
      */
     align?: TextAlign;
     /**
      * Weight of the text. Values can be "default", "thick", or "bold".
      *
-     * @type "default" | "thick" | "bold"
      * @memberof TextProps
      */
     weight?: TextWeight;
     /**
      * Whether font styles are inverted.
      *
-     * @type boolean
      * @memberof TextProps
      */
     inverted?: boolean;
     /**
      * Whether font styles are subtle or not.
      *
-     * @type boolean
      * @memberof TextProps
      */
     subtle?: boolean;
     /**
      * Whether text is italicized.
      *
-     * @type boolean
      * @memberof TextProps
      */
     italicize?: boolean;
     /**
      * Whether text is uppercase.
      *
-     * @type boolean
      * @memberof TextProps
      */
     uppercase?: boolean;
     /**
      * Whether text is underlined or not.
      *
-     * @type boolean
      * @memberof TextProps
      */
     underline?: boolean;
 }
+/**
+ * The Text component.
+ *
+ * @param {TextProps} props - The props for the Text component
+ * @returns {JSX.Element} Text component
+ */
 export declare const Text: ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, className, dataTestId, }: TextProps) => JSX.Element;

package/components/textArea/TextArea.d.ts

@@ -4,132 +4,78 @@ export declare type TextAreaResize = "none" | "vertical" | "horizontal" | "both"
 export interface TextAreaProps extends CommonProps {
     /**
      * ID of the text area.
-     *
-     * @type string
-     * @memberof TextAreaProps
      */
     id?: string;
     /**
      * Name of the text area.
-     *
-     * @type string
-     * @memberof TextAreaProps
      */
     name?: string;
     /**
      * Label of the text area.
-     *
-     * @type string
-     * @memberof TextAreaProps
      */
     label?: string;
     /**
      * Description of the text area.
-     *
-     * @type string
-     * @memberof TextAreaProps
      */
     description?: string;
     /**
      * Information about the text area.
-     *
-     * @type {React.ReactNode}
-     * @memberof TextAreaProps
      */
     info?: React.ReactNode;
     /**
      * Error message of the text area.
-     *
-     * @type {React.ReactNode}
-     * @memberof TextAreaProps
      */
     error?: React.ReactNode;
     /**
      * Value of the text area.
-     *
-     * @type {React.ReactText}
-     * @memberof TextAreaProps
      */
     value?: React.ReactText;
     /**
      * Tab index specifies the keyboard tab order of the textarea relative to the other controls on the page.
-     *
-     * @type number
-     * @memberof TextAreaProps
      */
     tabIndex?: number;
     /**
      * Whether the text area is disabled or not.
-     *
-     * @type boolean
-     * @memberof TextAreaProps
      */
     disabled?: boolean;
     /**
      * Whether the text area is readonly or not.
-     *
-     * @type boolean
-     * @memberof TextAreaProps
      */
     readOnly?: boolean;
     /**
      * Number of rows in the text area.
-     *
-     * @type number
-     * @memberof TextAreaProps
      */
     rows?: number;
     /**
      * Placeholder text for the text area.
-     *
-     * @type string
-     * @memberof TextAreaProps
      */
     placeholder?: string;
     /**
      * onChange handler of the text area.
-     *
-     * @memberof TextAreaProps
      */
     onChange?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
     /**
      * onFocus handler of the text area.
-     *
-     * @memberof TextAreaProps
      */
     onFocus?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
     /**
      * onBlur handler of the text area.
-     *
-     * @memberof TextAreaProps
      */
     onBlur?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
     /**
      * Maximum length of the text area.
-     *
-     * @type number
-     * @memberof TextAreaProps
      */
     maxLength?: number;
     /**
      * Resize of the text area.
-     *
-     * @type "none" | "vertical" | "horizontal" | "both"
-     * @memberof TextAreaProps
      */
     resize?: TextAreaResize;
     /**
      * Default value of the textarea.
-     *
-     * @type {React.ReactText}
-     * @memberof TextAreaProps
      */
     defaultValue?: React.ReactText;
     /**
      * Whether the text area is required or not.
-     *
-     * @type boolean
-     * @memberof TextAreaProps
      */
     required?: boolean;
 }

package/components/textField/TextField.d.ts

@@ -7,14 +7,12 @@ export interface TextFieldProps extends TextInputProps, FormGroupExposedProps {
      * Set the Maximal length of the value for the input.
      * Adds a TextLenghtIndicator to the right of the helpText.
      *
-     * @type number
      * @memberof TextFieldProps
      */
     maxLength?: number;
     /**
      * If a value is set, the field is rendered in its invalid state.
      *
-     * @type string
      * @memberof TextFieldProps
      */
     errorMessage?: string;

package/components/textField/TextLenghtIndicator.d.ts

@@ -1,6 +1,19 @@
 import * as React from "react";
 export interface TextLengthIndicatorProps {
+    /**
+     * The current length of the content of the input
+     */
     length: number;
+    /**
+     * The max number of characters allowed in the input
+     */
     maxLength: number;
 }
+/**
+ * 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
+ */
 export declare const TextLengthIndicator: React.FC<TextLengthIndicatorProps>;

package/components/tip/Tip.d.ts

@@ -1,18 +1,23 @@
 import * as React from "react";
 import { CommonProps } from "../../common";
-import { IIconProps } from "../icon/Icon";
+import { IconProps } from "../icon/Icon";
 import { TooltipProps } from "../tooltip";
 export interface TipProps extends CommonProps {
     /**
      * Child nodes to render inside the tip.
      *
-     * @type {React.ReactNode}
      * @memberof TipProps
      */
     children: React.ReactNode;
-    iconProps?: Partial<IIconProps>;
+    iconProps?: Partial<IconProps>;
     tooltipProps?: Partial<TooltipProps>;
 }
+/**
+ * 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
+ */
 export declare const Tip: {
     ({ children, iconProps, tooltipProps, dataTestId, ...rest }: TipProps): JSX.Element;
     displayName: string;

package/components/toggle/Toggle.d.ts

@@ -4,64 +4,38 @@ export declare type ToggleSize = "small" | "default";
 export interface ToggleProps extends CommonProps {
     /**
      * ID of the toggle.
-     *
-     * @type string
-     * @memberof ToggleProps
      */
     id: string;
     /**
      * Whether the toggle is toggled(active) or not.
-     *
-     * @type boolean
-     * @memberof ToggleProps
      */
     toggled: boolean;
     /**
      * onChange event handler.
-     *
-     * @memberof ToggleProps
      */
     onChange: (toggled: boolean, event?: React.ChangeEvent<HTMLInputElement>) => void;
     /**
      * Whether the toggle is disabled or not.
-     *
-     * @type boolean
-     * @memberof ToggleProps
      */
     disabled?: boolean;
     /**
      * Size of the toggle.
-     *
-     * @type "small" | "default"
-     * @memberof ToggleProps
      */
     size?: ToggleSize;
     /**
      * Tab index specifies the keyboard tab order of the toggle relative to the other controls on the page.
-     *
-     * @type number
-     * @memberof ToggleProps
      */
     tabIndex?: number;
     /**
      * Whether the toggle is required or not.
-     *
-     * @type boolean
-     * @memberof ToggleProps
      */
     required?: boolean;
     /**
      * Name of the toggle.
-     *
-     * @type string
-     * @memberof ToggleProps
      */
     name?: string;
     /**
      * onBlur event handler.
-     *
-     * @type {React.FocusEventHandler<HTMLInputElement>}
-     * @memberof ToggleProps
      */
     onBlur?: React.FocusEventHandler<HTMLInputElement>;
 }