@atlaskit/renderer 111.2.0 → 111.2.1

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.
Files changed (11) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/react/nodes/TableStickyScrollbar.js +4 -4
  3. package/dist/cjs/ui/Renderer/index.js +1 -1
  4. package/dist/cjs/ui/Renderer/style.js +1 -1
  5. package/dist/es2019/react/nodes/TableStickyScrollbar.js +4 -4
  6. package/dist/es2019/ui/Renderer/index.js +1 -1
  7. package/dist/es2019/ui/Renderer/style.js +2 -1
  8. package/dist/esm/react/nodes/TableStickyScrollbar.js +4 -4
  9. package/dist/esm/ui/Renderer/index.js +1 -1
  10. package/dist/esm/ui/Renderer/style.js +1 -1
  11. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # @atlaskit/renderer
2
2
 
3
+ ## 111.2.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#150548](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150548)
8
+ [`e2a39fd2dd76d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e2a39fd2dd76d) -
9
+ [ux] Fix jumpiness caused by table height change when table sticky scrollbar is renderered by
10
+ using css visibility instead of display.
11
+
3
12
  ## 111.2.0
4
13
 
5
14
  ### Minor Changes
package/dist/cjs/react/nodes/TableStickyScrollbar.js CHANGED
@@ -123,15 +123,15 @@ var TableStickyScrollbar = exports.TableStickyScrollbar = /*#__PURE__*/function
123
123
  }, {
124
124
  key: "hide",
125
125
  value: function hide() {
126
- if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'none') {
127
- this.stickyScrollbarContainerElement.style.display = 'none';
126
+ if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.visibility !== 'hidden') {
127
+ this.stickyScrollbarContainerElement.style.visibility = 'hidden';
128
128
  }
129
129
  }
130
130
  }, {
131
131
  key: "show",
132
132
  value: function show() {
133
- if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'block') {
134
- this.stickyScrollbarContainerElement.style.display = 'block';
133
+ if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.visibility !== 'visible') {
134
+ this.stickyScrollbarContainerElement.style.visibility = 'visible';
135
135
  }
136
136
  }
137
137
  }]);
package/dist/cjs/ui/Renderer/index.js CHANGED
@@ -65,7 +65,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
65
65
  var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
66
66
  var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
67
67
  var packageName = "@atlaskit/renderer";
68
- var packageVersion = "111.2.0";
68
+ var packageVersion = "111.2.1";
69
69
  var setAsQueryContainerStyles = (0, _react2.css)({
70
70
  containerName: 'ak-renderer-wrapper',
71
71
  containerType: 'inline-size',
package/dist/cjs/ui/Renderer/style.js CHANGED
@@ -146,7 +146,7 @@ function getAnnotationStyles(_ref6) {
146
146
  });
147
147
  }
148
148
  var tableRowHeight = 44;
149
- var stickyScrollbarStyles = "\n\tposition: relative;\n\tflex-direction: column;\n\n\t> .".concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER, " {\n\t width: 100%;\n\t display: none;\n\t overflow-x: auto;\n\t position: sticky;\n\t bottom: ", "var(--ds-space-0, 0px)", ";\n\t z-index: 1;\n\t}\n\n\t> .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, ",\n\t> .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t position: absolute;\n\t width: 100%;\n\t height: 1px;\n\t margin-top: -1px;\n\t // need this to avoid sentinel being focused via keyboard\n\t // this still allows it to be detected by intersection observer\n\t visibility: hidden;\n\t }\n\t > .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t top: ").concat(tableRowHeight * 3, "px;\n\t }\n\t > .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, " {\n\t bottom: ", "var(--ds-space-250, 20px)", "; // MAX_BROWSER_SCROLLBAR_HEIGHT = 20;\n\t }\n ");
149
+ var stickyScrollbarStyles = "\n\tposition: relative;\n\tflex-direction: column;\n\n\t> .".concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER, " {\n\t width: 100%;\n\t display: block;\n\t visibility: hidden;\n\t overflow-x: auto;\n\t position: sticky;\n\t bottom: ", "var(--ds-space-0, 0px)", ";\n\t z-index: 1;\n\t}\n\n\t> .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, ",\n\t> .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t position: absolute;\n\t width: 100%;\n\t height: 1px;\n\t margin-top: -1px;\n\t // need this to avoid sentinel being focused via keyboard\n\t // this still allows it to be detected by intersection observer\n\t visibility: hidden;\n\t }\n\t > .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t top: ").concat(tableRowHeight * 3, "px;\n\t }\n\t > .").concat(_styles.TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, " {\n\t bottom: ", "var(--ds-space-250, 20px)", "; // MAX_BROWSER_SCROLLBAR_HEIGHT = 20;\n\t }\n ");
150
150
  var rendererStyles = exports.rendererStyles = function rendererStyles(wrapperProps) {
151
151
  return function (theme) {
152
152
  var _getGlobalTheme = (0, _tokens.getGlobalTheme)(),
package/dist/es2019/react/nodes/TableStickyScrollbar.js CHANGED
@@ -90,13 +90,13 @@ export class TableStickyScrollbar {
90
90
  }
91
91
  }
92
92
  hide() {
93
- if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'none') {
94
- this.stickyScrollbarContainerElement.style.display = 'none';
93
+ if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.visibility !== 'hidden') {
94
+ this.stickyScrollbarContainerElement.style.visibility = 'hidden';
95
95
  }
96
96
  }
97
97
  show() {
98
- if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'block') {
99
- this.stickyScrollbarContainerElement.style.display = 'block';
98
+ if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.visibility !== 'visible') {
99
+ this.stickyScrollbarContainerElement.style.visibility = 'visible';
100
100
  }
101
101
  }
102
102
  }
package/dist/es2019/ui/Renderer/index.js CHANGED
@@ -45,7 +45,7 @@ import { nodeToReact } from '../../react/nodes';
45
45
  export const NORMAL_SEVERITY_THRESHOLD = 2000;
46
46
  export const DEGRADED_SEVERITY_THRESHOLD = 3000;
47
47
  const packageName = "@atlaskit/renderer";
48
- const packageVersion = "111.2.0";
48
+ const packageVersion = "111.2.1";
49
49
  const setAsQueryContainerStyles = css({
50
50
  containerName: 'ak-renderer-wrapper',
51
51
  containerType: 'inline-size',
package/dist/es2019/ui/Renderer/style.js CHANGED
@@ -410,7 +410,8 @@ const stickyScrollbarStyles = `
410
410
 
411
411
  > .${TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER} {
412
412
  width: 100%;
413
- display: none;
413
+ display: block;
414
+ visibility: hidden;
414
415
  overflow-x: auto;
415
416
  position: sticky;
416
417
  bottom: ${"var(--ds-space-0, 0px)"};
package/dist/esm/react/nodes/TableStickyScrollbar.js CHANGED
@@ -116,15 +116,15 @@ export var TableStickyScrollbar = /*#__PURE__*/function () {
116
116
  }, {
117
117
  key: "hide",
118
118
  value: function hide() {
119
- if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'none') {
120
- this.stickyScrollbarContainerElement.style.display = 'none';
119
+ if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.visibility !== 'hidden') {
120
+ this.stickyScrollbarContainerElement.style.visibility = 'hidden';
121
121
  }
122
122
  }
123
123
  }, {
124
124
  key: "show",
125
125
  value: function show() {
126
- if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.display !== 'block') {
127
- this.stickyScrollbarContainerElement.style.display = 'block';
126
+ if (this.stickyScrollbarContainerElement && this.stickyScrollbarContainerElement.style.visibility !== 'visible') {
127
+ this.stickyScrollbarContainerElement.style.visibility = 'visible';
128
128
  }
129
129
  }
130
130
  }]);
