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

Code before:
        } else {
          expandedRefs.current = { [key]: false }
        }
      },
      onRenderRow = (props?: Fluent.IDetailsRowProps) => props
        ? <Fluent.DetailsRow {...props} styles={{
          cell: { alignSelf: 'center', fontSize: 14, lineHeight: 20, color: cssVar('$text9') },
          checkCell: { display: 'flex', alignItems: 'center' },
          root: {
            width: '100%',
            border: border(2, 'transparent'),
            borderTop: border(2, cssVar('$neutralLight')),
            background: cssVar('$card'),
            minHeight: 48,
            '&:hover': {
              background: cssVar('$neutralLight'),
              border: `${border(2, cssVar('$themePrimary'))} !important`,
            }
          }
        }} />
        : null,
      onItemInvoked = (item: Fluent.IObjectWithKey & Dict<any>) => {
        wave.args[m.name] = [item.key as S]
        wave.push()
      },
      getLinkComp = (str: S, target?: S) => {
        const [, label, path = str] = /\[(.+)\].*\((.+)\)/.exec(str) || []
        return <XLink model={{ label, path, target }} />
      },
      onRenderItemColumn = (item?: Fluent.IObjectWithKey & Dict<any>, _idx?: U, col?: WaveColumn) => {
        if (!item || !col) return <span />

        const TooltipWrapper = ({ children }: { children: S }) => {
          if (col.cellOverflow === 'tooltip') return (
            <Fluent.TooltipHost
              id={item.key as S}
              // HACK: prevent Safari from showing a default tooltip - https://github.com/microsoft/fluentui/issues/13868
              styles={{ root: { '::after': { content: '', display: 'block' } } }}
              content={children}
              overflowMode={Fluent.TooltipOverflowMode.Parent}
              title={children}
            >{children}</Fluent.TooltipHost>
          )
          return <>{children}</>
        }

        let v = item[col.fieldName as S]
        if (col.cellType?.progress) return <XProgressTableCellType model={col.cellType.progress} progress={item[col.key]} />
        if (col.cellType?.icon) return <XIconTableCellType model={col.cellType.icon} icon={item[col.key]} />
        if (col.cellType?.tag) return <XTagTableCellType model={col.cellType.tag} serializedTags={item[col.key]} />
        if (col.cellType?.url) return getLinkComp(item[col.key], col.cellType.url.target)

Review comment (suggestion):
```suggestion
      LinkTableCellType = (str: S, target?: S) => {
```

Code after:
      onToggleCollapse = ({ key, isCollapsed }: Fluent.IGroup) => {
        if (expandedRefs.current) {
          isCollapsed
            ? expandedRefs.current[key] = false
            : delete expandedRefs.current[key]
        } else {
          expandedRefs.current = { [key]: false }
        }
      },
      onRenderRow = (props?: Fluent.IDetailsRowProps) => props
        ? <Fluent.DetailsRow {...props} styles={{
          cell: { alignSelf: 'center', fontSize: 14, lineHeight: 20, color: cssVar('$text9') },
          checkCell: { display: 'flex', alignItems: 'center' },
          root: {
            width: '100%',
            border: border(2, 'transparent'),
            borderTop: border(2, cssVar('$neutralLight')),
            background: cssVar('$card'),
            minHeight: 48,
            '&:hover': {
              background: cssVar('$neutralLight'),
              border: `${border(2, cssVar('$themePrimary'))} !important`,
            }
          }
        }} />
        : null,
      onItemInvoked = (item: Fluent.IObjectWithKey & Dict<any>) => {
        wave.args[m.name] = [item.key as S]
        wave.push()
      },
      onRenderItemColumn = (item?: Fluent.IObjectWithKey & Dict<any>, _idx?: U, col?: WaveColumn) => {
        if (!item || !col) return <span />

        const TooltipWrapper = ({ children }: { children: S }) => {
          if (col.cellOverflow === 'tooltip') return (
            <Fluent.TooltipHost
              id={item.key as S}
              // HACK: prevent Safari from showing a default tooltip - https://github.com/microsoft/fluentui/issues/13868
              styles={{ root: { '::after': { content: '', display: 'block' } } }}
              content={children}
              overflowMode={Fluent.TooltipOverflowMode.Parent}
              title={children}
            >{children}</Fluent.TooltipHost>
          )
          return <>{children}</>
        }

        let v = item[col.fieldName as S]
        if (col.cellType?.progress) return <XProgressTableCellType model={col.cellType.progress} progress={item[col.key]} />
        if (col.cellType?.icon) return <XIconTableCellType model={col.cellType.icon} icon={item[col.key]} />
        if (col.cellType?.tag) return <XTagTableCellType model={col.cellType.tag} serializedTags={item[col.key]} />