@atlaskit/link-datasource 3.19.2 → 3.20.1

package/dist/cjs/ui/datasource-table-view/datasourceTableView.js

@@ -1,14 +1,19 @@
+/* datasourceTableView.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DatasourceTableView = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+require("./datasourceTableView.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _analytics = require("../../analytics");
 var _constants = require("../../analytics/constants");
 var _ufoExperiences = require("../../analytics/ufoExperiences");
@@ -28,16 +33,10 @@ var _providerAuthRequired = require("../common/error-state/provider-auth-require
 var _issueLikeTable = require("../issue-like-table");
 var _emptyState = _interopRequireDefault(require("../issue-like-table/empty-state"));
 var _tableFooter = require("../table-footer");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var containerStyles = (0, _react2.css)({
-  borderRadius: 'inherit'
-});
+var _datasourceTableViewOld = require("./datasourceTableViewOld");
+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; }
+var containerStyles = null;
 var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAnalytics(_ref) {
   var datasourceId = _ref.datasourceId,
     parameters = _ref.parameters,
@@ -138,34 +137,33 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     });
   }, [reset]);
   if (status === 'resolved' && !responseItems.length || status === 'forbidden') {
-    return (0, _react2.jsx)(_noResults.NoResults, {
+    return /*#__PURE__*/React.createElement(_noResults.NoResults, {
       onRefresh: handleErrorRefresh
     });
   }
   if (status === 'unauthorized') {
-    return authDetails !== null && authDetails !== void 0 && authDetails.length && authDetails.length > 0 ? (0, _react2.jsx)(_providerAuthRequired.ProviderAuthRequired, {
+    return authDetails !== null && authDetails !== void 0 && authDetails.length && authDetails.length > 0 ? /*#__PURE__*/React.createElement(_providerAuthRequired.ProviderAuthRequired, {
       auth: authDetails,
       extensionKey: extensionKey,
       providerName: providerName,
       onAuthSuccess: forcedReset,
       onAuthError: forcedReset,
       datasourceId: datasourceId
-    }) : (0, _react2.jsx)(_accessRequired.AccessRequired, {
+    }) : /*#__PURE__*/React.createElement(_accessRequired.AccessRequired, {
       url: url
     });
   }
   if (status === 'rejected') {
-    return (0, _react2.jsx)(_loadingError.LoadingError, {
+    return /*#__PURE__*/React.createElement(_loadingError.LoadingError, {
       onRefresh: handleErrorRefresh
     });
   }
-  return (0, _react2.jsx)(_intlMessagesProvider.IntlMessagesProvider, {
+  return /*#__PURE__*/React.createElement(_intlMessagesProvider.IntlMessagesProvider, {
     defaultMessages: _en.default,
     loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale
-  }, (0, _react2.jsx)("div", {
-    css: containerStyles,
-    className: "datasource-table"
-  }, hasColumns ? (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_2rko1kw7", "datasource-table"])
+  }, hasColumns ? /*#__PURE__*/React.createElement(_issueLikeTable.IssueLikeDataTableView, {
     testId: 'datasource-table-view',
     hasNextPage: hasNextPage,
     items: responseItems,
@@ -182,10 +180,10 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     onWrappedColumnChange: onWrappedColumnChange,
     scrollableContainerHeight: _styled.ScrollableContainerHeight,
     extensionKey: extensionKey
-  }) : (0, _react2.jsx)(_emptyState.default, {
+  }) : /*#__PURE__*/React.createElement(_emptyState.default, {
     testId: "datasource-table-view-skeleton",
     isCompact: true
-  }), (0, _react2.jsx)(_tableFooter.TableFooter, {
+  }), /*#__PURE__*/React.createElement(_tableFooter.TableFooter, {
     datasourceId: datasourceId,
     itemCount: isDataReady ? totalCount : undefined,
     onRefresh: onRefresh,
@@ -193,6 +191,13 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
     url: url
   })));
 };
-var DatasourceTableView = exports.DatasourceTableView = (0, _analyticsNext.withAnalyticsContext)(_constants.componentMetadata.tableView)(function (props) {
-  return (0, _react2.jsx)(_state.StoreContainer, null, (0, _react2.jsx)(_datasourceExperienceId.DatasourceExperienceIdProvider, null, (0, _react2.jsx)(DatasourceTableViewWithoutAnalytics, props)));
-});
+var DatasourceTableViewNew = (0, _analyticsNext.withAnalyticsContext)(_constants.componentMetadata.tableView)(function (props) {
+  return /*#__PURE__*/React.createElement(_state.StoreContainer, null, /*#__PURE__*/React.createElement(_datasourceExperienceId.DatasourceExperienceIdProvider, null, /*#__PURE__*/React.createElement(DatasourceTableViewWithoutAnalytics, props)));
+});
+var DatasourceTableView = exports.DatasourceTableView = function DatasourceTableView(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(DatasourceTableViewNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_datasourceTableViewOld.DatasourceTableViewOld, props);
+  }
+};

package/dist/cjs/ui/datasource-table-view/datasourceTableViewOld.js

@@ -0,0 +1,198 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatasourceTableViewOld = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _intlMessagesProvider = require("@atlaskit/intl-messages-provider");
+var _analytics = require("../../analytics");
+var _constants = require("../../analytics/constants");
+var _ufoExperiences = require("../../analytics/ufoExperiences");
+var _useColumnPickerRenderedFailedUfoExperience = require("../../analytics/ufoExperiences/hooks/useColumnPickerRenderedFailedUfoExperience");
+var _useDataRenderedUfoExperience = require("../../analytics/ufoExperiences/hooks/useDataRenderedUfoExperience");
+var _fetchMessagesForLocale = require("../../common/utils/locale/fetch-messages-for-locale");
+var _datasourceExperienceId = require("../../contexts/datasource-experience-id");
+var _useDatasourceTableState = require("../../hooks/useDatasourceTableState");
+var _en = _interopRequireDefault(require("../../i18n/en"));
+var _state = require("../../state");
+var _styled = require("../../ui/issue-like-table/styled");
+var _assetsModal = require("../assets-modal");
+var _accessRequired = require("../common/error-state/access-required");
+var _loadingError = require("../common/error-state/loading-error");
+var _noResults = require("../common/error-state/no-results");
+var _providerAuthRequired = require("../common/error-state/provider-auth-required");
+var _issueLikeTable = require("../issue-like-table");
+var _emptyState = _interopRequireDefault(require("../issue-like-table/empty-state"));
+var _tableFooter = require("../table-footer");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var containerStyles = (0, _react2.css)({
+  borderRadius: 'inherit'
+});
+var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAnalytics(_ref) {
+  var datasourceId = _ref.datasourceId,
+    parameters = _ref.parameters,
+    visibleColumnKeys = _ref.visibleColumnKeys,
+    onVisibleColumnKeysChange = _ref.onVisibleColumnKeysChange,
+    url = _ref.url,
+    columnCustomSizes = _ref.columnCustomSizes,
+    onColumnResize = _ref.onColumnResize,
+    wrappedColumnKeys = _ref.wrappedColumnKeys,
+    onWrappedColumnChange = _ref.onWrappedColumnChange;
+  var _useDatasourceTableSt = (0, _useDatasourceTableState.useDatasourceTableState)({
+      datasourceId: datasourceId,
+      parameters: parameters,
+      fieldKeys: visibleColumnKeys
+    }),
+    reset = _useDatasourceTableSt.reset,
+    status = _useDatasourceTableSt.status,
+    onNextPage = _useDatasourceTableSt.onNextPage,
+    responseItems = _useDatasourceTableSt.responseItems,
+    responseItemIds = _useDatasourceTableSt.responseItemIds,
+    hasNextPage = _useDatasourceTableSt.hasNextPage,
+    columns = _useDatasourceTableSt.columns,
+    defaultVisibleColumnKeys = _useDatasourceTableSt.defaultVisibleColumnKeys,
+    totalCount = _useDatasourceTableSt.totalCount,
+    loadDatasourceDetails = _useDatasourceTableSt.loadDatasourceDetails,
+    _useDatasourceTableSt2 = _useDatasourceTableSt.extensionKey,
+    extensionKey = _useDatasourceTableSt2 === void 0 ? null : _useDatasourceTableSt2,
+    providerName = _useDatasourceTableSt.providerName,
+    destinationObjectTypes = _useDatasourceTableSt.destinationObjectTypes,
+    authDetails = _useDatasourceTableSt.authDetails;
+  var _useDatasourceAnalyti = (0, _analytics.useDatasourceAnalyticsEvents)(),
+    fireEvent = _useDatasourceAnalyti.fireEvent;
+  var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
+  var visibleColumnCount = (0, _react.useRef)((visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0);
+
+  /*  Need this to make sure that the datasource in the editor gets updated new info if any edits are made in the modal
+       But we don't want to call it on initial load. This screws up useDatasourceTableState's internal
+       mechanism of initial loading. Use of ref here makes it basically work as a `componentDidUpdate` but not `componentDidMount`
+    */
+  var isInitialRender = (0, _react.useRef)(true);
+  var hasColumns = !!columns.length;
+  var isDataReady = hasColumns && responseItems.length > 0 && totalCount && totalCount > 0;
+  visibleColumnCount.current = (visibleColumnKeys === null || visibleColumnKeys === void 0 ? void 0 : visibleColumnKeys.length) || 0;
+  (0, _react.useEffect)(function () {
+    if (!isInitialRender.current) {
+      reset();
+    }
+    isInitialRender.current = false;
+  }, [reset, parameters]);
+  (0, _react.useEffect)(function () {
+    if (onVisibleColumnKeysChange && (visibleColumnKeys || []).length === 0 && defaultVisibleColumnKeys.length > 0) {
+      onVisibleColumnKeysChange(defaultVisibleColumnKeys);
+    }
+  }, [visibleColumnKeys, defaultVisibleColumnKeys, onVisibleColumnKeysChange]);
+  (0, _react.useEffect)(function () {
+    var isTableViewRenderedWithData = status === 'resolved' && isDataReady;
+    if (isTableViewRenderedWithData) {
+      fireEvent('ui.datasource.renderSuccess', {
+        extensionKey: extensionKey,
+        destinationObjectTypes: destinationObjectTypes,
+        totalItemCount: totalCount,
+        displayedColumnCount: visibleColumnCount.current,
+        display: 'table'
+      });
+    }
+  }, [totalCount, fireEvent, status, extensionKey, destinationObjectTypes, isDataReady]);
+  (0, _react.useEffect)(function () {
+    var shouldStartUfoExperience = datasourceId && parameters && visibleColumnKeys && status === 'loading';
+    if (shouldStartUfoExperience) {
+      (0, _ufoExperiences.startUfoExperience)({
+        name: 'datasource-rendered'
+      }, experienceId);
+    }
+  }, [datasourceId, parameters, status, experienceId, visibleColumnKeys]);
+  (0, _useColumnPickerRenderedFailedUfoExperience.useColumnPickerRenderedFailedUfoExperience)(status, experienceId);
+  (0, _useDataRenderedUfoExperience.useDataRenderedUfoExperience)({
+    status: status,
+    experienceId: experienceId,
+    itemCount: responseItems.length,
+    extensionKey: extensionKey
+  });
+  var forcedReset = (0, _react.useCallback)(function () {
+    reset({
+      shouldForceRequest: true,
+      shouldResetColumns: datasourceId === _assetsModal.ASSETS_LIST_OF_LINKS_DATASOURCE_ID
+    });
+  }, [reset, datasourceId]);
+  var onRefresh = (0, _react.useCallback)(function () {
+    fireEvent('ui.button.clicked.sync', {
+      extensionKey: extensionKey,
+      destinationObjectTypes: destinationObjectTypes
+    });
+    forcedReset();
+  }, [destinationObjectTypes, extensionKey, fireEvent, forcedReset]);
+  var handleErrorRefresh = (0, _react.useCallback)(function () {
+    reset({
+      shouldForceRequest: true
+    });
+  }, [reset]);
+  if (status === 'resolved' && !responseItems.length || status === 'forbidden') {
+    return (0, _react2.jsx)(_noResults.NoResults, {
+      onRefresh: handleErrorRefresh
+    });
+  }
+  if (status === 'unauthorized') {
+    return authDetails !== null && authDetails !== void 0 && authDetails.length && authDetails.length > 0 ? (0, _react2.jsx)(_providerAuthRequired.ProviderAuthRequired, {
+      auth: authDetails,
+      extensionKey: extensionKey,
+      providerName: providerName,
+      onAuthSuccess: forcedReset,
+      onAuthError: forcedReset,
+      datasourceId: datasourceId
+    }) : (0, _react2.jsx)(_accessRequired.AccessRequired, {
+      url: url
+    });
+  }
+  if (status === 'rejected') {
+    return (0, _react2.jsx)(_loadingError.LoadingError, {
+      onRefresh: handleErrorRefresh
+    });
+  }
+  return (0, _react2.jsx)(_intlMessagesProvider.IntlMessagesProvider, {
+    defaultMessages: _en.default,
+    loaderFn: _fetchMessagesForLocale.fetchMessagesForLocale
+  }, (0, _react2.jsx)("div", {
+    css: containerStyles,
+    className: "datasource-table"
+  }, hasColumns ? (0, _react2.jsx)(_issueLikeTable.IssueLikeDataTableView, {
+    testId: 'datasource-table-view',
+    hasNextPage: hasNextPage,
+    items: responseItems,
+    itemIds: responseItemIds,
+    onNextPage: onNextPage,
+    onLoadDatasourceDetails: loadDatasourceDetails,
+    status: status,
+    columns: columns,
+    visibleColumnKeys: visibleColumnKeys || defaultVisibleColumnKeys,
+    onVisibleColumnKeysChange: onVisibleColumnKeysChange,
+    columnCustomSizes: columnCustomSizes,
+    onColumnResize: onColumnResize,
+    wrappedColumnKeys: wrappedColumnKeys,
+    onWrappedColumnChange: onWrappedColumnChange,
+    scrollableContainerHeight: _styled.ScrollableContainerHeight,
+    extensionKey: extensionKey
+  }) : (0, _react2.jsx)(_emptyState.default, {
+    testId: "datasource-table-view-skeleton",
+    isCompact: true
+  }), (0, _react2.jsx)(_tableFooter.TableFooter, {
+    datasourceId: datasourceId,
+    itemCount: isDataReady ? totalCount : undefined,
+    onRefresh: onRefresh,
+    isLoading: !isDataReady || status === 'loading',
+    url: url
+  })));
+};
+var DatasourceTableViewOld = exports.DatasourceTableViewOld = (0, _analyticsNext.withAnalyticsContext)(_constants.componentMetadata.tableView)(function (props) {
+  return (0, _react2.jsx)(_state.StoreContainer, null, (0, _react2.jsx)(_datasourceExperienceId.DatasourceExperienceIdProvider, null, (0, _react2.jsx)(DatasourceTableViewWithoutAnalytics, props)));
+});

package/dist/cjs/ui/issue-like-table/column-picker/column-picker-old.js

@@ -0,0 +1,184 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ColumnPickerOld = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
+var _board = _interopRequireDefault(require("@atlaskit/icon/core/migration/board"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _primitives = require("@atlaskit/primitives");
+var _select = require("@atlaskit/select");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _ufoExperiences = require("../../../analytics/ufoExperiences");
+var _datasourceExperienceId = require("../../../contexts/datasource-experience-id");
+var _concatenatedMenuList = require("./concatenated-menu-list");
+var _messages = require("./messages");
+var _excluded = ["isOpen"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var chevronIconStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  alignItems: 'center'
+});
+var ColumnPickerOld = exports.ColumnPickerOld = function ColumnPickerOld(_ref) {
+  var columns = _ref.columns,
+    selectedColumnKeys = _ref.selectedColumnKeys,
+    onSelectedColumnKeysChange = _ref.onSelectedColumnKeysChange,
+    onOpen = _ref.onOpen;
+  var intl = (0, _reactIntlNext.useIntl)();
+  var experienceId = (0, _datasourceExperienceId.useDatasourceExperienceId)();
+  var _useState = (0, _react.useState)([]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    allOptions = _useState2[0],
+    setAllOptions = _useState2[1];
+  var pickerRef = (0, _react.useRef)(null);
+  var mapColumnToOption = (0, _react.useCallback)(function (_ref2) {
+    var key = _ref2.key,
+      title = _ref2.title;
+    return {
+      label: title,
+      value: key
+    };
+  }, []);
+  var selectedOptions = columns.filter(function (_ref3) {
+    var key = _ref3.key;
+    return selectedColumnKeys.includes(key);
+  }).map(mapColumnToOption);
+  (0, _react.useEffect)(function () {
+    setAllOptions(columns.filter(function (_ref4) {
+      var title = _ref4.title;
+      return title;
+    }).map(mapColumnToOption));
+  }, [columns, mapColumnToOption]);
+  var handleChange = (0, _react.useCallback)(function (selectedOptions) {
+    var selectedValues = selectedOptions.map(function (_ref5) {
+      var value = _ref5.value;
+      return value;
+    });
+    selectedValues.sort(function (a, b) {
+      var indexB = columns.findIndex(function (_ref6) {
+        var key = _ref6.key;
+        return key === b;
+      });
+      var indexA = columns.findIndex(function (_ref7) {
+        var key = _ref7.key;
+        return key === a;
+      });
+      return indexA - indexB;
+    });
+    onSelectedColumnKeysChange(selectedValues);
+  }, [columns, onSelectedColumnKeysChange]);
+  var sortSelectedColumnsTop = (0, _react.useCallback)(function () {
+    if (!allOptions.length) {
+      return;
+    }
+    var nonSelectedOptions = allOptions.filter(function (option) {
+      return !selectedOptions.find(function (selectedOption) {
+        return selectedOption.value === option.value;
+      });
+    });
+    var sortedOptions = [].concat((0, _toConsumableArray2.default)(selectedOptions), (0, _toConsumableArray2.default)(nonSelectedOptions));
+    sortedOptions.length > 0 && setAllOptions(sortedOptions);
+  }, [allOptions, selectedOptions]);
+  var stopEscapePropagationWhenOpen = function stopEscapePropagationWhenOpen(e) {
+    if (e.key === 'Escape') {
+      e.stopPropagation();
+    }
+  };
+  var handleOpen = (0, _react.useCallback)(function () {
+    onOpen && onOpen();
+    void sortSelectedColumnsTop();
+  }, [onOpen, sortSelectedColumnsTop]);
+
+  // If only 1 option is selected, disable it since we don't want user to uncheck everything
+  var handleIsOptionDisabled = function handleIsOptionDisabled(option, selectValue) {
+    return selectValue.length === 1 && selectValue.some(function (selectedValue) {
+      return selectedValue.value === option.value;
+    });
+  };
+  (0, _react.useEffect)(function () {
+    if (allOptions.length) {
+      var _pickerRef$current;
+      // necessary to refocus the search input after the loading state
+      pickerRef === null || pickerRef === void 0 || (_pickerRef$current = pickerRef.current) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.selectRef) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.select) === null || _pickerRef$current === void 0 || (_pickerRef$current = _pickerRef$current.inputRef) === null || _pickerRef$current === void 0 || _pickerRef$current.focus();
+    }
+  }, [allOptions]);
+  (0, _react.useEffect)(function () {
+    if (allOptions.length) {
+      if (experienceId) {
+        (0, _ufoExperiences.succeedUfoExperience)({
+          name: 'column-picker-rendered'
+        }, experienceId);
+      }
+    }
+  }, [allOptions, experienceId]);
+  return (0, _react2.jsx)(_select.PopupSelect, {
+    classNamePrefix: 'column-picker-popup',
+    testId: 'column-picker-popup',
+    components: {
+      Option: _select.CheckboxOption,
+      MenuList: _concatenatedMenuList.ConcatenatedMenuList
+    },
+    filterOption: (0, _select.createFilter)({
+      ignoreAccents: false
+    }),
+    options: allOptions,
+    value: selectedOptions
+    // @ts-ignore - https://product-fabric.atlassian.net/browse/DSP-21000
+    ,
+    onOpen: handleOpen,
+    closeMenuOnSelect: false,
+    hideSelectedOptions: false,
+    id: 'column-picker-popup',
+    isMulti: true,
+    ref: pickerRef,
+    isOptionDisabled: handleIsOptionDisabled,
+    placeholder: intl.formatMessage(_messages.columnPickerMessages.search),
+    onKeyDown: stopEscapePropagationWhenOpen,
+    label: "Search for fields",
+    onChange: handleChange,
+    isLoading: allOptions.length === 0,
+    target: function target(_ref8) {
+      var isOpen = _ref8.isOpen,
+        triggerProps = (0, _objectWithoutProperties2.default)(_ref8, _excluded);
+      return (0, _react2.jsx)(_tooltip.default, {
+        content: intl.formatMessage(_messages.columnPickerMessages.tooltip)
+      }, function (tooltipProps) {
+        return (0, _react2.jsx)(_new.default, (0, _extends2.default)({}, tooltipProps, triggerProps, {
+          isSelected: isOpen,
+          spacing: "compact",
+          appearance: "subtle",
+          testId: "column-picker-trigger-button",
+          iconBefore: function iconBefore() {
+            return (0, _react2.jsx)(_primitives.Box, {
+              as: "span",
+              xcss: chevronIconStyles
+            }, (0, _react2.jsx)(_board.default, {
+              color: "currentColor",
+              label: "board",
+              LEGACY_size: "medium",
+              spacing: "spacious",
+              LEGACY_margin: "0 0 0 4px"
+            }), (0, _react2.jsx)(_chevronDown.default, {
+              color: "currentColor",
+              label: "down",
+              LEGACY_size: "medium"
+            }));
+          }
+        }), '');
+      });
+    }
+  });
+};

package/dist/cjs/ui/issue-like-table/column-picker/concatenated-menu-list-old.js

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SELECT_ITEMS_MAXIMUM_THRESHOLD = exports.ConcatenatedMenuListOld = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _select = require("@atlaskit/select");
+var _typography = require("@atlaskit/theme/typography");
+var _messages = require("./messages");
+var _excluded = ["children"];
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var SELECT_ITEMS_MAXIMUM_THRESHOLD = exports.SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
+var messageStyles = (0, _react.css)({
+  color: "var(--ds-text-subtle, #44546F)",
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+  font: "var(--ds-font-body-small, ".concat(_typography.fontFallback.body.small, ")"),
+  fontWeight: "var(--ds-font-weight-regular, 400)"
+});
+var ConcatenatedMenuListOld = exports.ConcatenatedMenuListOld = function ConcatenatedMenuListOld(_ref) {
+  var children = _ref.children,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var shouldUseDefaultMenuList = !children || !Array.isArray(children) || children.length <= SELECT_ITEMS_MAXIMUM_THRESHOLD;
+  if (shouldUseDefaultMenuList) {
+    return (0, _react.jsx)(_select.components.MenuList, props, children);
+  }
+  var optionStyle = {
+    padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-200, 16px)"),
+    height: 'auto'
+  };
+  var maximumLimitReachedMessage =
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  (0, _react.jsx)("div", {
+    css: messageStyles,
+    style: optionStyle
+  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({
+    tagName: 'div'
+  }, _messages.columnPickerMessages.maximumItemsShownLine1)), (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({
+    tagName: 'div'
+  }, _messages.columnPickerMessages.maximumItemsShownLine2)));
+  return (0, _react.jsx)(_select.components.MenuList, props, children.slice(0, SELECT_ITEMS_MAXIMUM_THRESHOLD), maximumLimitReachedMessage);
+};

package/dist/cjs/ui/issue-like-table/column-picker/concatenated-menu-list.compiled.css

@@ -0,0 +1,6 @@
+._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
+._u6rd4rgb font{-u-n-s-a-f-e_small:normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
+._v2gl1m4d font{small:normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
+._x3fx1ryd font{medium:normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}
+._zzcc92k5 font{large:normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif}

package/dist/cjs/ui/issue-like-table/column-picker/concatenated-menu-list.js

@@ -1,50 +1,53 @@
+/* concatenated-menu-list.tsx generated by @compiled/babel-plugin v0.36.0 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SELECT_ITEMS_MAXIMUM_THRESHOLD = exports.ConcatenatedMenuList = void 0;
+require("./concatenated-menu-list.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 var _typography = require("@atlaskit/theme/typography");
+var _concatenatedMenuListOld = require("./concatenated-menu-list-old");
 var _messages = require("./messages");
 var _excluded = ["children"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+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; }
 var SELECT_ITEMS_MAXIMUM_THRESHOLD = exports.SELECT_ITEMS_MAXIMUM_THRESHOLD = 200;
-var messageStyles = (0, _react.css)({
-  color: "var(--ds-text-subtle, #44546F)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-  font: "var(--ds-font-body-small, ".concat(_typography.fontFallback.body.small, ")"),
-  fontWeight: "var(--ds-font-weight-regular, 400)"
-});
-var ConcatenatedMenuList = exports.ConcatenatedMenuList = function ConcatenatedMenuList(_ref) {
+var messageStyles = null;
+var ConcatenatedMenuListNew = function ConcatenatedMenuListNew(_ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var shouldUseDefaultMenuList = !children || !Array.isArray(children) || children.length <= SELECT_ITEMS_MAXIMUM_THRESHOLD;
   if (shouldUseDefaultMenuList) {
-    return (0, _react.jsx)(_select.components.MenuList, props, children);
+    return /*#__PURE__*/React.createElement(_select.components.MenuList, props, children);
   }
   var optionStyle = {
     padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-200, 16px)"),
     height: 'auto'
   };
-  var maximumLimitReachedMessage =
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-  (0, _react.jsx)("div", {
-    css: messageStyles,
-    style: optionStyle
-  }, (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({
+  var maximumLimitReachedMessage = /*#__PURE__*/React.createElement("div", {
+    style: optionStyle,
+    className: (0, _runtime.ax)(["_syaz1gjq _k48pi7a9 _zzcc92k5 _x3fx1ryd _u6rd4rgb _v2gl1m4d"])
+  }, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({
     tagName: 'div'
-  }, _messages.columnPickerMessages.maximumItemsShownLine1)), (0, _react.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({
+  }, _messages.columnPickerMessages.maximumItemsShownLine1)), /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({
     tagName: 'div'
   }, _messages.columnPickerMessages.maximumItemsShownLine2)));
-  return (0, _react.jsx)(_select.components.MenuList, props, children.slice(0, SELECT_ITEMS_MAXIMUM_THRESHOLD), maximumLimitReachedMessage);
+  return /*#__PURE__*/React.createElement(_select.components.MenuList, props, children.slice(0, SELECT_ITEMS_MAXIMUM_THRESHOLD), maximumLimitReachedMessage);
+};
+var ConcatenatedMenuList = exports.ConcatenatedMenuList = function ConcatenatedMenuList(props) {
+  if ((0, _platformFeatureFlags.fg)('bandicoots-compiled-migration-link-datasource')) {
+    return /*#__PURE__*/React.createElement(ConcatenatedMenuListNew, props);
+  } else {
+    return /*#__PURE__*/React.createElement(_concatenatedMenuListOld.ConcatenatedMenuListOld, props);
+  }
 };

package/dist/cjs/ui/issue-like-table/column-picker/index.compiled.css

@@ -0,0 +1,2 @@
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}