@trackunit/react-components 0.0.36

package/components/legendItem/LegendItem.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+export interface ILegendItem {
+    label: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    color: string;
+    className?: string;
+    dataTestId?: string;
+}
+export declare const LegendItem: ({ className, label, disabled, selected, onClick, color, dataTestId }: ILegendItem) => JSX.Element;

package/components/legendItem/index.d.ts

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

package/components/menu/MenuButton.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface IMobileButton {
+    onClick: () => void;
+    className?: string;
+}
+export declare const MenuButton: ({ onClick, className }: IMobileButton) => JSX.Element;
+export {};

package/components/menu/MenuItem.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface IMenuItemProps {
+    icon?: JSX.Element;
+    label?: string;
+    className?: string;
+    dataTestId?: string;
+    onClick: () => void;
+}
+export declare const MenuItem: ({ className, dataTestId, label, icon, onClick }: IMenuItemProps) => JSX.Element;

package/components/menu/MenuList.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { IMenuItemProps } from "./MenuItem";
+export interface IMenuListItemProps extends IMenuItemProps {
+    showDivider?: boolean;
+}
+export interface IMenuListProps {
+    className?: string;
+    dataTestId?: string;
+    menuItems: IMenuListItemProps[];
+}
+export declare const MenuList: ({ dataTestId, className, menuItems }: IMenuListProps) => JSX.Element;

package/components/menu/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./MenuButton";
+export * from "./MenuItem";
+export * from "./MenuList";

package/components/modal/Modal.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+declare type ModalWidth = "slim" | "narrow" | "normal" | "wide" | "full";
+export interface ModalProps extends CommonProps {
+    /**
+     * Whether modal is open or not.
+     *
+     * @type {boolean}
+     * @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.
+     *
+     * @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;
+}
+/** Preferred usage is with useModal(), so the modal is placed at highest level. */
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/modal/ModalBackdrop.d.ts

@@ -0,0 +1,7 @@
+import * as React from "react";
+export interface ModalBackdropProps {
+    onClick: () => void;
+    children: React.ReactNode;
+    isVisible?: boolean;
+}
+export declare const ModalBackdrop: ({ children, isVisible, onClick }: ModalBackdropProps) => JSX.Element;

package/components/modal/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Modal";
+export * from "./ModalBackdrop";
+export * from "./useModal";

package/components/modal/useModal.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import { ModalProps } from "./Modal";
+export interface UseModalProps {
+    closeOnOutsideClick?: boolean;
+}
+export declare const useModal: ({ closeOnOutsideClick }?: UseModalProps) => {
+    Modal: {
+        (props: ModalProps): JSX.Element;
+        displayName: string;
+    };
+    toggleModal: any;
+    openModal: any;
+    closeModal: any;
+    isOpen: any;
+};

package/components/multiRowTableCell/MultiRowTableCell.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common/CommonProps";
+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.
+ */
+export declare const MultiRowTableCell: ({ main, secondary, area, dataTestId }: IMultiRowTableCellProps) => JSX.Element;
+export {};

package/components/multiRowTableCell/index.d.ts

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

package/components/pageHeading/PageHeading.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface PageHeadingProps {
+    title: string;
+    subtitle?: string;
+    dataTestId?: string;
+    badge?: string;
+}
+export declare const PageHeading: ({ title, subtitle, dataTestId, badge }: PageHeadingProps) => JSX.Element;
+export {};

package/components/pageHeading/index.d.ts

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

package/components/popover/AnimatedPopover.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+import { PopoverLifecycle } from "./usePopover";
+export interface AnimatedPopoverProps extends CommonProps {
+    lifecycle: PopoverLifecycle;
+    onRequestClose: () => void;
+    onClosed: () => void;
+    children: React.ReactNode;
+    enterDelay?: number;
+    exitDelay?: number;
+    /** An element to use as the portal root for the popover component */
+    bindTo?: HTMLElement;
+    enableBackdrop?: boolean;
+}
+export declare const AnimatedPopover: React.ForwardRefExoticComponent<AnimatedPopoverProps & React.RefAttributes<HTMLDivElement>>;

package/components/popover/PopoverList.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface PopoverListProps extends CommonProps {
+    children: React.ReactNode;
+}
+export declare const PopoverList: ({ className, children, dataTestId, }: PopoverListProps) => JSX.Element;

package/components/popover/PopoverListItem.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface PopoverListItemProps extends CommonProps {
+    selected?: boolean;
+    disabled?: boolean;
+    ariaLabel?: string;
+    /** Optional event handler for logging etc. Important: Please use the Url prop for navigation.  */
+    onClick?: (event: React.MouseEvent<HTMLLIElement, MouseEvent>) => void;
+    /** Navigation Url for this item */
+    url?: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    children: React.ReactNode;
+    renderAs?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+}
+export declare const PopoverListItem: ({ selected, children, disabled, ariaLabel, url, onClick, prefix, suffix, renderAs, dataTestId, }: PopoverListItemProps) => JSX.Element;

package/components/popover/PopoverTitle.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface PopoverTitleProps extends CommonProps {
+    action?: React.ReactNode;
+    divider?: boolean;
+    children?: React.ReactNode;
+}
+export declare const PopoverTitle: ({ children, action, divider, className, dataTestId }: PopoverTitleProps) => JSX.Element;

package/components/popover/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./AnimatedPopover";
+export * from "./PopoverList";
+export * from "./PopoverListItem";
+export * from "./PopoverTitle";
+export * from "./usePopover";

package/components/popover/usePopover.d.ts

@@ -0,0 +1,24 @@
+import { Placement } from "@popperjs/core";
+import * as React from "react";
+export declare type PopoverPlacement = Placement;
+export interface UsePopoverProps<T, Y> {
+    targetRef: React.RefObject<T>;
+    popoverRef: React.RefObject<Y>;
+    placement?: PopoverPlacement;
+    offset?: [number, number];
+}
+export declare enum PopoverLifecycle {
+    closed = "closed",
+    open = "open",
+    closing = "closing"
+}
+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>;
+    onShow: () => void;
+    onHide: () => void;
+    popoverProps: {
+        lifecycle: PopoverLifecycle;
+        onClosed: () => void;
+    };
+};

