@atlaskit/share 5.0.0 → 6.0.0

package/dist/esm/components/CopyLinkButtonNext.js

@@ -0,0 +1,173 @@
+/* CopyLinkButtonNext.tsx generated by @compiled/babel-plugin v0.36.1 */
+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 "./CopyLinkButtonNext.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+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 { 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';
+var Z_INDEX = layers.modal();
+var AUTO_DISMISS_SECONDS = 8;
+export var 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');
+export var HiddenInput = /*#__PURE__*/React.forwardRef(
+// we need a hidden input to reliably copy to clipboard across all browsers.
+function (props, ref) {
+  return /*#__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 var CopyLinkButton = /*#__PURE__*/function (_React$Component) {
+  function CopyLinkButton() {
+    var _this;
+    _classCallCheck(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));
+    _defineProperty(_this, "inputRef", /*#__PURE__*/React.createRef());
+    _defineProperty(_this, "state", {
+      shouldShowCopiedMessage: false
+    });
+    _defineProperty(_this, "clearAutoDismiss", function () {
+      if (_this.autoDismiss) {
+        clearTimeout(_this.autoDismiss);
+        _this.autoDismiss = undefined;
+      }
+    });
+    _defineProperty(_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);
+      });
+    });
+    _defineProperty(_this, "handleDismissCopiedMessage", function () {
+      _this.clearAutoDismiss();
+      _this.setState({
+        shouldShowCopiedMessage: false
+      });
+    });
+    _defineProperty(_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.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 ".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;
+  }
+  _inherits(CopyLinkButton, _React$Component);
+  return _createClass(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.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: function content() {
+          return /*#__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, ".concat(G300, ")")
+          }), /*#__PURE__*/React.createElement(Box, {
+            xcss: cx(styles.messageText)
+          }, copiedToClipboardText))));
+        },
+        isOpen: shouldShowCopiedMessage,
+        onClose: this.handleDismissCopiedMessage,
+        placement: "top-start",
+        trigger: function trigger(triggerProps) {
+          return copyTooltipText ? /*#__PURE__*/React.createElement(Tooltip, {
+            content: copyTooltipText,
+            position: "bottom-start"
+          }, _this2.renderTriggerButton(triggerProps)) : _this2.renderTriggerButton(triggerProps);
+        },
+        shouldRenderToParent: fg('enable-appropriate-reading-order-in-share-dialog')
+      }));
+    }
+  }]);
+}(React.Component);
+export default CopyLinkButton;

package/dist/esm/components/IntegrationButton.js

@@ -11,13 +11,16 @@ 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
 var integrationButtonCopyWrapperStyle = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n\tdisplay: flex;\n\tjustify-content: left;\n"])));
 
 // 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 = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\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,
@@ -34,5 +37,12 @@ var IntegrationButton = function IntegrationButton(props) {
     }, jsx(IntegrationIcon, null)), jsx("span", null, text)))
   );
 };
+var IntegrationButton = function IntegrationButton(props) {
+  return 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/esm/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/esm/components/IntegrationButtonNext.js

@@ -0,0 +1,31 @@
+/* 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';
+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.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/esm/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/esm/components/LazyShareForm/LazyShareFormNext.js

@@ -0,0 +1,131 @@
+/* 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';
+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.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(function () {
+    setIsLoading(false);
+  });
+  var 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/esm/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';
 var spinnerWrapperStyles = css({
   width: '100%',
   height: '100%',
@@ -40,7 +42,7 @@ var LoadingDialog = function LoadingDialog(_ref) {
   }, jsx(Spinner, null)));
 };
 export default (function (props) {
-  return jsx(Suspense, {
+  return fg('share-compiled-migration') ? jsx(ComponentNext, props) : jsx(Suspense, {
     fallback: jsx(LoadingDialog, {
       shareFormTitle: props.shareFormTitle,
       showTitle: props.showTitle,

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

@@ -0,0 +1,46 @@
+/* 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';
+var styles = {
+  spinnerWrapperStyles: "_1bsb1osq _4t3i1osq _1e0c1txw _1bah1h6o _ae4v1h6o"
+};
+var LazyShareFormLazy = /*#__PURE__*/lazy(function () {
+  return import( /* 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.useEffect(function () {
+    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 (function (props) {
+  return /*#__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/esm/components/ShareDialogWithTrigger.js

@@ -37,6 +37,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';
 var shareButtonWrapperStyles = css({
@@ -59,14 +60,14 @@ export var IconShare = function IconShare() {
 };
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
-export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureComponent) {
-  function ShareDialogWithTriggerInternal() {
+export var ShareDialogWithTriggerInternalLegacy = /*#__PURE__*/function (_React$PureComponent) {
+  function ShareDialogWithTriggerInternalLegacy() {
     var _this;
-    _classCallCheck(this, ShareDialogWithTriggerInternal);
+    _classCallCheck(this, ShareDialogWithTriggerInternalLegacy);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, ShareDialogWithTriggerInternal, [].concat(args));
+    _this = _callSuper(this, ShareDialogWithTriggerInternalLegacy, [].concat(args));
     _defineProperty(_this, "containerRef", /*#__PURE__*/React.createRef());
     /**
      * Because the PopUp component has a higher zIndex it causes
@@ -469,8 +470,8 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
     });
     return _this;
   }
-  _inherits(ShareDialogWithTriggerInternal, _React$PureComponent);
-  return _createClass(ShareDialogWithTriggerInternal, [{
+  _inherits(ShareDialogWithTriggerInternalLegacy, _React$PureComponent);
+  return _createClass(ShareDialogWithTriggerInternalLegacy, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       if (this.props.isAutoOpenDialog) {
@@ -665,7 +666,7 @@ export var ShareDialogWithTriggerInternal = /*#__PURE__*/function (_React$PureCo
     }
   }]);
 }(React.PureComponent);
-_defineProperty(ShareDialogWithTriggerInternal, "defaultProps", {
+_defineProperty(ShareDialogWithTriggerInternalLegacy, "defaultProps", {
   isDisabled: false,
   dialogPlacement: 'bottom-end',
   shouldCloseOnEscapePress: true,
@@ -674,4 +675,7 @@ _defineProperty(ShareDialogWithTriggerInternal, "defaultProps", {
   triggerButtonTooltipPosition: 'top',
   dialogZIndex: layers.modal()
 });
+export var ShareDialogWithTriggerInternal = function ShareDialogWithTriggerInternal(props) {
+  return fg('share-compiled-migration') ? jsx(ShareDialogWithTriggerInternalNext, props) : jsx(ShareDialogWithTriggerInternalLegacy, props);
+};
 export var ShareDialogWithTrigger = withAnalyticsEvents()(injectIntl(ShareDialogWithTriggerInternal));

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

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