@macrostrat/map-interface 1.6.0 → 2.0.1

package/package.json

@@ -1,69 +1,76 @@
 {
   "name": "@macrostrat/map-interface",
-  "version": "1.6.0",
+  "version": "2.0.1",
   "description": "Map interface for Macrostrat",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/UW-Macrostrat/web-components.git",
+    "directory": "packages/map-interface"
+  },
+  "license": "MIT",
   "source": "src/index.ts",
-  "types": "dist/esm/index.d.ts",
-  "node": "dist/node/index.js",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "node": "dist/index.cjs",
+  "types": "dist/index.d.ts",
+  "style": "dist/map-interface.css",
+  "files": [
+    "src",
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      },
+      "style": "./dist/map-interface.css"
+    },
+    "./package.json": "./package.json",
+    "./style.css": "./dist/map-interface.css",
+    "./dist/map-interface.css": "./dist/map-interface.css"
+  },
+  "scripts": {
+    "build": "bundle-library ."
+  },
+  "peerDependencies": {
+    "react": "^18.0.0||^19.0.0",
+    "react-dom": "^18.0.0||^19.0.0"
+  },
   "dependencies": {
-    "@blueprintjs/core": "^5.0.0",
-    "@macrostrat/color-utils": "^1.1.2",
-    "@macrostrat/data-components": "^0.2.2",
+    "@blueprintjs/core": "^6.6.1",
+    "@macrostrat/color-utils": "^1.2.1",
+    "@macrostrat/data-components": "^1.0.1",
     "@macrostrat/hyper": "^3.0.6",
-    "@macrostrat/map-interface": "1.6.0",
-    "@macrostrat/mapbox-react": "^2.6.4",
-    "@macrostrat/mapbox-utils": "^1.6.1",
-    "@macrostrat/ui-components": "^4.5.2",
+    "@macrostrat/map-interface": "2.0.1",
+    "@macrostrat/mapbox-react": "^3.0.1",
+    "@macrostrat/mapbox-utils": "^1.7.1",
+    "@macrostrat/ui-components": "^5.0.4",
     "@mapbox/tilebelt": "^2.0.0",
     "@visx/axis": "^3.12.0",
     "@visx/scale": "^3.12.0",
-    "chroma-js": "^3.1.2",
+    "chroma-js": "^3.2.0",
     "classnames": "^2.5.1",
     "d3-array": "^3.2.4",
-    "d3-format": "^3.1.0",
+    "d3-format": "^3.1.2",
     "mapbox-gl": "^2.15.0||^3.0.0",
     "query-string": "^9.0.0",
     "transition-hook": "^1.5.2",
-    "underscore": "^1.13.6",
+    "underscore": "^1.13.7",
     "use-resize-observer": "^9.1.0"
   },
   "devDependencies": {
-    "parcel": "^2.16.0",
-    "ui-box": "^5.4.1"
+    "@macrostrat/web-components-bundler": "1.0.0"
   },
-  "peerDependencies": {
-    "react": "^16.8.6||^17.0.0||^18.0.0||^19.0.0",
-    "react-dom": "^16.8.6||^17.0.0||^18.0.0||^19.0.0"
-  },
-  "scripts": {
-    "dev": "parcel watch",
-    "build": "rm -rf dist && parcel build"
-  },
-  "exports": {
-    ".": {
-      "source": "./src/index.ts",
-      "import": "./dist/esm/index.js",
-      "require": "./dist/cjs/index.js",
-      "types": "./dist/esm/index.d.ts",
-      "node": "./dist/node/index.js"
-    }
-  },
-  "targets": {
-    "node": {
-      "engines": {
-        "node": ">=14"
-      }
-    }
-  },
-  "files": [
-    "dist",
-    "src"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/UW-Macrostrat/web-components.git",
-    "directory": "packages/map-interface"
+  "publishConfig": {
+    "access": "public"
   }
 }

package/src/context-panel/main.module.sass

