@atlaskit/share 4.16.5 → 4.16.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/share
 
+## 4.16.7
+
+### Patch Changes
+
+- [#91429](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/91429) [`3de462db1b3f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3de462db1b3f) - Minor changes to Typescript types to improve compatibility with React 18
+
+## 4.16.6
+
+### Patch Changes
+
+- [#88791](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88791) [`f0006aeb4509`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f0006aeb4509) - PTC-8940 Add aria-label for InlineDialogContentWrapper
+
 ## 4.16.5
 
 ### Patch Changes

package/dist/cjs/components/ShareDialogContainer.js

@@ -48,7 +48,6 @@ var memoizedFormatCopyLink = (0, _memoizeOne.default)(function (origin, link) {
 function getCurrentPageUrl() {
   return window.location.href;
 }
-
 /**
  * This component serves as a Provider to provide customizable implementations
  * to ShareDialogTrigger component

package/dist/cjs/components/ShareForm.js

@@ -14,7 +14,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
@@ -34,22 +33,51 @@ var _CopyLinkButton = _interopRequireDefault(require("./CopyLinkButton"));
 var _IntegrationForm = require("./IntegrationForm");
 var _ShareHeader = require("./ShareHeader");
 var _UserPickerField = require("./UserPickerField");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-/** @jsx jsx */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-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: ", " ", ";\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: ", ";\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)());
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /** @jsx jsx */
+var submitButtonWrapperStyles = (0, _react2.css)({
+  display: 'flex',
+  marginLeft: 'auto'
+});
+var centerAlignedIconWrapperStyles = (0, _react2.css)({
+  display: 'flex',
+  alignSelf: 'center',
+  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-150, 12px)"),
+  '> div': {
+    lineHeight: 1
+  }
+});
+var formWrapperStyles = exports.formWrapperStyles = (0, _react2.css)({
+  marginTop: "var(--ds-space-100, 8px)",
+  width: '100%',
+  '#ghx-modes-tools #ghx-share & h1:first-child': {
+    marginTop: 0
+  }
+});
+var formFooterStyles = exports.formFooterStyles = (0, _react2.css)({
+  display: 'flex',
+  justifyContent: 'flex-start'
+});
+var formFieldStyles = (0, _react2.css)({
+  marginBottom: "var(--ds-space-150, 12px)"
+});
+var integrationWrapperStyles = (0, _react2.css)({
+  display: 'flex',
+  alignItems: 'center'
+});
+var integrationIconWrapperStyles = (0, _react2.css)({
+  marginBottom: "var(--ds-space-negative-075, -6px)",
+  marginRight: "var(--ds-space-050, 4px)"
+});
+var requiredFieldInfoStyles = (0, _react2.css)({
+  marginBottom: "var(--ds-space-200, 16px)",
+  color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
+  fontSize: "".concat((0, _constants.fontSizeSmall)(), "px")
+});
 var integrationTabText = function integrationTabText(integrationName) {
   return (0, _react2.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.shareInIntegrationButtonText, {
     values: {

package/dist/cjs/components/ShareFormWrapper/ShareFormWrapper.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _i18n = require("../../i18n");
 var _ShareHeader = require("../ShareHeader");
 var _styled = require("./styled");
 var ShareFormWrapper = function ShareFormWrapper(_ref) {
@@ -15,7 +17,11 @@ var ShareFormWrapper = function ShareFormWrapper(_ref) {
     children = _ref$children === void 0 ? null : _ref$children,
     _ref$footer = _ref.footer,
     footer = _ref$footer === void 0 ? null : _ref$footer;
-  return /*#__PURE__*/_react.default.createElement(_styled.InlineDialogContentWrapper, null, /*#__PURE__*/_react.default.createElement(_styled.InlineDialogFormWrapper, null, shouldShowTitle && /*#__PURE__*/_react.default.createElement(_ShareHeader.ShareHeader, {
+  var _useIntl = (0, _reactIntlNext.useIntl)(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/_react.default.createElement(_styled.InlineDialogContentWrapper, {
+    label: formatMessage(_i18n.messages.formTitle)
+  }, /*#__PURE__*/_react.default.createElement(_styled.InlineDialogFormWrapper, null, shouldShowTitle && /*#__PURE__*/_react.default.createElement(_ShareHeader.ShareHeader, {
     title: shareFormTitle
   }), children), footer);
 };

package/dist/cjs/components/ShareFormWrapper/styled.js

@@ -23,10 +23,12 @@ var InlineDialogFormWrapper = exports.InlineDialogFormWrapper = function InlineD
  * packages/design-system/inline-dialog/src/InlineDialog/styled.ts:20:3
  */
 var InlineDialogContentWrapper = exports.InlineDialogContentWrapper = function InlineDialogContentWrapper(_ref2) {
-  var children = _ref2.children;
+  var children = _ref2.children,
+    label = _ref2.label;
   return (0, _react.jsx)("div", {
     css: {
       padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-300, 24px)")
-    }
+    },
+    "aria-label": label
   }, children);
 };

package/dist/cjs/components/ShareHeader.js

@@ -5,17 +5,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getFormHeaderTitleStyles = exports.ShareHeader = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _typography = require("@atlaskit/theme/typography");
 var _i18n = require("../i18n");
-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 headerWrapperStyles = (0, _react2.css)({
+  display: 'flex',
+  justifyContent: 'space-between'
+});
 var getFormHeaderTitleStyles = exports.getFormHeaderTitleStyles = function getFormHeaderTitleStyles(theme) {
-  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)");
+  return (0, _react2.css)((0, _typography.h500)(theme), {
+    lineHeight: "var(--ds-space-400, 32px)",
+    marginRight: "var(--ds-space-400, 32px)",
+    marginTop: "var(--ds-space-400, 32px)",
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    '> span': {
+      fontSize: 'initial'
+    }
+  });
 };
 var ShareHeader = exports.ShareHeader = function ShareHeader(_ref) {
   var title = _ref.title;

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.16.5"
+    packageVersion: "4.16.7"
   }, attributes);
 };
 var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {

package/dist/es2019/components/ShareDialogContainer.js

@@ -25,7 +25,6 @@ const memoizedFormatCopyLink = memoizeOne((origin, link) => origin.addToUrl(link
 function getCurrentPageUrl() {
   return window.location.href;
 }
-
 /**
  * This component serves as a Provider to provide customizable implementations
  * to ShareDialogTrigger component

package/dist/es2019/components/ShareForm.js

@@ -20,48 +20,45 @@ import CopyLinkButton from './CopyLinkButton';
 import { IntegrationForm } from './IntegrationForm';
 import { ShareHeader } from './ShareHeader';
 import { UserPickerField } from './UserPickerField';
-const submitButtonWrapperStyles = css`
-  display: flex;
-  margin-left: auto;
-`;
-const centerAlignedIconWrapperStyles = css`
-  display: flex;
-  align-self: center;
-  padding: ${"var(--ds-space-0, 0px)"} ${"var(--ds-space-150, 12px)"};
-
-  > div {
-    line-height: 1;
+const submitButtonWrapperStyles = css({
+  display: 'flex',
+  marginLeft: 'auto'
+});
+const centerAlignedIconWrapperStyles = css({
+  display: 'flex',
+  alignSelf: 'center',
+  padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-150, 12px)"}`,
+  '> div': {
+    lineHeight: 1
   }
-`;
-export const formWrapperStyles = css`
-  margin-top: ${"var(--ds-space-100, 8px)"};
-  width: 100%;
-
-  /* jira has a class override font settings on h1 in gh-custom-field-pickers.css */
-  #ghx-modes-tools #ghx-share & h1:first-child {
-    margin-top: 0;
+});
+export const formWrapperStyles = css({
+  marginTop: "var(--ds-space-100, 8px)",
+  width: '100%',
+  '#ghx-modes-tools #ghx-share & h1:first-child': {
+    marginTop: 0
   }
-`;
-export const formFooterStyles = css`
-  display: flex;
-  justify-content: flex-start;
-`;
-const formFieldStyles = css`
-  margin-bottom: ${"var(--ds-space-150, 12px)"};
-`;
-const integrationWrapperStyles = css`
-  display: flex;
-  align-items: center;
-`;
-const integrationIconWrapperStyles = css`
-  margin-bottom: ${"var(--ds-space-negative-075, -6px)"};
-  margin-right: ${"var(--ds-space-050, 4px)"};
-`;
-const requiredFieldInfoStyles = css`
-  margin-bottom: ${"var(--ds-space-200, 16px)"};
-  color: ${`var(--ds-text-subtle, ${N300})`};
-  font-size: ${fontSizeSmall()}px;
-`;
+});
+export const formFooterStyles = css({
+  display: 'flex',
+  justifyContent: 'flex-start'
+});
+const formFieldStyles = css({
+  marginBottom: "var(--ds-space-150, 12px)"
+});
+const integrationWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center'
+});
+const integrationIconWrapperStyles = css({
+  marginBottom: "var(--ds-space-negative-075, -6px)",
+  marginRight: "var(--ds-space-050, 4px)"
+});
+const requiredFieldInfoStyles = css({
+  marginBottom: "var(--ds-space-200, 16px)",
+  color: `var(--ds-text-subtle, ${N300})`,
+  fontSize: `${fontSizeSmall()}px`
+});
 const integrationTabText = integrationName => jsx(FormattedMessage, _extends({}, messages.shareInIntegrationButtonText, {
   values: {
     integrationName

package/dist/es2019/components/ShareFormWrapper/ShareFormWrapper.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../../i18n';
 import { ShareHeader } from '../ShareHeader';
 import { InlineDialogContentWrapper, InlineDialogFormWrapper } from './styled';
 const ShareFormWrapper = ({
@@ -6,7 +8,14 @@ const ShareFormWrapper = ({
   shouldShowTitle,
   children = null,
   footer = null
-}) => /*#__PURE__*/React.createElement(InlineDialogContentWrapper, null, /*#__PURE__*/React.createElement(InlineDialogFormWrapper, null, shouldShowTitle && /*#__PURE__*/React.createElement(ShareHeader, {
-  title: shareFormTitle
-}), children), footer);
+}) => {
+  const {
+    formatMessage
+  } = useIntl();
+  return /*#__PURE__*/React.createElement(InlineDialogContentWrapper, {
+    label: formatMessage(messages.formTitle)
+  }, /*#__PURE__*/React.createElement(InlineDialogFormWrapper, null, shouldShowTitle && /*#__PURE__*/React.createElement(ShareHeader, {
+    title: shareFormTitle
+  }), children), footer);
+};
 export default ShareFormWrapper;

package/dist/es2019/components/ShareFormWrapper/styled.js

@@ -16,9 +16,11 @@ export const InlineDialogFormWrapper = ({
  * packages/design-system/inline-dialog/src/InlineDialog/styled.ts:20:3
  */
 export const InlineDialogContentWrapper = ({
-  children
+  children,
+  label
 }) => jsx("div", {
   css: {
     padding: `${"var(--ds-space-200, 16px)"} ${"var(--ds-space-300, 24px)"}`
-  }
+  },
+  "aria-label": label
 }, children);

package/dist/es2019/components/ShareHeader.js

@@ -4,23 +4,21 @@ import { css, jsx, useTheme } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { h500 } from '@atlaskit/theme/typography';
 import { messages } from '../i18n';
-const headerWrapperStyles = css`
-  display: flex;
-  justify-content: space-between;
-`;
-export const getFormHeaderTitleStyles = theme => css`
-  ${h500(theme)}
-  line-height: ${"var(--ds-space-400, 32px)"};
-  margin-right: ${"var(--ds-space-400, 32px)"};
-  margin-top: ${"var(--ds-space-400, 32px)"};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-
-  > span {
-    font-size: initial;
+const headerWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between'
+});
+export const getFormHeaderTitleStyles = theme => css(h500(theme), {
+  lineHeight: "var(--ds-space-400, 32px)",
+  marginRight: "var(--ds-space-400, 32px)",
+  marginTop: "var(--ds-space-400, 32px)",
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap',
+  '> span': {
+    fontSize: 'initial'
   }
-`;
+});
 export const ShareHeader = ({
   title
 }) => {

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

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

package/dist/esm/components/ShareDialogContainer.js

@@ -41,7 +41,6 @@ var memoizedFormatCopyLink = memoizeOne(function (origin, link) {
 function getCurrentPageUrl() {
   return window.location.href;
 }
-
 /**
  * This component serves as a Provider to provide customizable implementations
  * to ShareDialogTrigger component

package/dist/esm/components/ShareForm.js

@@ -6,8 +6,6 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -32,14 +30,45 @@ import CopyLinkButton from './CopyLinkButton';
 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: ", " ", ";\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: ", ";\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 submitButtonWrapperStyles = css({
+  display: 'flex',
+  marginLeft: 'auto'
+});
+var centerAlignedIconWrapperStyles = css({
+  display: 'flex',
+  alignSelf: 'center',
+  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-150, 12px)"),
+  '> div': {
+    lineHeight: 1
+  }
+});
+export var formWrapperStyles = css({
+  marginTop: "var(--ds-space-100, 8px)",
+  width: '100%',
+  '#ghx-modes-tools #ghx-share & h1:first-child': {
+    marginTop: 0
+  }
+});
+export var formFooterStyles = css({
+  display: 'flex',
+  justifyContent: 'flex-start'
+});
+var formFieldStyles = css({
+  marginBottom: "var(--ds-space-150, 12px)"
+});
+var integrationWrapperStyles = css({
+  display: 'flex',
+  alignItems: 'center'
+});
+var integrationIconWrapperStyles = css({
+  marginBottom: "var(--ds-space-negative-075, -6px)",
+  marginRight: "var(--ds-space-050, 4px)"
+});
+var requiredFieldInfoStyles = css({
+  marginBottom: "var(--ds-space-200, 16px)",
+  color: "var(--ds-text-subtle, ".concat(N300, ")"),
+  fontSize: "".concat(fontSizeSmall(), "px")
+});
 var integrationTabText = function integrationTabText(integrationName) {
   return jsx(FormattedMessage, _extends({}, messages.shareInIntegrationButtonText, {
     values: {

package/dist/esm/components/ShareFormWrapper/ShareFormWrapper.js

@@ -1,4 +1,6 @@
 import React from 'react';
+import { useIntl } from 'react-intl-next';
+import { messages } from '../../i18n';
 import { ShareHeader } from '../ShareHeader';
 import { InlineDialogContentWrapper, InlineDialogFormWrapper } from './styled';
 var ShareFormWrapper = function ShareFormWrapper(_ref) {
@@ -8,7 +10,11 @@ var ShareFormWrapper = function ShareFormWrapper(_ref) {
     children = _ref$children === void 0 ? null : _ref$children,
     _ref$footer = _ref.footer,
     footer = _ref$footer === void 0 ? null : _ref$footer;
-  return /*#__PURE__*/React.createElement(InlineDialogContentWrapper, null, /*#__PURE__*/React.createElement(InlineDialogFormWrapper, null, shouldShowTitle && /*#__PURE__*/React.createElement(ShareHeader, {
+  var _useIntl = useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  return /*#__PURE__*/React.createElement(InlineDialogContentWrapper, {
+    label: formatMessage(messages.formTitle)
+  }, /*#__PURE__*/React.createElement(InlineDialogFormWrapper, null, shouldShowTitle && /*#__PURE__*/React.createElement(ShareHeader, {
     title: shareFormTitle
   }), children), footer);
 };

package/dist/esm/components/ShareFormWrapper/styled.js

@@ -17,10 +17,12 @@ export var InlineDialogFormWrapper = function InlineDialogFormWrapper(_ref) {
  * packages/design-system/inline-dialog/src/InlineDialog/styled.ts:20:3
  */
 export var InlineDialogContentWrapper = function InlineDialogContentWrapper(_ref2) {
-  var children = _ref2.children;
+  var children = _ref2.children,
+    label = _ref2.label;
   return jsx("div", {
     css: {
       padding: "var(--ds-space-200, 16px)".concat(" ", "var(--ds-space-300, 24px)")
-    }
+    },
+    "aria-label": label
   }, children);
 };

package/dist/esm/components/ShareHeader.js

@@ -1,14 +1,25 @@
-import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
-var _templateObject, _templateObject2;
 /** @jsx jsx */
 import React from 'react';
 import { css, jsx, useTheme } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 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"])));
+var headerWrapperStyles = css({
+  display: 'flex',
+  justifyContent: 'space-between'
+});
 export var getFormHeaderTitleStyles = function getFormHeaderTitleStyles(theme) {
-  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)");
+  return css(h500(theme), {
+    lineHeight: "var(--ds-space-400, 32px)",
+    marginRight: "var(--ds-space-400, 32px)",
+    marginTop: "var(--ds-space-400, 32px)",
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    '> span': {
+      fontSize: 'initial'
+    }
+  });
 };
 export var ShareHeader = function ShareHeader(_ref) {
   var title = _ref.title;

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.16.5"
+    packageVersion: "4.16.7"
   }, attributes);
 };
 var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {

package/dist/types/components/ShareDialogContainer.d.ts

@@ -12,21 +12,18 @@ export type State = {
     shortenedCopyLink: null | string;
     shortenedCopyLinkData?: ShortenRequest;
 };
+type ShareDialogContainerInternalProps = WithAnalyticsEventsProps & ShareDialogContainerProps;
 /**
  * This component serves as a Provider to provide customizable implementations
  * to ShareDialogTrigger component
  */
-export declare class ShareDialogContainerInternal extends React.Component<WithAnalyticsEventsProps & ShareDialogContainerProps, State> {
+export declare class ShareDialogContainerInternal extends React.Component<ShareDialogContainerInternalProps, State> {
     private shareClient;
     private urlShortenerClient;
     private _isMounted;
     private _urlShorteningRequestCounter;
     private _lastUrlShorteningWasTooSlow;
-    static defaultProps: {
-        enableSmartUserPicker: boolean;
-        shareeAction: "view" | "edit";
-        product: string;
-    };
+    static defaultProps: Partial<ShareDialogContainerInternalProps>;
     constructor(props: ShareDialogContainerProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
@@ -50,8 +47,5 @@ export declare class ShareDialogContainerInternal extends React.Component<WithAn
     getFormShareLink: () => string;
     render(): JSX.Element;
 }
-export declare const ShareDialogContainer: React.ForwardRefExoticComponent<Pick<Omit<WithAnalyticsEventsProps & ShareDialogContainerProps, keyof WithAnalyticsEventsProps>, "orgId" | "onTriggerButtonClick" | "isAutoOpenDialog" | "shouldCloseOnEscapePress" | "dialogPlacement" | "loadUserOptions" | "onDialogOpen" | "onDialogClose" | "onUserSelectionChange" | "renderCustomTriggerButton" | "shareContentType" | "shareContentSubType" | "shareContentId" | "shareFormTitle" | "shareFormHelperMessage" | "showFlags" | "loggedInAccountId" | "triggerButtonAppearance" | "triggerButtonIcon" | "triggerButtonStyle" | "triggerButtonTooltipPosition" | "triggerButtonTooltipText" | "cloudId" | "bottomMessage" | "customFooter" | "isCopyDisabled" | "isPublicLink" | "integrationMode" | "shareFieldsFooter" | "shareIntegrations" | "shareAri" | "tabIndex" | "copyTooltipText" | "dialogZIndex" | "isBrowseUsersDisabled" | "userPickerOptions" | "shareClient" | "urlShortenerClient" | "shortLinkData" | "formatCopyLink" | "originTracingFactory" | "productId" | "shareLink" | "shareTitle" | "useUrlShortener" | "workspaceAri"> & Partial<Pick<Omit<WithAnalyticsEventsProps & ShareDialogContainerProps, keyof WithAnalyticsEventsProps>, "enableSmartUserPicker" | "product" | "shareeAction">> & Partial<Pick<{
-    enableSmartUserPicker: boolean;
-    shareeAction: "view" | "edit";
-    product: string;
-}, never>> & React.RefAttributes<any>>;
+export declare const ShareDialogContainer: React.ForwardRefExoticComponent<Pick<Pick<Omit<ShareDialogContainerInternalProps, keyof WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<ShareDialogContainerInternalProps, keyof WithAnalyticsEventsProps>, keyof ShareDialogContainerProps>> & Partial<Pick<Partial<ShareDialogContainerInternalProps>, keyof WithAnalyticsEventsProps>>, "createAnalyticsEvent" | keyof ShareDialogContainerProps> & React.RefAttributes<any>>;
+export {};

package/dist/types/components/ShareFormWrapper/styled.d.ts

@@ -8,4 +8,6 @@ export declare const InlineDialogFormWrapper: ({ children, }: PropsWithChildren<
  *
  * packages/design-system/inline-dialog/src/InlineDialog/styled.ts:20:3
  */
-export declare const InlineDialogContentWrapper: ({ children, }: PropsWithChildren<{}>) => jsx.JSX.Element;
+export declare const InlineDialogContentWrapper: ({ children, label, }: PropsWithChildren<{
+    label?: string | undefined;
+}>) => jsx.JSX.Element;

package/dist/types-ts4.5/components/ShareDialogContainer.d.ts

@@ -12,21 +12,18 @@ export type State = {
     shortenedCopyLink: null | string;
     shortenedCopyLinkData?: ShortenRequest;
 };
+type ShareDialogContainerInternalProps = WithAnalyticsEventsProps & ShareDialogContainerProps;
 /**
  * This component serves as a Provider to provide customizable implementations
  * to ShareDialogTrigger component
  */
-export declare class ShareDialogContainerInternal extends React.Component<WithAnalyticsEventsProps & ShareDialogContainerProps, State> {
+export declare class ShareDialogContainerInternal extends React.Component<ShareDialogContainerInternalProps, State> {
     private shareClient;
     private urlShortenerClient;
     private _isMounted;
     private _urlShorteningRequestCounter;
     private _lastUrlShorteningWasTooSlow;
-    static defaultProps: {
-        enableSmartUserPicker: boolean;
-        shareeAction: "view" | "edit";
-        product: string;
-    };
+    static defaultProps: Partial<ShareDialogContainerInternalProps>;
     constructor(props: ShareDialogContainerProps);
     componentDidMount(): void;
     componentWillUnmount(): void;
@@ -50,8 +47,5 @@ export declare class ShareDialogContainerInternal extends React.Component<WithAn
     getFormShareLink: () => string;
     render(): JSX.Element;
 }
-export declare const ShareDialogContainer: React.ForwardRefExoticComponent<Pick<Omit<WithAnalyticsEventsProps & ShareDialogContainerProps, keyof WithAnalyticsEventsProps>, "orgId" | "onTriggerButtonClick" | "isAutoOpenDialog" | "shouldCloseOnEscapePress" | "dialogPlacement" | "loadUserOptions" | "onDialogOpen" | "onDialogClose" | "onUserSelectionChange" | "renderCustomTriggerButton" | "shareContentType" | "shareContentSubType" | "shareContentId" | "shareFormTitle" | "shareFormHelperMessage" | "showFlags" | "loggedInAccountId" | "triggerButtonAppearance" | "triggerButtonIcon" | "triggerButtonStyle" | "triggerButtonTooltipPosition" | "triggerButtonTooltipText" | "cloudId" | "bottomMessage" | "customFooter" | "isCopyDisabled" | "isPublicLink" | "integrationMode" | "shareFieldsFooter" | "shareIntegrations" | "shareAri" | "tabIndex" | "copyTooltipText" | "dialogZIndex" | "isBrowseUsersDisabled" | "userPickerOptions" | "shareClient" | "urlShortenerClient" | "shortLinkData" | "formatCopyLink" | "originTracingFactory" | "productId" | "shareLink" | "shareTitle" | "useUrlShortener" | "workspaceAri"> & Partial<Pick<Omit<WithAnalyticsEventsProps & ShareDialogContainerProps, keyof WithAnalyticsEventsProps>, "enableSmartUserPicker" | "product" | "shareeAction">> & Partial<Pick<{
-    enableSmartUserPicker: boolean;
-    shareeAction: "view" | "edit";
-    product: string;
-}, never>> & React.RefAttributes<any>>;
+export declare const ShareDialogContainer: React.ForwardRefExoticComponent<Pick<Pick<Omit<ShareDialogContainerInternalProps, keyof WithAnalyticsEventsProps>, never> & Partial<Pick<Omit<ShareDialogContainerInternalProps, keyof WithAnalyticsEventsProps>, keyof ShareDialogContainerProps>> & Partial<Pick<Partial<ShareDialogContainerInternalProps>, keyof WithAnalyticsEventsProps>>, "createAnalyticsEvent" | keyof ShareDialogContainerProps> & React.RefAttributes<any>>;
+export {};

package/dist/types-ts4.5/components/ShareFormWrapper/styled.d.ts

@@ -8,4 +8,6 @@ export declare const InlineDialogFormWrapper: ({ children, }: PropsWithChildren<
  *
  * packages/design-system/inline-dialog/src/InlineDialog/styled.ts:20:3
  */
-export declare const InlineDialogContentWrapper: ({ children, }: PropsWithChildren<{}>) => jsx.JSX.Element;
+export declare const InlineDialogContentWrapper: ({ children, label, }: PropsWithChildren<{
+    label?: string | undefined;
+}>) => jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/share",
-  "version": "4.16.5",
+  "version": "4.16.7",
   "description": "Fabric Share Element",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -42,20 +42,20 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/button": "^17.8.0",
-    "@atlaskit/dropdown-menu": "^12.8.0",
-    "@atlaskit/form": "^9.1.0",
+    "@atlaskit/button": "^17.12.0",
+    "@atlaskit/dropdown-menu": "^12.9.0",
+    "@atlaskit/form": "^9.2.0",
     "@atlaskit/icon": "^22.1.0",
     "@atlaskit/popper": "^5.5.4",
     "@atlaskit/popup": "^1.14.0",
     "@atlaskit/portal": "^4.4.0",
     "@atlaskit/smart-user-picker": "^6.9.0",
     "@atlaskit/spinner": "^16.0.0",
-    "@atlaskit/tabs": "^14.0.0",
+    "@atlaskit/tabs": "^14.1.0",
     "@atlaskit/textarea": "^5.2.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.42.0",
-    "@atlaskit/tooltip": "^18.1.0",
+    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tooltip": "^18.2.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/user-picker": "^10.19.0",
     "@atlaskit/util-service-support": "^6.2.0",
@@ -73,7 +73,7 @@
   },
   "devDependencies": {
     "@atlaskit/editor-test-helpers": "^18.20.0",
-    "@atlaskit/flag": "^15.2.0",
+    "@atlaskit/flag": "^15.3.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",