@uipath/apollo-react 3.29.1 → 3.29.2

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.
Files changed (4) hide show
  1. package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.cjs +34 -13
  2. package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.d.ts.map +1 -1
  3. package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.js +34 -13
  4. package/package.json +1 -1
package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.cjs CHANGED
@@ -27,11 +27,13 @@ __webpack_require__.d(__webpack_exports__, {
27
27
  SuggestionGroupPanel: ()=>SuggestionGroupPanel
28
28
  });
29
29
  const jsx_runtime_namespaceObject = require("react/jsx-runtime");
30
+ const material_namespaceObject = require("@mui/material");
30
31
  const apollo_core_namespaceObject = require("@uipath/apollo-core");
31
32
  const index_cjs_namespaceObject = require("../../../layouts/index.cjs");
33
+ const react_cjs_namespaceObject = require("../../../xyflow/react.cjs");
32
34
  const external_material_index_cjs_namespaceObject = require("../../../../material/index.cjs");
33
35
  const external_react_namespaceObject = require("react");
34
- const RejectAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApButton, {
36
+ const RejectAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApButton, {
35
37
  variant: "tertiary",
36
38
  size: "small",
37
39
  label: "Reject all",
@@ -39,9 +41,13 @@ const RejectAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ (0, jsx_ru
39
41
  variant: "outlined",
40
42
  name: "close"
41
43
  }),
42
- onClick: ()=>onClick(suggestionGroup.id)
44
+ onClick: ()=>onClick(suggestionGroup.id),
45
+ sx: compact ? {
46
+ fontSize: '0.75rem',
47
+ minWidth: 'auto'
48
+ } : void 0
43
49
  });
44
- const AcceptAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApButton, {
50
+ const AcceptAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApButton, {
45
51
  variant: "primary",
46
52
  size: "small",
47
53
  label: "Accept all",
@@ -49,7 +55,11 @@ const AcceptAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ (0, jsx_ru
49
55
  variant: "outlined",
50
56
  name: "check"
51
57
  }),
52
- onClick: ()=>onClick(suggestionGroup.id)
58
+ onClick: ()=>onClick(suggestionGroup.id),
59
+ sx: compact ? {
60
+ fontSize: '0.75rem',
61
+ minWidth: 'auto'
62
+ } : void 0
53
63
  });
54
64
  const Divider = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
55
65
  style: {
@@ -58,15 +68,16 @@ const Divider = ()=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
58
68
  backgroundColor: 'var(--uix-canvas-border)'
59
69
  }
60
70
  });
61
- const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavigatePrevious })=>{
71
+ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavigatePrevious, compact })=>{
62
72
  const [isHoveringUp, setIsHoveringUp] = (0, external_react_namespaceObject.useState)(false);
63
73
  const [isHoveringDown, setIsHoveringDown] = (0, external_react_namespaceObject.useState)(false);
74
+ const iconSize = compact ? '16px' : '20px';
64
75
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
65
76
  style: {
66
77
  display: 'flex',
67
78
  alignItems: 'center',
68
79
  gap: apollo_core_namespaceObject.Spacing.SpacingMicro,
69
- minWidth: '100px'
80
+ minWidth: compact ? '80px' : '100px'
70
81
  },
71
82
  children: [
72
83
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIconButton, {
@@ -76,11 +87,11 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
76
87
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
77
88
  name: "keyboard_arrow_up",
78
89
  color: isHoveringUp ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
79
- size: "20px"
90
+ size: iconSize
80
91
  })
81
92
  }),
82
93
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_material_index_cjs_namespaceObject.ApTypography, {
83
- variant: apollo_core_namespaceObject.FontVariantToken.fontSizeMBold,
94
+ variant: compact ? apollo_core_namespaceObject.FontVariantToken.fontSizeSBold : apollo_core_namespaceObject.FontVariantToken.fontSizeMBold,
84
95
  color: "var(--uix-canvas-foreground-de-emp)",
85
96
  children: [
86
97
  currentIndex + 1,
@@ -95,13 +106,17 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
95
106
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(external_material_index_cjs_namespaceObject.ApIcon, {
96
107
  name: "keyboard_arrow_down",
97
108
  color: isHoveringDown ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
98
- size: "20px"
109
+ size: iconSize
99
110
  })
100
111
  })
101
112
  ]
102
113
  });
103
114
  };
