@planningcenter/tapestry-react 2.9.2 → 2.10.0-rc.2

package/src/Pagination/Pagination.tsx

@@ -1,201 +0,0 @@
-import React from 'react'
-
-import Box from '../Box'
-import Button from '../Button'
-import Group from '../Group'
-import StackView from '../StackView'
-import { range } from '../utils'
-import { parseColor } from '../system/utils'
-import { useWindowWidth } from '@react-hook/window-size'
-import { useThemeValue, useThemeProps } from '../system'
-
-function getVisiblePages(currentPage, totalPages, visiblePages) {
-  const start = Math.max(
-    1,
-    Math.min(
-      totalPages - visiblePages + 1,
-      Math.floor(currentPage - visiblePages / 2 + 1)
-    )
-  )
-  const stop = Math.min(totalPages, start + visiblePages - 1)
-  const primaryWindow = range(start, stop + 1)
-  const showFirstPage = start > 1
-  const showLastPage = stop < totalPages
-
-  if (showFirstPage) {
-    primaryWindow.shift()
-    primaryWindow.shift()
-  }
-  if (showLastPage) {
-    primaryWindow.pop()
-    primaryWindow.pop()
-  }
-
-  const first = showFirstPage ? [1, '...'] : []
-  const last = showLastPage ? ['...', totalPages] : []
-  return first.concat(primaryWindow).concat(last)
-}
-
-export type PaginationProps = {
-  /**
-   * Change the color of the active page
-   */
-  activeColor?: string
-
-  /**
-   * Accepts any valid [Button](/button) props.
-   */
-  activePageLinkProps?: object
-
-  /**
-   * Current visible page number
-   */
-  currentPage: number
-
-  /**
-   * Accepts any valid [Button](/button) props.
-   */
-  navButtonProps?: object
-
-  /**
-   * Callback when new page is requested
-   */
-  onPageChange: (nextPage: number) => undefined
-
-  /**
-   * Accepts any valid [Button](/button) props.
-   */
-  pageLinkProps?: object
-
-  /**
-   * Total available pages
-   */
-  totalPages: number
-
-  /**
-   * Amount of visible pages
-   */
-  visiblePages?: number
-}
-
-const NavButton = ({ disabled, iconName, ...props }) => {
-  return (
-    <Button
-      backgroundColor={disabled ? '#f7f7f7' : '#f2f2f2'}
-      disabled={disabled}
-      icon={{
-        color: disabled ? '#cfcfcf' : undefined,
-        name: iconName,
-        size: 'xs',
-      }}
-      opacity={1}
-      shrink={0}
-      square
-      variant="fill"
-      {...props}
-    />
-  )
-}
-
-export default function Pagination({
-  currentPage,
-  onPageChange = () => null,
-  visiblePages,
-  totalPages = 0,
-  ...restProps
-}: PaginationProps) {
-  const { xs: xsBreakpoint } = useThemeValue('breakpoints')
-  const {
-    activeColor = '#5b8bf7',
-    navButtonProps,
-    pageLinkProps,
-    activePageLinkProps,
-    ...themeProps
-  } = useThemeProps('pagination', { ...restProps })
-
-  const currentWidth = useWindowWidth()
-
-  function renderGap(key) {
-    return <Box key={key} userSelect="none" cursor="default" children="…" />
-  }
-
-  function renderPageLink(number) {
-    const isCurrentPage = currentPage === number
-    const activeBackgroundColor = parseColor({ base: activeColor, alpha: 0.1 })
-    const outlineStyle = {
-      border: `1px solid ${activeColor}`,
-      color: isCurrentPage ? '#fff' : activeColor,
-    }
-
-    return (
-      <Button
-        active={{
-          backgroundColor: isCurrentPage ? activeColor : activeBackgroundColor,
-          ...outlineStyle,
-        }}
-        key={number}
-        fontWeight={500}
-        hover={{
-          backgroundColor: isCurrentPage ? activeColor : '#fff',
-          ...outlineStyle,
-        }}
-        onClick={onPageChange.bind(null, number)}
-        shrink={0}
-        square
-        title={number}
-        variant={isCurrentPage ? 'fill' : 'naked'}
-        {...pageLinkProps}
-        {...(isCurrentPage && {
-          backgroundColor: activeColor,
-          color: '#fff',
-          ...activePageLinkProps,
-        })}
-      />
-    )
-  }
-
-  function renderPageLinks() {
-    const visiblePagesToShow =
-      currentWidth <= xsBreakpoint ? visiblePages || 5 : visiblePages || 7
-    const pages = getVisiblePages(currentPage, totalPages, visiblePagesToShow)
-    return pages.map((page, index) =>
-      page === '...' ? renderGap(page + index) : renderPageLink(page)
-    )
-  }
-
-  if (totalPages <= 1) {
-    return null
-  } else {
-    return (
-      <StackView
-        alignment="center"
-        axis="horizontal"
-        distribution="center"
-        overflow="auto"
-        paddingVertical={1}
-        shrink={0}
-        spacing={0.5}
-        width="100%"
-        {...themeProps}
-      >
-        <Group spacing={0.5}>
-          <NavButton
-            disabled={currentPage === 1}
-            iconName="general.leftChevron"
-            onClick={onPageChange.bind(null, currentPage - 1)}
-            tooltip={{ title: 'Previous Page' }}
-            {...navButtonProps}
-          />
-          <NavButton
-            disabled={currentPage === totalPages}
-            iconName="general.rightChevron"
-            onClick={onPageChange.bind(null, currentPage + 1)}
-            tooltip={{ title: 'Next Page' }}
-            {...navButtonProps}
-          />
-        </Group>
-        {renderPageLinks()}
-      </StackView>
-    )
-  }
-}

