@atlaskit/link-datasource 3.19.2 → 3.20.1

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

@@ -0,0 +1,140 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ModeSwitcherOld = exports.DatasourceViewModeDropDown = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _colors = require("@atlaskit/theme/colors");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _types = require("../../../../analytics/types");
+var _userInteractions = require("../../../../contexts/user-interactions");
+var _displayViewDropDown = require("../display-view-dropdown/display-view-drop-down");
+var _useViewModeContext2 = require("./useViewModeContext");
+/* eslint-disable @atlaskit/design-system/use-tokens-typography */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var modeSwitcherStyles = (0, _react2.css)({
+  alignItems: 'center',
+  background: "var(--ds-background-neutral, ".concat(_colors.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 = (0, _react2.css)({
+  padding: "var(--ds-space-050, 4px)",
+  gap: "var(--ds-space-025, 2px)"
+});
+var modeInputStyles = (0, _react2.css)({
+  display: 'none'
+});
+var modeSwitcherLabelStyles = (0, _react2.css)({
+  color: "var(--ds-text-subtlest, ".concat(_colors.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(_colors.N30A, ")")
+  }
+});
+var modeSwitcherLabelSelectedStyles = (0, _react2.css)({
+  backgroundColor: "var(--ds-background-input-pressed, ".concat(_colors.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(_colors.N0, ")")
+  }
+});
+var modeSwitcherLabelDisabledStyles = (0, _react2.css)({
+  color: "var(--ds-text-disabled, ".concat(_colors.N60, ")")
+});
+var modeSwitcherDisabledStyles = (0, _react2.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 = (0, _react2.css)({
+  padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
+});
+var ModeSwitcherOld = exports.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 ? (0, _react2.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 (0, _react2.jsx)(_tooltip.default, {
+      key: value,
+      content: tooltipText
+    }, function (tooltipProps) {
+      return (0, _react2.jsx)("label", (0, _extends2.default)({}, tooltipProps, {
+        key: value,
+        css: [modeSwitcherLabelStyles, isCompact && compactModeSwitcherLabelStyles, isSelected && modeSwitcherLabelSelectedStyles, isDisabled && modeSwitcherDisabledStyles, isOptionDisabled && [modeSwitcherLabelDisabledStyles, modeSwitcherDisabledStyles]],
+        "data-testid": "mode-toggle-".concat(value)
+      }), label, (0, _react2.jsx)("input", {
+        "aria-checked": isSelected,
+        "aria-disabled": isOptionDisabled,
+        checked: isSelected,
+        css: modeInputStyles,
+        disabled: isOptionDisabled,
+        onChange: handleModeChange,
+        type: "radio",
+        value: value
+      }));
+    });
+  })) : null;
+};
+var DatasourceViewModeDropDown = exports.DatasourceViewModeDropDown = function DatasourceViewModeDropDown() {
+  var userInteractions = (0, _userInteractions.useUserInteractions)();
+  var _useViewModeContext = (0, _useViewModeContext2.useViewModeContext)(),
+    currentViewMode = _useViewModeContext.currentViewMode,
+    setCurrentViewMode = _useViewModeContext.setCurrentViewMode,
+    disableDisplayDropdown = _useViewModeContext.disableDisplayDropdown;
+  if (disableDisplayDropdown) {
+    return null;
+  }
+  var handleViewModeChange = function handleViewModeChange(selectedMode) {
+    userInteractions.add(_types.DatasourceAction.DISPLAY_VIEW_CHANGED);
+    setCurrentViewMode(selectedMode);
+  };
+  return (0, _react2.jsx)(_displayViewDropDown.DisplayViewDropDown, {
+    onViewModeChange: handleViewModeChange,
+    viewMode: currentViewMode
+  });
+};

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

@@ -8,16 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useViewModeContext = exports.DatasourceViewModeProvider = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 var ViewModeContext = /*#__PURE__*/(0, _react.createContext)(null);
 var DatasourceViewModeProvider = exports.DatasourceViewModeProvider = function DatasourceViewModeProvider(_ref) {
   var initialViewMode = _ref.viewMode,
@@ -34,7 +26,7 @@ var DatasourceViewModeProvider = exports.DatasourceViewModeProvider = function D
       disableDisplayDropdown: disableDisplayDropdown
     };
   }, [currentViewMode, setCurrentViewMode, disableDisplayDropdown]);
