ublo-lib 1.31.43 → 1.31.44

package/es/common/components/editable-calendar/utils.js

@@ -1,76 +1,82 @@
 import * as Data from "./data";
 export function zeroPad(value, length) {
-  return `${value}`.padStart(length, "0");
+    return `${value}`.padStart(length, "0");
 }
 export function formatDate(date) {
-  const d = new Date(date);
-  const day = zeroPad(d.getDate(), 2);
-  const month = zeroPad(d.getMonth() + 1, 2);
-  const year = d.getFullYear();
-  return `${year}-${month}-${day}`;
+    const d = new Date(date);
+    const day = zeroPad(d.getDate(), 2);
+    const month = zeroPad(d.getMonth() + 1, 2);
+    const year = d.getFullYear();
+    return `${year}-${month}-${day}`;
 }
 export function getYearsRange(start, end) {
-  return Array(end - start + 1).fill(undefined).map((_, i) => start + i);
+    return Array(end - start + 1)
+        .fill(undefined)
+        .map((_, i) => start + i);
 }
 export function getMonthDays(month = Data.THIS_MONTH, year = Data.THIS_YEAR) {
-  const months30 = [4, 6, 9, 11];
-  const leapYear = year % 4 === 0;
-  return month === 2 ? leapYear ? 29 : 28 : months30.includes(month) ? 30 : 31;
+    const months30 = [4, 6, 9, 11];
+    const leapYear = year % 4 === 0;
+    return month === 2
+        ? leapYear
+            ? 29
+            : 28
+        : months30.includes(month)
+            ? 30
+            : 31;
 }
 export function getMonthFirstDay(month = Data.THIS_MONTH, year = Data.THIS_YEAR) {
-  return new Date(`${year}-${zeroPad(month, 2)}-01`).getDay();
+    return new Date(`${year}-${zeroPad(month, 2)}-01`).getDay();
 }
 export function isDate(date) {
-  const isDate = Object.prototype.toString.call(date) === "[object Date]";
-  const isValidDate = date && !Number.isNaN(date.valueOf());
-  return isDate && isValidDate;
+    const isDate = Object.prototype.toString.call(date) === "[object Date]";
+    const isValidDate = date && !Number.isNaN(date.valueOf());
+    return isDate && isValidDate;
 }
 export function isSameMonth(date, basedate = new Date()) {
-  if (!(isDate(date) && isDate(basedate))) return false;
-  const basedateMonth = basedate.getMonth() + 1;
-  const basedateYear = basedate.getFullYear();
-  const dateMonth = date.getMonth() + 1;
-  const dateYear = date.getFullYear();
-  return basedateMonth === dateMonth && basedateYear === dateYear;
+    if (!(isDate(date) && isDate(basedate)))
+        return false;
+    const basedateMonth = basedate.getMonth() + 1;
+    const basedateYear = basedate.getFullYear();
+    const dateMonth = date.getMonth() + 1;
+    const dateYear = date.getFullYear();
+    return basedateMonth === dateMonth && basedateYear === dateYear;
 }
 export function isSameDay(date, basedate = new Date()) {
-  if (!(isDate(date) && isDate(basedate))) return false;
-  const basedateDate = basedate.getDate();
-  const basedateMonth = basedate.getMonth() + 1;
-  const basedateYear = basedate.getFullYear();
-  const dateDate = date.getDate();
-  const dateMonth = date.getMonth() + 1;
-  const dateYear = date.getFullYear();
-  return basedateDate === dateDate && basedateMonth === dateMonth && basedateYear === dateYear;
+    if (!(isDate(date) && isDate(basedate)))
+        return false;
+    const basedateDate = basedate.getDate();
+    const basedateMonth = basedate.getMonth() + 1;
+    const basedateYear = basedate.getFullYear();
+    const dateDate = date.getDate();
+    const dateMonth = date.getMonth() + 1;
+    const dateYear = date.getFullYear();
+    return (basedateDate === dateDate &&
+        basedateMonth === dateMonth &&
+        basedateYear === dateYear);
 }
 export function getPreviousMonth(month, year) {
-  const prevMonth = month > 1 ? month - 1 : 12;
-  const prevMonthYear = month > 1 ? year : year - 1;
-  return {
-    month: prevMonth,
-    year: prevMonthYear
-  };
+    const prevMonth = month > 1 ? month - 1 : 12;
+    const prevMonthYear = month > 1 ? year : year - 1;
+    return { month: prevMonth, year: prevMonthYear };
 }
 export function getNextMonth(month, year) {
-  const nextMonth = month < 12 ? month + 1 : 1;
-  const nextMonthYear = month < 12 ? year : year + 1;
-  return {
-    month: nextMonth,
-    year: nextMonthYear
-  };
+    const nextMonth = month < 12 ? month + 1 : 1;
+    const nextMonthYear = month < 12 ? year : year + 1;
+    return { month: nextMonth, year: nextMonthYear };
 }
 export function addDays(_date, days) {
-  const date = new Date(_date);
-  date.setDate(date.getDate() + days);
-  return date;
+    const date = new Date(_date);
+    date.setDate(date.getDate() + days);
+    return date;
 }
 export function getDateInterval(startDate, endDate, reverse) {
-  const dates = [];
-  let currentDate = reverse ? endDate : startDate;
-  const stopDate = reverse ? startDate : endDate;
-  while (currentDate <= stopDate) {
-    dates.push(currentDate);
-    currentDate = addDays(currentDate, 1);
-  }
-  return dates;
-}
+    const dates = [];
+    let currentDate = reverse ? endDate : startDate;
+    const stopDate = reverse ? startDate : endDate;
+    while (currentDate <= stopDate) {
+        dates.push(currentDate);
+        currentDate = addDays(currentDate, 1);
+    }
+    return dates;
+}

