@atlaskit/link-picker 1.29.1 → 1.30.1

package/dist/cjs/ui/messages-provider/lazy-messages-provider/utils/use-messages.js

@@ -13,7 +13,7 @@ var _fetchMessagesForLocale = require("./fetch-messages-for-locale");
  * Hook to load the messages for a given locale
  * English is sync/pre-loaded
  */
-var useMessages = function useMessages(locale) {
+var useMessages = exports.useMessages = function useMessages(locale) {
   var _useState = (0, _react.useState)({
       locale: 'en',
       messages: _en.default
@@ -38,5 +38,4 @@ var useMessages = function useMessages(locale) {
     }
   }, [localeState, locale]);
   return localeState.messages;
-};
-exports.useMessages = useMessages;
+};

package/dist/cjs/ui/styled.js

@@ -8,5 +8,4 @@ exports.fixedWidthContainerStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _templateObject;
-var fixedWidthContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: var(--link-picker-width);\n"])));
-exports.fixedWidthContainerStyles = fixedWidthContainerStyles;
+var fixedWidthContainerStyles = exports.fixedWidthContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: var(--link-picker-width);\n"])));

package/dist/es2019/index.js

@@ -1,2 +1,2 @@
-export { ComposedLinkPicker as LinkPicker } from './ui';
+export { default as LinkPicker } from './ui';
 export { UnauthenticatedError } from './common/utils/errors';

package/dist/es2019/ui/index.js

@@ -15,8 +15,8 @@ export const testIds = {
   linkPickerRoot: 'link-picker-root'
 };
 export const PACKAGE_DATA = {
-  packageName: "@atlaskit/link-picker",
-  packageVersion: "1.29.1",
+  packageName: "@atlaskit/link-picker" || '',
+  packageVersion: "1.30.1" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };
@@ -38,7 +38,8 @@ const FixedWidthContainer = props => {
     css: fixedWidthContainerStyles
   }, props));
 };
