@planningcenter/tapestry-react 2.8.0 → 2.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/cjs/DateField/DateField.js +6 -1
  2. package/dist/cjs/DateField/useArrowKeysToNavigateCalendar.js +4 -0
  3. package/dist/esm/DateField/DateField.js +6 -1
  4. package/dist/esm/DateField/useArrowKeysToNavigateCalendar.js +4 -0
  5. package/dist/types/DateField/useArrowKeysToNavigateCalendar.d.ts +2 -1
  6. package/package.json +1 -1
  7. package/src/DateField/DateField.tsx +9 -0
  8. package/src/DateField/useArrowKeysToNavigateCalendar.ts +5 -0
package/dist/cjs/DateField/DateField.js CHANGED
@@ -100,9 +100,13 @@ function DateField(_ref) {
100
100
  setDate(date);
101
101
  closePopover();
102
102
  }, [focusInput, setDate, closePopover]);
103
+ var handleNavigationChangeFromCalendar = (0, _react.useCallback)(function (date) {
104
+ setDate(date);
105
+ }, [setDate]);
103
106
  var navigateCalendarWithArrowKeys = (0, _useArrowKeysToNavigateCalendar.useArrowKeysToNavigateCalendar)({
104
107
  date: value,
105
108
  calendarIsOpen: isPopoverOpen,
109
+ closeCalendar: closePopover,
106
110
  openCalendar: openPopover,
107
111
  onChange: setDate
108
112
  });
@@ -168,7 +172,8 @@ function DateField(_ref) {
168
172
  selected: value,
169
173
  minDate: minDate,
170
174
  maxDate: maxDate,
171
- onDateSelect: handleDateSelectedFromCalendar
175
+ onDateSelect: handleDateSelectedFromCalendar,
176
+ onDateChange: handleNavigationChangeFromCalendar
172
177
  })));
173
178
  });
174
179
  }
package/dist/cjs/DateField/useArrowKeysToNavigateCalendar.js CHANGED
@@ -8,6 +8,7 @@ var _react = require("react");
8
8
  var useArrowKeysToNavigateCalendar = function useArrowKeysToNavigateCalendar(_ref) {
9
9
  var date = _ref.date,
10
10
  calendarIsOpen = _ref.calendarIsOpen,
11
+ closeCalendar = _ref.closeCalendar,
11
12
  openCalendar = _ref.openCalendar,
12
13
  onChange = _ref.onChange;
13
14
  var incrementDate = (0, _react.useCallback)(function (by) {
@@ -30,6 +31,9 @@ var useArrowKeysToNavigateCalendar = function useArrowKeysToNavigateCalendar(_re
30
31
  } else if (event.key === 'ArrowRight') {
31
32
  event.preventDefault();
32
33
  incrementDate(1);
34
+ } else if (event.key === 'Enter') {
35
+ event.preventDefault();
36
+ closeCalendar();
33
37
  }
34
38
  } else {
35
39
  if (event.key === 'ArrowDown') {
package/dist/esm/DateField/DateField.js CHANGED
@@ -79,9 +79,13 @@ function DateField(_ref) {
79
79
  setDate(date);
80
80
  closePopover();
81
81
  }, [focusInput, setDate, closePopover]);
82
+ var handleNavigationChangeFromCalendar = useCallback(function (date) {
83
+ setDate(date);
84
+ }, [setDate]);
82
85
  var navigateCalendarWithArrowKeys = useArrowKeysToNavigateCalendar({
83
86
  date: value,
84
87
  calendarIsOpen: isPopoverOpen,
88
+ closeCalendar: closePopover,
85
89
  openCalendar: openPopover,
86
90
  onChange: setDate
87
91
  });
@@ -150,7 +154,8 @@ function DateField(_ref) {
150
154
  selected: value,
151
155
  minDate: minDate,
152
156
  maxDate: maxDate,
153
- onDateSelect: handleDateSelectedFromCalendar
157
+ onDateSelect: handleDateSelectedFromCalendar,
158
+ onDateChange: handleNavigationChangeFromCalendar
154
159
  })));
155
160
  });
156
161
  }
