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

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

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

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

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

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { ComponentCoreProps } from '../../../../utils/types';
+export interface INavigationProps extends ComponentCoreProps {
+    /**
+     * It will display your navigation elements
+     */
+    children: React.ReactNode;
+}

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

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

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { ComponentCoreProps } from '../../../../utils/types';
+export interface INavigationGroupProps extends ComponentCoreProps {
+    /**
+     * It will display your navigation elements
+     */
+    children: React.ReactNode;
+    /**
+     * The CSS class for the navigation bar list
+     */
+    className?: string;
+    /**
+     * Specify whether the list should be scrollable
+     */
+    scrollable?: boolean;
+}

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

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

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ComponentCoreProps } from '../../../../utils/types';
+export interface INavigationItemProps extends ComponentCoreProps {
+    /**
+     * The ID of the item
+     */
+    id: string;
+    /**
+     * The label of the item visible in the tooltip
+     */
+    label: string;
+    /**
+     * Container for the icon or any other element
+     */
+    icon: React.ReactElement;
+    /**
+     * The URL to navigate to
+     */
+    url: string;
+    /**
+     * Specify whether the tooltip should be disabled after hover
+     */
+    disableTooltip?: boolean;
+    /**
+     * Set if you are preparing a custom element as a button icon and you do not want it to be semi-transparent without hover
+     */
+    disableOpacity?: boolean;
+    /**
+     * Specify whether the badge should be visible and what type it should be
+     */
+    badge?: 'dot' | 'alert' | number;
+    /**
+     * Specify whether the item is active
+     */
+    isActive?: boolean;
+    /**
+     * The function to call on click
+     */
+    onClick: (e: React.MouseEvent<HTMLAnchorElement>, id: string) => void;
+}

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

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

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { ComponentCoreProps } from '../../../../utils/types';
+export interface ISideNavigationProps extends ComponentCoreProps {
+    /**
+     * It will display your side navigation elements
+     */
+    children: React.ReactNode;
+    /**
+     * It will display the title of the side navigation bar
+     */
+    title?: string;
+    /**
+     * It will display the custom element as title of the side navigation bar
+     */
+    customHeader?: React.ReactNode;
+    /**
+     * It will display the custom element as footer of the side navigation bar
+     */
+    customFooter?: React.ReactNode;
+    /**
+     * Specify whether the gaps between elements should be removed
+     */
+    noGaps?: boolean;
+    /**
+     * It will display the custom element on the right side of the side navigation bar title
+     */
+    rightNode?: React.ReactNode;
+}

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

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

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ComponentCoreProps } from '../../../../utils/types';
+export interface ISideNavigationGroupProps extends ComponentCoreProps {
+    /**
+     * It will display your side navigation elements
+     */
+    children: React.ReactNode;
+    /**
+     * The label of the side navigation list
+     */
+    label?: React.ReactNode | ((isOpen: boolean) => React.ReactNode);
+    /**
+     * The right node of the side navigation list if `isCollapsible` is set to true
+     */
+    rightNode?: React.ReactNode | ((isOpen: boolean) => React.ReactNode);
+    /**
+     * Specify whether the list should be collapsible
+     */
+    isCollapsible?: boolean;
+    /**
+     * The function to call on item hover
+     */
+    onItemHover?: () => void;
+    /**
+     * Specify whether the list should be open on the first render
+     */
+    shouldOpenOnInit?: boolean;
+    /**
+     * Specify whether the list should be open if an item within the group is active
+     */
+    shouldOpenOnActive?: boolean;
+}

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

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

