@red-hat-developer-hub/backstage-plugin-global-header 1.21.0 → 1.21.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @red-hat-developer-hub/backstage-plugin-global-header
 
+## 1.21.1
+
+### Patch Changes
+
+- 351d260: Fixed the css issue when drawer opens, fixed the validity check bug
+
 ## 1.21.0
 
 ### Minor Changes

package/dist/alpha/components/GlobalHeader.esm.js

@@ -7,16 +7,29 @@ import { useGlobalHeaderComponents } from '../extensions/GlobalHeaderContext.esm
 
 const GlobalHeader = () => {
   const components = useGlobalHeaderComponents();
-  return /* @__PURE__ */ jsx(AppBar, { position: "sticky", component: "nav", id: "global-header", children: /* @__PURE__ */ jsx(
-    Toolbar,
+  return /* @__PURE__ */ jsx(
+    AppBar,
     {
+      position: "sticky",
+      component: "nav",
+      id: "global-header",
       sx: {
-        gap: 1,
-        color: (theme) => theme.rhdh?.general?.appBarForegroundColor ?? theme.palette.text.primary
+        width: "auto",
+        marginRight: "var(--docked-drawer-width, 0px)",
+        transition: "margin-right 225ms cubic-bezier(0, 0, 0.2, 1)"
       },
-      children: components.map((item, index) => /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Box, { sx: item.layout, children: /* @__PURE__ */ jsx(item.component, {}) }) }, `gh-component-${index}`))
+      children: /* @__PURE__ */ jsx(
+        Toolbar,
+        {
+          sx: {
+            gap: 1,
+            color: (theme) => theme.rhdh?.general?.appBarForegroundColor ?? theme.palette.text.primary
+          },
+          children: components.map((item, index) => /* @__PURE__ */ jsx(ErrorBoundary, { children: /* @__PURE__ */ jsx(Box, { sx: item.layout, children: /* @__PURE__ */ jsx(item.component, {}) }) }, `gh-component-${index}`))
+        }
+      )
     }
-  ) });
+  );
 };
 
 export { GlobalHeader };

