@atlaskit/link-datasource 3.19.2 → 3.20.0

package/dist/esm/ui/common/modal/mode-switcher/index.js

@@ -1,76 +1,25 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./index.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 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 { fg } from "@atlaskit/platform-feature-flags";
 import { N0, N20, N30A, N60, N700 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 import { DatasourceAction } from '../../../../analytics/types';
 import { useUserInteractions } from '../../../../contexts/user-interactions';
 import { DisplayViewDropDown } from '../display-view-dropdown/display-view-drop-down';
+import { ModeSwitcherOld } from './modeSwitcherOld';
 import { useViewModeContext } from './useViewModeContext';
-var modeSwitcherStyles = css({
-  alignItems: 'center',
-  background: "var(--ds-background-neutral, ".concat(N20, ")"),
-  borderRadius: "var(--ds-space-050, 4px)",
-  boxSizing: 'border-box',
-  display: 'inline-flex',
-  gap: "var(--ds-space-050, 4px)",
-  padding: "var(--ds-space-050, 4px)",
-  '&:disabled': {
-    opacity: '0.5'
-  },
-  marginLeft: "var(--ds-space-250, 20px)"
-});
-var compactModeSwitcherStyles = css({
-  padding: "var(--ds-space-050, 4px)",
-  gap: "var(--ds-space-025, 2px)"
-});
-var modeInputStyles = css({
-  display: 'none'
-});
-var modeSwitcherLabelStyles = css({
-  color: "var(--ds-text-subtlest, ".concat(N700, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-semibold, 600)",
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  textTransform: 'uppercase',
-  padding: "var(--ds-space-050, 4px)",
-  borderRadius: "var(--ds-space-050, 4px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':hover': {
-    cursor: 'pointer',
-    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
-  }
-});
-var modeSwitcherLabelSelectedStyles = css({
-  backgroundColor: "var(--ds-background-input-pressed, ".concat(N0, ")"),
-  borderRadius: "var(--ds-space-050, 4px)",
-  boxShadow: "var(--ds-shadow-overflow, 0px 0px 1px rgba(9, 30, 66, 0.12), 0px 0px 8px rgba(9, 30, 66, 0.16))",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':hover': {
-    cursor: 'pointer',
-    backgroundColor: "var(--ds-background-input-pressed, ".concat(N0, ")")
-  }
-});
-var modeSwitcherLabelDisabledStyles = css({
-  color: "var(--ds-text-disabled, ".concat(N60, ")")
-});
-var modeSwitcherDisabledStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':hover': {
-    cursor: 'not-allowed',
-    background: 'transparent'
-  }
-});
-var compactModeSwitcherLabelStyles = css({
-  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
-});
-export var ModeSwitcher = function ModeSwitcher(props) {
+var modeSwitcherStyles = null;
+var compactModeSwitcherStyles = null;
+var modeInputStyles = null;
+var modeSwitcherLabelStyles = null;
+var modeSwitcherLabelSelectedStyles = null;
+var modeSwitcherLabelDisabledStyles = null;
+var modeSwitcherDisabledStyles = null;
+var compactModeSwitcherLabelStyles = null;
+var ModeSwitcherNew = function ModeSwitcherNew(props) {
   var _options$;
   var isCompact = props.isCompact,
     isDisabled = props.isDisabled,
@@ -81,37 +30,53 @@ export var ModeSwitcher = function ModeSwitcher(props) {
   var handleModeChange = function handleModeChange(event) {
     onOptionValueChange(event.currentTarget.value);
   };
-  return options.length > 0 ? jsx("fieldset", {
-    css: [modeSwitcherStyles, isCompact && compactModeSwitcherStyles],
+  return options.length > 0 ? /*#__PURE__*/React.createElement("fieldset", {
     "data-testid": "mode-toggle-container",
-    disabled: isDisabled
+    disabled: isDisabled,
+    className: ax(["_2rko1b66 _zulp1b66 _4cvr1h6o _bfhklslw _vchhusvi _1e0c116y _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _18u0v47k _1j55105o", isCompact && "_zulpv77o _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"]),
+    style: {
+      "--_1jkcdu5": ix("var(--ds-background-neutral, ".concat(N20, ")"))
+    }
   }, options.map(function (_ref) {
     var value = _ref.value,
       label = _ref.label,
       isOptionDisabled = _ref.disabled,
       tooltipText = _ref.tooltipText;
     var isSelected = value === selectedOptionValue;
-    return jsx(Tooltip, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
       key: value,
       content: tooltipText
     }, function (tooltipProps) {
-      return jsx("label", _extends({}, tooltipProps, {
+      return /*#__PURE__*/React.createElement("label", _extends({}, tooltipProps, {
         key: value,
-        css: [modeSwitcherLabelStyles, isCompact && compactModeSwitcherLabelStyles, isSelected && modeSwitcherLabelSelectedStyles, isDisabled && modeSwitcherDisabledStyles, isOptionDisabled && [modeSwitcherLabelDisabledStyles, modeSwitcherDisabledStyles]],
-        "data-testid": "mode-toggle-".concat(value)
-      }), label, jsx("input", {
+        "data-testid": "mode-toggle-".concat(value),
+        className: ax(["_11c8qk37 _2rko1b66 _syaziwyp _k48p1pd9 _1p1dangw _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _d0altlke _irr3u7au", isCompact && "_ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66", isSelected && "_2rko1b66 _bfhkkwt5 _16qs1jze _d0altlke _irr3kwt5", isDisabled && "_irr318uv _d0al13gf", isOptionDisabled && "_syaz111d", isOptionDisabled && "_irr318uv _d0al13gf"]),
+        style: {
+          "--_k4gmmg": ix("var(--ds-text-subtlest, ".concat(N700, ")")),
+          "--_15egq0b": ix("var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")),
+          "--_t0vtv2": ix("var(--ds-background-input-pressed, ".concat(N0, ")")),
+          "--_uz32ib": ix("var(--ds-text-disabled, ".concat(N60, ")"))
+        }
+      }), label, /*#__PURE__*/React.createElement("input", {
         "aria-checked": isSelected,
         "aria-disabled": isOptionDisabled,
         checked: isSelected,
-        css: modeInputStyles,
         disabled: isOptionDisabled,
         onChange: handleModeChange,
         type: "radio",
-        value: value
+        value: value,
+        className: ax(["_1e0cglyw"])
       }));
     });
   })) : null;
 };
+export var ModeSwitcher = function ModeSwitcher(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(ModeSwitcherNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ModeSwitcherOld, props);
+  }
+};
 export var DatasourceViewModeDropDown = function DatasourceViewModeDropDown() {
   var userInteractions = useUserInteractions();
   var _useViewModeContext = useViewModeContext(),
@@ -125,7 +90,7 @@ export var DatasourceViewModeDropDown = function DatasourceViewModeDropDown() {
     userInteractions.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
     setCurrentViewMode(selectedMode);
   };
-  return jsx(DisplayViewDropDown, {
+  return /*#__PURE__*/React.createElement(DisplayViewDropDown, {
     onViewModeChange: handleViewModeChange,
     viewMode: currentViewMode
   });

package/dist/esm/ui/common/modal/mode-switcher/modeSwitcherOld.js

@@ -0,0 +1,132 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+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 { N0, N20, N30A, N60, N700 } from '@atlaskit/theme/colors';
+import Tooltip from '@atlaskit/tooltip';
+import { DatasourceAction } from '../../../../analytics/types';
+import { useUserInteractions } from '../../../../contexts/user-interactions';
+import { DisplayViewDropDown } from '../display-view-dropdown/display-view-drop-down';
+import { useViewModeContext } from './useViewModeContext';
+var modeSwitcherStyles = css({
+  alignItems: 'center',
+  background: "var(--ds-background-neutral, ".concat(N20, ")"),
+  borderRadius: "var(--ds-space-050, 4px)",
+  boxSizing: 'border-box',
+  display: 'inline-flex',
+  gap: "var(--ds-space-050, 4px)",
+  padding: "var(--ds-space-050, 4px)",
+  '&:disabled': {
+    opacity: '0.5'
+  },
+  marginLeft: "var(--ds-space-250, 20px)"
+});
+var compactModeSwitcherStyles = css({
+  padding: "var(--ds-space-050, 4px)",
+  gap: "var(--ds-space-025, 2px)"
+});
+var modeInputStyles = css({
+  display: 'none'
+});
+var modeSwitcherLabelStyles = css({
+  color: "var(--ds-text-subtlest, ".concat(N700, ")"),
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  fontWeight: "var(--ds-font-weight-semibold, 600)",
+  textTransform: 'uppercase',
+  padding: "var(--ds-space-050, 4px)",
+  borderRadius: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  ':hover': {
+    cursor: 'pointer',
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, ".concat(N30A, ")")
+  }
+});
+var modeSwitcherLabelSelectedStyles = css({
+  backgroundColor: "var(--ds-background-input-pressed, ".concat(N0, ")"),
+  borderRadius: "var(--ds-space-050, 4px)",
+  boxShadow: "var(--ds-shadow-overflow, 0px 0px 1px rgba(9, 30, 66, 0.12), 0px 0px 8px rgba(9, 30, 66, 0.16))",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  ':hover': {
+    cursor: 'pointer',
+    backgroundColor: "var(--ds-background-input-pressed, ".concat(N0, ")")
+  }
+});
+var modeSwitcherLabelDisabledStyles = css({
+  color: "var(--ds-text-disabled, ".concat(N60, ")")
+});
+var modeSwitcherDisabledStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  ':hover': {
+    cursor: 'not-allowed',
+    background: 'transparent'
+  }
+});
+var compactModeSwitcherLabelStyles = css({
+  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
+});
+export var ModeSwitcherOld = function ModeSwitcherOld(props) {
+  var _options$;
+  var isCompact = props.isCompact,
+    isDisabled = props.isDisabled,
+    onOptionValueChange = props.onOptionValueChange,
+    options = props.options,
+    _props$selectedOption = props.selectedOptionValue,
+    selectedOptionValue = _props$selectedOption === void 0 ? (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value : _props$selectedOption;
+  var handleModeChange = function handleModeChange(event) {
+    onOptionValueChange(event.currentTarget.value);
+  };
+  return options.length > 0 ? jsx("fieldset", {
+    css: [modeSwitcherStyles, isCompact && compactModeSwitcherStyles],
+    "data-testid": "mode-toggle-container",
+    disabled: isDisabled
+  }, options.map(function (_ref) {
+    var value = _ref.value,
+      label = _ref.label,
+      isOptionDisabled = _ref.disabled,
+      tooltipText = _ref.tooltipText;
+    var isSelected = value === selectedOptionValue;
+    return jsx(Tooltip, {
+      key: value,
+      content: tooltipText
+    }, function (tooltipProps) {
+      return jsx("label", _extends({}, tooltipProps, {
+        key: value,
+        css: [modeSwitcherLabelStyles, isCompact && compactModeSwitcherLabelStyles, isSelected && modeSwitcherLabelSelectedStyles, isDisabled && modeSwitcherDisabledStyles, isOptionDisabled && [modeSwitcherLabelDisabledStyles, modeSwitcherDisabledStyles]],
+        "data-testid": "mode-toggle-".concat(value)
+      }), label, jsx("input", {
+        "aria-checked": isSelected,
+        "aria-disabled": isOptionDisabled,
+        checked: isSelected,
+        css: modeInputStyles,
+        disabled: isOptionDisabled,
+        onChange: handleModeChange,
+        type: "radio",
+        value: value
+      }));
+    });
+  })) : null;
+};
+export var DatasourceViewModeDropDown = function DatasourceViewModeDropDown() {
+  var userInteractions = useUserInteractions();
+  var _useViewModeContext = useViewModeContext(),
+    currentViewMode = _useViewModeContext.currentViewMode,
+    setCurrentViewMode = _useViewModeContext.setCurrentViewMode,
+    disableDisplayDropdown = _useViewModeContext.disableDisplayDropdown;
+  if (disableDisplayDropdown) {
+    return null;
+  }
+  var handleViewModeChange = function handleViewModeChange(selectedMode) {
+    userInteractions.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
+    setCurrentViewMode(selectedMode);
+  };
+  return jsx(DisplayViewDropDown, {
+    onViewModeChange: handleViewModeChange,
+    viewMode: currentViewMode
+  });
+};

package/dist/esm/ui/common/modal/mode-switcher/useViewModeContext.js

@@ -1,12 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 import React, { createContext, useContext, useMemo, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 var ViewModeContext = /*#__PURE__*/createContext(null);
 export var DatasourceViewModeProvider = function DatasourceViewModeProvider(_ref) {
   var initialViewMode = _ref.viewMode,
@@ -23,7 +16,7 @@ export var DatasourceViewModeProvider = function DatasourceViewModeProvider(_ref
       disableDisplayDropdown: disableDisplayDropdown
     };
   }, [currentViewMode, setCurrentViewMode, disableDisplayDropdown]);
-  return jsx(ViewModeContext.Provider, {
+  return /*#__PURE__*/React.createElement(ViewModeContext.Provider, {
     value: value
   }, children);
 };

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

@@ -0,0 +1,4 @@
+._1bah1h6o{justify-content:center}
+._1bsbzwfg{width:2pc}
+._1e0c1txw{display:flex}
+._80omtlke{cursor:pointer}

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

@@ -1,18 +1,20 @@
+/* dropdownIndicator.tsx generated by @compiled/babel-plugin v0.36.0 */
+import "./dropdownIndicator.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import CloseIcon from '@atlaskit/icon/core/migration/cross-circle';
 import SearchIcon from '@atlaskit/icon/core/migration/search';
-import { Box, xcss } from '@atlaskit/primitives';
+import { fg } from "@atlaskit/platform-feature-flags";
+import { Box } from '@atlaskit/primitives/compiled';
 import { components } from '@atlaskit/select';
-var customDropdownIndicatorStyles = xcss({
-  display: 'flex',
-  cursor: 'pointer',
-  justifyContent: 'center',
-  width: "var(--ds-space-400, 32px)"
-});
+import CustomDropdownIndicatorOld from './dropdownIndicatorOld';
+var styles = {
+  customDropdownIndicatorStyles: "_1e0c1txw _80omtlke _1bah1h6o _1bsbzwfg"
+};
 var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
   var selectProps = props.selectProps;
   return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(Box, {
-    xcss: customDropdownIndicatorStyles,
+    xcss: styles.customDropdownIndicatorStyles,
     onClick: function onClick() {
       if (selectProps.inputValue) {
         selectProps.onInputChange && selectProps.onInputChange('', {
@@ -31,4 +33,11 @@ var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
     color: "currentColor"
   })));
 };
-export default CustomDropdownIndicator;
+var CustomDropdownIndicatorExported = function CustomDropdownIndicatorExported(props) {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(CustomDropdownIndicator, props);
+  } else {
+    return /*#__PURE__*/React.createElement(CustomDropdownIndicatorOld, props);
+  }
+};
+export default CustomDropdownIndicatorExported;

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import CloseIcon from '@atlaskit/icon/core/migration/cross-circle';
+import SearchIcon from '@atlaskit/icon/core/migration/search';
+import { Box, xcss } from '@atlaskit/primitives';
+import { components } from '@atlaskit/select';
+var customDropdownIndicatorStyles = xcss({
+  display: 'flex',
+  cursor: 'pointer',
+  justifyContent: 'center',
+  width: "var(--ds-space-400, 32px)"
+});
+var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
+  var selectProps = props.selectProps;
+  return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(Box, {
+    xcss: customDropdownIndicatorStyles,
+    onClick: function onClick() {
+      if (selectProps.inputValue) {
+        selectProps.onInputChange && selectProps.onInputChange('', {
+          action: 'input-change',
+          prevInputValue: selectProps.inputValue
+        });
+      }
+    }
+  }, selectProps.inputValue ? /*#__PURE__*/React.createElement(CloseIcon, {
+    LEGACY_size: "small",
+    label: "",
+    color: "currentColor"
+  }) : /*#__PURE__*/React.createElement(SearchIcon, {
+    LEGACY_size: "small",
+    label: "",
+    color: "currentColor"
+  })));
+};
+export default CustomDropdownIndicator;

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

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React from 'react';
+import { FormattedMessage } from 'react-intl-next';
+import { Flex, Inline, xcss } from '@atlaskit/primitives';
+import { N40 } from '@atlaskit/theme/colors';
+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 PopupFooter = function PopupFooter(_ref) {
+  var currentDisplayCount = _ref.currentDisplayCount,
+    totalCount = _ref.totalCount,
+    filterName = _ref.filterName;
+  return /*#__PURE__*/React.createElement(Flex, {
+    testId: "".concat(filterName, "--footer"),
+    direction: "row",
+    alignItems: "center",
+    justifyContent: "end",
+    xcss: footerContainerStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
+    xcss: footerPaginationInfoStyles
+  }, /*#__PURE__*/React.createElement(FormattedMessage, _extends({}, asyncPopupSelectMessages.paginationDetails, {
+    values: {
+      currentDisplayCount: currentDisplayCount,
+      totalCount: totalCount
+    }
+  }))));
+};
+export default PopupFooter;

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

@@ -0,0 +1,8 @@
+
+._195gutpp{margin-inline:var(--ds-space-150,9pt)}
+._1mouu2gc{margin-block:var(--ds-space-100,8px)}._15a5nqa1{border-top-style:solid}
+._1i53b5v6{border-top-color:var(--ds-border,#dfe1e6)}
+._ca0q1b66{padding-top:var(--ds-space-050,4px)}
+._n3td1b66{padding-bottom:var(--ds-space-050,4px)}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._uwhke4h9{border-top-width:var(--ds-border-width,1px)}

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;