@uipath/apollo-react 4.20.0-pr644.f72be25 → 4.21.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/canvas/components/AddNodePanel/AddNodePanel.cjs +3 -2
- package/dist/canvas/components/AddNodePanel/AddNodePanel.d.ts.map +1 -1
- package/dist/canvas/components/AddNodePanel/AddNodePanel.js +3 -2
- package/dist/canvas/components/AddNodePanel/AddNodePanel.types.d.ts +2 -1
- package/dist/canvas/components/AddNodePanel/AddNodePanel.types.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/ListView.cjs +25 -34
- package/dist/canvas/components/Toolbox/ListView.d.ts +1 -0
- package/dist/canvas/components/Toolbox/ListView.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/ListView.js +26 -35
- package/dist/canvas/components/Toolbox/ListView.styles.cjs +0 -18
- package/dist/canvas/components/Toolbox/ListView.styles.d.ts +0 -4
- package/dist/canvas/components/Toolbox/ListView.styles.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/ListView.styles.js +1 -16
- package/dist/canvas/components/Toolbox/Toolbox.cjs +9 -1
- package/dist/canvas/components/Toolbox/Toolbox.d.ts +5 -1
- package/dist/canvas/components/Toolbox/Toolbox.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/Toolbox.js +9 -1
- package/dist/canvas/styles/tailwind.canvas.css +1 -1
- package/package.json +2 -2
|
@@ -31,7 +31,7 @@ const external_react_namespaceObject = require("react");
|
|
|
31
31
|
const index_cjs_namespaceObject = require("../../core/index.cjs");
|
|
32
32
|
const external_hooks_index_cjs_namespaceObject = require("../../hooks/index.cjs");
|
|
33
33
|
const external_Toolbox_index_cjs_namespaceObject = require("../Toolbox/index.cjs");
|
|
34
|
-
const AddNodePanel_AddNodePanel = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ onNodeSelect, onClose, onSearch, onNodeHover, items, title, loading }) {
|
|
34
|
+
const AddNodePanel_AddNodePanel = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ onNodeSelect, onClose, onSearch, onNodeHover, items, title, loading, renderEmptyState }) {
|
|
35
35
|
const registry = (0, index_cjs_namespaceObject.useOptionalNodeTypeRegistry)();
|
|
36
36
|
const { previewNodeConnectionInfo } = (0, external_hooks_index_cjs_namespaceObject.usePreviewNode)();
|
|
37
37
|
const nodeListOptions = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
@@ -75,7 +75,8 @@ const AddNodePanel_AddNodePanel = /*#__PURE__*/ (0, external_react_namespaceObje
|
|
|
75
75
|
onItemSelect: handleNodeListItemSelect,
|
|
76
76
|
onSearch: handleSearch,
|
|
77
77
|
onClose: onClose,
|
|
78
|
-
onItemHover: onNodeHover
|
|
78
|
+
onItemHover: onNodeHover,
|
|
79
|
+
renderEmptyState: renderEmptyState
|
|
79
80
|
});
|
|
80
81
|
});
|
|
81
82
|
exports.AddNodePanel = __webpack_exports__.AddNodePanel;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddNodePanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAU9D,eAAO,MAAM,YAAY,
|
|
1
|
+
{"version":3,"file":"AddNodePanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAU9D,eAAO,MAAM,YAAY,yDA6EvB,CAAC"}
|
|
@@ -3,7 +3,7 @@ import { memo, useCallback, useMemo } from "react";
|
|
|
3
3
|
import { useOptionalNodeTypeRegistry } from "../../core/index.js";
|
|
4
4
|
import { usePreviewNode } from "../../hooks/index.js";
|
|
5
5
|
import { Toolbox } from "../Toolbox/index.js";
|
|
6
|
-
const AddNodePanel_AddNodePanel = /*#__PURE__*/ memo(function({ onNodeSelect, onClose, onSearch, onNodeHover, items, title, loading }) {
|
|
6
|
+
const AddNodePanel_AddNodePanel = /*#__PURE__*/ memo(function({ onNodeSelect, onClose, onSearch, onNodeHover, items, title, loading, renderEmptyState }) {
|
|
7
7
|
const registry = useOptionalNodeTypeRegistry();
|
|
8
8
|
const { previewNodeConnectionInfo } = usePreviewNode();
|
|
9
9
|
const nodeListOptions = useMemo(()=>{
|
|
@@ -47,7 +47,8 @@ const AddNodePanel_AddNodePanel = /*#__PURE__*/ memo(function({ onNodeSelect, on
|
|
|
47
47
|
onItemSelect: handleNodeListItemSelect,
|
|
48
48
|
onSearch: handleSearch,
|
|
49
49
|
onClose: onClose,
|
|
50
|
-
onItemHover: onNodeHover
|
|
50
|
+
onItemHover: onNodeHover,
|
|
51
|
+
renderEmptyState: renderEmptyState
|
|
51
52
|
});
|
|
52
53
|
});
|
|
53
54
|
export { AddNodePanel_AddNodePanel as AddNodePanel };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type { ListItem } from '../Toolbox';
|
|
1
|
+
import type { ListItem, ToolboxEmptyStateRenderer } from '../Toolbox';
|
|
2
2
|
export interface NodeItemData {
|
|
3
3
|
type: string;
|
|
4
4
|
version?: string;
|
|
@@ -12,5 +12,6 @@ export interface AddNodePanelProps {
|
|
|
12
12
|
title?: string;
|
|
13
13
|
items?: ListItem[];
|
|
14
14
|
loading?: boolean;
|
|
15
|
+
renderEmptyState?: ToolboxEmptyStateRenderer<NodeItemData>;
|
|
15
16
|
}
|
|
16
17
|
//# sourceMappingURL=AddNodePanel.types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AddNodePanel.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"AddNodePanel.types.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/AddNodePanel/AddNodePanel.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC;AAEtE,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,iBAAiB;IAChC,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACvC,QAAQ,CAAC,EAAE,CACT,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,YAAY,EAAE,QAAQ,EAAE,KACrB,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;IAKf,KAAK,CAAC,EAAE,QAAQ,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAOlB,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,YAAY,CAAC,CAAC;CAC5D"}
|
|
@@ -36,13 +36,6 @@ const CanvasThemeContext_cjs_namespaceObject = require("../BaseCanvas/CanvasThem
|
|
|
36
36
|
const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
|
|
37
37
|
const external_ListView_styles_cjs_namespaceObject = require("./ListView.styles.cjs");
|
|
38
38
|
const DEFAULT_SKELETON_COUNT = 3;
|
|
39
|
-
function getInitial(name) {
|
|
40
|
-
const trimmed = name.trim();
|
|
41
|
-
if (!trimmed) return '?';
|
|
42
|
-
return [
|
|
43
|
-
...trimmed
|
|
44
|
-
][0] ?? '?';
|
|
45
|
-
}
|
|
46
39
|
function buildRenderedItems(items, enableSections, loadingSkeleton) {
|
|
47
40
|
const result = [];
|
|
48
41
|
const skeletonConfig = 'object' == typeof loadingSkeleton ? loadingSkeleton : loadingSkeleton ? {} : void 0;
|
|
@@ -169,12 +162,7 @@ const ListViewRow = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(({ in
|
|
|
169
162
|
icon: item.icon.name,
|
|
170
163
|
size: 24
|
|
171
164
|
}),
|
|
172
|
-
item.icon?.Component && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(item.icon.Component, {})
|
|
173
|
-
!item.icon?.url && !item.icon?.name && !item.icon?.Component && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.InitialsBadge, {
|
|
174
|
-
"aria-hidden": "true",
|
|
175
|
-
"data-testid": "list-item-initials-badge",
|
|
176
|
-
children: getInitial(item.name)
|
|
177
|
-
})
|
|
165
|
+
item.icon?.Component && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(item.icon.Component, {})
|
|
178
166
|
]
|
|
179
167
|
}),
|
|
180
168
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
|
|
@@ -231,7 +219,7 @@ const ListItemSkeleton = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)
|
|
|
231
219
|
})
|
|
232
220
|
]
|
|
233
221
|
});
|
|
234
|
-
const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, onScroll, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true, loadingSkeleton }, ref) {
|
|
222
|
+
const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, onScroll, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', renderEmptyState, isLoading = false, enableSections = true, loadingSkeleton }, ref) {
|
|
235
223
|
const { isDarkMode } = (0, CanvasThemeContext_cjs_namespaceObject.useCanvasTheme)();
|
|
236
224
|
const activeSkeleton = loadingSkeleton ?? (isLoading && 0 === items.length ? true : void 0);
|
|
237
225
|
const renderedItems = (0, external_react_namespaceObject.useMemo)(()=>buildRenderedItems(items, enableSections, activeSkeleton), [
|
|
@@ -259,26 +247,29 @@ const ListViewInner = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRe
|
|
|
259
247
|
onItemClick,
|
|
260
248
|
onItemHover
|
|
261
249
|
]);
|
|
262
|
-
if (0 === renderedItems.length)
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
250
|
+
if (0 === renderedItems.length) {
|
|
251
|
+
if (renderEmptyState) return renderEmptyState();
|
|
252
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Column, {
|
|
253
|
+
align: "center",
|
|
254
|
+
justify: "center",
|
|
255
|
+
flex: 1,
|
|
256
|
+
gap: 10,
|
|
257
|
+
style: {
|
|
258
|
+
minHeight: '250px'
|
|
259
|
+
},
|
|
260
|
+
children: [
|
|
261
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_utils_index_cjs_namespaceObject.CanvasIcon, {
|
|
262
|
+
icon: emptyStateIcon,
|
|
263
|
+
size: 48,
|
|
264
|
+
color: "var(--canvas-foreground-de-emp)"
|
|
265
|
+
}),
|
|
266
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
267
|
+
className: "text-xs text-foreground-muted",
|
|
268
|
+
children: emptyStateMessage
|
|
269
|
+
})
|
|
270
|
+
]
|
|
271
|
+
});
|
|
272
|
+
}
|
|
282
273
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_ListView_styles_cjs_namespaceObject.StyledList, {
|
|
283
274
|
id: "toolbox-listbox",
|
|
284
275
|
role: "listbox",
|
|
@@ -53,6 +53,7 @@ interface ListViewProps<T extends ListItem> {
|
|
|
53
53
|
onScroll?: React.UIEventHandler<HTMLDivElement>;
|
|
54
54
|
emptyStateMessage?: string;
|
|
55
55
|
emptyStateIcon?: string;
|
|
56
|
+
renderEmptyState?: () => React.ReactElement | null;
|
|
56
57
|
isLoading?: boolean;
|
|
57
58
|
enableSections?: boolean;
|
|
58
59
|
loadingSkeleton?: boolean | ChildrenLoadingSpec;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,iBAAiB,EAAqB,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.tsx"],"names":[],"mappings":"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"}
|
|
@@ -5,15 +5,8 @@ import { Skeleton } from "@uipath/apollo-wind";
|
|
|
5
5
|
import { forwardRef, memo, useCallback, useImperativeHandle, useMemo } from "react";
|
|
6
6
|
import { useCanvasTheme } from "../BaseCanvas/CanvasThemeContext.js";
|
|
7
7
|
import { CanvasTooltip } from "../CanvasTooltip.js";
|
|
8
|
-
import { IconContainer,
|
|
8
|
+
import { IconContainer, ListItemButton, SectionHeader, StyledList } from "./ListView.styles.js";
|
|
9
9
|
const DEFAULT_SKELETON_COUNT = 3;
|
|
10
|
-
function getInitial(name) {
|
|
11
|
-
const trimmed = name.trim();
|
|
12
|
-
if (!trimmed) return '?';
|
|
13
|
-
return [
|
|
14
|
-
...trimmed
|
|
15
|
-
][0] ?? '?';
|
|
16
|
-
}
|
|
17
10
|
function buildRenderedItems(items, enableSections, loadingSkeleton) {
|
|
18
11
|
const result = [];
|
|
19
12
|
const skeletonConfig = 'object' == typeof loadingSkeleton ? loadingSkeleton : loadingSkeleton ? {} : void 0;
|
|
@@ -140,12 +133,7 @@ const ListViewRow = /*#__PURE__*/ memo(({ index, style, ariaAttributes, rendered
|
|
|
140
133
|
icon: item.icon.name,
|
|
141
134
|
size: 24
|
|
142
135
|
}),
|
|
143
|
-
item.icon?.Component && /*#__PURE__*/ jsx(item.icon.Component, {})
|
|
144
|
-
!item.icon?.url && !item.icon?.name && !item.icon?.Component && /*#__PURE__*/ jsx(InitialsBadge, {
|
|
145
|
-
"aria-hidden": "true",
|
|
146
|
-
"data-testid": "list-item-initials-badge",
|
|
147
|
-
children: getInitial(item.name)
|
|
148
|
-
})
|
|
136
|
+
item.icon?.Component && /*#__PURE__*/ jsx(item.icon.Component, {})
|
|
149
137
|
]
|
|
150
138
|
}),
|
|
151
139
|
/*#__PURE__*/ jsxs(Column, {
|
|
@@ -202,7 +190,7 @@ const ListItemSkeleton = ()=>/*#__PURE__*/ jsxs("div", {
|
|
|
202
190
|
})
|
|
203
191
|
]
|
|
204
192
|
});
|
|
205
|
-
const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, onScroll, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', isLoading = false, enableSections = true, loadingSkeleton }, ref) {
|
|
193
|
+
const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -1, listRef, onItemClick, onItemHover, onScroll, emptyStateMessage = 'No items found', emptyStateIcon = 'search-x', renderEmptyState, isLoading = false, enableSections = true, loadingSkeleton }, ref) {
|
|
206
194
|
const { isDarkMode } = useCanvasTheme();
|
|
207
195
|
const activeSkeleton = loadingSkeleton ?? (isLoading && 0 === items.length ? true : void 0);
|
|
208
196
|
const renderedItems = useMemo(()=>buildRenderedItems(items, enableSections, activeSkeleton), [
|
|
@@ -230,26 +218,29 @@ const ListViewInner = /*#__PURE__*/ forwardRef(function({ items, activeIndex = -
|
|
|
230
218
|
onItemClick,
|
|
231
219
|
onItemHover
|
|
232
220
|
]);
|
|
233
|
-
if (0 === renderedItems.length)
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
221
|
+
if (0 === renderedItems.length) {
|
|
222
|
+
if (renderEmptyState) return renderEmptyState();
|
|
223
|
+
return /*#__PURE__*/ jsxs(Column, {
|
|
224
|
+
align: "center",
|
|
225
|
+
justify: "center",
|
|
226
|
+
flex: 1,
|
|
227
|
+
gap: 10,
|
|
228
|
+
style: {
|
|
229
|
+
minHeight: '250px'
|
|
230
|
+
},
|
|
231
|
+
children: [
|
|
232
|
+
/*#__PURE__*/ jsx(CanvasIcon, {
|
|
233
|
+
icon: emptyStateIcon,
|
|
234
|
+
size: 48,
|
|
235
|
+
color: "var(--canvas-foreground-de-emp)"
|
|
236
|
+
}),
|
|
237
|
+
/*#__PURE__*/ jsx("span", {
|
|
238
|
+
className: "text-xs text-foreground-muted",
|
|
239
|
+
children: emptyStateMessage
|
|
240
|
+
})
|
|
241
|
+
]
|
|
242
|
+
});
|
|
243
|
+
}
|
|
253
244
|
return /*#__PURE__*/ jsx(StyledList, {
|
|
254
245
|
id: "toolbox-listbox",
|
|
255
246
|
role: "listbox",
|
|
@@ -33,7 +33,6 @@ var __webpack_require__ = {};
|
|
|
33
33
|
var __webpack_exports__ = {};
|
|
34
34
|
__webpack_require__.r(__webpack_exports__);
|
|
35
35
|
__webpack_require__.d(__webpack_exports__, {
|
|
36
|
-
InitialsBadge: ()=>InitialsBadge,
|
|
37
36
|
IconContainer: ()=>IconContainer,
|
|
38
37
|
StyledList: ()=>StyledList,
|
|
39
38
|
SectionHeader: ()=>SectionHeader,
|
|
@@ -93,21 +92,6 @@ const IconContainer = styled_default().div`
|
|
|
93
92
|
// Icons should show below the inset outline
|
|
94
93
|
z-index: -1;
|
|
95
94
|
`;
|
|
96
|
-
const InitialsBadge = styled_default().span`
|
|
97
|
-
display: flex;
|
|
98
|
-
width: 24px;
|
|
99
|
-
height: 24px;
|
|
100
|
-
align-items: center;
|
|
101
|
-
justify-content: center;
|
|
102
|
-
border-radius: 50%;
|
|
103
|
-
background: var(--canvas-primary);
|
|
104
|
-
color: #ffffff;
|
|
105
|
-
font-size: 12px;
|
|
106
|
-
font-weight: 800;
|
|
107
|
-
line-height: 1;
|
|
108
|
-
text-transform: uppercase;
|
|
109
|
-
user-select: none;
|
|
110
|
-
`;
|
|
111
95
|
const StyledList = styled_default()(external_react_window_namespaceObject.List)`
|
|
112
96
|
&::-webkit-scrollbar {
|
|
113
97
|
width: 6px;
|
|
@@ -144,13 +128,11 @@ const StyledList = styled_default()(external_react_window_namespaceObject.List)`
|
|
|
144
128
|
}
|
|
145
129
|
`;
|
|
146
130
|
exports.IconContainer = __webpack_exports__.IconContainer;
|
|
147
|
-
exports.InitialsBadge = __webpack_exports__.InitialsBadge;
|
|
148
131
|
exports.ListItemButton = __webpack_exports__.ListItemButton;
|
|
149
132
|
exports.SectionHeader = __webpack_exports__.SectionHeader;
|
|
150
133
|
exports.StyledList = __webpack_exports__.StyledList;
|
|
151
134
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
152
135
|
"IconContainer",
|
|
153
|
-
"InitialsBadge",
|
|
154
136
|
"ListItemButton",
|
|
155
137
|
"SectionHeader",
|
|
156
138
|
"StyledList"
|
|
@@ -12,9 +12,5 @@ export declare const IconContainer: import("@emotion/styled").StyledComponent<{
|
|
|
12
12
|
} & {
|
|
13
13
|
bgColor?: string;
|
|
14
14
|
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
15
|
-
export declare const InitialsBadge: import("@emotion/styled").StyledComponent<{
|
|
16
|
-
theme?: import("@emotion/react").Theme;
|
|
17
|
-
as?: React.ElementType;
|
|
18
|
-
}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
19
15
|
export declare const StyledList: typeof List;
|
|
20
16
|
//# sourceMappingURL=ListView.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListView.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,eAAO,MAAM,aAAa;;;yGAazB,CAAC;AAEF,eAAO,MAAM,cAAc;;UAqB1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cAA0B,MAAM;yGAazD,CAAC;
|
|
1
|
+
{"version":3,"file":"ListView.styles.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/ListView.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAEpC,eAAO,MAAM,aAAa;;;yGAazB,CAAC;AAEF,eAAO,MAAM,cAAc;;UAqB1B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;cAA0B,MAAM;yGAazD,CAAC;AAEF,eAAO,MAAM,UAAU,EAkClB,OAAO,IAAI,CAAC"}
|
|
@@ -51,21 +51,6 @@ const IconContainer = styled.div`
|
|
|
51
51
|
// Icons should show below the inset outline
|
|
52
52
|
z-index: -1;
|
|
53
53
|
`;
|
|
54
|
-
const InitialsBadge = styled.span`
|
|
55
|
-
display: flex;
|
|
56
|
-
width: 24px;
|
|
57
|
-
height: 24px;
|
|
58
|
-
align-items: center;
|
|
59
|
-
justify-content: center;
|
|
60
|
-
border-radius: 50%;
|
|
61
|
-
background: var(--canvas-primary);
|
|
62
|
-
color: #ffffff;
|
|
63
|
-
font-size: 12px;
|
|
64
|
-
font-weight: 800;
|
|
65
|
-
line-height: 1;
|
|
66
|
-
text-transform: uppercase;
|
|
67
|
-
user-select: none;
|
|
68
|
-
`;
|
|
69
54
|
const StyledList = styled(List)`
|
|
70
55
|
&::-webkit-scrollbar {
|
|
71
56
|
width: 6px;
|
|
@@ -101,4 +86,4 @@ const StyledList = styled(List)`
|
|
|
101
86
|
}
|
|
102
87
|
}
|
|
103
88
|
`;
|
|
104
|
-
export { IconContainer,
|
|
89
|
+
export { IconContainer, ListItemButton, SectionHeader, StyledList };
|
|
@@ -81,7 +81,7 @@ function searchLeafItems(items, query) {
|
|
|
81
81
|
}
|
|
82
82
|
return results;
|
|
83
83
|
}
|
|
84
|
-
function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title, initialItems, loading, fullWidth = false, fullHeight = false, quickActions }) {
|
|
84
|
+
function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title, initialItems, loading, fullWidth = false, fullHeight = false, quickActions, renderEmptyState }) {
|
|
85
85
|
const [items, setItems] = (0, external_react_namespaceObject.useState)(initialItems);
|
|
86
86
|
const [search, setSearch] = (0, external_react_namespaceObject.useState)('');
|
|
87
87
|
const [searchLoading, setSearchLoading] = (0, external_react_namespaceObject.useState)(false);
|
|
@@ -108,6 +108,13 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
108
108
|
const isSearching = (0, external_react_namespaceObject.useMemo)(()=>search.length > 0, [
|
|
109
109
|
search
|
|
110
110
|
]);
|
|
111
|
+
const wrappedRenderEmptyState = (0, external_react_namespaceObject.useMemo)(()=>renderEmptyState && !isSearching ? ()=>renderEmptyState({
|
|
112
|
+
currentCategory: currentParentItem ?? void 0
|
|
113
|
+
}) : void 0, [
|
|
114
|
+
renderEmptyState,
|
|
115
|
+
isSearching,
|
|
116
|
+
currentParentItem
|
|
117
|
+
]);
|
|
111
118
|
const displayedItems = (0, external_react_namespaceObject.useMemo)(()=>isSearching && !isSearchingInitialItems ? searchedItems : items, [
|
|
112
119
|
isSearching,
|
|
113
120
|
isSearchingInitialItems,
|
|
@@ -455,6 +462,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
455
462
|
activeIndex: activeIndex,
|
|
456
463
|
listRef: listRef,
|
|
457
464
|
emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
|
|
465
|
+
renderEmptyState: wrappedRenderEmptyState,
|
|
458
466
|
onItemClick: handleItemSelect,
|
|
459
467
|
onItemHover: onItemHover,
|
|
460
468
|
onScroll: handleListScroll,
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { type ListItem } from './ListView';
|
|
2
2
|
import { type ToolboxQuickAction } from './QuickActionsRow';
|
|
3
|
+
export type ToolboxEmptyStateRenderer<T = any> = (ctx: {
|
|
4
|
+
currentCategory?: ListItem<T>;
|
|
5
|
+
}) => React.ReactElement | null;
|
|
3
6
|
export type ToolboxSearchHandler<T = any> = (query: string, isTopLevelSearch: boolean, { currentItems, category }: {
|
|
4
7
|
currentItems?: ListItem<T>[];
|
|
5
8
|
category?: string;
|
|
@@ -16,6 +19,7 @@ export interface ToolboxProps<T> {
|
|
|
16
19
|
onBack?: () => void;
|
|
17
20
|
onSearch?: ToolboxSearchHandler<T>;
|
|
18
21
|
quickActions?: ToolboxQuickAction[];
|
|
22
|
+
renderEmptyState?: ToolboxEmptyStateRenderer<T>;
|
|
19
23
|
}
|
|
20
|
-
export declare function Toolbox<T>({ onClose, onBack, onItemSelect, onSearch, onItemHover, title, initialItems, loading, fullWidth, fullHeight, quickActions, }: ToolboxProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
24
|
+
export declare function Toolbox<T>({ onClose, onBack, onItemSelect, onSearch, onItemHover, title, initialItems, loading, fullWidth, fullHeight, quickActions, renderEmptyState, }: ToolboxProps<T>): import("react/jsx-runtime").JSX.Element;
|
|
21
25
|
//# sourceMappingURL=Toolbox.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,KAAK,QAAQ,EAAkD,MAAM,YAAY,CAAC;AAC3F,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;
|
|
1
|
+
{"version":3,"file":"Toolbox.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Toolbox.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,KAAK,QAAQ,EAAkD,MAAM,YAAY,CAAC;AAC3F,OAAO,EAAmB,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AA+C7E,MAAM,MAAM,yBAAyB,CAAC,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG,EAAE;IACrD,eAAe,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC;CAC/B,KAAK,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAEhC,MAAM,MAAM,oBAAoB,CAAC,CAAC,GAAG,GAAG,IAAI,CAC1C,KAAK,EAAE,MAAM,EACb,gBAAgB,EAAE,OAAO,EACzB,EAAE,YAAY,EAAE,QAAQ,EAAE,EAAE;IAAE,YAAY,CAAC,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;CAAE,KAC5E,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,YAAY,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC;IAC1D,WAAW,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAC1C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAOnC,YAAY,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAOpC,gBAAgB,CAAC,EAAE,yBAAyB,CAAC,CAAC,CAAC,CAAC;CACjD;AAgDD,wBAAgB,OAAO,CAAC,CAAC,EAAE,EACzB,OAAO,EACP,MAAM,EACN,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,KAAK,EACL,YAAY,EACZ,OAAO,EACP,SAAiB,EACjB,UAAkB,EAClB,YAAY,EACZ,gBAAgB,GACjB,EAAE,YAAY,CAAC,CAAC,CAAC,2CA4gBjB"}
|
|
@@ -53,7 +53,7 @@ function searchLeafItems(items, query) {
|
|
|
53
53
|
}
|
|
54
54
|
return results;
|
|
55
55
|
}
|
|
56
|
-
function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title, initialItems, loading, fullWidth = false, fullHeight = false, quickActions }) {
|
|
56
|
+
function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title, initialItems, loading, fullWidth = false, fullHeight = false, quickActions, renderEmptyState }) {
|
|
57
57
|
const [items, setItems] = useState(initialItems);
|
|
58
58
|
const [search, setSearch] = useState('');
|
|
59
59
|
const [searchLoading, setSearchLoading] = useState(false);
|
|
@@ -80,6 +80,13 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
80
80
|
const isSearching = useMemo(()=>search.length > 0, [
|
|
81
81
|
search
|
|
82
82
|
]);
|
|
83
|
+
const wrappedRenderEmptyState = useMemo(()=>renderEmptyState && !isSearching ? ()=>renderEmptyState({
|
|
84
|
+
currentCategory: currentParentItem ?? void 0
|
|
85
|
+
}) : void 0, [
|
|
86
|
+
renderEmptyState,
|
|
87
|
+
isSearching,
|
|
88
|
+
currentParentItem
|
|
89
|
+
]);
|
|
83
90
|
const displayedItems = useMemo(()=>isSearching && !isSearchingInitialItems ? searchedItems : items, [
|
|
84
91
|
isSearching,
|
|
85
92
|
isSearchingInitialItems,
|
|
@@ -427,6 +434,7 @@ function Toolbox({ onClose, onBack, onItemSelect, onSearch, onItemHover, title,
|
|
|
427
434
|
activeIndex: activeIndex,
|
|
428
435
|
listRef: listRef,
|
|
429
436
|
emptyStateMessage: isSearching ? 'No matching nodes found' : 'No nodes found',
|
|
437
|
+
renderEmptyState: wrappedRenderEmptyState,
|
|
430
438
|
onItemClick: handleItemSelect,
|
|
431
439
|
onItemHover: onItemHover,
|
|
432
440
|
onScroll: handleListScroll,
|