@dxos/react-ui 0.8.3 → 0.8.4-main.2e9d522

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 (83) hide show
  1. package/dist/lib/browser/{chunk-WXW6KSRL.mjs → chunk-2COVUP44.mjs} +135 -138
  2. package/dist/lib/browser/chunk-2COVUP44.mjs.map +7 -0
  3. package/dist/lib/browser/index.mjs +2 -3
  4. package/dist/lib/browser/index.mjs.map +2 -2
  5. package/dist/lib/browser/meta.json +1 -1
  6. package/dist/lib/browser/testing/index.mjs +5 -6
  7. package/dist/lib/browser/testing/index.mjs.map +3 -3
  8. package/dist/lib/node-esm/{chunk-EQ7EG74H.mjs → chunk-GHXHND5V.mjs} +135 -138
  9. package/dist/lib/node-esm/chunk-GHXHND5V.mjs.map +7 -0
  10. package/dist/lib/node-esm/index.mjs +2 -3
  11. package/dist/lib/node-esm/index.mjs.map +2 -2
  12. package/dist/lib/node-esm/meta.json +1 -1
  13. package/dist/lib/node-esm/testing/index.mjs +5 -6
  14. package/dist/lib/node-esm/testing/index.mjs.map +3 -3
  15. package/dist/types/src/components/Breadcrumb/Breadcrumb.d.ts.map +1 -1
  16. package/dist/types/src/components/Buttons/Button.d.ts.map +1 -1
  17. package/dist/types/src/components/Buttons/Button.stories.d.ts +1 -1
  18. package/dist/types/src/components/Buttons/Button.stories.d.ts.map +1 -1
  19. package/dist/types/src/components/Buttons/Toggle.stories.d.ts.map +1 -1
  20. package/dist/types/src/components/Buttons/ToggleGroup.stories.d.ts.map +1 -1
  21. package/dist/types/src/components/Clipboard/CopyButton.d.ts +4 -5
  22. package/dist/types/src/components/Clipboard/CopyButton.d.ts.map +1 -1
  23. package/dist/types/src/components/Clipboard/index.d.ts +2 -3
  24. package/dist/types/src/components/Clipboard/index.d.ts.map +1 -1
  25. package/dist/types/src/components/Input/Input.stories.d.ts +1 -1
  26. package/dist/types/src/components/Input/Input.stories.d.ts.map +1 -1
  27. package/dist/types/src/components/Lists/List.d.ts.map +1 -1
  28. package/dist/types/src/components/Lists/List.stories.d.ts.map +1 -1
  29. package/dist/types/src/components/Popover/Popover.d.ts +1 -1
  30. package/dist/types/src/components/Popover/Popover.d.ts.map +1 -1
  31. package/dist/types/src/components/Select/Select.d.ts.map +1 -1
  32. package/dist/types/src/components/Select/Select.stories.d.ts +1 -1
  33. package/dist/types/src/components/Select/Select.stories.d.ts.map +1 -1
  34. package/dist/types/src/components/ThemeProvider/ThemeProvider.d.ts +1 -1
  35. package/dist/types/src/components/ThemeProvider/ThemeProvider.d.ts.map +1 -1
  36. package/dist/types/src/components/ThemeProvider/TranslationsProvider.d.ts.map +1 -1
  37. package/dist/types/src/components/ThemeProvider/index.d.ts +1 -1
  38. package/dist/types/src/components/ThemeProvider/index.d.ts.map +1 -1
  39. package/dist/types/src/components/Toolbar/Toolbar.stories.d.ts.map +1 -1
  40. package/dist/types/src/index.d.ts +2 -2
  41. package/dist/types/src/index.d.ts.map +1 -1
  42. package/dist/types/src/playground/Controls.stories.d.ts.map +1 -1
  43. package/dist/types/src/playground/Custom.stories.d.ts +1 -1
  44. package/dist/types/src/playground/Custom.stories.d.ts.map +1 -1
  45. package/dist/types/src/testing/decorators/withTheme.d.ts.map +1 -1
  46. package/dist/types/src/util/index.d.ts +1 -1
  47. package/dist/types/src/util/index.d.ts.map +1 -1
  48. package/dist/types/tsconfig.tsbuildinfo +1 -1
  49. package/package.json +14 -14
  50. package/src/components/Breadcrumb/Breadcrumb.tsx +2 -2
  51. package/src/components/Buttons/Button.stories.tsx +4 -4
  52. package/src/components/Buttons/Button.tsx +1 -0
  53. package/src/components/Buttons/IconButton.tsx +1 -1
  54. package/src/components/Buttons/Toggle.stories.tsx +2 -2
  55. package/src/components/Buttons/ToggleGroup.stories.tsx +3 -3
  56. package/src/components/Clipboard/CopyButton.tsx +11 -13
  57. package/src/components/Input/Input.stories.tsx +1 -1
  58. package/src/components/Lists/List.stories.tsx +6 -6
  59. package/src/components/Lists/List.tsx +3 -8
  60. package/src/components/Popover/Popover.tsx +1 -1
  61. package/src/components/Select/Select.stories.tsx +1 -1
  62. package/src/components/Select/Select.tsx +3 -4
  63. package/src/components/ThemeProvider/ThemeProvider.tsx +1 -2
  64. package/src/components/ThemeProvider/TranslationsProvider.tsx +1 -1
  65. package/src/components/ThemeProvider/index.ts +3 -1
  66. package/src/components/Toolbar/Toolbar.stories.tsx +8 -8
  67. package/src/hooks/useSafeCollisionPadding.ts +1 -1
  68. package/src/index.ts +2 -2
  69. package/src/playground/Controls.stories.tsx +8 -9
  70. package/src/playground/Custom.stories.tsx +1 -1
  71. package/src/testing/decorators/withSurfaceVariantsLayout.tsx +1 -1
  72. package/src/testing/decorators/withTheme.ts +7 -4
  73. package/src/util/index.ts +1 -1
  74. package/README.yml +0 -1
  75. package/dist/lib/browser/chunk-WXW6KSRL.mjs.map +0 -7
  76. package/dist/lib/node/chunk-3E3QKWX4.cjs +0 -4363
  77. package/dist/lib/node/chunk-3E3QKWX4.cjs.map +0 -7
  78. package/dist/lib/node/index.cjs +0 -175
  79. package/dist/lib/node/index.cjs.map +0 -7
  80. package/dist/lib/node/meta.json +0 -1
  81. package/dist/lib/node/testing/index.cjs +0 -114
  82. package/dist/lib/node/testing/index.cjs.map +0 -7
  83. package/dist/lib/node-esm/chunk-EQ7EG74H.mjs.map +0 -7
