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

package/src/DragDrop/DragDrop.mdx

@@ -0,0 +1,218 @@
+---
+title: DragDrop
+category: General
+summary: Custom components that wrap [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/). Uses the same API exported under `Provider`, `Droppable`, and `Draggable` components.
+---
+
+```jsx live
+const navigationItems = [
+  { 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,
+  name,
+  type,
+  index,
+  onAdd,
+  onRemove,
+  hoverEnabled = true,
+  ...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"
+      alignment="center"
+      marginBottom={1}
+      padding={1}
+      spacing={1}
+      elevation={1}
+      borderColor="transparent"
+      hover={hoverEnabled ? { borderColor: 'blue-5' } : {}}
+      {...hoverProps}
+      {...restProps}
+    >
+      <Icon name={icon} color="grey-7" />
+      <Text grow={1}>{name}</Text>
+      <Button
+        title={actions.[type].label}
+        icon={{
+          name: actions.[type].icon,
+          color: actions.[type].color,
+        }}
+        variant="naked"
+        opacity={hover && hoverEnabled ? 1 : 0}
+        transform={`scale(${hover && hoverEnabled ? 1 : 0.9})`}
+        transition="all 280ms ease-out"
+        onClick={() => (type === 'remove' ? onRemove() : onAdd({ icon, name }))}
+      />
+    </Card>
+  )
+}
+function App() {
+  const [activeNavigationItems, setActiveNavigationItems] = React.useState(
+    navigationItems.slice(1, 3)
+  )
+  const filteredNavigationItems = navigationItems.filter((item) =>
+    activeNavigationItems.every((activeItem) => activeItem.name !== item.name)
+  )
+  return (
+    <DragDrop.Provider>
+      <GridView width="100%" columns="1fr 240px">
+        <StackView padding={6} spacing={2}>
+          <DragDrop.Droppable
+            droppableId="navigation"
+            onDrop={(event) => {
+              if (event.source.droppableId === 'static') {
+                setActiveNavigationItems(
+                  utils.insertAtIndex({
+                    list: activeNavigationItems,
+                    index: event.destination.index,
+                    value: filteredNavigationItems[event.source.index],
+                  })
+                )
+              } else {
+                setActiveNavigationItems(
+                  utils.reorderArray({
+                    list: activeNavigationItems,
+                    startIndex: event.source.index,
+                    endIndex: event.destination.index,
+                  })
+                )
+              }
+            }}
+          >
+            {(provided, snapshot) => (
+              <Card
+                innerRef={provided.innerRef}
+                subdued
+                minWidth={32}
+                paddingTop={1}
+                paddingHorizontal={1}
+              >
+                {activeNavigationItems.map((item, index) => (
+                  <DragDrop.Draggable
+                    key={item.name}
+                    draggableId={item.name}
+                    index={index}
+                  >
+                    {(provided, snapshot) => (
+                      <Item
+                        type="remove"
+                        innerRef={provided.innerRef}
+                        onRemove={() => {
+                          setActiveNavigationItems((activeNavigationItems) => {
+                            const nextItems = [...activeNavigationItems]
+                            nextItems.splice(index, 1)
+                            return nextItems
+                          })
+                        }}
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                        {...item}
+                      />
+                    )}
+                  </DragDrop.Draggable>
+                ))}
+                {provided.placeholder}
+              </Card>
+            )}
+          </DragDrop.Droppable>
+        </StackView>
+        <StackView padding={3} spacing={1} backgroundColor="grey-1">
+          <DragDrop.Droppable
+            droppableId="static"
+            onDragStart={console.log}
+            onDragEnd={console.log}
+            sourceOnly
+          >
+            {(provided) => (
+              <StackView innerRef={provided.innerRef}>
+                {filteredNavigationItems.map((item, index) => (
+                  <DragDrop.Draggable
+                    key={item.name}
+                    draggableId={item.name}
+                    index={index}
+                    placeholder={() => (
+                      <Item type="add" opacity={0.65} {...item} />
+                    )}
+                  >
+                    {(provided, snapshot) => (
+                      <Item
+                        type="add"
+                        innerRef={provided.innerRef}
+                        onAdd={(item) =>
+                          setActiveNavigationItems((activeNavigationItems) => [
+                            ...activeNavigationItems,
+                            item,
+                          ])
+                        }
+                        {...provided.draggableProps}
+                        {...provided.dragHandleProps}
+                        {...item}
+                      />
+                    )}
+                  </DragDrop.Draggable>
+                ))}
+                {provided.placeholder}
+              </StackView>
+            )}
+          </DragDrop.Droppable>
+        </StackView>
+      </GridView>
+    </DragDrop.Provider>
+  )
+}
+render(<App />)
+```
+
+## Props
+
+Please refer to [react-beautiful-dnd](https://github.com/atlassian/react-beautiful-dnd/) for documentation on events and setting up drag and drop lists. In addition to the default functionality provided, we augment the library with the following props:
+
+### DragDrop.Droppable
+
+`onDragStart: (event) => void`
+
+Called at the start of a child `Draggable` drag.
+
+`onDragEnd: (event) => void`
+
+Called at the end of a child `Draggable` drag.
+
+`onDrop: (event) => void`
+
+This function will be called when a `Draggable` has been dropped. Returns the `onDragEnd` event with any `Draggable` `data` attached.
+
+`sourceOnly: boolean`
+
+This prop controls whether or not the droppable can receive and reorder draggables. If `true`, draggables may move outside the droppable, but not added.
+
+### DragDrop.Draggable
+
+`data: any`
+
+An additional `data` prop has been added to flow data more easily between components that will be attached to the `onDragEnd` and `onDrop` events.
+
+`placeholder: () => React.ReactNode`
+
+The `placeholder` prop allows a custom placeholder to be rendered when used in conjunction with the `sourceOnly` prop on `Droppable`.

package/src/DragDrop/index.js

@@ -0,0 +1,2 @@
+import DragDrop from './DragDrop'
+export default DragDrop

package/src/Drawer/Drawer.js

@@ -0,0 +1,96 @@
+// @flow
+import React, {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useRef,
+  useState,
+} 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)
+
+  useEffect(() => {
+    const node = ref.current
+    let firstTransition = true
+    function handleTransitionEnd(event) {
+      if (event.target === node && event.propertyName === 'transform') {
+        if (firstTransition) {
+          firstTransition = false
+        } else {
+          onClose()
+        }
+      }
+    }
+    setShow(true)
+    node.addEventListener('transitionend', handleTransitionEnd)
+    return () => {
+      node.removeEventListener('transitionend', handleTransitionEnd)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (shouldClose) {
+      setShow(false)
+    }
+  }, [shouldClose])
+
+  return (
+    <StackView
+      innerRef={ref}
+      width={52}
+      height="100%"
+      x={`${show ? 0 : 100}%`}
+      position="absolute"
+      bottom={0}
+      right={0}
+      zIndex={999}
+      boxShadow="-6px 0px 6px -4px rgba(150,150,150,0.25)"
+      backgroundColor="surfaceTertiary"
+      transition="transform 240ms ease-out"
+      {...themeProps}
+      {...restProps}
+    />
+  )
+}
+
+export type Props = {
+  /** Controls whether the drawer is visible or not. Won't render contents until open is `true`. */
+  open?: boolean,
+}
+
+function Drawer(props: Props) {
+  const { open, ...restProps } = props
+  const [localOpen, setLocalOpen] = useState(null)
+  const [shouldClose, setShouldClose] = useState(null)
+  const handleClose = useCallback(() => {
+    setLocalOpen(false)
+    setShouldClose(true)
+  }, [])
+
+  useLayoutEffect(() => {
+    if (open) {
+      setLocalOpen(true)
+      setShouldClose(false)
+    } else if (localOpen !== null) {
+      setShouldClose(true)
+    }
+  }, [open])
+
+  return (
+    localOpen && (
+      <DrawerContents
+        shouldClose={shouldClose}
+        onClose={handleClose}
+        {...restProps}
+      />
+    )
+  )
+}
+
+export default Drawer

