You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
* Object containing size and position informations of where to position the Mask.
113
+
*/
110
114
sizes: RectResult
115
+
116
+
/**
117
+
* Prop to customize styles for the different parts of the Mask using a function that allows to extend the base styles an take advantage of some state props.
118
+
*/
111
119
styles?: StylesObj
120
+
121
+
/**
122
+
* Class to apply to the Mask wrapper
123
+
*/
112
124
className?: string
125
+
126
+
/**
127
+
* Class to apply to the Highlighted area rect
128
+
*/
113
129
highlightedAreaClassName?: string
130
+
131
+
/**
132
+
* Extra space to add in Mask calculations. Useful when calculating space from Element bounding rect and want to add more space.
133
+
* Single number sets sema space for x and y, otherwise, an Array sets [x, y].
134
+
*/
114
135
padding?: number|[number,number]
136
+
137
+
/**
138
+
* Click handler for the Mask except the highlighted area.
* Object containing size and position informations of where to position the Popover
159
+
*/
157
160
sizes: RectResult
161
+
158
162
children?: React.ReactNode
163
+
164
+
/**
165
+
* The position for the Popover, fixed in case of [number, number], calculated prefered position in case of string
166
+
*/
159
167
position?: PositionType
168
+
169
+
/**
170
+
* Extra space to add in Popover position calculations. Useful when calculating space from Element bounding rect and want to add more space.
171
+
*/
160
172
padding?: number|[number,number]
173
+
174
+
/**
175
+
* Prop to customize styles for the different parts of the Mask using a function that allows to extend the base styles an take advantage of some state props.
Copy file name to clipboardExpand all lines: packages/tour/src/types.tsx
+120
Original file line number
Diff line number
Diff line change
@@ -4,31 +4,138 @@ import { MaskStylesObj } from '@reactour/mask'
4
4
import{StylesObj}from'./styles'
5
5
6
6
typeSharedProps={
7
+
8
+
/**
9
+
* Array of elements to highlight with special info and props.
10
+
*/
7
11
steps: StepType[]
12
+
13
+
/**
14
+
* Prop to customize styles for the different parts of the Mask, Popover and Tour using a function that allows to extend the base styles an take advantage of some state props.
15
+
*/
8
16
styles?: StylesObj&PopoverStylesObj&MaskStylesObj
17
+
18
+
/**
19
+
* Extra space to add between the Mask and the Popover and the highlighted element. A single number coordinates both spaces. Otherwise, passing an Object specifying the Component space.
20
+
*/
9
21
padding?: Padding
22
+
23
+
/**
24
+
* Set a global position for the Popover in all steps, fixed in case of [number, number], calculated in case of position string
25
+
*/
10
26
position?: Position
27
+
28
+
/**
29
+
* Disables the ability to click or interact in any way with the Highlighted element on every step.
30
+
* This option could be overrided on specific steps using stepInteraction prop.
31
+
*/
11
32
disableInteraction?: boolean
33
+
34
+
/**
35
+
* The Tour uses FocusScope in order to lock the focus iteration inside the Popover when Tour is active. This prop allows to disable this behaviour.
36
+
*/
12
37
disableFocusLock?: boolean
38
+
39
+
/**
40
+
* Disable interactivity with Dot navigation inside Popover.
41
+
*/
13
42
disableDotsNavigation?: boolean
43
+
44
+
/**
45
+
* Disable all keyboard navigation events when true, disable only selected keys when array.
* Class assigned to highlighted part of Mask. Useful when using disableInteraction.
62
+
*/
17
63
highlightedMaskClassName?: string
64
+
65
+
/**
66
+
* Helper function to customize the Next button inside Popover, with useful parameters. It is possible to use the base Button and customize the props.
67
+
*/
18
68
nextButton?: (props: BtnFnProps)=>void
69
+
70
+
/**
71
+
* Helper function to customize the Prev button inside Popover, with useful parameters. It is possible to use the base Button and customize the props.
72
+
*/
19
73
prevButton?: (props: BtnFnProps)=>void
74
+
75
+
/**
76
+
* Action fired just after the Tour is open.
77
+
*/
20
78
afterOpen?: (target: Element|null)=>void
79
+
80
+
/**
81
+
* Action fired just before the Tour is closed.
82
+
*/
21
83
beforeClose?: (target: Element|null)=>void
84
+
85
+
/**
86
+
* Function that overrides the default close behavior of the Mask click handler. Comes with useful parameters to play with.
87
+
*/
22
88
onClickMask?: (clickProps: ClickProps)=>void
89
+
90
+
/**
91
+
* Click handler for highlighted area. Only works when disableInteraction is active. Useful in case is needed to avoid onClickMask when clicking the highlighted element.
* Function to customize the content of the Badge using helper parameters like the current and total steps and if the Tour is transitioning between steps.
97
+
*/
24
98
badgeContent?: (badgeProps: BadgeProps)=>any
99
+
100
+
/**
101
+
* Show or hide the Navigation (Prev and Next buttons and Dots) inside Popover.
102
+
*/
25
103
showNavigation?: boolean
104
+
105
+
/**
106
+
* Show or hide Prev and Next buttons inside Popover.
107
+
*/
26
108
showPrevNextButtons?: boolean
109
+
110
+
/**
111
+
* Show or hide the Close button inside Popover.
112
+
*/
27
113
showCloseButton?: boolean
114
+
115
+
/**
116
+
* Show or hide the Badge inside Popover.
117
+
*/
28
118
showBadge?: boolean
119
+
120
+
/**
121
+
* Activate smooth scroll behavior when steps are outside viewport.
122
+
* default: false
123
+
*/
29
124
scrollSmooth?: boolean
125
+
126
+
/**
127
+
* Tolerance in pixels to add when calculating if the step element is outside viewport to scroll into view.
128
+
*/
30
129
inViewThreshold?: number
130
+
131
+
/**
132
+
* Configure generic accessibility related attributes like aria-labelledby, aria-label for Close button and if show or hide Dot navigation in screen readers.
133
+
*/
31
134
accessibilityOptions?: A11yOptions
135
+
136
+
/**
137
+
* Option to navigate and show Navigation in right-to-left mode
0 commit comments