@livechat/design-system-react-components 2.2.1 → 2.2.2

package/dist/index.js

@@ -5437,7 +5437,7 @@ const ys = (e) => {
   available: 1,
   unavailable: 2,
   unknown: 3
-}, fl = (e) => [...e].sort((t, r) => ko[t.status] - ko[r.status]), bl = (e) => e === 0 ? "No one assist your customers" : e === 1 ? "1 agent accepting chats" : `${e} agents accepting chats`, tt = {
+}, fl = (e) => [...e].sort((t, r) => ko[t.status] - ko[r.status]), bl = (e) => e === 0 ? "No one assist your customers" : `${e} accepting chats`, tt = {
   "invite-agents": "lc-InviteAgents-module__invite-agents___XHov-",
   "invite-agents--empty": "lc-InviteAgents-module__invite-agents--empty___-uyZv",
   "invite-agents--only-unavailable": "lc-InviteAgents-module__invite-agents--only-unavailable___rwGmo",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livechat/design-system-react-components",
-  "version": "2.2.1",
+  "version": "2.2.2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -86,5 +86,5 @@
     "react-transition-group": "^4.4.2",
     "react-virtuoso": "^4.7.11"
   },
-  "gitHead": "3f3cbe61825cd5f17fbab11ee41c02b3f8e2d5c6"
+  "gitHead": "bfecec01fb0fa7723e479127849d39a0062fc5d1"
 }

package/dist/components/Accordion/Accordion.d.ts

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

package/dist/components/Accordion/components/AccordionAnimatedLabel.d.ts

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

package/dist/components/Accordion/components/AccordionMultilineElement.d.ts

@@ -1,6 +0,0 @@
-import * as React from 'react';
-export interface IAccordionMultilineElementProps {
-    children: React.ReactNode;
-    isExpanded: boolean;
-}
-export declare const AccordionMultilineElement: React.FC<IAccordionMultilineElementProps>;

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

@@ -1,10 +0,0 @@
-import { AccordionLabel } from './types';
-import * as React from 'react';
-export declare const isLabelObject: (label: React.ReactNode | {
-    open: React.ReactNode;
-    closed: React.ReactNode;
-}) => label is {
-    open: React.ReactNode;
-    closed: React.ReactNode;
-};
-export declare const getLabel: (label: AccordionLabel, currentlyOpen: boolean) => React.ReactNode;

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

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

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

@@ -1,4 +0,0 @@
-import { IPickerListItem } from '../Picker';
-
-export declare const RULE_PICKER_OPTIONS: IPickerListItem[];
-export declare const TAGS_PICKER_OPTIONS: IPickerListItem[];

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

@@ -1,45 +0,0 @@
-import { ComponentCoreProps } from '../../utils/types';
-import * as React from 'react';
-export type AccordionLabel = React.ReactNode | {
-    open: React.ReactNode;
-    closed: React.ReactNode;
-};
-export interface IAccordionProps extends ComponentCoreProps {
-    /**
-     * Specify the content of the accordion
-     */
-    children: React.ReactNode;
-    /**
-     * Specify the label of the accordion, single element or different for open and closed state
-     */
-    label: AccordionLabel;
-    /**
-     * Specify the multiline element, which will be displayed under the label
-     */
-    multilineElement?: React.ReactNode;
-    /**
-     * Specify the kind of the accordion
-     */
-    kind?: 'default' | 'warning' | 'error';
-    /**
-     * Specify if the accordion should be open on init
-     */
-    openOnInit?: boolean;
-    /**
-     * Set to control accordion state
-     */
-    isOpen?: boolean;
-    /**
-     * Optional handler called on accordion close
-     */
-    onClose?: () => void;
-    /**
-     * Optional handler called on accordion open
-     */
-    onOpen?: () => void;
-}
-export interface IAccordionAnimatedLabelProps {
-    open: React.ReactNode;
-    closed: React.ReactNode;
-    isOpen: boolean;
-}

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

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

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

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

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

