@hitachivantara/uikit-react-lab 5.46.7 → 5.46.8
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/cjs/Flow/nodes/StickyNode.cjs +439 -0
- package/dist/cjs/index.cjs +2 -0
- package/dist/esm/Flow/nodes/StickyNode.js +439 -0
- package/dist/esm/index.js +2 -0
- package/dist/types/index.d.ts +17 -0
- package/package.json +6 -6
|
@@ -0,0 +1,439 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const react = require("react");
|
|
5
|
+
const css = require("@emotion/css");
|
|
6
|
+
const material = require("@mui/material");
|
|
7
|
+
const reactflow = require("reactflow");
|
|
8
|
+
const uikitReactCore = require("@hitachivantara/uikit-react-core");
|
|
9
|
+
const uikitReactIcons = require("@hitachivantara/uikit-react-icons");
|
|
10
|
+
const defaultData = {
|
|
11
|
+
title: "Sticky Note",
|
|
12
|
+
backgroundColor: uikitReactCore.theme.colors.warningSubtle,
|
|
13
|
+
borderColor: uikitReactCore.theme.colors.warningSubtle,
|
|
14
|
+
textColor: uikitReactCore.theme.colors.text,
|
|
15
|
+
hasShadow: true,
|
|
16
|
+
bold: false,
|
|
17
|
+
italic: false,
|
|
18
|
+
fontSize: 14,
|
|
19
|
+
expanded: true,
|
|
20
|
+
visible: true
|
|
21
|
+
};
|
|
22
|
+
const classes = {
|
|
23
|
+
root: css.css({
|
|
24
|
+
width: "100%",
|
|
25
|
+
height: "100%",
|
|
26
|
+
position: "relative",
|
|
27
|
+
display: "flex",
|
|
28
|
+
outline: "none"
|
|
29
|
+
}),
|
|
30
|
+
nodeToolbar: css.css({
|
|
31
|
+
backgroundColor: "transparent",
|
|
32
|
+
borderRadius: uikitReactCore.theme.radii.full,
|
|
33
|
+
top: 10
|
|
34
|
+
}),
|
|
35
|
+
buttonsContainer: css.css({
|
|
36
|
+
padding: uikitReactCore.theme.space.xs
|
|
37
|
+
}),
|
|
38
|
+
textAreaRoot: css.css({
|
|
39
|
+
flex: 1,
|
|
40
|
+
width: "100%",
|
|
41
|
+
border: "none",
|
|
42
|
+
background: "transparent",
|
|
43
|
+
outline: "none"
|
|
44
|
+
}),
|
|
45
|
+
textAreaInput: css.css({
|
|
46
|
+
resize: "none",
|
|
47
|
+
height: "100%",
|
|
48
|
+
width: "100%",
|
|
49
|
+
padding: uikitReactCore.theme.space.xs,
|
|
50
|
+
"&:focus-visible": {
|
|
51
|
+
outline: "none"
|
|
52
|
+
},
|
|
53
|
+
paddingRight: 32
|
|
54
|
+
}),
|
|
55
|
+
textAreaInputFolded: css.css({
|
|
56
|
+
resize: "none",
|
|
57
|
+
width: "100%",
|
|
58
|
+
padding: 0,
|
|
59
|
+
border: "none",
|
|
60
|
+
overflow: "hidden",
|
|
61
|
+
minHeight: "1.5rem",
|
|
62
|
+
height: "auto"
|
|
63
|
+
}),
|
|
64
|
+
colorConfig: css.css({
|
|
65
|
+
display: "flex",
|
|
66
|
+
flexDirection: "column",
|
|
67
|
+
gap: uikitReactCore.theme.space.sm
|
|
68
|
+
}),
|
|
69
|
+
folded: css.css({
|
|
70
|
+
width: 34,
|
|
71
|
+
height: 34
|
|
72
|
+
}),
|
|
73
|
+
expandButton: css.css({
|
|
74
|
+
position: "absolute",
|
|
75
|
+
top: uikitReactCore.theme.space.xxs,
|
|
76
|
+
right: uikitReactCore.theme.space.xxs
|
|
77
|
+
}),
|
|
78
|
+
fontSizes: css.css({
|
|
79
|
+
maxHeight: 160,
|
|
80
|
+
overflowY: "auto",
|
|
81
|
+
padding: uikitReactCore.theme.space.xs
|
|
82
|
+
})
|
|
83
|
+
};
|
|
84
|
+
const colorsToConfig = ["textColor", "backgroundColor", "borderColor"];
|
|
85
|
+
const fontSizes = [10, 11, 12, 14, 16, 20, 24, 32, 36, 40, 48, 64, 96, 128];
|
|
86
|
+
const StickyNode = ({
|
|
87
|
+
id,
|
|
88
|
+
selected,
|
|
89
|
+
data = {}
|
|
90
|
+
}) => {
|
|
91
|
+
const mergedData = react.useMemo(() => ({ ...defaultData, ...data }), [data]);
|
|
92
|
+
const [text, setText] = react.useState("");
|
|
93
|
+
const { setNodes } = reactflow.useReactFlow();
|
|
94
|
+
const [editing, setEditing] = react.useState(false);
|
|
95
|
+
const [toolbarVisible, setToolbarVisible] = react.useState(false);
|
|
96
|
+
const [colorsConfigOpen, setColorsConfigOpen] = react.useState(false);
|
|
97
|
+
const [fontSizeConfigOpen, setFontSizeConfigOpen] = react.useState(false);
|
|
98
|
+
const [fontSize, setFontSize] = react.useState(mergedData.fontSize ?? 14);
|
|
99
|
+
const colorConfigBtnRef = react.useRef(null);
|
|
100
|
+
const fontSizeConfigBtnRef = react.useRef(null);
|
|
101
|
+
const handleToggleBold = react.useCallback(() => {
|
|
102
|
+
setNodes(
|
|
103
|
+
(nds) => nds.map((node) => {
|
|
104
|
+
if (node.id === id) {
|
|
105
|
+
node.data = {
|
|
106
|
+
...node.data,
|
|
107
|
+
bold: !node.data?.bold
|
|
108
|
+
};
|
|
109
|
+
}
|
|
110
|
+
return node;
|
|
111
|
+
})
|
|
112
|
+
);
|
|
113
|
+
}, [setNodes, id]);
|
|
114
|
+
const handleToggleItalic = react.useCallback(() => {
|
|
115
|
+
setNodes(
|
|
116
|
+
(nds) => nds.map((node) => {
|
|
117
|
+
if (node.id === id) {
|
|
118
|
+
node.data = {
|
|
119
|
+
...node.data,
|
|
120
|
+
italic: !node.data?.italic
|
|
121
|
+
};
|
|
122
|
+
}
|
|
123
|
+
return node;
|
|
124
|
+
})
|
|
125
|
+
);
|
|
126
|
+
}, [setNodes, id]);
|
|
127
|
+
const handleChangeFontSize = react.useCallback(
|
|
128
|
+
(size) => {
|
|
129
|
+
setFontSize(size);
|
|
130
|
+
setNodes(
|
|
131
|
+
(nds) => nds.map((node) => {
|
|
132
|
+
if (node.id === id) {
|
|
133
|
+
node.data = {
|
|
134
|
+
...node.data,
|
|
135
|
+
fontSize: size
|
|
136
|
+
};
|
|
137
|
+
}
|
|
138
|
+
return node;
|
|
139
|
+
})
|
|
140
|
+
);
|
|
141
|
+
setFontSizeConfigOpen(false);
|
|
142
|
+
},
|
|
143
|
+
[setNodes, id]
|
|
144
|
+
);
|
|
145
|
+
const handleToggleExpand = react.useCallback(() => {
|
|
146
|
+
setNodes(
|
|
147
|
+
(nds) => nds.map((node) => {
|
|
148
|
+
if (node.id === id) {
|
|
149
|
+
node.data = {
|
|
150
|
+
...node.data,
|
|
151
|
+
expanded: !node.data?.expanded
|
|
152
|
+
};
|
|
153
|
+
}
|
|
154
|
+
return node;
|
|
155
|
+
})
|
|
156
|
+
);
|
|
157
|
+
}, [setNodes, id]);
|
|
158
|
+
const handleResetColors = react.useCallback(() => {
|
|
159
|
+
setNodes(
|
|
160
|
+
(nds) => nds.map((node) => {
|
|
161
|
+
if (node.id === id) {
|
|
162
|
+
node.data = {
|
|
163
|
+
...node.data,
|
|
164
|
+
backgroundColor: defaultData.backgroundColor,
|
|
165
|
+
borderColor: defaultData.borderColor,
|
|
166
|
+
textColor: defaultData.textColor,
|
|
167
|
+
hasShadow: defaultData.hasShadow
|
|
168
|
+
};
|
|
169
|
+
}
|
|
170
|
+
return node;
|
|
171
|
+
})
|
|
172
|
+
);
|
|
173
|
+
}, [setNodes, id]);
|
|
174
|
+
const handleDeleteSticky = react.useCallback(() => {
|
|
175
|
+
setNodes((nds) => nds.filter((node) => node.id !== id));
|
|
176
|
+
mergedData.onDelete?.();
|
|
177
|
+
}, [mergedData, setNodes, id]);
|
|
178
|
+
if (!mergedData.visible) return null;
|
|
179
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
180
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
181
|
+
material.Popover,
|
|
182
|
+
{
|
|
183
|
+
open: colorsConfigOpen,
|
|
184
|
+
anchorEl: colorConfigBtnRef.current,
|
|
185
|
+
onClose: () => {
|
|
186
|
+
setColorsConfigOpen(false);
|
|
187
|
+
setEditing(false);
|
|
188
|
+
},
|
|
189
|
+
anchorOrigin: {
|
|
190
|
+
vertical: "bottom",
|
|
191
|
+
horizontal: "left"
|
|
192
|
+
},
|
|
193
|
+
transformOrigin: {
|
|
194
|
+
vertical: "top",
|
|
195
|
+
horizontal: "left"
|
|
196
|
+
},
|
|
197
|
+
children: [
|
|
198
|
+
/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialogTitle, { children: "Customize Colors" }),
|
|
199
|
+
/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvDialogContent, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.colorConfig, children: [
|
|
200
|
+
colorsToConfig.map((c) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
201
|
+
uikitReactCore.HvColorPicker,
|
|
202
|
+
{
|
|
203
|
+
label: `${c.charAt(0).toUpperCase() + c.slice(1).replace("Color", " Color")}`,
|
|
204
|
+
value: mergedData[c] ?? "",
|
|
205
|
+
onChange: (color) => {
|
|
206
|
+
setNodes(
|
|
207
|
+
(nds) => nds.map((node) => {
|
|
208
|
+
if (node.id === id) {
|
|
209
|
+
node.data = {
|
|
210
|
+
...node.data,
|
|
211
|
+
[c]: color
|
|
212
|
+
};
|
|
213
|
+
}
|
|
214
|
+
return node;
|
|
215
|
+
})
|
|
216
|
+
);
|
|
217
|
+
}
|
|
218
|
+
},
|
|
219
|
+
c
|
|
220
|
+
)),
|
|
221
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
222
|
+
uikitReactCore.HvCheckBox,
|
|
223
|
+
{
|
|
224
|
+
label: "Drop Shadow",
|
|
225
|
+
defaultChecked: mergedData.hasShadow,
|
|
226
|
+
onChange: (_, checked) => {
|
|
227
|
+
setNodes(
|
|
228
|
+
(nds) => nds.map((node) => {
|
|
229
|
+
if (node.id === id) {
|
|
230
|
+
node.data = {
|
|
231
|
+
...node.data,
|
|
232
|
+
hasShadow: checked
|
|
233
|
+
};
|
|
234
|
+
}
|
|
235
|
+
return node;
|
|
236
|
+
})
|
|
237
|
+
);
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
),
|
|
241
|
+
/* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvButton, { variant: "secondarySubtle", onClick: handleResetColors, children: "Reset to defaults" })
|
|
242
|
+
] }) })
|
|
243
|
+
]
|
|
244
|
+
}
|
|
245
|
+
),
|
|
246
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
247
|
+
material.Popover,
|
|
248
|
+
{
|
|
249
|
+
open: fontSizeConfigOpen,
|
|
250
|
+
anchorEl: fontSizeConfigBtnRef.current,
|
|
251
|
+
onClose: () => {
|
|
252
|
+
setFontSizeConfigOpen(false);
|
|
253
|
+
setEditing(false);
|
|
254
|
+
},
|
|
255
|
+
anchorOrigin: {
|
|
256
|
+
vertical: "bottom",
|
|
257
|
+
horizontal: "right"
|
|
258
|
+
},
|
|
259
|
+
transformOrigin: {
|
|
260
|
+
vertical: "top",
|
|
261
|
+
horizontal: "right"
|
|
262
|
+
},
|
|
263
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
264
|
+
uikitReactCore.HvSelectionList,
|
|
265
|
+
{
|
|
266
|
+
className: classes.fontSizes,
|
|
267
|
+
value: fontSize,
|
|
268
|
+
onChange: (evt, newValue) => {
|
|
269
|
+
handleChangeFontSize(newValue);
|
|
270
|
+
},
|
|
271
|
+
children: fontSizes.map((size) => /* @__PURE__ */ jsxRuntime.jsx(uikitReactCore.HvListItem, { value: size, children: size }, size))
|
|
272
|
+
}
|
|
273
|
+
)
|
|
274
|
+
}
|
|
275
|
+
),
|
|
276
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
277
|
+
"div",
|
|
278
|
+
{
|
|
279
|
+
className: css.cx(
|
|
280
|
+
classes.root,
|
|
281
|
+
"nowheel",
|
|
282
|
+
!mergedData.expanded && classes.folded
|
|
283
|
+
),
|
|
284
|
+
style: {
|
|
285
|
+
backgroundColor: mergedData.backgroundColor ?? uikitReactCore.theme.colors.bgContainer,
|
|
286
|
+
boxShadow: mergedData.hasShadow ? "0 8px 12px rgba(65,65,65,0.25)" : "none",
|
|
287
|
+
border: mergedData.borderColor ? `1px solid ${mergedData.borderColor}` : "none",
|
|
288
|
+
fontSize: `${mergedData.fontSize ?? 14}px`,
|
|
289
|
+
lineHeight: `${mergedData.fontSize ?? 14}px`
|
|
290
|
+
},
|
|
291
|
+
children: [
|
|
292
|
+
mergedData.expanded && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
293
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
294
|
+
reactflow.NodeResizer,
|
|
295
|
+
{
|
|
296
|
+
isVisible: selected,
|
|
297
|
+
minWidth: 100,
|
|
298
|
+
minHeight: 75,
|
|
299
|
+
lineStyle: {
|
|
300
|
+
color: uikitReactCore.theme.colors.primary,
|
|
301
|
+
borderStyle: "solid"
|
|
302
|
+
},
|
|
303
|
+
handleStyle: {
|
|
304
|
+
width: 6,
|
|
305
|
+
height: 6,
|
|
306
|
+
border: `1px solid ${uikitReactCore.theme.colors.primary}`,
|
|
307
|
+
backgroundColor: mergedData.backgroundColor ?? "transparent",
|
|
308
|
+
borderRadius: uikitReactCore.theme.radii.full
|
|
309
|
+
}
|
|
310
|
+
}
|
|
311
|
+
),
|
|
312
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
313
|
+
reactflow.NodeToolbar,
|
|
314
|
+
{
|
|
315
|
+
isVisible: editing || toolbarVisible || selected,
|
|
316
|
+
position: reactflow.Position.Top,
|
|
317
|
+
className: classes.nodeToolbar,
|
|
318
|
+
onMouseEnter: () => setToolbarVisible(true),
|
|
319
|
+
onMouseLeave: () => setToolbarVisible(false),
|
|
320
|
+
children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.buttonsContainer, children: /* @__PURE__ */ jsxRuntime.jsxs(uikitReactCore.HvMultiButton, { children: [
|
|
321
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
322
|
+
uikitReactCore.HvIconButton,
|
|
323
|
+
{
|
|
324
|
+
"aria-label": "Font Size",
|
|
325
|
+
title: "Font Size",
|
|
326
|
+
ref: fontSizeConfigBtnRef,
|
|
327
|
+
onClick: () => {
|
|
328
|
+
setEditing(true);
|
|
329
|
+
setFontSizeConfigOpen(true);
|
|
330
|
+
},
|
|
331
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.FontSize, {})
|
|
332
|
+
}
|
|
333
|
+
),
|
|
334
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
335
|
+
uikitReactCore.HvIconButton,
|
|
336
|
+
{
|
|
337
|
+
"aria-label": "Bold",
|
|
338
|
+
title: "Bold",
|
|
339
|
+
selected: mergedData.bold,
|
|
340
|
+
onClick: handleToggleBold,
|
|
341
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Bold, {})
|
|
342
|
+
}
|
|
343
|
+
),
|
|
344
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
345
|
+
uikitReactCore.HvIconButton,
|
|
346
|
+
{
|
|
347
|
+
"aria-label": "Italic",
|
|
348
|
+
title: "Italic",
|
|
349
|
+
selected: mergedData.italic,
|
|
350
|
+
onClick: handleToggleItalic,
|
|
351
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Italic, {})
|
|
352
|
+
}
|
|
353
|
+
),
|
|
354
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
355
|
+
uikitReactCore.HvIconButton,
|
|
356
|
+
{
|
|
357
|
+
"aria-label": "Customize Colors",
|
|
358
|
+
title: "Customize Colors",
|
|
359
|
+
ref: colorConfigBtnRef,
|
|
360
|
+
onClick: () => {
|
|
361
|
+
setEditing(true);
|
|
362
|
+
setColorsConfigOpen(true);
|
|
363
|
+
},
|
|
364
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Palette, {})
|
|
365
|
+
}
|
|
366
|
+
),
|
|
367
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
368
|
+
uikitReactCore.HvIconButton,
|
|
369
|
+
{
|
|
370
|
+
"aria-label": "Delete",
|
|
371
|
+
title: "Delete",
|
|
372
|
+
onClick: handleDeleteSticky,
|
|
373
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Delete, {})
|
|
374
|
+
}
|
|
375
|
+
)
|
|
376
|
+
] }) })
|
|
377
|
+
}
|
|
378
|
+
),
|
|
379
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
380
|
+
"div",
|
|
381
|
+
{
|
|
382
|
+
onMouseEnter: () => setToolbarVisible(true),
|
|
383
|
+
onMouseLeave: () => setToolbarVisible(false),
|
|
384
|
+
className: classes.textAreaRoot,
|
|
385
|
+
children: [
|
|
386
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
387
|
+
uikitReactCore.HvIconButton,
|
|
388
|
+
{
|
|
389
|
+
className: classes.expandButton,
|
|
390
|
+
title: "Fold",
|
|
391
|
+
onClick: handleToggleExpand,
|
|
392
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.ActualSize, {})
|
|
393
|
+
}
|
|
394
|
+
),
|
|
395
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
396
|
+
"textarea",
|
|
397
|
+
{
|
|
398
|
+
id: `sticky-textarea-${id}`,
|
|
399
|
+
value: text || "",
|
|
400
|
+
onChange: (e) => setText(e.target.value),
|
|
401
|
+
className: classes.textAreaInput,
|
|
402
|
+
placeholder: "Type here...",
|
|
403
|
+
style: {
|
|
404
|
+
color: mergedData.textColor ?? uikitReactCore.theme.colors.text,
|
|
405
|
+
fontWeight: mergedData.bold ? "bold" : "normal",
|
|
406
|
+
fontStyle: mergedData.italic ? "italic" : "normal",
|
|
407
|
+
fontSize: mergedData.fontSize ?? "14px"
|
|
408
|
+
},
|
|
409
|
+
onFocus: () => setEditing(true),
|
|
410
|
+
onBlur: () => {
|
|
411
|
+
setEditing(false);
|
|
412
|
+
setColorsConfigOpen(false);
|
|
413
|
+
}
|
|
414
|
+
}
|
|
415
|
+
)
|
|
416
|
+
]
|
|
417
|
+
}
|
|
418
|
+
)
|
|
419
|
+
] }),
|
|
420
|
+
!mergedData.expanded && /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
421
|
+
uikitReactCore.HvIconButton,
|
|
422
|
+
{
|
|
423
|
+
title: /* @__PURE__ */ jsxRuntime.jsx(
|
|
424
|
+
"span",
|
|
425
|
+
{
|
|
426
|
+
style: { whiteSpace: "pre-wrap", wordBreak: "break-word" },
|
|
427
|
+
children: text
|
|
428
|
+
}
|
|
429
|
+
),
|
|
430
|
+
onClick: handleToggleExpand,
|
|
431
|
+
children: /* @__PURE__ */ jsxRuntime.jsx(uikitReactIcons.Fullscreen, {})
|
|
432
|
+
}
|
|
433
|
+
) })
|
|
434
|
+
]
|
|
435
|
+
}
|
|
436
|
+
)
|
|
437
|
+
] });
|
|
438
|
+
};
|
|
439
|
+
exports.StickyNode = StickyNode;
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -23,6 +23,7 @@ const Node_styles = require("./Flow/Node/Node.styles.cjs");
|
|
|
23
23
|
const Node = require("./Flow/Node/Node.cjs");
|
|
24
24
|
const DashboardNode_styles = require("./Flow/nodes/DashboardNode.styles.cjs");
|
|
25
25
|
const DashboardNode = require("./Flow/nodes/DashboardNode.cjs");
|
|
26
|
+
const StickyNode = require("./Flow/nodes/StickyNode.cjs");
|
|
26
27
|
const useFlowNode = require("./Flow/hooks/useFlowNode.cjs");
|
|
27
28
|
const useFlowContext = require("./Flow/hooks/useFlowContext.cjs");
|
|
28
29
|
const useFlowNodeMeta = require("./Flow/hooks/useFlowNodeMeta.cjs");
|
|
@@ -64,6 +65,7 @@ exports.flowNodeClasses = Node_styles.staticClasses;
|
|
|
64
65
|
exports.HvFlowNode = Node.HvFlowNode;
|
|
65
66
|
exports.hvDashboardNodeClasses = DashboardNode_styles.staticClasses;
|
|
66
67
|
exports.HvDashboardNode = DashboardNode.HvDashboardNode;
|
|
68
|
+
exports.StickyNode = StickyNode.StickyNode;
|
|
67
69
|
exports.useFlowInputNodes = useFlowNode.useFlowInputNodes;
|
|
68
70
|
exports.useFlowNode = useFlowNode.useFlowNode;
|
|
69
71
|
exports.useFlowNodeEdges = useFlowNode.useFlowNodeEdges;
|
|
@@ -0,0 +1,439 @@
|
|
|
1
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo, useState, useRef, useCallback } from "react";
|
|
3
|
+
import { css, cx } from "@emotion/css";
|
|
4
|
+
import { Popover } from "@mui/material";
|
|
5
|
+
import { useReactFlow, NodeResizer, NodeToolbar, Position } from "reactflow";
|
|
6
|
+
import { theme, HvDialogTitle, HvDialogContent, HvColorPicker, HvCheckBox, HvButton, HvSelectionList, HvListItem, HvMultiButton, HvIconButton } from "@hitachivantara/uikit-react-core";
|
|
7
|
+
import { FontSize, Bold, Italic, Palette, Delete, ActualSize, Fullscreen } from "@hitachivantara/uikit-react-icons";
|
|
8
|
+
const defaultData = {
|
|
9
|
+
title: "Sticky Note",
|
|
10
|
+
backgroundColor: theme.colors.warningSubtle,
|
|
11
|
+
borderColor: theme.colors.warningSubtle,
|
|
12
|
+
textColor: theme.colors.text,
|
|
13
|
+
hasShadow: true,
|
|
14
|
+
bold: false,
|
|
15
|
+
italic: false,
|
|
16
|
+
fontSize: 14,
|
|
17
|
+
expanded: true,
|
|
18
|
+
visible: true
|
|
19
|
+
};
|
|
20
|
+
const classes = {
|
|
21
|
+
root: css({
|
|
22
|
+
width: "100%",
|
|
23
|
+
height: "100%",
|
|
24
|
+
position: "relative",
|
|
25
|
+
display: "flex",
|
|
26
|
+
outline: "none"
|
|
27
|
+
}),
|
|
28
|
+
nodeToolbar: css({
|
|
29
|
+
backgroundColor: "transparent",
|
|
30
|
+
borderRadius: theme.radii.full,
|
|
31
|
+
top: 10
|
|
32
|
+
}),
|
|
33
|
+
buttonsContainer: css({
|
|
34
|
+
padding: theme.space.xs
|
|
35
|
+
}),
|
|
36
|
+
textAreaRoot: css({
|
|
37
|
+
flex: 1,
|
|
38
|
+
width: "100%",
|
|
39
|
+
border: "none",
|
|
40
|
+
background: "transparent",
|
|
41
|
+
outline: "none"
|
|
42
|
+
}),
|
|
43
|
+
textAreaInput: css({
|
|
44
|
+
resize: "none",
|
|
45
|
+
height: "100%",
|
|
46
|
+
width: "100%",
|
|
47
|
+
padding: theme.space.xs,
|
|
48
|
+
"&:focus-visible": {
|
|
49
|
+
outline: "none"
|
|
50
|
+
},
|
|
51
|
+
paddingRight: 32
|
|
52
|
+
}),
|
|
53
|
+
textAreaInputFolded: css({
|
|
54
|
+
resize: "none",
|
|
55
|
+
width: "100%",
|
|
56
|
+
padding: 0,
|
|
57
|
+
border: "none",
|
|
58
|
+
overflow: "hidden",
|
|
59
|
+
minHeight: "1.5rem",
|
|
60
|
+
height: "auto"
|
|
61
|
+
}),
|
|
62
|
+
colorConfig: css({
|
|
63
|
+
display: "flex",
|
|
64
|
+
flexDirection: "column",
|
|
65
|
+
gap: theme.space.sm
|
|
66
|
+
}),
|
|
67
|
+
folded: css({
|
|
68
|
+
width: 34,
|
|
69
|
+
height: 34
|
|
70
|
+
}),
|
|
71
|
+
expandButton: css({
|
|
72
|
+
position: "absolute",
|
|
73
|
+
top: theme.space.xxs,
|
|
74
|
+
right: theme.space.xxs
|
|
75
|
+
}),
|
|
76
|
+
fontSizes: css({
|
|
77
|
+
maxHeight: 160,
|
|
78
|
+
overflowY: "auto",
|
|
79
|
+
padding: theme.space.xs
|
|
80
|
+
})
|
|
81
|
+
};
|
|
82
|
+
const colorsToConfig = ["textColor", "backgroundColor", "borderColor"];
|
|
83
|
+
const fontSizes = [10, 11, 12, 14, 16, 20, 24, 32, 36, 40, 48, 64, 96, 128];
|
|
84
|
+
const StickyNode = ({
|
|
85
|
+
id,
|
|
86
|
+
selected,
|
|
87
|
+
data = {}
|
|
88
|
+
}) => {
|
|
89
|
+
const mergedData = useMemo(() => ({ ...defaultData, ...data }), [data]);
|
|
90
|
+
const [text, setText] = useState("");
|
|
91
|
+
const { setNodes } = useReactFlow();
|
|
92
|
+
const [editing, setEditing] = useState(false);
|
|
93
|
+
const [toolbarVisible, setToolbarVisible] = useState(false);
|
|
94
|
+
const [colorsConfigOpen, setColorsConfigOpen] = useState(false);
|
|
95
|
+
const [fontSizeConfigOpen, setFontSizeConfigOpen] = useState(false);
|
|
96
|
+
const [fontSize, setFontSize] = useState(mergedData.fontSize ?? 14);
|
|
97
|
+
const colorConfigBtnRef = useRef(null);
|
|
98
|
+
const fontSizeConfigBtnRef = useRef(null);
|
|
99
|
+
const handleToggleBold = useCallback(() => {
|
|
100
|
+
setNodes(
|
|
101
|
+
(nds) => nds.map((node) => {
|
|
102
|
+
if (node.id === id) {
|
|
103
|
+
node.data = {
|
|
104
|
+
...node.data,
|
|
105
|
+
bold: !node.data?.bold
|
|
106
|
+
};
|
|
107
|
+
}
|
|
108
|
+
return node;
|
|
109
|
+
})
|
|
110
|
+
);
|
|
111
|
+
}, [setNodes, id]);
|
|
112
|
+
const handleToggleItalic = useCallback(() => {
|
|
113
|
+
setNodes(
|
|
114
|
+
(nds) => nds.map((node) => {
|
|
115
|
+
if (node.id === id) {
|
|
116
|
+
node.data = {
|
|
117
|
+
...node.data,
|
|
118
|
+
italic: !node.data?.italic
|
|
119
|
+
};
|
|
120
|
+
}
|
|
121
|
+
return node;
|
|
122
|
+
})
|
|
123
|
+
);
|
|
124
|
+
}, [setNodes, id]);
|
|
125
|
+
const handleChangeFontSize = useCallback(
|
|
126
|
+
(size) => {
|
|
127
|
+
setFontSize(size);
|
|
128
|
+
setNodes(
|
|
129
|
+
(nds) => nds.map((node) => {
|
|
130
|
+
if (node.id === id) {
|
|
131
|
+
node.data = {
|
|
132
|
+
...node.data,
|
|
133
|
+
fontSize: size
|
|
134
|
+
};
|
|
135
|
+
}
|
|
136
|
+
return node;
|
|
137
|
+
})
|
|
138
|
+
);
|
|
139
|
+
setFontSizeConfigOpen(false);
|
|
140
|
+
},
|
|
141
|
+
[setNodes, id]
|
|
142
|
+
);
|
|
143
|
+
const handleToggleExpand = useCallback(() => {
|
|
144
|
+
setNodes(
|
|
145
|
+
(nds) => nds.map((node) => {
|
|
146
|
+
if (node.id === id) {
|
|
147
|
+
node.data = {
|
|
148
|
+
...node.data,
|
|
149
|
+
expanded: !node.data?.expanded
|
|
150
|
+
};
|
|
151
|
+
}
|
|
152
|
+
return node;
|
|
153
|
+
})
|
|
154
|
+
);
|
|
155
|
+
}, [setNodes, id]);
|
|
156
|
+
const handleResetColors = useCallback(() => {
|
|
157
|
+
setNodes(
|
|
158
|
+
(nds) => nds.map((node) => {
|
|
159
|
+
if (node.id === id) {
|
|
160
|
+
node.data = {
|
|
161
|
+
...node.data,
|
|
162
|
+
backgroundColor: defaultData.backgroundColor,
|
|
163
|
+
borderColor: defaultData.borderColor,
|
|
164
|
+
textColor: defaultData.textColor,
|
|
165
|
+
hasShadow: defaultData.hasShadow
|
|
166
|
+
};
|
|
167
|
+
}
|
|
168
|
+
return node;
|
|
169
|
+
})
|
|
170
|
+
);
|
|
171
|
+
}, [setNodes, id]);
|
|
172
|
+
const handleDeleteSticky = useCallback(() => {
|
|
173
|
+
setNodes((nds) => nds.filter((node) => node.id !== id));
|
|
174
|
+
mergedData.onDelete?.();
|
|
175
|
+
}, [mergedData, setNodes, id]);
|
|
176
|
+
if (!mergedData.visible) return null;
|
|
177
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
178
|
+
/* @__PURE__ */ jsxs(
|
|
179
|
+
Popover,
|
|
180
|
+
{
|
|
181
|
+
open: colorsConfigOpen,
|
|
182
|
+
anchorEl: colorConfigBtnRef.current,
|
|
183
|
+
onClose: () => {
|
|
184
|
+
setColorsConfigOpen(false);
|
|
185
|
+
setEditing(false);
|
|
186
|
+
},
|
|
187
|
+
anchorOrigin: {
|
|
188
|
+
vertical: "bottom",
|
|
189
|
+
horizontal: "left"
|
|
190
|
+
},
|
|
191
|
+
transformOrigin: {
|
|
192
|
+
vertical: "top",
|
|
193
|
+
horizontal: "left"
|
|
194
|
+
},
|
|
195
|
+
children: [
|
|
196
|
+
/* @__PURE__ */ jsx(HvDialogTitle, { children: "Customize Colors" }),
|
|
197
|
+
/* @__PURE__ */ jsx(HvDialogContent, { children: /* @__PURE__ */ jsxs("div", { className: classes.colorConfig, children: [
|
|
198
|
+
colorsToConfig.map((c) => /* @__PURE__ */ jsx(
|
|
199
|
+
HvColorPicker,
|
|
200
|
+
{
|
|
201
|
+
label: `${c.charAt(0).toUpperCase() + c.slice(1).replace("Color", " Color")}`,
|
|
202
|
+
value: mergedData[c] ?? "",
|
|
203
|
+
onChange: (color) => {
|
|
204
|
+
setNodes(
|
|
205
|
+
(nds) => nds.map((node) => {
|
|
206
|
+
if (node.id === id) {
|
|
207
|
+
node.data = {
|
|
208
|
+
...node.data,
|
|
209
|
+
[c]: color
|
|
210
|
+
};
|
|
211
|
+
}
|
|
212
|
+
return node;
|
|
213
|
+
})
|
|
214
|
+
);
|
|
215
|
+
}
|
|
216
|
+
},
|
|
217
|
+
c
|
|
218
|
+
)),
|
|
219
|
+
/* @__PURE__ */ jsx(
|
|
220
|
+
HvCheckBox,
|
|
221
|
+
{
|
|
222
|
+
label: "Drop Shadow",
|
|
223
|
+
defaultChecked: mergedData.hasShadow,
|
|
224
|
+
onChange: (_, checked) => {
|
|
225
|
+
setNodes(
|
|
226
|
+
(nds) => nds.map((node) => {
|
|
227
|
+
if (node.id === id) {
|
|
228
|
+
node.data = {
|
|
229
|
+
...node.data,
|
|
230
|
+
hasShadow: checked
|
|
231
|
+
};
|
|
232
|
+
}
|
|
233
|
+
return node;
|
|
234
|
+
})
|
|
235
|
+
);
|
|
236
|
+
}
|
|
237
|
+
}
|
|
238
|
+
),
|
|
239
|
+
/* @__PURE__ */ jsx(HvButton, { variant: "secondarySubtle", onClick: handleResetColors, children: "Reset to defaults" })
|
|
240
|
+
] }) })
|
|
241
|
+
]
|
|
242
|
+
}
|
|
243
|
+
),
|
|
244
|
+
/* @__PURE__ */ jsx(
|
|
245
|
+
Popover,
|
|
246
|
+
{
|
|
247
|
+
open: fontSizeConfigOpen,
|
|
248
|
+
anchorEl: fontSizeConfigBtnRef.current,
|
|
249
|
+
onClose: () => {
|
|
250
|
+
setFontSizeConfigOpen(false);
|
|
251
|
+
setEditing(false);
|
|
252
|
+
},
|
|
253
|
+
anchorOrigin: {
|
|
254
|
+
vertical: "bottom",
|
|
255
|
+
horizontal: "right"
|
|
256
|
+
},
|
|
257
|
+
transformOrigin: {
|
|
258
|
+
vertical: "top",
|
|
259
|
+
horizontal: "right"
|
|
260
|
+
},
|
|
261
|
+
children: /* @__PURE__ */ jsx(
|
|
262
|
+
HvSelectionList,
|
|
263
|
+
{
|
|
264
|
+
className: classes.fontSizes,
|
|
265
|
+
value: fontSize,
|
|
266
|
+
onChange: (evt, newValue) => {
|
|
267
|
+
handleChangeFontSize(newValue);
|
|
268
|
+
},
|
|
269
|
+
children: fontSizes.map((size) => /* @__PURE__ */ jsx(HvListItem, { value: size, children: size }, size))
|
|
270
|
+
}
|
|
271
|
+
)
|
|
272
|
+
}
|
|
273
|
+
),
|
|
274
|
+
/* @__PURE__ */ jsxs(
|
|
275
|
+
"div",
|
|
276
|
+
{
|
|
277
|
+
className: cx(
|
|
278
|
+
classes.root,
|
|
279
|
+
"nowheel",
|
|
280
|
+
!mergedData.expanded && classes.folded
|
|
281
|
+
),
|
|
282
|
+
style: {
|
|
283
|
+
backgroundColor: mergedData.backgroundColor ?? theme.colors.bgContainer,
|
|
284
|
+
boxShadow: mergedData.hasShadow ? "0 8px 12px rgba(65,65,65,0.25)" : "none",
|
|
285
|
+
border: mergedData.borderColor ? `1px solid ${mergedData.borderColor}` : "none",
|
|
286
|
+
fontSize: `${mergedData.fontSize ?? 14}px`,
|
|
287
|
+
lineHeight: `${mergedData.fontSize ?? 14}px`
|
|
288
|
+
},
|
|
289
|
+
children: [
|
|
290
|
+
mergedData.expanded && /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
291
|
+
/* @__PURE__ */ jsx(
|
|
292
|
+
NodeResizer,
|
|
293
|
+
{
|
|
294
|
+
isVisible: selected,
|
|
295
|
+
minWidth: 100,
|
|
296
|
+
minHeight: 75,
|
|
297
|
+
lineStyle: {
|
|
298
|
+
color: theme.colors.primary,
|
|
299
|
+
borderStyle: "solid"
|
|
300
|
+
},
|
|
301
|
+
handleStyle: {
|
|
302
|
+
width: 6,
|
|
303
|
+
height: 6,
|
|
304
|
+
border: `1px solid ${theme.colors.primary}`,
|
|
305
|
+
backgroundColor: mergedData.backgroundColor ?? "transparent",
|
|
306
|
+
borderRadius: theme.radii.full
|
|
307
|
+
}
|
|
308
|
+
}
|
|
309
|
+
),
|
|
310
|
+
/* @__PURE__ */ jsx(
|
|
311
|
+
NodeToolbar,
|
|
312
|
+
{
|
|
313
|
+
isVisible: editing || toolbarVisible || selected,
|
|
314
|
+
position: Position.Top,
|
|
315
|
+
className: classes.nodeToolbar,
|
|
316
|
+
onMouseEnter: () => setToolbarVisible(true),
|
|
317
|
+
onMouseLeave: () => setToolbarVisible(false),
|
|
318
|
+
children: /* @__PURE__ */ jsx("div", { className: classes.buttonsContainer, children: /* @__PURE__ */ jsxs(HvMultiButton, { children: [
|
|
319
|
+
/* @__PURE__ */ jsx(
|
|
320
|
+
HvIconButton,
|
|
321
|
+
{
|
|
322
|
+
"aria-label": "Font Size",
|
|
323
|
+
title: "Font Size",
|
|
324
|
+
ref: fontSizeConfigBtnRef,
|
|
325
|
+
onClick: () => {
|
|
326
|
+
setEditing(true);
|
|
327
|
+
setFontSizeConfigOpen(true);
|
|
328
|
+
},
|
|
329
|
+
children: /* @__PURE__ */ jsx(FontSize, {})
|
|
330
|
+
}
|
|
331
|
+
),
|
|
332
|
+
/* @__PURE__ */ jsx(
|
|
333
|
+
HvIconButton,
|
|
334
|
+
{
|
|
335
|
+
"aria-label": "Bold",
|
|
336
|
+
title: "Bold",
|
|
337
|
+
selected: mergedData.bold,
|
|
338
|
+
onClick: handleToggleBold,
|
|
339
|
+
children: /* @__PURE__ */ jsx(Bold, {})
|
|
340
|
+
}
|
|
341
|
+
),
|
|
342
|
+
/* @__PURE__ */ jsx(
|
|
343
|
+
HvIconButton,
|
|
344
|
+
{
|
|
345
|
+
"aria-label": "Italic",
|
|
346
|
+
title: "Italic",
|
|
347
|
+
selected: mergedData.italic,
|
|
348
|
+
onClick: handleToggleItalic,
|
|
349
|
+
children: /* @__PURE__ */ jsx(Italic, {})
|
|
350
|
+
}
|
|
351
|
+
),
|
|
352
|
+
/* @__PURE__ */ jsx(
|
|
353
|
+
HvIconButton,
|
|
354
|
+
{
|
|
355
|
+
"aria-label": "Customize Colors",
|
|
356
|
+
title: "Customize Colors",
|
|
357
|
+
ref: colorConfigBtnRef,
|
|
358
|
+
onClick: () => {
|
|
359
|
+
setEditing(true);
|
|
360
|
+
setColorsConfigOpen(true);
|
|
361
|
+
},
|
|
362
|
+
children: /* @__PURE__ */ jsx(Palette, {})
|
|
363
|
+
}
|
|
364
|
+
),
|
|
365
|
+
/* @__PURE__ */ jsx(
|
|
366
|
+
HvIconButton,
|
|
367
|
+
{
|
|
368
|
+
"aria-label": "Delete",
|
|
369
|
+
title: "Delete",
|
|
370
|
+
onClick: handleDeleteSticky,
|
|
371
|
+
children: /* @__PURE__ */ jsx(Delete, {})
|
|
372
|
+
}
|
|
373
|
+
)
|
|
374
|
+
] }) })
|
|
375
|
+
}
|
|
376
|
+
),
|
|
377
|
+
/* @__PURE__ */ jsxs(
|
|
378
|
+
"div",
|
|
379
|
+
{
|
|
380
|
+
onMouseEnter: () => setToolbarVisible(true),
|
|
381
|
+
onMouseLeave: () => setToolbarVisible(false),
|
|
382
|
+
className: classes.textAreaRoot,
|
|
383
|
+
children: [
|
|
384
|
+
/* @__PURE__ */ jsx(
|
|
385
|
+
HvIconButton,
|
|
386
|
+
{
|
|
387
|
+
className: classes.expandButton,
|
|
388
|
+
title: "Fold",
|
|
389
|
+
onClick: handleToggleExpand,
|
|
390
|
+
children: /* @__PURE__ */ jsx(ActualSize, {})
|
|
391
|
+
}
|
|
392
|
+
),
|
|
393
|
+
/* @__PURE__ */ jsx(
|
|
394
|
+
"textarea",
|
|
395
|
+
{
|
|
396
|
+
id: `sticky-textarea-${id}`,
|
|
397
|
+
value: text || "",
|
|
398
|
+
onChange: (e) => setText(e.target.value),
|
|
399
|
+
className: classes.textAreaInput,
|
|
400
|
+
placeholder: "Type here...",
|
|
401
|
+
style: {
|
|
402
|
+
color: mergedData.textColor ?? theme.colors.text,
|
|
403
|
+
fontWeight: mergedData.bold ? "bold" : "normal",
|
|
404
|
+
fontStyle: mergedData.italic ? "italic" : "normal",
|
|
405
|
+
fontSize: mergedData.fontSize ?? "14px"
|
|
406
|
+
},
|
|
407
|
+
onFocus: () => setEditing(true),
|
|
408
|
+
onBlur: () => {
|
|
409
|
+
setEditing(false);
|
|
410
|
+
setColorsConfigOpen(false);
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
)
|
|
414
|
+
]
|
|
415
|
+
}
|
|
416
|
+
)
|
|
417
|
+
] }),
|
|
418
|
+
!mergedData.expanded && /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(
|
|
419
|
+
HvIconButton,
|
|
420
|
+
{
|
|
421
|
+
title: /* @__PURE__ */ jsx(
|
|
422
|
+
"span",
|
|
423
|
+
{
|
|
424
|
+
style: { whiteSpace: "pre-wrap", wordBreak: "break-word" },
|
|
425
|
+
children: text
|
|
426
|
+
}
|
|
427
|
+
),
|
|
428
|
+
onClick: handleToggleExpand,
|
|
429
|
+
children: /* @__PURE__ */ jsx(Fullscreen, {})
|
|
430
|
+
}
|
|
431
|
+
) })
|
|
432
|
+
]
|
|
433
|
+
}
|
|
434
|
+
)
|
|
435
|
+
] });
|
|
436
|
+
};
|
|
437
|
+
export {
|
|
438
|
+
StickyNode
|
|
439
|
+
};
|
package/dist/esm/index.js
CHANGED
|
@@ -21,6 +21,7 @@ import { staticClasses as staticClasses8 } from "./Flow/Node/Node.styles.js";
|
|
|
21
21
|
import { HvFlowNode } from "./Flow/Node/Node.js";
|
|
22
22
|
import { staticClasses as staticClasses9 } from "./Flow/nodes/DashboardNode.styles.js";
|
|
23
23
|
import { HvDashboardNode } from "./Flow/nodes/DashboardNode.js";
|
|
24
|
+
import { StickyNode } from "./Flow/nodes/StickyNode.js";
|
|
24
25
|
import { useFlowInputNodes, useFlowNode, useFlowNodeEdges, useFlowNodeInputEdges, useFlowNodeIntersections, useFlowNodeOutputEdges, useFlowNodeParents, useFlowNodeUtils, useFlowOutputNodes } from "./Flow/hooks/useFlowNode.js";
|
|
25
26
|
import { useFlowContext } from "./Flow/hooks/useFlowContext.js";
|
|
26
27
|
import { useFlowNodeMeta } from "./Flow/hooks/useFlowNodeMeta.js";
|
|
@@ -59,6 +60,7 @@ export {
|
|
|
59
60
|
HvWizardContent,
|
|
60
61
|
default2 as HvWizardContext,
|
|
61
62
|
HvWizardTitle,
|
|
63
|
+
StickyNode,
|
|
62
64
|
staticClasses as bladeClasses,
|
|
63
65
|
staticClasses2 as bladesClasses,
|
|
64
66
|
staticClasses3 as dashboardClasses,
|
package/dist/types/index.d.ts
CHANGED
|
@@ -26,6 +26,7 @@ import { HvBreakpoints } from '@hitachivantara/uikit-react-core';
|
|
|
26
26
|
import { HvButtonBaseProps } from '@hitachivantara/uikit-react-core';
|
|
27
27
|
import { HvButtonProps } from '@hitachivantara/uikit-react-core';
|
|
28
28
|
import { HvColorAny } from '@hitachivantara/uikit-styles';
|
|
29
|
+
import { HvColorAny as HvColorAny_2 } from '@hitachivantara/uikit-react-core';
|
|
29
30
|
import { HvDialogProps } from '@hitachivantara/uikit-react-core';
|
|
30
31
|
import { HvDrawerProps } from '@hitachivantara/uikit-react-core';
|
|
31
32
|
import { HvEmptyStateProps } from '@hitachivantara/uikit-react-core';
|
|
@@ -890,6 +891,22 @@ export declare const stepNavigationClasses: {
|
|
|
890
891
|
separator: string;
|
|
891
892
|
};
|
|
892
893
|
|
|
894
|
+
export declare const StickyNode: ({ id, selected, data, }: NodeProps<StickyNodeData>) => JSX_2.Element | null;
|
|
895
|
+
|
|
896
|
+
export declare type StickyNodeData = undefined | {
|
|
897
|
+
title?: string;
|
|
898
|
+
backgroundColor?: HvColorAny_2;
|
|
899
|
+
borderColor?: HvColorAny_2;
|
|
900
|
+
textColor?: HvColorAny_2;
|
|
901
|
+
hasShadow?: boolean;
|
|
902
|
+
bold?: boolean;
|
|
903
|
+
italic?: boolean;
|
|
904
|
+
fontSize?: number;
|
|
905
|
+
expanded?: boolean;
|
|
906
|
+
visible?: boolean;
|
|
907
|
+
onDelete?: () => void;
|
|
908
|
+
};
|
|
909
|
+
|
|
893
910
|
declare const useClasses: (classesProp?: Partial<Record<"container" | "button" | "expanded" | "disabled" | "root" | "heading" | "fullWidth" | "textOnlyLabel", string>>, addStatic?: boolean) => {
|
|
894
911
|
readonly classes: {
|
|
895
912
|
root: string;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@hitachivantara/uikit-react-lab",
|
|
3
|
-
"version": "5.46.
|
|
3
|
+
"version": "5.46.8",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "Hitachi Vantara UI Kit Team",
|
|
6
6
|
"description": "Contributed React components for the NEXT UI Kit.",
|
|
@@ -33,10 +33,10 @@
|
|
|
33
33
|
"@dnd-kit/core": "^6.1.0",
|
|
34
34
|
"@dnd-kit/modifiers": "^6.0.1",
|
|
35
35
|
"@emotion/css": "^11.11.0",
|
|
36
|
-
"@hitachivantara/uikit-react-core": "^5.
|
|
37
|
-
"@hitachivantara/uikit-react-icons": "^5.16.
|
|
38
|
-
"@hitachivantara/uikit-react-utils": "^0.2.
|
|
39
|
-
"@hitachivantara/uikit-styles": "^5.
|
|
36
|
+
"@hitachivantara/uikit-react-core": "^5.104.0",
|
|
37
|
+
"@hitachivantara/uikit-react-icons": "^5.16.5",
|
|
38
|
+
"@hitachivantara/uikit-react-utils": "^0.2.45",
|
|
39
|
+
"@hitachivantara/uikit-styles": "^5.51.0",
|
|
40
40
|
"@mui/base": "5.0.0-beta.68",
|
|
41
41
|
"@types/react-grid-layout": "^1.3.5",
|
|
42
42
|
"react-grid-layout": "^1.4.4",
|
|
@@ -52,7 +52,7 @@
|
|
|
52
52
|
"access": "public",
|
|
53
53
|
"directory": "package"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "18bba1bbe7a6ecddfcb9f56d1613c547bfd0e6d7",
|
|
56
56
|
"exports": {
|
|
57
57
|
".": {
|
|
58
58
|
"types": "./dist/types/index.d.ts",
|