@planningcenter/tapestry-react 2.6.0-rc.9 → 2.6.1

package/dist/cjs/TimeField/TimeField.js

@@ -33,6 +33,9 @@ var _utils = require("../utils");
 
 var _utils2 = require("./utils");
 
+var MIN_MINUTE = 0;
+var MAX_MINUTE = 59;
+
 var TimeField = /*#__PURE__*/function (_Component) {
   (0, _inheritsLoose2["default"])(TimeField, _Component);
 
@@ -89,9 +92,31 @@ var TimeField = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleHoursKeyDown", function (event) {
+      var hour = Number(event.target.value);
+      var isTwelveHourClock = _this.props.twelveHourClock;
+      var isHourEleven = _utils2.HOURS_TO_NOON - 1;
+      var maxHour = isTwelveHourClock ? _utils2.HOURS_TO_NOON : _utils2.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);
+      }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMinutesChange", function (minutes) {
       _this.updateTime({
@@ -99,6 +124,8 @@ var TimeField = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleMinutesKeyDown", function (event) {
+      var minute = Number(event.target.value);
+
       if (_this.props.ignoredKeys.includes(event.key)) {
         return;
       }
@@ -110,6 +137,14 @@ var TimeField = /*#__PURE__*/function (_Component) {
       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);
+      }
     });
     (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleAMPMKeyDown", function (event) {
       if (_this.props.ignoredKeys.includes(event.key)) {
@@ -200,8 +235,8 @@ var TimeField = /*#__PURE__*/function (_Component) {
       fontVariantNumeric: "tabular-nums",
       moveFocusOnMax: true,
       value: minutes,
-      min: 0,
-      max: 59,
+      min: MIN_MINUTE,
+      max: MAX_MINUTE,
       pad: 2,
       grow: 0,
       width: "2ch",
@@ -214,7 +249,7 @@ var TimeField = /*#__PURE__*/function (_Component) {
       highlightOnInteraction: true,
       value: this.state.meridiem,
       grow: 0,
-      width: 3,
+      width: "2em",
       textAlign: "center",
       "aria-label": "AM/PM",
       onChange: _utils.noop // prevent React warnings

package/dist/cjs/TimeField/TimeField.test.js

@@ -204,7 +204,7 @@ it('does not change the meridiem on arrow key if arrow keys are ignored', functi
 
   expect(meridiemInput).toHaveValue('PM');
 });
-it('changes the value of hours on arrow up or arrow down', function () {
+it('increment hour on arrow up', function () {
   var _setup15 = setup({
     hours: 1,
     minutes: 42
@@ -217,13 +217,182 @@ it('changes the value of hours on arrow up or arrow down', function () {
 
   expect(hourInput).toHaveValue("02");
 });
-it('does not change the value of hours on arrow up or arrow down if ignored', function () {
+it('increment hour if arrow up on minutes exceeds max value', function () {
   var _setup16 = setup({
+    hours: 1,
+    minutes: 59
+  }),
+      hourInput = _setup16.hourInput,
+      minuteInput = _setup16.minuteInput;
+
+  expect(hourInput).toHaveValue("01");
+
+  _userEvent["default"].type(minuteInput, '{arrowup}');
+
+  expect(hourInput).toHaveValue("02");
+});
+it('decrement hour on arrow down', function () {
+  var _setup17 = setup({
+    hours: 2,
+    minutes: 42
+  }),
+      hourInput = _setup17.hourInput;
+
+  expect(hourInput).toHaveValue("02");
+
+  _userEvent["default"].type(hourInput, '{arrowdown}');
+
+  expect(hourInput).toHaveValue("01");
+});
+it('decrement hour if arrow down on minutes exceeds min value', function () {
+  var _setup18 = setup({
+    hours: 2,
+    minutes: 0
+  }),
+      hourInput = _setup18.hourInput,
+      minuteInput = _setup18.minuteInput;
+
+  expect(hourInput).toHaveValue("02");
+
+  _userEvent["default"].type(minuteInput, '{arrowdown}');
+
+  expect(hourInput).toHaveValue("01");
+});
+it('increment minute on arrow up', function () {
+  var _setup19 = setup({
+    hours: 1,
+    minutes: 42
+  }),
+      minuteInput = _setup19.minuteInput;
+
+  expect(minuteInput).toHaveValue("42");
+
+  _userEvent["default"].type(minuteInput, '{arrowup}');
+
+  expect(minuteInput).toHaveValue("43");
+});
+it('decrement minute on arrow down', function () {
+  var _setup20 = setup({
+    hours: 2,
+    minutes: 43
+  }),
+      minuteInput = _setup20.minuteInput;
+
+  expect(minuteInput).toHaveValue("43");
+
+  _userEvent["default"].type(minuteInput, '{arrowdown}');
+
+  expect(minuteInput).toHaveValue("42");
+});
+it('set minute to min value if arrow up on minutes exceeds max value', function () {
+  var _setup21 = setup({
+    hours: 1,
+    minutes: 59
+  }),
+      minuteInput = _setup21.minuteInput;
+
+  expect(minuteInput).toHaveValue("59");
+
+  _userEvent["default"].type(minuteInput, '{arrowup}');
+
+  expect(minuteInput).toHaveValue("00");
+});
+it('set minute to max value if arrow down on minutes exceeds min value', function () {
+  var _setup22 = setup({
+    hours: 1,
+    minutes: 0
+  }),
+      minuteInput = _setup22.minuteInput;
+
+  expect(minuteInput).toHaveValue("00");
+
+  _userEvent["default"].type(minuteInput, '{arrowdown}');
+
+  expect(minuteInput).toHaveValue("59");
+});
+it('toggle meridiem if arrow up on hour exceeds eleven', function () {
+  var _setup23 = setup({
+    hours: 11
+  }),
+      hourInput = _setup23.hourInput,
+      meridiemInput = _setup23.meridiemInput;
+
+  expect(meridiemInput).toHaveValue('AM');
+
+  _userEvent["default"].type(hourInput, '{arrowup}');
+
+  expect(meridiemInput).toHaveValue('PM');
+});
+it('toggle meridiem if arrow down on hour exceeds min value', function () {
+  var _setup24 = setup({
+    hours: 1
+  }),
+      hourInput = _setup24.hourInput,
+      meridiemInput = _setup24.meridiemInput;
+
+  expect(meridiemInput).toHaveValue('AM');
+
+  _userEvent["default"].type(hourInput, '{arrowdown}');
+
+  expect(meridiemInput).toHaveValue('PM');
+});
+it('set 12 hour clock to min value if arrow up on hour exceeds max value', function () {
+  var _setup25 = setup({
+    hours: 12
+  }),
+      hourInput = _setup25.hourInput;
+
+  expect(hourInput).toHaveValue("12");
+
+  _userEvent["default"].type(hourInput, '{arrowup}');
+
+  expect(hourInput).toHaveValue("01");
+});
+it('set 24 hour clock to min value if arrow up on hour exceeds max value', function () {
+  var _setup26 = setup({
+    hours: 23,
+    twelveHourClock: false
+  }),
+      hourInput = _setup26.hourInput;
+
+  expect(hourInput).toHaveValue("23");
+
+  _userEvent["default"].type(hourInput, '{arrowup}');
+
+  expect(hourInput).toHaveValue("00");
+});
+it('set 12 hour clock to max value if arrow down on hour exceeds min value', function () {
+  var _setup27 = setup({
+    hours: 1
+  }),
+      hourInput = _setup27.hourInput;
+
+  expect(hourInput).toHaveValue("01");
+
+  _userEvent["default"].type(hourInput, '{arrowdown}');
+
+  expect(hourInput).toHaveValue("12");
+});
+it('set 24 hour clock to max value if arrow down on hour exceeds min value', function () {
+  var _setup28 = setup({
+    hours: 0,
+    twelveHourClock: false
+  }),
+      hourInput = _setup28.hourInput;
+
+  expect(hourInput).toHaveValue("00");
+
+  _userEvent["default"].type(hourInput, '{arrowdown}');
+
+  expect(hourInput).toHaveValue("23");
+});
+it('does not change the value of hours on arrow up or arrow down if ignored', function () {
+  var _setup29 = setup({
     hours: 1,
     minutes: 42,
     ignoredKeys: ['ArrowUp', 'ArrowDown']
   }),
-      hourInput = _setup16.hourInput;
+      hourInput = _setup29.hourInput;
 
   expect(hourInput).toHaveValue("01");
 
@@ -236,12 +405,12 @@ it('does not change the value of hours on arrow up or arrow down if ignored', fu
   expect(hourInput).toHaveValue("01");
 });
 it('does not change the value of minutes on arrow up or arrow down if ignored', function () {
-  var _setup17 = setup({
+  var _setup30 = setup({
     hours: 1,
     minutes: 42,
     ignoredKeys: ['ArrowUp', 'ArrowDown']
   }),
-      minuteInput = _setup17.minuteInput;
+      minuteInput = _setup30.minuteInput;
 
   expect(minuteInput).toHaveValue("42");
 
@@ -255,15 +424,15 @@ it('does not change the value of minutes on arrow up or arrow down if ignored',
 }); // ios
 
 it('renders iOS as a single input', function () {
-  var _setup18 = setup({
+  var _setup31 = setup({
     isIOS: true,
     hours: 13,
     minutes: 42
   }),
-      container = _setup18.container,
-      hourInput = _setup18.hourInput,
-      minuteInput = _setup18.minuteInput,
-      meridiemInput = _setup18.meridiemInput;
+      container = _setup31.container,
+      hourInput = _setup31.hourInput,
+      minuteInput = _setup31.minuteInput,
+      meridiemInput = _setup31.meridiemInput;
 
   var singleTimeInput = container.querySelector('[type=time]');
   expect(singleTimeInput).toHaveValue('13:42');

package/dist/cjs/Tooltip/Tooltip.js

@@ -57,23 +57,22 @@ function Tooltip(props, ref) {
       triggerOnHover = _useThemeProps$trigge2 === void 0 ? true : _useThemeProps$trigge2,
       childProps = (0, _objectWithoutPropertiesLoose2["default"])(_useThemeProps, ["children", "openDelay", "closeDelay", "defaultOpen", "keepInView", "placement", "popoverProps", "renderTo", "title", "triggerOnFocus", "triggerOnHover"]);
 
-  var isPageInView = true;
-  var isFocused = false;
-  var isMouseDown = false;
+  var isPageInView = (0, _react.useRef)(true);
+  var isMouseDown = (0, _react.useRef)(false);
   var openTimeoutId = (0, _react.useRef)(null);
-  var closeTimeoutId = (0, _react.useRef)(null); // prevents tooltips showing when focused and navigating back to a page after leaving
-
-  var cleanupPageViewChange = (0, _react.useCallback)((0, _utils.pageViewChange)(function (inView) {
-    return setTimeout(function () {
-      return isPageInView = inView;
-    });
-  }));
+  var closeTimeoutId = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(defaultOpen),
       isPopoverOpen = _useState[0],
       setIsPopoverOpen = _useState[1];
 
   (0, _react.useEffect)(function () {
+    // prevents tooltips showing when focused and navigating back to a page after leaving
+    var cleanupPageViewChange = (0, _utils.pageViewChange)(function (inView) {
+      return setTimeout(function () {
+        return isPageInView.current = inView;
+      });
+    });
     emitter.on('CLOSE_OPEN_TOOLTIPS', close);
     return function () {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close);
@@ -116,7 +115,8 @@ function Tooltip(props, ref) {
       close();
     }
   }, [triggerOnHover]);
-  var createOpenTimeout = (0, _react.useCallback)(function () {
+
+  var createOpenTimeout = function createOpenTimeout() {
     clearGlobalTimeout();
 
     if (openTimeoutId.current === null) {
@@ -130,8 +130,9 @@ function Tooltip(props, ref) {
         }, instantDelay ? 0 : openDelay);
       }
     }
-  });
-  var createCloseTimeout = (0, _react.useCallback)(function () {
+  };
+
+  var createCloseTimeout = function createCloseTimeout() {
     startGlobalTimeout();
 
     if (closeTimeoutId.current === null) {
@@ -141,19 +142,22 @@ function Tooltip(props, ref) {
         return close();
       }, closeDelay);
     }
-  });
-  var handleFocus = (0, _react.useCallback)(function () {
-    if (isPageInView && !isMouseDown) {
+  };
+
+  var handleFocus = function handleFocus() {
+    if (isPageInView.current && !isMouseDown.current) {
       open();
     }
-  });
-  var handleMouseDown = (0, _react.useCallback)(function () {
-    isMouseDown = true;
+  };
+
+  var handleMouseDown = function handleMouseDown() {
+    isMouseDown.current = true;
     close();
-  });
-  var handleMouseUp = (0, _react.useCallback)(function () {
-    isMouseDown = false;
-  });
+  };
+
+  var handleMouseUp = function handleMouseUp() {
+    isMouseDown.current = false;
+  };
 
   var child = _react.Children.only(children);
 

package/dist/cjs/Tooltip/Tooltip.test.js

@@ -0,0 +1,178 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+require("@testing-library/jest-dom/extend-expect");
+
+var _ = require("..");
+
+describe('Tooltip', function () {
+  test('does not render string when closed', function () {
+    var string = 'Test Text';
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+      title: string
+    }, /*#__PURE__*/_react["default"].createElement(_.Text, null, "Tooltip anchor")));
+    expect(_react2.screen.queryByText(string)).toBeNull();
+  });
+  test('renders string on hover', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee() {
+    var string, tooltip;
+    return _regenerator["default"].wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            string = 'Test Text';
+            (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+              title: string
+            }, /*#__PURE__*/_react["default"].createElement(_.Text, null, "Tooltip anchor")));
+
+            _userEvent["default"].hover(_react2.screen.getByText('Tooltip anchor'));
+
+            _context.next = 5;
+            return _react2.screen.findByText(string);
+
+          case 5:
+            tooltip = _context.sent;
+            expect(tooltip).toBeInTheDocument();
+
+          case 7:
+          case "end":
+            return _context.stop();
+        }
+      }
+    }, _callee);
+  })));
+  test('renders string on focus', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
+    var string, tooltip;
+    return _regenerator["default"].wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            string = 'Test Text';
+            (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+              title: string,
+              triggerOnFocus: true
+            }, /*#__PURE__*/_react["default"].createElement(_.Button, null, "Tooltip anchor")));
+
+            _userEvent["default"].tab();
+
+            _context2.next = 5;
+            return _react2.screen.findByText(string);
+
+          case 5:
+            tooltip = _context2.sent;
+            expect(tooltip).toBeInTheDocument();
+
+          case 7:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee2);
+  })));
+  test('removes string after timeout', /*#__PURE__*/(0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee3() {
+    var string, anchor, tooltip;
+    return _regenerator["default"].wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            string = 'Test Text';
+            (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+              title: string
+            }, /*#__PURE__*/_react["default"].createElement(_.Text, null, "Tooltip anchor")));
+            anchor = _react2.screen.getByText('Tooltip anchor');
+            expect(_react2.screen.queryByText(string)).toBeNull();
+
+            _userEvent["default"].hover(anchor);
+
+            _context3.next = 7;
+            return _react2.screen.findByText(string);
+
+          case 7:
+            tooltip = _context3.sent;
+            expect(tooltip).toBeInTheDocument();
+
+            _userEvent["default"].unhover(anchor);
+
+            _context3.next = 12;
+            return (0, _react2.waitFor)(function () {
+              expect(_react2.screen.queryByText(string)).not.toBeInTheDocument();
+            });
+
+          case 12:
+          case "end":
+            return _context3.stop();
+        }
+      }
+    }, _callee3);
+  })));
+  test('stays open when hovering a custom tooltip', function () {
+    var CustomTooltip = function CustomTooltip() {
+      var _hooks$useHover = _.hooks.useHover(),
+          hover = _hooks$useHover.hover,
+          hoverProps = _hooks$useHover.hoverProps;
+
+      return /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+        title: /*#__PURE__*/_react["default"].createElement(_.Link, {
+          to: "#"
+        }, /*#__PURE__*/_react["default"].createElement(_.StackView, null, /*#__PURE__*/_react["default"].createElement(_.Text, {
+          "data-hover": hover
+        }, string)))
+      }, /*#__PURE__*/_react["default"].createElement(_.Button, hoverProps, "Tooltip anchor"));
+    };
+
+    var string = 'Test Text';
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(CustomTooltip, null));
+
+    var anchor = _react2.screen.getByText('Tooltip anchor');
+
+    _userEvent["default"].hover(anchor);
+
+    (0, _react2.act)(function () {
+      jest.runAllTimers();
+    });
+
+    var tooltip = _react2.screen.getByText(string);
+
+    expect(tooltip).toBeInTheDocument();
+
+    _userEvent["default"].unhover(anchor);
+
+    _userEvent["default"].hover(tooltip);
+
+    (0, _react2.act)(function () {
+      jest.runAllTimers();
+    });
+    expect(tooltip).toBeInTheDocument();
+
+    _userEvent["default"].unhover(tooltip);
+
+    (0, _react2.act)(function () {
+      jest.runAllTimers();
+    });
+    expect(tooltip).not.toBeInTheDocument();
+  });
+  test('cleans up pageViewChange listeners', function () {
+    window.removeEventListener = jest.fn().mockImplementation(function (event, callback) {});
+    document.removeEventListener = jest.fn().mockImplementation(function (event, callback) {});
+
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.Tooltip, {
+      title: "Test Text"
+    }, /*#__PURE__*/_react["default"].createElement(_.Text, null, "Tooltip anchor"))),
+        unmount = _render.unmount;
+
+    unmount();
+    expect(window.removeEventListener).toBeCalledWith('focus', expect.any(Function));
+    expect(window.removeEventListener).toBeCalledWith('blur', expect.any(Function));
+    expect(document.removeEventListener).toBeCalledWith('visibilitychange', expect.any(Function));
+  });
+});

