@atlaskit/tabs 13.1.4 → 13.2.3

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/tabs
 
+## 13.2.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 13.2.0
+
+### Minor Changes
+
+- [`cc54bf994d6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cc54bf994d6) - Instrumented Tabs with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- [`af4bca32ad4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/af4bca32ad4) - Internal changes to supress eslint rules.
+- Updated dependencies
+
 ## 13.1.4
 
 ### Patch Changes

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

@@ -105,17 +105,19 @@ var TabListWithMode = function TabListWithMode(props) {
       key: index
     }, tab);
   }, [length, onKeyDown, onChange, tabsId]);
-  return (0, _core.jsx)("div", {
-    role: "tablist",
-    css: styles,
-    ref: ref
-  }, childrenArray.map(function (child, index) {
-    return getTabWithContext({
-      tab: child,
-      index: index,
-      isSelected: index === selected
-    });
-  }));
+  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    (0, _core.jsx)("div", {
+      role: "tablist",
+      css: styles,
+      ref: ref
+    }, childrenArray.map(function (child, index) {
+      return getTabWithContext({
+        tab: child,
+        index: index,
+        isSelected: index === selected
+      });
+    }))
+  );
 };
 
 var TabList = function TabList(props) {

package/dist/cjs/components/tabs.js

@@ -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.1.4"
+  packageVersion: "13.2.3"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
@@ -124,16 +124,18 @@ var TabsWithMode = function TabsWithMode(props) {
   var tabsStyles = (0, _react.useMemo)(function () {
     return (0, _styles.getTabsStyles)(mode);
   }, [mode]);
-  return (0, _core.jsx)("div", {
-    "data-testid": testId,
-    css: tabsStyles
-  }, (0, _core.jsx)(_context.TabListContext.Provider, {
-    value: {
-      selected: selected,
-      onChange: onChangeAnalytics,
-      tabsId: id
-    }
-  }, tabList), tabPanelsWithContext);
+  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    (0, _core.jsx)("div", {
+      "data-testid": testId,
+      css: tabsStyles
+    }, (0, _core.jsx)(_context.TabListContext.Provider, {
+      value: {
+        selected: selected,
+        onChange: onChangeAnalytics,
+        tabsId: id
+      }
+    }, tabList), tabPanelsWithContext)
+  );
 };
 
 var Tabs = function Tabs(props) {

package/dist/cjs/internal/colors.js

@@ -7,20 +7,22 @@ exports.getTabPanelFocusColor = exports.getTabLineColor = exports.getTabColors =
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _tokens = require("@atlaskit/tokens");
+
 var tabColorMap = {
   light: {
-    labelColor: _colors.N500,
-    activeLabelColor: _colors.B500,
-    hoverLabelColor: _colors.B400,
-    selectedColor: _colors.B400,
-    focusColor: _colors.B100
+    labelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.N500),
+    activeLabelColor: (0, _tokens.token)('color.text.highEmphasis', _colors.B500),
+    hoverLabelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.B400),
+    selectedColor: (0, _tokens.token)('color.text.selected', _colors.B400),
+    focusBorderColor: (0, _tokens.token)('color.border.focus', _colors.B100)
   },
   dark: {
-    labelColor: _colors.DN400,
-    activeLabelColor: _colors.B200,
-    hoverLabelColor: _colors.B75,
-    selectedColor: _colors.B75,
-    focusColor: _colors.B75
+    labelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.DN400),
+    activeLabelColor: (0, _tokens.token)('color.text.highEmphasis', _colors.B200),
+    hoverLabelColor: (0, _tokens.token)('color.text.mediumEmphasis', _colors.B75),
+    selectedColor: (0, _tokens.token)('color.text.selected', _colors.B75),
+    focusBorderColor: (0, _tokens.token)('color.border.focus', _colors.B75)
   }
 };
 
