@elementor/editor-ui 0.14.0 → 3.32.0-20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @elementor/editor-ui
2
2
 
3
+ ## 0.14.1
4
+
5
+ ### Patch Changes
6
+
7
+ - 2e677ee: Automatically scroll to the selected popover item
8
+
3
9
  ## 0.14.0
4
10
 
5
11
  ### Minor Changes
package/dist/index.d.mts CHANGED
@@ -58,8 +58,14 @@ interface WarningInfotipProps extends PropsWithChildren {
58
58
  }
59
59
  declare const WarningInfotip: React$1.ForwardRefExoticComponent<WarningInfotipProps & React$1.RefAttributes<unknown>>;
60
60
 
61
+ type PopoverBodyProps = PropsWithChildren<{
62
+ height?: number | 'auto';
63
+ width?: number;
64
+ }>;
65
+ declare const PopoverBody: ({ children, height, width }: PopoverBodyProps) => React$1.JSX.Element;
66
+
61
67
  type PopoverHeaderProps = {
62
- title: string;
68
+ title: React$1.ReactNode;
63
69
  onClose: () => void;
64
70
  icon?: React$1.ReactNode;
65
71
  actions?: React$1.ReactNode[];
@@ -94,13 +100,6 @@ declare const StyledMenuList: _emotion_styled.StyledComponent<any, {}, {
94
100
  ref?: React$1.Ref<any> | undefined;
95
101
  }>;
96
102
 
97
- declare const PopoverScrollableContent: React$1.ForwardRefExoticComponent<{
98
- height?: number | "auto";
99
- width?: number;
100
- } & {
101
- children?: React$1.ReactNode | undefined;
102
- } & React$1.RefAttributes<HTMLDivElement>>;
103
-
104
103
  type Props = {
105
104
  value: string;
106
105
  onSearch: (search: string) => void;
@@ -134,4 +133,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
134
133
  };
135
134
  };
136
135
 
137
- export { EditableField, EllipsisWithTooltip, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverScrollableContent, PopoverSearch, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, useEditable };
136
+ export { EditableField, EllipsisWithTooltip, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverSearch, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, useEditable };
package/dist/index.d.ts CHANGED
@@ -58,8 +58,14 @@ interface WarningInfotipProps extends PropsWithChildren {
58
58
  }
59
59
  declare const WarningInfotip: React$1.ForwardRefExoticComponent<WarningInfotipProps & React$1.RefAttributes<unknown>>;
60
60
 
61
+ type PopoverBodyProps = PropsWithChildren<{
62
+ height?: number | 'auto';
63
+ width?: number;
64
+ }>;
65
+ declare const PopoverBody: ({ children, height, width }: PopoverBodyProps) => React$1.JSX.Element;
66
+
61
67
  type PopoverHeaderProps = {
62
- title: string;
68
+ title: React$1.ReactNode;
63
69
  onClose: () => void;
64
70
  icon?: React$1.ReactNode;
65
71
  actions?: React$1.ReactNode[];
@@ -94,13 +100,6 @@ declare const StyledMenuList: _emotion_styled.StyledComponent<any, {}, {
94
100
  ref?: React$1.Ref<any> | undefined;
95
101
  }>;
96
102
 
97
- declare const PopoverScrollableContent: React$1.ForwardRefExoticComponent<{
98
- height?: number | "auto";
99
- width?: number;
100
- } & {
101
- children?: React$1.ReactNode | undefined;
102
- } & React$1.RefAttributes<HTMLDivElement>>;
103
-
104
103
  type Props = {
105
104
  value: string;
106
105
  onSearch: (search: string) => void;
@@ -134,4 +133,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
134
133
  };
135
134
  };
136
135
 
137
- export { EditableField, EllipsisWithTooltip, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverScrollableContent, PopoverSearch, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, useEditable };
136
+ export { EditableField, EllipsisWithTooltip, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PopoverSearch, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, useEditable };
package/dist/index.js CHANGED
@@ -38,9 +38,9 @@ __export(index_exports, {
38
38
  IntroductionModal: () => IntroductionModal,
39
39
  MenuItemInfotip: () => MenuItemInfotip,
40
40
  MenuListItem: () => MenuListItem,
41
+ PopoverBody: () => PopoverBody,
41
42
  PopoverHeader: () => PopoverHeader,
42
43
  PopoverMenuList: () => PopoverMenuList,
43
- PopoverScrollableContent: () => PopoverScrollableContent,
44
44
  PopoverSearch: () => PopoverSearch,
45
45
  StyledMenuList: () => StyledMenuList,
46
46
  ThemeProvider: () => ThemeProvider,
@@ -251,7 +251,17 @@ var MenuItemInfotip = (0, import_react5.forwardRef)(
251
251
  var React7 = __toESM(require("react"));
252
252
  var import_ui7 = require("@elementor/ui");
253
253
  var InfoTipCard = ({ content, svgIcon, learnMoreButton, ctaButton }) => {
254
- return /* @__PURE__ */ React7.createElement(import_ui7.Card, { elevation: 0, sx: { width: 320 } }, /* @__PURE__ */ React7.createElement(import_ui7.CardContent, { sx: { pb: 0 } }, /* @__PURE__ */ React7.createElement(import_ui7.Box, { display: "flex", alignItems: "start" }, /* @__PURE__ */ React7.createElement(import_ui7.SvgIcon, { fontSize: "tiny", sx: { mr: 0.5 } }, svgIcon), /* @__PURE__ */ React7.createElement(import_ui7.Typography, { variant: "body2" }, content))), (ctaButton || learnMoreButton) && /* @__PURE__ */ React7.createElement(import_ui7.CardActions, null, learnMoreButton && /* @__PURE__ */ React7.createElement(import_ui7.Button, { size: "small", color: "warning", href: learnMoreButton.href, target: "_blank" }, learnMoreButton.label), ctaButton && /* @__PURE__ */ React7.createElement(import_ui7.Button, { size: "small", color: "warning", variant: "contained", onClick: ctaButton.onClick }, ctaButton.label)));
254
+ return /* @__PURE__ */ React7.createElement(import_ui7.Card, { elevation: 0, sx: { width: 320 } }, /* @__PURE__ */ React7.createElement(import_ui7.CardContent, { sx: { pb: 0 } }, /* @__PURE__ */ React7.createElement(import_ui7.Box, { display: "flex", alignItems: "start" }, /* @__PURE__ */ React7.createElement(import_ui7.SvgIcon, { fontSize: "tiny", sx: { mr: 0.5 } }, svgIcon), /* @__PURE__ */ React7.createElement(import_ui7.Typography, { variant: "body2" }, content, learnMoreButton && /* @__PURE__ */ React7.createElement(React7.Fragment, null, "\xA0", /* @__PURE__ */ React7.createElement(import_ui7.Link, { color: "info.main", href: learnMoreButton.href, target: "_blank" }, learnMoreButton.label))))), ctaButton && /* @__PURE__ */ React7.createElement(import_ui7.CardActions, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ React7.createElement(
255
+ import_ui7.Button,
256
+ {
257
+ size: "small",
258
+ color: "secondary",
259
+ variant: "contained",
260
+ onClick: ctaButton.onClick,
261
+ sx: { marginInlineStart: "1rem" }
262
+ },
263
+ ctaButton.label
264
+ )));
255
265
  };
256
266
 
257
267
  // src/components/warning-infotip.tsx
@@ -281,41 +291,47 @@ var WarningInfotip = (0, import_react6.forwardRef)(
281
291
  }
282
292
  );
283
293
 
284
- // src/components/popover/header.tsx
294
+ // src/components/popover/body.tsx
285
295
  var React9 = __toESM(require("react"));
286
- var import_editor_v1_adapters2 = require("@elementor/editor-v1-adapters");
287
296
  var import_ui9 = require("@elementor/ui");
297
+ var SECTION_PADDING_INLINE = 32;
298
+ var DEFAULT_POPOVER_HEIGHT = 348;
299
+ var FALLBACK_POPOVER_WIDTH = 220;
300
+ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width }) => {
301
+ return /* @__PURE__ */ React9.createElement(
302
+ import_ui9.Box,
303
+ {
304
+ display: "flex",
305
+ flexDirection: "column",
306
+ sx: {
307
+ height,
308
+ overflow: "hidden",
309
+ width: `${width ? width - SECTION_PADDING_INLINE : FALLBACK_POPOVER_WIDTH}px`,
310
+ maxWidth: 496
311
+ }
312
+ },
313
+ children
314
+ );
315
+ };
316
+
317
+ // src/components/popover/header.tsx
318
+ var React10 = __toESM(require("react"));
319
+ var import_ui10 = require("@elementor/ui");
288
320
  var SIZE = "tiny";
