@planningcenter/tapestry-react 2.6.0 → 2.6.2

package/dist/esm/TimeField/TimeField.js

@@ -11,6 +11,8 @@ 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",
@@ -82,9 +84,31 @@ var TimeField = /*#__PURE__*/function (_Component) {
     });
 
     _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) {
@@ -94,6 +118,8 @@ var TimeField = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleMinutesKeyDown", function (event) {
+      var minute = Number(event.target.value);
+
       if (_this.props.ignoredKeys.includes(event.key)) {
         return;
       }
@@ -105,6 +131,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);
+      }
     });
 
     _defineProperty(_assertThisInitialized(_this), "handleAMPMKeyDown", function (event) {
@@ -194,8 +228,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",

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

@@ -182,7 +182,7 @@ it('does not change the meridiem on arrow key if arrow keys are ignored', functi
   userEvent.type(meridiemInput, '{arrowup}');
   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
@@ -193,13 +193,156 @@ it('changes the value of hours on arrow up or arrow down', function () {
   userEvent.type(hourInput, '{arrowup}');
   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.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.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.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.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.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.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.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.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.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.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.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.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.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");
   userEvent.type(hourInput, '{arrowup}');
@@ -208,12 +351,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");
   userEvent.type(minuteInput, '{arrowup}');
@@ -223,15 +366,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/esm/Tooltip/Tooltip.test.js

@@ -0,0 +1,160 @@
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import React from 'react';
+import { act, render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom/extend-expect';
+import { Button, Link, StackView, Text, Tooltip, hooks } from '..';
+
+var _ref = /*#__PURE__*/React.createElement(Text, null, "Tooltip anchor");
+
+var _ref3 = /*#__PURE__*/React.createElement(Text, null, "Tooltip anchor");
+
+var _ref5 = /*#__PURE__*/React.createElement(Button, null, "Tooltip anchor");
+
+var _ref7 = /*#__PURE__*/React.createElement(Text, null, "Tooltip anchor");
+
+var _ref8 = /*#__PURE__*/React.createElement(Tooltip, {
+  title: "Test Text"
+}, /*#__PURE__*/React.createElement(Text, null, "Tooltip anchor"));
+
+describe('Tooltip', function () {
+  test('does not render string when closed', function () {
+    var string = 'Test Text';
+    render( /*#__PURE__*/React.createElement(Tooltip, {
+      title: string
+    }, _ref));
+    expect(screen.queryByText(string)).toBeNull();
+  });
+  test('renders string on hover', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var string, tooltip;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) {
+        switch (_context.prev = _context.next) {
+          case 0:
+            string = 'Test Text';
+            render( /*#__PURE__*/React.createElement(Tooltip, {
+              title: string
+            }, _ref3));
+            userEvent.hover(screen.getByText('Tooltip anchor'));
+            _context.next = 5;
+            return 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__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var string, tooltip;
+    return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+      while (1) {
+        switch (_context2.prev = _context2.next) {
+          case 0:
+            string = 'Test Text';
+            render( /*#__PURE__*/React.createElement(Tooltip, {
+              title: string,
+              triggerOnFocus: true
+            }, _ref5));
+            userEvent.tab();
+            _context2.next = 5;
+            return 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__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var string, anchor, tooltip;
+    return _regeneratorRuntime.wrap(function _callee3$(_context3) {
+      while (1) {
+        switch (_context3.prev = _context3.next) {
+          case 0:
+            string = 'Test Text';
+            render( /*#__PURE__*/React.createElement(Tooltip, {
+              title: string
+            }, _ref7));
+            anchor = screen.getByText('Tooltip anchor');
+            expect(screen.queryByText(string)).toBeNull();
+            userEvent.hover(anchor);
+            _context3.next = 7;
+            return screen.findByText(string);
+
+          case 7:
+            tooltip = _context3.sent;
+            expect(tooltip).toBeInTheDocument();
+            userEvent.unhover(anchor);
+            _context3.next = 12;
+            return waitFor(function () {
+              expect(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.createElement(Tooltip, {
+        title: /*#__PURE__*/React.createElement(Link, {
+          to: "#"
+        }, /*#__PURE__*/React.createElement(StackView, null, /*#__PURE__*/React.createElement(Text, {
+          "data-hover": hover
+        }, string)))
+      }, /*#__PURE__*/React.createElement(Button, hoverProps, "Tooltip anchor"));
+    };
+
+    var string = 'Test Text';
+    render( /*#__PURE__*/React.createElement(CustomTooltip, null));
+    var anchor = screen.getByText('Tooltip anchor');
+    userEvent.hover(anchor);
+    act(function () {
+      jest.runAllTimers();
+    });
+    var tooltip = screen.getByText(string);
+    expect(tooltip).toBeInTheDocument();
+    userEvent.unhover(anchor);
+    userEvent.hover(tooltip);
+    act(function () {
+      jest.runAllTimers();
+    });
+    expect(tooltip).toBeInTheDocument();
+    userEvent.unhover(tooltip);
+    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 = render(_ref8),
+        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/types/Tooltip/Tooltip.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/extend-expect';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.6.0",
+  "version": "2.6.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",

package/src/Collapse/Collapse.js

@@ -98,7 +98,7 @@ function Collapse(props: Props) {
       }
     }
     if (instantRender) {
-      handleComplete()
+      requestAnimationFrame(() => handleComplete())
     }
     node.addEventListener('transitionend', handleTransitionEnd)
     return () => {

package/src/Dropdown/Dropdown.js

@@ -91,6 +91,7 @@ class Dropdown extends Component<Props> {
     super(props)
     this.state = {
       isPopoverOpen: props.defaultOpen || props.forceOpen,
+      preventBlur: false,
     }
     this.id = generateId('dropdown')
   }
@@ -112,6 +113,7 @@ class Dropdown extends Component<Props> {
   }
 
   togglePopover = (event) => {
+    this.setState({ preventBlur: false })
     if (this.state.isPopoverOpen) {
       this.closePopover(event)
     } else {
@@ -223,7 +225,13 @@ class Dropdown extends Component<Props> {
                         title: arrowIconOnly ? 'arrow down' : restProps.title,
                         tabIndex: 0,
                         cursor: 'pointer',
-                        onBlur: requestBlur,
+                        onBlur: (event) => {
+                          if (this.state.preventBlur) {
+                            this.setState({ preventBlur: false })
+                          } else {
+                            requestBlur(event)
+                          }
+                        },
                         onClick: (event) => {
                           this.togglePopover()
                           if (!isPopoverOpen) {
@@ -277,6 +285,9 @@ class Dropdown extends Component<Props> {
                                   })
                           }
                         },
+                        onMouseDown: () => {
+                          this.setState({ preventBlur: true })
+                        },
                         ...restProps,
                       }
                       if (React.isValidElement(triggerElement)) {

package/src/Input/Input.js

@@ -119,6 +119,11 @@ type InputProps = {
    * Changes color of the input's placeholder text. Both [theme colors](/colors) and html values are supported.
    */
   placeholderColor?: string,
+
+  /**
+   * Sets the input's required attribute.
+   */
+  required?: boolean,
 }
 
 class Input extends Component<InputProps> {
@@ -162,6 +167,7 @@ class Input extends Component<InputProps> {
       highlightOnInteraction,
       type,
       value,
+      required,
       ...restProps
     } = this.props
     const ariaLabel = restProps['aria-label']
@@ -206,6 +212,7 @@ class Input extends Component<InputProps> {
           onBlur={onBlur}
           onKeyDown={onKeyDown}
           onKeyUp={onKeyUp}
+          required={required}
         />
       </InputBox>
     )

package/src/Modal/Modal.js

@@ -69,11 +69,13 @@ function Modal({
     >
       <Box
         backgroundColor="surface"
+        boxShadow="0 0 20px rgba(0, 0, 0, 0.15)"
         innerRef={modalRef}
         margin={4}
         maxWidth={60}
-        padding={2}
-        radius={3}
+        padding={4}
+        paddingBottom={3}
+        radius={8}
         width="100%"
         {...themeProps}
       >

package/src/TimeField/TimeField.js

@@ -18,6 +18,9 @@ import {
   getTimeFromDate,
 } from './utils'
 
+const MIN_MINUTE = 0
+const MAX_MINUTE = 59
+
 type Props = {
   /**
    * An array of keys to ignore when pushed.
@@ -119,9 +122,31 @@ class TimeField extends Component<Props> {
   }
 
   handleHoursKeyDown = (event) => {
+    const hour = Number(event.target.value)
+    const isTwelveHourClock = this.props.twelveHourClock
+    const isHourEleven = HOURS_TO_NOON - 1
+    const maxHour = isTwelveHourClock ? HOURS_TO_NOON : HOURS_IN_DAY - 1
+    const 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)
+    }
   }
 
   handleMinutesChange = (minutes) => {
@@ -129,6 +154,8 @@ class TimeField extends Component<Props> {
   }
 
   handleMinutesKeyDown = (event) => {
+    const minute = Number(event.target.value)
+
     if (this.props.ignoredKeys.includes(event.key)) {
       return
     }
@@ -138,6 +165,12 @@ class TimeField extends Component<Props> {
     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)
+    }
   }
 
   handleAMPMKeyDown = (event) => {
@@ -214,8 +247,8 @@ class TimeField extends Component<Props> {
           fontVariantNumeric="tabular-nums"
           moveFocusOnMax
           value={minutes}
-          min={0}
-          max={59}
+          min={MIN_MINUTE}
+          max={MAX_MINUTE}
           pad={2}
           grow={0}
           width="2ch"