@livechat/design-system-react-components 1.0.0-beta.3 → 1.0.0-beta.5

package/dist/components/ActionBar/ActionBar.d.ts

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { IActionBarOption } from './ActionBarItem';
+export interface IActionBarProps {
+    /**
+     * The CSS class for menu container
+     */
+    className?: string;
+    /**
+     * The unique id key
+     */
+    id?: string;
+    /**
+     * Array of action bar options
+     */
+    options: IActionBarOption[];
+    /**
+     * Set the key for active element
+     */
+    activeOptionKey?: string | null;
+    /**
+     * Set 'scroll' to disable menu and enable scroll
+     */
+    type?: 'menu' | 'scroll';
+}
+export declare const ActionBar: React.FC<IActionBarProps>;

package/dist/components/ActionBar/ActionBar.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/ActionBar/ActionBar.stories.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+    component: React.FC<import("./ActionBar").IActionBarProps>;
+    parameters: {
+        layout: string;
+    };
+};
+export default _default;
+export declare const Default: () => React.ReactElement;

package/dist/components/ActionBar/ActionBarItem.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+export type IActionBarOption = {
+    key: string;
+    element: React.ReactElement;
+    label?: string;
+    onClick: () => void;
+};
+interface ActionBarItem {
+    option: IActionBarOption;
+    menuItemsKeys: string[];
+    activeOptionKey?: string | null;
+}
+export declare const ActionBarItem: React.FC<ActionBarItem>;
+export {};

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

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

package/dist/components/ActionMenu/ActionMenu.d.ts

