@livechat/design-system-react-components 1.0.0 → 1.2.0

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface ModalBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The event handler for close button
+     */
+    onClose(): void;
+    /**
+     * Triggers the onClose event on `esc` key press
+     */
+    closeOnEscPress?: boolean;
+    /**
+     * 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/components/ModalBase.spec.d.ts

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

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { ButtonProps } from '../../Button';
+export interface ModalCloseButtonProps extends ButtonProps {
+    labelType?: boolean;
+    customColor?: string;
+}
+export declare const ModalCloseButton: React.FC<ModalCloseButtonProps>;

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

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { AvatarProps } from '../../Avatar';
+import { IconProps } from '../../Icon';
+export interface ModalHeaderProps {
+    /**
+     * Set the header title
+     */
+    title?: React.ReactNode;
+    /**
+     * Set to display the icon
+     */
+    iconProps?: IconProps;
+    /**
+     * Set to display avatar
+     */
+    avatarProps?: AvatarProps;
+    /**
+     * Children element
+     */
+    children?: React.ReactNode;
+    /**
+     * Define class name for container
+     */
+    className?: 'string';
+}
+export declare const ModalHeader: React.FC<ModalHeaderProps>;

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export interface ModalPortalProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    zIndex: number;
+    parentElementName?: string;
+}
+export declare const ModalPortal: React.FC<ModalPortalProps>;

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

@@ -0,0 +1,10 @@
+export { Modal } from './Modal';
+export { ModalBase } from './components/ModalBase';
+export { ModalCloseButton } from './components/ModalCloseButton';
+export { ModalPortal } from './components/ModalPortal';
+export { ModalHeader } from './components/ModalHeader';
+export type { ModalProps } from './Modal';
+export type { ModalBaseProps } from './components/ModalBase';
+export type { ModalCloseButtonProps } from './components/ModalCloseButton';
+export type { ModalPortalProps } from './components/ModalPortal';
+export type { ModalHeaderProps } from './components/ModalHeader';