package/src/Pagination/index.js

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

package/src/Popover/Popover.mdx

@@ -1,66 +0,0 @@
----
-title: Popover
-category: Overlays
-themeKey: popover
----
-
-```jsx live
-render(() => {
-  const [open, setOpen] = React.useState(true)
-  return (
-    <Box id="container">
-      <Popover
-        anchorElement={
-          <Input onFocus={() => setOpen(true)} onBlur={() => setOpen(false)} />
-        }
-        renderTo="#container"
-        open={open}
-      >
-        <Box padding={1} backgroundColor="blue-5" color="white">
-          Popover Content
-        </Box>
-      </Popover>
-    </Box>
-  )
-})
-```
-
-```jsx live
-render(() => {
-  const [open, setOpen] = React.useState(false)
-  return (
-    <Box
-      id="scroll-container"
-      height={20}
-      padding={4}
-      backgroundColor="backgroundSecondary"
-      position="relative"
-      overflow="auto"
-    >
-      <Text align="center">Scroll Me</Text>
-      <Popover
-        anchorElement={
-          <Button
-            title="Toggle Popover"
-            marginVertical={30}
-            theme="primary"
-            onClick={() => setOpen((bool) => !bool)}
-          />
-        }
-        renderTo="#scroll-container"
-        open={open}
-      >
-        <Tooltip
-          placement="bottom"
-          title="Tooltip"
-          renderTo="#scroll-container"
-        >
-          <Box padding={1} backgroundColor="blue-5" color="white">
-            Popover Content
-          </Box>
-        </Tooltip>
-      </Popover>
-    </Box>
-  )
-})
-```

package/src/Popover/Popover.test.tsx

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

