@livechat/design-system-react-components 1.17.1 → 1.19.0

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

@@ -1,56 +1,3 @@
 import * as React from 'react';
-import { Placement, flip, Strategy } from '@floating-ui/react';
-import { ComponentCoreProps } from '../../utils/types';
-import { IActionMenuOption } from './types';
-export interface ActionMenuProps 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;
-}
-export declare const ActionMenu: React.FC<ActionMenuProps>;
+import { IActionMenuProps } from './types';
+export declare const ActionMenu: React.FC<IActionMenuProps>;

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

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { Placement, flip, Strategy } from '@floating-ui/react';
+import { ComponentCoreProps } from '../../utils/types';
 export interface IActionMenuOption {
     key: string;
     element: React.ReactNode;
@@ -7,3 +9,58 @@ export interface IActionMenuOption {
     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;
+}

package/dist/components/Button/Button.d.ts

@@ -58,5 +58,5 @@ export declare const Button: React.ForwardRefExoticComponent<{
     /**
      * Specify the place to render element given in `icon` prop
      */
-    iconPosition?: "right" | "left" | undefined;
+    iconPosition?: "left" | "right" | undefined;
 } & React.ButtonHTMLAttributes<HTMLButtonElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & React.RefAttributes<HTMLButtonElement & HTMLAnchorElement>>;

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

@@ -32,5 +32,9 @@ export interface ISearchInputProps {
      * The event handler for onChange
      */
     onChange: (value: string) => void;
+    /**
+     * Set to enable ellipsis
+     */
+    cropOnBlur?: boolean;
 }
 export declare const SearchInput: React.FC<ISearchInputProps>;

package/dist/components/Skeleton/SkeletonAvatar.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface ISkeletonAvatar {
+    /**
+     * Specify if the element is square shape
+     */
+    square?: boolean;
+    /**
+     * Specify the size of the element (wdith and height in px)
+     */
+    size?: number;
+    /**
+     * Specify if the animation is enabled
+     */
+    animated?: boolean;
+}
+export declare const SkeletonAvatar: React.FC<ISkeletonAvatar>;

package/dist/components/Skeleton/SkeletonText.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface ISkeletonText {
+    /**
+     * Specify the height of the element
+     */
+    height?: number;
+    /**
+     * Specify the width of the element
+     */
+    width?: number;
+    /**
+     * Specify if the animation is enabled
+     */
+    animated?: boolean;
+}
+export declare const SkeletonText: React.FC<ISkeletonText>;

package/dist/components/Skeleton/SkeletonWrapper.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface ISkeletonWrapper extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The children elements to be wrapped by the skeleton wrapper
+     */
+    children: React.ReactNode;
+    /**
+     * Specify if the skeleton wrapper should display children elements vertically
+     */
+    vertical?: boolean;
+    /**
+     * Specify if the animation is enabled, it will be passed to the children skeleton components
+     */
+    animated?: boolean;
+}
+export declare const SkeletonWrapper: React.FC<ISkeletonWrapper>;

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

@@ -0,0 +1,3 @@
+export { SkeletonWrapper } from './SkeletonWrapper';
+export { SkeletonAvatar } from './SkeletonAvatar';
+export { SkeletonText } from './SkeletonText';

package/dist/components/Tag/Tag.d.ts

@@ -1,50 +1,3 @@
 import * as React from 'react';
-import { TagKind, TagSize } from './types';
-export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Specify the tag kind
-     */
-    kind?: TagKind;
-    /**
-     * Specify the tag size
-     */
-    size?: TagSize;
-    /**
-     * Set the tag custom color
-     */
-    customColor?: string;
-    /**
-     * Set to show close icon
-     * @deprecated The close icon will be visible by providing the `onRemove` prop and this flag will no longer be needed
-     */
-    dismissible?: boolean;
-    /**
-     * Set to show close icon on hover only if the `onRemove` prop is provided
-     */
-    dismissibleOnHover?: boolean;
-    /**
-     * Set to hide close icon if the `onRemove` prop is provided
-     */
-    disabled?: boolean;
-    /**
-     * Outlined version of tag
-     */
-    outline?: boolean;
-    /**
-     * The event handler for close icon click, if provided the close icon will be visible
-     */
-    onRemove?(e: React.MouseEvent): void;
-    /**
-     * React node element to show on the left
-     */
-    leftNode?: React.ReactElement;
-    /**
-     * React node element to show on the right
-     */
-    rightNode?: React.ReactElement;
-    /**
-     * Set to show the tag as square (only if you want use icon without text)
-     */
-    iconOnly?: boolean;
-}
+import { TagProps } from './types';
 export declare const Tag: React.FC<React.PropsWithChildren<TagProps>>;

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

