@livechat/design-system-react-components 2.17.0 → 2.19.0

package/dist/components/AnimatedTextContainer/AnimatedTextContainer.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IAnimatedTextContainerProps } from './types';
+
+export declare const AnimatedTextContainer: FC<IAnimatedTextContainerProps>;

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

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

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

@@ -0,0 +1,22 @@
+export interface IAnimatedTextContainerProps {
+    /**
+     * Simple text to display
+     */
+    text: string;
+    /**
+     * Should the text typing be animated
+     */
+    typingAnimation?: boolean;
+    /**
+     * Delay before typing starts
+     */
+    typingDelay?: number;
+    /**
+     * Typing animation speed
+     */
+    typingSpeed?: number;
+    /**
+     * Callback when typing animation ends
+     */
+    onTypingEnd?: () => void;
+}

package/dist/components/AppFrame/components/NavigationTopBar/NavigationTopBar.d.ts

@@ -10,7 +10,7 @@ import * as React from 'react';
  * </NavigationTopBar>
  */
 export declare const NavigationTopBar: {
-    ({ children, className, additionalNodes, }: INavigationTopBarProps): React.ReactElement;
+    ({ children, className, additionalNodes, id, }: INavigationTopBarProps): React.ReactElement;
     Alert: React.FC<ITopBarAlertProps>;
     Title: React.FC<ITopBarTitleProps>;
 };

package/dist/components/AppFrame/components/NavigationTopBar/examples.d.ts

@@ -2,6 +2,7 @@ import * as React from 'react';
 export declare const DisconnectedAlert: React.FC<{
     show: boolean;
     onClose: () => void;
+    id?: string;
 }>;
 export declare const ChameleonAlert: React.FC<{
     show: boolean;

package/dist/components/AppFrame/stories-helpers.d.ts

@@ -12,6 +12,7 @@ export declare const ExampleTopBar: React.FC<{
     topBarVisible: boolean;
     visibleAlert: number | null;
     setVisibleAlert: (index: number | null) => void;
+    id?: string;
 }>;
 export declare const getBadgeContent: (item: string) => "dot" | "alert" | 5 | undefined;
 export declare const getChatsMenu: (activeSubItem: number, handler: (o: number) => void) => import("react/jsx-runtime").JSX.Element;

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

@@ -24,4 +24,8 @@ export interface AutoCompleteProps extends Omit<IInputProps, 'type'> {
     single?: boolean;
     /** If true, the option list will be hidden if there is only one option and it is an exact match to the input value. */
     hideIfExactMatch?: boolean;
+    /**
+     * Set the text to display with read-only state when there is no data. Default to 'No data'
+     */
+    noDataFallbackText?: string;
 }

package/dist/components/Checkbox/Checkbox.d.ts

@@ -4,6 +4,10 @@ export interface CheckboxProps extends React.HTMLAttributes<HTMLInputElement> {
      * Specify whether the checkbox should be disabled
      */
     disabled?: boolean;
+    /**
+     * Specify whether the checkbox should be read only
+     */
+    readOnly?: boolean;
     /**
      * Specify whether the checkbox should be checked
      */

package/dist/components/FormField/FormField.d.ts

@@ -12,6 +12,10 @@ export interface FormFieldProps {
      * Define to associate the label with the field
      */
     labelFor?: string;
+    /**
+     * Makes the label text bold. Note: This prop should only be used together with PromoInput.
+     */
+    boldLabel?: boolean;
     /**
      * The CSS class for field container
      */
@@ -36,5 +40,9 @@ export interface FormFieldProps {
      * Renders given element above the filed
      */
     labelRightNode?: React.ReactNode;
+    /**
+     * Whether the form field is read-only
+     */
+    readOnly?: boolean;
 }
 export declare const FormField: React.FC<React.PropsWithChildren<FormFieldProps>>;

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

@@ -20,6 +20,10 @@ export interface IInputGlobalProps extends React.InputHTMLAttributes<HTMLInputEl
      * Set to enable ellipsis
      */
     cropOnBlur?: boolean;
+    /**
+     * Set the text to display with read-only state when there is no data. Default to 'No data'
+     */
+    noDataFallbackText?: string;
 }
 export interface IInputProps extends IInputGlobalProps {
     /**

package/dist/components/NumericInput/NumericInput.d.ts

@@ -8,5 +8,6 @@ export type NumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
     disabled?: boolean;
     noControls?: boolean;
     onChange: (value: string) => void;
+    noDataFallbackText?: string;
 };
 export declare const NumericInput: React.FC<React.PropsWithChildren<NumericInputProps>>;

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

@@ -146,4 +146,8 @@ export interface IPickerProps extends ComponentCoreProps {
      * Additional props for the input element
      */
     inputProps?: InputHTMLAttributes<HTMLInputElement> | Record<string, unknown>;
+    /**
+     * Set the text to display with read-only state when there is no data. Default to 'No data'
+     */
+    noDataFallbackText?: string;
 }

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

@@ -3,5 +3,6 @@ export interface RadioButtonProps extends React.HTMLAttributes<HTMLInputElement>
     description?: React.ReactNode;
     checked?: boolean;
     disabled?: boolean;
+    readOnly?: boolean;
 }
 export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/ReadOnlyText/ReadOnlyText.d.ts

@@ -0,0 +1,11 @@
+export interface ReadOnlyTextProps {
+    /**
+     * The value to display
+     */
+    value?: string;
+    /**
+     * Text to show when no value is provided
+     */
+    noDataFallbackText?: string;
+}
+export declare const ReadOnlyText: ({ value, noDataFallbackText, }: ReadOnlyTextProps) => import("react/jsx-runtime").JSX.Element;

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

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

package/dist/components/Stepper/Stepper.d.ts

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

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

@@ -0,0 +1,2 @@
+export { Stepper } from './Stepper';
+export type { StepperProps } from './types';

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Current active step (1-based)
+     */
+    activeStep: number;
+    /**
+     * Total number of steps
+     */
+    steps: number;
+    /**
+     * Custom class name
+     */
+    className?: string;
+    /**
+     * Optional test id for testing
+     */
+    'data-testid'?: string;
+}

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

