@atlaskit/navigation-system 10.12.1 → 10.14.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlassian/navigation-system
 
+## 10.14.0
+
+### Minor Changes
+
+- [`2309581c02076`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2309581c02076) -
+  Decouple the built-in side nav shortcut, toggle tooltip shortcut, and side nav splitter tooltip
+  from the full height sidebar rollout behind `platform-dst-keep-desired-fhs-features`.
+
+## 10.13.0
+
+### Minor Changes
+
+- [`0195cea826a48`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0195cea826a48) -
+  Use directional motion tokens for RTL-aware panel slide animations. Adds new
+  `motion.panel.content.enter` and `motion.panel.content.exit` motion tokens, applied to the Panel
+  to soften the content when opening and closing.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 10.12.1
 
 ### Patch Changes

package/dist/cjs/ui/page-layout/panel-splitter/panel-splitter.js

@@ -21,6 +21,7 @@ var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _useId = require("@atlaskit/ds-lib/use-id");
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _combine = require("@atlaskit/pragmatic-drag-and-drop/combine");
 var _adapter = require("@atlaskit/pragmatic-drag-and-drop/element/adapter");
 var _blockDraggingToIframes = require("@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes");
@@ -116,7 +117,7 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
     children = _ref2.children,
     testId = _ref2.testId;
   var isFhsEnabled = (0, _useIsFhsEnabled.useIsFhsEnabled)();
-  if (tooltipContent && isFhsEnabled) {
+  if (tooltipContent && (isFhsEnabled || (0, _fg.fg)('platform-dst-keep-desired-fhs-features'))) {
     return /*#__PURE__*/React.createElement(_tooltip.default, {
       testId: testId,
       content: tooltipContent,

package/dist/cjs/ui/page-layout/panel.compiled.css

@@ -1,6 +1,10 @@
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
-._y44v1s3l{animation:var(--ds-panel-enter,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
-._y44vqhwn{animation:var(--ds-panel-exit,.2s cubic-bezier(.6,0,.8,.6) SlideOut100PercentRight)}
+._y44v11az{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100 .1s)}
+._y44v14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}
+._y44v1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
+._y44v6gs0{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.4,1,.6,1) FadeOut100to0)}
+[dir=rtl] ._158obamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}
+[dir=rtl] ._158oeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}
 ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
 ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}

package/dist/cjs/ui/page-layout/panel.js

@@ -44,8 +44,10 @@ var styles = {
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
-  entering: "_y44v1s3l",
-  exiting: "_y44vqhwn"
+  entering: "_y44v1nn1 _158obamb",
+  exiting: "_y44v14vv _158oeydr",
+  contentEntering: "_y44v11az",
+  contentExiting: "_y44v6gs0"
 };
 
 /**
@@ -225,6 +227,6 @@ function Panel(_ref) {
     resizingCssVar: panelSplitterResizingVar,
     position: "start"
   }, /*#__PURE__*/React.createElement("div", {
-    className: (0, _runtime.ax)([styles.scrollContainer])
+    className: (0, _runtime.ax)([styles.scrollContainer, isMotionUpliftEnabled && state === 'entering' && styles.contentEntering, isMotionUpliftEnabled && state === 'exiting' && styles.contentExiting])
   }, children)));
 }

package/dist/cjs/ui/page-layout/side-nav/toggle-button.js

@@ -17,6 +17,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _sidebarCollapse = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-collapse"));
 var _sidebarExpand = _interopRequireDefault(require("@atlaskit/icon/core/sidebar-expand"));
 var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _iconButton = require("../../top-nav-items/themed/icon-button");
 var _sideNavToggleButtonAttachRef = require("./side-nav-toggle-button-attach-ref");
@@ -107,7 +108,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if (isFhsEnabled) {
+    if (isFhsEnabled || (0, _fg.fg)('platform-dst-keep-desired-fhs-features')) {
       openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
     }
   }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
@@ -151,7 +152,7 @@ var SideNavToggleButton = exports.SideNavToggleButton = function SideNavToggleBu
   };
   var isShortcutEnabled = (0, _useIsSideNavShortcutEnabled.useIsSideNavShortcutEnabled)();
   var tooltipProps = (0, _react.useMemo)(function () {
-    if (isFhsEnabled) {
+    if (isFhsEnabled || (0, _fg.fg)('platform-dst-keep-desired-fhs-features')) {
       return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
         shortcut: isShortcutEnabled ? _sideNavToggleTooltipKeyboardShortcut.sideNavToggleTooltipKeyboardShortcut : undefined
       });

package/dist/cjs/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -9,6 +9,7 @@ var _react = require("react");
 var _bindEventListener = require("bind-event-listener");
 var _useStableRef = _interopRequireDefault(require("@atlaskit/ds-lib/use-stable-ref"));
 var _useOpenLayerObserver = require("@atlaskit/layering/use-open-layer-observer");
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _useIsFhsEnabled = require("../../fhs-rollout/use-is-fhs-enabled");
 var _useIsSideNavShortcutEnabled = require("./use-is-side-nav-shortcut-enabled");
 var _useToggleSideNav = require("./use-toggle-side-nav");
@@ -25,7 +26,7 @@ function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcutStableRef = (0, _useStableRef.default)(canToggleWithShortcut);
   var isSideNavShortcutEnabled = (0, _useIsSideNavShortcutEnabled.useIsSideNavShortcutEnabled)();
   (0, _react.useEffect)(function () {
-    if (!isFhsEnabled) {
+    if (!isFhsEnabled && !(0, _fg.fg)('platform-dst-keep-desired-fhs-features')) {
       return;
     }
     if (!isSideNavShortcutEnabled) {

package/dist/es2019/ui/page-layout/panel-splitter/panel-splitter.js

@@ -10,6 +10,7 @@ import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';
@@ -104,7 +105,7 @@ const MaybeTooltip = ({
   testId
 }) => {
   const isFhsEnabled = useIsFhsEnabled();
-  if (tooltipContent && isFhsEnabled) {
+  if (tooltipContent && (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features'))) {
     return /*#__PURE__*/React.createElement(Tooltip, {
       testId: testId,
       content: tooltipContent,

package/dist/es2019/ui/page-layout/panel.compiled.css

@@ -1,6 +1,10 @@
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
-._y44v1s3l{animation:var(--ds-panel-enter,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
-._y44vqhwn{animation:var(--ds-panel-exit,.2s cubic-bezier(.6,0,.8,.6) SlideOut100PercentRight)}
+._y44v11az{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100 .1s)}
+._y44v14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}
+._y44v1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
+._y44v6gs0{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.4,1,.6,1) FadeOut100to0)}
+[dir=rtl] ._158obamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}
+[dir=rtl] ._158oeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}
 ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
 ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}

package/dist/es2019/ui/page-layout/panel.js

@@ -33,8 +33,10 @@ const styles = {
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
-  entering: "_y44v1s3l",
-  exiting: "_y44vqhwn"
+  entering: "_y44v1nn1 _158obamb",
+  exiting: "_y44v14vv _158oeydr",
+  contentEntering: "_y44v11az",
+  contentExiting: "_y44v6gs0"
 };
 
 /**
@@ -211,6 +213,6 @@ export function Panel({
     resizingCssVar: panelSplitterResizingVar,
     position: "start"
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.scrollContainer])
+    className: ax([styles.scrollContainer, isMotionUpliftEnabled && state === 'entering' && styles.contentEntering, isMotionUpliftEnabled && state === 'exiting' && styles.contentExiting])
   }, children)));
 }

package/dist/es2019/ui/page-layout/side-nav/toggle-button.js

@@ -7,6 +7,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';
@@ -91,7 +92,7 @@ export const SideNavToggleButton = ({
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if (isFhsEnabled) {
+    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
       openLayerObserver === null || openLayerObserver === void 0 ? void 0 : openLayerObserver.closeLayers();
     }
   }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
@@ -133,7 +134,7 @@ export const SideNavToggleButton = ({
   }, isSideNavExpanded ? /*#__PURE__*/React.createElement(SidebarCollapseIcon, props) : /*#__PURE__*/React.createElement(SidebarExpandIcon, props));
   const isShortcutEnabled = useIsSideNavShortcutEnabled();
   const tooltipProps = useMemo(() => {
-    if (isFhsEnabled) {
+    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
       return {
         ...toggleButtonTooltipOptions,
         shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined

package/dist/es2019/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { bind } from 'bind-event-listener';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
 import { useToggleSideNav } from './use-toggle-side-nav';
@@ -20,7 +21,7 @@ export function useSideNavToggleKeyboardShortcut({
   const canToggleWithShortcutStableRef = useStableRef(canToggleWithShortcut);
   const isSideNavShortcutEnabled = useIsSideNavShortcutEnabled();
   useEffect(() => {
-    if (!isFhsEnabled) {
+    if (!isFhsEnabled && !fg('platform-dst-keep-desired-fhs-features')) {
       return;
     }
     if (!isSideNavShortcutEnabled) {

package/dist/esm/ui/page-layout/panel-splitter/panel-splitter.js

@@ -16,6 +16,7 @@ import invariant from 'tiny-invariant';
 import { useId } from '@atlaskit/ds-lib/use-id';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import { draggable } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { blockDraggingToIFrames } from '@atlaskit/pragmatic-drag-and-drop/element/block-dragging-to-iframes';
@@ -107,7 +108,7 @@ var MaybeTooltip = function MaybeTooltip(_ref2) {
     children = _ref2.children,
     testId = _ref2.testId;
   var isFhsEnabled = useIsFhsEnabled();
-  if (tooltipContent && isFhsEnabled) {
+  if (tooltipContent && (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features'))) {
     return /*#__PURE__*/React.createElement(Tooltip, {
       testId: testId,
       content: tooltipContent,

package/dist/esm/ui/page-layout/panel.compiled.css

@@ -1,6 +1,10 @@
 ._nd5l1b6c{grid-area:main/aside/aside/aside}
-._y44v1s3l{animation:var(--ds-panel-enter,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
-._y44vqhwn{animation:var(--ds-panel-exit,.2s cubic-bezier(.6,0,.8,.6) SlideOut100PercentRight)}
+._y44v11az{animation:var(--ds-panel-content-enter,.15s cubic-bezier(.4,1,.6,1) FadeIn0to100 .1s)}
+._y44v14vv{animation:var(--ds-panel-exit-right,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentRight)}
+._y44v1nn1{animation:var(--ds-panel-enter-right,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentRight)}
+._y44v6gs0{animation:var(--ds-panel-content-exit,50ms cubic-bezier(.4,1,.6,1) FadeOut100to0)}
+[dir=rtl] ._158obamb{animation:var(--ds-panel-enter-left,.25s cubic-bezier(0,.4,0,1) SlideIn100PercentLeft)}
+[dir=rtl] ._158oeydr{animation:var(--ds-panel-exit-left,.2s cubic-bezier(0,.4,0,1) SlideOut100PercentLeft)}
 ._191wglyw{border-inline-start:none}._10fph9n0{justify-self:end}
 ._152timx3{inset-block-start:calc(var(--n_bnrM, 0px) + var(--n_tNvM, 0px))}
 ._16qs130s{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #1e1f2126,0 0 1px #1e1f214f)}

package/dist/esm/ui/page-layout/panel.js

@@ -35,8 +35,10 @@ var styles = {
   border: "_191wglyw _16qs130s _1w6eia51 _scbpglyw",
   scrollContainer: "_1reo1wug _18m91wug _4t3i1osq",
   hidden: "_1e0cglyw",
-  entering: "_y44v1s3l",
-  exiting: "_y44vqhwn"
+  entering: "_y44v1nn1 _158obamb",
+  exiting: "_y44v14vv _158oeydr",
+  contentEntering: "_y44v11az",
+  contentExiting: "_y44v6gs0"
 };
 
 /**
@@ -216,6 +218,6 @@ export function Panel(_ref) {
     resizingCssVar: panelSplitterResizingVar,
     position: "start"
   }, /*#__PURE__*/React.createElement("div", {
-    className: ax([styles.scrollContainer])
+    className: ax([styles.scrollContainer, isMotionUpliftEnabled && state === 'entering' && styles.contentEntering, isMotionUpliftEnabled && state === 'exiting' && styles.contentExiting])
   }, children)));
 }

package/dist/esm/ui/page-layout/side-nav/toggle-button.js

@@ -11,6 +11,7 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import SidebarCollapseIcon from '@atlaskit/icon/core/sidebar-collapse';
 import SidebarExpandIcon from '@atlaskit/icon/core/sidebar-expand';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { IconButton } from '../../top-nav-items/themed/icon-button';
 import { SideNavToggleButtonAttachRef } from './side-nav-toggle-button-attach-ref';
@@ -98,7 +99,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
       isSideNavVisible: isSideNavExpanded
     });
     toggleVisibility();
-    if (isFhsEnabled) {
+    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
       openLayerObserver === null || openLayerObserver === void 0 || openLayerObserver.closeLayers();
     }
   }, [isFhsEnabled, isSideNavExpanded, onClick, openLayerObserver, toggleVisibility]);
@@ -142,7 +143,7 @@ export var SideNavToggleButton = function SideNavToggleButton(_ref) {
   };
   var isShortcutEnabled = useIsSideNavShortcutEnabled();
   var tooltipProps = useMemo(function () {
-    if (isFhsEnabled) {
+    if (isFhsEnabled || fg('platform-dst-keep-desired-fhs-features')) {
       return _objectSpread(_objectSpread({}, toggleButtonTooltipOptions), {}, {
         shortcut: isShortcutEnabled ? sideNavToggleTooltipKeyboardShortcut : undefined
       });

package/dist/esm/ui/page-layout/side-nav/use-side-nav-toggle-keyboard-shortcut.js

@@ -2,6 +2,7 @@ import { useEffect } from 'react';
 import { bind } from 'bind-event-listener';
 import useStableRef from '@atlaskit/ds-lib/use-stable-ref';
 import { useOpenLayerObserver } from '@atlaskit/layering/use-open-layer-observer';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { useIsFhsEnabled } from '../../fhs-rollout/use-is-fhs-enabled';
 import { useIsSideNavShortcutEnabled } from './use-is-side-nav-shortcut-enabled';
 import { useToggleSideNav } from './use-toggle-side-nav';
@@ -19,7 +20,7 @@ export function useSideNavToggleKeyboardShortcut(_ref) {
   var canToggleWithShortcutStableRef = useStableRef(canToggleWithShortcut);
   var isSideNavShortcutEnabled = useIsSideNavShortcutEnabled();
   useEffect(function () {
-    if (!isFhsEnabled) {
+    if (!isFhsEnabled && !fg('platform-dst-keep-desired-fhs-features')) {
       return;
     }
     if (!isSideNavShortcutEnabled) {

package/dist/types/ui/page-layout/panel-splitter/side-nav-panel-splitter.d.ts

@@ -17,7 +17,7 @@ type SideNavPanelSplitterProps = Omit<PanelSplitterProps, 'onDoubleClick' | 'too
      *
      * If the `isSideNavShortcutEnabled` prop is enabled on `<Root />`, the built-in keyboard shortcut will be displayed with the tooltip.
      *
-     * Only used if `useIsFhsEnabled` is true.
+     * Only used if `platform-dst-keep-desired-fhs-features` or `useIsFhsEnabled` is enabled.
      */
     tooltipContent?: PanelSplitterProps['tooltipContent'];
 };

package/dist/types/ui/page-layout/root.d.ts

@@ -65,7 +65,8 @@ export declare function Root({ children, xcss, UNSAFE_dangerouslyHoistSlotSizes,
      * is pressed, before the SideNav is toggled. You can use this to conditionally disable the shortcut based on your
      * your own custom checks, e.g. if there is a legacy dialog open.
      *
-     * Note: The built-in keyboard shortcut is behind `useIsFhsEnabled`.
+     * Note: The built-in keyboard shortcut is behind the `platform-dst-keep-desired-fhs-features`
+     * feature gate, or `useIsFhsEnabled` for backwards compatibility.
      */
     isSideNavShortcutEnabled?: boolean;
 }): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "10.12.1",
+	"version": "10.14.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -70,11 +70,11 @@
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/side-nav-items": "^2.3.0",
-		"@atlaskit/tokens": "^16.6.0",
+		"@atlaskit/tokens": "^16.7.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@atlaskit/visually-hidden": "^4.2.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^1.0.0",
+		"@compiled/react": "^1.0.2",
 		"bind-event-listener": "^3.0.0",
 		"raf-schd": "^4.0.3",
 		"tiny-invariant": "^1.2.0"
@@ -134,6 +134,9 @@
 		"navx-full-height-sidebar": {
 			"type": "boolean"
 		},
+		"platform-dst-keep-desired-fhs-features": {
+			"type": "boolean"
+		},
 		"platform_dst_button_chevron_sizing": {
 			"type": "boolean"
 		},