npm - @elementor/editor-ui - Versions diffs - 3.35.0-341 → 3.35.0-342 - Mend

@elementor/editor-ui 3.35.0-341 → 3.35.0-342

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/dist/index.d.mts +8 -2
package/dist/index.d.ts +8 -2
package/dist/index.js +70 -56
package/dist/index.mjs +17 -4
package/package.json +2 -2
package/src/components/collapse-icon.tsx +12 -0
package/src/index.ts +1 -0

package/dist/index.d.mts CHANGED Viewed

@@ -1,7 +1,13 @@
+import * as _emotion_styled from '@emotion/styled';
+import * as _mui_system from '@mui/system';
 import * as React$1 from 'react';
 import { ReactNode, PropsWithChildren, ReactElement } from 'react';
+import * as _mui_material from '@mui/material';
 import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, BoxProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
-import * as _emotion_styled from '@emotion/styled';
+declare const CollapseIcon: _emotion_styled.StyledComponent<Omit<_mui_material.SvgIconProps, "ref"> & React$1.RefAttributes<SVGSVGElement> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
+    open: boolean;
+}, {}, {}>;
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
     maxWidth?: React$1.CSSProperties['maxWidth'];
@@ -180,4 +186,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
-export { EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };
+export { CollapseIcon, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };

package/dist/index.d.ts CHANGED Viewed

@@ -1,7 +1,13 @@
+import * as _emotion_styled from '@emotion/styled';
+import * as _mui_system from '@mui/system';
 import * as React$1 from 'react';
 import { ReactNode, PropsWithChildren, ReactElement } from 'react';
+import * as _mui_material from '@mui/material';
 import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, BoxProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
-import * as _emotion_styled from '@emotion/styled';
+declare const CollapseIcon: _emotion_styled.StyledComponent<Omit<_mui_material.SvgIconProps, "ref"> & React$1.RefAttributes<SVGSVGElement> & _mui_system.MUIStyledCommonProps<_mui_material.Theme> & {
+    open: boolean;
+}, {}, {}>;
 type EllipsisWithTooltipProps<T extends React$1.ElementType> = {
     maxWidth?: React$1.CSSProperties['maxWidth'];
@@ -180,4 +186,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
-export { EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };
+export { CollapseIcon, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, SaveChangesDialog, SearchField, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable };

package/dist/index.js CHANGED Viewed

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  CollapseIcon: () => CollapseIcon,
   EditableField: () => EditableField,
   EllipsisWithTooltip: () => EllipsisWithTooltip,
   Form: () => Form,
@@ -55,10 +56,22 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
+// src/components/collapse-icon.tsx
+var import_icons = require("@elementor/icons");
+var import_ui = require("@elementor/ui");
+var CollapseIcon = (0, import_ui.styled)(import_icons.ChevronDownIcon, {
+  shouldForwardProp: (prop) => prop !== "open"
+})(({ theme, open }) => ({
+  transform: open ? "rotate(180deg)" : "rotate(0deg)",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.standard
+  })
+}));
 // src/components/ellipsis-with-tooltip.tsx
 var React = __toESM(require("react"));
 var import_react = require("react");
