@instructure/ui-text-area 8.13.1-snapshot.9 → 8.14.0

package/src/TextArea/index.tsx

@@ -33,6 +33,7 @@ import {
 } from '@instructure/ui-dom-utils'
 import type { RequestAnimationFrameType } from '@instructure/ui-dom-utils'
 import { debounce } from '@instructure/debounce'
+import type { Debounced } from '@instructure/debounce'
 import { withStyle, jsx } from '@instructure/emotion'
 import { uid } from '@instructure/uid'
 import { px } from '@instructure/ui-utils'
@@ -48,6 +49,7 @@ import { allowedProps, propTypes } from './props'
 ---
 category: components
 ---
+@tsProps
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
@@ -65,20 +67,23 @@ class TextArea extends Component<TextAreaProps> {
     messages: [],
     disabled: false,
     readOnly: false,
-    // @ts-expect-error ts-migrate(6133) FIXME: 'textarea' is declared but its value is never read... Remove this comment to see the full error message
-    textareaRef: function (textarea) {},
     layout: 'stacked',
     required: false
   }
 
-  _listener: { remove(): void } | null = null
-  _request: RequestAnimationFrameType | undefined
+  private _listener?: { remove(): void }
+  private _request?: RequestAnimationFrameType
+  private _defaultId: string
+  private _textareaResizeListener?: ResizeObserver
+  private _debounced?: Debounced
+  private _textarea: HTMLTextAreaElement | null = null
+  private _container: HTMLDivElement | null = null
+  private _height?: string
+  private _manuallyResized = false
 