-  return (0, _react2.jsx)(ViewModeContext.Provider, {
+  return /*#__PURE__*/_react.default.createElement(ViewModeContext.Provider, {
     value: value
   }, children);
 };

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

@@ -1,3 +1,4 @@
+/* dropdownIndicator.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,21 +6,22 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./dropdownIndicator.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
 var _search = _interopRequireDefault(require("@atlaskit/icon/core/migration/search"));
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _select = require("@atlaskit/select");
-var customDropdownIndicatorStyles = (0, _primitives.xcss)({
-  display: 'flex',
-  cursor: 'pointer',
-  justifyContent: 'center',
-  width: "var(--ds-space-400, 32px)"
-});
+var _dropdownIndicatorOld = _interopRequireDefault(require("./dropdownIndicatorOld"));
+var styles = {
+  customDropdownIndicatorStyles: "_1e0c1txw _80omtlke _1bah1h6o _1bsbzwfg"
+};
 var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
   var selectProps = props.selectProps;
-  return /*#__PURE__*/_react.default.createElement(_select.components.DropdownIndicator, props, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: customDropdownIndicatorStyles,
+  return /*#__PURE__*/_react.default.createElement(_select.components.DropdownIndicator, props, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.customDropdownIndicatorStyles,
     onClick: function onClick() {
       if (selectProps.inputValue) {
         selectProps.onInputChange && selectProps.onInputChange('', {
@@ -38,4 +40,11 @@ var CustomDropdownIndicator = function CustomDropdownIndicator(props) {
     color: "currentColor"
   })));
 };
-var _default = exports.default = CustomDropdownIndicator;
+var CustomDropdownIndicatorExported = function CustomDropdownIndicatorExported(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/_react.default.createElement(CustomDropdownIndicator, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_dropdownIndicatorOld.default, props);
+  }
+};
+var _default = exports.default = CustomDropdownIndicatorExported;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
+var _search = _interopRequireDefault(require("@atlaskit/icon/core/migration/search"));
+var _primitives = require("@atlaskit/primitives");
+var _select = require("@atlaskit/select");
+var customDropdownIndicatorStyles = (0, _primitives.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.default.createElement(_select.components.DropdownIndicator, props, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: customDropdownIndicatorStyles,
+    onClick: function onClick() {
+      if (selectProps.inputValue) {
+        selectProps.onInputChange && selectProps.onInputChange('', {
+          action: 'input-change',
+          prevInputValue: selectProps.inputValue
+        });
+      }
+    }
+  }, selectProps.inputValue ? /*#__PURE__*/_react.default.createElement(_crossCircle.default, {
+    LEGACY_size: "small",
+    label: "",
+    color: "currentColor"
+  }) : /*#__PURE__*/_react.default.createElement(_search.default, {
+    LEGACY_size: "small",
+    label: "",
+    color: "currentColor"
+  })));
+};
+var _default = exports.default = CustomDropdownIndicator;

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

@@ -0,0 +1,43 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _reactIntlNext = require("react-intl-next");
+var _primitives = require("@atlaskit/primitives");
+var _colors = require("@atlaskit/theme/colors");
+var _messages = require("./messages");
+var footerContainerStyles = (0, _primitives.xcss)({
+  paddingTop: 'space.050',
+  paddingBottom: 'space.050',
+  borderTop: "".concat("var(--ds-border, ".concat(_colors.N40, ")"), " solid 1px")
+});
+var footerPaginationInfoStyles = (0, _primitives.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.default.createElement(_primitives.Flex, {
+    testId: "".concat(filterName, "--footer"),
+    direction: "row",
+    alignItems: "center",
+    justifyContent: "end",
+    xcss: footerContainerStyles
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
+    xcss: footerPaginationInfoStyles
+  }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.asyncPopupSelectMessages.paginationDetails, {
+    values: {
+      currentDisplayCount: currentDisplayCount,
+      totalCount: totalCount
+    }
+  }))));
+};
+var _default = exports.default = PopupFooter;

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

