@sikka/hawa 0.1.98 → 0.1.99
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.
- package/dist/index.d.mts +5 -22
- package/dist/index.d.ts +5 -22
- package/dist/index.js +622 -932
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +954 -1258
- package/dist/index.mjs.map +1 -1
- package/dist/styles.css +0 -198
- package/package.json +1 -1
- package/src/elements/ActionCard.tsx +0 -1
- package/src/elements/AutoCompleteField.tsx +0 -1
- package/src/elements/Carousel.tsx +3 -4
- package/src/elements/Dialog.tsx +0 -1
- package/src/elements/DropdownMenu.tsx +1 -1
- package/src/elements/HawaAlert.tsx +0 -1
- package/src/elements/HawaButton.tsx +49 -90
- package/src/elements/HawaPricingCard.tsx +0 -1
- package/src/elements/HawaTable.tsx +0 -5
- package/src/elements/Input.tsx +0 -1
- package/src/elements/Label.tsx +0 -1
- package/src/elements/Popover.tsx +0 -1
- package/src/elements/Select.tsx +0 -1
- package/src/elements/Separator.tsx +0 -1
- package/src/elements/Tabs.tsx +0 -1
- package/src/elements/Toast.tsx +0 -1
- package/src/elements/UserFeedback.tsx +0 -1
- package/src/elements/UserReferralSource.tsx +1 -3
- package/src/elements/index.ts +0 -2
- package/src/layout/Banner.tsx +3 -5
- package/src/layout/HawaAppLayout.tsx +1 -1
- package/src/layout/Sidebar.tsx +1 -1
- package/src/styles.css +0 -198
- package/archive/HawaSnackbar.tsx +0 -137
- package/archive/HawaSwitch.tsx +0 -41
- package/src/blocks/Account/HawaApiBox.tsx +0 -12
- package/src/elements/HawaDropdownMenu.tsx +0 -267
- package/src/elements/HawaTooltip.tsx +0 -137
|
@@ -1,267 +0,0 @@
|
|
|
1
|
-
import React, { ReactNode, useEffect, useRef, useState, FC } from "react"
|
|
2
|
-
import clsx from "clsx"
|
|
3
|
-
import { Command } from "cmdk"
|
|
4
|
-
import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
|
|
5
|
-
|
|
6
|
-
// TODO: add width to decrease width
|
|
7
|
-
|
|
8
|
-
interface TMenuTypes {
|
|
9
|
-
children?: any
|
|
10
|
-
direction?: "rtl" | "ltr"
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
type MenuItems = {}
|
|
14
|
-
|
|
15
|
-
export const HawaDropdownMenu: FC<TMenuTypes> = ({ children, direction }) => {
|
|
16
|
-
const [bookmarksChecked, setBookmarksChecked] = React.useState(true)
|
|
17
|
-
const [urlsChecked, setUrlsChecked] = React.useState(false)
|
|
18
|
-
const [person, setPerson] = React.useState("pedro")
|
|
19
|
-
|
|
20
|
-
let dropdownData = {
|
|
21
|
-
items: [
|
|
22
|
-
{
|
|
23
|
-
label: "New Tab",
|
|
24
|
-
shortcut: "ctrl + T",
|
|
25
|
-
disabled: false,
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
label: "New Windows",
|
|
29
|
-
shortcut: "ctrl + N",
|
|
30
|
-
disabled: false,
|
|
31
|
-
},
|
|
32
|
-
{
|
|
33
|
-
label: "New Private Window",
|
|
34
|
-
shortcut: "⇧+ctrl+N",
|
|
35
|
-
disabled: true,
|
|
36
|
-
},
|
|
37
|
-
],
|
|
38
|
-
checkboxes: [
|
|
39
|
-
{
|
|
40
|
-
label: "Show Bookmarks",
|
|
41
|
-
shortcut: "ctrl + B",
|
|
42
|
-
disabled: false,
|
|
43
|
-
},
|
|
44
|
-
{
|
|
45
|
-
label: "Show Something",
|
|
46
|
-
shortcut: "ctrl + C",
|
|
47
|
-
disabled: false,
|
|
48
|
-
},
|
|
49
|
-
{
|
|
50
|
-
label: "Show that",
|
|
51
|
-
shortcut: "ctrl + T",
|
|
52
|
-
disabled: false,
|
|
53
|
-
},
|
|
54
|
-
],
|
|
55
|
-
}
|
|
56
|
-
return (
|
|
57
|
-
<DropdownMenu.Root dir={direction}>
|
|
58
|
-
<DropdownMenu.Trigger asChild>{children}</DropdownMenu.Trigger>
|
|
59
|
-
|
|
60
|
-
<DropdownMenu.Portal>
|
|
61
|
-
<DropdownMenu.Content
|
|
62
|
-
className="min-w-[220px] rounded bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
|
|
63
|
-
sideOffset={5}
|
|
64
|
-
>
|
|
65
|
-
{dropdownData.items.map((it, i) => (
|
|
66
|
-
<DropdownMenu.Item
|
|
67
|
-
key={i}
|
|
68
|
-
className="group relative flex h-[25px] select-none items-center justify-between
|
|
69
|
-
rounded-inner px-[5px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8
|
|
70
|
-
data-[highlighted]:text-violet-1 "
|
|
71
|
-
// ltr:pr-[25px] rtl:pl-[25px]
|
|
72
|
-
disabled={it.disabled}
|
|
73
|
-
>
|
|
74
|
-
{/* New Tab{" "} */}
|
|
75
|
-
{it.label}
|
|
76
|
-
<div className=" text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
|
|
77
|
-
{/* ml-auto pl-[20px] */}
|
|
78
|
-
{/* ⌘+T */}
|
|
79
|
-
{it.shortcut}
|
|
80
|
-
</div>
|
|
81
|
-
</DropdownMenu.Item>
|
|
82
|
-
))}
|
|
83
|
-
|
|
84
|
-
<DropdownMenu.Sub>
|
|
85
|
-
<DropdownMenu.SubTrigger
|
|
86
|
-
className=" group relative flex h-[25px] select-none
|
|
87
|
-
items-center rounded-inner justify-between flex-row
|
|
88
|
-
px-[5px] text-[13px] leading-none text-violet-11
|
|
89
|
-
outline-none data-[disabled]:pointer-events-none
|
|
90
|
-
data-[highlighted]:bg-violet-9 data-[highlighted]:data-[state=open]:bg-violet-9
|
|
91
|
-
data-[state=open]:bg-violet-4 data-[disabled]:text-mauve-8 data-[highlighted]:data-[state=open]:text-violet-1
|
|
92
|
-
data-[highlighted]:text-violet-1 data-[state=open]:text-violet-11 ltr:pl-[25px] rtl:pl-[0px] "
|
|
93
|
-
>
|
|
94
|
-
More Tools
|
|
95
|
-
<div
|
|
96
|
-
className="ltr:ml-auto rtl:pr-[5px] ltr:pl-[0px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white
|
|
97
|
-
rtl:mr-auto rtl:rotate-180 rtl:pl-[0px]"
|
|
98
|
-
>
|
|
99
|
-
{/* <ChevronRightIcon /> */}
|
|
100
|
-
<svg
|
|
101
|
-
aria-label="Chevron Right Icon"
|
|
102
|
-
stroke="currentColor"
|
|
103
|
-
fill="currentColor"
|
|
104
|
-
strokeWidth="0"
|
|
105
|
-
viewBox="0 0 16 16"
|
|
106
|
-
height="1em"
|
|
107
|
-
width="1em"
|
|
108
|
-
>
|
|
109
|
-
<path
|
|
110
|
-
fillRule="evenodd"
|
|
111
|
-
d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"
|
|
112
|
-
></path>
|
|
113
|
-
</svg>
|
|
114
|
-
</div>
|
|
115
|
-
</DropdownMenu.SubTrigger>
|
|
116
|
-
<DropdownMenu.Portal>
|
|
117
|
-
<DropdownMenu.SubContent
|
|
118
|
-
className="min-w-[220px] rounded-inner bg-white p-[5px] shadow-[0px_10px_38px_-10px_rgba(22,_23,_24,_0.35),_0px_10px_20px_-15px_rgba(22,_23,_24,_0.2)] will-change-[opacity,transform] data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade data-[side=right]:animate-slideLeftAndFade data-[side=top]:animate-slideDownAndFade"
|
|
119
|
-
sideOffset={2}
|
|
120
|
-
alignOffset={-5}
|
|
121
|
-
>
|
|
122
|
-
<DropdownMenu.Item className="group relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
|
|
123
|
-
Save Page As…{" "}
|
|
124
|
-
<div className="ml-auto pl-[20px] text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
|
|
125
|
-
⌘+S
|
|
126
|
-
</div>
|
|
127
|
-
</DropdownMenu.Item>
|
|
128
|
-
<DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
|
|
129
|
-
Create Shortcut…
|
|
130
|
-
</DropdownMenu.Item>
|
|
131
|
-
<DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
|
|
132
|
-
Name Window…
|
|
133
|
-
</DropdownMenu.Item>
|
|
134
|
-
<DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
|
|
135
|
-
<DropdownMenu.Item className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1">
|
|
136
|
-
Developer Tools
|
|
137
|
-
</DropdownMenu.Item>
|
|
138
|
-
</DropdownMenu.SubContent>
|
|
139
|
-
</DropdownMenu.Portal>
|
|
140
|
-
</DropdownMenu.Sub>
|
|
141
|
-
|
|
142
|
-
<DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
|
|
143
|
-
|
|
144
|
-
{dropdownData.checkboxes.map((ch, i) => (
|
|
145
|
-
<DropdownMenu.CheckboxItem
|
|
146
|
-
key={i}
|
|
147
|
-
className="group relative flex h-[25px] select-none items-center
|
|
148
|
-
justify-between rounded-inner px-[5px] text-[13px] leading-none text-violet-11
|
|
149
|
-
outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8
|
|
150
|
-
data-[highlighted]:text-violet-1"
|
|
151
|
-
// ltr:pl-[25px] rtl:pr-[25px]
|
|
152
|
-
checked={bookmarksChecked}
|
|
153
|
-
onCheckedChange={setBookmarksChecked}
|
|
154
|
-
>
|
|
155
|
-
<DropdownMenu.ItemIndicator className="absolute inline-flex w-[25px] items-center justify-center ltr:left-0 rtl:right-0">
|
|
156
|
-
<svg
|
|
157
|
-
aria-label="Check Mark"
|
|
158
|
-
stroke="currentColor"
|
|
159
|
-
fill="currentColor"
|
|
160
|
-
strokeWidth="0"
|
|
161
|
-
viewBox="0 0 512 512"
|
|
162
|
-
height="0.60em"
|
|
163
|
-
width="0.60em"
|
|
164
|
-
>
|
|
165
|
-
<path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
|
|
166
|
-
</svg>{" "}
|
|
167
|
-
</DropdownMenu.ItemIndicator>
|
|
168
|
-
{/* Show Bookmarks{" "} */}
|
|
169
|
-
{ch.label}
|
|
170
|
-
<div className=" text-mauve-11 group-data-[disabled]:text-mauve-8 group-data-[highlighted]:text-white">
|
|
171
|
-
{/* ml-auto pl-[20px] */}
|
|
172
|
-
{/* ⌘+B */}
|
|
173
|
-
{ch.shortcut}
|
|
174
|
-
</div>
|
|
175
|
-
</DropdownMenu.CheckboxItem>
|
|
176
|
-
))}
|
|
177
|
-
{/*
|
|
178
|
-
<DropdownMenu.CheckboxItem
|
|
179
|
-
className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
|
|
180
|
-
checked={urlsChecked}
|
|
181
|
-
onCheckedChange={setUrlsChecked}
|
|
182
|
-
>
|
|
183
|
-
<DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
|
|
184
|
-
<svg
|
|
185
|
-
aria-label="Check Mark"
|
|
186
|
-
stroke="currentColor"
|
|
187
|
-
fill="currentColor"
|
|
188
|
-
strokeWidth="0"
|
|
189
|
-
viewBox="0 0 512 512"
|
|
190
|
-
height="0.60em"
|
|
191
|
-
width="0.60em"
|
|
192
|
-
>
|
|
193
|
-
<path d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"></path>
|
|
194
|
-
</svg>{" "}
|
|
195
|
-
</DropdownMenu.ItemIndicator>
|
|
196
|
-
Show Full URLs
|
|
197
|
-
</DropdownMenu.CheckboxItem> */}
|
|
198
|
-
|
|
199
|
-
<DropdownMenu.Separator className="m-[5px] h-[1px] bg-violet-6" />
|
|
200
|
-
|
|
201
|
-
<DropdownMenu.Label className="pl-[25px] text-xs leading-[25px] text-mauve-11">
|
|
202
|
-
People
|
|
203
|
-
</DropdownMenu.Label>
|
|
204
|
-
<DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
|
|
205
|
-
<DropdownMenu.RadioItem
|
|
206
|
-
className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
|
|
207
|
-
value="pedro"
|
|
208
|
-
>
|
|
209
|
-
<DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
|
|
210
|
-
<svg
|
|
211
|
-
aria-label="Filled Dot"
|
|
212
|
-
width="15"
|
|
213
|
-
height="15"
|
|
214
|
-
viewBox="0 0 15 15"
|
|
215
|
-
fill="none"
|
|
216
|
-
>
|
|
217
|
-
<path
|
|
218
|
-
d="M9.875 7.5C9.875 8.81168 8.81168 9.875 7.5 9.875C6.18832 9.875 5.125 8.81168 5.125 7.5C5.125 6.18832 6.18832 5.125 7.5 5.125C8.81168 5.125 9.875 6.18832 9.875 7.5Z"
|
|
219
|
-
fill="currentColor"
|
|
220
|
-
></path>
|
|
221
|
-
</svg>{" "}
|
|
222
|
-
</DropdownMenu.ItemIndicator>
|
|
223
|
-
Pedro Duarte
|
|
224
|
-
</DropdownMenu.RadioItem>
|
|
225
|
-
<DropdownMenu.RadioItem
|
|
226
|
-
className="relative flex h-[25px] select-none items-center rounded-inner px-[5px] pl-[25px] text-[13px] leading-none text-violet-11 outline-none data-[disabled]:pointer-events-none data-[highlighted]:bg-violet-9 data-[disabled]:text-mauve-8 data-[highlighted]:text-violet-1"
|
|
227
|
-
value="colm"
|
|
228
|
-
>
|
|
229
|
-
<DropdownMenu.ItemIndicator className="absolute left-0 inline-flex w-[25px] items-center justify-center">
|
|
230
|
-
<svg
|
|
231
|
-
aria-label="Filled Dot"
|
|
232
|
-
width="15"
|
|
233
|
-
height="15"
|
|
234
|
-
viewBox="0 0 15 15"
|
|
235
|
-
fill="none"
|
|
236
|
-
>
|
|
237
|
-
<path
|
|
238
|
-
d="M9.875 7.5C9.875 8.81168 8.81168 9.875 7.5 9.875C6.18832 9.875 5.125 8.81168 5.125 7.5C5.125 6.18832 6.18832 5.125 7.5 5.125C8.81168 5.125 9.875 6.18832 9.875 7.5Z"
|
|
239
|
-
fill="currentColor"
|
|
240
|
-
></path>
|
|
241
|
-
</svg>{" "}
|
|
242
|
-
</DropdownMenu.ItemIndicator>
|
|
243
|
-
Colm Tuite
|
|
244
|
-
</DropdownMenu.RadioItem>
|
|
245
|
-
</DropdownMenu.RadioGroup>
|
|
246
|
-
|
|
247
|
-
<DropdownMenu.Arrow className="fill-white" />
|
|
248
|
-
</DropdownMenu.Content>
|
|
249
|
-
</DropdownMenu.Portal>
|
|
250
|
-
</DropdownMenu.Root>
|
|
251
|
-
// <Command label="Command Menu" className="bg-gray-100 drop-shadow-lg w-fit rounded">
|
|
252
|
-
// <Command.Input className="rounded-t-inner" />
|
|
253
|
-
// <Command.List className="p-1">
|
|
254
|
-
// <Command.Empty>No results found.</Command.Empty>
|
|
255
|
-
|
|
256
|
-
// <Command.Group heading="Letters">
|
|
257
|
-
// <Command.Item className="hover:bg-gray-200 p-1 px-2 text-sm rounded">a</Command.Item>
|
|
258
|
-
// <Command.Item className="hover:bg-gray-200 p-1 px-2 text-sm rounded">b</Command.Item>
|
|
259
|
-
// <Command.Separator />
|
|
260
|
-
// <Command.Item className="hover:bg-gray-200 p-1 px-2 text-sm rounded">c</Command.Item>
|
|
261
|
-
// </Command.Group>
|
|
262
|
-
|
|
263
|
-
// <Command.Item className="hover:bg-gray-200 p-1 px-2 text-sm rounded">Apple</Command.Item>
|
|
264
|
-
// </Command.List>
|
|
265
|
-
// </Command>
|
|
266
|
-
)
|
|
267
|
-
}
|
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef, useState, ReactElement, FC } from "react"
|
|
2
|
-
import clsx from "clsx"
|
|
3
|
-
|
|
4
|
-
type THawaToolTip = {
|
|
5
|
-
children?: ReactElement
|
|
6
|
-
content?: string
|
|
7
|
-
btnHovered?: any
|
|
8
|
-
buttonRef?: any
|
|
9
|
-
direction?: "rtl" | "ltr"
|
|
10
|
-
size?: "normal" | "small" | "large"
|
|
11
|
-
position?:
|
|
12
|
-
| "left-top"
|
|
13
|
-
| "left-bottom"
|
|
14
|
-
| "right-top"
|
|
15
|
-
| "right-bottom"
|
|
16
|
-
| "top-right"
|
|
17
|
-
| "top-left"
|
|
18
|
-
| "bottom-right"
|
|
19
|
-
| "bottom-left"
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
export const HawaTooltip: FC<THawaToolTip> = ({
|
|
23
|
-
children,
|
|
24
|
-
content,
|
|
25
|
-
size = "normal",
|
|
26
|
-
position = "top-right",
|
|
27
|
-
direction = "ltr",
|
|
28
|
-
}) => {
|
|
29
|
-
const [hovered, setHovered] = useState(false)
|
|
30
|
-
|
|
31
|
-
const childrenRef = useRef(null)
|
|
32
|
-
const [childrenHeight, setChildrenHeight] = useState(null)
|
|
33
|
-
const [childrenWidth, setChildrenWidth] = useState(null)
|
|
34
|
-
|
|
35
|
-
const tooltipRef = useRef(null)
|
|
36
|
-
const [tooltipWidth, setTooltipWidth] = useState(null)
|
|
37
|
-
const [tooltipHeight, setTooltipHeight] = useState(null)
|
|
38
|
-
|
|
39
|
-
useEffect(() => {
|
|
40
|
-
setTooltipHeight(tooltipRef.current?.getBoundingClientRect().height)
|
|
41
|
-
setTooltipWidth(tooltipRef.current?.getBoundingClientRect().width)
|
|
42
|
-
setChildrenHeight(childrenRef.current?.getBoundingClientRect().height)
|
|
43
|
-
setChildrenWidth(childrenRef.current?.getBoundingClientRect().width)
|
|
44
|
-
})
|
|
45
|
-
|
|
46
|
-
let defaultTooltipStyles =
|
|
47
|
-
"absolute z-10 rounded bg-gray-100 text-center text-sm font-medium text-foreground dark:text-white shadow-sm transition-all duration-300 dark:bg-gray-700"
|
|
48
|
-
let sizeStyles = {
|
|
49
|
-
normal: "py-2 px-3 leading-2",
|
|
50
|
-
small: "py-2 px-2 text-[10px] leading-tight",
|
|
51
|
-
large: "py-2 px-2 text-lg leading-tight",
|
|
52
|
-
}
|
|
53
|
-
let tooltipCoordinates
|
|
54
|
-
let spacing = 5
|
|
55
|
-
switch (position) {
|
|
56
|
-
case "top-right":
|
|
57
|
-
tooltipCoordinates =
|
|
58
|
-
direction === "rtl"
|
|
59
|
-
? `${tooltipWidth - childrenWidth}px, -${
|
|
60
|
-
tooltipHeight + childrenHeight + spacing
|
|
61
|
-
}px`
|
|
62
|
-
: `0px, -${tooltipHeight + childrenHeight + spacing}px`
|
|
63
|
-
break
|
|
64
|
-
case "top-left":
|
|
65
|
-
tooltipCoordinates =
|
|
66
|
-
direction === "rtl"
|
|
67
|
-
? `${0}px, -${tooltipHeight + childrenHeight + spacing}px`
|
|
68
|
-
: `-${tooltipWidth - childrenWidth}px, -${
|
|
69
|
-
tooltipHeight + childrenHeight + spacing
|
|
70
|
-
}px`
|
|
71
|
-
break
|
|
72
|
-
case "bottom-right":
|
|
73
|
-
tooltipCoordinates =
|
|
74
|
-
direction === "rtl"
|
|
75
|
-
? `${tooltipWidth - childrenWidth}px, ${spacing}px`
|
|
76
|
-
: `-${0}px, ${spacing}px`
|
|
77
|
-
break
|
|
78
|
-
case "bottom-left":
|
|
79
|
-
tooltipCoordinates =
|
|
80
|
-
direction === "rtl"
|
|
81
|
-
? `0px, ${spacing}px`
|
|
82
|
-
: `-${tooltipWidth - childrenWidth}px,${spacing}px`
|
|
83
|
-
break
|
|
84
|
-
case "right-bottom":
|
|
85
|
-
tooltipCoordinates =
|
|
86
|
-
direction === "rtl"
|
|
87
|
-
? `${tooltipWidth + spacing}px, -${childrenHeight}px`
|
|
88
|
-
: `${childrenWidth + spacing}px, -${childrenHeight}px`
|
|
89
|
-
break
|
|
90
|
-
case "right-top":
|
|
91
|
-
tooltipCoordinates =
|
|
92
|
-
direction === "rtl"
|
|
93
|
-
? `${tooltipWidth + spacing}px, -${tooltipHeight}px`
|
|
94
|
-
: `${childrenWidth + spacing}px, -${tooltipHeight}px`
|
|
95
|
-
break
|
|
96
|
-
case "left-bottom":
|
|
97
|
-
tooltipCoordinates =
|
|
98
|
-
direction === "rtl"
|
|
99
|
-
? `-${childrenWidth + spacing}px, -${childrenHeight}px`
|
|
100
|
-
: `-${tooltipWidth + spacing}px, -${childrenHeight}px`
|
|
101
|
-
break
|
|
102
|
-
case "left-top":
|
|
103
|
-
tooltipCoordinates =
|
|
104
|
-
direction === "rtl"
|
|
105
|
-
? `-${childrenWidth + spacing}px, -${tooltipHeight}px`
|
|
106
|
-
: `-${tooltipWidth + spacing}px, -${tooltipHeight}px`
|
|
107
|
-
break
|
|
108
|
-
|
|
109
|
-
default:
|
|
110
|
-
tooltipCoordinates = `-${tooltipWidth / 2}px, -${
|
|
111
|
-
childrenHeight + tooltipHeight / 2
|
|
112
|
-
}px`
|
|
113
|
-
|
|
114
|
-
break
|
|
115
|
-
}
|
|
116
|
-
return (
|
|
117
|
-
<div
|
|
118
|
-
onMouseEnter={() => setHovered(true)}
|
|
119
|
-
onMouseLeave={() => setHovered(false)}
|
|
120
|
-
>
|
|
121
|
-
<div ref={childrenRef}>{children}</div>
|
|
122
|
-
<div
|
|
123
|
-
ref={tooltipRef}
|
|
124
|
-
style={{
|
|
125
|
-
position: "absolute",
|
|
126
|
-
width: "max-content",
|
|
127
|
-
transform: `translate(${tooltipCoordinates})`,
|
|
128
|
-
opacity: hovered ? "1" : "0",
|
|
129
|
-
maxWidth: "200px",
|
|
130
|
-
}}
|
|
131
|
-
className={clsx(defaultTooltipStyles, sizeStyles[size])}
|
|
132
|
-
>
|
|
133
|
-
{content}
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
|
-
)
|
|
137
|
-
}
|