@atlaskit/share 5.0.0 → 6.0.0

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

package/dist/es2019/components/CopyLinkButton.js

@@ -15,6 +15,7 @@ import { Box, xcss } from '@atlaskit/primitives';
 import { G300 } from '@atlaskit/theme/colors';
 import { layers } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
+import CopyLinkButtonNext from './CopyLinkButtonNext';
 import { InlineDialogContentWrapper } from './ShareFormWrapper/styled';
 import Button from './styles';
 const Z_INDEX = layers.modal();
@@ -51,7 +52,7 @@ export const HiddenInput = /*#__PURE__*/React.forwardRef(
   readOnly: true
 }));
 // eslint-disable-next-line @repo/internal/react/no-class-components
-export class CopyLinkButton extends React.Component {
+export class CopyLinkButtonInner extends React.Component {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "inputRef", /*#__PURE__*/React.createRef());
@@ -159,4 +160,5 @@ export class CopyLinkButton extends React.Component {
     }));
   }
 }
+export const CopyLinkButton = props => fg('share-compiled-migration') ? jsx(CopyLinkButtonNext, props) : jsx(CopyLinkButtonInner, props);
 export default CopyLinkButton;

package/dist/es2019/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/es2019/components/CopyLinkButtonNext.js

@@ -0,0 +1,151 @@
+/* CopyLinkButtonNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./CopyLinkButtonNext.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { cx } from '@atlaskit/css';
+import LinkFilledIcon from '@atlaskit/icon/core/migration/link--link-filled';
+import CheckCircleIcon from '@atlaskit/icon/core/migration/success--check-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
+import Popup from '@atlaskit/popup';
+import { Box } from '@atlaskit/primitives/compiled';
+import { G300 } from '@atlaskit/theme/colors';
+import { layers } from '@atlaskit/theme/constants';
+import Tooltip from '@atlaskit/tooltip';
+import { InlineDialogContentWrapper } from './ShareFormWrapper/compiled';
+import Button from './styles';
+const Z_INDEX = layers.modal();
+const AUTO_DISMISS_SECONDS = 8;
+export const AUTO_DISMISS_MS = AUTO_DISMISS_SECONDS * 1000;
+const styles = {
+  messageContainer: "_1e0c1txw _4cvr1h6o _19pkx0bf _2hwxmgjw _otyrx0bf _18u0mgjw",
+  boxWrapper: "_2hwxv77o",
+  messageText: "_azhw12x7"
+};
+const isSafari = typeof window !== 'undefined' && window.navigator.userAgent.indexOf('Safari');
+export const HiddenInput = /*#__PURE__*/React.forwardRef(
+// we need a hidden input to reliably copy to clipboard across all browsers.
+(props, ref) => /*#__PURE__*/React.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
+export class CopyLinkButton extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "inputRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "state", {
+      shouldShowCopiedMessage: false
+    });
+    _defineProperty(this, "clearAutoDismiss", () => {
+      if (this.autoDismiss) {
+        clearTimeout(this.autoDismiss);
+        this.autoDismiss = undefined;
+      }
+    });
+    _defineProperty(this, "handleClick", () => {
+      this.inputRef.current.select();
+      document.execCommand('copy');
+      if (this.props.onLinkCopy) {
+        this.props.onLinkCopy(this.props.link);
+      }
+      this.setState({
+        shouldShowCopiedMessage: true
+      }, () => {
+        this.clearAutoDismiss();
+        this.autoDismiss = setTimeout(() => {
+          this.setState({
+            shouldShowCopiedMessage: false
+          });
+        }, AUTO_DISMISS_MS);
+      });
+    });
+    _defineProperty(this, "handleDismissCopiedMessage", () => {
+      this.clearAutoDismiss();
+      this.setState({
+        shouldShowCopiedMessage: false
+      });
+    });
+    _defineProperty(this, "renderTriggerButton", triggerProps => {
+      const {
+        isDisabled,
+        copyLinkButtonText,
+        children,
+        iconBefore
+      } = this.props;
+      return /*#__PURE__*/React.createElement(Button, {
+        "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.createElement(Box, {
+          xcss: cx(styles.boxWrapper)
+        }, /*#__PURE__*/React.createElement(LinkFilledIcon, {
+          LEGACY_margin: `0 ${"var(--ds-space-negative-025, -2px)"} 0 0`,
+          color: "currentColor",
+          label: "",
+          LEGACY_size: "medium"
+        })),
+        onClick: this.handleClick,
+        ref: triggerProps.ref
+      }, children || copyLinkButtonText);
+    });
+  }
+  componentWillUnmount() {
+    this.clearAutoDismiss();
+  }
+  render() {
+    const {
+      shouldShowCopiedMessage
+    } = this.state;
+    const {
+      copyTooltipText,
+      copiedToClipboardText
+    } = this.props;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, isSafari &&
+    /*#__PURE__*/
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+    React.createElement("div", {
+      className: "assistive",
+      "aria-live": "assertive"
+    }, shouldShowCopiedMessage && copiedToClipboardText), /*#__PURE__*/React.createElement(HiddenInput, {
+      ref: this.inputRef,
+      text: this.props.link,
+      label: copiedToClipboardText
+    }), /*#__PURE__*/React.createElement(Popup, {
+      zIndex: Z_INDEX,
+      autoFocus: false,
+      content: () => /*#__PURE__*/React.createElement(InlineDialogContentWrapper, null, /*#__PURE__*/React.createElement(Box, {
+        xcss: cx(styles.messageContainer),
+        testId: "message-container",
+        "aria-hidden": true
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CheckCircleIcon, {
+        spacing: "spacious",
+        label: "",
+        color: `var(--ds-icon-success, ${G300})`
+      }), /*#__PURE__*/React.createElement(Box, {
+        xcss: cx(styles.messageText)
+      }, copiedToClipboardText)))),
+      isOpen: shouldShowCopiedMessage,
+      onClose: this.handleDismissCopiedMessage,
+      placement: "top-start",
+      trigger: triggerProps => copyTooltipText ? /*#__PURE__*/React.createElement(Tooltip, {
+        content: copyTooltipText,
+        position: "bottom-start"
+      }, this.renderTriggerButton(triggerProps)) : this.renderTriggerButton(triggerProps),
+      shouldRenderToParent: fg('enable-appropriate-reading-order-in-share-dialog')
+    }));
+  }
+}
+export default CopyLinkButton;