@@ -1,271 +0,0 @@
-import * as React from 'react'
-import { createPopper } from '@popperjs/core'
-
-import Box from '../Box'
-import Portal from '../Portal'
-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
-  onKeyDown(event: React.SyntheticEvent): void
-}
-
-export type PopoverProps = {
-  /**
-   * Controls the default component or tag being rendered.
-   */
-  as?: any
-
-  /**
-   * The element to attach the popover to. Clones the element's ref to calculate
-   * position relative to the optional `relativeTo` prop or the `renderTo` element.
-   */
-  anchorElement: React.ReactElement | ((anchorCallbackProps) => null)
-
-  /**
-   * 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'
-
-  /**
-   * Controls rendering of the popover.
-   */
-  open: boolean
-
-  /**
-   * Controls the space between the popover and its anchor.
-   */
-  offset: number
-
-  /**
-   * Called when the popover should close.
-   */
-  onRequestClose?: () => void
-
-  /**
-   * Where to place the popover.
-   */
-  placement?:
-    | '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 relative to. Uses `renderTo` by default.
-   */
-  relativeTo?: any
-
-  /**
-   * 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
-
-  /**
-   * Determines if the popover should flip or not when it overflows.
-   */
-  shouldFlip?: boolean
-
-  /**
-   * Calls `as` `innerRef` to calculate popover's bounds.
-   */
-  innerRef?: any
-} & React.HTMLAttributes<any>
-
-export const Popover = React.forwardRef(
-  (
-    {
-      anchorElement,
-      as: Element = Box,
-      innerRef,
-      keepInView = true,
-      lockScrollWhileOpen,
-      matchWidths,
-      offset = 8,
-      open,
-      onKeyDown,
-      onRequestClose,
-      placement = 'bottom',
-      relativeTo,
-      renderTo,
-      shouldFlip = false,
-      ...restProps
-    }: PopoverProps,
-    ref
-  ) => {
-    const { zIndex = 10000, ...themeProps } = useThemeProps(
-      'popover',
-      restProps
-    )
-    const anchorRef = React.useRef(null)
-    const popperRef = React.useRef(null)
-    const unlockScroll = React.useRef(null)
-    const unwireTabOrder = React.useRef(null)
-    const [renderPopperTo, setRenderPopperTo] = React.useState(renderTo)
-    const setPopperInnerRef = (popperNode) => {
-      if (popperNode) {
-        if (popperRef.current === null) {
-          const anchorNode = relativeTo
-            ? relativeTo.current || relativeTo
-            : anchorRef.current
-          popperRef.current = createPopper(anchorNode, popperNode, {
-            placement,
-            // PopperJS is written in Flow and TS isn't playing nice :(
-            // @ts-ignore
-            modifiers: getModifiers({
-              matchWidths,
-              offset,
-              keepInView,
-              shouldFlip,
-            }),
-          })
-
-          if (unwireTabOrder.current) {
-            unwireTabOrder.current()
-          }
-          unwireTabOrder.current = rewireTabOrder(popperNode)
-
-          if (lockScrollWhileOpen) {
-            if (unlockScroll.current) {
-              unlockScroll.current()
-            }
-            unlockScroll.current = lockScroll(popperNode)
-          }
-        }
-      } else {
-        cleanup()
-      }
-      if (typeof innerRef === 'function') {
-        innerRef(popperNode)
-      } else if (innerRef?.current) {
-        innerRef.current = popperNode
-      }
-    }
-    const cleanup = () => {
-      if (popperRef.current) {
-        popperRef.current.destroy()
-        popperRef.current = null
-      }
-      if (unwireTabOrder.current) {
-        unwireTabOrder.current()
-        unwireTabOrder.current = null
-      }
-      if (unlockScroll.current) {
-        unlockScroll.current()
-        unlockScroll.current = null
-      }
-    }
-    const requestClose = (event) => {
-      if (event.key === 'Escape' && onRequestClose) {
-        if (open) {
-          event.nativeEvent.stopImmediatePropagation()
-        }
-        onRequestClose()
-      }
-      if (onKeyDown) {
-        onKeyDown(event)
-      }
-    }
-
-    // cleanup when open has changed to `false` and on component unmount
-    React.useEffect(() => {
-      return () => {
-        if (open === false) {
-          cleanup()
-        }
-      }
-    }, [open])
-
-    // reposition the popover if an update in React occured while open
-    // for instance this can happen when selecting multiple items in a menu and the anchor grows/shrinks
-    React.useEffect(() => {
-      if (open && popperRef.current) {
-        popperRef.current.update()
-      }
-    })
-
-    // by default this will make sure popovers render in the same fixed area as the anchor
-    React.useEffect(() => {
-      if (renderPopperTo === undefined && anchorElement) {
-        setRenderPopperTo(getFixedParent(anchorElement))
-      }
-    }, [anchorElement])
-
-    // carried over from previous implementation, used exclusively in Dropdown
-    React.useImperativeHandle(ref, () => ({
-      focusAnchor: () => {
-        if (anchorRef.current && anchorRef.current.focus) {
-          anchorRef.current.focus()
-        }
-      },
-    }))
-
-    return (
-      <Portal renderTo={renderPopperTo}>
-        {typeof anchorElement === 'function'
-          ? anchorElement({
-              innerRef: (node) => (anchorRef.current = node),
-              onKeyDown: requestClose,
-            })
-          : React.cloneElement(anchorElement, {
-              innerRef: (node) => {
-                anchorRef.current = node
-                if (typeof anchorElement.props.innerRef === 'function') {
-                  anchorElement.props.innerRef(node)
-                } else if (anchorElement.props.innerRef?.current) {
-                  anchorElement.props.innerRef.current = node
-                }
-              },
-              onKeyDown: (event) => {
-                requestClose(event)
-                if (anchorElement.props.onKeyDown) {
-                  anchorElement.props.onKeyDown(event)
-                }
-              },
-            })}
-        {open
-          ? React.createElement(Element as any, {
-              innerRef: setPopperInnerRef,
-              width: 'auto',
-              onKeyDown: (event) => {
-                requestClose(event)
-                if (onKeyDown) {
-                  onKeyDown(event)
-                }
-              },
-              // ideally this should be pulled out to something like ThemeProvider for predictable z indices
-              style: { zIndex },
-              ...themeProps,
-            })
-          : null}
-      </Portal>
-    )
-  }
-)
-
-Popover.displayName = 'Popover'