@@ -1,3 +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;
+export declare const TagInput: <T extends TagInputValues>({ id, tags, onChange, validator, error, placeholder, size, className, inputClassName, onBlur, addOnBlur, readOnly, noDataFallbackText, ...props }: TagInputProps<T>) => React.ReactElement;

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

@@ -37,5 +37,9 @@ export interface TagInputProps<T> extends Omit<React.InputHTMLAttributes<HTMLInp
      * Add Tag on blur
      */
     addOnBlur?: boolean;
+    /**
+     * Set the text to display with read-only state when there is no data. Default to 'No data'
+     */
+    noDataFallbackText?: string;
 }
 export type TagInputValues = string | Omit<TagProps, 'onRemove' | 'dismissible'>;

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

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

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

@@ -1,5 +1,4 @@
 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

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

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

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

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

@@ -1,4 +1,5 @@
 export type TTextSize = 'xs' | 'sm' | 'md' | 'lg';
-export type THeadingSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export declare const HEADING_SIZES: readonly ["xl", "lg", "md", "sm", "xs", "2xs", "3xs"];
+export type THeadingSize = (typeof HEADING_SIZES)[number];
 export type TDisplaySize = 'sm' | 'md' | 'lg' | 'max';
 export type TTextAlign = 'left' | 'right' | 'center' | 'justify';

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

@@ -0,0 +1,4 @@
+import { FC, PropsWithChildren } from 'react';
+import { IUserGuide } from './types';
+
+export declare const UserGuide: FC<PropsWithChildren<IUserGuide>>;

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IUserGuideBubbleStepProps } from './types';
+
+export declare const UserGuideBubbleStep: FC<IUserGuideBubbleStepProps>;

package/dist/components/UserGuide/components/UserGuideBubbleStep/types.d.ts

