@uipath/apollo-wind 2.55.0 → 2.57.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/combobox.cjs +33 -15
- package/dist/components/ui/combobox.js +33 -15
- package/dist/components/ui/date-picker.cjs +62 -26
- package/dist/components/ui/date-picker.js +62 -26
- package/dist/components/ui/datetime-picker.cjs +29 -12
- package/dist/components/ui/datetime-picker.js +29 -12
- package/dist/components/ui/dropdown-menu.cjs +12 -8
- package/dist/components/ui/dropdown-menu.js +12 -8
- package/dist/components/ui/field-actions/ai-assist-action.cjs +121 -0
- package/dist/components/ui/field-actions/ai-assist-action.d.ts +21 -0
- package/dist/components/ui/field-actions/ai-assist-action.js +84 -0
- package/dist/components/ui/field-actions/collapse.cjs +44 -0
- package/dist/components/ui/field-actions/collapse.d.ts +6 -0
- package/dist/components/ui/field-actions/collapse.js +4 -0
- package/dist/components/ui/field-actions/index.cjs +46 -0
- package/dist/components/ui/field-actions/index.d.ts +2 -0
- package/dist/components/ui/field-actions/index.js +3 -0
- package/dist/components/ui/field-actions/insert-variable-action.cjs +94 -0
- package/dist/components/ui/field-actions/insert-variable-action.d.ts +22 -0
- package/dist/components/ui/field-actions/insert-variable-action.js +57 -0
- package/dist/components/ui/field-addons/index.cjs +50 -0
- package/dist/components/ui/field-addons/index.d.ts +3 -0
- package/dist/components/ui/field-addons/index.js +4 -0
- package/dist/components/ui/field-addons/value-mode-indicator.cjs +57 -0
- package/dist/components/ui/field-addons/value-mode-indicator.d.ts +13 -0
- package/dist/components/ui/field-addons/value-mode-indicator.js +23 -0
- package/dist/components/ui/field-addons/value-mode-menu.cjs +149 -0
- package/dist/components/ui/field-addons/value-mode-menu.d.ts +69 -0
- package/dist/components/ui/field-addons/value-mode-menu.js +112 -0
- package/dist/components/ui/field-addons/value-mode-strings.cjs +69 -0
- package/dist/components/ui/field-addons/value-mode-strings.d.ts +32 -0
- package/dist/components/ui/field-addons/value-mode-strings.js +29 -0
- package/dist/components/ui/form-field.cjs +42 -5
- package/dist/components/ui/form-field.d.ts +21 -1
- package/dist/components/ui/form-field.js +36 -2
- package/dist/components/ui/index.cjs +156 -126
- package/dist/components/ui/index.d.ts +3 -0
- package/dist/components/ui/index.js +3 -0
- package/dist/components/ui/input-group-context.cjs +91 -0
- package/dist/components/ui/input-group-context.d.ts +69 -0
- package/dist/components/ui/input-group-context.js +42 -0
- package/dist/components/ui/input-group.cjs +303 -56
- package/dist/components/ui/input-group.d.ts +70 -3
- package/dist/components/ui/input-group.js +285 -56
- package/dist/components/ui/input.cjs +28 -17
- package/dist/components/ui/input.js +28 -17
- package/dist/components/ui/lockable-value-field/components/field-header.cjs +16 -114
- package/dist/components/ui/lockable-value-field/components/field-header.js +14 -112
- package/dist/components/ui/lockable-value-field/lockable-value-field.cjs +4 -12
- package/dist/components/ui/lockable-value-field/lockable-value-field.js +4 -12
- 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/{lockable-value-field/components/mode-menu-item.cjs → model-picker/primitives/PickerPopup.cjs} +25 -24
- 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/components/ui/multi-select.cjs +82 -58
- package/dist/components/ui/multi-select.js +84 -60
- package/dist/components/ui/popover.cjs +13 -9
- package/dist/components/ui/popover.js +13 -9
- package/dist/components/ui/select.cjs +89 -27
- package/dist/components/ui/select.d.ts +4 -0
- package/dist/components/ui/select.js +90 -28
- package/dist/components/ui/textarea.cjs +16 -11
- package/dist/components/ui/textarea.js +16 -11
- package/dist/index.cjs +144 -21
- package/dist/index.d.ts +10 -4
- package/dist/index.js +6 -3
- package/dist/styles.css +350 -5
- package/package.json +2 -1
- package/dist/components/ui/lockable-value-field/components/mode-menu-item.d.ts +0 -9
- package/dist/components/ui/lockable-value-field/components/mode-menu-item.js +0 -29
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { DropdownMenuContent } from '../../dropdown-menu';
|
|
3
|
+
/**
|
|
4
|
+
* A single folder the picker can scope to. `id` is opaque to the
|
|
5
|
+
* picker — the host re-fetches Discovery with whatever it means.
|
|
6
|
+
*/
|
|
7
|
+
export interface FolderSwitcherFolder {
|
|
8
|
+
id: string;
|
|
9
|
+
label: string;
|
|
10
|
+
}
|
|
11
|
+
export interface FolderSwitcherProps {
|
|
12
|
+
/** Real folders the user can scope to. */
|
|
13
|
+
folders: readonly FolderSwitcherFolder[];
|
|
14
|
+
/**
|
|
15
|
+
* Current folder id. Pass `null` for the "All folders" sentinel
|
|
16
|
+
* (no `X-UiPath-FolderKey` header on the Discovery request).
|
|
17
|
+
*/
|
|
18
|
+
value: string | null;
|
|
19
|
+
onChange: (next: string | null) => void;
|
|
20
|
+
/** Label for the "All folders" sentinel. Default: `'All folders'`. */
|
|
21
|
+
allFoldersLabel?: string;
|
|
22
|
+
/**
|
|
23
|
+
* Render the "All folders" sentinel. Default: `true`. Set to `false`
|
|
24
|
+
* when the host requires the picker to be scoped to a specific
|
|
25
|
+
* folder (no tenant-wide BYO view).
|
|
26
|
+
*/
|
|
27
|
+
showAllFolders?: boolean;
|
|
28
|
+
/** Portal target, forwarded from the picker for shadow-root hosts. */
|
|
29
|
+
container?: React.ComponentProps<typeof DropdownMenuContent>['container'];
|
|
30
|
+
}
|
|
31
|
+
/**
|
|
32
|
+
* Toolbar folder switcher: a pill with a grid/folder indicator, label
|
|
33
|
+
* and chevron, opening a menu of "All folders" + per-folder items.
|
|
34
|
+
*
|
|
35
|
+
* The menu is non-modal so it doesn't trap focus away from the
|
|
36
|
+
* surrounding picker popover, which owns its own dismissal.
|
|
37
|
+
*/
|
|
38
|
+
export declare const FolderSwitcher: React.FC<FolderSwitcherProps>;
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { ChevronDown, Folder, LayoutGrid } from "lucide-react";
|
|
4
|
+
import { useState } from "react";
|
|
5
|
+
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../../dropdown-menu.js";
|
|
6
|
+
import { cn } from "../../../../lib/index.js";
|
|
7
|
+
const FolderSwitcher = ({ folders, value, onChange, allFoldersLabel = 'All folders', showAllFolders = true, container })=>{
|
|
8
|
+
const [open, setOpen] = useState(false);
|
|
9
|
+
const current = folders.find((f)=>f.id === value);
|
|
10
|
+
const isAll = null == value;
|
|
11
|
+
return /*#__PURE__*/ jsxs(DropdownMenu, {
|
|
12
|
+
modal: false,
|
|
13
|
+
onOpenChange: setOpen,
|
|
14
|
+
open: open,
|
|
15
|
+
children: [
|
|
16
|
+
/*#__PURE__*/ jsx(DropdownMenuTrigger, {
|
|
17
|
+
asChild: true,
|
|
18
|
+
children: /*#__PURE__*/ jsxs("button", {
|
|
19
|
+
className: "inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-border bg-popover px-3 py-1.5 text-xs leading-4 font-semibold text-brand hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
|
|
20
|
+
"data-slot": "model-picker-folder-switcher",
|
|
21
|
+
type: "button",
|
|
22
|
+
children: [
|
|
23
|
+
isAll ? /*#__PURE__*/ jsx(LayoutGrid, {
|
|
24
|
+
className: "size-3.5"
|
|
25
|
+
}) : /*#__PURE__*/ jsx(Folder, {
|
|
26
|
+
className: "size-3.5"
|
|
27
|
+
}),
|
|
28
|
+
/*#__PURE__*/ jsx("span", {
|
|
29
|
+
className: "whitespace-nowrap",
|
|
30
|
+
children: isAll ? allFoldersLabel : current?.label ?? allFoldersLabel
|
|
31
|
+
}),
|
|
32
|
+
/*#__PURE__*/ jsx(ChevronDown, {
|
|
33
|
+
"aria-hidden": true,
|
|
34
|
+
className: cn('size-3.5 text-foreground-muted transition-transform duration-150', open && 'rotate-180')
|
|
35
|
+
})
|
|
36
|
+
]
|
|
37
|
+
})
|
|
38
|
+
}),
|
|
39
|
+
/*#__PURE__*/ jsxs(DropdownMenuContent, {
|
|
40
|
+
align: "start",
|
|
41
|
+
className: "min-w-[200px]",
|
|
42
|
+
container: container,
|
|
43
|
+
children: [
|
|
44
|
+
showAllFolders && /*#__PURE__*/ jsxs(Fragment, {
|
|
45
|
+
children: [
|
|
46
|
+
/*#__PURE__*/ jsxs(DropdownMenuItem, {
|
|
47
|
+
className: "cursor-pointer",
|
|
48
|
+
onSelect: ()=>onChange(null),
|
|
49
|
+
children: [
|
|
50
|
+
/*#__PURE__*/ jsx(LayoutGrid, {
|
|
51
|
+
className: "size-3.5 text-foreground-muted"
|
|
52
|
+
}),
|
|
53
|
+
allFoldersLabel
|
|
54
|
+
]
|
|
55
|
+
}),
|
|
56
|
+
/*#__PURE__*/ jsx(DropdownMenuSeparator, {})
|
|
57
|
+
]
|
|
58
|
+
}),
|
|
59
|
+
folders.map((f)=>/*#__PURE__*/ jsxs(DropdownMenuItem, {
|
|
60
|
+
className: "cursor-pointer",
|
|
61
|
+
onSelect: ()=>onChange(f.id),
|
|
62
|
+
children: [
|
|
63
|
+
/*#__PURE__*/ jsx(Folder, {
|
|
64
|
+
className: "size-3.5 text-foreground-muted"
|
|
65
|
+
}),
|
|
66
|
+
f.label
|
|
67
|
+
]
|
|
68
|
+
}, f.id))
|
|
69
|
+
]
|
|
70
|
+
})
|
|
71
|
+
]
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
export { FolderSwitcher };
|
|
@@ -0,0 +1,84 @@
|
|
|
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
|
+
GroupHeader: ()=>GroupHeader
|
|
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 GroupHeader = ({ label, hint, count, countLabel, dense, isFirst, leadingIcon, collapsible, collapsed, onToggle, active, 'data-testid': dataTestId })=>{
|
|
34
|
+
const resolvedCountLabel = countLabel ?? (null != count ? `${count} ${1 === count ? 'model' : 'models'}` : null);
|
|
35
|
+
const base = (0, index_cjs_namespaceObject.cn)('flex w-full items-center gap-2 bg-surface-raised text-left', active && 'ring-2 ring-ring ring-inset', dense ? 'px-3 pb-1' : 'px-3.5 pb-1.5', isFirst ? dense ? 'pt-1.5' : 'pt-3' : dense ? 'pt-2.5 border-t border-border' : 'pt-3.5 border-t border-border');
|
|
36
|
+
const content = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
37
|
+
children: [
|
|
38
|
+
leadingIcon && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
39
|
+
"aria-hidden": true,
|
|
40
|
+
className: "flex items-center text-foreground-muted",
|
|
41
|
+
children: leadingIcon
|
|
42
|
+
}),
|
|
43
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
44
|
+
className: (0, index_cjs_namespaceObject.cn)('flex-auto font-bold tracking-wide text-foreground-muted uppercase', dense ? 'text-[10px] leading-tight' : 'text-[11px] leading-tight'),
|
|
45
|
+
children: label
|
|
46
|
+
}),
|
|
47
|
+
null != resolvedCountLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
48
|
+
className: (0, index_cjs_namespaceObject.cn)('shrink-0 font-normal text-foreground-subtle', dense ? 'text-[10px]' : 'text-[11px]'),
|
|
49
|
+
children: resolvedCountLabel
|
|
50
|
+
}),
|
|
51
|
+
collapsible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.ChevronRight, {
|
|
52
|
+
"aria-hidden": true,
|
|
53
|
+
className: (0, index_cjs_namespaceObject.cn)('size-4 shrink-0 text-foreground-muted transition-transform duration-150', collapsed ? 'rotate-0' : 'rotate-90')
|
|
54
|
+
})
|
|
55
|
+
]
|
|
56
|
+
});
|
|
57
|
+
if (collapsible) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
|
|
58
|
+
"aria-expanded": !collapsed,
|
|
59
|
+
className: (0, index_cjs_namespaceObject.cn)(base, 'cursor-pointer hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none'),
|
|
60
|
+
"data-active": active || void 0,
|
|
61
|
+
"data-slot": "model-picker-group-header",
|
|
62
|
+
"data-testid": dataTestId,
|
|
63
|
+
onClick: onToggle,
|
|
64
|
+
tabIndex: -1,
|
|
65
|
+
title: hint,
|
|
66
|
+
type: "button",
|
|
67
|
+
children: content
|
|
68
|
+
});
|
|
69
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
70
|
+
className: base,
|
|
71
|
+
"data-slot": "model-picker-group-header",
|
|
72
|
+
"data-testid": dataTestId,
|
|
73
|
+
role: "presentation",
|
|
74
|
+
title: hint,
|
|
75
|
+
children: content
|
|
76
|
+
});
|
|
77
|
+
};
|
|
78
|
+
exports.GroupHeader = __webpack_exports__.GroupHeader;
|
|
79
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
80
|
+
"GroupHeader"
|
|
81
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
82
|
+
Object.defineProperty(exports, '__esModule', {
|
|
83
|
+
value: true
|
|
84
|
+
});
|
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
import type * as React from 'react';
|
|
2
|
+
export interface GroupHeaderProps {
|
|
3
|
+
label: string;
|
|
4
|
+
/**
|
|
5
|
+
* Descriptive hint about the group. Surfaced as a `title` tooltip on
|
|
6
|
+
* the header — inline hints added more chrome than information.
|
|
7
|
+
*/
|
|
8
|
+
hint?: string;
|
|
9
|
+
/**
|
|
10
|
+
* Right-aligned model count (e.g. "3 models"). Pass when known; the
|
|
11
|
+
* header pluralizes automatically. Omit to suppress.
|
|
12
|
+
*/
|
|
13
|
+
count?: number;
|
|
14
|
+
/**
|
|
15
|
+
* Pre-localized "{n} models" / "{n} model" label rendered to the
|
|
16
|
+
* right of the title. When provided, overrides the built-in
|
|
17
|
+
* (English-only) ternary derived from `count`.
|
|
18
|
+
*/
|
|
19
|
+
countLabel?: string;
|
|
20
|
+
/** Reduces vertical padding for the compact picker. */
|
|
21
|
+
dense?: boolean;
|
|
22
|
+
/**
|
|
23
|
+
* Whether this is the first header in the list. When true, no
|
|
24
|
+
* `border-top` is drawn — that line would double up with the search
|
|
25
|
+
* row's existing `border-bottom`.
|
|
26
|
+
*/
|
|
27
|
+
isFirst?: boolean;
|
|
28
|
+
/**
|
|
29
|
+
* Leading icon glyph rendered before the label. Used for the BYO
|
|
30
|
+
* accordion's shield icon. Falls back to nothing when omitted.
|
|
31
|
+
*/
|
|
32
|
+
leadingIcon?: React.ReactNode;
|
|
33
|
+
/**
|
|
34
|
+
* When `true`, the header renders as a button with a trailing
|
|
35
|
+
* chevron (rotated based on `collapsed`) and calls `onToggle` on
|
|
36
|
+
* click. Used for the BYO accordion at the bottom of the list.
|
|
37
|
+
*/
|
|
38
|
+
collapsible?: boolean;
|
|
39
|
+
/** Current collapsed state (rotates chevron) when `collapsible`. */
|
|
40
|
+
collapsed?: boolean;
|
|
41
|
+
/** Click handler; required when `collapsible`. */
|
|
42
|
+
onToggle?: () => void;
|
|
43
|
+
/**
|
|
44
|
+
* The keyboard highlight is resting on this (collapsed) section. Rows
|
|
45
|
+
* inside are not rendered, so the header stands in for them visually;
|
|
46
|
+
* `→` on the search field reopens it.
|
|
47
|
+
*/
|
|
48
|
+
active?: boolean;
|
|
49
|
+
/** Optional test id forwarded to the header. */
|
|
50
|
+
'data-testid'?: string;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* Section header rendered between model groups in the picker dropdown.
|
|
54
|
+
* Exported so teams can render their own grouped layouts.
|
|
55
|
+
*
|
|
56
|
+
* Two modes:
|
|
57
|
+
* - **Static** (default): a label band with optional leading icon +
|
|
58
|
+
* trailing count. No interactivity. Used for Recommended / Preview
|
|
59
|
+
* / More / Deprecating / per-vendor sections.
|
|
60
|
+
* - **Collapsible**: same chrome, but the entire band is a button
|
|
61
|
+
* with a trailing chevron that flips on `collapsed`. Used by the
|
|
62
|
+
* BYO accordion at the bottom of the Category view.
|
|
63
|
+
*/
|
|
64
|
+
export declare const GroupHeader: React.FC<GroupHeaderProps>;
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
3
|
+
import { ChevronRight } from "lucide-react";
|
|
4
|
+
import { cn } from "../../../../lib/index.js";
|
|
5
|
+
const GroupHeader = ({ label, hint, count, countLabel, dense, isFirst, leadingIcon, collapsible, collapsed, onToggle, active, 'data-testid': dataTestId })=>{
|
|
6
|
+
const resolvedCountLabel = countLabel ?? (null != count ? `${count} ${1 === count ? 'model' : 'models'}` : null);
|
|
7
|
+
const base = cn('flex w-full items-center gap-2 bg-surface-raised text-left', active && 'ring-2 ring-ring ring-inset', dense ? 'px-3 pb-1' : 'px-3.5 pb-1.5', isFirst ? dense ? 'pt-1.5' : 'pt-3' : dense ? 'pt-2.5 border-t border-border' : 'pt-3.5 border-t border-border');
|
|
8
|
+
const content = /*#__PURE__*/ jsxs(Fragment, {
|
|
9
|
+
children: [
|
|
10
|
+
leadingIcon && /*#__PURE__*/ jsx("span", {
|
|
11
|
+
"aria-hidden": true,
|
|
12
|
+
className: "flex items-center text-foreground-muted",
|
|
13
|
+
children: leadingIcon
|
|
14
|
+
}),
|
|
15
|
+
/*#__PURE__*/ jsx("span", {
|
|
16
|
+
className: cn('flex-auto font-bold tracking-wide text-foreground-muted uppercase', dense ? 'text-[10px] leading-tight' : 'text-[11px] leading-tight'),
|
|
17
|
+
children: label
|
|
18
|
+
}),
|
|
19
|
+
null != resolvedCountLabel && /*#__PURE__*/ jsx("span", {
|
|
20
|
+
className: cn('shrink-0 font-normal text-foreground-subtle', dense ? 'text-[10px]' : 'text-[11px]'),
|
|
21
|
+
children: resolvedCountLabel
|
|
22
|
+
}),
|
|
23
|
+
collapsible && /*#__PURE__*/ jsx(ChevronRight, {
|
|
24
|
+
"aria-hidden": true,
|
|
25
|
+
className: cn('size-4 shrink-0 text-foreground-muted transition-transform duration-150', collapsed ? 'rotate-0' : 'rotate-90')
|
|
26
|
+
})
|
|
27
|
+
]
|
|
28
|
+
});
|
|
29
|
+
if (collapsible) return /*#__PURE__*/ jsx("button", {
|
|
30
|
+
"aria-expanded": !collapsed,
|
|
31
|
+
className: cn(base, 'cursor-pointer hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none'),
|
|
32
|
+
"data-active": active || void 0,
|
|
33
|
+
"data-slot": "model-picker-group-header",
|
|
34
|
+
"data-testid": dataTestId,
|
|
35
|
+
onClick: onToggle,
|
|
36
|
+
tabIndex: -1,
|
|
37
|
+
title: hint,
|
|
38
|
+
type: "button",
|
|
39
|
+
children: content
|
|
40
|
+
});
|
|
41
|
+
return /*#__PURE__*/ jsx("div", {
|
|
42
|
+
className: base,
|
|
43
|
+
"data-slot": "model-picker-group-header",
|
|
44
|
+
"data-testid": dataTestId,
|
|
45
|
+
role: "presentation",
|
|
46
|
+
title: hint,
|
|
47
|
+
children: content
|
|
48
|
+
});
|
|
49
|
+
};
|
|
50
|
+
export { GroupHeader };
|
|
@@ -0,0 +1,178 @@
|
|
|
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
|
+
FULL_OPTION_HEIGHT: ()=>FULL_OPTION_HEIGHT,
|
|
29
|
+
defaultRowActions: ()=>defaultRowActions,
|
|
30
|
+
DENSE_OPTION_HEIGHT: ()=>DENSE_OPTION_HEIGHT,
|
|
31
|
+
ModelOptionRow: ()=>ModelOptionRow
|
|
32
|
+
});
|
|
33
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
34
|
+
const external_lucide_react_namespaceObject = require("lucide-react");
|
|
35
|
+
const external_react_namespaceObject = require("react");
|
|
36
|
+
const external_tooltip_cjs_namespaceObject = require("../../tooltip.cjs");
|
|
37
|
+
const index_cjs_namespaceObject = require("../../../../lib/index.cjs");
|
|
38
|
+
const external_labels_cjs_namespaceObject = require("../labels.cjs");
|
|
39
|
+
const external_ModelTagChip_cjs_namespaceObject = require("../ModelTagChip.cjs");
|
|
40
|
+
const external_utils_cjs_namespaceObject = require("../utils.cjs");
|
|
41
|
+
const FULL_OPTION_HEIGHT = 64;
|
|
42
|
+
const DENSE_OPTION_HEIGHT = 44;
|
|
43
|
+
const ModelOptionRowInner = ({ model, index, active, selected, onSelect, onActivate, tagContext, tagVariants, renderActions, renderMeta, dense, hideTagKinds, id, 'data-testid': dataTestId })=>{
|
|
44
|
+
const labels = tagContext?.labels ?? external_labels_cjs_namespaceObject.DEFAULT_MODEL_PICKER_LABELS;
|
|
45
|
+
const inlineTags = (0, external_utils_cjs_namespaceObject.deriveModelTags)(model, tagContext ?? {}).filter((t)=>!hideTagKinds?.includes(t.kind));
|
|
46
|
+
const primaryLabel = model.displayName ?? null;
|
|
47
|
+
const primary = primaryLabel ?? model.modelName;
|
|
48
|
+
const usesFriendlyName = !!primaryLabel && primaryLabel !== model.modelId;
|
|
49
|
+
const techId = usesFriendlyName ? model.modelId : null;
|
|
50
|
+
const contextTokens = model.modelDetails?.contextWindowTokens;
|
|
51
|
+
const contextLabel = null != contextTokens && contextTokens > 0 ? labels.contextWindow(contextTokens) : null;
|
|
52
|
+
const rowActions = renderActions ? renderActions(model) : null;
|
|
53
|
+
const meta = renderMeta?.(model);
|
|
54
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
55
|
+
"aria-selected": selected,
|
|
56
|
+
className: (0, index_cjs_namespaceObject.cn)('@container relative flex w-full cursor-pointer items-start justify-start text-left', dense ? 'min-h-11 gap-2 px-3 py-1.5' : 'min-h-16 gap-3 px-3.5 py-2.5', selected ? 'bg-surface-selected shadow-[inset_3px_0_0_var(--brand)]' : active ? 'bg-surface-hover' : 'bg-transparent', !selected && 'hover:bg-surface-hover'),
|
|
57
|
+
"data-slot": "model-picker-row",
|
|
58
|
+
"data-testid": dataTestId,
|
|
59
|
+
id: id,
|
|
60
|
+
onClick: ()=>onSelect(model),
|
|
61
|
+
onMouseEnter: onActivate ? ()=>onActivate(index) : void 0,
|
|
62
|
+
role: "option",
|
|
63
|
+
tabIndex: -1,
|
|
64
|
+
children: [
|
|
65
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
66
|
+
className: "min-w-0 flex-1",
|
|
67
|
+
children: [
|
|
68
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
69
|
+
className: "flex min-w-0 flex-nowrap items-center gap-1.5",
|
|
70
|
+
children: [
|
|
71
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
72
|
+
className: (0, index_cjs_namespaceObject.cn)('min-w-0 flex-[0_1_auto] truncate leading-snug font-semibold text-foreground', dense ? 'text-xs' : 'text-sm'),
|
|
73
|
+
children: primary
|
|
74
|
+
}),
|
|
75
|
+
inlineTags.map((t)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
76
|
+
className: "flex min-w-0 shrink items-center overflow-hidden [&_[data-slot=model-picker-tag]]:max-w-full [&_[data-slot=model-picker-tag]]:truncate",
|
|
77
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ModelTagChip_cjs_namespaceObject.ModelTagChip, {
|
|
78
|
+
tag: t,
|
|
79
|
+
variants: tagVariants
|
|
80
|
+
})
|
|
81
|
+
}, `${t.kind}-${t.label}`))
|
|
82
|
+
]
|
|
83
|
+
}),
|
|
84
|
+
techId && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
85
|
+
className: "mt-0.5 block truncate font-mono text-[11px] text-foreground-muted",
|
|
86
|
+
children: techId
|
|
87
|
+
}),
|
|
88
|
+
model.byoConnectionLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
89
|
+
className: (0, index_cjs_namespaceObject.cn)('block max-w-full truncate text-xs text-foreground-muted', !techId && 'mt-0.5'),
|
|
90
|
+
children: model.byoConnectionLabel
|
|
91
|
+
})
|
|
92
|
+
]
|
|
93
|
+
}),
|
|
94
|
+
(contextLabel ?? meta) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
95
|
+
className: "flex shrink-0 flex-col items-end gap-1 pt-px @max-[380px]:hidden",
|
|
96
|
+
onClick: (e)=>e.stopPropagation(),
|
|
97
|
+
children: [
|
|
98
|
+
contextLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
99
|
+
className: "text-[11px] leading-tight text-foreground-muted",
|
|
100
|
+
children: contextLabel
|
|
101
|
+
}),
|
|
102
|
+
meta
|
|
103
|
+
]
|
|
104
|
+
}),
|
|
105
|
+
rowActions && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
106
|
+
className: "flex shrink-0 items-center gap-0.5 pt-px text-foreground-muted",
|
|
107
|
+
onClick: (e)=>e.stopPropagation(),
|
|
108
|
+
children: rowActions
|
|
109
|
+
})
|
|
110
|
+
]
|
|
111
|
+
});
|
|
112
|
+
};
|
|
113
|
+
const ModelOptionRow = /*#__PURE__*/ external_react_namespaceObject.memo(ModelOptionRowInner);
|
|
114
|
+
ModelOptionRow.displayName = 'ModelOptionRow';
|
|
115
|
+
function defaultRowActions(model, options = {}) {
|
|
116
|
+
const { labels = external_labels_cjs_namespaceObject.DEFAULT_MODEL_PICKER_LABELS, onEdit, onDelete } = options;
|
|
117
|
+
if (!onEdit && !onDelete) return null;
|
|
118
|
+
if (!(0, external_utils_cjs_namespaceObject.isByoModel)(model)) return null;
|
|
119
|
+
const editTitle = labels.editConfiguration;
|
|
120
|
+
const deleteTitle = labels.deleteConfiguration;
|
|
121
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.TooltipProvider, {
|
|
122
|
+
children: [
|
|
123
|
+
onEdit && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
|
|
124
|
+
children: [
|
|
125
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
|
|
126
|
+
asChild: true,
|
|
127
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
|
|
128
|
+
"aria-label": editTitle,
|
|
129
|
+
className: "cursor-pointer rounded p-1 text-inherit hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
|
|
130
|
+
onClick: ()=>onEdit(model),
|
|
131
|
+
tabIndex: -1,
|
|
132
|
+
type: "button",
|
|
133
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Pencil, {
|
|
134
|
+
className: "size-3.5"
|
|
135
|
+
})
|
|
136
|
+
})
|
|
137
|
+
}),
|
|
138
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
|
|
139
|
+
children: editTitle
|
|
140
|
+
})
|
|
141
|
+
]
|
|
142
|
+
}),
|
|
143
|
+
onDelete && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_tooltip_cjs_namespaceObject.Tooltip, {
|
|
144
|
+
children: [
|
|
145
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipTrigger, {
|
|
146
|
+
asChild: true,
|
|
147
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
|
|
148
|
+
"aria-label": deleteTitle,
|
|
149
|
+
className: "cursor-pointer rounded p-1 text-inherit hover:bg-surface-hover focus-visible:ring-2 focus-visible:ring-ring focus-visible:outline-none",
|
|
150
|
+
onClick: ()=>onDelete(model),
|
|
151
|
+
tabIndex: -1,
|
|
152
|
+
type: "button",
|
|
153
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.Trash2, {
|
|
154
|
+
className: "size-3.5"
|
|
155
|
+
})
|
|
156
|
+
})
|
|
157
|
+
}),
|
|
158
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_tooltip_cjs_namespaceObject.TooltipContent, {
|
|
159
|
+
children: deleteTitle
|
|
160
|
+
})
|
|
161
|
+
]
|
|
162
|
+
})
|
|
163
|
+
]
|
|
164
|
+
});
|
|
165
|
+
}
|
|
166
|
+
exports.DENSE_OPTION_HEIGHT = __webpack_exports__.DENSE_OPTION_HEIGHT;
|
|
167
|
+
exports.FULL_OPTION_HEIGHT = __webpack_exports__.FULL_OPTION_HEIGHT;
|
|
168
|
+
exports.ModelOptionRow = __webpack_exports__.ModelOptionRow;
|
|
169
|
+
exports.defaultRowActions = __webpack_exports__.defaultRowActions;
|
|
170
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
171
|
+
"DENSE_OPTION_HEIGHT",
|
|
172
|
+
"FULL_OPTION_HEIGHT",
|
|
173
|
+
"ModelOptionRow",
|
|
174
|
+
"defaultRowActions"
|
|
175
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
176
|
+
Object.defineProperty(exports, '__esModule', {
|
|
177
|
+
value: true
|
|
178
|
+
});
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type ModelPickerLabels } from '../labels';
|
|
3
|
+
import type { DiscoveryModel } from '../types';
|
|
4
|
+
import { type DeriveModelTagsContext } from '../utils';
|
|
5
|
+
export interface ModelOptionRowProps {
|
|
6
|
+
model: DiscoveryModel;
|
|
7
|
+
/**
|
|
8
|
+
* Position of this row in the flat option list. Passed back through
|
|
9
|
+
* `onActivate` so the row's handlers stay referentially stable — the
|
|
10
|
+
* key to `React.memo` skipping re-renders of untouched rows.
|
|
11
|
+
*/
|
|
12
|
+
index: number;
|
|
13
|
+
active: boolean;
|
|
14
|
+
selected: boolean;
|
|
15
|
+
/**
|
|
16
|
+
* Called with the row's model on click. Pass a stable reference
|
|
17
|
+
* (e.g. the `choose` callback from `useModelPickerState`) so
|
|
18
|
+
* memoization holds.
|
|
19
|
+
*/
|
|
20
|
+
onSelect: (model: DiscoveryModel) => void;
|
|
21
|
+
/**
|
|
22
|
+
* Called with the row's index on pointer-enter (drives the keyboard
|
|
23
|
+
* active-row highlight). Pass a stable reference.
|
|
24
|
+
*/
|
|
25
|
+
onActivate?: (index: number) => void;
|
|
26
|
+
/**
|
|
27
|
+
* Context forwarded to `deriveModelTags`. Carries `homeRegion`,
|
|
28
|
+
* `recommendedModelIds` / `previewModelIds` (Model Hub overrides),
|
|
29
|
+
* `badgesFor`, `customTagsFor`, and `labels`.
|
|
30
|
+
*/
|
|
31
|
+
tagContext?: DeriveModelTagsContext;
|
|
32
|
+
/**
|
|
33
|
+
* Variant lookup for tag kinds the design system doesn't know about.
|
|
34
|
+
* Forwarded straight to `<ModelTagChip>`. Built-in kinds keep their
|
|
35
|
+
* default variant unless explicitly overridden here.
|
|
36
|
+
*/
|
|
37
|
+
tagVariants?: Record<string, string>;
|
|
38
|
+
/**
|
|
39
|
+
* Right-aligned actions renderer, called with the row's model.
|
|
40
|
+
* Return `null` to suppress actions for a given row. When omitted,
|
|
41
|
+
* no actions render (the standalone `defaultRowActions` needs an
|
|
42
|
+
* `onEdit` handler the row cannot invent).
|
|
43
|
+
*/
|
|
44
|
+
renderActions?: (model: DiscoveryModel) => React.ReactNode;
|
|
45
|
+
/**
|
|
46
|
+
* Extra meta renderer (below the context line in the right column).
|
|
47
|
+
* Use for cost bars, latency badges, etc.
|
|
48
|
+
*/
|
|
49
|
+
renderMeta?: (model: DiscoveryModel) => React.ReactNode;
|
|
50
|
+
/**
|
|
51
|
+
* Reduces row height + font sizes for tight surfaces (chat input
|
|
52
|
+
* footers, narrow side panels). The stock picker doesn't use this;
|
|
53
|
+
* kept for teams composing their own pickers from primitives.
|
|
54
|
+
*/
|
|
55
|
+
dense?: boolean;
|
|
56
|
+
/**
|
|
57
|
+
* Tag kinds to hide from chip rendering. Tags are still derived; this
|
|
58
|
+
* only affects display.
|
|
59
|
+
*/
|
|
60
|
+
hideTagKinds?: readonly string[];
|
|
61
|
+
/**
|
|
62
|
+
* Stable DOM id assigned to the row. Used by the search input's
|
|
63
|
+
* `aria-activedescendant` so screen readers announce the highlighted
|
|
64
|
+
* row while keyboard focus stays on the input.
|
|
65
|
+
*/
|
|
66
|
+
id?: string;
|
|
67
|
+
'data-testid'?: string;
|
|
68
|
+
}
|
|
69
|
+
declare const FULL_OPTION_HEIGHT = 64;
|
|
70
|
+
declare const DENSE_OPTION_HEIGHT = 44;
|
|
71
|
+
export declare const ModelOptionRow: React.NamedExoticComponent<ModelOptionRowProps>;
|
|
72
|
+
/**
|
|
73
|
+
* Default row-actions renderer: edit (and optionally delete) icon
|
|
74
|
+
* buttons for BYO models. Exported so consumers can fall back to it
|
|
75
|
+
* when overriding row actions selectively (e.g. add a "Set default"
|
|
76
|
+
* action without losing edit).
|
|
77
|
+
*
|
|
78
|
+
* Renders nothing without a handler — an action button that does
|
|
79
|
+
* nothing is worse than no button. Admin-gated by default: the picker
|
|
80
|
+
* only calls this when `canManageByo` is true. Standalone consumers
|
|
81
|
+
* should gate the call themselves before passing the result into
|
|
82
|
+
* `renderActions`.
|
|
83
|
+
*/
|
|
84
|
+
export declare function defaultRowActions(model: DiscoveryModel, options?: {
|
|
85
|
+
/** Strings for the action tooltips. Defaults to English. */
|
|
86
|
+
labels?: ModelPickerLabels;
|
|
87
|
+
/** Edit activation — the picker navigates to the configuration page. */
|
|
88
|
+
onEdit?: (model: DiscoveryModel) => void;
|
|
89
|
+
/**
|
|
90
|
+
* Delete activation — optional. When provided, a delete icon renders
|
|
91
|
+
* alongside edit on BYO rows.
|
|
92
|
+
*/
|
|
93
|
+
onDelete?: (model: DiscoveryModel) => void;
|
|
94
|
+
}): React.ReactNode;
|
|
95
|
+
export { DENSE_OPTION_HEIGHT, FULL_OPTION_HEIGHT };
|