@@ -1,3 +1,4 @@
+/* footer.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,34 +6,32 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./footer.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _reactIntlNext = require("react-intl-next");
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _colors = require("@atlaskit/theme/colors");
+var _footerOld = _interopRequireDefault(require("./footer-old"));
 var _messages = require("./messages");
-var footerContainerStyles = (0, _primitives.xcss)({
-  paddingTop: 'space.050',
-  paddingBottom: 'space.050',
-  borderTop: "".concat("var(--ds-border, ".concat(_colors.N40, ")"), " solid 1px")
-});
-var footerPaginationInfoStyles = (0, _primitives.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,
     filterName = _ref.filterName;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
     testId: "".concat(filterName, "--footer"),
     direction: "row",
     alignItems: "center",
     justifyContent: "end",
-    xcss: footerContainerStyles
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
-    xcss: footerPaginationInfoStyles
+    xcss: styles.footerContainerStyles
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    xcss: styles.footerPaginationInfoStyles
   }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _messages.asyncPopupSelectMessages.paginationDetails, {
     values: {
       currentDisplayCount: currentDisplayCount,
@@ -40,4 +39,11 @@ var PopupFooter = function PopupFooter(_ref) {
     }
   }))));
 };
-var _default = exports.default = PopupFooter;
+var PopupFooterExported = function PopupFooterExported(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/_react.default.createElement(PopupFooter, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_footerOld.default, props);
+  }
+};
+var _default = exports.default = PopupFooterExported;

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

@@ -1,3 +1,4 @@
+/* formatOptionLabel.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,23 +6,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./formatOptionLabel.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _css = require("@atlaskit/css");
 var _peopleGroup = _interopRequireDefault(require("@atlaskit/icon/core/migration/people-group"));
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
-var _primitives = require("@atlaskit/primitives");
-var commonLabelStyles = (0, _primitives.xcss)({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis'
-});
-var avatarOptionLabelStyles = (0, _primitives.xcss)({
-  marginLeft: 'space.050'
-});
-var groupWrapperStyles = (0, _primitives.xcss)({
-  width: "var(--ds-space-250, 20px)",
-  minWidth: "var(--ds-space-250, 20px)",
-  height: "var(--ds-space-250, 20px)"
-});
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
+var _formatOptionLabelOld = _interopRequireDefault(require("./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,
@@ -44,20 +43,20 @@ var LozengeOptionLabel = function LozengeOptionLabel(_ref2) {
   return /*#__PURE__*/_react.default.createElement(_lozenge.default, {
     appearance: data.appearance,
     testId: "basic-filter-popup-select-option--lozenge"
-  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: [commonLabelStyles]
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.commonLabelStyles
   }, data.label));
 };
 var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
   var data = _ref3.data,
     testId = _ref3.testId;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
     alignItems: "center",
     testId: testId || 'basic-filter-popup-select-option--avatar'
-  }, data.isGroup ? /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+  }, data.isGroup ? /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
     alignItems: "center",
     justifyContent: "center",
-    xcss: groupWrapperStyles
+    xcss: styles.groupWrapperStyles
   }, /*#__PURE__*/_react.default.createElement(_peopleGroup.default, {
     color: "currentColor",
     LEGACY_size: "small",
@@ -66,8 +65,8 @@ var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
     appearance: data.isSquare ? 'square' : 'circle',
     src: data.avatar,
     size: "xsmall"
-  }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-    xcss: [commonLabelStyles, avatarOptionLabelStyles]
+  }), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: (0, _css.cx)(styles.commonLabelStyles, styles.avatarOptionLabelStyles)
   }, data.label));
 };
 var formatOptionLabel = function formatOptionLabel(data) {
@@ -88,4 +87,11 @@ var formatOptionLabel = function formatOptionLabel(data) {
   }
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
 };
