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

Code before:
        }
      }
    },
    inset: {
      background: cssVar('$page'),
      padding: padding(10, 15)
    },
    fullHeight: {
      display: 'flex',
      flexGrow: 1
    }
  })

type Justification = 'start' | 'end' | 'center' | 'between' | 'around'
type Alignment = 'start' | 'end' | 'center' | 'baseline'
type XComponentsProps = {
  items: Component[]
  justify?: Justification
  align?: Alignment
  inset?: B
  height?: S
  direction?: 'row' | 'column'
}

const
  noWidthComponentKeys = ['date_picker', 'dropdown', 'slider', 'range_slider', 'table', 'visualization', 'vega_visualization'],
  getComponentWidth = (componentKey: S, isInline: B) => isInline && noWidthComponentKeys.includes(componentKey) ? '400px' : 'auto'

export const
  XComponents = ({ items, justify, align, inset, height, direction = 'column' }: XComponentsProps) => {
    const
      components = items.map((m: any, i) => {
        const
          // All form items are wrapped by their component name (first and only prop of "m").
          [componentKey] = Object.keys(m),
          isInline = !!(justify || align),
          { name, visible = true, width = getComponentWidth(componentKey, isInline), height } = m[componentKey],
          visibleStyles: React.CSSProperties = visible ? {} : { display: 'none' },
          // TODO: Ugly, maybe use ui.inline's 'align' prop instead?
          alignSelf = componentKey === 'links' ? 'flex-start' : undefined

        if (m[componentKey].width !== width) m[componentKey].width = width

        return (
          <div
            // Recreate only if name or position within form items changed, update otherwise.
            key={name || `${componentKey}-${i}`}
            data-visible={visible}
            className={height === '1' ? css.fullHeight : ''}
            style={{ ...visibleStyles, width, alignSelf }}
          >

Review comment (suggestion):
```suggestion
  needsDefaultWidth = ['date_picker', 'dropdown', 'slider', 'range_slider', 'table', 'visualization', 'vega_visualization'],
```

Code after:
        }
      }
    },
    inset: {
      background: cssVar('$page'),
      padding: padding(10, 15)
    },
    fullHeight: {
      display: 'flex',
      flexGrow: 1
    }
  })

type Justification = 'start' | 'end' | 'center' | 'between' | 'around'
type Alignment = 'start' | 'end' | 'center' | 'baseline'
type XComponentsProps = {
  items: Component[]
  justify?: Justification
  align?: Alignment
  inset?: B
  height?: S
  direction?: 'row' | 'column'
}

const
  needsDefaultWidth = new Set(['date_picker', 'dropdown', 'slider', 'range_slider', 'table', 'visualization', 'vega_visualization']),
  getComponentWidth = (componentKey: S, isInline: B) => isInline && needsDefaultWidth.has(componentKey) ? '400px' : 'auto'

export const
  XComponents = ({ items, justify, align, inset, height, direction = 'column' }: XComponentsProps) => {
    const
      components = items.map((m: any, i) => {
        const
          // All form items are wrapped by their component name (first and only prop of "m").
          [componentKey] = Object.keys(m),
          isInline = !!(justify || align),
          { name, visible = true, width = getComponentWidth(componentKey, isInline), height } = m[componentKey],
          visibleStyles: React.CSSProperties = visible ? {} : { display: 'none' },
          // TODO: Ugly, maybe use ui.inline's 'align' prop instead?
          alignSelf = componentKey === 'links' ? 'flex-start' : undefined

        if (m[componentKey].width !== width) m[componentKey].width = width

        return (
          <div
            // Recreate only if name or position within form items changed, update otherwise.
            key={name || `${componentKey}-${i}`}
            data-visible={visible}
            className={height === '1' ? css.fullHeight : ''}
            style={{ ...visibleStyles, width, alignSelf }}
          >