-export const ComposedLinkPicker = /*#__PURE__*/memo(props => {
+const ComposedLinkPicker = /*#__PURE__*/memo(props => {
+  var _props$paddingLeft, _props$paddingRight, _props$paddingTop, _props$paddingBottom;
   const {
     component
   } = props;
@@ -55,7 +56,11 @@ export const ComposedLinkPicker = /*#__PURE__*/memo(props => {
     data: PACKAGE_DATA
   }, jsx(LinkPickerSessionProvider, null, jsx(MessagesProvider, null, jsx("div", {
     style: {
-      ['--link-picker-width']: props.disableWidth ? '100%' : `${LINK_PICKER_WIDTH_IN_PX}px`
+      ['--link-picker-width']: props.disableWidth ? '100%' : `${LINK_PICKER_WIDTH_IN_PX}px`,
+      ['--link-picker-padding-left']: (_props$paddingLeft = props.paddingLeft) !== null && _props$paddingLeft !== void 0 ? _props$paddingLeft : "var(--ds-space-200, 16px)",
+      ['--link-picker-padding-right']: (_props$paddingRight = props.paddingRight) !== null && _props$paddingRight !== void 0 ? _props$paddingRight : "var(--ds-space-200, 16px)",
+      ['--link-picker-padding-top']: (_props$paddingTop = props.paddingTop) !== null && _props$paddingTop !== void 0 ? _props$paddingTop : "var(--ds-space-200, 16px)",
+      ['--link-picker-padding-bottom']: (_props$paddingBottom = props.paddingBottom) !== null && _props$paddingBottom !== void 0 ? _props$paddingBottom : "var(--ds-space-200, 16px)"
     }
   }, jsx(RootFixedWidthContainer, null, jsx(ErrorBoundary, null, jsx(LazySuspense, {
     fallback: jsx(LoaderFallbackContainer, null, jsx(LoaderFallback, {
@@ -66,4 +71,8 @@ export const ComposedLinkPicker = /*#__PURE__*/memo(props => {
   }, jsx(RootComponent, _extends({}, props, {
     "data-testid": testIds.linkPickerRoot
   }), jsx(LazyLinkPicker, props)))))))));
-});
+});
+
+// Must be a default export to be able to support prop docs
+// eslint-disable-next-line import/no-default-export
+export default ComposedLinkPicker;

package/dist/es2019/ui/link-picker/search-results/link-search-list/list-item/styled.js

@@ -14,7 +14,18 @@ export const relativeFontSizeToBase16 = px => {
 };
 const listItemBaseStyles = css`
   display: flex;
-  padding: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-200, 16px)"};
+  padding-top: ${"var(--ds-space-100, 8px)"};
+  padding-bottom: ${"var(--ds-space-100, 8px)"};
+  padding-left: clamp(
+    ${"var(--ds-space-100, 8px)"},
+    var(--link-picker-padding-left),
+    100%
+  );
+  padding-right: clamp(
+    ${"var(--ds-space-100, 8px)"},
+    var(--link-picker-padding-right),
+    100%
+  );
   margin: 0;
   cursor: pointer;
 `;

package/dist/es2019/ui/link-picker/search-results/link-search-list/styled.js

@@ -20,7 +20,10 @@ export const spinnerContainerStyles = css`
 `;
 export const listStyles = css`
   padding: 0;
-  margin: 0 ${"var(--ds-space-negative-200, -16px)"};
+  margin-top: 0;
+  margin-bottom: 0;
+  margin-left: calc(-1 * var(--link-picker-padding-left));
+  margin-right: calc(-1 * var(--link-picker-padding-right));
   list-style: none;
 `;
 export const listTitleStyles = css`

package/dist/es2019/ui/link-picker/search-results/scrolling-tabs/scrolling-tabs.js

@@ -32,7 +32,7 @@ const moveTabsScroll = (ref, findFn) => {
   const container = getContainer(ref);
   if (container) {
     const tablist = container.children[0];
-    const tabs = [...tablist.children];
+    const tabs = Array.from(tablist.children);
     if (tabs.length > 0) {
       const target = findFn(container, tabs);
       if (target) {

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

@@ -1,12 +1,11 @@
 import { css } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-/**
- * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
- */
 export const rootContainerStyles = css`
   width: ${getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results') ? undefined : 'var(--link-picker-width)'};
-  padding: ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-200, 16px)"}
-    ${"var(--ds-space-200, 16px)"};
+  padding-left: var(--link-picker-padding-left);
+  padding-right: var(--link-picker-padding-right);
+  padding-top: var(--link-picker-padding-top);
+  padding-bottom: var(--link-picker-padding-bottom);
   box-sizing: border-box;
   line-height: initial;
 `;

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

@@ -8,7 +8,15 @@ export const clearTextButtonStyles = css`
   border: none;
   cursor: pointer;
 `;
+
+/**
+ * Overidding text input margin top which design system provides as a default spacer
+ * but it gets in the way of our layout
+ */
 export const fieldStyles = css`
+  > div {
+    margin-top: 0;
+  }
   & + & {
     margin-top: ${"var(--ds-space-200, 16px)"};
   }

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

@@ -29,13 +29,13 @@ var LinkPickerAnalyticsContext = /*#__PURE__*/React.createContext({
  * 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$;
+  var _props$plugins$0$tabK, _props$plugins;
   return {
     linkState: normalizeUrl(props.url) ? 'editLink' : 'newLink',
     linkFieldContent: normalizeUrl(props.url) ? 'url' : 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
+    tab: (_props$plugins$0$tabK = (_props$plugins = props.plugins) === null || _props$plugins === 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/esm/common/analytics/input-field-tracking.js

@@ -48,13 +48,13 @@ export var withInputFieldTracking = function withInputFieldTracking(WrappedCompo
       // trackAttribute(`${field}FieldContent`, contentTypeFn(event.currentTarget.value));
       // trackAttribute(`${field}FieldContentInputMethod`, methodTypeFn(event));
       trackAttributes(filterOnChangeEventAttrs(event, (_filterOnChangeEventA = {}, _defineProperty(_filterOnChangeEventA, "".concat(field, "FieldContent"), Boolean(event.currentTarget.value) ? 'text_string' : null), _defineProperty(_filterOnChangeEventA, "".concat(field, "FieldContentInputMethod"), getChangeEventInputMethodType(event)), _filterOnChangeEventA)));
-      onChange === null || onChange === void 0 ? void 0 : onChange(event);
+      onChange === null || onChange === void 0 || onChange(event);
     }, [onChange, trackAttributes]);
 
     // Store the value of the field at the time the field is focused so we can know if it changes when the user's focus leaves
     var handleOnFocus = useCallback(function (event) {
       valueOnFocus.current = event.currentTarget.value;
-      onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+      onFocus === null || onFocus === void 0 || onFocus(event);
     }, [onFocus]);
 
     // Fire updated events only when the user's focus leaves the field
@@ -63,7 +63,7 @@ export var withInputFieldTracking = function withInputFieldTracking(WrappedCompo
       if (event.currentTarget.value !== valueOnFocus.current) {
         createAnalyticsEvent(createEventPayload("ui.textField.updated.".concat(field, "Field"), {})).fire(ANALYTICS_CHANNEL);
       }
-      onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+      onBlur === null || onBlur === void 0 || onBlur(event);
     }, [onBlur, createAnalyticsEvent]);
 
     // Track the values as null when the text field is cleared
@@ -73,7 +73,7 @@ export var withInputFieldTracking = function withInputFieldTracking(WrappedCompo
       for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
         args[_key] = arguments[_key];
       }
-      onClear === null || onClear === void 0 ? void 0 : onClear.apply(void 0, args);
+      onClear === null || onClear === void 0 || onClear.apply(void 0, args);
     }, [onClear, trackAttribute]);
     return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
       onBlur: handleOnBlur,

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-export { ComposedLinkPicker as LinkPicker } from './ui';
+export { default as LinkPicker } from './ui';
 export { UnauthenticatedError } from './common/utils/errors';

package/dist/esm/ui/error-boundary/index.js

@@ -12,10 +12,10 @@ export function ErrorBoundary(_ref) {
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
   var linkPickerSessionId = useLinkPickerSessionId();
   var handleError = useCallback(function (error, info) {
-    var _window, _window$navigator, _info$componentStack;
+    var _window, _info$componentStack;
     // Fire Analytics event
     createAnalyticsEvent(createEventPayload('ui.linkPicker.unhandledErrorCaught', {
-      browserInfo: ((_window = window) === null || _window === void 0 ? void 0 : (_window$navigator = _window.navigator) === null || _window$navigator === void 0 ? void 0 : _window$navigator.userAgent) || 'unknown',
+      browserInfo: ((_window = window) === null || _window === void 0 || (_window = _window.navigator) === null || _window === void 0 ? void 0 : _window.userAgent) || 'unknown',
       error: error.toString(),
       componentStack: (_info$componentStack = info === null || info === void 0 ? void 0 : info.componentStack) !== null && _info$componentStack !== void 0 ? _info$componentStack : ''
     })).fire(ANALYTICS_CHANNEL);

package/dist/esm/ui/index.js

@@ -16,8 +16,8 @@ export var testIds = {
   linkPickerRoot: 'link-picker-root'
 };
 export var PACKAGE_DATA = {
-  packageName: "@atlaskit/link-picker",
-  packageVersion: "1.29.1",
+  packageName: "@atlaskit/link-picker" || '',
+  packageVersion: "1.30.1" || '',
   componentName: COMPONENT_NAME,
   source: COMPONENT_NAME
 };
@@ -41,7 +41,8 @@ var FixedWidthContainer = function FixedWidthContainer(props) {
     css: fixedWidthContainerStyles
   }, props));
 };
-export var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
+var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
+  var _props$paddingLeft, _props$paddingRight, _props$paddingTop, _props$paddingBottom, _ref3;
   var component = props.component;
   var RootComponent = component !== null && component !== void 0 ? component : DefaultRootComponent;
 
@@ -55,7 +56,7 @@ export var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
   return jsx(AnalyticsContext, {
     data: PACKAGE_DATA
   }, jsx(LinkPickerSessionProvider, null, jsx(MessagesProvider, null, jsx("div", {
-    style: _defineProperty({}, '--link-picker-width', props.disableWidth ? '100%' : "".concat(LINK_PICKER_WIDTH_IN_PX, "px"))
+    style: (_ref3 = {}, _defineProperty(_ref3, '--link-picker-width', props.disableWidth ? '100%' : "".concat(LINK_PICKER_WIDTH_IN_PX, "px")), _defineProperty(_ref3, '--link-picker-padding-left', (_props$paddingLeft = props.paddingLeft) !== null && _props$paddingLeft !== void 0 ? _props$paddingLeft : "var(--ds-space-200, 16px)"), _defineProperty(_ref3, '--link-picker-padding-right', (_props$paddingRight = props.paddingRight) !== null && _props$paddingRight !== void 0 ? _props$paddingRight : "var(--ds-space-200, 16px)"), _defineProperty(_ref3, '--link-picker-padding-top', (_props$paddingTop = props.paddingTop) !== null && _props$paddingTop !== void 0 ? _props$paddingTop : "var(--ds-space-200, 16px)"), _defineProperty(_ref3, '--link-picker-padding-bottom', (_props$paddingBottom = props.paddingBottom) !== null && _props$paddingBottom !== void 0 ? _props$paddingBottom : "var(--ds-space-200, 16px)"), _ref3)
   }, jsx(RootFixedWidthContainer, null, jsx(ErrorBoundary, null, jsx(LazySuspense, {
     fallback: jsx(LoaderFallbackContainer, null, jsx(LoaderFallback, {
       hideDisplayText: props.hideDisplayText,
@@ -65,4 +66,8 @@ export var ComposedLinkPicker = /*#__PURE__*/memo(function (props) {
   }, jsx(RootComponent, _extends({}, props, {
     "data-testid": testIds.linkPickerRoot
   }), jsx(LazyLinkPicker, props)))))))));
-});
+});
+
+// Must be a default export to be able to support prop docs
+// eslint-disable-next-line import/no-default-export
+export default ComposedLinkPicker;

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

@@ -150,7 +150,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     var consumerEvent = event.clone();
     // Cloned event doesnt have the attributes that are added by
     // the analytics listener in the LinkPickerAnalyticsContext, add them here
-    consumerEvent === null || consumerEvent === void 0 ? void 0 : consumerEvent.update({
+    consumerEvent === null || consumerEvent === void 0 || consumerEvent.update({
       attributes: getAttributes()
     });
     // Dispatch the original event to our channel
@@ -184,7 +184,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
     }
   }, [handleInsert, trackAttribute, items, activePlugin]);
   var handleSubmit = useCallback(function (event) {
-    event === null || event === void 0 ? void 0 : event.preventDefault();
+    event === null || event === void 0 || event.preventDefault();
     if (isSelectedItem && selectedItem) {
       return handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
     }
@@ -208,7 +208,7 @@ export var LinkPicker = withLinkPickerAnalyticsContext( /*#__PURE__*/memo(functi
       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);
+    trackAttribute('tab', (_plugins$activeTab$ta = plugins === null || plugins === 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 handleSearchListOnChange = function handleSearchListOnChange(id) {
     var index = items === null || items === void 0 ? void 0 : items.findIndex(function (item) {

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

@@ -76,5 +76,5 @@ export var SearchResults = function SearchResults(_ref) {
     onKeyDown: handleKeyDown,
     hasSearchTerm: !!(queryState !== null && queryState !== void 0 && queryState.query.length),
     activePlugin: activePlugin
-  }), error && ((_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 ? void 0 : (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : jsx(LinkSearchError, null))));
+  }), error && ((_activePlugin$errorFa = activePlugin === null || activePlugin === void 0 || (_activePlugin$errorFa2 = activePlugin.errorFallback) === null || _activePlugin$errorFa2 === void 0 ? void 0 : _activePlugin$errorFa2.call(activePlugin, error, retry)) !== null && _activePlugin$errorFa !== void 0 ? _activePlugin$errorFa : jsx(LinkSearchError, null))));
 };

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

@@ -90,7 +90,7 @@ export var LinkSearchList = /*#__PURE__*/forwardRef(function (_ref, ref) {
     if (['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key) && item) {
       if (itemRefs.current) {
         var _itemRefs$current$ite;
-        (_itemRefs$current$ite = itemRefs.current[item.objectId]) === null || _itemRefs$current$ite === void 0 ? void 0 : _itemRefs$current$ite.focus();
+        (_itemRefs$current$ite = itemRefs.current[item.objectId]) === null || _itemRefs$current$ite === void 0 || _itemRefs$current$ite.focus();
       }
     }
   }, [activeIndex, items, onKeyDown]);

package/dist/esm/ui/link-picker/search-results/link-search-list/list-item/styled.js

@@ -14,7 +14,7 @@ export var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
   }
   return "".concat(px / 16, "rem");
 };
-var listItemBaseStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding: ", " ", ";\n  margin: 0;\n  cursor: pointer;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)");
+var listItemBaseStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  padding-top: ", ";\n  padding-bottom: ", ";\n  padding-left: clamp(\n    ", ",\n    var(--link-picker-padding-left),\n    100%\n  );\n  padding-right: clamp(\n    ", ",\n    var(--link-picker-padding-right),\n    100%\n  );\n  margin: 0;\n  cursor: pointer;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
 var listItemFocusStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", " inset;\n    text-decoration: none;\n  }\n"])), "var(--ds-border-focused, ".concat(B100, ")"));
 var listItemBoxShadow = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-border-selected, ".concat(B400, ")"));
 var listItemActive = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &:hover {\n    background-color: ", ";\n    ", ";\n  }\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")"), listItemBoxShadow);

package/dist/esm/ui/link-picker/search-results/link-search-list/styled.js

@@ -7,5 +7,5 @@ import { css } from '@emotion/react';
 import { typography } from '@atlaskit/theme';
 export var listContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: 100%;\n  padding-top: 0;\n  min-height: 80px;\n  margin-top: ", ";\n  margin-bottom: ", ";\n  flex-grow: 1;\n  display: flex;\n  flex-direction: column;\n"])), "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
 export var spinnerContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  flex-grow: 1;\n  flex-direction: column;\n  align-items: center;\n"])));
-export var listStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin: 0 ", ";\n  list-style: none;\n"])), "var(--ds-space-negative-200, -16px)");
+export var listStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  padding: 0;\n  margin-top: 0;\n  margin-bottom: 0;\n  margin-left: calc(-1 * var(--link-picker-padding-left));\n  margin-right: calc(-1 * var(--link-picker-padding-right));\n  list-style: none;\n"])));
 export var listTitleStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  text-transform: uppercase;\n  margin-top: 0;\n  margin-bottom: ", ";\n"])), typography.h100(), "var(--ds-space-050, 4px)");

package/dist/esm/ui/link-picker/search-results/scrolling-tabs/scrolling-tabs.js

@@ -1,4 +1,3 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 var BUTTON_SIZE = 24;
 var GUTTER = 48;
 var GHOST_WIDTH = 342 - GUTTER - 40;
@@ -33,7 +32,7 @@ var moveTabsScroll = function moveTabsScroll(ref, findFn) {
   var container = getContainer(ref);
   if (container) {
     var tablist = container.children[0];
-    var _tabs = _toConsumableArray(tablist.children);
+    var _tabs = Array.from(tablist.children);
     if (_tabs.length > 0) {
       var target = findFn(container, _tabs);
       if (target) {

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

@@ -2,8 +2,5 @@ import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral
 var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-/**
- * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
- */
-export var rootContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", ";\n  padding: ", " ", "\n    ", ";\n  box-sizing: border-box;\n  line-height: initial;\n"])), getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results') ? undefined : 'var(--link-picker-width)', "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)", "var(--ds-space-200, 16px)");
+export var rootContainerStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  width: ", ";\n  padding-left: var(--link-picker-padding-left);\n  padding-right: var(--link-picker-padding-right);\n  padding-top: var(--link-picker-padding-top);\n  padding-bottom: var(--link-picker-padding-bottom);\n  box-sizing: border-box;\n  line-height: initial;\n"])), getBooleanFF('platform.linking-platform.link-picker.fixed-height-search-results') ? undefined : 'var(--link-picker-width)');
 export var formFooterMargin = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n"])), "var(--ds-space-200, 16px)");

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

@@ -55,8 +55,8 @@ export var TextInput = function TextInput(_ref) {
     var _inputRef$current;
     e.preventDefault();
     e.stopPropagation();
-    onClear === null || onClear === void 0 ? void 0 : onClear(name);
-    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.focus();
+    onClear === null || onClear === void 0 || onClear(name);
+    (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 || _inputRef$current.focus();
   }, [name, onClear]);
   var clearText = restProps.value !== '' && jsx(Tooltip, {
     content: clearLabel

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

@@ -3,4 +3,9 @@ var _templateObject, _templateObject2;
 import { css } from '@emotion/react';
 import { N500 } from '@atlaskit/theme/colors';
 export var clearTextButtonStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  padding: 0;\n  margin-right: ", ";\n  color: ", ";\n  background: transparent;\n  border: none;\n  cursor: pointer;\n"])), "var(--ds-space-050, 4px)", "var(--ds-icon-subtle, ".concat(N500, ")"));
-export var fieldStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  & + & {\n    margin-top: ", ";\n  }\n"])), "var(--ds-space-200, 16px)");
+
+/**
+ * Overidding text input margin top which design system provides as a default spacer
+ * but it gets in the way of our layout
+ */
+export var fieldStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  > div {\n    margin-top: 0;\n  }\n  & + & {\n    margin-top: ", ";\n  }\n"])), "var(--ds-space-200, 16px)");

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

@@ -5,7 +5,7 @@ import { transformTimeStamp } from './transformTimeStamp';
  */
 export var getDataSource = function getDataSource(item, plugin) {
   var _ref, _item$meta$source, _item$meta, _plugin$meta;
-  return (_ref = (_item$meta$source = (_item$meta = item.meta) === null || _item$meta === void 0 ? void 0 : _item$meta.source) !== null && _item$meta$source !== void 0 ? _item$meta$source : plugin === null || plugin === void 0 ? void 0 : (_plugin$meta = plugin.meta) === null || _plugin$meta === void 0 ? void 0 : _plugin$meta.source) !== null && _ref !== void 0 ? _ref : 'unknown';
+  return (_ref = (_item$meta$source = (_item$meta = item.meta) === null || _item$meta === void 0 ? void 0 : _item$meta.source) !== null && _item$meta$source !== void 0 ? _item$meta$source : plugin === null || plugin === void 0 || (_plugin$meta = plugin.meta) === null || _plugin$meta === void 0 ? void 0 : _plugin$meta.source) !== null && _ref !== void 0 ? _ref : 'unknown';
 };
 export function getScreenReaderText(items, selectedIndex, intl) {
   if (items.length && selectedIndex > -1) {

package/dist/types/index.d.ts

@@ -1,4 +1,4 @@
-export { ComposedLinkPicker as LinkPicker } from './ui';
+export { default as LinkPicker } from './ui';
 export type { LinkPickerProps } from './ui/link-picker';
 export type { LinkInputType, LinkPickerPluginAction, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, LinkPickerPluginErrorFallback, LinkPickerPluginEmptyStateNoResults, } from './common/types';
 export { UnauthenticatedError } from './common/utils/errors';

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

@@ -7,4 +7,5 @@ export declare const testIds: {
     linkPickerRoot: string;
 };
 export declare const PACKAGE_DATA: PackageMetaDataType;
-export declare const ComposedLinkPicker: React.MemoExoticComponent<(props: LinkPickerProps) => jsx.JSX.Element>;
+declare const ComposedLinkPicker: React.MemoExoticComponent<(props: LinkPickerProps) => jsx.JSX.Element>;
+export default ComposedLinkPicker;

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

@@ -61,14 +61,22 @@ export interface LinkPickerProps {
     plugins?: LinkPickerPlugin[];
     /** If set true, Link picker will show the loading spinner where the tabs and results will show. */
     isLoadingPlugins?: boolean;
+    /** Hides the link picker display text field if set to true. */
+    hideDisplayText?: boolean;
+    /** Disables the default width containing the link picker. */
+    disableWidth?: boolean;
+    /** Override the default left padding. */
+    paddingLeft?: string;
+    /** Override the default right padding. */
+    paddingRight?: string;
+    /** Override the default top padding. */
+    paddingTop?: string;
+    /** Override the default bottom padding. */
+    paddingBottom?: string;
     /** Customise the link picker root component */
     component?: React.ComponentType<Partial<LinkPickerProps> & {
         children: React.ReactElement;
     }>;
-    /** Hides the link picker display text field if set to true. */
-    hideDisplayText?: boolean;
-    /** Disables the default width containing the link picker */
-    disableWidth?: boolean;
     featureFlags?: Record<string, unknown>;
 }
 export declare const LinkPicker: import("react").ComponentType<LinkPickerProps>;

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

@@ -1,5 +1,2 @@
-/**
- * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
- */
 export declare const rootContainerStyles: import("@emotion/react").SerializedStyles;
 export declare const formFooterMargin: import("@emotion/react").SerializedStyles;

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

@@ -1,2 +1,6 @@
 export declare const clearTextButtonStyles: import("@emotion/react").SerializedStyles;
+/**
+ * Overidding text input margin top which design system provides as a default spacer
+ * but it gets in the way of our layout
+ */
 export declare const fieldStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/index.d.ts

@@ -1,4 +1,4 @@
-export { ComposedLinkPicker as LinkPicker } from './ui';
+export { default as LinkPicker } from './ui';
 export type { LinkPickerProps } from './ui/link-picker';
 export type { LinkInputType, LinkPickerPluginAction, LinkPickerPlugin, LinkPickerState, LinkSearchListItemData, LinkPickerPluginErrorFallback, LinkPickerPluginEmptyStateNoResults, } from './common/types';
 export { UnauthenticatedError } from './common/utils/errors';

package/dist/types-ts4.5/ui/index.d.ts

@@ -7,4 +7,5 @@ export declare const testIds: {
     linkPickerRoot: string;
 };
 export declare const PACKAGE_DATA: PackageMetaDataType;
-export declare const ComposedLinkPicker: React.MemoExoticComponent<(props: LinkPickerProps) => jsx.JSX.Element>;
+declare const ComposedLinkPicker: React.MemoExoticComponent<(props: LinkPickerProps) => jsx.JSX.Element>;
+export default ComposedLinkPicker;

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

@@ -61,14 +61,22 @@ export interface LinkPickerProps {
     plugins?: LinkPickerPlugin[];
     /** If set true, Link picker will show the loading spinner where the tabs and results will show. */
     isLoadingPlugins?: boolean;
+    /** Hides the link picker display text field if set to true. */
+    hideDisplayText?: boolean;
+    /** Disables the default width containing the link picker. */
+    disableWidth?: boolean;
+    /** Override the default left padding. */
+    paddingLeft?: string;
+    /** Override the default right padding. */
+    paddingRight?: string;
+    /** Override the default top padding. */
+    paddingTop?: string;
+    /** Override the default bottom padding. */
+    paddingBottom?: string;
     /** Customise the link picker root component */
     component?: React.ComponentType<Partial<LinkPickerProps> & {
         children: React.ReactElement;
     }>;
-    /** Hides the link picker display text field if set to true. */
-    hideDisplayText?: boolean;
-    /** Disables the default width containing the link picker */
-    disableWidth?: boolean;
     featureFlags?: Record<string, unknown>;
 }
 export declare const LinkPicker: import("react").ComponentType<LinkPickerProps>;

package/dist/types-ts4.5/ui/link-picker/styled.d.ts

@@ -1,5 +1,2 @@
-/**
- * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
- */
 export declare const rootContainerStyles: import("@emotion/react").SerializedStyles;
 export declare const formFooterMargin: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/link-picker/text-input/styled.d.ts

@@ -1,2 +1,6 @@
 export declare const clearTextButtonStyles: import("@emotion/react").SerializedStyles;
+/**
+ * Overidding text input margin top which design system provides as a default spacer
+ * but it gets in the way of our layout
+ */
 export declare const fieldStyles: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/link-picker",
-  "version": "1.29.1",
+  "version": "1.30.1",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -58,14 +58,14 @@
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/frontend-utilities": "^2.7.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/linking-common": "^4.6.0",
+    "@atlaskit/linking-common": "^4.11.0",
     "@atlaskit/onboarding": "^10.8.2",
     "@atlaskit/platform-feature-flags": "^0.2.1",
-    "@atlaskit/spinner": "^15.5.0",
+    "@atlaskit/spinner": "^15.6.0",
     "@atlaskit/tabs": "^13.4.0",
     "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.21.0",
+    "@atlaskit/tokens": "^1.25.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/visually-hidden": "^1.2.0",
@@ -84,10 +84,10 @@
   "devDependencies": {
     "@af/analytics-codegen": "^0.1.0",
     "@af/visual-regression": "*",
-    "@atlaskit/dropdown-menu": "^11.13.0",
+    "@atlaskit/dropdown-menu": "^11.14.0",
     "@atlaskit/link-provider": "^1.6.0",
-    "@atlaskit/link-test-helpers": "^6.0.0",
-    "@atlaskit/linking-common": "^4.6.0",
+    "@atlaskit/link-test-helpers": "^6.1.0",
+    "@atlaskit/linking-common": "^4.11.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",

package/report.api.md

@@ -84,6 +84,10 @@ export interface LinkPickerProps {
     arg: OnSubmitParameter,
     analytic?: UIAnalyticsEvent | null,
   ) => void;
+  paddingBottom?: string;
+  paddingLeft?: string;
+  paddingRight?: string;
+  paddingTop?: string;
   plugins?: LinkPickerPlugin[];
   url?: string;
 }

package/tmp/api-report-tmp.d.ts

@@ -61,6 +61,10 @@ export interface LinkPickerProps {
     onCancel: () => void;
     onContentResize?: () => void;
     onSubmit: (arg: OnSubmitParameter, analytic?: UIAnalyticsEvent | null) => void;
+    paddingBottom?: string;
+    paddingLeft?: string;
+    paddingRight?: string;
+    paddingTop?: string;
     plugins?: LinkPickerPlugin[];
     url?: string;
 }