@planningcenter/tapestry-react 2.8.1 → 2.9.0-rc.0

package/dist/cjs/DateField/DateField.js

@@ -106,6 +106,7 @@ function DateField(_ref) {
   var navigateCalendarWithArrowKeys = (0, _useArrowKeysToNavigateCalendar.useArrowKeysToNavigateCalendar)({
     date: value,
     calendarIsOpen: isPopoverOpen,
+    closeCalendar: closePopover,
     openCalendar: openPopover,
     onChange: setDate
   });

package/dist/cjs/DateField/useArrowKeysToNavigateCalendar.js

@@ -8,6 +8,7 @@ var _react = require("react");
 var useArrowKeysToNavigateCalendar = function useArrowKeysToNavigateCalendar(_ref) {
   var date = _ref.date,
       calendarIsOpen = _ref.calendarIsOpen,
+      closeCalendar = _ref.closeCalendar,
       openCalendar = _ref.openCalendar,
       onChange = _ref.onChange;
   var incrementDate = (0, _react.useCallback)(function (by) {
@@ -30,6 +31,9 @@ var useArrowKeysToNavigateCalendar = function useArrowKeysToNavigateCalendar(_re
       } else if (event.key === 'ArrowRight') {
         event.preventDefault();
         incrementDate(1);
+      } else if (event.key === 'Enter') {
+        event.preventDefault();
+        closeCalendar();
       }
     } else {
       if (event.key === 'ArrowDown') {

package/dist/cjs/TimeField/TimeField.js

@@ -87,9 +87,15 @@ var TimeField = /*#__PURE__*/function (_Component) {
       }, _this.updateTime);
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHoursChange", function (hours) {
-      _this.updateTime({
-        hours: hours
-      });
+      if (_this.twelveHourClock && hours === 0) {
+        _this.updateTime({
+          hours: 12
+        });
+      } else {
+        _this.updateTime({
+          hours: hours
+        });
+      }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHoursKeyDown", function (event) {
       var hour = Number(event.target.value);
@@ -215,7 +221,7 @@ var TimeField = /*#__PURE__*/function (_Component) {
       fontVariantNumeric: "tabular-nums",
       moveFocusOnMax: true,
       value: twelveHourClock ? hours % _utils2.HOURS_TO_NOON || _utils2.HOURS_TO_NOON : hours,
-      min: twelveHourClock ? 1 : 0,
+      min: 0,
       max: twelveHourClock ? _utils2.HOURS_TO_NOON : _utils2.HOURS_IN_DAY - 1,
       pad: 2,
       grow: 0,

package/dist/esm/DateField/DateField.js

@@ -85,6 +85,7 @@ function DateField(_ref) {
   var navigateCalendarWithArrowKeys = useArrowKeysToNavigateCalendar({
     date: value,
     calendarIsOpen: isPopoverOpen,
+    closeCalendar: closePopover,
     openCalendar: openPopover,
     onChange: setDate
   });

package/dist/esm/DateField/useArrowKeysToNavigateCalendar.js

@@ -2,6 +2,7 @@ import { useCallback } from "react";
 export var useArrowKeysToNavigateCalendar = function useArrowKeysToNavigateCalendar(_ref) {
   var date = _ref.date,
       calendarIsOpen = _ref.calendarIsOpen,
+      closeCalendar = _ref.closeCalendar,
       openCalendar = _ref.openCalendar,
       onChange = _ref.onChange;
   var incrementDate = useCallback(function (by) {
@@ -24,6 +25,9 @@ export var useArrowKeysToNavigateCalendar = function useArrowKeysToNavigateCalen
       } else if (event.key === 'ArrowRight') {
         event.preventDefault();
         incrementDate(1);
+      } else if (event.key === 'Enter') {
+        event.preventDefault();
+        closeCalendar();
       }
     } else {
       if (event.key === 'ArrowDown') {

package/dist/esm/TimeField/TimeField.js

@@ -78,9 +78,15 @@ var TimeField = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleHoursChange", function (hours) {
-      _this.updateTime({
-        hours: hours
-      });
+      if (_this.twelveHourClock && hours === 0) {
+        _this.updateTime({
+          hours: 12
+        });
+      } else {
+        _this.updateTime({
+          hours: hours
+        });
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleHoursKeyDown", function (event) {
@@ -213,7 +219,7 @@ var TimeField = /*#__PURE__*/function (_Component) {
       fontVariantNumeric: "tabular-nums",
       moveFocusOnMax: true,
       value: twelveHourClock ? hours % HOURS_TO_NOON || HOURS_TO_NOON : hours,
-      min: twelveHourClock ? 1 : 0,
+      min: 0,
       max: twelveHourClock ? HOURS_TO_NOON : HOURS_IN_DAY - 1,
       pad: 2,
       grow: 0,

package/dist/types/DateField/useArrowKeysToNavigateCalendar.d.ts

@@ -2,7 +2,8 @@ interface Props {
     date: Date;
     calendarIsOpen: boolean;
     openCalendar: () => void;
+    closeCalendar: () => void;
     onChange: (date: Date) => void;
 }
-export declare const useArrowKeysToNavigateCalendar: ({ date, calendarIsOpen, openCalendar, onChange, }: Props) => (event: React.KeyboardEvent<HTMLInputElement>) => void;
+export declare const useArrowKeysToNavigateCalendar: ({ date, calendarIsOpen, closeCalendar, openCalendar, onChange, }: Props) => (event: React.KeyboardEvent<HTMLInputElement>) => void;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.8.1",
+  "version": "2.9.0-rc.0",
   "description": "A collection of flexible React components to help you build resilient, accessible user interfaces quickly and effectively.",
   "author": "Front End Systems Engineering <frontend@pco.bz>",
   "main": "dist/cjs/index.js",

package/src/DateField/DateField.tsx

@@ -151,6 +151,7 @@ function DateField({
   const navigateCalendarWithArrowKeys = useArrowKeysToNavigateCalendar({
     date: value,
     calendarIsOpen: isPopoverOpen,
+    closeCalendar: closePopover,
     openCalendar: openPopover,
     onChange: setDate,
   })

package/src/DateField/useArrowKeysToNavigateCalendar.ts

@@ -4,12 +4,14 @@ interface Props {
   date: Date
   calendarIsOpen: boolean
   openCalendar: () => void
+  closeCalendar: () => void
   onChange: (date: Date) => void
 }
 
 export const useArrowKeysToNavigateCalendar = ({
   date,
   calendarIsOpen,
+  closeCalendar,
   openCalendar,
   onChange,
 }: Props) => {
@@ -39,6 +41,9 @@ export const useArrowKeysToNavigateCalendar = ({
         } else if (event.key === 'ArrowRight') {
           event.preventDefault()
           incrementDate(1)
+        } else if (event.key === 'Enter') {
+          event.preventDefault()
+          closeCalendar()
         }
       } else {
         if (event.key === 'ArrowDown') {

package/src/TimeField/TimeField.js

@@ -118,7 +118,11 @@ class TimeField extends Component<Props> {
   }
 
   handleHoursChange = (hours) => {
-    this.updateTime({ hours })
+    if (this.twelveHourClock && hours === 0) {
+      this.updateTime({ hours: 12 })
+    } else {
+      this.updateTime({ hours })
+    }
   }
 
   handleHoursKeyDown = (event) => {
@@ -228,7 +232,7 @@ class TimeField extends Component<Props> {
           value={
             twelveHourClock ? hours % HOURS_TO_NOON || HOURS_TO_NOON : hours
           }
-          min={twelveHourClock ? 1 : 0}
+          min={0}
           max={twelveHourClock ? HOURS_TO_NOON : HOURS_IN_DAY - 1}
           pad={2}
           grow={0}