@planningcenter/tapestry-react 1.4.0 → 2.0.0

package/src/CheckboxGroup/CheckboxGroup.mdx

@@ -2,6 +2,7 @@
 title: CheckboxGroup
 category: Forms
 summary: Manage a group of checkboxes with one value and one callback.
+propsSummary: Accepts [Card](/card) props.
 ---
 
 ```jsx live

package/src/ChurchCenterStatus/ChurchCenterStatus.mdx

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

package/src/ChurchCenterStatus/ChurchCenterStatus.tsx

@@ -108,10 +108,10 @@ export function ChurchCenterStatus({
     !!renderPopoverFooter()
 
   const icon = {
-    check: 'checkmark',
-    exclamationTriangle: 'exclamation-triangle-filled',
-    external: 'external',
-    x: 'close',
+    check: 'general.check',
+    exclamationTriangle: 'general.exclamationTriangle',
+    external: 'general.newWindow',
+    x: 'general.x',
     ...icons,
   }
 

package/src/Collapse/Collapse.js

@@ -7,6 +7,8 @@ import { useLayoutEffect, useRef, useState } from 'react'
 const transition = 'height 200ms ease-out'
 
 export type Props = {
+  children?: any,
+
   /**
    * Controls whether or not children are visible.
    */

package/src/ColumnView/ColumnView.js

@@ -2,12 +2,15 @@
 import React, { Children } from 'react'
 
 import StackView from '../StackView'
+import { spacingValue } from '../system'
 
 function Column() {
   return null
 }
 
 export type Props = {
+  /** Often wraps the `ColumnView.Column` component. */
+  children?: any,
   /** The amount of columns to be rendered. */
   sizes?: Array<
     | {
@@ -19,11 +22,12 @@ export type Props = {
     | string
   >,
   /** The amount of space between columns. */
-  spacing?: number,
+  spacing?: number | string,
 }
 
 function ColumnView(props: Props) {
   const { children, sizes = [], spacing, ...restProps } = props
+  const parsedSpacing = spacingValue(spacing)
   const sortedColumns = Children.toArray(children)
     .sort((a, b) => (a.props.order || 0) - (b.props.order || 0))
     .reduce((columns, cell, index) => {
@@ -45,8 +49,8 @@ function ColumnView(props: Props) {
             basis={size === 'auto' ? '100%' : size.basis || size}
             shrink={size === 'auto' ? 1 : size.shrink || 0}
             grow={size === 'auto' ? 1 : size.grow || 0}
-            marginLeft={index === 0 ? null : spacing}
-            spacing={spacing}
+            marginLeft={index === 0 ? null : parsedSpacing}
+            spacing={parsedSpacing}
           >
             {column.map((cell) => cell.props.children)}
           </StackView>

package/src/ColumnView/ColumnView.mdx

@@ -2,6 +2,7 @@
 title: ColumnView
 category: Layout
 summary: Place children into different sized columns.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live

package/src/Combobox/Combobox.js

@@ -1,3 +1,4 @@
+// @flow
 import React, { Component } from 'react'
 
 import Box from '../Box'
@@ -8,7 +9,16 @@ import ComboboxItem from './ComboboxItem'
 import ComboboxItems from './ComboboxItems'
 import ComboboxPopover from './ComboboxPopover'
 
-class Combobox extends Component {
+type ComboboxProps = {
+  /**
+   * Usually takes `Combobox.Input`, `Combobox.Items` and `Combobox.Item` components.
+   */
+  children: any,
+  onSelect: Function,
+  selectedValue: any,
+}
+
+class Combobox extends Component<ComboboxProps> {
   static Input = ComboboxInput
 
   static Item = ComboboxItem

package/src/Combobox/Combobox.mdx

@@ -2,6 +2,7 @@
 title: Combobox
 category: Forms
 summary: Used for easily selecting a list of items that are paired with a text input. Composes [Combobox.Input](https://github.com/ministrycentered/tapestry-react/blob/master/packages/tapestry-react/src/Combobox/ComboboxInput.js) and [Popover](/popover).
+propsSummary: Accepts [Box](/box) props.
 ---
 
 ### Combobox
@@ -57,7 +58,7 @@ function App() {
       >
         <Combobox.Input
           autoFocus
-          renderLeft={<Icon name="search" />}
+          renderLeft={<Icon name="general.search" />}
           placeholder="Search by name, email, or phone number"
           value={value}
           onClear={value.length > 0 ? () => setValue('') : null}

package/src/Combobox/ComboboxPopover.js

@@ -188,7 +188,7 @@ class ComboboxPopover extends Component<Props> {
                       closeButton ? (
                         <Button
                           disabled={disabled}
-                          icon={{ name: 'close' }}
+                          icon={{ name: 'general.x' }}
                           title="close options"
                           theme={false}
                           {...closeButton}
@@ -197,7 +197,7 @@ class ComboboxPopover extends Component<Props> {
                         <Button
                           disabled={disabled}
                           icon={{
-                            name: isPopoverOpen ? 'close' : 'arrow-down',
+                            name: isPopoverOpen ? 'general.x' : 'general.downCaret',
                           }}
                           title={
                             isPopoverOpen ? 'close options' : 'open options'

package/src/DataTable/DataTable.js

@@ -41,6 +41,11 @@ export type Props = {
    */
   innerBodyRef?: Function,
 
+  /**
+   * Ref that is passed to `useImperativeHandle` which in turn returns `useCollapsibleRows.
+   */
+  dataTableRef?: any,
+
   /**
    * Controls whether or not sub-rows can be collapsed.
    */
