@atlaskit/popper 6.1.0 → 6.3.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/popper
 
+## 6.3.0
+
+### Minor Changes
+
+- [#138688](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138688)
+  [`961d97994618c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/961d97994618c) -
+  Adds `shouldFitViewport` prop which will apply `max-width` and `max-height` to contain the
+  popper/popup within the viewport.
+
+## 6.2.0
+
+### Minor Changes
+
+- [#127511](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/127511)
+  [`db30e29344013`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/db30e29344013) -
+  Widening range of `react` and `react-dom` peer dependencies from `^16.8.0 || ^17.0.0 || ~18.2.0`
+  to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
+
+  This change has been done to enable usage of `react@18.3` as well as to have a consistent peer
+  dependency range for `react` and `react-dom` for `/platform` packages.
+
 ## 6.1.0
 
 ### Minor Changes

package/dist/cjs/max-size.js

@@ -0,0 +1,94 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getMaxSizeModifiers = getMaxSizeModifiers;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+function getMaxSizeModifiers(_ref) {
+  var viewportPadding = _ref.viewportPadding;
+  return [{
+    /**
+     * Performing DOM measurements in the 'read' phase,
+     * which is the convention for popper modifiers
+     */
+    name: 'maxSizeData',
+    enabled: true,
+    phase: 'read',
+    fn: function fn(_ref2) {
+      var state = _ref2.state,
+        name = _ref2.name;
+      if (!window.visualViewport) {
+        return;
+      }
+      state.modifiersData[name] = {
+        viewport: {
+          width: window.visualViewport.width,
+          height: window.visualViewport.height
+        }
+      };
+    }
+  }, {
+    /**
+     * Applying max size CSS
+     */
+    name: 'maxSize',
+    enabled: true,
+    phase: 'beforeWrite',
+    requiresIfExists: ['offset', 'preventOverflow', 'flip'],
+    fn: function fn(_ref3) {
+      var _data$viewport, _data$viewport2, _state$modifiersData$2, _state$modifiersData;
+      var state = _ref3.state;
+      var data = state.modifiersData.maxSizeData;
+      if (typeof (data === null || data === void 0 || (_data$viewport = data.viewport) === null || _data$viewport === void 0 ? void 0 : _data$viewport.width) !== 'number' || typeof (data === null || data === void 0 || (_data$viewport2 = data.viewport) === null || _data$viewport2 === void 0 ? void 0 : _data$viewport2.height) !== 'number') {
+        // This shouldn't occur in a real browser but might in non-browser test environments
+        return;
+      }
+      var viewport = data.viewport;
+      var _state$modifiersData$ = state.modifiersData.popperOffsets,
+        popperOffsets = _state$modifiersData$ === void 0 ? {
+          x: 0,
+          y: 0
+        } : _state$modifiersData$;
+      var _state$placement$spli = state.placement.split('-'),
+        _state$placement$spli2 = (0, _slicedToArray2.default)(_state$placement$spli, 1),
+        basePlacement = _state$placement$spli2[0];
+      var placementOffset = (_state$modifiersData$2 = (_state$modifiersData = state.modifiersData) === null || _state$modifiersData === void 0 || (_state$modifiersData = _state$modifiersData.offset) === null || _state$modifiersData === void 0 ? void 0 : _state$modifiersData[state.placement]) !== null && _state$modifiersData$2 !== void 0 ? _state$modifiersData$2 : {
+        x: 0,
+        y: 0
+      };
+
+      // By default we set these to the entire viewport (minus padding)
+      // Each placement direction will overwrite one of these
+      var maxWidth = viewport.width - 2 * viewportPadding;
+      var maxHeight = viewport.height - 2 * viewportPadding;
+      if (basePlacement === 'top') {
+        maxHeight = state.rects.reference.y +
+        // Viewport-relative position of reference element
+        placementOffset.y -
+        // Space between popper and reference
+        viewportPadding;
+      }
+      if (basePlacement === 'bottom') {
+        maxHeight = viewport.height - popperOffsets.y -
+        // Viewport-relative position of popper
+        viewportPadding;
+      }
+      if (basePlacement === 'left') {
+        maxWidth = state.rects.reference.x +
+        // Viewport-relative position of reference element
+        placementOffset.x -
+        // Space between popper and reference
+        viewportPadding;
+      }
+      if (basePlacement === 'right') {
+        maxWidth = viewport.width - popperOffsets.x -
+        // Viewport-relative position of popper
+        viewportPadding;
+      }
+      state.styles.popper.maxWidth = "".concat(maxWidth, "px");
+      state.styles.popper.maxHeight = "".concat(maxHeight, "px");
+    }
+  }];
+}

package/dist/cjs/popper.js

@@ -16,25 +16,21 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactPopper = require("react-popper");
+var _maxSize = require("./max-size");
 var _core = require("@popperjs/core");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 // Export types from PopperJS / React Popper
 
+var viewportPadding = 5;
 var constantModifiers = [{
   name: 'flip',
   options: {
     flipVariations: false,
-    padding: 5,
+    padding: viewportPadding,
     boundary: 'clippingParents',
     rootBoundary: 'viewport'
   }
-}, {
-  name: 'preventOverflow',
-  options: {
-    padding: 5,
-    rootBoundary: 'document'
-  }
 }];
 function defaultChildrenFn() {
   return null;
@@ -51,20 +47,31 @@ function Popper(_ref) {
     referenceElement = _ref$referenceElement === void 0 ? undefined : _ref$referenceElement,
     modifiers = _ref.modifiers,
     _ref$strategy = _ref.strategy,
-    strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy;
+    strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy,
+    _ref$shouldFitViewpor = _ref.shouldFitViewport,
+    shouldFitViewport = _ref$shouldFitViewpor === void 0 ? false : _ref$shouldFitViewpor;
   var _offset = (0, _slicedToArray2.default)(offset, 2),
     offsetX = _offset[0],
     offsetY = _offset[1];
-  // Merge a new offset modifier only if new offset values passed in
   var internalModifiers = (0, _react.useMemo)(function () {
+    var preventOverflowModifier = {
+      name: 'preventOverflow',
+      options: {
+        padding: viewportPadding,
+        rootBoundary: shouldFitViewport ? 'viewport' : 'document'
+      }
+    };
     var offsetModifier = {
       name: 'offset',
       options: {
         offset: [offsetX, offsetY]
       }
     };
-    return [].concat(constantModifiers, [offsetModifier]);
-  }, [offsetX, offsetY]);
+    var maxSizeModifiers = shouldFitViewport ? (0, _maxSize.getMaxSizeModifiers)({
+      viewportPadding: viewportPadding
+    }) : [];
+    return [].concat(constantModifiers, [preventOverflowModifier, offsetModifier], (0, _toConsumableArray2.default)(maxSizeModifiers));
+  }, [offsetX, offsetY, shouldFitViewport]);
 
   // Merge custom props and memoize
   var mergedModifiers = (0, _react.useMemo)(function () {

package/dist/es2019/max-size.js

@@ -0,0 +1,90 @@
+export function getMaxSizeModifiers({
+  viewportPadding
+}) {
+  return [{
+    /**
+     * Performing DOM measurements in the 'read' phase,
+     * which is the convention for popper modifiers
+     */
+    name: 'maxSizeData',
+    enabled: true,
+    phase: 'read',
+    fn({
+      state,
+      name
+    }) {
+      if (!window.visualViewport) {
+        return;
+      }
+      state.modifiersData[name] = {
+        viewport: {
+          width: window.visualViewport.width,
+          height: window.visualViewport.height
+        }
+      };
+    }
+  }, {
+    /**
+     * Applying max size CSS
+     */
+    name: 'maxSize',
+    enabled: true,
+    phase: 'beforeWrite',
+    requiresIfExists: ['offset', 'preventOverflow', 'flip'],
+    fn({
+      state
+    }) {
+      var _data$viewport, _data$viewport2, _state$modifiersData$, _state$modifiersData, _state$modifiersData$2;
+      const data = state.modifiersData.maxSizeData;
+      if (typeof (data === null || data === void 0 ? void 0 : (_data$viewport = data.viewport) === null || _data$viewport === void 0 ? void 0 : _data$viewport.width) !== 'number' || typeof (data === null || data === void 0 ? void 0 : (_data$viewport2 = data.viewport) === null || _data$viewport2 === void 0 ? void 0 : _data$viewport2.height) !== 'number') {
+        // This shouldn't occur in a real browser but might in non-browser test environments
+        return;
+      }
+      const {
+        viewport
+      } = data;
+      const {
+        popperOffsets = {
+          x: 0,
+          y: 0
+        }
+      } = state.modifiersData;
+      const [basePlacement] = state.placement.split('-');
+      const placementOffset = (_state$modifiersData$ = (_state$modifiersData = state.modifiersData) === null || _state$modifiersData === void 0 ? void 0 : (_state$modifiersData$2 = _state$modifiersData.offset) === null || _state$modifiersData$2 === void 0 ? void 0 : _state$modifiersData$2[state.placement]) !== null && _state$modifiersData$ !== void 0 ? _state$modifiersData$ : {
+        x: 0,
+        y: 0
+      };
+
+      // By default we set these to the entire viewport (minus padding)
+      // Each placement direction will overwrite one of these
+      let maxWidth = viewport.width - 2 * viewportPadding;
+      let maxHeight = viewport.height - 2 * viewportPadding;
+      if (basePlacement === 'top') {
+        maxHeight = state.rects.reference.y +
+        // Viewport-relative position of reference element
+        placementOffset.y -
+        // Space between popper and reference
+        viewportPadding;
+      }
+      if (basePlacement === 'bottom') {
+        maxHeight = viewport.height - popperOffsets.y -
+        // Viewport-relative position of popper
+        viewportPadding;
+      }
+      if (basePlacement === 'left') {
+        maxWidth = state.rects.reference.x +
+        // Viewport-relative position of reference element
+        placementOffset.x -
+        // Space between popper and reference
+        viewportPadding;
+      }
+      if (basePlacement === 'right') {
+        maxWidth = viewport.width - popperOffsets.x -
+        // Viewport-relative position of popper
+        viewportPadding;
+      }
+      state.styles.popper.maxWidth = `${maxWidth}px`;
+      state.styles.popper.maxHeight = `${maxHeight}px`;
+    }
+  }];
+}

package/dist/es2019/popper.js

@@ -1,22 +1,18 @@
 import React, { useMemo } from 'react';
 import { Popper as ReactPopper } from 'react-popper';
+import { getMaxSizeModifiers } from './max-size';
 export { placements } from '@popperjs/core';
 // Export types from PopperJS / React Popper
 
+const viewportPadding = 5;
 const constantModifiers = [{
   name: 'flip',
   options: {
     flipVariations: false,
-    padding: 5,
+    padding: viewportPadding,
     boundary: 'clippingParents',
     rootBoundary: 'viewport'
   }
-}, {
-  name: 'preventOverflow',
-  options: {
-    padding: 5,
-    rootBoundary: 'document'
-  }
 }];
 function defaultChildrenFn() {
   return null;
@@ -28,19 +24,29 @@ export function Popper({
   placement = 'bottom-start',
   referenceElement = undefined,
   modifiers,
-  strategy = 'fixed'
+  strategy = 'fixed',
+  shouldFitViewport = false
 }) {
   const [offsetX, offsetY] = offset;
-  // Merge a new offset modifier only if new offset values passed in
   const internalModifiers = useMemo(() => {
+    const preventOverflowModifier = {
+      name: 'preventOverflow',
+      options: {
+        padding: viewportPadding,
+        rootBoundary: shouldFitViewport ? 'viewport' : 'document'
+      }
+    };
     const offsetModifier = {
       name: 'offset',
       options: {
         offset: [offsetX, offsetY]
       }
     };
-    return [...constantModifiers, offsetModifier];
-  }, [offsetX, offsetY]);
+    const maxSizeModifiers = shouldFitViewport ? getMaxSizeModifiers({
+      viewportPadding
+    }) : [];
+    return [...constantModifiers, preventOverflowModifier, offsetModifier, ...maxSizeModifiers];
+  }, [offsetX, offsetY, shouldFitViewport]);
 
   // Merge custom props and memoize
   const mergedModifiers = useMemo(() => {

package/dist/esm/max-size.js

@@ -0,0 +1,87 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+export function getMaxSizeModifiers(_ref) {
+  var viewportPadding = _ref.viewportPadding;
+  return [{
+    /**
+     * Performing DOM measurements in the 'read' phase,
+     * which is the convention for popper modifiers
+     */
+    name: 'maxSizeData',
+    enabled: true,
+    phase: 'read',
+    fn: function fn(_ref2) {
+      var state = _ref2.state,
+        name = _ref2.name;
+      if (!window.visualViewport) {
+        return;
+      }
+      state.modifiersData[name] = {
+        viewport: {
+          width: window.visualViewport.width,
+          height: window.visualViewport.height
+        }
+      };
+    }
+  }, {
+    /**
+     * Applying max size CSS
+     */
+    name: 'maxSize',
+    enabled: true,
+    phase: 'beforeWrite',
+    requiresIfExists: ['offset', 'preventOverflow', 'flip'],
+    fn: function fn(_ref3) {
+      var _data$viewport, _data$viewport2, _state$modifiersData$2, _state$modifiersData;
+      var state = _ref3.state;
+      var data = state.modifiersData.maxSizeData;
+      if (typeof (data === null || data === void 0 || (_data$viewport = data.viewport) === null || _data$viewport === void 0 ? void 0 : _data$viewport.width) !== 'number' || typeof (data === null || data === void 0 || (_data$viewport2 = data.viewport) === null || _data$viewport2 === void 0 ? void 0 : _data$viewport2.height) !== 'number') {
+        // This shouldn't occur in a real browser but might in non-browser test environments
+        return;
+      }
+      var viewport = data.viewport;
+      var _state$modifiersData$ = state.modifiersData.popperOffsets,
+        popperOffsets = _state$modifiersData$ === void 0 ? {
+          x: 0,
+          y: 0
+        } : _state$modifiersData$;
+      var _state$placement$spli = state.placement.split('-'),
+        _state$placement$spli2 = _slicedToArray(_state$placement$spli, 1),
+        basePlacement = _state$placement$spli2[0];
+      var placementOffset = (_state$modifiersData$2 = (_state$modifiersData = state.modifiersData) === null || _state$modifiersData === void 0 || (_state$modifiersData = _state$modifiersData.offset) === null || _state$modifiersData === void 0 ? void 0 : _state$modifiersData[state.placement]) !== null && _state$modifiersData$2 !== void 0 ? _state$modifiersData$2 : {
+        x: 0,
+        y: 0
+      };
+
+      // By default we set these to the entire viewport (minus padding)
+      // Each placement direction will overwrite one of these
+      var maxWidth = viewport.width - 2 * viewportPadding;
+      var maxHeight = viewport.height - 2 * viewportPadding;
+      if (basePlacement === 'top') {
+        maxHeight = state.rects.reference.y +
+        // Viewport-relative position of reference element
+        placementOffset.y -
+        // Space between popper and reference
+        viewportPadding;
+      }
+      if (basePlacement === 'bottom') {
+        maxHeight = viewport.height - popperOffsets.y -
+        // Viewport-relative position of popper
+        viewportPadding;
+      }
+      if (basePlacement === 'left') {
+        maxWidth = state.rects.reference.x +
+        // Viewport-relative position of reference element
+        placementOffset.x -
+        // Space between popper and reference
+        viewportPadding;
+      }
+      if (basePlacement === 'right') {
+        maxWidth = viewport.width - popperOffsets.x -
+        // Viewport-relative position of popper
+        viewportPadding;
+      }
+      state.styles.popper.maxWidth = "".concat(maxWidth, "px");
+      state.styles.popper.maxHeight = "".concat(maxHeight, "px");
+    }
+  }];
+}

package/dist/esm/popper.js

@@ -2,23 +2,19 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useMemo } from 'react';
 import { Popper as ReactPopper } from 'react-popper';
+import { getMaxSizeModifiers } from './max-size';
 export { placements } from '@popperjs/core';
 // Export types from PopperJS / React Popper
 
+var viewportPadding = 5;
 var constantModifiers = [{
   name: 'flip',
   options: {
     flipVariations: false,
-    padding: 5,
+    padding: viewportPadding,
     boundary: 'clippingParents',
     rootBoundary: 'viewport'
   }
-}, {
-  name: 'preventOverflow',
-  options: {
-    padding: 5,
-    rootBoundary: 'document'
-  }
 }];
 function defaultChildrenFn() {
   return null;
@@ -35,20 +31,31 @@ export function Popper(_ref) {
     referenceElement = _ref$referenceElement === void 0 ? undefined : _ref$referenceElement,
     modifiers = _ref.modifiers,
     _ref$strategy = _ref.strategy,
-    strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy;
+    strategy = _ref$strategy === void 0 ? 'fixed' : _ref$strategy,
+    _ref$shouldFitViewpor = _ref.shouldFitViewport,
+    shouldFitViewport = _ref$shouldFitViewpor === void 0 ? false : _ref$shouldFitViewpor;
   var _offset = _slicedToArray(offset, 2),
     offsetX = _offset[0],
     offsetY = _offset[1];
-  // Merge a new offset modifier only if new offset values passed in
   var internalModifiers = useMemo(function () {
+    var preventOverflowModifier = {
+      name: 'preventOverflow',
+      options: {
+        padding: viewportPadding,
+        rootBoundary: shouldFitViewport ? 'viewport' : 'document'
+      }
+    };
     var offsetModifier = {
       name: 'offset',
       options: {
         offset: [offsetX, offsetY]
       }
     };
-    return [].concat(constantModifiers, [offsetModifier]);
-  }, [offsetX, offsetY]);
+    var maxSizeModifiers = shouldFitViewport ? getMaxSizeModifiers({
+      viewportPadding: viewportPadding
+    }) : [];
+    return [].concat(constantModifiers, [preventOverflowModifier, offsetModifier], _toConsumableArray(maxSizeModifiers));
+  }, [offsetX, offsetY, shouldFitViewport]);
 
   // Merge custom props and memoize
   var mergedModifiers = useMemo(function () {

package/dist/types/max-size.d.ts

@@ -0,0 +1,21 @@
+export declare function getMaxSizeModifiers({ viewportPadding }: {
+    viewportPadding: number;
+}): [{
+    /**
+     * Performing DOM measurements in the 'read' phase,
+     * which is the convention for popper modifiers
+     */
+    readonly name: "maxSizeData";
+    readonly enabled: true;
+    readonly phase: "read";
+    readonly fn: ({ state, name }: import("@popperjs/core").ModifierArguments<any>) => void;
+}, {
+    /**
+     * Applying max size CSS
+     */
+    readonly name: "maxSize";
+    readonly enabled: true;
+    readonly phase: "beforeWrite";
+    readonly requiresIfExists: ["offset", "preventOverflow", "flip"];
+    readonly fn: ({ state }: import("@popperjs/core").ModifierArguments<any>) => void;
+}];

package/dist/types/popper.d.ts

@@ -32,5 +32,10 @@ export interface CustomPopperProps<Modifiers> {
      * Placement strategy used. Can be 'fixed' or 'absolute'
      */
     strategy?: PopperProps<Modifiers>['strategy'];
+    /**
+     * Determines if the popper will have a `max-width` and `max-height` set to
+     * constrain it to the viewport.
+     */
+    shouldFitViewport?: boolean;
 }
-export declare function Popper<CustomModifiers>({ children, offset, placement, referenceElement, modifiers, strategy, }: CustomPopperProps<CustomModifiers>): JSX.Element;
+export declare function Popper<CustomModifiers>({ children, offset, placement, referenceElement, modifiers, strategy, shouldFitViewport, }: CustomPopperProps<CustomModifiers>): JSX.Element;

package/dist/types-ts4.5/max-size.d.ts

@@ -0,0 +1,28 @@
+export declare function getMaxSizeModifiers({ viewportPadding }: {
+    viewportPadding: number;
+}): [
+    {
+        /**
+         * Performing DOM measurements in the 'read' phase,
+         * which is the convention for popper modifiers
+         */
+        readonly name: "maxSizeData";
+        readonly enabled: true;
+        readonly phase: "read";
+        readonly fn: ({ state, name }: import("@popperjs/core").ModifierArguments<any>) => void;
+    },
+    {
+        /**
+         * Applying max size CSS
+         */
+        readonly name: "maxSize";
+        readonly enabled: true;
+        readonly phase: "beforeWrite";
+        readonly requiresIfExists: [
+            "offset",
+            "preventOverflow",
+            "flip"
+        ];
+        readonly fn: ({ state }: import("@popperjs/core").ModifierArguments<any>) => void;
+    }
+];

package/dist/types-ts4.5/popper.d.ts

@@ -35,5 +35,10 @@ export interface CustomPopperProps<Modifiers> {
      * Placement strategy used. Can be 'fixed' or 'absolute'
      */
     strategy?: PopperProps<Modifiers>['strategy'];
+    /**
+     * Determines if the popper will have a `max-width` and `max-height` set to
+     * constrain it to the viewport.
+     */
+    shouldFitViewport?: boolean;
 }
-export declare function Popper<CustomModifiers>({ children, offset, placement, referenceElement, modifiers, strategy, }: CustomPopperProps<CustomModifiers>): JSX.Element;
+export declare function Popper<CustomModifiers>({ children, offset, placement, referenceElement, modifiers, strategy, shouldFitViewport, }: CustomPopperProps<CustomModifiers>): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/popper",
-	"version": "6.1.0",
+	"version": "6.3.0",
 	"description": "A wrapper for React Popper for situations which require a bespoke popup where other ADS components are deemed unsuitable",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -16,10 +16,6 @@
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"team": "Design System Team",
-		"productPushConsumption": [
-			"jira"
-		],
-		"releaseModel": "continuous",
 		"website": {
 			"name": "Popper",
 			"category": "Libraries"
@@ -32,12 +28,13 @@
 		"react-popper": "^2.3.0"
 	},
 	"peerDependencies": {
-		"react": "^16.8.0 || ^17.0.0 || ~18.2.0"
+		"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
+		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/ds-lib": "^2.3.0",
+		"@atlaskit/ds-lib": "^2.5.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@emotion/react": "^11.7.1",