@atlaskit/side-nav-items 1.13.3 → 1.13.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/side-nav-items
 
+## 1.13.4
+
+### Patch Changes
+
+- [`c8202594b3c09`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c8202594b3c09) -
+  Preparing to deprecate LazyDragHandle in favour of inline this code, to avoid React hydration
+  complications
+
 ## 1.13.3
 
 ### Patch Changes

package/dist/cjs/entry-points/drag-and-drop/drag-handle.js

@@ -3,10 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "DragHandle", {
+  enumerable: true,
+  get: function get() {
+    return _dragHandleNew.DragHandleNew;
+  }
+});
 Object.defineProperty(exports, "LazyDragHandle", {
   enumerable: true,
   get: function get() {
     return _lazyDragHandle.LazyDragHandle;
   }
 });
-var _lazyDragHandle = require("../../ui/menu-item/drag-handle/lazy-drag-handle");
+var _lazyDragHandle = require("../../ui/menu-item/drag-handle/lazy-drag-handle");
+var _dragHandleNew = require("../../ui/menu-item/drag-handle/drag-handle-new");

package/dist/cjs/ui/menu-item/drag-handle/drag-handle-new.compiled.css

@@ -0,0 +1,9 @@
+._152tidpf{inset-block-start:0}
+._1bah1h6o{justify-content:center}
+._1e02idpf{inset-inline-start:0}
+._1e0c1i3c{display:var(--drag-handle-display,none)}
+._2lx21bp4{flex-direction:column}
+._ahbqxmi2{margin-inline-start:var(--ds-space-negative-150,-9pt)}
+._kqswstnw{position:absolute}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._u7coidpf{inset-block-end:0}

package/dist/cjs/ui/menu-item/drag-handle/drag-handle-new.js

@@ -0,0 +1,28 @@
+/* drag-handle-new.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DragHandleNew = DragHandleNew;
+require("./drag-handle-new.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _dragHandleVertical = _interopRequireDefault(require("@atlaskit/icon/core/drag-handle-vertical"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  root: "_syazazsu _1e0c1i3c _2lx21bp4 _1bah1h6o _kqswstnw _152tidpf _u7coidpf _1e02idpf _ahbqxmi2"
+};
+
+// Remove the "default" when "navx-4718-inline-drag-handle" is cleaned up
+function DragHandleNew() {
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    className: (0, _runtime.ax)([styles.root])
+  }, /*#__PURE__*/React.createElement(_dragHandleVertical.default, {
+    label: "",
+    size: "small"
+  }));
+}

package/dist/cjs/ui/menu-item/drag-handle/drag-handle.js

