@atlaskit/tabs 13.2.0 → 13.2.4

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @atlaskit/tabs
 
+## 13.2.4
+
+### Patch Changes
+
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 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

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.2.0"
+  packageVersion: "13.2.4"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {

package/dist/cjs/internal/colors.js

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

package/dist/cjs/version.json

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

package/dist/es2019/components/tabs.js

@@ -11,7 +11,7 @@ import { onMouseDownBlur } from '../internal/utils';
 const analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.2.0"
+  packageVersion: "13.2.4"
 };
 
 const getTabPanelWithContext = ({

package/dist/es2019/internal/colors.js

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

package/dist/es2019/version.json

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

package/dist/esm/components/tabs.js

@@ -18,7 +18,7 @@ import { onMouseDownBlur } from '../internal/utils';
 var analyticsAttributes = {
   componentName: 'tabs',
   packageName: "@atlaskit/tabs",
-  packageVersion: "13.2.0"
+  packageVersion: "13.2.4"
 };
 
 var getTabPanelWithContext = function getTabPanelWithContext(_ref) {

package/dist/esm/internal/colors.js

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

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/tabs",
-  "version": "13.2.0",
+  "version": "13.2.4",
   "description": "Tabs are used to organize content by grouping similar information on the same page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,9 +24,9 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/codemod-utils": "^3.2.0",
-    "@atlaskit/theme": "^11.4.0",
-    "@atlaskit/tokens": "^0.1.0",
+    "@atlaskit/codemod-utils": "^3.4.0",
+    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -40,7 +40,7 @@
     "@atlaskit/section-message": "^6.1.0",
     "@atlaskit/spinner": "^15.1.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^17.4.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",
@@ -61,7 +61,10 @@
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "theming": "tokens",
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "deprecation": "no-deprecated-imports"
     }
   },

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
-    }
-  }
-};