npm - @micromag/screen-map - Versions diffs - 0.4.71 → 0.4.76 - Mend

@micromag/screen-map 0.4.71 → 0.4.76

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/es/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ForwardedRef } from 'react';
-import { Marker, MarkerWithImage, TextElement, GeoPosition, BackgroundElement } from '@micromag/core';
+import { Marker, MarkerWithImage, TextElement, GeoPosition, BackgroundElement, MediaElement } from '@micromag/core';
 interface MapScreenProps {
     layout?: 'normal';
@@ -18,7 +18,7 @@ interface MapScreenProps {
     current?: boolean;
     active?: boolean;
     type?: string | null;
-    mediaRef?: ForwardedRef<HTMLMediaElement> | null;
+    mediaRef?: ForwardedRef<MediaElement> | null;
     className?: string | null;
 }
 declare function MapScreen({ layout, draggable, markers, title, description, button, openedMarkerSpacerHeight, withMarkerImages, zoom, center, fitBounds, background, current, active, type, mediaRef: customMediaRef, className, }: MapScreenProps): react_jsx_runtime.JSX.Element;

package/es/index.js CHANGED Viewed

@@ -1,7 +1,4 @@
 import { useIntl, FormattedMessage, defineMessage } from 'react-intl';
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import _objectSpread from '@babel/runtime/helpers/objectSpread2';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import classNames from 'classnames';
 import { useState, useRef, useCallback, useMemo, useEffect } from 'react';
 import { PlaceholderMap, Button, ScreenElement } from '@micromag/core/components';
@@ -17,160 +14,125 @@ import Map from '@micromag/element-map';
 import Scroll from '@micromag/element-scroll';
 import Text from '@micromag/element-text';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
-import _extends from '@babel/runtime/helpers/extends';
+import { c } from 'react/compiler-runtime';
 var styles = {"container":"micromag-screen-map-container","background":"micromag-screen-map-background","content":"micromag-screen-map-content","placeholder":"micromag-screen-map-placeholder","markerOverlayContainer":"micromag-screen-map-markerOverlayContainer","markerOverlayScrollable":"micromag-screen-map-markerOverlayScrollable","markerOverlaySafe":"micromag-screen-map-markerOverlaySafe","markerOverlay":"micromag-screen-map-markerOverlay","markerOverlayContent":"micromag-screen-map-markerOverlayContent","markerOverlayContentInner":"micromag-screen-map-markerOverlayContentInner","swipeIndicator":"micromag-screen-map-swipeIndicator","splash":"micromag-screen-map-splash","title":"micromag-screen-map-title","description":"micromag-screen-map-description","button":"micromag-screen-map-button","emptyTitle":"micromag-screen-map-emptyTitle","emptyDescription":"micromag-screen-map-emptyDescription","emptyButton":"micromag-screen-map-emptyButton","splashButton":"micromag-screen-map-splashButton","closeButton":"micromag-screen-map-closeButton","markerImage":"micromag-screen-map-markerImage","markerTitle":"micromag-screen-map-markerTitle","markerSubtitle":"micromag-screen-map-markerSubtitle","markerDescription":"micromag-screen-map-markerDescription","hasSelectedMarker":"micromag-screen-map-hasSelectedMarker","opened":"micromag-screen-map-opened"};
-var defaultCenter = {
+const defaultCenter = {
   lat: 45.5,
   lng: -73.56
 };
-var defaultZoom = 10;
-var stopDragEventsPropagation = {
-  onTouchMove: function onTouchMove(e) {
-    return e.stopPropagation();
-  },
-  onTouchStart: function onTouchStart(e) {
-    return e.stopPropagation();
-  },
-  onTouchEnd: function onTouchEnd(e) {
-    return e.stopPropagation();
-  },
-  onPointerMove: function onPointerMove(e) {
-    return e.stopPropagation();
-  },
-  onPointerUp: function onPointerUp(e) {
-    return e.stopPropagation();
-  },
-  onPointerDown: function onPointerDown(e) {
-    return e.stopPropagation();
-  }
+const defaultZoom = 10;
+const stopDragEventsPropagation = {
+  onTouchMove: e => e.stopPropagation(),
+  onTouchStart: e => e.stopPropagation(),
+  onTouchEnd: e => e.stopPropagation(),
+  onPointerMove: e => e.stopPropagation(),
+  onPointerUp: e => e.stopPropagation(),
+  onPointerDown: e => e.stopPropagation()
 };
-var emptyArray = [];
-function MapScreen(_ref) {
-  var _ref$layout = _ref.layout,
-    layout = _ref$layout === void 0 ? 'normal' : _ref$layout,
-    _ref$draggable = _ref.draggable,
-    draggable = _ref$draggable === void 0 ? true : _ref$draggable,
-    _ref$markers = _ref.markers,
-    markers = _ref$markers === void 0 ? emptyArray : _ref$markers,
-    _ref$title = _ref.title,
-    title = _ref$title === void 0 ? null : _ref$title,
-    _ref$description = _ref.description,
-    description = _ref$description === void 0 ? null : _ref$description,
-    _ref$button = _ref.button,
-    button = _ref$button === void 0 ? null : _ref$button,
-    _ref$openedMarkerSpac = _ref.openedMarkerSpacerHeight,
-    openedMarkerSpacerHeight = _ref$openedMarkerSpac === void 0 ? 0.75 : _ref$openedMarkerSpac,
-    _ref$withMarkerImages = _ref.withMarkerImages,
-    withMarkerImages = _ref$withMarkerImages === void 0 ? false : _ref$withMarkerImages,
-    _ref$zoom = _ref.zoom,
-    zoom = _ref$zoom === void 0 ? defaultZoom : _ref$zoom,
-    _ref$center = _ref.center,
-    center = _ref$center === void 0 ? defaultCenter : _ref$center,
-    _ref$fitBounds = _ref.fitBounds,
-    fitBounds = _ref$fitBounds === void 0 ? true : _ref$fitBounds,
-    _ref$background = _ref.background,
-    background = _ref$background === void 0 ? null : _ref$background,
-    _ref$current = _ref.current,
-    current = _ref$current === void 0 ? true : _ref$current,
-    _ref$active = _ref.active,
-    active = _ref$active === void 0 ? true : _ref$active,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? null : _ref$type,
-    _ref$mediaRef = _ref.mediaRef,
-    customMediaRef = _ref$mediaRef === void 0 ? null : _ref$mediaRef,
-    _ref$className = _ref.className,
-    className = _ref$className === void 0 ? null : _ref$className;
-  var _useIntl = useIntl(),
-    locale = _useIntl.locale;
-  var _useGoogleKeys = useGoogleKeys(),
-    _useGoogleKeys$apiKey = _useGoogleKeys.apiKey,
-    apiKey = _useGoogleKeys$apiKey === void 0 ? null : _useGoogleKeys$apiKey;
-  var trackScreenEvent = useTrackScreenEvent(type);
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    selectedMarkerIndex = _useState2[0],
-    setSelectedMarkerIndex = _useState2[1];
-  var hasSelectedMarker = selectedMarkerIndex !== null;
-  var lastRenderedMarker = useRef(null);
-  var _useScreenSize = useScreenSize(),
-    width = _useScreenSize.width,
-    height = _useScreenSize.height,
-    resolution = _useScreenSize.resolution;
-  var _usePlaybackContext = usePlaybackContext(),
-    muted = _usePlaybackContext.muted;
-  var _usePlaybackMediaRef = usePlaybackMediaRef(current, true),
-    mediaRef = _usePlaybackMediaRef.ref,
-    _usePlaybackMediaRef$ = _usePlaybackMediaRef.isCurrent,
-    isCurrentMedia = _usePlaybackMediaRef$ === void 0 ? false : _usePlaybackMediaRef$;
-  var _ref2 = background || {},
-    backgroundColor = _ref2.color;
-  var markerOverlayContentStyle = getStyleFromColor(backgroundColor);
-  var _useScreenRenderConte = useScreenRenderContext(),
-    isView = _useScreenRenderConte.isView,
-    isPreview = _useScreenRenderConte.isPreview,
-    isPlaceholder = _useScreenRenderConte.isPlaceholder,
-    isEdit = _useScreenRenderConte.isEdit,
-    isStatic = _useScreenRenderConte.isStatic,
-    isCapture = _useScreenRenderConte.isCapture;
-  var screenState = useScreenState();
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    ready = _useState4[0],
-    setReady = _useState4[1];
-  var transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
-  var scrollingDisabled = !isEdit && transitionDisabled || !current;
-  var backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
+const emptyArray = [];
+function MapScreen({
+  layout = 'normal',
+  draggable = true,
+  markers = emptyArray,
+  title = null,
+  description = null,
+  button = null,
+  openedMarkerSpacerHeight = 0.75,
+  withMarkerImages = false,
+  zoom = defaultZoom,
+  center = defaultCenter,
+  fitBounds = true,
+  background = null,
+  current = true,
+  active = true,
+  // enableInteractions,
+  // disableInteraction,
+  type = null,
+  mediaRef: customMediaRef = null,
+  className = null
+}) {
+  const {
+    locale
+  } = useIntl();
+  const {
+    apiKey = null
+  } = useGoogleKeys();
+  const trackScreenEvent = useTrackScreenEvent(type);
+  const [selectedMarkerIndex, setSelectedMarkerIndex] = useState(null);
+  const hasSelectedMarker = selectedMarkerIndex !== null;
+  const lastRenderedMarker = useRef(null);
+  const {
+    width,
+    height,
+    resolution
+  } = useScreenSize();
+  const {
+    muted
+  } = usePlaybackContext();
+  const {
+    ref: mediaRef,
+    isCurrent: isCurrentMedia = false
+  } = usePlaybackMediaRef(current, true);
+  const {
+    color: backgroundColor
+  } = background || {};
+  const markerOverlayContentStyle = getStyleFromColor(backgroundColor);
+  const {
+    isView,
+    isPreview,
+    isPlaceholder,
+    isEdit,
+    isStatic,
+    isCapture
+  } = useScreenRenderContext();
+  const screenState = useScreenState();
+  const [ready, setReady] = useState(false);
+  const transitionDisabled = isStatic || isCapture || isPlaceholder || isPreview || isEdit;
+  const scrollingDisabled = !isEdit && transitionDisabled || !current;
+  const backgroundPlaying = current && (isView || isEdit) && (isCurrentMedia || !isView);
   // const backgroundShouldLoad = current || active;
-  var backgroundShouldLoad = current || active;
-  var _useState5 = useState(isStatic || isCapture),
-    _useState6 = _slicedToArray(_useState5, 2),
-    opened = _useState6[0],
-    setOpened = _useState6[1];
-  var _useViewerInteraction = useViewerInteraction(),
-    enableInteraction = _useViewerInteraction.enableInteraction,
-    disableInteraction = _useViewerInteraction.disableInteraction;
-  var onMapReady = useCallback(function () {
-    return setReady(true);
-  }, [setReady]);
-  var finalMarkers = useMemo(function () {
-    return (markers || []).map(function (marker, markerI) {
-      return _objectSpread(_objectSpread({}, marker), {}, {
-        active: markerI === selectedMarkerIndex
-      });
-    });
-  }, [markers, selectedMarkerIndex]);
-  var closeMarker = useCallback(function () {
-    var lastMarker = finalMarkers[selectedMarkerIndex];
+  const backgroundShouldLoad = current || active;
+  const [opened, setOpened] = useState(isStatic || isCapture);
+  const {
+    enableInteraction,
+    disableInteraction
+  } = useViewerInteraction();
+  const onMapReady = useCallback(() => setReady(true), [setReady]);
+  const finalMarkers = useMemo(() => (markers || []).map((marker, markerI) => ({
+    ...marker,
+    active: markerI === selectedMarkerIndex
+  })), [markers, selectedMarkerIndex]);
+  const closeMarker = useCallback(() => {
+    const lastMarker = finalMarkers[selectedMarkerIndex];
     lastRenderedMarker.current = lastMarker;
     setSelectedMarkerIndex(null);
   }, [finalMarkers, selectedMarkerIndex, setSelectedMarkerIndex]);
-  var onClickMap = useCallback(function () {
-    var lastMarker = finalMarkers[selectedMarkerIndex];
-    trackScreenEvent('click_marker_close', "Marker ".concat(selectedMarkerIndex + 1, ": ").concat(lastMarker.title.body), {
-      marker: lastMarker,
+  const onClickMap = useCallback(() => {
+    const lastMarker_0 = finalMarkers[selectedMarkerIndex];
+    trackScreenEvent('click_marker_close', `Marker ${selectedMarkerIndex + 1}: ${lastMarker_0.title.body}`, {
+      marker: lastMarker_0,
       markerIndex: selectedMarkerIndex
     });
     closeMarker();
   }, [finalMarkers, selectedMarkerIndex, trackScreenEvent, closeMarker]);
-  var onClickMarker = useCallback(function (e, index) {
-    var marker = finalMarkers[index];
+  const onClickMarker = useCallback((e, index) => {
+    const marker_0 = finalMarkers[index];
     setSelectedMarkerIndex(index);
-    trackScreenEvent('click_marker_open', "Marker ".concat(index + 1, ": ").concat(marker.title.body), {
-      marker: marker,
+    trackScreenEvent('click_marker_open', `Marker ${index + 1}: ${marker_0.title.body}`, {
+      marker: marker_0,
       markerIndex: index
     });
   }, [finalMarkers, setSelectedMarkerIndex, trackScreenEvent]);
-  var onButtonClick = useCallback(function () {
+  const onButtonClick = useCallback(() => {
     setOpened(true);
     if (disableInteraction !== null) {
       disableInteraction();
     }
     trackScreenEvent('click_button', button.body);
   }, [setOpened, disableInteraction, trackScreenEvent, button]);
-  var onCloseClick = useCallback(function () {
+  const onCloseClick = useCallback(() => {
     setOpened(false);
     if (enableInteraction !== null) {
       enableInteraction();
@@ -178,79 +140,68 @@ function MapScreen(_ref) {
     trackScreenEvent('click_close', 'Close icon');
     closeMarker();
   }, [setOpened, enableInteraction, trackScreenEvent]);
-  var onMapDragEnd = useCallback(function (newCenter) {
-    var coords = newCenter.toJSON();
-    trackScreenEvent('drag_map', "Latitude: ".concat(coords.lat.toFixed(4), ", Longitude: ").concat(coords.lng.toFixed(4)), {
-      coords: coords
+  const onMapDragEnd = useCallback(newCenter => {
+    const coords = newCenter.toJSON();
+    trackScreenEvent('drag_map', `Latitude: ${coords.lat.toFixed(4)}, Longitude: ${coords.lng.toFixed(4)}`, {
+      coords
     });
   }, [trackScreenEvent]);
-  var onScrolledBottom = useCallback(function (_ref3) {
-    var initial = _ref3.initial;
+  const onScrolledBottom = useCallback(({
+    initial
+  }) => {
     if (initial) {
-      var selectedMarker = (markers || [])[selectedMarkerIndex];
-      trackScreenEvent('scroll', "Marker ".concat(selectedMarkerIndex + 1, ": ").concat(selectedMarker.title.body), {
+      const selectedMarker = (markers || [])[selectedMarkerIndex];
+      trackScreenEvent('scroll', `Marker ${selectedMarkerIndex + 1}: ${selectedMarker.title.body}`, {
         marker: selectedMarker,
         markerIndex: selectedMarkerIndex
       });
     }
   }, [trackScreenEvent, markers, selectedMarkerIndex]);
-  var _useDimensionObserver = useDimensionObserver({
-      disabled: !isView
-    }),
-    markerOverContentInnerRef = _useDimensionObserver.ref,
-    _useDimensionObserver2 = _useDimensionObserver.width,
-    markerOverContentInnerWidth = _useDimensionObserver2 === void 0 ? '100%' : _useDimensionObserver2;
-  var _useState7 = useState(0),
-    _useState8 = _slicedToArray(_useState7, 2),
-    markerImagesLoaded = _useState8[0],
-    setMarkerImagesLoaded = _useState8[1];
-  var allMarkersImagesLoaded = markerImagesLoaded === (markers || []).length;
-  var finalReady = ready && (!withMarkerImages || allMarkersImagesLoaded);
-  useEffect(function () {
+  const {
+    ref: markerOverContentInnerRef,
+    width: markerOverContentInnerWidth = '100%'
+  } = useDimensionObserver({
+    disabled: !isView
+  });
+  const [markerImagesLoaded, setMarkerImagesLoaded] = useState(0);
+  const allMarkersImagesLoaded = markerImagesLoaded === (markers || []).length;
+  const finalReady = ready && (!withMarkerImages || allMarkersImagesLoaded);
+  useEffect(() => {
     if (withMarkerImages && markers !== null && (markers || []).length) {
       setMarkerImagesLoaded(0);
-      var imgs = markers.map(function (marker) {
-        var _ref4 = marker || {},
-          _ref4$image = _ref4.image,
-          image = _ref4$image === void 0 ? null : _ref4$image;
-        var _ref5 = image || {},
-          _ref5$url = _ref5.url,
-          url = _ref5$url === void 0 ? null : _ref5$url;
-        var withUrl = url !== null;
+      const imgs = markers.map(marker_1 => {
+        const {
+          image = null
+        } = marker_1 || {};
+        const {
+          url = null
+        } = image || {};
+        const withUrl = url !== null;
         if (withUrl) {
-          var img = new Image();
+          const img = new Image();
           img.src = url;
-          img.onload = function () {
-            setMarkerImagesLoaded(function (index) {
-              return setMarkerImagesLoaded(index + 1);
-            });
+          img.onload = () => {
+            setMarkerImagesLoaded(index_0 => setMarkerImagesLoaded(index_0 + 1));
           };
           return img;
         }
         return null;
       });
-      return function () {
-        imgs.filter(function (img) {
-          return img !== null;
-        }).forEach(function (img) {
-          img.onload = function () {};
+      return () => {
+        imgs.filter(img_0 => img_0 !== null).forEach(img_1 => {
+          img_1.onload = () => {};
         });
       };
     }
-    return function () {};
+    return () => {};
   }, [withMarkerImages, markers]);
   // Switch state
-  useEffect(function () {
+  useEffect(() => {
     if (!isEdit && !isPreview) {
       return;
     }
-    var _ref6 = screenState !== null ? screenState.split('.') : [],
-      _ref7 = _slicedToArray(_ref6, 2),
-      _ref7$ = _ref7[0],
-      stateId = _ref7$ === void 0 ? null : _ref7$,
-      _ref7$2 = _ref7[1],
-      markerIndex = _ref7$2 === void 0 ? null : _ref7$2;
+    const [stateId = null, markerIndex = null] = screenState !== null ? screenState.split('.') : [];
     if (stateId === 'intro') {
       setOpened(false);
       setSelectedMarkerIndex(null);
@@ -262,72 +213,67 @@ function MapScreen(_ref) {
       setSelectedMarkerIndex(parseInt(markerIndex, 10));
     }
   }, [screenState, isEdit, setOpened]);
-  var staticUrl;
+  let staticUrl;
   if (width > 0 && height > 0 && apiKey !== null) {
-    var correctMarkers = markers !== null ? markers.filter(function (it) {
-      return it !== null;
-    }).filter(function (_ref8) {
-      var _ref8$geoPosition = _ref8.geoPosition,
-        geoPosition = _ref8$geoPosition === void 0 ? null : _ref8$geoPosition;
-      return geoPosition !== null;
-    }) : null;
-    staticUrl = "https://maps.googleapis.com/maps/api/staticmap?size=".concat(Math.round(width), "x").concat(Math.round(height));
+    const correctMarkers = markers !== null ? markers.filter(it => it !== null).filter(({
+      geoPosition = null
+    }) => geoPosition !== null) : null;
+    staticUrl = `https://maps.googleapis.com/maps/api/staticmap?size=${Math.round(width)}x${Math.round(height)}`;
     if (center !== null && (correctMarkers === null || correctMarkers.length === 0)) {
-      var _ref9 = center || {},
-        _ref9$lat = _ref9.lat,
-        lat = _ref9$lat === void 0 ? null : _ref9$lat,
-        _ref9$lng = _ref9.lng,
-        lng = _ref9$lng === void 0 ? null : _ref9$lng;
-      staticUrl += "&center=".concat(lat, ",").concat(lng);
+      const {
+        lat = null,
+        lng = null
+      } = center || {};
+      staticUrl += `&center=${lat},${lng}`;
     }
     if (zoom !== null) {
-      staticUrl += "&zoom=".concat(zoom);
+      staticUrl += `&zoom=${zoom}`;
     }
     if (apiKey !== null) {
-      staticUrl += "&key=".concat(apiKey);
+      staticUrl += `&key=${apiKey}`;
     }
     if (locale !== null) {
-      staticUrl += "&language=".concat(locale);
+      staticUrl += `&language=${locale}`;
     }
     if (correctMarkers !== null) {
-      staticUrl += correctMarkers.map(function (marker) {
-        var _ref0 = marker || {},
-          _ref0$geoPosition = _ref0.geoPosition,
-          geoPosition = _ref0$geoPosition === void 0 ? null : _ref0$geoPosition;
-        var _ref1 = geoPosition || {},
-          _ref1$lat = _ref1.lat,
-          lat = _ref1$lat === void 0 ? null : _ref1$lat,
-          _ref1$lng = _ref1.lng,
-          lng = _ref1$lng === void 0 ? null : _ref1$lng;
-        var _ref10 = marker || {},
-          _ref10$image = _ref10.image,
-          image = _ref10$image === void 0 ? null : _ref10$image;
-        var _ref11 = image || {},
-          _ref11$url = _ref11.url,
-          url = _ref11$url === void 0 ? null : _ref11$url;
-        return lat !== null && lng !== null ? "&markers=".concat(url !== null ? "icon:".concat(url) : '', "%7C").concat(lat, ",").concat(lng) : '';
+      staticUrl += correctMarkers.map(marker_2 => {
+        const {
+          geoPosition: geoPosition_0 = null
+        } = marker_2 || {};
+        const {
+          lat: lat_0 = null,
+          lng: lng_0 = null
+        } = geoPosition_0 || {};
+        const {
+          image: image_0 = null
+        } = marker_2 || {};
+        const {
+          url: url_0 = null
+        } = image_0 || {};
+        return lat_0 !== null && lng_0 !== null ? `&markers=${url_0 !== null ? `icon:${url_0}` : ''}%7C${lat_0},${lng_0}` : '';
       }).join('');
     }
   }
-  var renderedMarker = hasSelectedMarker ? finalMarkers[selectedMarkerIndex] : lastRenderedMarker.current;
-  var _ref12 = renderedMarker || {},
-    _ref12$title = _ref12.title,
-    markerTitle = _ref12$title === void 0 ? null : _ref12$title,
-    _ref12$subtitle = _ref12.subtitle,
-    markerSubtitle = _ref12$subtitle === void 0 ? null : _ref12$subtitle,
-    _ref12$description = _ref12.description,
-    markerDescription = _ref12$description === void 0 ? null : _ref12$description,
-    _ref12$image = _ref12.image,
-    markerImage = _ref12$image === void 0 ? null : _ref12$image;
-  var hasMarkerTitle = markerTitle !== null;
-  var hasMarkerSubtitle = markerSubtitle !== null;
-  var hasMarkerDescription = markerDescription !== null;
-  var hasMarkerImage = markerImage !== null;
-  var hasTitle = isTextFilled(title);
-  var hasDescription = isTextFilled(description);
-  var hasButton = isTextFilled(button);
+  const renderedMarker = hasSelectedMarker ? finalMarkers[selectedMarkerIndex] : lastRenderedMarker.current;
+  const {
+    title: markerTitle = null,
+    subtitle: markerSubtitle = null,
+    description: markerDescription = null,
+    image: markerImage = null
+  } = renderedMarker || {};
+  const hasMarkerTitle = markerTitle !== null;
+  const hasMarkerSubtitle = markerSubtitle !== null;
+  const hasMarkerDescription = markerDescription !== null;
+  const hasMarkerImage = markerImage !== null;
+  const hasTitle = isTextFilled(title);
+  const hasDescription = isTextFilled(description);
+  const hasButton = isTextFilled(button);
   return /*#__PURE__*/jsxs("div", {
-    className: classNames([styles.container, className, _defineProperty(_defineProperty(_defineProperty({}, styles["".concat(layout, "Layout")], layout !== null), styles.opened, opened || isPreview && screenState !== 'intro'), styles.hasSelectedMarker, hasSelectedMarker)]),
+    className: classNames([styles.container, className, {
+      [styles[`${layout}Layout`]]: layout !== null,
+      [styles.opened]: opened || isPreview && screenState !== 'intro',
+      [styles.hasSelectedMarker]: hasSelectedMarker
+    }]),
     "data-screen-ready": finalReady,
     children: [/*#__PURE__*/jsx(Container, {
       width: width,
@@ -360,9 +306,9 @@ function MapScreen(_ref) {
           onClickMarker: onClickMarker,
           onReady: onMapReady,
           onDragEnd: onMapDragEnd
-        }, "map"), /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
-          className: styles.markerOverlayContainer
-        }, stopDragEventsPropagation), {}, {
+        }, "map"), /*#__PURE__*/jsx("div", {
+          className: styles.markerOverlayContainer,
+          ...stopDragEventsPropagation,
           children: /*#__PURE__*/jsx("div", {
             className: styles.markerOverlayScrollable,
             children: /*#__PURE__*/jsxs(Scroll, {
@@ -396,54 +342,50 @@ function MapScreen(_ref) {
                       media: markerImage,
                       width: markerOverContentInnerWidth,
                       resolution: resolution
-                    }) : null, hasMarkerTitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
-                      className: styles.markerTitle
-                    }, markerTitle)) : null, hasMarkerSubtitle ? /*#__PURE__*/jsx(Heading, _objectSpread({
+                    }) : null, hasMarkerTitle ? /*#__PURE__*/jsx(Heading, {
+                      className: styles.markerTitle,
+                      ...markerTitle
+                    }) : null, hasMarkerSubtitle ? /*#__PURE__*/jsx(Heading, {
                       size: 3,
-                      className: styles.markerSubtitle
-                    }, markerSubtitle)) : null, hasMarkerDescription ? /*#__PURE__*/jsx(Text, _objectSpread({
-                      className: styles.markerDescription
-                    }, markerDescription)) : null]
-                  }, "markerContent-".concat(selectedMarkerIndex))]
+                      className: styles.markerSubtitle,
+                      ...markerSubtitle
+                    }) : null, hasMarkerDescription ? /*#__PURE__*/jsx(Text, {
+                      className: styles.markerDescription,
+                      ...markerDescription
+                    }) : null]
+                  }, `markerContent-${selectedMarkerIndex}`)]
                 })
               })]
             })
           })
-        }), "marker-overlay"), /*#__PURE__*/jsxs("div", {
+        }, "marker-overlay"), /*#__PURE__*/jsxs("div", {
           className: classNames([styles.splash]),
           children: [/*#__PURE__*/jsx(ScreenElement, {
             emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
               id: "2ZOPe+",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Title"
-              }]
+              defaultMessage: "Title"
             }),
             emptyClassName: styles.emptyTitle,
             isEmpty: !hasTitle,
-            children: /*#__PURE__*/jsx(Heading, _objectSpread({
-              className: styles.title
-            }, title))
+            children: /*#__PURE__*/jsx(Heading, {
+              className: styles.title,
+              ...title
+            })
           }), /*#__PURE__*/jsx(ScreenElement, {
             emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
               id: "507VAi",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Description"
-              }]
+              defaultMessage: "Description"
             }),
             emptyClassName: styles.emptyDescription,
             isEmpty: !hasDescription,
-            children: /*#__PURE__*/jsx(Text, _objectSpread({
-              className: styles.description
-            }, description))
+            children: /*#__PURE__*/jsx(Text, {
+              className: styles.description,
+              ...description
+            })
           }), /*#__PURE__*/jsx(ScreenElement, {
             emptyLabel: /*#__PURE__*/jsx(FormattedMessage, {
               id: "bv3rRe",
-              defaultMessage: [{
-                "type": 0,
-                "value": "Button"
-              }]
+              defaultMessage: "Button"
             }),
             emptyClassName: styles.emptyButton,
             isEmpty: !hasButton,
@@ -452,14 +394,12 @@ function MapScreen(_ref) {
               onClick: onButtonClick,
               buttonStyle: button !== null ? button.buttonStyle : null,
               focusable: current && isView,
-              children: hasButton ? /*#__PURE__*/jsx(Text, _objectSpread(_objectSpread({}, button), {}, {
+              children: hasButton ? /*#__PURE__*/jsx(Text, {
+                ...button,
                 className: styles.button
-              })) : /*#__PURE__*/jsx(FormattedMessage, {
+              }) : /*#__PURE__*/jsx(FormattedMessage, {
                 id: "sXfFFw",
-                defaultMessage: [{
-                  "type": 0,
-                  "value": "Enter"
-                }]
+                defaultMessage: "Enter"
               })
             })
           })]
@@ -488,11 +428,30 @@ function MapScreen(_ref) {
   });
 }
-function MapImagesScreen(_ref) {
-  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
-  return /*#__PURE__*/jsx(MapScreen, _objectSpread(_objectSpread({}, props), {}, {
-    withMarkerImages: true
-  }));
+function MapImagesScreen(t0) {
+  const $ = c(4);
+  let props;
+  if ($[0] !== t0) {
+    ({
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+  } else {
+    props = $[1];
+  }
+  let t1;
+  if ($[2] !== props) {
+    t1 = /*#__PURE__*/jsx(MapScreen, {
+      ...props,
+      withMarkerImages: true
+    });
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
 }
 // import * as transforms from './transforms/index';
@@ -503,19 +462,13 @@ var definition = [{
   group: {
     label: defineMessage({
       id: "Z27IP6",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Map"
-      }]
+      defaultMessage: "Map"
     }),
     order: 6
   },
   title: defineMessage({
     id: "dPYwJG",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Map"
-    }]
+    defaultMessage: "Map"
   }),
   component: MapScreen,
   layouts: ['normal'],
@@ -524,10 +477,7 @@ var definition = [{
     id: 'intro',
     label: defineMessage({
       id: "BgrRxZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Intro"
-      }]
+      defaultMessage: "Intro"
     }),
     fields: [{
       name: 'title',
@@ -537,10 +487,7 @@ var definition = [{
       },
       label: defineMessage({
         id: "+AEVbJ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Title"
-        }]
+        defaultMessage: "Title"
       })
     }, {
       name: 'description',
@@ -550,10 +497,7 @@ var definition = [{
       },
       label: defineMessage({
         id: "ZCe0r4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
+        defaultMessage: "Description"
       })
     }, {
       name: 'button',
@@ -563,20 +507,14 @@ var definition = [{
       },
       label: defineMessage({
         id: "i6bmbD",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Button"
-        }]
+        defaultMessage: "Button"
       })
     }]
   }, {
     id: 'map',
     label: defineMessage({
       id: "eYHEYe",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Map"
-      }]
+      defaultMessage: "Map"
     }),
     fields: [{
       name: 'draggable',
@@ -584,10 +522,7 @@ var definition = [{
       defaultValue: true,
       label: defineMessage({
         id: "A7ncT3",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Draggable"
-        }]
+        defaultMessage: "Draggable"
       })
     }, {
       name: 'fitBounds',
@@ -595,10 +530,7 @@ var definition = [{
       defaultValue: true,
       label: defineMessage({
         id: "NVUpOG",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Map fit markers"
-        }]
+        defaultMessage: "Map fit markers"
       })
     }, {
       name: 'zoom',
@@ -608,30 +540,21 @@ var definition = [{
       max: 16,
       label: defineMessage({
         id: "vRzzo6",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Zoom"
-        }]
+        defaultMessage: "Zoom"
       })
     }, {
       name: 'center',
       type: 'geo-position',
       label: defineMessage({
         id: "W5qWPj",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Center"
-        }]
+        defaultMessage: "Center"
       })
     }]
   }, {
     id: 'markers',
     label: defineMessage({
       id: "+LvOvJ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Markers"
-      }]
+      defaultMessage: "Markers"
     }),
     repeatable: true,
     fieldName: 'markers',
@@ -640,30 +563,21 @@ var definition = [{
       type: 'heading-element',
       label: defineMessage({
         id: "+AEVbJ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Title"
-        }]
+        defaultMessage: "Title"
       })
     }, {
       name: 'description',
       type: 'text-element',
       label: defineMessage({
         id: "ZCe0r4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
+        defaultMessage: "Description"
       })
     }, {
       name: 'geoPosition',
       type: 'geo-position',
       label: defineMessage({
         id: "u3ok54",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Position"
-        }]
+        defaultMessage: "Position"
       })
     }]
   }],
@@ -672,10 +586,7 @@ var definition = [{
     type: 'background',
     label: defineMessage({
       id: "cDj1mZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
+      defaultMessage: "Background"
     })
   }]
 }, {
@@ -684,19 +595,13 @@ var definition = [{
   group: {
     label: defineMessage({
       id: "Z27IP6",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Map"
-      }]
+      defaultMessage: "Map"
     }),
     order: 6
   },
   title: defineMessage({
     id: "ro6yHS",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Map with image markers"
-    }]
+    defaultMessage: "Map with image markers"
   }),
   component: MapImagesScreen,
   layouts: ['normal'],
@@ -705,10 +610,7 @@ var definition = [{
     id: 'intro',
     label: defineMessage({
       id: "BgrRxZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Intro"
-      }]
+      defaultMessage: "Intro"
     }),
     fields: [{
       name: 'title',
@@ -718,10 +620,7 @@ var definition = [{
       },
       label: defineMessage({
         id: "+AEVbJ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Title"
-        }]
+        defaultMessage: "Title"
       })
     }, {
       name: 'description',
@@ -731,10 +630,7 @@ var definition = [{
       },
       label: defineMessage({
         id: "ZCe0r4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
+        defaultMessage: "Description"
       })
     }, {
       name: 'button',
@@ -744,20 +640,14 @@ var definition = [{
       },
       label: defineMessage({
         id: "i6bmbD",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Button"
-        }]
+        defaultMessage: "Button"
       })
     }]
   }, {
     id: 'map',
     label: defineMessage({
       id: "eYHEYe",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Map"
-      }]
+      defaultMessage: "Map"
     }),
     fields: [{
       name: 'draggable',
@@ -765,10 +655,7 @@ var definition = [{
       defaultValue: true,
       label: defineMessage({
         id: "A7ncT3",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Draggable"
-        }]
+        defaultMessage: "Draggable"
       })
     }, {
       name: 'fitBounds',
@@ -776,10 +663,7 @@ var definition = [{
       defaultValue: true,
       label: defineMessage({
         id: "NVUpOG",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Map fit markers"
-        }]
+        defaultMessage: "Map fit markers"
       })
     }, {
       name: 'zoom',
@@ -789,30 +673,21 @@ var definition = [{
       max: 16,
       label: defineMessage({
         id: "vRzzo6",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Zoom"
-        }]
+        defaultMessage: "Zoom"
       })
     }, {
       name: 'center',
       type: 'geo-position',
       label: defineMessage({
         id: "W5qWPj",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Center"
-        }]
+        defaultMessage: "Center"
       })
     }]
   }, {
     id: 'markers-with-image',
     label: defineMessage({
       id: "+LvOvJ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Markers"
-      }]
+      defaultMessage: "Markers"
     }),
     repeatable: true,
     fieldName: 'markers',
