@livechat/design-system-react-components 1.0.0-y.0 → 1.1.0

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/{src/components → components}/Picker/PickerList.d.ts

@@ -1,14 +1,5 @@
 import * as React from 'react';
-export interface IPickerListItem {
-    key: string;
-    name: string;
-    customElement?: {
-        listItemBody: React.ReactElement;
-        selectedItemBody: React.ReactElement;
-    };
-    groupHeader?: boolean;
-    disabled?: boolean;
-}
+import { IPickerListItem } from './types';
 export interface IPickerListProps {
     isOpen: boolean;
     items: IPickerListItem[];

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/{src/components → components}/Picker/Trigger.d.ts

@@ -9,7 +9,9 @@ export interface ITriggerProps {
     isRequired?: boolean;
     isMultiSelect?: boolean;
     size?: Size;
+    hideClearButton?: boolean;
     onTrigger: (e: React.MouseEvent | KeyboardEvent) => void;
     onClear: () => void;
+    testId?: string;
 }
-export declare const Trigger: React.FC<ITriggerProps>;
+export declare const Trigger: React.FC<React.PropsWithChildren<ITriggerProps>>;

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

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

package/dist/{src/components → components}/Picker/TriggerBody.d.ts

@@ -1,7 +1,6 @@
 import * as React from 'react';
-import { IPickerListItem } from './PickerList';
-import { PickerType } from './Picker';
-import { IconSize } from 'index';
+import { Size } from 'utils';
+import { PickerType, IPickerListItem } from './types';
 export interface ITriggerBodyProps {
     isOpen: boolean;
     isSearchDisabled?: boolean;
@@ -9,7 +8,8 @@ export interface ITriggerBodyProps {
     placeholder: string;
     items?: IPickerListItem[] | null;
     type: PickerType;
-    iconSize?: IconSize;
+    clearSearchAfterSelection?: boolean;
+    size?: Size;
     onItemRemove: (item: IPickerListItem) => void;
     onFilter: (text: string) => void;
 }

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/{src/components → components}/Progress/ProgressBar.d.ts

@@ -1,9 +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;
+    /**
+     * 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/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/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/{src/components → components}/SegmentedControl/SegmentedControl.d.ts

@@ -1,17 +1,38 @@
 import * as React from 'react';
 import { ButtonProps } from '../Button';
-export declare type ButtonSize = 'compact' | 'medium' | 'large';
-declare type ButtonElement = {
+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>;

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

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

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { SegmentedControlProps } from './SegmentedControl';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, SegmentedControlProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: Story<SegmentedControlProps>;
+export declare const Uncontrolled: Story<SegmentedControlProps>;

package/dist/components/Switch/Switch.d.ts

@@ -0,0 +1,47 @@
+import * as React from 'react';
+export declare const baseClass = "switch";
+export type SwitchSize = 'compact' | 'medium' | 'large';
+export type SwitchState = 'regular' | 'loading' | 'locked';
+export interface SwitchProps {
+    /**
+     * Specify the label for the switch input
+     */
+    ariaLabel?: string;
+    /**
+     * The CSS class for switch container
+     */
+    className?: string;
+    /**
+     * Will set the switch to "on" on component initialization
+     */
+    defaultOn?: boolean;
+    /**
+     * Specify whether the switch should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * Ref object
+     */
+    innerRef?: React.LegacyRef<HTMLInputElement> | undefined;
+    /**
+     * Specify the switch input name
+     */
+    name?: string;
+    /**
+     * Define if switch is "on"
+     */
+    on?: boolean;
+    /**
+     * The event handler for onChange
+     */
+    onChange?(e: React.FormEvent, value: boolean): void;
+    /**
+     * Specify the switch size
+     */
+    size?: SwitchSize;
+    /**
+     * Specify the switch state
+     */
+    state?: SwitchState;
+}
+export declare const Switch: React.FC<SwitchProps>;

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

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

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

@@ -0,0 +1,11 @@
+import * as React from 'react';
+import { Story } from '@storybook/react';
+import { SwitchProps } from './Switch';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, SwitchProps & {
+    children?: React.ReactNode;
+}>;
+export default _default;
+export declare const Default: Story<SwitchProps>;
+export declare const States: Story;
+export declare const Availability: Story;
+export declare const Sizes: Story;

package/dist/{src/components → components}/Tab/Tab.d.ts

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { Size } from 'utils';
-declare type HTMLProps = (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+type HTMLProps = (React.AnchorHTMLAttributes<HTMLAnchorElement> & {
     href: string;
 }) | (React.ButtonHTMLAttributes<HTMLButtonElement> & {
     href?: never;
 });
-export declare type TabProps = HTMLProps & {
+export type TabProps = HTMLProps & {
     count?: number;
     isSelected?: boolean;
     asBadge?: boolean;
     size?: Size;
 };
-export declare const Tab: React.FC<TabProps>;
+export declare const Tab: React.FC<React.PropsWithChildren<TabProps>>;
 export {};

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

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