@@ -1,3 +0,0 @@
-import { IActionBarOption } from './types';
-
-export declare const getDefaultOptions: (onClickHandler: (key: string) => void) => IActionBarOption[];

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

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

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

@@ -1,45 +0,0 @@
-import * as React from 'react';
-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;
-    /**
-     * Set 'scroll' to disable menu and enable scroll
-     */
-    type?: 'menu' | 'scroll';
-    /**
-     * Set the bar buttons verticaly
-     */
-    vertical?: boolean;
-    /**
-     * Optional element that will be placed at the bottom of the menu
-     */
-    menuFooter?: React.ReactNode;
-}
-export interface IActionBarOption {
-    key: string;
-    element: React.ReactElement;
-    label: string;
-    withDivider?: boolean;
-    showTooltip?: boolean;
-    hideInMenu?: boolean;
-    onClick: () => void;
-}
-export interface IActionBarItem {
-    option: IActionBarOption;
-    isActive?: boolean;
-    vertical?: boolean;
-}

package/dist/components/ActionCard/ActionCard.d.ts

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

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

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

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

@@ -1,23 +0,0 @@
-import * as React from 'react';
-export interface ActionCardProps {
-    /**
-     * The CSS class for main container
-     */
-    className?: string;
-    /**
-     * The CSS class for the first column container
-     */
-    firstColumnClassName?: string;
-    /**
-     * The CSS class for the second column container
-     */
-    secondColumnClassName?: string;
-    /**
-     * Optional element that will be placed in the second column
-     */
-    secondColumn?: React.ReactNode;
-    /**
-     * Optional handler called on card click
-     */
-    onClick?: () => void;
-}

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

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

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

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

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

@@ -1,3 +0,0 @@
-export { ActionMenu } from './ActionMenu';
-export { ActionMenuItem } from './ActionMenuItem';
-export type { IActionMenuOption } from './types';

package/dist/components/ActionMenu/stories-constants.d.ts

@@ -1,15 +0,0 @@
-import { default as noop } from '../../utils/noop';
-
-export declare const exampleOptions: ({
-    key: string;
-    element: import("react/jsx-runtime").JSX.Element;
-    onClick: typeof noop;
-    disabled?: undefined;
-    withDivider?: undefined;
-} | {
-    key: string;
-    element: import("react/jsx-runtime").JSX.Element;
-    disabled: boolean;
-    withDivider: boolean;
-    onClick: typeof noop;
-})[];

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

@@ -1,80 +0,0 @@
-import { Placement, flip, Strategy } from '@floating-ui/react';
-import { ComponentCoreProps } from '../../utils/types';
-import * as React from 'react';
-export interface IActionMenuOption {
-    key: string;
-    element: React.ReactNode;
-    groupHeader?: boolean;
-    disabled?: boolean;
-    withDivider?: boolean;
-    onClick?: () => void;
-}
-export interface IActionMenuProps extends ComponentCoreProps {
-    /**
-     * The CSS class for trigger container
-     */
-    triggerClassName?: string;
-    /**
-     * Array of menu options
-     */
-    options: IActionMenuOption[];
-    /**
-     * Array of selected menu options keys
-     */
-    selectedOptions?: string[];
-    /**
-     * Trigger element
-     */
-    triggerRenderer: React.ReactElement;
-    /**
-     * The menu placement
-     */
-    placement?: Placement;
-    /**
-     * Will open menu on component initialization
-     */
-    openedOnInit?: boolean;
-    /**
-     * Menu will stay open after option click
-     */
-    keepOpenOnClick?: boolean;
-    /**
-     * Set the menu placement to keep it in view
-     */
-    flipOptions?: Parameters<typeof flip>[0];
-    /**
-     * Set to control the menu visibility
-     */
-    visible?: boolean;
-    /**
-     * Optional handler called on menu close
-     */
-    onClose?: () => void;
-    /**
-     * Optional handler called on menu open
-     */
-    onOpen?: () => void;
-    /**
-     * Set the type of CSS position property to use
-     * https://floating-ui.com/docs/usefloating#strategy
-     */
-    floatingStrategy?: Strategy;
-    /**
-     * Optional footer element
-     */
-    footer?: React.ReactNode;
-}
-export interface ActionMenuItemProps {
-    /**
-     * Renders given element on the left of element
-     */
-    leftNode?: React.ReactNode;
-    /**
-     * Renders given element on the right of element
-     */
-    rightNode?: React.ReactNode;
-    /**
-     * Specify the kind of menu item
-     */
-    kind?: 'warning' | undefined;
-}

