Tab: Add `onTabChange` Prop

[mucahit]

We need to add onTabChange prop to the Tab component to listen to tab changes.

Pass target (a.k.a the active item index) index to onTabChange

export interface TabProps {
  items: TabItem[];
  children: React.ReactNode[];
  testid?: string;
  initialActiveTabIndex?: number;
  customClassName?: string;
+ onTabChange: (index: number) => void;
}

[edizcelik]

@mucahit Can you give an example use case for this ?

[mucahit]

@mucahit Can you give an example use case for this?

I needed to collapse a Card when a particular tab is opened but couldn't do it since we don't have any info/callback about which tab is active. I did a tiny workaround as below, passed an additional Button inside of the tab item, and controlled it from there

[
  {id: "dashboard", content: "Dashboard"},
  {
    id: "cash-flow",
    content: (
      <Button isDisabled={true}>
        {"Cash flow"}
      </Button>
    )
  },
  {
    id: "accounting",
    content: (
      // handleAccountingClick collapses the Card
      <Button
        onClick={handleAccountingClick}
        shouldPreventDefault={false}
        shouldStopPropagation={false}>
        {"Accounting"}
      </Button>
    )
  }
];

[mucahit]

Released https://github.com/Hipo/react-ui-toolkit/releases/tag/1.0.0-alpha.4.0.0