@atlaskit/link-picker 1.11.1 → 1.12.0

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

@@ -9,7 +9,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 /** @jsx jsx */
-import { Fragment, useCallback, useEffect, useLayoutEffect, useReducer, memo } from 'react';
+import { Fragment, useCallback, useLayoutEffect, useReducer, memo } from 'react';
 import { jsx } from '@emotion/react';
 import { useIntl, FormattedMessage } from 'react-intl-next';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
@@ -24,26 +24,25 @@ import { usePlugins } from '../../services/use-plugins';
 import { useSearchQuery } from '../../services/use-search-query';
 import useFixHeight from '../../controllers/use-fix-height';
 import { searchMessages, linkMessages, formMessages, linkTextMessages } from './messages';
-import TextInput from './text-input';
+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';
 import { getDataSource, getScreenReaderText } from './utils';
-import { succeedUfoExperience, ufoExperience } from '../../common/analytics/experiences';
-import { useLinkPickerSessionId } from '../../controllers/session-provider';
+import TrackTabViewed from './track-tab-viewed';
+import TrackMount from './track-mount';
 export var RECENT_SEARCH_LIST_SIZE = 5;
-export var testIds = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+export 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'
-}, formFooterTestIds), searchErrorTestIds), listTestIds), {}, {
-  clearUrlButton: 'clear-text',
-  urlError: 'link-error',
+}, formFooterTestIds), searchErrorTestIds), listTestIds), textFieldTestIds), {}, {
   tabList: 'link-picker-tabs',
   tabItem: 'link-picker-tab'
 });
