@atlaskit/link-datasource 3.19.1 → 3.20.0

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

@@ -0,0 +1,89 @@
+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';
+const commonLabelStyles = xcss({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+});
+const avatarOptionLabelStyles = xcss({
+  marginLeft: 'space.050'
+});
+const groupWrapperStyles = xcss({
+  width: "var(--ds-space-250, 20px)",
+  minWidth: "var(--ds-space-250, 20px)",
+  height: "var(--ds-space-250, 20px)"
+});
+const IconOptionLabel = ({
+  data
+}) => {
+  const {
+    label,
+    icon: avatar,
+    value
+  } = data;
+  const avatarOptionLabelData = {
+    label,
+    avatar,
+    value,
+    optionType: 'avatarLabel',
+    isSquare: true
+  };
+  return /*#__PURE__*/React.createElement(AvatarOptionLabel, {
+    data: avatarOptionLabelData,
+    testId: "basic-filter-popup-select-option--icon-label"
+  });
+};
+const LozengeOptionLabel = ({
+  data
+}) => {
+  return /*#__PURE__*/React.createElement(Lozenge, {
+    appearance: data.appearance,
+    testId: "basic-filter-popup-select-option--lozenge"
+  }, /*#__PURE__*/React.createElement(Box, {
+    xcss: [commonLabelStyles]
+  }, data.label));
+};
+const AvatarOptionLabel = ({
+  data,
+  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));
+};
+const 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/es2019/ui/common/modal/popup-select/menu-list/errorMessage.js

@@ -1,8 +1,11 @@
 import React, { useEffect } from 'react';
+import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N500 } from '@atlaskit/theme/colors';
 import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
+import { SpotError } from '../../../../../common/ui/spot/error-state/error';
 import { SEARCH_DEBOUNCE_MS } from '../constants';
 import { asyncPopupSelectMessages } from './messages';
 import CustomSelectMessage from './selectMessage';
@@ -16,6 +19,7 @@ const getErrorReasonType = errors => {
   }
   return 'unknown';
 };
+const noop = () => '';
 const CustomErrorMessage = ({
   filterName,
   errors
@@ -35,14 +39,22 @@ const CustomErrorMessage = ({
     });
   }, SEARCH_DEBOUNCE_MS);
   useEffect(debouncedAnalyticsCallback, [debouncedAnalyticsCallback]);
