@trackunit/react-components 0.0.36

package/components/card/DensityContainer.d.ts

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { CommonProps, Density } from "../../common/CommonProps";
+/**
+ * @summary
+ * For applying auto padding and gap to a Card or Modal or whatever.
+ *
+ * @description
+ * Density applies gap and padding.
+ * The padding should live here, and not on the Card itself, as to not inset the scrollbar in case of overflow.
+ */
+interface ContainerProps extends CommonProps {
+    /**
+     * The density of the card components.
+     * "compact" = 12px gap and padding.
+     * "comfortable" = 16px gap and padding.
+     * "spacious" = 16px gap, 26px padding.
+     *
+     * @type {("none" | "compact" | "comfortable" | "spacious" | "auto")}
+     * @memberof ContainerProps
+     */
+    $density?: Density;
+    /**
+     * Set gap to be 0px (not preferable)
+     */
+    $disableGap?: boolean;
+    /**
+     * The flex direction of the Card. Defaults to "column".
+     *
+     * @type {("row" | "row-reverse" | "column" | "column-reverse")}
+     * @memberof ContainerProps
+     */
+    $direction?: "row" | "row-reverse" | "column" | "column-reverse";
+    children?: React.ReactNode;
+}
+export declare const DensityContainer: ({ children, className, dataTestId, $density, $disableGap, $direction, }: ContainerProps) => JSX.Element;
+export {};

package/components/card/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./Card";
+export * from "./CardBody";
+export * from "./CardFooter";
+export * from "./CardHeader";
+export * from "./DensityContainer";

package/components/chart/Chart.d.ts

@@ -0,0 +1,105 @@
+import * as React from "react";
+export interface IOptionsType {
+    [key: string]: any;
+}
+export interface IChartProps {
+    /**
+     * Option values for Echart.
+     *
+     * @type {IOptionsType}
+     * @memberof IChartProps
+     */
+    options: IOptionsType;
+    /**
+     * Whether or not to low the preloader.
+     *
+     * @type {boolean}
+     * @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;
+    /**
+     * Evebt fired when mouse leaves the chart.
+     *
+     * @memberof IChartProps
+     */
+    mouseLeaveChart?: () => void;
+    /**
+     * class values to be passed to the component.
+     *
+     * @type string
+     * @memberof IChartProps
+     */
+    className?: string;
+    /**
+     * CSS styles for the chart.
+     *
+     * @type {Record<string, unknown>}
+     * @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.
+     *
+     * @type {boolean}
+     * @memberof IChartProps
+     */
+    merge?: boolean;
+    /**
+     * Values for the loading component.
+     *
+     * @type {{ text: string }}
+     * @memberof IChartProps
+     */
+    loadingOption?: {
+        text: string;
+    };
+    /**
+     * Time-zone label.
+     *
+     * @type React.ReactNode
+     * @memberof IChartProps
+     */
+    timezoneLabel?: React.ReactNode;
+    /**
+     * Type of rendered used. Either "svg" or "canvas".
+     *
+     * @type {("svg" | "canvas")}
+     * @memberof IChartProps
+     */
+    renderer?: "svg" | "canvas";
+}
+/**
+ * A wrapper component for Echarts.
+ * Handles events and click functionality.
+ */
+export declare const Chart: ({ options, showLoading, className, style, onChartReady, onClick, onDataZoom, onBrush, onBrushSelected, mouseLeaveChart, merge, loadingOption, timezoneLabel, renderer, }: IChartProps) => JSX.Element;

package/components/chart/index.d.ts

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

package/components/checkbox/CheckIcon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const CheckIcon: ({ className }: {
+    className?: string | undefined;
+}) => JSX.Element;

package/components/checkbox/Checkbox.d.ts

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface CheckboxProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     * 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;
+    /**
+     * 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;
+}
+/**
+ * A base checkbox component that can be used for boolean inputs, selectors etc.
+ * A reference to the input element is provided as the `ref` prop.
+ * Extends props from [React.InputHTMLAttributes](https://reactjs.org/docs/dom-elements.html#input)
+ */
+export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/components/checkbox/IndeterminateIcon.d.ts

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

