@atlaskit/editor-plugin-block-controls 17.1.1 → 17.1.3

package/dist/cjs/ui/block-controls-surface.js

@@ -26,16 +26,12 @@ var _visibilityContainer = require("./visibility-container");
 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 BLOCK_CONTROLS_SURFACE_Z_INDEX = 100;
 var surfaceStyles = null;
-var BlockControlsSurface = exports.BlockControlsSurface = function BlockControlsSurface(_ref) {
-  var _api$uiControlRegistr, _api$uiControlRegistr2;
-  var api = _ref.api,
-    editorView = _ref.editorView;
-  var activeNode = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
-    var _states$blockControls;
-    return {
-      activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode
-    };
-  }).activeNode;
+var BlockControlsSurfaceAtTarget = function BlockControlsSurfaceAtTarget(_ref) {
+  var _api$uiControlRegistr, _api$uiControlRegistr2, _activeNode$handleOpt;
+  var activeNode = _ref.activeNode,
+    api = _ref.api,
+    editorView = _ref.editorView,
+    target = _ref.target;
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     position = _useState2[0],
@@ -43,8 +39,8 @@ var BlockControlsSurface = exports.BlockControlsSurface = function BlockControls
   var animationFrameRef = (0, _react.useRef)(undefined);
   var components = (_api$uiControlRegistr = (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
   var blockControlsContext = (0, _react.useMemo)(function () {
-    return (0, _blockControlsSurfaceContext.createBlockControlsSurfaceContext)(editorView, activeNode);
-  }, [activeNode, editorView]);
+    return (0, _blockControlsSurfaceContext.createBlockControlsSurfaceContext)(editorView, activeNode, target);
+  }, [activeNode, editorView, target]);
   var surfaceContext = (0, _react.useMemo)(function () {
     return blockControlsContext ? (0, _types.createSurfaceContext)(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined;
   }, [blockControlsContext]);
@@ -54,29 +50,29 @@ var BlockControlsSurface = exports.BlockControlsSurface = function BlockControls
       setPosition(undefined);
       return;
     }
-    var rootNodeElement = editorView.nodeDOM(blockControlsContext.rootNode.pos);
-    var rootElement = rootNodeElement instanceof HTMLElement ? rootNodeElement : rootNodeElement === null || rootNodeElement === void 0 ? void 0 : rootNodeElement.parentElement;
-    if (!rootElement) {
+    var targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
+    var targetElementRoot = targetNodeElement instanceof HTMLElement ? targetNodeElement : targetNodeElement === null || targetNodeElement === void 0 ? void 0 : targetNodeElement.parentElement;
+    if (!targetElementRoot) {
       setPosition(undefined);
       return;
     }
-    var targetElement = (0, _getNodeContentElement.getNodeContentElement)(rootElement, blockControlsContext.rootNode.type.name);
+    var targetElement = (0, _getNodeContentElement.getNodeContentElement)(targetElementRoot, blockControlsContext.targetNode.type.name);
     var offsetParent = editorView.dom.offsetParent;
     var isDocumentOffsetParent = !offsetParent || offsetParent === ((_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.body);
     var scrollingOffsetParent = offsetParent instanceof HTMLElement && !isDocumentOffsetParent ? offsetParent : undefined;
     var updatePosition = function updatePosition() {
-      var _rootElement$getAttri, _scrollingOffsetParen, _scrollingOffsetParen2;
+      var _targetElementRoot$ge, _scrollingOffsetParen, _scrollingOffsetParen2;
       animationFrameRef.current = undefined;
-      if (!rootElement.isConnected || !targetElement.isConnected) {
+      if (!targetElementRoot.isConnected || !targetElement.isConnected) {
         setPosition(undefined);
         return;
       }
       var placement = (0, _getSurfacePlacement.getSurfacePlacement)({
-        layout: (_rootElement$getAttri = rootElement.getAttribute('layout')) !== null && _rootElement$getAttri !== void 0 ? _rootElement$getAttri : '',
+        layout: (_targetElementRoot$ge = targetElementRoot.getAttribute('layout')) !== null && _targetElementRoot$ge !== void 0 ? _targetElementRoot$ge : '',
         nodeRect: targetElement.getBoundingClientRect(),
-        nodeType: blockControlsContext.rootNode.type.name,
-        nodeTypeWithLevel: (0, _decorationsCommon.getNodeTypeWithLevel)(blockControlsContext.rootNode.node),
-        parentNodeType: blockControlsContext.rootNode.parentType === 'doc' ? undefined : blockControlsContext.rootNode.parentType
+        nodeType: blockControlsContext.targetNode.type.name,
+        nodeTypeWithLevel: (0, _decorationsCommon.getNodeTypeWithLevel)(blockControlsContext.targetNode.node),
+        parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType
       });
       var offsetParentRect = offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.getBoundingClientRect();
       var offsetParentScrollTop = (_scrollingOffsetParen = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollTop) !== null && _scrollingOffsetParen !== void 0 ? _scrollingOffsetParen : window.scrollY;
@@ -144,17 +140,46 @@ var BlockControlsSurface = exports.BlockControlsSurface = function BlockControls
     return null;
   }
   return /*#__PURE__*/_react.default.createElement("div", {
+    "data-editor-block-controls-surface": true
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved from the active node's runtime DOM geometry.
+    ,
     style: position,
-    "data-testid": "block-controls-left-surface",
-    className: (0, _runtime.ax)(["_1e0c1txw _kqswstnw _1pbyb4wl"])
+    "data-testid": target === 'root' ? 'block-controls-left-surface' : 'block-controls-left-surface-active',
+    className: (0, _runtime.ax)(["_zulpv77o _4cvr1h6o _1e0c1txw _kqswstnw _1pbyb4wl"])
   }, /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
     api: api,
     controlSide: "left",
+    forceVisibleOnMouseOut: Boolean((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused),
     shouldUseDisplayContents: true
   }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
     components: components,
     surface: _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE,
     surfaceContext: surfaceContext
   })));
+};
+var BlockControlsSurface = exports.BlockControlsSurface = function BlockControlsSurface(_ref2) {
+  var _activeNode$rootPos;
+  var api = _ref2.api,
+    editorView = _ref2.editorView;
+  var activeNode = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
+    var _states$blockControls;
+    return {
+      activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode
+    };
+  }).activeNode;
+  if (!activeNode) {
+    return null;
+  }
+  var rootPos = (_activeNode$rootPos = activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : activeNode.pos;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BlockControlsSurfaceAtTarget, {
+    activeNode: activeNode,
+    api: api,
+    editorView: editorView,
+    target: "root"
+  }), rootPos !== activeNode.pos ? /*#__PURE__*/_react.default.createElement(BlockControlsSurfaceAtTarget, {
+    activeNode: activeNode,
+    api: api,
+    editorView: editorView,
+    target: "active"
+  }) : null);
 };

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = exports.ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = exports.ACTIVE_DRAG_HANDLE_ATTR = void 0;
+exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WRAPPED_MEDIA_EMBED_TOP_ADJUSTMENT = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = exports.BLOCK_CONTROLS_SURFACE_SELECTOR = exports.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = exports.ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = exports.ACTIVE_DRAG_HANDLE_ATTR = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _styles = require("@atlaskit/editor-common/styles");
@@ -17,6 +17,7 @@ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _dropTargetMarginMap;
 var ACTIVE_DRAG_HANDLE_ATTR = exports.ACTIVE_DRAG_HANDLE_ATTR = 'data-active-drag-handle';
 var ACTIVE_QUICK_INSERT_ATTR = exports.ACTIVE_QUICK_INSERT_ATTR = 'data-active-quick-insert';
