@atlaskit/modal-dialog 12.15.7 → 12.17.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/modal-dialog
 
+## 12.17.0
+
+### Minor Changes
+
+- [#144047](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/144047)
+  [`de70c65e3e5ff`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/de70c65e3e5ff) -
+  The Chrome bug workaround shipped in `12.16.0` behind a feature flag is now turned on for everyone
+  and is no longer behind a feature flag.
+
+## 12.16.0
+
+### Minor Changes
+
+- [#141279](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/141279)
+  [`a38f3af4bfc79`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a38f3af4bfc79) -
+  [ux] Adding a workaround for a Chrome bug where drag and drop cannot occur in an element
+  positioned on top of an `<iframe>` on a different origin. The workaround is being added behind a
+  feature flag.
+
 ## 12.15.7
 
 ### Patch Changes

package/dist/cjs/internal/components/modal-dialog.js

@@ -17,12 +17,16 @@ var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-fo
 var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 var _layering = require("@atlaskit/layering");
 var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
+var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 var _tokens = require("@atlaskit/tokens");
 var _constants = require("../constants");
 var _context = require("../context");
 var _useOnMotionFinish3 = _interopRequireDefault(require("../hooks/use-on-motion-finish"));
+var _element = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element");
+var _external = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external");
+var _textSelection = require("../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection");
 var _utils = require("../utils");
 var _positioner = _interopRequireDefault(require("./positioner"));
 var _css;
@@ -88,6 +92,17 @@ var ModalDialog = function ModalDialog(props) {
     testId = props.testId;
   var id = (0, _reactUid.useId)();
   var titleId = "modal-dialog-title-".concat(id);
+  (0, _react.useEffect)(function () {
+    // Modal dialogs can appear on top of iframe elements that are on another domain.
+    // There is a Chrome bug where drag and drop in an element on top of a cross domain
+    // iframe is not working. We are applying the workaround for this bug in modal so
+    // that consumers of our modal don't have to worry about this bug and are free to
+    // create whatever drag and drop experience they like inside a modal
+    //
+    // Chrome bug: https://issues.chromium.org/issues/362301053
+
+    return (0, _combine.combine)((0, _element.disableDraggingToCrossOriginIFramesForElement)(), (0, _textSelection.disableDraggingToCrossOriginIFramesForTextSelection)(), (0, _external.disableDraggingToCrossOriginIFramesForExternal)());
+  }, []);
   (0, _useAutoFocus.default)((0, _typeof2.default)(autoFocus) === 'object' ? autoFocus : undefined,
   // When a user supplies  a ref to focus we enable this hook
   (0, _typeof2.default)(autoFocus) === 'object');

package/dist/cjs/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element.js

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.disableDraggingToCrossOriginIFramesForElement = disableDraggingToCrossOriginIFramesForElement;
+var _bindEventListener = require("bind-event-listener");
+var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
+var _makeFixForAdapter = require("./make-fix-for-adapter");
+function watchForInteractionEnd(_ref) {
+  var stop = _ref.stop;
+  var isDragging = false;
+  function stopIfNotDragging() {
+    if (isDragging) {
+      return;
+    }
+    stop();
+  }
+  var unbindEvents = (0, _bindEventListener.bindAll)(window, [{
+    // Another interaction is starting, this fix should be removed.
+    type: 'pointerdown',
+    listener: stop
+  }, {
+    // The user did not start a drag
+    type: 'pointerup',
+    listener: stopIfNotDragging
+  }, {
+    // if a "dragstart" occurs and the flag is not set,
+    // then a drag has not started.
+    // Note: could not use "pointercancel" as it is not
+    // published in Safari
+    // → https://bugs.webkit.org/show_bug.cgi?id=222632
+    type: 'dragstart',
+    listener: stopIfNotDragging,
+    // Need to come after the element adapter
+    options: {
+      capture: false
+    }
+  }], {
+    // Listening in the capture phase to increase resilience
+    // against events being stopped.
+    capture: true,
+    // Being super clear these should only run once
+    once: true
+  });
+  var unbindMonitor = (0, _adapter.monitorForElements)({
+    onGenerateDragPreview: function onGenerateDragPreview() {
+      isDragging = true;
+    },
+    onDrop: function onDrop() {
+      isDragging = false;
+      stop();
+    }
+  });
+  return (0, _combine.combine)(unbindEvents, unbindMonitor);
+}
+function watchForInteractionStart(_ref2) {
+  var start = _ref2.start;
+  return (0, _bindEventListener.bind)(window, {
+    // Note: Using "mousedown" rather than "pointerdown" due to a Safari bug.
+    // Safari not publish a "pointerdown" on the interaction after a drag
+    // → https://bugs.webkit.org/show_bug.cgi?id=279749
+    type: 'mousedown',
+    listener: function listener(event) {
+      // Only starting if pressing down inside a draggable element
+      // At this point, we are not sure which if:
+      // 1. a text selection drag is starting
+      // 2. a draggable managed by pdnd is going to be dragged
+      // 3. a draggable not managed by pdnd is going to be dragged
+      // 4. The user will be dragging anything at all (might be doing a click)
+      if (event.target instanceof HTMLElement && event.target.closest('[draggable="true"]')) {
+        start();
+      }
+    }
+  });
+}
+var api = (0, _makeFixForAdapter.makeFixForAdapter)({
+  watchForInteractionStart: watchForInteractionStart,
+  watchForInteractionEnd: watchForInteractionEnd
+});
+function disableDraggingToCrossOriginIFramesForElement() {
+  return api.registerUsage();
+}

package/dist/cjs/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.disableDraggingToCrossOriginIFramesForExternal = disableDraggingToCrossOriginIFramesForExternal;
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/external/adapter");
+var _makeFixForAdapter = require("./make-fix-for-adapter");
+function watchForInteractionStart(_ref) {
+  var start = _ref.start;
+  return (0, _adapter.monitorForExternal)({
+    onDragStart: function onDragStart() {
+      start();
+    }
+  });
+}
+function watchForInteractionEnd(_ref2) {
+  var stop = _ref2.stop;
+  return (0, _adapter.monitorForExternal)({
+    onDrop: function onDrop() {
+      stop();
+    }
+  });
+}
+var api = (0, _makeFixForAdapter.makeFixForAdapter)({
+  watchForInteractionStart: watchForInteractionStart,
+  watchForInteractionEnd: watchForInteractionEnd
+});
+function disableDraggingToCrossOriginIFramesForExternal() {
+  return api.registerUsage();
+}

package/dist/cjs/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/make-fix-for-adapter.js

@@ -0,0 +1,123 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.makeFixForAdapter = makeFixForAdapter;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
+/**
+ * Set a `style` property on a `HTMLElement`
+ *
+ * @returns a `cleanup` function to restore the `style` property to it's original state
+ */
+function setStyle(el, _ref) {
+  var property = _ref.property,
+    rule = _ref.rule,
+    _ref$priority = _ref.priority,
+    priority = _ref$priority === void 0 ? '' : _ref$priority;
+  var originalValue = el.style.getPropertyValue(property);
+  var originalPriority = el.style.getPropertyPriority(property);
+  el.style.setProperty(property, rule, priority);
+  return function cleanup() {
+    el.style.setProperty(property, originalValue, originalPriority);
+  };
+}
+function hasSameOrigin(href1, href2) {
+  var url1;
+  var url2;
+  try {
+    url1 = new URL(href1);
+    url2 = new URL(href2);
+  } catch (error) {
+    // failed to parse a href
+    return false;
+  }
+
+  // https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
+  return url1.protocol === url2.protocol && url1.host === url2.host && url1.port === url2.port;
+}
+function isIframeOnAnotherDomain(iframe) {
+  /**
+   * iframe with contents defined inline. Runs on the current origin.
+   * `<iframe srcdoc="<!doctype html><body>Hello</body>" />`
+   */
+  if (iframe.srcdoc) {
+    return false;
+  }
+
+  /**
+   * iframe with contents defined inline. Runs on the current origin.
+   * `<iframe src={`data:text/html;charset=utf-8,${encodeURI('<!doctype html><body>Hello</body>')}`} />`
+   */
+  if (iframe.src.startsWith('data:')) {
+    return false;
+  }
+  return !hasSameOrigin(window.location.href, iframe.src);
+}
+var registry = new Map();
+function applyFix(watchForEndOfInteraction) {
+  var iframes = Array.from(document.querySelectorAll('iframe')).filter(isIframeOnAnotherDomain);
+  var cleanups = iframes.map(function (iframe) {
+    var entry = registry.get(iframe);
+    if (!entry) {
+      entry = {
+        reset: setStyle(iframe, {
+          property: 'pointer-events',
+          rule: 'none',
+          priority: 'important'
+        }),
+        count: 1
+      };
+      registry.set(iframe, entry);
+    } else {
+      // pointer-events:none already applied to the iframe
+      // increment how many things requested the fix
+      entry.count++;
+    }
+    return function cleanup() {
+      entry.count--;
+      if (entry.count < 1) {
+        entry.reset();
+        registry.delete(iframe);
+      }
+    };
+  });
+  function stop() {
+    cleanupWatcher();
+    _combine.combine.apply(void 0, (0, _toConsumableArray2.default)(cleanups))();
+  }
+  var cleanupWatcher = watchForEndOfInteraction({
+    stop: stop
+  });
+}
+function makeFixForAdapter(_ref2) {
+  var watchForInteractionStart = _ref2.watchForInteractionStart,
+    watchForInteractionEnd = _ref2.watchForInteractionEnd;
+  var registrationCount = 0;
+  var stopWatchingInteractionStart = null;
+  function start() {
+    applyFix(watchForInteractionEnd);
+  }
+  function registerUsage() {
+    if (registrationCount === 0) {
+      stopWatchingInteractionStart = watchForInteractionStart({
+        start: start
+      });
+    }
+    registrationCount++;
+    return function unregisterUsage() {
+      var _stopWatchingInteract;
+      registrationCount--;
+      if (registrationCount !== 0) {
+        return;
+      }
+      (_stopWatchingInteract = stopWatchingInteractionStart) === null || _stopWatchingInteract === void 0 || _stopWatchingInteract();
+      stopWatchingInteractionStart = null;
+    };
+  }
+  return {
+    registerUsage: registerUsage
+  };
+}

package/dist/cjs/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection.js

@@ -0,0 +1,104 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.disableDraggingToCrossOriginIFramesForTextSelection = disableDraggingToCrossOriginIFramesForTextSelection;
+var _bindEventListener = require("bind-event-listener");
+var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
+var _adapter = require("@atlaskit/pragmatic-drag-and-drop/text-selection/adapter");
+var _makeFixForAdapter = require("./make-fix-for-adapter");
+function watchForInteractionEnd(_ref) {
+  var stop = _ref.stop;
+  var isDragging = false;
+  function stopIfNotDragging() {
+    if (isDragging) {
+      return;
+    }
+    stop();
+  }
+  var frameId = null;
+  var unbindEvents = (0, _bindEventListener.bindAll)(window, [{
+    // User is starting another interaction
+    type: 'pointerdown',
+    listener: stop
+  }, {
+    // User did not start a drag.
+    // "pointerdown" won't be fired if a drag started
+    type: 'pointerup',
+    listener: stopIfNotDragging
+  }, {
+    type: 'dragstart',
+    listener: function listener() {
+      /**
+       * The pdnd `onDragStart()` fires in the frame after "dragstart"
+       * So we are delaying our isDragging check to give a chance
+       * for `onDragStart()` to set the value correctly.
+       *
+       * Note: could not use "pointercancel" as it is not
+       * published in Safari → https://bugs.webkit.org/show_bug.cgi?id=222632
+       */
+      frameId = requestAnimationFrame(function () {
+        frameId = null;
+        stopIfNotDragging();
+      });
+    },
+    // need to schedule our frame after the text-selection
+    // adapter queues it's `onDragStart` frame.
+    options: {
+      capture: false
+    }
+  }], {
+    // Listening in the capture phase to increase resilience
+    // against events being stopped.
+    capture: true,
+    // being super clear these should only run once
+    once: true
+  });
+  var unbindMonitor = (0, _adapter.monitorForTextSelection)({
+    onDragStart: function onDragStart() {
+      isDragging = true;
+    },
+    onDrop: function onDrop() {
+      isDragging = false;
+      stop();
+    }
+  });
+  return (0, _combine.combine)(unbindEvents, unbindMonitor, function abortFrame() {
+    if (frameId != null) {
+      cancelAnimationFrame(frameId);
+    }
+  });
+}
+function watchForInteractionStart(_ref2) {
+  var start = _ref2.start;
+  return (0, _bindEventListener.bind)(window, {
+    // Note: Using "mousedown" rather than "pointerdown" due to a Safari bug.
+    // Safari not publish a "pointerdown" on the interaction after a drag
+    // → https://bugs.webkit.org/show_bug.cgi?id=279749
+    type: 'mousedown',
+    listener: function listener() {
+      // A text selection drag will only start when there is
+      // an active text selection.
+      var selection = window.getSelection();
+
+      // No selection object found
+      if (!selection) {
+        return;
+      }
+
+      // `isCollapsed` is "true" if there is currently no selected text
+      if (selection.isCollapsed) {
+        return;
+      }
+      start();
+    }
+  });
+}
+var api = (0, _makeFixForAdapter.makeFixForAdapter)({
+  watchForInteractionStart: watchForInteractionStart,
+  watchForInteractionEnd: watchForInteractionEnd
+});
+function disableDraggingToCrossOriginIFramesForTextSelection() {
+  return api.registerUsage();
+}

package/dist/cjs/modal-wrapper.js

@@ -102,7 +102,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.15.7"
+    packageVersion: "12.17.0"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/es2019/internal/components/modal-dialog.js

@@ -3,7 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useMemo } from 'react';
+
+import { useEffect, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { useId } from '@atlaskit/ds-lib/react-uid';
@@ -11,12 +12,16 @@ import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import FocusRing from '@atlaskit/focus-ring';
 import { UNSAFE_useLayering, useCloseOnEscapePress } from '@atlaskit/layering';
 import FadeIn from '@atlaskit/motion/fade-in';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { media } from '@atlaskit/primitives';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import { borderRadius, textColor } from '../constants';
 import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
+import { disableDraggingToCrossOriginIFramesForElement } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element';
+import { disableDraggingToCrossOriginIFramesForExternal } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external';
+import { disableDraggingToCrossOriginIFramesForTextSelection } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection';
 import { dialogHeight, dialogWidth } from '../utils';
 import Positioner from './positioner';
 const dialogStyles = css({
@@ -89,6 +94,17 @@ const ModalDialog = props => {
   } = props;
   const id = useId();
   const titleId = `modal-dialog-title-${id}`;
+  useEffect(() => {
+    // Modal dialogs can appear on top of iframe elements that are on another domain.
+    // There is a Chrome bug where drag and drop in an element on top of a cross domain
+    // iframe is not working. We are applying the workaround for this bug in modal so
+    // that consumers of our modal don't have to worry about this bug and are free to
+    // create whatever drag and drop experience they like inside a modal
+    //
+    // Chrome bug: https://issues.chromium.org/issues/362301053
+
+    return combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal());
+  }, []);
   useAutoFocus(typeof autoFocus === 'object' ? autoFocus : undefined,
   // When a user supplies  a ref to focus we enable this hook
   typeof autoFocus === 'object');

package/dist/es2019/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element.js

@@ -0,0 +1,80 @@
+import { bind, bindAll } from 'bind-event-listener';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { makeFixForAdapter } from './make-fix-for-adapter';
+function watchForInteractionEnd({
+  stop
+}) {
+  let isDragging = false;
+  function stopIfNotDragging() {
+    if (isDragging) {
+      return;
+    }
+    stop();
+  }
+  const unbindEvents = bindAll(window, [{
+    // Another interaction is starting, this fix should be removed.
+    type: 'pointerdown',
+    listener: stop
+  }, {
+    // The user did not start a drag
+    type: 'pointerup',
+    listener: stopIfNotDragging
+  }, {
+    // if a "dragstart" occurs and the flag is not set,
+    // then a drag has not started.
+    // Note: could not use "pointercancel" as it is not
+    // published in Safari
+    // → https://bugs.webkit.org/show_bug.cgi?id=222632
+    type: 'dragstart',
+    listener: stopIfNotDragging,
+    // Need to come after the element adapter
+    options: {
+      capture: false
+    }
+  }], {
+    // Listening in the capture phase to increase resilience
+    // against events being stopped.
+    capture: true,
+    // Being super clear these should only run once
+    once: true
+  });
+  const unbindMonitor = monitorForElements({
+    onGenerateDragPreview() {
+      isDragging = true;
+    },
+    onDrop() {
+      isDragging = false;
+      stop();
+    }
+  });
+  return combine(unbindEvents, unbindMonitor);
+}
+function watchForInteractionStart({
+  start
+}) {
+  return bind(window, {
+    // Note: Using "mousedown" rather than "pointerdown" due to a Safari bug.
+    // Safari not publish a "pointerdown" on the interaction after a drag
+    // → https://bugs.webkit.org/show_bug.cgi?id=279749
+    type: 'mousedown',
+    listener(event) {
+      // Only starting if pressing down inside a draggable element
+      // At this point, we are not sure which if:
+      // 1. a text selection drag is starting
+      // 2. a draggable managed by pdnd is going to be dragged
+      // 3. a draggable not managed by pdnd is going to be dragged
+      // 4. The user will be dragging anything at all (might be doing a click)
+      if (event.target instanceof HTMLElement && event.target.closest('[draggable="true"]')) {
+        start();
+      }
+    }
+  });
+}
+const api = makeFixForAdapter({
+  watchForInteractionStart,
+  watchForInteractionEnd
+});
+export function disableDraggingToCrossOriginIFramesForElement() {
+  return api.registerUsage();
+}

package/dist/es2019/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external.js

@@ -0,0 +1,27 @@
+import { monitorForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
+import { makeFixForAdapter } from './make-fix-for-adapter';
+function watchForInteractionStart({
+  start
+}) {
+  return monitorForExternal({
+    onDragStart() {
+      start();
+    }
+  });
+}
+function watchForInteractionEnd({
+  stop
+}) {
+  return monitorForExternal({
+    onDrop() {
+      stop();
+    }
+  });
+}
+const api = makeFixForAdapter({
+  watchForInteractionStart,
+  watchForInteractionEnd
+});
+export function disableDraggingToCrossOriginIFramesForExternal() {
+  return api.registerUsage();
+}

package/dist/es2019/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/make-fix-for-adapter.js

@@ -0,0 +1,116 @@
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+/**
+ * Set a `style` property on a `HTMLElement`
+ *
+ * @returns a `cleanup` function to restore the `style` property to it's original state
+ */
+function setStyle(el, {
+  property,
+  rule,
+  priority = ''
+}) {
+  const originalValue = el.style.getPropertyValue(property);
+  const originalPriority = el.style.getPropertyPriority(property);
+  el.style.setProperty(property, rule, priority);
+  return function cleanup() {
+    el.style.setProperty(property, originalValue, originalPriority);
+  };
+}
+function hasSameOrigin(href1, href2) {
+  let url1;
+  let url2;
+  try {
+    url1 = new URL(href1);
+    url2 = new URL(href2);
+  } catch (error) {
+    // failed to parse a href
+    return false;
+  }
+
+  // https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
+  return url1.protocol === url2.protocol && url1.host === url2.host && url1.port === url2.port;
+}
+function isIframeOnAnotherDomain(iframe) {
+  /**
+   * iframe with contents defined inline. Runs on the current origin.
+   * `<iframe srcdoc="<!doctype html><body>Hello</body>" />`
+   */
+  if (iframe.srcdoc) {
+    return false;
+  }
+
+  /**
+   * iframe with contents defined inline. Runs on the current origin.
+   * `<iframe src={`data:text/html;charset=utf-8,${encodeURI('<!doctype html><body>Hello</body>')}`} />`
+   */
+  if (iframe.src.startsWith('data:')) {
+    return false;
+  }
+  return !hasSameOrigin(window.location.href, iframe.src);
+}
+const registry = new Map();
+function applyFix(watchForEndOfInteraction) {
+  const iframes = Array.from(document.querySelectorAll('iframe')).filter(isIframeOnAnotherDomain);
+  const cleanups = iframes.map(iframe => {
+    let entry = registry.get(iframe);
+    if (!entry) {
+      entry = {
+        reset: setStyle(iframe, {
+          property: 'pointer-events',
+          rule: 'none',
+          priority: 'important'
+        }),
+        count: 1
+      };
+      registry.set(iframe, entry);
+    } else {
+      // pointer-events:none already applied to the iframe
+      // increment how many things requested the fix
+      entry.count++;
+    }
+    return function cleanup() {
+      entry.count--;
+      if (entry.count < 1) {
+        entry.reset();
+        registry.delete(iframe);
+      }
+    };
+  });
+  function stop() {
+    cleanupWatcher();
+    combine(...cleanups)();
+  }
+  const cleanupWatcher = watchForEndOfInteraction({
+    stop
+  });
+}
+export function makeFixForAdapter({
+  watchForInteractionStart,
+  watchForInteractionEnd
+}) {
+  let registrationCount = 0;
+  let stopWatchingInteractionStart = null;
+  function start() {
+    applyFix(watchForInteractionEnd);
+  }
+  function registerUsage() {
+    if (registrationCount === 0) {
+      stopWatchingInteractionStart = watchForInteractionStart({
+        start
+      });
+    }
+    registrationCount++;
+    return function unregisterUsage() {
+      var _stopWatchingInteract;
+      registrationCount--;
+      if (registrationCount !== 0) {
+        return;
+      }
+      (_stopWatchingInteract = stopWatchingInteractionStart) === null || _stopWatchingInteract === void 0 ? void 0 : _stopWatchingInteract();
+      stopWatchingInteractionStart = null;
+    };
+  }
+  return {
+    registerUsage
+  };
+}

package/dist/es2019/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection.js

@@ -0,0 +1,100 @@
+import { bind, bindAll } from 'bind-event-listener';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { monitorForTextSelection } from '@atlaskit/pragmatic-drag-and-drop/text-selection/adapter';
+import { makeFixForAdapter } from './make-fix-for-adapter';
+function watchForInteractionEnd({
+  stop
+}) {
+  let isDragging = false;
+  function stopIfNotDragging() {
+    if (isDragging) {
+      return;
+    }
+    stop();
+  }
+  let frameId = null;
+  const unbindEvents = bindAll(window, [{
+    // User is starting another interaction
+    type: 'pointerdown',
+    listener: stop
+  }, {
+    // User did not start a drag.
+    // "pointerdown" won't be fired if a drag started
+    type: 'pointerup',
+    listener: stopIfNotDragging
+  }, {
+    type: 'dragstart',
+    listener() {
+      /**
+       * The pdnd `onDragStart()` fires in the frame after "dragstart"
+       * So we are delaying our isDragging check to give a chance
+       * for `onDragStart()` to set the value correctly.
+       *
+       * Note: could not use "pointercancel" as it is not
+       * published in Safari → https://bugs.webkit.org/show_bug.cgi?id=222632
+       */
+      frameId = requestAnimationFrame(() => {
+        frameId = null;
+        stopIfNotDragging();
+      });
+    },
+    // need to schedule our frame after the text-selection
+    // adapter queues it's `onDragStart` frame.
+    options: {
+      capture: false
+    }
+  }], {
+    // Listening in the capture phase to increase resilience
+    // against events being stopped.
+    capture: true,
+    // being super clear these should only run once
+    once: true
+  });
+  const unbindMonitor = monitorForTextSelection({
+    onDragStart() {
+      isDragging = true;
+    },
+    onDrop() {
+      isDragging = false;
+      stop();
+    }
+  });
+  return combine(unbindEvents, unbindMonitor, function abortFrame() {
+    if (frameId != null) {
+      cancelAnimationFrame(frameId);
+    }
+  });
+}
+function watchForInteractionStart({
+  start
+}) {
+  return bind(window, {
+    // Note: Using "mousedown" rather than "pointerdown" due to a Safari bug.
+    // Safari not publish a "pointerdown" on the interaction after a drag
+    // → https://bugs.webkit.org/show_bug.cgi?id=279749
+    type: 'mousedown',
+    listener() {
+      // A text selection drag will only start when there is
+      // an active text selection.
+      const selection = window.getSelection();
+
+      // No selection object found
+      if (!selection) {
+        return;
+      }
+
+      // `isCollapsed` is "true" if there is currently no selected text
+      if (selection.isCollapsed) {
+        return;
+      }
+      start();
+    }
+  });
+}
+const api = makeFixForAdapter({
+  watchForInteractionStart,
+  watchForInteractionEnd
+});
+export function disableDraggingToCrossOriginIFramesForTextSelection() {
+  return api.registerUsage();
+}

package/dist/es2019/modal-wrapper.js

@@ -87,7 +87,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.15.7"
+    packageVersion: "12.17.0"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/internal/components/modal-dialog.js

@@ -7,7 +7,8 @@ var _css;
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { useMemo } from 'react';
+
+import { useEffect, useMemo } from 'react';
 import { css, jsx } from '@emotion/react';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { useId } from '@atlaskit/ds-lib/react-uid';
@@ -15,12 +16,16 @@ import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
 import FocusRing from '@atlaskit/focus-ring';
 import { UNSAFE_useLayering, useCloseOnEscapePress } from '@atlaskit/layering';
 import FadeIn from '@atlaskit/motion/fade-in';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { media } from '@atlaskit/primitives';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import { CURRENT_SURFACE_CSS_VAR } from '@atlaskit/tokens';
 import { borderRadius, textColor } from '../constants';
 import { ModalContext, ScrollContext } from '../context';
 import useOnMotionFinish from '../hooks/use-on-motion-finish';
+import { disableDraggingToCrossOriginIFramesForElement } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element';
+import { disableDraggingToCrossOriginIFramesForExternal } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external';
+import { disableDraggingToCrossOriginIFramesForTextSelection } from '../pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection';
 import { dialogHeight, dialogWidth } from '../utils';
 import Positioner from './positioner';
 var dialogStyles = css((_css = {
@@ -81,6 +86,17 @@ var ModalDialog = function ModalDialog(props) {
     testId = props.testId;
   var id = useId();
   var titleId = "modal-dialog-title-".concat(id);
+  useEffect(function () {
+    // Modal dialogs can appear on top of iframe elements that are on another domain.
+    // There is a Chrome bug where drag and drop in an element on top of a cross domain
+    // iframe is not working. We are applying the workaround for this bug in modal so
+    // that consumers of our modal don't have to worry about this bug and are free to
+    // create whatever drag and drop experience they like inside a modal
+    //
+    // Chrome bug: https://issues.chromium.org/issues/362301053
+
+    return combine(disableDraggingToCrossOriginIFramesForElement(), disableDraggingToCrossOriginIFramesForTextSelection(), disableDraggingToCrossOriginIFramesForExternal());
+  }, []);
   useAutoFocus(_typeof(autoFocus) === 'object' ? autoFocus : undefined,
   // When a user supplies  a ref to focus we enable this hook
   _typeof(autoFocus) === 'object');

package/dist/esm/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element.js

@@ -0,0 +1,78 @@
+import { bind, bindAll } from 'bind-event-listener';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { makeFixForAdapter } from './make-fix-for-adapter';
+function watchForInteractionEnd(_ref) {
+  var stop = _ref.stop;
+  var isDragging = false;
+  function stopIfNotDragging() {
+    if (isDragging) {
+      return;
+    }
+    stop();
+  }
+  var unbindEvents = bindAll(window, [{
+    // Another interaction is starting, this fix should be removed.
+    type: 'pointerdown',
+    listener: stop
+  }, {
+    // The user did not start a drag
+    type: 'pointerup',
+    listener: stopIfNotDragging
+  }, {
+    // if a "dragstart" occurs and the flag is not set,
+    // then a drag has not started.
+    // Note: could not use "pointercancel" as it is not
+    // published in Safari
+    // → https://bugs.webkit.org/show_bug.cgi?id=222632
+    type: 'dragstart',
+    listener: stopIfNotDragging,
+    // Need to come after the element adapter
+    options: {
+      capture: false
+    }
+  }], {
+    // Listening in the capture phase to increase resilience
+    // against events being stopped.
+    capture: true,
+    // Being super clear these should only run once
+    once: true
+  });
+  var unbindMonitor = monitorForElements({
+    onGenerateDragPreview: function onGenerateDragPreview() {
+      isDragging = true;
+    },
+    onDrop: function onDrop() {
+      isDragging = false;
+      stop();
+    }
+  });
+  return combine(unbindEvents, unbindMonitor);
+}
+function watchForInteractionStart(_ref2) {
+  var start = _ref2.start;
+  return bind(window, {
+    // Note: Using "mousedown" rather than "pointerdown" due to a Safari bug.
+    // Safari not publish a "pointerdown" on the interaction after a drag
+    // → https://bugs.webkit.org/show_bug.cgi?id=279749
+    type: 'mousedown',
+    listener: function listener(event) {
+      // Only starting if pressing down inside a draggable element
+      // At this point, we are not sure which if:
+      // 1. a text selection drag is starting
+      // 2. a draggable managed by pdnd is going to be dragged
+      // 3. a draggable not managed by pdnd is going to be dragged
+      // 4. The user will be dragging anything at all (might be doing a click)
+      if (event.target instanceof HTMLElement && event.target.closest('[draggable="true"]')) {
+        start();
+      }
+    }
+  });
+}
+var api = makeFixForAdapter({
+  watchForInteractionStart: watchForInteractionStart,
+  watchForInteractionEnd: watchForInteractionEnd
+});
+export function disableDraggingToCrossOriginIFramesForElement() {
+  return api.registerUsage();
+}

package/dist/esm/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external.js

@@ -0,0 +1,25 @@
+import { monitorForExternal } from '@atlaskit/pragmatic-drag-and-drop/external/adapter';
+import { makeFixForAdapter } from './make-fix-for-adapter';
+function watchForInteractionStart(_ref) {
+  var start = _ref.start;
+  return monitorForExternal({
+    onDragStart: function onDragStart() {
+      start();
+    }
+  });
+}
+function watchForInteractionEnd(_ref2) {
+  var stop = _ref2.stop;
+  return monitorForExternal({
+    onDrop: function onDrop() {
+      stop();
+    }
+  });
+}
+var api = makeFixForAdapter({
+  watchForInteractionStart: watchForInteractionStart,
+  watchForInteractionEnd: watchForInteractionEnd
+});
+export function disableDraggingToCrossOriginIFramesForExternal() {
+  return api.registerUsage();
+}

package/dist/esm/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/make-fix-for-adapter.js

@@ -0,0 +1,116 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+/**
+ * Set a `style` property on a `HTMLElement`
+ *
+ * @returns a `cleanup` function to restore the `style` property to it's original state
+ */
+function setStyle(el, _ref) {
+  var property = _ref.property,
+    rule = _ref.rule,
+    _ref$priority = _ref.priority,
+    priority = _ref$priority === void 0 ? '' : _ref$priority;
+  var originalValue = el.style.getPropertyValue(property);
+  var originalPriority = el.style.getPropertyPriority(property);
+  el.style.setProperty(property, rule, priority);
+  return function cleanup() {
+    el.style.setProperty(property, originalValue, originalPriority);
+  };
+}
+function hasSameOrigin(href1, href2) {
+  var url1;
+  var url2;
+  try {
+    url1 = new URL(href1);
+    url2 = new URL(href2);
+  } catch (error) {
+    // failed to parse a href
+    return false;
+  }
+
+  // https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy
+  return url1.protocol === url2.protocol && url1.host === url2.host && url1.port === url2.port;
+}
+function isIframeOnAnotherDomain(iframe) {
+  /**
+   * iframe with contents defined inline. Runs on the current origin.
+   * `<iframe srcdoc="<!doctype html><body>Hello</body>" />`
+   */
+  if (iframe.srcdoc) {
+    return false;
+  }
+
+  /**
+   * iframe with contents defined inline. Runs on the current origin.
+   * `<iframe src={`data:text/html;charset=utf-8,${encodeURI('<!doctype html><body>Hello</body>')}`} />`
+   */
+  if (iframe.src.startsWith('data:')) {
+    return false;
+  }
+  return !hasSameOrigin(window.location.href, iframe.src);
+}
+var registry = new Map();
+function applyFix(watchForEndOfInteraction) {
+  var iframes = Array.from(document.querySelectorAll('iframe')).filter(isIframeOnAnotherDomain);
+  var cleanups = iframes.map(function (iframe) {
+    var entry = registry.get(iframe);
+    if (!entry) {
+      entry = {
+        reset: setStyle(iframe, {
+          property: 'pointer-events',
+          rule: 'none',
+          priority: 'important'
+        }),
+        count: 1
+      };
+      registry.set(iframe, entry);
+    } else {
+      // pointer-events:none already applied to the iframe
+      // increment how many things requested the fix
+      entry.count++;
+    }
+    return function cleanup() {
+      entry.count--;
+      if (entry.count < 1) {
+        entry.reset();
+        registry.delete(iframe);
+      }
+    };
+  });
+  function stop() {
+    cleanupWatcher();
+    combine.apply(void 0, _toConsumableArray(cleanups))();
+  }
+  var cleanupWatcher = watchForEndOfInteraction({
+    stop: stop
+  });
+}
+export function makeFixForAdapter(_ref2) {
+  var watchForInteractionStart = _ref2.watchForInteractionStart,
+    watchForInteractionEnd = _ref2.watchForInteractionEnd;
+  var registrationCount = 0;
+  var stopWatchingInteractionStart = null;
+  function start() {
+    applyFix(watchForInteractionEnd);
+  }
+  function registerUsage() {
+    if (registrationCount === 0) {
+      stopWatchingInteractionStart = watchForInteractionStart({
+        start: start
+      });
+    }
+    registrationCount++;
+    return function unregisterUsage() {
+      var _stopWatchingInteract;
+      registrationCount--;
+      if (registrationCount !== 0) {
+        return;
+      }
+      (_stopWatchingInteract = stopWatchingInteractionStart) === null || _stopWatchingInteract === void 0 || _stopWatchingInteract();
+      stopWatchingInteractionStart = null;
+    };
+  }
+  return {
+    registerUsage: registerUsage
+  };
+}

package/dist/esm/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection.js

@@ -0,0 +1,98 @@
+import { bind, bindAll } from 'bind-event-listener';
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
+import { monitorForTextSelection } from '@atlaskit/pragmatic-drag-and-drop/text-selection/adapter';
+import { makeFixForAdapter } from './make-fix-for-adapter';
+function watchForInteractionEnd(_ref) {
+  var stop = _ref.stop;
+  var isDragging = false;
+  function stopIfNotDragging() {
+    if (isDragging) {
+      return;
+    }
+    stop();
+  }
+  var frameId = null;
+  var unbindEvents = bindAll(window, [{
+    // User is starting another interaction
+    type: 'pointerdown',
+    listener: stop
+  }, {
+    // User did not start a drag.
+    // "pointerdown" won't be fired if a drag started
+    type: 'pointerup',
+    listener: stopIfNotDragging
+  }, {
+    type: 'dragstart',
+    listener: function listener() {
+      /**
+       * The pdnd `onDragStart()` fires in the frame after "dragstart"
+       * So we are delaying our isDragging check to give a chance
+       * for `onDragStart()` to set the value correctly.
+       *
+       * Note: could not use "pointercancel" as it is not
+       * published in Safari → https://bugs.webkit.org/show_bug.cgi?id=222632
+       */
+      frameId = requestAnimationFrame(function () {
+        frameId = null;
+        stopIfNotDragging();
+      });
+    },
+    // need to schedule our frame after the text-selection
+    // adapter queues it's `onDragStart` frame.
+    options: {
+      capture: false
+    }
+  }], {
+    // Listening in the capture phase to increase resilience
+    // against events being stopped.
+    capture: true,
+    // being super clear these should only run once
+    once: true
+  });
+  var unbindMonitor = monitorForTextSelection({
+    onDragStart: function onDragStart() {
+      isDragging = true;
+    },
+    onDrop: function onDrop() {
+      isDragging = false;
+      stop();
+    }
+  });
+  return combine(unbindEvents, unbindMonitor, function abortFrame() {
+    if (frameId != null) {
+      cancelAnimationFrame(frameId);
+    }
+  });
+}
+function watchForInteractionStart(_ref2) {
+  var start = _ref2.start;
+  return bind(window, {
+    // Note: Using "mousedown" rather than "pointerdown" due to a Safari bug.
+    // Safari not publish a "pointerdown" on the interaction after a drag
+    // → https://bugs.webkit.org/show_bug.cgi?id=279749
+    type: 'mousedown',
+    listener: function listener() {
+      // A text selection drag will only start when there is
+      // an active text selection.
+      var selection = window.getSelection();
+
+      // No selection object found
+      if (!selection) {
+        return;
+      }
+
+      // `isCollapsed` is "true" if there is currently no selected text
+      if (selection.isCollapsed) {
+        return;
+      }
+      start();
+    }
+  });
+}
+var api = makeFixForAdapter({
+  watchForInteractionStart: watchForInteractionStart,
+  watchForInteractionEnd: watchForInteractionEnd
+});
+export function disableDraggingToCrossOriginIFramesForTextSelection() {
+  return api.registerUsage();
+}

package/dist/esm/modal-wrapper.js

@@ -92,7 +92,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.15.7"
+    packageVersion: "12.17.0"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/types/internal/components/modal-dialog.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 import type { KeyboardOrMouseEvent, ModalDialogProps } from '../../types';
 declare const ModalDialog: (props: ModalDialogProps & {

package/dist/types/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element.d.ts

@@ -0,0 +1,2 @@
+import { type CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+export declare function disableDraggingToCrossOriginIFramesForElement(): CleanupFn;

package/dist/types/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external.d.ts

@@ -0,0 +1,2 @@
+import { type CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+export declare function disableDraggingToCrossOriginIFramesForExternal(): CleanupFn;

package/dist/types/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/make-fix-for-adapter.d.ts

@@ -0,0 +1,11 @@
+import { type CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+export declare function makeFixForAdapter({ watchForInteractionStart, watchForInteractionEnd, }: {
+    watchForInteractionStart: ({ start }: {
+        start: () => void;
+    }) => CleanupFn;
+    watchForInteractionEnd: ({ stop }: {
+        stop: () => void;
+    }) => CleanupFn;
+}): {
+    registerUsage: () => CleanupFn;
+};

package/dist/types/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection.d.ts

@@ -0,0 +1,2 @@
+import { type CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+export declare function disableDraggingToCrossOriginIFramesForTextSelection(): CleanupFn;

package/dist/types-ts4.5/internal/components/modal-dialog.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
 import { jsx } from '@emotion/react';
 import type { KeyboardOrMouseEvent, ModalDialogProps } from '../../types';
 declare const ModalDialog: (props: ModalDialogProps & {

package/dist/types-ts4.5/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/element.d.ts

@@ -0,0 +1,2 @@
+import { type CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+export declare function disableDraggingToCrossOriginIFramesForElement(): CleanupFn;

package/dist/types-ts4.5/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/external.d.ts

@@ -0,0 +1,2 @@
+import { type CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+export declare function disableDraggingToCrossOriginIFramesForExternal(): CleanupFn;

package/dist/types-ts4.5/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/make-fix-for-adapter.d.ts

@@ -0,0 +1,11 @@
+import { type CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+export declare function makeFixForAdapter({ watchForInteractionStart, watchForInteractionEnd, }: {
+    watchForInteractionStart: ({ start }: {
+        start: () => void;
+    }) => CleanupFn;
+    watchForInteractionEnd: ({ stop }: {
+        stop: () => void;
+    }) => CleanupFn;
+}): {
+    registerUsage: () => CleanupFn;
+};

package/dist/types-ts4.5/internal/pragmatic-drag-and-drop/disable-dragging-to-cross-origin-iframes/text-selection.d.ts

@@ -0,0 +1,2 @@
+import { type CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+export declare function disableDraggingToCrossOriginIFramesForTextSelection(): CleanupFn;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.15.7",
+	"version": "12.17.0",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,16 +29,17 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/blanket": "^13.3.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/ds-lib": "^2.5.0",
+		"@atlaskit/ds-lib": "^2.6.0",
 		"@atlaskit/focus-ring": "^1.6.0",
-		"@atlaskit/icon": "^22.17.0",
+		"@atlaskit/icon": "^22.18.0",
 		"@atlaskit/layering": "^0.4.0",
 		"@atlaskit/motion": "^1.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/portal": "^4.9.0",
-		"@atlaskit/primitives": "^12.1.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
+		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^13.0.0",
-		"@atlaskit/tokens": "^1.59.0",
+		"@atlaskit/tokens": "^1.61.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -57,9 +58,9 @@
 		"@atlaskit/button": "*",
 		"@atlaskit/checkbox": "^14.0.0",
 		"@atlaskit/dropdown-menu": "^12.18.0",
-		"@atlaskit/popup": "^1.25.0",
+		"@atlaskit/popup": "^1.27.0",
 		"@atlaskit/radio": "^6.5.0",
-		"@atlaskit/select": "^17.17.0",
+		"@atlaskit/select": "^17.19.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/tooltip": "^18.7.0",
@@ -74,6 +75,7 @@
 		"react-dom": "^16.8.0",
 		"react-lorem-component": "^0.13.0",
 		"storybook-addon-performance": "^0.16.0",
+		"tiny-invariant": "^1.2.0",
 		"typescript": "~5.4.2",
 		"wait-for-expect": "^1.2.0"
 	},