@atlaskit/renderer 96.0.0 → 96.0.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/renderer
 
+## 96.0.1
+
+### Patch Changes
+
+- [`9dc961ea69e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9dc961ea69e) - ED-14610: reduce code bundled with table sticky headers
+- [`d6b54a2fd48`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d6b54a2fd48) - [ux] Fix custom panel dark mode colour regression
+- Updated dependencies
+
 ## 96.0.0
 
 ### Major Changes
@@ -43,7 +51,7 @@
 ### Patch Changes
 
 - [`ccde3d9eb43`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ccde3d9eb43) - [ux] ED-10335: memoize schema, validation and serialization for Renderer
-- [`59e17ae76c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/59e17ae76c1) - [ux] ED-14961-table-sticky-header-overlap-popup
+- [`59e17ae76c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/59e17ae76c1) - [ux] ED-14961: fix table sticky header in renderer overlapping typeahead popup in comment section
 - [`47a59c220af`](https://bitbucket.org/atlassian/atlassian-frontend/commits/47a59c220af) - [ux] ED-10334: memoised schema.nodeFromJSON() and node.check() in Renderer.renderDocument()
 - [`08edcd36c6f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/08edcd36c6f) - [ux] Convert RGB color usage to Design Tokens. This change is backwards compatible with existing theming
 - Updated dependencies

package/dist/cjs/react/nodes/panel.js

@@ -40,13 +40,15 @@ var PanelStyled = function PanelStyled(props) {
 
   if (props['data-panel-type'] === _adfSchema.PanelType.CUSTOM && props.backgroundColor) {
     styles = function styles(theme) {
-      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n      &.", " {\n        ", "\n      }\n\n      &[data-panel-type=", "] {\n        background-color: ", ";\n        ", ";\n      }\n    "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
-        theme: theme
-      }), _adfSchema.PanelType.CUSTOM, props.backgroundColor, (0, _theme.themed)({
-        dark: _panel.getPanelBackgroundDarkModeColors
+      var customStyle = (0, _theme.themed)({
+        dark: _panel.getPanelBackgroundDarkModeColors,
+        light: "background-color: ".concat(props.backgroundColor, ";")
       })({
         theme: theme
-      }));
+      });
+      return (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n        }\n      "])), _panel.PanelSharedCssClassName.prefix, (0, _panel.panelSharedStylesWithoutPrefix)({
+        theme: theme
+      }), _adfSchema.PanelType.CUSTOM, customStyle);
     };
   }
 

package/dist/cjs/react/nodes/table/sticky.js

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -25,24 +23,16 @@ var _styles = require("@atlaskit/editor-common/styles");
 
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 
-var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
+var _colors = require("@atlaskit/theme/colors");
 
 var _tokens = require("@atlaskit/tokens");
 
-var _utils = require("../../../utils");
-
 var _table = require("./table");
 
 var _injectProps = require("../../utils/inject-props");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-var N40A = colors.N40A;
 var tableStickyPadding = 8;
 exports.tableStickyPadding = tableStickyPadding;
 var modeSpecficStyles = {
@@ -52,7 +42,7 @@ var modeSpecficStyles = {
 }; // TODO: Quality ticket: https://product-fabric.atlassian.net/browse/DSP-4123
 
 var fixedTableDivStaticStyles = function fixedTableDivStaticStyles(top, width) {
-  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, (0, _tokens.token)('elevation.surface', 'white'), (0, _tokens.token)('elevation.surface.overlay', 'white'), (0, _tokens.token)('elevation.shadow.overflow', "0 6px 4px -4px ".concat(N40A)), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
+  return (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  width: ", "px;\n  z-index: ", ";\n  &\n    .", ",\n    &\n    .", "\n    > table {\n    margin-top: 0;\n    margin-bottom: 0;\n  }\n\n  border-top: ", "px solid\n    ", ";\n  background: ", ";\n  box-shadow: ", ";\n\n  div[data-expanded='false'] & {\n    display: none;\n  }\n\n  &\n    .", ".right-shadow::after,\n    &\n    .", ".left-shadow::before {\n    top: 0px;\n    height: 100%;\n  }\n"])), typeof top === 'number' && "top: ".concat(top, "px;"), width, _editorSharedStyles.akEditorStickyHeaderZIndex, _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_STICKY_WRAPPER, tableStickyPadding, (0, _tokens.token)('elevation.surface', 'white'), (0, _tokens.token)('elevation.surface.overlay', 'white'), (0, _tokens.token)('elevation.shadow.overflow', "0 6px 4px -4px ".concat(_colors.N40A)), _styles.TableSharedCssClassName.TABLE_CONTAINER, _styles.TableSharedCssClassName.TABLE_CONTAINER);
 };
 
 var FixedTableDiv = function FixedTableDiv(props) {
@@ -123,9 +113,32 @@ var StickyTable = function StickyTable(_ref) {
     invisible: true
   }))))));
 };
