@atlaskit/tabs 13.3.4 → 13.3.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tabs
 
+## 13.3.6
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.3.5
+
+### Patch Changes
+
+- [`0637c50e226`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0637c50e226) - Updated Tabs compnent to prefer to use focus-visible over focus css selectors.
+
 ## 13.3.4
 
 ### Patch Changes

package/codemods/utils.tsx

@@ -7,26 +7,24 @@ import {
   getJSXAttributesByName,
 } from '@atlaskit/codemod-utils';
 
-export const createRemoveFuncWithDefaultSpecifierFor = (
-  component: string,
-  prop: string,
-  comment?: string,
-) => (j: core.JSCodeshift, source: Collection<Node>) => {
-  const specifier = getDefaultSpecifier(j, source, component);
+export const createRemoveFuncWithDefaultSpecifierFor =
+  (component: string, prop: string, comment?: string) =>
+  (j: core.JSCodeshift, source: Collection<Node>) => {
+    const specifier = getDefaultSpecifier(j, source, component);
 
-  if (!specifier) {
-    return;
-  }
+    if (!specifier) {
+      return;
+    }
 
-  source.findJSXElements(specifier).forEach((element) => {
-    getJSXAttributesByName(j, element, prop).forEach((attribute: any) => {
-      if (comment) {
-        addCommentToStartOfFile({ j, base: source, message: comment });
-      }
-      j(attribute).remove();
+    source.findJSXElements(specifier).forEach((element) => {
+      getJSXAttributesByName(j, element, prop).forEach((attribute: any) => {
+        if (comment) {
+          addCommentToStartOfFile({ j, base: source, message: comment });
+        }
+        j(attribute).remove();
+      });
     });
-  });
-};
+  };
 
 export function doesIdentifierExist({
   j,

package/dist/cjs/components/tabs.js

@@ -36,7 +36,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.3.4"
+  packageVersion: "13.3.6"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {

package/dist/cjs/internal/styles.js

@@ -23,16 +23,28 @@ var borderRadius = (0, _constants.borderRadius)();
 var gridSize = (0, _constants.gridSize)();
 var tabLeftRightPadding = "".concat(gridSize, "px");
 var tabTopBottomPadding = "".concat(gridSize / 2, "px");
-var underlineHeight = '2px'; // Required so the focus ring is visible in high contrast mode
+var underlineHeight = '2px';
+var highContrastFocusStyles = {
+  outline: '1px solid'
+}; // Required so the focus ring is visible in high contrast mode
 
 var highContrastFocusRing = {
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
-    '&:focus': {
-      outline: '1px solid'
+    '&:focus-visible': highContrastFocusStyles,
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': highContrastFocusStyles
     }
   }
 };
 
+var tabFocusStyles = function tabFocusStyles(mode) {
+  return {
+    boxShadow: "0 0 0 2px ".concat((0, _colors.getTabPanelFocusColor)(mode), " inset"),
+    borderRadius: borderRadius,
+    outline: 'none'
+  };
+};
+
 var getTabPanelStyles = function getTabPanelStyles(mode) {
   return _objectSpread({
     flexGrow: 1,
@@ -44,10 +56,9 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
     minHeight: '0%',
     display: 'flex',
     padding: "0 ".concat(tabLeftRightPadding),
-    '&:focus': {
-      boxShadow: "0 0 0 2px ".concat((0, _colors.getTabPanelFocusColor)(mode), " inset"),
-      borderRadius: borderRadius,
-      outline: 'none'
+    '&:focus-visible': tabFocusStyles(mode),
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': tabFocusStyles(mode)
     }
   }, highContrastFocusRing);
 };
@@ -94,6 +105,19 @@ var getTabListStyles = function getTabListStyles(mode) {
 
 exports.getTabListStyles = getTabListStyles;
 
+var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
+  var colors = (0, _colors.getTabColors)(mode);
+  return {
+    boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
+    borderRadius: borderRadius,
+    outline: 'none',
+    // Hide TabLine on focus
+    '&::after': {
+      opacity: 0
+    }
+  };
+};
+
 var getTabStyles = function getTabStyles(mode) {
   var colors = (0, _colors.getTabColors)(mode);
   return _objectSpread(_objectSpread({
@@ -122,14 +146,9 @@ var getTabStyles = function getTabStyles(mode) {
         height: 0
       })
     },
-    '&:focus': {
-      boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
-      borderRadius: borderRadius,
-      outline: 'none',
-      // Hide TabLine on focus
-      '&::after': {
-        opacity: 0
-      }
+    '&:focus-visible': tabPanelFocusStyles(mode),
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': tabPanelFocusStyles(mode)
     }
   }, highContrastFocusRing), {}, {
     '&[aria-selected="true"]': {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tabs",
-	"version": "13.3.4",
+	"version": "13.3.6",
 	"sideEffects": false
 }

package/dist/es2019/components/tabs.js

@@ -10,7 +10,7 @@ import { onMouseDownBlur } from '../internal/utils';
 const analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.3.4"
+  packageVersion: "13.3.6"
 };
 
 const getTabPanelWithContext = ({

package/dist/es2019/internal/styles.js

@@ -5,16 +5,26 @@ const borderRadius = getBorderRadius();
 const gridSize = getGridSize();
 const tabLeftRightPadding = `${gridSize}px`;
 const tabTopBottomPadding = `${gridSize / 2}px`;
-const underlineHeight = '2px'; // Required so the focus ring is visible in high contrast mode
+const underlineHeight = '2px';
+const highContrastFocusStyles = {
+  outline: '1px solid'
+}; // Required so the focus ring is visible in high contrast mode
 
 const highContrastFocusRing = {
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
-    '&:focus': {
-      outline: '1px solid'
+    '&:focus-visible': highContrastFocusStyles,
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': highContrastFocusStyles
     }
   }
 };
 
+const tabFocusStyles = mode => ({
+  boxShadow: `0 0 0 2px ${getTabPanelFocusColor(mode)} inset`,
+  borderRadius: borderRadius,
+  outline: 'none'
+});
+
 const getTabPanelStyles = mode => ({
   flexGrow: 1,
 
@@ -25,10 +35,9 @@ const getTabPanelStyles = mode => ({
   minHeight: '0%',
   display: 'flex',
   padding: `0 ${tabLeftRightPadding}`,
-  '&:focus': {
-    boxShadow: `0 0 0 2px ${getTabPanelFocusColor(mode)} inset`,
-    borderRadius: borderRadius,
-    outline: 'none'
+  '&:focus-visible': tabFocusStyles(mode),
+  '@supports not selector(*:focus-visible)': {
+    '&:focus': tabFocusStyles(mode)
   },
   ...highContrastFocusRing
 });
@@ -63,6 +72,20 @@ css({
     backgroundColor: getTabLineColor(mode).lineColor
   }
 });
+
+const tabPanelFocusStyles = mode => {
+  const colors = getTabColors(mode);
+  return {
+    boxShadow: `0 0 0 2px ${colors.focusBorderColor} inset`,
+    borderRadius: borderRadius,
+    outline: 'none',
+    // Hide TabLine on focus
+    '&::after': {
+      opacity: 0
+    }
+  };
+};
+
 export const getTabStyles = mode => {
   const colors = getTabColors(mode);
   return {
@@ -91,14 +114,9 @@ export const getTabStyles = mode => {
         height: 0
       }
     },
-    '&:focus': {
-      boxShadow: `0 0 0 2px ${colors.focusBorderColor} inset`,
-      borderRadius: borderRadius,
-      outline: 'none',
-      // Hide TabLine on focus
-      '&::after': {
-        opacity: 0
-      }
+    '&:focus-visible': tabPanelFocusStyles(mode),
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': tabPanelFocusStyles(mode)
     },
     ...highContrastFocusRing,
     '&[aria-selected="true"]': {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tabs",
-	"version": "13.3.4",
+	"version": "13.3.6",
 	"sideEffects": false
 }

package/dist/esm/components/tabs.js

@@ -18,7 +18,7 @@ import { onMouseDownBlur } from '../internal/utils';
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.3.4"
+  packageVersion: "13.3.6"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {

package/dist/esm/internal/styles.js

@@ -11,16 +11,28 @@ var borderRadius = getBorderRadius();
 var gridSize = getGridSize();
 var tabLeftRightPadding = "".concat(gridSize, "px");
 var tabTopBottomPadding = "".concat(gridSize / 2, "px");
-var underlineHeight = '2px'; // Required so the focus ring is visible in high contrast mode
+var underlineHeight = '2px';
+var highContrastFocusStyles = {
+  outline: '1px solid'
+}; // Required so the focus ring is visible in high contrast mode
 
 var highContrastFocusRing = {
   '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
-    '&:focus': {
-      outline: '1px solid'
+    '&:focus-visible': highContrastFocusStyles,
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': highContrastFocusStyles
     }
   }
 };
 
+var tabFocusStyles = function tabFocusStyles(mode) {
+  return {
+    boxShadow: "0 0 0 2px ".concat(getTabPanelFocusColor(mode), " inset"),
+    borderRadius: borderRadius,
+    outline: 'none'
+  };
+};
+
 var getTabPanelStyles = function getTabPanelStyles(mode) {
   return _objectSpread({
     flexGrow: 1,
@@ -32,10 +44,9 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
     minHeight: '0%',
     display: 'flex',
     padding: "0 ".concat(tabLeftRightPadding),
-    '&:focus': {
-      boxShadow: "0 0 0 2px ".concat(getTabPanelFocusColor(mode), " inset"),
-      borderRadius: borderRadius,
-      outline: 'none'
+    '&:focus-visible': tabFocusStyles(mode),
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': tabFocusStyles(mode)
     }
   }, highContrastFocusRing);
 };
@@ -76,6 +87,20 @@ export var getTabListStyles = function getTabListStyles(mode) {
     })
   );
 };
+
+var tabPanelFocusStyles = function tabPanelFocusStyles(mode) {
+  var colors = getTabColors(mode);
+  return {
+    boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
+    borderRadius: borderRadius,
+    outline: 'none',
+    // Hide TabLine on focus
+    '&::after': {
+      opacity: 0
+    }
+  };
+};
+
 export var getTabStyles = function getTabStyles(mode) {
   var colors = getTabColors(mode);
   return _objectSpread(_objectSpread({
@@ -104,14 +129,9 @@ export var getTabStyles = function getTabStyles(mode) {
         height: 0
       })
     },
-    '&:focus': {
-      boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
-      borderRadius: borderRadius,
-      outline: 'none',
-      // Hide TabLine on focus
-      '&::after': {
-        opacity: 0
-      }
+    '&:focus-visible': tabPanelFocusStyles(mode),
+    '@supports not selector(*:focus-visible)': {
+      '&:focus': tabPanelFocusStyles(mode)
     }
   }, highContrastFocusRing), {}, {
     '&[aria-selected="true"]': {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/tabs",
-	"version": "13.3.4",
+	"version": "13.3.6",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "13.3.4",
+  "version": "13.3.6",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -34,9 +26,9 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/codemod-utils": "^4.1.0",
-    "@atlaskit/ds-explorations": "^1.0.0",
+    "@atlaskit/ds-explorations": "^1.2.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },

package/dist/types-ts4.0/components/tab-list.d.ts

@@ -1,13 +0,0 @@
-import { jsx } from '@emotion/react';
-import { TabListProps } from '../types';
-/**
- * __TabList__
- *
- * A TabList groups `Tab` components together.
- *
- * - [Examples](https://atlassian.design/components/tabs/examples)
- * - [Code](https://atlassian.design/components/tabs/code)
- * - [Usage](https://atlassian.design/components/tabs/usage)
- */
-declare const TabList: (props: TabListProps) => jsx.JSX.Element;
-export default TabList;

package/dist/types-ts4.0/components/tab-panel.d.ts

@@ -1,13 +0,0 @@
-import { jsx } from '@emotion/react';
-import { TabPanelProps } from '../types';
-/**
- * __TabPanel__
- *
- * A TabPanel houses the contents of a Tab.
- *
- * - [Examples](https://atlassian.design/components/tabs/examples)
- * - [Code](https://atlassian.design/components/tabs/code)
- * - [Usage](https://atlassian.design/components/tabs/usage)
- */
-declare const TabPanel: ({ children, testId }: TabPanelProps) => jsx.JSX.Element;
-export default TabPanel;

package/dist/types-ts4.0/components/tab.d.ts

@@ -1,13 +0,0 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/react';
-import { TabProps } from '../types';
-/**
- * __Tab__
- *
- * Tab represents an indivudal Tab displayed in a TabList.
- *
- * - [Examples](https://atlassian.design/components/tabs/examples)
- * - [Code](https://atlassian.design/components/tabs/code)
- * - [Usage](https://atlassian.design/components/tabs/usage)
- */
-export default function Tab({ children, testId }: TabProps): jsx.JSX.Element;

package/dist/types-ts4.0/components/tabs.d.ts

@@ -1,13 +0,0 @@
-import { jsx } from '@emotion/react';
-import { TabsProps } from '../types';
-/**
- * __Tabs__
- *
- * Tabs acts as a container for all Tab components.
- *
- * - [Examples](https://atlassian.design/components/tabs/examples)
- * - [Code](https://atlassian.design/components/tabs/code)
- * - [Usage](https://atlassian.design/components/tabs/usage)
- */
-declare const Tabs: (props: TabsProps) => jsx.JSX.Element;
-export default Tabs;

package/dist/types-ts4.0/hooks.d.ts

@@ -1,3 +0,0 @@
-export declare const useTab: () => import("./types").TabAttributesType;
-export declare const useTabList: () => import("./types").TabListAttributesType;
-export declare const useTabPanel: () => import("./types").TabPanelAttributesType;

package/dist/types-ts4.0/index.d.ts

@@ -1,6 +0,0 @@
-export { default } from './components/tabs';
-export { default as TabPanel } from './components/tab-panel';
-export { default as Tab } from './components/tab';
-export { default as TabList } from './components/tab-list';
-export type { TabProps, TabPanelProps, TabsProps, TabListProps, TabAttributesType, TabListAttributesType, TabPanelAttributesType, TabData, } from './types';
-export { useTab, useTabPanel } from './hooks';

package/dist/types-ts4.0/internal/colors.d.ts

@@ -1,17 +0,0 @@
-import { ThemeModes } from '@atlaskit/theme/types';
-export declare type TabColors = {
-    labelColor: string;
-    activeLabelColor: string;
-    hoverLabelColor: string;
-    selectedColor: string;
-    focusBorderColor: string;
-};
-export declare const getTabColors: (mode: ThemeModes) => TabColors;
-export declare type TabLineColors = {
-    lineColor: string;
-    hoveredColor: string;
-    activeColor: string;
-    selectedColor: string;
-};
-export declare const getTabLineColor: (mode: ThemeModes) => TabLineColors;
-export declare const getTabPanelFocusColor: (mode: ThemeModes) => string;

package/dist/types-ts4.0/internal/context.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-import { TabAttributesType, TabListAttributesType, TabPanelAttributesType } from '../types';
-export declare const TabContext: import("react").Context<TabAttributesType | null>;
-export declare const TabListContext: import("react").Context<TabListAttributesType | null>;
-export declare const TabPanelContext: import("react").Context<TabPanelAttributesType | null>;

package/dist/types-ts4.0/internal/styles.d.ts

@@ -1,5 +0,0 @@
-import { CSSObject, SerializedStyles } from '@emotion/react';
-import { ThemeModes } from '@atlaskit/theme/types';
-export declare const getTabsStyles: (mode: ThemeModes) => SerializedStyles;
-export declare const getTabListStyles: (mode: ThemeModes) => SerializedStyles;
-export declare const getTabStyles: (mode: ThemeModes) => CSSObject;

package/dist/types-ts4.0/internal/utils.d.ts

@@ -1,2 +0,0 @@
-import type { MouseEvent } from 'react';
-export declare const onMouseDownBlur: (e: MouseEvent<HTMLElement>) => void;

package/dist/types-ts4.0/performance/examples.d.ts

@@ -1,24 +0,0 @@
-/// <reference types="react" />
-import type { PublicInteractionTask } from 'storybook-addon-performance';
-export declare const performance: {
-    (): JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            performance: {
-                interactions: PublicInteractionTask[];
-            };
-        };
-    };
-};
-export declare const heavyPerformance: {
-    (): JSX.Element;
-    story: {
-        name: string;
-        parameters: {
-            performance: {
-                interactions: PublicInteractionTask[];
-            };
-        };
-    };
-};

package/dist/types-ts4.0/types.d.ts

@@ -1,196 +0,0 @@
-import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
-import UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
-export interface TabProps {
-    /**
-     * The children to be rendered within a `Tab`.
-     */
-    children: ReactNode;
-    /**
-     * A `testId` prop is  is a unique string that appears as a data attribute `data-testid`
-     * on the `Tab` element, serving as a hook for automated tests.
-     */
-    testId?: string;
-}
-export interface TabPanelProps {
-    /**
-     * The children to be rendered within a `TabPanel`.
-     */
-    children: ReactNode;
-    /**
-     * A `testId` prop is  is a unique string that appears as a data attribute `data-testid`
-     * on the `TabPanel` element, serving as a hook for automated tests.
-     */
-    testId?: string;
-}
-/**
- * @deprecated
- * Previously this was the type for the tabs prop that was used like
- * <Tabs tabs={tabs} />
- * The codemod changes this to be
- * <Tabs>
- *  <TabList>
- *    {tabs.map(tab => <Tab testId={tab.testId}>{tab.label}</Tab>)}
- *  </TabList>
- *  {tabs.map(tab => <TabPanel>{tab.content}</TabPanel>)}
- * </Tabs>
- * The TabData type remains so the variable used in tabs can have a type.
- */
-export interface TabData {
-    /**
-     * String to be put inside a tab
-     */
-    label?: string;
-    /**
-     * String to be put inside a tab panel
-     */
-    content?: ReactNode;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests. This `testId` is put on the tab.
-     */
-    testId?: string;
-    /**
-     * Used by consumers to convey extra information about the tab.
-     */
-    [key: string]: any;
-}
-export declare type SelectedType = number;
-export declare type OnChangeCallback = (index: SelectedType, analyticsEvent: UIAnalyticsEvent) => void;
-export interface TabsProps extends WithAnalyticsEventsProps {
-    /**
-     * The index of the tab that will be selected by default when the component mounts.
-     * If not set the first tab will be displayed by default.
-     */
-    defaultSelected?: SelectedType;
-    /**
-     * A callback function which will be fired when a changed. It will be passed
-     * the index of the selected tab and a `UIAnalyticsEvent`.
-     */
-    onChange?: OnChangeCallback;
-    /**
-     * The selected tab's index. If this prop is set the component behaves as a
-     * controlled component. It will be up to you to listen to `onChange`.
-     */
-    selected?: SelectedType;
-    /**
-     * Tabs by default leaves `TabPanel`'s mounted on the page after they have been selected.
-     * If you would like to unmount a `TabPanel` when it is not selected, set this prop to
-     * be true.
-     */
-    shouldUnmountTabPanelOnChange?: boolean;
-    /**
-     * Additional information to be included in the `context` of analytics events that come from `Tabs`.
-     */
-    analyticsContext?: Record<string, any>;
-    /**
-     * A `testId` prop is a unique string that appears as a data attribute `data-testid`
-     * on the `Tabs` element, serving as a hook for automated tests.
-     */
-    testId?: string;
-    /**
-     * The children of Tabs. The first child should be a `TabList` filled with `Tab`'s.
-     * Subsequent children should be `TabPanel`'s. There should be a `Tab` for each `TabPanel`.
-     * If you want to customize `Tab` or `TabPanel`, refer to the examples in the documentation.
-     */
-    children: ReactNode;
-    /**
-     * A unique ID that will be used to generate IDs for tabs and tab panels.
-     * This is required for accessibility purposes.
-     */
-    id: string;
-}
-export interface TabListProps {
-    /**
-     * A collection of `Tab`'s.  There should be a `Tab` for each `TabPanel`.
-     * If you want to customize `Tab` there is documentation in the tab section.
-     */
-    children: ReactNode;
-}
-export declare type TabAttributesType = {
-    /**
-     * Changes the selected tab.
-     */
-    onClick: () => void;
-    /**
-     * ID of the tab.
-     */
-    id: string;
-    /**
-     * The id of the tab panel that this tab links.
-     */
-    'aria-controls': string;
-    /**
-     * The position of this tab within the tab list.
-     */
-    'aria-posinset': number;
-    /**
-     * Whether this tab is selected.
-     */
-    'aria-selected': boolean;
-    /**
-     * The number of tabs in this tab list.
-     */
-    'aria-setsize': number;
-    /**
-     * Prevents a focus ring being shown when clicked.
-     */
-    onMouseDown: (e: MouseEvent<HTMLElement>) => void;
-    /**
-     * Allows navigation of tabs with automatic activation.
-     * Read here for more details: https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tabs-1/tabs.html
-     */
-    onKeyDown: (e: KeyboardEvent<HTMLElement>) => void;
-    /**
-     * Role is "tab".
-     */
-    role: 'tab';
-    /**
-     * If the tab is selected the tab index is 0 and is focusable.
-     * Otherwise it is -1 and is not focusable.
-     */
-    tabIndex: number;
-};
-export declare type TabListAttributesType = {
-    /**
-     * The index of the selected tab.
-     */
-    selected: SelectedType;
-    /**
-     * A unique ID that will be used to generate IDs for tabs and tab panels.
-     * This is required for accessibility reasons.
-     */
-    tabsId: string;
-    /**
-     * A callback function which will be fired when a tab is changed.
-     */
-    onChange: (index: SelectedType) => void;
-};
-export declare type TabPanelAttributesType = {
-    /**
-     * Role is "tabpanel".
-     */
-    role: 'tabpanel';
-    /**
-     * ID of the the tab panel.
-     */
-    id: string;
-    /**
-     * Hidden is true if it is not the selected tab.
-     */
-    hidden?: boolean;
-    /**
-     * The id of the tab that links to this tab panel.
-     */
-    'aria-labelledby': string;
-    /**
-     * Prevents a focus ring being shown when clicked.
-     */
-    onMouseDown: (e: MouseEvent<HTMLElement>) => void;
-    /**
-     * If the tab panel is selected the tab index is 0 and is focusable.
-     * Otherwise it is -1 and is not focusable.
-     */
-    tabIndex: number;
-};