@livechat/design-system-react-components 1.30.0 → 1.31.0

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
 interface ExampleAppContentProps {
     showToggle: boolean;
-    topBarVisible: boolean;
-    handleTopBarButtonClick: () => void;
 }
 export declare const ExampleAppContent: React.FC<ExampleAppContentProps>;
 export declare const ExampleTopBar: React.FC;

package/dist/components/DetailsCard/DetailsCard.d.ts

@@ -35,6 +35,6 @@ export interface IDetailsCardProps {
     /**
      * Callback function called when the card label is clicked
      */
-    onClick?: () => void;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement | HTMLDivElement>) => void;
 }
 export declare const DetailsCard: React.FC<IDetailsCardProps>;

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

@@ -3,6 +3,7 @@ export { ModalBase } from './components/ModalBase';
 export { ModalCloseButton } from './components/ModalCloseButton';
 export { ModalPortal } from './components/ModalPortal';
 export { ModalHeader } from './components/ModalHeader';
+export { ActionModalContent } from './components/ActionModalContent';
 export type { ModalProps } from './Modal';
 export type { ModalBaseProps } from './components/ModalBase';
 export type { ModalCloseButtonProps } from './components/ModalCloseButton';

package/dist/components/OnboardingChecklist/OnboardingChecklist.d.ts

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

package/dist/components/OnboardingChecklist/components/CheckListItem.d.ts

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

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

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

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

@@ -0,0 +1,2 @@
+export { OnboardingChecklist } from './OnboardingChecklist';
+export type { IOnboardingChecklistProps, IChecklistItemProps, ICompletionMessageDataProps, } from './types';

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

@@ -0,0 +1,93 @@
+import * as React from 'react';
+export interface IChecklistItemProps {
+    /**
+     * Define the unique id of the item
+     */
+    id: string;
+    /**
+     * Set the title of the item
+     */
+    title: string;
+    /**
+     * Set the description of the item
+     */
+    description: string;
+    /**
+     * The element to display when the item is active
+     */
+    cta: React.ReactElement;
+    /**
+     * The element to display in the right column when the item is active
+     */
+    placeholder: React.ReactElement;
+}
+export interface ICheckListItem extends Omit<IChecklistItemProps, 'placeholder'> {
+    isActive: boolean;
+    isChecked: boolean;
+    isLastElement: boolean;
+    onClick: (id: string) => void;
+}
+export type ICompletionMessageDataProps = {
+    /**
+     * Set the title of the complete state
+     */
+    title: string;
+    /**
+     * Set the greeting text of the complete state
+     */
+    greetingText?: string;
+    /**
+     * The element to display when the checklist is completed before the animation starts
+     */
+    placeholder?: React.ReactElement;
+    /**
+     * Define the delay betweend displaying complete placeholder and the animation starts
+     */
+    delay?: number;
+    /**
+     * Define the custom heigh of content visible after checklist complete
+     */
+    height?: number;
+};
+export interface IOnboardingChecklistProps {
+    /**
+     * The CSS class for the component
+     */
+    className?: string;
+    /**
+     * Set the title of the checklist
+     */
+    title: string;
+    /**
+     * Set the greeting text of the checklist
+     */
+    greetingText?: string;
+    /**
+     * The list of items to display
+     */
+    items: IChecklistItemProps[];
+    /**
+     * Set to define the active item
+     */
+    activeItemId: string;
+    /**
+     * Set to defined the complete items
+     */
+    completedItemsIds: string[];
+    /**
+     * Callback function when list element is clicked
+     */
+    onActiveChange: (id: string) => void;
+    /**
+     * The CSS class for the right column
+     */
+    placeholderClassName?: string;
+    /**
+     * Set to define the checklist is completed
+     */
+    isCompleted?: boolean;
+    /**
+     * Complete element which will be displayed when `isCompleted` is true
+     */
+    completionMessageData: ICompletionMessageDataProps;
+}

package/dist/components/Picker/hooks/useFloatingPicker.d.ts

@@ -13,6 +13,7 @@ interface UseFloatingPickerProps {
     maxListHeight: number;
     isOpen?: boolean;
     onVisibilityChange?: (open: boolean, event?: Event | undefined) => void;
+    searchPhrase?: string;
 }
 interface IUseFloatingPicker {
     getReferenceProps: (userProps?: React.HTMLProps<HTMLElement> | undefined) => Record<string, unknown>;
@@ -31,5 +32,5 @@ interface IUseFloatingPicker {
     pointer: boolean;
     setPointer: (pointer: boolean) => void;
 }
-export declare const useFloatingPicker: ({ disabled, items, placement, minListHeight, maxListHeight, floatingStrategy, useDismissHookProps, useClickHookProps, isOpen, onVisibilityChange, }: UseFloatingPickerProps) => IUseFloatingPicker;
+export declare const useFloatingPicker: ({ disabled, items, placement, minListHeight, maxListHeight, floatingStrategy, useDismissHookProps, useClickHookProps, isOpen, onVisibilityChange, searchPhrase, }: UseFloatingPickerProps) => IUseFloatingPicker;
 export {};

package/dist/foundations/design-token.d.ts

@@ -365,5 +365,7 @@ export declare const DesignToken: {
     OnePopoverBorderActive: string;
     OneTooltipBackground: string;
     ContentBasicAutofill: string;
+    SurfaceCheckListItemOpenBackground: string;
+    SurfaceCheckListBackground: string;
 };
 export type DesignTokenKey = keyof typeof DesignToken;