@elementor/editor-ui 4.0.0-501 → 4.0.0-503

package/dist/index.d.mts

@@ -1,7 +1,7 @@
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
 import * as React$1 from 'react';
-import { ReactNode, PropsWithChildren, ReactElement, ComponentProps, RefObject } from 'react';
+import { ReactNode, PropsWithChildren, ReactElement, ComponentProps, ElementType, ComponentType, RefObject } from 'react';
 import * as _mui_material from '@mui/material';
 import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, BoxProps, ButtonProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 
@@ -125,6 +125,14 @@ declare const PromotionPopover: ({ children, open, placement, slotProps, ...card
 
 declare const PromotionChip: React$1.ForwardRefExoticComponent<React$1.RefAttributes<HTMLDivElement>>;
 
+declare function FloatingActionsBar({ actions, children }: PropsWithChildren<{
+    actions: ReactElement[];
+}>): React$1.JSX.Element;
+declare function useFloatingActionsBar(): {
+    open: boolean;
+    setOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
+};
+
 type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';
     width?: number;
@@ -170,6 +178,16 @@ declare const StyledMenuList: _emotion_styled.StyledComponent<any, {}, {
     ref?: React$1.Ref<any> | undefined;
 }>;
 
+type PopoverActionProps = {
+    title: string;
+    visible?: boolean;
+    icon: ElementType;
+    content: ComponentType<{
+        close: () => void;
+    }>;
+};
+declare function PopoverAction({ title, visible, icon: Icon, content: PopoverContent }: PopoverActionProps): React$1.JSX.Element | null;
+
 declare const SaveChangesDialog: {
     ({ children, onClose }: Pick<DialogProps, "children" | "onClose">): React$1.JSX.Element;
     Title: ({ children, onClose }: React$1.PropsWithChildren & {
@@ -240,4 +258,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable, useSectionWidth };
+export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, FloatingActionsBar, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverAction, type PopoverActionProps, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable, useFloatingActionsBar, useSectionWidth };

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 import * as _emotion_styled from '@emotion/styled';
 import * as _mui_system from '@mui/system';
 import * as React$1 from 'react';
-import { ReactNode, PropsWithChildren, ReactElement, ComponentProps, RefObject } from 'react';
+import { ReactNode, PropsWithChildren, ReactElement, ComponentProps, ElementType, ComponentType, RefObject } from 'react';
 import * as _mui_material from '@mui/material';
 import { MenuItemProps, MenuItemTextProps, TypographyProps, AlertProps, InfotipProps, BoxProps, ButtonProps, MenuList, DialogProps, DialogContentTextProps } from '@elementor/ui';
 
@@ -125,6 +125,14 @@ declare const PromotionPopover: ({ children, open, placement, slotProps, ...card
 
 declare const PromotionChip: React$1.ForwardRefExoticComponent<React$1.RefAttributes<HTMLDivElement>>;
 
+declare function FloatingActionsBar({ actions, children }: PropsWithChildren<{
+    actions: ReactElement[];
+}>): React$1.JSX.Element;
+declare function useFloatingActionsBar(): {
+    open: boolean;
+    setOpen: React$1.Dispatch<React$1.SetStateAction<boolean>>;
+};
+
 type PopoverBodyProps = PropsWithChildren<{
     height?: number | 'auto';
     width?: number;
@@ -170,6 +178,16 @@ declare const StyledMenuList: _emotion_styled.StyledComponent<any, {}, {
     ref?: React$1.Ref<any> | undefined;
 }>;
 
+type PopoverActionProps = {
+    title: string;
+    visible?: boolean;
+    icon: ElementType;
+    content: ComponentType<{
+        close: () => void;
+    }>;
+};
+declare function PopoverAction({ title, visible, icon: Icon, content: PopoverContent }: PopoverActionProps): React$1.JSX.Element | null;
+
 declare const SaveChangesDialog: {
     ({ children, onClose }: Pick<DialogProps, "children" | "onClose">): React$1.JSX.Element;
     Title: ({ children, onClose }: React$1.PropsWithChildren & {
@@ -240,4 +258,4 @@ declare const useEditable: ({ value, onSubmit, validation, onClick, onError }: U
     };
 };
 
-export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable, useSectionWidth };
+export { CollapseIcon, ConfirmationDialog, CtaButton, EditableField, EllipsisWithTooltip, FloatingActionsBar, Form, GlobalDialog, ITEM_HEIGHT, InfoAlert, InfoTipCard, IntroductionModal, MenuItemInfotip, MenuListItem, PopoverAction, type PopoverActionProps, PopoverBody, PopoverHeader, PopoverMenuList, type PopoverMenuListProps, PromotionChip, PromotionInfotip, PromotionPopover, SaveChangesDialog, SearchField, SectionPopoverBody, SectionRefContext, StyledMenuList, ThemeProvider, type VirtualizedItem, WarningInfotip, closeDialog, openDialog, useDialog, useEditable, useFloatingActionsBar, useSectionWidth };

package/dist/index.js

@@ -35,6 +35,7 @@ __export(index_exports, {
   CtaButton: () => CtaButton,
   EditableField: () => EditableField,
   EllipsisWithTooltip: () => EllipsisWithTooltip,
+  FloatingActionsBar: () => FloatingActionsBar,
   Form: () => Form,
   GlobalDialog: () => GlobalDialog,
   ITEM_HEIGHT: () => ITEM_HEIGHT,
@@ -43,6 +44,7 @@ __export(index_exports, {
   IntroductionModal: () => IntroductionModal,
   MenuItemInfotip: () => MenuItemInfotip,
   MenuListItem: () => MenuListItem,
+  PopoverAction: () => PopoverAction,
   PopoverBody: () => PopoverBody,
   PopoverHeader: () => PopoverHeader,
   PopoverMenuList: () => PopoverMenuList,
@@ -60,6 +62,7 @@ __export(index_exports, {
   openDialog: () => openDialog,
   useDialog: () => useDialog,
   useEditable: () => useEditable,
+  useFloatingActionsBar: () => useFloatingActionsBar,
   useSectionWidth: () => useSectionWidth
 });
 module.exports = __toCommonJS(index_exports);
@@ -580,15 +583,43 @@ var PromotionChip = React15.forwardRef(({ ...props }, ref) => {
   );
 });
 
-// src/components/popover/body.tsx
+// src/components/floating-bar.tsx
 var React16 = __toESM(require("react"));
+var import_react11 = require("react");
 var import_ui16 = require("@elementor/ui");
+var FloatingBarContainer = (0, import_ui16.styled)("span")`
+	display: contents;
+
+	.MuiFloatingActionBar-popper:has( .MuiFloatingActionBar-actions:empty ) {
+		display: none;
+	}
+
+	.MuiFloatingActionBar-popper {
+		z-index: 1000;
+	}
+`;
+var FloatingActionsContext = (0, import_react11.createContext)(null);
+function FloatingActionsBar({ actions, children }) {
+  const [open, setOpen] = (0, import_react11.useState)(false);
+  return /* @__PURE__ */ React16.createElement(FloatingActionsContext.Provider, { value: { open, setOpen } }, /* @__PURE__ */ React16.createElement(FloatingBarContainer, null, /* @__PURE__ */ React16.createElement(import_ui16.UnstableFloatingActionBar, { actions, open: open || void 0 }, children)));
+}
+function useFloatingActionsBar() {
+  const context = (0, import_react11.useContext)(FloatingActionsContext);
+  if (!context) {
+    throw new Error("useFloatingActions must be used within a FloatingActionsBar");
+  }
+  return context;
+}
+
+// src/components/popover/body.tsx
+var React17 = __toESM(require("react"));
+var import_ui17 = 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__ */ React16.createElement(
-    import_ui16.Box,
+  return /* @__PURE__ */ React17.createElement(
+    import_ui17.Box,
     {
       display: "flex",
       flexDirection: "column",
@@ -605,13 +636,13 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
 };
 
 // src/components/popover/section-popover-body.tsx
-var React17 = __toESM(require("react"));
+var React18 = __toESM(require("react"));
 
 // src/contexts/section-context.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var FALLBACK_SECTION_WIDTH = 320;
-var SectionRefContext = (0, import_react11.createContext)(null);
-var useSectionRef = () => (0, import_react11.useContext)(SectionRefContext);
+var SectionRefContext = (0, import_react12.createContext)(null);
+var useSectionRef = () => (0, import_react12.useContext)(SectionRefContext);
 var useSectionWidth = () => {
   const sectionRef = useSectionRef();
   return sectionRef?.current?.offsetWidth ?? FALLBACK_SECTION_WIDTH;
@@ -620,12 +651,12 @@ var useSectionWidth = () => {
 // src/components/popover/section-popover-body.tsx
 var SectionPopoverBody = (props) => {
   const sectionWidth = useSectionWidth();
-  return /* @__PURE__ */ React17.createElement(PopoverBody, { ...props, width: sectionWidth });
+  return /* @__PURE__ */ React18.createElement(PopoverBody, { ...props, width: sectionWidth });
 };
 
 // src/components/popover/header.tsx
-var React18 = __toESM(require("react"));
-var import_ui17 = require("@elementor/ui");
+var React19 = __toESM(require("react"));
+var import_ui18 = require("@elementor/ui");
 var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
   const paddingAndSizing = {
@@ -634,23 +665,23 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React18.createElement(import_ui17.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React18.createElement(import_ui17.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React18.createElement(import_ui17.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React18.createElement(import_ui17.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React19.createElement(import_ui18.Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React19.createElement(import_ui18.Typography, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React19.createElement(import_ui18.Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React19.createElement(import_ui18.CloseButton, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-var React19 = __toESM(require("react"));
-var import_react14 = require("react");
-var import_ui18 = require("@elementor/ui");
+var React20 = __toESM(require("react"));
+var import_react15 = require("react");
+var import_ui19 = require("@elementor/ui");
 var import_react_virtual = require("@tanstack/react-virtual");
 
 // src/hooks/use-scroll-to-selected.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 var useScrollToSelected = ({
   selectedValue,
   items,
   virtualizer
 }) => {
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     if (!selectedValue || items.length === 0) {
       return;
     }
@@ -662,10 +693,10 @@ var useScrollToSelected = ({
 };
 
 // src/hooks/use-scroll-top.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 var useScrollTop = ({ containerRef }) => {
-  const [scrollTop, setScrollTop] = (0, import_react13.useState)(0);
-  (0, import_react13.useEffect)(() => {
+  const [scrollTop, setScrollTop] = (0, import_react14.useState)(0);
+  (0, import_react14.useEffect)(() => {
     const container = containerRef.current;
     if (!container) {
       return;
@@ -705,11 +736,11 @@ var PopoverMenuList = ({
   noResultsComponent,
   menuListTemplate: CustomMenuList
 }) => {
-  const containerRef = (0, import_react14.useRef)(null);
+  const containerRef = (0, import_react15.useRef)(null);
   const scrollTop = useScrollTop({ containerRef });
-  const theme = (0, import_ui18.useTheme)();
+  const theme = (0, import_ui19.useTheme)();
   const MenuListComponent = CustomMenuList || StyledMenuList;
-  const stickyIndices = (0, import_react14.useMemo)(
+  const stickyIndices = (0, import_react15.useMemo)(
     () => items.reduce((categoryIndices, item, index) => {
       if (item.type === "category") {
         categoryIndices.push(index);
@@ -743,12 +774,12 @@ var PopoverMenuList = ({
     rangeExtractor: getActiveItemIndices,
     onChange: onChangeCallback
   });
-  (0, import_react14.useEffect)(() => {
+  (0, import_react15.useEffect)(() => {
     onChangeCallback(virtualizer);
   }, [items]);
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React19.createElement(import_ui18.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(import_ui19.Box, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React20.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -766,8 +797,8 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React19.createElement(
-          import_ui18.MenuSubheader,
+        return /* @__PURE__ */ React20.createElement(
+          import_ui19.MenuSubheader,
           {
             key: virtualRow.key,
             style: shouldStick ? {} : menuSubHeaderAbsoluteStyling(virtualRow.start),
@@ -777,8 +808,8 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React19.createElement(
-        import_ui18.ListItem,
+      return /* @__PURE__ */ React20.createElement(
+        import_ui19.ListItem,
         {
           key: virtualRow.key,
           role: "option",
@@ -817,7 +848,7 @@ var PopoverMenuList = ({
     })
   ));
 };
-var StyledMenuList = (0, import_ui18.styled)(import_ui18.MenuList)(({ theme }) => ({
+var StyledMenuList = (0, import_ui19.styled)(import_ui19.MenuList)(({ theme }) => ({
   "& > li": {
     height: ITEM_HEIGHT,
     width: "100%",
@@ -846,15 +877,68 @@ var StyledMenuList = (0, import_ui18.styled)(import_ui18.MenuList)(({ theme }) =
   position: "relative"
 }));
 
+// src/components/popover/popover-action.tsx
+var React21 = __toESM(require("react"));
+var import_ui20 = require("@elementor/ui");
+var SIZE3 = "tiny";
+function PopoverAction({ title, visible = true, icon: Icon, content: PopoverContent }) {
+  const { popupState, triggerProps, popoverProps } = useFloatingActionsPopover();
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(import_ui20.Tooltip, { placement: "top", title }, /* @__PURE__ */ React21.createElement(import_ui20.IconButton, { "aria-label": title, size: SIZE3, ...triggerProps }, /* @__PURE__ */ React21.createElement(Icon, { fontSize: SIZE3 }))), /* @__PURE__ */ React21.createElement(
+    import_ui20.Popover,
+    {
+      disableScrollLock: true,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      PaperProps: {
+        sx: { my: 2.5 }
+      },
+      ...popoverProps
+    },
+    /* @__PURE__ */ React21.createElement(PopoverContent, { close: popupState.close })
+  ));
+}
+function useFloatingActionsPopover() {
+  const { setOpen } = useFloatingActionsBar();
+  const popupState = (0, import_ui20.usePopupState)({ variant: "popover" });
+  const triggerProps = (0, import_ui20.bindTrigger)(popupState);
+  const popoverProps = (0, import_ui20.bindPopover)(popupState);
+  const onClick = (e) => {
+    triggerProps.onClick(e);
+    setOpen(true);
+  };
+  const onClose = () => {
+    popoverProps.onClose();
+    setOpen(false);
+  };
+  const close = () => {
+    popupState.close();
+    setOpen(false);
+  };
+  return {
+    popupState: { ...popupState, close },
+    triggerProps: { ...triggerProps, onClick },
+    popoverProps: { ...popoverProps, onClose }
+  };
+}
+
 // src/components/save-changes-dialog.tsx
-var React20 = __toESM(require("react"));
-var import_react15 = require("react");
+var React22 = __toESM(require("react"));
+var import_react16 = require("react");
 var import_icons7 = require("@elementor/icons");
-var import_ui19 = require("@elementor/ui");
+var import_ui21 = require("@elementor/ui");
 var TITLE_ID = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React20.createElement(import_ui19.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React20.createElement(
-  import_ui19.DialogTitle,
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React22.createElement(import_ui21.Dialog, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React22.createElement(
+  import_ui21.DialogTitle,
   {
     id: TITLE_ID,
     display: "flex",
@@ -862,58 +946,58 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React20.
     gap: 1,
     sx: { lineHeight: 1, justifyContent: "space-between" }
   },
-  /* @__PURE__ */ React20.createElement(import_ui19.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React20.createElement(import_icons7.AlertTriangleFilledIcon, { color: "secondary" }), children),
-  onClose && /* @__PURE__ */ React20.createElement(import_ui19.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React20.createElement(import_icons7.XIcon, null))
+  /* @__PURE__ */ React22.createElement(import_ui21.Stack, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(import_icons7.AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React22.createElement(import_ui21.IconButton, { onClick: onClose, size: "small" }, /* @__PURE__ */ React22.createElement(import_icons7.XIcon, null))
 );
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React20.createElement(import_ui19.DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React20.createElement(import_ui19.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React22.createElement(import_ui21.DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React22.createElement(import_ui21.DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
-  const [isConfirming, setIsConfirming] = (0, import_react15.useState)(false);
+  const [isConfirming, setIsConfirming] = (0, import_react16.useState)(false);
   const { cancel, confirm, discard } = actions;
   const onConfirm = async () => {
     setIsConfirming(true);
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React20.createElement(import_ui19.DialogActions, null, cancel && /* @__PURE__ */ React20.createElement(import_ui19.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React20.createElement(import_ui19.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React20.createElement(import_ui19.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React22.createElement(import_ui21.DialogActions, null, cancel && /* @__PURE__ */ React22.createElement(import_ui21.Button, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React22.createElement(import_ui21.Button, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React22.createElement(import_ui21.Button, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
 SaveChangesDialog.ContentText = SaveChangesDialogContentText;
 SaveChangesDialog.Actions = SaveChangesDialogActions;
 var useDialog = () => {
-  const [isOpen, setIsOpen] = (0, import_react15.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react16.useState)(false);
   const open = () => setIsOpen(true);
   const close = () => setIsOpen(false);
   return { isOpen, open, close };
 };
 
 // src/components/confirmation-dialog.tsx
-var React21 = __toESM(require("react"));
+var React23 = __toESM(require("react"));
 var import_icons8 = require("@elementor/icons");
-var import_ui20 = require("@elementor/ui");
+var import_ui22 = require("@elementor/ui");
 var import_i18n4 = require("@wordpress/i18n");
 var TITLE_ID2 = "confirmation-dialog";
-var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React21.createElement(import_ui20.Dialog, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
-var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React21.createElement(import_ui20.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React21.createElement(import_icons8.AlertOctagonFilledIcon, { color: "error" }), children);
-var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React21.createElement(import_ui20.DialogContent, null, children);
-var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React21.createElement(import_ui20.DialogContentText, { variant: "body2", color: "textPrimary", ...props });
+var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React23.createElement(import_ui22.Dialog, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React23.createElement(import_ui22.DialogTitle, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React23.createElement(import_icons8.AlertOctagonFilledIcon, { color: "error" }), children);
+var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React23.createElement(import_ui22.DialogContent, null, children);
+var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React23.createElement(import_ui22.DialogContentText, { variant: "body2", color: "textPrimary", ...props });
 var ConfirmationDialogActions = ({
   onClose,
   onConfirm,
   cancelLabel,
   confirmLabel
-}) => /* @__PURE__ */ React21.createElement(import_ui20.DialogActions, null, /* @__PURE__ */ React21.createElement(import_ui20.Button, { color: "secondary", onClick: onClose }, cancelLabel ?? (0, import_i18n4.__)("Not now", "elementor")), /* @__PURE__ */ React21.createElement(import_ui20.Button, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? (0, import_i18n4.__)("Delete", "elementor")));
+}) => /* @__PURE__ */ React23.createElement(import_ui22.DialogActions, null, /* @__PURE__ */ React23.createElement(import_ui22.Button, { color: "secondary", onClick: onClose }, cancelLabel ?? (0, import_i18n4.__)("Not now", "elementor")), /* @__PURE__ */ React23.createElement(import_ui22.Button, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? (0, import_i18n4.__)("Delete", "elementor")));
 ConfirmationDialog.Title = ConfirmationDialogTitle;
 ConfirmationDialog.Content = ConfirmationDialogContent;
 ConfirmationDialog.ContentText = ConfirmationDialogContentText;
 ConfirmationDialog.Actions = ConfirmationDialogActions;
 
 // src/hooks/use-editable.ts
-var import_react16 = require("react");
+var import_react17 = require("react");
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
-  const [isEditing, setIsEditing] = (0, import_react16.useState)(false);
-  const [error, setError] = (0, import_react16.useState)(null);
+  const [isEditing, setIsEditing] = (0, import_react17.useState)(false);
+  const [error, setError] = (0, import_react17.useState)(null);
   const ref = useSelection(isEditing);
   const isDirty = (newValue) => newValue !== value;
   const openEditMode = () => {
@@ -995,8 +1079,8 @@ var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
   };
 };
 var useSelection = (isEditing) => {
-  const ref = (0, import_react16.useRef)(null);
-  (0, import_react16.useEffect)(() => {
+  const ref = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
     if (isEditing) {
       selectAll(ref.current);
     }
@@ -1020,6 +1104,7 @@ var selectAll = (el) => {
   CtaButton,
   EditableField,
   EllipsisWithTooltip,
+  FloatingActionsBar,
   Form,
   GlobalDialog,
   ITEM_HEIGHT,
@@ -1028,6 +1113,7 @@ var selectAll = (el) => {
   IntroductionModal,
   MenuItemInfotip,
   MenuListItem,
+  PopoverAction,
   PopoverBody,
   PopoverHeader,
   PopoverMenuList,
@@ -1045,6 +1131,7 @@ var selectAll = (el) => {
   openDialog,
   useDialog,
   useEditable,
+  useFloatingActionsBar,
   useSectionWidth
 });
 //# sourceMappingURL=index.js.map

package/dist/index.mjs

@@ -550,14 +550,42 @@ var PromotionChip = React15.forwardRef(({ ...props }, ref) => {
   );
 });
 
-// src/components/popover/body.tsx
+// src/components/floating-bar.tsx
 import * as React16 from "react";
+import { createContext, useContext, useState as useState5 } from "react";
+import { styled as styled3, UnstableFloatingActionBar } from "@elementor/ui";
+var FloatingBarContainer = styled3("span")`
+	display: contents;
+
+	.MuiFloatingActionBar-popper:has( .MuiFloatingActionBar-actions:empty ) {
+		display: none;
+	}
+
+	.MuiFloatingActionBar-popper {
+		z-index: 1000;
+	}
+`;
+var FloatingActionsContext = createContext(null);
+function FloatingActionsBar({ actions, children }) {
+  const [open, setOpen] = useState5(false);
+  return /* @__PURE__ */ React16.createElement(FloatingActionsContext.Provider, { value: { open, setOpen } }, /* @__PURE__ */ React16.createElement(FloatingBarContainer, null, /* @__PURE__ */ React16.createElement(UnstableFloatingActionBar, { actions, open: open || void 0 }, children)));
+}
+function useFloatingActionsBar() {
+  const context = useContext(FloatingActionsContext);
+  if (!context) {
+    throw new Error("useFloatingActions must be used within a FloatingActionsBar");
+  }
+  return context;
+}
+
+// src/components/popover/body.tsx
+import * as React17 from "react";
 import { Box as Box6 } from "@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__ */ React16.createElement(
+  return /* @__PURE__ */ React17.createElement(
     Box6,
     {
       display: "flex",
@@ -575,13 +603,13 @@ var PopoverBody = ({ children, height = DEFAULT_POPOVER_HEIGHT, width, id }) =>
 };
 
 // src/components/popover/section-popover-body.tsx
-import * as React17 from "react";
+import * as React18 from "react";
 
 // src/contexts/section-context.tsx
-import { createContext, useContext } from "react";
+import { createContext as createContext2, useContext as useContext2 } from "react";
 var FALLBACK_SECTION_WIDTH = 320;
-var SectionRefContext = createContext(null);
-var useSectionRef = () => useContext(SectionRefContext);
+var SectionRefContext = createContext2(null);
+var useSectionRef = () => useContext2(SectionRefContext);
 var useSectionWidth = () => {
   const sectionRef = useSectionRef();
   return sectionRef?.current?.offsetWidth ?? FALLBACK_SECTION_WIDTH;
@@ -590,11 +618,11 @@ var useSectionWidth = () => {
 // src/components/popover/section-popover-body.tsx
 var SectionPopoverBody = (props) => {
   const sectionWidth = useSectionWidth();
-  return /* @__PURE__ */ React17.createElement(PopoverBody, { ...props, width: sectionWidth });
+  return /* @__PURE__ */ React18.createElement(PopoverBody, { ...props, width: sectionWidth });
 };
 
 // src/components/popover/header.tsx
-import * as React18 from "react";
+import * as React19 from "react";
 import { CloseButton as CloseButton2, Stack, Typography as Typography5 } from "@elementor/ui";
 var SIZE2 = "tiny";
 var PopoverHeader = ({ title, onClose, icon, actions }) => {
@@ -604,13 +632,13 @@ var PopoverHeader = ({ title, onClose, icon, actions }) => {
     py: 1.5,
     maxHeight: 36
   };
-  return /* @__PURE__ */ React18.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React18.createElement(Typography5, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React18.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React18.createElement(CloseButton2, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
+  return /* @__PURE__ */ React19.createElement(Stack, { direction: "row", alignItems: "center", ...paddingAndSizing, sx: { columnGap: 0.5 } }, icon, /* @__PURE__ */ React19.createElement(Typography5, { variant: "subtitle2", sx: { fontSize: "12px", mt: 0.25 } }, title), /* @__PURE__ */ React19.createElement(Stack, { direction: "row", sx: { ml: "auto" } }, actions, /* @__PURE__ */ React19.createElement(CloseButton2, { slotProps: { icon: { fontSize: SIZE2 } }, sx: { ml: "auto" }, onClick: onClose })));
 };
 
 // src/components/popover/menu-list.tsx
-import * as React19 from "react";
+import * as React20 from "react";
 import { useEffect as useEffect7, useMemo, useRef as useRef3 } from "react";
-import { Box as Box7, ListItem, MenuList, MenuSubheader, styled as styled3, useTheme } from "@elementor/ui";
+import { Box as Box7, ListItem, MenuList, MenuSubheader, styled as styled4, useTheme } from "@elementor/ui";
 import { useVirtualizer } from "@tanstack/react-virtual";
 
 // src/hooks/use-scroll-to-selected.ts
@@ -632,9 +660,9 @@ var useScrollToSelected = ({
 };
 
 // src/hooks/use-scroll-top.ts
-import { useEffect as useEffect6, useState as useState5 } from "react";
+import { useEffect as useEffect6, useState as useState6 } from "react";
 var useScrollTop = ({ containerRef }) => {
-  const [scrollTop, setScrollTop] = useState5(0);
+  const [scrollTop, setScrollTop] = useState6(0);
   useEffect6(() => {
     const container = containerRef.current;
     if (!container) {
@@ -718,7 +746,7 @@ var PopoverMenuList = ({
   }, [items]);
   useScrollToSelected({ selectedValue, items, virtualizer });
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ React19.createElement(Box7, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React20.createElement(Box7, { ref: containerRef, sx: { height: "100%", overflowY: "auto" } }, items.length === 0 && noResultsComponent ? noResultsComponent : /* @__PURE__ */ React20.createElement(
     MenuListComponent,
     {
       role: "listbox",
@@ -736,7 +764,7 @@ var PopoverMenuList = ({
       }
       if (item.type === "category") {
         const shouldStick = virtualRow.start + MENU_LIST_PADDING_TOP <= scrollTop;
-        return /* @__PURE__ */ React19.createElement(
+        return /* @__PURE__ */ React20.createElement(
           MenuSubheader,
           {
             key: virtualRow.key,
@@ -747,7 +775,7 @@ var PopoverMenuList = ({
         );
       }
       const isDisabled = item.disabled;
-      return /* @__PURE__ */ React19.createElement(
+      return /* @__PURE__ */ React20.createElement(
         ListItem,
         {
           key: virtualRow.key,
@@ -787,7 +815,7 @@ var PopoverMenuList = ({
     })
   ));
 };
-var StyledMenuList = styled3(MenuList)(({ theme }) => ({
+var StyledMenuList = styled4(MenuList)(({ theme }) => ({
   "& > li": {
     height: ITEM_HEIGHT,
     width: "100%",
@@ -816,9 +844,62 @@ var StyledMenuList = styled3(MenuList)(({ theme }) => ({
   position: "relative"
 }));
 
+// src/components/popover/popover-action.tsx
+import * as React21 from "react";
+import { bindPopover, bindTrigger, IconButton as IconButton2, Popover, Tooltip as Tooltip3, usePopupState } from "@elementor/ui";
+var SIZE3 = "tiny";
+function PopoverAction({ title, visible = true, icon: Icon, content: PopoverContent }) {
+  const { popupState, triggerProps, popoverProps } = useFloatingActionsPopover();
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ React21.createElement(React21.Fragment, null, /* @__PURE__ */ React21.createElement(Tooltip3, { placement: "top", title }, /* @__PURE__ */ React21.createElement(IconButton2, { "aria-label": title, size: SIZE3, ...triggerProps }, /* @__PURE__ */ React21.createElement(Icon, { fontSize: SIZE3 }))), /* @__PURE__ */ React21.createElement(
+    Popover,
+    {
+      disableScrollLock: true,
+      anchorOrigin: {
+        vertical: "bottom",
+        horizontal: "right"
+      },
+      transformOrigin: {
+        vertical: "top",
+        horizontal: "right"
+      },
+      PaperProps: {
+        sx: { my: 2.5 }
+      },
+      ...popoverProps
+    },
+    /* @__PURE__ */ React21.createElement(PopoverContent, { close: popupState.close })
+  ));
+}
+function useFloatingActionsPopover() {
+  const { setOpen } = useFloatingActionsBar();
+  const popupState = usePopupState({ variant: "popover" });
+  const triggerProps = bindTrigger(popupState);
+  const popoverProps = bindPopover(popupState);
+  const onClick = (e) => {
+    triggerProps.onClick(e);
+    setOpen(true);
+  };
+  const onClose = () => {
+    popoverProps.onClose();
+    setOpen(false);
+  };
+  const close = () => {
+    popupState.close();
+    setOpen(false);
+  };
+  return {
+    popupState: { ...popupState, close },
+    triggerProps: { ...triggerProps, onClick },
+    popoverProps: { ...popoverProps, onClose }
+  };
+}
+
 // src/components/save-changes-dialog.tsx
-import * as React20 from "react";
-import { useState as useState6 } from "react";
+import * as React22 from "react";
+import { useState as useState7 } from "react";
 import { AlertTriangleFilledIcon, XIcon as XIcon2 } from "@elementor/icons";
 import {
   Button as Button4,
@@ -827,12 +908,12 @@ import {
   DialogContent,
   DialogContentText,
   DialogTitle as DialogTitle2,
-  IconButton as IconButton2,
+  IconButton as IconButton3,
   Stack as Stack2
 } from "@elementor/ui";
 var TITLE_ID = "save-changes-dialog";
-var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React20.createElement(Dialog3, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
-var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React20.createElement(
+var SaveChangesDialog = ({ children, onClose }) => /* @__PURE__ */ React22.createElement(Dialog3, { open: true, onClose, "aria-labelledby": TITLE_ID, maxWidth: "xs" }, children);
+var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React22.createElement(
   DialogTitle2,
   {
     id: TITLE_ID,
@@ -841,34 +922,34 @@ var SaveChangesDialogTitle = ({ children, onClose }) => /* @__PURE__ */ React20.
     gap: 1,
     sx: { lineHeight: 1, justifyContent: "space-between" }
   },
-  /* @__PURE__ */ React20.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React20.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children),
-  onClose && /* @__PURE__ */ React20.createElement(IconButton2, { onClick: onClose, size: "small" }, /* @__PURE__ */ React20.createElement(XIcon2, null))
+  /* @__PURE__ */ React22.createElement(Stack2, { direction: "row", alignItems: "center", gap: 1 }, /* @__PURE__ */ React22.createElement(AlertTriangleFilledIcon, { color: "secondary" }), children),
+  onClose && /* @__PURE__ */ React22.createElement(IconButton3, { onClick: onClose, size: "small" }, /* @__PURE__ */ React22.createElement(XIcon2, null))
 );
-var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React20.createElement(DialogContent, null, children);
-var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React20.createElement(DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
+var SaveChangesDialogContent = ({ children }) => /* @__PURE__ */ React22.createElement(DialogContent, null, children);
+var SaveChangesDialogContentText = (props) => /* @__PURE__ */ React22.createElement(DialogContentText, { variant: "body2", color: "textPrimary", display: "flex", flexDirection: "column", ...props });
 var SaveChangesDialogActions = ({ actions }) => {
-  const [isConfirming, setIsConfirming] = useState6(false);
+  const [isConfirming, setIsConfirming] = useState7(false);
   const { cancel, confirm, discard } = actions;
   const onConfirm = async () => {
     setIsConfirming(true);
     await confirm.action();
     setIsConfirming(false);
   };
-  return /* @__PURE__ */ React20.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React20.createElement(Button4, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React20.createElement(Button4, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React20.createElement(Button4, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
+  return /* @__PURE__ */ React22.createElement(DialogActions2, null, cancel && /* @__PURE__ */ React22.createElement(Button4, { variant: "text", color: "secondary", onClick: cancel.action }, cancel.label), discard && /* @__PURE__ */ React22.createElement(Button4, { variant: "text", color: "secondary", onClick: discard.action }, discard.label), /* @__PURE__ */ React22.createElement(Button4, { variant: "contained", color: "secondary", onClick: onConfirm, loading: isConfirming }, confirm.label));
 };
 SaveChangesDialog.Title = SaveChangesDialogTitle;
 SaveChangesDialog.Content = SaveChangesDialogContent;
 SaveChangesDialog.ContentText = SaveChangesDialogContentText;
 SaveChangesDialog.Actions = SaveChangesDialogActions;
 var useDialog = () => {
-  const [isOpen, setIsOpen] = useState6(false);
+  const [isOpen, setIsOpen] = useState7(false);
   const open = () => setIsOpen(true);
   const close = () => setIsOpen(false);
   return { isOpen, open, close };
 };
 
 // src/components/confirmation-dialog.tsx
-import * as React21 from "react";
+import * as React23 from "react";
 import { AlertOctagonFilledIcon } from "@elementor/icons";
 import {
   Button as Button5,
@@ -880,26 +961,26 @@ import {
 } from "@elementor/ui";
 import { __ as __4 } from "@wordpress/i18n";
 var TITLE_ID2 = "confirmation-dialog";
-var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React21.createElement(Dialog4, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
-var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React21.createElement(DialogTitle3, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React21.createElement(AlertOctagonFilledIcon, { color: "error" }), children);
-var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React21.createElement(DialogContent2, null, children);
-var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React21.createElement(DialogContentText2, { variant: "body2", color: "textPrimary", ...props });
+var ConfirmationDialog = ({ open, onClose, children }) => /* @__PURE__ */ React23.createElement(Dialog4, { open, onClose, "aria-labelledby": TITLE_ID2, maxWidth: "xs" }, children);
+var ConfirmationDialogTitle = ({ children }) => /* @__PURE__ */ React23.createElement(DialogTitle3, { id: TITLE_ID2, display: "flex", alignItems: "center", gap: 1, sx: { lineHeight: 1 } }, /* @__PURE__ */ React23.createElement(AlertOctagonFilledIcon, { color: "error" }), children);
+var ConfirmationDialogContent = ({ children }) => /* @__PURE__ */ React23.createElement(DialogContent2, null, children);
+var ConfirmationDialogContentText = (props) => /* @__PURE__ */ React23.createElement(DialogContentText2, { variant: "body2", color: "textPrimary", ...props });
 var ConfirmationDialogActions = ({
   onClose,
   onConfirm,
   cancelLabel,
   confirmLabel
-}) => /* @__PURE__ */ React21.createElement(DialogActions3, null, /* @__PURE__ */ React21.createElement(Button5, { color: "secondary", onClick: onClose }, cancelLabel ?? __4("Not now", "elementor")), /* @__PURE__ */ React21.createElement(Button5, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? __4("Delete", "elementor")));
+}) => /* @__PURE__ */ React23.createElement(DialogActions3, null, /* @__PURE__ */ React23.createElement(Button5, { color: "secondary", onClick: onClose }, cancelLabel ?? __4("Not now", "elementor")), /* @__PURE__ */ React23.createElement(Button5, { autoFocus: true, variant: "contained", color: "error", onClick: onConfirm }, confirmLabel ?? __4("Delete", "elementor")));
 ConfirmationDialog.Title = ConfirmationDialogTitle;
 ConfirmationDialog.Content = ConfirmationDialogContent;
 ConfirmationDialog.ContentText = ConfirmationDialogContentText;
 ConfirmationDialog.Actions = ConfirmationDialogActions;
 
 // src/hooks/use-editable.ts
-import { useEffect as useEffect8, useRef as useRef4, useState as useState7 } from "react";
+import { useEffect as useEffect8, useRef as useRef4, useState as useState8 } from "react";
 var useEditable = ({ value, onSubmit, validation, onClick, onError }) => {
-  const [isEditing, setIsEditing] = useState7(false);
-  const [error, setError] = useState7(null);
+  const [isEditing, setIsEditing] = useState8(false);
+  const [error, setError] = useState8(null);
   const ref = useSelection(isEditing);
   const isDirty = (newValue) => newValue !== value;
   const openEditMode = () => {
@@ -1005,6 +1086,7 @@ export {
   CtaButton,
   EditableField,
   EllipsisWithTooltip,
+  FloatingActionsBar,
   Form,
   GlobalDialog,
   ITEM_HEIGHT,
@@ -1013,6 +1095,7 @@ export {
   IntroductionModal,
   MenuItemInfotip,
   MenuListItem,
+  PopoverAction,
   PopoverBody,
   PopoverHeader,
   PopoverMenuList,
@@ -1030,6 +1113,7 @@ export {
   openDialog,
   useDialog,
   useEditable,
+  useFloatingActionsBar,
   useSectionWidth
 };
 //# sourceMappingURL=index.mjs.map

package/package.json

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

package/src/components/floating-bar.tsx

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { createContext, type PropsWithChildren, type ReactElement, useContext, useState } from 'react';
+import { styled, UnstableFloatingActionBar } from '@elementor/ui';
+
+// CSS hack to hide empty floating bars.
+const FloatingBarContainer = styled( 'span' )`
+	display: contents;
+
+	.MuiFloatingActionBar-popper:has( .MuiFloatingActionBar-actions:empty ) {
+		display: none;
+	}
+
+	.MuiFloatingActionBar-popper {
+		z-index: 1000;
+	}
+`;
+
+const FloatingActionsContext = createContext< null | {
+	open: boolean;
+	setOpen: React.Dispatch< React.SetStateAction< boolean > >;
+} >( null );
+
+export function FloatingActionsBar( { actions, children }: PropsWithChildren< { actions: ReactElement[] } > ) {
+	const [ open, setOpen ] = useState< boolean >( false );
+
+	return (
+		<FloatingActionsContext.Provider value={ { open, setOpen } }>
+			<FloatingBarContainer>
+				<UnstableFloatingActionBar actions={ actions } open={ open || undefined }>
+					{ children as ReactElement }
+				</UnstableFloatingActionBar>
+			</FloatingBarContainer>
+		</FloatingActionsContext.Provider>
+	);
+}
+
+export function useFloatingActionsBar() {
+	const context = useContext( FloatingActionsContext );
+
+	if ( ! context ) {
+		throw new Error( 'useFloatingActions must be used within a FloatingActionsBar' );
+	}
+
+	return context;
+}

package/src/components/popover/__tests__/popover-action.test.tsx

@@ -0,0 +1,120 @@
+import * as React from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import { useFloatingActionsBar } from '../../floating-bar';
+import { PopoverAction } from '../popover-action';
+
+jest.mock( '../../floating-bar' );
+
+describe( 'PopoverAction', () => {
+	beforeEach( () => {
+		jest.mocked( useFloatingActionsBar ).mockReturnValue( {
+			setOpen: jest.fn(),
+			open: false,
+		} );
+	} );
+
+	it( 'renders the icon button with the correct title', () => {
+		// Arrange.
+		const title = 'Test Action';
+		const Icon = () => <span>Icon</span>;
+		const content = () => <div>Content</div>;
+
+		// Act.
+		render( <PopoverAction title={ title } icon={ Icon } content={ content } /> );
+
+		// Assert.
+		const button = screen.getByRole( 'button', { name: title } );
+		expect( button ).toBeInTheDocument();
+		expect( screen.getByText( 'Icon' ) ).toBeInTheDocument();
+	} );
+
+	it( 'does not render when visible is false', () => {
+		// Arrange & Act.
+		const { container } = render(
+			<PopoverAction
+				title="Hidden Action"
+				icon={ () => <span>Icon</span> }
+				content={ () => <div>Content</div> }
+				visible={ false }
+			/>
+		);
+
+		// Assert.
+		expect( container ).toBeEmptyDOMElement();
+	} );
+
+	it( 'renders the popover with the content', () => {
+		// Arrange.
+		const title = 'Test Action';
+		const Icon = () => <span>Icon</span>;
+		const content = () => <div> Content </div>;
+
+		// Act.
+		render( <PopoverAction title={ title } icon={ Icon } content={ content } /> );
+
+		fireEvent.click( screen.getByRole( 'button', { name: title } ) );
+
+		// Assert.
+		expect( screen.getByText( 'Content' ) ).toBeInTheDocument();
+	} );
+
+	it( 'calls setOpen when the button is clicked', () => {
+		// Arrange.
+		const setOpenMock = jest.fn();
+		jest.mocked( useFloatingActionsBar ).mockReturnValue( {
+			setOpen: setOpenMock,
+			open: false,
+		} );
+
+		const title = 'Test Action';
+		const Icon = () => <span>Icon</span>;
+		const content = () => <div>Content</div>;
+
+		// Act.
+		render( <PopoverAction title={ title } icon={ Icon } content={ content } /> );
+
+		fireEvent.click( screen.getByRole( 'button', { name: title } ) );
+
+		// Assert.
+		expect( setOpenMock ).toHaveBeenCalledWith( true );
+	} );
+
+	it( 'closes the popover when the close function is called', () => {
+		// Arrange.
+		const setOpenMock = jest.fn();
+		jest.mocked( useFloatingActionsBar ).mockReturnValue( {
+			setOpen: setOpenMock,
+			open: true,
+		} );
+
+		const title = 'Test Action';
+		const Icon = () => <span>Icon</span>;
+
+		// Act.
+		render(
+			<PopoverAction
+				title={ title }
+				icon={ Icon }
+				content={ ( { close } ) => (
+					<div>
+						Content
+						<button onClick={ close }>Close</button>
+					</div>
+				) }
+			/>
+		);
+
+		fireEvent.click( screen.getByRole( 'button', { name: title } ) );
+
+		// Assert.
+		expect( setOpenMock ).toHaveBeenCalledWith( true );
+
+		setOpenMock.mockClear();
+
+		// Act.
+		fireEvent.click( screen.getByText( 'Close' ) );
+
+		expect( setOpenMock ).toHaveBeenCalledWith( false );
+	} );
+} );

package/src/components/popover/index.ts

@@ -3,3 +3,4 @@ export { SectionPopoverBody } from './section-popover-body';
 export { PopoverHeader } from './header';
 export { ITEM_HEIGHT, PopoverMenuList, StyledMenuList } from './menu-list';
 export type { PopoverMenuListProps, VirtualizedItem } from './menu-list';
+export { PopoverAction, type PopoverActionProps } from './popover-action';

package/src/components/popover/popover-action.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { type ComponentType, type ElementType as ReactElementType } from 'react';
+import { bindPopover, bindTrigger, IconButton, Popover, Tooltip, usePopupState } from '@elementor/ui';
+
+import { useFloatingActionsBar } from '../floating-bar';
+
+const SIZE = 'tiny';
+
+export type PopoverActionProps = {
+	title: string;
+	visible?: boolean;
+	icon: ReactElementType;
+	content: ComponentType< { close: () => void } >;
+};
+
+export function PopoverAction( { title, visible = true, icon: Icon, content: PopoverContent }: PopoverActionProps ) {
+	const { popupState, triggerProps, popoverProps } = useFloatingActionsPopover();
+
+	if ( ! visible ) {
+		return null;
+	}
+
+	return (
+		<>
+			<Tooltip placement="top" title={ title }>
+				<IconButton aria-label={ title } size={ SIZE } { ...triggerProps }>
+					<Icon fontSize={ SIZE } />
+				</IconButton>
+			</Tooltip>
+			<Popover
+				disableScrollLock
+				anchorOrigin={ {
+					vertical: 'bottom',
+					horizontal: 'right',
+				} }
+				transformOrigin={ {
+					vertical: 'top',
+					horizontal: 'right',
+				} }
+				PaperProps={ {
+					sx: { my: 2.5 },
+				} }
+				{ ...popoverProps }
+			>
+				<PopoverContent close={ popupState.close } />
+			</Popover>
+		</>
+	);
+}
+
+export function useFloatingActionsPopover() {
+	const { setOpen } = useFloatingActionsBar();
+	const popupState = usePopupState( { variant: 'popover' } );
+
+	const triggerProps = bindTrigger( popupState );
+	const popoverProps = bindPopover( popupState );
+
+	const onClick = ( e: React.MouseEvent ) => {
+		triggerProps.onClick( e );
+		setOpen( true );
+	};
+
+	const onClose = () => {
+		popoverProps.onClose();
+		setOpen( false );
+	};
+
+	const close = () => {
+		popupState.close();
+		setOpen( false );
+	};
+
+	return {
+		popupState: { ...popupState, close },
+		triggerProps: { ...triggerProps, onClick },
+		popoverProps: { ...popoverProps, onClose },
+	};
+}

package/src/index.ts

@@ -15,6 +15,7 @@ export { CtaButton } from './components/cta-button';
 export { PromotionInfotip } from './components/promotion-infotip';
 export { PromotionPopover } from './components/promotion-popover';
 export { PromotionChip } from './components/promotion-chip';
+export { FloatingActionsBar, useFloatingActionsBar } from './components/floating-bar';
 
 export * from './components/popover';
 export * from './components/save-changes-dialog';