@@ -18,18 +18,18 @@
     align-items: center
     gap: 5px
 
-    :global(.bp5-input-group)
+    :global(.bp6-input-group)
       flex-grow: 1
       cursor: text
 
 .navbar
   min-height: 50px
 
-:global(.bp5-navbar) > .loading-button
+:global(.bp6-navbar) > .loading-button
   width: 40px
   height: 40px
 
-.status-tongue:global(.bp5-card)
+.status-tongue:global(.bp6-card)
   background-color: var(--panel-background-color)
   margin: 5px
   margin-bottom: 0

package/src/dev/main.module.sass

@@ -57,7 +57,7 @@
   margin: 0 1em 0.5em
 
   :global
-    .bp5-slider-handle .bp5-slider-label
+    .bp6-slider-handle .bp6-slider-label
       background-color: var(--secondary-color)
       color: var(--text-color)
 

package/src/expansion-panel/main.module.sass

@@ -24,7 +24,7 @@
   .expansion-panel-icon
     margin-right: -0.35em
 
-// :global(.bp5-dark) .panel-subhead
+// :global(.bp6-dark) .panel-subhead
 //   margin 0 1px
 
 .info-panel-section
@@ -64,14 +64,14 @@
 
 .expansion-summary-title-help
   margin-left: 5px
-  :global(.bp5-icon)
+  :global(.bp6-icon)
     margin-left: 5px
 
 .expansion-panel-header
   cursor: pointer
   &:hover
     background-color: var(--accent-hover-color)
-  :global(.bp5-icon)
+  :global(.bp6-icon)
     transform: translate(0,3px)
 
 .expansion-children
@@ -121,7 +121,7 @@
   position: relative
 
 .expandable-details-toggle
-  :global(.bp5-button)
+  :global(.bp6-button)
     font-size: 10px
 
 .expandable-details

package/src/location-details/fossil-collections/main.module.sass

@@ -12,5 +12,5 @@ div.pbdb-panel-header
 
 .fossil-collection
   margin-bottom: 1em
-  :global(.bp5-tab-panel)
+  :global(.bp6-tab-panel)
     margin-top: 0px

package/src/location-details/info-blocks.module.sass

@@ -0,0 +1,35 @@
+.chip
+  padding: 3px 6px
+  margin: 2px 6px 2px 0
+  border-radius: 5px
+  text-align: center
+  &.emphasized
+    font-weight: 600
+
+.age-chip-container
+  font-family: 'Montserrat', sans-serif
+  font-weight: 700
+  display: inline-block
+
+.age-chip
+  display: inline-block
+
+:global(.bp6-dark) .age-chip
+  color: #fff
+
+.age-chip-age
+  font-size: 75%
+
+.age-chip-ma
+  font-size: 70%
+  font-weight: 400
+
+.age-ma
+  font-style: italic
+
+.lith-chip
+  display: inline-block
+  font-size: 12px
+  background-repeat: repeat
+  background-size: cover
+  //background-color: rgba(255,255,255,0.5);

package/src/location-details/info-blocks.ts

@@ -1,6 +1,6 @@
 import hyper from "@macrostrat/hyper";
 import { hexToRgb } from "./utils";
-import styles from "./info-blocks.module.styl";
+import styles from "./info-blocks.module.sass";
 import { useDarkMode } from "@macrostrat/ui-components";
 import chroma from "chroma-js";
 

package/src/location-details/macrostrat-linked.ts

@@ -4,7 +4,7 @@ import {
   ExpandableDetailsPanel,
   ExpansionBody,
 } from "@macrostrat/map-interface";
-import styles from "./main.module.styl";
+import styles from "./main.module.sass";
 import { scaleLinear } from "@visx/scale";
 import { AxisBottom } from "@visx/axis";
 import chroma from "chroma-js";

package/src/location-details/{main.module.styl → main.module.sass}

@@ -1,39 +1,39 @@
 .spacer
