@atlaskit/renderer 112.3.0 → 112.3.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/renderer
 
+## 112.3.1
+
+### Patch Changes
+
+- [#159704](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/159704)
+  [`03e6dc49c3d4f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/03e6dc49c3d4f) -
+  Add temporary sticky header configuration options to allow consumer to set the default overflow
+  parent
+
 ## 112.3.0
 
 ### Minor Changes

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

@@ -173,7 +173,7 @@ var StickyTable = exports.StickyTable = function StickyTable(_ref) {
 /**
  * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
  */
-function findHorizontalOverflowScrollParent(table) {
+function findHorizontalOverflowScrollParent(table, defaultScrollRootEl) {
   var parent = table;
   if (!parent) {
     return null;
@@ -184,6 +184,11 @@ function findHorizontalOverflowScrollParent(table) {
     if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
       return parent;
     }
+    if (!!defaultScrollRootEl && defaultScrollRootEl === parent) {
+      // If a defaultScrollRootEl was specified and we reached it without finding a closer scroll parent,
+      // use the defaultScrollRootEl.
+      return parent;
+    }
   }
   return null;
 }
@@ -226,8 +231,8 @@ var OverflowParent = exports.OverflowParent = /*#__PURE__*/function () {
     }
   }], [{
     key: "fromElement",
-    value: function fromElement(el) {
-      return new OverflowParent(findHorizontalOverflowScrollParent(el) || window);
+    value: function fromElement(el, defaultScrollRootEl) {
+      return new OverflowParent(findHorizontalOverflowScrollParent(el, defaultScrollRootEl) || window);
     }
   }]);
   return OverflowParent;

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

@@ -253,7 +253,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         this.resizeObserver.observe(this.stickyHeaderRef.current);
       }
       if (this.props.stickyHeaders) {
-        this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current);
+        var _this$props$stickyHea;
+        this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea = this.props.stickyHeaders) === null || _this$props$stickyHea === void 0 ? void 0 : _this$props$stickyHea.defaultScrollRoot_DO_NOT_USE);
         this.overflowParent.addEventListener('scroll', this.onScroll);
       }
       if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
@@ -265,7 +266,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
     value: function componentDidUpdate(prevProps, prevState) {
       // toggling sticky headers visiblity
       if (this.props.stickyHeaders && !this.overflowParent) {
-        this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current);
+        var _this$props$stickyHea2;
+        this.overflowParent = _sticky.OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea2 = this.props.stickyHeaders) === null || _this$props$stickyHea2 === void 0 ? void 0 : _this$props$stickyHea2.defaultScrollRoot_DO_NOT_USE);
       } else if (!this.props.stickyHeaders && this.overflowParent) {
         this.overflowParent.removeEventListener('scroll', this.onScroll);
         this.overflowParent = null;
@@ -296,7 +298,14 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
         case 'pin-bottom':
           return this.pinTop;
         case 'stick':
-          return this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
+          var offsetTop = this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
+          if (typeof offsetTop === 'number') {
+            var _this$props$stickyHea3, _this$props$stickyHea4;
+            var defaultScrollRootOffsetTop = (_this$props$stickyHea3 = (_this$props$stickyHea4 = this.props.stickyHeaders) === null || _this$props$stickyHea4 === void 0 ? void 0 : _this$props$stickyHea4.defaultScrollRootTop_DO_NOT_USE) !== null && _this$props$stickyHea3 !== void 0 ? _this$props$stickyHea3 : 0;
+            return offsetTop + defaultScrollRootOffsetTop;
+          } else {
+            return offsetTop;
+          }
         default:
           return undefined;
       }

package/dist/cjs/ui/Renderer/index.js

@@ -65,7 +65,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "112.3.0";
+var packageVersion = "112.3.1";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -174,7 +174,7 @@ export const StickyTable = ({
 /**
  * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
  */
-function findHorizontalOverflowScrollParent(table) {
+function findHorizontalOverflowScrollParent(table, defaultScrollRootEl) {
   let parent = table;
   if (!parent) {
     return null;
@@ -185,6 +185,11 @@ function findHorizontalOverflowScrollParent(table) {
     if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
       return parent;
     }
+    if (!!defaultScrollRootEl && defaultScrollRootEl === parent) {
+      // If a defaultScrollRootEl was specified and we reached it without finding a closer scroll parent,
+      // use the defaultScrollRootEl.
+      return parent;
+    }
   }
   return null;
 }
@@ -193,8 +198,8 @@ export class OverflowParent {
     this.ref = ref;
     this.ref = ref;
   }
-  static fromElement(el) {
-    return new OverflowParent(findHorizontalOverflowScrollParent(el) || window);
+  static fromElement(el, defaultScrollRootEl) {
+    return new OverflowParent(findHorizontalOverflowScrollParent(el, defaultScrollRootEl) || window);
   }
   get isElement() {
     return this.ref instanceof HTMLElement;

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

@@ -204,7 +204,8 @@ export class TableContainer extends React.Component {
       this.resizeObserver.observe(this.stickyHeaderRef.current);
     }
     if (this.props.stickyHeaders) {
-      this.overflowParent = OverflowParent.fromElement(this.tableRef.current);
+      var _this$props$stickyHea;
+      this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea = this.props.stickyHeaders) === null || _this$props$stickyHea === void 0 ? void 0 : _this$props$stickyHea.defaultScrollRoot_DO_NOT_USE);
       this.overflowParent.addEventListener('scroll', this.onScroll);
     }
     if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
@@ -214,7 +215,8 @@ export class TableContainer extends React.Component {
   componentDidUpdate(prevProps, prevState) {
     // toggling sticky headers visiblity
     if (this.props.stickyHeaders && !this.overflowParent) {
-      this.overflowParent = OverflowParent.fromElement(this.tableRef.current);
+      var _this$props$stickyHea2;
+      this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea2 = this.props.stickyHeaders) === null || _this$props$stickyHea2 === void 0 ? void 0 : _this$props$stickyHea2.defaultScrollRoot_DO_NOT_USE);
     } else if (!this.props.stickyHeaders && this.overflowParent) {
       this.overflowParent.removeEventListener('scroll', this.onScroll);
       this.overflowParent = null;
@@ -241,7 +243,14 @@ export class TableContainer extends React.Component {
       case 'pin-bottom':
         return this.pinTop;
       case 'stick':
-        return this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
+        const offsetTop = this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
+        if (typeof offsetTop === 'number') {
+          var _this$props$stickyHea3, _this$props$stickyHea4;
+          const defaultScrollRootOffsetTop = (_this$props$stickyHea3 = (_this$props$stickyHea4 = this.props.stickyHeaders) === null || _this$props$stickyHea4 === void 0 ? void 0 : _this$props$stickyHea4.defaultScrollRootTop_DO_NOT_USE) !== null && _this$props$stickyHea3 !== void 0 ? _this$props$stickyHea3 : 0;
+          return offsetTop + defaultScrollRootOffsetTop;
+        } else {
+          return offsetTop;
+        }
       default:
         return undefined;
     }

package/dist/es2019/ui/Renderer/index.js

@@ -45,7 +45,7 @@ import { countNodes } from './count-nodes';
 export const NORMAL_SEVERITY_THRESHOLD = 2000;
 export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "112.3.0";
+const packageVersion = "112.3.1";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

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

@@ -164,7 +164,7 @@ export var StickyTable = function StickyTable(_ref) {
 /**
  * Traverse DOM Tree upwards looking for table parents with "overflow: scroll".
  */
-function findHorizontalOverflowScrollParent(table) {
+function findHorizontalOverflowScrollParent(table, defaultScrollRootEl) {
   var parent = table;
   if (!parent) {
     return null;
@@ -175,6 +175,11 @@ function findHorizontalOverflowScrollParent(table) {
     if (style.overflow === 'scroll' || style.overflowY === 'scroll') {
       return parent;
     }
+    if (!!defaultScrollRootEl && defaultScrollRootEl === parent) {
+      // If a defaultScrollRootEl was specified and we reached it without finding a closer scroll parent,
+      // use the defaultScrollRootEl.
+      return parent;
+    }
   }
   return null;
 }
@@ -217,8 +222,8 @@ export var OverflowParent = /*#__PURE__*/function () {
     }
   }], [{
     key: "fromElement",
-    value: function fromElement(el) {
-      return new OverflowParent(findHorizontalOverflowScrollParent(el) || window);
+    value: function fromElement(el, defaultScrollRootEl) {
+      return new OverflowParent(findHorizontalOverflowScrollParent(el, defaultScrollRootEl) || window);
     }
   }]);
   return OverflowParent;

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

@@ -246,7 +246,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         this.resizeObserver.observe(this.stickyHeaderRef.current);
       }
       if (this.props.stickyHeaders) {
-        this.overflowParent = OverflowParent.fromElement(this.tableRef.current);
+        var _this$props$stickyHea;
+        this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea = this.props.stickyHeaders) === null || _this$props$stickyHea === void 0 ? void 0 : _this$props$stickyHea.defaultScrollRoot_DO_NOT_USE);
         this.overflowParent.addEventListener('scroll', this.onScroll);
       }
       if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
@@ -258,7 +259,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       // toggling sticky headers visiblity
       if (this.props.stickyHeaders && !this.overflowParent) {
-        this.overflowParent = OverflowParent.fromElement(this.tableRef.current);
+        var _this$props$stickyHea2;
+        this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea2 = this.props.stickyHeaders) === null || _this$props$stickyHea2 === void 0 ? void 0 : _this$props$stickyHea2.defaultScrollRoot_DO_NOT_USE);
       } else if (!this.props.stickyHeaders && this.overflowParent) {
         this.overflowParent.removeEventListener('scroll', this.onScroll);
         this.overflowParent = null;
@@ -289,7 +291,14 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
         case 'pin-bottom':
           return this.pinTop;
         case 'stick':
-          return this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
+          var offsetTop = this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
+          if (typeof offsetTop === 'number') {
+            var _this$props$stickyHea3, _this$props$stickyHea4;
+            var defaultScrollRootOffsetTop = (_this$props$stickyHea3 = (_this$props$stickyHea4 = this.props.stickyHeaders) === null || _this$props$stickyHea4 === void 0 ? void 0 : _this$props$stickyHea4.defaultScrollRootTop_DO_NOT_USE) !== null && _this$props$stickyHea3 !== void 0 ? _this$props$stickyHea3 : 0;
+            return offsetTop + defaultScrollRootOffsetTop;
+          } else {
+            return offsetTop;
+          }
         default:
           return undefined;
       }

package/dist/esm/ui/Renderer/index.js

@@ -55,7 +55,7 @@ import { countNodes } from './count-nodes';
 export var NORMAL_SEVERITY_THRESHOLD = 2000;
 export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "112.3.0";
+var packageVersion = "112.3.1";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',

package/dist/types/react/nodes/table/sticky.d.ts

@@ -31,7 +31,7 @@ export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef
 export declare class OverflowParent {
     private ref;
     private constructor();
-    static fromElement(el: HTMLElement | null): OverflowParent;
+    static fromElement(el: HTMLElement | null, defaultScrollRootEl?: HTMLElement): OverflowParent;
     get isElement(): boolean;
     get top(): number;
     addEventListener(type: string, cb: EventListenerOrEventListenerObject, ...args: any[]): void;

package/dist/types/ui/Renderer/types.d.ts

@@ -1,8 +1,27 @@
 /// <reference types="react" />
 export type RendererAppearance = 'comment' | 'full-page' | 'full-width' | undefined;
+/**
+ * DO NOT USE THESE OPTIONS
+ * These StickyHeaderConfig_DO_NOT_USE options are being TEMPORARILY added so Confluence can use Sticky Table Headers
+ * in Nav4.
+ *
+ * They will be cleaned up ASAP after Confluence refactors its page layout to add an explicit scroll container (DISCO-3121)
+ *
+ * `defaultScrollRoot_DO_NOT_USE` - defaults to undefined - can be used to specify the default OverflowParent if the table
+ *      doesn't have a parent that explicitly specifies `overflow: scroll` or `overflow-y: scroll`. When undefined, the
+ *      default OverflowParent will be the window
+ * `defaultScrollRootTop_DO_NOT_USE` - defaults to 0 - can be used to specify any offset that should be applied to the
+ *      sticky table header offset but does not need to be included when determining if the header should be sticky.
+ *      This is required bcause the llogic that determines if the header should be sticky takes the OverflowParent.offsetTop
+ *      into account. But the calculation to get the actual header offset does not.
+ */
+type StickyHeaderConfig_DO_NOT_USE = {
+    defaultScrollRoot_DO_NOT_USE?: HTMLElement;
+    defaultScrollRootTop_DO_NOT_USE?: number;
+};
 export type StickyHeaderConfig = {
     offsetTop?: number;
-};
+} & StickyHeaderConfig_DO_NOT_USE;
 export type StickyHeaderProps = boolean | ({
     show?: boolean;
 } & StickyHeaderConfig);
@@ -14,3 +33,4 @@ export type NodeComponentsProps = {
     [key: string]: React.ComponentType<React.PropsWithChildren<any>>;
 };
 export type HeadingAnchorLinksProps = boolean | HeadingAnchorLinksConfig;
+export {};

package/dist/types-ts4.5/react/nodes/table/sticky.d.ts

@@ -31,7 +31,7 @@ export declare const StickyTable: ({ top, left, mode, shadowClassNames, innerRef
 export declare class OverflowParent {
     private ref;
     private constructor();
-    static fromElement(el: HTMLElement | null): OverflowParent;
+    static fromElement(el: HTMLElement | null, defaultScrollRootEl?: HTMLElement): OverflowParent;
     get isElement(): boolean;
     get top(): number;
     addEventListener(type: string, cb: EventListenerOrEventListenerObject, ...args: any[]): void;

package/dist/types-ts4.5/ui/Renderer/types.d.ts

@@ -1,8 +1,27 @@
 /// <reference types="react" />
 export type RendererAppearance = 'comment' | 'full-page' | 'full-width' | undefined;
+/**
+ * DO NOT USE THESE OPTIONS
+ * These StickyHeaderConfig_DO_NOT_USE options are being TEMPORARILY added so Confluence can use Sticky Table Headers
+ * in Nav4.
+ *
+ * They will be cleaned up ASAP after Confluence refactors its page layout to add an explicit scroll container (DISCO-3121)
+ *
+ * `defaultScrollRoot_DO_NOT_USE` - defaults to undefined - can be used to specify the default OverflowParent if the table
+ *      doesn't have a parent that explicitly specifies `overflow: scroll` or `overflow-y: scroll`. When undefined, the
+ *      default OverflowParent will be the window
+ * `defaultScrollRootTop_DO_NOT_USE` - defaults to 0 - can be used to specify any offset that should be applied to the
+ *      sticky table header offset but does not need to be included when determining if the header should be sticky.
+ *      This is required bcause the llogic that determines if the header should be sticky takes the OverflowParent.offsetTop
+ *      into account. But the calculation to get the actual header offset does not.
+ */
+type StickyHeaderConfig_DO_NOT_USE = {
+    defaultScrollRoot_DO_NOT_USE?: HTMLElement;
+    defaultScrollRootTop_DO_NOT_USE?: number;
+};
 export type StickyHeaderConfig = {
     offsetTop?: number;
-};
+} & StickyHeaderConfig_DO_NOT_USE;
 export type StickyHeaderProps = boolean | ({
     show?: boolean;
 } & StickyHeaderConfig);
@@ -14,3 +33,4 @@ export type NodeComponentsProps = {
     [key: string]: React.ComponentType<React.PropsWithChildren<any>>;
 };
 export type HeadingAnchorLinksProps = boolean | HeadingAnchorLinksConfig;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "112.3.0",
+	"version": "112.3.1",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
 		"@atlaskit/emoji": "^67.9.0",
 		"@atlaskit/feature-gate-js-client": "^4.22.0",
 		"@atlaskit/icon": "^22.24.0",
-		"@atlaskit/link-datasource": "^3.7.0",
+		"@atlaskit/link-datasource": "^3.8.0",
 		"@atlaskit/media-card": "^78.10.0",
 		"@atlaskit/media-client": "^28.0.0",
 		"@atlaskit/media-client-react": "^2.3.0",
@@ -51,7 +51,7 @@
 		"@atlaskit/task-decision": "^17.11.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/tmp-editor-statsig": "^2.11.0",
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tokens": "^2.1.0",
 		"@atlaskit/tooltip": "^18.8.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",