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

package/src/Combobox/Combobox.mdx

@@ -1,179 +0,0 @@
----
-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/planningcenter/tapestry-react/blob/master/packages/tapestry-react/src/Combobox/ComboboxInput.js) and [Popover](/popover).
-propsSummary: Accepts [Box](/box) props.
-themeKey: combobox
----
-
-### Combobox
-
-```jsx live
-const people = [
-  {
-    first: 'Charlie',
-    last: 'Brown',
-    twitter: 'dancounsell',
-  },
-  {
-    first: 'Charlotte',
-    last: 'White',
-    twitter: 'mtnmissy',
-  },
-  {
-    first: 'Chloe',
-    last: 'Jones',
-    twitter: 'ladylexy',
-  },
-  {
-    first: 'Cooper',
-    last: 'King',
-    twitter: 'steveodom',
-  },
-  {
-    first: 'James',
-    last: 'Miller',
-    twitter: 'bensie',
-  },
-  {
-    first: 'John',
-    last: 'James',
-    twitter: 'miller',
-  },
-  {
-    first: 'Travis',
-    last: 'Arnold',
-    twitter: 'souporserious',
-  },
-]
-
-function App() {
-  const [value, setValue] = React.useState('')
-  return (
-    <Card width={60} padding={2}>
-      <Combobox
-        minWidth={40}
-        onSelect={(selectedValue) =>
-          alert(`You selected: ${selectedValue.first} ${selectedValue.last}`)
-        }
-      >
-        <Combobox.Input
-          autoFocus
-          renderLeft={<Icon name="general.search" />}
-          placeholder="Search by name, email, or phone number"
-          value={value}
-          onClear={value.length > 0 ? () => setValue('') : null}
-          onChange={(event) => setValue(event.target.value)}
-          marginBottom={1}
-        />
-        <Combobox.Items
-          value={value}
-          filter={{
-            keys: [(person) => person.first + ' ' + person.last, 'twitter'],
-          }}
-          items={people}
-          renderItem={(person, index) => (
-            <Combobox.Item
-              key={person.first + ' ' + person.last}
-              value={person}
-              index={index}
-              distribution="space-between"
-            >
-              <Highlight
-                query={value}
-                text={person.first + ' ' + person.last}
-              />
-              <Highlight fontSize={5} query={value} text={person.twitter} />
-            </Combobox.Item>
-          )}
-          renderEmpty={
-            <Menu.Item>
-              No results for
-              <Text as="span" inline color="grey-7">
-                "{value}"
-              </Text>
-            </Menu.Item>
-          }
-        />
-      </Combobox>
-    </Card>
-  )
-}
-
-render(<App />)
-```
-
-### Combobox.Popover
-
-```jsx live
-function App() {
-  const [data, setData] = React.useState([])
-  const [value, setValue] = React.useState('')
-  const [fetching, setFetching] = React.useState(false)
-
-  function clearValue() {
-    setValue('')
-  }
-
-  function handleSelect(character) {
-    alert(`You chose ${character.name}`)
-    clearValue()
-  }
-
-  function handleChange(event) {
-    const value = event.target.value
-    const urlSafeValue = value.replace(' ', '+')
-    setValue(value)
-    setFetching(true)
-    fetch(`https://rickandmortyapi.com/api/character/?name=${urlSafeValue}`)
-      .catch((e) => e)
-      .then((response) => response.json())
-      .then((data) => {
-        setData(data.results || [])
-        setFetching(false)
-      })
-  }
-
-  return (
-    <Combobox.Popover
-      openOnFocus
-      closeOnSelect
-      maxWidth={60}
-      placeholder="Search Rick and Morty characters"
-      value={value}
-      isLoading={fetching}
-      onChange={handleChange}
-      onClear={clearValue}
-      onSelect={handleSelect}
-    >
-      {data.length > 0 ? (
-        data.map((character, index) => (
-          <Combobox.Item
-            key={index}
-            index={index}
-            value={character}
-            spacing={1}
-          >
-            <Avatar
-              source={character.image}
-              size="sm"
-              backgroundColor="grey-2"
-            />
-            <Text>{character.name}</Text>
-            <Badge title={character.species} size="xs" marginLeft="auto" />
-          </Combobox.Item>
-        ))
-      ) : (
-        <Menu.Item>
-          {fetching
-            ? 'Searching...'
-            : value.length > 0
-            ? 'No results found'
-            : 'Start typing to search the Rick and Morty character API.'}
-        </Menu.Item>
-      )}
-    </Combobox.Popover>
-  )
-}
-render(<App />)
-```

package/src/Combobox/Combobox.test.js

@@ -1,90 +0,0 @@
-import React from 'react'
-import { render, screen, fireEvent } from '@testing-library/react'
-import Combobox from '../Combobox'
-
-const people = [
-  {
-    first: 'Charlie',
-    last: 'Brown',
-    twitter: 'dancounsell',
-    active: true,
-  },
-  {
-    first: 'Charlotte',
-    last: 'White',
-    twitter: 'mtnmissy',
-    active: true,
-  },
-  {
-    first: 'John',
-    last: 'James',
-    twitter: 'miller',
-    active: false,
-  },
-  {
-    first: 'Travis',
-    last: 'Arnold',
-    twitter: 'souporserious',
-    active: true,
-  },
-]
-
-const selectMock = jest.fn()
-
-test('can click to select item from list', () => {
-  render(
-    <Combobox onSelect={selectMock}>
-      <Combobox.Input value="" />
-      <Combobox.Items
-        items={people}
-        renderItem={(person, index) => (
-          <Combobox.Item
-            disabled={!person.active}
-            index={index}
-            key={`${person.first} ${person.last}`}
-            value={person}
-          >
-            {person.first} {person.last}
-          </Combobox.Item>
-        )}
-      />
-    </Combobox>
-  )
-
-  fireEvent.click(screen.getByText('Travis Arnold'))
-
-  expect(selectMock).toHaveBeenCalledWith(
-    {
-      first: 'Travis',
-      last: 'Arnold',
-      twitter: 'souporserious',
-      active: true,
-    },
-    expect.anything()
-  )
-})
-
-test('disabled items cannot be selected', () => {
-  render(
-    <Combobox onSelect={selectMock}>
-      <Combobox.Input value="" />
-      <Combobox.Items
-        items={people}
-        renderItem={(person, index) => (
-          <Combobox.Item
-            disabled={!person.active}
-            index={index}
-            key={`${person.first} ${person.last}`}
-            value={person}
-          >
-            {person.first} {person.last}
-          </Combobox.Item>
-        )}
-      />
-    </Combobox>
-  )
-
-  fireEvent.click(screen.getByText('John James'))
-
-  expect(selectMock).not.toHaveBeenCalled()
-})

package/src/Combobox/ComboboxInput.js

@@ -1,156 +0,0 @@
-// @flow
-import React, {
-  forwardRef,
-  useCallback,
-  useImperativeHandle,
-  useRef,
-  useContext,
-  useEffect,
-} from 'react'
-
-import Input from '../Input'
-import ItemListContext from '../ItemList/ItemListContext'
-import { ItemListController } from '../ItemList'
-import { useThemeProps } from '../system'
-
-type Props = {
-  isOpen?: boolean,
-  isLoading?: boolean,
-  onClose?: Function,
-  onClear?: Function | boolean,
-}
-
-function ComboboxInput(props: Props, ref) {
-  const {
-    autoFocus,
-    defaultValue,
-    disabled,
-    innerRef,
-    isOpen,
-    isLoading,
-    name,
-    onBlur,
-    onChange,
-    onFocus,
-    onClear,
-    onClose,
-    onKeyDown,
-    onKeyUp,
-    placeholder,
-    readOnly,
-    size,
-    type,
-    value,
-    ...restProps
-  } = useThemeProps('combobox.input', props)
-  const inputNode = useRef(null)
-
-  const focus = useCallback(
-    function () {
-      inputNode.current.focus()
-    },
-    [inputNode]
-  )
-
-  const blur = useCallback(
-    function () {
-      inputNode.current.blur()
-    },
-    [inputNode]
-  )
-
-  useImperativeHandle(ref, () => ({
-    focus,
-    blur,
-  }))
-
-  const itemList = useContext(ItemListContext)
-
-  useEffect(() => {
-    setTimeout(() => {
-      itemList.setHighlightedIndex(0)
-    })
-  }, [itemList])
-
-  const handleKeyDown = useCallback(
-    (e) => {
-      if (e.key === 'ArrowUp') {
-        e.preventDefault()
-        itemList.moveHighlightedIndex(-1, { contain: false })
-      }
-      if (e.key === 'ArrowDown') {
-        e.preventDefault()
-        itemList.moveHighlightedIndex(1, { contain: false })
-      }
-      if (e.key === 'Enter') {
-        e.preventDefault()
-        itemList.selectHighlightedItem()
-      }
-      if (onKeyDown) {
-        onKeyDown(e)
-      }
-      if (onClose && e.key === 'Tab') {
-        onClose()
-      }
-    },
-    [itemList, onClose, onKeyDown]
-  )
-
-  const handleDocumentKeyDown = useCallback(
-    (e) => {
-      if (onClear && e.key === 'Escape') {
-        onClear()
-      }
-    },
-    [onClear]
-  )
-
-  return (
-    <ItemListController>
-      {(itemList) => {
-        const { highlightedItemId, id } = itemList
-
-        return (
-          <Input.InputBox
-            innerRef={innerRef}
-            size={size}
-            disabled={disabled}
-            isLoading={isLoading}
-            onClear={onClear}
-            {...restProps}
-            grow={1}
-          >
-            <Input.InputField
-              innerRef={(node) => {
-                inputNode.current = node
-              }}
-              grow={1}
-              role="combobox"
-              autoComplete="off"
-              aria-autocomplete="list"
-              aria-controls={id}
-              aria-expanded={isOpen}
-              aria-activedescendant={highlightedItemId}
-              autoFocus={autoFocus}
-              type={type}
-              name={name}
-              disabled={disabled}
-              readOnly={readOnly}
-              placeholder={placeholder}
-              defaultValue={defaultValue}
-              value={value}
-              onChange={onChange}
-              onFocus={onFocus}
-              onBlur={onBlur}
-              onKeyDown={handleKeyDown}
-              onKeyUp={onKeyUp}
-            />
-          </Input.InputBox>
-        )
-      }}
-    </ItemListController>
-  )
-}
-ComboboxInput = forwardRef(ComboboxInput)
-ComboboxInput.displayName = 'Combobox.Input'
-export default ComboboxInput

package/src/Combobox/ComboboxItem.js

@@ -1,33 +0,0 @@
-import React from 'react'
-
-import { ItemListItem } from '../ItemList'
-import Menu from '../Menu'
-import { useThemeProps } from '../system'
-
-function ComboboxItem(props) {
-  const { value, index, text, disabled = false, ...restProps } = useThemeProps(
-    'combobox.item',
-    props
-  )
-  return (
-    <ItemListItem data={value} disabled={disabled} index={index} text={text}>
-      {({ id, highlight, highlighted, clearHighlight, select }) => (
-        <Menu.Item
-          disabled={disabled}
-          id={id}
-          isHighlighted={highlighted}
-          onMouseOver={highlight}
-          onMouseOut={clearHighlight}
-          onClick={(event) => {
-            event.stopPropagation()
-            event.nativeEvent.stopImmediatePropagation()
-            select()
-          }}
-          {...restProps}
-        />
-      )}
-    </ItemListItem>
-  )
-}
-ComboboxItem.displayName = 'Combobox.Item'
-export default ComboboxItem

package/src/Combobox/ComboboxItems.js

@@ -1,99 +0,0 @@
-// @flow
-import React, { useState, Children, useEffect } from 'react'
-import { matchSorter } from 'match-sorter'
-
-import Box from '../Box'
-import Menu from '../Menu'
-import HeadingUppercase from '../HeadingUppercase'
-import StackView from '../StackView'
-import Text from '../Text'
-import { useThemeProps } from '../system'
-
-import ComboboxItem from './ComboboxItem'
-
-const defaultRenderEmpty = (value) => (
-  <Menu.Item>
-    No results for
-    <Text as="span" inline color="grey-7">
-      "{value}"
-    </Text>
-  </Menu.Item>
-)
-
-const defaultRenderItem = (item) => (
-  <ComboboxItem value={item} children={item ? String(item) : null} />
-)
-
-type Props = {
-  /*
-    Array of items to display.
-   */
-  items: Array<Object>,
-
-  /*
-    Value to filter items by.
-   */
-  value: string,
-
-  /*
-    Accepts any match-sorter advanced option.
-   */
-  filter?: string,
-
-  /*
-    Optional title for items section.
-   */
-  title?: string,
-
-  /*
-    Must return a React compatible component that will be rendered when `value` is empty.
-   */
-  renderEmpty?: (value: string) => null,
-
-  /*
-    Controls rendering of each item in `items`. Must return a `<Combobox.Item />`.
-   */
-  renderItem?: (item: mixed, index: number) => null,
-}
-
-function ComboboxItems(props: Props) {
-  const {
-    filter,
-    items,
-    renderEmpty = defaultRenderEmpty,
-    renderItem = defaultRenderItem,
-    title,
-    value = '',
-    ...restProps
-  } = useThemeProps('combobox.items', props)
-  const [sortedItems, setSortedItems] = useState(
-    getSortedItems({ items, value, filter })
-  )
-
-  function getSortedItems({ items, value, filter }) {
-    return matchSorter(items, value.length > 0 ? value : '', filter)
-  }
-
-  useEffect(() => {
-    setSortedItems(getSortedItems({ items, value, filter }))
-  }, [items, value, filter])
-
-  return (
-    <Box {...restProps}>
-      {title && (
-        <StackView paddingHorizontal={1} paddingVertical={0.5}>
-          <HeadingUppercase>{title}</HeadingUppercase>
-        </StackView>
-      )}
-      {Children.toArray(
-        sortedItems.length > 0
-          ? sortedItems.map((item, index) => renderItem(item, index))
-          : typeof renderEmpty === 'function'
-          ? renderEmpty(value)
-          : renderEmpty
-      )}
-    </Box>
-  )
-}
-ComboboxItems.displayName = 'Combobox.Items'
-export default ComboboxItems