@atlaskit/link-datasource 7.5.1 → 7.5.3

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/link-datasource
 
+## 7.5.3
+
+### Patch Changes
+
+- [`0cc2e73141eea`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0cc2e73141eea) -
+  Behind the `platform-dst-top-layer` feature gate, no longer uses `@atlaskit/layering`. Open
+  overlays are found with the `@atlaskit/top-layer/page-surface` entry points instead
+  (`platform-dst-top-layer-tooltip` for tooltip). Behaviour with the gate off is unchanged.
+- Updated dependencies
+
+## 7.5.2
+
+### Patch Changes
+
+- [`9b0d8af629b68`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9b0d8af629b68) -
+  Clean up feature gate `platform_lp_sllv_table_settings_menu`. The table settings menu and bulk
+  text wrapping remain permanently enabled, including the column-picker icon button and editor
+  wrapping updates. No public API changes.
+- Updated dependencies
+
 ## 7.5.1
 
 ### Patch Changes

package/compass.yml

@@ -27,7 +27,7 @@ links:
     url: https://opsj.atlassian.net/jira/ops/teams/62c5672c-3754-4ebe-8a0f-4d1c87ded5b5/on-call
   - name: Slack Channel
     type: CHAT_CHANNEL
-    url: https://atlassian.enterprise.slack.com/archives/C09LKUEEPGT # #rovo-growth
+    url: https://atlassian.enterprise.slack.com/archives/C09LKUEEPGT #rovo-growth
   - name: Link Datasource
     type: REPOSITORY
     url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/linking-platform/link-datasource

package/dist/cjs/ui/common/modal/datasources-table-in-modal-preview/index.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _types = require("../../../../analytics/types");
 var _useUserInteractions = require("../../../../contexts/user-interactions/use-user-interactions");
 var _issueLikeDataTableView = require("../../../issue-like-table/issue-like-data-table-view");
@@ -54,9 +53,8 @@ var Table = function Table(props) {
     columnCustomSizes: columnCustomSizes,
     onColumnResize: onColumnResize,
     wrappedColumnKeys: wrappedColumnKeys,
-    onWrappedColumnChange: onWrappedColumnChange
-  }, (0, _fg.fg)('platform_lp_sllv_table_settings_menu') ? {
+    onWrappedColumnChange: onWrappedColumnChange,
     onWrappedColumnsChange: onWrappedColumnsChange
-  } : {}));
+  }));
 };
 var _default = exports.default = Table;

package/dist/cjs/ui/common/modal/datasources-table-in-modal-preview/use-column-wrapping/index.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.useColumnWrapping = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _fg = require("@atlaskit/platform-feature-flags/fg");
 var useColumnWrapping = exports.useColumnWrapping = function useColumnWrapping() {
   var initialWrappedColumnKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var _useState = (0, _react.useState)(initialWrappedColumnKeys),
@@ -15,15 +14,6 @@ var useColumnWrapping = exports.useColumnWrapping = function useColumnWrapping()
     wrappedColumnKeys = _useState2[0],
     setWrappedColumnKeys = _useState2[1];
   var onWrappedColumnChange = (0, _react.useCallback)(function (key, isWrapped) {
-    var set = new Set(wrappedColumnKeys);
-    if (isWrapped) {
-      set.add(key);
-    } else {
-      set.delete(key);
-    }
-    setWrappedColumnKeys(Array.from(set));
-  }, [wrappedColumnKeys]);
-  var onWrappedColumnChangeWithLatestState = (0, _react.useCallback)(function (key, isWrapped) {
     setWrappedColumnKeys(function (currentWrappedColumnKeys) {
       var nextWrappedColumnKeys = new Set(currentWrappedColumnKeys);
       if (isWrapped) {
@@ -37,15 +27,9 @@ var useColumnWrapping = exports.useColumnWrapping = function useColumnWrapping()
   var onWrappedColumnsChange = (0, _react.useCallback)(function (nextWrappedColumnKeys) {
     setWrappedColumnKeys(nextWrappedColumnKeys);
   }, []);
-  if ((0, _fg.fg)('platform_lp_sllv_table_settings_menu')) {
-    return {
-      wrappedColumnKeys: wrappedColumnKeys,
-      onWrappedColumnChange: onWrappedColumnChangeWithLatestState,
-      onWrappedColumnsChange: onWrappedColumnsChange
-    };
-  }
   return {
     wrappedColumnKeys: wrappedColumnKeys,
-    onWrappedColumnChange: onWrappedColumnChange
+    onWrappedColumnChange: onWrappedColumnChange,
+    onWrappedColumnsChange: onWrappedColumnsChange
   };
 };

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

@@ -273,7 +273,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
   } : {}, {
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange
-  }, onWrappedColumnsChange && (0, _fg.fg)('platform_lp_sllv_table_settings_menu') ? {
+  }, onWrappedColumnsChange ? {
     onWrappedColumnsChange: onWrappedColumnsChange
   } : {}, {
     scrollableContainerHeight: isInPDFRender ? undefined : (0, _fg.fg)('lp_enable_datasource-table-view_height_override') ? scrollableContainerHeight : DefaultScrollableContainerHeight,

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

@@ -1,4 +1,3 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -7,25 +6,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ColumnPicker = void 0;
-require("./index.compiled.css");
-var _runtime = require("@compiled/react/runtime");
 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 = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
-var _useCallbackRef = require("use-callback-ref");
-var _button = _interopRequireDefault(require("@atlaskit/button/default/button"));
-var _button2 = _interopRequireDefault(require("@atlaskit/button/icon/button"));
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/core/chevron-down"));
-var _customize = _interopRequireDefault(require("@atlaskit/icon/core/customize"));
+var _button = _interopRequireDefault(require("@atlaskit/button/icon/button"));
 var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
-var _fg = require("@atlaskit/platform-feature-flags/fg");
-var _box = require("@atlaskit/primitives/compiled/box");
 var _filters = require("@atlaskit/react-select/filters");
 var _popupSelect = require("@atlaskit/select/popup-select");
-var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _succeedUfoExperience = require("../../../analytics/ufoExperiences/succeedUfoExperience");
 var _useDatasourceExperienceId = require("../../../contexts/datasource-experience-id/use-datasource-experience-id");
 var _concatenatedMenuList = require("./concatenated-menu-list");
@@ -33,9 +23,6 @@ var _menuItem = require("./menu-item");
 var _messages = require("./messages");
 var _excluded = ["isOpen"];
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var styles = {
-  customizeIcon: "_s7n4nkob"
-};
 var ColumnPicker = exports.ColumnPicker = function ColumnPicker(_ref) {
   var columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
@@ -155,43 +142,15 @@ var ColumnPicker = exports.ColumnPicker = function ColumnPicker(_ref) {
     target: function target(_ref8) {
       var isOpen = _ref8.isOpen,
         triggerProps = (0, _objectWithoutProperties2.default)(_ref8, _excluded);
-      if ((0, _fg.fg)('platform_lp_sllv_table_settings_menu')) {
-        return /*#__PURE__*/_react.default.createElement(_button2.default, (0, _extends2.default)({}, triggerProps, {
-          appearance: "default",
-          icon: _tableColumnsDistribute.default,
-          isSelected: isOpen,
-          isTooltipDisabled: false,
-          label: intl.formatMessage(_messages.columnPickerMessages.tooltip),
-          spacing: "default",
-          testId: "column-picker-trigger-button"
-        }));
-      }
-      return /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-        content: intl.formatMessage(_messages.columnPickerMessages.tooltip)
-      }, function (tooltipProps) {
-        return /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({}, tooltipProps, triggerProps, {
-          // `tooltipProps.ref` must be included: spreading `triggerProps` after
-          // `tooltipProps` drops the tooltip's ref, leaving Tooltip without an
-          // anchor element. Gate off leaves `triggerProps.ref` winning, exactly as
-          // master does.
-          ref: (0, _fg.fg)('platform-dst-top-layer-tooltip') ? (0, _useCallbackRef.mergeRefs)([triggerProps.ref, tooltipProps.ref]) : triggerProps.ref,
-          isSelected: isOpen,
-          spacing: "compact",
-          appearance: 'default',
-          testId: "column-picker-trigger-button",
-          iconAfter: function iconAfter() {
-            return /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
-              label: "down",
-              size: "small"
-            });
-          }
-        }), /*#__PURE__*/_react.default.createElement(_box.Box, {
-          as: "span",
-          xcss: styles.customizeIcon
-        }, /*#__PURE__*/_react.default.createElement(_customize.default, {
-          label: "customize"
-        })));
-      });
+      return /*#__PURE__*/_react.default.createElement(_button.default, (0, _extends2.default)({}, triggerProps, {
+        appearance: "default",
+        icon: _tableColumnsDistribute.default,
+        isSelected: isOpen,
+        isTooltipDisabled: false,
+        label: intl.formatMessage(_messages.columnPickerMessages.tooltip),
+        spacing: "default",
+        testId: "column-picker-trigger-button"
+      }));
     }
   });
 };

