@opentripplanner/map-popup 3.1.2 → 3.2.0-alpha.1

package/esm/index.js

@@ -2,10 +2,11 @@ import React, { useCallback } from "react";
 import FromToLocationPicker from "@opentripplanner/from-to-location-picker";
 import coreUtils from "@opentripplanner/core-utils"; // eslint-disable-next-line prettier/prettier
 
-import { FormattedMessage, useIntl } from "react-intl";
+import { FocusTrapWrapper } from "@opentripplanner/building-blocks";
 import { flatten } from "flat";
-import * as S from "./styled";
-import FocusTrapWrapper from "./FocusTrapWrapper"; // Load the default messages.
+import { FormattedMessage, useIntl } from "react-intl";
+import { Styled } from "@opentripplanner/base-map";
+import { ViewStopButton } from "./styled"; // Load the default messages.
 
 import defaultEnglishMessages from "../i18n/en-US.yml";
 import { makeDefaultGetEntityName } from "./util"; // HACK: We should flatten the messages loaded above because
@@ -33,7 +34,7 @@ var generateLocation = function generateLocation(entity, name) {
 
 var StationHubDetails = function StationHubDetails(_ref) {
   var station = _ref.station;
-  return /*#__PURE__*/React.createElement(S.PopupRow, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormattedMessage, {
+  return /*#__PURE__*/React.createElement(Styled.PopupRow, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(FormattedMessage, {
     defaultMessage: defaultMessages["otpUi.MapPopup.availableBikes"],
     description: "Label text for the number of bikes available",
     id: "otpUi.MapPopup.availableBikes",
@@ -53,14 +54,14 @@ var StationHubDetails = function StationHubDetails(_ref) {
 var StopDetails = function StopDetails(_ref2) {
   var id = _ref2.id,
       setViewedStop = _ref2.setViewedStop;
-  return /*#__PURE__*/React.createElement(S.PopupRow, null, /*#__PURE__*/React.createElement("strong", null, /*#__PURE__*/React.createElement(FormattedMessage, {
+  return /*#__PURE__*/React.createElement(Styled.PopupRow, null, /*#__PURE__*/React.createElement("strong", null, /*#__PURE__*/React.createElement(FormattedMessage, {
     defaultMessage: defaultMessages["otpUi.MapPopup.stopId"],
     description: "Displays the stop id",
     id: "otpUi.MapPopup.stopId",
     values: {
       stopId: id
     }
-  })), /*#__PURE__*/React.createElement(S.ViewStopButton, {
+  })), /*#__PURE__*/React.createElement(ViewStopButton, {
     onClick: setViewedStop
   }, /*#__PURE__*/React.createElement(FormattedMessage, {
     defaultMessage: defaultMessages["otpUi.MapPopup.stopViewer"],
@@ -80,9 +81,12 @@ function entityIsStation(entity) {
 export function MapPopup(_ref3) {
   var _entity$networks;
 
-  var configCompanies = _ref3.configCompanies,
+  var _ref3$closePopup = _ref3.closePopup,
+      closePopup = _ref3$closePopup === void 0 ? function () {} : _ref3$closePopup,
+      configCompanies = _ref3.configCompanies,
       entity = _ref3.entity,
       getEntityName = _ref3.getEntityName,
+      getEntityPrefix = _ref3.getEntityPrefix,
       setLocation = _ref3.setLocation,
       setViewedStop = _ref3.setViewedStop;
   var intl = useIntl();
@@ -92,8 +96,13 @@ export function MapPopup(_ref3) {
   var stationNetwork = "networks" in entity && (coreUtils.itinerary.getCompaniesLabelFromNetworks((entity === null || entity === void 0 ? void 0 : entity.networks) || [], configCompanies) || (entity === null || entity === void 0 ? void 0 : (_entity$networks = entity.networks) === null || _entity$networks === void 0 ? void 0 : _entity$networks[0]));
   var bikesAvailablePresent = entityIsStation(entity);
   var entityIsStationHub = bikesAvailablePresent && (entity === null || entity === void 0 ? void 0 : entity.bikesAvailable) !== undefined && !(entity !== null && entity !== void 0 && entity.isFloatingBike);
-  var stopId = !bikesAvailablePresent && (entity === null || entity === void 0 ? void 0 : entity.code) || entity.id.split(":")[1] || entity.id;
-  return /*#__PURE__*/React.createElement(S.MapOverlayPopup, null, /*#__PURE__*/React.createElement(S.PopupTitle, null, /*#__PURE__*/React.createElement(FormattedMessage, {
+  var stopId = !bikesAvailablePresent && (entity === null || entity === void 0 ? void 0 : entity.code) || entity.id.split(":")[1] || entity.id; // Double quotes make the query invalid, so remove them from the id just in case
+
+  var id = "focus-".concat(encodeURIComponent(entity.id).replace(/%/g, ""), "-popup");
+  return /*#__PURE__*/React.createElement(Styled.MapOverlayPopup, null, /*#__PURE__*/React.createElement(FocusTrapWrapper, {
+    closePopup: closePopup,
+    id: id
+  }, /*#__PURE__*/React.createElement(Styled.PopupTitle, null, getEntityPrefix && getEntityPrefix(entity), /*#__PURE__*/React.createElement(FormattedMessage, {
     defaultMessage: defaultMessages["otpUi.MapPopup.popupTitle"],
     description: "Text for title of the popup, contains an optional company name",
     id: "otpUi.MapPopup.popupTitle",
@@ -108,13 +117,11 @@ export function MapPopup(_ref3) {
     setViewedStop: useCallback(function () {
       return setViewedStop(entity);
     }, [entity])
-  }), setLocation && /*#__PURE__*/React.createElement(S.PopupRow, null, /*#__PURE__*/React.createElement(FromToLocationPicker, {
+  }), setLocation && /*#__PURE__*/React.createElement(Styled.PopupRow, null, /*#__PURE__*/React.createElement(FromToLocationPicker, {
     label: true,
     location: generateLocation(entity, name),
     setLocation: setLocation
-  })));
+  }))));
 }
-export default MapPopup; // Rename styled components for export.
-
-export { S as Styled, FocusTrapWrapper };
+export default MapPopup;
 //# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.tsx"],"names":["React","useCallback","FromToLocationPicker","coreUtils","FormattedMessage","useIntl","flatten","S","FocusTrapWrapper","defaultEnglishMessages","makeDefaultGetEntityName","defaultMessages","generateLocation","entity","name","entityLon","lon","entityLat","lat","x","y","StationHubDetails","station","value","bikesAvailable","spacesAvailable","StopDetails","id","setViewedStop","stopId","entityIsStation","MapPopup","configCompanies","getEntityName","setLocation","intl","getNameFunc","stationNetwork","itinerary","getCompaniesLabelFromNetworks","networks","bikesAvailablePresent","entityIsStationHub","undefined","isFloatingBike","code","split","Styled"],"mappings":"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","sourcesContent":["import React, { useCallback } from \"react\";\nimport FromToLocationPicker from \"@opentripplanner/from-to-location-picker\";\nimport coreUtils from \"@opentripplanner/core-utils\";\n\n// eslint-disable-next-line prettier/prettier\nimport type { Company, ConfiguredCompany, Location, Station, Stop, StopEventHandler } from \"@opentripplanner/types\";\n\nimport { FormattedMessage, useIntl } from \"react-intl\";\nimport { flatten } from \"flat\";\nimport * as S from \"./styled\";\nimport FocusTrapWrapper from \"./FocusTrapWrapper\";\n\n// Load the default messages.\nimport defaultEnglishMessages from \"../i18n/en-US.yml\";\nimport { makeDefaultGetEntityName } from \"./util\";\n\n// HACK: We should flatten the messages loaded above because\n// the YAML loaders behave differently between webpack and our version of jest:\n// - the yaml loader for webpack returns a nested object,\n// - the yaml loader for jest returns messages with flattened ids.\nexport const defaultMessages: { [key: string]: string } = flatten(defaultEnglishMessages);\n\nconst generateLocation = (entity: Entity, name: string) => {\n  // @ts-expect-error some of these values may be null, but that's ok\n  const { lon: entityLon, lat: entityLat, x, y } = entity\n\n  const lat = entityLat || y\n  const lon = entityLon || x\n  if (!lat || !lon) return null\n\n  return { lat, lon, name };\n}\n\nconst StationHubDetails = ({ station }: { station: Station }) => {\n  return (\n    <S.PopupRow>\n      <div>\n        <FormattedMessage\n          defaultMessage={\n            defaultMessages[\"otpUi.MapPopup.availableBikes\"]\n          }\n          description=\"Label text for the number of bikes available\"\n          id=\"otpUi.MapPopup.availableBikes\"\n          values={{ value: station.bikesAvailable }}\n        />\n      </div>\n      <div>\n        <FormattedMessage\n          defaultMessage={\n            defaultMessages[\"otpUi.MapPopup.availableDocks\"]\n          }\n          description=\"Label text for the number of docks available\"\n          id=\"otpUi.MapPopup.availableDocks\"\n          values={{ value: station.spacesAvailable }}\n        />\n      </div>\n    </S.PopupRow>\n  )\n}\n\nconst StopDetails = ({ id, setViewedStop }: { id: string, setViewedStop: () => void; }) => {\n  return (\n    <S.PopupRow>\n      <strong>\n        <FormattedMessage\n          defaultMessage={defaultMessages[\"otpUi.MapPopup.stopId\"]}\n          description=\"Displays the stop id\"\n          id=\"otpUi.MapPopup.stopId\"\n          values={{\n            stopId: id\n          }}\n        />\n      </strong>\n      <S.ViewStopButton onClick={setViewedStop}>\n        <FormattedMessage\n          defaultMessage={defaultMessages[\"otpUi.MapPopup.stopViewer\"]}\n          description=\"Text for link that opens the stop viewer\"\n          id=\"otpUi.MapPopup.stopViewer\"\n        />\n      </S.ViewStopButton>\n    </S.PopupRow>\n  )\n}\n\ntype Entity = Stop | Station\ntype Props = {\n  configCompanies?: ConfiguredCompany[];\n  entity: Entity\n  getEntityName?: (entity: Entity, configCompanies: Company[],) => string;\n  setLocation?: ({ location, locationType }: { location: Location, locationType: string }) => void;\n  setViewedStop?: StopEventHandler;\n};\n\nfunction entityIsStation(entity: Entity): entity is Station {\n  return \"bikesAvailable\" in entity\n}\n\n/**\n * Renders a map popup for a stop, scooter, or shared bike\n */\nexport function MapPopup({ configCompanies, entity, getEntityName, setLocation, setViewedStop }: Props): JSX.Element {\n  const intl = useIntl()\n  if (!entity) return <></>\n\n  const getNameFunc = getEntityName || makeDefaultGetEntityName(intl, defaultMessages);\n  const name = getNameFunc(entity, configCompanies);\n\n  const stationNetwork = \"networks\" in entity && (coreUtils.itinerary.getCompaniesLabelFromNetworks(entity?.networks || [], configCompanies) || entity?.networks?.[0]);\n\n  const bikesAvailablePresent = entityIsStation(entity)\n  const entityIsStationHub = bikesAvailablePresent && entity?.bikesAvailable !== undefined && !entity?.isFloatingBike;\n  const stopId = !bikesAvailablePresent && entity?.code || entity.id.split(\":\")[1] || entity.id\n\n  return (\n    <S.MapOverlayPopup>\n      <S.PopupTitle>\n        <FormattedMessage\n          defaultMessage={defaultMessages[\"otpUi.MapPopup.popupTitle\"]}\n          description=\"Text for title of the popup, contains an optional company name\"\n          id=\"otpUi.MapPopup.popupTitle\"\n          values={{ name, stationNetwork }}\n        />\n      </S.PopupTitle>\n      {/* render dock info if it is available */}\n      {entityIsStationHub && <StationHubDetails station={entity} />}\n\n      {/* render stop viewer link if available */}\n      {setViewedStop && !bikesAvailablePresent && (\n        <StopDetails\n          id={stopId}\n          setViewedStop={useCallback(() => setViewedStop(entity), [entity])}\n        />\n      )}\n\n      {/* The \"Set as [from/to]\" ButtonGroup */}\n      {setLocation && (\n        <S.PopupRow>\n          <FromToLocationPicker\n            label\n            location={generateLocation(entity, name)}\n            setLocation={setLocation}\n          />\n        </S.PopupRow>\n      )}\n    </S.MapOverlayPopup>\n  );\n}\n\nexport default MapPopup;\n\n// Rename styled components for export.\nexport { S as Styled, FocusTrapWrapper };"],"file":"index.js"}
+{"version":3,"sources":["../src/index.tsx"],"names":["React","useCallback","FromToLocationPicker","coreUtils","FocusTrapWrapper","flatten","FormattedMessage","useIntl","Styled","ViewStopButton","defaultEnglishMessages","makeDefaultGetEntityName","defaultMessages","generateLocation","entity","name","entityLon","lon","entityLat","lat","x","y","StationHubDetails","station","value","bikesAvailable","spacesAvailable","StopDetails","id","setViewedStop","stopId","entityIsStation","MapPopup","closePopup","configCompanies","getEntityName","getEntityPrefix","setLocation","intl","getNameFunc","stationNetwork","itinerary","getCompaniesLabelFromNetworks","networks","bikesAvailablePresent","entityIsStationHub","undefined","isFloatingBike","code","split","encodeURIComponent","replace"],"mappings":"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","sourcesContent":["import React, { useCallback } from \"react\";\nimport FromToLocationPicker from \"@opentripplanner/from-to-location-picker\";\nimport coreUtils from \"@opentripplanner/core-utils\";\n\n// eslint-disable-next-line prettier/prettier\nimport type { Company, ConfiguredCompany, Location, Station, Stop, StopEventHandler } from \"@opentripplanner/types\";\n\nimport { FocusTrapWrapper } from \"@opentripplanner/building-blocks\";\nimport { flatten } from \"flat\";\nimport { FormattedMessage, useIntl } from \"react-intl\";\nimport { Styled } from \"@opentripplanner/base-map\";\n\nimport { ViewStopButton } from \"./styled\";\n\n// Load the default messages.\nimport defaultEnglishMessages from \"../i18n/en-US.yml\";\nimport { makeDefaultGetEntityName } from \"./util\";\n\n// HACK: We should flatten the messages loaded above because\n// the YAML loaders behave differently between webpack and our version of jest:\n// - the yaml loader for webpack returns a nested object,\n// - the yaml loader for jest returns messages with flattened ids.\nexport const defaultMessages: { [key: string]: string } = flatten(defaultEnglishMessages);\n\nconst generateLocation = (entity: Entity, name: string) => {\n  // @ts-expect-error some of these values may be null, but that's ok\n  const { lon: entityLon, lat: entityLat, x, y } = entity\n\n  const lat = entityLat || y\n  const lon = entityLon || x\n  if (!lat || !lon) return null\n\n  return { lat, lon, name };\n}\n\nconst StationHubDetails = ({ station }: { station: Station }) => {\n  return (\n    <Styled.PopupRow>\n      <div>\n        <FormattedMessage\n          defaultMessage={\n            defaultMessages[\"otpUi.MapPopup.availableBikes\"]\n          }\n          description=\"Label text for the number of bikes available\"\n          id=\"otpUi.MapPopup.availableBikes\"\n          values={{ value: station.bikesAvailable }}\n        />\n      </div>\n      <div>\n        <FormattedMessage\n          defaultMessage={\n            defaultMessages[\"otpUi.MapPopup.availableDocks\"]\n          }\n          description=\"Label text for the number of docks available\"\n          id=\"otpUi.MapPopup.availableDocks\"\n          values={{ value: station.spacesAvailable }}\n        />\n      </div>\n    </Styled.PopupRow>\n  )\n}\n\nconst StopDetails = ({ id, setViewedStop }: { id: string, setViewedStop: () => void; }) => {\n  return (\n    <Styled.PopupRow>\n      <strong>\n        <FormattedMessage\n          defaultMessage={defaultMessages[\"otpUi.MapPopup.stopId\"]}\n          description=\"Displays the stop id\"\n          id=\"otpUi.MapPopup.stopId\"\n          values={{\n            stopId: id\n          }}\n        />\n      </strong>\n      <ViewStopButton onClick={setViewedStop}>\n        <FormattedMessage\n          defaultMessage={defaultMessages[\"otpUi.MapPopup.stopViewer\"]}\n          description=\"Text for link that opens the stop viewer\"\n          id=\"otpUi.MapPopup.stopViewer\"\n        />\n      </ViewStopButton>\n    </Styled.PopupRow>\n  )\n}\n\ntype Entity = Stop | Station\ntype Props = {\n  closePopup?: (arg?: any) => void\n  configCompanies?: ConfiguredCompany[];\n  entity: Entity\n  getEntityName?: (entity: Entity, configCompanies: Company[],) => string;\n  getEntityPrefix?: (entity: Entity) => JSX.Element\n  setLocation?: ({ location, locationType }: { location: Location, locationType: string }) => void;\n  setViewedStop?: StopEventHandler;\n};\n\nfunction entityIsStation(entity: Entity): entity is Station {\n  return \"bikesAvailable\" in entity\n}\n\n/**\n * Renders a map popup for a stop, scooter, or shared bike\n */\nexport function MapPopup({ closePopup = () => {}, configCompanies, entity, getEntityName, getEntityPrefix, setLocation, setViewedStop }: Props): JSX.Element {\n\n  const intl = useIntl()\n  if (!entity) return <></>\n\n  const getNameFunc = getEntityName || makeDefaultGetEntityName(intl, defaultMessages);\n  const name = getNameFunc(entity, configCompanies);\n\n  const stationNetwork = \"networks\" in entity && (coreUtils.itinerary.getCompaniesLabelFromNetworks(entity?.networks || [], configCompanies) || entity?.networks?.[0]);\n\n  const bikesAvailablePresent = entityIsStation(entity)\n  const entityIsStationHub = bikesAvailablePresent && entity?.bikesAvailable !== undefined && !entity?.isFloatingBike;\n  const stopId = !bikesAvailablePresent && entity?.code || entity.id.split(\":\")[1] || entity.id\n\n  // Double quotes make the query invalid, so remove them from the id just in case\n  const id = `focus-${encodeURIComponent(entity.id).replace(/%/g, \"\")}-popup`\n\n  return (\n    <Styled.MapOverlayPopup>\n      <FocusTrapWrapper closePopup={closePopup} id={id}>\n      <Styled.PopupTitle>\n        {getEntityPrefix && getEntityPrefix(entity)}\n        <FormattedMessage\n          defaultMessage={defaultMessages[\"otpUi.MapPopup.popupTitle\"]}\n          description=\"Text for title of the popup, contains an optional company name\"\n          id=\"otpUi.MapPopup.popupTitle\"\n          values={{ name, stationNetwork }}\n        />\n      </Styled.PopupTitle>\n      {/* render dock info if it is available */}\n      {entityIsStationHub && <StationHubDetails station={entity} />}\n\n      {/* render stop viewer link if available */}\n      {setViewedStop && !bikesAvailablePresent && (\n        <StopDetails\n          id={stopId}\n          setViewedStop={useCallback(() => setViewedStop(entity), [entity])}\n        />\n      )}\n\n      {/* The \"Set as [from/to]\" ButtonGroup */}\n      {setLocation && (\n        <Styled.PopupRow>\n          <FromToLocationPicker\n            label\n            location={generateLocation(entity, name)}\n            setLocation={setLocation}\n          />\n        </Styled.PopupRow>\n      )}\n      </FocusTrapWrapper>\n      \n    </Styled.MapOverlayPopup>\n  );\n}\n\nexport default MapPopup;"],"file":"index.js"}

package/esm/styled.js

@@ -1,29 +1,8 @@
 import styled from "styled-components";
-import { Popup as MapGlPopup } from "react-map-gl";
 /* eslint-disable-next-line import/prefer-default-export */
 
 export var ViewStopButton = styled.button.withConfig({
   displayName: "styled__ViewStopButton",
   componentId: "sc-12v7ov3-0"
 })(["background:none;border-bottom:none;border-left:1px solid #000;border-right:none;border-top:none;color:#008;font-family:inherit;margin-left:5px;padding-top:0;"]);
-/**
- * Adds a box shadow and tweaks border radius to make popups easier to read.
- */
-
-export var Popup = styled(MapGlPopup).withConfig({
-  displayName: "styled__Popup",
-  componentId: "sc-12v7ov3-1"
-})(["& > .maplibregl-popup-content,& > .mapboxgl-popup-content{border-radius:10px;box-shadow:0 3px 14px 4px rgb(0 0 0 / 20%);}"]);
-export var MapOverlayPopup = styled.div.withConfig({
-  displayName: "styled__MapOverlayPopup",
-  componentId: "sc-12v7ov3-2"
-})(["font-size:12px;line-height:1.5;min-width:250px;"]);
-export var PopupRow = styled.p.withConfig({
-  displayName: "styled__PopupRow",
-  componentId: "sc-12v7ov3-3"
-})(["margin-top:6px;"]);
-export var PopupTitle = styled.header.withConfig({
-  displayName: "styled__PopupTitle",
-  componentId: "sc-12v7ov3-4"
-})(["font-size:18px;font-weight:500;margin-bottom:6px;"]);
 //# sourceMappingURL=styled.js.map

package/esm/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styled.ts"],"names":["styled","Popup","MapGlPopup","ViewStopButton","button","MapOverlayPopup","div","PopupRow","p","PopupTitle","header"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA,SAASC,KAAK,IAAIC,UAAlB,QAAoC,cAApC;AAEA;;AACA,OAAO,IAAMC,cAAc,GAAGH,MAAM,CAACI,MAAV;AAAA;AAAA;AAAA,qKAApB;AAYP;AACA;AACA;;AACA,OAAO,IAAMH,KAAK,GAAGD,MAAM,CAACE,UAAD,CAAT;AAAA;AAAA;AAAA,iIAAX;AAQP,OAAO,IAAMG,eAAe,GAAGL,MAAM,CAACM,GAAV;AAAA;AAAA;AAAA,uDAArB;AAMP,OAAO,IAAMC,QAAQ,GAAGP,MAAM,CAACQ,CAAV;AAAA;AAAA;AAAA,uBAAd;AAIP,OAAO,IAAMC,UAAU,GAAGT,MAAM,CAACU,MAAV;AAAA;AAAA;AAAA,yDAAhB","sourcesContent":["import styled from \"styled-components\";\n\nimport { Popup as MapGlPopup } from \"react-map-gl\";\n\n/* eslint-disable-next-line import/prefer-default-export */\nexport const ViewStopButton = styled.button`\n  background: none;\n  border-bottom: none;\n  border-left: 1px solid #000;\n  border-right: none;\n  border-top: none;\n  color: #008;\n  font-family: inherit;\n  margin-left: 5px;\n  padding-top: 0;\n`;\n\n/**\n * Adds a box shadow and tweaks border radius to make popups easier to read.\n */\nexport const Popup = styled(MapGlPopup)`\n  & > .maplibregl-popup-content,\n  & > .mapboxgl-popup-content {\n    border-radius: 10px;\n    box-shadow: 0 3px 14px 4px rgb(0 0 0 / 20%);\n  }\n`;\n\nexport const MapOverlayPopup = styled.div`\n  font-size: 12px;\n  line-height: 1.5;\n  min-width: 250px;\n`;\n\nexport const PopupRow = styled.p`\n  margin-top: 6px;\n`;\n\nexport const PopupTitle = styled.header`\n  font-size: 18px;\n  font-weight: 500;\n  margin-bottom: 6px;\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../src/styled.ts"],"names":["styled","ViewStopButton","button"],"mappings":"AAAA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA;;AACA,OAAO,IAAMC,cAAc,GAAGD,MAAM,CAACE,MAAV;AAAA;AAAA;AAAA,qKAApB","sourcesContent":["import styled from \"styled-components\";\n\n/* eslint-disable-next-line import/prefer-default-export */\nexport const ViewStopButton = styled.button`\n  background: none;\n  border-bottom: none;\n  border-left: 1px solid #000;\n  border-right: none;\n  border-top: none;\n  color: #008;\n  font-family: inherit;\n  margin-left: 5px;\n  padding-top: 0;\n`;\n"],"file":"styled.js"}

package/lib/index.d.ts

@@ -1,15 +1,15 @@
 /// <reference types="react" />
 import type { Company, ConfiguredCompany, Location, Station, Stop, StopEventHandler } from "@opentripplanner/types";
-import * as S from "./styled";
-import FocusTrapWrapper from "./FocusTrapWrapper";
 export declare const defaultMessages: {
     [key: string]: string;
 };
 declare type Entity = Stop | Station;
 declare type Props = {
+    closePopup?: (arg?: any) => void;
     configCompanies?: ConfiguredCompany[];
     entity: Entity;
     getEntityName?: (entity: Entity, configCompanies: Company[]) => string;
+    getEntityPrefix?: (entity: Entity) => JSX.Element;
     setLocation?: ({ location, locationType }: {
         location: Location;
         locationType: string;
@@ -19,7 +19,6 @@ declare type Props = {
 /**
  * Renders a map popup for a stop, scooter, or shared bike
  */
-export declare function MapPopup({ configCompanies, entity, getEntityName, setLocation, setViewedStop }: Props): JSX.Element;
+export declare function MapPopup({ closePopup, configCompanies, entity, getEntityName, getEntityPrefix, setLocation, setViewedStop }: Props): JSX.Element;
 export default MapPopup;
-export { S as Styled, FocusTrapWrapper };
 //# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAIpH,OAAO,KAAK,CAAC,MAAM,UAAU,CAAC;AAC9B,OAAO,gBAAgB,MAAM,oBAAoB,CAAC;AAUlD,eAAO,MAAM,eAAe,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAoC,CAAC;AAgE1F,aAAK,MAAM,GAAG,IAAI,GAAG,OAAO,CAAA;AAC5B,aAAK,KAAK,GAAG;IACX,eAAe,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,KAAM,MAAM,CAAC;IACxE,WAAW,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE;QAAE,QAAQ,EAAE,QAAQ,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjG,aAAa,CAAC,EAAE,gBAAgB,CAAC;CAClC,CAAC;AAMF;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,eAAe,EAAE,MAAM,EAAE,aAAa,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CA8CnH;AAED,eAAe,QAAQ,CAAC;AAGxB,OAAO,EAAE,CAAC,IAAI,MAAM,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";AAKA,OAAO,KAAK,EAAE,OAAO,EAAE,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAiBpH,eAAO,MAAM,eAAe,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAA;CAAoC,CAAC;AAgE1F,aAAK,MAAM,GAAG,IAAI,GAAG,OAAO,CAAA;AAC5B,aAAK,KAAK,GAAG;IACX,UAAU,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC,eAAe,CAAC,EAAE,iBAAiB,EAAE,CAAC;IACtC,MAAM,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,eAAe,EAAE,OAAO,EAAE,KAAM,MAAM,CAAC;IACxE,eAAe,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,GAAG,CAAC,OAAO,CAAA;IACjD,WAAW,CAAC,EAAE,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE;QAAE,QAAQ,EAAE,QAAQ,CAAC;QAAC,YAAY,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IACjG,aAAa,CAAC,EAAE,gBAAgB,CAAC;CAClC,CAAC;AAMF;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EAAE,UAAqB,EAAE,eAAe,EAAE,MAAM,EAAE,aAAa,EAAE,eAAe,EAAE,WAAW,EAAE,aAAa,EAAE,EAAE,KAAK,GAAG,GAAG,CAAC,OAAO,CAsD3J;AAED,eAAe,QAAQ,CAAC"}

package/lib/index.js

@@ -6,13 +6,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MapPopup = MapPopup;
-Object.defineProperty(exports, "FocusTrapWrapper", {
-  enumerable: true,
-  get: function () {
-    return _FocusTrapWrapper.default;
-  }
-});
-exports.Styled = exports.default = exports.defaultMessages = void 0;
+exports.default = exports.defaultMessages = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -20,15 +14,15 @@ var _fromToLocationPicker = _interopRequireDefault(require("@opentripplanner/fro
 
 var _coreUtils = _interopRequireDefault(require("@opentripplanner/core-utils"));
 
-var _reactIntl = require("react-intl");
+var _buildingBlocks = require("@opentripplanner/building-blocks");
 
 var _flat = require("flat");
 
-var S = _interopRequireWildcard(require("./styled"));
+var _reactIntl = require("react-intl");
 
-exports.Styled = S;
+var _baseMap = require("@opentripplanner/base-map");
 
-var _FocusTrapWrapper = _interopRequireDefault(require("./FocusTrapWrapper"));
+var _styled = require("./styled");
 
 var _enUS = _interopRequireDefault(require("../i18n/en-US.yml"));
 
@@ -67,7 +61,7 @@ const generateLocation = (entity, name) => {
 const StationHubDetails = ({
   station
 }) => {
-  return /*#__PURE__*/_react.default.createElement(S.PopupRow, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+  return /*#__PURE__*/_react.default.createElement(_baseMap.Styled.PopupRow, null, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
     defaultMessage: defaultMessages["otpUi.MapPopup.availableBikes"],
     description: "Label text for the number of bikes available",
     id: "otpUi.MapPopup.availableBikes",
@@ -88,14 +82,14 @@ const StopDetails = ({
   id,
   setViewedStop
 }) => {
-  return /*#__PURE__*/_react.default.createElement(S.PopupRow, null, /*#__PURE__*/_react.default.createElement("strong", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+  return /*#__PURE__*/_react.default.createElement(_baseMap.Styled.PopupRow, null, /*#__PURE__*/_react.default.createElement("strong", null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
     defaultMessage: defaultMessages["otpUi.MapPopup.stopId"],
     description: "Displays the stop id",
     id: "otpUi.MapPopup.stopId",
     values: {
       stopId: id
     }
-  })), /*#__PURE__*/_react.default.createElement(S.ViewStopButton, {
+  })), /*#__PURE__*/_react.default.createElement(_styled.ViewStopButton, {
     onClick: setViewedStop
   }, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
     defaultMessage: defaultMessages["otpUi.MapPopup.stopViewer"],
@@ -113,9 +107,11 @@ function entityIsStation(entity) {
 
 
 function MapPopup({
+  closePopup = () => {},
   configCompanies,
   entity,
   getEntityName,
+  getEntityPrefix,
   setLocation,
   setViewedStop
 }) {
@@ -128,8 +124,13 @@ function MapPopup({
   const stationNetwork = "networks" in entity && (_coreUtils.default.itinerary.getCompaniesLabelFromNetworks((entity === null || entity === void 0 ? void 0 : entity.networks) || [], configCompanies) || (entity === null || entity === void 0 ? void 0 : (_entity$networks = entity.networks) === null || _entity$networks === void 0 ? void 0 : _entity$networks[0]));
   const bikesAvailablePresent = entityIsStation(entity);
   const entityIsStationHub = bikesAvailablePresent && (entity === null || entity === void 0 ? void 0 : entity.bikesAvailable) !== undefined && !(entity !== null && entity !== void 0 && entity.isFloatingBike);
-  const stopId = !bikesAvailablePresent && (entity === null || entity === void 0 ? void 0 : entity.code) || entity.id.split(":")[1] || entity.id;
-  return /*#__PURE__*/_react.default.createElement(S.MapOverlayPopup, null, /*#__PURE__*/_react.default.createElement(S.PopupTitle, null, /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
+  const stopId = !bikesAvailablePresent && (entity === null || entity === void 0 ? void 0 : entity.code) || entity.id.split(":")[1] || entity.id; // Double quotes make the query invalid, so remove them from the id just in case
+
+  const id = `focus-${encodeURIComponent(entity.id).replace(/%/g, "")}-popup`;
+  return /*#__PURE__*/_react.default.createElement(_baseMap.Styled.MapOverlayPopup, null, /*#__PURE__*/_react.default.createElement(_buildingBlocks.FocusTrapWrapper, {
+    closePopup: closePopup,
+    id: id
+  }, /*#__PURE__*/_react.default.createElement(_baseMap.Styled.PopupTitle, null, getEntityPrefix && getEntityPrefix(entity), /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, {
     defaultMessage: defaultMessages["otpUi.MapPopup.popupTitle"],
     description: "Text for title of the popup, contains an optional company name",
     id: "otpUi.MapPopup.popupTitle",
@@ -142,14 +143,13 @@ function MapPopup({
   }), setViewedStop && !bikesAvailablePresent && /*#__PURE__*/_react.default.createElement(StopDetails, {
     id: stopId,
     setViewedStop: (0, _react.useCallback)(() => setViewedStop(entity), [entity])
-  }), setLocation && /*#__PURE__*/_react.default.createElement(S.PopupRow, null, /*#__PURE__*/_react.default.createElement(_fromToLocationPicker.default, {
+  }), setLocation && /*#__PURE__*/_react.default.createElement(_baseMap.Styled.PopupRow, null, /*#__PURE__*/_react.default.createElement(_fromToLocationPicker.default, {
     label: true,
     location: generateLocation(entity, name),
     setLocation: setLocation
-  })));
+  }))));
 }
 
-var _default = MapPopup; // Rename styled components for export.
-
+var _default = MapPopup;
 exports.default = _default;
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.tsx"],"names":["defaultMessages","defaultEnglishMessages","generateLocation","entity","name","lon","entityLon","lat","entityLat","x","y","StationHubDetails","station","value","bikesAvailable","spacesAvailable","StopDetails","id","setViewedStop","stopId","entityIsStation","MapPopup","configCompanies","getEntityName","setLocation","intl","getNameFunc","stationNetwork","coreUtils","itinerary","getCompaniesLabelFromNetworks","networks","bikesAvailablePresent","entityIsStationHub","undefined","isFloatingBike","code","split"],"mappings":"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","sourcesContent":["import React, { useCallback } from \"react\";\nimport FromToLocationPicker from \"@opentripplanner/from-to-location-picker\";\nimport coreUtils from \"@opentripplanner/core-utils\";\n\n// eslint-disable-next-line prettier/prettier\nimport type { Company, ConfiguredCompany, Location, Station, Stop, StopEventHandler } from \"@opentripplanner/types\";\n\nimport { FormattedMessage, useIntl } from \"react-intl\";\nimport { flatten } from \"flat\";\nimport * as S from \"./styled\";\nimport FocusTrapWrapper from \"./FocusTrapWrapper\";\n\n// Load the default messages.\nimport defaultEnglishMessages from \"../i18n/en-US.yml\";\nimport { makeDefaultGetEntityName } from \"./util\";\n\n// HACK: We should flatten the messages loaded above because\n// the YAML loaders behave differently between webpack and our version of jest:\n// - the yaml loader for webpack returns a nested object,\n// - the yaml loader for jest returns messages with flattened ids.\nexport const defaultMessages: { [key: string]: string } = flatten(defaultEnglishMessages);\n\nconst generateLocation = (entity: Entity, name: string) => {\n  // @ts-expect-error some of these values may be null, but that's ok\n  const { lon: entityLon, lat: entityLat, x, y } = entity\n\n  const lat = entityLat || y\n  const lon = entityLon || x\n  if (!lat || !lon) return null\n\n  return { lat, lon, name };\n}\n\nconst StationHubDetails = ({ station }: { station: Station }) => {\n  return (\n    <S.PopupRow>\n      <div>\n        <FormattedMessage\n          defaultMessage={\n            defaultMessages[\"otpUi.MapPopup.availableBikes\"]\n          }\n          description=\"Label text for the number of bikes available\"\n          id=\"otpUi.MapPopup.availableBikes\"\n          values={{ value: station.bikesAvailable }}\n        />\n      </div>\n      <div>\n        <FormattedMessage\n          defaultMessage={\n            defaultMessages[\"otpUi.MapPopup.availableDocks\"]\n          }\n          description=\"Label text for the number of docks available\"\n          id=\"otpUi.MapPopup.availableDocks\"\n          values={{ value: station.spacesAvailable }}\n        />\n      </div>\n    </S.PopupRow>\n  )\n}\n\nconst StopDetails = ({ id, setViewedStop }: { id: string, setViewedStop: () => void; }) => {\n  return (\n    <S.PopupRow>\n      <strong>\n        <FormattedMessage\n          defaultMessage={defaultMessages[\"otpUi.MapPopup.stopId\"]}\n          description=\"Displays the stop id\"\n          id=\"otpUi.MapPopup.stopId\"\n          values={{\n            stopId: id\n          }}\n        />\n      </strong>\n      <S.ViewStopButton onClick={setViewedStop}>\n        <FormattedMessage\n          defaultMessage={defaultMessages[\"otpUi.MapPopup.stopViewer\"]}\n          description=\"Text for link that opens the stop viewer\"\n          id=\"otpUi.MapPopup.stopViewer\"\n        />\n      </S.ViewStopButton>\n    </S.PopupRow>\n  )\n}\n\ntype Entity = Stop | Station\ntype Props = {\n  configCompanies?: ConfiguredCompany[];\n  entity: Entity\n  getEntityName?: (entity: Entity, configCompanies: Company[],) => string;\n  setLocation?: ({ location, locationType }: { location: Location, locationType: string }) => void;\n  setViewedStop?: StopEventHandler;\n};\n\nfunction entityIsStation(entity: Entity): entity is Station {\n  return \"bikesAvailable\" in entity\n}\n\n/**\n * Renders a map popup for a stop, scooter, or shared bike\n */\nexport function MapPopup({ configCompanies, entity, getEntityName, setLocation, setViewedStop }: Props): JSX.Element {\n  const intl = useIntl()\n  if (!entity) return <></>\n\n  const getNameFunc = getEntityName || makeDefaultGetEntityName(intl, defaultMessages);\n  const name = getNameFunc(entity, configCompanies);\n\n  const stationNetwork = \"networks\" in entity && (coreUtils.itinerary.getCompaniesLabelFromNetworks(entity?.networks || [], configCompanies) || entity?.networks?.[0]);\n\n  const bikesAvailablePresent = entityIsStation(entity)\n  const entityIsStationHub = bikesAvailablePresent && entity?.bikesAvailable !== undefined && !entity?.isFloatingBike;\n  const stopId = !bikesAvailablePresent && entity?.code || entity.id.split(\":\")[1] || entity.id\n\n  return (\n    <S.MapOverlayPopup>\n      <S.PopupTitle>\n        <FormattedMessage\n          defaultMessage={defaultMessages[\"otpUi.MapPopup.popupTitle\"]}\n          description=\"Text for title of the popup, contains an optional company name\"\n          id=\"otpUi.MapPopup.popupTitle\"\n          values={{ name, stationNetwork }}\n        />\n      </S.PopupTitle>\n      {/* render dock info if it is available */}\n      {entityIsStationHub && <StationHubDetails station={entity} />}\n\n      {/* render stop viewer link if available */}\n      {setViewedStop && !bikesAvailablePresent && (\n        <StopDetails\n          id={stopId}\n          setViewedStop={useCallback(() => setViewedStop(entity), [entity])}\n        />\n      )}\n\n      {/* The \"Set as [from/to]\" ButtonGroup */}\n      {setLocation && (\n        <S.PopupRow>\n          <FromToLocationPicker\n            label\n            location={generateLocation(entity, name)}\n            setLocation={setLocation}\n          />\n        </S.PopupRow>\n      )}\n    </S.MapOverlayPopup>\n  );\n}\n\nexport default MapPopup;\n\n// Rename styled components for export.\nexport { S as Styled, FocusTrapWrapper };"],"file":"index.js"}
+{"version":3,"sources":["../src/index.tsx"],"names":["defaultMessages","defaultEnglishMessages","generateLocation","entity","name","lon","entityLon","lat","entityLat","x","y","StationHubDetails","station","value","bikesAvailable","spacesAvailable","StopDetails","id","setViewedStop","stopId","entityIsStation","MapPopup","closePopup","configCompanies","getEntityName","getEntityPrefix","setLocation","intl","getNameFunc","stationNetwork","coreUtils","itinerary","getCompaniesLabelFromNetworks","networks","bikesAvailablePresent","entityIsStationHub","undefined","isFloatingBike","code","split","encodeURIComponent","replace"],"mappings":"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","sourcesContent":["import React, { useCallback } from \"react\";\nimport FromToLocationPicker from \"@opentripplanner/from-to-location-picker\";\nimport coreUtils from \"@opentripplanner/core-utils\";\n\n// eslint-disable-next-line prettier/prettier\nimport type { Company, ConfiguredCompany, Location, Station, Stop, StopEventHandler } from \"@opentripplanner/types\";\n\nimport { FocusTrapWrapper } from \"@opentripplanner/building-blocks\";\nimport { flatten } from \"flat\";\nimport { FormattedMessage, useIntl } from \"react-intl\";\nimport { Styled } from \"@opentripplanner/base-map\";\n\nimport { ViewStopButton } from \"./styled\";\n\n// Load the default messages.\nimport defaultEnglishMessages from \"../i18n/en-US.yml\";\nimport { makeDefaultGetEntityName } from \"./util\";\n\n// HACK: We should flatten the messages loaded above because\n// the YAML loaders behave differently between webpack and our version of jest:\n// - the yaml loader for webpack returns a nested object,\n// - the yaml loader for jest returns messages with flattened ids.\nexport const defaultMessages: { [key: string]: string } = flatten(defaultEnglishMessages);\n\nconst generateLocation = (entity: Entity, name: string) => {\n  // @ts-expect-error some of these values may be null, but that's ok\n  const { lon: entityLon, lat: entityLat, x, y } = entity\n\n  const lat = entityLat || y\n  const lon = entityLon || x\n  if (!lat || !lon) return null\n\n  return { lat, lon, name };\n}\n\nconst StationHubDetails = ({ station }: { station: Station }) => {\n  return (\n    <Styled.PopupRow>\n      <div>\n        <FormattedMessage\n          defaultMessage={\n            defaultMessages[\"otpUi.MapPopup.availableBikes\"]\n          }\n          description=\"Label text for the number of bikes available\"\n          id=\"otpUi.MapPopup.availableBikes\"\n          values={{ value: station.bikesAvailable }}\n        />\n      </div>\n      <div>\n        <FormattedMessage\n          defaultMessage={\n            defaultMessages[\"otpUi.MapPopup.availableDocks\"]\n          }\n          description=\"Label text for the number of docks available\"\n          id=\"otpUi.MapPopup.availableDocks\"\n          values={{ value: station.spacesAvailable }}\n        />\n      </div>\n    </Styled.PopupRow>\n  )\n}\n\nconst StopDetails = ({ id, setViewedStop }: { id: string, setViewedStop: () => void; }) => {\n  return (\n    <Styled.PopupRow>\n      <strong>\n        <FormattedMessage\n          defaultMessage={defaultMessages[\"otpUi.MapPopup.stopId\"]}\n          description=\"Displays the stop id\"\n          id=\"otpUi.MapPopup.stopId\"\n          values={{\n            stopId: id\n          }}\n        />\n      </strong>\n      <ViewStopButton onClick={setViewedStop}>\n        <FormattedMessage\n          defaultMessage={defaultMessages[\"otpUi.MapPopup.stopViewer\"]}\n          description=\"Text for link that opens the stop viewer\"\n          id=\"otpUi.MapPopup.stopViewer\"\n        />\n      </ViewStopButton>\n    </Styled.PopupRow>\n  )\n}\n\ntype Entity = Stop | Station\ntype Props = {\n  closePopup?: (arg?: any) => void\n  configCompanies?: ConfiguredCompany[];\n  entity: Entity\n  getEntityName?: (entity: Entity, configCompanies: Company[],) => string;\n  getEntityPrefix?: (entity: Entity) => JSX.Element\n  setLocation?: ({ location, locationType }: { location: Location, locationType: string }) => void;\n  setViewedStop?: StopEventHandler;\n};\n\nfunction entityIsStation(entity: Entity): entity is Station {\n  return \"bikesAvailable\" in entity\n}\n\n/**\n * Renders a map popup for a stop, scooter, or shared bike\n */\nexport function MapPopup({ closePopup = () => {}, configCompanies, entity, getEntityName, getEntityPrefix, setLocation, setViewedStop }: Props): JSX.Element {\n\n  const intl = useIntl()\n  if (!entity) return <></>\n\n  const getNameFunc = getEntityName || makeDefaultGetEntityName(intl, defaultMessages);\n  const name = getNameFunc(entity, configCompanies);\n\n  const stationNetwork = \"networks\" in entity && (coreUtils.itinerary.getCompaniesLabelFromNetworks(entity?.networks || [], configCompanies) || entity?.networks?.[0]);\n\n  const bikesAvailablePresent = entityIsStation(entity)\n  const entityIsStationHub = bikesAvailablePresent && entity?.bikesAvailable !== undefined && !entity?.isFloatingBike;\n  const stopId = !bikesAvailablePresent && entity?.code || entity.id.split(\":\")[1] || entity.id\n\n  // Double quotes make the query invalid, so remove them from the id just in case\n  const id = `focus-${encodeURIComponent(entity.id).replace(/%/g, \"\")}-popup`\n\n  return (\n    <Styled.MapOverlayPopup>\n      <FocusTrapWrapper closePopup={closePopup} id={id}>\n      <Styled.PopupTitle>\n        {getEntityPrefix && getEntityPrefix(entity)}\n        <FormattedMessage\n          defaultMessage={defaultMessages[\"otpUi.MapPopup.popupTitle\"]}\n          description=\"Text for title of the popup, contains an optional company name\"\n          id=\"otpUi.MapPopup.popupTitle\"\n          values={{ name, stationNetwork }}\n        />\n      </Styled.PopupTitle>\n      {/* render dock info if it is available */}\n      {entityIsStationHub && <StationHubDetails station={entity} />}\n\n      {/* render stop viewer link if available */}\n      {setViewedStop && !bikesAvailablePresent && (\n        <StopDetails\n          id={stopId}\n          setViewedStop={useCallback(() => setViewedStop(entity), [entity])}\n        />\n      )}\n\n      {/* The \"Set as [from/to]\" ButtonGroup */}\n      {setLocation && (\n        <Styled.PopupRow>\n          <FromToLocationPicker\n            label\n            location={generateLocation(entity, name)}\n            setLocation={setLocation}\n          />\n        </Styled.PopupRow>\n      )}\n      </FocusTrapWrapper>\n      \n    </Styled.MapOverlayPopup>\n  );\n}\n\nexport default MapPopup;"],"file":"index.js"}

package/lib/styled.d.ts

@@ -1,10 +1,2 @@
-/// <reference types="react" />
 export declare const ViewStopButton: import("styled-components").StyledComponent<"button", any, {}, never>;
-/**
- * Adds a box shadow and tweaks border radius to make popups easier to read.
- */
-export declare const Popup: import("styled-components").StyledComponent<import("react").MemoExoticComponent<(props: import("react-map-gl").PopupProps) => any>, any, {}, never>;
-export declare const MapOverlayPopup: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const PopupRow: import("styled-components").StyledComponent<"p", any, {}, never>;
-export declare const PopupTitle: import("styled-components").StyledComponent<"header", any, {}, never>;
 //# sourceMappingURL=styled.d.ts.map

package/lib/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.ts"],"names":[],"mappings":";AAKA,eAAO,MAAM,cAAc,uEAU1B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,KAAK,qJAMjB,CAAC;AAEF,eAAO,MAAM,eAAe,oEAI3B,CAAC;AAEF,eAAO,MAAM,QAAQ,kEAEpB,CAAC;AAEF,eAAO,MAAM,UAAU,uEAItB,CAAC"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../src/styled.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,cAAc,uEAU1B,CAAC"}

package/lib/styled.js

@@ -5,47 +5,15 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PopupTitle = exports.PopupRow = exports.MapOverlayPopup = exports.Popup = exports.ViewStopButton = void 0;
+exports.ViewStopButton = void 0;
 
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _reactMapGl = require("react-map-gl");
-
 /* eslint-disable-next-line import/prefer-default-export */
 const ViewStopButton = _styledComponents.default.button.withConfig({
   displayName: "styled__ViewStopButton",
   componentId: "sc-12v7ov3-0"
 })(["background:none;border-bottom:none;border-left:1px solid #000;border-right:none;border-top:none;color:#008;font-family:inherit;margin-left:5px;padding-top:0;"]);
-/**
- * Adds a box shadow and tweaks border radius to make popups easier to read.
- */
-
 
 exports.ViewStopButton = ViewStopButton;
-const Popup = (0, _styledComponents.default)(_reactMapGl.Popup).withConfig({
-  displayName: "styled__Popup",
-  componentId: "sc-12v7ov3-1"
-})(["& > .maplibregl-popup-content,& > .mapboxgl-popup-content{border-radius:10px;box-shadow:0 3px 14px 4px rgb(0 0 0 / 20%);}"]);
-exports.Popup = Popup;
-
-const MapOverlayPopup = _styledComponents.default.div.withConfig({
-  displayName: "styled__MapOverlayPopup",
-  componentId: "sc-12v7ov3-2"
-})(["font-size:12px;line-height:1.5;min-width:250px;"]);
-
-exports.MapOverlayPopup = MapOverlayPopup;
-
-const PopupRow = _styledComponents.default.p.withConfig({
-  displayName: "styled__PopupRow",
-  componentId: "sc-12v7ov3-3"
-})(["margin-top:6px;"]);
-
-exports.PopupRow = PopupRow;
-
-const PopupTitle = _styledComponents.default.header.withConfig({
-  displayName: "styled__PopupTitle",
-  componentId: "sc-12v7ov3-4"
-})(["font-size:18px;font-weight:500;margin-bottom:6px;"]);
-
-exports.PopupTitle = PopupTitle;
 //# sourceMappingURL=styled.js.map

package/lib/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/styled.ts"],"names":["ViewStopButton","styled","button","Popup","MapGlPopup","MapOverlayPopup","div","PopupRow","p","PopupTitle","header"],"mappings":";;;;;;;;;AAAA;;AAEA;;AAEA;AACO,MAAMA,cAAc,GAAGC,0BAAOC,MAAV;AAAA;AAAA;AAAA,qKAApB;AAYP;AACA;AACA;;;;AACO,MAAMC,KAAK,GAAG,+BAAOC,iBAAP,CAAH;AAAA;AAAA;AAAA,iIAAX;;;AAQA,MAAMC,eAAe,GAAGJ,0BAAOK,GAAV;AAAA;AAAA;AAAA,uDAArB;;;;AAMA,MAAMC,QAAQ,GAAGN,0BAAOO,CAAV;AAAA;AAAA;AAAA,uBAAd;;;;AAIA,MAAMC,UAAU,GAAGR,0BAAOS,MAAV;AAAA;AAAA;AAAA,yDAAhB","sourcesContent":["import styled from \"styled-components\";\n\nimport { Popup as MapGlPopup } from \"react-map-gl\";\n\n/* eslint-disable-next-line import/prefer-default-export */\nexport const ViewStopButton = styled.button`\n  background: none;\n  border-bottom: none;\n  border-left: 1px solid #000;\n  border-right: none;\n  border-top: none;\n  color: #008;\n  font-family: inherit;\n  margin-left: 5px;\n  padding-top: 0;\n`;\n\n/**\n * Adds a box shadow and tweaks border radius to make popups easier to read.\n */\nexport const Popup = styled(MapGlPopup)`\n  & > .maplibregl-popup-content,\n  & > .mapboxgl-popup-content {\n    border-radius: 10px;\n    box-shadow: 0 3px 14px 4px rgb(0 0 0 / 20%);\n  }\n`;\n\nexport const MapOverlayPopup = styled.div`\n  font-size: 12px;\n  line-height: 1.5;\n  min-width: 250px;\n`;\n\nexport const PopupRow = styled.p`\n  margin-top: 6px;\n`;\n\nexport const PopupTitle = styled.header`\n  font-size: 18px;\n  font-weight: 500;\n  margin-bottom: 6px;\n`;\n"],"file":"styled.js"}
+{"version":3,"sources":["../src/styled.ts"],"names":["ViewStopButton","styled","button"],"mappings":";;;;;;;;;AAAA;;AAEA;AACO,MAAMA,cAAc,GAAGC,0BAAOC,MAAV;AAAA;AAAA;AAAA,qKAApB","sourcesContent":["import styled from \"styled-components\";\n\n/* eslint-disable-next-line import/prefer-default-export */\nexport const ViewStopButton = styled.button`\n  background: none;\n  border-bottom: none;\n  border-left: 1px solid #000;\n  border-right: none;\n  border-top: none;\n  color: #008;\n  font-family: inherit;\n  margin-left: 5px;\n  padding-top: 0;\n`;\n"],"file":"styled.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentripplanner/map-popup",
-  "version": "3.1.2",
+  "version": "3.2.0-alpha.1",
   "description": "A component for displaying map popup contents",
   "main": "lib/index.js",
   "module": "esm/index.js",
@@ -11,12 +11,14 @@
   "license": "MIT",
   "private": false,
   "dependencies": {
-    "@opentripplanner/core-utils": "^11.4.1",
-    "@opentripplanner/from-to-location-picker": "^2.1.12",
+    "@opentripplanner/base-map": "^3.2.2",
+    "@opentripplanner/building-blocks": "^1.2.2",
+    "@opentripplanner/core-utils": "^11.4.4",
+    "@opentripplanner/from-to-location-picker": "^2.1.14",
     "flat": "^5.0.2"
   },
   "devDependencies": {
-    "@opentripplanner/types": "^6.5.0"
+    "@opentripplanner/types": "^6.5.2"
   },
   "peerDependencies": {
     "react": "^18.2.0",

package/src/MapPopup.story.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { action } from "@storybook/addon-actions";
-import MapPopupContents, { FocusTrapWrapper } from "./index";
+import styled from "styled-components";
+import { Station, Stop } from "@opentripplanner/types";
+import MapPopupContents from "./index";
 
 export default {
   title: "Map Popup"
@@ -8,6 +10,7 @@ export default {
 
 const STOP = {
   flex: false,
+  gtfsId: "9526",
   id: "9526",
   lat: 45.523009,
   lon: -122.672529,
@@ -64,6 +67,18 @@ const FLOATING_CAR = {
   y: 52.52
 };
 
+const getEntityPrefixExample = (entity: Stop | Station) => {
+  const DemoIcon = styled.span`
+    background-color: blue;
+    border-radius: 50px;
+    color: white;
+    margin-right: 0.5ch;
+    padding: 2px;
+  `;
+
+  return <DemoIcon>{entity.name?.charAt(0)}</DemoIcon>;
+};
+
 export const StopEntity = (): JSX.Element => (
   <MapPopupContents
     entity={STOP}
@@ -71,6 +86,14 @@ export const StopEntity = (): JSX.Element => (
     setViewedStop={action("setViewedStop")}
   />
 );
+export const StopEntitywithEntityPrefix = (): JSX.Element => (
+  <MapPopupContents
+    entity={STOP}
+    getEntityPrefix={getEntityPrefixExample}
+    setLocation={action("setLocation")}
+    setViewedStop={action("setViewedStop")}
+  />
+);
 
 export const StopEntityNoHandlers = (): JSX.Element => (
   <MapPopupContents entity={STOP} />
@@ -95,13 +118,3 @@ export const FloatingVehicleEntity = (): JSX.Element => (
     setViewedStop={action("setViewedStop")}
   />
 );
-
-export const StopEntityWithFocusTrap = (): JSX.Element => (
-  <FocusTrapWrapper closePopup={() => {}} id="storybook-stop">
-    <MapPopupContents
-      entity={STOP}
-      setLocation={action("setLocation")}
-      setViewedStop={action("setViewedStop")}
-    />
-  </FocusTrapWrapper>
-);