@livechat/design-system-react-components 1.30.1 → 1.32.0

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { INavigationTopBarProps, ITopBarAlertProps, ITopBarTitleProps } from './types';
+/**
+ * NavigationTopBar is used to display a top bar in the app frame - mostly to display alerts, but arbitrary content can be placed there too.
+ * @example
+ * <NavigationTopBar>
+ *     <NavigationTopBar.Alert kind="error">
+ *       Something went wrong
+ *     </NavigationTopBar.Alert>
+ * </NavigationTopBar>
+ */
+export declare const NavigationTopBar: {
+    ({ children, additionalNodes, }: INavigationTopBarProps): React.ReactElement;
+    Alert: React.FC<ITopBarAlertProps>;
+    Title: React.FC<ITopBarTitleProps>;
+};
+/**
+ * Title component for the NavigationTopBar. Supposed to be placed in the `additionalNodes` prop of the NavigationTopBar.
+ * @example
+ * <NavigationTopBar additionalNodes={<NavigationTopBar.Title>Example top bar content</NavigationTopBar.Title>}>
+ * </NavigationTopBar>
+ */
+export declare const NavigationTopBarTitle: React.FC<ITopBarTitleProps>;
+/**
+ * Alert component for the NavigationTopBar.
+ * @example
+ * <NavigationTopBar>
+ *    <NavigationTopBar.Alert kind="error" show={!!error}>
+ *     Something went wrong
+ *   </NavigationTopBar.Alert>
+ * </NavigationTopBar>
+ * @example
+ * <NavigationTopBar>
+ *     <NavigationTopBarAlert
+ *      kind="warning"
+ *      primaryCta={{ label: 'Save', onClick: () => console.log('Save clicked') }}
+ *      secondaryCta={{ label: 'Discard', onClick: () => console.log('Discard clicked') }}
+ *      closeButton={{ onClick: () => console.log('Close clicked') }}
+ *      show={!hasUnsavedChanges && !hasClosedAlert}
+ *      >
+ *      You have unsaved changes
+ *     </NavigationTopBarAlert>
+ * </NavigationTopBar>
+ **/
+export declare const NavigationTopBarAlert: React.FC<ITopBarAlertProps>;

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

@@ -0,0 +1,15 @@
+import * as React from 'react';
+export declare const DisconnectedAlert: React.FC<{
+    show: boolean;
+    onClose: () => void;
+}>;
+export declare const ChameleonAlert: React.FC<{
+    show: boolean;
+    onClose: () => void;
+    kind: 'info' | 'success' | 'warning' | 'error';
+    changeKind: () => void;
+}>;
+export declare const CustomBackgroundAlert: React.FC<{
+    show: boolean;
+    onClose: () => void;
+}>;

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { ComponentCoreProps } from 'utils/types';
+export type NavigationTopBarKind = 'info' | 'success' | 'warning' | 'error';
+export interface INavigationTopBarProps extends ComponentCoreProps {
+    /**
+     * Contents of the top bar. You can use the `NavigationTopBar.Alert` component to display alerts.
+     */
+    children?: React.ReactNode;
+    /**
+     * Ńodes placed under the children.
+     */
+    additionalNodes?: React.ReactNode;
+}
+export interface ITopBarTitleProps extends ComponentCoreProps {
+    /**
+     * Content of the title.
+     */
+    children: React.ReactNode;
+}
+export interface ITopBarAlertProps extends ComponentCoreProps {
+    /**
+     * Visual style of the alert. You can also use `className` to style the alert if you need to set a custom background color.
+     * Defaults to `info`.
+     * */
+    kind?: NavigationTopBarKind;
+    /**
+     * Properties of the close button. If defined, the alert will be closable and the close button will be rendered.
+     * aria-label is highly recommended for accessibility.
+     * */
+    closeButton?: {
+        onClick: () => void;
+        'data-testid'?: string;
+        'aria-label'?: string;
+    };
+    /**
+     * Content of the alert.
+     */
+    children: React.ReactNode;
+    /**
+     * Primary CTA button. The button will be rendered if defined.
+     * Simple on purpose - if you need more complex buttons, you can use the `children` prop.
+     * */
+    primaryCta?: {
+        label: string;
+        onClick: () => void;
+    };
+    /**
+     * Secondary CTA button. The button will be rendered if defined.
+     * Simple on purpose - if you need more complex buttons, you can use the `children` prop.
+     * */
+    secondaryCta?: {
+        label: string;
+        onClick: () => void;
+    };
+    /**
+     * Show or hide the alert, defaults to `true`. Changes to this prop are animated - the alert will enter and leave smoothly.
+     * */
+    isVisible?: boolean;
+}

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

@@ -4,4 +4,5 @@ export { SideNavigationItem } from './SideNavigationItem/SideNavigationItem';
 export { NavigationGroup } from './NavigationGroup/NavigationGroup';
 export { NavigationItem } from './NavigationItem/NavigationItem';
 export { Navigation } from './Navigation/Navigation';
+export { NavigationTopBar, NavigationTopBarAlert, NavigationTopBarTitle, } from './NavigationTopBar/NavigationTopBar';
 export { SIDE_NAVIGATION_ITEM_TEST_ID, SIDE_NAVIGATION_ACTIVE_ITEM_TEST_ID, SIDE_NAVIGATION_PARENT_ICON_TEST_ID, } from './SideNavigationItem/constants';

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

@@ -1,11 +1,14 @@
 import * as React from 'react';
 interface ExampleAppContentProps {
     showToggle: boolean;
-    topBarVisible: boolean;
-    handleTopBarButtonClick: () => void;
+    alerts?: boolean[];
+    setAlerts?: (alerts: boolean[]) => void;
 }
 export declare const ExampleAppContent: React.FC<ExampleAppContentProps>;
-export declare const ExampleTopBar: React.FC;
+export declare const ExampleTopBar: React.FC<{
+    visibleAlerts: boolean[];
+    setAlerts: (alerts: boolean[]) => void;
+}>;
 export declare const getBadgeContent: (item: string) => "dot" | "alert" | 5 | undefined;
 export declare const getChatsMenu: (activeSubItem: number, handler: (o: number) => void) => React.JSX.Element;
 export declare const getEngageSubMenu: (activeSubItem: number, handler: (o: number) => void) => React.JSX.Element;

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;