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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -38,6 +38,6 @@ export interface PromoBannerProps {
38
38
  onLinkClick?: () => void;
39
39
  }
40
40
  /**
41
- * @deprecated Since version 1.0.0. Will be deleted in future versions. Use {@link PromoBannerV2} instead.
41
+ * @deprecated Since version 1.0.0. Will be deleted in version 2.0.0. Use {@link PromoBannerV2} instead.
42
42
  */
43
43
  export declare const PromoBanner: React.FC<React.PropsWithChildren<PromoBannerProps>>;
@@ -1,4 +1,5 @@
1
1
  import * as React from 'react';
2
+ import { StoryFn } from '@storybook/react';
2
3
  import { ITooltipProps } from './types';
3
4
  declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react/dist/types-0a347bb9").R, ITooltipProps & {
4
5
  children?: React.ReactNode;
@@ -7,22 +8,32 @@ export default _default;
7
8
  export declare const Default: {
8
9
  (args: ITooltipProps): React.ReactElement;
9
10
  args: {
10
- placement: string;
11
11
  isVisible: boolean;
12
- theme: string;
13
- triggerOnClick: boolean;
14
- arrowOffsetY: number;
15
- arrowOffsetX: number;
16
- offsetMainAxis: number;
17
- withFadeAnimation: boolean;
18
- transitionDuration: number;
19
- transitionDelay: number;
20
- hoverOutDelayTimeout: number;
21
12
  };
13
+ decorators: ((Story: StoryFn) => React.JSX.Element)[];
14
+ };
15
+ export declare const TooltipInfo: {
16
+ (args: ITooltipProps): React.ReactElement;
17
+ args: {
18
+ isVisible: boolean;
19
+ };
20
+ decorators: ((Story: StoryFn) => React.JSX.Element)[];
21
+ };
22
+ export declare const TooltipInteractive: {
23
+ (args: ITooltipProps): React.ReactElement;
24
+ args: {
25
+ isVisible: boolean;
26
+ };
27
+ decorators: ((Story: StoryFn) => React.JSX.Element)[];
28
+ };
29
+ export declare const TooltipReports: {
30
+ (args: ITooltipProps): React.ReactElement;
31
+ args: {
32
+ isVisible: boolean;
33
+ fullSpaceContent: boolean;
34
+ };
35
+ decorators: ((Story: StoryFn) => React.JSX.Element)[];
22
36
  };