package/src/Drawer/Drawer.mdx

@@ -0,0 +1,51 @@
+---
+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.
+themeKey: drawer
+---
+
+```jsx live
+render(() => {
+  const [open, setOpen] = React.useState(false)
+  const [saving, setSaving] = React.useState(false)
+  React.useEffect(() => {
+    if (saving) {
+      setTimeout(() => setSaving(false), 1000)
+    }
+  }, [saving])
+  return (
+    <StackView height={32}>
+      <Button title="Open Drawer" onClick={() => setOpen(true)} />
+      <Drawer open={open} width={32}>
+        <GridView
+          columns="auto 1fr auto"
+          alignment="center"
+          padding={1}
+          spacing={1}
+          backgroundColor="white"
+        >
+          <Button
+            title="close drawer"
+            icon={{ name: 'general.x', color: 'primary' }}
+            variant="naked"
+            onClick={() => setOpen(false)}
+          />
+          <Heading level={3} weight={700}>
+            Item Details
+          </Heading>
+          <Button
+            title="Save"
+            theme="primary"
+            spinner={saving}
+            onClick={() => setSaving(true)}
+          />
+        </GridView>
+        <Divider />
+        <StackView padding={2}>Drawer Content</StackView>
+      </Drawer>
+    </StackView>
+  )
+})
+```

