@livechat/design-system-react-components 2.31.1 → 2.33.0

package/README.md

@@ -16,7 +16,6 @@
 
 This package contains a library of reusable React components designed to be used in various projects. These components are the building blocks of our design system and can be easily integrated into your applications.
 
-
 ## Installation
 
 Run the following command using [npm](https://www.npmjs.com/) (or with you other favorite package manager, eg. [yarn](https://yarnpkg.com/)):
@@ -30,7 +29,7 @@ npm install @livechat/design-system-react-components @livechat/design-system-ico
 It is required to import the `CSS` directly into your project so it could be applied to components:
 
 ```js
-import '@livechat/design-system-react-components/dist/style.css';
+import '@livechat/design-system-react-components/dist/design-system-react-components.css';
 ```
 
 You can import components directly from the npm package:
@@ -55,7 +54,6 @@ At this stage of the project we consider Storybook and Figma as parts of our doc
 [Storybook](https://design.livechat.com/) - includes design system foundations, describes components API and allows to familiarize with the thier capabilities
 [Figma](https://www.figma.com/file/2pFu80PXO5A2tfyrAGnx91/Product-Components) - it's not an official documentation from design perspective but we follow a simple rule of working in public
 
-
 ### Development
 
 Required version of `node.js` is `20.14.0`.
@@ -78,4 +76,4 @@ If `Storybook` is not enough, you can additionaly run `npm start:example` which
 
 ### Contributing
 
-For the `contribution/testing/releasing` guides please refer to the [main repository](https://github.com/livechat/design-system/) documentation.
+For the `contribution/testing/releasing` guides please refer to the [main repository](https://github.com/livechat/design-system/) documentation.

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

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

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

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

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

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

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

@@ -1,5 +1,4 @@
 import { default as noop } from '../../utils/noop';
-
 export declare const exampleOptions: ({
     key: string;
     element: import("react/jsx-runtime").JSX.Element;

package/dist/components/AnimatedTextContainer/AnimatedTextContainer.d.ts

@@ -1,4 +1,3 @@
 import { FC } from 'react';
 import { IAnimatedTextContainerProps } from './types';
-
 export declare const AnimatedTextContainer: FC<IAnimatedTextContainerProps>;

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

@@ -1,6 +1,5 @@
 import { IPickerListItem } from '../Picker';
 import { AutoCompleteProps, IAutoCompleteListItem } from './types';
-
 export declare const areAllOptionsStrings: (options: AutoCompleteProps["options"]) => options is string[];
 export declare const buildOptionsFromStrings: (options: string[]) => IPickerListItem[];
 export declare const buildOptionsFromAutoCompleteListItems: (options: IAutoCompleteListItem[]) => IPickerListItem[];

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

@@ -1,5 +1,4 @@
 import { AutoComplete } from './AutoComplete';
 import { AutoCompleteProps } from './types';
-
 export { AutoComplete };
 export type { AutoCompleteProps };

package/dist/components/DatePicker/RangeDatePicker.d.ts

@@ -1,6 +1,5 @@
 import { ReactElement } from 'react';
 import { IRangeDatePickerProps } from './types';
-
 export declare const RangeDatePicker: {
     ({ options, initialSelectedItemKey, initialFromDate, initialToDate, customTempFromDate, customTempToDate, toMonth, today, onChange, onRangeSelect, onSelect, onCustomTempDateRangeChange, children, }: IRangeDatePickerProps): ReactElement;
     defaultProps: {

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

@@ -1,5 +1,4 @@
 import { IRangeDatePickerProps, IRangeDatePickerState, IRangeDatePickerOption } from './types';
-
 export declare const isDateWithinRange: (date: Date, range: {
     from?: Date;
     to?: Date;

package/dist/components/DatePicker/hooks.d.ts

@@ -1,4 +1,3 @@
 import { Dispatch, ReducerAction, ReducerState } from 'react';
 import { IRangeDatePickerProps, RangeDatePickerReducer } from './types';
-
 export declare const useRangeDatePickerState: (props: IRangeDatePickerProps) => [ReducerState<RangeDatePickerReducer>, Dispatch<ReducerAction<RangeDatePickerReducer>>];

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

@@ -1,6 +1,5 @@
 import { Reducer, ReactElement } from 'react';
 import { DayPickerProps, DateRange } from 'react-day-picker';
-
 export type IDatePickerProps = DayPickerProps;
 export interface IDatePickerCustomNavigationProps {
     currentMonth: Date;

package/dist/components/EmptyState/EmptyState.d.ts

@@ -1,3 +1,2 @@
 import { IEmptyStateProps } from './types';
-
 export declare const EmptyState: ({ type, image, icon, title, description, actions, centered, }: IEmptyStateProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-
 export type IEmptyStateProps = ({
     /**
      * Specify the empty state type

package/dist/components/FloatingPortal/FloatingPortal.d.ts

@@ -1,3 +1,2 @@
 import { FloatingPortalProps } from '@floating-ui/react';
-
 export declare const FloatingPortal: ({ children, id, root, preserveTabOrder, }: FloatingPortalProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,3 +1,2 @@
 import { FloatingPortal } from './FloatingPortal';
-
 export { FloatingPortal };

package/dist/components/Icon/IconsShowcase/constans.d.ts

@@ -1,3 +1,2 @@
 import { IconGroup, IconName } from './types';
-
 export declare const IconsData: Record<IconName, IconGroup>;

package/dist/components/Icon/IconsShowcase/helpers.d.ts

@@ -1,3 +1,2 @@
 import { IconGroup, IconName } from './types';
-
 export declare const getIconsByGroup: (group: IconGroup) => IconName[];

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

@@ -1,3 +1,2 @@
 import { FC, SVGProps } from 'react';
-
 export type IconSource = FC<SVGProps<SVGSVGElement>>;

package/dist/components/InviteAgents/InviteAgents.d.ts

@@ -1,3 +1,2 @@
 import { InviteAgentsProps } from './types';
-
 export declare const InviteAgents: import('react').NamedExoticComponent<InviteAgentsProps>;

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

@@ -1,3 +1,2 @@
 import { Agent } from './types';
-
 export declare const getSortedAgents: (agents: Agent[]) => Agent[];

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

@@ -1,5 +1,4 @@
 import { ComponentCoreProps } from '../../utils/types';
-
 export interface Agent {
     name: string;
     email: string;

package/dist/components/ListItem/ListItem.d.ts

@@ -1,6 +1,5 @@
 import { FC, PropsWithChildren } from 'react';
 import { ListItemProps } from './types';
-
 export declare const ListItem: FC<PropsWithChildren<ListItemProps>>;
 /**
  * @deprecated Use `ListItem` instead. This will be removed in a future release.

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

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-
 export interface ListItemProps {
     /**
      * Renders given element on the left of element

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

@@ -1,5 +1,4 @@
 import { FC, PropsWithChildren, ReactNode, HTMLAttributes } from 'react';
-
 export interface ModalPortalProps extends HTMLAttributes<HTMLDivElement> {
     children: ReactNode;
     zIndex: number;

package/dist/components/OverflowTooltipText/OverflowTooltipText.d.ts

@@ -1,4 +1,3 @@
 import { FC } from 'react';
 import { OverflowTooltipTextProps } from './types';
-
 export declare const OverflowTooltipText: FC<OverflowTooltipTextProps>;

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

@@ -1,5 +1,4 @@
 import { IPickerListItem } from './types';
-
 export declare const ITEM_GAP_HEIGHT = 2;
 export declare const MIN_LIST_HEIGHT = 200;
 export declare const DEFAULT_LIST_HEIGHT = 400;

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

@@ -1,5 +1,4 @@
 import { IPickerListItem } from './types';
-
 export declare const findIndicesWhere: <T>(array: T[], predicate: (item: T) => boolean) => number[];
 export declare const getNormalizedItems: (items: IPickerListItem[]) => IPickerListItem[];
 export declare const getPickerListItemKey: ({ key }: IPickerListItem) => string;

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

@@ -6,7 +6,6 @@ import { ComponentCoreProps } from '../../utils/types';
 import { AvatarType } from '../Avatar/types';
 import { IconSource } from '../Icon';
 import { TagProps } from '../Tag';
-
 export interface IPickerListItem {
     key: string;
     name: string;

package/dist/components/ProductSwitcher/ProductSwitcher.d.ts

@@ -1,4 +1,3 @@
 import { FC } from 'react';
 import { ProductSwitcherProps } from './types';
-
 export declare const ProductSwitcher: FC<ProductSwitcherProps>;

package/dist/components/ProductSwitcher/components/ProductRow/ProductRow.d.ts

@@ -1,6 +1,5 @@
 import { FC, MouseEvent } from 'react';
 import { ProductOption, ProductId } from '../../types';
-
 type IProps = {
     onClick: (event: MouseEvent, id: ProductId) => void;
     product: ProductOption;

package/dist/components/ProductSwitcher/components/ProductTile/ProductTile.d.ts

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { ProductOption } from '../../types';
-
 type IProps = Pick<ProductOption, 'icon' | 'notificationCount' | 'backgroundColors' | 'expired' | 'iconColor' | 'borderColor'> & {
     isMainProduct?: boolean;
     withBorder?: boolean;

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

@@ -1,5 +1,4 @@
 import { ProductOption, ProductData, ProductId } from './types';
-
 export declare const ProductSwitcherProducts: ProductOption[];
 export declare const labsRedirectData: ProductData[];
 export declare const stagingRedirectData: ProductData[];

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

@@ -1,5 +1,4 @@
 import { ProductName, ProductData, ProductId, ProductOption, ProductSubscription, Env } from './types';
-
 export declare const getRedirectURL: (productClientId: string, productRedirectUri: string, organizationId: string, mainProductId: ProductId, env: Env) => string;
 export declare const getTrialDaysLeft: (trialEnd: string) => number;
 export declare const isVisibleProduct: (productId: ProductId, installedProducts: {

package/dist/components/ProductSwitcher/hooks/useProductSwitcher.d.ts

@@ -1,5 +1,4 @@
 import { Env, ProductId, ProductName, ProductOption, ProductSubscription } from '../types';
-
 export interface IProductSwitcherHook {
     env?: Env;
     installedProducts: {

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

@@ -1,6 +1,5 @@
 import { ReactNode } from 'react';
 import { IconSource } from '../Icon';
-
 export type ProductId = 'livechat' | 'helpdesk' | 'chatbot' | 'openwidget' | 'knowledgebase' | 'teamchat' | 'accounts';
 export type ProductName = 'LiveChat' | 'HelpDesk' | 'ChatBot' | 'OpenWidget' | 'KnowledgeBase' | 'TeamChat' | 'Accounts';
 export type Env = 'labs' | 'staging' | 'prod';

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

@@ -1,3 +1,2 @@
 import { ProgressStatus } from './constants';
-
 export declare function getPercentNumber(status: ProgressStatus, percent?: number): number;

package/dist/components/RangeDatePickerV2/RangeDatePickerV2.d.ts

@@ -1,4 +1,3 @@
 import { FC } from 'react';
 import { IRangeDatePickerV2Props } from './types';
-
 export declare const RangeDatePickerV2: FC<IRangeDatePickerV2Props>;

package/dist/components/RangeDatePickerV2/components/RangeDatePickerV2Label.d.ts

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { DateRange } from 'react-day-picker';
-
 interface IRangeDatePickerV2LabelProps {
     tempDate?: DateRange;
     date?: DateRange;

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

@@ -1,6 +1,5 @@
 import { DateRange } from 'react-day-picker';
 import { RANGE_DATE_PICKER_OPTION_ID } from './types';
-
 type RangeDatePickerSelectOptions = {
     id: RANGE_DATE_PICKER_OPTION_ID;
     label: string;

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

@@ -1,6 +1,5 @@
 import { DateRange } from 'react-day-picker';
 import { IRangeDatePickerCoreProps } from '../DatePicker/types';
-
 export type RANGE_DATE_PICKER_OPTION_ID = 'today' | 'yesterday' | 'last7days' | 'last30days' | 'lastMonth' | 'currentMonth';
 export interface IRangeDatePickerV2Props extends Omit<IRangeDatePickerCoreProps, 'children'> {
     triggerClassName?: string;

package/dist/components/SelectableCard/SelectableCard.d.ts

@@ -1,4 +1,3 @@
 import { FC } from 'react';
 import { ISelectableCardProps } from './types';
-
 export declare const SelectableCard: FC<ISelectableCardProps>;

package/dist/components/SelectableCard/components/GallerySelectableCard/GallerySelectableCard.d.ts

@@ -1,4 +1,3 @@
 import { FC } from 'react';
 import { IGallerySelectableCardProps } from './types';
-
 export declare const GallerySelectableCard: FC<IGallerySelectableCardProps>;

package/dist/components/SelectableCard/components/InteractiveSelectableCard/InteractiveGrid/InteractiveGrid.d.ts

@@ -1,6 +1,5 @@
 import { FC } from 'react';
 import { ComponentCoreProps } from '../../../../../utils/types';
-
 interface IGridComponentProps extends ComponentCoreProps {
 }
 export declare const GridWrapper: FC<IGridComponentProps>;

package/dist/components/SelectableCard/components/InteractiveSelectableCard/InteractiveSelectableCard.d.ts

@@ -1,4 +1,3 @@
 import { FC } from 'react';
 import { IInteractiveSelectableCardProps } from './types';
-
 export declare const InteractiveSelectableCard: FC<IInteractiveSelectableCardProps>;

package/dist/components/SelectableCard/components/InteractiveSelectableCard/types.d.ts

@@ -1,4 +1,3 @@
 import { ISelectableCardCoreProps } from '../../types';
-
 export interface IInteractiveSelectableCardProps extends ISelectableCardCoreProps {
 }

package/dist/components/SelectableCard/components/ThumbnailSelectableCard/ThumbnailSelectableCard.d.ts

@@ -1,4 +1,3 @@
 import { FC } from 'react';
 import { IThumbnailSelectableCardProps } from './types';
-
 export declare const ThumbnailSelectableCard: FC<IThumbnailSelectableCardProps>;

package/dist/components/SystemMessage/components/SystemMessageTimestamp.d.ts

@@ -1,5 +1,4 @@
 import { FC } from 'react';
-
 interface ISystemMessageTimestampProps {
     timestamp: string;
     timestampWithSeconds: string;

package/dist/components/Table/Table.d.ts

@@ -1,3 +1,2 @@
 import { ITableProps } from './types';
-
 export declare const Table: <T>({ data, columns, stripped, size, pin, selectable, getRowId, resizable, selectedRows, onSelectionChange, rowSelectionMessage, rowActions, testId, }: ITableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/TableBody.d.ts

@@ -1,5 +1,4 @@
 import { Column } from './types';
-
 interface TableBodyProps<T> {
     data: T[];
     columns: Column<T>[];

package/dist/components/Table/TableRow.d.ts

@@ -1,5 +1,4 @@
 import { Column } from './types';
-
 interface TableRowProps<T> {
     row: T;
     columns: Column<T>[];

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

@@ -1,4 +1,3 @@
 import { Column, DataForPinningExample } from './types';
-
 export declare const columnsForPinningExample: Column<DataForPinningExample>[];
 export declare const dataForPinningExample: DataForPinningExample[];

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

@@ -1,3 +1,2 @@
 import { Data } from './types';
-
 export declare const generateData: (length: number) => Data[];

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

@@ -1,7 +1,6 @@
 import { CSSProperties } from 'react';
 import { IconKind } from '../Icon';
 import { TooltipTheme } from './types';
-
 export declare function getIconType(theme: TooltipTheme): IconKind;
 export declare function getArrowPositionStyles(arrowOffsetY?: number, arrowOffsetX?: number, arrowY?: number, arrowX?: number): CSSProperties | undefined;
 export declare const getArrowTokens: (tooltipStyle: string | undefined) => {

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

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

package/dist/components/UserGuide/components/UserGuideBubbleStep/UserGuideBubbleStep.d.ts

@@ -1,4 +1,3 @@
 import { FC } from 'react';
 import { IUserGuideBubbleStepProps } from './types';
-
 export declare const UserGuideBubbleStep: FC<IUserGuideBubbleStepProps>;

package/dist/components/UserGuide/components/UserGuideBubbleStep/types.d.ts

@@ -1,5 +1,4 @@
 import { ReactNode } from 'react';
-
 export interface IUserGuideBubbleStepProps {
     /**
      * The message for the first bubble

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

@@ -1,4 +1,3 @@
 import { FC } from 'react';
 import { IUserGuideStepProps } from './types';
-
 export declare const UserGuideStep: FC<IUserGuideStepProps>;

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

@@ -1,5 +1,4 @@
 import { MouseEvent } from 'react';
-
 export interface IUserGuideStepProps {
     /**
      * The header of the step

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

@@ -1,5 +1,4 @@
 import { ReactElement } from 'react';
-
 export declare const AppContent: ({ onStartGuideClick, }: {
     onStartGuideClick: () => void;
 }) => ReactElement;

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

@@ -1,5 +1,4 @@
 import { Placement } from '@floating-ui/react';
-
 export type CursorTiming = 'fast1' | 'fast2' | 'moderate1' | 'moderate2';
 export interface IUserGuide {
     /**
@@ -26,6 +25,10 @@ export interface IUserGuide {
      * The visibility of the user guide
      */
     isVisible?: boolean;
+    /**
+     * Set to true to hide the overlay
+     */
+    hideOverlay?: boolean;
     /**
      * The custom z-index value for the overlay
      */

package/dist/hooks/helpers.d.ts

@@ -1,3 +1,2 @@
 import { NODE } from './types';
-
 export declare const resizeCallback: (node: NODE, handler: (newSize: DOMRectReadOnly) => void) => void;

package/dist/hooks/useHeightResizer.d.ts

@@ -1,3 +1,2 @@
 import { IUseHeightResizer } from './types';
-
 export declare const useHeightResizer: () => IUseHeightResizer;

package/dist/hooks/useInteractive.d.ts

@@ -1,3 +1,2 @@
 import { IUseInteractive, UseInteractiveProps } from './types';
-
 export declare const useInteractive: ({ onClick, }: UseInteractiveProps) => IUseInteractive;

package/dist/hooks/useIsOverflow.d.ts

@@ -1,3 +1,2 @@
 import { RefObject } from 'react';
-
 export declare const useIsOverflow: <T extends HTMLElement>(ref: RefObject<T>) => boolean;

package/dist/hooks/useMobileViewDetector.d.ts

@@ -1,3 +1,2 @@
 import { IUseMobileViewDetector, IUseMobileViewDetectorProps } from './types';
-
 export declare const useMobileViewDetector: ({ mobileBreakpoint, }: IUseMobileViewDetectorProps) => IUseMobileViewDetector;

package/dist/hooks/useOnHover.d.ts

@@ -1,3 +1,2 @@
 import { IUseOnHover } from './types';
-
 export declare const useOnHover: (initialState?: boolean) => IUseOnHover;

package/dist/hooks/useSharedResizeObserver.d.ts

@@ -1,5 +1,4 @@
 import { CALLBACK, NODE } from './types';
-
 export declare const useSharedResizeObserver: {
     observe: (node: NODE, callback: CALLBACK) => void;
     unobserve: (node: NODE) => void;