@@ -31,12 +33,16 @@ var getTabColors = function getTabColors(mode) {
 exports.getTabColors = getTabColors;
 var tabLineColorMap = {
   light: {
-    lineColor: _colors.N30,
-    selectedColor: _colors.B400
+    lineColor: (0, _tokens.token)('color.border.neutral', _colors.N30),
+    hoveredColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
+    activeColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
+    selectedColor: (0, _tokens.token)('color.text.selected', _colors.B400)
   },
   dark: {
-    lineColor: _colors.DN0,
-    selectedColor: _colors.B75
+    lineColor: (0, _tokens.token)('color.border.neutral', _colors.DN0),
+    hoveredColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
+    activeColor: (0, _tokens.token)('color.border.neutral', 'transparent'),
+    selectedColor: (0, _tokens.token)('color.text.selected', _colors.B75)
   }
 };
 
@@ -46,8 +52,8 @@ var getTabLineColor = function getTabLineColor(mode) {
 
 exports.getTabLineColor = getTabLineColor;
 var tabPanelFocusColorMap = {
-  light: _colors.B100,
-  dark: _colors.B75
+  light: (0, _tokens.token)('color.border.focus', _colors.B100),
+  dark: (0, _tokens.token)('color.border.focus', _colors.B75)
 };
 
 var getTabPanelFocusColor = function getTabPanelFocusColor(mode) {

package/dist/cjs/internal/styles.js

@@ -112,13 +112,23 @@ var getTabStyles = function getTabStyles(mode) {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     '&:hover': {
-      color: colors.hoverLabelColor
+      // TODO: interaction states will be reviewed in DSP-1438
+      color: colors.hoverLabelColor,
+      '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
+        borderBottom: "".concat(underlineHeight, " solid ").concat((0, _colors.getTabLineColor)(mode).hoveredColor),
+        height: 0
+      })
     },
-    '&:active, &:active::before': {
-      color: colors.activeLabelColor
+    '&:active': {
+      // TODO: interaction states will be reviewed in DSP-1438
+      color: colors.activeLabelColor,
+      '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
+        borderBottom: "".concat(underlineHeight, " solid ").concat((0, _colors.getTabLineColor)(mode).activeColor),
+        height: 0
+      })
     },
     '&:focus': {
-      boxShadow: "0 0 0 2px ".concat(colors.focusColor, " inset"),
+      boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
       borderRadius: borderRadius,
       outline: 'none',
       // Hide TabLine on focus

package/dist/cjs/version.json

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

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

@@ -84,15 +84,17 @@ const TabListWithMode = props => {
     },
     key: index
   }, tab), [length, onKeyDown, onChange, tabsId]);
