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

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Size } from 'utils';
-export type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'destructive-outline' | 'text' | 'link' | 'link-light' | 'plain' | 'float' | 'dotted' | 'high-contrast';
+import { ButtonKind } from './types';
 export type ButtonProps = {
     /**
      * Specify the button kind

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ButtonProps } from './Button';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, {
-    kind?: import("./Button").ButtonKind | undefined;
+    kind?: import("./types").ButtonKind | undefined;
     size?: import("../..").Size | undefined;
     loading?: boolean | undefined;
     fullWidth?: boolean | undefined;

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

@@ -0,0 +1,2 @@
+import { ButtonKind } from './types';
+export declare const getSpinnerColors: (kind: ButtonKind) => Record<string, string> | undefined;

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

@@ -1,2 +1,3 @@
 export { Button } from './Button';
-export type { ButtonKind, ButtonProps } from './Button';
+export type { ButtonProps } from './Button';
+export type { ButtonKind } from './types';

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

@@ -0,0 +1 @@
+export type ButtonKind = 'basic' | 'primary' | 'secondary' | 'destructive' | 'destructive-outline' | 'text' | 'link' | 'link-light' | 'link-inverted' | 'plain' | 'float' | 'dotted' | 'high-contrast';

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

@@ -38,6 +38,6 @@ export interface PromoBannerProps {
     onLinkClick?: () => void;
 }
 /**
- * @deprecated Since version 1.0.0. Will be deleted in future versions. Use {@link PromoBannerV2} instead.
+ * @deprecated Since version 1.0.0. Will be deleted in version 2.0.0. Use {@link PromoBannerV2} instead.
  */
 export declare const PromoBanner: React.FC<React.PropsWithChildren<PromoBannerProps>>;

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

@@ -28,5 +28,13 @@ export interface TagInputProps extends Omit<React.InputHTMLAttributes<HTMLInputE
      * 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>;

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { StoryFn } from '@storybook/react';
 import { ITooltipProps } from './types';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ITooltipProps & {
     children?: React.ReactNode;
@@ -7,22 +8,32 @@ export default _default;
 export declare const Default: {
     (args: ITooltipProps): React.ReactElement;
     args: {
-        placement: string;
         isVisible: boolean;
-        theme: string;
-        triggerOnClick: boolean;
-        arrowOffsetY: number;
-        arrowOffsetX: number;
-        offsetMainAxis: number;
-        withFadeAnimation: boolean;
-        transitionDuration: number;
-        transitionDelay: number;
-        hoverOutDelayTimeout: number;
     };
+    decorators: ((Story: StoryFn) => React.JSX.Element)[];
+};
+export declare const TooltipInfo: {
+    (args: ITooltipProps): React.ReactElement;
+    args: {
+        isVisible: boolean;
+    };
+    decorators: ((Story: StoryFn) => React.JSX.Element)[];
+};
+export declare const TooltipInteractive: {
+    (args: ITooltipProps): React.ReactElement;
+    args: {
+        isVisible: boolean;
+    };
+    decorators: ((Story: StoryFn) => React.JSX.Element)[];
+};
+export declare const TooltipReports: {
+    (args: ITooltipProps): React.ReactElement;
+    args: {
+        isVisible: boolean;
+        fullSpaceContent: boolean;
+    };
+    decorators: ((Story: StoryFn) => React.JSX.Element)[];
 };
-export declare const TooltipInfo: () => React.ReactElement;
-export declare const TooltipInteractive: () => React.ReactElement;
-export declare const TooltipReports: () => React.ReactElement;
 export declare const TooltipUserGuide: {
     (args: ITooltipProps): React.ReactElement;
     args: {

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

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { TooltipTheme } from '../types';
 export declare const Info: React.FC<{
+    className?: string;
     header?: string;
     text: string;
     closeWithX?: boolean;

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

@@ -1,4 +1,6 @@
+import { CSSProperties } from 'react';
 import { IconKind } from '../Icon';
 import { TooltipTheme } from './types';
 export declare function getIconType(theme: TooltipTheme): IconKind;
 export declare const sleep: (milliseconds: number) => Promise<void>;
+export declare function getArrowStyles(arrowOffsetY?: number, arrowOffsetX?: number, arrowY?: number, arrowX?: number): CSSProperties | undefined;

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Placement, VirtualElement } from '@floating-ui/react-dom';
+import { Placement, VirtualElement, UseDismissProps } from '@floating-ui/react';
 import { ButtonKind } from '../Button';
 export type TooltipTheme = 'invert' | 'important' | undefined;
 export type TooltipButton = {
@@ -8,23 +8,112 @@ export type TooltipButton = {
     kind?: ButtonKind;
 };
 export interface ITooltipProps {
-    children?: React.ReactNode;
+    /**
+     * The CSS class for tooltip
+     */
     className?: string;
+    /**
+     * The CSS class for trigger wrapper
+     */
     triggerClassName?: string;
-    theme?: TooltipTheme;
+    /**
+     * Trigger element
+     */
+    triggerRenderer: React.ReactElement | (() => React.ReactNode);
+    /**
+     * Specify the tooltip kind
+     * @deprecated we are changing the nomenclature to `kind` in order to maintain the constant naming of props
+     */
+    theme?: 'invert' | 'important' | undefined;
+    /**
+     * Specify the tooltip kind
+     */
+    kind?: 'invert' | 'important' | undefined;
+    /**
+     * The tooltip placement
+     */
     placement?: Placement;
+    /**
+     * Set to control the menu visibility
+     */
     isVisible?: boolean;
+    /**
+     * Removes the spacing inside the tooltip
+     */
+    fullSpaceContent?: boolean;
+    /**
+     * Optional handler called on tooltip hide
+     */
+    onClose?: () => void;
+    /**
+     * Optional handler called on tooltip show
+     */
+    onOpen?: () => void;
+    /**
+     * Set to enable/disable transition
+     */
     withFadeAnimation?: boolean;
+    /**
+     * Set to define transition duration for showing and hiding tooltip
+     */
     transitionDuration?: number;
+    /**
+     * Set to define transition duration for showing tooltip
+     */
+    hoverOnDuration?: number;
+    /**
+     * Set to define transition duration for hiding tooltip
+     */
+    hoverOffDuration?: number;
+    /**
+     * Set to define delay before transition start for showing and hiding tooltip
+     */
     transitionDelay?: number;
+    /**
+     * Set to define delay before transition start for showing tooltip
+     */
+    hoverOnDelay?: number;
+    /**
+     * Set to define delay before transition start for hiding tooltip
+     * @deprecated This prop will be removed in the future. Use `hoverOffDelay`.
+     */
     hoverOutDelayTimeout?: number;
-    offsetMainAxis?: number;
+    /**
+     * Set to define delay before transition start for hiding tooltip
+     */
+    hoverOffDelay?: number;
+    /**
+     * Set if you want to show tooltip after trigger click if state is not managed
+     */
     triggerOnClick?: boolean;
+    /**
+     * Set the tooltip distance from the trigger
+     */
+    offsetMainAxis?: number;
+    /**
+     * Set custom reference object for the tooltip
+     */
+    referenceElement?: VirtualElement;
+    /**
+     * Waits until cursor is at “rest” over the trigger to change the state
+     */
+    activationThreshold?: number;
+    /**
+     * Set the `floating-ui` useDismiss hook paramns if you need more control
+     * https://floating-ui.com/docs/usedismiss
+     */
+    useDismissHookProps?: UseDismissProps;
+    /**
+     * Set to move the arrow along the Y axis from default position (left and right possition)
+     */
     arrowOffsetY?: number;
+    /**
+     * Set to move the arrow along the X axis from default position (top and bottom possition)
+     */
     arrowOffsetX?: number;
-    fullSpaceContent?: boolean;
-    triggerRenderer: () => React.ReactNode;
-    referenceElement?: VirtualElement;
-    onOpen?: () => void;
-    onClose?: () => void;
+    /**
+     * Set to close the tooltip after leaving trigger area in uncontrolled state.
+     * Be default, moving the curson from trigger to tooltip will keep it open.
+     */
+    closeOnTriggerBlur?: boolean;
 }