23
- export declare const TooltipInfo: () => React.ReactElement;
24
- export declare const TooltipInteractive: () => React.ReactElement;
25
- export declare const TooltipReports: () => React.ReactElement;
26
37
  export declare const TooltipUserGuide: {
27
38
  (args: ITooltipProps): React.ReactElement;
28
39
  args: {
@@ -1,6 +1,7 @@
1
1
  import * as React from 'react';
2
2
  import { TooltipTheme } from '../types';
3
3
  export declare const Info: React.FC<{
4
+ className?: string;
4
5
  header?: string;
5
6
  text: string;
6
7
  closeWithX?: boolean;
@@ -1,4 +1,6 @@
1
+ import { CSSProperties } from 'react';
1
2
  import { IconKind } from '../Icon';
2
3
  import { TooltipTheme } from './types';
3
4
  export declare function getIconType(theme: TooltipTheme): IconKind;
4
5
  export declare const sleep: (milliseconds: number) => Promise<void>;
6
+ export declare function getArrowStyles(arrowOffsetY?: number, arrowOffsetX?: number, arrowY?: number, arrowX?: number): CSSProperties | undefined;
@@ -1,5 +1,5 @@
1
1
  import * as React from 'react';
2
- import { Placement, VirtualElement } from '@floating-ui/react-dom';
2
+ import { Placement, VirtualElement, UseDismissProps } from '@floating-ui/react';
3
3
  import { ButtonKind } from '../Button';
4
4
  export type TooltipTheme = 'invert' | 'important' | undefined;
5
5
  export type TooltipButton = {
@@ -8,23 +8,112 @@ export type TooltipButton = {
8
8
  kind?: ButtonKind;
9
9
  };
10
10
  export interface ITooltipProps {
11
- children?: React.ReactNode;
11
+ /**
12
+ * The CSS class for tooltip
13
+ */
12
14
  className?: string;
15
+ /**
16
+ * The CSS class for trigger wrapper
17
+ */
13
18
  triggerClassName?: string;
14
- theme?: TooltipTheme;
19
+ /**
20
+ * Trigger element
21
+ */
22
+ triggerRenderer: React.ReactElement | (() => React.ReactNode);
23
+ /**
24
+ * Specify the tooltip kind
25
+ * @deprecated we are changing the nomenclature to `kind` in order to maintain the constant naming of props
26
+ */
27
+ theme?: 'invert' | 'important' | undefined;
28
+ /**
29
+ * Specify the tooltip kind
30
+ */
31
+ kind?: 'invert' | 'important' | undefined;
32
+ /**
33
+ * The tooltip placement
34
+ */
15
35
  placement?: Placement;
36
+ /**
37
+ * Set to control the menu visibility
38
+ */
16
39
  isVisible?: boolean;
40
+ /**
41
+ * Removes the spacing inside the tooltip
42
+ */
43
+ fullSpaceContent?: boolean;
44
+ /**
45
+ * Optional handler called on tooltip hide
46
+ */
47
+ onClose?: () => void;
48
+ /**
49
+ * Optional handler called on tooltip show
50
+ */
51
+ onOpen?: () => void;
52
+ /**
53
+ * Set to enable/disable transition
54
+ */
17
55
  withFadeAnimation?: boolean;
56
+ /**
57
+ * Set to define transition duration for showing and hiding tooltip
58
+ */
18
59
  transitionDuration?: number;
60
+ /**
61
+ * Set to define transition duration for showing tooltip
62
+ */
63
+ hoverOnDuration?: number;
64
+ /**
65
+ * Set to define transition duration for hiding tooltip
66
+ */
67
+ hoverOffDuration?: number;
68
+ /**
69
+ * Set to define delay before transition start for showing and hiding tooltip
70
+ */
19
71
  transitionDelay?: number;
72
+ /**
73
+ * Set to define delay before transition start for showing tooltip
74
+ */
75
+ hoverOnDelay?: number;
76
+ /**
77
+ * Set to define delay before transition start for hiding tooltip
78
+ * @deprecated This prop will be removed in the future. Use `hoverOffDelay`.
79
+ */
20
80
  hoverOutDelayTimeout?: number;
21
- offsetMainAxis?: number;
81
+ /**
82
+ * Set to define delay before transition start for hiding tooltip
83
+ */
84
+ hoverOffDelay?: number;
85
+ /**
86
+ * Set if you want to show tooltip after trigger click if state is not managed
87
+ */
22
88
  triggerOnClick?: boolean;
89
+ /**
90
+ * Set the tooltip distance from the trigger
91
+ */
92
+ offsetMainAxis?: number;
93
+ /**
94
+ * Set custom reference object for the tooltip
95
+ */
96
+ referenceElement?: VirtualElement;
97
+ /**
98
+ * Waits until cursor is at “rest” over the trigger to change the state
99
+ */
100
+ activationThreshold?: number;
101
+ /**
102
+ * Set the `floating-ui` useDismiss hook paramns if you need more control
103
+ * https://floating-ui.com/docs/usedismiss
104
+ */
105
+ useDismissHookProps?: UseDismissProps;
106
+ /**
107
+ * Set to move the arrow along the Y axis from default position (left and right possition)
108
+ */
23
109
  arrowOffsetY?: number;
110
+ /**
111
+ * Set to move the arrow along the X axis from default position (top and bottom possition)
112
+ */
24
113
  arrowOffsetX?: number;
25
- fullSpaceContent?: boolean;
26
- triggerRenderer: () => React.ReactNode;
27
- referenceElement?: VirtualElement;
28
- onOpen?: () => void;
29
- onClose?: () => void;
114
+ /**
115
+ * Set to close the tooltip after leaving trigger area in uncontrolled state.
116
+ * Be default, moving the curson from trigger to tooltip will keep it open.
117
+ */
118
+ closeOnTriggerBlur?: boolean;
30
119
  }