@atlaskit/tabs - npm Package Compare versions

Comparing version 13.3.1 to 13.3.2

CHANGELOG.md

 # @atlaskit/tabs
 
+## 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
@@ -4,0 +10,0 @@

dist/cjs/components/tab-list.js

 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.TabList = void 0;
+exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _react = require("react");
@@ -16,4 +12,6 @@
 
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
+var _dsExplorations = require("@atlaskit/ds-explorations");
 
+var _components = require("@atlaskit/theme/components");
+
 var _hooks = require("../hooks");
@@ -28,6 +26,18 @@
 /** @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)(),
@@ -43,3 +53,3 @@ tabsId = _useTabList.tabsId,
   var length = childrenArray.length;
-  var styles = (0, _react.useMemo)(function () {
+  var tabListStyles = (0, _react.useMemo)(function () {
     return (0, _styles.getTabListStyles)(mode);
@@ -111,7 +121,15 @@ }, [mode]);
   }, [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) {
@@ -126,24 +144,4 @@ return getTabWithContext({
 };
-/**
- * __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;

dist/cjs/components/tab-panel.js

@@ -12,4 +12,8 @@ "use strict";
 
-var _react = require("@emotion/react");
+var _react = require("react");
 
+var _react2 = require("@emotion/react");
+
+var _dsExplorations = require("@atlaskit/ds-explorations");
+
 var _hooks = require("../hooks");
@@ -33,5 +37,6 @@
   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));
 };
@@ -38,0 +43,0 @@

dist/cjs/components/tab.js

@@ -14,2 +14,4 @@ "use strict";
 
+var _dsExplorations = require("@atlaskit/ds-explorations");
+
 var _hooks = require("../hooks");
@@ -32,5 +34,11 @@
   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));
 }

dist/cjs/components/tabs.js

@@ -8,6 +8,4 @@ "use strict";
 });
-exports.default = exports.Tabs = void 0;
+exports.default = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -25,4 +23,6 @@
 
-var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
+var _dsExplorations = require("@atlaskit/ds-explorations");
 
+var _components = require("@atlaskit/theme/components");
+
 var _context = require("../internal/context");
@@ -41,3 +41,3 @@
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.3.1"
+  packageVersion: "13.3.2"
 };
@@ -64,4 +64,14 @@
 };
+/**
+ * __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,
@@ -75,5 +85,7 @@ shouldUnmountTabPanelOnChange = _props$shouldUnmountT === void 0 ? false : _props$shouldUnmountT,
       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),
@@ -132,5 +144,18 @@ _useState2 = (0, _slicedToArray2.default)(_useState, 2),
   }, [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
@@ -143,27 +168,7 @@ }, (0, _react2.jsx)(_context.TabListContext.Provider, {
       }
-    }, 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;

dist/cjs/internal/styles.js

@@ -58,8 +58,2 @@ "use strict";
     (0, _react.css)({
-      display: 'flex',
-      maxWidth: '100%',
-      minHeight: '0%',
-      flexBasis: '100%',
-      flexDirection: 'column',
-      flexGrow: 1,
       '& [role="tabpanel"]': getTabPanelStyles(mode),
@@ -91,6 +85,2 @@ // The hidden attribute doesn't work on flex elements
     (0, _react.css)({
-      display: 'flex',
-      margin: 0,
-      padding: 0,
-      position: 'relative',
       '& [role="tab"]': getTabStyles(mode),
@@ -97,0 +87,0 @@ fontWeight: 500,

dist/cjs/version.json

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

dist/es2019/components/tab-list.js

@@ -1,7 +0,6 @@
-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';
@@ -12,8 +11,19 @@ import { TabContext } from '../internal/context';
 
-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,
@@ -27,3 +37,3 @@ selected,
   const length = childrenArray.length;
-  const styles = useMemo(() => getTabListStyles(mode), [mode]);
+  const tabListStyles = useMemo(() => getTabListStyles(mode), [mode]);
   const selectTabByIndex = useCallback(index => {
@@ -89,7 +99,15 @@ var _ref$current;
   }, 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({
@@ -102,18 +120,3 @@ tab: child,
 };
-/**
- * __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;

dist/es2019/components/tab-panel.js

 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';
@@ -23,7 +25,8 @@
   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;

dist/es2019/components/tab.js

@@ -5,2 +5,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { useTab } from '../hooks';
@@ -22,5 +23,11 @@
   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));
 }

dist/es2019/components/tabs.js

@@ -1,8 +0,7 @@
-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';
@@ -14,3 +13,3 @@ import { getTabsStyles } from '../internal/styles';
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.3.1"
+  packageVersion: "13.3.2"
 };
@@ -35,4 +34,14 @@
 }, 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 {
@@ -46,5 +55,7 @@ shouldUnmountTabPanelOnChange = false,
     children,
-    testId,
+    testId
+  } = props;
+  const {
     mode
-  } = props;
+  } = useGlobalTheme();
   const [selectedState, setSelected] = useState(SelectedType || defaultSelected || 0);
@@ -89,5 +100,18 @@ const selected = SelectedType === undefined ? selectedState : SelectedType;
   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
@@ -100,21 +124,6 @@ }, jsx(TabListContext.Provider, {
       }
-    }, 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;

dist/es2019/internal/styles.js

@@ -38,8 +38,2 @@ import { css } from '@emotion/react';
 css({
-  display: 'flex',
-  maxWidth: '100%',
-  minHeight: '0%',
-  flexBasis: '100%',
-  flexDirection: 'column',
-  flexGrow: 1,
   '& [role="tabpanel"]': getTabPanelStyles(mode),
@@ -65,6 +59,2 @@ // The hidden attribute doesn't work on flex elements
 css({
-  display: 'flex',
-  margin: 0,
-  padding: 0,
-  position: 'relative',
   '& [role="tab"]': getTabStyles(mode),
@@ -71,0 +61,0 @@ fontWeight: 500,

dist/es2019/version.json

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

dist/esm/components/tab-list.js

@@ -1,7 +0,6 @@
-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';
@@ -12,6 +11,17 @@ import { TabContext } from '../internal/context';
 
-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(),
@@ -26,3 +36,3 @@ tabsId = _useTabList.tabsId,
   var length = childrenArray.length;
-  var styles = useMemo(function () {
+  var tabListStyles = useMemo(function () {
     return getTabListStyles(mode);
@@ -94,7 +104,15 @@ }, [mode]);
   }, [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) {
@@ -109,21 +127,3 @@ return getTabWithContext({
 };
-/**
- * __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;

dist/esm/components/tab-panel.js

 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';
@@ -22,7 +24,8 @@
   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;

dist/esm/components/tab.js

@@ -5,2 +5,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
+import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { useTab } from '../hooks';
@@ -21,5 +22,11 @@
   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));
 }

dist/esm/components/tabs.js

@@ -1,2 +0,1 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
@@ -11,6 +10,7 @@ import _toArray from "@babel/runtime/helpers/toArray";
 /** @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';
@@ -22,3 +22,3 @@ import { getTabsStyles } from '../internal/styles';
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.3.1"
+  packageVersion: "13.3.2"
 };
@@ -45,4 +45,14 @@
 };
+/**
+ * __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,
@@ -56,5 +66,7 @@ shouldUnmountTabPanelOnChange = _props$shouldUnmountT === void 0 ? false : _props$shouldUnmountT,
       children = props.children,
-      testId = props.testId,
-      mode = props.mode;
+      testId = props.testId;
 
+  var _useGlobalTheme = useGlobalTheme(),
+      mode = _useGlobalTheme.mode;
+
   var _useState = useState(SelectedType || defaultSelected || 0),
@@ -111,5 +123,18 @@ _useState2 = _slicedToArray(_useState, 2),
   }, [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
@@ -122,24 +147,6 @@ }, jsx(TabListContext.Provider, {
       }
-    }, 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;

dist/esm/internal/styles.js

@@ -46,8 +46,2 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
     css({
-      display: 'flex',
-      maxWidth: '100%',
-      minHeight: '0%',
-      flexBasis: '100%',
-      flexDirection: 'column',
-      flexGrow: 1,
       '& [role="tabpanel"]': getTabPanelStyles(mode),
@@ -76,6 +70,2 @@ // The hidden attribute doesn't work on flex elements
     css({
-      display: 'flex',
-      margin: 0,
-      padding: 0,
-      position: 'relative',
       '& [role="tab"]': getTabStyles(mode),
@@ -82,0 +72,0 @@ fontWeight: 500,

dist/esm/version.json

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

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

@@ -12,3 +12,3 @@ import { jsx } from '@emotion/react';
  */
