@atlaskit/link-picker 1.11.2 → 1.13.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-picker
 
+## 1.13.0
+
+### Minor Changes
+
+- [`91bd9e3193c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/91bd9e3193c) - add experimental support for UNSAFE_onActivation call for plugins
+
+## 1.12.0
+
+### Minor Changes
+
+- [`2ecb5e8a6d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ecb5e8a6d9) - [ux] introduce horizontal scrolling tabs
+
 ## 1.11.2
 
 ### Patch Changes

package/dist/cjs/services/use-plugins/index.js

@@ -43,7 +43,13 @@ function usePlugins(state, activeTab, plugins) {
       pluginState = _usePluginReducer2[0],
       dispatch = _usePluginReducer2[1];
 
-  var activePlugin = plugins === null || plugins === void 0 ? void 0 : plugins[activeTab];
+  var activePlugin = plugins === null || plugins === void 0 ? void 0 : plugins[activeTab]; // This useEffect block must be called before any other to ensure onActivation is fired at before resolve
+
+  (0, _react.useEffect)(function () {
+    if (activePlugin && activePlugin.UNSAFE_onActivation) {
+      activePlugin.UNSAFE_onActivation();
+    }
+  }, [activePlugin]);
   (0, _react.useEffect)(function () {
     if (!activePlugin) {
       return;

package/dist/cjs/ui/link-picker/index.js

@@ -55,6 +55,8 @@ var _browser = require("./browser");
 
 var _announcer = _interopRequireDefault(require("./announcer"));
 
+var _scrollingTabs = _interopRequireDefault(require("../scrolling-tabs"));
+
 var _linkSearchList = _interopRequireWildcard(require("./link-search-list"));
 
 var _linkSearchError = _interopRequireWildcard(require("./link-search-error"));
@@ -139,7 +141,8 @@ function LinkPicker(_ref) {
       onContentResize = _ref.onContentResize,
       plugins = _ref.plugins,
       initUrl = _ref.url,
-      initDisplayText = _ref.displayText;
+      initDisplayText = _ref.displayText,
+      featureFlags = _ref.featureFlags;
 
   var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
       createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
@@ -350,6 +353,12 @@ function LinkPicker(_ref) {
     size: "medium",
     label: ''
   }));
+  var tabList = (0, _react2.jsx)(_tabs.TabList, null, tabs.map(function (tab) {
+    return (0, _react2.jsx)(_tabs.Tab, {
+      key: tab.tabTitle,
+      testId: testIds.tabItem
+    }, tab.tabTitle);
+  }));
   return (0, _react2.jsx)("form", {
     "data-testid": testIds.linkPicker,
     css: _styled.rootContainerStyles,
@@ -400,12 +409,7 @@ function LinkPicker(_ref) {
     testId: testIds.tabList,
     selected: activeTab,
     onChange: handleTabChange
-  }, (0, _react2.jsx)(_tabs.TabList, null, tabs.map(function (tab) {
-    return (0, _react2.jsx)(_tabs.Tab, {
-      key: tab.tabTitle,
-      testId: testIds.tabItem
-    }, tab.tabTitle);
-  }))), (0, _react2.jsx)(_trackTabViewed.default, {
+  }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? (0, _react2.jsx)(_scrollingTabs.default, null, tabList) : tabList), (0, _react2.jsx)(_trackTabViewed.default, {
     activeTab: activeTab
   })), (0, _react2.jsx)("div", (0, _extends2.default)({
     css: _styled.flexColumnStyles

package/dist/cjs/ui/scrolling-tabs/index.js

@@ -0,0 +1,192 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ScrollingTabList = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+
+var _chevronLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-left"));
+
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
+
+var _scrollingTabs = require("./scrolling-tabs");
+
+var _styles = require("./styles");
+
+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; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function isTouchDevice() {
+  return 'ontouchstart' in window || // eslint-disable-next-line compat/compat
+  navigator.maxTouchPoints > 0;
+}
+
+var initialConditionalButtonsState = {
+  back: false,
+  forward: false
+};
+
+var ScrollingTabList = function ScrollingTabList(props) {
+  var ref = (0, _react.useRef)(null);
+
+  var _useState = (0, _react.useState)(initialConditionalButtonsState),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      conditionalButtons = _useState2[0],
+      setConditionalButtons = _useState2[1];
+
+  var ghost = (0, _react.useMemo)(function () {
+    return (0, _scrollingTabs.createGhost)();
+  }, []);
+  var onTabClick = (0, _react.useCallback)(function (e) {
+    var target = e.currentTarget;
+
+    if (target) {
+      target.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  }, []);
+
+  _react.default.useLayoutEffect(function () {
+    var container = ref.current;
+    var scrollingContainer;
+    var tabs;
+
+    var handleConditionalButtonsChange = function handleConditionalButtonsChange() {
+      var buttons = (0, _scrollingTabs.calculateConditionalButtons)(scrollingContainer, isTouchDevice());
+      setConditionalButtons(buttons);
+    };
+
+    var observerCallback = function observerCallback(mutationList) {
+      var tablist = (0, _scrollingTabs.getTabList)(ref);
+
+      var _iterator = _createForOfIteratorHelper(mutationList),
+          _step;
+
+      try {
+        for (_iterator.s(); !(_step = _iterator.n()).done;) {
+          var mutation = _step.value;
+
+          if (mutation.type === 'childList') {
+            var addedNodes = Array.from(mutation.addedNodes);
+            var found = addedNodes.find(function (node) {
+              return node.getAttribute('role') === 'tab';
+            });
+
+            if (found && tablist) {
+              ghost.remove();
+
+              var _tabs = Array.from(tablist.children);
+
+              _tabs.forEach(function (tab) {
+                tab.removeEventListener('click', onTabClick);
+                tab.addEventListener('click', onTabClick);
+              });
+
+              tablist.appendChild(ghost);
+              handleConditionalButtonsChange();
+            }
+          }
+        }
+      } catch (err) {
+        _iterator.e(err);
+      } finally {
+        _iterator.f();
+      }
+    };
+
+    var observer = new MutationObserver(observerCallback);
+
+    if (container) {
+      var tablist = (0, _scrollingTabs.getTabList)(ref);
+      scrollingContainer = tablist === null || tablist === void 0 ? void 0 : tablist.parentElement;
+      observer.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true
+      });
+
+      if (scrollingContainer instanceof HTMLElement && tablist) {
+        tablist.appendChild(ghost);
+        tabs = Array.from(tablist.children);
+        tabs.forEach(function (tab) {
+          return tab.addEventListener('click', onTabClick);
+        });
+        handleConditionalButtonsChange();
+        scrollingContainer.addEventListener('scroll', handleConditionalButtonsChange);
+      }
+
+      return function () {
+        if (scrollingContainer) {
+          scrollingContainer.removeEventListener('scroll', handleConditionalButtonsChange);
+        }
+
+        if (tabs.length) {
+          tabs.forEach(function (tab) {
+            return tab.removeEventListener('click', onTabClick);
+          });
+        }
+      };
+    }
+  }, [onTabClick, ghost, ref]);
+
+  var buttonProps = {
+    appearance: 'subtle',
+    spacing: 'none'
+  };
+  return (0, _react2.jsx)("div", {
+    css: _styles.containerStyles,
+    ref: ref,
+    "data-testid": "scrolling-tabs"
+  }, conditionalButtons.back && (0, _react2.jsx)("div", {
+    className: "back",
+    css: _styles.backButtonStyles
+  }, (0, _react2.jsx)(_button.default, (0, _extends2.default)({
+    "data-test-id": "back"
+  }, buttonProps, {
+    iconBefore: (0, _react2.jsx)(_chevronLeft.default, {
+      label: "back"
+    }),
+    onClick: function onClick() {
+      return (0, _scrollingTabs.scrollBack)(ref);
+    }
+  }))), (0, _react2.jsx)("div", {
+    css: _styles.scrollingContainerStyles
+  }, props.children), conditionalButtons.forward && (0, _react2.jsx)("div", {
+    css: _styles.nextButtonStyles
+  }, (0, _react2.jsx)(_button.default, (0, _extends2.default)({
+    "data-test-id": "forward"
+  }, buttonProps, {
+    iconBefore: (0, _react2.jsx)(_chevronRight.default, {
+      label: "forward"
+    }),
+    onClick: function onClick() {
+      return (0, _scrollingTabs.scrollForward)(ref);
+    }
+  }))));
+};
+
+exports.ScrollingTabList = ScrollingTabList;
+var _default = ScrollingTabList;
+exports.default = _default;

package/dist/cjs/ui/scrolling-tabs/scrolling-tabs.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollForward = exports.scrollBack = exports.getTabList = exports.getContainer = exports.createGhost = exports.calculateConditionalButtons = void 0;
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var BUTTON_SIZE = 24;
+var GUTTER = 48;
+var GHOST_WIDTH = 342 - GUTTER - 40;
+
+var scrollBack = function scrollBack(ref) {
+  moveTabsScroll(ref, findPrevious);
+};
+
+exports.scrollBack = scrollBack;
+
+var scrollForward = function scrollForward(ref) {
+  moveTabsScroll(ref, findNext);
+};
+
+exports.scrollForward = scrollForward;
+
+var calculateConditionalButtons = function calculateConditionalButtons(container, hideButtons) {
+  var initialState = {
+    back: false,
+    forward: false
+  };
+
+  if (!container || hideButtons) {
+    return initialState;
+  }
+
+  var maxScrollValue = container.scrollWidth - container.clientWidth;
+  return {
+    back: container.scrollLeft > 0,
+    forward: container.scrollLeft < maxScrollValue - GHOST_WIDTH
+  };
+};
+
+exports.calculateConditionalButtons = calculateConditionalButtons;
+
+var createGhost = function createGhost() {
+  var ghost = document.createElement('div');
+  ghost.setAttribute('id', 'scrolling-tabs-ghost');
+  ghost.style.minWidth = "".concat(GHOST_WIDTH, "px");
+  ghost.style.pointerEvents = 'none';
+  return ghost;
+};
+
+exports.createGhost = createGhost;
+
+var moveTabsScroll = function moveTabsScroll(ref, findFn) {
+  var container = getContainer(ref);
+
+  if (container) {
+    var tablist = container.children[0];
+
+    var _tabs = (0, _toConsumableArray2.default)(tablist.children);
+
+    if (_tabs.length > 0) {
+      var target = findFn(container, _tabs);
+
+      if (target) {
+        var left = container.scrollLeft + target.getBoundingClientRect().left - container.getBoundingClientRect().left - BUTTON_SIZE;
+        scrollTo(container, left);
+      }
+    }
+  }
+};
+
+var scrollTo = function scrollTo(container, left) {
+  container.scrollTo({
+    left: left
+  });
+};
+
+var getTabList = function getTabList(ref) {
+  var _ref$current;
+
+  return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('[role="tablist"]');
+};
+
+exports.getTabList = getTabList;
+
+var getContainer = function getContainer(ref) {
+  var _getTabList;
+
+  return (_getTabList = getTabList(ref)) === null || _getTabList === void 0 ? void 0 : _getTabList.parentElement;
+};
+
+exports.getContainer = getContainer;
+
+var findPrevious = function findPrevious(container, tabs) {
+  var previousTabs = tabs.filter(function (tab) {
+    var _ref = [container.getBoundingClientRect(), tab.getBoundingClientRect()],
+        containerRect = _ref[0],
+        tabRect = _ref[1];
+    var containerArea = containerRect.left + container.scrollLeft - GUTTER,
+        tabArea = container.scrollLeft + tabRect.left + tabRect.width;
+    return containerArea > tabArea;
+  });
+
+  if (previousTabs.length < 3) {
+    return previousTabs[0];
+  }
+
+  return previousTabs[previousTabs.length - 1];
+};
+
+var findNext = function findNext(container, tabs) {
+  var containerRect = container.getBoundingClientRect();
+  return tabs.find(function (tab) {
+    var tabRect = tab.getBoundingClientRect();
+    var containerArea = container.clientWidth + containerRect.left - GUTTER,
+        tabArea = tabRect.left + tabRect.width;
+    return containerArea < tabArea;
+  });
+};

package/dist/cjs/ui/scrolling-tabs/styles.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollingContainerStyles = exports.nextButtonStyles = exports.containerStyles = exports.buttonContainerStyles = exports.backButtonStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _tokens = require("@atlaskit/tokens");
+
+var _colors = require("@atlaskit/theme/colors");
+
+var scrollingContainerStyles = (0, _react.css)({
+  overflowX: 'auto',
+  scrollBehavior: 'smooth',
+  scrollPadding: '0 24px',
+  scrollbarWidth: 'none',
+  '&::-webkit-scrollbar': {
+    display: 'none'
+  },
+  '&::before': {
+    content: '""',
+    borderRadius: 2,
+    bottom: 0,
+    margin: 0,
+    position: 'absolute',
+    width: 'inherit',
+    left: 8,
+    right: 8,
+    height: 2,
+    backgroundColor: (0, _tokens.token)('color.border', _colors.N30)
+  }
+});
+exports.scrollingContainerStyles = scrollingContainerStyles;
+var containerStyles = (0, _react.css)({
+  position: 'relative',
+  '[role="tablist"]': {
+    '&::before': {
+      display: 'none'
+    }
+  },
+  // Overrides Atlaskit tabs styles to stop overflowing with ellipsis
+  '[role="tab"]': {
+    overflow: 'unset !important',
+    textOverflow: 'unset !important'
+  }
+});
+exports.containerStyles = containerStyles;
+var buttonContainerStyles = (0, _react.css)({
+  position: 'absolute',
+  top: 4,
+  zIndex: 999,
+  backgroundColor: (0, _tokens.token)('elevation.surface', _colors.N0)
+});
+exports.buttonContainerStyles = buttonContainerStyles;
+var backButtonStyles = (0, _react.css)([buttonContainerStyles, {
+  left: 0
+}]);
+exports.backButtonStyles = backButtonStyles;
+var nextButtonStyles = (0, _react.css)([buttonContainerStyles, {
+  right: 0
+}]);
+exports.nextButtonStyles = nextButtonStyles;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/link-picker",
-	"version": "1.11.2",
+	"version": "1.13.0",
 	"sideEffects": false
 }

package/dist/es2019/services/use-plugins/index.js

@@ -12,7 +12,13 @@ export function usePlugins(state, activeTab, plugins) {
   } = useAnalyticsEvents();
   const [retries, setRetries] = useState(0);
   const [pluginState, dispatch] = usePluginReducer();
-  const activePlugin = plugins === null || plugins === void 0 ? void 0 : plugins[activeTab];
+  const activePlugin = plugins === null || plugins === void 0 ? void 0 : plugins[activeTab]; // This useEffect block must be called before any other to ensure onActivation is fired at before resolve
+
+  useEffect(() => {
+    if (activePlugin && activePlugin.UNSAFE_onActivation) {
+      activePlugin.UNSAFE_onActivation();
+    }
+  }, [activePlugin]);
   useEffect(() => {
     if (!activePlugin) {
       return;

package/dist/es2019/ui/link-picker/index.js

@@ -20,6 +20,7 @@ import TextInput, { testIds as textFieldTestIds } from './text-input';
 import { rootContainerStyles, searchIconStyles, tabsWrapperStyles, flexColumnStyles, formFooterMargin } from './styled';
 import { browser } from './browser';
 import Announcer from './announcer';
+import ScrollingTabList from '../scrolling-tabs';
 import LinkSearchList, { testIds as listTestIds } from './link-search-list';
 import LinkSearchError, { testIds as searchErrorTestIds } from './link-search-error';
 import FormFooter, { testIds as formFooterTestIds } from './form-footer';
@@ -86,7 +87,8 @@ function LinkPicker({
   onContentResize,
   plugins,
   url: initUrl,
-  displayText: initDisplayText
+  displayText: initDisplayText,
+  featureFlags
 }) {
   var _errorFallback;
 
@@ -296,6 +298,10 @@ function LinkPicker({
     size: "medium",
     label: ''
   }));
+  const tabList = jsx(TabList, null, tabs.map(tab => jsx(Tab, {
+    key: tab.tabTitle,
+    testId: testIds.tabItem
+  }, tab.tabTitle)));
   return jsx("form", {
     "data-testid": testIds.linkPicker,
     css: rootContainerStyles,
@@ -346,10 +352,7 @@ function LinkPicker({
     testId: testIds.tabList,
     selected: activeTab,
     onChange: handleTabChange
-  }, jsx(TabList, null, tabs.map(tab => jsx(Tab, {
-    key: tab.tabTitle,
-    testId: testIds.tabItem
-  }, tab.tabTitle)))), jsx(TrackTabViewed, {
+  }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? jsx(ScrollingTabList, null, tabList) : tabList), jsx(TrackTabViewed, {
     activeTab: activeTab
   })), jsx("div", _extends({
     css: flexColumnStyles

package/dist/es2019/ui/scrolling-tabs/index.js

@@ -0,0 +1,127 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import React, { useRef, useMemo, useState, useCallback } from 'react';
+import { jsx } from '@emotion/react';
+import Button from '@atlaskit/button';
+import ChevronLeftIcon from '@atlaskit/icon/glyph/chevron-left';
+import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
+import { scrollBack, scrollForward, calculateConditionalButtons, getTabList, createGhost } from './scrolling-tabs';
+import { containerStyles, scrollingContainerStyles, nextButtonStyles, backButtonStyles } from './styles';
+
+function isTouchDevice() {
+  return 'ontouchstart' in window || // eslint-disable-next-line compat/compat
+  navigator.maxTouchPoints > 0;
+}
+
+const initialConditionalButtonsState = {
+  back: false,
+  forward: false
+};
+export const ScrollingTabList = props => {
+  const ref = useRef(null);
+  const [conditionalButtons, setConditionalButtons] = useState(initialConditionalButtonsState);
+  const ghost = useMemo(() => createGhost(), []);
+  const onTabClick = useCallback(e => {
+    const target = e.currentTarget;
+
+    if (target) {
+      target.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  }, []);
+  React.useLayoutEffect(() => {
+    const container = ref.current;
+    let scrollingContainer;
+    let tabs;
+
+    const handleConditionalButtonsChange = () => {
+      const buttons = calculateConditionalButtons(scrollingContainer, isTouchDevice());
+      setConditionalButtons(buttons);
+    };
+
+    const observerCallback = mutationList => {
+      const tablist = getTabList(ref);
+
+      for (const mutation of mutationList) {
+        if (mutation.type === 'childList') {
+          const addedNodes = Array.from(mutation.addedNodes);
+          const found = addedNodes.find(node => node.getAttribute('role') === 'tab');
+
+          if (found && tablist) {
+            ghost.remove();
+            const tabs = Array.from(tablist.children);
+            tabs.forEach(tab => {
+              tab.removeEventListener('click', onTabClick);
+              tab.addEventListener('click', onTabClick);
+            });
+            tablist.appendChild(ghost);
+            handleConditionalButtonsChange();
+          }
+        }
+      }
+    };
+
+    const observer = new MutationObserver(observerCallback);
+
+    if (container) {
+      const tablist = getTabList(ref);
+      scrollingContainer = tablist === null || tablist === void 0 ? void 0 : tablist.parentElement;
+      observer.observe(container, {
+        attributes: false,
+        childList: true,
+        subtree: true
+      });
+
+      if (scrollingContainer instanceof HTMLElement && tablist) {
+        tablist.appendChild(ghost);
+        tabs = Array.from(tablist.children);
+        tabs.forEach(tab => tab.addEventListener('click', onTabClick));
+        handleConditionalButtonsChange();
+        scrollingContainer.addEventListener('scroll', handleConditionalButtonsChange);
+      }
+
+      return () => {
+        if (scrollingContainer) {
+          scrollingContainer.removeEventListener('scroll', handleConditionalButtonsChange);
+        }
+
+        if (tabs.length) {
+          tabs.forEach(tab => tab.removeEventListener('click', onTabClick));
+        }
+      };
+    }
+  }, [onTabClick, ghost, ref]);
+  const buttonProps = {
+    appearance: 'subtle',
+    spacing: 'none'
+  };
+  return jsx("div", {
+    css: containerStyles,
+    ref: ref,
+    "data-testid": "scrolling-tabs"
+  }, conditionalButtons.back && jsx("div", {
+    className: "back",
+    css: backButtonStyles
+  }, jsx(Button, _extends({
+    "data-test-id": "back"
+  }, buttonProps, {
+    iconBefore: jsx(ChevronLeftIcon, {
+      label: "back"
+    }),
+    onClick: () => scrollBack(ref)
+  }))), jsx("div", {
+    css: scrollingContainerStyles
+  }, props.children), conditionalButtons.forward && jsx("div", {
+    css: nextButtonStyles
+  }, jsx(Button, _extends({
+    "data-test-id": "forward"
+  }, buttonProps, {
+    iconBefore: jsx(ChevronRightIcon, {
+      label: "forward"
+    }),
+    onClick: () => scrollForward(ref)
+  }))));
+};
+export default ScrollingTabList;