@@ -193,6 +198,32 @@ export type Props = {
    */
   keyboardShortcuts?: Object<Function>,
 
+  /**
+   * `onDragStart: (event) => void`
+   *
+   * Called at the start of a child `Draggable` drag.
+   */
+  onDragStart?: Function,
+
+  /**
+   * `onDragEnd: (event) => void`
+   *
+   * Called at the end of a child `Draggable` drag.
+   */
+  onDragEnd?: Function,
+
+  /**
+   * `onDrop: (event) => void`
+   *
+   * This function will be called when a `Draggable` has been dropped. Returns the `onDragEnd` event with any `Draggable` `data` attached.
+   */
+  onDrop?: Function,
+
+  /**
+   * This prop controls whether or not the droppable can receive and reorder draggables. If true, draggables may move outside the droppable, but not added.
+   */
+  sourceOnly?: boolean,
+
   /**
    * Puts the table in a loading state and shows a spinner in the middle of the table.
    */
@@ -261,6 +292,23 @@ export type Props = {
         bodySubCell?: Object | Function,
       }
     | Array<Object | boolean>,
+
+  /**
+   * Current visible page number for pagination
+   */
+  currentPage: number,
+
+  /**
+   * `(nextPage: number) => undefined`
+   *
+   * Callback when new page is requested for pagination.
+   */
+  onPageChange: Function,
+
+  /**
+   * Total available pages for pagination.
+   */
+  totalPages: number,
 }
 
 const defaultHiddenColumnIds = []

package/src/DataTable/DataTable.mdx

