@uipath/apollo-wind 2.54.1 → 2.56.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/dist/components/ui/index.cjs +117 -107
- package/dist/components/ui/index.d.ts +1 -0
- package/dist/components/ui/index.js +1 -0
- package/dist/components/ui/model-picker/ModelPicker.cjs +495 -0
- package/dist/components/ui/model-picker/ModelPicker.d.ts +304 -0
- package/dist/components/ui/model-picker/ModelPicker.js +451 -0
- package/dist/components/ui/model-picker/ModelTagChip.cjs +101 -0
- package/dist/components/ui/model-picker/ModelTagChip.d.ts +29 -0
- package/dist/components/ui/model-picker/ModelTagChip.js +67 -0
- package/dist/components/ui/model-picker/badges.cjs +52 -0
- package/dist/components/ui/model-picker/badges.d.ts +41 -0
- package/dist/components/ui/model-picker/badges.js +18 -0
- package/dist/components/ui/model-picker/index.cjs +117 -0
- package/dist/components/ui/model-picker/index.d.ts +27 -0
- package/dist/components/ui/model-picker/index.js +14 -0
- package/dist/components/ui/model-picker/labels.cjs +107 -0
- package/dist/components/ui/model-picker/labels.d.ts +81 -0
- package/dist/components/ui/model-picker/labels.js +67 -0
- package/dist/components/ui/model-picker/primitives/FolderSwitcher.cjs +108 -0
- package/dist/components/ui/model-picker/primitives/FolderSwitcher.d.ts +38 -0
- package/dist/components/ui/model-picker/primitives/FolderSwitcher.js +74 -0
- package/dist/components/ui/model-picker/primitives/GroupHeader.cjs +84 -0
- package/dist/components/ui/model-picker/primitives/GroupHeader.d.ts +64 -0
- package/dist/components/ui/model-picker/primitives/GroupHeader.js +50 -0
- package/dist/components/ui/model-picker/primitives/ModelOptionRow.cjs +178 -0
- package/dist/components/ui/model-picker/primitives/ModelOptionRow.d.ts +95 -0
- package/dist/components/ui/model-picker/primitives/ModelOptionRow.js +135 -0
- package/dist/components/ui/model-picker/primitives/OptionList.cjs +295 -0
- package/dist/components/ui/model-picker/primitives/OptionList.d.ts +87 -0
- package/dist/components/ui/model-picker/primitives/OptionList.js +242 -0
- package/dist/components/ui/model-picker/primitives/PickerPopup.cjs +64 -0
- package/dist/components/ui/model-picker/primitives/PickerPopup.d.ts +39 -0
- package/dist/components/ui/model-picker/primitives/PickerPopup.js +30 -0
- package/dist/components/ui/model-picker/primitives/PickerSearchInput.cjs +77 -0
- package/dist/components/ui/model-picker/primitives/PickerSearchInput.d.ts +43 -0
- package/dist/components/ui/model-picker/primitives/PickerSearchInput.js +43 -0
- package/dist/components/ui/model-picker/primitives/PickerTrigger.cjs +112 -0
- package/dist/components/ui/model-picker/primitives/PickerTrigger.d.ts +73 -0
- package/dist/components/ui/model-picker/primitives/PickerTrigger.js +78 -0
- package/dist/components/ui/model-picker/types.cjs +18 -0
- package/dist/components/ui/model-picker/types.d.ts +154 -0
- package/dist/components/ui/model-picker/types.js +0 -0
- package/dist/components/ui/model-picker/useModelPickerState.cjs +250 -0
- package/dist/components/ui/model-picker/useModelPickerState.d.ts +135 -0
- package/dist/components/ui/model-picker/useModelPickerState.js +216 -0
- package/dist/components/ui/model-picker/utils.cjs +327 -0
- package/dist/components/ui/model-picker/utils.d.ts +121 -0
- package/dist/components/ui/model-picker/utils.js +272 -0
- package/dist/editor-themes/codemirror.cjs +27 -27
- package/dist/editor-themes/codemirror.d.ts +3 -2
- package/dist/editor-themes/codemirror.js +27 -27
- package/dist/editor-themes/monaco.cjs +157 -91
- package/dist/editor-themes/monaco.d.ts +130 -64
- package/dist/editor-themes/monaco.js +157 -91
- package/dist/index.cjs +83 -10
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -1
- package/dist/styles.css +121 -14
- package/package.json +2 -1
|
@@ -0,0 +1,242 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { useVirtualizer } from "@tanstack/react-virtual";
|
|
4
|
+
import { Shield } from "lucide-react";
|
|
5
|
+
import react, { useEffect, useMemo, useRef } from "react";
|
|
6
|
+
import { DEFAULT_MODEL_PICKER_LABELS } from "../labels.js";
|
|
7
|
+
import { GroupHeader } from "./GroupHeader.js";
|
|
8
|
+
import { DENSE_OPTION_HEIGHT, FULL_OPTION_HEIGHT, ModelOptionRow } from "./ModelOptionRow.js";
|
|
9
|
+
const BYO_GROUP_KEY = 'byo';
|
|
10
|
+
function isCollapsibleGroup(groupKey) {
|
|
11
|
+
return groupKey === BYO_GROUP_KEY;
|
|
12
|
+
}
|
|
13
|
+
const DEFAULT_LIST_MAX_HEIGHT = 362;
|
|
14
|
+
function groupLeadingIcon(groupKey) {
|
|
15
|
+
if (groupKey === BYO_GROUP_KEY) return /*#__PURE__*/ jsx(Shield, {
|
|
16
|
+
className: "size-3.5"
|
|
17
|
+
});
|
|
18
|
+
return null;
|
|
19
|
+
}
|
|
20
|
+
const GROUP_HINT_KEYS = {
|
|
21
|
+
recommended: 'recommendedGroupHint',
|
|
22
|
+
preview: 'previewGroupHint',
|
|
23
|
+
byo: 'byoGroupHint',
|
|
24
|
+
more: 'moreGroupHint',
|
|
25
|
+
deprecating: 'deprecatingGroupHint'
|
|
26
|
+
};
|
|
27
|
+
function groupHint(groupKey, labels) {
|
|
28
|
+
const key = GROUP_HINT_KEYS[groupKey];
|
|
29
|
+
return key ? labels[key] : void 0;
|
|
30
|
+
}
|
|
31
|
+
function countLabel(n, labels) {
|
|
32
|
+
return null == n ? void 0 : labels.modelCount(n);
|
|
33
|
+
}
|
|
34
|
+
function optionDomId(listboxId, modelId) {
|
|
35
|
+
const safe = modelId.replace(/[^A-Za-z0-9-]/g, (c)=>`_${c.codePointAt(0)?.toString(16)}_`);
|
|
36
|
+
return `${listboxId}-opt-${safe}`;
|
|
37
|
+
}
|
|
38
|
+
const GroupedOptionList = ({ id, options, activeIndex, setActiveIndex, selectedId, onSelect, tagContext, tagVariants, groupCounts, renderRowActions, renderRowMeta, dense, maxHeight = DEFAULT_LIST_MAX_HEIGHT, hideGroupHeaders, hideTagKinds, collapsedGroups, onGroupToggle, 'aria-label': ariaLabel = 'Models' })=>{
|
|
39
|
+
const labels = tagContext?.labels ?? DEFAULT_MODEL_PICKER_LABELS;
|
|
40
|
+
let lastGroupKey;
|
|
41
|
+
let headerCount = 0;
|
|
42
|
+
useEffect(()=>{
|
|
43
|
+
const model = options[activeIndex];
|
|
44
|
+
if (!model) return;
|
|
45
|
+
document.getElementById(optionDomId(id, model.modelId))?.scrollIntoView?.({
|
|
46
|
+
block: 'nearest'
|
|
47
|
+
});
|
|
48
|
+
}, [
|
|
49
|
+
activeIndex,
|
|
50
|
+
id,
|
|
51
|
+
options
|
|
52
|
+
]);
|
|
53
|
+
const derivedCounts = useMemo(()=>{
|
|
54
|
+
if (groupCounts) return groupCounts;
|
|
55
|
+
const out = {};
|
|
56
|
+
for (const o of options)out[o.groupKey] = (out[o.groupKey] ?? 0) + 1;
|
|
57
|
+
return out;
|
|
58
|
+
}, [
|
|
59
|
+
groupCounts,
|
|
60
|
+
options
|
|
61
|
+
]);
|
|
62
|
+
return /*#__PURE__*/ jsx("div", {
|
|
63
|
+
"aria-label": ariaLabel,
|
|
64
|
+
className: "overflow-y-auto py-1",
|
|
65
|
+
"data-slot": "model-picker-listbox",
|
|
66
|
+
id: id,
|
|
67
|
+
role: "listbox",
|
|
68
|
+
style: {
|
|
69
|
+
maxHeight
|
|
70
|
+
},
|
|
71
|
+
children: options.map((opt, i)=>{
|
|
72
|
+
const showHeader = !hideGroupHeaders && opt.groupKey !== lastGroupKey;
|
|
73
|
+
const isFirstHeader = showHeader && 0 === headerCount;
|
|
74
|
+
if (showHeader) headerCount += 1;
|
|
75
|
+
lastGroupKey = opt.groupKey;
|
|
76
|
+
const isCollapsible = isCollapsibleGroup(opt.groupKey);
|
|
77
|
+
const isCollapsed = isCollapsible && (collapsedGroups?.has(opt.groupKey) ?? false);
|
|
78
|
+
const headerActive = isCollapsed && options[activeIndex]?.groupKey === opt.groupKey;
|
|
79
|
+
return /*#__PURE__*/ jsxs(react.Fragment, {
|
|
80
|
+
children: [
|
|
81
|
+
showHeader && /*#__PURE__*/ jsx(GroupHeader, {
|
|
82
|
+
active: headerActive,
|
|
83
|
+
label: opt.groupLabel,
|
|
84
|
+
hint: groupHint(opt.groupKey, labels),
|
|
85
|
+
count: derivedCounts[opt.groupKey],
|
|
86
|
+
countLabel: countLabel(derivedCounts[opt.groupKey], labels),
|
|
87
|
+
dense: dense,
|
|
88
|
+
isFirst: isFirstHeader,
|
|
89
|
+
leadingIcon: groupLeadingIcon(opt.groupKey),
|
|
90
|
+
collapsible: isCollapsible,
|
|
91
|
+
collapsed: isCollapsed,
|
|
92
|
+
onToggle: isCollapsible ? ()=>onGroupToggle?.(opt.groupKey) : void 0
|
|
93
|
+
}),
|
|
94
|
+
!isCollapsed && /*#__PURE__*/ jsx(ModelOptionRow, {
|
|
95
|
+
id: optionDomId(id, opt.modelId),
|
|
96
|
+
model: opt,
|
|
97
|
+
index: i,
|
|
98
|
+
active: i === activeIndex,
|
|
99
|
+
selected: opt.modelId === selectedId,
|
|
100
|
+
onSelect: onSelect,
|
|
101
|
+
onActivate: setActiveIndex,
|
|
102
|
+
tagContext: tagContext,
|
|
103
|
+
tagVariants: tagVariants,
|
|
104
|
+
hideTagKinds: hideTagKinds?.filter((k)=>k === opt.groupKey),
|
|
105
|
+
renderMeta: renderRowMeta,
|
|
106
|
+
renderActions: renderRowActions,
|
|
107
|
+
dense: dense
|
|
108
|
+
})
|
|
109
|
+
]
|
|
110
|
+
}, opt.modelId);
|
|
111
|
+
})
|
|
112
|
+
});
|
|
113
|
+
};
|
|
114
|
+
const VirtualOptionList = ({ id, options, activeIndex, setActiveIndex, selectedId, onSelect, tagContext, tagVariants, groupCounts, renderRowActions, renderRowMeta, dense, maxHeight = DEFAULT_LIST_MAX_HEIGHT, hideGroupHeaders, hideTagKinds, collapsedGroups, onGroupToggle, 'aria-label': ariaLabel = 'Models' })=>{
|
|
115
|
+
const labels = tagContext?.labels ?? DEFAULT_MODEL_PICKER_LABELS;
|
|
116
|
+
const rows = useMemo(()=>{
|
|
117
|
+
const out = [];
|
|
118
|
+
let lastGroupKey;
|
|
119
|
+
let headerCount = 0;
|
|
120
|
+
const counts = groupCounts ?? {};
|
|
121
|
+
if (!groupCounts) for (const o of options)counts[o.groupKey] = (counts[o.groupKey] ?? 0) + 1;
|
|
122
|
+
options.forEach((opt, i)=>{
|
|
123
|
+
const collapsed = isCollapsibleGroup(opt.groupKey) && (collapsedGroups?.has(opt.groupKey) ?? false);
|
|
124
|
+
if (!hideGroupHeaders && opt.groupKey !== lastGroupKey) {
|
|
125
|
+
out.push({
|
|
126
|
+
kind: 'header',
|
|
127
|
+
key: `h-${opt.groupKey}`,
|
|
128
|
+
groupKey: opt.groupKey,
|
|
129
|
+
label: opt.groupLabel,
|
|
130
|
+
isFirst: 0 === headerCount,
|
|
131
|
+
count: counts[opt.groupKey] ?? 0
|
|
132
|
+
});
|
|
133
|
+
headerCount += 1;
|
|
134
|
+
}
|
|
135
|
+
lastGroupKey = opt.groupKey;
|
|
136
|
+
if (!collapsed) out.push({
|
|
137
|
+
kind: 'option',
|
|
138
|
+
key: opt.modelId,
|
|
139
|
+
model: opt,
|
|
140
|
+
index: i
|
|
141
|
+
});
|
|
142
|
+
});
|
|
143
|
+
return out;
|
|
144
|
+
}, [
|
|
145
|
+
options,
|
|
146
|
+
hideGroupHeaders,
|
|
147
|
+
groupCounts,
|
|
148
|
+
collapsedGroups
|
|
149
|
+
]);
|
|
150
|
+
const headerHeight = dense ? 32 : 48;
|
|
151
|
+
const optionHeight = dense ? DENSE_OPTION_HEIGHT : FULL_OPTION_HEIGHT;
|
|
152
|
+
const parentRef = useRef(null);
|
|
153
|
+
const virtualizer = useVirtualizer({
|
|
154
|
+
count: rows.length,
|
|
155
|
+
getScrollElement: ()=>parentRef.current,
|
|
156
|
+
estimateSize: (i)=>rows[i]?.kind === 'header' ? headerHeight : optionHeight,
|
|
157
|
+
overscan: 10
|
|
158
|
+
});
|
|
159
|
+
const measure = virtualizer.measureElement;
|
|
160
|
+
useEffect(()=>{
|
|
161
|
+
const rowIdx = rows.findIndex((r)=>'option' === r.kind && r.index === activeIndex);
|
|
162
|
+
if (rowIdx >= 0) virtualizer.scrollToIndex(rowIdx, {
|
|
163
|
+
align: 'auto'
|
|
164
|
+
});
|
|
165
|
+
}, [
|
|
166
|
+
activeIndex,
|
|
167
|
+
rows,
|
|
168
|
+
virtualizer
|
|
169
|
+
]);
|
|
170
|
+
return /*#__PURE__*/ jsx("div", {
|
|
171
|
+
"aria-label": ariaLabel,
|
|
172
|
+
className: "relative overflow-y-auto py-1",
|
|
173
|
+
"data-slot": "model-picker-listbox",
|
|
174
|
+
id: id,
|
|
175
|
+
ref: parentRef,
|
|
176
|
+
role: "listbox",
|
|
177
|
+
style: {
|
|
178
|
+
maxHeight
|
|
179
|
+
},
|
|
180
|
+
children: /*#__PURE__*/ jsx("div", {
|
|
181
|
+
className: "relative w-full",
|
|
182
|
+
style: {
|
|
183
|
+
height: virtualizer.getTotalSize()
|
|
184
|
+
},
|
|
185
|
+
children: virtualizer.getVirtualItems().map((vi)=>{
|
|
186
|
+
const row = rows[vi.index];
|
|
187
|
+
if (!row) return null;
|
|
188
|
+
const baseStyle = {
|
|
189
|
+
position: 'absolute',
|
|
190
|
+
top: 0,
|
|
191
|
+
left: 0,
|
|
192
|
+
width: '100%',
|
|
193
|
+
transform: `translateY(${vi.start}px)`
|
|
194
|
+
};
|
|
195
|
+
if ('header' === row.kind) {
|
|
196
|
+
const isCollapsible = isCollapsibleGroup(row.groupKey);
|
|
197
|
+
const isCollapsed = isCollapsible && (collapsedGroups?.has(row.groupKey) ?? false);
|
|
198
|
+
const headerActive = isCollapsed && options[activeIndex]?.groupKey === row.groupKey;
|
|
199
|
+
return /*#__PURE__*/ jsx("div", {
|
|
200
|
+
"data-index": vi.index,
|
|
201
|
+
ref: measure,
|
|
202
|
+
style: baseStyle,
|
|
203
|
+
children: /*#__PURE__*/ jsx(GroupHeader, {
|
|
204
|
+
active: headerActive,
|
|
205
|
+
label: row.label,
|
|
206
|
+
hint: groupHint(row.groupKey, labels),
|
|
207
|
+
count: row.count,
|
|
208
|
+
countLabel: countLabel(row.count, labels),
|
|
209
|
+
dense: dense,
|
|
210
|
+
isFirst: row.isFirst,
|
|
211
|
+
leadingIcon: groupLeadingIcon(row.groupKey),
|
|
212
|
+
collapsible: isCollapsible,
|
|
213
|
+
collapsed: isCollapsed,
|
|
214
|
+
onToggle: isCollapsible ? ()=>onGroupToggle?.(row.groupKey) : void 0
|
|
215
|
+
})
|
|
216
|
+
}, row.key);
|
|
217
|
+
}
|
|
218
|
+
return /*#__PURE__*/ jsx("div", {
|
|
219
|
+
"data-index": vi.index,
|
|
220
|
+
ref: measure,
|
|
221
|
+
style: baseStyle,
|
|
222
|
+
children: /*#__PURE__*/ jsx(ModelOptionRow, {
|
|
223
|
+
id: optionDomId(id, row.model.modelId),
|
|
224
|
+
model: row.model,
|
|
225
|
+
index: row.index,
|
|
226
|
+
active: row.index === activeIndex,
|
|
227
|
+
selected: row.model.modelId === selectedId,
|
|
228
|
+
onSelect: onSelect,
|
|
229
|
+
onActivate: setActiveIndex,
|
|
230
|
+
tagContext: tagContext,
|
|
231
|
+
tagVariants: tagVariants,
|
|
232
|
+
hideTagKinds: hideTagKinds?.filter((k)=>k === row.model.groupKey),
|
|
233
|
+
renderMeta: renderRowMeta,
|
|
234
|
+
renderActions: renderRowActions,
|
|
235
|
+
dense: dense
|
|
236
|
+
})
|
|
237
|
+
}, row.key);
|
|
238
|
+
})
|
|
239
|
+
})
|
|
240
|
+
});
|
|
241
|
+
};
|
|
242
|
+
export { GroupedOptionList, VirtualOptionList, isCollapsibleGroup, optionDomId };
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __webpack_require__ = {};
|
|
4
|
+
(()=>{
|
|
5
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
6
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: definition[key]
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
})();
|
|
12
|
+
(()=>{
|
|
13
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
14
|
+
})();
|
|
15
|
+
(()=>{
|
|
16
|
+
__webpack_require__.r = (exports1)=>{
|
|
17
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
18
|
+
value: 'Module'
|
|
19
|
+
});
|
|
20
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
21
|
+
value: true
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
})();
|
|
25
|
+
var __webpack_exports__ = {};
|
|
26
|
+
__webpack_require__.r(__webpack_exports__);
|
|
27
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
28
|
+
PickerPopup: ()=>PickerPopup
|
|
29
|
+
});
|
|
30
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
31
|
+
const external_popover_cjs_namespaceObject = require("../../popover.cjs");
|
|
32
|
+
const index_cjs_namespaceObject = require("../../../../lib/index.cjs");
|
|
33
|
+
const PickerPopup = ({ width, align = 'start', side = 'bottom', sideOffset = 6, header, footer, className, container, onKeyDown, onOpenAutoFocus, 'data-testid': dataTestId, children })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_popover_cjs_namespaceObject.PopoverContent, {
|
|
34
|
+
align: align,
|
|
35
|
+
className: (0, index_cjs_namespaceObject.cn)('flex flex-col overflow-hidden rounded-[10px] p-0 shadow-lg', className),
|
|
36
|
+
container: container,
|
|
37
|
+
"data-slot": "model-picker-popup",
|
|
38
|
+
"data-testid": dataTestId,
|
|
39
|
+
onKeyDown: onKeyDown,
|
|
40
|
+
onOpenAutoFocus: onOpenAutoFocus,
|
|
41
|
+
side: side,
|
|
42
|
+
sideOffset: sideOffset,
|
|
43
|
+
style: {
|
|
44
|
+
width: width ?? 'var(--radix-popover-trigger-width)'
|
|
45
|
+
},
|
|
46
|
+
children: [
|
|
47
|
+
header,
|
|
48
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
49
|
+
className: "min-h-0 flex-1",
|
|
50
|
+
children: children
|
|
51
|
+
}),
|
|
52
|
+
footer && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
53
|
+
className: "border-t border-border bg-popover",
|
|
54
|
+
children: footer
|
|
55
|
+
})
|
|
56
|
+
]
|
|
57
|
+
});
|
|
58
|
+
exports.PickerPopup = __webpack_exports__.PickerPopup;
|
|
59
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
60
|
+
"PickerPopup"
|
|
61
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
62
|
+
Object.defineProperty(exports, '__esModule', {
|
|
63
|
+
value: true
|
|
64
|
+
});
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import type * as React from 'react';
|
|
2
|
+
import { PopoverContent } from '../../popover';
|
|
3
|
+
export interface PickerPopupProps {
|
|
4
|
+
/** Optional fixed width. Defaults to the trigger's width. */
|
|
5
|
+
width?: number | string;
|
|
6
|
+
align?: React.ComponentProps<typeof PopoverContent>['align'];
|
|
7
|
+
side?: React.ComponentProps<typeof PopoverContent>['side'];
|
|
8
|
+
sideOffset?: number;
|
|
9
|
+
/** Renders above the listbox (e.g. search input). */
|
|
10
|
+
header?: React.ReactNode;
|
|
11
|
+
/** Renders below the listbox (e.g. the "Use custom model" CTA). */
|
|
12
|
+
footer?: React.ReactNode;
|
|
13
|
+
/** Optional className forwarded to the content for host overrides. */
|
|
14
|
+
className?: string;
|
|
15
|
+
/**
|
|
16
|
+
* Portal target. Hosts rendering inside a shadow root or a VS Code
|
|
17
|
+
* webview must pass their container so the popup — and the CSS
|
|
18
|
+
* variables scoped to that root — resolve correctly.
|
|
19
|
+
*/
|
|
20
|
+
container?: React.ComponentProps<typeof PopoverContent>['container'];
|
|
21
|
+
onKeyDown?: (e: React.KeyboardEvent) => void;
|
|
22
|
+
/**
|
|
23
|
+
* Keeps DOM focus on the search input instead of letting Radix move it
|
|
24
|
+
* to the content root on open — `aria-activedescendant` navigation
|
|
25
|
+
* depends on focus staying put.
|
|
26
|
+
*/
|
|
27
|
+
onOpenAutoFocus?: (e: Event) => void;
|
|
28
|
+
'data-testid'?: string;
|
|
29
|
+
children: React.ReactNode;
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Dropdown chrome for the ModelPicker: the popover surface plus its
|
|
33
|
+
* header/footer slots. Must be rendered inside a `<Popover>` — the
|
|
34
|
+
* trigger, open state and click-outside behaviour belong to Radix.
|
|
35
|
+
*
|
|
36
|
+
* Header and footer are slots so consumers can compose their own
|
|
37
|
+
* pickers without rewriting the popup structure.
|
|
38
|
+
*/
|
|
39
|
+
export declare const PickerPopup: React.FC<PickerPopupProps>;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { PopoverContent } from "../../popover.js";
|
|
4
|
+
import { cn } from "../../../../lib/index.js";
|
|
5
|
+
const PickerPopup = ({ width, align = 'start', side = 'bottom', sideOffset = 6, header, footer, className, container, onKeyDown, onOpenAutoFocus, 'data-testid': dataTestId, children })=>/*#__PURE__*/ jsxs(PopoverContent, {
|
|
6
|
+
align: align,
|
|
7
|
+
className: cn('flex flex-col overflow-hidden rounded-[10px] p-0 shadow-lg', className),
|
|
8
|
+
container: container,
|
|
9
|
+
"data-slot": "model-picker-popup",
|
|
10
|
+
"data-testid": dataTestId,
|
|
11
|
+
onKeyDown: onKeyDown,
|
|
12
|
+
onOpenAutoFocus: onOpenAutoFocus,
|
|
13
|
+
side: side,
|
|
14
|
+
sideOffset: sideOffset,
|
|
15
|
+
style: {
|
|
16
|
+
width: width ?? 'var(--radix-popover-trigger-width)'
|
|
17
|
+
},
|
|
18
|
+
children: [
|
|
19
|
+
header,
|
|
20
|
+
/*#__PURE__*/ jsx("div", {
|
|
21
|
+
className: "min-h-0 flex-1",
|
|
22
|
+
children: children
|
|
23
|
+
}),
|
|
24
|
+
footer && /*#__PURE__*/ jsx("div", {
|
|
25
|
+
className: "border-t border-border bg-popover",
|
|
26
|
+
children: footer
|
|
27
|
+
})
|
|
28
|
+
]
|
|
29
|
+
});
|
|
30
|
+
export { PickerPopup };
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __webpack_require__ = {};
|
|
4
|
+
(()=>{
|
|
5
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
6
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: definition[key]
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
})();
|
|
12
|
+
(()=>{
|
|
13
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
14
|
+
})();
|
|
15
|
+
(()=>{
|
|
16
|
+
__webpack_require__.r = (exports1)=>{
|
|
17
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
18
|
+
value: 'Module'
|
|
19
|
+
});
|
|
20
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
21
|
+
value: true
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
})();
|
|
25
|
+
var __webpack_exports__ = {};
|
|
26
|
+
__webpack_require__.r(__webpack_exports__);
|
|
27
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
28
|
+
PickerSearchInput: ()=>PickerSearchInput
|
|
29
|
+
});
|
|
30
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
31
|
+
const external_lucide_react_namespaceObject = require("lucide-react");
|
|
32
|
+
const index_cjs_namespaceObject = require("../../../../lib/index.cjs");
|
|
33
|
+
const PickerSearchInput = ({ value, onChange, onKeyDown, placeholder = 'Search models', 'aria-label': ariaLabel, activeDescendantId, inputRef, listboxId, dense, leading, trailing, className, 'data-testid': dataTestId })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
34
|
+
className: (0, index_cjs_namespaceObject.cn)('flex items-center gap-2 border-b border-border bg-popover', dense ? 'p-2.5' : 'p-3', className),
|
|
35
|
+
"data-slot": "model-picker-toolbar",
|
|
36
|
+
children: [
|
|
37
|
+
leading && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
38
|
+
className: "flex shrink-0 items-center",
|
|
39
|
+
children: leading
|
|
40
|
+
}),
|
|
41
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
42
|
+
className: (0, index_cjs_namespaceObject.cn)('flex min-w-0 flex-1 items-center gap-1.5 rounded-lg border border-border bg-popover px-2.5 transition-colors focus-within:border-ring', dense ? 'py-1' : 'py-1.5'),
|
|
43
|
+
children: [
|
|
44
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Search, {
|
|
45
|
+
"aria-hidden": true,
|
|
46
|
+
className: (0, index_cjs_namespaceObject.cn)('shrink-0 text-foreground-subtle', dense ? 'size-4' : 'size-[18px]')
|
|
47
|
+
}),
|
|
48
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
|
|
49
|
+
"aria-activedescendant": activeDescendantId,
|
|
50
|
+
"aria-autocomplete": "list",
|
|
51
|
+
"aria-controls": listboxId,
|
|
52
|
+
"aria-expanded": true,
|
|
53
|
+
"aria-label": ariaLabel ?? placeholder,
|
|
54
|
+
className: (0, index_cjs_namespaceObject.cn)('min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-foreground-subtle', dense ? 'text-xs' : 'text-sm'),
|
|
55
|
+
"data-testid": dataTestId,
|
|
56
|
+
onChange: (e)=>onChange(e.target.value),
|
|
57
|
+
onKeyDown: onKeyDown,
|
|
58
|
+
placeholder: placeholder,
|
|
59
|
+
ref: inputRef,
|
|
60
|
+
role: "combobox",
|
|
61
|
+
value: value
|
|
62
|
+
})
|
|
63
|
+
]
|
|
64
|
+
}),
|
|
65
|
+
trailing && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
66
|
+
className: "flex shrink-0 items-center",
|
|
67
|
+
children: trailing
|
|
68
|
+
})
|
|
69
|
+
]
|
|
70
|
+
});
|
|
71
|
+
exports.PickerSearchInput = __webpack_exports__.PickerSearchInput;
|
|
72
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
73
|
+
"PickerSearchInput"
|
|
74
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
75
|
+
Object.defineProperty(exports, '__esModule', {
|
|
76
|
+
value: true
|
|
77
|
+
});
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import type * as React from 'react';
|
|
2
|
+
export interface PickerSearchInputProps {
|
|
3
|
+
value: string;
|
|
4
|
+
onChange: (next: string) => void;
|
|
5
|
+
onKeyDown?: (e: React.KeyboardEvent) => void;
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
/** Accessible name for the input. Defaults to the placeholder. */
|
|
8
|
+
'aria-label'?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Pointer to the currently active option's element id. Forwarded to
|
|
11
|
+
* the input as `aria-activedescendant` so screen readers announce the
|
|
12
|
+
* highlighted row even though DOM focus stays on the input.
|
|
13
|
+
*/
|
|
14
|
+
activeDescendantId?: string;
|
|
15
|
+
inputRef?: React.Ref<HTMLInputElement>;
|
|
16
|
+
listboxId?: string;
|
|
17
|
+
dense?: boolean;
|
|
18
|
+
/**
|
|
19
|
+
* Rendered to the left of the search box, on the same row. Use for an
|
|
20
|
+
* inline folder picker / scope chip so it shares chrome with the search
|
|
21
|
+
* field instead of sitting in a separate banner above it.
|
|
22
|
+
*/
|
|
23
|
+
leading?: React.ReactNode;
|
|
24
|
+
/**
|
|
25
|
+
* Rendered to the right of the search box, on the same row. Use for
|
|
26
|
+
* tiny end-aligned controls like the group-by toggle.
|
|
27
|
+
*/
|
|
28
|
+
trailing?: React.ReactNode;
|
|
29
|
+
/** Optional className forwarded to the outer wrapper for host overrides. */
|
|
30
|
+
className?: string;
|
|
31
|
+
'data-testid'?: string;
|
|
32
|
+
}
|
|
33
|
+
/**
|
|
34
|
+
* Toolbar row above the option list: three distinct controls side by
|
|
35
|
+
* side — [folder pill] [bordered search box] [group-by pills] — each
|
|
36
|
+
* with its own chrome.
|
|
37
|
+
*
|
|
38
|
+
* This is a plain input rather than a `CommandInput`: filtering,
|
|
39
|
+
* `activeIndex` and keyboard navigation all live in
|
|
40
|
+
* `useModelPickerState`, so cmdk's own search and roving focus would
|
|
41
|
+
* duplicate and fight them.
|
|
42
|
+
*/
|
|
43
|
+
export declare const PickerSearchInput: React.FC<PickerSearchInputProps>;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { Search } from "lucide-react";
|
|
4
|
+
import { cn } from "../../../../lib/index.js";
|
|
5
|
+
const PickerSearchInput = ({ value, onChange, onKeyDown, placeholder = 'Search models', 'aria-label': ariaLabel, activeDescendantId, inputRef, listboxId, dense, leading, trailing, className, 'data-testid': dataTestId })=>/*#__PURE__*/ jsxs("div", {
|
|
6
|
+
className: cn('flex items-center gap-2 border-b border-border bg-popover', dense ? 'p-2.5' : 'p-3', className),
|
|
7
|
+
"data-slot": "model-picker-toolbar",
|
|
8
|
+
children: [
|
|
9
|
+
leading && /*#__PURE__*/ jsx("div", {
|
|
10
|
+
className: "flex shrink-0 items-center",
|
|
11
|
+
children: leading
|
|
12
|
+
}),
|
|
13
|
+
/*#__PURE__*/ jsxs("div", {
|
|
14
|
+
className: cn('flex min-w-0 flex-1 items-center gap-1.5 rounded-lg border border-border bg-popover px-2.5 transition-colors focus-within:border-ring', dense ? 'py-1' : 'py-1.5'),
|
|
15
|
+
children: [
|
|
16
|
+
/*#__PURE__*/ jsx(Search, {
|
|
17
|
+
"aria-hidden": true,
|
|
18
|
+
className: cn('shrink-0 text-foreground-subtle', dense ? 'size-4' : 'size-[18px]')
|
|
19
|
+
}),
|
|
20
|
+
/*#__PURE__*/ jsx("input", {
|
|
21
|
+
"aria-activedescendant": activeDescendantId,
|
|
22
|
+
"aria-autocomplete": "list",
|
|
23
|
+
"aria-controls": listboxId,
|
|
24
|
+
"aria-expanded": true,
|
|
25
|
+
"aria-label": ariaLabel ?? placeholder,
|
|
26
|
+
className: cn('min-w-0 flex-1 bg-transparent text-foreground outline-none placeholder:text-foreground-subtle', dense ? 'text-xs' : 'text-sm'),
|
|
27
|
+
"data-testid": dataTestId,
|
|
28
|
+
onChange: (e)=>onChange(e.target.value),
|
|
29
|
+
onKeyDown: onKeyDown,
|
|
30
|
+
placeholder: placeholder,
|
|
31
|
+
ref: inputRef,
|
|
32
|
+
role: "combobox",
|
|
33
|
+
value: value
|
|
34
|
+
})
|
|
35
|
+
]
|
|
36
|
+
}),
|
|
37
|
+
trailing && /*#__PURE__*/ jsx("div", {
|
|
38
|
+
className: "flex shrink-0 items-center",
|
|
39
|
+
children: trailing
|
|
40
|
+
})
|
|
41
|
+
]
|
|
42
|
+
});
|
|
43
|
+
export { PickerSearchInput };
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __webpack_require__ = {};
|
|
4
|
+
(()=>{
|
|
5
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
6
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: definition[key]
|
|
9
|
+
});
|
|
10
|
+
};
|
|
11
|
+
})();
|
|
12
|
+
(()=>{
|
|
13
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
14
|
+
})();
|
|
15
|
+
(()=>{
|
|
16
|
+
__webpack_require__.r = (exports1)=>{
|
|
17
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
18
|
+
value: 'Module'
|
|
19
|
+
});
|
|
20
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
21
|
+
value: true
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
})();
|
|
25
|
+
var __webpack_exports__ = {};
|
|
26
|
+
__webpack_require__.r(__webpack_exports__);
|
|
27
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
28
|
+
PickerTrigger: ()=>PickerTrigger_PickerTrigger
|
|
29
|
+
});
|
|
30
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
31
|
+
const external_lucide_react_namespaceObject = require("lucide-react");
|
|
32
|
+
const external_react_namespaceObject = require("react");
|
|
33
|
+
const index_cjs_namespaceObject = require("../../../../lib/index.cjs");
|
|
34
|
+
const external_labels_cjs_namespaceObject = require("../labels.cjs");
|
|
35
|
+
const external_ModelTagChip_cjs_namespaceObject = require("../ModelTagChip.cjs");
|
|
36
|
+
const external_utils_cjs_namespaceObject = require("../utils.cjs");
|
|
37
|
+
const PickerTrigger_PickerTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef(function({ id, selected, unknownValue, pendingValue, placeholder = 'Select a model', disabled, open, invalid, tagContext, tagVariants, extra, onClick, hideTagKinds, controlsId, describedById, required, className, 'data-testid': dataTestId, ...rest }, ref) {
|
|
38
|
+
const labels = tagContext?.labels ?? external_labels_cjs_namespaceObject.DEFAULT_MODEL_PICKER_LABELS;
|
|
39
|
+
const effectiveCtx = tagContext ?? {
|
|
40
|
+
labels
|
|
41
|
+
};
|
|
42
|
+
const inlineTags = selected ? (0, external_utils_cjs_namespaceObject.deriveModelTags)(selected, effectiveCtx).filter((t)=>!hideTagKinds?.includes(t.kind)) : [];
|
|
43
|
+
const primary = selected ? selected.displayName ?? selected.modelName : null;
|
|
44
|
+
const ownClick = onClick ? {
|
|
45
|
+
onClick
|
|
46
|
+
} : {};
|
|
47
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("button", {
|
|
48
|
+
...rest,
|
|
49
|
+
...ownClick,
|
|
50
|
+
"aria-controls": open && controlsId ? controlsId : void 0,
|
|
51
|
+
"aria-describedby": describedById,
|
|
52
|
+
"aria-expanded": open,
|
|
53
|
+
"aria-haspopup": "listbox",
|
|
54
|
+
"aria-invalid": invalid ? true : void 0,
|
|
55
|
+
"aria-required": required || void 0,
|
|
56
|
+
role: "combobox",
|
|
57
|
+
className: (0, index_cjs_namespaceObject.cn)('flex min-h-9 w-full cursor-pointer items-center justify-start gap-3 rounded-md border border-input bg-transparent px-3 py-1 text-left text-sm text-foreground transition-colors', 'focus:ring-2 focus:ring-ring focus:outline-none', 'focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none', 'disabled:cursor-not-allowed disabled:opacity-50', 'aria-invalid:border-error aria-invalid:focus-visible:ring-error', 'future:h-10 future:gap-4 future:rounded-xl future:border-0 future:bg-surface-overlay future:px-4 future:py-2 future:text-sm future:font-normal future:hover:bg-surface-hover future:focus-visible:ring-offset-2 future:focus-visible:ring-offset-background future:aria-invalid:ring-1 future:aria-invalid:ring-error/40', className),
|
|
58
|
+
"data-slot": "model-picker-trigger",
|
|
59
|
+
"data-testid": dataTestId,
|
|
60
|
+
disabled: disabled,
|
|
61
|
+
id: id,
|
|
62
|
+
ref: ref,
|
|
63
|
+
type: "button",
|
|
64
|
+
children: [
|
|
65
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
66
|
+
className: "flex min-w-0 flex-1 flex-nowrap items-center gap-1.5",
|
|
67
|
+
children: selected ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
68
|
+
children: [
|
|
69
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
70
|
+
className: "max-w-full truncate text-foreground",
|
|
71
|
+
children: primary
|
|
72
|
+
}),
|
|
73
|
+
inlineTags.map((t)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
74
|
+
className: "flex shrink-0 items-center",
|
|
75
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ModelTagChip_cjs_namespaceObject.ModelTagChip, {
|
|
76
|
+
disableTooltip: true,
|
|
77
|
+
tag: t,
|
|
78
|
+
variants: tagVariants
|
|
79
|
+
})
|
|
80
|
+
}, `${t.kind}-${t.label}`))
|
|
81
|
+
]
|
|
82
|
+
}) : pendingValue ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
83
|
+
className: "max-w-full truncate text-foreground",
|
|
84
|
+
children: pendingValue
|
|
85
|
+
}) : unknownValue ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
86
|
+
className: "max-w-full truncate text-error",
|
|
87
|
+
title: labels.unknownValueTooltip(unknownValue),
|
|
88
|
+
children: unknownValue
|
|
89
|
+
}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
90
|
+
className: "text-foreground-subtle",
|
|
91
|
+
children: placeholder
|
|
92
|
+
})
|
|
93
|
+
}),
|
|
94
|
+
extra && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
95
|
+
className: "flex shrink-0 items-center",
|
|
96
|
+
onClick: (e)=>e.stopPropagation(),
|
|
97
|
+
children: extra
|
|
98
|
+
}),
|
|
99
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronDown, {
|
|
100
|
+
"aria-hidden": true,
|
|
101
|
+
className: (0, index_cjs_namespaceObject.cn)('size-[18px] shrink-0 text-foreground-muted transition-transform duration-150', open && 'rotate-180')
|
|
102
|
+
})
|
|
103
|
+
]
|
|
104
|
+
});
|
|
105
|
+
});
|
|
106
|
+
exports.PickerTrigger = __webpack_exports__.PickerTrigger;
|
|
107
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
108
|
+
"PickerTrigger"
|
|
109
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
110
|
+
Object.defineProperty(exports, '__esModule', {
|
|
111
|
+
value: true
|
|
112
|
+
});
|