@elementor/menus 4.0.0-514 → 4.0.0-515

package/dist/index.d.mts

@@ -1,4 +1,6 @@
-import { ComponentType, ComponentPropsWithoutRef } from 'react';
+import * as React from 'react';
+import { ComponentType, ComponentPropsWithoutRef, ElementType } from 'react';
+import { PopoverAction } from '@elementor/editor-ui';
 
 type Components = Record<string, ComponentType<any>>;
 type MenuGroups<TGroups extends string> = TGroups | 'default';
@@ -39,4 +41,17 @@ type RegisterFns<TGroups extends string, TComponents extends Components> = {
     [K in keyof TComponents as `register${Capitalize<K & string>}`]: RegisterItem<TGroups, TComponents[K]>;
 };
 
-export { type Components, type Menu, createMenu };
+type ActionProps = {
+    title: string;
+    visible?: boolean;
+    icon: ElementType;
+    onClick: () => void;
+};
+declare function Action({ title, visible, icon: Icon, onClick }: ActionProps): React.JSX.Element | null;
+
+declare const controlActionsMenu: Menu<{
+    Action: typeof Action;
+    PopoverAction: typeof PopoverAction;
+}, "default">;
+
+export { type Components, type Menu, controlActionsMenu, createMenu };

package/dist/index.d.ts

@@ -1,4 +1,6 @@
-import { ComponentType, ComponentPropsWithoutRef } from 'react';
+import * as React from 'react';
+import { ComponentType, ComponentPropsWithoutRef, ElementType } from 'react';
+import { PopoverAction } from '@elementor/editor-ui';
 
 type Components = Record<string, ComponentType<any>>;
 type MenuGroups<TGroups extends string> = TGroups | 'default';
@@ -39,4 +41,17 @@ type RegisterFns<TGroups extends string, TComponents extends Components> = {
     [K in keyof TComponents as `register${Capitalize<K & string>}`]: RegisterItem<TGroups, TComponents[K]>;
 };
 
-export { type Components, type Menu, createMenu };
+type ActionProps = {
+    title: string;
+    visible?: boolean;
+    icon: ElementType;
+    onClick: () => void;
+};
+declare function Action({ title, visible, icon: Icon, onClick }: ActionProps): React.JSX.Element | null;
+
+declare const controlActionsMenu: Menu<{
+    Action: typeof Action;
+    PopoverAction: typeof PopoverAction;
+}, "default">;
+
+export { type Components, type Menu, controlActionsMenu, createMenu };

package/dist/index.js

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  controlActionsMenu: () => controlActionsMenu,
   createMenu: () => createMenu
 });
 module.exports = __toCommonJS(index_exports);
@@ -112,8 +113,31 @@ function createRegisterFns(locations, components) {
     {}
   );
 }
