@atlaskit/navigation-system 2.11.0 → 2.12.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlassian/navigation-system
 
+## 2.12.0
+
+### Minor Changes
+
+- [`d19446c7cb076`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d19446c7cb076) -
+  FG cleanup jfp-magma-hydration-harmonise-applogo-classname
+
+## 2.11.1
+
+### Patch Changes
+
+- [`39e543109ec09`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/39e543109ec09) -
+  add type info to forwardRef components
+- Updated dependencies
+
 ## 2.11.0
 
 ### Minor Changes

package/dist/cjs/ui/top-nav-items/nav-logo/app-logo.js

@@ -12,16 +12,11 @@ var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@compiled/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
-var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
-var _primitives = require("@atlaskit/primitives");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _hasCustomThemeContext = require("../themed/has-custom-theme-context");
 var _logoRenderer = require("./logo-renderer");
 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 Anchor = (0, _platformFeatureFlagsReact.componentWithFG)('jfp-magma-hydration-harmonise-applogo-classname', _compiled.Anchor, _primitives.Anchor);
-var Inline = (0, _platformFeatureFlagsReact.componentWithFG)('jfp-magma-hydration-harmonise-applogo-classname', _compiled.Inline, _primitives.Inline);
-var Text = (0, _platformFeatureFlagsReact.componentWithFG)('jfp-magma-hydration-harmonise-applogo-classname', _compiled.Text, _primitives.Text);
 var anchorStyles = {
   root: "_2rko19bv _1e0c1txw _4cvr1h6o _4t3izwfg _1o9zidpf _ahbq1b66 _1toh1r31 _5jyqglyw _mrqmnqa1 _1w901kw7",
   interactionStates: "_irr3166n _1di61wwy",
@@ -69,7 +64,7 @@ var AppLogo = exports.AppLogo = function AppLogo(_ref) {
     var text = nameRef.current;
     return Boolean(text && isTextClamped(text));
   }, []);
