@livechat/design-system-react-components 2.2.2 → 2.3.0

package/dist/components/ProductSwitcher/types.d.ts

@@ -0,0 +1,46 @@
+import { ReactNode } from 'react';
+import { IconSource } from '../Icon';
+
+export type ProductId = 'livechat' | 'helpdesk' | 'chatbot' | 'openwidget' | 'knowledgebase' | 'teamchat' | 'accounts';
+export type ProductName = 'LiveChat' | 'HelpDesk' | 'ChatBot' | 'OpenWidget' | 'KnowledgeBase' | 'TeamChat' | 'Accounts';
+export type Env = 'labs' | 'staging' | 'prod';
+export interface ProductSwitcherProps {
+    mainProductId: ProductId;
+    productOptions: ProductOption[];
+    textURL?: string;
+    openedOnInit?: boolean;
+    isVisible?: boolean;
+    isDarkMode?: boolean;
+    onOpen?: (event?: Event) => void;
+    onClose?: (event?: Event) => void;
+    onSelect?: (id: ProductId) => void;
+}
+export declare const SSOProductIdMap: Record<ProductId, ProductName>;
+export type ProductSubscription = Partial<Record<ProductId, {
+    status: 'trial' | 'active' | 'cancelled' | 'past_due' | 'expired';
+    next_charge_at?: string;
+}>>;
+export interface ProductOption {
+    id: ProductId;
+    shortcutKey?: string;
+    name: string;
+    expired?: boolean;
+    trialDaysLeft?: number;
+    nameAdornment?: ReactNode;
+    icon: IconSource;
+    iconColor?: string;
+    notificationCount?: number;
+    backgroundColors: {
+        main: string;
+        second: string;
+        third: string;
+    };
+    withDivider?: boolean;
+    url: string;
+    borderColor?: string;
+}
+export type ProductData = {
+    clientId: string;
+    product: ProductName;
+    redirectUri: string;
+};

package/dist/components/Progress/Progress.helpers.d.ts

@@ -0,0 +1,3 @@
+import { ProgressStatus } from './constants';
+
+export declare function getPercentNumber(status: ProgressStatus, percent?: number): number;

package/dist/components/Progress/ProgressBar.d.ts

@@ -0,0 +1,21 @@
+import { ProgressSize, ProgressStatus } from './constants';
+import * as React from 'react';
+export interface ProgressBarProps {
+    /**
+     * The CSS class for container
+     */
+    className?: string;
+    /**
+     * Specify the value of current progress bar (0-100)
+     */
+    percent: number;
+    /**
+     * Specify the progress bar status
+     */
+    status?: ProgressStatus;
+    /**
+     * Specify the progress bar size
+     */
+    size?: ProgressSize;
+}
+export declare const ProgressBar: React.ExoticComponent<ProgressBarProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Progress/ProgressCircle.d.ts

@@ -0,0 +1,21 @@
+import { ProgressSize, ProgressStatus } from './constants';
+import * as React from 'react';
+export interface ProgressCircleProps {
+    /**
+     * The CSS class for container
+     */
+    className?: string;
+    /**
+     * Specify the value of current progress circle (0-100)
+     */
+    progressValue: number;
+    /**
+     * Specify the progress circle status
+     */
+    status?: ProgressStatus;
+    /**
+     * Specify the progress circle size
+     */
+    size?: ProgressSize;
+}
+export declare const ProgressCircle: React.ExoticComponent<ProgressCircleProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Progress/constants.d.ts

@@ -0,0 +1,3 @@
+export type ProgressStatus = 'normal' | 'error' | 'success';
+export type ProgressSize = 'small' | 'medium' | 'large';
+export declare const PROGRESS_SIZES: ProgressSize[];

package/dist/components/Progress/index.d.ts

@@ -0,0 +1,2 @@
+export { ProgressCircle } from './ProgressCircle';
+export { ProgressBar } from './ProgressBar';

package/dist/components/PromoBanner/PromoBanner.d.ts