package/src/Drawer/index.js

@@ -0,0 +1,2 @@
+import Drawer from './Drawer'
+export default Drawer

package/src/Dropdown/Dropdown.js

@@ -0,0 +1,322 @@
+// @flow
+import React, { Component, cloneElement, createElement } from 'react'
+
+import Button from '../Button'
+import FocusGroup from '../FocusGroup'
+import { ItemList, ItemListController } from '../ItemList'
+import Menu from '../Menu'
+import Popover from '../Popover'
+import { cloneChildren, generateId } from '../utils'
+
+import Item, { ITEM_DISPLAY_NAME } from './Item'
+import Link, { LINK_DISPLAY_NAME } from './Link'
+
+type 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,
+
+  /** 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,
+}
+
+class Dropdown extends Component<Props> {
+  static Item = Item
+
+  static Link = Link
+
+  static defaultProps = {
+    triggerElement: Button,
+    closeOnSelect: true,
+    defaultOpen: false,
+  }
+
+  constructor(props: Props) {
+    super(props)
+    this.state = {
+      isPopoverOpen: props.defaultOpen || props.forceOpen,
+      preventBlur: false,
+    }
+    this.id = generateId('dropdown')
+  }
+
+  openPopover = (event) => {
+    if (this.props.onOpen) {
+      this.props.onOpen()
+    }
+    this.setState({ isPopoverOpen: true })
+  }
+
+  closePopover = (event) => {
+    if (this.props.onClose) {
+      this.props.onClose()
+    }
+    if (!this.props.forceOpen) {
+      this.setState({ isPopoverOpen: false })
+    }
+  }
+
+  togglePopover = (event) => {
+    this.setState({ preventBlur: false })
+    if (this.state.isPopoverOpen) {
+      this.closePopover(event)
+    } else {
+      this.openPopover(event)
+    }
+  }
+
+  handleSelect = (data, { node }) => {
+    if (this.props.closeOnSelect) {
+      this.itemList.clearHighlightedIndex()
+      this.closePopover()
+      this.popover.focusAnchor()
+    }
+    if (node.tagName === 'A' && event.type !== 'click') {
+      node.click()
+    } else if (this.props.onSelect) {
+      this.props.onSelect(data)
+    }
+  }
+
+  render() {
+    const {
+      forceOpen,
+      closeOnSelect,
+      children,
+      as,
+      defaultOpen,
+      innerRef,
+      keepInView,
+      lockScrollWhileOpen,
+      matchWidths,
+      onClick,
+      onClose,
+      onKeyDown,
+      onOpen,
+      onSearch,
+      placement,
+      popoverProps,
+      renderTo,
+      triggerElement,
+      ...restProps
+    } = this.props
+    const { isPopoverOpen } = this.state
+    const arrowIconOnly = !restProps.icon && !restProps.title
+    let index = -1
+    return (
+      <FocusGroup onBlur={this.closePopover}>
+        {({ requestBlur, setRef }) => (
+          <ItemList
+            ref={(c) => (this.itemList = c)}
+            onSelect={this.handleSelect}
+          >
+            {({
+              getItemByText,
+              moveHighlightedIndex,
+              selectHighlightedItem,
+              setHighlightedIndex,
+              stringSearch,
+            }) => (
+              <Popover
+                {...popoverProps}
+                as={Menu}
+                ref={(component) => {
+                  this.popover = component
+                }}
+                innerRef={(node) => {
+                  setRef(`${this.id}-popover`)(node)
+                }}
+                role="menu"
+                tabIndex={-1}
+                elevation={2}
+                display={Boolean(restProps.spinner) ? 'none' : undefined}
+                onBlur={requestBlur}
+                matchWidths={matchWidths}
+                keepInView={keepInView}
+                lockScrollWhileOpen={lockScrollWhileOpen}
+                placement={placement}
+                renderTo={renderTo}
+                open={isPopoverOpen}
+                onRequestClose={() => {
+                  this.closePopover()
+                  this.popover.focusAnchor()
+                }}
+                anchorElement={(anchorProps) => (
+                  <ItemListController>
+                    {({ getHighlightedItemId }) => {
+                      const triggerProps = {
+                        innerRef: (node) => {
+                          if (typeof anchorProps.innerRef === 'function') {
+                            anchorProps.innerRef(node)
+                          } else if (anchorProps.innerRef?.current) {
+                            anchorProps.innerRef.current = node
+                          }
+                          setRef(`${this.id}-button`)(node)
+                          if (innerRef) {
+                            innerRef(node)
+                          }
+                        },
+                        'aria-activedescendant': getHighlightedItemId(),
+                        'aria-owns': getHighlightedItemId(),
+                        'aria-haspopup': true,
+                        'aria-expanded': isPopoverOpen,
+                        [arrowIconOnly ? 'icon' : 'iconRight']: {
+                          name: isPopoverOpen
+                            ? 'general.upCaret'
+                            : 'general.downCaret',
+                          size: 'sm',
+                        },
+                        title: arrowIconOnly ? 'arrow down' : restProps.title,
+                        tabIndex: 0,
+                        cursor: 'pointer',
+                        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)
+                          switch (event.key) {
+                            case 'ArrowUp':
+                              event.preventDefault()
+                              if (isPopoverOpen) {
+                                moveHighlightedIndex(-1)
+                              } else {
+                                this.openPopover()
+                                setTimeout(() => {
+                                  moveHighlightedIndex(-1)
+                                })
+                              }
+                              break
+                            case 'ArrowDown':
+                              event.preventDefault()
+                              if (isPopoverOpen) {
+                                moveHighlightedIndex(1)
+                              } else {
+                                this.openPopover()
+                                setTimeout(() => {
+                                  moveHighlightedIndex(1)
+                                })
+                              }
+                              break
+                            case 'Enter':
+                              if (isPopoverOpen) {
+                                event.preventDefault()
+                                selectHighlightedItem()
+                              }
+                              break
+                            case ' ':
+                              event.preventDefault()
+                              this.togglePopover()
+                              break
+                            default:
+                              onSearch
+                                ? onSearch(event)
+                                : stringSearch(event).then((text) => {
+                                    const item = getItemByText(text)
+                                    if (item) {
+                                      setHighlightedIndex(item.props.index)
+                                    }
+                                  })
+                          }
+                        },
+                        onMouseDown: () => {
+                          this.setState({ preventBlur: true })
+                        },
+                        ...restProps,
+                      }
+                      if (React.isValidElement(triggerElement)) {
+                        return cloneElement(triggerElement, triggerProps)
+                      } else {
+                        return createElement(triggerElement, triggerProps)
+                      }
+                    }}
+                  </ItemListController>
+                )}
+              >
+                {cloneChildren(children, (child) => {
+                  if (
+                    child.type.displayName === ITEM_DISPLAY_NAME ||
+                    child.type.displayName === LINK_DISPLAY_NAME
+                  ) {
+                    index++
+                    return { index }
+                  } else {
+                    return {}
+                  }
+                })}
+              </Popover>
+            )}
+          </ItemList>
+        )}
+      </FocusGroup>
+    )
+  }
+}
+
+export default Dropdown