@elementor/menus 4.0.0-manual → 4.0.0

package/dist/index.js

@@ -41,7 +41,7 @@ var import_utils = require("@elementor/utils");
 
 // src/create-register-item.tsx
 var React = __toESM(require("react"));
-function createRegisterItem(locations, component) {
+function createRegisterItem(locations, component, notify) {
   return ({ id, group = "default", priority = 10, overwrite = false, props: _props, useProps: _useProps }) => {
     if (!(group in locations)) {
       return;
@@ -60,36 +60,55 @@ function createRegisterItem(locations, component) {
         overwrite
       }
     });
+    notify();
   };
 }
 
 // src/create-use-menu-items.ts
 var import_react = require("react");
-function createUseMenuItems(locations) {
-  return () => {
-    return (0, import_react.useMemo)(() => {
-      return Object.entries(locations).reduce((carry, [groupName, location]) => {
-        const items = location.getInjections().map((injection) => ({
-          id: injection.id,
-          MenuItem: injection.component
-        }));
-        return {
-          ...carry,
-          [groupName]: items
-        };
-      }, {});
-    }, []);
+function createUseMenuItems(locations, subscribe) {
+  let snapshot = null;
+  subscribe(() => {
+    snapshot = null;
+  });
+  const getMenuItems = () => {
+    if (snapshot) {
+      return snapshot;
+    }
+    snapshot = Object.entries(locations).reduce((carry, [groupName, location]) => {
+      const items = location.getInjections().map((injection) => ({
+        id: injection.id,
+        MenuItem: injection.component
+      }));
+      return {
+        ...carry,
+        [groupName]: items
+      };
+    }, {});
+    return snapshot;
   };
+  return () => (0, import_react.useSyncExternalStore)(subscribe, getMenuItems);
 }
 
 // src/create-menu.ts
+function createSubscription() {
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    notify: () => listeners.forEach((listener) => listener())
+  };
+}
 function createMenu({
   groups = [],
   components
 }) {
   const locations = createLocations([...groups, "default"]);
-  const registerFns = createRegisterFns(locations, components);
-  const useMenuItems = createUseMenuItems(locations);
+  const { subscribe, notify } = createSubscription();
+  const registerFns = createRegisterFns(locations, components, notify);
+  const useMenuItems = createUseMenuItems(locations, subscribe);
   return {
     useMenuItems,
     ...registerFns
@@ -101,13 +120,13 @@ function createLocations(groups) {
     return acc;
   }, {});
 }
-function createRegisterFns(locations, components) {
+function createRegisterFns(locations, components, notify) {
   return Object.entries(components).reduce(
     (acc, [key, component]) => {
       const name = `register${(0, import_utils.capitalize)(key)}`;
       return {
         ...acc,
-        [name]: createRegisterItem(locations, component)
+        [name]: createRegisterItem(locations, component, notify)
       };
     },
     {}

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","../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"]}
+{"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\ntype Subscription = {\n\tsubscribe: ( listener: () => void ) => () => void;\n\tnotify: () => void;\n};\n\nfunction createSubscription(): Subscription {\n\tconst listeners = new Set< () => void >();\n\n\treturn {\n\t\tsubscribe: ( listener ) => {\n\t\t\tlisteners.add( listener );\n\t\t\treturn () => listeners.delete( listener );\n\t\t},\n\t\tnotify: () => listeners.forEach( ( listener ) => listener() ),\n\t};\n}\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\tconst { subscribe, notify } = createSubscription();\n\n\tconst registerFns = createRegisterFns( locations, components, notify );\n\tconst useMenuItems = createUseMenuItems( locations, subscribe );\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\tnotify: () => void\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, notify ),\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\tnotify: () => void\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\n\t\tnotify();\n\t};\n}\n","import { type ComponentType, useSyncExternalStore } 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\tsubscribe: ( listener: () => void ) => () => void\n): UseMenuItems< TGroups > {\n\tlet snapshot: GroupedMenuItems< TGroups > | null = null;\n\n\tsubscribe( () => {\n\t\tsnapshot = null;\n\t} );\n\n\tconst getMenuItems = () => {\n\t\tif ( snapshot ) {\n\t\t\treturn snapshot;\n\t\t}\n\t\tsnapshot = Object.entries( locations ).reduce( ( carry, [ groupName, location ] ) => {\n\t\t\tconst items = location.getInjections().map( ( injection ) => ( {\n\t\t\t\tid: injection.id,\n\t\t\t\tMenuItem: injection.component,\n\t\t\t} ) );\n\n\t\t\treturn {\n\t\t\t\t...carry,\n\t\t\t\t[ groupName ]: items,\n\t\t\t};\n\t\t}, {} as GroupedMenuItems< TGroups > );\n\n\t\treturn snapshot;\n\t};\n\n\treturn () => useSyncExternalStore( subscribe, getMenuItems );\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":"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","names":["React"]}

package/dist/index.mjs

@@ -4,7 +4,7 @@ import { capitalize } from "@elementor/utils";
 
 // src/create-register-item.tsx
 import * as React from "react";
-function createRegisterItem(locations, component) {
+function createRegisterItem(locations, component, notify) {
   return ({ id, group = "default", priority = 10, overwrite = false, props: _props, useProps: _useProps }) => {
     if (!(group in locations)) {
       return;
@@ -23,36 +23,55 @@ function createRegisterItem(locations, component) {
         overwrite
       }
     });
+    notify();
   };
 }
 
 // src/create-use-menu-items.ts
-import { useMemo } from "react";
-function createUseMenuItems(locations) {
-  return () => {
-    return useMemo(() => {
-      return Object.entries(locations).reduce((carry, [groupName, location]) => {
-        const items = location.getInjections().map((injection) => ({
-          id: injection.id,
-          MenuItem: injection.component
-        }));
-        return {
-          ...carry,
-          [groupName]: items
-        };
-      }, {});
-    }, []);
+import { useSyncExternalStore } from "react";
+function createUseMenuItems(locations, subscribe) {
+  let snapshot = null;
+  subscribe(() => {
+    snapshot = null;
+  });
+  const getMenuItems = () => {
+    if (snapshot) {
+      return snapshot;
+    }
+    snapshot = Object.entries(locations).reduce((carry, [groupName, location]) => {
+      const items = location.getInjections().map((injection) => ({
+        id: injection.id,
+        MenuItem: injection.component
+      }));
+      return {
+        ...carry,
+        [groupName]: items
+      };
+    }, {});
+    return snapshot;
   };
+  return () => useSyncExternalStore(subscribe, getMenuItems);
 }
 
 // src/create-menu.ts
+function createSubscription() {
+  const listeners = /* @__PURE__ */ new Set();
+  return {
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    },
+    notify: () => listeners.forEach((listener) => listener())
+  };
+}
 function createMenu({
   groups = [],
   components
 }) {
   const locations = createLocations([...groups, "default"]);
-  const registerFns = createRegisterFns(locations, components);
-  const useMenuItems = createUseMenuItems(locations);
+  const { subscribe, notify } = createSubscription();
+  const registerFns = createRegisterFns(locations, components, notify);
+  const useMenuItems = createUseMenuItems(locations, subscribe);
   return {
     useMenuItems,
     ...registerFns
@@ -64,13 +83,13 @@ function createLocations(groups) {
     return acc;
   }, {});
 }
-function createRegisterFns(locations, components) {
+function createRegisterFns(locations, components, notify) {
   return Object.entries(components).reduce(
     (acc, [key, component]) => {
       const name = `register${capitalize(key)}`;
       return {
         ...acc,
-        [name]: createRegisterItem(locations, component)
+        [name]: createRegisterItem(locations, component, notify)
       };
     },
     {}

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","../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"]}
+{"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\ntype Subscription = {\n\tsubscribe: ( listener: () => void ) => () => void;\n\tnotify: () => void;\n};\n\nfunction createSubscription(): Subscription {\n\tconst listeners = new Set< () => void >();\n\n\treturn {\n\t\tsubscribe: ( listener ) => {\n\t\t\tlisteners.add( listener );\n\t\t\treturn () => listeners.delete( listener );\n\t\t},\n\t\tnotify: () => listeners.forEach( ( listener ) => listener() ),\n\t};\n}\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\tconst { subscribe, notify } = createSubscription();\n\n\tconst registerFns = createRegisterFns( locations, components, notify );\n\tconst useMenuItems = createUseMenuItems( locations, subscribe );\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\tnotify: () => void\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, notify ),\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\tnotify: () => void\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\n\t\tnotify();\n\t};\n}\n","import { type ComponentType, useSyncExternalStore } 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\tsubscribe: ( listener: () => void ) => () => void\n): UseMenuItems< TGroups > {\n\tlet snapshot: GroupedMenuItems< TGroups > | null = null;\n\n\tsubscribe( () => {\n\t\tsnapshot = null;\n\t} );\n\n\tconst getMenuItems = () => {\n\t\tif ( snapshot ) {\n\t\t\treturn snapshot;\n\t\t}\n\t\tsnapshot = Object.entries( locations ).reduce( ( carry, [ groupName, location ] ) => {\n\t\t\tconst items = location.getInjections().map( ( injection ) => ( {\n\t\t\t\tid: injection.id,\n\t\t\t\tMenuItem: injection.component,\n\t\t\t} ) );\n\n\t\t\treturn {\n\t\t\t\t...carry,\n\t\t\t\t[ groupName ]: items,\n\t\t\t};\n\t\t}, {} as GroupedMenuItems< TGroups > );\n\n\t\treturn snapshot;\n\t};\n\n\treturn () => useSyncExternalStore( subscribe, getMenuItems );\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":"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","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-manual",
+  "version": "4.0.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,9 +40,9 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/locations": "4.0.0-manual",
-    "@elementor/utils": "4.0.0-manual",
-    "@elementor/editor-ui": "4.0.0-manual",
+    "@elementor/locations": "4.0.0",
+    "@elementor/utils": "4.0.0",
+    "@elementor/editor-ui": "4.0.0",
     "@elementor/ui": "1.36.17"
   },
   "peerDependencies": {

package/src/create-menu.ts

@@ -9,6 +9,23 @@ export type Menu< TComponents extends Components, TGroups extends string > = {
 	useMenuItems: UseMenuItems< TGroups >;
 } & RegisterFns< TGroups, TComponents >;
 
+type Subscription = {
+	subscribe: ( listener: () => void ) => () => void;
+	notify: () => void;
+};
+
+function createSubscription(): Subscription {
+	const listeners = new Set< () => void >();
+
+	return {
+		subscribe: ( listener ) => {
+			listeners.add( listener );
+			return () => listeners.delete( listener );
+		},
+		notify: () => listeners.forEach( ( listener ) => listener() ),
+	};
+}
+
 export function createMenu< TComponents extends Components, TGroups extends string = 'default' >( {
 	groups = [],
 	components,
@@ -17,9 +34,10 @@ export function createMenu< TComponents extends Components, TGroups extends stri
 	components: TComponents;
 } ): Menu< TComponents, TGroups > {
 	const locations = createLocations< MenuGroups< TGroups > >( [ ...groups, 'default' ] );
+	const { subscribe, notify } = createSubscription();
 
-	const registerFns = createRegisterFns( locations, components );
-	const useMenuItems = createUseMenuItems( locations );
+	const registerFns = createRegisterFns( locations, components, notify );
+	const useMenuItems = createUseMenuItems( locations, subscribe );
 
 	return {
 		useMenuItems,
@@ -41,7 +59,8 @@ type RegisterFns< TGroups extends string, TComponents extends Components > = {
 
 function createRegisterFns< TGroups extends string, TComponents extends Components >(
 	locations: LocationsMap< MenuGroups< TGroups > >,
-	components: TComponents
+	components: TComponents,
+	notify: () => void
 ) {
 	return Object.entries( components ).reduce(
 		( acc, [ key, component ] ) => {
@@ -49,7 +68,7 @@ function createRegisterFns< TGroups extends string, TComponents extends Componen
 
 			return {
 				...acc,
-				[ name ]: createRegisterItem( locations, component ),
+				[ name ]: createRegisterItem( locations, component, notify ),
 			};
 		},
 		{} as RegisterFns< TGroups, TComponents >

package/src/create-register-item.tsx

@@ -25,7 +25,8 @@ type PropsOrUseProps< TProps extends object > =
 
 export function createRegisterItem< TGroups extends string, TComponent extends ComponentType >(
 	locations: LocationsMap< MenuGroups< TGroups > >,
-	component: TComponent
+	component: TComponent,
+	notify: () => void
 ): RegisterItem< TGroups, TComponent > {
 	return ( { id, group = 'default', priority = 10, overwrite = false, props: _props, useProps: _useProps } ) => {
 		if ( ! ( group in locations ) ) {
@@ -49,5 +50,7 @@ export function createRegisterItem< TGroups extends string, TComponent extends C
 				overwrite,
 			},
 		} );
+
+		notify();
 	};
 }

package/src/create-use-menu-items.ts

@@ -1,4 +1,4 @@
-import { type ComponentType, useMemo } from 'react';
+import { type ComponentType, useSyncExternalStore } from 'react';
 
 import { type LocationsMap, type MenuGroups } from './types';
 
@@ -13,22 +13,33 @@ type GroupedMenuItems< TGroups extends string > = Record<
 >;
 
 export function createUseMenuItems< TGroups extends string >(
-	locations: LocationsMap< MenuGroups< TGroups > >
+	locations: LocationsMap< MenuGroups< TGroups > >,
+	subscribe: ( listener: () => void ) => () => void
 ): UseMenuItems< TGroups > {
-	return () => {
-		// Normalize the injections groups to an object with the groups as keys.
-		return useMemo( () => {
-			return Object.entries( locations ).reduce( ( carry, [ groupName, location ] ) => {
-				const items = location.getInjections().map( ( injection ) => ( {
-					id: injection.id,
-					MenuItem: injection.component,
-				} ) );
-
-				return {
-					...carry,
-					[ groupName ]: items,
-				};
-			}, {} as GroupedMenuItems< TGroups > );
-		}, [] );
+	let snapshot: GroupedMenuItems< TGroups > | null = null;
+
+	subscribe( () => {
+		snapshot = null;
+	} );
+
+	const getMenuItems = () => {
+		if ( snapshot ) {
+			return snapshot;
+		}
+		snapshot = Object.entries( locations ).reduce( ( carry, [ groupName, location ] ) => {
+			const items = location.getInjections().map( ( injection ) => ( {
+				id: injection.id,
+				MenuItem: injection.component,
+			} ) );
+
+			return {
+				...carry,
+				[ groupName ]: items,
+			};
+		}, {} as GroupedMenuItems< TGroups > );
+
+		return snapshot;
 	};
+
+	return () => useSyncExternalStore( subscribe, getMenuItems );
 }