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

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'
@@ -17,6 +17,10 @@ export const cache = createCache({
   key: 'tapestry-react',
 })
 
+function mergeIntoNewObject(...merges: object[]) {
+  return merge({}, ...merges)
+}
+
 export const themeStorage = {
   get: () => window.localStorage.getItem(STORAGE_KEY),
   set: (value) => window.localStorage.setItem(STORAGE_KEY, value),
@@ -39,30 +43,31 @@ function mergeThemes(a: Theme = {}, b: Theme = {}) {
     button: {
       ...a.button,
       ...b.button,
-      themes: merge(a.button?.themes || {}, b.button?.themes || {}),
+      themes: mergeIntoNewObject(a.button?.themes || {}, b.button?.themes || {}),
     },
-    colors: merge(
+    colors: mergeIntoNewObject(
       flattenPalette(a.colors || {}),
       flattenPalette(b.colors || {})
     ),
     spinner: {
       ...a.spinner,
       ...b.spinner,
-      sizes: merge(a.spinner?.sizes || {}, b.spinner?.sizes || {}),
-      thickness: merge(a.spinner?.thickness || {}, b.spinner?.thickness || {}),
+      sizes: mergeIntoNewObject(a.spinner?.sizes || {}, b.spinner?.sizes || {}),
+      thickness: mergeIntoNewObject(a.spinner?.thickness || {}, b.spinner?.thickness || {}),
     },
   }
 }
 
+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/ThemeProvider/styles.ts

@@ -37,7 +37,7 @@ export const defaultColorProperties = objectToCSSProperties(
 export const styleReset = `
 ${getRootStyles(null, defaultColorProperties)}
 
-.tapestry-react-reset * {
+.tapestry-react-reset {
   appearance: none;
   background-color: transparent;
   border-width: 0px;
@@ -45,24 +45,34 @@ ${getRootStyles(null, defaultColorProperties)}
   border-color: transparent;
   box-sizing: border-box;
   color: inherit;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+  box-sizing: border-box;
   flex-grow: 0;
   flex-shrink: 0;
   flex-basis: auto;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   font-weight: 400;
-  margin: 0px;
-  min-height: 0px;
+  margin-top: 0;
+  margin-right: 0;
+  margin-bottom: 0;
+  margin-left: 0;
   min-width: 0px;
-  padding: 0px;
+  min-height: 0px;
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
   text-decoration: none;
 }
 
-.tapestry-react-reset *::-moz-focus-inner {
+.tapestry-react-reset::-moz-focus-inner {
+  padding-top: 0;
+  padding-right: 0;
+  padding-bottom: 0;
+  padding-left: 0;
   border: none;
-  padding: 0px;
 }
 
-.tapestry-react-reset *:focus:not(.focus-visible) {
+.tapestry-react-reset:focus:not(.focus-visible) {
   outline: 0px;
 }
 `

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

package/src/Tooltip/Tooltip.js

@@ -5,7 +5,6 @@ import React, {
   forwardRef,
   useRef,
   useState,
-  useCallback,
   useImperativeHandle,
   useEffect,
 } from 'react'
@@ -122,19 +121,18 @@ function Tooltip(props: Props, ref) {
     ...childProps
   } = useThemeProps('tooltip', props)
 
-  let isPageInView = true
-  let isFocused = false
-  let isMouseDown = false
+  let isPageInView = useRef(true)
+  let isMouseDown = useRef(false)
   let openTimeoutId = useRef(null)
   let closeTimeoutId = useRef(null)
 
-  // prevents tooltips showing when focused and navigating back to a page after leaving
-  const cleanupPageViewChange = useCallback(
-    pageViewChange((inView) => setTimeout(() => (isPageInView = inView)))
-  )
   const [isPopoverOpen, setIsPopoverOpen] = useState(defaultOpen)
 
   useEffect(() => {
+    // prevents tooltips showing when focused and navigating back to a page after leaving
+    const cleanupPageViewChange = pageViewChange((inView) =>
+      setTimeout(() => (isPageInView.current = inView))
+    )
     emitter.on('CLOSE_OPEN_TOOLTIPS', close)
     return () => {
       emitter.off('CLOSE_OPEN_TOOLTIPS', close)
@@ -178,7 +176,7 @@ function Tooltip(props: Props, ref) {
     }
   }, [triggerOnHover])
 
-  const createOpenTimeout = useCallback(() => {
+  const createOpenTimeout = () => {
     clearGlobalTimeout()
     if (openTimeoutId.current === null) {
       clearTimeout(closeTimeoutId.current)
@@ -191,31 +189,31 @@ function Tooltip(props: Props, ref) {
         )
       }
     }
-  })
+  }
 
-  const createCloseTimeout = useCallback(() => {
+  const createCloseTimeout = () => {
     startGlobalTimeout()
     if (closeTimeoutId.current === null) {
       clearTimeout(openTimeoutId.current)
       openTimeoutId.current = null
       closeTimeoutId.current = setTimeout(() => close(), closeDelay)
     }
-  })
+  }
 
-  const handleFocus = useCallback(() => {
-    if (isPageInView && !isMouseDown) {
+  const handleFocus = () => {
+    if (isPageInView.current && !isMouseDown.current) {
       open()
     }
-  })
+  }
 
-  const handleMouseDown = useCallback(() => {
-    isMouseDown = true
+  const handleMouseDown = () => {
+    isMouseDown.current = true
     close()
-  })
+  }
 
-  const handleMouseUp = useCallback(() => {
-    isMouseDown = false
-  })
+  const handleMouseUp = () => {
+    isMouseDown.current = false
+  }
 
   const child = Children.only(children)
   const {

package/src/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/src/system/split-styles.js

@@ -26,7 +26,9 @@ export default function SplitStyles({
   }
   return {
     ...restProps,
-    className,
+    className: className
+      ? `tapestry-react-reset ${className}`
+      : `tapestry-react-reset`,
     css: (theme) => {
       const propStyles = {}
       for (const prop in styleProps) {

package/src/system/utils.js

@@ -1,7 +1,7 @@
 import { useContext, useCallback } from 'react'
 import { ThemeContext } from '@emotion/react'
 import { darken, getLuminance, lighten, parseToRgb } from 'polished'
-import { get } from 'lodash'
+import get from 'lodash/get'
 
 import { getColor } from './colors'
 import defaultTheme from './default-theme'

package/src/utils.js

@@ -1,6 +1,6 @@
 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