+var BLOCK_CONTROLS_SURFACE_SELECTOR = exports.BLOCK_CONTROLS_SURFACE_SELECTOR = '[data-editor-block-controls-surface]';
 var ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = exports.ACTIVE_DRAG_HANDLE_FALLBACK_ANCHOR_NAME = '--editor-block-controls-active-drag-handle-anchor';
 var ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = exports.ACTIVE_QUICK_INSERT_FALLBACK_ANCHOR_NAME = '--editor-block-controls-active-quick-insert-anchor';
 var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;

package/dist/cjs/ui/global-styles.js

@@ -248,23 +248,6 @@ var globalStyles = function globalStyles() {
     }
   });
 };
-var topLevelNodeMarginStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '.ProseMirror': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> .ProseMirror-widget:first-child + .ProseMirror-gapcursor + *:not([data-layout-section="true"], [data-prosemirror-node-name="bodiedSyncBlock"]), > .ProseMirror-widget:first-child + *:not([data-layout-section="true"], [data-prosemirror-node-name="bodiedSyncBlock"])': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
-      marginTop: '0 !important'
-    },
-    // Reach through a font-size wrapper to zero the inner content margin (e.g. during drag when a
-    // drop target widget is inserted before the wrapper).
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
-    '> .ProseMirror-widget:first-child + .ProseMirror-widget + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child, > .ProseMirror-widget:first-child + .ProseMirror-gapcursor + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
-      marginTop: '0 !important'
-    }
-  }
-});
 var withDividerInPanelStyleFix = (0, _react.css)((0, _defineProperty2.default)({}, "".concat(dividerBodiedInCustomPanelWithNoIconSelector), {
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
   marginTop: '0 !important'
@@ -440,10 +423,7 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
       exposure: true
     }) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
     // platform_editor_controls note: this allows drag handles to render on empty lines
-    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle,
-    // When `platform_editor_first_node_fix` is enabled, EditorContentContainer applies the
-    // equivalent rules (`firstNodeWidgetFixStyles`), so skip them here to avoid duplication.
-    (0, _expValEquals.expValEquals)('platform_editor_first_node_fix', 'isEnabled', true) ? undefined : topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) ?
+    toolbarFlagsEnabled ? undefined : withInlineNodeStyle, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_with_dnd', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, (0, _expValEquals.expValEquals)('platform_editor_controls_reliable_anchor', 'isEnabled', true) ?
     // dragAnchorStyles sets anchor-name on ALL nodes during drag (needed for drop target positioning).
     // staticControlsAnchorStyles handles anchor-name via node decorations for non-drag state.
     // shouldRenderAnchors guards both: only apply anchor styles on browsers that support CSS anchor positioning.