package/components/checkbox/index.d.ts

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

package/components/collapse/Collapse.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface CollapseProps extends CommonProps {
+    id: string;
+    /**
+     * Expands the collapse component during initialization.
+     *
+     * @type {boolean}
+     * @memberof CollapseProps
+     */
+    initialExpanded?: boolean;
+    /**
+     * onToggle event.
+     *
+     * @memberof CollapseProps
+     */
+    onToggle?: (event: React.MouseEvent<HTMLDivElement>, expanded: boolean) => void;
+    /**
+     * Child nodes.
+     *
+     * @type React.ReactNode
+     * @memberof CollapseProps
+     */
+    children: React.ReactNode;
+    /**
+     * Label to be displayed.
+     *
+     * @type React.ReactNode
+     * @memberof CollapseProps
+     */
+    label: React.ReactNode;
+}
+export declare const Collapse: ({ id, initialExpanded, onToggle, label, children, className, dataTestId, }: CollapseProps) => JSX.Element;

package/components/collapse/index.d.ts

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

package/components/copyableText/CopyableText.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface CopyableTextProps {
+    text?: string;
+    alternativeText?: string;
+    dataTestId?: string;
+}
+export declare const CopyableText: ({ text, alternativeText, dataTestId }: CopyableTextProps) => JSX.Element;
+export {};

package/components/copyableText/index.d.ts

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

package/components/dateField/DateField.d.ts

@@ -0,0 +1,46 @@
+/// <reference types="react" />
+import { Matcher } from "react-day-picker";
+import { BaseInputProps } from "../baseInput";
+export interface DateFieldProps extends Pick<BaseInputProps, "placeholder" | "id" | "dataTestId" | "onChange"> {
+    /**
+     * 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;
+}
+export declare const DateField: import("react").ForwardRefExoticComponent<DateFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/components/dateField/index.d.ts

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

package/components/dayPicker/DayPicker.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Matcher } from "react-day-picker";
+export interface DayPickerProps {
+    onDaySelect?: (day: Date) => void;
+    disabledDays: Matcher | Matcher[] | undefined;
+    selectedDays: Matcher | Matcher[] | undefined;
+    language: string;
+}
+export declare const DayPicker: ({ onDaySelect, disabledDays, selectedDays, language, ...rest }: DayPickerProps) => JSX.Element;

package/components/dayPicker/DayPickerPopover.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { Matcher } from "react-day-picker";
+import { ButtonIntent, ButtonSize } from "../buttons";
+import { PopoverPlacement } from "../popover";
+export interface DayPickerPopoverProps {
+    disabledDays?: Matcher | Matcher[] | undefined;
+    className?: string;
+    onDaySelect: (day: Date) => void;
+    selectedDay?: Date;
+    intent?: ButtonIntent;
+    size?: ButtonSize;
+    placement?: PopoverPlacement;
+    buttonContent: JSX.Element;
+    language: string;
+}
+export declare const DayPickerPopover: ({ disabledDays, className, selectedDay, onDaySelect, intent, placement, size, buttonContent, language, }: DayPickerPopoverProps) => JSX.Element;

package/components/dayPicker/DayRangePicker.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { DateRange, Matcher } from "react-day-picker";
+export declare type IDateRange = DateRange;
+export interface DayRangePickerProps {
+    onRangeSelect?: (range: IDateRange | undefined) => void;
+    selectedDays: IDateRange;
+    dataTestId?: string;
+    disabledDays?: Matcher | Matcher[];
+    language: string;
+}
+export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, }: DayRangePickerProps) => JSX.Element;

package/components/dayPicker/index.d.ts

@@ -0,0 +1,21 @@
+export interface TimeZone {
+    /**
+     * The unique id of the timezone
+     *
+     * @example "America/Denver"
+     */
+    id: string;
+    /**
+     * The human-readable name of the timezone. Combines id and offset.
+     *
+     * @example "America/Denver (-06:00 MDT)"
+     */
+    name: string;
+    /**
+     * @example "-06:00 MDT"
+     */
+    offset: string;
+}
+export * from "./DayPicker";
+export * from "./DayPickerPopover";
+export * from "./DayRangePicker";

