@atlaskit/link-picker 1.29.0 → 1.30.0

package/.eslintrc.js

@@ -15,7 +15,7 @@ module.exports = {
       },
     },
     {
-      files: ['src/**/index.vr.{js,ts,tsx}'],
+      files: ['src/**/*.vr.{js,ts,tsx}'],
       rules: {
         '@atlassian/tangerine/import/no-parent-imports': ['off'],
       },

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/link-picker
 
+## 1.30.0
+
+### Minor Changes
+
+- [`1e70dc014bf`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1e70dc014bf) - Adds support for `paddingLeft`, `paddingRight`, `paddingTop` and `paddingBottom` props that enable overriding the internal padding of the link picker.
+
+## 1.29.1
+
+### Patch Changes
+
+- [`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal changes to use space tokens. There is no expected visual or behaviour change.
+
 ## 1.29.0
 
 ### Minor Changes

package/dist/cjs/index.js

@@ -1,12 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "LinkPicker", {
   enumerable: true,
   get: function get() {
-    return _ui.ComposedLinkPicker;
+    return _ui.default;
   }
 });
 Object.defineProperty(exports, "UnauthenticatedError", {
@@ -15,5 +16,5 @@ Object.defineProperty(exports, "UnauthenticatedError", {
     return _errors.UnauthenticatedError;
   }
 });
-var _ui = require("./ui");
+var _ui = _interopRequireDefault(require("./ui"));
 var _errors = require("./common/utils/errors");

package/dist/cjs/ui/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.testIds = exports.PACKAGE_DATA = exports.ComposedLinkPicker = void 0;
+exports.testIds = exports.default = exports.PACKAGE_DATA = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -27,7 +27,7 @@ var testIds = {
 exports.testIds = testIds;
 var PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker",
-  packageVersion: "1.29.0",
+  packageVersion: "1.30.0",
   componentName: _constants.COMPONENT_NAME,
   source: _constants.COMPONENT_NAME
 };
@@ -55,6 +55,7 @@ var FixedWidthContainer = function FixedWidthContainer(props) {
   }, props));
 };
 var ComposedLinkPicker = /*#__PURE__*/(0, _react.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;
 
@@ -68,7 +69,7 @@ var ComposedLinkPicker = /*#__PURE__*/(0, _react.memo)(function (props) {
   return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
     data: PACKAGE_DATA
   }, (0, _react2.jsx)(_sessionProvider.LinkPickerSessionProvider, null, (0, _react2.jsx)(_messagesProvider.MessagesProvider, null, (0, _react2.jsx)("div", {
-    style: (0, _defineProperty2.default)({}, '--link-picker-width', props.disableWidth ? '100%' : "".concat(_constants.LINK_PICKER_WIDTH_IN_PX, "px"))
+    style: (_ref3 = {}, (0, _defineProperty2.default)(_ref3, '--link-picker-width', props.disableWidth ? '100%' : "".concat(_constants.LINK_PICKER_WIDTH_IN_PX, "px")), (0, _defineProperty2.default)(_ref3, '--link-picker-padding-left', (_props$paddingLeft = props.paddingLeft) !== null && _props$paddingLeft !== void 0 ? _props$paddingLeft : "var(--ds-space-200, 16px)"), (0, _defineProperty2.default)(_ref3, '--link-picker-padding-right', (_props$paddingRight = props.paddingRight) !== null && _props$paddingRight !== void 0 ? _props$paddingRight : "var(--ds-space-200, 16px)"), (0, _defineProperty2.default)(_ref3, '--link-picker-padding-top', (_props$paddingTop = props.paddingTop) !== null && _props$paddingTop !== void 0 ? _props$paddingTop : "var(--ds-space-200, 16px)"), (0, _defineProperty2.default)(_ref3, '--link-picker-padding-bottom', (_props$paddingBottom = props.paddingBottom) !== null && _props$paddingBottom !== void 0 ? _props$paddingBottom : "var(--ds-space-200, 16px)"), _ref3)
   }, (0, _react2.jsx)(RootFixedWidthContainer, null, (0, _react2.jsx)(_errorBoundary.ErrorBoundary, null, (0, _react2.jsx)(_reactLooselyLazy.LazySuspense, {
     fallback: (0, _react2.jsx)(LoaderFallbackContainer, null, (0, _react2.jsx)(_loaderFallback.LoaderFallback, {
       hideDisplayText: props.hideDisplayText,
@@ -79,4 +80,8 @@ var ComposedLinkPicker = /*#__PURE__*/(0, _react.memo)(function (props) {
     "data-testid": testIds.linkPickerRoot
   }), (0, _react2.jsx)(LazyLinkPicker, props)))))))));
 });
-exports.ComposedLinkPicker = ComposedLinkPicker;
+
+// Must be a default export to be able to support prop docs
+// eslint-disable-next-line import/no-default-export
+var _default = ComposedLinkPicker;
+exports.default = _default;

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

@@ -23,7 +23,7 @@ var relativeFontSizeToBase16 = function relativeFontSizeToBase16(px) {
   return "".concat(px / 16, "rem");
 };
 exports.relativeFontSizeToBase16 = relativeFontSizeToBase16;
-var listItemBaseStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  padding: ", " ", ";\n  margin: 0;\n  cursor: pointer;\n"])), "var(--ds-space-100, 8px)", "var(--ds-space-200, 16px)");
+var listItemBaseStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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 = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", " inset;\n    text-decoration: none;\n  }\n"])), "var(--ds-border-focused, ".concat(_colors.B100, ")"));
 var listItemBoxShadow = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  box-shadow: inset 2px 0px 0px ", ";\n"])), "var(--ds-border-selected, ".concat(_colors.B400, ")"));
 var listItemActive = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  &:hover {\n    background-color: ", ";\n    ", ";\n  }\n"])), "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"), listItemBoxShadow);

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

@@ -14,7 +14,7 @@ var listContainerStyles = (0, _react.css)(_templateObject || (_templateObject =
 exports.listContainerStyles = listContainerStyles;
 var spinnerContainerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex-grow: 1;\n  flex-direction: column;\n  align-items: center;\n"])));
 exports.spinnerContainerStyles = spinnerContainerStyles;
-var listStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  margin: 0 calc(-1 * ", ");\n  list-style: none;\n"])), "var(--ds-space-200, 16px)");
+var listStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\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"])));
 exports.listStyles = listStyles;
 var listTitleStyles = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  text-transform: uppercase;\n  margin-top: 0;\n  margin-bottom: ", ";\n"])), _theme.typography.h100(), "var(--ds-space-050, 4px)");
 exports.listTitleStyles = listTitleStyles;

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

@@ -8,7 +8,7 @@ exports.tabsWrapperStyles = exports.spinnerContainerStyles = exports.flexColumnS
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _templateObject, _templateObject2, _templateObject3;
-var tabsWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  margin-left: calc(-1 * ", ");\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+var tabsWrapperStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-negative-100, -8px)", "var(--ds-space-negative-100, -8px)");
 exports.tabsWrapperStyles = tabsWrapperStyles;
 var spinnerContainerStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  min-height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  flex-grow: 1;\n"])));
 exports.spinnerContainerStyles = spinnerContainerStyles;

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

@@ -9,10 +9,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _templateObject, _templateObject2;
-/**
- * Half padding on the top as the form field has a `gridSize()` margin top that cannot be overridden
- */
-var rootContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  padding: ", " ", "\n    ", ";\n  box-sizing: border-box;\n  line-height: initial;\n"])), (0, _platformFeatureFlags.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)");
+var rootContainerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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"])), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.link-picker.fixed-height-search-results') ? undefined : 'var(--link-picker-width)');
 exports.rootContainerStyles = rootContainerStyles;
 var formFooterMargin = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n"])), "var(--ds-space-200, 16px)");
 exports.formFooterMargin = formFooterMargin;

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

@@ -10,6 +10,11 @@ var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2;
 var clearTextButtonStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\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(_colors.N500, ")"));
+
+/**
+ * Overidding text input margin top which design system provides as a default spacer
+ * but it gets in the way of our layout
+ */
 exports.clearTextButtonStyles = clearTextButtonStyles;
-var fieldStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  & + & {\n    margin-top: ", ";\n  }\n"])), "var(--ds-space-200, 16px)");
+var fieldStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  > div {\n    margin-top: 0;\n  }\n  & + & {\n    margin-top: ", ";\n  }\n"])), "var(--ds-space-200, 16px)");
 exports.fieldStyles = fieldStyles;

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

@@ -16,7 +16,7 @@ export const testIds = {
 };
 export const PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker",
-  packageVersion: "1.29.0",
+  packageVersion: "1.30.0",
   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 calc(-1 * ${"var(--ds-space-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/styled.js

@@ -1,8 +1,8 @@
 import { css } from '@emotion/react';
 export const tabsWrapperStyles = css`
   margin-top: ${"var(--ds-space-150, 12px)"};
-  margin-left: calc(-1 * ${"var(--ds-space-100, 8px)"});
-  margin-right: calc(-1 * ${"var(--ds-space-100, 8px)"});
+  margin-left: ${"var(--ds-space-negative-100, -8px)"};
+  margin-right: ${"var(--ds-space-negative-100, -8px)"};
 `;
 export const spinnerContainerStyles = css`
   min-height: 80px;

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/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/index.js

@@ -17,7 +17,7 @@ export var testIds = {
 };
 export var PACKAGE_DATA = {
   packageName: "@atlaskit/link-picker",
-  packageVersion: "1.29.0",
+  packageVersion: "1.30.0",
   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/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 calc(-1 * ", ");\n  list-style: none;\n"])), "var(--ds-space-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/styled.js

@@ -1,6 +1,6 @@
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 var _templateObject, _templateObject2, _templateObject3;
 import { css } from '@emotion/react';
-export var tabsWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  margin-left: calc(-1 * ", ");\n  margin-right: calc(-1 * ", ");\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)", "var(--ds-space-100, 8px)");
+export var tabsWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-negative-100, -8px)", "var(--ds-space-negative-100, -8px)");
 export var spinnerContainerStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  min-height: 80px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  align-self: center;\n  flex-grow: 1;\n"])));
 export var flexColumnStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n"])));

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/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/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.0",
+  "version": "1.30.0",
   "description": "Standalone link picker",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
@@ -53,19 +53,19 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.9.0",
+    "@atlaskit/button": "^16.10.0",
     "@atlaskit/empty-state": "^7.6.0",
     "@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.10.0",
     "@atlaskit/onboarding": "^10.8.2",
     "@atlaskit/platform-feature-flags": "^0.2.1",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/tabs": "^13.4.0",
     "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.20.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.10.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;
 }