@livechat/design-system-react-components 1.3.0 → 1.5.0

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

@@ -1,38 +1,3 @@
 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;
-}
+import { IPopoverProps } from './types';
 export declare const Popover: React.FC<IPopoverProps>;

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

@@ -1,13 +1,16 @@
 import * as React from 'react';
-import { IPopoverProps } from './Popover';
+import { StoryFn } from '@storybook/react';
+import type { IPopoverProps } from './types';
 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;
+    decorators: ((Story: StoryFn) => React.JSX.Element)[];
     args: {
         placement: string;
-        isVisible: boolean;
+        isVisible: undefined;
+        openedOnInit: boolean;
     };
 };

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

@@ -1 +1,2 @@
 export * from './Popover';
+export type { IPopoverProps } from './types';

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

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import { Placement, UseClickProps, UseDismissProps, FlipOptions } from '@floating-ui/react';
+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;
+    /**
+     * Optional handler called on tooltip hide
+     */
+    onClose?: () => void;
+    /**
+     * Optional handler called on tooltip show
+     */
+    onOpen?: () => void;
+    /**
+     * Set popover visibility
+     */
+    isVisible?: boolean;
+    /**
+     * Will open menu on component initialization
+     */
+    openedOnInit?: boolean;
+    /**
+     * Set the popover placement to keep it in view
+     */
+    flipOptions?: FlipOptions;
+    /**
+     * Set the popover offset
+     */
+    offsetSize?: number;
+    /**
+     * Set `false` if the menu is not to be closed with an esc press
+     */
+    closeOnEsc?: boolean;
+    /**
+     * Trigger element
+     */
+    triggerRenderer: React.ReactElement | (() => React.ReactNode);
+    /**
+     * Set the `floating-ui` useDismiss hook params if you need more control
+     * https://floating-ui.com/docs/usedismiss
+     */
+    useDismissHookProps?: UseDismissProps;
+    /**
+     * Set the `floating-ui` useClick hook params if you need more control
+     * https://floating-ui.com/docs/useclick
+     */
+    useClickHookProps?: UseClickProps;
+}

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/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;
 }