package/dist/cjs/ui/surface-editor-view-context.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSurfaceEditorView = exports.SurfaceEditorViewContext = void 0;
+var _react = require("react");
+/** Provides registered block-control surface contributors with their owning editor view. */
+var SurfaceEditorViewContext = exports.SurfaceEditorViewContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+var useSurfaceEditorView = exports.useSurfaceEditorView = function useSurfaceEditorView() {
+  return (0, _react.useContext)(SurfaceEditorViewContext);
+};

package/dist/cjs/ui/use-block-controls-surface-drag-source.js

@@ -0,0 +1,172 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useBlockControlsSurfaceDragSource = void 0;
+var _react = require("react");
+var _analytics = require("@atlaskit/editor-common/analytics");
+var _performanceMeasures = require("@atlaskit/editor-common/performance-measures");
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _elementAdapter = require("@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter");
+var _setCustomNativeDragPreview = require("@atlaskit/pragmatic-drag-and-drop/utils/set-custom-native-drag-preview");
+var _activeAnchorTracker = require("../pm-plugins/utils/active-anchor-tracker");
+var _analytics2 = require("../pm-plugins/utils/analytics");
+var _getSelection = require("../pm-plugins/utils/getSelection");
+var _dragPreview = require("./drag-preview");
+var _blockControlsSurfaceDragHandleUtils = require("./block-controls-surface-drag-handle-utils");
+var EDITOR_BLOCKS_DRAG_INIT = 'Editor Blocks Drag Initialization Time';
+/**
+ * Registry surface drag source. This intentionally duplicates the stable widget handle's drag
+ * contract so the legacy implementation remains byte-for-byte unchanged during migration.
+ */
+var useBlockControlsSurfaceDragSource = exports.useBlockControlsSurfaceDragSource = function useBlockControlsSurfaceDragSource(_ref) {
+  var api = _ref.api,
+    elementRef = _ref.elementRef,
+    getAnchorName = _ref.getAnchorName,
+    getPos = _ref.getPos,
+    nodeType = _ref.nodeType,
+    start = _ref.start,
+    view = _ref.view;
+  (0, _react.useEffect)(function () {
+    var element = elementRef.current;
+    if (!element || !view) {
+      return;
+    }
+    return (0, _elementAdapter.draggable)({
+      element: element,
+      getInitialData: function getInitialData() {
+        return {
+          type: 'element',
+          start: start
+        };
+      },
+      onGenerateDragPreview: function onGenerateDragPreview(_ref2) {
+        var _api$core, _api$blockControls$sh;
+        var nativeSetDragImage = _ref2.nativeSetDragImage;
+        api === null || api === void 0 || (_api$core = api.core) === null || _api$core === void 0 || _api$core.actions.execute(function (_ref3) {
+          var tr = _ref3.tr;
+          var handlePos = getPos();
+          if (typeof handlePos !== 'number') {
+            return tr;
+          }
+          if (!tr.selection.empty && (0, _getSelection.isHandleCorrelatedToSelection)(view.state, tr.selection, handlePos)) {
+            var _api$blockControls;
+            api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 || _api$blockControls.commands.setMultiSelectPositions()({
+              tr: tr
+            });
+          } else {
+            tr = (0, _getSelection.selectNode)(tr, handlePos, nodeType, api);
+          }
+          return tr;
+        });
+        var startPos = getPos();
+        var _view$state = view.state,
+          doc = _view$state.doc,
+          selection = _view$state.selection;
+        var sliceFrom = selection.from;
+        var sliceTo = selection.to;
+        var multiSelect = api === null || api === void 0 || (_api$blockControls$sh = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh === void 0 ? void 0 : _api$blockControls$sh.multiSelectDnD;
+        if (multiSelect) {
+          sliceFrom = Math.min(multiSelect.anchor, multiSelect.head);
+          sliceTo = Math.max(multiSelect.anchor, multiSelect.head);
+        }
+        var expandedSlice = doc.slice(sliceFrom, sliceTo);
+        var isDraggingMultipleNodes = startPos !== undefined && startPos >= sliceFrom && startPos < sliceTo && expandedSlice.content.childCount > 1;
+        (0, _setCustomNativeDragPreview.setCustomNativeDragPreview)({
+          getOffset: function getOffset() {
+            if (!isDraggingMultipleNodes || startPos === undefined) {
+              return {
+                x: 0,
+                y: 0
+              };
+            }
+            var domAtPos = view.domAtPos.bind(view);
+            var heightBeforeHandle = 0;
+            var nodeStart = sliceFrom;
+            var activeNodeMarginTop = 0;
+            for (var index = 0; index < expandedSlice.content.childCount; index++) {
+              var _node$nodeSize;
+              var node = expandedSlice.content.maybeChild(index);
+              var nodeEnd = nodeStart + ((_node$nodeSize = node === null || node === void 0 ? void 0 : node.nodeSize) !== null && _node$nodeSize !== void 0 ? _node$nodeSize : 0);
+              if (nodeEnd <= startPos) {
+                var nodeElement = (0, _utils.findDomRefAtPos)(nodeStart, domAtPos);
+                var margins = (0, _blockControlsSurfaceDragHandleUtils.getNodeMarginsForDragPreview)(node);
+                heightBeforeHandle += (nodeElement instanceof HTMLElement ? nodeElement.offsetHeight : 0) + margins.top + margins.bottom;
+              } else {
+                activeNodeMarginTop = (0, _blockControlsSurfaceDragHandleUtils.getNodeMarginsForDragPreview)(node).top;
+                break;
+              }
+              nodeStart = nodeEnd;
+            }
+            return {
+              x: 0,
+              y: heightBeforeHandle + activeNodeMarginTop
+            };
+          },
+          render: function render(_ref4) {
+            var container = _ref4.container;
+            if (!isDraggingMultipleNodes && startPos !== undefined) {
+              var dom = (0, _utils.findDomRefAtPos)(startPos, view.domAtPos.bind(view));
+              return dom instanceof HTMLElement ? (0, _dragPreview.dragPreview)(container, {
+                dom: dom,
+                nodeType: nodeType
+              }) : undefined;
+            }
+            var previewContent = [];
+            expandedSlice.content.descendants(function (node, pos) {
+              var dom = (0, _utils.findDomRefAtPos)(sliceFrom + pos, view.domAtPos.bind(view));
+              if (dom instanceof HTMLElement) {
+                previewContent.push({
+                  dom: dom,
+                  nodeSpacing: (0, _blockControlsSurfaceDragHandleUtils.getNodeSpacingForDragPreview)(node),
+                  nodeType: node.type.name
+                });
+              }
+              return false;
+            });
+            return previewContent.length > 0 ? (0, _dragPreview.dragPreview)(container, previewContent) : undefined;
+          },
+          nativeSetDragImage: nativeSetDragImage
+        });
+      },
+      onDragStart: function onDragStart() {
+        var _api$core2;
+        if (start === undefined) {
+          return;
+        }
+
+        // This handle is outside ProseMirror, so it owns the side effects normally started by PM.
+        (0, _performanceMeasures.startMeasure)(EDITOR_BLOCKS_DRAG_INIT);
+        _activeAnchorTracker.defaultActiveAnchorTracker.reset();
+        api === null || api === void 0 || (_api$core2 = api.core) === null || _api$core2 === void 0 || _api$core2.actions.execute(function (_ref5) {
+          var _api$blockControls$sh2, _resolvedMovingNode$n, _api$blockControls2, _api$analytics;
+          var tr = _ref5.tr;
+          var resolvedMovingNode = tr.doc.resolve(start);
+          var multiSelect = api === null || api === void 0 || (_api$blockControls$sh2 = api.blockControls.sharedState.currentState()) === null || _api$blockControls$sh2 === void 0 ? void 0 : _api$blockControls$sh2.multiSelectDnD;
+          var attributes = multiSelect ? (0, _analytics2.getMultiSelectAnalyticsAttributes)(tr, multiSelect.anchor, multiSelect.head) : {
+            hasSelectedMultipleNodes: false,
+            nodeTypes: (_resolvedMovingNode$n = resolvedMovingNode.nodeAfter) === null || _resolvedMovingNode$n === void 0 ? void 0 : _resolvedMovingNode$n.type.name
+          };
+          api === null || api === void 0 || (_api$blockControls2 = api.blockControls) === null || _api$blockControls2 === void 0 || _api$blockControls2.commands.setNodeDragged(getPos, getAnchorName(), nodeType)({
+            tr: tr
+          });
+          tr.setMeta('scrollIntoView', false);
+          api === null || api === void 0 || (_api$analytics = api.analytics) === null || _api$analytics === void 0 || _api$analytics.actions.attachAnalyticsEvent({
+            action: _analytics.ACTION.DRAGGED,
+            actionSubject: _analytics.ACTION_SUBJECT.ELEMENT,
+            actionSubjectId: _analytics.ACTION_SUBJECT_ID.ELEMENT_DRAG_HANDLE,
+            attributes: {
+              hasSelectedMultipleNodes: attributes.hasSelectedMultipleNodes,
+              nodeDepth: resolvedMovingNode.depth,
+              nodeTypes: attributes.nodeTypes || ''
+            },
+            eventType: _analytics.EVENT_TYPE.UI
+          })(tr);
+          return tr;
+        });
+        view.focus();
+      }
+    });
+  }, [api, elementRef, getAnchorName, getPos, nodeType, start, view]);
+};

package/dist/cjs/ui/utils/get-surface-placement.js

@@ -31,9 +31,16 @@ var getSurfacePlacement = exports.getSurfacePlacement = function getSurfacePlace
     nodeType = _ref2.nodeType,
     nodeTypeWithLevel = _ref2.nodeTypeWithLevel,
     parentNodeType = _ref2.parentNodeType;
+  if (nodeType === 'layoutColumn') {
+    return {
+      left: nodeRect.left + nodeRect.width / 2,
+      top: nodeRect.top,
+      transform: 'translate(-50%, -50%)'
+    };
+  }
   return {
     left: nodeRect.left,
     top: nodeRect.top + (0, _consts.topPositionAdjustment)(nodeTypeWithLevel, layout),
-    transform: "translateX(calc(-100% - ".concat((0, _consts.dragHandleGap)(nodeType, parentNodeType) + _consts.QUICK_INSERT_LEFT_OFFSET, "px))")
+    transform: "translateX(calc(-100% - ".concat((0, _consts.dragHandleGap)(nodeType, parentNodeType), "px))")
   };
 };