@@ -5,6 +5,10 @@ export interface ActionMenuProps {
      * The CSS class for menu container
      */
     className?: string;
+    /**
+     * The CSS class for wrapper container
+     */
+    wrapperClassName?: string;
     /**
      * Array of menu options
      */
@@ -18,7 +22,7 @@ export interface ActionMenuProps {
     /**
      * Trigger element
      */
-    triggerRenderer: React.ReactNode;
+    triggerRenderer: React.ReactElement;
     /**
      * The menu placement
      */
@@ -31,5 +35,9 @@ export interface ActionMenuProps {
      * Menu will stay open after option click
      */
     keepOpenOnClick?: boolean;
+    /**
+     * Set the keys array for active elements
+     */
+    activeOptionKeys?: string[];
 }
 export declare const ActionMenu: React.FC<ActionMenuProps>;

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

@@ -1,2 +1,3 @@
+export declare function getBackgroundColor(initials: string): string | undefined;
 export declare function getInitials(name?: string, count?: number): string;
 export declare function getFontColor(color: string): string;

package/dist/components/Avatar/Avatar.helpers.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from 'utils';
-export type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'text' | 'plain' | 'plain-light' | 'subtle' | 'float' | 'dotted';
+export type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'destructive-outline' | 'text' | 'link' | 'link-light' | 'plain' | 'float' | 'dotted' | 'high-contrast';
 export type ButtonProps = {
     /**
      * Specify the button kind
@@ -59,5 +59,5 @@ export declare const Button: React.ForwardRefExoticComponent<{
     /**
      * Specify the place to render element given in `icon` prop
      */
-    iconPosition?: "right" | "left" | undefined;
+    iconPosition?: "left" | "right" | undefined;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;

package/dist/components/Button/Button.stories.d.ts

@@ -7,7 +7,7 @@ declare const _default: import("@storybook/types").ComponentAnnotations<import("
     fullWidth?: boolean | undefined;
     loaderLabel?: string | undefined;
     icon?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    iconPosition?: "right" | "left" | undefined;
+    iconPosition?: "left" | "right" | undefined;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;
 export default _default;
 export declare const Default: {

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

@@ -12,5 +12,9 @@ export interface ModalBaseProps extends React.HTMLAttributes<HTMLDivElement> {
      * Triggers the onClose event on overlay click
      */
     closeOnOverlayPress?: boolean;
+    /**
+     * Removes the spacing inside the main container
+     */
+    fullSpaceContent?: boolean;
 }
 export declare const ModalBase: React.FC<React.PropsWithChildren<ModalBaseProps>>;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
-export interface ModalCloseButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+import { ButtonProps } from '../Button';
+export interface ModalCloseButtonProps extends ButtonProps {
     labelType?: boolean;
     customColor?: string;
 }

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

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { Size } from 'utils';
 import { IconSize } from '../Icon';
-import { PickerType } from './constants';
-import { IPickerListItem } from './PickerList';
+import { IPickerListItem, PickerType } from './types';
 export interface IPickerProps {
     /**
      * Specify the custom id

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

@@ -7,4 +7,5 @@ export default _default;
 export declare const Default: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, IPickerProps>;
 export declare const States: () => React.ReactElement;
 export declare const PickerWithGroupedOptions: () => React.ReactElement;
+export declare const PickerWithMoreOptions: () => React.ReactElement;
 export declare const PickerWithOptionsAsCustomElements: () => React.ReactElement;

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

@@ -1,14 +1,5 @@
 import * as React from 'react';
-export interface IPickerListItem {
-    key: string;
-    name: string;
-    customElement?: {
-        listItemBody: React.ReactElement;
-        selectedItemBody: React.ReactElement;
-    };
-    groupHeader?: boolean;
-    disabled?: boolean;
-}
+import { IPickerListItem } from './types';
 export interface IPickerListProps {
     isOpen: boolean;
     items: IPickerListItem[];

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IPickerListItem } from './types';
+interface IProps {
+    item: IPickerListItem;
+    isItemSelected: boolean;
+    currentItemKey: string | null;
+    isAdjacentStyleApplied: 'top' | 'middle' | 'bottom';
+    onSelect: (item: IPickerListItem) => void;
+}
+export declare const PickerListItem: React.FC<IProps>;
+export {};

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
+import { Size } from 'utils';
 import { IconSize } from '../Icon';
-import { PickerType } from './constants';
-import { IPickerListItem } from './PickerList';
+import { PickerType, IPickerListItem } from './types';
 export interface ITriggerBodyProps {
     isOpen: boolean;
     isSearchDisabled?: boolean;
@@ -11,6 +11,7 @@ export interface ITriggerBodyProps {
     type: PickerType;
     iconSize?: IconSize;
     clearSearchAfterSelection?: boolean;
+    size?: Size;
     onItemRemove: (item: IPickerListItem) => void;
     onFilter: (text: string) => void;
 }

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

@@ -1,8 +1,8 @@
-export declare const defaultPickerOptions: {
+export declare const DEFAULT_PICKER_OPTIONS: {
     key: string;
     name: string;
 }[];
-export declare const defaultExtendedOptions: ({
+export declare const DEFAULT_EXTENDED_OPTIONS: ({
     key: string;
     name: string;
     groupHeader: boolean;
@@ -18,5 +18,33 @@ export declare const defaultExtendedOptions: ({
     disabled: boolean;
     groupHeader?: undefined;
 })[];
+export declare const DEFAULT_MORE_PICKER_OPTIONS: ({
+    key: string;
+    name: string;
+    secondaryText: string;
+    showCheckbox?: undefined;
+    icon?: undefined;
+    avatarSrc?: undefined;
+} | {
+    key: string;
+    name: string;
+    showCheckbox: boolean;
+    secondaryText?: undefined;
+    icon?: undefined;
+    avatarSrc?: undefined;
+} | {
+    key: string;
+    name: string;
+    icon: any;
+    secondaryText?: undefined;
+    showCheckbox?: undefined;
+    avatarSrc?: undefined;
+} | {
+    key: string;
+    name: string;
+    avatarSrc: string;
+    secondaryText?: undefined;
+    showCheckbox?: undefined;
+    icon?: undefined;
+})[];
 export declare const SELECT_ALL_OPTION_KEY = "select-all";
-export type PickerType = 'single' | 'multi';

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

@@ -0,0 +1,2 @@
+import { IPickerListItem } from './types';
+export declare function getAdjacentItemPositions(items: IPickerListItem[], selectedKeys: string[] | null): Record<string, 'top' | 'middle' | 'bottom'>;

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

@@ -1,3 +1,3 @@
 export * from './Picker';
 export * from './PickerList';
-export type { PickerType } from './constants';
+export type { PickerType } from './types';

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { IconSource } from 'components/Icon';
+export interface IPickerListItem {
+    key: string;
+    name: string;
+    customElement?: {
+        listItemBody: React.ReactElement;
+        selectedItemBody: React.ReactElement;
+    };
+    groupHeader?: boolean;
+    disabled?: boolean;
+    icon?: IconSource;
+    avatarSrc?: string;
+    secondaryText?: string;
+    showCheckbox?: boolean;
+}
+export type PickerType = 'single' | 'multi';

package/dist/components/Popover/Popover.d.ts

@@ -6,6 +6,10 @@ export interface IPopoverProps {
      * The CSS class for popover container
      */
     className?: string;
+    /**
+     * The CSS class for trigger container
+     */
+    triggerClassName?: string;
     /**
      * The popover placement related to the trigger element
      */

package/dist/components/PromoBanner/PromoBanner.d.ts

@@ -37,4 +37,7 @@ export interface PromoBannerProps {
      */
     onLinkClick?: () => void;
 }
+/**
+ * @deprecated Since version 1.0.0. Will be deleted in future versions. Use {@link PromoBannerV2} instead.
+ */
 export declare const PromoBanner: React.FC<React.PropsWithChildren<PromoBannerProps>>;

package/dist/components/PromoBannerV2/PromoBannerV2.d.ts

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { ButtonKind } from '../Button';
+export interface IPromoBannerV2Props {
+    /**
+     * Specify an optional className to be applied to the main container node
+     */
+    className?: string;
+    /**
+     * Element with additional content for second column
+     */
+    additionalContent?: React.ReactNode;
+    /**
+     * Shows the primary CTA button
+     */
+    primaryButton?: {
+        handleClick: () => void;
+        label: string;
+        kind?: ButtonKind;
+    };
+    /**
+     * Shows the secondary CTA button
+     */
+    secondaryButton?: {
+        handleClick: () => void;
+        label: string;
+        kind?: ButtonKind;
+    };
+    /**
+     * Event handler for close button press
+     */
+    onClose?: () => void;
+}
+export declare const PromoBannerV2: React.FC<React.PropsWithChildren<IPromoBannerV2Props>>;

package/dist/components/PromoBannerV2/PromoBannerV2.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/PromoBannerV2/PromoBannerV2.stories.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+    component: React.FC<React.PropsWithChildren<import("./PromoBannerV2").IPromoBannerV2Props>>;
+    argTypes: {
+        primaryButton: {
+            control: boolean;
+        };
+        secondaryButton: {
+            control: boolean;
+        };
+        additionalContent: {
+            control: boolean;
+        };
+        onClose: {
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Default: () => React.ReactElement;
+export declare const WithStyledAdditionalContent: () => React.ReactElement;
+export declare const WithStyledMainContent: () => React.ReactElement;

package/dist/components/PromoBannerV2/constants.d.ts

@@ -0,0 +1 @@
+export declare const SMALL_CONTAINER_WIDTH_TRESHOLD = 559;

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

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

package/dist/components/Tag/Tag.d.ts

@@ -8,7 +8,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Specify the tag size
      */
-    size?: 'medium' | 'large';
+    size?: 'small' | 'medium' | 'large';
     /**
      * Specify the tag icon size if used
      */
@@ -30,9 +30,14 @@ export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     onRemove?(): void;
     /**
-     * Pass the icon to show it
+     * Pass the icon to show it on the left
      */
-    icon?: IconSource;
+    leftIcon?: IconSource;
+    /**
+     * Pass the icon to show it on the right
+     */
+    rightIcon?: IconSource;
+    /**
     /**
      * Pass the image source to show it as avatar
      */

package/dist/components/Tag/Tag.stories.d.ts

@@ -12,13 +12,14 @@ export declare const Kinds: {
     ({ children, ...args }: TagProps): React.ReactElement;
     args: {
         children: string;
-        icon: any;
+        leftIcon: any;
     };
 };
 export declare const Sizes: {
     ({ children, ...args }: TagProps): React.ReactElement;
     args: {
         children: string;
-        icon: any;
+        leftIcon: any;
+        rightIcon: any;
     };
 };

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

@@ -11,7 +11,7 @@ export declare const ToastWrapper: {
         toasts: ({
             id: string;
             kind: string;
-            content: React.JSX.Element;
+            content: string;
             removable?: undefined;
             action?: undefined;
         } | {
@@ -29,12 +29,6 @@ export declare const ToastWrapper: {
                 handler: () => void;
             };
             removable?: undefined;
-        } | {
-            id: string;
-            kind: string;
-            content: string;
-            removable?: undefined;
-            action?: undefined;
         })[];
     };
 };

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
+import { TooltipTheme } from '../types';
 export declare const Info: React.FC<{
     header?: string;
     text: string;
     closeWithX?: boolean;
-    theme?: string;
+    theme?: TooltipTheme;
     handleCloseAction?: (ev: React.MouseEvent) => void;
 }>;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { ButtonKind } from '../../Button';
+import { TooltipButton, TooltipTheme } from '../types';
 export declare const Interactive: React.FC<{
     header?: string;
     text: string;
@@ -8,16 +8,8 @@ export declare const Interactive: React.FC<{
         alt: string;
     };
     closeWithX?: boolean;
-    theme?: 'invert' | 'important';
+    theme?: TooltipTheme;
     handleCloseAction?: (ev: React.MouseEvent) => void;
-    primaryButton: {
-        handleClick: () => void;
-        label: string;
-        kind?: ButtonKind;
-    };
-    secondaryButton: {
-        handleClick: () => void;
-        label: string;
-        kind?: ButtonKind;
-    };
+    primaryButton: TooltipButton;
+    secondaryButton: TooltipButton;
 }>;

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

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

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

@@ -1,3 +1,4 @@
 import { IconKind } from '../Icon';
-export declare function getIconType(theme: string): IconKind;
+import { TooltipTheme } from './types';
+export declare function getIconType(theme: TooltipTheme): IconKind;
 export declare const sleep: (milliseconds: number) => Promise<void>;

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

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

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

@@ -1,9 +1,16 @@
 import * as React from 'react';
 import { Placement, VirtualElement } from '@floating-ui/react-dom';
+import { ButtonKind } from '../Button';
+export type TooltipTheme = 'invert' | 'important' | undefined;
+export type TooltipButton = {
+    handleClick: () => void;
+    label: string;
+    kind?: ButtonKind;
+};
 export interface ITooltipProps {
     children?: React.ReactNode;
     className?: string;
-    theme?: 'invert' | 'important' | undefined;
+    theme?: TooltipTheme;
     placement?: Placement;
     isVisible?: boolean;
     withFadeAnimation?: boolean;

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

@@ -0,0 +1,10 @@
+import * as React from 'react';
+interface IProps {
+    size?: 'md' | 'sm';
+    /** DOM element name that will be rendered */
+    as?: string;
+    /** Optional custom className */
+    className?: string;
+}
+export declare const Display: React.FC<React.PropsWithChildren<IProps>>;
+export {};

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

@@ -1,2 +1,3 @@
 export { Heading } from './Heading';
 export { Text } from './Text';
+export { Display } from './Display';