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

package/components/CopyableText/CopyableText.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { CommonProps } from "../../common";
+export interface CopyableTextProps extends CommonProps {
+    /**
+     * The text shown in the ui.
+     * By default this is also the text that gets copied when component is clicked.
+     */
+    text?: string;
+    /**
+     * Alternative text to get copied to on click.
+     * This text is not visible in the ui.
+     */
+    alternativeText?: string;
+}
+/**
+ * The CopyableText component is used where the user should have easy access to copy information.
+ *
+ * @param {CopyableTextProps} props - The props for the CopyableText component
+ * @returns {JSX.Element} CopyableText component
+ */
+export declare const CopyableText: ({ text, alternativeText, dataTestId, className }: CopyableTextProps) => JSX.Element;

package/components/CopyableText/index.d.ts

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

package/components/DateField/DateField.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { DateInputProps } from "../DateInput/DateInput";
+import { FormGroupProps } from "../FormGroup/FormGroup";
+declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface DateFieldProps extends DateInputProps, FormGroupExposedProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * The date field component is used for entering date values.
+ *
+ * _**Do use**_ the DateField for date input.
+ *
+ * _**Do not use**_ this fields for non-serialized dates. Use TextField instead.
+ */
+export declare const DateField: import("react").ForwardRefExoticComponent<DateFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/components/DateInput/DateInput.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput";
+declare type BaseInputExposedProps = Omit<BaseInputProps, "defaultValue" | "min" | "max" | "value">;
+export interface DateInputProps extends BaseInputExposedProps {
+    /**
+     * A min value with type Date added
+     */
+    min?: Date | string | number;
+    /**
+     * A max value with type Date added
+     */
+    max?: Date | string | number;
+    /**
+     * A default value with type Date added
+     */
+    defaultValue?: Date | string | number;
+    /**
+     * A value with type Date added
+     */
+    value?: Date | string | number;
+}
+/**
+ * A wrapper around BaseInput with a pop-up day picker.
+ *
+ * NOTE: If shown with a label, please use the `DateField` component instead.
+ */
+export declare const DateInput: import("react").ForwardRefExoticComponent<DateInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/components/DayPicker/DayPicker.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+import { Matcher } from "react-day-picker";
+export interface DayPickerProps {
+    /**
+     * A callback function for when a date is selected
+     */
+    onDaySelect?: (day: Date) => void;
+    /**
+     * Define any days which may not be selected
+     */
+    disabledDays: Matcher | Matcher[] | undefined;
+    /**
+     * Set any days which are selected
+     */
+    selectedDays: Matcher | Matcher[] | undefined;
+    /**
+     * Set the language
+     */
+    language: string;
+    max?: number;
+}
+/**
+ * The DayPicker component is used when the user needs to select a date.
+ *
+ * @param {DayPickerProps} props - The props for the DayPicker component
+ * @returns {JSX.Element} DayPicker component
+ */
+export declare const DayPicker: ({ onDaySelect, disabledDays, selectedDays, language, ...rest }: DayPickerProps) => JSX.Element;

package/components/DayPicker/DayPickerPopover.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { Matcher } from "react-day-picker";
+import { Size } from "../../common";
+import { ButtonColor } from "../buttons";
+import { PopoverPlacement } from "../Popover";
+export interface DayPickerPopoverProps {
+    disabledDays?: Matcher | Matcher[] | undefined;
+    className?: string;
+    onDaySelect: (day: Date) => void;
+    selectedDay?: Date;
+    color?: ButtonColor;
+    size?: Size;
+    placement?: PopoverPlacement;
+    buttonContent: JSX.Element;
+    language: string;
+}
+/**
+ * The DayPickerPopover component returns a button which when clicked shows the daypicker.
+ *
+ * @param {DayPickerPopoverProps} props - The props for the DayPickerPopover component
+ * @returns {JSX.Element} DayPickerPopover component
+ */
+export declare const DayPickerPopover: ({ disabledDays, className, selectedDay, onDaySelect, color, placement, size, buttonContent, language, }: DayPickerPopoverProps) => JSX.Element;

package/components/DayPicker/DayRangePicker.d.ts

