@deck.gl/widgets 9.2.8 → 9.2.10

package/dist/index.cjs

@@ -462,6 +462,15 @@ var import_preact6 = require("preact");
 // dist/lib/components/dropdown-menu.js
 var import_jsx_runtime9 = require("preact/jsx-runtime");
 var import_hooks = require("preact/hooks");
+function getMenuItemValue(item) {
+  return typeof item === "string" ? item : item.value;
+}
+function getMenuItemLabel(item) {
+  return typeof item === "string" ? item : item.label;
+}
+function getMenuItemIcon(item) {
+  return typeof item === "string" ? void 0 : item.icon;
+}
 var DropdownMenu = (props) => {
   const [isOpen, setIsOpen] = (0, import_hooks.useState)(false);
   const dropdownRef = (0, import_hooks.useRef)(null);
@@ -477,42 +486,17 @@ var DropdownMenu = (props) => {
       document.removeEventListener("mousedown", handleClickOutside);
     };
   }, []);
-  const handleSelect = (value) => {
-    props.onSelect(value);
+  const handleSelect = (item) => {
+    props.onSelect(getMenuItemValue(item));
     setIsOpen(false);
   };
-  return (0, import_jsx_runtime9.jsxs)("div", { className: "dropdown-container", ref: dropdownRef, style: {
-    position: "relative",
-    display: "inline-block",
-    ...props.style
-  }, children: [(0, import_jsx_runtime9.jsx)("button", { onClick: toggleDropdown, style: {
-    width: "30px",
-    height: "30px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    border: "1px solid #ccc",
-    borderRadius: "4px",
-    background: "#fff",
-    cursor: "pointer",
-    padding: 0
-  }, children: "\u25BC" }), isOpen && (0, import_jsx_runtime9.jsx)("ul", { style: {
-    position: "absolute",
-    top: "100%",
-    right: "100%",
-    background: "#fff",
-    border: "1px solid #ccc",
-    borderRadius: "4px",
-    listStyle: "none",
-    padding: "4px 0",
-    margin: 0,
-    zIndex: 1e3,
-    minWidth: "200px"
-  }, children: props.menuItems.map((item) => (0, import_jsx_runtime9.jsx)("li", { onClick: () => handleSelect(item), style: {
-    padding: "4px 8px",
-    cursor: "pointer",
-    whiteSpace: "nowrap"
-  }, children: item }, item)) })] });
+  if (props.menuItems.length === 0) {
+    return null;
+  }
+  return (0, import_jsx_runtime9.jsxs)("div", { className: "deck-widget-dropdown-container", ref: dropdownRef, style: props.style, children: [(0, import_jsx_runtime9.jsx)("button", { className: "deck-widget-dropdown-button", onClick: toggleDropdown, children: (0, import_jsx_runtime9.jsx)("span", { className: `deck-widget-dropdown-icon ${isOpen ? "open" : ""}` }) }), isOpen && (0, import_jsx_runtime9.jsx)("ul", { className: "deck-widget-dropdown-menu", children: props.menuItems.map((item) => {
+    const icon = getMenuItemIcon(item);
+    return (0, import_jsx_runtime9.jsxs)("li", { className: "deck-widget-dropdown-item", onClick: () => handleSelect(item), children: [icon && (0, import_jsx_runtime9.jsx)("span", { className: "deck-widget-dropdown-item-icon", style: { maskImage: `url("${icon}")`, WebkitMaskImage: `url("${icon}")` } }), getMenuItemLabel(item)] }, getMenuItemValue(item));
+  }) })] });
 };
 
 // dist/lib/geocode/geocoder-history.js