-  return /*#__PURE__*/_react.default.createElement(Anchor, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Anchor, {
     ref: ref,
     "aria-label": label,
     href: href
@@ -78,7 +73,7 @@ var AppLogo = exports.AppLogo = function AppLogo(_ref) {
     ,
     xcss: (0, _react2.cx)(anchorStyles.root, hasCustomTheme ? anchorStyles.interactionStatesCustomTheming : anchorStyles.interactionStates, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && anchorStyles.fullHeightSidebar),
     onClick: onClick
-  }, /*#__PURE__*/_react.default.createElement(Inline, {
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
     space: "space.075",
     alignBlock: "center",
     xcss: (0, _react2.cx)(logoWrapperStyles.root, (0, _platformFeatureFlags.fg)('navx-full-height-sidebar') && logoWrapperStyles.fullHeightSidebar)
@@ -102,7 +97,7 @@ var AppLogo = exports.AppLogo = function AppLogo(_ref) {
     isScreenReaderAnnouncementDisabled: true,
     canAppear: canTooltipAppear
   }, function (tooltipProps) {
-    return /*#__PURE__*/_react.default.createElement("span", tooltipProps, /*#__PURE__*/_react.default.createElement(Text, {
+    return /*#__PURE__*/_react.default.createElement("span", tooltipProps, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
       "aria-hidden": true,
       color: "inherit",
       weight: "semibold",

package/dist/es2019/ui/top-nav-items/nav-logo/app-logo.js

@@ -4,17 +4,10 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
-import { Anchor as AnchorLegacy, Inline as InlineLegacy, Text as TextLegacy
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-} from '@atlaskit/primitives';
-import { Anchor as AnchorCompiled, Inline as InlineCompiled, Text as TextCompiled } from '@atlaskit/primitives/compiled';
+import { Anchor, Inline, Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { useHasCustomTheme } from '../themed/has-custom-theme-context';
 import { LogoRenderer } from './logo-renderer';
-const Anchor = componentWithFG('jfp-magma-hydration-harmonise-applogo-classname', AnchorCompiled, AnchorLegacy);
-const Inline = componentWithFG('jfp-magma-hydration-harmonise-applogo-classname', InlineCompiled, InlineLegacy);
-const Text = componentWithFG('jfp-magma-hydration-harmonise-applogo-classname', TextCompiled, TextLegacy);
 const anchorStyles = {
   root: "_2rko19bv _1e0c1txw _4cvr1h6o _4t3izwfg _1o9zidpf _ahbq1b66 _1toh1r31 _5jyqglyw _mrqmnqa1 _1w901kw7",
   interactionStates: "_irr3166n _1di61wwy",

package/dist/esm/ui/top-nav-items/nav-logo/app-logo.js

@@ -4,17 +4,10 @@ import { ax, ix } from "@compiled/react/runtime";
 import React, { useCallback, useRef } from 'react';
 import { cx } from '@compiled/react';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { componentWithFG } from '@atlaskit/platform-feature-flags-react';
-import { Anchor as AnchorLegacy, Inline as InlineLegacy, Text as TextLegacy
-// eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
-} from '@atlaskit/primitives';
-import { Anchor as AnchorCompiled, Inline as InlineCompiled, Text as TextCompiled } from '@atlaskit/primitives/compiled';
+import { Anchor, Inline, Text } from '@atlaskit/primitives/compiled';
 import Tooltip from '@atlaskit/tooltip';
 import { useHasCustomTheme } from '../themed/has-custom-theme-context';
 import { LogoRenderer } from './logo-renderer';
-var Anchor = componentWithFG('jfp-magma-hydration-harmonise-applogo-classname', AnchorCompiled, AnchorLegacy);
-var Inline = componentWithFG('jfp-magma-hydration-harmonise-applogo-classname', InlineCompiled, InlineLegacy);
-var Text = componentWithFG('jfp-magma-hydration-harmonise-applogo-classname', TextCompiled, TextLegacy);
 var anchorStyles = {
   root: "_2rko19bv _1e0c1txw _4cvr1h6o _4t3izwfg _1o9zidpf _ahbq1b66 _1toh1r31 _5jyqglyw _mrqmnqa1 _1w901kw7",
   interactionStates: "_irr3166n _1di61wwy",

package/dist/types/components/list-item.d.ts

@@ -23,5 +23,5 @@ type ListItemProps = {
  *
  * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
  */
-export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ListItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<ListItemProps> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/types/components/list.d.ts

@@ -25,4 +25,4 @@ export type ListProps = {
  *
  * This is the internal primitive used by other external components in the navigation system.
  */
-export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const List: React.ForwardRefExoticComponent<React.PropsWithoutRef<ListProps> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/ui/menu-item/button-menu-item.d.ts

@@ -30,26 +30,4 @@ export type ButtonMenuItemProps = MenuItemLinkOrButtonCommonProps & {
  *
  * A menu item button. It should be used within a `ul`, as it renders a list item.
  */
-export declare const ButtonMenuItem: React.ForwardRefExoticComponent<import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
-    description?: string;
-    listItemRef?: React.Ref<HTMLDivElement>;
-} & {
-    /**
-     * We are not using a discriminated union to enforce that the `actions` and `actionsOnHover`
-     * props are not used when `isDisabled` is true due to ergonomic type issues with `boolean`
-     * types (as oppposed to literal `true` or `false` types), e.g. if a conditional boolean
-     * variable is passed to `isDisabled`.
-     */
-    /**
-     * Whether the menu item is disabled.
-     *
-     * When disabled, content in the `actions` and `actionsOnHover` props will not be rendered.
-     *
-     * The menu item will not be interactive and will not respond to hover or focus.
-     */
-    isDisabled?: boolean;
-    /**
-     * Called when the user has clicked on the trigger content.
-     */
-    onClick?: MenuItemOnClick<HTMLButtonElement>;
-} & React.RefAttributes<HTMLButtonElement>>;
+export declare const ButtonMenuItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<ButtonMenuItemProps> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item-content.d.ts

@@ -14,4 +14,4 @@ export type ExpandableMenuItemContentProps = {
  *
  * The expandable and collapsable section of the expandable menu item. It should contain the nested menu items.
  */
-export declare const ExpandableMenuItemContent: import("react").ForwardRefExoticComponent<ExpandableMenuItemContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ExpandableMenuItemContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<ExpandableMenuItemContentProps> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.d.ts

@@ -65,57 +65,4 @@ export type ExpandableMenuItemTriggerProps = MenuItemCommonProps & Omit<MenuItem
  *
  * The trigger component for an `ExpandableMenuItem`. Interacting with it will expand or collapse the expandable.
  */
-export declare const ExpandableMenuItemTrigger: React.ForwardRefExoticComponent<MenuItemCommonProps & Omit<MenuItemSlots, "actionsOnHover" | "elemBefore"> & {
-    /**
-     * `ReactNode` to be placed visually after the `children` and will
-     * only be displayed on hover or focus, or when the expandable menu item
-     * is expanded.
-     *
-     * It is intended for additional actions (e.g. IconButtons).
-     *
-     * This `ReactNode` will replace `elemAfter` on hover/focus or when expanded.
-     *
-     * This `ReactNode` will be rendered visually on top of the main
-     * interactive element for the menu item. If this element does not
-     * contain an interactive element (`button` or `a`) then `pointer-events`
-     * will be set to `none` on this slot so that users can click through
-     * this element onto the main interactive element of the menu item.
-     */
-    actionsOnHover?: ReactNode;
-    /**
-     * The element to display before the content of the menu item.
-     *
-     * By default, a chevron icon will be displayed in this slot. If a custom `elemBefore`
-     * is provided, the custom element will replaced by the chevron icon while the user is
-     * hovering or focused on the item.
-     *
-     * `ExpandableMenuItemTrigger` does not respect `COLLAPSE_ELEM_BEFORE` as a chevron
-     * will always be displayed.
-     */
-    elemBefore?: ReactNode;
-    /**
-     * Indicates that the menu item is selected.
-     */
-    isSelected?: boolean;
-    /**
-     * If provided, the chevron icon (expand/collapse symbol) will be rendered within a separate
-     * icon button element. Clicking on this icon button will not trigger the `onClick` event. It
-     * will only expand or collapse the expandable.
-     *
-     * If a `href` is not provided, the chevron icon is rendered as part of the element.
-     */
-    href?: string;
-    /**
-     * Called when the user has clicked on the trigger content.
-     *
-     * __It is not called when the user clicks on the expand/collapse chevron icon button.__
-     * This is to differentiate a click that will only "expand" the menu item _without selecting it_,
-     * from a click to expand _and_ "select" or navigate to the menu item.
-     *
-     * If you need a callback for when the user expands or collapses the expandable, use
-     * `onExpansionToggle` on the `ExpandableMenuItem` component instead.
-     */
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent, analyticsAttributes: {
-        isExpanded: boolean;
-    }) => void;
-} & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export declare const ExpandableMenuItemTrigger: React.ForwardRefExoticComponent<React.PropsWithoutRef<ExpandableMenuItemTriggerProps> & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

package/dist/types/ui/menu-item/expandable-menu-item/expandable-menu-item.d.ts

@@ -62,4 +62,4 @@ export type ExpandableMenuItemProps = {
  * </ExpandableMenuItem>
  * ```
  */
-export declare const ExpandableMenuItem: import("react").ForwardRefExoticComponent<ExpandableMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ExpandableMenuItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<ExpandableMenuItemProps> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/ui/menu-item/flyout-menu-item/flyout-menu-item-content.d.ts

@@ -29,4 +29,4 @@ export type FlyoutMenuItemContentProps = {
  *
  * The content that appears when the flyout menu is open.
  */
-export declare const FlyoutMenuItemContent: React.ForwardRefExoticComponent<FlyoutMenuItemContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FlyoutMenuItemContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<FlyoutMenuItemContentProps> & React.RefAttributes<HTMLDivElement>>;

package/dist/types/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.d.ts

@@ -47,40 +47,4 @@ export type FlyoutMenuItemTriggerProps = MenuItemCommonProps & {
  *
  * The button that toggles the flyout menu.
  */
-export declare const FlyoutMenuItemTrigger: import("react").ForwardRefExoticComponent<MenuItemCommonProps & {
-    /**
-     * `ReactNode` to be placed visually before the `children`.
-     *
-     * This `ReactNode` will be rendered visually on top of the main
-     * interactive element for the menu item. If this element does not
-     * contain an interactive element (`button` or `a`) then `pointer-events`
-     * will be set to `none` on this slot so that users can click through
-     * this element onto the main interactive element of the menu item.
-     *
-     * If you want to collapse the `elemBefore` so it takes up no space,
-     * then pass in the `COLLAPSE_ELEM_BEFORE` symbol. Keep in mind that
-     * collapsing the `elemBefore` can break visual alignment and
-     * will make it difficult for users to visually distinguish levels
-     * in the side navigation.
-     *
-     * @example
-     *
-     * ```tsx
-     * <FlyoutMenuItemTrigger elemBefore={<HomeIcon label="home" />}>Home</FlyoutMenuItemTrigger>
-     *
-     * // collapse the elemBefore
-     * <FlyoutMenuItemTrigger elemBefore={COLLAPSE_ELEM_BEFORE}>Home</FlyoutMenuItemTrigger>
-     * ```
-     */
-    elemBefore?: ReactNode | COLLAPSE_ELEM_BEFORE_TYPE;
-    /**
-     * Called when the user has clicked on the trigger.
-     *
-     * If you are controlling the open state of the flyout menu, use this to update your state.
-     */
-    onClick?: MenuItemOnClick<HTMLButtonElement>;
-    /**
-     * Indicates that the menu item is selected.
-     */
-    isSelected?: boolean;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const FlyoutMenuItemTrigger: React.ForwardRefExoticComponent<React.PropsWithoutRef<FlyoutMenuItemTriggerProps> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/ui/menu-item/flyout-menu-item/flyout-menu-item.d.ts

@@ -49,4 +49,4 @@ export type FlyoutMenuItemProps = {
  * </FlyoutMenuItem>
  * ```
  */
-export declare const FlyoutMenuItem: React.ForwardRefExoticComponent<FlyoutMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FlyoutMenuItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<FlyoutMenuItemProps> & React.RefAttributes<HTMLDivElement>>;

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

@@ -9,7 +9,7 @@ import React, { type ReactNode } from 'react';
  * It will grow to take up the available space in the side nav — this is used to push the footer to the
  * bottom of the side nav.
  */
-export declare const SideNavContent: React.ForwardRefExoticComponent<SideNavContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SideNavContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<SideNavContentProps> & React.RefAttributes<HTMLDivElement>>;
 type SideNavContentProps = {
     /**
      * The content of the layout area.

package/dist/types/ui/top-nav-items/app-switcher.d.ts

@@ -28,5 +28,5 @@ interface AppSwitcherProps extends Partial<Omit<TriggerProps, 'ref' | 'data-ds--
  *
  * The trigger button for the app switcher. Allows users to switch between Atlassian products.
  */
-export declare const AppSwitcher: React.ForwardRefExoticComponent<AppSwitcherProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const AppSwitcher: React.ForwardRefExoticComponent<React.PropsWithoutRef<AppSwitcherProps> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types/ui/top-nav-items/create-button.d.ts

@@ -26,5 +26,5 @@ type CreateButtonProps = {
  *
  * The create button for the top navigation.
  */
-export declare const CreateButton: React.ForwardRefExoticComponent<CreateButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const CreateButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<CreateButtonProps> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types/ui/top-nav-items/custom-title.d.ts

@@ -19,5 +19,5 @@ type CustomTitleProps = {
  * A custom site title to be displayed in the top navigation, to the right of the logo.
  * It is hidden on smaller viewports.
  */
-export declare const CustomTitle: import("react").ForwardRefExoticComponent<CustomTitleProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CustomTitle: React.ForwardRefExoticComponent<React.PropsWithoutRef<CustomTitleProps> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/types/ui/top-nav-items/end-item.d.ts

@@ -70,4 +70,4 @@ export interface EndItemProps extends Partial<Pick<TriggerProps, 'aria-controls'
  *
  * For common actions, like `Notifications`, `Help`, `Profile`, `Settings`, use the provided components as appropriate.
  */
-export declare const EndItem: React.ForwardRefExoticComponent<EndItemProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const EndItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<EndItemProps> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types/ui/top-nav-items/help.d.ts

@@ -15,5 +15,5 @@ interface HelpProps extends Omit<EndItemProps, 'icon' | 'aria-controls' | 'aria-
  *
  * The trigger button for the help menu in the top navigation bar.
  */
-export declare const Help: React.ForwardRefExoticComponent<HelpProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Help: React.ForwardRefExoticComponent<React.PropsWithoutRef<HelpProps> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types/ui/top-nav-items/log-in.d.ts

@@ -32,5 +32,5 @@ interface LogInProps extends Pick<AnchorProps, 'href'> {
  *
  * The Log in button for the top navigation.
  */
-export declare const LogIn: React.ForwardRefExoticComponent<LogInProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const LogIn: React.ForwardRefExoticComponent<React.PropsWithoutRef<LogInProps> & React.RefAttributes<HTMLAnchorElement>>;
 export {};

package/dist/types/ui/top-nav-items/notifications.d.ts

@@ -12,5 +12,5 @@ interface NotificationsProps extends Omit<EndItemProps, 'icon'> {
  *
  * The trigger button for the notifications menu in the top navigation bar.
  */
-export declare const Notifications: React.ForwardRefExoticComponent<NotificationsProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Notifications: React.ForwardRefExoticComponent<React.PropsWithoutRef<NotificationsProps> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types/ui/top-nav-items/profile.d.ts

@@ -11,5 +11,5 @@ interface ProfileProps extends Omit<EndItemProps, 'icon'> {
  *
  * The Profile button for the top navigation.
  */
-export declare const Profile: React.ForwardRefExoticComponent<ProfileProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Profile: React.ForwardRefExoticComponent<React.PropsWithoutRef<ProfileProps> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types/ui/top-nav-items/settings.d.ts

@@ -7,5 +7,5 @@ interface SettingsProps extends Omit<EndItemProps, 'icon'> {
  *
  * The Settings button for the top navigation.
  */
-export declare const Settings: React.ForwardRefExoticComponent<SettingsProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Settings: React.ForwardRefExoticComponent<React.PropsWithoutRef<SettingsProps> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types/ui/top-nav-items/themed/button.d.ts

@@ -80,7 +80,7 @@ export interface ThemedButtonProps extends ActionVariantCommonProps, TextButtonC
  *
  * A themed button for the top bar.
  */
-export declare const ThemedButton: React.ForwardRefExoticComponent<Omit<ThemedButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ThemedButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedButtonProps> & React.RefAttributes<HTMLButtonElement>>;
 export interface ThemedLinkButtonProps<RouterLinkConfig extends Record<string, any> = never> extends LinkVariantCommonProps<RouterLinkConfig>, TextButtonCommonProps {
 }
 /**
@@ -115,7 +115,7 @@ export interface ThemedIconButtonProps extends ActionVariantCommonProps, IconBut
  *
  * A themed icon button for the top bar.
  */
-export declare const ThemedIconButton: React.ForwardRefExoticComponent<Omit<ThemedIconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ThemedIconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedIconButtonProps> & React.RefAttributes<HTMLButtonElement>>;
 export interface ThemedLinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> extends LinkVariantCommonProps<RouterLinkConfig>, IconButtonCommonProps {
     href: string | RouterLinkConfig;
 }

package/dist/types/ui/top-nav-items/themed/migration.d.ts

@@ -3,8 +3,8 @@ import { type ThemedButtonProps, type ThemedIconButtonProps, type ThemedLinkButt
 type IconButtonMigrationProps = {
     isTooltipDisabled?: boolean;
 };
-declare const IconButton: React.ForwardRefExoticComponent<Omit<ThemedIconButtonProps & IconButtonMigrationProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const LinkIconButton: React.ForwardRefExoticComponent<Omit<ThemedLinkIconButtonProps<never> & IconButtonMigrationProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-declare const Button: React.ForwardRefExoticComponent<Omit<ThemedButtonProps & IconButtonMigrationProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const LinkButton: React.ForwardRefExoticComponent<Omit<ThemedLinkButtonProps<never>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const IconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedIconButtonProps & IconButtonMigrationProps> & React.RefAttributes<HTMLButtonElement>>;
+declare const LinkIconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedLinkIconButtonProps & IconButtonMigrationProps> & React.RefAttributes<HTMLAnchorElement>>;
+declare const Button: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedButtonProps & IconButtonMigrationProps> & React.RefAttributes<HTMLButtonElement>>;
+declare const LinkButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedLinkButtonProps> & React.RefAttributes<HTMLAnchorElement>>;
 export { IconButton, Button, LinkIconButton, LinkButton };

package/dist/types-ts4.5/components/list-item.d.ts

@@ -23,5 +23,5 @@ type ListItemProps = {
  *
  * A [list item](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) with visual styles removed.
  */
-export declare const ListItem: import("react").ForwardRefExoticComponent<ListItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ListItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<ListItemProps> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/types-ts4.5/components/list.d.ts

@@ -25,4 +25,4 @@ export type ListProps = {
  *
  * This is the internal primitive used by other external components in the navigation system.
  */
-export declare const List: import("react").ForwardRefExoticComponent<ListProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const List: React.ForwardRefExoticComponent<React.PropsWithoutRef<ListProps> & React.RefAttributes<HTMLDivElement>>;

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

@@ -30,26 +30,4 @@ export type ButtonMenuItemProps = MenuItemLinkOrButtonCommonProps & {
  *
  * A menu item button. It should be used within a `ul`, as it renders a list item.
  */
-export declare const ButtonMenuItem: React.ForwardRefExoticComponent<import("./types").MenuItemCommonProps & import("./types").MenuItemSlots & {
-    description?: string;
-    listItemRef?: React.Ref<HTMLDivElement>;
-} & {
-    /**
-     * We are not using a discriminated union to enforce that the `actions` and `actionsOnHover`
-     * props are not used when `isDisabled` is true due to ergonomic type issues with `boolean`
-     * types (as oppposed to literal `true` or `false` types), e.g. if a conditional boolean
-     * variable is passed to `isDisabled`.
-     */
-    /**
-     * Whether the menu item is disabled.
-     *
-     * When disabled, content in the `actions` and `actionsOnHover` props will not be rendered.
-     *
-     * The menu item will not be interactive and will not respond to hover or focus.
-     */
-    isDisabled?: boolean;
-    /**
-     * Called when the user has clicked on the trigger content.
-     */
-    onClick?: MenuItemOnClick<HTMLButtonElement>;
-} & React.RefAttributes<HTMLButtonElement>>;
+export declare const ButtonMenuItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<ButtonMenuItemProps> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types-ts4.5/ui/menu-item/expandable-menu-item/expandable-menu-item-content.d.ts

@@ -14,4 +14,4 @@ export type ExpandableMenuItemContentProps = {
  *
  * The expandable and collapsable section of the expandable menu item. It should contain the nested menu items.
  */
-export declare const ExpandableMenuItemContent: import("react").ForwardRefExoticComponent<ExpandableMenuItemContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ExpandableMenuItemContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<ExpandableMenuItemContentProps> & React.RefAttributes<HTMLDivElement>>;

package/dist/types-ts4.5/ui/menu-item/expandable-menu-item/expandable-menu-item-trigger.d.ts

@@ -65,57 +65,4 @@ export type ExpandableMenuItemTriggerProps = MenuItemCommonProps & Omit<MenuItem
  *
  * The trigger component for an `ExpandableMenuItem`. Interacting with it will expand or collapse the expandable.
  */
-export declare const ExpandableMenuItemTrigger: React.ForwardRefExoticComponent<MenuItemCommonProps & Omit<MenuItemSlots, "actionsOnHover" | "elemBefore"> & {
-    /**
-     * `ReactNode` to be placed visually after the `children` and will
-     * only be displayed on hover or focus, or when the expandable menu item
-     * is expanded.
-     *
-     * It is intended for additional actions (e.g. IconButtons).
-     *
-     * This `ReactNode` will replace `elemAfter` on hover/focus or when expanded.
-     *
-     * This `ReactNode` will be rendered visually on top of the main
-     * interactive element for the menu item. If this element does not
-     * contain an interactive element (`button` or `a`) then `pointer-events`
-     * will be set to `none` on this slot so that users can click through
-     * this element onto the main interactive element of the menu item.
-     */
-    actionsOnHover?: ReactNode;
-    /**
-     * The element to display before the content of the menu item.
-     *
-     * By default, a chevron icon will be displayed in this slot. If a custom `elemBefore`
-     * is provided, the custom element will replaced by the chevron icon while the user is
-     * hovering or focused on the item.
-     *
-     * `ExpandableMenuItemTrigger` does not respect `COLLAPSE_ELEM_BEFORE` as a chevron
-     * will always be displayed.
-     */
-    elemBefore?: ReactNode;
-    /**
-     * Indicates that the menu item is selected.
-     */
-    isSelected?: boolean;
-    /**
-     * If provided, the chevron icon (expand/collapse symbol) will be rendered within a separate
-     * icon button element. Clicking on this icon button will not trigger the `onClick` event. It
-     * will only expand or collapse the expandable.
-     *
-     * If a `href` is not provided, the chevron icon is rendered as part of the element.
-     */
-    href?: string;
-    /**
-     * Called when the user has clicked on the trigger content.
-     *
-     * __It is not called when the user clicks on the expand/collapse chevron icon button.__
-     * This is to differentiate a click that will only "expand" the menu item _without selecting it_,
-     * from a click to expand _and_ "select" or navigate to the menu item.
-     *
-     * If you need a callback for when the user expands or collapses the expandable, use
-     * `onExpansionToggle` on the `ExpandableMenuItem` component instead.
-     */
-    onClick?: (event: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent, analyticsAttributes: {
-        isExpanded: boolean;
-    }) => void;
-} & React.RefAttributes<HTMLAnchorElement | HTMLButtonElement>>;
+export declare const ExpandableMenuItemTrigger: React.ForwardRefExoticComponent<React.PropsWithoutRef<ExpandableMenuItemTriggerProps> & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;

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

@@ -62,4 +62,4 @@ export type ExpandableMenuItemProps = {
  * </ExpandableMenuItem>
  * ```
  */
-export declare const ExpandableMenuItem: import("react").ForwardRefExoticComponent<ExpandableMenuItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ExpandableMenuItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<ExpandableMenuItemProps> & React.RefAttributes<HTMLDivElement>>;

package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-menu-item-content.d.ts

@@ -29,4 +29,4 @@ export type FlyoutMenuItemContentProps = {
  *
  * The content that appears when the flyout menu is open.
  */
-export declare const FlyoutMenuItemContent: React.ForwardRefExoticComponent<FlyoutMenuItemContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FlyoutMenuItemContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<FlyoutMenuItemContentProps> & React.RefAttributes<HTMLDivElement>>;

package/dist/types-ts4.5/ui/menu-item/flyout-menu-item/flyout-menu-item-trigger.d.ts

@@ -47,40 +47,4 @@ export type FlyoutMenuItemTriggerProps = MenuItemCommonProps & {
  *
  * The button that toggles the flyout menu.
  */
-export declare const FlyoutMenuItemTrigger: import("react").ForwardRefExoticComponent<MenuItemCommonProps & {
-    /**
-     * `ReactNode` to be placed visually before the `children`.
-     *
-     * This `ReactNode` will be rendered visually on top of the main
-     * interactive element for the menu item. If this element does not
-     * contain an interactive element (`button` or `a`) then `pointer-events`
-     * will be set to `none` on this slot so that users can click through
-     * this element onto the main interactive element of the menu item.
-     *
-     * If you want to collapse the `elemBefore` so it takes up no space,
-     * then pass in the `COLLAPSE_ELEM_BEFORE` symbol. Keep in mind that
-     * collapsing the `elemBefore` can break visual alignment and
-     * will make it difficult for users to visually distinguish levels
-     * in the side navigation.
-     *
-     * @example
-     *
-     * ```tsx
-     * <FlyoutMenuItemTrigger elemBefore={<HomeIcon label="home" />}>Home</FlyoutMenuItemTrigger>
-     *
-     * // collapse the elemBefore
-     * <FlyoutMenuItemTrigger elemBefore={COLLAPSE_ELEM_BEFORE}>Home</FlyoutMenuItemTrigger>
-     * ```
-     */
-    elemBefore?: ReactNode | COLLAPSE_ELEM_BEFORE_TYPE;
-    /**
-     * Called when the user has clicked on the trigger.
-     *
-     * If you are controlling the open state of the flyout menu, use this to update your state.
-     */
-    onClick?: MenuItemOnClick<HTMLButtonElement>;
-    /**
-     * Indicates that the menu item is selected.
-     */
-    isSelected?: boolean;
-} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const FlyoutMenuItemTrigger: React.ForwardRefExoticComponent<React.PropsWithoutRef<FlyoutMenuItemTriggerProps> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -49,4 +49,4 @@ export type FlyoutMenuItemProps = {
  * </FlyoutMenuItem>
  * ```
  */
-export declare const FlyoutMenuItem: React.ForwardRefExoticComponent<FlyoutMenuItemProps & React.RefAttributes<HTMLDivElement>>;
+export declare const FlyoutMenuItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<FlyoutMenuItemProps> & React.RefAttributes<HTMLDivElement>>;

package/dist/types-ts4.5/ui/page-layout/side-nav/side-nav-content.d.ts

@@ -9,7 +9,7 @@ import React, { type ReactNode } from 'react';
  * It will grow to take up the available space in the side nav — this is used to push the footer to the
  * bottom of the side nav.
  */
-export declare const SideNavContent: React.ForwardRefExoticComponent<SideNavContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare const SideNavContent: React.ForwardRefExoticComponent<React.PropsWithoutRef<SideNavContentProps> & React.RefAttributes<HTMLDivElement>>;
 type SideNavContentProps = {
     /**
      * The content of the layout area.

package/dist/types-ts4.5/ui/top-nav-items/app-switcher.d.ts

@@ -28,5 +28,5 @@ interface AppSwitcherProps extends Partial<Omit<TriggerProps, 'ref' | 'data-ds--
  *
  * The trigger button for the app switcher. Allows users to switch between Atlassian products.
  */
-export declare const AppSwitcher: React.ForwardRefExoticComponent<AppSwitcherProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const AppSwitcher: React.ForwardRefExoticComponent<React.PropsWithoutRef<AppSwitcherProps> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types-ts4.5/ui/top-nav-items/create-button.d.ts

@@ -26,5 +26,5 @@ type CreateButtonProps = {
  *
  * The create button for the top navigation.
  */
-export declare const CreateButton: React.ForwardRefExoticComponent<CreateButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const CreateButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<CreateButtonProps> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types-ts4.5/ui/top-nav-items/custom-title.d.ts

@@ -19,5 +19,5 @@ type CustomTitleProps = {
  * A custom site title to be displayed in the top navigation, to the right of the logo.
  * It is hidden on smaller viewports.
  */
-export declare const CustomTitle: import("react").ForwardRefExoticComponent<CustomTitleProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const CustomTitle: React.ForwardRefExoticComponent<React.PropsWithoutRef<CustomTitleProps> & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/types-ts4.5/ui/top-nav-items/end-item.d.ts

@@ -70,4 +70,4 @@ export interface EndItemProps extends Partial<Pick<TriggerProps, 'aria-controls'
  *
  * For common actions, like `Notifications`, `Help`, `Profile`, `Settings`, use the provided components as appropriate.
  */
-export declare const EndItem: React.ForwardRefExoticComponent<EndItemProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const EndItem: React.ForwardRefExoticComponent<React.PropsWithoutRef<EndItemProps> & React.RefAttributes<HTMLButtonElement>>;

package/dist/types-ts4.5/ui/top-nav-items/help.d.ts

@@ -15,5 +15,5 @@ interface HelpProps extends Omit<EndItemProps, 'icon' | 'aria-controls' | 'aria-
  *
  * The trigger button for the help menu in the top navigation bar.
  */
-export declare const Help: React.ForwardRefExoticComponent<HelpProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Help: React.ForwardRefExoticComponent<React.PropsWithoutRef<HelpProps> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types-ts4.5/ui/top-nav-items/log-in.d.ts

@@ -32,5 +32,5 @@ interface LogInProps extends Pick<AnchorProps, 'href'> {
  *
  * The Log in button for the top navigation.
  */
-export declare const LogIn: React.ForwardRefExoticComponent<LogInProps & React.RefAttributes<HTMLAnchorElement>>;
+export declare const LogIn: React.ForwardRefExoticComponent<React.PropsWithoutRef<LogInProps> & React.RefAttributes<HTMLAnchorElement>>;
 export {};

package/dist/types-ts4.5/ui/top-nav-items/notifications.d.ts

@@ -12,5 +12,5 @@ interface NotificationsProps extends Omit<EndItemProps, 'icon'> {
  *
  * The trigger button for the notifications menu in the top navigation bar.
  */
-export declare const Notifications: React.ForwardRefExoticComponent<NotificationsProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Notifications: React.ForwardRefExoticComponent<React.PropsWithoutRef<NotificationsProps> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types-ts4.5/ui/top-nav-items/profile.d.ts

@@ -11,5 +11,5 @@ interface ProfileProps extends Omit<EndItemProps, 'icon'> {
  *
  * The Profile button for the top navigation.
  */
-export declare const Profile: React.ForwardRefExoticComponent<ProfileProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Profile: React.ForwardRefExoticComponent<React.PropsWithoutRef<ProfileProps> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types-ts4.5/ui/top-nav-items/settings.d.ts

@@ -7,5 +7,5 @@ interface SettingsProps extends Omit<EndItemProps, 'icon'> {
  *
  * The Settings button for the top navigation.
  */
-export declare const Settings: React.ForwardRefExoticComponent<SettingsProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const Settings: React.ForwardRefExoticComponent<React.PropsWithoutRef<SettingsProps> & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/types-ts4.5/ui/top-nav-items/themed/button.d.ts

@@ -80,7 +80,7 @@ export interface ThemedButtonProps extends ActionVariantCommonProps, TextButtonC
  *
  * A themed button for the top bar.
  */
-export declare const ThemedButton: React.ForwardRefExoticComponent<Omit<ThemedButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ThemedButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedButtonProps> & React.RefAttributes<HTMLButtonElement>>;
 export interface ThemedLinkButtonProps<RouterLinkConfig extends Record<string, any> = never> extends LinkVariantCommonProps<RouterLinkConfig>, TextButtonCommonProps {
 }
 /**
@@ -115,7 +115,7 @@ export interface ThemedIconButtonProps extends ActionVariantCommonProps, IconBut
  *
  * A themed icon button for the top bar.
  */
-export declare const ThemedIconButton: React.ForwardRefExoticComponent<Omit<ThemedIconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const ThemedIconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedIconButtonProps> & React.RefAttributes<HTMLButtonElement>>;
 export interface ThemedLinkIconButtonProps<RouterLinkConfig extends Record<string, any> = never> extends LinkVariantCommonProps<RouterLinkConfig>, IconButtonCommonProps {
     href: string | RouterLinkConfig;
 }

package/dist/types-ts4.5/ui/top-nav-items/themed/migration.d.ts

@@ -3,8 +3,8 @@ import { type ThemedButtonProps, type ThemedIconButtonProps, type ThemedLinkButt
 type IconButtonMigrationProps = {
     isTooltipDisabled?: boolean;
 };
-declare const IconButton: React.ForwardRefExoticComponent<Omit<ThemedIconButtonProps & IconButtonMigrationProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const LinkIconButton: React.ForwardRefExoticComponent<Omit<ThemedLinkIconButtonProps<never> & IconButtonMigrationProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
-declare const Button: React.ForwardRefExoticComponent<Omit<ThemedButtonProps & IconButtonMigrationProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-declare const LinkButton: React.ForwardRefExoticComponent<Omit<ThemedLinkButtonProps<never>, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+declare const IconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedIconButtonProps & IconButtonMigrationProps> & React.RefAttributes<HTMLButtonElement>>;
+declare const LinkIconButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedLinkIconButtonProps & IconButtonMigrationProps> & React.RefAttributes<HTMLAnchorElement>>;
+declare const Button: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedButtonProps & IconButtonMigrationProps> & React.RefAttributes<HTMLButtonElement>>;
+declare const LinkButton: React.ForwardRefExoticComponent<React.PropsWithoutRef<ThemedLinkButtonProps> & React.RefAttributes<HTMLAnchorElement>>;
 export { IconButton, Button, LinkIconButton, LinkButton };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/navigation-system",
-	"version": "2.11.0",
+	"version": "2.12.0",
 	"description": "The latest navigation system for Atlassian apps.",
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"author": "Atlassian Pty Ltd",
@@ -75,7 +75,6 @@
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/logo": "^19.7.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/platform-feature-flags-react": "^0.3.0",
 		"@atlaskit/popup": "^4.4.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
@@ -118,7 +117,7 @@
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@atlassian/gemini": "^1.20.0",
-		"@atlassian/search-dialog": "^9.6.0",
+		"@atlassian/search-dialog": "^9.7.0",
 		"@atlassian/ssr-tests": "^0.3.0",
 		"@axe-core/playwright": "^4.8.0",
 		"@testing-library/react": "^13.4.0",
@@ -147,9 +146,6 @@
 		}
 	},
 	"platform-feature-flags": {
-		"jfp-magma-hydration-harmonise-applogo-classname": {
-			"type": "boolean"
-		},
 		"platform-component-visual-refresh": {
 			"type": "boolean",
 			"referenceOnly": true