@atlaskit/tabs 13.2.9 → 13.2.12

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/tabs
 
+## 13.2.12
+
+### Patch Changes
+
+- [`f0056770cce`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f0056770cce) - Internal code change turning on new linting rules.
+
+## 13.2.11
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.2.10
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+
 ## 13.2.9
 
 ### Patch Changes

package/codemods/{13.0.0-lite-mode.ts → 13.0.0-lite-mode.tsx}

@@ -8,12 +8,12 @@ import {
 
 import { addIdProp } from './migrations/add-id-prop';
 import { mapTabsProp, removeTabsProp } from './migrations/map-tabs-prop';
-import { migrateOnSelectType } from './migrations/onSelect-to-onChange';
+import { migrateOnSelectType } from './migrations/on-select-to-on-change';
 import { removeComponentsProp } from './migrations/remove-components-prop';
-import { removeIsSelectedTestProp } from './migrations/remove-isSelectedTest-prop';
-import { removeTabItemTabContent } from './migrations/remove-TabItem-TabContent';
+import { removeIsSelectedTestProp } from './migrations/remove-is-selected-test-prop';
+import { removeTabItemTabContent } from './migrations/remove-tab-item-tab-content';
 import { removeTypes } from './migrations/remove-types';
-import { renameIsContentPersistedToShouldUnmountTabPanelOnChange } from './migrations/rename-isContentPersisted-to-shouldUnmountTabPanelOnChange';
+import { renameIsContentPersistedToShouldUnmountTabPanelOnChange } from './migrations/rename-is-content-persisted-to-should-unmount-tab-panel-on-change';
 
 const transformer = createTransformer(
   [

package/codemods/__tests__/{onSelect-to-onChange.ts → on-select-to-on-change.tsx}

@@ -1,6 +1,6 @@
 import { createTransformer } from '@atlaskit/codemod-utils';
 
-import { migrateOnSelectType } from '../migrations/onSelect-to-onChange';
+import { migrateOnSelectType } from '../migrations/on-select-to-on-change';
 
 const transformer = createTransformer([migrateOnSelectType]);
 

package/codemods/__tests__/{remove-isSelectedTest-prop.ts → remove-is-selected-test-prop.tsx}

@@ -1,6 +1,6 @@
 import { createTransformer } from '@atlaskit/codemod-utils';
 
-import { removeIsSelectedTestProp } from '../migrations/remove-isSelectedTest-prop';
+import { removeIsSelectedTestProp } from '../migrations/remove-is-selected-test-prop';
 
 const transformer = createTransformer([removeIsSelectedTestProp]);
 

package/codemods/__tests__/{remove-TabItem-TabContent.ts → remove-tab-item-tab-content.tsx}

@@ -1,6 +1,6 @@
 import { createTransformer } from '@atlaskit/codemod-utils';
 
-import { removeTabItemTabContent } from '../migrations/remove-TabItem-TabContent';
+import { removeTabItemTabContent } from '../migrations/remove-tab-item-tab-content';
 
 const transformer = createTransformer([removeTabItemTabContent]);
 

package/codemods/__tests__/{rename-isContentPersisted-to-shouldUnmountTabPanelOnChange.ts → rename-is-content-persisted-to-should-unmount-tab-panel-on-change.tsx}

@@ -1,6 +1,6 @@
 import { createTransformer } from '@atlaskit/codemod-utils';
 
-import { renameIsContentPersistedToShouldUnmountTabPanelOnChange } from '../migrations/rename-isContentPersisted-to-shouldUnmountTabPanelOnChange';
+import { renameIsContentPersistedToShouldUnmountTabPanelOnChange } from '../migrations/rename-is-content-persisted-to-should-unmount-tab-panel-on-change';
 
 const transformer = createTransformer([
   renameIsContentPersistedToShouldUnmountTabPanelOnChange,

package/dist/cjs/components/tab-list.js

@@ -119,6 +119,16 @@ var TabListWithMode = function TabListWithMode(props) {
     }))
   );
 };
+/**
+ * __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)
+ */
+
 
 var TabList = function TabList(props) {
   return (0, _core.jsx)(_components.default.Consumer, null, function (_ref2) {

package/dist/cjs/components/tab-panel.js

@@ -15,6 +15,16 @@ var _hooks = require("../hooks");
 
 /** @jsx jsx */
 // Note this is not being memoized as children is an unstable reference
+
+/**
+ * __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)
+ */
 var TabPanel = function TabPanel(_ref) {
   var children = _ref.children,
       testId = _ref.testId;

package/dist/cjs/components/tab.js

@@ -14,6 +14,16 @@ var _core = require("@emotion/core");
 var _hooks = require("../hooks");
 
 /** @jsx jsx */
+
+/**
+ * __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)
+ */
 function Tab(_ref) {
   var children = _ref.children,
       testId = _ref.testId;

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.2.9"
+  packageVersion: "13.2.12"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
@@ -137,6 +137,16 @@ var TabsWithMode = function TabsWithMode(props) {
     }, tabList), tabPanelsWithContext)
   );
 };
+/**
+ * __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)
+ */
+
 
 var Tabs = function Tabs(props) {
   return (0, _core.jsx)(_components.default.Consumer, null, function (_ref2) {

package/dist/cjs/internal/context.js

@@ -7,6 +7,7 @@ exports.TabPanelContext = exports.TabListContext = exports.TabContext = void 0;
 
 var _react = require("react");
 
+/* eslint-disable @repo/internal/react/require-jsdoc */
 var TabContext = /*#__PURE__*/(0, _react.createContext)(null);
 exports.TabContext = TabContext;
 var TabListContext = /*#__PURE__*/(0, _react.createContext)(null);

package/dist/cjs/version.json

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

package/dist/es2019/components/tab-list.js

@@ -96,6 +96,16 @@ const TabListWithMode = props => {
     })))
   );
 };