package/components/prompt/Prompt.d.ts

@@ -0,0 +1,10 @@
+import { Blocker } from "history";
+interface IPromptProps {
+    when: boolean;
+    message: string;
+}
+export declare function useInRouterContext(): boolean;
+export declare function useBlocker(blocker: Blocker, when?: boolean): void;
+export declare function usePrompt(message: string, when?: boolean): void;
+export declare const Prompt: ({ when, message }: IPromptProps) => null;
+export {};

package/components/prompt/index.d.ts

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

package/components/radioGroup/RadioGroup.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+interface RadioGroupProps extends CommonProps {
+    children: React.ReactNode;
+    id: string;
+    onChange: (e: React.FormEvent<HTMLInputElement>) => void;
+    value: string | number;
+    name?: string;
+    label?: string;
+    inline?: boolean;
+    disabled?: boolean;
+}
+export declare const RadioGroup: ({ children, id, name, value, disabled, onChange, label, inline, className, dataTestId, }: RadioGroupProps) => JSX.Element;
+export {};

package/components/radioGroup/RadioGroupContext.d.ts

@@ -0,0 +1,10 @@
+import * as React from "react";
+interface RadioGroupContextProps {
+    id: string;
+    name: string;
+    value: string | number;
+    disabled?: boolean;
+    onChange: (e: React.FormEvent<HTMLInputElement>) => void;
+}
+export declare const RadioGroupContext: React.Context<RadioGroupContextProps | null>;
+export {};

package/components/radioGroup/RadioItem.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+interface RadioItemProps extends CommonProps {
+    label: React.ReactNode;
+    value: string | number;
+}
+export declare const RadioItem: ({ label, value, dataTestId, className }: RadioItemProps) => JSX.Element;
+export {};

package/components/radioGroup/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./RadioGroup";
+export * from "./RadioItem";

package/components/select/CreatableSelect.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { GroupBase } from "react-select";
+import { SelectProps } from "./shared";
+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

