feat(@clayui/tabs): add new API to configure browsing behavior between tabs

jest.config.js

@@ -212,10 +212,10 @@ module.exports = {
  statements: 100,
  },
  './packages/clay-tabs/src/': {
- branches: 84,
+ branches: 58,
  functions: 66,
- lines: 94,
- statements: 90,
+ lines: 78,
+ statements: 76,
  },
  './packages/clay-time-picker/src/': {
  branches: 85,

packages/clay-tabs/docs/index.js

@@ -13,48 +13,42 @@ const tabsImportsCode = `import ClayTabs from '@clayui/tabs';
 `;
 
 const tabsCode = `const Component = () => {
- const [activeTabKeyValue, setActiveTabKeyValue] = useState(0);
+ const [active, setActive] = useState(0);
 
  return (
  <>
- <ClayTabs modern>
+ <ClayTabs active={active} modern onActiveChange={setActive}>
  <ClayTabs.Item
- active={activeTabKeyValue === 0}
  innerProps={{
  'aria-controls': 'tabpanel-1',
  }}
- onClick={() => setActiveTabKeyValue(0)}
  >
- {'Tab 1'}
+ Tab 1
  </ClayTabs.Item>
  <ClayTabs.Item
- active={activeTabKeyValue === 1}
  innerProps={{
  'aria-controls': 'tabpanel-2',
  }}
- onClick={() => setActiveTabKeyValue(1)}
  >
- {'Tab 2'}
+ Tab 2
  </ClayTabs.Item>
  <ClayTabs.Item
- active={activeTabKeyValue === 2}
  innerProps={{
  'aria-controls': 'tabpanel-3',
  }}
- onClick={() => setActiveTabKeyValue(2)}
  >
- {'Tab 3'}
+ Tab 3
  </ClayTabs.Item>
  </ClayTabs>
- <ClayTabs.Content activeIndex={activeTabKeyValue} fade>
+ <ClayTabs.Content activeIndex={active} fade>
  <ClayTabs.TabPane aria-labelledby="tab-1">
- {\`1. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.\`}
+ 1. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.
  </ClayTabs.TabPane>
  <ClayTabs.TabPane aria-labelledby="tab-2">
- {\`2. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.\`}
+ 2. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.
  </ClayTabs.TabPane>
  <ClayTabs.TabPane aria-labelledby="tab-3">
- {\`3. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.\`}
+ 3. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.
  </ClayTabs.TabPane>
  </ClayTabs.Content>
  </>
@@ -96,7 +90,7 @@ const tabsDropdownCode = `const Component = () => {
  );
  };
 