+/**
+ * __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)
+ */
+
 
 export const TabList = props => jsx(GlobalTheme.Consumer, null, ({
   mode

package/dist/es2019/components/tab-panel.js

@@ -5,6 +5,16 @@ import { jsx } from '@emotion/core';
 import { useTabPanel } from '../hooks';
 
 // Note this is not being memoized as children is an unstable reference
+
+/**
+ * __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)
+ */
 const TabPanel = ({
   children,
   testId

package/dist/es2019/components/tab.js

@@ -3,6 +3,16 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { useTab } from '../hooks';
+
+/**
+ * __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

package/dist/es2019/components/tabs.js

@@ -11,7 +11,7 @@ import { onMouseDownBlur } from '../internal/utils';
 const analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.2.9"
+  packageVersion: "13.2.12"
 };
 
 const getTabPanelWithContext = ({
@@ -96,6 +96,16 @@ const TabsWithMode = props => {
     }, tabList), tabPanelsWithContext)
   );
 };
+/**
+ * __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)
+ */
+
 
 export const Tabs = props => jsx(GlobalTheme.Consumer, null, ({
   mode

package/dist/es2019/internal/context.js

@@ -1,3 +1,4 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
 import { createContext } from 'react';
 export const TabContext = /*#__PURE__*/createContext(null);
 export const TabListContext = /*#__PURE__*/createContext(null);

package/dist/es2019/version.json

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

package/dist/esm/components/tab-list.js

@@ -103,6 +103,16 @@ var TabListWithMode = function TabListWithMode(props) {
     }))
   );
 };
+/**
+ * __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)
+ */
+
 
 export var TabList = function TabList(props) {
   return jsx(GlobalTheme.Consumer, null, function (_ref2) {

package/dist/esm/components/tab-panel.js

@@ -5,6 +5,16 @@ import { jsx } from '@emotion/core';
 import { useTabPanel } from '../hooks';
 
 // Note this is not being memoized as children is an unstable reference
+
+/**
+ * __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)
+ */
 var TabPanel = function TabPanel(_ref) {
   var children = _ref.children,
       testId = _ref.testId;

package/dist/esm/components/tab.js

@@ -3,6 +3,16 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { useTab } from '../hooks';
+
+/**
+ * __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(_ref) {
   var children = _ref.children,
       testId = _ref.testId;

package/dist/esm/components/tabs.js

@@ -18,7 +18,7 @@ import { onMouseDownBlur } from '../internal/utils';
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.2.9"
+  packageVersion: "13.2.12"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
@@ -117,6 +117,16 @@ var TabsWithMode = function TabsWithMode(props) {
     }, tabList), tabPanelsWithContext)
   );
 };
+/**
+ * __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)
+ */
+
 
 export var Tabs = function Tabs(props) {
   return jsx(GlobalTheme.Consumer, null, function (_ref2) {

package/dist/esm/internal/context.js

@@ -1,3 +1,4 @@
+/* eslint-disable @repo/internal/react/require-jsdoc */
 import { createContext } from 'react';
 export var TabContext = /*#__PURE__*/createContext(null);
 export var TabListContext = /*#__PURE__*/createContext(null);

package/dist/esm/version.json

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

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

@@ -1,4 +1,13 @@
 /// <reference types="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)
+ */
 export declare const TabList: (props: TabListProps) => JSX.Element;
 export default TabList;

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

@@ -1,4 +1,13 @@
 /// <reference types="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.Element;
 export default TabPanel;

package/dist/types/components/tab.d.ts

@@ -1,3 +1,12 @@
 /// <reference types="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.Element;

package/dist/types/components/tabs.d.ts

@@ -1,4 +1,13 @@
 /// <reference types="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)
+ */
 export declare const Tabs: (props: TabsProps) => JSX.Element;
 export default Tabs;

package/dist/types/types.d.ts

@@ -37,15 +37,23 @@ export interface TabPanelProps {
  * The TabData type remains so the variable used in tabs can have a type.
  */
 export interface TabData {
-    /** String to be put inside a tab */
+    /**
+     * String to be put inside a tab
+     */
     label?: string;
-    /** String to be put inside a tab panel */
+    /**
+     * String to be put inside a tab panel
+     */
     content?: ReactNode;
-    /** A `testId` prop is provided for specified elements, which is a unique
+    /**
+     * 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. */
+     * 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. */
+    /**
+     * Used by consumers to convey extra information about the tab.
+     */
     [key: string]: any;
 }
 export declare type SelectedType = number;

package/hooks/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/hooks.js",
   "module": "../dist/esm/hooks.js",
   "module:es2019": "../dist/es2019/hooks.js",
+  "sideEffects": false,
   "types": "../dist/types/hooks.d.ts"
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "13.2.9",
+  "version": "13.2.12",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -13,19 +13,20 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Tabs"
+      "name": "Tabs",
+      "category": "Components"
     }
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/codemod-utils": "^4.0.0",
+    "@atlaskit/codemod-utils": "^4.1.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -33,8 +34,9 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.2.0",
+    "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/ssr": "*",
@@ -48,7 +50,7 @@
     "react-dom": "^16.8.0",
     "react-lorem-component": "^0.13.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "3.9.10",
+    "typescript": "4.2.4",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {
@@ -56,6 +58,8 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
+      "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",
@@ -67,9 +71,9 @@
     }
   },
   "af:exports": {
-    ".": "./src/index.ts",
-    "./types": "./src/types.ts",
-    "./hooks": "./src/hooks.ts"
+    ".": "./src/index.tsx",
+    "./types": "./src/types.tsx",
+    "./hooks": "./src/hooks.tsx"
   },
   "homepage": "https://atlassian.design/components/tabs/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"

package/report.api.md

@@ -0,0 +1,229 @@
+## API Report File for "@atlaskit/tabs"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { KeyboardEvent as KeyboardEvent_2 } from 'react';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { ReactNode } from 'react';
+import UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next/withAnalyticsEvents';
+
+declare type OnChangeCallback = (
+  index: SelectedType,
+  analyticsEvent: UIAnalyticsEvent,
+) => void;
+
+declare type SelectedType = number;
+
+export declare function Tab({ children, testId }: TabProps): JSX.Element;
+
+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_2<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_2<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;
+};
+
+/**
+ * @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 declare 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 const TabList: (props: TabListProps) => JSX.Element;
+
+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 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 const TabPanel: ({
+  children,
+  testId,
+}: TabPanelProps) => JSX.Element;
+
+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_2<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;
+};
+
+export declare 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;
+}
+
+export declare 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;
+}
+
+declare const Tabs: (props: TabsProps) => JSX.Element;
+export default Tabs;
+
+export declare 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 declare const useTab: () => TabAttributesType;
+
+export declare const useTabPanel: () => TabPanelAttributesType;
+
+export {};
+```

package/types/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/types.js",
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
+  "sideEffects": false,
   "types": "../dist/types/types.d.ts"
 }