-  return /*#__PURE__*/React.createElement(CustomSelectMessage
-  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19579
-  , {
-    icon: /*#__PURE__*/React.createElement(ErrorIcon, {
+  const {
+    formatMessage
+  } = fg('bandicoots-update-sllv-icons') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIntl() : {
+    formatMessage: noop
+  };
+  return /*#__PURE__*/React.createElement(CustomSelectMessage, {
+    icon: fg('bandicoots-update-sllv-icons') ? /*#__PURE__*/React.createElement(SpotError, {
+      size: 'medium',
+      alt: formatMessage(asyncPopupSelectMessages.errorMessage)
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ErrorIcon, {
       primaryColor: `var(--ds-icon, ${N500})`,
       label: "",
       size: "xlarge"
-    }),
+    })),
     message: asyncPopupSelectMessages.errorMessage,
     testId: `${filterName}--error-message`
   });

package/dist/es2019/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/es2019/ui/common/modal/popup-select/menu-list/index.js

@@ -1,18 +1,20 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
+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';
-const inlineSpinnerStyles = xcss({
-  paddingTop: 'space.075'
-});
-const showMoreButtonBoxStyles = xcss({
-  paddingLeft: 'space.075',
-  paddingTop: 'space.100'
-});
+const styles = {
+  inlineSpinnerStyles: "_ca0q12x7",
+  showMoreButtonBoxStyles: "_19bv12x7 _ca0qu2gc"
+};
 const CustomMenuList = ({
   children,
   ...props
@@ -33,7 +35,7 @@ const CustomMenuList = ({
   const isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
   const InlineSpinner = () => /*#__PURE__*/React.createElement(Flex, {
     justifyContent: "center",
-    xcss: inlineSpinnerStyles
+    xcss: styles.inlineSpinnerStyles
   }, /*#__PURE__*/React.createElement(Spinner, {
     size: "medium"
   }));
@@ -55,7 +57,7 @@ const CustomMenuList = ({
       });
     }
     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
@@ -63,4 +65,11 @@ const CustomMenuList = ({
   };
   return /*#__PURE__*/React.createElement(components.MenuList, props, renderChildren());
 };
-export default CustomMenuList;
+export const 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/es2019/ui/common/modal/popup-select/menu-list/menuListOld.js

@@ -0,0 +1,66 @@
+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';
+const inlineSpinnerStyles = xcss({
+  paddingTop: 'space.075'
+});
+const showMoreButtonBoxStyles = xcss({
+  paddingLeft: 'space.075',
+  paddingTop: 'space.100'
+});
+const CustomMenuList = ({
+  children,
+  ...props
+}) => {
+  const {
+    filterName,
+    isLoading,
+    isLoadingMore,
+    isError,
+    isEmpty,
+    errors,
+    showMore,
+    handleShowMore
+  } =
+  // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
+  props.selectProps.menuListProps;
+  const shouldDisplayShowMore = showMore && !isLoadingMore;
+  const isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
+  const InlineSpinner = () => /*#__PURE__*/React.createElement(Flex, {
+    justifyContent: "center",
+    xcss: inlineSpinnerStyles
+  }, /*#__PURE__*/React.createElement(Spinner, {
+    size: "medium"
+  }));
+  const 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/es2019/ui/common/modal/popup-select/menu-list/noOptionsMessage.js

@@ -1,11 +1,15 @@
 import React, { useEffect } from 'react';
+import { useIntl } from 'react-intl-next';
 import { useDebouncedCallback } from 'use-debounce';
 import QuestionCircleIcon from '@atlaskit/icon/glyph/question-circle';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N500 } from '@atlaskit/theme/colors';
 import { useDatasourceAnalyticsEvents } from '../../../../../analytics';
+import { SpotSearchNoResult } from '../../../../../common/ui/spot/error-state/search-no-result';
 import { SEARCH_DEBOUNCE_MS } from '../constants';
 import { asyncPopupSelectMessages } from './messages';
 import CustomSelectMessage from './selectMessage';
+const noop = () => '';
 const CustomNoOptionsMessage = ({
   filterName
 }) => {
@@ -25,14 +29,22 @@ const CustomNoOptionsMessage = ({
     });
   }, SEARCH_DEBOUNCE_MS);
   useEffect(debouncedAnalyticsCallback, [debouncedAnalyticsCallback]);
-  return /*#__PURE__*/React.createElement(CustomSelectMessage
-  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons -- TODO - https://product-fabric.atlassian.net/browse/DSP-19578
-  , {
-    icon: /*#__PURE__*/React.createElement(QuestionCircleIcon, {
+  const {
+    formatMessage
+  } = fg('bandicoots-update-sllv-icons') ?
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  useIntl() : {
+    formatMessage: noop
+  };
+  return /*#__PURE__*/React.createElement(CustomSelectMessage, {
+    icon: fg('bandicoots-update-sllv-icons') ? /*#__PURE__*/React.createElement(SpotSearchNoResult, {
+      size: 'medium',
+      alt: formatMessage(asyncPopupSelectMessages.noOptionsMessage)
+    }) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(QuestionCircleIcon, {
       primaryColor: `var(--ds-icon, ${N500})`,
       size: "xlarge",
       label: ""
-    }),
+    })),
     message: asyncPopupSelectMessages.noOptionsMessage,
     testId: `${filterName}--no-options-message`
   });

package/dist/es2019/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/es2019/ui/common/modal/popup-select/menu-list/selectMessage.js

@@ -1,32 +1,38 @@
+/* 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';
-const boxStyles = xcss({
-  height: "var(--ds-space-800, 64px)",
-  marginBottom: 'space.200'
-});
-const 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';
+const styles = {
+  boxStyles: "_4t3ivbgk _otyrpxbi",
+  stackStyles: "_ca0qu2gc _n3tdu2gc _19bvutpp _u5f3utpp"
+};
 const CustomSelectMessage = ({
   icon,
   message,
   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 const 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/es2019/ui/common/modal/popup-select/menu-list/selectMessageOld.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import Heading from '@atlaskit/heading';
+import { Flex, Stack, xcss } from '@atlaskit/primitives';
+const boxStyles = xcss({
+  height: "var(--ds-space-800, 64px)",
+  marginBottom: 'space.200'
+});
+const stackStyles = xcss({
+  paddingTop: 'space.100',
+  paddingBottom: 'space.100',
+  paddingLeft: 'space.150',
+  paddingRight: 'space.150'
+});
+const CustomSelectMessage = ({
+  icon,
+  message,
+  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/es2019/ui/common/modal/popup-select/trigger-old.js

@@ -0,0 +1,83 @@
+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';
+const triggerButtonLabelStyles = xcss({
+  textOverflow: 'ellipsis',
+  overflow: 'hidden'
+});
+const 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 const 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
+    }
+  }
+});
+const PopupTrigger = /*#__PURE__*/forwardRef(({
+  isSelected,
+  isDisabled,
+  isLoading,
+  selectedOptions,
+  testId,
+  label
+}, ref) => {
+  const [firstOption] = selectedOptions || [];
+  const hasOptions = selectedOptions && selectedOptions.length > 0;
+  const showButtonLoading = !isDisabled && isLoading;
+  const triggerButtonTestId = `${testId}-trigger`;
+  const LoadingButton = useCallback(() => /*#__PURE__*/React.createElement(LoadingStateAnimationWrapper, null, /*#__PURE__*/React.createElement(Button, {
+    iconAfter: /*#__PURE__*/React.createElement(Spinner, {
+      size: 'xsmall'
+    }),
+    testId: `${triggerButtonTestId}--loading-button`
+  }, label)), [label, triggerButtonTestId]);
+  const DefaultButton = useCallback(() => /*#__PURE__*/React.createElement(Button, {
+    appearance: "default",
+    isSelected: isSelected || hasOptions,
+    isDisabled: isDisabled,
+    iconAfter: /*#__PURE__*/React.createElement(ChevronDownIcon, {
+      label: "",
+      color: "currentColor"
+    }),
+    testId: `${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/es2019/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/es2019/ui/common/modal/popup-select/trigger.js

@@ -1,40 +1,35 @@
+/* trigger.tsx generated by @compiled/babel-plugin v0.36.0 */
+import _extends from "@babel/runtime/helpers/extends";
+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';
-const triggerButtonLabelStyles = xcss({
-  textOverflow: 'ellipsis',
-  overflow: 'hidden'
-});
-const badgeStyles = xcss({
-  marginLeft: 'space.050'
-});
+import PopupTriggerOld from './trigger-old';
+const 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 const 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
+const LoadingStateAnimationWrapper = /*#__PURE__*/forwardRef(({
+  as: C = "div",
+  style: __cmpls,
+  ...__cmplp
+}, __cmplr) => {
+  return /*#__PURE__*/React.createElement(C, _extends({}, __cmplp, {
+    style: __cmpls,
+    ref: __cmplr,
+    className: ax(["_y44vkmg5 _kqswh2mm", __cmplp.className])
+  }));
 });
+if (process.env.NODE_ENV !== 'production') {
+  LoadingStateAnimationWrapper.displayName = 'LoadingStateAnimationWrapper';
+}
 const PopupTrigger = /*#__PURE__*/forwardRef(({
   isSelected,
   isDisabled,
@@ -63,9 +58,9 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
     }),
     testId: `${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"
@@ -80,4 +75,15 @@ const PopupTrigger = /*#__PURE__*/forwardRef(({
     testId: triggerButtonTestId
   }, showButtonLoading ? /*#__PURE__*/React.createElement(LoadingButton, null) : /*#__PURE__*/React.createElement(DefaultButton, null));
 });
-export default PopupTrigger;
+const PopupTriggerExported = /*#__PURE__*/forwardRef((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;

package/dist/es2019/ui/common/modal/search-count/index.compiled.css

@@ -0,0 +1,3 @@
+._16jlkb7n{flex-grow:1}
+._1o9zkb7n{flex-shrink:1}
+._i0dlf1ug{flex-basis:0%}

package/dist/es2019/ui/common/modal/search-count/index.js

@@ -1,23 +1,27 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import { FormattedMessage, FormattedNumber } from 'react-intl-next';
 import Heading from '@atlaskit/heading';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Flex, xcss } from '@atlaskit/primitives';
+import { Flex } from '@atlaskit/primitives/compiled';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { N800 } from '@atlaskit/theme/colors';
 import { footerMessages } from '../../../table-footer/messages';
 import { searchCountMessages } from './messages';
-const searchCountStyles = xcss({
-  flex: 1
-});
+import TableSearchCountOld, { AssetsItemCountOld } from './search-count-old';
+const styles = {
+  searchCountStyles: "_16jlkb7n _1o9zkb7n _i0dlf1ug"
+};
 const ItemCountWrapper = ({
   url,
   children,
   testId
 }) => /*#__PURE__*/React.createElement(Flex, {
   testId: testId,
-  xcss: searchCountStyles,
+  xcss: styles.searchCountStyles,
   alignItems: "center"
 }, /*#__PURE__*/React.createElement(LinkUrl, {
   href: url,
@@ -32,7 +36,7 @@ const ItemCountWrapper = ({
 }, /*#__PURE__*/React.createElement(Heading, {
   size: "xxsmall"
 }, children)));
-export const AssetsItemCount = ({
+export const AssetsItemCountNew = ({
   searchCount,
   url,
   testId
@@ -51,6 +55,13 @@ export const AssetsItemCount = ({
     }
   })));
 };
+export const AssetsItemCount = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(AssetsItemCountNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(AssetsItemCountOld, props);
+  }
+};
 const TableSearchCount = ({
   url,
   searchCount,
@@ -68,4 +79,11 @@ const TableSearchCount = ({
     }
   })));
 };
-export default TableSearchCount;
+export const TableSearchCountExported = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(TableSearchCount, props);
+  } else {
+    return /*#__PURE__*/React.createElement(TableSearchCountOld, props);
+  }
+};
+export default TableSearchCountExported;