diff --git a/components/lib/calendar/Calendar.js b/components/lib/calendar/Calendar.js index 3fe463b84f..9950ab9196 100644 --- a/components/lib/calendar/Calendar.js +++ b/components/lib/calendar/Calendar.js @@ -2,7 +2,7 @@ import * as React from 'react'; import PrimeReact, { PrimeReactContext, localeOption, localeOptions } from '../api/Api'; import { Button } from '../button/Button'; import { useHandleStyle } from '../componentbase/ComponentBase'; -import { useMergeProps, useMountEffect, useOverlayListener, usePrevious, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks'; +import { useMergeProps, useMountEffect, useOverlayListener, usePrevious, useUnmountEffect, useUpdateEffect, useGlobalOnEscapeKey, ESC_KEY_HANDLING_PRIORITIES } from '../hooks/Hooks'; import { CalendarIcon } from '../icons/calendar'; import { ChevronDownIcon } from '../icons/chevrondown'; import { ChevronLeftIcon } from '../icons/chevronleft'; @@ -35,6 +35,14 @@ export const Calendar = React.memo( }; const { ptm, cx, isUnstyled } = CalendarBase.setMetaData(metaData); + useGlobalOnEscapeKey({ + callback: () => { + hide(); + }, + when: overlayVisibleState, + priority: [ESC_KEY_HANDLING_PRIORITIES.OVERLAY_PANEL, 0] + }); + useHandleStyle(CalendarBase.css.styles, isUnstyled, { name: 'calendar' }); const elementRef = React.useRef(null); const overlayRef = React.useRef(null);