-  flex-grow 1
-  pointer-events none
+  flex-grow: 1
+  pointer-events: none
 
 .infodrawer-content
-  margin: 0;
+  margin: 0
 
 .macrostrat-detail
-  display: flex;
-  align-items: center;
-  margin 0.2em 0 0.4em;
+  display: flex
+  align-items: center
+  margin: 0.2em 0 0.4em
 
   .expansion-summary-title
-    margin-right: 0.8em;
+    margin-right: 0.8em
 
     &:after
-      content: ":";
+      content: ":"
 
 .described-age, .macrostrat-detail
-  display: flex;
-  align-items: center;
+  display: flex
+  align-items: center
 
   .expansion-summary-title
-    margin-right: 0.8em;
+    margin-right: 0.8em
 
     &:after
-      content: ":";
+      content: ":"
 
   .description
-    font-style italic
-    font-size 0.7em
+    font-style: italic
+    font-size: 0.7em
     max-width: 100px
     text-align: right
 
   .age-chips
-    flex-grow 1
+    flex-grow: 1
 
 
 // &.loading
@@ -43,22 +43,22 @@
 
 
 .spacer
-  flex-grow 1
-  pointer-events none
+  flex-grow: 1
+  pointer-events: none
 
 .macrostrat-unit
   h3
-    margin: 0.5em 0 0.5em;
-    flex-grow: 1;
+    margin: 0.5em 0 0.5em
+    flex-grow: 1
 
   .description
     margin-right: 1em
 
 .description
-  font-style italic
+  font-style: italic
 
 .age-refinement-plot
-  position relative
+  position: relative
 
   .age-refinement-bar
     border-radius: 3px

package/src/location-panel/main.module.sass

@@ -1,4 +1,4 @@
-.copy-link-button:global(.bp5-minimal.bp5-button)
+.copy-link-button:global(.bp6-minimal.bp6-button)
   color: var(--text-subtle-color)
 
   svg
@@ -23,7 +23,7 @@
   .left-icon
     padding: 7px
 
-  .position-controls :global(.bp5-button)
+  .position-controls :global(.bp6-button)
     font-size: 12px !important
 
   // Text elements should
@@ -53,7 +53,7 @@
   background-color: var(--panel-background-color)
   --panel-padding: 0
 
-  &:global(.bp5-card)
+  &:global(.bp6-card)
     padding: 0
     background-color: var(--panel-background-color)
 

package/src/main.module.sass

@@ -113,11 +113,11 @@
     top: 0
 
 
-.context-panel-holder > :global(.bp5-card)
+.context-panel-holder > :global(.bp6-card)
   padding: 10px
   background-color: var(--panel-background-color)
 
-.panel-card, .panel-card:global(.bp5-card)
+.panel-card, .panel-card:global(.bp6-card)
   padding: var(--panel-padding, 10px)
   background-color: var(--panel-background-color)
   overflow: hidden
@@ -126,7 +126,7 @@
   & > :last-child
     margin-bottom: 0
 
-:global(.bp5-dark) .panel-card
+:global(.bp6-dark) .panel-card
   background-color: var(--panel-background-color)
 
 .context-stack
@@ -178,29 +178,29 @@
   overflow: hidden
   text-align: right
 
-  & :global(.bp5-button-text)
+  & :global(.bp6-button-text)
     transition: all 0.2s
     transition-delay: 0.1s
 
-  .menu-card.narrow-card .panel-header:not(.minimal) &:global(.bp5-active) ~ & :global(.bp5-button-text)
+  .menu-card.narrow-card .panel-header:not(.minimal) &:global(.bp6-active) ~ & :global(.bp6-button-text)
     width: 0
     opacity: 0
     margin-left: -7px
 
-  .context-panel-leave .menu-card .panel-header & :global(.bp5-button-text)
+  .context-panel-leave .menu-card .panel-header & :global(.bp6-button-text)
     opacity: 0
     width: 0
 
 .narrow-card.narrow-enter .panel-header .buttons
   margin-right: -500px
 
