@trackunit/react-components 0.0.1-alpha-59a0a75488.0

package/components/PageHeader/PageHeader.d.ts

@@ -0,0 +1,47 @@
+import React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface PageHeaderProps extends CommonProps {
+    /**
+     * Text to be displayed in the header.
+     */
+    title: string | React.ReactNode;
+    /**
+     * The description to be displayed inside the tip.
+     */
+    description?: string | React.ReactNode;
+    /**
+     * The link to which user is redirected to if user clicks on the tip.
+     */
+    link?: string;
+    /**
+     * Additional actions to be rendered along with the header.
+     */
+    action?: React.ReactNode;
+    /**
+     * A tag that is displayed on the side of the header.
+     * A RectNode passed into the tag will be rendered as such.
+     * A string passed into the tag will render it using the tag component.
+     */
+    tag?: string;
+    /**
+     * Whether spinner should be shown while loading the data.
+     */
+    showLoading?: boolean;
+    /**
+     * Child nodes to be displayed inside the page header.
+     */
+    children?: React.ReactNode;
+    /**
+     * The link to the previous page which will be rendered inside an IconButton component to the left of the heading.
+     */
+    backTo?: string;
+}
+/**
+ * Pageheader component is used to display a page header.
+ *
+ * PageHeader can be used to highlight the page topic, display important information about the page, and carry the action items related to the current page.
+ *
+ * @param {PageHeaderProps} props - The props for the PageHeader component
+ * @returns {JSX.Element} PageHeader component
+ */
+export declare const PageHeader: ({ className, dataTestId, action, showLoading, description, link, title, tag, backTo, children, }: PageHeaderProps) => JSX.Element;

package/components/PageHeader/index.d.ts

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

package/components/Pagination/Pagination.d.ts

@@ -0,0 +1,71 @@
+/// <reference types="react" />
+export interface IPaginationProps {
+    /**
+     * A go to page handler
+     */
+    gotoPage: (index: number) => void;
+    /**
+     * A go to previous page handler
+     */
+    previousPage: () => void;
+    /**
+     * A a go to next page handler
+     */
+    nextPage: () => void;
+    /**
+     * A current page index
+     */
+    pageIndex?: number;
+    /**
+     * Amount of pages
+     */
+    pageCount?: number | null;
+    /**
+     * A flag to enable previous page button
+     */
+    canPreviousPage?: boolean;
+    /**
+     * A flag to enable next page button
+     */
+    canNextPage?: boolean;
+    /**
+     * A parent name
+     */
+    parentName: string;
+    /**
+     * A event name used for logging
+     */
+    eventName?: string;
+    /**
+     * A flag indicating loading state
+     */
+    loading?: boolean;
+    /**
+     * A custom class to override styles
+     */
+    className?: string;
+    /**
+     * A data test id
+     */
+    dataTestId?: string;
+    /**
+     * You can attach logging handler for page change
+     */
+    logPageChange?: (eventName: string, event: EventProperties) => void;
+    /**
+     * An helper to get translation for count.
+     */
+    getTranslatedCount: (count: number) => string;
+    /**
+     * An helper to get translation for page.
+     */
+    getTranslatedPage: () => string;
+}
+export declare type EventProperties = Record<string, string | number | boolean | null | undefined | (string | number)[]>;
+/**
+ * Pagination Description. It could be used when you need navigation for your paging feature.
+ *
+ * @param {IPaginationProps} props - The props for the Pagination component
+ * @returns {JSX.Element} Pagination component
+ */
+export declare const Pagination: ({ gotoPage, previousPage, nextPage, pageCount, pageIndex, canPreviousPage, canNextPage, loading, eventName, parentName, className, dataTestId, logPageChange, getTranslatedCount, getTranslatedPage, }: IPaginationProps) => JSX.Element;

package/components/PhoneInput/PhoneInput.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+import { BaseInputProps } from "../BaseInput";
+export interface PhoneInputProps extends BaseInputProps, CommonProps {
+    /**
+     * A flag to disable the phone button.
+     */
+    disableAction?: boolean;
+}
+/**
+ * A Phone Input component is used for input of the type tel.
+ *
+ * It has an ActionButton which sends an phone call to the specified number using "tel:" link.
+ *
+ * Extends props of BaseInput.
+ *
+ * A reference to the input element is provided as the `ref` prop.
+ * For specific input types make sure to use the corresponding input component.
+ */
+export declare const PhoneInput: React.ForwardRefExoticComponent<PhoneInputProps & React.RefAttributes<HTMLInputElement>>;

