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

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

@@ -0,0 +1,20 @@
+import { ToastProps, Toast } from './Toast';
+import * as React from 'react';
+type HorizontalPosition = 'left' | 'center' | 'right';
+type VerticalPosition = 'top' | 'bottom';
+export declare const ANIMATION_TIME = 200;
+interface Toast extends Omit<ToastProps, 'content'> {
+    id: string;
+    content: React.ReactElement | string;
+}
+export interface ToastWrapperProps {
+    className?: string;
+    toasts: Toast[];
+    fixed?: boolean;
+    block?: boolean;
+    animationType?: string;
+    verticalPosition?: VerticalPosition;
+    horizontalPosition?: HorizontalPosition;
+}
+export declare const ToastWrapper: React.FC<ToastWrapperProps>;
+export {};

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

@@ -0,0 +1,2 @@
+export * from './Toast';
+export * from './ToastWrapper';

package/dist/components/Tooltip/Tooltip.d.ts

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

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

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+import { IconKind } from '../Icon';
+import { TooltipTheme } from './types';
+
+export declare function getIconType(theme: TooltipTheme): IconKind;
+export declare function getArrowPositionStyles(arrowOffsetY?: number, arrowOffsetX?: number, arrowY?: number, arrowX?: number): CSSProperties | undefined;
+export declare const getArrowTokens: (tooltipStyle: string | undefined) => {
+    stroke: string;
+    fill: string;
+};

package/dist/components/Tooltip/components/Info.d.ts

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

package/dist/components/Tooltip/components/Interactive.d.ts

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

package/dist/components/Tooltip/components/Reports.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface IReportsProps {
+    title: string;
+    description?: string;
+    children: React.ReactNode;
+}
+export declare const Reports: React.FC<React.PropsWithChildren<IReportsProps>>;

package/dist/components/Tooltip/components/Simple.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+export declare const Simple: React.FC<{
+    text: string;
+}>;

package/dist/components/Tooltip/components/UserGuide/SpotlightOverlay.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare const SpotlightOverlay: ({ gap, isVisible, slide, disablePointerEvents, }: {
+    gap: DOMRect | null;
+    isVisible: boolean;
+    slide: boolean;
+    disablePointerEvents: boolean;
+}) => React.ReactElement | null;
+export default SpotlightOverlay;

package/dist/components/Tooltip/components/UserGuide/UserGuide.d.ts

@@ -0,0 +1,12 @@
+import { ModalPortalProps } from '../../../Modal';
+import { ITooltipProps } from '../../types';
+import * as React from 'react';
+interface IOwnProps {
+    shouldSlide?: boolean;
+    className?: string;
+    disableSpotlightPointerEvents?: boolean;
+}
+interface IUserGuide extends IOwnProps, Omit<ITooltipProps, 'triggerRenderer'>, Omit<ModalPortalProps, 'children'> {
+}
+export declare const UserGuide: React.FC<React.PropsWithChildren<IUserGuide>>;
+export {};

package/dist/components/Tooltip/components/UserGuide/UserGuideStep.d.ts

@@ -0,0 +1,16 @@
+import { TooltipTheme } from '../../types';
+import * as React from 'react';
+export declare const UserGuideStep: React.FC<{
+    header: string;
+    text: string;
+    image?: {
+        src: string;
+        alt: string;
+    };
+    currentStep: number;
+    stepMax: number;
+    closeWithX?: boolean;
+    theme?: TooltipTheme;
+    handleClickPrimary: () => void;
+    handleCloseAction?: (ev: KeyboardEvent | React.MouseEvent) => void;
+}>;

package/dist/components/Tooltip/components/UserGuide/index.d.ts

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

package/dist/components/Tooltip/components/UserGuide/virtualElementReference.d.ts

@@ -0,0 +1,9 @@
+export default class VirtualReference {
+    element: Element;
+    padding: number;
+    constructor(element: Element, padding: number);
+    addPadding(rect: DOMRect): Omit<DOMRect, 'toJSON'>;
+    getBoundingClientRect(): Omit<DOMRect, 'toJSON'>;
+    get clientWidth(): number;
+    get clientHeight(): number;
+}

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

@@ -0,0 +1,5 @@
+export { Simple } from './Simple';
+export { Info } from './Info';
+export { Interactive } from './Interactive';
+export { UserGuide } from './UserGuide';
+export { Reports } from './Reports';

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

@@ -0,0 +1,4 @@
+export { Tooltip } from './Tooltip';
+export { Simple, Info, Interactive, Reports } from './components';
+export { UserGuide } from './components/UserGuide';
+export type { ITooltipProps, ITooltipInfoProps, ITooltipInteractiveProps, } from './types';

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

