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

Code before:
                  backgroundColor: cssVar('$card'),
                  zIndex: Z_INDEX.TABLE_GROUPS_HEADER
                },
                stylesProps.selected
                  ? {
                    background: important(cssVar('$neutralLighter')),
                    '.ms-GroupHeader-check': { opacity: 1 }
                  }
                  : undefined
              ]
            })
            } />
        )
      }, []),
      onToggleCollapseAll = (isAllCollapsed: B) => {
        if (m.events?.includes('group_change')) {
          let changingGroups 
          if (isAllCollapsed){
            if (expandedRefs.current && Object.keys(expandedRefs.current).length > 0){
              changingGroups = Object.keys(expandedRefs.current)
            } else {
              changingGroups = groups?.map(group => group.name)
            }
          } else {
            changingGroups = groups?.map(group => group.name)
          }
          wave.emit(m.name, 'group_change', changingGroups)
        }
        expandedRefs.current = isAllCollapsed ? {} : null       
      },
      onToggleCollapse = ({ key, isCollapsed }: Fluent.IGroup) => {
        if (m.events?.includes('group_change')) {
          wave.emit(m.name, 'group_change', [key])
        }           
        if (expandedRefs.current) {
          isCollapsed
            ? expandedRefs.current[key] = false
            : delete expandedRefs.current[key]
        } else {
          if (groups){
            expandedRefs.current = groups?.reduce((acc, { name }) => {
              if (name != key){
                acc[name] = false
              }
              return acc
            }, {} as { [key: S]: B })       
          }
        }
      },
      onRenderRow = (props?: Fluent.IDetailsRowProps) => props
        ? <Fluent.DetailsRow {...props} styles={styleProps =>

Review comment (suggestion):
Would this work as well?

```suggestion
          const changedGroups =
            isAllCollapsed && expandedRefs.current && Object.keys(expandedRefs.current).length > 0
              ? Object.keys(expandedRefs.current)
              : groups?.map(group => group.name)
```

Code after:
                  backgroundColor: cssVar('$card'),
                  zIndex: Z_INDEX.TABLE_GROUPS_HEADER
                },
                stylesProps.selected
                  ? {
                    background: important(cssVar('$neutralLighter')),
                    '.ms-GroupHeader-check': { opacity: 1 }
                  }
                  : undefined
              ]
            })
            } />
        )
      }, []),
      onToggleCollapseAll = (isAllCollapsed: B) => {
        if (m.events?.includes('group_change')) {
          const changedGroups =
            isAllCollapsed && expandedRefs.current && Object.keys(expandedRefs.current).length > 0
              ? Object.keys(expandedRefs.current)
              : groups?.map(group => group.name)
          wave.emit(m.name, 'group_change', changedGroups)
        }
        expandedRefs.current = isAllCollapsed ? {} : null       
      },
      onToggleCollapse = ({ key, isCollapsed }: Fluent.IGroup) => {
        if (m.events?.includes('group_change')) {
          wave.emit(m.name, 'group_change', [key])
        }           
        if (expandedRefs.current) {
          isCollapsed
            ? expandedRefs.current[key] = false
            : delete expandedRefs.current[key]
        } else {
          if (groups){
            expandedRefs.current = groups?.reduce((acc, { name }) => {
              if (name != key){
                acc[name] = false
              }
              return acc
            }, {} as { [key: S]: B })       
          }
        }
      },
      onRenderRow = (props?: Fluent.IDetailsRowProps) => props
        ? <Fluent.DetailsRow {...props} styles={styleProps =>
        ({
          cell: { alignSelf: 'center', fontSize: 14, lineHeight: 20, color: cssVar('$text9') },
          checkCell: { display: 'flex', alignItems: 'center' },
          root: [
            {
              width: '100%',