@dhis2-ui/tab 8.1.10 → 8.2.1

package/build/cjs/tab/tab.js

@@ -17,27 +17,30 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Tab = ({
-  icon,
-  onClick,
-  selected,
-  disabled,
-  children,
-  className,
-  dataTest
-}) => /*#__PURE__*/_react.default.createElement("button", {
-  onClick: disabled ? undefined : event => onClick({}, event),
-  "data-test": dataTest,
-  className: _style.default.dynamic([["1619053260", [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey100, _uiConstants.colors.grey200, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]]]) + " " + `${(0, _classnames.default)('tab', className, {
+const Tab = _ref => {
+  let {
+    icon,
+    onClick,
     selected,
-    disabled
-  })}`
-}, icon, /*#__PURE__*/_react.default.createElement("span", {
-  className: _style.default.dynamic([["1619053260", [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey100, _uiConstants.colors.grey200, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]]])
-}, children), /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "1619053260",
-  dynamic: [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey100, _uiConstants.colors.grey200, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]
-}, [`button.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:bottom;height:100%;padding:16px 16px 11px;background-color:transparent;outline:none;border:none;border-bottom:1px solid ${_uiConstants.colors.grey400};color:${_uiConstants.colors.grey600};font-size:14px;line-height:20px;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;-webkit-transition-property:color,background-color;transition-property:color,background-color;cursor:pointer;}`, ".fixed>button.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "button.__jsx-style-dynamic-selector::after{content:' ';display:block;position:absolute;bottom:-1px;left:0;height:4px;width:100%;-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;background-color:transparent;}", "span.__jsx-style-dynamic-selector{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}", `button.__jsx-style-dynamic-selector:focus{outline:3px solid ${_uiConstants.theme.focus};outline-offset:-3px;}`, "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", `button.__jsx-style-dynamic-selector>svg{fill:${_uiConstants.colors.grey600};width:14px;height:14px;margin:0 4px 0 0;}`, `button.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey100};}`, `button.__jsx-style-dynamic-selector:active{background-color:${_uiConstants.colors.grey200};}`, `button.selected.__jsx-style-dynamic-selector{color:${_uiConstants.theme.primary700};}`, `button.selected.__jsx-style-dynamic-selector::after{background-color:${_uiConstants.theme.primary700};}`, `button.selected.__jsx-style-dynamic-selector>svg{fill:${_uiConstants.theme.primary700};}`, `button.disabled.__jsx-style-dynamic-selector{color:${_uiConstants.colors.grey500};cursor:not-allowed;}`, "button.disabled.__jsx-style-dynamic-selector:hover,button.selected.__jsx-style-dynamic-selector:hover{background-color:transparent;}", `button.disabled.__jsx-style-dynamic-selector>svg{fill:${_uiConstants.colors.grey500};}`]));
+    disabled,
+    children,
+    className,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("button", {
+    onClick: disabled ? undefined : event => onClick({}, event),
+    "data-test": dataTest,
+    className: _style.default.dynamic([["1619053260", [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey100, _uiConstants.colors.grey200, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]]]) + " " + "".concat((0, _classnames.default)('tab', className, {
+      selected,
+      disabled
+    }))
+  }, icon, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.dynamic([["1619053260", [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey100, _uiConstants.colors.grey200, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]]])
+  }, children), /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "1619053260",
+    dynamic: [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey100, _uiConstants.colors.grey200, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]
+  }, ["button.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:bottom;height:100%;padding:16px 16px 11px;background-color:transparent;outline:none;border:none;border-bottom:1px solid ".concat(_uiConstants.colors.grey400, ";color:").concat(_uiConstants.colors.grey600, ";font-size:14px;line-height:20px;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;-webkit-transition-property:color,background-color;transition-property:color,background-color;cursor:pointer;}"), ".fixed>button.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "button.__jsx-style-dynamic-selector::after{content:' ';display:block;position:absolute;bottom:-1px;left:0;height:4px;width:100%;-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;background-color:transparent;}", "span.__jsx-style-dynamic-selector{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}", "button.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(_uiConstants.theme.focus, ";outline-offset:-3px;}"), "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector>svg{fill:".concat(_uiConstants.colors.grey600, ";width:14px;height:14px;margin:0 4px 0 0;}"), "button.__jsx-style-dynamic-selector:hover{background-color:".concat(_uiConstants.colors.grey100, ";}"), "button.__jsx-style-dynamic-selector:active{background-color:".concat(_uiConstants.colors.grey200, ";}"), "button.selected.__jsx-style-dynamic-selector{color:".concat(_uiConstants.theme.primary700, ";}"), "button.selected.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.theme.primary700, ";}"), "button.selected.__jsx-style-dynamic-selector>svg{fill:".concat(_uiConstants.theme.primary700, ";}"), "button.disabled.__jsx-style-dynamic-selector{color:".concat(_uiConstants.colors.grey500, ";cursor:not-allowed;}"), "button.disabled.__jsx-style-dynamic-selector:hover,button.selected.__jsx-style-dynamic-selector:hover{background-color:transparent;}", "button.disabled.__jsx-style-dynamic-selector>svg{fill:".concat(_uiConstants.colors.grey500, ";}")]));
+};
 
 exports.Tab = Tab;
 Tab.defaultProps = {

package/build/cjs/tab-bar/animated-side-scroll.js

@@ -7,7 +7,8 @@ exports.animatedSideScroll = animatedSideScroll;
 const DURATION = 250;
 const SCROLL_STEP = 0.5;
 
-function animatedSideScroll(scrollBox, callback, goBackwards = false) {
+function animatedSideScroll(scrollBox, callback) {
+  let goBackwards = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   const startValue = scrollBox.scrollLeft;
   const endValue = getEndValue(scrollBox, startValue, goBackwards);
   const change = endValue - startValue;
@@ -27,13 +28,14 @@ function getEndValue(scrollBox, startValue, goBackwards) {
   return Math.floor(startValue + scrollDistance * inverter);
 }
 
-function createFrameStepper({
-  scrollBox,
-  callback,
-  startValue,
-  endValue,
-  change
-}) {
+function createFrameStepper(_ref) {
+  let {
+    scrollBox,
+    callback,
+    startValue,
+    endValue,
+    change
+  } = _ref;
   let startTimestamp, elapsedTime, scrollValue;
   return function step(timestamp) {
     if (!startTimestamp) {
@@ -61,10 +63,11 @@ function createFrameStepper({
   };
 }
 
-function easeInOutQuad({
-  currentTime,
-  startValue,
-  change
-}) {
+function easeInOutQuad(_ref2) {
+  let {
+    currentTime,
+    startValue,
+    change
+  } = _ref2;
   return (currentTime /= DURATION / 2) < 1 ? change / 2 * currentTime * currentTime + startValue : -change / 2 * (--currentTime * (currentTime - 2) - 1) + startValue;
 }

package/build/cjs/tab-bar/detect-horizontal-scrollbar-height.js

@@ -6,18 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.detectHorizontalScrollbarHeight = detectHorizontalScrollbarHeight;
 let horizontalScrollbarHeight;
 const className = '__vertical-scrollbar-height-test__';
-const styles = `
-    .${className} {
-        position: absolute;
-        top: -9999px;
-        width: 100px;
-        height: 100px;
-        overflow-x: scroll;
-    }
-    .${className}::-webkit-scrollbar {
-        display: none;
-    }
-`;
+const styles = "\n    .".concat(className, " {\n        position: absolute;\n        top: -9999px;\n        width: 100px;\n        height: 100px;\n        overflow-x: scroll;\n    }\n    .").concat(className, "::-webkit-scrollbar {\n        display: none;\n    }\n");
 
 function detectHorizontalScrollbarHeight() {
   if (horizontalScrollbarHeight) {

package/build/cjs/tab-bar/scroll-bar.js

@@ -192,7 +192,7 @@ class ScrollBar extends _react.Component {
     }, /*#__PURE__*/_react.default.createElement(_uiIcons.IconChevronRight16, null)), /*#__PURE__*/_react.default.createElement(_style.default, {
       id: "4174900658",
       dynamic: [-this.horizontalScrollBarHeight]
-    }, [`.scroll-box.__jsx-style-dynamic-selector{margin-bottom:${-this.horizontalScrollBarHeight}px;}`]), /*#__PURE__*/_react.default.createElement(_style.default, {
+    }, [".scroll-box.__jsx-style-dynamic-selector{margin-bottom:".concat(-this.horizontalScrollBarHeight, "px;}")]), /*#__PURE__*/_react.default.createElement(_style.default, {
       id: "191575146"
     }, [".scroll-bar.jsx-191575146{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".scroll-box-clipper.jsx-191575146{overflow-y:hidden;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".scroll-box.jsx-191575146{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow-x:scroll;-webkit-overflow-scrolling:touch;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".scroll-box.jsx-191575146::-webkit-scrollbar{display:none;}", ".scroll-area.jsx-191575146{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;overflow-x:hidden;}"]));
   }

package/build/cjs/tab-bar/scroll-button.js

@@ -17,21 +17,24 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const ScrollButton = ({
-  children,
-  disabled,
-  hidden,
-  onClick
-}) => /*#__PURE__*/_react.default.createElement("button", {
-  onClick: disabled ? undefined : onClick,
-  className: _style.default.dynamic([["2701682090", [_uiConstants.colors.white, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.colors.grey100, _uiConstants.colors.grey200, _uiConstants.colors.grey500]]]) + " " + ((0, _classnames.default)('scroll-button', {
+const ScrollButton = _ref => {
+  let {
+    children,
     disabled,
-    hidden
-  }) || "")
-}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "2701682090",
-  dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.colors.grey100, _uiConstants.colors.grey200, _uiConstants.colors.grey500]
-}, [`.scroll-button.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;background-color:${_uiConstants.colors.white};border:none;border-bottom:1px solid ${_uiConstants.colors.grey400};outline:none;padding:16px 16px 11px 16px;cursor:pointer;}`, ".scroll-button.hidden.__jsx-style-dynamic-selector{display:none;}", `.scroll-button.__jsx-style-dynamic-selector svg{width:20px;height:20px;fill:${_uiConstants.colors.grey600};-webkit-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out;opacity:1;}`, `.scroll-button.__jsx-style-dynamic-selector:hover{background-color:${_uiConstants.colors.grey100};}`, `.scroll-button.__jsx-style-dynamic-selector:active{background-color:${_uiConstants.colors.grey200};}`, ".scroll-button.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}", ".scroll-button.disabled.__jsx-style-dynamic-selector:hover{background-color:transparent;}", `.scroll-button.disabled.__jsx-style-dynamic-selector svg{fill:${_uiConstants.colors.grey500};}`]));
+    hidden,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("button", {
+    onClick: disabled ? undefined : onClick,
+    className: _style.default.dynamic([["2701682090", [_uiConstants.colors.white, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.colors.grey100, _uiConstants.colors.grey200, _uiConstants.colors.grey500]]]) + " " + ((0, _classnames.default)('scroll-button', {
+      disabled,
+      hidden
+    }) || "")
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2701682090",
+    dynamic: [_uiConstants.colors.white, _uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.colors.grey100, _uiConstants.colors.grey200, _uiConstants.colors.grey500]
+  }, [".scroll-button.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;background-color:".concat(_uiConstants.colors.white, ";border:none;border-bottom:1px solid ").concat(_uiConstants.colors.grey400, ";outline:none;padding:16px 16px 11px 16px;cursor:pointer;}"), ".scroll-button.hidden.__jsx-style-dynamic-selector{display:none;}", ".scroll-button.__jsx-style-dynamic-selector svg{width:20px;height:20px;fill:".concat(_uiConstants.colors.grey600, ";-webkit-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out;opacity:1;}"), ".scroll-button.__jsx-style-dynamic-selector:hover{background-color:".concat(_uiConstants.colors.grey100, ";}"), ".scroll-button.__jsx-style-dynamic-selector:active{background-color:".concat(_uiConstants.colors.grey200, ";}"), ".scroll-button.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}", ".scroll-button.disabled.__jsx-style-dynamic-selector:hover{background-color:transparent;}", ".scroll-button.disabled.__jsx-style-dynamic-selector svg{fill:".concat(_uiConstants.colors.grey500, ";}")]));
+};
 
 exports.ScrollButton = ScrollButton;
 ScrollButton.displayName = 'ScrollButton';

package/build/cjs/tab-bar/tab-bar.js

@@ -15,22 +15,24 @@ var _tabs = require("./tabs.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const TabBar = ({
-  fixed,
-  children,
-  className,
-  scrollable,
-  dataTest
-}) => {
+const TabBar = _ref => {
+  let {
+    fixed,
+    children,
+    className,
+    scrollable,
+    dataTest
+  } = _ref;
+
   if (scrollable) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: className,
       "data-test": dataTest
     }, /*#__PURE__*/_react.default.createElement(_scrollBar.ScrollBar, {
-      dataTest: `${dataTest}-scrollbar`
+      dataTest: "".concat(dataTest, "-scrollbar")
     }, /*#__PURE__*/_react.default.createElement(_tabs.Tabs, {
       fixed: fixed,
-      dataTest: `${dataTest}-tabs`
+      dataTest: "".concat(dataTest, "-tabs")
     }, children)));
   }
 
@@ -39,7 +41,7 @@ const TabBar = ({
     "data-test": dataTest
   }, /*#__PURE__*/_react.default.createElement(_tabs.Tabs, {
     fixed: fixed,
-    dataTest: `${dataTest}-tabs`
+    dataTest: "".concat(dataTest, "-tabs")
   }, children));
 };
 

package/build/cjs/tab-bar/tab-bar.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TabStatesWithIcon = exports.TabStates = exports.TabsWithHiddenScrollButtons = exports.TabsWithScroller = exports.FixedTabsFillContent = exports.DefaultFluid = exports.default = void 0;
+exports.default = exports.TabsWithScroller = exports.TabsWithHiddenScrollButtons = exports.TabStatesWithIcon = exports.TabStates = exports.FixedTabsFillContent = exports.DefaultFluid = void 0;
 
 var _style = _interopRequireDefault(require("styled-jsx/style"));
 
@@ -17,9 +17,10 @@ var _index2 = require("./index.js");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function AttachFile({
-  className
-}) {
+function AttachFile(_ref) {
+  let {
+    className
+  } = _ref;
   return /*#__PURE__*/_react.default.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 48 48",
@@ -36,28 +37,7 @@ AttachFile.propTypes = {
   className: _propTypes.default.string
 };
 const subtitle = 'Ssed to divide content into categories and/or sections';
-const description = `
-Use tabs to split related content into separate sections.
-
-- Each tab should contain content that relates to one another, but the content should not overlap.
-- Tabs are especially useful for splitting up content that may be relevant to different user groups, instead of displaying overwhelming amounts of information on a single page.
-- Do not use tabs to compare content.
-- Do not use tabs for sequential content that needs to be done in order.
-- Do not use tabs for content that needs to be viewed at the same time.
-- The number of tabs is less important than splitting content into understandable, predictable groups. Do not group together unrelated content in order to reduce tab count. Users struggle more with unpredictable tabs than too many tabs.
-
-#### Naming
-
-Give tabs short, understandable names. Try to find a word or very short phrase that summarizes the content. If you cannot find a suitable word this may mean you are trying to fit too much content under a single tab. The content of a tab should be obvious from its name.
-
-For example: Do use "Legends" instead of "Set up legends", Do use "Data analysis" instead of "Options for analysis of data",
-
-Do not repeat a term across tabs. If tabs are used inside a 'Options' modal, it is enough to use tab names "Data", "Legend", "Style". Do not repeat 'options' for all, e.g. "Data options", "Legend options" etc.
-
-\`\`\`js
-import { TabBar, Tab } from '@dhis2/ui'
-\`\`\`
-`;
+const description = "\nUse tabs to split related content into separate sections.\n\n- Each tab should contain content that relates to one another, but the content should not overlap.\n- Tabs are especially useful for splitting up content that may be relevant to different user groups, instead of displaying overwhelming amounts of information on a single page.\n- Do not use tabs to compare content.\n- Do not use tabs for sequential content that needs to be done in order.\n- Do not use tabs for content that needs to be viewed at the same time.\n- The number of tabs is less important than splitting content into understandable, predictable groups. Do not group together unrelated content in order to reduce tab count. Users struggle more with unpredictable tabs than too many tabs.\n\n#### Naming\n\nGive tabs short, understandable names. Try to find a word or very short phrase that summarizes the content. If you cannot find a suitable word this may mean you are trying to fit too much content under a single tab. The content of a tab should be obvious from its name.\n\nFor example: Do use \"Legends\" instead of \"Set up legends\", Do use \"Data analysis\" instead of \"Options for analysis of data\",\n\nDo not repeat a term across tabs. If tabs are used inside a 'Options' modal, it is enough to use tab names \"Data\", \"Legend\", \"Style\". Do not repeat 'options' for all, e.g. \"Data options\", \"Legend options\" etc.\n\n```js\nimport { TabBar, Tab } from '@dhis2/ui'\n```\n";
 
 const Wrapper = fn => /*#__PURE__*/_react.default.createElement("div", {
   style: {
@@ -70,10 +50,12 @@ window.onClick = (payload, event) => {
   console.log('onClick event', event);
 };
 
-const onClick = (...args) => window.onClick(...args);
+const onClick = function () {
+  return window.onClick(...arguments);
+};
 
 var _default = {
-  title: 'Navigation/Tab Bar',
+  title: 'Tab Bar',
   component: _index2.TabBar,
   subcomponents: {
     Tab: _index.Tab

package/build/cjs/tab-bar/tabs.js

@@ -17,19 +17,22 @@ var _react = _interopRequireDefault(require("react"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const Tabs = ({
-  children,
-  fixed,
-  dataTest
-}) => /*#__PURE__*/_react.default.createElement("div", {
-  "data-test": dataTest,
-  className: _style.default.dynamic([["2678989862", [_uiConstants.colors.grey400, _uiConstants.colors.white]]]) + " " + ((0, _classnames.default)({
-    fixed
-  }) || "")
-}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
-  id: "2678989862",
-  dynamic: [_uiConstants.colors.grey400, _uiConstants.colors.white]
-}, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;overflow:hidden;box-shadow:inset 0 -1px 0 0 ${_uiConstants.colors.grey400};-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;background:${_uiConstants.colors.white};}`]));
+const Tabs = _ref => {
+  let {
+    children,
+    fixed,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    "data-test": dataTest,
+    className: _style.default.dynamic([["2678989862", [_uiConstants.colors.grey400, _uiConstants.colors.white]]]) + " " + ((0, _classnames.default)({
+      fixed
+    }) || "")
+  }, children, /*#__PURE__*/_react.default.createElement(_style.default, {
+    id: "2678989862",
+    dynamic: [_uiConstants.colors.grey400, _uiConstants.colors.white]
+  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;overflow:hidden;box-shadow:inset 0 -1px 0 0 ".concat(_uiConstants.colors.grey400, ";-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;background:").concat(_uiConstants.colors.white, ";}")]));
+};
 
 exports.Tabs = Tabs;
 Tabs.propTypes = {

package/build/es/tab/tab.js

@@ -4,27 +4,30 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const Tab = ({
-  icon,
-  onClick,
-  selected,
-  disabled,
-  children,
-  className,
-  dataTest
-}) => /*#__PURE__*/React.createElement("button", {
-  onClick: disabled ? undefined : event => onClick({}, event),
-  "data-test": dataTest,
-  className: _JSXStyle.dynamic([["1619053260", [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey100, colors.grey200, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]]]) + " " + `${cx('tab', className, {
+const Tab = _ref => {
+  let {
+    icon,
+    onClick,
     selected,
-    disabled
-  })}`
-}, icon, /*#__PURE__*/React.createElement("span", {
-  className: _JSXStyle.dynamic([["1619053260", [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey100, colors.grey200, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]]])
-}, children), /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "1619053260",
-  dynamic: [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey100, colors.grey200, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]
-}, [`button.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:bottom;height:100%;padding:16px 16px 11px;background-color:transparent;outline:none;border:none;border-bottom:1px solid ${colors.grey400};color:${colors.grey600};font-size:14px;line-height:20px;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;-webkit-transition-property:color,background-color;transition-property:color,background-color;cursor:pointer;}`, ".fixed>button.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "button.__jsx-style-dynamic-selector::after{content:' ';display:block;position:absolute;bottom:-1px;left:0;height:4px;width:100%;-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;background-color:transparent;}", "span.__jsx-style-dynamic-selector{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}", `button.__jsx-style-dynamic-selector:focus{outline:3px solid ${theme.focus};outline-offset:-3px;}`, "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", `button.__jsx-style-dynamic-selector>svg{fill:${colors.grey600};width:14px;height:14px;margin:0 4px 0 0;}`, `button.__jsx-style-dynamic-selector:hover{background-color:${colors.grey100};}`, `button.__jsx-style-dynamic-selector:active{background-color:${colors.grey200};}`, `button.selected.__jsx-style-dynamic-selector{color:${theme.primary700};}`, `button.selected.__jsx-style-dynamic-selector::after{background-color:${theme.primary700};}`, `button.selected.__jsx-style-dynamic-selector>svg{fill:${theme.primary700};}`, `button.disabled.__jsx-style-dynamic-selector{color:${colors.grey500};cursor:not-allowed;}`, "button.disabled.__jsx-style-dynamic-selector:hover,button.selected.__jsx-style-dynamic-selector:hover{background-color:transparent;}", `button.disabled.__jsx-style-dynamic-selector>svg{fill:${colors.grey500};}`]));
+    disabled,
+    children,
+    className,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: disabled ? undefined : event => onClick({}, event),
+    "data-test": dataTest,
+    className: _JSXStyle.dynamic([["1619053260", [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey100, colors.grey200, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]]]) + " " + "".concat(cx('tab', className, {
+      selected,
+      disabled
+    }))
+  }, icon, /*#__PURE__*/React.createElement("span", {
+    className: _JSXStyle.dynamic([["1619053260", [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey100, colors.grey200, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]]])
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "1619053260",
+    dynamic: [colors.grey400, colors.grey600, theme.focus, colors.grey600, colors.grey100, colors.grey200, theme.primary700, theme.primary700, theme.primary700, colors.grey500, colors.grey500]
+  }, ["button.__jsx-style-dynamic-selector{-webkit-box-flex:0;-webkit-flex-grow:0;-ms-flex-positive:0;flex-grow:0;position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:bottom;height:100%;padding:16px 16px 11px;background-color:transparent;outline:none;border:none;border-bottom:1px solid ".concat(colors.grey400, ";color:").concat(colors.grey600, ";font-size:14px;line-height:20px;-webkit-transition:all 150ms ease-in-out;transition:all 150ms ease-in-out;-webkit-transition-property:color,background-color;transition-property:color,background-color;cursor:pointer;}"), ".fixed>button.__jsx-style-dynamic-selector{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", "button.__jsx-style-dynamic-selector::after{content:' ';display:block;position:absolute;bottom:-1px;left:0;height:4px;width:100%;-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;background-color:transparent;}", "span.__jsx-style-dynamic-selector{max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-transition:fill 150ms ease-in-out;transition:fill 150ms ease-in-out;}", "button.__jsx-style-dynamic-selector:focus{outline:3px solid ".concat(theme.focus, ";outline-offset:-3px;}"), "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector>svg{fill:".concat(colors.grey600, ";width:14px;height:14px;margin:0 4px 0 0;}"), "button.__jsx-style-dynamic-selector:hover{background-color:".concat(colors.grey100, ";}"), "button.__jsx-style-dynamic-selector:active{background-color:".concat(colors.grey200, ";}"), "button.selected.__jsx-style-dynamic-selector{color:".concat(theme.primary700, ";}"), "button.selected.__jsx-style-dynamic-selector::after{background-color:".concat(theme.primary700, ";}"), "button.selected.__jsx-style-dynamic-selector>svg{fill:".concat(theme.primary700, ";}"), "button.disabled.__jsx-style-dynamic-selector{color:".concat(colors.grey500, ";cursor:not-allowed;}"), "button.disabled.__jsx-style-dynamic-selector:hover,button.selected.__jsx-style-dynamic-selector:hover{background-color:transparent;}", "button.disabled.__jsx-style-dynamic-selector>svg{fill:".concat(colors.grey500, ";}")]));
+};
 
 Tab.defaultProps = {
   dataTest: 'dhis2-uicore-tab'

package/build/es/tab-bar/animated-side-scroll.js

@@ -1,6 +1,7 @@
 const DURATION = 250;
 const SCROLL_STEP = 0.5;
-export function animatedSideScroll(scrollBox, callback, goBackwards = false) {
+export function animatedSideScroll(scrollBox, callback) {
+  let goBackwards = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   const startValue = scrollBox.scrollLeft;
   const endValue = getEndValue(scrollBox, startValue, goBackwards);
   const change = endValue - startValue;
@@ -20,13 +21,14 @@ function getEndValue(scrollBox, startValue, goBackwards) {
   return Math.floor(startValue + scrollDistance * inverter);
 }
 
-function createFrameStepper({
-  scrollBox,
-  callback,
-  startValue,
-  endValue,
-  change
-}) {
+function createFrameStepper(_ref) {
+  let {
+    scrollBox,
+    callback,
+    startValue,
+    endValue,
+    change
+  } = _ref;
   let startTimestamp, elapsedTime, scrollValue;
   return function step(timestamp) {
     if (!startTimestamp) {
@@ -54,10 +56,11 @@ function createFrameStepper({
   };
 }
 
-function easeInOutQuad({
-  currentTime,
-  startValue,
-  change
-}) {
+function easeInOutQuad(_ref2) {
+  let {
+    currentTime,
+    startValue,
+    change
+  } = _ref2;
   return (currentTime /= DURATION / 2) < 1 ? change / 2 * currentTime * currentTime + startValue : -change / 2 * (--currentTime * (currentTime - 2) - 1) + startValue;
 }

package/build/es/tab-bar/detect-horizontal-scrollbar-height.js

@@ -1,17 +1,6 @@
 let horizontalScrollbarHeight;
 const className = '__vertical-scrollbar-height-test__';
-const styles = `
-    .${className} {
-        position: absolute;
-        top: -9999px;
-        width: 100px;
-        height: 100px;
-        overflow-x: scroll;
-    }
-    .${className}::-webkit-scrollbar {
-        display: none;
-    }
-`;
+const styles = "\n    .".concat(className, " {\n        position: absolute;\n        top: -9999px;\n        width: 100px;\n        height: 100px;\n        overflow-x: scroll;\n    }\n    .").concat(className, "::-webkit-scrollbar {\n        display: none;\n    }\n");
 export function detectHorizontalScrollbarHeight() {
   if (horizontalScrollbarHeight) {
     return horizontalScrollbarHeight;

package/build/es/tab-bar/scroll-bar.js

@@ -173,7 +173,7 @@ class ScrollBar extends Component {
     }, /*#__PURE__*/React.createElement(IconChevronRight16, null)), /*#__PURE__*/React.createElement(_JSXStyle, {
       id: "4174900658",
       dynamic: [-this.horizontalScrollBarHeight]
-    }, [`.scroll-box.__jsx-style-dynamic-selector{margin-bottom:${-this.horizontalScrollBarHeight}px;}`]), /*#__PURE__*/React.createElement(_JSXStyle, {
+    }, [".scroll-box.__jsx-style-dynamic-selector{margin-bottom:".concat(-this.horizontalScrollBarHeight, "px;}")]), /*#__PURE__*/React.createElement(_JSXStyle, {
       id: "191575146"
     }, [".scroll-bar.jsx-191575146{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;}", ".scroll-box-clipper.jsx-191575146{overflow-y:hidden;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".scroll-box.jsx-191575146{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;overflow-x:scroll;-webkit-overflow-scrolling:touch;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".scroll-box.jsx-191575146::-webkit-scrollbar{display:none;}", ".scroll-area.jsx-191575146{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex:1 0 auto;-ms-flex:1 0 auto;flex:1 0 auto;overflow-x:hidden;}"]));
   }

package/build/es/tab-bar/scroll-button.js

@@ -3,21 +3,24 @@ import { colors } from '@dhis2/ui-constants';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-export const ScrollButton = ({
-  children,
-  disabled,
-  hidden,
-  onClick
-}) => /*#__PURE__*/React.createElement("button", {
-  onClick: disabled ? undefined : onClick,
-  className: _JSXStyle.dynamic([["2701682090", [colors.white, colors.grey400, colors.grey600, colors.grey100, colors.grey200, colors.grey500]]]) + " " + (cx('scroll-button', {
+export const ScrollButton = _ref => {
+  let {
+    children,
     disabled,
-    hidden
-  }) || "")
-}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "2701682090",
-  dynamic: [colors.white, colors.grey400, colors.grey600, colors.grey100, colors.grey200, colors.grey500]
-}, [`.scroll-button.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;background-color:${colors.white};border:none;border-bottom:1px solid ${colors.grey400};outline:none;padding:16px 16px 11px 16px;cursor:pointer;}`, ".scroll-button.hidden.__jsx-style-dynamic-selector{display:none;}", `.scroll-button.__jsx-style-dynamic-selector svg{width:20px;height:20px;fill:${colors.grey600};-webkit-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out;opacity:1;}`, `.scroll-button.__jsx-style-dynamic-selector:hover{background-color:${colors.grey100};}`, `.scroll-button.__jsx-style-dynamic-selector:active{background-color:${colors.grey200};}`, ".scroll-button.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}", ".scroll-button.disabled.__jsx-style-dynamic-selector:hover{background-color:transparent;}", `.scroll-button.disabled.__jsx-style-dynamic-selector svg{fill:${colors.grey500};}`]));
+    hidden,
+    onClick
+  } = _ref;
+  return /*#__PURE__*/React.createElement("button", {
+    onClick: disabled ? undefined : onClick,
+    className: _JSXStyle.dynamic([["2701682090", [colors.white, colors.grey400, colors.grey600, colors.grey100, colors.grey200, colors.grey500]]]) + " " + (cx('scroll-button', {
+      disabled,
+      hidden
+    }) || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2701682090",
+    dynamic: [colors.white, colors.grey400, colors.grey600, colors.grey100, colors.grey200, colors.grey500]
+  }, [".scroll-button.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:inherit;background-color:".concat(colors.white, ";border:none;border-bottom:1px solid ").concat(colors.grey400, ";outline:none;padding:16px 16px 11px 16px;cursor:pointer;}"), ".scroll-button.hidden.__jsx-style-dynamic-selector{display:none;}", ".scroll-button.__jsx-style-dynamic-selector svg{width:20px;height:20px;fill:".concat(colors.grey600, ";-webkit-transition:opacity 150ms ease-in-out;transition:opacity 150ms ease-in-out;opacity:1;}"), ".scroll-button.__jsx-style-dynamic-selector:hover{background-color:".concat(colors.grey100, ";}"), ".scroll-button.__jsx-style-dynamic-selector:active{background-color:".concat(colors.grey200, ";}"), ".scroll-button.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;}", ".scroll-button.disabled.__jsx-style-dynamic-selector:hover{background-color:transparent;}", ".scroll-button.disabled.__jsx-style-dynamic-selector svg{fill:".concat(colors.grey500, ";}")]));
+};
 ScrollButton.displayName = 'ScrollButton';
 ScrollButton.propTypes = {
   children: PropTypes.any.isRequired,

package/build/es/tab-bar/tab-bar.js

@@ -3,22 +3,24 @@ import React from 'react';
 import { ScrollBar } from './scroll-bar.js';
 import { Tabs } from './tabs.js';
 
-const TabBar = ({
-  fixed,
-  children,
-  className,
-  scrollable,
-  dataTest
-}) => {
+const TabBar = _ref => {
+  let {
+    fixed,
+    children,
+    className,
+    scrollable,
+    dataTest
+  } = _ref;
+
   if (scrollable) {
     return /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-test": dataTest
     }, /*#__PURE__*/React.createElement(ScrollBar, {
-      dataTest: `${dataTest}-scrollbar`
+      dataTest: "".concat(dataTest, "-scrollbar")
     }, /*#__PURE__*/React.createElement(Tabs, {
       fixed: fixed,
-      dataTest: `${dataTest}-tabs`
+      dataTest: "".concat(dataTest, "-tabs")
     }, children)));
   }
 
@@ -27,7 +29,7 @@ const TabBar = ({
     "data-test": dataTest
   }, /*#__PURE__*/React.createElement(Tabs, {
     fixed: fixed,
-    dataTest: `${dataTest}-tabs`
+    dataTest: "".concat(dataTest, "-tabs")
   }, children));
 };
 

package/build/es/tab-bar/tab-bar.stories.js

@@ -4,9 +4,10 @@ import React from 'react';
 import { Tab } from '../tab/index.js';
 import { TabBar } from './index.js';
 
-function AttachFile({
-  className
-}) {
+function AttachFile(_ref) {
+  let {
+    className
+  } = _ref;
   return /*#__PURE__*/React.createElement("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 48 48",
@@ -23,28 +24,7 @@ AttachFile.propTypes = {
   className: PropTypes.string
 };
 const subtitle = 'Ssed to divide content into categories and/or sections';
-const description = `
-Use tabs to split related content into separate sections.
-
-- Each tab should contain content that relates to one another, but the content should not overlap.
-- Tabs are especially useful for splitting up content that may be relevant to different user groups, instead of displaying overwhelming amounts of information on a single page.
-- Do not use tabs to compare content.
-- Do not use tabs for sequential content that needs to be done in order.
-- Do not use tabs for content that needs to be viewed at the same time.
-- The number of tabs is less important than splitting content into understandable, predictable groups. Do not group together unrelated content in order to reduce tab count. Users struggle more with unpredictable tabs than too many tabs.
-
-#### Naming
-
-Give tabs short, understandable names. Try to find a word or very short phrase that summarizes the content. If you cannot find a suitable word this may mean you are trying to fit too much content under a single tab. The content of a tab should be obvious from its name.
-
-For example: Do use "Legends" instead of "Set up legends", Do use "Data analysis" instead of "Options for analysis of data",
-
-Do not repeat a term across tabs. If tabs are used inside a 'Options' modal, it is enough to use tab names "Data", "Legend", "Style". Do not repeat 'options' for all, e.g. "Data options", "Legend options" etc.
-
-\`\`\`js
-import { TabBar, Tab } from '@dhis2/ui'
-\`\`\`
-`;
+const description = "\nUse tabs to split related content into separate sections.\n\n- Each tab should contain content that relates to one another, but the content should not overlap.\n- Tabs are especially useful for splitting up content that may be relevant to different user groups, instead of displaying overwhelming amounts of information on a single page.\n- Do not use tabs to compare content.\n- Do not use tabs for sequential content that needs to be done in order.\n- Do not use tabs for content that needs to be viewed at the same time.\n- The number of tabs is less important than splitting content into understandable, predictable groups. Do not group together unrelated content in order to reduce tab count. Users struggle more with unpredictable tabs than too many tabs.\n\n#### Naming\n\nGive tabs short, understandable names. Try to find a word or very short phrase that summarizes the content. If you cannot find a suitable word this may mean you are trying to fit too much content under a single tab. The content of a tab should be obvious from its name.\n\nFor example: Do use \"Legends\" instead of \"Set up legends\", Do use \"Data analysis\" instead of \"Options for analysis of data\",\n\nDo not repeat a term across tabs. If tabs are used inside a 'Options' modal, it is enough to use tab names \"Data\", \"Legend\", \"Style\". Do not repeat 'options' for all, e.g. \"Data options\", \"Legend options\" etc.\n\n```js\nimport { TabBar, Tab } from '@dhis2/ui'\n```\n";
 
 const Wrapper = fn => /*#__PURE__*/React.createElement("div", {
   style: {
@@ -57,10 +37,12 @@ window.onClick = (payload, event) => {
   console.log('onClick event', event);
 };
 
-const onClick = (...args) => window.onClick(...args);
+const onClick = function () {
+  return window.onClick(...arguments);
+};
 
 export default {
-  title: 'Navigation/Tab Bar',
+  title: 'Tab Bar',
   component: TabBar,
   subcomponents: {
     Tab

package/build/es/tab-bar/tabs.js

@@ -4,19 +4,22 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const Tabs = ({
-  children,
-  fixed,
-  dataTest
-}) => /*#__PURE__*/React.createElement("div", {
-  "data-test": dataTest,
-  className: _JSXStyle.dynamic([["2678989862", [colors.grey400, colors.white]]]) + " " + (cx({
-    fixed
-  }) || "")
-}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
-  id: "2678989862",
-  dynamic: [colors.grey400, colors.white]
-}, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;overflow:hidden;box-shadow:inset 0 -1px 0 0 ${colors.grey400};-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;background:${colors.white};}`]));
+const Tabs = _ref => {
+  let {
+    children,
+    fixed,
+    dataTest
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-test": dataTest,
+    className: _JSXStyle.dynamic([["2678989862", [colors.grey400, colors.white]]]) + " " + (cx({
+      fixed
+    }) || "")
+  }, children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2678989862",
+    dynamic: [colors.grey400, colors.white]
+  }, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;position:relative;overflow:hidden;box-shadow:inset 0 -1px 0 0 ".concat(colors.grey400, ";-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;background:").concat(colors.white, ";}")]));
+};
 
 Tabs.propTypes = {
   dataTest: PropTypes.string.isRequired,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/tab",
-    "version": "8.1.10",
+    "version": "8.2.1",
     "description": "UI Tabs",
     "repository": {
         "type": "git",
@@ -32,8 +32,8 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.0.0-beta.1",
-        "@dhis2/ui-constants": "8.1.10",
-        "@dhis2/ui-icons": "8.1.10",
+        "@dhis2/ui-constants": "8.2.1",
+        "@dhis2/ui-icons": "8.2.1",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },