@atlaskit/editor-plugin-insert-block 0.2.20 → 0.2.21

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 (11) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/cjs/ui/ToolbarInsertBlock/index.js +2 -1
  3. package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js +11 -4
  4. package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup.js +5 -3
  5. package/dist/es2019/ui/ToolbarInsertBlock/index.js +2 -1
  6. package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js +11 -4
  7. package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup.js +7 -3
  8. package/dist/esm/ui/ToolbarInsertBlock/index.js +2 -1
  9. package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js +11 -4
  10. package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup.js +5 -3
  11. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # @atlaskit/editor-plugin-insert-block
2
2
 
3
+ ## 0.2.21
4
+
5
+ ### Patch Changes
6
+
7
+ - [#67051](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/67051) [`08b5bd90a149`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/08b5bd90a149) - [ux] The table selector popup should gradually expand to 10 x 10 rows when hovered
8
+ - Updated dependencies
9
+
3
10
  ## 0.2.20
4
11
 
5
12
  ### Patch Changes
package/dist/cjs/ui/ToolbarInsertBlock/index.js CHANGED
@@ -538,7 +538,8 @@ var ToolbarInsertBlock = exports.ToolbarInsertBlock = /*#__PURE__*/function (_Re
538
538
  popupsBoundariesElement: popupsBoundariesElement,
539
539
  popupsScrollableElement: popupsScrollableElement,
540
540
  handleClickOutside: this.handleTableSelectorClickOutside,
541
- handleEscapeKeydown: this.handleTableSelectorPressEscape
541
+ handleEscapeKeydown: this.handleTableSelectorPressEscape,
542
+ "data-testid": ''
542
543
  });
543
544
  }
544
545
  }, {
package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js CHANGED
@@ -24,6 +24,7 @@ var TABLE_SELECTOR_PADDING_SIDE = 10;
24
24
  var DEFAULT_TABLE_SELECTOR_ROWS = 5;
25
25
  var DEFAULT_TABLE_SELECTOR_COLS = 10;
26
26
  var DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
27
+ var DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
27
28
  var TableSelectorWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_tableSelectorPopup.default);