@@ -6,7 +6,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = DragHandle;
+exports.default = exports.DragHandle = DragHandle;
 require("./drag-handle.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
@@ -17,6 +17,8 @@ var styles = {
 };
 
 // Using default export to play well with React.lazy
+
+// Remove the "default" when "navx-4718-inline-drag-handle" is cleaned up
 function DragHandle() {
   return /*#__PURE__*/React.createElement("div", {
     "aria-hidden": "true",

package/dist/cjs/ui/menu-item/drag-handle/lazy-drag-handle.js

@@ -9,10 +9,11 @@ exports.LazyDragHandle = LazyDragHandle;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+// Remove LazyDragHandle when "navx-4718-inline-drag-handle" is cleaned up.
 /**
  * A wrapper around `React.lazy` that defers rendering until after the component has mounted.
  *
- * This avoids hydration errors because:
+ * We think this avoids hydration errors because:
  * - On the server: `Component` is `null`, so nothing is rendered.
  * - On the first client render (hydration): `Component` is still `null`, matching the server HTML.
  * - After mount: `useEffect` fires, sets the lazy component, and triggers a re-render
@@ -24,6 +25,9 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
  *
  * By deferring to after mount, both server and initial client render agree on `null`,
  * and the lazy import + Suspense only kicks in after hydration is complete.
+ *
+ * @private
+ * @deprecated - use DragHandle instead.
  */
 function LazyDragHandle() {
   var _useState = (0, _react.useState)(null),

package/dist/cjs/ui/menu-item/menu-item.js

@@ -17,9 +17,11 @@ var _avatar = require("@atlaskit/avatar");
 var _forwardRefWithGeneric = _interopRequireDefault(require("@atlaskit/ds-lib/forward-ref-with-generic"));
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _constants = require("./constants");
+var _dragHandleNew = require("./drag-handle/drag-handle-new");
 var _lazyDragHandle = require("./drag-handle/lazy-drag-handle");
 var _expandableMenuItemContext = require("./expandable-menu-item/expandable-menu-item-context");
 var _flyoutMenuItemContext = require("./flyout-menu-item/flyout-menu-item-context");
@@ -303,7 +305,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
     size: "small",
     maxLines: 1,
     ref: descriptionRef
-  }, description)), hasDragIndicator ? /*#__PURE__*/_react.default.createElement(_lazyDragHandle.LazyDragHandle, null) : null, dropIndicator);
+  }, description)), hasDragIndicator ? /*#__PURE__*/_react.default.createElement(TemporaryDragHandle, null) : null, dropIndicator);
 
   /**
    *  If the [expandable] menu item is expanded, show hover actions even when *not* hovered.
@@ -396,6 +398,9 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
   }, actions)));
 };
 
+// Remove this when FG is cleaned up
+var TemporaryDragHandle = (0, _platformFeatureFlagsReact.componentWithFG)('navx-4718-inline-drag-handle', _dragHandleNew.DragHandleNew, _lazyDragHandle.LazyDragHandle);
+
 /**
  * __MenuItemBase__
  *

package/dist/es2019/entry-points/drag-and-drop/drag-handle.js

@@ -1 +1,6 @@
-export { LazyDragHandle } from '../../ui/menu-item/drag-handle/lazy-drag-handle';
+// Remove LazyDragHandle when "navx-4718-inline-drag-handle" is cleaned up.
+export { LazyDragHandle } from '../../ui/menu-item/drag-handle/lazy-drag-handle';
+
+// By exporting DragHandle, we are effectively breaking the bundling that the lazy-drag-handle was using.
+// We can't use importCond in platform packages, so we don't have a choice.
+export { DragHandleNew as DragHandle } from '../../ui/menu-item/drag-handle/drag-handle-new';

package/dist/es2019/ui/menu-item/drag-handle/drag-handle-new.compiled.css

@@ -0,0 +1,9 @@
+._152tidpf{inset-block-start:0}
+._1bah1h6o{justify-content:center}
+._1e02idpf{inset-inline-start:0}
+._1e0c1i3c{display:var(--drag-handle-display,none)}
+._2lx21bp4{flex-direction:column}
+._ahbqxmi2{margin-inline-start:var(--ds-space-negative-150,-9pt)}
+._kqswstnw{position:absolute}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._u7coidpf{inset-block-end:0}

package/dist/es2019/ui/menu-item/drag-handle/drag-handle-new.js

@@ -0,0 +1,19 @@
+/* drag-handle-new.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./drag-handle-new.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
+const styles = {
+  root: "_syazazsu _1e0c1i3c _2lx21bp4 _1bah1h6o _kqswstnw _152tidpf _u7coidpf _1e02idpf _ahbqxmi2"
+};
+
+// Remove the "default" when "navx-4718-inline-drag-handle" is cleaned up
+export function DragHandleNew() {
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    className: ax([styles.root])
+  }, /*#__PURE__*/React.createElement(DragHandleVerticalIcon, {
+    label: "",
+    size: "small"
+  }));
+}

package/dist/es2019/ui/menu-item/drag-handle/drag-handle.js

@@ -8,6 +8,9 @@ const styles = {
 };
 
 // Using default export to play well with React.lazy
