PluginProbe
Elementor Website Builder – more than just a page builder / 3.28.0-dev2
Elementor Website Builder – more than just a page builder v3.28.0-dev2
4.3.2 4.3.1 4.3.0 4.3.0-beta3 4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 All 455 releases
← All changes | assets/js/packages/editor-ui/editor-ui.js +2 -2101 4.3.2 → 3.28.0-dev2 View file →
@@ -1,2101 +1,2 @@
1 -(function(_elementor_icons, _elementor_ui, react, _wordpress_i18n, _elementor_editor_v1_adapters, react_dom) {
2 -
3 -//#region \0rolldown/runtime.js
4 - var __create = Object.create;
5 - var __defProp = Object.defineProperty;
6 - var __name = (target, value) => __defProp(target, "name", {
7 - value,
8 - configurable: true
9 - });
10 - var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
11 - var __getOwnPropNames = Object.getOwnPropertyNames;
12 - var __getProtoOf = Object.getPrototypeOf;
13 - var __hasOwnProp = Object.prototype.hasOwnProperty;
14 - var __exportAll = (all, no_symbols) => {
15 - let target = {};
16 - for (var name in all) {
17 - __defProp(target, name, {
18 - get: all[name],
19 - enumerable: true
20 - });
21 - }
22 - if (!no_symbols) {
23 - __defProp(target, Symbol.toStringTag, { value: "Module" });
24 - }
25 - return target;
26 - };
27 - var __copyProps = (to, from, except, desc) => {
28 - if (from && typeof from === "object" || typeof from === "function") {
29 - for (var keys = __getOwnPropNames(from), i = 0, n = keys.length, key; i < n; i++) {
30 - key = keys[i];
31 - if (!__hasOwnProp.call(to, key) && key !== except) {
32 - __defProp(to, key, {
33 - get: ((k) => from[k]).bind(null, key),
34 - enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
35 - });
36 - }
37 - }
38 - }
39 - return to;
40 - };
41 - var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
42 - value: mod,
43 - enumerable: true
44 - }) : target, mod));
45 -
46 -//#endregion
47 -let react$1 = __toESM(react, 1);
48 -react = __toESM(react);
49 -
50 -//#region packages/packages/libs/editor-ui/src/components/collapse-icon.tsx
51 - var CollapseIcon = (0, _elementor_ui.styled)(_elementor_icons.ChevronDownIcon, { shouldForwardProp: (prop) => prop !== "open" && prop !== "disabled" })(({ theme, open, disabled = false }) => ({
52 - transform: open ? "rotate(180deg)" : "rotate(0deg)",
53 - transition: theme.transitions.create("transform", { duration: theme.transitions.duration.standard }),
54 - opacity: disabled ? .4 : 1
55 - }));
56 -
57 -//#endregion
58 -//#region packages/packages/libs/editor-ui/src/components/collapsible-content.tsx
59 - var IndicatorsWrapper = (0, _elementor_ui.styled)("div")`
60 - position: absolute;
61 - top: 0;
62 - right: ${({ theme }) => theme.spacing(3)};
63 - height: 100%;
64 - display: flex;
65 - flex-direction: column;
66 - align-items: center;
67 - justify-content: center;
68 -`;
69 - var CollapsibleContent = ({ children, defaultOpen = false, titleEnd = null }) => {
70 - const [open, setOpen] = (0, react.useState)(defaultOpen);
71 - const handleToggle = () => {
72 - setOpen((prevOpen) => !prevOpen);
73 - };
74 - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, null, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, { sx: { position: "relative" } }, /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
75 - fullWidth: true,
76 - size: "small",
77 - color: "secondary",
78 - variant: "outlined",
79 - onClick: handleToggle,
80 - endIcon: /* @__PURE__ */ react.createElement(CollapseIcon, { open }),
81 - sx: { my: .5 },
82 - "aria-label": open ? "Show less" : "Show more"
83 - }, open ? (0, _wordpress_i18n.__)("Show less", "elementor") : (0, _wordpress_i18n.__)("Show more", "elementor")), titleEnd && /* @__PURE__ */ react.createElement(IndicatorsWrapper, null, getCollapsibleValue(titleEnd, open))), /* @__PURE__ */ react.createElement(_elementor_ui.Collapse, {
84 - in: open,
85 - timeout: "auto",
86 - unmountOnExit: true
87 - }, children));
88 - };
89 - function getCollapsibleValue(value, isOpen) {
90 - if (typeof value === "function") return value(isOpen);
91 - return value;
92 - }
93 -
94 -//#endregion
95 -//#region packages/packages/libs/editor-ui/src/components/ellipsis-with-tooltip.tsx
96 - var EllipsisWithTooltip = ({ maxWidth, title, as, ...props }) => {
97 - const [setRef, isOverflowing] = useIsOverflowing();
98 - if (isOverflowing) return /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
99 - title,
100 - placement: "top"
101 - }, /* @__PURE__ */ react.createElement(Content, {
102 - maxWidth,
103 - ref: setRef,
104 - as,
105 - ...props
106 - }, title));
107 - return /* @__PURE__ */ react.createElement(Content, {
108 - maxWidth,
109 - ref: setRef,
110 - as,
111 - ...props
112 - }, title);
113 - };
114 - var Content = react.forwardRef(({ maxWidth, as: Component = _elementor_ui.Box, ...props }, ref) => /* @__PURE__ */ react.createElement(Component, {
115 - ref,
116 - position: "relative",
117 - ...props,
118 - style: {
119 - overflow: "hidden",
120 - textOverflow: "ellipsis",
121 - whiteSpace: "nowrap",
122 - maxWidth
123 - }
124 - }));
125 - var useIsOverflowing = () => {
126 - const [el, setEl] = (0, react.useState)(null);
127 - const [isOverflowing, setIsOverflown] = (0, react.useState)(false);
128 - (0, react.useEffect)(() => {
129 - const observer = new ResizeObserver(([{ target }]) => {
130 - setIsOverflown(target.scrollWidth > target.clientWidth);
131 - });
132 - if (el) observer.observe(el);
133 - return () => {
134 - observer.disconnect();
135 - };
136 - }, [el]);
137 - return [setEl, isOverflowing];
138 - };
139 -
140 -//#endregion
141 -//#region packages/packages/libs/editor-ui/src/components/editable-field.tsx
142 - var EditableField = (0, react.forwardRef)(({ value, error, as = "span", sx, ...props }, ref) => {
143 - return /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
144 - title: error,
145 - open: !!error,
146 - placement: "top"
147 - }, /* @__PURE__ */ react.createElement(StyledField, {
148 - ref,
149 - component: as,
150 - ...props
151 - }, value));
152 - });
153 - var StyledField = (0, _elementor_ui.styled)(_elementor_ui.Box)`
154 - width: 100%;
155 - &:focus {
156 - outline: none;
157 - }
158 -`;
159 -
160 -//#endregion
161 -//#region packages/packages/libs/editor-ui/src/components/introduction-modal.tsx
162 - var IntroductionModal = ({ open, handleClose, title, children }) => {
163 - const [shouldShowAgain, setShouldShowAgain] = (0, react.useState)(true);
164 - return /* @__PURE__ */ react.createElement(_elementor_ui.Dialog, {
165 - open,
166 - onClose: handleClose,
167 - maxWidth: "sm",
168 - TransitionComponent: Transition
169 - }, title && /* @__PURE__ */ react.createElement(_elementor_ui.DialogHeader, { logo: false }, /* @__PURE__ */ react.createElement(_elementor_ui.DialogTitle, null, title)), children, /* @__PURE__ */ react.createElement(_elementor_ui.DialogActions, null, /* @__PURE__ */ react.createElement(_elementor_ui.FormControlLabel, {
170 - sx: { marginRight: "auto" },
171 - control: /* @__PURE__ */ react.createElement(_elementor_ui.Checkbox, {
172 - checked: !shouldShowAgain,
173 - onChange: () => setShouldShowAgain(!shouldShowAgain)
174 - }),
175 - label: /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "body2" }, (0, _wordpress_i18n.__)("Don't show this again", "elementor"))
176 - }), /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
177 - size: "medium",
178 - variant: "contained",
179 - sx: { minWidth: "135px" },
180 - "aria-label": (0, _wordpress_i18n.__)("Got it introduction", "elementor"),
181 - onClick: () => handleClose(shouldShowAgain)
182 - }, (0, _wordpress_i18n.__)("Got it", "elementor"))));
183 - };
184 - var Transition = react.forwardRef((props, ref) => /* @__PURE__ */ react.createElement(_elementor_ui.Fade, {
185 - ref,
186 - ...props,
187 - timeout: {
188 - enter: 1e3,
189 - exit: 200
190 - }
191 - }));
192 -
193 -//#endregion
194 -//#region packages/packages/libs/editor-ui/src/hooks/use-color-scheme.ts
195 - function useColorScheme() {
196 - const [colorScheme, setColorScheme] = (0, react.useState)(() => getV1ColorScheme());
197 - (0, react.useEffect)(() => {
198 - return (0, _elementor_editor_v1_adapters.__privateListenTo)((0, _elementor_editor_v1_adapters.v1ReadyEvent)(), () => setColorScheme(getV1ColorScheme()));
199 - }, []);
200 - (0, react.useEffect)(() => {
201 - return (0, _elementor_editor_v1_adapters.__privateListenTo)((0, _elementor_editor_v1_adapters.commandEndEvent)("document/elements/settings"), (e) => {
202 - const event = e;
203 - if (event.args?.settings && "ui_theme" in event.args.settings) setColorScheme(getV1ColorScheme());
204 - });
205 - }, []);
206 - return colorScheme;
207 - }
208 - function getV1ColorScheme() {
209 - return window.elementor?.getPreferences?.("ui_theme") || "auto";
210 - }
211 -
212 -//#endregion
213 -//#region packages/packages/libs/editor-ui/src/components/theme-provider.tsx
214 - var EDITOR_PALETTE = "unstable";
215 - function ThemeProvider({ children }) {
216 - const colorScheme = useColorScheme();
217 - return /* @__PURE__ */ react.createElement(_elementor_ui.ThemeProvider, {
218 - colorScheme,
219 - palette: EDITOR_PALETTE
220 - }, children);
221 - }
222 -
223 -//#endregion
224 -//#region packages/packages/libs/editor-ui/src/components/info-alert.tsx
225 - var InfoAlert = (props) => /* @__PURE__ */ react.createElement(_elementor_ui.Alert, {
226 - icon: /* @__PURE__ */ react.createElement(_elementor_icons.InfoCircleFilledIcon, {
227 - fontSize: "small",
228 - color: "secondary"
229 - }),
230 - variant: "standard",
231 - color: "secondary",
232 - elevation: 0,
233 - size: "small",
234 - ...props
235 - });
236 -
237 -//#endregion
238 -//#region packages/packages/libs/editor-ui/src/components/menu-item.tsx
239 - var MenuListItem = ({ children, menuItemTextProps, primaryTypographyProps = { variant: "caption" }, ...props }) => {
240 - return /* @__PURE__ */ react.createElement(_elementor_ui.MenuItem, {
241 - dense: true,
242 - ...props,
243 - sx: { ...props.sx ?? {} }
244 - }, /* @__PURE__ */ react.createElement(_elementor_ui.MenuItemText, {
245 - primary: children,
246 - primaryTypographyProps,
247 - ...menuItemTextProps
248 - }));
249 - };
250 - var MenuItemInfotip = (0, react.forwardRef)(({ showInfoTip = false, children, content }, ref) => {
251 - if (!showInfoTip) return /* @__PURE__ */ react.createElement(react.Fragment, null, children);
252 - return /* @__PURE__ */ react.createElement(_elementor_ui.Infotip, {
253 - ref,
254 - placement: "right",
255 - arrow: false,
256 - content: /* @__PURE__ */ react.createElement(InfoAlert, { sx: { maxWidth: 325 } }, content)
257 - }, /* @__PURE__ */ react.createElement("div", {
258 - style: {
259 - pointerEvents: "initial",
260 - width: "100%"
261 - },
262 - onClick: (e) => e.stopPropagation()
263 - }, children));
264 - });
265 -
266 -//#endregion
267 -//#region packages/packages/libs/editor-ui/src/components/infotip-card.tsx
268 - var InfoTipCard = ({ content, svgIcon, learnMoreButton, ctaButton }) => {
269 - return /* @__PURE__ */ react.createElement(_elementor_ui.Card, {
270 - elevation: 0,
271 - sx: { width: 320 }
272 - }, /* @__PURE__ */ react.createElement(_elementor_ui.CardContent, { sx: { pb: 0 } }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
273 - display: "flex",
274 - alignItems: "start"
275 - }, /* @__PURE__ */ react.createElement(_elementor_ui.SvgIcon, {
276 - fontSize: "tiny",
277 - sx: { mr: .5 }
278 - }, svgIcon), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "body2" }, content, learnMoreButton && /* @__PURE__ */ react.createElement(react.Fragment, null, "\xA0", /* @__PURE__ */ react.createElement(_elementor_ui.Link, {
279 - color: "info.main",
280 - href: learnMoreButton.href,
281 - target: "_blank"
282 - }, learnMoreButton.label))))), ctaButton && /* @__PURE__ */ react.createElement(_elementor_ui.CardActions, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
283 - size: "small",
284 - color: "secondary",
285 - variant: "contained",
286 - onClick: ctaButton.onClick,
287 - sx: { marginInlineStart: "1rem" }
288 - }, ctaButton.label)));
289 - };
290 -
291 -//#endregion
292 -//#region packages/packages/libs/editor-ui/src/components/warning-infotip.tsx
293 - var WarningInfotip = (0, react.forwardRef)(({ children, open, title, text, placement, width, offset, hasError = true }, ref) => {
294 - return /* @__PURE__ */ react.createElement(_elementor_ui.Infotip, {
295 - ref,
296 - open,
297 - placement,
298 - PopperProps: {
299 - sx: {
300 - width: width ? width : "initial",
301 - ".MuiTooltip-tooltip": {
302 - marginLeft: 0,
303 - marginRight: 0
304 - }
305 - },
306 - modifiers: offset ? [{
307 - name: "offset",
308 - options: { offset }
309 - }] : []
310 - },
311 - arrow: false,
312 - content: /* @__PURE__ */ react.createElement(_elementor_ui.Alert, {
313 - color: hasError ? "error" : "secondary",
314 - severity: "warning",
315 - variant: "standard",
316 - size: "small"
317 - }, title ? /* @__PURE__ */ react.createElement(_elementor_ui.AlertTitle, null, title) : null, text)
318 - }, children);
319 - });
320 -
321 -//#endregion
322 -//#region packages/packages/libs/editor-ui/src/components/global-dialog/subscribers.ts
323 - var currentDialogState = null;
324 - var stateSubscribers = /* @__PURE__ */ new Set();
325 - var subscribeToDialogState = (callback) => {
326 - stateSubscribers.add(callback);
327 - callback(currentDialogState);
328 - return () => stateSubscribers.delete(callback);
329 - };
330 - var notifySubscribers = () => {
331 - stateSubscribers.forEach((callback) => callback(currentDialogState));
332 - };
333 - var openDialog = ({ component }) => {
334 - currentDialogState = { component };
335 - notifySubscribers();
336 - };
337 - var closeDialog = () => {
338 - currentDialogState = null;
339 - notifySubscribers();
340 - };
341 -
342 -//#endregion
343 -//#region packages/packages/libs/editor-ui/src/components/global-dialog/components/global-dialog.tsx
344 - var GlobalDialog = () => {
345 - const [content, setContent] = (0, react.useState)(null);
346 - (0, react.useEffect)(() => {
347 - const unsubscribe = subscribeToDialogState(setContent);
348 - return () => {
349 - unsubscribe();
350 - };
351 - }, []);
352 - if (!content) return null;
353 - return /* @__PURE__ */ react.createElement(ThemeProvider, null, /* @__PURE__ */ react.createElement(_elementor_ui.Dialog, {
354 - role: "dialog",
355 - open: true,
356 - onClose: closeDialog,
357 - maxWidth: "sm",
358 - fullWidth: true
359 - }, content.component));
360 - };
361 -
362 -//#endregion
363 -//#region packages/packages/libs/editor-ui/src/components/search-field.tsx
364 - var SIZE$2 = "tiny";
365 - var SearchField = ({ value, onSearch, placeholder, id, sx }) => {
366 - const inputRef = (0, react.useRef)(null);
367 - const handleClear = () => {
368 - onSearch("");
369 - inputRef.current?.focus();
370 - };
371 - const handleInputChange = (event) => {
372 - onSearch(event.target.value);
373 - };
374 - return /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: {
375 - px: 2,
376 - pb: 1.5,
377 - ...sx
378 - } }, /* @__PURE__ */ react.createElement(_elementor_ui.TextField, {
379 - autoFocus: true,
380 - fullWidth: true,
381 - id,
382 - size: SIZE$2,
383 - value,
384 - inputRef,
385 - onChange: handleInputChange,
386 - placeholder,
387 - InputProps: {
388 - startAdornment: /* @__PURE__ */ react.createElement(_elementor_ui.InputAdornment, { position: "start" }, /* @__PURE__ */ react.createElement(_elementor_icons.SearchIcon, { fontSize: SIZE$2 })),
389 - endAdornment: value && /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, {
390 - size: SIZE$2,
391 - onClick: handleClear,
392 - "aria-label": (0, _wordpress_i18n.__)("Clear", "elementor")
393 - }, /* @__PURE__ */ react.createElement(_elementor_icons.XIcon, {
394 - color: "action",
395 - fontSize: SIZE$2
396 - }))
397 - }
398 - }));
399 - };
400 -
401 -//#endregion
402 -//#region packages/packages/libs/editor-ui/src/components/form.tsx
403 - var Form = ({ children, onSubmit, "data-testid": dataTestId }) => {
404 - const formRef = (0, react.useRef)(null);
405 - const handleSubmit = (e) => {
406 - e.preventDefault();
407 - onSubmit?.();
408 - };
409 - const handleKeyDown = (e) => {
410 - const { target } = e;
411 - if (e.key === "Enter" && target instanceof HTMLInputElement && target.type !== "submit") {
412 - e.preventDefault();
413 - formRef.current?.requestSubmit();
414 - }
415 - };
416 - return /* @__PURE__ */ react.createElement("form", {
417 - onSubmit: handleSubmit,
418 - ref: formRef,
419 - onKeyDown: handleKeyDown,
420 - ...dataTestId ? { "data-testid": dataTestId } : {}
421 - }, children);
422 - };
423 -
424 -//#endregion
425 -//#region packages/packages/libs/editor-ui/src/components/cta-button.tsx
426 - var CtaButton = ({ href, children, showIcon = true, ...props }) => /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
427 - variant: "contained",
428 - color: "promotion",
429 - href,
430 - target: "_blank",
431 - startIcon: showIcon ? /* @__PURE__ */ react.createElement(_elementor_icons.CrownFilledIcon, null) : void 0,
432 - ...props
433 - }, children ?? (0, _wordpress_i18n.__)("Upgrade Now", "elementor"));
434 -
435 -//#endregion
436 -//#region packages/packages/libs/editor-ui/src/hooks/use-scroll-to-selected.ts
437 - var useScrollToSelected = ({ selectedValue, items, virtualizer }) => {
438 - (0, react.useEffect)(() => {
439 - if (!selectedValue || items.length === 0) return;
440 - const selectedIndex = items.findIndex((item) => item.value === selectedValue);
441 - if (selectedIndex !== -1) virtualizer.scrollToIndex(selectedIndex, { align: "center" });
442 - }, [
443 - selectedValue,
444 - items,
445 - virtualizer
446 - ]);
447 - };
448 -
449 -//#endregion
450 -//#region packages/packages/libs/editor-ui/src/hooks/use-scroll-top.ts
451 - var useScrollTop = ({ containerRef }) => {
452 - const [scrollTop, setScrollTop] = (0, react.useState)(0);
453 - (0, react.useEffect)(() => {
454 - const container = containerRef.current;
455 - if (!container) return;
456 - const handleScroll = () => {
457 - setScrollTop(container.scrollTop);
458 - };
459 - container.addEventListener("scroll", handleScroll);
460 - return () => container.removeEventListener("scroll", handleScroll);
461 - }, [containerRef]);
462 - return scrollTop;
463 - };
464 -
465 -//#endregion
466 -//#region packages/packages/libs/editor-ui/src/hooks/use-text-field-auto-select.ts
467 - var useTextFieldAutoSelect = () => {
468 - const inputRef = (0, react.useRef)(null);
469 - (0, react.useEffect)(() => {
470 - if (inputRef.current) {
471 - inputRef.current.focus();
472 - inputRef.current.select();
473 - }
474 - }, []);
475 - return inputRef;
476 - };
477 -
478 -//#endregion
479 -//#region packages/packages/libs/editor-ui/src/hooks/use-canvas-click-handler.tsx
480 - var useCanvasClickHandler = (isActive, onClickAway) => {
481 - (0, react.useEffect)(() => {
482 - const canvasDocument = isActive ? (0, _elementor_editor_v1_adapters.getCanvasIframeDocument)() : null;
483 - if (!canvasDocument) return;
484 - canvasDocument.addEventListener("mousedown", onClickAway);
485 - return () => canvasDocument.removeEventListener("mousedown", onClickAway);
486 - }, [isActive, onClickAway]);
487 - };
488 -
489 -//#endregion
490 -//#region packages/packages/libs/editor-ui/src/components/promotions/promotion-infotip.tsx
491 - var PromotionInfotip = ({ children, open, onClose, onCtaClick, ...cardProps }) => {
492 - useCanvasClickHandler(!!open, onClose);
493 - return /* @__PURE__ */ react.createElement(_elementor_ui.Infotip, {
494 - placement: "right",
495 - content: /* @__PURE__ */ react.createElement(InfotipCard, {
496 - onClose,
497 - onCtaClick,
498 - ...cardProps
499 - }),
500 - open
501 - }, children);
502 - };
503 - function InfotipCard({ title, content, assetUrl, ctaUrl, onClose, onCtaClick }) {
504 - return /* @__PURE__ */ react.createElement(_elementor_ui.ClickAwayListener, {
505 - disableReactTree: true,
506 - mouseEvent: "onMouseDown",
507 - touchEvent: "onTouchStart",
508 - onClickAway: onClose
509 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Card, {
510 - elevation: 0,
511 - sx: { maxWidth: 296 }
512 - }, /* @__PURE__ */ react.createElement(_elementor_ui.CardHeader, {
513 - title,
514 - action: /* @__PURE__ */ react.createElement(_elementor_ui.CloseButton, {
515 - slotProps: { icon: { fontSize: "tiny" } },
516 - onClick: onClose
517 - })
518 - }), /* @__PURE__ */ react.createElement(_elementor_ui.CardMedia, {
519 - component: "img",
520 - image: assetUrl,
521 - alt: "",
522 - sx: {
523 - width: "100%",
524 - aspectRatio: "16 / 9"
525 - }
526 - }), /* @__PURE__ */ react.createElement(_elementor_ui.CardContent, null, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
527 - variant: "body2",
528 - color: "text.secondary"
529 - }, content)), /* @__PURE__ */ react.createElement(_elementor_ui.CardActions, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ react.createElement(CtaButton, {
530 - href: ctaUrl,
531 - onClick: onCtaClick
532 - }))));
533 - }
534 -
535 -//#endregion
536 -//#region packages/packages/libs/editor-ui/src/components/promotions/promotion-popover.tsx
537 - var PromotionPopover = ({ children, open, placement = "right", slotProps, anchorRef, ...cardProps }) => {
538 - const anchorEl = anchorRef?.current;
539 - const defaultSlotProps = { popper: {
540 - ...anchorEl && { anchorEl },
541 - modifiers: [{
542 - name: "offset",
543 - options: { offset: anchorRef ? [0, 4] : [0, 10] }
544 - }]
545 - } };
546 - return /* @__PURE__ */ react.createElement(_elementor_ui.Infotip, {
547 - placement,
548 - arrow: false,
549 - content: /* @__PURE__ */ react.createElement(PopoverAlert, { ...cardProps }),
550 - open,
551 - slotProps: slotProps || defaultSlotProps
552 - }, children);
553 - };
554 - function PopoverAlert({ title, content, ctaUrl, ctaText, onClose, onCtaClick }) {
555 - return /* @__PURE__ */ react.createElement(_elementor_ui.ClickAwayListener, {
556 - disableReactTree: true,
557 - mouseEvent: "onMouseDown",
558 - touchEvent: "onTouchStart",
559 - onClickAway: onClose
560 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Alert, {
561 - variant: "standard",
562 - color: "promotion",
563 - icon: /* @__PURE__ */ react.createElement(_elementor_icons.CrownFilledIcon, { fontSize: "tiny" }),
564 - onClose,
565 - onMouseDown: (e) => e.stopPropagation(),
566 - role: "dialog",
567 - "aria-label": "promotion-popover-title",
568 - action: /* @__PURE__ */ react.createElement(_elementor_ui.AlertAction, {
569 - variant: "contained",
570 - color: "promotion",
571 - href: ctaUrl,
572 - target: "_blank",
573 - rel: "noopener noreferrer",
574 - onClick: onCtaClick
575 - }, ctaText),
576 - sx: { maxWidth: 296 }
577 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Box, { sx: {
578 - gap: .5,
579 - display: "flex",
580 - flexDirection: "column"
581 - } }, /* @__PURE__ */ react.createElement(_elementor_ui.AlertTitle, null, title), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "body2" }, content))));
582 - }
583 -
584 -//#endregion
585 -//#region packages/packages/libs/editor-ui/src/components/promotions/promotion-chip.tsx
586 - var PromotionChip = react.forwardRef(({ ...props }, ref) => {
587 - return /* @__PURE__ */ react.createElement(_elementor_ui.Chip, {
588 - "aria-label": "Promotion chip",
589 - ref,
590 - size: "tiny",
591 - color: "promotion",
592 - variant: "standard",
593 - icon: /* @__PURE__ */ react.createElement(_elementor_icons.CrownFilledIcon, null),
594 - sx: {
595 - ml: 1,
596 - width: "20px",
597 - "& .MuiChip-label": { display: "none" }
598 - },
599 - ...props
600 - });
601 - });
602 -
603 -//#endregion
604 -//#region packages/packages/libs/editor-ui/src/components/promotions/promotion-alert.tsx
605 - var PromotionAlert = ({ message, upgradeUrl, onCtaClick }) => /* @__PURE__ */ react.createElement(_elementor_ui.Alert, {
606 - variant: "standard",
607 - color: "promotion",
608 - icon: false,
609 - role: "dialog",
610 - "aria-label": "promotion-alert",
611 - size: "small",
612 - sx: {
613 - m: 2,
614 - mt: 1,
615 - pt: .5,
616 - pb: .5
617 - }
618 - }, message, /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
619 - size: "tiny",
620 - variant: "text",
621 - color: "promotion",
622 - target: "_blank",
623 - href: upgradeUrl,
624 - rel: "noopener noreferrer",
625 - startIcon: /* @__PURE__ */ react.createElement(_elementor_icons.CrownFilledIcon, { fontSize: "tiny" }),
626 - onClick: onCtaClick
627 - }, (0, _wordpress_i18n.__)("Upgrade now", "elementor")));
628 -
629 -//#endregion
630 -//#region packages/packages/libs/editor-ui/src/components/floating-bar.tsx
631 - var FloatingBarContainer = (0, _elementor_ui.styled)("span")`
632 - display: contents;
633 -
634 - .MuiFloatingActionBar-popper:has( .MuiFloatingActionBar-actions:empty ) {
635 - display: none;
636 - }
637 -
638 - .MuiFloatingActionBar-popper {
639 - z-index: 1000;
640 - }
641 -`;
642 - var FloatingActionsContext = (0, react.createContext)(null);
643 - function FloatingActionsBar({ actions, children }) {
644 - const [open, setOpen] = (0, react.useState)(false);
645 - return /* @__PURE__ */ react.createElement(FloatingActionsContext.Provider, { value: {
646 - open,
647 - setOpen
648 - } }, /* @__PURE__ */ react.createElement(FloatingBarContainer, null, /* @__PURE__ */ react.createElement(_elementor_ui.UnstableFloatingActionBar, {
649 - actions,
650 - open: open || void 0
651 - }, children)));
652 - }
653 - function useFloatingActionsBar() {
654 - const context = (0, react.useContext)(FloatingActionsContext);
655 - if (!context) throw new Error("useFloatingActions must be used within a FloatingActionsBar");
656 - return context;
657 - }
658 -
659 -//#endregion
660 -//#region packages/packages/libs/editor-ui/src/components/file-upload/file-upload-dropzone.tsx
661 - var cardSx$1 = {
662 - minHeight: 152,
663 - border: "2px dashed",
664 - borderColor: "divider",
665 - borderRadius: 1
666 - };
667 - var FileUploadDropzone = ({ onFileSelected, allowedFileTypes, accept, regionLabel, primaryLabel, secondaryLabel, helperText }) => {
668 - const fileInputRef = (0, react.useRef)(null);
669 - const { getDropZoneProps } = (0, _elementor_ui.useUnstableDropZone)({
670 - allowedFileTypes,
671 - onChange: ({ valid }) => {
672 - if (valid[0]) onFileSelected(valid[0]);
673 - }
674 - });
675 - const dropZoneProps = getDropZoneProps();
676 - const handleBrowseClick = () => fileInputRef.current?.click();
677 - const handleFileInputChange = (event) => {
678 - const file = event.target.files?.[0];
679 - if (file) onFileSelected(file);
680 - event.target.value = "";
681 - };
682 - return /* @__PURE__ */ react.createElement(_elementor_ui.Card, {
683 - variant: "outlined",
684 - role: "region",
685 - "aria-label": regionLabel ?? (0, _wordpress_i18n.__)("File dropzone", "elementor"),
686 - onDrop: dropZoneProps.onDrop,
687 - onDragEnter: dropZoneProps.onDragEnter,
688 - onDragLeave: dropZoneProps.onDragLeave,
689 - onDragOver: dropZoneProps.onDragOver,
690 - sx: cardSx$1
691 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
692 - alignItems: "center",
693 - spacing: 1,
694 - padding: 3
695 - }, /* @__PURE__ */ react.createElement(_elementor_icons.UploadIcon, { fontSize: "medium" }), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
696 - direction: "row",
697 - spacing: .5,
698 - alignItems: "center"
699 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Link, {
700 - component: "button",
701 - type: "button",
702 - underline: "always",
703 - onClick: handleBrowseClick
704 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
705 - variant: "body1",
706 - component: "span"
707 - }, primaryLabel ?? (0, _wordpress_i18n.__)("Upload file", "elementor"))), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, { variant: "body1" }, secondaryLabel ?? (0, _wordpress_i18n.__)("or drag and drop", "elementor"))), helperText ? /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
708 - variant: "caption",
709 - color: "text.secondary"
710 - }, helperText) : null), /* @__PURE__ */ react.createElement("input", {
711 - ref: fileInputRef,
712 - type: "file",
713 - accept,
714 - hidden: true,
715 - onChange: handleFileInputChange
716 - }));
717 - };
718 -
719 -//#endregion
720 -//#region packages/packages/libs/editor-ui/src/components/file-upload/file-upload-row.tsx
721 - var BYTES_PER_KILOBYTE = 1024;
722 - var cardSx = {
723 - minHeight: 152,
724 - border: "2px dashed",
725 - borderColor: "divider",
726 - borderRadius: 1
727 - };
728 - var formatFileSize = (sizeInBytes) => {
729 - return `${Math.max(1, Math.round(sizeInBytes / BYTES_PER_KILOBYTE))}kb`;
730 - };
731 - var FileUploadRow = ({ file, onRemove, statusLabel }) => {
732 - return /* @__PURE__ */ react.createElement(_elementor_ui.Card, {
733 - variant: "outlined",
734 - sx: cardSx
735 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
736 - direction: "row",
737 - alignItems: "center",
738 - justifyContent: "space-between",
739 - padding: 2,
740 - spacing: 2,
741 - minHeight: 152
742 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
743 - direction: "column",
744 - spacing: .5,
745 - minWidth: 0,
746 - flex: 1
747 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
748 - variant: "subtitle2",
749 - noWrap: true
750 - }, file.name), /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
751 - variant: "caption",
752 - color: "text.secondary",
753 - noWrap: true
754 - }, formatFileSize(file.size), " · ", statusLabel ?? (0, _wordpress_i18n.__)("Complete", "elementor"))), /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, {
755 - size: "small",
756 - onClick: onRemove,
757 - "aria-label": (0, _wordpress_i18n.__)("Remove file", "elementor")
758 - }, /* @__PURE__ */ react.createElement(_elementor_icons.XIcon, { fontSize: "inherit" }))));
759 - };
760 -
761 -//#endregion
762 -//#region packages/packages/libs/editor-ui/src/components/popover/body.tsx
763 - var SECTION_PADDING_INLINE = 32;
764 - var DEFAULT_POPOVER_HEIGHT = 348;
765 - var FALLBACK_POPOVER_WIDTH = 220;
766 - var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) => {
767 - return /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
768 - display: "flex",
769 - flexDirection: "column",
770 - sx: {
771 - height,
772 - overflow: "hidden",
773 - width: `${width ? width - SECTION_PADDING_INLINE : FALLBACK_POPOVER_WIDTH}px`,
774 - maxWidth: 496
775 - },
776 - id
777 - }, children);
778 - };
779 -
780 -//#endregion
781 -//#region packages/packages/libs/editor-ui/src/contexts/section-context.tsx
782 - var FALLBACK_SECTION_WIDTH = 320;
783 - var SectionRefContext = (0, react.createContext)(null);
784 - var useSectionRef = () => (0, react.useContext)(SectionRefContext);
785 - var useSectionWidth = () => {
786 - return useSectionRef()?.current?.offsetWidth ?? FALLBACK_SECTION_WIDTH;
787 - };
788 -
789 -//#endregion
790 -//#region packages/packages/libs/editor-ui/src/components/popover/section-popover-body.tsx
791 - var SectionPopoverBody = (props) => {
792 - const sectionWidth = useSectionWidth();
793 - return /* @__PURE__ */ react.createElement(PopoverBody, {
794 - ...props,
795 - width: sectionWidth
796 - });
797 - };
798 -
799 -//#endregion
800 -//#region packages/packages/libs/editor-ui/src/components/popover/header.tsx
801 - var SIZE$1 = "tiny";
802 - var PopoverHeader = ({ title, onClose, icon, actions }) => {
803 - return /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
804 - direction: "row",
805 - alignItems: "center",
806 - pl: 2,
807 - pr: 1,
808 - py: 1.5,
809 - maxHeight: 36,
810 - sx: { columnGap: .5 }
811 - }, icon, /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
812 - variant: "subtitle2",
813 - sx: {
814 - fontSize: "12px",
815 - mt: .25
816 - }
817 - }, title), /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
818 - direction: "row",
819 - sx: { ml: "auto" }
820 - }, actions, /* @__PURE__ */ react.createElement(_elementor_ui.CloseButton, {
821 - slotProps: { icon: { fontSize: SIZE$1 } },
822 - sx: { ml: "auto" },
823 - onClick: onClose
824 - })));
825 - };
826 -
827 -//#endregion
828 -//#region packages/node_modules/@tanstack/virtual-core/dist/esm/utils.js
829 - function memo(getDeps, fn, opts) {
830 - let deps = opts.initialDeps ?? [];
831 - let result;
832 - let isInitial = true;
833 - function memoizedFunction() {
834 - var _a;
835 - var _b;
836 - var _c;
837 - let depTime;
838 - if (opts.key && ((_a = opts.debug) == null ? void 0 : _a.call(opts))) depTime = Date.now();
839 - const newDeps = getDeps();
840 - if (!(newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep))) return result;
841 - deps = newDeps;
842 - let resultTime;
843 - if (opts.key && ((_b = opts.debug) == null ? void 0 : _b.call(opts))) resultTime = Date.now();
844 - result = fn(...newDeps);
845 - if (opts.key && ((_c = opts.debug) == null ? void 0 : _c.call(opts))) {
846 - const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
847 - const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
848 - const resultFpsPercentage = resultEndTime / 16;
849 - const pad = (str, num) => {
850 - str = String(str);
851 - while (str.length < num) str = " " + str;
852 - return str;
853 - };
854 - console.info(`%c⏱ ${pad(resultEndTime, 5)} /${pad(depEndTime, 5)} ms`, `
855 - font-size: .6rem;
856 - font-weight: bold;
857 - color: hsl(${Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120))}deg 100% 31%);`, opts == null ? void 0 : opts.key);
858 - }
859 - if ((opts == null ? void 0 : opts.onChange) && !(isInitial && opts.skipInitialOnChange)) opts.onChange(result);
860 - isInitial = false;
861 - return result;
862 - }
863 - memoizedFunction.updateDeps = (newDeps) => {
864 - deps = newDeps;
865 - };
866 - return memoizedFunction;
867 - }
868 - function notUndefined(value, msg) {
869 - if (value === void 0) throw new Error(`Unexpected undefined${msg ? `: ${msg}` : ""}`);
870 - else return value;
871 - }
872 - var approxEqual = (a, b) => Math.abs(a - b) < 1.01;
873 - var debounce = (targetWindow, fn, ms) => {
874 - let timeoutId;
875 - return function(...args) {
876 - targetWindow.clearTimeout(timeoutId);
877 - timeoutId = targetWindow.setTimeout(() => fn.apply(this, args), ms);
878 - };
879 - };
880 -
881 -//#endregion
882 -//#region packages/node_modules/@tanstack/virtual-core/dist/esm/index.js
883 - var getRect = (element) => {
884 - const { offsetWidth, offsetHeight } = element;
885 - return {
886 - width: offsetWidth,
887 - height: offsetHeight
888 - };
889 - };
890 - var defaultKeyExtractor = (index) => index;
891 - var defaultRangeExtractor = (range) => {
892 - const start = Math.max(range.startIndex - range.overscan, 0);
893 - const end = Math.min(range.endIndex + range.overscan, range.count - 1);
894 - const arr = [];
895 - for (let i = start; i <= end; i++) arr.push(i);
896 - return arr;
897 - };
898 - var observeElementRect = (instance, cb) => {
899 - const element = instance.scrollElement;
900 - if (!element) return;
901 - const targetWindow = instance.targetWindow;
902 - if (!targetWindow) return;
903 - const handler = (rect) => {
904 - const { width, height } = rect;
905 - cb({
906 - width: Math.round(width),
907 - height: Math.round(height)
908 - });
909 - };
910 - handler(getRect(element));
911 - if (!targetWindow.ResizeObserver) return () => {};
912 - const observer = new targetWindow.ResizeObserver((entries) => {
913 - const run = () => {
914 - const entry = entries[0];
915 - if (entry == null ? void 0 : entry.borderBoxSize) {
916 - const box = entry.borderBoxSize[0];
917 - if (box) {
918 - handler({
919 - width: box.inlineSize,
920 - height: box.blockSize
921 - });
922 - return;
923 - }
924 - }
925 - handler(getRect(element));
926 - };
927 - instance.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
928 - });
929 - observer.observe(element, { box: "border-box" });
930 - return () => {
931 - observer.unobserve(element);
932 - };
933 - };
934 - var addEventListenerOptions = { passive: true };
935 - var supportsScrollend = typeof window == "undefined" ? true : "onscrollend" in window;
936 - var observeElementOffset = (instance, cb) => {
937 - const element = instance.scrollElement;
938 - if (!element) return;
939 - const targetWindow = instance.targetWindow;
940 - if (!targetWindow) return;
941 - let offset = 0;
942 - const fallback = instance.options.useScrollendEvent && supportsScrollend ? () => void 0 : debounce(targetWindow, () => {
943 - cb(offset, false);
944 - }, instance.options.isScrollingResetDelay);
945 - const createHandler = (isScrolling) => () => {
946 - const { horizontal, isRtl } = instance.options;
947 - offset = horizontal ? element["scrollLeft"] * (isRtl && -1 || 1) : element["scrollTop"];
948 - fallback();
949 - cb(offset, isScrolling);
950 - };
951 - const handler = createHandler(true);
952 - const endHandler = createHandler(false);
953 - element.addEventListener("scroll", handler, addEventListenerOptions);
954 - const registerScrollendEvent = instance.options.useScrollendEvent && supportsScrollend;
955 - if (registerScrollendEvent) element.addEventListener("scrollend", endHandler, addEventListenerOptions);
956 - return () => {
957 - element.removeEventListener("scroll", handler);
958 - if (registerScrollendEvent) element.removeEventListener("scrollend", endHandler);
959 - };
960 - };
961 - var measureElement = (element, entry, instance) => {
962 - if (entry == null ? void 0 : entry.borderBoxSize) {
963 - const box = entry.borderBoxSize[0];
964 - if (box) return Math.round(box[instance.options.horizontal ? "inlineSize" : "blockSize"]);
965 - }
966 - return element[instance.options.horizontal ? "offsetWidth" : "offsetHeight"];
967 - };
968 - var elementScroll = (offset, { adjustments = 0, behavior }, instance) => {
969 - var _a;
970 - var _b;
971 - const toOffset = offset + adjustments;
972 - (_b = (_a = instance.scrollElement) == null ? void 0 : _a.scrollTo) == null || _b.call(_a, {
973 - [instance.options.horizontal ? "left" : "top"]: toOffset,
974 - behavior
975 - });
976 - };
977 - var Virtualizer = class {
978 - constructor(opts) {
979 - this.unsubs = [];
980 - this.scrollElement = null;
981 - this.targetWindow = null;
982 - this.isScrolling = false;
983 - this.scrollState = null;
984 - this.measurementsCache = [];
985 - this.itemSizeCache = /* @__PURE__ */ new Map();
986 - this.laneAssignments = /* @__PURE__ */ new Map();
987 - this.pendingMeasuredCacheIndexes = [];
988 - this.prevLanes = void 0;
989 - this.lanesChangedFlag = false;
990 - this.lanesSettling = false;
991 - this.scrollRect = null;
992 - this.scrollOffset = null;
993 - this.scrollDirection = null;
994 - this.scrollAdjustments = 0;
995 - this.elementsCache = /* @__PURE__ */ new Map();
996 - this.now = () => {
997 - var _a;
998 - var _b;
999 - var _c;
1000 - return ((_c = (_b = (_a = this.targetWindow) == null ? void 0 : _a.performance) == null ? void 0 : _b.now) == null ? void 0 : _c.call(_b)) ?? Date.now();
1001 - };
1002 - this.observer = /* @__PURE__ */ (() => {
1003 - let _ro = null;
1004 - const get = () => {
1005 - if (_ro) return _ro;
1006 - if (!this.targetWindow || !this.targetWindow.ResizeObserver) return null;
1007 - return _ro = new this.targetWindow.ResizeObserver((entries) => {
1008 - entries.forEach((entry) => {
1009 - const run = () => {
1010 - const node = entry.target;
1011 - const index = this.indexFromElement(node);
1012 - if (!node.isConnected) {
1013 - this.observer.unobserve(node);
1014 - return;
1015 - }
1016 - if (this.shouldMeasureDuringScroll(index)) this.resizeItem(index, this.options.measureElement(node, entry, this));
1017 - };
1018 - this.options.useAnimationFrameWithResizeObserver ? requestAnimationFrame(run) : run();
1019 - });
1020 - });
1021 - };
1022 - return {
1023 - disconnect: () => {
1024 - var _a;
1025 - (_a = get()) == null || _a.disconnect();
1026 - _ro = null;
1027 - },
1028 - observe: (target) => {
1029 - var _a;
1030 - return (_a = get()) == null ? void 0 : _a.observe(target, { box: "border-box" });
1031 - },
1032 - unobserve: (target) => {
1033 - var _a;
1034 - return (_a = get()) == null ? void 0 : _a.unobserve(target);
1035 - }
1036 - };
1037 - })();
1038 - this.range = null;
1039 - this.setOptions = (opts2) => {
1040 - Object.entries(opts2).forEach(([key, value]) => {
1041 - if (typeof value === "undefined") delete opts2[key];
1042 - });
1043 - this.options = {
1044 - debug: false,
1045 - initialOffset: 0,
1046 - overscan: 1,
1047 - paddingStart: 0,
1048 - paddingEnd: 0,
1049 - scrollPaddingStart: 0,
1050 - scrollPaddingEnd: 0,
1051 - horizontal: false,
1052 - getItemKey: defaultKeyExtractor,
1053 - rangeExtractor: defaultRangeExtractor,
1054 - onChange: () => {},
1055 - measureElement,
1056 - initialRect: {
1057 - width: 0,
1058 - height: 0
1059 - },
1060 - scrollMargin: 0,
1061 - gap: 0,
1062 - indexAttribute: "data-index",
1063 - initialMeasurementsCache: [],
1064 - lanes: 1,
1065 - isScrollingResetDelay: 150,
1066 - enabled: true,
1067 - isRtl: false,
1068 - useScrollendEvent: false,
1069 - useAnimationFrameWithResizeObserver: false,
1070 - laneAssignmentMode: "estimate",
1071 - ...opts2
1072 - };
1073 - };
1074 - this.notify = (sync) => {
1075 - var _a;
1076 - var _b;
1077 - (_b = (_a = this.options).onChange) == null || _b.call(_a, this, sync);
1078 - };
1079 - this.maybeNotify = memo(() => {
1080 - this.calculateRange();
1081 - return [
1082 - this.isScrolling,
1083 - this.range ? this.range.startIndex : null,
1084 - this.range ? this.range.endIndex : null
1085 - ];
1086 - }, (isScrolling) => {
1087 - this.notify(isScrolling);
1088 - }, {
1089 - key: "maybeNotify",
1090 - debug: () => this.options.debug,
1091 - initialDeps: [
1092 - this.isScrolling,
1093 - this.range ? this.range.startIndex : null,
1094 - this.range ? this.range.endIndex : null
1095 - ]
1096 - });
1097 - this.cleanup = () => {
1098 - this.unsubs.filter(Boolean).forEach((d) => d());
1099 - this.unsubs = [];
1100 - this.observer.disconnect();
1101 - if (this.rafId != null && this.targetWindow) {
1102 - this.targetWindow.cancelAnimationFrame(this.rafId);
1103 - this.rafId = null;
1104 - }
1105 - this.scrollState = null;
1106 - this.scrollElement = null;
1107 - this.targetWindow = null;
1108 - };
1109 - this._didMount = () => {
1110 - return () => {
1111 - this.cleanup();
1112 - };
1113 - };
1114 - this._willUpdate = () => {
1115 - var _a;
1116 - const scrollElement = this.options.enabled ? this.options.getScrollElement() : null;
1117 - if (this.scrollElement !== scrollElement) {
1118 - this.cleanup();
1119 - if (!scrollElement) {
1120 - this.maybeNotify();
1121 - return;
1122 - }
1123 - this.scrollElement = scrollElement;
1124 - if (this.scrollElement && "ownerDocument" in this.scrollElement) this.targetWindow = this.scrollElement.ownerDocument.defaultView;
1125 - else this.targetWindow = ((_a = this.scrollElement) == null ? void 0 : _a.window) ?? null;
1126 - this.elementsCache.forEach((cached) => {
1127 - this.observer.observe(cached);
1128 - });
1129 - this.unsubs.push(this.options.observeElementRect(this, (rect) => {
1130 - this.scrollRect = rect;
1131 - this.maybeNotify();
1132 - }));
1133 - this.unsubs.push(this.options.observeElementOffset(this, (offset, isScrolling) => {
1134 - this.scrollAdjustments = 0;
1135 - this.scrollDirection = isScrolling ? this.getScrollOffset() < offset ? "forward" : "backward" : null;
1136 - this.scrollOffset = offset;
1137 - this.isScrolling = isScrolling;
1138 - if (this.scrollState) this.scheduleScrollReconcile();
1139 - this.maybeNotify();
1140 - }));
1141 - this._scrollToOffset(this.getScrollOffset(), {
1142 - adjustments: void 0,
1143 - behavior: void 0
1144 - });
1145 - }
1146 - };
1147 - this.rafId = null;
1148 - this.getSize = () => {
1149 - if (!this.options.enabled) {
1150 - this.scrollRect = null;
1151 - return 0;
1152 - }
1153 - this.scrollRect = this.scrollRect ?? this.options.initialRect;
1154 - return this.scrollRect[this.options.horizontal ? "width" : "height"];
1155 - };
1156 - this.getScrollOffset = () => {
1157 - if (!this.options.enabled) {
1158 - this.scrollOffset = null;
1159 - return 0;
1160 - }
1161 - this.scrollOffset = this.scrollOffset ?? (typeof this.options.initialOffset === "function" ? this.options.initialOffset() : this.options.initialOffset);
1162 - return this.scrollOffset;
1163 - };
1164 - this.getFurthestMeasurement = (measurements, index) => {
1165 - const furthestMeasurementsFound = /* @__PURE__ */ new Map();
1166 - const furthestMeasurements = /* @__PURE__ */ new Map();
1167 - for (let m = index - 1; m >= 0; m--) {
1168 - const measurement = measurements[m];
1169 - if (furthestMeasurementsFound.has(measurement.lane)) continue;
1170 - const previousFurthestMeasurement = furthestMeasurements.get(measurement.lane);
1171 - if (previousFurthestMeasurement == null || measurement.end > previousFurthestMeasurement.end) furthestMeasurements.set(measurement.lane, measurement);
1172 - else if (measurement.end < previousFurthestMeasurement.end) furthestMeasurementsFound.set(measurement.lane, true);
1173 - if (furthestMeasurementsFound.size === this.options.lanes) break;
1174 - }
1175 - return furthestMeasurements.size === this.options.lanes ? Array.from(furthestMeasurements.values()).sort((a, b) => {
1176 - if (a.end === b.end) return a.index - b.index;
1177 - return a.end - b.end;
1178 - })[0] : void 0;
1179 - };
1180 - this.getMeasurementOptions = memo(() => [
1181 - this.options.count,
1182 - this.options.paddingStart,
1183 - this.options.scrollMargin,
1184 - this.options.getItemKey,
1185 - this.options.enabled,
1186 - this.options.lanes,
1187 - this.options.laneAssignmentMode
1188 - ], (count, paddingStart, scrollMargin, getItemKey, enabled, lanes, laneAssignmentMode) => {
1189 - if (this.prevLanes !== void 0 && this.prevLanes !== lanes) this.lanesChangedFlag = true;
1190 - this.prevLanes = lanes;
1191 - this.pendingMeasuredCacheIndexes = [];
1192 - return {
1193 - count,
1194 - paddingStart,
1195 - scrollMargin,
1196 - getItemKey,
1197 - enabled,
1198 - lanes,
1199 - laneAssignmentMode
1200 - };
1201 - }, { key: false });
1202 - this.getMeasurements = memo(() => [this.getMeasurementOptions(), this.itemSizeCache], ({ count, paddingStart, scrollMargin, getItemKey, enabled, lanes, laneAssignmentMode }, itemSizeCache) => {
1203 - if (!enabled) {
1204 - this.measurementsCache = [];
1205 - this.itemSizeCache.clear();
1206 - this.laneAssignments.clear();
1207 - return [];
1208 - }
1209 - if (this.laneAssignments.size > count) {
1210 - for (const index of this.laneAssignments.keys()) if (index >= count) this.laneAssignments.delete(index);
1211 - }
1212 - if (this.lanesChangedFlag) {
1213 - this.lanesChangedFlag = false;
1214 - this.lanesSettling = true;
1215 - this.measurementsCache = [];
1216 - this.itemSizeCache.clear();
1217 - this.laneAssignments.clear();
1218 - this.pendingMeasuredCacheIndexes = [];
1219 - }
1220 - if (this.measurementsCache.length === 0 && !this.lanesSettling) {
1221 - this.measurementsCache = this.options.initialMeasurementsCache;
1222 - this.measurementsCache.forEach((item) => {
1223 - this.itemSizeCache.set(item.key, item.size);
1224 - });
1225 - }
1226 - const min = this.lanesSettling ? 0 : this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
1227 - this.pendingMeasuredCacheIndexes = [];
1228 - if (this.lanesSettling && this.measurementsCache.length === count) this.lanesSettling = false;
1229 - const measurements = this.measurementsCache.slice(0, min);
1230 - const laneLastIndex = new Array(lanes).fill(void 0);
1231 - for (let m = 0; m < min; m++) {
1232 - const item = measurements[m];
1233 - if (item) laneLastIndex[item.lane] = m;
1234 - }
1235 - for (let i = min; i < count; i++) {
1236 - const key = getItemKey(i);
1237 - const cachedLane = this.laneAssignments.get(i);
1238 - let lane;
1239 - let start;
1240 - const shouldCacheLane = laneAssignmentMode === "estimate" || itemSizeCache.has(key);
1241 - if (cachedLane !== void 0 && this.options.lanes > 1) {
1242 - lane = cachedLane;
1243 - const prevIndex = laneLastIndex[lane];
1244 - const prevInLane = prevIndex !== void 0 ? measurements[prevIndex] : void 0;
1245 - start = prevInLane ? prevInLane.end + this.options.gap : paddingStart + scrollMargin;
1246 - } else {
1247 - const furthestMeasurement = this.options.lanes === 1 ? measurements[i - 1] : this.getFurthestMeasurement(measurements, i);
1248 - start = furthestMeasurement ? furthestMeasurement.end + this.options.gap : paddingStart + scrollMargin;
1249 - lane = furthestMeasurement ? furthestMeasurement.lane : i % this.options.lanes;
1250 - if (this.options.lanes > 1 && shouldCacheLane) this.laneAssignments.set(i, lane);
1251 - }
1252 - const measuredSize = itemSizeCache.get(key);
1253 - const size = typeof measuredSize === "number" ? measuredSize : this.options.estimateSize(i);
1254 - const end = start + size;
1255 - measurements[i] = {
1256 - index: i,
1257 - start,
1258 - size,
1259 - end,
1260 - key,
1261 - lane
1262 - };
1263 - laneLastIndex[lane] = i;
1264 - }
1265 - this.measurementsCache = measurements;
1266 - return measurements;
1267 - }, {
1268 - key: "getMeasurements",
1269 - debug: () => this.options.debug
1270 - });
1271 - this.calculateRange = memo(() => [
1272 - this.getMeasurements(),
1273 - this.getSize(),
1274 - this.getScrollOffset(),
1275 - this.options.lanes
1276 - ], (measurements, outerSize, scrollOffset, lanes) => {
1277 - return this.range = measurements.length > 0 && outerSize > 0 ? calculateRange({
1278 - measurements,
1279 - outerSize,
1280 - scrollOffset,
1281 - lanes
1282 - }) : null;
1283 - }, {
1284 - key: "calculateRange",
1285 - debug: () => this.options.debug
1286 - });
1287 - this.getVirtualIndexes = memo(() => {
1288 - let startIndex = null;
1289 - let endIndex = null;
1290 - const range = this.calculateRange();
1291 - if (range) {
1292 - startIndex = range.startIndex;
1293 - endIndex = range.endIndex;
1294 - }
1295 - this.maybeNotify.updateDeps([
1296 - this.isScrolling,
1297 - startIndex,
1298 - endIndex
1299 - ]);
1300 - return [
1301 - this.options.rangeExtractor,
1302 - this.options.overscan,
1303 - this.options.count,
1304 - startIndex,
1305 - endIndex
1306 - ];
1307 - }, (rangeExtractor, overscan, count, startIndex, endIndex) => {
1308 - return startIndex === null || endIndex === null ? [] : rangeExtractor({
1309 - startIndex,
1310 - endIndex,
1311 - overscan,
1312 - count
1313 - });
1314 - }, {
1315 - key: "getVirtualIndexes",
1316 - debug: () => this.options.debug
1317 - });
1318 - this.indexFromElement = (node) => {
1319 - const attributeName = this.options.indexAttribute;
1320 - const indexStr = node.getAttribute(attributeName);
1321 - if (!indexStr) {
1322 - console.warn(`Missing attribute name '${attributeName}={index}' on measured element.`);
1323 - return -1;
1324 - }
1325 - return parseInt(indexStr, 10);
1326 - };
1327 - this.shouldMeasureDuringScroll = (index) => {
1328 - var _a;
1329 - if (!this.scrollState || this.scrollState.behavior !== "smooth") return true;
1330 - const scrollIndex = this.scrollState.index ?? ((_a = this.getVirtualItemForOffset(this.scrollState.lastTargetOffset)) == null ? void 0 : _a.index);
1331 - if (scrollIndex !== void 0 && this.range) {
1332 - const bufferSize = Math.max(this.options.overscan, Math.ceil((this.range.endIndex - this.range.startIndex) / 2));
1333 - const minIndex = Math.max(0, scrollIndex - bufferSize);
1334 - const maxIndex = Math.min(this.options.count - 1, scrollIndex + bufferSize);
1335 - return index >= minIndex && index <= maxIndex;
1336 - }
1337 - return true;
1338 - };
1339 - this.measureElement = (node) => {
1340 - if (!node) {
1341 - this.elementsCache.forEach((cached, key2) => {
1342 - if (!cached.isConnected) {
1343 - this.observer.unobserve(cached);
1344 - this.elementsCache.delete(key2);
1345 - }
1346 - });
1347 - return;
1348 - }
1349 - const index = this.indexFromElement(node);
1350 - const key = this.options.getItemKey(index);
1351 - const prevNode = this.elementsCache.get(key);
1352 - if (prevNode !== node) {
1353 - if (prevNode) this.observer.unobserve(prevNode);
1354 - this.observer.observe(node);
1355 - this.elementsCache.set(key, node);
1356 - }
1357 - if ((!this.isScrolling || this.scrollState) && this.shouldMeasureDuringScroll(index)) this.resizeItem(index, this.options.measureElement(node, void 0, this));
1358 - };
1359 - this.resizeItem = (index, size) => {
1360 - var _a;
1361 - const item = this.measurementsCache[index];
1362 - if (!item) return;
1363 - const delta = size - (this.itemSizeCache.get(item.key) ?? item.size);
1364 - if (delta !== 0) {
1365 - if (((_a = this.scrollState) == null ? void 0 : _a.behavior) !== "smooth" && (this.shouldAdjustScrollPositionOnItemSizeChange !== void 0 ? this.shouldAdjustScrollPositionOnItemSizeChange(item, delta, this) : item.start < this.getScrollOffset() + this.scrollAdjustments)) {
1366 - if (this.options.debug) console.info("correction", delta);
1367 - this._scrollToOffset(this.getScrollOffset(), {
1368 - adjustments: this.scrollAdjustments += delta,
1369 - behavior: void 0
1370 - });
1371 - }
1372 - this.pendingMeasuredCacheIndexes.push(item.index);
1373 - this.itemSizeCache = new Map(this.itemSizeCache.set(item.key, size));
1374 - this.notify(false);
1375 - }
1376 - };
1377 - this.getVirtualItems = memo(() => [this.getVirtualIndexes(), this.getMeasurements()], (indexes, measurements) => {
1378 - const virtualItems = [];
1379 - for (let k = 0, len = indexes.length; k < len; k++) {
1380 - const measurement = measurements[indexes[k]];
1381 - virtualItems.push(measurement);
1382 - }
1383 - return virtualItems;
1384 - }, {
1385 - key: "getVirtualItems",
1386 - debug: () => this.options.debug
1387 - });
1388 - this.getVirtualItemForOffset = (offset) => {
1389 - const measurements = this.getMeasurements();
1390 - if (measurements.length === 0) return;
1391 - return notUndefined(measurements[findNearestBinarySearch(0, measurements.length - 1, (index) => notUndefined(measurements[index]).start, offset)]);
1392 - };
1393 - this.getMaxScrollOffset = () => {
1394 - if (!this.scrollElement) return 0;
1395 - if ("scrollHeight" in this.scrollElement) return this.options.horizontal ? this.scrollElement.scrollWidth - this.scrollElement.clientWidth : this.scrollElement.scrollHeight - this.scrollElement.clientHeight;
1396 - else {
1397 - const doc = this.scrollElement.document.documentElement;
1398 - return this.options.horizontal ? doc.scrollWidth - this.scrollElement.innerWidth : doc.scrollHeight - this.scrollElement.innerHeight;
1399 - }
1400 - };
1401 - this.getOffsetForAlignment = (toOffset, align, itemSize = 0) => {
1402 - if (!this.scrollElement) return 0;
1403 - const size = this.getSize();
1404 - const scrollOffset = this.getScrollOffset();
1405 - if (align === "auto") align = toOffset >= scrollOffset + size ? "end" : "start";
1406 - if (align === "center") toOffset += (itemSize - size) / 2;
1407 - else if (align === "end") toOffset -= size;
1408 - const maxOffset = this.getMaxScrollOffset();
1409 - return Math.max(Math.min(maxOffset, toOffset), 0);
1410 - };
1411 - this.getOffsetForIndex = (index, align = "auto") => {
1412 - index = Math.max(0, Math.min(index, this.options.count - 1));
1413 - const size = this.getSize();
1414 - const scrollOffset = this.getScrollOffset();
1415 - const item = this.measurementsCache[index];
1416 - if (!item) return;
1417 - if (align === "auto") if (item.end >= scrollOffset + size - this.options.scrollPaddingEnd) align = "end";
1418 - else if (item.start <= scrollOffset + this.options.scrollPaddingStart) align = "start";
1419 - else return [scrollOffset, align];
1420 - if (align === "end" && index === this.options.count - 1) return [this.getMaxScrollOffset(), align];
1421 - const toOffset = align === "end" ? item.end + this.options.scrollPaddingEnd : item.start - this.options.scrollPaddingStart;
1422 - return [this.getOffsetForAlignment(toOffset, align, item.size), align];
1423 - };
1424 - this.scrollToOffset = (toOffset, { align = "start", behavior = "auto" } = {}) => {
1425 - const offset = this.getOffsetForAlignment(toOffset, align);
1426 - const now = this.now();
1427 - this.scrollState = {
1428 - index: null,
1429 - align,
1430 - behavior,
1431 - startedAt: now,
1432 - lastTargetOffset: offset,
1433 - stableFrames: 0
1434 - };
1435 - this._scrollToOffset(offset, {
1436 - adjustments: void 0,
1437 - behavior
1438 - });
1439 - this.scheduleScrollReconcile();
1440 - };
1441 - this.scrollToIndex = (index, { align: initialAlign = "auto", behavior = "auto" } = {}) => {
1442 - index = Math.max(0, Math.min(index, this.options.count - 1));
1443 - const offsetInfo = this.getOffsetForIndex(index, initialAlign);
1444 - if (!offsetInfo) return;
1445 - const [offset, align] = offsetInfo;
1446 - const now = this.now();
1447 - this.scrollState = {
1448 - index,
1449 - align,
1450 - behavior,
1451 - startedAt: now,
1452 - lastTargetOffset: offset,
1453 - stableFrames: 0
1454 - };
1455 - this._scrollToOffset(offset, {
1456 - adjustments: void 0,
1457 - behavior
1458 - });
1459 - this.scheduleScrollReconcile();
1460 - };
1461 - this.scrollBy = (delta, { behavior = "auto" } = {}) => {
1462 - const offset = this.getScrollOffset() + delta;
1463 - const now = this.now();
1464 - this.scrollState = {
1465 - index: null,
1466 - align: "start",
1467 - behavior,
1468 - startedAt: now,
1469 - lastTargetOffset: offset,
1470 - stableFrames: 0
1471 - };
1472 - this._scrollToOffset(offset, {
1473 - adjustments: void 0,
1474 - behavior
1475 - });
1476 - this.scheduleScrollReconcile();
1477 - };
1478 - this.getTotalSize = () => {
1479 - var _a;
1480 - const measurements = this.getMeasurements();
1481 - let end;
1482 - if (measurements.length === 0) end = this.options.paddingStart;
1483 - else if (this.options.lanes === 1) end = ((_a = measurements[measurements.length - 1]) == null ? void 0 : _a.end) ?? 0;
1484 - else {
1485 - const endByLane = Array(this.options.lanes).fill(null);
1486 - let endIndex = measurements.length - 1;
1487 - while (endIndex >= 0 && endByLane.some((val) => val === null)) {
1488 - const item = measurements[endIndex];
1489 - if (endByLane[item.lane] === null) endByLane[item.lane] = item.end;
1490 - endIndex--;
1491 - }
1492 - end = Math.max(...endByLane.filter((val) => val !== null));
1493 - }
1494 - return Math.max(end - this.options.scrollMargin + this.options.paddingEnd, 0);
1495 - };
1496 - this._scrollToOffset = (offset, { adjustments, behavior }) => {
1497 - this.options.scrollToFn(offset, {
1498 - behavior,
1499 - adjustments
1500 - }, this);
1501 - };
1502 - this.measure = () => {
1503 - this.itemSizeCache = /* @__PURE__ */ new Map();
1504 - this.laneAssignments = /* @__PURE__ */ new Map();
1505 - this.notify(false);
1506 - };
1507 - this.setOptions(opts);
1508 - }
1509 - scheduleScrollReconcile() {
1510 - if (!this.targetWindow) {
1511 - this.scrollState = null;
1512 - return;
1513 - }
1514 - if (this.rafId != null) return;
1515 - this.rafId = this.targetWindow.requestAnimationFrame(() => {
1516 - this.rafId = null;
1517 - this.reconcileScroll();
1518 - });
1519 - }
1520 - reconcileScroll() {
1521 - if (!this.scrollState) return;
1522 - if (!this.scrollElement) return;
1523 - if (this.now() - this.scrollState.startedAt > 5e3) {
1524 - this.scrollState = null;
1525 - return;
1526 - }
1527 - const offsetInfo = this.scrollState.index != null ? this.getOffsetForIndex(this.scrollState.index, this.scrollState.align) : void 0;
1528 - const targetOffset = offsetInfo ? offsetInfo[0] : this.scrollState.lastTargetOffset;
1529 - const STABLE_FRAMES = 1;
1530 - const targetChanged = targetOffset !== this.scrollState.lastTargetOffset;
1531 - if (!targetChanged && approxEqual(targetOffset, this.getScrollOffset())) {
1532 - this.scrollState.stableFrames++;
1533 - if (this.scrollState.stableFrames >= STABLE_FRAMES) {
1534 - this.scrollState = null;
1535 - return;
1536 - }
1537 - } else {
1538 - this.scrollState.stableFrames = 0;
1539 - if (targetChanged) {
1540 - this.scrollState.lastTargetOffset = targetOffset;
1541 - this.scrollState.behavior = "auto";
1542 - this._scrollToOffset(targetOffset, {
1543 - adjustments: void 0,
1544 - behavior: "auto"
1545 - });
1546 - }
1547 - }
1548 - this.scheduleScrollReconcile();
1549 - }
1550 - };
1551 - var findNearestBinarySearch = (low, high, getCurrentValue, value) => {
1552 - while (low <= high) {
1553 - const middle = (low + high) / 2 | 0;
1554 - const currentValue = getCurrentValue(middle);
1555 - if (currentValue < value) low = middle + 1;
1556 - else if (currentValue > value) high = middle - 1;
1557 - else return middle;
1558 - }
1559 - if (low > 0) return low - 1;
1560 - else return 0;
1561 - };
1562 - function calculateRange({ measurements, outerSize, scrollOffset, lanes }) {
1563 - const lastIndex = measurements.length - 1;
1564 - const getOffset = (index) => measurements[index].start;
1565 - if (measurements.length <= lanes) return {
1566 - startIndex: 0,
1567 - endIndex: lastIndex
1568 - };
1569 - let startIndex = findNearestBinarySearch(0, lastIndex, getOffset, scrollOffset);
1570 - let endIndex = startIndex;
1571 - if (lanes === 1) while (endIndex < lastIndex && measurements[endIndex].end < scrollOffset + outerSize) endIndex++;
1572 - else if (lanes > 1) {
1573 - const endPerLane = Array(lanes).fill(0);
1574 - while (endIndex < lastIndex && endPerLane.some((pos) => pos < scrollOffset + outerSize)) {
1575 - const item = measurements[endIndex];
1576 - endPerLane[item.lane] = item.end;
1577 - endIndex++;
1578 - }
1579 - const startPerLane = Array(lanes).fill(scrollOffset + outerSize);
1580 - while (startIndex >= 0 && startPerLane.some((pos) => pos >= scrollOffset)) {
1581 - const item = measurements[startIndex];
1582 - startPerLane[item.lane] = item.start;
1583 - startIndex--;
1584 - }
1585 - startIndex = Math.max(0, startIndex - startIndex % lanes);
1586 - endIndex = Math.min(lastIndex, endIndex + (lanes - 1 - endIndex % lanes));
1587 - }
1588 - return {
1589 - startIndex,
1590 - endIndex
1591 - };
1592 - }
1593 -
1594 -//#endregion
1595 -//#region packages/node_modules/@tanstack/react-virtual/dist/esm/index.js
1596 - var useIsomorphicLayoutEffect = typeof document !== "undefined" ? react$1.useLayoutEffect : react$1.useEffect;
1597 - function useVirtualizerBase({ useFlushSync = true, ...options }) {
1598 - const rerender = react$1.useReducer(() => ({}), {})[1];
1599 - const resolvedOptions = {
1600 - ...options,
1601 - onChange: (instance2, sync) => {
1602 - var _a;
1603 - if (useFlushSync && sync) (0, react_dom.flushSync)(rerender);
1604 - else rerender();
1605 - (_a = options.onChange) == null || _a.call(options, instance2, sync);
1606 - }
1607 - };
1608 - const [instance] = react$1.useState(() => new Virtualizer(resolvedOptions));
1609 - instance.setOptions(resolvedOptions);
1610 - useIsomorphicLayoutEffect(() => {
1611 - return instance._didMount();
1612 - }, []);
1613 - useIsomorphicLayoutEffect(() => {
1614 - return instance._willUpdate();
1615 - });
1616 - return instance;
1617 - }
1618 - function useVirtualizer(options) {
1619 - return useVirtualizerBase({
1620 - observeElementRect,
1621 - observeElementOffset,
1622 - scrollToFn: elementScroll,
1623 - ...options
1624 - });
1625 - }
1626 -
1627 -//#endregion
1628 -//#region packages/packages/libs/editor-ui/src/components/popover/menu-list.tsx
1629 - var ITEM_HEIGHT = 32;
1630 - var LIST_ITEMS_BUFFER = 6;
1631 - var MENU_LIST_PADDING_TOP = 8;
1632 - var menuSubHeaderAbsoluteStyling = (start) => ({
1633 - position: "absolute",
1634 - transform: `translateY(${start + MENU_LIST_PADDING_TOP}px)`
1635 - });
1636 - var getAdjacentStickyIndices = (stickyIndices, range) => {
1637 - const previousTwoStickyIndices = stickyIndices.filter((stickyIndex) => stickyIndex < range.startIndex).slice(-2);
1638 - const nextTwoStickyIndices = stickyIndices.filter((stickyIndex) => stickyIndex > range.endIndex).slice(0, 2);
1639 - return [...previousTwoStickyIndices, ...nextTwoStickyIndices];
1640 - };
1641 - var PopoverMenuList = ({ items, onSelect, onClose, selectedValue, itemStyle, onChange, "data-testid": dataTestId, menuItemContentTemplate, categoryItemContentTemplate, noResultsComponent, menuListTemplate: CustomMenuList }) => {
1642 - const containerRef = (0, react.useRef)(null);
1643 - const scrollTop = useScrollTop({ containerRef });
1644 - const theme = (0, _elementor_ui.useTheme)();
1645 - const MenuListComponent = CustomMenuList || StyledMenuList;
1646 - const stickyIndices = (0, react.useMemo)(() => items.reduce((categoryIndices, item, index) => {
1647 - if (item.type === "category") categoryIndices.push(index);
1648 - return categoryIndices;
1649 - }, []), [items]);
1650 - const getActiveItemIndices = (range) => {
1651 - const visibleAndStickyIndexes = [];
1652 - for (let i = range.startIndex; i <= range.endIndex; i++) visibleAndStickyIndexes.push(i);
1653 - getAdjacentStickyIndices(stickyIndices, range).forEach((stickyIndex) => {
1654 - if (!visibleAndStickyIndexes.includes(stickyIndex)) visibleAndStickyIndexes.push(stickyIndex);
1655 - });
1656 - return visibleAndStickyIndexes.sort((a, b) => a - b);
1657 - };
1658 - const onChangeCallback = ({ getVirtualIndexes }) => {
1659 - const visibleItems = getVirtualIndexes().map((index) => items[index]);
1660 - onChange?.(visibleItems);
1661 - };
1662 - const virtualizer = useVirtualizer({
1663 - count: items.length,
1664 - getScrollElement: () => containerRef.current,
1665 - estimateSize: () => 32,
1666 - overscan: LIST_ITEMS_BUFFER,
1667 - rangeExtractor: getActiveItemIndices,
1668 - onChange: onChangeCallback
1669 - });
1670 - (0, react.useEffect)(() => {
1671 - onChangeCallback(virtualizer);
1672 - }, [items]);
1673 - useScrollToSelected({
1674 - selectedValue,
1675 - items,
1676 - virtualizer
1677 - });
1678 - const virtualItems = virtualizer.getVirtualItems();
1679 - return /* @__PURE__ */ react.createElement(_elementor_ui.Box, {
1680 - ref: containerRef,
1681 - sx: {
1682 - height: "100%",
1683 - overflowY: "auto"
1684 - }
1685 - }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ react.createElement(MenuListComponent, {
1686 - role: "listbox",
1687 - style: { height: `${virtualizer.getTotalSize()}px` },
1688 - "data-testid": dataTestId
1689 - }, virtualItems.map((virtualRow) => {
1690 - const item = items[virtualRow.index];
1691 - const isLast = virtualRow.index === items.length - 1;
1692 - const isFirst = items[0]?.type === "category" ? virtualRow.index === 1 : virtualRow.index === 0;
1693 - const isSelected = selectedValue === item.value;
1694 - const tabIndexFallback = !selectedValue ? 0 : -1;
1695 - if (!item) return null;
1696 - if (item.type === "category") {
1697 - const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
1698 - return /* @__PURE__ */ react.createElement(_elementor_ui.MenuSubheader, {
1699 - key: virtualRow.key,
1700 - style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
1701 - sx: {
1702 - fontWeight: "400",
1703 - color: "text.tertiary"
1704 - }
1705 - }, categoryItemContentTemplate ? categoryItemContentTemplate(item) : item.label || item.value);
1706 - }
1707 - const isDisabled = item.disabled;
1708 - return /* @__PURE__ */ react.createElement(_elementor_ui.ListItem, {
1709 - key: virtualRow.key,
1710 - role: "option",
1711 - "aria-selected": isSelected,
1712 - "aria-disabled": isDisabled,
1713 - onClick: isDisabled ? void 0 : (e) => {
1714 - if (e.target.closest("button")) return;
1715 - onSelect(item.value);
1716 - onClose();
1717 - },
1718 - onKeyDown: (event) => {
1719 - if (event.key === "Enter" && !isDisabled) {
1720 - onSelect(item.value);
1721 - onClose();
1722 - }
1723 - if (event.key === "ArrowDown" && isLast) {
1724 - event.preventDefault();
1725 - event.stopPropagation();
1726 - }
1727 - if (event.key === "ArrowUp" && isFirst) {
1728 - event.preventDefault();
1729 - event.stopPropagation();
1730 - }
1731 - },
1732 - tabIndex: isSelected ? 0 : tabIndexFallback,
1733 - sx: {
1734 - transform: `translateY(${virtualRow.start + MENU_LIST_PADDING_TOP}px)`,
1735 - ...theme.typography.caption,
1736 - ...itemStyle ? itemStyle(item) : {}
1737 - }
1738 - }, menuItemContentTemplate ? menuItemContentTemplate(item) : item.label || item.value);
1739 - })));
1740 - };
1741 - var StyledMenuList = (0, _elementor_ui.styled)(_elementor_ui.MenuList)(({ theme }) => ({
1742 - "& > li": {
1743 - height: 32,
1744 - width: "100%",
1745 - display: "flex",
1746 - alignItems: "center"
1747 - },
1748 - "& > [role=\"option\"]": {
1749 - lineHeight: "inherit",
1750 - padding: theme.spacing(.75, 2, .75, 4),
1751 - "&:hover, &:focus": { backgroundColor: theme.palette.action.hover },
1752 - "&[aria-selected=\"true\"]": { backgroundColor: theme.palette.action.selected },
1753 - "&[aria-disabled=\"true\"]": { color: theme.palette.text.disabled },
1754 - cursor: "pointer",
1755 - textOverflow: "ellipsis",
1756 - position: "absolute",
1757 - top: 0,
1758 - left: 0
1759 - },
1760 - width: "100%",
1761 - position: "relative"
1762 - }));
1763 -
1764 -//#endregion
1765 -//#region packages/packages/libs/editor-ui/src/components/popover/popover-action.tsx
1766 - var SIZE = "tiny";
1767 - function PopoverAction({ title, visible = true, icon: Icon, content: PopoverContent }) {
1768 - const { popupState, triggerProps, popoverProps } = useFloatingActionsPopover();
1769 - if (!visible) return null;
1770 - return /* @__PURE__ */ react.createElement(react.Fragment, null, /* @__PURE__ */ react.createElement(_elementor_ui.Tooltip, {
1771 - placement: "top",
1772 - title
1773 - }, /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, {
1774 - "aria-label": title,
1775 - size: SIZE,
1776 - ...triggerProps
1777 - }, /* @__PURE__ */ react.createElement(Icon, { fontSize: SIZE }))), /* @__PURE__ */ react.createElement(_elementor_ui.Popover, {
1778 - disableScrollLock: true,
1779 - anchorOrigin: {
1780 - vertical: "bottom",
1781 - horizontal: "right"
1782 - },
1783 - transformOrigin: {
1784 - vertical: "top",
1785 - horizontal: "right"
1786 - },
1787 - PaperProps: { sx: { my: 2.5 } },
1788 - ...popoverProps
1789 - }, /* @__PURE__ */ react.createElement(PopoverContent, { close: popupState.close })));
1790 - }
1791 - function useFloatingActionsPopover() {
1792 - const { setOpen } = useFloatingActionsBar();
1793 - const popupState = (0, _elementor_ui.usePopupState)({ variant: "popover" });
1794 - const triggerProps = (0, _elementor_ui.bindTrigger)(popupState);
1795 - const popoverProps = (0, _elementor_ui.bindPopover)(popupState);
1796 - const onClick = (e) => {
1797 - triggerProps.onClick(e);
1798 - setOpen(true);
1799 - };
1800 - const onClose = () => {
1801 - popoverProps.onClose();
1802 - setOpen(false);
1803 - };
1804 - const close = () => {
1805 - popupState.close();
1806 - setOpen(false);
1807 - };
1808 - return {
1809 - popupState: {
1810 - ...popupState,
1811 - close
1812 - },
1813 - triggerProps: {
1814 - ...triggerProps,
1815 - onClick
1816 - },
1817 - popoverProps: {
1818 - ...popoverProps,
1819 - onClose
1820 - }
1821 - };
1822 - }
1823 -
1824 -//#endregion
1825 -//#region packages/packages/libs/editor-ui/src/components/save-changes-dialog.tsx
1826 - var TITLE_ID$1 = "save-changes-dialog";
1827 - var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ react.createElement(_elementor_ui.Dialog, {
1828 - open: true,
1829 - onClose,
1830 - "aria-labelledby": TITLE_ID$1,
1831 - maxWidth: "xs"
1832 - }, children);
1833 - var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ react.createElement(_elementor_ui.DialogTitle, {
1834 - id: TITLE_ID$1,
1835 - display: "flex",
1836 - alignItems: "center",
1837 - gap: 1,
1838 - sx: {
1839 - lineHeight: 1,
1840 - justifyContent: "space-between"
1841 - }
1842 - }, /* @__PURE__ */ react.createElement(_elementor_ui.Stack, {
1843 - direction: "row",
1844 - alignItems: "center",
1845 - gap: 1
1846 - }, /* @__PURE__ */ react.createElement(_elementor_icons.AlertTriangleFilledIcon, { color: "secondary" }), children), onClose && /* @__PURE__ */ react.createElement(_elementor_ui.IconButton, {
1847 - onClick: onClose,
1848 - size: "small"
1849 - }, /* @__PURE__ */ react.createElement(_elementor_icons.XIcon, null)));
1850 - var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ react.createElement(_elementor_ui.DialogContent, null, children);
1851 - var SaveChangesDialogContentText = (props) => /* @__PURE__ */ react.createElement(_elementor_ui.DialogContentText, {
1852 - variant: "body2",
1853 - color: "textPrimary",
1854 - display: "flex",
1855 - flexDirection: "column",
1856 - ...props
1857 - });
1858 - var SaveChangesDialogActions = ({ actions }) => {
1859 - const [isConfirming, setIsConfirming] = (0, react.useState)(false);
1860 - const { cancel, confirm, discard } = actions;
1861 - const onConfirm = async () => {
1862 - setIsConfirming(true);
1863 - await confirm.action();
1864 - setIsConfirming(false);
1865 - };
1866 - return /* @__PURE__ */ react.createElement(_elementor_ui.DialogActions, null, cancel && /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
1867 - variant: "text",
1868 - color: "secondary",
1869 - onClick: cancel.action
1870 - }, cancel.label), discard && /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
1871 - variant: "text",
1872 - color: "secondary",
1873 - onClick: discard.action
1874 - }, discard.label), /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
1875 - variant: "contained",
1876 - color: "secondary",
1877 - onClick: onConfirm,
1878 - loading: isConfirming
1879 - }, confirm.label));
1880 - };
1881 - SaveChangesDialog.Title = SaveChangesDialogTitle;
1882 - SaveChangesDialog.Content = SaveChangesDialogContent;
1883 - SaveChangesDialog.ContentText = SaveChangesDialogContentText;
1884 - SaveChangesDialog.Actions = SaveChangesDialogActions;
1885 - var useDialog = () => {
1886 - const [isOpen, setIsOpen] = (0, react.useState)(false);
1887 - const open = () => setIsOpen(true);
1888 - const close = () => setIsOpen(false);
1889 - return {
1890 - isOpen,
1891 - open,
1892 - close
1893 - };
1894 - };
1895 -
1896 -//#endregion
1897 -//#region packages/packages/libs/editor-ui/src/components/confirmation-dialog.tsx
1898 - var TITLE_ID = "confirmation-dialog";
1899 - var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ react.createElement(_elementor_ui.Dialog, {
1900 - open,
1901 - onClose,
1902 - "aria-labelledby": TITLE_ID,
1903 - maxWidth: "sm"
1904 - }, children);
1905 - var ConfirmationDialogTitle = ({ children, icon: Icon = _elementor_icons.AlertOctagonFilledIcon, iconColor = "error" }) => /* @__PURE__ */ react.createElement(_elementor_ui.DialogTitle, {
1906 - id: TITLE_ID,
1907 - display: "flex",
1908 - alignItems: "center",
1909 - gap: 1,
1910 - sx: { lineHeight: 1 }
1911 - }, /* @__PURE__ */ react.createElement(Icon, { color: iconColor }), children);
1912 - var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ react.createElement(_elementor_ui.DialogContent, { sx: { mt: 2 } }, children);
1913 - var ConfirmationDialogContentText = (props) => /* @__PURE__ */ react.createElement(_elementor_ui.DialogContentText, {
1914 - variant: "body2",
1915 - color: "secondary",
1916 - ...props
1917 - });
1918 - var ConfirmationDialogActions = ({ onClose, onConfirm, cancelLabel, confirmLabel, color = "error", onSuppressMessage, suppressLabel = (0, _wordpress_i18n.__)("Don't show this again", "elementor") }) => {
1919 - const [dontShowAgain, setDontShowAgain] = (0, react.useState)(false);
1920 - const handleConfirm = () => {
1921 - if (dontShowAgain && onSuppressMessage) onSuppressMessage();
1922 - onConfirm();
1923 - };
1924 - return /* @__PURE__ */ react.createElement(_elementor_ui.DialogActions, { sx: onSuppressMessage ? {
1925 - justifyContent: "space-between",
1926 - alignItems: "center"
1927 - } : void 0 }, onSuppressMessage && /* @__PURE__ */ react.createElement(_elementor_ui.FormControlLabel, {
1928 - control: /* @__PURE__ */ react.createElement(_elementor_ui.Checkbox, {
1929 - checked: dontShowAgain,
1930 - onChange: (event) => setDontShowAgain(event.target.checked),
1931 - size: "medium",
1932 - color: "secondary"
1933 - }),
1934 - label: /* @__PURE__ */ react.createElement(_elementor_ui.Typography, {
1935 - variant: "body2",
1936 - color: "text.secondary"
1937 - }, suppressLabel)
1938 - }), /* @__PURE__ */ react.createElement("div", null, /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
1939 - color: "secondary",
1940 - onClick: onClose
1941 - }, cancelLabel ?? (0, _wordpress_i18n.__)("Not now", "elementor")), /* @__PURE__ */ react.createElement(_elementor_ui.Button, {
1942 - autoFocus: true,
1943 - variant: "contained",
1944 - color,
1945 - onClick: handleConfirm,
1946 - sx: { ml: 1 }
1947 - }, confirmLabel ?? (0, _wordpress_i18n.__)("Delete", "elementor"))));
1948 - };
1949 - ConfirmationDialog.Title = ConfirmationDialogTitle;
1950 - ConfirmationDialog.Content = ConfirmationDialogContent;
1951 - ConfirmationDialog.ContentText = ConfirmationDialogContentText;
1952 - ConfirmationDialog.Actions = ConfirmationDialogActions;
1953 -
1954 -//#endregion
1955 -//#region packages/packages/libs/editor-ui/src/hooks/use-editable.ts
1956 - var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
1957 - const [isEditing, setIsEditing] = (0, react.useState)(false);
1958 - const [error, setError] = (0, react.useState)(null);
1959 - const ref = useSelection(isEditing);
1960 - const isDirty = (newValue) => newValue !== value;
1961 - const openEditMode = () => {
1962 - setIsEditing(true);
1963 - };
1964 - const closeEditMode = () => {
1965 - setError(null);
1966 - onError?.(null);
1967 - setIsEditing(false);
1968 - };
1969 - const submit = (newValue) => {
1970 - if (!isDirty(newValue)) {
1971 - closeEditMode();
1972 - return;
1973 - }
1974 - if (!error) try {
1975 - onSubmit(newValue);
1976 - } finally {
1977 - closeEditMode();
1978 - }
1979 - };
1980 - const onChange = (event) => {
1981 - const { innerText: newValue } = event.target;
1982 - if (validation) {
1983 - const updatedError = isDirty(newValue) ? validation(newValue) : null;
1984 - setError(updatedError);
1985 - onError?.(updatedError);
1986 - }
1987 - };
1988 - const handleKeyDown = (event) => {
1989 - event.stopPropagation();
1990 - if (["Escape"].includes(event.key)) return closeEditMode();
1991 - if (["Enter"].includes(event.key)) {
1992 - event.preventDefault();
1993 - if (!error) ref.current?.blur();
1994 - }
1995 - };
1996 - const handleClick = (event) => {
1997 - if (isEditing) event.stopPropagation();
1998 - onClick?.(event);
1999 - };
2000 - const handleBlur = () => {
2001 - if (error) {
2002 - closeEditMode();
2003 - return;
2004 - }
2005 - submit(ref.current.innerText);
2006 - };
2007 - const listeners = {
2008 - onClick: handleClick,
2009 - onKeyDown: handleKeyDown,
2010 - onInput: onChange,
2011 - onBlur: handleBlur
2012 - };
2013 - const attributes = {
2014 - value,
2015 - role: "textbox",
2016 - contentEditable: isEditing,
2017 - ...isEditing && { suppressContentEditableWarning: true }
2018 - };
2019 - return {
2020 - ref,
2021 - isEditing,
2022 - openEditMode,
2023 - closeEditMode,
2024 - value,
2025 - error,
2026 - getProps: () => ({
2027 - ...listeners,
2028 - ...attributes
2029 - })
2030 - };
2031 - };
2032 - var useSelection = (isEditing) => {
2033 - const ref = (0, react.useRef)(null);
2034 - (0, react.useEffect)(() => {
2035 - if (isEditing) selectAll(ref.current);
2036 - }, [isEditing]);
2037 - return ref;
2038 - };
2039 - var selectAll = (el) => {
2040 - const selection = getSelection();
2041 - if (!selection || !el) return;
2042 - const range = document.createRange();
2043 - range.selectNodeContents(el);
2044 - selection.removeAllRanges();
2045 - selection.addRange(range);
2046 - };
2047 -
2048 -//#endregion
2049 -//#region packages/packages/libs/editor-ui/src/index.ts
2050 - var src_exports = /* @__PURE__ */ __exportAll({
2051 - CollapseIcon: () => CollapseIcon,
2052 - CollapsibleContent: () => CollapsibleContent,
2053 - ConfirmationDialog: () => ConfirmationDialog,
2054 - CtaButton: () => CtaButton,
2055 - EditableField: () => EditableField,
2056 - EllipsisWithTooltip: () => EllipsisWithTooltip,
2057 - FileUploadDropzone: () => FileUploadDropzone,
2058 - FileUploadRow: () => FileUploadRow,
2059 - FloatingActionsBar: () => FloatingActionsBar,
2060 - Form: () => Form,
2061 - GlobalDialog: () => GlobalDialog,
2062 - ITEM_HEIGHT: () => 32,
2063 - InfoAlert: () => InfoAlert,
2064 - InfoTipCard: () => InfoTipCard,
2065 - IntroductionModal: () => IntroductionModal,
2066 - MenuItemInfotip: () => MenuItemInfotip,
2067 - MenuListItem: () => MenuListItem,
2068 - PopoverAction: () => PopoverAction,
2069 - PopoverBody: () => PopoverBody,
2070 - PopoverHeader: () => PopoverHeader,
2071 - PopoverMenuList: () => PopoverMenuList,
2072 - PromotionAlert: () => PromotionAlert,
2073 - PromotionChip: () => PromotionChip,
2074 - PromotionInfotip: () => PromotionInfotip,
2075 - PromotionPopover: () => PromotionPopover,
2076 - SaveChangesDialog: () => SaveChangesDialog,
2077 - SearchField: () => SearchField,
2078 - SectionPopoverBody: () => SectionPopoverBody,
2079 - SectionRefContext: () => SectionRefContext,
2080 - StyledMenuList: () => StyledMenuList,
2081 - ThemeProvider: () => ThemeProvider,
2082 - WarningInfotip: () => WarningInfotip,
2083 - closeDialog: () => closeDialog,
2084 - getCollapsibleValue: () => getCollapsibleValue,
2085 - openDialog: () => openDialog,
2086 - useCanvasClickHandler: () => useCanvasClickHandler,
2087 - useDialog: () => useDialog,
2088 - useEditable: () => useEditable,
2089 - useFloatingActionsBar: () => useFloatingActionsBar,
2090 - useSectionWidth: () => useSectionWidth,
2091 - useTextFieldAutoSelect: () => useTextFieldAutoSelect
2092 - });
2093 -
2094 -//#endregion
2095 -//#region \0elementor-package-library-entry
2096 - (window.elementorV2 = window.elementorV2 || {}).editorUi = src_exports;
2097 -
2098 -//#endregion
2099 -})(elementorV2.icons, elementorV2.ui, React, wp.i18n, elementorV2.editorV1Adapters, ReactDOM);
2100 -window.elementorV2.editorUi?.init?.();
2101 -//# sourceMappingURL=editor-ui.js.map
1 +/*! For license information please see editor-ui.js.LICENSE.txt */
2 +!function(){"use strict";var e={react:function(e){e.exports=window.React},"@elementor/ui":function(e){e.exports=window.elementorV2.ui}},t={};function r(o){var n=t[o];if(void 0!==n)return n.exports;var i=t[o]={exports:{}};return e[o](i,i.exports,r),i.exports}r.d=function(e,t){for(var o in t)r.o(t,o)&&!r.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:t[o]})},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var o={};!function(){r.r(o),r.d(o,{EllipsisWithTooltip:function(){return n}});var e=r("react"),t=r("@elementor/ui"),n=({maxWidth:r,title:o,as:n,...l})=>{const[c,s]=a();return s?e.createElement(t.Tooltip,{title:o,placement:"top"},e.createElement(i,{maxWidth:r,ref:c,as:n,...l},o)):e.createElement(i,{maxWidth:r,ref:c,as:n,...l},o)},i=e.forwardRef((({maxWidth:r,as:o=t.Box,...n},i)=>e.createElement(o,{ref:i,position:"relative",...n,style:{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",maxWidth:r}}))),a=()=>{const[t,r]=(0,e.useState)(null),[o,n]=(0,e.useState)(!1);return(0,e.useEffect)((()=>{const e=new ResizeObserver((([{target:e}])=>{n(e.scrollWidth>e.clientWidth)}));return t&&e.observe(t),()=>{e.disconnect()}}),[t]),[r,o]}}(),(window.elementorV2=window.elementorV2||{}).editorUi=o}();