@atlaskit/link-datasource 3.19.2 → 3.20.1

package/dist/esm/ui/common/modal/popup-select/footer.js

@@ -1,19 +1,18 @@
+/* footer.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./footer.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
-import { Flex, Inline, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Flex, Inline } from '@atlaskit/primitives/compiled';
 import { N40 } from '@atlaskit/theme/colors';
+import PopupFooterOld from './footer-old';
 import { asyncPopupSelectMessages } from './messages';
-var footerContainerStyles = xcss({
-  paddingTop: 'space.050',
-  paddingBottom: 'space.050',
-  borderTop: "".concat("var(--ds-border, ".concat(N40, ")"), " solid 1px")
-});
-var footerPaginationInfoStyles = xcss({
-  color: 'color.text.subtlest',
-  marginBlock: 'space.100',
-  marginInline: 'space.150'
-});
+var styles = {
+  footerContainerStyles: "_ca0q1b66 _n3td1b66 _uwhke4h9 _15a5nqa1 _1i53b5v6",
+  footerPaginationInfoStyles: "_1mouu2gc _195gutpp _syaz131l"
+};
 var PopupFooter = function PopupFooter(_ref) {
   var currentDisplayCount = _ref.currentDisplayCount,
     totalCount = _ref.totalCount,
@@ -23,9 +22,9 @@ var PopupFooter = function PopupFooter(_ref) {
     direction: "row",
     alignItems: "center",
     justifyContent: "end",
-    xcss: footerContainerStyles
+    xcss: styles.footerContainerStyles
   }, /*#__PURE__*/React.createElement(Inline, {
-    xcss: footerPaginationInfoStyles
+    xcss: styles.footerPaginationInfoStyles
   }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, asyncPopupSelectMessages.paginationDetails, {
     values: {
       currentDisplayCount: currentDisplayCount,
@@ -33,4 +32,11 @@ var PopupFooter = function PopupFooter(_ref) {
     }
   }))));
 };
-export default PopupFooter;
+var PopupFooterExported = function PopupFooterExported(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(PopupFooter, props);
+  } else {
+    return /*#__PURE__*/React.createElement(PopupFooterOld, props);
+  }
+};
+export default PopupFooterExported;

package/dist/esm/ui/common/modal/popup-select/formatOptionLabel.compiled.css

@@ -0,0 +1,7 @@
+._18m915vq{overflow-y:hidden}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._1bsbgktf{width:20px}
+._1bto1l2s{text-overflow:ellipsis}
+._1reo15vq{overflow-x:hidden}
+._1ul9gktf{min-width:20px}
+._4t3igktf{height:20px}

package/dist/esm/ui/common/modal/popup-select/formatOptionLabel.js

@@ -1,20 +1,19 @@
+/* formatOptionLabel.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./formatOptionLabel.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import Avatar from '@atlaskit/avatar';
+import { cx } from '@atlaskit/css';
 import PeopleGroupIcon from '@atlaskit/icon/core/migration/people-group';
 import Lozenge from '@atlaskit/lozenge';
-import { Box, Flex, xcss } from '@atlaskit/primitives';
-var commonLabelStyles = xcss({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis'
-});
-var avatarOptionLabelStyles = xcss({
-  marginLeft: 'space.050'
-});
-var groupWrapperStyles = xcss({
-  width: "var(--ds-space-250, 20px)",
-  minWidth: "var(--ds-space-250, 20px)",
-  height: "var(--ds-space-250, 20px)"
-});
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Flex } from '@atlaskit/primitives/compiled';
+import formatOptionLabelOld from './formatOptionLabelOld';
+var styles = {
+  commonLabelStyles: "_1reo15vq _18m915vq _1bto1l2s",
+  avatarOptionLabelStyles: "_18u01b66",
+  groupWrapperStyles: "_1bsbgktf _1ul9gktf _4t3igktf"
+};
 var IconOptionLabel = function IconOptionLabel(_ref) {
   var data = _ref.data;
   var label = data.label,
@@ -38,7 +37,7 @@ var LozengeOptionLabel = function LozengeOptionLabel(_ref2) {
     appearance: data.appearance,
     testId: "basic-filter-popup-select-option--lozenge"
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: [commonLabelStyles]
+    xcss: styles.commonLabelStyles
   }, data.label));
 };
 var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
@@ -50,7 +49,7 @@ var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
   }, data.isGroup ? /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
     justifyContent: "center",
-    xcss: groupWrapperStyles
+    xcss: styles.groupWrapperStyles
   }, /*#__PURE__*/React.createElement(PeopleGroupIcon, {
     color: "currentColor",
     LEGACY_size: "small",
@@ -60,7 +59,7 @@ var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
     src: data.avatar,
     size: "xsmall"
   }), /*#__PURE__*/React.createElement(Box, {
-    xcss: [commonLabelStyles, avatarOptionLabelStyles]
+    xcss: cx(styles.commonLabelStyles, styles.avatarOptionLabelStyles)
   }, data.label));
 };
 var formatOptionLabel = function formatOptionLabel(data) {
@@ -81,4 +80,11 @@ var formatOptionLabel = function formatOptionLabel(data) {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 };
-export default formatOptionLabel;
+var formatOptionLabelExported = function formatOptionLabelExported(data) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return formatOptionLabel(data);
+  } else {
+    return formatOptionLabelOld(data);
+  }
+};
+export default formatOptionLabelExported;

