@atlaskit/link-datasource 3.19.2 → 3.20.1

package/dist/es2019/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';
-const modeSwitcherStyles = css({
-  alignItems: 'center',
-  background: `var(--ds-background-neutral, ${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)"
-});
-const compactModeSwitcherStyles = css({
-  padding: "var(--ds-space-050, 4px)",
-  gap: "var(--ds-space-025, 2px)"
-});
-const modeInputStyles = css({
-  display: 'none'
-});
-const modeSwitcherLabelStyles = css({
-  color: `var(--ds-text-subtlest, ${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, ${N30A})`
-  }
-});
-const modeSwitcherLabelSelectedStyles = css({
-  backgroundColor: `var(--ds-background-input-pressed, ${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, ${N0})`
-  }
-});
-const modeSwitcherLabelDisabledStyles = css({
-  color: `var(--ds-text-disabled, ${N60})`
-});
-const modeSwitcherDisabledStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':hover': {
-    cursor: 'not-allowed',
-    background: 'transparent'
-  }
-});
-const compactModeSwitcherLabelStyles = css({
-  padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`
-});
-export const ModeSwitcher = props => {
+const modeSwitcherStyles = null;
+const compactModeSwitcherStyles = null;
+const modeInputStyles = null;
+const modeSwitcherLabelStyles = null;
+const modeSwitcherLabelSelectedStyles = null;
+const modeSwitcherLabelDisabledStyles = null;
+const modeSwitcherDisabledStyles = null;
+const compactModeSwitcherLabelStyles = null;
+const ModeSwitcherNew = props => {
   var _options$;
   const {
     isCompact,
@@ -82,10 +31,10 @@ export const ModeSwitcher = props => {
   const 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 _bfhk1s4m _vchhusvi _1e0c116y _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _18u0v47k _1j55105o", isCompact && "_zulpv77o _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66"])
   }, options.map(({
     value,
     label,
@@ -93,25 +42,32 @@ export const ModeSwitcher = props => {
     tooltipText
   }) => {
     const isSelected = value === selectedOptionValue;
-    return jsx(Tooltip, {
+    return /*#__PURE__*/React.createElement(Tooltip, {
       key: value,
       content: tooltipText
-    }, tooltipProps => jsx("label", _extends({}, tooltipProps, {
+    }, tooltipProps => /*#__PURE__*/React.createElement("label", _extends({}, tooltipProps, {
       key: value,
-      css: [modeSwitcherLabelStyles, isCompact && compactModeSwitcherLabelStyles, isSelected && modeSwitcherLabelSelectedStyles, isDisabled && modeSwitcherDisabledStyles, isOptionDisabled && [modeSwitcherLabelDisabledStyles, modeSwitcherDisabledStyles]],
-      "data-testid": `mode-toggle-${value}`
-    }), label, jsx("input", {
+      "data-testid": `mode-toggle-${value}`,
+      className: ax(["_11c8qk37 _2rko1b66 _syaz1be1 _k48p1pd9 _1p1dangw _ca0q1b66 _u5f31b66 _n3td1b66 _19bv1b66 _d0altlke _irr3g4tq", isCompact && "_ca0qv77o _u5f31b66 _n3tdv77o _19bv1b66", isSelected && "_2rko1b66 _bfhkr01l _16qs1jze _d0altlke _irr3r01l", isDisabled && "_irr318uv _d0al13gf", isOptionDisabled && "_syaz8q0r", isOptionDisabled && "_irr318uv _d0al13gf"])
+    }), 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 const ModeSwitcher = props => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(ModeSwitcherNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(ModeSwitcherOld, props);
+  }
+};
 export const DatasourceViewModeDropDown = () => {
   const userInteractions = useUserInteractions();
   const {
@@ -126,7 +82,7 @@ export const DatasourceViewModeDropDown = () => {
     userInteractions.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
     setCurrentViewMode(selectedMode);
   };
-  return jsx(DisplayViewDropDown, {
+  return /*#__PURE__*/React.createElement(DisplayViewDropDown, {
     onViewModeChange: handleViewModeChange,
     viewMode: currentViewMode
   });

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

@@ -0,0 +1,133 @@
+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';
+const modeSwitcherStyles = css({
+  alignItems: 'center',
+  background: `var(--ds-background-neutral, ${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)"
+});
+const compactModeSwitcherStyles = css({
+  padding: "var(--ds-space-050, 4px)",
+  gap: "var(--ds-space-025, 2px)"
+});
+const modeInputStyles = css({
+  display: 'none'
+});
+const modeSwitcherLabelStyles = css({
+  color: `var(--ds-text-subtlest, ${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, ${N30A})`
+  }
+});
+const modeSwitcherLabelSelectedStyles = css({
+  backgroundColor: `var(--ds-background-input-pressed, ${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, ${N0})`
+  }
+});
+const modeSwitcherLabelDisabledStyles = css({
+  color: `var(--ds-text-disabled, ${N60})`
+});
+const modeSwitcherDisabledStyles = css({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
+  ':hover': {
+    cursor: 'not-allowed',
+    background: 'transparent'
+  }
+});
+const compactModeSwitcherLabelStyles = css({
+  padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`
+});
+export const ModeSwitcherOld = props => {
+  var _options$;
+  const {
+    isCompact,
+    isDisabled,
+    onOptionValueChange,
+    options,
+    selectedOptionValue = (_options$ = options[0]) === null || _options$ === void 0 ? void 0 : _options$.value
+  } = props;
+  const 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(({
+    value,
+    label,
+    disabled: isOptionDisabled,
+    tooltipText
+  }) => {
+    const isSelected = value === selectedOptionValue;
+    return jsx(Tooltip, {
+      key: value,
+      content: tooltipText
+    }, tooltipProps => jsx("label", _extends({}, tooltipProps, {
+      key: value,
+      css: [modeSwitcherLabelStyles, isCompact && compactModeSwitcherLabelStyles, isSelected && modeSwitcherLabelSelectedStyles, isDisabled && modeSwitcherDisabledStyles, isOptionDisabled && [modeSwitcherLabelDisabledStyles, modeSwitcherDisabledStyles]],
+      "data-testid": `mode-toggle-${value}`
+    }), label, jsx("input", {
+      "aria-checked": isSelected,
+      "aria-disabled": isOptionDisabled,
+      checked: isSelected,
+      css: modeInputStyles,
+      disabled: isOptionDisabled,
+      onChange: handleModeChange,
+      type: "radio",
+      value: value
+    })));
+  })) : null;
+};
+export const DatasourceViewModeDropDown = () => {
+  const userInteractions = useUserInteractions();
+  const {
+    currentViewMode,
+    setCurrentViewMode,
+    disableDisplayDropdown
+  } = useViewModeContext();
+  if (disableDisplayDropdown) {
+    return null;
+  }
+  const handleViewModeChange = selectedMode => {
+    userInteractions.add(DatasourceAction.DISPLAY_VIEW_CHANGED);
+    setCurrentViewMode(selectedMode);
+  };
+  return jsx(DisplayViewDropDown, {
+    onViewModeChange: handleViewModeChange,
+    viewMode: currentViewMode
+  });
+};

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

@@ -1,11 +1,4 @@
-/**
- * @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';
 const ViewModeContext = /*#__PURE__*/createContext(null);
 export const DatasourceViewModeProvider = ({
   viewMode: initialViewMode,
@@ -18,7 +11,7 @@ export const DatasourceViewModeProvider = ({
     setCurrentViewMode,
     disableDisplayDropdown
   }), [currentViewMode, setCurrentViewMode, disableDisplayDropdown]);
-  return jsx(ViewModeContext.Provider, {
+  return /*#__PURE__*/React.createElement(ViewModeContext.Provider, {
     value: value
   }, children);
 };

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

@@ -1,20 +1,22 @@
+/* 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';
-const customDropdownIndicatorStyles = xcss({
-  display: 'flex',
-  cursor: 'pointer',
-  justifyContent: 'center',
-  width: "var(--ds-space-400, 32px)"
-});
+import CustomDropdownIndicatorOld from './dropdownIndicatorOld';
+const styles = {
+  customDropdownIndicatorStyles: "_1e0c1txw _80omtlke _1bah1h6o _1bsbzwfg"
+};
 const CustomDropdownIndicator = props => {
   const {
     selectProps
   } = props;
   return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(Box, {
-    xcss: customDropdownIndicatorStyles,
+    xcss: styles.customDropdownIndicatorStyles,
     onClick: () => {
       if (selectProps.inputValue) {
         selectProps.onInputChange && selectProps.onInputChange('', {
@@ -33,4 +35,11 @@ const CustomDropdownIndicator = props => {
     color: "currentColor"
   })));
 };
-export default CustomDropdownIndicator;
+const 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/es2019/ui/common/modal/popup-select/dropdownIndicatorOld.js

@@ -0,0 +1,36 @@
+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';
+const customDropdownIndicatorStyles = xcss({
+  display: 'flex',
+  cursor: 'pointer',
+  justifyContent: 'center',
+  width: "var(--ds-space-400, 32px)"
+});
+const CustomDropdownIndicator = props => {
+  const {
+    selectProps
+  } = props;
+  return /*#__PURE__*/React.createElement(components.DropdownIndicator, props, /*#__PURE__*/React.createElement(Box, {
+    xcss: customDropdownIndicatorStyles,
+    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/es2019/ui/common/modal/popup-select/footer-old.js

@@ -0,0 +1,37 @@
+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';
+const footerContainerStyles = xcss({
+  paddingTop: 'space.050',
+  paddingBottom: 'space.050',
+  borderTop: `${`var(--ds-border, ${N40})`} solid 1px`
+});
+const footerPaginationInfoStyles = xcss({
+  color: 'color.text.subtlest',
+  marginBlock: 'space.100',
+  marginInline: 'space.150'
+});
+const PopupFooter = ({
+  currentDisplayCount,
+  totalCount,
+  filterName
+}) => {
+  return /*#__PURE__*/React.createElement(Flex, {
+    testId: `${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,
+      totalCount
+    }
+  }))));
+};
+export default PopupFooter;

package/dist/es2019/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/es2019/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';
-const footerContainerStyles = xcss({
-  paddingTop: 'space.050',
-  paddingBottom: 'space.050',
-  borderTop: `${`var(--ds-border, ${N40})`} solid 1px`
-});
-const footerPaginationInfoStyles = xcss({
-  color: 'color.text.subtlest',
-  marginBlock: 'space.100',
-  marginInline: 'space.150'
-});
+const styles = {
+  footerContainerStyles: "_ca0q1b66 _n3td1b66 _uwhke4h9 _15a5nqa1 _1i53b5v6",
+  footerPaginationInfoStyles: "_1mouu2gc _195gutpp _syaz131l"
+};
 const PopupFooter = ({
   currentDisplayCount,
   totalCount,
@@ -24,9 +23,9 @@ const PopupFooter = ({
     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,
@@ -34,4 +33,11 @@ const PopupFooter = ({
     }
   }))));
 };
-export default PopupFooter;
+const 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/es2019/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/es2019/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';
-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)"
-});
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, Flex } from '@atlaskit/primitives/compiled';
+import formatOptionLabelOld from './formatOptionLabelOld';
+const styles = {
+  commonLabelStyles: "_1reo15vq _18m915vq _1bto1l2s",
+  avatarOptionLabelStyles: "_18u01b66",
+  groupWrapperStyles: "_1bsbgktf _1ul9gktf _4t3igktf"
+};
 const IconOptionLabel = ({
   data
 }) => {
@@ -42,7 +41,7 @@ const LozengeOptionLabel = ({
     appearance: data.appearance,
     testId: "basic-filter-popup-select-option--lozenge"
   }, /*#__PURE__*/React.createElement(Box, {
-    xcss: [commonLabelStyles]
+    xcss: styles.commonLabelStyles
   }, data.label));
 };
 const AvatarOptionLabel = ({
@@ -55,7 +54,7 @@ const AvatarOptionLabel = ({
   }, data.isGroup ? /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
     justifyContent: "center",
-    xcss: groupWrapperStyles
+    xcss: styles.groupWrapperStyles
   }, /*#__PURE__*/React.createElement(PeopleGroupIcon, {
     color: "currentColor",
     LEGACY_size: "small",
@@ -65,7 +64,7 @@ const AvatarOptionLabel = ({
     src: data.avatar,
     size: "xsmall"
   }), /*#__PURE__*/React.createElement(Box, {
-    xcss: [commonLabelStyles, avatarOptionLabelStyles]
+    xcss: cx(styles.commonLabelStyles, styles.avatarOptionLabelStyles)
   }, data.label));
 };
 const formatOptionLabel = data => {
@@ -86,4 +85,11 @@ const formatOptionLabel = data => {
   }
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 };
-export default formatOptionLabel;
+const formatOptionLabelExported = data => {
+  if (fg('bandicoots-compiled-migration-link-datasource')) {
+    return formatOptionLabel(data);
+  } else {
+    return formatOptionLabelOld(data);
+  }
+};
+export default formatOptionLabelExported;

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/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)}