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

package/src/Menu/Item.js

@@ -38,10 +38,12 @@ function Item({
   }
 
   if (renderLeft) {
+    // @ts-ignore error TS2339: Property 'paddingLeft' does not exist on type
     css.paddingLeft = 5
   }
 
   if (renderRight) {
+    // @ts-ignore error TS2339: Property 'paddingRight' does not exist on type
     css.paddingRight = 5
   }
 
@@ -50,18 +52,26 @@ function Item({
   }
 
   if (disabled) {
+    // @ts-ignore error TS2339: Property 'cursor' does not exist on type ...
     css.cursor = 'not-allowed'
+    // @ts-ignore error TS2339: Property 'opacity' does not exist on type ...
     css.opacity = 0.65
   } else if (
+    // @ts-ignore error TS2339: Property 'onClick' does not exist on type '{}'.
     props.onClick ||
+    // @ts-ignore error TS2339: Property 'onDoubleClick' does not exist on type '{}'.
     props.onDoubleClick ||
+    // @ts-ignore error TS2339: Property 'onMouseDown' does not exist on type '{}'.
     props.onMouseDown ||
+    // @ts-ignore error TS2339: Property 'onMouseUp' does not exist on type '{}'.
     props.onMouseUp
   ) {
+    // @ts-ignore error TS2339: Property 'cursor' does not exist on type ...
     css.cursor = 'pointer'
   }
 
   return (
+    // @ts-ignore error TS2322: Type '{ ... }' is not assignable to type ...
     <StackView {...css} {...props}>
       {renderLeft && (
         <Box
@@ -75,8 +85,11 @@ function Item({
           left={0.5}
         >
           {typeof renderLeft === 'function'
+            // @ts-ignore error TS2349: This expression is not callable.
             ? renderRight()
+            // @ts-ignore error TS2769: No overload matches this call.
             : cloneElement(renderLeft, {
+                // @ts-ignore error TS2339: Property 'props' does not exist on type ...
                 size: (renderLeft.props && renderLeft.props.size) || 'md',
               })}
         </Box>
@@ -97,7 +110,9 @@ function Item({
         >
           {typeof renderRight === 'function'
             ? renderRight()
+            // @ts-ignore error TS2769: No overload matches this call.
             : cloneElement(renderRight, {
+                // @ts-ignore error TS2339: Property 'props' does not exist on type ...
                 size: (renderRight.props && renderRight.props.size) || 'md',
               })}
         </Box>

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

@@ -1,4 +1,3 @@
-// @flow
 import React, { useLayoutEffect, useRef } from 'react'
 
 import Box from '../Box'
@@ -8,36 +7,36 @@ import { trapFocus } from '../utils'
 import { useThemeProps } from '../system'
 
 export type ModalProps = {
-  children?: any,
+  children?: React.ReactNode
   /**
    * Close the modal when clicking outside of it.
    */
-  closeOnOutsideClick: boolean,
+  closeOnOutsideClick?: boolean
 
   /**
    * Called by either clicking on the internal [`<Scrim/>`](/scrim) component or
    * by pressing the `Escape` key.
    */
-  onRequestClose: () => null,
+  onRequestClose?: () => null
 
   /**
    * Determines whether the modal is open or not.
    */
-  open: boolean,
+  open: boolean
 
   /**
    * Props passed to the internal [`<Scrim/>`](/scrim) component.
    */
-  scrimProps?: object,
+  scrimProps?: Record<string, any>
 }
 
-function Modal({
+const Modal = ({
   children,
-  closeOnOutsideClick,
+  closeOnOutsideClick = false,
   onRequestClose,
   open,
   ...restProps
-}: ModalProps) {
+}: ModalProps): JSX.Element => {
   const { scrimProps = {}, ...themeProps } = useThemeProps('modal', restProps)
   const modalRef = useRef(null)
 

package/src/NumberField/NumberField.mdx

@@ -15,6 +15,19 @@ render(() => {
 })
 ```
 
+### With Controls
+```jsx live
+render(() => {
+  const [value, setValue] = React.useState(0)
+  return (
+    <Input.InputBox>
+      <NumberField value={value} onChange={(value) => setValue(value)} hasControls={true} />
+    </Input.InputBox>
+  )
+})
+```
+
+### Inline
 ```jsx live
 render(() => {
   const [month, setMonth] = React.useState(4)

package/src/NumberField/NumberField.test.tsx

@@ -7,10 +7,23 @@ import NumberField from './NumberField'
 describe('value', () => {
   const TestApp = ({ value: initialValue, ...props }) => {
     const [value, setValue] = useState(initialValue)
-    return <NumberField {...props } data-testid="test" value={value} onChange={setValue}/>
+    return (
+      <NumberField
+        {...props}
+        data-testid="test"
+        value={value}
+        // @ts-ignore No overload matches this call.
+        // Overload 1 of 2, '(props: Props | Readonly<Props>): NumberField', gave the following error.
+        // Type 'Dispatch<any>' is not assignable to type '(value: string) => null'.
+        // Type 'void' is not assignable to type 'null'.
+        // Overload 2 of 2, '(props: Props, context: any): NumberField', gave the following error.
+        // Type 'Dispatch<any>' is not assignable to type '(value: string) => null'.ts(2769)
+        onChange={setValue}
+      />
+    )
   }
-  const setup = props => {
-    const { getByTestId } = render(<TestApp {...props}/>)
+  const setup = (props) => {
+    const { getByTestId } = render(<TestApp {...props} />)
     return getByTestId('test')
   }
 
@@ -61,7 +74,7 @@ describe('value', () => {
   })
 
   describe('pad', () => {
-    it("add appropriate pad", () => {
+    it('add appropriate pad', () => {
       const numberField = setup({ value: 0, pad: 2 })
       userEvent.type(numberField, '12{backspace}')
       expect(numberField).toHaveValue('01')
@@ -70,13 +83,20 @@ describe('value', () => {
 })
 
 describe('moveFocusOnMax', () => {
-  const TestApp = props => {
+  const TestApp = (props) => {
     const [value, setValue] = useState(0)
 
-    return <>
-      <NumberField {...props } data-testid="test-a" value={value} onChange={setValue}/>
-      <input data-testid="test-b"/>
-    </>
+    return (
+      <>
+        <NumberField
+          {...props}
+          data-testid="test-a"
+          value={value}
+          onChange={setValue}
+        />
+        <input data-testid="test-b" />
+      </>
+    )
   }
 
   const setup = () => {
@@ -103,10 +123,17 @@ describe('moveFocusOnMax', () => {
 })
 
 describe('ignoredKeys', () => {
-  const TestApp = props => {
+  const TestApp = (props) => {
     const [value, setValue] = useState(1)
 
-    return <NumberField {...props } data-testid="test" value={value} onChange={setValue}/>
+    return (
+      <NumberField
+        {...props}
+        data-testid="test"
+        value={value}
+        onChange={setValue}
+      />
+    )
   }
 
   const setup = () => {

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

@@ -1,29 +1,35 @@
-// @flow
-import { createElement, Component } from 'react'
+import React, { createElement, Component } from 'react'
 
 import InputField from '../Input/InputField'
+import StackView from '../StackView'
+import Button from '../Button'
 import { padNumber, getTabbableSiblings } from '../utils'
 
 type Props = {
   /**
    * Render custom component or HTML element tag. (Defaults to a [InputField](/input.inputfield) component.). */
-  as?: any,
+  as?: any
+
+  /**
+   * Add controls to increment/decrement the value
+   */
+  hasControls?: boolean
 
   /**
    * An array of keys to ignore when pushed.
    * ex: ["ArrowUp", "ArrowDown"].
    */
-  ignoredKeys: string[],
+  ignoredKeys: string[]
 
   /**
    * Maximum number that can be entered.
    */
-  max: number,
+  max: number
 
   /**
    * Minimum number that can be entered.
    */
-  min: number,
+  min: number
 
   /**
    * Called when the input's onInput is called with a valid value
@@ -31,43 +37,43 @@ type Props = {
    * Please note traditional onInput/onChange events are not supported
    * since this component takes control of them.
    */
-  onChange: (value: string) => null,
+  onChange: (value: string) => null
 
   /**
    * Maps to the input's `onBlur` prop.
    */
-  onBlur?: () => null,
+  onBlur?: () => null
 
-  onKeyDown?: Function,
+  onKeyDown?: Function
 
   /**
    * The amount of 0s to pad the value with.
    */
-  pad: number,
+  pad: number
 
   /**
    * Forces the input text to stay fully selected while interacting with it.
    */
-  highlightOnInteraction: boolean,
+  highlightOnInteraction: boolean
 
   /**
    * String to display when value is empty.
    */
-  placeholder: string,
+  placeholder: string
 
   /**
    * The amount to step up/down from the value when using the arrow keys
    * defaults to `1`
    */
-  step: number,
+  step: number
 
   /**
    * The value of the input.
    */
-  value: number,
+  value: number
 
-  autoWidth: boolean,
-  moveFocusOnMax: boolean,
+  autoWidth: boolean
+  moveFocusOnMax: boolean
 }
 
 const MIN_VALUE = -Infinity
@@ -105,6 +111,7 @@ function isNotAcceptedNumberKey(event) {
 class NumberField extends Component<Props> {
   static defaultProps = {
     as: InputField,
+    hasControls: false,
     ignoredKeys: [],
     min: MIN_VALUE,
     max: MAX_VALUE,
@@ -117,7 +124,9 @@ class NumberField extends Component<Props> {
   getParsedValues = (value) => {
     return {
       value: Number.parseFloat(value),
+      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
       minValue: Number.parseFloat(this.props.min),
+      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
       maxValue: Number.parseFloat(this.props.max),
     }
   }
@@ -143,41 +152,54 @@ class NumberField extends Component<Props> {
       event.target.value
     )
     if (value < minValue) {
+      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
       this.props.onChange(minValue)
     } else if (value > maxValue) {
+      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
       this.props.onChange(maxValue)
     } else if (isNaN(event.target.value)) {
+      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
       this.props.onChange(this.clampValue(value))
     }
     if (this.props.onBlur) {
+      // @ts-ignore
       this.props.onBlur(event)
     }
     this.firstTouch = true
   }
 
+  stepValue = (baseValue, step) => {
+    const nextValue = this.clampValue(baseValue + step)
+    const parsedValue = Number.parseFloat(
+      // @ts-ignore Expected 1 arguments, but got 2.ts(2554)
+      baseValue.toString().indexOf('.') > -1 ? nextValue.toFixed(2) : nextValue
+    )
+    if (this.isValueValid(parsedValue)) {
+      // @ts-ignore Argument of type 'number' is not assignable to parameter of type 'string'.ts(2345)
+      this.props.onChange(parsedValue)
+    }
+  }
+
+  incrementValue = () => this.stepValue(this.props.value, this.props.step)
+
+  decrementValue = () => this.stepValue(this.props.value, -this.props.step)
+
   handleKeyDown = (event) => {
     if (this.props.ignoredKeys.includes(event.key)) {
       return
     }
     const { pad, step } = this.props
-    const { value, minValue, maxValue } = this.getParsedValues(
-      event.target.value
-    )
+    const { value } = this.getParsedValues(event.target.value)
     if (
       isNotAcceptedNumberKey(event) ||
       (pad && (event.key === 'ArrowLeft' || event.key === 'ArrowRight'))
     ) {
       event.preventDefault()
     }
-    if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-      const increment = (event.key === 'ArrowUp' ? 1 : -1) * step
-      const nextValue = this.clampValue(value + increment)
-      const parsedValue = Number.parseFloat(
-        event.target.value.indexOf('.') > -1 ? nextValue.toFixed(2) : nextValue
-      )
-      if (this.isValueValid(parsedValue)) {
-        this.props.onChange(parsedValue)
-      }
+    if (event.key === 'ArrowUp') {
+      this.incrementValue()
+    } else if (event.key === 'ArrowDown') {
+      this.decrementValue()
     }
     if (this.props.onKeyDown) {
       this.props.onKeyDown(event)
@@ -234,40 +256,32 @@ class NumberField extends Component<Props> {
     )
   }
 
-  render() {
-    const {
-      autoWidth,
-      as,
-      highlightOnInteraction,
-      ignoredKeys,
-      min,
-      max,
-      moveFocusOnMax,
-      onChange,
-      onBlur,
-      onInput,
-      onKeyDown,
-      pad,
-      value,
-      ...restProps
-    } = this.props
+  renderInput(restProps) {
+    const { as, highlightOnInteraction, pad, value } = this.props
     const parsed = this.getParsedValues(value)
     let numberValue = value === null ? '' : value
+
     if (pad && numberValue !== '') {
       numberValue = padNumber(numberValue, pad)
     }
+
+    // @ts-ignore Property 'min' does not exist on type '{ value: number; minValue: number; maxValue: number; }'.ts(2339)
     if (parsed.min !== MIN_VALUE) {
-      restProps.min = min
+      restProps.min = this.props.min
     }
+
+    // @ts-ignore Property 'max' does not exist on type '{ value: number; minValue: number; maxValue: number; }'.ts(2339)
     if (parsed.max !== MAX_VALUE) {
-      restProps.max = max
+      restProps.max = this.props.max
     }
-    if (autoWidth !== false) {
+
+    if (this.props.autoWidth !== false) {
       restProps.autoWidth = this.getAutoWidthValue(numberValue)
       if (restProps.autoWidth === undefined) {
         restProps.autoWidth = true
       }
     }
+
     return createElement(as, {
       ...restProps,
       textOverflow: undefined,
@@ -279,6 +293,68 @@ class NumberField extends Component<Props> {
       onKeyDown: this.handleKeyDown,
     })
   }
+
+  renderInputWithControls(restProps) {
+    const inputElement = this.renderInput(restProps)
+
+    if (this.props.hasControls) {
+      return (
+        <>
+          {inputElement}
+          <StackView marginRight={-1} marginLeft={1}>
+            <Button
+              icon={{ name: 'general.upCaret' }}
+              hover={{ backgroundColor: 'grey-1' }}
+              minHeight={1}
+              onClick={() => this.incrementValue()}
+              paddingVertical={0.25}
+              // @ts-ignore Type 'string' is not assignable to type 'never'.ts(2322)
+              size="xs"
+              title={`Increment by 1`}
+              theme="naked"
+            />
+            <Button
+              icon={{ name: 'general.downCaret' }}
+              hover={{ backgroundColor: 'grey-1' }}
+              minHeight={1}
+              onClick={() => this.decrementValue()}
+              paddingVertical={0.25}
+              // @ts-ignore Type 'string' is not assignable to type 'never'.ts(2322)
+              size="xs"
+              title={`Decrement by 1`}
+              theme="naked"
+            />
+          </StackView>
+        </>
+      )
+    }
+    return inputElement
+  }
+
+  render() {
+    const {
+      autoWidth,
+      as,
+      hasControls,
+      highlightOnInteraction,
+      ignoredKeys,
+      min,
+      max,
+      moveFocusOnMax,
+      onChange,
+      onBlur,
+      // @ts-ignore Property 'onInput' does not exist on type 'Readonly<Props>'.ts(2339)
+      onInput,
+      onKeyDown,
+      pad,
+      value,
+      ...restProps
+    } = this.props
+
+    return this.props.hasControls
+      ? this.renderInputWithControls(restProps)
+      : this.renderInput(restProps)
+  }
 }
 
 export default NumberField

package/src/Portal/Portal.tsx

@@ -31,6 +31,7 @@ class Portal extends React.Component<PortalProps> {
   }
 
   static contextType = ThemeContext
+  // @ts-ignore error TS2612: Property 'context' will overwrite the base property in 'Component<PortalProps, {}, any>'. If this is intentional, add an initializer. Otherwise, add a 'declare' modifier or remove the redundant declaration.
   context: React.ContextType<React.Context<Theme>>
 
   _portalNode: HTMLElement = null

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

@@ -1,4 +1,3 @@
-// @flow
 import React from 'react'
 
 import Box from '../Box'
@@ -8,14 +7,14 @@ export type Props = {
   /**
    * The current value of the progress bar.
    */
-  value?: number,
+  value?: number
   /**
    * Active color of the progress bar.
    */
-  activeColor?: string,
+  activeColor?: string
 }
 
-function Progress({ value, ...restProps }: Props) {
+const Progress = ({ value, ...restProps }: Props): JSX.Element => {
   const { activeColor = 'primary', ...themeProps } = useThemeProps(
     'progress',
     restProps

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

@@ -1,4 +1,3 @@
-// @flow
 import React, { useEffect, useState, useRef } from 'react'
 import mitt from 'mitt'
 
@@ -14,60 +13,62 @@ const iconPaths = {
   checked: 'tapestry.radio1',
 }
 
-export type Props = {
+export type RadioProps = {
   /**
    * Disables the radio component.
    */
-  disabled?: boolean,
+  disabled?: boolean
 
   /**
    * Determines if the radio should use an internal label or not.
    */
-  label?: string,
+  label?: string
 
-  id?: string | number,
+  /**
+   * Connects input to its corresponding label's `htmlFor`.
+   */
+  id?: string | number
 
   /**
    * Checks the radio.
    */
-  checked?: boolean,
+  checked?: boolean
 
   /**
    * Maps to the internal input's `name` prop.
    */
-  name?: string,
+  name?: string
 
   /**
    * Maps to the internal input's `value` prop.
    */
-  value?: mixed,
+  value?: any
 
   /**
    * Determines the size of the radio based on a [scale](http://google.com).
    */
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
   /**
    * Maps to the internal input's `onChange` prop.
    */
-  onChange?: () => null,
+  onChange?: () => null
 
   /**
    * Maps to the internal input's `onFocus` prop.
    */
-  onFocus?: () => null,
+  onFocus?: () => null
 
   /**
    * Maps to the internal input's `onBlur` prop.
    */
-  onBlur?: () => null,
+  onBlur?: () => null
 }
 
 const radioEmitter = mitt()
 
-function Radio({
+const Radio = ({
   checked,
-  css,
   disabled,
   id,
   label,
@@ -78,7 +79,7 @@ function Radio({
   size = 'xs',
   value,
   ...restProps
-}: Props) {
+}: RadioProps): JSX.Element => {
   const radioTheme = useThemeValue('radio')
   const inputRef = useRef()
   const [localChecked, setLocalChecked] = useState(false)
@@ -114,6 +115,8 @@ function Radio({
           innerRef={inputRef}
           as="input"
           type="radio"
+          // @ts-ignore Type 'string | number' is not assignable to type 'string'.
+          // Type 'number' is not assignable to type 'string'.ts(2322)
           id={id}
           name={name}
           checked={checked}
@@ -121,14 +124,17 @@ function Radio({
           disabled={disabled}
           onChange={(event) => {
             radioEmitter.emit(name, event.target)
+            // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
             onChange && onChange(event)
           }}
           onFocus={(event) => {
             setFocus(true)
+            // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
             onFocus && onFocus(event)
           }}
           onBlur={(event) => {
             setFocus(false)
+            // @ts-ignore Expected 0 arguments, but got 1.ts(2554)
             onBlur && onBlur(event)
           }}
           position="absolute"

package/src/Toolbar/Toolbar.js

@@ -1,4 +1,5 @@
 import React, { Component, Children, cloneElement } from 'react'
+// @ts-ignore Should this be ReactNode anyway?
 import type { Node } from 'react'
 
 import Badge from '../Badge'