+/**
+ * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
+ */
+
 
 exports.StickyTable = StickyTable;
 
+function findHorizontalOverflowScrollParent(table) {
+  var parent = table;
+
+  if (!parent) {
+    return null;
+  }
+
+  while (parent = parent.parentElement) {
+    // IE11 on Window 8 doesn't show styles from CSS when accessing through element.style property.
+    var style = window.getComputedStyle(parent);
+
+    if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
+      return parent;
+    }
+  }
+
+  return null;
+}
+
 var OverflowParent = /*#__PURE__*/function () {
   function OverflowParent(ref) {
     (0, _classCallCheck2.default)(this, OverflowParent);
@@ -172,7 +185,7 @@ var OverflowParent = /*#__PURE__*/function () {
   }], [{
     key: "fromElement",
     value: function fromElement(el) {
-      return new OverflowParent((0, _utils.findHorizontalOverflowScrollParent)(el) || window);
+      return new OverflowParent(findHorizontalOverflowScrollParent(el) || window);
     }
   }]);
   return OverflowParent;

package/dist/cjs/utils.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ADFEncoder = void 0;
-exports.findHorizontalOverflowScrollParent = findHorizontalOverflowScrollParent;
 exports.findInTree = findInTree;
 exports.getText = exports.getPlatform = exports.getEventHandler = void 0;
 
@@ -41,32 +40,9 @@ var getEventHandler = function getEventHandler(eventHandlers, type) {
   var eventName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'onClick';
   return eventHandlers && type && eventHandlers[type] && eventHandlers[type][eventName];
 };
-/**
- * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
- */
-
 
 exports.getEventHandler = getEventHandler;
 
