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

package/dist/esm/utils.js

@@ -6,7 +6,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import { Children, cloneElement } from 'react';
 import { tabbable } from 'tabbable';
-import { kebabCase } from 'lodash';
+import kebabCase from 'lodash/kebabCase';
 /**
  * Returns true if user platform is an iOS device
  * https://stackoverflow.com/a/9039885/1461204

package/dist/types/Button/Button.d.ts

@@ -60,6 +60,10 @@ declare type ButtonProps = {
      * Where the browser should navigate to when pressed. If you need any element here other than `<a>`, remember to use the `as` prop.
      */
     to?: string;
+    /**
+     * Where the browser should navigate to when pressed. If you need any element here other than `<a>`, remember to use the `as` prop.
+     */
+    href?: string;
     /**
      * Wraps button in a [`<Tooltip />`](./tooltip). Accepts any valid Tooltip props.
      */

package/dist/types/ThemeProvider/ThemeProvider.d.ts

@@ -8,11 +8,11 @@ export declare const themeStorage: {
     set: (value: any) => void;
 };
 export declare const themeInitializerScript: string;
-export declare function ThemeProvider({ theme, children, ...boxProps }: {
+declare type Props = {
     theme?: Theme;
     children: React.ReactNode;
-    boxProps?: BoxProps;
-}): JSX.Element;
+} & BoxProps;
+export declare function ThemeProvider({ theme, children, ...boxProps }: Props): JSX.Element;
 export declare namespace ThemeProvider {
     var cache: import("@emotion/utils").EmotionCache;
     var setRootStyles: (themeId: any, styles: any) => void;

package/dist/types/index.d.ts

@@ -350,7 +350,7 @@ export const Checkbox: HTMLInputWrapperComponent
 // Input
 // =====
 
-export const Input: CommonComponent & {
+export const Input: HTMLInputWrapperComponent & {
   Inline: HTMLInputWrapperComponent
   Input: HTMLInputWrapperComponent
   InputBox: CommonComponent

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@planningcenter/tapestry-react",
-  "version": "2.6.0-rc.9",
+  "version": "2.6.0",
   "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",
@@ -76,7 +76,7 @@
     "husky": "^4.3.8",
     "is-ci-cli": "^2.2.0",
     "jest": "^26.6.3",
-    "jest-canvas-mock": "2.3.1",
+    "jest-canvas-mock": "^2.5.0",
     "jest-watch-typeahead": "0.6.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -88,7 +88,7 @@
     "typescript": "^4.1.5"
   },
   "dependencies": {
-    "@planningcenter/icons": "^14.11.0",
+    "@planningcenter/icons": "^14.12.0",
     "@planningcenter/react-beautiful-dnd": "^13.2.1",
     "@popmotion/popcorn": "^0.4.4",
     "@popperjs/core": "^2.11.6",
@@ -106,6 +106,6 @@
     "stylefire": "^7.0.3",
     "tabbable": "^6.0.0",
     "tiny-spring": "^1.0.0",
-    "zustand": "^4.1.1"
+    "zustand": "^4.3.7"
   }
 }

package/src/Button/Button.test.tsx

@@ -2,12 +2,42 @@ import React from 'react'
 import { render, fireEvent } from '@testing-library/react'
 import { Button } from './Button'
 
+it(`should render as <button> with type="button" by default`, () => {
+  const { container } = render(<Button />)
+  const button = container.querySelector('button')
+  expect(button.getAttribute('type')).toEqual('button')
+})
+
+it(`should render as <button> with type="submit"`, () => {
+  const { container } = render(<Button type='submit' />)
+  const button = container.querySelector('button')
+  expect(button.getAttribute('type')).toEqual('submit')
+})
+
 it(`should render title`, () => {
   const title = 'Hello'
   const { getByText } = render(<Button title={title} />)
   getByText(title)
 })
 
+it(`should render <a> without a type if "to" is provided`, () => {
+  const { container } = render(<Button to='#' />)
+  const button = container.querySelector('a')
+  expect(button.getAttribute('type')).toBeNull()
+})
+
+it(`should render <a> without a type if "href" is provided`, () => {
+  const { container } = render(<Button href='#' />)
+  const button = container.querySelector('a')
+  expect(button.getAttribute('type')).toBeNull()
+})
+
+it(`should render <a> with "href" if "to" is specifed`, () => {
+  const { container } = render(<Button to='#' />)
+  const button = container.querySelector('a')
+  expect(button.getAttribute('href')).toEqual('#')
+})
+
 it(`should render href and external link values`, () => {
   const title = 'Hello'
   const { getByText } = render(

package/src/Button/Button.tsx

@@ -86,6 +86,11 @@ type ButtonProps = {
    */
   to?: string
 
+  /**
+   * Where the browser should navigate to when pressed. If you need any element here other than `<a>`, remember to use the `as` prop.
+   */
+  href?: string
+
   /**
    * Wraps button in a [`<Tooltip />`](./tooltip). Accepts any valid Tooltip props.
    */
@@ -287,6 +292,14 @@ export function Button({
     restProps['href'] = to
   }
 
+  // remove `type` if either `to` or `href` is specified
+  if (to || (restProps as any).href) {
+    buttonProps = {
+      ...buttonProps,
+      type: null,
+    }
+  }
+
   // apply stroke defaults and higher z-index when hovering to show outline in group properly
   if (variant === 'outline') {
     buttonProps = {
@@ -342,7 +355,7 @@ export function Button({
     }
 
     if (
-      type &&
+      buttonProps.type &&
       (restProps as any).as &&
       (restProps as any).as !== "button"
     ) {

package/src/DataTable/DataTable.js

@@ -242,7 +242,7 @@ export type Props = {
   onColumnSort?: Function,
 
   /**
-   * `(rowData: any, rowIndex: number) => void`
+   * `(rowData: any, rowIndex: number, event: React.SyntheticEvent) => void`
    *
    * Callback when a row has been clicked.
    */

package/src/DataTable/components/BodyRow.js

@@ -19,7 +19,7 @@ function BodyRow({
   } = useKeyboardShortcuts(keyboardShortcuts, { rowData, rowIndex })
   const props = {
     ref: innerRef,
-    onClick: onRowClick && (() => onRowClick(rowData, rowIndex)),
+    onClick: (event) => onRowClick && onRowClick(rowData, rowIndex, event),
     onMouseEnter: bindKeyboardShortcuts,
     onMouseLeave: unbindKeyboardShortcuts,
     style: {

package/src/DataTable/hooks/useCollapsibleRows.js

@@ -1,6 +1,6 @@
 import { createContext, useCallback, useContext, useEffect } from 'react'
 import useConstant from '../../hooks/useConstant'
-import create from 'zustand'
+import { create } from 'zustand'
 
 import { range } from '../../utils'
 

package/src/Dropdown/Dropdown.js

@@ -9,7 +9,7 @@ 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'
 
 type Props = {
   children?: React.ReactNode,
@@ -125,7 +125,7 @@ class Dropdown extends Component<Props> {
       this.closePopover()
       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)
@@ -215,18 +215,21 @@ class Dropdown extends Component<Props> {
                         'aria-haspopup': true,
                         'aria-expanded': isPopoverOpen,
                         [arrowIconOnly ? 'icon' : 'iconRight']: {
-                          name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
+                          name: isPopoverOpen
+                            ? 'general.upCaret'
+                            : 'general.downCaret',
                           size: 'sm',
                         },
                         title: arrowIconOnly ? 'arrow down' : restProps.title,
                         tabIndex: 0,
                         cursor: 'pointer',
                         onBlur: requestBlur,
-                        onClick: () => {
+                        onClick: (event) => {
                           this.togglePopover()
                           if (!isPopoverOpen) {
                             this.popover.focusAnchor()
                           }
+                          onClick && onClick(event)
                         },
                         onKeyDown: (event) => {
                           anchorProps.onKeyDown(event)

package/src/Dropdown/Dropdown.mdx

@@ -26,10 +26,10 @@ render(
 render(
   <Dropdown title="Links" size="sm" variant="outline">
     <Dropdown.Link to="http://planning.center" external>
-      Planning Center
+      Planning Center (external)
     </Dropdown.Link>
-    <Dropdown.Link to="https://reactjs.org" external>
-      React Docs
+    <Dropdown.Link to="/button">
+      Tapestry React Button
     </Dropdown.Link>
   </Dropdown>
 )

package/src/Dropdown/Dropdown.test.tsx

@@ -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/src/Dropdown/Link.js

@@ -4,7 +4,6 @@ import { ItemListItem } from '../ItemList'
 import Menu from '../Menu'
 
 export const LINK_DISPLAY_NAME = 'Dropdown.Link'
-export const LINK_DATA = 'link'
 
 class Link extends Component {
   // Graphql wasn't picking up the correct displayName when this was
@@ -17,12 +16,7 @@ class Link extends Component {
       restProps.target = '_blank'
     }
     return (
-      <ItemListItem
-        data={LINK_DATA}
-        text={text}
-        disabled={disabled}
-        index={index}
-      >
+      <ItemListItem data="link" text={text} disabled={disabled} index={index}>
         {({ id, highlight, highlighted, clearHighlight, select }) => (
           <Menu.Item
             as="a"

package/src/Input/InputLabel.js

@@ -1,8 +1,9 @@
 // @flow
-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'
 
@@ -10,54 +11,56 @@ export type InputLabelProps = {
   /**
    * The `id` of the input to control. Compatible with all Tapestry-React form components.
    */
-  controls: string,
+  controls?: string,
 
   /**
    * The current state of the label. Should match corresponding `Input`'s state prop.
    */
-  state: 'warning' | 'error' | 'success',
+  state?: 'warning' | 'error' | 'success',
 }
 
-class InputLabel extends Component<InputLabelProps> {
-  componentDidMount() {
-    this.input = inputs[this.props.controls]
-    inputLabels[this.props.controls] = true
-  }
+function InputLabel({ controls, state, ...restProps }: InputLabelProps) {
+  const { ...themeProps } = useThemeProps('inputLabel', restProps)
 
-  componentWillUnmount() {
-    delete inputLabels[this.props.controls]
-  }
+  const input = useRef(null)
 
-  focusInput = () => {
-    this.input && this.input.focus()
+  if (controls) {
+    themeProps.id = `${controls}-label`
   }
-
-  handleMouseOver = () => {
-    this.input && this.input.setState({ isHovered: true })
+  if (state) {
+    themeProps.color = getColor(state)
   }
 
-  handleMouseOut = () => {
-    this.input && this.input.setState({ isHovered: false })
-  }
+  useEffect(() => {
+    input.current = inputs[controls]
+    inputLabels[controls] = true
 
-  render() {
-    const { controls, state, ...restProps } = this.props
-    if (controls) {
-      restProps.id = `${controls}-label`
-    }
-    if (state) {
-      restProps.color = getColor(state)
+    return () => {
+      delete inputLabels[controls]
     }
-    return (
-      <Text
-        as="label"
-        onMouseOver={this.handleMouseOver}
-        onMouseOut={this.handleMouseOut}
-        onClick={this.focusInput}
-        {...restProps}
-      />
-    )
-  }
+  }, [])
+
+  const focusInput = useCallback(() => {
+    input.current && input.current.focus()
+  }, [input])
+
+  const handleMouseOver = useCallback(() => {
+    input.current && input.current.setState({ isHovered: true })
+  }, [input])
+
+  const handleMouseOut = useCallback(() => {
+    input.current && input.current.setState({ isHovered: false })
+  }, [input])
+
+  return (
+    <Text
+      as="label"
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+      onClick={focusInput}
+      {...themeProps}
+    />
+  )
 }
 
 InputLabel.displayName = 'Input.InputLabel'

package/src/Input/InputLabel.mdx

@@ -4,6 +4,7 @@ category: Forms
 summary: Provides accessibility as well as usability improvements for mouse users by allowing the user to click the <InputLabel/> component to focus the respective control. This mimics the browsers native label tag, but allows use with custom components like <Select/>.
 propsSummary: Accepts [Text](/text) props.
 parent: Input
+themeKey: inputLabel
 ---
 
 ```jsx live

package/src/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'
 
 export type ModalProps = {
   children?: any,
@@ -23,6 +24,11 @@ export type ModalProps = {
    * Determines whether the modal is open or not.
    */
   open: boolean,
+
+  /**
+   * Props passed to the internal [`<Scrim/>`](/scrim) component.
+   */
+  scrimProps?: object,
 }
 
 function Modal({
@@ -32,6 +38,7 @@ function Modal({
   open,
   ...restProps
 }: ModalProps) {
+  const { scrimProps = {}, ...themeProps } = useThemeProps('modal', restProps)
   const modalRef = useRef(null)
 
   useLayoutEffect(() => {
@@ -58,16 +65,17 @@ function Modal({
           onRequestClose()
         }
       }}
+      {...scrimProps}
     >
       <Box
+        backgroundColor="surface"
         innerRef={modalRef}
-        width="100%"
+        margin={4}
         maxWidth={60}
         padding={2}
-        margin={4}
-        backgroundColor="surface"
         radius={3}
-        {...restProps}
+        width="100%"
+        {...themeProps}
       >
         {children}
       </Box>

package/src/Modal/Modal.mdx

@@ -2,6 +2,7 @@
 title: Modal
 category: Overlays
 propsSummary: Accepts [Box](/box) props.
+themeKey: modal
 ---
 
 ```jsx live
@@ -16,7 +17,7 @@ function MyModal(props) {
     return () => setLazyComponent(null)
   }, [props.open])
   return (
-    <Modal id="modal" closeOnOutsideClick height={200} {...props}>
+    <Modal id="modal" closeOnOutsideClick height={25} {...props}>
       <StackView spacing={2}>
         {lazyComponent || <Text>Loading lazy component...</Text>}
         <Select

package/src/Modal/Modal.test.tsx

@@ -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'
 
 describe('Modal', () => {
   const TestModal = () => {

package/src/Popover/Popover.mdx

@@ -1,6 +1,7 @@
 ---
 title: Popover
 category: Overlays
+themeKey: popover
 ---
 
 ```jsx live

package/src/Popover/Popover.tsx

@@ -7,6 +7,8 @@ import { lockScroll } from '../utils'
 
 import rewireTabOrder from './rewireTabOrder'
 import { getFixedParent, getModifiers } from './utils'
+import { useThemeProps } from '../system'
+import { useTheme } from '@emotion/react'
 
 type anchorCallbackProps = {
   innerRef(node: HTMLElement): void
@@ -116,6 +118,10 @@ export const Popover = React.forwardRef(
     }: PopoverProps,
     ref
   ) => {
+    const { zIndex = 10000, ...themeProps } = useThemeProps(
+      'popover',
+      restProps
+    )
     const anchorRef = React.useRef(null)
     const popperRef = React.useRef(null)
     const unlockScroll = React.useRef(null)
@@ -253,8 +259,8 @@ export const Popover = React.forwardRef(
                 }
               },
               // ideally this should be pulled out to something like ThemeProvider for predictable z indices
-              style: { zIndex: 10000 },
-              ...restProps,
+              style: { zIndex },
+              ...themeProps,
             })
           : null}
       </Portal>

package/src/Scrim/Scrim.mdx

@@ -3,6 +3,7 @@ title: Scrim
 category: Overlays
 summary: Scrims are used to display focused content like alerts, modals, or media previews.
 propsSummary: Accepts [StackView](/stackview) props.
+themeKey: scrim
 ---
 
 ```jsx live

package/src/Scrim/Scrim.tsx

@@ -1,33 +1,38 @@
 import * as React from 'react'
 
 import StackView from '../StackView'
+import { useThemeProps } from '../system'
 
 type ScrimProps = {
   /** Gain access to the internal ref. */
-  ref?: any,
-  children?: any,
+  ref?: any
+  children?: any
 }
 
-const Scrim = React.forwardRef(function (props: ScrimProps, _ref: any) {
+const Scrim = React.forwardRef(function (
+  { ref, ...restProps }: ScrimProps,
+  _ref: any
+) {
   React.useLayoutEffect(() => {
     document.body.style.overflow = 'hidden'
     return () => {
       document.body.style.overflow = ''
     }
   }, [])
+  const { zIndex = 10000, ...themeProps } = useThemeProps('scrim', restProps)
   return (
     <StackView
-      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}
     />
   )
 })

package/src/Sidebar/Sidebar.mdx

@@ -1,7 +1,6 @@
 ---
 title: Sidebar
 category: General
-propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Table/Table.js

@@ -1,7 +1,8 @@
 // @flow
 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 type { PaginationProps } from '../Pagination/Pagination'
 

package/src/ThemeProvider/ThemeProvider.tsx

@@ -2,7 +2,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, BoxProps } from '../Box'
 
 import defaultTheme from '../system/default-theme'
@@ -58,15 +58,16 @@ function mergeThemes(a: Theme = {}, b: Theme = {}) {
   }
 }
 
+type Props = {
+  theme?: Theme
+  children: React.ReactNode
+} & BoxProps
+
 export function ThemeProvider({
   theme = emptyTheme,
   children,
   ...boxProps
-}: {
-  theme?: Theme
-  children: React.ReactNode
-  boxProps?: BoxProps
-}) {
+}: Props) {
   const [mergedTheme, setMergedTheme] = useState(() =>
     mergeThemes(defaultTheme, theme)
   )

package/src/TimeField/TimeField.js

@@ -230,7 +230,7 @@ class TimeField extends Component<Props> {
             highlightOnInteraction
             value={this.state.meridiem}
             grow={0}
-            width={3}
+            width="2em"
             textAlign="center"
             aria-label="AM/PM"
             onChange={noop} // prevent React warnings