@@ -0,0 +1,14 @@
+import * as React from "react";
+interface SelectContainerProps {
+    children: React.ReactElement;
+    label?: string;
+    hideLabel?: boolean;
+    hasError?: boolean;
+    id?: string;
+    description?: string;
+    error?: React.ReactNode;
+    info?: React.ReactNode;
+    dataTestId?: string;
+}
+export declare const SelectContainer: ({ children, label, hideLabel, id, hasError, error, description, info, dataTestId, }: SelectContainerProps) => JSX.Element;
+export {};

package/components/select/Select.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { GroupBase } from "react-select";
+import { SelectProps } from "./shared";
+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/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./CreatableSelect";
+export * from "./Select";
+export * from "./shared";

package/components/select/shared.d.ts

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { GroupBase, Props, StylesConfig } from "react-select";
+import { AsyncProps } from "react-select/async";
+import { SelectComponents } from "react-select/dist/declarations/src/components";
+import { CommonProps } from "../../common/CommonProps";
+export interface SelectOption {
+    label: string;
+    value: string;
+    options?: SelectOption[];
+}
+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.
+     *
+     * @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 {SelectSize}
+     * @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>;
+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>;
+};
+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

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common/CommonProps";
+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;
+}
+export declare const SkeletonLines: import("react").MemoExoticComponent<({ margin, lines, height, width, className, dataTestId }: ISkeletonLinesProps) => JSX.Element>;
+export default SkeletonLines;

package/components/skeletonLines/index.d.ts

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

package/components/spacer/Spacer.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common";
+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;
+}
+export declare const Spacer: ({ minHeight, border, dataTestId }: SpacerProps) => JSX.Element;
+export {};

package/components/spacer/index.d.ts

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

package/components/spinner/Spinner.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common/CommonProps";
+export declare type SpinnerSize = "small" | "regular" | "large";
+export interface SpinnerProps extends CommonProps {
+    /**
+     * Defines the size of the spinner.
+     */
+    size?: SpinnerSize;
+    /**
+     * When true, the spinner will be centered in the parent element using css grid.
+     */
+    centered?: boolean;
+    /**
+     * Select either "light" or "dark" mode.
+     * Use "dark" when the spinner is used on a dark background.
+     */
+    mode?: "light" | "dark";
+    /**
+     * Add custom className to the spinners container element.
+     * Useful for sizing to minimize jumping on load.
+     */
+    containerClassName?: string;
+}
+export declare const Spinner: ({ mode, size, centered, className, containerClassName, dataTestId, }: SpinnerProps) => JSX.Element;

package/components/spinner/index.d.ts

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

package/components/text/Text.d.ts

@@ -0,0 +1,79 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export declare type TextType = "p" | "span" | "div";
+export declare type TextSize = "small" | "default" | "large";
+export declare type TextAlign = "left" | "center" | "right";
+export declare type TextWeight = "default" | "thick" | "bold";
+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 {TextType}
+     * @memberof TextProps
+     */
+    type?: TextType;
+    /**
+     * Size of element. Values can be "default", "small", or "large".
+     *
+     * @type {TextSize}
+     * @memberof TextProps
+     */
+    size?: TextSize;
+    /**
+     * Alignment of the text. Values can be "left", "center", or "right".
+     *
+     * @type {TextAlign}
+     * @memberof TextProps
+     */
+    align?: TextAlign;
+    /**
+     * Weight of the text. Values can be "default", "thick", or "bold".
+     *
+     * @type {TextWeight}
+     * @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;
+}
+export declare const Text: ({ children, type, size, align, weight, underline, inverted, subtle, italicize, uppercase, className, dataTestId, }: TextProps) => JSX.Element;

package/components/text/index.d.ts

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

package/components/textArea/TextArea.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export declare type TextAreaResize = "none" | "vertical" | "horizontal" | "both";
+export interface TextAreaProps extends CommonProps {
+    id?: string;
+    name?: string;
+    label?: string;
+    description?: string;
+    info?: React.ReactNode;
+    error?: React.ReactNode;
+    value?: React.ReactText;
+    tabIndex?: number;
+    disabled?: boolean;
+    readOnly?: boolean;
+    rows?: number;
+    placeholder?: string;
+    onChange?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (event: React.SyntheticEvent<HTMLTextAreaElement>) => void;
+    maxLength?: number;
+    resize?: TextAreaResize;
+    defaultValue?: React.ReactText;
+    required?: boolean;
+}
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/components/textArea/index.d.ts

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