+export { DragHandle };
+
+// Remove the "default" when "navx-4718-inline-drag-handle" is cleaned up
 export default function DragHandle() {
   return /*#__PURE__*/React.createElement("div", {
     "aria-hidden": "true",

package/dist/es2019/ui/menu-item/drag-handle/lazy-drag-handle.js

@@ -1,9 +1,10 @@
 import React, { lazy, Suspense, useEffect, useState } from 'react';
 
+// Remove LazyDragHandle when "navx-4718-inline-drag-handle" is cleaned up.
 /**
  * A wrapper around `React.lazy` that defers rendering until after the component has mounted.
  *
- * This avoids hydration errors because:
+ * We think this avoids hydration errors because:
  * - On the server: `Component` is `null`, so nothing is rendered.
  * - On the first client render (hydration): `Component` is still `null`, matching the server HTML.
  * - After mount: `useEffect` fires, sets the lazy component, and triggers a re-render
@@ -15,6 +16,9 @@ import React, { lazy, Suspense, useEffect, useState } from 'react';
  *
  * By deferring to after mount, both server and initial client render agree on `null`,
  * and the lazy import + Suspense only kicks in after hydration is complete.
+ *
+ * @private
+ * @deprecated - use DragHandle instead.
  */
 export function LazyDragHandle() {
   const [Component, setComponent] = useState(null);

package/dist/es2019/ui/menu-item/menu-item.js

@@ -8,9 +8,11 @@ import { AvatarContext } from '@atlaskit/avatar';
 import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { Anchor, Pressable, Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { expandableMenuItemIndentation } from './constants';
+import { DragHandleNew } from './drag-handle/drag-handle-new';
 import { LazyDragHandle } from './drag-handle/lazy-drag-handle';
 import { useLevel } from './expandable-menu-item/expandable-menu-item-context';
 import { useFlyoutMenuOpen, useSetFlyoutMenuOpen } from './flyout-menu-item/flyout-menu-item-context';
@@ -293,7 +295,7 @@ const MenuItemBaseNoRef = ({
     size: "small",
     maxLines: 1,
     ref: descriptionRef
-  }, description)), hasDragIndicator ? /*#__PURE__*/React.createElement(LazyDragHandle, null) : null, dropIndicator);
+  }, description)), hasDragIndicator ? /*#__PURE__*/React.createElement(TemporaryDragHandle, null) : null, dropIndicator);
 
   /**
    *  If the [expandable] menu item is expanded, show hover actions even when *not* hovered.
@@ -385,6 +387,9 @@ const MenuItemBaseNoRef = ({
   }, actions)));
 };
 
+// Remove this when FG is cleaned up
+const TemporaryDragHandle = componentWithFG('navx-4718-inline-drag-handle', DragHandleNew, LazyDragHandle);
+
 /**
  * __MenuItemBase__
  *

package/dist/esm/entry-points/drag-and-drop/drag-handle.js

@@ -1 +1,6 @@
-export { LazyDragHandle } from '../../ui/menu-item/drag-handle/lazy-drag-handle';
+// Remove LazyDragHandle when "navx-4718-inline-drag-handle" is cleaned up.
+export { LazyDragHandle } from '../../ui/menu-item/drag-handle/lazy-drag-handle';
+
+// By exporting DragHandle, we are effectively breaking the bundling that the lazy-drag-handle was using.
+// We can't use importCond in platform packages, so we don't have a choice.
+export { DragHandleNew as DragHandle } from '../../ui/menu-item/drag-handle/drag-handle-new';

package/dist/esm/ui/menu-item/drag-handle/drag-handle-new.compiled.css

@@ -0,0 +1,9 @@
+._152tidpf{inset-block-start:0}
+._1bah1h6o{justify-content:center}
+._1e02idpf{inset-inline-start:0}
+._1e0c1i3c{display:var(--drag-handle-display,none)}
+._2lx21bp4{flex-direction:column}
+._ahbqxmi2{margin-inline-start:var(--ds-space-negative-150,-9pt)}
+._kqswstnw{position:absolute}
+._syazazsu{color:var(--ds-text-subtle,#505258)}
+._u7coidpf{inset-block-end:0}

package/dist/esm/ui/menu-item/drag-handle/drag-handle-new.js

@@ -0,0 +1,19 @@
+/* drag-handle-new.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./drag-handle-new.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import DragHandleVerticalIcon from '@atlaskit/icon/core/drag-handle-vertical';
+var styles = {
+  root: "_syazazsu _1e0c1i3c _2lx21bp4 _1bah1h6o _kqswstnw _152tidpf _u7coidpf _1e02idpf _ahbqxmi2"
+};
+
+// Remove the "default" when "navx-4718-inline-drag-handle" is cleaned up
+export function DragHandleNew() {
+  return /*#__PURE__*/React.createElement("div", {
+    "aria-hidden": "true",
+    className: ax([styles.root])
+  }, /*#__PURE__*/React.createElement(DragHandleVerticalIcon, {
+    label: "",
+    size: "small"
+  }));
+}

