@instructure/ui-checkbox 8.14.1-snapshot.6 → 8.14.1-snapshot.63

package/src/Checkbox/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component } from 'react'
+import React, { Component } from 'react'
 import keycode from 'keycode'
 
 import { FormFieldMessages } from '@instructure/ui-form-field'
@@ -43,7 +43,7 @@ import { ToggleFacade } from './ToggleFacade'
 import generateStyle from './styles'
 
 import { propTypes, allowedProps } from './props'
-import type { CheckboxProps } from './props'
+import type { CheckboxProps, CheckboxState } from './props'
 
 import type {
   CheckboxFacadeTheme,
@@ -55,11 +55,12 @@ import type {
 category: components
 tags: toggle, switch
 ---
+@tsProps
 **/
 
 @withStyle(generateStyle, null)
 @testable()
-class Checkbox extends Component<CheckboxProps> {
+class Checkbox extends Component<CheckboxProps, CheckboxState> {
   static readonly componentId = 'Checkbox'
 
   static propTypes = propTypes
@@ -74,23 +75,22 @@ class Checkbox extends Component<CheckboxProps> {
     labelPlacement: 'end'
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
+  constructor(props: CheckboxProps) {
     super(props)
 
     this.state = {
       focused: false,
-      hovered: false
-    }
-
-    if (typeof props.checked === 'undefined') {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'checked' does not exist on type 'Readonl... Remove this comment to see the full error message
-      this.state.checked = !!props.defaultChecked
+      hovered: false,
+      checked:
+        typeof props.checked === 'undefined'
+          ? !!props.defaultChecked
+          : undefined
     }
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_defaultId' does not exist on type 'Chec... Remove this comment to see the full error message
     this._defaultId = uid('Checkbox')
   }
+  private readonly _defaultId: string
+  private _input: HTMLInputElement | null = null
 
   ref: Element | null = null
 
@@ -99,28 +99,22 @@ class Checkbox extends Component<CheckboxProps> {
   }
 
   componentDidMount() {
-    // see https://github.com/facebook/react/issues/1798
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_input' does not exist on type 'Checkbox... Remove this comment to see the full error message
-    this._input.indeterminate = this.props.indeterminate
+    if (this._input) {
+      this._input.indeterminate = this.props.indeterminate!
+    }
 
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'prevProps' implicitly has an 'any' type... Remove this comment to see the full error message
-  componentDidUpdate(prevProps) {
-    // see https://github.com/facebook/react/issues/1798
-    if (prevProps.indeterminate !== this.props.indeterminate) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_input' does not exist on type 'Checkbox... Remove this comment to see the full error message
-      this._input.indeterminate = this.props.indeterminate
+  componentDidUpdate(prevProps: CheckboxProps) {
+    if (prevProps.indeterminate !== this.props.indeterminate && this._input) {
+      this._input.indeterminate = this.props.indeterminate || false
     }
 
-    // @ts-expect-error ts-migrate(2722) FIXME: Cannot invoke an object which is possibly 'undefin... Remove this comment to see the full error message
-    this.props.makeStyles()
+    this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleChange = (e) => {
+  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { onChange, disabled, checked, readOnly } = this.props
 
     if (disabled || readOnly) {
@@ -129,7 +123,6 @@ class Checkbox extends Component<CheckboxProps> {
     }
 
     if (typeof checked === 'undefined') {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'checked' does not exist on type 'Readonl... Remove this comment to see the full error message
       this.setState({ checked: !this.state.checked })
     }
 
@@ -138,66 +131,52 @@ class Checkbox extends Component<CheckboxProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleKeyDown = (e) => {
-    if (
-      this.props.variant === 'toggle' &&
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'return' does not exist on type 'CodesMap... Remove this comment to see the full error message
-      (e.keyCode === keycode.codes.enter || e.keyCode === keycode.codes.return)
-    ) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_input' does not exist on type 'Checkbox... Remove this comment to see the full error message
-      this._input.click()
+  handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (this.props.variant === 'toggle' && e.keyCode === keycode.codes.enter) {
+      this._input && this._input.click()
       e.preventDefault()
     }
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
-  handleFocus = (e) => {
+  handleFocus = () => {
     this.setState({
       focused: true
     })
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
-  handleBlur = (e) => {
+  handleBlur = () => {
     this.setState({
       focused: false
     })
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
-  handleMouseOver = (e) => {
+  handleMouseOver = () => {
     this.setState({
       hovered: true
     })
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'e' is declared but its value is never read.
-  handleMouseOut = (e) => {
+  handleMouseOut = () => {
     this.setState({
       hovered: false
     })
   }
 
   get id() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_defaultId' does not exist on type 'Chec... Remove this comment to see the full error message
     return this.props.id || this._defaultId
   }
 
   get checked() {
     return typeof this.props.checked === 'undefined'
-      ? // @ts-expect-error ts-migrate(2339) FIXME: Property 'checked' does not exist on type 'Readonl... Remove this comment to see the full error message
-        this.state.checked
+      ? this.state.checked
       : this.props.checked
   }
 
   get focused() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_input' does not exist on type 'Checkbox... Remove this comment to see the full error message
     return isActiveElement(this._input)
   }
 
   focus() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_input' does not exist on type 'Checkbox... Remove this comment to see the full error message
     this._input && this._input.focus()
   }
 
@@ -213,7 +192,6 @@ class Checkbox extends Component<CheckboxProps> {
       themeOverride
     } = this.props
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property 'hovered' does not exist on type 'Readonl... Remove this comment to see the full error message
     const { hovered, focused } = this.state
 
     error(
@@ -226,8 +204,6 @@ class Checkbox extends Component<CheckboxProps> {
         <ToggleFacade
           disabled={disabled}
           size={size}
-          // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-          hovered={hovered}
           focused={focused}
           checked={this.checked}
           readOnly={readOnly}
@@ -300,7 +276,6 @@ class Checkbox extends Component<CheckboxProps> {
           value={value}
           type="checkbox"
           ref={(c) => {
-            // @ts-expect-error ts-migrate(2339) FIXME: Property '_input' does not exist on type 'Checkbox... Remove this comment to see the full error message
             this._input = c
           }}
           disabled={disabled || readOnly}

package/src/Checkbox/props.ts

@@ -40,17 +40,39 @@ type CheckboxOwnProps = {
   label: React.ReactNode
   id?: string
   value?: string | number
+  /**
+   * Array of objects with shape: `{
+   *   text: ReactNode,
+   *   type: One of: ['error', 'hint', 'success', 'screenreader-only']
+   *   }`
+   */
   messages?: FormMessage[]
+  /* whether to set the input to checked or not on initial render */
   defaultChecked?: boolean
-  checked?: any // TODO: controllable(PropTypes.bool, 'onChange', 'defaultChecked')
-  onChange?: (...args: any[]) => any
-  onKeyDown?: (...args: any[]) => any
-  onFocus?: (...args: any[]) => any
-  onBlur?: (...args: any[]) => any
-  onMouseOver?: (...args: any[]) => any
-  onMouseOut?: (...args: any[]) => any
+  /**
+   * whether the input is checked or not (must be accompanied by an `onChange` prop)
+   */
+  checked?: boolean // TODO: controllable(PropTypes.bool, 'onChange', 'defaultChecked')
+  /**
+   * when used with the `checked` prop, the component will not control its own state
+   */
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void
+  onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void
+  onMouseOver?: (e: React.MouseEvent<HTMLInputElement>) => void
+  onMouseOut?: (e: React.MouseEvent<HTMLInputElement>) => void
+  /**
+   * Whether or not to disable the checkbox
+   */
   disabled?: boolean
+  /**
+   * Works just like disabled but keeps the same styles as if it were active
+   */
   readOnly?: boolean
+  /**
+   * Visual state showing that child checkboxes are a combination of checked and unchecked
+   */
   indeterminate?: boolean
   size?: 'small' | 'medium' | 'large'
   variant?: 'simple' | 'toggle'
@@ -72,39 +94,17 @@ const propTypes: PropValidators<PropKeys> = {
   label: PropTypes.node.isRequired,
   id: PropTypes.string,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: PropTypes.arrayOf(FormPropTypes.message),
-  /* whether to set the input to checked or not on initial render */
   defaultChecked: PropTypes.bool,
-  /**
-   * whether the input is checked or not (must be accompanied by an `onChange` prop)
-   */
   checked: controllable(PropTypes.bool, 'onChange', 'defaultChecked'),
-  /**
-   * when used with the `checked` prop, the component will not control its own state
-   */
   onChange: PropTypes.func,
   onKeyDown: PropTypes.func,
   onFocus: PropTypes.func,
   onBlur: PropTypes.func,
   onMouseOver: PropTypes.func,
   onMouseOut: PropTypes.func,
-  /**
-   * Whether or not to disable the checkbox
-   */
   disabled: PropTypes.bool,
-  /**
-   * Works just like disabled but keeps the same styles as if it were active
-   */
   readOnly: PropTypes.bool,
-  /**
-   * Visual state showing that child checkboxes are a combination of checked and unchecked
-   */
   indeterminate: PropTypes.bool,
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   variant: PropTypes.oneOf(['simple', 'toggle']),
@@ -134,5 +134,11 @@ const allowedProps: AllowedPropKeys = [
   'labelPlacement'
 ]
 
-export type { CheckboxProps, CheckboxStyle }
+type CheckboxState = {
+  focused: boolean
+  hovered: boolean
+  checked?: boolean
+}
+
+export type { CheckboxProps, CheckboxStyle, CheckboxState }
 export { propTypes, allowedProps }

package/src/Checkbox/styles.ts

@@ -23,6 +23,7 @@
  */
 
 import type { CheckboxProps, CheckboxStyle } from './props'
+import type { ComponentTheme } from '@instructure/shared-types'
 
 /**
  * ---
@@ -35,8 +36,7 @@ import type { CheckboxProps, CheckboxStyle } from './props'
  * @return {Object} The final style object, which will be used in the component
  */
 const generateStyle = (
-  // @ts-expect-error no theme variables used here
-  componentTheme: any,
+  _componentTheme: ComponentTheme,
   props: CheckboxProps
 ): CheckboxStyle => {
   const { inline, disabled } = props

package/src/CheckboxGroup/index.tsx

@@ -22,7 +22,7 @@
  * SOFTWARE.
  */
 
-import React, { Children, Component, ReactElement } from 'react'
+import React, { Children, Component } from 'react'
 
 import { FormFieldGroup } from '@instructure/ui-form-field'
 import { uid } from '@instructure/uid'
@@ -35,18 +35,20 @@ import {
 import { testable } from '@instructure/ui-testable'
 
 import { Checkbox } from '../Checkbox'
+import type { CheckboxProps } from '../Checkbox/props'
 
 import { propTypes, allowedProps } from './props'
-import type { CheckboxGroupProps } from './props'
+import type { CheckboxGroupProps, CheckboxGroupState } from './props'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 
 @testable()
-class CheckboxGroup extends Component<CheckboxGroupProps> {
+class CheckboxGroup extends Component<CheckboxGroupProps, CheckboxGroupState> {
   static readonly componentId = 'CheckboxGroup'
 
   static propTypes = propTypes
@@ -59,21 +61,18 @@ class CheckboxGroup extends Component<CheckboxGroupProps> {
     children: null
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
-    // @ts-expect-error ts-migrate(2554) FIXME: Expected 1-2 arguments, but got 0.
-    super()
+  constructor(props: CheckboxGroupProps) {
+    super(props)
 
     if (typeof props.value === 'undefined') {
       this.state = {
-        value: props.defaultValue
+        value: props.defaultValue || []
       }
     }
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_messagesId' does not exist on type 'Che... Remove this comment to see the full error message
     this._messagesId = uid('CheckboxGroup-messages')
   }
-
+  private readonly _messagesId: string
   ref: Element | null = null
 
   handleRef = (el: Element | null) => {
@@ -84,9 +83,8 @@ class CheckboxGroup extends Component<CheckboxGroupProps> {
     return this.props.messages && this.props.messages.length > 0
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleChange = (e) => {
-    const newValue = this.value || []
+  handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = this.value
 
     if (this.props.disabled || this.props.readOnly) {
       e.preventDefault()
@@ -109,42 +107,41 @@ class CheckboxGroup extends Component<CheckboxGroupProps> {
   }
 
   get value() {
-    if (
-      typeof this.props.value === 'undefined' &&
-      // @ts-expect-error ts-migrate(2339) FIXME: Property 'value' does not exist on type 'Readonly<... Remove this comment to see the full error message
-      typeof this.state.value === 'undefined'
-    ) {
-      return []
-    } else {
-      return typeof this.props.value === 'undefined'
-        ? // @ts-expect-error ts-migrate(2339) FIXME: Property 'value' does not exist on type 'Readonly<... Remove this comment to see the full error message
-          [...this.state.value]
-        : [...this.props.value]
-    }
+    return typeof this.props.value === 'undefined'
+      ? [...this.state.value]
+      : [...this.props.value]
   }
 
   renderChildren() {
     const { children, name, size, disabled, readOnly } = this.props
 
-    // @ts-expect-error ts-migrate(6133) FIXME: 'index' is declared but its value is never read.
-    return Children.map(children, (child, index) => {
+    return Children.map(children, (child) => {
       if (matchComponentTypes(child, [Checkbox])) {
-        return safeCloneElement(child as ReactElement, {
-          // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
-          key: `${child.props.name}`,
+        return safeCloneElement(child as React.ReactElement, {
+          key: `${
+            (child as React.ComponentElement<CheckboxProps, Checkbox>).props
+              .name
+          }`,
           name,
-          // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
-          disabled: disabled || child.props.disabled,
-          // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
-          readOnly: readOnly || child.props.readOnly,
+          disabled:
+            disabled ||
+            (child as React.ComponentElement<CheckboxProps, Checkbox>).props
+              .disabled,
+          readOnly:
+            readOnly ||
+            (child as React.ComponentElement<CheckboxProps, Checkbox>).props
+              .readOnly,
           size,
-          // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
-          checked: this.value.indexOf(child.props.value) > -1,
+          checked:
+            this.value.indexOf(
+              (child as React.ComponentElement<CheckboxProps, Checkbox>).props
+                .value!
+            ) > -1,
           onChange: this.handleChange,
-          // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
-          width: child.props.width || 'auto',
-          // @ts-expect-error ts-migrate(2339) FIXME: Property '_messagesId' does not exist on type 'Che... Remove this comment to see the full error message
-          'aria-describedby': this.hasMessages && this._messagesId
+          width:
+            (child as React.ComponentElement<CheckboxProps, Checkbox>).props
+              .width || 'auto',
+          'aria-describedby': this.hasMessages ? this._messagesId : undefined
         })
       } else {
         return child
@@ -154,13 +151,12 @@ class CheckboxGroup extends Component<CheckboxGroupProps> {
 
   render() {
     return (
-      // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
       <FormFieldGroup
         {...omitProps(this.props, CheckboxGroup.allowedProps)}
         {...pickProps(this.props, FormFieldGroup.allowedProps)}
+        description={this.props.description}
         rowSpacing="small"
         vAlign="top"
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_messagesId' does not exist on type 'Che... Remove this comment to see the full error message
         messagesId={this._messagesId}
         elementRef={this.handleRef}
       >

package/src/CheckboxGroup/props.ts

@@ -35,14 +35,15 @@ import type { FormMessage } from '@instructure/ui-form-field'
 import type { PropValidators } from '@instructure/shared-types'
 
 import { Checkbox } from '../Checkbox'
+import type { CheckboxProps } from '../Checkbox/props'
 
 type CheckboxGroupOwnProps = {
-  children?: React.ReactNode // TODO: oneOf([Checkbox])
+  children?: React.ComponentElement<CheckboxProps, Checkbox>[] // TODO: oneOf([Checkbox])
   name: string
   description: React.ReactNode
-  defaultValue?: any[]
-  value?: any // TODO: controllable(PropTypes.array)
-  onChange?: (...args: any[]) => any
+  defaultValue?: (string | number)[]
+  value?: (string | number)[] // TODO: controllable(PropTypes.array)
+  onChange?: (value: (string | number)[]) => void
   disabled?: boolean
   readOnly?: boolean
   messages?: FormMessage[]
@@ -102,5 +103,8 @@ const allowedProps: AllowedPropKeys = [
   'layout'
 ]
 
-export type { CheckboxGroupProps }
+type CheckboxGroupState = {
+  value: (string | number)[]
+}
+export type { CheckboxGroupProps, CheckboxGroupState }
 export { propTypes, allowedProps }