@dhis2-ui/tab 9.11.0 → 9.11.1-beta.1

package/build/cjs/index.js

@@ -15,7 +15,5 @@ Object.defineProperty(exports, "TabBar", {
     return _index2.TabBar;
   }
 });
-
 var _index = require("./tab/index.js");
-
 var _index2 = require("./tab-bar/index.js");

package/build/cjs/tab/features/accepts_children/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Tab with children is rendered', () => {
   cy.visitStory('Tab', 'With children');
   cy.get('[data-test="dhis2-uicore-tab"]').should('be.visible');

package/build/cjs/tab/features/accepts_icon/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Tab with an icon is rendered', () => {
   cy.visitStory('Tab', 'With icon');
   cy.get('[data-test="dhis2-uicore-tab"]').should('be.visible');

package/build/cjs/tab/features/is_clickable/index.js

@@ -1,12 +1,11 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a Tab with onClick handler is rendered', () => {
-  cy.visitStory('Tab', 'With onClick');
+  cy.visitStory('Tab', 'With on click');
 });
 (0, _cypressCucumberPreprocessor.Given)('a disabled Tab with onClick handler is rendered', () => {
-  cy.visitStory('Tab', 'With onClick and disabled');
+  cy.visitStory('Tab', 'With on click and disabled');
 });
 (0, _cypressCucumberPreprocessor.When)('the Tab is clicked', () => {
   cy.get('[data-test="dhis2-uicore-tab"]').click();

package/build/cjs/tab/index.js

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "Tab", {
     return _tab.Tab;
   }
 });
-
 var _tab = require("./tab.js");

package/build/cjs/tab/tab.e2e.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithOnClickAndDisabled = exports.WithOnClick = exports.WithIcon = exports.WithChildren = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _tab = require("./tab.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+window.onClick = window.Cypress && window.Cypress.cy.stub();
+var _default = exports.default = {
+  title: 'Tab'
+};
+const WithOnClick = () => /*#__PURE__*/_react.default.createElement(_tab.Tab, {
+  onClick: window.onClick
+}, "Tab A");
+exports.WithOnClick = WithOnClick;
+const WithChildren = () => /*#__PURE__*/_react.default.createElement(_tab.Tab, null, "I am a child");
+exports.WithChildren = WithChildren;
+const WithIcon = () => /*#__PURE__*/_react.default.createElement(_tab.Tab, {
+  icon: /*#__PURE__*/_react.default.createElement("div", null, "Icon")
+}, "Children");
+exports.WithIcon = WithIcon;
+const WithOnClickAndDisabled = () => /*#__PURE__*/_react.default.createElement(_tab.Tab, {
+  onClick: window.onClick,
+  disabled: true
+}, "Tab A");
+exports.WithOnClickAndDisabled = WithOnClickAndDisabled;

package/build/cjs/tab/tab.js

@@ -4,26 +4,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.Tab = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
-var _tooltip = require("@dhis2-ui/tooltip");
-
 var _uiConstants = require("@dhis2/ui-constants");
-
+var _tooltip = require("@dhis2-ui/tooltip");
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const Tab = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const Tab = exports.Tab = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     icon,
     onClick,
@@ -34,18 +24,15 @@ const Tab = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     dataTest
   } = _ref;
   let tabRef = (0, _react.useRef)(null);
-
   if (ref) {
     tabRef = ref;
   }
-
   const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
   (0, _react.useEffect)(() => {
     const checkOverflow = () => {
       const isOverflow = tabRef.current.scrollWidth > tabRef.current.clientWidth;
       setIsOverflowing(isOverflow);
     };
-
     checkOverflow();
   }, []);
   return /*#__PURE__*/_react.default.createElement("button", {
@@ -57,10 +44,10 @@ const Tab = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     "aria-disabled": disabled ? 'true' : 'false',
     onFocus: disabled ? undefined : event => onClick({}, event),
     tabIndex: -1,
-    className: _style.default.dynamic([["2433456263", [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey900, _uiConstants.colors.grey600, _uiConstants.colors.grey800, _uiConstants.theme.primary800, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]]]) + " " + "".concat((0, _classnames.default)('tab', className, {
+    className: _style.default.dynamic([["2433456263", [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey900, _uiConstants.colors.grey600, _uiConstants.colors.grey800, _uiConstants.theme.primary800, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.theme.primary700, _uiConstants.colors.grey500, _uiConstants.colors.grey500]]]) + " " + `${(0, _classnames.default)('tab', className, {
       selected,
       disabled
-    }))
+    })}`
   }, icon, isOverflowing ? /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
     content: children,
     maxWidth: '100%'
@@ -73,10 +60,8 @@ const Tab = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   }, children), /*#__PURE__*/_react.default.createElement(_style.default, {
     id: "2433456263",
     dynamic: [_uiConstants.colors.grey400, _uiConstants.colors.grey600, _uiConstants.theme.focus, _uiConstants.colors.grey600, _uiConstants.colors.grey900, _uiConstants.colors.grey600, _uiConstants.colors.grey800, _uiConstants.theme.primary800, _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;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;inset-inline-start:0;height:4px;width:100%;background-color:transparent;}", "span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;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{color:".concat(_uiConstants.colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.colors.grey600, ";height:2px;}"), "button.__jsx-style-dynamic-selector:active.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.colors.grey800, ";}"), "button.selected.__jsx-style-dynamic-selector{color:".concat(_uiConstants.theme.primary800, ";}"), "button.selected.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.theme.primary700, ";-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;}"), "button.selected.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:".concat(_uiConstants.theme.primary700, ";height:4px;}"), "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, ";}")]));
