@planningcenter/tapestry-react 1.4.0 → 2.0.0

package/src/List/List.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react'
 
 import StackView from '../StackView'
@@ -5,6 +6,29 @@ import { cloneChildren } from '../utils'
 
 import ListItem from './ListItem'
 
+type Props = {
+  /** Can accept any HTML element or custom component, but most often takes the `List.Item` component. */
+  children?: React.ReactNode,
+
+  /** When set this will add a 1px border top and bottom, along with the `borderColor`.  */
+  border?: Boolean,
+
+  /** Defaults to "separatorTertiary".  */
+  borderColor?: string,
+
+  /** Adds a dividing line between the List's children. (Defaults to true).  */
+  divider?: Boolean,
+
+  /** Defaults to "separatorTertiary".  */
+  dividerColor?: string,
+
+  /**
+   * `(index) => {}`
+   *
+   * Passes a callback function to the list's children. If the child is `List.Item` it will display a remove button and execute the callback.  */
+  onItemRemoveRequest?: Function,
+}
+
 function List({
   border,
   borderColor = 'separatorTertiary',
@@ -13,7 +37,7 @@ function List({
   dividerColor = 'separatorTertiary',
   onItemRemoveRequest,
   ...restProps
-}) {
+}: Props) {
   if (border) {
     restProps.borderTopWidth = 1
     restProps.borderTopColor = borderColor

package/src/List/List.mdx

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

package/src/List/ListItem.js

@@ -24,7 +24,7 @@ function ListItem({
       {children}
       {onRemoveRequest && (
         <Button
-          icon={{ name: 'remove-circle-filled' }}
+          icon={{ name: 'general.minusCircle' }}
           title={removeTitle}
           size="sm"
           theme="error"

package/src/Logo/Logo.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react'
 
 import Box from '../Box'
@@ -79,7 +80,15 @@ const type = {
   },
 }
 
-const Logo = ({ name, markOnly, ...restProps }) => {
+type Props = {
+  /** Accepts `"services"` or `"music-stand"`. */
+  name?: string,
+
+  /** Only displays the "iconmark" portion of the logo and not the wordmark. */
+  markOnly?: Boolean,
+}
+
+const Logo = ({ name, markOnly, ...restProps }: Props) => {
   if (markOnly) {
     return (
       <Box

package/src/Logo/Logo.mdx

@@ -2,6 +2,7 @@
 title: Logo
 category: General
 summary: Generates an SVG for the respective app's logo which includes the mark and/or type.
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live

package/src/Menu/Heading.js

@@ -15,4 +15,5 @@ function Heading({ children, ...restProps }) {
   )
 }
 
+Heading.displayName = 'Menu.Heading'
 export default Heading

package/src/Menu/Menu.js

@@ -1,3 +1,4 @@
+// @flow
 import React from 'react'
 
 import Card from '../Card'
@@ -5,7 +6,12 @@ import Card from '../Card'
 import Heading from './Heading'
 import Item from './Item'
 
-function Menu(props) {
+export type Props = {
+  /** Often wraps `Menu.Item` and `Menu.Heading` components. */
+  children?: any,
+}
+
+function Menu(props: Props) {
   return (
     <Card
       paddingVertical={0.5}

package/src/Menu/Menu.mdx

@@ -1,6 +1,7 @@
 ---
 title: Menu
 category: General
+propsSummary: Accepts [Card](/card) props.
 ---
 
 ```jsx live
@@ -19,7 +20,7 @@ render(
     <Menu.Item isHighlighted>Can be highlighted</Menu.Item>
     <Menu.Item>Should be used as a child of Menu</Menu.Item>
     <Menu.Item>
-      <Icon name="person" marginRight={1} /> Add icons and other things
+      <Icon name="general.person" marginRight={1} /> Add icons and other things
     </Menu.Item>
   </Menu>
 )

package/src/Modal/Modal.js

@@ -7,6 +7,7 @@ import { useDocumentEvent } from '../hooks'
 import { trapFocus } from '../utils'
 
 export type ModalProps = {
+  children?: any,
   /**
    * Close the modal when clicking outside of it.
    */

package/src/Modal/Modal.mdx

@@ -1,6 +1,7 @@
 ---
 title: Modal
 category: Overlays
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live

package/src/Modal/Modal.test.tsx

@@ -0,0 +1,113 @@
+import React, { useState } from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+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'
+
+describe('Modal', () => {
+  const TestModal = () => {
+    const [open, setOpen] = useState(false)
+
+    return (
+      <ThemeProvider>
+        <>
+          <Button
+            data-testid="modal-toggle"
+            onClick={() => setOpen(!open)}
+            title="Toggle modal"
+          />
+          <Modal open={open} onRequestClose={() => setOpen(false)}>
+            <Heading data-testid="modal-header">Hello</Heading>
+            <Dropdown>
+              {[1, 2, 3].map((n) => (
+                <Dropdown.Item data-testid={`dropdown-item-${n}`} key={n}>
+                  {n}
+                </Dropdown.Item>
+              ))}
+            </Dropdown>
+            <Select onChange={noop}>
+              {[1, 2, 3].map((n) => (
+                <Select.Option
+                  data-testid={`select-option-${n}`}
+                  key={n}
+                  value={n}
+                >
+                  {n}
+                </Select.Option>
+              ))}
+            </Select>
+          </Modal>
+        </>
+      </ThemeProvider>
+    )
+  }
+
+  describe('Keyboard navigation', () => {
+    it('should close modal on escape keypress (dropdown button has focus)', () => {
+      render(<TestModal />)
+      expect(screen.queryByTestId('modal-header')).toBeNull()
+      userEvent.click(screen.getByTestId('modal-toggle'))
+      expect(screen.getByTestId('modal-header')).toBeInTheDocument()
+      userEvent.keyboard(`{esc}`)
+      expect(screen.queryByTestId('modal-header')).toBeNull()
+    })
+
+    it('should not close modal when escape key closes a dropdown within modal', () => {
+      render(<TestModal />)
+      userEvent.click(screen.getByTestId('modal-toggle'))
+      const [, dropdown] = screen.getAllByRole('button')
+      expect(dropdown).toHaveFocus()
+      userEvent.keyboard('{arrowdown}')
+      userEvent.keyboard(`{esc}`)
+      expect(screen.getByTestId('modal-header')).toBeInTheDocument()
+    })
+
+    it('should close dropdown on escape & close modal on subsequent escape', () => {
+      render(<TestModal />)
+      userEvent.click(screen.getByTestId('modal-toggle'))
+      userEvent.keyboard('{arrowdown}')
+      userEvent.keyboard(`{esc}`)
+      expect(screen.getByTestId('modal-header')).toBeInTheDocument()
+      userEvent.keyboard(`{esc}`)
+      expect(screen.queryByTestId('modal-header')).toBeNull()
+    })
+
+    it('should hide select popover on escape, but select remains in dom', () => {
+      render(<TestModal />)
+      userEvent.click(screen.getByTestId('modal-toggle'))
+      userEvent.tab()
+      userEvent.keyboard('{arrowdown}')
+      userEvent.keyboard(`{esc}`)
+      expect(screen.queryByTestId('select-option-1')).toBeInTheDocument()
+    })
+
+    it('should hide select popover on escape, close (unmount) select popover on subsequent escape, persist modal', () => {
+      render(<TestModal />)
+      userEvent.click(screen.getByTestId('modal-toggle'))
+      userEvent.tab()
+      userEvent.keyboard('{arrowdown}')
+      userEvent.keyboard(`{esc}`)
+      expect(screen.queryByTestId('select-option-1')).toBeInTheDocument()
+      userEvent.keyboard(`{esc}`)
+      expect(screen.queryByTestId('select-option-1')).toBeNull()
+      expect(screen.queryByTestId('modal-header')).toBeInTheDocument()
+    })
+
+    it('should hide select popover on escape, close (unmount) select popover on subsequent escape, close modal on subsequent escape', () => {
+      render(<TestModal />)
+      userEvent.click(screen.getByTestId('modal-toggle'))
+      userEvent.tab()
+      userEvent.keyboard('{arrowdown}')
+      userEvent.keyboard(`{esc}`)
+      expect(screen.queryByTestId('select-option-1')).toBeInTheDocument()
+      userEvent.keyboard(`{esc}`)
+      expect(screen.queryByTestId('select-option-1')).toBeNull()
+      expect(screen.queryByTestId('modal-header')).toBeInTheDocument()
+      userEvent.keyboard(`{esc}`)
+      expect(screen.queryByTestId('modal-header')).toBeNull()
+    })
+  })
+})

package/src/NumberField/NumberField.js

@@ -5,6 +5,10 @@ import InputField from '../Input/InputField'
 import { padNumber, getTabbableSiblings } from '../utils'
 
 type Props = {
+  /**
+   * Render custom component or HTML element tag. (Defaults to a [InputField](/input.inputfield) component.). */
+  as?: any,
+
   /**
    * An array of keys to ignore when pushed.
    * ex: ["ArrowUp", "ArrowDown"].
@@ -29,11 +33,23 @@ type Props = {
    */
   onChange: (value: string) => null,
 
+  /**
+   * Maps to the input's `onBlur` prop.
+   */
+  onBlur?: () => null,
+
+  onKeyDown?: Function,
+
   /**
    * The amount of 0s to pad the value with.
    */
   pad: number,
 
+  /**
+   * Forces the input text to stay fully selected while interacting with it.
+   */
+  highlightOnInteraction: boolean,
+
   /**
    * String to display when value is empty.
    */
@@ -49,6 +65,9 @@ type Props = {
    * The value of the input.
    */
   value: number,
+
+  autoWidth: boolean,
+  moveFocusOnMax: boolean,
 }
 
 const MIN_VALUE = -Infinity

package/src/Page/Page.mdx

@@ -102,7 +102,7 @@ render(
       }
     >
       <StackView axis="horizontal" alignment="center" spacing={2}>
-        <Icon name="person" size="xxl" color="white" />
+        <Icon name="general.person" size="xxl" color="white" />
         <StackView>
           <Heading level={5} color="light-7">
             Steingard Tests > Sunday

package/src/PagerView/PagerView.js

@@ -48,6 +48,7 @@ function parseTrackValue(value) {
 const PageViewContext = createContext({})
 
 export type Props = {
+  children?: any,
   /**
    * Which axis the track moves on. Defaults to `horizontal`.
    */

package/src/PagerView/PagerView.mdx

@@ -1,7 +1,8 @@
 ---
 title: PagerView
 category: Layout
-summary: Allows paging between views. Use with the `useRovingIndex` hook to control the [activeViewIndex](#activeViewIndex).
+summary: Allows paging between views. Use with the [useRovingIndex](https://github.com/ministrycentered/tapestry-react/blob/next/packages/tapestry-react/src/hooks/use-roving-index.js) hook to control the [activeViewIndex](#activeViewIndex).
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live
@@ -45,14 +46,14 @@ render(() => {
       <StackView axis="horizontal" distribution="center" spacing={1}>
         <Button
           title="Prev"
-          icon={{ name: 'caret-left' }}
+          icon={{ name: 'general.leftChevron', size: 'sm' }}
           radius="circle"
           disabled={moveBackwardDisabled}
           onClick={() => moveActiveIndex(-1)}
         />
         <Button
           title="Next"
-          icon={{ name: 'caret-right' }}
+          icon={{ name: 'general.rightChevron', size: 'sm' }}
           radius="circle"
           disabled={moveForwardDisabled}
           onClick={() => moveActiveIndex(1)}
@@ -83,7 +84,7 @@ function Arrangement({ expanded, expandOrShrink }) {
         actions={
           <Button
             title={expanded ? 'show single-view' : 'show multi-view'}
-            icon={{ name: expanded ? 'caret-shrink' : 'caret-grow' }}
+            icon={{ name: expanded ? 'general.twoInwardChevrons' : 'general.twoOutwardChevrons' }}
             variant="naked"
             onClick={expandOrShrink}
           />
@@ -99,10 +100,10 @@ function Key({ name, expanded, expandOrShrink }) {
       <Toolbar
         title={name}
         actions={[
-          <Button title="edit" icon={{ name: 'pencil' }} variant="naked" />,
+          <Button title="edit" icon={{ name: 'general.pencil' }} variant="naked" />,
           <Button
             title={expanded ? 'show single-view' : 'show multi-view'}
-            icon={{ name: expanded ? 'caret-shrink' : 'caret-grow' }}
+            icon={{ name: expanded ? 'general.twoInwardChevrons' : 'general.twoOutwardChevrons' }}
             variant="naked"
             onClick={expandOrShrink}
           />,
@@ -157,7 +158,7 @@ render(() => {
       <GridView columns="auto 1fr auto" spacing={1}>
         <Button
           title="Prev"
-          icon={{ name: 'caret-left' }}
+          icon={{ name: 'general.leftChevron', size: 'sm' }}
           radius="circle"
           disabled={moveBackwardDisabled}
           onClick={() => moveActiveIndex(-1)}
@@ -187,7 +188,7 @@ render(() => {
         </StackView>
         <Button
           title="Next"
-          icon={{ name: 'caret-right' }}
+          icon={{ name: 'general.rightChevron', size: 'sm' }}
           radius="circle"
           disabled={moveForwardDisabled}
           onClick={() => moveActiveIndex(1)}

package/src/Pagination/Pagination.js

@@ -123,7 +123,7 @@ class Pagination extends Component<PaginationProps> {
         <Button
           onClick={onPageChange.bind(null, currentPage - 1)}
           disabled={currentPage === 1}
-          icon={{ name: 'caret-left' }}
+          icon={{ name: 'general.leftChevron', size: 'xs' }}
           tooltip={{ title: 'Previous Page' }}
           variant="naked"
           shrink={0}
@@ -132,7 +132,7 @@ class Pagination extends Component<PaginationProps> {
         <Button
           onClick={onPageChange.bind(null, currentPage + 1)}
           disabled={currentPage === totalPages}
-          icon={{ name: 'caret-right' }}
+          icon={{ name: 'general.rightChevron', size: 'xs' }}
           tooltip={{ title: 'Next Page' }}
           variant="naked"
           shrink={0}

package/src/Pagination/Pagination.mdx

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

package/src/Popover/Popover.test.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import '@testing-library/jest-dom/extend-expect'
+import { Box, Text, Button, Popover } from '..'
+
+const PopBasic = ({ children }) => {
+  const [open, setOpen] = useState(false)
+  return (
+    <Box id="container">
+      <Popover
+        open={open}
+        offset={1}
+        renderTo="#container"
+        anchorElement={
+          <Button
+            title="Toggle"
+            onClick={() => setOpen(!open)}
+            id="anchor-element"
+          />
+        }
+      >
+        {children}
+      </Popover>
+    </Box>
+  )
+}
+
+describe('Popover', () => {
+  it('should not render string in closed Popover', () => {
+    const string = 'Test Text'
+    render(
+      <PopBasic>
+        <Text>{string}</Text>
+      </PopBasic>
+    )
+    expect(screen.queryByText(string)).toBeNull()
+  })
+
+  it('should render string in open Popover', () => {
+    const string = 'Test Text'
+    render(
+      <PopBasic>
+        <Text>{string}</Text>
+      </PopBasic>
+    )
+    const openPopover = screen.getByRole('button')
+    userEvent.click(openPopover)
+    expect(screen.getByText(string)).toBeInTheDocument()
+  })
+
+  it('should focus open button on click', () => {
+    render(
+      <PopBasic>
+        <Box />
+      </PopBasic>
+    )
+    const openPopover = screen.getByRole('button')
+    userEvent.click(openPopover)
+    expect(openPopover).toHaveFocus()
+  })
+})

package/src/Popover/Popover.tsx

@@ -176,6 +176,9 @@ export const Popover = React.forwardRef(
     }
     const requestClose = (event) => {
       if (event.key === 'Escape' && onRequestClose) {
+        if (open) {
+          event.nativeEvent.stopImmediatePropagation()
+        }
         onRequestClose()
       }
       if (onKeyDown) {

package/src/Popover/rewireTabOrder.ts

@@ -33,24 +33,19 @@ class RewireTabOrder {
     this.lastFocusableElement = this.tabbables[this.tabbables.length - 1]
     this.originalActiveElement = document.activeElement as HTMLElement
     this.nextActiveElement = getNextActiveElement(this.originalActiveElement)
+
     this.originalActiveElement.addEventListener(
       'keydown',
       this.moveFocusToTargetFromTriggerElement
     )
     this.firstFocusableElement.addEventListener(
       'keydown',
-      this.moveFocusFromTargetToTriggerElement
+      this.moveFocusToTargetFromFirstElement
+    )
+    this.lastFocusableElement.addEventListener(
+      'keydown',
+      this.moveFocusToTargetFromLastElement
     )
-    if (this.nextActiveElement) {
-      this.nextActiveElement.addEventListener(
-        'keydown',
-        this.moveFocusToTargetFromNextElement
-      )
-      this.lastFocusableElement.addEventListener(
-        'keydown',
-        this.moveFocusFromTargetToNextElement
-      )
-    }
   }
 
   destroy() {
@@ -63,57 +58,44 @@ class RewireTabOrder {
     )
     this.firstFocusableElement.removeEventListener(
       'keydown',
-      this.moveFocusFromTargetToTriggerElement
+      this.moveFocusToTargetFromFirstElement
+    )
+    this.lastFocusableElement.removeEventListener(
+      'keydown',
+      this.moveFocusToTargetFromLastElement
     )
-    if (this.nextActiveElement) {
-      this.nextActiveElement.removeEventListener(
-        'keydown',
-        this.moveFocusToTargetFromNextElement
-      )
-      this.lastFocusableElement.removeEventListener(
-        'keydown',
-        this.moveFocusFromTargetToNextElement
-      )
-    }
-  }
-
-  focusOriginalActiveElement = () => {
-    this.originalActiveElement.focus()
-  }
-
-  focusNextActiveElement = () => {
-    this.nextActiveElement.focus()
   }
 
   moveFocusToTargetFromTriggerElement = (event) => {
     if (!event.shiftKey && event.keyCode === TAB_KEY) {
       event.preventDefault()
-      this.firstFocusableElement.focus()
+      if (this.tabbables.includes(this.nextActiveElement)) {
+        this.nextActiveElement.focus()
+      } else {
+        this.firstFocusableElement.focus()
+      }
     }
   }
 
-  moveFocusFromTargetToTriggerElement = (event) => {
+  moveFocusToTargetFromFirstElement = (event) => {
     if (
       event.target === this.firstFocusableElement &&
       event.shiftKey &&
       event.keyCode === TAB_KEY
     ) {
-      event.preventDefault()
-      this.originalActiveElement.focus()
-    }
-  }
-
-  moveFocusToTargetFromNextElement = (event) => {
-    if (event.shiftKey && event.keyCode === TAB_KEY) {
       event.preventDefault()
       this.lastFocusableElement.focus()
     }
   }
 
-  moveFocusFromTargetToNextElement = (event) => {
-    if (!event.shiftKey && event.keyCode === TAB_KEY) {
+  moveFocusToTargetFromLastElement = (event) => {
+    if (
+      event.target === this.lastFocusableElement &&
+      !event.shiftKey &&
+      event.keyCode === TAB_KEY
+    ) {
       event.preventDefault()
-      this.nextActiveElement.focus()
+      this.firstFocusableElement.focus()
     }
   }
 }

package/src/Progress/Progress.js

@@ -2,6 +2,7 @@
 import React from 'react'
 
 import Box from '../Box'
+import { useThemeProps } from '../system'
 
 export type Props = {
   /**
@@ -14,8 +15,12 @@ export type Props = {
   activeColor?: string,
 }
 
-function Progress(props: Props) {
-  const { value, activeColor = 'primary', ...restProps } = props
+function Progress({ value, ...restProps }: Props) {
+  const { activeColor = 'primary', ...themeProps } = useThemeProps(
+    'progress',
+    restProps
+  )
+
   return (
     <Box
       role="progressbar"
@@ -26,7 +31,7 @@ function Progress(props: Props) {
       position="relative"
       overflow="hidden"
       backgroundColor="grey-3"
-      {...restProps}
+      {...themeProps}
     >
       <Box
         position="absolute"

package/src/Progress/Progress.mdx

@@ -2,6 +2,7 @@
 title: Progress
 category: Indicators
 summary: Display progress towards the completion of a task. Composes [Box](/box).
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ```jsx live

package/src/Radio/Radio.js

@@ -10,8 +10,8 @@ import VariantProvider from '../VariantProvider'
 import { useThemeValue } from '../system'
 
 const iconPaths = {
-  fill: 'radio-0',
-  checked: 'radio-1',
+  fill: 'tapestry.radio0',
+  checked: 'tapestry.radio1',
 }
 
 export type Props = {
@@ -25,6 +25,8 @@ export type Props = {
    */
   label?: string,
 
+  id?: string | number,
+
   /**
    * Checks the radio.
    */

package/src/Radio/Radio.mdx

@@ -2,6 +2,7 @@
 title: Radio
 category: Forms
 summary: Use radios to present a list of options where users can only make a single selection.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live