@atlaskit/share 5.0.0 → 5.0.1

package/dist/es2019/components/ShareDialogWithTriggerNext.js

@@ -0,0 +1,593 @@
+/* ShareDialogWithTriggerNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./ShareDialogWithTriggerNext.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+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';
+const styles = {
+  shareButtonWrapperStyles: "_12ji1r31 _1qu2glyw _12y31o36 _1e0c116y",
+  outlineNone: "_12ji1r31 _1qu2glyw _12y31o36"
+};
+export const defaultShareContentState = {
+  users: [],
+  comment: {
+    format: 'plain_text',
+    value: ''
+  }
+};
+export const IconShare = () => /*#__PURE__*/React.createElement(ShareIcon, {
+  spacing: "spacious",
+  label: "",
+  color: "currentColor"
+});
+
+// eslint-disable-next-line @repo/internal/react/no-class-components
+export class ShareDialogWithTriggerInternal extends React.PureComponent {
+  constructor(...args) {
+    super(...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", () => {
+      this.setState({
+        defaultValue: defaultShareContentState,
+        ignoreIntermediateState: true,
+        shareError: undefined,
+        isDialogOpen: false,
+        showIntegrationForm: false,
+        selectedIntegration: null,
+        isMenuItemSelected: false
+      });
+      const {
+        onUserSelectionChange,
+        onDialogClose
+      } = this.props;
+      if (onUserSelectionChange) {
+        onUserSelectionChange(defaultShareContentState.users);
+      }
+      if (onDialogClose) {
+        onDialogClose();
+      }
+    });
+    _defineProperty(this, "createAndFireEvent", payload => {
+      const {
+        createAnalyticsEvent,
+        analyticsDecorator
+      } = this.props;
+      if (analyticsDecorator) {
+        payload = analyticsDecorator(payload);
+      }
+      if (createAnalyticsEvent) {
+        createAnalyticsEvent(payload).fire(CHANNEL_ID);
+      }
+    });
+    _defineProperty(this, "onTabChange", index => {
+      let subjectId = 'shareTab';
+      const {
+        shareContentType
+      } = this.props;
+      if (index === 1) {
+        subjectId = 'shareToSlackTab';
+      }
+      this.createAndFireEvent(shareTabClicked(subjectId, shareContentType));
+      this.setState({
+        tabIndex: index
+      });
+    });
+    _defineProperty(this, "onMenuItemChange", menuType => {
+      let subjectId = menuType === 'Slack' ? 'shareToSlackMenuItem' : 'shareMenuItem';
+      const {
+        shareContentType
+      } = this.props;
+      this.createAndFireEvent(shareMenuItemClicked(subjectId, shareContentType));
+      this.setState({
+        isMenuItemSelected: true
+      });
+    });
+    _defineProperty(this, "getFlags", () => {
+      const {
+        intl: {
+          formatMessage
+        }
+      } = this.props;
+
+      // 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: {
+          ...messages.shareSuccessMessage,
+          defaultMessage: formatMessage(messages.shareSuccessMessage, {
+            object: this.props.shareContentType.toLowerCase()
+          })
+        },
+        type: OBJECT_SHARED
+      }];
+    });
+    _defineProperty(this, "setIsLoading", isLoading => {
+      this.setState({
+        isLoading
+      });
+    });
+    _defineProperty(this, "focus", () => {
+      if (this.containerRef.current) {
+        this.containerRef.current.focus();
+      }
+    });
+    _defineProperty(this, "handleKeyDown", event => {
+      const {
+        isLoading,
+        isDialogOpen
+      } = this.state;
+      const {
+        shouldCloseOnEscapePress
+      } = this.props;
+      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", () => {
+      this.setState(state => ({
+        isDialogOpen: !state.isDialogOpen,
+        ignoreIntermediateState: false,
+        showIntegrationForm: false,
+        selectedIntegration: null
+      }), () => {
+        const {
+          onDialogOpen,
+          isPublicLink
+        } = this.props;
+        const {
+          isDialogOpen
+        } = this.state;
+        if (isDialogOpen) {
+          this.start = Date.now();
+          this.createAndFireEvent(screenEvent({
+            isPublicLink
+          }));
+          if (onDialogOpen) {
+            onDialogOpen();
+          }
+          this.focus();
+        } else {
+          this.handleCloseDialog();
+        }
+      });
+    });
+    _defineProperty(this, "onTriggerClick", () => {
+      const {
+        onTriggerButtonClick
+      } = this.props;
+      this.createAndFireEvent(shareTriggerButtonClicked());
+      this.handleDialogOpen();
+      if (onTriggerButtonClick) {
+        onTriggerButtonClick();
+      }
+    });
+    _defineProperty(this, "handleCloseDialog", () => {
+      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", data => {
+      const {
+        onShareSubmit,
+        shareContentType,
+        shareContentSubType,
+        shareContentId,
+        formShareOrigin,
+        showFlags,
+        isPublicLink
+      } = this.props;
+      if (!onShareSubmit) {
+        return;
+      }
+      shareSubmitExp.start();
+      this.setState({
+        isSharing: true
+      });
+      this.createAndFireEvent(formShareSubmitted({
+        start: this.start,
+        data,
+        shareContentType,
+        shareOrigin: formShareOrigin,
+        isPublicLink,
+        shareContentSubType,
+        shareContentId
+      }));
+      onShareSubmit(data).then(() => {
+        this.closeAndResetDialog();
+        this.setState({
+          isSharing: false
+        });
+        showFlags(this.getFlags());
+        shareSubmitExp.success();
+      }).catch(async err => {
+        const shareError = await this.generateShareError(err).catch(errorGenFailed => ({
+          message: err.message || errorGenFailed.message || 'Unknown error',
+          retryable: true
+        }));
+        this.setState({
+          isSharing: false,
+          shareError
+        });
+        isValidFailedExperience(shareSubmitExp, err);
+      });
+    });
+    _defineProperty(this, "handleFormDismiss", data => {
+      this.setState(({
+        ignoreIntermediateState
+      }) => ignoreIntermediateState ? null : {
+        defaultValue: data
+      });
+    });
+    _defineProperty(this, "calculatePopupOffset", ({
+      isMenuItemSelected,
+      dialogPlacement
+    }) => {
+      if (isMenuItemSelected && dialogPlacement === 'bottom-end') {
+        return [-0.1, 8];
+      }
+      return [0, 8];
+    });
+    _defineProperty(this, "handleCopyLink", () => {
+      const {
+        copyLinkOrigin,
+        shareContentType,
+        shareContentSubType,
+        shareContentId,
+        isPublicLink,
+        shareAri
+      } = this.props;
+      this.createAndFireEvent(copyLinkButtonClicked({
+        start: this.start,
+        shareContentType,
+        shareOrigin: copyLinkOrigin,
+        isPublicLink,
+        ari: shareAri,
+        shareContentSubType,
+        shareContentId
+      }));
+    });
+    _defineProperty(this, "handleIntegrationClick", integration => {
+      this.setState({
+        isUsingSplitButton: false,
+        isDialogOpen: true,
+        showIntegrationForm: true,
+        selectedIntegration: integration
+      });
+    });
+    _defineProperty(this, "renderShareTriggerButton", triggerProps => {
+      const {
+        isDialogOpen,
+        isUsingSplitButton
+      } = this.state;
+      const {
+        intl: {
+          formatMessage
+        },
+        isDisabled,
+        renderCustomTriggerButton,
+        triggerButtonIcon,
+        triggerButtonTooltipText,
+        triggerButtonTooltipPosition,
+        triggerButtonAppearance,
+        triggerButtonStyle,
+        integrationMode,
+        shareIntegrations,
+        dialogZIndex,
+        dialogPlacement
+      } = this.props;
+      let button;
+      const ShareButtonIcon = triggerButtonIcon || IconShare;
+
+      // Render a custom or standard button.
+      if (renderCustomTriggerButton) {
+        const {
+          shareError
+        } = this.state;
+        button = renderCustomTriggerButton({
+          error: shareError,
+          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", () => {
+      this.setState({
+        isUsingSplitButton: true
+      }, () => this.handleCloseDialog());
+      this.createAndFireEvent(shareSplitButtonEvent());
+    });
+    _defineProperty(this, "handleCloseSplitButton", () => {
+      this.setState({
+        isUsingSplitButton: false
+      });
+    });
+    _defineProperty(this, "handleOnUserSelectionChange", value => {
+      const {
+        onUserSelectionChange
+      } = this.props;
+      this.setState({
+        shareError: undefined
+      });
+      onUserSelectionChange === null || onUserSelectionChange === void 0 ? void 0 : onUserSelectionChange(value);
+    });
+  }
+  componentDidMount() {
+    if (this.props.isAutoOpenDialog) {
+      this.handleDialogOpen();
+    }
+  }
+  componentDidUpdate(prevProps) {
+    if (this.props.isAutoOpenDialog !== prevProps.isAutoOpenDialog && this.props.isAutoOpenDialog) {
+      this.handleDialogOpen();
+    }
+  }
+  componentWillUnmount() {
+    if (this.props.isAutoOpenDialog && this.props.onDialogClose) {
+      this.props.onDialogClose();
+    }
+  }
+  async generateShareError(err) {
+    var _errorBody$messagesDe;
+    const errorBody = err.body ? await err.body : {};
+
+    // We'll only try and deal with the first error, sorry
+    const firstErrorFromBody = (_errorBody$messagesDe = errorBody.messagesDetails) === null || _errorBody$messagesDe === void 0 ? void 0 : _errorBody$messagesDe[0];
+    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
+    };
+  }
+  render() {
+    const {
+      isDialogOpen,
+      isSharing,
+      shareError,
+      defaultValue,
+      showIntegrationForm,
+      selectedIntegration,
+      isMenuItemSelected
+    } = this.state;
+    const {
+      copyLink,
+      dialogPlacement,
+      config,
+      isFetchingConfig,
+      loadUserOptions,
+      shareFormTitle,
+      shareFormHelperMessage,
+      bottomMessage,
+      submitButtonLabel,
+      product,
+      productAttributes,
+      customFooter,
+      enableSmartUserPicker,
+      loggedInAccountId,
+      cloudId,
+      orgId,
+      shareFieldsFooter,
+      dialogZIndex,
+      isPublicLink,
+      tabIndex,
+      copyTooltipText,
+      integrationMode,
+      shareIntegrations,
+      additionalTabs,
+      builtInTabContentWidth,
+      isBrowseUsersDisabled,
+      userPickerOptions,
+      isSubmitShareDisabled
+    } = this.props;
+    const 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: () => /*#__PURE__*/React.createElement("div", {
+        ref: this.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: 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,
+        builtInTabContentWidth: builtInTabContentWidth,
+        isMenuItemSelected: isMenuItemSelected,
+        isSubmitShareDisabled: isSubmitShareDisabled
+        // 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
+      ,
+      offset: this.calculatePopupOffset({
+        isMenuItemSelected,
+        dialogPlacement
+      }),
+      shouldRenderToParent: fg('enable-appropriate-reading-order-in-share-dialog')
+    }), /*#__PURE__*/React.createElement(Portal, {
+      zIndex: generateSelectZIndex(dialogZIndex)
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: this.selectPortalRef
+    })));
+  }
+}
+_defineProperty(ShareDialogWithTriggerInternal, "defaultProps", {
+  isDisabled: false,
+  dialogPlacement: 'bottom-end',
+  shouldCloseOnEscapePress: true,
+  triggerButtonAppearance: 'subtle',
+  triggerButtonStyle: 'icon-only',
+  triggerButtonTooltipPosition: 'top',
+  dialogZIndex: layers.modal()
+});
+export const ShareDialogWithTrigger = withAnalyticsEvents()(injectIntl(ShareDialogWithTriggerInternal));

package/dist/es2019/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)}