@uipath/apollo-react 6.39.1 → 6.41.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/BaseNode/BaseNode.cjs +3 -1
- package/dist/canvas/components/BaseNode/BaseNode.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/BaseNode.js +3 -1
- package/dist/canvas/components/BaseNode/BaseNodeConfigContext.d.ts +2 -0
- package/dist/canvas/components/BaseNode/BaseNodeConfigContext.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/NodeLabel.cjs +10 -6
- package/dist/canvas/components/BaseNode/NodeLabel.d.ts +3 -1
- package/dist/canvas/components/BaseNode/NodeLabel.d.ts.map +1 -1
- package/dist/canvas/components/BaseNode/NodeLabel.js +10 -6
- package/dist/canvas/components/NodePropertyPanel/EditableText.cjs +189 -0
- package/dist/canvas/components/NodePropertyPanel/EditableText.d.ts +15 -0
- package/dist/canvas/components/NodePropertyPanel/EditableText.d.ts.map +1 -0
- package/dist/canvas/components/NodePropertyPanel/EditableText.js +155 -0
- package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.cjs +51 -10
- package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.d.ts +1 -1
- package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.d.ts.map +1 -1
- package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.js +51 -10
- package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.types.d.ts +7 -0
- package/dist/canvas/components/NodePropertyPanel/NodePropertyPanel.types.d.ts.map +1 -1
- package/dist/canvas/components/NodePropertyPanel/index.cjs +4 -0
- package/dist/canvas/components/NodePropertyPanel/index.d.ts +3 -1
- package/dist/canvas/components/NodePropertyPanel/index.d.ts.map +1 -1
- package/dist/canvas/components/NodePropertyPanel/index.js +2 -1
- package/dist/canvas/locales/en.cjs +1 -1
- package/dist/canvas/locales/en.d.ts.map +1 -1
- package/dist/canvas/locales/en.js +1 -1
- package/dist/canvas/styles/tailwind.canvas.css +1 -1
- package/package.json +3 -3
|
@@ -73,7 +73,7 @@ const getIntrinsicHeight = (hasFooter, footerVariant)=>{
|
|
|
73
73
|
};
|
|
74
74
|
const BaseNodeComponent = (props)=>{
|
|
75
75
|
const { type, data, selected, id, dragging, width, parentId } = props;
|
|
76
|
-
const { onHandleAction: onHandleActionProp, onHandleMouseEnter: onHandleMouseEnterProp, onHandleMouseLeave: onHandleMouseLeaveProp, onActionNeeded, shouldShowAddButtonFn: shouldShowAddButtonFnProp, shouldShowButtonHandleNotchesFn: shouldShowButtonHandleNotchesFnProp, toolbarConfig: toolbarConfigProp, handleConfigurations: handleConfigurationsProp, adornments: adornmentsProp, suggestionType, disabled, executionStatusOverride, labelTooltip, labelBackgroundColor, footerVariant, footerComponent, subLabelComponent, iconComponent } = (0, external_BaseNodeConfigContext_cjs_namespaceObject.useBaseNodeOverrideConfig)();
|
|
76
|
+
const { onHandleAction: onHandleActionProp, onHandleMouseEnter: onHandleMouseEnterProp, onHandleMouseLeave: onHandleMouseLeaveProp, onActionNeeded, shouldShowAddButtonFn: shouldShowAddButtonFnProp, shouldShowButtonHandleNotchesFn: shouldShowButtonHandleNotchesFnProp, toolbarConfig: toolbarConfigProp, handleConfigurations: handleConfigurationsProp, adornments: adornmentsProp, suggestionType, disabled, executionStatusOverride, labelTooltip, labelBackgroundColor, labelPlaceholder, subLabelPlaceholder, footerVariant, footerComponent, subLabelComponent, iconComponent } = (0, external_BaseNodeConfigContext_cjs_namespaceObject.useBaseNodeOverrideConfig)();
|
|
77
77
|
const updateNodeInternals = (0, react_cjs_namespaceObject.useUpdateNodeInternals)();
|
|
78
78
|
const { updateNodeData, updateNode, getNode } = (0, react_cjs_namespaceObject.useReactFlow)();
|
|
79
79
|
const containerRef = (0, external_react_namespaceObject.useRef)(null);
|
|
@@ -498,6 +498,8 @@ const BaseNodeComponent = (props)=>{
|
|
|
498
498
|
subLabel: displaySubLabel,
|
|
499
499
|
labelTooltip: displayLabelTooltip,
|
|
500
500
|
labelBackgroundColor: displayLabelBackgroundColor,
|
|
501
|
+
labelPlaceholder: labelPlaceholder,
|
|
502
|
+
subLabelPlaceholder: subLabelPlaceholder,
|
|
501
503
|
shape: displayShape,
|
|
502
504
|
hasBottomHandles: hasVisibleBottomHandles,
|
|
503
505
|
selected: selected,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA+ChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;
|
|
1
|
+
{"version":3,"file":"BaseNode.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,SAAS,EAAE,MAAM,0CAA0C,CAAC;AA+ChF,OAAO,KAAK,EACV,YAAY,EAIb,MAAM,kBAAkB,CAAC;AAwsB1B,eAAO,MAAM,QAAQ,8CAnqBa,SAAS,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,6CAmqBmB,CAAC"}
|
|
@@ -45,7 +45,7 @@ const getIntrinsicHeight = (hasFooter, footerVariant)=>{
|
|
|
45
45
|
};
|
|
46
46
|
const BaseNodeComponent = (props)=>{
|
|
47
47
|
const { type, data, selected, id, dragging, width, parentId } = props;
|
|
48
|
-
const { onHandleAction: onHandleActionProp, onHandleMouseEnter: onHandleMouseEnterProp, onHandleMouseLeave: onHandleMouseLeaveProp, onActionNeeded, shouldShowAddButtonFn: shouldShowAddButtonFnProp, shouldShowButtonHandleNotchesFn: shouldShowButtonHandleNotchesFnProp, toolbarConfig: toolbarConfigProp, handleConfigurations: handleConfigurationsProp, adornments: adornmentsProp, suggestionType, disabled, executionStatusOverride, labelTooltip, labelBackgroundColor, footerVariant, footerComponent, subLabelComponent, iconComponent } = useBaseNodeOverrideConfig();
|
|
48
|
+
const { onHandleAction: onHandleActionProp, onHandleMouseEnter: onHandleMouseEnterProp, onHandleMouseLeave: onHandleMouseLeaveProp, onActionNeeded, shouldShowAddButtonFn: shouldShowAddButtonFnProp, shouldShowButtonHandleNotchesFn: shouldShowButtonHandleNotchesFnProp, toolbarConfig: toolbarConfigProp, handleConfigurations: handleConfigurationsProp, adornments: adornmentsProp, suggestionType, disabled, executionStatusOverride, labelTooltip, labelBackgroundColor, labelPlaceholder, subLabelPlaceholder, footerVariant, footerComponent, subLabelComponent, iconComponent } = useBaseNodeOverrideConfig();
|
|
49
49
|
const updateNodeInternals = useUpdateNodeInternals();
|
|
50
50
|
const { updateNodeData, updateNode, getNode } = useReactFlow();
|
|
51
51
|
const containerRef = useRef(null);
|
|
@@ -470,6 +470,8 @@ const BaseNodeComponent = (props)=>{
|
|
|
470
470
|
subLabel: displaySubLabel,
|
|
471
471
|
labelTooltip: displayLabelTooltip,
|
|
472
472
|
labelBackgroundColor: displayLabelBackgroundColor,
|
|
473
|
+
labelPlaceholder: labelPlaceholder,
|
|
474
|
+
subLabelPlaceholder: subLabelPlaceholder,
|
|
473
475
|
shape: displayShape,
|
|
474
476
|
hasBottomHandles: hasVisibleBottomHandles,
|
|
475
477
|
selected: selected,
|
|
@@ -25,6 +25,8 @@ export interface BaseNodeOverrideConfig {
|
|
|
25
25
|
executionStatusOverride?: ElementStatusValues;
|
|
26
26
|
labelTooltip?: string;
|
|
27
27
|
labelBackgroundColor?: string;
|
|
28
|
+
labelPlaceholder?: string;
|
|
29
|
+
subLabelPlaceholder?: string;
|
|
28
30
|
footerVariant?: FooterVariant;
|
|
29
31
|
footerComponent?: React.ReactNode;
|
|
30
32
|
subLabelComponent?: React.ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BaseNodeConfigContext.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeConfigContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACxF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AActE,MAAM,WAAW,sBAAsB;IAErC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEpD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAEvD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,aAAa,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC;IACzF,+BAA+B,CAAC,EAAE,CAAC,IAAI,EAAE;QACvC,YAAY,EAAE,OAAO,CAAC;QACtB,UAAU,EAAE,OAAO,CAAC;QACpB,SAAS,EAAE,OAAO,CAAC;KACpB,KAAK,OAAO,CAAC;IAGd,aAAa,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACzC,oBAAoB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7C,UAAU,CAAC,EAAE,cAAc,CAAC;IAG5B,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,mBAAmB,CAAC;IAG9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAMD,eAAO,MAAM,8BAA8B,kDAAyC,CAAC;AAMrF,wBAAgB,yBAAyB,IAAI,sBAAsB,CAElE"}
|
|
1
|
+
{"version":3,"file":"BaseNodeConfigContext.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/BaseNodeConfigContext.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,8BAA8B,CAAC;AACxE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AACxF,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC;AACpD,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AActE,MAAM,WAAW,sBAAsB;IAErC,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAEpD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAEvD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IACvD,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,qBAAqB,CAAC,EAAE,CAAC,IAAI,EAAE;QAAE,aAAa,EAAE,OAAO,CAAC;QAAC,QAAQ,EAAE,OAAO,CAAA;KAAE,KAAK,OAAO,CAAC;IACzF,+BAA+B,CAAC,EAAE,CAAC,IAAI,EAAE;QACvC,YAAY,EAAE,OAAO,CAAC;QACtB,UAAU,EAAE,OAAO,CAAC;QACpB,SAAS,EAAE,OAAO,CAAC;KACpB,KAAK,OAAO,CAAC;IAGd,aAAa,CAAC,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACzC,oBAAoB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7C,UAAU,CAAC,EAAE,cAAc,CAAC;IAG5B,cAAc,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,QAAQ,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uBAAuB,CAAC,EAAE,mBAAmB,CAAC;IAG9C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAE9B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAE7B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,iBAAiB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACjC;AAMD,eAAO,MAAM,8BAA8B,kDAAyC,CAAC;AAMrF,wBAAgB,yBAAyB,IAAI,sBAAsB,CAElE"}
|
|
@@ -103,7 +103,7 @@ const EmptyLabelPlaceholder = ({ disabled, onDoubleClick })=>/*#__PURE__*/ (0, j
|
|
|
103
103
|
"aria-label": "Add node label",
|
|
104
104
|
"data-testid": "empty-label-placeholder"
|
|
105
105
|
});
|
|
106
|
-
const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, discardDraftOnReadonly, onChange })=>{
|
|
106
|
+
const NodeLabelInternal = ({ label = '', subLabel = '', labelPlaceholder = 'Name', subLabelPlaceholder = "Description", labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, discardDraftOnReadonly, onChange })=>{
|
|
107
107
|
const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(false);
|
|
108
108
|
const [localLabel, setLocalLabel] = (0, external_react_namespaceObject.useState)('');
|
|
109
109
|
const [localSubLabel, setLocalSubLabel] = (0, external_react_namespaceObject.useState)('');
|
|
@@ -113,9 +113,13 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
|
|
|
113
113
|
const handleSave = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
114
114
|
setIsEditing(false);
|
|
115
115
|
setFocusTarget(null);
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
116
|
+
const [nextLabel, nextSubLabel] = [
|
|
117
|
+
localLabel.trim(),
|
|
118
|
+
localSubLabel.trim()
|
|
119
|
+
];
|
|
120
|
+
if (nextLabel !== label || nextSubLabel !== subLabel) onChange?.({
|
|
121
|
+
label: nextLabel,
|
|
122
|
+
subLabel: nextSubLabel
|
|
119
123
|
});
|
|
120
124
|
}, [
|
|
121
125
|
localLabel,
|
|
@@ -220,7 +224,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
|
|
|
220
224
|
shape: shape,
|
|
221
225
|
variant: "normal",
|
|
222
226
|
backgroundColor: labelBackgroundColor,
|
|
223
|
-
placeholder:
|
|
227
|
+
placeholder: labelPlaceholder,
|
|
224
228
|
rows: 'rectangle' === shape ? 1 : void 0,
|
|
225
229
|
"aria-label": "Edit node name"
|
|
226
230
|
}),
|
|
@@ -232,7 +236,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
|
|
|
232
236
|
onBlur: handleBlur,
|
|
233
237
|
shape: shape,
|
|
234
238
|
variant: "subtext",
|
|
235
|
-
placeholder:
|
|
239
|
+
placeholder: subLabelPlaceholder,
|
|
236
240
|
rows: 'rectangle' === shape ? 2 : void 0,
|
|
237
241
|
"aria-label": "Edit node description"
|
|
238
242
|
})
|
|
@@ -8,6 +8,8 @@ export declare const BaseTextContainer: ({ hasBottomHandles, shape, children, }:
|
|
|
8
8
|
export interface NodeLabelProps {
|
|
9
9
|
label?: string;
|
|
10
10
|
subLabel?: string;
|
|
11
|
+
labelPlaceholder?: string;
|
|
12
|
+
subLabelPlaceholder?: string;
|
|
11
13
|
labelTooltip?: string;
|
|
12
14
|
labelBackgroundColor?: string;
|
|
13
15
|
shape?: NodeShape;
|
|
@@ -22,6 +24,6 @@ export interface NodeLabelProps {
|
|
|
22
24
|
subLabel: string;
|
|
23
25
|
}) => void;
|
|
24
26
|
}
|
|
25
|
-
export declare const NodeLabel: import("react").MemoExoticComponent<({ label, subLabel, labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, discardDraftOnReadonly, onChange, }: NodeLabelProps) => import("react/jsx-runtime").JSX.Element>;
|
|
27
|
+
export declare const NodeLabel: import("react").MemoExoticComponent<({ label, subLabel, labelPlaceholder, subLabelPlaceholder, labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, discardDraftOnReadonly, onChange, }: NodeLabelProps) => import("react/jsx-runtime").JSX.Element>;
|
|
26
28
|
export {};
|
|
27
29
|
//# sourceMappingURL=NodeLabel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAmBxB,CAAC;AAyKF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"NodeLabel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/BaseNode/NodeLabel.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAI9C,UAAU,sBAAsB;IAC9B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,iBAAiB,GAAI,wCAI/B,sBAAsB,4CAmBxB,CAAC;AAyKF,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;CAClE;AAoMD,eAAO,MAAM,SAAS,kPAnLnB,cAAc,6CAmL+B,CAAC"}
|
|
@@ -74,7 +74,7 @@ const EmptyLabelPlaceholder = ({ disabled, onDoubleClick })=>/*#__PURE__*/ jsx("
|
|
|
74
74
|
"aria-label": "Add node label",
|
|
75
75
|
"data-testid": "empty-label-placeholder"
|
|
76
76
|
});
|
|
77
|
-
const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, discardDraftOnReadonly, onChange })=>{
|
|
77
|
+
const NodeLabelInternal = ({ label = '', subLabel = '', labelPlaceholder = 'Name', subLabelPlaceholder = "Description", labelTooltip, labelBackgroundColor, shape, hasBottomHandles, selected, dragging, centerAdornment, readonly, discardDraftOnReadonly, onChange })=>{
|
|
78
78
|
const [isEditing, setIsEditing] = useState(false);
|
|
79
79
|
const [localLabel, setLocalLabel] = useState('');
|
|
80
80
|
const [localSubLabel, setLocalSubLabel] = useState('');
|
|
@@ -84,9 +84,13 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
|
|
|
84
84
|
const handleSave = useCallback(()=>{
|
|
85
85
|
setIsEditing(false);
|
|
86
86
|
setFocusTarget(null);
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
87
|
+
const [nextLabel, nextSubLabel] = [
|
|
88
|
+
localLabel.trim(),
|
|
89
|
+
localSubLabel.trim()
|
|
90
|
+
];
|
|
91
|
+
if (nextLabel !== label || nextSubLabel !== subLabel) onChange?.({
|
|
92
|
+
label: nextLabel,
|
|
93
|
+
subLabel: nextSubLabel
|
|
90
94
|
});
|
|
91
95
|
}, [
|
|
92
96
|
localLabel,
|
|
@@ -191,7 +195,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
|
|
|
191
195
|
shape: shape,
|
|
192
196
|
variant: "normal",
|
|
193
197
|
backgroundColor: labelBackgroundColor,
|
|
194
|
-
placeholder:
|
|
198
|
+
placeholder: labelPlaceholder,
|
|
195
199
|
rows: 'rectangle' === shape ? 1 : void 0,
|
|
196
200
|
"aria-label": "Edit node name"
|
|
197
201
|
}),
|
|
@@ -203,7 +207,7 @@ const NodeLabelInternal = ({ label = '', subLabel = '', labelTooltip, labelBackg
|
|
|
203
207
|
onBlur: handleBlur,
|
|
204
208
|
shape: shape,
|
|
205
209
|
variant: "subtext",
|
|
206
|
-
placeholder:
|
|
210
|
+
placeholder: subLabelPlaceholder,
|
|
207
211
|
rows: 'rectangle' === shape ? 2 : void 0,
|
|
208
212
|
"aria-label": "Edit node description"
|
|
209
213
|
})
|
|
@@ -0,0 +1,189 @@
|
|
|
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
|
+
EditableText: ()=>EditableText
|
|
28
|
+
});
|
|
29
|
+
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
30
|
+
const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
|
|
31
|
+
const external_react_namespaceObject = require("react");
|
|
32
|
+
const useIsomorphicLayoutEffect_cjs_namespaceObject = require("../../hooks/useIsomorphicLayoutEffect.cjs");
|
|
33
|
+
const external_CanvasTooltip_cjs_namespaceObject = require("../CanvasTooltip.cjs");
|
|
34
|
+
const READ_CLASS = {
|
|
35
|
+
lg: 'text-base font-semibold leading-5 tracking-[-0.3px] text-foreground',
|
|
36
|
+
sm: 'text-xs leading-4 text-foreground-muted'
|
|
37
|
+
};
|
|
38
|
+
const EDIT_CLASS = {
|
|
39
|
+
lg: 'text-base font-semibold leading-5 tracking-[-0.3px]',
|
|
40
|
+
sm: 'text-xs leading-4'
|
|
41
|
+
};
|
|
42
|
+
const LINE_HEIGHT = {
|
|
43
|
+
lg: 20,
|
|
44
|
+
sm: 16
|
|
45
|
+
};
|
|
46
|
+
const VERTICAL_PADDING = 4;
|
|
47
|
+
const CLAMP_CLASS = 'line-clamp-[var(--editable-text-lines)] whitespace-pre-line wrap-break-word';
|
|
48
|
+
const INTERACTIVE_CLASS = 'rounded px-1.5 py-0.5 -mx-1.5';
|
|
49
|
+
const ERROR_RING_CLASS = 'ring-1 ring-error';
|
|
50
|
+
function EditableText({ value, placeholder, size = 'lg', multiline, maxLines = 3, onChange, error, 'aria-label': ariaLabel, className, 'data-testid': dataTestId }) {
|
|
51
|
+
const [isEditing, setIsEditing] = (0, external_react_namespaceObject.useState)(false);
|
|
52
|
+
const [draft, setDraft] = (0, external_react_namespaceObject.useState)(value);
|
|
53
|
+
const inputRef = (0, external_react_namespaceObject.useRef)(null);
|
|
54
|
+
const errorId = `editable-text-${(0, external_react_namespaceObject.useId)().replace(/:/g, '')}-error`;
|
|
55
|
+
const hasError = !!error;
|
|
56
|
+
const describedBy = hasError ? errorId : void 0;
|
|
57
|
+
(0, useIsomorphicLayoutEffect_cjs_namespaceObject.useIsomorphicLayoutEffect)(()=>{
|
|
58
|
+
if (!isEditing) return;
|
|
59
|
+
inputRef.current?.focus();
|
|
60
|
+
inputRef.current?.select();
|
|
61
|
+
}, [
|
|
62
|
+
isEditing
|
|
63
|
+
]);
|
|
64
|
+
const commit = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
65
|
+
setIsEditing(false);
|
|
66
|
+
const next = draft.trim();
|
|
67
|
+
if (next !== value) onChange?.(next);
|
|
68
|
+
}, [
|
|
69
|
+
draft,
|
|
70
|
+
value,
|
|
71
|
+
onChange
|
|
72
|
+
]);
|
|
73
|
+
const cancel = (0, external_react_namespaceObject.useCallback)(()=>{
|
|
74
|
+
setIsEditing(false);
|
|
75
|
+
}, []);
|
|
76
|
+
const handleKeyDown = (0, external_react_namespaceObject.useCallback)((e)=>{
|
|
77
|
+
if ('Enter' !== e.key || multiline && e.shiftKey) {
|
|
78
|
+
if ('Escape' === e.key) {
|
|
79
|
+
e.preventDefault();
|
|
80
|
+
cancel();
|
|
81
|
+
}
|
|
82
|
+
} else {
|
|
83
|
+
e.preventDefault();
|
|
84
|
+
commit();
|
|
85
|
+
}
|
|
86
|
+
e.stopPropagation();
|
|
87
|
+
}, [
|
|
88
|
+
commit,
|
|
89
|
+
cancel,
|
|
90
|
+
multiline
|
|
91
|
+
]);
|
|
92
|
+
const editorMaxHeight = multiline ? {
|
|
93
|
+
maxHeight: maxLines * LINE_HEIGHT[size] + VERTICAL_PADDING
|
|
94
|
+
} : void 0;
|
|
95
|
+
const readClampStyle = multiline ? {
|
|
96
|
+
'--editable-text-lines': maxLines
|
|
97
|
+
} : void 0;
|
|
98
|
+
const readClampClass = multiline ? CLAMP_CLASS : 'block truncate';
|
|
99
|
+
const message = /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.FormFieldError, {
|
|
100
|
+
id: errorId,
|
|
101
|
+
"data-slot": "editable-text-error",
|
|
102
|
+
className: "-ml-1 mt-1",
|
|
103
|
+
children: error
|
|
104
|
+
});
|
|
105
|
+
if (!onChange) return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
106
|
+
children: [
|
|
107
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
|
|
108
|
+
content: value || placeholder,
|
|
109
|
+
smartTooltip: true,
|
|
110
|
+
delay: true,
|
|
111
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("span", {
|
|
112
|
+
"data-slot": "editable-text",
|
|
113
|
+
"data-testid": dataTestId,
|
|
114
|
+
"aria-describedby": describedBy,
|
|
115
|
+
style: readClampStyle,
|
|
116
|
+
className: (0, apollo_wind_namespaceObject.cn)(readClampClass, READ_CLASS[size], !value && 'text-foreground-subtle', hasError && (0, apollo_wind_namespaceObject.cn)(INTERACTIVE_CLASS, ERROR_RING_CLASS), className),
|
|
117
|
+
children: value || placeholder
|
|
118
|
+
})
|
|
119
|
+
}),
|
|
120
|
+
message
|
|
121
|
+
]
|
|
122
|
+
});
|
|
123
|
+
if (isEditing) {
|
|
124
|
+
const sharedProps = {
|
|
125
|
+
'data-slot': 'editable-text-input',
|
|
126
|
+
'data-testid': dataTestId ? `${dataTestId}-input` : void 0,
|
|
127
|
+
value: draft,
|
|
128
|
+
placeholder,
|
|
129
|
+
'aria-label': ariaLabel,
|
|
130
|
+
'aria-describedby': describedBy,
|
|
131
|
+
'aria-errormessage': hasError ? errorId : void 0,
|
|
132
|
+
'aria-invalid': hasError || void 0,
|
|
133
|
+
onKeyDown: handleKeyDown,
|
|
134
|
+
onBlur: commit,
|
|
135
|
+
className: (0, apollo_wind_namespaceObject.cn)('nodrag nowheel w-full min-w-0 border-none bg-surface-overlay text-foreground outline-none ring-1', hasError ? 'ring-error' : 'ring-brand', INTERACTIVE_CLASS, EDIT_CLASS[size], className)
|
|
136
|
+
};
|
|
137
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
138
|
+
children: [
|
|
139
|
+
multiline ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("textarea", {
|
|
140
|
+
...sharedProps,
|
|
141
|
+
ref: inputRef,
|
|
142
|
+
rows: 1,
|
|
143
|
+
style: editorMaxHeight,
|
|
144
|
+
className: (0, apollo_wind_namespaceObject.cn)(sharedProps.className, 'field-sizing-content max-w-full resize-none overflow-y-auto wrap-break-word'),
|
|
145
|
+
onChange: (e)=>setDraft(e.target.value)
|
|
146
|
+
}) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("input", {
|
|
147
|
+
...sharedProps,
|
|
148
|
+
ref: inputRef,
|
|
149
|
+
autoComplete: "off",
|
|
150
|
+
onChange: (e)=>setDraft(e.target.value)
|
|
151
|
+
}),
|
|
152
|
+
message
|
|
153
|
+
]
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(jsx_runtime_namespaceObject.Fragment, {
|
|
157
|
+
children: [
|
|
158
|
+
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_CanvasTooltip_cjs_namespaceObject.CanvasTooltip, {
|
|
159
|
+
content: value || placeholder,
|
|
160
|
+
smartTooltip: true,
|
|
161
|
+
delay: true,
|
|
162
|
+
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
|
|
163
|
+
type: "button",
|
|
164
|
+
"data-slot": "editable-text",
|
|
165
|
+
"data-testid": dataTestId,
|
|
166
|
+
"aria-label": ariaLabel && `${ariaLabel}: ${value || placeholder || ''}`,
|
|
167
|
+
"aria-describedby": describedBy,
|
|
168
|
+
"aria-errormessage": hasError ? errorId : void 0,
|
|
169
|
+
"aria-invalid": hasError || void 0,
|
|
170
|
+
onClick: ()=>{
|
|
171
|
+
setDraft(value);
|
|
172
|
+
setIsEditing(true);
|
|
173
|
+
},
|
|
174
|
+
style: readClampStyle,
|
|
175
|
+
className: (0, apollo_wind_namespaceObject.cn)('nodrag max-w-full cursor-text border-none bg-transparent text-left transition hover:bg-surface-overlay', readClampClass, INTERACTIVE_CLASS, READ_CLASS[size], !value && 'text-foreground-subtle', hasError && ERROR_RING_CLASS, className),
|
|
176
|
+
children: value || placeholder
|
|
177
|
+
})
|
|
178
|
+
}),
|
|
179
|
+
message
|
|
180
|
+
]
|
|
181
|
+
});
|
|
182
|
+
}
|
|
183
|
+
exports.EditableText = __webpack_exports__.EditableText;
|
|
184
|
+
for(var __rspack_i in __webpack_exports__)if (-1 === [
|
|
185
|
+
"EditableText"
|
|
186
|
+
].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
|
|
187
|
+
Object.defineProperty(exports, '__esModule', {
|
|
188
|
+
value: true
|
|
189
|
+
});
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { type ReactNode } from 'react';
|
|
2
|
+
export interface EditableTextProps {
|
|
3
|
+
value: string;
|
|
4
|
+
placeholder?: string;
|
|
5
|
+
size?: 'sm' | 'lg';
|
|
6
|
+
multiline?: boolean;
|
|
7
|
+
maxLines?: number;
|
|
8
|
+
onChange?: (next: string) => void;
|
|
9
|
+
error?: ReactNode;
|
|
10
|
+
'aria-label'?: string;
|
|
11
|
+
className?: string;
|
|
12
|
+
'data-testid'?: string;
|
|
13
|
+
}
|
|
14
|
+
export declare function EditableText({ value, placeholder, size, multiline, maxLines, onChange, error, 'aria-label': ariaLabel, className, 'data-testid': dataTestId, }: EditableTextProps): import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
//# sourceMappingURL=EditableText.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/EditableText.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAwC,MAAM,OAAO,CAAC;AAI7E,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAEnB,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAElC,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAgCD,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,WAAW,EACX,IAAW,EACX,SAAS,EACT,QAAY,EACZ,QAAQ,EACR,KAAK,EACL,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,aAAa,EAAE,UAAU,GAC1B,EAAE,iBAAiB,2CAmKnB"}
|
|
@@ -0,0 +1,155 @@
|
|
|
1
|
+
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { FormFieldError, cn } from "@uipath/apollo-wind";
|
|
3
|
+
import { useCallback, useId, useRef, useState } from "react";
|
|
4
|
+
import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
|
|
5
|
+
import { CanvasTooltip } from "../CanvasTooltip.js";
|
|
6
|
+
const READ_CLASS = {
|
|
7
|
+
lg: 'text-base font-semibold leading-5 tracking-[-0.3px] text-foreground',
|
|
8
|
+
sm: 'text-xs leading-4 text-foreground-muted'
|
|
9
|
+
};
|
|
10
|
+
const EDIT_CLASS = {
|
|
11
|
+
lg: 'text-base font-semibold leading-5 tracking-[-0.3px]',
|
|
12
|
+
sm: 'text-xs leading-4'
|
|
13
|
+
};
|
|
14
|
+
const LINE_HEIGHT = {
|
|
15
|
+
lg: 20,
|
|
16
|
+
sm: 16
|
|
17
|
+
};
|
|
18
|
+
const VERTICAL_PADDING = 4;
|
|
19
|
+
const CLAMP_CLASS = 'line-clamp-[var(--editable-text-lines)] whitespace-pre-line wrap-break-word';
|
|
20
|
+
const INTERACTIVE_CLASS = 'rounded px-1.5 py-0.5 -mx-1.5';
|
|
21
|
+
const ERROR_RING_CLASS = 'ring-1 ring-error';
|
|
22
|
+
function EditableText({ value, placeholder, size = 'lg', multiline, maxLines = 3, onChange, error, 'aria-label': ariaLabel, className, 'data-testid': dataTestId }) {
|
|
23
|
+
const [isEditing, setIsEditing] = useState(false);
|
|
24
|
+
const [draft, setDraft] = useState(value);
|
|
25
|
+
const inputRef = useRef(null);
|
|
26
|
+
const errorId = `editable-text-${useId().replace(/:/g, '')}-error`;
|
|
27
|
+
const hasError = !!error;
|
|
28
|
+
const describedBy = hasError ? errorId : void 0;
|
|
29
|
+
useIsomorphicLayoutEffect(()=>{
|
|
30
|
+
if (!isEditing) return;
|
|
31
|
+
inputRef.current?.focus();
|
|
32
|
+
inputRef.current?.select();
|
|
33
|
+
}, [
|
|
34
|
+
isEditing
|
|
35
|
+
]);
|
|
36
|
+
const commit = useCallback(()=>{
|
|
37
|
+
setIsEditing(false);
|
|
38
|
+
const next = draft.trim();
|
|
39
|
+
if (next !== value) onChange?.(next);
|
|
40
|
+
}, [
|
|
41
|
+
draft,
|
|
42
|
+
value,
|
|
43
|
+
onChange
|
|
44
|
+
]);
|
|
45
|
+
const cancel = useCallback(()=>{
|
|
46
|
+
setIsEditing(false);
|
|
47
|
+
}, []);
|
|
48
|
+
const handleKeyDown = useCallback((e)=>{
|
|
49
|
+
if ('Enter' !== e.key || multiline && e.shiftKey) {
|
|
50
|
+
if ('Escape' === e.key) {
|
|
51
|
+
e.preventDefault();
|
|
52
|
+
cancel();
|
|
53
|
+
}
|
|
54
|
+
} else {
|
|
55
|
+
e.preventDefault();
|
|
56
|
+
commit();
|
|
57
|
+
}
|
|
58
|
+
e.stopPropagation();
|
|
59
|
+
}, [
|
|
60
|
+
commit,
|
|
61
|
+
cancel,
|
|
62
|
+
multiline
|
|
63
|
+
]);
|
|
64
|
+
const editorMaxHeight = multiline ? {
|
|
65
|
+
maxHeight: maxLines * LINE_HEIGHT[size] + VERTICAL_PADDING
|
|
66
|
+
} : void 0;
|
|
67
|
+
const readClampStyle = multiline ? {
|
|
68
|
+
'--editable-text-lines': maxLines
|
|
69
|
+
} : void 0;
|
|
70
|
+
const readClampClass = multiline ? CLAMP_CLASS : 'block truncate';
|
|
71
|
+
const message = /*#__PURE__*/ jsx(FormFieldError, {
|
|
72
|
+
id: errorId,
|
|
73
|
+
"data-slot": "editable-text-error",
|
|
74
|
+
className: "-ml-1 mt-1",
|
|
75
|
+
children: error
|
|
76
|
+
});
|
|
77
|
+
if (!onChange) return /*#__PURE__*/ jsxs(Fragment, {
|
|
78
|
+
children: [
|
|
79
|
+
/*#__PURE__*/ jsx(CanvasTooltip, {
|
|
80
|
+
content: value || placeholder,
|
|
81
|
+
smartTooltip: true,
|
|
82
|
+
delay: true,
|
|
83
|
+
children: /*#__PURE__*/ jsx("span", {
|
|
84
|
+
"data-slot": "editable-text",
|
|
85
|
+
"data-testid": dataTestId,
|
|
86
|
+
"aria-describedby": describedBy,
|
|
87
|
+
style: readClampStyle,
|
|
88
|
+
className: cn(readClampClass, READ_CLASS[size], !value && 'text-foreground-subtle', hasError && cn(INTERACTIVE_CLASS, ERROR_RING_CLASS), className),
|
|
89
|
+
children: value || placeholder
|
|
90
|
+
})
|
|
91
|
+
}),
|
|
92
|
+
message
|
|
93
|
+
]
|
|
94
|
+
});
|
|
95
|
+
if (isEditing) {
|
|
96
|
+
const sharedProps = {
|
|
97
|
+
'data-slot': 'editable-text-input',
|
|
98
|
+
'data-testid': dataTestId ? `${dataTestId}-input` : void 0,
|
|
99
|
+
value: draft,
|
|
100
|
+
placeholder,
|
|
101
|
+
'aria-label': ariaLabel,
|
|
102
|
+
'aria-describedby': describedBy,
|
|
103
|
+
'aria-errormessage': hasError ? errorId : void 0,
|
|
104
|
+
'aria-invalid': hasError || void 0,
|
|
105
|
+
onKeyDown: handleKeyDown,
|
|
106
|
+
onBlur: commit,
|
|
107
|
+
className: cn('nodrag nowheel w-full min-w-0 border-none bg-surface-overlay text-foreground outline-none ring-1', hasError ? 'ring-error' : 'ring-brand', INTERACTIVE_CLASS, EDIT_CLASS[size], className)
|
|
108
|
+
};
|
|
109
|
+
return /*#__PURE__*/ jsxs(Fragment, {
|
|
110
|
+
children: [
|
|
111
|
+
multiline ? /*#__PURE__*/ jsx("textarea", {
|
|
112
|
+
...sharedProps,
|
|
113
|
+
ref: inputRef,
|
|
114
|
+
rows: 1,
|
|
115
|
+
style: editorMaxHeight,
|
|
116
|
+
className: cn(sharedProps.className, 'field-sizing-content max-w-full resize-none overflow-y-auto wrap-break-word'),
|
|
117
|
+
onChange: (e)=>setDraft(e.target.value)
|
|
118
|
+
}) : /*#__PURE__*/ jsx("input", {
|
|
119
|
+
...sharedProps,
|
|
120
|
+
ref: inputRef,
|
|
121
|
+
autoComplete: "off",
|
|
122
|
+
onChange: (e)=>setDraft(e.target.value)
|
|
123
|
+
}),
|
|
124
|
+
message
|
|
125
|
+
]
|
|
126
|
+
});
|
|
127
|
+
}
|
|
128
|
+
return /*#__PURE__*/ jsxs(Fragment, {
|
|
129
|
+
children: [
|
|
130
|
+
/*#__PURE__*/ jsx(CanvasTooltip, {
|
|
131
|
+
content: value || placeholder,
|
|
132
|
+
smartTooltip: true,
|
|
133
|
+
delay: true,
|
|
134
|
+
children: /*#__PURE__*/ jsx("button", {
|
|
135
|
+
type: "button",
|
|
136
|
+
"data-slot": "editable-text",
|
|
137
|
+
"data-testid": dataTestId,
|
|
138
|
+
"aria-label": ariaLabel && `${ariaLabel}: ${value || placeholder || ''}`,
|
|
139
|
+
"aria-describedby": describedBy,
|
|
140
|
+
"aria-errormessage": hasError ? errorId : void 0,
|
|
141
|
+
"aria-invalid": hasError || void 0,
|
|
142
|
+
onClick: ()=>{
|
|
143
|
+
setDraft(value);
|
|
144
|
+
setIsEditing(true);
|
|
145
|
+
},
|
|
146
|
+
style: readClampStyle,
|
|
147
|
+
className: cn('nodrag max-w-full cursor-text border-none bg-transparent text-left transition hover:bg-surface-overlay', readClampClass, INTERACTIVE_CLASS, READ_CLASS[size], !value && 'text-foreground-subtle', hasError && ERROR_RING_CLASS, className),
|
|
148
|
+
children: value || placeholder
|
|
149
|
+
})
|
|
150
|
+
}),
|
|
151
|
+
message
|
|
152
|
+
]
|
|
153
|
+
});
|
|
154
|
+
}
|
|
155
|
+
export { EditableText };
|
|
@@ -30,9 +30,16 @@ const jsx_runtime_namespaceObject = require("react/jsx-runtime");
|
|
|
30
30
|
const apollo_wind_namespaceObject = require("@uipath/apollo-wind");
|
|
31
31
|
const external_lucide_react_namespaceObject = require("lucide-react");
|
|
32
32
|
const external_react_namespaceObject = require("react");
|
|
33
|
+
const index_cjs_namespaceObject = require("../../../i18n/index.cjs");
|
|
34
|
+
const external_EditableText_cjs_namespaceObject = require("./EditableText.cjs");
|
|
33
35
|
const SURFACE_REMAP = 'future:[--surface-raised:var(--surface-overlay)]';
|
|
34
|
-
function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nodeLabel, nodeCategory, action, schema, plugins, onSubmit, disabled, autoComplete, resetKey, className, contentInset = '1.5rem', children, headerExtra, sectionVariant, activeStepId, onActiveStepChange }) {
|
|
35
|
-
const
|
|
36
|
+
function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nodeLabel, nodeCategory, nodeDescription, nodeLabelPlaceholder, nodeDescriptionPlaceholder, onNodeLabelChange, onNodeDescriptionChange, nodeLabelError, nodeDescriptionError, action, schema, plugins, onSubmit, disabled, autoComplete, resetKey, className, contentInset = '1.5rem', children, headerExtra, sectionVariant, activeStepId, onActiveStepChange }) {
|
|
37
|
+
const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
|
|
38
|
+
const isLabelEditable = !!onNodeLabelChange;
|
|
39
|
+
const isDescriptionEditable = !!onNodeDescriptionChange;
|
|
40
|
+
const showsDescription = !!nodeDescription || isDescriptionEditable || !!nodeDescriptionError;
|
|
41
|
+
const showsLabel = !!nodeLabel || isLabelEditable || !!nodeLabelError;
|
|
42
|
+
const hasNodeHeader = !!(showsLabel || nodeCategory || nodeIcon || action || showsDescription);
|
|
36
43
|
const formSchema = (0, external_react_namespaceObject.useMemo)(()=>schema && void 0 === schema.actions ? {
|
|
37
44
|
...schema,
|
|
38
45
|
actions: []
|
|
@@ -73,8 +80,14 @@ function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nod
|
|
|
73
80
|
onClose && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("button", {
|
|
74
81
|
type: "button",
|
|
75
82
|
onClick: onClose,
|
|
76
|
-
title:
|
|
77
|
-
|
|
83
|
+
title: _({
|
|
84
|
+
id: 'canvas.node_property_panel.close',
|
|
85
|
+
message: 'Close'
|
|
86
|
+
}),
|
|
87
|
+
"aria-label": _({
|
|
88
|
+
id: 'canvas.node_property_panel.close',
|
|
89
|
+
message: 'Close'
|
|
90
|
+
}),
|
|
78
91
|
className: "grid size-6 place-items-center rounded text-foreground-muted transition hover:bg-surface-overlay hover:text-foreground",
|
|
79
92
|
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_lucide_react_namespaceObject.X, {
|
|
80
93
|
size: 14
|
|
@@ -97,13 +110,41 @@ function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nod
|
|
|
97
110
|
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
|
|
98
111
|
className: "flex min-w-0 flex-1 flex-col justify-center",
|
|
99
112
|
children: [
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
113
|
+
showsLabel && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_EditableText_cjs_namespaceObject.EditableText, {
|
|
114
|
+
value: nodeLabel ?? '',
|
|
115
|
+
placeholder: nodeLabelPlaceholder ?? _({
|
|
116
|
+
id: 'canvas.node_property_panel.name_placeholder',
|
|
117
|
+
message: 'Name'
|
|
118
|
+
}),
|
|
119
|
+
size: "lg",
|
|
120
|
+
onChange: onNodeLabelChange,
|
|
121
|
+
error: nodeLabelError,
|
|
122
|
+
"aria-label": _({
|
|
123
|
+
id: 'canvas.node_property_panel.node_name',
|
|
124
|
+
message: 'Node name'
|
|
125
|
+
}),
|
|
126
|
+
"data-testid": "node-property-panel-label"
|
|
103
127
|
}),
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
128
|
+
showsDescription ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_EditableText_cjs_namespaceObject.EditableText, {
|
|
129
|
+
value: nodeDescription ?? '',
|
|
130
|
+
placeholder: nodeDescriptionPlaceholder ?? _({
|
|
131
|
+
id: "canvas.node_property_panel.description_placeholder",
|
|
132
|
+
message: "Description"
|
|
133
|
+
}),
|
|
134
|
+
size: "sm",
|
|
135
|
+
multiline: true,
|
|
136
|
+
maxLines: 3,
|
|
137
|
+
onChange: onNodeDescriptionChange,
|
|
138
|
+
error: nodeDescriptionError,
|
|
139
|
+
"aria-label": _({
|
|
140
|
+
id: "canvas.node_property_panel.node_description",
|
|
141
|
+
message: "Node description"
|
|
142
|
+
}),
|
|
143
|
+
"data-testid": "node-property-panel-description"
|
|
144
|
+
}) : nodeCategory && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_EditableText_cjs_namespaceObject.EditableText, {
|
|
145
|
+
value: nodeCategory,
|
|
146
|
+
size: "sm",
|
|
147
|
+
"data-testid": "node-property-panel-category"
|
|
107
148
|
})
|
|
108
149
|
]
|
|
109
150
|
})
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
import type { NodePropertyPanelProps } from './NodePropertyPanel.types';
|
|
2
|
-
export declare function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nodeLabel, nodeCategory, action, schema, plugins, onSubmit, disabled, autoComplete, resetKey, className, contentInset, children, headerExtra, sectionVariant, activeStepId, onActiveStepChange, }: NodePropertyPanelProps): import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare function NodePropertyPanel({ panelTitle, dragHandleProps, onClose, nodeIcon, nodeLabel, nodeCategory, nodeDescription, nodeLabelPlaceholder, nodeDescriptionPlaceholder, onNodeLabelChange, onNodeDescriptionChange, nodeLabelError, nodeDescriptionError, action, schema, plugins, onSubmit, disabled, autoComplete, resetKey, className, contentInset, children, headerExtra, sectionVariant, activeStepId, onActiveStepChange, }: NodePropertyPanelProps): import("react/jsx-runtime").JSX.Element;
|
|
3
3
|
//# sourceMappingURL=NodePropertyPanel.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NodePropertyPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"NodePropertyPanel.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/NodePropertyPanel/NodePropertyPanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAuCxE,wBAAgB,iBAAiB,CAAC,EAChC,UAAU,EACV,eAAe,EACf,OAAO,EACP,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,oBAAoB,EACpB,0BAA0B,EAC1B,iBAAiB,EACjB,uBAAuB,EACvB,cAAc,EACd,oBAAoB,EACpB,MAAM,EACN,MAAM,EACN,OAAO,EACP,QAAQ,EACR,QAAQ,EACR,YAAY,EACZ,QAAQ,EACR,SAAS,EACT,YAAuB,EACvB,QAAQ,EACR,WAAW,EACX,cAAc,EACd,YAAY,EACZ,kBAAkB,GACnB,EAAE,sBAAsB,2CAqKxB"}
|