package/dist/es2019/blockControlsPlugin.js

@@ -23,7 +23,9 @@ import { createSelectionPreservationPlugin } from './pm-plugins/selection-preser
 import { expandAndUpdateSelection } from './pm-plugins/utils/expand-and-update-selection';
 import { selectNode } from './pm-plugins/utils/getSelection';
 import { BlockControlsSurface } from './ui/block-controls-surface';
+import { getBlockControlsSurfaceDragHandleComponents } from './ui/block-controls-surface-drag-handle-registration';
 import { GlobalStylesWrapper } from './ui/global-styles';
+import { SurfaceEditorViewContext } from './ui/surface-editor-view-context';
 export const blockControlsPlugin = ({
   api,
   config
@@ -32,8 +34,9 @@ export const blockControlsPlugin = ({
   const nodeDecorationRegistry = [];
   const rightSideControlsEnabled = (_config$rightSideCont = config === null || config === void 0 ? void 0 : config.rightSideControlsEnabled) !== null && _config$rightSideCont !== void 0 ? _config$rightSideCont : false;
   const quickInsertButtonEnabled = (_config$quickInsertBu = config === null || config === void 0 ? void 0 : config.quickInsertButtonEnabled) !== null && _config$quickInsertBu !== void 0 ? _config$quickInsertBu : true;
-  const blockControlMigrationEnabled = isExperimentEnabled('platform_editor_block_control_migration');
-  if (blockControlMigrationEnabled) {
+  const registryBlockControlsEnabled = isExperimentEnabled('platform_editor_block_control_migration');
+  const legacyBlockControlsEnabled = !registryBlockControlsEnabled;
+  if (registryBlockControlsEnabled) {
     var _api$uiControlRegistr;
     api === null || api === void 0 ? void 0 : (_api$uiControlRegistr = api.uiControlRegistry) === null || _api$uiControlRegistr === void 0 ? void 0 : _api$uiControlRegistr.actions.register([BLOCK_CONTROLS_LEFT_SURFACE, {
       ...BLOCK_CONTROLS_LEFT_SECTION,
@@ -47,7 +50,9 @@ export const blockControlsPlugin = ({
         ...BLOCK_CONTROLS_LEFT_SECTION,
         rank: 100
       }]
-    }]);
+    }, ...getBlockControlsSurfaceDragHandleComponents({
+      api
+    })]);
   }
   return {
     name: 'blockControls',
@@ -117,7 +122,7 @@ export const blockControlsPlugin = ({
         plugin: ({
           getIntl,
           nodeViewPortalProviderAPI
-        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && !blockControlMigrationEnabled)
+        }) => createPlugin(api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled, quickInsertButtonEnabled && legacyBlockControlsEnabled, legacyBlockControlsEnabled)
       }];
       if (editorExperiment('platform_editor_controls', 'variant1')) {
         pmPlugins.push({
@@ -431,10 +436,12 @@ export const blockControlsPlugin = ({
     }) {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(GlobalStylesWrapper, {
         api: api
-      }), blockControlMigrationEnabled && editorView && api ? /*#__PURE__*/React.createElement(BlockControlsSurface, {
+      }), registryBlockControlsEnabled && editorView && api ? /*#__PURE__*/React.createElement(SurfaceEditorViewContext.Provider, {
+        value: editorView
+      }, /*#__PURE__*/React.createElement(BlockControlsSurface, {
         api: api,
         editorView: editorView
-      }) : null);
+      })) : null);
     }
   };
 };

