@atlaskit/editor-plugin-block-controls 6.3.1 → 6.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 6.3.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`6b6eca9cee16d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6b6eca9cee16d) -
8
+ Switch to use editorExperiment to use productKey for responsive preview panel changes.
9
+ - Updated dependencies
10
+
11
+ ## 6.3.2
12
+
13
+ ### Patch Changes
14
+
15
+ - [`6fb79942fc3a5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6fb79942fc3a5) -
16
+ Internal changes to how borders are applied.
17
+ - Updated dependencies
18
+
3
19
  ## 6.3.1
4
20
 
5
21
  ### Patch Changes
@@ -128,7 +128,7 @@ var dragHandleButtonStyles = (0, _react2.css)({
128
128
  backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
129
129
  },
130
130
  '&:focus': {
131
- outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
131
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
132
132
  },
133
133
  '&:disabled': {
134
134
  color: "var(--ds-icon-disabled, #8993A4)",
@@ -174,7 +174,7 @@ var dragHandleButtonStylesOld = (0, _react2.css)({
174
174
  backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
175
175
  },
176
176
  '&:focus': {
177
- outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
177
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
178
178
  },
179
179
  '&:disabled': {
180
180
  color: "var(--ds-icon-disabled, #8993A4)",
@@ -238,7 +238,7 @@ var selectedStyles = (0, _react2.css)({
238
238
  // icon span receives dragStart event, instead of button, and since it is not registered as a draggable element
239
239
  // with pragmatic DnD and pragmatic DnD is not triggered
240
240
  var handleIconDragStart = function handleIconDragStart(e) {
241
- if (!_browser.browser.chrome || !(0, _platformFeatureFlags.fg)('platform_editor_dnd_update_drag_start_target')) {
241
+ if (!_browser.browser.chrome) {
242
242
  return;
243
243
  }
244
244
  // prevent dragStart handler triggered by icon
@@ -881,7 +881,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
881
881
  css: [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
882
882
  // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
883
883
  // See https://product-fabric.atlassian.net/browse/ED-26266
884
- _browser.browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
884
+ _browser.browser.gecko && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true) && (0, _experiments.editorExperiment)('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
885
885
  ref: buttonRef
886
886
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
887
887
  ,
@@ -40,7 +40,7 @@ var dropTargetLayoutStyle = (0, _react2.css)({
40
40
  var dropTargetLayoutHintStyle = (0, _react2.css)({
41
41
  height: '100%',
42
42
  position: 'relative',
43
- borderRight: "1px dashed ".concat("var(--ds-border-focused, ".concat(_colors.B200, ")")),
43
+ borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, ".concat(_colors.B200, ")")),
44
44
  width: 0
45
45
  });
46
46
  var DropTargetLayout = exports.DropTargetLayout = function DropTargetLayout(props) {
@@ -268,7 +268,7 @@ var quickInsertStyles = function quickInsertStyles() {
268
268
  },
269
269
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
270
270
  '.blocks-quick-insert-button:focus': {
271
- outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
271
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
272
272
  },
273
273
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
274
274
  '.blocks-quick-insert-visible-container': {
@@ -404,6 +404,8 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
404
404
  disabled: !(0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
405
405
  });
406
406
  return (0, _react.jsx)(_react.Global, {
407
- styles: [globalStyles(), globalDnDStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), (0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle]
407
+ styles: [globalStyles(), globalDnDStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
408
+ exposure: true
409
+ }) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle]
408
410
  });
409
411
  };
@@ -59,7 +59,7 @@ var GAP = 4;
59
59
  var dropTargetLayoutHintStyle = (0, _react2.css)({
60
60
  height: '100%',
61
61
  position: 'absolute',
62
- borderRight: "1px dashed ".concat("var(--ds-border-focused, ".concat(_colors.B200, ")")),
62
+ borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, ".concat(_colors.B200, ")")),
63
63
  width: 0,
64
64
  left: 0
65
65
  });
@@ -59,7 +59,7 @@ var stickyButtonStyles = (0, _primitives.xcss)({
59
59
  backgroundColor: 'color.background.neutral.subtle.pressed'
60
60
  },
61
61
  ':focus': {
62
- outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
62
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
63
63
  }
64
64
  });
65
65
  var containerStaticStyles = (0, _primitives.xcss)({
@@ -11,7 +11,7 @@ var _react2 = require("@emotion/react");
11
11
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
12
12
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
13
13
  var _primitives = require("@atlaskit/primitives");
14
- var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
14
+ var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
15
15
  /**
16
16
  * @jsxRuntime classic
17
17
  * @jsx jsx
@@ -53,7 +53,9 @@ var VisibilityContainer = exports.VisibilityContainer = function VisibilityConta
53
53
  var isEditing = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isEditing');
54
54
  var isMouseOut = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isMouseOut');
55
55
  var shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
56
- if ((0, _expValEquals.expValEquals)('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
56
+ if ((0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
57
+ exposure: true
58
+ })) {
57
59
  return (0, _react2.jsx)("div", {
58
60
  css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
59
61
  }, children);
@@ -120,7 +120,7 @@ const dragHandleButtonStyles = css({
120
120
  backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
121
121
  },
122
122
  '&:focus': {
123
- outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
123
+ outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
124
124
  },
125
125
  '&:disabled': {
126
126
  color: "var(--ds-icon-disabled, #8993A4)",
@@ -169,7 +169,7 @@ const dragHandleButtonStylesOld = css({
169
169
  backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
170
170
  },
171
171
  '&:focus': {
172
- outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
172
+ outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
173
173
  },
174
174
  '&:disabled': {
175
175
  color: "var(--ds-icon-disabled, #8993A4)",
@@ -233,7 +233,7 @@ const selectedStyles = css({
233
233
  // icon span receives dragStart event, instead of button, and since it is not registered as a draggable element
234
234
  // with pragmatic DnD and pragmatic DnD is not triggered
235
235
  const handleIconDragStart = e => {
236
- if (!browser.chrome || !fg('platform_editor_dnd_update_drag_start_target')) {
236
+ if (!browser.chrome) {
237
237
  return;
238
238
  }
239
239
  // prevent dragStart handler triggered by icon
@@ -870,7 +870,7 @@ export const DragHandle = ({
870
870
  css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
871
871
  // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
872
872
  // See https://product-fabric.atlassian.net/browse/ED-26266
873
- browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
873
+ browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
874
874
  ref: buttonRef
875
875
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
876
876
  ,
@@ -31,7 +31,7 @@ const dropTargetLayoutStyle = css({
31
31
  const dropTargetLayoutHintStyle = css({
32
32
  height: '100%',
33
33
  position: 'relative',
34
- borderRight: `1px dashed ${`var(--ds-border-focused, ${B200})`}`,
34
+ borderRight: `${"var(--ds-border-width, 1px)"} dashed ${`var(--ds-border-focused, ${B200})`}`,
35
35
  width: 0
36
36
  });
37
37
  export const DropTargetLayout = props => {
@@ -314,7 +314,7 @@ const quickInsertStyles = () => css({
314
314
  },
315
315
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
316
316
  '.blocks-quick-insert-button:focus': {
317
- outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
317
+ outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
318
318
  },
319
319
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
320
320
  '.blocks-quick-insert-visible-container': {
@@ -475,6 +475,8 @@ export const GlobalStylesWrapper = ({
475
475
  disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
476
476
  });
477
477
  return jsx(Global, {
478
- styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined, editorExperiment('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle]
478
+ styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), editorExperiment('platform_editor_preview_panel_responsiveness', true, {
479
+ exposure: true
480
+ }) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined, editorExperiment('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle]
479
481
  });
480
482
  };
@@ -49,7 +49,7 @@ const GAP = 4;
49
49
  const dropTargetLayoutHintStyle = css({
50
50
  height: '100%',
51
51
  position: 'absolute',
52
- borderRight: `1px dashed ${`var(--ds-border-focused, ${B200})`}`,
52
+ borderRight: `${"var(--ds-border-width, 1px)"} dashed ${`var(--ds-border-focused, ${B200})`}`,
53
53
  width: 0,
54
54
  left: 0
55
55
  });
@@ -50,7 +50,7 @@ const stickyButtonStyles = xcss({
50
50
  backgroundColor: 'color.background.neutral.subtle.pressed'
51
51
  },
52
52
  ':focus': {
53
- outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
53
+ outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
54
54
  }
55
55
  });
56
56
  const containerStaticStyles = xcss({
@@ -10,7 +10,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
10
10
  import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
11
11
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
12
12
  import { Box, xcss } from '@atlaskit/primitives';
13
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
13
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
14
14
  const baseStyles = xcss({
15
15
  transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
16
16
  });
@@ -46,7 +46,9 @@ export const VisibilityContainer = ({
46
46
  const isEditing = useSharedPluginStateSelector(api, 'blockControls.isEditing');
47
47
  const isMouseOut = useSharedPluginStateSelector(api, 'blockControls.isMouseOut');
48
48
  const shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
49
- if (expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
49
+ if (editorExperiment('platform_editor_preview_panel_responsiveness', true, {
50
+ exposure: true
51
+ })) {
50
52
  return jsx("div", {
51
53
  css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
52
54
  }, children);
@@ -125,7 +125,7 @@ var dragHandleButtonStyles = css({
125
125
  backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
126
126
  },
127
127
  '&:focus': {
128
- outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
128
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
129
129
  },
130
130
  '&:disabled': {
131
131
  color: "var(--ds-icon-disabled, #8993A4)",
@@ -171,7 +171,7 @@ var dragHandleButtonStylesOld = css({
171
171
  backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
172
172
  },
173
173
  '&:focus': {
174
- outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
174
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
175
175
  },
176
176
  '&:disabled': {
177
177
  color: "var(--ds-icon-disabled, #8993A4)",
@@ -235,7 +235,7 @@ var selectedStyles = css({
235
235
  // icon span receives dragStart event, instead of button, and since it is not registered as a draggable element
236
236
  // with pragmatic DnD and pragmatic DnD is not triggered
237
237
  var handleIconDragStart = function handleIconDragStart(e) {
238
- if (!browser.chrome || !fg('platform_editor_dnd_update_drag_start_target')) {
238
+ if (!browser.chrome) {
239
239
  return;
240
240
  }
241
241
  // prevent dragStart handler triggered by icon
@@ -878,7 +878,7 @@ export var DragHandle = function DragHandle(_ref) {
878
878
  css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
879
879
  // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
880
880
  // See https://product-fabric.atlassian.net/browse/ED-26266
881
- browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, expValEqualsNoExposure('platform_editor_preview_panel_responsiveness', 'isEnabled', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
881
+ browser.gecko && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && hasHadInteraction && selectedStyles, editorExperiment('platform_editor_preview_panel_responsiveness', true) && editorExperiment('platform_editor_controls', 'control') && dragHandleButtonSmallScreenStyles],
882
882
  ref: buttonRef
883
883
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
884
884
  ,
@@ -33,7 +33,7 @@ var dropTargetLayoutStyle = css({
33
33
  var dropTargetLayoutHintStyle = css({
34
34
  height: '100%',
35
35
  position: 'relative',
36
- borderRight: "1px dashed ".concat("var(--ds-border-focused, ".concat(B200, ")")),
36
+ borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, ".concat(B200, ")")),
37
37
  width: 0
38
38
  });
39
39
  export var DropTargetLayout = function DropTargetLayout(props) {
@@ -261,7 +261,7 @@ var quickInsertStyles = function quickInsertStyles() {
261
261
  },
262
262
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
263
263
  '.blocks-quick-insert-button:focus': {
264
- outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
264
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
265
265
  },
266
266
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
267
267
  '.blocks-quick-insert-visible-container': {
@@ -397,6 +397,8 @@ export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
397
397
  disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
398
398
  });
399
399
  return jsx(Global, {
400
- styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined, editorExperiment('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle]
400
+ styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), editorExperiment('platform_editor_preview_panel_responsiveness', true, {
401
+ exposure: true
402
+ }) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined, editorExperiment('platform_editor_controls', 'variant1') ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle]
401
403
  });
402
404
  };
@@ -51,7 +51,7 @@ var GAP = 4;
51
51
  var dropTargetLayoutHintStyle = css({
52
52
  height: '100%',
53
53
  position: 'absolute',
54
- borderRight: "1px dashed ".concat("var(--ds-border-focused, ".concat(B200, ")")),
54
+ borderRight: "var(--ds-border-width, 1px)".concat(" dashed ", "var(--ds-border-focused, ".concat(B200, ")")),
55
55
  width: 0,
56
56
  left: 0
57
57
  });
@@ -54,7 +54,7 @@ var stickyButtonStyles = xcss({
54
54
  backgroundColor: 'color.background.neutral.subtle.pressed'
55
55
  },
56
56
  ':focus': {
57
- outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
57
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
58
58
  }
59
59
  });
60
60
  var containerStaticStyles = xcss({
@@ -11,7 +11,7 @@ import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared
11
11
  import { akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
12
12
  // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
13
13
  import { Box, xcss } from '@atlaskit/primitives';
14
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
14
+ import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
15
15
  var baseStyles = xcss({
16
16
  transition: 'opacity 0.1s ease-in-out, visibility 0.1s ease-in-out'
17
17
  });
@@ -44,7 +44,9 @@ export var VisibilityContainer = function VisibilityContainer(_ref) {
44
44
  var isEditing = useSharedPluginStateSelector(api, 'blockControls.isEditing');
45
45
  var isMouseOut = useSharedPluginStateSelector(api, 'blockControls.isMouseOut');
46
46
  var shouldHide = isTypeAheadOpen || isEditing || isMouseOut;
47
- if (expValEquals('platform_editor_preview_panel_responsiveness', 'isEnabled', true)) {
47
+ if (editorExperiment('platform_editor_preview_panel_responsiveness', true, {
48
+ exposure: true
49
+ })) {
48
50
  return jsx("div", {
49
51
  css: [baseStylesCSS, shouldHide ? hiddenStylesCSS : visibleStylesCSS]
50
52
  }, children);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "6.3.1",
3
+ "version": "6.3.3",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -34,7 +34,7 @@
34
34
  "@atlaskit/editor-plugin-editor-disabled": "^5.0.0",
35
35
  "@atlaskit/editor-plugin-feature-flags": "^4.0.0",
36
36
  "@atlaskit/editor-plugin-interaction": "^7.0.0",
37
- "@atlaskit/editor-plugin-limited-mode": "^2.0.0",
37
+ "@atlaskit/editor-plugin-limited-mode": "^2.1.0",
38
38
  "@atlaskit/editor-plugin-metrics": "^6.2.0",
39
39
  "@atlaskit/editor-plugin-quick-insert": "^5.0.0",
40
40
  "@atlaskit/editor-plugin-selection": "^5.0.0",
@@ -52,7 +52,7 @@
52
52
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
53
53
  "@atlaskit/primitives": "^14.14.0",
54
54
  "@atlaskit/theme": "^21.0.0",
55
- "@atlaskit/tmp-editor-statsig": "^12.23.0",
55
+ "@atlaskit/tmp-editor-statsig": "^12.25.0",
56
56
  "@atlaskit/tokens": "^6.3.0",
57
57
  "@atlaskit/tooltip": "^20.4.0",
58
58
  "@babel/runtime": "^7.0.0",
@@ -64,7 +64,7 @@
64
64
  "uuid": "^3.1.0"
65
65
  },
66
66
  "peerDependencies": {
67
- "@atlaskit/editor-common": "^109.8.0",
67
+ "@atlaskit/editor-common": "^109.10.0",
68
68
  "react": "^18.2.0",
69
69
  "react-dom": "^18.2.0",
70
70
  "react-intl-next": "npm:react-intl@^5.18.1"
@@ -114,9 +114,6 @@
114
114
  "platform_editor_use_nested_table_pm_nodes": {
115
115
  "type": "boolean"
116
116
  },
117
- "platform_editor_dnd_update_drag_start_target": {
118
- "type": "boolean"
119
- },
120
117
  "platform_editor_track_node_types": {
121
118
  "type": "boolean"
122
119
  },