@atlaskit/tabs 13.3.1 → 13.3.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/tabs
 
+## 13.3.3
+
+### Patch Changes
+
+- [`9827dcb82b8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9827dcb82b8) - No-op change to introduce spacing tokens to design system components.
+
+## 13.3.2
+
+### Patch Changes
+
+- [`0d42cd1c926`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0d42cd1c926) - Internal changes to the way styles are applied. There should be no noticeable changes to consumers.
+
 ## 13.3.1
 
 ### Patch Changes

package/__perf__/default.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @repo/internal/react/use-primitives */
 import React from 'react';
 
 import Tabs, { Tab, TabList, TabPanel } from '../src';

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

@@ -1,19 +1,17 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TabList = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.default = void 0;
 
 var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
+var _dsExplorations = require("@atlaskit/ds-explorations");
+
+var _components = require("@atlaskit/theme/components");
 
 var _hooks = require("../hooks");
 
@@ -24,9 +22,21 @@ var _styles = require("../internal/styles");
 var _utils = require("../internal/utils");
 
 /** @jsx jsx */
-var TabListWithMode = function TabListWithMode(props) {
-  var children = props.children,
-      mode = props.mode;
+
+/**
+ * __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) {
+  var children = props.children;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
 
   var _useTabList = (0, _hooks.useTabList)(),
       tabsId = _useTabList.tabsId,
@@ -38,7 +48,7 @@ var TabListWithMode = function TabListWithMode(props) {
   var childrenArray = _react.Children.toArray(children).filter(Boolean);
 
   var length = childrenArray.length;
-  var styles = (0, _react.useMemo)(function () {
+  var tabListStyles = (0, _react.useMemo)(function () {
     return (0, _styles.getTabListStyles)(mode);
   }, [mode]);
   var selectTabByIndex = (0, _react.useCallback)(function (index) {
@@ -105,11 +115,19 @@ var TabListWithMode = function TabListWithMode(props) {
       key: index
     }, tab);
   }, [length, onKeyDown, onChange, tabsId]);
-  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _react2.jsx)("div", {
+  return (// Only styles that affect the TabList itself have been applied via primitives.
+    // The other styles applied through the CSS prop are there for styling children
+    // through inheritance. This is important for custom cases that use the useTab(),
+    // which applies accessibility atributes that we use as a styling hook.
+    (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
+      as: "div",
       role: "tablist",
-      css: styles,
-      ref: ref
+      display: "flex",
+      position: "relative",
+      padding: "sp-0",
+      ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
+      css: tabListStyles
     }, childrenArray.map(function (child, index) {
       return getTabWithContext({
         tab: child,
@@ -119,26 +137,6 @@ 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, _react2.jsx)(_components.default.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return (0, _react2.jsx)(TabListWithMode, (0, _extends2.default)({}, props, {
-      mode: mode
-    }));
-  });
-};
 
-exports.TabList = TabList;
 var _default = TabList;
 exports.default = _default;

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

@@ -9,7 +9,11 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _react = require("@emotion/react");
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _dsExplorations = require("@atlaskit/ds-explorations");
 
 var _hooks = require("../hooks");
 
@@ -29,9 +33,10 @@ var TabPanel = function TabPanel(_ref) {
   var children = _ref.children,
       testId = _ref.testId;
   var tabPanelAttributes = (0, _hooks.useTabPanel)();
-  return (0, _react.jsx)("div", (0, _extends2.default)({
-    "data-testid": testId
-  }, tabPanelAttributes), children);
+  return (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
+    testId: testId,
+    as: "div"
+  }, tabPanelAttributes), (0, _react2.jsx)(_react.Fragment, null, children));
 };
 
 var _default = TabPanel;

package/dist/cjs/components/tab.js

@@ -11,6 +11,8 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = require("@emotion/react");
 
+var _dsExplorations = require("@atlaskit/ds-explorations");
+
 var _hooks = require("../hooks");
 
 /** @jsx jsx */
@@ -28,7 +30,13 @@ function Tab(_ref) {
   var children = _ref.children,
       testId = _ref.testId;
   var tabAttributes = (0, _hooks.useTab)();
-  return (0, _react.jsx)("div", (0, _extends2.default)({
-    "data-testid": testId
-  }, tabAttributes), children);
+  return (0, _react.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
+    as: "div",
+    testId: testId
+  }, tabAttributes), (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
+    shouldTruncate: true,
+    UNSAFE_style: {
+      color: 'inherit'
+    }
+  }, children));
 }

package/dist/cjs/components/tabs.js

@@ -5,9 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.Tabs = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -21,7 +19,9 @@ var _react2 = require("@emotion/react");
 
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
+var _dsExplorations = require("@atlaskit/ds-explorations");
+
+var _components = require("@atlaskit/theme/components");
 
 var _context = require("../internal/context");
 
@@ -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.1"
+  packageVersion: "13.3.3"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
@@ -58,8 +58,18 @@ var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
     }, tabPanel)
   );
 };
+/**
+ * __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 TabsWithMode = function TabsWithMode(props) {
+
+var Tabs = function Tabs(props) {
   var _props$shouldUnmountT = props.shouldUnmountTabPanelOnChange,
       shouldUnmountTabPanelOnChange = _props$shouldUnmountT === void 0 ? false : _props$shouldUnmountT,
       SelectedType = props.selected,
@@ -68,8 +78,10 @@ var TabsWithMode = function TabsWithMode(props) {
       id = props.id,
       analyticsContext = props.analyticsContext,
       children = props.children,
-      testId = props.testId,
-      mode = props.mode;
+      testId = props.testId;
+
+  var _useGlobalTheme = (0, _components.useGlobalTheme)(),
+      mode = _useGlobalTheme.mode;
 
   var _useState = (0, _react.useState)(SelectedType || defaultSelected || 0),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -124,9 +136,22 @@ var TabsWithMode = function TabsWithMode(props) {
   var tabsStyles = (0, _react.useMemo)(function () {
     return (0, _styles.getTabsStyles)(mode);
   }, [mode]);
-  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _react2.jsx)("div", {
-      "data-testid": testId,
+  return (// Only styles that affect the Tabs container itself have been applied via primitives.
+    // The other styles applied through the CSS prop are there for styling children
+    // through inheritance. This is important for custom cases that use the useTabPanel(),
+    // which applies accessibility atributes that we use as a styling hook.
+    (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, {
+      as: "div",
+      testId: testId,
+      display: "flex",
+      flexDirection: "column",
+      UNSAFE_style: {
+        maxWidth: '100%',
+        minHeight: '0%',
+        flexBasis: '100%',
+        flexGrow: 1
+      } // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
       css: tabsStyles
     }, (0, _react2.jsx)(_context.TabListContext.Provider, {
       value: {
@@ -134,29 +159,9 @@ var TabsWithMode = function TabsWithMode(props) {
         onChange: onChangeAnalytics,
         tabsId: id
       }
-    }, tabList), tabPanelsWithContext)
+    }, tabList), (0, _react2.jsx)(_react.Fragment, null, 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, _react2.jsx)(_components.default.Consumer, null, function (_ref2) {
-    var mode = _ref2.mode;
-    return (0, _react2.jsx)(TabsWithMode, (0, _extends2.default)({}, props, {
-      mode: mode
-    }));
-  });
-};
 
-exports.Tabs = Tabs;
 var _default = Tabs;
 exports.default = _default;

package/dist/cjs/internal/styles.js

@@ -55,12 +55,6 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
 var getTabsStyles = function getTabsStyles(mode) {
   return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
     (0, _react.css)({
-      display: 'flex',
-      maxWidth: '100%',
-      minHeight: '0%',
-      flexBasis: '100%',
-      flexDirection: 'column',
-      flexGrow: 1,
       '& [role="tabpanel"]': getTabPanelStyles(mode),
       // The hidden attribute doesn't work on flex elements
       // Change display to be none
@@ -87,10 +81,6 @@ var tabLineStyles = {
 var getTabListStyles = function getTabListStyles(mode) {
   return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
     (0, _react.css)({
-      display: 'flex',
-      margin: 0,
-      padding: 0,
-      position: 'relative',
       '& [role="tab"]': getTabStyles(mode),
       fontWeight: 500,
       '&::before': _objectSpread(_objectSpread({}, tabLineStyles), {}, {

package/dist/cjs/version.json

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

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

@@ -1,19 +1,29 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { Children, createRef, useCallback, useMemo } from 'react';
 import { jsx } from '@emotion/react';
-import GlobalTheme from '@atlaskit/theme/components';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { useTabList } from '../hooks';
 import { TabContext } from '../internal/context';
 import { getTabListStyles } from '../internal/styles';
 import { onMouseDownBlur } from '../internal/utils';
 
-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)
+ */
+const TabList = props => {
   const {
-    children,
-    mode
+    children
   } = props;
+  const {
+    mode
+  } = useGlobalTheme();
   const {
     tabsId,
     selected,
@@ -23,7 +33,7 @@ const TabListWithMode = props => {
 
   const childrenArray = Children.toArray(children).filter(Boolean);
   const length = childrenArray.length;
-  const styles = useMemo(() => getTabListStyles(mode), [mode]);
+  const tabListStyles = useMemo(() => getTabListStyles(mode), [mode]);
   const selectTabByIndex = useCallback(index => {
     var _ref$current;
 
@@ -84,11 +94,19 @@ const TabListWithMode = props => {
     },
     key: index
   }, tab), [length, onKeyDown, onChange, tabsId]);
-  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    jsx("div", {
+  return (// Only styles that affect the TabList itself have been applied via primitives.
+    // The other styles applied through the CSS prop are there for styling children
+    // through inheritance. This is important for custom cases that use the useTab(),
+    // which applies accessibility atributes that we use as a styling hook.
+    jsx(Box, {
+      as: "div",
       role: "tablist",
-      css: styles,
-      ref: ref
+      display: "flex",
+      position: "relative",
+      padding: "sp-0",
+      ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
+      css: tabListStyles
     }, childrenArray.map((child, index) => getTabWithContext({
       tab: child,
       index,
@@ -96,20 +114,5 @@ 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
-}) => jsx(TabListWithMode, _extends({}, props, {
-  mode: mode
-})));
 export default TabList;

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

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
+import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 import { useTabPanel } from '../hooks';
 
 // Note this is not being memoized as children is an unstable reference
@@ -20,9 +22,10 @@ const TabPanel = ({
   testId
 }) => {
   const tabPanelAttributes = useTabPanel();
-  return jsx("div", _extends({
-    "data-testid": testId
-  }, tabPanelAttributes), children);
+  return jsx(Box, _extends({
+    testId: testId,
+    as: "div"
+  }, tabPanelAttributes), jsx(Fragment, null, children));
 };
 
 export default TabPanel;

package/dist/es2019/components/tab.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { useTab } from '../hooks';
 
 /**
@@ -18,7 +19,13 @@ export default function Tab({
   testId
 }) {
   const tabAttributes = useTab();
-  return jsx("div", _extends({
-    "data-testid": testId
-  }, tabAttributes), children);
+  return jsx(Box, _extends({
+    as: "div",
+    testId: testId
+  }, tabAttributes), jsx(Text, {
+    shouldTruncate: true,
+    UNSAFE_style: {
+      color: 'inherit'
+    }
+  }, children));
 }

package/dist/es2019/components/tabs.js

@@ -1,17 +1,16 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
-import { Children, useCallback, useMemo, useRef, useState } from 'react';
+import { Children, Fragment, useCallback, useMemo, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import GlobalTheme from '@atlaskit/theme/components';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { TabListContext, TabPanelContext } from '../internal/context';
 import { getTabsStyles } from '../internal/styles';
 import { onMouseDownBlur } from '../internal/utils';
 const analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.3.1"
+  packageVersion: "13.3.3"
 };
 
 const getTabPanelWithContext = ({
@@ -31,8 +30,18 @@ tabPanel && jsx(TabPanelContext.Provider, {
   },
   key: index
 }, tabPanel);
+/**
+ * __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)
+ */
+
 
-const TabsWithMode = props => {
+const Tabs = props => {
   const {
     shouldUnmountTabPanelOnChange = false,
     selected: SelectedType,
@@ -41,9 +50,11 @@ const TabsWithMode = props => {
     id,
     analyticsContext,
     children,
-    testId,
-    mode
+    testId
   } = props;
+  const {
+    mode
+  } = useGlobalTheme();
   const [selectedState, setSelected] = useState(SelectedType || defaultSelected || 0);
   const selected = SelectedType === undefined ? selectedState : SelectedType;
   const childrenArray = Children.toArray(children) // Don't include any conditional children
@@ -83,9 +94,22 @@ const TabsWithMode = props => {
     tabsId: id
   }));
   const tabsStyles = useMemo(() => getTabsStyles(mode), [mode]);
-  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    jsx("div", {
-      "data-testid": testId,
+  return (// Only styles that affect the Tabs container itself have been applied via primitives.
+    // The other styles applied through the CSS prop are there for styling children
+    // through inheritance. This is important for custom cases that use the useTabPanel(),
+    // which applies accessibility atributes that we use as a styling hook.
+    jsx(Box, {
+      as: "div",
+      testId: testId,
+      display: "flex",
+      flexDirection: "column",
+      UNSAFE_style: {
+        maxWidth: '100%',
+        minHeight: '0%',
+        flexBasis: '100%',
+        flexGrow: 1
+      } // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
       css: tabsStyles
     }, jsx(TabListContext.Provider, {
       value: {
@@ -93,23 +117,8 @@ const TabsWithMode = props => {
         onChange: onChangeAnalytics,
         tabsId: id
       }
-    }, tabList), tabPanelsWithContext)
+    }, tabList), jsx(Fragment, null, 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
-}) => jsx(TabsWithMode, _extends({}, props, {
-  mode: mode
-})));
 export default Tabs;

package/dist/es2019/internal/styles.js

@@ -35,12 +35,6 @@ const getTabPanelStyles = mode => ({
 
 export const getTabsStyles = mode => // eslint-disable-next-line @repo/internal/styles/no-exported-styles
 css({
-  display: 'flex',
-  maxWidth: '100%',
-  minHeight: '0%',
-  flexBasis: '100%',
-  flexDirection: 'column',
-  flexGrow: 1,
   '& [role="tabpanel"]': getTabPanelStyles(mode),
   // The hidden attribute doesn't work on flex elements
   // Change display to be none
@@ -61,10 +55,6 @@ const tabLineStyles = {
 };
 export const getTabListStyles = mode => // eslint-disable-next-line @repo/internal/styles/no-exported-styles
 css({
-  display: 'flex',
-  margin: 0,
-  padding: 0,
-  position: 'relative',
   '& [role="tab"]': getTabStyles(mode),
   fontWeight: 500,
   '&::before': { ...tabLineStyles,

package/dist/es2019/version.json

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

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

@@ -1,17 +1,27 @@
-import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
 import { Children, createRef, useCallback, useMemo } from 'react';
 import { jsx } from '@emotion/react';
-import GlobalTheme from '@atlaskit/theme/components';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { useTabList } from '../hooks';
 import { TabContext } from '../internal/context';
 import { getTabListStyles } from '../internal/styles';
 import { onMouseDownBlur } from '../internal/utils';
 
-var TabListWithMode = function TabListWithMode(props) {
-  var children = props.children,
-      mode = props.mode;
+/**
+ * __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) {
+  var children = props.children;
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
 
   var _useTabList = useTabList(),
       tabsId = _useTabList.tabsId,
@@ -22,7 +32,7 @@ var TabListWithMode = function TabListWithMode(props) {
 
   var childrenArray = Children.toArray(children).filter(Boolean);
   var length = childrenArray.length;
-  var styles = useMemo(function () {
+  var tabListStyles = useMemo(function () {
     return getTabListStyles(mode);
   }, [mode]);
   var selectTabByIndex = useCallback(function (index) {
@@ -89,11 +99,19 @@ var TabListWithMode = function TabListWithMode(props) {
       key: index
     }, tab);
   }, [length, onKeyDown, onChange, tabsId]);
-  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    jsx("div", {
+  return (// Only styles that affect the TabList itself have been applied via primitives.
+    // The other styles applied through the CSS prop are there for styling children
+    // through inheritance. This is important for custom cases that use the useTab(),
+    // which applies accessibility atributes that we use as a styling hook.
+    jsx(Box, {
+      as: "div",
       role: "tablist",
-      css: styles,
-      ref: ref
+      display: "flex",
+      position: "relative",
+      padding: "sp-0",
+      ref: ref // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
+      css: tabListStyles
     }, childrenArray.map(function (child, index) {
       return getTabWithContext({
         tab: child,
@@ -103,23 +121,5 @@ 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) {
-    var mode = _ref2.mode;
-    return jsx(TabListWithMode, _extends({}, props, {
-      mode: mode
-    }));
-  });
-};
 export default TabList;

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

@@ -1,7 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
+import { Fragment } from 'react';
 import { jsx } from '@emotion/react';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
 import { useTabPanel } from '../hooks';
 
 // Note this is not being memoized as children is an unstable reference
@@ -19,9 +21,10 @@ var TabPanel = function TabPanel(_ref) {
   var children = _ref.children,
       testId = _ref.testId;
   var tabPanelAttributes = useTabPanel();
-  return jsx("div", _extends({
-    "data-testid": testId
-  }, tabPanelAttributes), children);
+  return jsx(Box, _extends({
+    testId: testId,
+    as: "div"
+  }, tabPanelAttributes), jsx(Fragment, null, children));
 };
 
 export default TabPanel;

package/dist/esm/components/tab.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { useTab } from '../hooks';
 
 /**
@@ -17,7 +18,13 @@ export default function Tab(_ref) {
   var children = _ref.children,
       testId = _ref.testId;
   var tabAttributes = useTab();
-  return jsx("div", _extends({
-    "data-testid": testId
-  }, tabAttributes), children);
+  return jsx(Box, _extends({
+    as: "div",
+    testId: testId
+  }, tabAttributes), jsx(Text, {
+    shouldTruncate: true,
+    UNSAFE_style: {
+      color: 'inherit'
+    }
+  }, children));
 }

package/dist/esm/components/tabs.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toArray from "@babel/runtime/helpers/toArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
@@ -8,17 +7,18 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { Children, useCallback, useMemo, useRef, useState } from 'react';
+import { Children, Fragment, useCallback, useMemo, useRef, useState } from 'react';
 import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-import GlobalTheme from '@atlaskit/theme/components';
+import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { useGlobalTheme } from '@atlaskit/theme/components';
 import { TabListContext, TabPanelContext } from '../internal/context';
 import { getTabsStyles } from '../internal/styles';
 import { onMouseDownBlur } from '../internal/utils';
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.3.1"
+  packageVersion: "13.3.3"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
@@ -40,8 +40,18 @@ var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
     }, tabPanel)
   );
 };
+/**
+ * __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 TabsWithMode = function TabsWithMode(props) {
+
+var Tabs = function Tabs(props) {
   var _props$shouldUnmountT = props.shouldUnmountTabPanelOnChange,
       shouldUnmountTabPanelOnChange = _props$shouldUnmountT === void 0 ? false : _props$shouldUnmountT,
       SelectedType = props.selected,
@@ -50,8 +60,10 @@ var TabsWithMode = function TabsWithMode(props) {
       id = props.id,
       analyticsContext = props.analyticsContext,
       children = props.children,
-      testId = props.testId,
-      mode = props.mode;
+      testId = props.testId;
+
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
 
   var _useState = useState(SelectedType || defaultSelected || 0),
       _useState2 = _slicedToArray(_useState, 2),
@@ -104,9 +116,22 @@ var TabsWithMode = function TabsWithMode(props) {
   var tabsStyles = useMemo(function () {
     return getTabsStyles(mode);
   }, [mode]);
-  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    jsx("div", {
-      "data-testid": testId,
+  return (// Only styles that affect the Tabs container itself have been applied via primitives.
+    // The other styles applied through the CSS prop are there for styling children
+    // through inheritance. This is important for custom cases that use the useTabPanel(),
+    // which applies accessibility atributes that we use as a styling hook.
+    jsx(Box, {
+      as: "div",
+      testId: testId,
+      display: "flex",
+      flexDirection: "column",
+      UNSAFE_style: {
+        maxWidth: '100%',
+        minHeight: '0%',
+        flexBasis: '100%',
+        flexGrow: 1
+      } // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+      ,
       css: tabsStyles
     }, jsx(TabListContext.Provider, {
       value: {
@@ -114,26 +139,8 @@ var TabsWithMode = function TabsWithMode(props) {
         onChange: onChangeAnalytics,
         tabsId: id
       }
-    }, tabList), tabPanelsWithContext)
+    }, tabList), jsx(Fragment, null, 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) {
-    var mode = _ref2.mode;
-    return jsx(TabsWithMode, _extends({}, props, {
-      mode: mode
-    }));
-  });
-};
 export default Tabs;

package/dist/esm/internal/styles.js

@@ -43,12 +43,6 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
 export var getTabsStyles = function getTabsStyles(mode) {
   return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
     css({
-      display: 'flex',
-      maxWidth: '100%',
-      minHeight: '0%',
-      flexBasis: '100%',
-      flexDirection: 'column',
-      flexGrow: 1,
       '& [role="tabpanel"]': getTabPanelStyles(mode),
       // The hidden attribute doesn't work on flex elements
       // Change display to be none
@@ -72,10 +66,6 @@ var tabLineStyles = {
 export var getTabListStyles = function getTabListStyles(mode) {
   return (// eslint-disable-next-line @repo/internal/styles/no-exported-styles
     css({
-      display: 'flex',
-      margin: 0,
-      padding: 0,
-      position: 'relative',
       '& [role="tab"]': getTabStyles(mode),
       fontWeight: 500,
       '&::before': _objectSpread(_objectSpread({}, tabLineStyles), {}, {

package/dist/esm/version.json

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

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

@@ -9,5 +9,5 @@ import { TabListProps } from '../types';
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-export declare const TabList: (props: TabListProps) => jsx.JSX.Element;
+declare const TabList: (props: TabListProps) => jsx.JSX.Element;
 export default TabList;

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

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { TabPanelProps } from '../types';
 /**

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

@@ -9,5 +9,5 @@ import { TabsProps } from '../types';
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-export declare const Tabs: (props: TabsProps) => jsx.JSX.Element;
+declare const Tabs: (props: TabsProps) => jsx.JSX.Element;
 export default Tabs;

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

@@ -9,5 +9,5 @@ import { TabListProps } from '../types';
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-export declare const TabList: (props: TabListProps) => jsx.JSX.Element;
+declare const TabList: (props: TabListProps) => jsx.JSX.Element;
 export default TabList;

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

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { jsx } from '@emotion/react';
 import { TabPanelProps } from '../types';
 /**

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

@@ -9,5 +9,5 @@ import { TabsProps } from '../types';
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-export declare const Tabs: (props: TabsProps) => jsx.JSX.Element;
+declare const Tabs: (props: TabsProps) => jsx.JSX.Element;
 export default Tabs;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "13.3.1",
+  "version": "13.3.3",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,13 +15,15 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -32,6 +34,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/codemod-utils": "^4.1.0",
+    "@atlaskit/ds-explorations": "^0.1.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
@@ -44,10 +47,10 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -67,8 +70,12 @@
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
       "design-system": "v1",
-      "ui-components": "lite-mode",
+      "ui-components": [
+        "primitives",
+        "lite-mode"
+      ],
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "styling": [
         "static",

package/report.api.md

@@ -1,10 +1,11 @@
-## API Report File for "@atlaskit/tabs"
+## API Report File for "@atlaskit/tabs".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
 
-```ts
-/// <reference types="react" />
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
+```ts
+import { jsx } from '@emotion/react';
 import { KeyboardEvent as KeyboardEvent_2 } from 'react';
 import { MouseEvent as MouseEvent_2 } from 'react';
 import { ReactNode } from 'react';
@@ -18,7 +19,16 @@ declare type OnChangeCallback = (
 
 declare type SelectedType = number;
 
-export declare function Tab({ children, testId }: TabProps): JSX.Element;
+/**
+ * __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 declare function Tab({ children, testId }: TabProps): jsx.JSX.Element;
 
 export declare type TabAttributesType = {
   /**
@@ -79,19 +89,36 @@ export declare type TabAttributesType = {
  * 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 */
+  /**
+   * 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 const TabList: (props: TabListProps) => JSX.Element;
+/**
+ * __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.JSX.Element;
 
 export declare type TabListAttributesType = {
   /**
@@ -117,10 +144,19 @@ export declare interface TabListProps {
   children: ReactNode;
 }
 
+/**
+ * __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)
+ */
 export declare const TabPanel: ({
   children,
   testId,
-}: TabPanelProps) => JSX.Element;
+}: TabPanelProps) => jsx.JSX.Element;
 
 export declare type TabPanelAttributesType = {
   /**
@@ -174,7 +210,16 @@ export declare interface TabProps {
   testId?: string;
 }
 
-declare const Tabs: (props: TabsProps) => JSX.Element;
+/**
+ * __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;
 
 export declare interface TabsProps extends WithAnalyticsEventsProps {