@atlaskit/share 4.22.1 → 4.23.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/share
 
+## 4.23.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.23.0
+
+### Minor Changes
+
+- [#166181](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/166181)
+  [`21e43f81fb5aa`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/21e43f81fb5aa) -
+  [ux] Added additional tab prop
+
+### Patch Changes
+
+- [#167430](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167430)
+  [`c01f64d7d85f5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c01f64d7d85f5) -
+  Replace hard-coded font size with design tokens
+
 ## 4.22.1
 
 ### Patch Changes

package/dist/cjs/components/ShareDialogWithTrigger.js

@@ -565,83 +565,86 @@ var ShareDialogWithTriggerInternal = exports.ShareDialogWithTriggerInternal = /*
       var footer = (0, _utils.resolveShareFooter)(integrationMode, this.state.tabIndex, customFooter);
 
       // for performance purposes, we may want to have a loadable content i.e. ShareForm
-      return (0, _react2.jsx)("div", {
-        css: shareButtonWrapperStyles,
-        tabIndex: tabIndex,
-        onKeyDown: this.handleKeyDown
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        ,
-        style: style
-      }, (0, _react2.jsx)(_popup.default, {
-        content: function content() {
-          return (0, _react2.jsx)("div", {
-            ref: _this2.containerRef
-          }, (0, _react2.jsx)(_lazy.default, {
-            Content: selectedIntegration && selectedIntegration.Content,
-            selectedIntegration: selectedIntegration,
-            copyLink: copyLink,
-            showIntegrationForm: showIntegrationForm,
-            bottomMessage: bottomMessage,
-            customFooter: footer,
-            loadOptions: loadUserOptions,
-            isSharing: isSharing,
-            shareFormTitle: shareFormTitle,
-            showTitle: integrationMode !== 'tabs' || !shareIntegrations || !shareIntegrations.length,
-            shareFormHelperMessage: shareFormHelperMessage,
-            shareError: shareError,
-            defaultValue: defaultValue,
-            config: config,
-            isFetchingConfig: isFetchingConfig,
-            setIsLoading: _this2.setIsLoading,
-            submitButtonLabel: submitButtonLabel,
-            product: product,
-            productAttributes: productAttributes,
-            enableSmartUserPicker: enableSmartUserPicker,
-            loggedInAccountId: loggedInAccountId,
-            cloudId: cloudId,
-            orgId: orgId,
-            onUserSelectionChange: _this2.handleOnUserSelectionChange,
-            shareFieldsFooter: shareFieldsFooter,
-            isPublicLink: isPublicLink,
-            copyTooltipText: copyTooltipText,
-            integrationMode: integrationMode,
-            shareIntegrations: shareIntegrations,
-            additionalTabs: additionalTabs,
-            isMenuItemSelected: isMenuItemSelected
-            // actions
-            ,
-            onLinkCopy: _this2.handleCopyLink,
-            onSubmit: _this2.handleShareSubmit,
-            onDismiss: _this2.handleFormDismiss,
-            onDialogClose: _this2.handleCloseDialog,
-            onTabChange: _this2.onTabChange,
-            onMenuItemChange: _this2.onMenuItemChange
-            //ref
-            ,
-            selectPortalRef: _this2.selectPortalRef,
-            isBrowseUsersDisabled: isBrowseUsersDisabled,
-            userPickerOptions: userPickerOptions
-          }));
-        },
-        isOpen: isDialogOpen,
-        onClose: this.handleCloseDialog,
-        placement: dialogPlacement,
-        trigger: this.renderShareTriggerButton,
-        zIndex: dialogZIndex,
-        label: this.props.intl.formatMessage(_i18n.messages.sharePopupLabel),
-        role: "dialog"
-        // TODO: remove after https://hello.atlassian.net/wiki/x/SoEGzQ experiment is finished
-        ,
-        offset: this.calculatePopupOffset({
-          isMenuItemSelected: isMenuItemSelected,
-          dialogPlacement: dialogPlacement
-        }),
-        shouldRenderToParent: (0, _platformFeatureFlags.fg)('enable-appropriate-reading-order-in-share-dialog')
-      }), (0, _react2.jsx)(_portal.default, {
-        zIndex: (0, _utils.generateSelectZIndex)(dialogZIndex)
-      }, (0, _react2.jsx)("div", {
-        ref: this.selectPortalRef
-      })));
+      return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        (0, _react2.jsx)("div", {
+          css: shareButtonWrapperStyles,
+          tabIndex: tabIndex,
+          onKeyDown: this.handleKeyDown
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          ,
+          style: style
+        }, (0, _react2.jsx)(_popup.default, {
+          content: function content() {
+            return (0, _react2.jsx)("div", {
+              ref: _this2.containerRef
+            }, (0, _react2.jsx)(_lazy.default, {
+              Content: selectedIntegration && selectedIntegration.Content,
+              selectedIntegration: selectedIntegration,
+              copyLink: copyLink,
+              showIntegrationForm: showIntegrationForm,
+              bottomMessage: bottomMessage,
+              customFooter: footer,
+              loadOptions: loadUserOptions,
+              isSharing: isSharing,
+              shareFormTitle: shareFormTitle,
+              showTitle: integrationMode !== 'tabs' || !shareIntegrations || !shareIntegrations.length,
+              shareFormHelperMessage: shareFormHelperMessage,
+              shareError: shareError,
+              defaultValue: defaultValue,
+              config: config,
+              isFetchingConfig: isFetchingConfig,
+              setIsLoading: _this2.setIsLoading,
+              submitButtonLabel: submitButtonLabel,
+              product: product,
+              productAttributes: productAttributes,
+              enableSmartUserPicker: enableSmartUserPicker,
+              loggedInAccountId: loggedInAccountId,
+              cloudId: cloudId,
+              orgId: orgId,
+              onUserSelectionChange: _this2.handleOnUserSelectionChange,
+              shareFieldsFooter: shareFieldsFooter,
+              isPublicLink: isPublicLink,
+              copyTooltipText: copyTooltipText,
+              integrationMode: integrationMode,
+              shareIntegrations: shareIntegrations,
+              additionalTabs: additionalTabs,
+              isMenuItemSelected: isMenuItemSelected
+              // actions
+              ,
+              onLinkCopy: _this2.handleCopyLink,
+              onSubmit: _this2.handleShareSubmit,
+              onDismiss: _this2.handleFormDismiss,
+              onDialogClose: _this2.handleCloseDialog,
+              onTabChange: _this2.onTabChange,
+              onMenuItemChange: _this2.onMenuItemChange
+              //ref
+              ,
+              selectPortalRef: _this2.selectPortalRef,
+              isBrowseUsersDisabled: isBrowseUsersDisabled,
+              userPickerOptions: userPickerOptions
+            }));
+          },
+          isOpen: isDialogOpen,
+          onClose: this.handleCloseDialog,
+          placement: dialogPlacement,
+          trigger: this.renderShareTriggerButton,
+          zIndex: dialogZIndex,
+          label: this.props.intl.formatMessage(_i18n.messages.sharePopupLabel),
+          role: "dialog"
+          // TODO: remove after https://hello.atlassian.net/wiki/x/SoEGzQ experiment is finished
+          ,
+          offset: this.calculatePopupOffset({
+            isMenuItemSelected: isMenuItemSelected,
+            dialogPlacement: dialogPlacement
+          }),
+          shouldRenderToParent: (0, _platformFeatureFlags.fg)('enable-appropriate-reading-order-in-share-dialog')
+        }), (0, _react2.jsx)(_portal.default, {
+          zIndex: (0, _utils.generateSelectZIndex)(dialogZIndex)
+        }, (0, _react2.jsx)("div", {
+          ref: this.selectPortalRef
+        })))
+      );
     }
   }]);
   return ShareDialogWithTriggerInternal;

package/dist/cjs/components/ShareForm.js

@@ -27,7 +27,6 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _tabs = _interopRequireWildcard(require("@atlaskit/tabs"));
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _i18n = require("../i18n");
 var _types = require("../types");
@@ -91,7 +90,7 @@ var integrationIconWrapperStyles = (0, _react2.css)({
 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")
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 var menuGroupContainerStyles = (0, _primitives.xcss)({
   color: 'color.text',
@@ -345,7 +344,9 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           key: "share-tabPanel-default"
         }, (0, _react2.jsx)("div", {
           css: formWrapperStyles
-        }, this.renderShareForm())), (0, _react2.jsx)(_tabs.TabPanel, {
+        }, (0, _platformFeatureFlags.fg)('smart_links_for_plans_platform') ? (0, _react2.jsx)(_primitives.Box, {
+          xcss: platformTabWrapper
+        }, this.renderShareForm()) : this.renderShareForm())), (0, _react2.jsx)(_tabs.TabPanel, {
           key: "share-tabPanel-integration"
         }, (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
           data: {
@@ -353,12 +354,20 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           }
         }, (0, _react2.jsx)("div", {
           css: formWrapperStyles
+        }, (0, _platformFeatureFlags.fg)('smart_links_for_plans_platform') ? (0, _react2.jsx)(_primitives.Box, {
+          xcss: platformTabWrapper
         }, (0, _react2.jsx)(_IntegrationForm.IntegrationForm, {
           Content: firstIntegration.Content,
           onIntegrationClose: function onIntegrationClose() {
             return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
           },
           changeTab: this.changeTab
+        })) : (0, _react2.jsx)(_IntegrationForm.IntegrationForm, {
+          Content: firstIntegration.Content,
+          onIntegrationClose: function onIntegrationClose() {
+            return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
+          },
+          changeTab: this.changeTab
         })))), (0, _platformFeatureFlags.fg)('smart_links_for_plans_platform') && (additionalTabs === null || additionalTabs === void 0 ? void 0 : additionalTabs.map(function (tab) {
           return (0, _react2.jsx)(_tabs.TabPanel, {
             key: "share-tabPanel-".concat(tab.label)
@@ -394,6 +403,9 @@ var ShareForm = exports.ShareForm = function ShareForm(props) {
     }));
   });
 };
+var platformTabWrapper = (0, _primitives.xcss)({
+  width: '304px'
+});
 ShareForm.defaultProps = {
   isSharing: false,
   product: 'confluence',

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.InlineDialogFormWrapper = exports.InlineDialogContentWrapper = void 0;
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _ShareMenuItem = require("../ShareMenuItem");
 /**
  * @jsxRuntime classic
@@ -25,6 +26,11 @@ var calculateFormWrapperWidth = function calculateFormWrapperWidth(_ref) {
   if (!isMenuItemSelected && integrationMode === 'menu') {
     return _ShareMenuItem.menuWrapperWidth;
   }
+  if ((0, _platformFeatureFlags.fg)('smart_links_for_plans_platform')) {
+    if (integrationMode === 'tabs') {
+      return 'auto';
+    }
+  }
   return formWidth;
 };
 var InlineDialogFormWrapper = exports.InlineDialogFormWrapper = function InlineDialogFormWrapper(_ref2) {

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

package/dist/es2019/components/ShareDialogWithTrigger.js

@@ -512,81 +512,84 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
     const footer = resolveShareFooter(integrationMode, this.state.tabIndex, customFooter);
 
     // for performance purposes, we may want to have a loadable content i.e. ShareForm
-    return jsx("div", {
-      css: shareButtonWrapperStyles,
-      tabIndex: tabIndex,
-      onKeyDown: this.handleKeyDown
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-      ,
-      style: style
-    }, jsx(Popup, {
-      content: () => jsx("div", {
-        ref: this.containerRef
-      }, jsx(LazyShareFormLazy, {
-        Content: selectedIntegration && selectedIntegration.Content,
-        selectedIntegration: selectedIntegration,
-        copyLink: copyLink,
-        showIntegrationForm: showIntegrationForm,
-        bottomMessage: bottomMessage,
-        customFooter: footer,
-        loadOptions: loadUserOptions,
-        isSharing: isSharing,
-        shareFormTitle: shareFormTitle,
-        showTitle: integrationMode !== 'tabs' || !shareIntegrations || !shareIntegrations.length,
-        shareFormHelperMessage: shareFormHelperMessage,
-        shareError: shareError,
-        defaultValue: defaultValue,
-        config: config,
-        isFetchingConfig: isFetchingConfig,
-        setIsLoading: this.setIsLoading,
-        submitButtonLabel: submitButtonLabel,
-        product: product,
-        productAttributes: productAttributes,
-        enableSmartUserPicker: enableSmartUserPicker,
-        loggedInAccountId: loggedInAccountId,
-        cloudId: cloudId,
-        orgId: orgId,
-        onUserSelectionChange: this.handleOnUserSelectionChange,
-        shareFieldsFooter: shareFieldsFooter,
-        isPublicLink: isPublicLink,
-        copyTooltipText: copyTooltipText,
-        integrationMode: integrationMode,
-        shareIntegrations: shareIntegrations,
-        additionalTabs: additionalTabs,
-        isMenuItemSelected: isMenuItemSelected
-        // actions
+    return (
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      jsx("div", {
+        css: shareButtonWrapperStyles,
+        tabIndex: tabIndex,
+        onKeyDown: this.handleKeyDown
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         ,
-        onLinkCopy: this.handleCopyLink,
-        onSubmit: this.handleShareSubmit,
-        onDismiss: this.handleFormDismiss,
-        onDialogClose: this.handleCloseDialog,
-        onTabChange: this.onTabChange,
-        onMenuItemChange: this.onMenuItemChange
-        //ref
+        style: style
+      }, jsx(Popup, {
+        content: () => jsx("div", {
+          ref: this.containerRef
+        }, jsx(LazyShareFormLazy, {
+          Content: selectedIntegration && selectedIntegration.Content,
+          selectedIntegration: selectedIntegration,
+          copyLink: copyLink,
+          showIntegrationForm: showIntegrationForm,
+          bottomMessage: bottomMessage,
+          customFooter: footer,
+          loadOptions: loadUserOptions,
+          isSharing: isSharing,
+          shareFormTitle: shareFormTitle,
+          showTitle: integrationMode !== 'tabs' || !shareIntegrations || !shareIntegrations.length,
+          shareFormHelperMessage: shareFormHelperMessage,
+          shareError: shareError,
+          defaultValue: defaultValue,
+          config: config,
+          isFetchingConfig: isFetchingConfig,
+          setIsLoading: this.setIsLoading,
+          submitButtonLabel: submitButtonLabel,
+          product: product,
+          productAttributes: productAttributes,
+          enableSmartUserPicker: enableSmartUserPicker,
+          loggedInAccountId: loggedInAccountId,
+          cloudId: cloudId,
+          orgId: orgId,
+          onUserSelectionChange: this.handleOnUserSelectionChange,
+          shareFieldsFooter: shareFieldsFooter,
+          isPublicLink: isPublicLink,
+          copyTooltipText: copyTooltipText,
+          integrationMode: integrationMode,
+          shareIntegrations: shareIntegrations,
+          additionalTabs: additionalTabs,
+          isMenuItemSelected: isMenuItemSelected
+          // actions
+          ,
+          onLinkCopy: this.handleCopyLink,
+          onSubmit: this.handleShareSubmit,
+          onDismiss: this.handleFormDismiss,
+          onDialogClose: this.handleCloseDialog,
+          onTabChange: this.onTabChange,
+          onMenuItemChange: this.onMenuItemChange
+          //ref
+          ,
+          selectPortalRef: this.selectPortalRef,
+          isBrowseUsersDisabled: isBrowseUsersDisabled,
+          userPickerOptions: userPickerOptions
+        })),
+        isOpen: isDialogOpen,
+        onClose: this.handleCloseDialog,
+        placement: dialogPlacement,
+        trigger: this.renderShareTriggerButton,
+        zIndex: dialogZIndex,
+        label: this.props.intl.formatMessage(messages.sharePopupLabel),
+        role: "dialog"
+        // TODO: remove after https://hello.atlassian.net/wiki/x/SoEGzQ experiment is finished
         ,
-        selectPortalRef: this.selectPortalRef,
-        isBrowseUsersDisabled: isBrowseUsersDisabled,
-        userPickerOptions: userPickerOptions
-      })),
-      isOpen: isDialogOpen,
-      onClose: this.handleCloseDialog,
-      placement: dialogPlacement,
-      trigger: this.renderShareTriggerButton,
-      zIndex: dialogZIndex,
-      label: this.props.intl.formatMessage(messages.sharePopupLabel),
-      role: "dialog"
-      // TODO: remove after https://hello.atlassian.net/wiki/x/SoEGzQ experiment is finished
-      ,
-      offset: this.calculatePopupOffset({
-        isMenuItemSelected,
-        dialogPlacement
-      }),
-      shouldRenderToParent: fg('enable-appropriate-reading-order-in-share-dialog')
-    }), jsx(Portal, {
-      zIndex: generateSelectZIndex(dialogZIndex)
-    }, jsx("div", {
-      ref: this.selectPortalRef
-    })));
+        offset: this.calculatePopupOffset({
+          isMenuItemSelected,
+          dialogPlacement
+        }),
+        shouldRenderToParent: fg('enable-appropriate-reading-order-in-share-dialog')
+      }), jsx(Portal, {
+        zIndex: generateSelectZIndex(dialogZIndex)
+      }, jsx("div", {
+        ref: this.selectPortalRef
+      })))
+    );
   }
 }
 _defineProperty(ShareDialogWithTriggerInternal, "defaultProps", {

package/dist/es2019/components/ShareForm.js

@@ -19,7 +19,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
 import { N300, R400 } from '@atlaskit/theme/colors';
-import { fontSizeSmall } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { TabType } from '../types';
@@ -74,7 +73,7 @@ const integrationIconWrapperStyles = css({
 const requiredFieldInfoStyles = css({
   marginBottom: "var(--ds-space-200, 16px)",
   color: `var(--ds-text-subtle, ${N300})`,
-  fontSize: `${fontSizeSmall()}px`
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 const menuGroupContainerStyles = xcss({
   color: 'color.text',
@@ -318,7 +317,9 @@ class InternalForm extends React.PureComponent {
         key: `share-tabPanel-default`
       }, jsx("div", {
         css: formWrapperStyles
-      }, this.renderShareForm())), jsx(TabPanel, {
+      }, fg('smart_links_for_plans_platform') ? jsx(Box, {
+        xcss: platformTabWrapper
+      }, this.renderShareForm()) : this.renderShareForm())), jsx(TabPanel, {
         key: `share-tabPanel-integration`
       }, jsx(AnalyticsContext, {
         data: {
@@ -326,10 +327,16 @@ class InternalForm extends React.PureComponent {
         }
       }, jsx("div", {
         css: formWrapperStyles
+      }, fg('smart_links_for_plans_platform') ? jsx(Box, {
+        xcss: platformTabWrapper
       }, jsx(IntegrationForm, {
         Content: firstIntegration.Content,
         onIntegrationClose: () => handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog(),
         changeTab: this.changeTab
+      })) : jsx(IntegrationForm, {
+        Content: firstIntegration.Content,
+        onIntegrationClose: () => handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog(),
+        changeTab: this.changeTab
       })))), fg('smart_links_for_plans_platform') && (additionalTabs === null || additionalTabs === void 0 ? void 0 : additionalTabs.map(tab => jsx(TabPanel, {
         key: `share-tabPanel-${tab.label}`
       }, jsx("div", {
@@ -356,6 +363,9 @@ export const ShareForm = props => jsx(Form, {
   formProps: formProps,
   getValues: getValues
 })));
+const platformTabWrapper = xcss({
+  width: '304px'
+});
 ShareForm.defaultProps = {
   isSharing: false,
   product: 'confluence',

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

@@ -5,6 +5,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { menuWrapperWidth } from '../ShareMenuItem';
 
 /**
@@ -20,6 +21,11 @@ const calculateFormWrapperWidth = ({
   if (!isMenuItemSelected && integrationMode === 'menu') {
     return menuWrapperWidth;
   }
+  if (fg('smart_links_for_plans_platform')) {
+    if (integrationMode === 'tabs') {
+      return 'auto';
+    }
+  }
   return formWidth;
 };
 export const InlineDialogFormWrapper = ({

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

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

package/dist/esm/components/ShareDialogWithTrigger.js

@@ -564,83 +564,86 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
       var footer = resolveShareFooter(integrationMode, this.state.tabIndex, customFooter);
 
       // for performance purposes, we may want to have a loadable content i.e. ShareForm
-      return jsx("div", {
-        css: shareButtonWrapperStyles,
-        tabIndex: tabIndex,
-        onKeyDown: this.handleKeyDown
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-        ,
-        style: style
-      }, jsx(Popup, {
-        content: function content() {
-          return jsx("div", {
-            ref: _this2.containerRef
-          }, jsx(LazyShareFormLazy, {
-            Content: selectedIntegration && selectedIntegration.Content,
-            selectedIntegration: selectedIntegration,
-            copyLink: copyLink,
-            showIntegrationForm: showIntegrationForm,
-            bottomMessage: bottomMessage,
-            customFooter: footer,
-            loadOptions: loadUserOptions,
-            isSharing: isSharing,
-            shareFormTitle: shareFormTitle,
-            showTitle: integrationMode !== 'tabs' || !shareIntegrations || !shareIntegrations.length,
-            shareFormHelperMessage: shareFormHelperMessage,
-            shareError: shareError,
-            defaultValue: defaultValue,
-            config: config,
-            isFetchingConfig: isFetchingConfig,
-            setIsLoading: _this2.setIsLoading,
-            submitButtonLabel: submitButtonLabel,
-            product: product,
-            productAttributes: productAttributes,
-            enableSmartUserPicker: enableSmartUserPicker,
-            loggedInAccountId: loggedInAccountId,
-            cloudId: cloudId,
-            orgId: orgId,
-            onUserSelectionChange: _this2.handleOnUserSelectionChange,
-            shareFieldsFooter: shareFieldsFooter,
-            isPublicLink: isPublicLink,
-            copyTooltipText: copyTooltipText,
-            integrationMode: integrationMode,
-            shareIntegrations: shareIntegrations,
-            additionalTabs: additionalTabs,
-            isMenuItemSelected: isMenuItemSelected
-            // actions
-            ,
-            onLinkCopy: _this2.handleCopyLink,
-            onSubmit: _this2.handleShareSubmit,
-            onDismiss: _this2.handleFormDismiss,
-            onDialogClose: _this2.handleCloseDialog,
-            onTabChange: _this2.onTabChange,
-            onMenuItemChange: _this2.onMenuItemChange
-            //ref
-            ,
-            selectPortalRef: _this2.selectPortalRef,
-            isBrowseUsersDisabled: isBrowseUsersDisabled,
-            userPickerOptions: userPickerOptions
-          }));
-        },
-        isOpen: isDialogOpen,
-        onClose: this.handleCloseDialog,
-        placement: dialogPlacement,
-        trigger: this.renderShareTriggerButton,
-        zIndex: dialogZIndex,
-        label: this.props.intl.formatMessage(messages.sharePopupLabel),
-        role: "dialog"
-        // TODO: remove after https://hello.atlassian.net/wiki/x/SoEGzQ experiment is finished
-        ,
-        offset: this.calculatePopupOffset({
-          isMenuItemSelected: isMenuItemSelected,
-          dialogPlacement: dialogPlacement
-        }),
-        shouldRenderToParent: fg('enable-appropriate-reading-order-in-share-dialog')
-      }), jsx(Portal, {
-        zIndex: generateSelectZIndex(dialogZIndex)
-      }, jsx("div", {
-        ref: this.selectPortalRef
-      })));
+      return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        jsx("div", {
+          css: shareButtonWrapperStyles,
+          tabIndex: tabIndex,
+          onKeyDown: this.handleKeyDown
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          ,
+          style: style
+        }, jsx(Popup, {
+          content: function content() {
+            return jsx("div", {
+              ref: _this2.containerRef
+            }, jsx(LazyShareFormLazy, {
+              Content: selectedIntegration && selectedIntegration.Content,
+              selectedIntegration: selectedIntegration,
+              copyLink: copyLink,
+              showIntegrationForm: showIntegrationForm,
+              bottomMessage: bottomMessage,
+              customFooter: footer,
+              loadOptions: loadUserOptions,
+              isSharing: isSharing,
+              shareFormTitle: shareFormTitle,
+              showTitle: integrationMode !== 'tabs' || !shareIntegrations || !shareIntegrations.length,
+              shareFormHelperMessage: shareFormHelperMessage,
+              shareError: shareError,
+              defaultValue: defaultValue,
+              config: config,
+              isFetchingConfig: isFetchingConfig,
+              setIsLoading: _this2.setIsLoading,
+              submitButtonLabel: submitButtonLabel,
+              product: product,
+              productAttributes: productAttributes,
+              enableSmartUserPicker: enableSmartUserPicker,
+              loggedInAccountId: loggedInAccountId,
+              cloudId: cloudId,
+              orgId: orgId,
+              onUserSelectionChange: _this2.handleOnUserSelectionChange,
+              shareFieldsFooter: shareFieldsFooter,
+              isPublicLink: isPublicLink,
+              copyTooltipText: copyTooltipText,
+              integrationMode: integrationMode,
+              shareIntegrations: shareIntegrations,
+              additionalTabs: additionalTabs,
+              isMenuItemSelected: isMenuItemSelected
+              // actions
+              ,
+              onLinkCopy: _this2.handleCopyLink,
+              onSubmit: _this2.handleShareSubmit,
+              onDismiss: _this2.handleFormDismiss,
+              onDialogClose: _this2.handleCloseDialog,
+              onTabChange: _this2.onTabChange,
+              onMenuItemChange: _this2.onMenuItemChange
+              //ref
+              ,
+              selectPortalRef: _this2.selectPortalRef,
+              isBrowseUsersDisabled: isBrowseUsersDisabled,
+              userPickerOptions: userPickerOptions
+            }));
+          },
+          isOpen: isDialogOpen,
+          onClose: this.handleCloseDialog,
+          placement: dialogPlacement,
+          trigger: this.renderShareTriggerButton,
+          zIndex: dialogZIndex,
+          label: this.props.intl.formatMessage(messages.sharePopupLabel),
+          role: "dialog"
+          // TODO: remove after https://hello.atlassian.net/wiki/x/SoEGzQ experiment is finished
+          ,
+          offset: this.calculatePopupOffset({
+            isMenuItemSelected: isMenuItemSelected,
+            dialogPlacement: dialogPlacement
+          }),
+          shouldRenderToParent: fg('enable-appropriate-reading-order-in-share-dialog')
+        }), jsx(Portal, {
+          zIndex: generateSelectZIndex(dialogZIndex)
+        }, jsx("div", {
+          ref: this.selectPortalRef
+        })))
+      );
     }
   }]);
   return ShareDialogWithTriggerInternal;

package/dist/esm/components/ShareForm.js

@@ -29,7 +29,6 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, xcss } from '@atlaskit/primitives';
 import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
 import { N300, R400 } from '@atlaskit/theme/colors';
-import { fontSizeSmall } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { messages } from '../i18n';
 import { TabType } from '../types';
@@ -84,7 +83,7 @@ var integrationIconWrapperStyles = css({
 var requiredFieldInfoStyles = css({
   marginBottom: "var(--ds-space-200, 16px)",
   color: "var(--ds-text-subtle, ".concat(N300, ")"),
-  fontSize: "".concat(fontSizeSmall(), "px")
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
 });
 var menuGroupContainerStyles = xcss({
   color: 'color.text',
@@ -338,7 +337,9 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           key: "share-tabPanel-default"
         }, jsx("div", {
           css: formWrapperStyles
-        }, this.renderShareForm())), jsx(TabPanel, {
+        }, fg('smart_links_for_plans_platform') ? jsx(Box, {
+          xcss: platformTabWrapper
+        }, this.renderShareForm()) : this.renderShareForm())), jsx(TabPanel, {
           key: "share-tabPanel-integration"
         }, jsx(AnalyticsContext, {
           data: {
@@ -346,12 +347,20 @@ var InternalForm = /*#__PURE__*/function (_React$PureComponent) {
           }
         }, jsx("div", {
           css: formWrapperStyles
+        }, fg('smart_links_for_plans_platform') ? jsx(Box, {
+          xcss: platformTabWrapper
         }, jsx(IntegrationForm, {
           Content: firstIntegration.Content,
           onIntegrationClose: function onIntegrationClose() {
             return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
           },
           changeTab: this.changeTab
+        })) : jsx(IntegrationForm, {
+          Content: firstIntegration.Content,
+          onIntegrationClose: function onIntegrationClose() {
+            return handleCloseDialog === null || handleCloseDialog === void 0 ? void 0 : handleCloseDialog();
+          },
+          changeTab: this.changeTab
         })))), fg('smart_links_for_plans_platform') && (additionalTabs === null || additionalTabs === void 0 ? void 0 : additionalTabs.map(function (tab) {
           return jsx(TabPanel, {
             key: "share-tabPanel-".concat(tab.label)
@@ -387,6 +396,9 @@ export var ShareForm = function ShareForm(props) {
     }));
   });
 };
+var platformTabWrapper = xcss({
+  width: '304px'
+});
 ShareForm.defaultProps = {
   isSharing: false,
   product: 'confluence',

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

@@ -5,6 +5,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { menuWrapperWidth } from '../ShareMenuItem';
 
 /**
@@ -19,6 +20,11 @@ var calculateFormWrapperWidth = function calculateFormWrapperWidth(_ref) {
   if (!isMenuItemSelected && integrationMode === 'menu') {
     return menuWrapperWidth;
   }
+  if (fg('smart_links_for_plans_platform')) {
+    if (integrationMode === 'tabs') {
+      return 'auto';
+    }
+  }
   return formWidth;
 };
 export var InlineDialogFormWrapper = function InlineDialogFormWrapper(_ref2) {

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/share",
-	"version": "4.22.1",
+	"version": "4.23.1",
 	"description": "Fabric Share Element",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,23 +40,23 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/button": "^20.3.0",
-		"@atlaskit/dropdown-menu": "^12.22.0",
-		"@atlaskit/form": "^10.5.0",
-		"@atlaskit/heading": "^3.0.0",
-		"@atlaskit/icon": "^22.24.0",
+		"@atlaskit/dropdown-menu": "^12.23.0",
+		"@atlaskit/form": "^10.6.0",
+		"@atlaskit/heading": "^4.0.0",
+		"@atlaskit/icon": "^22.28.0",
 		"@atlaskit/link": "^1.2.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/popper": "^6.3.0",
 		"@atlaskit/popup": "^1.29.0",
 		"@atlaskit/portal": "^4.9.0",
-		"@atlaskit/primitives": "^13.2.0",
+		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/smart-user-picker": "^6.11.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/tabs": "^16.5.0",
 		"@atlaskit/textarea": "^5.6.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@atlaskit/tooltip": "^18.9.0",
 		"@atlaskit/ufo": "^0.3.0",
 		"@atlaskit/user-picker": "^10.27.0",