@elementor/editor-ui 3.35.0-382 → 3.35.0-384

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/index.js +15 -6
  2. package/dist/index.mjs +26 -7
  3. package/package.json +2 -2
  4. package/src/components/promotion-infotip.tsx +35 -18
package/dist/index.js CHANGED
@@ -449,13 +449,22 @@ var PromotionInfotip = ({ children, open, ...cardProps }) => {
449
449
  return /* @__PURE__ */ React13.createElement(import_ui13.Infotip, { placement: "right", content: /* @__PURE__ */ React13.createElement(InfotipCard, { ...cardProps }), open }, children);
450
450
  };
451
451
  function InfotipCard({ title, content, assetUrl, ctaUrl, setOpen }) {
452
- return /* @__PURE__ */ React13.createElement(import_ui13.Card, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
453
- import_ui13.CardHeader,
452
+ return /* @__PURE__ */ React13.createElement(
453
+ import_ui13.ClickAwayListener,
454
454
  {
455
- title,
456
- action: /* @__PURE__ */ React13.createElement(import_ui13.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: () => setOpen(false) })
457
- }
458
- ), /* @__PURE__ */ React13.createElement(import_ui13.CardMedia, { component: "img", image: assetUrl, alt: "", sx: { width: "100%", aspectRatio: "16 / 9" } }), /* @__PURE__ */ React13.createElement(import_ui13.CardContent, null, /* @__PURE__ */ React13.createElement(import_ui13.Typography, { variant: "body2", color: "text.secondary" }, content)), /* @__PURE__ */ React13.createElement(import_ui13.CardActions, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ React13.createElement(CtaButton, { href: ctaUrl })));
455
+ disableReactTree: true,
456
+ mouseEvent: "onMouseDown",
457
+ touchEvent: "onTouchStart",
458
+ onClickAway: () => setOpen(false)
459
+ },
460
+ /* @__PURE__ */ React13.createElement(import_ui13.Card, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
461
+ import_ui13.CardHeader,
462
+ {
463
+ title,
464
+ action: /* @__PURE__ */ React13.createElement(import_ui13.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: () => setOpen(false) })
465
+ }
466
+ ), /* @__PURE__ */ React13.createElement(import_ui13.CardMedia, { component: "img", image: assetUrl, alt: "", sx: { width: "100%", aspectRatio: "16 / 9" } }), /* @__PURE__ */ React13.createElement(import_ui13.CardContent, null, /* @__PURE__ */ React13.createElement(import_ui13.Typography, { variant: "body2", color: "text.secondary" }, content)), /* @__PURE__ */ React13.createElement(import_ui13.CardActions, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ React13.createElement(CtaButton, { href: ctaUrl })))
467
+ );
459
468
  }
460
469
 
461
470
  // src/components/popover/body.tsx
package/dist/index.mjs CHANGED
@@ -402,18 +402,37 @@ var CtaButton = ({ href, children, ...props }) => /* @__PURE__ */ React12.create
402
402
 
403
403
  // src/components/promotion-infotip.tsx
404
404
  import * as React13 from "react";
405
- import { Card as Card2, CardActions as CardActions2, CardContent as CardContent2, CardHeader, CardMedia, CloseButton, Infotip as Infotip3, Typography as Typography3 } from "@elementor/ui";
405
+ import {
406
+ Card as Card2,
407
+ CardActions as CardActions2,
408
+ CardContent as CardContent2,
409
+ CardHeader,
410
+ CardMedia,
411
+ ClickAwayListener,
412
+ CloseButton,
413
+ Infotip as Infotip3,
414
+ Typography as Typography3
415
+ } from "@elementor/ui";
406
416
  var PromotionInfotip = ({ children, open, ...cardProps }) => {
407
417
  return /* @__PURE__ */ React13.createElement(Infotip3, { placement: "right", content: /* @__PURE__ */ React13.createElement(InfotipCard, { ...cardProps }), open }, children);
408
418
  };
