@atlaskit/link-picker 1.11.1 → 1.12.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-picker
 
+## 1.12.0
+
+### Minor Changes
+
+- [`2ecb5e8a6d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2ecb5e8a6d9) - [ux] introduce horizontal scrolling tabs
+
+## 1.11.2
+
+### Patch Changes
+
+- [`841110b3cf0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/841110b3cf0) - Adds tab attribute to analytics context
+
 ## 1.11.1
 
 ### Patch Changes

package/dist/cjs/analytics.codegen.js

@@ -10,7 +10,7 @@ exports.default = void 0;
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::05d8b1c9e46066efd0d11fa9d19c32a9>>
+ * @codegen <<SignedSource::c0fb3bb39f50f3a7c35ebd90e8903280>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 function createEventPayload(eventKey, attributes) {

package/dist/cjs/common/analytics/context.js

@@ -38,7 +38,8 @@ var DEFAULT_CONTEXT_ATTRIBUTES = {
   linkFieldContentInputMethod: null,
   linkFieldContentInputSource: null,
   displayTextFieldContent: null,
-  displayTextFieldContentInputMethod: null
+  displayTextFieldContentInputMethod: null,
+  tab: null
 };
 
 var LinkPickerAnalyticsContext = /*#__PURE__*/_react.default.createContext({
@@ -50,14 +51,19 @@ var LinkPickerAnalyticsContext = /*#__PURE__*/_react.default.createContext({
 });
 /**
  * TODO: Should we hook this into the form state/reducer?
+ * This function continues to duplicate / assume logic that runs in the picker
  */
 
 
 var contextAttributesFromIntialProps = function contextAttributesFromIntialProps(props) {
+  var _props$plugins$0$tabK, _props$plugins, _props$plugins$;
+
   return {
     linkState: (0, _url.normalizeUrl)(props.url) ? 'editLink' : 'newLink',
     linkFieldContent: (0, _url.normalizeUrl)(props.url) ? 'url' : null,
-    displayTextFieldContent: Boolean(props.displayText) ? 'text_string' : null
+    displayTextFieldContent: Boolean(props.displayText) ? 'text_string' : null,
+    // TODO: Assumes we alway load the first plugin as the current tab
+    tab: (_props$plugins$0$tabK = (_props$plugins = props.plugins) === null || _props$plugins === void 0 ? void 0 : (_props$plugins$ = _props$plugins[0]) === null || _props$plugins$ === void 0 ? void 0 : _props$plugins$.tabKey) !== null && _props$plugins$0$tabK !== void 0 ? _props$plugins$0$tabK : null
   };
 };
 /**

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

@@ -47,7 +47,7 @@ var _useFixHeight = _interopRequireDefault(require("../../controllers/use-fix-he
 
 var _messages = require("./messages");
 
-var _textInput = _interopRequireDefault(require("./text-input"));
+var _textInput = _interopRequireWildcard(require("./text-input"));
 
 var _styled = require("./styled");
 
@@ -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"));
@@ -63,9 +65,9 @@ var _formFooter = _interopRequireWildcard(require("./form-footer"));
 
 var _utils = require("./utils");
 
-var _experiences = require("../../common/analytics/experiences");
+var _trackTabViewed = _interopRequireDefault(require("./track-tab-viewed"));
 
-var _sessionProvider = require("../../controllers/session-provider");
+var _trackMount = _interopRequireDefault(require("./track-mount"));
 
 var _excluded = ["component"];
 
@@ -80,15 +82,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var RECENT_SEARCH_LIST_SIZE = 5;
 exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
 
-var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({
   linkPickerRoot: 'link-picker-root',
   linkPicker: 'link-picker',
   urlInputField: 'link-url',
   textInputField: 'link-text',
   searchIcon: 'link-picker-search-icon'
-}, _formFooter.testIds), _linkSearchError.testIds), _linkSearchList.testIds), {}, {
-  clearUrlButton: 'clear-text',
-  urlError: 'link-error',
+}, _formFooter.testIds), _linkSearchError.testIds), _linkSearchList.testIds), _textInput.testIds), {}, {
   tabList: 'link-picker-tabs',
   tabItem: 'link-picker-tab'
 });
@@ -141,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;
@@ -182,20 +183,6 @@ function LinkPicker(_ref) {
       trackAttribute = _useLinkPickerAnalyti.trackAttribute,
       getAttributes = _useLinkPickerAnalyti.getAttributes;
 
-  var linkPickerSessionId = (0, _sessionProvider.useLinkPickerSessionId)();
-  (0, _react.useLayoutEffect)(function () {
-    (0, _experiences.succeedUfoExperience)(_experiences.ufoExperience.mounted, linkPickerSessionId);
-  }, [linkPickerSessionId]);
-  (0, _react.useEffect)(function () {
-    // Anything in here is fired on component mount.
-    var event = createAnalyticsEvent((0, _analytics.default)('ui.inlineDialog.viewed.linkPicker', {}));
-    event.fire(_constants.ANALYTICS_CHANNEL);
-    return function () {
-      // Anything in here is fired on component unmount.
-      var event = createAnalyticsEvent((0, _analytics.default)('ui.inlineDialog.closed.linkPicker', {}));
-      event.fire(_constants.ANALYTICS_CHANNEL);
-    };
-  }, [createAnalyticsEvent]);
   (0, _react.useLayoutEffect)(function () {
     if (onContentResize) {
       onContentResize();
@@ -340,6 +327,17 @@ function LinkPicker(_ref) {
       invalidUrl: true
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
+  var handleTabChange = (0, _react.useCallback)(function (activeTab) {
+    var _plugins$activeTab$ta, _plugins$activeTab;
+
+    dispatch({
+      selectedIndex: -1,
+      activeIndex: -1,
+      invalidUrl: false,
+      activeTab: activeTab
+    });
+    trackAttribute('tab', (_plugins$activeTab$ta = plugins === null || plugins === void 0 ? void 0 : (_plugins$activeTab = plugins[activeTab]) === null || _plugins$activeTab === void 0 ? void 0 : _plugins$activeTab.tabKey) !== null && _plugins$activeTab$ta !== void 0 ? _plugins$activeTab$ta : null);
+  }, [dispatch, plugins, trackAttribute]);
   var messages = isActivePlugin ? _messages.searchMessages : _messages.linkMessages;
   var screenReaderDescriptionId = 'search-recent-links-field-description';
   var linkSearchListId = 'link-picker-search-list';
@@ -355,11 +353,17 @@ 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,
     onSubmit: handleSubmit
-  }, screenReaderText && (0, _react2.jsx)(_announcer.default, {
+  }, (0, _react2.jsx)(_trackMount.default, null), screenReaderText && (0, _react2.jsx)(_announcer.default, {
     ariaLive: "assertive",
     text: screenReaderText,
     ariaRelevant: "additions",
@@ -403,20 +407,11 @@ function LinkPicker(_ref) {
   }, (0, _react2.jsx)(_tabs.default, {
     id: testIds.tabList,
     testId: testIds.tabList,
-    onChange: function onChange(activeTab) {
-      return dispatch({
-        selectedIndex: -1,
-        activeIndex: -1,
-        invalidUrl: false,
-        activeTab: activeTab
-      });
-    }
-  }, (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)("div", (0, _extends2.default)({
+    selected: activeTab,
+    onChange: handleTabChange
+  }, 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
   }, fixListHeightProps), !error && (0, _react2.jsx)(_linkSearchList.default, {
     id: linkSearchListId,
@@ -428,7 +423,6 @@ function LinkPicker(_ref) {
     onSelect: handleSelected,
     onMouseEnter: handleMouseEnterResultItem,
     onMouseLeave: handleMouseLeaveResultItem,
-    error: error,
     hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length)
   }), error && ((_errorFallback = errorFallback === null || errorFallback === void 0 ? void 0 : errorFallback(error, retry)) !== null && _errorFallback !== void 0 ? _errorFallback : (0, _react2.jsx)(_linkSearchError.default, null)))), (0, _react2.jsx)(_formFooter.default, {
     css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? _styled.formFooterMargin : undefined,

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

@@ -15,7 +15,7 @@ var _transformTimeStamp = require("../transformTimeStamp");
 
 var _styled = require("./styled");
 
-var _ = require("../");
+var _ = require("..");
 
 /** @jsx jsx */
 var LinkSearchListItem = function LinkSearchListItem(_ref) {

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.testIds = exports.default = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -25,11 +25,14 @@ var _selectClear = _interopRequireDefault(require("@atlaskit/icon/glyph/select-c
 
 var _utils = require("../utils");
 
-var _ = require("../");
-
 var _styled = require("./styled");
 
 var _excluded = ["name", "label", "autoFocus", "onRedo", "onUndo", "onKeyDown", "onClear", "clearLabel", "error"];
+var testIds = {
+  urlError: 'link-error',
+  clearUrlButton: 'clear-text'
+};
+exports.testIds = testIds;
 
 var TextInput = function TextInput(_ref) {
   var name = _ref.name,
@@ -82,7 +85,7 @@ var TextInput = function TextInput(_ref) {
     type: "button",
     css: _styled.clearTextButtonStyles,
     onClick: handleClear,
-    "data-testid": _.testIds.clearUrlButton
+    "data-testid": testIds.clearUrlButton
   }, (0, _react2.jsx)(_selectClear.default, {
     size: "medium",
     label: clearLabel || ''
@@ -100,7 +103,7 @@ var TextInput = function TextInput(_ref) {
       elemAfterInput: clearText,
       isInvalid: !!error
     })), error && (0, _react2.jsx)(_form.ErrorMessage, {
-      testId: _.testIds.urlError
+      testId: testIds.urlError
     }, error));
   }));
 };

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

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _experiences = require("../../../common/analytics/experiences");
+
+var _analytics = _interopRequireDefault(require("../../../analytics.codegen"));
+
+var _constants = require("../../../common/constants");
+
+var _sessionProvider = require("../../../controllers/session-provider");
+
+/** @jsx jsx */
+
+/**
+ * UFO + Analytics tracking for component mount (and unmount)
+ */
+function TrackMount() {
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  var linkPickerSessionId = (0, _sessionProvider.useLinkPickerSessionId)();
+  (0, _react.useLayoutEffect)(function () {
+    (0, _experiences.succeedUfoExperience)(_experiences.ufoExperience.mounted, linkPickerSessionId);
+  }, [linkPickerSessionId]);
+  (0, _react.useLayoutEffect)(function () {
+    // Anything in here is fired on component mount.
+    createAnalyticsEvent((0, _analytics.default)('ui.inlineDialog.viewed.linkPicker', {})).fire(_constants.ANALYTICS_CHANNEL);
+    return function () {
+      // Anything in here is fired on component unmount.
+      createAnalyticsEvent((0, _analytics.default)('ui.inlineDialog.closed.linkPicker', {})).fire(_constants.ANALYTICS_CHANNEL);
+    };
+  }, [createAnalyticsEvent]);
+  return null;
+}
+
+var _default = TrackMount;
+exports.default = _default;

package/dist/cjs/ui/link-picker/track-tab-viewed/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _analyticsNext = require("@atlaskit/analytics-next");
+
+var _analytics = _interopRequireDefault(require("../../../analytics.codegen"));
+
+var _constants = require("../../../common/constants");
+
+/** @jsx jsx */
+function TrackTabViewed(_ref) {
+  var activeTab = _ref.activeTab;
+
+  var _useAnalyticsEvents = (0, _analyticsNext.useAnalyticsEvents)(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  (0, _react.useLayoutEffect)(function () {
+    createAnalyticsEvent((0, _analytics.default)('ui.tab.viewed', {})).fire(_constants.ANALYTICS_CHANNEL);
+  }, [activeTab, createAnalyticsEvent]);
+  return null;
+}
+
+var _default = TrackTabViewed;
+exports.default = _default;

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