@dxos/react-ui 0.8.4-main.66e292d → 0.8.4-main.69d29f4

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.
Files changed (149) hide show
  1. package/dist/lib/browser/chunk-CEKVHJ27.mjs +774 -0
  2. package/dist/lib/browser/chunk-CEKVHJ27.mjs.map +7 -0
  3. package/dist/lib/browser/index.mjs +3065 -66
  4. package/dist/lib/browser/index.mjs.map +4 -4
  5. package/dist/lib/browser/meta.json +1 -1
  6. package/dist/lib/browser/testing/index.mjs +31 -43
  7. package/dist/lib/browser/testing/index.mjs.map +3 -3
  8. package/dist/lib/node-esm/chunk-2NHEX4AD.mjs +776 -0
  9. package/dist/lib/node-esm/chunk-2NHEX4AD.mjs.map +7 -0
  10. package/dist/lib/node-esm/index.mjs +3065 -66
  11. package/dist/lib/node-esm/index.mjs.map +4 -4
  12. package/dist/lib/node-esm/meta.json +1 -1
  13. package/dist/lib/node-esm/testing/index.mjs +31 -43
  14. package/dist/lib/node-esm/testing/index.mjs.map +3 -3
  15. package/dist/types/src/components/Button/Button.d.ts +1 -1
  16. package/dist/types/src/components/Button/Button.d.ts.map +1 -1
  17. package/dist/types/src/components/Button/IconButton.d.ts +2 -1
  18. package/dist/types/src/components/Button/IconButton.d.ts.map +1 -1
  19. package/dist/types/src/components/Button/ToggleGroup.d.ts +4 -4
  20. package/dist/types/src/components/Button/ToggleGroup.stories.d.ts +4 -4
  21. package/dist/types/src/components/DensityProvider/DensityProvider.d.ts +1 -1
  22. package/dist/types/src/components/DensityProvider/DensityProvider.d.ts.map +1 -1
  23. package/dist/types/src/components/Dialog/Dialog.d.ts +18 -9
  24. package/dist/types/src/components/Dialog/Dialog.d.ts.map +1 -1
  25. package/dist/types/src/components/Dialog/Dialog.stories.d.ts +7 -5
  26. package/dist/types/src/components/Dialog/Dialog.stories.d.ts.map +1 -1
  27. package/dist/types/src/components/ElevationProvider/ElevationProvider.d.ts +1 -1
  28. package/dist/types/src/components/ElevationProvider/ElevationProvider.d.ts.map +1 -1
  29. package/dist/types/src/components/Icon/Icon.d.ts +1 -1
  30. package/dist/types/src/components/Icon/Icon.d.ts.map +1 -1
  31. package/dist/types/src/components/Input/Input.d.ts +5 -2
  32. package/dist/types/src/components/Input/Input.d.ts.map +1 -1
  33. package/dist/types/src/components/Input/Input.stories.d.ts +1 -1
  34. package/dist/types/src/components/Input/Input.stories.d.ts.map +1 -1
  35. package/dist/types/src/components/List/List.d.ts +1 -1
  36. package/dist/types/src/components/List/List.d.ts.map +1 -1
  37. package/dist/types/src/components/List/List.stories.d.ts.map +1 -1
  38. package/dist/types/src/components/{Menus → Menu}/ContextMenu.d.ts +6 -6
  39. package/dist/types/src/components/Menu/ContextMenu.d.ts.map +1 -0
  40. package/dist/types/src/components/Menu/ContextMenu.stories.d.ts.map +1 -0
  41. package/dist/types/src/components/{Menus → Menu}/DropdownMenu.d.ts +1 -1
  42. package/dist/types/src/components/Menu/DropdownMenu.d.ts.map +1 -0
  43. package/dist/types/src/components/Menu/DropdownMenu.stories.d.ts.map +1 -0
  44. package/dist/types/src/components/Menu/index.d.ts.map +1 -0
  45. package/dist/types/src/components/Message/Message.d.ts +1 -1
  46. package/dist/types/src/components/Message/Message.d.ts.map +1 -1
  47. package/dist/types/src/components/Message/Message.stories.d.ts +1 -1
  48. package/dist/types/src/components/Message/Message.stories.d.ts.map +1 -1
  49. package/dist/types/src/components/Popover/Popover.d.ts +1 -1
  50. package/dist/types/src/components/Popover/Popover.d.ts.map +1 -1
  51. package/dist/types/src/components/ScrollArea/ScrollArea.d.ts +9 -7
  52. package/dist/types/src/components/ScrollArea/ScrollArea.d.ts.map +1 -1
  53. package/dist/types/src/components/ScrollArea/ScrollArea.stories.d.ts +4 -0
  54. package/dist/types/src/components/ScrollArea/ScrollArea.stories.d.ts.map +1 -1
  55. package/dist/types/src/components/ScrollContainer/ScrollContainer.d.ts +4 -2
  56. package/dist/types/src/components/ScrollContainer/ScrollContainer.d.ts.map +1 -1
  57. package/dist/types/src/components/ScrollContainer/ScrollContainer.stories.d.ts +2 -1
  58. package/dist/types/src/components/ScrollContainer/ScrollContainer.stories.d.ts.map +1 -1
  59. package/dist/types/src/components/Select/Select.d.ts +9 -9
  60. package/dist/types/src/components/Separator/Separator.d.ts +1 -1
  61. package/dist/types/src/components/Tag/Tag.d.ts +1 -1
  62. package/dist/types/src/components/Tag/Tag.d.ts.map +1 -1
  63. package/dist/types/src/components/ThemeProvider/ThemeProvider.d.ts +1 -2
  64. package/dist/types/src/components/ThemeProvider/ThemeProvider.d.ts.map +1 -1
  65. package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts +1 -8
  66. package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts.map +1 -1
  67. package/dist/types/src/components/ThemeProvider/index.d.ts +2 -1
  68. package/dist/types/src/components/ThemeProvider/index.d.ts.map +1 -1
  69. package/dist/types/src/components/Toast/Toast.d.ts +4 -4
  70. package/dist/types/src/components/Toolbar/Toolbar.d.ts +10 -10
  71. package/dist/types/src/components/Toolbar/Toolbar.d.ts.map +1 -1
  72. package/dist/types/src/components/Tooltip/Tooltip.d.ts.map +1 -1
  73. package/dist/types/src/components/index.d.ts +1 -1
  74. package/dist/types/src/components/index.d.ts.map +1 -1
  75. package/dist/types/src/hooks/useDensityContext.d.ts +1 -1
  76. package/dist/types/src/hooks/useDensityContext.d.ts.map +1 -1
  77. package/dist/types/src/hooks/useElevationContext.d.ts +1 -1
  78. package/dist/types/src/hooks/useElevationContext.d.ts.map +1 -1
  79. package/dist/types/src/index.d.ts +1 -1
  80. package/dist/types/src/index.d.ts.map +1 -1
  81. package/dist/types/src/testing/decorators/withLayout.d.ts +3 -3
  82. package/dist/types/src/testing/decorators/withLayout.d.ts.map +1 -1
  83. package/dist/types/src/testing/decorators/withLayoutVariants.d.ts +1 -1
  84. package/dist/types/src/testing/decorators/withLayoutVariants.d.ts.map +1 -1
  85. package/dist/types/src/testing/decorators/withTheme.d.ts.map +1 -1
  86. package/dist/types/src/util/index.d.ts +1 -2
  87. package/dist/types/src/util/index.d.ts.map +1 -1
  88. package/dist/types/tsconfig.tsbuildinfo +1 -1
  89. package/package.json +31 -26
  90. package/src/components/Avatars/Avatar.stories.tsx +2 -2
  91. package/src/components/Avatars/Avatar.tsx +1 -1
  92. package/src/components/Button/Button.tsx +1 -1
  93. package/src/components/Button/IconButton.tsx +8 -3
  94. package/src/components/Clipboard/CopyButton.tsx +3 -3
  95. package/src/components/DensityProvider/DensityProvider.tsx +1 -1
  96. package/src/components/Dialog/Dialog.stories.tsx +47 -17
  97. package/src/components/Dialog/Dialog.tsx +140 -40
  98. package/src/components/ElevationProvider/ElevationProvider.tsx +1 -1
  99. package/src/components/Icon/Icon.stories.tsx +1 -1
  100. package/src/components/Icon/Icon.tsx +1 -1
  101. package/src/components/Input/Input.stories.tsx +2 -2
  102. package/src/components/Input/Input.tsx +13 -4
  103. package/src/components/List/List.stories.tsx +16 -12
  104. package/src/components/List/List.tsx +1 -1
  105. package/src/components/{Menus → Menu}/DropdownMenu.tsx +57 -55
  106. package/src/components/Message/Message.stories.tsx +1 -1
  107. package/src/components/Message/Message.tsx +30 -5
  108. package/src/components/Popover/Popover.tsx +35 -33
  109. package/src/components/ScrollArea/ScrollArea.stories.tsx +53 -3
  110. package/src/components/ScrollArea/ScrollArea.tsx +50 -4
  111. package/src/components/ScrollContainer/ScrollContainer.stories.tsx +2 -1
  112. package/src/components/ScrollContainer/ScrollContainer.tsx +90 -88
  113. package/src/components/Tag/Tag.stories.tsx +2 -2
  114. package/src/components/Tag/Tag.tsx +1 -1
  115. package/src/components/ThemeProvider/ThemeProvider.tsx +1 -3
  116. package/src/components/ThemeProvider/TranslationsProvider.tsx +1 -16
  117. package/src/components/ThemeProvider/index.ts +3 -3
  118. package/src/components/Toolbar/Toolbar.tsx +23 -8
  119. package/src/components/Tooltip/Tooltip.tsx +22 -20
  120. package/src/components/index.ts +1 -1
  121. package/src/hooks/useDensityContext.ts +1 -1
  122. package/src/hooks/useElevationContext.ts +1 -1
  123. package/src/index.ts +1 -1
  124. package/src/testing/decorators/withLayout.tsx +22 -15
  125. package/src/testing/decorators/withLayoutVariants.tsx +3 -3
  126. package/src/testing/decorators/withTheme.tsx +3 -2
  127. package/src/util/index.ts +2 -2
  128. package/dist/lib/browser/chunk-N5GDJTT2.mjs +0 -4707
  129. package/dist/lib/browser/chunk-N5GDJTT2.mjs.map +0 -7
  130. package/dist/lib/node-esm/chunk-SP7VQH72.mjs +0 -4709
  131. package/dist/lib/node-esm/chunk-SP7VQH72.mjs.map +0 -7
  132. package/dist/types/src/components/Menus/ContextMenu.d.ts.map +0 -1
  133. package/dist/types/src/components/Menus/ContextMenu.stories.d.ts.map +0 -1
  134. package/dist/types/src/components/Menus/DropdownMenu.d.ts.map +0 -1
  135. package/dist/types/src/components/Menus/DropdownMenu.stories.d.ts.map +0 -1
  136. package/dist/types/src/components/Menus/index.d.ts.map +0 -1
  137. package/dist/types/src/util/ThemedClassName.d.ts +0 -5
  138. package/dist/types/src/util/ThemedClassName.d.ts.map +0 -1
  139. package/dist/types/src/util/domino.d.ts +0 -18
  140. package/dist/types/src/util/domino.d.ts.map +0 -1
  141. package/src/util/ThemedClassName.ts +0 -7
  142. package/src/util/domino.ts +0 -53
  143. /package/dist/types/src/components/{Menus → Menu}/ContextMenu.stories.d.ts +0 -0
  144. /package/dist/types/src/components/{Menus → Menu}/DropdownMenu.stories.d.ts +0 -0
  145. /package/dist/types/src/components/{Menus → Menu}/index.d.ts +0 -0
  146. /package/src/components/{Menus → Menu}/ContextMenu.stories.tsx +0 -0
  147. /package/src/components/{Menus → Menu}/ContextMenu.tsx +0 -0
  148. /package/src/components/{Menus → Menu}/DropdownMenu.stories.tsx +0 -0
  149. /package/src/components/{Menus → Menu}/index.ts +0 -0