-  return jsx("div", {
-    role: "tablist",
-    css: styles,
-    ref: ref
-  }, childrenArray.map((child, index) => getTabWithContext({
-    tab: child,
-    index,
-    isSelected: index === selected
-  })));
+  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    jsx("div", {
+      role: "tablist",
+      css: styles,
+      ref: ref
+    }, childrenArray.map((child, index) => getTabWithContext({
+      tab: child,
+      index,
+      isSelected: index === selected
+    })))
+  );
 };
 
 export const TabList = props => jsx(GlobalTheme.Consumer, null, ({

package/dist/es2019/components/tabs.js

@@ -11,7 +11,7 @@ import { onMouseDownBlur } from '../internal/utils';
 const analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.1.4"
+  packageVersion: "13.2.3"
 };
 
 const getTabPanelWithContext = ({
@@ -83,16 +83,18 @@ const TabsWithMode = props => {
     tabsId: id
   }));
   const tabsStyles = useMemo(() => getTabsStyles(mode), [mode]);
-  return jsx("div", {
-    "data-testid": testId,
-    css: tabsStyles
-  }, jsx(TabListContext.Provider, {
-    value: {
-      selected,
-      onChange: onChangeAnalytics,
-      tabsId: id
-    }
-  }, tabList), tabPanelsWithContext);
+  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    jsx("div", {
+      "data-testid": testId,
+      css: tabsStyles
+    }, jsx(TabListContext.Provider, {
+      value: {
+        selected,
+        onChange: onChangeAnalytics,
+        tabsId: id
+      }
+    }, tabList), tabPanelsWithContext)
+  );
 };
 
 export const Tabs = props => jsx(GlobalTheme.Consumer, null, ({

package/dist/es2019/internal/colors.js

@@ -1,18 +1,19 @@
 import { B100, B200, B400, B500, B75, DN0, DN400, N30, N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 const tabColorMap = {
   light: {
-    labelColor: N500,
-    activeLabelColor: B500,
-    hoverLabelColor: B400,
-    selectedColor: B400,
-    focusColor: B100
+    labelColor: token('color.text.mediumEmphasis', N500),
+    activeLabelColor: token('color.text.highEmphasis', B500),
+    hoverLabelColor: token('color.text.mediumEmphasis', B400),
+    selectedColor: token('color.text.selected', B400),
+    focusBorderColor: token('color.border.focus', B100)
   },
   dark: {
-    labelColor: DN400,
-    activeLabelColor: B200,
-    hoverLabelColor: B75,
-    selectedColor: B75,
-    focusColor: B75
+    labelColor: token('color.text.mediumEmphasis', DN400),
+    activeLabelColor: token('color.text.highEmphasis', B200),
+    hoverLabelColor: token('color.text.mediumEmphasis', B75),
+    selectedColor: token('color.text.selected', B75),
+    focusBorderColor: token('color.border.focus', B75)
   }
 };
 export const getTabColors = mode => {
@@ -20,17 +21,21 @@ export const getTabColors = mode => {
 };
 const tabLineColorMap = {
   light: {
-    lineColor: N30,
-    selectedColor: B400
+    lineColor: token('color.border.neutral', N30),
+    hoveredColor: token('color.border.neutral', 'transparent'),
+    activeColor: token('color.border.neutral', 'transparent'),
+    selectedColor: token('color.text.selected', B400)
   },
   dark: {
-    lineColor: DN0,
-    selectedColor: B75
+    lineColor: token('color.border.neutral', DN0),
+    hoveredColor: token('color.border.neutral', 'transparent'),
+    activeColor: token('color.border.neutral', 'transparent'),
+    selectedColor: token('color.text.selected', B75)
   }
 };
 export const getTabLineColor = mode => tabLineColorMap[mode];
 const tabPanelFocusColorMap = {
-  light: B100,
-  dark: B75
+  light: token('color.border.focus', B100),
+  dark: token('color.border.focus', B75)
 };
 export const getTabPanelFocusColor = mode => tabPanelFocusColorMap[mode];

package/dist/es2019/internal/styles.js

@@ -84,13 +84,23 @@ export const getTabStyles = mode => {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     '&:hover': {
-      color: colors.hoverLabelColor
+      // TODO: interaction states will be reviewed in DSP-1438
+      color: colors.hoverLabelColor,
+      '&::after': { ...tabLineStyles,
+        borderBottom: `${underlineHeight} solid ${getTabLineColor(mode).hoveredColor}`,
+        height: 0
+      }
     },
-    '&:active, &:active::before': {
-      color: colors.activeLabelColor
+    '&:active': {
+      // TODO: interaction states will be reviewed in DSP-1438
+      color: colors.activeLabelColor,
+      '&::after': { ...tabLineStyles,
+        borderBottom: `${underlineHeight} solid ${getTabLineColor(mode).activeColor}`,
+        height: 0
+      }
     },
     '&:focus': {
-      boxShadow: `0 0 0 2px ${colors.focusColor} inset`,
+      boxShadow: `0 0 0 2px ${colors.focusBorderColor} inset`,
       borderRadius: borderRadius,
       outline: 'none',
       // Hide TabLine on focus

package/dist/es2019/version.json

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

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

@@ -89,17 +89,19 @@ var TabListWithMode = function TabListWithMode(props) {
       key: index
     }, tab);
   }, [length, onKeyDown, onChange, tabsId]);
-  return jsx("div", {
-    role: "tablist",
-    css: styles,
-    ref: ref
-  }, childrenArray.map(function (child, index) {
-    return getTabWithContext({
-      tab: child,
-      index: index,
-      isSelected: index === selected
-    });
-  }));
+  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    jsx("div", {
+      role: "tablist",
+      css: styles,
+      ref: ref
+    }, childrenArray.map(function (child, index) {
+      return getTabWithContext({
+        tab: child,
+        index: index,
+        isSelected: index === selected
+      });
+    }))
+  );
 };
 
 export var TabList = function TabList(props) {

package/dist/esm/components/tabs.js

@@ -18,7 +18,7 @@ import { onMouseDownBlur } from '../internal/utils';
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.1.4"
+  packageVersion: "13.2.3"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {
@@ -104,16 +104,18 @@ var TabsWithMode = function TabsWithMode(props) {
   var tabsStyles = useMemo(function () {
     return getTabsStyles(mode);
   }, [mode]);
-  return jsx("div", {
-    "data-testid": testId,
-    css: tabsStyles
-  }, jsx(TabListContext.Provider, {
-    value: {
-      selected: selected,
-      onChange: onChangeAnalytics,
-      tabsId: id
-    }
-  }, tabList), tabPanelsWithContext);
+  return (// eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
+    jsx("div", {
+      "data-testid": testId,
+      css: tabsStyles
+    }, jsx(TabListContext.Provider, {
+      value: {
+        selected: selected,
+        onChange: onChangeAnalytics,
+        tabsId: id
+      }
+    }, tabList), tabPanelsWithContext)
+  );
 };
 
 export var Tabs = function Tabs(props) {

package/dist/esm/internal/colors.js

@@ -1,18 +1,19 @@
 import { B100, B200, B400, B500, B75, DN0, DN400, N30, N500 } from '@atlaskit/theme/colors';
+import { token } from '@atlaskit/tokens';
 var tabColorMap = {
   light: {
-    labelColor: N500,
-    activeLabelColor: B500,
-    hoverLabelColor: B400,
-    selectedColor: B400,
-    focusColor: B100
+    labelColor: token('color.text.mediumEmphasis', N500),
+    activeLabelColor: token('color.text.highEmphasis', B500),
+    hoverLabelColor: token('color.text.mediumEmphasis', B400),
+    selectedColor: token('color.text.selected', B400),
+    focusBorderColor: token('color.border.focus', B100)
   },
   dark: {
-    labelColor: DN400,
-    activeLabelColor: B200,
-    hoverLabelColor: B75,
-    selectedColor: B75,
-    focusColor: B75
+    labelColor: token('color.text.mediumEmphasis', DN400),
+    activeLabelColor: token('color.text.highEmphasis', B200),
+    hoverLabelColor: token('color.text.mediumEmphasis', B75),
+    selectedColor: token('color.text.selected', B75),
+    focusBorderColor: token('color.border.focus', B75)
   }
 };
 export var getTabColors = function getTabColors(mode) {
@@ -20,20 +21,24 @@ export var getTabColors = function getTabColors(mode) {
 };
 var tabLineColorMap = {
   light: {
-    lineColor: N30,
-    selectedColor: B400
+    lineColor: token('color.border.neutral', N30),
+    hoveredColor: token('color.border.neutral', 'transparent'),
+    activeColor: token('color.border.neutral', 'transparent'),
+    selectedColor: token('color.text.selected', B400)
   },
   dark: {
-    lineColor: DN0,
-    selectedColor: B75
+    lineColor: token('color.border.neutral', DN0),
+    hoveredColor: token('color.border.neutral', 'transparent'),
+    activeColor: token('color.border.neutral', 'transparent'),
+    selectedColor: token('color.text.selected', B75)
   }
 };
 export var getTabLineColor = function getTabLineColor(mode) {
   return tabLineColorMap[mode];
 };
 var tabPanelFocusColorMap = {
-  light: B100,
-  dark: B75
+  light: token('color.border.focus', B100),
+  dark: token('color.border.focus', B75)
 };
 export var getTabPanelFocusColor = function getTabPanelFocusColor(mode) {
   return tabPanelFocusColorMap[mode];

package/dist/esm/internal/styles.js

@@ -95,13 +95,23 @@ export var getTabStyles = function getTabStyles(mode) {
     overflow: 'hidden',
     textOverflow: 'ellipsis',
     '&:hover': {
-      color: colors.hoverLabelColor
+      // TODO: interaction states will be reviewed in DSP-1438
+      color: colors.hoverLabelColor,
+      '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
+        borderBottom: "".concat(underlineHeight, " solid ").concat(getTabLineColor(mode).hoveredColor),
+        height: 0
+      })
     },
-    '&:active, &:active::before': {
-      color: colors.activeLabelColor
+    '&:active': {
+      // TODO: interaction states will be reviewed in DSP-1438
+      color: colors.activeLabelColor,
+      '&::after': _objectSpread(_objectSpread({}, tabLineStyles), {}, {
+        borderBottom: "".concat(underlineHeight, " solid ").concat(getTabLineColor(mode).activeColor),
+        height: 0
+      })
     },
     '&:focus': {
-      boxShadow: "0 0 0 2px ".concat(colors.focusColor, " inset"),
+      boxShadow: "0 0 0 2px ".concat(colors.focusBorderColor, " inset"),
       borderRadius: borderRadius,
       outline: 'none',
       // Hide TabLine on focus

package/dist/esm/version.json

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

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

@@ -4,11 +4,13 @@ export declare type TabColors = {
     activeLabelColor: string;
     hoverLabelColor: string;
     selectedColor: string;
-    focusColor: string;
+    focusBorderColor: string;
 };
 export declare const getTabColors: (mode: ThemeModes) => TabColors;
 export declare type TabLineColors = {
     lineColor: string;
+    hoveredColor: string;
+    activeColor: string;
     selectedColor: string;
 };
 export declare const getTabLineColor: (mode: ThemeModes) => TabLineColors;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "13.1.4",
+  "version": "13.2.3",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,8 +24,9 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/codemod-utils": "^3.2.0",
-    "@atlaskit/theme": "^11.4.0",
+    "@atlaskit/codemod-utils": "^3.4.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.3.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -34,11 +35,12 @@
   },
   "devDependencies": {
     "@atlaskit/build-utils": "*",
-    "@atlaskit/button": "^16.0.0",
+    "@atlaskit/button": "^16.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/spinner": "^15.0.0",
+    "@atlaskit/section-message": "^6.1.0",
+    "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^17.3.0",
+    "@atlaskit/tooltip": "^17.5.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -56,18 +58,11 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
-      "ui-components": [
-        "lite-mode"
-      ],
-      "analytics": [
-        "analytics-next"
-      ],
-      "theming": [
-        "new-theming-api"
-      ],
-      "deprecation": [
-        "no-deprecated-imports"
-      ]
+      "ui-components": "lite-mode",
+      "analytics": "analytics-next",
+      "theming": "tokens",
+      "styling": "emotion",
+      "deprecation": "no-deprecated-imports"
     }
   },
   "af:exports": {

package/dist/cjs/performance/examples.js

@@ -1,196 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.heavyPerformance = exports.performance = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@testing-library/react");
-
-var _index = _interopRequireWildcard(require("../index"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// eslint-disable-next-line import/no-extraneous-dependencies
-var interactionTasks = [{
-  name: 'Change tabs',
-  description: 'Change tabs',
-  run: function () {
-    var _run = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2(_ref) {
-      var container, controls, tab2;
-      return _regenerator.default.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              container = _ref.container, controls = _ref.controls;
-              tab2 = container.querySelector('div[data-testid="tab2"]');
-
-              if (!(tab2 == null)) {
-                _context2.next = 4;
-                break;
-              }
-
-              throw new Error('Could not find tab element');
-
-            case 4:
-              _context2.next = 6;
-              return controls.time( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
-                return _regenerator.default.wrap(function _callee$(_context) {
-                  while (1) {
-                    switch (_context.prev = _context.next) {
-                      case 0:
-                        _react2.fireEvent.click(tab2);
-
-                      case 1:
-                      case "end":
-                        return _context.stop();
-                    }
-                  }
-                }, _callee);
-              })));
-
-            case 6:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-
-    function run(_x) {
-      return _run.apply(this, arguments);
-    }
-
-    return run;
-  }()
-}];
-
-function PerformanceComponent() {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    id: "test"
-  }, /*#__PURE__*/_react.default.createElement(_index.TabList, null, /*#__PURE__*/_react.default.createElement(_index.Tab, {
-    testId: "tab1"
-  }, "Tab 1"), /*#__PURE__*/_react.default.createElement(_index.Tab, {
-    testId: "tab2"
-  }, "Tab 2"), /*#__PURE__*/_react.default.createElement(_index.Tab, null, "Tab 3"), /*#__PURE__*/_react.default.createElement(_index.Tab, null, "Tab 4")), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, "One"), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, "Two"), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, "Three"), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, "Four"));
-}
-
-var performance = function performance() {
-  return /*#__PURE__*/_react.default.createElement(PerformanceComponent, null);
-};
-
-exports.performance = performance;
-performance.story = {
-  name: 'Performance',
-  parameters: {
-    performance: {
-      interactions: interactionTasks
-    }
-  }
-};
-var heavyInteractionTasks = [{
-  name: 'Change tabs twice',
-  description: 'Change tabs twice',
-  run: function () {
-    var _run2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee4(_ref3) {
-      var container, controls, tab1, tab2;
-      return _regenerator.default.wrap(function _callee4$(_context4) {
-        while (1) {
-          switch (_context4.prev = _context4.next) {
-            case 0:
-              container = _ref3.container, controls = _ref3.controls;
-              tab1 = container.querySelector('div[data-testid="tab1"]');
-              tab2 = container.querySelector('div[data-testid="tab2"]');
-
-              if (!(tab1 === null || tab2 === null)) {
-                _context4.next = 5;
-                break;
-              }
-
-              throw new Error('Could not find tab element');
-
-            case 5:
-              _react2.fireEvent.click(tab2);
-
-              _context4.next = 8;
-              return controls.time( /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee3() {
-                return _regenerator.default.wrap(function _callee3$(_context3) {
-                  while (1) {
-                    switch (_context3.prev = _context3.next) {
-                      case 0:
-                        _react2.fireEvent.click(tab1);
-
-                      case 1:
-                      case "end":
-                        return _context3.stop();
-                    }
-                  }
-                }, _callee3);
-              })));
-
-            case 8:
-            case "end":
-              return _context4.stop();
-          }
-        }
-      }, _callee4);
-    }));
-
-    function run(_x2) {
-      return _run2.apply(this, arguments);
-    }
-
-    return run;
-  }()
-}];
-
-function HeavyContent(_ref5) {
-  var text = _ref5.text;
-  return /*#__PURE__*/_react.default.createElement("div", null, Array(100).fill(undefined).map(function () {
-    return /*#__PURE__*/_react.default.createElement("div", null, text);
-  }));
-}
-
-function HeavyPanelPerformanceComponent() {
-  return /*#__PURE__*/_react.default.createElement(_index.default, {
-    id: "heavy"
-  }, /*#__PURE__*/_react.default.createElement(_index.TabList, null, /*#__PURE__*/_react.default.createElement(_index.Tab, {
-    testId: "tab1"
-  }, "Tab 1"), /*#__PURE__*/_react.default.createElement(_index.Tab, {
-    testId: "tab2"
-  }, "Tab 2"), /*#__PURE__*/_react.default.createElement(_index.Tab, null, "Tab 3"), /*#__PURE__*/_react.default.createElement(_index.Tab, null, "Tab 4")), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, /*#__PURE__*/_react.default.createElement(HeavyContent, {
-    text: "One"
-  })), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, /*#__PURE__*/_react.default.createElement(HeavyContent, {
-    text: "Two"
-  })), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, /*#__PURE__*/_react.default.createElement(HeavyContent, {
-    text: "Three"
-  })), /*#__PURE__*/_react.default.createElement(_index.TabPanel, null, /*#__PURE__*/_react.default.createElement(HeavyContent, {
-    text: "Four"
-  })));
-}
-
-var heavyPerformance = function heavyPerformance() {
-  return /*#__PURE__*/_react.default.createElement(HeavyPanelPerformanceComponent, null);
-};
-
-exports.heavyPerformance = heavyPerformance;
-heavyPerformance.story = {
-  name: 'Performance with heavy panels',
-  parameters: {
-    performance: {
-      interactions: heavyInteractionTasks
-    }
-  }
-};