package/dist/components/AppFrame/components/SideNavigationItem/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const SIDE_NAVIGATION_ITEM_TEST_ID = "side-navigation-item-test-id";
+export declare const SIDE_NAVIGATION_ACTIVE_ITEM_TEST_ID = "side-navigation-active-item-test-id";
+export declare const SIDE_NAVIGATION_PARENT_ICON_TEST_ID = "side-navigation-parent-icon";

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

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { ComponentCoreProps } from '../../../../utils/types';
+export interface ISideNavigationItemProps extends ComponentCoreProps {
+    /**
+     * The label of the item
+     */
+    label: React.ReactNode;
+    /**
+     * Custom element on the right side of the side navigation item
+     */
+    rightNode?: React.ReactNode;
+    /**
+     * Custom element on the left side of the side navigation item
+     */
+    leftNode?: React.ReactNode;
+    /**
+     * Specify whether the icon space should be kept
+     */
+    shouldKeepIconSpace?: boolean;
+    /**
+     * The URL to navigate to
+     */
+    url?: string;
+    /**
+     * Specify whether the item is active
+     */
+    isActive?: boolean;
+    /**
+     * Specify whether the item is seen as the main one
+     */
+    isMainEntry?: boolean;
+    /**
+     * The function to call on click
+     */
+    onClick: () => void;
+    /**
+     * The function to call on item hover
+     */
+    onItemHover?: () => void;
+    /**
+     * Specify whether the icon should be hidden
+     */
+    isIconHidden?: boolean;
+}

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

@@ -0,0 +1,7 @@
+export { SideNavigation } from './SideNavigation/SideNavigation';
+export { SideNavigationGroup } from './SideNavigationGroup/SideNavigationGroup';
+export { SideNavigationItem } from './SideNavigationItem/SideNavigationItem';
+export { NavigationGroup } from './NavigationGroup/NavigationGroup';
+export { NavigationItem } from './NavigationItem/NavigationItem';
+export { Navigation } from './Navigation/Navigation';
+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/hooks/useAppFrameAnimations.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+interface UseAppFrameAnimationsProps {
+    isVisible: boolean;
+    elementRef: React.RefObject<HTMLDivElement>;
+}
+interface IUseAppFrameAnimations {
+    isOpen: boolean;
+    isMounted: boolean;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+export declare const useAppFrameAnimations: ({ isVisible, elementRef, }: UseAppFrameAnimationsProps) => IUseAppFrameAnimations;
+export {};

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

@@ -0,0 +1,2 @@
+export { AppFrame } from './AppFrame';
+export * from './components';

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

@@ -0,0 +1,13 @@
+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;
+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;
+export declare const getArchivesSubMenu: (activeSubItem: number, handler: (o: number) => void) => React.JSX.Element;
+export {};

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { ComponentCoreProps } from '../../utils/types';
+export interface IAppFrameProps extends ComponentCoreProps {
+    /**
+     * It will display your app in the content area
+     */
+    children: React.ReactNode;
+    /**
+     * It will display navigation elements
+     */
+    navigation: React.ReactNode;
+    /**
+     * It will display the side navigation bar
+     */
+    sideNavigation?: React.ReactNode;
+    /**
+     * It will display the top bar with passed element
+     */
+    topBar?: React.ReactNode;
+    /**
+     * The CSS class for the top bar
+     */
+    topBarClassName?: string;
+    /**
+     * The CSS class for the sub navigation bar
+     */
+    sideNavigationContainerClassName?: string;
+    /**
+     * The CSS class for the content container
+     */
+    contentClassName?: string;
+}
+export type { INavigationProps } from './components/Navigation/types';
+export type { INavigationGroupProps } from './components/NavigationGroup/types';
+export type { INavigationItemProps } from './components/NavigationItem/types';
+export type { ISideNavigationProps } from './components/SideNavigation/types';
+export type { ISideNavigationGroupProps } from './components/SideNavigationGroup/types';
+export type { ISideNavigationItemProps } from './components/SideNavigationItem/types';

package/dist/components/Badge/Badge.d.ts

@@ -6,6 +6,7 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     count?: number;
     /**
      * Specify the badge kind
+     * @param secondary - is deprecated, use "primary" or "tertiary" instead
      */
     kind?: 'primary' | 'secondary' | 'tertiary';
     /**
@@ -14,10 +15,12 @@ export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
     max?: number;
     /**
      * Specify the badge size
+     * @param large - is deprecated, use "medium" or "compact" instead
      */
     size?: 'large' | 'medium' | 'compact';
     /**
      * Specify the badge type
+     * @param dot - is deprecated, use "UpdateBadge" component instead
      */
     type?: 'counter' | 'alert' | 'dot';
 }

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/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';