package/dist/esm/ui/Renderer/index.js CHANGED
@@ -55,7 +55,7 @@ import { nodeToReact } from '../../react/nodes';
55
55
  export var NORMAL_SEVERITY_THRESHOLD = 2000;
56
56
  export var DEGRADED_SEVERITY_THRESHOLD = 3000;
57
57
  var packageName = "@atlaskit/renderer";
58
- var packageVersion = "111.2.0";
58
+ var packageVersion = "111.2.1";
59
59
  var setAsQueryContainerStyles = css({
60
60
  containerName: 'ak-renderer-wrapper',
61
61
  containerType: 'inline-size',
package/dist/esm/ui/Renderer/style.js CHANGED
@@ -137,7 +137,7 @@ function getAnnotationStyles(_ref6) {
137
137
  });
138
138
  }
139
139
  var tableRowHeight = 44;
140
- var stickyScrollbarStyles = "\n\tposition: relative;\n\tflex-direction: column;\n\n\t> .".concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER, " {\n\t width: 100%;\n\t display: none;\n\t overflow-x: auto;\n\t position: sticky;\n\t bottom: ", "var(--ds-space-0, 0px)", ";\n\t z-index: 1;\n\t}\n\n\t> .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, ",\n\t> .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t position: absolute;\n\t width: 100%;\n\t height: 1px;\n\t margin-top: -1px;\n\t // need this to avoid sentinel being focused via keyboard\n\t // this still allows it to be detected by intersection observer\n\t visibility: hidden;\n\t }\n\t > .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t top: ").concat(tableRowHeight * 3, "px;\n\t }\n\t > .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, " {\n\t bottom: ", "var(--ds-space-250, 20px)", "; // MAX_BROWSER_SCROLLBAR_HEIGHT = 20;\n\t }\n ");
140
+ var stickyScrollbarStyles = "\n\tposition: relative;\n\tflex-direction: column;\n\n\t> .".concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER, " {\n\t width: 100%;\n\t display: block;\n\t visibility: hidden;\n\t overflow-x: auto;\n\t position: sticky;\n\t bottom: ", "var(--ds-space-0, 0px)", ";\n\t z-index: 1;\n\t}\n\n\t> .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, ",\n\t> .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t position: absolute;\n\t width: 100%;\n\t height: 1px;\n\t margin-top: -1px;\n\t // need this to avoid sentinel being focused via keyboard\n\t // this still allows it to be detected by intersection observer\n\t visibility: hidden;\n\t }\n\t > .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP, " {\n\t top: ").concat(tableRowHeight * 3, "px;\n\t }\n\t > .").concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM, " {\n\t bottom: ", "var(--ds-space-250, 20px)", "; // MAX_BROWSER_SCROLLBAR_HEIGHT = 20;\n\t }\n ");
141
141
  export var rendererStyles = function rendererStyles(wrapperProps) {
142
142
  return function (theme) {
143
143
  var _getGlobalTheme = getGlobalTheme(),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/renderer",
3
- "version": "111.2.0",
3
+ "version": "111.2.1",
4
4
  "description": "Renderer component",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"