289
- var isVersion330Active = (0, import_editor_v1_adapters2.isExperimentActive)("e_v_3_30");
290
321
  var PopoverHeader = ({ title, onClose, icon, actions }) => {
291
- const paddingAndSizing = isVersion330Active ? {
322
+ const paddingAndSizing = {
292
323
  pl: 2,
293
324
  pr: 1,
294
325
  py: 1.5,
295
326
  maxHeight: 36
296
- } : {
297
- pl: 1.5,
298
- pr: 0.5,
299
- py: 1.5
300
327
  };
301
- return /* @__PURE__ */ React9.createElement(import_ui9.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React9.createElement(
302
- import_ui9.Typography,
303
- {
304
- variant: "subtitle2",
305
- sx: isVersion330Active ? {
306
- fontSize: "12px",
307
- mt: 0.25
308
- } : void 0
309
- },
310
- title
311
- ), /* @__PURE__ */ React9.createElement(import_ui9.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React9.createElement(import_ui9.CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
328
+ return /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React10.createElement(import_ui10.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React10.createElement(import_ui10.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React10.createElement(import_ui10.CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
312
329
  };
313
330
 
314
331
  // src/components/popover/menu-list.tsx
315
- var React10 = __toESM(require("react"));
332
+ var React11 = __toESM(require("react"));
316
333
  var import_react9 = require("react");
317
- var import_editor_v1_adapters3 = require("@elementor/editor-v1-adapters");
318
- var import_ui10 = require("@elementor/ui");
334
+ var import_ui11 = require("@elementor/ui");
319
335
  var import_react_virtual = require("@tanstack/react-virtual");
320
336
 
321
337
  // src/hooks/use-scroll-to-selected.ts
@@ -355,7 +371,6 @@ var useScrollTop = ({ containerRef }) => {
355
371
  };
356
372
 
357
373
  // src/components/popover/menu-list.tsx
358
- var isVersion330Active2 = (0, import_editor_v1_adapters3.isExperimentActive)("e_v_3_30");
359
374
  var ITEM_HEIGHT = 32;
360
375
  var LIST_ITEMS_BUFFER = 6;
361
376
  var MENU_LIST_PADDING_TOP = 8;
@@ -414,7 +429,7 @@ var PopoverMenuList = ({
414
429
  onChange
415
430
  });
416
431
  useScrollToSelected({ selectedValue, items, virtualizer });
417
- return /* @__PURE__ */ React10.createElement(import_ui10.Box, { ref: containerRef }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React10.createElement(
432
+ return /* @__PURE__ */ React11.createElement(import_ui11.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React11.createElement(
418
433
  MenuListComponent,
419
434
  {
420
435
  role: "listbox",
@@ -432,17 +447,17 @@ var PopoverMenuList = ({
432
447
  }
433
448
  if (item.type === "category") {
434
449
  const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
435
- return /* @__PURE__ */ React10.createElement(
436
- import_ui10.MenuSubheader,
450
+ return /* @__PURE__ */ React11.createElement(
451
+ import_ui11.MenuSubheader,
437
452
  {
438
453
  key: virtualRow.key,
439
454
  style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
440
- sx: isVersion330Active2 ? { fontWeight: "400", color: "text.tertiary" } : void 0
455
+ sx: { fontWeight: "400", color: "text.tertiary" }
441
456
  },
442
457
  item.label || item.value
443
458
  );
444
459
  }
445
- return /* @__PURE__ */ React10.createElement(
460
+ return /* @__PURE__ */ React11.createElement(
446
461
  "li",
447
462
  {
448
463
  key: virtualRow.key,
@@ -480,7 +495,7 @@ var PopoverMenuList = ({
480
495
  })
481
496
  ));
482
497
  };
483
- var StyledMenuList = (0, import_ui10.styled)(import_ui10.MenuList)(({ theme }) => ({
498
+ var StyledMenuList = (0, import_ui11.styled)(import_ui11.MenuList)(({ theme }) => ({
484
499
  "& > li": {
485
500
  height: ITEM_HEIGHT,
486
501
  width: "100%",
@@ -507,39 +522,12 @@ var StyledMenuList = (0, import_ui10.styled)(import_ui10.MenuList)(({ theme }) =
507
522
  position: "relative"
508
523
  }));
509
524
 
510
- // src/components/popover/scrollable-content.tsx
511
- var React11 = __toESM(require("react"));
512
- var import_editor_v1_adapters4 = require("@elementor/editor-v1-adapters");
513
- var import_ui11 = require("@elementor/ui");
514
- var SECTION_PADDING_INLINE = 32;
515
- var DEFAULT_POPOVER_WIDTH = 220;
516
- var isVersion330Active3 = (0, import_editor_v1_adapters4.isExperimentActive)("e_v_3_30");
517
- var PopoverScrollableContent = React11.forwardRef(
518
- ({ children, height = 260, width = DEFAULT_POPOVER_WIDTH }, ref) => {
519
- return /* @__PURE__ */ React11.createElement(
520
- import_ui11.Box,
521
- {
522
- ref,
523
- sx: {
524
- overflowY: "auto",
525
- height,
526
- width: `${isVersion330Active3 ? width - SECTION_PADDING_INLINE : DEFAULT_POPOVER_WIDTH}px`,
527
- maxWidth: 496
528
- }
529
- },
530
- children
531
- );
532
- }
533
- );
534
-
535
525
  // src/components/popover/search.tsx
536
526
  var React12 = __toESM(require("react"));
537
527
  var import_react10 = require("react");
538
- var import_editor_v1_adapters5 = require("@elementor/editor-v1-adapters");
539
528
  var import_icons2 = require("@elementor/icons");
540
529
  var import_ui12 = require("@elementor/ui");
541
530
  var import_i18n2 = require("@wordpress/i18n");
542
- var isVersion330Active4 = (0, import_editor_v1_adapters5.isExperimentActive)("e_v_3_30");
543
531
  var SIZE2 = "tiny";
544
532
  var PopoverSearch = ({ value, onSearch, placeholder }) => {
545
533
  const inputRef = (0, import_react10.useRef)(null);
@@ -550,14 +538,7 @@ var PopoverSearch = ({ value, onSearch, placeholder }) => {
550
538
  const handleInputChange = (event) => {
551
539
  onSearch(event.target.value);
552
540
  };
553
- const padding = isVersion330Active4 ? {
554
- px: 2,
555
- pb: 1.5
556
- } : {
557
- px: 1.5,
558
- pb: 1
559
- };
560
- return /* @__PURE__ */ React12.createElement(import_ui12.Box, { ...padding }, /* @__PURE__ */ React12.createElement(
541
+ return /* @__PURE__ */ React12.createElement(import_ui12.Box, { sx: { px: 2, pb: 1.5 } }, /* @__PURE__ */ React12.createElement(
561
542
  import_ui12.TextField,
562
543
  {
563
544
  autoFocus: true,
@@ -680,9 +661,9 @@ var selectAll = (el) => {
680
661
  IntroductionModal,
681
662
  MenuItemInfotip,
682
663
  MenuListItem,
664
+ PopoverBody,
683
665
  PopoverHeader,
684
666
  PopoverMenuList,
685
- PopoverScrollableContent,
686
667
  PopoverSearch,
687
668
  StyledMenuList,
688
669
  ThemeProvider,
package/dist/index.mjs CHANGED
@@ -212,9 +212,19 @@ var MenuItemInfotip = forwardRef4(
212
212
 
213
213
  // src/components/infotip-card.tsx
214
214
  import * as React7 from "react";
215
- import { Box as Box3, Button as Button2, Card, CardActions, CardContent, SvgIcon, Typography as Typography2 } from "@elementor/ui";
215
+ import { Box as Box3, Button as Button2, Card, CardActions, CardContent, Link, SvgIcon, Typography as Typography2 } from "@elementor/ui";
216
216
  var InfoTipCard = ({ content, svgIcon, learnMoreButton, ctaButton }) => {
217
- return /* @__PURE__ */ React7.createElement(Card, { elevation: 0, sx: { width: 320 } }, /* @__PURE__ */ React7.createElement(CardContent, { sx: { pb: 0 } }, /* @__PURE__ */ React7.createElement(Box3, { display: "flex", alignItems: "start" }, /* @__PURE__ */ React7.createElement(SvgIcon, { fontSize: "tiny", sx: { mr: 0.5 } }, svgIcon), /* @__PURE__ */ React7.createElement(Typography2, { variant: "body2" }, content))), (ctaButton || learnMoreButton) && /* @__PURE__ */ React7.createElement(CardActions, null, learnMoreButton && /* @__PURE__ */ React7.createElement(Button2, { size: "small", color: "warning", href: learnMoreButton.href, target: "_blank" }, learnMoreButton.label), ctaButton && /* @__PURE__ */ React7.createElement(Button2, { size: "small", color: "warning", variant: "contained", onClick: ctaButton.onClick }, ctaButton.label)));
217
+ return /* @__PURE__ */ React7.createElement(Card, { elevation: 0, sx: { width: 320 } }, /* @__PURE__ */ React7.createElement(CardContent, { sx: { pb: 0 } }, /* @__PURE__ */ React7.createElement(Box3, { display: "flex", alignItems: "start" }, /* @__PURE__ */ React7.createElement(SvgIcon, { fontSize: "tiny", sx: { mr: 0.5 } }, svgIcon), /* @__PURE__ */ React7.createElement(Typography2, { variant: "body2" }, content, learnMoreButton && /* @__PURE__ */ React7.createElement(React7.Fragment, null, "\xA0", /* @__PURE__ */ React7.createElement(Link, { color: "info.main", href: learnMoreButton.href, target: "_blank" }, learnMoreButton.label))))), ctaButton && /* @__PURE__ */ React7.createElement(CardActions, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ React7.createElement(
218
+ Button2,
219
+ {
220
+ size: "small",
221
+ color: "secondary",
222
+ variant: "contained",
223
+ onClick: ctaButton.onClick,
224
+ sx: { marginInlineStart: "1rem" }
225
+ },
226
+ ctaButton.label
227
+ )));
218
228
  };
219
229
 
220
230
  // src/components/warning-infotip.tsx
@@ -244,41 +254,47 @@ var WarningInfotip = forwardRef5(
244
254
  }
245
255
  );
246
256
 
247
- // src/components/popover/header.tsx
257
+ // src/components/popover/body.tsx
248
258
  import * as React9 from "react";
249
- import { isExperimentActive } from "@elementor/editor-v1-adapters";
259
+ import { Box as Box4 } from "@elementor/ui";
260
+ var SECTION_PADDING_INLINE = 32;
261
+ var DEFAULT_POPOVER_HEIGHT = 348;
262
+ var FALLBACK_POPOVER_WIDTH = 220;
263
+ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width }) => {
264
+ return /* @__PURE__ */ React9.createElement(
265
+ Box4,
266
+ {
267
+ display: "flex",
268
+ flexDirection: "column",
269
+ sx: {
270
+ height,
271
+ overflow: "hidden",
272
+ width: `${width ? width - SECTION_PADDING_INLINE : FALLBACK_POPOVER_WIDTH}px`,
273
+ maxWidth: 496
274
+ }
275
+ },
276
+ children
277
+ );
278
+ };
279
+
280
+ // src/components/popover/header.tsx
281
+ import * as React10 from "react";
250
282
  import { CloseButton, Stack, Typography as Typography3 } from "@elementor/ui";
251
283
  var SIZE = "tiny";
252
- var isVersion330Active = isExperimentActive("e_v_3_30");
253
284
  var PopoverHeader = ({ title, onClose, icon, actions }) => {
254
- const paddingAndSizing = isVersion330Active ? {
285
+ const paddingAndSizing = {
255
286
  pl: 2,
256
287
  pr: 1,
257
288
  py: 1.5,
258
289
  maxHeight: 36
259
- } : {
260
- pl: 1.5,
261
- pr: 0.5,
262
- py: 1.5
263
290
  };
264
- return /* @__PURE__ */ React9.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React9.createElement(
265
- Typography3,
266
- {
267
- variant: "subtitle2",
268
- sx: isVersion330Active ? {
269
- fontSize: "12px",
270
- mt: 0.25
271
- } : void 0
272
- },
273
- title
274
- ), /* @__PURE__ */ React9.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React9.createElement(CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
291
+ return /* @__PURE__ */ React10.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React10.createElement(Typography3, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React10.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React10.createElement(CloseButton, { slotProps: { icon: { fontSize: SIZE } }, sx: { ml: "auto" }, onClick: onClose })));
275
292
  };
276
293
 
277
294
  // src/components/popover/menu-list.tsx
278
- import * as React10 from "react";
295
+ import * as React11 from "react";
279
296
  import { useMemo, useRef } from "react";
280
- import { isExperimentActive as isExperimentActive2 } from "@elementor/editor-v1-adapters";
281
- import { Box as Box4, MenuList, MenuSubheader, styled as styled2 } from "@elementor/ui";
297
+ import { Box as Box5, MenuList, MenuSubheader, styled as styled2 } from "@elementor/ui";
282
298
  import { useVirtualizer } from "@tanstack/react-virtual";
283
299
 
284
300
  // src/hooks/use-scroll-to-selected.ts
@@ -318,7 +334,6 @@ var useScrollTop = ({ containerRef }) => {
318
334
  };
319
335
 
320
336
  // src/components/popover/menu-list.tsx
321
- var isVersion330Active2 = isExperimentActive2("e_v_3_30");
322
337
  var ITEM_HEIGHT = 32;
323
338
  var LIST_ITEMS_BUFFER = 6;
324
339
  var MENU_LIST_PADDING_TOP = 8;
@@ -377,7 +392,7 @@ var PopoverMenuList = ({
377
392
  onChange
378
393
  });
379
394
  useScrollToSelected({ selectedValue, items, virtualizer });
380
- return /* @__PURE__ */ React10.createElement(Box4, { ref: containerRef }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React10.createElement(
395
+ return /* @__PURE__ */ React11.createElement(Box5, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React11.createElement(
381
396
  MenuListComponent,
382
397
  {
383
398
  role: "listbox",
@@ -395,17 +410,17 @@ var PopoverMenuList = ({
395
410
  }
396
411
  if (item.type === "category") {
397
412
  const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
398
- return /* @__PURE__ */ React10.createElement(
413
+ return /* @__PURE__ */ React11.createElement(
399
414
  MenuSubheader,
400
415
  {
401
416
  key: virtualRow.key,
402
417
  style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
403
- sx: isVersion330Active2 ? { fontWeight: "400", color: "text.tertiary" } : void 0
418
+ sx: { fontWeight: "400", color: "text.tertiary" }
404
419
  },
405
420
  item.label || item.value
406
421
  );
407
422
  }
408
- return /* @__PURE__ */ React10.createElement(
423
+ return /* @__PURE__ */ React11.createElement(
409
424
  "li",
410
425
  {
411
426
  key: virtualRow.key,
@@ -470,39 +485,12 @@ var StyledMenuList = styled2(MenuList)(({ theme }) => ({
470
485
  position: "relative"
471
486
  }));
472
487
 
473
- // src/components/popover/scrollable-content.tsx
474
- import * as React11 from "react";
475
- import { isExperimentActive as isExperimentActive3 } from "@elementor/editor-v1-adapters";
476
- import { Box as Box5 } from "@elementor/ui";
477
- var SECTION_PADDING_INLINE = 32;
478
- var DEFAULT_POPOVER_WIDTH = 220;
479
- var isVersion330Active3 = isExperimentActive3("e_v_3_30");
480
- var PopoverScrollableContent = React11.forwardRef(
481
- ({ children, height = 260, width = DEFAULT_POPOVER_WIDTH }, ref) => {
482
- return /* @__PURE__ */ React11.createElement(
483
- Box5,
484
- {
485
- ref,
486
- sx: {
487
- overflowY: "auto",
488
- height,
489
- width: `${isVersion330Active3 ? width - SECTION_PADDING_INLINE : DEFAULT_POPOVER_WIDTH}px`,
490
- maxWidth: 496
491
- }
492
- },
493
- children
494
- );
495
- }
496
- );
497
-
498
488
  // src/components/popover/search.tsx
499
489
  import * as React12 from "react";
500
490
  import { useRef as useRef2 } from "react";
501
- import { isExperimentActive as isExperimentActive4 } from "@elementor/editor-v1-adapters";
502
491
  import { SearchIcon, XIcon } from "@elementor/icons";
503
492
  import { Box as Box6, IconButton, InputAdornment, TextField } from "@elementor/ui";
504
493
  import { __ as __2 } from "@wordpress/i18n";
505
- var isVersion330Active4 = isExperimentActive4("e_v_3_30");
506
494
  var SIZE2 = "tiny";
507
495
  var PopoverSearch = ({ value, onSearch, placeholder }) => {
508
496
  const inputRef = useRef2(null);
@@ -513,14 +501,7 @@ var PopoverSearch = ({ value, onSearch, placeholder }) => {
513
501
  const handleInputChange = (event) => {
514
502
  onSearch(event.target.value);
515
503
  };
516
- const padding = isVersion330Active4 ? {
517
- px: 2,
518
- pb: 1.5
519
- } : {
520
- px: 1.5,
521
- pb: 1
522
- };
523
- return /* @__PURE__ */ React12.createElement(Box6, { ...padding }, /* @__PURE__ */ React12.createElement(
504
+ return /* @__PURE__ */ React12.createElement(Box6, { sx: { px: 2, pb: 1.5 } }, /* @__PURE__ */ React12.createElement(
524
505
  TextField,
525
506
  {
526
507
  autoFocus: true,
@@ -642,9 +623,9 @@ export {
642
623
  IntroductionModal,
643
624
  MenuItemInfotip,
644
625
  MenuListItem,
626
+ PopoverBody,
645
627
  PopoverHeader,
646
628
  PopoverMenuList,
647
- PopoverScrollableContent,
648
629
  PopoverSearch,
649
630
  StyledMenuList,
650
631
  ThemeProvider,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elementor/editor-ui",
3
3
  "description": "Elementor Editor UI",
4
- "version": "0.14.0",
4
+ "version": "3.32.0-20",
5
5
  "private": false,
6
6
  "author": "Elementor Team",
7
7
  "homepage": "https://elementor.com/",
@@ -19,11 +19,11 @@
19
19
  },
20
20
  "repository": {
21
21
  "type": "git",
22
- "url": "https://github.com/elementor/elementor-packages.git",
22
+ "url": "https://github.com/elementor/elementor.git",
23
23
  "directory": "packages/libs/editor-ui"
24
24
  },
25
25
  "bugs": {
26
- "url": "https://github.com/elementor/elementor-packages/issues"
26
+ "url": "https://github.com/elementor/elementor/issues"
27
27
  },
28
28
  "publishConfig": {
29
29
  "access": "public"
@@ -37,9 +37,9 @@
37
37
  "react-dom": "^18.3.1"
38
38
  },
39
39
  "dependencies": {
40
- "@elementor/editor-v1-adapters": "0.12.1",
40
+ "@elementor/editor-v1-adapters": "3.32.0-20",
41
41
  "@elementor/icons": "1.46.0",
42
- "@elementor/ui": "1.36.0",
42
+ "@elementor/ui": "1.36.2",
43
43
  "@tanstack/react-virtual": "^3.13.3",
44
44
  "@wordpress/i18n": "^5.13.0"
45
45
  },
@@ -1,6 +1,6 @@
1
1
  import * as React from 'react';
2
2
  import { type ReactNode } from 'react';
3
- import { Box, Button, Card, CardActions, CardContent, SvgIcon, Typography } from '@elementor/ui';
3
+ import { Box, Button, Card, CardActions, CardContent, Link, SvgIcon, Typography } from '@elementor/ui';
4
4
 
5
5
  type InfoTipCardProps = {
6
6
  content: ReactNode;
@@ -23,22 +23,31 @@ export const InfoTipCard = ( { content, svgIcon, learnMoreButton, ctaButton }: I
23
23
  <SvgIcon fontSize="tiny" sx={ { mr: 0.5 } }>
24
24
  { svgIcon }
25
25
  </SvgIcon>
26
- <Typography variant="body2">{ content }</Typography>
26
+ <Typography variant="body2">
27
+ { content }
28
+ { learnMoreButton && (
29
+ <>
30
+ &nbsp;
31
+ <Link color="info.main" href={ learnMoreButton.href } target="_blank">
32
+ { learnMoreButton.label }
33
+ </Link>
34
+ </>
35
+ ) }
36
+ </Typography>
27
37
  </Box>
28
38
  </CardContent>
29
39
 
30
- { ( ctaButton || learnMoreButton ) && (
31
- <CardActions>
32
- { learnMoreButton && (
33
- <Button size="small" color="warning" href={ learnMoreButton.href } target="_blank">
34
- { learnMoreButton.label }
35
- </Button>
36
- ) }
37
- { ctaButton && (
38
- <Button size="small" color="warning" variant="contained" onClick={ ctaButton.onClick }>
39
- { ctaButton.label }
40
- </Button>
41
- ) }
40
+ { ctaButton && (
41
+ <CardActions sx={ { justifyContent: 'flex-start' } }>
42
+ <Button
43
+ size="small"
44
+ color="secondary"
45
+ variant="contained"
46
+ onClick={ ctaButton.onClick }
47
+ sx={ { marginInlineStart: '1rem' } }
48
+ >
49
+ { ctaButton.label }
50
+ </Button>
42
51
  </CardActions>
43
52
  ) }
44
53
  </Card>
@@ -0,0 +1,29 @@
1
+ import * as React from 'react';
2
+ import { type PropsWithChildren } from 'react';
3
+ import { Box } from '@elementor/ui';
4
+
5
+ const SECTION_PADDING_INLINE = 32;
6
+ const DEFAULT_POPOVER_HEIGHT = 348;
7
+ const FALLBACK_POPOVER_WIDTH = 220;
8
+
9
+ type PopoverBodyProps = PropsWithChildren< {
10
+ height?: number | 'auto';
11
+ width?: number;
12
+ } >;
13
+
14
+ export const PopoverBody = ( { children, height = DEFAULT_POPOVER_HEIGHT, width }: PopoverBodyProps ) => {
15
+ return (
16
+ <Box
17
+ display="flex"
18
+ flexDirection="column"
19
+ sx={ {
20
+ height,
21
+ overflow: 'hidden',
22
+ width: `${ width ? width - SECTION_PADDING_INLINE : FALLBACK_POPOVER_WIDTH }px`,
23
+ maxWidth: 496,
24
+ } }
25
+ >
26
+ { children }
27
+ </Box>
28
+ );
29
+ };
@@ -1,46 +1,27 @@
1
1
  import * as React from 'react';
2
- import { isExperimentActive } from '@elementor/editor-v1-adapters';
3
2
  import { CloseButton, Stack, Typography } from '@elementor/ui';
4
3
 
5
4
  const SIZE = 'tiny';
6
5
 
7
6
  type PopoverHeaderProps = {
8
- title: string;
7
+ title: React.ReactNode;
9
8
  onClose: () => void;
10
9
  icon?: React.ReactNode;
11
10
  actions?: React.ReactNode[];
12
11
  };
13
12
 
14
- const isVersion330Active = isExperimentActive( 'e_v_3_30' );
15
-
16
13
  export const PopoverHeader = ( { title, onClose, icon, actions }: PopoverHeaderProps ) => {
17
- const paddingAndSizing = isVersion330Active
18
- ? {
19
- pl: 2,
20
- pr: 1,
21
- py: 1.5,
22
- maxHeight: 36,
23
- }
24
- : {
25
- pl: 1.5,
26
- pr: 0.5,
27
- py: 1.5,
28
- };
14
+ const paddingAndSizing = {
15
+ pl: 2,
16
+ pr: 1,
17
+ py: 1.5,
18
+ maxHeight: 36,
19
+ };
29
20
 
30
21
  return (
31
22
  <Stack direction="row" alignItems="center" { ...paddingAndSizing } sx={ { columnGap: 0.5 } }>
32
23
  { icon }
33
- <Typography
34
- variant="subtitle2"
35
- sx={
36
- isVersion330Active
37
- ? {
38
- fontSize: '12px',
39
- mt: 0.25,
40
- }
41
- : undefined
42
- }
43
- >
24
+ <Typography variant="subtitle2" sx={ { fontSize: '12px', mt: 0.25 } }>
44
25
  { title }
45
26
  </Typography>
46
27
  <Stack direction="row" sx={ { ml: 'auto' } }>
@@ -1,5 +1,5 @@
1
+ export { PopoverBody } from './body';
1
2
  export { PopoverHeader } from './header';
2
3
  export { ITEM_HEIGHT, PopoverMenuList, StyledMenuList } from './menu-list';
3
4
  export type { PopoverMenuListProps, VirtualizedItem } from './menu-list';
4
- export { PopoverScrollableContent } from './scrollable-content';
5
5
  export { PopoverSearch } from './search';
@@ -1,6 +1,5 @@
1
1
  import * as React from 'react';
2
2
  import { useMemo, useRef } from 'react';
3
- import { isExperimentActive } from '@elementor/editor-v1-adapters';
4
3
  import { Box, MenuList, MenuSubheader, styled } from '@elementor/ui';
5
4
  import { useVirtualizer } from '@tanstack/react-virtual';
6
5
 
@@ -28,8 +27,6 @@ export type PopoverMenuListProps< T, V extends string > = {
28
27
  noResultsComponent?: React.ReactNode;
29
28
  };
30
29
 
31
- const isVersion330Active = isExperimentActive( 'e_v_3_30' );
32
-
33
30
  export const ITEM_HEIGHT = 32;
34
31
  const LIST_ITEMS_BUFFER = 6;
35
32
  const MENU_LIST_PADDING_TOP = 8;
@@ -110,7 +107,7 @@ export const PopoverMenuList = < T, V extends string >( {
110
107
  useScrollToSelected( { selectedValue, items, virtualizer } );
111
108
 
112
109
  return (
113
- <Box ref={ containerRef }>
110
+ <Box ref={ containerRef } sx={ { height: '100%', overflowY: 'auto' } }>
114
111
  { items.length === 0 && noResultsComponent ? (
115
112
  noResultsComponent
116
113
  ) : (
@@ -138,9 +135,7 @@ export const PopoverMenuList = < T, V extends string >( {
138
135
  <MenuSubheader
139
136
  key={ virtualRow.key }
140
137
  style={ shouldStick ? {} : menuSubHeaderAbsoluteStyling( virtualRow.start ) }
141
- sx={
142
- isVersion330Active ? { fontWeight: '400', color: 'text.tertiary' } : undefined
143
- }
138
+ sx={ { fontWeight: '400', color: 'text.tertiary' } }
144
139
  >
145
140
  { item.label || item.value }
146
141
  </MenuSubheader>
@@ -1,12 +1,9 @@
1
1
  import * as React from 'react';
2
2
  import { useRef } from 'react';
3
- import { isExperimentActive } from '@elementor/editor-v1-adapters';
4
3
  import { SearchIcon, XIcon } from '@elementor/icons';
5
4
  import { Box, IconButton, InputAdornment, TextField } from '@elementor/ui';
6
5
  import { __ } from '@wordpress/i18n';
7
6
 
8
- const isVersion330Active = isExperimentActive( 'e_v_3_30' );
9
-
10
7
  const SIZE = 'tiny';
11
8
 
12
9
  type Props = {
@@ -28,18 +25,8 @@ export const PopoverSearch = ( { value, onSearch, placeholder }: Props ) => {
28
25
  onSearch( event.target.value );
29
26
  };
30
27
 
31
- const padding = isVersion330Active
32
- ? {
33
- px: 2,
34
- pb: 1.5,
35
- }
36
- : {
37
- px: 1.5,
38
- pb: 1,
39
- };
40
-
41
28
  return (
42
- <Box { ...padding }>
29
+ <Box sx={ { px: 2, pb: 1.5 } }>
43
30
  <TextField
44
31
  // eslint-disable-next-line jsx-a11y/no-autofocus
45
32
  autoFocus
@@ -1,22 +0,0 @@
1
-
2
- > @elementor/editor-ui@0.14.0 build
3
- > tsup --config=../../tsup.build.ts
4
-
5
- CLI Building entry: src/index.ts
6
- CLI Using tsconfig: ../../../tsconfig.json
7
- CLI tsup v8.5.0
8
- CLI Using tsup config: /home/runner/work/elementor-packages/elementor-packages/tsup.build.ts
9
- CLI Target: esnext
10
- CLI Cleaning output folder
11
- ESM Build start
12
- CJS Build start
13
- CJS dist/index.js 23.49 KB
14
- CJS dist/index.js.map 40.38 KB
15
- CJS ⚡️ Build success in 112ms
16
- ESM dist/index.mjs 20.74 KB
17
- ESM dist/index.mjs.map 39.98 KB
18
- ESM ⚡️ Build success in 121ms
19
- DTS Build start
20
- DTS ⚡️ Build success in 17533ms
21
- DTS dist/index.d.mts 5.18 KB
22
- DTS dist/index.d.ts 5.18 KB
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/index.ts","../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../src/components/theme-provider.tsx","../src/hooks/use-color-scheme.ts","../src/components/menu-item.tsx","../src/components/info-alert.tsx","../src/components/infotip-card.tsx","../src/components/warning-infotip.tsx","../src/components/popover/header.tsx","../src/components/popover/menu-list.tsx","../src/hooks/use-scroll-to-selected.ts","../src/hooks/use-scroll-top.ts","../src/components/popover/scrollable-content.tsx","../src/components/popover/search.tsx","../src/hooks/use-editable.ts"],"sourcesContent":["// components\nexport { EllipsisWithTooltip } from './components/ellipsis-with-tooltip';\nexport { EditableField } from './components/editable-field';\nexport { IntroductionModal } from './components/introduction-modal';\nexport { default as ThemeProvider } from './components/theme-provider';\nexport { MenuListItem, MenuItemInfotip } from './components/menu-item';\nexport { InfoTipCard } from './components/infotip-card';\nexport { InfoAlert } from './components/info-alert';\nexport { WarningInfotip } from './components/warning-infotip';\nexport * from './components/popover';\n\n// hooks\nexport { useEditable } from './hooks/use-editable';\n","import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Tooltip } from '@elementor/ui';\n\ntype EllipsisWithTooltipProps< T extends React.ElementType > = {\n\tmaxWidth?: React.CSSProperties[ 'maxWidth' ];\n\ttitle: string;\n\tas?: T;\n} & React.ComponentProps< T >;\n\nexport const EllipsisWithTooltip = < T extends React.ElementType >( {\n\tmaxWidth,\n\ttitle,\n\tas,\n\t...props\n}: EllipsisWithTooltipProps< T > ) => {\n\tconst [ setRef, isOverflowing ] = useIsOverflowing();\n\n\tif ( isOverflowing ) {\n\t\treturn (\n\t\t\t<Tooltip title={ title } placement=\"top\">\n\t\t\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Content>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t{ title }\n\t\t</Content>\n\t);\n};\n\ntype ContentProps< T extends React.ElementType > = React.PropsWithChildren<\n\tOmit< EllipsisWithTooltipProps< T >, 'title' >\n>;\n\nconst Content = React.forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ maxWidth, as: Component = Box, ...props }: ContentProps< T >,\n\t\t// forwardRef loses the typing when using generic components.\n\t\tref: unknown\n\t) => (\n\t\t<Component\n\t\t\tref={ ref }\n\t\t\tposition=\"relative\"\n\t\t\t{ ...props }\n\t\t\tstyle={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }\n\t\t/>\n\t)\n);\n\nconst useIsOverflowing = () => {\n\tconst [ el, setEl ] = useState< HTMLElement | null >( null );\n\tconst [ isOverflowing, setIsOverflown ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst observer = new ResizeObserver( ( [ { target } ] ) => {\n\t\t\tsetIsOverflown( target.scrollWidth > target.clientWidth );\n\t\t} );\n\n\t\tif ( el ) {\n\t\t\tobserver.observe( el );\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ el ] );\n\n\treturn [ setEl, isOverflowing ] as const;\n};\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Box, styled, Tooltip } from '@elementor/ui';\n\ntype EditableFieldProps< T extends React.ElementType > = {\n\tvalue: string;\n\terror?: string;\n\tas?: T;\n} & React.ComponentPropsWithRef< T >;\n\nexport const EditableField = forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ value, error, as = 'span', sx, ...props }: EditableFieldProps< T >,\n\t\tref: unknown\n\t) => {\n\t\treturn (\n\t\t\t<Tooltip title={ error } open={ !! error } placement=\"top\">\n\t\t\t\t<StyledField ref={ ref } component={ as } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</StyledField>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n\nconst StyledField = styled( Box )`\n\twidth: 100%;\n\t&:focus {\n\t\toutline: none;\n\t}\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport {\n\tButton,\n\tCheckbox,\n\tDialog,\n\tDialogActions,\n\tDialogHeader,\n\tDialogTitle,\n\tFade,\n\ttype FadeProps,\n\tFormControlLabel,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype IntroductionModalProps = React.PropsWithChildren< {\n\topen: boolean;\n\thandleClose: ( shouldShowAgain: boolean ) => void;\n\ttitle?: string;\n} >;\n\nexport const IntroductionModal = ( { open, handleClose, title, children }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog open={ open } onClose={ handleClose } maxWidth={ 'sm' } TransitionComponent={ Transition }>\n\t\t\t{ title && (\n\t\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t\t</DialogHeader>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<DialogActions>\n\t\t\t\t<FormControlLabel\n\t\t\t\t\tsx={ { marginRight: 'auto' } }\n\t\t\t\t\tcontrol={\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tchecked={ ! shouldShowAgain }\n\t\t\t\t\t\t\tonChange={ () => setShouldShowAgain( ! shouldShowAgain ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={\n\t\t\t\t\t\t<Typography variant={ 'body2' }>{ __( \"Don't show this again\", 'elementor' ) }</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tsize={ 'medium' }\n\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\tsx={ { minWidth: '135px' } }\n\t\t\t\t\tonClick={ () => handleClose( shouldShowAgain ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Got it', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n\nconst Transition = React.forwardRef( ( props: FadeProps, ref: React.Ref< unknown > ) => (\n\t<Fade\n\t\tref={ ref }\n\t\t{ ...props }\n\t\ttimeout={ {\n\t\t\tenter: 1000,\n\t\t\texit: 200,\n\t\t} }\n\t/>\n) );\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase, type ThemeProviderProps } from '@elementor/ui';\n\nimport { useColorScheme } from '../hooks/use-color-scheme';\n\nconst EDITOR_PALLETTE: ThemeProviderProps[ 'palette' ] = 'unstable';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme } palette={ EDITOR_PALLETTE }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Infotip, MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nimport { InfoAlert } from './info-alert';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => {\n\treturn (\n\t\t<MenuItem\n\t\t\tdense\n\t\t\t{ ...props }\n\t\t\tsx={ {\n\t\t\t\t...( props.sx ?? {} ),\n\t\t\t} }\n\t\t>\n\t\t\t<MenuItemText\n\t\t\t\tprimary={ children }\n\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\tvariant: 'caption',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MenuItem>\n\t);\n};\n\ntype MenuItemInfotipProps = React.PropsWithChildren< {\n\tshowInfoTip?: boolean;\n\tchildren: React.ReactNode;\n\tcontent: string;\n} >;\n\nexport const MenuItemInfotip = forwardRef(\n\t( { showInfoTip = false, children, content }: MenuItemInfotipProps, ref: unknown ) => {\n\t\tif ( ! showInfoTip ) {\n\t\t\treturn <>{ children }</>;\n\t\t}\n\n\t\treturn (\n\t\t\t<Infotip\n\t\t\t\tref={ ref }\n\t\t\t\tplacement={ 'right' }\n\t\t\t\tarrow={ false }\n\t\t\t\tcontent={ <InfoAlert sx={ { maxWidth: 325 } }>{ content }</InfoAlert> }\n\t\t\t>\n\t\t\t\t{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */ }\n\t\t\t\t<div style={ { pointerEvents: 'initial', width: '100%' } } onClick={ ( e ) => e.stopPropagation() }>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t</Infotip>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { InfoCircleFilledIcon } from '@elementor/icons';\nimport { Alert, type AlertProps } from '@elementor/ui';\n\nexport const InfoAlert = ( props: AlertProps ) => (\n\t<Alert\n\t\ticon={ <InfoCircleFilledIcon fontSize=\"small\" color=\"secondary\" /> }\n\t\tvariant={ 'standard' }\n\t\tcolor=\"secondary\"\n\t\televation={ 0 }\n\t\tsize=\"small\"\n\t\t{ ...props }\n\t/>\n);\n","import * as React from 'react';\nimport { type ReactNode } from 'react';\nimport { Box, Button, Card, CardActions, CardContent, SvgIcon, Typography } from '@elementor/ui';\n\ntype InfoTipCardProps = {\n\tcontent: ReactNode;\n\tsvgIcon: ReactNode;\n\tlearnMoreButton?: {\n\t\tlabel: string;\n\t\thref: string;\n\t};\n\tctaButton?: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n};\n\nexport const InfoTipCard = ( { content, svgIcon, learnMoreButton, ctaButton }: InfoTipCardProps ) => {\n\treturn (\n\t\t<Card elevation={ 0 } sx={ { width: 320 } }>\n\t\t\t<CardContent sx={ { pb: 0 } }>\n\t\t\t\t<Box display=\"flex\" alignItems=\"start\">\n\t\t\t\t\t<SvgIcon fontSize=\"tiny\" sx={ { mr: 0.5 } }>\n\t\t\t\t\t\t{ svgIcon }\n\t\t\t\t\t</SvgIcon>\n\t\t\t\t\t<Typography variant=\"body2\">{ content }</Typography>\n\t\t\t\t</Box>\n\t\t\t</CardContent>\n\n\t\t\t{ ( ctaButton || learnMoreButton ) && (\n\t\t\t\t<CardActions>\n\t\t\t\t\t{ learnMoreButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" href={ learnMoreButton.href } target=\"_blank\">\n\t\t\t\t\t\t\t{ learnMoreButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ctaButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" variant=\"contained\" onClick={ ctaButton.onClick }>\n\t\t\t\t\t\t\t{ ctaButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</CardActions>\n\t\t\t) }\n\t\t</Card>\n\t);\n};\n","import { forwardRef, type PropsWithChildren } from 'react';\nimport * as React from 'react';\nimport { Alert, AlertTitle, Infotip, type InfotipProps } from '@elementor/ui';\n\ninterface WarningInfotipProps extends PropsWithChildren {\n\topen: boolean;\n\ttitle?: string;\n\ttext: string;\n\tplacement: InfotipProps[ 'placement' ];\n\twidth?: string | number;\n\toffset?: number[];\n}\n\nexport const WarningInfotip = forwardRef(\n\t( { children, open, title, text, placement, width, offset }: WarningInfotipProps, ref: unknown ) => {\n\t\treturn (\n\t\t\t<Infotip\n\t\t\t\tref={ ref }\n\t\t\t\topen={ open }\n\t\t\t\tplacement={ placement }\n\t\t\t\tPopperProps={ {\n\t\t\t\t\tsx: {\n\t\t\t\t\t\twidth: width ? width : 'initial',\n\t\t\t\t\t\t'.MuiTooltip-tooltip': { marginLeft: 0, marginRight: 0 },\n\t\t\t\t\t},\n\t\t\t\t\tmodifiers: offset ? [ { name: 'offset', options: { offset } } ] : [],\n\t\t\t\t} }\n\t\t\t\tarrow={ false }\n\t\t\t\tcontent={\n\t\t\t\t\t<Alert color=\"error\" severity=\"warning\" variant=\"standard\" size=\"small\">\n\t\t\t\t\t\t{ title ? <AlertTitle>{ title }</AlertTitle> : null }\n\t\t\t\t\t\t{ text }\n\t\t\t\t\t</Alert>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Infotip>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { CloseButton, Stack, Typography } from '@elementor/ui';\n\nconst SIZE = 'tiny';\n\ntype PopoverHeaderProps = {\n\ttitle: string;\n\tonClose: () => void;\n\ticon?: React.ReactNode;\n\tactions?: React.ReactNode[];\n};\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nexport const PopoverHeader = ( { title, onClose, icon, actions }: PopoverHeaderProps ) => {\n\tconst paddingAndSizing = isVersion330Active\n\t\t? {\n\t\t\t\tpl: 2,\n\t\t\t\tpr: 1,\n\t\t\t\tpy: 1.5,\n\t\t\t\tmaxHeight: 36,\n\t\t }\n\t\t: {\n\t\t\t\tpl: 1.5,\n\t\t\t\tpr: 0.5,\n\t\t\t\tpy: 1.5,\n\t\t };\n\n\treturn (\n\t\t<Stack direction=\"row\" alignItems=\"center\" { ...paddingAndSizing } sx={ { columnGap: 0.5 } }>\n\t\t\t{ icon }\n\t\t\t<Typography\n\t\t\t\tvariant=\"subtitle2\"\n\t\t\t\tsx={\n\t\t\t\t\tisVersion330Active\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\t\tmt: 0.25,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ title }\n\t\t\t</Typography>\n\t\t\t<Stack direction=\"row\" sx={ { ml: 'auto' } }>\n\t\t\t\t{ actions }\n\t\t\t\t<CloseButton slotProps={ { icon: { fontSize: SIZE } } } sx={ { ml: 'auto' } } onClick={ onClose } />\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { useMemo, useRef } from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { Box, MenuList, MenuSubheader, styled } from '@elementor/ui';\nimport { useVirtualizer } from '@tanstack/react-virtual';\n\nimport { useScrollTop, useScrollToSelected } from '../../hooks';\n\nexport type VirtualizedItem< T, V extends string > = {\n\ttype: T;\n\tvalue: V;\n\tlabel?: string;\n\ticon?: React.ReactNode;\n\tsecondaryText?: string;\n\t[ key: string ]: unknown;\n};\n\nexport type PopoverMenuListProps< T, V extends string > = {\n\titems: VirtualizedItem< T, V >[];\n\tonSelect: ( value: V ) => void;\n\tonClose: () => void;\n\tselectedValue?: V;\n\titemStyle?: ( item: VirtualizedItem< T, V > ) => React.CSSProperties;\n\t'data-testid'?: string;\n\tonChange?: ( params: { getVirtualIndexes: () => number[] } ) => void;\n\tmenuListTemplate?: React.ComponentType< React.ComponentProps< typeof MenuList > >;\n\tmenuItemContentTemplate?: ( item: VirtualizedItem< T, V > ) => React.ReactNode;\n\tnoResultsComponent?: React.ReactNode;\n};\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nexport const ITEM_HEIGHT = 32;\nconst LIST_ITEMS_BUFFER = 6;\nconst MENU_LIST_PADDING_TOP = 8;\n\nconst menuSubHeaderAbsoluteStyling = ( start: number ) => ( {\n\tposition: 'absolute',\n\ttransform: `translateY(${ start + MENU_LIST_PADDING_TOP }px)`,\n} );\n\nconst getAdjacentStickyIndices = (\n\tstickyIndices: number[],\n\trange: { startIndex: number; endIndex: number }\n): number[] => {\n\tconst previousTwoStickyIndices = stickyIndices\n\t\t.filter( ( stickyIndex ) => stickyIndex < range.startIndex )\n\t\t.slice( -2 );\n\n\tconst nextTwoStickyIndices = stickyIndices.filter( ( stickyIndex ) => stickyIndex > range.endIndex ).slice( 0, 2 );\n\n\treturn [ ...previousTwoStickyIndices, ...nextTwoStickyIndices ];\n};\n\nexport const PopoverMenuList = < T, V extends string >( {\n\titems,\n\tonSelect,\n\tonClose,\n\tselectedValue,\n\titemStyle,\n\tonChange,\n\t'data-testid': dataTestId,\n\tmenuItemContentTemplate,\n\tnoResultsComponent,\n\tmenuListTemplate: CustomMenuList,\n}: PopoverMenuListProps< T, V > ) => {\n\tconst containerRef = useRef< HTMLDivElement >( null );\n\tconst scrollTop = useScrollTop( { containerRef } );\n\n\tconst MenuListComponent = CustomMenuList || StyledMenuList;\n\n\tconst stickyIndices = useMemo(\n\t\t() =>\n\t\t\titems.reduce( ( categoryIndices, item, index ) => {\n\t\t\t\tif ( item.type === 'category' ) {\n\t\t\t\t\tcategoryIndices.push( index );\n\t\t\t\t}\n\t\t\t\treturn categoryIndices;\n\t\t\t}, [] as number[] ),\n\t\t[ items ]\n\t);\n\n\tconst getActiveItemIndices = ( range: { startIndex: number; endIndex: number } ) => {\n\t\tconst visibleAndStickyIndexes: number[] = [];\n\n\t\tfor ( let i = range.startIndex; i <= range.endIndex; i++ ) {\n\t\t\tvisibleAndStickyIndexes.push( i );\n\t\t}\n\n\t\tconst stickyIndicesToShow = getAdjacentStickyIndices( stickyIndices, range );\n\n\t\tstickyIndicesToShow.forEach( ( stickyIndex ) => {\n\t\t\tif ( ! visibleAndStickyIndexes.includes( stickyIndex ) ) {\n\t\t\t\tvisibleAndStickyIndexes.push( stickyIndex );\n\t\t\t}\n\t\t} );\n\n\t\treturn visibleAndStickyIndexes.sort( ( a, b ) => a - b );\n\t};\n\n\tconst virtualizer = useVirtualizer( {\n\t\tcount: items.length,\n\t\tgetScrollElement: () => containerRef.current,\n\t\testimateSize: () => ITEM_HEIGHT,\n\t\toverscan: LIST_ITEMS_BUFFER,\n\t\trangeExtractor: getActiveItemIndices,\n\t\tonChange,\n\t} );\n\n\tuseScrollToSelected( { selectedValue, items, virtualizer } );\n\n\treturn (\n\t\t<Box ref={ containerRef }>\n\t\t\t{ items.length === 0 && noResultsComponent ? (\n\t\t\t\tnoResultsComponent\n\t\t\t) : (\n\t\t\t\t<MenuListComponent\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tstyle={ { height: `${ virtualizer.getTotalSize() }px` } }\n\t\t\t\t\tdata-testid={ dataTestId }\n\t\t\t\t>\n\t\t\t\t\t{ virtualizer.getVirtualItems().map( ( virtualRow ) => {\n\t\t\t\t\t\tconst item = items[ virtualRow.index ];\n\t\t\t\t\t\tconst isLast = virtualRow.index === items.length - 1;\n\t\t\t\t\t\tconst isFirst =\n\t\t\t\t\t\t\titems[ 0 ]?.type === 'category' ? virtualRow.index === 1 : virtualRow.index === 0;\n\t\t\t\t\t\tconst isSelected = selectedValue === item.value;\n\t\t\t\t\t\tconst tabIndexFallback = ! selectedValue ? 0 : -1;\n\n\t\t\t\t\t\tif ( ! item ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif ( item.type === 'category' ) {\n\t\t\t\t\t\t\tconst shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<MenuSubheader\n\t\t\t\t\t\t\t\t\tkey={ virtualRow.key }\n\t\t\t\t\t\t\t\t\tstyle={ shouldStick ? {} : menuSubHeaderAbsoluteStyling( virtualRow.start ) }\n\t\t\t\t\t\t\t\t\tsx={\n\t\t\t\t\t\t\t\t\t\tisVersion330Active ? { fontWeight: '400', color: 'text.tertiary' } : undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.label || item.value }\n\t\t\t\t\t\t\t\t</MenuSubheader>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\tkey={ virtualRow.key }\n\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\taria-selected={ isSelected }\n\t\t\t\t\t\t\t\tonClick={ ( e ) => {\n\t\t\t\t\t\t\t\t\tif ( ( e.target as HTMLElement ).closest( 'button' ) ) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonSelect( item.value );\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\tif ( event.key === 'Enter' ) {\n\t\t\t\t\t\t\t\t\t\tonSelect( item.value );\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowDown' && isLast ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowUp' && isFirst ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttabIndex={ isSelected ? 0 : tabIndexFallback }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\ttransform: `translateY(${ virtualRow.start + MENU_LIST_PADDING_TOP }px)`,\n\t\t\t\t\t\t\t\t\t...( itemStyle ? itemStyle( item ) : {} ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ menuItemContentTemplate ? menuItemContentTemplate( item ) : item.label || item.value }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</MenuListComponent>\n\t\t\t) }\n\t\t</Box>\n\t);\n};\n\nexport const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {\n\t'& > li': {\n\t\theight: ITEM_HEIGHT,\n\t\twidth: '100%',\n\t\tdisplay: 'flex',\n\t\talignItems: 'center',\n\t},\n\t'& > [role=\"option\"]': {\n\t\t...theme.typography.caption,\n\t\tlineHeight: 'inherit',\n\t\tpadding: theme.spacing( 0.75, 2, 0.75, 4 ),\n\t\t'&:hover, &:focus': {\n\t\t\tbackgroundColor: theme.palette.action.hover,\n\t\t},\n\t\t'&[aria-selected=\"true\"]': {\n\t\t\tbackgroundColor: theme.palette.action.selected,\n\t\t},\n\t\tcursor: 'pointer',\n\t\ttextOverflow: 'ellipsis',\n\t\tposition: 'absolute',\n\t\ttop: 0,\n\t\tleft: 0,\n\t},\n\twidth: '100%',\n\tposition: 'relative',\n} ) );\n","import { useEffect } from 'react';\nimport type { Virtualizer } from '@tanstack/react-virtual';\n\nimport type { VirtualizedItem } from '../components/popover/menu-list';\n\ntype UseScrollToSelectedProps< T, V extends string > = {\n\tselectedValue?: V;\n\titems: VirtualizedItem< T, V >[];\n\tvirtualizer: Virtualizer< HTMLDivElement, Element >;\n};\n\nexport const useScrollToSelected = < T, V extends string >( {\n\tselectedValue,\n\titems,\n\tvirtualizer,\n}: UseScrollToSelectedProps< T, V > ) => {\n\tuseEffect( () => {\n\t\tif ( ! selectedValue || items.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst selectedIndex = items.findIndex( ( item ) => item.value === selectedValue );\n\n\t\tif ( selectedIndex !== -1 ) {\n\t\t\tvirtualizer.scrollToIndex( selectedIndex, { align: 'center' } );\n\t\t}\n\t}, [ selectedValue, items, virtualizer ] );\n};\n","import { useEffect, useState } from 'react';\n\ntype UseScrollTopProps = {\n\tcontainerRef: React.RefObject< HTMLDivElement >;\n};\n\nexport const useScrollTop = ( { containerRef }: UseScrollTopProps ) => {\n\tconst [ scrollTop, setScrollTop ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tconst container = containerRef.current;\n\n\t\tif ( ! container ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleScroll = () => {\n\t\t\tsetScrollTop( container.scrollTop );\n\t\t};\n\n\t\tcontainer.addEventListener( 'scroll', handleScroll );\n\t\treturn () => container.removeEventListener( 'scroll', handleScroll );\n\t}, [ containerRef ] );\n\n\treturn scrollTop;\n};\n","import * as React from 'react';\nimport { type PropsWithChildren } from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { Box } from '@elementor/ui';\n\nconst SECTION_PADDING_INLINE = 32;\nconst DEFAULT_POPOVER_WIDTH = 220;\n\ntype PopoverScrollableContentProps = PropsWithChildren< {\n\theight?: number | 'auto';\n\twidth?: number;\n} >;\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nexport const PopoverScrollableContent = React.forwardRef< HTMLDivElement, PopoverScrollableContentProps >(\n\t( { children, height = 260, width = DEFAULT_POPOVER_WIDTH }, ref ) => {\n\t\treturn (\n\t\t\t<Box\n\t\t\t\tref={ ref }\n\t\t\t\tsx={ {\n\t\t\t\t\toverflowY: 'auto',\n\t\t\t\t\theight,\n\t\t\t\t\twidth: `${ isVersion330Active ? width - SECTION_PADDING_INLINE : DEFAULT_POPOVER_WIDTH }px`,\n\t\t\t\t\tmaxWidth: 496,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Box>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { useRef } from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { SearchIcon, XIcon } from '@elementor/icons';\nimport { Box, IconButton, InputAdornment, TextField } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nconst SIZE = 'tiny';\n\ntype Props = {\n\tvalue: string;\n\tonSearch: ( search: string ) => void;\n\tplaceholder: string;\n};\n\nexport const PopoverSearch = ( { value, onSearch, placeholder }: Props ) => {\n\tconst inputRef = useRef< HTMLInputElement | null >( null );\n\n\tconst handleClear = () => {\n\t\tonSearch( '' );\n\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst handleInputChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tonSearch( event.target.value );\n\t};\n\n\tconst padding = isVersion330Active\n\t\t? {\n\t\t\t\tpx: 2,\n\t\t\t\tpb: 1.5,\n\t\t }\n\t\t: {\n\t\t\t\tpx: 1.5,\n\t\t\t\tpb: 1,\n\t\t };\n\n\treturn (\n\t\t<Box { ...padding }>\n\t\t\t<TextField\n\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\tautoFocus\n\t\t\t\tfullWidth\n\t\t\t\tsize={ SIZE }\n\t\t\t\tvalue={ value }\n\t\t\t\tinputRef={ inputRef }\n\t\t\t\tonChange={ handleInputChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tInputProps={ {\n\t\t\t\t\tstartAdornment: (\n\t\t\t\t\t\t<InputAdornment position=\"start\">\n\t\t\t\t\t\t\t<SearchIcon fontSize={ SIZE } />\n\t\t\t\t\t\t</InputAdornment>\n\t\t\t\t\t),\n\t\t\t\t\tendAdornment: value && (\n\t\t\t\t\t\t<IconButton size={ SIZE } onClick={ handleClear } aria-label={ __( 'Clear', 'elementor' ) }>\n\t\t\t\t\t\t\t<XIcon color=\"action\" fontSize={ SIZE } />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t),\n\t\t\t\t} }\n\t\t\t/>\n\t\t</Box>\n\t);\n};\n","import { useEffect, useRef, useState } from 'react';\n\ntype UseEditableParams = {\n\tvalue: string;\n\tonSubmit: ( value: string ) => unknown;\n\tvalidation?: ( value: string ) => string | null;\n\tonClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;\n\tonError?: ( error: string | null ) => void;\n};\n\nexport const useEditable = ( { value, onSubmit, validation, onClick, onError }: UseEditableParams ) => {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ error, setError ] = useState< string | null >( null );\n\n\tconst ref = useSelection( isEditing );\n\n\tconst isDirty = ( newValue: string ) => newValue !== value;\n\n\tconst openEditMode = () => {\n\t\tsetIsEditing( true );\n\t};\n\n\tconst closeEditMode = () => {\n\t\tref.current?.blur();\n\n\t\tsetError( null );\n\t\tonError?.( null );\n\t\tsetIsEditing( false );\n\t};\n\n\tconst submit = ( newValue: string ) => {\n\t\tif ( ! isDirty( newValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! error ) {\n\t\t\ttry {\n\t\t\t\tonSubmit( newValue );\n\t\t\t} finally {\n\t\t\t\tcloseEditMode();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {\n\t\tconst { innerText: newValue } = event.target;\n\n\t\tif ( validation ) {\n\t\t\tconst updatedError = isDirty( newValue ) ? validation( newValue ) : null;\n\n\t\t\tsetError( updatedError );\n\t\t\tonError?.( updatedError );\n\t\t}\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tevent.stopPropagation();\n\n\t\tif ( [ 'Escape' ].includes( event.key ) ) {\n\t\t\treturn closeEditMode();\n\t\t}\n\n\t\tif ( [ 'Enter' ].includes( event.key ) ) {\n\t\t\tevent.preventDefault();\n\t\t\treturn submit( ( event.target as HTMLElement ).innerText );\n\t\t}\n\t};\n\n\tconst handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {\n\t\tif ( isEditing ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tonClick?.( event );\n\t};\n\n\tconst listeners = {\n\t\tonClick: handleClick,\n\t\tonKeyDown: handleKeyDown,\n\t\tonInput: onChange,\n\t\tonBlur: closeEditMode,\n\t} as const;\n\n\tconst attributes = {\n\t\tvalue,\n\t\trole: 'textbox',\n\t\tcontentEditable: isEditing,\n\t\t...( isEditing && {\n\t\t\tsuppressContentEditableWarning: true,\n\t\t} ),\n\t} as const;\n\n\treturn {\n\t\tref,\n\t\tisEditing,\n\t\topenEditMode,\n\t\tcloseEditMode,\n\t\tvalue,\n\t\terror,\n\t\tgetProps: () => ( { ...listeners, ...attributes } ),\n\t} as const;\n};\n\nconst useSelection = ( isEditing: boolean ) => {\n\tconst ref = useRef< HTMLElement | null >( null );\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tselectAll( ref.current );\n\t\t}\n\t}, [ isEditing ] );\n\n\treturn ref;\n};\n\nconst selectAll = ( el: HTMLElement | null ) => {\n\tconst selection = getSelection();\n\n\tif ( ! selection || ! el ) {\n\t\treturn;\n\t}\n\n\tconst range = document.createRange();\n\trange.selectNodeContents( el );\n\n\tselection.removeAllRanges();\n\tselection.addRange( range );\n};\n"],"mappings":"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","names":["React","import_react","import_ui","React","import_react","import_ui","React","import_ui","import_react","listenTo","ThemeProviderBase","React","import_react","import_ui","React","import_ui","React","import_ui","import_react","React","import_ui","React","import_editor_v1_adapters","import_ui","React","import_react","import_editor_v1_adapters","import_ui","import_react","import_react","isVersion330Active","React","import_editor_v1_adapters","import_ui","isVersion330Active","React","import_react","import_editor_v1_adapters","import_icons","import_ui","import_i18n","isVersion330Active","SIZE","import_react"]}
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/ellipsis-with-tooltip.tsx","../src/components/editable-field.tsx","../src/components/introduction-modal.tsx","../src/components/theme-provider.tsx","../src/hooks/use-color-scheme.ts","../src/components/menu-item.tsx","../src/components/info-alert.tsx","../src/components/infotip-card.tsx","../src/components/warning-infotip.tsx","../src/components/popover/header.tsx","../src/components/popover/menu-list.tsx","../src/hooks/use-scroll-to-selected.ts","../src/hooks/use-scroll-top.ts","../src/components/popover/scrollable-content.tsx","../src/components/popover/search.tsx","../src/hooks/use-editable.ts"],"sourcesContent":["import * as React from 'react';\nimport { useEffect, useState } from 'react';\nimport { Box, Tooltip } from '@elementor/ui';\n\ntype EllipsisWithTooltipProps< T extends React.ElementType > = {\n\tmaxWidth?: React.CSSProperties[ 'maxWidth' ];\n\ttitle: string;\n\tas?: T;\n} & React.ComponentProps< T >;\n\nexport const EllipsisWithTooltip = < T extends React.ElementType >( {\n\tmaxWidth,\n\ttitle,\n\tas,\n\t...props\n}: EllipsisWithTooltipProps< T > ) => {\n\tconst [ setRef, isOverflowing ] = useIsOverflowing();\n\n\tif ( isOverflowing ) {\n\t\treturn (\n\t\t\t<Tooltip title={ title } placement=\"top\">\n\t\t\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t\t\t{ title }\n\t\t\t\t</Content>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Content maxWidth={ maxWidth } ref={ setRef } as={ as } { ...props }>\n\t\t\t{ title }\n\t\t</Content>\n\t);\n};\n\ntype ContentProps< T extends React.ElementType > = React.PropsWithChildren<\n\tOmit< EllipsisWithTooltipProps< T >, 'title' >\n>;\n\nconst Content = React.forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ maxWidth, as: Component = Box, ...props }: ContentProps< T >,\n\t\t// forwardRef loses the typing when using generic components.\n\t\tref: unknown\n\t) => (\n\t\t<Component\n\t\t\tref={ ref }\n\t\t\tposition=\"relative\"\n\t\t\t{ ...props }\n\t\t\tstyle={ { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', maxWidth } }\n\t\t/>\n\t)\n);\n\nconst useIsOverflowing = () => {\n\tconst [ el, setEl ] = useState< HTMLElement | null >( null );\n\tconst [ isOverflowing, setIsOverflown ] = useState( false );\n\n\tuseEffect( () => {\n\t\tconst observer = new ResizeObserver( ( [ { target } ] ) => {\n\t\t\tsetIsOverflown( target.scrollWidth > target.clientWidth );\n\t\t} );\n\n\t\tif ( el ) {\n\t\t\tobserver.observe( el );\n\t\t}\n\n\t\treturn () => {\n\t\t\tobserver.disconnect();\n\t\t};\n\t}, [ el ] );\n\n\treturn [ setEl, isOverflowing ] as const;\n};\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Box, styled, Tooltip } from '@elementor/ui';\n\ntype EditableFieldProps< T extends React.ElementType > = {\n\tvalue: string;\n\terror?: string;\n\tas?: T;\n} & React.ComponentPropsWithRef< T >;\n\nexport const EditableField = forwardRef(\n\t< T extends React.ElementType >(\n\t\t{ value, error, as = 'span', sx, ...props }: EditableFieldProps< T >,\n\t\tref: unknown\n\t) => {\n\t\treturn (\n\t\t\t<Tooltip title={ error } open={ !! error } placement=\"top\">\n\t\t\t\t<StyledField ref={ ref } component={ as } { ...props }>\n\t\t\t\t\t{ value }\n\t\t\t\t</StyledField>\n\t\t\t</Tooltip>\n\t\t);\n\t}\n);\n\nconst StyledField = styled( Box )`\n\twidth: 100%;\n\t&:focus {\n\t\toutline: none;\n\t}\n`;\n","import * as React from 'react';\nimport { useState } from 'react';\nimport {\n\tButton,\n\tCheckbox,\n\tDialog,\n\tDialogActions,\n\tDialogHeader,\n\tDialogTitle,\n\tFade,\n\ttype FadeProps,\n\tFormControlLabel,\n\tTypography,\n} from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\ntype IntroductionModalProps = React.PropsWithChildren< {\n\topen: boolean;\n\thandleClose: ( shouldShowAgain: boolean ) => void;\n\ttitle?: string;\n} >;\n\nexport const IntroductionModal = ( { open, handleClose, title, children }: IntroductionModalProps ) => {\n\tconst [ shouldShowAgain, setShouldShowAgain ] = useState( true );\n\n\treturn (\n\t\t<Dialog open={ open } onClose={ handleClose } maxWidth={ 'sm' } TransitionComponent={ Transition }>\n\t\t\t{ title && (\n\t\t\t\t<DialogHeader logo={ false }>\n\t\t\t\t\t<DialogTitle>{ title }</DialogTitle>\n\t\t\t\t</DialogHeader>\n\t\t\t) }\n\t\t\t{ children }\n\t\t\t<DialogActions>\n\t\t\t\t<FormControlLabel\n\t\t\t\t\tsx={ { marginRight: 'auto' } }\n\t\t\t\t\tcontrol={\n\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\tchecked={ ! shouldShowAgain }\n\t\t\t\t\t\t\tonChange={ () => setShouldShowAgain( ! shouldShowAgain ) }\n\t\t\t\t\t\t/>\n\t\t\t\t\t}\n\t\t\t\t\tlabel={\n\t\t\t\t\t\t<Typography variant={ 'body2' }>{ __( \"Don't show this again\", 'elementor' ) }</Typography>\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t\t<Button\n\t\t\t\t\tsize={ 'medium' }\n\t\t\t\t\tvariant=\"contained\"\n\t\t\t\t\tsx={ { minWidth: '135px' } }\n\t\t\t\t\tonClick={ () => handleClose( shouldShowAgain ) }\n\t\t\t\t>\n\t\t\t\t\t{ __( 'Got it', 'elementor' ) }\n\t\t\t\t</Button>\n\t\t\t</DialogActions>\n\t\t</Dialog>\n\t);\n};\n\nconst Transition = React.forwardRef( ( props: FadeProps, ref: React.Ref< unknown > ) => (\n\t<Fade\n\t\tref={ ref }\n\t\t{ ...props }\n\t\ttimeout={ {\n\t\t\tenter: 1000,\n\t\t\texit: 200,\n\t\t} }\n\t/>\n) );\n","import * as React from 'react';\nimport { ThemeProvider as ThemeProviderBase, type ThemeProviderProps } from '@elementor/ui';\n\nimport { useColorScheme } from '../hooks/use-color-scheme';\n\nconst EDITOR_PALLETTE: ThemeProviderProps[ 'palette' ] = 'unstable';\n\nexport default function ThemeProvider( { children }: { children: React.ReactNode } ) {\n\tconst colorScheme = useColorScheme();\n\n\treturn (\n\t\t<ThemeProviderBase colorScheme={ colorScheme } palette={ EDITOR_PALLETTE }>\n\t\t\t{ children }\n\t\t</ThemeProviderBase>\n\t);\n}\n","import { useEffect, useState } from 'react';\nimport {\n\t__privateListenTo as listenTo,\n\tcommandEndEvent,\n\ttype CommandEvent,\n\tv1ReadyEvent,\n} from '@elementor/editor-v1-adapters';\n\nexport type ColorScheme = 'auto' | 'dark' | 'light';\n\nexport type ExtendedWindow = Window & {\n\telementor: {\n\t\tgetPreferences: ( key: 'ui_theme' ) => ColorScheme;\n\t};\n};\n\nexport function useColorScheme() {\n\tconst [ colorScheme, setColorScheme ] = useState< ColorScheme >( () => getV1ColorScheme() );\n\n\tuseEffect( () => {\n\t\treturn listenTo( v1ReadyEvent(), () => setColorScheme( getV1ColorScheme() ) );\n\t}, [] );\n\n\tuseEffect( () => {\n\t\treturn listenTo( commandEndEvent( 'document/elements/settings' ), ( e ) => {\n\t\t\tconst event = e as CommandEvent< {\n\t\t\t\tsettings: {\n\t\t\t\t\tui_theme?: ColorScheme;\n\t\t\t\t};\n\t\t\t} >;\n\n\t\t\t// The User-Preferences settings object has a key named `ui_theme` that controls the color scheme.\n\t\t\tconst isColorScheme = event.args?.settings && 'ui_theme' in event.args.settings;\n\n\t\t\tif ( isColorScheme ) {\n\t\t\t\tsetColorScheme( getV1ColorScheme() );\n\t\t\t}\n\t\t} );\n\t}, [] );\n\n\treturn colorScheme;\n}\n\nfunction getV1ColorScheme() {\n\treturn ( window as unknown as ExtendedWindow ).elementor?.getPreferences?.( 'ui_theme' ) || 'auto';\n}\n","import * as React from 'react';\nimport { forwardRef } from 'react';\nimport { Infotip, MenuItem, type MenuItemProps, MenuItemText } from '@elementor/ui';\n\nimport { InfoAlert } from './info-alert';\n\nexport const MenuListItem = ( { children, ...props }: MenuItemProps ) => {\n\treturn (\n\t\t<MenuItem\n\t\t\tdense\n\t\t\t{ ...props }\n\t\t\tsx={ {\n\t\t\t\t...( props.sx ?? {} ),\n\t\t\t} }\n\t\t>\n\t\t\t<MenuItemText\n\t\t\t\tprimary={ children }\n\t\t\t\tprimaryTypographyProps={ {\n\t\t\t\t\tvariant: 'caption',\n\t\t\t\t} }\n\t\t\t/>\n\t\t</MenuItem>\n\t);\n};\n\ntype MenuItemInfotipProps = React.PropsWithChildren< {\n\tshowInfoTip?: boolean;\n\tchildren: React.ReactNode;\n\tcontent: string;\n} >;\n\nexport const MenuItemInfotip = forwardRef(\n\t( { showInfoTip = false, children, content }: MenuItemInfotipProps, ref: unknown ) => {\n\t\tif ( ! showInfoTip ) {\n\t\t\treturn <>{ children }</>;\n\t\t}\n\n\t\treturn (\n\t\t\t<Infotip\n\t\t\t\tref={ ref }\n\t\t\t\tplacement={ 'right' }\n\t\t\t\tarrow={ false }\n\t\t\t\tcontent={ <InfoAlert sx={ { maxWidth: 325 } }>{ content }</InfoAlert> }\n\t\t\t>\n\t\t\t\t{ /* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */ }\n\t\t\t\t<div style={ { pointerEvents: 'initial', width: '100%' } } onClick={ ( e ) => e.stopPropagation() }>\n\t\t\t\t\t{ children }\n\t\t\t\t</div>\n\t\t\t</Infotip>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { InfoCircleFilledIcon } from '@elementor/icons';\nimport { Alert, type AlertProps } from '@elementor/ui';\n\nexport const InfoAlert = ( props: AlertProps ) => (\n\t<Alert\n\t\ticon={ <InfoCircleFilledIcon fontSize=\"small\" color=\"secondary\" /> }\n\t\tvariant={ 'standard' }\n\t\tcolor=\"secondary\"\n\t\televation={ 0 }\n\t\tsize=\"small\"\n\t\t{ ...props }\n\t/>\n);\n","import * as React from 'react';\nimport { type ReactNode } from 'react';\nimport { Box, Button, Card, CardActions, CardContent, SvgIcon, Typography } from '@elementor/ui';\n\ntype InfoTipCardProps = {\n\tcontent: ReactNode;\n\tsvgIcon: ReactNode;\n\tlearnMoreButton?: {\n\t\tlabel: string;\n\t\thref: string;\n\t};\n\tctaButton?: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n};\n\nexport const InfoTipCard = ( { content, svgIcon, learnMoreButton, ctaButton }: InfoTipCardProps ) => {\n\treturn (\n\t\t<Card elevation={ 0 } sx={ { width: 320 } }>\n\t\t\t<CardContent sx={ { pb: 0 } }>\n\t\t\t\t<Box display=\"flex\" alignItems=\"start\">\n\t\t\t\t\t<SvgIcon fontSize=\"tiny\" sx={ { mr: 0.5 } }>\n\t\t\t\t\t\t{ svgIcon }\n\t\t\t\t\t</SvgIcon>\n\t\t\t\t\t<Typography variant=\"body2\">{ content }</Typography>\n\t\t\t\t</Box>\n\t\t\t</CardContent>\n\n\t\t\t{ ( ctaButton || learnMoreButton ) && (\n\t\t\t\t<CardActions>\n\t\t\t\t\t{ learnMoreButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" href={ learnMoreButton.href } target=\"_blank\">\n\t\t\t\t\t\t\t{ learnMoreButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t\t{ ctaButton && (\n\t\t\t\t\t\t<Button size=\"small\" color=\"warning\" variant=\"contained\" onClick={ ctaButton.onClick }>\n\t\t\t\t\t\t\t{ ctaButton.label }\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t) }\n\t\t\t\t</CardActions>\n\t\t\t) }\n\t\t</Card>\n\t);\n};\n","import { forwardRef, type PropsWithChildren } from 'react';\nimport * as React from 'react';\nimport { Alert, AlertTitle, Infotip, type InfotipProps } from '@elementor/ui';\n\ninterface WarningInfotipProps extends PropsWithChildren {\n\topen: boolean;\n\ttitle?: string;\n\ttext: string;\n\tplacement: InfotipProps[ 'placement' ];\n\twidth?: string | number;\n\toffset?: number[];\n}\n\nexport const WarningInfotip = forwardRef(\n\t( { children, open, title, text, placement, width, offset }: WarningInfotipProps, ref: unknown ) => {\n\t\treturn (\n\t\t\t<Infotip\n\t\t\t\tref={ ref }\n\t\t\t\topen={ open }\n\t\t\t\tplacement={ placement }\n\t\t\t\tPopperProps={ {\n\t\t\t\t\tsx: {\n\t\t\t\t\t\twidth: width ? width : 'initial',\n\t\t\t\t\t\t'.MuiTooltip-tooltip': { marginLeft: 0, marginRight: 0 },\n\t\t\t\t\t},\n\t\t\t\t\tmodifiers: offset ? [ { name: 'offset', options: { offset } } ] : [],\n\t\t\t\t} }\n\t\t\t\tarrow={ false }\n\t\t\t\tcontent={\n\t\t\t\t\t<Alert color=\"error\" severity=\"warning\" variant=\"standard\" size=\"small\">\n\t\t\t\t\t\t{ title ? <AlertTitle>{ title }</AlertTitle> : null }\n\t\t\t\t\t\t{ text }\n\t\t\t\t\t</Alert>\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Infotip>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { CloseButton, Stack, Typography } from '@elementor/ui';\n\nconst SIZE = 'tiny';\n\ntype PopoverHeaderProps = {\n\ttitle: string;\n\tonClose: () => void;\n\ticon?: React.ReactNode;\n\tactions?: React.ReactNode[];\n};\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nexport const PopoverHeader = ( { title, onClose, icon, actions }: PopoverHeaderProps ) => {\n\tconst paddingAndSizing = isVersion330Active\n\t\t? {\n\t\t\t\tpl: 2,\n\t\t\t\tpr: 1,\n\t\t\t\tpy: 1.5,\n\t\t\t\tmaxHeight: 36,\n\t\t }\n\t\t: {\n\t\t\t\tpl: 1.5,\n\t\t\t\tpr: 0.5,\n\t\t\t\tpy: 1.5,\n\t\t };\n\n\treturn (\n\t\t<Stack direction=\"row\" alignItems=\"center\" { ...paddingAndSizing } sx={ { columnGap: 0.5 } }>\n\t\t\t{ icon }\n\t\t\t<Typography\n\t\t\t\tvariant=\"subtitle2\"\n\t\t\t\tsx={\n\t\t\t\t\tisVersion330Active\n\t\t\t\t\t\t? {\n\t\t\t\t\t\t\t\tfontSize: '12px',\n\t\t\t\t\t\t\t\tmt: 0.25,\n\t\t\t\t\t\t }\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{ title }\n\t\t\t</Typography>\n\t\t\t<Stack direction=\"row\" sx={ { ml: 'auto' } }>\n\t\t\t\t{ actions }\n\t\t\t\t<CloseButton slotProps={ { icon: { fontSize: SIZE } } } sx={ { ml: 'auto' } } onClick={ onClose } />\n\t\t\t</Stack>\n\t\t</Stack>\n\t);\n};\n","import * as React from 'react';\nimport { useMemo, useRef } from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { Box, MenuList, MenuSubheader, styled } from '@elementor/ui';\nimport { useVirtualizer } from '@tanstack/react-virtual';\n\nimport { useScrollTop, useScrollToSelected } from '../../hooks';\n\nexport type VirtualizedItem< T, V extends string > = {\n\ttype: T;\n\tvalue: V;\n\tlabel?: string;\n\ticon?: React.ReactNode;\n\tsecondaryText?: string;\n\t[ key: string ]: unknown;\n};\n\nexport type PopoverMenuListProps< T, V extends string > = {\n\titems: VirtualizedItem< T, V >[];\n\tonSelect: ( value: V ) => void;\n\tonClose: () => void;\n\tselectedValue?: V;\n\titemStyle?: ( item: VirtualizedItem< T, V > ) => React.CSSProperties;\n\t'data-testid'?: string;\n\tonChange?: ( params: { getVirtualIndexes: () => number[] } ) => void;\n\tmenuListTemplate?: React.ComponentType< React.ComponentProps< typeof MenuList > >;\n\tmenuItemContentTemplate?: ( item: VirtualizedItem< T, V > ) => React.ReactNode;\n\tnoResultsComponent?: React.ReactNode;\n};\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nexport const ITEM_HEIGHT = 32;\nconst LIST_ITEMS_BUFFER = 6;\nconst MENU_LIST_PADDING_TOP = 8;\n\nconst menuSubHeaderAbsoluteStyling = ( start: number ) => ( {\n\tposition: 'absolute',\n\ttransform: `translateY(${ start + MENU_LIST_PADDING_TOP }px)`,\n} );\n\nconst getAdjacentStickyIndices = (\n\tstickyIndices: number[],\n\trange: { startIndex: number; endIndex: number }\n): number[] => {\n\tconst previousTwoStickyIndices = stickyIndices\n\t\t.filter( ( stickyIndex ) => stickyIndex < range.startIndex )\n\t\t.slice( -2 );\n\n\tconst nextTwoStickyIndices = stickyIndices.filter( ( stickyIndex ) => stickyIndex > range.endIndex ).slice( 0, 2 );\n\n\treturn [ ...previousTwoStickyIndices, ...nextTwoStickyIndices ];\n};\n\nexport const PopoverMenuList = < T, V extends string >( {\n\titems,\n\tonSelect,\n\tonClose,\n\tselectedValue,\n\titemStyle,\n\tonChange,\n\t'data-testid': dataTestId,\n\tmenuItemContentTemplate,\n\tnoResultsComponent,\n\tmenuListTemplate: CustomMenuList,\n}: PopoverMenuListProps< T, V > ) => {\n\tconst containerRef = useRef< HTMLDivElement >( null );\n\tconst scrollTop = useScrollTop( { containerRef } );\n\n\tconst MenuListComponent = CustomMenuList || StyledMenuList;\n\n\tconst stickyIndices = useMemo(\n\t\t() =>\n\t\t\titems.reduce( ( categoryIndices, item, index ) => {\n\t\t\t\tif ( item.type === 'category' ) {\n\t\t\t\t\tcategoryIndices.push( index );\n\t\t\t\t}\n\t\t\t\treturn categoryIndices;\n\t\t\t}, [] as number[] ),\n\t\t[ items ]\n\t);\n\n\tconst getActiveItemIndices = ( range: { startIndex: number; endIndex: number } ) => {\n\t\tconst visibleAndStickyIndexes: number[] = [];\n\n\t\tfor ( let i = range.startIndex; i <= range.endIndex; i++ ) {\n\t\t\tvisibleAndStickyIndexes.push( i );\n\t\t}\n\n\t\tconst stickyIndicesToShow = getAdjacentStickyIndices( stickyIndices, range );\n\n\t\tstickyIndicesToShow.forEach( ( stickyIndex ) => {\n\t\t\tif ( ! visibleAndStickyIndexes.includes( stickyIndex ) ) {\n\t\t\t\tvisibleAndStickyIndexes.push( stickyIndex );\n\t\t\t}\n\t\t} );\n\n\t\treturn visibleAndStickyIndexes.sort( ( a, b ) => a - b );\n\t};\n\n\tconst virtualizer = useVirtualizer( {\n\t\tcount: items.length,\n\t\tgetScrollElement: () => containerRef.current,\n\t\testimateSize: () => ITEM_HEIGHT,\n\t\toverscan: LIST_ITEMS_BUFFER,\n\t\trangeExtractor: getActiveItemIndices,\n\t\tonChange,\n\t} );\n\n\tuseScrollToSelected( { selectedValue, items, virtualizer } );\n\n\treturn (\n\t\t<Box ref={ containerRef }>\n\t\t\t{ items.length === 0 && noResultsComponent ? (\n\t\t\t\tnoResultsComponent\n\t\t\t) : (\n\t\t\t\t<MenuListComponent\n\t\t\t\t\trole=\"listbox\"\n\t\t\t\t\tstyle={ { height: `${ virtualizer.getTotalSize() }px` } }\n\t\t\t\t\tdata-testid={ dataTestId }\n\t\t\t\t>\n\t\t\t\t\t{ virtualizer.getVirtualItems().map( ( virtualRow ) => {\n\t\t\t\t\t\tconst item = items[ virtualRow.index ];\n\t\t\t\t\t\tconst isLast = virtualRow.index === items.length - 1;\n\t\t\t\t\t\tconst isFirst =\n\t\t\t\t\t\t\titems[ 0 ]?.type === 'category' ? virtualRow.index === 1 : virtualRow.index === 0;\n\t\t\t\t\t\tconst isSelected = selectedValue === item.value;\n\t\t\t\t\t\tconst tabIndexFallback = ! selectedValue ? 0 : -1;\n\n\t\t\t\t\t\tif ( ! item ) {\n\t\t\t\t\t\t\treturn null;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tif ( item.type === 'category' ) {\n\t\t\t\t\t\t\tconst shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;\n\n\t\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t\t<MenuSubheader\n\t\t\t\t\t\t\t\t\tkey={ virtualRow.key }\n\t\t\t\t\t\t\t\t\tstyle={ shouldStick ? {} : menuSubHeaderAbsoluteStyling( virtualRow.start ) }\n\t\t\t\t\t\t\t\t\tsx={\n\t\t\t\t\t\t\t\t\t\tisVersion330Active ? { fontWeight: '400', color: 'text.tertiary' } : undefined\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t{ item.label || item.value }\n\t\t\t\t\t\t\t\t</MenuSubheader>\n\t\t\t\t\t\t\t);\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li\n\t\t\t\t\t\t\t\tkey={ virtualRow.key }\n\t\t\t\t\t\t\t\trole=\"option\"\n\t\t\t\t\t\t\t\taria-selected={ isSelected }\n\t\t\t\t\t\t\t\tonClick={ ( e ) => {\n\t\t\t\t\t\t\t\t\tif ( ( e.target as HTMLElement ).closest( 'button' ) ) {\n\t\t\t\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t\tonSelect( item.value );\n\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\tonKeyDown={ ( event ) => {\n\t\t\t\t\t\t\t\t\tif ( event.key === 'Enter' ) {\n\t\t\t\t\t\t\t\t\t\tonSelect( item.value );\n\t\t\t\t\t\t\t\t\t\tonClose();\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowDown' && isLast ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t}\n\n\t\t\t\t\t\t\t\t\tif ( event.key === 'ArrowUp' && isFirst ) {\n\t\t\t\t\t\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t\ttabIndex={ isSelected ? 0 : tabIndexFallback }\n\t\t\t\t\t\t\t\tstyle={ {\n\t\t\t\t\t\t\t\t\ttransform: `translateY(${ virtualRow.start + MENU_LIST_PADDING_TOP }px)`,\n\t\t\t\t\t\t\t\t\t...( itemStyle ? itemStyle( item ) : {} ),\n\t\t\t\t\t\t\t\t} }\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t{ menuItemContentTemplate ? menuItemContentTemplate( item ) : item.label || item.value }\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t} ) }\n\t\t\t\t</MenuListComponent>\n\t\t\t) }\n\t\t</Box>\n\t);\n};\n\nexport const StyledMenuList = styled( MenuList )( ( { theme } ) => ( {\n\t'& > li': {\n\t\theight: ITEM_HEIGHT,\n\t\twidth: '100%',\n\t\tdisplay: 'flex',\n\t\talignItems: 'center',\n\t},\n\t'& > [role=\"option\"]': {\n\t\t...theme.typography.caption,\n\t\tlineHeight: 'inherit',\n\t\tpadding: theme.spacing( 0.75, 2, 0.75, 4 ),\n\t\t'&:hover, &:focus': {\n\t\t\tbackgroundColor: theme.palette.action.hover,\n\t\t},\n\t\t'&[aria-selected=\"true\"]': {\n\t\t\tbackgroundColor: theme.palette.action.selected,\n\t\t},\n\t\tcursor: 'pointer',\n\t\ttextOverflow: 'ellipsis',\n\t\tposition: 'absolute',\n\t\ttop: 0,\n\t\tleft: 0,\n\t},\n\twidth: '100%',\n\tposition: 'relative',\n} ) );\n","import { useEffect } from 'react';\nimport type { Virtualizer } from '@tanstack/react-virtual';\n\nimport type { VirtualizedItem } from '../components/popover/menu-list';\n\ntype UseScrollToSelectedProps< T, V extends string > = {\n\tselectedValue?: V;\n\titems: VirtualizedItem< T, V >[];\n\tvirtualizer: Virtualizer< HTMLDivElement, Element >;\n};\n\nexport const useScrollToSelected = < T, V extends string >( {\n\tselectedValue,\n\titems,\n\tvirtualizer,\n}: UseScrollToSelectedProps< T, V > ) => {\n\tuseEffect( () => {\n\t\tif ( ! selectedValue || items.length === 0 ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst selectedIndex = items.findIndex( ( item ) => item.value === selectedValue );\n\n\t\tif ( selectedIndex !== -1 ) {\n\t\t\tvirtualizer.scrollToIndex( selectedIndex, { align: 'center' } );\n\t\t}\n\t}, [ selectedValue, items, virtualizer ] );\n};\n","import { useEffect, useState } from 'react';\n\ntype UseScrollTopProps = {\n\tcontainerRef: React.RefObject< HTMLDivElement >;\n};\n\nexport const useScrollTop = ( { containerRef }: UseScrollTopProps ) => {\n\tconst [ scrollTop, setScrollTop ] = useState( 0 );\n\n\tuseEffect( () => {\n\t\tconst container = containerRef.current;\n\n\t\tif ( ! container ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst handleScroll = () => {\n\t\t\tsetScrollTop( container.scrollTop );\n\t\t};\n\n\t\tcontainer.addEventListener( 'scroll', handleScroll );\n\t\treturn () => container.removeEventListener( 'scroll', handleScroll );\n\t}, [ containerRef ] );\n\n\treturn scrollTop;\n};\n","import * as React from 'react';\nimport { type PropsWithChildren } from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { Box } from '@elementor/ui';\n\nconst SECTION_PADDING_INLINE = 32;\nconst DEFAULT_POPOVER_WIDTH = 220;\n\ntype PopoverScrollableContentProps = PropsWithChildren< {\n\theight?: number | 'auto';\n\twidth?: number;\n} >;\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nexport const PopoverScrollableContent = React.forwardRef< HTMLDivElement, PopoverScrollableContentProps >(\n\t( { children, height = 260, width = DEFAULT_POPOVER_WIDTH }, ref ) => {\n\t\treturn (\n\t\t\t<Box\n\t\t\t\tref={ ref }\n\t\t\t\tsx={ {\n\t\t\t\t\toverflowY: 'auto',\n\t\t\t\t\theight,\n\t\t\t\t\twidth: `${ isVersion330Active ? width - SECTION_PADDING_INLINE : DEFAULT_POPOVER_WIDTH }px`,\n\t\t\t\t\tmaxWidth: 496,\n\t\t\t\t} }\n\t\t\t>\n\t\t\t\t{ children }\n\t\t\t</Box>\n\t\t);\n\t}\n);\n","import * as React from 'react';\nimport { useRef } from 'react';\nimport { isExperimentActive } from '@elementor/editor-v1-adapters';\nimport { SearchIcon, XIcon } from '@elementor/icons';\nimport { Box, IconButton, InputAdornment, TextField } from '@elementor/ui';\nimport { __ } from '@wordpress/i18n';\n\nconst isVersion330Active = isExperimentActive( 'e_v_3_30' );\n\nconst SIZE = 'tiny';\n\ntype Props = {\n\tvalue: string;\n\tonSearch: ( search: string ) => void;\n\tplaceholder: string;\n};\n\nexport const PopoverSearch = ( { value, onSearch, placeholder }: Props ) => {\n\tconst inputRef = useRef< HTMLInputElement | null >( null );\n\n\tconst handleClear = () => {\n\t\tonSearch( '' );\n\n\t\tinputRef.current?.focus();\n\t};\n\n\tconst handleInputChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {\n\t\tonSearch( event.target.value );\n\t};\n\n\tconst padding = isVersion330Active\n\t\t? {\n\t\t\t\tpx: 2,\n\t\t\t\tpb: 1.5,\n\t\t }\n\t\t: {\n\t\t\t\tpx: 1.5,\n\t\t\t\tpb: 1,\n\t\t };\n\n\treturn (\n\t\t<Box { ...padding }>\n\t\t\t<TextField\n\t\t\t\t// eslint-disable-next-line jsx-a11y/no-autofocus\n\t\t\t\tautoFocus\n\t\t\t\tfullWidth\n\t\t\t\tsize={ SIZE }\n\t\t\t\tvalue={ value }\n\t\t\t\tinputRef={ inputRef }\n\t\t\t\tonChange={ handleInputChange }\n\t\t\t\tplaceholder={ placeholder }\n\t\t\t\tInputProps={ {\n\t\t\t\t\tstartAdornment: (\n\t\t\t\t\t\t<InputAdornment position=\"start\">\n\t\t\t\t\t\t\t<SearchIcon fontSize={ SIZE } />\n\t\t\t\t\t\t</InputAdornment>\n\t\t\t\t\t),\n\t\t\t\t\tendAdornment: value && (\n\t\t\t\t\t\t<IconButton size={ SIZE } onClick={ handleClear } aria-label={ __( 'Clear', 'elementor' ) }>\n\t\t\t\t\t\t\t<XIcon color=\"action\" fontSize={ SIZE } />\n\t\t\t\t\t\t</IconButton>\n\t\t\t\t\t),\n\t\t\t\t} }\n\t\t\t/>\n\t\t</Box>\n\t);\n};\n","import { useEffect, useRef, useState } from 'react';\n\ntype UseEditableParams = {\n\tvalue: string;\n\tonSubmit: ( value: string ) => unknown;\n\tvalidation?: ( value: string ) => string | null;\n\tonClick?: ( event: React.MouseEvent< HTMLDivElement > ) => void;\n\tonError?: ( error: string | null ) => void;\n};\n\nexport const useEditable = ( { value, onSubmit, validation, onClick, onError }: UseEditableParams ) => {\n\tconst [ isEditing, setIsEditing ] = useState( false );\n\tconst [ error, setError ] = useState< string | null >( null );\n\n\tconst ref = useSelection( isEditing );\n\n\tconst isDirty = ( newValue: string ) => newValue !== value;\n\n\tconst openEditMode = () => {\n\t\tsetIsEditing( true );\n\t};\n\n\tconst closeEditMode = () => {\n\t\tref.current?.blur();\n\n\t\tsetError( null );\n\t\tonError?.( null );\n\t\tsetIsEditing( false );\n\t};\n\n\tconst submit = ( newValue: string ) => {\n\t\tif ( ! isDirty( newValue ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tif ( ! error ) {\n\t\t\ttry {\n\t\t\t\tonSubmit( newValue );\n\t\t\t} finally {\n\t\t\t\tcloseEditMode();\n\t\t\t}\n\t\t}\n\t};\n\n\tconst onChange = ( event: React.ChangeEvent< HTMLSpanElement > ) => {\n\t\tconst { innerText: newValue } = event.target;\n\n\t\tif ( validation ) {\n\t\t\tconst updatedError = isDirty( newValue ) ? validation( newValue ) : null;\n\n\t\t\tsetError( updatedError );\n\t\t\tonError?.( updatedError );\n\t\t}\n\t};\n\n\tconst handleKeyDown = ( event: React.KeyboardEvent ) => {\n\t\tevent.stopPropagation();\n\n\t\tif ( [ 'Escape' ].includes( event.key ) ) {\n\t\t\treturn closeEditMode();\n\t\t}\n\n\t\tif ( [ 'Enter' ].includes( event.key ) ) {\n\t\t\tevent.preventDefault();\n\t\t\treturn submit( ( event.target as HTMLElement ).innerText );\n\t\t}\n\t};\n\n\tconst handleClick = ( event: React.MouseEvent< HTMLDivElement > ) => {\n\t\tif ( isEditing ) {\n\t\t\tevent.stopPropagation();\n\t\t}\n\n\t\tonClick?.( event );\n\t};\n\n\tconst listeners = {\n\t\tonClick: handleClick,\n\t\tonKeyDown: handleKeyDown,\n\t\tonInput: onChange,\n\t\tonBlur: closeEditMode,\n\t} as const;\n\n\tconst attributes = {\n\t\tvalue,\n\t\trole: 'textbox',\n\t\tcontentEditable: isEditing,\n\t\t...( isEditing && {\n\t\t\tsuppressContentEditableWarning: true,\n\t\t} ),\n\t} as const;\n\n\treturn {\n\t\tref,\n\t\tisEditing,\n\t\topenEditMode,\n\t\tcloseEditMode,\n\t\tvalue,\n\t\terror,\n\t\tgetProps: () => ( { ...listeners, ...attributes } ),\n\t} as const;\n};\n\nconst useSelection = ( isEditing: boolean ) => {\n\tconst ref = useRef< HTMLElement | null >( null );\n\n\tuseEffect( () => {\n\t\tif ( isEditing ) {\n\t\t\tselectAll( ref.current );\n\t\t}\n\t}, [ isEditing ] );\n\n\treturn ref;\n};\n\nconst selectAll = ( el: HTMLElement | null ) => {\n\tconst selection = getSelection();\n\n\tif ( ! selection || ! el ) {\n\t\treturn;\n\t}\n\n\tconst range = document.createRange();\n\trange.selectNodeContents( el );\n\n\tselection.removeAllRanges();\n\tselection.addRange( range );\n};\n"],"mappings":"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","names":["React","forwardRef","Box","Tooltip","React","useState","React","useEffect","useState","React","forwardRef","React","forwardRef","React","Box","Button","Typography","forwardRef","React","Alert","Infotip","React","Typography","React","isExperimentActive","Box","styled","useEffect","useEffect","useState","isVersion330Active","isExperimentActive","Box","styled","React","isExperimentActive","Box","isVersion330Active","React","useRef","isExperimentActive","Box","__","isVersion330Active","SIZE","useEffect","useRef","useState"]}
@@ -1,32 +0,0 @@
1
- import * as React from 'react';
2
- import { type PropsWithChildren } from 'react';
3
- import { isExperimentActive } from '@elementor/editor-v1-adapters';
4
- import { Box } from '@elementor/ui';
5
-
6
- const SECTION_PADDING_INLINE = 32;
7
- const DEFAULT_POPOVER_WIDTH = 220;
8
-
9
- type PopoverScrollableContentProps = PropsWithChildren< {
10
- height?: number | 'auto';
11
- width?: number;
12
- } >;
13
-
14
- const isVersion330Active = isExperimentActive( 'e_v_3_30' );
15
-
16
- export const PopoverScrollableContent = React.forwardRef< HTMLDivElement, PopoverScrollableContentProps >(
17
- ( { children, height = 260, width = DEFAULT_POPOVER_WIDTH }, ref ) => {
18
- return (
19
- <Box
20
- ref={ ref }
21
- sx={ {
22
- overflowY: 'auto',
23
- height,
24
- width: `${ isVersion330Active ? width - SECTION_PADDING_INLINE : DEFAULT_POPOVER_WIDTH }px`,
25
- maxWidth: 496,
26
- } }
27
- >
28
- { children }
29
- </Box>
30
- );
31
- }
32
- );