@@ -1,3 +1,3 @@
 export { Tag } from './Tag';
-export type { TagProps } from './Tag';
 export type { TagKind, TagSize } from './types';
+export type { TagProps } from './types';

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

@@ -1,3 +1,55 @@
+import * as React from 'react';
 import { kinds, sizes } from './constants';
 export type TagKind = (typeof kinds)[number];
 export type TagSize = (typeof sizes)[number];
+export interface TagProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Specify the tag kind
+     */
+    kind?: TagKind;
+    /**
+     * Specify the tag size
+     */
+    size?: TagSize;
+    /**
+     * Set the tag custom color
+     */
+    customColor?: string;
+    /**
+     * Set to show close icon
+     * @deprecated The close icon will be visible by providing the `onRemove` prop and this flag will no longer be needed
+     */
+    dismissible?: boolean;
+    /**
+     * Set to show close icon on hover only if the `onRemove` prop is provided
+     */
+    dismissibleOnHover?: boolean;
+    /**
+     * Set to hide close icon if the `onRemove` prop is provided
+     */
+    disabled?: boolean;
+    /**
+     * Outlined version of tag
+     */
+    outline?: boolean;
+    /**
+     * The event handler for close icon click, if provided the close icon will be visible
+     */
+    onRemove?(e: React.MouseEvent): void;
+    /**
+     * React node element to show on the left
+     */
+    leftNode?: React.ReactElement;
+    /**
+     * React node element to show on the right
+     */
+    rightNode?: React.ReactElement;
+    /**
+     * Set to show the tag as square (only if you want use icon without text)
+     */
+    iconOnly?: boolean;
+    /**
+     * Set text value for the tag. You can use this or `children` prop. If both are provided, `value` prop will be used.
+     */
+    value?: string;
+}

package/dist/components/TagInput/TagInput.d.ts

@@ -1,40 +1,3 @@
 import * as React from 'react';
-export interface TagInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
-    /**
-     * Set the id for input
-     */
-    id?: string;
-    /**
-     * Set the error message
-     */
-    error?: string;
-    /**
-     * Array of defined tags
-     */
-    tags?: string[];
-    /**
-     * The event handler for modify tags array
-     */
-    onChange: (tags: string[]) => void;
-    /**
-     * Set the input placeholder
-     */
-    placeholder?: string;
-    /**
-     * Set the custom validation for provided items
-     */
-    validator?: (val: string) => boolean;
-    /**
-     * Specify the input size
-     */
-    size?: 'medium' | 'large';
-    /**
-     * Set the input custom class
-     */
-    inputClassName?: string;
-    /**
-     * Add Tag on blur
-     */
-    addOnBlur?: boolean;
-}
-export declare const TagInput: React.FC<TagInputProps>;
+import { TagInputProps, TagInputValues } from './types';
+export declare const TagInput: <T extends TagInputValues>({ id, tags, onChange, validator, error, placeholder, size, className, inputClassName, onBlur, addOnBlur, ...props }: TagInputProps<T>) => React.ReactElement;