@@ -0,0 +1,199 @@
+import { Placement, VirtualElement, UseDismissProps, Strategy, UseClickProps } from '@floating-ui/react';
+import { ButtonProps } from '../Button';
+import * as React from 'react';
+export type TooltipTheme = 'invert' | 'important' | undefined;
+export type TooltipButton = {
+    handleClick: () => void;
+    label: string;
+} & Omit<ButtonProps, 'onClick'>;
+export interface ITooltipProps {
+    /**
+     * The CSS class for tooltip
+     */
+    className?: string;
+    /**
+     * The CSS class for trigger wrapper
+     */
+    triggerClassName?: string;
+    /**
+     * Trigger element
+     */
+    triggerRenderer: React.ReactElement | (() => React.ReactNode);
+    /**
+     * Specify the tooltip kind
+     * @deprecated we are changing the nomenclature to `kind` in order to maintain the constant naming of props
+     */
+    theme?: 'invert' | 'important' | undefined;
+    /**
+     * Specify the tooltip kind
+     */
+    kind?: 'invert' | 'important' | undefined;
+    /**
+     * The tooltip placement
+     */
+    placement?: Placement;
+    /**
+     * Set to control the menu visibility
+     */
+    isVisible?: boolean;
+    /**
+     * Removes the spacing inside the tooltip
+     */
+    fullSpaceContent?: boolean;
+    /**
+     * Optional handler called on tooltip hide
+     */
+    onClose?: () => void;
+    /**
+     * Optional handler called on tooltip show
+     */
+    onOpen?: () => void;
+    /**
+     * Set to enable/disable transition
+     */
+    withFadeAnimation?: boolean;
+    /**
+     * Set to define transition duration for showing and hiding tooltip
+     */
+    transitionDuration?: number;
+    /**
+     * Set to define transition duration for showing tooltip
+     */
+    hoverOnDuration?: number;
+    /**
+     * Set to define transition duration for hiding tooltip
+     */
+    hoverOffDuration?: number;
+    /**
+     * Set to define delay before transition start for showing and hiding tooltip
+     */
+    transitionDelay?: number;
+    /**
+     * Set to define delay before transition start for showing tooltip
+     */
+    hoverOnDelay?: number;
+    /**
+     * Set to define delay before transition start for hiding tooltip
+     * @deprecated This prop will be removed in the future. Use `hoverOffDelay`.
+     */
+    hoverOutDelayTimeout?: number;
+    /**
+     * Set to define delay before transition start for hiding tooltip
+     */
+    hoverOffDelay?: number;
+    /**
+     * Set if you want to show tooltip after trigger click if state is not managed
+     */
+    triggerOnClick?: boolean;
+    /**
+     * Set if you want to show tooltip after trigger hover if state is not managed
+     */
+    triggerOnHover?: boolean;
+    /**
+     * Set the tooltip distance from the trigger
+     */
+    offsetMainAxis?: number;
+    /**
+     * Set the tooltip distance from the trigger
+     */
+    offsetCrossAxis?: number;
+    /**
+     * Set custom reference object for the tooltip
+     */
+    referenceElement?: VirtualElement;
+    /**
+     * Waits until cursor is at “rest” over the trigger to change the state
+     */
+    activationThreshold?: number;
+    /**
+     * Set the `floating-ui` useDismiss hook paramns if you need more control
+     * https://floating-ui.com/docs/usedismiss
+     */
+    useDismissHookProps?: UseDismissProps;
+    /**
+     * Set the `floating-ui` useClick hook paramns if you need more control
+     * https://floating-ui.com/docs/useclick
+     */
+    useClickHookProps?: UseClickProps;
+    /**
+     * Set to move the arrow along the Y axis from default position (left and right position)
+     */
+    arrowOffsetY?: number;
+    /**
+     * Set to move the arrow along the X axis from default position (top and bottom position)
+     */
+    arrowOffsetX?: number;
+    /**
+     * Set to close the tooltip after leaving trigger area in uncontrolled state.
+     * Be default, moving the curson from trigger to tooltip will keep it open.
+     */
+    closeOnTriggerBlur?: boolean;
+    /**
+     * Set the type of CSS position property to use
+     * https://floating-ui.com/docs/usefloating#strategy
+     */
+    floatingStrategy?: Strategy;
+}
+export interface ITooltipInfoProps {
+    /**
+     * The CSS class for Info tooltip
+     */
+    className?: string;
+    /**
+     * The Info tooltip header
+     */
+    header?: string;
+    /**
+     * The Info tooltip text
+     */
+    text: string;
+    /**
+     * Set to show close button
+     */
+    closeWithX?: boolean;
+    /**
+     * The Info tooltip theme
+     */
+    theme?: TooltipTheme;
+    /**
+     * The Info tooltip close button action
+     */
+    handleCloseAction?: (ev: React.MouseEvent) => void;
+}
+export interface ITooltipInteractiveProps {
+    /**
+     * The Interactive tooltip header
+     */
+    header?: string;
+    /**
+     * The Interactive tooltip text
+     */
+    text: string;
+    /**
+     * The Interactive tooltip image
+     */
+    image?: {
+        src: string;
+        alt: string;
+    };
+    /**
+     * Set to show close button
+     */
+    closeWithX?: boolean;
+    /**
+     * The Interactive tooltip theme
+     */
+    theme?: TooltipTheme;
+    /**
+     * The Interactive tooltip close button action
+     */
+    handleCloseAction?: (ev: React.MouseEvent) => void;
+    /**
+     * The Interactive tooltip primary button props
+     */
+    primaryButton: TooltipButton;
+    /**
+     * The Interactive tooltip secondary button props
+     */
+    secondaryButton?: TooltipButton;
+}

