@instructure/ui-radio-input 8.13.1-snapshot.9 → 8.14.0

package/src/RadioInput/index.tsx

@@ -23,7 +23,7 @@
  */
 
 /** @jsx jsx */
-import { Component } from 'react'
+import React, { Component } from 'react'
 
 import { uid } from '@instructure/uid'
 import { testable } from '@instructure/ui-testable'
@@ -34,27 +34,25 @@ import { withStyle, jsx } from '@instructure/emotion'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
-import type { RadioInputProps } from './props'
+
+import type { RadioInputProps, RadioInputState } from './props'
 import { allowedProps, propTypes } from './props'
 
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
-class RadioInput extends Component<RadioInputProps> {
+class RadioInput extends Component<RadioInputProps, RadioInputState> {
   static readonly componentId = 'RadioInput'
 
   static allowedProps = allowedProps
   static propTypes = propTypes
 
   static defaultProps = {
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onClick: function (event) {},
-    // @ts-expect-error ts-migrate(6133) FIXME: 'event' is declared but its value is never read.
-    onChange: function (event) {},
     variant: 'simple',
     size: 'medium',
     disabled: false,
@@ -65,18 +63,18 @@ class RadioInput extends Component<RadioInputProps> {
 
   ref: Element | null = null
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
-  constructor(props) {
-    super(props)
+  private readonly _defaultId: string
+  private _input: HTMLInputElement | null = null
 
-    this.state = {}
+  constructor(props: RadioInputProps) {
+    super(props)
 
     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 = false
+      this.state = {
+        checked: false
+      }
     }
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_defaultId' does not exist on type 'Radi... Remove this comment to see the full error message
     this._defaultId = uid('RadioInput')
   }
 
@@ -88,52 +86,47 @@ class RadioInput extends Component<RadioInputProps> {
     this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleClick = (e) => {
+  handleClick: React.MouseEventHandler<HTMLInputElement> = (e) => {
     if (this.props.disabled || this.props.readOnly) {
       e.preventDefault()
       return
     }
 
-    // @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.onClick(e)
+    if (typeof this.props.onClick === 'function') {
+      this.props.onClick(e)
+    }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'e' implicitly has an 'any' type.
-  handleChange = (e) => {
+  handleChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
     if (this.props.disabled || this.props.readOnly) {
       e.preventDefault()
       return
     }
 
     if (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.setState({ checked: !this.state.checked })
     }
 
-    // @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.onChange(e)
+    if (typeof this.props.onChange === 'function') {
+      this.props.onChange(e)
+    }
   }
 
   focus() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_input' does not exist on type 'RadioInp... Remove this comment to see the full error message
-    this._input.focus()
+    this._input?.focus()
   }
 
   get id() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_defaultId' does not exist on type 'Radi... Remove this comment to see the full error message
     return this.props.id || this._defaultId
   }
 
   get focused() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_input' does not exist on type 'RadioInp... Remove this comment to see the full error message
     return isActiveElement(this._input)
   }
 
   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
   }
 
@@ -152,8 +145,7 @@ class RadioInput extends Component<RadioInputProps> {
         <input
           {...props}
           id={this.id}
-          ref={(c) => {
-            // @ts-expect-error ts-migrate(2339) FIXME: Property '_input' does not exist on type 'RadioInp... Remove this comment to see the full error message
+          ref={(c: HTMLInputElement | null) => {
             this._input = c
           }}
           value={value}

package/src/RadioInput/props.ts

@@ -21,15 +21,17 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
+
+import React from 'react'
 import PropTypes from 'prop-types'
 
+import type { InputHTMLAttributes } from 'react'
 import type {
   OtherHTMLAttributes,
   PropValidators,
   RadioInputTheme
 } from '@instructure/shared-types'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import { InputHTMLAttributes } from 'react'
 
 type RadioInputOwnProps = {
   label: React.ReactNode
@@ -37,14 +39,20 @@ type RadioInputOwnProps = {
   id?: string
   name?: string
   checked?: boolean
+  /**
+   * Whether or not to disable the input
+   */
   disabled?: boolean
+  /**
+   * Works just like disabled but keeps the same styles as if it were active
+   */
   readOnly?: boolean
   variant?: 'simple' | 'toggle'
   size?: 'small' | 'medium' | 'large'
   context?: 'success' | 'warning' | 'danger' | 'off'
   inline?: boolean
-  onClick?: (...args: any[]) => any
-  onChange?: (...args: any[]) => any
+  onClick?: (event: React.MouseEvent<HTMLInputElement>) => void
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void
 }
 
 type PropKeys = keyof RadioInputOwnProps
@@ -62,19 +70,17 @@ type RadioInputStyle = ComponentStyle<
   'radioInput' | 'input' | 'control' | 'facade' | 'label'
 >
 
+type RadioInputState = {
+  checked?: boolean
+}
+
 const propTypes: PropValidators<PropKeys> = {
   label: PropTypes.node.isRequired,
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   id: PropTypes.string,
   name: PropTypes.string,
   checked: PropTypes.bool,
-  /**
-   * Whether or not to disable the input
-   */
   disabled: PropTypes.bool,
-  /**
-   * Works just like disabled but keeps the same styles as if it were active
-   */
   readOnly: PropTypes.bool,
   variant: PropTypes.oneOf(['simple', 'toggle']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
@@ -100,5 +106,5 @@ const allowedProps: AllowedPropKeys = [
   'onChange'
 ]
 
-export type { RadioInputProps, RadioInputStyle }
+export type { RadioInputProps, RadioInputState, RadioInputStyle }
 export { propTypes, allowedProps }

package/src/RadioInputGroup/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,16 +35,24 @@ import {
 } from '@instructure/ui-react-utils'
 
 import { RadioInput } from '../RadioInput'
-import type { RadioInputGroupProps } from './props'
+import type { RadioInputProps } from '../RadioInput/props'
+
+import type { RadioInputGroupProps, RadioInputGroupState } from './props'
 import { allowedProps, propTypes } from './props'
 
+type RadioInputChild = React.ComponentElement<RadioInputProps, RadioInput>
+
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 @testable()
-class RadioInputGroup extends Component<RadioInputGroupProps> {
+class RadioInputGroup extends Component<
+  RadioInputGroupProps,
+  RadioInputGroupState
+> {
   static readonly componentId = 'RadioInputGroup'
 
   static allowedProps = allowedProps
@@ -55,20 +63,19 @@ class RadioInputGroup extends Component<RadioInputGroupProps> {
     variant: 'simple',
     size: 'medium',
     layout: 'stacked',
-    readOnly: false,
-    children: null
+    readOnly: false
   }
 
   ref: Element | null = null
 
+  private readonly _messagesId: string
+
   handleRef = (el: Element | null) => {
     this.ref = el
   }
 
-  // @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: RadioInputGroupProps) {
+    super(props)
 
     if (typeof props.value === 'undefined') {
       this.state = {
@@ -76,16 +83,14 @@ class RadioInputGroup extends Component<RadioInputGroupProps> {
       }
     }
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_messagesId' does not exist on type 'Rad... Remove this comment to see the full error message
     this._messagesId = uid('RadioInputGroup-messages')
   }
 
   get hasMessages() {
-    return this.props.messages && this.props.messages.length > 0
+    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) => {
+  handleChange: RadioInputProps['onChange'] = (e) => {
     const value = e.target.value
 
     if (this.props.disabled || this.props.readOnly) {
@@ -104,8 +109,7 @@ class RadioInputGroup extends Component<RadioInputGroupProps> {
 
   get value() {
     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.state.value
       : this.props.value
   }
 
@@ -115,28 +119,24 @@ class RadioInputGroup extends Component<RadioInputGroupProps> {
     // This adds the passed in name property to each RadioInput component
     // and checks the input whose value matches the value property
     return Children.map(children, (child, index) => {
-      if (matchComponentTypes(child, [RadioInput])) {
-        // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
-        const isChecked = this.value === child.props.value
+      if (matchComponentTypes(child as RadioInputChild, [RadioInput])) {
+        const isChecked = this.value === (child as RadioInput).props.value
         const defaultFocus = !this.value && index === 0
-        return safeCloneElement(child as ReactElement, {
+        return safeCloneElement(child as RadioInputChild, {
           name,
-          // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
-          disabled: disabled || child.props.disabled,
+          disabled: disabled || (child as RadioInputChild).props.disabled,
           variant,
           size,
           checked: isChecked,
           onChange: this.handleChange,
-          // @ts-expect-error ts-migrate(2533) FIXME: Object is possibly 'null' or 'undefined'.
-          readOnly: readOnly || child.props.readOnly,
-          // @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 'Rad... Remove this comment to see the full error message
-          'aria-describedby': this.hasMessages && this._messagesId,
+          readOnly: readOnly || (child as RadioInputChild).props.readOnly,
+          width: (child as RadioInputChild).props.width || 'auto',
+          'aria-describedby': this.hasMessages ? this._messagesId : undefined,
           // only one radio in a group should be considered tabbable
           // if a radio is checked, it should be the input to receive focus when tabbed to
           // if none of the inputs are checked, the first should receive the focus
-          tabIndex: isChecked || defaultFocus ? '0' : '-1'
+          tabIndex: isChecked || defaultFocus ? 0 : -1,
+          label: (child as RadioInputChild).props.label
         })
       } else {
         return child // ignore (but preserve) children that aren't RadioInput
@@ -145,13 +145,13 @@ class RadioInputGroup extends Component<RadioInputGroupProps> {
   }
 
   render() {
-    const { variant, layout } = this.props
+    const { variant, layout, description } = this.props
 
     return (
-      // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
       <FormFieldGroup
         {...omitProps(this.props, RadioInputGroup.allowedProps)}
         {...pickProps(this.props, FormFieldGroup.allowedProps)}
+        description={description}
         // TODO: split out toggle variant into its own component
         layout={
           layout === 'columns' && variant === 'toggle' ? 'stacked' : layout
@@ -160,7 +160,6 @@ class RadioInputGroup extends Component<RadioInputGroupProps> {
         rowSpacing="small"
         colSpacing={variant === 'toggle' ? 'none' : 'small'} // keep toggles close together
         startAt={variant === 'toggle' ? 'small' : undefined}
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_messagesId' does not exist on type 'Rad... Remove this comment to see the full error message
         messagesId={this._messagesId}
         elementRef={this.handleRef}
       >

package/src/RadioInputGroup/props.ts

@@ -36,16 +36,48 @@ import type {
 
 type RadioInputGroupOwnProps = {
   name: string
+
   description: React.ReactNode
+
+  /**
+   * value to set on initial render
+   */
   defaultValue?: string | number
-  value?: any // TODO: controllable( PropTypes.oneOfType([PropTypes.string, PropTypes.number]) )
-  onChange?: (...args: any[]) => any
+
+  /**
+   * the selected value (must be accompanied by an `onChange` prop)
+   */
+  value?: string | number // TODO: controllable( PropTypes.oneOfType([PropTypes.string, PropTypes.number]) )
+
+  /**
+   * when used with the `value` prop, the component will not control its own state
+   */
+  onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void
+
   disabled?: boolean
+
+  /**
+   * works just like disabled but keeps the same styles as if it were active
+   */
   readOnly?: boolean
+
+  /**
+   * Array of objects with shape: `{
+   *   text: ReactNode,
+   *   type: One of: ['error', 'hint', 'success', 'screenreader-only']
+   * }`
+   */
   messages?: FormMessage[]
-  variant?: 'simple' | 'toggle'
+
+  variant?: 'simple' | 'toggle' // TODO: split toggle out to its own component
+
   size?: 'small' | 'medium' | 'large'
+
   layout?: 'stacked' | 'columns' | 'inline'
+
+  /**
+   * any children (ones that aren't `RadioInput` are passed through)
+   */
   children?: React.ReactNode
 }
 
@@ -56,38 +88,23 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 type RadioInputGroupProps = RadioInputGroupOwnProps &
   OtherHTMLAttributes<RadioInputGroupOwnProps>
 
+type RadioInputGroupState = {
+  value?: string | number
+}
+
 const propTypes: PropValidators<PropKeys> = {
   name: PropTypes.string.isRequired,
   description: PropTypes.node.isRequired,
-  /**
-   * value to set on initial render
-   */
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * the selected value (must be accompanied by an `onChange` prop)
-   */
   value: controllable(
     PropTypes.oneOfType([PropTypes.string, PropTypes.number])
   ),
-  /**
-   * when used with the `value` prop, the component will not control its own state
-   */
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
-  /** works just like disabled but keeps the same styles as if it were active */
   readOnly: PropTypes.bool,
-  /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
-   */
   messages: PropTypes.arrayOf(FormPropTypes.message),
-  /**
-   * any children (ones that aren't `RadioInput` are passed through)
-   */
   children: PropTypes.node,
-  variant: PropTypes.oneOf(['simple', 'toggle']), // TODO: split toggle out to its own component
+  variant: PropTypes.oneOf(['simple', 'toggle']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   layout: PropTypes.oneOf(['stacked', 'columns', 'inline'])
 }
@@ -107,5 +124,5 @@ const allowedProps: AllowedPropKeys = [
   'layout'
 ]
 
-export type { RadioInputGroupProps }
+export type { RadioInputGroupProps, RadioInputGroupState }
 export { propTypes, allowedProps }

package/tsconfig.build.json

@@ -1,7 +1,24 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "outDir": "./types"
+    "outDir": "./types",
+    "rootDir": "./src",
+    "composite": true
   },
-  "include": ["src/**/*"]
+  "include": ["src"],
+  "references": [
+    { "path": "../emotion/tsconfig.build.json" },
+    { "path": "../shared-types/tsconfig.build.json" },
+    { "path": "../ui-dom-utils/tsconfig.build.json" },
+    { "path": "../ui-form-field/tsconfig.build.json" },
+    { "path": "../ui-prop-types/tsconfig.build.json" },
+    { "path": "../ui-react-utils/tsconfig.build.json" },
+    { "path": "../ui-testable/tsconfig.build.json" },
+    { "path": "../uid/tsconfig.build.json" },
+    { "path": "../ui-babel-preset/tsconfig.build.json" },
+    { "path": "../ui-color-utils/tsconfig.build.json" },
+    { "path": "../ui-test-locator/tsconfig.build.json" },
+    { "path": "../ui-test-utils/tsconfig.build.json" },
+    { "path": "../ui-themes/tsconfig.build.json" }
+  ]
 }