@@ -0,0 +1,43 @@
+import * as React from 'react';
+export interface PromoBannerProps {
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Set the primary button text
+     */
+    buttonText?: string;
+    /**
+     * Set the header text
+     */
+    header: string;
+    /**
+     * Set the image source to display it
+     */
+    img?: string;
+    /**
+     * Specify whether the banner should use a light-themed design
+     */
+    light?: boolean;
+    /**
+     * Set the link button text
+     */
+    linkText?: string;
+    /**
+     * Event handler for primary button press
+     */
+    onButtonClick?: () => void;
+    /**
+     * Event handler for close button press
+     */
+    onClose?: () => void;
+    /**
+     * Event handler for link button press
+     */
+    onLinkClick?: () => void;
+}
+/**
+ * @deprecated Since version 1.0.0. Will be deleted in version 2.0.0. Use {@link PromoBannerV2} instead.
+ */
+export declare const PromoBanner: React.FC<React.PropsWithChildren<PromoBannerProps>>;

package/dist/components/PromoBanner/index.d.ts

@@ -0,0 +1 @@
+export { PromoBanner } from './PromoBanner';

package/dist/components/PromoBannerV2/PromoBannerV2.d.ts

@@ -0,0 +1,45 @@
+import { ButtonKind } from '../Button';
+import * as React from 'react';
+export interface IPromoBannerV2Props {
+    /**
+     * Specify an optional className to be applied to the main container node
+     */
+    className?: string;
+    /**
+     * Element with additional content for second column
+     */
+    additionalContent?: React.ReactNode;
+    /**
+     * Shows the primary CTA button
+     */
+    primaryButton?: {
+        handleClick: () => void;
+        label: string;
+        kind?: ButtonKind;
+    };
+    /**
+     * Shows the secondary CTA button
+     */
+    secondaryButton?: {
+        handleClick: () => void;
+        label: string;
+        kind?: ButtonKind;
+    };
+    /**
+     * Set to true to display the banner vertically
+     */
+    vertical?: boolean;
+    /**
+     * Specify an optional className to be applied to the content node
+     */
+    contentClassName?: string;
+    /**
+     * Specify an optional className to be applied to the additional content node
+     */
+    additionalContentClassName?: string;
+    /**
+     * Event handler for close button press
+     */
+    onClose?: () => void;
+}
+export declare const PromoBannerV2: React.FC<React.PropsWithChildren<IPromoBannerV2Props>>;

package/dist/components/PromoBannerV2/constants.d.ts

@@ -0,0 +1 @@
+export declare const SMALL_CONTAINER_WIDTH_TRESHOLD = 559;

package/dist/components/PromoBannerV2/index.d.ts

@@ -0,0 +1,2 @@
+export { PromoBannerV2 } from './PromoBannerV2';
+export type { IPromoBannerV2Props } from './PromoBannerV2';

package/dist/components/RadioButton/RadioButton.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface RadioButtonProps extends React.HTMLAttributes<HTMLInputElement> {
+    description?: string;
+    checked?: boolean;
+    disabled?: boolean;
+}
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/RadioButton/index.d.ts

@@ -0,0 +1 @@
+export { RadioButton } from './RadioButton';

package/dist/components/Search/Search.d.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+export interface ISearchInputProps {
+    /**
+     * Makes search expandable after focusing the icon
+     */
+    isCollapsable?: boolean;
+    /**
+     * Specify whether the search should be disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Specify whether the search should have loader visible
+     */
+    isLoading?: boolean;
+    /**
+     * Optional text for placeholder
+     */
+    placeholder?: string;
+    /**
+     * Specify the search size
+     */
+    size?: 'compact' | 'medium' | 'large';
+    /**
+     * Specify the search value
+     */
+    value: string;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * The event handler for onChange
+     */
+    onChange: (value: string) => void;
+    /**
+     * Set to enable ellipsis
+     */
+    cropOnBlur?: boolean;
+}
+export declare const SearchInput: React.FC<ISearchInputProps>;

package/dist/components/Search/index.d.ts

