@uipath/apollo-react 4.63.0 → 4.64.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.
@@ -0,0 +1,379 @@
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
+ StickyNoteMediaDialog: ()=>StickyNoteMediaDialog
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 index_cjs_namespaceObject = require("../../../i18n/index.cjs");
33
+ const external_StickyNoteMedia_cjs_namespaceObject = require("./StickyNoteMedia.cjs");
34
+ function initialUrl(media) {
35
+ if (!media) return '';
36
+ return 'youtube' === media.kind ? `https://www.youtube.com/watch?v=${media.videoId}` : media.url;
37
+ }
38
+ function initialType(media) {
39
+ return media?.kind !== 'image' && media ? 'video' : 'image';
40
+ }
41
+ function StickyNoteMediaDialog({ initialMedia, onCancel, onSubmit }) {
42
+ const { _ } = (0, index_cjs_namespaceObject.useSafeLingui)();
43
+ const urlId = (0, external_react_namespaceObject.useId)();
44
+ const altId = (0, external_react_namespaceObject.useId)();
45
+ const fullWidthId = (0, external_react_namespaceObject.useId)();
46
+ const imageTypeId = (0, external_react_namespaceObject.useId)();
47
+ const videoTypeId = (0, external_react_namespaceObject.useId)();
48
+ const [mediaType, setMediaType] = (0, external_react_namespaceObject.useState)(()=>initialType(initialMedia));
49
+ const [url, setUrl] = (0, external_react_namespaceObject.useState)(()=>initialUrl(initialMedia));
50
+ const [alt, setAlt] = (0, external_react_namespaceObject.useState)(()=>initialMedia?.kind === 'image' ? initialMedia.alt : '');
51
+ const [fullWidth, setFullWidth] = (0, external_react_namespaceObject.useState)(initialMedia?.fullWidth ?? false);
52
+ const [touched, setTouched] = (0, external_react_namespaceObject.useState)(false);
53
+ const [previewState, setPreviewState] = (0, external_react_namespaceObject.useState)(()=>initialMedia?.kind !== 'youtube' && initialMedia ? 'loading' : 'loaded');
54
+ const parsed = (0, external_react_namespaceObject.useMemo)(()=>(0, external_StickyNoteMedia_cjs_namespaceObject.parseStickyNoteMediaUrl)(url, mediaType, {
55
+ alt: alt.trim(),
56
+ fullWidth
57
+ }), [
58
+ alt,
59
+ fullWidth,
60
+ mediaType,
61
+ url
62
+ ]);
63
+ const previewRequired = parsed.ok && 'youtube' !== parsed.value.kind;
64
+ const isEditing = void 0 !== initialMedia;
65
+ const validationMessage = (error)=>{
66
+ if ('invalid-youtube-url' === error) return _({
67
+ id: 'sticky-note.media.dialog.invalid-youtube',
68
+ message: 'Add a valid YouTube video URL'
69
+ });
70
+ if ('unsupported-video-url' === error) return _({
71
+ id: 'sticky-note.media.dialog.unsupported-video',
72
+ message: 'Add a YouTube URL or a direct public video file URL such as MP4'
73
+ });
74
+ return _({
75
+ id: 'sticky-note.media.dialog.invalid-url',
76
+ message: 'Enter a valid public HTTPS URL'
77
+ });
78
+ };
79
+ const error = url.trim() && !parsed.ok ? validationMessage(parsed.error) : null;
80
+ const canSubmit = parsed.ok && (!previewRequired || 'loaded' === previewState);
81
+ const resetPreview = (nextType, nextUrl)=>{
82
+ const next = (0, external_StickyNoteMedia_cjs_namespaceObject.parseStickyNoteMediaUrl)(nextUrl, nextType);
83
+ setPreviewState(next.ok && 'youtube' === next.value.kind ? 'loaded' : 'loading');
84
+ };
85
+ return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Dialog, {
86
+ open: true,
87
+ onOpenChange: (open)=>{
88
+ if (!open) onCancel();
89
+ },
90
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.DialogContent, {
91
+ className: "sm:max-w-lg",
92
+ children: [
93
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.DialogHeader, {
94
+ children: [
95
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.DialogTitle, {
96
+ children: isEditing ? _({
97
+ id: 'sticky-note.media.dialog.edit-title',
98
+ message: 'Edit media'
99
+ }) : _({
100
+ id: 'sticky-note.media.dialog.add-title',
101
+ message: 'Embed image or video'
102
+ })
103
+ }),
104
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.DialogDescription, {
105
+ children: _({
106
+ id: "sticky-note.media.dialog.description",
107
+ message: 'Add a public link. Video supports YouTube and direct video files.'
108
+ })
109
+ })
110
+ ]
111
+ }),
112
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("form", {
113
+ className: "grid gap-4",
114
+ onSubmit: (event)=>{
115
+ event.preventDefault();
116
+ if (canSubmit && parsed.ok) onSubmit(parsed.value);
117
+ },
118
+ children: [
119
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
120
+ className: "flex flex-col gap-4 py-2",
121
+ children: [
122
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("fieldset", {
123
+ className: "m-0 border-0 p-0",
124
+ children: [
125
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("legend", {
126
+ className: "mb-2 text-sm font-medium",
127
+ children: _({
128
+ id: 'sticky-note.media.dialog.type-label',
129
+ message: 'Media type'
130
+ })
131
+ }),
132
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.RadioGroup, {
133
+ value: mediaType,
134
+ onValueChange: (value)=>{
135
+ const nextType = value;
136
+ setMediaType(nextType);
137
+ setTouched(false);
138
+ resetPreview(nextType, url);
139
+ },
140
+ className: "flex gap-5",
141
+ children: [
142
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
143
+ className: "flex items-center gap-2",
144
+ children: [
145
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.RadioGroupItem, {
146
+ value: "image",
147
+ id: imageTypeId
148
+ }),
149
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Label, {
150
+ htmlFor: imageTypeId,
151
+ children: _({
152
+ id: 'sticky-note.media.dialog.image-option',
153
+ message: 'Image'
154
+ })
155
+ })
156
+ ]
157
+ }),
158
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
159
+ className: "flex items-center gap-2",
160
+ children: [
161
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.RadioGroupItem, {
162
+ value: "video",
163
+ id: videoTypeId
164
+ }),
165
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Label, {
166
+ htmlFor: videoTypeId,
167
+ children: _({
168
+ id: 'sticky-note.media.dialog.video-option',
169
+ message: 'Video'
170
+ })
171
+ })
172
+ ]
173
+ })
174
+ ]
175
+ })
176
+ ]
177
+ }),
178
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
179
+ className: "flex flex-col gap-1.5",
180
+ children: [
181
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Label, {
182
+ htmlFor: urlId,
183
+ children: 'image' === mediaType ? _({
184
+ id: 'sticky-note.media.dialog.image-url-label',
185
+ message: 'Image URL'
186
+ }) : _({
187
+ id: 'sticky-note.media.dialog.video-url-label',
188
+ message: 'Video URL'
189
+ })
190
+ }),
191
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Input, {
192
+ id: urlId,
193
+ type: "url",
194
+ autoFocus: true,
195
+ value: url,
196
+ placeholder: 'image' === mediaType ? _({
197
+ id: 'sticky-note.media.dialog.image-url-placeholder',
198
+ message: 'https://example.com/image.png'
199
+ }) : _({
200
+ id: 'sticky-note.media.dialog.video-url-placeholder',
201
+ message: 'https://youtube.com/watch?v=… or https://example.com/video.mp4'
202
+ }),
203
+ "aria-invalid": touched && Boolean(error),
204
+ "aria-describedby": `${urlId}-helper${touched && error ? ` ${urlId}-error` : ''}`,
205
+ onChange: (event)=>{
206
+ const nextUrl = event.target.value;
207
+ setUrl(nextUrl);
208
+ setTouched(true);
209
+ resetPreview(mediaType, nextUrl);
210
+ },
211
+ onBlur: ()=>setTouched(true)
212
+ }),
213
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
214
+ id: `${urlId}-helper`,
215
+ className: "m-0 text-xs text-foreground-muted",
216
+ children: 'image' === mediaType ? _({
217
+ id: 'sticky-note.media.dialog.image-url-help',
218
+ message: 'Use a public HTTPS image link.'
219
+ }) : _({
220
+ id: 'sticky-note.media.dialog.video-url-help',
221
+ message: 'Use a YouTube link or a direct public HTTPS video file link.'
222
+ })
223
+ }),
224
+ touched && error && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
225
+ id: `${urlId}-error`,
226
+ role: "alert",
227
+ className: "m-0 text-xs text-destructive",
228
+ children: error
229
+ })
230
+ ]
231
+ }),
232
+ 'image' === mediaType && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
233
+ className: "flex flex-col gap-1.5",
234
+ children: [
235
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Label, {
236
+ htmlFor: altId,
237
+ children: _({
238
+ id: 'sticky-note.media.dialog.alt-label',
239
+ message: 'Alternative text'
240
+ })
241
+ }),
242
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Input, {
243
+ id: altId,
244
+ value: alt,
245
+ onChange: (event)=>setAlt(event.target.value)
246
+ }),
247
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
248
+ className: "m-0 text-xs text-foreground-muted",
249
+ children: _({
250
+ id: 'sticky-note.media.dialog.alt-help',
251
+ message: 'Describe the image for people who use screen readers.'
252
+ })
253
+ })
254
+ ]
255
+ }),
256
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
257
+ className: "flex items-start gap-2",
258
+ children: [
259
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Checkbox, {
260
+ id: fullWidthId,
261
+ checked: fullWidth,
262
+ onCheckedChange: (checked)=>setFullWidth(true === checked),
263
+ className: "mt-0.5"
264
+ }),
265
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
266
+ className: "flex flex-col gap-0.5",
267
+ children: [
268
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Label, {
269
+ htmlFor: fullWidthId,
270
+ className: "text-sm font-medium leading-none",
271
+ children: _({
272
+ id: 'sticky-note.media.dialog.full-width-label',
273
+ message: 'Make full width'
274
+ })
275
+ }),
276
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("p", {
277
+ className: "m-0 text-xs text-foreground-muted",
278
+ children: _({
279
+ id: 'sticky-note.media.dialog.full-width-help',
280
+ message: 'The image or video spans the available width of the sticky note.'
281
+ })
282
+ })
283
+ ]
284
+ })
285
+ ]
286
+ }),
287
+ parsed.ok && /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
288
+ className: "rounded-md border border-border-subtle bg-surface p-3",
289
+ children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
290
+ className: "mx-auto max-w-full overflow-hidden rounded",
291
+ style: {
292
+ width: fullWidth ? '100%' : 'min(320px, 100%)'
293
+ },
294
+ children: 'failed' === previewState ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
295
+ role: "alert",
296
+ className: "flex min-h-24 items-center justify-center bg-black/10 px-3 text-center text-xs text-foreground-muted",
297
+ children: _({
298
+ id: 'sticky-note.media.dialog.preview-unavailable',
299
+ message: 'We could not load a preview for this URL.'
300
+ })
301
+ }) : 'image' === parsed.value.kind ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
302
+ src: parsed.value.url,
303
+ alt: alt.trim() || _({
304
+ id: 'sticky-note.media.dialog.image-preview',
305
+ message: 'Image preview'
306
+ }),
307
+ referrerPolicy: "no-referrer",
308
+ className: "block h-auto max-w-full",
309
+ style: {
310
+ width: fullWidth ? '100%' : 'auto'
311
+ },
312
+ onLoad: ()=>setPreviewState('loaded'),
313
+ onError: ()=>setPreviewState('failed')
314
+ }) : 'publicVideo' === parsed.value.kind ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("video", {
315
+ src: parsed.value.url,
316
+ "aria-label": _({
317
+ id: 'sticky-note.media.dialog.video-preview',
318
+ message: 'Video preview'
319
+ }),
320
+ controls: true,
321
+ preload: "metadata",
322
+ playsInline: true,
323
+ className: "block h-auto w-full bg-black",
324
+ onLoadedMetadata: ()=>setPreviewState('loaded'),
325
+ onError: ()=>setPreviewState('failed'),
326
+ children: _({
327
+ id: 'sticky-note.media.video-unavailable',
328
+ message: 'Video playback is unavailable.'
329
+ })
330
+ }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("img", {
331
+ src: `https://i.ytimg.com/vi/${parsed.value.videoId}/hqdefault.jpg`,
332
+ alt: _({
333
+ id: 'sticky-note.media.dialog.video-preview',
334
+ message: 'Video preview'
335
+ }),
336
+ referrerPolicy: "no-referrer",
337
+ className: "block aspect-video w-full object-cover"
338
+ })
339
+ })
340
+ })
341
+ ]
342
+ }),
343
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(apollo_wind_namespaceObject.DialogFooter, {
344
+ children: [
345
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
346
+ type: "button",
347
+ variant: "outline",
348
+ onClick: onCancel,
349
+ children: _({
350
+ id: 'sticky-note.media.dialog.cancel',
351
+ message: 'Cancel'
352
+ })
353
+ }),
354
+ /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(apollo_wind_namespaceObject.Button, {
355
+ type: "submit",
356
+ disabled: !canSubmit,
357
+ children: isEditing ? _({
358
+ id: 'sticky-note.media.dialog.save',
359
+ message: 'Save changes'
360
+ }) : _({
361
+ id: 'sticky-note.media.dialog.embed',
362
+ message: 'Embed media'
363
+ })
364
+ })
365
+ ]
366
+ })
367
+ ]
368
+ })
369
+ ]
370
+ })
371
+ });
372
+ }
373
+ exports.StickyNoteMediaDialog = __webpack_exports__.StickyNoteMediaDialog;
374
+ for(var __rspack_i in __webpack_exports__)if (-1 === [
375
+ "StickyNoteMediaDialog"
376
+ ].indexOf(__rspack_i)) exports[__rspack_i] = __webpack_exports__[__rspack_i];
377
+ Object.defineProperty(exports, '__esModule', {
378
+ value: true
379
+ });
@@ -0,0 +1,8 @@
1
+ import { type StickyNoteMedia } from './StickyNoteMedia';
2
+ export interface StickyNoteMediaDialogProps {
3
+ initialMedia?: StickyNoteMedia;
4
+ onCancel: () => void;
5
+ onSubmit: (media: StickyNoteMedia) => void;
6
+ }
7
+ export declare function StickyNoteMediaDialog({ initialMedia, onCancel, onSubmit, }: StickyNoteMediaDialogProps): import("react/jsx-runtime").JSX.Element;
8
+ //# sourceMappingURL=StickyNoteMediaDialog.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"StickyNoteMediaDialog.d.ts","sourceRoot":"","sources":["../../../../src/canvas/components/StickyNoteNode/StickyNoteMediaDialog.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAEL,KAAK,eAAe,EAGrB,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,0BAA0B;IACzC,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAC5C;AAWD,wBAAgB,qBAAqB,CAAC,EACpC,YAAY,EACZ,QAAQ,EACR,QAAQ,GACT,EAAE,0BAA0B,2CAsR5B"}