@elementor/editor-ui 4.0.0-564 → 4.0.0-591

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 (10) hide show
  1. package/dist/index.d.mts +23 -5
  2. package/dist/index.d.ts +23 -5
  3. package/dist/index.js +291 -210
  4. package/dist/index.mjs +224 -142
  5. package/package.json +2 -2
  6. package/src/components/__tests__/confirmation-dialog.test.tsx +208 -0
  7. package/src/components/collapsible-content.tsx +66 -0
  8. package/src/components/confirmation-dialog.tsx +67 -16
  9. package/src/components/promotions/promotion-popover.tsx +8 -2
  10. package/src/index.ts +1 -0
package/dist/index.js CHANGED
@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
31
31
  var index_exports = {};
32
32
  __export(index_exports, {
33
33
  CollapseIcon: () => CollapseIcon,
34
+ CollapsibleContent: () => CollapsibleContent,
34
35
  ConfirmationDialog: () => ConfirmationDialog,
35
36
  CtaButton: () => CtaButton,
36
37
  EditableField: () => EditableField,
@@ -60,6 +61,7 @@ __export(index_exports, {
60
61
  ThemeProvider: () => ThemeProvider,
61
62
  WarningInfotip: () => WarningInfotip,
62
63
  closeDialog: () => closeDialog,
64
+ getCollapsibleValue: () => getCollapsibleValue,
63
65
  openDialog: () => openDialog,
64
66
  useCanvasClickHandler: () => useCanvasClickHandler,
65
67
  useDialog: () => useDialog,
@@ -83,10 +85,52 @@ var CollapseIcon = (0, import_ui.styled)(import_icons.ChevronDownIcon, {
83
85
  opacity: disabled ? 0.4 : 1
84
86
  }));
85
87
 
86
- // src/components/ellipsis-with-tooltip.tsx
88
+ // src/components/collapsible-content.tsx
87
89
  var React = __toESM(require("react"));
88
90
  var import_react = require("react");
89
91
  var import_ui2 = require("@elementor/ui");
92
+ var import_i18n = require("@wordpress/i18n");
93
+ var IndicatorsWrapper = (0, import_ui2.styled)("div")`
94
+ position: absolute;
95
+ top: 0;
96
+ right: ${({ theme }) => theme.spacing(3)};
97
+ height: 100%;
98
+ display: flex;
99
+ flex-direction: column;
100
+ align-items: center;
101
+ justify-content: center;
102
+ `;
103
+ var CollapsibleContent = ({ children, defaultOpen = false, titleEnd = null }) => {
104
+ const [open, setOpen] = (0, import_react.useState)(defaultOpen);
105
+ const handleToggle = () => {
106
+ setOpen((prevOpen) => !prevOpen);
107
+ };
108
+ return /* @__PURE__ */ React.createElement(import_ui2.Stack, null, /* @__PURE__ */ React.createElement(import_ui2.Stack, { sx: { position: "relative" } }, /* @__PURE__ */ React.createElement(
109
+ import_ui2.Button,
110
+ {
111
+ fullWidth: true,
112
+ size: "small",
113
+ color: "secondary",
114
+ variant: "outlined",
115
+ onClick: handleToggle,
116
+ endIcon: /* @__PURE__ */ React.createElement(CollapseIcon, { open }),
117
+ sx: { my: 0.5 },
118
+ "aria-label": open ? "Show less" : "Show more"
119
+ },
120
+ open ? (0, import_i18n.__)("Show less", "elementor") : (0, import_i18n.__)("Show more", "elementor")
121
+ ), titleEnd && /* @__PURE__ */ React.createElement(IndicatorsWrapper, null, getCollapsibleValue(titleEnd, open))), /* @__PURE__ */ React.createElement(import_ui2.Collapse, { in: open, timeout: "auto", unmountOnExit: true }, children));
122
+ };
123
+ function getCollapsibleValue(value, isOpen) {
124
+ if (typeof value === "function") {
125
+ return value(isOpen);
126
+ }
127
+ return value;
128
+ }
129
+
130
+ // src/components/ellipsis-with-tooltip.tsx
131
+ var React2 = __toESM(require("react"));
132
+ var import_react2 = require("react");
133
+ var import_ui3 = require("@elementor/ui");
90
134
  var EllipsisWithTooltip = ({
91
135
  maxWidth,
92
136
  title,
@@ -95,12 +139,12 @@ var EllipsisWithTooltip = ({
95
139
  }) => {
96
140
  const [setRef, isOverflowing] = useIsOverflowing();
97
141
  if (isOverflowing) {
98
- return /* @__PURE__ */ React.createElement(import_ui2.Tooltip, { title, placement: "top" }, /* @__PURE__ */ React.createElement(Content, { maxWidth, ref: setRef, as, ...props }, title));
142
+ return /* @__PURE__ */ React2.createElement(import_ui3.Tooltip, { title, placement: "top" }, /* @__PURE__ */ React2.createElement(Content, { maxWidth, ref: setRef, as, ...props }, title));
99
143
  }
100
- return /* @__PURE__ */ React.createElement(Content, { maxWidth, ref: setRef, as, ...props }, title);
144
+ return /* @__PURE__ */ React2.createElement(Content, { maxWidth, ref: setRef, as, ...props }, title);
101
145
  };
102
- var Content = React.forwardRef(
103
- ({ maxWidth, as: Component = import_ui2.Box, ...props }, ref) => /* @__PURE__ */ React.createElement(
146
+ var Content = React2.forwardRef(
147
+ ({ maxWidth, as: Component = import_ui3.Box, ...props }, ref) => /* @__PURE__ */ React2.createElement(
104
148
  Component,
105
149
  {
106
150
  ref,
@@ -111,9 +155,9 @@ var Content = React.forwardRef(
111
155
  )
112
156
  );
113
157
  var useIsOverflowing = () => {
114
- const [el, setEl] = (0, import_react.useState)(null);
115
- const [isOverflowing, setIsOverflown] = (0, import_react.useState)(false);
116
- (0, import_react.useEffect)(() => {
158
+ const [el, setEl] = (0, import_react2.useState)(null);
159
+ const [isOverflowing, setIsOverflown] = (0, import_react2.useState)(false);
160
+ (0, import_react2.useEffect)(() => {
117
161
  const observer = new ResizeObserver(([{ target }]) => {
118
162
  setIsOverflown(target.scrollWidth > target.clientWidth);
119
163
  });
@@ -128,15 +172,15 @@ var useIsOverflowing = () => {
128
172
  };
129
173
 
130
174
  // src/components/editable-field.tsx
131
- var React2 = __toESM(require("react"));
132
- var import_react2 = require("react");
133
- var import_ui3 = require("@elementor/ui");
134
- var EditableField = (0, import_react2.forwardRef)(
175
+ var React3 = __toESM(require("react"));
176
+ var import_react3 = require("react");
177
+ var import_ui4 = require("@elementor/ui");
178
+ var EditableField = (0, import_react3.forwardRef)(
135
179
  ({ value, error, as = "span", sx, ...props }, ref) => {
136
- return /* @__PURE__ */ React2.createElement(import_ui3.Tooltip, { title: error, open: !!error, placement: "top" }, /* @__PURE__ */ React2.createElement(StyledField, { ref, component: as, ...props }, value));
180
+ return /* @__PURE__ */ React3.createElement(import_ui4.Tooltip, { title: error, open: !!error, placement: "top" }, /* @__PURE__ */ React3.createElement(StyledField, { ref, component: as, ...props }, value));
137
181
  }
138
182
  );
139
- var StyledField = (0, import_ui3.styled)(import_ui3.Box)`
183
+ var StyledField = (0, import_ui4.styled)(import_ui4.Box)`
140
184
  width: 100%;
141
185
  &:focus {
142
186
  outline: none;
@@ -144,39 +188,39 @@ var StyledField = (0, import_ui3.styled)(import_ui3.Box)`
144
188
  `;
145
189
 
146
190
  // src/components/introduction-modal.tsx
147
- var React3 = __toESM(require("react"));
148
- var import_react3 = require("react");
149
- var import_ui4 = require("@elementor/ui");
150
- var import_i18n = require("@wordpress/i18n");
191
+ var React4 = __toESM(require("react"));
192
+ var import_react4 = require("react");
193
+ var import_ui5 = require("@elementor/ui");
194
+ var import_i18n2 = require("@wordpress/i18n");
151
195
  var IntroductionModal = ({ open, handleClose, title, children }) => {
152
- const [shouldShowAgain, setShouldShowAgain] = (0, import_react3.useState)(true);
153
- return /* @__PURE__ */ React3.createElement(import_ui4.Dialog, { open, onClose: handleClose, maxWidth: "sm", TransitionComponent: Transition }, title && /* @__PURE__ */ React3.createElement(import_ui4.DialogHeader, { logo: false }, /* @__PURE__ */ React3.createElement(import_ui4.DialogTitle, null, title)), children, /* @__PURE__ */ React3.createElement(import_ui4.DialogActions, null, /* @__PURE__ */ React3.createElement(
154
- import_ui4.FormControlLabel,
196
+ const [shouldShowAgain, setShouldShowAgain] = (0, import_react4.useState)(true);
197
+ return /* @__PURE__ */ React4.createElement(import_ui5.Dialog, { open, onClose: handleClose, maxWidth: "sm", TransitionComponent: Transition }, title && /* @__PURE__ */ React4.createElement(import_ui5.DialogHeader, { logo: false }, /* @__PURE__ */ React4.createElement(import_ui5.DialogTitle, null, title)), children, /* @__PURE__ */ React4.createElement(import_ui5.DialogActions, null, /* @__PURE__ */ React4.createElement(
198
+ import_ui5.FormControlLabel,
155
199
  {
156
200
  sx: { marginRight: "auto" },
157
- control: /* @__PURE__ */ React3.createElement(
158
- import_ui4.Checkbox,
201
+ control: /* @__PURE__ */ React4.createElement(
202
+ import_ui5.Checkbox,
159
203
  {
160
204
  checked: !shouldShowAgain,
161
205
  onChange: () => setShouldShowAgain(!shouldShowAgain)
162
206
  }
163
207
  ),
164
- label: /* @__PURE__ */ React3.createElement(import_ui4.Typography, { variant: "body2" }, (0, import_i18n.__)("Don't show this again", "elementor"))
208
+ label: /* @__PURE__ */ React4.createElement(import_ui5.Typography, { variant: "body2" }, (0, import_i18n2.__)("Don't show this again", "elementor"))
165
209
  }
166
- ), /* @__PURE__ */ React3.createElement(
167
- import_ui4.Button,
210
+ ), /* @__PURE__ */ React4.createElement(
211
+ import_ui5.Button,
168
212
  {
169
213
  size: "medium",
170
214
  variant: "contained",
171
215
  sx: { minWidth: "135px" },
172
- "aria-label": (0, import_i18n.__)("Got it introduction", "elementor"),
216
+ "aria-label": (0, import_i18n2.__)("Got it introduction", "elementor"),
173
217
  onClick: () => handleClose(shouldShowAgain)
174
218
  },
175
- (0, import_i18n.__)("Got it", "elementor")
219
+ (0, import_i18n2.__)("Got it", "elementor")
176
220
  )));
177
221
  };
178
- var Transition = React3.forwardRef((props, ref) => /* @__PURE__ */ React3.createElement(
179
- import_ui4.Fade,
222
+ var Transition = React4.forwardRef((props, ref) => /* @__PURE__ */ React4.createElement(
223
+ import_ui5.Fade,
180
224
  {
181
225
  ref,
182
226
  ...props,
@@ -188,18 +232,18 @@ var Transition = React3.forwardRef((props, ref) => /* @__PURE__ */ React3.create
188
232
  ));
189
233
 
190
234
  // src/components/theme-provider.tsx
191
- var React4 = __toESM(require("react"));
192
- var import_ui5 = require("@elementor/ui");
235
+ var React5 = __toESM(require("react"));
236
+ var import_ui6 = require("@elementor/ui");
193
237
 
194
238
  // src/hooks/use-color-scheme.ts
195
- var import_react4 = require("react");
239
+ var import_react5 = require("react");
196
240
  var import_editor_v1_adapters = require("@elementor/editor-v1-adapters");
197
241
  function useColorScheme() {
198
- const [colorScheme, setColorScheme] = (0, import_react4.useState)(() => getV1ColorScheme());
199
- (0, import_react4.useEffect)(() => {
242
+ const [colorScheme, setColorScheme] = (0, import_react5.useState)(() => getV1ColorScheme());
243
+ (0, import_react5.useEffect)(() => {
200
244
  return (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.v1ReadyEvent)(), () => setColorScheme(getV1ColorScheme()));
201
245
  }, []);
202
- (0, import_react4.useEffect)(() => {
246
+ (0, import_react5.useEffect)(() => {
203
247
  return (0, import_editor_v1_adapters.__privateListenTo)((0, import_editor_v1_adapters.commandEndEvent)("document/elements/settings"), (e) => {
204
248
  const event = e;
205
249
  const isColorScheme = event.args?.settings && "ui_theme" in event.args.settings;
@@ -218,22 +262,22 @@ function getV1ColorScheme() {
218
262
  var EDITOR_PALLETTE = "unstable";
219
263
  function ThemeProvider({ children }) {
220
264
  const colorScheme = useColorScheme();
221
- return /* @__PURE__ */ React4.createElement(import_ui5.ThemeProvider, { colorScheme, palette: EDITOR_PALLETTE }, children);
265
+ return /* @__PURE__ */ React5.createElement(import_ui6.ThemeProvider, { colorScheme, palette: EDITOR_PALLETTE }, children);
222
266
  }
223
267
 
224
268
  // src/components/menu-item.tsx
225
- var React6 = __toESM(require("react"));
226
- var import_react5 = require("react");
227
- var import_ui7 = require("@elementor/ui");
269
+ var React7 = __toESM(require("react"));
270
+ var import_react6 = require("react");
271
+ var import_ui8 = require("@elementor/ui");
228
272
 
229
273
  // src/components/info-alert.tsx
230
- var React5 = __toESM(require("react"));
274
+ var React6 = __toESM(require("react"));
231
275
  var import_icons2 = require("@elementor/icons");
232
- var import_ui6 = require("@elementor/ui");
233
- var InfoAlert = (props) => /* @__PURE__ */ React5.createElement(
234
- import_ui6.Alert,
276
+ var import_ui7 = require("@elementor/ui");
277
+ var InfoAlert = (props) => /* @__PURE__ */ React6.createElement(
278
+ import_ui7.Alert,
235
279
  {
236
- icon: /* @__PURE__ */ React5.createElement(import_icons2.InfoCircleFilledIcon, { fontSize: "small", color: "secondary" }),
280
+ icon: /* @__PURE__ */ React6.createElement(import_icons2.InfoCircleFilledIcon, { fontSize: "small", color: "secondary" }),
237
281
  variant: "standard",
238
282
  color: "secondary",
239
283
  elevation: 0,
@@ -249,8 +293,8 @@ var MenuListItem = ({
249
293
  primaryTypographyProps = { variant: "caption" },
250
294
  ...props
251
295
  }) => {
252
- return /* @__PURE__ */ React6.createElement(
253
- import_ui7.MenuItem,
296
+ return /* @__PURE__ */ React7.createElement(
297
+ import_ui8.MenuItem,
254
298
  {
255
299
  dense: true,
256
300
  ...props,
@@ -258,8 +302,8 @@ var MenuListItem = ({
258
302
  ...props.sx ?? {}
259
303
  }
260
304
  },
261
- /* @__PURE__ */ React6.createElement(
262
- import_ui7.MenuItemText,
305
+ /* @__PURE__ */ React7.createElement(
306
+ import_ui8.MenuItemText,
263
307
  {
264
308
  primary: children,
265
309
  primaryTypographyProps,
@@ -268,30 +312,30 @@ var MenuListItem = ({
268
312
  )
269
313
  );
270
314
  };
271
- var MenuItemInfotip = (0, import_react5.forwardRef)(
315
+ var MenuItemInfotip = (0, import_react6.forwardRef)(
272
316
  ({ showInfoTip = false, children, content }, ref) => {
273
317
  if (!showInfoTip) {
274
- return /* @__PURE__ */ React6.createElement(React6.Fragment, null, children);
318
+ return /* @__PURE__ */ React7.createElement(React7.Fragment, null, children);
275
319
  }
276
- return /* @__PURE__ */ React6.createElement(
277
- import_ui7.Infotip,
320
+ return /* @__PURE__ */ React7.createElement(
321
+ import_ui8.Infotip,
278
322
  {
279
323
  ref,
280
324
  placement: "right",
281
325
  arrow: false,
282
- content: /* @__PURE__ */ React6.createElement(InfoAlert, { sx: { maxWidth: 325 } }, content)
326
+ content: /* @__PURE__ */ React7.createElement(InfoAlert, { sx: { maxWidth: 325 } }, content)
283
327
  },
284
- /* @__PURE__ */ React6.createElement("div", { style: { pointerEvents: "initial", width: "100%" }, onClick: (e) => e.stopPropagation() }, children)
328
+ /* @__PURE__ */ React7.createElement("div", { style: { pointerEvents: "initial", width: "100%" }, onClick: (e) => e.stopPropagation() }, children)
285
329
  );
286
330
  }
287
331
  );
288
332
 
289
333
  // src/components/infotip-card.tsx
290
- var React7 = __toESM(require("react"));
291
- var import_ui8 = require("@elementor/ui");
334
+ var React8 = __toESM(require("react"));
335
+ var import_ui9 = require("@elementor/ui");
292
336
  var InfoTipCard = ({ content, svgIcon, learnMoreButton, ctaButton }) => {
293
- return /* @__PURE__ */ React7.createElement(import_ui8.Card, { elevation: 0, sx: { width: 320 } }, /* @__PURE__ */ React7.createElement(import_ui8.CardContent, { sx: { pb: 0 } }, /* @__PURE__ */ React7.createElement(import_ui8.Box, { display: "flex", alignItems: "start" }, /* @__PURE__ */ React7.createElement(import_ui8.SvgIcon, { fontSize: "tiny", sx: { mr: 0.5 } }, svgIcon), /* @__PURE__ */ React7.createElement(import_ui8.Typography, { variant: "body2" }, content, learnMoreButton && /* @__PURE__ */ React7.createElement(React7.Fragment, null, "\xA0", /* @__PURE__ */ React7.createElement(import_ui8.Link, { color: "info.main", href: learnMoreButton.href, target: "_blank" }, learnMoreButton.label))))), ctaButton && /* @__PURE__ */ React7.createElement(import_ui8.CardActions, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ React7.createElement(
294
- import_ui8.Button,
337
+ return /* @__PURE__ */ React8.createElement(import_ui9.Card, { elevation: 0, sx: { width: 320 } }, /* @__PURE__ */ React8.createElement(import_ui9.CardContent, { sx: { pb: 0 } }, /* @__PURE__ */ React8.createElement(import_ui9.Box, { display: "flex", alignItems: "start" }, /* @__PURE__ */ React8.createElement(import_ui9.SvgIcon, { fontSize: "tiny", sx: { mr: 0.5 } }, svgIcon), /* @__PURE__ */ React8.createElement(import_ui9.Typography, { variant: "body2" }, content, learnMoreButton && /* @__PURE__ */ React8.createElement(React8.Fragment, null, "\xA0", /* @__PURE__ */ React8.createElement(import_ui9.Link, { color: "info.main", href: learnMoreButton.href, target: "_blank" }, learnMoreButton.label))))), ctaButton && /* @__PURE__ */ React8.createElement(import_ui9.CardActions, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ React8.createElement(
338
+ import_ui9.Button,
295
339
  {
296
340
  size: "small",
297
341
  color: "secondary",
@@ -304,13 +348,13 @@ var InfoTipCard = ({ content, svgIcon, learnMoreButton, ctaButton }) => {
304
348
  };
305
349
 
306
350
  // src/components/warning-infotip.tsx
307
- var import_react6 = require("react");
308
- var React8 = __toESM(require("react"));
309
- var import_ui9 = require("@elementor/ui");
310
- var WarningInfotip = (0, import_react6.forwardRef)(
351
+ var import_react7 = require("react");
352
+ var React9 = __toESM(require("react"));
353
+ var import_ui10 = require("@elementor/ui");
354
+ var WarningInfotip = (0, import_react7.forwardRef)(
311
355
  ({ children, open, title, text, placement, width, offset, hasError = true }, ref) => {
312
- return /* @__PURE__ */ React8.createElement(
313
- import_ui9.Infotip,
356
+ return /* @__PURE__ */ React9.createElement(
357
+ import_ui10.Infotip,
314
358
  {
315
359
  ref,
316
360
  open,
@@ -323,15 +367,15 @@ var WarningInfotip = (0, import_react6.forwardRef)(
323
367
  modifiers: offset ? [{ name: "offset", options: { offset } }] : []
324
368
  },
325
369
  arrow: false,
326
- content: /* @__PURE__ */ React8.createElement(
327
- import_ui9.Alert,
370
+ content: /* @__PURE__ */ React9.createElement(
371
+ import_ui10.Alert,
328
372
  {
329
373
  color: hasError ? "error" : "secondary",
330
374
  severity: "warning",
331
375
  variant: "standard",
332
376
  size: "small"
333
377
  },
334
- title ? /* @__PURE__ */ React8.createElement(import_ui9.AlertTitle, null, title) : null,
378
+ title ? /* @__PURE__ */ React9.createElement(import_ui10.AlertTitle, null, title) : null,
335
379
  text
336
380
  )
337
381
  },
@@ -341,9 +385,9 @@ var WarningInfotip = (0, import_react6.forwardRef)(
341
385
  );
342
386
 
343
387
  // src/components/global-dialog/components/global-dialog.tsx
344
- var import_react7 = require("react");
345
- var React9 = __toESM(require("react"));
346
- var import_ui10 = require("@elementor/ui");
388
+ var import_react8 = require("react");
389
+ var React10 = __toESM(require("react"));
390
+ var import_ui11 = require("@elementor/ui");
347
391
 
348
392
  // src/components/global-dialog/subscribers.ts
349
393
  var currentDialogState = null;
@@ -367,8 +411,8 @@ var closeDialog = () => {
367
411
 
368
412
  // src/components/global-dialog/components/global-dialog.tsx
369
413
  var GlobalDialog = () => {
370
- const [content, setContent] = (0, import_react7.useState)(null);
371
- (0, import_react7.useEffect)(() => {
414
+ const [content, setContent] = (0, import_react8.useState)(null);
415
+ (0, import_react8.useEffect)(() => {
372
416
  const unsubscribe = subscribeToDialogState(setContent);
373
417
  return () => {
374
418
  unsubscribe();
@@ -377,18 +421,18 @@ var GlobalDialog = () => {
377
421
  if (!content) {
378
422
  return null;
379
423
  }
380
- return /* @__PURE__ */ React9.createElement(ThemeProvider, null, /* @__PURE__ */ React9.createElement(import_ui10.Dialog, { role: "dialog", open: true, onClose: closeDialog, maxWidth: "sm", fullWidth: true }, content.component));
424
+ return /* @__PURE__ */ React10.createElement(ThemeProvider, null, /* @__PURE__ */ React10.createElement(import_ui11.Dialog, { role: "dialog", open: true, onClose: closeDialog, maxWidth: "sm", fullWidth: true }, content.component));
381
425
  };
382
426
 
383
427
  // src/components/search-field.tsx
384
- var React10 = __toESM(require("react"));
385
- var import_react8 = require("react");
428
+ var React11 = __toESM(require("react"));
429
+ var import_react9 = require("react");
386
430
  var import_icons3 = require("@elementor/icons");
387
- var import_ui11 = require("@elementor/ui");
388
- var import_i18n2 = require("@wordpress/i18n");
431
+ var import_ui12 = require("@elementor/ui");
432
+ var import_i18n3 = require("@wordpress/i18n");
389
433
  var SIZE = "tiny";
390
434
  var SearchField = ({ value, onSearch, placeholder, id, sx }) => {
391
- const inputRef = (0, import_react8.useRef)(null);
435
+ const inputRef = (0, import_react9.useRef)(null);
392
436
  const handleClear = () => {
393
437
  onSearch("");
394
438
  inputRef.current?.focus();
@@ -396,8 +440,8 @@ var SearchField = ({ value, onSearch, placeholder, id, sx }) => {
396
440
  const handleInputChange = (event) => {
397
441
  onSearch(event.target.value);
398
442
  };
399
- return /* @__PURE__ */ React10.createElement(import_ui11.Box, { sx: { px: 2, pb: 1.5, ...sx } }, /* @__PURE__ */ React10.createElement(
400
- import_ui11.TextField,
443
+ return /* @__PURE__ */ React11.createElement(import_ui12.Box, { sx: { px: 2, pb: 1.5, ...sx } }, /* @__PURE__ */ React11.createElement(
444
+ import_ui12.TextField,
401
445
  {
402
446
  autoFocus: true,
403
447
  fullWidth: true,
@@ -408,18 +452,18 @@ var SearchField = ({ value, onSearch, placeholder, id, sx }) => {
408
452
  onChange: handleInputChange,
409
453
  placeholder,
410
454
  InputProps: {
411
- startAdornment: /* @__PURE__ */ React10.createElement(import_ui11.InputAdornment, { position: "start" }, /* @__PURE__ */ React10.createElement(import_icons3.SearchIcon, { fontSize: SIZE })),
412
- endAdornment: value && /* @__PURE__ */ React10.createElement(import_ui11.IconButton, { size: SIZE, onClick: handleClear, "aria-label": (0, import_i18n2.__)("Clear", "elementor") }, /* @__PURE__ */ React10.createElement(import_icons3.XIcon, { color: "action", fontSize: SIZE }))
455
+ startAdornment: /* @__PURE__ */ React11.createElement(import_ui12.InputAdornment, { position: "start" }, /* @__PURE__ */ React11.createElement(import_icons3.SearchIcon, { fontSize: SIZE })),
456
+ endAdornment: value && /* @__PURE__ */ React11.createElement(import_ui12.IconButton, { size: SIZE, onClick: handleClear, "aria-label": (0, import_i18n3.__)("Clear", "elementor") }, /* @__PURE__ */ React11.createElement(import_icons3.XIcon, { color: "action", fontSize: SIZE }))
413
457
  }
414
458
  }
415
459
  ));
416
460
  };
417
461
 
418
462
  // src/components/form.tsx
419
- var React11 = __toESM(require("react"));
420
- var import_react9 = require("react");
463
+ var React12 = __toESM(require("react"));
464
+ var import_react10 = require("react");
421
465
  var Form = ({ children, onSubmit, "data-testid": dataTestId }) => {
422
- const formRef = (0, import_react9.useRef)(null);
466
+ const formRef = (0, import_react10.useRef)(null);
423
467
  const handleSubmit = (e) => {
424
468
  e.preventDefault();
425
469
  onSubmit?.();
@@ -433,7 +477,7 @@ var Form = ({ children, onSubmit, "data-testid": dataTestId }) => {
433
477
  };
434
478
  return (
435
479
  // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
436
- /* @__PURE__ */ React11.createElement(
480
+ /* @__PURE__ */ React12.createElement(
437
481
  "form",
438
482
  {
439
483
  onSubmit: handleSubmit,
@@ -447,35 +491,35 @@ var Form = ({ children, onSubmit, "data-testid": dataTestId }) => {
447
491
  };
448
492
 
449
493
  // src/components/cta-button.tsx
450
- var React12 = __toESM(require("react"));
494
+ var React13 = __toESM(require("react"));
451
495
  var import_icons4 = require("@elementor/icons");
452
- var import_ui12 = require("@elementor/ui");
453
- var import_i18n3 = require("@wordpress/i18n");
454
- var CtaButton = ({ href, children, showIcon = true, ...props }) => /* @__PURE__ */ React12.createElement(
455
- import_ui12.Button,
496
+ var import_ui13 = require("@elementor/ui");
497
+ var import_i18n4 = require("@wordpress/i18n");
498
+ var CtaButton = ({ href, children, showIcon = true, ...props }) => /* @__PURE__ */ React13.createElement(
499
+ import_ui13.Button,
456
500
  {
457
501
  variant: "contained",
458
502
  color: "promotion",
459
503
  href,
460
504
  target: "_blank",
461
- startIcon: showIcon ? /* @__PURE__ */ React12.createElement(import_icons4.CrownFilledIcon, null) : void 0,
505
+ startIcon: showIcon ? /* @__PURE__ */ React13.createElement(import_icons4.CrownFilledIcon, null) : void 0,
462
506
  ...props
463
507
  },
464
- children ?? (0, import_i18n3.__)("Upgrade Now", "elementor")
508
+ children ?? (0, import_i18n4.__)("Upgrade Now", "elementor")
465
509
  );
466
510
 
467
511
  // src/components/promotions/promotion-infotip.tsx
468
- var React13 = __toESM(require("react"));
469
- var import_ui13 = require("@elementor/ui");
512
+ var React14 = __toESM(require("react"));
513
+ var import_ui14 = require("@elementor/ui");
470
514
 
471
515
  // src/hooks/use-scroll-to-selected.ts
472
- var import_react10 = require("react");
516
+ var import_react11 = require("react");
473
517
  var useScrollToSelected = ({
474
518
  selectedValue,
475
519
  items,
476
520
  virtualizer
477
521
  }) => {
478
- (0, import_react10.useEffect)(() => {
522
+ (0, import_react11.useEffect)(() => {
479
523
  if (!selectedValue || items.length === 0) {
480
524
  return;
481
525
  }
@@ -487,10 +531,10 @@ var useScrollToSelected = ({
487
531
  };
488
532
 
489
533
  // src/hooks/use-scroll-top.ts
490
- var import_react11 = require("react");
534
+ var import_react12 = require("react");
491
535
  var useScrollTop = ({ containerRef }) => {
492
- const [scrollTop, setScrollTop] = (0, import_react11.useState)(0);
493
- (0, import_react11.useEffect)(() => {
536
+ const [scrollTop, setScrollTop] = (0, import_react12.useState)(0);
537
+ (0, import_react12.useEffect)(() => {
494
538
  const container = containerRef.current;
495
539
  if (!container) {
496
540
  return;
@@ -505,10 +549,10 @@ var useScrollTop = ({ containerRef }) => {
505
549
  };
506
550
 
507
551
  // src/hooks/use-text-field-auto-select.ts
508
- var import_react12 = require("react");
552
+ var import_react13 = require("react");
509
553
  var useTextFieldAutoSelect = () => {
510
- const inputRef = (0, import_react12.useRef)(null);
511
- (0, import_react12.useEffect)(() => {
554
+ const inputRef = (0, import_react13.useRef)(null);
555
+ (0, import_react13.useEffect)(() => {
512
556
  if (inputRef.current) {
513
557
  inputRef.current.focus();
514
558
  inputRef.current.select();
@@ -518,10 +562,10 @@ var useTextFieldAutoSelect = () => {
518
562
  };
519
563
 
520
564
  // src/hooks/use-canvas-click-handler.tsx
521
- var import_react13 = require("react");
565
+ var import_react14 = require("react");
522
566
  var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
523
567
  var useCanvasClickHandler = (isActive, onClickAway) => {
524
- (0, import_react13.useEffect)(() => {
568
+ (0, import_react14.useEffect)(() => {
525
569
  const canvasDocument = isActive ? (0, import_editor_v1_adapters2.getCanvasIframeDocument)() : null;
526
570
  if (!canvasDocument) {
527
571
  return;
@@ -534,56 +578,59 @@ var useCanvasClickHandler = (isActive, onClickAway) => {
534
578
  // src/components/promotions/promotion-infotip.tsx
535
579
  var PromotionInfotip = ({ children, open, onClose, ...cardProps }) => {
536
580
  useCanvasClickHandler(!!open, onClose);
537
- return /* @__PURE__ */ React13.createElement(import_ui13.Infotip, { placement: "right", content: /* @__PURE__ */ React13.createElement(InfotipCard, { onClose, ...cardProps }), open }, children);
581
+ return /* @__PURE__ */ React14.createElement(import_ui14.Infotip, { placement: "right", content: /* @__PURE__ */ React14.createElement(InfotipCard, { onClose, ...cardProps }), open }, children);
538
582
  };
539
583
  function InfotipCard({ title, content, assetUrl, ctaUrl, onClose }) {
540
- return /* @__PURE__ */ React13.createElement(
541
- import_ui13.ClickAwayListener,
584
+ return /* @__PURE__ */ React14.createElement(
585
+ import_ui14.ClickAwayListener,
542
586
  {
543
587
  disableReactTree: true,
544
588
  mouseEvent: "onMouseDown",
545
589
  touchEvent: "onTouchStart",
546
590
  onClickAway: onClose
547
591
  },
548
- /* @__PURE__ */ React13.createElement(import_ui13.Card, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React13.createElement(
549
- import_ui13.CardHeader,
592
+ /* @__PURE__ */ React14.createElement(import_ui14.Card, { elevation: 0, sx: { maxWidth: 296 } }, /* @__PURE__ */ React14.createElement(
593
+ import_ui14.CardHeader,
550
594
  {
551
595
  title,
552
- action: /* @__PURE__ */ React13.createElement(import_ui13.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: onClose })
596
+ action: /* @__PURE__ */ React14.createElement(import_ui14.CloseButton, { slotProps: { icon: { fontSize: "tiny" } }, onClick: onClose })
553
597
  }
554
- ), /* @__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 })))
598
+ ), /* @__PURE__ */ React14.createElement(import_ui14.CardMedia, { component: "img", image: assetUrl, alt: "", sx: { width: "100%", aspectRatio: "16 / 9" } }), /* @__PURE__ */ React14.createElement(import_ui14.CardContent, null, /* @__PURE__ */ React14.createElement(import_ui14.Typography, { variant: "body2", color: "text.secondary" }, content)), /* @__PURE__ */ React14.createElement(import_ui14.CardActions, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ React14.createElement(CtaButton, { href: ctaUrl })))
555
599
  );
556
600
  }
557
601
 
558
602
  // src/components/promotions/promotion-popover.tsx
559
- var React14 = __toESM(require("react"));
603
+ var React15 = __toESM(require("react"));
560
604
  var import_icons5 = require("@elementor/icons");
561
- var import_ui14 = require("@elementor/ui");
605
+ var import_ui15 = require("@elementor/ui");
562
606
  var PromotionPopover = ({
563
607
  children,
564
608
  open,
565
609
  placement = "right",
566
610
  slotProps,
611
+ anchorRef,
567
612
  ...cardProps
568
613
  }) => {
614
+ const anchorEl = anchorRef?.current;
569
615
  const defaultSlotProps = {
570
616
  popper: {
617
+ ...anchorEl && { anchorEl },
571
618
  modifiers: [
572
619
  {
573
620
  name: "offset",
574
621
  options: {
575
- offset: [0, 10]
622
+ offset: anchorRef ? [0, 4] : [0, 10]
576
623
  }
577
624
  }
578
625
  ]
579
626
  }
580
627
  };
581
- return /* @__PURE__ */ React14.createElement(
582
- import_ui14.Infotip,
628
+ return /* @__PURE__ */ React15.createElement(
629
+ import_ui15.Infotip,
583
630
  {
584
631
  placement,
585
632
  arrow: false,
586
- content: /* @__PURE__ */ React14.createElement(PopoverAlert, { ...cardProps }),
633
+ content: /* @__PURE__ */ React15.createElement(PopoverAlert, { ...cardProps }),
587
634
  open,
588
635
  slotProps: slotProps || defaultSlotProps
589
636
  },
@@ -591,25 +638,26 @@ var PromotionPopover = ({
591
638
  );
592
639
  };
593
640
  function PopoverAlert({ title, content, ctaUrl, ctaText, onClose }) {
594
- return /* @__PURE__ */ React14.createElement(
595
- import_ui14.ClickAwayListener,
641
+ return /* @__PURE__ */ React15.createElement(
642
+ import_ui15.ClickAwayListener,
596
643
  {
597
644
  disableReactTree: true,
598
645
  mouseEvent: "onMouseDown",
599
646
  touchEvent: "onTouchStart",
600
647
  onClickAway: onClose
601
648
  },
602
- /* @__PURE__ */ React14.createElement(
603
- import_ui14.Alert,
649
+ /* @__PURE__ */ React15.createElement(
650
+ import_ui15.Alert,
604
651
  {
605
652
  variant: "standard",
606
653
  color: "promotion",
607
- icon: /* @__PURE__ */ React14.createElement(import_icons5.CrownFilledIcon, { fontSize: "tiny" }),
654
+ icon: /* @__PURE__ */ React15.createElement(import_icons5.CrownFilledIcon, { fontSize: "tiny" }),
608
655
  onClose,
656
+ onMouseDown: (e) => e.stopPropagation(),
609
657
  role: "dialog",
610
658
  "aria-label": "promotion-popover-title",
611
- action: /* @__PURE__ */ React14.createElement(
612
- import_ui14.AlertAction,
659
+ action: /* @__PURE__ */ React15.createElement(
660
+ import_ui15.AlertAction,
613
661
  {
614
662
  variant: "contained",
615
663
  color: "promotion",
@@ -621,25 +669,25 @@ function PopoverAlert({ title, content, ctaUrl, ctaText, onClose }) {
621
669
  ),
622
670
  sx: { maxWidth: 296 }
623
671
  },
624
- /* @__PURE__ */ React14.createElement(import_ui14.Box, { sx: { gap: 0.5, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React14.createElement(import_ui14.AlertTitle, null, title), /* @__PURE__ */ React14.createElement(import_ui14.Typography, { variant: "body2" }, content))
672
+ /* @__PURE__ */ React15.createElement(import_ui15.Box, { sx: { gap: 0.5, display: "flex", flexDirection: "column" } }, /* @__PURE__ */ React15.createElement(import_ui15.AlertTitle, null, title), /* @__PURE__ */ React15.createElement(import_ui15.Typography, { variant: "body2" }, content))
625
673
  )
626
674
  );
627
675
  }
628
676
 
629
677
  // src/components/promotions/promotion-chip.tsx
630
- var React15 = __toESM(require("react"));
678
+ var React16 = __toESM(require("react"));
631
679
  var import_icons6 = require("@elementor/icons");
632
- var import_ui15 = require("@elementor/ui");
633
- var PromotionChip = React15.forwardRef(({ ...props }, ref) => {
634
- return /* @__PURE__ */ React15.createElement(
635
- import_ui15.Chip,
680
+ var import_ui16 = require("@elementor/ui");
681
+ var PromotionChip = React16.forwardRef(({ ...props }, ref) => {
682
+ return /* @__PURE__ */ React16.createElement(
683
+ import_ui16.Chip,
636
684
  {
637
685
  "aria-label": "Promotion chip",
638
686
  ref,
639
687
  size: "tiny",
640
688
  color: "promotion",
641
689
  variant: "standard",
642
- icon: /* @__PURE__ */ React15.createElement(import_icons6.CrownFilledIcon, null),
690
+ icon: /* @__PURE__ */ React16.createElement(import_icons6.CrownFilledIcon, null),
643
691
  sx: {
644
692
  ml: 1,
645
693
  width: "20px",
@@ -653,12 +701,12 @@ var PromotionChip = React15.forwardRef(({ ...props }, ref) => {
653
701
  });
654
702
 
655
703
  // src/components/promotions/promotion-alert.tsx
656
- var React16 = __toESM(require("react"));
704
+ var React17 = __toESM(require("react"));
657
705
  var import_icons7 = require("@elementor/icons");
658
- var import_ui16 = require("@elementor/ui");
659
- var import_i18n4 = require("@wordpress/i18n");
660
- var PromotionAlert = ({ message, upgradeUrl }) => /* @__PURE__ */ React16.createElement(
661
- import_ui16.Alert,
706
+ var import_ui17 = require("@elementor/ui");
707
+ var import_i18n5 = require("@wordpress/i18n");
708
+ var PromotionAlert = ({ message, upgradeUrl }) => /* @__PURE__ */ React17.createElement(
709
+ import_ui17.Alert,
662
710
  {
663
711
  variant: "standard",
664
712
  color: "promotion",
@@ -669,8 +717,8 @@ var PromotionAlert = ({ message, upgradeUrl }) => /* @__PURE__ */ React16.create
669
717
  sx: { m: 2, mt: 1, pt: 0.5, pb: 0.5 }
670
718
  },
671
719
  message,
672
- /* @__PURE__ */ React16.createElement(
673
- import_ui16.Button,
720
+ /* @__PURE__ */ React17.createElement(
721
+ import_ui17.Button,
674
722
  {
675
723
  size: "tiny",
676
724
  variant: "text",
@@ -678,17 +726,17 @@ var PromotionAlert = ({ message, upgradeUrl }) => /* @__PURE__ */ React16.create
678
726
  target: "_blank",
679
727
  href: upgradeUrl,
680
728
  rel: "noopener noreferrer",
681
- startIcon: /* @__PURE__ */ React16.createElement(import_icons7.CrownFilledIcon, { fontSize: "tiny" })
729
+ startIcon: /* @__PURE__ */ React17.createElement(import_icons7.CrownFilledIcon, { fontSize: "tiny" })
682
730
  },
683
- (0, import_i18n4.__)("Upgrade now", "elementor")
731
+ (0, import_i18n5.__)("Upgrade now", "elementor")
684
732
  )
685
733
  );
686
734
 
687
735
  // src/components/floating-bar.tsx
688
- var React17 = __toESM(require("react"));
689
- var import_react14 = require("react");
690
- var import_ui17 = require("@elementor/ui");
691
- var FloatingBarContainer = (0, import_ui17.styled)("span")`
736
+ var React18 = __toESM(require("react"));
737
+ var import_react15 = require("react");
738
+ var import_ui18 = require("@elementor/ui");
739
+ var FloatingBarContainer = (0, import_ui18.styled)("span")`
692
740
  display: contents;
693
741
 
694
742
  .MuiFloatingActionBar-popper:has( .MuiFloatingActionBar-actions:empty ) {
@@ -699,13 +747,13 @@ var FloatingBarContainer = (0, import_ui17.styled)("span")`
699
747
  z-index: 1000;
700
748
  }
701
749
  `;
702
- var FloatingActionsContext = (0, import_react14.createContext)(null);
750
+ var FloatingActionsContext = (0, import_react15.createContext)(null);
703
751
  function FloatingActionsBar({ actions, children }) {
704
- const [open, setOpen] = (0, import_react14.useState)(false);
705
- return /* @__PURE__ */ React17.createElement(FloatingActionsContext.Provider, { value: { open, setOpen } }, /* @__PURE__ */ React17.createElement(FloatingBarContainer, null, /* @__PURE__ */ React17.createElement(import_ui17.UnstableFloatingActionBar, { actions, open: open || void 0 }, children)));
752
+ const [open, setOpen] = (0, import_react15.useState)(false);
753
+ return /* @__PURE__ */ React18.createElement(FloatingActionsContext.Provider, { value: { open, setOpen } }, /* @__PURE__ */ React18.createElement(FloatingBarContainer, null, /* @__PURE__ */ React18.createElement(import_ui18.UnstableFloatingActionBar, { actions, open: open || void 0 }, children)));
706
754
  }
707
755
  function useFloatingActionsBar() {
708
- const context = (0, import_react14.useContext)(FloatingActionsContext);
756
+ const context = (0, import_react15.useContext)(FloatingActionsContext);
709
757
  if (!context) {
710
758
  throw new Error("useFloatingActions must be used within a FloatingActionsBar");
711
759
  }
@@ -713,14 +761,14 @@ function useFloatingActionsBar() {
713
761
  }
714
762
 
715
763
  // src/components/popover/body.tsx
716
- var React18 = __toESM(require("react"));
717
- var import_ui18 = require("@elementor/ui");
764
+ var React19 = __toESM(require("react"));
765
+ var import_ui19 = require("@elementor/ui");
718
766
  var SECTION_PADDING_INLINE = 32;
719
767
  var DEFAULT_POPOVER_HEIGHT = 348;
720
768
  var FALLBACK_POPOVER_WIDTH = 220;
721
769
  var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) => {
722
- return /* @__PURE__ */ React18.createElement(
723
- import_ui18.Box,
770
+ return /* @__PURE__ */ React19.createElement(
771
+ import_ui19.Box,
724
772
  {
725
773
  display: "flex",
726
774
  flexDirection: "column",
@@ -737,13 +785,13 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
737
785
  };
738
786
 
739
787
  // src/components/popover/section-popover-body.tsx
740
- var React19 = __toESM(require("react"));
788
+ var React20 = __toESM(require("react"));
741
789
 
742
790
  // src/contexts/section-context.tsx
743
- var import_react15 = require("react");
791
+ var import_react16 = require("react");
744
792
  var FALLBACK_SECTION_WIDTH = 320;
745
- var SectionRefContext = (0, import_react15.createContext)(null);
746
- var useSectionRef = () => (0, import_react15.useContext)(SectionRefContext);
793
+ var SectionRefContext = (0, import_react16.createContext)(null);
794
+ var useSectionRef = () => (0, import_react16.useContext)(SectionRefContext);
747
795
  var useSectionWidth = () => {
748
796
  const sectionRef = useSectionRef();
749
797
  return sectionRef?.current?.offsetWidth ?? FALLBACK_SECTION_WIDTH;
@@ -752,12 +800,12 @@ var useSectionWidth = () => {
752
800
  // src/components/popover/section-popover-body.tsx
753
801
  var SectionPopoverBody = (props) => {
754
802
  const sectionWidth = useSectionWidth();
755
- return /* @__PURE__ */ React19.createElement(PopoverBody, { ...props, width: sectionWidth });
803
+ return /* @__PURE__ */ React20.createElement(PopoverBody, { ...props, width: sectionWidth });
756
804
  };
757
805
 
758
806
  // src/components/popover/header.tsx
759
- var React20 = __toESM(require("react"));
760
- var import_ui19 = require("@elementor/ui");
807
+ var React21 = __toESM(require("react"));
808
+ var import_ui20 = require("@elementor/ui");
761
809
  var SIZE2 = "tiny";
762
810
  var PopoverHeader = ({ title, onClose, icon, actions }) => {
763
811
  const paddingAndSizing = {
@@ -766,13 +814,13 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
766
814
  py: 1.5,
767
815
  maxHeight: 36
768
816
  };
769
- return /* @__PURE__ */ React20.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React20.createElement(import_ui19.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React20.createElement(import_ui19.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React20.createElement(import_ui19.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
817
+ return /* @__PURE__ */ React21.createElement(import_ui20.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React21.createElement(import_ui20.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React21.createElement(import_ui20.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React21.createElement(import_ui20.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
770
818
  };
771
819
 
772
820
  // src/components/popover/menu-list.tsx
773
- var React21 = __toESM(require("react"));
774
- var import_react16 = require("react");
775
- var import_ui20 = require("@elementor/ui");
821
+ var React22 = __toESM(require("react"));
822
+ var import_react17 = require("react");
823
+ var import_ui21 = require("@elementor/ui");
776
824
  var import_react_virtual = require("@tanstack/react-virtual");
777
825
  var ITEM_HEIGHT = 32;
778
826
  var LIST_ITEMS_BUFFER = 6;
@@ -799,11 +847,11 @@ var PopoverMenuList = ({
799
847
  noResultsComponent,
800
848
  menuListTemplate: CustomMenuList
801
849
  }) => {
802
- const containerRef = (0, import_react16.useRef)(null);
850
+ const containerRef = (0, import_react17.useRef)(null);
803
851
  const scrollTop = useScrollTop({ containerRef });
804
- const theme = (0, import_ui20.useTheme)();
852
+ const theme = (0, import_ui21.useTheme)();
805
853
  const MenuListComponent = CustomMenuList || StyledMenuList;
806
- const stickyIndices = (0, import_react16.useMemo)(
854
+ const stickyIndices = (0, import_react17.useMemo)(
807
855
  () => items.reduce((categoryIndices, item, index) => {
808
856
  if (item.type === "category") {
809
857
  categoryIndices.push(index);
@@ -837,12 +885,12 @@ var PopoverMenuList = ({
837
885
  rangeExtractor: getActiveItemIndices,
838
886
  onChange: onChangeCallback
839
887
  });
840
- (0, import_react16.useEffect)(() => {
888
+ (0, import_react17.useEffect)(() => {
841
889
  onChangeCallback(virtualizer);
842
890
  }, [items]);
843
891
  useScrollToSelected({ selectedValue, items, virtualizer });
844
892
  const virtualItems = virtualizer.getVirtualItems();
845
- return /* @__PURE__ */ React21.createElement(import_ui20.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React21.createElement(
893
+ return /* @__PURE__ */ React22.createElement(import_ui21.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React22.createElement(
846
894
  MenuListComponent,
847
895
  {
848
896
  role: "listbox",
@@ -860,8 +908,8 @@ var PopoverMenuList = ({
860
908
  }
861
909
  if (item.type === "category") {
862
910
  const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
863
- return /* @__PURE__ */ React21.createElement(
864
- import_ui20.MenuSubheader,
911
+ return /* @__PURE__ */ React22.createElement(
912
+ import_ui21.MenuSubheader,
865
913
  {
866
914
  key: virtualRow.key,
867
915
  style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
@@ -871,8 +919,8 @@ var PopoverMenuList = ({
871
919
  );
872
920
  }
873
921
  const isDisabled = item.disabled;
874
- return /* @__PURE__ */ React21.createElement(
875
- import_ui20.ListItem,
922
+ return /* @__PURE__ */ React22.createElement(
923
+ import_ui21.ListItem,
876
924
  {
877
925
  key: virtualRow.key,
878
926
  role: "option",
@@ -911,7 +959,7 @@ var PopoverMenuList = ({
911
959
  })
912
960
  ));
913
961
  };
914
- var StyledMenuList = (0, import_ui20.styled)(import_ui20.MenuList)(({ theme }) => ({
962
+ var StyledMenuList = (0, import_ui21.styled)(import_ui21.MenuList)(({ theme }) => ({
915
963
  "& > li": {
916
964
  height: ITEM_HEIGHT,
917
965
  width: "100%",
@@ -941,16 +989,16 @@ var StyledMenuList = (0, import_ui20.styled)(import_ui20.MenuList)(({ theme }) =
941
989
  }));
942
990
 
943
991
  // src/components/popover/popover-action.tsx
944
- var React22 = __toESM(require("react"));
945
- var import_ui21 = require("@elementor/ui");
992
+ var React23 = __toESM(require("react"));
993
+ var import_ui22 = require("@elementor/ui");
946
994
  var SIZE3 = "tiny";
947
995
  function PopoverAction({ title, visible = true, icon: Icon, content: PopoverContent }) {
948
996
  const { popupState, triggerProps, popoverProps } = useFloatingActionsPopover();
949
997
  if (!visible) {
950
998
  return null;
951
999
  }
952
- return /* @__PURE__ */ React22.createElement(React22.Fragment, null, /* @__PURE__ */ React22.createElement(import_ui21.Tooltip, { placement: "top", title }, /* @__PURE__ */ React22.createElement(import_ui21.IconButton, { "aria-label": title, size: SIZE3, ...triggerProps }, /* @__PURE__ */ React22.createElement(Icon, { fontSize: SIZE3 }))), /* @__PURE__ */ React22.createElement(
953
- import_ui21.Popover,
1000
+ return /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(import_ui22.Tooltip, { placement: "top", title }, /* @__PURE__ */ React23.createElement(import_ui22.IconButton, { "aria-label": title, size: SIZE3, ...triggerProps }, /* @__PURE__ */ React23.createElement(Icon, { fontSize: SIZE3 }))), /* @__PURE__ */ React23.createElement(
1001
+ import_ui22.Popover,
954
1002
  {
955
1003
  disableScrollLock: true,
956
1004
  anchorOrigin: {
@@ -966,14 +1014,14 @@ function PopoverAction({ title, visible = true, icon: Icon, content: PopoverCont
966
1014
  },
967
1015
  ...popoverProps
968
1016
  },
969
- /* @__PURE__ */ React22.createElement(PopoverContent, { close: popupState.close })
1017
+ /* @__PURE__ */ React23.createElement(PopoverContent, { close: popupState.close })
970
1018
  ));
971
1019
  }
972
1020
  function useFloatingActionsPopover() {
973
1021
  const { setOpen } = useFloatingActionsBar();
974
- const popupState = (0, import_ui21.usePopupState)({ variant: "popover" });
975
- const triggerProps = (0, import_ui21.bindTrigger)(popupState);
976
- const popoverProps = (0, import_ui21.bindPopover)(popupState);
1022
+ const popupState = (0, import_ui22.usePopupState)({ variant: "popover" });
1023
+ const triggerProps = (0, import_ui22.bindTrigger)(popupState);
1024
+ const popoverProps = (0, import_ui22.bindPopover)(popupState);
977
1025
  const onClick = (e) => {
978
1026
  triggerProps.onClick(e);
979
1027
  setOpen(true);
@@ -994,14 +1042,14 @@ function useFloatingActionsPopover() {
994
1042
  }
995
1043
 
996
1044
  // src/components/save-changes-dialog.tsx
997
- var React23 = __toESM(require("react"));
998
- var import_react17 = require("react");
1045
+ var React24 = __toESM(require("react"));
1046
+ var import_react18 = require("react");
999
1047
  var import_icons8 = require("@elementor/icons");
1000
- var import_ui22 = require("@elementor/ui");
1048
+ var import_ui23 = require("@elementor/ui");
1001
1049
  var TITLE_ID = "save-changes-dialog";
1002
- var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React23.createElement(import_ui22.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
1003
- var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React23.createElement(
1004
- import_ui22.DialogTitle,
1050
+ var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React24.createElement(import_ui23.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
1051
+ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React24.createElement(
1052
+ import_ui23.DialogTitle,
1005
1053
  {
1006
1054
  id: TITLE_ID,
1007
1055
  display: "flex",
@@ -1009,58 +1057,89 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React23.
1009
1057
  gap: 1,
1010
1058
  sx: { lineHeight: 1, justifyContent: "space-between" }
1011
1059
  },
1012
- /* @__PURE__ */ React23.createElement(import_ui22.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React23.createElement(import_icons8.AlertTriangleFilledIcon, { color: "secondary" }), children),
1013
- onClose && /* @__PURE__ */ React23.createElement(import_ui22.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React23.createElement(import_icons8.XIcon, null))
1060
+ /* @__PURE__ */ React24.createElement(import_ui23.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React24.createElement(import_icons8.AlertTriangleFilledIcon, { color: "secondary" }), children),
1061
+ onClose && /* @__PURE__ */ React24.createElement(import_ui23.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React24.createElement(import_icons8.XIcon, null))
1014
1062
  );
1015
- var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React23.createElement(import_ui22.DialogContent, null, children);
1016
- var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React23.createElement(import_ui22.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
1063
+ var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React24.createElement(import_ui23.DialogContent, null, children);
1064
+ var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React24.createElement(import_ui23.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
1017
1065
  var SaveChangesDialogActions = ({ actions }) => {
1018
- const [isConfirming, setIsConfirming] = (0, import_react17.useState)(false);
1066
+ const [isConfirming, setIsConfirming] = (0, import_react18.useState)(false);
1019
1067
  const { cancel, confirm, discard } = actions;
1020
1068
  const onConfirm = async () => {
1021
1069
  setIsConfirming(true);
1022
1070
  await confirm.action();
1023
1071
  setIsConfirming(false);
1024
1072
  };
1025
- return /* @__PURE__ */ React23.createElement(import_ui22.DialogActions, null, cancel && /* @__PURE__ */ React23.createElement(import_ui22.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React23.createElement(import_ui22.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React23.createElement(import_ui22.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
1073
+ return /* @__PURE__ */ React24.createElement(import_ui23.DialogActions, null, cancel && /* @__PURE__ */ React24.createElement(import_ui23.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React24.createElement(import_ui23.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React24.createElement(import_ui23.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
1026
1074
  };
1027
1075
  SaveChangesDialog.Title = SaveChangesDialogTitle;
1028
1076
  SaveChangesDialog.Content = SaveChangesDialogContent;
1029
1077
  SaveChangesDialog.ContentText = SaveChangesDialogContentText;
1030
1078
  SaveChangesDialog.Actions = SaveChangesDialogActions;
1031
1079
  var useDialog = () => {
1032
- const [isOpen, setIsOpen] = (0, import_react17.useState)(false);
1080
+ const [isOpen, setIsOpen] = (0, import_react18.useState)(false);
1033
1081
  const open = () => setIsOpen(true);
1034
1082
  const close = () => setIsOpen(false);
1035
1083
  return { isOpen, open, close };
1036
1084
  };
1037
1085
 
1038
1086
  // src/components/confirmation-dialog.tsx
1039
- var React24 = __toESM(require("react"));
1087
+ var React25 = __toESM(require("react"));
1088
+ var import_react19 = require("react");
1040
1089
  var import_icons9 = require("@elementor/icons");
1041
- var import_ui23 = require("@elementor/ui");
1042
- var import_i18n5 = require("@wordpress/i18n");
1090
+ var import_ui24 = require("@elementor/ui");
1091
+ var import_i18n6 = require("@wordpress/i18n");
1043
1092
  var TITLE_ID2 = "confirmation-dialog";
1044
- var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React24.createElement(import_ui23.Dialog, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
1045
- var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React24.createElement(import_ui23.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React24.createElement(import_icons9.AlertOctagonFilledIcon, { color: "error" }), children);
1046
- var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React24.createElement(import_ui23.DialogContent, null, children);
1047
- var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React24.createElement(import_ui23.DialogContentText, { variant: "body2", color: "textPrimary", ...props });
1093
+ var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React25.createElement(import_ui24.Dialog, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "sm" }, children);
1094
+ var ConfirmationDialogTitle = ({
1095
+ children,
1096
+ icon: Icon = import_icons9.AlertOctagonFilledIcon,
1097
+ iconColor = "error"
1098
+ }) => /* @__PURE__ */ React25.createElement(import_ui24.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React25.createElement(Icon, { color: iconColor }), children);
1099
+ var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React25.createElement(import_ui24.DialogContent, { sx: { mt: 2 } }, children);
1100
+ var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React25.createElement(import_ui24.DialogContentText, { variant: "body2", color: "secondary", ...props });
1048
1101
  var ConfirmationDialogActions = ({
1049
1102
  onClose,
1050
1103
  onConfirm,
1051
1104
  cancelLabel,
1052
- confirmLabel
1053
- }) => /* @__PURE__ */ React24.createElement(import_ui23.DialogActions, null, /* @__PURE__ */ React24.createElement(import_ui23.Button, { color: "secondary", onClick: onClose }, cancelLabel ?? (0, import_i18n5.__)("Not now", "elementor")), /* @__PURE__ */ React24.createElement(import_ui23.Button, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? (0, import_i18n5.__)("Delete", "elementor")));
1105
+ confirmLabel,
1106
+ color = "error",
1107
+ onSuppressMessage,
1108
+ suppressLabel = (0, import_i18n6.__)("Don't show this again", "elementor")
1109
+ }) => {
1110
+ const [dontShowAgain, setDontShowAgain] = (0, import_react19.useState)(false);
1111
+ const handleConfirm = () => {
1112
+ if (dontShowAgain && onSuppressMessage) {
1113
+ onSuppressMessage();
1114
+ }
1115
+ onConfirm();
1116
+ };
1117
+ return /* @__PURE__ */ React25.createElement(import_ui24.DialogActions, { sx: onSuppressMessage ? { justifyContent: "space-between", alignItems: "center" } : void 0 }, onSuppressMessage && /* @__PURE__ */ React25.createElement(
1118
+ import_ui24.FormControlLabel,
1119
+ {
1120
+ control: /* @__PURE__ */ React25.createElement(
1121
+ import_ui24.Checkbox,
1122
+ {
1123
+ checked: dontShowAgain,
1124
+ onChange: (event) => setDontShowAgain(event.target.checked),
1125
+ size: "medium",
1126
+ color: "secondary"
1127
+ }
1128
+ ),
1129
+ label: /* @__PURE__ */ React25.createElement(import_ui24.Typography, { variant: "body2", color: "text.secondary" }, suppressLabel)
1130
+ }
1131
+ ), /* @__PURE__ */ React25.createElement("div", null, /* @__PURE__ */ React25.createElement(import_ui24.Button, { color: "secondary", onClick: onClose }, cancelLabel ?? (0, import_i18n6.__)("Not now", "elementor")), /* @__PURE__ */ React25.createElement(import_ui24.Button, { autoFocus: true, variant: "contained", color, onClick: handleConfirm, sx: { ml: 1 } }, confirmLabel ?? (0, import_i18n6.__)("Delete", "elementor"))));
1132
+ };
1054
1133
  ConfirmationDialog.Title = ConfirmationDialogTitle;
1055
1134
  ConfirmationDialog.Content = ConfirmationDialogContent;
1056
1135
  ConfirmationDialog.ContentText = ConfirmationDialogContentText;
1057
1136
  ConfirmationDialog.Actions = ConfirmationDialogActions;
1058
1137
 
1059
1138
  // src/hooks/use-editable.ts
1060
- var import_react18 = require("react");
1139
+ var import_react20 = require("react");
1061
1140
  var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
1062
- const [isEditing, setIsEditing] = (0, import_react18.useState)(false);
1063
- const [error, setError] = (0, import_react18.useState)(null);
1141
+ const [isEditing, setIsEditing] = (0, import_react20.useState)(false);
1142
+ const [error, setError] = (0, import_react20.useState)(null);
1064
1143
  const ref = useSelection(isEditing);
1065
1144
  const isDirty = (newValue) => newValue !== value;
1066
1145
  const openEditMode = () => {
@@ -1142,8 +1221,8 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
1142
1221
  };
1143
1222
  };
1144
1223
  var useSelection = (isEditing) => {
1145
- const ref = (0, import_react18.useRef)(null);
1146
- (0, import_react18.useEffect)(() => {
1224
+ const ref = (0, import_react20.useRef)(null);
1225
+ (0, import_react20.useEffect)(() => {
1147
1226
  if (isEditing) {
1148
1227
  selectAll(ref.current);
1149
1228
  }
@@ -1163,6 +1242,7 @@ var selectAll = (el) => {
1163
1242
  // Annotate the CommonJS export names for ESM import in node:
1164
1243
  0 && (module.exports = {
1165
1244
  CollapseIcon,
1245
+ CollapsibleContent,
1166
1246
  ConfirmationDialog,
1167
1247
  CtaButton,
1168
1248
  EditableField,
@@ -1192,6 +1272,7 @@ var selectAll = (el) => {
1192
1272
  ThemeProvider,
1193
1273
  WarningInfotip,
1194
1274
  closeDialog,
1275
+ getCollapsibleValue,
1195
1276
  openDialog,
1196
1277
  useCanvasClickHandler,
1197
1278
  useDialog,