package/components/Popover/AnimatedPopover.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+import { PopoverLifecycle } from "./usePopover";
+export interface AnimatedPopoverProps extends CommonProps {
+    /**
+     * Controls the lifecycle of the popover.
+     */
+    lifecycle: PopoverLifecycle;
+    /**
+     * Sets the popover to closing state.
+     */
+    onRequestClose: () => void;
+    /**
+     * Sets the popover to closed state.
+     */
+    onClosed: () => void;
+    /**
+     * Child nodes
+     */
+    children: React.ReactNode;
+    /**
+     * The delay(in seconds) for triggering the popover state when entering it.
+     */
+    enterDelay?: number;
+    /**
+     * The delay(in seconds) for triggering the popover state when exiting it.
+     */
+    exitDelay?: number;
+    /** An element to use as the portal root for the popover component */
+    bindTo?: HTMLElement;
+    /**
+     * Whether the popover should have a backdrop or not.
+     */
+    enableBackdrop?: boolean;
+}
+/**
+ * The Popover component is used to display some content on top of another.
+ * Use a popover to expose a small amount of information or functionality.
+ *
+ * @param {AnimatedPopoverProps} props - The props for the Card component
+ * @returns {JSX.Element} Popover component
+ */
+export declare const AnimatedPopover: React.ForwardRefExoticComponent<AnimatedPopoverProps & React.RefAttributes<HTMLDivElement>>;

package/components/Popover/PopoverList.d.ts

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

package/components/Popover/PopoverListItem.d.ts

@@ -0,0 +1,30 @@
+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;
+    /**
+     * The prefix to be displayed for the list item.
+     */
+    prefix?: React.ReactNode;
+    /**
+     * The suffix to be displayed for the list item.
+     */
+    suffix?: React.ReactNode;
+    /**
+     * The child nodes.
+     */
+    children: React.ReactNode;
+}
+/**
+ * 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, dataTestId, }: PopoverListItemProps) => JSX.Element;

package/components/Popover/PopoverTitle.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface PopoverTitleProps extends CommonProps {
+    action?: React.ReactNode;
+    /**
+     * Whether there should be a divider between the title and the content.
+     */
+    divider?: boolean;
+    /**
+     * The child nodes.
+     */
+    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/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,42 @@
+import { Placement } from "@popperjs/core";
+import * as React from "react";
+export declare type PopoverPlacement = Placement;
+export interface UsePopoverProps<T, Y> {
+    /**
+     * Reference to the target component.
+     */
+    targetRef: React.RefObject<T>;
+    /**
+     * Reference to the popover component.
+     */
+    popoverRef: React.RefObject<Y>;
+    /**
+     * Placement of the popover.
+     */
+    placement?: PopoverPlacement;
+    /**
+     * The positional offset of the popover from the target component.
+     */
+    offset?: [number, number];
+}
+export declare enum PopoverLifecycle {
+    closed = "closed",
+    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>;
+    onShow: () => void;
+    onHide: () => void;
+    popoverProps: {
+        lifecycle: PopoverLifecycle;
+        onClosed: () => void;
+    };
+};

package/components/Prompt/Prompt.d.ts

@@ -0,0 +1,20 @@
+interface PromptProps {
+    when: boolean;
+    message: string;
+}
+/**
+ * The usePrompt hook.
+ *
+ * @param {string} message -
+ * @param {boolean} when -
+ * @returns {void} void
+ */
+export declare const usePrompt: (message: string, when?: boolean) => void;
+/**
+ * The Prompt function.
+ *
+ * @param {PromptProps} Props -
+ * @returns {void} void
+ */
+export declare const Prompt: ({ when, message }: PromptProps) => null;
+export {};

package/components/Prompt/index.d.ts

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

