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

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,
@@ -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 {
@@ -125,7 +127,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 +217,27 @@ 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: () => {
+                        onBlur: (event) => {
+                          if (this.state.preventBlur) {
+                            this.setState({ preventBlur: false })
+                          } else {
+                            requestBlur(event)
+                          }
+                        },
+                        onClick: (event) => {
                           this.togglePopover()
                           if (!isPopoverOpen) {
                             this.popover.focusAnchor()
                           }
+                          onClick && onClick(event)
                         },
                         onKeyDown: (event) => {
                           anchorProps.onKeyDown(event)
@@ -274,6 +285,9 @@ class Dropdown extends Component<Props> {
                                   })
                           }
                         },
+                        onMouseDown: () => {
+                          this.setState({ preventBlur: true })
+                        },
                         ...restProps,
                       }
                       if (React.isValidElement(triggerElement)) {

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,19 @@ function Modal({
           onRequestClose()
         }
       }}
+      {...scrimProps}
     >
       <Box
+        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}
+        maxWidth={60}
+        padding={4}
+        paddingBottom={3}
+        radius={8}
+        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

@@ -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"
@@ -230,7 +263,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

package/src/TimeField/TimeField.test.tsx

@@ -121,7 +121,7 @@ it('does not change the meridiem on arrow key if arrow keys are ignored', () =>
   expect(meridiemInput).toHaveValue('PM')
 })
 
-it('changes the value of hours on arrow up or arrow down', () => {
+it('increment hour on arrow up', () => {
   const { hourInput } = setup( { hours: 1, minutes: 42 })
 
   expect(hourInput).toHaveValue("01")
@@ -129,6 +129,110 @@ it('changes the value of hours on arrow up or arrow down', () => {
   expect(hourInput).toHaveValue("02")
 })
 
+it('increment hour if arrow up on minutes exceeds max value', () => {
+  const { hourInput, minuteInput } = setup( { hours: 1, minutes: 59 })
+
+  expect(hourInput).toHaveValue("01")
+  userEvent.type(minuteInput, '{arrowup}')
+  expect(hourInput).toHaveValue("02")
+})
+
+it('decrement hour on arrow down', () => {
+  const { hourInput } = setup( { hours: 2, minutes: 42 })
+
+  expect(hourInput).toHaveValue("02")
+  userEvent.type(hourInput, '{arrowdown}')
+  expect(hourInput).toHaveValue("01")
+})
+
+it('decrement hour if arrow down on minutes exceeds min value', () => {
+  const { hourInput, minuteInput } = setup( { hours: 2, minutes: 0 })
+
+  expect(hourInput).toHaveValue("02")
+  userEvent.type(minuteInput, '{arrowdown}')
+  expect(hourInput).toHaveValue("01")
+})
+
+it('increment minute on arrow up', () => {
+  const { minuteInput } = setup( { hours: 1, minutes: 42 })
+
+  expect(minuteInput).toHaveValue("42")
+  userEvent.type(minuteInput, '{arrowup}')
+  expect(minuteInput).toHaveValue("43")
+})
+
+it('decrement minute on arrow down', () => {
+  const { minuteInput } = setup( { hours: 2, minutes: 43 })
+
+  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', () => {
+  const { minuteInput } = setup( { hours: 1, minutes: 59 })
+
+  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', () => {
+  const { minuteInput } = setup( { hours: 1, minutes: 0 })
+
+  expect(minuteInput).toHaveValue("00")
+  userEvent.type(minuteInput, '{arrowdown}')
+  expect(minuteInput).toHaveValue("59")
+})
+
+it('toggle meridiem if arrow up on hour exceeds eleven', () => {
+  const { hourInput, meridiemInput } = setup( { hours: 11 })
+  
+  expect(meridiemInput).toHaveValue('AM')
+  userEvent.type(hourInput, '{arrowup}')
+  expect(meridiemInput).toHaveValue('PM')
+})
+
+it('toggle meridiem if arrow down on hour exceeds min value', () => {
+  const { hourInput, meridiemInput } = setup( { hours: 1 })
+
+  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', () => {
+  const { hourInput } = setup( { hours: 12 })
+
+  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', () => {
+  const { hourInput } = setup( { hours: 23, twelveHourClock: false })
+
+  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', () => {
+  const { hourInput } = setup( { hours: 1 })
+
+  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', () => {
+  const { hourInput } = setup( { hours: 0, twelveHourClock: false })
+
+  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', () => {
   const { hourInput } = setup( { hours: 1, minutes: 42, ignoredKeys: ['ArrowUp', 'ArrowDown'] })