package/dist/components/NumericInput/NumericInput.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+export type NumericInputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+    className?: string;
+    error?: string;
+    value: string;
+    max?: number;
+    min?: number;
+    disabled?: boolean;
+    noControls?: boolean;
+    onChange: (value: string) => void;
+};
+export declare const NumericInput: React.FC<NumericInputProps>;

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

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

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { NumericInputProps } from './NumericInput';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, React.InputHTMLAttributes<HTMLInputElement> & {
+    className?: string | undefined;
+    error?: string | undefined;
+    value: string;
+    max?: number | undefined;
+    min?: number | undefined;
+    disabled?: boolean | undefined;
+    noControls?: boolean | undefined;
+    onChange: (value: string) => void;
+} & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const NumericInput: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;
+export declare const NumericInputWithMinAndMaxValues: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;
+export declare const NumericInputWithNoControls: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;
+export declare const NumericInputWithDisabled: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;
+export declare const NumericInputWithError: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, NumericInputProps>;

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

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

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

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { Size } from 'utils';
+import { IPickerListItem, PickerType } from './types';
+export interface IPickerProps {
+    /**
+     * Specify the custom id
+     */
+    id?: string;
+    /**
+     * The CSS class for picker container
+     */
+    className?: string;
+    /**
+     * Specify whether the picker should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Specify whether the picker should be in error state
+     */
+    error?: boolean;
+    /**
+     * Array of picker options
+     */
+    options: IPickerListItem[];
+    /**
+     * Array of picker selected options
+     */
+    selected?: IPickerListItem[] | null;
+    /**
+     * Specify the picker size
+     */
+    size?: Size;
+    /**
+     * Specify the placeholder for search input
+     */
+    placeholder?: string;
+    /**
+     * Specify whether the option select is required
+     */
+    isRequired?: boolean;
+    /**
+     * Text if no search result were found
+     */
+    noSearchResultText?: string;
+    /**
+     * Text for `select all` option which will be visible if defined in multi select mode
+     */
+    selectAllOptionText?: string;
+    /**
+     * Set `multi` to specify whether the picker should allow to multi selection
+     */
+    type?: PickerType;
+    /**
+     * Set to disable search input
+     */
+    searchDisabled?: boolean;
+    /**
+     * Set to hide clear selection button
+     */
+    hideClearButton?: boolean;
+    /**
+     * Will open picker on component initialization
+     */
+    openedOnInit?: boolean;
+    /**
+     * Test id passed to the picker trigger element
+     */
+    ['data-testid']?: string;
+    /**
+     * Callback called after item selection
+     */
+    onSelect: (selectedItems: IPickerListItem[] | null) => void;
+    /**
+     * Clears the search input after item select
+     */
+    clearSearchAfterSelection?: boolean;
+}
+export declare const Picker: React.FC<IPickerProps>;

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

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

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { IPickerProps } from './Picker';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IPickerProps & {
+    children?: React.ReactNode;
+}>;
+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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { IPickerListItem } from './types';
+export interface IPickerListProps {
+    isOpen: boolean;
+    items: IPickerListItem[];
+    selectedItemsKeys: string[] | null;
+    emptyStateText?: string;
+    selectAllOptionText?: string;
+    isMultiSelect?: boolean;
+    onClose: () => void;
+    onSelect: (item: IPickerListItem) => void;
+    onSelectAll: () => void;
+}
+export declare const PickerList: React.FC<IPickerListProps>;

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

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

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/Trigger.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Size } from 'utils';
+export interface ITriggerProps {
+    isSearchDisabled: boolean;
+    isDisabled?: boolean;
+    isError?: boolean;
+    isItemSelected: boolean;
+    isOpen: boolean;
+    isRequired?: boolean;
+    isMultiSelect?: boolean;
+    size?: Size;
+    hideClearButton?: boolean;
+    onTrigger: (e: React.MouseEvent | KeyboardEvent) => void;
+    onClear: () => void;
+    testId?: string;
+}
+export declare const Trigger: React.FC<React.PropsWithChildren<ITriggerProps>>;

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

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

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

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Size } from 'utils';
+import { PickerType, IPickerListItem } from './types';
+export interface ITriggerBodyProps {
+    isOpen: boolean;
+    isSearchDisabled?: boolean;
+    isDisabled?: boolean;
+    placeholder: string;
+    items?: IPickerListItem[] | null;
+    type: PickerType;
+    clearSearchAfterSelection?: boolean;
+    size?: Size;
+    onItemRemove: (item: IPickerListItem) => void;
+    onFilter: (text: string) => void;
+}
+export declare const TriggerBody: React.FC<ITriggerBodyProps>;

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

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

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

