@dxos/react-ui-geo 0.8.4-main.937b3ca → 0.8.4-main.9be5663bfe

package/dist/lib/browser/index.mjs

@@ -4,42 +4,15 @@ import {
 
 // src/components/Globe/Globe.tsx
 import { easeLinear, easeSinOut, geoMercator, geoOrthographic, geoPath as geoPath2, geoTransverseMercator, interpolateNumber, transition } from "d3";
-import React3, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo2, useRef, useState as useState3 } from "react";
+import React2, { forwardRef, useEffect as useEffect4, useImperativeHandle, useMemo as useMemo2, useRef, useState as useState3 } from "react";
 import { useResizeDetector } from "react-resize-detector";
-import { useDynamicRef, useThemeContext } from "@dxos/react-ui";
-import { mx } from "@dxos/ui-theme";
+import { useComposedRefs, useControlledState, useDynamicRef, useThemeContext } from "@dxos/react-ui";
+import { composable, composableProps, mx } from "@dxos/ui-theme";
 
 // src/hooks/context.tsx
-import React, { createContext, useContext } from "react";
+import { createContext, useContext } from "react";
 import { raise } from "@dxos/debug";
-import { useControlledState } from "@dxos/react-ui";
-var defaults = {
-  center: {
-    lat: 51,
-    lng: 0
-  },
-  zoom: 4
-};
 var GlobeContext = /* @__PURE__ */ createContext(void 0);
-var GlobeContextProvider = ({ children, size, center: centerProp = defaults.center, zoom: zoomProp = defaults.zoom, translation: translationProp, rotation: rotationProp }) => {
-  const [center, setCenter] = useControlledState(centerProp);
-  const [zoom, setZoom] = useControlledState(zoomProp);
-  const [translation, setTranslation] = useControlledState(translationProp);
-  const [rotation, setRotation] = useControlledState(rotationProp);
-  return /* @__PURE__ */ React.createElement(GlobeContext.Provider, {
-    value: {
-      size,
-      center,
-      zoom,
-      translation,
-      rotation,
-      setCenter,
-      setZoom,
-      setTranslation,
-      setRotation
-    }
-  }, children);
-};
 var useGlobeContext = () => {
   return useContext(GlobeContext) ?? raise(new Error("Missing GlobeContext"));
 };
@@ -624,7 +597,7 @@ var useTour = (controller, points, options = {}) => {
 };
 
 // src/components/Toolbar/Controls.tsx
-import React2 from "react";
+import React from "react";
 import { IconButton, Toolbar, useTranslation } from "@dxos/react-ui";
 
 // src/translations.ts
