@dxos/react-ui 0.8.2-main.30e4dbb → 0.8.2-main.4c6cf53

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