@@ -821,30 +696,21 @@ var definition = [{
       type: 'heading-element',
       label: defineMessage({
         id: "+AEVbJ",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Title"
-        }]
+        defaultMessage: "Title"
       })
     }, {
       name: 'description',
       type: 'text-element',
       label: defineMessage({
         id: "ZCe0r4",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Description"
-        }]
+        defaultMessage: "Description"
       })
     }, {
       name: 'geoPosition',
       type: 'geo-position',
       label: defineMessage({
         id: "u3ok54",
-        defaultMessage: [{
-          "type": 0,
-          "value": "Position"
-        }]
+        defaultMessage: "Position"
       })
     }]
   }],
@@ -853,10 +719,7 @@ var definition = [{
     type: 'background',
     label: defineMessage({
       id: "cDj1mZ",
-      defaultMessage: [{
-        "type": 0,
-        "value": "Background"
-      }]
+      defaultMessage: "Background"
     })
   }]
 }];

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-map",
-    "version": "0.4.71",
+    "version": "0.4.76",
     "private": false,
     "description": "",
     "keywords": [
@@ -36,6 +36,7 @@
     "exports": {
         ".": {
             "types": "./es/index.d.ts",
+            "style": "./assets/css/styles.css",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -52,27 +53,27 @@
         "build": "../../scripts/prepare-package.sh --types"
     },
     "devDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "peerDependencies": {
-        "react": "^18.3.0 || ^19.0.0",
-        "react-dom": "^18.3.0 || ^19.0.0"
+        "react": "^19.0.0",
+        "react-dom": "^19.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.28.6",
-        "@micromag/core": "^0.4.71",
-        "@micromag/element-background": "^0.4.71",
-        "@micromag/element-button": "^0.4.71",
-        "@micromag/element-container": "^0.4.71",
-        "@micromag/element-footer": "^0.4.71",
-        "@micromag/element-header": "^0.4.71",
-        "@micromag/element-heading": "^0.4.71",
-        "@micromag/element-image": "^0.4.71",
-        "@micromag/element-map": "^0.4.71",
-        "@micromag/element-scroll": "^0.4.71",
-        "@micromag/element-text": "^0.4.71",
-        "@micromag/transforms": "^0.4.71",
+        "@micromag/core": "^0.4.74",
+        "@micromag/element-background": "^0.4.76",
+        "@micromag/element-button": "^0.4.76",
+        "@micromag/element-container": "^0.4.74",
+        "@micromag/element-footer": "^0.4.76",
+        "@micromag/element-header": "^0.4.74",
+        "@micromag/element-heading": "^0.4.74",
+        "@micromag/element-image": "^0.4.74",
+        "@micromag/element-map": "^0.4.74",
+        "@micromag/element-scroll": "^0.4.74",
+        "@micromag/element-text": "^0.4.74",
+        "@micromag/transforms": "^0.4.74",
         "classnames": "^2.2.6",
         "lodash": "^4.17.23",
         "react-intl": "^8.1.3 || ^10.0.0",
@@ -82,6 +83,6 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "9101554bc5761e32b4a002a10d26800608c69773",
+    "gitHead": "42a24f578994b23090271013f136b7f78956b632",
     "types": "es/index.d.ts"
 }