package/es/common/components/editable-map/cluster.d.ts

@@ -0,0 +1,4 @@
+export default function Cluster({ isEditing, children }: {
+    isEditing: any;
+    children: any;
+}): any;

package/es/common/components/editable-map/cluster.js

@@ -1,14 +1,9 @@
 import * as React from "react";
 import MarkerClusterGroup from "react-leaflet-cluster";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function Cluster({
-  isEditing,
-  children
-}) {
-  if (isEditing) return children;
-  return _jsx(MarkerClusterGroup, {
-    maxClusterRadius: 20,
-    chunkedLoading: true,
-    children: children
-  });
-}
+export default function Cluster({ isEditing, children }) {
+    if (isEditing)
+        return children;
+    return (<MarkerClusterGroup maxClusterRadius={20} chunkedLoading>
+      {children}
+    </MarkerClusterGroup>);
+}

package/es/common/components/editable-map/edit-form.d.ts

@@ -0,0 +1,7 @@
+export default function EditForm({ popupRef, marker, setMarkers, iconSet }: {
+    popupRef: any;
+    marker: any;
+    setMarkers: any;
+    iconSet: any;
+}): React.JSX.Element;
+import * as React from "react";

package/es/common/components/editable-map/edit-form.js

@@ -6,100 +6,46 @@ import Checkbox from "dt-design-system/es/checkbox";
 import * as Icons from "dt-design-system/es/icons";
 import IconPicker from "./icon-picker";
 import css from "./edit-form.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export default function EditForm({
