@uipath/apollo-react 6.44.1 → 6.45.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/FloatingCanvasPanel/CanvasPanelSurface.cjs +59 -0
- package/dist/canvas/components/FloatingCanvasPanel/CanvasPanelSurface.d.ts +12 -0
- package/dist/canvas/components/FloatingCanvasPanel/CanvasPanelSurface.d.ts.map +1 -0
- package/dist/canvas/components/FloatingCanvasPanel/CanvasPanelSurface.js +22 -0
- package/dist/canvas/components/FloatingCanvasPanel/CanvasPortal.cjs +1 -1
- package/dist/canvas/components/FloatingCanvasPanel/CanvasPortal.d.ts.map +1 -1
- package/dist/canvas/components/FloatingCanvasPanel/CanvasPortal.js +1 -1
- package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.cjs +22 -36
- package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.d.ts.map +1 -1
- package/dist/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.js +22 -36
- package/dist/canvas/components/FloatingCanvasPanel/PanelChrome.cjs +6 -45
- package/dist/canvas/components/FloatingCanvasPanel/PanelChrome.d.ts.map +1 -1
- package/dist/canvas/components/FloatingCanvasPanel/PanelChrome.js +6 -35
- package/dist/canvas/components/FloatingCanvasPanel/index.cjs +8 -1
- package/dist/canvas/components/FloatingCanvasPanel/index.d.ts +2 -0
- package/dist/canvas/components/FloatingCanvasPanel/index.d.ts.map +1 -1
- package/dist/canvas/components/FloatingCanvasPanel/index.js +2 -1
- package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.cjs +1 -1
- package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.js +1 -1
- package/dist/canvas/components/Toolbox/Header.cjs +6 -16
- package/dist/canvas/components/Toolbox/Header.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/Header.js +6 -16
- package/dist/canvas/components/Toolbox/ListView.cjs +21 -15
- package/dist/canvas/components/Toolbox/ListView.d.ts +1 -1
- package/dist/canvas/components/Toolbox/ListView.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/ListView.js +23 -17
- package/dist/canvas/components/Toolbox/ListViewIconContainer.cjs +52 -0
- package/dist/canvas/components/Toolbox/ListViewIconContainer.d.ts +9 -0
- package/dist/canvas/components/Toolbox/ListViewIconContainer.d.ts.map +1 -0
- package/dist/canvas/components/Toolbox/ListViewIconContainer.js +18 -0
- package/dist/canvas/components/Toolbox/QuickActionsRow.cjs +9 -7
- package/dist/canvas/components/Toolbox/QuickActionsRow.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/QuickActionsRow.js +10 -8
- package/dist/canvas/components/Toolbox/SearchBox.cjs +24 -24
- package/dist/canvas/components/Toolbox/SearchBox.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/SearchBox.js +24 -24
- package/dist/canvas/components/Toolbox/Toolbox.cjs +10 -6
- package/dist/canvas/components/Toolbox/Toolbox.d.ts.map +1 -1
- package/dist/canvas/components/Toolbox/Toolbox.js +10 -6
- package/dist/canvas/styles/tailwind.canvas.css +1 -1
- package/package.json +2 -2
- package/dist/canvas/components/Toolbox/ListView.styles.cjs +0 -136
- package/dist/canvas/components/Toolbox/ListView.styles.d.ts +0 -12
- package/dist/canvas/components/Toolbox/ListView.styles.d.ts.map +0 -1
- package/dist/canvas/components/Toolbox/ListView.styles.js +0 -86
- package/dist/canvas/components/Toolbox/SearchBox.styles.cjs +0 -114
- package/dist/canvas/components/Toolbox/SearchBox.styles.d.ts +0 -5
- package/dist/canvas/components/Toolbox/SearchBox.styles.d.ts.map +0 -1
- package/dist/canvas/components/Toolbox/SearchBox.styles.js +0 -70
- package/dist/canvas/components/Toolbox/Toolbox.styles.cjs +0 -115
- package/dist/canvas/components/Toolbox/Toolbox.styles.d.ts +0 -16
- package/dist/canvas/components/Toolbox/Toolbox.styles.d.ts.map +0 -1
- package/dist/canvas/components/Toolbox/Toolbox.styles.js +0 -65
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __webpack_require__ = {};
|
|
3
|
+
(()=>{
|
|
4
|
+
__webpack_require__.d = (exports1, definition)=>{
|
|
5
|
+
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
6
|
+
enumerable: true,
|
|
7
|
+
get: definition[key]
|
|
8
|
+
});
|
|
9
|
+
};
|
|
10
|
+
})();
|
|
11
|
+
(()=>{
|
|
12
|
+
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
|
|
13
|
+
})();
|
|
14
|
+
(()=>{
|
|
15
|
+
__webpack_require__.r = (exports1)=>{
|
|
16
|
+
if ("u" > typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
|
|
17
|
+
value: 'Module'
|
|
18
|
+
});
|
|
19
|
+
Object.defineProperty(exports1, '__esModule', {
|
|
20
|
+
value: true
|
|
21
|
+
});
|
|
22
|
+
};
|
|
23
|
+
})();
|
|
24
|
+
var __webpack_exports__ = {};
|
|
25
|
+
__webpack_require__.r(__webpack_exports__);
|
|
26
|
+
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
CanvasPanelSurface: ()=>CanvasPanelSurface_CanvasPanelSurface,
|
|
28
|
+
CANVAS_PANEL_FLOATING_SIZE_CLASS: ()=>CANVAS_PANEL_FLOATING_SIZE_CLASS
|
|
29
|
+
});
|
|
30
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
31
|
+
const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
|
|
32
|
+
const external_react_namespaceObject = require("react");
|
|
33
|
+
const external_PanelChrome_cjs_namespaceObject = require("./PanelChrome.cjs");
|
|
34
|
+
const PANEL_SURFACE_CLASS = 'text-(--canvas-foreground) bg-(--canvas-background-raised) border border-(--canvas-border-de-emp) text-sm';
|
|
35
|
+
const PANEL_SHELL_CLASS = 'rounded-lg future:rounded-2xl shadow-[0_4px_16px_rgba(0,0,0,0.12)]';
|
|
36
|
+
const CANVAS_PANEL_FLOATING_SIZE_CLASS = 'w-auto min-w-[280px] max-w-none h-auto max-h-[600px]';
|
|
37
|
+
const PANEL_PINNED_CLASS = 'rounded-none shadow-none w-[320px] min-w-[320px] max-w-[320px] h-screen max-h-screen';
|
|
38
|
+
const CanvasPanelSurface_CanvasPanelSurface = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)(function({ isPinned = false, className, style, onPointerEnter, onPointerLeave, ...chromeProps }, ref) {
|
|
39
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
40
|
+
ref: ref,
|
|
41
|
+
"data-slot": "canvas-panel-surface",
|
|
42
|
+
className: (0, apollo_wind_namespaceObject.cn)(PANEL_SURFACE_CLASS, 'flex flex-col transition-opacity duration-200 ease-in-out', isPinned ? PANEL_PINNED_CLASS : `${PANEL_SHELL_CLASS} ${CANVAS_PANEL_FLOATING_SIZE_CLASS}`, className),
|
|
43
|
+
style: style,
|
|
44
|
+
onPointerEnter: onPointerEnter,
|
|
45
|
+
onPointerLeave: onPointerLeave,
|
|
46
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_PanelChrome_cjs_namespaceObject.PanelChrome, {
|
|
47
|
+
...chromeProps
|
|
48
|
+
})
|
|
49
|
+
});
|
|
50
|
+
});
|
|
51
|
+
exports.CANVAS_PANEL_FLOATING_SIZE_CLASS = __webpack_exports__.CANVAS_PANEL_FLOATING_SIZE_CLASS;
|
|
52
|
+
exports.CanvasPanelSurface = __webpack_exports__.CanvasPanelSurface;
|
|
53
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
54
|
+
"CANVAS_PANEL_FLOATING_SIZE_CLASS",
|
|
55
|
+
"CanvasPanelSurface"
|
|
56
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
57
|
+
Object.defineProperty(exports, '__esModule', {
|
|
58
|
+
value: true
|
|
59
|
+
});
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { type CSSProperties, type PointerEventHandler } from 'react';
|
|
2
|
+
import { type PanelChromeProps } from './PanelChrome';
|
|
3
|
+
export declare const CANVAS_PANEL_FLOATING_SIZE_CLASS = "w-auto min-w-[280px] max-w-none h-auto max-h-[600px]";
|
|
4
|
+
export interface CanvasPanelSurfaceProps extends PanelChromeProps {
|
|
5
|
+
isPinned?: boolean;
|
|
6
|
+
className?: string;
|
|
7
|
+
style?: CSSProperties;
|
|
8
|
+
onPointerEnter?: PointerEventHandler<HTMLDivElement>;
|
|
9
|
+
onPointerLeave?: PointerEventHandler<HTMLDivElement>;
|
|
10
|
+
}
|
|
11
|
+
export declare const CanvasPanelSurface: import("react").ForwardRefExoticComponent<CanvasPanelSurfaceProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
12
|
+
//# sourceMappingURL=CanvasPanelSurface.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CanvasPanelSurface.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/CanvasPanelSurface.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,aAAa,EAAc,KAAK,mBAAmB,EAAE,MAAM,OAAO,CAAC;AACjF,OAAO,EAAe,KAAK,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAoBnE,eAAO,MAAM,gCAAgC,yDACW,CAAC;AAOzD,MAAM,WAAW,uBAAwB,SAAQ,gBAAgB;IAE/D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,cAAc,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;IACrD,cAAc,CAAC,EAAE,mBAAmB,CAAC,cAAc,CAAC,CAAC;CACtD;AAiBD,eAAO,MAAM,kBAAkB,oHAyB9B,CAAC"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { cn } from "@uipath/apollo-wind";
|
|
3
|
+
import { forwardRef } from "react";
|
|
4
|
+
import { PanelChrome } from "./PanelChrome.js";
|
|
5
|
+
const PANEL_SURFACE_CLASS = 'text-(--canvas-foreground) bg-(--canvas-background-raised) border border-(--canvas-border-de-emp) text-sm';
|
|
6
|
+
const PANEL_SHELL_CLASS = 'rounded-lg future:rounded-2xl shadow-[0_4px_16px_rgba(0,0,0,0.12)]';
|
|
7
|
+
const CANVAS_PANEL_FLOATING_SIZE_CLASS = 'w-auto min-w-[280px] max-w-none h-auto max-h-[600px]';
|
|
8
|
+
const PANEL_PINNED_CLASS = 'rounded-none shadow-none w-[320px] min-w-[320px] max-w-[320px] h-screen max-h-screen';
|
|
9
|
+
const CanvasPanelSurface_CanvasPanelSurface = /*#__PURE__*/ forwardRef(function({ isPinned = false, className, style, onPointerEnter, onPointerLeave, ...chromeProps }, ref) {
|
|
10
|
+
return /*#__PURE__*/ jsx("div", {
|
|
11
|
+
ref: ref,
|
|
12
|
+
"data-slot": "canvas-panel-surface",
|
|
13
|
+
className: cn(PANEL_SURFACE_CLASS, 'flex flex-col transition-opacity duration-200 ease-in-out', isPinned ? PANEL_PINNED_CLASS : `${PANEL_SHELL_CLASS} ${CANVAS_PANEL_FLOATING_SIZE_CLASS}`, className),
|
|
14
|
+
style: style,
|
|
15
|
+
onPointerEnter: onPointerEnter,
|
|
16
|
+
onPointerLeave: onPointerLeave,
|
|
17
|
+
children: /*#__PURE__*/ jsx(PanelChrome, {
|
|
18
|
+
...chromeProps
|
|
19
|
+
})
|
|
20
|
+
});
|
|
21
|
+
});
|
|
22
|
+
export { CANVAS_PANEL_FLOATING_SIZE_CLASS, CanvasPanelSurface_CanvasPanelSurface as CanvasPanelSurface };
|
|
@@ -28,7 +28,7 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
28
28
|
});
|
|
29
29
|
const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
|
|
30
30
|
const external_react_dom_namespaceObject = require("react-dom");
|
|
31
|
-
const reactFlowPortalSelector = (state)=>state.domNode
|
|
31
|
+
const reactFlowPortalSelector = (state)=>state.domNode;
|
|
32
32
|
function CanvasPortal({ children }) {
|
|
33
33
|
const wrapperRef = (0, react_cjs_namespaceObject.useStore)(reactFlowPortalSelector);
|
|
34
34
|
if (!wrapperRef) return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CanvasPortal.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/CanvasPortal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"CanvasPortal.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/CanvasPortal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAmBvC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,sCAQ3D"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useStore } from "../../xyflow/react.js";
|
|
2
2
|
import { createPortal } from "react-dom";
|
|
3
|
-
const reactFlowPortalSelector = (state)=>state.domNode
|
|
3
|
+
const reactFlowPortalSelector = (state)=>state.domNode;
|
|
4
4
|
function CanvasPortal({ children }) {
|
|
5
5
|
const wrapperRef = useStore(reactFlowPortalSelector);
|
|
6
6
|
if (!wrapperRef) return null;
|
|
@@ -28,17 +28,13 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
28
28
|
});
|
|
29
29
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
30
|
const react_cjs_namespaceObject = require("../../xyflow/react.cjs");
|
|
31
|
-
const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
|
|
32
31
|
const external_react_namespaceObject = require("react");
|
|
33
32
|
const external_react_dom_namespaceObject = require("react-dom");
|
|
33
|
+
const external_CanvasPanelSurface_cjs_namespaceObject = require("./CanvasPanelSurface.cjs");
|
|
34
34
|
const external_CanvasPortal_cjs_namespaceObject = require("./CanvasPortal.cjs");
|
|
35
|
-
const external_PanelChrome_cjs_namespaceObject = require("./PanelChrome.cjs");
|
|
36
35
|
const external_useFloatingPosition_cjs_namespaceObject = require("./useFloatingPosition.cjs");
|
|
37
|
-
const PANEL_BASE_CLASS = 'text-(--canvas-foreground) bg-(--canvas-background-raised) border border-(--canvas-border-de-emp) text-sm flex flex-col transition-opacity duration-200 ease-in-out';
|
|
38
36
|
const PANEL_FLOATING_MAX_HEIGHT = 600;
|
|
39
37
|
const PANEL_FLOATING_MIN_HEIGHT = 100;
|
|
40
|
-
const PANEL_FLOATING_CLASS = 'rounded-lg shadow-[0_4px_16px_rgba(0,0,0,0.12)] w-auto min-w-[280px] max-w-none h-auto max-h-[600px]';
|
|
41
|
-
const PANEL_PINNED_CLASS = 'rounded-none shadow-none w-[320px] min-w-[320px] max-w-[320px] h-screen max-h-screen';
|
|
42
38
|
function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, fallbackPlacement, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, scrollableContent = true, onMouseEnter, onMouseLeave }) {
|
|
43
39
|
const { computedAnchor, floatingStyles, availableHeight, refs, mergedReferenceRef } = (0, external_useFloatingPosition_cjs_namespaceObject.useFloatingPosition)({
|
|
44
40
|
open,
|
|
@@ -48,9 +44,6 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
|
|
|
48
44
|
offset,
|
|
49
45
|
fallbackPlacement
|
|
50
46
|
});
|
|
51
|
-
const panelClassName = (0, external_react_namespaceObject.useMemo)(()=>(0, apollo_wind_namespaceObject.cn)(PANEL_BASE_CLASS, isPinned ? PANEL_PINNED_CLASS : PANEL_FLOATING_CLASS), [
|
|
52
|
-
isPinned
|
|
53
|
-
]);
|
|
54
47
|
const sizingStyle = (0, external_react_namespaceObject.useMemo)(()=>{
|
|
55
48
|
if (isPinned || null == availableHeight) return {};
|
|
56
49
|
const maxHeight = Math.min(PANEL_FLOATING_MAX_HEIGHT, availableHeight);
|
|
@@ -64,6 +57,17 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
|
|
|
64
57
|
isPinned,
|
|
65
58
|
availableHeight
|
|
66
59
|
]);
|
|
60
|
+
const chromeProps = {
|
|
61
|
+
title,
|
|
62
|
+
header,
|
|
63
|
+
headerActions,
|
|
64
|
+
onClose,
|
|
65
|
+
scrollKey,
|
|
66
|
+
scrollableContent,
|
|
67
|
+
onPointerEnter: onMouseEnter,
|
|
68
|
+
onPointerLeave: onMouseLeave,
|
|
69
|
+
children
|
|
70
|
+
};
|
|
67
71
|
if (!open || !computedAnchor) return null;
|
|
68
72
|
if (useFixedPosition && anchorRect) {
|
|
69
73
|
const getScreenSpacePosition = ()=>{
|
|
@@ -108,36 +112,27 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
|
|
|
108
112
|
}
|
|
109
113
|
};
|
|
110
114
|
const screenPosition = getScreenSpacePosition();
|
|
111
|
-
const fixedContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
+
const fixedContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPanelSurface_cjs_namespaceObject.CanvasPanelSurface, {
|
|
116
|
+
...chromeProps,
|
|
117
|
+
isPinned: isPinned,
|
|
118
|
+
className: "nodrag nopan nowheel",
|
|
115
119
|
style: {
|
|
116
120
|
position: 'fixed',
|
|
117
121
|
...screenPosition,
|
|
118
122
|
...sizingStyle,
|
|
119
123
|
zIndex: 1100,
|
|
120
124
|
pointerEvents: 'auto'
|
|
121
|
-
}
|
|
122
|
-
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_PanelChrome_cjs_namespaceObject.PanelChrome, {
|
|
123
|
-
title: title,
|
|
124
|
-
header: header,
|
|
125
|
-
headerActions: headerActions,
|
|
126
|
-
onClose: onClose,
|
|
127
|
-
scrollKey: scrollKey,
|
|
128
|
-
scrollableContent: scrollableContent,
|
|
129
|
-
children: children
|
|
130
|
-
})
|
|
125
|
+
}
|
|
131
126
|
});
|
|
132
127
|
return portalToBody ? /*#__PURE__*/ (0, external_react_dom_namespaceObject.createPortal)(fixedContent, document.body) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPortal_cjs_namespaceObject.CanvasPortal, {
|
|
133
128
|
children: fixedContent
|
|
134
129
|
});
|
|
135
130
|
}
|
|
136
|
-
const panelContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
|
|
131
|
+
const panelContent = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasPanelSurface_cjs_namespaceObject.CanvasPanelSurface, {
|
|
132
|
+
...chromeProps,
|
|
137
133
|
ref: refs.setFloating,
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
onPointerLeave: onMouseLeave,
|
|
134
|
+
isPinned: isPinned,
|
|
135
|
+
className: "nodrag nopan nowheel",
|
|
141
136
|
style: {
|
|
142
137
|
...isPinned ? {} : floatingStyles,
|
|
143
138
|
...sizingStyle,
|
|
@@ -146,16 +141,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
|
|
|
146
141
|
top: isPinned ? 0 : void 0,
|
|
147
142
|
zIndex: 1100,
|
|
148
143
|
pointerEvents: 'auto'
|
|
149
|
-
}
|
|
150
|
-
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_PanelChrome_cjs_namespaceObject.PanelChrome, {
|
|
151
|
-
title: title,
|
|
152
|
-
header: header,
|
|
153
|
-
headerActions: headerActions,
|
|
154
|
-
onClose: onClose,
|
|
155
|
-
scrollKey: scrollKey,
|
|
156
|
-
scrollableContent: scrollableContent,
|
|
157
|
-
children: children
|
|
158
|
-
})
|
|
144
|
+
}
|
|
159
145
|
});
|
|
160
146
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
161
147
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"FloatingCanvasPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/FloatingCanvasPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAEpD,OAAO,KAAK,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAKtD,OAAO,EAAE,KAAK,UAAU,EAAuB,MAAM,uBAAuB,CAAC;AAoB7E,MAAM,MAAM,wBAAwB,GAAG;IAErC,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAShB,iBAAiB,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IAOnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAM3B,YAAY,CAAC,EAAE,OAAO,CAAC;IAGvB,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IAOnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAG5B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,wBAAgB,mBAAmB,CAAC,EAClC,IAAW,EACX,MAAM,EACN,UAAU,EACV,SAAyB,EACzB,MAAW,EACX,iBAAiB,EACjB,QAAgB,EAChB,gBAAwB,EACxB,YAAoB,EACpB,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,iBAAwB,EACxB,YAAY,EACZ,YAAY,GACb,EAAE,wBAAwB,kDAoJ1B"}
|
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { ViewportPortal } from "../../xyflow/react.js";
|
|
3
|
-
import { cn } from "@uipath/apollo-wind";
|
|
4
3
|
import { useMemo } from "react";
|
|
5
4
|
import { createPortal } from "react-dom";
|
|
5
|
+
import { CanvasPanelSurface } from "./CanvasPanelSurface.js";
|
|
6
6
|
import { CanvasPortal } from "./CanvasPortal.js";
|
|
7
|
-
import { PanelChrome } from "./PanelChrome.js";
|
|
8
7
|
import { useFloatingPosition } from "./useFloatingPosition.js";
|
|
9
|
-
const PANEL_BASE_CLASS = 'text-(--canvas-foreground) bg-(--canvas-background-raised) border border-(--canvas-border-de-emp) text-sm flex flex-col transition-opacity duration-200 ease-in-out';
|
|
10
8
|
const PANEL_FLOATING_MAX_HEIGHT = 600;
|
|
11
9
|
const PANEL_FLOATING_MIN_HEIGHT = 100;
|
|
12
|
-
const PANEL_FLOATING_CLASS = 'rounded-lg shadow-[0_4px_16px_rgba(0,0,0,0.12)] w-auto min-w-[280px] max-w-none h-auto max-h-[600px]';
|
|
13
|
-
const PANEL_PINNED_CLASS = 'rounded-none shadow-none w-[320px] min-w-[320px] max-w-[320px] h-screen max-h-screen';
|
|
14
10
|
function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'right-start', offset = 20, fallbackPlacement, isPinned = false, useFixedPosition = false, portalToBody = false, title, header, headerActions, children, onClose, scrollKey, scrollableContent = true, onMouseEnter, onMouseLeave }) {
|
|
15
11
|
const { computedAnchor, floatingStyles, availableHeight, refs, mergedReferenceRef } = useFloatingPosition({
|
|
16
12
|
open,
|
|
@@ -20,9 +16,6 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
|
|
|
20
16
|
offset,
|
|
21
17
|
fallbackPlacement
|
|
22
18
|
});
|
|
23
|
-
const panelClassName = useMemo(()=>cn(PANEL_BASE_CLASS, isPinned ? PANEL_PINNED_CLASS : PANEL_FLOATING_CLASS), [
|
|
24
|
-
isPinned
|
|
25
|
-
]);
|
|
26
19
|
const sizingStyle = useMemo(()=>{
|
|
27
20
|
if (isPinned || null == availableHeight) return {};
|
|
28
21
|
const maxHeight = Math.min(PANEL_FLOATING_MAX_HEIGHT, availableHeight);
|
|
@@ -36,6 +29,17 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
|
|
|
36
29
|
isPinned,
|
|
37
30
|
availableHeight
|
|
38
31
|
]);
|
|
32
|
+
const chromeProps = {
|
|
33
|
+
title,
|
|
34
|
+
header,
|
|
35
|
+
headerActions,
|
|
36
|
+
onClose,
|
|
37
|
+
scrollKey,
|
|
38
|
+
scrollableContent,
|
|
39
|
+
onPointerEnter: onMouseEnter,
|
|
40
|
+
onPointerLeave: onMouseLeave,
|
|
41
|
+
children
|
|
42
|
+
};
|
|
39
43
|
if (!open || !computedAnchor) return null;
|
|
40
44
|
if (useFixedPosition && anchorRect) {
|
|
41
45
|
const getScreenSpacePosition = ()=>{
|
|
@@ -80,36 +84,27 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
|
|
|
80
84
|
}
|
|
81
85
|
};
|
|
82
86
|
const screenPosition = getScreenSpacePosition();
|
|
83
|
-
const fixedContent = /*#__PURE__*/ jsx(
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
+
const fixedContent = /*#__PURE__*/ jsx(CanvasPanelSurface, {
|
|
88
|
+
...chromeProps,
|
|
89
|
+
isPinned: isPinned,
|
|
90
|
+
className: "nodrag nopan nowheel",
|
|
87
91
|
style: {
|
|
88
92
|
position: 'fixed',
|
|
89
93
|
...screenPosition,
|
|
90
94
|
...sizingStyle,
|
|
91
95
|
zIndex: 1100,
|
|
92
96
|
pointerEvents: 'auto'
|
|
93
|
-
}
|
|
94
|
-
children: /*#__PURE__*/ jsx(PanelChrome, {
|
|
95
|
-
title: title,
|
|
96
|
-
header: header,
|
|
97
|
-
headerActions: headerActions,
|
|
98
|
-
onClose: onClose,
|
|
99
|
-
scrollKey: scrollKey,
|
|
100
|
-
scrollableContent: scrollableContent,
|
|
101
|
-
children: children
|
|
102
|
-
})
|
|
97
|
+
}
|
|
103
98
|
});
|
|
104
99
|
return portalToBody ? /*#__PURE__*/ createPortal(fixedContent, document.body) : /*#__PURE__*/ jsx(CanvasPortal, {
|
|
105
100
|
children: fixedContent
|
|
106
101
|
});
|
|
107
102
|
}
|
|
108
|
-
const panelContent = /*#__PURE__*/ jsx(
|
|
103
|
+
const panelContent = /*#__PURE__*/ jsx(CanvasPanelSurface, {
|
|
104
|
+
...chromeProps,
|
|
109
105
|
ref: refs.setFloating,
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
onPointerLeave: onMouseLeave,
|
|
106
|
+
isPinned: isPinned,
|
|
107
|
+
className: "nodrag nopan nowheel",
|
|
113
108
|
style: {
|
|
114
109
|
...isPinned ? {} : floatingStyles,
|
|
115
110
|
...sizingStyle,
|
|
@@ -118,16 +113,7 @@ function FloatingCanvasPanel({ open = true, nodeId, anchorRect, placement = 'rig
|
|
|
118
113
|
top: isPinned ? 0 : void 0,
|
|
119
114
|
zIndex: 1100,
|
|
120
115
|
pointerEvents: 'auto'
|
|
121
|
-
}
|
|
122
|
-
children: /*#__PURE__*/ jsx(PanelChrome, {
|
|
123
|
-
title: title,
|
|
124
|
-
header: header,
|
|
125
|
-
headerActions: headerActions,
|
|
126
|
-
onClose: onClose,
|
|
127
|
-
scrollKey: scrollKey,
|
|
128
|
-
scrollableContent: scrollableContent,
|
|
129
|
-
children: children
|
|
130
|
-
})
|
|
116
|
+
}
|
|
131
117
|
});
|
|
132
118
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
133
119
|
children: [
|
|
@@ -1,14 +1,5 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __webpack_require__ = {};
|
|
3
|
-
(()=>{
|
|
4
|
-
__webpack_require__.n = (module)=>{
|
|
5
|
-
var getter = module && module.__esModule ? ()=>module['default'] : ()=>module;
|
|
6
|
-
__webpack_require__.d(getter, {
|
|
7
|
-
a: getter
|
|
8
|
-
});
|
|
9
|
-
return getter;
|
|
10
|
-
};
|
|
11
|
-
})();
|
|
12
3
|
(()=>{
|
|
13
4
|
__webpack_require__.d = (exports1, definition)=>{
|
|
14
5
|
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
|
|
@@ -36,43 +27,12 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
36
27
|
PanelChrome: ()=>PanelChrome
|
|
37
28
|
});
|
|
38
29
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
39
|
-
const styled_namespaceObject = require("@emotion/styled");
|
|
40
|
-
var styled_default = /*#__PURE__*/ __webpack_require__.n(styled_namespaceObject);
|
|
41
30
|
const index_cjs_namespaceObject = require("../../layouts/index.cjs");
|
|
42
31
|
const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
|
|
43
32
|
const external_react_namespaceObject = require("react");
|
|
44
33
|
const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
|
|
45
|
-
const
|
|
46
|
-
|
|
47
|
-
padding: 8px 16px;
|
|
48
|
-
background-color: var(--canvas-background-raised);
|
|
49
|
-
border-radius: 8px 8px 0 0;
|
|
50
|
-
flex-shrink: 0;
|
|
51
|
-
`;
|
|
52
|
-
const PanelContent = styled_default().div`
|
|
53
|
-
flex: 1;
|
|
54
|
-
min-height: 0;
|
|
55
|
-
overflow-y: ${(props)=>false === props.scrollable ? 'hidden' : 'auto'};
|
|
56
|
-
overflow-x: hidden;
|
|
57
|
-
|
|
58
|
-
&::-webkit-scrollbar {
|
|
59
|
-
width: 6px;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
&::-webkit-scrollbar-track {
|
|
63
|
-
background: var(--canvas-background-secondary);
|
|
64
|
-
border-radius: 3px;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
&::-webkit-scrollbar-thumb {
|
|
68
|
-
background: var(--canvas-border);
|
|
69
|
-
border-radius: 3px;
|
|
70
|
-
|
|
71
|
-
&:hover {
|
|
72
|
-
background: var(--canvas-border-de-emp);
|
|
73
|
-
}
|
|
74
|
-
}
|
|
75
|
-
`;
|
|
34
|
+
const PANEL_HEADER_CLASS = 'shrink-0 rounded-t-lg border-b border-b-(--canvas-border-de-emp) bg-(--canvas-background-raised) px-4 py-2 future:rounded-t-2xl';
|
|
35
|
+
const PANEL_CONTENT_CLASS = "min-h-0 flex-1 overflow-x-hidden rounded-b-lg future:rounded-b-2xl [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-(--canvas-background-secondary) [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-(--canvas-border) [&::-webkit-scrollbar-thumb:hover]:bg-(--canvas-border-de-emp)";
|
|
76
36
|
function PanelChrome({ title, header, headerActions, children, onClose, scrollKey, scrollableContent = true }) {
|
|
77
37
|
const contentRef = (0, external_react_namespaceObject.useRef)(null);
|
|
78
38
|
(0, external_react_namespaceObject.useEffect)(()=>{
|
|
@@ -82,7 +42,8 @@ function PanelChrome({ title, header, headerActions, children, onClose, scrollKe
|
|
|
82
42
|
]);
|
|
83
43
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
84
44
|
children: [
|
|
85
|
-
(header || title || onClose) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
|
|
45
|
+
(header || title || onClose) && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
46
|
+
className: PANEL_HEADER_CLASS,
|
|
86
47
|
children: header ?? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
|
|
87
48
|
gap: 8,
|
|
88
49
|
justify: "between",
|
|
@@ -113,9 +74,9 @@ function PanelChrome({ title, header, headerActions, children, onClose, scrollKe
|
|
|
113
74
|
]
|
|
114
75
|
})
|
|
115
76
|
}),
|
|
116
|
-
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(
|
|
77
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
117
78
|
ref: contentRef,
|
|
118
|
-
|
|
79
|
+
className: scrollableContent ? `${PANEL_CONTENT_CLASS} overflow-y-auto` : `${PANEL_CONTENT_CLASS} overflow-y-hidden`,
|
|
119
80
|
children: children
|
|
120
81
|
})
|
|
121
82
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PanelChrome.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/PanelChrome.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"PanelChrome.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/PanelChrome.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAoBvC,MAAM,WAAW,gBAAgB;IAC/B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,MAAM,EACN,aAAa,EACb,QAAQ,EACR,OAAO,EACP,SAAS,EACT,iBAAwB,GACzB,EAAE,gBAAgB,2CA8ClB"}
|
|
@@ -1,40 +1,10 @@
|
|
|
1
1
|
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
-
import styled from "@emotion/styled";
|
|
3
2
|
import { Row } from "../../layouts/index.js";
|
|
4
3
|
import { Button } from "@uipath/apollo-wind";
|
|
5
4
|
import { useEffect, useRef } from "react";
|
|
6
5
|
import { CanvasIcon } from "../../utils/icon-registry.js";
|
|
7
|
-
const
|
|
8
|
-
|
|
9
|
-
padding: 8px 16px;
|
|
10
|
-
background-color: var(--canvas-background-raised);
|
|
11
|
-
border-radius: 8px 8px 0 0;
|
|
12
|
-
flex-shrink: 0;
|
|
13
|
-
`;
|
|
14
|
-
const PanelContent = styled.div`
|
|
15
|
-
flex: 1;
|
|
16
|
-
min-height: 0;
|
|
17
|
-
overflow-y: ${(props)=>false === props.scrollable ? 'hidden' : 'auto'};
|
|
18
|
-
overflow-x: hidden;
|
|
19
|
-
|
|
20
|
-
&::-webkit-scrollbar {
|
|
21
|
-
width: 6px;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
&::-webkit-scrollbar-track {
|
|
25
|
-
background: var(--canvas-background-secondary);
|
|
26
|
-
border-radius: 3px;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
&::-webkit-scrollbar-thumb {
|
|
30
|
-
background: var(--canvas-border);
|
|
31
|
-
border-radius: 3px;
|
|
32
|
-
|
|
33
|
-
&:hover {
|
|
34
|
-
background: var(--canvas-border-de-emp);
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
`;
|
|
6
|
+
const PANEL_HEADER_CLASS = 'shrink-0 rounded-t-lg border-b border-b-(--canvas-border-de-emp) bg-(--canvas-background-raised) px-4 py-2 future:rounded-t-2xl';
|
|
7
|
+
const PANEL_CONTENT_CLASS = "min-h-0 flex-1 overflow-x-hidden rounded-b-lg future:rounded-b-2xl [scrollbar-width:thin] [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-(--canvas-background-secondary) [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-(--canvas-border) [&::-webkit-scrollbar-thumb:hover]:bg-(--canvas-border-de-emp)";
|
|
38
8
|
function PanelChrome({ title, header, headerActions, children, onClose, scrollKey, scrollableContent = true }) {
|
|
39
9
|
const contentRef = useRef(null);
|
|
40
10
|
useEffect(()=>{
|
|
@@ -44,7 +14,8 @@ function PanelChrome({ title, header, headerActions, children, onClose, scrollKe
|
|
|
44
14
|
]);
|
|
45
15
|
return /*#__PURE__*/ jsxs(Fragment, {
|
|
46
16
|
children: [
|
|
47
|
-
(header || title || onClose) && /*#__PURE__*/ jsx(
|
|
17
|
+
(header || title || onClose) && /*#__PURE__*/ jsx("div", {
|
|
18
|
+
className: PANEL_HEADER_CLASS,
|
|
48
19
|
children: header ?? /*#__PURE__*/ jsxs(Row, {
|
|
49
20
|
gap: 8,
|
|
50
21
|
justify: "between",
|
|
@@ -75,9 +46,9 @@ function PanelChrome({ title, header, headerActions, children, onClose, scrollKe
|
|
|
75
46
|
]
|
|
76
47
|
})
|
|
77
48
|
}),
|
|
78
|
-
/*#__PURE__*/ jsx(
|
|
49
|
+
/*#__PURE__*/ jsx("div", {
|
|
79
50
|
ref: contentRef,
|
|
80
|
-
|
|
51
|
+
className: scrollableContent ? `${PANEL_CONTENT_CLASS} overflow-y-auto` : `${PANEL_CONTENT_CLASS} overflow-y-hidden`,
|
|
81
52
|
children: children
|
|
82
53
|
})
|
|
83
54
|
]
|
|
@@ -24,20 +24,27 @@ var __webpack_require__ = {};
|
|
|
24
24
|
var __webpack_exports__ = {};
|
|
25
25
|
__webpack_require__.r(__webpack_exports__);
|
|
26
26
|
__webpack_require__.d(__webpack_exports__, {
|
|
27
|
+
FloatingCanvasPanel: ()=>external_FloatingCanvasPanel_cjs_namespaceObject.FloatingCanvasPanel,
|
|
27
28
|
PanelChrome: ()=>external_PanelChrome_cjs_namespaceObject.PanelChrome,
|
|
28
29
|
useFloatingPosition: ()=>external_useFloatingPosition_cjs_namespaceObject.useFloatingPosition,
|
|
30
|
+
CANVAS_PANEL_FLOATING_SIZE_CLASS: ()=>external_CanvasPanelSurface_cjs_namespaceObject.CANVAS_PANEL_FLOATING_SIZE_CLASS,
|
|
29
31
|
CanvasPortal: ()=>external_CanvasPortal_cjs_namespaceObject.CanvasPortal,
|
|
30
|
-
|
|
32
|
+
CanvasPanelSurface: ()=>external_CanvasPanelSurface_cjs_namespaceObject.CanvasPanelSurface
|
|
31
33
|
});
|
|
34
|
+
const external_CanvasPanelSurface_cjs_namespaceObject = require("./CanvasPanelSurface.cjs");
|
|
32
35
|
const external_CanvasPortal_cjs_namespaceObject = require("./CanvasPortal.cjs");
|
|
33
36
|
const external_FloatingCanvasPanel_cjs_namespaceObject = require("./FloatingCanvasPanel.cjs");
|
|
34
37
|
const external_PanelChrome_cjs_namespaceObject = require("./PanelChrome.cjs");
|
|
35
38
|
const external_useFloatingPosition_cjs_namespaceObject = require("./useFloatingPosition.cjs");
|
|
39
|
+
exports.CANVAS_PANEL_FLOATING_SIZE_CLASS = __webpack_exports__.CANVAS_PANEL_FLOATING_SIZE_CLASS;
|
|
40
|
+
exports.CanvasPanelSurface = __webpack_exports__.CanvasPanelSurface;
|
|
36
41
|
exports.CanvasPortal = __webpack_exports__.CanvasPortal;
|
|
37
42
|
exports.FloatingCanvasPanel = __webpack_exports__.FloatingCanvasPanel;
|
|
38
43
|
exports.PanelChrome = __webpack_exports__.PanelChrome;
|
|
39
44
|
exports.useFloatingPosition = __webpack_exports__.useFloatingPosition;
|
|
40
45
|
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
46
|
+
"CANVAS_PANEL_FLOATING_SIZE_CLASS",
|
|
47
|
+
"CanvasPanelSurface",
|
|
41
48
|
"CanvasPortal",
|
|
42
49
|
"FloatingCanvasPanel",
|
|
43
50
|
"PanelChrome",
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
export type { CanvasPanelSurfaceProps } from './CanvasPanelSurface';
|
|
2
|
+
export { CANVAS_PANEL_FLOATING_SIZE_CLASS, CanvasPanelSurface } from './CanvasPanelSurface';
|
|
1
3
|
export type { CanvasPortalProps } from './CanvasPortal';
|
|
2
4
|
export { CanvasPortal } from './CanvasPortal';
|
|
3
5
|
export type { FloatingCanvasPanelProps } from './FloatingCanvasPanel';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AACpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/FloatingCanvasPanel/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AACpE,OAAO,EAAE,gCAAgC,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC5F,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,wBAAwB,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,0BAA0B,EAAE,MAAM,uBAAuB,CAAC;AACpF,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
import { CANVAS_PANEL_FLOATING_SIZE_CLASS, CanvasPanelSurface } from "./CanvasPanelSurface.js";
|
|
1
2
|
import { CanvasPortal } from "./CanvasPortal.js";
|
|
2
3
|
import { FloatingCanvasPanel } from "./FloatingCanvasPanel.js";
|
|
3
4
|
import { PanelChrome } from "./PanelChrome.js";
|
|
4
5
|
import { useFloatingPosition } from "./useFloatingPosition.js";
|
|
5
|
-
export { CanvasPortal, FloatingCanvasPanel, PanelChrome, useFloatingPosition };
|
|
6
|
+
export { CANVAS_PANEL_FLOATING_SIZE_CLASS, CanvasPanelSurface, CanvasPortal, FloatingCanvasPanel, PanelChrome, useFloatingPosition };
|
|
@@ -134,7 +134,7 @@ function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nod
|
|
|
134
134
|
message: "Description"
|
|
135
135
|
}),
|
|
136
136
|
size: "sm",
|
|
137
|
-
multiline:
|
|
137
|
+
multiline: "wrap",
|
|
138
138
|
maxLines: 3,
|
|
139
139
|
onChange: onNodeDescriptionChange,
|
|
140
140
|
onSubmit: onNodeDescriptionSubmit,
|
|
@@ -106,7 +106,7 @@ function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nod
|
|
|
106
106
|
message: "Description"
|
|
107
107
|
}),
|
|
108
108
|
size: "sm",
|
|
109
|
-
multiline:
|
|
109
|
+
multiline: "wrap",
|
|
110
110
|
maxLines: 3,
|
|
111
111
|
onChange: onNodeDescriptionChange,
|
|
112
112
|
onSubmit: onNodeDescriptionSubmit,
|
|
@@ -28,9 +28,13 @@ __webpack_require__.d(__webpack_exports__, {
|
|
|
28
28
|
});
|
|
29
29
|
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
30
|
const index_cjs_namespaceObject = require("../../layouts/index.cjs");
|
|
31
|
+
const external_utils_index_cjs_namespaceObject = require("../../utils/index.cjs");
|
|
31
32
|
const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
|
|
32
33
|
const external_react_namespaceObject = require("react");
|
|
33
34
|
const icon_registry_cjs_namespaceObject = require("../../utils/icon-registry.cjs");
|
|
35
|
+
const BACK_SLOT_CLASS = 'overflow-hidden transition-[width,opacity,transform,margin] duration-300 ease-in-out';
|
|
36
|
+
const BACK_SLOT_VISIBLE_CLASS = 'mr-2 w-8 translate-x-0 opacity-100';
|
|
37
|
+
const BACK_SLOT_HIDDEN_CLASS = 'mr-0 w-0 translate-x-5 opacity-0';
|
|
34
38
|
const Header_Header = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(function({ title, onBack, showBackButton }) {
|
|
35
39
|
const isBackButtonVisible = showBackButton && onBack;
|
|
36
40
|
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
|
|
@@ -38,23 +42,13 @@ const Header_Header = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(fun
|
|
|
38
42
|
align: "center",
|
|
39
43
|
children: [
|
|
40
44
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
|
|
41
|
-
|
|
42
|
-
width: isBackButtonVisible ? '32px' : '0px',
|
|
43
|
-
opacity: isBackButtonVisible ? 1 : 0,
|
|
44
|
-
transform: isBackButtonVisible ? 'translateX(0)' : 'translateX(20px)',
|
|
45
|
-
marginRight: isBackButtonVisible ? '8px' : '0px',
|
|
46
|
-
transition: 'width 0.3s ease-in-out, opacity 0.3s ease-in-out, transform 0.3s ease-in-out',
|
|
47
|
-
overflow: 'hidden'
|
|
48
|
-
},
|
|
45
|
+
className: (0, external_utils_index_cjs_namespaceObject.cx)(BACK_SLOT_CLASS, isBackButtonVisible ? BACK_SLOT_VISIBLE_CLASS : BACK_SLOT_HIDDEN_CLASS),
|
|
49
46
|
children: isBackButtonVisible && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
|
|
50
47
|
variant: "ghost",
|
|
51
48
|
size: "icon",
|
|
52
|
-
className: "h-8 w-8",
|
|
49
|
+
className: "h-8 w-8 transition-transform duration-300 ease-in-out",
|
|
53
50
|
"aria-label": "Back",
|
|
54
51
|
onClick: onBack,
|
|
55
|
-
style: {
|
|
56
|
-
transition: 'transform 0.3s ease-in-out'
|
|
57
|
-
},
|
|
58
52
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(icon_registry_cjs_namespaceObject.CanvasIcon, {
|
|
59
53
|
icon: "chevron-left",
|
|
60
54
|
size: 20
|
|
@@ -63,10 +57,6 @@ const Header_Header = /*#__PURE__*/ (0, external_react_namespaceObject.memo)(fun
|
|
|
63
57
|
}),
|
|
64
58
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
65
59
|
className: "text-base font-bold",
|
|
66
|
-
style: {
|
|
67
|
-
transition: 'transform 0.3s ease-in-out, margin 0.3s ease-in-out',
|
|
68
|
-
margin: 0
|
|
69
|
-
},
|
|
70
60
|
children: title
|
|
71
61
|
})
|
|
72
62
|
]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Header.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/Toolbox/Header.tsx"],"names":[],"mappings":"AAMA,UAAU,WAAW;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;CACrB;AASD,eAAO,MAAM,MAAM,mDA0BjB,CAAC"}
|