Repository: h2oai/wave
File: ui/src/textbox.tsx (TypeScript)

Code before:
  prefix?: S
  /** Text to be displayed after the text box contents. */
  suffix?: S
  /** Text to be displayed as an error below the text box. */
  error?: S
  /** True if the text box is a required field. */
  required?: B
  /** True if the text box is disabled. */
  disabled?: B
  /** True if the text box is a read-only field. */
  readonly?: B
  /** True if the text box should allow multi-line text entry. */
  multiline?: B
  /** True if the text box should hide text content. */
  password?: B
  /** True if the form should be submitted when the text value changes. */
  trigger?: B
  /** The height of the text box, e.g. '100px'. Applicable only if `multiline` is true. */
  height?: S
  /** The width of the text box, e.g. '100px'. Defaults to '100%'. */
  width?: S
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
  /** True if spellcheck is enabled. */
  spellcheck?: B
}

const DEBOUNCE_TIMEOUT = 500
export const
  XTextbox = ({ model: m }: { model: Textbox }) => {
    const onChange = ({ target }: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, v?: S) => {
      v = v || (target as HTMLInputElement).value

      wave.args[m.name] = v ?? (m.value || '')
      if (m.trigger) wave.push()
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
    React.useEffect(() => { wave.args[m.name] = m.value || '' }, [])

    return m.mask
      ? (
        <Fluent.MaskedTextField
          data-test={m.name}
          label={m.label}
          defaultValue={m.value}
          mask={m.mask}
          errorMessage={m.error}
          required={m.required}

Review comment (suggestion):
```suggestion
  /** True if the text may be checked for spelling errors. Defaults to True.*/
```
Don't forget to run `make generate` afterward to sync the API.

Code after:
  prefix?: S
  /** Text to be displayed after the text box contents. */
  suffix?: S
  /** Text to be displayed as an error below the text box. */
  error?: S
  /** True if the text box is a required field. */
  required?: B
  /** True if the text box is disabled. */
  disabled?: B
  /** True if the text box is a read-only field. */
  readonly?: B
  /** True if the text box should allow multi-line text entry. */
  multiline?: B
  /** True if the text box should hide text content. */
  password?: B
  /** True if the form should be submitted when the text value changes. */
  trigger?: B
  /** The height of the text box, e.g. '100px'. Applicable only if `multiline` is true. */
  height?: S
  /** The width of the text box, e.g. '100px'. Defaults to '100%'. */
  width?: S
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** An optional tooltip message displayed when a user clicks the help icon to the right of the component. */
  tooltip?: S
  /** True if the text may be checked for spelling errors. Defaults to True. */
  spellcheck?: B
}

const DEBOUNCE_TIMEOUT = 500
export const
  XTextbox = ({ model: m }: { model: Textbox }) => {
    const onChange = ({ target }: React.FormEvent<HTMLInputElement | HTMLTextAreaElement>, v?: S) => {
      v = v || (target as HTMLInputElement).value

      wave.args[m.name] = v ?? (m.value || '')
      if (m.trigger) wave.push()
    }

    // eslint-disable-next-line react-hooks/exhaustive-deps
    React.useEffect(() => { wave.args[m.name] = m.value || '' }, [])

    return m.mask
      ? (
        <Fluent.MaskedTextField
          data-test={m.name}
          label={m.label}
          defaultValue={m.value}
          mask={m.mask}
          errorMessage={m.error}
          required={m.required}