package/dist/esm/ui/common/modal/popup-select/formatOptionLabelOld.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import Avatar from '@atlaskit/avatar';
+import PeopleGroupIcon from '@atlaskit/icon/core/migration/people-group';
+import Lozenge from '@atlaskit/lozenge';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+var commonLabelStyles = xcss({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+});
+var avatarOptionLabelStyles = xcss({
+  marginLeft: 'space.050'
+});
+var groupWrapperStyles = xcss({
+  width: "var(--ds-space-250, 20px)",
+  minWidth: "var(--ds-space-250, 20px)",
+  height: "var(--ds-space-250, 20px)"
+});
+var IconOptionLabel = function IconOptionLabel(_ref) {
+  var data = _ref.data;
+  var label = data.label,
+    avatar = data.icon,
+    value = data.value;
+  var avatarOptionLabelData = {
+    label: label,
+    avatar: avatar,
+    value: value,
+    optionType: 'avatarLabel',
+    isSquare: true
+  };
+  return /*#__PURE__*/React.createElement(AvatarOptionLabel, {
+    data: avatarOptionLabelData,
+    testId: "basic-filter-popup-select-option--icon-label"
+  });
+};
+var LozengeOptionLabel = function LozengeOptionLabel(_ref2) {
+  var data = _ref2.data;
+  return /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: data.appearance,
+    testId: "basic-filter-popup-select-option--lozenge"
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: [commonLabelStyles]
+  }, data.label));
+};
+var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
+  var data = _ref3.data,
+    testId = _ref3.testId;
+  return /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    testId: testId || 'basic-filter-popup-select-option--avatar'
+  }, data.isGroup ? /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center",
+    justifyContent: "center",
+    xcss: groupWrapperStyles
+  }, /*#__PURE__*/React.createElement(PeopleGroupIcon, {
+    color: "currentColor",
+    LEGACY_size: "small",
+    label: ""
+  })) : /*#__PURE__*/React.createElement(Avatar, {
+    appearance: data.isSquare ? 'square' : 'circle',
+    src: data.avatar,
+    size: "xsmall"
+  }), /*#__PURE__*/React.createElement(Box, {
+    xcss: [commonLabelStyles, avatarOptionLabelStyles]
+  }, data.label));
+};
+var formatOptionLabel = function formatOptionLabel(data) {
+  if (data.optionType === 'lozengeLabel') {
+    return /*#__PURE__*/React.createElement(LozengeOptionLabel, {
+      data: data
+    });
+  }
+  if (data.optionType === 'avatarLabel') {
+    return /*#__PURE__*/React.createElement(AvatarOptionLabel, {
+      data: data
+    });
+  }
+  if (data.optionType === 'iconLabel') {
+    return /*#__PURE__*/React.createElement(IconOptionLabel, {
+      data: data
+    });
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null);
+};
+export default formatOptionLabel;

package/dist/esm/ui/common/modal/popup-select/menu-list/index.compiled.css