package/dist/cjs/system/utils.js

@@ -24,7 +24,7 @@ var _react2 = require("@emotion/react");
 
 var _polished = require("polished");
 
-var _lodash = require("lodash");
+var _get = _interopRequireDefault(require("lodash/get"));
 
 var _colors = require("./colors");
 
@@ -161,7 +161,7 @@ function getForegroundColor(color) {
 
 function useThemeValue(path, defaultValue) {
   var userTheme = (0, _react.useContext)(_react2.ThemeContext);
-  return path ? (0, _lodash.get)(userTheme, path, defaultValue || (0, _lodash.get)(_defaultTheme["default"], path)) : userTheme || _defaultTheme["default"];
+  return path ? (0, _get["default"])(userTheme, path, defaultValue || (0, _get["default"])(_defaultTheme["default"], path)) : userTheme || _defaultTheme["default"];
 }
 
 function useThemeProps(path, props) {

package/dist/cjs/utils.js

@@ -46,7 +46,7 @@ var _react = require("react");
 
 var _tabbable = require("tabbable");
 
-var _lodash = require("lodash");
+var _kebabCase = _interopRequireDefault(require("lodash/kebabCase"));
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
@@ -785,11 +785,11 @@ function createCSSProperty(key, value) {
     createdCSSProperties.add(key);
   }
 
-  return "--" + (0, _lodash.kebabCase)(key) + "-" + (0, _lodash.kebabCase)(value);
+  return "--" + (0, _kebabCase["default"])(key) + "-" + (0, _kebabCase["default"])(value);
 }
 
 function getCSSProperty(key, value) {
-  return key && value ? "var(--" + (0, _lodash.kebabCase)(key) + "-" + (0, _lodash.kebabCase)(value) + ")" : undefined;
+  return key && value ? "var(--" + (0, _kebabCase["default"])(key) + "-" + (0, _kebabCase["default"])(value) + ")" : undefined;
 }
 
 function objectToCSSProperties(themeKey, props) {

package/dist/esm/Button/Button.js

@@ -210,6 +210,13 @@ export function Button(_ref) {
 
   if (to) {
     restProps['href'] = to;
+  } // remove `type` if either `to` or `href` is specified
+
+
+  if (to || restProps.href) {
+    buttonProps = _objectSpread(_objectSpread({}, buttonProps), {}, {
+      type: null
+    });
   } // apply stroke defaults and higher z-index when hovering to show outline in group properly
 
 
@@ -244,7 +251,7 @@ export function Button(_ref) {
       restProps = mergeProps(restProps, wrapperProps);
     }
 
-    if (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 + ">.");
     }
   }