package/dist/alpha/components/GlobalHeader.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalHeader.esm.js","sources":["../../../src/alpha/components/GlobalHeader.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ErrorBoundary } from '@backstage/core-components';\n\nimport AppBar from '@mui/material/AppBar';\nimport Box from '@mui/material/Box';\nimport Toolbar from '@mui/material/Toolbar';\n\nimport { useGlobalHeaderComponents } from '../extensions/GlobalHeaderContext';\n\n/**\n * Global header bar. Reads toolbar items from GlobalHeaderContext\n * and renders them in a sticky AppBar.\n *\n * @alpha\n */\nexport const GlobalHeader = () => {\n  const components = useGlobalHeaderComponents();\n\n  return (\n    <AppBar position=\"sticky\" component=\"nav\" id=\"global-header\">\n      <Toolbar\n        sx={{\n          gap: 1,\n          color: theme =>\n            (theme as any).rhdh?.general?.appBarForegroundColor ??\n            theme.palette.text.primary,\n        }}\n      >\n        {components.map((item, index) => (\n          <ErrorBoundary key={`gh-component-${index}`}>\n            <Box sx={item.layout}>\n              <item.component />\n            </Box>\n          </ErrorBoundary>\n        ))}\n      </Toolbar>\n    </AppBar>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA8BO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,aAAa,yBAA0B,EAAA;AAE7C,EAAA,2BACG,MAAO,EAAA,EAAA,QAAA,EAAS,UAAS,SAAU,EAAA,KAAA,EAAM,IAAG,eAC3C,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,GAAK,EAAA,CAAA;AAAA,QACL,KAAA,EAAO,WACJ,KAAc,CAAA,IAAA,EAAM,SAAS,qBAC9B,IAAA,KAAA,CAAM,QAAQ,IAAK,CAAA;AAAA,OACvB;AAAA,MAEC,QAAA,EAAA,UAAA,CAAW,IAAI,CAAC,IAAA,EAAM,0BACpB,GAAA,CAAA,aAAA,EAAA,EACC,8BAAC,GAAI,EAAA,EAAA,EAAA,EAAI,KAAK,MACZ,EAAA,QAAA,kBAAA,GAAA,CAAC,KAAK,SAAL,EAAA,EAAe,GAClB,CAHkB,EAAA,EAAA,CAAA,aAAA,EAAgB,KAAK,CAAA,CAIzC,CACD;AAAA;AAAA,GAEL,EAAA,CAAA;AAEJ;;;;"}
+{"version":3,"file":"GlobalHeader.esm.js","sources":["../../../src/alpha/components/GlobalHeader.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { ErrorBoundary } from '@backstage/core-components';\n\nimport AppBar from '@mui/material/AppBar';\nimport Box from '@mui/material/Box';\nimport Toolbar from '@mui/material/Toolbar';\n\nimport { useGlobalHeaderComponents } from '../extensions/GlobalHeaderContext';\n\n/**\n * Global header bar. Reads toolbar items from GlobalHeaderContext\n * and renders them in a sticky AppBar.\n *\n * @alpha\n */\nexport const GlobalHeader = () => {\n  const components = useGlobalHeaderComponents();\n\n  return (\n    <AppBar\n      position=\"sticky\"\n      component=\"nav\"\n      id=\"global-header\"\n      sx={{\n        width: 'auto',\n        marginRight: 'var(--docked-drawer-width, 0px)',\n        transition: 'margin-right 225ms cubic-bezier(0, 0, 0.2, 1)',\n      }}\n    >\n      <Toolbar\n        sx={{\n          gap: 1,\n          color: theme =>\n            (theme as any).rhdh?.general?.appBarForegroundColor ??\n            theme.palette.text.primary,\n        }}\n      >\n        {components.map((item, index) => (\n          <ErrorBoundary key={`gh-component-${index}`}>\n            <Box sx={item.layout}>\n              <item.component />\n            </Box>\n          </ErrorBoundary>\n        ))}\n      </Toolbar>\n    </AppBar>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA8BO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,aAAa,yBAA0B,EAAA;AAE7C,EACE,uBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAS,EAAA,QAAA;AAAA,MACT,SAAU,EAAA,KAAA;AAAA,MACV,EAAG,EAAA,eAAA;AAAA,MACH,EAAI,EAAA;AAAA,QACF,KAAO,EAAA,MAAA;AAAA,QACP,WAAa,EAAA,iCAAA;AAAA,QACb,UAAY,EAAA;AAAA,OACd;AAAA,MAEA,QAAA,kBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,EAAI,EAAA;AAAA,YACF,GAAK,EAAA,CAAA;AAAA,YACL,KAAA,EAAO,WACJ,KAAc,CAAA,IAAA,EAAM,SAAS,qBAC9B,IAAA,KAAA,CAAM,QAAQ,IAAK,CAAA;AAAA,WACvB;AAAA,UAEC,QAAA,EAAA,UAAA,CAAW,IAAI,CAAC,IAAA,EAAM,0BACpB,GAAA,CAAA,aAAA,EAAA,EACC,8BAAC,GAAI,EAAA,EAAA,EAAA,EAAI,KAAK,MACZ,EAAA,QAAA,kBAAA,GAAA,CAAC,KAAK,SAAL,EAAA,EAAe,GAClB,CAHkB,EAAA,EAAA,CAAA,aAAA,EAAgB,KAAK,CAAA,CAIzC,CACD;AAAA;AAAA;AACH;AAAA,GACF;AAEJ;;;;"}

package/dist/alpha/components/GlobalHeaderDropdown.esm.js

@@ -23,13 +23,14 @@ const GlobalHeaderDropdown = ({
   const entries = useMemo(() => buildDropdownEntries(menuItems), [menuItems]);
   const menuListRef = useRef(null);
   const [hasVisibleItems, setHasVisibleItems] = useState(true);
+  const isOpen = Boolean(anchorEl);
   useLayoutEffect(() => {
-    if (!trackValidity || !menuListRef.current) return;
+    if (!trackValidity || !isOpen || !menuListRef.current) return;
     const found = menuListRef.current.querySelector('[role="menuitem"]') !== null;
     if (found !== hasVisibleItems) {
       setHasVisibleItems(found);
     }
-  }, [trackValidity, hasVisibleItems]);
+  }, [trackValidity, hasVisibleItems, isOpen]);
   if (menuItems.length === 0 && !emptyState) return null;
   const showEmpty = entries.length === 0 || trackValidity && !hasVisibleItems;
   return /* @__PURE__ */ jsx(

package/dist/alpha/components/GlobalHeaderDropdown.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalHeaderDropdown.esm.js","sources":["../../../src/alpha/components/GlobalHeaderDropdown.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type Button from '@mui/material/Button';\n\nimport { useGlobalHeaderMenuItems } from '../extensions/GlobalHeaderContext';\nimport { buildDropdownEntries } from '../utils/menuItemGrouping';\nimport { useDropdownManager } from '../../hooks';\nimport { HeaderDropdownComponent } from '../../components/HeaderDropdownComponent/HeaderDropdownComponent';\nimport { GlobalHeaderDropdownContent } from './GlobalHeaderDropdownContent';\n\n/**\n * Props for {@link GlobalHeaderDropdown}.\n *\n * @alpha\n */\nexport interface GlobalHeaderDropdownProps {\n  /** Extension target name that items are collected from (e.g. `'help'`, `'create'`). */\n  target: string;\n  /** Content rendered inside the trigger button. */\n  buttonContent: ReactNode;\n  /** MUI Button props forwarded to the trigger. */\n  buttonProps?: ComponentProps<typeof Button>;\n  /** Render an `IconButton` instead of a regular `Button`. */\n  isIconButton?: boolean;\n  /** Tooltip shown on hover of the trigger button. */\n  tooltip?: string;\n  /** Rendered when no menu items are contributed (or all render empty when `trackValidity` is on). */\n  emptyState?: ReactNode;\n  /**\n   * When `true`, the dropdown checks the rendered MenuList for visible\n   * `[role=\"menuitem\"]` elements after each render. If none are found,\n   * the `emptyState` is shown instead.\n   */\n  trackValidity?: boolean;\n}\n\n/**\n * High-level dropdown building block for the global header.\n *\n * Collects menu items from a named extension `target`, groups them\n * by section, sorts by priority, and renders them inside a\n * `HeaderDropdownComponent`.\n *\n * @alpha\n */\nexport const GlobalHeaderDropdown = ({\n  target,\n  buttonContent,\n  buttonProps,\n  isIconButton,\n  tooltip,\n  emptyState,\n  trackValidity = false,\n}: GlobalHeaderDropdownProps) => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n  const menuItems = useGlobalHeaderMenuItems(target);\n  const entries = useMemo(() => buildDropdownEntries(menuItems), [menuItems]);\n\n  const menuListRef = useRef<HTMLUListElement>(null);\n  const [hasVisibleItems, setHasVisibleItems] = useState(true);\n\n  useLayoutEffect(() => {\n    if (!trackValidity || !menuListRef.current) return;\n    const found =\n      menuListRef.current.querySelector('[role=\"menuitem\"]') !== null;\n    if (found !== hasVisibleItems) {\n      setHasVisibleItems(found);\n    }\n  }, [trackValidity, hasVisibleItems]);\n\n  if (menuItems.length === 0 && !emptyState) return null;\n\n  const showEmpty = entries.length === 0 || (trackValidity && !hasVisibleItems);\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={buttonContent}\n      buttonProps={buttonProps}\n      isIconButton={isIconButton}\n      tooltip={tooltip}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n      menuListRef={trackValidity ? menuListRef : undefined}\n    >\n      {showEmpty ? (\n        emptyState\n      ) : (\n        <GlobalHeaderDropdownContent\n          entries={entries}\n          target={target}\n          handleClose={handleClose}\n        />\n      )}\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA6DO,MAAM,uBAAuB,CAAC;AAAA,EACnC,MAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAAiC,KAAA;AAC/B,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,WAAA,KAAgB,kBAAmB,EAAA;AACjE,EAAM,MAAA,SAAA,GAAY,yBAAyB,MAAM,CAAA;AACjD,EAAM,MAAA,OAAA,GAAU,QAAQ,MAAM,oBAAA,CAAqB,SAAS,CAAG,EAAA,CAAC,SAAS,CAAC,CAAA;AAE1E,EAAM,MAAA,WAAA,GAAc,OAAyB,IAAI,CAAA;AACjD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAE3D,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,CAAC,aAAA,IAAiB,CAAC,WAAA,CAAY,OAAS,EAAA;AAC5C,IAAA,MAAM,KACJ,GAAA,WAAA,CAAY,OAAQ,CAAA,aAAA,CAAc,mBAAmB,CAAM,KAAA,IAAA;AAC7D,IAAA,IAAI,UAAU,eAAiB,EAAA;AAC7B,MAAA,kBAAA,CAAmB,KAAK,CAAA;AAAA;AAC1B,GACC,EAAA,CAAC,aAAe,EAAA,eAAe,CAAC,CAAA;AAEnC,EAAA,IAAI,SAAU,CAAA,MAAA,KAAW,CAAK,IAAA,CAAC,YAAmB,OAAA,IAAA;AAElD,EAAA,MAAM,SAAY,GAAA,OAAA,CAAQ,MAAW,KAAA,CAAA,IAAM,iBAAiB,CAAC,eAAA;AAE7D,EACE,uBAAA,GAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,aAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,QAAA;AAAA,MACA,WAAA,EAAa,gBAAgB,WAAc,GAAA,KAAA,CAAA;AAAA,MAE1C,sBACC,UAEA,mBAAA,GAAA;AAAA,QAAC,2BAAA;AAAA,QAAA;AAAA,UACC,OAAA;AAAA,UACA,MAAA;AAAA,UACA;AAAA;AAAA;AACF;AAAA,GAEJ;AAEJ;;;;"}
+{"version":3,"file":"GlobalHeaderDropdown.esm.js","sources":["../../../src/alpha/components/GlobalHeaderDropdown.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { useLayoutEffect, useMemo, useRef, useState } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport type Button from '@mui/material/Button';\n\nimport { useGlobalHeaderMenuItems } from '../extensions/GlobalHeaderContext';\nimport { buildDropdownEntries } from '../utils/menuItemGrouping';\nimport { useDropdownManager } from '../../hooks';\nimport { HeaderDropdownComponent } from '../../components/HeaderDropdownComponent/HeaderDropdownComponent';\nimport { GlobalHeaderDropdownContent } from './GlobalHeaderDropdownContent';\n\n/**\n * Props for {@link GlobalHeaderDropdown}.\n *\n * @alpha\n */\nexport interface GlobalHeaderDropdownProps {\n  /** Extension target name that items are collected from (e.g. `'help'`, `'create'`). */\n  target: string;\n  /** Content rendered inside the trigger button. */\n  buttonContent: ReactNode;\n  /** MUI Button props forwarded to the trigger. */\n  buttonProps?: ComponentProps<typeof Button>;\n  /** Render an `IconButton` instead of a regular `Button`. */\n  isIconButton?: boolean;\n  /** Tooltip shown on hover of the trigger button. */\n  tooltip?: string;\n  /** Rendered when no menu items are contributed (or all render empty when `trackValidity` is on). */\n  emptyState?: ReactNode;\n  /**\n   * When `true`, the dropdown checks the rendered MenuList for visible\n   * `[role=\"menuitem\"]` elements after each render. If none are found,\n   * the `emptyState` is shown instead.\n   */\n  trackValidity?: boolean;\n}\n\n/**\n * High-level dropdown building block for the global header.\n *\n * Collects menu items from a named extension `target`, groups them\n * by section, sorts by priority, and renders them inside a\n * `HeaderDropdownComponent`.\n *\n * @alpha\n */\nexport const GlobalHeaderDropdown = ({\n  target,\n  buttonContent,\n  buttonProps,\n  isIconButton,\n  tooltip,\n  emptyState,\n  trackValidity = false,\n}: GlobalHeaderDropdownProps) => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n  const menuItems = useGlobalHeaderMenuItems(target);\n  const entries = useMemo(() => buildDropdownEntries(menuItems), [menuItems]);\n\n  const menuListRef = useRef<HTMLUListElement>(null);\n  const [hasVisibleItems, setHasVisibleItems] = useState(true);\n  const isOpen = Boolean(anchorEl);\n\n  useLayoutEffect(() => {\n    if (!trackValidity || !isOpen || !menuListRef.current) return;\n    const found =\n      menuListRef.current.querySelector('[role=\"menuitem\"]') !== null;\n    if (found !== hasVisibleItems) {\n      setHasVisibleItems(found);\n    }\n  }, [trackValidity, hasVisibleItems, isOpen]);\n\n  if (menuItems.length === 0 && !emptyState) return null;\n\n  const showEmpty = entries.length === 0 || (trackValidity && !hasVisibleItems);\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={buttonContent}\n      buttonProps={buttonProps}\n      isIconButton={isIconButton}\n      tooltip={tooltip}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n      menuListRef={trackValidity ? menuListRef : undefined}\n    >\n      {showEmpty ? (\n        emptyState\n      ) : (\n        <GlobalHeaderDropdownContent\n          entries={entries}\n          target={target}\n          handleClose={handleClose}\n        />\n      )}\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;AA6DO,MAAM,uBAAuB,CAAC;AAAA,EACnC,MAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAgB,GAAA;AAClB,CAAiC,KAAA;AAC/B,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,WAAA,KAAgB,kBAAmB,EAAA;AACjE,EAAM,MAAA,SAAA,GAAY,yBAAyB,MAAM,CAAA;AACjD,EAAM,MAAA,OAAA,GAAU,QAAQ,MAAM,oBAAA,CAAqB,SAAS,CAAG,EAAA,CAAC,SAAS,CAAC,CAAA;AAE1E,EAAM,MAAA,WAAA,GAAc,OAAyB,IAAI,CAAA;AACjD,EAAA,MAAM,CAAC,eAAA,EAAiB,kBAAkB,CAAA,GAAI,SAAS,IAAI,CAAA;AAC3D,EAAM,MAAA,MAAA,GAAS,QAAQ,QAAQ,CAAA;AAE/B,EAAA,eAAA,CAAgB,MAAM;AACpB,IAAA,IAAI,CAAC,aAAiB,IAAA,CAAC,MAAU,IAAA,CAAC,YAAY,OAAS,EAAA;AACvD,IAAA,MAAM,KACJ,GAAA,WAAA,CAAY,OAAQ,CAAA,aAAA,CAAc,mBAAmB,CAAM,KAAA,IAAA;AAC7D,IAAA,IAAI,UAAU,eAAiB,EAAA;AAC7B,MAAA,kBAAA,CAAmB,KAAK,CAAA;AAAA;AAC1B,GACC,EAAA,CAAC,aAAe,EAAA,eAAA,EAAiB,MAAM,CAAC,CAAA;AAE3C,EAAA,IAAI,SAAU,CAAA,MAAA,KAAW,CAAK,IAAA,CAAC,YAAmB,OAAA,IAAA;AAElD,EAAA,MAAM,SAAY,GAAA,OAAA,CAAQ,MAAW,KAAA,CAAA,IAAM,iBAAiB,CAAC,eAAA;AAE7D,EACE,uBAAA,GAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,aAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,OAAA;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,QAAA;AAAA,MACA,WAAA,EAAa,gBAAgB,WAAc,GAAA,KAAA,CAAA;AAAA,MAE1C,sBACC,UAEA,mBAAA,GAAA;AAAA,QAAC,2BAAA;AAAA,QAAA;AAAA,UACC,OAAA;AAAA,UACA,MAAA;AAAA,UACA;AAAA;AAAA;AACF;AAAA,GAEJ;AAEJ;;;;"}

package/dist/alpha/components/GlobalHeaderMenuItem.esm.js

@@ -1,5 +1,4 @@
 import { jsx } from 'react/jsx-runtime';
-import { Fragment } from 'react';
 import { Link } from '@backstage/core-components';
 import MenuItem from '@mui/material/MenuItem';
 import { MenuItemLink } from '../../components/MenuItemLink/MenuItemLink.esm.js';
@@ -20,8 +19,7 @@ const GlobalHeaderMenuItem = ({
     disableTouchRipple: true,
     onClick,
     sx: { py: 0.5, color: "inherit", textDecoration: "none" },
-    component: to ? Link : Fragment,
-    to,
+    ...to ? { component: Link, to } : {},
     children: /* @__PURE__ */ jsx(
       MenuItemLink,
       {

package/dist/alpha/components/GlobalHeaderMenuItem.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"GlobalHeaderMenuItem.esm.js","sources":["../../../src/alpha/components/GlobalHeaderMenuItem.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Fragment } from 'react';\n\nimport { Link } from '@backstage/core-components';\n\nimport MenuItem from '@mui/material/MenuItem';\n\nimport { MenuItemLink } from '../../components/MenuItemLink/MenuItemLink';\n\n/**\n * Props for {@link GlobalHeaderMenuItem}.\n *\n * @alpha\n */\nexport interface GlobalHeaderMenuItemProps {\n  /** Navigation URL. When absent the item renders as a plain action button. */\n  to?: string;\n  /** Display title. */\n  title?: string;\n  /** Translation key for the title. */\n  titleKey?: string;\n  /** Secondary text rendered below the title. */\n  subTitle?: string;\n  /** Translation key for the secondary text. */\n  subTitleKey?: string;\n  /** Icon identifier passed to `HeaderIcon`. */\n  icon?: string;\n  /** Tooltip shown on hover. */\n  tooltip?: string;\n  /** Called when the item is clicked (typically the dropdown's `handleClose`). */\n  onClick?: () => void;\n}\n\n/**\n * A complete, self-contained menu item for use inside header dropdowns.\n *\n * Renders a MUI `MenuItem` with optional `Link` navigation and the\n * standard `MenuItemLink` content (icon, title, subtitle, external\n * link indicator). Consumers only need this one component — no manual\n * `MenuItem` or `Link` wrapping required.\n *\n * @example\n * ```tsx\n * const MyHelpItem = ({ handleClose }) => (\n *   <GlobalHeaderMenuItem\n *     to=\"https://docs.example.com\"\n *     title=\"Documentation\"\n *     icon=\"menu_book\"\n *     onClick={handleClose}\n *   />\n * );\n * ```\n *\n * @alpha\n */\nexport const GlobalHeaderMenuItem = ({\n  to,\n  title,\n  titleKey,\n  subTitle,\n  subTitleKey,\n  icon,\n  tooltip,\n  onClick,\n}: GlobalHeaderMenuItemProps) => (\n  <MenuItem\n    disableRipple\n    disableTouchRipple\n    onClick={onClick}\n    sx={{ py: 0.5, color: 'inherit', textDecoration: 'none' }}\n    component={to ? Link : Fragment}\n    to={to}\n  >\n    <MenuItemLink\n      to={to ?? ''}\n      title={title}\n      titleKey={titleKey}\n      subTitle={subTitle}\n      subTitleKey={subTitleKey}\n      icon={icon}\n      tooltip={tooltip}\n    />\n  </MenuItem>\n);\n"],"names":[],"mappings":";;;;;;AAsEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,EAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CACE,qBAAA,GAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IACC,aAAa,EAAA,IAAA;AAAA,IACb,kBAAkB,EAAA,IAAA;AAAA,IAClB,OAAA;AAAA,IACA,IAAI,EAAE,EAAA,EAAI,KAAK,KAAO,EAAA,SAAA,EAAW,gBAAgB,MAAO,EAAA;AAAA,IACxD,SAAA,EAAW,KAAK,IAAO,GAAA,QAAA;AAAA,IACvB,EAAA;AAAA,IAEA,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,IAAI,EAAM,IAAA,EAAA;AAAA,QACV,KAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA;AAAA,QACA;AAAA;AAAA;AACF;AACF;;;;"}
+{"version":3,"file":"GlobalHeaderMenuItem.esm.js","sources":["../../../src/alpha/components/GlobalHeaderMenuItem.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { Link } from '@backstage/core-components';\n\nimport MenuItem from '@mui/material/MenuItem';\n\nimport { MenuItemLink } from '../../components/MenuItemLink/MenuItemLink';\n\n/**\n * Props for {@link GlobalHeaderMenuItem}.\n *\n * @alpha\n */\nexport interface GlobalHeaderMenuItemProps {\n  /** Navigation URL. When absent the item renders as a plain action button. */\n  to?: string;\n  /** Display title. */\n  title?: string;\n  /** Translation key for the title. */\n  titleKey?: string;\n  /** Secondary text rendered below the title. */\n  subTitle?: string;\n  /** Translation key for the secondary text. */\n  subTitleKey?: string;\n  /** Icon identifier passed to `HeaderIcon`. */\n  icon?: string;\n  /** Tooltip shown on hover. */\n  tooltip?: string;\n  /** Called when the item is clicked (typically the dropdown's `handleClose`). */\n  onClick?: () => void;\n}\n\n/**\n * A complete, self-contained menu item for use inside header dropdowns.\n *\n * Renders a MUI `MenuItem` with optional `Link` navigation and the\n * standard `MenuItemLink` content (icon, title, subtitle, external\n * link indicator). Consumers only need this one component — no manual\n * `MenuItem` or `Link` wrapping required.\n *\n * @example\n * ```tsx\n * const MyHelpItem = ({ handleClose }) => (\n *   <GlobalHeaderMenuItem\n *     to=\"https://docs.example.com\"\n *     title=\"Documentation\"\n *     icon=\"menu_book\"\n *     onClick={handleClose}\n *   />\n * );\n * ```\n *\n * @alpha\n */\nexport const GlobalHeaderMenuItem = ({\n  to,\n  title,\n  titleKey,\n  subTitle,\n  subTitleKey,\n  icon,\n  tooltip,\n  onClick,\n}: GlobalHeaderMenuItemProps) => (\n  <MenuItem\n    disableRipple\n    disableTouchRipple\n    onClick={onClick}\n    sx={{ py: 0.5, color: 'inherit', textDecoration: 'none' }}\n    {...(to ? { component: Link, to } : {})}\n  >\n    <MenuItemLink\n      to={to ?? ''}\n      title={title}\n      titleKey={titleKey}\n      subTitle={subTitle}\n      subTitleKey={subTitleKey}\n      icon={icon}\n      tooltip={tooltip}\n    />\n  </MenuItem>\n);\n"],"names":[],"mappings":";;;;;AAoEO,MAAM,uBAAuB,CAAC;AAAA,EACnC,EAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CACE,qBAAA,GAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IACC,aAAa,EAAA,IAAA;AAAA,IACb,kBAAkB,EAAA,IAAA;AAAA,IAClB,OAAA;AAAA,IACA,IAAI,EAAE,EAAA,EAAI,KAAK,KAAO,EAAA,SAAA,EAAW,gBAAgB,MAAO,EAAA;AAAA,IACvD,GAAI,EAAK,GAAA,EAAE,WAAW,IAAM,EAAA,EAAA,KAAO,EAAC;AAAA,IAErC,QAAA,kBAAA,GAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,IAAI,EAAM,IAAA,EAAA;AAAA,QACV,KAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,IAAA;AAAA,QACA;AAAA;AAAA;AACF;AACF;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@red-hat-developer-hub/backstage-plugin-global-header",
-  "version": "1.21.0",
+  "version": "1.21.1",
   "main": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
   "exports": {