package/src/Popover/index.ts

@@ -1,2 +0,0 @@
-export * from './Popover'
-export { Popover as default } from './Popover'

package/src/Popover/rewireTabOrder.ts

@@ -1,106 +0,0 @@
-import { tabbable } from 'tabbable'
-
-const TAB_KEY = 9
-
-function getNextActiveElement(node, startNode = null) {
-  const tabbables = tabbable(node.parentNode)
-  const nodeToStartAt = startNode || node
-  const nextTabbable = tabbables[tabbables.indexOf(nodeToStartAt) + 1]
-  if (!nextTabbable && node !== document.body) {
-    return getNextActiveElement(node.parentNode, nodeToStartAt)
-  }
-  return nextTabbable
-}
-
-class RewireTabOrder {
-  tabbables = []
-  firstFocusableElement: HTMLElement = null
-  lastFocusableElement: HTMLElement = null
-  originalActiveElement: HTMLElement = null
-  nextActiveElement: HTMLElement = null
-
-  constructor(node) {
-    if (node) {
-      this.tabbables = tabbable(node)
-      if (this.tabbables.length > 0) {
-        this.init()
-      }
-    }
-  }
-
-  init() {
-    this.firstFocusableElement = this.tabbables[0]
-    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.moveFocusToTargetFromFirstElement
-    )
-    this.lastFocusableElement.addEventListener(
-      'keydown',
-      this.moveFocusToTargetFromLastElement
-    )
-  }
-
-  destroy() {
-    if (this.tabbables.length === 0) {
-      return
-    }
-    this.originalActiveElement.removeEventListener(
-      'keydown',
-      this.moveFocusToTargetFromTriggerElement
-    )
-    this.firstFocusableElement.removeEventListener(
-      'keydown',
-      this.moveFocusToTargetFromFirstElement
-    )
-    this.lastFocusableElement.removeEventListener(
-      'keydown',
-      this.moveFocusToTargetFromLastElement
-    )
-  }
-
-  moveFocusToTargetFromTriggerElement = (event) => {
-    if (!event.shiftKey && event.keyCode === TAB_KEY) {
-      event.preventDefault()
-      if (this.tabbables.includes(this.nextActiveElement)) {
-        this.nextActiveElement.focus()
-      } else {
-        this.firstFocusableElement.focus()
-      }
-    }
-  }
-
-  moveFocusToTargetFromFirstElement = (event) => {
-    if (
-      event.target === this.firstFocusableElement &&
-      event.shiftKey &&
-      event.keyCode === TAB_KEY
-    ) {
-      event.preventDefault()
-      this.lastFocusableElement.focus()
-    }
-  }
-
-  moveFocusToTargetFromLastElement = (event) => {
-    if (
-      event.target === this.lastFocusableElement &&
-      !event.shiftKey &&
-      event.keyCode === TAB_KEY
-    ) {
-      event.preventDefault()
-      this.firstFocusableElement.focus()
-    }
-  }
-}
-
-export default (node) => {
-  const unwireTabOrder = new RewireTabOrder(node)
-  return () => unwireTabOrder.destroy()
-}