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