@atlaskit/tabs 13.4.3 → 13.4.5

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/tabs
 
+## 13.4.5
+
+### Patch Changes
+
+- [`e7f99a81404`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7f99a81404) - Update to use `xcss` where possible. There should be no difference in behaviour.
+- Updated dependencies
+
+## 13.4.4
+
+### Patch Changes
+
+- [`56b444b56a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56b444b56a8) - Fix a bug where text descenders were cut off at high zoom levels on Windows
+
 ## 13.4.3
 
 ### Patch Changes

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _dsExplorations = require("@atlaskit/ds-explorations");
 var _components = require("@atlaskit/theme/components");
 var _hooks = require("../hooks");
 var _context = require("../internal/context");
@@ -14,6 +13,12 @@ var _styles = require("../internal/styles");
 var _utils = require("../internal/utils");
 /** @jsx jsx */
 
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  padding: "var(--ds-space-0, 0px)",
+  position: 'relative'
+});
+
 /**
  * __TabList__
  *
@@ -23,8 +28,8 @@ var _utils = require("../internal/utils");
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-var TabList = function TabList(props) {
-  var children = props.children;
+var TabList = function TabList(_ref) {
+  var children = _ref.children;
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
     mode = _useGlobalTheme.mode;
   var _useTabList = (0, _hooks.useTabList)(),
@@ -75,10 +80,10 @@ var TabList = function TabList(props) {
   }, [length, selectTabByIndex]);
 
   // Memoized so the function isn't recreated each time
-  var getTabWithContext = (0, _react.useCallback)(function (_ref) {
-    var tab = _ref.tab,
-      isSelected = _ref.isSelected,
-      index = _ref.index;
+  var getTabWithContext = (0, _react.useCallback)(function (_ref2) {
+    var tab = _ref2.tab,
+      isSelected = _ref2.isSelected,
+      index = _ref2.index;
     return (0, _react2.jsx)(_context.TabContext.Provider, {
       value: {
         onClick: function onClick() {
@@ -102,16 +107,12 @@ var TabList = function TabList(props) {
     // 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",
+    (0, _react2.jsx)("div", {
       role: "tablist",
-      display: "flex",
-      position: "relative",
-      padding: "space.0",
       ref: ref
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
-      css: tabListStyles
+      css: [baseStyles, tabListStyles]
     }, childrenArray.map(function (child, index) {
       return getTabWithContext({
         tab: child,

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

@@ -1,14 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _dsExplorations = require("@atlaskit/ds-explorations");
+var _primitives = require("@atlaskit/primitives");
 var _hooks = require("../hooks");
 /** @jsx jsx */
 
@@ -25,11 +23,22 @@ var _hooks = require("../hooks");
 var TabPanel = function TabPanel(_ref) {
   var children = _ref.children,
     testId = _ref.testId;
-  var tabPanelAttributes = (0, _hooks.useTabPanel)();
-  return (0, _react2.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
+  var _useTabPanel = (0, _hooks.useTabPanel)(),
+    role = _useTabPanel.role,
+    id = _useTabPanel.id,
+    hidden = _useTabPanel.hidden,
+    ariaLabelledBy = _useTabPanel['aria-labelledby'],
+    onMouseDown = _useTabPanel.onMouseDown,
+    tabIndex = _useTabPanel.tabIndex;
+  return (0, _react2.jsx)(_primitives.Box, {
     testId: testId,
-    as: "div"
-  }, tabPanelAttributes), (0, _react2.jsx)(_react.Fragment, null, children));
+    role: role,
+    id: id,
+    hidden: hidden,
+    "aria-labelledby": ariaLabelledBy,
+    onMouseDown: onMouseDown,
+    tabIndex: tabIndex
+  }, (0, _react2.jsx)(_react.Fragment, null, children));
 };
 var _default = TabPanel;
 exports.default = _default;

package/dist/cjs/components/tab.js

@@ -1,13 +1,12 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = Tab;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = require("@emotion/react");
 var _dsExplorations = require("@atlaskit/ds-explorations");
+var _primitives = require("@atlaskit/primitives");
 var _hooks = require("../hooks");
 /** @jsx jsx */
 
@@ -23,11 +22,30 @@ var _hooks = require("../hooks");
 function Tab(_ref) {
   var children = _ref.children,
     testId = _ref.testId;
-  var tabAttributes = (0, _hooks.useTab)();
-  return (0, _react.jsx)(_dsExplorations.UNSAFE_Box, (0, _extends2.default)({
-    as: "div",
-    testId: testId
-  }, tabAttributes), (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
+  var _useTab = (0, _hooks.useTab)(),
+    onClick = _useTab.onClick,
+    id = _useTab.id,
+    ariaControls = _useTab['aria-controls'],
+    ariaPosinset = _useTab['aria-posinset'],
+    ariaSelected = _useTab['aria-selected'],
+    ariaSetsize = _useTab['aria-setsize'],
+    onMouseDown = _useTab.onMouseDown,
+    onKeyDown = _useTab.onKeyDown,
+    role = _useTab.role,
+    tabIndex = _useTab.tabIndex;
+  return (0, _react.jsx)(_primitives.Box, {
+    testId: testId,
+    onClick: onClick,
+    id: id,
+    "aria-controls": ariaControls,
+    "aria-posinset": ariaPosinset,
+    "aria-selected": ariaSelected,
+    "aria-setsize": ariaSetsize,
+    onMouseDown: onMouseDown,
+    onKeyDown: onKeyDown,
+    role: role,
+    tabIndex: tabIndex
+  }, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
     shouldTruncate: true,
     UNSAFE_style: {
       color: 'inherit'

package/dist/cjs/components/tabs.js

@@ -11,17 +11,24 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
-var _dsExplorations = require("@atlaskit/ds-explorations");
 var _components = require("@atlaskit/theme/components");
 var _context = require("../internal/context");
 var _styles = require("../internal/styles");
 var _utils = require("../internal/utils");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-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) { (0, _defineProperty2.default)(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 */
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
+var baseStyles = (0, _react2.css)({
+  display: 'flex',
+  maxWidth: '100%',
+  minHeight: '0%',
+  flexBasis: '100%',
+  flexDirection: 'column',
+  flexGrow: 1
+});
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.4.3"
+  packageVersion: "13.4.5"
 };
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
   var tabPanel = _ref.tabPanel,
@@ -118,21 +125,12 @@ var Tabs = function Tabs(props) {
     // 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
-      }
+    // which applies accessibility attributes that we use as a styling hook.
+    (0, _react2.jsx)("div", {
+      "data-testid": testId
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
-      css: tabsStyles
+      css: [baseStyles, tabsStyles]
     }, (0, _react2.jsx)(_context.TabListContext.Provider, {
       value: {
         selected: selected,

package/dist/cjs/internal/styles.js

@@ -8,8 +8,8 @@ exports.getTabsStyles = exports.getTabStyles = exports.getTabListStyles = void 0
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _colors = require("./colors");
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-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) { (0, _defineProperty2.default)(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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var tabLeftRightPadding = "var(--ds-space-100, 8px)";
 var tabTopBottomPadding = "var(--ds-space-050, 4px)";
 // TODO this should probably be `border.width.indicator`
@@ -57,7 +57,7 @@ var getTabsStyles = function getTabsStyles(mode) {
       '& [role="tabpanel"]': getTabPanelStyles(mode),
       // The hidden attribute doesn't work on flex elements
       // Change display to be none
-      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+      // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
       '& > [hidden]': {
         display: 'none'
       }
@@ -112,8 +112,14 @@ var getTabStyles = function getTabStyles(mode) {
     padding: "".concat(tabTopBottomPadding, " ").concat(tabLeftRightPadding),
     position: 'relative',
     whiteSpace: 'nowrap',
-    overflow: 'hidden',
     textOverflow: 'ellipsis',
+    // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+    '@supports not (overflow-x: clip)': {
+      overflow: 'hidden'
+    },
+    '@supports (overflow-x: clip)': {
+      overflowX: 'clip'
+    },
     '&:hover': {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.hoverLabelColor,

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

@@ -1,12 +1,17 @@
 /** @jsx jsx */
 import { Children, createRef, useCallback, useMemo } from 'react';
-import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { css, jsx } from '@emotion/react';
 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 baseStyles = css({
+  display: 'flex',
+  padding: "var(--ds-space-0, 0px)",
+  position: 'relative'
+});
+
 /**
  * __TabList__
  *
@@ -16,10 +21,9 @@ import { onMouseDownBlur } from '../internal/utils';
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-const TabList = props => {
-  const {
-    children
-  } = props;
+const TabList = ({
+  children
+}) => {
   const {
     mode
   } = useGlobalTheme();
@@ -94,16 +98,12 @@ const TabList = props => {
     // 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",
+    jsx("div", {
       role: "tablist",
-      display: "flex",
-      position: "relative",
-      padding: "space.0",
       ref: ref
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
-      css: tabListStyles
+      css: [baseStyles, tabListStyles]
     }, childrenArray.map((child, index) => getTabWithContext({
       tab: child,
       index,

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

@@ -1,8 +1,7 @@
-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 { Box } from '@atlaskit/primitives';
 import { useTabPanel } from '../hooks';
 // Note this is not being memoized as children is an unstable reference
 /**
@@ -18,10 +17,22 @@ const TabPanel = ({
   children,
   testId
 }) => {
-  const tabPanelAttributes = useTabPanel();
-  return jsx(Box, _extends({
+  const {
+    role,
+    id,
+    hidden,
+    'aria-labelledby': ariaLabelledBy,
+    onMouseDown,
+    tabIndex
+  } = useTabPanel();
+  return jsx(Box, {
     testId: testId,
-    as: "div"
-  }, tabPanelAttributes), jsx(Fragment, null, children));
+    role: role,
+    id: id,
+    hidden: hidden,
+    "aria-labelledby": ariaLabelledBy,
+    onMouseDown: onMouseDown,
+    tabIndex: tabIndex
+  }, jsx(Fragment, null, children));
 };
 export default TabPanel;

package/dist/es2019/components/tab.js

@@ -1,7 +1,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 { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import { Box } from '@atlaskit/primitives';
 import { useTab } from '../hooks';
 /**
  * __Tab__
@@ -16,11 +16,31 @@ export default function Tab({
   children,
   testId
 }) {
-  const tabAttributes = useTab();
-  return jsx(Box, _extends({
-    as: "div",
-    testId: testId
-  }, tabAttributes), jsx(Text, {
+  const {
+    onClick,
+    id,
+    'aria-controls': ariaControls,
+    'aria-posinset': ariaPosinset,
+    'aria-selected': ariaSelected,
+    'aria-setsize': ariaSetsize,
+    onMouseDown,
+    onKeyDown,
+    role,
+    tabIndex
+  } = useTab();
+  return jsx(Box, {
+    testId: testId,
+    onClick: onClick,
+    id: id,
+    "aria-controls": ariaControls,
+    "aria-posinset": ariaPosinset,
+    "aria-selected": ariaSelected,
+    "aria-setsize": ariaSetsize,
+    onMouseDown: onMouseDown,
+    onKeyDown: onKeyDown,
+    role: role,
+    tabIndex: tabIndex
+  }, jsx(Text, {
     shouldTruncate: true,
     UNSAFE_style: {
       color: 'inherit'

package/dist/es2019/components/tabs.js

@@ -1,16 +1,23 @@
 /** @jsx jsx */
 import { Children, Fragment, useCallback, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-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 baseStyles = css({
+  display: 'flex',
+  maxWidth: '100%',
+  minHeight: '0%',
+  flexBasis: '100%',
+  flexDirection: 'column',
+  flexGrow: 1
+});
 const analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.4.3"
+  packageVersion: "13.4.5"
 };
 const getTabPanelWithContext = ({
   tabPanel,
@@ -97,21 +104,12 @@ const Tabs = props => {
     // 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
-      }
+    // which applies accessibility attributes that we use as a styling hook.
+    jsx("div", {
+      "data-testid": testId
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
-      css: tabsStyles
+      css: [baseStyles, tabsStyles]
     }, jsx(TabListContext.Provider, {
       value: {
         selected,

package/dist/es2019/internal/styles.js

@@ -43,7 +43,7 @@ css({
   '& [role="tabpanel"]': getTabPanelStyles(mode),
   // The hidden attribute doesn't work on flex elements
   // Change display to be none
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& > [hidden]': {
     display: 'none'
   }
@@ -92,8 +92,14 @@ export const getTabStyles = mode => {
     padding: `${tabTopBottomPadding} ${tabLeftRightPadding}`,
     position: 'relative',
     whiteSpace: 'nowrap',
-    overflow: 'hidden',
     textOverflow: 'ellipsis',
+    // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+    '@supports not (overflow-x: clip)': {
+      overflow: 'hidden'
+    },
+    '@supports (overflow-x: clip)': {
+      overflowX: 'clip'
+    },
     '&:hover': {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.hoverLabelColor,

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

@@ -1,12 +1,17 @@
 /** @jsx jsx */
 import { Children, createRef, useCallback, useMemo } from 'react';
-import { jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
+import { css, jsx } from '@emotion/react';
 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 baseStyles = css({
+  display: 'flex',
+  padding: "var(--ds-space-0, 0px)",
+  position: 'relative'
+});
+
 /**
  * __TabList__
  *
@@ -16,8 +21,8 @@ import { onMouseDownBlur } from '../internal/utils';
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-var TabList = function TabList(props) {
-  var children = props.children;
+var TabList = function TabList(_ref) {
+  var children = _ref.children;
   var _useGlobalTheme = useGlobalTheme(),
     mode = _useGlobalTheme.mode;
   var _useTabList = useTabList(),
@@ -68,10 +73,10 @@ var TabList = function TabList(props) {
   }, [length, selectTabByIndex]);
 
   // Memoized so the function isn't recreated each time
-  var getTabWithContext = useCallback(function (_ref) {
-    var tab = _ref.tab,
-      isSelected = _ref.isSelected,
-      index = _ref.index;
+  var getTabWithContext = useCallback(function (_ref2) {
+    var tab = _ref2.tab,
+      isSelected = _ref2.isSelected,
+      index = _ref2.index;
     return jsx(TabContext.Provider, {
       value: {
         onClick: function onClick() {
@@ -95,16 +100,12 @@ var TabList = function TabList(props) {
     // 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",
+    jsx("div", {
       role: "tablist",
-      display: "flex",
-      position: "relative",
-      padding: "space.0",
       ref: ref
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
-      css: tabListStyles
+      css: [baseStyles, tabListStyles]
     }, childrenArray.map(function (child, index) {
       return getTabWithContext({
         tab: child,

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

@@ -1,8 +1,7 @@
-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 { Box } from '@atlaskit/primitives';
 import { useTabPanel } from '../hooks';
 // Note this is not being memoized as children is an unstable reference
 /**
@@ -17,10 +16,21 @@ import { useTabPanel } from '../hooks';
 var TabPanel = function TabPanel(_ref) {
   var children = _ref.children,
     testId = _ref.testId;
-  var tabPanelAttributes = useTabPanel();
-  return jsx(Box, _extends({
+  var _useTabPanel = useTabPanel(),
+    role = _useTabPanel.role,
+    id = _useTabPanel.id,
+    hidden = _useTabPanel.hidden,
+    ariaLabelledBy = _useTabPanel['aria-labelledby'],
+    onMouseDown = _useTabPanel.onMouseDown,
+    tabIndex = _useTabPanel.tabIndex;
+  return jsx(Box, {
     testId: testId,
-    as: "div"
-  }, tabPanelAttributes), jsx(Fragment, null, children));
+    role: role,
+    id: id,
+    hidden: hidden,
+    "aria-labelledby": ariaLabelledBy,
+    onMouseDown: onMouseDown,
+    tabIndex: tabIndex
+  }, jsx(Fragment, null, children));
 };
 export default TabPanel;

package/dist/esm/components/tab.js

@@ -1,7 +1,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 { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import { Box } from '@atlaskit/primitives';
 import { useTab } from '../hooks';
 /**
  * __Tab__
@@ -15,11 +15,30 @@ import { useTab } from '../hooks';
 export default function Tab(_ref) {
   var children = _ref.children,
     testId = _ref.testId;
-  var tabAttributes = useTab();
-  return jsx(Box, _extends({
-    as: "div",
-    testId: testId
-  }, tabAttributes), jsx(Text, {
+  var _useTab = useTab(),
+    onClick = _useTab.onClick,
+    id = _useTab.id,
+    ariaControls = _useTab['aria-controls'],
+    ariaPosinset = _useTab['aria-posinset'],
+    ariaSelected = _useTab['aria-selected'],
+    ariaSetsize = _useTab['aria-setsize'],
+    onMouseDown = _useTab.onMouseDown,
+    onKeyDown = _useTab.onKeyDown,
+    role = _useTab.role,
+    tabIndex = _useTab.tabIndex;
+  return jsx(Box, {
+    testId: testId,
+    onClick: onClick,
+    id: id,
+    "aria-controls": ariaControls,
+    "aria-posinset": ariaPosinset,
+    "aria-selected": ariaSelected,
+    "aria-setsize": ariaSetsize,
+    onMouseDown: onMouseDown,
+    onKeyDown: onKeyDown,
+    role: role,
+    tabIndex: tabIndex
+  }, jsx(Text, {
     shouldTruncate: true,
     UNSAFE_style: {
       color: 'inherit'

package/dist/esm/components/tabs.js

@@ -1,21 +1,28 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _toArray from "@babel/runtime/helpers/toArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /** @jsx jsx */
 import { Children, Fragment, useCallback, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
-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 baseStyles = css({
+  display: 'flex',
+  maxWidth: '100%',
+  minHeight: '0%',
+  flexBasis: '100%',
+  flexDirection: 'column',
+  flexGrow: 1
+});
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.4.3"
+  packageVersion: "13.4.5"
 };
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
   var tabPanel = _ref.tabPanel,
@@ -112,21 +119,12 @@ var Tabs = function Tabs(props) {
     // 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
-      }
+    // which applies accessibility attributes that we use as a styling hook.
+    jsx("div", {
+      "data-testid": testId
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       ,
-      css: tabsStyles
+      css: [baseStyles, tabsStyles]
     }, jsx(TabListContext.Provider, {
       value: {
         selected: selected,

package/dist/esm/internal/styles.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { css } from '@emotion/react';
 import { getTabColors, getTabLineColor, getTabPanelFocusColor } from './colors';
 var tabLeftRightPadding = "var(--ds-space-100, 8px)";
@@ -50,7 +50,7 @@ export var getTabsStyles = function getTabsStyles(mode) {
       '& [role="tabpanel"]': getTabPanelStyles(mode),
       // The hidden attribute doesn't work on flex elements
       // Change display to be none
-      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+      // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
       '& > [hidden]': {
         display: 'none'
       }
@@ -103,8 +103,14 @@ export var getTabStyles = function getTabStyles(mode) {
     padding: "".concat(tabTopBottomPadding, " ").concat(tabLeftRightPadding),
     position: 'relative',
     whiteSpace: 'nowrap',
-    overflow: 'hidden',
     textOverflow: 'ellipsis',
+    // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
+    '@supports not (overflow-x: clip)': {
+      overflow: 'hidden'
+    },
+    '@supports (overflow-x: clip)': {
+      overflowX: 'clip'
+    },
     '&:hover': {
       // TODO: interaction states will be reviewed in DSP-1438
       color: colors.hoverLabelColor,

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)
  */
-declare const TabList: (props: TabListProps) => jsx.JSX.Element;
+declare const TabList: ({ children }: TabListProps) => jsx.JSX.Element;
 export default TabList;

package/dist/types-ts4.5/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)
  */
-declare const TabList: (props: TabListProps) => jsx.JSX.Element;
+declare const TabList: ({ children }: TabListProps) => jsx.JSX.Element;
 export default TabList;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "13.4.3",
+  "version": "13.4.5",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,8 +34,9 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/codemod-utils": "^4.2.0",
     "@atlaskit/ds-explorations": "^2.2.0",
+    "@atlaskit/primitives": "^1.2.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.18.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -43,13 +44,9 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.8.0",
-    "@atlaskit/docs": "*",
+    "@af/accessibility-testing": "*",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/report.api.md

@@ -57,7 +57,7 @@ export interface TabData {
 }
 
 // @public
-export const TabList: (props: TabListProps) => jsx.JSX.Element;
+export const TabList: ({ children }: TabListProps) => jsx.JSX.Element;
 
 // @public (undocumented)
 export type TabListAttributesType = {

package/tmp/api-report-tmp.d.ts

@@ -43,7 +43,7 @@ export interface TabData {
 }
 
 // @public
-export const TabList: (props: TabListProps) => jsx.JSX.Element;
+export const TabList: ({ children }: TabListProps) => jsx.JSX.Element;
 
 // @public (undocumented)
 export type TabListAttributesType = {

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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