28
29
  var tableSelectorPopupWrapperStyles = (0, _react2.css)({
29
30
  borderRadius: "var(--ds-border-radius, 3px)",
@@ -60,8 +61,8 @@ var TableSelectorPopup = exports.TableSelectorPopup = function TableSelectorPopu
60
61
  // Calculate number grid cells selected
61
62
  var selectedGridCols = Math.ceil((selectedWidth - TABLE_SELECTOR_PADDING_SIDE + _tableSelectorPopup.TABLE_SELECTOR_BUTTON_GAP) / (_tableSelectorPopup.TABLE_SELECTOR_BUTTON_GAP + _tableSelectorPopup.TABLE_SELECTOR_BUTTON_SIZE));
62
63
  var selectedGridRows = Math.ceil((selectedHeight - TABLE_SELECTOR_PADDING_TOP + _tableSelectorPopup.TABLE_SELECTOR_BUTTON_GAP) / (_tableSelectorPopup.TABLE_SELECTOR_BUTTON_GAP + _tableSelectorPopup.TABLE_SELECTOR_BUTTON_SIZE));
63
-
64
64
  // Keep the selected rows and columns within the defined bounds
65
+ var gridRows = DEFAULT_TABLE_SELECTOR_ROWS;
65
66
  if (selectedGridCols < 1) {
66
67
  selectedGridCols = 1;
67
68
  }
@@ -71,15 +72,21 @@ var TableSelectorPopup = exports.TableSelectorPopup = function TableSelectorPopu
71
72
  if (selectedGridRows < 1) {
72
73
  selectedGridRows = 1;
73
74
  }
74
- if (selectedGridRows > size.maxRow) {
75
- selectedGridRows = size.maxRow;
75
+ // Expand grid when row selection is greater than the default grid size
76
+ if (selectedGridRows >= DEFAULT_TABLE_SELECTOR_ROWS) {
77
+ if (selectedGridRows < DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
78
+ gridRows = selectedGridRows + 1;
79
+ } else {
80
+ selectedGridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
81
+ gridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
82
+ }
76
83
  }
77
84
  if (selectedGridCols !== size.col || selectedGridRows !== size.row) {
78
85
  setSize({
79
86
  col: selectedGridCols,
80
87
  row: selectedGridRows,
81
88
  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
82
- maxRow: DEFAULT_TABLE_SELECTOR_ROWS
89
+ maxRow: gridRows
83
90
  });
84
91
  }
85
92
  }, [size, setSize]);
package/dist/cjs/ui/ToolbarInsertBlock/table-selector-popup.js CHANGED
@@ -79,11 +79,12 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
79
79
  onSelection = _ref3.onSelection,
80
80
  selectedCol = _ref3.selectedCol,
81
81
  selectedRow = _ref3.selectedRow,
82
- intl = _ref3.intl;
82
+ formatMessage = _ref3.intl.formatMessage;
83
83
  var buttons = (0, _react.useMemo)(function () {
84
84
  return createArray(maxCols, maxRows);
85
85
  }, [maxCols, maxRows]);
86
86
  return (0, _react2.jsx)(_primitives.Stack, null, (0, _react2.jsx)("div", {
87
+ "aria-label": "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorPopup)),
87
88
  css:
88
89
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
89
90
  gridWrapperStyles({
@@ -100,10 +101,11 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
100
101
  col: col,
101
102
  row: row,
102
103
  onClick: onSelection,
103
- label: "".concat(intl.formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col)
104
+ label: "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col)
104
105
  });
105
106
  })), (0, _react2.jsx)("span", {
106
- css: selectionSizeTextStyles
107
+ css: selectionSizeTextStyles,
108
+ "aria-hidden": true
107
109
  }, "".concat(selectedRow, " x ").concat(selectedCol)));
108
110
  };
109
111
  var _default = exports.default = (0, _reactIntlNext.injectIntl)(TableSelectorPopup);
package/dist/es2019/ui/ToolbarInsertBlock/index.js CHANGED
@@ -596,7 +596,8 @@ export class ToolbarInsertBlock extends React.PureComponent {
596
596
  popupsBoundariesElement: popupsBoundariesElement,
597
597
  popupsScrollableElement: popupsScrollableElement,
598
598
  handleClickOutside: this.handleTableSelectorClickOutside,
599
- handleEscapeKeydown: this.handleTableSelectorPressEscape
599
+ handleEscapeKeydown: this.handleTableSelectorPressEscape,
600
+ "data-testid": ''
600
601
  });
601
602
  }
