@atlaskit/renderer 124.16.7 → 124.16.9
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 +16 -0
- package/dist/cjs/react/nodes/tableCell.js +43 -52
- package/dist/cjs/ui/Renderer/RendererStyleContainer.js +16 -10
- package/dist/es2019/react/nodes/tableCell.js +43 -52
- package/dist/es2019/ui/Renderer/RendererStyleContainer.js +16 -8
- package/dist/esm/react/nodes/tableCell.js +43 -52
- package/dist/esm/ui/Renderer/RendererStyleContainer.js +16 -10
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 124.16.9
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`55920a92e882a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/55920a92e882a) -
|
|
8
|
+
tsignores added for help-center local consumpton removed
|
|
9
|
+
- Updated dependencies
|
|
10
|
+
|
|
11
|
+
## 124.16.8
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`89f064b9cae39`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/89f064b9cae39) -
|
|
16
|
+
[ux] [EDITOR-2917] scale emoji placeholders in the renderer
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
3
19
|
## 124.16.7
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -152,35 +152,31 @@ var getWithCellProps = function getWithCellProps(WrapperComponent) {
|
|
|
152
152
|
// This is used to set the background color of the cell
|
|
153
153
|
// to a dark mode color in mobile dark mode
|
|
154
154
|
var colorName = background ? _adfSchema.tableBackgroundColorPalette.get(background) : '';
|
|
155
|
-
return (
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
,
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
}, getDataAttributes(colwidth, background), {
|
|
181
|
-
"aria-sort": ariaSort
|
|
182
|
-
}), children)
|
|
183
|
-
);
|
|
155
|
+
return /*#__PURE__*/_react.default.createElement(WrapperComponent, (0, _extends2.default)({
|
|
156
|
+
rowSpan: rowspan,
|
|
157
|
+
colSpan: colspan
|
|
158
|
+
// Note: When content from a renderer is pasted into an editor
|
|
159
|
+
// the background color is not taken from the inline style.
|
|
160
|
+
// Instead it is taken from the data-cell-background attribute
|
|
161
|
+
// (added via getDataAttributes below).
|
|
162
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
163
|
+
,
|
|
164
|
+
style: getStyle({
|
|
165
|
+
background: background,
|
|
166
|
+
colGroupWidth: colGroupWidth,
|
|
167
|
+
offsetTop: offsetTop,
|
|
168
|
+
colorMode: colorMode
|
|
169
|
+
}),
|
|
170
|
+
colorname: colorName,
|
|
171
|
+
onClick: onClick
|
|
172
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
173
|
+
,
|
|
174
|
+
className: className
|
|
175
|
+
// Ignored via go/ees005
|
|
176
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
177
|
+
}, getDataAttributes(colwidth, background), {
|
|
178
|
+
"aria-sort": ariaSort
|
|
179
|
+
}), children);
|
|
184
180
|
};
|
|
185
181
|
};
|
|
186
182
|
var TH = getWithCellProps('th');
|
|
@@ -195,32 +191,27 @@ var withSortableColumn = exports.withSortableColumn = function withSortableColum
|
|
|
195
191
|
var sortOrderedClassName = sortOrdered === _types.SortOrder.NO_ORDER ? _consts.RendererCssClassName.SORTABLE_COLUMN_NO_ORDER : '';
|
|
196
192
|
if (!allowColumnSorting || !isHeaderRow) {
|
|
197
193
|
// Ignored via go/ees005
|
|
198
|
-
// @ts-ignore - Workaround for help-center local consumption
|
|
199
194
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
200
195
|
return /*#__PURE__*/_react.default.createElement(WrapperComponent, props);
|
|
201
196
|
}
|
|
202
|
-
return (
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
// Ignored via go/
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
onClick: sort,
|
|
221
|
-
onKeyDown: onKeyPress
|
|
222
|
-
}))))
|
|
223
|
-
);
|
|
197
|
+
return /*#__PURE__*/_react.default.createElement(WrapperComponent
|
|
198
|
+
// Ignored via go/ees005
|
|
199
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
200
|
+
, (0, _extends2.default)({}, props, {
|
|
201
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
202
|
+
className: _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER,
|
|
203
|
+
ariaSort: getSortOrderLabel(intl, sortOrdered)
|
|
204
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
205
|
+
className: _consts.RendererCssClassName.SORTABLE_COLUMN
|
|
206
|
+
}, children, /*#__PURE__*/_react.default.createElement("figure", {
|
|
207
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
208
|
+
className: "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, " ").concat(sortOrderedClassName)
|
|
209
|
+
}, /*#__PURE__*/_react.default.createElement(_table.SortingIcon, {
|
|
210
|
+
isSortingAllowed: !!onSorting,
|
|
211
|
+
sortOrdered: sortOrdered,
|
|
212
|
+
onClick: sort,
|
|
213
|
+
onKeyDown: onKeyPress
|
|
214
|
+
}))));
|
|
224
215
|
function onKeyPress(event) {
|
|
225
216
|
var keys = [' ', 'Enter', 'Spacebar'];
|
|
226
217
|
// Ignored via go/ees005
|
|
@@ -1524,7 +1524,7 @@ var rendererAnnotationStylesCommentHeightFix = (0, _react.css)({
|
|
|
1524
1524
|
});
|
|
1525
1525
|
var RENDERER_LIST_DENSE_GAP = "max(0px,calc((var(--ak-renderer-base-font-size) - ".concat(_editorSharedStyles.akEditorFullPageDenseFontSize, "px)* (4/3)))");
|
|
1526
1526
|
var TASKLIST_CONTAINER_DENSE_MARGIN = "max(calc(10px + (var(--ak-renderer-base-font-size) - ".concat(_editorSharedStyles.akEditorFullPageDenseFontSize, "px) *( 2 / 3)))");
|
|
1527
|
-
var scaledDenseEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
|
|
1527
|
+
var scaledDenseEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
|
|
1528
1528
|
height: "".concat(_emoji.defaultDenseEmojiHeight, "px"),
|
|
1529
1529
|
minHeight: "".concat(_emoji.defaultDenseEmojiHeight, "px"),
|
|
1530
1530
|
minWidth: "".concat(_emoji.defaultDenseEmojiHeight, "px"),
|
|
@@ -1536,20 +1536,23 @@ var scaledDenseEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _
|
|
|
1536
1536
|
height: '100%',
|
|
1537
1537
|
objectFit: 'contain'
|
|
1538
1538
|
}
|
|
1539
|
-
}), "h1 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1539
|
+
}), "h1 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1540
1540
|
height: "".concat(_emoji.denseEmojiHeightH1, "px"),
|
|
1541
1541
|
width: "".concat(_emoji.denseEmojiHeightH1, "px")
|
|
1542
|
-
}), "h2 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1542
|
+
}), "h2 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1543
1543
|
height: "".concat(_emoji.denseEmojiHeightH2, "px"),
|
|
1544
1544
|
width: "".concat(_emoji.denseEmojiHeightH2, "px")
|
|
1545
|
-
}), "h3 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1545
|
+
}), "h3 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1546
1546
|
height: "".concat(_emoji.denseEmojiHeightH3, "px"),
|
|
1547
1547
|
width: "".concat(_emoji.denseEmojiHeightH3, "px")
|
|
1548
|
-
}), "h4 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1548
|
+
}), "h4 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1549
1549
|
height: "".concat(_emoji.denseEmojiHeightH4, "px"),
|
|
1550
1550
|
width: "".concat(_emoji.denseEmojiHeightH4, "px")
|
|
1551
|
+
}), ":is(h5, h6, p) :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1552
|
+
height: "".concat(_emoji.defaultDenseEmojiHeight, "px"),
|
|
1553
|
+
width: "".concat(_emoji.defaultDenseEmojiHeight, "px")
|
|
1551
1554
|
}));
|
|
1552
|
-
var scaledEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
|
|
1555
|
+
var scaledEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
|
|
1553
1556
|
height: "".concat(_emoji.defaultEmojiHeight, "px"),
|
|
1554
1557
|
minHeight: "".concat(_emoji.defaultEmojiHeight, "px"),
|
|
1555
1558
|
minWidth: "".concat(_emoji.defaultEmojiHeight, "px"),
|
|
@@ -1561,18 +1564,21 @@ var scaledEmojiStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defin
|
|
|
1561
1564
|
height: '100%',
|
|
1562
1565
|
objectFit: 'contain'
|
|
1563
1566
|
}
|
|
1564
|
-
}), "h1 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1567
|
+
}), "h1 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1565
1568
|
height: "".concat(_emoji.scaledEmojiHeightH1, "px"),
|
|
1566
1569
|
width: "".concat(_emoji.scaledEmojiHeightH1, "px")
|
|
1567
|
-
}), "h2 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1570
|
+
}), "h2 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1568
1571
|
height: "".concat(_emoji.scaledEmojiHeightH2, "px"),
|
|
1569
1572
|
width: "".concat(_emoji.scaledEmojiHeightH2, "px")
|
|
1570
|
-
}), "h3 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1573
|
+
}), "h3 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1571
1574
|
height: "".concat(_emoji.scaledEmojiHeightH3, "px"),
|
|
1572
1575
|
width: "".concat(_emoji.scaledEmojiHeightH3, "px")
|
|
1573
|
-
}), "h4 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1576
|
+
}), "h4 :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1574
1577
|
height: "".concat(_emoji.scaledEmojiHeightH4, "px"),
|
|
1575
1578
|
width: "".concat(_emoji.scaledEmojiHeightH4, "px")
|
|
1579
|
+
}), ":is(h5, h6, p) :is(.".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(_emoji.EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1580
|
+
height: "".concat(_emoji.defaultEmojiHeight, "px"),
|
|
1581
|
+
width: "".concat(_emoji.defaultEmojiHeight, "px")
|
|
1576
1582
|
}));
|
|
1577
1583
|
var denseStyles = (0, _react.css)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, ".".concat(_emoji.EmojiSharedCssClassName.EMOJI_IMAGE), {
|
|
1578
1584
|
height: "calc(".concat(_emoji.defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(_editorSharedStyles.akEditorFullPageDefaultFontSize, ")"),
|
|
@@ -151,35 +151,31 @@ const getWithCellProps = WrapperComponent => {
|
|
|
151
151
|
// This is used to set the background color of the cell
|
|
152
152
|
// to a dark mode color in mobile dark mode
|
|
153
153
|
const colorName = background ? tableBackgroundColorPalette.get(background) : '';
|
|
154
|
-
return (
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
,
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
}, getDataAttributes(colwidth, background), {
|
|
180
|
-
"aria-sort": ariaSort
|
|
181
|
-
}), children)
|
|
182
|
-
);
|
|
154
|
+
return /*#__PURE__*/React.createElement(WrapperComponent, _extends({
|
|
155
|
+
rowSpan: rowspan,
|
|
156
|
+
colSpan: colspan
|
|
157
|
+
// Note: When content from a renderer is pasted into an editor
|
|
158
|
+
// the background color is not taken from the inline style.
|
|
159
|
+
// Instead it is taken from the data-cell-background attribute
|
|
160
|
+
// (added via getDataAttributes below).
|
|
161
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
162
|
+
,
|
|
163
|
+
style: getStyle({
|
|
164
|
+
background,
|
|
165
|
+
colGroupWidth,
|
|
166
|
+
offsetTop,
|
|
167
|
+
colorMode
|
|
168
|
+
}),
|
|
169
|
+
colorname: colorName,
|
|
170
|
+
onClick: onClick
|
|
171
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
172
|
+
,
|
|
173
|
+
className: className
|
|
174
|
+
// Ignored via go/ees005
|
|
175
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
176
|
+
}, getDataAttributes(colwidth, background), {
|
|
177
|
+
"aria-sort": ariaSort
|
|
178
|
+
}), children);
|
|
183
179
|
};
|
|
184
180
|
};
|
|
185
181
|
const TH = getWithCellProps('th');
|
|
@@ -196,32 +192,27 @@ export const withSortableColumn = WrapperComponent => {
|
|
|
196
192
|
const sortOrderedClassName = sortOrdered === SortOrder.NO_ORDER ? RendererCssClassName.SORTABLE_COLUMN_NO_ORDER : '';
|
|
197
193
|
if (!allowColumnSorting || !isHeaderRow) {
|
|
198
194
|
// Ignored via go/ees005
|
|
199
|
-
// @ts-ignore - Workaround for help-center local consumption
|
|
200
195
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
201
196
|
return /*#__PURE__*/React.createElement(WrapperComponent, props);
|
|
202
197
|
}
|
|
203
|
-
return (
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
// Ignored via go/
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
onClick: sort,
|
|
222
|
-
onKeyDown: onKeyPress
|
|
223
|
-
}))))
|
|
224
|
-
);
|
|
198
|
+
return /*#__PURE__*/React.createElement(WrapperComponent
|
|
199
|
+
// Ignored via go/ees005
|
|
200
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
201
|
+
, _extends({}, props, {
|
|
202
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
203
|
+
className: RendererCssClassName.SORTABLE_COLUMN_WRAPPER,
|
|
204
|
+
ariaSort: getSortOrderLabel(intl, sortOrdered)
|
|
205
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
206
|
+
className: RendererCssClassName.SORTABLE_COLUMN
|
|
207
|
+
}, children, /*#__PURE__*/React.createElement("figure", {
|
|
208
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
209
|
+
className: `${RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER} ${sortOrderedClassName}`
|
|
210
|
+
}, /*#__PURE__*/React.createElement(SortingIcon, {
|
|
211
|
+
isSortingAllowed: !!onSorting,
|
|
212
|
+
sortOrdered: sortOrdered,
|
|
213
|
+
onClick: sort,
|
|
214
|
+
onKeyDown: onKeyPress
|
|
215
|
+
}))));
|
|
225
216
|
function onKeyPress(event) {
|
|
226
217
|
const keys = [' ', 'Enter', 'Spacebar'];
|
|
227
218
|
// Ignored via go/ees005
|
|
@@ -1936,21 +1936,25 @@ const scaledDenseEmojiStyles = css({
|
|
|
1936
1936
|
objectFit: 'contain'
|
|
1937
1937
|
}
|
|
1938
1938
|
},
|
|
1939
|
-
[`h1 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE})`]: {
|
|
1939
|
+
[`h1 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
|
|
1940
1940
|
height: `${denseEmojiHeightH1}px`,
|
|
1941
1941
|
width: `${denseEmojiHeightH1}px`
|
|
1942
1942
|
},
|
|
1943
|
-
[`h2 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE})`]: {
|
|
1943
|
+
[`h2 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
|
|
1944
1944
|
height: `${denseEmojiHeightH2}px`,
|
|
1945
1945
|
width: `${denseEmojiHeightH2}px`
|
|
1946
1946
|
},
|
|
1947
|
-
[`h3 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE})`]: {
|
|
1947
|
+
[`h3 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
|
|
1948
1948
|
height: `${denseEmojiHeightH3}px`,
|
|
1949
1949
|
width: `${denseEmojiHeightH3}px`
|
|
1950
1950
|
},
|
|
1951
|
-
[`h4 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE})`]: {
|
|
1951
|
+
[`h4 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
|
|
1952
1952
|
height: `${denseEmojiHeightH4}px`,
|
|
1953
1953
|
width: `${denseEmojiHeightH4}px`
|
|
1954
|
+
},
|
|
1955
|
+
[`:is(h5, h6, p) :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
|
|
1956
|
+
height: `${defaultDenseEmojiHeight}px`,
|
|
1957
|
+
width: `${defaultDenseEmojiHeight}px`
|
|
1954
1958
|
}
|
|
1955
1959
|
});
|
|
1956
1960
|
const scaledEmojiStyles = css({
|
|
@@ -1967,21 +1971,25 @@ const scaledEmojiStyles = css({
|
|
|
1967
1971
|
objectFit: 'contain'
|
|
1968
1972
|
}
|
|
1969
1973
|
},
|
|
1970
|
-
[`h1 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE})`]: {
|
|
1974
|
+
[`h1 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
|
|
1971
1975
|
height: `${scaledEmojiHeightH1}px`,
|
|
1972
1976
|
width: `${scaledEmojiHeightH1}px`
|
|
1973
1977
|
},
|
|
1974
|
-
[`h2 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE})`]: {
|
|
1978
|
+
[`h2 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
|
|
1975
1979
|
height: `${scaledEmojiHeightH2}px`,
|
|
1976
1980
|
width: `${scaledEmojiHeightH2}px`
|
|
1977
1981
|
},
|
|
1978
|
-
[`h3 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE})`]: {
|
|
1982
|
+
[`h3 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
|
|
1979
1983
|
height: `${scaledEmojiHeightH3}px`,
|
|
1980
1984
|
width: `${scaledEmojiHeightH3}px`
|
|
1981
1985
|
},
|
|
1982
|
-
[`h4 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE})`]: {
|
|
1986
|
+
[`h4 :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
|
|
1983
1987
|
height: `${scaledEmojiHeightH4}px`,
|
|
1984
1988
|
width: `${scaledEmojiHeightH4}px`
|
|
1989
|
+
},
|
|
1990
|
+
[`:is(h5, h6, p) :is(.${EmojiSharedCssClassName.EMOJI_IMAGE}, .${EmojiSharedCssClassName.EMOJI_SPRITE}, .${EmojiSharedCssClassName.EMOJI_PLACEHOLDER})`]: {
|
|
1991
|
+
height: `${defaultEmojiHeight}px`,
|
|
1992
|
+
width: `${defaultEmojiHeight}px`
|
|
1985
1993
|
}
|
|
1986
1994
|
});
|
|
1987
1995
|
const denseStyles = css({
|
|
@@ -145,35 +145,31 @@ var getWithCellProps = function getWithCellProps(WrapperComponent) {
|
|
|
145
145
|
// This is used to set the background color of the cell
|
|
146
146
|
// to a dark mode color in mobile dark mode
|
|
147
147
|
var colorName = background ? tableBackgroundColorPalette.get(background) : '';
|
|
148
|
-
return (
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
,
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
}, getDataAttributes(colwidth, background), {
|
|
174
|
-
"aria-sort": ariaSort
|
|
175
|
-
}), children)
|
|
176
|
-
);
|
|
148
|
+
return /*#__PURE__*/React.createElement(WrapperComponent, _extends({
|
|
149
|
+
rowSpan: rowspan,
|
|
150
|
+
colSpan: colspan
|
|
151
|
+
// Note: When content from a renderer is pasted into an editor
|
|
152
|
+
// the background color is not taken from the inline style.
|
|
153
|
+
// Instead it is taken from the data-cell-background attribute
|
|
154
|
+
// (added via getDataAttributes below).
|
|
155
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
156
|
+
,
|
|
157
|
+
style: getStyle({
|
|
158
|
+
background: background,
|
|
159
|
+
colGroupWidth: colGroupWidth,
|
|
160
|
+
offsetTop: offsetTop,
|
|
161
|
+
colorMode: colorMode
|
|
162
|
+
}),
|
|
163
|
+
colorname: colorName,
|
|
164
|
+
onClick: onClick
|
|
165
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
166
|
+
,
|
|
167
|
+
className: className
|
|
168
|
+
// Ignored via go/ees005
|
|
169
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
170
|
+
}, getDataAttributes(colwidth, background), {
|
|
171
|
+
"aria-sort": ariaSort
|
|
172
|
+
}), children);
|
|
177
173
|
};
|
|
178
174
|
};
|
|
179
175
|
var TH = getWithCellProps('th');
|
|
@@ -188,32 +184,27 @@ export var withSortableColumn = function withSortableColumn(WrapperComponent) {
|
|
|
188
184
|
var sortOrderedClassName = sortOrdered === SortOrder.NO_ORDER ? RendererCssClassName.SORTABLE_COLUMN_NO_ORDER : '';
|
|
189
185
|
if (!allowColumnSorting || !isHeaderRow) {
|
|
190
186
|
// Ignored via go/ees005
|
|
191
|
-
// @ts-ignore - Workaround for help-center local consumption
|
|
192
187
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
193
188
|
return /*#__PURE__*/React.createElement(WrapperComponent, props);
|
|
194
189
|
}
|
|
195
|
-
return (
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
// Ignored via go/
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
onClick: sort,
|
|
214
|
-
onKeyDown: onKeyPress
|
|
215
|
-
}))))
|
|
216
|
-
);
|
|
190
|
+
return /*#__PURE__*/React.createElement(WrapperComponent
|
|
191
|
+
// Ignored via go/ees005
|
|
192
|
+
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
193
|
+
, _extends({}, props, {
|
|
194
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
195
|
+
className: RendererCssClassName.SORTABLE_COLUMN_WRAPPER,
|
|
196
|
+
ariaSort: getSortOrderLabel(intl, sortOrdered)
|
|
197
|
+
}), /*#__PURE__*/React.createElement("div", {
|
|
198
|
+
className: RendererCssClassName.SORTABLE_COLUMN
|
|
199
|
+
}, children, /*#__PURE__*/React.createElement("figure", {
|
|
200
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
201
|
+
className: "".concat(RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, " ").concat(sortOrderedClassName)
|
|
202
|
+
}, /*#__PURE__*/React.createElement(SortingIcon, {
|
|
203
|
+
isSortingAllowed: !!onSorting,
|
|
204
|
+
sortOrdered: sortOrdered,
|
|
205
|
+
onClick: sort,
|
|
206
|
+
onKeyDown: onKeyPress
|
|
207
|
+
}))));
|
|
217
208
|
function onKeyPress(event) {
|
|
218
209
|
var keys = [' ', 'Enter', 'Spacebar'];
|
|
219
210
|
// Ignored via go/ees005
|
|
@@ -1517,7 +1517,7 @@ var rendererAnnotationStylesCommentHeightFix = css({
|
|
|
1517
1517
|
});
|
|
1518
1518
|
var RENDERER_LIST_DENSE_GAP = "max(0px,calc((var(--ak-renderer-base-font-size) - ".concat(akEditorFullPageDenseFontSize, "px)* (4/3)))");
|
|
1519
1519
|
var TASKLIST_CONTAINER_DENSE_MARGIN = "max(calc(10px + (var(--ak-renderer-base-font-size) - ".concat(akEditorFullPageDenseFontSize, "px) *( 2 / 3)))");
|
|
1520
|
-
var scaledDenseEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
|
|
1520
|
+
var scaledDenseEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
|
|
1521
1521
|
height: "".concat(defaultDenseEmojiHeight, "px"),
|
|
1522
1522
|
minHeight: "".concat(defaultDenseEmojiHeight, "px"),
|
|
1523
1523
|
minWidth: "".concat(defaultDenseEmojiHeight, "px"),
|
|
@@ -1529,20 +1529,23 @@ var scaledDenseEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty
|
|
|
1529
1529
|
height: '100%',
|
|
1530
1530
|
objectFit: 'contain'
|
|
1531
1531
|
}
|
|
1532
|
-
}), "h1 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1532
|
+
}), "h1 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1533
1533
|
height: "".concat(denseEmojiHeightH1, "px"),
|
|
1534
1534
|
width: "".concat(denseEmojiHeightH1, "px")
|
|
1535
|
-
}), "h2 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1535
|
+
}), "h2 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1536
1536
|
height: "".concat(denseEmojiHeightH2, "px"),
|
|
1537
1537
|
width: "".concat(denseEmojiHeightH2, "px")
|
|
1538
|
-
}), "h3 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1538
|
+
}), "h3 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1539
1539
|
height: "".concat(denseEmojiHeightH3, "px"),
|
|
1540
1540
|
width: "".concat(denseEmojiHeightH3, "px")
|
|
1541
|
-
}), "h4 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1541
|
+
}), "h4 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1542
1542
|
height: "".concat(denseEmojiHeightH4, "px"),
|
|
1543
1543
|
width: "".concat(denseEmojiHeightH4, "px")
|
|
1544
|
+
}), ":is(h5, h6, p) :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1545
|
+
height: "".concat(defaultDenseEmojiHeight, "px"),
|
|
1546
|
+
width: "".concat(defaultDenseEmojiHeight, "px")
|
|
1544
1547
|
}));
|
|
1545
|
-
var scaledEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
|
|
1548
|
+
var scaledEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
|
|
1546
1549
|
height: "".concat(defaultEmojiHeight, "px"),
|
|
1547
1550
|
minHeight: "".concat(defaultEmojiHeight, "px"),
|
|
1548
1551
|
minWidth: "".concat(defaultEmojiHeight, "px"),
|
|
@@ -1554,18 +1557,21 @@ var scaledEmojiStyles = css(_defineProperty(_defineProperty(_defineProperty(_def
|
|
|
1554
1557
|
height: '100%',
|
|
1555
1558
|
objectFit: 'contain'
|
|
1556
1559
|
}
|
|
1557
|
-
}), "h1 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1560
|
+
}), "h1 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1558
1561
|
height: "".concat(scaledEmojiHeightH1, "px"),
|
|
1559
1562
|
width: "".concat(scaledEmojiHeightH1, "px")
|
|
1560
|
-
}), "h2 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1563
|
+
}), "h2 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1561
1564
|
height: "".concat(scaledEmojiHeightH2, "px"),
|
|
1562
1565
|
width: "".concat(scaledEmojiHeightH2, "px")
|
|
1563
|
-
}), "h3 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1566
|
+
}), "h3 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1564
1567
|
height: "".concat(scaledEmojiHeightH3, "px"),
|
|
1565
1568
|
width: "".concat(scaledEmojiHeightH3, "px")
|
|
1566
|
-
}), "h4 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ")"), {
|
|
1569
|
+
}), "h4 :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1567
1570
|
height: "".concat(scaledEmojiHeightH4, "px"),
|
|
1568
1571
|
width: "".concat(scaledEmojiHeightH4, "px")
|
|
1572
|
+
}), ":is(h5, h6, p) :is(.".concat(EmojiSharedCssClassName.EMOJI_IMAGE, ", .").concat(EmojiSharedCssClassName.EMOJI_SPRITE, ", .").concat(EmojiSharedCssClassName.EMOJI_PLACEHOLDER, ")"), {
|
|
1573
|
+
height: "".concat(defaultEmojiHeight, "px"),
|
|
1574
|
+
width: "".concat(defaultEmojiHeight, "px")
|
|
1569
1575
|
}));
|
|
1570
1576
|
var denseStyles = css(_defineProperty(_defineProperty(_defineProperty({}, ".".concat(EmojiSharedCssClassName.EMOJI_IMAGE), {
|
|
1571
1577
|
height: "calc(".concat(defaultEmojiHeight, " * var(--ak-renderer-base-font-size) / ").concat(akEditorFullPageDefaultFontSize, ")"),
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "124.16.
|
|
3
|
+
"version": "124.16.9",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
"@atlaskit/status": "^3.0.0",
|
|
58
58
|
"@atlaskit/task-decision": "^19.2.0",
|
|
59
59
|
"@atlaskit/theme": "^21.0.0",
|
|
60
|
-
"@atlaskit/tmp-editor-statsig": "^14.
|
|
60
|
+
"@atlaskit/tmp-editor-statsig": "^14.2.0",
|
|
61
61
|
"@atlaskit/tokens": "^8.4.0",
|
|
62
62
|
"@atlaskit/tooltip": "^20.10.0",
|
|
63
63
|
"@atlaskit/visually-hidden": "^3.0.0",
|