@atlaskit/editor-plugin-table 24.3.2 → 24.3.4
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 +19 -0
- package/dist/cjs/ui/FloatingContextualButton/index.js +4 -0
- package/dist/cjs/ui/TableMenu/column/items/SortDecreasingItem.compiled.css +3 -0
- package/dist/cjs/ui/TableMenu/column/items/SortDecreasingItem.js +41 -0
- package/dist/cjs/ui/TableMenu/column/items/SortIncreasingItem.compiled.css +3 -0
- package/dist/cjs/ui/TableMenu/column/items/SortIncreasingItem.js +41 -0
- package/dist/es2019/ui/FloatingContextualButton/index.js +4 -0
- package/dist/es2019/ui/TableMenu/column/items/SortDecreasingItem.compiled.css +3 -0
- package/dist/es2019/ui/TableMenu/column/items/SortDecreasingItem.js +40 -1
- package/dist/es2019/ui/TableMenu/column/items/SortIncreasingItem.compiled.css +3 -0
- package/dist/es2019/ui/TableMenu/column/items/SortIncreasingItem.js +40 -1
- package/dist/esm/ui/FloatingContextualButton/index.js +4 -0
- package/dist/esm/ui/TableMenu/column/items/SortDecreasingItem.compiled.css +3 -0
- package/dist/esm/ui/TableMenu/column/items/SortDecreasingItem.js +42 -1
- package/dist/esm/ui/TableMenu/column/items/SortIncreasingItem.compiled.css +3 -0
- package/dist/esm/ui/TableMenu/column/items/SortIncreasingItem.js +42 -1
- package/dist/types/ui/TableMenu/column/items/SortDecreasingItem.d.ts +4 -0
- package/dist/types/ui/TableMenu/column/items/SortIncreasingItem.d.ts +4 -0
- package/package.json +17 -14
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-table
|
|
2
2
|
|
|
3
|
+
## 24.3.4
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`cc7e55c918e23`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/cc7e55c918e23) -
|
|
8
|
+
[ux] Adds info icon next to visually disabled table column sort buttons with a tooltip explaining
|
|
9
|
+
that sort won't work when merged cells present.
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 24.3.3
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [`e79324e600259`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e79324e600259) -
|
|
17
|
+
[ED] Add gated testid (pm-table-contextual-menu-button) to the table cell options button to anchor
|
|
18
|
+
the Post Office changeboarding spotlight (cc-editor-table-cell-menu-changes), gated behind the
|
|
19
|
+
platform_editor_table_menu_updates experiment
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 24.3.2
|
|
4
23
|
|
|
5
24
|
### Patch Changes
|
|
@@ -148,6 +148,10 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
|
|
|
148
148
|
}),
|
|
149
149
|
"aria-label": labelCellOptions,
|
|
150
150
|
"aria-expanded": isCellMenuOpen
|
|
151
|
+
// Stable anchor used by the Post Office changeboarding spotlight
|
|
152
|
+
// (cc-editor-table-cell-menu-changes) to target the cell options button.
|
|
153
|
+
,
|
|
154
|
+
testId: (0, _expValEquals.expValEquals)('platform_editor_table_menu_updates', 'isEnabled', true) ? 'pm-table-contextual-menu-button' : undefined
|
|
151
155
|
}));
|
|
152
156
|
var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
|
|
153
157
|
var parentStickyNative = targetCellRef.parentElement && ((0, _platformFeatureFlags.fg)('platform_editor_table_sticky_header_patch_4') ? tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(_types.TableCssClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW) : targetCellRef.parentElement.classList.contains(_types.TableCssClassName.NATIVE_STICKY));
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* SortDecreasingItem.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
1
2
|
"use strict";
|
|
2
3
|
|
|
3
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -5,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.SortDecreasingItem = void 0;
|
|
9
|
+
require("./SortDecreasingItem.compiled.css");
|
|
10
|
+
var _runtime = require("@compiled/react/runtime");
|
|
11
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
8
12
|
var _react = _interopRequireDefault(require("react"));
|
|
9
13
|
var _reactIntl = require("react-intl");
|
|
10
14
|
var _customSteps = require("@atlaskit/custom-steps");
|
|
@@ -12,9 +16,16 @@ var _analytics = require("@atlaskit/editor-common/analytics");
|
|
|
12
16
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
13
17
|
var _utils = require("@atlaskit/editor-tables/utils");
|
|
14
18
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
19
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
20
|
+
var _compiled = require("@atlaskit/primitives/compiled");
|
|
21
|
+
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
15
22
|
var _commands = require("../../../../pm-plugins/commands");
|
|
16
23
|
var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
|
|
17
24
|
var _TableMenuContext = require("../../shared/TableMenuContext");
|
|
25
|
+
var styles = {
|
|
26
|
+
disabledLabel: "_syaz1gmx",
|
|
27
|
+
infoIconTrigger: "_1e0c116y _4cvr1h6o"
|
|
28
|
+
};
|
|
18
29
|
var SortDecreasingItem = exports.SortDecreasingItem = function SortDecreasingItem(_ref) {
|
|
19
30
|
var api = _ref.api;
|
|
20
31
|
var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
|
|
@@ -22,6 +33,7 @@ var SortDecreasingItem = exports.SortDecreasingItem = function SortDecreasingIte
|
|
|
22
33
|
editorView = _ref2.editorView;
|
|
23
34
|
var _useIntl = (0, _reactIntl.useIntl)(),
|
|
24
35
|
formatMessage = _useIntl.formatMessage;
|
|
36
|
+
var hasMergedCellsInTable = Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable);
|
|
25
37
|
var handleClick = function handleClick() {
|
|
26
38
|
var _api$analytics;
|
|
27
39
|
if (!editorView) {
|
|
@@ -36,6 +48,35 @@ var SortDecreasingItem = exports.SortDecreasingItem = function SortDecreasingIte
|
|
|
36
48
|
api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)(api));
|
|
37
49
|
api === null || api === void 0 || api.core.actions.focus();
|
|
38
50
|
};
|
|
51
|
+
|
|
52
|
+
// When the table has merged cells, the item remains interactive but is rendered
|
|
53
|
+
// with a disabled-looking label and leading icon, alongside an enabled info icon
|
|
54
|
+
// that surfaces why sorting is unavailable.
|
|
55
|
+
if (hasMergedCellsInTable && (0, _platformFeatureFlags.fg)('platform_editor_table_menu_updates_patch_1')) {
|
|
56
|
+
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
|
|
57
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.SortDescendingIcon, {
|
|
58
|
+
label: "",
|
|
59
|
+
size: "small",
|
|
60
|
+
color: "var(--ds-text-disabled, #080F214A)"
|
|
61
|
+
}),
|
|
62
|
+
elemAfter: /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
63
|
+
content: formatMessage(_messages.tableMessages.canNotSortTableNoIcon),
|
|
64
|
+
position: "top"
|
|
65
|
+
}, function (tooltipProps) {
|
|
66
|
+
return /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
|
|
67
|
+
as: "span",
|
|
68
|
+
xcss: styles.infoIconTrigger
|
|
69
|
+
}, tooltipProps), /*#__PURE__*/_react.default.createElement(_editorToolbar.InformationCircleIcon, {
|
|
70
|
+
label: "",
|
|
71
|
+
size: "small",
|
|
72
|
+
color: "var(--ds-icon, #292A2E)"
|
|
73
|
+
}));
|
|
74
|
+
})
|
|
75
|
+
}, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
76
|
+
as: "span",
|
|
77
|
+
xcss: styles.disabledLabel
|
|
78
|
+
}, formatMessage(_messages.tableMessages.sortColumnDecreasing)));
|
|
79
|
+
}
|
|
39
80
|
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
|
|
40
81
|
onClick: handleClick,
|
|
41
82
|
isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* SortIncreasingItem.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
1
2
|
"use strict";
|
|
2
3
|
|
|
3
4
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
@@ -5,6 +6,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
6
|
value: true
|
|
6
7
|
});
|
|
7
8
|
exports.SortIncreasingItem = void 0;
|
|
9
|
+
require("./SortIncreasingItem.compiled.css");
|
|
10
|
+
var _runtime = require("@compiled/react/runtime");
|
|
11
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
8
12
|
var _react = _interopRequireDefault(require("react"));
|
|
9
13
|
var _reactIntl = require("react-intl");
|
|
10
14
|
var _customSteps = require("@atlaskit/custom-steps");
|
|
@@ -12,9 +16,16 @@ var _analytics = require("@atlaskit/editor-common/analytics");
|
|
|
12
16
|
var _messages = require("@atlaskit/editor-common/messages");
|
|
13
17
|
var _utils = require("@atlaskit/editor-tables/utils");
|
|
14
18
|
var _editorToolbar = require("@atlaskit/editor-toolbar");
|
|
19
|
+
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
20
|
+
var _compiled = require("@atlaskit/primitives/compiled");
|
|
21
|
+
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
15
22
|
var _commands = require("../../../../pm-plugins/commands");
|
|
16
23
|
var _commandsWithAnalytics = require("../../../../pm-plugins/commands/commands-with-analytics");
|
|
17
24
|
var _TableMenuContext = require("../../shared/TableMenuContext");
|
|
25
|
+
var styles = {
|
|
26
|
+
disabledLabel: "_syaz1gmx",
|
|
27
|
+
infoIconTrigger: "_1e0c116y _4cvr1h6o"
|
|
28
|
+
};
|
|
18
29
|
var SortIncreasingItem = exports.SortIncreasingItem = function SortIncreasingItem(_ref) {
|
|
19
30
|
var api = _ref.api;
|
|
20
31
|
var tableMenuContext = (0, _TableMenuContext.useTableMenuContext)();
|
|
@@ -22,6 +33,7 @@ var SortIncreasingItem = exports.SortIncreasingItem = function SortIncreasingIte
|
|
|
22
33
|
editorView = _ref2.editorView;
|
|
23
34
|
var _useIntl = (0, _reactIntl.useIntl)(),
|
|
24
35
|
formatMessage = _useIntl.formatMessage;
|
|
36
|
+
var hasMergedCellsInTable = Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable);
|
|
25
37
|
var handleClick = function handleClick() {
|
|
26
38
|
var _api$analytics;
|
|
27
39
|
if (!editorView) {
|
|
@@ -36,6 +48,35 @@ var SortIncreasingItem = exports.SortIncreasingItem = function SortIncreasingIte
|
|
|
36
48
|
api === null || api === void 0 || api.core.actions.execute((0, _commands.closeActiveTableMenu)(api));
|
|
37
49
|
api === null || api === void 0 || api.core.actions.focus();
|
|
38
50
|
};
|
|
51
|
+
|
|
52
|
+
// When the table has merged cells, the item remains interactive but is rendered
|
|
53
|
+
// with a disabled-looking label and leading icon, alongside an enabled info icon
|
|
54
|
+
// that surfaces why sorting is unavailable.
|
|
55
|
+
if (hasMergedCellsInTable && (0, _platformFeatureFlags.fg)('platform_editor_table_menu_updates_patch_1')) {
|
|
56
|
+
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
|
|
57
|
+
elemBefore: /*#__PURE__*/_react.default.createElement(_editorToolbar.SortAscendingIcon, {
|
|
58
|
+
label: "",
|
|
59
|
+
size: "small",
|
|
60
|
+
color: "var(--ds-text-disabled, #080F214A)"
|
|
61
|
+
}),
|
|
62
|
+
elemAfter: /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
63
|
+
content: formatMessage(_messages.tableMessages.canNotSortTableNoIcon),
|
|
64
|
+
position: "top"
|
|
65
|
+
}, function (tooltipProps) {
|
|
66
|
+
return /*#__PURE__*/_react.default.createElement(_compiled.Box, (0, _extends2.default)({
|
|
67
|
+
as: "span",
|
|
68
|
+
xcss: styles.infoIconTrigger
|
|
69
|
+
}, tooltipProps), /*#__PURE__*/_react.default.createElement(_editorToolbar.InformationCircleIcon, {
|
|
70
|
+
label: "",
|
|
71
|
+
size: "small",
|
|
72
|
+
color: "var(--ds-icon, #292A2E)"
|
|
73
|
+
}));
|
|
74
|
+
})
|
|
75
|
+
}, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
76
|
+
as: "span",
|
|
77
|
+
xcss: styles.disabledLabel
|
|
78
|
+
}, formatMessage(_messages.tableMessages.sortColumnIncreasing)));
|
|
79
|
+
}
|
|
39
80
|
return /*#__PURE__*/_react.default.createElement(_editorToolbar.ToolbarDropdownItem, {
|
|
40
81
|
onClick: handleClick,
|
|
41
82
|
isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
|
|
@@ -150,6 +150,10 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
|
|
|
150
150
|
}),
|
|
151
151
|
"aria-label": labelCellOptions,
|
|
152
152
|
"aria-expanded": isCellMenuOpen
|
|
153
|
+
// Stable anchor used by the Post Office changeboarding spotlight
|
|
154
|
+
// (cc-editor-table-cell-menu-changes) to target the cell options button.
|
|
155
|
+
,
|
|
156
|
+
testId: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? 'pm-table-contextual-menu-button' : undefined
|
|
153
157
|
}));
|
|
154
158
|
const parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
|
|
155
159
|
const parentStickyNative = targetCellRef.parentElement && (fg('platform_editor_table_sticky_header_patch_4') ? tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW) : targetCellRef.parentElement.classList.contains(ClassName.NATIVE_STICKY));
|
|
@@ -1,13 +1,24 @@
|
|
|
1
|
+
/* SortDecreasingItem.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import "./SortDecreasingItem.compiled.css";
|
|
4
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
1
5
|
import React from 'react';
|
|
2
6
|
import { useIntl } from 'react-intl';
|
|
3
7
|
import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
|
|
4
8
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
5
9
|
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
10
|
import { getSelectionRect } from '@atlaskit/editor-tables/utils';
|
|
7
|
-
import { SortDescendingIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
11
|
+
import { InformationCircleIcon, SortDescendingIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
12
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
13
|
+
import { Box } from '@atlaskit/primitives/compiled';
|
|
14
|
+
import Tooltip from '@atlaskit/tooltip';
|
|
8
15
|
import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
|
|
9
16
|
import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
|
|
10
17
|
import { useTableMenuContext } from '../../shared/TableMenuContext';
|
|
18
|
+
const styles = {
|
|
19
|
+
disabledLabel: "_syaz1gmx",
|
|
20
|
+
infoIconTrigger: "_1e0c116y _4cvr1h6o"
|
|
21
|
+
};
|
|
11
22
|
export const SortDecreasingItem = ({
|
|
12
23
|
api
|
|
13
24
|
}) => {
|
|
@@ -18,6 +29,7 @@ export const SortDecreasingItem = ({
|
|
|
18
29
|
const {
|
|
19
30
|
formatMessage
|
|
20
31
|
} = useIntl();
|
|
32
|
+
const hasMergedCellsInTable = Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable);
|
|
21
33
|
const handleClick = () => {
|
|
22
34
|
var _api$analytics;
|
|
23
35
|
if (!editorView) {
|
|
@@ -32,6 +44,33 @@ export const SortDecreasingItem = ({
|
|
|
32
44
|
api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
|
|
33
45
|
api === null || api === void 0 ? void 0 : api.core.actions.focus();
|
|
34
46
|
};
|
|
47
|
+
|
|
48
|
+
// When the table has merged cells, the item remains interactive but is rendered
|
|
49
|
+
// with a disabled-looking label and leading icon, alongside an enabled info icon
|
|
50
|
+
// that surfaces why sorting is unavailable.
|
|
51
|
+
if (hasMergedCellsInTable && fg('platform_editor_table_menu_updates_patch_1')) {
|
|
52
|
+
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
53
|
+
elemBefore: /*#__PURE__*/React.createElement(SortDescendingIcon, {
|
|
54
|
+
label: "",
|
|
55
|
+
size: "small",
|
|
56
|
+
color: "var(--ds-text-disabled, #080F214A)"
|
|
57
|
+
}),
|
|
58
|
+
elemAfter: /*#__PURE__*/React.createElement(Tooltip, {
|
|
59
|
+
content: formatMessage(messages.canNotSortTableNoIcon),
|
|
60
|
+
position: "top"
|
|
61
|
+
}, tooltipProps => /*#__PURE__*/React.createElement(Box, _extends({
|
|
62
|
+
as: "span",
|
|
63
|
+
xcss: styles.infoIconTrigger
|
|
64
|
+
}, tooltipProps), /*#__PURE__*/React.createElement(InformationCircleIcon, {
|
|
65
|
+
label: "",
|
|
66
|
+
size: "small",
|
|
67
|
+
color: "var(--ds-icon, #292A2E)"
|
|
68
|
+
})))
|
|
69
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
70
|
+
as: "span",
|
|
71
|
+
xcss: styles.disabledLabel
|
|
72
|
+
}, formatMessage(messages.sortColumnDecreasing)));
|
|
73
|
+
}
|
|
35
74
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
36
75
|
onClick: handleClick,
|
|
37
76
|
isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
|
|
@@ -1,13 +1,24 @@
|
|
|
1
|
+
/* SortIncreasingItem.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import "./SortIncreasingItem.compiled.css";
|
|
4
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
1
5
|
import React from 'react';
|
|
2
6
|
import { useIntl } from 'react-intl';
|
|
3
7
|
import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
|
|
4
8
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
5
9
|
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
10
|
import { getSelectionRect } from '@atlaskit/editor-tables/utils';
|
|
7
|
-
import { SortAscendingIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
11
|
+
import { InformationCircleIcon, SortAscendingIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
12
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
13
|
+
import { Box } from '@atlaskit/primitives/compiled';
|
|
14
|
+
import Tooltip from '@atlaskit/tooltip';
|
|
8
15
|
import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
|
|
9
16
|
import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
|
|
10
17
|
import { useTableMenuContext } from '../../shared/TableMenuContext';
|
|
18
|
+
const styles = {
|
|
19
|
+
disabledLabel: "_syaz1gmx",
|
|
20
|
+
infoIconTrigger: "_1e0c116y _4cvr1h6o"
|
|
21
|
+
};
|
|
11
22
|
export const SortIncreasingItem = ({
|
|
12
23
|
api
|
|
13
24
|
}) => {
|
|
@@ -18,6 +29,7 @@ export const SortIncreasingItem = ({
|
|
|
18
29
|
const {
|
|
19
30
|
formatMessage
|
|
20
31
|
} = useIntl();
|
|
32
|
+
const hasMergedCellsInTable = Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable);
|
|
21
33
|
const handleClick = () => {
|
|
22
34
|
var _api$analytics;
|
|
23
35
|
if (!editorView) {
|
|
@@ -32,6 +44,33 @@ export const SortIncreasingItem = ({
|
|
|
32
44
|
api === null || api === void 0 ? void 0 : api.core.actions.execute(closeActiveTableMenu(api));
|
|
33
45
|
api === null || api === void 0 ? void 0 : api.core.actions.focus();
|
|
34
46
|
};
|
|
47
|
+
|
|
48
|
+
// When the table has merged cells, the item remains interactive but is rendered
|
|
49
|
+
// with a disabled-looking label and leading icon, alongside an enabled info icon
|
|
50
|
+
// that surfaces why sorting is unavailable.
|
|
51
|
+
if (hasMergedCellsInTable && fg('platform_editor_table_menu_updates_patch_1')) {
|
|
52
|
+
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
53
|
+
elemBefore: /*#__PURE__*/React.createElement(SortAscendingIcon, {
|
|
54
|
+
label: "",
|
|
55
|
+
size: "small",
|
|
56
|
+
color: "var(--ds-text-disabled, #080F214A)"
|
|
57
|
+
}),
|
|
58
|
+
elemAfter: /*#__PURE__*/React.createElement(Tooltip, {
|
|
59
|
+
content: formatMessage(messages.canNotSortTableNoIcon),
|
|
60
|
+
position: "top"
|
|
61
|
+
}, tooltipProps => /*#__PURE__*/React.createElement(Box, _extends({
|
|
62
|
+
as: "span",
|
|
63
|
+
xcss: styles.infoIconTrigger
|
|
64
|
+
}, tooltipProps), /*#__PURE__*/React.createElement(InformationCircleIcon, {
|
|
65
|
+
label: "",
|
|
66
|
+
size: "small",
|
|
67
|
+
color: "var(--ds-icon, #292A2E)"
|
|
68
|
+
})))
|
|
69
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
70
|
+
as: "span",
|
|
71
|
+
xcss: styles.disabledLabel
|
|
72
|
+
}, formatMessage(messages.sortColumnIncreasing)));
|
|
73
|
+
}
|
|
35
74
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
36
75
|
onClick: handleClick,
|
|
37
76
|
isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
|
|
@@ -137,6 +137,10 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
|
|
|
137
137
|
}),
|
|
138
138
|
"aria-label": labelCellOptions,
|
|
139
139
|
"aria-expanded": isCellMenuOpen
|
|
140
|
+
// Stable anchor used by the Post Office changeboarding spotlight
|
|
141
|
+
// (cc-editor-table-cell-menu-changes) to target the cell options button.
|
|
142
|
+
,
|
|
143
|
+
testId: expValEquals('platform_editor_table_menu_updates', 'isEnabled', true) ? 'pm-table-contextual-menu-button' : undefined
|
|
140
144
|
}));
|
|
141
145
|
var parentSticky = targetCellRef.parentElement && targetCellRef.parentElement.className.indexOf('sticky') > -1;
|
|
142
146
|
var parentStickyNative = targetCellRef.parentElement && (fg('platform_editor_table_sticky_header_patch_4') ? tableWrapper === null || tableWrapper === void 0 ? void 0 : tableWrapper.classList.contains(ClassName.TABLE_NODE_WRAPPER_NO_OVERFLOW) : targetCellRef.parentElement.classList.contains(ClassName.NATIVE_STICKY));
|
|
@@ -1,13 +1,24 @@
|
|
|
1
|
+
/* SortDecreasingItem.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import "./SortDecreasingItem.compiled.css";
|
|
4
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
1
5
|
import React from 'react';
|
|
2
6
|
import { useIntl } from 'react-intl';
|
|
3
7
|
import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
|
|
4
8
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
5
9
|
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
10
|
import { getSelectionRect } from '@atlaskit/editor-tables/utils';
|
|
7
|
-
import { SortDescendingIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
11
|
+
import { InformationCircleIcon, SortDescendingIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
12
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
13
|
+
import { Box } from '@atlaskit/primitives/compiled';
|
|
14
|
+
import Tooltip from '@atlaskit/tooltip';
|
|
8
15
|
import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
|
|
9
16
|
import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
|
|
10
17
|
import { useTableMenuContext } from '../../shared/TableMenuContext';
|
|
18
|
+
var styles = {
|
|
19
|
+
disabledLabel: "_syaz1gmx",
|
|
20
|
+
infoIconTrigger: "_1e0c116y _4cvr1h6o"
|
|
21
|
+
};
|
|
11
22
|
export var SortDecreasingItem = function SortDecreasingItem(_ref) {
|
|
12
23
|
var api = _ref.api;
|
|
13
24
|
var tableMenuContext = useTableMenuContext();
|
|
@@ -15,6 +26,7 @@ export var SortDecreasingItem = function SortDecreasingItem(_ref) {
|
|
|
15
26
|
editorView = _ref2.editorView;
|
|
16
27
|
var _useIntl = useIntl(),
|
|
17
28
|
formatMessage = _useIntl.formatMessage;
|
|
29
|
+
var hasMergedCellsInTable = Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable);
|
|
18
30
|
var handleClick = function handleClick() {
|
|
19
31
|
var _api$analytics;
|
|
20
32
|
if (!editorView) {
|
|
@@ -29,6 +41,35 @@ export var SortDecreasingItem = function SortDecreasingItem(_ref) {
|
|
|
29
41
|
api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
|
|
30
42
|
api === null || api === void 0 || api.core.actions.focus();
|
|
31
43
|
};
|
|
44
|
+
|
|
45
|
+
// When the table has merged cells, the item remains interactive but is rendered
|
|
46
|
+
// with a disabled-looking label and leading icon, alongside an enabled info icon
|
|
47
|
+
// that surfaces why sorting is unavailable.
|
|
48
|
+
if (hasMergedCellsInTable && fg('platform_editor_table_menu_updates_patch_1')) {
|
|
49
|
+
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
50
|
+
elemBefore: /*#__PURE__*/React.createElement(SortDescendingIcon, {
|
|
51
|
+
label: "",
|
|
52
|
+
size: "small",
|
|
53
|
+
color: "var(--ds-text-disabled, #080F214A)"
|
|
54
|
+
}),
|
|
55
|
+
elemAfter: /*#__PURE__*/React.createElement(Tooltip, {
|
|
56
|
+
content: formatMessage(messages.canNotSortTableNoIcon),
|
|
57
|
+
position: "top"
|
|
58
|
+
}, function (tooltipProps) {
|
|
59
|
+
return /*#__PURE__*/React.createElement(Box, _extends({
|
|
60
|
+
as: "span",
|
|
61
|
+
xcss: styles.infoIconTrigger
|
|
62
|
+
}, tooltipProps), /*#__PURE__*/React.createElement(InformationCircleIcon, {
|
|
63
|
+
label: "",
|
|
64
|
+
size: "small",
|
|
65
|
+
color: "var(--ds-icon, #292A2E)"
|
|
66
|
+
}));
|
|
67
|
+
})
|
|
68
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
69
|
+
as: "span",
|
|
70
|
+
xcss: styles.disabledLabel
|
|
71
|
+
}, formatMessage(messages.sortColumnDecreasing)));
|
|
72
|
+
}
|
|
32
73
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
33
74
|
onClick: handleClick,
|
|
34
75
|
isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
|
|
@@ -1,13 +1,24 @@
|
|
|
1
|
+
/* SortIncreasingItem.tsx generated by @compiled/babel-plugin v0.39.1 */
|
|
2
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
3
|
+
import "./SortIncreasingItem.compiled.css";
|
|
4
|
+
import { ax, ix } from "@compiled/react/runtime";
|
|
1
5
|
import React from 'react';
|
|
2
6
|
import { useIntl } from 'react-intl';
|
|
3
7
|
import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
|
|
4
8
|
import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
|
|
5
9
|
import { tableMessages as messages } from '@atlaskit/editor-common/messages';
|
|
6
10
|
import { getSelectionRect } from '@atlaskit/editor-tables/utils';
|
|
7
|
-
import { SortAscendingIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
11
|
+
import { InformationCircleIcon, SortAscendingIcon, ToolbarDropdownItem } from '@atlaskit/editor-toolbar';
|
|
12
|
+
import { fg } from '@atlaskit/platform-feature-flags';
|
|
13
|
+
import { Box } from '@atlaskit/primitives/compiled';
|
|
14
|
+
import Tooltip from '@atlaskit/tooltip';
|
|
8
15
|
import { closeActiveTableMenu } from '../../../../pm-plugins/commands';
|
|
9
16
|
import { sortColumnWithAnalytics } from '../../../../pm-plugins/commands/commands-with-analytics';
|
|
10
17
|
import { useTableMenuContext } from '../../shared/TableMenuContext';
|
|
18
|
+
var styles = {
|
|
19
|
+
disabledLabel: "_syaz1gmx",
|
|
20
|
+
infoIconTrigger: "_1e0c116y _4cvr1h6o"
|
|
21
|
+
};
|
|
11
22
|
export var SortIncreasingItem = function SortIncreasingItem(_ref) {
|
|
12
23
|
var api = _ref.api;
|
|
13
24
|
var tableMenuContext = useTableMenuContext();
|
|
@@ -15,6 +26,7 @@ export var SortIncreasingItem = function SortIncreasingItem(_ref) {
|
|
|
15
26
|
editorView = _ref2.editorView;
|
|
16
27
|
var _useIntl = useIntl(),
|
|
17
28
|
formatMessage = _useIntl.formatMessage;
|
|
29
|
+
var hasMergedCellsInTable = Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable);
|
|
18
30
|
var handleClick = function handleClick() {
|
|
19
31
|
var _api$analytics;
|
|
20
32
|
if (!editorView) {
|
|
@@ -29,6 +41,35 @@ export var SortIncreasingItem = function SortIncreasingItem(_ref) {
|
|
|
29
41
|
api === null || api === void 0 || api.core.actions.execute(closeActiveTableMenu(api));
|
|
30
42
|
api === null || api === void 0 || api.core.actions.focus();
|
|
31
43
|
};
|
|
44
|
+
|
|
45
|
+
// When the table has merged cells, the item remains interactive but is rendered
|
|
46
|
+
// with a disabled-looking label and leading icon, alongside an enabled info icon
|
|
47
|
+
// that surfaces why sorting is unavailable.
|
|
48
|
+
if (hasMergedCellsInTable && fg('platform_editor_table_menu_updates_patch_1')) {
|
|
49
|
+
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
50
|
+
elemBefore: /*#__PURE__*/React.createElement(SortAscendingIcon, {
|
|
51
|
+
label: "",
|
|
52
|
+
size: "small",
|
|
53
|
+
color: "var(--ds-text-disabled, #080F214A)"
|
|
54
|
+
}),
|
|
55
|
+
elemAfter: /*#__PURE__*/React.createElement(Tooltip, {
|
|
56
|
+
content: formatMessage(messages.canNotSortTableNoIcon),
|
|
57
|
+
position: "top"
|
|
58
|
+
}, function (tooltipProps) {
|
|
59
|
+
return /*#__PURE__*/React.createElement(Box, _extends({
|
|
60
|
+
as: "span",
|
|
61
|
+
xcss: styles.infoIconTrigger
|
|
62
|
+
}, tooltipProps), /*#__PURE__*/React.createElement(InformationCircleIcon, {
|
|
63
|
+
label: "",
|
|
64
|
+
size: "small",
|
|
65
|
+
color: "var(--ds-icon, #292A2E)"
|
|
66
|
+
}));
|
|
67
|
+
})
|
|
68
|
+
}, /*#__PURE__*/React.createElement(Box, {
|
|
69
|
+
as: "span",
|
|
70
|
+
xcss: styles.disabledLabel
|
|
71
|
+
}, formatMessage(messages.sortColumnIncreasing)));
|
|
72
|
+
}
|
|
32
73
|
return /*#__PURE__*/React.createElement(ToolbarDropdownItem, {
|
|
33
74
|
onClick: handleClick,
|
|
34
75
|
isDisabled: Boolean(tableMenuContext === null || tableMenuContext === void 0 ? void 0 : tableMenuContext.hasMergedCellsInTable),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-table",
|
|
3
|
-
"version": "24.3.
|
|
3
|
+
"version": "24.3.4",
|
|
4
4
|
"description": "Table plugin for the @atlaskit/editor",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
23
|
"@atlaskit/adf-schema": "^56.0.0",
|
|
24
|
-
"@atlaskit/button": "^24.
|
|
24
|
+
"@atlaskit/button": "^24.3.0",
|
|
25
25
|
"@atlaskit/custom-steps": "^1.0.0",
|
|
26
26
|
"@atlaskit/editor-palette": "^3.1.0",
|
|
27
27
|
"@atlaskit/editor-plugin-accessibility-utils": "^12.0.0",
|
|
@@ -29,7 +29,7 @@
|
|
|
29
29
|
"@atlaskit/editor-plugin-batch-attribute-updates": "^12.0.0",
|
|
30
30
|
"@atlaskit/editor-plugin-content-insertion": "^12.0.0",
|
|
31
31
|
"@atlaskit/editor-plugin-editor-viewmode": "^14.0.0",
|
|
32
|
-
"@atlaskit/editor-plugin-extension": "15.0.
|
|
32
|
+
"@atlaskit/editor-plugin-extension": "15.0.12",
|
|
33
33
|
"@atlaskit/editor-plugin-guideline": "^12.0.0",
|
|
34
34
|
"@atlaskit/editor-plugin-interaction": "^22.0.0",
|
|
35
35
|
"@atlaskit/editor-plugin-limited-mode": "^9.0.0",
|
|
@@ -41,21 +41,21 @@
|
|
|
41
41
|
"@atlaskit/editor-prosemirror": "^8.0.0",
|
|
42
42
|
"@atlaskit/editor-shared-styles": "^4.0.0",
|
|
43
43
|
"@atlaskit/editor-tables": "^3.0.0",
|
|
44
|
-
"@atlaskit/editor-toolbar": "^2.
|
|
45
|
-
"@atlaskit/editor-ui-control-model": "^2.
|
|
46
|
-
"@atlaskit/icon": "^36.
|
|
47
|
-
"@atlaskit/icon-lab": "^7.
|
|
44
|
+
"@atlaskit/editor-toolbar": "^2.1.0",
|
|
45
|
+
"@atlaskit/editor-ui-control-model": "^2.1.0",
|
|
46
|
+
"@atlaskit/icon": "^36.1.0",
|
|
47
|
+
"@atlaskit/icon-lab": "^7.2.0",
|
|
48
48
|
"@atlaskit/insm": "^1.0.0",
|
|
49
|
-
"@atlaskit/menu": "^9.
|
|
49
|
+
"@atlaskit/menu": "^9.1.0",
|
|
50
50
|
"@atlaskit/platform-feature-flags": "^2.0.0",
|
|
51
51
|
"@atlaskit/pragmatic-drag-and-drop": "^2.0.0",
|
|
52
52
|
"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^3.0.0",
|
|
53
53
|
"@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
|
|
54
|
-
"@atlaskit/primitives": "^20.
|
|
55
|
-
"@atlaskit/tmp-editor-statsig": "^114.
|
|
56
|
-
"@atlaskit/toggle": "^17.
|
|
57
|
-
"@atlaskit/tokens": "^15.
|
|
58
|
-
"@atlaskit/tooltip": "^23.
|
|
54
|
+
"@atlaskit/primitives": "^20.2.0",
|
|
55
|
+
"@atlaskit/tmp-editor-statsig": "^114.5.0",
|
|
56
|
+
"@atlaskit/toggle": "^17.1.0",
|
|
57
|
+
"@atlaskit/tokens": "^15.2.0",
|
|
58
|
+
"@atlaskit/tooltip": "^23.1.0",
|
|
59
59
|
"@babel/runtime": "^7.0.0",
|
|
60
60
|
"@compiled/react": "^0.20.0",
|
|
61
61
|
"@emotion/react": "^11.7.1",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"uuid": "^3.1.0"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
|
-
"@atlaskit/editor-common": "^116.
|
|
70
|
+
"@atlaskit/editor-common": "^116.17.0",
|
|
71
71
|
"react": "^18.2.0",
|
|
72
72
|
"react-dom": "^18.2.0",
|
|
73
73
|
"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"
|
|
@@ -168,6 +168,9 @@
|
|
|
168
168
|
},
|
|
169
169
|
"platform_editor_ai_table_ai_streaming_pos_fix": {
|
|
170
170
|
"type": "boolean"
|
|
171
|
+
},
|
|
172
|
+
"platform_editor_table_menu_updates_patch_1": {
|
|
173
|
+
"type": "boolean"
|
|
171
174
|
}
|
|
172
175
|
},
|
|
173
176
|
"devDependencies": {
|