@trackunit/react-components 0.0.51 → 0.0.54

package/common/CommonProps.d.ts

@@ -1,14 +1,10 @@
 export interface CommonProps {
     /**
      * A custom class name to be attached to root element
-     *
-     * @memberof CommonProps
      */
     className?: string;
     /**
      * A id that can be used in tests to get the component
-     *
-     * @memberof CommonProps
      */
     dataTestId?: string;
 }

package/common/useContainerProps.d.ts

@@ -1,16 +1,16 @@
-export interface IUseContainerProps {
+export interface UseContainerProps {
     className?: string;
     dataTestId?: string;
 }
 /**
  * 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
  */
-export declare const useContainerProps: ({ className, dataTestId }: IUseContainerProps) => {
+export declare const useContainerProps: ({ className, dataTestId }: UseContainerProps) => {
     className: string | undefined;
     "data-testid": string | undefined;
 };

package/components/{alert → Alert}/Alert.d.ts

@@ -10,52 +10,36 @@ export declare type AlertAction = {
 export interface AlertProps extends CommonProps {
     /**
      * Child nodes.
-     *
-     * @memberof AlertProps
      */
     children: React.ReactNode;
     /**
      * Intent of the alert component.
-     *
-     * @memberof AlertProps
      */
     intent?: AlertIntent;
     /**
      * Title of the alert component.
-     *
-     * @memberof AlertProps
      */
     title?: string;
     /**
      * Action to be performed on clicking the primary button.
-     *
-     * @memberof AlertProps
      */
     primaryAction?: AlertAction;
     /**
      * Action to be performed on clicking the secondary button.
-     *
-     * @memberof AlertProps
      */
     secondaryAction?: AlertAction;
     /**
      * OnClose Event.
-     *
-     * @memberof AlertProps
      */
     onClose?: () => void;
     /**
      * Whether the contents should be displayed inline or not.
-     *
-     * @memberof AlertProps
      */
     inline?: boolean;
     /**
      * A prop to enable autoscroll to alert element
      *
      * could be used for displaying errors on long scrollable forms
-     *
-     * @memberof AlertProps
      */
     autoScroll?: boolean;
 }

package/components/{badge → Badge}/Badge.d.ts

@@ -6,30 +6,22 @@ declare type BadgeVariant = "badge" | "pill" | "tag";
 interface TagProps extends BaseBadgeProps {
     /**
      * The name of the variant.
-     *
-     * @memberof TagProps
      */
     variant: "tag";
     /**
      * A handler for a click event triggered on x icon
      * if not passed then x icon won't be visible
-     *
-     * @memberof TagProps
      */
     onClose?: () => void;
 }
 interface BaseBadgeProps extends CommonProps {
     /**
      * The color of the badge.
-     *
-     * @memberof BadgeProps
      */
     color?: Colors;
     /**
      * Specifies whether the badge is subtle or not.
      * Subtle badges have a light background color wither a darker text color.
-     *
-     * @memberof BadgeProps
      */
     subtle?: boolean;
     /**
@@ -37,34 +29,30 @@ interface BaseBadgeProps extends CommonProps {
      * For the pill variant, numeric values above 99 will be displayed as 99+.
      * Tag will display x icon if you provide onClose handler.
      * Badge is subtle by default.
-     *
-     * @memberof BadgeProps
      */
     variant?: BadgeVariant;
     /**
      * 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.
-     *
-     * @memberof BadgeProps
      */
     className?: string;
     /**
      * Child nodes of the Badge.
-     *
-     * @memberof BadgeProps
      */
     children?: React.ReactNode;
     /**
      * Size of the badge.
-     *
-     * @memberof BadgeProps
      */
     size?: BadgeSize;
 }
 export declare type BadgeProps = BaseBadgeProps | TagProps;
 /**
- * The Badge component us used to display states or similar short form information.
+ * The Badge component us used to display states or similar short informative text.
+ *
+ * _**Do use** badges to show highlighted text based on the state._
+ *
+ * _**Do not use** badges for regular text in places where it makes no sense to use highlighted text._
  *
  * @param {BadgeProps} props - The props for the Badge component
  * @returns {JSX.Element} Badge component

package/components/{baseInput → BaseInput}/BaseInput.d.ts

@@ -7,58 +7,42 @@ export interface BaseInputProps extends FilteredInputProps, CommonProps {
      * An React element to render before the text in the input.
      * This is typically used to render an icon.
      * For other elements than icons, please concider using the addonBefore prop.
-     *
-     * @memberof BaseInputProps
      */
     prefix?: React.ReactNode;
     /**
      * An React element to render after the text in the input.
      * This is typically used to render an icon.
      * For other elements than icons, please concider using the addonAfter prop.
-     *
-     * @memberof BaseInputProps
      */
     suffix?: React.ReactNode;
     /**
      * An React element to render in a seperate container before the text in the input.
      * This is typically used to render text.
      * For icons, please concider using the prefix prop.
-     *
-     * @memberof BaseInputProps
      */
     addonBefore?: React.ReactNode;
     /**
      * An React element to render in a seperate container after the text in the input.
      * This is typically used to render text.
      * For icons, please concider using the suffix prop.
-     *
-     * @memberof BaseInputProps
      */
     addonAfter?: React.ReactNode;
     /**
      * An ReactNode to render at the end of the input field befire the addonAfter.
      * Mainly meant for the icon button actions for special input types.
-     *
-     * @memberof BaseInputProps
      */
     actions?: React.ReactNode;
     /**
      *  The size of the input.
      *  Default == 40px, Small == 32px.
-     *
-     * @memberof BaseInputProps
      */
     fieldSize?: FieldSize;
     /**
      * If ture the field is rendered in its invalid state.
-     *
-     * @memberof BaseInputProps
      */
     isInvalid?: boolean;
     /**
      * The Placeholder text for the input.
-     *
-     * @memberof BaseInputProps
      */
     placeholder?: string;
 }

package/components/{card → Card}/Card.d.ts

@@ -9,14 +9,10 @@ export interface CardProps extends CommonProps {
     onMouseLeave?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     /**
      * Whether the card should have full height or not.
-     *
-     * @memberof CardProps
      */
     fullHeight?: boolean;
     /**
      * Whether the card should overflow contents.
-     *
-     * @memberof CardProps
      */
     overflow?: Overflow;
     /**

package/components/{card → Card}/CardHeader.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { CommonProps, Density } from "../../common/CommonProps";
-import { HeadingVariant } from "../heading/Heading";
+import { HeadingVariant } from "../Heading/Heading";
 interface CardHeaderProps extends CommonProps {
     /** The text to show in the modal main heading */
     heading: string;

package/components/{card → Card}/DensityContainer.d.ts

@@ -6,20 +6,14 @@ interface ContainerProps extends CommonProps {
      * "compact" = 12px gap and padding.
      * "comfortable" = 16px gap and padding.
      * "spacious" = 16px gap, 26px padding.
-     *
-     * @memberof ContainerProps
      */
     $density?: Density;
     /**
      * Set gap to be 0px (not preferable)
-     *
-     * @memberof ContainerProps
      */
     $disableGap?: boolean;
     /**
      * The flex direction of the Card. Defaults to "column".
-     *
-     * @memberof ContainerProps
      */
     $direction?: "row" | "row-reverse" | "column" | "column-reverse";
     children?: React.ReactNode;

package/components/{chart → Chart}/Chart.d.ts

@@ -2,91 +2,63 @@ import * as React from "react";
 export interface IOptionsType {
     [key: string]: any;
 }
-export interface IChartProps {
+export interface ChartProps {
     /**
      * Option values for EChart.
-     *
-     * @memberof IChartProps
      */
     options: IOptionsType;
     /**
      * Whether or not to low the preloader.
-     *
-     * @memberof IChartProps
      */
     showLoading?: boolean;
     /**
      * onClick event.
-     *
-     * @memberof IChartProps
      */
     onClick?: (event: any) => void;
     /**
      * onDataZoom event.
-     *
-     * @memberof IChartProps
      */
     onDataZoom?: (event: any) => void;
     /**
      * onBrush event.
-     *
-     * @memberof IChartProps
      */
     onBrush?: (event: any) => void;
     /**
      * Event fired when brush is selected.
-     *
-     * @memberof IChartProps
      */
     onBrushSelected?: (event: any) => void;
     /**
      * Event fired when mouse leaves the chart.
-     *
-     * @memberof IChartProps
      */
     mouseLeaveChart?: () => void;
     /**
      * Class values to be passed to the component.
-     *
-     * @memberof IChartProps
      */
     className?: string;
     /**
      * CSS styles for the chart.
-     *
-     * @memberof IChartProps
      */
     style?: Record<string, string | number>;
     /**
      * To denote of chart is ready or not.
-     *
-     * @memberof IChartProps
      */
     onChartReady?: (chart: any) => void;
     /**
      * Whether to merge with previous option.
-     *
-     * @memberof IChartProps
      */
     merge?: boolean;
     /**
      * Values for the loading component.
-     *
-     * @memberof IChartProps
      */
     loadingOption?: {
         text: string;
     };
     /**
      * Time-zone label.
-     *
-     * @memberof IChartProps
      */
     timezoneLabel?: React.ReactNode;
     /**
      * Type of rendered used. Either "svg" or "canvas".
-     *
-     * @memberof IChartProps
      */
     renderer?: "svg" | "canvas";
 }
@@ -94,7 +66,7 @@ export interface IChartProps {
  * 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
  */
-export declare const Chart: ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, merge, loadingOption, timezoneLabel, renderer, }: IChartProps) => JSX.Element;
+export declare const Chart: ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, merge, loadingOption, timezoneLabel, renderer, }: ChartProps) => JSX.Element;

package/components/{checkbox → Checkbox}/Checkbox.d.ts

@@ -3,39 +3,27 @@ import { CommonProps } from "../../common/CommonProps";
 export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
     /**
      * A string element to be displayed as a label
-     *
-     * @memberof CheckboxProps
      */
     label?: React.ReactNode;
     /**
      * An boolean flag to set checkbox to disabled state
-     *
-     * @memberof CheckboxProps
      */
     disabled?: boolean;
     /**
      * An boolean flag to set invalid mode
      * can be used for handling errors
-     *
-     * @memberof CheckboxProps
      */
     isInvalid?: boolean;
     /**
      * An boolean flag to set checkbox to readonly mode
-     *
-     * @memberof CheckboxProps
      */
     readOnly?: boolean;
     /**
      * An string element to be used as input name
-     *
-     * @memberof CheckboxProps
      */
     name?: string;
     /**
      * An boolean flag to set checkbox to intermediate state
-     *
-     * @memberof CheckboxProps
      */
     indeterminate?: boolean;
 }

package/components/{collapse → Collapse}/Collapse.d.ts

@@ -4,26 +4,18 @@ export interface CollapseProps extends CommonProps {
     id: string;
     /**
      * Expands the collapse component during initialization.
-     *
-     * @memberof CollapseProps
      */
     initialExpanded?: boolean;
     /**
      * onToggle event.
-     *
-     * @memberof CollapseProps
      */
     onToggle?: (event: React.MouseEvent<HTMLDivElement>, expanded: boolean) => void;
     /**
      * Child nodes.
-     *
-     * @memberof CollapseProps
      */
     children: React.ReactNode;
     /**
      * Label to be displayed.
-     *
-     * @memberof CollapseProps
      */
     label: React.ReactNode;
 }

package/components/{copyableText → CopyableText}/CopyableText.d.ts

@@ -2,20 +2,14 @@
 interface CopyableTextProps {
     /**
      * The text to be displayed.
-     *
-     * @memberof CopyableTextProps
      */
     text?: string;
     /**
      * Alternative text to be displayed.
-     *
-     * @memberof CopyableTextProps
      */
     alternativeText?: string;
     /**
      * ID of the component to be used while testing.
-     *
-     * @memberof CopyableTextProps
      */
     dataTestId?: string;
 }

package/components/{dateField → DateField}/DateField.d.ts

@@ -1,41 +1,29 @@
 /// <reference types="react" />
 import { Matcher } from "react-day-picker";
-import { BaseInputProps } from "../baseInput";
+import { BaseInputProps } from "../BaseInput";
 export interface DateFieldProps extends Pick<BaseInputProps, "placeholder" | "id" | "dataTestId" | "onChange"> {
     /**
      * A text label to be displayed next to the indicator
-     *
-     * @memberof DateFieldProps
      */
     label?: string;
     /**
      * A text to be displayed under the input with a short description of field purpose
-     *
-     * @memberof DateFieldProps
      */
     description?: string;
     /**
      * A default value to be displayed by a input field
-     *
-     * @memberof DateFieldProps
      */
     defaultValue?: string;
     /**
      * A flag that can be used to disable the input, default value is false
-     *
-     * @memberof DateFieldProps
      */
     disabled?: boolean;
     /**
      * Specification of dates not allowed to be selected - i the form of react-day-picker matcher
-     *
-     * @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)
-     *
-     * @memberof DateFieldProps
      */
     preventDeselect?: boolean;
 }

package/components/{dayPicker → DayPicker}/DayPickerPopover.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { Matcher } from "react-day-picker";
 import { ButtonIntent, ButtonSize } from "../buttons";
-import { PopoverPlacement } from "../popover";
+import { PopoverPlacement } from "../Popover";
 export interface DayPickerPopoverProps {
     disabledDays?: Matcher | Matcher[] | undefined;
     className?: string;

package/components/{formGroup → FormGroup}/FormGroup.d.ts

@@ -3,33 +3,23 @@ import { CommonProps } from "../../common";
 export interface FormGroupProps extends CommonProps {
     /**
      * The label for the form group.
-     *
-     * @memberof FormGroupProps
      */
     label: string | React.ReactNode;
     /**
      * Content to display in the tooltip when hovering the ? icon next to the label.
-     *
-     * @memberof FormGroupProps
      */
     tip?: string | React.ReactNode;
     /**
      * A string to display under the input element to help the user understand the input.
-     *
-     * @memberof FormGroupProps
      */
     helpText?: string;
     /**
      * An addon element to render to the right under the input element.
      * Used for displaying maxLength etc.
-     *
-     * @memberof FormGroupProps
      */
     helpAddon?: string | React.ReactNode;
     /**
      * If true the input is rendered in its invalid state.
-     *
-     * @memberof FormGroupProps
      */
     isInvalid?: boolean;
     children?: React.ReactNode;

package/components/{heading → Heading}/Heading.d.ts

@@ -4,26 +4,18 @@ export declare type HeadingVariant = "primary" | "secondary" | "tertiary" | "sub
 export interface HeadingProps extends CommonProps {
     /**
      * Child Nodes.
-     *
-     * @memberof HeadingProps
      */
     children: React.ReactNode;
     /**
      * Size of heading.
-     *
-     * @memberof HeadingProps
      */
     variant: HeadingVariant;
     /**
      * Whether the heading uses inverted styles or not.
-     *
-     * @memberof HeadingProps
      */
     inverted?: boolean;
     /**
      * Whether the heading is a subtitle or not.
-     *
-     * @memberof HeadingProps
      */
     subtle?: boolean;
 }

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;