@elementor/menus 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @elementor/menus
+
+## 0.1.0
+
+### Minor Changes
+
+- 66df921: Extract menus logic into a dedicated package

package/README.md

@@ -0,0 +1,5 @@
+# Menus
+
+> [!WARNING]
+> Please refrain from accessing or depending on functions and variables starting with double underscores, as they are subject to change without notice.
+> Naming convention involving double underscores (`__`) as a prefix to indicate that a function or variable is meant for internal use and should not be accessed or relied upon by third-party developers.

package/dist/index.d.mts

@@ -0,0 +1,42 @@
+import { ComponentType, ComponentPropsWithoutRef } from 'react';
+
+type Components = Record<string, ComponentType<any>>;
+type MenuGroups<TGroups extends string> = TGroups | 'default';
+
+type UseMenuItems<TGroups extends string> = () => GroupedMenuItems<TGroups>;
+type GroupedMenuItems<TGroups extends string> = Record<MenuGroups<TGroups>, Array<{
+    id: string;
+    MenuItem: ComponentType;
+}>>;
+
+type RegisterItem<TGroups extends string, TComponent extends ComponentType> = (args: {
+    id: string;
+    group?: MenuGroups<TGroups>;
+    priority?: number;
+    overwrite?: boolean;
+} & Props<ComponentPropsWithoutRef<TComponent>>) => void;
+type Props<TProps extends object> = unknown extends TProps ? NoProps : PropsOrUseProps<TProps>;
+type NoProps = {
+    props?: never;
+    useProps?: never;
+};
+type PropsOrUseProps<TProps extends object> = {
+    props: TProps;
+    useProps?: never;
+} | {
+    useProps: () => TProps;
+    props?: never;
+};
+
+type Menu<TComponents extends Components, TGroups extends string> = {
+    useMenuItems: UseMenuItems<TGroups>;
+} & RegisterFns<TGroups, TComponents>;
+declare function createMenu<TComponents extends Components, TGroups extends string = 'default'>({ groups, components, }: {
+    groups?: TGroups[];
+    components: TComponents;
+}): Menu<TComponents, TGroups>;
+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 };

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+import { ComponentType, ComponentPropsWithoutRef } from 'react';
+
+type Components = Record<string, ComponentType<any>>;
+type MenuGroups<TGroups extends string> = TGroups | 'default';
+
+type UseMenuItems<TGroups extends string> = () => GroupedMenuItems<TGroups>;
+type GroupedMenuItems<TGroups extends string> = Record<MenuGroups<TGroups>, Array<{
+    id: string;
+    MenuItem: ComponentType;
+}>>;
+
+type RegisterItem<TGroups extends string, TComponent extends ComponentType> = (args: {
+    id: string;
+    group?: MenuGroups<TGroups>;
+    priority?: number;
+    overwrite?: boolean;
+} & Props<ComponentPropsWithoutRef<TComponent>>) => void;
+type Props<TProps extends object> = unknown extends TProps ? NoProps : PropsOrUseProps<TProps>;
+type NoProps = {
+    props?: never;
+    useProps?: never;
+};
+type PropsOrUseProps<TProps extends object> = {
+    props: TProps;
+    useProps?: never;
+} | {
+    useProps: () => TProps;
+    props?: never;
+};
+
+type Menu<TComponents extends Components, TGroups extends string> = {
+    useMenuItems: UseMenuItems<TGroups>;
+} & RegisterFns<TGroups, TComponents>;
+declare function createMenu<TComponents extends Components, TGroups extends string = 'default'>({ groups, components, }: {
+    groups?: TGroups[];
+    components: TComponents;
+}): Menu<TComponents, TGroups>;
+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 };

package/dist/index.js

