@planningcenter/tapestry-react 2.1.1 → 2.2.0

package/src/DateField/DateField.mdx

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

package/src/Field/Field.js

@@ -1,5 +1,5 @@
 // @flow
-import React, { Component } from 'react'
+import React from 'react'
 
 import Box from '../Box'
 import HelperDrawer from '../HelperDrawer'
@@ -7,6 +7,7 @@ import Input from '../Input'
 import Text from '../Text'
 import StackView from '../StackView'
 import { cloneChildren, generateId } from '../utils'
+import { useThemeProps } from '../system'
 
 type Props = {
   /** Usually accepts form fields, such as `input` or `select`. */
@@ -52,106 +53,97 @@ type Props = {
   icon?: any,
 }
 
-class Field extends Component<Props> {
-  static defaultProps = {
-    distribution: 'fill',
-    spacing: 1,
-  }
-
-  helperDrawerId = generateId('field-helper-drawer')
-
-  fieldId = generateId('field')
-
-  render() {
-    const {
-      children,
-      compact,
-      distribution,
-      feedbackText,
-      helpContent,
-      icon,
-      inline,
-      innerRef,
-      label,
-      labelBasis,
-      labelColor,
-      labelGrow,
-      spacing,
-      state,
-      ...restProps
-    } = this.props
-    return (
-      <Box innerRef={innerRef} width="100%" {...restProps}>
-        <StackView axis={inline ? 'horizontal' : 'vertical'} wrap>
-          {label && (
-            <StackView
-              axis="horizontal"
-              alignment="center"
-              grow={labelGrow}
-              basis={labelBasis}
-              marginRight={inline ? 2 : undefined}
-            >
-              {icon}
-
-              <Input.InputLabel
-                controls={this.fieldId}
-                fontSize={compact ? 4 : 3}
-                color={labelColor}
-              >
-                {label}
-              </Input.InputLabel>
-
-              {helpContent && (
-                <HelperDrawer.Toggle
-                  drawerId={this.helperDrawerId}
-                  marginLeft={0.25}
-                  marginRight={inline ? 1 : undefined}
-                />
-              )}
-            </StackView>
-          )}
-
-          {helpContent && (
-            <StackView axis="horizontal" order={inline ? 1 : 0} width="100%">
-              <HelperDrawer
-                id={this.helperDrawerId}
-                marginTop={1}
-                children={helpContent}
-              />
-            </StackView>
-          )}
-
+function Field({ ...props }: Props) {
+  const {
+    children,
+    compact,
+    distribution = 'fill',
+    feedbackText,
+    helpContent,
+    icon,
+    inline,
+    innerRef,
+    label,
+    labelBasis,
+    labelColor,
+    labelGrow,
+    spacing = 1,
+    state,
+    ...restProps
+  } = useThemeProps('field', props)
+  const helperDrawerId = generateId('field-helper-drawer')
+  const fieldId = generateId('field')
+  return (
+    <Box innerRef={innerRef} width="100%" {...restProps}>
+      <StackView axis={inline ? 'horizontal' : 'vertical'} wrap>
+        {label && (
           <StackView
             axis="horizontal"
             alignment="center"
-            distribution={distribution}
-            order={inline ? 0 : 1}
-            grow={1}
-            marginTop={inline || !label ? undefined : 1}
-            maxWidth="100%"
-            spacing={spacing}
+            grow={labelGrow}
+            basis={labelBasis}
+            marginRight={inline ? 2 : undefined}
           >
-            {cloneChildren(children, (child, { firstChild }) =>
-              firstChild
-                ? {
-                    id: this.fieldId,
-                    size: child.props.size || (compact ? 'sm' : 'md'),
-                  }
-                : {
-                    size: child.props.size || (compact ? 'sm' : 'md'),
-                  }
+            {icon}
+
+            <Input.InputLabel
+              controls={fieldId}
+              fontSize={compact ? 4 : 3}
+              color={labelColor}
+            >
+              {label}
+            </Input.InputLabel>
+
+            {helpContent && (
+              <HelperDrawer.Toggle
+                drawerId={helperDrawerId}
+                marginLeft={0.25}
+                marginRight={inline ? 1 : undefined}
+              />
             )}
           </StackView>
-        </StackView>
+        )}
 
-        {feedbackText && (
-          <Text marginTop={1} color={state} align={inline ? 'right' : 'left'}>
-            {feedbackText}
-          </Text>
+        {helpContent && (
+          <StackView axis="horizontal" order={inline ? 1 : 0} width="100%">
+            <HelperDrawer
+              id={helperDrawerId}
+              marginTop={1}
+              children={helpContent}
+            />
+          </StackView>
         )}
-      </Box>
-    )
-  }
+
+        <StackView
+          axis="horizontal"
+          alignment="center"
+          distribution={distribution}
+          order={inline ? 0 : 1}
+          grow={1}
+          marginTop={inline || !label ? undefined : 1}
+          maxWidth="100%"
+          spacing={spacing}
+        >
+          {cloneChildren(children, (child, { firstChild }) =>
+            firstChild
+              ? {
+                  id: fieldId,
+                  size: child.props.size || (compact ? 'sm' : 'md'),
+                }
+              : {
+                  size: child.props.size || (compact ? 'sm' : 'md'),
+                }
+          )}
+        </StackView>
+      </StackView>
+
+      {feedbackText && (
+        <Text marginTop={1} color={state} align={inline ? 'right' : 'left'}>
+          {feedbackText}
+        </Text>
+      )}
+    </Box>
+  )
 }
 
 export default Field

package/src/Field/Field.mdx

@@ -3,6 +3,7 @@ title: Field
 category: Forms
 summary: Composes [InputLabel](/inputlabel) and passes an `id` to the first child to pair labels and controls automatically.
 propsSummary: Accepts [Box](/box) props.
+themeKey: field
 ---
 
 ```jsx live

package/src/Menu/Heading.js

@@ -2,7 +2,11 @@ import React from 'react'
 
 import HeadingUppercase from '../HeadingUppercase'
 
-function Heading({ children, ...restProps }) {
+export type Props = {
+  children?: any,
+}
+
+function Heading({ children, ...restProps }: Props) {
   return (
     <HeadingUppercase
       paddingBottom={0.5}

package/src/Menu/Heading.mdx

@@ -0,0 +1,20 @@
+---
+title: Menu.Heading
+category: General
+propsSummary: Accepts [HeadingUppercase](/headinguppercase) props.
+parent: Menu
+---
+
+```jsx live
+render(
+  <Menu>
+    <Menu.Heading>Heading 1</Menu.Heading>
+    <Menu.Item>Item 1</Menu.Item>
+    <Menu.Item>Item 2</Menu.Item>
+    <Divider margin={0.5} />
+    <Menu.Heading>Heading 2</Menu.Heading>
+    <Menu.Item>Item 3</Menu.Item>
+    <Menu.Item>Item 4</Menu.Item>
+  </Menu>
+)
+```

package/src/Menu/Item.js

@@ -3,6 +3,16 @@ import React, { cloneElement } from 'react'
 import Box from '../Box'
 import StackView from '../StackView'
 
+export type Props = {
+  children: any,
+  disabled: boolean,
+  backgroundColor: string,
+  highlightedColor: string,
+  isHighlighted: boolean,
+  renderLeft: Function | React.ReactNode,
+  renderRight: Function | React.ReactNode,
+}
+
 function Item({
   backgroundColor = 'surface',
   children,
@@ -12,7 +22,7 @@ function Item({
   renderLeft,
   renderRight,
   ...props
-}) {
+}: Props) {
   const css = {
     axis: 'horizontal',
     alignment: 'center',
@@ -96,4 +106,6 @@ function Item({
   )
 }
 
+Item.displayName = 'Menu.Item'
+
 export default Item

package/src/Menu/Item.mdx

@@ -0,0 +1,18 @@
+---
+title: Menu.Item
+category: General
+propsSummary: Accepts [StackView](/stackview) props.
+parent: Menu
+---
+
+```jsx live
+render(
+  <Menu>
+    <Menu.Item isHighlighted>Can be highlighted</Menu.Item>
+    <Menu.Item>Should be used as a child of Menu</Menu.Item>
+    <Menu.Item>
+      <Icon name="general.person" marginRight={1} /> Add icons and other things
+    </Menu.Item>
+  </Menu>
+)
+```

package/src/Menu/Menu.mdx

@@ -2,6 +2,7 @@
 title: Menu
 category: General
 propsSummary: Accepts [Card](/card) props.
+isParent: true
 ---
 
 ```jsx live

package/src/Pagination/Pagination.tsx

@@ -5,6 +5,7 @@ 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 } from '../system'
 
@@ -39,27 +40,27 @@ export type PaginationProps = {
   /**
    * Change the color of the active page
    */
-  activeColor: string,
+  activeColor: string
 
   /**
    * Current visible page number
    */
-  currentPage: number,
+  currentPage: number
 
   /**
    * Callback when new page is requested
    */
-  onPageChange: (nextPage: number) => undefined,
+  onPageChange: (nextPage: number) => undefined
 
   /**
    * Total available pages
    */
-  totalPages: number,
+  totalPages: number
 
   /**
    * Amount of visible pages
    */
-  visiblePages?: number,
+  visiblePages?: number
 }
 
 const NavButton = ({ disabled, iconName, ...props }) => {
@@ -98,22 +99,31 @@ export default function Pagination({
   }
 
   function renderPageLink(number) {
-    const isActive = currentPage === number
-
-    const outlineStyle = { border: '1px solid #5b8bf7', color: '#5b8bf7' }
+    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}
-        focus={{ backgroundColor: '#f4f8fd', ...outlineStyle }}
         fontWeight={500}
-        hover={{ backgroundColor: '#ffffff', ...outlineStyle }}
+        hover={{
+          backgroundColor: isCurrentPage ? activeColor : '#fff',
+          ...outlineStyle,
+        }}
         onClick={onPageChange.bind(null, number)}
         shrink={0}
         square
         title={number}
-        variant={isActive ? 'fill' : 'naked'}
-        {...(isActive && { backgroundColor: '#5b8bf7', color: 'white' })}
+        variant={isCurrentPage ? 'fill' : 'naked'}
+        {...(isCurrentPage && { backgroundColor: activeColor, color: '#fff' })}
       />
     )
   }

package/src/Popover/utils.ts

@@ -19,6 +19,7 @@ export function getModifiers({ matchWidths, offset, keepInView, shouldFlip }) {
       enabled: Boolean(matchWidths),
       phase: 'write',
       requires: ['computeStyles'],
+      fn: () => {},
       effect: ({ state }) => {
         const { offsetWidth } = state.elements.reference
         if (matchWidths === 'minimum') {

package/src/SegmentedControl/SegmentedControl.js

@@ -1,9 +1,17 @@
 // @flow
-import React, { Component } from 'react'
+import React, {
+  forwardRef,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+  useEffect,
+} from 'react'
 
 import Button from '../Button'
 import InputBox from '../Input/InputBox'
 import { navigateSize } from '../system'
+import { useThemeProps } from '../system'
 
 type Props = {
   activeSegment?: string,
@@ -14,110 +22,98 @@ type Props = {
   size?: 'xs' | 'sm' | 'md' | 'lg',
 }
 
-class SegmentedControl extends Component<Props> {
-  constructor(props: Props) {
-    super(props)
-    this.state = {
-      activeIndex: this.getActiveIndex(props),
-    }
-  }
-
-  componentDidUpdate(lastProps) {
-    if (lastProps.activeSegment !== this.props.activeSegment) {
-      this.setState({ activeIndex: this.getActiveIndex(this.props) })
-    }
-  }
-
-  getActiveIndex = (props) => {
+function SegmentedControl(props: Props, ref) {
+  const getActiveIndex = useCallback((props) => {
     return props.activeSegment === undefined
       ? 0
       : props.segments.indexOf(props.activeSegment)
-  }
-
-  setInputBox = (component) => {
-    this.inputBox = component
-  }
-
-  focus(index) {
-    this.inputBox.focus(index)
-  }
+  })
+  const inputBoxRef = useRef(null)
+  const {
+    activeSegment,
+    color = 'primary',
+    disabled,
+    onChange,
+    segments,
+    segmentBasis = 'auto',
+    size = 'md',
+    ...restProps
+  } = useThemeProps('segmentedControl', props)
+  const [activeIndex, setActiveIndex] = useState(getActiveIndex(props))
 
-  blur() {
-    this.inputBox.blur()
-  }
-
-  handleKeyDown = (event) => {
-    if (
-      this.props.onChange &&
-      (event.key === 'ArrowLeft' || event.key === 'ArrowRight')
-    ) {
+  const handleKeyDown = useCallback((event) => {
+    if (onChange && (event.key === 'ArrowLeft' || event.key === 'ArrowRight')) {
       const amountToMove = event.key === 'ArrowLeft' ? -1 : 1
-      const nextIndex = this.state.activeIndex + amountToMove
+      const nextIndex = activeIndex + amountToMove
       event.preventDefault()
-      this.changeSegment(nextIndex)
+      changeSegment(nextIndex)
     }
-  }
+  })
 
-  changeSegment = (index) => {
-    const nextSegment = this.props.segments[index]
+  const changeSegment = useCallback((index) => {
+    const nextSegment = segments[index]
     if (nextSegment) {
-      if (this.props.activeSegment === undefined) {
-        this.setState({ activeIndex: index })
+      if (activeSegment === undefined) {
+        setActiveIndex(index)
       }
-      if (this.props.onChange) {
-        this.props.onChange(nextSegment.title || nextSegment)
+      if (onChange) {
+        onChange(nextSegment.title || nextSegment)
       }
-      this.focus(index)
+      focus(index)
+    }
+  })
+
+  const focus = useCallback((index) => inputBoxRef.current.focus(index))
+  const blur = useCallback(() => inputBoxRef.current.blur())
+
+  useImperativeHandle(ref, () => ({
+    focus,
+    blur,
+  }))
+
+  useEffect(() => {
+    const newActiveIndex = getActiveIndex(props)
+    if (activeIndex !== newActiveIndex) {
+      setActiveIndex(newActiveIndex)
     }
-  }
+  }, [activeSegment])
 
-  render() {
-    const {
-      activeSegment,
-      color = 'primary',
-      disabled,
-      onChange,
-      segments,
-      segmentBasis = 'auto',
-      size = 'md',
-      ...restProps
-    } = this.props
-    const { activeIndex } = this.state
-    return (
-      <InputBox
-        ref={this.setInputBox}
-        size={size}
-        includeSpacing
-        evenPadding
-        role="group"
-        cursor="initial"
-        disabled={disabled}
-        {...restProps}
-      >
-        {segments.map((segment, segmentIndex) => {
-          const { title, ...restSegmentProps } = segment
-          const buttonProps = title ? restSegmentProps : {}
-          return (
-            <Button
-              key={segmentIndex}
-              grow={1}
-              size={navigateSize(size, -1)}
-              basis={segmentBasis}
-              theme={segmentIndex === activeIndex ? color : undefined}
-              variant={segmentIndex === activeIndex ? 'fill' : 'naked'}
-              title={title || segment}
-              disabled={disabled}
-              onKeyDown={this.handleKeyDown}
-              onClick={() =>
-                segmentIndex !== activeIndex && this.changeSegment(segmentIndex)
-              }
-              {...buttonProps}
-            />
-          )
-        })}
-      </InputBox>
-    )
-  }
+  return (
+    <InputBox
+      ref={inputBoxRef}
+      size={size}
+      includeSpacing
+      evenPadding
+      role="group"
+      cursor="initial"
+      disabled={disabled}
+      {...restProps}
+    >
+      {segments.map((segment, segmentIndex) => {
+        const { title, ...restSegmentProps } = segment
+        const buttonProps = title ? restSegmentProps : {}
+        return (
+          <Button
+            key={segmentIndex}
+            grow={1}
+            size={navigateSize(size, -1)}
+            basis={segmentBasis}
+            theme={segmentIndex === activeIndex ? color : undefined}
+            variant={segmentIndex === activeIndex ? 'fill' : 'naked'}
+            title={title || segment}
+            disabled={disabled}
+            onKeyDown={handleKeyDown}
+            onClick={() =>
+              segmentIndex !== activeIndex && changeSegment(segmentIndex)
+            }
+            {...buttonProps}
+          />
+        )
+      })}
+    </InputBox>
+  )
 }
 
+SegmentedControl = forwardRef(SegmentedControl)
+
 export default SegmentedControl

package/src/SegmentedControl/SegmentedControl.mdx

@@ -2,6 +2,7 @@
 title: SegmentedControl
 category: General
 propsSummary: Accepts [Input.Inputbox](/input.inputbox) props.
+themeKey: segmentedControl
 ---
 
 ```jsx live