@@ -279,7 +279,7 @@ const columns = [
   {
     label: 'Age',
     id: 'age',
-    header: <Icon name="person" />,
+    header: <Icon name="general.person" />,
     cell: 'age',
     css: {
       justifyContent: 'center',
@@ -330,7 +330,7 @@ render(function () {
           />
           <Button
             title="Condensed"
-            iconRight={condensed ? { name: 'checkmark' } : undefined}
+            iconRight={condensed ? { name: 'general.check' } : undefined}
             variant="outline"
             onClick={() => setCondensed(!condensed)}
           />

package/src/DataTable/components/CheckboxCell.js

@@ -1,11 +1,12 @@
 import React, { useCallback } from 'react'
 
-import Icon from './Icon'
+import Icon from '../../Icon'
+
 
 const iconPaths = {
-  fill: 'checkbox-0',
-  minus: 'checkbox-1',
-  checked: 'checkbox-2',
+  fill: 'tapestry.checkbox0',
+  minus: 'tapestry.checkbox1',
+  checked: 'tapestry.checkbox2',
 }
 
 const scaleStyles = {

package/src/DataTable/components/ColumnPicker.js

@@ -1,10 +1,8 @@
 import React from 'react'
 
-// import Checkbox from '../../Checkbox'
 import Dropdown from '../../Dropdown'
 import Text from '../../Text'
-
-import Checkbox from './CheckboxCell'
+import Checkbox from '../../Checkbox'
 
 const noop = () => null
 
@@ -17,7 +15,7 @@ function ColumnPicker({
   return (
     <Dropdown
       variant="outline"
-      icon={{ name: 'columns' }}
+      icon={{ name: 'general.threeVerticalBars' }}
       tooltip={{ title: 'Filter Columns' }}
       placement="bottom-end"
       closeOnSelect={false}
@@ -40,6 +38,8 @@ function ColumnPicker({
             <Checkbox
               checked={hiddenColumnIds.indexOf(column.id) === -1}
               onChange={noop}
+              label={null}
+              size="md"
             />
             <Text marginLeft={1}>{column.label || column.header}</Text>
           </Dropdown.Item>

package/src/DataTable/hooks/useCollapsibleRows.js

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

package/src/DataTable/hooks/useColumnSort.js

@@ -4,7 +4,7 @@ export const SORT_ASC = 'ASC'
 export const SORT_DESC = 'DESC'
 
 export function getIconDirection(direction) {
-  return direction === SORT_ASC ? 'arrow-up' : 'arrow-down'
+  return direction === SORT_ASC ? 'general.upCaret' : 'general.downCaret'
 }
 
 export function getOppositeSortDirection(direction) {

package/src/DataTable/utils/getParsedColumns.js

@@ -8,7 +8,7 @@ import {
   useAnySubRowsOpen,
 } from '../hooks/useCollapsibleRows'
 
-import Icon from '../components/Icon'
+import Icon from '../../Icon'
 
 const buttonStyles = {
   appearance: 'none',
@@ -50,7 +50,7 @@ function CollapseHeader({ accessibility }) {
         }}
       >
         <Icon
-          name="arrow-down"
+          name="general.downCaret"
           size="sm"
           style={{
             transform: anySubRowsOpen ? undefined : 'rotate(-90deg)',
@@ -75,7 +75,7 @@ function CollapseCell({ rowIndex }) {
       }}
     >
       <Icon
-        name="arrow-down"
+        name="general.downCaret"
         size="sm"
         style={{
           transform: isSubRowOpen ? undefined : 'rotate(-90deg)',
@@ -121,7 +121,7 @@ function getParsedColumns({
           {..._dragHandleProps}
         >
           <Icon
-            name="drag-handle"
+            name="general.dragHandle"
             size="sm"
             color="foregroundTertiary"
             style={{ cursor: 'grab' }}

package/src/DateField/DateField.js

@@ -46,6 +46,16 @@ export type DateFieldProps = {
    */
   value: Date,
 
+  /**
+   * Locks external scrollbars when open.
+   */
+  lockScrollWhileOpen?: boolean,
+
+  /**
+   * Attempts to keep popover in view clipping edges if too large.
+   */
+  keepInView?: boolean,
+
   /**
    * Accepts any valid [Popover](/popover) props.
    */
@@ -140,7 +150,7 @@ class DateField extends Component<DateFieldProps> {
                 readOnly
                 value={value ? format(value, formatValue) : ''}
                 renderRight={
-                  <Icon name="calendar" color="foregroundTertiary" />
+                  <Icon name="general.calendar" color="foregroundTertiary" />
                 }
                 onClick={this.togglePopover}
                 onBlur={requestBlur}

package/src/DateField/DateField.mdx

@@ -1,6 +1,7 @@
 ---
 title: DateField
 category: Forms
+propsSummary: Accepts [Input](/input) props.
 ---
 
 ```jsx live

package/src/Divider/Divider.mdx

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

package/src/DragDrop/DragDrop.mdx

@@ -6,12 +6,12 @@ summary: Custom components that wrap [react-beautiful-dnd](https://github.com/at
 
 ```jsx live
 const navigationItems = [
-  { icon: 'house', name: 'Home' },
-  { icon: 'person', name: 'Profile' },
-  { icon: 'checkmark-circle-filled', name: 'Check-In' },
-  { icon: 'people', name: 'Groups' },
-  { icon: 'calendar', name: 'Events' },
-  { icon: 'search', name: 'Search' },
+  { icon: 'general.outlinedLocationPin', name: 'Home' },
+  { icon: 'general.person', name: 'Profile' },
+  { icon: 'general.checkCircle', name: 'Check-In' },
+  { icon: 'general.twoPeople', name: 'Groups' },
+  { icon: 'general.calendar', name: 'Events' },
+  { icon: 'general.search', name: 'Search' },
 ]
 function Item({
   icon,
@@ -24,6 +24,20 @@ function Item({
   ...restProps
 }) {
   const { hover, hoverProps } = hooks.useHover()
+  
+  const actions = {
+    add: {
+      icon: "general.plusCircle",
+      color: "success",
+      label: "Add",
+    },
+    remove: {
+      icon: "general.minusCircle",
+      color: "error",
+      label: "Remove",
+    }
+  }
+
   return (
     <Card
       axis="horizontal"
@@ -40,10 +54,10 @@ function Item({
       <Icon name={icon} color="grey-7" />
       <Text grow={1}>{name}</Text>
       <Button
-        title={type === 'remove' ? 'Remove' : 'Add'}
+        title={actions.[type].label}
         icon={{
-          name: `${type}-circle-filled`,
-          color: type === 'remove' ? 'error' : 'success',
+          name: actions.[type].icon,
+          color: actions.[type].color,
         }}
         variant="naked"
         opacity={hover && hoverEnabled ? 1 : 0}

package/src/Drawer/Drawer.js

@@ -8,8 +8,10 @@ import React, {
 } from 'react'
 
 import StackView from '../StackView'
+import { useThemeValue } from '../system'
 
 function DrawerContents({ shouldClose, onClose, ...restProps }) {
+  const themeProps = useThemeValue('drawer')
   const ref = useRef(null)
   const [show, setShow] = useState(false)
 
@@ -51,6 +53,7 @@ function DrawerContents({ shouldClose, onClose, ...restProps }) {
       boxShadow="-6px 0px 6px -4px rgba(150,150,150,0.25)"
       backgroundColor="surfaceTertiary"
       transition="transform 240ms ease-out"
+      {...themeProps}
       {...restProps}
     />
   )

package/src/Drawer/Drawer.mdx

@@ -2,6 +2,7 @@
 title: Drawer
 category: General
 summary: Use to add collapsible navigation items or content anchored to the right side of the screen.
+propsSummary: Accepts [StackView](/stackview) props.
 ---
 
 ```jsx live
@@ -26,7 +27,7 @@ render(() => {
         >
           <Button
             title="close drawer"
-            icon={{ name: 'close', color: 'primary' }}
+            icon={{ name: 'general.x', color: 'primary' }}
             variant="naked"
             onClick={() => setOpen(false)}
           />

package/src/Dropdown/Dropdown.js

@@ -12,21 +12,67 @@ import Item, { ITEM_DISPLAY_NAME } from './Item'
 import Link, { LINK_DISPLAY_NAME, LINK_DATA } from './Link'
 
 type Props = {
-  /** Allows specifying a type or custom element that will be cloned and provided `Dropdown` trigger props. */
+  children?: React.ReactNode,
+
+  /** Allows specifying a type or custom element that will be cloned and provided `Dropdown` trigger props. (Defaults to a [Button](/button).) */
   triggerElement?: React.ElementType | React.ReactNode,
+
+  /** Gain access to the internal ref. */
+  innerRef?: any,
+
   /** Closes Popover upon selecting a `Dropdown.Item`. */
   closeOnSelect?: boolean,
+
   /** Forces Popover open for testing purposes. */
   forceOpen?: boolean,
+
   /** Externally control Popover open state on initial render. */
   defaultOpen?: boolean,
+
   /** Callback when Popover is opened. */
   onOpen?: boolean,
+
   /** Callback when Popover is closed. */
   onClose?: boolean,
+
   /** Overrides the default search function for selecting a dropdown item via keyboard. */
   onSearch?: func,
-  /** * Accepts any valid [Popover](/popover) props. */
+
+  /** Attempts to keep popover in view clipping edges if too large. */
+  keepInView?: boolean,
+
+  /** Locks external scrollbars when open. */
+  lockScrollWhileOpen?: boolean,
+
+  /** Matches anchor and popover widths. */
+  matchWidths?: boolean | 'minimum',
+
+  /** 
+   * `'top-start'
+    | 'top'
+    | 'top-end'
+    | 'right-start'
+    | 'right'
+    | 'right-end'
+    | 'bottom-start'
+    | 'bottom'
+    | 'bottom-end'
+    | 'left-start'
+    | 'left'
+    | 'left-end'`
+
+   * Where to place the popover. 
+  */
+  placement?: string,
+
+  /**
+   * Where to render the popover into. Accepts an HTML element or selector.
+   * Uses the closest fixed parent or `document.body` by default. This will only
+   * be computed once on initial render.
+   */
+  renderTo?: HTMLElement | string,
+
+  /** Accepts any valid [Popover](/popover) props. */
   popoverProps?: object,
 }
 
@@ -169,7 +215,7 @@ class Dropdown extends Component<Props> {
                         'aria-haspopup': true,
                         'aria-expanded': isPopoverOpen,
                         [arrowIconOnly ? 'icon' : 'iconRight']: {
-                          name: isPopoverOpen ? 'arrow-up' : 'arrow-down',
+                          name: isPopoverOpen ? 'general.upCaret' : 'general.downCaret',
                           size: 'sm',
                         },
                         title: arrowIconOnly ? 'arrow down' : restProps.title,

package/src/Dropdown/Dropdown.mdx

@@ -1,14 +1,15 @@
 ---
 title: Dropdown
 category: General
-summary: A compact way of displaying content or actionable items in a popover. Use [Select](/select) for selectable options if needed. Composes [Button](/button) and [Popover](/popover) components.
+summary: A compact way of displaying content or actionable items in a popover. Use [Select](/select) for selectable options if needed.
+propsSummary: Accepts [Button](/button) and [Popover](/popover) props.
 ---
 
 ### Items
 
 ```jsx live
 render(
-  <Dropdown icon={{ name: 'cog' }} title="Folder settings" variant="outline">
+  <Dropdown icon={{ name: 'general.cog' }} title="Folder settings" variant="outline">
     <Dropdown.Item onSelect={() => console.log('edit folder')}>
       Edit Folder
     </Dropdown.Item>