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

package/dist/cjs/Button/Button.js

@@ -198,9 +198,9 @@ function Button(_ref) {
     buttonProps.hover = undefined;
     buttonProps.active = undefined;
   } else {
-    buttonProps.focus = {
+    buttonProps.focus = _objectSpread(_objectSpread({}, buttonProps.focus), {}, {
       zIndex: 5
-    };
+    });
     buttonProps.cursor = 'pointer';
     buttonProps.touchAction = 'manipulation';
     buttonProps.onClick = onClick;
@@ -250,7 +250,7 @@ function Button(_ref) {
   if (restProps.as) {
     buttonProps.to = to; // remove type if it is not a button
 
-    if (restProps.as !== "button") {
+    if (restProps.as !== 'button') {
       buttonProps = _objectSpread(_objectSpread({}, buttonProps), {}, {
         type: null
       });
@@ -275,7 +275,7 @@ function Button(_ref) {
       restProps = (0, _utils.mergeProps)(restProps, wrapperProps);
     }
 
-    if (buttonProps.type && restProps.as && restProps.as !== "button") {
+    if (buttonProps.type && restProps.as && restProps.as !== 'button') {
       console.log("Tapestry-React: <Button/> type prop is only supported by <button> and not <" + restProps.as + ">.");
     }
   }

package/dist/cjs/TimeField/TimeField.js

@@ -27,10 +27,13 @@ var _utils = require("../utils");
 
 var _utils2 = require("./utils");
 
+var isMobile = typeof window !== 'undefined' ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) : false;
+
 var TimeField = function TimeField(_ref) {
   var ignoredKeys = _ref.ignoredKeys,
       interval = _ref.interval,
-      isIOS = _ref.isIOS,
+      _ref$isIOS = _ref.isIOS,
+      isIOS = _ref$isIOS === void 0 ? false : _ref$isIOS,
       max = _ref.max,
       min = _ref.min,
       onChange = _ref.onChange,
@@ -236,13 +239,18 @@ var TimeField = function TimeField(_ref) {
     return onChange([hours, minutes]);
   };
 
-  var handleIOSChange = function handleIOSChange(event) {
+  var handleMobileChange = function handleMobileChange(event) {
     var _event$target$value$s = event.target.value.split(':'),
         hours = _event$target$value$s[0],
         minutes = _event$target$value$s[1];
 
-    setHours(hours);
-    setMinutes(minutes);
+    if (hours || minutes) {
+      setHours(hours);
+      setMinutes(minutes);
+    } else {
+      setHours(0);
+      setMinutes(0);
+    }
   };
 
   (0, _react.useEffect)(function () {
@@ -254,11 +262,11 @@ var TimeField = function TimeField(_ref) {
 
     updateTime([hours, minutes]);
   }, [hours, minutes]);
-  return isIOS ? /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({}, restProps, {
+  return isMobile || isIOS ? /*#__PURE__*/_react["default"].createElement(_Input["default"], (0, _extends2["default"])({}, restProps, {
     type: "time",
     autoWidth: hours + ":" + (0, _utils.padNumber)(minutes, 2) + " " + meridiem,
     value: (0, _utils.padNumber)(hours, 2) + ":" + (0, _utils.padNumber)(minutes, 2),
-    onChange: handleIOSChange
+    onChange: handleMobileChange
   })) : /*#__PURE__*/_react["default"].createElement(_InputBox["default"], (0, _extends2["default"])({
     ref: ref,
     inline: true

package/dist/esm/Button/Button.js

@@ -191,9 +191,9 @@ export function Button(_ref) {
     buttonProps.hover = undefined;
     buttonProps.active = undefined;
   } else {
-    buttonProps.focus = {
+    buttonProps.focus = _objectSpread(_objectSpread({}, buttonProps.focus), {}, {
       zIndex: 5
-    };
+    });
     buttonProps.cursor = 'pointer';
     buttonProps.touchAction = 'manipulation';
     buttonProps.onClick = onClick;
@@ -243,7 +243,7 @@ export function Button(_ref) {
   if (restProps.as) {
     buttonProps.to = to; // remove type if it is not a button
 
-    if (restProps.as !== "button") {
+    if (restProps.as !== 'button') {
       buttonProps = _objectSpread(_objectSpread({}, buttonProps), {}, {
         type: null
       });
@@ -260,7 +260,7 @@ export function Button(_ref) {
       restProps = mergeProps(restProps, wrapperProps);
     }
 
-    if (buttonProps.type && restProps.as && restProps.as !== "button") {
+    if (buttonProps.type && restProps.as && restProps.as !== 'button') {
       console.log("Tapestry-React: <Button/> type prop is only supported by <button> and not <" + restProps.as + ">.");
     }
   }

package/dist/esm/TimeField/TimeField.js

@@ -8,6 +8,7 @@ import InputField from '../Input/InputField';
 import NumberField from '../NumberField';
 import { noop, padNumber } from '../utils';
 import { addHoursToTime, addMinutesToTime, addTimeToDate, getTimeFromDate } from './utils';
+var isMobile = typeof window !== 'undefined' ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) : false;
 
 var _ref2 = /*#__PURE__*/React.createElement(Box, {
   as: "span",
@@ -19,7 +20,8 @@ var _ref2 = /*#__PURE__*/React.createElement(Box, {
 var TimeField = function TimeField(_ref) {
   var ignoredKeys = _ref.ignoredKeys,
       interval = _ref.interval,
-      isIOS = _ref.isIOS,
+      _ref$isIOS = _ref.isIOS,
+      isIOS = _ref$isIOS === void 0 ? false : _ref$isIOS,
       max = _ref.max,
       min = _ref.min,
       onChange = _ref.onChange,
@@ -226,13 +228,18 @@ var TimeField = function TimeField(_ref) {
     return onChange([hours, minutes]);
   };
 
-  var handleIOSChange = function handleIOSChange(event) {
+  var handleMobileChange = function handleMobileChange(event) {
     var _event$target$value$s = event.target.value.split(':'),
         hours = _event$target$value$s[0],
         minutes = _event$target$value$s[1];
 
-    setHours(hours);
-    setMinutes(minutes);
+    if (hours || minutes) {
+      setHours(hours);
+      setMinutes(minutes);
+    } else {
+      setHours(0);
+      setMinutes(0);
+    }
   };
 
   useEffect(function () {
@@ -244,11 +251,11 @@ var TimeField = function TimeField(_ref) {
 
     updateTime([hours, minutes]);
   }, [hours, minutes]);
-  return isIOS ? /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
+  return isMobile || isIOS ? /*#__PURE__*/React.createElement(Input, _extends({}, restProps, {
     type: "time",
     autoWidth: hours + ":" + padNumber(minutes, 2) + " " + meridiem,
     value: padNumber(hours, 2) + ":" + padNumber(minutes, 2),
-    onChange: handleIOSChange
+    onChange: handleMobileChange
   })) : /*#__PURE__*/React.createElement(InputBox, _extends({
     ref: ref,
     inline: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.9.0-rc.2",
+  "version": "2.9.0-rc.4",
   "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/Button/Button.tsx

@@ -258,7 +258,7 @@ export function Button({
     buttonProps.opacity = 0.65
     buttonProps['aria-disabled'] = true
     buttonProps.cursor = 'not-allowed'
-    buttonProps.onClick = (event) =>  event.preventDefault()
+    buttonProps.onClick = (event) => event.preventDefault()
     buttonProps.onKeyDown = (event) => {
       if (event.key === 'Enter' || event.key === ' ') {
         event.preventDefault()
@@ -271,7 +271,7 @@ export function Button({
     buttonProps.hover = undefined
     buttonProps.active = undefined
   } else {
-    buttonProps.focus = { zIndex: 5 }
+    buttonProps.focus = { ...buttonProps.focus, zIndex: 5 }
     buttonProps.cursor = 'pointer'
     buttonProps.touchAction = 'manipulation'
     buttonProps.onClick = onClick
@@ -323,7 +323,7 @@ export function Button({
     buttonProps.to = to
 
     // remove type if it is not a button
-    if ((restProps as any).as !== "button") {
+    if ((restProps as any).as !== 'button') {
       buttonProps = {
         ...buttonProps,
         type: null,
@@ -362,10 +362,12 @@ export function Button({
     if (
       buttonProps.type &&
       (restProps as any).as &&
-      (restProps as any).as !== "button"
+      (restProps as any).as !== 'button'
     ) {
       console.log(
-        `Tapestry-React: <Button/> type prop is only supported by <button> and not <${(restProps as any).as}>.`
+        `Tapestry-React: <Button/> type prop is only supported by <button> and not <${
+          (restProps as any).as
+        }>.`
       )
     }
   }

package/src/TimeField/TimeField.tsx

@@ -5,7 +5,7 @@ import Input from '../Input/Input'
 import InputBox from '../Input/InputBox'
 import InputField from '../Input/InputField'
 import NumberField from '../NumberField'
-import { isIOS, noop, padNumber, isNumber } from '../utils'
+import { noop, padNumber } from '../utils'
 
 import {
   addHoursToTime,
@@ -49,10 +49,17 @@ type TimeFieldProps = {
   value: [number, number]
 }
 
+const isMobile =
+  typeof window !== 'undefined'
+    ? /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+        navigator.userAgent
+      )
+    : false
+
 const TimeField = ({
   ignoredKeys,
   interval,
-  isIOS,
+  isIOS = false,
   max,
   min,
   onChange,
@@ -241,10 +248,16 @@ const TimeField = ({
     return onChange([hours, minutes])
   }
 
-  const handleIOSChange = (event: any) => {
+  const handleMobileChange = (event: any) => {
     const [hours, minutes] = event.target.value.split(':')
-    setHours(hours)
-    setMinutes(minutes)
+
+    if (hours || minutes) {
+      setHours(hours)
+      setMinutes(minutes)
+    } else {
+      setHours(0)
+      setMinutes(0)
+    }
   }
 
   useEffect(() => {
@@ -256,13 +269,13 @@ const TimeField = ({
     updateTime([hours, minutes])
   }, [hours, minutes])
 
-  return isIOS ? (
+  return isMobile || isIOS ? (
     <Input
       {...restProps}
       type="time"
       autoWidth={`${hours}:${padNumber(minutes, 2)} ${meridiem}`}
       value={`${padNumber(hours, 2)}:${padNumber(minutes, 2)}`}
-      onChange={handleIOSChange}
+      onChange={handleMobileChange}
     />
   ) : (
     <InputBox ref={ref} inline {...restProps}>