Rename ballon to popup

example/default-popups/react/index.tsx

@@ -12,7 +12,7 @@ async function main() {
 
     const {useState, useCallback} = React;
 
-    const {MMapBalloonMarker, MMapDefaultPopupMarker} = reactify.module(
+    const {MMapPopupMarker, MMapDefaultPopupMarker} = reactify.module(
         await mappable.import('@mappable-world/mappable-default-ui-theme')
     );
 
@@ -53,7 +53,7 @@ async function main() {
                     <MMapControlButton text="Toggle default popup" onClick={toggleDefaultPopup} />
                 </MMapControls>
 
-                <MMapBalloonMarker show={showCustomPopup} coordinates={CUSTOM_POPUP_COORDS} content={contentCallback} />
+                <MMapPopupMarker show={showCustomPopup} coordinates={CUSTOM_POPUP_COORDS} content={contentCallback} />
 
                 <MMapDefaultPopupMarker
                     show={showDefaultPopup}

example/default-popups/vanilla/index.ts

@@ -6,7 +6,7 @@ async function main() {
     await mappable.ready;
     const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls, MMapControlButton} = mappable;
 
-    const {MMapBalloonMarker, MMapDefaultPopupMarker} = await mappable.import(
+    const {MMapPopupMarker, MMapDefaultPopupMarker} = await mappable.import(
         '@mappable-world/mappable-default-ui-theme'
     );
 
@@ -28,7 +28,7 @@ async function main() {
         ])
     );
 
-    const customPopup = new MMapBalloonMarker({
+    const customPopup = new MMapPopupMarker({
         coordinates: CUSTOM_POPUP_COORDS,
         content: () => {
             const popupElement = document.createElement('div');

example/default-popups/vue/index.ts

@@ -10,7 +10,7 @@ async function main() {
     const {MMap, MMapDefaultSchemeLayer, MMapDefaultFeaturesLayer, MMapControls, MMapControlButton} =
         vuefy.module(mappable);
 
-    const {MMapBalloonMarker, MMapDefaultPopupMarker} = vuefy.module(
+    const {MMapPopupMarker, MMapDefaultPopupMarker} = vuefy.module(
         await mappable.import('@mappable-world/mappable-default-ui-theme')
     );
 
@@ -21,7 +21,7 @@ async function main() {
             MMapDefaultFeaturesLayer,
             MMapControls,
             MMapControlButton,
-            MMapBalloonMarker,
+            MMapPopupMarker,
             MMapDefaultPopupMarker
         },
         setup() {
@@ -60,15 +60,15 @@ async function main() {
                     <MMapControlButton text="Toggle custom popup" :onClick="toggleCustomPopup" />
                     <MMapControlButton text="Toggle default popup" :onClick="toggleDefaultPopup" />
                 </MMapControls>
-                <MMapBalloonMarker :show="showCustomPopup" :coordinates="CUSTOM_POPUP_COORDS">
+                <MMapPopupMarker :show="showCustomPopup" :coordinates="CUSTOM_POPUP_COORDS">
                     <template #content>
                         <div class="custom-popup">
                             <div class="title">Title</div>
                             <button :onClick="onCloseCustomPopup">close</button>
                             <div class="content">Custom popup content</div>
                         </div>
                     </template>
-                </MMapBalloonMarker>
+                </MMapPopupMarker>
                 <MMapDefaultPopupMarker
                     :show="showDefaultPopup"
                     :coordinates="DEFAULT_POPUP_COORDS"

src/markers/MMapDefaultPopupMarker/MMapDefaultPopupMarker.test.ts

@@ -1,5 +1,5 @@
 import {MMap} from '@mappable-world/mappable-types';
-import {createContainer, CENTER} from '../../../tests/common';
+import {CENTER, createContainer} from '../../../tests/common';
 import {MMapDefaultPopupMarker} from './';
 
 describe('MMapDefaultPopupMarker', () => {
@@ -88,4 +88,4 @@ describe('MMapDefaultPopupMarker', () => {
     });
 });
 
-const BASE_SELECTOR = '.mappable--balloon-marker .mappable--default-popup';
+const BASE_SELECTOR = '.mappable--popup-marker .mappable--default-popup';

src/markers/MMapDefaultPopupMarker/index.ts

@@ -1,10 +1,10 @@
-import {MMapBalloonContentProps, MMapBalloonMarker, MMapBalloonMarkerProps} from '../MMapBalloonMarker';
+import {MMapPopupContentProps, MMapPopupMarker, MMapPopupMarkerProps} from '../MMapPopupMarker';
 import {MMapDefaultPopupMarkerVuefyOptions} from './vue';
 
 import closeSVG from './close.svg';
 import './index.css';
 
-export type MMapDefaultPopupMarkerProps = Omit<MMapBalloonMarkerProps, 'content'> & {
+export type MMapDefaultPopupMarkerProps = Omit<MMapPopupMarkerProps, 'content'> & {
     /** Displayed title in popup header */
     title?: string;
     /** Displayed description */
@@ -25,19 +25,19 @@ export type MMapDefaultPopupMarkerProps = Omit<MMapBalloonMarkerProps, 'content'
  *  // support MMapMarker props
  *  coordinates: POPUP_COORD,
  *  draggable: true,
- *  // support MMapBalloonMarker props
+ *  // support MMapPopupMarker props
  *  position: 'top',
  * });
  * map.addChild(defaultPopup);
  * ```
  */
 export class MMapDefaultPopupMarker extends mappable.MMapComplexEntity<MMapDefaultPopupMarkerProps> {
     static [mappable.optionsKeyVuefy] = MMapDefaultPopupMarkerVuefyOptions;
-    private _balloon: MMapBalloonMarker;
+    private _popup: MMapPopupMarker;
     private _element: HTMLElement;
 
     public get isOpen() {
-        return this._balloon.isOpen;
+        return this._popup.isOpen;
     }
 
     protected _onAttach(): void {
@@ -49,7 +49,7 @@ export class MMapDefaultPopupMarker extends mappable.MMapComplexEntity<MMapDefau
             );
         }
 
-        this._balloon = new MMapBalloonMarker({
+        this._popup = new MMapPopupMarker({
             ...this._props,
             content: this.__createDefaultPopup,
             onClose: () => {
@@ -61,7 +61,7 @@ export class MMapDefaultPopupMarker extends mappable.MMapComplexEntity<MMapDefau
                 this._props.onOpen?.();
             }
         });
-        this.addChild(this._balloon);
+        this.addChild(this._popup);
 
         this._watchContext(mappable.ThemeContext, () => this._updateTheme(), {immediate: true});
     }
@@ -74,18 +74,18 @@ export class MMapDefaultPopupMarker extends mappable.MMapComplexEntity<MMapDefau
         const isActionChange = oldProps.action !== action;
 
         if (isTitleChange || isDescriptionChange || isActionChange) {
-            this._balloon.update({content: () => this.__createDefaultPopup()});
+            this._popup.update({content: () => this.__createDefaultPopup()});
         }
 
-        this._balloon.update(this._props);
+        this._popup.update(this._props);
     }
 
     private _updateTheme() {
         const themeCtx = this._consumeContext(mappable.ThemeContext);
         this._element.classList.toggle('mappable--default-popup__dark', themeCtx.theme === 'dark');
     }
 
-    private __createDefaultPopup: MMapBalloonContentProps = () => {
+    private __createDefaultPopup: MMapPopupContentProps = () => {
         const {title, description, action} = this._props;
         this._element = document.createElement('mappable');
         this._element.classList.add('mappable--default-popup');
@@ -104,7 +104,7 @@ export class MMapDefaultPopupMarker extends mappable.MMapComplexEntity<MMapDefau
         const closeButton = document.createElement('button');
         closeButton.classList.add('mappable--default-popup_header_close');
         closeButton.innerHTML = closeSVG;
-        closeButton.addEventListener('click', () => this._balloon.update({show: false}));
+        closeButton.addEventListener('click', () => this._popup.update({show: false}));
         popupHeaderElement.appendChild(closeButton);
 
         if (description) {