409
419
  function InfotipCard({ title, content, assetUrl, ctaUrl, setOpen }) {
410
- return /* @__PURE__ */ React13.createElement(Card2, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
411
- CardHeader,
420
+ return /* @__PURE__ */ React13.createElement(
421
+ ClickAwayListener,
412
422
  {
413
- title,
414
- action: /* @__PURE__ */ React13.createElement(CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: () => setOpen(false) })
415
- }
416
- ), /* @__PURE__ */ React13.createElement(CardMedia, { component: "img", image: assetUrl, alt: "", sx: { width: "100%", aspectRatio: "16 / 9" } }), /* @__PURE__ */ React13.createElement(CardContent2, null, /* @__PURE__ */ React13.createElement(Typography3, { variant: "body2", color: "text.secondary" }, content)), /* @__PURE__ */ React13.createElement(CardActions2, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ React13.createElement(CtaButton, { href: ctaUrl })));
423
+ disableReactTree: true,
424
+ mouseEvent: "onMouseDown",
425
+ touchEvent: "onTouchStart",
426
+ onClickAway: () => setOpen(false)
427
+ },
428
+ /* @__PURE__ */ React13.createElement(Card2, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
429
+ CardHeader,
430
+ {
431
+ title,
432
+ action: /* @__PURE__ */ React13.createElement(CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: () => setOpen(false) })
433
+ }
434
+ ), /* @__PURE__ */ React13.createElement(CardMedia, { component: "img", image: assetUrl, alt: "", sx: { width: "100%", aspectRatio: "16 / 9" } }), /* @__PURE__ */ React13.createElement(CardContent2, null, /* @__PURE__ */ React13.createElement(Typography3, { variant: "body2", color: "text.secondary" }, content)), /* @__PURE__ */ React13.createElement(CardActions2, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ React13.createElement(CtaButton, { href: ctaUrl })))
435
+ );
417
436
  }
418
437
 
419
438
  // src/components/popover/body.tsx
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elementor/editor-ui",
3
3
  "description": "Elementor Editor UI",
4
- "version": "3.35.0-382",
4
+ "version": "3.35.0-384",
5
5
  "private": false,
6
6
  "author": "Elementor Team",
7
7
  "homepage": "https://elementor.com/",
@@ -37,7 +37,7 @@
37
37
  "react-dom": "^18.3.1"
38
38
  },
39
39
  "dependencies": {
40
- "@elementor/editor-v1-adapters": "3.35.0-382",
40
+ "@elementor/editor-v1-adapters": "3.35.0-384",
41
41
  "@elementor/icons": "^1.63.0",
42
42
  "@elementor/ui": "1.36.17",
43
43
  "@tanstack/react-virtual": "^3.13.3",
package/src/components/promotion-infotip.tsx CHANGED
@@ -1,5 +1,15 @@
1
1
  import * as React from 'react';
2
- import { Card, CardActions, CardContent, CardHeader, CardMedia, CloseButton, Infotip, Typography } from '@elementor/ui';
2
+ import {
3
+ Card,
4
+ CardActions,
5
+ CardContent,
6
+ CardHeader,
7
+ CardMedia,
8
+ ClickAwayListener,
9
+ CloseButton,
10
+ Infotip,
11
+ Typography,
12
+ } from '@elementor/ui';
3
13
 
4
14
  import { CtaButton } from './cta-button';
5
15
 
@@ -27,22 +37,29 @@ export const PromotionInfotip = ( { children, open, ...cardProps }: PromotionInf
27
37
 
28
38
  function InfotipCard( { title, content, assetUrl, ctaUrl, setOpen }: InfotipCardProps ) {
29
39
  return (
30
- <Card elevation={ 0 } sx={ { maxWidth: 296 } }>
31
- <CardHeader
32
- title={ title }
33
- action={
34
- <CloseButton slotProps={ { icon: { fontSize: 'tiny' } } } onClick={ () => setOpen( false ) } />
35
- }
36
- />
37
- <CardMedia component="img" image={ assetUrl } alt="" sx={ { width: '100%', aspectRatio: '16 / 9' } } />
38
- <CardContent>
39
- <Typography variant="body2" color="text.secondary">
40
- { content }
41
- </Typography>
42
- </CardContent>
43
- <CardActions sx={ { justifyContent: 'flex-start' } }>
44
- <CtaButton href={ ctaUrl } />
45
- </CardActions>
46
- </Card>
40
+ <ClickAwayListener
41
+ disableReactTree={ true }
42
+ mouseEvent="onMouseDown"
43
+ touchEvent="onTouchStart"
44
+ onClickAway={ () => setOpen( false ) }
45
+ >
46
+ <Card elevation={ 0 } sx={ { maxWidth: 296 } }>
47
+ <CardHeader
48
+ title={ title }
49
+ action={
50
+ <CloseButton slotProps={ { icon: { fontSize: 'tiny' } } } onClick={ () => setOpen( false ) } />
51
+ }
52
+ />
53
+ <CardMedia component="img" image={ assetUrl } alt="" sx={ { width: '100%', aspectRatio: '16 / 9' } } />
54
+ <CardContent>
55
+ <Typography variant="body2" color="text.secondary">
56
+ { content }
57
+ </Typography>
58
+ </CardContent>
59
+ <CardActions sx={ { justifyContent: 'flex-start' } }>
60
+ <CtaButton href={ ctaUrl } />
61
+ </CardActions>
62
+ </Card>
63
+ </ClickAwayListener>
47
64
  );
48
65
  }