package/dist/es2019/pm-plugins/main.js

@@ -17,6 +17,7 @@ import { combine } from '@atlaskit/pragmatic-drag-and-drop/utils/combine';
 import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/adapter/element-adapter';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { BLOCK_CONTROLS_SURFACE_SELECTOR } from '../ui/consts';
 import { getAnchorAttrName } from '../ui/utils/dom-attr-name';
 import { findNodeDecs, nodeDecorations } from './decorations-anchor';
 import { createActiveDragHandleNodeDecoration, dragHandleDecoration, emptyParagraphNodeDecorations, findActiveDragHandleNodeDec, findHandleDec } from './decorations-drag-handle';
@@ -470,7 +471,8 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     }
   } else if (api) {
     var _latestActiveNode5, _latestActiveNode10;
-    if (shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
+    // The registry surface replaces the legacy drag-handle decorations during migration.
+    if (flags.legacyDragHandleEnabled && shouldRecreateHandle && (!rightSideControlsEnabled || !isViewMode)) {
       var _activeNode11, _activeNode12, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
       const oldHandle = findHandleDec(decorations, (_activeNode11 = activeNode) === null || _activeNode11 === void 0 ? void 0 : _activeNode11.pos, (_activeNode12 = activeNode) === null || _activeNode12 === void 0 ? void 0 : _activeNode12.pos);
       decorations = decorations.remove(oldHandle);
@@ -487,7 +489,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
       });
       decorations = decorations.add(newState.doc, [handleDec]);
     }