package/dist/cjs/ui/issue-like-table/edit-type/icon/index.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _layering = require("@atlaskit/layering/layering");
 var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _failUfoExperience = require("../../../../analytics/ufoExperiences/failUfoExperience");
@@ -18,6 +17,7 @@ var _useLoadOptions2 = require("../../../../hooks/useLoadOptions");
 var _getCleanedSelectProps = require("../../get-cleaned-select-props");
 var _icon = require("../../shared-components/icon");
 var _inlineEdit = require("../../table-cell-content/inline-edit");
+var _inlineEditLayer = require("../inline-edit-layer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var IconEditType = function IconEditType(props) {
   var _currentValue$values;
@@ -45,9 +45,7 @@ var IconEditType = function IconEditType(props) {
       }, experienceId);
     }
   }, [experienceId, isLoading, hasFailed]);
-  return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
-    isDisabled: false
-  }, /*#__PURE__*/_react.default.createElement(_default2.default, (0, _extends2.default)({}, (0, _getCleanedSelectProps.getCleanedSelectProps)(props), {
+  return /*#__PURE__*/_react.default.createElement(_inlineEditLayer.InlineEditLayer, null, /*#__PURE__*/_react.default.createElement(_default2.default, (0, _extends2.default)({}, (0, _getCleanedSelectProps.getCleanedSelectProps)(props), {
     menuPortalTarget: document.body,
     autoFocus: true,
     blurInputOnSelect: true,

package/dist/cjs/ui/issue-like-table/edit-type/inline-edit-layer/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineEditLayer = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _layering = require("@atlaskit/layering/layering");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
+var _hasOpenDialogOrPopover = require("@atlaskit/top-layer/page-surface/has-open-dialog-or-popover");
+var _requestClosePopovers = require("@atlaskit/top-layer/page-surface/request-close-popovers");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+/**
+ * Wraps an inline edit view, so that Escape cancels the edit and does not close a containing modal.
+ */
+var InlineEditLayer = exports.InlineEditLayer = function InlineEditLayer(_ref) {
+  var children = _ref.children;
+  var onKeyDown = (0, _react.useCallback)(function (event) {
+    if (event.key !== 'Escape') {
+      return;
+    }
+
+    // An open menu takes the first Escape, and the edit stays open (as with layering).
+    if ((0, _hasOpenDialogOrPopover.hasOpenDialogOrPopover)({
+      within: event.currentTarget
+    })) {
+      event.stopPropagation();
+      event.preventDefault();
+      (0, _requestClosePopovers.requestClosePopovers)({
+        within: event.currentTarget
+      });
+      return;
+    }
+
+    // The inline edit form still cancels the edit. A containing modal ignores a prevented Escape.
+    event.preventDefault();
+  }, []);
+  if (!(0, _fg.fg)('platform-dst-top-layer')) {
+    // The Escape handler of a containing modal yields while this layer is open.
+    return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
+      isDisabled: false
+    }, children);
+  }
+  return /*#__PURE__*/_react.default.createElement("div", {
+    role: "presentation",
+    onKeyDown: onKeyDown
+  }, children);
+};

package/dist/cjs/ui/issue-like-table/edit-type/status/index.js

@@ -8,7 +8,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _layering = require("@atlaskit/layering/layering");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge/new/lozenge"));
 var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
@@ -18,6 +17,7 @@ var _useDatasourceExperienceId = require("../../../../contexts/datasource-experi
 var _useLoadOptions2 = require("../../../../hooks/useLoadOptions");
 var _getCleanedSelectProps = require("../../get-cleaned-select-props");
 var _inlineEdit = require("../../table-cell-content/inline-edit");
+var _inlineEditLayer = require("../inline-edit-layer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var StatusEditType = function StatusEditType(props) {
   var _currentValue$values;
@@ -45,9 +45,7 @@ var StatusEditType = function StatusEditType(props) {
       }, experienceId);
     }
   }, [experienceId, isLoading, hasFailed]);
-  return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
-    isDisabled: false
-  }, /*#__PURE__*/_react.default.createElement(_default2.default, (0, _extends2.default)({}, (0, _getCleanedSelectProps.getCleanedSelectProps)(props), {
+  return /*#__PURE__*/_react.default.createElement(_inlineEditLayer.InlineEditLayer, null, /*#__PURE__*/_react.default.createElement(_default2.default, (0, _extends2.default)({}, (0, _getCleanedSelectProps.getCleanedSelectProps)(props), {
     menuPortalTarget: document.body,
     autoFocus: true,
     options: options,

package/dist/cjs/ui/issue-like-table/edit-type/text/index.js

@@ -8,10 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
-var _layering = require("@atlaskit/layering/layering");
 var _textField = _interopRequireDefault(require("@atlaskit/textfield/text-field"));
 var _succeedUfoExperience = require("../../../../analytics/ufoExperiences/succeedUfoExperience");
 var _useDatasourceExperienceId = require("../../../../contexts/datasource-experience-id/use-datasource-experience-id");
+var _inlineEditLayer = require("../inline-edit-layer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var TextEditType = function TextEditType(props) {
   var _currentValue$values$, _currentValue$values;
@@ -25,9 +25,7 @@ var TextEditType = function TextEditType(props) {
       }, experienceId);
     }
   }, [experienceId]);
-  return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
-    isDisabled: false
-  }, /*#__PURE__*/_react.default.createElement(_textField.default, (0, _extends2.default)({}, props, {
+  return /*#__PURE__*/_react.default.createElement(_inlineEditLayer.InlineEditLayer, null, /*#__PURE__*/_react.default.createElement(_textField.default, (0, _extends2.default)({}, props, {
     autoFocus: true,
     isCompact: true,
     testId: "inline-edit-text",

package/dist/cjs/ui/issue-like-table/edit-type/user/index.js

@@ -13,7 +13,6 @@ var _reactIntl = require("react-intl");
 var _useDebounce = require("use-debounce");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar/avatar"));
 var _avatarItem = _interopRequireDefault(require("@atlaskit/avatar/avatar-item"));
-var _layering = require("@atlaskit/layering/layering");
 var _default2 = _interopRequireDefault(require("@atlaskit/select/default"));
 var _Tooltip = _interopRequireDefault(require("@atlaskit/tooltip/Tooltip"));
 var _failUfoExperience = require("../../../../analytics/ufoExperiences/failUfoExperience");
@@ -25,6 +24,7 @@ var _getCleanedSelectProps = require("../../get-cleaned-select-props");
 var _user = require("../../render-type/user");
 var _messages = require("../../render-type/user/messages");
 var _inlineEdit = require("../../table-cell-content/inline-edit");
+var _inlineEditLayer = require("../inline-edit-layer");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var UserEditType = function UserEditType(props) {
   var _currentValue$values;
@@ -76,9 +76,7 @@ var UserEditType = function UserEditType(props) {
       }, experienceId);
     }
   }, [experienceId, isLoading, hasFailed]);
-  return /*#__PURE__*/_react.default.createElement(_layering.Layering, {
-    isDisabled: false
-  }, /*#__PURE__*/_react.default.createElement(_default2.default, (0, _extends2.default)({}, (0, _getCleanedSelectProps.getCleanedSelectProps)(props), {
+  return /*#__PURE__*/_react.default.createElement(_inlineEditLayer.InlineEditLayer, null, /*#__PURE__*/_react.default.createElement(_default2.default, (0, _extends2.default)({}, (0, _getCleanedSelectProps.getCleanedSelectProps)(props), {
     menuPortalTarget: document.body,
     autoFocus: true,
     defaultMenuIsOpen: true,

package/dist/cjs/ui/issue-like-table/issue-like-data-table-view.js

@@ -25,7 +25,6 @@ var _flagsProvider = require("@atlaskit/flag/flags-provider");
 var _sortAscending = _interopRequireDefault(require("@atlaskit/icon/core/sort-ascending"));
 var _sortDescending = _interopRequireDefault(require("@atlaskit/icon/core/sort-descending"));
 var _skeleton = require("@atlaskit/linking-common/skeleton");
-var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _extractClosestEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge/extract-closest-edge");
 var _reorderWithEdge = require("@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge");
 var _autoScroller = require("@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll/auto-scroller");
@@ -297,7 +296,7 @@ var IssueLikeDataTableView = exports.IssueLikeDataTableView = function IssueLike
       });
     }).filter(Boolean);
   }, [orderedColumns, visibleColumnKeys]);
-  var isWrapTextSettingAvailable = Boolean(onWrappedColumnsChange) && (0, _fg.fg)('platform_lp_sllv_table_settings_menu');
+  var isWrapTextSettingAvailable = Boolean(onWrappedColumnsChange);
   var areAllVisibleColumnsWrapped = false;
   if (isWrapTextSettingAvailable) {
     areAllVisibleColumnsWrapped = visibleColumnKeys.length > 0 && visibleColumnKeys.every(function (columnKey) {

package/dist/es2019/ui/common/modal/datasources-table-in-modal-preview/index.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { DatasourceAction } from '../../../../analytics/types';
 import { useUserInteractions } from '../../../../contexts/user-interactions/use-user-interactions';
 import { IssueLikeDataTableView } from '../../../issue-like-table/issue-like-data-table-view';
@@ -45,9 +44,8 @@ const Table = props => {
     columnCustomSizes: columnCustomSizes,
     onColumnResize: onColumnResize,
     wrappedColumnKeys: wrappedColumnKeys,
-    onWrappedColumnChange: onWrappedColumnChange
-  }, fg('platform_lp_sllv_table_settings_menu') ? {
-    onWrappedColumnsChange
-  } : {}));
+    onWrappedColumnChange: onWrappedColumnChange,
+    onWrappedColumnsChange: onWrappedColumnsChange
+  }));
 };
 export default Table;

package/dist/es2019/ui/common/modal/datasources-table-in-modal-preview/use-column-wrapping/index.js

@@ -1,17 +1,7 @@
 import { useCallback, useState } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 export const useColumnWrapping = (initialWrappedColumnKeys = []) => {
   const [wrappedColumnKeys, setWrappedColumnKeys] = useState(initialWrappedColumnKeys);
   const onWrappedColumnChange = useCallback((key, isWrapped) => {
-    const set = new Set(wrappedColumnKeys);
-    if (isWrapped) {
-      set.add(key);
-    } else {
-      set.delete(key);
-    }
-    setWrappedColumnKeys(Array.from(set));
-  }, [wrappedColumnKeys]);
-  const onWrappedColumnChangeWithLatestState = useCallback((key, isWrapped) => {
     setWrappedColumnKeys(currentWrappedColumnKeys => {
       const nextWrappedColumnKeys = new Set(currentWrappedColumnKeys);
       if (isWrapped) {
@@ -25,15 +15,9 @@ export const useColumnWrapping = (initialWrappedColumnKeys = []) => {
   const onWrappedColumnsChange = useCallback(nextWrappedColumnKeys => {
     setWrappedColumnKeys(nextWrappedColumnKeys);
   }, []);
-  if (fg('platform_lp_sllv_table_settings_menu')) {
-    return {
-      wrappedColumnKeys,
-      onWrappedColumnChange: onWrappedColumnChangeWithLatestState,
-      onWrappedColumnsChange
-    };
-  }
   return {
     wrappedColumnKeys,
-    onWrappedColumnChange
+    onWrappedColumnChange,
+    onWrappedColumnsChange
   };
 };

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

@@ -258,7 +258,7 @@ const DatasourceTableViewWithoutAnalytics = ({
   } : {}, {
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange
-  }, onWrappedColumnsChange && fg('platform_lp_sllv_table_settings_menu') ? {
+  }, onWrappedColumnsChange ? {
     onWrappedColumnsChange
   } : {}, {
     scrollableContainerHeight: isInPDFRender ? undefined : fg('lp_enable_datasource-table-view_height_override') ? scrollableContainerHeight : DefaultScrollableContainerHeight,

package/dist/es2019/ui/issue-like-table/column-picker/index.js

@@ -1,28 +1,15 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
-import "./index.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { mergeRefs } from 'use-callback-ref';
-import Button from '@atlaskit/button/default/button';
 import IconButton from '@atlaskit/button/icon/button';
-import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
-import CustomizeIcon from '@atlaskit/icon/core/customize';
 import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { Box } from '@atlaskit/primitives/compiled/box';
 import { createFilter } from '@atlaskit/react-select/filters';
 import { PopupSelect } from '@atlaskit/select/popup-select';
-import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { succeedUfoExperience } from '../../../analytics/ufoExperiences/succeedUfoExperience';
 import { useDatasourceExperienceId } from '../../../contexts/datasource-experience-id/use-datasource-experience-id';
 import { ConcatenatedMenuList } from './concatenated-menu-list';
 import { MenuItem } from './menu-item';
 import { columnPickerMessages } from './messages';
-const styles = {
-  customizeIcon: "_s7n4nkob"
-};
 export const ColumnPicker = ({
   columns,
   selectedColumnKeys,
@@ -129,39 +116,15 @@ export const ColumnPicker = ({
       isOpen,
       ...triggerProps
     }) => {
-      if (fg('platform_lp_sllv_table_settings_menu')) {
-        return /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
-          appearance: "default",
-          icon: TableColumnsDistributeIcon,
-          isSelected: isOpen,
-          isTooltipDisabled: false,
-          label: intl.formatMessage(columnPickerMessages.tooltip),
-          spacing: "default",
-          testId: "column-picker-trigger-button"
-        }));
-      }
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        content: intl.formatMessage(columnPickerMessages.tooltip)
-      }, tooltipProps => /*#__PURE__*/React.createElement(Button, _extends({}, tooltipProps, triggerProps, {
-        // `tooltipProps.ref` must be included: spreading `triggerProps` after
-        // `tooltipProps` drops the tooltip's ref, leaving Tooltip without an
-        // anchor element. Gate off leaves `triggerProps.ref` winning, exactly as
-        // master does.
-        ref: fg('platform-dst-top-layer-tooltip') ? mergeRefs([triggerProps.ref, tooltipProps.ref]) : triggerProps.ref,
+      return /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
+        appearance: "default",
+        icon: TableColumnsDistributeIcon,
         isSelected: isOpen,
-        spacing: "compact",
-        appearance: 'default',
-        testId: "column-picker-trigger-button",
-        iconAfter: () => /*#__PURE__*/React.createElement(ChevronDownIcon, {
-          label: "down",
-          size: "small"
-        })
-      }), /*#__PURE__*/React.createElement(Box, {
-        as: "span",
-        xcss: styles.customizeIcon
-      }, /*#__PURE__*/React.createElement(CustomizeIcon, {
-        label: "customize"
-      }))));
+        isTooltipDisabled: false,
+        label: intl.formatMessage(columnPickerMessages.tooltip),
+        spacing: "default",
+        testId: "column-picker-trigger-button"
+      }));
     }
   });
 };

package/dist/es2019/ui/issue-like-table/edit-type/icon/index.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
-import { Layering } from '@atlaskit/layering/layering';
 import Select from '@atlaskit/select/default';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { failUfoExperience } from '../../../../analytics/ufoExperiences/failUfoExperience';
@@ -10,6 +9,7 @@ import { useLoadOptions } from '../../../../hooks/useLoadOptions';
 import { getCleanedSelectProps } from '../../get-cleaned-select-props';
 import { SharedIconComponent } from '../../shared-components/icon';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+import { InlineEditLayer } from '../inline-edit-layer';
 const IconEditType = props => {
   var _currentValue$values;
   const {
@@ -39,9 +39,7 @@ const IconEditType = props => {
       }, experienceId);
     }
   }, [experienceId, isLoading, hasFailed]);
-  return /*#__PURE__*/React.createElement(Layering, {
-    isDisabled: false
-  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
+  return /*#__PURE__*/React.createElement(InlineEditLayer, null, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
     menuPortalTarget: document.body,
     autoFocus: true,
     blurInputOnSelect: true,

package/dist/es2019/ui/issue-like-table/edit-type/inline-edit-layer/index.js

@@ -0,0 +1,43 @@
+import React, { useCallback } from 'react';
+import { Layering } from '@atlaskit/layering/layering';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { hasOpenDialogOrPopover } from '@atlaskit/top-layer/page-surface/has-open-dialog-or-popover';
+import { requestClosePopovers } from '@atlaskit/top-layer/page-surface/request-close-popovers';
+
+/**
+ * Wraps an inline edit view, so that Escape cancels the edit and does not close a containing modal.
+ */
+export const InlineEditLayer = ({
+  children
+}) => {
+  const onKeyDown = useCallback(event => {
+    if (event.key !== 'Escape') {
+      return;
+    }
+
+    // An open menu takes the first Escape, and the edit stays open (as with layering).
+    if (hasOpenDialogOrPopover({
+      within: event.currentTarget
+    })) {
+      event.stopPropagation();
+      event.preventDefault();
+      requestClosePopovers({
+        within: event.currentTarget
+      });
+      return;
+    }
+
+    // The inline edit form still cancels the edit. A containing modal ignores a prevented Escape.
+    event.preventDefault();
+  }, []);
+  if (!fg('platform-dst-top-layer')) {
+    // The Escape handler of a containing modal yields while this layer is open.
+    return /*#__PURE__*/React.createElement(Layering, {
+      isDisabled: false
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    onKeyDown: onKeyDown
+  }, children);
+};

package/dist/es2019/ui/issue-like-table/edit-type/status/index.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
-import { Layering } from '@atlaskit/layering/layering';
 import Lozenge from '@atlaskit/lozenge/new/lozenge';
 import Select from '@atlaskit/select/default';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
@@ -10,6 +9,7 @@ import { useDatasourceExperienceId } from '../../../../contexts/datasource-exper
 import { useLoadOptions } from '../../../../hooks/useLoadOptions';
 import { getCleanedSelectProps } from '../../get-cleaned-select-props';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+import { InlineEditLayer } from '../inline-edit-layer';
 const StatusEditType = props => {
   var _currentValue$values;
   const {
@@ -39,9 +39,7 @@ const StatusEditType = props => {
       }, experienceId);
     }
   }, [experienceId, isLoading, hasFailed]);
-  return /*#__PURE__*/React.createElement(Layering, {
-    isDisabled: false
-  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
+  return /*#__PURE__*/React.createElement(InlineEditLayer, null, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
     menuPortalTarget: document.body,
     autoFocus: true,
     options: options,

package/dist/es2019/ui/issue-like-table/edit-type/text/index.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
-import { Layering } from '@atlaskit/layering/layering';
 import Textfield from '@atlaskit/textfield/text-field';
 import { succeedUfoExperience } from '../../../../analytics/ufoExperiences/succeedUfoExperience';
 import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id/use-datasource-experience-id';
+import { InlineEditLayer } from '../inline-edit-layer';
 const TextEditType = props => {
   var _currentValue$values$, _currentValue$values;
   const experienceId = useDatasourceExperienceId();
@@ -18,9 +18,7 @@ const TextEditType = props => {
       }, experienceId);
     }
   }, [experienceId]);
-  return /*#__PURE__*/React.createElement(Layering, {
-    isDisabled: false
-  }, /*#__PURE__*/React.createElement(Textfield, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(InlineEditLayer, null, /*#__PURE__*/React.createElement(Textfield, _extends({}, props, {
     autoFocus: true,
     isCompact: true,
     testId: "inline-edit-text",

package/dist/es2019/ui/issue-like-table/edit-type/user/index.js

@@ -4,7 +4,6 @@ import { useIntl } from 'react-intl';
 import { useDebouncedCallback } from 'use-debounce';
 import Avatar from '@atlaskit/avatar/avatar';
 import AvatarItem from '@atlaskit/avatar/avatar-item';
-import { Layering } from '@atlaskit/layering/layering';
 import Select from '@atlaskit/select/default';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { failUfoExperience } from '../../../../analytics/ufoExperiences/failUfoExperience';
@@ -16,6 +15,7 @@ import { getCleanedSelectProps } from '../../get-cleaned-select-props';
 import { USER_TYPE_TEST_ID } from '../../render-type/user';
 import { userTypeMessages } from '../../render-type/user/messages';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+import { InlineEditLayer } from '../inline-edit-layer';
 const UserEditType = props => {
   var _currentValue$values;
   const {
@@ -61,9 +61,7 @@ const UserEditType = props => {
       }, experienceId);
     }
   }, [experienceId, isLoading, hasFailed]);
-  return /*#__PURE__*/React.createElement(Layering, {
-    isDisabled: false
-  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
+  return /*#__PURE__*/React.createElement(InlineEditLayer, null, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
     menuPortalTarget: document.body,
     autoFocus: true,
     defaultMenuIsOpen: true,

package/dist/es2019/ui/issue-like-table/issue-like-data-table-view.js

@@ -14,7 +14,6 @@ import { FlagsProvider } from '@atlaskit/flag/flags-provider';
 import SortAscendingIcon from '@atlaskit/icon/core/sort-ascending';
 import SortDescendingIcon from '@atlaskit/icon/core/sort-descending';
 import { Skeleton } from '@atlaskit/linking-common/skeleton';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge/extract-closest-edge';
 import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll/auto-scroller';
@@ -262,7 +261,7 @@ export const IssueLikeDataTableView = ({
   const visibleSortedColumns = useMemo(() => visibleColumnKeys.map(visibleKey => orderedColumns.find(({
     key
   }) => visibleKey === key)).filter(Boolean), [orderedColumns, visibleColumnKeys]);
-  const isWrapTextSettingAvailable = Boolean(onWrappedColumnsChange) && fg('platform_lp_sllv_table_settings_menu');
+  const isWrapTextSettingAvailable = Boolean(onWrappedColumnsChange);
   let areAllVisibleColumnsWrapped = false;
   if (isWrapTextSettingAvailable) {
     areAllVisibleColumnsWrapped = visibleColumnKeys.length > 0 && visibleColumnKeys.every(columnKey => wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(columnKey));

package/dist/esm/ui/common/modal/datasources-table-in-modal-preview/index.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { DatasourceAction } from '../../../../analytics/types';
 import { useUserInteractions } from '../../../../contexts/user-interactions/use-user-interactions';
 import { IssueLikeDataTableView } from '../../../issue-like-table/issue-like-data-table-view';
@@ -45,9 +44,8 @@ var Table = function Table(props) {
     columnCustomSizes: columnCustomSizes,
     onColumnResize: onColumnResize,
     wrappedColumnKeys: wrappedColumnKeys,
-    onWrappedColumnChange: onWrappedColumnChange
-  }, fg('platform_lp_sllv_table_settings_menu') ? {
+    onWrappedColumnChange: onWrappedColumnChange,
     onWrappedColumnsChange: onWrappedColumnsChange
-  } : {}));
+  }));
 };
 export default Table;

package/dist/esm/ui/common/modal/datasources-table-in-modal-preview/use-column-wrapping/index.js

@@ -1,6 +1,5 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useState } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 export var useColumnWrapping = function useColumnWrapping() {
   var initialWrappedColumnKeys = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   var _useState = useState(initialWrappedColumnKeys),
@@ -8,15 +7,6 @@ export var useColumnWrapping = function useColumnWrapping() {
     wrappedColumnKeys = _useState2[0],
     setWrappedColumnKeys = _useState2[1];
   var onWrappedColumnChange = useCallback(function (key, isWrapped) {
-    var set = new Set(wrappedColumnKeys);
-    if (isWrapped) {
-      set.add(key);
-    } else {
-      set.delete(key);
-    }
-    setWrappedColumnKeys(Array.from(set));
-  }, [wrappedColumnKeys]);
-  var onWrappedColumnChangeWithLatestState = useCallback(function (key, isWrapped) {
     setWrappedColumnKeys(function (currentWrappedColumnKeys) {
       var nextWrappedColumnKeys = new Set(currentWrappedColumnKeys);
       if (isWrapped) {
@@ -30,15 +20,9 @@ export var useColumnWrapping = function useColumnWrapping() {
   var onWrappedColumnsChange = useCallback(function (nextWrappedColumnKeys) {
     setWrappedColumnKeys(nextWrappedColumnKeys);
   }, []);
-  if (fg('platform_lp_sllv_table_settings_menu')) {
-    return {
-      wrappedColumnKeys: wrappedColumnKeys,
-      onWrappedColumnChange: onWrappedColumnChangeWithLatestState,
-      onWrappedColumnsChange: onWrappedColumnsChange
-    };
-  }
   return {
     wrappedColumnKeys: wrappedColumnKeys,
-    onWrappedColumnChange: onWrappedColumnChange
+    onWrappedColumnChange: onWrappedColumnChange,
+    onWrappedColumnsChange: onWrappedColumnsChange
   };
 };

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

@@ -264,7 +264,7 @@ var DatasourceTableViewWithoutAnalytics = function DatasourceTableViewWithoutAna
   } : {}, {
     wrappedColumnKeys: wrappedColumnKeys,
     onWrappedColumnChange: onWrappedColumnChange
-  }, onWrappedColumnsChange && fg('platform_lp_sllv_table_settings_menu') ? {
+  }, onWrappedColumnsChange ? {
     onWrappedColumnsChange: onWrappedColumnsChange
   } : {}, {
     scrollableContainerHeight: isInPDFRender ? undefined : fg('lp_enable_datasource-table-view_height_override') ? scrollableContainerHeight : DefaultScrollableContainerHeight,

package/dist/esm/ui/issue-like-table/column-picker/index.js

@@ -1,32 +1,19 @@
-/* index.tsx generated by @compiled/babel-plugin v3.0.2 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["isOpen"];
-import "./index.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { useIntl } from 'react-intl';
-import { mergeRefs } from 'use-callback-ref';
-import Button from '@atlaskit/button/default/button';
 import IconButton from '@atlaskit/button/icon/button';
-import ChevronDownIcon from '@atlaskit/icon/core/chevron-down';
-import CustomizeIcon from '@atlaskit/icon/core/customize';
 import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
-import { Box } from '@atlaskit/primitives/compiled/box';
 import { createFilter } from '@atlaskit/react-select/filters';
 import { PopupSelect } from '@atlaskit/select/popup-select';
-import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { succeedUfoExperience } from '../../../analytics/ufoExperiences/succeedUfoExperience';
 import { useDatasourceExperienceId } from '../../../contexts/datasource-experience-id/use-datasource-experience-id';
 import { ConcatenatedMenuList } from './concatenated-menu-list';
 import { MenuItem } from './menu-item';
 import { columnPickerMessages } from './messages';
-var styles = {
-  customizeIcon: "_s7n4nkob"
-};
 export var ColumnPicker = function ColumnPicker(_ref) {
   var columns = _ref.columns,
     selectedColumnKeys = _ref.selectedColumnKeys,
@@ -146,43 +133,15 @@ export var ColumnPicker = function ColumnPicker(_ref) {
     target: function target(_ref8) {
       var isOpen = _ref8.isOpen,
         triggerProps = _objectWithoutProperties(_ref8, _excluded);
-      if (fg('platform_lp_sllv_table_settings_menu')) {
-        return /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
-          appearance: "default",
-          icon: TableColumnsDistributeIcon,
-          isSelected: isOpen,
-          isTooltipDisabled: false,
-          label: intl.formatMessage(columnPickerMessages.tooltip),
-          spacing: "default",
-          testId: "column-picker-trigger-button"
-        }));
-      }
-      return /*#__PURE__*/React.createElement(Tooltip, {
-        content: intl.formatMessage(columnPickerMessages.tooltip)
-      }, function (tooltipProps) {
-        return /*#__PURE__*/React.createElement(Button, _extends({}, tooltipProps, triggerProps, {
-          // `tooltipProps.ref` must be included: spreading `triggerProps` after
-          // `tooltipProps` drops the tooltip's ref, leaving Tooltip without an
-          // anchor element. Gate off leaves `triggerProps.ref` winning, exactly as
-          // master does.
-          ref: fg('platform-dst-top-layer-tooltip') ? mergeRefs([triggerProps.ref, tooltipProps.ref]) : triggerProps.ref,
-          isSelected: isOpen,
-          spacing: "compact",
-          appearance: 'default',
-          testId: "column-picker-trigger-button",
-          iconAfter: function iconAfter() {
-            return /*#__PURE__*/React.createElement(ChevronDownIcon, {
-              label: "down",
-              size: "small"
-            });
-          }
-        }), /*#__PURE__*/React.createElement(Box, {
-          as: "span",
-          xcss: styles.customizeIcon
-        }, /*#__PURE__*/React.createElement(CustomizeIcon, {
-          label: "customize"
-        })));
-      });
+      return /*#__PURE__*/React.createElement(IconButton, _extends({}, triggerProps, {
+        appearance: "default",
+        icon: TableColumnsDistributeIcon,
+        isSelected: isOpen,
+        isTooltipDisabled: false,
+        label: intl.formatMessage(columnPickerMessages.tooltip),
+        spacing: "default",
+        testId: "column-picker-trigger-button"
+      }));
     }
   });
 };

package/dist/esm/ui/issue-like-table/edit-type/icon/index.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
-import { Layering } from '@atlaskit/layering/layering';
 import Select from '@atlaskit/select/default';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { failUfoExperience } from '../../../../analytics/ufoExperiences/failUfoExperience';
@@ -10,6 +9,7 @@ import { useLoadOptions } from '../../../../hooks/useLoadOptions';
 import { getCleanedSelectProps } from '../../get-cleaned-select-props';
 import { SharedIconComponent } from '../../shared-components/icon';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+import { InlineEditLayer } from '../inline-edit-layer';
 var IconEditType = function IconEditType(props) {
   var _currentValue$values;
   var currentValue = props.currentValue,
@@ -36,9 +36,7 @@ var IconEditType = function IconEditType(props) {
       }, experienceId);
     }
   }, [experienceId, isLoading, hasFailed]);
-  return /*#__PURE__*/React.createElement(Layering, {
-    isDisabled: false
-  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
+  return /*#__PURE__*/React.createElement(InlineEditLayer, null, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
     menuPortalTarget: document.body,
     autoFocus: true,
     blurInputOnSelect: true,

package/dist/esm/ui/issue-like-table/edit-type/inline-edit-layer/index.js

@@ -0,0 +1,42 @@
+import React, { useCallback } from 'react';
+import { Layering } from '@atlaskit/layering/layering';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { hasOpenDialogOrPopover } from '@atlaskit/top-layer/page-surface/has-open-dialog-or-popover';
+import { requestClosePopovers } from '@atlaskit/top-layer/page-surface/request-close-popovers';
+
+/**
+ * Wraps an inline edit view, so that Escape cancels the edit and does not close a containing modal.
+ */
+export var InlineEditLayer = function InlineEditLayer(_ref) {
+  var children = _ref.children;
+  var onKeyDown = useCallback(function (event) {
+    if (event.key !== 'Escape') {
+      return;
+    }
+
+    // An open menu takes the first Escape, and the edit stays open (as with layering).
+    if (hasOpenDialogOrPopover({
+      within: event.currentTarget
+    })) {
+      event.stopPropagation();
+      event.preventDefault();
+      requestClosePopovers({
+        within: event.currentTarget
+      });
+      return;
+    }
+
+    // The inline edit form still cancels the edit. A containing modal ignores a prevented Escape.
+    event.preventDefault();
+  }, []);
+  if (!fg('platform-dst-top-layer')) {
+    // The Escape handler of a containing modal yields while this layer is open.
+    return /*#__PURE__*/React.createElement(Layering, {
+      isDisabled: false
+    }, children);
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    role: "presentation",
+    onKeyDown: onKeyDown
+  }, children);
+};

package/dist/esm/ui/issue-like-table/edit-type/status/index.js

@@ -1,6 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
-import { Layering } from '@atlaskit/layering/layering';
 import Lozenge from '@atlaskit/lozenge/new/lozenge';
 import Select from '@atlaskit/select/default';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
@@ -10,6 +9,7 @@ import { useDatasourceExperienceId } from '../../../../contexts/datasource-exper
 import { useLoadOptions } from '../../../../hooks/useLoadOptions';
 import { getCleanedSelectProps } from '../../get-cleaned-select-props';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+import { InlineEditLayer } from '../inline-edit-layer';
 var StatusEditType = function StatusEditType(props) {
   var _currentValue$values;
   var currentValue = props.currentValue,
@@ -36,9 +36,7 @@ var StatusEditType = function StatusEditType(props) {
       }, experienceId);
     }
   }, [experienceId, isLoading, hasFailed]);
-  return /*#__PURE__*/React.createElement(Layering, {
-    isDisabled: false
-  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
+  return /*#__PURE__*/React.createElement(InlineEditLayer, null, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
     menuPortalTarget: document.body,
     autoFocus: true,
     options: options,

package/dist/esm/ui/issue-like-table/edit-type/text/index.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useEffect } from 'react';
-import { Layering } from '@atlaskit/layering/layering';
 import Textfield from '@atlaskit/textfield/text-field';
 import { succeedUfoExperience } from '../../../../analytics/ufoExperiences/succeedUfoExperience';
 import { useDatasourceExperienceId } from '../../../../contexts/datasource-experience-id/use-datasource-experience-id';
+import { InlineEditLayer } from '../inline-edit-layer';
 var TextEditType = function TextEditType(props) {
   var _currentValue$values$, _currentValue$values;
   var experienceId = useDatasourceExperienceId();
@@ -16,9 +16,7 @@ var TextEditType = function TextEditType(props) {
       }, experienceId);
     }
   }, [experienceId]);
-  return /*#__PURE__*/React.createElement(Layering, {
-    isDisabled: false
-  }, /*#__PURE__*/React.createElement(Textfield, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(InlineEditLayer, null, /*#__PURE__*/React.createElement(Textfield, _extends({}, props, {
     autoFocus: true,
     isCompact: true,
     testId: "inline-edit-text",

package/dist/esm/ui/issue-like-table/edit-type/user/index.js

@@ -5,7 +5,6 @@ import { useIntl } from 'react-intl';
 import { useDebouncedCallback } from 'use-debounce';
 import Avatar from '@atlaskit/avatar/avatar';
 import AvatarItem from '@atlaskit/avatar/avatar-item';
-import { Layering } from '@atlaskit/layering/layering';
 import Select from '@atlaskit/select/default';
 import Tooltip from '@atlaskit/tooltip/Tooltip';
 import { failUfoExperience } from '../../../../analytics/ufoExperiences/failUfoExperience';
@@ -17,6 +16,7 @@ import { getCleanedSelectProps } from '../../get-cleaned-select-props';
 import { USER_TYPE_TEST_ID } from '../../render-type/user';
 import { userTypeMessages } from '../../render-type/user/messages';
 import { InlineEditUFOExperience } from '../../table-cell-content/inline-edit';
+import { InlineEditLayer } from '../inline-edit-layer';
 var UserEditType = function UserEditType(props) {
   var _currentValue$values;
   var currentValue = props.currentValue,
@@ -67,9 +67,7 @@ var UserEditType = function UserEditType(props) {
       }, experienceId);
     }
   }, [experienceId, isLoading, hasFailed]);
-  return /*#__PURE__*/React.createElement(Layering, {
-    isDisabled: false
-  }, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
+  return /*#__PURE__*/React.createElement(InlineEditLayer, null, /*#__PURE__*/React.createElement(Select, _extends({}, getCleanedSelectProps(props), {
     menuPortalTarget: document.body,
     autoFocus: true,
     defaultMenuIsOpen: true,

package/dist/esm/ui/issue-like-table/issue-like-data-table-view.js

@@ -28,7 +28,6 @@ import { FlagsProvider } from '@atlaskit/flag/flags-provider';
 import SortAscendingIcon from '@atlaskit/icon/core/sort-ascending';
 import SortDescendingIcon from '@atlaskit/icon/core/sort-descending';
 import { Skeleton } from '@atlaskit/linking-common/skeleton';
-import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { extractClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge/extract-closest-edge';
 import { reorderWithEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/util/reorder-with-edge';
 import { autoScroller } from '@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-autoscroll/auto-scroller';
@@ -290,7 +289,7 @@ export var IssueLikeDataTableView = function IssueLikeDataTableView(_ref7) {
       });
     }).filter(Boolean);
   }, [orderedColumns, visibleColumnKeys]);
-  var isWrapTextSettingAvailable = Boolean(onWrappedColumnsChange) && fg('platform_lp_sllv_table_settings_menu');
+  var isWrapTextSettingAvailable = Boolean(onWrappedColumnsChange);
   var areAllVisibleColumnsWrapped = false;
   if (isWrapTextSettingAvailable) {
     areAllVisibleColumnsWrapped = visibleColumnKeys.length > 0 && visibleColumnKeys.every(function (columnKey) {

package/dist/types/ui/issue-like-table/edit-type/inline-edit-layer/index.d.ts

@@ -0,0 +1,7 @@
+import React, { type ReactNode } from 'react';
+/**
+ * Wraps an inline edit view, so that Escape cancels the edit and does not close a containing modal.
+ */
+export declare const InlineEditLayer: ({ children }: {
+    children: ReactNode;
+}) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/link-datasource",
-	"version": "7.5.1",
+	"version": "7.5.3",
 	"description": "UI Components to support linking platform dataset feature",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,13 +40,13 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^57.7.0",
 		"@atlaskit/afm-i18n-platform-linking-platform-link-datasource": "2.280.0",
-		"@atlaskit/analytics-cross-product": "^2.2.0",
+		"@atlaskit/analytics-cross-product": "^2.3.0",
 		"@atlaskit/analytics-next": "^12.6.0",
 		"@atlaskit/atlassian-context": "^2.0.0",
 		"@atlaskit/avatar": "^30.0.0",
 		"@atlaskit/avatar-group": "^14.4.0",
 		"@atlaskit/badge": "^22.0.0",
-		"@atlaskit/button": "^25.4.0",
+		"@atlaskit/button": "^25.6.0",
 		"@atlaskit/css": "^1.1.0",
 		"@atlaskit/datetime-picker": "^19.3.0",
 		"@atlaskit/dropdown-menu": "^21.0.0",
@@ -61,9 +61,9 @@
 		"@atlaskit/inline-edit": "^16.4.0",
 		"@atlaskit/intl-messages-provider": "^5.0.0",
 		"@atlaskit/jql-ast": "^4.2.0",
-		"@atlaskit/jql-editor": "^8.2.0",
+		"@atlaskit/jql-editor": "^8.5.0",
 		"@atlaskit/jql-editor-autocomplete-rest": "^4.6.0",
-		"@atlaskit/layering": "^6.0.0",
+		"@atlaskit/layering": "^6.1.0",
 		"@atlaskit/link": "^5.1.0",
 		"@atlaskit/link-client-extension": "^8.0.0",
 		"@atlaskit/link-provider": "^6.0.0",
@@ -95,6 +95,7 @@
 		"@atlaskit/toggle": "^17.3.0",
 		"@atlaskit/tokens": "^20.6.0",
 		"@atlaskit/tooltip": "^24.4.0",
+		"@atlaskit/top-layer": "^6.6.0",
 		"@atlaskit/ufo": "^2.0.0",
 		"@atlaskit/user-picker": "^14.2.0",
 		"@atlaskit/visually-hidden": "^4.4.0",
@@ -108,7 +109,6 @@
 		"lodash": "^4.17.21",
 		"react-sweet-state": "^2.6.5",
 		"tiny-invariant": "^1.2.0",
-		"use-callback-ref": "^1.2.3",
 		"use-debounce": "^3.4.0",
 		"uuid": "^11.1.1"
 	},
@@ -121,6 +121,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/code": "^20.0.0",
+		"@atlaskit/docs": "^12.3.0",
 		"@atlaskit/json-ld-types": "^2.1.0",
 		"@atlaskit/link-test-helpers": "^11.2.0",
 		"@atlaskit/radio": "^10.2.0",
@@ -168,9 +169,6 @@
 		"platform_lp_sllv_preserve_assets_columns": {
 			"type": "boolean"
 		},
-		"platform_lp_sllv_table_settings_menu": {
-			"type": "boolean"
-		},
 		"platform_lp_sllv_on_request_settled": {
 			"type": "boolean"
 		},
@@ -183,6 +181,9 @@
 		"electric_issue_like_table_xpc_url_wrapping": {
 			"type": "boolean"
 		},
+		"platform-dst-top-layer": {
+			"type": "boolean"
+		},
 		"platform-dst-top-layer-tooltip": {
 			"type": "boolean",
 			"referenceOnly": true

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

@@ -1 +0,0 @@
-._s7n4nkob{vertical-align:middle}

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

@@ -1 +0,0 @@
-._s7n4nkob{vertical-align:middle}

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

@@ -1 +0,0 @@
-._s7n4nkob{vertical-align:middle}