@@ -0,0 +1 @@
+export { SearchInput } from './Search';

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,39 @@
+import { ButtonProps } from '../Button';
+import * as React from 'react';
+export type ButtonSize = 'compact' | 'medium' | 'large';
+type ButtonElement = {
+    id: string;
+    label: string;
+} & Pick<ButtonProps, 'disabled' | 'loading' | 'icon'>;
+export interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Array of buttons
+     */
+    buttons: ButtonElement[];
+    /**
+     * Set to make buttons fill the container if there is free space
+     */
+    fullWidth?: boolean;
+    /**
+     * Specify the buttons size
+     */
+    size?: ButtonSize;
+    /**
+     * Id of initially selected button
+     */
+    initialId?: string;
+    /**
+     * Id of current selected button, it will make component controlled
+     */
+    currentId?: string;
+    /**
+     * Handler for onClick on specific button
+     */
+    onButtonClick?: (id: string, event: React.MouseEvent<HTMLElement>) => void;
+}
+export declare const SegmentedControl: React.FC<SegmentedControlProps>;
+export {};

package/dist/components/SegmentedControl/index.d.ts

@@ -0,0 +1,2 @@
+export { SegmentedControl } from './SegmentedControl';
+export type { SegmentedControlProps } from './SegmentedControl';

package/dist/components/Skeleton/SkeletonAvatar.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface ISkeletonAvatar {
+    /**
+     * Specify if the element is square shape
+     */
+    square?: boolean;
+    /**
+     * Specify the size of the element (wdith and height in px)
+     */
+    size?: number;
+    /**
+     * Specify if the animation is enabled
+     */
+    animated?: boolean;
+}
+export declare const SkeletonAvatar: React.FC<ISkeletonAvatar>;

package/dist/components/Skeleton/SkeletonText.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface ISkeletonText {
+    /**
+     * Specify the height of the element
+     */
+    height?: number;
+    /**
+     * Specify the width of the element
+     */
+    width?: number;
+    /**
+     * Specify if the animation is enabled
+     */
+    animated?: boolean;
+}
+export declare const SkeletonText: React.FC<ISkeletonText>;

package/dist/components/Skeleton/SkeletonWrapper.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface ISkeletonWrapper extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The children elements to be wrapped by the skeleton wrapper
+     */
+    children: React.ReactNode;
+    /**
+     * Specify if the skeleton wrapper should display children elements vertically
+     */
+    vertical?: boolean;
+    /**
+     * Specify if the animation is enabled, it will be passed to the children skeleton components
+     */
+    animated?: boolean;
+}
+export declare const SkeletonWrapper: React.FC<React.PropsWithChildren<ISkeletonWrapper>>;

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1,3 @@
+export { SkeletonWrapper } from './SkeletonWrapper';
+export { SkeletonAvatar } from './SkeletonAvatar';
+export { SkeletonText } from './SkeletonText';

package/dist/components/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+export type StatusBadgeSizes = '3XS' | '2XS' | 'XS' | 'SM' | 'MD' | 'LG' | 'XL' | '2XL' | '3XL';
+export interface IStatusBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Specify the status badge kind
+     */
+    kind?: 'offline' | 'accept' | 'not-accept';
+    /**
+     * Specify the status badge size
+     */
+    size?: StatusBadgeSizes;
+}
+export declare const StatusBadge: React.FC<IStatusBadgeProps>;

package/dist/components/StatusBadge/index.d.ts

@@ -0,0 +1 @@
+export { StatusBadge } from './StatusBadge';

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+export declare const baseClass = "switch";
+export type SwitchSize = 'compact' | 'medium' | 'large';
+export type SwitchState = 'regular' | 'loading' | 'locked';
+export interface SwitchProps {
+    /**
+     * Specify the label for the switch input
+     */
+    ariaLabel?: string;
+    /**
+     * The CSS class for switch container
+     */
+    className?: string;
+    /**
+     * Will set the switch to "on" on component initialization
+     */
+    defaultOn?: boolean;
+    /**
+     * Specify whether the switch should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Ref object
+     */
+    innerRef?: React.LegacyRef<HTMLInputElement> | undefined;
+    /**
+     * Specify the switch input name
+     */
+    name?: string;
+    /**
+     * Define if switch is "on"
+     */
+    on?: boolean;
+    /**
+     * The event handler for onChange
+     */
+    onChange?(e: React.FormEvent, value: boolean): void;
+    /**
+     * Specify the switch size
+     */
+    size?: SwitchSize;
+    /**
+     * Specify the switch state
+     */
+    state?: SwitchState;
+}
+export declare const Switch: React.FC<React.PropsWithChildren<SwitchProps>>;