-var _default = exports.default = formatOptionLabel;
+var formatOptionLabelExported = function formatOptionLabelExported(data) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-link-datasource')) {
+    return formatOptionLabel(data);
+  } else {
+    return (0, _formatOptionLabelOld.default)(data);
+  }
+};
+var _default = exports.default = formatOptionLabelExported;

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

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _peopleGroup = _interopRequireDefault(require("@atlaskit/icon/core/migration/people-group"));
+var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge"));
+var _primitives = require("@atlaskit/primitives");
+var commonLabelStyles = (0, _primitives.xcss)({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis'
+});
+var avatarOptionLabelStyles = (0, _primitives.xcss)({
+  marginLeft: 'space.050'
+});
+var groupWrapperStyles = (0, _primitives.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.default.createElement(AvatarOptionLabel, {
+    data: avatarOptionLabelData,
+    testId: "basic-filter-popup-select-option--icon-label"
+  });
+};
+var LozengeOptionLabel = function LozengeOptionLabel(_ref2) {
+  var data = _ref2.data;
+  return /*#__PURE__*/_react.default.createElement(_lozenge.default, {
+    appearance: data.appearance,
+    testId: "basic-filter-popup-select-option--lozenge"
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: [commonLabelStyles]
+  }, data.label));
+};
+var AvatarOptionLabel = function AvatarOptionLabel(_ref3) {
+  var data = _ref3.data,
+    testId = _ref3.testId;
+  return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    alignItems: "center",
+    testId: testId || 'basic-filter-popup-select-option--avatar'
+  }, data.isGroup ? /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    alignItems: "center",
+    justifyContent: "center",
+    xcss: groupWrapperStyles
+  }, /*#__PURE__*/_react.default.createElement(_peopleGroup.default, {
+    color: "currentColor",
+    LEGACY_size: "small",
+    label: ""
+  })) : /*#__PURE__*/_react.default.createElement(_avatar.default, {
+    appearance: data.isSquare ? 'square' : 'circle',
+    src: data.avatar,
+    size: "xsmall"
+  }), /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: [commonLabelStyles, avatarOptionLabelStyles]
+  }, data.label));
+};
+var formatOptionLabel = function formatOptionLabel(data) {
+  if (data.optionType === 'lozengeLabel') {
+    return /*#__PURE__*/_react.default.createElement(LozengeOptionLabel, {
+      data: data
+    });
+  }
+  if (data.optionType === 'avatarLabel') {
+    return /*#__PURE__*/_react.default.createElement(AvatarOptionLabel, {
+      data: data
+    });
+  }
+  if (data.optionType === 'iconLabel') {
+    return /*#__PURE__*/_react.default.createElement(IconOptionLabel, {
+      data: data
+    });
+  }
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
+};
+var _default = exports.default = formatOptionLabel;

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

@@ -1,27 +1,29 @@
+/* index.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.CustomMenuListExported = void 0;
+require("./index.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _primitives = require("@atlaskit/primitives");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _select = require("@atlaskit/select");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _errorMessage = _interopRequireDefault(require("./errorMessage"));
 var _loadingMessage = _interopRequireDefault(require("./loadingMessage"));
+var _menuListOld = _interopRequireDefault(require("./menuListOld"));
 var _noOptionsMessage = _interopRequireDefault(require("./noOptionsMessage"));
 var _showMoreButton = _interopRequireDefault(require("./showMoreButton"));
 var _excluded = ["children"];
-var inlineSpinnerStyles = (0, _primitives.xcss)({
-  paddingTop: 'space.075'
-});
-var showMoreButtonBoxStyles = (0, _primitives.xcss)({
-  paddingLeft: 'space.075',
-  paddingTop: 'space.100'
-});
+var styles = {
+  inlineSpinnerStyles: "_ca0q12x7",
+  showMoreButtonBoxStyles: "_19bv12x7 _ca0qu2gc"
+};
 var CustomMenuList = function CustomMenuList(_ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -39,9 +41,9 @@ var CustomMenuList = function CustomMenuList(_ref) {
   var shouldDisplayShowMore = showMore && !isLoadingMore;
   var isLoadingMoreData = !shouldDisplayShowMore && isLoadingMore;
   var InlineSpinner = function InlineSpinner() {
-    return /*#__PURE__*/_react.default.createElement(_primitives.Flex, {
+    return /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
       justifyContent: "center",
-      xcss: inlineSpinnerStyles
+      xcss: styles.inlineSpinnerStyles
     }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
       size: "medium"
     }));
@@ -63,8 +65,8 @@ var CustomMenuList = function CustomMenuList(_ref) {
         filterName: filterName
       });
     }
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, shouldDisplayShowMore && handleShowMore && /*#__PURE__*/_react.default.createElement(_primitives.Box, {
-      xcss: showMoreButtonBoxStyles
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, shouldDisplayShowMore && handleShowMore && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+      xcss: styles.showMoreButtonBoxStyles
     }, /*#__PURE__*/_react.default.createElement(_showMoreButton.default, {
       onShowMore: handleShowMore,
       filterName: filterName
@@ -72,4 +74,11 @@ var CustomMenuList = function CustomMenuList(_ref) {
   };
   return /*#__PURE__*/_react.default.createElement(_select.components.MenuList, props, renderChildren());
 };
-var _default = exports.default = CustomMenuList;
+var CustomMenuListExported = exports.CustomMenuListExported = function CustomMenuListExported(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/_react.default.createElement(CustomMenuList, props);
+  } else {
+    return /*#__PURE__*/_react.default.createElement(_menuListOld.default, props);
+  }
+};
+var _default = exports.default = CustomMenuListExported;