package/components/dayPicker/useLocale.d.ts

@@ -0,0 +1,2 @@
+import { Locale } from "date-fns";
+export declare const useLocale: (language: string) => Locale;

package/components/drawer/Drawer.d.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface DrawerProps extends CommonProps {
+    /**
+     * Child nodes
+     *
+     * @type React.ReactNode
+     * @memberof DrawerProps
+     */
+    children: React.ReactNode;
+    /**
+     * Whether the drawer is open or not.
+     *
+     * @type {boolean}
+     * @memberof DrawerProps
+     */
+    isOpen?: boolean;
+    /**
+     * OnClose event.
+     *
+     * @memberof DrawerProps
+     */
+    onClose?: () => void;
+    /**
+     * Whether the drawer is displayed in-line or not.
+     *
+     * @type {boolean}
+     * @memberof DrawerProps
+     */
+    inline?: boolean;
+}
+export declare const Drawer: ({ children, isOpen, onClose, inline, className, dataTestId }: DrawerProps) => JSX.Element;

package/components/drawer/index.d.ts

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

package/components/formGroup/FormGroup.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+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.
+     *
+     * @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;
+}
+export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, children, }: FormGroupProps) => JSX.Element;

package/components/heading/Heading.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export declare type HeadingVariant = "primary" | "secondary" | "tertiary" | "subtitle";
+export interface HeadingProps extends CommonProps {
+    /**
+     * Child Nodes.
+     *
+     * @type React.ReactNode
+     * @memberof HeadingProps
+     */
+    children: React.ReactNode;
+    /**
+     * Size of heading. Accepted values: "primary", "secondary", "tertiary", "subtitle".
+     *
+     * @type {HeadingVariant}
+     * @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;
+}
+export declare const Heading: ({ children, variant, inverted, subtle, className, dataTestId, }: HeadingProps) => JSX.Element;

package/components/heading/index.d.ts

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

package/components/icon/Icon.d.ts

@@ -0,0 +1,49 @@
+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 {
+    /**
+     * The name of the icon to be rendered.
+     * HeroIconName and TrackunitIconName are supported.
+     *
+     * @type {(TrackunitIconName | HeroIconName)}
+     * @memberof IIconProps
+     */
+    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.
+     *
+     * @type {Colors}
+     * @memberof IIconProps
+     */
+    color?: Colors;
+    /**
+     * The size of the icon.
+     * Small = 16x16px, Normal = 20x20px, Large = 24x24px.
+     * Default value is Large.
+     * If a custom size is needed, set it in the className.
+     *
+     * @type {("small" | "normal" | "large")}
+     * @memberof IIconProps
+     */
+    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.
+     *
+     * @type {("solid" | "outline")}
+     * @memberof IIconProps
+     */
+    type?: "solid" | "outline";
+    onClick?: (event: React.MouseEvent<HTMLSpanElement>) => void;
+    /**
+     * @deprecated
+     */
+    fillColor?: string;
+    forwardedRef?: React.RefObject<HTMLSpanElement>;
+}
+export declare const Icon: ({ name, size, className, dataTestId, color, onClick, fillColor, type, forwardedRef, }: IIconProps) => JSX.Element | null;

package/components/index.d.ts

@@ -0,0 +1,37 @@
+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 "./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 "./TextInput/TextInput";
+export * from "./tip";
+export * from "./toggle";
+export * from "./tooltip";

package/components/indicator/Indicator.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common/CommonProps";
+import { Colors } from "../../constants/colors";
+export interface IndicatorProps extends CommonProps {
+    /**
+     * The icon to be rendered inside the indicator componeent
+     *
+     * @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 string
+     * @memberof IndicatorProps
+     */
+    withBackground?: boolean;
+}
+export declare const Indicator: ({ dataTestId, icon, label, color, withBackground, ...rest }: IndicatorProps) => JSX.Element;

package/components/indicator/index.d.ts

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

package/components/label/Label.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+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;
+}
+export declare const Label: ({ id, htmlFor, label, description, className, dataTestId }: LabelProps) => JSX.Element;

package/components/label/index.d.ts

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