@atlaskit/tabs 13.2.13 → 13.3.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/tabs
 
+## 13.3.0
+
+### Minor Changes
+
+- [`7ec1c1a023f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7ec1c1a023f) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.2.13
 
 ### Patch Changes

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

@@ -11,7 +11,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
 
@@ -87,7 +87,7 @@ var TabListWithMode = function TabListWithMode(props) {
     var tab = _ref.tab,
         isSelected = _ref.isSelected,
         index = _ref.index;
-    return (0, _core.jsx)(_context.TabContext.Provider, {
+    return (0, _react2.jsx)(_context.TabContext.Provider, {
       value: {
         onClick: function onClick() {
           return onChange(index);
@@ -106,7 +106,7 @@ var TabListWithMode = function TabListWithMode(props) {
     }, tab);
   }, [length, onKeyDown, onChange, tabsId]);
   return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _core.jsx)("div", {
+    (0, _react2.jsx)("div", {
       role: "tablist",
       css: styles,
       ref: ref
@@ -131,9 +131,9 @@ var TabListWithMode = function TabListWithMode(props) {
 
 
 var TabList = function TabList(props) {
-  return (0, _core.jsx)(_components.default.Consumer, null, function (_ref2) {
+  return (0, _react2.jsx)(_components.default.Consumer, null, function (_ref2) {
     var mode = _ref2.mode;
-    return (0, _core.jsx)(TabListWithMode, (0, _extends2.default)({}, props, {
+    return (0, _react2.jsx)(TabListWithMode, (0, _extends2.default)({}, props, {
       mode: mode
     }));
   });

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

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _hooks = require("../hooks");
 
@@ -29,7 +29,7 @@ var TabPanel = function TabPanel(_ref) {
   var children = _ref.children,
       testId = _ref.testId;
   var tabPanelAttributes = (0, _hooks.useTabPanel)();
-  return (0, _core.jsx)("div", (0, _extends2.default)({
+  return (0, _react.jsx)("div", (0, _extends2.default)({
     "data-testid": testId
   }, tabPanelAttributes), children);
 };

package/dist/cjs/components/tab.js

@@ -9,7 +9,7 @@ exports.default = Tab;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _hooks = require("../hooks");
 
@@ -28,7 +28,7 @@ function Tab(_ref) {
   var children = _ref.children,
       testId = _ref.testId;
   var tabAttributes = (0, _hooks.useTab)();
-  return (0, _core.jsx)("div", (0, _extends2.default)({
+  return (0, _react.jsx)("div", (0, _extends2.default)({
     "data-testid": testId
   }, tabAttributes), children);
 }

package/dist/cjs/components/tabs.js

@@ -17,7 +17,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 
@@ -36,7 +36,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.2.13"
+  packageVersion: "13.3.0"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
@@ -45,7 +45,7 @@ var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
       isSelected = _ref.isSelected,
       tabsId = _ref.tabsId;
   return (// Ensure tabPanel exists in case it has been removed
-    tabPanel && (0, _core.jsx)(_context.TabPanelContext.Provider, {
+    tabPanel && (0, _react2.jsx)(_context.TabPanelContext.Provider, {
       value: {
         role: 'tabpanel',
         id: "".concat(tabsId, "-").concat(index, "-tab"),
@@ -125,10 +125,10 @@ var TabsWithMode = function TabsWithMode(props) {
     return (0, _styles.getTabsStyles)(mode);
   }, [mode]);
   return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _core.jsx)("div", {
+    (0, _react2.jsx)("div", {
       "data-testid": testId,
       css: tabsStyles
-    }, (0, _core.jsx)(_context.TabListContext.Provider, {
+    }, (0, _react2.jsx)(_context.TabListContext.Provider, {
       value: {
         selected: selected,
         onChange: onChangeAnalytics,
@@ -149,9 +149,9 @@ var TabsWithMode = function TabsWithMode(props) {
 
 
 var Tabs = function Tabs(props) {
-  return (0, _core.jsx)(_components.default.Consumer, null, function (_ref2) {
+  return (0, _react2.jsx)(_components.default.Consumer, null, function (_ref2) {
     var mode = _ref2.mode;
-    return (0, _core.jsx)(TabsWithMode, (0, _extends2.default)({}, props, {
+    return (0, _react2.jsx)(TabsWithMode, (0, _extends2.default)({}, props, {
       mode: mode
     }));
   });

package/dist/cjs/internal/styles.js

@@ -9,6 +9,8 @@ exports.getTabsStyles = exports.getTabStyles = exports.getTabListStyles = void 0
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _react = require("@emotion/react");
+
 var _constants = require("@atlaskit/theme/constants");
 
 var _colors = require("./colors");
@@ -51,22 +53,23 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
 };
 
 var getTabsStyles = function getTabsStyles(mode) {
-  return {
-    display: 'flex',
-    flexBasis: '100%',
-    flexDirection: 'column',
-    flexGrow: 1,
-    maxWidth: '100%',
-    minHeight: '0%'
-    /* Same Firefox bug as above */
-    ,
-    '& [role="tabpanel"]': getTabPanelStyles(mode),
-    // The hidden attribute doesn't work on flex elements
-    // Change display to be none
-    '& > [hidden]': {
-      display: 'none'
-    }
-  };
+  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
+      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+      '& > [hidden]': {
+        display: 'none'
+      }
+    })
+  );
 };
 
 exports.getTabsStyles = getTabsStyles;
@@ -82,19 +85,21 @@ var tabLineStyles = {
 };
 
 var getTabListStyles = function getTabListStyles(mode) {
-  return {
-    position: 'relative',
-    display: 'flex',
-    fontWeight: 500,
-    padding: 0,
-    margin: 0,
-    '&::before': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
-      // This line is not a border so the selected line is visible in high contrast mode
-      backgroundColor: (0, _colors.getTabLineColor)(mode).lineColor,
-      height: underlineHeight
-    }),
-    '& [role="tab"]': getTabStyles(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), {}, {
+        height: underlineHeight,
+        // This line is not a border so the selected line is visible in high contrast mode
+        backgroundColor: (0, _colors.getTabLineColor)(mode).lineColor
+      })
+    })
+  );
 };
 
 exports.getTabListStyles = getTabListStyles;

package/dist/cjs/version.json

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

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { Children, createRef, useCallback, useMemo } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import GlobalTheme from '@atlaskit/theme/components';
 import { useTabList } from '../hooks';
 import { TabContext } from '../internal/context';

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useTabPanel } from '../hooks';
 
 // Note this is not being memoized as children is an unstable reference

package/dist/es2019/components/tab.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useTab } from '../hooks';
 
 /**

package/dist/es2019/components/tabs.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { Children, useCallback, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import GlobalTheme from '@atlaskit/theme/components';
 import { TabListContext, TabPanelContext } from '../internal/context';
@@ -11,7 +11,7 @@ import { onMouseDownBlur } from '../internal/utils';
 const analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.2.13"
+  packageVersion: "13.3.0"
 };
 
 const getTabPanelWithContext = ({

package/dist/es2019/internal/styles.js

@@ -1,3 +1,4 @@
+import { css } from '@emotion/react';
 import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { getTabColors, getTabLineColor, getTabPanelFocusColor } from './colors';
 const borderRadius = getBorderRadius();
@@ -32,18 +33,18 @@ const getTabPanelStyles = mode => ({
   ...highContrastFocusRing
 });
 
-export const getTabsStyles = 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,
-  maxWidth: '100%',
-  minHeight: '0%'
-  /* Same Firefox bug as above */
-  ,
   '& [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
   '& > [hidden]': {
     display: 'none'
   }
@@ -58,18 +59,19 @@ const tabLineStyles = {
   left: tabLeftRightPadding,
   right: tabLeftRightPadding
 };
-export const getTabListStyles = mode => ({
-  position: 'relative',
+export const getTabListStyles = mode => // eslint-disable-next-line @repo/internal/styles/no-exported-styles
+css({
   display: 'flex',
-  fontWeight: 500,
-  padding: 0,
   margin: 0,
+  padding: 0,
+  position: 'relative',
+  '& [role="tab"]': getTabStyles(mode),
+  fontWeight: 500,
   '&::before': { ...tabLineStyles,
+    height: underlineHeight,
     // This line is not a border so the selected line is visible in high contrast mode
-    backgroundColor: getTabLineColor(mode).lineColor,
-    height: underlineHeight
-  },
-  '& [role="tab"]': getTabStyles(mode)
+    backgroundColor: getTabLineColor(mode).lineColor
+  }
 });
 export const getTabStyles = mode => {
   const colors = getTabColors(mode);

package/dist/es2019/version.json

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

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

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { Children, createRef, useCallback, useMemo } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import GlobalTheme from '@atlaskit/theme/components';
 import { useTabList } from '../hooks';
 import { TabContext } from '../internal/context';

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useTabPanel } from '../hooks';
 
 // Note this is not being memoized as children is an unstable reference

package/dist/esm/components/tab.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { useTab } from '../hooks';
 
 /**

package/dist/esm/components/tabs.js

@@ -9,7 +9,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { Children, useCallback, useMemo, useRef, useState } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import GlobalTheme from '@atlaskit/theme/components';
 import { TabListContext, TabPanelContext } from '../internal/context';
@@ -18,7 +18,7 @@ import { onMouseDownBlur } from '../internal/utils';
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.2.13"
+  packageVersion: "13.3.0"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {

package/dist/esm/internal/styles.js

@@ -4,6 +4,7 @@ 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; }
 
+import { css } from '@emotion/react';
 import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
 import { getTabColors, getTabLineColor, getTabPanelFocusColor } from './colors';
 var borderRadius = getBorderRadius();
@@ -40,22 +41,23 @@ var getTabPanelStyles = function getTabPanelStyles(mode) {
 };
 
 export var getTabsStyles = function getTabsStyles(mode) {
-  return {
-    display: 'flex',
-    flexBasis: '100%',
-    flexDirection: 'column',
-    flexGrow: 1,
-    maxWidth: '100%',
-    minHeight: '0%'
-    /* Same Firefox bug as above */
-    ,
-    '& [role="tabpanel"]': getTabPanelStyles(mode),
-    // The hidden attribute doesn't work on flex elements
-    // Change display to be none
-    '& > [hidden]': {
-      display: 'none'
-    }
-  };
+  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
+      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+      '& > [hidden]': {
+        display: 'none'
+      }
+    })
+  );
 };
 var tabLineStyles = {
   content: '""',
@@ -68,19 +70,21 @@ var tabLineStyles = {
   right: tabLeftRightPadding
 };
 export var getTabListStyles = function getTabListStyles(mode) {
-  return {
-    position: 'relative',
-    display: 'flex',
-    fontWeight: 500,
-    padding: 0,
-    margin: 0,
-    '&::before': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
-      // This line is not a border so the selected line is visible in high contrast mode
-      backgroundColor: getTabLineColor(mode).lineColor,
-      height: underlineHeight
-    }),
-    '& [role="tab"]': getTabStyles(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), {}, {
+        height: underlineHeight,
+        // This line is not a border so the selected line is visible in high contrast mode
+        backgroundColor: getTabLineColor(mode).lineColor
+      })
+    })
+  );
 };
 export var getTabStyles = function getTabStyles(mode) {
   var colors = getTabColors(mode);

package/dist/esm/version.json

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

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { TabListProps } from '../types';
 /**
  * __TabList__
@@ -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.Element;
+export declare const TabList: (props: TabListProps) => jsx.JSX.Element;
 export default TabList;

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

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { TabPanelProps } from '../types';
 /**
  * __TabPanel__
@@ -9,5 +10,5 @@ import { TabPanelProps } from '../types';
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-declare const TabPanel: ({ children, testId }: TabPanelProps) => JSX.Element;
+declare const TabPanel: ({ children, testId }: TabPanelProps) => jsx.JSX.Element;
 export default TabPanel;

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

@@ -1,4 +1,5 @@
-/// <reference types="react" />
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
 import { TabProps } from '../types';
 /**
  * __Tab__
@@ -9,4 +10,4 @@ import { TabProps } from '../types';
  * - [Code](https://atlassian.design/components/tabs/code)
  * - [Usage](https://atlassian.design/components/tabs/usage)
  */
-export default function Tab({ children, testId }: TabProps): JSX.Element;
+export default function Tab({ children, testId }: TabProps): jsx.JSX.Element;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { jsx } from '@emotion/react';
 import { TabsProps } from '../types';
 /**
  * __Tabs__
@@ -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.Element;
+export declare const Tabs: (props: TabsProps) => jsx.JSX.Element;
 export default Tabs;

package/dist/types/internal/styles.d.ts

@@ -1,5 +1,5 @@
-import { CSSObject } from '@emotion/core';
+import { CSSObject, SerializedStyles } from '@emotion/react';
 import { ThemeModes } from '@atlaskit/theme/types';
-export declare const getTabsStyles: (mode: ThemeModes) => CSSObject;
-export declare const getTabListStyles: (mode: ThemeModes) => CSSObject;
+export declare const getTabsStyles: (mode: ThemeModes) => SerializedStyles;
+export declare const getTabListStyles: (mode: ThemeModes) => SerializedStyles;
 export declare const getTabStyles: (mode: ThemeModes) => CSSObject;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "13.2.13",
+  "version": "13.3.0",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,10 +25,10 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
     "@atlaskit/codemod-utils": "^4.1.0",
-    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -37,7 +37,7 @@
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.0",
-    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/section-message": "^6.2.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/tooltip": "^17.5.0",