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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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 { 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

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

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

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

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

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