-  constructor() {
-    // @ts-expect-error ts-migrate(2554) FIXME: Expected 1-2 arguments, but got 0.
-    super()
+  constructor(props: TextAreaProps) {
+    super(props)
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_defaultId' does not exist on type 'Text... Remove this comment to see the full error message
     this._defaultId = uid('TextArea')
   }
 
@@ -87,8 +92,7 @@ class TextArea extends Component<TextAreaProps> {
     this.props.makeStyles?.()
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'prevProps' is declared but its value is never rea... Remove this comment to see the full error message
-  componentDidUpdate(prevProps, prevState, snapshot) {
+  componentDidUpdate() {
     this.autoGrow()
     this.props.makeStyles?.()
   }
@@ -98,9 +102,7 @@ class TextArea extends Component<TextAreaProps> {
       this._listener.remove()
     }
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_textareaResizeListener' does not exist ... Remove this comment to see the full error message
     if (this._textareaResizeListener) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_textareaResizeListener' does not exist ... Remove this comment to see the full error message
       this._textareaResizeListener.disconnect()
     }
 
@@ -108,35 +110,25 @@ class TextArea extends Component<TextAreaProps> {
       this._request.cancel()
     }
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_debounced' does not exist on type 'Text... Remove this comment to see the full error message
     if (this._debounced) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_debounced' does not exist on type 'Text... Remove this comment to see the full error message
       this._debounced.cancel()
     }
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'evt' is declared but its value is never read.
-  _textareaResize = (evt) => {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
-    const textareaHeight = this._textarea.style.height
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_height' does not exist on type 'TextAre... Remove this comment to see the full error message
+  _textareaResize = () => {
+    const textareaHeight = this._textarea!.style.height
     if (textareaHeight !== '' && textareaHeight !== this._height) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_manuallyResized' does not exist on type... Remove this comment to see the full error message
       this._manuallyResized = true
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
-      this._textarea.style.overflowY = 'auto'
+      this._textarea!.style.overflowY = 'auto'
 
       // update container minHeight to ensure focus ring always wraps input
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_container' does not exist on type 'Text... Remove this comment to see the full error message
-      this._container.style.minHeight = textareaHeight
+      this._container!.style.minHeight = textareaHeight
     }
   }
 
   autoGrow() {
     if (this.props.autoGrow) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_debounced' does not exist on type 'Text... Remove this comment to see the full error message
       if (!this._debounced) {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_debounced' does not exist on type 'Text... Remove this comment to see the full error message
         this._debounced = debounce(this.grow, 200, {
           leading: false,
           trailing: true
@@ -144,27 +136,21 @@ class TextArea extends Component<TextAreaProps> {
       }
 
       if (!this._listener) {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_debounced' does not exist on type 'Text... Remove this comment to see the full error message
         this._listener = addEventListener(window, 'resize', this._debounced)
       }
 
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
       if (this._textarea && !this._textareaResizeListener) {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'height' does not exist on type '{}'.
         const { height: origHeight } = getBoundingClientRect(this._textarea)
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_textareaResizeListener' does not exist ... Remove this comment to see the full error message
         this._textareaResizeListener = new ResizeObserver((entries) => {
           for (const entry of entries) {
             const { height } = entry.contentRect
 
             if (origHeight !== height) {
-              // @ts-expect-error ts-migrate(2554) FIXME: Expected 1 arguments, but got 0.
               this._textareaResize()
             }
           }
         })
 
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_textareaResizeListener' does not exist ... Remove this comment to see the full error message
         this._textareaResizeListener.observe(this._textarea)
       }
 
@@ -172,42 +158,36 @@ class TextArea extends Component<TextAreaProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(6133) FIXME: 'evt' is declared but its value is never read.
-  grow = (evt) => {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
+  grow = () => {
     if (!this._textarea || this._manuallyResized) {
       return
     }
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
     const offset = this._textarea.offsetHeight - this._textarea.clientHeight
     let height = ''
 
     // Notes:
     // 1. height has to be reset to `auto` every time this method runs, or scrollHeight will not reset
     // 2. `this._textarea.scrollHeight` will not reset if assigned to a variable; it needs to be written out each time
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
     this._textarea.style.height = 'auto'
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
     this._textarea.style.overflowY = 'hidden' // hide scrollbars for autoGrow textareas
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
     height = this._textarea.scrollHeight + offset + 'px'
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_container' does not exist on type 'Text... Remove this comment to see the full error message
-    const maxHeight = px(this.props.maxHeight, this._container)
+    const maxHeight = this.props.maxHeight
+      ? px(this.props.maxHeight, this._container)
+      : undefined
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
-    if (this.props.maxHeight && this._textarea.scrollHeight > maxHeight) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
+    if (
+      this.props.maxHeight &&
+      maxHeight !== undefined &&
+      this._textarea.scrollHeight > maxHeight
+    ) {
       this._textarea.style.overflowY = 'auto' // add scroll if scrollHeight exceeds maxHeight in pixels
     } else if (this.props.height) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
       if (this._textarea.value === '') {
         height = this.props.height
       } else if (
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_container' does not exist on type 'Text... Remove this comment to see the full error message
         px(this.props.height, this._container) > this._textarea.scrollHeight
       ) {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
         this._textarea.style.overflowY = 'auto' // add scroll if scrollHeight exceeds height in pixels
         height = this.props.height
       }
@@ -215,25 +195,20 @@ class TextArea extends Component<TextAreaProps> {
 
     // preserve container height to prevent scroll jumping on long textareas,
     // but make sure container doesn't exceed maxHeight prop
-    const heightExceedsMax = px(height) > maxHeight
+    const heightExceedsMax = maxHeight !== undefined && px(height) > maxHeight
     if (!heightExceedsMax) {
-      // @ts-expect-error ts-migrate(2339) FIXME: Property '_container' does not exist on type 'Text... Remove this comment to see the full error message
-      this._container.style.minHeight = height
+      this._container!.style.minHeight = height
     }
 
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_height' does not exist on type 'TextAre... Remove this comment to see the full error message
     this._height = height
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
     this._textarea.style.height = height
   }
 
   focus() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
-    this._textarea.focus()
+    this._textarea!.focus()
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'event' implicitly has an 'any' type.
-  handleChange = (event) => {
+  handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
     const { onChange, value, disabled, readOnly } = this.props
 
     if (disabled || readOnly) {
@@ -251,15 +226,12 @@ class TextArea extends Component<TextAreaProps> {
     }
   }
 
-  // @ts-expect-error ts-migrate(7006) FIXME: Parameter 'node' implicitly has an 'any' type.
-  handleContainerRef = (node) => {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_container' does not exist on type 'Text... Remove this comment to see the full error message
+  handleContainerRef = (node: HTMLDivElement | null) => {
     this._container = node
   }
 
   get minHeight() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
-    return this._textarea.style.minHeight
+    return this._textarea!.style.minHeight
   }
 
   get invalid() {
@@ -272,18 +244,15 @@ class TextArea extends Component<TextAreaProps> {
   }
 
   get id() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_defaultId' does not exist on type 'Text... 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 '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
     return isActiveElement(this._textarea)
   }
 
   get value() {
-    // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
-    return this._textarea.value
+    return this._textarea!.value
   }
 
   render() {
@@ -307,7 +276,7 @@ class TextArea extends Component<TextAreaProps> {
     const style = {
       width,
       resize,
-      height: !autoGrow ? height : null,
+      height: !autoGrow ? height : undefined,
       maxHeight
     }
 
@@ -317,18 +286,17 @@ class TextArea extends Component<TextAreaProps> {
         value={value}
         defaultValue={defaultValue}
         placeholder={placeholder}
-        ref={(textarea, ...args) => {
-          // @ts-expect-error ts-migrate(2339) FIXME: Property '_textarea' does not exist on type 'TextA... Remove this comment to see the full error message
+        ref={(textarea) => {
           this._textarea = textarea
-          // @ts-expect-error ts-migrate(2532) FIXME: Object is possibly 'undefined'.
-          textareaRef.apply(this, [textarea].concat(args))
+          if (typeof textareaRef === 'function') {
+            textareaRef(textarea)
+          }
         }}
-        // @ts-expect-error ts-migrate(2322) FIXME: Type '{ width: string | undefined; resize: "none" ... Remove this comment to see the full error message
         style={style}
         id={this.id}
         required={required}
         aria-required={required}
-        aria-invalid={this.invalid ? 'true' : null}
+        aria-invalid={this.invalid ? 'true' : undefined}
         disabled={disabled || readOnly}
         css={this.props.styles?.textArea}
         onChange={this.handleChange}
@@ -336,15 +304,11 @@ class TextArea extends Component<TextAreaProps> {
     )
 
     return (
-      // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
       <FormField
         {...pickProps(this.props, FormField.allowedProps)}
+        label={this.props.label}
         vAlign="top"
         id={this.id}
-        ref={(el) => {
-          // @ts-expect-error ts-migrate(2339) FIXME: Property '_node' does not exist on type 'TextArea'... Remove this comment to see the full error message
-          this._node = el
-        }}
       >
         <div
           css={this.props.styles?.textAreaLayout}

package/src/TextArea/props.ts

@@ -22,6 +22,8 @@
  * SOFTWARE.
  */
 
+import React from 'react'
+import type { TextareaHTMLAttributes } from 'react'
 import PropTypes from 'prop-types'
 
 import { controllable } from '@instructure/ui-prop-types'
@@ -32,117 +34,119 @@ import type {
   PropValidators,
   TextAreaTheme
 } from '@instructure/shared-types'
-import type { FormMessage } from '@instructure/ui-form-field'
+import type { FormMessage, FormFieldOwnProps } from '@instructure/ui-form-field'
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion'
-import { TextareaHTMLAttributes } from 'react'
 
 type TextAreaOwnProps = {
   label: React.ReactNode
   id?: string
-  size?: 'small' | 'medium' | 'large'
-  layout?: 'stacked' | 'inline'
-  autoGrow?: boolean
-  resize?: 'none' | 'both' | 'horizontal' | 'vertical'
-  width?: string
-  height?: string
-  maxHeight?: number | string
-  messages?: FormMessage[]
-  inline?: boolean
-  placeholder?: string
-  disabled?: boolean
-  readOnly?: boolean
-  required?: boolean
-  textareaRef?: (...args: any[]) => any
-  defaultValue?: string
-  value?: any // TODO: controllable(PropTypes.string)
-  onChange?: (...args: any[]) => any
-}
-
-type PropKeys = keyof TextAreaOwnProps
-
-type AllowedPropKeys = Readonly<Array<PropKeys>>
-
-type TextAreaProps = TextAreaOwnProps &
-  WithStyleProps<TextAreaTheme, TextAreaStyle> &
-  OtherHTMLAttributes<
-    TextAreaOwnProps,
-    TextareaHTMLAttributes<TextAreaOwnProps>
-  >
-
-type TextAreaStyle = ComponentStyle<
-  'textArea' | 'textAreaLayout' | 'textAreaOutline'
->
-
-const propTypes: PropValidators<PropKeys> = {
-  label: PropTypes.node.isRequired,
-  id: PropTypes.string,
   /**
    * sets the font-size for the textarea
    */
-  size: PropTypes.oneOf(['small', 'medium', 'large']),
-  layout: PropTypes.oneOf(['stacked', 'inline']),
+  size?: 'small' | 'medium' | 'large'
+  layout?: 'stacked' | 'inline'
   /**
    * the textarea will expand vertically to fit the height of the content,
    * unless its content exceeds `maxHeight`
    */
-  autoGrow: PropTypes.bool,
+  autoGrow?: boolean
   /**
    * is the textarea resizable (in supported browsers)
    */
-  resize: PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical']),
+  resize?: 'none' | 'both' | 'horizontal' | 'vertical'
   /**
    * a fixed width for the textarea
    */
-  width: PropTypes.string,
+  width?: string
   /**
    * Initial height for the textarea (if autoGrow is true it will grow vertically)
    * Accepts CSS units, e.g. '55px'
    */
-  height: PropTypes.string,
+  height?: string
   /**
    * when autoGrow is true, the textarea will never grow beyond this value
    */
-  maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  maxHeight?: number | string
   /**
-   * object with shape: `{
-   * text: PropTypes.node,
-   * type: PropTypes.oneOf(['error', 'hint', 'success', 'screenreader-only'])
-   *   }`
+   * Array of objects with shape: `{
+   *   text: React.ReactNode,
+   *   type: One of: ['error', 'hint', 'success', 'screenreader-only']
+   * }`
    */
-  messages: PropTypes.arrayOf(FormPropTypes.message),
-  inline: PropTypes.bool,
+  messages?: FormMessage[]
+  inline?: boolean
   /**
    * Html placeholder text to display when the input has no value. This should be hint text, not a label
    * replacement.
    */
-  placeholder: PropTypes.string,
+  placeholder?: string
   /**
    * Whether or not to disable the textarea
    */
-  disabled: PropTypes.bool,
+  disabled?: boolean
   /**
    * Works just like disabled but keeps the same styles as if it were active
    */
-  readOnly: PropTypes.bool,
+  readOnly?: boolean
   /**
    * Sets the required property on the underlying native textArea
    */
-  required: PropTypes.bool,
+  required?: boolean
   /**
    * a function that provides a reference to the actual textarea element
    */
-  textareaRef: PropTypes.func,
+  textareaRef?: (textarea: HTMLTextAreaElement | null) => void
   /**
    * value to set on initial render
    */
-  defaultValue: PropTypes.string,
+  defaultValue?: string
   /**
    * the selected value (must be accompanied by an `onChange` prop)
    */
-  value: controllable(PropTypes.string),
+  value?: string // TODO: controllable(PropTypes.string)
   /**
    * when used with the `value` prop, the component will not control its own state
    */
+  onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
+}
+
+type PropKeys = keyof TextAreaOwnProps
+
+type AllowedPropKeys = Readonly<Array<PropKeys>>
+
+type TextAreaProps =
+  // pickProps passes through FormField.allowedProps, except the ones set manually
+  Omit<FormFieldOwnProps, 'label' | 'inline' | 'id' | 'elementRef'> &
+    TextAreaOwnProps &
+    WithStyleProps<TextAreaTheme, TextAreaStyle> &
+    OtherHTMLAttributes<
+      TextAreaOwnProps,
+      TextareaHTMLAttributes<TextAreaOwnProps>
+    >
+
+type TextAreaStyle = ComponentStyle<
+  'textArea' | 'textAreaLayout' | 'textAreaOutline'
+>
+
+const propTypes: PropValidators<PropKeys> = {
+  label: PropTypes.node.isRequired,
+  id: PropTypes.string,
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
+  layout: PropTypes.oneOf(['stacked', 'inline']),
+  autoGrow: PropTypes.bool,
+  resize: PropTypes.oneOf(['none', 'both', 'horizontal', 'vertical']),
+  width: PropTypes.string,
+  height: PropTypes.string,
+  maxHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  messages: PropTypes.arrayOf(FormPropTypes.message),
+  inline: PropTypes.bool,
+  placeholder: PropTypes.string,
+  disabled: PropTypes.bool,
+  readOnly: PropTypes.bool,
+  required: PropTypes.bool,
+  textareaRef: PropTypes.func,
+  defaultValue: PropTypes.string,
+  value: controllable(PropTypes.string),
   onChange: PropTypes.func
 }
 

package/tsconfig.build.json

@@ -1,7 +1,26 @@
 {
   "extends": "../../tsconfig.build.json",
   "compilerOptions": {
-    "outDir": "./types"
+    "outDir": "./types",
+    "rootDir": "./src",
+    "composite": true
   },
-  "include": ["src/**/*"]
+  "include": ["src"],
+  "references": [
+    { "path": "../debounce/tsconfig.build.json" },
+    { "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": "../ui-utils/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" }
+  ]
 }