-function findHorizontalOverflowScrollParent(table) {
-  var parent = table;
-
-  if (!parent) {
-    return null;
-  }
-
-  while (parent = parent.parentElement) {
-    // IE11 on Window 8 doesn't show styles from CSS when accessing through element.style property.
-    var style = window.getComputedStyle(parent);
-
-    if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
-      return parent;
-    }
-  }
-
-  return null;
-}
-
 var getPlatform = function getPlatform(rendererAppearance) {
   if (rendererAppearance === 'mobile') {
     return 'mobile';

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "96.0.0",
+	"version": "96.0.1",
 	"sideEffects": false
 }

package/dist/es2019/react/nodes/panel.js

@@ -23,22 +23,25 @@ const PanelStyled = props => {
   `;
 
   if (props['data-panel-type'] === PanelType.CUSTOM && props.backgroundColor) {
-    styles = theme => css`
-      &.${PanelSharedCssClassName.prefix} {
-        ${panelSharedStylesWithoutPrefix({
-      theme
-    })}
-      }
-
-      &[data-panel-type=${PanelType.CUSTOM}] {
-        background-color: ${props.backgroundColor};
-        ${themed({
-      dark: getPanelBackgroundDarkModeColors
-    })({
-      theme
-    })};
-      }
-    `;
+    styles = theme => {
+      const customStyle = themed({
+        dark: getPanelBackgroundDarkModeColors,
+        light: `background-color: ${props.backgroundColor};`
+      })({
+        theme
+      });
+      return css`
+        &.${PanelSharedCssClassName.prefix} {
+          ${panelSharedStylesWithoutPrefix({
+        theme
+      })}
+        }
+
+        &[data-panel-type=${PanelType.CUSTOM}] {
+          ${customStyle};
+        }
+      `;
+    };
   }
 
   return jsx("div", _extends({

package/dist/es2019/react/nodes/table/sticky.js

@@ -5,13 +5,8 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
-import * as colors from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-
-const {
-  N40A
-} = colors;
+import { N40A } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { findHorizontalOverflowScrollParent } from '../../../utils';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export const tableStickyPadding = 8;
@@ -126,6 +121,29 @@ export const StickyTable = ({
     invisible: true
   }))))));
 };
+/**
+ * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
+ */
+
+function findHorizontalOverflowScrollParent(table) {
+  let parent = table;
+
+  if (!parent) {
+    return null;
+  }
+
+  while (parent = parent.parentElement) {
+    // IE11 on Window 8 doesn't show styles from CSS when accessing through element.style property.
+    const style = window.getComputedStyle(parent);
+
+    if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
+      return parent;
+    }
+  }
+
+  return null;
+}
+
 export class OverflowParent {
   constructor(ref) {
     this.ref = ref;

package/dist/es2019/utils.js

@@ -18,28 +18,6 @@ export const getText = node => {
 export const getEventHandler = (eventHandlers, type, eventName = 'onClick') => {
   return eventHandlers && type && eventHandlers[type] && eventHandlers[type][eventName];
 };
-/**
- * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
- */
-
-export function findHorizontalOverflowScrollParent(table) {
-  let parent = table;
-
-  if (!parent) {
-    return null;
-  }
-
-  while (parent = parent.parentElement) {
-    // IE11 on Window 8 doesn't show styles from CSS when accessing through element.style property.
-    const style = window.getComputedStyle(parent);
-
-    if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
-      return parent;
-    }
-  }
-
-  return null;
-}
 export const getPlatform = rendererAppearance => {
   if (rendererAppearance === 'mobile') {
     return 'mobile';

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "96.0.0",
+	"version": "96.0.1",
 	"sideEffects": false
 }

package/dist/esm/react/nodes/panel.js

@@ -25,13 +25,15 @@ var PanelStyled = function PanelStyled(props) {
 
   if (props['data-panel-type'] === PanelType.CUSTOM && props.backgroundColor) {
     styles = function styles(theme) {
-      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n      &.", " {\n        ", "\n      }\n\n      &[data-panel-type=", "] {\n        background-color: ", ";\n        ", ";\n      }\n    "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix({
-        theme: theme
-      }), PanelType.CUSTOM, props.backgroundColor, themed({
-        dark: getPanelBackgroundDarkModeColors
+      var customStyle = themed({
+        dark: getPanelBackgroundDarkModeColors,
+        light: "background-color: ".concat(props.backgroundColor, ";")
       })({
         theme: theme
-      }));
+      });
+      return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n        &.", " {\n          ", "\n        }\n\n        &[data-panel-type=", "] {\n          ", ";\n        }\n      "])), PanelSharedCssClassName.prefix, panelSharedStylesWithoutPrefix({
+        theme: theme
+      }), PanelType.CUSTOM, customStyle);
     };
   }
 

package/dist/esm/react/nodes/table/sticky.js

@@ -10,11 +10,8 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { TableSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
-import * as colors from '@atlaskit/theme/colors'; // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-
-var N40A = colors.N40A;
+import { N40A } from '@atlaskit/theme/colors';
 import { token } from '@atlaskit/tokens';
-import { findHorizontalOverflowScrollParent } from '../../../utils';
 import { Table } from './table';
 import { recursivelyInjectProps } from '../../utils/inject-props';
 export var tableStickyPadding = 8;
@@ -93,6 +90,29 @@ export var StickyTable = function StickyTable(_ref) {
     invisible: true
   }))))));
 };
+/**
+ * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
+ */
+
+function findHorizontalOverflowScrollParent(table) {
+  var parent = table;
+
+  if (!parent) {
+    return null;
+  }
+
+  while (parent = parent.parentElement) {
+    // IE11 on Window 8 doesn't show styles from CSS when accessing through element.style property.
+    var style = window.getComputedStyle(parent);
+
+    if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
+      return parent;
+    }
+  }
+
+  return null;
+}
+
 export var OverflowParent = /*#__PURE__*/function () {
   function OverflowParent(ref) {
     _classCallCheck(this, OverflowParent);

package/dist/esm/utils.js

@@ -22,28 +22,6 @@ export var getEventHandler = function getEventHandler(eventHandlers, type) {
   var eventName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'onClick';
   return eventHandlers && type && eventHandlers[type] && eventHandlers[type][eventName];
 };
-/**
- * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
- */
-
-export function findHorizontalOverflowScrollParent(table) {
-  var parent = table;
-
-  if (!parent) {
-    return null;
-  }
-
-  while (parent = parent.parentElement) {
-    // IE11 on Window 8 doesn't show styles from CSS when accessing through element.style property.
-    var style = window.getComputedStyle(parent);
-
-    if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
-      return parent;
-    }
-  }
-
-  return null;
-}
 export var getPlatform = function getPlatform(rendererAppearance) {
   if (rendererAppearance === 'mobile') {
     return 'mobile';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "96.0.0",
+	"version": "96.0.1",
 	"sideEffects": false
 }

package/dist/types/utils.d.ts

@@ -1,9 +1,9 @@
-import { Schema } from 'prosemirror-model';
+import type { Schema } from 'prosemirror-model';
 import type { ADNode } from '@atlaskit/editor-common/validator';
 import type { EventHandlers } from '@atlaskit/editor-common/ui';
-import { Transformer } from '@atlaskit/editor-common/types';
-import { Node as PMNode } from 'prosemirror-model';
-import { RendererAppearance } from './ui/Renderer/types';
+import type { Transformer } from '@atlaskit/editor-common/types';
+import type { Node as PMNode } from 'prosemirror-model';
+import type { RendererAppearance } from './ui/Renderer/types';
 export declare type TransformerProvider<T> = (schema: Schema) => Transformer<T>;
 export declare class ADFEncoder<T> {
     encode: (value: T) => any;
@@ -11,10 +11,6 @@ export declare class ADFEncoder<T> {
 }
 export declare const getText: (node: PMNode | ADNode) => string;
 export declare const getEventHandler: (eventHandlers?: EventHandlers | undefined, type?: keyof EventHandlers | undefined, eventName?: string) => any;
-/**
- * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
- */
-export declare function findHorizontalOverflowScrollParent(table: HTMLElement | null): HTMLElement | null;
 export declare const getPlatform: (rendererAppearance: RendererAppearance) => "mobile" | "web";
 /**
  * Traverse through parent elements of element. Return element for which evaluate(element) returns

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/renderer",
-  "version": "96.0.0",
+  "version": "96.0.1",
   "description": "Renderer component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,12 +35,12 @@
     "@atlaskit/editor-json-transformer": "^8.7.0",
     "@atlaskit/editor-shared-styles": "^2.1.0",
     "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/media-card": "^73.7.0",
-    "@atlaskit/media-client": "^16.0.0",
-    "@atlaskit/media-common": "^2.14.0",
+    "@atlaskit/media-card": "^73.8.0",
+    "@atlaskit/media-client": "^17.0.0",
+    "@atlaskit/media-common": "^2.15.0",
     "@atlaskit/media-filmstrip": "^44.0.0",
     "@atlaskit/media-ui": "^22.1.0",
-    "@atlaskit/media-viewer": "^46.4.0",
+    "@atlaskit/media-viewer": "^46.5.0",
     "@atlaskit/status": "^1.1.0",
     "@atlaskit/task-decision": "^17.4.0",
     "@atlaskit/theme": "^12.1.0",
@@ -76,12 +76,12 @@
     "@atlaskit/media-test-helpers": "^30.0.0",
     "@atlaskit/mention": "^21.0.0",
     "@atlaskit/navigation-next": "^9.0.0",
-    "@atlaskit/profilecard": "^16.4.0",
+    "@atlaskit/profilecard": "^16.5.0",
     "@atlaskit/radio": "^5.3.0",
     "@atlaskit/range": "^6.0.0",
     "@atlaskit/smart-card": "^19.1.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/util-data-test": "^17.2.0",
+    "@atlaskit/util-data-test": "^17.3.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",