@@ -0,0 +1,3 @@
+._19bv12x7{padding-left:var(--ds-space-075,6px)}
+._ca0q12x7{padding-top:var(--ds-space-075,6px)}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}

package/dist/esm/ui/common/modal/popup-select/menu-list/index.js

@@ -1,20 +1,22 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children"];
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { Box, Flex, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Flex } from '@atlaskit/primitives/compiled';
 import { components } from '@atlaskit/select';
 import Spinner from '@atlaskit/spinner';
 import CustomErrorMessage from './errorMessage';
 import CustomDropdownLoadingMessage from './loadingMessage';
+import CustomMenuListOld from './menuListOld';
 import CustomNoOptionsMessage from './noOptionsMessage';
 import ShowMoreButton from './showMoreButton';
-var inlineSpinnerStyles = xcss({
-  paddingTop: 'space.075'
-});
-var showMoreButtonBoxStyles = xcss({
-  paddingLeft: 'space.075',
-  paddingTop: 'space.100'
-});
+var styles = {
+  inlineSpinnerStyles: "_ca0q12x7",
+  showMoreButtonBoxStyles: "_19bv12x7 _ca0qu2gc"
+};
 var CustomMenuList = function CustomMenuList(_ref) {
   var children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
@@ -34,7 +36,7 @@ var CustomMenuList = function CustomMenuList(_ref) {
   var InlineSpinner = function InlineSpinner() {
     return /*#__PURE__*/React.createElement(Flex, {
       justifyContent: "center",
-      xcss: inlineSpinnerStyles
+      xcss: styles.inlineSpinnerStyles
     }, /*#__PURE__*/React.createElement(Spinner, {
       size: "medium"
     }));
@@ -57,7 +59,7 @@ var CustomMenuList = function CustomMenuList(_ref) {
       });
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, children, shouldDisplayShowMore && handleShowMore && /*#__PURE__*/React.createElement(Box, {
-      xcss: showMoreButtonBoxStyles
+      xcss: styles.showMoreButtonBoxStyles
     }, /*#__PURE__*/React.createElement(ShowMoreButton, {
       onShowMore: handleShowMore,
       filterName: filterName
@@ -65,4 +67,11 @@ var CustomMenuList = function CustomMenuList(_ref) {
   };
   return /*#__PURE__*/React.createElement(components.MenuList, props, renderChildren());
 };
-export default CustomMenuList;
+export var CustomMenuListExported = function CustomMenuListExported(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(CustomMenuList, props);
+  } else {
+    return /*#__PURE__*/React.createElement(CustomMenuListOld, props);
+  }
+};
+export default CustomMenuListExported;

package/dist/esm/ui/common/modal/popup-select/menu-list/menuListOld.js

@@ -0,0 +1,68 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children"];
+import React from 'react';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+import { components } from '@atlaskit/select';
+import Spinner from '@atlaskit/spinner';
+import CustomErrorMessage from './errorMessage';
+import CustomDropdownLoadingMessage from './loadingMessage';
+import CustomNoOptionsMessage from './noOptionsMessage';
+import ShowMoreButton from './showMoreButton';
+var inlineSpinnerStyles = xcss({
+  paddingTop: 'space.075'
+});
+var showMoreButtonBoxStyles = xcss({
+  paddingLeft: 'space.075',
+  paddingTop: 'space.100'
+});
+var CustomMenuList = function CustomMenuList(_ref) {
+  var children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _props$selectProps$me =
+    // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
+    props.selectProps.menuListProps,
+    filterName = _props$selectProps$me.filterName,
+    isLoading = _props$selectProps$me.isLoading,
+    isLoadingMore = _props$selectProps$me.isLoadingMore,
+    isError = _props$selectProps$me.isError,
+    isEmpty = _props$selectProps$me.isEmpty,
+    errors = _props$selectProps$me.errors,
+    showMore = _props$selectProps$me.showMore,
+    handleShowMore = _props$selectProps$me.handleShowMore;
+  var shouldDisplayShowMore = showMore && !isLoadingMore;
+  var isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
+  var InlineSpinner = function InlineSpinner() {
+    return /*#__PURE__*/React.createElement(Flex, {
+      justifyContent: "center",
+      xcss: inlineSpinnerStyles
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: "medium"
+    }));
+  };
+  var renderChildren = function renderChildren() {
+    if (isLoading) {
+      return /*#__PURE__*/React.createElement(CustomDropdownLoadingMessage, {
+        filterName: filterName
+      });
+    }
+    if (isError) {
+      return /*#__PURE__*/React.createElement(CustomErrorMessage, {
+        filterName: filterName,
+        errors: errors
+      });
+    }
+    if (isEmpty) {
+      return /*#__PURE__*/React.createElement(CustomNoOptionsMessage, {
+        filterName: filterName
+      });
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children, shouldDisplayShowMore && handleShowMore && /*#__PURE__*/React.createElement(Box, {
+      xcss: showMoreButtonBoxStyles
+    }, /*#__PURE__*/React.createElement(ShowMoreButton, {
+      onShowMore: handleShowMore,
+      filterName: filterName
+    })), isLoadingMoreData && /*#__PURE__*/React.createElement(InlineSpinner, null));
+  };
+  return /*#__PURE__*/React.createElement(components.MenuList, props, renderChildren());
+};
+export default CustomMenuList;

package/dist/esm/ui/common/modal/popup-select/menu-list/selectMessage.compiled.css

@@ -0,0 +1,6 @@
+._19bvutpp{padding-left:var(--ds-space-150,9pt)}
+._4t3ivbgk{height:4pc}
+._ca0qu2gc{padding-top:var(--ds-space-100,8px)}
+._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
+._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
+._u5f3utpp{padding-right:var(--ds-space-150,9pt)}

package/dist/esm/ui/common/modal/popup-select/menu-list/selectMessage.js

@@ -1,31 +1,37 @@
+/* selectMessage.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./selectMessage.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage } from 'react-intl-next';
 import Heading from '@atlaskit/heading';
-import { Flex, Stack, xcss } from '@atlaskit/primitives';
-var boxStyles = xcss({
-  height: "var(--ds-space-800, 64px)",
-  marginBottom: 'space.200'
-});
-var stackStyles = xcss({
-  paddingTop: 'space.100',
-  paddingBottom: 'space.100',
-  paddingLeft: 'space.150',
-  paddingRight: 'space.150'
-});
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Flex, Stack } from '@atlaskit/primitives/compiled';
+import CustomSelectMessageOld from './selectMessageOld';
+var styles = {
+  boxStyles: "_4t3ivbgk _otyrpxbi",
+  stackStyles: "_ca0qu2gc _n3tdu2gc _19bvutpp _u5f3utpp"
+};
 var CustomSelectMessage = function CustomSelectMessage(_ref) {
   var icon = _ref.icon,
     message = _ref.message,
     testId = _ref.testId;
   return /*#__PURE__*/React.createElement(Stack, {
-    xcss: stackStyles,
+    xcss: styles.stackStyles,
     testId: testId,
     alignInline: "center"
   }, /*#__PURE__*/React.createElement(Flex, {
-    xcss: boxStyles,
+    xcss: styles.boxStyles,
     alignItems: "center",
     justifyContent: "center"
   }, icon), /*#__PURE__*/React.createElement(Heading, {
     size: "xsmall"
   }, /*#__PURE__*/React.createElement(FormattedMessage, message)));
 };
-export default CustomSelectMessage;
+export var CustomSelectMessageExported = function CustomSelectMessageExported(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(CustomSelectMessage, props);
+  } else {
+    return /*#__PURE__*/React.createElement(CustomSelectMessageOld, props);
+  }
+};
+export default CustomSelectMessageExported;