-.panel-header.minimal .tab-button:not(:hover):not(:global(.bp5-active))
+.panel-header.minimal .tab-button:not(:hover):not(:global(.bp6-active))
   padding-left: 0
   padding-right: 0
   min-width: 30px
   width: 30px
 
-.panel-header.minimal .tab-button:not(:hover) :global(.bp5-button-text)
+.panel-header.minimal .tab-button:not(:hover) :global(.bp6-button-text)
   width: 0
   opacity: 0
   margin-left: -7px
@@ -209,7 +209,7 @@
   margin-bottom: 0.5em
   margin-top: 0.2em
 
-.menu-card :global .bp5-text ul,
+.menu-card :global .bp6-text ul,
 .menu-card :global .text-panel ul
   padding-left: 1em
 
@@ -218,7 +218,7 @@
   flex-direction: column
   margin-bottom: -8px
 
-  & .bp5-button-group
+  & .bp6-button-group
     margin-bottom: 4px
 
   & hr
@@ -261,7 +261,7 @@
   .mapboxgl-ctrl-logo
     transform: scale(0.9) translate(-8px, 2px)
 
-  .bp5-dark
+  .bp6-dark
     .mapboxgl-ctrl-group
       background-color: var(--panel-background-color)
 
@@ -271,10 +271,10 @@
   .mapboxgl-ctrl-group button + button
     border-top: 1px solid var(--panel-rule-color) !important
 
-  .bp5-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon
+  .bp6-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon
     filter: invert(40%)
 
-  .bp5-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover
+  .bp6-dark .mapboxgl-ctrl-group .mapboxgl-ctrl-icon:hover
     filter: invert(50%)
 
   .mapboxgl-ctrl-geolocate .mapboxgl-ctrl-icon
@@ -305,7 +305,7 @@
   gap: 0.5em
 
   :global(.map-control)
-    & > :global(.bp5-button)
+    & > :global(.bp6-button)
       padding: 0
       transform: translate(-3.5px, -3.5px)
       width: 22px !important
@@ -414,7 +414,7 @@
       max-width: var(--map-context-stack-max-width, none)
       transition: width 300ms ease
 
-    :global(.bp5-navbar)
+    :global(.bp6-navbar)
       //height: unset
       //padding: 5px
       h1, h2, h3

package/dist/cjs/index.js

