@atlaskit/share 5.0.0 → 5.0.1

package/dist/esm/components/ShareDialogWithTriggerNext.js

@@ -0,0 +1,646 @@
+/* ShareDialogWithTriggerNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./ShareDialogWithTriggerNext.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+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 _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(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; })(); }
+import React from 'react';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
+import { withAnalyticsEvents } from '@atlaskit/analytics-next';
+import { cx } from '@atlaskit/css';
+import ShareIcon from '@atlaskit/icon/core/migration/share';
+import { fg } from '@atlaskit/platform-feature-flags';
+import Popup from '@atlaskit/popup';
+import Portal from '@atlaskit/portal';
+import { Box } from '@atlaskit/primitives/compiled';
+import { layers } from '@atlaskit/theme/constants';
+import Aktooltip from '@atlaskit/tooltip';
+import { messages } from '../i18n';
+import { OBJECT_SHARED } from '../types';
+import { cancelShare, CHANNEL_ID, copyLinkButtonClicked, formShareSubmitted, screenEvent, shareMenuItemClicked, shareSplitButtonEvent, shareTabClicked, shareTriggerButtonClicked } from './analytics/analytics';
+import { isValidFailedExperience } from './analytics/ufoExperienceHelper';
+import { renderShareDialogExp, shareSubmitExp } from './analytics/ufoExperiences';
+import LazyShareFormLazy from './LazyShareForm/lazy';
+import ShareButton from './ShareButton';
+import SplitButton from './SplitButton';
+import { generateSelectZIndex, resolveShareFooter } from './utils';
+var styles = {
+  shareButtonWrapperStyles: "_12ji1r31 _1qu2glyw _12y31o36 _1e0c116y",
+  outlineNone: "_12ji1r31 _1qu2glyw _12y31o36"
+};
+export var defaultShareContentState = {
+  users: [],
+  comment: {
+    format: 'plain_text',
+    value: ''
+  }
+};
+export var IconShare = function IconShare() {
+  return /*#__PURE__*/React.createElement(ShareIcon, {
+    spacing: "spacious",
+    label: "",
+    color: "currentColor"
+  });
+};
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent) {
+  function ShareDialogWithTriggerInternal() {
+    var _this;
+    _classCallCheck(this, ShareDialogWithTriggerInternal);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _callSuper(this, ShareDialogWithTriggerInternal, [].concat(args));
+    _defineProperty(_this, "containerRef", /*#__PURE__*/React.createRef());
+    /**
+     * Because the PopUp component has a higher zIndex it causes
+     * the select to be rendered within it, and add scrollbars.
+     * We will render the select options the PopUp outside,
+     */
+    _defineProperty(_this, "selectPortalRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_this, "start", 0);
+    _defineProperty(_this, "state", {
+      isDialogOpen: false,
+      isSharing: false,
+      ignoreIntermediateState: false,
+      defaultValue: defaultShareContentState,
+      isUsingSplitButton: false,
+      showIntegrationForm: false,
+      selectedIntegration: null,
+      tabIndex: 0,
+      isMenuItemSelected: false,
+      isLoading: false
+    });
+    _defineProperty(_this, "closeAndResetDialog", function () {
+      _this.setState({
+        defaultValue: defaultShareContentState,
+        ignoreIntermediateState: true,
+        shareError: undefined,
+        isDialogOpen: false,
+        showIntegrationForm: false,
+        selectedIntegration: null,
+        isMenuItemSelected: false
+      });
+      var _this$props = _this.props,
+        onUserSelectionChange = _this$props.onUserSelectionChange,
+        onDialogClose = _this$props.onDialogClose;
+      if (onUserSelectionChange) {
+        onUserSelectionChange(defaultShareContentState.users);
+      }
+      if (onDialogClose) {
+        onDialogClose();
+      }
+    });
+    _defineProperty(_this, "createAndFireEvent", function (payload) {
+      var _this$props2 = _this.props,
+        createAnalyticsEvent = _this$props2.createAnalyticsEvent,
+        analyticsDecorator = _this$props2.analyticsDecorator;
+      if (analyticsDecorator) {
+        payload = analyticsDecorator(payload);
+      }
+      if (createAnalyticsEvent) {
+        createAnalyticsEvent(payload).fire(CHANNEL_ID);
+      }
+    });
+    _defineProperty(_this, "onTabChange", function (index) {
+      var subjectId = 'shareTab';
+      var shareContentType = _this.props.shareContentType;
+      if (index === 1) {
+        subjectId = 'shareToSlackTab';
+      }
+      _this.createAndFireEvent(shareTabClicked(subjectId, shareContentType));
+      _this.setState({
+        tabIndex: index
+      });
+    });
+    _defineProperty(_this, "onMenuItemChange", function (menuType) {
+      var subjectId = menuType === 'Slack' ? 'shareToSlackMenuItem' : 'shareMenuItem';
+      var shareContentType = _this.props.shareContentType;
+      _this.createAndFireEvent(shareMenuItemClicked(subjectId, shareContentType));
+      _this.setState({
+        isMenuItemSelected: true
+      });
+    });
+    _defineProperty(_this, "getFlags", function () {
+      var formatMessage = _this.props.intl.formatMessage;
+
+      // The reason for providing message property is that in jira,
+      // the Flag system takes only Message Descriptor as payload
+      // and formatMessage is called for every flag
+      // if the translation data is not provided, a translated default message
+      // will be displayed
+      return [{
+        appearance: 'success',
+        title: _objectSpread(_objectSpread({}, messages.shareSuccessMessage), {}, {
+          defaultMessage: formatMessage(messages.shareSuccessMessage, {
+            object: _this.props.shareContentType.toLowerCase()
+          })
+        }),
+        type: OBJECT_SHARED
+      }];
+    });
+    _defineProperty(_this, "setIsLoading", function (isLoading) {
+      _this.setState({
+        isLoading: isLoading
+      });
+    });
+    _defineProperty(_this, "focus", function () {
+      if (_this.containerRef.current) {
+        _this.containerRef.current.focus();
+      }
+    });
+    _defineProperty(_this, "handleKeyDown", function (event) {
+      var _this$state = _this.state,
+        isLoading = _this$state.isLoading,
+        isDialogOpen = _this$state.isDialogOpen;
+      var shouldCloseOnEscapePress = _this.props.shouldCloseOnEscapePress;
+      if (isLoading) {
+        event.stopPropagation();
+        _this.focus();
+      }
+      if (isDialogOpen) {
+        switch (event.key) {
+          case 'Esc':
+          case 'Escape':
+            // The @atlaskit/popup will capture the event and auto-close, we
+            // need to prevent that if the dialog is set to not close on `ESC`
+            if (!shouldCloseOnEscapePress) {
+              event.preventDefault();
+              event.stopPropagation();
+              // put the focus back onto the share dialog so that
+              // the user can press the escape key again to close the dialog
+              _this.focus();
+              return;
+            }
+            // The dialog will auto-close in @atlaskit/popup, we just need to fire
+            // the right events.
+            if (shouldCloseOnEscapePress) {
+              // This experience should be aborted in a scenario when a user closes the dialog before the shareClient.getConfig() call is finished
+              // It is a race condition between the `SUCCEEDED` case and the `ABORTED` case of this experience
+              // UFO experiences can only have one FINAL state so it doesn't matter if we call .abort() after the experience has succeeded and vice versa
+              renderShareDialogExp.abort();
+              _this.createAndFireEvent(cancelShare(_this.start));
+              _this.closeAndResetDialog();
+            }
+        }
+      }
+    });
+    _defineProperty(_this, "handleDialogOpen", function () {
+      _this.setState(function (state) {
+        return {
+          isDialogOpen: !state.isDialogOpen,
+          ignoreIntermediateState: false,
+          showIntegrationForm: false,
+          selectedIntegration: null
+        };
+      }, function () {
+        var _this$props3 = _this.props,
+          onDialogOpen = _this$props3.onDialogOpen,
+          isPublicLink = _this$props3.isPublicLink;
+        var isDialogOpen = _this.state.isDialogOpen;
+        if (isDialogOpen) {
+          _this.start = Date.now();
+          _this.createAndFireEvent(screenEvent({
+            isPublicLink: isPublicLink
+          }));
+          if (onDialogOpen) {
+            onDialogOpen();
+          }
+          _this.focus();
+        } else {
+          _this.handleCloseDialog();
+        }
+      });
+    });
+    _defineProperty(_this, "onTriggerClick", function () {
+      var onTriggerButtonClick = _this.props.onTriggerButtonClick;
+      _this.createAndFireEvent(shareTriggerButtonClicked());
+      _this.handleDialogOpen();
+      if (onTriggerButtonClick) {
+        onTriggerButtonClick();
+      }
+    });
+    _defineProperty(_this, "handleCloseDialog", function () {
+      if (_this.props.onDialogClose) {
+        _this.props.onDialogClose();
+      }
+
+      // This experience should be aborted in a scenario when a user closes the dialog before the shareClient.getConfig() call is finished
+      // It is a race condition between the `SUCCEEDED` case and the `ABORTED` case of this experience
+      // UFO experiences can only have one FINAL state so it doesn't matter if we call .abort() after the experience has succeeded and vice versa
+      renderShareDialogExp.abort();
+      _this.setState({
+        isDialogOpen: false,
+        showIntegrationForm: false,
+        selectedIntegration: null,
+        tabIndex: 0,
+        isMenuItemSelected: false
+      });
+    });
+    _defineProperty(_this, "handleShareSubmit", function (data) {
+      var _this$props4 = _this.props,
+        onShareSubmit = _this$props4.onShareSubmit,
+        shareContentType = _this$props4.shareContentType,
+        shareContentSubType = _this$props4.shareContentSubType,
+        shareContentId = _this$props4.shareContentId,
+        formShareOrigin = _this$props4.formShareOrigin,
+        showFlags = _this$props4.showFlags,
+        isPublicLink = _this$props4.isPublicLink;
+      if (!onShareSubmit) {
+        return;
+      }
+      shareSubmitExp.start();
+      _this.setState({
+        isSharing: true
+      });
+      _this.createAndFireEvent(formShareSubmitted({
+        start: _this.start,
+        data: data,
+        shareContentType: shareContentType,
+        shareOrigin: formShareOrigin,
+        isPublicLink: isPublicLink,
+        shareContentSubType: shareContentSubType,
+        shareContentId: shareContentId
+      }));
+      onShareSubmit(data).then(function () {
+        _this.closeAndResetDialog();
+        _this.setState({
+          isSharing: false
+        });
+        showFlags(_this.getFlags());
+        shareSubmitExp.success();
+      }).catch( /*#__PURE__*/function () {
+        var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(err) {
+          var shareError;
+          return _regeneratorRuntime.wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return _this.generateShareError(err).catch(function (errorGenFailed) {
+                  return {
+                    message: err.message || errorGenFailed.message || 'Unknown error',
+                    retryable: true
+                  };
+                });
+              case 2:
+                shareError = _context.sent;
+                _this.setState({
+                  isSharing: false,
+                  shareError: shareError
+                });
+                isValidFailedExperience(shareSubmitExp, err);
+              case 5:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function (_x) {
+          return _ref.apply(this, arguments);
+        };
+      }());
+    });
+    _defineProperty(_this, "handleFormDismiss", function (data) {
+      _this.setState(function (_ref2) {
+        var ignoreIntermediateState = _ref2.ignoreIntermediateState;
+        return ignoreIntermediateState ? null : {
+          defaultValue: data
+        };
+      });
+    });
+    _defineProperty(_this, "calculatePopupOffset", function (_ref3) {
+      var isMenuItemSelected = _ref3.isMenuItemSelected,
+        dialogPlacement = _ref3.dialogPlacement;
+      if (isMenuItemSelected && dialogPlacement === 'bottom-end') {
+        return [-0.1, 8];
+      }
+      return [0, 8];
+    });
+    _defineProperty(_this, "handleCopyLink", function () {
+      var _this$props5 = _this.props,
+        copyLinkOrigin = _this$props5.copyLinkOrigin,
+        shareContentType = _this$props5.shareContentType,
+        shareContentSubType = _this$props5.shareContentSubType,
+        shareContentId = _this$props5.shareContentId,
+        isPublicLink = _this$props5.isPublicLink,
+        shareAri = _this$props5.shareAri;
+      _this.createAndFireEvent(copyLinkButtonClicked({
+        start: _this.start,
+        shareContentType: shareContentType,
+        shareOrigin: copyLinkOrigin,
+        isPublicLink: isPublicLink,
+        ari: shareAri,
+        shareContentSubType: shareContentSubType,
+        shareContentId: shareContentId
+      }));
+    });
+    _defineProperty(_this, "handleIntegrationClick", function (integration) {
+      _this.setState({
+        isUsingSplitButton: false,
+        isDialogOpen: true,
+        showIntegrationForm: true,
+        selectedIntegration: integration
+      });
+    });
+    _defineProperty(_this, "renderShareTriggerButton", function (triggerProps) {
+      var _this$state2 = _this.state,
+        isDialogOpen = _this$state2.isDialogOpen,
+        isUsingSplitButton = _this$state2.isUsingSplitButton;
+      var _this$props6 = _this.props,
+        formatMessage = _this$props6.intl.formatMessage,
+        isDisabled = _this$props6.isDisabled,
+        renderCustomTriggerButton = _this$props6.renderCustomTriggerButton,
+        triggerButtonIcon = _this$props6.triggerButtonIcon,
+        triggerButtonTooltipText = _this$props6.triggerButtonTooltipText,
+        triggerButtonTooltipPosition = _this$props6.triggerButtonTooltipPosition,
+        triggerButtonAppearance = _this$props6.triggerButtonAppearance,
+        triggerButtonStyle = _this$props6.triggerButtonStyle,
+        integrationMode = _this$props6.integrationMode,
+        shareIntegrations = _this$props6.shareIntegrations,
+        dialogZIndex = _this$props6.dialogZIndex,
+        dialogPlacement = _this$props6.dialogPlacement;
+      var button;
+      var ShareButtonIcon = triggerButtonIcon || IconShare;
+
+      // Render a custom or standard button.
+      if (renderCustomTriggerButton) {
+        var shareError = _this.state.shareError;
+        button = renderCustomTriggerButton({
+          error: shareError,
+          isDisabled: isDisabled,
+          isSelected: isDialogOpen,
+          onClick: _this.onTriggerClick
+        }, triggerProps);
+      } else {
+        button = /*#__PURE__*/React.createElement(ShareButton, {
+          appearance: triggerButtonAppearance,
+          text: triggerButtonStyle !== 'icon-only' ? /*#__PURE__*/React.createElement(FormattedMessage, messages.shareTriggerButtonText) : null,
+          "aria-label": formatMessage(messages.shareTriggerButtonText),
+          onClick: _this.onTriggerClick,
+          iconBefore: triggerButtonStyle !== 'text-only' ? /*#__PURE__*/React.createElement(ShareButtonIcon, {
+            label: ""
+          }) : undefined,
+          isSelected: isDialogOpen,
+          isDisabled: isDisabled,
+          ref: triggerProps.ref
+          // When we autoFocus the dialog, we want to autofocus the trigger as well, that way when the dialog is closed, the trigger is focused
+          ,
+          autoFocus: _this.props.isAutoOpenDialog
+        });
+      }
+
+      // If the button only shows the icon, wrap it in a tooltip containing the button text.
+      if (triggerButtonStyle === 'icon-only') {
+        button = /*#__PURE__*/React.createElement(Aktooltip, {
+          content: !isUsingSplitButton ? triggerButtonTooltipText || formatMessage(messages.shareTriggerButtonTooltipText) : null,
+          position: triggerButtonTooltipPosition,
+          hideTooltipOnClick: true
+        }, button);
+      }
+
+      // If there are any integrations, wrap the share button in a split button with integrations.
+      if (integrationMode === 'split' && shareIntegrations !== null && shareIntegrations !== void 0 && shareIntegrations.length) {
+        button = /*#__PURE__*/React.createElement(SplitButton, {
+          shareButton: button,
+          handleOpenSplitButton: _this.handleOpenSplitButton,
+          handleCloseSplitButton: _this.handleCloseSplitButton,
+          isUsingSplitButton: isUsingSplitButton,
+          triggerButtonAppearance: triggerButtonAppearance,
+          dialogZIndex: dialogZIndex,
+          dialogPlacement: dialogPlacement,
+          shareIntegrations: shareIntegrations,
+          onIntegrationClick: _this.handleIntegrationClick,
+          createAndFireEvent: _this.createAndFireEvent
+        });
+      }
+      return button;
+    });
+    _defineProperty(_this, "handleOpenSplitButton", function () {
+      _this.setState({
+        isUsingSplitButton: true
+      }, function () {
+        return _this.handleCloseDialog();
+      });
+      _this.createAndFireEvent(shareSplitButtonEvent());
+    });
+    _defineProperty(_this, "handleCloseSplitButton", function () {
+      _this.setState({
+        isUsingSplitButton: false
+      });
+    });
+    _defineProperty(_this, "handleOnUserSelectionChange", function (value) {
+      var onUserSelectionChange = _this.props.onUserSelectionChange;
+      _this.setState({
+        shareError: undefined
+      });
+      onUserSelectionChange === null || onUserSelectionChange === void 0 || onUserSelectionChange(value);
+    });
+    return _this;
+  }
+  _inherits(ShareDialogWithTriggerInternal, _React$PureComponent);
+  return _createClass(ShareDialogWithTriggerInternal, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      if (this.props.isAutoOpenDialog) {
+        this.handleDialogOpen();
+      }
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (this.props.isAutoOpenDialog !== prevProps.isAutoOpenDialog && this.props.isAutoOpenDialog) {
+        this.handleDialogOpen();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.props.isAutoOpenDialog && this.props.onDialogClose) {
+        this.props.onDialogClose();
+      }
+    }
+  }, {
+    key: "generateShareError",
+    value: function () {
+      var _generateShareError = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(err) {
+        var _errorBody$messagesDe;
+        var errorBody, firstErrorFromBody;
+        return _regeneratorRuntime.wrap(function _callee2$(_context2) {
+          while (1) switch (_context2.prev = _context2.next) {
+            case 0:
+              if (!err.body) {
+                _context2.next = 6;
+                break;
+              }
+              _context2.next = 3;
+              return err.body;
+            case 3:
+              _context2.t0 = _context2.sent;
+              _context2.next = 7;
+              break;
+            case 6:
+              _context2.t0 = {};
+            case 7:
+              errorBody = _context2.t0;
+              // We'll only try and deal with the first error, sorry
+              firstErrorFromBody = (_errorBody$messagesDe = errorBody.messagesDetails) === null || _errorBody$messagesDe === void 0 ? void 0 : _errorBody$messagesDe[0];
+              return _context2.abrupt("return", {
+                message: (firstErrorFromBody === null || firstErrorFromBody === void 0 ? void 0 : firstErrorFromBody.message) || err.message,
+                errorCode: firstErrorFromBody === null || firstErrorFromBody === void 0 ? void 0 : firstErrorFromBody.errorCode,
+                helpUrl: firstErrorFromBody === null || firstErrorFromBody === void 0 ? void 0 : firstErrorFromBody.helpUrl,
+                retryable: (firstErrorFromBody === null || firstErrorFromBody === void 0 ? void 0 : firstErrorFromBody.errorCode) === undefined
+              });
+            case 10:
+            case "end":
+              return _context2.stop();
+          }
+        }, _callee2);
+      }));
+      function generateShareError(_x2) {
+        return _generateShareError.apply(this, arguments);
+      }
+      return generateShareError;
+    }()
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$state3 = this.state,
+        isDialogOpen = _this$state3.isDialogOpen,
+        isSharing = _this$state3.isSharing,
+        shareError = _this$state3.shareError,
+        defaultValue = _this$state3.defaultValue,
+        showIntegrationForm = _this$state3.showIntegrationForm,
+        selectedIntegration = _this$state3.selectedIntegration,
+        isMenuItemSelected = _this$state3.isMenuItemSelected;
+      var _this$props7 = this.props,
+        copyLink = _this$props7.copyLink,
+        dialogPlacement = _this$props7.dialogPlacement,
+        config = _this$props7.config,
+        isFetchingConfig = _this$props7.isFetchingConfig,
+        loadUserOptions = _this$props7.loadUserOptions,
+        shareFormTitle = _this$props7.shareFormTitle,
+        shareFormHelperMessage = _this$props7.shareFormHelperMessage,
+        bottomMessage = _this$props7.bottomMessage,
+        submitButtonLabel = _this$props7.submitButtonLabel,
+        product = _this$props7.product,
+        productAttributes = _this$props7.productAttributes,
+        customFooter = _this$props7.customFooter,
+        enableSmartUserPicker = _this$props7.enableSmartUserPicker,
+        loggedInAccountId = _this$props7.loggedInAccountId,
+        cloudId = _this$props7.cloudId,
+        orgId = _this$props7.orgId,
+        shareFieldsFooter = _this$props7.shareFieldsFooter,
+        dialogZIndex = _this$props7.dialogZIndex,
+        isPublicLink = _this$props7.isPublicLink,
+        tabIndex = _this$props7.tabIndex,
+        copyTooltipText = _this$props7.copyTooltipText,
+        integrationMode = _this$props7.integrationMode,
+        shareIntegrations = _this$props7.shareIntegrations,
+        additionalTabs = _this$props7.additionalTabs,
+        builtInTabContentWidth = _this$props7.builtInTabContentWidth,
+        isBrowseUsersDisabled = _this$props7.isBrowseUsersDisabled,
+        userPickerOptions = _this$props7.userPickerOptions,
+        isSubmitShareDisabled = _this$props7.isSubmitShareDisabled;
+      var footer = resolveShareFooter(integrationMode, this.state.tabIndex, customFooter);
+
+      // for performance purposes, we may want to have a loadable content i.e. ShareForm
+      return /*#__PURE__*/React.createElement(Box, {
+        xcss: cx(styles.shareButtonWrapperStyles, typeof tabIndex !== 'undefined' && tabIndex >= 0 && styles.outlineNone),
+        tabIndex: tabIndex,
+        onKeyDown: this.handleKeyDown
+      }, /*#__PURE__*/React.createElement(Popup, {
+        content: function content() {
+          return /*#__PURE__*/React.createElement("div", {
+            ref: _this2.containerRef
+          }, /*#__PURE__*/React.createElement(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,
+            builtInTabContentWidth: builtInTabContentWidth,
+            isMenuItemSelected: isMenuItemSelected,
+            isSubmitShareDisabled: isSubmitShareDisabled
+            // 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')
+      }), /*#__PURE__*/React.createElement(Portal, {
+        zIndex: generateSelectZIndex(dialogZIndex)
+      }, /*#__PURE__*/React.createElement("div", {
+        ref: this.selectPortalRef
+      })));
+    }
+  }]);
+}(React.PureComponent);
+_defineProperty(ShareDialogWithTriggerInternal, "defaultProps", {
+  isDisabled: false,
+  dialogPlacement: 'bottom-end',
+  shouldCloseOnEscapePress: true,
+  triggerButtonAppearance: 'subtle',
+  triggerButtonStyle: 'icon-only',
+  triggerButtonTooltipPosition: 'top',
+  dialogZIndex: layers.modal()
+});
+export var ShareDialogWithTrigger = withAnalyticsEvents()(injectIntl(ShareDialogWithTriggerInternal));

package/dist/esm/components/ShareFormNext.compiled.css

@@ -0,0 +1,21 @@
+._11c81vlj{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._18zrutpp{padding-inline:var(--ds-space-150,9pt)}
+._195g10v4{margin-inline:var(--ds-space-negative-300,-24px)}
+._1moux0bf{margin-block:var(--ds-space-negative-100,-8px)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._18u01wug{margin-left:auto}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
+._1bah1y6m{justify-content:flex-start}
+._1bsb1osq{width:100%}
+._1bsb1w81{width:150px}
+._1e0c1txw{display:flex}
+._1wpz1h6o{align-self:center}
+._2hwx1b66{margin-right:var(--ds-space-050,4px)}
+._4cvr1h6o{align-items:center}
+._4cvr1y6m{align-items:flex-start}
+._otyr196n{margin-bottom:var(--ds-space-negative-075,-6px)}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
+._otyrutpp{margin-bottom:var(--ds-space-150,9pt)}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._syaz1n3s{color:var(--ds-text-subtle,#5e6c84)}