package/dist/esm/ui/common/modal/popup-select/menu-list/selectMessageOld.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import Heading from '@atlaskit/heading';
+import { Flex, Stack, xcss } from '@atlaskit/primitives';
+var boxStyles = xcss({
+  height: "var(--ds-space-800, 64px)",
+  marginBottom: 'space.200'
+});
+var stackStyles = xcss({
+  paddingTop: 'space.100',
+  paddingBottom: 'space.100',
+  paddingLeft: 'space.150',
+  paddingRight: 'space.150'
+});
+var CustomSelectMessage = function CustomSelectMessage(_ref) {
+  var icon = _ref.icon,
+    message = _ref.message,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement(Stack, {
+    xcss: stackStyles,
+    testId: testId,
+    alignInline: "center"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    xcss: boxStyles,
+    alignItems: "center",
+    justifyContent: "center"
+  }, icon), /*#__PURE__*/React.createElement(Heading, {
+    size: "xsmall"
+  }, /*#__PURE__*/React.createElement(FormattedMessage, message)));
+};
+export default CustomSelectMessage;

package/dist/esm/ui/common/modal/popup-select/trigger-old.js

@@ -0,0 +1,89 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { forwardRef, useCallback } from 'react';
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import styled from '@emotion/styled';
+import Badge from '@atlaskit/badge';
+import Button from '@atlaskit/button/standard-button';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { Box, Flex, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
+var triggerButtonLabelStyles = xcss({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden'
+});
+var badgeStyles = xcss({
+  marginLeft: 'space.050'
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var LoadingStateAnimationWrapper = styled.div({
+  position: 'relative',
+  animation: 'flickerAnimation 2s infinite',
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  '@keyframes flickerAnimation': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '0%': {
+      opacity: 1
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '50%': {
+      opacity: 0.5
+    },
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
+    '100%': {
+      opacity: 1
+    }
+  }
+});
+var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var isSelected = _ref.isSelected,
+    isDisabled = _ref.isDisabled,
+    isLoading = _ref.isLoading,
+    selectedOptions = _ref.selectedOptions,
+    testId = _ref.testId,
+    label = _ref.label;
+  var _ref2 = selectedOptions || [],
+    _ref3 = _slicedToArray(_ref2, 1),
+    firstOption = _ref3[0];
+  var hasOptions = selectedOptions && selectedOptions.length > 0;
+  var showButtonLoading = !isDisabled && isLoading;
+  var triggerButtonTestId = "".concat(testId, "-trigger");
+  var LoadingButton = useCallback(function () {
+    return /*#__PURE__*/React.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/React.createElement(Button, {
+      iconAfter: /*#__PURE__*/React.createElement(Spinner, {
+        size: 'xsmall'
+      }),
+      testId: "".concat(triggerButtonTestId, "--loading-button")
+    }, label));
+  }, [label, triggerButtonTestId]);
+  var DefaultButton = useCallback(function () {
+    return /*#__PURE__*/React.createElement(Button, {
+      appearance: "default",
+      isSelected: isSelected || hasOptions,
+      isDisabled: isDisabled,
+      iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+        label: "",
+        color: "currentColor"
+      }),
+      testId: "".concat(triggerButtonTestId, "--button")
+    }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
+      xcss: triggerButtonLabelStyles
+    }, label, firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
+      xcss: badgeStyles,
+      alignItems: "center"
+    }, /*#__PURE__*/React.createElement(Badge, {
+      appearance: "primary"
+    }, "+", selectedOptions.length - 1))));
+  }, [firstOption, hasOptions, isDisabled, isSelected, label, selectedOptions, triggerButtonTestId]);
+
+  /**
+   * We had an issue with the popup component referencing a stale DOM ref for the trigger button.
+   * Hence introducing a Box to make sure ref is always the same and only content is refreshed on re-renders
+   */
+  return /*#__PURE__*/React.createElement(Box, {
+    ref: ref,
+    testId: triggerButtonTestId
+  }, showButtonLoading ? /*#__PURE__*/React.createElement(LoadingButton, null) : /*#__PURE__*/React.createElement(DefaultButton, null));
+});
+export default PopupTrigger;