-    if (expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && latestActiveNode) {
+    if (flags.legacyDragHandleEnabled && expValEquals('platform_editor_controls_reliable_anchor', 'isEnabled', true) && latestActiveNode) {
       // Recreate the drag handle node decoration when the active node changed,
       // its content was modified, or the document changed (e.g. Enter splits a node).
       // This runs independently of shouldRecreateHandle so that doc changes (like pressing
@@ -701,11 +703,13 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     // remove isEmptyDoc check and let decorations render and determine their own visibility
     // In view mode with right-side controls we render node decorations (right-edge button), not the
     // handle - so findHandleDec is always empty. Don't clear activeNode in that case.
-    const hasHandleOrViewModeControls = findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0 || isViewMode && rightSideControlsEnabled;
-    newActiveNode = meta !== null && meta !== void 0 && meta.editorBlurred || !(meta !== null && meta !== void 0 && meta.activeNode) && !hasHandleOrViewModeControls ? null : latestActiveNode;
+    const hasHandleOrViewModeControls = findHandleDec(decorations, (_latestActiveNode11 = latestActiveNode) === null || _latestActiveNode11 === void 0 ? void 0 : _latestActiveNode11.pos, (_latestActiveNode12 = latestActiveNode) === null || _latestActiveNode12 === void 0 ? void 0 : _latestActiveNode12.pos).length > 0 || isViewMode && rightSideControlsEnabled || !flags.legacyDragHandleEnabled;
+    // Keep the registry surface mounted while its Block Menu owns focus.
+    const keepActiveNodeForOpenBlockMenu = !flags.legacyDragHandleEnabled && isMenuOpen && editorExperiment('platform_editor_block_menu', true);
+    newActiveNode = meta !== null && meta !== void 0 && meta.editorBlurred && !keepActiveNodeForOpenBlockMenu || !(meta !== null && meta !== void 0 && meta.activeNode) && !hasHandleOrViewModeControls ? null : latestActiveNode;
   } else {
     var _latestActiveNode13, _latestActiveNode14;
-    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && findHandleDec(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
+    newActiveNode = isEmptyDoc || !(meta !== null && meta !== void 0 && meta.activeNode) && flags.legacyDragHandleEnabled && findHandleDec(decorations, (_latestActiveNode13 = latestActiveNode) === null || _latestActiveNode13 === void 0 ? void 0 : _latestActiveNode13.pos, (_latestActiveNode14 = latestActiveNode) === null || _latestActiveNode14 === void 0 ? void 0 : _latestActiveNode14.pos).length === 0 ? null : latestActiveNode;
   }
   let isMenuOpenNew = isMenuOpen;
   if (editorExperiment('platform_editor_block_menu', true)) {
@@ -749,7 +753,7 @@ export const apply = (api, formatMessage, tr, currentState, newState, flags, nod
     isSelectedViaDragHandle: isSelectedViaDragHandleNew
   };
 };
-export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true) => {
+export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecorationRegistry, rightSideControlsEnabled = false, quickInsertButtonEnabled = true, legacyDragHandleEnabled = true) => {
   const {
     formatMessage
   } = getIntl();
@@ -758,6 +762,7 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
   });
   const toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
   const flags = {
+    legacyDragHandleEnabled,
     toolbarFlagsEnabled
   };
   let anchorRectCache;
