@atlaskit/link-picker 1.11.1 → 1.12.0

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.1",
+	"version": "1.12.0",
 	"sideEffects": false
 }

package/dist/es2019/analytics.codegen.js

@@ -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
  */
 function createEventPayload(eventKey, attributes) {

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

@@ -9,7 +9,8 @@ const DEFAULT_CONTEXT_ATTRIBUTES = {
   linkFieldContentInputMethod: null,
   linkFieldContentInputSource: null,
   displayTextFieldContent: null,
-  displayTextFieldContentInputMethod: null
+  displayTextFieldContentInputMethod: null,
+  tab: null
 };
 const LinkPickerAnalyticsContext = /*#__PURE__*/React.createContext({
   trackAttribute: () => {},
@@ -18,13 +19,18 @@ const LinkPickerAnalyticsContext = /*#__PURE__*/React.createContext({
 });
 /**
  * TODO: Should we hook this into the form state/reducer?
+ * This function continues to duplicate / assume logic that runs in the picker
  */
 
 const contextAttributesFromIntialProps = props => {
+  var _props$plugins$0$tabK, _props$plugins, _props$plugins$;
+
   return {
     linkState: normalizeUrl(props.url) ? 'editLink' : 'newLink',
     linkFieldContent: 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/es2019/ui/link-picker/index.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @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';
@@ -16,16 +16,17 @@ 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 const RECENT_SEARCH_LIST_SIZE = 5;
 export const testIds = {
   linkPickerRoot: 'link-picker-root',
@@ -36,8 +37,7 @@ export const testIds = {
   ...formFooterTestIds,
   ...searchErrorTestIds,
   ...listTestIds,
-  clearUrlButton: 'clear-text',
-  urlError: 'link-error',
+  ...textFieldTestIds,
   tabList: 'link-picker-tabs',
   tabItem: 'link-picker-tab'
 };
@@ -87,7 +87,8 @@ function LinkPicker({
   onContentResize,
   plugins,
   url: initUrl,
-  displayText: initDisplayText
+  displayText: initDisplayText,
+  featureFlags
 }) {
   var _errorFallback;
 
@@ -126,20 +127,6 @@ function LinkPicker({
     trackAttribute,
     getAttributes
   } = useLinkPickerAnalytics();
-  const linkPickerSessionId = useLinkPickerSessionId();
-  useLayoutEffect(() => {
-    succeedUfoExperience(ufoExperience.mounted, linkPickerSessionId);
-  }, [linkPickerSessionId]);
-  useEffect(() => {
-    // Anything in here is fired on component mount.
-    const event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {}));
-    event.fire(ANALYTICS_CHANNEL);
-    return () => {
-      // Anything in here is fired on component unmount.
-      const event = createAnalyticsEvent(createEventPayload('ui.inlineDialog.closed.linkPicker', {}));
-      event.fire(ANALYTICS_CHANNEL);
-    };
-  }, [createAnalyticsEvent]);
   useLayoutEffect(() => {
     if (onContentResize) {
       onContentResize();
@@ -285,6 +272,17 @@ function LinkPicker({
       invalidUrl: true
     });
   }, [handleInsert, isSelectedItem, selectedItem, url]);
+  const handleTabChange = useCallback(activeTab => {
+    var _plugins$activeTab$ta, _plugins$activeTab;
+
+    dispatch({
+      selectedIndex: -1,
+      activeIndex: -1,
+      invalidUrl: false,
+      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]);
   const messages = isActivePlugin ? searchMessages : linkMessages;
   const screenReaderDescriptionId = 'search-recent-links-field-description';
   const linkSearchListId = 'link-picker-search-list';
@@ -300,11 +298,15 @@ 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,
     onSubmit: handleSubmit
-  }, screenReaderText && jsx(Announcer, {
+  }, jsx(TrackMount, null), screenReaderText && jsx(Announcer, {
     ariaLive: "assertive",
     text: screenReaderText,
     ariaRelevant: "additions",
@@ -348,16 +350,11 @@ function LinkPicker({
   }, jsx(Tabs, {
     id: testIds.tabList,
     testId: testIds.tabList,
-    onChange: activeTab => dispatch({
-      selectedIndex: -1,
-      activeIndex: -1,
-      invalidUrl: false,
-      activeTab
-    })
-  }, jsx(TabList, null, tabs.map(tab => 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,
@@ -369,7 +366,6 @@ function LinkPicker({
     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/es2019/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 '..';
 
 const LinkSearchListItem = ({
   item,

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

@@ -8,8 +8,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 const testIds = {
+  urlError: 'link-error',
+  clearUrlButton: 'clear-text'
+};
 
 const TextInput = ({
   name,

package/dist/es2019/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() {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  const linkPickerSessionId = useLinkPickerSessionId();
+  useLayoutEffect(() => {
+    succeedUfoExperience(ufoExperience.mounted, linkPickerSessionId);
+  }, [linkPickerSessionId]);
+  useLayoutEffect(() => {
+    // Anything in here is fired on component mount.
+    createAnalyticsEvent(createEventPayload('ui.inlineDialog.viewed.linkPicker', {})).fire(ANALYTICS_CHANNEL);
+    return () => {
+      // 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/es2019/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({
+  activeTab
+}) {
+  const {
+    createAnalyticsEvent
+  } = useAnalyticsEvents();
+  useLayoutEffect(() => {
+    createAnalyticsEvent(createEventPayload('ui.tab.viewed', {})).fire(ANALYTICS_CHANNEL);
+  }, [activeTab, createAnalyticsEvent]);
+  return null;
+}
+
+export default TrackTabViewed;

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;

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

@@ -0,0 +1,90 @@
+const BUTTON_SIZE = 24;
+const GUTTER = 48;
+const GHOST_WIDTH = 342 - GUTTER - 40;
+export const scrollBack = ref => {
+  moveTabsScroll(ref, findPrevious);
+};
+export const scrollForward = ref => {
+  moveTabsScroll(ref, findNext);
+};
+export const calculateConditionalButtons = (container, hideButtons) => {
+  const initialState = {
+    back: false,
+    forward: false
+  };
+
+  if (!container || hideButtons) {
+    return initialState;
+  }
+
+  const maxScrollValue = container.scrollWidth - container.clientWidth;
+  return {
+    back: container.scrollLeft > 0,
+    forward: container.scrollLeft < maxScrollValue - GHOST_WIDTH
+  };
+};
+export const createGhost = () => {
+  const ghost = document.createElement('div');
+  ghost.setAttribute('id', 'scrolling-tabs-ghost');
+  ghost.style.minWidth = `${GHOST_WIDTH}px`;
+  ghost.style.pointerEvents = 'none';
+  return ghost;
+};
+
+const moveTabsScroll = (ref, findFn) => {
+  const container = getContainer(ref);
+
+  if (container) {
+    const tablist = container.children[0];
+    const tabs = [...tablist.children];
+
+    if (tabs.length > 0) {
+      const target = findFn(container, tabs);
+
+      if (target) {
+        const left = container.scrollLeft + target.getBoundingClientRect().left - container.getBoundingClientRect().left - BUTTON_SIZE;
+        scrollTo(container, left);
+      }
+    }
+  }
+};
+
+const scrollTo = (container, left) => {
+  container.scrollTo({
+    left
+  });
+};
+
+export const getTabList = ref => {
+  var _ref$current;
+
+  return (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('[role="tablist"]');
+};
+export const getContainer = ref => {
+  var _getTabList;
+
+  return (_getTabList = getTabList(ref)) === null || _getTabList === void 0 ? void 0 : _getTabList.parentElement;
+};
+
+const findPrevious = (container, tabs) => {
+  const previousTabs = tabs.filter(tab => {
+    const [containerRect, tabRect] = [container.getBoundingClientRect(), tab.getBoundingClientRect()];
+    const [containerArea, tabArea] = [containerRect.left + container.scrollLeft - GUTTER, container.scrollLeft + tabRect.left + tabRect.width];
+    return containerArea > tabArea;
+  });
+
+  if (previousTabs.length < 3) {
+    return previousTabs[0];
+  }
+
+  return previousTabs[previousTabs.length - 1];
+};
+
+const findNext = (container, tabs) => {
+  const containerRect = container.getBoundingClientRect();
+  return tabs.find(tab => {
+    const tabRect = tab.getBoundingClientRect();
+    const [containerArea, tabArea] = [container.clientWidth + containerRect.left - GUTTER, tabRect.left + tabRect.width];
+    return containerArea < tabArea;
+  });
+};

package/dist/es2019/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 const 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 const 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 const buttonContainerStyles = css({
+  position: 'absolute',
+  top: 4,
+  zIndex: 999,
+  backgroundColor: token('elevation.surface', N0)
+});
+export const backButtonStyles = css([buttonContainerStyles, {
+  left: 0
+}]);
+export const nextButtonStyles = css([buttonContainerStyles, {
+  right: 0
+}]);

package/dist/es2019/version.json

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

package/dist/esm/analytics.codegen.js

@@ -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
  */
 function createEventPayload(eventKey, attributes) {

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

@@ -16,7 +16,8 @@ var DEFAULT_CONTEXT_ATTRIBUTES = {
   linkFieldContentInputMethod: null,
   linkFieldContentInputSource: null,
   displayTextFieldContent: null,
-  displayTextFieldContentInputMethod: null
+  displayTextFieldContentInputMethod: null,
+  tab: null
 };
 var LinkPickerAnalyticsContext = /*#__PURE__*/React.createContext({
   trackAttribute: function trackAttribute() {},
@@ -27,13 +28,18 @@ var LinkPickerAnalyticsContext = /*#__PURE__*/React.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: normalizeUrl(props.url) ? 'editLink' : 'newLink',
     linkFieldContent: 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
   };
 };
 /**