@@ -0,0 +1,50 @@
+export declare const DEFAULT_PICKER_OPTIONS: {
+    key: string;
+    name: string;
+}[];
+export declare const DEFAULT_EXTENDED_OPTIONS: ({
+    key: string;
+    name: string;
+    groupHeader: boolean;
+    disabled?: undefined;
+} | {
+    key: string;
+    name: string;
+    groupHeader?: undefined;
+    disabled?: undefined;
+} | {
+    key: string;
+    name: string;
+    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: (props: import("react").SVGProps<SVGSVGElement>) => JSX.Element;
+    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";

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

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

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

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

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { Placement, flip } from '@floating-ui/react-dom';
+export interface IPopoverProps {
+    children?: React.ReactNode;
+    /**
+     * The CSS class for popover container
+     */
+    className?: string;
+    /**
+     * The CSS class for trigger container
+     */
+    triggerClassName?: string;
+    /**
+     * The popover placement related to the trigger element
+     */
+    placement?: Placement;
+    /**
+     * Set popover visibility
+     */
+    isVisible?: boolean;
+    /**
+     * Set the popover placement to keep it in view
+     */
+    flipOptions?: Parameters<typeof flip>[0];
+    /**
+     * Set `false` if the menu is not to be closed with a esc press
+     */
+    closeOnEsc?: boolean;
+    /**
+     * Trigger element
+     */
+    triggerRenderer: () => React.ReactNode;
+    /**
+     * Optional callback called after popover close
+     */
+    onClose?: () => void;
+}
+export declare const Popover: React.FC<IPopoverProps>;

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

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

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { IPopoverProps } from './Popover';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, IPopoverProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: {
+    (args: IPopoverProps): React.ReactElement;
+    args: {
+        placement: string;
+        isVisible: boolean;
+    };
+};

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

@@ -0,0 +1 @@
+export * from './Popover';

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ProgressSize, ProgressStatus } from './constants';
+export interface ProgressBarProps {
+    /**
+     * The CSS class for container
+     */
+    className?: string;
+    /**
+     * Specify the value of current progress bar (0-100)
+     */
+    percent: number;
+    /**
+     * Specify the progress bar status
+     */
+    status?: ProgressStatus;
+    /**
+     * Specify the progress bar size
+     */
+    size?: ProgressSize;
+}
+export declare const ProgressBar: React.ExoticComponent<ProgressBarProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Progress/ProgressBar.spec.d.ts

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

package/dist/components/Progress/ProgressBar.stories.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ProgressBarProps } from './ProgressBar';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ProgressBarProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export declare const ProgressBar: {
+    (args: ProgressBarProps): React.ReactElement;
+    args: {
+        percent: number;
+        status: string;
+        size: string;
+    };
+};

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ProgressSize, ProgressStatus } from './constants';
+export interface ProgressCircleProps {
+    /**
+     * The CSS class for container
+     */
+    className?: string;
+    /**
+     * Specify the value of current progress circle (0-100)
+     */
+    progressValue: number;
+    /**
+     * Specify the progress circle status
+     */
+    status?: ProgressStatus;
+    /**
+     * Specify the progress circle size
+     */
+    size?: ProgressSize;
+}
+export declare const ProgressCircle: React.ExoticComponent<ProgressCircleProps & React.RefAttributes<HTMLInputElement>>;

package/dist/components/Progress/ProgressCircle.spec.d.ts

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

package/dist/components/Progress/ProgressCircle.stories.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { ProgressCircleProps } from './ProgressCircle';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ProgressCircleProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export declare const ProgressCircle: {
+    (args: ProgressCircleProps): React.ReactElement;
+    args: {
+        progressValue: number;
+        status: string;
+        size: string;
+    };
+};

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

@@ -0,0 +1,4 @@
+export type ProgressStatus = 'normal' | 'error' | 'success';
+export type ProgressSize = 'small' | 'medium' | 'large';
+export declare const PROGRESS_STATUSES: ProgressStatus[];
+export declare const PROGRESS_SIZES: ProgressSize[];

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

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

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

@@ -0,0 +1,2 @@
+export { ProgressCircle } from './ProgressCircle';
+export { ProgressBar } from './ProgressBar';

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+export interface PromoBannerProps {
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Set the primary button text
+     */
+    buttonText?: string;
+    /**
+     * Set the header text
+     */
+    header: string;
+    /**
+     * Set the image source to display it
+     */
+    img?: string;
+    /**
+     * Specify whether the banner should use a light-themed design
+     */
+    light?: boolean;
+    /**
+     * Set the link button text
+     */
+    linkText?: string;
+    /**
+     * Event handler for primary button press
+     */
+    onButtonClick?: () => void;
+    /**
+     * Event handler for close button press
+     */
+    onClose?: () => void;
+    /**
+     * Event handler for link button press
+     */
+    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/PromoBanner/PromoBanner.spec.d.ts

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

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { PromoBannerProps } from './PromoBanner';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const PromoBanner: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
+export declare const WithButtons: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
+export declare const WithImage: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
+export declare const WithClose: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;
+export declare const WithLight: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, PromoBannerProps>;

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

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

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