@livechat/design-system-react-components 1.0.0-alpha.9 → 1.0.0-alpha.icons.2

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: string;
+    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,16 @@
+import * as React from 'react';
+export interface IPickerListItem {
+    key: string;
+    name: string;
+    customElement?: {
+        listItemBody: React.ReactElement;
+        selectedItemBody: React.ReactElement;
+    };
+    groupHeader?: boolean;
+    disabled?: boolean;
+    icon?: string;
+    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/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/{src/components → components}/Progress/ProgressCircle.d.ts

@@ -1,9 +1,21 @@
 import * as React from 'react';
 import { ProgressSize, ProgressStatus } from './constants';
 export interface ProgressCircleProps {
+    /**
+     * The CSS class for container
+     */
     className?: string;
-    percent: number;
+    /**
+     * 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/{src/components → components}/Progress/index.d.ts

@@ -1 +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/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/{src/components → components}/RadioButton/RadioButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 export interface RadioButtonProps extends React.HTMLAttributes<HTMLInputElement> {
-    description?: React.ReactNode;
+    description?: string;
     checked?: boolean;
     disabled?: boolean;
 }
-export declare const RadioButton: React.FC<RadioButtonProps>;
+export declare const RadioButton: React.ForwardRefExoticComponent<RadioButtonProps & React.RefAttributes<HTMLInputElement>>;

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

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

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { RadioButtonProps } from './RadioButton';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, RadioButtonProps & React.RefAttributes<HTMLInputElement>>;
+export default _default;
+export declare const RadioButton: {
+    ({ children, ...args }: RadioButtonProps): React.ReactElement;
+    args: {
+        checked: boolean;
+        disabled: boolean;
+        description: string;
+        children: string;
+    };
+};

package/dist/components/Search/Search.d.ts

@@ -0,0 +1,36 @@
+import * as React from 'react';
+export interface ISearchInputProps {
+    /**
+     * Makes search expandable after focusing the icon
+     */
+    isCollapsable?: boolean;
+    /**
+     * Specify whether the search should be disabled
+     */
+    isDisabled?: boolean;
+    /**
+     * Specify whether the search should have loader visible
+     */
+    isLoading?: boolean;
+    /**
+     * Optional text for placeholder
+     */
+    placeholder?: string;
+    /**
+     * Specify the search size
+     */
+    size?: 'compact' | 'medium' | 'large';
+    /**
+     * Specify the search value
+     */
+    value: string;
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * The event handler for onChange
+     */
+    onChange: (value: string) => void;
+}
+export declare const SearchInput: React.FC<ISearchInputProps>;

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

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

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ISearchInputProps } from './Search';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ISearchInputProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Search: import("@storybook/types").AnnotatedStoryFn<import("@storybook/react/dist/types-0a347bb9").R, ISearchInputProps>;
+export declare const States: {
+    (args: ISearchInputProps): React.ReactElement;
+    args: {};
+};
+export declare const Sizes: {
+    (args: ISearchInputProps): React.ReactElement;
+    args: {};
+};
+export declare const CollapsableSearch: {
+    (args: ISearchInputProps): React.ReactElement;
+    args: {};
+};

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

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

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { ButtonProps } from '../Button';
+export type ButtonSize = 'compact' | 'medium' | 'large';
+type ButtonElement = {
+    id: string;
+    label: string;
+} & Pick<ButtonProps, 'disabled' | 'loading' | 'icon'>;
+export interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify an optional className to be applied to the container node
+     */
+    className?: string;
+    /**
+     * Array of buttons
+     */
+    buttons: ButtonElement[];
+    /**
+     * Set to make buttons fill the container if there is free space
+     */
+    fullWidth?: boolean;
+    /**
+     * Specify the buttons size
+     */
+    size?: ButtonSize;
+    /**
+     * Id of initially selected button
+     */
+    initialId?: string;
+    /**
+     * Id of current selected button
+     */
+    currentId?: string;
+    /**
+     * Handler for onClick on specific button
+     */
+    onButtonClick?: (id: string, event: React.MouseEvent<HTMLElement>) => void;
+}
+export declare const SegmentedControl: React.FC<SegmentedControlProps>;
+export {};

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

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