@atlaskit/navigation-system 0.180.0 → 0.181.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlassian/navigation-system
 
+## 0.181.0
+
+### Minor Changes
+
+- [`1e64de395c7b5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1e64de395c7b5) -
+  Cleans up the `platform_dst_nav4_flyout_update_on_resize` feature gate. Flyout menus now correctly
+  reposition when their content changes size.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.180.0
 
 ### Minor Changes

package/constellation/layout/examples.mdx

@@ -13,7 +13,7 @@ import { ToggleSideNavKeyboardShortcutExample } from '../../examples/constellati
 import { PageLayoutDiagram } from './diagram';
 
 The full page layout with all areas rendered has the structure depicted below, or see the
-[interactive example](/components/navigation-system/examples#examples).
+[interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
 
 <PageLayoutDiagram />
 
@@ -40,10 +40,10 @@ the top of the screen.
 Use the `TopNav` to render [top nav items](/components/navigation-system/top-nav-items).
 
 - It will display at the top of the screen, below the banner if one is present. It has a fixed
-  height of `48px`.
+  height of 48px.
 - Use the [top nav slots](#top-nav-slots) to position actions within top nav.
-- The top nav is responsive, with the [top nav items](/components/navigation-system/top-nav-items)
-  changing according to the viewport size.
+- The top nav is [responsive](/components/navigation-system/top-nav-items/examples#responsive), with
+  the top nav items changing according to the viewport size.
 
 #### Top nav slots
 
@@ -61,7 +61,7 @@ See the [custom theming](/components/navigation-system/layout/custom-theming) ta
 ### Side nav
 
 - Use the `SideNav` to render [side nav items](/components/navigation-system/side-nav-items). It
-  will show on the left of the screen. The default width of the side nav is `320px`.
+  will show on the left of the screen. The default width of the side nav is 320px.
 - Use the [side nav slots](#side-nav-slots) to position content within the side nav.
 - The side nav is collapsable and expandable, resizable, responsive, and offers flyout behaviour.
 
@@ -81,7 +81,7 @@ the side nav, simulating a sticky footer.
 #### Side nav collapse/expand
 
 The side nav can be collapsed and expanded using the the `SideNavToggleButton` from
-[top nav items](/components/navigation-system/top-nav-items).
+[top nav items](/components/navigation-system/top-nav-items/examples#start-items).
 
 There are two hooks available for programmatically toggling the side nav.
 
@@ -113,15 +113,15 @@ This is useful for toggling the side nav based on a keyboard shortcut.
 #### Side nav flyout
 
 - In the collapsed state, hovering over the `SideNavToggleButton` from
-  [top nav items](/components/navigation-system/top-nav-items) will trigger the side nav to open as
-  an overlay. Moving the curser away will close it. If there are any open supported ADS layering
-  components (e.g. Popups, Dropdown menus) within the side nav, the flyout will stay locked open,
-  until the layering components are closed.
+  [top nav items](/components/navigation-system/top-nav-items/examples#start-items) will trigger the
+  side nav to open as an overlay. Moving the curser away will close it. If there are any open
+  supported ADS layering components (e.g. Popups, Dropdown menus) within the side nav, the flyout
+  will stay locked open, until the layering components are closed.
 
 - The expansion and collapse of the side nav flyout is animated on **supported browsers**.
   Currently, Firefox does not support the animation. Instead, it will instantly expand and collapse.
 
-See the [interactive example](/components/navigation-system/examples#examples).
+See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
 
 #### Side nav resizing
 
@@ -131,19 +131,20 @@ See the [interactive example](/components/navigation-system/examples#examples).
 - The side nav can be resized to a minimum width of 240px, and a maximum width equal to 50% of the
   total viewport width. It retains this resized width even after collapsing, reopening, or
   refreshing the page. When resizing, any open layer components (e.g. popups, dropdowns, selects,
-  tooltips) will be closed. See the interactive example.
+  tooltips) will be closed.
 
-See the [interactive example](/components/navigation-system/examples#examples).
+See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
 
 #### Side nav responsive
 
 - At `s`, `xs`, and `xxs` breakpoints (i.e. viewports smaller than 1024px), the side nav
-  automatically collapses to make room for the content. Users have the option to manually open or
-  close the side nav according to their preferences. Doing so will open it as an overlay.
+  automatically collapses to make room for the content. Users have the option to manually
+  [open or close the side nav](/components/navigation-system/layout/examples#side-nav-collapseexpand)
+  according to their preferences. Doing so will open it as an overlay.
 - At `xs` and `xxs` breakpoints (i.e. viewports smaller than 768px), the max width of the overlay
   side nav is either 320px or 90% of the screen width - whichever value is smaller.
 
-See the [interactive example](/components/navigation-system/examples#examples).
+See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
 
 ### Main
 
@@ -159,15 +160,15 @@ fill available space.
 
 `Aside` is rendered to the right of the `Main` area.
 
-- The default width of the Aside is 330px, and it is resizable and responsive.
+- The default width of the Aside is 330px, and it is
+  [resizable](/components/navigation-system/layout/examples#aside-resizing) and
+  [responsive](/components/navigation-system/layout/examples#aside-responsive).
 - On large viewports the Aside can be fixed, meaning it will have its own scroll container and not
   use the body scroll.
 - On small viewports, the element will always use body scroll, to make it easier to scroll the page
   when the content is tall.
 
-The `Aside` is rendered to the right of the `Main` area.
-
-See the [interactive example](/components/navigation-system/examples#examples).
+See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
 
 #### Aside resizing
 
@@ -179,21 +180,24 @@ resizable.
 - The `Aside` can be resized to a minimum width of 120px, and a maximum width equal to 50% of the
   total viewport width. It retains this resized width even after refreshing the page.
 
-See the [interactive example](/components/navigation-system/examples#examples).
+See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
 
 #### Aside responsive
 
 At `s`, `xs`, and `xxs` breakpoints (i.e. viewports smaller than 1024px), the `Aside` moves below
 the `Main` area, and conforms to `Main` width and behaviour.
 
-See the [interactive example](/components/navigation-system/examples#examples).
+See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
 
 ### Panel
 
 The `Panel` is rendered to the right of the `Main` and `Aside` areas.
 
-- The default width of the panel is `365px`, which can be modified using the `defaultWidth` prop.
-- The panel is collapsable and expandable, resizable, and responsive.
+- The default width of the panel is 365px, which can be modified using the `defaultWidth` prop.
+- The panel is
+  [collapsable and expandable](/components/navigation-system/layout/examples#panel-collapseexpand),
+  [resizable](/components/navigation-system/layout/examples#panel-resizing), and
+  [responsive](/components/navigation-system/layout/examples#panel-responsive).
 
 Common usage is to house
 [Preview panel (Atlassians only)](https://atlaskit-website-staging.stg-east.frontend.public.atl-paas.net/#/packages/navigation/preview-panel)
@@ -202,7 +206,7 @@ Common usage is to house
 
 The panel can be collapsed and expanded using a trigger of your choosing.
 
-See the [interactive example](/components/navigation-system/examples#examples).
+See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
 
 #### Panel resizing
 
@@ -211,18 +215,18 @@ resizable. It can be resized using the drag handle. When hovering on the drag ha
 pointer changes to a resize pointer.
 
 - The panel can be resized larger than the `defaultWidth` to a maximum of 50% of content area
-  (viewport minus `side nav area`).
+  (viewport minus `SideNav`).
 - It retains this resized width even after collapsing, reopening, or refreshing the page.
 - It has no ability to resize smaller than `defaultWidth`.
 
-See the [interactive example](/components/navigation-system/examples#examples).
+See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
 
 #### Panel responsive
 
 At `m` breakpoints (between 1024-1440px), the `Panel` will overlay `Aside`. At `s` breakpoints and
 below (less than 1024px) it will start to overlay the `Main` area.
 
-See the [interactive example](/components/navigation-system/examples#examples).
+See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
 
 ## Resizable areas
 
@@ -230,11 +234,11 @@ Render `PanelSplitter` in a layout area to make it resizable.
 
 Resizing is supported for the following areas:
 
-- `SideNav`
-- `Aside`
-- `Panel`
+- [SideNav](/components/navigation-system/layout/examples#side-nav)
+- [Aside](/components/navigation-system/layout/examples#aside)
+- [Panel](/components/navigation-system/layout/examples#panel)
 
-See the [interactive example](/components/navigation-system/examples#examples).
+See the [interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
 
 | Area      | Default width      | Min width             | Max width                                    |
 | --------- | ------------------ | --------------------- | -------------------------------------------- |
@@ -245,7 +249,7 @@ See the [interactive example](/components/navigation-system/examples#examples).
 ## Responsive
 
 Layout areas respond to the viewport size. See default behaviour below, or the
-[interactive example](/components/navigation-system/examples#examples).
+[interactive example (Atlassians only)](https://go.atlassian.com/nav4-interactive-example).
 
 | Breakpoint | Viewport      | Side nav                    | Aside        | Panel                                                       |
 | ---------- | ------------- | --------------------------- | ------------ | ----------------------------------------------------------- |

package/constellation/side-nav-items/examples.mdx

@@ -37,7 +37,7 @@ There are four types of side nav menu items:
 4. [Flyout menu item](#flyout-menu-item)
 
 Within menu items, you can customize [`elemBefore`](#elembefore), [`elemAfter`](#elemafter),
-[`actions`](#actions) and [`actionsOnHover`](#actionsonhover).
+[`actions`](#actions-and-actionsonhover) and [`actionsOnHover`](#actions-and-actionsonhover).
 
 ### Link menu item
 
@@ -55,9 +55,9 @@ Use the [app provider](/components/app-provider/examples) to specify a custom ro
 A menu item wrapped in a button tag `<button>`. Use this component when you have an action that does
 something other than navigating to another location.
 
-- [Avoid disabling button menu items](https://atlassian.design/components/button/usage#avoid-disabling-buttons)
-  as this can cause accessibility problems. When disabled, [`actions`](#actions) and
-  [`actionsOnHover`](#actionsonhover) will not display.
+- [Avoid disabling button menu items](/components/button/usage#avoid-disabling-buttons) as this can
+  cause accessibility problems. When disabled, [`actions`](#actions-and-actionsonhover) and
+  [`actionsOnHover`](#actions-and-actionsonhover) will not display.
 - Be cautious of using [`elemAfter`](#elemafter) in menu item disabled states, as it may result in
   an unintended appearance if this component has no disabled states.
 
@@ -74,8 +74,8 @@ hierarchies.
   is provided, it will display a chevron icon by default. If an element is provided, a chevron icon
   will replace the element for hover, press and focus states.
 - Unlike other menu items, it does not support a `description`.
-- When expandable menu item is open, any [`actionsOnHover`](#actionsonhover) will display
-  permanently.
+- When expandable menu item is open, any [`actionsOnHover`](#actions-and-actionsonhover) will
+  display permanently.
 - Every menu item type can be nested inside an expandable menu item.
 
 <Example Component={ExpandableMenuItemDefaultVariantExample} />
@@ -97,7 +97,7 @@ contain other items, such as search bars and filters.
 
 - The flyout menu always displays a chevron icon at the end position.
 - Unlike other menu items, it does not support a `description`, [`elemAfter`](#elemafter),
-  [`actions`](#actions) or [`actionsOnHover`](#actionsonhover).
+  [`actions`](#actions-and-actionsonhover) or [`actionsOnHover`](#actions-and-actionsonhover).
 - The flyout menu content has a fixed 400px width. Height is not defined and can be set by makers.
 
 <Example Component={FlyoutMenuItemExample} />
@@ -118,17 +118,15 @@ codesandbox and resize your browser.
 
 A slot for custom elements to be added to the start position of the menu item.
 
-- Only one element is allowed. Recommended usages are icons, [ContainerAvatar](#container-avatar),
+- Only one element is allowed. Recommended usages are icons, [ContainerAvatar](#containeravatar),
   and app tiles. For [expandable link menu item](#expandable-menu-item), it will render an icon
   button without a tooltip.
 - When no `elemBefore` is provided, the menu item will maintain the empty space. You can remove this
   space by passing in the `COLLAPSE_ELEM_BEFORE` symbol. Consider how this will impact the overall
   visual hierarchy before using.
 
-<!--
-TODO: add this line when the usage tab has been added
-When using icons and icon buttons, follow the [usage guidance](/components/navigation-system/side-nav-items/usage) on the correct sizes.
--->
+When using icons and icon buttons, follow the
+[usage guidance](/components/navigation-system/side-nav-items/usage) on the correct sizes.
 
 <Example Component={ElemBeforeExample} />
 
@@ -151,8 +149,9 @@ A slot for custom elements to be added to the end position of the menu item.
 - Can be more than one element, although we recommended avoiding where possible due to space
   constraints. Recommended usages are for non-interactive elements such as small icons (12px),
   badge, and lozenge.
-- Disappears when [`actionsOnHover`](#actionsonhover) display. If [`actions`](#actions) are present,
-  these take the end position and shift `elemAfter` to the left.
+- Disappears when [`actionsOnHover`](#actions-and-actionsonhover) display. If
+  [`actions`](#actions-and-actionsonhover) are present, these take the end position and shift
+  `elemAfter` to the left.
 
 <Example Component={ElemAfterExample} />
 
@@ -191,7 +190,7 @@ label to name a menu section.
 
 ### Menu divider
 
-A graphic devider to separate menu items or sections.
+A graphic divider to separate menu items or sections.
 
 Reserve for use in [flyout menu content](#flyout-menu-item). Avoid using directly in the side nav,
 use [top level spacer](#top-level-spacer) instead to create separation.

package/constellation/top-nav-items/examples.mdx

@@ -22,7 +22,7 @@ These components can be used within the
 [top nav](/components/navigation-system/layout/examples#top-nav).
 
 For other components that can be used within the top nav, see
-[navigation experience guidelines (Atlassians only)](<(https://hello.atlassian.net/wiki/x/rBE7MAE)>).
+[navigation experience guidelines (Atlassians only)](https://hello.atlassian.net/wiki/x/rBE7MAE).
 
 ## Start items
 

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

@@ -34,7 +34,6 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
     onClose === null || onClose === void 0 || onClose();
     setIsOpen(false);
   }, [setIsOpen, onClose]);
-  var InnerWrapper = (0, _platformFeatureFlags.fg)('platform_dst_nav4_flyout_update_on_resize') ? UpdatePopperOnContentResize : NoOpWrapper;
   return /*#__PURE__*/_react.default.createElement(_experimental.PopupContent, {
     appearance: "UNSAFE_modal-below-sm",
     onClose: handleClose,
@@ -64,18 +63,12 @@ var FlyoutMenuItemContent = exports.FlyoutMenuItemContent = /*#__PURE__*/(0, _re
     shouldDisableGpuAcceleration: true
   }, function (_ref2) {
     var update = _ref2.update;
-    return /*#__PURE__*/_react.default.createElement(InnerWrapper, {
+    return /*#__PURE__*/_react.default.createElement(UpdatePopperOnContentResize, {
       ref: forwardedRef,
       update: update
     }, children);
   });
 });
-var NoOpWrapper = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, forwardedRef) {
-  var children = _ref3.children;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    ref: forwardedRef
-  }, children);
-});
 function createResizeObserver(update) {
   return new ResizeObserver(update);
 }
@@ -92,9 +85,9 @@ function createResizeObserver(update) {
  * 3. Popup exposes the `update` function so consumers can already do this themselves if necessary
  * 4. Flyout menus are a lot more restricted to other popups, it might not make sense more generally
  */
-var UpdatePopperOnContentResize = /*#__PURE__*/(0, _react.forwardRef)(function (_ref4, forwardedRef) {
-  var update = _ref4.update,
-    children = _ref4.children;
+var UpdatePopperOnContentResize = /*#__PURE__*/(0, _react.forwardRef)(function (_ref3, forwardedRef) {
+  var update = _ref3.update,
+    children = _ref3.children;
   /**
    * Storing our `update` function in a ref so that we have a stable reference to it.
    * We need this because our `ResizeObserver` callback cannot be changed after creating it.

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

@@ -25,7 +25,6 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
     onClose === null || onClose === void 0 ? void 0 : onClose();
     setIsOpen(false);
   }, [setIsOpen, onClose]);
-  const InnerWrapper = fg('platform_dst_nav4_flyout_update_on_resize') ? UpdatePopperOnContentResize : NoOpWrapper;
   return /*#__PURE__*/React.createElement(PopupContent, {
     appearance: "UNSAFE_modal-below-sm",
     onClose: handleClose,
@@ -55,18 +54,11 @@ export const FlyoutMenuItemContent = /*#__PURE__*/forwardRef(({
     shouldDisableGpuAcceleration: true
   }, ({
     update
-  }) => /*#__PURE__*/React.createElement(InnerWrapper, {
+  }) => /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
     ref: forwardedRef,
     update: update
   }, children));
 });
-const NoOpWrapper = /*#__PURE__*/forwardRef(({
-  children
-}, forwardedRef) => {
-  return /*#__PURE__*/React.createElement("div", {
-    ref: forwardedRef
-  }, children);
-});
 function createResizeObserver(update) {
   return new ResizeObserver(update);
 }

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

@@ -25,7 +25,6 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
     onClose === null || onClose === void 0 || onClose();
     setIsOpen(false);
   }, [setIsOpen, onClose]);
-  var InnerWrapper = fg('platform_dst_nav4_flyout_update_on_resize') ? UpdatePopperOnContentResize : NoOpWrapper;
   return /*#__PURE__*/React.createElement(PopupContent, {
     appearance: "UNSAFE_modal-below-sm",
     onClose: handleClose,
@@ -55,18 +54,12 @@ export var FlyoutMenuItemContent = /*#__PURE__*/forwardRef(function (_ref, forwa
     shouldDisableGpuAcceleration: true
   }, function (_ref2) {
     var update = _ref2.update;
-    return /*#__PURE__*/React.createElement(InnerWrapper, {
+    return /*#__PURE__*/React.createElement(UpdatePopperOnContentResize, {
       ref: forwardedRef,
       update: update
     }, children);
   });
 });
-var NoOpWrapper = /*#__PURE__*/forwardRef(function (_ref3, forwardedRef) {
-  var children = _ref3.children;
-  return /*#__PURE__*/React.createElement("div", {
-    ref: forwardedRef
-  }, children);
-});
 function createResizeObserver(update) {
   return new ResizeObserver(update);
 }
@@ -83,9 +76,9 @@ function createResizeObserver(update) {
  * 3. Popup exposes the `update` function so consumers can already do this themselves if necessary
  * 4. Flyout menus are a lot more restricted to other popups, it might not make sense more generally
  */
-var UpdatePopperOnContentResize = /*#__PURE__*/forwardRef(function (_ref4, forwardedRef) {
-  var update = _ref4.update,
-    children = _ref4.children;
+var UpdatePopperOnContentResize = /*#__PURE__*/forwardRef(function (_ref3, forwardedRef) {
+  var update = _ref3.update,
+    children = _ref3.children;
   /**
    * Storing our `update` function in a ref so that we have a stable reference to it.
    * We need this because our `ResizeObserver` callback cannot be changed after creating it.

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

@@ -33,7 +33,7 @@ export declare function Panel({ children, defaultWidth, label, skipLinkLabel, te
      * Whether or not the slot has its own border. On small screens this becomes a shadow.
      *
      * Defaults to the `platform_design_system_nav4_panel_default_border` gate.
-     * This will be `false` while we update product usage, eventually becoming `true`.
+     * This will be `false` while we update app usage, eventually becoming `true`.
      * Then this prop will be removed.
      */
     hasBorder?: boolean;

package/dist/types-ts4.5/ui/page-layout/panel.d.ts

@@ -33,7 +33,7 @@ export declare function Panel({ children, defaultWidth, label, skipLinkLabel, te
      * Whether or not the slot has its own border. On small screens this becomes a shadow.
      *
      * Defaults to the `platform_design_system_nav4_panel_default_border` gate.
-     * This will be `false` while we update product usage, eventually becoming `true`.
+     * This will be `false` while we update app usage, eventually becoming `true`.
      * Then this prop will be removed.
      */
     hasBorder?: boolean;

package/examples/constellation/side-nav-items/link-menu-item.tsx

@@ -44,7 +44,7 @@ function MoreAction() {
 const linkMenuItemHref = '#example-href';
 
 export function LinkMenuItemExample() {
-	const [isMenuItemSelected, setIsMenuItemSelected] = useState(false);
+	const [showSelectedStateExample, setShowSelectedStateExample] = useState(false);
 	return (
 		<>
 			<Inline space="space.600">
@@ -70,13 +70,6 @@ export function LinkMenuItemExample() {
 							<LinkMenuItem href={linkMenuItemHref} elemBefore={COLLAPSE_ELEM_BEFORE}>
 								Link menu item (no elemBefore)
 							</LinkMenuItem>
-							<LinkMenuItem
-								href={linkMenuItemHref}
-								elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
-								isSelected={isMenuItemSelected}
-							>
-								Link menu item (selectable)
-							</LinkMenuItem>
 						</MenuList>
 					</SideNavContent>
 				</MockSideNav>
@@ -143,9 +136,24 @@ export function LinkMenuItemExample() {
 					</SideNavContent>
 				</MockSideNav>
 			</Inline>
-			<Button onClick={() => setIsMenuItemSelected(!isMenuItemSelected)}>
-				Toggle selected state example
+			<Button onClick={() => setShowSelectedStateExample(!showSelectedStateExample)}>
+				{showSelectedStateExample ? 'Hide' : 'Show'} selected state example
 			</Button>
+			{showSelectedStateExample && (
+				<MockSideNav>
+					<SideNavContent>
+						<MenuList>
+							<LinkMenuItem
+								href={linkMenuItemHref}
+								elemBefore={<HomeIcon label="" color="currentColor" spacing="spacious" />}
+								isSelected
+							>
+								Link menu item (selected state)
+							</LinkMenuItem>
+						</MenuList>
+					</SideNavContent>
+				</MockSideNav>
+			)}
 		</>
 	);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "0.180.0",
+	"version": "0.181.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -113,12 +113,12 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/avatar": "^25.1.0",
-		"@atlaskit/button": "^23.3.0",
+		"@atlaskit/button": "^23.4.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/ds-lib": "^5.0.0",
 		"@atlaskit/icon": "^27.12.0",
 		"@atlaskit/layering": "^3.0.0",
-		"@atlaskit/logo": "^19.6.0",
+		"@atlaskit/logo": "^19.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^4.3.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -146,7 +146,7 @@
 		"@atlaskit/banner": "^14.0.0",
 		"@atlaskit/breadcrumbs": "^15.3.0",
 		"@atlaskit/dropdown-menu": "^16.3.0",
-		"@atlaskit/form": "^12.0.0",
+		"@atlaskit/form": "^12.1.0",
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/lozenge": "^13.0.0",
@@ -214,9 +214,6 @@
 		"platform_dst_nav4_layering_in_main_slot_fixes": {
 			"type": "boolean"
 		},
-		"platform_dst_nav4_flyout_update_on_resize": {
-			"type": "boolean"
-		},
 		"platform_dst_nav4_flyout_use_capture_outside": {
 			"type": "boolean"
 		},