package/dist/esm/ui/common/modal/popup-select/trigger.compiled.css

@@ -0,0 +1,7 @@
+
+._y44vkmg5{animation:flickerAnimation 2s infinite}._18m915vq{overflow-y:hidden}
+._18u01b66{margin-left:var(--ds-space-050,4px)}
+._1bto1l2s{text-overflow:ellipsis}
+._1reo15vq{overflow-x:hidden}
+._kqswh2mm{position:relative}
+@keyframes flickerAnimation{0%{opacity:1}50%{opacity:.5}to{opacity:1}}

package/dist/esm/ui/common/modal/popup-select/trigger.js

@@ -1,51 +1,48 @@
+/* trigger.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["as", "style"];
+import "./trigger.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { forwardRef, useCallback } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import styled from '@emotion/styled';
 import Badge from '@atlaskit/badge';
 import Button from '@atlaskit/button/standard-button';
 import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
-import { Box, Flex, xcss } from '@atlaskit/primitives';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Flex } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
-var triggerButtonLabelStyles = xcss({
-  textOverflow: 'ellipsis',
-  overflow: 'hidden'
-});
-var badgeStyles = xcss({
-  marginLeft: 'space.050'
-});
+import PopupTriggerOld from './trigger-old';
+var styles = {
+  triggerButtonLabelStyles: "_1reo15vq _18m915vq _1bto1l2s",
+  badgeStyles: "_18u01b66"
+};
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var LoadingStateAnimationWrapper = styled.div({
-  position: 'relative',
-  animation: 'flickerAnimation 2s infinite',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '@keyframes flickerAnimation': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '0%': {
-      opacity: 1
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '50%': {
-      opacity: 0.5
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '100%': {
-      opacity: 1
-    }
-  }
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-styled
+var LoadingStateAnimationWrapper = /*#__PURE__*/forwardRef(function (_ref, __cmplr) {
+  var _ref$as = _ref.as,
+    C = _ref$as === void 0 ? "div" : _ref$as,
+    __cmpls = _ref.style,
+    __cmplp = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_y44vkmg5 _kqswh2mm", __cmplp.className])
+  }));
 });
