@atlaskit/share 5.0.0 → 5.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/share
 
+## 5.0.1
+
+### Patch Changes
+
+- [#113832](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/113832)
+  [`e3b0e6a2598b0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e3b0e6a2598b0) -
+  Migrate to compiled components
+
 ## 5.0.0
 
 ### Major Changes

package/afm-cc/tsconfig.json

@@ -23,6 +23,9 @@
         {
             "path": "../../../design-system/button/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/css/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/dropdown-menu/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -23,6 +23,9 @@
 		{
 			"path": "../../../design-system/button/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../design-system/css/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/dropdown-menu/afm-jira/tsconfig.json"
 		},

package/dist/cjs/components/CopyLinkButton.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.messageContainerStyle = exports.default = exports.HiddenInput = exports.CopyLinkButton = exports.AUTO_DISMISS_MS = void 0;
+exports.messageContainerStyle = exports.default = exports.HiddenInput = exports.CopyLinkButtonInner = exports.CopyLinkButton = exports.AUTO_DISMISS_MS = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
@@ -21,6 +21,7 @@ var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _CopyLinkButtonNext = _interopRequireDefault(require("./CopyLinkButtonNext"));
 var _styled = require("./ShareFormWrapper/styled");
 var _styles = _interopRequireDefault(require("./styles"));
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
@@ -63,14 +64,14 @@ function (props, ref) {
   });
 });
 // eslint-disable-next-line @repo/internal/react/no-class-components
-var CopyLinkButton = exports.CopyLinkButton = /*#__PURE__*/function (_React$Component) {
-  function CopyLinkButton() {
+var CopyLinkButtonInner = exports.CopyLinkButtonInner = /*#__PURE__*/function (_React$Component) {
+  function CopyLinkButtonInner() {
     var _this;
-    (0, _classCallCheck2.default)(this, CopyLinkButton);
+    (0, _classCallCheck2.default)(this, CopyLinkButtonInner);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, CopyLinkButton, [].concat(args));
+    _this = _callSuper(this, CopyLinkButtonInner, [].concat(args));
     (0, _defineProperty2.default)(_this, "inputRef", /*#__PURE__*/_react.default.createRef());
     (0, _defineProperty2.default)(_this, "state", {
       shouldShowCopiedMessage: false
@@ -131,8 +132,8 @@ var CopyLinkButton = exports.CopyLinkButton = /*#__PURE__*/function (_React$Comp
     });
     return _this;
   }
-  (0, _inherits2.default)(CopyLinkButton, _React$Component);
-  return (0, _createClass2.default)(CopyLinkButton, [{
+  (0, _inherits2.default)(CopyLinkButtonInner, _React$Component);
+  return (0, _createClass2.default)(CopyLinkButtonInner, [{
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.clearAutoDismiss();
@@ -184,4 +185,7 @@ var CopyLinkButton = exports.CopyLinkButton = /*#__PURE__*/function (_React$Comp
     }
   }]);
 }(_react.default.Component);
+var CopyLinkButton = exports.CopyLinkButton = function CopyLinkButton(props) {
+  return (0, _platformFeatureFlags.fg)('share-compiled-migration') ? (0, _react2.jsx)(_CopyLinkButtonNext.default, props) : (0, _react2.jsx)(CopyLinkButtonInner, props);
+};
 var _default = exports.default = CopyLinkButton;

package/dist/cjs/components/CopyLinkButtonNext.compiled.css

@@ -0,0 +1,8 @@
+._18u0mgjw{margin-left:var(--ds-space-negative-200,-1pc)}
+._19pkx0bf{margin-top:var(--ds-space-negative-100,-8px)}
+._1e0c1txw{display:flex}
+._2hwxmgjw{margin-right:var(--ds-space-negative-200,-1pc)}
+._2hwxv77o{margin-right:var(--ds-space-025,2px)}
+._4cvr1h6o{align-items:center}
+._azhw12x7{text-indent:var(--ds-space-075,6px)}
+._otyrx0bf{margin-bottom:var(--ds-space-negative-100,-8px)}

package/dist/cjs/components/CopyLinkButtonNext.js

@@ -0,0 +1,180 @@
+/* CopyLinkButtonNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.HiddenInput = exports.CopyLinkButton = exports.AUTO_DISMISS_MS = void 0;
+require("./CopyLinkButtonNext.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _css = require("@atlaskit/css");
+var _linkLinkFilled = _interopRequireDefault(require("@atlaskit/icon/core/migration/link--link-filled"));
+var _successCheckCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/success--check-circle"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+var _compiled = require("@atlaskit/primitives/compiled");
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _compiled2 = require("./ShareFormWrapper/compiled");
+var _styles = _interopRequireDefault(require("./styles"));
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var Z_INDEX = _constants.layers.modal();
+var AUTO_DISMISS_SECONDS = 8;
+var AUTO_DISMISS_MS = exports.AUTO_DISMISS_MS = AUTO_DISMISS_SECONDS * 1000;
+var styles = {
+  messageContainer: "_1e0c1txw _4cvr1h6o _19pkx0bf _2hwxmgjw _otyrx0bf _18u0mgjw",
+  boxWrapper: "_2hwxv77o",
+  messageText: "_azhw12x7"
+};
+var isSafari = typeof window !== 'undefined' && window.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.
+function (props, ref) {
+  return /*#__PURE__*/_react.default.createElement("input", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    style: {
+      position: 'absolute',
+      left: '-9999px'
+    },
+    tabIndex: -1,
+    "aria-hidden": true,
+    ref: ref,
+    value: props.text,
+    "aria-label": props.label,
+    readOnly: true
+  });
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var CopyLinkButton = exports.CopyLinkButton = /*#__PURE__*/function (_React$Component) {
+  function CopyLinkButton() {
+    var _this;
+    (0, _classCallCheck2.default)(this, CopyLinkButton);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, CopyLinkButton, [].concat(args));
+    (0, _defineProperty2.default)(_this, "inputRef", /*#__PURE__*/_react.default.createRef());
+    (0, _defineProperty2.default)(_this, "state", {
+      shouldShowCopiedMessage: false
+    });
+    (0, _defineProperty2.default)(_this, "clearAutoDismiss", function () {
+      if (_this.autoDismiss) {
+        clearTimeout(_this.autoDismiss);
+        _this.autoDismiss = undefined;
+      }
+    });
+    (0, _defineProperty2.default)(_this, "handleClick", function () {
+      _this.inputRef.current.select();
+      document.execCommand('copy');
+      if (_this.props.onLinkCopy) {
+        _this.props.onLinkCopy(_this.props.link);
+      }
+      _this.setState({
+        shouldShowCopiedMessage: true
+      }, function () {
+        _this.clearAutoDismiss();
+        _this.autoDismiss = setTimeout(function () {
+          _this.setState({
+            shouldShowCopiedMessage: false
+          });
+        }, AUTO_DISMISS_MS);
+      });
+    });
+    (0, _defineProperty2.default)(_this, "handleDismissCopiedMessage", function () {
+      _this.clearAutoDismiss();
+      _this.setState({
+        shouldShowCopiedMessage: false
+      });
+    });
+    (0, _defineProperty2.default)(_this, "renderTriggerButton", function (triggerProps) {
+      var _this$props = _this.props,
+        isDisabled = _this$props.isDisabled,
+        copyLinkButtonText = _this$props.copyLinkButtonText,
+        children = _this$props.children,
+        iconBefore = _this$props.iconBefore;
+      return /*#__PURE__*/_react.default.createElement(_styles.default, {
+        "aria-label": copyLinkButtonText,
+        isDisabled: isDisabled
+        // TODO: (from codemod)"link" and "subtle-link" appearances are only available in LinkButton, please either provide a href prop then migrate to LinkButton, or remove the appearance from the default button.
+        // https://product-fabric.atlassian.net/browse/DSP-18980
+        ,
+        appearance: "subtle-link",
+        iconBefore: iconBefore || /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+          xcss: (0, _css.cx)(styles.boxWrapper)
+        }, /*#__PURE__*/_react.default.createElement(_linkLinkFilled.default, {
+          LEGACY_margin: "0 ".concat("var(--ds-space-negative-025, -2px)", " 0 0"),
+          color: "currentColor",
+          label: "",
+          LEGACY_size: "medium"
+        })),
+        onClick: _this.handleClick,
+        ref: triggerProps.ref
+      }, children || copyLinkButtonText);
+    });
+    return _this;
+  }
+  (0, _inherits2.default)(CopyLinkButton, _React$Component);
+  return (0, _createClass2.default)(CopyLinkButton, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.clearAutoDismiss();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var shouldShowCopiedMessage = this.state.shouldShowCopiedMessage;
+      var _this$props2 = this.props,
+        copyTooltipText = _this$props2.copyTooltipText,
+        copiedToClipboardText = _this$props2.copiedToClipboardText;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isSafari &&
+      /*#__PURE__*/
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+      _react.default.createElement("div", {
+        className: "assistive",
+        "aria-live": "assertive"
+      }, shouldShowCopiedMessage && copiedToClipboardText), /*#__PURE__*/_react.default.createElement(HiddenInput, {
+        ref: this.inputRef,
+        text: this.props.link,
+        label: copiedToClipboardText
+      }), /*#__PURE__*/_react.default.createElement(_popup.default, {
+        zIndex: Z_INDEX,
+        autoFocus: false,
+        content: function content() {
+          return /*#__PURE__*/_react.default.createElement(_compiled2.InlineDialogContentWrapper, null, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+            xcss: (0, _css.cx)(styles.messageContainer),
+            testId: "message-container",
+            "aria-hidden": true
+          }, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_successCheckCircle.default, {
+            spacing: "spacious",
+            label: "",
+            color: "var(--ds-icon-success, ".concat(_colors.G300, ")")
+          }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+            xcss: (0, _css.cx)(styles.messageText)
+          }, copiedToClipboardText))));
+        },
+        isOpen: shouldShowCopiedMessage,
+        onClose: this.handleDismissCopiedMessage,
+        placement: "top-start",
+        trigger: function trigger(triggerProps) {
+          return copyTooltipText ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
+            content: copyTooltipText,
+            position: "bottom-start"
+          }, _this2.renderTriggerButton(triggerProps)) : _this2.renderTriggerButton(triggerProps);
+        },
+        shouldRenderToParent: (0, _platformFeatureFlags.fg)('enable-appropriate-reading-order-in-share-dialog')
+      }));
+    }
+  }]);
+}(_react.default.Component);
+var _default = exports.default = CopyLinkButton;

package/dist/cjs/components/IntegrationButton.js

@@ -10,7 +10,9 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
+var _IntegrationButtonNext = _interopRequireDefault(require("./IntegrationButtonNext"));
 var _excluded = ["text", "textColor", "IntegrationIcon"];
 var _templateObject, _templateObject2;
 /**
@@ -23,7 +25,7 @@ var integrationButtonCopyWrapperStyle = (0, _react2.css)(_templateObject || (_te
 
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
 var integrationIconWrapperStyle = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\tmargin: ", " ", " ", "\n\t\t", ";\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 IntegrationButtonInner = function IntegrationButtonInner(props) {
   var text = props.text,
     textColor = props.textColor,
     IntegrationIcon = props.IntegrationIcon,
@@ -40,5 +42,12 @@ var IntegrationButton = function IntegrationButton(props) {
     }, (0, _react2.jsx)(IntegrationIcon, null)), (0, _react2.jsx)("span", null, text)))
   );
 };
+var IntegrationButton = function IntegrationButton(props) {
+  return (0, _platformFeatureFlags.fg)('share-compiled-migration') ? (0, _react2.jsx)(_IntegrationButtonNext.default, {
+    text: props.text,
+    onClick: props.onClick,
+    IntegrationIcon: props.IntegrationIcon
+  }) : (0, _react2.jsx)(IntegrationButtonInner, props);
+};
 IntegrationButton.displayName = 'IntegrationButton';
 var _default = exports.default = IntegrationButton;

package/dist/cjs/components/IntegrationButtonNext.compiled.css

@@ -0,0 +1,7 @@
+._18u0ze3t{margin-left:var(--ds-space-0,0)}
+._19pkv77o{margin-top:var(--ds-space-025,2px)}
+._1bah1e5h{justify-content:left}
+._1e0c1txw{display:flex}
+._2hwxu2gc{margin-right:var(--ds-space-100,8px)}
+._otyrze3t{margin-bottom:var(--ds-space-0,0)}
+._syaz10s3{color:var(--ds-text,#42526e)}

package/dist/cjs/components/IntegrationButtonNext.js

@@ -0,0 +1,38 @@
+/* IntegrationButtonNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./IntegrationButtonNext.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _css = require("@atlaskit/css");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _colors = require("@atlaskit/theme/colors");
+var styles = {
+  integrationButtonCopyWrapperStyle: "_1e0c1txw _1bah1e5h _syaz10s3",
+  integrationIconWrapperStyle: "_19pkv77o _2hwxu2gc _otyrze3t _18u0ze3t"
+};
+var IntegrationButton = function IntegrationButton(props) {
+  var text = props.text,
+    IntegrationIcon = props.IntegrationIcon;
+  return /*#__PURE__*/_react.default.createElement(_new.default, {
+    appearance: "subtle",
+    shouldFitContainer: true,
+    onClick: props.onClick
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "span",
+    xcss: (0, _css.cx)(styles.integrationButtonCopyWrapperStyle)
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: "span",
+    xcss: (0, _css.cx)(styles.integrationIconWrapperStyle)
+  }, /*#__PURE__*/_react.default.createElement(IntegrationIcon, null)), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    color: "color.text"
+  }, text)));
+};
+IntegrationButton.displayName = 'IntegrationButton';
+var _default = exports.default = IntegrationButton;

package/dist/cjs/components/LazyShareForm/LazyShareFormNext.compiled.css

@@ -0,0 +1,5 @@
+._18u010v4{margin-left:var(--ds-space-negative-300,-24px)}
+._19pkidpf{margin-top:0}
+._1bsb1j89{width:22pc}
+._2hwx10v4{margin-right:var(--ds-space-negative-300,-24px)}
+._otyrmgjw{margin-bottom:var(--ds-space-negative-200,-1pc)}

package/dist/cjs/components/LazyShareForm/LazyShareFormNext.js

@@ -0,0 +1,138 @@
+/* LazyShareFormNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./LazyShareFormNext.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _css = require("@atlaskit/css");
+var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _i18n = require("../../i18n");
+var _analytics = require("../analytics/analytics");
+var _IntegrationForm = require("../IntegrationForm");
+var _ShareForm = require("../ShareForm");
+var _ShareFormWrapper = require("../ShareFormWrapper");
+var _utils = require("../utils");
+var styles = {
+  footerBottomMessageStyles: "_1bsb1j89",
+  footerCustomStyles: "_19pkidpf _2hwx10v4 _otyrmgjw _18u010v4"
+};
+
+/**
+ * A Share form content which is lazy-loaded.
+ * Make sure this component is not exported inside main entry points `src/index.ts`
+ */
+function LazyShareForm(props) {
+  var copyLink = props.copyLink,
+    config = props.config,
+    isFetchingConfig = props.isFetchingConfig,
+    setIsLoading = props.setIsLoading,
+    loadOptions = props.loadOptions,
+    shareFormTitle = props.shareFormTitle,
+    shareFormHelperMessage = props.shareFormHelperMessage,
+    bottomMessage = props.bottomMessage,
+    submitButtonLabel = props.submitButtonLabel,
+    product = props.product,
+    productAttributes = props.productAttributes,
+    customFooter = props.customFooter,
+    enableSmartUserPicker = props.enableSmartUserPicker,
+    loggedInAccountId = props.loggedInAccountId,
+    cloudId = props.cloudId,
+    shareFieldsFooter = props.shareFieldsFooter,
+    onUserSelectionChange = props.onUserSelectionChange,
+    isPublicLink = props.isPublicLink,
+    copyTooltipText = props.copyTooltipText,
+    shareIntegrations = props.shareIntegrations,
+    integrationMode = props.integrationMode,
+    additionalTabs = props.additionalTabs,
+    builtInTabContentWidth = props.builtInTabContentWidth,
+    isMenuItemSelected = props.isMenuItemSelected,
+    onLinkCopy = props.onLinkCopy,
+    onDismiss = props.onDismiss,
+    onSubmit = props.onSubmit,
+    onDialogClose = props.onDialogClose,
+    onTabChange = props.onTabChange,
+    onMenuItemChange = props.onMenuItemChange,
+    selectPortalRef = props.selectPortalRef,
+    showIntegrationForm = props.showIntegrationForm,
+    selectedIntegration = props.selectedIntegration,
+    isSharing = props.isSharing,
+    shareError = props.shareError,
+    defaultValue = props.defaultValue,
+    showTitle = props.showTitle,
+    orgId = props.orgId,
+    isBrowseUsersDisabled = props.isBrowseUsersDisabled,
+    userPickerOptions = props.userPickerOptions,
+    isSubmitShareDisabled = props.isSubmitShareDisabled;
+  var footer = /*#__PURE__*/_react.default.createElement("div", null, bottomMessage ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.footerBottomMessageStyles)
+  }, bottomMessage) : null, customFooter && selectedIntegration === null && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.footerCustomStyles)
+  }, customFooter));
+  _react.default.useEffect(function () {
+    setIsLoading(false);
+  });
+  var allowEmail = (0, _utils.allowEmails)(config);
+  return /*#__PURE__*/_react.default.createElement(_ShareFormWrapper.ShareFormWrapper, {
+    footer: footer
+    // form title will be determined by `title` and `showTitle` prop passed to `ShareForm`,
+    // so we don't need to show title via ShareFormWrapper
+    ,
+    integrationMode: integrationMode,
+    isMenuItemSelected: isMenuItemSelected,
+    shouldShowTitle: false
+  }, showIntegrationForm && selectedIntegration !== null ? /*#__PURE__*/_react.default.createElement(_analyticsNext.AnalyticsContext, {
+    data: {
+      source: _analytics.INTEGRATION_MODAL_SOURCE
+    }
+  }, /*#__PURE__*/_react.default.createElement(_IntegrationForm.IntegrationForm, {
+    Content: selectedIntegration.Content,
+    onIntegrationClose: onDialogClose
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, allowEmail || !isBrowseUsersDisabled ? /*#__PURE__*/_react.default.createElement(_ShareForm.ShareForm, {
+    copyLink: copyLink,
+    loadOptions: loadOptions,
+    title: shareFormTitle,
+    showTitle: showTitle,
+    helperMessage: shareFormHelperMessage,
+    shareError: shareError,
+    defaultValue: defaultValue,
+    config: config,
+    submitButtonLabel: submitButtonLabel,
+    product: product,
+    productAttributes: productAttributes,
+    enableSmartUserPicker: enableSmartUserPicker,
+    loggedInAccountId: loggedInAccountId,
+    cloudId: cloudId,
+    fieldsFooter: shareFieldsFooter,
+    selectPortalRef: selectPortalRef,
+    copyTooltipText: copyTooltipText,
+    integrationMode: integrationMode,
+    shareIntegrations: shareIntegrations,
+    additionalTabs: additionalTabs,
+    builtInTabContentWidth: builtInTabContentWidth,
+    isSharing: isSharing,
+    isFetchingConfig: isFetchingConfig,
+    isPublicLink: isPublicLink,
+    orgId: orgId,
+    onSubmit: onSubmit,
+    onDismiss: onDismiss,
+    onLinkCopy: onLinkCopy,
+    onUserSelectionChange: onUserSelectionChange,
+    handleCloseDialog: onDialogClose,
+    onTabChange: onTabChange,
+    onMenuItemChange: onMenuItemChange,
+    isBrowseUsersDisabled: isBrowseUsersDisabled,
+    userPickerOptions: userPickerOptions,
+    isSubmitShareDisabled: isSubmitShareDisabled
+  }) : /*#__PURE__*/_react.default.createElement(_primitives.Text, {
+    as: "p"
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _i18n.messages.formNoPermissions))));
+}
+var _default = exports.default = LazyShareForm;

package/dist/cjs/components/LazyShareForm/lazy.js

@@ -8,8 +8,10 @@ exports.default = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _ShareFormWrapper = require("../ShareFormWrapper");
+var _lazyNext = _interopRequireDefault(require("./lazyNext"));
 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" != (0, _typeof2.default)(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 && {}.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; } /**
  * @jsxRuntime classic
@@ -49,7 +51,7 @@ var LoadingDialog = function LoadingDialog(_ref) {
   }, (0, _react2.jsx)(_spinner.default, null)));
 };
 var _default = exports.default = function _default(props) {
-  return (0, _react2.jsx)(_react.Suspense, {
+  return (0, _platformFeatureFlags.fg)('share-compiled-migration') ? (0, _react2.jsx)(_lazyNext.default, props) : (0, _react2.jsx)(_react.Suspense, {
     fallback: (0, _react2.jsx)(LoadingDialog, {
       shareFormTitle: props.shareFormTitle,
       showTitle: props.showTitle,

package/dist/cjs/components/LazyShareForm/lazyNext.compiled.css

@@ -0,0 +1,5 @@
+._1bah1h6o{justify-content:center}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._4t3i1osq{height:100%}
+._ae4v1h6o{align-content:center}

package/dist/cjs/components/LazyShareForm/lazyNext.js

@@ -0,0 +1,58 @@
+/* lazyNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./lazyNext.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _react = _interopRequireWildcard(require("react"));
+var _css = require("@atlaskit/css");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _ShareFormWrapper = require("../ShareFormWrapper");
+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" != (0, _typeof2.default)(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 && {}.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; }
+var styles = {
+  spinnerWrapperStyles: "_1bsb1osq _4t3i1osq _1e0c1txw _1bah1h6o _ae4v1h6o"
+};
+var LazyShareFormLazy = /*#__PURE__*/(0, _react.lazy)(function () {
+  return Promise.resolve().then(function () {
+    return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_share-form-next" */
+    './LazyShareFormNext'));
+  });
+});
+var LoadingDialog = function LoadingDialog(_ref) {
+  var shareFormTitle = _ref.shareFormTitle,
+    showTitle = _ref.showTitle,
+    setIsLoading = _ref.setIsLoading,
+    integrationMode = _ref.integrationMode,
+    isMenuItemSelected = _ref.isMenuItemSelected;
+  _react.default.useEffect(function () {
+    setIsLoading(true);
+  });
+  return /*#__PURE__*/_react.default.createElement(_ShareFormWrapper.ShareFormWrapper, {
+    shareFormTitle: shareFormTitle,
+    integrationMode: integrationMode,
+    isMenuItemSelected: isMenuItemSelected
+    // if `showTitle` is passed, we use it. Otherwise, we will show title for loading dialog.
+    ,
+    shouldShowTitle: typeof showTitle === 'boolean' ? showTitle : true
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.spinnerWrapperStyles)
+  }, /*#__PURE__*/_react.default.createElement(_spinner.default, null)));
+};
+var _default = exports.default = function _default(props) {
+  return /*#__PURE__*/_react.default.createElement(_react.Suspense, {
+    fallback: /*#__PURE__*/_react.default.createElement(LoadingDialog, {
+      shareFormTitle: props.shareFormTitle,
+      showTitle: props.showTitle,
+      setIsLoading: props.setIsLoading,
+      integrationMode: props.integrationMode,
+      isMenuItemSelected: props.isMenuItemSelected
+    })
+  }, /*#__PURE__*/_react.default.createElement(LazyShareFormLazy, props));
+};