@planningcenter/tapestry-react 2.10.0-rc.13 → 2.10.0-rc.15

package/src/Combobox/ComboboxItems.js

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

package/src/Combobox/ComboboxPopover.js

@@ -0,0 +1,262 @@
+import React, { Component } from 'react'
+
+import { ItemList } from '../ItemList'
+import Button from '../Button'
+import FocusGroup from '../FocusGroup'
+import Menu from '../Menu'
+import Popover from '../Popover'
+import { generateId } from '../utils'
+
+import ComboboxInput from './ComboboxInput'
+
+type Props = {
+  /** Controls whether the popover should close upon selection or not. Defaults to `false`. */
+  closeOnSelect?: boolean,
+  /** Controls whether the popover should open on focus or not. Defaults to `false`. */
+  openOnFocus?: boolean,
+  /** Accepts any valid [Popover](/popover) props. */
+  popoverProps?: object,
+}
+
+class ComboboxPopover extends Component<Props> {
+  static displayName = 'Combobox.Popover'
+
+  static defaultProps = {
+    closeOnSelect: false,
+    openOnFocus: false,
+  }
+
+  state = {
+    // @ts-ignore error TS2339: Property 'defaultOpen' does not exist on type 'Readonly<Props>'.
+    isPopoverOpen: this.props.defaultOpen || false,
+  }
+
+  id = generateId('combobox')
+
+  inputNode = null
+
+  inputTouched = false
+
+  closeRequestId = null
+
+  componentDidUpdate(lastProps) {
+    if (
+      lastProps.disabled !== lastProps.disabled &&
+      // @ts-ignore error TS2339: Property 'disabled' does not exist on type 'Readonly<Props>'.
+      this.props.disabled === true
+    ) {
+      this.closePopover()
+    }
+    const isComboboxFocused = document.activeElement === this.inputNode
+    if (
+      isComboboxFocused &&
+      // @ts-ignore error TS2339: Property 'value' does not exist on type 'Readonly<Props>'.
+      lastProps.value !== this.props.value &&
+      // @ts-ignore error TS2339: Property 'value' does not exist on type 'Readonly<Props>'.
+      this.props.value.length > 0 &&
+      !this.state.isPopoverOpen
+    ) {
+      this.openPopover()
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.closeRequestId) {
+      cancelAnimationFrame(this.closeRequestId)
+    }
+  }
+
+  setItemListRef = (component) => {
+    // @ts-ignore error TS2339: Property 'itemList' does not exist on type 'ComboboxPopover'.
+    this.itemList = component
+  }
+
+  setInputRef = (component) => {
+    // @ts-ignore error TS2339: Property 'input' does not exist on type 'ComboboxPopover'.
+    this.input = component
+  }
+
+  openPopover = () => {
+    this.setState({ isPopoverOpen: true }, () => {
+      // @ts-ignore error TS2339: Property 'itemList' does not exist on type 'ComboboxPopover'.
+      this.itemList.setHighlightedIndex(0, { maybeScrollIntoView: false })
+    })
+  }
+
+  closePopover = () => {
+    // push to next event stack because Popover events are messed up :(
+    this.closeRequestId = requestAnimationFrame(() => {
+      this.setState({ isPopoverOpen: false }, () => {
+        // @ts-ignore error TS2339: Property 'itemList' does not exist on type 'ComboboxPopover'.
+        this.itemList.clearHighlightedIndex()
+      })
+    })
+  }
+
+  handleBlur = (event) => {
+    this.closePopover()
+    this.inputTouched = false
+    // @ts-ignore error TS2339: Property 'onBlur' does not exist on type 'Readonly<Props>'.
+    if (this.props.onBlur) {
+      // @ts-ignore error TS2339: Property 'onBlur' does not exist on type 'Readonly<Props>'.
+      this.props.onBlur(event)
+    }
+  }
+
+  handleSelect = (event) => {
+    if (this.props.closeOnSelect) {
+      this.closePopover()
+    }
+    // @ts-ignore error TS2339: Property 'onSelect' does not exist on type 'Readonly<Props>'.
+    if (this.props.onSelect) {
+      // @ts-ignore error TS2339: Property 'onSelect' does not exist on type 'Readonly<Props>'.
+      this.props.onSelect(event)
+    }
+  }
+
+  render() {
+    const {
+      // @ts-ignore error TS2339: Property 'children' does not exist on type 'Readonly<Props>'.
+      children,
+      // @ts-ignore error TS2339: Property 'closeButton' does not exist on type 'Readonly<Props>'.
+      closeButton,
+      closeOnSelect,
+      // @ts-ignore error TS2339: Property 'disabled' does not exist on type 'Readonly<Props>'.
+      disabled,
+      // @ts-ignore error TS2339: Property 'dropdownButton' does not exist on type 'Readonly<Props>'.
+      dropdownButton,
+      // @ts-ignore error TS2339: Property 'innerRef' does not exist on type 'Readonly<Props>'.
+      innerRef,
+      // @ts-ignore error TS2339: Property 'defaultOpen' does not exist on type 'Readonly<Props>'.
+      defaultOpen,
+      // @ts-ignore error TS2339: Property 'lockScrollWhileOpen' does not exist on type 'Readonly<Props>'.
+      lockScrollWhileOpen,
+      // @ts-ignore error TS2339: Property 'onClear' does not exist on type 'Readonly<Props>'.
+      onClear,
+      // @ts-ignore error TS2339: Property 'onBlur' does not exist on type 'Readonly<Props>'.
+      onBlur,
+      // @ts-ignore error TS2339: Property 'onFocus' does not exist on type 'Readonly<Props>'.
+      onFocus,
+      // @ts-ignore error TS2339: Property 'onSelect' does not exist on type 'Readonly<Props>'.
+      onSelect,
+      openOnFocus,
+      // @ts-ignore error TS2339: Property 'placement' does not exist on type 'Readonly<Props>'.
+      placement,
+      popoverProps,
+      // @ts-ignore error TS2339: Property 'relativeTo' does not exist on type 'Readonly<Props>'.
+      relativeTo,
+      // @ts-ignore error TS2339: Property 'renderTo' does not exist on type 'Readonly<Props>'.
+      renderTo,
+      // @ts-ignore error TS2339: Property 'value' does not exist on type 'Readonly<Props>'.
+      value,
+      ...restProps
+    } = this.props
+    const { isPopoverOpen } = this.state
+    const valuePresent = value && value.length > 0
+    return (
+      <FocusGroup onBlur={this.handleBlur}>
+        {({ requestBlur, setRef }) => (
+          <ItemList ref={this.setItemListRef} onSelect={this.handleSelect}>
+            {({ clearHighlightedIndex }) => (
+              <Popover
+                keepInView={false}
+                matchWidths={true}
+                minWidth={16}
+                {...popoverProps}
+                as={Menu}
+                ref={(component) => {
+                  // @ts-ignore error TS2339: Property 'popover' does not exist on type 'ComboboxPopover'.
+                  this.popover = component
+                }}
+                innerRef={(node) => {
+                  setRef(`${this.id}-popover`)(node)
+                }}
+                role="menu"
+                tabIndex={-1}
+                elevation={2}
+                lockScrollWhileOpen={lockScrollWhileOpen}
+                placement={placement}
+                relativeTo={relativeTo}
+                renderTo={renderTo}
+                open={isPopoverOpen}
+                onBlur={requestBlur}
+                // @ts-ignore error TS2322: Type '(anchorProps: any) => Element' is not assignable to type 'ReactElement<...
+                anchorElement={(anchorProps) => (
+                  <ComboboxInput
+                    ref={this.setInputRef}
+                    innerRef={(node) => {
+                      if (typeof anchorProps.innerRef === 'function') {
+                        anchorProps.innerRef(node)
+                      } else if (anchorProps.innerRef?.current) {
+                        anchorProps.innerRef.current = node
+                      }
+                      this.inputNode = node ? node.querySelector('input') : null
+                      setRef(`${this.id}-input`)(node)
+                      if (innerRef) {
+                        innerRef(node)
+                      }
+                    }}
+                    value={value}
+                    onFocus={(event) => {
+                      if (
+                        closeOnSelect
+                          ? openOnFocus && !this.inputTouched
+                          : openOnFocus
+                      ) {
+                        this.openPopover()
+                      }
+                      this.inputTouched = true
+                      onFocus && onFocus(event)
+                    }}
+                    onBlur={(event) => {
+                      requestBlur(event)
+                      clearHighlightedIndex()
+                    }}
+                    onClear={valuePresent ? onClear : undefined}
+                    renderRight={
+                      closeButton ? (
+                        <Button
+                          disabled={disabled}
+                          icon={{ name: 'general.x' }}
+                          title="close options"
+                          theme={false}
+                          {...closeButton}
+                        />
+                      ) : dropdownButton ? (
+                        <Button
+                          disabled={disabled}
+                          icon={{
+                            name: isPopoverOpen ? 'general.x' : 'general.downCaret',
+                          }}
+                          title={
+                            isPopoverOpen ? 'close options' : 'open options'
+                          }
+                          theme={false}
+                          onClick={() => {
+                            if (isPopoverOpen) {
+                              this.closePopover()
+                            } else {
+                              this.openPopover()
+                            }
+                            // @ts-ignore error TS2339: Property 'input' does not exist on type 'ComboboxPopover'.
+                            this.input.focus()
+                          }}
+                        />
+                      ) : null
+                    }
+                    disabled={disabled}
+                    {...restProps}
+                  />
+                )}
+              >
+                {children}
+              </Popover>
+            )}
+          </ItemList>
+        )}
+      </FocusGroup>
+    )
+  }
+}
+
+export default ComboboxPopover

package/src/Combobox/index.js

@@ -0,0 +1,10 @@
+import Combobox from './Combobox'
+import ComboboxInput from './ComboboxInput'
+import ComboboxItem from './ComboboxItem'
+import ComboboxItems from './ComboboxItems'
+import ComboboxPopover from './ComboboxPopover'
+Combobox.Input = ComboboxInput
+Combobox.Item = ComboboxItem
+Combobox.Items = ComboboxItems
+Combobox.Popover = ComboboxPopover
+export default Combobox