@@ -1010,11 +1015,13 @@ export const createPlugin = (api, getIntl, nodeViewPortalProviderAPI, nodeDecora
           }
           if (editorExperiment('platform_editor_controls', 'variant1')) {
             var _api$core2;
+            // Focus moving into the registry surface remains inside the editor experience.
+            const isChildOfSurface = !flags.legacyDragHandleEnabled && event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest(BLOCK_CONTROLS_SURFACE_SELECTOR) !== null;
             const isChildOfEditor = event.relatedTarget instanceof HTMLElement && event.relatedTarget.closest(`#${EDIT_AREA_ID}`) !== null;
 
             // don't do anything if the event relatedTarget (the element receiving focus) is a child of the editor
             // or if the editor has focus
-            if (isChildOfEditor || view.hasFocus()) {
+            if (isChildOfEditor || isChildOfSurface || view.hasFocus()) {
               return false;
             }
             api === null || api === void 0 ? void 0 : (_api$core2 = api.core) === null || _api$core2 === void 0 ? void 0 : _api$core2.actions.execute(({

package/dist/es2019/ui/block-controls-surface-context.js

@@ -26,7 +26,7 @@ const getNodeContext = (view, pos) => {
     }
   };
 };
-export const createBlockControlsSurfaceContext = (view, activeNode) => {
+export const createBlockControlsSurfaceContext = (view, activeNode, target = 'root') => {
   var _activeNode$rootPos, _activeNode$rootNodeT;
   if (!activeNode) {
     return undefined;
@@ -46,6 +46,6 @@ export const createBlockControlsSurfaceContext = (view, activeNode) => {
       }
     },
     rootNode: rootNodeContext,
-    targetNode: rootNodeContext
+    targetNode: target === 'active' ? activeNodeContext : rootNodeContext
   };
 };

package/dist/es2019/ui/block-controls-surface-drag-handle-registration.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import { BLOCK_CONTROLS_LEFT_GROUP } from '@atlaskit/editor-common/block-controls/surface-keys';
+import { BlockControlsSurfaceDragHandle } from './block-controls-surface-drag-handle';
+export const getBlockControlsSurfaceDragHandleComponents = ({
+  api
+}) => [{
+  component: ({
+    surfaceContext
+  }) => /*#__PURE__*/React.createElement(BlockControlsSurfaceDragHandle, {
+    api: api,
+    surfaceContext: surfaceContext
+  }),
+  isHidden: ({
+    surfaceContext
+  } = {}) => {
+    const context = surfaceContext === null || surfaceContext === void 0 ? void 0 : surfaceContext.get(BLOCK_CONTROL_UI_CONTEXT);
+    return !(context !== null && context !== void 0 && context.activeNode) || context.targetNode.pos !== context.activeNode.pos;
+  },
+  key: 'block-controls-drag-handle',
+  parents: [{
+    ...BLOCK_CONTROLS_LEFT_GROUP,
+    rank: 200
+  }],
+  type: 'button'
+}];

package/dist/es2019/ui/block-controls-surface-drag-handle-utils.js

@@ -0,0 +1,33 @@
+import { fg } from '@atlaskit/platform-feature-flags/fg';
+import { nodeMargins, spacingBetweenNodesForPreview } from './consts';
+export const buildLayoutColumnMenuMeta = (anchorPos, openedViaKeyboard) => ({
+  anchorPos,
+  ...(fg('platform_editor_layout_column_menu_kill_switch_1') ? {
+    isOpen: true
+  } : {}),
+  openedViaKeyboard
+});
+export const getNodeSpacingForDragPreview = node => {
+  var _spacingBetweenNodesF2;
+  if (!node) {
+    return spacingBetweenNodesForPreview.default;
+  }
+  const nodeTypeName = node.type.name;
+  if (nodeTypeName === 'heading') {
+    var _spacingBetweenNodesF;
+    return (_spacingBetweenNodesF = spacingBetweenNodesForPreview[`heading${node.attrs.level}`]) !== null && _spacingBetweenNodesF !== void 0 ? _spacingBetweenNodesF : spacingBetweenNodesForPreview.default;
+  }
+  return (_spacingBetweenNodesF2 = spacingBetweenNodesForPreview[nodeTypeName]) !== null && _spacingBetweenNodesF2 !== void 0 ? _spacingBetweenNodesF2 : spacingBetweenNodesForPreview.default;
+};
+export const getNodeMarginsForDragPreview = node => {
+  var _nodeMargins$nodeType;
+  if (!node) {
+    return nodeMargins.default;
+  }
+  const nodeTypeName = node.type.name;
+  if (nodeTypeName === 'heading') {
+    var _nodeMargins;
+    return (_nodeMargins = nodeMargins[`heading${node.attrs.level}`]) !== null && _nodeMargins !== void 0 ? _nodeMargins : nodeMargins.default;
+  }
+  return (_nodeMargins$nodeType = nodeMargins[nodeTypeName]) !== null && _nodeMargins$nodeType !== void 0 ? _nodeMargins$nodeType : nodeMargins.default;
+};

package/dist/es2019/ui/block-controls-surface-drag-handle.compiled.css

@@ -0,0 +1,32 @@
+._19itglyw{border:none}
+._1a37dfik{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
+._2rko1y44{border-radius:4px}._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._19bvze3t{padding-left:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1bsb1crf{width:9pt}
+._1bsbx5ub{width:calc(var(--ak-editor-base-font-size)*12/16)}
+._1e0c1txw{display:flex}
+._1p1y1j28::selection{background-color:transparent}
+._1pbyb4wl{z-index:100}
+._1qu2glyw{outline-style:none}
+._2lx21bp4{flex-direction:column}
+._4cvr1h6o{align-items:center}
+._4t3i1myc{height:calc(var(--ak-editor-base-font-size)*24/16)}
+._4t3i1tcg{height:24px}
+._80om1qgj{cursor:grab}
+._bfhk15s3{background-color:var(--ds-background-selected,#e9f2fe)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._ca0qze3t{padding-top:var(--ds-space-0,0)}
+._cun91j28:disabled{background-color:transparent}
+._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
+._syazdgkc{color:var(--ds-icon-subtle,#505258)}
+._syazxl6c{color:var(--ds-icon-selected,#1868db)}
+._t9ec14w8{transform:rotate(90deg)}
+._u5f3ze3t{padding-right:var(--ds-space-0,0)}
+._vbqb2sac:disabled{color:var(--ds-icon-disabled,#080f214a)}
+._vchhusvi{box-sizing:border-box}
+._1ygbdfik:focus-visible{outline:var(--ds-border-width-focused,2px) solid var(--ds-border-focused,#4688ec)}
+._6g80187o:disabled:hover{background-color:var(--ds-background-disabled,#0515240f)}
+._irr31dpa:hover{background-color:var(--ds-background-neutral-subtle-hovered,#0515240f)}
+._1di6fcek:active{background-color:var(--ds-background-neutral-subtle-pressed,#0b120e24)}