104
115
  const SuggestionGroupPanel = ({ suggestionGroup, onRejectAll, onAcceptAll, currentIndex = 0, onNavigateNext, onNavigatePrevious })=>{
116
+ const theme = (0, material_namespaceObject.useTheme)();
117
+ const canvasWidth = (0, react_cjs_namespaceObject.useStore)((state)=>state.width);
118
+ const smBreakpoint = theme.breakpoints.values.sm;
119
+ const isCompact = canvasWidth < smBreakpoint;
105
120
  const nonStandaloneSuggestions = suggestionGroup?.suggestions.filter((s)=>!s.isStandalone) ?? [];
106
121
  const placeholderCount = nonStandaloneSuggestions.length;
107
122
  return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(jsx_runtime_namespaceObject.Fragment, {
@@ -118,23 +133,29 @@ const SuggestionGroupPanel = ({ suggestionGroup, onRejectAll, onAcceptAll, curre
118
133
  },
119
134
  children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(index_cjs_namespaceObject.Row, {
120
135
  align: "center",
121
- gap: apollo_core_namespaceObject.Spacing.SpacingS,
136
+ gap: isCompact ? apollo_core_namespaceObject.Spacing.SpacingXs : apollo_core_namespaceObject.Spacing.SpacingS,
122
137
  justify: "space-evenly",
138
+ style: {
139
+ whiteSpace: 'nowrap'
140
+ },
123
141
  children: [
124
142
  onRejectAll && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(RejectAllButton, {
125
143
  suggestionGroup: suggestionGroup,
126
- onClick: onRejectAll
144
+ onClick: onRejectAll,
145
+ compact: isCompact
127
146
  }),
128
147
  onAcceptAll && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(AcceptAllButton, {
129
148
  suggestionGroup: suggestionGroup,
130
- onClick: onAcceptAll
149
+ onClick: onAcceptAll,
150
+ compact: isCompact
131
151
  }),
132
152
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Divider, {}),
133
153
  /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(SuggestionGroupNavigator, {
134
154
  currentIndex: currentIndex,
135
155
  total: placeholderCount,
136
156
  onNavigateNext: onNavigateNext,
137
- onNavigatePrevious: onNavigatePrevious
157
+ onNavigatePrevious: onNavigatePrevious,
158
+ compact: isCompact
138
159
  })
139
160
  ]
140
161
  })
package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"SuggestionGroupPanel.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/components/SuggestionGroupPanel.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,UAAU,yBAAyB;IACjC,eAAe,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAgGD,eAAO,MAAM,oBAAoB,GAAI,kGAOlC,yBAAyB,4CAwC3B,CAAC"}
1
+ {"version":3,"file":"SuggestionGroupPanel.d.ts","sourceRoot":"","sources":["../../../../../src/canvas/components/AgentCanvas/components/SuggestionGroupPanel.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,gBAAgB,CAAC;AAE/D,UAAU,yBAAyB;IACjC,eAAe,CAAC,EAAE,wBAAwB,GAAG,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,CAAC,iBAAiB,EAAE,MAAM,KAAK,IAAI,CAAC;IAClD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,kBAAkB,CAAC,EAAE,MAAM,IAAI,CAAC;CACjC;AAuGD,eAAO,MAAM,oBAAoB,GAAI,kGAOlC,yBAAyB,4CA2D3B,CAAC"}
package/dist/canvas/components/AgentCanvas/components/SuggestionGroupPanel.js CHANGED
@@ -1,9 +1,11 @@
1
1
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
2
+ import { useTheme } from "@mui/material";
2
3
  import { FontVariantToken, Spacing } from "@uipath/apollo-core";
3
4
  import { Column, Row } from "../../../layouts/index.js";
5
+ import { useStore } from "../../../xyflow/react.js";
4
6
  import { ApButton, ApIcon, ApIconButton, ApTypography } from "../../../../material/index.js";
5
7
  import { useState } from "react";
6
- const RejectAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ jsx(ApButton, {
8
+ const RejectAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ jsx(ApButton, {
7
9
  variant: "tertiary",
8
10
  size: "small",
9
11
  label: "Reject all",
@@ -11,9 +13,13 @@ const RejectAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ jsx(ApButt
11
13
  variant: "outlined",
12
14
  name: "close"
13
15
  }),
14
- onClick: ()=>onClick(suggestionGroup.id)
16
+ onClick: ()=>onClick(suggestionGroup.id),
17
+ sx: compact ? {
18
+ fontSize: '0.75rem',
19
+ minWidth: 'auto'
20
+ } : void 0
15
21
  });
16
- const AcceptAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ jsx(ApButton, {
22
+ const AcceptAllButton = ({ suggestionGroup, onClick, compact })=>/*#__PURE__*/ jsx(ApButton, {
17
23
  variant: "primary",
18
24
  size: "small",
19
25
  label: "Accept all",
@@ -21,7 +27,11 @@ const AcceptAllButton = ({ suggestionGroup, onClick })=>/*#__PURE__*/ jsx(ApButt
21
27
  variant: "outlined",
22
28
  name: "check"
23
29
  }),
24
- onClick: ()=>onClick(suggestionGroup.id)
30
+ onClick: ()=>onClick(suggestionGroup.id),
31
+ sx: compact ? {
32
+ fontSize: '0.75rem',
33
+ minWidth: 'auto'
34
+ } : void 0
25
35
  });
26
36
  const Divider = ()=>/*#__PURE__*/ jsx("div", {
27
37
  style: {
@@ -30,15 +40,16 @@ const Divider = ()=>/*#__PURE__*/ jsx("div", {
30
40
  backgroundColor: 'var(--uix-canvas-border)'
31
41
  }
32
42
  });
33
- const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavigatePrevious })=>{
43
+ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavigatePrevious, compact })=>{
34
44
  const [isHoveringUp, setIsHoveringUp] = useState(false);
35
45
  const [isHoveringDown, setIsHoveringDown] = useState(false);
46
+ const iconSize = compact ? '16px' : '20px';
36
47
  return /*#__PURE__*/ jsxs("div", {
37
48
  style: {
38
49
  display: 'flex',
39
50
  alignItems: 'center',
40
51
  gap: Spacing.SpacingMicro,
41
- minWidth: '100px'
52
+ minWidth: compact ? '80px' : '100px'
42
53
  },
43
54
  children: [
44
55
  /*#__PURE__*/ jsx(ApIconButton, {
@@ -48,11 +59,11 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
48
59
  children: /*#__PURE__*/ jsx(ApIcon, {
49
60
  name: "keyboard_arrow_up",
50
61
  color: isHoveringUp ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
51
- size: "20px"
62
+ size: iconSize
52
63
  })
53
64
  }),
54
65
  /*#__PURE__*/ jsxs(ApTypography, {
55
- variant: FontVariantToken.fontSizeMBold,
66
+ variant: compact ? FontVariantToken.fontSizeSBold : FontVariantToken.fontSizeMBold,
56
67
  color: "var(--uix-canvas-foreground-de-emp)",
57
68
  children: [
58
69
  currentIndex + 1,
@@ -67,13 +78,17 @@ const SuggestionGroupNavigator = ({ currentIndex, total, onNavigateNext, onNavig
67
78
  children: /*#__PURE__*/ jsx(ApIcon, {
68
79
  name: "keyboard_arrow_down",
69
80
  color: isHoveringDown ? 'var(--uix-canvas-primary)' : 'var(--uix-canvas-foreground-de-emp)',
70
- size: "20px"
81
+ size: iconSize
71
82
  })
72
83
  })
73
84
  ]
74
85
  });
75
86
  };
76
87
  const SuggestionGroupPanel = ({ suggestionGroup, onRejectAll, onAcceptAll, currentIndex = 0, onNavigateNext, onNavigatePrevious })=>{
88
+ const theme = useTheme();
89
+ const canvasWidth = useStore((state)=>state.width);
90
+ const smBreakpoint = theme.breakpoints.values.sm;
91
+ const isCompact = canvasWidth < smBreakpoint;
77
92
  const nonStandaloneSuggestions = suggestionGroup?.suggestions.filter((s)=>!s.isStandalone) ?? [];
78
93
  const placeholderCount = nonStandaloneSuggestions.length;
79
94
  return /*#__PURE__*/ jsx(Fragment, {
@@ -90,23 +105,29 @@ const SuggestionGroupPanel = ({ suggestionGroup, onRejectAll, onAcceptAll, curre
90
105
  },
91
106
  children: /*#__PURE__*/ jsxs(Row, {
92
107
  align: "center",
93
- gap: Spacing.SpacingS,
108
+ gap: isCompact ? Spacing.SpacingXs : Spacing.SpacingS,
94
109
  justify: "space-evenly",
110
+ style: {
111
+ whiteSpace: 'nowrap'
112
+ },
95
113
  children: [
96
114
  onRejectAll && /*#__PURE__*/ jsx(RejectAllButton, {
97
115
  suggestionGroup: suggestionGroup,
98
- onClick: onRejectAll
116
+ onClick: onRejectAll,
117
+ compact: isCompact
99
118
  }),
100
119
  onAcceptAll && /*#__PURE__*/ jsx(AcceptAllButton, {
101
120
  suggestionGroup: suggestionGroup,
102
- onClick: onAcceptAll
121
+ onClick: onAcceptAll,
122
+ compact: isCompact
103
123
  }),
104
124
  /*#__PURE__*/ jsx(Divider, {}),
105
125
  /*#__PURE__*/ jsx(SuggestionGroupNavigator, {
106
126
  currentIndex: currentIndex,
107
127
  total: placeholderCount,
108
128
  onNavigateNext: onNavigateNext,
109
- onNavigatePrevious: onNavigatePrevious
129
+ onNavigatePrevious: onNavigatePrevious,
130
+ compact: isCompact
110
131
  })
111
132
  ]
112
133
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@uipath/apollo-react",
3
- "version": "3.29.1",
3
+ "version": "3.29.2",
4
4
  "description": "Apollo Design System - React component library with Material UI theming",
5
5
  "repository": {
6
6
  "type": "git",