package/dist/components/Switch/index.d.ts

@@ -0,0 +1 @@
+export { Switch } from './Switch';

package/dist/components/Tab/Tab.d.ts

@@ -0,0 +1,31 @@
+import { Size } from '../../utils';
+import * as React from 'react';
+type HTMLProps = (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    href: string;
+}) | (React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    href?: never;
+});
+export type TabProps = HTMLProps & {
+    /**
+     * Set to display numeric counter with given number
+     */
+    count?: number;
+    /**
+     * Set to display selected state
+     */
+    isSelected?: boolean;
+    /**
+     * Set to display numeric counter as badge
+     */
+    asBadge?: boolean;
+    /**
+     * Specify the button size
+     */
+    size?: Size;
+    /**
+     * Renders given element
+     */
+    icon?: React.ReactElement;
+};
+export declare const Tab: React.FC<React.PropsWithChildren<TabProps>>;
+export {};

package/dist/components/Tab/TabsWrapper.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const TabsWrapper: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;
+export declare const TabsList: React.FC<React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>>>;

package/dist/components/Tab/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Tab';
+export * from './TabsWrapper';

package/dist/components/Tag/Tag.d.ts

@@ -0,0 +1,3 @@
+import { TagProps } from './types';
+import * as React from 'react';
+export declare const Tag: React.FC<React.PropsWithChildren<TagProps>>;

package/dist/components/Tag/constants.d.ts

@@ -0,0 +1,2 @@
+export declare const kinds: readonly ["default", "info", "warning", "success", "error", "purple", "black", "gray", "gradient01", "gradient02", "gradient03", "gradient04", "gradient05", "gradient06", "gradient07", "gradient08", "gradient09", "gradient10", "gradient11"];
+export declare const sizes: readonly ["small", "medium", "large", "xlarge"];

package/dist/components/Tag/index.d.ts

@@ -0,0 +1,3 @@
+export { Tag } from './Tag';
+export type { TagKind, TagSize } from './types';
+export type { TagProps } from './types';

package/dist/components/Tag/types.d.ts

@@ -0,0 +1,55 @@
+import { kinds, sizes } from './constants';
+import * as React from 'react';
+export type TagKind = (typeof kinds)[number];
+export type TagSize = (typeof sizes)[number];
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the tag kind
+     */
+    kind?: TagKind;
+    /**
+     * Specify the tag size
+     */
+    size?: TagSize;
+    /**
+     * Set the tag custom color
+     */
+    customColor?: string;
+    /**
+     * Set to show close icon
+     * @deprecated The close icon will be visible by providing the `onRemove` prop and this flag will no longer be needed
+     */
+    dismissible?: boolean;
+    /**
+     * Set to show close icon on hover only if the `onRemove` prop is provided
+     */
+    dismissibleOnHover?: boolean;
+    /**
+     * Set to hide close icon if the `onRemove` prop is provided
+     */
+    disabled?: boolean;
+    /**
+     * Outlined version of tag
+     */
+    outline?: boolean;
+    /**
+     * The event handler for close icon click, if provided the close icon will be visible
+     */
+    onRemove?(e: React.MouseEvent): void;
+    /**
+     * React node element to show on the left
+     */
+    leftNode?: React.ReactElement;
+    /**
+     * React node element to show on the right
+     */
+    rightNode?: React.ReactElement;
+    /**
+     * Set to show the tag as square (only if you want use icon without text)
+     */
+    iconOnly?: boolean;
+    /**
+     * Set text value for the tag. You can use this or `children` prop. If both are provided, `value` prop will be used.
+     */
+    value?: string;
+}