package/dist/es2019/components/IntegrationButton.js

@@ -7,7 +7,10 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N500 } from '@atlaskit/theme/colors';
+import IntegrationButtonNext from './IntegrationButtonNext';
+
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/design-system/no-css-tagged-template-expression -- Ignored via go/DSP-18766
 const integrationButtonCopyWrapperStyle = css`
 	display: flex;
@@ -19,7 +22,7 @@ const integrationIconWrapperStyle = css`
 	margin: ${"var(--ds-space-025, 2px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-0, 0px)"}
 		${"var(--ds-space-0, 0px)"};
 `;
-const IntegrationButton = props => {
+const IntegrationButtonInner = props => {
   const {
     text,
     textColor,
@@ -38,5 +41,10 @@ const IntegrationButton = props => {
     }, jsx(IntegrationIcon, null)), jsx("span", null, text)))
   );
 };
+const IntegrationButton = props => fg('share-compiled-migration') ? jsx(IntegrationButtonNext, {
+  text: props.text,
+  onClick: props.onClick,
+  IntegrationIcon: props.IntegrationIcon
+}) : jsx(IntegrationButtonInner, props);
 IntegrationButton.displayName = 'IntegrationButton';
 export default IntegrationButton;

package/dist/es2019/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/es2019/components/IntegrationButtonNext.js

@@ -0,0 +1,33 @@
+/* IntegrationButtonNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./IntegrationButtonNext.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import Button from '@atlaskit/button/new';
+import { cx } from '@atlaskit/css';
+import { Box, Text } from '@atlaskit/primitives/compiled';
+import { N500 } from '@atlaskit/theme/colors';
+const styles = {
+  integrationButtonCopyWrapperStyle: "_1e0c1txw _1bah1e5h _syaz10s3",
+  integrationIconWrapperStyle: "_19pkv77o _2hwxu2gc _otyrze3t _18u0ze3t"
+};
+const IntegrationButton = props => {
+  const {
+    text,
+    IntegrationIcon
+  } = props;
+  return /*#__PURE__*/React.createElement(Button, {
+    appearance: "subtle",
+    shouldFitContainer: true,
+    onClick: props.onClick
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: cx(styles.integrationButtonCopyWrapperStyle)
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    xcss: cx(styles.integrationIconWrapperStyle)
+  }, /*#__PURE__*/React.createElement(IntegrationIcon, null)), /*#__PURE__*/React.createElement(Text, {
+    color: "color.text"
+  }, text)));
+};
+IntegrationButton.displayName = 'IntegrationButton';
+export default IntegrationButton;

package/dist/es2019/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/es2019/components/LazyShareForm/LazyShareFormNext.js

@@ -0,0 +1,136 @@
+/* LazyShareFormNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./LazyShareFormNext.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { cx } from '@atlaskit/css';
+import { Text } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
+import { messages } from '../../i18n';
+import { INTEGRATION_MODAL_SOURCE } from '../analytics/analytics';
+import { IntegrationForm } from '../IntegrationForm';
+import { ShareForm } from '../ShareForm';
+import { ShareFormWrapper } from '../ShareFormWrapper';
+import { allowEmails } from '../utils';
+const 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) {
+  const {
+    copyLink,
+    config,
+    isFetchingConfig,
+    setIsLoading,
+    loadOptions,
+    shareFormTitle,
+    shareFormHelperMessage,
+    bottomMessage,
+    submitButtonLabel,
+    product,
+    productAttributes,
+    customFooter,
+    enableSmartUserPicker,
+    loggedInAccountId,
+    cloudId,
+    shareFieldsFooter,
+    onUserSelectionChange,
+    isPublicLink,
+    copyTooltipText,
+    shareIntegrations,
+    integrationMode,
+    additionalTabs,
+    builtInTabContentWidth,
+    isMenuItemSelected,
+    // actions
+    onLinkCopy,
+    onDismiss,
+    onSubmit,
+    onDialogClose,
+    onTabChange,
+    onMenuItemChange,
+    // ref
+    selectPortalRef,
+    // props from states of parent:
+    showIntegrationForm,
+    selectedIntegration,
+    isSharing,
+    shareError,
+    defaultValue,
+    showTitle,
+    orgId,
+    isBrowseUsersDisabled,
+    userPickerOptions,
+    isSubmitShareDisabled
+  } = props;
+  const footer = /*#__PURE__*/React.createElement("div", null, bottomMessage ? /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.footerBottomMessageStyles)
+  }, bottomMessage) : null, customFooter && selectedIntegration === null && /*#__PURE__*/React.createElement(Box, {
+    xcss: cx(styles.footerCustomStyles)
+  }, customFooter));
+  React.useEffect(() => {
+    setIsLoading(false);
+  });
+  const allowEmail = allowEmails(config);
+  return /*#__PURE__*/React.createElement(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.createElement(AnalyticsContext, {
+    data: {
+      source: INTEGRATION_MODAL_SOURCE
+    }
+  }, /*#__PURE__*/React.createElement(IntegrationForm, {
+    Content: selectedIntegration.Content,
+    onIntegrationClose: onDialogClose
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, allowEmail || !isBrowseUsersDisabled ? /*#__PURE__*/React.createElement(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.createElement(Text, {
+    as: "p"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, messages.formNoPermissions))));
+}
+export default LazyShareForm;

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

@@ -6,8 +6,10 @@ import React, { lazy, Suspense } from 'react';
 
 // 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 Spinner from '@atlaskit/spinner';
 import { ShareFormWrapper } from '../ShareFormWrapper';
+import ComponentNext from './lazyNext';
 const spinnerWrapperStyles = css({
   width: '100%',
   height: '100%',
@@ -38,7 +40,7 @@ const LoadingDialog = ({
     css: spinnerWrapperStyles
   }, jsx(Spinner, null)));
 };
-export default (props => jsx(Suspense, {
+export default (props => fg('share-compiled-migration') ? jsx(ComponentNext, props) : jsx(Suspense, {
   fallback: jsx(LoadingDialog, {
     shareFormTitle: props.shareFormTitle,
     showTitle: props.showTitle,

package/dist/es2019/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/es2019/components/LazyShareForm/lazyNext.js

@@ -0,0 +1,43 @@
+/* lazyNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./lazyNext.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { lazy, Suspense } from 'react';
+import { cx } from '@atlaskit/css';
+import { Box } from '@atlaskit/primitives/compiled';
+import Spinner from '@atlaskit/spinner';
+import { ShareFormWrapper } from '../ShareFormWrapper';
+const styles = {
+  spinnerWrapperStyles: "_1bsb1osq _4t3i1osq _1e0c1txw _1bah1h6o _ae4v1h6o"
+};
+const LazyShareFormLazy = /*#__PURE__*/lazy(() => import( /* webpackChunkName: "@atlaskit-internal_share-form-next" */
+'./LazyShareFormNext'));
+const LoadingDialog = ({
+  shareFormTitle,
+  showTitle,
+  setIsLoading,
+  integrationMode,
+  isMenuItemSelected
+}) => {
+  React.useEffect(() => {
+    setIsLoading(true);
+  });
+  return /*#__PURE__*/React.createElement(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.createElement(Box, {
+    xcss: cx(styles.spinnerWrapperStyles)
+  }, /*#__PURE__*/React.createElement(Spinner, null)));
+};
+export default (props => /*#__PURE__*/React.createElement(Suspense, {
+  fallback: /*#__PURE__*/React.createElement(LoadingDialog, {
+    shareFormTitle: props.shareFormTitle,
+    showTitle: props.showTitle,
+    setIsLoading: props.setIsLoading,
+    integrationMode: props.integrationMode,
+    isMenuItemSelected: props.isMenuItemSelected
+  })
+}, /*#__PURE__*/React.createElement(LazyShareFormLazy, props)));

package/dist/es2019/components/ShareDialogWithTrigger.js

@@ -26,6 +26,7 @@ import { isValidFailedExperience } from './analytics/ufoExperienceHelper';
 import { renderShareDialogExp, shareSubmitExp } from './analytics/ufoExperiences';
 import LazyShareFormLazy from './LazyShareForm/lazy';
 import ShareButton from './ShareButton';
+import { ShareDialogWithTriggerInternal as ShareDialogWithTriggerInternalNext } from './ShareDialogWithTriggerNext';
 import SplitButton from './SplitButton';
 import { generateSelectZIndex, resolveShareFooter } from './utils';
 const shareButtonWrapperStyles = css({
@@ -46,7 +47,7 @@ export const IconShare = () => jsx(ShareIcon, {
 });
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
-export class ShareDialogWithTriggerInternal extends React.PureComponent {
+export class ShareDialogWithTriggerInternalLegacy extends React.PureComponent {
   constructor(...args) {
     super(...args);
     _defineProperty(this, "containerRef", /*#__PURE__*/React.createRef());
@@ -612,7 +613,7 @@ export class ShareDialogWithTriggerInternal extends React.PureComponent {
     );
   }
 }
-_defineProperty(ShareDialogWithTriggerInternal, "defaultProps", {
+_defineProperty(ShareDialogWithTriggerInternalLegacy, "defaultProps", {
   isDisabled: false,
   dialogPlacement: 'bottom-end',
   shouldCloseOnEscapePress: true,
@@ -621,4 +622,5 @@ _defineProperty(ShareDialogWithTriggerInternal, "defaultProps", {
   triggerButtonTooltipPosition: 'top',
   dialogZIndex: layers.modal()
 });
+export const ShareDialogWithTriggerInternal = props => fg('share-compiled-migration') ? jsx(ShareDialogWithTriggerInternalNext, props) : jsx(ShareDialogWithTriggerInternalLegacy, props);
 export const ShareDialogWithTrigger = withAnalyticsEvents()(injectIntl(ShareDialogWithTriggerInternal));

package/dist/es2019/components/ShareDialogWithTriggerNext.compiled.css

@@ -0,0 +1,4 @@
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._1e0c116y{display:inline-flex}
+._1qu2glyw{outline-style:none}