@atlaskit/emoji 67.5.0 → 67.5.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/emoji
 
+## 67.5.2
+
+### Patch Changes
+
+- [`07e2883caee`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07e2883caee) - upgrade @tanstack/react-virtual
+
+## 67.5.1
+
+### Patch Changes
+
+- [`6900f89eb0e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6900f89eb0e) - Internal changes to use space tokens. There is no expected visual or behaviour change.
+
 ## 67.5.0
 
 ### Minor Changes

package/dist/cjs/components/common/styles.js

@@ -34,8 +34,8 @@ var deleteButton = (0, _react.css)({
   visibility: 'hidden',
   display: 'flex',
   position: 'absolute',
-  top: '-8px',
-  right: '-8px',
+  top: "var(--ds-space-negative-100, -8px)",
+  right: "var(--ds-space-negative-100, -8px)",
   zIndex: 1
 });
 exports.deleteButton = deleteButton;
@@ -136,7 +136,7 @@ var emojiButton = (0, _react.css)((_css3 = {
   border: '0 none',
   padding: 0
 }), (0, _defineProperty2.default)(_css3, '&>span', (_span = {
-  padding: '6px'
+  padding: "var(--ds-space-075, 6px)"
 }, (0, _defineProperty2.default)(_span, "&>.".concat(emojiSprite), {
   height: '24px',
   width: '24px'
@@ -172,7 +172,7 @@ var previewText = (0, _react.css)({
   display: 'flex',
   flexDirection: 'column',
   alignSelf: 'center',
-  marginTop: '-2px',
+  marginTop: "var(--ds-space-negative-025, -2px)",
   marginLeft: '10px',
   maxWidth: '285px',
   width: '285px' /* IE */,
@@ -195,9 +195,9 @@ var emojiShortName = (0, _react.css)((0, _defineProperty2.default)({
   color: "var(--ds-text-subtle, ".concat(_colors.N200, ")"),
   fontSize: '12px',
   lineHeight: 1,
-  marginBottom: '-2px',
+  marginBottom: "var(--ds-space-negative-025, -2px)",
   overflow: 'hidden',
-  paddingBottom: '2px',
+  paddingBottom: "var(--ds-space-025, 2px)",
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 }, '&:first-of-type', {
@@ -321,7 +321,7 @@ exports.uploadPreview = uploadPreview;
 var uploadPreviewText = (0, _react.css)({
   h5: {
     color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
-    paddingBottom: '4px',
+    paddingBottom: "var(--ds-space-050, 4px)",
     fontSize: '12px'
   },
   img: {
@@ -331,7 +331,7 @@ var uploadPreviewText = (0, _react.css)({
 });
 exports.uploadPreviewText = uploadPreviewText;
 var bigEmojiPreview = (0, _react.css)({
-  paddingLeft: '4px',
+  paddingLeft: "var(--ds-space-050, 4px)",
   img: {
     maxHeight: '40px',
     maxWidth: '100px'
@@ -382,7 +382,7 @@ var headingH5 = (0, _react.css)({
 });
 exports.headingH5 = headingH5;
 var requiredSymbol = (0, _react.css)({
-  paddingLeft: "".concat((0, _constants2.gridSize)() / 4, "px"),
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
   fontFamily: (0, _constants2.fontFamily)()
 });
@@ -404,7 +404,7 @@ var deleteFooter = (0, _react.css)((0, _defineProperty2.default)({
 }, ".".concat(submitDelete), {
   width: '84px',
   fontWeight: 'bold',
-  marginRight: '4px'
+  marginRight: "var(--ds-space-050, 4px)"
 }));
 exports.deleteFooter = deleteFooter;
 var emojiDeleteErrorMessage = (0, _react.css)({
@@ -412,7 +412,7 @@ var emojiDeleteErrorMessage = (0, _react.css)({
   color: "var(--ds-text-danger, ".concat(_colors.R400, ")"),
   alignItems: 'center',
   justifyContent: 'flex-end',
-  paddingRight: '4px'
+  paddingRight: "var(--ds-space-050, 4px)"
 });
 exports.emojiDeleteErrorMessage = emojiDeleteErrorMessage;
 var emojiChooseFileErrorMessage = (0, _react.css)({
@@ -438,7 +438,7 @@ var uploadRetryButton = (0, _react.css)({
   maxWidth: '172px',
   justifyContent: 'center',
   fontWeight: 'bold',
-  marginRight: '4px',
+  marginRight: "var(--ds-space-050, 4px)",
   div: {
     display: 'flex'
   }
@@ -447,7 +447,7 @@ exports.uploadRetryButton = uploadRetryButton;
 var uploadEmojiButton = (0, _react.css)({
   maxWidth: '187px',
   justifyContent: 'center',
-  marginRight: '4px',
+  marginRight: "var(--ds-space-050, 4px)",
   div: {
     display: 'flex'
   }
@@ -471,7 +471,7 @@ exports.emojiActionsWrapper = emojiActionsWrapper;
 var tooltipShortcutStyle = (0, _react.css)({
   borderRadius: '3px',
   backgroundColor: "var(--ds-background-inverse-subtle, ".concat(_colors.N400, ")"),
-  padding: '0 2px',
+  padding: "0 ".concat("var(--ds-space-025, 2px)"),
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
   label: 'tooltip-shortcut'

package/dist/cjs/components/picker/VirtualList.js

@@ -149,10 +149,7 @@ var VirtualList = /*#__PURE__*/_react2.default.forwardRef(function (props, ref)
   var scrollToRowAndFocusEmoji = (0, _react2.useCallback)(function (emojiToFocus) {
     if (emojiToFocus) {
       var _emojiToFocus$element;
-      rowVirtualizer.scrollToIndex(emojiToFocus.rowIndex, {
-        align: 'auto',
-        smoothScroll: false
-      });
+      rowVirtualizer.scrollToIndex(emojiToFocus.rowIndex);
       (_emojiToFocus$element = emojiToFocus.element) === null || _emojiToFocus$element === void 0 ? void 0 : _emojiToFocus$element.focus({
         preventScroll: true
       });
@@ -167,10 +164,7 @@ var VirtualList = /*#__PURE__*/_react2.default.forwardRef(function (props, ref)
     if (waitForScrollFinish) {
       // scroll to target rowIndex first to ensure the row is rendered in list.
       // used in page up/down, ctrl+Home, ctrl+End
-      rowVirtualizer.scrollToIndex(rIndex, {
-        align: 'auto',
-        smoothScroll: false
-      });
+      rowVirtualizer.scrollToIndex(rIndex);
       setTimeout(function () {
         var emojiToFocus = findNextEmoji(rIndex, cIndex, direction);
         scrollToRowAndFocusEmoji(emojiToFocus);
@@ -246,8 +240,7 @@ var VirtualList = /*#__PURE__*/_react2.default.forwardRef(function (props, ref)
             scrollPaddingStart: 0
           }));
           rowVirtualizer.scrollToIndex(index, {
-            align: scrollToAlignment,
-            smoothScroll: false
+            align: scrollToAlignment
           });
         }
       },

package/dist/cjs/components/uploader/styles.js

@@ -16,10 +16,10 @@ var emojiUploadWidget = (0, _react.css)({
   background: "var(--ds-surface-overlay, white)",
   height: "120px",
   width: "".concat(_constants.emojiPickerWidth, "px"),
-  marginBottom: '8px',
+  marginBottom: "var(--ds-space-100, 8px)",
   minWidth: "".concat(_constants.emojiPickerWidth, "px"),
   margin: '-10px',
-  marginTop: '-16px'
+  marginTop: "var(--ds-space-negative-200, -16px)"
 });
 
 /// Footer

package/dist/cjs/util/analytics/analytics.js

@@ -20,7 +20,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "67.5.0"
+      packageVersion: "67.5.2"
     }, attributes)
   };
 };

package/dist/es2019/components/common/styles.js

@@ -2,7 +2,7 @@ import { css, keyframes } from '@emotion/react';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
 import { B100, N20, N200, N20A, N300, N400, N900, R300, R400 } from '@atlaskit/theme/colors';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 export const commonSelectedStyles = 'emoji-common-selected';
 export const selectOnHoverStyles = 'emoji-common-select-on-hover';
 export const emojiSprite = 'emoji-common-emoji-sprite';
@@ -16,8 +16,8 @@ export const deleteButton = css({
   visibility: 'hidden',
   display: 'flex',
   position: 'absolute',
-  top: '-8px',
-  right: '-8px',
+  top: "var(--ds-space-negative-100, -8px)",
+  right: "var(--ds-space-negative-100, -8px)",
   zIndex: 1
 });
 export const emojiToneSelectorContainer = css({
@@ -128,7 +128,7 @@ export const emojiButton = css({
     padding: 0
   },
   '&>span': {
-    padding: '6px',
+    padding: "var(--ds-space-075, 6px)",
     // Scale sprite to fit regardless of default emoji size
     [`&>.${emojiSprite}`]: {
       height: '24px',
@@ -167,7 +167,7 @@ export const previewText = css({
   display: 'flex',
   flexDirection: 'column',
   alignSelf: 'center',
-  marginTop: '-2px',
+  marginTop: "var(--ds-space-negative-025, -2px)",
   marginLeft: '10px',
   maxWidth: '285px',
   width: '285px' /* IE */,
@@ -189,9 +189,9 @@ export const emojiShortName = css({
   color: `var(--ds-text-subtle, ${N200})`,
   fontSize: '12px',
   lineHeight: 1,
-  marginBottom: '-2px',
+  marginBottom: "var(--ds-space-negative-025, -2px)",
   overflow: 'hidden',
-  paddingBottom: '2px',
+  paddingBottom: "var(--ds-space-025, 2px)",
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
   ['&:first-of-type']: {
@@ -308,7 +308,7 @@ export const uploadPreview = css({
 export const uploadPreviewText = css({
   h5: {
     color: `var(--ds-text-subtle, ${N300})`,
-    paddingBottom: '4px',
+    paddingBottom: "var(--ds-space-050, 4px)",
     fontSize: '12px'
   },
   img: {
@@ -317,7 +317,7 @@ export const uploadPreviewText = css({
   }
 });
 export const bigEmojiPreview = css({
-  paddingLeft: '4px',
+  paddingLeft: "var(--ds-space-050, 4px)",
   img: {
     maxHeight: '40px',
     maxWidth: '100px'
@@ -362,7 +362,7 @@ export const headingH5 = css({
   }
 });
 export const requiredSymbol = css({
-  paddingLeft: `${getGridSize() / 4}px`,
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: `var(--ds-text-danger, ${R400})`,
   fontFamily: getFontFamily()
 });
@@ -382,7 +382,7 @@ export const deleteFooter = css({
   [`.${submitDelete}`]: {
     width: '84px',
     fontWeight: 'bold',
-    marginRight: '4px'
+    marginRight: "var(--ds-space-050, 4px)"
   }
 });
 export const emojiDeleteErrorMessage = css({
@@ -390,7 +390,7 @@ export const emojiDeleteErrorMessage = css({
   color: `var(--ds-text-danger, ${R400})`,
   alignItems: 'center',
   justifyContent: 'flex-end',
-  paddingRight: '4px'
+  paddingRight: "var(--ds-space-050, 4px)"
 });
 export const emojiChooseFileErrorMessage = css({
   display: 'flex',
@@ -412,7 +412,7 @@ export const uploadRetryButton = css({
   maxWidth: '172px',
   justifyContent: 'center',
   fontWeight: 'bold',
-  marginRight: '4px',
+  marginRight: "var(--ds-space-050, 4px)",
   div: {
     display: 'flex'
   }
@@ -420,7 +420,7 @@ export const uploadRetryButton = css({
 export const uploadEmojiButton = css({
   maxWidth: '187px',
   justifyContent: 'center',
-  marginRight: '4px',
+  marginRight: "var(--ds-space-050, 4px)",
   div: {
     display: 'flex'
   }
@@ -440,7 +440,7 @@ export const emojiActionsWrapper = css({
 export const tooltipShortcutStyle = css({
   borderRadius: '3px',
   backgroundColor: `var(--ds-background-inverse-subtle, ${N400})`,
-  padding: '0 2px',
+  padding: `0 ${"var(--ds-space-025, 2px)"}`,
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
   label: 'tooltip-shortcut'

package/dist/es2019/components/picker/VirtualList.js

@@ -137,10 +137,7 @@ export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
   const scrollToRowAndFocusEmoji = useCallback(emojiToFocus => {
     if (emojiToFocus) {
       var _emojiToFocus$element;
-      rowVirtualizer.scrollToIndex(emojiToFocus.rowIndex, {
-        align: 'auto',
-        smoothScroll: false
-      });
+      rowVirtualizer.scrollToIndex(emojiToFocus.rowIndex);
       (_emojiToFocus$element = emojiToFocus.element) === null || _emojiToFocus$element === void 0 ? void 0 : _emojiToFocus$element.focus({
         preventScroll: true
       });
@@ -154,10 +151,7 @@ export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
     if (waitForScrollFinish) {
       // scroll to target rowIndex first to ensure the row is rendered in list.
       // used in page up/down, ctrl+Home, ctrl+End
-      rowVirtualizer.scrollToIndex(rIndex, {
-        align: 'auto',
-        smoothScroll: false
-      });
+      rowVirtualizer.scrollToIndex(rIndex);
       setTimeout(() => {
         const emojiToFocus = findNextEmoji(rIndex, cIndex, direction);
         scrollToRowAndFocusEmoji(emojiToFocus);
@@ -234,8 +228,7 @@ export const VirtualList = /*#__PURE__*/React.forwardRef((props, ref) => {
             scrollPaddingStart: 0
           });
           rowVirtualizer.scrollToIndex(index, {
-            align: scrollToAlignment,
-            smoothScroll: false
+            align: scrollToAlignment
           });
         }
       },

package/dist/es2019/components/uploader/styles.js

@@ -11,10 +11,10 @@ export const emojiUploadWidget = css({
   background: "var(--ds-surface-overlay, white)",
   height: `120px`,
   width: `${emojiPickerWidth}px`,
-  marginBottom: '8px',
+  marginBottom: "var(--ds-space-100, 8px)",
   minWidth: `${emojiPickerWidth}px`,
   margin: '-10px',
-  marginTop: '-16px'
+  marginTop: "var(--ds-space-negative-200, -16px)"
 });
 
 /// Footer

package/dist/es2019/util/analytics/analytics.js

@@ -7,7 +7,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/emoji",
-    packageVersion: "67.5.0",
+    packageVersion: "67.5.2",
     ...attributes
   }
 });

package/dist/esm/components/common/styles.js

@@ -5,7 +5,7 @@ import { css, keyframes } from '@emotion/react';
 import { defaultEmojiHeight } from '../../util/constants';
 import { akEmojiSelectedBackgroundColor } from '../../util/shared-styles';
 import { B100, N20, N200, N20A, N300, N400, N900, R300, R400 } from '@atlaskit/theme/colors';
-import { fontFamily as getFontFamily, gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
 export var commonSelectedStyles = 'emoji-common-selected';
 export var selectOnHoverStyles = 'emoji-common-select-on-hover';
 export var emojiSprite = 'emoji-common-emoji-sprite';
@@ -19,8 +19,8 @@ export var deleteButton = css({
   visibility: 'hidden',
   display: 'flex',
   position: 'absolute',
-  top: '-8px',
-  right: '-8px',
+  top: "var(--ds-space-negative-100, -8px)",
+  right: "var(--ds-space-negative-100, -8px)",
   zIndex: 1
 });
 export var emojiToneSelectorContainer = css({
@@ -113,7 +113,7 @@ export var emojiButton = css((_css3 = {
   border: '0 none',
   padding: 0
 }), _defineProperty(_css3, '&>span', (_span = {
-  padding: '6px'
+  padding: "var(--ds-space-075, 6px)"
 }, _defineProperty(_span, "&>.".concat(emojiSprite), {
   height: '24px',
   width: '24px'
@@ -146,7 +146,7 @@ export var previewText = css({
   display: 'flex',
   flexDirection: 'column',
   alignSelf: 'center',
-  marginTop: '-2px',
+  marginTop: "var(--ds-space-negative-025, -2px)",
   marginLeft: '10px',
   maxWidth: '285px',
   width: '285px' /* IE */,
@@ -167,9 +167,9 @@ export var emojiShortName = css(_defineProperty({
   color: "var(--ds-text-subtle, ".concat(N200, ")"),
   fontSize: '12px',
   lineHeight: 1,
-  marginBottom: '-2px',
+  marginBottom: "var(--ds-space-negative-025, -2px)",
   overflow: 'hidden',
-  paddingBottom: '2px',
+  paddingBottom: "var(--ds-space-025, 2px)",
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
 }, '&:first-of-type', {
@@ -281,7 +281,7 @@ export var uploadPreview = css({
 export var uploadPreviewText = css({
   h5: {
     color: "var(--ds-text-subtle, ".concat(N300, ")"),
-    paddingBottom: '4px',
+    paddingBottom: "var(--ds-space-050, 4px)",
     fontSize: '12px'
   },
   img: {
@@ -290,7 +290,7 @@ export var uploadPreviewText = css({
   }
 });
 export var bigEmojiPreview = css({
-  paddingLeft: '4px',
+  paddingLeft: "var(--ds-space-050, 4px)",
   img: {
     maxHeight: '40px',
     maxWidth: '100px'
@@ -335,7 +335,7 @@ export var headingH5 = css({
   }
 });
 export var requiredSymbol = css({
-  paddingLeft: "".concat(getGridSize() / 4, "px"),
+  paddingLeft: "var(--ds-space-025, 2px)",
   color: "var(--ds-text-danger, ".concat(R400, ")"),
   fontFamily: getFontFamily()
 });
@@ -355,14 +355,14 @@ export var deleteFooter = css(_defineProperty({
 }, ".".concat(submitDelete), {
   width: '84px',
   fontWeight: 'bold',
-  marginRight: '4px'
+  marginRight: "var(--ds-space-050, 4px)"
 }));
 export var emojiDeleteErrorMessage = css({
   display: 'flex',
   color: "var(--ds-text-danger, ".concat(R400, ")"),
   alignItems: 'center',
   justifyContent: 'flex-end',
-  paddingRight: '4px'
+  paddingRight: "var(--ds-space-050, 4px)"
 });
 export var emojiChooseFileErrorMessage = css({
   display: 'flex',
@@ -384,7 +384,7 @@ export var uploadRetryButton = css({
   maxWidth: '172px',
   justifyContent: 'center',
   fontWeight: 'bold',
-  marginRight: '4px',
+  marginRight: "var(--ds-space-050, 4px)",
   div: {
     display: 'flex'
   }
@@ -392,7 +392,7 @@ export var uploadRetryButton = css({
 export var uploadEmojiButton = css({
   maxWidth: '187px',
   justifyContent: 'center',
-  marginRight: '4px',
+  marginRight: "var(--ds-space-050, 4px)",
   div: {
     display: 'flex'
   }
@@ -412,7 +412,7 @@ export var emojiActionsWrapper = css({
 export var tooltipShortcutStyle = css({
   borderRadius: '3px',
   backgroundColor: "var(--ds-background-inverse-subtle, ".concat(N400, ")"),
-  padding: '0 2px',
+  padding: "0 ".concat("var(--ds-space-025, 2px)"),
   /* TODO: fix in develop: https://atlassian.slack.com/archives/CFG3PSQ9E/p1647395052443259?thread_ts=1647394572.556029&cid=CFG3PSQ9E */
   /* stylelint-disable-next-line */
   label: 'tooltip-shortcut'

package/dist/esm/components/picker/VirtualList.js

@@ -139,10 +139,7 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
   var scrollToRowAndFocusEmoji = useCallback(function (emojiToFocus) {
     if (emojiToFocus) {
       var _emojiToFocus$element;
-      rowVirtualizer.scrollToIndex(emojiToFocus.rowIndex, {
-        align: 'auto',
-        smoothScroll: false
-      });
+      rowVirtualizer.scrollToIndex(emojiToFocus.rowIndex);
       (_emojiToFocus$element = emojiToFocus.element) === null || _emojiToFocus$element === void 0 ? void 0 : _emojiToFocus$element.focus({
         preventScroll: true
       });
@@ -157,10 +154,7 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
     if (waitForScrollFinish) {
       // scroll to target rowIndex first to ensure the row is rendered in list.
       // used in page up/down, ctrl+Home, ctrl+End
-      rowVirtualizer.scrollToIndex(rIndex, {
-        align: 'auto',
-        smoothScroll: false
-      });
+      rowVirtualizer.scrollToIndex(rIndex);
       setTimeout(function () {
         var emojiToFocus = findNextEmoji(rIndex, cIndex, direction);
         scrollToRowAndFocusEmoji(emojiToFocus);
@@ -236,8 +230,7 @@ export var VirtualList = /*#__PURE__*/React.forwardRef(function (props, ref) {
             scrollPaddingStart: 0
           }));
           rowVirtualizer.scrollToIndex(index, {
-            align: scrollToAlignment,
-            smoothScroll: false
+            align: scrollToAlignment
           });
         }
       },

package/dist/esm/components/uploader/styles.js

@@ -11,10 +11,10 @@ export var emojiUploadWidget = css({
   background: "var(--ds-surface-overlay, white)",
   height: "120px",
   width: "".concat(emojiPickerWidth, "px"),
-  marginBottom: '8px',
+  marginBottom: "var(--ds-space-100, 8px)",
   minWidth: "".concat(emojiPickerWidth, "px"),
   margin: '-10px',
-  marginTop: '-16px'
+  marginTop: "var(--ds-space-negative-200, -16px)"
 });
 
 /// Footer

package/dist/esm/util/analytics/analytics.js

@@ -12,7 +12,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread({
       packageName: "@atlaskit/emoji",
-      packageVersion: "67.5.0"
+      packageVersion: "67.5.2"
     }, attributes)
   };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/emoji",
-  "version": "67.5.0",
+  "version": "67.5.2",
   "description": "Fabric emoji React components",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,14 +40,14 @@
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/textfield": "^5.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.20.0",
+    "@atlaskit/tokens": "^1.22.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/ufo": "^0.2.0",
     "@atlaskit/util-service-support": "^6.2.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
-    "@tanstack/react-virtual": "3.0.0-beta.22",
+    "@tanstack/react-virtual": "3.0.0-beta.60",
     "js-search": "^2.0.0",
     "lru_map": "^0.4.1",
     "react-focus-lock": "^2.5.2",