package/dist/esm/ui/menu-item/drag-handle/drag-handle.js

@@ -8,6 +8,9 @@ var styles = {
 };
 
 // Using default export to play well with React.lazy
+export { DragHandle };
+
+// Remove the "default" when "navx-4718-inline-drag-handle" is cleaned up
 export default function DragHandle() {
   return /*#__PURE__*/React.createElement("div", {
     "aria-hidden": "true",

package/dist/esm/ui/menu-item/drag-handle/lazy-drag-handle.js

@@ -1,10 +1,11 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { lazy, Suspense, useEffect, useState } from 'react';
 
+// Remove LazyDragHandle when "navx-4718-inline-drag-handle" is cleaned up.
 /**
  * A wrapper around `React.lazy` that defers rendering until after the component has mounted.
  *
- * This avoids hydration errors because:
+ * We think this avoids hydration errors because:
  * - On the server: `Component` is `null`, so nothing is rendered.
  * - On the first client render (hydration): `Component` is still `null`, matching the server HTML.
  * - After mount: `useEffect` fires, sets the lazy component, and triggers a re-render
@@ -16,6 +17,9 @@ import React, { lazy, Suspense, useEffect, useState } from 'react';
  *
  * By deferring to after mount, both server and initial client render agree on `null`,
  * and the lazy import + Suspense only kicks in after hydration is complete.
+ *
+ * @private
+ * @deprecated - use DragHandle instead.
  */
 export function LazyDragHandle() {
   var _useState = useState(null),

package/dist/esm/ui/menu-item/menu-item.js

@@ -11,9 +11,11 @@ import { AvatarContext } from '@atlaskit/avatar';
 import forwardRefWithGeneric from '@atlaskit/ds-lib/forward-ref-with-generic';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
 import { Anchor, Pressable, Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { expandableMenuItemIndentation } from './constants';
+import { DragHandleNew } from './drag-handle/drag-handle-new';
 import { LazyDragHandle } from './drag-handle/lazy-drag-handle';
 import { useLevel } from './expandable-menu-item/expandable-menu-item-context';
 import { useFlyoutMenuOpen, useSetFlyoutMenuOpen } from './flyout-menu-item/flyout-menu-item-context';
@@ -294,7 +296,7 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
     size: "small",
     maxLines: 1,
     ref: descriptionRef
-  }, description)), hasDragIndicator ? /*#__PURE__*/React.createElement(LazyDragHandle, null) : null, dropIndicator);
+  }, description)), hasDragIndicator ? /*#__PURE__*/React.createElement(TemporaryDragHandle, null) : null, dropIndicator);
 
   /**
    *  If the [expandable] menu item is expanded, show hover actions even when *not* hovered.
@@ -387,6 +389,9 @@ var MenuItemBaseNoRef = function MenuItemBaseNoRef(_ref2, forwardedRef) {
   }, actions)));
 };
 
+// Remove this when FG is cleaned up
+var TemporaryDragHandle = componentWithFG('navx-4718-inline-drag-handle', DragHandleNew, LazyDragHandle);
+
 /**
  * __MenuItemBase__
  *

package/dist/types/entry-points/drag-and-drop/drag-handle.d.ts

@@ -1 +1,2 @@
 export { LazyDragHandle } from '../../ui/menu-item/drag-handle/lazy-drag-handle';
+export { DragHandleNew as DragHandle } from '../../ui/menu-item/drag-handle/drag-handle-new';

package/dist/types/ui/menu-item/drag-handle/drag-handle-new.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+export declare function DragHandleNew(): JSX.Element;

package/dist/types/ui/menu-item/drag-handle/drag-handle.d.ts

@@ -3,4 +3,5 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
+export { DragHandle };
 export default function DragHandle(): JSX.Element;

package/dist/types/ui/menu-item/drag-handle/lazy-drag-handle.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 /**
  * A wrapper around `React.lazy` that defers rendering until after the component has mounted.
  *
- * This avoids hydration errors because:
+ * We think this avoids hydration errors because:
  * - On the server: `Component` is `null`, so nothing is rendered.
  * - On the first client render (hydration): `Component` is still `null`, matching the server HTML.
  * - After mount: `useEffect` fires, sets the lazy component, and triggers a re-render
@@ -14,5 +14,8 @@ import React from 'react';
  *
  * By deferring to after mount, both server and initial client render agree on `null`,
  * and the lazy import + Suspense only kicks in after hydration is complete.
+ *
+ * @private
+ * @deprecated - use DragHandle instead.
  */
 export declare function LazyDragHandle(): React.JSX.Element | null;