package/dist/components/TagInput/TagInput.d.ts

@@ -0,0 +1,3 @@
+import { TagInputProps, TagInputValues } from './types';
+import * as React from 'react';
+export declare const TagInput: <T extends TagInputValues>({ id, tags, onChange, validator, error, placeholder, size, className, inputClassName, onBlur, addOnBlur, ...props }: TagInputProps<T>) => React.ReactElement;

package/dist/components/TagInput/components/EditableTag.d.ts

@@ -0,0 +1,13 @@
+import { TagProps } from '../../Tag';
+import * as React from 'react';
+export interface EditableTagProps extends React.HTMLAttributes<HTMLDivElement> {
+    inputRef: React.RefObject<HTMLInputElement>;
+    index: number;
+    update: (idx: number, value: string) => void;
+    remove: (idx: number) => void;
+    validator?: (val: string) => boolean;
+    children: string;
+    size: 'medium' | 'large';
+    tagProps?: TagProps;
+}
+export declare const EditableTag: React.FC<React.PropsWithChildren<EditableTagProps>>;

package/dist/components/TagInput/components/EditableTagContent.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export interface EditableTagContentProps {
+    value: string;
+    className?: string;
+    innerEditableRef: React.RefObject<HTMLDivElement>;
+    inputRef: React.RefObject<HTMLInputElement>;
+    change: (value: string) => void;
+    remove: () => void;
+    validator?: (value: string) => boolean;
+}
+export declare const EditableTagContent: React.FC<EditableTagContentProps>;

package/dist/components/TagInput/components/EmailTagInput.d.ts

@@ -0,0 +1,5 @@
+import { TagInputProps, TagInputValues } from '../types';
+import * as React from 'react';
+export type EmailTagInputProps<T> = Omit<TagInputProps<T>, 'validator'>;
+export declare const emailRegex: RegExp;
+export declare const EmailTagInput: <T extends TagInputValues>({ placeholder, ...props }: EmailTagInputProps<T>) => React.ReactElement;

package/dist/components/TagInput/index.d.ts

@@ -0,0 +1,4 @@
+export { TagInput } from './TagInput';
+export { EmailTagInput } from './components/EmailTagInput';
+export type { EmailTagInputProps } from './components/EmailTagInput';
+export type { TagInputProps } from './types';

package/dist/components/TagInput/types.d.ts

@@ -0,0 +1,41 @@
+import { TagProps } from '../Tag';
+import * as React from 'react';
+export interface TagInputProps<T> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    /**
+     * Set the id for input
+     */
+    id?: string;
+    /**
+     * Set the error message
+     */
+    error?: string;
+    /**
+     * Array of defined tags
+     */
+    tags?: T[];
+    /**
+     * The event handler for modify tags array
+     */
+    onChange: (tags: T[]) => void;
+    /**
+     * Set the input placeholder
+     */
+    placeholder?: string;
+    /**
+     * Set the custom validation for provided items
+     */
+    validator?: (val: string) => boolean;
+    /**
+     * Specify the input size
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Set the input custom class
+     */
+    inputClassName?: string;
+    /**
+     * Add Tag on blur
+     */
+    addOnBlur?: boolean;
+}
+export type TagInputValues = string | Omit<TagProps, 'onRemove' | 'dismissible'>;

package/dist/components/Textarea/Textarea.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    className?: string;
+    error?: boolean;
+}
+export declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/dist/components/Textarea/index.d.ts

@@ -0,0 +1 @@
+export { Textarea } from './Textarea';

package/dist/components/Toast/Toast.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+type ToastKind = 'success' | 'warning' | 'error' | 'info';
+type ToastAction = {
+    onClick: () => void;
+    label: string;
+    closesOnClick?: boolean;
+};
+export interface ToastProps extends React.HTMLAttributes<HTMLDivElement> {
+    action?: ToastAction;
+    className?: string;
+    removable?: boolean;
+    kind?: ToastKind;
+    onClose?: () => void;
+}
+export declare const Toast: React.FC<React.PropsWithChildren<ToastProps>>;
+export {};