-export declare const TabList: (props: TabListProps) => jsx.JSX.Element;
+declare const TabList: (props: TabListProps) => jsx.JSX.Element;
 export default TabList;

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

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

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

@@ -12,3 +12,3 @@ import { jsx } from '@emotion/react';
  */
-export declare const Tabs: (props: TabsProps) => jsx.JSX.Element;
+declare const Tabs: (props: TabsProps) => jsx.JSX.Element;
 export default Tabs;

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

@@ -12,3 +12,3 @@ import { jsx } from '@emotion/react';
  */
-export declare const TabList: (props: TabListProps) => jsx.JSX.Element;
+declare const TabList: (props: TabListProps) => jsx.JSX.Element;
 export default TabList;

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

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

dist/types/components/tabs.d.ts

@@ -12,3 +12,3 @@ import { jsx } from '@emotion/react';
  */
-export declare const Tabs: (props: TabsProps) => jsx.JSX.Element;
+declare const Tabs: (props: TabsProps) => jsx.JSX.Element;
 export default Tabs;

package.json

 {
   "name": "@atlaskit/tabs",
-  "version": "13.3.1",
+  "version": "13.3.2",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
@@ -35,2 +35,3 @@ "publishConfig": {
     "@atlaskit/codemod-utils": "^4.1.0",
+    "@atlaskit/ds-explorations": "^0.1.0",
     "@atlaskit/theme": "^12.2.0",
@@ -48,6 +49,6 @@ "@atlaskit/tokens": "^0.10.0",
     "@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": "*",
@@ -72,3 +73,6 @@ "@atlaskit/webdriver-runner": "*",
       "design-system": "v1",
-      "ui-components": "lite-mode",
+      "ui-components": [
+        "primitives",
+        "lite-mode"
+      ],
       "analytics": "analytics-next",
@@ -75,0 +79,0 @@ "theming": "tokens",

report.api.md

@@ -1,8 +0,9 @@
-## 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/).
 
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
 ```ts
-/// <reference types="react" />
-
+import { jsx } from '@emotion/react';
 import { KeyboardEvent as KeyboardEvent_2 } from 'react';
@@ -21,3 +22,12 @@ import { MouseEvent as MouseEvent_2 } from 'react';
 
-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;
 
@@ -83,15 +93,32 @@ export declare type TabAttributesType = {
 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;
 
@@ -122,6 +149,15 @@ export declare type TabListAttributesType = {
 
+/**
+ * __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;
 
@@ -180,3 +216,12 @@ export declare type TabPanelAttributesType = {
 
-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;
@@ -183,0 +228,0 @@

No alert changes

Improved metrics

Total package byte prevSize

228702

increased by1.66%

Lines of code

4765

increased by0.53%

Worsened metrics

Dependency count

8

increased by14.29%

Dependency changes

• + Added@atlaskit/ds-explorations@^0.1.0

• + Added@atlaskit/ds-explorations@0.1.5(transitive)

• + Addedtiny-invariant@1.3.3(transitive)