-var import_ui = require("@elementor/ui");
+var import_ui2 = require("@elementor/ui");
 var EllipsisWithTooltip = ({
   maxWidth,
   title,
@@ -67,12 +80,12 @@ var EllipsisWithTooltip = ({
 }) => {
   const [setRef, isOverflowing] = useIsOverflowing();
   if (isOverflowing) {
-    return /* @__PURE__ */ React.createElement(import_ui.Tooltip, { title, placement: "top" }, /* @__PURE__ */ React.createElement(Content, { maxWidth, ref: setRef, as, ...props }, title));
+    return /* @__PURE__ */ React.createElement(import_ui2.Tooltip, { title, placement: "top" }, /* @__PURE__ */ React.createElement(Content, { maxWidth, ref: setRef, as, ...props }, title));
   }
   return /* @__PURE__ */ React.createElement(Content, { maxWidth, ref: setRef, as, ...props }, title);
 };
 var Content = React.forwardRef(
-  ({ maxWidth, as: Component = import_ui.Box, ...props }, ref) => /* @__PURE__ */ React.createElement(
+  ({ maxWidth, as: Component = import_ui2.Box, ...props }, ref) => /* @__PURE__ */ React.createElement(
     Component,
     {
       ref,
@@ -102,13 +115,13 @@ var useIsOverflowing = () => {
 // src/components/editable-field.tsx
 var React2 = __toESM(require("react"));
 var import_react2 = require("react");
-var import_ui2 = require("@elementor/ui");
+var import_ui3 = require("@elementor/ui");
 var EditableField = (0, import_react2.forwardRef)(
   ({ value, error, as = "span", sx, ...props }, ref) => {
-    return /* @__PURE__ */ React2.createElement(import_ui2.Tooltip, { title: error, open: !!error, placement: "top" }, /* @__PURE__ */ React2.createElement(StyledField, { ref, component: as, ...props }, value));
+    return /* @__PURE__ */ React2.createElement(import_ui3.Tooltip, { title: error, open: !!error, placement: "top" }, /* @__PURE__ */ React2.createElement(StyledField, { ref, component: as, ...props }, value));
   }
 );
-var StyledField = (0, import_ui2.styled)(import_ui2.Box)`
+var StyledField = (0, import_ui3.styled)(import_ui3.Box)`
 	width: 100%;
 	&:focus {
 		outline: none;
@@ -118,25 +131,25 @@ var StyledField = (0, import_ui2.styled)(import_ui2.Box)`
 // src/components/introduction-modal.tsx
 var React3 = __toESM(require("react"));
 var import_react3 = require("react");
-var import_ui3 = require("@elementor/ui");
+var import_ui4 = require("@elementor/ui");
 var import_i18n = require("@wordpress/i18n");
 var IntroductionModal = ({ open, handleClose, title, children }) => {
   const [shouldShowAgain, setShouldShowAgain] = (0, import_react3.useState)(true);
-  return /* @__PURE__ */ React3.createElement(import_ui3.Dialog, { open, onClose: handleClose, maxWidth: "sm", TransitionComponent: Transition }, title && /* @__PURE__ */ React3.createElement(import_ui3.DialogHeader, { logo: false }, /* @__PURE__ */ React3.createElement(import_ui3.DialogTitle, null, title)), children, /* @__PURE__ */ React3.createElement(import_ui3.DialogActions, null, /* @__PURE__ */ React3.createElement(
-    import_ui3.FormControlLabel,
+  return /* @__PURE__ */ React3.createElement(import_ui4.Dialog, { open, onClose: handleClose, maxWidth: "sm", TransitionComponent: Transition }, title && /* @__PURE__ */ React3.createElement(import_ui4.DialogHeader, { logo: false }, /* @__PURE__ */ React3.createElement(import_ui4.DialogTitle, null, title)), children, /* @__PURE__ */ React3.createElement(import_ui4.DialogActions, null, /* @__PURE__ */ React3.createElement(
+    import_ui4.FormControlLabel,
     {
       sx: { marginRight: "auto" },
       control: /* @__PURE__ */ React3.createElement(
-        import_ui3.Checkbox,
+        import_ui4.Checkbox,
         {
           checked: !shouldShowAgain,
           onChange: () => setShouldShowAgain(!shouldShowAgain)
         }
       ),
-      label: /* @__PURE__ */ React3.createElement(import_ui3.Typography, { variant: "body2" }, (0, import_i18n.__)("Don't show this again", "elementor"))
+      label: /* @__PURE__ */ React3.createElement(import_ui4.Typography, { variant: "body2" }, (0, import_i18n.__)("Don't show this again", "elementor"))
     }
   ), /* @__PURE__ */ React3.createElement(
-    import_ui3.Button,
+    import_ui4.Button,
     {
       size: "medium",
       variant: "contained",
@@ -147,7 +160,7 @@ var IntroductionModal = ({ open, handleClose, title, children }) => {
   )));
 };
 var Transition = React3.forwardRef((props, ref) => /* @__PURE__ */ React3.createElement(
-  import_ui3.Fade,
+  import_ui4.Fade,
   {
     ref,
     ...props,
@@ -160,7 +173,7 @@ var Transition = React3.forwardRef((props, ref) => /* @__PURE__ */ React3.create
 // src/components/theme-provider.tsx
 var React4 = __toESM(require("react"));
-var import_ui4 = require("@elementor/ui");
+var import_ui5 = require("@elementor/ui");
 // src/hooks/use-color-scheme.ts
 var import_react4 = require("react");
@@ -189,22 +202,22 @@ function getV1ColorScheme() {
 var EDITOR_PALLETTE = "unstable";
 function ThemeProvider({ children }) {
   const colorScheme = useColorScheme();
-  return /* @__PURE__ */ React4.createElement(import_ui4.ThemeProvider, { colorScheme, palette: EDITOR_PALLETTE }, children);
+  return /* @__PURE__ */ React4.createElement(import_ui5.ThemeProvider, { colorScheme, palette: EDITOR_PALLETTE }, children);
 }
 // src/components/menu-item.tsx
 var React6 = __toESM(require("react"));
 var import_react5 = require("react");
-var import_ui6 = require("@elementor/ui");
+var import_ui7 = require("@elementor/ui");
 // src/components/info-alert.tsx
 var React5 = __toESM(require("react"));
-var import_icons = require("@elementor/icons");
-var import_ui5 = require("@elementor/ui");
+var import_icons2 = require("@elementor/icons");
+var import_ui6 = require("@elementor/ui");
 var InfoAlert = (props) => /* @__PURE__ */ React5.createElement(
-  import_ui5.Alert,
+  import_ui6.Alert,
   {
-    icon: /* @__PURE__ */ React5.createElement(import_icons.InfoCircleFilledIcon, { fontSize: "small", color: "secondary" }),
+    icon: /* @__PURE__ */ React5.createElement(import_icons2.InfoCircleFilledIcon, { fontSize: "small", color: "secondary" }),
     variant: "standard",
     color: "secondary",
     elevation: 0,
@@ -221,7 +234,7 @@ var MenuListItem = ({
   ...props
 }) => {
   return /* @__PURE__ */ React6.createElement(
-    import_ui6.MenuItem,
+    import_ui7.MenuItem,
     {
       dense: true,
       ...props,
@@ -230,7 +243,7 @@ var MenuListItem = ({
       }
     },
     /* @__PURE__ */ React6.createElement(
-      import_ui6.MenuItemText,
+      import_ui7.MenuItemText,
       {
         primary: children,
         primaryTypographyProps,
@@ -245,7 +258,7 @@ var MenuItemInfotip = (0, import_react5.forwardRef)(
       return /* @__PURE__ */ React6.createElement(React6.Fragment, null, children);
     }
     return /* @__PURE__ */ React6.createElement(
-      import_ui6.Infotip,
+      import_ui7.Infotip,
       {
         ref,
         placement: "right",
@@ -259,10 +272,10 @@ var MenuItemInfotip = (0, import_react5.forwardRef)(
 // src/components/infotip-card.tsx
 var React7 = __toESM(require("react"));
-var import_ui7 = require("@elementor/ui");
+var import_ui8 = require("@elementor/ui");
 var InfoTipCard = ({ content, svgIcon, learnMoreButton, ctaButton }) => {
-  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(
-    import_ui7.Button,
+  return /* @__PURE__ */ React7.createElement(import_ui8.Card, { elevation: 0, sx: { width: 320 } }, /* @__PURE__ */ React7.createElement(import_ui8.CardContent, { sx: { pb: 0 } }, /* @__PURE__ */ React7.createElement(import_ui8.Box, { display: "flex", alignItems: "start" }, /* @__PURE__ */ React7.createElement(import_ui8.SvgIcon, { fontSize: "tiny", sx: { mr: 0.5 } }, svgIcon), /* @__PURE__ */ React7.createElement(import_ui8.Typography, { variant: "body2" }, content, learnMoreButton && /* @__PURE__ */ React7.createElement(React7.Fragment, null, "\xA0", /* @__PURE__ */ React7.createElement(import_ui8.Link, { color: "info.main", href: learnMoreButton.href, target: "_blank" }, learnMoreButton.label))))), ctaButton && /* @__PURE__ */ React7.createElement(import_ui8.CardActions, { sx: { justifyContent: "flex-start" } }, /* @__PURE__ */ React7.createElement(
+    import_ui8.Button,
     {
       size: "small",
       color: "secondary",
@@ -277,11 +290,11 @@ var InfoTipCard = ({ content, svgIcon, learnMoreButton, ctaButton }) => {
 // src/components/warning-infotip.tsx
 var import_react6 = require("react");
 var React8 = __toESM(require("react"));
-var import_ui8 = require("@elementor/ui");
+var import_ui9 = require("@elementor/ui");
 var WarningInfotip = (0, import_react6.forwardRef)(
   ({ children, open, title, text, placement, width, offset, hasError = true }, ref) => {
     return /* @__PURE__ */ React8.createElement(
-      import_ui8.Infotip,
+      import_ui9.Infotip,
       {
         ref,
         open,
@@ -295,14 +308,14 @@ var WarningInfotip = (0, import_react6.forwardRef)(
         },
         arrow: false,
         content: /* @__PURE__ */ React8.createElement(
-          import_ui8.Alert,
+          import_ui9.Alert,
           {
             color: hasError ? "error" : "secondary",
             severity: "warning",
             variant: "standard",
             size: "small"
           },
-          title ? /* @__PURE__ */ React8.createElement(import_ui8.AlertTitle, null, title) : null,
+          title ? /* @__PURE__ */ React8.createElement(import_ui9.AlertTitle, null, title) : null,
           text
         )
       },
@@ -314,7 +327,7 @@ var WarningInfotip = (0, import_react6.forwardRef)(
 // src/components/global-dialog/components/global-dialog.tsx
 var import_react7 = require("react");
 var React9 = __toESM(require("react"));
-var import_ui9 = require("@elementor/ui");
+var import_ui10 = require("@elementor/ui");
 // src/components/global-dialog/subscribers.ts
 var currentDialogState = null;
@@ -348,14 +361,14 @@ var GlobalDialog = () => {
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ React9.createElement(ThemeProvider, null, /* @__PURE__ */ React9.createElement(import_ui9.Dialog, { role: "dialog", open: true, onClose: closeDialog, maxWidth: "sm", fullWidth: true }, content.component));
+  return /* @__PURE__ */ React9.createElement(ThemeProvider, null, /* @__PURE__ */ React9.createElement(import_ui10.Dialog, { role: "dialog", open: true, onClose: closeDialog, maxWidth: "sm", fullWidth: true }, content.component));
 };
 // src/components/search-field.tsx
 var React10 = __toESM(require("react"));
 var import_react8 = require("react");
-var import_icons2 = require("@elementor/icons");
-var import_ui10 = require("@elementor/ui");
+var import_icons3 = require("@elementor/icons");
+var import_ui11 = require("@elementor/ui");
 var import_i18n2 = require("@wordpress/i18n");
 var SIZE = "tiny";
 var SearchField = ({ value, onSearch, placeholder, id, sx }) => {
@@ -367,8 +380,8 @@ var SearchField = ({ value, onSearch, placeholder, id, sx }) => {
   const handleInputChange = (event) => {
     onSearch(event.target.value);
   };
-  return /* @__PURE__ */ React10.createElement(import_ui10.Box, { sx: { px: 2, pb: 1.5, ...sx } }, /* @__PURE__ */ React10.createElement(
-    import_ui10.TextField,
+  return /* @__PURE__ */ React10.createElement(import_ui11.Box, { sx: { px: 2, pb: 1.5, ...sx } }, /* @__PURE__ */ React10.createElement(
+    import_ui11.TextField,
     {
       autoFocus: true,
       fullWidth: true,
@@ -379,8 +392,8 @@ var SearchField = ({ value, onSearch, placeholder, id, sx }) => {
       onChange: handleInputChange,
       placeholder,
       InputProps: {
-        startAdornment: /* @__PURE__ */ React10.createElement(import_ui10.InputAdornment, { position: "start" }, /* @__PURE__ */ React10.createElement(import_icons2.SearchIcon, { fontSize: SIZE })),
-        endAdornment: value && /* @__PURE__ */ React10.createElement(import_ui10.IconButton, { size: SIZE, onClick: handleClear, "aria-label": (0, import_i18n2.__)("Clear", "elementor") }, /* @__PURE__ */ React10.createElement(import_icons2.XIcon, { color: "action", fontSize: SIZE }))
+        startAdornment: /* @__PURE__ */ React10.createElement(import_ui11.InputAdornment, { position: "start" }, /* @__PURE__ */ React10.createElement(import_icons3.SearchIcon, { fontSize: SIZE })),
+        endAdornment: value && /* @__PURE__ */ React10.createElement(import_ui11.IconButton, { size: SIZE, onClick: handleClear, "aria-label": (0, import_i18n2.__)("Clear", "elementor") }, /* @__PURE__ */ React10.createElement(import_icons3.XIcon, { color: "action", fontSize: SIZE }))
       }
     }
   ));
@@ -410,13 +423,13 @@ var Form = ({ children, onSubmit }) => {
 // src/components/popover/body.tsx
 var React12 = __toESM(require("react"));
-var import_ui11 = require("@elementor/ui");
+var import_ui12 = require("@elementor/ui");
 var SECTION_PADDING_INLINE = 32;
 var DEFAULT_POPOVER_HEIGHT = 348;
 var FALLBACK_POPOVER_WIDTH = 220;
 var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) => {
   return /* @__PURE__ */ React12.createElement(
-    import_ui11.Box,
+    import_ui12.Box,
     {
       display: "flex",
       flexDirection: "column",
@@ -434,7 +447,7 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
 // src/components/popover/header.tsx
 var React13 = __toESM(require("react"));
-var import_ui12 = require("@elementor/ui");
+var import_ui13 = require("@elementor/ui");
 var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
   const paddingAndSizing = {
@@ -443,13 +456,13 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React13.createElement(import_ui12.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React13.createElement(import_ui12.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React13.createElement(import_ui12.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React13.createElement(import_ui12.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React13.createElement(import_ui13.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React13.createElement(import_ui13.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React13.createElement(import_ui13.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React13.createElement(import_ui13.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 // src/components/popover/menu-list.tsx
 var React14 = __toESM(require("react"));
 var import_react12 = require("react");
-var import_ui13 = require("@elementor/ui");
+var import_ui14 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
 // src/hooks/use-scroll-to-selected.ts
@@ -548,7 +561,7 @@ var PopoverMenuList = ({
   });
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React14.createElement(import_ui13.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React14.createElement(import_ui14.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React14.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -567,7 +580,7 @@ var PopoverMenuList = ({
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
         return /* @__PURE__ */ React14.createElement(
-          import_ui13.MenuSubheader,
+          import_ui14.MenuSubheader,
           {
             key: virtualRow.key,
             style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
@@ -578,7 +591,7 @@ var PopoverMenuList = ({
       }
       const isDisabled = item.disabled;
       return /* @__PURE__ */ React14.createElement(
-        import_ui13.ListItem,
+        import_ui14.ListItem,
         {
           key: virtualRow.key,
           role: "option",
@@ -616,7 +629,7 @@ var PopoverMenuList = ({
     })
   ));
 };
-var StyledMenuList = (0, import_ui13.styled)(import_ui13.MenuList)(({ theme }) => ({
+var StyledMenuList = (0, import_ui14.styled)(import_ui14.MenuList)(({ theme }) => ({
   "& > li": {
     height: ITEM_HEIGHT,
     width: "100%",
@@ -649,12 +662,12 @@ var StyledMenuList = (0, import_ui13.styled)(import_ui13.MenuList)(({ theme }) =
 // src/components/save-changes-dialog.tsx
 var React15 = __toESM(require("react"));
 var import_react13 = require("react");
-var import_icons3 = require("@elementor/icons");
-var import_ui14 = require("@elementor/ui");
+var import_icons4 = require("@elementor/icons");
+var import_ui15 = require("@elementor/ui");
 var TITLE_ID = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React15.createElement(import_ui14.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React15.createElement(import_ui15.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
 var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React15.createElement(
-  import_ui14.DialogTitle,
+  import_ui15.DialogTitle,
   {
     id: TITLE_ID,
     display: "flex",
@@ -662,11 +675,11 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React15.
     gap: 1,
     sx: { lineHeight: 1, justifyContent: "space-between" }
   },
-  /* @__PURE__ */ React15.createElement(import_ui14.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React15.createElement(import_icons3.AlertTriangleFilledIcon, { color: "secondary" }), children),
-  onClose && /* @__PURE__ */ React15.createElement(import_ui14.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React15.createElement(import_icons3.XIcon, null))
+  /* @__PURE__ */ React15.createElement(import_ui15.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React15.createElement(import_icons4.AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React15.createElement(import_ui15.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React15.createElement(import_icons4.XIcon, null))
 );
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React15.createElement(import_ui14.DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React15.createElement(import_ui14.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React15.createElement(import_ui15.DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React15.createElement(import_ui15.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
   const [isConfirming, setIsConfirming] = (0, import_react13.useState)(false);
   const { cancel, confirm, discard } = actions;
@@ -675,7 +688,7 @@ var SaveChangesDialogActions = ({ actions }) => {
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React15.createElement(import_ui14.DialogActions, null, cancel && /* @__PURE__ */ React15.createElement(import_ui14.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React15.createElement(import_ui14.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React15.createElement(import_ui14.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React15.createElement(import_ui15.DialogActions, null, cancel && /* @__PURE__ */ React15.createElement(import_ui15.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React15.createElement(import_ui15.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React15.createElement(import_ui15.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
@@ -794,6 +807,7 @@ var selectAll = (el) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CollapseIcon,
   EditableField,
   EllipsisWithTooltip,
   Form,

package/dist/index.mjs CHANGED Viewed

@@ -1,3 +1,15 @@
+// src/components/collapse-icon.tsx
+import { ChevronDownIcon } from "@elementor/icons";
+import { styled } from "@elementor/ui";
+var CollapseIcon = styled(ChevronDownIcon, {
+  shouldForwardProp: (prop) => prop !== "open"
+})(({ theme, open }) => ({
+  transform: open ? "rotate(180deg)" : "rotate(0deg)",
+  transition: theme.transitions.create("transform", {
+    duration: theme.transitions.duration.standard
+  })
+}));
 // src/components/ellipsis-with-tooltip.tsx
 import * as React from "react";
 import { useEffect, useState } from "react";
@@ -45,13 +57,13 @@ var useIsOverflowing = () => {
 // src/components/editable-field.tsx
 import * as React2 from "react";
 import { forwardRef as forwardRef2 } from "react";
-import { Box as Box2, styled, Tooltip as Tooltip2 } from "@elementor/ui";
+import { Box as Box2, styled as styled2, Tooltip as Tooltip2 } from "@elementor/ui";
 var EditableField = forwardRef2(
   ({ value, error, as = "span", sx, ...props }, ref) => {
     return /* @__PURE__ */ React2.createElement(Tooltip2, { title: error, open: !!error, placement: "top" }, /* @__PURE__ */ React2.createElement(StyledField, { ref, component: as, ...props }, value));
   }
 );
-var StyledField = styled(Box2)`
+var StyledField = styled2(Box2)`
 	width: 100%;
 	&:focus {
 		outline: none;
@@ -410,7 +422,7 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
 // src/components/popover/menu-list.tsx
 import * as React14 from "react";
 import { useMemo, useRef as useRef3 } from "react";
-import { Box as Box6, ListItem, MenuList, MenuSubheader, styled as styled2 } from "@elementor/ui";
+import { Box as Box6, ListItem, MenuList, MenuSubheader, styled as styled3 } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 // src/hooks/use-scroll-to-selected.ts
@@ -577,7 +589,7 @@ var PopoverMenuList = ({
     })
   ));
 };
-var StyledMenuList = styled2(MenuList)(({ theme }) => ({
+var StyledMenuList = styled3(MenuList)(({ theme }) => ({
   "& > li": {
     height: ITEM_HEIGHT,
     width: "100%",
@@ -763,6 +775,7 @@ var selectAll = (el) => {
   selection.addRange(range);
 };
 export {
+  CollapseIcon,
   EditableField,
   EllipsisWithTooltip,
   Form,

package/package.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-ui",
   "description": "Elementor Editor UI",
-  "version": "3.35.0-341",
+  "version": "3.35.0-342",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,7 +37,7 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor-v1-adapters": "3.35.0-341",
+    "@elementor/editor-v1-adapters": "3.35.0-342",
     "@elementor/icons": "^1.62.0",
     "@elementor/ui": "1.36.17",
     "@tanstack/react-virtual": "^3.13.3",

package/src/components/collapse-icon.tsx ADDED Viewed

@@ -0,0 +1,12 @@
+import { ChevronDownIcon } from '@elementor/icons';
+import { styled } from '@elementor/ui';
+// TODO: Replace this with future Rotate component that will be implemented in elementor-ui
+export const CollapseIcon = styled( ChevronDownIcon, {
+	shouldForwardProp: ( prop ) => prop !== 'open',
+} )< { open: boolean } >( ( { theme, open } ) => ( {
+	transform: open ? 'rotate(180deg)' : 'rotate(0deg)',
+	transition: theme.transitions.create( 'transform', {
+		duration: theme.transitions.duration.standard,
+	} ),
+} ) );

package/src/index.ts CHANGED Viewed

@@ -1,4 +1,5 @@
 // components
+export { CollapseIcon } from './components/collapse-icon';
 export { EllipsisWithTooltip } from './components/ellipsis-with-tooltip';
 export { EditableField } from './components/editable-field';
 export { IntroductionModal } from './components/introduction-modal';