@@ -1,54 +0,0 @@
-var $fce5fc950d1fe35b$exports = require("./map-interface.0e252a74.js");
-var $2bc7c1e4e7da7fdf$exports = require("./map-interface.67001b26.js");
-var $9acbb47bf7cb7660$exports = require("./map-interface.a3c2552f.js");
-var $c3311f59335df34d$exports = require("./map-interface.bda26b27.js");
-var $493deb9ab6b848e3$exports = require("./map-interface.7bdbe4b6.js");
-var $f333fe6f49373ca9$exports = require("./map-interface.99a048dc.js");
-var $2611a7b4364593e5$exports = require("./map-interface.cf6c9a68.js");
-var $3490fc4f4bda12f7$exports = require("./map-interface.ffb109ef.js");
-var $750d69d73bfbdc9a$exports = require("./map-interface.354aaa39.js");
-var $4b8aa57c998025ac$exports = require("./map-interface.c5061c96.js");
-var $b96d5ba3a9868b40$exports = require("./map-interface.4267aa3a.js");
-
-
-function $parcel$exportWildcard(dest, source) {
-  Object.keys(source).forEach(function(key) {
-    if (key === 'default' || key === '__esModule' || Object.prototype.hasOwnProperty.call(dest, key)) {
-      return;
-    }
-
-    Object.defineProperty(dest, key, {
-      enumerable: true,
-      get: function get() {
-        return source[key];
-      }
-    });
-  });
-
-  return dest;
-}
-
-
-
-
-
-
-
-
-
-
-
-$parcel$exportWildcard(module.exports, $fce5fc950d1fe35b$exports);
-$parcel$exportWildcard(module.exports, $2bc7c1e4e7da7fdf$exports);
-$parcel$exportWildcard(module.exports, $9acbb47bf7cb7660$exports);
-$parcel$exportWildcard(module.exports, $c3311f59335df34d$exports);
-$parcel$exportWildcard(module.exports, $493deb9ab6b848e3$exports);
-$parcel$exportWildcard(module.exports, $f333fe6f49373ca9$exports);
-$parcel$exportWildcard(module.exports, $2611a7b4364593e5$exports);
-$parcel$exportWildcard(module.exports, $3490fc4f4bda12f7$exports);
-$parcel$exportWildcard(module.exports, $750d69d73bfbdc9a$exports);
-$parcel$exportWildcard(module.exports, $4b8aa57c998025ac$exports);
-$parcel$exportWildcard(module.exports, $b96d5ba3a9868b40$exports);
-
-
-//# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +0,0 @@
-{"mappings":"","sources":["packages/map-interface/src/index.ts"],"sourcesContent":["export * from \"./context-panel\";\nexport * from \"./location-panel\";\nexport * from \"./dev\";\nexport * from \"./container\";\nexport * from \"./map-view\";\nexport * from \"./controls\";\nexport * from \"./helpers\";\nexport * from \"./utils\";\nexport * from \"./expansion-panel\";\nexport * from \"./location-details\";\nexport * from \"./hash-string\";\n"],"names":[],"version":3,"file":"index.js.map"}

package/dist/cjs/map-interface.0e252a74.js

@@ -1,88 +0,0 @@
-require("./map-interface.ae4c52a6.css");
-var $7a1b0f72a2e7f87d$exports = require("./map-interface.70458f75.js");
-var $gcA2U$blueprintjscore = require("@blueprintjs/core");
-var $gcA2U$macrostrathyper = require("@macrostrat/hyper");
-var $gcA2U$macrostratmapboxreact = require("@macrostrat/mapbox-react");
-var $gcA2U$macrostratuicomponents = require("@macrostrat/ui-components");
-
-
-function $parcel$interopDefault(a) {
-  return a && a.__esModule ? a.default : a;
-}
-
-function $parcel$export(e, n, v, s) {
-  Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
-}
-
-$parcel$export(module.exports, "LoadingButton", () => $fce5fc950d1fe35b$export$4ec83e90d030b2f3);
-$parcel$export(module.exports, "MapLoadingButton", () => $fce5fc950d1fe35b$export$9e3bae3c08bde368);
-$parcel$export(module.exports, "FloatingNavbar", () => $fce5fc950d1fe35b$export$a8cc0062d02a3841);
-
-
-
-
-
-const $fce5fc950d1fe35b$var$h = (0, ($parcel$interopDefault($gcA2U$macrostrathyper))).styled((0, ($parcel$interopDefault($7a1b0f72a2e7f87d$exports))));
-const $fce5fc950d1fe35b$var$spinnerElement = $fce5fc950d1fe35b$var$h((0, $gcA2U$blueprintjscore.Spinner), {
-    size: 16
-});
-function $fce5fc950d1fe35b$export$4ec83e90d030b2f3({ isLoading: isLoading = false, onClick: onClick, active: active = false, large: large = true, icon: icon = "menu", style: style }) {
-    return $fce5fc950d1fe35b$var$h((0, $gcA2U$blueprintjscore.Button), {
-        className: "loading-button",
-        icon: isLoading ? $fce5fc950d1fe35b$var$spinnerElement : icon,
-        large: large,
-        minimal: true,
-        onClick: onClick,
-        active: active && !isLoading,
-        style: style
-    });
-}
-function $fce5fc950d1fe35b$export$9e3bae3c08bde368(props) {
-    const isLoading = (0, $gcA2U$macrostratmapboxreact.useMapStatus)((s)=>s.isLoading);
-    return $fce5fc950d1fe35b$var$h($fce5fc950d1fe35b$export$4ec83e90d030b2f3, {
-        ...props,
-        isLoading: isLoading
-    });
-}
-function $fce5fc950d1fe35b$export$a8cc0062d02a3841({ className: className, children: children, headerElement: headerElement = null, title: title = null, statusElement: statusElement = null, rightElement: rightElement = null, height: height, width: width, style: style = {} }) {
-    let _rightElement = null;
-    if (rightElement != null) _rightElement = $fce5fc950d1fe35b$var$h("div.right-element", rightElement);
-    let _headerElement = headerElement;
-    if (title != null && _headerElement == null) {
-        if (typeof title === "string") _headerElement = $fce5fc950d1fe35b$var$h((0, $gcA2U$blueprintjscore.Text), {
-            tagName: "h2",
-            ellipsize: true
-        }, title);
-        else _headerElement = title;
-    }
-    if (_headerElement != null) _headerElement = $fce5fc950d1fe35b$var$h([
-        _headerElement,
-        $fce5fc950d1fe35b$var$h((0, $gcA2U$macrostratuicomponents.Spacer))
-    ]);
-    return $fce5fc950d1fe35b$var$h("div.searchbar-holder", {
-        className: className,
-        style: {
-            width: width
-        }
-    }, [
-        $fce5fc950d1fe35b$var$h("div.navbar-holder", [
-            $fce5fc950d1fe35b$var$h((0, $gcA2U$blueprintjscore.Navbar), {
-                className: "searchbar navbar panel",
-                style: {
-                    height: height,
-                    ...style
-                }
-            }, [
-                _headerElement,
-                children,
-                _rightElement
-            ])
-        ]),
-        $fce5fc950d1fe35b$var$h.if(statusElement != null)((0, $gcA2U$blueprintjscore.Card), {
-            className: "status-tongue"
-        }, statusElement)
-    ]);
-}
-
-
-//# sourceMappingURL=map-interface.0e252a74.js.map