+
+// src/controls-actions.ts
+var import_editor_ui = require("@elementor/editor-ui");
+
+// src/action.tsx
+var React2 = __toESM(require("react"));
+var import_ui = require("@elementor/ui");
+var SIZE = "tiny";
+function Action({ title, visible = true, icon: Icon, onClick }) {
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement(import_ui.Tooltip, { placement: "top", title, arrow: true }, /* @__PURE__ */ React2.createElement(import_ui.IconButton, { "aria-label": title, size: SIZE, onClick }, /* @__PURE__ */ React2.createElement(Icon, { fontSize: SIZE })));
+}
+
+// src/controls-actions.ts
+var controlActionsMenu = createMenu({
+  components: {
+    Action,
+    PopoverAction: import_editor_ui.PopoverAction
+  }
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  controlActionsMenu,
   createMenu
 });
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/create-menu.ts","../src/create-register-item.tsx","../src/create-use-menu-items.ts"],"sourcesContent":["export { createMenu, type Menu } from './create-menu';\nexport { type Components } from './types';\n","import { createLocation } from '@elementor/locations';\nimport { capitalize } from '@elementor/utils';\n\nimport { createRegisterItem, type RegisterItem } from './create-register-item';\nimport { createUseMenuItems, type UseMenuItems } from './create-use-menu-items';\nimport { type Components, type LocationsMap, type MenuGroups } from './types';\n\nexport type Menu< TComponents extends Components, TGroups extends string > = {\n\tuseMenuItems: UseMenuItems< TGroups >;\n} & RegisterFns< TGroups, TComponents >;\n\nexport function createMenu< TComponents extends Components, TGroups extends string = 'default' >( {\n\tgroups = [],\n\tcomponents,\n}: {\n\tgroups?: TGroups[];\n\tcomponents: TComponents;\n} ): Menu< TComponents, TGroups > {\n\tconst locations = createLocations< MenuGroups< TGroups > >( [ ...groups, 'default' ] );\n\n\tconst registerFns = createRegisterFns( locations, components );\n\tconst useMenuItems = createUseMenuItems( locations );\n\n\treturn {\n\t\tuseMenuItems,\n\t\t...registerFns,\n\t};\n}\n\nfunction createLocations< TGroups extends string >( groups: TGroups[] ) {\n\treturn groups.reduce( ( acc, group ) => {\n\t\tacc[ group ] = createLocation();\n\n\t\treturn acc;\n\t}, {} as LocationsMap< TGroups > );\n}\n\ntype RegisterFns< TGroups extends string, TComponents extends Components > = {\n\t[ K in keyof TComponents as `register${ Capitalize< K & string > }` ]: RegisterItem< TGroups, TComponents[ K ] >;\n};\n\nfunction createRegisterFns< TGroups extends string, TComponents extends Components >(\n\tlocations: LocationsMap< MenuGroups< TGroups > >,\n\tcomponents: TComponents\n) {\n\treturn Object.entries( components ).reduce(\n\t\t( acc, [ key, component ] ) => {\n\t\t\tconst name = `register${ capitalize( key ) }`;\n\n\t\t\treturn {\n\t\t\t\t...acc,\n\t\t\t\t[ name ]: createRegisterItem( locations, component ),\n\t\t\t};\n\t\t},\n\t\t{} as RegisterFns< TGroups, TComponents >\n\t);\n}\n","import * as React from 'react';\nimport { type ComponentPropsWithoutRef, type ComponentType } from 'react';\n\nimport { type LocationsMap, type MenuGroups } from './types';\n\nexport type RegisterItem< TGroups extends string, TComponent extends ComponentType > = (\n\targs: {\n\t\tid: string;\n\t\tgroup?: MenuGroups< TGroups >;\n\t\tpriority?: number;\n\t\toverwrite?: boolean;\n\t} & Props< ComponentPropsWithoutRef< TComponent > >\n) => void;\n\ntype Props< TProps extends object > = unknown extends TProps ? NoProps : PropsOrUseProps< TProps >;\n\ntype NoProps = { props?: never; useProps?: never };\n\ntype PropsOrUseProps< TProps extends object > =\n\t| { props: TProps; useProps?: never }\n\t| {\n\t\t\tuseProps: () => TProps;\n\t\t\tprops?: never;\n\t  };\n\nexport function createRegisterItem< TGroups extends string, TComponent extends ComponentType >(\n\tlocations: LocationsMap< MenuGroups< TGroups > >,\n\tcomponent: TComponent\n): RegisterItem< TGroups, TComponent > {\n\treturn ( { id, group = 'default', priority = 10, overwrite = false, props: _props, useProps: _useProps } ) => {\n\t\tif ( ! ( group in locations ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst Component = component as ComponentType;\n\t\tconst useProps = _useProps || ( () => _props );\n\n\t\tconst InjectedComponent = ( props: object ) => {\n\t\t\tconst componentProps = useProps();\n\n\t\t\treturn <Component { ...props } { ...componentProps } />;\n\t\t};\n\n\t\tlocations[ group ].inject( {\n\t\t\tid,\n\t\t\tcomponent: InjectedComponent,\n\t\t\toptions: {\n\t\t\t\tpriority,\n\t\t\t\toverwrite,\n\t\t\t},\n\t\t} );\n\t};\n}\n","import { type ComponentType, useMemo } from 'react';\n\nimport { type LocationsMap, type MenuGroups } from './types';\n\nexport type UseMenuItems< TGroups extends string > = () => GroupedMenuItems< TGroups >;\n\ntype GroupedMenuItems< TGroups extends string > = Record<\n\tMenuGroups< TGroups >,\n\tArray< {\n\t\tid: string;\n\t\tMenuItem: ComponentType;\n\t} >\n>;\n\nexport function createUseMenuItems< TGroups extends string >(\n\tlocations: LocationsMap< MenuGroups< TGroups > >\n): UseMenuItems< TGroups > {\n\treturn () => {\n\t\t// Normalize the injections groups to an object with the groups as keys.\n\t\treturn useMemo( () => {\n\t\t\treturn Object.entries( locations ).reduce( ( carry, [ groupName, location ] ) => {\n\t\t\t\tconst items = location.getInjections().map( ( injection ) => ( {\n\t\t\t\t\tid: injection.id,\n\t\t\t\t\tMenuItem: injection.component,\n\t\t\t\t} ) );\n\n\t\t\t\treturn {\n\t\t\t\t\t...carry,\n\t\t\t\t\t[ groupName ]: items,\n\t\t\t\t};\n\t\t\t}, {} as GroupedMenuItems< TGroups > );\n\t\t}, [] );\n\t};\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,uBAA+B;AAC/B,mBAA2B;;;ACD3B,YAAuB;AAyBhB,SAAS,mBACf,WACA,WACsC;AACtC,SAAO,CAAE,EAAE,IAAI,QAAQ,WAAW,WAAW,IAAI,YAAY,OAAO,OAAO,QAAQ,UAAU,UAAU,MAAO;AAC7G,QAAK,EAAI,SAAS,YAAc;AAC/B;AAAA,IACD;AAEA,UAAM,YAAY;AAClB,UAAM,WAAW,cAAe,MAAM;AAEtC,UAAM,oBAAoB,CAAE,UAAmB;AAC9C,YAAM,iBAAiB,SAAS;AAEhC,aAAO,oCAAC,aAAY,GAAG,OAAU,GAAG,gBAAiB;AAAA,IACtD;AAEA,cAAW,KAAM,EAAE,OAAQ;AAAA,MAC1B;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,QACR;AAAA,QACA;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH;AACD;;;ACpDA,mBAA4C;AAcrC,SAAS,mBACf,WAC0B;AAC1B,SAAO,MAAM;AAEZ,eAAO,sBAAS,MAAM;AACrB,aAAO,OAAO,QAAS,SAAU,EAAE,OAAQ,CAAE,OAAO,CAAE,WAAW,QAAS,MAAO;AAChF,cAAM,QAAQ,SAAS,cAAc,EAAE,IAAK,CAAE,eAAiB;AAAA,UAC9D,IAAI,UAAU;AAAA,UACd,UAAU,UAAU;AAAA,QACrB,EAAI;AAEJ,eAAO;AAAA,UACN,GAAG;AAAA,UACH,CAAE,SAAU,GAAG;AAAA,QAChB;AAAA,MACD,GAAG,CAAC,CAAiC;AAAA,IACtC,GAAG,CAAC,CAAE;AAAA,EACP;AACD;;;AFtBO,SAAS,WAAkF;AAAA,EACjG,SAAS,CAAC;AAAA,EACV;AACD,GAGkC;AACjC,QAAM,YAAY,gBAA0C,CAAE,GAAG,QAAQ,SAAU,CAAE;AAErF,QAAM,cAAc,kBAAmB,WAAW,UAAW;AAC7D,QAAM,eAAe,mBAAoB,SAAU;AAEnD,SAAO;AAAA,IACN;AAAA,IACA,GAAG;AAAA,EACJ;AACD;AAEA,SAAS,gBAA2C,QAAoB;AACvE,SAAO,OAAO,OAAQ,CAAE,KAAK,UAAW;AACvC,QAAK,KAAM,QAAI,iCAAe;AAE9B,WAAO;AAAA,EACR,GAAG,CAAC,CAA6B;AAClC;AAMA,SAAS,kBACR,WACA,YACC;AACD,SAAO,OAAO,QAAS,UAAW,EAAE;AAAA,IACnC,CAAE,KAAK,CAAE,KAAK,SAAU,MAAO;AAC9B,YAAM,OAAO,eAAY,yBAAY,GAAI,CAAE;AAE3C,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,IAAK,GAAG,mBAAoB,WAAW,SAAU;AAAA,MACpD;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AACD;","names":[]}
+{"version":3,"sources":["../src/index.ts","../src/create-menu.ts","../src/create-register-item.tsx","../src/create-use-menu-items.ts","../src/controls-actions.ts","../src/action.tsx"],"sourcesContent":["export { createMenu, type Menu } from './create-menu';\nexport { type Components } from './types';\nexport { controlActionsMenu } from './controls-actions';\n","import { createLocation } from '@elementor/locations';\nimport { capitalize } from '@elementor/utils';\n\nimport { createRegisterItem, type RegisterItem } from './create-register-item';\nimport { createUseMenuItems, type UseMenuItems } from './create-use-menu-items';\nimport { type Components, type LocationsMap, type MenuGroups } from './types';\n\nexport type Menu< TComponents extends Components, TGroups extends string > = {\n\tuseMenuItems: UseMenuItems< TGroups >;\n} & RegisterFns< TGroups, TComponents >;\n\nexport function createMenu< TComponents extends Components, TGroups extends string = 'default' >( {\n\tgroups = [],\n\tcomponents,\n}: {\n\tgroups?: TGroups[];\n\tcomponents: TComponents;\n} ): Menu< TComponents, TGroups > {\n\tconst locations = createLocations< MenuGroups< TGroups > >( [ ...groups, 'default' ] );\n\n\tconst registerFns = createRegisterFns( locations, components );\n\tconst useMenuItems = createUseMenuItems( locations );\n\n\treturn {\n\t\tuseMenuItems,\n\t\t...registerFns,\n\t};\n}\n\nfunction createLocations< TGroups extends string >( groups: TGroups[] ) {\n\treturn groups.reduce( ( acc, group ) => {\n\t\tacc[ group ] = createLocation();\n\n\t\treturn acc;\n\t}, {} as LocationsMap< TGroups > );\n}\n\ntype RegisterFns< TGroups extends string, TComponents extends Components > = {\n\t[ K in keyof TComponents as `register${ Capitalize< K & string > }` ]: RegisterItem< TGroups, TComponents[ K ] >;\n};\n\nfunction createRegisterFns< TGroups extends string, TComponents extends Components >(\n\tlocations: LocationsMap< MenuGroups< TGroups > >,\n\tcomponents: TComponents\n) {\n\treturn Object.entries( components ).reduce(\n\t\t( acc, [ key, component ] ) => {\n\t\t\tconst name = `register${ capitalize( key ) }`;\n\n\t\t\treturn {\n\t\t\t\t...acc,\n\t\t\t\t[ name ]: createRegisterItem( locations, component ),\n\t\t\t};\n\t\t},\n\t\t{} as RegisterFns< TGroups, TComponents >\n\t);\n}\n","import * as React from 'react';\nimport { type ComponentPropsWithoutRef, type ComponentType } from 'react';\n\nimport { type LocationsMap, type MenuGroups } from './types';\n\nexport type RegisterItem< TGroups extends string, TComponent extends ComponentType > = (\n\targs: {\n\t\tid: string;\n\t\tgroup?: MenuGroups< TGroups >;\n\t\tpriority?: number;\n\t\toverwrite?: boolean;\n\t} & Props< ComponentPropsWithoutRef< TComponent > >\n) => void;\n\ntype Props< TProps extends object > = unknown extends TProps ? NoProps : PropsOrUseProps< TProps >;\n\ntype NoProps = { props?: never; useProps?: never };\n\ntype PropsOrUseProps< TProps extends object > =\n\t| { props: TProps; useProps?: never }\n\t| {\n\t\t\tuseProps: () => TProps;\n\t\t\tprops?: never;\n\t  };\n\nexport function createRegisterItem< TGroups extends string, TComponent extends ComponentType >(\n\tlocations: LocationsMap< MenuGroups< TGroups > >,\n\tcomponent: TComponent\n): RegisterItem< TGroups, TComponent > {\n\treturn ( { id, group = 'default', priority = 10, overwrite = false, props: _props, useProps: _useProps } ) => {\n\t\tif ( ! ( group in locations ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst Component = component as ComponentType;\n\t\tconst useProps = _useProps || ( () => _props );\n\n\t\tconst InjectedComponent = ( props: object ) => {\n\t\t\tconst componentProps = useProps();\n\n\t\t\treturn <Component { ...props } { ...componentProps } />;\n\t\t};\n\n\t\tlocations[ group ].inject( {\n\t\t\tid,\n\t\t\tcomponent: InjectedComponent,\n\t\t\toptions: {\n\t\t\t\tpriority,\n\t\t\t\toverwrite,\n\t\t\t},\n\t\t} );\n\t};\n}\n","import { type ComponentType, useMemo } from 'react';\n\nimport { type LocationsMap, type MenuGroups } from './types';\n\nexport type UseMenuItems< TGroups extends string > = () => GroupedMenuItems< TGroups >;\n\ntype GroupedMenuItems< TGroups extends string > = Record<\n\tMenuGroups< TGroups >,\n\tArray< {\n\t\tid: string;\n\t\tMenuItem: ComponentType;\n\t} >\n>;\n\nexport function createUseMenuItems< TGroups extends string >(\n\tlocations: LocationsMap< MenuGroups< TGroups > >\n): UseMenuItems< TGroups > {\n\treturn () => {\n\t\t// Normalize the injections groups to an object with the groups as keys.\n\t\treturn useMemo( () => {\n\t\t\treturn Object.entries( locations ).reduce( ( carry, [ groupName, location ] ) => {\n\t\t\t\tconst items = location.getInjections().map( ( injection ) => ( {\n\t\t\t\t\tid: injection.id,\n\t\t\t\t\tMenuItem: injection.component,\n\t\t\t\t} ) );\n\n\t\t\t\treturn {\n\t\t\t\t\t...carry,\n\t\t\t\t\t[ groupName ]: items,\n\t\t\t\t};\n\t\t\t}, {} as GroupedMenuItems< TGroups > );\n\t\t}, [] );\n\t};\n}\n","import { PopoverAction } from '@elementor/editor-ui';\n\nimport Action from './action';\nimport { createMenu } from './create-menu';\n\nexport const controlActionsMenu = createMenu( {\n\tcomponents: {\n\t\tAction,\n\t\tPopoverAction,\n\t},\n} );\n","import * as React from 'react';\nimport { type ElementType as ReactElementType } from 'react';\nimport { IconButton, Tooltip } from '@elementor/ui';\n\nconst SIZE = 'tiny';\n\ntype ActionProps = {\n\ttitle: string;\n\tvisible?: boolean;\n\ticon: ReactElementType;\n\tonClick: () => void;\n};\n\nexport default function Action( { title, visible = true, icon: Icon, onClick }: ActionProps ) {\n\tif ( ! visible ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Tooltip placement=\"top\" title={ title } arrow={ true }>\n\t\t\t<IconButton aria-label={ title } size={ SIZE } onClick={ onClick }>\n\t\t\t\t<Icon fontSize={ SIZE } />\n\t\t\t</IconButton>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,uBAA+B;AAC/B,mBAA2B;;;ACD3B,YAAuB;AAyBhB,SAAS,mBACf,WACA,WACsC;AACtC,SAAO,CAAE,EAAE,IAAI,QAAQ,WAAW,WAAW,IAAI,YAAY,OAAO,OAAO,QAAQ,UAAU,UAAU,MAAO;AAC7G,QAAK,EAAI,SAAS,YAAc;AAC/B;AAAA,IACD;AAEA,UAAM,YAAY;AAClB,UAAM,WAAW,cAAe,MAAM;AAEtC,UAAM,oBAAoB,CAAE,UAAmB;AAC9C,YAAM,iBAAiB,SAAS;AAEhC,aAAO,oCAAC,aAAY,GAAG,OAAU,GAAG,gBAAiB;AAAA,IACtD;AAEA,cAAW,KAAM,EAAE,OAAQ;AAAA,MAC1B;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,QACR;AAAA,QACA;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH;AACD;;;ACpDA,mBAA4C;AAcrC,SAAS,mBACf,WAC0B;AAC1B,SAAO,MAAM;AAEZ,eAAO,sBAAS,MAAM;AACrB,aAAO,OAAO,QAAS,SAAU,EAAE,OAAQ,CAAE,OAAO,CAAE,WAAW,QAAS,MAAO;AAChF,cAAM,QAAQ,SAAS,cAAc,EAAE,IAAK,CAAE,eAAiB;AAAA,UAC9D,IAAI,UAAU;AAAA,UACd,UAAU,UAAU;AAAA,QACrB,EAAI;AAEJ,eAAO;AAAA,UACN,GAAG;AAAA,UACH,CAAE,SAAU,GAAG;AAAA,QAChB;AAAA,MACD,GAAG,CAAC,CAAiC;AAAA,IACtC,GAAG,CAAC,CAAE;AAAA,EACP;AACD;;;AFtBO,SAAS,WAAkF;AAAA,EACjG,SAAS,CAAC;AAAA,EACV;AACD,GAGkC;AACjC,QAAM,YAAY,gBAA0C,CAAE,GAAG,QAAQ,SAAU,CAAE;AAErF,QAAM,cAAc,kBAAmB,WAAW,UAAW;AAC7D,QAAM,eAAe,mBAAoB,SAAU;AAEnD,SAAO;AAAA,IACN;AAAA,IACA,GAAG;AAAA,EACJ;AACD;AAEA,SAAS,gBAA2C,QAAoB;AACvE,SAAO,OAAO,OAAQ,CAAE,KAAK,UAAW;AACvC,QAAK,KAAM,QAAI,iCAAe;AAE9B,WAAO;AAAA,EACR,GAAG,CAAC,CAA6B;AAClC;AAMA,SAAS,kBACR,WACA,YACC;AACD,SAAO,OAAO,QAAS,UAAW,EAAE;AAAA,IACnC,CAAE,KAAK,CAAE,KAAK,SAAU,MAAO;AAC9B,YAAM,OAAO,eAAY,yBAAY,GAAI,CAAE;AAE3C,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,IAAK,GAAG,mBAAoB,WAAW,SAAU;AAAA,MACpD;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AACD;;;AGxDA,uBAA8B;;;ACA9B,IAAAA,SAAuB;AAEvB,gBAAoC;AAEpC,IAAM,OAAO;AASE,SAAR,OAAyB,EAAE,OAAO,UAAU,MAAM,MAAM,MAAM,QAAQ,GAAiB;AAC7F,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAEA,SACC,qCAAC,qBAAQ,WAAU,OAAM,OAAgB,OAAQ,QAChD,qCAAC,wBAAW,cAAa,OAAQ,MAAO,MAAO,WAC9C,qCAAC,QAAK,UAAW,MAAO,CACzB,CACD;AAEF;;;ADpBO,IAAM,qBAAqB,WAAY;AAAA,EAC7C,YAAY;AAAA,IACX;AAAA,IACA;AAAA,EACD;AACD,CAAE;","names":["React"]}

package/dist/index.mjs

@@ -76,7 +76,30 @@ function createRegisterFns(locations, components) {
     {}
   );
 }
+
+// src/controls-actions.ts
+import { PopoverAction } from "@elementor/editor-ui";
+
+// src/action.tsx
+import * as React2 from "react";
+import { IconButton, Tooltip } from "@elementor/ui";
+var SIZE = "tiny";
+function Action({ title, visible = true, icon: Icon, onClick }) {
+  if (!visible) {
+    return null;
+  }
+  return /* @__PURE__ */ React2.createElement(Tooltip, { placement: "top", title, arrow: true }, /* @__PURE__ */ React2.createElement(IconButton, { "aria-label": title, size: SIZE, onClick }, /* @__PURE__ */ React2.createElement(Icon, { fontSize: SIZE })));
+}
+
+// src/controls-actions.ts
+var controlActionsMenu = createMenu({
+  components: {
+    Action,
+    PopoverAction
+  }
+});
 export {
+  controlActionsMenu,
   createMenu
 };
 //# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/create-menu.ts","../src/create-register-item.tsx","../src/create-use-menu-items.ts"],"sourcesContent":["import { createLocation } from '@elementor/locations';\nimport { capitalize } from '@elementor/utils';\n\nimport { createRegisterItem, type RegisterItem } from './create-register-item';\nimport { createUseMenuItems, type UseMenuItems } from './create-use-menu-items';\nimport { type Components, type LocationsMap, type MenuGroups } from './types';\n\nexport type Menu< TComponents extends Components, TGroups extends string > = {\n\tuseMenuItems: UseMenuItems< TGroups >;\n} & RegisterFns< TGroups, TComponents >;\n\nexport function createMenu< TComponents extends Components, TGroups extends string = 'default' >( {\n\tgroups = [],\n\tcomponents,\n}: {\n\tgroups?: TGroups[];\n\tcomponents: TComponents;\n} ): Menu< TComponents, TGroups > {\n\tconst locations = createLocations< MenuGroups< TGroups > >( [ ...groups, 'default' ] );\n\n\tconst registerFns = createRegisterFns( locations, components );\n\tconst useMenuItems = createUseMenuItems( locations );\n\n\treturn {\n\t\tuseMenuItems,\n\t\t...registerFns,\n\t};\n}\n\nfunction createLocations< TGroups extends string >( groups: TGroups[] ) {\n\treturn groups.reduce( ( acc, group ) => {\n\t\tacc[ group ] = createLocation();\n\n\t\treturn acc;\n\t}, {} as LocationsMap< TGroups > );\n}\n\ntype RegisterFns< TGroups extends string, TComponents extends Components > = {\n\t[ K in keyof TComponents as `register${ Capitalize< K & string > }` ]: RegisterItem< TGroups, TComponents[ K ] >;\n};\n\nfunction createRegisterFns< TGroups extends string, TComponents extends Components >(\n\tlocations: LocationsMap< MenuGroups< TGroups > >,\n\tcomponents: TComponents\n) {\n\treturn Object.entries( components ).reduce(\n\t\t( acc, [ key, component ] ) => {\n\t\t\tconst name = `register${ capitalize( key ) }`;\n\n\t\t\treturn {\n\t\t\t\t...acc,\n\t\t\t\t[ name ]: createRegisterItem( locations, component ),\n\t\t\t};\n\t\t},\n\t\t{} as RegisterFns< TGroups, TComponents >\n\t);\n}\n","import * as React from 'react';\nimport { type ComponentPropsWithoutRef, type ComponentType } from 'react';\n\nimport { type LocationsMap, type MenuGroups } from './types';\n\nexport type RegisterItem< TGroups extends string, TComponent extends ComponentType > = (\n\targs: {\n\t\tid: string;\n\t\tgroup?: MenuGroups< TGroups >;\n\t\tpriority?: number;\n\t\toverwrite?: boolean;\n\t} & Props< ComponentPropsWithoutRef< TComponent > >\n) => void;\n\ntype Props< TProps extends object > = unknown extends TProps ? NoProps : PropsOrUseProps< TProps >;\n\ntype NoProps = { props?: never; useProps?: never };\n\ntype PropsOrUseProps< TProps extends object > =\n\t| { props: TProps; useProps?: never }\n\t| {\n\t\t\tuseProps: () => TProps;\n\t\t\tprops?: never;\n\t  };\n\nexport function createRegisterItem< TGroups extends string, TComponent extends ComponentType >(\n\tlocations: LocationsMap< MenuGroups< TGroups > >,\n\tcomponent: TComponent\n): RegisterItem< TGroups, TComponent > {\n\treturn ( { id, group = 'default', priority = 10, overwrite = false, props: _props, useProps: _useProps } ) => {\n\t\tif ( ! ( group in locations ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst Component = component as ComponentType;\n\t\tconst useProps = _useProps || ( () => _props );\n\n\t\tconst InjectedComponent = ( props: object ) => {\n\t\t\tconst componentProps = useProps();\n\n\t\t\treturn <Component { ...props } { ...componentProps } />;\n\t\t};\n\n\t\tlocations[ group ].inject( {\n\t\t\tid,\n\t\t\tcomponent: InjectedComponent,\n\t\t\toptions: {\n\t\t\t\tpriority,\n\t\t\t\toverwrite,\n\t\t\t},\n\t\t} );\n\t};\n}\n","import { type ComponentType, useMemo } from 'react';\n\nimport { type LocationsMap, type MenuGroups } from './types';\n\nexport type UseMenuItems< TGroups extends string > = () => GroupedMenuItems< TGroups >;\n\ntype GroupedMenuItems< TGroups extends string > = Record<\n\tMenuGroups< TGroups >,\n\tArray< {\n\t\tid: string;\n\t\tMenuItem: ComponentType;\n\t} >\n>;\n\nexport function createUseMenuItems< TGroups extends string >(\n\tlocations: LocationsMap< MenuGroups< TGroups > >\n): UseMenuItems< TGroups > {\n\treturn () => {\n\t\t// Normalize the injections groups to an object with the groups as keys.\n\t\treturn useMemo( () => {\n\t\t\treturn Object.entries( locations ).reduce( ( carry, [ groupName, location ] ) => {\n\t\t\t\tconst items = location.getInjections().map( ( injection ) => ( {\n\t\t\t\t\tid: injection.id,\n\t\t\t\t\tMenuItem: injection.component,\n\t\t\t\t} ) );\n\n\t\t\t\treturn {\n\t\t\t\t\t...carry,\n\t\t\t\t\t[ groupName ]: items,\n\t\t\t\t};\n\t\t\t}, {} as GroupedMenuItems< TGroups > );\n\t\t}, [] );\n\t};\n}\n"],"mappings":";AAAA,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;;;ACD3B,YAAY,WAAW;AAyBhB,SAAS,mBACf,WACA,WACsC;AACtC,SAAO,CAAE,EAAE,IAAI,QAAQ,WAAW,WAAW,IAAI,YAAY,OAAO,OAAO,QAAQ,UAAU,UAAU,MAAO;AAC7G,QAAK,EAAI,SAAS,YAAc;AAC/B;AAAA,IACD;AAEA,UAAM,YAAY;AAClB,UAAM,WAAW,cAAe,MAAM;AAEtC,UAAM,oBAAoB,CAAE,UAAmB;AAC9C,YAAM,iBAAiB,SAAS;AAEhC,aAAO,oCAAC,aAAY,GAAG,OAAU,GAAG,gBAAiB;AAAA,IACtD;AAEA,cAAW,KAAM,EAAE,OAAQ;AAAA,MAC1B;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,QACR;AAAA,QACA;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH;AACD;;;ACpDA,SAA6B,eAAe;AAcrC,SAAS,mBACf,WAC0B;AAC1B,SAAO,MAAM;AAEZ,WAAO,QAAS,MAAM;AACrB,aAAO,OAAO,QAAS,SAAU,EAAE,OAAQ,CAAE,OAAO,CAAE,WAAW,QAAS,MAAO;AAChF,cAAM,QAAQ,SAAS,cAAc,EAAE,IAAK,CAAE,eAAiB;AAAA,UAC9D,IAAI,UAAU;AAAA,UACd,UAAU,UAAU;AAAA,QACrB,EAAI;AAEJ,eAAO;AAAA,UACN,GAAG;AAAA,UACH,CAAE,SAAU,GAAG;AAAA,QAChB;AAAA,MACD,GAAG,CAAC,CAAiC;AAAA,IACtC,GAAG,CAAC,CAAE;AAAA,EACP;AACD;;;AFtBO,SAAS,WAAkF;AAAA,EACjG,SAAS,CAAC;AAAA,EACV;AACD,GAGkC;AACjC,QAAM,YAAY,gBAA0C,CAAE,GAAG,QAAQ,SAAU,CAAE;AAErF,QAAM,cAAc,kBAAmB,WAAW,UAAW;AAC7D,QAAM,eAAe,mBAAoB,SAAU;AAEnD,SAAO;AAAA,IACN;AAAA,IACA,GAAG;AAAA,EACJ;AACD;AAEA,SAAS,gBAA2C,QAAoB;AACvE,SAAO,OAAO,OAAQ,CAAE,KAAK,UAAW;AACvC,QAAK,KAAM,IAAI,eAAe;AAE9B,WAAO;AAAA,EACR,GAAG,CAAC,CAA6B;AAClC;AAMA,SAAS,kBACR,WACA,YACC;AACD,SAAO,OAAO,QAAS,UAAW,EAAE;AAAA,IACnC,CAAE,KAAK,CAAE,KAAK,SAAU,MAAO;AAC9B,YAAM,OAAO,WAAY,WAAY,GAAI,CAAE;AAE3C,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,IAAK,GAAG,mBAAoB,WAAW,SAAU;AAAA,MACpD;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AACD;","names":[]}
+{"version":3,"sources":["../src/create-menu.ts","../src/create-register-item.tsx","../src/create-use-menu-items.ts","../src/controls-actions.ts","../src/action.tsx"],"sourcesContent":["import { createLocation } from '@elementor/locations';\nimport { capitalize } from '@elementor/utils';\n\nimport { createRegisterItem, type RegisterItem } from './create-register-item';\nimport { createUseMenuItems, type UseMenuItems } from './create-use-menu-items';\nimport { type Components, type LocationsMap, type MenuGroups } from './types';\n\nexport type Menu< TComponents extends Components, TGroups extends string > = {\n\tuseMenuItems: UseMenuItems< TGroups >;\n} & RegisterFns< TGroups, TComponents >;\n\nexport function createMenu< TComponents extends Components, TGroups extends string = 'default' >( {\n\tgroups = [],\n\tcomponents,\n}: {\n\tgroups?: TGroups[];\n\tcomponents: TComponents;\n} ): Menu< TComponents, TGroups > {\n\tconst locations = createLocations< MenuGroups< TGroups > >( [ ...groups, 'default' ] );\n\n\tconst registerFns = createRegisterFns( locations, components );\n\tconst useMenuItems = createUseMenuItems( locations );\n\n\treturn {\n\t\tuseMenuItems,\n\t\t...registerFns,\n\t};\n}\n\nfunction createLocations< TGroups extends string >( groups: TGroups[] ) {\n\treturn groups.reduce( ( acc, group ) => {\n\t\tacc[ group ] = createLocation();\n\n\t\treturn acc;\n\t}, {} as LocationsMap< TGroups > );\n}\n\ntype RegisterFns< TGroups extends string, TComponents extends Components > = {\n\t[ K in keyof TComponents as `register${ Capitalize< K & string > }` ]: RegisterItem< TGroups, TComponents[ K ] >;\n};\n\nfunction createRegisterFns< TGroups extends string, TComponents extends Components >(\n\tlocations: LocationsMap< MenuGroups< TGroups > >,\n\tcomponents: TComponents\n) {\n\treturn Object.entries( components ).reduce(\n\t\t( acc, [ key, component ] ) => {\n\t\t\tconst name = `register${ capitalize( key ) }`;\n\n\t\t\treturn {\n\t\t\t\t...acc,\n\t\t\t\t[ name ]: createRegisterItem( locations, component ),\n\t\t\t};\n\t\t},\n\t\t{} as RegisterFns< TGroups, TComponents >\n\t);\n}\n","import * as React from 'react';\nimport { type ComponentPropsWithoutRef, type ComponentType } from 'react';\n\nimport { type LocationsMap, type MenuGroups } from './types';\n\nexport type RegisterItem< TGroups extends string, TComponent extends ComponentType > = (\n\targs: {\n\t\tid: string;\n\t\tgroup?: MenuGroups< TGroups >;\n\t\tpriority?: number;\n\t\toverwrite?: boolean;\n\t} & Props< ComponentPropsWithoutRef< TComponent > >\n) => void;\n\ntype Props< TProps extends object > = unknown extends TProps ? NoProps : PropsOrUseProps< TProps >;\n\ntype NoProps = { props?: never; useProps?: never };\n\ntype PropsOrUseProps< TProps extends object > =\n\t| { props: TProps; useProps?: never }\n\t| {\n\t\t\tuseProps: () => TProps;\n\t\t\tprops?: never;\n\t  };\n\nexport function createRegisterItem< TGroups extends string, TComponent extends ComponentType >(\n\tlocations: LocationsMap< MenuGroups< TGroups > >,\n\tcomponent: TComponent\n): RegisterItem< TGroups, TComponent > {\n\treturn ( { id, group = 'default', priority = 10, overwrite = false, props: _props, useProps: _useProps } ) => {\n\t\tif ( ! ( group in locations ) ) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst Component = component as ComponentType;\n\t\tconst useProps = _useProps || ( () => _props );\n\n\t\tconst InjectedComponent = ( props: object ) => {\n\t\t\tconst componentProps = useProps();\n\n\t\t\treturn <Component { ...props } { ...componentProps } />;\n\t\t};\n\n\t\tlocations[ group ].inject( {\n\t\t\tid,\n\t\t\tcomponent: InjectedComponent,\n\t\t\toptions: {\n\t\t\t\tpriority,\n\t\t\t\toverwrite,\n\t\t\t},\n\t\t} );\n\t};\n}\n","import { type ComponentType, useMemo } from 'react';\n\nimport { type LocationsMap, type MenuGroups } from './types';\n\nexport type UseMenuItems< TGroups extends string > = () => GroupedMenuItems< TGroups >;\n\ntype GroupedMenuItems< TGroups extends string > = Record<\n\tMenuGroups< TGroups >,\n\tArray< {\n\t\tid: string;\n\t\tMenuItem: ComponentType;\n\t} >\n>;\n\nexport function createUseMenuItems< TGroups extends string >(\n\tlocations: LocationsMap< MenuGroups< TGroups > >\n): UseMenuItems< TGroups > {\n\treturn () => {\n\t\t// Normalize the injections groups to an object with the groups as keys.\n\t\treturn useMemo( () => {\n\t\t\treturn Object.entries( locations ).reduce( ( carry, [ groupName, location ] ) => {\n\t\t\t\tconst items = location.getInjections().map( ( injection ) => ( {\n\t\t\t\t\tid: injection.id,\n\t\t\t\t\tMenuItem: injection.component,\n\t\t\t\t} ) );\n\n\t\t\t\treturn {\n\t\t\t\t\t...carry,\n\t\t\t\t\t[ groupName ]: items,\n\t\t\t\t};\n\t\t\t}, {} as GroupedMenuItems< TGroups > );\n\t\t}, [] );\n\t};\n}\n","import { PopoverAction } from '@elementor/editor-ui';\n\nimport Action from './action';\nimport { createMenu } from './create-menu';\n\nexport const controlActionsMenu = createMenu( {\n\tcomponents: {\n\t\tAction,\n\t\tPopoverAction,\n\t},\n} );\n","import * as React from 'react';\nimport { type ElementType as ReactElementType } from 'react';\nimport { IconButton, Tooltip } from '@elementor/ui';\n\nconst SIZE = 'tiny';\n\ntype ActionProps = {\n\ttitle: string;\n\tvisible?: boolean;\n\ticon: ReactElementType;\n\tonClick: () => void;\n};\n\nexport default function Action( { title, visible = true, icon: Icon, onClick }: ActionProps ) {\n\tif ( ! visible ) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<Tooltip placement=\"top\" title={ title } arrow={ true }>\n\t\t\t<IconButton aria-label={ title } size={ SIZE } onClick={ onClick }>\n\t\t\t\t<Icon fontSize={ SIZE } />\n\t\t\t</IconButton>\n\t\t</Tooltip>\n\t);\n}\n"],"mappings":";AAAA,SAAS,sBAAsB;AAC/B,SAAS,kBAAkB;;;ACD3B,YAAY,WAAW;AAyBhB,SAAS,mBACf,WACA,WACsC;AACtC,SAAO,CAAE,EAAE,IAAI,QAAQ,WAAW,WAAW,IAAI,YAAY,OAAO,OAAO,QAAQ,UAAU,UAAU,MAAO;AAC7G,QAAK,EAAI,SAAS,YAAc;AAC/B;AAAA,IACD;AAEA,UAAM,YAAY;AAClB,UAAM,WAAW,cAAe,MAAM;AAEtC,UAAM,oBAAoB,CAAE,UAAmB;AAC9C,YAAM,iBAAiB,SAAS;AAEhC,aAAO,oCAAC,aAAY,GAAG,OAAU,GAAG,gBAAiB;AAAA,IACtD;AAEA,cAAW,KAAM,EAAE,OAAQ;AAAA,MAC1B;AAAA,MACA,WAAW;AAAA,MACX,SAAS;AAAA,QACR;AAAA,QACA;AAAA,MACD;AAAA,IACD,CAAE;AAAA,EACH;AACD;;;ACpDA,SAA6B,eAAe;AAcrC,SAAS,mBACf,WAC0B;AAC1B,SAAO,MAAM;AAEZ,WAAO,QAAS,MAAM;AACrB,aAAO,OAAO,QAAS,SAAU,EAAE,OAAQ,CAAE,OAAO,CAAE,WAAW,QAAS,MAAO;AAChF,cAAM,QAAQ,SAAS,cAAc,EAAE,IAAK,CAAE,eAAiB;AAAA,UAC9D,IAAI,UAAU;AAAA,UACd,UAAU,UAAU;AAAA,QACrB,EAAI;AAEJ,eAAO;AAAA,UACN,GAAG;AAAA,UACH,CAAE,SAAU,GAAG;AAAA,QAChB;AAAA,MACD,GAAG,CAAC,CAAiC;AAAA,IACtC,GAAG,CAAC,CAAE;AAAA,EACP;AACD;;;AFtBO,SAAS,WAAkF;AAAA,EACjG,SAAS,CAAC;AAAA,EACV;AACD,GAGkC;AACjC,QAAM,YAAY,gBAA0C,CAAE,GAAG,QAAQ,SAAU,CAAE;AAErF,QAAM,cAAc,kBAAmB,WAAW,UAAW;AAC7D,QAAM,eAAe,mBAAoB,SAAU;AAEnD,SAAO;AAAA,IACN;AAAA,IACA,GAAG;AAAA,EACJ;AACD;AAEA,SAAS,gBAA2C,QAAoB;AACvE,SAAO,OAAO,OAAQ,CAAE,KAAK,UAAW;AACvC,QAAK,KAAM,IAAI,eAAe;AAE9B,WAAO;AAAA,EACR,GAAG,CAAC,CAA6B;AAClC;AAMA,SAAS,kBACR,WACA,YACC;AACD,SAAO,OAAO,QAAS,UAAW,EAAE;AAAA,IACnC,CAAE,KAAK,CAAE,KAAK,SAAU,MAAO;AAC9B,YAAM,OAAO,WAAY,WAAY,GAAI,CAAE;AAE3C,aAAO;AAAA,QACN,GAAG;AAAA,QACH,CAAE,IAAK,GAAG,mBAAoB,WAAW,SAAU;AAAA,MACpD;AAAA,IACD;AAAA,IACA,CAAC;AAAA,EACF;AACD;;;AGxDA,SAAS,qBAAqB;;;ACA9B,YAAYA,YAAW;AAEvB,SAAS,YAAY,eAAe;AAEpC,IAAM,OAAO;AASE,SAAR,OAAyB,EAAE,OAAO,UAAU,MAAM,MAAM,MAAM,QAAQ,GAAiB;AAC7F,MAAK,CAAE,SAAU;AAChB,WAAO;AAAA,EACR;AAEA,SACC,qCAAC,WAAQ,WAAU,OAAM,OAAgB,OAAQ,QAChD,qCAAC,cAAW,cAAa,OAAQ,MAAO,MAAO,WAC9C,qCAAC,QAAK,UAAW,MAAO,CACzB,CACD;AAEF;;;ADpBO,IAAM,qBAAqB,WAAY;AAAA,EAC7C,YAAY;AAAA,IACX;AAAA,IACA;AAAA,EACD;AACD,CAAE;","names":["React"]}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/menus",
   "description": "Add a menus registration mechanism for you React application",
-  "version": "4.0.0-514",
+  "version": "4.0.0-515",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,8 +40,10 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/locations": "4.0.0-514",
-    "@elementor/utils": "4.0.0-514"
+    "@elementor/locations": "4.0.0-515",
+    "@elementor/utils": "4.0.0-515",
+    "@elementor/editor-ui": "4.0.0-515",
+    "@elementor/ui": "1.36.17"
   },
   "peerDependencies": {
     "react": "^18.3.1"

package/src/action.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { type ElementType as ReactElementType } from 'react';
+import { IconButton, Tooltip } from '@elementor/ui';
+
+const SIZE = 'tiny';
+
+type ActionProps = {
+	title: string;
+	visible?: boolean;
+	icon: ReactElementType;
+	onClick: () => void;
+};
+
+export default function Action( { title, visible = true, icon: Icon, onClick }: ActionProps ) {
+	if ( ! visible ) {
+		return null;
+	}
+
+	return (
+		<Tooltip placement="top" title={ title } arrow={ true }>
+			<IconButton aria-label={ title } size={ SIZE } onClick={ onClick }>
+				<Icon fontSize={ SIZE } />
+			</IconButton>
+		</Tooltip>
+	);
+}

package/src/controls-actions.ts

@@ -0,0 +1,11 @@
+import { PopoverAction } from '@elementor/editor-ui';
+
+import Action from './action';
+import { createMenu } from './create-menu';
+
+export const controlActionsMenu = createMenu( {
+	components: {
+		Action,
+		PopoverAction,
+	},
+} );

package/src/index.ts

@@ -1,2 +1,3 @@
 export { createMenu, type Menu } from './create-menu';
 export { type Components } from './types';
+export { controlActionsMenu } from './controls-actions';