-  popupRef,
-  marker,
-  setMarkers,
-  iconSet
-}) {
-  const {
-    id,
-    icon,
-    title,
-    description,
-    url,
-    label,
-    tooltipOpened,
-    important
-  } = marker;
-  const removeMarker = e => {
-    e.stopPropagation();
-    setMarkers(currents => currents.filter(marker => marker.id !== id));
-  };
-  const closeMarker = () => {
-    popupRef.current.close();
-  };
-  const updateMarker = field => value => {
-    setMarkers(currents => {
-      return currents.map(marker => {
-        if (marker.id === id) {
-          return {
-            ...marker,
-            [field]: value
-          };
-        }
-        return marker;
-      });
-    });
-  };
-  return _jsxs("div", {
-    className: css.form,
-    children: [_jsxs("div", {
-      className: css.row,
-      children: [_jsx(IconPicker, {
-        callback: updateMarker("icon"),
-        selectedIcon: icon,
-        iconSet: iconSet
-      }), _jsx(Input, {
-        label: "Titre",
-        value: title,
-        className: css.title,
-        onValueChange: updateMarker("title"),
-        compact: true
-      })]
-    }), _jsx(Textarea, {
-      label: "Description",
-      value: description,
-      className: css.description,
-      onValueChange: updateMarker("description"),
-      placeholder: "Description du point d'int\xE9r\xEAt",
-      compact: true
-    }), _jsxs("div", {
-      className: css.row,
-      children: [_jsx(Input, {
-        label: "Lien bouton",
-        value: url,
-        onValueChange: updateMarker("url"),
-        compact: true
-      }), _jsx(Input, {
-        label: "Libell\xE9 bouton",
-        value: label,
-        onValueChange: updateMarker("label"),
-        compact: true
-      })]
-    }), _jsx(Checkbox, {
-      label: "Important",
-      checked: important,
-      onCheckedChange: updateMarker("important")
-    }), _jsx(Checkbox, {
-      label: "Tooltip affich\xE9 par d\xE9faut",
-      checked: tooltipOpened,
-      onCheckedChange: updateMarker("tooltipOpened")
-    }), _jsxs("div", {
-      className: css.buttons,
-      children: [_jsxs(Button, {
-        variant: "danger",
-        onClick: removeMarker,
-        compact: true,
-        children: [_jsx(Icons.Bin, {}), "Supprimer ce point"]
-      }), _jsxs(Button, {
-        variant: "success",
-        onClick: closeMarker,
-        compact: true,
-        children: ["Valider", _jsx(Icons.Check, {})]
-      })]
-    })]
-  });
-}
+export default function EditForm({ popupRef, marker, setMarkers, iconSet }) {
+    const { id, icon, title, description, url, label, tooltipOpened, important } = marker;
+    const removeMarker = (e) => {
+        e.stopPropagation();
+        setMarkers((currents) => currents.filter((marker) => marker.id !== id));
+    };
+    const closeMarker = () => {
+        popupRef.current.close();
+    };
+    const updateMarker = (field) => (value) => {
+        setMarkers((currents) => {
+            return currents.map((marker) => {
+                if (marker.id === id) {
+                    return Object.assign(Object.assign({}, marker), { [field]: value });
+                }
+                return marker;
+            });
+        });
+    };
+    return (<div className={css.form}>
+      <div className={css.row}>
+        <IconPicker callback={updateMarker("icon")} selectedIcon={icon} iconSet={iconSet}/>
+        <Input label="Titre" value={title} className={css.title} onValueChange={updateMarker("title")} compact/>
+      </div>
+      <Textarea label="Description" value={description} className={css.description} onValueChange={updateMarker("description")} placeholder="Description du point d'intérêt" compact/>
+      <div className={css.row}>
+        <Input label="Lien bouton" value={url} onValueChange={updateMarker("url")} compact/>
+        <Input label="Libellé bouton" value={label} onValueChange={updateMarker("label")} compact/>
+      </div>
+      <Checkbox label="Important" checked={important} onCheckedChange={updateMarker("important")}/>
+      <Checkbox label="Tooltip affiché par défaut" checked={tooltipOpened} onCheckedChange={updateMarker("tooltipOpened")}/>
+      <div className={css.buttons}>
+        <Button variant="danger" onClick={removeMarker} compact>
+          <Icons.Bin />
+          Supprimer ce point
+        </Button>
+        <Button variant="success" onClick={closeMarker} compact>
+          Valider
+          <Icons.Check />
+        </Button>
+      </div>
+    </div>);
+}

package/es/common/components/editable-map/editable-map.d.ts

@@ -0,0 +1,6 @@
+export default function EditableMap({ format, iconSet, hideSlopes }: {
+    format: any;
+    iconSet: any;
+    hideSlopes: any;
+}): React.JSX.Element;
+import * as React from "react";

package/es/common/components/editable-map/editable-map.js

@@ -12,116 +12,61 @@ import FullScreenButton from "./full-screen-button";
 import SlopesToggle from "./slopes-toggle";
 import css from "./editable-map.module.css";
 import "leaflet/dist/leaflet.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 const FRANCE_CENTER = [46.807934, 3.645097];
 const DEFAULT_ZOOM = 6;