@@ -633,10 +606,10 @@ var translations = [
   {
     "en-US": {
       [translationKey]: {
-        "zoom in icon button": "Zoom in",
-        "zoom out icon button": "Zoom out",
-        "start icon button": "Start",
-        "toggle icon button": "Toggle"
+        "zoom-in-icon.button": "Zoom in",
+        "zoom-out-icon.button": "Zoom out",
+        "start-icon.button": "Start",
+        "toggle-icon.button": "Toggle"
       }
     }
   }
@@ -651,39 +624,39 @@ var controlPositions = {
 };
 var ZoomControls = ({ classNames, onAction }) => {
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
+  return /* @__PURE__ */ React.createElement(Toolbar.Root, {
     classNames: [
       "gap-2",
       classNames
     ]
-  }, /* @__PURE__ */ React2.createElement(IconButton, {
+  }, /* @__PURE__ */ React.createElement(IconButton, {
     icon: "ph--plus--regular",
     iconOnly: true,
-    label: t("zoom in icon button"),
+    label: t("zoom-in-icon.button"),
     onClick: () => onAction?.("zoom-in")
-  }), /* @__PURE__ */ React2.createElement(IconButton, {
+  }), /* @__PURE__ */ React.createElement(IconButton, {
     icon: "ph--minus--regular",
     iconOnly: true,
-    label: t("zoom out icon button"),
+    label: t("zoom-out-icon.button"),
     onClick: () => onAction?.("zoom-out")
   }));
 };
 var ActionControls = ({ classNames, onAction }) => {
   const { t } = useTranslation(translationKey);
-  return /* @__PURE__ */ React2.createElement(Toolbar.Root, {
+  return /* @__PURE__ */ React.createElement(Toolbar.Root, {
     classNames: [
       "gap-2",
       classNames
     ]
-  }, /* @__PURE__ */ React2.createElement(IconButton, {
+  }, /* @__PURE__ */ React.createElement(IconButton, {
     icon: "ph--path--regular",
     iconOnly: true,
-    label: t("start icon button"),
+    label: t("start-icon.button"),
     onClick: () => onAction?.("start")
-  }), /* @__PURE__ */ React2.createElement(IconButton, {
+  }), /* @__PURE__ */ React.createElement(IconButton, {
     icon: "ph--globe-hemisphere-west--regular",
     iconOnly: true,
-    label: t("toggle icon button"),
+    label: t("toggle-icon.button"),
     onClick: () => onAction?.("toggle")
   }));
 };
@@ -743,19 +716,38 @@ var getProjection = (type = "orthographic") => {
   }
   return type ?? geoOrthographic();
 };
-var GlobeRoot = ({ classNames, children, ...props }) => {
-  const { ref, width, height } = useResizeDetector();
-  return /* @__PURE__ */ React3.createElement("div", {
-    ref,
-    className: mx("relative flex grow overflow-hidden", classNames)
-  }, /* @__PURE__ */ React3.createElement(GlobeContextProvider, {
-    size: {
-      width,
-      height
-    },
-    ...props
+var GlobeRoot = composable(({ children, center: centerProp, zoom: zoomProp, translation: translationProp, rotation: rotationProp, ...props }, forwardedRef) => {
+  const localRef = useRef(null);
+  const composedRef = useComposedRefs(localRef, forwardedRef);
+  const { width, height } = useResizeDetector({
+    targetRef: localRef
+  });
+  const [center, setCenter] = useControlledState(centerProp);
+  const [zoom, setZoom] = useControlledState(zoomProp ?? 4);
+  const [translation, setTranslation] = useControlledState(translationProp);
+  const [rotation, setRotation] = useControlledState(rotationProp);
+  return /* @__PURE__ */ React2.createElement(GlobeContext.Provider, {
+    value: {
+      size: {
+        width,
+        height
+      },
+      center,
+      zoom,
+      translation,
+      rotation,
+      setCenter,
+      setZoom,
+      setTranslation,
+      setRotation
+    }
+  }, /* @__PURE__ */ React2.createElement("div", {
+    ...composableProps(props, {
+      classNames: "relative dx-container"
+    }),
+    ref: composedRef
   }, children));
-};
+});
 var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionProp, topology, features, styles: stylesProp }, forwardRef3) => {
   const { themeMode } = useThemeContext();
   const styles = useMemo2(() => stylesProp ?? defaultStyles[themeMode], [
@@ -796,14 +788,14 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionProp, topo
       translation,
       rotation,
       setCenter,
-      setZoom: (s) => {
-        if (typeof s === "function") {
-          const is = interpolateNumber(zoomRef.current, s(zoomRef.current));
+      setZoom: (state) => {
+        if (typeof state === "function") {
+          const is = interpolateNumber(zoomRef.current, state(zoomRef.current));
           transition().ease(zooming.current ? easeLinear : easeSinOut).duration(200).tween("scale", () => (t) => setZoom(is(t))).on("end", () => {
             zooming.current = false;
           });
         } else {
-          setZoom(s);
+          setZoom(state);
         }
       },
       setTranslation,
@@ -843,7 +835,7 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionProp, topo
   if (!size.width || !size.height) {
     return null;
   }
-  return /* @__PURE__ */ React3.createElement("canvas", {
+  return /* @__PURE__ */ React2.createElement("canvas", {
     ref: canvasRef,
     width: size.width,
     height: size.height
@@ -851,9 +843,9 @@ var GlobeCanvas = /* @__PURE__ */ forwardRef(({ projection: projectionProp, topo
 });
 var GlobeDebug = ({ position = "topleft" }) => {
   const { size, zoom, translation, rotation } = useGlobeContext();
-  return /* @__PURE__ */ React3.createElement("div", {
-    className: mx("z-10 absolute is-96 p-2 overflow-hidden border border-green-700 rounded", controlPositions[position])
-  }, /* @__PURE__ */ React3.createElement("pre", {
+  return /* @__PURE__ */ React2.createElement("div", {
+    className: mx("z-10 absolute w-96 p-2 overflow-hidden border border-green-700 rounded-sm", controlPositions[position])
+  }, /* @__PURE__ */ React2.createElement("pre", {
     className: "font-mono text-xs text-green-700"
   }, JSON.stringify({
     size,
@@ -863,25 +855,25 @@ var GlobeDebug = ({ position = "topleft" }) => {
   }, null, 2)));
 };
 var GlobePanel = ({ position, classNames, children }) => {
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React2.createElement("div", {
     className: mx("z-10 absolute overflow-hidden", controlPositions[position], classNames)
   }, children);
 };
 var CustomControl = ({ position, children }) => {
-  return /* @__PURE__ */ React3.createElement("div", {
+  return /* @__PURE__ */ React2.createElement("div", {
     className: mx("z-10 absolute overflow-hidden", controlPositions[position])
   }, children);
 };
-var GlobeZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl, {
+var GlobeZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React2.createElement(CustomControl, {
   position,
   ...props
-}, /* @__PURE__ */ React3.createElement(ZoomControls, {
+}, /* @__PURE__ */ React2.createElement(ZoomControls, {
   onAction
 }));
-var GlobeAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl, {
+var GlobeAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React2.createElement(CustomControl, {
   position,
   ...props
-}, /* @__PURE__ */ React3.createElement(ActionControls, {
+}, /* @__PURE__ */ React2.createElement(ActionControls, {
   onAction
 }));
 var Globe = {
@@ -897,21 +889,36 @@ var Globe = {
 import "leaflet/dist/leaflet.css";
 import { createContext as createContext2 } from "@radix-ui/react-context";
 import L, { Control, DomEvent, DomUtil, latLngBounds } from "leaflet";
-import React4, { forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useRef as useRef2, useState as useState4 } from "react";
+import React3, { forwardRef as forwardRef2, useEffect as useEffect5, useImperativeHandle as useImperativeHandle2, useRef as useRef2 } from "react";
 import { createRoot } from "react-dom/client";
 import { MapContainer, Marker, Popup, TileLayer, useMap, useMapEvents } from "react-leaflet";
 import { ThemeProvider, Tooltip } from "@dxos/react-ui";
-import { defaultTx, mx as mx2 } from "@dxos/ui-theme";
-var defaults2 = {
+import { composable as composable2, composableProps as composableProps2, defaultTx, mx as mx2 } from "@dxos/ui-theme";
+var defaults = {
   center: {
     lat: 51,
     lng: 0
   },
   zoom: 4
 };
-var [MapContextProvier, useMapContext] = createContext2("Map");
-var MapRoot = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, onChange, ...props }, forwardedRef) => {
-  const [attention, setAttention] = useState4(false);
+var [MapContextProvider, useMapContext] = createContext2("Map");
+var MapRoot = composable2(({ children, onChange, ...props }, forwardedRef) => {
+  const attention = false;
+  return /* @__PURE__ */ React3.createElement(MapContextProvider, {
+    attention,
+    onChange
+  }, /* @__PURE__ */ React3.createElement("div", {
+    ...composableProps2(props, {
+      role: "none",
+      classNames: "dx-container grid dx-focus-ring-inset"
+    }),
+    ref: forwardedRef
+  }, children));
+});
+MapRoot.displayName = "Map.Root";
+var MAP_CONTENT_NAME = "Map.Content";
+var MapContent = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true, doubleClickZoom = true, touchZoom = true, center, zoom, children, ...props }, forwardedRef) => {
+  const { attention } = useMapContext(MAP_CONTENT_NAME);
   const mapRef = useRef2(null);
   const map = mapRef.current;
   useImperativeHandle2(forwardedRef, () => ({
@@ -935,26 +942,26 @@ var MapRoot = /* @__PURE__ */ forwardRef2(({ classNames, scrollWheelZoom = true,
     map,
     attention
   ]);
-  return /* @__PURE__ */ React4.createElement(MapContextProvier, {
-    attention,
-    onChange
-  }, /* @__PURE__ */ React4.createElement(MapContainer, {
+  return /* @__PURE__ */ React3.createElement(MapContainer, {
     ...props,
-    ref: mapRef,
-    className: mx2("group relative grid bs-full is-full !bg-baseSurface dx-focus-ring-inset", classNames),
+    className: mx2("group relative grid bg-base-surface!", classNames),
     attributionControl: false,
     zoomControl: false,
     scrollWheelZoom,
     doubleClickZoom,
     touchZoom,
-    center: center ?? defaults2.center,
-    zoom: zoom ?? defaults2.zoom
-  }));
+    center: center ?? defaults.center,
+    zoom: zoom ?? defaults.zoom,
+    whenReady: () => {
+    },
+    ref: mapRef
+  }, children);
 });
-MapRoot.displayName = "Map.Root";
+MapContent.displayName = "Map.Content";
+var MAP_TILES_NAME = "Map.Tiles";
 var MapTiles = (_props) => {
   const ref = useRef2(null);
-  const { onChange } = useMapContext(MapTiles.displayName);
+  const { onChange } = useMapContext(MAP_TILES_NAME);
   useMapEvents({
     zoomstart: (ev) => {
       onChange?.({
@@ -963,7 +970,7 @@ var MapTiles = (_props) => {
       });
     }
   });
-  const { attention } = useMapContext(MapTiles.displayName);
+  const { attention } = useMapContext(MAP_TILES_NAME);
   useEffect5(() => {
     if (ref.current) {
       ref.current.getContainer().dataset.attention = attention ? "1" : "0";
@@ -971,7 +978,7 @@ var MapTiles = (_props) => {
   }, [
     attention
   ]);
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(TileLayer, {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement(TileLayer, {
     ref,
     "data-attention": attention,
     detectRetina: true,
@@ -980,7 +987,7 @@ var MapTiles = (_props) => {
     keepBuffer: 4
   }));
 };
-MapTiles.displayName = "Map.Tiles";
+MapTiles.displayName = MAP_TILES_NAME;
 var MapMarkers = ({ selected, markers }) => {
   const map = useMap();
   useEffect5(() => {
@@ -988,13 +995,13 @@ var MapMarkers = ({ selected, markers }) => {
       const bounds = latLngBounds(markers.map((marker) => marker.location));
       map.fitBounds(bounds);
     } else {
-      map.setView(defaults2.center, defaults2.zoom);
+      map.setView(defaults.center, defaults.zoom);
     }
   }, [
     markers
   ]);
-  return /* @__PURE__ */ React4.createElement(React4.Fragment, null, markers?.map(({ id, title, location: { lat, lng } }) => {
-    return /* @__PURE__ */ React4.createElement(Marker, {
+  return /* @__PURE__ */ React3.createElement(React3.Fragment, null, markers?.map(({ id, title, location: { lat, lng } }) => {
+    return /* @__PURE__ */ React3.createElement(Marker, {
       key: id,
       position: {
         lat,
@@ -1025,7 +1032,7 @@ var MapMarkers = ({ selected, markers }) => {
           ]
         })
       )
-    }, title && /* @__PURE__ */ React4.createElement(Popup, null, title));
+    }, title && /* @__PURE__ */ React3.createElement(Popup, null, title));
   }));
 };
 MapMarkers.displayName = "Map.Markers";
@@ -1036,13 +1043,13 @@ var CustomControl2 = ({ position, children }) => {
       position
     });
     control.onAdd = () => {
-      const container = DomUtil.create("div", mx2("!m-0", controlPositions[position]));
+      const container = DomUtil.create("div", mx2("m-0!", controlPositions[position]));
       DomEvent.disableClickPropagation(container);
       DomEvent.disableScrollPropagation(container);
       const root = createRoot(container);
-      root.render(/* @__PURE__ */ React4.createElement(ThemeProvider, {
+      root.render(/* @__PURE__ */ React3.createElement(ThemeProvider, {
         tx: defaultTx
-      }, /* @__PURE__ */ React4.createElement(Tooltip.Provider, null, children)));
+      }, /* @__PURE__ */ React3.createElement(Tooltip.Provider, null, children)));
       return container;
     };
     control.addTo(map);
@@ -1056,20 +1063,21 @@ var CustomControl2 = ({ position, children }) => {
   ]);
   return null;
 };
-var MapZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React4.createElement(CustomControl2, {
+var MapZoom = ({ onAction, position = "bottomleft", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl2, {
   position,
   ...props
-}, /* @__PURE__ */ React4.createElement(ZoomControls, {
+}, /* @__PURE__ */ React3.createElement(ZoomControls, {
   onAction
 }));
-var MapAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React4.createElement(CustomControl2, {
+var MapAction = ({ onAction, position = "bottomright", ...props }) => /* @__PURE__ */ React3.createElement(CustomControl2, {
   position,
   ...props
-}, /* @__PURE__ */ React4.createElement(ActionControls, {
+}, /* @__PURE__ */ React3.createElement(ActionControls, {
   onAction
 }));
 var Map = {
   Root: MapRoot,
+  Content: MapContent,
   Tiles: MapTiles,
   Markers: MapMarkers,
   Zoom: MapZoom,
@@ -1078,7 +1086,7 @@ var Map = {
 export {
   ActionControls,
   Globe,
-  GlobeContextProvider,
+  GlobeContext,
   Map,
   ZoomControls,
   closestPoint,