package/dist/es2019/performance/examples.js

@@ -1,96 +0,0 @@
-import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
-
-import { fireEvent } from '@testing-library/react';
-import Tabs, { Tab, TabList, TabPanel } from '../index';
-const interactionTasks = [{
-  name: 'Change tabs',
-  description: 'Change tabs',
-  run: async ({
-    container,
-    controls
-  }) => {
-    const tab2 = container.querySelector('div[data-testid="tab2"]');
-
-    if (tab2 == null) {
-      throw new Error('Could not find tab element');
-    }
-
-    await controls.time(async () => {
-      fireEvent.click(tab2);
-    });
-  }
-}];
-
-function PerformanceComponent() {
-  return /*#__PURE__*/React.createElement(Tabs, {
-    id: "test"
-  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab1"
-  }, "Tab 1"), /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab2"
-  }, "Tab 2"), /*#__PURE__*/React.createElement(Tab, null, "Tab 3"), /*#__PURE__*/React.createElement(Tab, null, "Tab 4")), /*#__PURE__*/React.createElement(TabPanel, null, "One"), /*#__PURE__*/React.createElement(TabPanel, null, "Two"), /*#__PURE__*/React.createElement(TabPanel, null, "Three"), /*#__PURE__*/React.createElement(TabPanel, null, "Four"));
-}
-
-export const performance = () => /*#__PURE__*/React.createElement(PerformanceComponent, null);
-performance.story = {
-  name: 'Performance',
-  parameters: {
-    performance: {
-      interactions: interactionTasks
-    }
-  }
-};
-const heavyInteractionTasks = [{
-  name: 'Change tabs twice',
-  description: 'Change tabs twice',
-  run: async ({
-    container,
-    controls
-  }) => {
-    const tab1 = container.querySelector('div[data-testid="tab1"]');
-    const tab2 = container.querySelector('div[data-testid="tab2"]');
-
-    if (tab1 === null || tab2 === null) {
-      throw new Error('Could not find tab element');
-    }
-
-    fireEvent.click(tab2);
-    await controls.time(async () => {
-      fireEvent.click(tab1);
-    });
-  }
-}];
-
-function HeavyContent({
-  text
-}) {
-  return /*#__PURE__*/React.createElement("div", null, Array(100).fill(undefined).map(() => /*#__PURE__*/React.createElement("div", null, text)));
-}
-
-function HeavyPanelPerformanceComponent() {
-  return /*#__PURE__*/React.createElement(Tabs, {
-    id: "heavy"
-  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab1"
-  }, "Tab 1"), /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab2"
-  }, "Tab 2"), /*#__PURE__*/React.createElement(Tab, null, "Tab 3"), /*#__PURE__*/React.createElement(Tab, null, "Tab 4")), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "One"
-  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "Two"
-  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "Three"
-  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "Four"
-  })));
-}
-
-export const heavyPerformance = () => /*#__PURE__*/React.createElement(HeavyPanelPerformanceComponent, null);
-heavyPerformance.story = {
-  name: 'Performance with heavy panels',
-  parameters: {
-    performance: {
-      interactions: heavyInteractionTasks
-    }
-  }
-};