package/dist/esm/DateField/useArrowKeysToNavigateCalendar.js CHANGED
@@ -2,6 +2,7 @@ import { useCallback } from "react";
2
2
  export var useArrowKeysToNavigateCalendar = function useArrowKeysToNavigateCalendar(_ref) {
3
3
  var date = _ref.date,
4
4
  calendarIsOpen = _ref.calendarIsOpen,
5
+ closeCalendar = _ref.closeCalendar,
5
6
  openCalendar = _ref.openCalendar,
6
7
  onChange = _ref.onChange;
7
8
  var incrementDate = useCallback(function (by) {
@@ -24,6 +25,9 @@ export var useArrowKeysToNavigateCalendar = function useArrowKeysToNavigateCalen
24
25
  } else if (event.key === 'ArrowRight') {
25
26
  event.preventDefault();
26
27
  incrementDate(1);
28
+ } else if (event.key === 'Enter') {
29
+ event.preventDefault();
30
+ closeCalendar();
27
31
  }
28
32
  } else {
29
33
  if (event.key === 'ArrowDown') {
package/dist/types/DateField/useArrowKeysToNavigateCalendar.d.ts CHANGED
@@ -2,7 +2,8 @@ interface Props {
2
2
  date: Date;
3
3
  calendarIsOpen: boolean;
4
4
  openCalendar: () => void;
5
+ closeCalendar: () => void;
5
6
  onChange: (date: Date) => void;
6
7
  }
7
- export declare const useArrowKeysToNavigateCalendar: ({ date, calendarIsOpen, openCalendar, onChange, }: Props) => (event: React.KeyboardEvent<HTMLInputElement>) => void;
8
+ export declare const useArrowKeysToNavigateCalendar: ({ date, calendarIsOpen, closeCalendar, openCalendar, onChange, }: Props) => (event: React.KeyboardEvent<HTMLInputElement>) => void;
8
9
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@planningcenter/tapestry-react",
3
- "version": "2.8.0",
3
+ "version": "2.8.2",
4
4
  "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
5
5
  "author": "Front End Systems Engineering <frontend@pco.bz>",
6
6
  "main": "dist/cjs/index.js",
package/src/DateField/DateField.tsx CHANGED
@@ -141,9 +141,17 @@ function DateField({
141
141
  [focusInput, setDate, closePopover]
142
142
  )
143
143
 
144
+ const handleNavigationChangeFromCalendar = useCallback(
145
+ (date) => {
146
+ setDate(date)
147
+ },
148
+ [setDate]
149
+ )
150
+
144
151
  const navigateCalendarWithArrowKeys = useArrowKeysToNavigateCalendar({
145
152
  date: value,
146
153
  calendarIsOpen: isPopoverOpen,
154
+ closeCalendar: closePopover,
147
155
  openCalendar: openPopover,
148
156
  onChange: setDate,
149
157
  })
@@ -220,6 +228,7 @@ function DateField({
220
228
  minDate={minDate}
221
229
  maxDate={maxDate}
222
230
  onDateSelect={handleDateSelectedFromCalendar}
231
+ onDateChange={handleNavigationChangeFromCalendar}
223
232
  />
224
233
  </Popover>
225
234
  )}
package/src/DateField/useArrowKeysToNavigateCalendar.ts CHANGED
@@ -4,12 +4,14 @@ interface Props {
4
4
  date: Date
5
5
  calendarIsOpen: boolean
6
6
  openCalendar: () => void
7
+ closeCalendar: () => void
7
8
  onChange: (date: Date) => void
8
9
  }
9
10
 
10
11
  export const useArrowKeysToNavigateCalendar = ({
11
12
  date,
12
13
  calendarIsOpen,
14
+ closeCalendar,
13
15
  openCalendar,
14
16
  onChange,
15
17
  }: Props) => {
@@ -39,6 +41,9 @@ export const useArrowKeysToNavigateCalendar = ({
39
41
  } else if (event.key === 'ArrowRight') {
40
42
  event.preventDefault()
41
43
  incrementDate(1)
44
+ } else if (event.key === 'Enter') {
45
+ event.preventDefault()
46
+ closeCalendar()
42
47
  }
43
48
  } else {
44
49
  if (event.key === 'ArrowDown') {