package/dist/components/TagInput/{EditableTag.d.ts → components/EditableTag.d.ts}

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { TagProps } from '../../Tag';
 export interface EditableTagProps extends React.HTMLAttributes<HTMLDivElement> {
     inputRef: React.RefObject<HTMLInputElement>;
     index: number;
@@ -7,5 +8,6 @@ export interface EditableTagProps extends React.HTMLAttributes<HTMLDivElement> {
     validator?: (val: string) => boolean;
     children: string;
     size: 'medium' | 'large';
+    tagProps?: TagProps;
 }
 export declare const EditableTag: React.FC<EditableTagProps>;

package/dist/components/TagInput/components/EmailTagInput.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { TagInputProps, TagInputValues } from '../types';
+export type EmailTagInputProps<T> = Omit<TagInputProps<T>, 'validator'>;
+export declare const emailRegex: RegExp;
+export declare const EmailTagInput: <T extends TagInputValues>({ placeholder, ...props }: EmailTagInputProps<T>) => React.ReactElement;

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

@@ -1,4 +1,4 @@
 export { TagInput } from './TagInput';
-export type { TagInputProps } from './TagInput';
-export { EmailTagInput } from './EmailTagInput';
-export type { EmailTagInputProps } from './EmailTagInput';
+export { EmailTagInput } from './components/EmailTagInput';
+export type { EmailTagInputProps } from './components/EmailTagInput';
+export type { TagInputProps } from './types';

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

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { TagProps } from '../Tag';
+export interface TagInputProps<T> extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'onChange'> {
+    /**
+     * Set the id for input
+     */
+    id?: string;
+    /**
+     * Set the error message
+     */
+    error?: string;
+    /**
+     * Array of defined tags
+     */
+    tags?: T[];
+    /**
+     * The event handler for modify tags array
+     */
+    onChange: (tags: T[]) => void;
+    /**
+     * Set the input placeholder
+     */
+    placeholder?: string;
+    /**
+     * Set the custom validation for provided items
+     */
+    validator?: (val: string) => boolean;
+    /**
+     * Specify the input size
+     */
+    size?: 'medium' | 'large';
+    /**
+     * Set the input custom class
+     */
+    inputClassName?: string;
+    /**
+     * Add Tag on blur
+     */
+    addOnBlur?: boolean;
+}
+export type TagInputValues = string | Omit<TagProps, 'onRemove' | 'dismissible'>;

package/dist/components/Typography/Display.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TDisplaySize } from './types';
+import { TDisplaySize, TTextAlign } from './types';
 interface IProps {
     /** Size of the text */
     size?: TDisplaySize;
@@ -7,6 +7,10 @@ interface IProps {
     as?: string;
     /** Optional custom className */
     className?: string;
+    /** Optional prop to set the custom color */
+    customColor?: string;
+    /** Optional prop to set the text align */
+    textAlign?: TTextAlign;
 }
 export declare const Display: React.FC<React.PropsWithChildren<IProps>>;
 export {};

package/dist/components/Typography/Heading.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { THeadingSize } from './types';
+import { THeadingSize, TTextAlign } from './types';
 interface IProps extends React.HTMLAttributes<HTMLElement> {
     size?: THeadingSize;
     /** DOM element name that will be rendered */
@@ -10,6 +10,10 @@ interface IProps extends React.HTMLAttributes<HTMLElement> {
     uppercase?: boolean;
     /** Optional prop to set the bold */
     bold?: boolean;
+    /** Optional prop to set the custom color */
+    customColor?: string;
+    /** Optional prop to set the text align */
+    textAlign?: TTextAlign;
 }
 export declare const Heading: React.FC<React.PropsWithChildren<IProps>>;
 export {};

package/dist/components/Typography/Text.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { TTextSize } from './types';
+import { TTextAlign, TTextSize } from './types';
 interface IProps extends React.HTMLAttributes<HTMLElement> {
     /** DOM element name that will be rendered */
     as?: string;
@@ -20,6 +20,10 @@ interface IProps extends React.HTMLAttributes<HTMLElement> {
     underline?: boolean;
     /** Optional prop to set the strike */
     strike?: boolean;
+    /** Optional prop to set the custom color */
+    customColor?: string;
+    /** Optional prop to set the text align */
+    textAlign?: TTextAlign;
 }
 export declare const Text: React.FC<React.PropsWithChildren<IProps>>;
 export {};

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

@@ -1,3 +1,4 @@
 export type TTextSize = 'xs' | 'sm' | 'md';
 export type THeadingSize = '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 export type TDisplaySize = 'sm' | 'md' | 'max';
+export type TTextAlign = 'left' | 'right' | 'center' | 'justify';