@@ -0,0 +1,774 @@
1
+ // src/hooks/useElevationContext.ts
2
+ import { useContext as useContext3 } from "react";
3
+
4
+ // src/hooks/useThemeContext.ts
5
+ import { useContext } from "react";
6
+ import { raise } from "@dxos/debug";
7
+ var useThemeContext = () => useContext(ThemeContext) ?? raise(new Error("Missing ThemeContext"));
8
+
9
+ // src/hooks/useSafeArea.ts
10
+ import { useCallback, useState } from "react";
11
+ import { useViewportResize } from "@dxos/react-hooks";
12
+ var initialSafeArea = {
13
+ top: NaN,
14
+ right: NaN,
15
+ bottom: NaN,
16
+ left: NaN
17
+ };
18
+ var useSafeArea = () => {
19
+ const [padding, setPadding] = useState(initialSafeArea);
20
+ const handleResize = useCallback(() => {
21
+ setPadding({
22
+ top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")),
23
+ right: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-right")),
24
+ bottom: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-bottom")),
25
+ left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-left"))
26
+ });
27
+ }, []);
28
+ useViewportResize(handleResize);
29
+ return padding;
30
+ };
31
+
32
+ // src/components/ThemeProvider/TranslationsProvider.tsx
33
+ import { enUS as dtLocaleEnUs } from "date-fns/locale";
34
+ import i18Next from "i18next";
35
+ import React, { Suspense, createContext, useContext as useContext2, useEffect, useState as useState2 } from "react";
36
+ import { initReactI18next, useTranslation as useI18NextTranslation } from "react-i18next";
37
+ var initialLng = "en-US";
38
+ var initialNs = "dxos-common";
39
+ var initialDtLocale = dtLocaleEnUs;
40
+ var resources = {
41
+ [initialLng]: {
42
+ [initialNs]: {
43
+ "loading translations": "Loading translations\u2026"
44
+ }
45
+ }
46
+ };
47
+ void i18Next.use(initReactI18next).init({
48
+ resources,
49
+ lng: initialLng,
50
+ defaultNS: initialNs,
51
+ interpolation: {
52
+ escapeValue: false
53
+ }
54
+ });
55
+ var TranslationsContext = /* @__PURE__ */ createContext({
56
+ appNs: initialNs,
57
+ dtLocale: initialDtLocale
58
+ });
59
+ var useTranslation = (...args) => {
60
+ const result = useI18NextTranslation(...args);
61
+ const { dtLocale } = useContext2(TranslationsContext);
62
+ return {
63
+ ...result,
64
+ dtLocale
65
+ };
66
+ };
67
+ var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
68
+ const [loaded, setLoaded] = useState2(false);
69
+ useEffect(() => {
70
+ setLoaded(false);
71
+ if (resourceExtensions && resourceExtensions.length) {
72
+ resourceExtensions.forEach((resource) => {
73
+ Object.keys(resource).forEach((language) => {
74
+ Object.keys(resource[language]).forEach((ns) => {
75
+ i18Next.addResourceBundle(language, ns, resource[language][ns]);
76
+ });
77
+ });
78
+ });
79
+ }
80
+ setLoaded(true);
81
+ }, [
82
+ resourceExtensions
83
+ ]);
84
+ return /* @__PURE__ */ React.createElement(TranslationsContext.Provider, {
85
+ value: {
86
+ appNs: appNs ?? initialNs,
87
+ dtLocale: dtLocale ?? initialDtLocale
88
+ }
89
+ }, /* @__PURE__ */ React.createElement(Suspense, {
90
+ fallback
91
+ }, loaded ? children : fallback));
92
+ };
93
+
94
+ // src/components/Tooltip/Tooltip.tsx
95
+ import { composeEventHandlers } from "@radix-ui/primitive";
96
+ import { useComposedRefs } from "@radix-ui/react-compose-refs";
97
+ import { createContextScope } from "@radix-ui/react-context";
98
+ import { DismissableLayer } from "@radix-ui/react-dismissable-layer";
99
+ import { useId } from "@radix-ui/react-id";
100
+ import * as PopperPrimitive from "@radix-ui/react-popper";
101
+ import { createPopperScope } from "@radix-ui/react-popper";
102
+ import { Portal as PortalPrimitive } from "@radix-ui/react-portal";
103
+ import { Presence } from "@radix-ui/react-presence";
104
+ import { Primitive } from "@radix-ui/react-primitive";
105
+ import { Slottable } from "@radix-ui/react-slot";
106
+ import { useControllableState } from "@radix-ui/react-use-controllable-state";
107
+ import * as VisuallyHiddenPrimitive from "@radix-ui/react-visually-hidden";
108
+ import React2, { forwardRef, useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef, useState as useState3 } from "react";
109
+ var [createTooltipContext, createTooltipScope] = createContextScope("Tooltip", [
110
+ createPopperScope
111
+ ]);
112
+ var usePopperScope = createPopperScope();
113
+ var DEFAULT_DELAY_DURATION = 700;
114
+ var TOOLTIP_OPEN = "tooltip.open";
115
+ var TOOLTIP_NAME = "Tooltip";
116
+ var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
117
+ var TooltipProvider = (props) => {
118
+ const { __scopeTooltip, children, open: openProp, defaultOpen = false, onOpenChange, disableHoverableContent = false, delayDuration = DEFAULT_DELAY_DURATION, skipDelayDuration = 300 } = props;
119
+ const isOpenDelayedRef = useRef(true);
120
+ const isPointerInTransitRef = useRef(false);
121
+ const skipDelayTimerRef = useRef(0);
122
+ useEffect2(() => {
123
+ const skipDelayTimer = skipDelayTimerRef.current;
124
+ return () => window.clearTimeout(skipDelayTimer);
125
+ }, []);
126
+ const popperScope = usePopperScope(__scopeTooltip);
127
+ const [trigger, setTrigger] = useState3(null);
128
+ const [content, setContent] = useState3("");
129
+ const [side, setSide] = useState3(void 0);
130
+ const triggerRef = useRef(trigger);
131
+ const handleTriggerChange = useCallback2((nextTrigger) => {
132
+ setTrigger(nextTrigger);
133
+ triggerRef.current = nextTrigger;
134
+ setContent(nextTrigger?.getAttribute("data-tooltip-content") ?? "");
135
+ setSide(nextTrigger?.getAttribute("data-tooltip-side") ?? void 0);
136
+ }, []);
137
+ const contentId = useId();
138
+ const openTimerRef = useRef(0);
139
+ const wasOpenDelayedRef = useRef(false);
140
+ const handleOpenChange = useCallback2((open2) => {
141
+ if (open2) {
142
+ window.clearTimeout(skipDelayTimerRef.current);
143
+ isOpenDelayedRef.current = false;
144
+ document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
145
+ } else {
146
+ window.clearTimeout(skipDelayTimerRef.current);
147
+ skipDelayTimerRef.current = window.setTimeout(() => isOpenDelayedRef.current = true, skipDelayDuration);
148
+ }
149
+ onOpenChange?.(open2);
150
+ }, [
151
+ skipDelayDuration,
152
+ onOpenChange
153
+ ]);
154
+ const [open = false, setOpen] = useControllableState({
155
+ prop: openProp,
156
+ defaultProp: defaultOpen,
157
+ onChange: handleOpenChange
158
+ });
159
+ const stateAttribute = useMemo(() => {
160
+ return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
161
+ }, [
162
+ open
163
+ ]);
164
+ const handleOpen = useCallback2(() => {
165
+ window.clearTimeout(openTimerRef.current);
166
+ openTimerRef.current = 0;
167
+ wasOpenDelayedRef.current = false;
168
+ setOpen(true);
169
+ }, [
170
+ setOpen
171
+ ]);
172
+ const handleClose = useCallback2(() => {
173
+ window.clearTimeout(openTimerRef.current);
174
+ openTimerRef.current = 0;
175
+ setOpen(false);
176
+ }, [
177
+ setOpen
178
+ ]);
179
+ const handleDelayedOpen = useCallback2(() => {
180
+ window.clearTimeout(openTimerRef.current);
181
+ openTimerRef.current = window.setTimeout(() => {
182
+ wasOpenDelayedRef.current = true;
183
+ setOpen(true);
184
+ openTimerRef.current = 0;
185
+ }, delayDuration);
186
+ }, [
187
+ delayDuration,
188
+ setOpen
189
+ ]);
190
+ useEffect2(() => {
191
+ return () => {
192
+ if (openTimerRef.current) {
193
+ window.clearTimeout(openTimerRef.current);
194
+ openTimerRef.current = 0;
195
+ }
196
+ };
197
+ }, []);
198
+ const { tx } = useThemeContext();
199
+ const elevation = useElevationContext();
200
+ return /* @__PURE__ */ React2.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ React2.createElement(TooltipContextProvider, {
201
+ scope: __scopeTooltip,
202
+ contentId,
203
+ open,
204
+ stateAttribute,
205
+ trigger,
206
+ onTriggerChange: handleTriggerChange,
207
+ onTriggerEnter: useCallback2(() => {
208
+ if (isOpenDelayedRef.current) {
209
+ handleDelayedOpen();
210
+ } else {
211
+ handleOpen();
212
+ }
213
+ }, [
214
+ isOpenDelayedRef,
215
+ handleDelayedOpen,
216
+ handleOpen
217
+ ]),
218
+ onTriggerLeave: useCallback2(() => {
219
+ if (disableHoverableContent) {
220
+ handleClose();
221
+ } else {
222
+ window.clearTimeout(openTimerRef.current);
223
+ openTimerRef.current = 0;
224
+ }
225
+ }, [
226
+ handleClose,
227
+ disableHoverableContent
228
+ ]),
229
+ onOpen: handleOpen,
230
+ onClose: handleClose,
231
+ disableHoverableContent,
232
+ isPointerInTransitRef,
233
+ onPointerInTransitChange: useCallback2((inTransit) => {
234
+ isPointerInTransitRef.current = inTransit;
235
+ }, [])
236
+ }, /* @__PURE__ */ React2.createElement(TooltipContent, {
237
+ side,
238
+ className: tx("tooltip.content", "tooltip", {
239
+ elevation
240
+ })
241
+ }, content, /* @__PURE__ */ React2.createElement(TooltipArrow, {
242
+ className: tx("tooltip.arrow", "tooltip__arrow")
243
+ })), /* @__PURE__ */ React2.createElement(TooltipVirtualTrigger, {
244
+ virtualRef: triggerRef
245
+ }), children));
246
+ };
247
+ TooltipProvider.displayName = TOOLTIP_NAME;
248
+ var TooltipVirtualTrigger = ({ virtualRef, __scopeTooltip }) => {
249
+ const popperScope = usePopperScope(__scopeTooltip);
250
+ return /* @__PURE__ */ React2.createElement(PopperPrimitive.Anchor, {
251
+ asChild: true,
252
+ ...popperScope,
253
+ virtualRef
254
+ });
255
+ };
256
+ var TRIGGER_NAME = "TooltipTrigger";
257
+ var TooltipTrigger = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
258
+ const {
259
+ __scopeTooltip,
260
+ onInteract,
261
+ // TODO(thure): Pass `delayDuration` into the context.
262
+ delayDuration: _delayDuration,
263
+ side,
264
+ content,
265
+ ...triggerProps
266
+ } = props;
267
+ const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
268
+ const ref = useRef(null);
269
+ const composedRefs = useComposedRefs(forwardedRef, ref);
270
+ const isPointerDownRef = useRef(false);
271
+ const hasPointerMoveOpenedRef = useRef(false);
272
+ const handlePointerUp = useCallback2(() => isPointerDownRef.current = false, []);
273
+ useEffect2(() => {
274
+ return () => document.removeEventListener("pointerup", handlePointerUp);
275
+ }, [
276
+ handlePointerUp
277
+ ]);
278
+ return /* @__PURE__ */ React2.createElement(Primitive.button, {
279
+ // We purposefully avoid adding `type=button` here because tooltip triggers are also
280
+ // commonly anchors and the anchor `type` attribute signifies MIME type.
281
+ "aria-describedby": context.open ? context.contentId : void 0,
282
+ "data-state": context.stateAttribute,
283
+ "data-tooltip-content": content,
284
+ "data-tooltip-side": side,
285
+ ...triggerProps,
286
+ ref: composedRefs,
287
+ onPointerMove: composeEventHandlers(props.onPointerMove, (event) => {
288
+ if (event.pointerType === "touch") {
289
+ return;
290
+ }
291
+ if (!hasPointerMoveOpenedRef.current && !context.isPointerInTransitRef.current) {
292
+ onInteract?.(event);
293
+ if (event.defaultPrevented) {
294
+ return;
295
+ }
296
+ context.onTriggerChange(ref.current);
297
+ context.onTriggerEnter();
298
+ hasPointerMoveOpenedRef.current = true;
299
+ }
300
+ }),
301
+ onPointerLeave: composeEventHandlers(props.onPointerLeave, () => {
302
+ context.onTriggerLeave();
303
+ hasPointerMoveOpenedRef.current = false;
304
+ }),
305
+ onPointerDown: composeEventHandlers(props.onPointerDown, () => {
306
+ if (context.open) {
307
+ context.onClose();
308
+ }
309
+ isPointerDownRef.current = true;
310
+ document.addEventListener("pointerup", handlePointerUp, {
311
+ once: true
312
+ });
313
+ }),
314
+ onFocus: props.onFocus,
315
+ onBlur: composeEventHandlers(props.onBlur, context.onClose),
316
+ onClick: composeEventHandlers(props.onClick, context.onClose)
317
+ });
318
+ });
319
+ TooltipTrigger.displayName = TRIGGER_NAME;
320
+ var PORTAL_NAME = "TooltipPortal";
321
+ var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
322
+ forceMount: void 0
323
+ });
324
+ var TooltipPortal = (props) => {
325
+ const { __scopeTooltip, forceMount, children, container } = props;
326
+ const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
327
+ return /* @__PURE__ */ React2.createElement(PortalProvider, {
328
+ scope: __scopeTooltip,
329
+ forceMount
330
+ }, /* @__PURE__ */ React2.createElement(Presence, {
331
+ present: forceMount || context.open
332
+ }, /* @__PURE__ */ React2.createElement(PortalPrimitive, {
333
+ asChild: true,
334
+ container
335
+ }, children)));
336
+ };
337
+ TooltipPortal.displayName = PORTAL_NAME;
338
+ var CONTENT_NAME = "TooltipContent";
339
+ var TooltipContent = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
340
+ const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
341
+ const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
342
+ const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
343
+ return /* @__PURE__ */ React2.createElement(Presence, {
344
+ present: forceMount || context.open
345
+ }, context.disableHoverableContent ? /* @__PURE__ */ React2.createElement(TooltipContentImpl, {
346
+ side,
347
+ ...contentProps,
348
+ ref: forwardedRef
349
+ }) : /* @__PURE__ */ React2.createElement(TooltipContentHoverable, {
350
+ side,
351
+ ...contentProps,
352
+ ref: forwardedRef
353
+ }));
354
+ });
355
+ var TooltipContentHoverable = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
356
+ const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
357
+ const ref = useRef(null);
358
+ const composedRefs = useComposedRefs(forwardedRef, ref);
359
+ const [pointerGraceArea, setPointerGraceArea] = useState3(null);
360
+ const { trigger, onClose } = context;
361
+ const content = ref.current;
362
+ const { onPointerInTransitChange } = context;
363
+ const handleRemoveGraceArea = useCallback2(() => {
364
+ setPointerGraceArea(null);
365
+ onPointerInTransitChange(false);
366
+ }, [
367
+ onPointerInTransitChange
368
+ ]);
369
+ const handleCreateGraceArea = useCallback2((event, hoverTarget) => {
370
+ const currentTarget = event.currentTarget;
371
+ const exitPoint = {
372
+ x: event.clientX,
373
+ y: event.clientY
374
+ };
375
+ const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
376
+ const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
377
+ const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
378
+ const graceArea = getHull([
379
+ ...paddedExitPoints,
380
+ ...hoverTargetPoints
381
+ ]);
382
+ setPointerGraceArea(graceArea);
383
+ onPointerInTransitChange(true);
384
+ }, [
385
+ onPointerInTransitChange
386
+ ]);
387
+ useEffect2(() => {
388
+ return () => handleRemoveGraceArea();
389
+ }, [
390
+ handleRemoveGraceArea
391
+ ]);
392
+ useEffect2(() => {
393
+ if (trigger && content) {
394
+ const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
395
+ const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
396
+ trigger.addEventListener("pointerleave", handleTriggerLeave);
397
+ content.addEventListener("pointerleave", handleContentLeave);
398
+ return () => {
399
+ trigger.removeEventListener("pointerleave", handleTriggerLeave);
400
+ content.removeEventListener("pointerleave", handleContentLeave);
401
+ };
402
+ }
403
+ }, [
404
+ trigger,
405
+ content,
406
+ handleCreateGraceArea,
407
+ handleRemoveGraceArea
408
+ ]);
409
+ useEffect2(() => {
410
+ if (pointerGraceArea) {
411
+ const handleTrackPointerGrace = (event) => {
412
+ const target = event.target;
413
+ const pointerPosition = {
414
+ x: event.clientX,
415
+ y: event.clientY
416
+ };
417
+ const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
418
+ const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
419
+ if (hasEnteredTarget) {
420
+ handleRemoveGraceArea();
421
+ } else if (isPointerOutsideGraceArea) {
422
+ handleRemoveGraceArea();
423
+ onClose();
424
+ }
425
+ };
426
+ document.addEventListener("pointermove", handleTrackPointerGrace);
427
+ return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
428
+ }
429
+ }, [
430
+ trigger,
431
+ content,
432
+ pointerGraceArea,
433
+ onClose,
434
+ handleRemoveGraceArea
435
+ ]);
436
+ return /* @__PURE__ */ React2.createElement(TooltipContentImpl, {
437
+ ...props,
438
+ ref: composedRefs
439
+ });
440
+ });
441
+ var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, {
442
+ isInside: false
443
+ });
444
+ var TooltipContentImpl = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
445
+ const { __scopeTooltip, children, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, ...contentProps } = props;
446
+ const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
447
+ const popperScope = usePopperScope(__scopeTooltip);
448
+ const { onClose } = context;
449
+ useEffect2(() => {
450
+ document.addEventListener(TOOLTIP_OPEN, onClose);
451
+ return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
452
+ }, [
453
+ onClose
454
+ ]);
455
+ useEffect2(() => {
456
+ if (context.trigger) {
457
+ const handleScroll = (event) => {
458
+ const target = event.target;
459
+ if (target?.contains(context.trigger)) {
460
+ onClose();
461
+ }
462
+ };
463
+ window.addEventListener("scroll", handleScroll, {
464
+ capture: true
465
+ });
466
+ return () => window.removeEventListener("scroll", handleScroll, {
467
+ capture: true
468
+ });
469
+ }
470
+ }, [
471
+ context.trigger,
472
+ onClose
473
+ ]);
474
+ return /* @__PURE__ */ React2.createElement(DismissableLayer, {
475
+ asChild: true,
476
+ disableOutsidePointerEvents: false,
477
+ onEscapeKeyDown,
478
+ onPointerDownOutside,
479
+ onFocusOutside: (event) => event.preventDefault(),
480
+ onDismiss: onClose
481
+ }, /* @__PURE__ */ React2.createElement(PopperPrimitive.Content, {
482
+ "data-state": context.stateAttribute,
483
+ ...popperScope,
484
+ ...contentProps,
485
+ ref: forwardedRef,
486
+ style: {
487
+ ...contentProps.style,
488
+ // re-namespace exposed content custom properties
489
+ ...{
490
+ "--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
491
+ "--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
492
+ "--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
493
+ "--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
494
+ "--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
495
+ }
496
+ }
497
+ }, /* @__PURE__ */ React2.createElement(Slottable, null, children), /* @__PURE__ */ React2.createElement(VisuallyHiddenContentContextProvider, {
498
+ scope: __scopeTooltip,
499
+ isInside: true
500
+ }, /* @__PURE__ */ React2.createElement(VisuallyHiddenPrimitive.Root, {
501
+ id: context.contentId,
502
+ role: "tooltip"
503
+ }, ariaLabel || children))));
504
+ });
505
+ TooltipContent.displayName = CONTENT_NAME;
506
+ var ARROW_NAME = "TooltipArrow";
507
+ var TooltipArrow = /* @__PURE__ */ forwardRef((props, forwardedRef) => {
508
+ const { __scopeTooltip, ...arrowProps } = props;
509
+ const popperScope = usePopperScope(__scopeTooltip);
510
+ const visuallyHiddenContentContext = useVisuallyHiddenContentContext(ARROW_NAME, __scopeTooltip);
511
+ return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ React2.createElement(PopperPrimitive.Arrow, {
512
+ ...popperScope,
513
+ ...arrowProps,
514
+ ref: forwardedRef
515
+ });
516
+ });
517
+ TooltipArrow.displayName = ARROW_NAME;
518
+ var getExitSideFromRect = (point, rect) => {
519
+ const top = Math.abs(rect.top - point.y);
520
+ const bottom = Math.abs(rect.bottom - point.y);
521
+ const right = Math.abs(rect.right - point.x);
522
+ const left = Math.abs(rect.left - point.x);
523
+ switch (Math.min(top, bottom, right, left)) {
524
+ case left:
525
+ return "left";
526
+ case right:
527
+ return "right";
528
+ case top:
529
+ return "top";
530
+ case bottom:
531
+ return "bottom";
532
+ default:
533
+ throw new Error("unreachable");
534
+ }
535
+ };
536
+ var getPaddedExitPoints = (exitPoint, exitSide, padding = 5) => {
537
+ const paddedExitPoints = [];
538
+ switch (exitSide) {
539
+ case "top":
540
+ paddedExitPoints.push({
541
+ x: exitPoint.x - padding,
542
+ y: exitPoint.y + padding
543
+ }, {
544
+ x: exitPoint.x + padding,
545
+ y: exitPoint.y + padding
546
+ });
547
+ break;
548
+ case "bottom":
549
+ paddedExitPoints.push({
550
+ x: exitPoint.x - padding,
551
+ y: exitPoint.y - padding
552
+ }, {
553
+ x: exitPoint.x + padding,
554
+ y: exitPoint.y - padding
555
+ });
556
+ break;
557
+ case "left":
558
+ paddedExitPoints.push({
559
+ x: exitPoint.x + padding,
560
+ y: exitPoint.y - padding
561
+ }, {
562
+ x: exitPoint.x + padding,
563
+ y: exitPoint.y + padding
564
+ });
565
+ break;
566
+ case "right":
567
+ paddedExitPoints.push({
568
+ x: exitPoint.x - padding,
569
+ y: exitPoint.y - padding
570
+ }, {
571
+ x: exitPoint.x - padding,
572
+ y: exitPoint.y + padding
573
+ });
574
+ break;
575
+ }
576
+ return paddedExitPoints;
577
+ };
578
+ var getPointsFromRect = (rect) => {
579
+ const { top, right, bottom, left } = rect;
580
+ return [
581
+ {
582
+ x: left,
583
+ y: top
584
+ },
585
+ {
586
+ x: right,
587
+ y: top
588
+ },
589
+ {
590
+ x: right,
591
+ y: bottom
592
+ },
593
+ {
594
+ x: left,
595
+ y: bottom
596
+ }
597
+ ];
598
+ };
599
+ var isPointInPolygon = (point, polygon) => {
600
+ const { x, y } = point;
601
+ let inside = false;
602
+ for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
603
+ const xi = polygon[i].x;
604
+ const yi = polygon[i].y;
605
+ const xj = polygon[j].x;
606
+ const yj = polygon[j].y;
607
+ const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
608
+ if (intersect) {
609
+ inside = !inside;
610
+ }
611
+ }
612
+ return inside;
613
+ };
614
+ var getHull = (points) => {
615
+ const newPoints = points.slice();
616
+ newPoints.sort((a, b) => {
617
+ if (a.x < b.x) {
618
+ return -1;
619
+ } else if (a.x > b.x) {
620
+ return 1;
621
+ } else if (a.y < b.y) {
622
+ return -1;
623
+ } else if (a.y > b.y) {
624
+ return 1;
625
+ } else {
626
+ return 0;
627
+ }
628
+ });
629
+ return getHullPresorted(newPoints);
630
+ };
631
+ var getHullPresorted = (points) => {
632
+ if (points.length <= 1) {
633
+ return points.slice();
634
+ }
635
+ const upperHull = [];
636
+ for (let i = 0; i < points.length; i++) {
637
+ const p = points[i];
638
+ while (upperHull.length >= 2) {
639
+ const q = upperHull[upperHull.length - 1];
640
+ const r = upperHull[upperHull.length - 2];
641
+ if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
642
+ upperHull.pop();
643
+ } else {
644
+ break;
645
+ }
646
+ }
647
+ upperHull.push(p);
648
+ }
649
+ upperHull.pop();
650
+ const lowerHull = [];
651
+ for (let i = points.length - 1; i >= 0; i--) {
652
+ const p = points[i];
653
+ while (lowerHull.length >= 2) {
654
+ const q = lowerHull[lowerHull.length - 1];
655
+ const r = lowerHull[lowerHull.length - 2];
656
+ if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
657
+ lowerHull.pop();
658
+ } else {
659
+ break;
660
+ }
661
+ }
662
+ lowerHull.push(p);
663
+ }
664
+ lowerHull.pop();
665
+ if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
666
+ return upperHull;
667
+ } else {
668
+ return upperHull.concat(lowerHull);
669
+ }
670
+ };
671
+ var Tooltip = {
672
+ Provider: TooltipProvider,
673
+ Trigger: TooltipTrigger
674
+ };
675
+
676
+ // src/components/ThemeProvider/ThemeProvider.tsx
677
+ import { createKeyborg } from "keyborg";
678
+ import React5, { createContext as createContext4, useEffect as useEffect3, useMemo as useMemo2 } from "react";
679
+
680
+ // src/util/hasIosKeyboard.ts
681
+ var hasIosKeyboard = () => {
682
+ return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
683
+ };
684
+
685
+ // src/components/DensityProvider/DensityProvider.tsx
686
+ import React3, { createContext as createContext2 } from "react";
687
+ var DensityContext = /* @__PURE__ */ createContext2({
688
+ density: "fine"
689
+ });
690
+ var DensityProvider = ({ density, children }) => /* @__PURE__ */ React3.createElement(DensityContext.Provider, {
691
+ value: {
692
+ density
693
+ }
694
+ }, children);
695
+
696
+ // src/components/ElevationProvider/ElevationProvider.tsx
697
+ import React4, { createContext as createContext3 } from "react";
698
+ var ElevationContext = /* @__PURE__ */ createContext3({
699
+ elevation: "base"
700
+ });
701
+ var ElevationProvider = ({ elevation, children }) => /* @__PURE__ */ React4.createElement(ElevationContext.Provider, {
702
+ value: {
703
+ elevation
704
+ }
705
+ }, children);
706
+
707
+ // src/components/ThemeProvider/ThemeProvider.tsx
708
+ var ThemeContext = /* @__PURE__ */ createContext4(void 0);
709
+ var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", ...rest }) => {
710
+ useEffect3(() => {
711
+ if (document.defaultView) {
712
+ const kb = createKeyborg(document.defaultView);
713
+ kb.subscribe(handleInputModalityChange);
714
+ return () => kb.unsubscribe(handleInputModalityChange);
715
+ }
716
+ }, []);
717
+ const safeAreaPadding = useSafeArea();
718
+ const contextValue = useMemo2(() => ({
719
+ tx,
720
+ themeMode,
721
+ hasIosKeyboard: hasIosKeyboard(),
722
+ safeAreaPadding,
723
+ ...rest
724
+ }), [
725
+ tx,
726
+ themeMode,
727
+ safeAreaPadding,
728
+ rest
729
+ ]);
730
+ return /* @__PURE__ */ React5.createElement(ThemeContext.Provider, {
731
+ value: contextValue
732
+ }, /* @__PURE__ */ React5.createElement(TranslationsProvider, {
733
+ fallback,
734
+ resourceExtensions,
735
+ appNs
736
+ }, /* @__PURE__ */ React5.createElement(ElevationProvider, {
737
+ elevation: "base"
738
+ }, /* @__PURE__ */ React5.createElement(DensityProvider, {
739
+ density: rootDensity
740
+ }, children))));
741
+ };
742
+ var handleInputModalityChange = (isUsingKeyboard) => {
743
+ if (isUsingKeyboard) {
744
+ document.body.setAttribute("data-is-keyboard", "true");
745
+ } else {
746
+ document.body.removeAttribute("data-is-keyboard");
747
+ }
748
+ };
749
+
750
+ // src/hooks/useElevationContext.ts
751
+ var useElevationContext = (propsElevation) => {
752
+ const { elevation } = useContext3(ElevationContext);
753
+ return propsElevation ?? elevation;
754
+ };
755
+
756
+ export {
757
+ useElevationContext,
758
+ useThemeContext,
759
+ initialSafeArea,
760
+ useSafeArea,
761
+ TranslationsContext,
762
+ useTranslation,
763
+ createTooltipScope,
764
+ useTooltipContext,
765
+ Tooltip,
766
+ hasIosKeyboard,
767
+ DensityContext,
768
+ DensityProvider,
769
+ ElevationContext,
770
+ ElevationProvider,
771
+ ThemeContext,
772
+ ThemeProvider
773
+ };
774
+ //# sourceMappingURL=chunk-CEKVHJ27.mjs.map