package/dist/components/Typography/Display.d.ts

@@ -0,0 +1,18 @@
+import { TDisplaySize, TTextAlign } from './types';
+import * as React from 'react';
+interface IProps {
+    /** Size of the text */
+    size?: TDisplaySize;
+    /** DOM element name that will be rendered */
+    as?: string;
+    /** Optional custom className */
+    className?: string;
+    /** Optional prop to set the custom color */
+    customColor?: string;
+    /** Optional prop to set the text align */
+    textAlign?: TTextAlign;
+    /** Optional prop to set the bold */
+    bold?: boolean;
+}
+export declare const Display: React.FC<React.PropsWithChildren<IProps>>;
+export {};

package/dist/components/Typography/Heading.d.ts

@@ -0,0 +1,19 @@
+import { THeadingSize, TTextAlign } from './types';
+import * as React from 'react';
+interface IProps extends React.HTMLAttributes<HTMLElement> {
+    size?: THeadingSize;
+    /** DOM element name that will be rendered */
+    as?: string;
+    /** Optional custom className */
+    className?: string;
+    /** Optional prop to set the uppercase */
+    uppercase?: boolean;
+    /** Optional prop to set the bold */
+    bold?: boolean;
+    /** Optional prop to set the custom color */
+    customColor?: string;
+    /** Optional prop to set the text align */
+    textAlign?: TTextAlign;
+}
+export declare const Heading: React.FC<React.PropsWithChildren<IProps>>;
+export {};

package/dist/components/Typography/Text.d.ts

@@ -0,0 +1,31 @@
+import { TTextAlign, TTextSize } from './types';
+import * as React from 'react';
+interface IProps extends React.HTMLAttributes<HTMLElement> {
+    /** DOM element name that will be rendered */
+    as?: string;
+    /** Size of the text */
+    size?: TTextSize;
+    /** Optional custom className */
+    className?: string;
+    /**
+     * Optional prop to set the uppercase
+     * @deprecated Use `uppercase` instead
+     * */
+    caps?: boolean;
+    /** Optional prop to set the uppercase */
+    uppercase?: boolean;
+    /** Optional prop to set the bold */
+    bold?: boolean;
+    /** Optional prop to set the underline */
+    underline?: boolean;
+    /** Optional prop to set the strike */
+    strike?: boolean;
+    /** Optional prop to set the custom color */
+    customColor?: string;
+    /** Optional prop to set the text align */
+    textAlign?: TTextAlign;
+    /** Optional prop to set the no margin */
+    noMargin?: boolean;
+}
+export declare const Text: React.FC<React.PropsWithChildren<IProps>>;
+export {};

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

@@ -0,0 +1,4 @@
+export { Heading } from './Heading';
+export { Text } from './Text';
+export { Display } from './Display';
+export type { THeadingSize, TTextSize, TDisplaySize } from './types';

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

@@ -0,0 +1,4 @@
+export type TTextSize = 'xs' | 'sm' | 'md' | 'lg';
+export type THeadingSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type TDisplaySize = 'sm' | 'md' | 'lg' | 'max';
+export type TTextAlign = 'left' | 'right' | 'center' | 'justify';

package/dist/components/UpdateBadge/UpdateBadge.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const UpdateBadge: React.FC;

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

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

package/dist/components/UploadBar/UploadBar.d.ts

@@ -0,0 +1,49 @@
+import { ProgressStatus, ProgressSize } from '../Progress/constants';
+import * as React from 'react';
+export interface UploadBarProps {
+    /**
+     * The CSS class for container
+     */
+    className?: string;
+    /**
+     * Specify the value of current progress circle (0-100)
+     */
+    progressValue: number;
+    /**
+     * Specify the upload bar title
+     */
+    title: string;
+    /**
+     * Define if upload bar should be open
+     */
+    isExpanded?: boolean;
+    /**
+     * Specify the error message
+     */
+    errorMessage?: string;
+    /**
+     * Specify the upload bar status
+     */
+    status?: ProgressStatus;
+    /**
+     * Renders given element
+     */
+    icon?: React.ReactNode;
+    /**
+     * Specify the upload bar size
+     */
+    size?: ProgressSize;
+    /**
+     * Set the component's mode to `multiple` to specify whether the upload bar should display multiple elements
+     */
+    mode?: 'single' | 'multiple';
+    /**
+     * The event handler for close icon click
+     */
+    onCloseButtonClick?: () => void;
+    /**
+     * The event handler for retry icon click
+     */
+    onRetryButtonClick?: () => void;
+}
+export declare const UploadBar: React.FC<React.PropsWithChildren<UploadBarProps>>;

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

@@ -0,0 +1 @@
+export * from './UploadBar';