@@ -94,7 +93,8 @@ function LinkPicker(_ref) {
       onContentResize = _ref.onContentResize,
       plugins = _ref.plugins,
       initUrl = _ref.url,
-      initDisplayText = _ref.displayText;
+      initDisplayText = _ref.displayText,
+      featureFlags = _ref.featureFlags;
 
   var _useAnalyticsEvents = useAnalyticsEvents(),
       createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
@@ -135,20 +135,6 @@ function LinkPicker(_ref) {
       trackAttribute = _useLinkPickerAnalyti.trackAttribute,
       getAttributes = _useLinkPickerAnalyti.getAttributes;
 
-  var linkPickerSessionId = useLinkPickerSessionId();
-  useLayoutEffect(function () {
-    succeedUfoExperience(ufoExperience.mounted, linkPickerSessionId);
-  }, [linkPickerSessionId]);
-  useEffect(function () {
-    // Anything in here is fired on component mount.
-    var event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {}));
-    event.fire(ANALYTICS_CHANNEL);
-    return function () {
-      // Anything in here is fired on component unmount.
-      var event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.closed.linkPicker', {}));
-      event.fire(ANALYTICS_CHANNEL);
-    };
-  }, [createAnalyticsEvent]);
   useLayoutEffect(function () {
     if (onContentResize) {
       onContentResize();
@@ -293,6 +279,17 @@ function LinkPicker(_ref) {
       invalidUrl: true
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
+  var handleTabChange = 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 ? searchMessages : linkMessages;
   var screenReaderDescriptionId = 'search-recent-links-field-description';
   var linkSearchListId = 'link-picker-search-list';
@@ -308,11 +305,17 @@ function LinkPicker(_ref) {
     size: "medium",
     label: ''
   }));
+  var tabList = jsx(TabList, null, tabs.map(function (tab) {
+    return jsx(Tab, {
+      key: tab.tabTitle,
+      testId: testIds.tabItem
+    }, tab.tabTitle);
+  }));
   return jsx("form", {
     "data-testid": testIds.linkPicker,
     css: rootContainerStyles,
     onSubmit: handleSubmit
-  }, screenReaderText && jsx(Announcer, {
+  }, jsx(TrackMount, null), screenReaderText && jsx(Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
     ariaRelevant: "additions",
@@ -356,20 +359,11 @@ function LinkPicker(_ref) {
   }, jsx(Tabs, {
     id: testIds.tabList,
     testId: testIds.tabList,
-    onChange: function onChange(activeTab) {
-      return dispatch({
-        selectedIndex: -1,
-        activeIndex: -1,
-        invalidUrl: false,
-        activeTab: activeTab
-      });
-    }
-  }, jsx(TabList, null, tabs.map(function (tab) {
-    return jsx(Tab, {
-      key: tab.tabTitle,
-      testId: testIds.tabItem
-    }, tab.tabTitle);
-  })))), jsx("div", _extends({
+    selected: activeTab,
+    onChange: handleTabChange
+  }, featureFlags !== null && featureFlags !== void 0 && featureFlags.scrollingTabs ? jsx(ScrollingTabList, null, tabList) : tabList), jsx(TrackTabViewed, {
+    activeTab: activeTab
+  })), jsx("div", _extends({
     css: flexColumnStyles
   }, fixListHeightProps), !error && jsx(LinkSearchList, {
     id: linkSearchListId,
@@ -381,7 +375,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 : jsx(LinkSearchError, null)))), jsx(FormFooter, {
     css: !queryState || !(plugins !== null && plugins !== void 0 && plugins.length) ? formFooterMargin : undefined,

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

@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { transformTimeStamp } from '../transformTimeStamp';
 import { itemNameStyles, itemIconStyles, listItemContextStyles, listItemNameStyles, composeListItemStyles, imgStyles, listItemContainerStyles, listItemContainerInnerStyles } from './styled';
-import { testIds } from '../';
+import { testIds } from '..';
 
 var LinkSearchListItem = function LinkSearchListItem(_ref) {
   var item = _ref.item,

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

@@ -10,8 +10,11 @@ import Tooltip from '@atlaskit/tooltip';
 import Textfield from '@atlaskit/textfield';
 import Selectclear from '@atlaskit/icon/glyph/select-clear';
 import { isRedoEvent, isUndoEvent } from '../utils';
-import { testIds } from '../';
 import { clearTextButtonStyles, fieldStyles } from './styled';
+export var testIds = {
+  urlError: 'link-error',
+  clearUrlButton: 'clear-text'
+};
 
 var TextInput = function TextInput(_ref) {
   var name = _ref.name,

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

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+import { useLayoutEffect } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import { succeedUfoExperience, ufoExperience } from '../../../common/analytics/experiences';
+import createEventPayload from '../../../analytics.codegen';
+import { ANALYTICS_CHANNEL } from '../../../common/constants';
+import { useLinkPickerSessionId } from '../../../controllers/session-provider';
+/**
+ * UFO + Analytics tracking for component mount (and unmount)
+ */
+
+function TrackMount() {
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  var linkPickerSessionId = useLinkPickerSessionId();
+  useLayoutEffect(function () {
+    succeedUfoExperience(ufoExperience.mounted, linkPickerSessionId);
+  }, [linkPickerSessionId]);
+  useLayoutEffect(function () {
+    // Anything in here is fired on component mount.
+    createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {})).fire(ANALYTICS_CHANNEL);
+    return function () {
+      // Anything in here is fired on component unmount.
+      createAnalyticsEvent(createEventPayload('ui.inlineDialog.closed.linkPicker', {})).fire(ANALYTICS_CHANNEL);
+    };
+  }, [createAnalyticsEvent]);
+  return null;
+}
+
+export default TrackMount;

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

@@ -0,0 +1,19 @@
+/** @jsx jsx */
+import { useLayoutEffect } from 'react';
+import { useAnalyticsEvents } from '@atlaskit/analytics-next';
+import createEventPayload from '../../../analytics.codegen';
+import { ANALYTICS_CHANNEL } from '../../../common/constants';
+
+function TrackTabViewed(_ref) {
+  var activeTab = _ref.activeTab;
+
+  var _useAnalyticsEvents = useAnalyticsEvents(),
+      createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
+
+  useLayoutEffect(function () {
+    createAnalyticsEvent(createEventPayload('ui.tab.viewed', {})).fire(ANALYTICS_CHANNEL);
+  }, [activeTab, createAnalyticsEvent]);
+  return null;
+}
+
+export default TrackTabViewed;

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

@@ -0,0 +1,165 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+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; }
+
+/** @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;
+}
+
+var initialConditionalButtonsState = {
+  back: false,
+  forward: false
+};
+export var ScrollingTabList = function ScrollingTabList(props) {
+  var ref = useRef(null);
+
+  var _useState = useState(initialConditionalButtonsState),
+      _useState2 = _slicedToArray(_useState, 2),
+      conditionalButtons = _useState2[0],
+      setConditionalButtons = _useState2[1];
+
+  var ghost = useMemo(function () {
+    return createGhost();
+  }, []);
+  var onTabClick = useCallback(function (e) {
+    var target = e.currentTarget;
+
+    if (target) {
+      target.scrollIntoView({
+        behavior: 'smooth'
+      });
+    }
+  }, []);
+  React.useLayoutEffect(function () {
+    var container = ref.current;
+    var scrollingContainer;
+    var tabs;
+
+    var handleConditionalButtonsChange = function handleConditionalButtonsChange() {
+      var buttons = calculateConditionalButtons(scrollingContainer, isTouchDevice());
+      setConditionalButtons(buttons);
+    };
+
+    var observerCallback = function observerCallback(mutationList) {
+      var tablist = 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 = 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 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: function onClick() {
+      return 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: function onClick() {
+      return scrollForward(ref);
+    }
+  }))));
+};
+export default ScrollingTabList;

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

@@ -0,0 +1,96 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+var BUTTON_SIZE = 24;
+var GUTTER = 48;
+var GHOST_WIDTH = 342 - GUTTER - 40;
+export var scrollBack = function scrollBack(ref) {
+  moveTabsScroll(ref, findPrevious);
+};
+export var scrollForward = function scrollForward(ref) {
+  moveTabsScroll(ref, findNext);
+};
+export 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
+  };
+};
+export 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;
+};
+
+var moveTabsScroll = function moveTabsScroll(ref, findFn) {
+  var container = getContainer(ref);
+
+  if (container) {
+    var tablist = container.children[0];
+
+    var _tabs = _toConsumableArray(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
+  });
+};
+
+export 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"]');
+};
+export var getContainer = function getContainer(ref) {
+  var _getTabList;
+
+  return (_getTabList = getTabList(ref)) === null || _getTabList === void 0 ? void 0 : _getTabList.parentElement;
+};
+
+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/esm/ui/scrolling-tabs/styles.js

@@ -0,0 +1,49 @@
+import { css } from '@emotion/react';
+import { token } from '@atlaskit/tokens';
+import { N0, N30 } from '@atlaskit/theme/colors';
+export var scrollingContainerStyles = 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: token('color.border', N30)
+  }
+});
+export var containerStyles = 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'
+  }
+});
+export var buttonContainerStyles = css({
+  position: 'absolute',
+  top: 4,
+  zIndex: 999,
+  backgroundColor: token('elevation.surface', N0)
+});
+export var backButtonStyles = css([buttonContainerStyles, {
+  left: 0
+}]);
+export var nextButtonStyles = css([buttonContainerStyles, {
+  right: 0
+}]);

package/dist/esm/version.json

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

package/dist/types/analytics.codegen.d.ts

@@ -3,7 +3,7 @@
  *
  * Generates analytics utilities from the package analytics spec yaml
  *
- * @codegen <<SignedSource::05d8b1c9e46066efd0d11fa9d19c32a9>>
+ * @codegen <<SignedSource::c0fb3bb39f50f3a7c35ebd90e8903280>>
  * @codegenCommand yarn workspace @atlaskit/link-picker run codegen-analytics
  */
 export declare type PackageMetaDataType = {
@@ -19,12 +19,14 @@ export declare type LinkPickerAnalyticsContextType = {
     linkFieldContentInputSource: string | null;
     displayTextFieldContent: 'text_string' | null;
     displayTextFieldContentInputMethod: 'manual' | 'paste' | null;
+    tab: string | null;
 };
 export declare type FormSubmittedLinkPickerAttributesType = {};
 export declare type InlineDialogViewedLinkPickerAttributesType = {};
 export declare type InlineDialogClosedLinkPickerAttributesType = {};
 export declare type TextFieldUpdatedLinkFieldAttributesType = {};
 export declare type TextFieldUpdatedDisplayTextFieldAttributesType = {};
+export declare type TabViewedAttributesType = {};
 export declare type LinkPickerUnhandledErrorCaughtAttributesType = {
     browserInfo: string;
     error: string;
@@ -39,6 +41,7 @@ declare type AnalyticsEventAttributes = {
     'ui.inlineDialog.closed.linkPicker': InlineDialogClosedLinkPickerAttributesType;
     'ui.textField.updated.linkField': TextFieldUpdatedLinkFieldAttributesType;
     'ui.textField.updated.displayTextField': TextFieldUpdatedDisplayTextFieldAttributesType;
+    'ui.tab.viewed': TabViewedAttributesType;
     'ui.linkPicker.unhandledErrorCaught': LinkPickerUnhandledErrorCaughtAttributesType;
     'operational.resultsResolve.failed': ResultsResolveFailedAttributesType;
 };

package/dist/types/ui/link-picker/index.d.ts

@@ -3,10 +3,10 @@ import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { LinkInputType, LinkPickerPlugin } from '../types';
 export declare const RECENT_SEARCH_LIST_SIZE = 5;
 export declare const testIds: {
-    readonly clearUrlButton: "clear-text";
-    readonly urlError: "link-error";
     readonly tabList: "link-picker-tabs";
     readonly tabItem: "link-picker-tab";
+    readonly urlError: string;
+    readonly clearUrlButton: string;
     readonly resultListTitle: string;
     readonly searchResultItem: string;
     readonly searchResultList: string;
@@ -61,6 +61,7 @@ export interface LinkPickerProps {
     component?: React.ComponentType<Partial<LinkPickerProps> & {
         children: React.ReactElement;
     }>;
+    featureFlags?: Record<string, unknown>;
 }
 export interface PickerState {
     selectedIndex: number;

package/dist/types/ui/link-picker/link-search-list/index.d.ts

@@ -36,7 +36,6 @@ export interface LinkSearchListProps extends Omit<React.HTMLAttributes<HTMLDivEl
     ariaLabelledBy?: string;
     role?: string;
     id?: string;
-    error?: unknown;
     hasSearchTerm?: boolean;
 }
 declare const LinkSearchList: import("react").ForwardRefExoticComponent<LinkSearchListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/ui/link-picker/text-input/index.d.ts

@@ -10,5 +10,9 @@ export declare type TextInputProps = Omit<TextFieldProps, 'name' | 'value'> & {
     clearLabel?: string;
     error?: string | null;
 };
+export declare const testIds: {
+    urlError: string;
+    clearUrlButton: string;
+};
 declare const TextInput: ({ name, label, autoFocus, onRedo, onUndo, onKeyDown, onClear, clearLabel, error, ...restProps }: TextInputProps) => jsx.JSX.Element;
 export default TextInput;

package/dist/types/ui/link-picker/track-mount/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * UFO + Analytics tracking for component mount (and unmount)
+ */
+declare function TrackMount(): null;
+export default TrackMount;

package/dist/types/ui/link-picker/track-tab-viewed/index.d.ts

@@ -0,0 +1,4 @@
+declare function TrackTabViewed({ activeTab }: {
+    activeTab: number | null;
+}): null;
+export default TrackTabViewed;

package/dist/types/ui/scrolling-tabs/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+interface ScrollingTabListProps {
+    children: JSX.Element;
+}
+export declare const ScrollingTabList: (props: ScrollingTabListProps) => jsx.JSX.Element;
+export default ScrollingTabList;

package/dist/types/ui/scrolling-tabs/scrolling-tabs.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+export interface ConditionalButtons {
+    back: boolean;
+    forward: boolean;
+}
+export declare const scrollBack: (ref: RefObject<HTMLDivElement>) => void;
+export declare const scrollForward: (ref: RefObject<HTMLDivElement>) => void;
+export declare const calculateConditionalButtons: (container: HTMLElement | null | undefined, hideButtons: boolean) => ConditionalButtons;
+export declare const createGhost: () => HTMLDivElement;
+export declare const getTabList: (ref: RefObject<HTMLDivElement>) => Element | null | undefined;
+export declare const getContainer: (ref: RefObject<HTMLDivElement>) => HTMLElement | null | undefined;

package/dist/types/ui/scrolling-tabs/styles.d.ts

@@ -0,0 +1,6 @@
+import { SerializedStyles } from '@emotion/react';
+export declare const scrollingContainerStyles: SerializedStyles;
+export declare const containerStyles: SerializedStyles;
+export declare const buttonContainerStyles: SerializedStyles;
+export declare const backButtonStyles: SerializedStyles;
+export declare const nextButtonStyles: SerializedStyles;