package/dist/cjs/map-interface.0e252a74.js.map

@@ -1 +0,0 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAOA,MAAM,0BAAI,CAAA,GAAA,gDAAI,EAAE,MAAM,CAAC,CAAA,GAAA,mDAAK;AAE5B,MAAM,uCAAiB,wBAAE,CAAA,GAAA,8BAAM,GAAG;IAAE,MAAM;AAAG;AAEtC,SAAS,0CAAc,aAC5B,YAAY,gBACZ,OAAO,UACP,SAAS,cACT,QAAQ,YACR,OAAO,eACP,KAAK,EACN;IACC,OAAO,wBAAE,CAAA,GAAA,6BAAK,GAAG;QACf,WAAW;QACX,MAAO,YAAY,uCAAiB;eACpC;QACA,SAAS;iBACT;QACA,QAAQ,UAAU,CAAC;eACnB;IACF;AACF;AAEO,SAAS,0CAAiB,KAAU;IACzC,MAAM,YAAY,CAAA,GAAA,yCAAW,EAAE,CAAC,IAAM,EAAE,SAAS;IACjD,OAAO,wBAAE,2CAAe;QAAE,GAAG,KAAK;mBAAE;IAAU;AAChD;AAgBO,SAAS,0CAAe,aAC7B,SAAS,YACT,QAAQ,iBACR,gBAAgB,aAChB,QAAQ,qBACR,gBAAgB,oBAChB,eAAe,cACf,MAAM,SACN,KAAK,SACL,QAAQ,CAAC,GACW;IACpB,IAAI,gBAAkC;IACtC,IAAI,gBAAgB,MAClB,gBAAgB,wBAAE,qBAAqB;IAGzC,IAAI,iBAAmC;IACvC,IAAI,SAAS,QAAQ,kBAAkB;QACrC,IAAI,OAAO,UAAU,UACnB,iBAAiB,wBAAE,CAAA,GAAA,2BAAG,GAAG;YAAE,SAAS;YAAM,WAAW;QAAK,GAAG;aAE7D,iBAAiB;;IAIrB,IAAI,kBAAkB,MACpB,iBAAiB,wBAAE;QAAC;QAAgB,wBAAE,CAAA,GAAA,oCAAK;KAAG;IAGhD,OAAO,wBAAE,wBAAwB;mBAAE;QAAW,OAAO;mBAAE;QAAM;IAAE,GAAG;QAChE,wBAAE,qBAAqB;YACrB,wBACE,CAAA,GAAA,6BAAK,GACL;gBACE,WAAW;gBACX,OAAO;4BAAE;oBAAQ,GAAG,KAAK;gBAAC;YAC5B,GACA;gBAAC;gBAAgB;gBAAU;aAAc;SAE5C;QACD,wBAAE,EAAE,CAAC,iBAAiB,MACpB,CAAA,GAAA,2BAAG,GACH;YAAE,WAAW;QAAgB,GAC7B;KAEH;AACH","sources":["packages/map-interface/src/context-panel/index.ts"],"sourcesContent":["import { Navbar, Button, Spinner, Card, Text } from \"@blueprintjs/core\";\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./main.module.sass\";\nimport { useMapStatus } from \"@macrostrat/mapbox-react\";\nimport { Spacer } from \"@macrostrat/ui-components\";\nimport type { ReactNode } from \"react\";\n\nconst h = hyper.styled(styles);\n\nconst spinnerElement = h(Spinner, { size: 16 });\n\nexport function LoadingButton({\n  isLoading = false,\n  onClick,\n  active = false,\n  large = true,\n  icon = \"menu\",\n  style,\n}) {\n  return h(Button, {\n    className: \"loading-button\",\n    icon: (isLoading ? spinnerElement : icon) as any,\n    large,\n    minimal: true,\n    onClick,\n    active: active && !isLoading,\n    style,\n  });\n}\n\nexport function MapLoadingButton(props: any) {\n  const isLoading = useMapStatus((s) => s.isLoading);\n  return h(LoadingButton, { ...props, isLoading });\n}\n\ntype AnyChildren = ReactNode;\n\nexport interface FloatingNavbarProps {\n  className?: string;\n  children?: AnyChildren;\n  headerElement?: AnyChildren;\n  title?: AnyChildren;\n  statusElement?: AnyChildren;\n  rightElement?: AnyChildren;\n  height?: number | string;\n  width?: number | string;\n  style?: object;\n}\n\nexport function FloatingNavbar({\n  className,\n  children,\n  headerElement = null,\n  title = null,\n  statusElement = null,\n  rightElement = null,\n  height,\n  width,\n  style = {},\n}: FloatingNavbarProps) {\n  let _rightElement: ReactNode | null = null;\n  if (rightElement != null) {\n    _rightElement = h(\"div.right-element\", rightElement);\n  }\n\n  let _headerElement: ReactNode | null = headerElement;\n  if (title != null && _headerElement == null) {\n    if (typeof title === \"string\") {\n      _headerElement = h(Text, { tagName: \"h2\", ellipsize: true }, title);\n    } else {\n      _headerElement = title;\n    }\n  }\n\n  if (_headerElement != null) {\n    _headerElement = h([_headerElement, h(Spacer)]);\n  }\n\n  return h(\"div.searchbar-holder\", { className, style: { width } }, [\n    h(\"div.navbar-holder\", [\n      h(\n        Navbar,\n        {\n          className: \"searchbar navbar panel\",\n          style: { height, ...style },\n        },\n        [_headerElement, children, _rightElement],\n      ),\n    ]),\n    h.if(statusElement != null)(\n      Card,\n      { className: \"status-tongue\" },\n      statusElement,\n    ),\n  ]);\n}\n"],"names":[],"version":3,"file":"map-interface.0e252a74.js.map"}