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

package/dist/esm/Button/Button.test.js

@@ -1,25 +1,83 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
 import { Button } from './Button';
+
+var _ref = /*#__PURE__*/React.createElement(Button, null);
+
+it("should render as <button> with type=\"button\" by default", function () {
+  var _render = render(_ref),
+      container = _render.container;
+
+  var button = container.querySelector('button');
+  expect(button.getAttribute('type')).toEqual('button');
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(Button, {
+  type: "submit"
+});
+
+it("should render as <button> with type=\"submit\"", function () {
+  var _render2 = render(_ref2),
+      container = _render2.container;
+
+  var button = container.querySelector('button');
+  expect(button.getAttribute('type')).toEqual('submit');
+});
 it("should render title", function () {
   var title = 'Hello';
 
-  var _render = render( /*#__PURE__*/React.createElement(Button, {
+  var _render3 = render( /*#__PURE__*/React.createElement(Button, {
     title: title
   })),
-      getByText = _render.getByText;
+      getByText = _render3.getByText;
 
   getByText(title);
 });
+
+var _ref3 = /*#__PURE__*/React.createElement(Button, {
+  to: "#"
+});
+
+it("should render <a> without a type if \"to\" is provided", function () {
+  var _render4 = render(_ref3),
+      container = _render4.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('type')).toBeNull();
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(Button, {
+  href: "#"
+});
+
+it("should render <a> without a type if \"href\" is provided", function () {
+  var _render5 = render(_ref4),
+      container = _render5.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('type')).toBeNull();
+});
+
+var _ref5 = /*#__PURE__*/React.createElement(Button, {
+  to: "#"
+});
+
+it("should render <a> with \"href\" if \"to\" is specifed", function () {
+  var _render6 = render(_ref5),
+      container = _render6.container;
+
+  var button = container.querySelector('a');
+  expect(button.getAttribute('href')).toEqual('#');
+});
 it("should render href and external link values", function () {
   var title = 'Hello';
 
-  var _render2 = render( /*#__PURE__*/React.createElement(Button, {
+  var _render7 = render( /*#__PURE__*/React.createElement(Button, {
     external: true,
     title: title,
     to: "https://www.planningcenter.com"
   })),
-      getByText = _render2.getByText;
+      getByText = _render7.getByText;
 
   var button = getByText(title);
   expect(button.getAttribute('href')).toEqual('https://www.planningcenter.com');
@@ -29,20 +87,20 @@ it("should render href and external link values", function () {
 it("should call onClick when clicked or Enter or Space key is pressed", function () {
   var onClick = jest.fn();
 
-  var _render3 = render( /*#__PURE__*/React.createElement(Button, {
+  var _render8 = render( /*#__PURE__*/React.createElement(Button, {
     onClick: onClick
   })),
-      container = _render3.container;
+      container = _render8.container;
 
   fireEvent.click(container.firstChild);
   expect(onClick).toHaveBeenCalledTimes(1);
 });
 
-var _ref = /*#__PURE__*/React.createElement(Button, null);
+var _ref6 = /*#__PURE__*/React.createElement(Button, null);
 
 it("should not call onClick when Enter or Space key is pressed and onClick isn't present", function () {
-  var _render4 = render(_ref),
-      container = _render4.container;
+  var _render9 = render(_ref6),
+      container = _render9.container;
 
   fireEvent.keyDown(container.firstChild, {
     key: 'Enter'

package/dist/esm/Collapse/Collapse.js

@@ -93,7 +93,9 @@ function Collapse(props) {
     }
 
     if (instantRender) {
-      handleComplete();
+      requestAnimationFrame(function () {
+        return handleComplete();
+      });
     }
 
     node.addEventListener('transitionend', handleTransitionEnd);

package/dist/esm/DataTable/components/BodyRow.js

@@ -29,8 +29,8 @@ function BodyRow(_ref) {
 
   var props = _objectSpread({
     ref: innerRef,
-    onClick: onRowClick && function () {
-      return onRowClick(rowData, rowIndex);
+    onClick: function onClick(event) {
+      return onRowClick && onRowClick(rowData, rowIndex, event);
     },
     onMouseEnter: bindKeyboardShortcuts,
     onMouseLeave: unbindKeyboardShortcuts,

package/dist/esm/DataTable/hooks/useCollapsibleRows.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { createContext, useCallback, useContext, useEffect } from 'react';
 import useConstant from '../../hooks/useConstant';
-import create from 'zustand';
+import { create } from 'zustand';
 import { range } from '../../utils';
 export var CollapsibleRowsContext = /*#__PURE__*/createContext(null);
 export function useCollapsibleRowsStore(selector) {

package/dist/esm/Dropdown/Dropdown.js

@@ -16,7 +16,7 @@ import Menu from '../Menu';
 import Popover from '../Popover';
 import { cloneChildren, generateId } from '../utils';
 import Item, { ITEM_DISPLAY_NAME } from './Item';
-import Link, { LINK_DISPLAY_NAME, LINK_DATA } from './Link';
+import Link, { LINK_DISPLAY_NAME } from './Link';
 
 var Dropdown = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Dropdown, _Component);
@@ -49,6 +49,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "togglePopover", function (event) {
+      _this.setState({
+        preventBlur: false
+      });
+
       if (_this.state.isPopoverOpen) {
         _this.closePopover(event);
       } else {
@@ -67,7 +71,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         _this.popover.focusAnchor();
       }
 
-      if (data === LINK_DATA) {
+      if (node.tagName === 'A' && event.type !== 'click') {
         node.click();
       } else if (_this.props.onSelect) {
         _this.props.onSelect(data);
@@ -75,7 +79,8 @@ var Dropdown = /*#__PURE__*/function (_Component) {
     });
 
     _this.state = {
-      isPopoverOpen: props.defaultOpen || props.forceOpen
+      isPopoverOpen: props.defaultOpen || props.forceOpen,
+      preventBlur: false
     };
     _this.id = generateId('dropdown');
     return _this;
@@ -96,7 +101,7 @@ var Dropdown = /*#__PURE__*/function (_Component) {
         keepInView = _this$props.keepInView,
         lockScrollWhileOpen = _this$props.lockScrollWhileOpen,
         matchWidths = _this$props.matchWidths,
-        onClick = _this$props.onClick,
+        _onClick = _this$props.onClick,
         onClose = _this$props.onClose,
         onKeyDown = _this$props.onKeyDown,
         onOpen = _this$props.onOpen,
@@ -179,12 +184,22 @@ var Dropdown = /*#__PURE__*/function (_Component) {
               }, _objectSpread2[arrowIconOnly ? 'icon' : 'iconRight'] = {
                 name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
                 size: 'sm'
-              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = requestBlur, _objectSpread2.onClick = function onClick() {
+              }, _objectSpread2.title = arrowIconOnly ? 'arrow down' : restProps.title, _objectSpread2.tabIndex = 0, _objectSpread2.cursor = 'pointer', _objectSpread2.onBlur = function onBlur(event) {
+                if (_this2.state.preventBlur) {
+                  _this2.setState({
+                    preventBlur: false
+                  });
+                } else {
+                  requestBlur(event);
+                }
+              }, _objectSpread2.onClick = function onClick(event) {
                 _this2.togglePopover();
 
                 if (!isPopoverOpen) {
                   _this2.popover.focusAnchor();
                 }
+
+                _onClick && _onClick(event);
               }, _objectSpread2.onKeyDown = function onKeyDown(event) {
                 anchorProps.onKeyDown(event);
 
@@ -243,6 +258,10 @@ var Dropdown = /*#__PURE__*/function (_Component) {
                       }
                     });
                 }
+              }, _objectSpread2.onMouseDown = function onMouseDown() {
+                _this2.setState({
+                  preventBlur: true
+                });
               }, _objectSpread2), restProps);
 
               if ( /*#__PURE__*/React.isValidElement(triggerElement)) {

package/dist/esm/Dropdown/Dropdown.test.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
-import { noop } from 'lodash';
+import noop from 'lodash/noop';
 import { Box, Button, Text, ThemeProvider } from '..';
 import Dropdown from './Dropdown';
 

package/dist/esm/Dropdown/Link.js

@@ -6,7 +6,6 @@ import React, { Component } from 'react';
 import { ItemListItem } from '../ItemList';
 import Menu from '../Menu';
 export var LINK_DISPLAY_NAME = 'Dropdown.Link';
-export var LINK_DATA = 'link';
 
 var Link = /*#__PURE__*/function (_Component) {
   _inheritsLoose(Link, _Component);
@@ -33,7 +32,7 @@ var Link = /*#__PURE__*/function (_Component) {
     }
 
     return /*#__PURE__*/React.createElement(ItemListItem, {
-      data: LINK_DATA,
+      data: "link",
       text: text,
       disabled: disabled,
       index: index

package/dist/esm/Input/InputLabel.js

@@ -1,79 +1,56 @@
 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 React, { useCallback, useRef, useEffect } from 'react';
 import { getColor } from '../system';
 import Text from '../Text';
+import { useThemeProps } from '../system';
 import { inputs, inputLabels } from './utils';
 
-var InputLabel = /*#__PURE__*/function (_Component) {
-  _inheritsLoose(InputLabel, _Component);
+function InputLabel(_ref) {
+  var controls = _ref.controls,
+      state = _ref.state,
+      restProps = _objectWithoutPropertiesLoose(_ref, ["controls", "state"]);
 
-  function InputLabel() {
-    var _this;
+  var _useThemeProps = useThemeProps('inputLabel', restProps),
+      themeProps = _extends({}, _useThemeProps);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+  var input = useRef(null);
 
-    _this = _Component.call.apply(_Component, [this].concat(args)) || this;
+  if (controls) {
+    themeProps.id = controls + "-label";
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "focusInput", function () {
-      _this.input && _this.input.focus();
-    });
+  if (state) {
+    themeProps.color = getColor(state);
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "handleMouseOver", function () {
-      _this.input && _this.input.setState({
-        isHovered: true
-      });
+  useEffect(function () {
+    input.current = inputs[controls];
+    inputLabels[controls] = true;
+    return function () {
+      delete inputLabels[controls];
+    };
+  }, []);
+  var focusInput = useCallback(function () {
+    input.current && input.current.focus();
+  }, [input]);
+  var handleMouseOver = useCallback(function () {
+    input.current && input.current.setState({
+      isHovered: true
     });
-
-    _defineProperty(_assertThisInitialized(_this), "handleMouseOut", function () {
-      _this.input && _this.input.setState({
-        isHovered: false
-      });
+  }, [input]);
+  var handleMouseOut = useCallback(function () {
+    input.current && input.current.setState({
+      isHovered: false
     });
-
-    return _this;
-  }
-
-  var _proto = InputLabel.prototype;
-
-  _proto.componentDidMount = function componentDidMount() {
-    this.input = inputs[this.props.controls];
-    inputLabels[this.props.controls] = true;
-  };
-
-  _proto.componentWillUnmount = function componentWillUnmount() {
-    delete inputLabels[this.props.controls];
-  };
-
-  _proto.render = function render() {
-    var _this$props = this.props,
-        controls = _this$props.controls,
-        state = _this$props.state,
-        restProps = _objectWithoutPropertiesLoose(_this$props, ["controls", "state"]);
-
-    if (controls) {
-      restProps.id = controls + "-label";
-    }
-
-    if (state) {
-      restProps.color = getColor(state);
-    }
-
-    return /*#__PURE__*/React.createElement(Text, _extends({
-      as: "label",
-      onMouseOver: this.handleMouseOver,
-      onMouseOut: this.handleMouseOut,
-      onClick: this.focusInput
-    }, restProps));
-  };
-
-  return InputLabel;
-}(Component);
+  }, [input]);
+  return /*#__PURE__*/React.createElement(Text, _extends({
+    as: "label",
+    onMouseOver: handleMouseOver,
+    onMouseOut: handleMouseOut,
+    onClick: focusInput
+  }, themeProps));
+}
 
 InputLabel.displayName = 'Input.InputLabel';
 export default InputLabel;

package/dist/esm/Modal/Modal.js

@@ -5,6 +5,7 @@ import Box from '../Box';
 import Scrim from '../Scrim';
 import { useDocumentEvent } from '../hooks';
 import { trapFocus } from '../utils';
+import { useThemeProps } from '../system';
 
 function Modal(_ref) {
   var children = _ref.children,
@@ -13,6 +14,11 @@ function Modal(_ref) {
       open = _ref.open,
       restProps = _objectWithoutPropertiesLoose(_ref, ["children", "closeOnOutsideClick", "onRequestClose", "open"]);
 
+  var _useThemeProps = useThemeProps('modal', restProps),
+      _useThemeProps$scrimP = _useThemeProps.scrimProps,
+      scrimProps = _useThemeProps$scrimP === void 0 ? {} : _useThemeProps$scrimP,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["scrimProps"]);
+
   var modalRef = useRef(null);
   useLayoutEffect(function () {
     if (open) {
@@ -29,22 +35,24 @@ function Modal(_ref) {
     return null;
   }
 
-  return /*#__PURE__*/React.createElement(Scrim, {
+  return /*#__PURE__*/React.createElement(Scrim, _extends({
     alignment: "center",
     onMouseDown: function onMouseDown(event) {
       if (closeOnOutsideClick && event.currentTarget === event.target) {
         onRequestClose();
       }
     }
-  }, /*#__PURE__*/React.createElement(Box, _extends({
+  }, scrimProps), /*#__PURE__*/React.createElement(Box, _extends({
+    backgroundColor: "surface",
+    boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
     innerRef: modalRef,
-    width: "100%",
-    maxWidth: 60,
-    padding: 2,
     margin: 4,
-    backgroundColor: "surface",
-    radius: 3
-  }, restProps), children));
+    maxWidth: 60,
+    padding: 4,
+    paddingBottom: 3,
+    radius: 8,
+    width: "100%"
+  }, themeProps), children));
 }
 
 export default Modal;

package/dist/esm/Modal/Modal.test.js

@@ -5,7 +5,7 @@ import '@testing-library/jest-dom/extend-expect';
 import Dropdown from '../Dropdown';
 import Select from '../Select';
 import { Button, Heading, Modal, ThemeProvider } from '../';
-import { noop } from 'lodash';
+import noop from 'lodash/noop';
 
 var _ref = /*#__PURE__*/React.createElement(Heading, {
   "data-testid": "modal-header"

package/dist/esm/Popover/Popover.js

@@ -12,6 +12,7 @@ import Portal from '../Portal';
 import { lockScroll } from '../utils';
 import rewireTabOrder from './rewireTabOrder';
 import { getFixedParent, getModifiers } from './utils';
+import { useThemeProps } from '../system';
 export var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var anchorElement = _ref.anchorElement,
       _ref$as = _ref.as,
@@ -34,6 +35,11 @@ export var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       shouldFlip = _ref$shouldFlip === void 0 ? false : _ref$shouldFlip,
       restProps = _objectWithoutPropertiesLoose(_ref, ["anchorElement", "as", "innerRef", "keepInView", "lockScrollWhileOpen", "matchWidths", "offset", "open", "onKeyDown", "onRequestClose", "placement", "relativeTo", "renderTo", "shouldFlip"]);
 
+  var _useThemeProps = useThemeProps('popover', restProps),
+      _useThemeProps$zIndex = _useThemeProps.zIndex,
+      zIndex = _useThemeProps$zIndex === void 0 ? 10000 : _useThemeProps$zIndex,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["zIndex"]);
+
   var anchorRef = React.useRef(null);
   var popperRef = React.useRef(null);
   var unlockScroll = React.useRef(null);
@@ -194,8 +200,8 @@ export var Popover = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }),
     // ideally this should be pulled out to something like ThemeProvider for predictable z indices
     style: {
-      zIndex: 10000
+      zIndex: zIndex
     }
-  }, restProps)) : null);
+  }, themeProps)) : null);
 });
 Popover.displayName = 'Popover';

package/dist/esm/Scrim/Scrim.js

@@ -1,24 +1,35 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import * as React from 'react';
 import StackView from '../StackView';
-var Scrim = /*#__PURE__*/React.forwardRef(function (props, _ref) {
+import { useThemeProps } from '../system';
+var Scrim = /*#__PURE__*/React.forwardRef(function (_ref2, _ref) {
+  var ref = _ref2.ref,
+      restProps = _objectWithoutPropertiesLoose(_ref2, ["ref"]);
+
   React.useLayoutEffect(function () {
     document.body.style.overflow = 'hidden';
     return function () {
       document.body.style.overflow = '';
     };
   }, []);
+
+  var _useThemeProps = useThemeProps('scrim', restProps),
+      _useThemeProps$zIndex = _useThemeProps.zIndex,
+      zIndex = _useThemeProps$zIndex === void 0 ? 10000 : _useThemeProps$zIndex,
+      themeProps = _objectWithoutPropertiesLoose(_useThemeProps, ["zIndex"]);
+
   return /*#__PURE__*/React.createElement(StackView, _extends({
-    innerRef: props.ref,
+    innerRef: ref,
     position: "fixed",
     top: 0,
     right: 0,
     bottom: 0,
     left: 0,
-    zIndex: 10000,
+    zIndex: zIndex,
     overflow: "auto" // @ts-ignore
     ,
     backgroundColor: "hsla(0,0%,0%,0.4)"
-  }, props));
+  }, themeProps));
 });
 export { Scrim };

package/dist/esm/Table/Table.js

@@ -10,7 +10,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import React, { PureComponent, Children, Fragment } from 'react';
 import { Global } from '@emotion/react';
-import { camelCase, snakeCase } from 'lodash';
+import camelCase from 'lodash/camelCase';
+import snakeCase from 'lodash/snakeCase';
 import Button from '../Button';
 import DragDrop from '../DragDrop';
 import Pagination from '../Pagination';

package/dist/esm/ThemeProvider/ThemeProvider.js

@@ -10,7 +10,7 @@ import React, { useLayoutEffect, useState } from 'react';
 import { ThemeProvider as EmotionThemeProvider } from '@emotion/react';
 import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
-import { merge } from 'lodash';
+import merge from 'lodash/merge';
 import { Box } from '../Box';
 import defaultTheme from '../system/default-theme';
 import { flattenPalette } from '../system';

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",
@@ -208,7 +242,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: noop // prevent React warnings