@@ -0,0 +1,18 @@
+/// <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;
+    max?: number;
+}
+/**
+ * The DayRangePicker component should be used when the user needs to select a range of dates.
+ *
+ * @param {DayRangePickerProps} props - The props for the DayRangePicker component
+ * @returns {JSX.Element} DayRangePicker component
+ */
+export declare const DayRangePicker: ({ onRangeSelect, selectedDays, disabledDays, dataTestId, language, max, }: 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,8 @@
+import { Locale } from "date-fns";
+/**
+ * A helper function to get the matching Locale object for a given language.
+ *
+ * @param {string} language The language to match
+ * @returns {Locale} The corresponding Locale object
+ */
+export declare const useLocale: (language: string) => Locale;

package/components/EmailInput/EmailInput.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+import { BaseInputProps } from "../BaseInput";
+export interface EmailInputProps extends BaseInputProps, CommonProps {
+    /**
+     * A flag to disable the email button.
+     */
+    disableAction?: boolean;
+}
+/**
+ * A Email Input component is used for input of the type Email.
+ *
+ * It has an ActionButton which sends an email to the specified address using "mailto:" 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 EmailInput: React.ForwardRefExoticComponent<EmailInputProps & React.RefAttributes<HTMLInputElement>>;

package/components/FormGroup/FormGroup.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+import { CommonProps } from "../../common";
+export interface FormGroupProps extends CommonProps {
+    /**
+     * The label for the form group.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Content to display in the tooltip when hovering the ? icon next to the label.
+     */
+    tip?: string | React.ReactNode;
+    /**
+     * A string to display under the input element to help the user understand the input.
+     */
+    helpText?: string | null;
+    /**
+     * An addon element to render to the right under the input element.
+     * Used for displaying maxLength etc.
+     */
+    helpAddon?: string | React.ReactNode;
+    /**
+     * If true the input is rendered in its invalid state.
+     */
+    isInvalid?: boolean;
+    /**
+     * If true interactions are disabled
+     */
+    disabled?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * The FormGroup component should be used to wrap any Input element that needs a label.
+ * Besides a label the component supplies an optional Tip, HelpText and HelpAddon support.
+ *
+ * @param {FormGroupProps} props - The props for the FormGroup component
+ * @returns {JSX.Element} FormGroup component
+ */
+export declare const FormGroup: ({ isInvalid, helpText, helpAddon, tip, className, dataTestId, label, children, disabled, }: FormGroupProps) => JSX.Element;

package/components/Heading/Heading.d.ts

@@ -0,0 +1,28 @@
+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.
+     */
+    children: React.ReactNode;
+    /**
+     * Size of heading.
+     */
+    variant: HeadingVariant;
+    /**
+     * Whether the heading uses inverted styles or not.
+     */
+    inverted?: boolean;
+    /**
+     * Whether the heading is a subtitle or not.
+     */
+    subtle?: boolean;
+}
+/**
+ * The Heading is used for a heading of a section (h1,h2,h3,h4).
+ *
+ * @param {HeadingProps} props - The props for the Heading component
+ * @returns {JSX.Element} Heading component
+ */
+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,51 @@
+import { ThemeColors } from "@trackunit/ui-design-tokens";
+import { HeroIconName, TrackunitIconName } from "@trackunit/ui-icons";
+import * as React from "react";
+import { CommonProps, Size } from "../../common/CommonProps";
+export interface IconProps extends CommonProps {
+    /**
+     * The name of the icon to be rendered.
+     * HeroIconName and TrackunitIconName are supported.
+     */
+    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.
+     */
+    color?: ThemeColors;
+    /**
+     * The size of the icon.
+     * Small = 16x16px, medium = 20x20px, Large = 24x24px.
+     * Default value is Large.
+     * If a custom size is needed, set it in the className.
+     */
+    size?: Size;
+    /**
+     * Select if the icon should be rendered as solid or outline.
+     * Default value depends on the Size prop, small == solid, medium == solid, large == outline.
+     * Trackunit icons might not support both outline and Solid.
+     */
+    type?: "solid" | "outline";
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    /**
+     * @deprecated
+     */
+    fillColor?: string;
+    forwardedRef?: React.RefObject<HTMLSpanElement>;
+    /**
+     * Custom styles object used to override existing styles or add some extra styling
+     *
+     * @memberof IconProps
+     */
+    style?: Record<string, string>;
+}
+/**
+ * - The Icon component is used to display an Icon.
+ * - Icons are semantic vector graphics that adds character and improves the visual appeal of elements when combined with.
+ * - All the [HeroIcons](https://heroicons.dev/) as well as custom TrackUnit icons are available.
+ *
+ * @param {IconProps} props - The props for the Icon component
+ * @returns {JSX.Element} Icon component
+ */
+export declare const Icon: ({ name, size, className, dataTestId, color, onClick, fillColor, type, style, forwardedRef, }: IconProps) => JSX.Element | null;