package/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,57 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+import "./RadioGroup.css";
+export interface RadioGroupProps extends CommonProps, React.InputHTMLAttributes<HTMLInputElement> {
+    /**
+     */
+    children: React.ReactNode;
+    /**
+     * The id of the radio group.
+     */
+    id: string;
+    /**
+     * onChange handler for the radio group.
+     */
+    onChange: (e: React.FormEvent<HTMLInputElement>) => void;
+    /**
+     * The value of the radio group.
+     */
+    value: string | number;
+    /**
+     * The name of the radio group.
+     */
+    name?: string;
+    /**
+     * The label of the radio group.
+     */
+    label?: string;
+    /**
+     * Whether the radiogroup is inline or not.
+     */
+    inline?: boolean;
+    /**
+     * Whether the radio group is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * A boolean flag to set invalid mode
+     * can be used for indicating errors
+     */
+    isInvalid?: boolean;
+}
+/**
+ * Use radio buttons when you have a group of mutually exclusive choices and only one selection from the group is allowed.
+ *
+ * Radio buttons are used for mutually exclusive choices, not for multiple choices. Only one radio button can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
+ *
+ * _**Do use** Radio buttons in forms, settings, or selections in a list._
+ *
+ * _**Do not use** Radio buttons if a user can select many option from a list, use checkboxes instead of radio buttons._
+ *
+ * @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, isInvalid, }: RadioGroupProps): JSX.Element;
+    displayName: string;
+};

package/components/RadioGroup/RadioGroupContext.d.ts

@@ -0,0 +1,11 @@
+import * as React from "react";
+interface RadioGroupContextProps {
+    id: string;
+    name: string;
+    value: string | number;
+    disabled?: boolean;
+    isInvalid?: 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,24 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+interface RadioItemProps extends CommonProps {
+    /**
+     * The label of the radio item.
+     */
+    label: React.ReactNode;
+    /**
+     * The value of the radio item.
+     */
+    value: string | number;
+    /**
+     * The description of the radio item.
+     */
+    description?: string;
+}
+/**
+ * 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, description }: RadioItemProps) => JSX.Element;
+export {};

package/components/RadioGroup/index.d.ts

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

package/components/SectionHeader/SectionHeader.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from "react";
+import { CommonProps } from "../../common/CommonProps";
+import "./SectionHeader.css";
+export interface SectionHeaderProps extends CommonProps {
+    /**
+     * The title of the section.
+     */
+    title: string;
+    /**
+     * Subtitle of the section.
+     */
+    subtitle?: string;
+    /**
+     * The addon could be used to tell the state of a section header.
+     */
+    addon?: ReactNode;
+}
+/**
+ * The SectionHeader component is used on sections to set the section title.
+ *
+ * @param {SectionHeaderProps} props - The props for the section header component
+ * @returns {JSX.Element} SectionHeader component
+ */
+export declare const SectionHeader: ({ title, subtitle, dataTestId, addon }: SectionHeaderProps) => JSX.Element;

package/components/SectionHeader/index.d.ts

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

package/components/Select/CreatableSelect.d.ts