+  }, [`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;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;inset-inline-start:0;height:4px;width:100%;background-color:transparent;}", "span.__jsx-style-dynamic-selector{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;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{color:${_uiConstants.colors.grey900};}`, `button.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:${_uiConstants.colors.grey600};height:2px;}`, `button.__jsx-style-dynamic-selector:active.__jsx-style-dynamic-selector::after{background-color:${_uiConstants.colors.grey800};}`, `button.selected.__jsx-style-dynamic-selector{color:${_uiConstants.theme.primary800};}`, `button.selected.__jsx-style-dynamic-selector::after{background-color:${_uiConstants.theme.primary700};-webkit-transition:background-color 150ms ease-in-out;transition:background-color 150ms ease-in-out;}`, `button.selected.__jsx-style-dynamic-selector:hover.__jsx-style-dynamic-selector::after{background-color:${_uiConstants.theme.primary700};height:4px;}`, `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};}`]));
 });
-
-exports.Tab = Tab;
 Tab.defaultProps = {
   dataTest: 'dhis2-uicore-tab'
 };
@@ -86,10 +71,8 @@ Tab.propTypes = {
   dataTest: _propTypes.default.string,
   disabled: _propTypes.default.bool,
   icon: _propTypes.default.element,
-
   /** Indicates this tab is selected */
   selected: _propTypes.default.bool,
-
   /** Called with the signature `({}, event)` */
   onClick: _propTypes.default.func
 };

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.animatedSideScroll = animatedSideScroll;
 const DURATION = 250;
 const SCROLL_STEP = 0.5;
-
 function animatedSideScroll(scrollBox, callback) {
   let goBackwards = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   const startValue = scrollBox.scrollLeft;
@@ -21,13 +20,11 @@ function animatedSideScroll(scrollBox, callback) {
   });
   window.requestAnimationFrame(step);
 }
-
 function getEndValue(scrollBox, startValue, goBackwards) {
   const scrollDistance = scrollBox.clientWidth * SCROLL_STEP;
   const inverter = goBackwards ? -1 : 1;
   return Math.floor(startValue + scrollDistance * inverter);
 }