package/dist/types-ts4.5/entry-points/drag-and-drop/drag-handle.d.ts

@@ -1 +1,2 @@
 export { LazyDragHandle } from '../../ui/menu-item/drag-handle/lazy-drag-handle';
+export { DragHandleNew as DragHandle } from '../../ui/menu-item/drag-handle/drag-handle-new';

package/dist/types-ts4.5/ui/menu-item/drag-handle/drag-handle-new.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @jsxFrag
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+export declare function DragHandleNew(): JSX.Element;

package/dist/types-ts4.5/ui/menu-item/drag-handle/drag-handle.d.ts

@@ -3,4 +3,5 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
+export { DragHandle };
 export default function DragHandle(): JSX.Element;

package/dist/types-ts4.5/ui/menu-item/drag-handle/lazy-drag-handle.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 /**
  * A wrapper around `React.lazy` that defers rendering until after the component has mounted.
  *
- * This avoids hydration errors because:
+ * We think this avoids hydration errors because:
  * - On the server: `Component` is `null`, so nothing is rendered.
  * - On the first client render (hydration): `Component` is still `null`, matching the server HTML.
  * - After mount: `useEffect` fires, sets the lazy component, and triggers a re-render
@@ -14,5 +14,8 @@ import React from 'react';
  *
  * By deferring to after mount, both server and initial client render agree on `null`,
  * and the lazy import + Suspense only kicks in after hydration is complete.
+ *
+ * @private
+ * @deprecated - use DragHandle instead.
  */
 export declare function LazyDragHandle(): React.JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/side-nav-items",
-	"version": "1.13.3",
+	"version": "1.13.4",
 	"description": "Menu items and elements for the side nav area.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -37,13 +37,14 @@
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.2.0",
-		"@atlaskit/avatar": "^25.12.0",
+		"@atlaskit/avatar": "^25.13.0",
 		"@atlaskit/button": "^23.11.0",
 		"@atlaskit/css": "^0.19.0",
 		"@atlaskit/ds-lib": "^7.0.0",
 		"@atlaskit/heading": "^5.4.0",
 		"@atlaskit/icon": "^34.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
+		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/popup": "^4.16.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.8.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",