@elementor/locations 0.6.1 → 0.6.3

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.3](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.6.2...@elementor/locations@0.6.3) (2023-08-02)
+
+**Note:** Version bump only for package @elementor/locations
+
+
+
+
+
+## [0.6.2](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.6.1...@elementor/locations@0.6.2) (2023-07-17)
+
+**Note:** Version bump only for package @elementor/locations
+
+
+
+
+
 ## [0.6.1](https://github.com/elementor/elementor-packages/compare/@elementor/locations@0.6.0...@elementor/locations@0.6.1) (2023-07-17)
 
 **Note:** Version bump only for package @elementor/locations

package/dist/index.d.mts

@@ -1,24 +1,52 @@
 import { ComponentType } from 'react';
 
 type AnyProps = object;
-type Filler<TProps extends object = AnyProps> = ComponentType<TProps>;
+type InjectedComponent<TProps extends object = AnyProps> = ComponentType<TProps>;
 type Id = string;
 type Priority = number;
 type Injection<TProps extends object = AnyProps> = {
+    /**
+     * A unique id (per location) of the injected component.
+     */
     id: Id;
-    filler: Filler<TProps>;
+    /**
+     * The injected component.
+     */
+    component: InjectedComponent<TProps>;
+    /**
+     * Priority of the injected component inside the location. Lower value means higher priority.
+     */
     priority: Priority;
 };
 type InjectArgs<TProps extends object = AnyProps> = {
+    /**
+     * A unique id (per location) of the component to be injected.
+     */
     id: Id;
-    filler: Filler<TProps>;
+    /**
+     * The component to be injected.
+     */
+    component: InjectedComponent<TProps>;
     options?: {
+        /**
+         * Priority of the injected component inside the location. Lower value means higher priority.
+         */
         priority?: Priority;
+        /**
+         * When true, if an injected component with the same id already exists it will be overridden with this one. Otherwise, this injection will be ignored. Default is false.
+         */
         overwrite?: boolean;
     };
 };
 type Location<TProps extends object = AnyProps> = {
+    /**
+     * Inject a component into the location.
+     */
     inject: (args: InjectArgs<TProps>) => void;
+    /**
+     *
+     * @return All the injections in the location.
+     */
     getInjections: () => Injection<TProps>[];
     useInjections: () => Injection<TProps>[];
     Slot: ComponentType<TProps>;
@@ -27,4 +55,4 @@ type Location<TProps extends object = AnyProps> = {
 declare function createLocation<TProps extends object = AnyProps>(): Location<TProps>;
 declare function flushAllInjections(): void;
 
-export { AnyProps, Filler, Id, InjectArgs, Injection, Location, Priority, createLocation, flushAllInjections };
+export { AnyProps, Id, InjectArgs, InjectedComponent, Injection, Location, Priority, createLocation, flushAllInjections };

package/dist/index.d.ts

@@ -1,24 +1,52 @@
 import { ComponentType } from 'react';
 
 type AnyProps = object;
-type Filler<TProps extends object = AnyProps> = ComponentType<TProps>;
+type InjectedComponent<TProps extends object = AnyProps> = ComponentType<TProps>;
 type Id = string;
 type Priority = number;
 type Injection<TProps extends object = AnyProps> = {
+    /**
+     * A unique id (per location) of the injected component.
+     */
     id: Id;
-    filler: Filler<TProps>;
+    /**
+     * The injected component.
+     */
+    component: InjectedComponent<TProps>;
+    /**
+     * Priority of the injected component inside the location. Lower value means higher priority.
+     */
     priority: Priority;
 };
 type InjectArgs<TProps extends object = AnyProps> = {
+    /**
+     * A unique id (per location) of the component to be injected.
+     */
     id: Id;
-    filler: Filler<TProps>;
+    /**
+     * The component to be injected.
+     */
+    component: InjectedComponent<TProps>;
     options?: {
+        /**
+         * Priority of the injected component inside the location. Lower value means higher priority.
+         */
         priority?: Priority;
+        /**
+         * When true, if an injected component with the same id already exists it will be overridden with this one. Otherwise, this injection will be ignored. Default is false.
+         */
         overwrite?: boolean;
     };
 };
 type Location<TProps extends object = AnyProps> = {
+    /**
+     * Inject a component into the location.
+     */
     inject: (args: InjectArgs<TProps>) => void;
+    /**
+     *
+     * @return All the injections in the location.
+     */
     getInjections: () => Injection<TProps>[];
     useInjections: () => Injection<TProps>[];
     Slot: ComponentType<TProps>;
@@ -27,4 +55,4 @@ type Location<TProps extends object = AnyProps> = {
 declare function createLocation<TProps extends object = AnyProps>(): Location<TProps>;
 declare function flushAllInjections(): void;
 
-export { AnyProps, Filler, Id, InjectArgs, Injection, Location, Priority, createLocation, flushAllInjections };
+export { AnyProps, Id, InjectArgs, InjectedComponent, Injection, Location, Priority, createLocation, flushAllInjections };

package/dist/index.js

@@ -38,7 +38,7 @@ module.exports = __toCommonJS(src_exports);
 // src/api.tsx
 var React2 = __toESM(require("react"));
 
-// src/components/filler-wrapper.tsx
+// src/components/injected-component-wrapper.tsx
 var React = __toESM(require("react"));
 var import_react2 = require("react");
 
@@ -59,8 +59,8 @@ var ErrorBoundary = class extends import_react.Component {
   }
 };
 
-// src/components/filler-wrapper.tsx
-function FillerWrapper({ children }) {
+// src/components/injected-component-wrapper.tsx
+function InjectedComponentWrapper({ children }) {
   return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React.createElement(import_react2.Suspense, { fallback: null }, children));
 }
 
@@ -85,20 +85,20 @@ function createLocation() {
 function flushAllInjections() {
   flushInjectionsFns.forEach((flush) => flush());
 }
-function wrapFiller(FillerComponent) {
-  return (props) => /* @__PURE__ */ React2.createElement(FillerWrapper, null, /* @__PURE__ */ React2.createElement(FillerComponent, { ...props }));
+function wrapInjectedComponent(Component2) {
+  return (props) => /* @__PURE__ */ React2.createElement(InjectedComponentWrapper, null, /* @__PURE__ */ React2.createElement(Component2, { ...props }));
 }
 function createSlot(useInjections) {
   return (props) => {
     const injections = useInjections();
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, injections.map(({ id, filler: Component2 }) => /* @__PURE__ */ React2.createElement(Component2, { ...props, key: id })));
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, injections.map(({ id, component: Component2 }) => /* @__PURE__ */ React2.createElement(Component2, { ...props, key: id })));
   };
 }
 function createGetInjections(injections) {
   return () => [...injections.values()].sort((a, b) => a.priority - b.priority);
 }
 function createInject(injections) {
-  return ({ filler, id, options = {} }) => {
+  return ({ component, id, options = {} }) => {
     if (injections.has(id) && !options?.overwrite) {
       console.warn(
         `An injection with the id "${id}" already exists. Did you mean to use "options.overwrite"?`
@@ -107,7 +107,7 @@ function createInject(injections) {
     }
     injections.set(id, {
       id,
-      filler: wrapFiller(filler),
+      component: wrapInjectedComponent(component),
       priority: options.priority ?? DEFAULT_PRIORITY
     });
   };

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/api.tsx","../src/components/filler-wrapper.tsx","../src/components/error-boundary.tsx"],"sourcesContent":["export * from './types';\nexport { createLocation, flushAllInjections } from './api';\n","import * as React from 'react';\nimport { Filler, Injection, InjectArgs, AnyProps, Location, Id } from './types';\nimport FillerWrapper from './components/filler-wrapper';\nimport { useMemo } from 'react';\n\ntype InjectionsMap<TProps extends object = AnyProps> = Map<Id, Injection<TProps>>\n\nconst DEFAULT_PRIORITY = 10;\n\n// Allow flushing all injections at once, for testing purposes.\nconst flushInjectionsFns: ( () => void )[] = [];\n\nexport function createLocation<TProps extends object = AnyProps>(): Location<TProps> {\n\tconst injections: InjectionsMap<TProps> = new Map();\n\n\tconst getInjections = createGetInjections( injections );\n\tconst useInjections = createUseInjections( getInjections );\n\tconst Slot = createSlot( useInjections );\n\tconst inject = createInject( injections );\n\n\t// Push the clear function to the flushInjectionsFns array, so we can flush all injections at once.\n\tflushInjectionsFns.push( () => injections.clear() );\n\n\treturn {\n\t\tinject,\n\t\tgetInjections,\n\t\tuseInjections,\n\t\tSlot,\n\t};\n}\n\nexport function flushAllInjections() {\n\tflushInjectionsFns.forEach( ( flush ) => flush() );\n}\n\nfunction wrapFiller<TProps extends object = AnyProps>( FillerComponent: Filler<TProps> ) {\n\treturn ( props: TProps ) => (\n\t\t<FillerWrapper>\n\t\t\t<FillerComponent { ...props } />\n\t\t</FillerWrapper>\n\t);\n}\n\nfunction createSlot<TProps extends object = AnyProps>( useInjections: Location<TProps>[ 'useInjections' ] ) {\n\treturn ( props: TProps ) => {\n\t\tconst injections = useInjections();\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ injections.map( ( { id, filler: Component } ) => (\n\t\t\t\t\t<Component { ...props } key={ id } />\n\t\t\t\t) ) }\n\t\t\t</>\n\t\t);\n\t};\n}\n\nfunction createGetInjections<TProps extends object = AnyProps>( injections: InjectionsMap<TProps> ) {\n\treturn () => [ ...injections.values() ]\n\t\t.sort( ( a, b ) => a.priority - b.priority );\n}\n\nfunction createInject<TProps extends object = AnyProps>( injections: InjectionsMap<TProps> ) {\n\treturn ( { filler, id, options = {} }: InjectArgs<TProps> ) => {\n\t\tif ( injections.has( id ) && ! options?.overwrite ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`An injection with the id \"${ id }\" already exists. Did you mean to use \"options.overwrite\"?`,\n\t\t\t);\n\n\t\t\treturn;\n\t\t}\n\n\t\tinjections.set( id, {\n\t\t\tid,\n\t\t\tfiller: wrapFiller( filler ),\n\t\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t\t} );\n\t};\n}\n\nfunction createUseInjections<TProps extends object = AnyProps>( getInjections: Location<TProps>[ 'getInjections' ] ) {\n\treturn () => useMemo( () => getInjections(), [] );\n}\n","import * as React from 'react';\nimport { ReactNode, Suspense } from 'react';\nimport ErrorBoundary from './error-boundary';\n\nexport default function FillerWrapper( { children }: { children: ReactNode } ) {\n\treturn (\n\t\t<ErrorBoundary fallback={ null }>\n\t\t\t<Suspense fallback={ null }>\n\t\t\t\t{ children }\n\t\t\t</Suspense>\n\t\t</ErrorBoundary>\n\t);\n}\n","import { Component, ReactNode } from 'react';\n\ninterface Props {\n\tchildren?: ReactNode;\n\tfallback: ReactNode;\n}\n\ninterface State {\n\thasError: boolean;\n}\n\nexport default class ErrorBoundary extends Component<Props, State> {\n\tpublic state: State = {\n\t\thasError: false,\n\t};\n\n\tpublic static getDerivedStateFromError(): State {\n\t\t// Update state so the next render will show the fallback UI.\n\t\treturn { hasError: true };\n\t}\n\n\tpublic render() {\n\t\tif ( this.state.hasError ) {\n\t\t\treturn this.props.fallback;\n\t\t}\n\n\t\treturn this.props.children;\n\t}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACAvB,YAAuB;AACvB,IAAAC,gBAAoC;;;ACDpC,mBAAqC;AAWrC,IAAqB,gBAArB,cAA2C,uBAAwB;AAAA,EAC3D,QAAe;AAAA,IACrB,UAAU;AAAA,EACX;AAAA,EAEA,OAAc,2BAAkC;AAE/C,WAAO,EAAE,UAAU,KAAK;AAAA,EACzB;AAAA,EAEO,SAAS;AACf,QAAK,KAAK,MAAM,UAAW;AAC1B,aAAO,KAAK,MAAM;AAAA,IACnB;AAEA,WAAO,KAAK,MAAM;AAAA,EACnB;AACD;;;ADxBe,SAAR,cAAgC,EAAE,SAAS,GAA6B;AAC9E,SACC,oCAAC,iBAAc,UAAW,QACzB,oCAAC,0BAAS,UAAW,QAClB,QACH,CACD;AAEF;;;ADTA,IAAAC,gBAAwB;AAIxB,IAAM,mBAAmB;AAGzB,IAAM,qBAAuC,CAAC;AAEvC,SAAS,iBAAqE;AACpF,QAAM,aAAoC,oBAAI,IAAI;AAElD,QAAM,gBAAgB,oBAAqB,UAAW;AACtD,QAAM,gBAAgB,oBAAqB,aAAc;AACzD,QAAM,OAAO,WAAY,aAAc;AACvC,QAAM,SAAS,aAAc,UAAW;AAGxC,qBAAmB,KAAM,MAAM,WAAW,MAAM,CAAE;AAElD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;AAEO,SAAS,qBAAqB;AACpC,qBAAmB,QAAS,CAAE,UAAW,MAAM,CAAE;AAClD;AAEA,SAAS,WAA8C,iBAAkC;AACxF,SAAO,CAAE,UACR,qCAAC,qBACA,qCAAC,mBAAkB,GAAG,OAAQ,CAC/B;AAEF;AAEA,SAAS,WAA8C,eAAqD;AAC3G,SAAO,CAAE,UAAmB;AAC3B,UAAM,aAAa,cAAc;AAEjC,WACC,4DACG,WAAW,IAAK,CAAE,EAAE,IAAI,QAAQC,WAAU,MAC3C,qCAACA,YAAA,EAAY,GAAG,OAAQ,KAAM,IAAK,CAClC,CACH;AAAA,EAEF;AACD;AAEA,SAAS,oBAAuD,YAAoC;AACnG,SAAO,MAAM,CAAE,GAAG,WAAW,OAAO,CAAE,EACpC,KAAM,CAAE,GAAG,MAAO,EAAE,WAAW,EAAE,QAAS;AAC7C;AAEA,SAAS,aAAgD,YAAoC;AAC5F,SAAO,CAAE,EAAE,QAAQ,IAAI,UAAU,CAAC,EAAE,MAA2B;AAC9D,QAAK,WAAW,IAAK,EAAG,KAAK,CAAE,SAAS,WAAY;AAEnD,cAAQ;AAAA,QACP,6BAA8B,EAAG;AAAA,MAClC;AAEA;AAAA,IACD;AAEA,eAAW,IAAK,IAAI;AAAA,MACnB;AAAA,MACA,QAAQ,WAAY,MAAO;AAAA,MAC3B,UAAU,QAAQ,YAAY;AAAA,IAC/B,CAAE;AAAA,EACH;AACD;AAEA,SAAS,oBAAuD,eAAqD;AACpH,SAAO,UAAM,uBAAS,MAAM,cAAc,GAAG,CAAC,CAAE;AACjD;","names":["React","import_react","import_react","Component"]}
+{"version":3,"sources":["../src/index.ts","../src/api.tsx","../src/components/injected-component-wrapper.tsx","../src/components/error-boundary.tsx"],"sourcesContent":["export * from './types';\nexport { createLocation, flushAllInjections } from './api';\n","import * as React from 'react';\nimport { InjectedComponent, Injection, InjectArgs, AnyProps, Location, Id } from './types';\nimport InjectedComponentWrapper from './components/injected-component-wrapper';\nimport { useMemo } from 'react';\n\ntype InjectionsMap<TProps extends object = AnyProps> = Map<Id, Injection<TProps>>\n\nconst DEFAULT_PRIORITY = 10;\n\n// Allow flushing all injections at once, for testing purposes.\nconst flushInjectionsFns: ( () => void )[] = [];\n\nexport function createLocation<TProps extends object = AnyProps>(): Location<TProps> {\n\tconst injections: InjectionsMap<TProps> = new Map();\n\n\tconst getInjections = createGetInjections( injections );\n\tconst useInjections = createUseInjections( getInjections );\n\tconst Slot = createSlot( useInjections );\n\tconst inject = createInject( injections );\n\n\t// Push the clear function to the flushInjectionsFns array, so we can flush all injections at once.\n\tflushInjectionsFns.push( () => injections.clear() );\n\n\treturn {\n\t\tinject,\n\t\tgetInjections,\n\t\tuseInjections,\n\t\tSlot,\n\t};\n}\n\nexport function flushAllInjections() {\n\tflushInjectionsFns.forEach( ( flush ) => flush() );\n}\n\nfunction wrapInjectedComponent<TProps extends object = AnyProps>( Component: InjectedComponent<TProps> ) {\n\treturn ( props: TProps ) => (\n\t\t<InjectedComponentWrapper>\n\t\t\t<Component { ...props } />\n\t\t</InjectedComponentWrapper>\n\t);\n}\n\nfunction createSlot<TProps extends object = AnyProps>( useInjections: Location<TProps>[ 'useInjections' ] ) {\n\treturn ( props: TProps ) => {\n\t\tconst injections = useInjections();\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ injections.map( ( { id, component: Component } ) => (\n\t\t\t\t\t<Component { ...props } key={ id } />\n\t\t\t\t) ) }\n\t\t\t</>\n\t\t);\n\t};\n}\n\nfunction createGetInjections<TProps extends object = AnyProps>( injections: InjectionsMap<TProps> ) {\n\treturn () => [ ...injections.values() ]\n\t\t.sort( ( a, b ) => a.priority - b.priority );\n}\n\nfunction createInject<TProps extends object = AnyProps>( injections: InjectionsMap<TProps> ) {\n\treturn ( { component, id, options = {} }: InjectArgs<TProps> ) => {\n\t\tif ( injections.has( id ) && ! options?.overwrite ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`An injection with the id \"${ id }\" already exists. Did you mean to use \"options.overwrite\"?`,\n\t\t\t);\n\n\t\t\treturn;\n\t\t}\n\n\t\tinjections.set( id, {\n\t\t\tid,\n\t\t\tcomponent: wrapInjectedComponent( component ),\n\t\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t\t} );\n\t};\n}\n\nfunction createUseInjections<TProps extends object = AnyProps>( getInjections: Location<TProps>[ 'getInjections' ] ) {\n\treturn () => useMemo( () => getInjections(), [] );\n}\n","import * as React from 'react';\nimport { ReactNode, Suspense } from 'react';\nimport ErrorBoundary from './error-boundary';\n\nexport default function InjectedComponentWrapper( { children }: { children: ReactNode } ) {\n\treturn (\n\t\t<ErrorBoundary fallback={ null }>\n\t\t\t<Suspense fallback={ null }>\n\t\t\t\t{ children }\n\t\t\t</Suspense>\n\t\t</ErrorBoundary>\n\t);\n}\n","import { Component, ReactNode } from 'react';\n\ninterface Props {\n\tchildren?: ReactNode;\n\tfallback: ReactNode;\n}\n\ninterface State {\n\thasError: boolean;\n}\n\nexport default class ErrorBoundary extends Component<Props, State> {\n\tpublic state: State = {\n\t\thasError: false,\n\t};\n\n\tpublic static getDerivedStateFromError(): State {\n\t\t// Update state so the next render will show the fallback UI.\n\t\treturn { hasError: true };\n\t}\n\n\tpublic render() {\n\t\tif ( this.state.hasError ) {\n\t\t\treturn this.props.fallback;\n\t\t}\n\n\t\treturn this.props.children;\n\t}\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,IAAAA,SAAuB;;;ACAvB,YAAuB;AACvB,IAAAC,gBAAoC;;;ACDpC,mBAAqC;AAWrC,IAAqB,gBAArB,cAA2C,uBAAwB;AAAA,EAC3D,QAAe;AAAA,IACrB,UAAU;AAAA,EACX;AAAA,EAEA,OAAc,2BAAkC;AAE/C,WAAO,EAAE,UAAU,KAAK;AAAA,EACzB;AAAA,EAEO,SAAS;AACf,QAAK,KAAK,MAAM,UAAW;AAC1B,aAAO,KAAK,MAAM;AAAA,IACnB;AAEA,WAAO,KAAK,MAAM;AAAA,EACnB;AACD;;;ADxBe,SAAR,yBAA2C,EAAE,SAAS,GAA6B;AACzF,SACC,oCAAC,iBAAc,UAAW,QACzB,oCAAC,0BAAS,UAAW,QAClB,QACH,CACD;AAEF;;;ADTA,IAAAC,gBAAwB;AAIxB,IAAM,mBAAmB;AAGzB,IAAM,qBAAuC,CAAC;AAEvC,SAAS,iBAAqE;AACpF,QAAM,aAAoC,oBAAI,IAAI;AAElD,QAAM,gBAAgB,oBAAqB,UAAW;AACtD,QAAM,gBAAgB,oBAAqB,aAAc;AACzD,QAAM,OAAO,WAAY,aAAc;AACvC,QAAM,SAAS,aAAc,UAAW;AAGxC,qBAAmB,KAAM,MAAM,WAAW,MAAM,CAAE;AAElD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;AAEO,SAAS,qBAAqB;AACpC,qBAAmB,QAAS,CAAE,UAAW,MAAM,CAAE;AAClD;AAEA,SAAS,sBAAyDC,YAAuC;AACxG,SAAO,CAAE,UACR,qCAAC,gCACA,qCAACA,YAAA,EAAY,GAAG,OAAQ,CACzB;AAEF;AAEA,SAAS,WAA8C,eAAqD;AAC3G,SAAO,CAAE,UAAmB;AAC3B,UAAM,aAAa,cAAc;AAEjC,WACC,4DACG,WAAW,IAAK,CAAE,EAAE,IAAI,WAAWA,WAAU,MAC9C,qCAACA,YAAA,EAAY,GAAG,OAAQ,KAAM,IAAK,CAClC,CACH;AAAA,EAEF;AACD;AAEA,SAAS,oBAAuD,YAAoC;AACnG,SAAO,MAAM,CAAE,GAAG,WAAW,OAAO,CAAE,EACpC,KAAM,CAAE,GAAG,MAAO,EAAE,WAAW,EAAE,QAAS;AAC7C;AAEA,SAAS,aAAgD,YAAoC;AAC5F,SAAO,CAAE,EAAE,WAAW,IAAI,UAAU,CAAC,EAAE,MAA2B;AACjE,QAAK,WAAW,IAAK,EAAG,KAAK,CAAE,SAAS,WAAY;AAEnD,cAAQ;AAAA,QACP,6BAA8B,EAAG;AAAA,MAClC;AAEA;AAAA,IACD;AAEA,eAAW,IAAK,IAAI;AAAA,MACnB;AAAA,MACA,WAAW,sBAAuB,SAAU;AAAA,MAC5C,UAAU,QAAQ,YAAY;AAAA,IAC/B,CAAE;AAAA,EACH;AACD;AAEA,SAAS,oBAAuD,eAAqD;AACpH,SAAO,UAAM,uBAAS,MAAM,cAAc,GAAG,CAAC,CAAE;AACjD;","names":["React","import_react","import_react","Component"]}

package/dist/index.mjs

@@ -1,7 +1,7 @@
 // src/api.tsx
 import * as React2 from "react";
 
-// src/components/filler-wrapper.tsx
+// src/components/injected-component-wrapper.tsx
 import * as React from "react";
 import { Suspense } from "react";
 
@@ -22,8 +22,8 @@ var ErrorBoundary = class extends Component {
   }
 };
 
-// src/components/filler-wrapper.tsx
-function FillerWrapper({ children }) {
+// src/components/injected-component-wrapper.tsx
+function InjectedComponentWrapper({ children }) {
   return /* @__PURE__ */ React.createElement(ErrorBoundary, { fallback: null }, /* @__PURE__ */ React.createElement(Suspense, { fallback: null }, children));
 }
 
@@ -48,20 +48,20 @@ function createLocation() {
 function flushAllInjections() {
   flushInjectionsFns.forEach((flush) => flush());
 }
-function wrapFiller(FillerComponent) {
-  return (props) => /* @__PURE__ */ React2.createElement(FillerWrapper, null, /* @__PURE__ */ React2.createElement(FillerComponent, { ...props }));
+function wrapInjectedComponent(Component2) {
+  return (props) => /* @__PURE__ */ React2.createElement(InjectedComponentWrapper, null, /* @__PURE__ */ React2.createElement(Component2, { ...props }));
 }
 function createSlot(useInjections) {
   return (props) => {
     const injections = useInjections();
-    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, injections.map(({ id, filler: Component2 }) => /* @__PURE__ */ React2.createElement(Component2, { ...props, key: id })));
+    return /* @__PURE__ */ React2.createElement(React2.Fragment, null, injections.map(({ id, component: Component2 }) => /* @__PURE__ */ React2.createElement(Component2, { ...props, key: id })));
   };
 }
 function createGetInjections(injections) {
   return () => [...injections.values()].sort((a, b) => a.priority - b.priority);
 }
 function createInject(injections) {
-  return ({ filler, id, options = {} }) => {
+  return ({ component, id, options = {} }) => {
     if (injections.has(id) && !options?.overwrite) {
       console.warn(
         `An injection with the id "${id}" already exists. Did you mean to use "options.overwrite"?`
@@ -70,7 +70,7 @@ function createInject(injections) {
     }
     injections.set(id, {
       id,
-      filler: wrapFiller(filler),
+      component: wrapInjectedComponent(component),
       priority: options.priority ?? DEFAULT_PRIORITY
     });
   };

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/api.tsx","../src/components/filler-wrapper.tsx","../src/components/error-boundary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Filler, Injection, InjectArgs, AnyProps, Location, Id } from './types';\nimport FillerWrapper from './components/filler-wrapper';\nimport { useMemo } from 'react';\n\ntype InjectionsMap<TProps extends object = AnyProps> = Map<Id, Injection<TProps>>\n\nconst DEFAULT_PRIORITY = 10;\n\n// Allow flushing all injections at once, for testing purposes.\nconst flushInjectionsFns: ( () => void )[] = [];\n\nexport function createLocation<TProps extends object = AnyProps>(): Location<TProps> {\n\tconst injections: InjectionsMap<TProps> = new Map();\n\n\tconst getInjections = createGetInjections( injections );\n\tconst useInjections = createUseInjections( getInjections );\n\tconst Slot = createSlot( useInjections );\n\tconst inject = createInject( injections );\n\n\t// Push the clear function to the flushInjectionsFns array, so we can flush all injections at once.\n\tflushInjectionsFns.push( () => injections.clear() );\n\n\treturn {\n\t\tinject,\n\t\tgetInjections,\n\t\tuseInjections,\n\t\tSlot,\n\t};\n}\n\nexport function flushAllInjections() {\n\tflushInjectionsFns.forEach( ( flush ) => flush() );\n}\n\nfunction wrapFiller<TProps extends object = AnyProps>( FillerComponent: Filler<TProps> ) {\n\treturn ( props: TProps ) => (\n\t\t<FillerWrapper>\n\t\t\t<FillerComponent { ...props } />\n\t\t</FillerWrapper>\n\t);\n}\n\nfunction createSlot<TProps extends object = AnyProps>( useInjections: Location<TProps>[ 'useInjections' ] ) {\n\treturn ( props: TProps ) => {\n\t\tconst injections = useInjections();\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ injections.map( ( { id, filler: Component } ) => (\n\t\t\t\t\t<Component { ...props } key={ id } />\n\t\t\t\t) ) }\n\t\t\t</>\n\t\t);\n\t};\n}\n\nfunction createGetInjections<TProps extends object = AnyProps>( injections: InjectionsMap<TProps> ) {\n\treturn () => [ ...injections.values() ]\n\t\t.sort( ( a, b ) => a.priority - b.priority );\n}\n\nfunction createInject<TProps extends object = AnyProps>( injections: InjectionsMap<TProps> ) {\n\treturn ( { filler, id, options = {} }: InjectArgs<TProps> ) => {\n\t\tif ( injections.has( id ) && ! options?.overwrite ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`An injection with the id \"${ id }\" already exists. Did you mean to use \"options.overwrite\"?`,\n\t\t\t);\n\n\t\t\treturn;\n\t\t}\n\n\t\tinjections.set( id, {\n\t\t\tid,\n\t\t\tfiller: wrapFiller( filler ),\n\t\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t\t} );\n\t};\n}\n\nfunction createUseInjections<TProps extends object = AnyProps>( getInjections: Location<TProps>[ 'getInjections' ] ) {\n\treturn () => useMemo( () => getInjections(), [] );\n}\n","import * as React from 'react';\nimport { ReactNode, Suspense } from 'react';\nimport ErrorBoundary from './error-boundary';\n\nexport default function FillerWrapper( { children }: { children: ReactNode } ) {\n\treturn (\n\t\t<ErrorBoundary fallback={ null }>\n\t\t\t<Suspense fallback={ null }>\n\t\t\t\t{ children }\n\t\t\t</Suspense>\n\t\t</ErrorBoundary>\n\t);\n}\n","import { Component, ReactNode } from 'react';\n\ninterface Props {\n\tchildren?: ReactNode;\n\tfallback: ReactNode;\n}\n\ninterface State {\n\thasError: boolean;\n}\n\nexport default class ErrorBoundary extends Component<Props, State> {\n\tpublic state: State = {\n\t\thasError: false,\n\t};\n\n\tpublic static getDerivedStateFromError(): State {\n\t\t// Update state so the next render will show the fallback UI.\n\t\treturn { hasError: true };\n\t}\n\n\tpublic render() {\n\t\tif ( this.state.hasError ) {\n\t\t\treturn this.props.fallback;\n\t\t}\n\n\t\treturn this.props.children;\n\t}\n}\n"],"mappings":";AAAA,YAAYA,YAAW;;;ACAvB,YAAY,WAAW;AACvB,SAAoB,gBAAgB;;;ACDpC,SAAS,iBAA4B;AAWrC,IAAqB,gBAArB,cAA2C,UAAwB;AAAA,EAC3D,QAAe;AAAA,IACrB,UAAU;AAAA,EACX;AAAA,EAEA,OAAc,2BAAkC;AAE/C,WAAO,EAAE,UAAU,KAAK;AAAA,EACzB;AAAA,EAEO,SAAS;AACf,QAAK,KAAK,MAAM,UAAW;AAC1B,aAAO,KAAK,MAAM;AAAA,IACnB;AAEA,WAAO,KAAK,MAAM;AAAA,EACnB;AACD;;;ADxBe,SAAR,cAAgC,EAAE,SAAS,GAA6B;AAC9E,SACC,oCAAC,iBAAc,UAAW,QACzB,oCAAC,YAAS,UAAW,QAClB,QACH,CACD;AAEF;;;ADTA,SAAS,eAAe;AAIxB,IAAM,mBAAmB;AAGzB,IAAM,qBAAuC,CAAC;AAEvC,SAAS,iBAAqE;AACpF,QAAM,aAAoC,oBAAI,IAAI;AAElD,QAAM,gBAAgB,oBAAqB,UAAW;AACtD,QAAM,gBAAgB,oBAAqB,aAAc;AACzD,QAAM,OAAO,WAAY,aAAc;AACvC,QAAM,SAAS,aAAc,UAAW;AAGxC,qBAAmB,KAAM,MAAM,WAAW,MAAM,CAAE;AAElD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;AAEO,SAAS,qBAAqB;AACpC,qBAAmB,QAAS,CAAE,UAAW,MAAM,CAAE;AAClD;AAEA,SAAS,WAA8C,iBAAkC;AACxF,SAAO,CAAE,UACR,qCAAC,qBACA,qCAAC,mBAAkB,GAAG,OAAQ,CAC/B;AAEF;AAEA,SAAS,WAA8C,eAAqD;AAC3G,SAAO,CAAE,UAAmB;AAC3B,UAAM,aAAa,cAAc;AAEjC,WACC,4DACG,WAAW,IAAK,CAAE,EAAE,IAAI,QAAQC,WAAU,MAC3C,qCAACA,YAAA,EAAY,GAAG,OAAQ,KAAM,IAAK,CAClC,CACH;AAAA,EAEF;AACD;AAEA,SAAS,oBAAuD,YAAoC;AACnG,SAAO,MAAM,CAAE,GAAG,WAAW,OAAO,CAAE,EACpC,KAAM,CAAE,GAAG,MAAO,EAAE,WAAW,EAAE,QAAS;AAC7C;AAEA,SAAS,aAAgD,YAAoC;AAC5F,SAAO,CAAE,EAAE,QAAQ,IAAI,UAAU,CAAC,EAAE,MAA2B;AAC9D,QAAK,WAAW,IAAK,EAAG,KAAK,CAAE,SAAS,WAAY;AAEnD,cAAQ;AAAA,QACP,6BAA8B,EAAG;AAAA,MAClC;AAEA;AAAA,IACD;AAEA,eAAW,IAAK,IAAI;AAAA,MACnB;AAAA,MACA,QAAQ,WAAY,MAAO;AAAA,MAC3B,UAAU,QAAQ,YAAY;AAAA,IAC/B,CAAE;AAAA,EACH;AACD;AAEA,SAAS,oBAAuD,eAAqD;AACpH,SAAO,MAAM,QAAS,MAAM,cAAc,GAAG,CAAC,CAAE;AACjD;","names":["React","Component"]}
+{"version":3,"sources":["../src/api.tsx","../src/components/injected-component-wrapper.tsx","../src/components/error-boundary.tsx"],"sourcesContent":["import * as React from 'react';\nimport { InjectedComponent, Injection, InjectArgs, AnyProps, Location, Id } from './types';\nimport InjectedComponentWrapper from './components/injected-component-wrapper';\nimport { useMemo } from 'react';\n\ntype InjectionsMap<TProps extends object = AnyProps> = Map<Id, Injection<TProps>>\n\nconst DEFAULT_PRIORITY = 10;\n\n// Allow flushing all injections at once, for testing purposes.\nconst flushInjectionsFns: ( () => void )[] = [];\n\nexport function createLocation<TProps extends object = AnyProps>(): Location<TProps> {\n\tconst injections: InjectionsMap<TProps> = new Map();\n\n\tconst getInjections = createGetInjections( injections );\n\tconst useInjections = createUseInjections( getInjections );\n\tconst Slot = createSlot( useInjections );\n\tconst inject = createInject( injections );\n\n\t// Push the clear function to the flushInjectionsFns array, so we can flush all injections at once.\n\tflushInjectionsFns.push( () => injections.clear() );\n\n\treturn {\n\t\tinject,\n\t\tgetInjections,\n\t\tuseInjections,\n\t\tSlot,\n\t};\n}\n\nexport function flushAllInjections() {\n\tflushInjectionsFns.forEach( ( flush ) => flush() );\n}\n\nfunction wrapInjectedComponent<TProps extends object = AnyProps>( Component: InjectedComponent<TProps> ) {\n\treturn ( props: TProps ) => (\n\t\t<InjectedComponentWrapper>\n\t\t\t<Component { ...props } />\n\t\t</InjectedComponentWrapper>\n\t);\n}\n\nfunction createSlot<TProps extends object = AnyProps>( useInjections: Location<TProps>[ 'useInjections' ] ) {\n\treturn ( props: TProps ) => {\n\t\tconst injections = useInjections();\n\n\t\treturn (\n\t\t\t<>\n\t\t\t\t{ injections.map( ( { id, component: Component } ) => (\n\t\t\t\t\t<Component { ...props } key={ id } />\n\t\t\t\t) ) }\n\t\t\t</>\n\t\t);\n\t};\n}\n\nfunction createGetInjections<TProps extends object = AnyProps>( injections: InjectionsMap<TProps> ) {\n\treturn () => [ ...injections.values() ]\n\t\t.sort( ( a, b ) => a.priority - b.priority );\n}\n\nfunction createInject<TProps extends object = AnyProps>( injections: InjectionsMap<TProps> ) {\n\treturn ( { component, id, options = {} }: InjectArgs<TProps> ) => {\n\t\tif ( injections.has( id ) && ! options?.overwrite ) {\n\t\t\t// eslint-disable-next-line no-console\n\t\t\tconsole.warn(\n\t\t\t\t`An injection with the id \"${ id }\" already exists. Did you mean to use \"options.overwrite\"?`,\n\t\t\t);\n\n\t\t\treturn;\n\t\t}\n\n\t\tinjections.set( id, {\n\t\t\tid,\n\t\t\tcomponent: wrapInjectedComponent( component ),\n\t\t\tpriority: options.priority ?? DEFAULT_PRIORITY,\n\t\t} );\n\t};\n}\n\nfunction createUseInjections<TProps extends object = AnyProps>( getInjections: Location<TProps>[ 'getInjections' ] ) {\n\treturn () => useMemo( () => getInjections(), [] );\n}\n","import * as React from 'react';\nimport { ReactNode, Suspense } from 'react';\nimport ErrorBoundary from './error-boundary';\n\nexport default function InjectedComponentWrapper( { children }: { children: ReactNode } ) {\n\treturn (\n\t\t<ErrorBoundary fallback={ null }>\n\t\t\t<Suspense fallback={ null }>\n\t\t\t\t{ children }\n\t\t\t</Suspense>\n\t\t</ErrorBoundary>\n\t);\n}\n","import { Component, ReactNode } from 'react';\n\ninterface Props {\n\tchildren?: ReactNode;\n\tfallback: ReactNode;\n}\n\ninterface State {\n\thasError: boolean;\n}\n\nexport default class ErrorBoundary extends Component<Props, State> {\n\tpublic state: State = {\n\t\thasError: false,\n\t};\n\n\tpublic static getDerivedStateFromError(): State {\n\t\t// Update state so the next render will show the fallback UI.\n\t\treturn { hasError: true };\n\t}\n\n\tpublic render() {\n\t\tif ( this.state.hasError ) {\n\t\t\treturn this.props.fallback;\n\t\t}\n\n\t\treturn this.props.children;\n\t}\n}\n"],"mappings":";AAAA,YAAYA,YAAW;;;ACAvB,YAAY,WAAW;AACvB,SAAoB,gBAAgB;;;ACDpC,SAAS,iBAA4B;AAWrC,IAAqB,gBAArB,cAA2C,UAAwB;AAAA,EAC3D,QAAe;AAAA,IACrB,UAAU;AAAA,EACX;AAAA,EAEA,OAAc,2BAAkC;AAE/C,WAAO,EAAE,UAAU,KAAK;AAAA,EACzB;AAAA,EAEO,SAAS;AACf,QAAK,KAAK,MAAM,UAAW;AAC1B,aAAO,KAAK,MAAM;AAAA,IACnB;AAEA,WAAO,KAAK,MAAM;AAAA,EACnB;AACD;;;ADxBe,SAAR,yBAA2C,EAAE,SAAS,GAA6B;AACzF,SACC,oCAAC,iBAAc,UAAW,QACzB,oCAAC,YAAS,UAAW,QAClB,QACH,CACD;AAEF;;;ADTA,SAAS,eAAe;AAIxB,IAAM,mBAAmB;AAGzB,IAAM,qBAAuC,CAAC;AAEvC,SAAS,iBAAqE;AACpF,QAAM,aAAoC,oBAAI,IAAI;AAElD,QAAM,gBAAgB,oBAAqB,UAAW;AACtD,QAAM,gBAAgB,oBAAqB,aAAc;AACzD,QAAM,OAAO,WAAY,aAAc;AACvC,QAAM,SAAS,aAAc,UAAW;AAGxC,qBAAmB,KAAM,MAAM,WAAW,MAAM,CAAE;AAElD,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACD;AACD;AAEO,SAAS,qBAAqB;AACpC,qBAAmB,QAAS,CAAE,UAAW,MAAM,CAAE;AAClD;AAEA,SAAS,sBAAyDC,YAAuC;AACxG,SAAO,CAAE,UACR,qCAAC,gCACA,qCAACA,YAAA,EAAY,GAAG,OAAQ,CACzB;AAEF;AAEA,SAAS,WAA8C,eAAqD;AAC3G,SAAO,CAAE,UAAmB;AAC3B,UAAM,aAAa,cAAc;AAEjC,WACC,4DACG,WAAW,IAAK,CAAE,EAAE,IAAI,WAAWA,WAAU,MAC9C,qCAACA,YAAA,EAAY,GAAG,OAAQ,KAAM,IAAK,CAClC,CACH;AAAA,EAEF;AACD;AAEA,SAAS,oBAAuD,YAAoC;AACnG,SAAO,MAAM,CAAE,GAAG,WAAW,OAAO,CAAE,EACpC,KAAM,CAAE,GAAG,MAAO,EAAE,WAAW,EAAE,QAAS;AAC7C;AAEA,SAAS,aAAgD,YAAoC;AAC5F,SAAO,CAAE,EAAE,WAAW,IAAI,UAAU,CAAC,EAAE,MAA2B;AACjE,QAAK,WAAW,IAAK,EAAG,KAAK,CAAE,SAAS,WAAY;AAEnD,cAAQ;AAAA,QACP,6BAA8B,EAAG;AAAA,MAClC;AAEA;AAAA,IACD;AAEA,eAAW,IAAK,IAAI;AAAA,MACnB;AAAA,MACA,WAAW,sBAAuB,SAAU;AAAA,MAC5C,UAAU,QAAQ,YAAY;AAAA,IAC/B,CAAE;AAAA,EACH;AACD;AAEA,SAAS,oBAAuD,eAAqD;AACpH,SAAO,MAAM,QAAS,MAAM,cAAc,GAAG,CAAC,CAAE;AACjD;","names":["React","Component"]}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@elementor/locations",
-	"version": "0.6.1",
+	"version": "0.6.3",
 	"private": false,
 	"author": "Elementor Team",
 	"homepage": "https://elementor.com/",
@@ -34,5 +34,5 @@
 	"peerDependencies": {
 		"react": "18.x"
 	},
-	"gitHead": "fbb55b97a2581af49559479b6abf63f5acbfc28b"
+	"gitHead": "43abed846a5beaf6b0c6c5a8420c81a5bea33152"
 }

package/src/__tests__/index.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { lazy } from 'react';
 import { createLocation } from '../api';
 
@@ -11,24 +11,24 @@ describe( '@elementor/locations', () => {
 
 		injectIntoTest( {
 			id: 'test-1',
-			filler: () => <div data-testid="element">First div</div>,
+			component: () => <div data-testid="element">First div</div>,
 		} );
 
 		injectIntoTest( {
 			id: 'test-2',
-			filler: () => <div data-testid="element">Second div</div>,
+			component: () => <div data-testid="element">Second div</div>,
 		} );
 
 		injectIntoTest2( {
 			id: 'test-3',
-			filler: () => <div data-testid="element">Should not exist</div>,
+			component: () => <div data-testid="element">Should not exist</div>,
 		} );
 
 		// Act.
-		const { getAllByTestId } = render( <TestSlot /> );
+		render( <TestSlot /> );
 
 		// Assert.
-		const elements = getAllByTestId( 'element' );
+		const elements = screen.getAllByTestId( 'element' );
 
 		expect( elements ).toHaveLength( 2 );
 		expect( elements[ 0 ].innerHTML ).toBe( 'First div' );
@@ -41,27 +41,27 @@ describe( '@elementor/locations', () => {
 
 		inject( {
 			id: 'test-1',
-			filler: () => <div data-testid="element">Third div</div>,
+			component: () => <div data-testid="element">Third div</div>,
 			// Default priority is 10.
 		} );
 
 		inject( {
 			id: 'test-2',
-			filler: () => <div data-testid="element">First div</div>,
+			component: () => <div data-testid="element">First div</div>,
 			options: { priority: 5 },
 		} );
 
 		inject( {
 			id: 'test-3',
-			filler: () => <div data-testid="element">Second div</div>,
+			component: () => <div data-testid="element">Second div</div>,
 			options: { priority: 5 },
 		} );
 
 		// Act.
-		const { getAllByTestId } = render( <Slot /> );
+		render( <Slot /> );
 
 		// Assert.
-		const elements = getAllByTestId( 'element' );
+		const elements = screen.getAllByTestId( 'element' );
 
 		expect( elements ).toHaveLength( 3 );
 		expect( elements[ 0 ].innerHTML ).toBe( 'First div' );
@@ -77,7 +77,7 @@ describe( '@elementor/locations', () => {
 		const { container } = render( <Slot /> );
 
 		// Assert.
-		expect( container.innerHTML ).toBe( '' );
+		expect( container ).toBeEmptyDOMElement( );
 	} );
 
 	it( 'should render lazy components', async () => {
@@ -86,81 +86,81 @@ describe( '@elementor/locations', () => {
 
 		inject( {
 			id: 'test-1',
-			filler: () => <div>First div</div>,
+			component: () => <div>First div</div>,
 		} );
 
 		inject( {
 			id: 'test-2',
-			filler: lazy( () => Promise.resolve( {
+			component: lazy( () => Promise.resolve( {
 				default: () => <div>Second div</div>,
 			} ) ),
 		} );
 
 		// Act.
-		const { queryByText, findByText } = render( <Slot /> );
+		render( <Slot /> );
 
 		// Assert.
-		expect( queryByText( 'First div' ) ).toBeTruthy();
-		expect( queryByText( 'Second div' ) ).toBeNull();
+		expect( screen.getByText( 'First div' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'Second div' ) ).not.toBeInTheDocument();
 
 		// Waits for the lazy component to be loaded.
-		await findByText( 'Second div' );
+		await screen.findByText( 'Second div' );
 
-		expect( queryByText( 'First div' ) ).toBeTruthy();
-		expect( queryByText( 'Second div' ) ).toBeTruthy();
+		expect( screen.getByText( 'First div' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Second div' ) ).toBeInTheDocument();
 	} );
 
-	it( 'should error when injecting filler with the same name (without overwrite option)', async () => {
+	it( 'should error when injecting a component with the same name (without overwrite option)', async () => {
 		// Arrange.
 		const { inject, Slot } = createLocation();
 
 		inject( {
 			id: 'test',
-			filler: () => <div>First div</div>,
+			component: () => <div>First div</div>,
 		} );
 
 		inject( {
 			id: 'test',
-			filler: () => <div>Second div</div>,
+			component: () => <div>Second div</div>,
 		} );
 
 		// Act
-		const { queryByText } = render( <Slot /> );
+		render( <Slot /> );
 
 		// Assert.
-		expect( queryByText( 'First div' ) ).toBeTruthy();
-		expect( queryByText( 'Second div' ) ).toBeNull();
+		expect( screen.getByText( 'First div' ) ).toBeInTheDocument();
+		expect( screen.queryByText( 'Second div' ) ).not.toBeInTheDocument();
 		expect( console ).toHaveWarned();
 	} );
 
-	it( 'should overwrite the filler if has same name', async () => {
+	it( 'should overwrite the injected component if has same name', async () => {
 		// Arrange.
 		const { inject, Slot } = createLocation();
 
 		inject( {
 			id: 'test',
-			filler: () => <div>First div</div>,
+			component: () => <div>First div</div>,
 		} );
 
 		inject( {
 			id: 'test',
-			filler: () => <div>Second div</div>,
+			component: () => <div>Second div</div>,
 			options: { overwrite: true },
 		} );
 
 		inject( {
 			id: 'test-2',
-			filler: () => <div>Third div</div>,
+			component: () => <div>Third div</div>,
 			options: { overwrite: true },
 		} );
 
 		// Act
-		const { queryByText } = render( <Slot /> );
+		render( <Slot /> );
 
 		// Assert.
-		expect( queryByText( 'First div' ) ).toBeNull();
-		expect( queryByText( 'Second div' ) ).toBeTruthy();
-		expect( queryByText( 'Third div' ) ).toBeTruthy();
+		expect( screen.queryByText( 'First div' ) ).not.toBeInTheDocument();
+		expect( screen.getByText( 'Second div' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Third div' ) ).toBeInTheDocument();
 	} );
 
 	it( 'should overwrite the injection priority', () => {
@@ -169,13 +169,13 @@ describe( '@elementor/locations', () => {
 
 		inject( {
 			id: 'test-1',
-			filler: () => <div />,
+			component: () => <div />,
 			options: { priority: 5 },
 		} );
 
 		inject( {
 			id: 'test-1',
-			filler: () => <div />,
+			component: () => <div />,
 			options: { overwrite: true },
 		} );
 
@@ -184,49 +184,49 @@ describe( '@elementor/locations', () => {
 		expect( getInjections()[ 0 ].priority ).toBe( 10 );
 	} );
 
-	it( 'should catch filler errors with error boundary', () => {
+	it( 'should catch injected component errors with error boundary', () => {
 		// Arrange.
 		const { inject, Slot } = createLocation();
 
 		inject( {
 			id: 'test-1',
-			filler: () => <div>Test 1</div>,
+			component: () => <div>Test 1</div>,
 		} );
 
 		inject( {
 			id: 'test-2',
-			filler: () => {
+			component: () => {
 				throw new Error( 'Error' );
 			},
 		} );
 
 		inject( {
 			id: 'test-3',
-			filler: () => <div>Test 3</div>,
+			component: () => <div>Test 3</div>,
 		} );
 
 		// Act.
-		const { queryByText } = render( <Slot /> );
+		render( <Slot /> );
 
 		// Assert.
-		expect( queryByText( 'Test 1' ) ).toBeTruthy();
-		expect( queryByText( 'Test 3' ) ).toBeTruthy();
+		expect( screen.getByText( 'Test 1' ) ).toBeInTheDocument();
+		expect( screen.getByText( 'Test 3' ) ).toBeInTheDocument();
 		expect( console ).toHaveErrored();
 	} );
 
-	it( 'should pass the props from Slot to a Filler', () => {
+	it( 'should pass the props from Slot to the injected component', () => {
 		// Arrange.
 		const { inject, Slot } = createLocation<{ text: string, number: number }>();
 
 		inject( {
 			id: 'test-1',
-			filler: ( { text, number } ) => <div>{ text }: { number }</div>,
+			component: ( { text, number } ) => <div>{ text }: { number }</div>,
 		} );
 
 		// Act.
-		const { queryByText } = render( <Slot text="The number is" number={ 1 } /> );
+		render( <Slot text="The number is" number={ 1 } /> );
 
 		// Assert.
-		expect( queryByText( 'The number is: 1' ) ).toBeTruthy();
+		expect( screen.getByText( 'The number is: 1' ) ).toBeInTheDocument();
 	} );
 } );

package/src/api.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { Filler, Injection, InjectArgs, AnyProps, Location, Id } from './types';
-import FillerWrapper from './components/filler-wrapper';
+import { InjectedComponent, Injection, InjectArgs, AnyProps, Location, Id } from './types';
+import InjectedComponentWrapper from './components/injected-component-wrapper';
 import { useMemo } from 'react';
 
 type InjectionsMap<TProps extends object = AnyProps> = Map<Id, Injection<TProps>>
@@ -33,11 +33,11 @@ export function flushAllInjections() {
 	flushInjectionsFns.forEach( ( flush ) => flush() );
 }
 
-function wrapFiller<TProps extends object = AnyProps>( FillerComponent: Filler<TProps> ) {
+function wrapInjectedComponent<TProps extends object = AnyProps>( Component: InjectedComponent<TProps> ) {
 	return ( props: TProps ) => (
-		<FillerWrapper>
-			<FillerComponent { ...props } />
-		</FillerWrapper>
+		<InjectedComponentWrapper>
+			<Component { ...props } />
+		</InjectedComponentWrapper>
 	);
 }
 
@@ -47,7 +47,7 @@ function createSlot<TProps extends object = AnyProps>( useInjections: Location<T
 
 		return (
 			<>
-				{ injections.map( ( { id, filler: Component } ) => (
+				{ injections.map( ( { id, component: Component } ) => (
 					<Component { ...props } key={ id } />
 				) ) }
 			</>
@@ -61,7 +61,7 @@ function createGetInjections<TProps extends object = AnyProps>( injections: Inje
 }
 
 function createInject<TProps extends object = AnyProps>( injections: InjectionsMap<TProps> ) {
-	return ( { filler, id, options = {} }: InjectArgs<TProps> ) => {
+	return ( { component, id, options = {} }: InjectArgs<TProps> ) => {
 		if ( injections.has( id ) && ! options?.overwrite ) {
 			// eslint-disable-next-line no-console
 			console.warn(
@@ -73,7 +73,7 @@ function createInject<TProps extends object = AnyProps>( injections: InjectionsM
 
 		injections.set( id, {
 			id,
-			filler: wrapFiller( filler ),
+			component: wrapInjectedComponent( component ),
 			priority: options.priority ?? DEFAULT_PRIORITY,
 		} );
 	};

package/src/components/{filler-wrapper.tsx → injected-component-wrapper.tsx}

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ReactNode, Suspense } from 'react';
 import ErrorBoundary from './error-boundary';
 
-export default function FillerWrapper( { children }: { children: ReactNode } ) {
+export default function InjectedComponentWrapper( { children }: { children: ReactNode } ) {
 	return (
 		<ErrorBoundary fallback={ null }>
 			<Suspense fallback={ null }>

package/src/types.ts

@@ -3,27 +3,56 @@ import { ComponentType } from 'react';
 // Allow passing the `key` prop even when there are no props for the component
 export type AnyProps = object;
 
-export type Filler<TProps extends object = AnyProps> = ComponentType<TProps>;
+export type InjectedComponent<TProps extends object = AnyProps> = ComponentType<TProps>;
 export type Id = string;
 export type Priority = number;
 
 export type Injection<TProps extends object = AnyProps> = {
+	/**
+	 * A unique id (per location) of the injected component.
+	 */
 	id: Id;
-	filler: Filler<TProps>;
+	/**
+	 * The injected component.
+	 */
+	component: InjectedComponent<TProps>;
+	/**
+	 * Priority of the injected component inside the location. Lower value means higher priority.
+	 */
 	priority: Priority;
 }
 
 export type InjectArgs<TProps extends object = AnyProps> = {
+	/**
+	 * A unique id (per location) of the component to be injected.
+	 */
 	id: Id;
-	filler: Filler<TProps>;
+	/**
+	 * The component to be injected.
+	 */
+	component: InjectedComponent<TProps>;
+
 	options?: {
+		/**
+		 * Priority of the injected component inside the location. Lower value means higher priority.
+		 */
 		priority?: Priority;
+		/**
+		 * When true, if an injected component with the same id already exists it will be overridden with this one. Otherwise, this injection will be ignored. Default is false.
+		 */
 		overwrite?: boolean;
 	};
 }
 
 export type Location<TProps extends object = AnyProps> = {
+	/**
+	 * Inject a component into the location.
+	 */
 	inject: ( args: InjectArgs<TProps> ) => void;
+	/**
+	 *
+	 * @return All the injections in the location.
+	 */
 	getInjections: () => Injection<TProps>[];
 	useInjections: () => Injection<TProps>[];
 	Slot: ComponentType<TProps>;