@atlaskit/tabs 13.3.0 → 13.3.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+### Patch Changes
+
+- [`8cc2f888c83`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2f888c83) - Upgrade Typescript from `4.3.5` to `4.5.5`
+
 ## 13.3.0
 
 ### Minor 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.0"
+  packageVersion: "13.3.2"
 };
 
 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.0",
+	"version": "13.3.2",
 	"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.0"
+  packageVersion: "13.3.2"
 };
 
 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.0",
+	"version": "13.3.2",
 	"sideEffects": false
 }