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

Code before:
import * as Fluent from '@fluentui/react'
import React from 'react'
import { stylesheet } from 'typestyle'
import { B, bond, box, F, Id, qd, S, U } from './qd'
import { centerMixin, clas, cssVar, dashed, displayMixin, padding } from './theme'

/**
 * Create a file upload component.
 * A file upload component allows a user to browse, select and upload one or more files.
 */
export interface FileUpload {
  /** An identifying name for this component. */
  name: Id
  /** Text to be displayed alongside the component. */
  label?: S
  /** True if the component should allow multiple files to be uploaded. */
  multiple?: B
  /** List of allowed file extensions, e.g. `pdf`, `docx`, etc. */
  file_extensions?: S[]
  /** Maximum allowed size (Mb) per file. Defaults to no limit. */
  max_file_size?: F
  /** Maximum allowed size (Mb) for all files combined. Defaults to no limit. */
  max_size?: F
  /** The height of the file upload, e.g. '400px', '50%', etc. */
  height?: S
  /** Indicates whether file upload should be displayed in minimal mode without drag & drop functionality. Defaults to false. */
  compact?: B
  /** 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
}

const
  css = stylesheet({
    uploadInput: {
      opacity: 0
    },
    upload: {
      ...centerMixin(),
      flexDirection: 'column',
      boxSizing: 'border-box',
    },
    uploadDragging: {
      border: dashed(2, cssVar('$themePrimary')),
    },
    uploadLabel: {
      ...centerMixin(),
      padding: padding(7, 10),
      fontSize: 14,
      fontWeight: 600,

Review comment (suggestion):
```suggestion
  /** True if the component should be displayed compactly (without drag-and-drop capabilities). Defaults to false. */
```

Code after:
import * as Fluent from '@fluentui/react'
import { B, F, Id, S, U, xid } from 'h2o-wave'
import React from 'react'
import { stylesheet } from 'typestyle'
import { centerMixin, clas, cssVar, dashed, padding } from './theme'
import { wave } from './ui'

/**
 * Create a file upload component.
 * A file upload component allows a user to browse, select and upload one or more files.
 */
export interface FileUpload {
  /** An identifying name for this component. */
  name: Id
  /** Text to be displayed in the bottom button. Defaults to "Upload". */
  label?: S
  /** True if the component should allow multiple files to be uploaded. */
  multiple?: B
  /** List of allowed file extensions, e.g. `pdf`, `docx`, etc. */
  file_extensions?: S[]
  /** Maximum allowed size (Mb) per file. Defaults to no limit. */
  max_file_size?: F
  /** Maximum allowed size (Mb) for all files combined. Defaults to no limit. */
  max_size?: F
  /** The height of the file upload, e.g. '400px', '50%', etc. */
  height?: S
  /** The width of the file upload, e.g. '100px'. Defaults to '100%'. */
  width?: S
  /** True if the component should be displayed compactly (without drag-and-drop capabilities). Defaults to false. */
  compact?: B
  /** 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
}

const
  css = stylesheet({
    uploadInput: {
      opacity: 0
    },
    upload: {
      ...centerMixin(),
      flexDirection: 'column',
      boxSizing: 'border-box',
    },
    uploadDragging: {
      border: dashed(2, cssVar('$themePrimary')),
    },
    uploadLabel: {
      ...centerMixin(),