@atlaskit/link-picker 1.11.2 → 1.13.0

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

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

@@ -23,7 +23,13 @@ export 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
+
+  useEffect(function () {
+    if (activePlugin && activePlugin.UNSAFE_onActivation) {
+      activePlugin.UNSAFE_onActivation();
+    }
+  }, [activePlugin]);
   useEffect(function () {
     if (!activePlugin) {
       return;

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

@@ -28,6 +28,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';
@@ -92,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;
@@ -303,6 +305,12 @@ 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,
@@ -353,12 +361,7 @@ function LinkPicker(_ref) {
     testId: testIds.tabList,
     selected: activeTab,
     onChange: handleTabChange
-  }, jsx(TabList, null, tabs.map(function (tab) {
-    return 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/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.2",
+	"version": "1.13.0",
 	"sideEffects": false
 }

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

@@ -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/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;

package/dist/types/ui/types.d.ts

@@ -53,5 +53,7 @@ export interface LinkPickerPlugin {
         /** The data source that provides all results provided by the plugin */
         source?: string;
     };
+    /** Callback for plugin activation */
+    UNSAFE_onActivation?: () => void;
 }
 export declare type LinkPickerPluginErrorFallback = (error: unknown, retry: () => void) => ReactNode;

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

@@ -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-ts4.0/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-ts4.0/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-ts4.0/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;

package/dist/types-ts4.0/ui/types.d.ts

@@ -53,5 +53,7 @@ export interface LinkPickerPlugin {
         /** The data source that provides all results provided by the plugin */
         source?: string;
     };
+    /** Callback for plugin activation */
+    UNSAFE_onActivation?: () => void;
 }
 export declare type LinkPickerPluginErrorFallback = (error: unknown, retry: () => void) => ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.11.2",
+  "version": "1.13.0",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -40,12 +40,12 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.3.1",
-    "@atlaskit/button": "^16.2.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/empty-state": "^7.4.0",
-    "@atlaskit/form": "^8.6.0",
+    "@atlaskit/form": "^8.7.0",
     "@atlaskit/frontend-utilities": "^2.0.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/spinner": "^15.1.0",
+    "@atlaskit/spinner": "^15.2.0",
     "@atlaskit/tabs": "^13.3.0",
     "@atlaskit/textfield": "^5.3.0",
     "@atlaskit/theme": "^12.2.0",
@@ -80,8 +80,8 @@
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
-    "@atlassian/link-picker-atlassian-plugin": "^21.0.0",
-    "@atlassian/link-picker-plugins": "^9.0.0",
+    "@atlassian/link-picker-atlassian-plugin": "^23.0.0",
+    "@atlassian/link-picker-plugins": "^11.0.0",
     "@atlassian/recent-work-client": "^1.6.0",
     "@atlassian/search-provider": "^2.3.0",
     "@testing-library/dom": "^8.17.1",

package/report.api.md

@@ -41,6 +41,7 @@ export interface LinkPickerPlugin {
   ) => AsyncGenerator<ResolveResult, ResolveResult> | Promise<ResolveResult>;
   tabKey?: string;
   tabTitle?: string;
+  UNSAFE_onActivation?: () => void;
 }
 
 // @public (undocumented)
@@ -57,6 +58,8 @@ export interface LinkPickerProps {
     }
   >;
   displayText?: null | string;
+  // (undocumented)
+  featureFlags?: Record<string, unknown>;
   onCancel: () => void;
   onContentResize?: () => void;
   onSubmit: (