@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 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
- /*#__PURE__*/
157
- // @ts-ignore - Workaround for help-center local consumption
158
- _react.default.createElement(WrapperComponent, (0, _extends2.default)({
159
- rowSpan: rowspan,
160
- colSpan: colspan
161
- // Note: When content from a renderer is pasted into an editor
162
- // the background color is not taken from the inline style.
163
- // Instead it is taken from the data-cell-background attribute
164
- // (added via getDataAttributes below).
165
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
166
- ,
167
- style: getStyle({
168
- background: background,
169
- colGroupWidth: colGroupWidth,
170
- offsetTop: offsetTop,
171
- colorMode: colorMode
172
- }),
173
- colorname: colorName,
174
- onClick: onClick
175
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
176
- ,
177
- className: className
178
- // Ignored via go/ees005
179
- // eslint-disable-next-line react/jsx-props-no-spreading
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
- /*#__PURE__*/
204
- // @ts-ignore - Workaround for help-center local consumption
205
- _react.default.createElement(WrapperComponent
206
- // Ignored via go/ees005
207
- // eslint-disable-next-line react/jsx-props-no-spreading
208
- , (0, _extends2.default)({}, props, {
209
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
210
- className: _consts.RendererCssClassName.SORTABLE_COLUMN_WRAPPER,
211
- ariaSort: getSortOrderLabel(intl, sortOrdered)
212
- }), /*#__PURE__*/_react.default.createElement("div", {
213
- className: _consts.RendererCssClassName.SORTABLE_COLUMN
214
- }, children, /*#__PURE__*/_react.default.createElement("figure", {
215
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
216
- className: "".concat(_consts.RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, " ").concat(sortOrderedClassName)
217
- }, /*#__PURE__*/_react.default.createElement(_table.SortingIcon, {
218
- isSortingAllowed: !!onSorting,
219
- sortOrdered: sortOrdered,
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
- /*#__PURE__*/
156
- // @ts-ignore - Workaround for help-center local consumption
157
- React.createElement(WrapperComponent, _extends({
158
- rowSpan: rowspan,
159
- colSpan: colspan
160
- // Note: When content from a renderer is pasted into an editor
161
- // the background color is not taken from the inline style.
162
- // Instead it is taken from the data-cell-background attribute
163
- // (added via getDataAttributes below).
164
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
165
- ,
166
- style: getStyle({
167
- background,
168
- colGroupWidth,
169
- offsetTop,
170
- colorMode
171
- }),
172
- colorname: colorName,
173
- onClick: onClick
174
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
175
- ,
176
- className: className
177
- // Ignored via go/ees005
178
- // eslint-disable-next-line react/jsx-props-no-spreading
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
- /*#__PURE__*/
205
- // @ts-ignore - Workaround for help-center local consumption
206
- React.createElement(WrapperComponent
207
- // Ignored via go/ees005
208
- // eslint-disable-next-line react/jsx-props-no-spreading
209
- , _extends({}, props, {
210
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
211
- className: RendererCssClassName.SORTABLE_COLUMN_WRAPPER,
212
- ariaSort: getSortOrderLabel(intl, sortOrdered)
213
- }), /*#__PURE__*/React.createElement("div", {
214
- className: RendererCssClassName.SORTABLE_COLUMN
215
- }, children, /*#__PURE__*/React.createElement("figure", {
216
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
217
- className: `${RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER} ${sortOrderedClassName}`
218
- }, /*#__PURE__*/React.createElement(SortingIcon, {
219
- isSortingAllowed: !!onSorting,
220
- sortOrdered: sortOrdered,
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
- /*#__PURE__*/
150
- // @ts-ignore - Workaround for help-center local consumption
151
- React.createElement(WrapperComponent, _extends({
152
- rowSpan: rowspan,
153
- colSpan: colspan
154
- // Note: When content from a renderer is pasted into an editor
155
- // the background color is not taken from the inline style.
156
- // Instead it is taken from the data-cell-background attribute
157
- // (added via getDataAttributes below).
158
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
159
- ,
160
- style: getStyle({
161
- background: background,
162
- colGroupWidth: colGroupWidth,
163
- offsetTop: offsetTop,
164
- colorMode: colorMode
165
- }),
166
- colorname: colorName,
167
- onClick: onClick
168
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
169
- ,
170
- className: className
171
- // Ignored via go/ees005
172
- // eslint-disable-next-line react/jsx-props-no-spreading
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
- /*#__PURE__*/
197
- // @ts-ignore - Workaround for help-center local consumption
198
- 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: "".concat(RendererCssClassName.SORTABLE_COLUMN_ICON_WRAPPER, " ").concat(sortOrderedClassName)
210
- }, /*#__PURE__*/React.createElement(SortingIcon, {
211
- isSortingAllowed: !!onSorting,
212
- sortOrdered: sortOrdered,
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.7",
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.1.0",
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",