diff --git a/CHANGELOG.md b/CHANGELOG.md index 39a828c0e..252d5a248 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -12,6 +12,12 @@ ### Dependency updates +## [17.1.0] - 2022-11-22 + +### Changed + +- `DatePickerInput`: Used proper cursor and added ability to close DatePicker on ESC and ENTER key ([@qubis741](https://github.com/qubis741)) in ([#2460](https://github.com/teamleadercrm/ui/pull/2460)) + ## [17.0.4] - 2022-11-22 ### Fixed diff --git a/package.json b/package.json index c75b68008..9a6bb0561 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@teamleader/ui", "description": "Teamleader UI library", - "version": "17.0.4", + "version": "17.0.5", "author": "Teamleader ", "bugs": { "url": "https://github.com/teamleadercrm/ui/issues" diff --git a/src/components/datepicker/DatePickerInput.tsx b/src/components/datepicker/DatePickerInput.tsx index cb6f4c523..8073ea492 100644 --- a/src/components/datepicker/DatePickerInput.tsx +++ b/src/components/datepicker/DatePickerInput.tsx @@ -1,8 +1,9 @@ import { IconCalendarSmallOutline, IconCloseBadgedSmallFilled } from '@teamleader/ui-icons'; -import React, { ReactNode, useCallback, useEffect, useState } from 'react'; +import cx from 'classnames'; +import React, { KeyboardEvent, ReactNode, useCallback, useEffect, useRef, useState } from 'react'; import { DayPickerProps as ReactDayPickerProps, Modifier } from 'react-day-picker'; import DatePicker from '.'; -import { SIZES } from '../../constants'; +import { KEY, SIZES } from '../../constants'; import Box, { pickBoxProps } from '../box'; import { BoxProps } from '../box/Box'; import Icon from '../icon'; @@ -97,7 +98,7 @@ function DatePickerInput({ return customFormatDate(date, locale); }; - + const inputRef = useRef(null); const [isPopoverActive, setIsPopoverActive] = useState(false); const [popoverAnchorEl, setPopoverAnchorEl] = useState(null); const [selectedDate, setSelectedDate] = useState( @@ -242,11 +243,20 @@ function DatePickerInput({ ) : null; }; + const handleKeyDown = (event: KeyboardEvent) => { + if (event.key === KEY.Escape || event.key === KEY.Enter) { + event.stopPropagation(); + inputRef.current?.blur(); + handlePopoverClose(); + } + }; + const boxProps = pickBoxProps(others); const internalError = displayError ? errorText || true : false; return ( ({ onClick={handleInputClick} onFocus={handleInputFocus} onBlur={handleInputBlur} - className={theme['date-picker-input']} + className={cx({ [theme['date-picker-input__non-typeable']]: !typeable })} value={inputValue} onChange={handleInputChange} + onKeyDown={handleKeyDown} /> ); }; diff --git a/src/components/datepicker/theme.css b/src/components/datepicker/theme.css index 7ace5a457..b753f1307 100644 --- a/src/components/datepicker/theme.css +++ b/src/components/datepicker/theme.css @@ -18,7 +18,7 @@ .date-picker { display: flex; - &-input { + &-input__non-typeable { input { cursor: default; }