@mastra/playground-ui 31.0.0-alpha.8 → 31.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +190 -0
- package/dist/index.cjs.js +95 -67
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +95 -67
- package/dist/index.es.js.map +1 -1
- package/dist/src/ds/components/Popover/popover.d.ts +4 -1
- package/dist/src/ds/components/SideDialog/side-dialog-root.d.ts +1 -0
- package/dist/src/ds/primitives/portal-container.d.ts +7 -0
- package/package.json +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,195 @@
|
|
|
1
1
|
# @mastra/playground-ui
|
|
2
2
|
|
|
3
|
+
## 31.0.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- Made `ButtonsGroup` compose joined controls (searchbar + dropdown pills, split buttons, steppers) cleanly, and improved `InputGroup` so it drops straight into one. ([#17259](https://github.com/mastra-ai/mastra/pull/17259))
|
|
8
|
+
- `ButtonsGroup` with `spacing="close"` fuses outline, filled and `Select` segments into one pill with a single clean divider, a complete focus ring (no missing side), and no consumer width classes.
|
|
9
|
+
- `InputGroup` fills a flex row on its own, matches a same-size sibling height, and propagates size via `data-size` (no React context) — so an icon + input segment composes inside a `ButtonsGroup` pill with no layout classes.
|
|
10
|
+
|
|
11
|
+
Use `InputGroup` (icon as an `InputGroupAddon`, optional clear button as an `InputGroupButton`) to build an icon input — it owns the box, focus, hover and error states on the focusable wrapper:
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import {
|
|
15
|
+
ButtonsGroup,
|
|
16
|
+
InputGroup,
|
|
17
|
+
InputGroupAddon,
|
|
18
|
+
InputGroupInput,
|
|
19
|
+
Select,
|
|
20
|
+
SelectTrigger,
|
|
21
|
+
SelectValue,
|
|
22
|
+
SelectContent,
|
|
23
|
+
SelectItem,
|
|
24
|
+
} from '@mastra/playground-ui';
|
|
25
|
+
|
|
26
|
+
<ButtonsGroup spacing="close">
|
|
27
|
+
<InputGroup variant="outline">
|
|
28
|
+
<InputGroupAddon align="inline-start">
|
|
29
|
+
<SearchIcon />
|
|
30
|
+
</InputGroupAddon>
|
|
31
|
+
<InputGroupInput placeholder="Search projects..." />
|
|
32
|
+
</InputGroup>
|
|
33
|
+
<Select value={sort} onValueChange={setSort}>
|
|
34
|
+
<SelectTrigger className="rounded-full">
|
|
35
|
+
<SelectValue />
|
|
36
|
+
</SelectTrigger>
|
|
37
|
+
<SelectContent align="end">{/* options */}</SelectContent>
|
|
38
|
+
</Select>
|
|
39
|
+
</ButtonsGroup>;
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
- Refined the focus state of form inputs in `@mastra/playground-ui`. Applies to `Input`, `InputGroup`, `Searchbar`, and `Textarea`. ([#17259](https://github.com/mastra-ai/mastra/pull/17259))
|
|
43
|
+
- Removed the green border and glow that appeared on focus.
|
|
44
|
+
- On focus, the field shows a subtle background shift and brightens its border to a neutral tone, so the focused field stays clearly visible on any underlying surface.
|
|
45
|
+
- Made single-line inputs fully rounded to match the design system. Multi-line surfaces (`Textarea`, and `InputGroup` with a block-style addon) keep a softer `rounded-xl` corner.
|
|
46
|
+
- Added `filled` and `outline` variants for consumers that need to choose between the new surface treatment and a quieter border-only treatment.
|
|
47
|
+
- The `unstyled` variant of `Input` and `Textarea` no longer leaks the browser default focus outline.
|
|
48
|
+
|
|
49
|
+
`Input`, `Textarea`, and `InputGroup` default to the `filled` surface. `Searchbar` and `ListSearch` default to the `outline` (transparent) treatment. For `Searchbar` this matches its previous transparent look. `ListSearch` previously rendered a filled (`bg-surface2`), `rounded-lg` box, so its search fields across the list pages now read as transparent, fully-rounded pills — pass `variant="filled"` to keep them on a filled surface:
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
import { Input, InputGroup, InputGroupAddon, InputGroupInput, Searchbar } from '@mastra/playground-ui';
|
|
53
|
+
|
|
54
|
+
<Input placeholder="Name" />
|
|
55
|
+
<Input variant="outline" placeholder="Name" />
|
|
56
|
+
|
|
57
|
+
<InputGroup variant="outline">
|
|
58
|
+
<InputGroupAddon>
|
|
59
|
+
<SearchIcon />
|
|
60
|
+
</InputGroupAddon>
|
|
61
|
+
<InputGroupInput placeholder="Email" />
|
|
62
|
+
</InputGroup>
|
|
63
|
+
|
|
64
|
+
<Searchbar label="Search agents" placeholder="Search agents..." onSearch={handleSearch} />
|
|
65
|
+
<Searchbar variant="filled" label="Search agents" placeholder="Search agents..." onSearch={handleSearch} />
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Patch Changes
|
|
69
|
+
|
|
70
|
+
- Fixed syntax highlighting in Studio code blocks. Shiki tokens now render with per-token colors (keywords, strings, identifiers) instead of flat monochrome text, and Code Mode `execute_typescript` programs display as a formatted, highlighted TypeScript block instead of a one-line JSON string. ([#17324](https://github.com/mastra-ai/mastra/pull/17324))
|
|
71
|
+
|
|
72
|
+
- Improved studio load time by only bundling the CodeMirror and Shiki languages the editor actually uses, and removed a redundant TypeScript pass from the playground-ui build. ([#17406](https://github.com/mastra-ai/mastra/pull/17406))
|
|
73
|
+
|
|
74
|
+
- Improved RadioGroup styling with neutral selected states, cleaner focus outlines, and surface-aware disabled states. ([#17401](https://github.com/mastra-ai/mastra/pull/17401))
|
|
75
|
+
|
|
76
|
+
- Added a `DataPanel.SectionHeading` component for small-caps section labels (with an optional leading icon) inside a `DataPanel.Content`. `DataCodeSection` now renders through it, and `DataPanel.Header` hides its bottom border when the panel is collapsed (header-only) so an empty panel no longer shows a stray divider. ([#17464](https://github.com/mastra-ai/mastra/pull/17464))
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
<DataPanel.SectionHeading icon={<FileInputIcon />}>Input</DataPanel.SectionHeading>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
- Pointer drags inside the `SideDialog` body now select text reliably instead of fighting with the close-swipe gesture. The popup chrome (header, edges) still closes the drawer on drag. ([#16959](https://github.com/mastra-ai/mastra/pull/16959))
|
|
83
|
+
|
|
84
|
+
**Drawer composition**
|
|
85
|
+
|
|
86
|
+
`DrawerContent` is now the shadcn-style opinionated bundle (`DrawerPortal` + `DrawerBackdrop` + `DrawerViewport` + `DrawerPopup`, with a handle bar on top/bottom-anchored drawers and a fade-out when a nested drawer covers the parent). Most drawers can now be written as:
|
|
87
|
+
|
|
88
|
+
```tsx
|
|
89
|
+
<Drawer>
|
|
90
|
+
<DrawerTrigger>…</DrawerTrigger>
|
|
91
|
+
<DrawerContent>
|
|
92
|
+
<DrawerHeader>…</DrawerHeader>
|
|
93
|
+
<DrawerBody>…</DrawerBody>
|
|
94
|
+
</DrawerContent>
|
|
95
|
+
</Drawer>
|
|
96
|
+
```
|
|
97
|
+
|
|
98
|
+
The low-level primitives (`DrawerPortal`, `DrawerBackdrop`, `DrawerViewport`, `DrawerPopup`) remain exported for drawers that need a custom portal target, non-modal page behavior, or chrome outside the popup (see the `SwipeToOpen` and `NonModal` Storybook examples).
|
|
99
|
+
|
|
100
|
+
Base UI's text-selectable region (the `Drawer.Content` part — pointer drags inside it select text instead of closing the drawer) is now exported as `DrawerInteractive`. Migration:
|
|
101
|
+
|
|
102
|
+
```tsx
|
|
103
|
+
// Before
|
|
104
|
+
import { DrawerContent } from '@mastra/playground-ui';
|
|
105
|
+
<DrawerContent render={<div>...</div>} />;
|
|
106
|
+
|
|
107
|
+
// After
|
|
108
|
+
import { DrawerInteractive } from '@mastra/playground-ui';
|
|
109
|
+
<DrawerInteractive render={<div>...</div>} />;
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
- Removed the unused `ElementSelect` export from `@mastra/playground-ui`. Use the `Select` primitives instead. ([#17417](https://github.com/mastra-ai/mastra/pull/17417))
|
|
113
|
+
|
|
114
|
+
```tsx
|
|
115
|
+
// Before
|
|
116
|
+
import { ElementSelect } from '@mastra/playground-ui';
|
|
117
|
+
|
|
118
|
+
<ElementSelect name="status" value={status} onChange={setStatus} options={['Draft', 'Published']} />;
|
|
119
|
+
|
|
120
|
+
// After
|
|
121
|
+
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@mastra/playground-ui';
|
|
122
|
+
|
|
123
|
+
<Select name="status" value={status} onValueChange={setStatus}>
|
|
124
|
+
<SelectTrigger>
|
|
125
|
+
<SelectValue placeholder="Select..." />
|
|
126
|
+
</SelectTrigger>
|
|
127
|
+
<SelectContent>
|
|
128
|
+
<SelectItem value="draft">Draft</SelectItem>
|
|
129
|
+
<SelectItem value="published">Published</SelectItem>
|
|
130
|
+
</SelectContent>
|
|
131
|
+
</Select>;
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
- Changed `Spinner` to render the new compact loader by default and added `variant="pulse"` for longer data-loading states. Removed the `color` prop so the loader defaults to the neutral text token and color overrides go through `className`. ([#17455](https://github.com/mastra-ai/mastra/pull/17455))
|
|
135
|
+
|
|
136
|
+
**Migration note**
|
|
137
|
+
|
|
138
|
+
Before:
|
|
139
|
+
|
|
140
|
+
```tsx
|
|
141
|
+
<Spinner color={Colors.neutral3} />
|
|
142
|
+
```
|
|
143
|
+
|
|
144
|
+
After:
|
|
145
|
+
|
|
146
|
+
```tsx
|
|
147
|
+
<Spinner className="text-neutral3" />
|
|
148
|
+
<Spinner variant="pulse" className="text-neutral1" />
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
- Fixed dropdowns, menus, comboboxes, and popovers being unclickable when opened inside a SideDialog (for example the dataset selector in the "Save as Dataset Item" panel on the Traces tab). These popups now render inside the dialog so they stay interactive within the modal drawer. ([#17479](https://github.com/mastra-ai/mastra/pull/17479))
|
|
152
|
+
|
|
153
|
+
- Agent Builder starter agents now use the admin-configured default model when the model policy has one set. Previously, the starter ignored the admin default and always picked the first entry from the picker allowlist, which surfaced as "default model gets over-written by agent builder" on agents created from starter cards or the freeform prompt. ([#17424](https://github.com/mastra-ai/mastra/pull/17424))
|
|
154
|
+
|
|
155
|
+
When no admin default is set, behavior is unchanged: the starter falls back to the first allowed model, then to the hardcoded fallback.
|
|
156
|
+
|
|
157
|
+
- Improved `@mastra/playground-ui` stability by removing legacy runtime UI dependencies without changing `SideDialog`, `MainSidebar`, or accessibility behavior. Nested `SideDialog` levels now stack consistently, so multi-level flows behave predictably. ([#16959](https://github.com/mastra-ai/mastra/pull/16959))
|
|
158
|
+
|
|
159
|
+
- Added an `is404NotFoundError` helper to detect 404 Not Found responses from the Mastra client, alongside the existing `is401UnauthorizedError` and `is403ForbiddenError` helpers. Use it to show a clear not-found state when a resource no longer exists. ([#17460](https://github.com/mastra-ai/mastra/pull/17460))
|
|
160
|
+
|
|
161
|
+
```ts
|
|
162
|
+
import { is404NotFoundError } from '@mastra/playground-ui';
|
|
163
|
+
|
|
164
|
+
try {
|
|
165
|
+
await client.getDataset(id);
|
|
166
|
+
} catch (error) {
|
|
167
|
+
if (is404NotFoundError(error)) {
|
|
168
|
+
// show a not-found state instead of a generic error
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
- Improved Checkbox styling with neutral selected states, cleaner focus outlines, and smoother state transitions. ([#17400](https://github.com/mastra-ai/mastra/pull/17400))
|
|
174
|
+
|
|
175
|
+
- Improved switch focus, disabled, and motion states. ([#17416](https://github.com/mastra-ai/mastra/pull/17416))
|
|
176
|
+
|
|
177
|
+
- Updated dependencies [[`860ec4e`](https://github.com/mastra-ai/mastra/commit/860ec4edf6aa508edfd4f34c312c141209eb0dbf), [`bb3fce8`](https://github.com/mastra-ai/mastra/commit/bb3fce8f8d80079170c0f98cb2efbb29ae34375d), [`fa63872`](https://github.com/mastra-ai/mastra/commit/fa6387280954e6b667bec5714b55ba082bc627ff), [`d779de3`](https://github.com/mastra-ai/mastra/commit/d779de3cd9d2e7ed8110547190e2f15e786a0e41), [`1750c97`](https://github.com/mastra-ai/mastra/commit/1750c975d6179fbf6db2813b15229d4f8f23fc55), [`9283971`](https://github.com/mastra-ai/mastra/commit/928397157009b4aef4d5fdf3a0a273cb371beb55), [`f07b646`](https://github.com/mastra-ai/mastra/commit/f07b64604ab7d25391179790b7fd4823df9e2dff), [`d8838ae`](https://github.com/mastra-ai/mastra/commit/d8838ae80b69780361693d27098f7f6684af12fe), [`40f9297`](https://github.com/mastra-ai/mastra/commit/40f9297003b921c62373d3e8d3a4bda76c9f6de3), [`19a8658`](https://github.com/mastra-ai/mastra/commit/19a86589c788ef48bb6c1b0612cc82a201857379), [`850af77`](https://github.com/mastra-ai/mastra/commit/850af7779cb87c350804488734544a5b1843de25), [`0f0d1ba`](https://github.com/mastra-ai/mastra/commit/0f0d1ba67bfcb2204e571401662f1eceefc03357), [`a18775a`](https://github.com/mastra-ai/mastra/commit/a18775a693172546ee2378d39b67d4e32895b251), [`1baf2d1`](https://github.com/mastra-ai/mastra/commit/1baf2d152c6881338ff8f114633d5316fe13dd15), [`309f7c9`](https://github.com/mastra-ai/mastra/commit/309f7c9899ee6870a07a16690a091c6ba7af4e1e), [`8c31bcd`](https://github.com/mastra-ai/mastra/commit/8c31bcdb00e597880d5939b1b7d7566fbe5dacae), [`0e32507`](https://github.com/mastra-ai/mastra/commit/0e32507962cdfa5569b7bda5bc6fb3dd34e40b03), [`95b14cd`](https://github.com/mastra-ai/mastra/commit/95b14cdd820e86d97ac05fe568424c513a252e31), [`07c3de7`](https://github.com/mastra-ai/mastra/commit/07c3de7f7bc418beccaea3b5e6b7f7cdda79d492), [`0bf2d93`](https://github.com/mastra-ai/mastra/commit/0bf2d932d20e2936f2d9abb8c0a86e24fbc97ec6), [`7b0d34c`](https://github.com/mastra-ai/mastra/commit/7b0d34cfe4a2fce22ac86ae17404685ff67a2ddb), [`a659a77`](https://github.com/mastra-ai/mastra/commit/a659a779bdebe3a52a518c56d2260592d0240fe0), [`aa36be2`](https://github.com/mastra-ai/mastra/commit/aa36be23aa513b7dc53cb8ca16b7fab8f20e43ad), [`3332be9`](https://github.com/mastra-ai/mastra/commit/3332be9701ecd77aba840959d9a1d1ce7aef02d3), [`212c635`](https://github.com/mastra-ai/mastra/commit/212c635203e61d036ab41db8ff86c3893dc795b3), [`d8838ae`](https://github.com/mastra-ai/mastra/commit/d8838ae80b69780361693d27098f7f6684af12fe), [`9aa5a73`](https://github.com/mastra-ai/mastra/commit/9aa5a73e7e110f6e9365eec69364a33d5f03bb56), [`f73c789`](https://github.com/mastra-ai/mastra/commit/f73c789e8ef21561580395d2c410119cab5848c8), [`8bd16da`](https://github.com/mastra-ai/mastra/commit/8bd16da73a4cb874d739373643dbd6a6e7f88684), [`c8630f8`](https://github.com/mastra-ai/mastra/commit/c8630f80d4f40cb5d22e60ab162b618b1907167a), [`94dfef6`](https://github.com/mastra-ai/mastra/commit/94dfef6e2bf19a88467ea3940afcbce88a433f0f), [`47f71dc`](https://github.com/mastra-ai/mastra/commit/47f71dc6fbcbd12d71e21a979e676e20a02bd77d), [`50ceae2`](https://github.com/mastra-ai/mastra/commit/50ceae270878e2f8fb2b2c6c2faab09df0007c8a), [`a122f79`](https://github.com/mastra-ai/mastra/commit/a122f79427ae225ec79c7b2ed46278da48d04b17), [`8cdde58`](https://github.com/mastra-ai/mastra/commit/8cdde5875bbba6702d9df226f2b20232b8d75d6c), [`3a081c1`](https://github.com/mastra-ai/mastra/commit/3a081c1255c5ae8c99f6dad91cc612934ef6f2bd), [`49f8abc`](https://github.com/mastra-ai/mastra/commit/49f8abce8258e4f2f87bd326acfbdb641264a47c), [`847ff1e`](https://github.com/mastra-ai/mastra/commit/847ff1e0d94368d94b2e173e4e0908e115568ef3), [`0c1ed1d`](https://github.com/mastra-ai/mastra/commit/0c1ed1d00c7d87b5ac99ca95896211a2fa9189fa), [`259d409`](https://github.com/mastra-ai/mastra/commit/259d409a514174299dbde1ff5e1121209b3ba850), [`9e16c68`](https://github.com/mastra-ai/mastra/commit/9e16c6818b6485ccb43df28aba6f3a2219d28662), [`cefca33`](https://github.com/mastra-ai/mastra/commit/cefca33ae666e69810c935fedf95a929c173d1d7), [`d00e8c5`](https://github.com/mastra-ai/mastra/commit/d00e8c50daebe5bce5bf2f48bde39c86fc3d2fe4), [`36fa7e2`](https://github.com/mastra-ai/mastra/commit/36fa7e24d14e58a1eb46147097b32f583e5b8775), [`87e9774`](https://github.com/mastra-ai/mastra/commit/87e97741c1e493cd6d62f478eb810b49bda4d57c), [`65a72e7`](https://github.com/mastra-ai/mastra/commit/65a72e70c25eedea8ff985a6624b96be2850236b), [`fe9eacd`](https://github.com/mastra-ai/mastra/commit/fe9eacd9545a0a9d64aad31c9fa90294a425289e), [`4c02027`](https://github.com/mastra-ai/mastra/commit/4c020277235eaa6b1dc957c90ad0639eef213992), [`0f77241`](https://github.com/mastra-ai/mastra/commit/0f7724108806703799a8ba80ad0f09414afd5066), [`849efb9`](https://github.com/mastra-ai/mastra/commit/849efb9fca6dc976589c1f90a303fea618769109), [`92ff509`](https://github.com/mastra-ai/mastra/commit/92ff5098ef8a990438ca038077021a5f7541ec1d), [`3fce5e7`](https://github.com/mastra-ai/mastra/commit/3fce5e70d011d289043e75003ef3336ed4aa43c3), [`a763592`](https://github.com/mastra-ai/mastra/commit/a763592c3db46963ef1011cfe16fe372816e775e), [`db79c86`](https://github.com/mastra-ai/mastra/commit/db79c86c60723d57e02f9636ca2611bd4515f194), [`6855012`](https://github.com/mastra-ai/mastra/commit/685501247cc4717506f3e89beed03509d63a5370), [`7fef31c`](https://github.com/mastra-ai/mastra/commit/7fef31c0d2a6d362a43a647a8a4f6ab893758a23), [`80c7737`](https://github.com/mastra-ai/mastra/commit/80c7737e32d7917b5f356957d67c169d01744fd3), [`05d61e1`](https://github.com/mastra-ai/mastra/commit/05d61e18aa014a012a32ee9cb79cdcf3210dbe9d), [`66d65f5`](https://github.com/mastra-ai/mastra/commit/66d65f58e4b1f862c7f7928866a4426f8de9d583), [`7fef31c`](https://github.com/mastra-ai/mastra/commit/7fef31c0d2a6d362a43a647a8a4f6ab893758a23), [`7fef31c`](https://github.com/mastra-ai/mastra/commit/7fef31c0d2a6d362a43a647a8a4f6ab893758a23), [`3f1cf47`](https://github.com/mastra-ai/mastra/commit/3f1cf476f74c1e4cc2df908837e05853a5347e31)]:
|
|
178
|
+
- @mastra/react@0.4.3
|
|
179
|
+
- @mastra/client-js@1.22.0
|
|
180
|
+
- @mastra/core@1.38.0
|
|
181
|
+
|
|
182
|
+
## 31.0.0-alpha.9
|
|
183
|
+
|
|
184
|
+
### Patch Changes
|
|
185
|
+
|
|
186
|
+
- Fixed dropdowns, menus, comboboxes, and popovers being unclickable when opened inside a SideDialog (for example the dataset selector in the "Save as Dataset Item" panel on the Traces tab). These popups now render inside the dialog so they stay interactive within the modal drawer. ([#17479](https://github.com/mastra-ai/mastra/pull/17479))
|
|
187
|
+
|
|
188
|
+
- Updated dependencies [[`850af77`](https://github.com/mastra-ai/mastra/commit/850af7779cb87c350804488734544a5b1843de25), [`7b0d34c`](https://github.com/mastra-ai/mastra/commit/7b0d34cfe4a2fce22ac86ae17404685ff67a2ddb)]:
|
|
189
|
+
- @mastra/core@1.38.0-alpha.9
|
|
190
|
+
- @mastra/client-js@1.22.0-alpha.9
|
|
191
|
+
- @mastra/react@0.4.3-alpha.9
|
|
192
|
+
|
|
3
193
|
## 31.0.0-alpha.8
|
|
4
194
|
|
|
5
195
|
### Patch Changes
|
package/dist/index.cjs.js
CHANGED
|
@@ -6505,6 +6505,17 @@ const comboboxStyles = {
|
|
|
6505
6505
|
error: "text-ui-sm text-accent2"
|
|
6506
6506
|
};
|
|
6507
6507
|
|
|
6508
|
+
const PortalContainerContext = React__namespace.createContext(null);
|
|
6509
|
+
function PortalContainerProvider({
|
|
6510
|
+
container,
|
|
6511
|
+
children
|
|
6512
|
+
}) {
|
|
6513
|
+
return /* @__PURE__ */ jsxRuntime.jsx(PortalContainerContext.Provider, { value: container, children });
|
|
6514
|
+
}
|
|
6515
|
+
function usePortalContainer() {
|
|
6516
|
+
return React__namespace.useContext(PortalContainerContext);
|
|
6517
|
+
}
|
|
6518
|
+
|
|
6508
6519
|
const triggerVariantStyles = {
|
|
6509
6520
|
default: comboboxStyles.triggerDefault,
|
|
6510
6521
|
ghost: comboboxStyles.triggerGhost,
|
|
@@ -6527,6 +6538,8 @@ function Combobox({
|
|
|
6527
6538
|
error
|
|
6528
6539
|
}) {
|
|
6529
6540
|
const selectedOption = options.find((option) => option.value === value) ?? null;
|
|
6541
|
+
const portalContainer = usePortalContainer();
|
|
6542
|
+
const resolvedContainer = container ?? portalContainer;
|
|
6530
6543
|
const handleSelect = (item) => {
|
|
6531
6544
|
if (item) {
|
|
6532
6545
|
onValueChange?.(item.value);
|
|
@@ -6562,7 +6575,7 @@ function Combobox({
|
|
|
6562
6575
|
]
|
|
6563
6576
|
}
|
|
6564
6577
|
),
|
|
6565
|
-
/* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Portal, { container, children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Positioner, { align: "start", sideOffset: 4, className: comboboxStyles.positioner, children: /* @__PURE__ */ jsxRuntime.jsxs(combobox.Combobox.Popup, { className: comboboxStyles.popup, children: [
|
|
6578
|
+
/* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Positioner, { align: "start", sideOffset: 4, className: comboboxStyles.positioner, children: /* @__PURE__ */ jsxRuntime.jsxs(combobox.Combobox.Popup, { className: comboboxStyles.popup, children: [
|
|
6566
6579
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: comboboxStyles.searchContainer, children: [
|
|
6567
6580
|
/* @__PURE__ */ jsxRuntime.jsx(lucideReact.Search, { className: comboboxStyles.searchIcon }),
|
|
6568
6581
|
/* @__PURE__ */ jsxRuntime.jsx(combobox.Combobox.Input, { className: comboboxStyles.searchInput, placeholder: searchPlaceholder })
|
|
@@ -7102,30 +7115,34 @@ const SelectTrigger = React__namespace.forwardRef(
|
|
|
7102
7115
|
);
|
|
7103
7116
|
SelectTrigger.displayName = "SelectTrigger";
|
|
7104
7117
|
const SelectContent = React__namespace.forwardRef(
|
|
7105
|
-
({ className, children, position: _position, container, side = "bottom", align = "start", sideOffset = 4, ...props }, ref) =>
|
|
7106
|
-
|
|
7107
|
-
|
|
7108
|
-
|
|
7109
|
-
|
|
7110
|
-
|
|
7111
|
-
|
|
7112
|
-
|
|
7113
|
-
|
|
7114
|
-
|
|
7115
|
-
|
|
7116
|
-
|
|
7117
|
-
|
|
7118
|
-
|
|
7119
|
-
|
|
7120
|
-
|
|
7121
|
-
|
|
7122
|
-
|
|
7123
|
-
|
|
7124
|
-
|
|
7125
|
-
|
|
7126
|
-
|
|
7127
|
-
|
|
7128
|
-
|
|
7118
|
+
({ className, children, position: _position, container, side = "bottom", align = "start", sideOffset = 4, ...props }, ref) => {
|
|
7119
|
+
const portalContainer = usePortalContainer();
|
|
7120
|
+
const resolvedContainer = container ?? portalContainer;
|
|
7121
|
+
return /* @__PURE__ */ jsxRuntime.jsx(select.Select.Portal, { container: resolvedContainer ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
7122
|
+
select.Select.Positioner,
|
|
7123
|
+
{
|
|
7124
|
+
className: "z-50 outline-none",
|
|
7125
|
+
side,
|
|
7126
|
+
align,
|
|
7127
|
+
sideOffset,
|
|
7128
|
+
alignItemWithTrigger: false,
|
|
7129
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
7130
|
+
select.Select.Popup,
|
|
7131
|
+
{
|
|
7132
|
+
ref,
|
|
7133
|
+
className: cn(
|
|
7134
|
+
"relative z-50 min-w-32 min-w-[var(--anchor-width)] max-h-dropdown-max-height max-h-[var(--available-height)] overflow-y-auto overflow-x-hidden rounded-xl border border-border1 bg-surface3 p-1 text-neutral4 shadow-dialog origin-[var(--transform-origin)]",
|
|
7135
|
+
"data-[open]:animate-in data-[closed]:animate-out data-[closed]:fade-out-0 data-[open]:fade-in-0 data-[closed]:zoom-out-95 data-[open]:zoom-in-95",
|
|
7136
|
+
"data-[side=bottom]:slide-in-from-top-1 data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1 data-[side=top]:slide-in-from-bottom-1",
|
|
7137
|
+
className
|
|
7138
|
+
),
|
|
7139
|
+
...props,
|
|
7140
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(select.Select.List, { children })
|
|
7141
|
+
}
|
|
7142
|
+
)
|
|
7143
|
+
}
|
|
7144
|
+
) });
|
|
7145
|
+
}
|
|
7129
7146
|
);
|
|
7130
7147
|
SelectContent.displayName = "SelectContent";
|
|
7131
7148
|
const SelectItem = React__namespace.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -7548,47 +7565,54 @@ const DropdownMenuSubTrigger = React__namespace.forwardRef(
|
|
|
7548
7565
|
);
|
|
7549
7566
|
DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
|
|
7550
7567
|
const DropdownMenuSubContent = React__namespace.forwardRef(
|
|
7551
|
-
({ className, align = "start", alignOffset = -4, side = "right", sideOffset = 0, ...props }, ref) =>
|
|
7552
|
-
|
|
7553
|
-
{
|
|
7554
|
-
|
|
7555
|
-
|
|
7556
|
-
|
|
7557
|
-
|
|
7558
|
-
|
|
7559
|
-
|
|
7560
|
-
|
|
7561
|
-
|
|
7562
|
-
|
|
7563
|
-
|
|
7564
|
-
|
|
7565
|
-
|
|
7566
|
-
|
|
7567
|
-
|
|
7568
|
-
|
|
7569
|
-
|
|
7568
|
+
({ className, align = "start", alignOffset = -4, side = "right", sideOffset = 0, ...props }, ref) => {
|
|
7569
|
+
const portalContainer = usePortalContainer();
|
|
7570
|
+
return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { container: portalContainer ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
7571
|
+
menu.Menu.Positioner,
|
|
7572
|
+
{
|
|
7573
|
+
align,
|
|
7574
|
+
alignOffset,
|
|
7575
|
+
side,
|
|
7576
|
+
sideOffset,
|
|
7577
|
+
className: "z-50 outline-none",
|
|
7578
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
7579
|
+
menu.Menu.Popup,
|
|
7580
|
+
{
|
|
7581
|
+
ref,
|
|
7582
|
+
"data-slot": "dropdown-menu-sub-content",
|
|
7583
|
+
className: cn(popupClass, className),
|
|
7584
|
+
...props
|
|
7585
|
+
}
|
|
7586
|
+
)
|
|
7587
|
+
}
|
|
7588
|
+
) });
|
|
7589
|
+
}
|
|
7570
7590
|
);
|
|
7571
7591
|
DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
|
|
7572
7592
|
const DropdownMenuContent = React__namespace.forwardRef(
|
|
7573
|
-
({ className, container, align = "start", alignOffset = 0, side = "bottom", sideOffset = 8, ...props }, ref) =>
|
|
7574
|
-
|
|
7575
|
-
|
|
7576
|
-
|
|
7577
|
-
|
|
7578
|
-
|
|
7579
|
-
|
|
7580
|
-
|
|
7581
|
-
|
|
7582
|
-
|
|
7583
|
-
|
|
7584
|
-
|
|
7585
|
-
|
|
7586
|
-
|
|
7587
|
-
|
|
7588
|
-
|
|
7589
|
-
|
|
7590
|
-
|
|
7591
|
-
|
|
7593
|
+
({ className, container, align = "start", alignOffset = 0, side = "bottom", sideOffset = 8, ...props }, ref) => {
|
|
7594
|
+
const portalContainer = usePortalContainer();
|
|
7595
|
+
const resolvedContainer = container ?? portalContainer ?? void 0;
|
|
7596
|
+
return /* @__PURE__ */ jsxRuntime.jsx(menu.Menu.Portal, { container: resolvedContainer, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
7597
|
+
menu.Menu.Positioner,
|
|
7598
|
+
{
|
|
7599
|
+
align,
|
|
7600
|
+
alignOffset,
|
|
7601
|
+
side,
|
|
7602
|
+
sideOffset,
|
|
7603
|
+
className: "z-50 outline-none",
|
|
7604
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
7605
|
+
menu.Menu.Popup,
|
|
7606
|
+
{
|
|
7607
|
+
ref,
|
|
7608
|
+
"data-slot": "dropdown-menu-content",
|
|
7609
|
+
className: cn(popupClass, className),
|
|
7610
|
+
...props
|
|
7611
|
+
}
|
|
7612
|
+
)
|
|
7613
|
+
}
|
|
7614
|
+
) });
|
|
7615
|
+
}
|
|
7592
7616
|
);
|
|
7593
7617
|
DropdownMenuContent.displayName = "DropdownMenuContent";
|
|
7594
7618
|
const DropdownMenuItem = React__namespace.forwardRef(
|
|
@@ -8645,9 +8669,11 @@ const PopoverTrigger = React__namespace.forwardRef(
|
|
|
8645
8669
|
);
|
|
8646
8670
|
PopoverTrigger.displayName = "PopoverTrigger";
|
|
8647
8671
|
const PopoverContent = React__namespace.forwardRef(
|
|
8648
|
-
({ className, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }, ref) => {
|
|
8672
|
+
({ className, container, align = "center", alignOffset = 0, side = "bottom", sideOffset = 4, ...props }, ref) => {
|
|
8649
8673
|
const classNameString = typeof className === "string" ? className : void 0;
|
|
8650
|
-
|
|
8674
|
+
const portalContainer = usePortalContainer();
|
|
8675
|
+
const resolvedContainer = container ?? portalContainer;
|
|
8676
|
+
return /* @__PURE__ */ jsxRuntime.jsx(popover.Popover.Portal, { container: resolvedContainer ?? void 0, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
8651
8677
|
popover.Popover.Positioner,
|
|
8652
8678
|
{
|
|
8653
8679
|
align,
|
|
@@ -12279,6 +12305,7 @@ function SideDialogRoot({
|
|
|
12279
12305
|
className
|
|
12280
12306
|
}) {
|
|
12281
12307
|
const isConfirmation = variant === "confirmation";
|
|
12308
|
+
const [portalHost, setPortalHost] = React__namespace.useState(null);
|
|
12282
12309
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
12283
12310
|
Drawer,
|
|
12284
12311
|
{
|
|
@@ -12323,7 +12350,8 @@ function SideDialogRoot({
|
|
|
12323
12350
|
)
|
|
12324
12351
|
}
|
|
12325
12352
|
),
|
|
12326
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
12353
|
+
/* @__PURE__ */ jsxRuntime.jsx(DrawerInteractive, { render: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: setPortalHost, className: "absolute" }) }),
|
|
12354
|
+
/* @__PURE__ */ jsxRuntime.jsx(PortalContainerProvider, { container: portalHost, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
12327
12355
|
"div",
|
|
12328
12356
|
{
|
|
12329
12357
|
className: cn("grid h-full", {
|
|
@@ -12331,7 +12359,7 @@ function SideDialogRoot({
|
|
|
12331
12359
|
}),
|
|
12332
12360
|
children
|
|
12333
12361
|
}
|
|
12334
|
-
)
|
|
12362
|
+
) })
|
|
12335
12363
|
]
|
|
12336
12364
|
}
|
|
12337
12365
|
) })
|