@@ -705,6 +689,12 @@ function dmsToDecimal(s) {
 
 // dist/geocoder-widget.js
 var CURRENT_LOCATION2 = "current";
+var LOCATION_ICON = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Z'/%3E%3C/svg%3E`;
+var CURRENT_LOCATION_ITEM = {
+  label: "Current location",
+  value: CURRENT_LOCATION2,
+  icon: LOCATION_ICON
+};
 var GeocoderWidget = class extends import_core6.Widget {
   constructor(props = {}) {
     super(props);
@@ -713,6 +703,7 @@ var GeocoderWidget = class extends import_core6.Widget {
     this.geocodeHistory = new GeocoderHistory({});
     this.addressText = "";
     this.geocoder = CoordinatesGeocoder;
+    this.isGettingLocation = false;
     this.setInput = (text) => {
       this.addressText = text;
     };
@@ -721,17 +712,41 @@ var GeocoderWidget = class extends import_core6.Widget {
         this.handleSubmit();
       }
     };
-    this.handleSelect = (address) => {
-      this.setInput(address);
-      this.handleSubmit();
+    this.handleSelect = (value) => {
+      if (value === CURRENT_LOCATION2) {
+        this.getCurrentLocation();
+      } else {
+        this.setInput(value);
+        this.handleSubmit();
+      }
     };
     this.handleSubmit = () => {
       this.geocode(this.addressText);
     };
+    this.getCurrentLocation = async () => {
+      this.isGettingLocation = true;
+      if (this.rootElement) {
+        this.updateHTML();
+      }
+      try {
+        const coordinates = await CurrentLocationGeocoder.geocode();
+        if (coordinates) {
+          this.setViewState(coordinates);
+        }
+      } catch (error) {
+        this.geocodeHistory.errorText = error instanceof Error ? error.message : "Location error";
+      } finally {
+        this.isGettingLocation = false;
+        if (this.rootElement) {
+          this.updateHTML();
+        }
+      }
+    };
     this.geocode = async (address) => {
-      const useGeolocation = this.props._geolocation && address === CURRENT_LOCATION2;
-      const geocoder = useGeolocation ? CurrentLocationGeocoder : this.geocoder;
-      const coordinates = await this.geocodeHistory.geocode(geocoder, this.addressText, this.props.apiKey);
+      const coordinates = await this.geocodeHistory.geocode(this.geocoder, this.addressText, this.props.apiKey);
+      if (this.rootElement) {
+        this.updateHTML();
+      }
       if (coordinates) {
         this.setViewState(coordinates);
       }
@@ -749,35 +764,19 @@ var GeocoderWidget = class extends import_core6.Widget {
     super.setProps(props);
   }
   onRenderHTML(rootElement) {
-    const menuItems = this.props._geolocation ? [CURRENT_LOCATION2, ...this.geocodeHistory.addressHistory] : [...this.geocodeHistory.addressHistory];
-    (0, import_preact6.render)((0, import_jsx_runtime10.jsxs)("div", { className: "deck-widget-geocoder", style: {
-      pointerEvents: "auto",
-      display: "flex",
-      alignItems: "center",
-      flexWrap: "wrap"
-      // Allows wrapping on smaller screens
-    }, children: [(0, import_jsx_runtime10.jsx)("input", {
+    const menuItems = this.props._geolocation ? [CURRENT_LOCATION_ITEM, ...this.geocodeHistory.addressHistory] : [...this.geocodeHistory.addressHistory];
+    (0, import_preact6.render)((0, import_jsx_runtime10.jsxs)("div", { className: "deck-widget-geocoder", children: [(0, import_jsx_runtime10.jsx)("input", {
+      className: "deck-widget-geocoder-input",
       type: "text",
-      placeholder: this.geocoder.placeholderLocation ?? "Enter address or location",
+      placeholder: this.isGettingLocation ? "Finding your location..." : this.geocoder.placeholderLocation ?? "Enter address or location",
       value: this.geocodeHistory.addressText,
       // @ts-expect-error event type
       onInput: (e) => {
         var _a;
         return this.setInput(((_a = e.target) == null ? void 0 : _a.value) || "");
       },
-      onKeyPress: this.handleKeyPress,
-      style: {
-        flex: "1 1 auto",
-        minWidth: "200px",
-        margin: 0,
-        padding: "8px",
-        boxSizing: "border-box"
-      }
-    }), (0, import_jsx_runtime10.jsx)(DropdownMenu, { menuItems, onSelect: this.handleSelect, style: {
-      margin: 2,
-      padding: "4px 2px",
-      boxSizing: "border-box"
-    } }), this.geocodeHistory.errorText && (0, import_jsx_runtime10.jsx)("div", { className: "error", children: this.geocodeHistory.errorText })] }), rootElement);
+      onKeyPress: this.handleKeyPress
+    }), (0, import_jsx_runtime10.jsx)(DropdownMenu, { menuItems, onSelect: this.handleSelect }), this.geocodeHistory.errorText && (0, import_jsx_runtime10.jsx)("div", { className: "deck-widget-geocoder-error", children: this.geocodeHistory.errorText })] }), rootElement);
   }
   // TODO - MOVE TO WIDGETIMPL?
   setViewState(viewState) {
@@ -1502,7 +1501,13 @@ var LightTheme = {
   "--button-text": "rgb(24, 24, 26, 1)",
   "--icon-compass-north-color": "rgb(240, 92, 68)",
   "--icon-compass-south-color": "rgb(204, 204, 204)",
-  "--menu-gap": "4px"
+  "--menu-gap": "4px",
+  "--menu-background": "#fff",
+  "--menu-backdrop-filter": "unset",
+  "--menu-border": "unset",
+  "--menu-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25)",
+  "--menu-text": "rgb(24, 24, 26, 1)",
+  "--menu-item-hover": "rgba(0, 0, 0, 0.08)"
 };
 var DarkTheme = {
   "--widget-margin": "12px",
@@ -1518,7 +1523,13 @@ var DarkTheme = {
   "--button-text": "rgb(215, 214, 229, 1)",
   "--icon-compass-north-color": "rgb(240, 92, 68)",
   "--icon-compass-south-color": "rgb(200, 199, 209)",
-  "--menu-gap": "4px"
+  "--menu-gap": "4px",
+  "--menu-background": "rgba(18, 18, 20, 1)",
+  "--menu-backdrop-filter": "unset",
+  "--menu-border": "unset",
+  "--menu-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25)",
+  "--menu-text": "rgb(215, 214, 229, 1)",
+  "--menu-item-hover": "rgba(255, 255, 255, 0.1)"
 };
 var LightGlassTheme = {
   "--widget-margin": "12px",
@@ -1534,7 +1545,13 @@ var LightGlassTheme = {
   "--button-text": "rgb(24, 24, 26, 1)",
   "--icon-compass-north-color": "rgb(240, 92, 68)",
   "--icon-compass-south-color": "rgb(204, 204, 204)",
-  "--menu-gap": "4px"
+  "--menu-gap": "4px",
+  "--menu-background": "rgba(255, 255, 255, 0.6)",
+  "--menu-backdrop-filter": "blur(4px)",
+  "--menu-border": "1px solid rgba(255, 255, 255, 0.6)",
+  "--menu-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset",
+  "--menu-text": "rgb(24, 24, 26, 1)",
+  "--menu-item-hover": "rgba(0, 0, 0, 0.08)"
 };
 var DarkGlassTheme = {
   "--widget-margin": "12px",
@@ -1550,7 +1567,13 @@ var DarkGlassTheme = {
   "--button-text": "rgb(215, 214, 229, 1)",
   "--icon-compass-north-color": "rgb(240, 92, 68)",
   "--icon-compass-south-color": "rgb(200, 199, 209)",
-  "--menu-gap": "4px"
+  "--menu-gap": "4px",
+  "--menu-background": "rgba(18, 18, 20, 0.75)",
+  "--menu-backdrop-filter": "blur(4px)",
+  "--menu-border": "1px solid rgba(18, 18, 20, 0.75)",
+  "--menu-shadow": "0px 0px 8px 0px rgba(0, 0, 0, 0.25), 0px 0px 8px 0px rgba(0, 0, 0, 0.1) inset",
+  "--menu-text": "rgb(215, 214, 229, 1)",
+  "--menu-item-hover": "rgba(255, 255, 255, 0.1)"
 };
 
 // dist/theme-widget.js