@planningcenter/tapestry-react 2.9.0-rc.1 → 2.9.0-rc.2

package/dist/esm/TimeField/TimeField.test.js

@@ -189,9 +189,9 @@ it('increment hour on arrow up', function () {
   }),
       hourInput = _setup15.hourInput;
 
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
   userEvent.type(hourInput, '{arrowup}');
-  expect(hourInput).toHaveValue("02");
+  expect(hourInput).toHaveValue('02');
 });
 it('increment hour if arrow up on minutes exceeds max value', function () {
   var _setup16 = setup({
@@ -201,9 +201,9 @@ it('increment hour if arrow up on minutes exceeds max value', function () {
       hourInput = _setup16.hourInput,
       minuteInput = _setup16.minuteInput;
 
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
   userEvent.type(minuteInput, '{arrowup}');
-  expect(hourInput).toHaveValue("02");
+  expect(hourInput).toHaveValue('02');
 });
 it('decrement hour on arrow down', function () {
   var _setup17 = setup({
@@ -212,9 +212,9 @@ it('decrement hour on arrow down', function () {
   }),
       hourInput = _setup17.hourInput;
 
-  expect(hourInput).toHaveValue("02");
+  expect(hourInput).toHaveValue('02');
   userEvent.type(hourInput, '{arrowdown}');
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
 });
 it('decrement hour if arrow down on minutes exceeds min value', function () {
   var _setup18 = setup({
@@ -224,9 +224,9 @@ it('decrement hour if arrow down on minutes exceeds min value', function () {
       hourInput = _setup18.hourInput,
       minuteInput = _setup18.minuteInput;
 
-  expect(hourInput).toHaveValue("02");
+  expect(hourInput).toHaveValue('02');
   userEvent.type(minuteInput, '{arrowdown}');
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
 });
 it('increment minute on arrow up', function () {
   var _setup19 = setup({
@@ -235,9 +235,9 @@ it('increment minute on arrow up', function () {
   }),
       minuteInput = _setup19.minuteInput;
 
-  expect(minuteInput).toHaveValue("42");
+  expect(minuteInput).toHaveValue('42');
   userEvent.type(minuteInput, '{arrowup}');
-  expect(minuteInput).toHaveValue("43");
+  expect(minuteInput).toHaveValue('43');
 });
 it('decrement minute on arrow down', function () {
   var _setup20 = setup({
@@ -246,9 +246,9 @@ it('decrement minute on arrow down', function () {
   }),
       minuteInput = _setup20.minuteInput;
 
-  expect(minuteInput).toHaveValue("43");
+  expect(minuteInput).toHaveValue('43');
   userEvent.type(minuteInput, '{arrowdown}');
-  expect(minuteInput).toHaveValue("42");
+  expect(minuteInput).toHaveValue('42');
 });
 it('set minute to min value if arrow up on minutes exceeds max value', function () {
   var _setup21 = setup({
@@ -257,9 +257,9 @@ it('set minute to min value if arrow up on minutes exceeds max value', function
   }),
       minuteInput = _setup21.minuteInput;
 
-  expect(minuteInput).toHaveValue("59");
+  expect(minuteInput).toHaveValue('59');
   userEvent.type(minuteInput, '{arrowup}');
-  expect(minuteInput).toHaveValue("00");
+  expect(minuteInput).toHaveValue('00');
 });
 it('set minute to max value if arrow down on minutes exceeds min value', function () {
   var _setup22 = setup({
@@ -268,9 +268,9 @@ it('set minute to max value if arrow down on minutes exceeds min value', functio
   }),
       minuteInput = _setup22.minuteInput;
 
-  expect(minuteInput).toHaveValue("00");
+  expect(minuteInput).toHaveValue('00');
   userEvent.type(minuteInput, '{arrowdown}');
-  expect(minuteInput).toHaveValue("59");
+  expect(minuteInput).toHaveValue('59');
 });
 it('toggle meridiem if arrow up on hour exceeds eleven', function () {
   var _setup23 = setup({
@@ -285,7 +285,7 @@ it('toggle meridiem if arrow up on hour exceeds eleven', function () {
 });
 it('toggle meridiem if arrow down on hour exceeds min value', function () {
   var _setup24 = setup({
-    hours: 1
+    hours: 0
   }),
       hourInput = _setup24.hourInput,
       meridiemInput = _setup24.meridiemInput;
@@ -300,9 +300,9 @@ it('set 12 hour clock to min value if arrow up on hour exceeds max value', funct
   }),
       hourInput = _setup25.hourInput;
 
-  expect(hourInput).toHaveValue("12");
+  expect(hourInput).toHaveValue('12');
   userEvent.type(hourInput, '{arrowup}');
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
 });
 it('set 24 hour clock to min value if arrow up on hour exceeds max value', function () {
   var _setup26 = setup({
@@ -311,9 +311,9 @@ it('set 24 hour clock to min value if arrow up on hour exceeds max value', funct
   }),
       hourInput = _setup26.hourInput;
 
-  expect(hourInput).toHaveValue("23");
+  expect(hourInput).toHaveValue('23');
   userEvent.type(hourInput, '{arrowup}');
-  expect(hourInput).toHaveValue("00");
+  expect(hourInput).toHaveValue('00');
 });
 it('set 12 hour clock to max value if arrow down on hour exceeds min value', function () {
   var _setup27 = setup({
@@ -321,9 +321,9 @@ it('set 12 hour clock to max value if arrow down on hour exceeds min value', fun
   }),
       hourInput = _setup27.hourInput;
 
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
   userEvent.type(hourInput, '{arrowdown}');
-  expect(hourInput).toHaveValue("12");
+  expect(hourInput).toHaveValue('12');
 });
 it('set 24 hour clock to max value if arrow down on hour exceeds min value', function () {
   var _setup28 = setup({
@@ -332,9 +332,9 @@ it('set 24 hour clock to max value if arrow down on hour exceeds min value', fun
   }),
       hourInput = _setup28.hourInput;
 
-  expect(hourInput).toHaveValue("00");
+  expect(hourInput).toHaveValue('00');
   userEvent.type(hourInput, '{arrowdown}');
-  expect(hourInput).toHaveValue("23");
+  expect(hourInput).toHaveValue('23');
 });
 it('does not change the value of hours on arrow up or arrow down if ignored', function () {
   var _setup29 = setup({
@@ -344,11 +344,11 @@ it('does not change the value of hours on arrow up or arrow down if ignored', fu
   }),
       hourInput = _setup29.hourInput;
 
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
   userEvent.type(hourInput, '{arrowup}');
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
   userEvent.type(hourInput, '{arrowdown}');
-  expect(hourInput).toHaveValue("01");
+  expect(hourInput).toHaveValue('01');
 });
 it('does not change the value of minutes on arrow up or arrow down if ignored', function () {
   var _setup30 = setup({
@@ -358,11 +358,11 @@ it('does not change the value of minutes on arrow up or arrow down if ignored',
   }),
       minuteInput = _setup30.minuteInput;
 
-  expect(minuteInput).toHaveValue("42");
+  expect(minuteInput).toHaveValue('42');
   userEvent.type(minuteInput, '{arrowup}');
-  expect(minuteInput).toHaveValue("42");
+  expect(minuteInput).toHaveValue('42');
   userEvent.type(minuteInput, '{arrowdown}');
-  expect(minuteInput).toHaveValue("42");
+  expect(minuteInput).toHaveValue('42');
 }); // ios
 
 it('renders iOS as a single input', function () {

package/dist/esm/TimeField/legacy_TimeField.js

@@ -0,0 +1,271 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React, { Component } from 'react';
+import Box from '../Box';
+import Input from '../Input/Input';
+import InputBox from '../Input/InputBox';
+import InputField from '../Input/InputField';
+import NumberField from '../NumberField';
+import { isIOS, noop, padNumber } from '../utils';
+import { HOURS_TO_NOON, HOURS_IN_DAY, addHoursToTime, addMinutesToTime, addTimeToDate, getMeridiem, getTimeFromDate } from './utils';
+var MIN_MINUTE = 0;
+var MAX_MINUTE = 59;
+
+var _ref = /*#__PURE__*/React.createElement(Box, {
+  as: "span",
+  width: 0.5,
+  textAlign: "center",
+  userSelect: "none"
+}, ":");
+
+var TimeField = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(TimeField, _Component);
+
+  function TimeField(props) {
+    var _this;
+
+    _this = _Component.call(this, props) || this;
+
+    _defineProperty(_assertThisInitialized(_this), "setInputBoxRef", function (component) {
+      _this.inputBox = component;
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updateTime", function (time) {
+      if (time === void 0) {
+        time = {};
+      }
+
+      var _this$props$value = _this.props.value,
+          hours = _this$props$value[0],
+          minutes = _this$props$value[1];
+
+      if (time.hours !== undefined) {
+        hours = time.hours;
+      }
+
+      if (time.minutes !== undefined) {
+        minutes = time.minutes;
+      }
+
+      if (_this.props.twelveHourClock && !_this.props.isIOS) {
+        if (hours > 11 && _this.state.meridiem === 'AM') {
+          hours -= 12;
+        } else if (hours < 12 && _this.state.meridiem === 'PM') {
+          hours += 12;
+        }
+      }
+
+      _this.props.onChange([hours, minutes]);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updateHours", function (amount) {
+      _this.props.onChange(addHoursToTime(_this.props.value, amount));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "updateMinutes", function (amount) {
+      _this.props.onChange(addMinutesToTime(_this.props.value, amount));
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "toggleMeridiem", function () {
+      _this.setState(function (state) {
+        return {
+          meridiem: state.meridiem === 'AM' ? 'PM' : 'AM'
+        };
+      }, _this.updateTime);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleHoursChange", function (hours) {
+      _this.updateTime({
+        hours: hours
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleHoursKeyDown", function (event) {
+      var hour = Number(event.target.value);
+      var isTwelveHourClock = _this.props.twelveHourClock;
+      var isHourEleven = HOURS_TO_NOON - 1;
+      var maxHour = isTwelveHourClock ? HOURS_TO_NOON : HOURS_IN_DAY - 1;
+      var minHour = isTwelveHourClock ? 1 : 0;
+
+      if (event.key === 'ArrowRight') {
+        _this.inputBox.focus(1);
+      }
+
+      if (event.key === 'ArrowUp' && isTwelveHourClock && hour === isHourEleven) {
+        _this.toggleMeridiem();
+      }
+
+      if (event.key === 'ArrowUp' && hour === maxHour) {
+        _this.updateHours(1);
+      }
+
+      if (event.key === 'ArrowDown' && isTwelveHourClock && hour === minHour) {
+        _this.toggleMeridiem();
+      }
+
+      if (event.key === 'ArrowDown' && hour === minHour) {
+        _this.updateHours(-1);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMinutesChange", function (minutes) {
+      _this.updateTime({
+        minutes: minutes
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleMinutesKeyDown", function (event) {
+      var minute = Number(event.target.value);
+
+      if (_this.props.ignoredKeys.includes(event.key)) {
+        return;
+      }
+
+      if (event.key === 'ArrowLeft') {
+        _this.inputBox.focus(0);
+      }
+
+      if (event.key === 'ArrowRight') {
+        _this.inputBox.focus(2);
+      }
+
+      if (event.key === 'ArrowUp' && minute >= MAX_MINUTE) {
+        _this.updateMinutes(1);
+      }
+
+      if (event.key === 'ArrowDown' && minute <= MIN_MINUTE) {
+        _this.updateMinutes(-1);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleAMPMKeyDown", function (event) {
+      if (_this.props.ignoredKeys.includes(event.key)) {
+        return;
+      }
+
+      if (event.key !== 'Tab' && !(event.metaKey && event.key === 'r')) {
+        event.preventDefault();
+      }
+
+      if (event.key === 'ArrowLeft') {
+        _this.inputBox.focus(1);
+      }
+
+      if (event.key.toLowerCase() === 'a' && _this.state.meridiem === 'PM' || event.key.toLowerCase() === 'p' && _this.state.meridiem === 'AM' || event.key === 'ArrowUp' || event.key === 'ArrowDown') {
+        _this.toggleMeridiem();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleIOSChange", function (event) {
+      var _event$target$value$s = event.target.value.split(':'),
+          hours = _event$target$value$s[0],
+          minutes = _event$target$value$s[1];
+
+      _this.updateTime({
+        hours: +hours,
+        minutes: +minutes
+      });
+    });
+
+    _this.state = {
+      meridiem: getMeridiem(props.value)
+    };
+    return _this;
+  }
+
+  var _proto = TimeField.prototype;
+
+  _proto.componentDidUpdate = function componentDidUpdate(lastProps) {
+    if (lastProps.value[0] !== this.props.value[0]) {
+      this.setState({
+        meridiem: getMeridiem(this.props.value)
+      });
+    }
+  };
+
+  _proto.render = function render() {
+    var _this$props = this.props,
+        ignoredKeys = _this$props.ignoredKeys,
+        value = _this$props.value,
+        min = _this$props.min,
+        max = _this$props.max,
+        interval = _this$props.interval,
+        onChange = _this$props.onChange,
+        twelveHourClock = _this$props.twelveHourClock,
+        isIOS = _this$props.isIOS,
+        restProps = _objectWithoutPropertiesLoose(_this$props, ["ignoredKeys", "value", "min", "max", "interval", "onChange", "twelveHourClock", "isIOS"]);
+
+    var hours = value[0],
+        minutes = value[1];
+    return isIOS ? /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
+      type: "time",
+      autoWidth: hours + ":" + padNumber(minutes, 2) + " " + this.state.meridiem,
+      value: padNumber(hours, 2) + ":" + padNumber(minutes, 2),
+      onChange: this.handleIOSChange
+    })) : /*#__PURE__*/React.createElement(InputBox, _extends({
+      ref: this.setInputBoxRef,
+      inline: true
+    }, restProps), /*#__PURE__*/React.createElement(NumberField, {
+      autoWidth: false,
+      fontVariantNumeric: "tabular-nums",
+      moveFocusOnMax: true,
+      value: twelveHourClock ? hours % HOURS_TO_NOON || HOURS_TO_NOON : hours,
+      min: twelveHourClock ? 1 : 0,
+      max: twelveHourClock ? HOURS_TO_NOON : HOURS_IN_DAY - 1,
+      pad: 2,
+      grow: 0,
+      width: "2ch",
+      textAlign: "center",
+      "aria-label": "Hours",
+      onChange: this.handleHoursChange,
+      onKeyDown: this.handleHoursKeyDown,
+      ignoredKeys: ignoredKeys
+    }), _ref, /*#__PURE__*/React.createElement(NumberField, {
+      autoWidth: false,
+      fontVariantNumeric: "tabular-nums",
+      moveFocusOnMax: true,
+      value: minutes,
+      min: MIN_MINUTE,
+      max: MAX_MINUTE,
+      pad: 2,
+      grow: 0,
+      width: "2ch",
+      textAlign: "center",
+      "aria-label": "Minutes",
+      onChange: this.handleMinutesChange,
+      onKeyDown: this.handleMinutesKeyDown,
+      ignoredKeys: ignoredKeys
+    }), twelveHourClock && /*#__PURE__*/React.createElement(InputField, {
+      highlightOnInteraction: true,
+      value: this.state.meridiem,
+      grow: 0,
+      width: "2em",
+      textAlign: "center",
+      "aria-label": "AM/PM",
+      onChange: noop // prevent React warnings
+      ,
+      onKeyDown: this.handleAMPMKeyDown
+    }));
+  };
+
+  return TimeField;
+}(Component);
+
+_defineProperty(TimeField, "addHoursToTime", addHoursToTime);
+
+_defineProperty(TimeField, "addMinutesToTime", addMinutesToTime);
+
+_defineProperty(TimeField, "addTimeToDate", addTimeToDate);
+
+_defineProperty(TimeField, "getTimeFromDate", getTimeFromDate);
+
+_defineProperty(TimeField, "defaultProps", {
+  twelveHourClock: true,
+  ignoredKeys: [],
+  isIOS: isIOS
+});
+
+export default TimeField;

package/dist/esm/TimeField/utils.js

@@ -10,18 +10,12 @@ export function addHoursToTime(time, hoursToAdd) {
 export function addMinutesToTime(time, minutesToAdd) {
   var hours = time[0],
       minutes = time[1];
-  var nextMinutes = minutes + minutesToAdd;
-  var remainderMinutes = modulo(nextMinutes, MINUTES_IN_HOUR);
-
-  if (remainderMinutes >= 0) {
-    var nextHours = hours + Math.floor(nextMinutes / MINUTES_IN_HOUR);
-    hours = modulo(nextHours, HOURS_IN_DAY);
-    minutes = remainderMinutes;
-  } else {
-    minutes = nextMinutes;
-  }
-
-  return [hours, minutes];
+  var totalTimeInMinutes = hours * 60 + minutes;
+  var totalMinutesInDay = 24 * 60;
+  var newTime = parseInt(totalTimeInMinutes) + parseInt(minutesToAdd);
+  var newHours = newTime > totalMinutesInDay ? Math.floor(newTime / 60) - 24 : Math.floor(newTime / 60);
+  var newMinutes = newTime % 60;
+  return [newHours, newMinutes];
 }
 export function addTimeToDate(date, time) {
   var hours = time[0],

package/dist/esm/utils.js

@@ -352,6 +352,14 @@ function isArray(value) {
 function isFunction(value) {
   return value && value.constructor === Function;
 }
+/**
+ * Determines if value is a number
+ */
+
+
+function isNumber(value) {
+  return /^[0-9]$/i.test(value);
+}
 /**
  * Determines if a value is present in an array by
  * performing a shallow equal check on each item.
@@ -821,4 +829,4 @@ function mergeProps() {
   }, {});
 }
 
-export { cloneChildren, composeEvents, composeMultipleEvents, createCSSProperty, deselectCurrentTextRange, generateId, getCSSProperty, getClosestFocusableElement, getClosestViewport, getInteractiveChildElements, getRect, getScrollbarWidth, getTabbableSiblings, getTextWidth, insertAtIndex, isArray, isElementInteractive, isFunction, isIOS, isValueInArray, joinChildren, lockScroll, mergeProps, noop, objectToCSSProperties, padNumber, pageViewChange, range, removeAtIndex, renderIndexedGroup, reorderArray, shallowEqual, selectFullTextRange, stopImmediatePropagation, stopPropagationClick, supportsPassiveEvents, trapFocus };
+export { cloneChildren, composeEvents, composeMultipleEvents, createCSSProperty, deselectCurrentTextRange, generateId, getCSSProperty, getClosestFocusableElement, getClosestViewport, getInteractiveChildElements, getRect, getScrollbarWidth, getTabbableSiblings, getTextWidth, insertAtIndex, isArray, isElementInteractive, isFunction, isIOS, isNumber, isValueInArray, joinChildren, lockScroll, mergeProps, noop, objectToCSSProperties, padNumber, pageViewChange, range, removeAtIndex, renderIndexedGroup, reorderArray, shallowEqual, selectFullTextRange, stopImmediatePropagation, stopPropagationClick, supportsPassiveEvents, trapFocus };

package/dist/types/TimeField/TimeField.d.ts

@@ -0,0 +1,35 @@
+declare type TimeFieldProps = {
+    /**
+     * An array of keys to ignore when pushed.
+     * ex: ["ArrowUp", "ArrowDown"].
+     */
+    ignoredKeys?: string[];
+    interval?: number;
+    /**
+     * Render native time input, defaults to `true` if user platform is an iOS device, otherwise `false`.
+     */
+    isIOS?: boolean;
+    max?: number;
+    min?: number;
+    /**
+     * Receives new time from typing or navigating with up and down arrow keys.
+     */
+    onChange: (event: any) => void;
+    /**
+     * Displays time based on a 12 hour clock, `true` by default.
+     */
+    twelveHourClock?: boolean;
+    /**
+     * The controlled value passed to the internal input.
+     * Accepts an array of [hours, minutes] based on a 24 hour clock.
+     */
+    value: [number, number];
+};
+declare const TimeField: {
+    ({ ignoredKeys, interval, isIOS, max, min, onChange, twelveHourClock, value, ...restProps }: TimeFieldProps): JSX.Element;
+    addHoursToTime: any;
+    addMinutesToTime: any;
+    addTimeToDate: any;
+    getTimeFromDate: any;
+};
+export default TimeField;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.9.0-rc.1",
+  "version": "2.9.0-rc.2",
   "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",
@@ -88,7 +88,7 @@
   },
   "dependencies": {
     "@planningcenter/icons": "^14.18.1",
-    "@planningcenter/react-beautiful-dnd": "^13.3.1-rc.1",
+    "@planningcenter/react-beautiful-dnd": "^13.4.0",
     "@popmotion/popcorn": "^0.4.4",
     "@popperjs/core": "^2.11.6",
     "@react-hook/window-size": "^3.1.1",

package/src/TimeField/TimeField.mdx

@@ -6,7 +6,7 @@ propsSummary: Accepts [Input](/input) props.
 
 ```jsx live
 render(() => {
-  const [time, setTime] = React.useState([9, 30])
+  const [time, setTime] = React.useState([13, 30])
   return <TimeField value={time} onChange={(time) => setTime(time)} />
 })
 ```