package/components/Indicator/Indicator.d.ts

@@ -0,0 +1,42 @@
+/// <reference types="react" />
+import { ThemeColors } from "@trackunit/ui-design-tokens";
+import { CommonProps } from "../../common/CommonProps";
+export interface IndicatorProps extends CommonProps {
+    /**
+     * The icon to be rendered inside the indicator component
+     */
+    icon: JSX.Element;
+    /**
+     * A color token used to style the icon and the icon background
+     */
+    color?: ThemeColors;
+    /**
+     * A text label to be displayed next to the indicator
+     */
+    label?: string;
+    /**
+     * A boolean parameter to display or hide icon background, default value is true
+     */
+    withBackground?: boolean;
+    /**
+     * A boolean parameter to display or hide label and instead show as html title on hover, default value is true
+     */
+    withLabel?: boolean;
+    /**
+     * A boolean parameter to make the indicator ping thus drawing more attention, default value is false
+     */
+    ping?: boolean;
+}
+/**
+ * Indicators are non-interactive elements that communicate essential aspects of the state of an asset.
+ *
+ * Whenever an asset is presented, indicators provide the necessary information for a user to comprehend the state of the asset.
+ *
+ * _**Do use** indicators to communicate essential aspects of the state of an asset._
+ *
+ * _**Do not use** indicators for non-essential information, or to communicate information unrelated to the state of an asset._
+ *
+ * @param {IndicatorProps} props - The props for the Indicator component
+ * @returns {JSX.Element} Indicator component
+ */
+export declare const Indicator: ({ dataTestId, icon, label, color, withBackground, withLabel, ping, ...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,34 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+import "./Label.css";
+export interface LabelProps extends CommonProps {
+    /**
+     * ID of the label.
+     */
+    id?: string;
+    /**
+     * Specifies the element to which the label belongs to.
+     */
+    htmlFor?: string;
+    /**
+     * The label value.
+     */
+    children?: React.ReactNode;
+    /**
+     * Whether the label is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * A boolean flag to set invalid mode
+     * can be used for indicating errors
+     */
+    isInvalid?: boolean;
+}
+/**
+ * The Label component is used for labels for input fields.
+ * This component is **not used directly**, but is part of the FormGroup and Field components.
+ *
+ * @param {LabelProps} props - The props for the Label component
+ * @returns {JSX.Element} Label component
+ */
+export declare const Label: ({ id, htmlFor, children, className, dataTestId, disabled, isInvalid, }: LabelProps) => JSX.Element;

package/components/Label/index.d.ts

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

package/components/LegendItem/LegendItem.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export interface ILegendItem {
+    label?: string;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    color: string;
+    className?: string;
+    dataTestId?: string;
+}
+/**
+ * The LegendItem component is used to show form legends.
+ *
+ * @param {ILegendItem} props - The props for the LegendItem component
+ * @returns {JSX.Element} LegendItem component
+ */
+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/MenuItem.d.ts

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { CommonProps } from "../../common/CommonProps";
+export interface MenuItemProps extends CommonProps {
+    /**
+     * The icon to be rendered in the menu item.
+     */
+    icon?: JSX.Element;
+    /**
+     * Label of the menu item
+     */
+    label?: string;
+    /**
+     * Additional tailwind classes to be applied to the component.
+     */
+    className?: string;
+    /**
+     * Test id to be used for the component.
+     */
+    dataTestId?: string;
+    /**
+     * An React element to render before the label.
+     * This is typically used to render an icon.
+     *
+     */
+    prefix?: JSX.Element;
+    /**
+     * An boolean flag to turn on/off selected state
+     * This is typically used highlight that item is selected
+     *
+     * @memberof IMenuItemProps
+     */
+    selected?: boolean;
+    /**
+     * OnClick event handler it is thrown on root element of the component tree
+     *
+     * @memberof IMenuItemProps
+     */
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    /**
+     * An boolean flag to turn on/off focused state
+     * This is typically used for keyboard navigation
+     *
+     * @memberof IMenuItemProps
+     */
+    focused?: boolean;
+    /**
+     * A boolean prop to set menu item to disabled state
+     * used in disabled select options
+     */
+    disabled?: boolean;
+}
+/**
+ * The MenuItem component is used to display a menu, primarily meant to be used in a list form.
+ *
+ * @param {MenuItemProps} props - The props for the MenuItem component
+ * @returns {JSX.Element} MenuItem component
+ */
+export declare const MenuItem: ({ className, dataTestId, label, selected, focused, prefix, icon, disabled, onClick, }: MenuItemProps) => JSX.Element;

package/components/Menu/MenuList.d.ts

@@ -0,0 +1,34 @@
+/// <reference types="react" />
+import { MenuItemProps } from "./MenuItem";
+export interface MenuListItemProps extends MenuItemProps {
+    showDivider?: boolean;
+}
+export interface MenuListProps {
+    /**
+     * Additional tailwind classes to be applied to the component.
+     */
+    className?: string;
+    /**
+     * Test id to be used for the component.
+     */
+    dataTestId?: string;
+    /**
+     * List of menu items to be rendered.
+     */
+    menuItems: MenuListItemProps[];
+    /**
+     * A component width
+     */
+    width?: string;
+    /**
+     * Custom renderer for menu items
+     */
+    itemRenderer?: (item: MenuListItemProps, key: string, index: number) => JSX.Element;
+}
+/**
+ * The MenuList component is used for menus and selects.
+ *
+ * @param {MenuListProps} props - The props for the MenuList component
+ * @returns {JSX.Element} MenuList component
+ */
+export declare const MenuList: ({ dataTestId, className, menuItems, width, itemRenderer, ...args }: MenuListProps) => JSX.Element;

package/components/Menu/index.d.ts

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

package/components/Modal/Modal.d.ts

@@ -0,0 +1,32 @@
+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.
+     */
+    isOpen?: boolean;
+    /**
+     * Whether modal should be closed when clicked outside of it.
+     */
+    onDismissClick?: () => void;
+    /**
+     * Child elements to be rendered inside the modal.
+     */
+    children: React.ReactNode;
+    /**
+     * Test id to be applied to the modal.
+     */
+    dataTestId?: string;
+    /**
+     * Maximum width of the modal.
+     */
+    maxWidth?: ModalWidth;
+}
+/**
+ * - Modals are used to present critical information or request user input needed to complete a user's workflow.
+ * - Modals interrupt a user's workflow by design.
+ * - The modal component provides a foundation for creating dialogs, lightboxes, etc.
+ */
+export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/Modal/ModalBackdrop.d.ts

@@ -0,0 +1,13 @@
+import * as React from "react";
+export interface ModalBackdropProps {
+    onClick: () => void;
+    children: React.ReactNode;
+    isVisible?: boolean;
+}
+/**
+ * The Backdrop for the modal.
+ *
+ * @param {ModalBackdropProps} props - The props for the ModalBackdrop component
+ * @returns {JSX.Element} ModalBackdrop component
+ */
+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,21 @@
+/// <reference types="react" />
+import { ModalProps } from "./Modal";
+export interface UseModalProps {
+    closeOnOutsideClick?: boolean;
+}
+/**
+ * The useModal component should be used to inform the user of important information.
+ *
+ * @param {UseModalProps} props - The props for the useModal hook
+ * @returns {*} useModal return
+ */
+export declare const useModal: ({ closeOnOutsideClick }?: UseModalProps) => {
+    Modal: {
+        (props: ModalProps): JSX.Element;
+        displayName: string;
+    };
+    toggleModal: any;
+    openModal: any;
+    closeModal: any;
+    isOpen: any;
+};

package/components/NumberField/NumberField.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+import { FormGroupProps } from "../FormGroup/FormGroup";
+import { NumberInputProps } from "../NumberInput/NumberInput";
+declare type FormGroupExposedProps = Pick<FormGroupProps, "label" | "tip" | "helpText" | "helpAddon">;
+export interface NumberFieldProps extends NumberInputProps, FormGroupExposedProps {
+    /**
+     * If a value is set, the field is rendered in its invalid state.
+     */
+    errorMessage?: string;
+}
+/**
+ * The number field component is used for entering numeric values and includes controls for incrementally increasing or decreasing the value.
+ *
+ * _**Do use**_ the NumberField when the controls to incrementally increase or decrease makes the task easier for the user.
+ *
+ * _**Do not use**_ this fields for non-serialized numbers. Use TextField instead.
+ */
+export declare const NumberField: import("react").ForwardRefExoticComponent<NumberFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/components/NumberInput/NumberInput.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { BaseInputProps } from "../BaseInput";
+declare type BaseInputExposedProps = Omit<BaseInputProps, "type">;
+export interface NumberInputProps extends BaseInputExposedProps {
+}
+/**
+ * A thin wrapper around the `BaseInput` component for number input fields.
+ *
+ * NOTE: If shown with a label, please use the `NumberField` component instead.
+ */
+export declare const NumberInput: import("react").ForwardRefExoticComponent<NumberInputProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};