From 3cde728d5279e8f6ce95ccf751f002c83509976e Mon Sep 17 00:00:00 2001 From: amy-corson-ibigroup <115499534+amy-corson-ibigroup@users.noreply.github.com> Date: Fri, 24 May 2024 14:00:10 -0400 Subject: [PATCH] update otp-ui packages and import focus trap --- lib/components/map/point-popup.tsx | 71 ++++++------------------------ package.json | 4 +- yarn.lock | 28 ++++++------ 3 files changed, 30 insertions(+), 73 deletions(-) diff --git a/lib/components/map/point-popup.tsx b/lib/components/map/point-popup.tsx index b13e3ce3a..1ce3f5728 100644 --- a/lib/components/map/point-popup.tsx +++ b/lib/components/map/point-popup.tsx @@ -4,12 +4,12 @@ import { Search } from '@styled-icons/fa-solid/Search' import { useIntl, WrappedComponentProps } from 'react-intl' import { useMap } from 'react-map-gl' import FromToLocationPicker from '@opentripplanner/from-to-location-picker' -import React, { useCallback, useMemo } from 'react' +import React, { useCallback } from 'react' import styled from 'styled-components' import type { Location } from '@opentripplanner/types' import * as mapActions from '../../actions/map' -import { getEntryRelativeTo } from '../util/get-entry-relative-to' +import { FocusTrapWrapper } from '@opentripplanner/map-popup/lib' import { Icon } from '../util/styledIcon' import { renderCoordinates } from '../../util/i18n' import { SetLocationHandler, ZoomToPlaceHandler } from '../util/types' @@ -51,49 +51,6 @@ function MapPopup({ const intl = useIntl() const { current: map } = useMap() - /** - * Creates a focus trap within map popup that can be dismissed with esc. - * https://medium.com/cstech/achieving-focus-trapping-in-a-react-modal-component-3f28f596f35b - */ - - /** - * Check to see which keys are down by tracking keyUp and keyDown events - * in order to see when "tab" and "shift" are pressed at the same time. - */ - let keysDown: string[] = useMemo(() => [], []) - - // Argument for document.querySelectorAll to target focusable elements. - const queryId = 'button#zoom-btn, #from-to button' - - const _handleKeyDown = useCallback( - (e) => { - keysDown.push(e.key) - const element = e.target as HTMLElement - switch (e.key) { - case 'Escape': - clearMapPopupLocation() - break - case 'Tab': - if (keysDown.includes('Shift')) { - e.preventDefault() - getEntryRelativeTo(queryId, element, -1)?.focus() - } else { - e.preventDefault() - getEntryRelativeTo(queryId, element, 1)?.focus() - } - break - case ' ': - break - default: - } - }, - [clearMapPopupLocation, keysDown] - ) - - const _handleKeyUp = (e: any) => { - keysDown = keysDown.filter((key) => key !== e.key) - } - // Memoize callbacks that shouldn't change from one render to the next. const onSetLocationFromPopup = useCallback( (payload) => { @@ -116,16 +73,16 @@ function MapPopup({ }) return ( -
- + + {typeof popupName === 'string' && popupName.split(',').length > 3 @@ -148,8 +105,8 @@ function MapPopup({ setLocation={onSetLocationFromPopup} />
- - + + ) } diff --git a/package.json b/package.json index 9e33a58a0..bf546fa3c 100644 --- a/package.json +++ b/package.json @@ -50,10 +50,10 @@ "@opentripplanner/geocoder": "^2.2.2", "@opentripplanner/humanize-distance": "^1.2.0", "@opentripplanner/icons": "^2.0.10", - "@opentripplanner/itinerary-body": "^5.2.8", + "@opentripplanner/itinerary-body": "^5.3.0", "@opentripplanner/location-field": "^2.0.17", "@opentripplanner/location-icon": "^1.4.1", - "@opentripplanner/map-popup": "^3.0.3", + "@opentripplanner/map-popup": "^3.1.0", "@opentripplanner/otp2-tile-overlay": "^1.0.12", "@opentripplanner/park-and-ride-overlay": "^2.0.8", "@opentripplanner/printable-itinerary": "^2.0.20", diff --git a/yarn.lock b/yarn.lock index 78e072aa4..2cddcde2c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2434,7 +2434,7 @@ "@opentripplanner/location-icon" "^1.4.1" flat "^5.0.2" -"@opentripplanner/geocoder@^2.0.1", "@opentripplanner/geocoder@^2.2.2": +"@opentripplanner/geocoder@^2.2.2": version "2.2.2" resolved "https://registry.yarnpkg.com/@opentripplanner/geocoder/-/geocoder-2.2.2.tgz#8ddc669287ccdfff1a5cce14d1fa8049421c6480" integrity sha512-tJIOOE5N9kpMj0ji1YyVfWwg4yAFVs7Ks+EET67acql768bXwRE6rHoX6oaHvKhbCDjaQ7kuPIwi1BYWHQgg0Q== @@ -2458,14 +2458,14 @@ "@opentripplanner/core-utils" "^11.2.3" prop-types "^15.7.2" -"@opentripplanner/itinerary-body@^5.2.6", "@opentripplanner/itinerary-body@^5.2.8": - version "5.2.8" - resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.2.8.tgz#12cb356dc3c203af9603541d46b2c30f0cc8dbe1" - integrity sha512-D/gH80BlTR/J4XYyhVG234J5qVatzYwEjObHUY01u17X+uUgRcl05zv9vNSLx9Va0UDxPc7oR+Ro5VnkW+QkKA== +"@opentripplanner/itinerary-body@^5.2.6", "@opentripplanner/itinerary-body@^5.3.0": + version "5.3.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/itinerary-body/-/itinerary-body-5.3.0.tgz#1a611dc6c49438666e58c34d0f1f88ab6ff48f2d" + integrity sha512-yNMluEX4jJMEdvObGcivnJCS8wMqzZ1j+zJ/40oE9uK9XNyT6o3ascpcsDPN45ZJTIUBoj1FVhItvrfLxaRYMA== dependencies: - "@opentripplanner/core-utils" "^11.2.3" + "@opentripplanner/core-utils" "^11.3.1" "@opentripplanner/humanize-distance" "^1.2.0" - "@opentripplanner/icons" "^2.0.9" + "@opentripplanner/icons" "^2.0.10" "@opentripplanner/location-icon" "^1.4.1" "@styled-icons/fa-solid" "^10.34.0" "@styled-icons/foundation" "^10.34.0" @@ -2497,14 +2497,14 @@ "@styled-icons/fa-regular" "^10.34.0" "@styled-icons/fa-solid" "^10.34.0" -"@opentripplanner/map-popup@^3.0.2", "@opentripplanner/map-popup@^3.0.3": - version "3.0.3" - resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-3.0.3.tgz#4ded505bcf23f505b07abfe5d24142eb2faa483a" - integrity sha512-AvXLUfnEj5PoDHd8eFdpMXsXqmLyreSPPeiVIggNvZUDTm6uHpCAovSrSOOoFT3nOIEaUw4TCcjamJeV0gaNJw== +"@opentripplanner/map-popup@^3.0.2", "@opentripplanner/map-popup@^3.1.0": + version "3.1.0" + resolved "https://registry.yarnpkg.com/@opentripplanner/map-popup/-/map-popup-3.1.0.tgz#51627e4d4c902d10bec6fffa2c3e3eed0994a42c" + integrity sha512-UzQ9OYOslNqDxvGWIPOZ4KyIJ7R0CO2riC56AJeHz5EI0JSv1Rlt1b6JTz0BtJ9cbHksB2QB43x8bJs6if7mfg== dependencies: - "@opentripplanner/base-map" "^3.0.16" - "@opentripplanner/core-utils" "^11.2.3" - "@opentripplanner/from-to-location-picker" "^2.1.11" + "@opentripplanner/base-map" "^3.1.0" + "@opentripplanner/core-utils" "^11.3.1" + "@opentripplanner/from-to-location-picker" "^2.1.12" flat "^5.0.2" "@opentripplanner/otp2-tile-overlay@^1.0.12":