-var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var isSelected = _ref.isSelected,
-    isDisabled = _ref.isDisabled,
-    isLoading = _ref.isLoading,
-    selectedOptions = _ref.selectedOptions,
-    testId = _ref.testId,
-    label = _ref.label;
-  var _ref2 = selectedOptions || [],
-    _ref3 = _slicedToArray(_ref2, 1),
-    firstOption = _ref3[0];
+if (process.env.NODE_ENV !== 'production') {
+  LoadingStateAnimationWrapper.displayName = 'LoadingStateAnimationWrapper';
+}
+var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var isSelected = _ref2.isSelected,
+    isDisabled = _ref2.isDisabled,
+    isLoading = _ref2.isLoading,
+    selectedOptions = _ref2.selectedOptions,
+    testId = _ref2.testId,
+    label = _ref2.label;
+  var _ref3 = selectedOptions || [],
+    _ref4 = _slicedToArray(_ref3, 1),
+    firstOption = _ref4[0];
   var hasOptions = selectedOptions && selectedOptions.length > 0;
   var showButtonLoading = !isDisabled && isLoading;
   var triggerButtonTestId = "".concat(testId, "-trigger");
@@ -68,9 +65,9 @@ var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }),
       testId: "".concat(triggerButtonTestId, "--button")
     }, /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(Box, {
-      xcss: triggerButtonLabelStyles
+      xcss: styles.triggerButtonLabelStyles
     }, label, firstOption && /*#__PURE__*/React.createElement(React.Fragment, null, ": ", firstOption.label)), selectedOptions && selectedOptions.length > 1 && /*#__PURE__*/React.createElement(Flex, {
-      xcss: badgeStyles,
+      xcss: styles.badgeStyles,
       alignItems: "center"
     }, /*#__PURE__*/React.createElement(Badge, {
       appearance: "primary"
@@ -86,4 +83,15 @@ var PopupTrigger = /*#__PURE__*/forwardRef(function (_ref, ref) {
     testId: triggerButtonTestId
   }, showButtonLoading ? /*#__PURE__*/React.createElement(LoadingButton, null) : /*#__PURE__*/React.createElement(DefaultButton, null));
 });
-export default PopupTrigger;
+var PopupTriggerExported = /*#__PURE__*/forwardRef(function (props, ref) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(PopupTrigger, _extends({}, props, {
+      ref: ref
+    }));
+  } else {
+    return /*#__PURE__*/React.createElement(PopupTriggerOld, _extends({}, props, {
+      ref: ref
+    }));
+  }
+});
+export default PopupTriggerExported;