@@ -1,4363 +0,0 @@
1
- "use strict";
2
- var __create = Object.create;
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
- var __hasOwnProp = Object.prototype.hasOwnProperty;
8
- var __export = (target, all) => {
9
- for (var name in all)
10
- __defProp(target, name, { get: all[name], enumerable: true });
11
- };
12
- var __copyProps = (to, from, except, desc) => {
13
- if (from && typeof from === "object" || typeof from === "function") {
14
- for (let key of __getOwnPropNames(from))
15
- if (!__hasOwnProp.call(to, key) && key !== except)
16
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
17
- }
18
- return to;
19
- };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
- var chunk_3E3QKWX4_exports = {};
30
- __export(chunk_3E3QKWX4_exports, {
31
- AlertDialog: () => AlertDialog,
32
- AnchoredOverflow: () => AnchoredOverflow,
33
- Avatar: () => Avatar,
34
- BUTTON_GROUP_NAME: () => BUTTON_GROUP_NAME,
35
- Breadcrumb: () => Breadcrumb,
36
- Button: () => Button,
37
- ButtonGroup: () => ButtonGroup,
38
- Callout: () => Callout,
39
- Clipboard: () => Clipboard,
40
- ContextMenu: () => ContextMenu2,
41
- DensityContext: () => DensityContext,
42
- DensityProvider: () => DensityProvider,
43
- Dialog: () => Dialog,
44
- DropdownMenu: () => DropdownMenu,
45
- ElevationContext: () => ElevationContext,
46
- ElevationProvider: () => ElevationProvider,
47
- Icon: () => Icon,
48
- IconButton: () => IconButton,
49
- Input: () => Input,
50
- LIST_ITEM_NAME: () => import_react_list.LIST_ITEM_NAME,
51
- LIST_NAME: () => import_react_list.LIST_NAME,
52
- Link: () => Link,
53
- List: () => List,
54
- ListItem: () => ListItem,
55
- Main: () => Main,
56
- Message: () => Message,
57
- Popover: () => Popover,
58
- ScrollArea: () => ScrollArea,
59
- Select: () => Select,
60
- Separator: () => Separator4,
61
- Status: () => Status,
62
- Tag: () => Tag,
63
- ThemeContext: () => ThemeContext,
64
- ThemeProvider: () => ThemeProvider,
65
- Toast: () => Toast,
66
- Toggle: () => Toggle,
67
- ToggleGroup: () => ToggleGroup,
68
- ToggleGroupItem: () => ToggleGroupItem,
69
- Toolbar: () => Toolbar,
70
- Tooltip: () => Tooltip,
71
- Tree: () => Tree,
72
- TreeItem: () => TreeItem,
73
- Treegrid: () => Treegrid,
74
- createDropdownMenuScope: () => createDropdownMenuScope,
75
- createPopoverScope: () => createPopoverScope,
76
- createTooltipScope: () => createTooltipScope,
77
- hasIosKeyboard: () => hasIosKeyboard,
78
- initialSafeArea: () => initialSafeArea,
79
- isLabel: () => isLabel,
80
- messageIcons: () => messageIcons,
81
- toLocalizedString: () => toLocalizedString,
82
- useAvatarContext: () => useAvatarContext,
83
- useButtonGroupContext: () => useButtonGroupContext,
84
- useClipboard: () => useClipboard,
85
- useDensityContext: () => useDensityContext,
86
- useDropdownMenuContext: () => useDropdownMenuContext,
87
- useDropdownMenuMenuScope: () => useDropdownMenuMenuScope,
88
- useElevationContext: () => useElevationContext,
89
- useIconHref: () => useIconHref,
90
- useLandmarkMover: () => useLandmarkMover,
91
- useListContext: () => import_react_list.useListContext,
92
- useListItemContext: () => import_react_list.useListItemContext,
93
- useMainContext: () => useMainContext,
94
- useSafeArea: () => useSafeArea,
95
- useSidebars: () => useSidebars,
96
- useThemeContext: () => useThemeContext,
97
- useTooltipContext: () => useTooltipContext,
98
- useTranslation: () => useTranslation,
99
- useTranslationsContext: () => useTranslationsContext,
100
- useVisualViewport: () => useVisualViewport
101
- });
102
- module.exports = __toCommonJS(chunk_3E3QKWX4_exports);
103
- var import_react = require("react");
104
- var import_tracking = require("@preact-signals/safe-react/tracking");
105
- var import_react_primitive = require("@radix-ui/react-primitive");
106
- var import_react_slot = require("@radix-ui/react-slot");
107
- var import_react2 = __toESM(require("react"));
108
- var import_react3 = require("react");
109
- var import_react4 = require("react");
110
- var import_debug = require("@dxos/debug");
111
- var import_react5 = require("react");
112
- var import_react_hooks = require("@dxos/react-hooks");
113
- var import_react6 = require("react");
114
- var import_tracking2 = require("@preact-signals/safe-react/tracking");
115
- var import_locale = require("date-fns/locale");
116
- var import_i18next = __toESM(require("i18next"));
117
- var import_react7 = __toESM(require("react"));
118
- var import_react_i18next = require("react-i18next");
119
- var import_react8 = require("react");
120
- var import_react_hooks2 = require("@dxos/react-hooks");
121
- var import_tracking3 = require("@preact-signals/safe-react/tracking");
122
- var import_dx_avatar = require("@dxos/lit-ui/dx-avatar.pcss");
123
- var import_react_context = require("@radix-ui/react-context");
124
- var import_react_primitive2 = require("@radix-ui/react-primitive");
125
- var import_react_slot2 = require("@radix-ui/react-slot");
126
- var import_react9 = __toESM(require("react"));
127
- var import_react10 = require("@dxos/lit-ui/react");
128
- var import_react_hooks3 = require("@dxos/react-hooks");
129
- var import_react_ui_theme = require("@dxos/react-ui-theme");
130
- var import_tracking4 = require("@preact-signals/safe-react/tracking");
131
- var import_react11 = require("@phosphor-icons/react");
132
- var import_react_primitive3 = require("@radix-ui/react-primitive");
133
- var import_react_slot3 = require("@radix-ui/react-slot");
134
- var import_react12 = __toESM(require("react"));
135
- var import_tracking5 = require("@preact-signals/safe-react/tracking");
136
- var import_react_primitive4 = require("@radix-ui/react-primitive");
137
- var import_react_slot4 = require("@radix-ui/react-slot");
138
- var import_react13 = __toESM(require("react"));
139
- var import_tracking6 = require("@preact-signals/safe-react/tracking");
140
- var import_react_context2 = require("@radix-ui/react-context");
141
- var import_react_primitive5 = require("@radix-ui/react-primitive");
142
- var import_react_slot5 = require("@radix-ui/react-slot");
143
- var import_react14 = __toESM(require("react"));
144
- var import_tracking7 = require("@preact-signals/safe-react/tracking");
145
- var import_react15 = __toESM(require("react"));
146
- var import_tracking8 = require("@preact-signals/safe-react/tracking");
147
- var import_react16 = __toESM(require("react"));
148
- var import_tracking9 = require("@preact-signals/safe-react/tracking");
149
- var import_primitive = require("@radix-ui/primitive");
150
- var import_react_compose_refs = require("@radix-ui/react-compose-refs");
151
- var import_react_context3 = require("@radix-ui/react-context");
152
- var import_react_dismissable_layer = require("@radix-ui/react-dismissable-layer");
153
- var import_react_id = require("@radix-ui/react-id");
154
- var PopperPrimitive = __toESM(require("@radix-ui/react-popper"));
155
- var import_react_popper = require("@radix-ui/react-popper");
156
- var import_react_portal = require("@radix-ui/react-portal");
157
- var import_react_presence = require("@radix-ui/react-presence");
158
- var import_react_primitive6 = require("@radix-ui/react-primitive");
159
- var import_react_slot6 = require("@radix-ui/react-slot");
160
- var import_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
161
- var VisuallyHiddenPrimitive = __toESM(require("@radix-ui/react-visually-hidden"));
162
- var import_react17 = __toESM(require("react"));
163
- var import_tracking10 = require("@preact-signals/safe-react/tracking");
164
- var import_react_toggle = require("@radix-ui/react-toggle");
165
- var import_react18 = __toESM(require("react"));
166
- var import_tracking11 = require("@preact-signals/safe-react/tracking");
167
- var import_react_toggle_group = require("@radix-ui/react-toggle-group");
168
- var import_react19 = __toESM(require("react"));
169
- var import_tracking12 = require("@preact-signals/safe-react/tracking");
170
- var import_react20 = __toESM(require("react"));
171
- var import_tracking13 = require("@preact-signals/safe-react/tracking");
172
- var import_react21 = __toESM(require("react"));
173
- var import_react_ui_theme2 = require("@dxos/react-ui-theme");
174
- var import_tracking14 = require("@preact-signals/safe-react/tracking");
175
- var import_keyborg = require("keyborg");
176
- var import_react22 = __toESM(require("react"));
177
- var import_tracking15 = require("@preact-signals/safe-react/tracking");
178
- var import_react23 = __toESM(require("react"));
179
- var import_tracking16 = require("@preact-signals/safe-react/tracking");
180
- var import_react24 = __toESM(require("react"));
181
- var import_tracking17 = require("@preact-signals/safe-react/tracking");
182
- var import_react_context4 = require("@radix-ui/react-context");
183
- var import_react_dialog = require("@radix-ui/react-dialog");
184
- var import_react25 = __toESM(require("react"));
185
- var import_tracking18 = require("@preact-signals/safe-react/tracking");
186
- var import_react_alert_dialog = require("@radix-ui/react-alert-dialog");
187
- var import_react_context5 = require("@radix-ui/react-context");
188
- var import_react26 = __toESM(require("react"));
189
- var import_tracking19 = require("@preact-signals/safe-react/tracking");
190
- var import_react_checkbox = require("@radix-ui/react-checkbox");
191
- var import_react_use_controllable_state2 = require("@radix-ui/react-use-controllable-state");
192
- var import_react27 = __toESM(require("react"));
193
- var import_react_input = require("@dxos/react-input");
194
- var import_react_ui_theme3 = require("@dxos/react-ui-theme");
195
- var import_tracking20 = require("@preact-signals/safe-react/tracking");
196
- var import_react28 = require("@phosphor-icons/react");
197
- var import_react_slot7 = require("@radix-ui/react-slot");
198
- var import_react29 = __toESM(require("react"));
199
- var import_react_list = require("@dxos/react-list");
200
- var import_tracking21 = require("@preact-signals/safe-react/tracking");
201
- var import_react30 = __toESM(require("react"));
202
- var import_tracking22 = require("@preact-signals/safe-react/tracking");
203
- var import_react31 = __toESM(require("react"));
204
- var import_tracking23 = require("@preact-signals/safe-react/tracking");
205
- var import_react32 = __toESM(require("react"));
206
- var import_tracking24 = require("@preact-signals/safe-react/tracking");
207
- var import_react_tabster = require("@fluentui/react-tabster");
208
- var import_react_context6 = require("@radix-ui/react-context");
209
- var import_react_primitive7 = require("@radix-ui/react-primitive");
210
- var import_react_slot8 = require("@radix-ui/react-slot");
211
- var import_react_use_controllable_state3 = require("@radix-ui/react-use-controllable-state");
212
- var import_react33 = __toESM(require("react"));
213
- var import_tracking25 = require("@preact-signals/safe-react/tracking");
214
- var import_react_context7 = require("@radix-ui/react-context");
215
- var import_react_dialog2 = require("@radix-ui/react-dialog");
216
- var import_react_primitive8 = require("@radix-ui/react-primitive");
217
- var import_react_slot9 = require("@radix-ui/react-slot");
218
- var import_react_use_controllable_state4 = require("@radix-ui/react-use-controllable-state");
219
- var import_react34 = __toESM(require("react"));
220
- var import_log = require("@dxos/log");
221
- var import_react_hooks4 = require("@dxos/react-hooks");
222
- var import_react35 = require("react");
223
- var import_tracking26 = require("@preact-signals/safe-react/tracking");
224
- var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"));
225
- var import_react_primitive9 = require("@radix-ui/react-primitive");
226
- var import_react_slot10 = require("@radix-ui/react-slot");
227
- var import_react36 = __toESM(require("react"));
228
- var import_react37 = require("react");
229
- var import_tracking27 = require("@preact-signals/safe-react/tracking");
230
- var import_primitive2 = require("@radix-ui/primitive");
231
- var import_react_compose_refs2 = require("@radix-ui/react-compose-refs");
232
- var import_react_context8 = require("@radix-ui/react-context");
233
- var import_react_id2 = require("@radix-ui/react-id");
234
- var MenuPrimitive = __toESM(require("@radix-ui/react-menu"));
235
- var import_react_menu = require("@radix-ui/react-menu");
236
- var import_react_primitive10 = require("@radix-ui/react-primitive");
237
- var import_react_slot11 = require("@radix-ui/react-slot");
238
- var import_react_use_controllable_state5 = require("@radix-ui/react-use-controllable-state");
239
- var import_react38 = __toESM(require("react"));
240
- var import_tracking28 = require("@preact-signals/safe-react/tracking");
241
- var import_react_context9 = require("@radix-ui/react-context");
242
- var import_react_primitive11 = require("@radix-ui/react-primitive");
243
- var import_react_slot12 = require("@radix-ui/react-slot");
244
- var import_react39 = __toESM(require("react"));
245
- var import_react_hooks5 = require("@dxos/react-hooks");
246
- var import_tracking29 = require("@preact-signals/safe-react/tracking");
247
- var import_primitive3 = require("@radix-ui/primitive");
248
- var import_react_compose_refs3 = require("@radix-ui/react-compose-refs");
249
- var import_react_context10 = require("@radix-ui/react-context");
250
- var import_react_dismissable_layer2 = require("@radix-ui/react-dismissable-layer");
251
- var import_react_focus_guards = require("@radix-ui/react-focus-guards");
252
- var import_react_focus_scope = require("@radix-ui/react-focus-scope");
253
- var import_react_id3 = require("@radix-ui/react-id");
254
- var PopperPrimitive2 = __toESM(require("@radix-ui/react-popper"));
255
- var import_react_popper2 = require("@radix-ui/react-popper");
256
- var import_react_portal2 = require("@radix-ui/react-portal");
257
- var import_react_presence2 = require("@radix-ui/react-presence");
258
- var import_react_primitive12 = require("@radix-ui/react-primitive");
259
- var import_react_slot13 = require("@radix-ui/react-slot");
260
- var import_react_use_controllable_state6 = require("@radix-ui/react-use-controllable-state");
261
- var import_aria_hidden = require("aria-hidden");
262
- var import_react40 = __toESM(require("react"));
263
- var import_react_remove_scroll = require("react-remove-scroll");
264
- var import_tracking30 = require("@preact-signals/safe-react/tracking");
265
- var import_react41 = __toESM(require("react"));
266
- var import_tracking31 = require("@preact-signals/safe-react/tracking");
267
- var import_react_scroll_area = require("@radix-ui/react-scroll-area");
268
- var import_react42 = __toESM(require("react"));
269
- var import_tracking32 = require("@preact-signals/safe-react/tracking");
270
- var import_react43 = require("@phosphor-icons/react");
271
- var SelectPrimitive = __toESM(require("@radix-ui/react-select"));
272
- var import_react44 = __toESM(require("react"));
273
- var import_tracking33 = require("@preact-signals/safe-react/tracking");
274
- var import_react_separator = require("@radix-ui/react-separator");
275
- var import_react45 = __toESM(require("react"));
276
- var import_tracking34 = require("@preact-signals/safe-react/tracking");
277
- var import_react_primitive13 = require("@radix-ui/react-primitive");
278
- var import_react_slot14 = require("@radix-ui/react-slot");
279
- var import_react46 = __toESM(require("react"));
280
- var import_tracking35 = require("@preact-signals/safe-react/tracking");
281
- var import_react_primitive14 = require("@radix-ui/react-primitive");
282
- var import_react_slot15 = require("@radix-ui/react-slot");
283
- var import_react_toast = require("@radix-ui/react-toast");
284
- var import_react47 = __toESM(require("react"));
285
- var import_tracking36 = require("@preact-signals/safe-react/tracking");
286
- var ToolbarPrimitive = __toESM(require("@radix-ui/react-toolbar"));
287
- var import_react48 = __toESM(require("react"));
288
- var useElevationContext = (propsElevation) => {
289
- const { elevation } = (0, import_react3.useContext)(ElevationContext);
290
- return propsElevation ?? elevation;
291
- };
292
- var useThemeContext = () => (0, import_react4.useContext)(ThemeContext) ?? (0, import_debug.raise)(new Error("Missing ThemeContext"));
293
- var ICONS_URL = "/icons.svg";
294
- var useIconHref = (icon) => {
295
- const { noCache } = useThemeContext();
296
- const url = noCache ? `${ICONS_URL}?nocache=${(/* @__PURE__ */ new Date()).getMinutes()}` : ICONS_URL;
297
- return icon ? `${url}#${icon}` : void 0;
298
- };
299
- var initialSafeArea = {
300
- top: NaN,
301
- right: NaN,
302
- bottom: NaN,
303
- left: NaN
304
- };
305
- var useSafeArea = () => {
306
- const [padding, setPadding] = (0, import_react5.useState)(initialSafeArea);
307
- const handleResize = (0, import_react5.useCallback)(() => {
308
- setPadding({
309
- top: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-top")),
310
- right: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-right")),
311
- bottom: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-bottom")),
312
- left: parseFloat(getComputedStyle(document.documentElement).getPropertyValue("--safe-area-left"))
313
- });
314
- }, []);
315
- (0, import_react_hooks.useResize)(handleResize);
316
- return padding;
317
- };
318
- var initialLng = "en-US";
319
- var initialNs = "dxos-common";
320
- var initialDtLocale = import_locale.enUS;
321
- var isLabel = (o) => typeof o === "string" || Array.isArray(o) && o.length === 2 && typeof o[0] === "string" && !!o[1] && typeof o[1] === "object" && "ns" in o[1] && typeof o[1].ns === "string";
322
- var toLocalizedString = (label, t) => Array.isArray(label) ? t(...label) : label;
323
- var resources = {
324
- [initialLng]: {
325
- [initialNs]: {
326
- "loading translations": "Loading translations\u2026"
327
- }
328
- }
329
- };
330
- void import_i18next.default.use(import_react_i18next.initReactI18next).init({
331
- resources,
332
- lng: initialLng,
333
- defaultNS: initialNs,
334
- interpolation: {
335
- escapeValue: false
336
- }
337
- });
338
- var TranslationsContext = /* @__PURE__ */ (0, import_react7.createContext)({
339
- appNs: initialNs,
340
- dtLocale: initialDtLocale
341
- });
342
- var useTranslation = (...args) => {
343
- const result = (0, import_react_i18next.useTranslation)(...args);
344
- const { dtLocale } = (0, import_react7.useContext)(TranslationsContext);
345
- return {
346
- ...result,
347
- dtLocale
348
- };
349
- };
350
- var TranslationsProvider = ({ fallback, resourceExtensions, children, appNs, dtLocale }) => {
351
- var _effect = (0, import_tracking2.useSignals)();
352
- try {
353
- const [loaded, setLoaded] = (0, import_react7.useState)(false);
354
- (0, import_react7.useEffect)(() => {
355
- setLoaded(false);
356
- if (resourceExtensions && resourceExtensions.length) {
357
- resourceExtensions.forEach((resource) => {
358
- Object.keys(resource).forEach((language) => {
359
- Object.keys(resource[language]).forEach((ns) => {
360
- import_i18next.default.addResourceBundle(language, ns, resource[language][ns]);
361
- });
362
- });
363
- });
364
- }
365
- setLoaded(true);
366
- }, [
367
- resourceExtensions
368
- ]);
369
- return /* @__PURE__ */ import_react7.default.createElement(TranslationsContext.Provider, {
370
- value: {
371
- appNs: appNs ?? initialNs,
372
- dtLocale: dtLocale ?? initialDtLocale
373
- }
374
- }, /* @__PURE__ */ import_react7.default.createElement(import_react7.Suspense, {
375
- fallback
376
- }, loaded ? children : fallback));
377
- } finally {
378
- _effect.f();
379
- }
380
- };
381
- var useTranslationsContext = () => (0, import_react6.useContext)(TranslationsContext);
382
- var useVisualViewport = (deps) => {
383
- const [width, setWidth] = (0, import_react8.useState)(null);
384
- const [height, setHeight] = (0, import_react8.useState)(null);
385
- const handleResize = (0, import_react8.useCallback)(() => {
386
- if (window.visualViewport) {
387
- setWidth(window.visualViewport.width);
388
- setHeight(window.visualViewport.height);
389
- }
390
- }, []);
391
- (0, import_react_hooks2.useResize)(handleResize);
392
- return {
393
- width,
394
- height
395
- };
396
- };
397
- var AnchoredOverflowRoot = /* @__PURE__ */ (0, import_react2.forwardRef)(({ asChild, classNames, children, ...props }, forwardedRef) => {
398
- var _effect = (0, import_tracking.useSignals)();
399
- try {
400
- const { tx } = useThemeContext();
401
- const Root7 = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.div;
402
- return /* @__PURE__ */ import_react2.default.createElement(Root7, {
403
- role: "none",
404
- ...props,
405
- className: tx("anchoredOverflow.root", "overflow-anchored", {}, classNames),
406
- ref: forwardedRef
407
- }, children);
408
- } finally {
409
- _effect.f();
410
- }
411
- });
412
- var AnchoredOverflowAnchor = /* @__PURE__ */ (0, import_react2.forwardRef)(({ asChild, classNames, children, ...props }, forwardedRef) => {
413
- var _effect = (0, import_tracking.useSignals)();
414
- try {
415
- const { tx } = useThemeContext();
416
- const Root7 = asChild ? import_react_slot.Slot : import_react_primitive.Primitive.div;
417
- return /* @__PURE__ */ import_react2.default.createElement(Root7, {
418
- role: "none",
419
- ...props,
420
- className: tx("anchoredOverflow.anchor", "overflow-anchor", {}, classNames),
421
- ref: forwardedRef
422
- }, children);
423
- } finally {
424
- _effect.f();
425
- }
426
- });
427
- var AnchoredOverflow = {
428
- Root: AnchoredOverflowRoot,
429
- Anchor: AnchoredOverflowAnchor
430
- };
431
- var AVATAR_NAME = "Avatar";
432
- var [AvatarProvider, useAvatarContext] = (0, import_react_context.createContext)(AVATAR_NAME);
433
- var AvatarRoot = ({ children, labelId: propsLabelId, descriptionId: propsDescriptionId }) => {
434
- var _effect = (0, import_tracking3.useSignals)();
435
- try {
436
- const labelId = (0, import_react_hooks3.useId)("avatar__label", propsLabelId);
437
- const descriptionId = (0, import_react_hooks3.useId)("avatar__description", propsDescriptionId);
438
- return /* @__PURE__ */ import_react9.default.createElement(AvatarProvider, {
439
- labelId,
440
- descriptionId
441
- }, children);
442
- } finally {
443
- _effect.f();
444
- }
445
- };
446
- var AvatarContent = /* @__PURE__ */ (0, import_react9.forwardRef)(({ icon, classNames, ...props }, forwardedRef) => {
447
- var _effect = (0, import_tracking3.useSignals)();
448
- try {
449
- const href = useIconHref(icon);
450
- const { labelId, descriptionId } = useAvatarContext("AvatarContent");
451
- return /* @__PURE__ */ import_react9.default.createElement(import_react10.DxAvatar, {
452
- ...props,
453
- icon: href,
454
- "aria-labelledby": labelId,
455
- "aria-describedby": descriptionId,
456
- rootClassName: (0, import_react_ui_theme.mx)(classNames),
457
- ref: forwardedRef
458
- });
459
- } finally {
460
- _effect.f();
461
- }
462
- });
463
- var AvatarLabel = /* @__PURE__ */ (0, import_react9.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
464
- var _effect = (0, import_tracking3.useSignals)();
465
- try {
466
- const Root7 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
467
- const { tx } = useThemeContext();
468
- const { labelId } = useAvatarContext("AvatarLabel");
469
- return /* @__PURE__ */ import_react9.default.createElement(Root7, {
470
- ...props,
471
- id: labelId,
472
- ref: forwardedRef,
473
- className: tx("avatar.label", "avatar__label", {
474
- srOnly
475
- }, classNames)
476
- });
477
- } finally {
478
- _effect.f();
479
- }
480
- });
481
- var AvatarDescription = /* @__PURE__ */ (0, import_react9.forwardRef)(({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
482
- var _effect = (0, import_tracking3.useSignals)();
483
- try {
484
- const Root7 = asChild ? import_react_slot2.Slot : import_react_primitive2.Primitive.span;
485
- const { tx } = useThemeContext();
486
- const { descriptionId } = useAvatarContext("AvatarDescription");
487
- return /* @__PURE__ */ import_react9.default.createElement(Root7, {
488
- ...props,
489
- id: descriptionId,
490
- ref: forwardedRef,
491
- className: tx("avatar.description", "avatar__description", {
492
- srOnly
493
- }, classNames)
494
- });
495
- } finally {
496
- _effect.f();
497
- }
498
- });
499
- var Avatar = {
500
- Root: AvatarRoot,
501
- Content: AvatarContent,
502
- Label: AvatarLabel,
503
- Description: AvatarDescription
504
- };
505
- var Link = /* @__PURE__ */ (0, import_react13.forwardRef)(({ asChild, variant, classNames, ...props }, forwardedRef) => {
506
- var _effect = (0, import_tracking5.useSignals)();
507
- try {
508
- const { tx } = useThemeContext();
509
- const Root7 = asChild ? import_react_slot4.Slot : import_react_primitive4.Primitive.a;
510
- return /* @__PURE__ */ import_react13.default.createElement(Root7, {
511
- ...props,
512
- className: tx("link.root", "link", {
513
- variant
514
- }, classNames),
515
- ref: forwardedRef
516
- });
517
- } finally {
518
- _effect.f();
519
- }
520
- });
521
- var BreadcrumbRoot = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
522
- var _effect = (0, import_tracking4.useSignals)();
523
- try {
524
- const { tx } = useThemeContext();
525
- const Root7 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.div;
526
- return /* @__PURE__ */ import_react12.default.createElement(Root7, {
527
- role: "navigation",
528
- ...props,
529
- className: tx("breadcrumb.root", "breadcrumb", {}, classNames),
530
- ref: forwardedRef
531
- });
532
- } finally {
533
- _effect.f();
534
- }
535
- });
536
- var BreadcrumbList = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
537
- var _effect = (0, import_tracking4.useSignals)();
538
- try {
539
- const { tx } = useThemeContext();
540
- const Root7 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.ol;
541
- return /* @__PURE__ */ import_react12.default.createElement(Root7, {
542
- role: "list",
543
- ...props,
544
- className: tx("breadcrumb.list", "breadcrumb__list", {}, classNames),
545
- ref: forwardedRef
546
- });
547
- } finally {
548
- _effect.f();
549
- }
550
- });
551
- var BreadcrumbListItem = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
552
- var _effect = (0, import_tracking4.useSignals)();
553
- try {
554
- const { tx } = useThemeContext();
555
- const Root7 = asChild ? import_react_slot3.Slot : import_react_primitive3.Primitive.li;
556
- return /* @__PURE__ */ import_react12.default.createElement(Root7, {
557
- role: "listitem",
558
- ...props,
559
- className: tx("breadcrumb.listItem", "breadcrumb__list__item", {}, classNames),
560
- ref: forwardedRef
561
- });
562
- } finally {
563
- _effect.f();
564
- }
565
- });
566
- var BreadcrumbLink = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, ...props }, forwardedRef) => {
567
- var _effect = (0, import_tracking4.useSignals)();
568
- try {
569
- const Root7 = asChild ? import_react_slot3.Slot : Link;
570
- return /* @__PURE__ */ import_react12.default.createElement(Root7, {
571
- ...props,
572
- ref: forwardedRef
573
- });
574
- } finally {
575
- _effect.f();
576
- }
577
- });
578
- var BreadcrumbCurrent = /* @__PURE__ */ (0, import_react12.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
579
- var _effect = (0, import_tracking4.useSignals)();
580
- try {
581
- const { tx } = useThemeContext();
582
- const Root7 = asChild ? import_react_slot3.Slot : "h1";
583
- return /* @__PURE__ */ import_react12.default.createElement(Root7, {
584
- ...props,
585
- "aria-current": "page",
586
- className: tx("breadcrumb.current", "breadcrumb__item__heading--current", {}, classNames),
587
- ref: forwardedRef
588
- });
589
- } finally {
590
- _effect.f();
591
- }
592
- });
593
- var BreadcrumbSeparator = ({ children, classNames, ...props }) => {
594
- var _effect = (0, import_tracking4.useSignals)();
595
- try {
596
- const { tx } = useThemeContext();
597
- return /* @__PURE__ */ import_react12.default.createElement(import_react_primitive3.Primitive.span, {
598
- role: "separator",
599
- "aria-hidden": "true",
600
- ...props,
601
- className: tx("breadcrumb.separator", "breadcrumb__separator", {}, classNames)
602
- }, children ?? /* @__PURE__ */ import_react12.default.createElement(import_react11.Dot, {
603
- weight: "bold"
604
- }));
605
- } finally {
606
- _effect.f();
607
- }
608
- };
609
- var Breadcrumb = {
610
- Root: BreadcrumbRoot,
611
- List: BreadcrumbList,
612
- ListItem: BreadcrumbListItem,
613
- Link: BreadcrumbLink,
614
- Current: BreadcrumbCurrent,
615
- Separator: BreadcrumbSeparator
616
- };
617
- var BUTTON_GROUP_NAME = "ButtonGroup";
618
- var BUTTON_NAME = "Button";
619
- var [ButtonGroupProvider, useButtonGroupContext] = (0, import_react_context2.createContext)(BUTTON_GROUP_NAME, {
620
- inGroup: false
621
- });
622
- var Button = /* @__PURE__ */ (0, import_react14.memo)(/* @__PURE__ */ (0, import_react14.forwardRef)(({ classNames, children, density: propsDensity, elevation: propsElevation, variant = "default", asChild, ...props }, ref) => {
623
- var _effect = (0, import_tracking6.useSignals)();
624
- try {
625
- const { inGroup } = useButtonGroupContext(BUTTON_NAME);
626
- const { tx } = useThemeContext();
627
- const elevation = useElevationContext(propsElevation);
628
- const density = useDensityContext(propsDensity);
629
- const Root7 = asChild ? import_react_slot5.Slot : import_react_primitive5.Primitive.button;
630
- return /* @__PURE__ */ import_react14.default.createElement(Root7, {
631
- ref,
632
- ...props,
633
- "data-variant": variant,
634
- "data-density": density,
635
- "data-props": inGroup ? "grouped" : "",
636
- className: tx("button.root", "button", {
637
- variant,
638
- inGroup,
639
- disabled: props.disabled,
640
- density,
641
- elevation
642
- }, classNames),
643
- ...props.disabled && {
644
- disabled: true
645
- }
646
- }, children);
647
- } finally {
648
- _effect.f();
649
- }
650
- }));
651
- Button.displayName = BUTTON_NAME;
652
- var ButtonGroup = /* @__PURE__ */ (0, import_react14.forwardRef)(({ children, elevation: propsElevation, classNames, asChild, ...props }, forwardedRef) => {
653
- var _effect = (0, import_tracking6.useSignals)();
654
- try {
655
- const { tx } = useThemeContext();
656
- const elevation = useElevationContext(propsElevation);
657
- const Root7 = asChild ? import_react_slot5.Slot : import_react_primitive5.Primitive.div;
658
- return /* @__PURE__ */ import_react14.default.createElement(Root7, {
659
- role: "none",
660
- ...props,
661
- className: tx("button.group", "button-group", {
662
- elevation
663
- }, classNames),
664
- ref: forwardedRef
665
- }, /* @__PURE__ */ import_react14.default.createElement(ButtonGroupProvider, {
666
- inGroup: true
667
- }, children));
668
- } finally {
669
- _effect.f();
670
- }
671
- });
672
- ButtonGroup.displayName = BUTTON_GROUP_NAME;
673
- var Icon = /* @__PURE__ */ (0, import_react16.memo)(/* @__PURE__ */ (0, import_react16.forwardRef)(({ icon, classNames, size, ...props }, forwardedRef) => {
674
- var _effect = (0, import_tracking8.useSignals)();
675
- try {
676
- const { tx } = useThemeContext();
677
- const href = useIconHref(icon);
678
- return /* @__PURE__ */ import_react16.default.createElement("svg", {
679
- ...props,
680
- className: tx("icon.root", "icon", {
681
- size
682
- }, classNames),
683
- ref: forwardedRef
684
- }, /* @__PURE__ */ import_react16.default.createElement("use", {
685
- href
686
- }));
687
- } finally {
688
- _effect.f();
689
- }
690
- }));
691
- var [createTooltipContext, createTooltipScope] = (0, import_react_context3.createContextScope)("Tooltip", [
692
- import_react_popper.createPopperScope
693
- ]);
694
- var usePopperScope = (0, import_react_popper.createPopperScope)();
695
- var DEFAULT_DELAY_DURATION = 700;
696
- var TOOLTIP_OPEN = "tooltip.open";
697
- var TOOLTIP_NAME = "Tooltip";
698
- var [TooltipContextProvider, useTooltipContext] = createTooltipContext(TOOLTIP_NAME);
699
- var TooltipProvider = (props) => {
700
- var _effect = (0, import_tracking9.useSignals)();
701
- try {
702
- const { __scopeTooltip, children, open: openProp, defaultOpen = false, onOpenChange, disableHoverableContent = false, delayDuration = DEFAULT_DELAY_DURATION, skipDelayDuration = 300 } = props;
703
- const isOpenDelayedRef = (0, import_react17.useRef)(true);
704
- const isPointerInTransitRef = (0, import_react17.useRef)(false);
705
- const skipDelayTimerRef = (0, import_react17.useRef)(0);
706
- (0, import_react17.useEffect)(() => {
707
- const skipDelayTimer = skipDelayTimerRef.current;
708
- return () => window.clearTimeout(skipDelayTimer);
709
- }, []);
710
- const popperScope = usePopperScope(__scopeTooltip);
711
- const [trigger, setTrigger] = (0, import_react17.useState)(null);
712
- const [content, setContent] = (0, import_react17.useState)("");
713
- const [side, setSide] = (0, import_react17.useState)(void 0);
714
- const triggerRef = (0, import_react17.useRef)(trigger);
715
- const handleTriggerChange = (0, import_react17.useCallback)((nextTrigger) => {
716
- setTrigger(nextTrigger);
717
- triggerRef.current = nextTrigger;
718
- setContent(nextTrigger?.getAttribute("data-tooltip-content") ?? "");
719
- setSide(nextTrigger?.getAttribute("data-tooltip-side") ?? void 0);
720
- }, []);
721
- const contentId = (0, import_react_id.useId)();
722
- const openTimerRef = (0, import_react17.useRef)(0);
723
- const wasOpenDelayedRef = (0, import_react17.useRef)(false);
724
- const handleOpenChange = (0, import_react17.useCallback)((open2) => {
725
- if (open2) {
726
- window.clearTimeout(skipDelayTimerRef.current);
727
- isOpenDelayedRef.current = false;
728
- document.dispatchEvent(new CustomEvent(TOOLTIP_OPEN));
729
- } else {
730
- window.clearTimeout(skipDelayTimerRef.current);
731
- skipDelayTimerRef.current = window.setTimeout(() => isOpenDelayedRef.current = true, skipDelayDuration);
732
- }
733
- onOpenChange?.(open2);
734
- }, [
735
- skipDelayDuration,
736
- onOpenChange
737
- ]);
738
- const [open = false, setOpen] = (0, import_react_use_controllable_state.useControllableState)({
739
- prop: openProp,
740
- defaultProp: defaultOpen,
741
- onChange: handleOpenChange
742
- });
743
- const stateAttribute = (0, import_react17.useMemo)(() => {
744
- return open ? wasOpenDelayedRef.current ? "delayed-open" : "instant-open" : "closed";
745
- }, [
746
- open
747
- ]);
748
- const handleOpen = (0, import_react17.useCallback)(() => {
749
- window.clearTimeout(openTimerRef.current);
750
- openTimerRef.current = 0;
751
- wasOpenDelayedRef.current = false;
752
- setOpen(true);
753
- }, [
754
- setOpen
755
- ]);
756
- const handleClose = (0, import_react17.useCallback)(() => {
757
- window.clearTimeout(openTimerRef.current);
758
- openTimerRef.current = 0;
759
- setOpen(false);
760
- }, [
761
- setOpen
762
- ]);
763
- const handleDelayedOpen = (0, import_react17.useCallback)(() => {
764
- window.clearTimeout(openTimerRef.current);
765
- openTimerRef.current = window.setTimeout(() => {
766
- wasOpenDelayedRef.current = true;
767
- setOpen(true);
768
- openTimerRef.current = 0;
769
- }, delayDuration);
770
- }, [
771
- delayDuration,
772
- setOpen
773
- ]);
774
- (0, import_react17.useEffect)(() => {
775
- return () => {
776
- if (openTimerRef.current) {
777
- window.clearTimeout(openTimerRef.current);
778
- openTimerRef.current = 0;
779
- }
780
- };
781
- }, []);
782
- const { tx } = useThemeContext();
783
- const elevation = useElevationContext();
784
- return /* @__PURE__ */ import_react17.default.createElement(PopperPrimitive.Root, popperScope, /* @__PURE__ */ import_react17.default.createElement(TooltipContextProvider, {
785
- scope: __scopeTooltip,
786
- contentId,
787
- open,
788
- stateAttribute,
789
- trigger,
790
- onTriggerChange: handleTriggerChange,
791
- onTriggerEnter: (0, import_react17.useCallback)(() => {
792
- if (isOpenDelayedRef.current) {
793
- handleDelayedOpen();
794
- } else {
795
- handleOpen();
796
- }
797
- }, [
798
- isOpenDelayedRef,
799
- handleDelayedOpen,
800
- handleOpen
801
- ]),
802
- onTriggerLeave: (0, import_react17.useCallback)(() => {
803
- if (disableHoverableContent) {
804
- handleClose();
805
- } else {
806
- window.clearTimeout(openTimerRef.current);
807
- openTimerRef.current = 0;
808
- }
809
- }, [
810
- handleClose,
811
- disableHoverableContent
812
- ]),
813
- onOpen: handleOpen,
814
- onClose: handleClose,
815
- disableHoverableContent,
816
- isPointerInTransitRef,
817
- onPointerInTransitChange: (0, import_react17.useCallback)((inTransit) => {
818
- isPointerInTransitRef.current = inTransit;
819
- }, [])
820
- }, /* @__PURE__ */ import_react17.default.createElement(TooltipContent, {
821
- side,
822
- className: tx("tooltip.content", "tooltip", {
823
- elevation
824
- })
825
- }, content, /* @__PURE__ */ import_react17.default.createElement(TooltipArrow, {
826
- className: tx("tooltip.arrow", "tooltip__arrow")
827
- })), /* @__PURE__ */ import_react17.default.createElement(TooltipVirtualTrigger, {
828
- virtualRef: triggerRef
829
- }), children));
830
- } finally {
831
- _effect.f();
832
- }
833
- };
834
- TooltipProvider.displayName = TOOLTIP_NAME;
835
- var TooltipVirtualTrigger = ({ virtualRef, __scopeTooltip }) => {
836
- var _effect = (0, import_tracking9.useSignals)();
837
- try {
838
- const popperScope = usePopperScope(__scopeTooltip);
839
- return /* @__PURE__ */ import_react17.default.createElement(PopperPrimitive.Anchor, {
840
- asChild: true,
841
- ...popperScope,
842
- virtualRef
843
- });
844
- } finally {
845
- _effect.f();
846
- }
847
- };
848
- var TRIGGER_NAME = "TooltipTrigger";
849
- var TooltipTrigger = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
850
- var _effect = (0, import_tracking9.useSignals)();
851
- try {
852
- const {
853
- __scopeTooltip,
854
- onInteract,
855
- // TODO(thure): Pass `delayDuration` into the context.
856
- delayDuration: _delayDuration,
857
- side,
858
- content,
859
- ...triggerProps
860
- } = props;
861
- const context = useTooltipContext(TRIGGER_NAME, __scopeTooltip);
862
- const ref = (0, import_react17.useRef)(null);
863
- const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
864
- const isPointerDownRef = (0, import_react17.useRef)(false);
865
- const hasPointerMoveOpenedRef = (0, import_react17.useRef)(false);
866
- const handlePointerUp = (0, import_react17.useCallback)(() => isPointerDownRef.current = false, []);
867
- (0, import_react17.useEffect)(() => {
868
- return () => document.removeEventListener("pointerup", handlePointerUp);
869
- }, [
870
- handlePointerUp
871
- ]);
872
- return /* @__PURE__ */ import_react17.default.createElement(import_react_primitive6.Primitive.button, {
873
- // We purposefully avoid adding `type=button` here because tooltip triggers are also
874
- // commonly anchors and the anchor `type` attribute signifies MIME type.
875
- "aria-describedby": context.open ? context.contentId : void 0,
876
- "data-state": context.stateAttribute,
877
- "data-tooltip-content": content,
878
- "data-tooltip-side": side,
879
- ...triggerProps,
880
- ref: composedRefs,
881
- onPointerMove: (0, import_primitive.composeEventHandlers)(props.onPointerMove, (event) => {
882
- if (event.pointerType === "touch") {
883
- return;
884
- }
885
- if (!hasPointerMoveOpenedRef.current && !context.isPointerInTransitRef.current) {
886
- onInteract?.(event);
887
- if (event.defaultPrevented) {
888
- return;
889
- }
890
- context.onTriggerChange(ref.current);
891
- context.onTriggerEnter();
892
- hasPointerMoveOpenedRef.current = true;
893
- }
894
- }),
895
- onPointerLeave: (0, import_primitive.composeEventHandlers)(props.onPointerLeave, () => {
896
- context.onTriggerLeave();
897
- hasPointerMoveOpenedRef.current = false;
898
- }),
899
- onPointerDown: (0, import_primitive.composeEventHandlers)(props.onPointerDown, () => {
900
- if (context.open) {
901
- context.onClose();
902
- }
903
- isPointerDownRef.current = true;
904
- document.addEventListener("pointerup", handlePointerUp, {
905
- once: true
906
- });
907
- }),
908
- onFocus: props.onFocus,
909
- onBlur: (0, import_primitive.composeEventHandlers)(props.onBlur, context.onClose),
910
- onClick: (0, import_primitive.composeEventHandlers)(props.onClick, context.onClose)
911
- });
912
- } finally {
913
- _effect.f();
914
- }
915
- });
916
- TooltipTrigger.displayName = TRIGGER_NAME;
917
- var PORTAL_NAME = "TooltipPortal";
918
- var [PortalProvider, usePortalContext] = createTooltipContext(PORTAL_NAME, {
919
- forceMount: void 0
920
- });
921
- var TooltipPortal = (props) => {
922
- var _effect = (0, import_tracking9.useSignals)();
923
- try {
924
- const { __scopeTooltip, forceMount, children, container } = props;
925
- const context = useTooltipContext(PORTAL_NAME, __scopeTooltip);
926
- return /* @__PURE__ */ import_react17.default.createElement(PortalProvider, {
927
- scope: __scopeTooltip,
928
- forceMount
929
- }, /* @__PURE__ */ import_react17.default.createElement(import_react_presence.Presence, {
930
- present: forceMount || context.open
931
- }, /* @__PURE__ */ import_react17.default.createElement(import_react_portal.Portal, {
932
- asChild: true,
933
- container
934
- }, children)));
935
- } finally {
936
- _effect.f();
937
- }
938
- };
939
- TooltipPortal.displayName = PORTAL_NAME;
940
- var CONTENT_NAME = "TooltipContent";
941
- var TooltipContent = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
942
- var _effect = (0, import_tracking9.useSignals)();
943
- try {
944
- const portalContext = usePortalContext(CONTENT_NAME, props.__scopeTooltip);
945
- const { forceMount = portalContext.forceMount, side = "top", ...contentProps } = props;
946
- const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
947
- return /* @__PURE__ */ import_react17.default.createElement(import_react_presence.Presence, {
948
- present: forceMount || context.open
949
- }, context.disableHoverableContent ? /* @__PURE__ */ import_react17.default.createElement(TooltipContentImpl, {
950
- side,
951
- ...contentProps,
952
- ref: forwardedRef
953
- }) : /* @__PURE__ */ import_react17.default.createElement(TooltipContentHoverable, {
954
- side,
955
- ...contentProps,
956
- ref: forwardedRef
957
- }));
958
- } finally {
959
- _effect.f();
960
- }
961
- });
962
- var TooltipContentHoverable = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
963
- var _effect = (0, import_tracking9.useSignals)();
964
- try {
965
- const context = useTooltipContext(CONTENT_NAME, props.__scopeTooltip);
966
- const ref = (0, import_react17.useRef)(null);
967
- const composedRefs = (0, import_react_compose_refs.useComposedRefs)(forwardedRef, ref);
968
- const [pointerGraceArea, setPointerGraceArea] = (0, import_react17.useState)(null);
969
- const { trigger, onClose } = context;
970
- const content = ref.current;
971
- const { onPointerInTransitChange } = context;
972
- const handleRemoveGraceArea = (0, import_react17.useCallback)(() => {
973
- setPointerGraceArea(null);
974
- onPointerInTransitChange(false);
975
- }, [
976
- onPointerInTransitChange
977
- ]);
978
- const handleCreateGraceArea = (0, import_react17.useCallback)((event, hoverTarget) => {
979
- const currentTarget = event.currentTarget;
980
- const exitPoint = {
981
- x: event.clientX,
982
- y: event.clientY
983
- };
984
- const exitSide = getExitSideFromRect(exitPoint, currentTarget.getBoundingClientRect());
985
- const paddedExitPoints = getPaddedExitPoints(exitPoint, exitSide);
986
- const hoverTargetPoints = getPointsFromRect(hoverTarget.getBoundingClientRect());
987
- const graceArea = getHull([
988
- ...paddedExitPoints,
989
- ...hoverTargetPoints
990
- ]);
991
- setPointerGraceArea(graceArea);
992
- onPointerInTransitChange(true);
993
- }, [
994
- onPointerInTransitChange
995
- ]);
996
- (0, import_react17.useEffect)(() => {
997
- return () => handleRemoveGraceArea();
998
- }, [
999
- handleRemoveGraceArea
1000
- ]);
1001
- (0, import_react17.useEffect)(() => {
1002
- if (trigger && content) {
1003
- const handleTriggerLeave = (event) => handleCreateGraceArea(event, content);
1004
- const handleContentLeave = (event) => handleCreateGraceArea(event, trigger);
1005
- trigger.addEventListener("pointerleave", handleTriggerLeave);
1006
- content.addEventListener("pointerleave", handleContentLeave);
1007
- return () => {
1008
- trigger.removeEventListener("pointerleave", handleTriggerLeave);
1009
- content.removeEventListener("pointerleave", handleContentLeave);
1010
- };
1011
- }
1012
- }, [
1013
- trigger,
1014
- content,
1015
- handleCreateGraceArea,
1016
- handleRemoveGraceArea
1017
- ]);
1018
- (0, import_react17.useEffect)(() => {
1019
- if (pointerGraceArea) {
1020
- const handleTrackPointerGrace = (event) => {
1021
- const target = event.target;
1022
- const pointerPosition = {
1023
- x: event.clientX,
1024
- y: event.clientY
1025
- };
1026
- const hasEnteredTarget = trigger?.contains(target) || content?.contains(target);
1027
- const isPointerOutsideGraceArea = !isPointInPolygon(pointerPosition, pointerGraceArea);
1028
- if (hasEnteredTarget) {
1029
- handleRemoveGraceArea();
1030
- } else if (isPointerOutsideGraceArea) {
1031
- handleRemoveGraceArea();
1032
- onClose();
1033
- }
1034
- };
1035
- document.addEventListener("pointermove", handleTrackPointerGrace);
1036
- return () => document.removeEventListener("pointermove", handleTrackPointerGrace);
1037
- }
1038
- }, [
1039
- trigger,
1040
- content,
1041
- pointerGraceArea,
1042
- onClose,
1043
- handleRemoveGraceArea
1044
- ]);
1045
- return /* @__PURE__ */ import_react17.default.createElement(TooltipContentImpl, {
1046
- ...props,
1047
- ref: composedRefs
1048
- });
1049
- } finally {
1050
- _effect.f();
1051
- }
1052
- });
1053
- var [VisuallyHiddenContentContextProvider, useVisuallyHiddenContentContext] = createTooltipContext(TOOLTIP_NAME, {
1054
- isInside: false
1055
- });
1056
- var TooltipContentImpl = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
1057
- var _effect = (0, import_tracking9.useSignals)();
1058
- try {
1059
- const { __scopeTooltip, children, "aria-label": ariaLabel, onEscapeKeyDown, onPointerDownOutside, ...contentProps } = props;
1060
- const context = useTooltipContext(CONTENT_NAME, __scopeTooltip);
1061
- const popperScope = usePopperScope(__scopeTooltip);
1062
- const { onClose } = context;
1063
- (0, import_react17.useEffect)(() => {
1064
- document.addEventListener(TOOLTIP_OPEN, onClose);
1065
- return () => document.removeEventListener(TOOLTIP_OPEN, onClose);
1066
- }, [
1067
- onClose
1068
- ]);
1069
- (0, import_react17.useEffect)(() => {
1070
- if (context.trigger) {
1071
- const handleScroll = (event) => {
1072
- const target = event.target;
1073
- if (target?.contains(context.trigger)) {
1074
- onClose();
1075
- }
1076
- };
1077
- window.addEventListener("scroll", handleScroll, {
1078
- capture: true
1079
- });
1080
- return () => window.removeEventListener("scroll", handleScroll, {
1081
- capture: true
1082
- });
1083
- }
1084
- }, [
1085
- context.trigger,
1086
- onClose
1087
- ]);
1088
- return /* @__PURE__ */ import_react17.default.createElement(import_react_dismissable_layer.DismissableLayer, {
1089
- asChild: true,
1090
- disableOutsidePointerEvents: false,
1091
- onEscapeKeyDown,
1092
- onPointerDownOutside,
1093
- onFocusOutside: (event) => event.preventDefault(),
1094
- onDismiss: onClose
1095
- }, /* @__PURE__ */ import_react17.default.createElement(PopperPrimitive.Content, {
1096
- "data-state": context.stateAttribute,
1097
- ...popperScope,
1098
- ...contentProps,
1099
- ref: forwardedRef,
1100
- style: {
1101
- ...contentProps.style,
1102
- // re-namespace exposed content custom properties
1103
- ...{
1104
- "--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
1105
- "--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
1106
- "--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
1107
- "--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
1108
- "--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
1109
- }
1110
- }
1111
- }, /* @__PURE__ */ import_react17.default.createElement(import_react_slot6.Slottable, null, children), /* @__PURE__ */ import_react17.default.createElement(VisuallyHiddenContentContextProvider, {
1112
- scope: __scopeTooltip,
1113
- isInside: true
1114
- }, /* @__PURE__ */ import_react17.default.createElement(VisuallyHiddenPrimitive.Root, {
1115
- id: context.contentId,
1116
- role: "tooltip"
1117
- }, ariaLabel || children))));
1118
- } finally {
1119
- _effect.f();
1120
- }
1121
- });
1122
- TooltipContent.displayName = CONTENT_NAME;
1123
- var ARROW_NAME = "TooltipArrow";
1124
- var TooltipArrow = /* @__PURE__ */ (0, import_react17.forwardRef)((props, forwardedRef) => {
1125
- var _effect = (0, import_tracking9.useSignals)();
1126
- try {
1127
- const { __scopeTooltip, ...arrowProps } = props;
1128
- const popperScope = usePopperScope(__scopeTooltip);
1129
- const visuallyHiddenContentContext = useVisuallyHiddenContentContext(ARROW_NAME, __scopeTooltip);
1130
- return visuallyHiddenContentContext.isInside ? null : /* @__PURE__ */ import_react17.default.createElement(PopperPrimitive.Arrow, {
1131
- ...popperScope,
1132
- ...arrowProps,
1133
- ref: forwardedRef
1134
- });
1135
- } finally {
1136
- _effect.f();
1137
- }
1138
- });
1139
- TooltipArrow.displayName = ARROW_NAME;
1140
- var getExitSideFromRect = (point, rect) => {
1141
- const top = Math.abs(rect.top - point.y);
1142
- const bottom = Math.abs(rect.bottom - point.y);
1143
- const right = Math.abs(rect.right - point.x);
1144
- const left = Math.abs(rect.left - point.x);
1145
- switch (Math.min(top, bottom, right, left)) {
1146
- case left:
1147
- return "left";
1148
- case right:
1149
- return "right";
1150
- case top:
1151
- return "top";
1152
- case bottom:
1153
- return "bottom";
1154
- default:
1155
- throw new Error("unreachable");
1156
- }
1157
- };
1158
- var getPaddedExitPoints = (exitPoint, exitSide, padding = 5) => {
1159
- const paddedExitPoints = [];
1160
- switch (exitSide) {
1161
- case "top":
1162
- paddedExitPoints.push({
1163
- x: exitPoint.x - padding,
1164
- y: exitPoint.y + padding
1165
- }, {
1166
- x: exitPoint.x + padding,
1167
- y: exitPoint.y + padding
1168
- });
1169
- break;
1170
- case "bottom":
1171
- paddedExitPoints.push({
1172
- x: exitPoint.x - padding,
1173
- y: exitPoint.y - padding
1174
- }, {
1175
- x: exitPoint.x + padding,
1176
- y: exitPoint.y - padding
1177
- });
1178
- break;
1179
- case "left":
1180
- paddedExitPoints.push({
1181
- x: exitPoint.x + padding,
1182
- y: exitPoint.y - padding
1183
- }, {
1184
- x: exitPoint.x + padding,
1185
- y: exitPoint.y + padding
1186
- });
1187
- break;
1188
- case "right":
1189
- paddedExitPoints.push({
1190
- x: exitPoint.x - padding,
1191
- y: exitPoint.y - padding
1192
- }, {
1193
- x: exitPoint.x - padding,
1194
- y: exitPoint.y + padding
1195
- });
1196
- break;
1197
- }
1198
- return paddedExitPoints;
1199
- };
1200
- var getPointsFromRect = (rect) => {
1201
- const { top, right, bottom, left } = rect;
1202
- return [
1203
- {
1204
- x: left,
1205
- y: top
1206
- },
1207
- {
1208
- x: right,
1209
- y: top
1210
- },
1211
- {
1212
- x: right,
1213
- y: bottom
1214
- },
1215
- {
1216
- x: left,
1217
- y: bottom
1218
- }
1219
- ];
1220
- };
1221
- var isPointInPolygon = (point, polygon) => {
1222
- const { x, y } = point;
1223
- let inside = false;
1224
- for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
1225
- const xi = polygon[i].x;
1226
- const yi = polygon[i].y;
1227
- const xj = polygon[j].x;
1228
- const yj = polygon[j].y;
1229
- const intersect = yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi;
1230
- if (intersect) {
1231
- inside = !inside;
1232
- }
1233
- }
1234
- return inside;
1235
- };
1236
- var getHull = (points) => {
1237
- const newPoints = points.slice();
1238
- newPoints.sort((a, b) => {
1239
- if (a.x < b.x) {
1240
- return -1;
1241
- } else if (a.x > b.x) {
1242
- return 1;
1243
- } else if (a.y < b.y) {
1244
- return -1;
1245
- } else if (a.y > b.y) {
1246
- return 1;
1247
- } else {
1248
- return 0;
1249
- }
1250
- });
1251
- return getHullPresorted(newPoints);
1252
- };
1253
- var getHullPresorted = (points) => {
1254
- if (points.length <= 1) {
1255
- return points.slice();
1256
- }
1257
- const upperHull = [];
1258
- for (let i = 0; i < points.length; i++) {
1259
- const p = points[i];
1260
- while (upperHull.length >= 2) {
1261
- const q = upperHull[upperHull.length - 1];
1262
- const r = upperHull[upperHull.length - 2];
1263
- if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
1264
- upperHull.pop();
1265
- } else {
1266
- break;
1267
- }
1268
- }
1269
- upperHull.push(p);
1270
- }
1271
- upperHull.pop();
1272
- const lowerHull = [];
1273
- for (let i = points.length - 1; i >= 0; i--) {
1274
- const p = points[i];
1275
- while (lowerHull.length >= 2) {
1276
- const q = lowerHull[lowerHull.length - 1];
1277
- const r = lowerHull[lowerHull.length - 2];
1278
- if ((q.x - r.x) * (p.y - r.y) >= (q.y - r.y) * (p.x - r.x)) {
1279
- lowerHull.pop();
1280
- } else {
1281
- break;
1282
- }
1283
- }
1284
- lowerHull.push(p);
1285
- }
1286
- lowerHull.pop();
1287
- if (upperHull.length === 1 && lowerHull.length === 1 && upperHull[0].x === lowerHull[0].x && upperHull[0].y === lowerHull[0].y) {
1288
- return upperHull;
1289
- } else {
1290
- return upperHull.concat(lowerHull);
1291
- }
1292
- };
1293
- var Tooltip = {
1294
- Provider: TooltipProvider,
1295
- Trigger: TooltipTrigger
1296
- };
1297
- var IconOnlyButton = /* @__PURE__ */ (0, import_react15.forwardRef)(({ noTooltip, tooltipPortal = true, tooltipSide, ...props }, forwardedRef) => {
1298
- var _effect = (0, import_tracking7.useSignals)();
1299
- try {
1300
- if (noTooltip) {
1301
- return /* @__PURE__ */ import_react15.default.createElement(LabelledIconButton, {
1302
- ...props,
1303
- ref: forwardedRef
1304
- });
1305
- }
1306
- return /* @__PURE__ */ import_react15.default.createElement(Tooltip.Trigger, {
1307
- asChild: true,
1308
- content: props.label,
1309
- side: tooltipSide
1310
- }, /* @__PURE__ */ import_react15.default.createElement(LabelledIconButton, {
1311
- ...props,
1312
- ref: forwardedRef
1313
- }));
1314
- } finally {
1315
- _effect.f();
1316
- }
1317
- });
1318
- var LabelledIconButton = /* @__PURE__ */ (0, import_react15.forwardRef)(({ icon, size, iconOnly, label, classNames, iconClassNames, caretDown, ...props }, forwardedRef) => {
1319
- var _effect = (0, import_tracking7.useSignals)();
1320
- try {
1321
- const { tx } = useThemeContext();
1322
- return /* @__PURE__ */ import_react15.default.createElement(Button, {
1323
- ...props,
1324
- classNames: tx("iconButton.root", "iconButton", {}, classNames),
1325
- ref: forwardedRef
1326
- }, /* @__PURE__ */ import_react15.default.createElement(Icon, {
1327
- icon,
1328
- size,
1329
- classNames: iconClassNames
1330
- }), /* @__PURE__ */ import_react15.default.createElement("span", {
1331
- className: iconOnly ? "sr-only" : void 0
1332
- }, label), caretDown && /* @__PURE__ */ import_react15.default.createElement(Icon, {
1333
- size: 3,
1334
- icon: "ph--caret-down--bold"
1335
- }));
1336
- } finally {
1337
- _effect.f();
1338
- }
1339
- });
1340
- var IconButton = /* @__PURE__ */ (0, import_react15.forwardRef)((props, forwardedRef) => {
1341
- var _effect = (0, import_tracking7.useSignals)();
1342
- try {
1343
- return props.iconOnly ? /* @__PURE__ */ import_react15.default.createElement(IconOnlyButton, {
1344
- ...props,
1345
- ref: forwardedRef
1346
- }) : /* @__PURE__ */ import_react15.default.createElement(LabelledIconButton, {
1347
- ...props,
1348
- ref: forwardedRef
1349
- });
1350
- } finally {
1351
- _effect.f();
1352
- }
1353
- });
1354
- var Toggle = /* @__PURE__ */ (0, import_react18.forwardRef)(({ defaultPressed, pressed, onPressedChange, ...props }, forwardedRef) => {
1355
- var _effect = (0, import_tracking10.useSignals)();
1356
- try {
1357
- return /* @__PURE__ */ import_react18.default.createElement(import_react_toggle.Toggle, {
1358
- defaultPressed,
1359
- pressed,
1360
- onPressedChange,
1361
- asChild: true
1362
- }, /* @__PURE__ */ import_react18.default.createElement(Button, {
1363
- ...props,
1364
- ref: forwardedRef
1365
- }));
1366
- } finally {
1367
- _effect.f();
1368
- }
1369
- });
1370
- var ToggleGroup = /* @__PURE__ */ (0, import_react19.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
1371
- var _effect = (0, import_tracking11.useSignals)();
1372
- try {
1373
- return /* @__PURE__ */ import_react19.default.createElement(import_react_toggle_group.ToggleGroup, {
1374
- ...props,
1375
- asChild: true
1376
- }, /* @__PURE__ */ import_react19.default.createElement(ButtonGroup, {
1377
- classNames,
1378
- children,
1379
- ref: forwardedRef
1380
- }));
1381
- } finally {
1382
- _effect.f();
1383
- }
1384
- });
1385
- var ToggleGroupItem = /* @__PURE__ */ (0, import_react19.forwardRef)(({ variant, elevation, density, classNames, children, ...props }, forwardedRef) => {
1386
- var _effect = (0, import_tracking11.useSignals)();
1387
- try {
1388
- return /* @__PURE__ */ import_react19.default.createElement(import_react_toggle_group.ToggleGroupItem, {
1389
- ...props,
1390
- asChild: true
1391
- }, /* @__PURE__ */ import_react19.default.createElement(Button, {
1392
- variant,
1393
- elevation,
1394
- density,
1395
- classNames,
1396
- children,
1397
- ref: forwardedRef
1398
- }));
1399
- } finally {
1400
- _effect.f();
1401
- }
1402
- });
1403
- var ClipboardContext = /* @__PURE__ */ (0, import_react20.createContext)({
1404
- textValue: "",
1405
- setTextValue: async (_) => {
1406
- }
1407
- });
1408
- var useClipboard = () => (0, import_react20.useContext)(ClipboardContext);
1409
- var ClipboardProvider = ({ children }) => {
1410
- var _effect = (0, import_tracking12.useSignals)();
1411
- try {
1412
- const [textValue, setInternalTextValue] = (0, import_react20.useState)("");
1413
- const setTextValue = (0, import_react20.useCallback)(async (nextValue) => {
1414
- await navigator.clipboard.writeText(nextValue);
1415
- return setInternalTextValue(nextValue);
1416
- }, []);
1417
- return /* @__PURE__ */ import_react20.default.createElement(ClipboardContext.Provider, {
1418
- value: {
1419
- textValue,
1420
- setTextValue
1421
- }
1422
- }, children);
1423
- } finally {
1424
- _effect.f();
1425
- }
1426
- };
1427
- var hasIosKeyboard = () => {
1428
- return !!navigator.userAgent.match(/iP(ad|od|hone).+Safari/);
1429
- };
1430
- var DensityContext = /* @__PURE__ */ (0, import_react23.createContext)({
1431
- density: "fine"
1432
- });
1433
- var DensityProvider = ({ density, children }) => {
1434
- var _effect = (0, import_tracking15.useSignals)();
1435
- try {
1436
- return /* @__PURE__ */ import_react23.default.createElement(DensityContext.Provider, {
1437
- value: {
1438
- density
1439
- }
1440
- }, children);
1441
- } finally {
1442
- _effect.f();
1443
- }
1444
- };
1445
- var ElevationContext = /* @__PURE__ */ (0, import_react24.createContext)({
1446
- elevation: "base"
1447
- });
1448
- var ElevationProvider = ({ elevation, children }) => {
1449
- var _effect = (0, import_tracking16.useSignals)();
1450
- try {
1451
- return /* @__PURE__ */ import_react24.default.createElement(ElevationContext.Provider, {
1452
- value: {
1453
- elevation
1454
- }
1455
- }, children);
1456
- } finally {
1457
- _effect.f();
1458
- }
1459
- };
1460
- var ThemeContext = /* @__PURE__ */ (0, import_react22.createContext)(void 0);
1461
- var ThemeProvider = ({ children, fallback = null, resourceExtensions, appNs, tx = (_path, defaultClassName, _styleProps, ..._options) => defaultClassName, themeMode = "dark", rootDensity = "fine", ...rest }) => {
1462
- var _effect = (0, import_tracking14.useSignals)();
1463
- try {
1464
- (0, import_react22.useEffect)(() => {
1465
- if (document.defaultView) {
1466
- const kb = (0, import_keyborg.createKeyborg)(document.defaultView);
1467
- kb.subscribe(handleInputModalityChange);
1468
- return () => kb.unsubscribe(handleInputModalityChange);
1469
- }
1470
- }, []);
1471
- const safeAreaPadding = useSafeArea();
1472
- const contextValue = (0, import_react22.useMemo)(() => ({
1473
- tx,
1474
- themeMode,
1475
- hasIosKeyboard: hasIosKeyboard(),
1476
- safeAreaPadding,
1477
- ...rest
1478
- }), [
1479
- tx,
1480
- themeMode,
1481
- safeAreaPadding,
1482
- rest
1483
- ]);
1484
- return /* @__PURE__ */ import_react22.default.createElement(ThemeContext.Provider, {
1485
- value: contextValue
1486
- }, /* @__PURE__ */ import_react22.default.createElement(TranslationsProvider, {
1487
- fallback,
1488
- resourceExtensions,
1489
- appNs
1490
- }, /* @__PURE__ */ import_react22.default.createElement(ElevationProvider, {
1491
- elevation: "base"
1492
- }, /* @__PURE__ */ import_react22.default.createElement(DensityProvider, {
1493
- density: rootDensity
1494
- }, children))));
1495
- } finally {
1496
- _effect.f();
1497
- }
1498
- };
1499
- var handleInputModalityChange = (isUsingKeyboard) => {
1500
- if (isUsingKeyboard) {
1501
- document.body.setAttribute("data-is-keyboard", "true");
1502
- } else {
1503
- document.body.removeAttribute("data-is-keyboard");
1504
- }
1505
- };
1506
- var inactiveLabelStyles = "invisible bs-px -mbe-px overflow-hidden";
1507
- var CopyButton = ({ value, classNames, iconProps, ...props }) => {
1508
- var _effect = (0, import_tracking13.useSignals)();
1509
- try {
1510
- const { t } = useTranslation("os");
1511
- const { textValue, setTextValue } = useClipboard();
1512
- const isCopied = textValue === value;
1513
- return /* @__PURE__ */ import_react21.default.createElement(Button, {
1514
- ...props,
1515
- classNames: [
1516
- "inline-flex flex-col justify-center",
1517
- classNames
1518
- ],
1519
- onClick: () => setTextValue(value),
1520
- "data-testid": "copy-invitation"
1521
- }, /* @__PURE__ */ import_react21.default.createElement("div", {
1522
- role: "none",
1523
- className: (0, import_react_ui_theme2.mx)("flex gap-1 items-center", isCopied && inactiveLabelStyles)
1524
- }, /* @__PURE__ */ import_react21.default.createElement("span", {
1525
- className: "pli-1"
1526
- }, t("copy label")), /* @__PURE__ */ import_react21.default.createElement(Icon, {
1527
- icon: "ph--copy--regular",
1528
- size: 5,
1529
- ...iconProps
1530
- })), /* @__PURE__ */ import_react21.default.createElement("div", {
1531
- role: "none",
1532
- className: (0, import_react_ui_theme2.mx)("flex gap-1 items-center", !isCopied && inactiveLabelStyles)
1533
- }, /* @__PURE__ */ import_react21.default.createElement("span", {
1534
- className: "pli-1"
1535
- }, t("copy success label")), /* @__PURE__ */ import_react21.default.createElement(Icon, {
1536
- icon: "ph--check--regular",
1537
- size: 5,
1538
- ...iconProps
1539
- })));
1540
- } finally {
1541
- _effect.f();
1542
- }
1543
- };
1544
- var CopyButtonIconOnly = ({ __scopeTooltip, value, classNames, iconProps, variant, ...props }) => {
1545
- var _effect = (0, import_tracking13.useSignals)();
1546
- try {
1547
- const { t } = useTranslation("os");
1548
- const { textValue, setTextValue } = useClipboard();
1549
- const isCopied = textValue === value;
1550
- const label = isCopied ? t("copy success label") : props.label ?? t("copy label");
1551
- const { onOpen } = useTooltipContext("CopyButton", __scopeTooltip);
1552
- return /* @__PURE__ */ import_react21.default.createElement(IconButton, {
1553
- iconOnly: true,
1554
- label,
1555
- icon: "ph--copy--regular",
1556
- size: 5,
1557
- variant,
1558
- classNames: [
1559
- "inline-flex flex-col justify-center",
1560
- classNames
1561
- ],
1562
- onClick: () => setTextValue(value).then(onOpen),
1563
- "data-testid": "copy-invitation"
1564
- });
1565
- } finally {
1566
- _effect.f();
1567
- }
1568
- };
1569
- var Clipboard = {
1570
- Button: CopyButton,
1571
- IconButton: CopyButtonIconOnly,
1572
- Provider: ClipboardProvider
1573
- };
1574
- var DialogRoot = (props) => {
1575
- var _effect = (0, import_tracking17.useSignals)();
1576
- try {
1577
- return /* @__PURE__ */ import_react25.default.createElement(ElevationProvider, {
1578
- elevation: "dialog"
1579
- }, /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.Root, props));
1580
- } finally {
1581
- _effect.f();
1582
- }
1583
- };
1584
- var DialogTrigger = import_react_dialog.DialogTrigger;
1585
- var DialogPortal = import_react_dialog.DialogPortal;
1586
- var DialogTitle = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
1587
- var _effect = (0, import_tracking17.useSignals)();
1588
- try {
1589
- const { tx } = useThemeContext();
1590
- return /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.DialogTitle, {
1591
- ...props,
1592
- className: tx("dialog.title", "dialog__title", {
1593
- srOnly
1594
- }, classNames),
1595
- ref: forwardedRef
1596
- });
1597
- } finally {
1598
- _effect.f();
1599
- }
1600
- });
1601
- var DialogDescription = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
1602
- var _effect = (0, import_tracking17.useSignals)();
1603
- try {
1604
- const { tx } = useThemeContext();
1605
- return /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.DialogDescription, {
1606
- ...props,
1607
- className: tx("dialog.description", "dialog__description", {
1608
- srOnly
1609
- }, classNames),
1610
- ref: forwardedRef
1611
- });
1612
- } finally {
1613
- _effect.f();
1614
- }
1615
- });
1616
- var DialogClose = import_react_dialog.DialogClose;
1617
- var DIALOG_OVERLAY_NAME = "DialogOverlay";
1618
- var DIALOG_CONTENT_NAME = "DialogContent";
1619
- var [OverlayLayoutProvider, useOverlayLayoutContext] = (0, import_react_context4.createContext)(DIALOG_OVERLAY_NAME, {});
1620
- var DialogOverlay = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
1621
- var _effect = (0, import_tracking17.useSignals)();
1622
- try {
1623
- const { tx } = useThemeContext();
1624
- return /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.DialogOverlay, {
1625
- ...props,
1626
- className: tx("dialog.overlay", "dialog__overlay", {}, classNames),
1627
- ref: forwardedRef,
1628
- "data-block-align": blockAlign
1629
- }, /* @__PURE__ */ import_react25.default.createElement(OverlayLayoutProvider, {
1630
- inOverlayLayout: true
1631
- }, children));
1632
- } finally {
1633
- _effect.f();
1634
- }
1635
- });
1636
- DialogOverlay.displayName = DIALOG_OVERLAY_NAME;
1637
- var DialogContent = /* @__PURE__ */ (0, import_react25.forwardRef)(({ classNames, children, inOverlayLayout: propsInOverlayLayout, ...props }, forwardedRef) => {
1638
- var _effect = (0, import_tracking17.useSignals)();
1639
- try {
1640
- const { tx } = useThemeContext();
1641
- const { inOverlayLayout } = useOverlayLayoutContext(DIALOG_CONTENT_NAME);
1642
- return /* @__PURE__ */ import_react25.default.createElement(import_react_dialog.DialogContent, {
1643
- // NOTE: Radix warning unless set to undefined.
1644
- // https://www.radix-ui.com/primitives/docs/components/dialog#description
1645
- "aria-describedby": void 0,
1646
- ...props,
1647
- className: tx("dialog.content", "dialog", {
1648
- inOverlayLayout: propsInOverlayLayout || inOverlayLayout
1649
- }, classNames),
1650
- ref: forwardedRef
1651
- }, children);
1652
- } finally {
1653
- _effect.f();
1654
- }
1655
- });
1656
- DialogContent.displayName = DIALOG_CONTENT_NAME;
1657
- var Dialog = {
1658
- Root: DialogRoot,
1659
- Trigger: DialogTrigger,
1660
- Portal: DialogPortal,
1661
- Overlay: DialogOverlay,
1662
- Content: DialogContent,
1663
- Title: DialogTitle,
1664
- Description: DialogDescription,
1665
- Close: DialogClose
1666
- };
1667
- var AlertDialogRoot = (props) => {
1668
- var _effect = (0, import_tracking18.useSignals)();
1669
- try {
1670
- return /* @__PURE__ */ import_react26.default.createElement(ElevationProvider, {
1671
- elevation: "dialog"
1672
- }, /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.Root, props));
1673
- } finally {
1674
- _effect.f();
1675
- }
1676
- };
1677
- var AlertDialogTrigger = import_react_alert_dialog.AlertDialogTrigger;
1678
- var AlertDialogPortal = import_react_alert_dialog.AlertDialogPortal;
1679
- var AlertDialogCancel = import_react_alert_dialog.AlertDialogCancel;
1680
- var AlertDialogAction = import_react_alert_dialog.AlertDialogAction;
1681
- var AlertDialogTitle = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
1682
- var _effect = (0, import_tracking18.useSignals)();
1683
- try {
1684
- const { tx } = useThemeContext();
1685
- return /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.AlertDialogTitle, {
1686
- ...props,
1687
- className: tx("dialog.title", "dialog--alert__title", {
1688
- srOnly
1689
- }, classNames),
1690
- ref: forwardedRef
1691
- });
1692
- } finally {
1693
- _effect.f();
1694
- }
1695
- });
1696
- var AlertDialogDescription = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, srOnly, ...props }, forwardedRef) => {
1697
- var _effect = (0, import_tracking18.useSignals)();
1698
- try {
1699
- const { tx } = useThemeContext();
1700
- return /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.AlertDialogDescription, {
1701
- ...props,
1702
- className: tx("dialog.description", "dialog--alert__description", {
1703
- srOnly
1704
- }, classNames),
1705
- ref: forwardedRef
1706
- });
1707
- } finally {
1708
- _effect.f();
1709
- }
1710
- });
1711
- var ALERT_DIALOG_OVERLAY_NAME = "AlertDialogOverlay";
1712
- var ALERT_DIALOG_CONTENT_NAME = "AlertDialogContent";
1713
- var [OverlayLayoutProvider2, useOverlayLayoutContext2] = (0, import_react_context5.createContext)(ALERT_DIALOG_OVERLAY_NAME, {
1714
- inOverlayLayout: false
1715
- });
1716
- var AlertDialogOverlay = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, children, blockAlign, ...props }, forwardedRef) => {
1717
- var _effect = (0, import_tracking18.useSignals)();
1718
- try {
1719
- const { tx } = useThemeContext();
1720
- return /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.AlertDialogOverlay, {
1721
- ...props,
1722
- className: tx("dialog.overlay", "dialog--alert__overlay", {}, classNames, "data-[block-align=start]:justify-center", "data-[block-align=start]:items-start", "data-[block-align=center]:place-content-center"),
1723
- ref: forwardedRef,
1724
- "data-block-align": blockAlign
1725
- }, /* @__PURE__ */ import_react26.default.createElement(OverlayLayoutProvider2, {
1726
- inOverlayLayout: true
1727
- }, children));
1728
- } finally {
1729
- _effect.f();
1730
- }
1731
- });
1732
- AlertDialogOverlay.displayName = ALERT_DIALOG_OVERLAY_NAME;
1733
- var AlertDialogContent = /* @__PURE__ */ (0, import_react26.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
1734
- var _effect = (0, import_tracking18.useSignals)();
1735
- try {
1736
- const { tx } = useThemeContext();
1737
- const { inOverlayLayout } = useOverlayLayoutContext2(ALERT_DIALOG_CONTENT_NAME);
1738
- return /* @__PURE__ */ import_react26.default.createElement(import_react_alert_dialog.AlertDialogContent, {
1739
- ...props,
1740
- className: tx("dialog.content", "dialog--alert", {
1741
- inOverlayLayout
1742
- }, classNames),
1743
- ref: forwardedRef
1744
- }, children);
1745
- } finally {
1746
- _effect.f();
1747
- }
1748
- });
1749
- AlertDialogContent.displayName = ALERT_DIALOG_CONTENT_NAME;
1750
- var AlertDialog = {
1751
- Root: AlertDialogRoot,
1752
- Trigger: AlertDialogTrigger,
1753
- Portal: AlertDialogPortal,
1754
- Overlay: AlertDialogOverlay,
1755
- Content: AlertDialogContent,
1756
- Title: AlertDialogTitle,
1757
- Description: AlertDialogDescription,
1758
- Cancel: AlertDialogCancel,
1759
- Action: AlertDialogAction
1760
- };
1761
- var Label = /* @__PURE__ */ (0, import_react27.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
1762
- var _effect = (0, import_tracking19.useSignals)();
1763
- try {
1764
- const { tx } = useThemeContext();
1765
- return /* @__PURE__ */ import_react27.default.createElement(import_react_input.Label, {
1766
- ...props,
1767
- className: tx("input.label", "input__label", {
1768
- srOnly
1769
- }, classNames),
1770
- ref: forwardedRef
1771
- }, children);
1772
- } finally {
1773
- _effect.f();
1774
- }
1775
- });
1776
- var Description = /* @__PURE__ */ (0, import_react27.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
1777
- var _effect = (0, import_tracking19.useSignals)();
1778
- try {
1779
- const { tx } = useThemeContext();
1780
- return /* @__PURE__ */ import_react27.default.createElement(import_react_input.Description, {
1781
- ...props,
1782
- className: tx("input.description", "input__description", {
1783
- srOnly
1784
- }, classNames),
1785
- ref: forwardedRef
1786
- }, children);
1787
- } finally {
1788
- _effect.f();
1789
- }
1790
- });
1791
- var Validation = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, srOnly, classNames, children, ...props }, forwardedRef) => {
1792
- var _effect = (0, import_tracking19.useSignals)();
1793
- try {
1794
- const { tx } = useThemeContext();
1795
- const { validationValence } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
1796
- return /* @__PURE__ */ import_react27.default.createElement(import_react_input.Validation, {
1797
- ...props,
1798
- className: tx("input.validation", `input__validation-message input__validation-message--${validationValence}`, {
1799
- srOnly,
1800
- validationValence
1801
- }, classNames),
1802
- ref: forwardedRef
1803
- }, children);
1804
- } finally {
1805
- _effect.f();
1806
- }
1807
- });
1808
- var DescriptionAndValidation = /* @__PURE__ */ (0, import_react27.forwardRef)(({ srOnly, classNames, children, ...props }, forwardedRef) => {
1809
- var _effect = (0, import_tracking19.useSignals)();
1810
- try {
1811
- const { tx } = useThemeContext();
1812
- return /* @__PURE__ */ import_react27.default.createElement(import_react_input.DescriptionAndValidation, {
1813
- ...props,
1814
- className: tx("input.descriptionAndValidation", "input__description-and-validation", {
1815
- srOnly
1816
- }, classNames),
1817
- ref: forwardedRef
1818
- }, children);
1819
- } finally {
1820
- _effect.f();
1821
- }
1822
- });
1823
- var PinInput = /* @__PURE__ */ (0, import_react27.forwardRef)(({ density: propsDensity, elevation: propsElevation, segmentClassName: propsSegmentClassName, inputClassName, variant, ...props }, forwardedRef) => {
1824
- var _effect = (0, import_tracking19.useSignals)();
1825
- try {
1826
- const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
1827
- const { tx } = useThemeContext();
1828
- const density = useDensityContext(propsDensity);
1829
- const elevation = useElevationContext(propsElevation);
1830
- const segmentClassName = (0, import_react27.useCallback)(({ focused, validationValence }) => tx("input.input", "input--pin-segment", {
1831
- variant: "static",
1832
- focused,
1833
- disabled: props.disabled,
1834
- density,
1835
- elevation,
1836
- validationValence
1837
- }, propsSegmentClassName), [
1838
- tx,
1839
- props.disabled,
1840
- elevation,
1841
- propsElevation,
1842
- density
1843
- ]);
1844
- return /* @__PURE__ */ import_react27.default.createElement(import_react_input.PinInput, {
1845
- ...props,
1846
- segmentClassName,
1847
- ...props.autoFocus && !hasIosKeyboard2 && {
1848
- autoFocus: true
1849
- },
1850
- inputClassName: tx("input.inputWithSegments", "input input--pin", {
1851
- disabled: props.disabled
1852
- }, inputClassName),
1853
- ref: forwardedRef
1854
- });
1855
- } finally {
1856
- _effect.f();
1857
- }
1858
- });
1859
- var TextInput = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
1860
- var _effect = (0, import_tracking19.useSignals)();
1861
- try {
1862
- const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
1863
- const themeContextValue = useThemeContext();
1864
- const density = useDensityContext(propsDensity);
1865
- const elevation = useElevationContext(propsElevation);
1866
- const { validationValence } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
1867
- const { tx } = themeContextValue;
1868
- return /* @__PURE__ */ import_react27.default.createElement(import_react_input.TextInput, {
1869
- ...props,
1870
- className: tx("input.input", "input", {
1871
- variant,
1872
- disabled: props.disabled,
1873
- density,
1874
- elevation,
1875
- validationValence
1876
- }, classNames),
1877
- ...props.autoFocus && !hasIosKeyboard2 && {
1878
- autoFocus: true
1879
- },
1880
- ref: forwardedRef
1881
- });
1882
- } finally {
1883
- _effect.f();
1884
- }
1885
- });
1886
- var TextArea = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, classNames, density: propsDensity, elevation: propsElevation, variant, ...props }, forwardedRef) => {
1887
- var _effect = (0, import_tracking19.useSignals)();
1888
- try {
1889
- const { hasIosKeyboard: hasIosKeyboard2 } = useThemeContext();
1890
- const { tx } = useThemeContext();
1891
- const density = useDensityContext(propsDensity);
1892
- const elevation = useElevationContext(propsElevation);
1893
- const { validationValence } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
1894
- return /* @__PURE__ */ import_react27.default.createElement(import_react_input.TextArea, {
1895
- ...props,
1896
- className: tx("input.input", "input--text-area", {
1897
- variant,
1898
- disabled: props.disabled,
1899
- density,
1900
- elevation,
1901
- validationValence
1902
- }, "-mbe-labelSpacingBlock", classNames),
1903
- ...props.autoFocus && !hasIosKeyboard2 && {
1904
- autoFocus: true
1905
- },
1906
- ref: forwardedRef
1907
- });
1908
- } finally {
1909
- _effect.f();
1910
- }
1911
- });
1912
- var Checkbox = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, size, weight = "bold", classNames, ...props }, forwardedRef) => {
1913
- var _effect = (0, import_tracking19.useSignals)();
1914
- try {
1915
- const [checked, onCheckedChange] = (0, import_react_use_controllable_state2.useControllableState)({
1916
- prop: propsChecked,
1917
- defaultProp: propsDefaultChecked,
1918
- onChange: propsOnCheckedChange
1919
- });
1920
- const { id, validationValence, descriptionId, errorMessageId } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
1921
- const { tx } = useThemeContext();
1922
- return /* @__PURE__ */ import_react27.default.createElement(import_react_checkbox.Root, {
1923
- ...props,
1924
- checked,
1925
- onCheckedChange,
1926
- id,
1927
- "aria-describedby": descriptionId,
1928
- ...validationValence === "error" && {
1929
- "aria-invalid": "true",
1930
- "aria-errormessage": errorMessageId
1931
- },
1932
- className: tx("input.checkbox", "input--checkbox", {
1933
- size
1934
- }, "shrink-0", classNames),
1935
- ref: forwardedRef
1936
- }, /* @__PURE__ */ import_react27.default.createElement(Icon, {
1937
- icon: checked === "indeterminate" ? "ph--minus--regular" : "ph--check--regular",
1938
- classNames: tx("input.checkboxIndicator", "input--checkbox__indicator", {
1939
- size,
1940
- checked
1941
- })
1942
- }));
1943
- } finally {
1944
- _effect.f();
1945
- }
1946
- });
1947
- var Switch = /* @__PURE__ */ (0, import_react27.forwardRef)(({ __inputScope, checked: propsChecked, defaultChecked: propsDefaultChecked, onCheckedChange: propsOnCheckedChange, classNames, ...props }, forwardedRef) => {
1948
- var _effect = (0, import_tracking19.useSignals)();
1949
- try {
1950
- const [checked, onCheckedChange] = (0, import_react_use_controllable_state2.useControllableState)({
1951
- prop: propsChecked,
1952
- defaultProp: propsDefaultChecked ?? false,
1953
- onChange: propsOnCheckedChange
1954
- });
1955
- const { id, validationValence, descriptionId, errorMessageId } = (0, import_react_input.useInputContext)(import_react_input.INPUT_NAME, __inputScope);
1956
- return /* @__PURE__ */ import_react27.default.createElement("input", {
1957
- type: "checkbox",
1958
- className: (0, import_react_ui_theme3.mx)("dx-checkbox--switch dx-focus-ring", classNames),
1959
- checked,
1960
- onChange: (event) => {
1961
- onCheckedChange(event.target.checked);
1962
- },
1963
- id,
1964
- "aria-describedby": descriptionId,
1965
- ...props,
1966
- ...validationValence === "error" && {
1967
- "aria-invalid": "true",
1968
- "aria-errormessage": errorMessageId
1969
- },
1970
- ref: forwardedRef
1971
- });
1972
- } finally {
1973
- _effect.f();
1974
- }
1975
- });
1976
- var Input = {
1977
- Root: import_react_input.InputRoot,
1978
- PinInput,
1979
- TextInput,
1980
- TextArea,
1981
- Checkbox,
1982
- Switch,
1983
- Label,
1984
- Description,
1985
- Validation,
1986
- DescriptionAndValidation
1987
- };
1988
- var edgeToOrientationMap = {
1989
- top: "horizontal",
1990
- bottom: "horizontal",
1991
- left: "vertical",
1992
- right: "vertical"
1993
- };
1994
- var orientationStyles = {
1995
- horizontal: "h-[--line-thickness] left-[calc(var(--line-inset)+var(--terminal-radius))] right-[--line-inset] before:left-[--terminal-inset]",
1996
- vertical: "w-[--line-thickness] top-[calc(var(--line-inset)+var(--terminal-radius))] bottom-[--line-inset] before:top-[--terminal-inset]"
1997
- };
1998
- var edgeStyles = {
1999
- top: "top-[--line-offset] before:top-[--offset-terminal]",
2000
- right: "right-[--line-offset] before:right-[--offset-terminal]",
2001
- bottom: "bottom-[--line-offset] before:bottom-[--offset-terminal]",
2002
- left: "left-[--line-offset] before:left-[--offset-terminal]"
2003
- };
2004
- var strokeSize = 2;
2005
- var terminalSize = 8;
2006
- var offsetToAlignTerminalWithLine = (strokeSize - terminalSize) / 2;
2007
- var ListDropIndicator = ({ edge, gap = 0, lineInset = 0, terminalInset = lineInset - terminalSize }) => {
2008
- var _effect = (0, import_tracking21.useSignals)();
2009
- try {
2010
- const orientation = edgeToOrientationMap[edge];
2011
- return /* @__PURE__ */ import_react30.default.createElement("div", {
2012
- role: "none",
2013
- style: {
2014
- "--line-thickness": `${strokeSize}px`,
2015
- "--line-offset": `calc(-0.5 * (${gap}px + ${strokeSize}px))`,
2016
- "--line-inset": `${lineInset}px`,
2017
- "--terminal-size": `${terminalSize}px`,
2018
- "--terminal-radius": `${terminalSize / 2}px`,
2019
- "--terminal-inset": `${terminalInset}px`,
2020
- "--offset-terminal": `${offsetToAlignTerminalWithLine}px`
2021
- },
2022
- className: `absolute z-10 pointer-events-none bg-accentSurface before:content-[''] before:w-[--terminal-size] before:h-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles[orientation]} ${edgeStyles[edge]}`
2023
- });
2024
- } finally {
2025
- _effect.f();
2026
- }
2027
- };
2028
- var List = /* @__PURE__ */ (0, import_react29.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
2029
- var _effect = (0, import_tracking20.useSignals)();
2030
- try {
2031
- const { tx } = useThemeContext();
2032
- const density = useDensityContext(props.density);
2033
- return /* @__PURE__ */ import_react29.default.createElement(DensityProvider, {
2034
- density
2035
- }, /* @__PURE__ */ import_react29.default.createElement(import_react_list.List, {
2036
- ...props,
2037
- className: tx("list.root", "list", {}, classNames),
2038
- ref: forwardedRef
2039
- }, children));
2040
- } finally {
2041
- _effect.f();
2042
- }
2043
- });
2044
- var ListItemEndcap = /* @__PURE__ */ (0, import_react29.forwardRef)(({ children, classNames, asChild, ...props }, forwardedRef) => {
2045
- var _effect = (0, import_tracking20.useSignals)();
2046
- try {
2047
- const Root7 = asChild ? import_react_slot7.Slot : "div";
2048
- const density = useDensityContext();
2049
- const { tx } = useThemeContext();
2050
- return /* @__PURE__ */ import_react29.default.createElement(Root7, {
2051
- ...!asChild && {
2052
- role: "none"
2053
- },
2054
- ...props,
2055
- className: tx("list.item.endcap", "list__listItem__endcap", {
2056
- density
2057
- }, classNames),
2058
- ref: forwardedRef
2059
- }, children);
2060
- } finally {
2061
- _effect.f();
2062
- }
2063
- });
2064
- var MockListItemOpenTrigger = ({ classNames, ...props }) => {
2065
- var _effect = (0, import_tracking20.useSignals)();
2066
- try {
2067
- const density = useDensityContext();
2068
- const { tx } = useThemeContext();
2069
- return /* @__PURE__ */ import_react29.default.createElement("div", {
2070
- role: "none",
2071
- ...props,
2072
- className: tx("list.item.openTrigger", "list__listItem__openTrigger--mock", {
2073
- density
2074
- }, classNames)
2075
- });
2076
- } finally {
2077
- _effect.f();
2078
- }
2079
- };
2080
- var ListItemHeading = /* @__PURE__ */ (0, import_react29.forwardRef)(({ children, classNames, ...props }, forwardedRef) => {
2081
- var _effect = (0, import_tracking20.useSignals)();
2082
- try {
2083
- const { tx } = useThemeContext();
2084
- const density = useDensityContext();
2085
- return /* @__PURE__ */ import_react29.default.createElement(import_react_list.ListItemHeading, {
2086
- ...props,
2087
- className: tx("list.item.heading", "list__listItem__heading", {
2088
- density
2089
- }, classNames),
2090
- ref: forwardedRef
2091
- }, children);
2092
- } finally {
2093
- _effect.f();
2094
- }
2095
- });
2096
- var ListItemOpenTrigger = /* @__PURE__ */ (0, import_react29.forwardRef)(({ __listItemScope, classNames, children, ...props }, forwardedRef) => {
2097
- var _effect = (0, import_tracking20.useSignals)();
2098
- try {
2099
- const { tx } = useThemeContext();
2100
- const density = useDensityContext();
2101
- const { open } = (0, import_react_list.useListItemContext)(import_react_list.LIST_ITEM_NAME, __listItemScope);
2102
- const Icon3 = open ? import_react28.CaretDown : import_react28.CaretRight;
2103
- return /* @__PURE__ */ import_react29.default.createElement(import_react_list.ListItemOpenTrigger, {
2104
- ...props,
2105
- className: tx("list.item.openTrigger", "list__listItem__openTrigger", {
2106
- density
2107
- }, classNames),
2108
- ref: forwardedRef
2109
- }, children || /* @__PURE__ */ import_react29.default.createElement(Icon3, {
2110
- weight: "bold",
2111
- className: tx("list.item.openTriggerIcon", "list__listItem__openTrigger__icon", {})
2112
- }));
2113
- } finally {
2114
- _effect.f();
2115
- }
2116
- });
2117
- var ListItemRoot = /* @__PURE__ */ (0, import_react29.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
2118
- var _effect = (0, import_tracking20.useSignals)();
2119
- try {
2120
- const { tx } = useThemeContext();
2121
- const density = useDensityContext();
2122
- return /* @__PURE__ */ import_react29.default.createElement(import_react_list.ListItem, {
2123
- ...props,
2124
- className: tx("list.item.root", "list__listItem", {
2125
- density,
2126
- collapsible: props.collapsible
2127
- }, classNames),
2128
- ref: forwardedRef
2129
- }, children);
2130
- } finally {
2131
- _effect.f();
2132
- }
2133
- });
2134
- var ListItem = {
2135
- Root: ListItemRoot,
2136
- Endcap: ListItemEndcap,
2137
- Heading: ListItemHeading,
2138
- OpenTrigger: ListItemOpenTrigger,
2139
- CollapsibleContent: import_react_list.ListItemCollapsibleContent,
2140
- MockOpenTrigger: MockListItemOpenTrigger,
2141
- DropIndicator: ListDropIndicator
2142
- };
2143
- var edgeToOrientationMap2 = {
2144
- "reorder-above": "sibling",
2145
- "reorder-below": "sibling",
2146
- "make-child": "child",
2147
- reparent: "child"
2148
- };
2149
- var orientationStyles2 = {
2150
- // TODO(wittjosiah): Stop using left/right here.
2151
- sibling: "bs-[--line-thickness] left-[--horizontal-indent] right-0 bg-accentSurface before:left-[--negative-terminal-size]",
2152
- child: "is-full block-start-0 block-end-0 border-[length:--line-thickness] before:invisible"
2153
- };
2154
- var instructionStyles = {
2155
- "reorder-above": "block-start-[--line-offset] before:block-start-[--offset-terminal]",
2156
- "reorder-below": "block-end-[--line-offset] before:block-end-[--offset-terminal]",
2157
- "make-child": "border-accentSurface",
2158
- // TODO(wittjosiah): This is not occurring in the current implementation.
2159
- reparent: ""
2160
- };
2161
- var strokeSize2 = 2;
2162
- var terminalSize2 = 8;
2163
- var offsetToAlignTerminalWithLine2 = (strokeSize2 - terminalSize2) / 2;
2164
- var TreeDropIndicator = ({ instruction, gap = 0 }) => {
2165
- var _effect = (0, import_tracking23.useSignals)();
2166
- try {
2167
- const lineOffset = `calc(-0.5 * (${gap}px + ${strokeSize2}px))`;
2168
- const isBlocked = instruction.type === "instruction-blocked";
2169
- const desiredInstruction = isBlocked ? instruction.desired : instruction;
2170
- const orientation = edgeToOrientationMap2[desiredInstruction.type];
2171
- if (isBlocked) {
2172
- return null;
2173
- }
2174
- return /* @__PURE__ */ import_react32.default.createElement("div", {
2175
- style: {
2176
- "--line-thickness": `${strokeSize2}px`,
2177
- "--line-offset": `${lineOffset}`,
2178
- "--terminal-size": `${terminalSize2}px`,
2179
- "--terminal-radius": `${terminalSize2 / 2}px`,
2180
- "--negative-terminal-size": `-${terminalSize2}px`,
2181
- "--offset-terminal": `${offsetToAlignTerminalWithLine2}px`,
2182
- "--horizontal-indent": `${desiredInstruction.currentLevel * desiredInstruction.indentPerLevel + 4}px`
2183
- },
2184
- className: `absolute z-10 pointer-events-none before:is-[--terminal-size] before:bs-[--terminal-size] box-border before:absolute before:border-[length:--line-thickness] before:border-solid before:border-accentSurface before:rounded-full ${orientationStyles2[orientation]} ${instructionStyles[desiredInstruction.type]}`
2185
- });
2186
- } finally {
2187
- _effect.f();
2188
- }
2189
- };
2190
- var TreeRoot = /* @__PURE__ */ (0, import_react31.forwardRef)((props, forwardedRef) => {
2191
- var _effect = (0, import_tracking22.useSignals)();
2192
- try {
2193
- return /* @__PURE__ */ import_react31.default.createElement(List, {
2194
- ...props,
2195
- ref: forwardedRef
2196
- });
2197
- } finally {
2198
- _effect.f();
2199
- }
2200
- });
2201
- var TreeBranch = /* @__PURE__ */ (0, import_react31.forwardRef)(({ __listScope, ...props }, forwardedRef) => {
2202
- var _effect = (0, import_tracking22.useSignals)();
2203
- try {
2204
- const { headingId } = (0, import_react_list.useListItemContext)(import_react_list.LIST_ITEM_NAME, __listScope);
2205
- return /* @__PURE__ */ import_react31.default.createElement(List, {
2206
- ...props,
2207
- "aria-labelledby": headingId,
2208
- ref: forwardedRef
2209
- });
2210
- } finally {
2211
- _effect.f();
2212
- }
2213
- });
2214
- var TreeItemRoot = /* @__PURE__ */ (0, import_react31.forwardRef)((props, forwardedRef) => {
2215
- var _effect = (0, import_tracking22.useSignals)();
2216
- try {
2217
- return /* @__PURE__ */ import_react31.default.createElement(ListItem.Root, {
2218
- role: "treeitem",
2219
- ...props,
2220
- ref: forwardedRef
2221
- });
2222
- } finally {
2223
- _effect.f();
2224
- }
2225
- });
2226
- var TreeItemHeading = ListItem.Heading;
2227
- var TreeItemOpenTrigger = ListItem.OpenTrigger;
2228
- var MockTreeItemOpenTrigger = ListItem.MockOpenTrigger;
2229
- var TreeItemBody = ListItem.CollapsibleContent;
2230
- var Tree = {
2231
- Root: TreeRoot,
2232
- Branch: TreeBranch
2233
- };
2234
- var TreeItem = {
2235
- Root: TreeItemRoot,
2236
- Heading: TreeItemHeading,
2237
- Body: TreeItemBody,
2238
- OpenTrigger: TreeItemOpenTrigger,
2239
- MockOpenTrigger: MockTreeItemOpenTrigger,
2240
- DropIndicator: TreeDropIndicator
2241
- };
2242
- var TREEGRID_ROW_NAME = "TreegridRow";
2243
- var [createTreegridRowContext, createTreegridRowScope] = (0, import_react_context6.createContextScope)(TREEGRID_ROW_NAME, []);
2244
- var [TreegridRowProvider, useTreegridRowContext] = createTreegridRowContext(TREEGRID_ROW_NAME);
2245
- var PATH_SEPARATOR = "~";
2246
- var PARENT_OF_SEPARATOR = " ";
2247
- var TreegridRoot = /* @__PURE__ */ (0, import_react33.forwardRef)(({ asChild, classNames, children, style, gridTemplateColumns, ...props }, forwardedRef) => {
2248
- var _effect = (0, import_tracking24.useSignals)();
2249
- try {
2250
- const { tx } = useThemeContext();
2251
- const Root7 = asChild ? import_react_slot8.Slot : import_react_primitive7.Primitive.div;
2252
- const arrowNavigationAttrs = (0, import_react_tabster.useArrowNavigationGroup)({
2253
- axis: "vertical",
2254
- tabbable: false,
2255
- circular: true
2256
- });
2257
- return /* @__PURE__ */ import_react33.default.createElement(Root7, {
2258
- role: "treegrid",
2259
- ...arrowNavigationAttrs,
2260
- ...props,
2261
- className: tx("treegrid.root", "treegrid", {}, classNames),
2262
- style: {
2263
- ...style,
2264
- gridTemplateColumns
2265
- },
2266
- ref: forwardedRef
2267
- }, children);
2268
- } finally {
2269
- _effect.f();
2270
- }
2271
- });
2272
- var TreegridRow = /* @__PURE__ */ (0, import_react33.forwardRef)(({ __treegridRowScope, asChild, classNames, children, id, parentOf, open: propsOpen, defaultOpen, onOpenChange: propsOnOpenChange, ...props }, forwardedRef) => {
2273
- var _effect = (0, import_tracking24.useSignals)();
2274
- try {
2275
- const { tx } = useThemeContext();
2276
- const Root7 = asChild ? import_react_slot8.Slot : import_react_primitive7.Primitive.div;
2277
- const pathParts = id.split(PATH_SEPARATOR);
2278
- const level = pathParts.length - 1;
2279
- const [open, onOpenChange] = (0, import_react_use_controllable_state3.useControllableState)({
2280
- prop: propsOpen,
2281
- onChange: propsOnOpenChange,
2282
- defaultProp: defaultOpen
2283
- });
2284
- const focusableGroupAttrs = (0, import_react_tabster.useFocusableGroup)({
2285
- tabBehavior: "limited"
2286
- });
2287
- const arrowGroupAttrs = (0, import_react_tabster.useArrowNavigationGroup)({
2288
- axis: "horizontal",
2289
- tabbable: false,
2290
- circular: false,
2291
- memorizeCurrent: false
2292
- });
2293
- return /* @__PURE__ */ import_react33.default.createElement(TreegridRowProvider, {
2294
- open,
2295
- onOpenChange,
2296
- scope: __treegridRowScope
2297
- }, /* @__PURE__ */ import_react33.default.createElement(Root7, {
2298
- role: "row",
2299
- "aria-level": level,
2300
- className: tx("treegrid.row", "treegrid__row", {
2301
- level
2302
- }, classNames),
2303
- ...parentOf && {
2304
- "aria-expanded": open,
2305
- "aria-owns": parentOf
2306
- },
2307
- tabIndex: 0,
2308
- ...focusableGroupAttrs,
2309
- ...props,
2310
- id,
2311
- ref: forwardedRef
2312
- }, /* @__PURE__ */ import_react33.default.createElement("div", {
2313
- role: "none",
2314
- className: "contents",
2315
- ...arrowGroupAttrs
2316
- }, children)));
2317
- } finally {
2318
- _effect.f();
2319
- }
2320
- });
2321
- var TreegridCell = /* @__PURE__ */ (0, import_react33.forwardRef)(({ classNames, children, indent, ...props }, forwardedRef) => {
2322
- var _effect = (0, import_tracking24.useSignals)();
2323
- try {
2324
- const { tx } = useThemeContext();
2325
- return /* @__PURE__ */ import_react33.default.createElement("div", {
2326
- role: "gridcell",
2327
- className: tx("treegrid.cell", "treegrid__cell", {
2328
- indent
2329
- }, classNames),
2330
- ...props,
2331
- ref: forwardedRef
2332
- }, children);
2333
- } finally {
2334
- _effect.f();
2335
- }
2336
- });
2337
- var Treegrid = {
2338
- Root: TreegridRoot,
2339
- Row: TreegridRow,
2340
- Cell: TreegridCell,
2341
- PARENT_OF_SEPARATOR,
2342
- PATH_SEPARATOR,
2343
- createTreegridRowScope,
2344
- useTreegridRowContext
2345
- };
2346
- var useSwipeToDismiss = (ref, {
2347
- onDismiss,
2348
- dismissThreshold = 64,
2349
- debounceThreshold = 8,
2350
- offset = 0
2351
- /* side = 'inline-start' */
2352
- }) => {
2353
- const $root = ref.current;
2354
- const [motionState, setMotionState] = (0, import_react35.useState)(0);
2355
- const [gestureStartX, setGestureStartX] = (0, import_react35.useState)(0);
2356
- const setIdle = (0, import_react35.useCallback)(() => {
2357
- setMotionState(0);
2358
- $root?.style.removeProperty("inset-inline-start");
2359
- $root?.style.setProperty("transition-duration", "200ms");
2360
- }, [
2361
- $root
2362
- ]);
2363
- const setFollowing = (0, import_react35.useCallback)(() => {
2364
- setMotionState(2);
2365
- $root?.style.setProperty("transition-duration", "0ms");
2366
- }, [
2367
- $root
2368
- ]);
2369
- const handlePointerDown = (0, import_react35.useCallback)(({ screenX }) => {
2370
- if (motionState === 0) {
2371
- setMotionState(1);
2372
- setGestureStartX(screenX);
2373
- }
2374
- }, [
2375
- motionState
2376
- ]);
2377
- const handlePointerMove = (0, import_react35.useCallback)(({ screenX }) => {
2378
- if ($root) {
2379
- const delta = Math.min(screenX - gestureStartX, 0);
2380
- switch (motionState) {
2381
- case 2:
2382
- if (Math.abs(delta) > dismissThreshold) {
2383
- setIdle();
2384
- onDismiss?.();
2385
- } else {
2386
- $root.style.setProperty("inset-inline-start", `${offset + delta}px`);
2387
- }
2388
- break;
2389
- case 1:
2390
- if (Math.abs(delta) > debounceThreshold) {
2391
- setFollowing();
2392
- }
2393
- break;
2394
- }
2395
- }
2396
- }, [
2397
- $root,
2398
- motionState,
2399
- gestureStartX
2400
- ]);
2401
- const handlePointerUp = (0, import_react35.useCallback)(() => {
2402
- setIdle();
2403
- }, [
2404
- setIdle
2405
- ]);
2406
- (0, import_react35.useEffect)(() => {
2407
- $root?.addEventListener("pointerdown", handlePointerDown);
2408
- return () => {
2409
- $root?.removeEventListener("pointerdown", handlePointerDown);
2410
- };
2411
- }, [
2412
- $root,
2413
- handlePointerDown
2414
- ]);
2415
- (0, import_react35.useEffect)(() => {
2416
- $root && document.documentElement.addEventListener("pointermove", handlePointerMove);
2417
- return () => {
2418
- document.documentElement.removeEventListener("pointermove", handlePointerMove);
2419
- };
2420
- }, [
2421
- $root,
2422
- handlePointerMove
2423
- ]);
2424
- (0, import_react35.useEffect)(() => {
2425
- $root && document.documentElement.addEventListener("pointerup", handlePointerUp);
2426
- return () => {
2427
- document.documentElement.removeEventListener("pointerup", handlePointerUp);
2428
- };
2429
- }, [
2430
- $root,
2431
- handlePointerUp
2432
- ]);
2433
- };
2434
- var __dxlog_file = "/home/runner/work/dxos/dxos/packages/ui/react-ui/src/components/Main/Main.tsx";
2435
- var MAIN_ROOT_NAME = "MainRoot";
2436
- var NAVIGATION_SIDEBAR_NAME = "NavigationSidebar";
2437
- var COMPLEMENTARY_SIDEBAR_NAME = "ComplementarySidebar";
2438
- var MAIN_NAME = "Main";
2439
- var GENERIC_CONSUMER_NAME = "GenericConsumer";
2440
- var landmarkAttr = "data-main-landmark";
2441
- var useLandmarkMover = (propsOnKeyDown, landmark) => {
2442
- const handleKeyDown = (0, import_react34.useCallback)((event) => {
2443
- const target = event.target;
2444
- if (event.target === event.currentTarget && event.key === "Tab" && target.hasAttribute(landmarkAttr)) {
2445
- event.preventDefault();
2446
- const landmarks = Array.from(document.querySelectorAll(`[${landmarkAttr}]:not([inert])`)).map((el) => el.hasAttribute(landmarkAttr) ? parseInt(el.getAttribute(landmarkAttr)) : NaN).sort();
2447
- const l = landmarks.length;
2448
- const cursor = landmarks.indexOf(parseInt(target.getAttribute(landmarkAttr)));
2449
- const nextLandmark = landmarks[(cursor + l + (event.getModifierState("Shift") ? -1 : 1)) % l];
2450
- document.querySelector(`[${landmarkAttr}="${nextLandmark}"]`)?.focus();
2451
- }
2452
- propsOnKeyDown?.(event);
2453
- }, [
2454
- propsOnKeyDown
2455
- ]);
2456
- const focusableGroupAttrs = window ? {} : {
2457
- tabBehavior: "limited",
2458
- ignoreDefaultKeydown: {
2459
- Tab: true
2460
- }
2461
- };
2462
- return {
2463
- onKeyDown: handleKeyDown,
2464
- [landmarkAttr]: landmark,
2465
- tabIndex: 0,
2466
- ...focusableGroupAttrs
2467
- };
2468
- };
2469
- var [MainProvider, useMainContext] = (0, import_react_context7.createContext)(MAIN_NAME, {
2470
- resizing: false,
2471
- navigationSidebarState: "closed",
2472
- setNavigationSidebarState: (nextState) => {
2473
- import_log.log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
2474
- F: __dxlog_file,
2475
- L: 82,
2476
- S: void 0,
2477
- C: (f, a) => f(...a)
2478
- });
2479
- },
2480
- complementarySidebarState: "closed",
2481
- setComplementarySidebarState: (nextState) => {
2482
- import_log.log.warn("Attempt to set sidebar state without initializing `MainRoot`", void 0, {
2483
- F: __dxlog_file,
2484
- L: 87,
2485
- S: void 0,
2486
- C: (f, a) => f(...a)
2487
- });
2488
- }
2489
- });
2490
- var useSidebars = (consumerName = GENERIC_CONSUMER_NAME) => {
2491
- const { setNavigationSidebarState, navigationSidebarState, setComplementarySidebarState, complementarySidebarState } = useMainContext(consumerName);
2492
- return {
2493
- navigationSidebarState,
2494
- setNavigationSidebarState,
2495
- toggleNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarState(navigationSidebarState === "expanded" ? "closed" : "expanded"), [
2496
- navigationSidebarState,
2497
- setNavigationSidebarState
2498
- ]),
2499
- openNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarState("expanded"), []),
2500
- collapseNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarState("collapsed"), []),
2501
- closeNavigationSidebar: (0, import_react34.useCallback)(() => setNavigationSidebarState("closed"), []),
2502
- complementarySidebarState,
2503
- setComplementarySidebarState,
2504
- toggleComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarState(complementarySidebarState === "expanded" ? "closed" : "expanded"), [
2505
- complementarySidebarState,
2506
- setComplementarySidebarState
2507
- ]),
2508
- openComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarState("expanded"), []),
2509
- collapseComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarState("collapsed"), []),
2510
- closeComplementarySidebar: (0, import_react34.useCallback)(() => setComplementarySidebarState("closed"), [])
2511
- };
2512
- };
2513
- var resizeDebounce = 3e3;
2514
- var MainRoot = ({ navigationSidebarState: propsNavigationSidebarState, defaultNavigationSidebarState, onNavigationSidebarStateChange, complementarySidebarState: propsComplementarySidebarState, defaultComplementarySidebarState, onComplementarySidebarStateChange, children, ...props }) => {
2515
- var _effect = (0, import_tracking25.useSignals)();
2516
- try {
2517
- const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
2518
- ssr: false
2519
- });
2520
- const [navigationSidebarState = isLg ? "expanded" : "collapsed", setNavigationSidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
2521
- prop: propsNavigationSidebarState,
2522
- defaultProp: defaultNavigationSidebarState,
2523
- onChange: onNavigationSidebarStateChange
2524
- });
2525
- const [complementarySidebarState = isLg ? "expanded" : "collapsed", setComplementarySidebarState] = (0, import_react_use_controllable_state4.useControllableState)({
2526
- prop: propsComplementarySidebarState,
2527
- defaultProp: defaultComplementarySidebarState,
2528
- onChange: onComplementarySidebarStateChange
2529
- });
2530
- const [resizing, setResizing] = (0, import_react34.useState)(false);
2531
- const resizeInterval = (0, import_react34.useRef)(null);
2532
- const handleResize = (0, import_react34.useCallback)(() => {
2533
- setResizing(true);
2534
- if (resizeInterval.current) {
2535
- clearTimeout(resizeInterval.current);
2536
- }
2537
- resizeInterval.current = setTimeout(() => {
2538
- setResizing(false);
2539
- resizeInterval.current = null;
2540
- }, resizeDebounce);
2541
- }, []);
2542
- (0, import_react34.useEffect)(() => {
2543
- window.addEventListener("resize", handleResize);
2544
- return () => window.removeEventListener("resize", handleResize);
2545
- }, [
2546
- handleResize
2547
- ]);
2548
- return /* @__PURE__ */ import_react34.default.createElement(MainProvider, {
2549
- ...props,
2550
- navigationSidebarState,
2551
- setNavigationSidebarState,
2552
- complementarySidebarState,
2553
- setComplementarySidebarState,
2554
- resizing
2555
- }, children);
2556
- } finally {
2557
- _effect.f();
2558
- }
2559
- };
2560
- MainRoot.displayName = MAIN_ROOT_NAME;
2561
- var handleOpenAutoFocus = (event) => {
2562
- !document.body.hasAttribute("data-is-keyboard") && event.preventDefault();
2563
- };
2564
- var MainSidebar = /* @__PURE__ */ (0, import_react34.forwardRef)(({ classNames, children, swipeToDismiss, onOpenAutoFocus, state, resizing, onStateChange, side, label, ...props }, forwardedRef) => {
2565
- var _effect = (0, import_tracking25.useSignals)();
2566
- try {
2567
- const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
2568
- ssr: false
2569
- });
2570
- const { tx } = useThemeContext();
2571
- const { t } = useTranslation();
2572
- const ref = (0, import_react_hooks4.useForwardedRef)(forwardedRef);
2573
- const noopRef = (0, import_react34.useRef)(null);
2574
- useSwipeToDismiss(swipeToDismiss ? ref : noopRef, {
2575
- onDismiss: () => onStateChange?.("closed")
2576
- });
2577
- const handleKeyDown = (0, import_react34.useCallback)((event) => {
2578
- if (event.key === "Escape") {
2579
- event.target.closest("[data-tabster]")?.focus();
2580
- }
2581
- props.onKeyDown?.(event);
2582
- }, [
2583
- props.onKeyDown
2584
- ]);
2585
- const Root7 = isLg ? import_react_primitive8.Primitive.div : import_react_dialog2.DialogContent;
2586
- return /* @__PURE__ */ import_react34.default.createElement(import_react_dialog2.Root, {
2587
- open: state !== "closed",
2588
- "aria-label": toLocalizedString(label, t),
2589
- modal: false
2590
- }, !isLg && /* @__PURE__ */ import_react34.default.createElement(import_react_dialog2.DialogTitle, {
2591
- className: "sr-only"
2592
- }, toLocalizedString(label, t)), /* @__PURE__ */ import_react34.default.createElement(Root7, {
2593
- ...!isLg && {
2594
- forceMount: true,
2595
- tabIndex: -1,
2596
- onOpenAutoFocus: onOpenAutoFocus ?? handleOpenAutoFocus
2597
- },
2598
- ...props,
2599
- "data-side": side === "inline-end" ? "ie" : "is",
2600
- "data-state": state,
2601
- "data-resizing": resizing ? "true" : "false",
2602
- className: tx("main.sidebar", "main__sidebar", {}, classNames),
2603
- onKeyDown: handleKeyDown,
2604
- ...state === "closed" && {
2605
- inert: "true"
2606
- },
2607
- ref
2608
- }, children));
2609
- } finally {
2610
- _effect.f();
2611
- }
2612
- });
2613
- var MainNavigationSidebar = /* @__PURE__ */ (0, import_react34.forwardRef)((props, forwardedRef) => {
2614
- var _effect = (0, import_tracking25.useSignals)();
2615
- try {
2616
- const { navigationSidebarState, setNavigationSidebarState, resizing } = useMainContext(NAVIGATION_SIDEBAR_NAME);
2617
- const mover = useLandmarkMover(props.onKeyDown, "0");
2618
- return /* @__PURE__ */ import_react34.default.createElement(MainSidebar, {
2619
- ...mover,
2620
- ...props,
2621
- state: navigationSidebarState,
2622
- onStateChange: setNavigationSidebarState,
2623
- resizing,
2624
- side: "inline-start",
2625
- ref: forwardedRef
2626
- });
2627
- } finally {
2628
- _effect.f();
2629
- }
2630
- });
2631
- MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
2632
- var MainComplementarySidebar = /* @__PURE__ */ (0, import_react34.forwardRef)((props, forwardedRef) => {
2633
- var _effect = (0, import_tracking25.useSignals)();
2634
- try {
2635
- const { complementarySidebarState, setComplementarySidebarState, resizing } = useMainContext(COMPLEMENTARY_SIDEBAR_NAME);
2636
- const mover = useLandmarkMover(props.onKeyDown, "2");
2637
- return /* @__PURE__ */ import_react34.default.createElement(MainSidebar, {
2638
- ...mover,
2639
- ...props,
2640
- state: complementarySidebarState,
2641
- onStateChange: setComplementarySidebarState,
2642
- resizing,
2643
- side: "inline-end",
2644
- ref: forwardedRef
2645
- });
2646
- } finally {
2647
- _effect.f();
2648
- }
2649
- });
2650
- MainNavigationSidebar.displayName = NAVIGATION_SIDEBAR_NAME;
2651
- var MainContent = /* @__PURE__ */ (0, import_react34.forwardRef)(({ asChild, classNames, bounce, handlesFocus, children, role, ...props }, forwardedRef) => {
2652
- var _effect = (0, import_tracking25.useSignals)();
2653
- try {
2654
- const { navigationSidebarState, complementarySidebarState } = useMainContext(MAIN_NAME);
2655
- const { tx } = useThemeContext();
2656
- const Root7 = asChild ? import_react_slot9.Slot : role ? "div" : "main";
2657
- const mover = useLandmarkMover(props.onKeyDown, "1");
2658
- return /* @__PURE__ */ import_react34.default.createElement(Root7, {
2659
- role,
2660
- ...handlesFocus && {
2661
- ...mover
2662
- },
2663
- ...props,
2664
- "data-sidebar-inline-start-state": navigationSidebarState,
2665
- "data-sidebar-inline-end-state": complementarySidebarState,
2666
- "data-handles-focus": handlesFocus,
2667
- className: tx("main.content", "main", {
2668
- bounce,
2669
- handlesFocus
2670
- }, classNames),
2671
- ref: forwardedRef
2672
- }, children);
2673
- } finally {
2674
- _effect.f();
2675
- }
2676
- });
2677
- MainContent.displayName = MAIN_NAME;
2678
- var MainOverlay = /* @__PURE__ */ (0, import_react34.forwardRef)(({ classNames, ...props }, forwardedRef) => {
2679
- var _effect = (0, import_tracking25.useSignals)();
2680
- try {
2681
- const [isLg] = (0, import_react_hooks4.useMediaQuery)("lg", {
2682
- ssr: false
2683
- });
2684
- const { navigationSidebarState, setNavigationSidebarState, complementarySidebarState, setComplementarySidebarState } = useMainContext(MAIN_NAME);
2685
- const { tx } = useThemeContext();
2686
- return /* @__PURE__ */ import_react34.default.createElement("div", {
2687
- onClick: () => {
2688
- setNavigationSidebarState("collapsed");
2689
- setComplementarySidebarState("collapsed");
2690
- },
2691
- ...props,
2692
- className: tx("main.overlay", "main__overlay", {
2693
- isLg,
2694
- inlineStartSidebarOpen: navigationSidebarState,
2695
- inlineEndSidebarOpen: complementarySidebarState
2696
- }, classNames),
2697
- "data-state": navigationSidebarState === "expanded" || complementarySidebarState === "expanded" ? "open" : "closed",
2698
- "aria-hidden": "true",
2699
- ref: forwardedRef
2700
- });
2701
- } finally {
2702
- _effect.f();
2703
- }
2704
- });
2705
- var Main = {
2706
- Root: MainRoot,
2707
- Content: MainContent,
2708
- Overlay: MainOverlay,
2709
- NavigationSidebar: MainNavigationSidebar,
2710
- ComplementarySidebar: MainComplementarySidebar
2711
- };
2712
- var propIsNumber = (prop) => Number.isFinite(prop);
2713
- var propsIsRecord = (prop) => !!(prop && typeof prop === "object");
2714
- var safePadding = (propsPadding, safePadding2, side) => {
2715
- return (propIsNumber(safePadding2[side]) ? safePadding2[side] : 0) + (propIsNumber(propsPadding) ? propsPadding : propsIsRecord(propsPadding) ? propsPadding[side] ?? 0 : 0);
2716
- };
2717
- var useSafeCollisionPadding = (collisionPadding) => {
2718
- const { safeAreaPadding } = useThemeContext();
2719
- return (0, import_react37.useMemo)(() => ({
2720
- top: safePadding(collisionPadding, safeAreaPadding, "top"),
2721
- right: safePadding(collisionPadding, safeAreaPadding, "right"),
2722
- bottom: safePadding(collisionPadding, safeAreaPadding, "bottom"),
2723
- left: safePadding(collisionPadding, safeAreaPadding, "left")
2724
- }), [
2725
- collisionPadding,
2726
- safeAreaPadding
2727
- ]);
2728
- };
2729
- var ContextMenuRoot = ContextMenuPrimitive.ContextMenu;
2730
- var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
2731
- var ContextMenuPortal = ContextMenuPrimitive.Portal;
2732
- var ContextMenuContent = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
2733
- var _effect = (0, import_tracking26.useSignals)();
2734
- try {
2735
- const { tx } = useThemeContext();
2736
- const elevation = useElevationContext();
2737
- const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
2738
- return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Content, {
2739
- ...props,
2740
- collisionPadding: safeCollisionPadding,
2741
- className: tx("menu.content", "menu", {
2742
- elevation
2743
- }, classNames),
2744
- ref: forwardedRef
2745
- }, children);
2746
- } finally {
2747
- _effect.f();
2748
- }
2749
- });
2750
- var ContextMenuViewport = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
2751
- var _effect = (0, import_tracking26.useSignals)();
2752
- try {
2753
- const { tx } = useThemeContext();
2754
- const Root7 = asChild ? import_react_slot10.Slot : import_react_primitive9.Primitive.div;
2755
- return /* @__PURE__ */ import_react36.default.createElement(Root7, {
2756
- ...props,
2757
- className: tx("menu.viewport", "menu__viewport", {}, classNames),
2758
- ref: forwardedRef
2759
- }, children);
2760
- } finally {
2761
- _effect.f();
2762
- }
2763
- });
2764
- var ContextMenuArrow = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
2765
- var _effect = (0, import_tracking26.useSignals)();
2766
- try {
2767
- const { tx } = useThemeContext();
2768
- return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Arrow, {
2769
- ...props,
2770
- className: tx("menu.arrow", "menu__arrow", {}, classNames),
2771
- ref: forwardedRef
2772
- });
2773
- } finally {
2774
- _effect.f();
2775
- }
2776
- });
2777
- var ContextMenuGroup = ContextMenuPrimitive.Group;
2778
- var ContextMenuItemIndicator = ContextMenuPrimitive.ItemIndicator;
2779
- var ContextMenuItem = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
2780
- var _effect = (0, import_tracking26.useSignals)();
2781
- try {
2782
- const { tx } = useThemeContext();
2783
- return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Item, {
2784
- ...props,
2785
- className: tx("menu.item", "menu__item", {}, classNames),
2786
- ref: forwardedRef
2787
- });
2788
- } finally {
2789
- _effect.f();
2790
- }
2791
- });
2792
- var ContextMenuCheckboxItem = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
2793
- var _effect = (0, import_tracking26.useSignals)();
2794
- try {
2795
- const { tx } = useThemeContext();
2796
- return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.CheckboxItem, {
2797
- ...props,
2798
- className: tx("menu.item", "menu__item--checkbox", {}, classNames),
2799
- ref: forwardedRef
2800
- });
2801
- } finally {
2802
- _effect.f();
2803
- }
2804
- });
2805
- var ContextMenuSeparator = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
2806
- var _effect = (0, import_tracking26.useSignals)();
2807
- try {
2808
- const { tx } = useThemeContext();
2809
- return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Separator, {
2810
- ...props,
2811
- className: tx("menu.separator", "menu__item", {}, classNames),
2812
- ref: forwardedRef
2813
- });
2814
- } finally {
2815
- _effect.f();
2816
- }
2817
- });
2818
- var ContextMenuGroupLabel = /* @__PURE__ */ (0, import_react36.forwardRef)(({ classNames, ...props }, forwardedRef) => {
2819
- var _effect = (0, import_tracking26.useSignals)();
2820
- try {
2821
- const { tx } = useThemeContext();
2822
- return /* @__PURE__ */ import_react36.default.createElement(ContextMenuPrimitive.Label, {
2823
- ...props,
2824
- className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
2825
- ref: forwardedRef
2826
- });
2827
- } finally {
2828
- _effect.f();
2829
- }
2830
- });
2831
- var ContextMenu2 = {
2832
- Root: ContextMenuRoot,
2833
- Trigger: ContextMenuTrigger,
2834
- Portal: ContextMenuPortal,
2835
- Content: ContextMenuContent,
2836
- Viewport: ContextMenuViewport,
2837
- Arrow: ContextMenuArrow,
2838
- Group: ContextMenuGroup,
2839
- Item: ContextMenuItem,
2840
- CheckboxItem: ContextMenuCheckboxItem,
2841
- ItemIndicator: ContextMenuItemIndicator,
2842
- Separator: ContextMenuSeparator,
2843
- GroupLabel: ContextMenuGroupLabel
2844
- };
2845
- var DROPDOWN_MENU_NAME = "DropdownMenu";
2846
- var [createDropdownMenuContext, createDropdownMenuScope] = (0, import_react_context8.createContextScope)(DROPDOWN_MENU_NAME, [
2847
- import_react_menu.createMenuScope
2848
- ]);
2849
- var useMenuScope = (0, import_react_menu.createMenuScope)();
2850
- var [DropdownMenuProvider, useDropdownMenuContext] = createDropdownMenuContext(DROPDOWN_MENU_NAME);
2851
- var DropdownMenuRoot = (props) => {
2852
- var _effect = (0, import_tracking27.useSignals)();
2853
- try {
2854
- const { __scopeDropdownMenu, children, dir, open: openProp, defaultOpen, onOpenChange, modal = true } = props;
2855
- const menuScope = useMenuScope(__scopeDropdownMenu);
2856
- const triggerRef = (0, import_react38.useRef)(null);
2857
- const [open = false, setOpen] = (0, import_react_use_controllable_state5.useControllableState)({
2858
- prop: openProp,
2859
- defaultProp: defaultOpen,
2860
- onChange: onOpenChange
2861
- });
2862
- return /* @__PURE__ */ import_react38.default.createElement(DropdownMenuProvider, {
2863
- scope: __scopeDropdownMenu,
2864
- triggerId: (0, import_react_id2.useId)(),
2865
- triggerRef,
2866
- contentId: (0, import_react_id2.useId)(),
2867
- open,
2868
- onOpenChange: setOpen,
2869
- onOpenToggle: (0, import_react38.useCallback)(() => setOpen((prevOpen) => !prevOpen), [
2870
- setOpen
2871
- ]),
2872
- modal
2873
- }, /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Root, {
2874
- ...menuScope,
2875
- open,
2876
- onOpenChange: setOpen,
2877
- dir,
2878
- modal
2879
- }, children));
2880
- } finally {
2881
- _effect.f();
2882
- }
2883
- };
2884
- DropdownMenuRoot.displayName = DROPDOWN_MENU_NAME;
2885
- var TRIGGER_NAME2 = "DropdownMenuTrigger";
2886
- var DropdownMenuTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2887
- var _effect = (0, import_tracking27.useSignals)();
2888
- try {
2889
- const { __scopeDropdownMenu, disabled = false, ...triggerProps } = props;
2890
- const context = useDropdownMenuContext(TRIGGER_NAME2, __scopeDropdownMenu);
2891
- const menuScope = useMenuScope(__scopeDropdownMenu);
2892
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Anchor, {
2893
- asChild: true,
2894
- ...menuScope
2895
- }, /* @__PURE__ */ import_react38.default.createElement(import_react_primitive10.Primitive.button, {
2896
- type: "button",
2897
- id: context.triggerId,
2898
- "aria-haspopup": "menu",
2899
- "aria-expanded": context.open,
2900
- "aria-controls": context.open ? context.contentId : void 0,
2901
- "data-state": context.open ? "open" : "closed",
2902
- "data-disabled": disabled ? "" : void 0,
2903
- disabled,
2904
- ...triggerProps,
2905
- ref: (0, import_react_compose_refs2.composeRefs)(forwardedRef, context.triggerRef),
2906
- onPointerDown: (0, import_primitive2.composeEventHandlers)(props.onPointerDown, (event) => {
2907
- if (!disabled && event.button === 0 && event.ctrlKey === false) {
2908
- context.onOpenToggle();
2909
- if (!context.open) {
2910
- event.preventDefault();
2911
- }
2912
- }
2913
- }),
2914
- onKeyDown: (0, import_primitive2.composeEventHandlers)(props.onKeyDown, (event) => {
2915
- if (disabled) {
2916
- return;
2917
- }
2918
- if ([
2919
- "Enter",
2920
- " "
2921
- ].includes(event.key)) {
2922
- context.onOpenToggle();
2923
- }
2924
- if (event.key === "ArrowDown") {
2925
- context.onOpenChange(true);
2926
- }
2927
- if ([
2928
- "Enter",
2929
- " ",
2930
- "ArrowDown"
2931
- ].includes(event.key)) {
2932
- event.preventDefault();
2933
- }
2934
- })
2935
- }));
2936
- } finally {
2937
- _effect.f();
2938
- }
2939
- });
2940
- DropdownMenuTrigger.displayName = TRIGGER_NAME2;
2941
- var VIRTUAL_TRIGGER_NAME = "DropdownMenuVirtualTrigger";
2942
- var DropdownMenuVirtualTrigger = (props) => {
2943
- var _effect = (0, import_tracking27.useSignals)();
2944
- try {
2945
- const { __scopeDropdownMenu, virtualRef } = props;
2946
- const context = useDropdownMenuContext(VIRTUAL_TRIGGER_NAME, __scopeDropdownMenu);
2947
- const menuScope = useMenuScope(__scopeDropdownMenu);
2948
- (0, import_react38.useEffect)(() => {
2949
- if (virtualRef.current) {
2950
- context.triggerRef.current = virtualRef.current;
2951
- }
2952
- });
2953
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Anchor, {
2954
- ...menuScope,
2955
- virtualRef
2956
- });
2957
- } finally {
2958
- _effect.f();
2959
- }
2960
- };
2961
- DropdownMenuVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME;
2962
- var PORTAL_NAME2 = "DropdownMenuPortal";
2963
- var DropdownMenuPortal = (props) => {
2964
- var _effect = (0, import_tracking27.useSignals)();
2965
- try {
2966
- const { __scopeDropdownMenu, ...portalProps } = props;
2967
- const menuScope = useMenuScope(__scopeDropdownMenu);
2968
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Portal, {
2969
- ...menuScope,
2970
- ...portalProps
2971
- });
2972
- } finally {
2973
- _effect.f();
2974
- }
2975
- };
2976
- DropdownMenuPortal.displayName = PORTAL_NAME2;
2977
- var DropdownMenuViewport = /* @__PURE__ */ (0, import_react38.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
2978
- var _effect = (0, import_tracking27.useSignals)();
2979
- try {
2980
- const { tx } = useThemeContext();
2981
- const Root7 = asChild ? import_react_slot11.Slot : import_react_primitive10.Primitive.div;
2982
- return /* @__PURE__ */ import_react38.default.createElement(Root7, {
2983
- ...props,
2984
- className: tx("menu.viewport", "menu__viewport", {}, classNames),
2985
- ref: forwardedRef
2986
- }, children);
2987
- } finally {
2988
- _effect.f();
2989
- }
2990
- });
2991
- var CONTENT_NAME2 = "DropdownMenuContent";
2992
- var DropdownMenuContent = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
2993
- var _effect = (0, import_tracking27.useSignals)();
2994
- try {
2995
- const { __scopeDropdownMenu, classNames, collisionPadding = 8, ...contentProps } = props;
2996
- const { tx } = useThemeContext();
2997
- const context = useDropdownMenuContext(CONTENT_NAME2, __scopeDropdownMenu);
2998
- const elevation = useElevationContext();
2999
- const menuScope = useMenuScope(__scopeDropdownMenu);
3000
- const hasInteractedOutsideRef = (0, import_react38.useRef)(false);
3001
- const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
3002
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Content, {
3003
- id: context.contentId,
3004
- "aria-labelledby": context.triggerId,
3005
- ...menuScope,
3006
- ...contentProps,
3007
- collisionPadding: safeCollisionPadding,
3008
- ref: forwardedRef,
3009
- onCloseAutoFocus: (0, import_primitive2.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
3010
- if (!hasInteractedOutsideRef.current) {
3011
- context.triggerRef.current?.focus();
3012
- }
3013
- hasInteractedOutsideRef.current = false;
3014
- event.preventDefault();
3015
- }),
3016
- onInteractOutside: (0, import_primitive2.composeEventHandlers)(props.onInteractOutside, (event) => {
3017
- const originalEvent = event.detail.originalEvent;
3018
- const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
3019
- const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
3020
- if (!context.modal || isRightClick) {
3021
- hasInteractedOutsideRef.current = true;
3022
- }
3023
- }),
3024
- className: tx("menu.content", "menu", {
3025
- elevation
3026
- }, classNames),
3027
- style: {
3028
- ...props.style,
3029
- // re-namespace exposed content custom properties
3030
- ...{
3031
- "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
3032
- "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
3033
- "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
3034
- "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
3035
- "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
3036
- }
3037
- }
3038
- });
3039
- } finally {
3040
- _effect.f();
3041
- }
3042
- });
3043
- DropdownMenuContent.displayName = CONTENT_NAME2;
3044
- var GROUP_NAME = "DropdownMenuGroup";
3045
- var DropdownMenuGroup = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
3046
- var _effect = (0, import_tracking27.useSignals)();
3047
- try {
3048
- const { __scopeDropdownMenu, ...groupProps } = props;
3049
- const menuScope = useMenuScope(__scopeDropdownMenu);
3050
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Group, {
3051
- ...menuScope,
3052
- ...groupProps,
3053
- ref: forwardedRef
3054
- });
3055
- } finally {
3056
- _effect.f();
3057
- }
3058
- });
3059
- DropdownMenuGroup.displayName = GROUP_NAME;
3060
- var LABEL_NAME = "DropdownMenuLabel";
3061
- var DropdownMenuGroupLabel = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
3062
- var _effect = (0, import_tracking27.useSignals)();
3063
- try {
3064
- const { __scopeDropdownMenu, classNames, ...labelProps } = props;
3065
- const menuScope = useMenuScope(__scopeDropdownMenu);
3066
- const { tx } = useThemeContext();
3067
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Label, {
3068
- ...menuScope,
3069
- ...labelProps,
3070
- className: tx("menu.groupLabel", "menu__group__label", {}, classNames),
3071
- ref: forwardedRef
3072
- });
3073
- } finally {
3074
- _effect.f();
3075
- }
3076
- });
3077
- DropdownMenuGroupLabel.displayName = LABEL_NAME;
3078
- var ITEM_NAME = "DropdownMenuItem";
3079
- var DropdownMenuItem = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
3080
- var _effect = (0, import_tracking27.useSignals)();
3081
- try {
3082
- const { __scopeDropdownMenu, classNames, ...itemProps } = props;
3083
- const menuScope = useMenuScope(__scopeDropdownMenu);
3084
- const { tx } = useThemeContext();
3085
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Item, {
3086
- ...menuScope,
3087
- ...itemProps,
3088
- className: tx("menu.item", "menu__item", {}, classNames),
3089
- ref: forwardedRef
3090
- });
3091
- } finally {
3092
- _effect.f();
3093
- }
3094
- });
3095
- DropdownMenuItem.displayName = ITEM_NAME;
3096
- var CHECKBOX_ITEM_NAME = "DropdownMenuCheckboxItem";
3097
- var DropdownMenuCheckboxItem = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
3098
- var _effect = (0, import_tracking27.useSignals)();
3099
- try {
3100
- const { __scopeDropdownMenu, classNames, ...checkboxItemProps } = props;
3101
- const menuScope = useMenuScope(__scopeDropdownMenu);
3102
- const { tx } = useThemeContext();
3103
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.CheckboxItem, {
3104
- ...menuScope,
3105
- ...checkboxItemProps,
3106
- className: tx("menu.item", "menu__item--checkbox", {}, classNames),
3107
- ref: forwardedRef
3108
- });
3109
- } finally {
3110
- _effect.f();
3111
- }
3112
- });
3113
- DropdownMenuCheckboxItem.displayName = CHECKBOX_ITEM_NAME;
3114
- var RADIO_GROUP_NAME = "DropdownMenuRadioGroup";
3115
- var DropdownMenuRadioGroup = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
3116
- var _effect = (0, import_tracking27.useSignals)();
3117
- try {
3118
- const { __scopeDropdownMenu, ...radioGroupProps } = props;
3119
- const menuScope = useMenuScope(__scopeDropdownMenu);
3120
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.RadioGroup, {
3121
- ...menuScope,
3122
- ...radioGroupProps,
3123
- ref: forwardedRef
3124
- });
3125
- } finally {
3126
- _effect.f();
3127
- }
3128
- });
3129
- DropdownMenuRadioGroup.displayName = RADIO_GROUP_NAME;
3130
- var RADIO_ITEM_NAME = "DropdownMenuRadioItem";
3131
- var DropdownMenuRadioItem = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
3132
- var _effect = (0, import_tracking27.useSignals)();
3133
- try {
3134
- const { __scopeDropdownMenu, ...radioItemProps } = props;
3135
- const menuScope = useMenuScope(__scopeDropdownMenu);
3136
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.RadioItem, {
3137
- ...menuScope,
3138
- ...radioItemProps,
3139
- ref: forwardedRef
3140
- });
3141
- } finally {
3142
- _effect.f();
3143
- }
3144
- });
3145
- DropdownMenuRadioItem.displayName = RADIO_ITEM_NAME;
3146
- var INDICATOR_NAME = "DropdownMenuItemIndicator";
3147
- var DropdownMenuItemIndicator = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
3148
- var _effect = (0, import_tracking27.useSignals)();
3149
- try {
3150
- const { __scopeDropdownMenu, ...itemIndicatorProps } = props;
3151
- const menuScope = useMenuScope(__scopeDropdownMenu);
3152
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.ItemIndicator, {
3153
- ...menuScope,
3154
- ...itemIndicatorProps,
3155
- ref: forwardedRef
3156
- });
3157
- } finally {
3158
- _effect.f();
3159
- }
3160
- });
3161
- DropdownMenuItemIndicator.displayName = INDICATOR_NAME;
3162
- var SEPARATOR_NAME = "DropdownMenuSeparator";
3163
- var DropdownMenuSeparator = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
3164
- var _effect = (0, import_tracking27.useSignals)();
3165
- try {
3166
- const { __scopeDropdownMenu, classNames, ...separatorProps } = props;
3167
- const menuScope = useMenuScope(__scopeDropdownMenu);
3168
- const { tx } = useThemeContext();
3169
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Separator, {
3170
- ...menuScope,
3171
- ...separatorProps,
3172
- className: tx("menu.separator", "menu__item", {}, classNames),
3173
- ref: forwardedRef
3174
- });
3175
- } finally {
3176
- _effect.f();
3177
- }
3178
- });
3179
- DropdownMenuSeparator.displayName = SEPARATOR_NAME;
3180
- var ARROW_NAME2 = "DropdownMenuArrow";
3181
- var DropdownMenuArrow = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
3182
- var _effect = (0, import_tracking27.useSignals)();
3183
- try {
3184
- const { __scopeDropdownMenu, classNames, ...arrowProps } = props;
3185
- const menuScope = useMenuScope(__scopeDropdownMenu);
3186
- const { tx } = useThemeContext();
3187
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Arrow, {
3188
- ...menuScope,
3189
- ...arrowProps,
3190
- className: tx("menu.arrow", "menu__arrow", {}, classNames),
3191
- ref: forwardedRef
3192
- });
3193
- } finally {
3194
- _effect.f();
3195
- }
3196
- });
3197
- DropdownMenuArrow.displayName = ARROW_NAME2;
3198
- var DropdownMenuSub = (props) => {
3199
- var _effect = (0, import_tracking27.useSignals)();
3200
- try {
3201
- const { __scopeDropdownMenu, children, open: openProp, onOpenChange, defaultOpen } = props;
3202
- const menuScope = useMenuScope(__scopeDropdownMenu);
3203
- const [open = false, setOpen] = (0, import_react_use_controllable_state5.useControllableState)({
3204
- prop: openProp,
3205
- defaultProp: defaultOpen,
3206
- onChange: onOpenChange
3207
- });
3208
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.Sub, {
3209
- ...menuScope,
3210
- open,
3211
- onOpenChange: setOpen
3212
- }, children);
3213
- } finally {
3214
- _effect.f();
3215
- }
3216
- };
3217
- var SUB_TRIGGER_NAME = "DropdownMenuSubTrigger";
3218
- var DropdownMenuSubTrigger = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
3219
- var _effect = (0, import_tracking27.useSignals)();
3220
- try {
3221
- const { __scopeDropdownMenu, ...subTriggerProps } = props;
3222
- const menuScope = useMenuScope(__scopeDropdownMenu);
3223
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.SubTrigger, {
3224
- ...menuScope,
3225
- ...subTriggerProps,
3226
- ref: forwardedRef
3227
- });
3228
- } finally {
3229
- _effect.f();
3230
- }
3231
- });
3232
- DropdownMenuSubTrigger.displayName = SUB_TRIGGER_NAME;
3233
- var SUB_CONTENT_NAME = "DropdownMenuSubContent";
3234
- var DropdownMenuSubContent = /* @__PURE__ */ (0, import_react38.forwardRef)((props, forwardedRef) => {
3235
- var _effect = (0, import_tracking27.useSignals)();
3236
- try {
3237
- const { __scopeDropdownMenu, ...subContentProps } = props;
3238
- const menuScope = useMenuScope(__scopeDropdownMenu);
3239
- return /* @__PURE__ */ import_react38.default.createElement(MenuPrimitive.SubContent, {
3240
- ...menuScope,
3241
- ...subContentProps,
3242
- ref: forwardedRef,
3243
- style: {
3244
- ...props.style,
3245
- // re-namespace exposed content custom properties
3246
- ...{
3247
- "--radix-dropdown-menu-content-transform-origin": "var(--radix-popper-transform-origin)",
3248
- "--radix-dropdown-menu-content-available-width": "var(--radix-popper-available-width)",
3249
- "--radix-dropdown-menu-content-available-height": "var(--radix-popper-available-height)",
3250
- "--radix-dropdown-menu-trigger-width": "var(--radix-popper-anchor-width)",
3251
- "--radix-dropdown-menu-trigger-height": "var(--radix-popper-anchor-height)"
3252
- }
3253
- }
3254
- });
3255
- } finally {
3256
- _effect.f();
3257
- }
3258
- });
3259
- DropdownMenuSubContent.displayName = SUB_CONTENT_NAME;
3260
- var DropdownMenu = {
3261
- Root: DropdownMenuRoot,
3262
- Trigger: DropdownMenuTrigger,
3263
- VirtualTrigger: DropdownMenuVirtualTrigger,
3264
- Portal: DropdownMenuPortal,
3265
- Content: DropdownMenuContent,
3266
- Viewport: DropdownMenuViewport,
3267
- Group: DropdownMenuGroup,
3268
- GroupLabel: DropdownMenuGroupLabel,
3269
- Item: DropdownMenuItem,
3270
- CheckboxItem: DropdownMenuCheckboxItem,
3271
- RadioGroup: DropdownMenuRadioGroup,
3272
- RadioItem: DropdownMenuRadioItem,
3273
- ItemIndicator: DropdownMenuItemIndicator,
3274
- Separator: DropdownMenuSeparator,
3275
- Arrow: DropdownMenuArrow,
3276
- Sub: DropdownMenuSub,
3277
- SubTrigger: DropdownMenuSubTrigger,
3278
- SubContent: DropdownMenuSubContent
3279
- };
3280
- var useDropdownMenuMenuScope = useMenuScope;
3281
- var messageIcons = {
3282
- success: "ph--check-circle--duotone",
3283
- info: "ph--info--duotone",
3284
- warning: "ph--warning--duotone",
3285
- error: "ph--warning-circle--duotone",
3286
- neutral: "ph--info--duotone"
3287
- };
3288
- var MESSAGE_NAME = "Message";
3289
- var [MessageProvider, useMessageContext] = (0, import_react_context9.createContext)(MESSAGE_NAME);
3290
- var MessageRoot = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, valence = "neutral", elevation: propsElevation, classNames, titleId: propsTitleId, descriptionId: propsDescriptionId, children, ...props }, forwardedRef) => {
3291
- var _effect = (0, import_tracking28.useSignals)();
3292
- try {
3293
- const { tx } = useThemeContext();
3294
- const titleId = (0, import_react_hooks5.useId)("message__title", propsTitleId);
3295
- const descriptionId = (0, import_react_hooks5.useId)("message__description", propsDescriptionId);
3296
- const elevation = useElevationContext(propsElevation);
3297
- const Root7 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.div;
3298
- return /* @__PURE__ */ import_react39.default.createElement(MessageProvider, {
3299
- titleId,
3300
- descriptionId,
3301
- valence
3302
- }, /* @__PURE__ */ import_react39.default.createElement(Root7, {
3303
- role: valence === "neutral" ? "paragraph" : "alert",
3304
- ...props,
3305
- className: tx("message.root", "message", {
3306
- valence,
3307
- elevation
3308
- }, classNames),
3309
- "aria-labelledby": titleId,
3310
- "aria-describedby": descriptionId,
3311
- ref: forwardedRef
3312
- }, children));
3313
- } finally {
3314
- _effect.f();
3315
- }
3316
- });
3317
- MessageRoot.displayName = MESSAGE_NAME;
3318
- var MESSAGE_TITLE_NAME = "MessageTitle";
3319
- var MessageTitle = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, classNames, children, icon, ...props }, forwardedRef) => {
3320
- var _effect = (0, import_tracking28.useSignals)();
3321
- try {
3322
- const { tx } = useThemeContext();
3323
- const { titleId, valence } = useMessageContext(MESSAGE_TITLE_NAME);
3324
- const Root7 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.h2;
3325
- return /* @__PURE__ */ import_react39.default.createElement(Root7, {
3326
- ...props,
3327
- className: tx("message.title", "message__title", {}, classNames),
3328
- id: titleId,
3329
- ref: forwardedRef
3330
- }, !icon && valence === "neutral" ? null : /* @__PURE__ */ import_react39.default.createElement(Icon, {
3331
- size: 5,
3332
- icon: icon ?? messageIcons[valence],
3333
- classNames: tx("message.icon", "message__icon", {
3334
- valence
3335
- })
3336
- }), /* @__PURE__ */ import_react39.default.createElement("span", null, children));
3337
- } finally {
3338
- _effect.f();
3339
- }
3340
- });
3341
- MessageTitle.displayName = MESSAGE_TITLE_NAME;
3342
- var MESSAGE_BODY_NAME = "MessageContent";
3343
- var MessageContent = /* @__PURE__ */ (0, import_react39.forwardRef)(({ asChild, classNames, children, ...props }, forwardedRef) => {
3344
- var _effect = (0, import_tracking28.useSignals)();
3345
- try {
3346
- const { tx } = useThemeContext();
3347
- const { descriptionId } = useMessageContext(MESSAGE_BODY_NAME);
3348
- const Root7 = asChild ? import_react_slot12.Slot : import_react_primitive11.Primitive.p;
3349
- return /* @__PURE__ */ import_react39.default.createElement(Root7, {
3350
- ...props,
3351
- className: tx("message.content", "message__content", {}, classNames),
3352
- id: descriptionId,
3353
- ref: forwardedRef
3354
- }, children);
3355
- } finally {
3356
- _effect.f();
3357
- }
3358
- });
3359
- MessageContent.displayName = MESSAGE_BODY_NAME;
3360
- var Message = {
3361
- Root: MessageRoot,
3362
- Title: MessageTitle,
3363
- Content: MessageContent
3364
- };
3365
- var Callout = Message;
3366
- var POPOVER_NAME = "Popover";
3367
- var [createPopoverContext, createPopoverScope] = (0, import_react_context10.createContextScope)(POPOVER_NAME, [
3368
- import_react_popper2.createPopperScope
3369
- ]);
3370
- var usePopperScope2 = (0, import_react_popper2.createPopperScope)();
3371
- var [PopoverProvider, usePopoverContext] = createPopoverContext(POPOVER_NAME);
3372
- var PopoverRoot = (props) => {
3373
- var _effect = (0, import_tracking29.useSignals)();
3374
- try {
3375
- const { __scopePopover, children, open: openProp, defaultOpen, onOpenChange, modal = false } = props;
3376
- const popperScope = usePopperScope2(__scopePopover);
3377
- const triggerRef = (0, import_react40.useRef)(null);
3378
- const [hasCustomAnchor, setHasCustomAnchor] = (0, import_react40.useState)(false);
3379
- const [open = false, setOpen] = (0, import_react_use_controllable_state6.useControllableState)({
3380
- prop: openProp,
3381
- defaultProp: defaultOpen,
3382
- onChange: onOpenChange
3383
- });
3384
- return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Root, popperScope, /* @__PURE__ */ import_react40.default.createElement(PopoverProvider, {
3385
- scope: __scopePopover,
3386
- contentId: (0, import_react_id3.useId)(),
3387
- triggerRef,
3388
- open,
3389
- onOpenChange: setOpen,
3390
- onOpenToggle: (0, import_react40.useCallback)(() => setOpen((prevOpen) => !prevOpen), [
3391
- setOpen
3392
- ]),
3393
- hasCustomAnchor,
3394
- onCustomAnchorAdd: (0, import_react40.useCallback)(() => setHasCustomAnchor(true), []),
3395
- onCustomAnchorRemove: (0, import_react40.useCallback)(() => setHasCustomAnchor(false), []),
3396
- modal
3397
- }, children));
3398
- } finally {
3399
- _effect.f();
3400
- }
3401
- };
3402
- PopoverRoot.displayName = POPOVER_NAME;
3403
- var ANCHOR_NAME = "PopoverAnchor";
3404
- var PopoverAnchor = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
3405
- var _effect = (0, import_tracking29.useSignals)();
3406
- try {
3407
- const { __scopePopover, ...anchorProps } = props;
3408
- const context = usePopoverContext(ANCHOR_NAME, __scopePopover);
3409
- const popperScope = usePopperScope2(__scopePopover);
3410
- const { onCustomAnchorAdd, onCustomAnchorRemove } = context;
3411
- (0, import_react40.useEffect)(() => {
3412
- onCustomAnchorAdd();
3413
- return () => onCustomAnchorRemove();
3414
- }, [
3415
- onCustomAnchorAdd,
3416
- onCustomAnchorRemove
3417
- ]);
3418
- return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Anchor, {
3419
- ...popperScope,
3420
- ...anchorProps,
3421
- ref: forwardedRef
3422
- });
3423
- } finally {
3424
- _effect.f();
3425
- }
3426
- });
3427
- PopoverAnchor.displayName = ANCHOR_NAME;
3428
- var TRIGGER_NAME3 = "PopoverTrigger";
3429
- var PopoverTrigger = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
3430
- var _effect = (0, import_tracking29.useSignals)();
3431
- try {
3432
- const { __scopePopover, ...triggerProps } = props;
3433
- const context = usePopoverContext(TRIGGER_NAME3, __scopePopover);
3434
- const popperScope = usePopperScope2(__scopePopover);
3435
- const composedTriggerRef = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, context.triggerRef);
3436
- const trigger = /* @__PURE__ */ import_react40.default.createElement(import_react_primitive12.Primitive.button, {
3437
- type: "button",
3438
- "aria-haspopup": "dialog",
3439
- "aria-expanded": context.open,
3440
- "aria-controls": context.contentId,
3441
- "data-state": getState(context.open),
3442
- ...triggerProps,
3443
- ref: composedTriggerRef,
3444
- onClick: (0, import_primitive3.composeEventHandlers)(props.onClick, context.onOpenToggle)
3445
- });
3446
- return context.hasCustomAnchor ? trigger : /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Anchor, {
3447
- asChild: true,
3448
- ...popperScope
3449
- }, trigger);
3450
- } finally {
3451
- _effect.f();
3452
- }
3453
- });
3454
- PopoverTrigger.displayName = TRIGGER_NAME3;
3455
- var VIRTUAL_TRIGGER_NAME2 = "PopoverVirtualTrigger";
3456
- var PopoverVirtualTrigger = (props) => {
3457
- var _effect = (0, import_tracking29.useSignals)();
3458
- try {
3459
- const { __scopePopover, virtualRef } = props;
3460
- const context = usePopoverContext(VIRTUAL_TRIGGER_NAME2, __scopePopover);
3461
- const popperScope = usePopperScope2(__scopePopover);
3462
- (0, import_react40.useEffect)(() => {
3463
- if (virtualRef.current) {
3464
- context.triggerRef.current = virtualRef.current;
3465
- }
3466
- });
3467
- return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Anchor, {
3468
- ...popperScope,
3469
- virtualRef
3470
- });
3471
- } finally {
3472
- _effect.f();
3473
- }
3474
- };
3475
- PopoverVirtualTrigger.displayName = VIRTUAL_TRIGGER_NAME2;
3476
- var PORTAL_NAME3 = "PopoverPortal";
3477
- var [PortalProvider2, usePortalContext2] = createPopoverContext(PORTAL_NAME3, {
3478
- forceMount: void 0
3479
- });
3480
- var PopoverPortal = (props) => {
3481
- var _effect = (0, import_tracking29.useSignals)();
3482
- try {
3483
- const { __scopePopover, forceMount, children, container } = props;
3484
- const context = usePopoverContext(PORTAL_NAME3, __scopePopover);
3485
- return /* @__PURE__ */ import_react40.default.createElement(PortalProvider2, {
3486
- scope: __scopePopover,
3487
- forceMount
3488
- }, /* @__PURE__ */ import_react40.default.createElement(import_react_presence2.Presence, {
3489
- present: forceMount || context.open
3490
- }, /* @__PURE__ */ import_react40.default.createElement(import_react_portal2.Portal, {
3491
- asChild: true,
3492
- container
3493
- }, children)));
3494
- } finally {
3495
- _effect.f();
3496
- }
3497
- };
3498
- PopoverPortal.displayName = PORTAL_NAME3;
3499
- var CONTENT_NAME3 = "PopoverContent";
3500
- var PopoverContent = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
3501
- var _effect = (0, import_tracking29.useSignals)();
3502
- try {
3503
- const portalContext = usePortalContext2(CONTENT_NAME3, props.__scopePopover);
3504
- const { forceMount = portalContext.forceMount, ...contentProps } = props;
3505
- const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
3506
- return /* @__PURE__ */ import_react40.default.createElement(import_react_presence2.Presence, {
3507
- present: forceMount || context.open
3508
- }, context.modal ? /* @__PURE__ */ import_react40.default.createElement(PopoverContentModal, {
3509
- ...contentProps,
3510
- ref: forwardedRef
3511
- }) : /* @__PURE__ */ import_react40.default.createElement(PopoverContentNonModal, {
3512
- ...contentProps,
3513
- ref: forwardedRef
3514
- }));
3515
- } finally {
3516
- _effect.f();
3517
- }
3518
- });
3519
- PopoverContent.displayName = CONTENT_NAME3;
3520
- var PopoverContentModal = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
3521
- var _effect = (0, import_tracking29.useSignals)();
3522
- try {
3523
- const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
3524
- const contentRef = (0, import_react40.useRef)(null);
3525
- const composedRefs = (0, import_react_compose_refs3.useComposedRefs)(forwardedRef, contentRef);
3526
- const isRightClickOutsideRef = (0, import_react40.useRef)(false);
3527
- (0, import_react40.useEffect)(() => {
3528
- const content = contentRef.current;
3529
- if (content) {
3530
- return (0, import_aria_hidden.hideOthers)(content);
3531
- }
3532
- }, []);
3533
- return /* @__PURE__ */ import_react40.default.createElement(import_react_remove_scroll.RemoveScroll, {
3534
- as: import_react_slot13.Slot,
3535
- allowPinchZoom: true
3536
- }, /* @__PURE__ */ import_react40.default.createElement(PopoverContentImpl, {
3537
- ...props,
3538
- ref: composedRefs,
3539
- // we make sure we're not trapping once it's been closed
3540
- // (closed !== unmounted when animating out)
3541
- trapFocus: context.open,
3542
- disableOutsidePointerEvents: true,
3543
- onCloseAutoFocus: (0, import_primitive3.composeEventHandlers)(props.onCloseAutoFocus, (event) => {
3544
- event.preventDefault();
3545
- if (!isRightClickOutsideRef.current) {
3546
- context.triggerRef.current?.focus();
3547
- }
3548
- }),
3549
- onPointerDownOutside: (0, import_primitive3.composeEventHandlers)(props.onPointerDownOutside, (event) => {
3550
- const originalEvent = event.detail.originalEvent;
3551
- const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
3552
- const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
3553
- isRightClickOutsideRef.current = isRightClick;
3554
- }, {
3555
- checkForDefaultPrevented: false
3556
- }),
3557
- // When focus is trapped, a `focusout` event may still happen.
3558
- // We make sure we don't trigger our `onDismiss` in such case.
3559
- onFocusOutside: (0, import_primitive3.composeEventHandlers)(props.onFocusOutside, (event) => event.preventDefault(), {
3560
- checkForDefaultPrevented: false
3561
- })
3562
- }));
3563
- } finally {
3564
- _effect.f();
3565
- }
3566
- });
3567
- var PopoverContentNonModal = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
3568
- var _effect = (0, import_tracking29.useSignals)();
3569
- try {
3570
- const context = usePopoverContext(CONTENT_NAME3, props.__scopePopover);
3571
- const hasInteractedOutsideRef = (0, import_react40.useRef)(false);
3572
- const hasPointerDownOutsideRef = (0, import_react40.useRef)(false);
3573
- return /* @__PURE__ */ import_react40.default.createElement(PopoverContentImpl, {
3574
- ...props,
3575
- ref: forwardedRef,
3576
- trapFocus: false,
3577
- disableOutsidePointerEvents: false,
3578
- onCloseAutoFocus: (event) => {
3579
- props.onCloseAutoFocus?.(event);
3580
- if (!event.defaultPrevented) {
3581
- if (!hasInteractedOutsideRef.current) {
3582
- context.triggerRef.current?.focus();
3583
- }
3584
- event.preventDefault();
3585
- }
3586
- hasInteractedOutsideRef.current = false;
3587
- hasPointerDownOutsideRef.current = false;
3588
- },
3589
- onInteractOutside: (event) => {
3590
- props.onInteractOutside?.(event);
3591
- if (!event.defaultPrevented) {
3592
- hasInteractedOutsideRef.current = true;
3593
- if (event.detail.originalEvent.type === "pointerdown") {
3594
- hasPointerDownOutsideRef.current = true;
3595
- }
3596
- }
3597
- const target = event.target;
3598
- const targetIsTrigger = context.triggerRef.current?.contains(target);
3599
- if (targetIsTrigger) {
3600
- event.preventDefault();
3601
- }
3602
- if (event.detail.originalEvent.type === "focusin" && hasPointerDownOutsideRef.current) {
3603
- event.preventDefault();
3604
- }
3605
- }
3606
- });
3607
- } finally {
3608
- _effect.f();
3609
- }
3610
- });
3611
- var PopoverContentImpl = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
3612
- var _effect = (0, import_tracking29.useSignals)();
3613
- try {
3614
- const { __scopePopover, trapFocus, onOpenAutoFocus, onCloseAutoFocus, disableOutsidePointerEvents, onEscapeKeyDown, onPointerDownOutside, onFocusOutside, onInteractOutside, collisionPadding = 8, classNames, ...contentProps } = props;
3615
- const context = usePopoverContext(CONTENT_NAME3, __scopePopover);
3616
- const popperScope = usePopperScope2(__scopePopover);
3617
- const { tx } = useThemeContext();
3618
- const elevation = useElevationContext();
3619
- const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
3620
- (0, import_react_focus_guards.useFocusGuards)();
3621
- return /* @__PURE__ */ import_react40.default.createElement(import_react_focus_scope.FocusScope, {
3622
- asChild: true,
3623
- loop: true,
3624
- trapped: trapFocus,
3625
- onMountAutoFocus: onOpenAutoFocus,
3626
- onUnmountAutoFocus: onCloseAutoFocus
3627
- }, /* @__PURE__ */ import_react40.default.createElement(import_react_dismissable_layer2.DismissableLayer, {
3628
- asChild: true,
3629
- disableOutsidePointerEvents,
3630
- onInteractOutside,
3631
- onEscapeKeyDown,
3632
- onPointerDownOutside,
3633
- onFocusOutside,
3634
- onDismiss: () => context.onOpenChange(false)
3635
- }, /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Content, {
3636
- "data-state": getState(context.open),
3637
- role: "dialog",
3638
- id: context.contentId,
3639
- ...popperScope,
3640
- ...contentProps,
3641
- collisionPadding: safeCollisionPadding,
3642
- className: tx("popover.content", "popover", {
3643
- elevation
3644
- }, classNames),
3645
- ref: forwardedRef,
3646
- style: {
3647
- ...contentProps.style,
3648
- // re-namespace exposed content custom properties
3649
- ...{
3650
- "--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
3651
- "--radix-popover-content-available-width": "var(--radix-popper-available-width)",
3652
- "--radix-popover-content-available-height": "var(--radix-popper-available-height)",
3653
- "--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
3654
- "--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
3655
- }
3656
- }
3657
- })));
3658
- } finally {
3659
- _effect.f();
3660
- }
3661
- });
3662
- var CLOSE_NAME = "PopoverClose";
3663
- var PopoverClose = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
3664
- var _effect = (0, import_tracking29.useSignals)();
3665
- try {
3666
- const { __scopePopover, ...closeProps } = props;
3667
- const context = usePopoverContext(CLOSE_NAME, __scopePopover);
3668
- return /* @__PURE__ */ import_react40.default.createElement(import_react_primitive12.Primitive.button, {
3669
- type: "button",
3670
- ...closeProps,
3671
- ref: forwardedRef,
3672
- onClick: (0, import_primitive3.composeEventHandlers)(props.onClick, () => context.onOpenChange(false))
3673
- });
3674
- } finally {
3675
- _effect.f();
3676
- }
3677
- });
3678
- PopoverClose.displayName = CLOSE_NAME;
3679
- var ARROW_NAME3 = "PopoverArrow";
3680
- var PopoverArrow = /* @__PURE__ */ (0, import_react40.forwardRef)((props, forwardedRef) => {
3681
- var _effect = (0, import_tracking29.useSignals)();
3682
- try {
3683
- const { __scopePopover, classNames, ...arrowProps } = props;
3684
- const popperScope = usePopperScope2(__scopePopover);
3685
- const { tx } = useThemeContext();
3686
- return /* @__PURE__ */ import_react40.default.createElement(PopperPrimitive2.Arrow, {
3687
- ...popperScope,
3688
- ...arrowProps,
3689
- className: tx("popover.arrow", "popover__arrow", {}, classNames),
3690
- ref: forwardedRef
3691
- });
3692
- } finally {
3693
- _effect.f();
3694
- }
3695
- });
3696
- PopoverArrow.displayName = ARROW_NAME3;
3697
- var PopoverViewport = /* @__PURE__ */ (0, import_react40.forwardRef)(({ classNames, asChild, constrainInline = true, constrainBlock = true, children, ...props }, forwardedRef) => {
3698
- var _effect = (0, import_tracking29.useSignals)();
3699
- try {
3700
- const { tx } = useThemeContext();
3701
- const Root7 = asChild ? import_react_slot13.Slot : import_react_primitive12.Primitive.div;
3702
- return /* @__PURE__ */ import_react40.default.createElement(Root7, {
3703
- ...props,
3704
- className: tx("popover.viewport", "popover__viewport", {
3705
- constrainInline,
3706
- constrainBlock
3707
- }, classNames),
3708
- ref: forwardedRef
3709
- }, children);
3710
- } finally {
3711
- _effect.f();
3712
- }
3713
- });
3714
- var getState = (open) => open ? "open" : "closed";
3715
- var Popover = {
3716
- Root: PopoverRoot,
3717
- Anchor: PopoverAnchor,
3718
- Trigger: PopoverTrigger,
3719
- VirtualTrigger: PopoverVirtualTrigger,
3720
- Portal: PopoverPortal,
3721
- Content: PopoverContent,
3722
- Close: PopoverClose,
3723
- Arrow: PopoverArrow,
3724
- Viewport: PopoverViewport
3725
- };
3726
- var Status = /* @__PURE__ */ (0, import_react41.forwardRef)(({ classNames, children, progress = 0, indeterminate, variant, ...props }, forwardedRef) => {
3727
- var _effect = (0, import_tracking30.useSignals)();
3728
- try {
3729
- const { tx } = useThemeContext();
3730
- return /* @__PURE__ */ import_react41.default.createElement("span", {
3731
- role: "status",
3732
- ...props,
3733
- className: tx("status.root", "status", {
3734
- indeterminate,
3735
- variant
3736
- }, classNames),
3737
- ref: forwardedRef
3738
- }, /* @__PURE__ */ import_react41.default.createElement("span", {
3739
- role: "none",
3740
- className: tx("status.bar", "status__bar", {
3741
- indeterminate,
3742
- variant
3743
- }, classNames),
3744
- ...!indeterminate && {
3745
- style: {
3746
- width: `${Math.round(progress * 100)}%`
3747
- }
3748
- }
3749
- }), children);
3750
- } finally {
3751
- _effect.f();
3752
- }
3753
- });
3754
- var ScrollAreaRoot = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3755
- var _effect = (0, import_tracking31.useSignals)();
3756
- try {
3757
- const { tx } = useThemeContext();
3758
- return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Root, {
3759
- ...props,
3760
- className: tx("scrollArea.root", "scroll-area", {}, classNames),
3761
- ref: forwardedRef
3762
- });
3763
- } finally {
3764
- _effect.f();
3765
- }
3766
- });
3767
- var ScrollAreaViewport = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3768
- var _effect = (0, import_tracking31.useSignals)();
3769
- try {
3770
- const { tx } = useThemeContext();
3771
- return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Viewport, {
3772
- ...props,
3773
- className: tx("scrollArea.viewport", "scroll-area", {}, classNames),
3774
- ref: forwardedRef
3775
- });
3776
- } finally {
3777
- _effect.f();
3778
- }
3779
- });
3780
- var ScrollAreaScrollbar = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, variant = "fine", ...props }, forwardedRef) => {
3781
- var _effect = (0, import_tracking31.useSignals)();
3782
- try {
3783
- const { tx } = useThemeContext();
3784
- return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Scrollbar, {
3785
- "data-variant": variant,
3786
- ...props,
3787
- className: tx("scrollArea.scrollbar", "scroll-area__scrollbar", {}, classNames),
3788
- ref: forwardedRef
3789
- });
3790
- } finally {
3791
- _effect.f();
3792
- }
3793
- });
3794
- var ScrollAreaThumb = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3795
- var _effect = (0, import_tracking31.useSignals)();
3796
- try {
3797
- const { tx } = useThemeContext();
3798
- return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Thumb, {
3799
- ...props,
3800
- className: tx("scrollArea.thumb", "scroll-area__thumb", {}, classNames),
3801
- ref: forwardedRef
3802
- });
3803
- } finally {
3804
- _effect.f();
3805
- }
3806
- });
3807
- var ScrollAreaCorner = /* @__PURE__ */ (0, import_react42.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3808
- var _effect = (0, import_tracking31.useSignals)();
3809
- try {
3810
- const { tx } = useThemeContext();
3811
- return /* @__PURE__ */ import_react42.default.createElement(import_react_scroll_area.Corner, {
3812
- ...props,
3813
- className: tx("scrollArea.corner", "scroll-area__corner", {}, classNames),
3814
- ref: forwardedRef
3815
- });
3816
- } finally {
3817
- _effect.f();
3818
- }
3819
- });
3820
- var ScrollArea = {
3821
- Root: ScrollAreaRoot,
3822
- Viewport: ScrollAreaViewport,
3823
- Scrollbar: ScrollAreaScrollbar,
3824
- Thumb: ScrollAreaThumb,
3825
- Corner: ScrollAreaCorner
3826
- };
3827
- var SelectRoot = SelectPrimitive.Root;
3828
- var SelectTrigger = SelectPrimitive.Trigger;
3829
- var SelectValue = SelectPrimitive.Value;
3830
- var SelectIcon = SelectPrimitive.Icon;
3831
- var SelectPortal = SelectPrimitive.Portal;
3832
- var SelectTriggerButton = /* @__PURE__ */ (0, import_react44.forwardRef)(({ children, placeholder, ...props }, forwardedRef) => {
3833
- var _effect = (0, import_tracking32.useSignals)();
3834
- try {
3835
- const { tx } = useThemeContext();
3836
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Trigger, {
3837
- asChild: true,
3838
- ref: forwardedRef
3839
- }, /* @__PURE__ */ import_react44.default.createElement(Button, props, /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Value, {
3840
- placeholder
3841
- }, children), /* @__PURE__ */ import_react44.default.createElement("span", {
3842
- className: "w-1 flex-1"
3843
- }), /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Icon, {
3844
- asChild: true
3845
- }, /* @__PURE__ */ import_react44.default.createElement(import_react43.CaretDown, {
3846
- className: tx("select.triggerIcon", "select__trigger__icon", {}),
3847
- weight: "bold"
3848
- }))));
3849
- } finally {
3850
- _effect.f();
3851
- }
3852
- });
3853
- var SelectContent = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, children, collisionPadding = 8, ...props }, forwardedRef) => {
3854
- var _effect = (0, import_tracking32.useSignals)();
3855
- try {
3856
- const { tx } = useThemeContext();
3857
- const elevation = useElevationContext();
3858
- const safeCollisionPadding = useSafeCollisionPadding(collisionPadding);
3859
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Content, {
3860
- ...props,
3861
- collisionPadding: safeCollisionPadding,
3862
- className: tx("select.content", "select__content", {
3863
- elevation
3864
- }, classNames),
3865
- position: "popper",
3866
- ref: forwardedRef
3867
- }, children);
3868
- } finally {
3869
- _effect.f();
3870
- }
3871
- });
3872
- var SelectScrollUpButton2 = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
3873
- var _effect = (0, import_tracking32.useSignals)();
3874
- try {
3875
- const { tx } = useThemeContext();
3876
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.SelectScrollUpButton, {
3877
- ...props,
3878
- className: tx("select.scrollButton", "select__scroll-button--up", {}, classNames),
3879
- ref: forwardedRef
3880
- }, children ?? /* @__PURE__ */ import_react44.default.createElement(import_react43.CaretUp, {
3881
- weight: "bold"
3882
- }));
3883
- } finally {
3884
- _effect.f();
3885
- }
3886
- });
3887
- var SelectScrollDownButton2 = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
3888
- var _effect = (0, import_tracking32.useSignals)();
3889
- try {
3890
- const { tx } = useThemeContext();
3891
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.SelectScrollDownButton, {
3892
- ...props,
3893
- className: tx("select.scrollButton", "select__scroll-button--down", {}, classNames),
3894
- ref: forwardedRef
3895
- }, children ?? /* @__PURE__ */ import_react44.default.createElement(import_react43.CaretDown, {
3896
- weight: "bold"
3897
- }));
3898
- } finally {
3899
- _effect.f();
3900
- }
3901
- });
3902
- var SelectViewport2 = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, asChild, children, ...props }, forwardedRef) => {
3903
- var _effect = (0, import_tracking32.useSignals)();
3904
- try {
3905
- const { tx } = useThemeContext();
3906
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.SelectViewport, {
3907
- ...props,
3908
- className: tx("select.viewport", "select__viewport", {}, classNames),
3909
- ref: forwardedRef
3910
- }, children);
3911
- } finally {
3912
- _effect.f();
3913
- }
3914
- });
3915
- var SelectItem = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3916
- var _effect = (0, import_tracking32.useSignals)();
3917
- try {
3918
- const { tx } = useThemeContext();
3919
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Item, {
3920
- ...props,
3921
- className: tx("select.item", "option", {}, classNames),
3922
- ref: forwardedRef
3923
- });
3924
- } finally {
3925
- _effect.f();
3926
- }
3927
- });
3928
- var SelectItemText = SelectPrimitive.ItemText;
3929
- var SelectItemIndicator = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
3930
- var _effect = (0, import_tracking32.useSignals)();
3931
- try {
3932
- const { tx } = useThemeContext();
3933
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.ItemIndicator, {
3934
- ...props,
3935
- className: tx("select.itemIndicator", "option__indicator", {}, classNames),
3936
- ref: forwardedRef
3937
- }, children);
3938
- } finally {
3939
- _effect.f();
3940
- }
3941
- });
3942
- var SelectOption = /* @__PURE__ */ (0, import_react44.forwardRef)(({ children, classNames, ...props }, forwardedRef) => {
3943
- var _effect = (0, import_tracking32.useSignals)();
3944
- try {
3945
- const { tx } = useThemeContext();
3946
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Item, {
3947
- ...props,
3948
- className: tx("select.item", "option", {}, classNames),
3949
- ref: forwardedRef
3950
- }, /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.ItemText, null, children), /* @__PURE__ */ import_react44.default.createElement("span", {
3951
- className: "grow w-1"
3952
- }), /* @__PURE__ */ import_react44.default.createElement(Icon, {
3953
- icon: "ph--check--regular"
3954
- }));
3955
- } finally {
3956
- _effect.f();
3957
- }
3958
- });
3959
- var SelectGroup = SelectPrimitive.Group;
3960
- var SelectLabel = SelectPrimitive.Label;
3961
- var SelectSeparator = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3962
- var _effect = (0, import_tracking32.useSignals)();
3963
- try {
3964
- const { tx } = useThemeContext();
3965
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Separator, {
3966
- ...props,
3967
- className: tx("select.separator", "select__separator", {}, classNames),
3968
- ref: forwardedRef
3969
- });
3970
- } finally {
3971
- _effect.f();
3972
- }
3973
- });
3974
- var SelectArrow = /* @__PURE__ */ (0, import_react44.forwardRef)(({ classNames, ...props }, forwardedRef) => {
3975
- var _effect = (0, import_tracking32.useSignals)();
3976
- try {
3977
- const { tx } = useThemeContext();
3978
- return /* @__PURE__ */ import_react44.default.createElement(SelectPrimitive.Arrow, {
3979
- ...props,
3980
- className: tx("select.arrow", "select__arrow", {}, classNames),
3981
- ref: forwardedRef
3982
- });
3983
- } finally {
3984
- _effect.f();
3985
- }
3986
- });
3987
- var Select = {
3988
- Root: SelectRoot,
3989
- Trigger: SelectTrigger,
3990
- TriggerButton: SelectTriggerButton,
3991
- Value: SelectValue,
3992
- Icon: SelectIcon,
3993
- Portal: SelectPortal,
3994
- Content: SelectContent,
3995
- ScrollUpButton: SelectScrollUpButton2,
3996
- ScrollDownButton: SelectScrollDownButton2,
3997
- Viewport: SelectViewport2,
3998
- Item: SelectItem,
3999
- ItemText: SelectItemText,
4000
- ItemIndicator: SelectItemIndicator,
4001
- Option: SelectOption,
4002
- Group: SelectGroup,
4003
- Label: SelectLabel,
4004
- Separator: SelectSeparator,
4005
- Arrow: SelectArrow
4006
- };
4007
- var Separator4 = /* @__PURE__ */ (0, import_react45.forwardRef)(({ classNames, orientation = "horizontal", subdued, ...props }, forwardedRef) => {
4008
- var _effect = (0, import_tracking33.useSignals)();
4009
- try {
4010
- const { tx } = useThemeContext();
4011
- return /* @__PURE__ */ import_react45.default.createElement(import_react_separator.Separator, {
4012
- orientation,
4013
- ...props,
4014
- className: tx("separator.root", "separator", {
4015
- orientation,
4016
- subdued
4017
- }, classNames),
4018
- ref: forwardedRef
4019
- });
4020
- } finally {
4021
- _effect.f();
4022
- }
4023
- });
4024
- var Tag = /* @__PURE__ */ (0, import_react46.forwardRef)(({ asChild, palette = "neutral", classNames, ...props }, forwardedRef) => {
4025
- var _effect = (0, import_tracking34.useSignals)();
4026
- try {
4027
- const { tx } = useThemeContext();
4028
- const Root7 = asChild ? import_react_slot14.Slot : import_react_primitive13.Primitive.span;
4029
- return /* @__PURE__ */ import_react46.default.createElement(Root7, {
4030
- ...props,
4031
- className: tx("tag.root", "dx-tag", {
4032
- palette
4033
- }, classNames),
4034
- "data-hue": palette,
4035
- ref: forwardedRef
4036
- });
4037
- } finally {
4038
- _effect.f();
4039
- }
4040
- });
4041
- var ToastProvider = import_react_toast.ToastProvider;
4042
- var ToastViewport = /* @__PURE__ */ (0, import_react47.forwardRef)(({ classNames, ...props }, forwardedRef) => {
4043
- var _effect = (0, import_tracking35.useSignals)();
4044
- try {
4045
- const { tx } = useThemeContext();
4046
- return /* @__PURE__ */ import_react47.default.createElement(import_react_toast.ToastViewport, {
4047
- className: tx("toast.viewport", "toast-viewport", {}, classNames),
4048
- ref: forwardedRef
4049
- });
4050
- } finally {
4051
- _effect.f();
4052
- }
4053
- });
4054
- var ToastRoot = /* @__PURE__ */ (0, import_react47.forwardRef)(({ classNames, children, ...props }, forwardedRef) => {
4055
- var _effect = (0, import_tracking35.useSignals)();
4056
- try {
4057
- const { tx } = useThemeContext();
4058
- return /* @__PURE__ */ import_react47.default.createElement(import_react_toast.Root, {
4059
- ...props,
4060
- className: tx("toast.root", "toast", {}, classNames),
4061
- ref: forwardedRef
4062
- }, /* @__PURE__ */ import_react47.default.createElement(ElevationProvider, {
4063
- elevation: "toast"
4064
- }, children));
4065
- } finally {
4066
- _effect.f();
4067
- }
4068
- });
4069
- var ToastBody = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
4070
- var _effect = (0, import_tracking35.useSignals)();
4071
- try {
4072
- const { tx } = useThemeContext();
4073
- const Root7 = asChild ? import_react_slot15.Slot : import_react_primitive14.Primitive.div;
4074
- return /* @__PURE__ */ import_react47.default.createElement(Root7, {
4075
- ...props,
4076
- className: tx("toast.body", "toast__body", {}, classNames),
4077
- ref: forwardedRef
4078
- });
4079
- } finally {
4080
- _effect.f();
4081
- }
4082
- });
4083
- var ToastTitle = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
4084
- var _effect = (0, import_tracking35.useSignals)();
4085
- try {
4086
- const { tx } = useThemeContext();
4087
- const Root7 = asChild ? import_react_slot15.Slot : import_react_toast.ToastTitle;
4088
- return /* @__PURE__ */ import_react47.default.createElement(Root7, {
4089
- ...props,
4090
- className: tx("toast.title", "toast__title", {}, classNames),
4091
- ref: forwardedRef
4092
- });
4093
- } finally {
4094
- _effect.f();
4095
- }
4096
- });
4097
- var ToastDescription = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
4098
- var _effect = (0, import_tracking35.useSignals)();
4099
- try {
4100
- const { tx } = useThemeContext();
4101
- const Root7 = asChild ? import_react_slot15.Slot : import_react_toast.ToastDescription;
4102
- return /* @__PURE__ */ import_react47.default.createElement(Root7, {
4103
- ...props,
4104
- className: tx("toast.description", "toast__description", {}, classNames),
4105
- ref: forwardedRef
4106
- });
4107
- } finally {
4108
- _effect.f();
4109
- }
4110
- });
4111
- var ToastActions = /* @__PURE__ */ (0, import_react47.forwardRef)(({ asChild, classNames, ...props }, forwardedRef) => {
4112
- var _effect = (0, import_tracking35.useSignals)();
4113
- try {
4114
- const { tx } = useThemeContext();
4115
- const Root7 = asChild ? import_react_slot15.Slot : import_react_primitive14.Primitive.div;
4116
- return /* @__PURE__ */ import_react47.default.createElement(Root7, {
4117
- ...props,
4118
- className: tx("toast.actions", "toast__actions", {}, classNames),
4119
- ref: forwardedRef
4120
- });
4121
- } finally {
4122
- _effect.f();
4123
- }
4124
- });
4125
- var ToastAction = import_react_toast.ToastAction;
4126
- var ToastClose = import_react_toast.ToastClose;
4127
- var Toast = {
4128
- Provider: ToastProvider,
4129
- Viewport: ToastViewport,
4130
- Root: ToastRoot,
4131
- Body: ToastBody,
4132
- Title: ToastTitle,
4133
- Description: ToastDescription,
4134
- Actions: ToastActions,
4135
- Action: ToastAction,
4136
- Close: ToastClose
4137
- };
4138
- var ToolbarRoot = /* @__PURE__ */ (0, import_react48.forwardRef)(({ classNames, children, layoutManaged, ...props }, forwardedRef) => {
4139
- var _effect = (0, import_tracking36.useSignals)();
4140
- try {
4141
- const { tx } = useThemeContext();
4142
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Root, {
4143
- ...props,
4144
- className: tx("toolbar.root", "toolbar", {
4145
- layoutManaged
4146
- }, classNames),
4147
- ref: forwardedRef
4148
- }, children);
4149
- } finally {
4150
- _effect.f();
4151
- }
4152
- });
4153
- var ToolbarButton = /* @__PURE__ */ (0, import_react48.forwardRef)((props, forwardedRef) => {
4154
- var _effect = (0, import_tracking36.useSignals)();
4155
- try {
4156
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Button, {
4157
- asChild: true
4158
- }, /* @__PURE__ */ import_react48.default.createElement(Button, {
4159
- ...props,
4160
- ref: forwardedRef
4161
- }));
4162
- } finally {
4163
- _effect.f();
4164
- }
4165
- });
4166
- var ToolbarIconButton = /* @__PURE__ */ (0, import_react48.forwardRef)((props, forwardedRef) => {
4167
- var _effect = (0, import_tracking36.useSignals)();
4168
- try {
4169
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Button, {
4170
- asChild: true
4171
- }, /* @__PURE__ */ import_react48.default.createElement(IconButton, {
4172
- ...props,
4173
- ref: forwardedRef
4174
- }));
4175
- } finally {
4176
- _effect.f();
4177
- }
4178
- });
4179
- var ToolbarToggle = /* @__PURE__ */ (0, import_react48.forwardRef)((props, forwardedRef) => {
4180
- var _effect = (0, import_tracking36.useSignals)();
4181
- try {
4182
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Button, {
4183
- asChild: true
4184
- }, /* @__PURE__ */ import_react48.default.createElement(Toggle, {
4185
- ...props,
4186
- ref: forwardedRef
4187
- }));
4188
- } finally {
4189
- _effect.f();
4190
- }
4191
- });
4192
- var ToolbarLink = /* @__PURE__ */ (0, import_react48.forwardRef)((props, forwardedRef) => {
4193
- var _effect = (0, import_tracking36.useSignals)();
4194
- try {
4195
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Link, {
4196
- asChild: true
4197
- }, /* @__PURE__ */ import_react48.default.createElement(Link, {
4198
- ...props,
4199
- ref: forwardedRef
4200
- }));
4201
- } finally {
4202
- _effect.f();
4203
- }
4204
- });
4205
- var ToolbarToggleGroup2 = /* @__PURE__ */ (0, import_react48.forwardRef)(({ classNames, children, elevation, ...props }, forwardedRef) => {
4206
- var _effect = (0, import_tracking36.useSignals)();
4207
- try {
4208
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.ToolbarToggleGroup, {
4209
- ...props,
4210
- asChild: true
4211
- }, /* @__PURE__ */ import_react48.default.createElement(ButtonGroup, {
4212
- classNames,
4213
- children,
4214
- elevation,
4215
- ref: forwardedRef
4216
- }));
4217
- } finally {
4218
- _effect.f();
4219
- }
4220
- });
4221
- var ToolbarToggleGroupItem = /* @__PURE__ */ (0, import_react48.forwardRef)(({ variant, density, elevation, classNames, children, ...props }, forwardedRef) => {
4222
- var _effect = (0, import_tracking36.useSignals)();
4223
- try {
4224
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.ToolbarToggleItem, {
4225
- ...props,
4226
- asChild: true
4227
- }, /* @__PURE__ */ import_react48.default.createElement(Button, {
4228
- variant,
4229
- density,
4230
- elevation,
4231
- classNames,
4232
- children,
4233
- ref: forwardedRef
4234
- }));
4235
- } finally {
4236
- _effect.f();
4237
- }
4238
- });
4239
- var ToolbarToggleGroupIconItem = /* @__PURE__ */ (0, import_react48.forwardRef)(({ variant, density, elevation, classNames, icon, label, iconOnly, ...props }, forwardedRef) => {
4240
- var _effect = (0, import_tracking36.useSignals)();
4241
- try {
4242
- return /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.ToolbarToggleItem, {
4243
- ...props,
4244
- asChild: true
4245
- }, /* @__PURE__ */ import_react48.default.createElement(IconButton, {
4246
- variant,
4247
- density,
4248
- elevation,
4249
- classNames,
4250
- icon,
4251
- label,
4252
- iconOnly,
4253
- ref: forwardedRef
4254
- }));
4255
- } finally {
4256
- _effect.f();
4257
- }
4258
- });
4259
- var ToolbarSeparator = /* @__PURE__ */ (0, import_react48.forwardRef)(({ variant = "line", ...props }, forwardedRef) => {
4260
- var _effect = (0, import_tracking36.useSignals)();
4261
- try {
4262
- return variant === "line" ? /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Separator, {
4263
- asChild: true
4264
- }, /* @__PURE__ */ import_react48.default.createElement(Separator4, {
4265
- ...props,
4266
- ref: forwardedRef
4267
- })) : /* @__PURE__ */ import_react48.default.createElement(ToolbarPrimitive.Separator, {
4268
- className: "grow",
4269
- ref: forwardedRef
4270
- });
4271
- } finally {
4272
- _effect.f();
4273
- }
4274
- });
4275
- var Toolbar = {
4276
- Root: ToolbarRoot,
4277
- Button: ToolbarButton,
4278
- IconButton: ToolbarIconButton,
4279
- Link: ToolbarLink,
4280
- Toggle: ToolbarToggle,
4281
- ToggleGroup: ToolbarToggleGroup2,
4282
- ToggleGroupItem: ToolbarToggleGroupItem,
4283
- ToggleGroupIconItem: ToolbarToggleGroupIconItem,
4284
- Separator: ToolbarSeparator
4285
- };
4286
- var useDensityContext = (propsDensity) => {
4287
- const { density } = (0, import_react.useContext)(DensityContext);
4288
- return propsDensity ?? density;
4289
- };
4290
- // Annotate the CommonJS export names for ESM import in node:
4291
- 0 && (module.exports = {
4292
- AlertDialog,
4293
- AnchoredOverflow,
4294
- Avatar,
4295
- BUTTON_GROUP_NAME,
4296
- Breadcrumb,
4297
- Button,
4298
- ButtonGroup,
4299
- Callout,
4300
- Clipboard,
4301
- ContextMenu,
4302
- DensityContext,
4303
- DensityProvider,
4304
- Dialog,
4305
- DropdownMenu,
4306
- ElevationContext,
4307
- ElevationProvider,
4308
- Icon,
4309
- IconButton,
4310
- Input,
4311
- LIST_ITEM_NAME,
4312
- LIST_NAME,
4313
- Link,
4314
- List,
4315
- ListItem,
4316
- Main,
4317
- Message,
4318
- Popover,
4319
- ScrollArea,
4320
- Select,
4321
- Separator,
4322
- Status,
4323
- Tag,
4324
- ThemeContext,
4325
- ThemeProvider,
4326
- Toast,
4327
- Toggle,
4328
- ToggleGroup,
4329
- ToggleGroupItem,
4330
- Toolbar,
4331
- Tooltip,
4332
- Tree,
4333
- TreeItem,
4334
- Treegrid,
4335
- createDropdownMenuScope,
4336
- createPopoverScope,
4337
- createTooltipScope,
4338
- hasIosKeyboard,
4339
- initialSafeArea,
4340
- isLabel,
4341
- messageIcons,
4342
- toLocalizedString,
4343
- useAvatarContext,
4344
- useButtonGroupContext,
4345
- useClipboard,
4346
- useDensityContext,
4347
- useDropdownMenuContext,
4348
- useDropdownMenuMenuScope,
4349
- useElevationContext,
4350
- useIconHref,
4351
- useLandmarkMover,
4352
- useListContext,
4353
- useListItemContext,
4354
- useMainContext,
4355
- useSafeArea,
4356
- useSidebars,
4357
- useThemeContext,
4358
- useTooltipContext,
4359
- useTranslation,
4360
- useTranslationsContext,
4361
- useVisualViewport
4362
- });
4363
- //# sourceMappingURL=chunk-3E3QKWX4.cjs.map