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

package/src/Tooltip/Tooltip.js

@@ -84,6 +84,12 @@ export type Props = {
    */
   popoverProps?: object,
 
+  /**
+   * Set a specific z-index for Tooltip. (defaults to `9999`)
+   * This option can be helpful in adjusting elements that overlap visually.
+   */
+  zIndex: number,
+
   /**
    * Passes props to [Popover](/popover)'s `anchorElement`.
    */
@@ -118,6 +124,7 @@ function Tooltip(props: Props, ref) {
     title,
     triggerOnFocus = true,
     triggerOnHover = true,
+    zIndex = 9999,
     ...childProps
   } = useThemeProps('tooltip', props)
 
@@ -251,7 +258,7 @@ function Tooltip(props: Props, ref) {
       radius={2}
       backgroundColor="grey-9"
       color="rgba(255,255,255,0.94)"
-      zIndex={9999}
+      zIndex={zIndex}
       {...popoverProps}
       anchorElement={cloneElement(child, childProps)}
       onMouseEnter={createOpenTimeout}

package/src/Wizard/{Wizard.js → Wizard.tsx}

@@ -1,4 +1,3 @@
-// @flow
 import React, { Children, useCallback, useReducer, useState } from 'react'
 
 import Button from '../Button'
@@ -8,72 +7,83 @@ import StackView from '../StackView'
 import PagerView from '../PagerView'
 import StepperProgress from '../StepperProgress'
 import Text from '../Text'
+import { ButtonProps } from '../Button/Button'
 import { useThemeProps } from '../system'
 
 import WizardContext from './WizardContext'
 
-export type Props = {
+export type Step = {
+  name: string
+  valid?: (payload: Record<string, any>) => boolean
+}
+
+export type WizardProps = {
   /**
    * Pass props to the back button.
    */
-  backButtonProps: Object,
+  backButtonProps?: ButtonProps
 
   /**
    * Pass props to all Button components in the footer.
    */
-  buttonProps: Object,
+  buttonProps?: ButtonProps
 
   /**
    * Pass props to the cancel button.
    */
-  cancelButtonProps: Object,
+  cancelButtonProps?: ButtonProps
+
+  /**
+   * The content of the component.
+   */
+  children: React.ReactNode
 
   /**
    * Pass props to the Button components.
    */
-  footerProps: Object,
+  footerProps?: ButtonProps
 
   /**
    * The initial payload state.
    */
-  initialPayload: Object,
+  initialPayload?: Record<string, any>
 
   /**
    * Pass props to the next button.
    */
-  nextButtonProps: Object,
+  nextButtonProps?: ButtonProps
 
   /**
    * Determines what the next button title displays.
    */
-  nextButtonTitle: (props: {
-    activeStepIndex: number,
-    steps: Array<string>,
-    totalSteps: number,
-  }) => null,
+  nextButtonTitle?: (props: {
+    activeStepIndex: number
+    steps: Step[]
+    totalSteps: number
+  }) => string
 
   /**
    * Creates a cancel button for canceling a process from the first step.
    */
-  onCancel: Function,
+  onCancel?: () => void
 
   /**
    * Called when the `Done` button is pressed on the last view. Passes back the `payload` state
    * as well as an option `complete` callback to revert the button spinner back to normal.
    */
-  onSubmit: (payload: Object, complete: () => null) => null,
+  onSubmit?: (payload: Record<string, any>, complete: () => void) => void
 
   /**
    * Provide a custom progress component to render in place of `StepperProgress`.
    */
-  renderProgress: (props: {
-    activeStepIndex: Number,
-    steps: Array<string>,
-    totalSteps: number,
-  }) => null,
+  renderProgress?: (props: {
+    activeStepIndex: number
+    steps: Step[]
+    totalSteps: number
+  }) => React.ReactNode
 }
 
-function Wizard(props: Props) {
+const Wizard = (props: WizardProps): JSX.Element => {
   const {
     autoFocus = true,
     backButtonProps,
@@ -91,28 +101,25 @@ function Wizard(props: Props) {
     ...restProps
   } = useThemeProps('wizard', props)
   const [activeStepIndex, setActiveStepIndex] = useState(0)
-  const [steps, setSteps] = useState([])
+  const [steps, setSteps] = useState<Step[]>([])
   const [sendingPayload, setSendingPayload] = useState(false)
   const totalSteps = steps.length
   const [payload, setPayload] = useReducer(
-    (prevState, updatedProperty) => ({
+    (prevState: Record<string, any>, updatedProperty: Record<string, any>) => ({
       ...prevState,
       ...updatedProperty,
     }),
     initialPayload
   )
 
-  const addStep = useCallback(
-    (step) => {
-      setSteps((steps) => [...steps, step])
-      return () => {
-        setSteps((steps) =>
-          steps.filter((previousStep) => previousStep.name !== step.name)
-        )
-      }
-    },
-    [steps]
-  )
+  const addStep = useCallback((step) => {
+    setSteps((steps) => [...steps, step])
+    return () => {
+      setSteps((steps) =>
+        steps.filter((previousStep) => previousStep.name !== step.name)
+      )
+    }
+  }, [])
 
   const isCurrentStepValid = useCallback(
     function () {
@@ -130,7 +137,7 @@ function Wizard(props: Props) {
       setSendingPayload(true)
       onSubmit(payload, complete)
     }
-  }, [payload])
+  }, [onSubmit, payload])
 
   return (
     <WizardContext.Provider

package/src/system/utils.js

@@ -119,10 +119,12 @@ export function useThemeValue(path, defaultValue) {
 }
 
 export function useThemeProps(path, props) {
+  // @ts-ignore error TS2554: Expected 2 arguments, but got 1
   return { ...useThemeValue(path), ...props }
 }
 
 export function useBoxSize(size = 'md') {
+  // @ts-ignore error TS2554: Expected 2 arguments, but got 1
   const boxSizes = useThemeValue('boxSizes')
   const navigateSize = useCallback(
     (amount) => {

package/src/Badge/Status.js

@@ -1,101 +0,0 @@
-// @flow
-import React, { Component } from 'react'
-
-import { getColor } from '../system'
-import Icon from '../Icon'
-
-import Badge from './Badge'
-
-const statuses = {
-  error: {
-    color: 'error',
-    icon: 'general.x',
-  },
-  success: {
-    color: 'success',
-    icon: 'general.check',
-  },
-}
-
-type StatusProps = {
-  /**
-   * Title of badge
-   */
-  title: string,
-
-  /**
-   * The size of the badge
-   */
-  size?: string,
-
-  /**
-   * The status of the badge, if nothing passed, nothing will be rendered.
-   */
-  status?: 'error' | 'success',
-
-  /**
-   * When `true`, Sets a light background to use against darker backgrounds.
-   */
-  light?: boolean,
-
-  /**
-   * Called when the status should be set hidden
-   */
-  onClearRequest: () => void,
-}
-
-/**
- * Used to show a reaction to saving user data
- */
-class Status extends Component<StatusProps> {
-  static defaultProps = {
-    title: '',
-    size: 'sm',
-  }
-
-  timeout = null
-
-  componentDidMount() {
-    this.requestClear()
-  }
-
-  componentDidUpdate(lastProps) {
-    if (lastProps.status !== this.props.status) {
-      this.requestClear()
-    }
-  }
-
-  requestClear() {
-    if (this.timeout) {
-      clearTimeout(this.timeout)
-    }
-    this.timeout = setTimeout(this.props.onClearRequest, 1800)
-  }
-
-  render() {
-    const { status, light, onClearRequest, ...props } = this.props
-    if (!status) {
-      return null
-    } else {
-      const { color, icon } = statuses[status]
-      return (
-        <Badge
-          paddingRight={1}
-          radius="pill"
-          renderLeft={<Icon name={icon} />}
-          color={
-            light
-              ? { background: 'light', foreground: getColor(color) }
-              : getColor(color)
-          }
-          fontWeight={600}
-          {...props}
-        />
-      )
-    }
-  }
-}
-
-Status.displayName = 'Badge.Status'
-
-export default Status