- const [activeTabKeyValue, setActiveTabKeyValue] = useState(0);
+ const [active, setActive] = useState(0);
 
  const dropdownTabsItems = [
  {
@@ -116,54 +110,45 @@ const tabsDropdownCode = `const Component = () => {
 
  return (
  <ClayIconSpriteContext.Provider value={spritemap}>
- <ClayTabs modern>
+ <ClayTabs active={active} modern onActiveChange={setActive}>
  <ClayTabs.Item
- active={activeTabKeyValue === 0}
  innerProps={{
  'aria-controls': 'tabpanel-1',
  }}
- onClick={() => setActiveTabKeyValue(0)}
  >
- {'Tab 1'}
+ Tab 1
  </ClayTabs.Item>
  <ClayTabs.Item
- active={activeTabKeyValue === 1}
  innerProps={{
  'aria-controls': 'tabpanel-2',
  }}
- onClick={() => setActiveTabKeyValue(1)}
  >
- {'Tab 2'}
+ Tab 2
  </ClayTabs.Item>
  <ClayTabs.Item
- active={activeTabKeyValue === 2}
  innerProps={{
  'aria-controls': 'tabpanel-3',
  }}
- onClick={() => setActiveTabKeyValue(2)}
  >
- {'Tab 3'}
+ Tab 3
  </ClayTabs.Item>
  <ClayTabs.Item
- active={activeTabKeyValue === 3}
  innerProps={{
  'aria-controls': 'tabpanel-4',
  }}
- onClick={() => setActiveTabKeyValue(3)}
  >
- {'Tab 4'}
+ Tab 4
  </ClayTabs.Item>
 
  <DropDownWithState
  trigger={
  <ClayTabs.Item
- active={[5, 6, 7].includes(activeTabKeyValue)}
+ active={[5, 6, 7].includes(active)}
  innerProps={{
  'aria-controls': 'tabpanel-5',
  }}
- onClick={() => setActiveTabKeyValue(4)}
  >
- {'More'}
+ More
  <ClayIcon symbol="caret-bottom" />
  </ClayTabs.Item>
  }
@@ -174,10 +159,10 @@ const tabsDropdownCode = `const Component = () => {
  return (
  <ClayDropDown.Item
  active={
- activeTabKeyValue === tabkey
+ active === tabkey
  }
  aria-selected={
- activeTabKeyValue === tabkey
+ active === tabkey
  }
  disabled={disabled}
  key={i}
@@ -187,7 +172,7 @@ const tabsDropdownCode = `const Component = () => {
  role="tab"
  spritemap={spritemap}
  symbolRight={
- activeTabKeyValue === tabkey
+ active === tabkey
  ? 'check'
  : undefined
  }
@@ -201,32 +186,32 @@ const tabsDropdownCode = `const Component = () => {
  </DropDownWithState>
  </ClayTabs>
  <ClayTabs.Content
- activeIndex={activeTabKeyValue}
+ activeIndex={active}
  fade
  >
  <ClayTabs.TabPane aria-labelledby="tab-1">
- {\`1. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.\`}
+ 1. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.
  </ClayTabs.TabPane>
  <ClayTabs.TabPane aria-labelledby="tab-2">
- {\`2. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.\`}
+ 2. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.
  </ClayTabs.TabPane>
  <ClayTabs.TabPane aria-labelledby="tab-3">
- {\`3. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.\`}
+ 3. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.
  </ClayTabs.TabPane>
  <ClayTabs.TabPane aria-labelledby="tab-4">
- {\`4. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.\`}
+ 4. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.
  </ClayTabs.TabPane>
  <ClayTabs.TabPane aria-labelledby="tab-5">
- {\`5. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.\`}
+ 5. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.
  </ClayTabs.TabPane>
  <ClayTabs.TabPane aria-labelledby="tab-6">
- {\`6. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.\`}
+ 6. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.
  </ClayTabs.TabPane>
  <ClayTabs.TabPane aria-labelledby="tab-7">
- {\`7. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.\`}
+ 7. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.
  </ClayTabs.TabPane>
  <ClayTabs.TabPane aria-labelledby="tab-8">
- {\`8. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.\`}
+ 8. Proin efficitur imperdiet dolor, a iaculis orci lacinia eu.
  </ClayTabs.TabPane>
  </ClayTabs.Content>
  </ClayIconSpriteContext.Provider>

packages/clay-tabs/src/Item.tsx

@@ -69,7 +69,7 @@ const Item = React.forwardRef<any, IProps>(
  onClick={onClick}
  ref={ref}
  role="tab"
- tabIndex={!active ? -1 : undefined}
+ tabIndex={!active ? -1 : 0}
  >
  {children}
  </LinkOrButton>

packages/clay-tabs/src/__tests__/__snapshots__/index.tsx.snap

@@ -24,6 +24,7 @@ exports[`ClayTabs renders with items 1`] = `
  class="nav-link active btn btn-unstyled"
  data-testid="tabItem"
  role="tab"
+ tabindex="0"
  type="button"
  >
  Dummy1

packages/clay-tabs/src/__tests__/index.tsx

@@ -9,32 +9,16 @@ import {cleanup, fireEvent, render} from '@testing-library/react';
 import React from 'react';
 
 const ClayTabsWithItems = () => {
- const [activeTabKeyValue, setActiveTabKeyValue] = React.useState<number>(0);
+ const [active, setActive] = React.useState<number>(0);
 
  return (
  <>
- <ClayTabs>
- <ClayTabs.Item
- active={activeTabKeyValue == 0}
- onClick={() => setActiveTabKeyValue(0)}
- >
- Dummy1
- </ClayTabs.Item>
- <ClayTabs.Item
- active={activeTabKeyValue == 1}
- data-testid="tabItem2"
- onClick={() => setActiveTabKeyValue(1)}
- >
- Dummy2
- </ClayTabs.Item>
- <ClayTabs.Item
- active={activeTabKeyValue == 2}
- onClick={() => setActiveTabKeyValue(2)}
- >
- Dummy3
- </ClayTabs.Item>
+ <ClayTabs active={active} onActiveChange={setActive}>
+ <ClayTabs.Item>Dummy1</ClayTabs.Item>
+ <ClayTabs.Item data-testid="tabItem2">Dummy2</ClayTabs.Item>
+ <ClayTabs.Item>Dummy3</ClayTabs.Item>
  </ClayTabs>
- <ClayTabs.Content activeIndex={activeTabKeyValue}>
+ <ClayTabs.Content activeIndex={active}>
  <ClayTabs.TabPane data-testid="tabPane1">
  Tab Content 1
  </ClayTabs.TabPane>
@@ -96,8 +80,9 @@ describe('ClayTabs', () => {
  const {getAllByTestId} = render(
  <>
  <ClayTabs>
- <ClayTabs.Item active href="https://clay.dev/foo" />
- One
+ <ClayTabs.Item active href="https://clay.dev/foo">
+ One
+ </ClayTabs.Item>
  <ClayTabs.Item href="https://clay.dev/bar">
  Two
  </ClayTabs.Item>