-export default function EditableMap({
-  format,
-  iconSet,
-  hideSlopes
-}) {
-  const ref = React.useRef();
-  const containerRef = React.useRef();
-  const {
-    cmsMode
-  } = useUbloContext();
-  const [fullScreen, setFullScreen] = React.useState(false);
-  const {
-    element,
-    presets,
-    isInDialog
-  } = format;
-  const isInZone = element.closest(".cms");
-  const isEditing = isInZone && cmsMode === "editing";
-  const defaultCenter = presets?.center || FRANCE_CENTER;
-  const defaultZoom = presets?.zoom || DEFAULT_ZOOM;
-  const [center, setCenter] = React.useState(defaultCenter);
-  const [zoom, setZoom] = React.useState(defaultZoom);
-  const [markers, setMarkers] = React.useState(presets?.markers || []);
-  const [showSlopes, setShowSlopes] = React.useState(presets?.showSlopes || false);
-  const scrollWheelZoom = Boolean(cmsMode) || isInDialog || fullScreen;
-  const refreshSize = () => {
-    ref.current.invalidateSize();
-  };
-  const resetCenter = () => {
-    setCenter(defaultCenter);
-    setZoom(defaultZoom);
-    ref.current.setView(defaultCenter, defaultZoom, {
-      animate: true
-    });
-  };
-  React.useEffect(() => {
-    if (isInDialog) {
-      window.refreshDialogMapSize = refreshSize;
-    }
-  }, [isInDialog]);
-  React.useEffect(() => {
-    if (isEditing) {
-      const newPresets = {
-        markers,
-        zoom,
-        center,
-        showSlopes
-      };
-      element.setAttribute("data-presets", JSON.stringify(newPresets));
-    }
-  }, [center, element, isEditing, markers, showSlopes, zoom]);
-  const attribution = showSlopes ? '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> & <a href="https://www.opensnowmap.org/">OpenSnowMap</a> contributors' : '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
-  return _jsxs("div", {
-    ref: containerRef,
-    className: css.container,
-    "data-cms-remove": "",
-    children: [_jsxs(MapContainer, {
-      ref: ref,
-      center: center,
-      zoom: zoom,
-      scrollWheelZoom: scrollWheelZoom,
-      className: css.map,
-      attributionControl: false,
-      children: [_jsx(TileLayer, {
-        attribution: attribution,
-        url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
-      }), showSlopes && _jsx(TileLayer, {
-        url: "https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png"
-      }), _jsx(MapEvents, {
-        mapRef: ref,
-        markers: markers,
-        setMarkers: setMarkers,
-        setZoom: setZoom,
-        setCenter: setCenter,
-        isEditing: isEditing,
-        element: element
-      }), _jsx(Cluster, {
-        isEditing: isEditing,
-        children: _jsx(Markers, {
-          markers: markers,
-          setMarkers: setMarkers,
-          iconSet: iconSet,
-          isEditing: isEditing
-        })
-      }), _jsx(AttributionControl, {
-        position: "bottomright",
-        prefix: ""
-      })]
-    }), !isEditing && _jsx(FullScreenButton, {
-      fullScreen: fullScreen,
-      setFullScreen: setFullScreen,
-      containerRef: containerRef
-    }), _jsx(Button, {
-      type: "button",
-      variant: "secondary",
-      className: css.resetCenter,
-      onClick: resetCenter,
-      children: _jsx(Icons.MyLocation, {})
-    }), !hideSlopes && _jsx(SlopesToggle, {
-      showSlopes: showSlopes,
-      setShowSlopes: setShowSlopes
-    }), !isEditing && markers.length > 2 && _jsx(MarkerList, {
-      mapRef: ref,
-      markers: markers,
-      iconSet: iconSet,
-      isInDialog: !fullScreen && isInDialog
-    }), isEditing && _jsx(Helper, {})]
-  });
-}
+export default function EditableMap({ format, iconSet, hideSlopes }) {
+    const ref = React.useRef();
+    const containerRef = React.useRef();
+    const { cmsMode } = useUbloContext();
+    const [fullScreen, setFullScreen] = React.useState(false);
+    const { element, presets, isInDialog } = format;
+    const isInZone = element.closest(".cms");
+    const isEditing = isInZone && cmsMode === "editing";
+    const defaultCenter = (presets === null || presets === void 0 ? void 0 : presets.center) || FRANCE_CENTER;
+    const defaultZoom = (presets === null || presets === void 0 ? void 0 : presets.zoom) || DEFAULT_ZOOM;
+    const [center, setCenter] = React.useState(defaultCenter);
+    const [zoom, setZoom] = React.useState(defaultZoom);
+    const [markers, setMarkers] = React.useState((presets === null || presets === void 0 ? void 0 : presets.markers) || []);
+    const [showSlopes, setShowSlopes] = React.useState((presets === null || presets === void 0 ? void 0 : presets.showSlopes) || false);
+    const scrollWheelZoom = Boolean(cmsMode) || isInDialog || fullScreen;
+    const refreshSize = () => {
+        ref.current.invalidateSize();
+    };
+    const resetCenter = () => {
+        setCenter(defaultCenter);
+        setZoom(defaultZoom);
+        ref.current.setView(defaultCenter, defaultZoom, { animate: true });
+    };
+    React.useEffect(() => {
+        if (isInDialog) {
+            window.refreshDialogMapSize = refreshSize;
+        }
+    }, [isInDialog]);
+    React.useEffect(() => {
+        if (isEditing) {
+            const newPresets = { markers, zoom, center, showSlopes };
+            element.setAttribute("data-presets", JSON.stringify(newPresets));
+        }
+    }, [center, element, isEditing, markers, showSlopes, zoom]);
+    const attribution = showSlopes
+        ? '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> & <a href="https://www.opensnowmap.org/">OpenSnowMap</a> contributors'
+        : '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors';
+    return (<div ref={containerRef} className={css.container} data-cms-remove="">
+      <MapContainer ref={ref} center={center} zoom={zoom} scrollWheelZoom={scrollWheelZoom} className={css.map} attributionControl={false}>
+        <TileLayer attribution={attribution} url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
+        {showSlopes && (<TileLayer url="https://tiles.opensnowmap.org/pistes/{z}/{x}/{y}.png"/>)}
+        <MapEvents mapRef={ref} markers={markers} setMarkers={setMarkers} setZoom={setZoom} setCenter={setCenter} isEditing={isEditing} element={element}/>
+        <Cluster isEditing={isEditing}>
+          <Markers markers={markers} setMarkers={setMarkers} iconSet={iconSet} isEditing={isEditing}/>
+        </Cluster>
+        <AttributionControl position="bottomright" prefix=""/>
+      </MapContainer>
+      {!isEditing && (<FullScreenButton fullScreen={fullScreen} setFullScreen={setFullScreen} containerRef={containerRef}/>)}
+      <Button type="button" variant="secondary" className={css.resetCenter} onClick={resetCenter}>
+        <Icons.MyLocation />
+      </Button>
+      {!hideSlopes && (<SlopesToggle showSlopes={showSlopes} setShowSlopes={setShowSlopes}/>)}
+      {!isEditing && markers.length > 2 && (<MarkerList mapRef={ref} markers={markers} iconSet={iconSet} isInDialog={!fullScreen && isInDialog}/>)}
+      {isEditing && <Helper />}
+    </div>);
+}