-
 function createFrameStepper(_ref) {
   let {
     scrollBox,
@@ -41,7 +38,6 @@ function createFrameStepper(_ref) {
     if (!startTimestamp) {
       startTimestamp = timestamp;
     }
-
     elapsedTime = timestamp - startTimestamp;
     scrollValue = easeInOutQuad({
       currentTime: elapsedTime,
@@ -49,12 +45,10 @@ function createFrameStepper(_ref) {
       startValue,
       change
     });
-
     if (elapsedTime >= DURATION) {
       if (scrollValue !== endValue) {
         scrollBox.scrollLeft = endValue;
       }
-
       callback && callback();
     } else {
       scrollBox.scrollLeft = scrollValue;
@@ -62,7 +56,6 @@ function createFrameStepper(_ref) {
     }
   };
 }
-
 function easeInOutQuad(_ref2) {
   let {
     currentTime,

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

@@ -6,13 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 exports.detectHorizontalScrollbarHeight = detectHorizontalScrollbarHeight;
 let horizontalScrollbarHeight;
 const className = '__vertical-scrollbar-height-test__';
-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");
-
+const styles = `
+    .${className} {
+        position: absolute;
+        top: -9999px;
+        width: 100px;
+        height: 100px;
+        overflow-x: scroll;
+    }
+    .${className}::-webkit-scrollbar {
+        display: none;
+    }
+`;
 function detectHorizontalScrollbarHeight() {
   if (horizontalScrollbarHeight) {
     return horizontalScrollbarHeight;
   }
-
   const style = document.createElement('style');
   style.innerHTML = styles;
   const el = document.createElement('div');

package/build/cjs/tab-bar/features/accepts_children/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a TabBar with children is rendered', () => {
   cy.visitStory('TabBar', 'With children');
   cy.get('[data-test="dhis2-uicore-tabbar"]').should('be.visible');

package/build/cjs/tab-bar/features/auto_hides_scroll_buttons/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
-
 (0, _cypressCucumberPreprocessor.Given)('a tabbar with enough space for all tabs is rendered', () => {
   cy.viewport(1024, 768);
   cy.visitStory('TabBar', 'Scrollable with some tabs');

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

@@ -9,5 +9,4 @@ Object.defineProperty(exports, "TabBar", {
     return _tabBar.TabBar;
   }
 });
-
 var _tabBar = require("./tab-bar.js");

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

@@ -4,43 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ScrollBar = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiIcons = require("@dhis2/ui-icons");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _animatedSideScroll = require("./animated-side-scroll.js");
-
 var _detectHorizontalScrollbarHeight = require("./detect-horizontal-scrollbar-height.js");
-
 var _scrollButton = require("./scroll-button.js");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 class ScrollBar extends _react.Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "scrollBox", /*#__PURE__*/(0, _react.createRef)());
-
     _defineProperty(this, "scrollArea", /*#__PURE__*/(0, _react.createRef)());
-
     _defineProperty(this, "horizontalScrollBarHeight", (0, _detectHorizontalScrollbarHeight.detectHorizontalScrollbarHeight)());
-
     _defineProperty(this, "scrollBoxResizeObserver", null);
-
     _defineProperty(this, "calculateShouldHideButtons", () => {
       this.setState({
         hideScrollButtonsInitialized: false
@@ -57,31 +41,24 @@ class ScrollBar extends _react.Component {
       this.setState({
         hideScrollButtons
       });
-
       if (!hideScrollButtons) {
         if (this.state.scrolledToStart) {
           this.scrollLeft();
         }
-
         if (this.state.scrolledToEnd) {
           this.scrollRight();
         }
       }
-
       this.setState({
         hideScrollButtonsInitialized: true
       });
     });
-
     _defineProperty(this, "scrollRight", () => this.scroll());
-
     _defineProperty(this, "scrollLeft", () => this.scroll(true));
-
     _defineProperty(this, "animatedScrollCallback", () => {
       this.updateScrolledToStates();
       this.attachSideScrollListener();
     });
-
     _defineProperty(this, "updateScrolledToStates", () => {
       const {
         scrollLeft,
@@ -92,7 +69,6 @@ class ScrollBar extends _react.Component {
       } = this.scrollArea.current;
       const scrolledToStart = scrollLeft <= 0;
       const scrolledToEnd = scrollLeft + offsetWidth >= areaOffsetWidth;
-
       if (this.state.scrolledToStart !== scrolledToStart || this.state.scrolledToEnd !== scrolledToEnd) {
         this.setState({
           scrolledToStart,
@@ -100,7 +76,6 @@ class ScrollBar extends _react.Component {
         });
       }
     });
-
     this.state = {
       scrolledToStart: true,
       scrolledToEnd: false,
@@ -111,18 +86,15 @@ class ScrollBar extends _react.Component {
     };
     this.scrollBoxResizeObserver = new ResizeObserver(this.calculateShouldHideButtons);
   }
-
   componentDidMount() {
     this.scrollSelectedTabIntoView();
     this.attachSideScrollListener();
     this.manageShouldHideButtons();
   }
-
   componentWillUnmount() {
     this.removeSideScrollListener();
     this.scrollBoxResizeObserver.disconnect();
   }
-
   manageShouldHideButtons() {
     const {
       current: scrollBox
@@ -130,33 +102,26 @@ class ScrollBar extends _react.Component {
     this.scrollBoxResizeObserver.observe(scrollBox);
     this.calculateShouldHideButtons();
   }
-
   scroll(goBackwards) {
     this.removeSideScrollListener();
     (0, _animatedSideScroll.animatedSideScroll)(this.scrollBox.current, this.animatedScrollCallback, goBackwards);
   }
-
   scrollSelectedTabIntoView() {
     const scrollBoxEl = this.scrollBox.current;
     const tab = scrollBoxEl.querySelector('.tab.selected');
-
     if (tab) {
       const tabEnd = tab.offsetLeft + tab.offsetWidth;
-
       if (tabEnd > scrollBoxEl.offsetWidth) {
         scrollBoxEl.scrollLeft = tabEnd - scrollBoxEl.offsetWidth;
       }
     }
   }
-
   attachSideScrollListener() {
     this.scrollBox.current.addEventListener('scroll', this.updateScrolledToStates);
   }
-
   removeSideScrollListener() {
     this.scrollBox.current.removeEventListener('scroll', this.updateScrolledToStates);
   }
-
   render() {
     const {
       scrolledToStart,
@@ -192,13 +157,11 @@ 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:".concat(-this.horizontalScrollBarHeight, "px;}")]), /*#__PURE__*/_react.default.createElement(_style.default, {
+    }, [`.scroll-box.__jsx-style-dynamic-selector{margin-bottom:${-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;}"]));
   }
-
 }
-
 exports.ScrollBar = ScrollBar;
 ScrollBar.propTypes = {
   children: _propTypes.default.node.isRequired,

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

@@ -4,19 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ScrollButton = void 0;
-
 var _style = _interopRequireDefault(require("styled-jsx/style"));
-
 var _uiConstants = require("@dhis2/ui-constants");
-
 var _classnames = _interopRequireDefault(require("classnames"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const ScrollButton = _ref => {
   let {
     children,
@@ -33,9 +26,8 @@ const ScrollButton = _ref => {
   }, 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, ";}")]));
+  }, [`.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};}`]));
 };
-
 exports.ScrollButton = ScrollButton;
 ScrollButton.displayName = 'ScrollButton';
 ScrollButton.propTypes = {

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.WithChildren = exports.ScrollableWithSomeTabs = exports.ScrollableWithChildren = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _index = require("../tab/index.js");
+var _index2 = require("./index.js");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  title: 'TabBar'
+};
+const WithChildren = () => /*#__PURE__*/_react.default.createElement(_index2.TabBar, null, "I am a child");
+exports.WithChildren = WithChildren;
+const ScrollableWithChildren = () => /*#__PURE__*/_react.default.createElement(_index2.TabBar, {
+  scrollable: true
+}, "I am a child");
+exports.ScrollableWithChildren = ScrollableWithChildren;
+const ScrollableWithSomeTabs = () => {
+  const TabStaticWidth = () => /*#__PURE__*/_react.default.createElement(_index.Tab, null, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      width: 100,
+      border: '1px solid black'
+    }
+  }, "Foo"));
+  return /*#__PURE__*/_react.default.createElement(_index2.TabBar, {
+    scrollable: true
+  }, /*#__PURE__*/_react.default.createElement(TabStaticWidth, null), /*#__PURE__*/_react.default.createElement(TabStaticWidth, null), /*#__PURE__*/_react.default.createElement(TabStaticWidth, null));
+};
+exports.ScrollableWithSomeTabs = ScrollableWithSomeTabs;

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

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TabBar = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _scrollBar = require("./scroll-bar.js");
-
 var _tabs = require("./tabs.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const TabBar = _ref => {
   let {
     fixed,
@@ -23,28 +17,25 @@ const TabBar = _ref => {
     scrollable,
     dataTest
   } = _ref;
-
   if (scrollable) {
     return /*#__PURE__*/_react.default.createElement("div", {
       className: className,
       "data-test": dataTest
     }, /*#__PURE__*/_react.default.createElement(_scrollBar.ScrollBar, {
-      dataTest: "".concat(dataTest, "-scrollbar")
+      dataTest: `${dataTest}-scrollbar`
     }, /*#__PURE__*/_react.default.createElement(_tabs.Tabs, {
       fixed: fixed,
-      dataTest: "".concat(dataTest, "-tabs")
+      dataTest: `${dataTest}-tabs`
     }, children)));
   }
-
   return /*#__PURE__*/_react.default.createElement("div", {
     className: className,
     "data-test": dataTest
   }, /*#__PURE__*/_react.default.createElement(_tabs.Tabs, {
     fixed: fixed,
-    dataTest: "".concat(dataTest, "-tabs")
+    dataTest: `${dataTest}-tabs`
   }, children));
 };
-
 exports.TabBar = TabBar;
 TabBar.defaultProps = {
   dataTest: 'dhis2-uicore-tabbar'
@@ -53,10 +44,8 @@ TabBar.propTypes = {
   children: _propTypes.default.node,
   className: _propTypes.default.string,
   dataTest: _propTypes.default.string,
-
   /** Fixed tabs fill the width of their container. If false (i.e. fluid), tabs take up an amount of space defined by the tab name. Fluid tabs should be used most of the time. */
   fixed: _propTypes.default.bool,
-
   /** Enables horizontal scrolling for many tabs that don't fit the width of the container */
   scrollable: _propTypes.default.bool
 };