@@ -0,0 +1,38 @@
+import React from "react";
+import { GroupBase } from "react-select";
+import { SelectProps } from "./useSelect";
+interface CreateableSelectProps<Option, IsAsync extends boolean = false, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> extends SelectProps<Option, IsAsync, IsMulti, Group> {
+    /**
+     * To hide the label.
+     */
+    hideLabel?: boolean;
+    /**
+     * Description for the select component.
+     */
+    description?: string;
+    /**
+     * Whether the component is invalid.
+     */
+    isInvalid?: boolean;
+    /**
+     * Info of the select component.
+     */
+    info?: React.ReactNode;
+    /**
+     * Error of the select component.
+     */
+    error?: React.ReactNode;
+    /**
+     * Size of the component.
+     */
+    size?: SelectSize;
+}
+export declare type SelectSize = "small" | "default";
+/**
+ * The CreatableSelect component.
+ *
+ * @param {CreateableSelectProps} 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>>(props: CreateableSelectProps<Option, IsAsync, IsMulti, Group>) => JSX.Element;
+export {};

package/components/Select/FieldContainer.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export interface SelectContainerProps {
+    children: React.ReactElement;
+    label?: string;
+    hideLabel?: boolean;
+    hasError?: boolean;
+    id?: string;
+    description?: string;
+    error?: React.ReactNode;
+    info?: React.ReactNode;
+    dataTestId?: string;
+    isDisabled?: boolean;
+}
+/**
+ * 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, isDisabled, }: SelectContainerProps) => JSX.Element;

package/components/Select/Select.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { GroupBase } from "react-select";
+import { SelectProps } from "./useSelect";
+export interface SelectOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+/**
+ * Selects are input components used to choose a value from a set.
+ *
+ * @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>>(props: SelectProps<Option, IsAsync, IsMulti, Group>): JSX.Element;
+    displayName: string;
+};

package/components/Select/SelectMenuItem/SelectMenuItem.d.ts

@@ -0,0 +1,49 @@
+import * as React from "react";
+import { CommonProps } from "../../../common";
+interface SelectMenuItemProps extends CommonProps {
+    /**
+     * An string to render as a item label.
+     *
+     */
+    label: string;
+    /**
+     * An handler for click on element
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * A boolean prop to set menu item to selected state
+     */
+    selected?: boolean;
+    /**
+     * A boolean prop to set menu item to focused state
+     * used for keyboard navigation
+     */
+    focused?: boolean;
+    /**
+     * A boolean prop to set menu item to disabled state
+     * used in disabled select options
+     */
+    disabled?: boolean;
+}
+export interface SingleSelectMenuItemProps extends SelectMenuItemProps {
+    /**
+     * An React element to render before the text in the select.
+     * This is typically used to render an icon.
+     */
+    icon?: JSX.Element;
+}
+/**
+ * A single select menu item is a basic wrapper around Menu item designed to be used as a single value render in Select list
+ *
+ * @param {SelectMenuItemProps} props - The props for the SingleSelectMenuItem
+ * @returns {JSX.Element} SingleSelectMenuItem
+ */
+export declare const SingleSelectMenuItem: ({ label, icon, onClick, selected, dataTestId, focused, disabled, }: SingleSelectMenuItemProps) => JSX.Element;
+/**
+ * A multi select menu item is a basic wrapper around Menu item designed to be used as a multi value render in Select list
+ *
+ * @param {SelectMenuItemProps} props - The props for the MultiSelectMenuItem
+ * @returns {JSX.Element} multi select menu item
+ */
+export declare const MultiSelectMenuItem: ({ label, onClick, selected, dataTestId, focused, disabled, }: SelectMenuItemProps) => JSX.Element;
+export {};

package/components/Select/TagWithWidth.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { TagProps } from "../Tag";
+declare type TagsPropsNoRef = Omit<TagProps, "ref">;
+interface TagWithWidthProps extends TagsPropsNoRef {
+    onWidthKnown?: ({ width }: {
+        width: number;
+    }) => void;
+}
+/**
+ * Extended Tag component with information about its own width.
+ * Used in the select component.
+ *
+ * @param {TagProps} props - The props for the tag component
+ * @returns {JSX.Element} TagWithWidth component
+ */
+export declare const TagWithWidth: ({ onWidthKnown, children, ...rest }: TagWithWidthProps) => JSX.Element;
+export {};

package/components/Select/TagsContainer.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+interface TagsContainerItem {
+    /**
+     * A text value to be passed to tags inside container
+     */
+    text: string;
+    /**
+     * OnClick handler for a tags
+     */
+    onClick: () => void;
+    /**
+     * A flag to set tags to readonly mode (without close button)
+     */
+    disabled: boolean;
+}
+interface TagsContainerProps {
+    /**
+     * An items to be rendered inside container if they fit available space. If they overlap then the counter will be displayed.
+     */
+    items: TagsContainerItem[];
+    /**
+     * An css property to set a custom width for container
+     * Default behavior is to take 100% width of parent element
+     * You can provide a value with unit (pixels, percents, rem, etc)
+     *
+     * @memberof TagsContainerProps
+     */
+    width?: string;
+    /**
+     * In case you have a gap between items then you can provide it to be used in calculation of available space,
+     * default value is 5, so if you don't need it then provide 0
+     *
+     * @memberof TagsContainerProps
+     */
+    itemsGap?: number;
+    postFix: JSX.Element;
+}
+/**
+ * TagsContainer component to display tags in limited space when children can't fit space it displays counter
+ *
+ * @param {TagsContainerProps} props - The props for the TagContainer
+ * @returns {JSX.Element} TagsContainer
+ */
+export declare const TagsContainer: ({ items, width, itemsGap, postFix }: TagsContainerProps) => JSX.Element;
+export {};

package/components/Select/index.d.ts

@@ -0,0 +1,7 @@
+import ValueType from "react-select";
+export * from "./CreatableSelect";
+export * from "./Select";
+export * from "./SelectMenuItem/SelectMenuItem";
+export * from "./shared";
+export * from "./useCustomComponents";
+export { ValueType };