package/es/common/components/editable-map/full-screen-button.d.ts

@@ -0,0 +1,6 @@
+export default function FullScreenButton({ fullScreen, setFullScreen, containerRef, }: {
+    fullScreen: any;
+    setFullScreen: any;
+    containerRef: any;
+}): React.JSX.Element;
+import * as React from "react";

package/es/common/components/editable-map/full-screen-button.js

@@ -2,69 +2,71 @@ import * as React from "react";
 import Button from "dt-design-system/es/button";
 import * as Icons from "dt-design-system/es/icons";
 import css from "./full-screen-button.module.css";
-import { jsx as _jsx } from "react/jsx-runtime";
-export default function FullScreenButton({
-  fullScreen,
-  setFullScreen,
-  containerRef
-}) {
-  const [fullScreenCompatible, setFullScreenCompatible] = React.useState(true);
-  const cleanupFullScreen = React.useCallback(() => {
-    if (!document.fullscreenElement) {
-      setFullScreen(false);
-    }
-  }, [setFullScreen]);
-  React.useEffect(() => {
-    setFullScreenCompatible(isFullScreenCompatible());
-    return () => {
-      document.removeEventListener("fullscreenchange", cleanupFullScreen);
+export default function FullScreenButton({ fullScreen, setFullScreen, containerRef, }) {
+    const [fullScreenCompatible, setFullScreenCompatible] = React.useState(true);
+    const cleanupFullScreen = React.useCallback(() => {
+        if (!document.fullscreenElement) {
+            setFullScreen(false);
+        }
+    }, [setFullScreen]);
+    React.useEffect(() => {
+        setFullScreenCompatible(isFullScreenCompatible());
+        return () => {
+            document.removeEventListener("fullscreenchange", cleanupFullScreen);
+        };
+    }, [cleanupFullScreen]);
+    if (!fullScreenCompatible)
+        return null;
+    const Icon = Icons[fullScreen ? "Minimize" : "Maximize"];
+    const toggleFullScreen = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!fullScreen) {
+            enterFullScreen(containerRef.current, setFullScreen);
+            document.addEventListener("fullscreenchange", cleanupFullScreen);
+        }
+        else {
+            exitFullScreen(setFullScreen);
+            document.removeEventListener("fullscreenchange", cleanupFullScreen);
+        }
     };
-  }, [cleanupFullScreen]);
-  if (!fullScreenCompatible) return null;
-  const Icon = Icons[fullScreen ? "Minimize" : "Maximize"];
-  const toggleFullScreen = e => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (!fullScreen) {
-      enterFullScreen(containerRef.current, setFullScreen);
-      document.addEventListener("fullscreenchange", cleanupFullScreen);
-    } else {
-      exitFullScreen(setFullScreen);
-      document.removeEventListener("fullscreenchange", cleanupFullScreen);
-    }
-  };
-  return _jsx(Button, {
-    variant: "secondary",
-    type: "button",
-    className: css.button,
-    onClick: toggleFullScreen,
-    children: _jsx(Icon, {})
-  });
+    return (<Button variant="secondary" type="button" className={css.button} onClick={toggleFullScreen}>
+      <Icon />
+    </Button>);
 }
 function isFullScreenCompatible() {
-  return document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullscreenEnabled || document.msFullscreenEnabled;
+    return (document.fullscreenEnabled ||
+        document.webkitFullscreenEnabled ||
+        document.mozFullscreenEnabled ||
+        document.msFullscreenEnabled);
 }
 function enterFullScreen(el, setFullScreen) {
-  if (el.requestFullscreen) {
-    el.requestFullscreen();
-  } else if (el.mozRequestFullScreen) {
-    el.mozRequestFullScreen();
-  } else if (el.webkitRequestFullscreen) {
-    el.webkitRequestFullscreen();
-  } else if (el.msRequestFullscreen) {
-    el.msRequestFullscreen();
-  }
-  setFullScreen(true);
+    if (el.requestFullscreen) {
+        el.requestFullscreen();
+    }
+    else if (el.mozRequestFullScreen) {
+        el.mozRequestFullScreen();
+    }
+    else if (el.webkitRequestFullscreen) {
+        el.webkitRequestFullscreen();
+    }
+    else if (el.msRequestFullscreen) {
+        el.msRequestFullscreen();
+    }
+    setFullScreen(true);
 }
 function exitFullScreen(setFullScreen) {
-  if (document.exitFullscreen) {
-    document.exitFullscreen();
-  } else if (document.webkitExitFullscreen) {
-    document.webkitExitFullscreen();
-  } else if (document.mozCancelFullScreen) {
-    document.mozCancelFullScreen();
-  } else if (document.msExitFullscreen) {
-    document.msExitFullscreen();
-  }
-  setFullScreen(false);
-}
+    if (document.exitFullscreen) {
+        document.exitFullscreen();
+    }
+    else if (document.webkitExitFullscreen) {
+        document.webkitExitFullscreen();
+    }
+    else if (document.mozCancelFullScreen) {
+        document.mozCancelFullScreen();
+    }
+    else if (document.msExitFullscreen) {
+        document.msExitFullscreen();
+    }
+    setFullScreen(false);
+}

package/es/common/components/editable-map/helper.d.ts

@@ -0,0 +1,2 @@
+export default function Helper(): React.JSX.Element;
+import * as React from "react";