package/dist/components/Alert/Alert.d.ts

@@ -1,29 +0,0 @@
-import { ComponentCoreProps } from '../../utils/types';
-import * as React from 'react';
-type AlertKind = 'info' | 'warning' | 'success' | 'error';
-export interface AlertProps extends ComponentCoreProps {
-    /**
-     * Specify the kind of Alert
-     */
-    kind?: AlertKind;
-    /**
-     * Shows the primary CTA button
-     */
-    primaryButton?: {
-        handleClick: () => void;
-        label: string;
-    };
-    /**
-     * Shows the secondary CTA button
-     */
-    secondaryButton?: {
-        handleClick: () => void;
-        label: string;
-    };
-    /**
-     * The optional event handler for close button
-     */
-    onClose?: () => void;
-}
-export declare const Alert: React.FC<React.PropsWithChildren<AlertProps>>;
-export {};

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

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

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

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

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

@@ -1,21 +0,0 @@
-import { ComponentCoreProps } from '../../../../utils/types';
-import * as React from 'react';
-export interface IExpirationCounterProps extends ComponentCoreProps {
-    /**
-     * The ID of the item
-     */
-    id: string;
-    /**
-     * The number of days left
-     */
-    daysLeft: number;
-    /**
-     * The URL to navigate to
-     */
-    url?: string;
-    /**
-     * The function to call on click
-     */
-    onClick: (e: React.MouseEvent<HTMLAnchorElement>, id: string) => void;
-}
-export declare const ExpirationCounter: React.FC<IExpirationCounterProps>;

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

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

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

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

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

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

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

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

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

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

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

@@ -1,16 +0,0 @@
-import { ComponentCoreProps } from '../../../../utils/types';
-import * as React from 'react';
-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

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

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

@@ -1,40 +0,0 @@
-import { ComponentCoreProps } from '../../../../utils/types';
-import * as React from 'react';
-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;
-    /**
-     * 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 navigation item is disabled
-     */
-    disabled?: 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/NavigationTopBar/NavigationTopBar.d.ts

@@ -1,45 +0,0 @@
-import { INavigationTopBarProps, ITopBarAlertProps, ITopBarTitleProps } from './types';
-import * as React from 'react';
-/**
- * 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, className, 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

@@ -1,15 +0,0 @@
-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

@@ -1,59 +0,0 @@
-import { ButtonProps } from 'components/Button';
-import { ComponentCoreProps } from 'utils/types';
-import * as React from 'react';
-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;
-}
-type CTAProps = {
-    label: string;
-    onClick: () => void;
-} & Omit<ButtonProps, 'onClick' | 'children'>;
-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.
-     * Allows ButtonProps, but `children` is recommended for more complex use-cases.
-     * */
-    primaryCta?: CTAProps;
-    /**
-     * Secondary CTA button. The button will be rendered if defined.
-     * Allows ButtonProps, but `children` is recommended for more complex use-cases.
-     * */
-    secondaryCta?: CTAProps;
-    /**
-     * Show or hide the alert, defaults to `true`. Changes to this prop are animated - the alert will enter and leave smoothly.
-     * */
-    isVisible?: boolean;
-}
-export {};

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

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

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

@@ -1,28 +0,0 @@
-import { ComponentCoreProps } from '../../../../utils/types';
-import * as React from 'react';
-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

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