602
603
  render() {
package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js CHANGED
@@ -13,6 +13,7 @@ const TABLE_SELECTOR_PADDING_SIDE = 10;
13
13
  const DEFAULT_TABLE_SELECTOR_ROWS = 5;
14
14
  const DEFAULT_TABLE_SELECTOR_COLS = 10;
15
15
  const DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
16
+ const DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
16
17
  const TableSelectorWithListeners = withOuterListeners(tableSelectorPopup);
17
18
  const tableSelectorPopupWrapperStyles = css({
18
19
  borderRadius: "var(--ds-border-radius, 3px)",
@@ -47,8 +48,8 @@ export const TableSelectorPopup = props => {
47
48
  // Calculate number grid cells selected
48
49
  let selectedGridCols = Math.ceil((selectedWidth - TABLE_SELECTOR_PADDING_SIDE + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
49
50
  let selectedGridRows = Math.ceil((selectedHeight - TABLE_SELECTOR_PADDING_TOP + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
50
-
51
51
  // Keep the selected rows and columns within the defined bounds
52
+ let gridRows = DEFAULT_TABLE_SELECTOR_ROWS;
52
53
  if (selectedGridCols < 1) {
53
54
  selectedGridCols = 1;
54
55
  }
@@ -58,15 +59,21 @@ export const TableSelectorPopup = props => {
58
59
  if (selectedGridRows < 1) {
59
60
  selectedGridRows = 1;
60
61
  }
61
- if (selectedGridRows > size.maxRow) {
62
- selectedGridRows = size.maxRow;
62
+ // Expand grid when row selection is greater than the default grid size
63
+ if (selectedGridRows >= DEFAULT_TABLE_SELECTOR_ROWS) {
64
+ if (selectedGridRows < DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
65
+ gridRows = selectedGridRows + 1;
66
+ } else {
67
+ selectedGridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
68
+ gridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
69
+ }
63
70
  }
64
71
  if (selectedGridCols !== size.col || selectedGridRows !== size.row) {
65
72
  setSize({
66
73
  col: selectedGridCols,
67
74
  row: selectedGridRows,
68
75
  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
69
- maxRow: DEFAULT_TABLE_SELECTOR_ROWS
76
+ maxRow: gridRows
70
77
  });
71
78
  }
72
79
  }, [size, setSize]);
package/dist/es2019/ui/ToolbarInsertBlock/table-selector-popup.js CHANGED
@@ -70,12 +70,15 @@ const TableSelectorPopup = ({
70
70
  onSelection,
71
71
  selectedCol,
72
72
  selectedRow,
73
- intl
73
+ intl: {
74
+ formatMessage
75
+ }
74
76
  }) => {
75
77
  const buttons = useMemo(() => {
76
78
  return createArray(maxCols, maxRows);
77
79
  }, [maxCols, maxRows]);
78
80
  return jsx(Stack, null, jsx("div", {
81
+ "aria-label": `${formatMessage(messages.tableSizeSelectorPopup)}`,
79
82
  css:
80
83
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
81
84
  gridWrapperStyles({
@@ -93,10 +96,11 @@ const TableSelectorPopup = ({
93
96
  col: col,
94
97
  row: row,
95
98
  onClick: onSelection,
96
- label: `${intl.formatMessage(messages.tableSizeSelectorButton)} ${row} x ${col}`
99
+ label: `${formatMessage(messages.tableSizeSelectorButton)} ${row} x ${col}`
97
100
  });
98
101
  })), jsx("span", {
99
- css: selectionSizeTextStyles
102
+ css: selectionSizeTextStyles,
103
+ "aria-hidden": true
100
104
  }, `${selectedRow} x ${selectedCol}`));
101
105
  };
102
106
  export default injectIntl(TableSelectorPopup);
package/dist/esm/ui/ToolbarInsertBlock/index.js CHANGED
@@ -528,7 +528,8 @@ export var ToolbarInsertBlock = /*#__PURE__*/function (_React$PureComponent) {
528
528
  popupsBoundariesElement: popupsBoundariesElement,
529
529
  popupsScrollableElement: popupsScrollableElement,
530
530
  handleClickOutside: this.handleTableSelectorClickOutside,
531
- handleEscapeKeydown: this.handleTableSelectorPressEscape
531
+ handleEscapeKeydown: this.handleTableSelectorPressEscape,
532
+ "data-testid": ''
532
533
  });
533
534
  }
534
535
  }, {
package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup-with-listeners.js CHANGED
@@ -14,6 +14,7 @@ var TABLE_SELECTOR_PADDING_SIDE = 10;
14
14
  var DEFAULT_TABLE_SELECTOR_ROWS = 5;
15
15
  var DEFAULT_TABLE_SELECTOR_COLS = 10;
16
16
  var DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
17
+ var DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
17
18
  var TableSelectorWithListeners = withOuterListeners(tableSelectorPopup);
18
19
  var tableSelectorPopupWrapperStyles = css({
19
20
  borderRadius: "var(--ds-border-radius, 3px)",
@@ -50,8 +51,8 @@ export var TableSelectorPopup = function TableSelectorPopup(props) {
50
51
  // Calculate number grid cells selected
51
52
  var selectedGridCols = Math.ceil((selectedWidth - TABLE_SELECTOR_PADDING_SIDE + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
52
53
  var selectedGridRows = Math.ceil((selectedHeight - TABLE_SELECTOR_PADDING_TOP + TABLE_SELECTOR_BUTTON_GAP) / (TABLE_SELECTOR_BUTTON_GAP + TABLE_SELECTOR_BUTTON_SIZE));
53
-
54
54
  // Keep the selected rows and columns within the defined bounds
55
+ var gridRows = DEFAULT_TABLE_SELECTOR_ROWS;
55
56
  if (selectedGridCols < 1) {
56
57
  selectedGridCols = 1;
57
58
  }
@@ -61,15 +62,21 @@ export var TableSelectorPopup = function TableSelectorPopup(props) {
61
62
  if (selectedGridRows < 1) {
62
63
  selectedGridRows = 1;
63
64
  }
64
- if (selectedGridRows > size.maxRow) {
65
- selectedGridRows = size.maxRow;
65
+ // Expand grid when row selection is greater than the default grid size
66
+ if (selectedGridRows >= DEFAULT_TABLE_SELECTOR_ROWS) {
67
+ if (selectedGridRows < DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
68
+ gridRows = selectedGridRows + 1;
69
+ } else {
70
+ selectedGridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
71
+ gridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
72
+ }
66
73
  }
67
74
  if (selectedGridCols !== size.col || selectedGridRows !== size.row) {
68
75
  setSize({
69
76
  col: selectedGridCols,
70
77
  row: selectedGridRows,
71
78
  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
72
- maxRow: DEFAULT_TABLE_SELECTOR_ROWS
79
+ maxRow: gridRows
73
80
  });
74
81
  }
75
82
  }, [size, setSize]);
package/dist/esm/ui/ToolbarInsertBlock/table-selector-popup.js CHANGED
@@ -72,11 +72,12 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
72
72
  onSelection = _ref3.onSelection,
73
73
  selectedCol = _ref3.selectedCol,
74
74
  selectedRow = _ref3.selectedRow,
75
- intl = _ref3.intl;
75
+ formatMessage = _ref3.intl.formatMessage;
76
76
  var buttons = useMemo(function () {
77
77
  return createArray(maxCols, maxRows);
78
78
  }, [maxCols, maxRows]);
79
79
  return jsx(Stack, null, jsx("div", {
80
+ "aria-label": "".concat(formatMessage(messages.tableSizeSelectorPopup)),
80
81
  css:
81
82
  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
82
83
  gridWrapperStyles({
@@ -93,10 +94,11 @@ var TableSelectorPopup = function TableSelectorPopup(_ref3) {
93
94
  col: col,
94
95
  row: row,
95
96
  onClick: onSelection,
96
- label: "".concat(intl.formatMessage(messages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col)
97
+ label: "".concat(formatMessage(messages.tableSizeSelectorButton), " ").concat(row, " x ").concat(col)
97
98
  });
98
99
  })), jsx("span", {
99
- css: selectionSizeTextStyles
100
+ css: selectionSizeTextStyles,
101
+ "aria-hidden": true
100
102
  }, "".concat(selectedRow, " x ").concat(selectedCol)));
101
103
  };
102
104
  export default injectIntl(TableSelectorPopup);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-insert-block",
3
- "version": "0.2.20",
3
+ "version": "0.2.21",
4
4
  "description": "Insert block plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -33,7 +33,7 @@
33
33
  ".": "./src/index.ts"
34
34
  },
35
35
  "dependencies": {
36
- "@atlaskit/editor-common": "^76.39.0",
36
+ "@atlaskit/editor-common": "^76.40.0",
37
37
  "@atlaskit/editor-plugin-analytics": "^0.4.0",
38
38
  "@atlaskit/editor-plugin-block-type": "^3.0.0",
39
39
  "@atlaskit/editor-plugin-code-block": "^0.1.0",