@@ -0,0 +1,121 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createMenu: () => createMenu
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/create-menu.ts
+var import_locations = require("@elementor/locations");
+
+// 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
+        };
+      }, {});
+    }, []);
+  };
+}
+
+// src/create-register-item.tsx
+var React = __toESM(require("react"));
+function createRegisterItem(locations, component) {
+  return ({ id, group = "default", priority = 10, overwrite = false, props: _props, useProps: _useProps }) => {
+    if (!(group in locations)) {
+      return;
+    }
+    const Component = component;
+    const useProps = _useProps || (() => _props);
+    const InjectedComponent = () => {
+      const props = useProps();
+      return /* @__PURE__ */ React.createElement(Component, { ...props });
+    };
+    locations[group].inject({
+      id,
+      component: InjectedComponent,
+      options: {
+        priority,
+        overwrite
+      }
+    });
+  };
+}
+
+// src/create-menu.ts
+function createMenu({
+  groups = [],
+  components
+}) {
+  const locations = createLocations([...groups, "default"]);
+  const registerFns = createRegisterFns(locations, components);
+  const useMenuItems = createUseMenuItems(locations);
+  return {
+    useMenuItems,
+    ...registerFns
+  };
+}
+function createLocations(groups) {
+  return groups.reduce((acc, group) => {
+    acc[group] = (0, import_locations.createLocation)();
+    return acc;
+  }, {});
+}
+function createRegisterFns(locations, components) {
+  return Object.entries(components).reduce(
+    (acc, [key, component]) => {
+      const name = `register${capitalize(key)}`;
+      return {
+        ...acc,
+        [name]: createRegisterItem(locations, component)
+      };
+    },
+    {}
+  );
+}
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  createMenu
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/create-menu.ts","../src/create-use-menu-items.ts","../src/create-register-item.tsx"],"sourcesContent":["export { createMenu, type Menu } from './create-menu';\nexport { type Components } from './types';\n","import { createLocation } from '@elementor/locations';\nimport { Components, LocationsMap, MenuGroups } from './types';\nimport { createUseMenuItems, UseMenuItems } from './create-use-menu-items';\nimport { createRegisterItem, RegisterItem } from './create-register-item';\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\nfunction capitalize( str: string ) {\n\treturn str.charAt( 0 ).toUpperCase() + str.slice( 1 );\n}\n","import { ComponentType, useMemo } from 'react';\nimport { LocationsMap, 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 * as React from 'react';\nimport { ComponentPropsWithoutRef, ComponentType } from 'react';\nimport { LocationsMap, 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 = () => {\n\t\t\tconst props = useProps();\n\n\t\t\treturn <Component { ...props } />;\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"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,uBAA+B;;;ACA/B,mBAAuC;AAahC,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;;;AChCA,YAAuB;AAwBhB,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,MAAM;AAC/B,YAAM,QAAQ,SAAS;AAEvB,aAAO,oCAAC,aAAY,GAAG,OAAQ;AAAA,IAChC;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;;;AF1CO,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,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;AAEA,SAAS,WAAY,KAAc;AAClC,SAAO,IAAI,OAAQ,CAAE,EAAE,YAAY,IAAI,IAAI,MAAO,CAAE;AACrD;","names":[]}

package/dist/index.mjs

@@ -0,0 +1,84 @@
+// src/create-menu.ts
+import { createLocation } from "@elementor/locations";
+
+// 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
+        };
+      }, {});
+    }, []);
+  };
+}
+
+// src/create-register-item.tsx
+import * as React from "react";
+function createRegisterItem(locations, component) {
+  return ({ id, group = "default", priority = 10, overwrite = false, props: _props, useProps: _useProps }) => {
+    if (!(group in locations)) {
+      return;
+    }
+    const Component = component;
+    const useProps = _useProps || (() => _props);
+    const InjectedComponent = () => {
+      const props = useProps();
+      return /* @__PURE__ */ React.createElement(Component, { ...props });
+    };
+    locations[group].inject({
+      id,
+      component: InjectedComponent,
+      options: {
+        priority,
+        overwrite
+      }
+    });
+  };
+}
+
+// src/create-menu.ts
+function createMenu({
+  groups = [],
+  components
+}) {
+  const locations = createLocations([...groups, "default"]);
+  const registerFns = createRegisterFns(locations, components);
+  const useMenuItems = createUseMenuItems(locations);
+  return {
+    useMenuItems,
+    ...registerFns
+  };
+}
+function createLocations(groups) {
+  return groups.reduce((acc, group) => {
+    acc[group] = createLocation();
+    return acc;
+  }, {});
+}
+function createRegisterFns(locations, components) {
+  return Object.entries(components).reduce(
+    (acc, [key, component]) => {
+      const name = `register${capitalize(key)}`;
+      return {
+        ...acc,
+        [name]: createRegisterItem(locations, component)
+      };
+    },
+    {}
+  );
+}
+function capitalize(str) {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+export {
+  createMenu
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/create-menu.ts","../src/create-use-menu-items.ts","../src/create-register-item.tsx"],"sourcesContent":["import { createLocation } from '@elementor/locations';\nimport { Components, LocationsMap, MenuGroups } from './types';\nimport { createUseMenuItems, UseMenuItems } from './create-use-menu-items';\nimport { createRegisterItem, RegisterItem } from './create-register-item';\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\nfunction capitalize( str: string ) {\n\treturn str.charAt( 0 ).toUpperCase() + str.slice( 1 );\n}\n","import { ComponentType, useMemo } from 'react';\nimport { LocationsMap, 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 * as React from 'react';\nimport { ComponentPropsWithoutRef, ComponentType } from 'react';\nimport { LocationsMap, 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 = () => {\n\t\t\tconst props = useProps();\n\n\t\t\treturn <Component { ...props } />;\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"],"mappings":";AAAA,SAAS,sBAAsB;;;ACA/B,SAAwB,eAAe;AAahC,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;;;AChCA,YAAY,WAAW;AAwBhB,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,MAAM;AAC/B,YAAM,QAAQ,SAAS;AAEvB,aAAO,oCAAC,aAAY,GAAG,OAAQ;AAAA,IAChC;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;;;AF1CO,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;AAEA,SAAS,WAAY,KAAc;AAClC,SAAO,IAAI,OAAQ,CAAE,EAAE,YAAY,IAAI,IAAI,MAAO,CAAE;AACrD;","names":[]}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@elementor/menus",
+  "description": "Add a menus registration mechanism for you React application",
+  "version": "0.1.0",
+  "private": false,
+  "author": "Elementor Team",
+  "homepage": "https://elementor.com/",
+  "license": "GPL-3.0-or-later",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/elementor/elementor-packages.git",
+    "directory": "packages/libs/menus"
+  },
+  "bugs": {
+    "url": "https://github.com/elementor/elementor-packages/issues"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "README.md",
+    "CHANGELOG.md",
+    "/dist",
+    "/src",
+    "!**/__tests__"
+  ],
+  "scripts": {
+    "build": "tsup --config=../../tsup.build.ts",
+    "dev": "tsup --config=../../tsup.dev.ts"
+  },
+  "dependencies": {
+    "@elementor/locations": "^0.7.5"
+  },
+  "peerDependencies": {
+    "react": "^18.3.1"
+  }
+}

package/src/create-menu.ts

@@ -0,0 +1,59 @@
+import { createLocation } from '@elementor/locations';
+import { Components, LocationsMap, MenuGroups } from './types';
+import { createUseMenuItems, UseMenuItems } from './create-use-menu-items';
+import { createRegisterItem, RegisterItem } from './create-register-item';
+
+export type Menu< TComponents extends Components, TGroups extends string > = {
+	useMenuItems: UseMenuItems< TGroups >;
+} & RegisterFns< TGroups, TComponents >;
+
+export function createMenu< TComponents extends Components, TGroups extends string = 'default' >( {
+	groups = [],
+	components,
+}: {
+	groups?: TGroups[];
+	components: TComponents;
+} ): Menu< TComponents, TGroups > {
+	const locations = createLocations< MenuGroups< TGroups > >( [ ...groups, 'default' ] );
+
+	const registerFns = createRegisterFns( locations, components );
+	const useMenuItems = createUseMenuItems( locations );
+
+	return {
+		useMenuItems,
+		...registerFns,
+	};
+}
+
+function createLocations< TGroups extends string >( groups: TGroups[] ) {
+	return groups.reduce( ( acc, group ) => {
+		acc[ group ] = createLocation();
+
+		return acc;
+	}, {} as LocationsMap< TGroups > );
+}
+
+type RegisterFns< TGroups extends string, TComponents extends Components > = {
+	[ K in keyof TComponents as `register${ Capitalize< K & string > }` ]: RegisterItem< TGroups, TComponents[ K ] >;
+};
+
+function createRegisterFns< TGroups extends string, TComponents extends Components >(
+	locations: LocationsMap< MenuGroups< TGroups > >,
+	components: TComponents
+) {
+	return Object.entries( components ).reduce(
+		( acc, [ key, component ] ) => {
+			const name = `register${ capitalize( key ) }`;
+
+			return {
+				...acc,
+				[ name ]: createRegisterItem( locations, component ),
+			};
+		},
+		{} as RegisterFns< TGroups, TComponents >
+	);
+}
+
+function capitalize( str: string ) {
+	return str.charAt( 0 ).toUpperCase() + str.slice( 1 );
+}

package/src/create-register-item.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { ComponentPropsWithoutRef, ComponentType } from 'react';
+import { LocationsMap, MenuGroups } from './types';
+
+export type RegisterItem< TGroups extends string, TComponent extends ComponentType > = (
+	args: {
+		id: string;
+		group?: MenuGroups< TGroups >;
+		priority?: number;
+		overwrite?: boolean;
+	} & Props< ComponentPropsWithoutRef< TComponent > >
+) => void;
+
+type Props< TProps extends object > = unknown extends TProps ? NoProps : PropsOrUseProps< TProps >;
+
+type NoProps = { props?: never; useProps?: never };
+
+type PropsOrUseProps< TProps extends object > =
+	| { props: TProps; useProps?: never }
+	| {
+			useProps: () => TProps;
+			props?: never;
+	  };
+
+export function createRegisterItem< TGroups extends string, TComponent extends ComponentType >(
+	locations: LocationsMap< MenuGroups< TGroups > >,
+	component: TComponent
+): RegisterItem< TGroups, TComponent > {
+	return ( { id, group = 'default', priority = 10, overwrite = false, props: _props, useProps: _useProps } ) => {
+		if ( ! ( group in locations ) ) {
+			return;
+		}
+
+		const Component = component as ComponentType;
+		const useProps = _useProps || ( () => _props );
+
+		const InjectedComponent = () => {
+			const props = useProps();
+
+			return <Component { ...props } />;
+		};
+
+		locations[ group ].inject( {
+			id,
+			component: InjectedComponent,
+			options: {
+				priority,
+				overwrite,
+			},
+		} );
+	};
+}

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

@@ -0,0 +1,33 @@
+import { ComponentType, useMemo } from 'react';
+import { LocationsMap, MenuGroups } from './types';
+
+export type UseMenuItems< TGroups extends string > = () => GroupedMenuItems< TGroups >;
+
+type GroupedMenuItems< TGroups extends string > = Record<
+	MenuGroups< TGroups >,
+	Array< {
+		id: string;
+		MenuItem: ComponentType;
+	} >
+>;
+
+export function createUseMenuItems< TGroups extends string >(
+	locations: LocationsMap< MenuGroups< TGroups > >
+): 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 > );
+		}, [] );
+	};
+}

package/src/index.ts

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

package/src/types.ts

@@ -0,0 +1,9 @@
+import { Location } from '@elementor/locations';
+import { ComponentType } from 'react';
+
+export type LocationsMap< TGroups extends string > = Record< TGroups, Location >;
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any -- Required for TS to infer the props properly.
+export type Components = Record< string, ComponentType< any > >;
+
+export type MenuGroups< TGroups extends string > = TGroups | 'default';