Send correct value of sortDirection on the handleSortBy callback

[NoMercy235]

Title line template: The handleSortBy callback receives the old value of sortDirection kept in state because it's being called before the setState function finishes.

What package(s) are you using?

• carbon-components (10.5.1)
• carbon-components-react (7.3.2)

Detailed description

The provided handleSortBy callback provides the old value for sortDirection as an input argument to the function because it does not wait for the state to change.

onClick: composeEventHandlers([
  this.handleSortBy(header.key),
  onClick
    ? this.handleOnHeaderClick(onClick, {
      sortHeaderKey: header.key,
      sortDirection,
     })
    : null,
]),

Over here, the sortDirection comes straight from the state and does not wait for the state change.

Would it be possible to move the callback call in the setState callback of the handleSortBy method so that it receives the correct value? Or call the callback with the getNextSortState(sortDirection) so that we get the correct value.

Right now I have to make a weird mapping knowing that when I get the "NONE" direction, the user actually clicked the sort and it should be done in ascending order ("ASC"). The mapping looks like this:

• NONE -> ASC
• ASC -> DESC
• DESC -> NONE

This is pretty weird and unintuitive. I would like to refrain from keeping a separate manager in the app for the sort logic.

Is this issue related to a specific component?

DataTable, TableHeader

What did you expect to happen? What happened instead? What would you like to
see changed?

I expected to get the real value of sortDirection in the handleSortBy callback instead of the old one.

Steps to reproduce the issue

1. Use the DataTable + TableHeader (+ the other needed components) for a simple table
2. Provide the onClick property on the TableHeader

// somewhere in the component
sortConfig = {
  ...,
  onClick: (e, params) => {
    console.log(params); // on first click `params.sortDirection` will be `NONE` even though the UI displays the `ASC` state (which is the correct one)
  }
}
// in render
<IlTableHeader
  {...getHeaderProps({ header: headerObj, ...sortConfig })} // sortConfig has the `onClick` function
>
  {headerObj.header}
</IlTableHeader>

Please create a reduced test case in CodeSandbox

• Style and vanilla JS:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/components/examples/codesandbox
• React:
  https://codesandbox.io/s/github/carbon-design-system/carbon/tree/master/packages/react/examples/codesandbox

Example:
https://codesandbox.io/s/priceless-waterfall-siw97
Notice the console.log output

[emyarod]

currently your codesandbox example does not render due to errors, but it would help with debugging the primary issue if you could resolve those codesandbox problems