@atlaskit/share 4.14.0 → 4.15.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/share
 
+## 4.15.0
+
+### Minor Changes
+
+- [#74889](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74889) [`517e7e939fd6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/517e7e939fd6) - [ux] Added `onFocus` UserPicker Option
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.14.1
+
+### Patch Changes
+
+- [#74147](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74147) [`a9a862061df0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a9a862061df0) - Enforce usage of spacing design tokens instead of hard-coded values
+
 ## 4.14.0
 
 ### Minor Changes

package/dist/cjs/components/CopyLinkButton.js

@@ -31,7 +31,7 @@ var Z_INDEX = _constants.layers.modal();
 var AUTO_DISMISS_SECONDS = 8;
 var AUTO_DISMISS_MS = exports.AUTO_DISMISS_MS = AUTO_DISMISS_SECONDS * 1000;
 var messageContainerStyle = exports.messageContainerStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  margin: ", "\n    ", ";\n"])), "var(--ds-space-negative-100, -8px)", "var(--ds-space-negative-200, -16px)");
-var messageTextStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-indent: 6px;\n"])));
+var messageTextStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-indent: ", ";\n"])), "var(--ds-space-075, 6px)");
 var isSafari = navigator.userAgent.indexOf('Safari');
 var HiddenInput = exports.HiddenInput = /*#__PURE__*/_react.default.forwardRef(
 // we need a hidden input to reliably copy to clipboard across all browsers.

package/dist/cjs/components/IntegrationButton.js

@@ -15,7 +15,7 @@ var _excluded = ["text", "textColor", "IntegrationIcon"];
 var _templateObject, _templateObject2;
 /** @jsx jsx */
 var integrationButtonCopyWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: left;\n"])));
-var integrationIconWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 1px ", " 0 0;\n"])), "var(--ds-space-100, 8px)");
+var integrationIconWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: ", " ", "\n    ", " ", ";\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-100, 8px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)");
 var IntegrationButton = function IntegrationButton(props) {
   var text = props.text,
     textColor = props.textColor,

package/dist/cjs/components/IntegrationForm.js

@@ -11,7 +11,7 @@ var _react2 = require("@emotion/react");
 var _typography = require("@atlaskit/theme/typography");
 var _templateObject;
 /** @jsx jsx */
-var formWrapperStyle = exports.formWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [class^='FormHeader__FormHeaderWrapper'] {\n    h1:first-child {\n      ", "\n\n      > span {\n        /* jira has a class override font settings on h1 > span in gh-custom-field-pickers.css */\n        font-size: inherit !important;\n        line-height: inherit !important;\n        letter-spacing: inherit !important;\n      }\n    }\n  }\n\n  [class^='FormSection__FormSectionWrapper'] {\n    margin-top: 0px;\n  }\n\n  [class^='FormFooter__FormFooterWrapper'] {\n    justify-content: space-between;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n\n  [class^='Field__FieldWrapper']:not(:first-child) {\n    margin-top: ", ";\n  }\n"])), (0, _typography.h500)(), "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)");
+var formWrapperStyle = exports.formWrapperStyle = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  [class^='FormHeader__FormHeaderWrapper'] {\n    h1:first-child {\n      ", "\n\n      > span {\n        /* jira has a class override font settings on h1 > span in gh-custom-field-pickers.css */\n        font-size: inherit !important;\n        line-height: inherit !important;\n        letter-spacing: inherit !important;\n      }\n    }\n  }\n\n  [class^='FormSection__FormSectionWrapper'] {\n    margin-top: ", ";\n  }\n\n  [class^='FormFooter__FormFooterWrapper'] {\n    justify-content: space-between;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n\n  [class^='Field__FieldWrapper']:not(:first-child) {\n    margin-top: ", ";\n  }\n"])), (0, _typography.h500)(), "var(--ds-space-0, 0px)", "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)");
 var IntegrationForm = exports.IntegrationForm = function IntegrationForm(_ref) {
   var Content = _ref.Content,
     _ref$onIntegrationClo = _ref.onIntegrationClose,

package/dist/cjs/components/ShareForm.js

@@ -43,12 +43,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 var submitButtonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-left: auto;\n"])));
-var centerAlignedIconWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-self: center;\n  padding: 0 10px;\n\n  > div {\n    line-height: 1;\n  }\n"])));
+var centerAlignedIconWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-self: center;\n  padding: ", " ", ";\n\n  > div {\n    line-height: 1;\n  }\n"])), "var(--ds-space-0, 0px)", "var(--ds-space-150, 12px)");
 var formWrapperStyles = exports.formWrapperStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n  width: 100%;\n\n  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */\n  #ghx-modes-tools #ghx-share & h1:first-child {\n    margin-top: 0;\n  }\n"])), "var(--ds-space-100, 8px)");
 var formFooterStyles = exports.formFooterStyles = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: flex-start;\n"])));
 var formFieldStyles = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", ";\n"])), "var(--ds-space-150, 12px)");
 var integrationWrapperStyles = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
-var integrationIconWrapperStyles = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", ";\n  margin-right: 5px;\n"])), "var(--ds-space-negative-075, -6px)");
+var integrationIconWrapperStyles = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", ";\n  margin-right: ", ";\n"])), "var(--ds-space-negative-075, -6px)", "var(--ds-space-050, 4px)");
 var requiredFieldInfoStyles = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  margin-bottom: ", ";\n  color: ", ";\n  font-size: ", "px;\n"])), "var(--ds-space-200, 16px)", "var(--ds-text-subtle, ".concat(_colors.N300, ")"), (0, _constants.fontSizeSmall)());
 var integrationTabText = function integrationTabText(integrationName) {
   return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.shareInIntegrationButtonText, {

package/dist/cjs/components/ShareHeader.js

@@ -15,7 +15,7 @@ var _templateObject, _templateObject2;
 /** @jsx jsx */
 var headerWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between;\n"])));
 var getFormHeaderTitleStyles = exports.getFormHeaderTitleStyles = function getFormHeaderTitleStyles(theme) {
-  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  line-height: 32px;\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  > span {\n    font-size: initial;\n  }\n"])), (0, _typography.h500)(theme), "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)");
+  return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  line-height: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  > span {\n    font-size: initial;\n  }\n"])), (0, _typography.h500)(theme), "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)");
 };
 var ShareHeader = exports.ShareHeader = function ShareHeader(_ref) {
   var title = _ref.title;

package/dist/cjs/components/SplitButton.js

@@ -16,7 +16,6 @@ var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-
 var _dropdownMenu = _interopRequireWildcard(require("@atlaskit/dropdown-menu"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _i18n = require("../i18n");
 var _analytics = require("./analytics/analytics");
 var _IntegrationButton = _interopRequireDefault(require("./IntegrationButton"));
@@ -25,8 +24,8 @@ var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var splitButtonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  button {\n    border-radius: ", "px 0 0 ", "px;\n  }\n  button:hover {\n    border-radius: ", "px 0 0 ", "px;\n  }\n"])), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)());
-var dropdownMenuWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: 1px;\n  button {\n    border-radius: 0 ", "px ", "px 0;\n  }\n  button:hover {\n    border-radius: 0 ", "px ", "px 0;\n  }\n"])), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)(), (0, _constants.borderRadius)());
+var splitButtonWrapperStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  button {\n    border-radius: ", " ", "\n      ", " ", ";\n  }\n  button:hover {\n    border-radius: ", " ", "\n      ", " ", ";\n  }\n"])), "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)");
+var dropdownMenuWrapperStyles = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: ", ";\n  button {\n    border-radius: ", " ", "\n      ", " ", ";\n  }\n  button:hover {\n    border-radius: ", " ", "\n      ", " ", ";\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)");
 
 // span
 var dropDownIntegrationButtonWrapperStyles = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  button:hover {\n    background: transparent;\n  }\n"])));

package/dist/cjs/components/UserPickerField.js

@@ -194,7 +194,8 @@ var UserPickerFieldComponent = exports.UserPickerFieldComponent = /*#__PURE__*/f
       var requiredMessage = getRequiredMessage(product, allowEmail, isBrowseUsersDisabled);
       var _ref2 = userPickerOptions !== null && userPickerOptions !== void 0 ? userPickerOptions : {},
         header = _ref2.header,
-        noOptionsMessageHandler = _ref2.noOptionsMessageHandler;
+        noOptionsMessageHandler = _ref2.noOptionsMessageHandler,
+        onFocus = _ref2.onFocus;
       var commonPickerProps = {
         fieldId: 'share',
         loadOptions: this.loadOptions,
@@ -206,7 +207,8 @@ var UserPickerFieldComponent = exports.UserPickerFieldComponent = /*#__PURE__*/f
         onInputChange: onInputChange,
         maxPickerHeight: _styles.MAX_PICKER_HEIGHT,
         textFieldBackgroundColor: true,
-        header: header
+        header: header,
+        onFocus: onFocus
       };
       var UserPickerComponent = enableSmartUserPicker && !isBrowseUsersDisabled ? _smartUserPicker.default : _userPicker.default;
       var menuPortalTarget = (0, _utils.getMenuPortalTargetCurrentHTML)(selectPortalRef);

package/dist/cjs/components/analytics/analytics.js

@@ -13,7 +13,7 @@ var buildAttributes = function buildAttributes() {
   var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return _objectSpread({
     packageName: "@atlaskit/share",
-    packageVersion: "4.14.0"
+    packageVersion: "4.15.0"
   }, attributes);
 };
 var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {

package/dist/es2019/components/CopyLinkButton.js

@@ -20,7 +20,7 @@ export const messageContainerStyle = css`
     ${"var(--ds-space-negative-200, -16px)"};
 `;
 const messageTextStyle = css`
-  text-indent: 6px;
+  text-indent: ${"var(--ds-space-075, 6px)"};
 `;
 const isSafari = navigator.userAgent.indexOf('Safari');
 export const HiddenInput = /*#__PURE__*/React.forwardRef(

package/dist/es2019/components/IntegrationButton.js

@@ -8,7 +8,8 @@ const integrationButtonCopyWrapperStyle = css`
   justify-content: left;
 `;
 const integrationIconWrapperStyle = css`
-  margin: 1px ${"var(--ds-space-100, 8px)"} 0 0;
+  margin: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-100, 8px)"}
+    ${"var(--ds-space-0, 0px)"} ${"var(--ds-space-0, 0px)"};
 `;
 const IntegrationButton = props => {
   const {

package/dist/es2019/components/IntegrationForm.js

@@ -17,7 +17,7 @@ export const formWrapperStyle = css`
   }
 
   [class^='FormSection__FormSectionWrapper'] {
-    margin-top: 0px;
+    margin-top: ${"var(--ds-space-0, 0px)"};
   }
 
   [class^='FormFooter__FormFooterWrapper'] {

package/dist/es2019/components/ShareForm.js

@@ -27,7 +27,7 @@ const submitButtonWrapperStyles = css`
 const centerAlignedIconWrapperStyles = css`
   display: flex;
   align-self: center;
-  padding: 0 10px;
+  padding: ${"var(--ds-space-0, 0px)"} ${"var(--ds-space-150, 12px)"};
 
   > div {
     line-height: 1;
@@ -55,7 +55,7 @@ const integrationWrapperStyles = css`
 `;
 const integrationIconWrapperStyles = css`
   margin-bottom: ${"var(--ds-space-negative-075, -6px)"};
-  margin-right: 5px;
+  margin-right: ${"var(--ds-space-050, 4px)"};
 `;
 const requiredFieldInfoStyles = css`
   margin-bottom: ${"var(--ds-space-200, 16px)"};

package/dist/es2019/components/ShareHeader.js

@@ -10,7 +10,7 @@ const headerWrapperStyles = css`
 `;
 export const getFormHeaderTitleStyles = theme => css`
   ${h500(theme)}
-  line-height: 32px;
+  line-height: ${"var(--ds-space-400, 32px)"};
   margin-right: ${"var(--ds-space-400, 32px)"};
   margin-top: ${"var(--ds-space-400, 32px)"};
   overflow: hidden;

package/dist/es2019/components/SplitButton.js

@@ -7,26 +7,29 @@ import Button from '@atlaskit/button/standard-button';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { N800 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { messages } from '../i18n';
 import { shareIntegrationButtonEvent } from './analytics/analytics';
 import IntegrationButton from './IntegrationButton';
 const splitButtonWrapperStyles = css`
   display: flex;
   button {
-    border-radius: ${borderRadius()}px 0 0 ${borderRadius()}px;
+    border-radius: ${"var(--ds-border-radius, 3px)"} ${"var(--ds-space-0, 0px)"}
+      ${"var(--ds-space-0, 0px)"} ${"var(--ds-border-radius, 3px)"};
   }
   button:hover {
-    border-radius: ${borderRadius()}px 0 0 ${borderRadius()}px;
+    border-radius: ${"var(--ds-border-radius, 3px)"} ${"var(--ds-space-0, 0px)"}
+      ${"var(--ds-space-0, 0px)"} ${"var(--ds-border-radius, 3px)"};
   }
 `;
 const dropdownMenuWrapperStyles = css`
-  margin-left: 1px;
+  margin-left: ${"var(--ds-space-025, 2px)"};
   button {
-    border-radius: 0 ${borderRadius()}px ${borderRadius()}px 0;
+    border-radius: ${"var(--ds-space-0, 0px)"} ${"var(--ds-border-radius, 3px)"}
+      ${"var(--ds-border-radius, 3px)"} ${"var(--ds-space-0, 0px)"};
   }
   button:hover {
-    border-radius: 0 ${borderRadius()}px ${borderRadius()}px 0;
+    border-radius: ${"var(--ds-space-0, 0px)"} ${"var(--ds-border-radius, 3px)"}
+      ${"var(--ds-border-radius, 3px)"} ${"var(--ds-space-0, 0px)"};
   }
 `;
 

package/dist/es2019/components/UserPickerField.js

@@ -161,7 +161,8 @@ export class UserPickerFieldComponent extends React.Component {
     const requiredMessage = getRequiredMessage(product, allowEmail, isBrowseUsersDisabled);
     const {
       header,
-      noOptionsMessageHandler
+      noOptionsMessageHandler,
+      onFocus
     } = userPickerOptions !== null && userPickerOptions !== void 0 ? userPickerOptions : {};
     const commonPickerProps = {
       fieldId: 'share',
@@ -174,7 +175,8 @@ export class UserPickerFieldComponent extends React.Component {
       onInputChange: onInputChange,
       maxPickerHeight: MAX_PICKER_HEIGHT,
       textFieldBackgroundColor: true,
-      header
+      header,
+      onFocus
     };
     const UserPickerComponent = enableSmartUserPicker && !isBrowseUsersDisabled ? SmartUserPicker : UserPicker;
     const menuPortalTarget = getMenuPortalTargetCurrentHTML(selectPortalRef);

package/dist/es2019/components/analytics/analytics.js

@@ -1,7 +1,7 @@
 import { isEmail, isTeam, isUser } from '@atlaskit/smart-user-picker';
 const buildAttributes = (attributes = {}) => ({
   packageName: "@atlaskit/share",
-  packageVersion: "4.14.0",
+  packageVersion: "4.15.0",
   ...attributes
 });
 const createEvent = (eventType, source, action, actionSubject, actionSubjectId, attributes = {}) => ({

package/dist/esm/components/CopyLinkButton.js

@@ -24,7 +24,7 @@ var Z_INDEX = layers.modal();
 var AUTO_DISMISS_SECONDS = 8;
 export var AUTO_DISMISS_MS = AUTO_DISMISS_SECONDS * 1000;
 export var messageContainerStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  margin: ", "\n    ", ";\n"])), "var(--ds-space-negative-100, -8px)", "var(--ds-space-negative-200, -16px)");
-var messageTextStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-indent: 6px;\n"])));
+var messageTextStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  text-indent: ", ";\n"])), "var(--ds-space-075, 6px)");
 var isSafari = navigator.userAgent.indexOf('Safari');
 export var HiddenInput = /*#__PURE__*/React.forwardRef(
 // we need a hidden input to reliably copy to clipboard across all browsers.

package/dist/esm/components/IntegrationButton.js

@@ -8,7 +8,7 @@ import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import { N500 } from '@atlaskit/theme/colors';
 var integrationButtonCopyWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: left;\n"])));
-var integrationIconWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: 1px ", " 0 0;\n"])), "var(--ds-space-100, 8px)");
+var integrationIconWrapperStyle = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin: ", " ", "\n    ", " ", ";\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-100, 8px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)");
 var IntegrationButton = function IntegrationButton(props) {
   var text = props.text,
     textColor = props.textColor,

package/dist/esm/components/IntegrationForm.js

@@ -4,7 +4,7 @@ var _templateObject;
 import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { h500 } from '@atlaskit/theme/typography';
-export var formWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [class^='FormHeader__FormHeaderWrapper'] {\n    h1:first-child {\n      ", "\n\n      > span {\n        /* jira has a class override font settings on h1 > span in gh-custom-field-pickers.css */\n        font-size: inherit !important;\n        line-height: inherit !important;\n        letter-spacing: inherit !important;\n      }\n    }\n  }\n\n  [class^='FormSection__FormSectionWrapper'] {\n    margin-top: 0px;\n  }\n\n  [class^='FormFooter__FormFooterWrapper'] {\n    justify-content: space-between;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n\n  [class^='Field__FieldWrapper']:not(:first-child) {\n    margin-top: ", ";\n  }\n"])), h500(), "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)");
+export var formWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  [class^='FormHeader__FormHeaderWrapper'] {\n    h1:first-child {\n      ", "\n\n      > span {\n        /* jira has a class override font settings on h1 > span in gh-custom-field-pickers.css */\n        font-size: inherit !important;\n        line-height: inherit !important;\n        letter-spacing: inherit !important;\n      }\n    }\n  }\n\n  [class^='FormSection__FormSectionWrapper'] {\n    margin-top: ", ";\n  }\n\n  [class^='FormFooter__FormFooterWrapper'] {\n    justify-content: space-between;\n    margin-top: ", ";\n    margin-bottom: ", ";\n  }\n\n  [class^='Field__FieldWrapper']:not(:first-child) {\n    margin-top: ", ";\n  }\n"])), h500(), "var(--ds-space-0, 0px)", "var(--ds-space-150, 12px)", "var(--ds-space-300, 24px)", "var(--ds-space-150, 12px)");
 export var IntegrationForm = function IntegrationForm(_ref) {
   var Content = _ref.Content,
     _ref$onIntegrationClo = _ref.onIntegrationClose,

package/dist/esm/components/ShareForm.js

@@ -33,12 +33,12 @@ import { IntegrationForm } from './IntegrationForm';
 import { ShareHeader } from './ShareHeader';
 import { UserPickerField } from './UserPickerField';
 var submitButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  margin-left: auto;\n"])));
-var centerAlignedIconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-self: center;\n  padding: 0 10px;\n\n  > div {\n    line-height: 1;\n  }\n"])));
+var centerAlignedIconWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-self: center;\n  padding: ", " ", ";\n\n  > div {\n    line-height: 1;\n  }\n"])), "var(--ds-space-0, 0px)", "var(--ds-space-150, 12px)");
 export var formWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  margin-top: ", ";\n  width: 100%;\n\n  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */\n  #ghx-modes-tools #ghx-share & h1:first-child {\n    margin-top: 0;\n  }\n"])), "var(--ds-space-100, 8px)");
 export var formFooterStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: flex-start;\n"])));
 var formFieldStyles = css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n"])), "var(--ds-space-150, 12px)");
 var integrationWrapperStyles = css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n"])));
-var integrationIconWrapperStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  margin-right: 5px;\n"])), "var(--ds-space-negative-075, -6px)");
+var integrationIconWrapperStyles = css(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  margin-right: ", ";\n"])), "var(--ds-space-negative-075, -6px)", "var(--ds-space-050, 4px)");
 var requiredFieldInfoStyles = css(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  margin-bottom: ", ";\n  color: ", ";\n  font-size: ", "px;\n"])), "var(--ds-space-200, 16px)", "var(--ds-text-subtle, ".concat(N300, ")"), fontSizeSmall());
 var integrationTabText = function integrationTabText(integrationName) {
   return jsx(FormattedMessage, _extends({}, messages.shareInIntegrationButtonText, {

package/dist/esm/components/ShareHeader.js

@@ -8,7 +8,7 @@ import { h500 } from '@atlaskit/theme/typography';
 import { messages } from '../i18n';
 var headerWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: space-between;\n"])));
 export var getFormHeaderTitleStyles = function getFormHeaderTitleStyles(theme) {
-  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  line-height: 32px;\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  > span {\n    font-size: initial;\n  }\n"])), h500(theme), "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)");
+  return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  ", "\n  line-height: ", ";\n  margin-right: ", ";\n  margin-top: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  > span {\n    font-size: initial;\n  }\n"])), h500(theme), "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)", "var(--ds-space-400, 32px)");
 };
 export var ShareHeader = function ShareHeader(_ref) {
   var title = _ref.title;

package/dist/esm/components/SplitButton.js

@@ -11,12 +11,11 @@ import Button from '@atlaskit/button/standard-button';
 import DropdownMenu, { DropdownItem, DropdownItemGroup } from '@atlaskit/dropdown-menu';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import { N800 } from '@atlaskit/theme/colors';
-import { borderRadius } from '@atlaskit/theme/constants';
 import { messages } from '../i18n';
 import { shareIntegrationButtonEvent } from './analytics/analytics';
 import IntegrationButton from './IntegrationButton';
-var splitButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  button {\n    border-radius: ", "px 0 0 ", "px;\n  }\n  button:hover {\n    border-radius: ", "px 0 0 ", "px;\n  }\n"])), borderRadius(), borderRadius(), borderRadius(), borderRadius());
-var dropdownMenuWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: 1px;\n  button {\n    border-radius: 0 ", "px ", "px 0;\n  }\n  button:hover {\n    border-radius: 0 ", "px ", "px 0;\n  }\n"])), borderRadius(), borderRadius(), borderRadius(), borderRadius());
+var splitButtonWrapperStyles = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  button {\n    border-radius: ", " ", "\n      ", " ", ";\n  }\n  button:hover {\n    border-radius: ", " ", "\n      ", " ", ";\n  }\n"])), "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)");
+var dropdownMenuWrapperStyles = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  margin-left: ", ";\n  button {\n    border-radius: ", " ", "\n      ", " ", ";\n  }\n  button:hover {\n    border-radius: ", " ", "\n      ", " ", ";\n  }\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)", "var(--ds-space-0, 0px)", "var(--ds-border-radius, 3px)", "var(--ds-border-radius, 3px)", "var(--ds-space-0, 0px)");
 
 // span
 var dropDownIntegrationButtonWrapperStyles = css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  button:hover {\n    background: transparent;\n  }\n"])));

package/dist/esm/components/UserPickerField.js

@@ -184,7 +184,8 @@ export var UserPickerFieldComponent = /*#__PURE__*/function (_React$Component) {
       var requiredMessage = getRequiredMessage(product, allowEmail, isBrowseUsersDisabled);
       var _ref2 = userPickerOptions !== null && userPickerOptions !== void 0 ? userPickerOptions : {},
         header = _ref2.header,
-        noOptionsMessageHandler = _ref2.noOptionsMessageHandler;
+        noOptionsMessageHandler = _ref2.noOptionsMessageHandler,
+        onFocus = _ref2.onFocus;
       var commonPickerProps = {
         fieldId: 'share',
         loadOptions: this.loadOptions,
@@ -196,7 +197,8 @@ export var UserPickerFieldComponent = /*#__PURE__*/function (_React$Component) {
         onInputChange: onInputChange,
         maxPickerHeight: MAX_PICKER_HEIGHT,
         textFieldBackgroundColor: true,
-        header: header
+        header: header,
+        onFocus: onFocus
       };
       var UserPickerComponent = enableSmartUserPicker && !isBrowseUsersDisabled ? SmartUserPicker : UserPicker;
       var menuPortalTarget = getMenuPortalTargetCurrentHTML(selectPortalRef);

package/dist/esm/components/analytics/analytics.js

@@ -6,7 +6,7 @@ var buildAttributes = function buildAttributes() {
   var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return _objectSpread({
     packageName: "@atlaskit/share",
-    packageVersion: "4.14.0"
+    packageVersion: "4.15.0"
   }, attributes);
 };
 var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {

package/dist/types/types/UserPickerOptions.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export type UserPickerOptions = {
-    header?: React.ReactNode;
+import type { UserPickerProps } from '@atlaskit/user-picker';
+export type UserPickerOptions = Pick<UserPickerProps, 'onFocus' | 'header'> & {
     /** Message to be shown when the menu is open but no options are provided.
      * If message is null, no message will be displayed.
      * If message is undefined, default message will be displayed.

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-export type UserPickerOptions = {
-    header?: React.ReactNode;
+import type { UserPickerProps } from '@atlaskit/user-picker';
+export type UserPickerOptions = Pick<UserPickerProps, 'onFocus' | 'header'> & {
     /** Message to be shown when the menu is open but no options are provided.
      * If message is null, no message will be displayed.
      * If message is undefined, default message will be displayed.

package/docs/0-intro.tsx

@@ -8,14 +8,15 @@ import {
   md,
   Props,
 } from '@atlaskit/docs';
+import { token } from '@atlaskit/tokens';
 
 export default md`
   ${(
     <>
-      <div style={{ marginBottom: '0.5rem' }}>
+      <div style={{ marginBottom: `${token('space.100', '8px')}` }}>
         <AtlassianInternalWarning />
       </div>
-      <div style={{ marginTop: '0.5rem' }}>
+      <div style={{ marginTop: `${token('space.100', '8px')}` }}>
         <DevPreviewWarning />
       </div>
     </>
@@ -23,15 +24,15 @@ export default md`
 
   This package provides the view components allowing users to share a resource by
   sharing with User Picker, or by copying the share link.
-  
+
   The goal is to provide a consistent share experience across products.
-  
-  ## Usage 
-  
+
+  ## Usage
+
   Import the component in your React app as follows:
-  
+
   ${code`import ShareDialogContainer from '@atlaskit/share;`}
-  
+
   ${(
     <Example
       packageName="@atlaskit/share"
@@ -40,16 +41,16 @@ export default md`
       source={require('!!raw-loader!../examples/00-integration-with-configs')}
     />
   )}
- 
+
   ${(
     <Props
       heading="Share Props"
       props={require('!!extract-react-types-loader!../src/components/ShareDialogContainer')}
     />
   )}
-  
+
   ## Notes
-  
+
   The share modal will be instantiated immediately but starts hidden.
   It will **retain the form state** until the user either:
   - triggers a share = share completed

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/share",
-  "version": "4.14.0",
+  "version": "4.15.0",
   "description": "Fabric Share Element",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -49,15 +49,15 @@
     "@atlaskit/popper": "^5.5.4",
     "@atlaskit/popup": "^1.12.0",
     "@atlaskit/portal": "^4.4.0",
-    "@atlaskit/smart-user-picker": "^6.7.0",
+    "@atlaskit/smart-user-picker": "^6.8.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/tabs": "^14.0.0",
     "@atlaskit/textarea": "^5.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.37.0",
+    "@atlaskit/tokens": "^1.38.0",
     "@atlaskit/tooltip": "^18.1.0",
     "@atlaskit/ufo": "^0.2.0",
-    "@atlaskit/user-picker": "^10.16.0",
+    "@atlaskit/user-picker": "^10.19.0",
     "@atlaskit/util-service-support": "^6.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",