@@ -0,0 +1,32 @@
+import { ReactElement, ReactNode } from 'react';
+
+export interface IUserGuideBubbleStepProps {
+    /**
+     * The message for the first bubble
+     */
+    headerMessage: string;
+    /**
+     * The optional icon for the first bubble
+     */
+    headerIcon?: ReactElement;
+    /**
+     * The message for the second bubble
+     */
+    message: string;
+    /**
+     * The cta for the third bubble
+     */
+    cta: ReactNode;
+    /**
+     * Set to true to show the completed state
+     */
+    isCompleted?: boolean;
+    /**
+     * The function to be called when the all bubbles animations complete
+     */
+    handleAnimationComplete?: () => void;
+    /**
+     * Set to true to disable typing animations
+     */
+    disableTypingAnimations?: boolean;
+}

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

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { IUserGuideStepProps } from './types';
+
+export declare const UserGuideStep: FC<IUserGuideStepProps>;

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

@@ -0,0 +1,50 @@
+import { MouseEvent } from 'react';
+
+export interface IUserGuideStepProps {
+    /**
+     * The header of the step
+     */
+    header: string;
+    /**
+     * The text of the step
+     */
+    text: string;
+    /**
+     * Set to enable typing animation for the text
+     */
+    typingAnimation?: boolean;
+    /**
+     * The image of the step
+     */
+    image?: {
+        src: string;
+        alt: string;
+    };
+    /**
+     * The video of the step. It will be rendered if there is no image
+     */
+    video?: {
+        src: string;
+        playsInline?: boolean;
+        autoPlay?: boolean;
+        muted?: boolean;
+        loop?: boolean;
+        controls?: boolean;
+    };
+    /**
+     * The current step number
+     */
+    currentStep: number;
+    /**
+     * The maximum number of steps
+     */
+    stepMax: number;
+    /**
+     * The function to be called when the primary button is clicked
+     */
+    handleClickPrimary: () => void;
+    /**
+     * The function to be called when the the skip button is clicked
+     */
+    handleCloseAction?: (ev: KeyboardEvent | MouseEvent) => void;
+}

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

@@ -0,0 +1,2 @@
+export { UserGuideBubbleStep } from './UserGuideBubbleStep/UserGuideBubbleStep';
+export { UserGuideStep } from './UserGuideStep/UserGuideStep';

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

@@ -0,0 +1,3 @@
+export { UserGuide } from './UserGuide';
+export { UserGuideStep, UserGuideBubbleStep } from './components/';
+export type { IUserGuide } from './types';

package/dist/components/UserGuide/stories-helpers.d.ts

@@ -0,0 +1,5 @@
+import { ReactElement } from 'react';
+
+export declare const AppContent: ({ onStartGuideClick, }: {
+    onStartGuideClick: () => void;
+}) => ReactElement;

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

@@ -0,0 +1,42 @@
+import { CSSProperties } from 'react';
+import { Placement } from '@floating-ui/react';
+
+export type CursorTiming = 'fast1' | 'fast2' | 'moderate1' | 'moderate2';
+export interface IUserGuide {
+    /**
+     * The class name for the floating container
+     */
+    className?: string;
+    /**
+     * The CSS properties for the highlighted element
+     */
+    elementStyles?: CSSProperties;
+    /**
+     * The position for the floating element which sets the cursor position
+     */
+    cursorPosition?: Placement;
+    /**
+     * The timing for the floating element transition
+     */
+    cursorTiming?: CursorTiming;
+    /**
+     * The id of the element to highlight
+     */
+    parentElementName?: string;
+    /**
+     * The visibility of the user guide
+     */
+    isVisible?: boolean;
+    /**
+     * The custom z-index value for the overlay
+     */
+    zIndex?: number;
+    /**
+     * The first step of the user guide, rendered on the center of the screen
+     */
+    isFirstStep?: boolean;
+    /**
+     * The last step of the user guide, rendered on the center of the screen
+     */
+    isLastStep?: boolean;
+}