package/dist/esm/performance/examples.js

@@ -1,171 +0,0 @@
-import _regeneratorRuntime from "@babel/runtime/regenerator";
-import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
-import React from 'react'; // eslint-disable-next-line import/no-extraneous-dependencies
-
-import { fireEvent } from '@testing-library/react';
-import Tabs, { Tab, TabList, TabPanel } from '../index';
-var interactionTasks = [{
-  name: 'Change tabs',
-  description: 'Change tabs',
-  run: function () {
-    var _run = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref) {
-      var container, controls, tab2;
-      return _regeneratorRuntime.wrap(function _callee2$(_context2) {
-        while (1) {
-          switch (_context2.prev = _context2.next) {
-            case 0:
-              container = _ref.container, controls = _ref.controls;
-              tab2 = container.querySelector('div[data-testid="tab2"]');
-
-              if (!(tab2 == null)) {
-                _context2.next = 4;
-                break;
-              }
-
-              throw new Error('Could not find tab element');
-
-            case 4:
-              _context2.next = 6;
-              return controls.time( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
-                return _regeneratorRuntime.wrap(function _callee$(_context) {
-                  while (1) {
-                    switch (_context.prev = _context.next) {
-                      case 0:
-                        fireEvent.click(tab2);
-
-                      case 1:
-                      case "end":
-                        return _context.stop();
-                    }
-                  }
-                }, _callee);
-              })));
-
-            case 6:
-            case "end":
-              return _context2.stop();
-          }
-        }
-      }, _callee2);
-    }));
-
-    function run(_x) {
-      return _run.apply(this, arguments);
-    }
-
-    return run;
-  }()
-}];
-
-function PerformanceComponent() {
-  return /*#__PURE__*/React.createElement(Tabs, {
-    id: "test"
-  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab1"
-  }, "Tab 1"), /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab2"
-  }, "Tab 2"), /*#__PURE__*/React.createElement(Tab, null, "Tab 3"), /*#__PURE__*/React.createElement(Tab, null, "Tab 4")), /*#__PURE__*/React.createElement(TabPanel, null, "One"), /*#__PURE__*/React.createElement(TabPanel, null, "Two"), /*#__PURE__*/React.createElement(TabPanel, null, "Three"), /*#__PURE__*/React.createElement(TabPanel, null, "Four"));
-}
-
-export var performance = function performance() {
-  return /*#__PURE__*/React.createElement(PerformanceComponent, null);
-};
-performance.story = {
-  name: 'Performance',
-  parameters: {
-    performance: {
-      interactions: interactionTasks
-    }
-  }
-};
-var heavyInteractionTasks = [{
-  name: 'Change tabs twice',
-  description: 'Change tabs twice',
-  run: function () {
-    var _run2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4(_ref3) {
-      var container, controls, tab1, tab2;
-      return _regeneratorRuntime.wrap(function _callee4$(_context4) {
-        while (1) {
-          switch (_context4.prev = _context4.next) {
-            case 0:
-              container = _ref3.container, controls = _ref3.controls;
-              tab1 = container.querySelector('div[data-testid="tab1"]');
-              tab2 = container.querySelector('div[data-testid="tab2"]');
-
-              if (!(tab1 === null || tab2 === null)) {
-                _context4.next = 5;
-                break;
-              }
-
-              throw new Error('Could not find tab element');
-
-            case 5:
-              fireEvent.click(tab2);
-              _context4.next = 8;
-              return controls.time( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
-                return _regeneratorRuntime.wrap(function _callee3$(_context3) {
-                  while (1) {
-                    switch (_context3.prev = _context3.next) {
-                      case 0:
-                        fireEvent.click(tab1);
-
-                      case 1:
-                      case "end":
-                        return _context3.stop();
-                    }
-                  }
-                }, _callee3);
-              })));
-
-            case 8:
-            case "end":
-              return _context4.stop();
-          }
-        }
-      }, _callee4);
-    }));
-
-    function run(_x2) {
-      return _run2.apply(this, arguments);
-    }
-
-    return run;
-  }()
-}];
-
-function HeavyContent(_ref5) {
-  var text = _ref5.text;
-  return /*#__PURE__*/React.createElement("div", null, Array(100).fill(undefined).map(function () {
-    return /*#__PURE__*/React.createElement("div", null, text);
-  }));
-}
-
-function HeavyPanelPerformanceComponent() {
-  return /*#__PURE__*/React.createElement(Tabs, {
-    id: "heavy"
-  }, /*#__PURE__*/React.createElement(TabList, null, /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab1"
-  }, "Tab 1"), /*#__PURE__*/React.createElement(Tab, {
-    testId: "tab2"
-  }, "Tab 2"), /*#__PURE__*/React.createElement(Tab, null, "Tab 3"), /*#__PURE__*/React.createElement(Tab, null, "Tab 4")), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "One"
-  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "Two"
-  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "Three"
-  })), /*#__PURE__*/React.createElement(TabPanel, null, /*#__PURE__*/React.createElement(HeavyContent, {
-    text: "Four"
-  })));
-}
-
-export var heavyPerformance = function heavyPerformance() {
-  return /*#__PURE__*/React.createElement(HeavyPanelPerformanceComponent, null);
-};
-heavyPerformance.story = {
-  name: 'Performance with heavy panels',
-  parameters: {
-    performance: {
-      interactions: heavyInteractionTasks
-    }
-  }
-};