@atlaskit/editor-plugin-block-controls 7.2.4 → 7.2.5

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.
Files changed (5) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/ui/drag-handle.js +22 -5
  3. package/dist/es2019/ui/drag-handle.js +17 -5
  4. package/dist/esm/ui/drag-handle.js +22 -5
  5. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/editor-plugin-block-controls
2
2
 
3
+ ## 7.2.5
4
+
5
+ ### Patch Changes
6
+
7
+ - [`e3ca1a4b9b932`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e3ca1a4b9b932) -
8
+ [ux] ED-29489 Remove focus ring when drag handle is clicked and fix menu closing on menu open
9
+ - Updated dependencies
10
+
3
11
  ## 7.2.4
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/ui/drag-handle.js CHANGED
@@ -127,9 +127,6 @@ var dragHandleButtonStyles = (0, _react2.css)({
127
127
  '&:active': {
128
128
  backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
129
129
  },
130
- '&:focus': {
131
- outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
132
- },
133
130
  '&:disabled': {
134
131
  color: "var(--ds-icon-disabled, #8993A4)",
135
132
  backgroundColor: 'transparent'
@@ -184,6 +181,19 @@ var dragHandleButtonStylesOld = (0, _react2.css)({
184
181
  backgroundColor: "var(--ds-background-disabled, transparent)"
185
182
  }
186
183
  });
184
+ var focusedStylesOld = (0, _react2.css)({
185
+ '&:focus': {
186
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
187
+ }
188
+ });
189
+ var focusedStyles = (0, _react2.css)({
190
+ '&:focus-visible': {
191
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
192
+ }
193
+ });
194
+ var keyboardFocusedDragHandleStyles = (0, _react2.css)({
195
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
196
+ });
187
197
  var dragHandleContainerStyles = (0, _primitives.xcss)({
188
198
  position: 'absolute',
189
199
  boxSizing: 'border-box'
@@ -309,6 +319,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
309
319
  _useState0 = (0, _slicedToArray2.default)(_useState9, 2),
310
320
  positionStylesOld = _useState0[0],
311
321
  setPositionStylesOld = _useState0[1];
322
+ var _useState1 = (0, _react.useState)(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
323
+ _useState10 = (0, _slicedToArray2.default)(_useState1, 2),
324
+ isFocused = _useState10[0],
325
+ setIsFocused = _useState10[1];
312
326
  var _useSharedPluginState = (0, _hooks.useSharedPluginStateWithSelector)(api, ['featureFlags'], function (states) {
313
327
  var _states$featureFlagsS;
314
328
  return {
@@ -941,7 +955,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
941
955
  css: [(0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
942
956
  // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
943
957
  // See https://product-fabric.atlassian.net/browse/ED-26266
944
- _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],
958
+ _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, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && isFocused && keyboardFocusedDragHandleStyles, (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? focusedStyles : focusedStylesOld],
945
959
  ref: buttonRef
946
960
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
947
961
  ,
@@ -955,7 +969,10 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
955
969
  disabled: dragHandleDisabled,
956
970
  "data-editor-block-ctrl-drag-handle": true,
957
971
  "data-testid": "block-ctrl-drag-handle",
958
- "aria-label": (0, _expValEquals.expValEquals)('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : ''
972
+ "aria-label": (0, _expValEquals.expValEquals)('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : '',
973
+ onBlur: (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu', 'isEnabled', true) && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? function () {
974
+ return setIsFocused(false);
975
+ } : undefined
959
976
  }, (0, _react2.jsx)(_primitives.Box, {
960
977
  xcss: iconWrapperStyles
961
978
  // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
package/dist/es2019/ui/drag-handle.js CHANGED
@@ -119,9 +119,6 @@ const dragHandleButtonStyles = css({
119
119
  '&:active': {
120
120
  backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
121
121
  },
122
- '&:focus': {
123
- outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
124
- },
125
122
  '&:disabled': {
126
123
  color: "var(--ds-icon-disabled, #8993A4)",
127
124
  backgroundColor: 'transparent'
@@ -179,6 +176,19 @@ const dragHandleButtonStylesOld = css({
179
176
  backgroundColor: "var(--ds-background-disabled, transparent)"
180
177
  }
181
178
  });
179
+ const focusedStylesOld = css({
180
+ '&:focus': {
181
+ outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
182
+ }
183
+ });
184
+ const focusedStyles = css({
185
+ '&:focus-visible': {
186
+ outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
187
+ }
188
+ });
189
+ const keyboardFocusedDragHandleStyles = css({
190
+ outline: `${"var(--ds-border-width-focused, 2px)"} solid ${"var(--ds-border-focused, #388BFF)"}`
191
+ });
182
192
  const dragHandleContainerStyles = xcss({
183
193
  position: 'absolute',
184
194
  boxSizing: 'border-box'
@@ -289,6 +299,7 @@ export const DragHandle = ({
289
299
  const [positionStylesOld, setPositionStylesOld] = useState({
290
300
  display: 'none'
291
301
  });
302
+ const [isFocused, setIsFocused] = useState(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused));
292
303
  const {
293
304
  macroInteractionUpdates
294
305
  } = useSharedPluginStateWithSelector(api, ['featureFlags'], states => {
@@ -929,7 +940,7 @@ export const DragHandle = ({
929
940
  css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
930
941
  // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
931
942
  // See https://product-fabric.atlassian.net/browse/ED-26266
932
- 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],
943
+ 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, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && isFocused && keyboardFocusedDragHandleStyles, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? focusedStyles : focusedStylesOld],
933
944
  ref: buttonRef
934
945
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
935
946
  ,
@@ -943,7 +954,8 @@ export const DragHandle = ({
943
954
  disabled: dragHandleDisabled,
944
955
  "data-editor-block-ctrl-drag-handle": true,
945
956
  "data-testid": "block-ctrl-drag-handle",
946
- "aria-label": expValEquals('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : ''
957
+ "aria-label": expValEquals('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : '',
958
+ onBlur: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? () => setIsFocused(false) : undefined
947
959
  }, jsx(Box, {
948
960
  xcss: iconWrapperStyles
949
961
  // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
package/dist/esm/ui/drag-handle.js CHANGED
@@ -124,9 +124,6 @@ var dragHandleButtonStyles = css({
124
124
  '&:active': {
125
125
  backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
126
126
  },
127
- '&:focus': {
128
- outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
129
- },
130
127
  '&:disabled': {
131
128
  color: "var(--ds-icon-disabled, #8993A4)",
132
129
  backgroundColor: 'transparent'
@@ -181,6 +178,19 @@ var dragHandleButtonStylesOld = css({
181
178
  backgroundColor: "var(--ds-background-disabled, transparent)"
182
179
  }
183
180
  });
181
+ var focusedStylesOld = css({
182
+ '&:focus': {
183
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
184
+ }
185
+ });
186
+ var focusedStyles = css({
187
+ '&:focus-visible': {
188
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
189
+ }
190
+ });
191
+ var keyboardFocusedDragHandleStyles = css({
192
+ outline: "var(--ds-border-width-focused, 2px)".concat(" solid ", "var(--ds-border-focused, #388BFF)")
193
+ });
184
194
  var dragHandleContainerStyles = xcss({
185
195
  position: 'absolute',
186
196
  boxSizing: 'border-box'
@@ -306,6 +316,10 @@ export var DragHandle = function DragHandle(_ref) {
306
316
  _useState0 = _slicedToArray(_useState9, 2),
307
317
  positionStylesOld = _useState0[0],
308
318
  setPositionStylesOld = _useState0[1];
319
+ var _useState1 = useState(Boolean(handleOptions === null || handleOptions === void 0 ? void 0 : handleOptions.isFocused)),
320
+ _useState10 = _slicedToArray(_useState1, 2),
321
+ isFocused = _useState10[0],
322
+ setIsFocused = _useState10[1];
309
323
  var _useSharedPluginState = useSharedPluginStateWithSelector(api, ['featureFlags'], function (states) {
310
324
  var _states$featureFlagsS;
311
325
  return {
@@ -938,7 +952,7 @@ export var DragHandle = function DragHandle(_ref) {
938
952
  css: [editorExperiment('platform_editor_controls', 'variant1') ? dragHandleButtonStyles : dragHandleButtonStylesOld, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
939
953
  // ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
940
954
  // See https://product-fabric.atlassian.net/browse/ED-26266
941
- 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],
955
+ 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, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) && isFocused && keyboardFocusedDragHandleStyles, expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? focusedStyles : focusedStylesOld],
942
956
  ref: buttonRef
943
957
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
944
958
  ,
@@ -952,7 +966,10 @@ export var DragHandle = function DragHandle(_ref) {
952
966
  disabled: dragHandleDisabled,
953
967
  "data-editor-block-ctrl-drag-handle": true,
954
968
  "data-testid": "block-ctrl-drag-handle",
955
- "aria-label": expValEquals('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : ''
969
+ "aria-label": expValEquals('platform_editor_drag_handle_aria_label', 'isEnabled', true) ? dragHandleAriaLabel : '',
970
+ onBlur: expValEqualsNoExposure('platform_editor_block_menu', 'isEnabled', true) && expValEqualsNoExposure('platform_editor_block_menu_keyboard_navigation', 'isEnabled', true) ? function () {
971
+ return setIsFocused(false);
972
+ } : undefined
956
973
  }, jsx(Box, {
957
974
  xcss: iconWrapperStyles
958
975
  // eslint-disable-next-line @atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "7.2.4",
3
+ "version": "7.2.5",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -44,7 +44,7 @@
44
44
  "@atlaskit/editor-prosemirror": "7.0.0",
45
45
  "@atlaskit/editor-shared-styles": "^3.6.0",
46
46
  "@atlaskit/editor-tables": "^2.9.0",
47
- "@atlaskit/icon": "^28.4.0",
47
+ "@atlaskit/icon": "^28.5.0",
48
48
  "@atlaskit/link": "^3.2.0",
49
49
  "@atlaskit/platform-feature-flags": "^1.1.0",
50
50
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -52,7 +52,7 @@
52
52
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
53
53
  "@atlaskit/primitives": "^14.15.0",
54
54
  "@atlaskit/theme": "^21.0.0",
55
- "@atlaskit/tmp-editor-statsig": "^13.4.0",
55
+ "@atlaskit/tmp-editor-statsig": "^13.5.0",
56
56
  "@atlaskit/tokens": "^6.4.0",
57
57
  "@atlaskit/tooltip": "^20.5.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": "^110.7.0",
67
+ "@atlaskit/editor-common": "^110.8.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"