@red-hat-developer-hub/backstage-plugin-global-header 1.7.3 → 1.9.0

package/dist/components/HeaderDropdownComponent/ApplicationLauncherDropdown.esm.js

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import AppsIcon from '@mui/icons-material/Apps';
 import AppRegistrationIcon from '@mui/icons-material/AppRegistration';
 import { useApplicationLauncherDropdownMountPoints } from '../../hooks/useApplicationLauncherDropdownMountPoints.esm.js';
@@ -34,42 +35,42 @@ const ApplicationLauncherDropdown = () => {
     return groupedSections;
   }, [mountPoints]);
   const sections = Object.entries(sectionsObject);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     HeaderDropdownComponent,
     {
-      buttonContent: /* @__PURE__ */ React.createElement(AppsIcon, null),
+      buttonContent: /* @__PURE__ */ jsx(AppsIcon, {}),
       tooltip: "Application launcher",
       isIconButton: true,
       onOpen: handleOpen,
       onClose: handleClose,
-      anchorEl
-    },
-    sections.length > 0 ? sections.map(
-      ([section, { sectionLink, sectionLinkLabel, items }], index) => /* @__PURE__ */ React.createElement(
-        MenuSection,
+      anchorEl,
+      children: sections.length > 0 ? sections.map(
+        ([section, { sectionLink, sectionLinkLabel, items }], index) => /* @__PURE__ */ jsx(
+          MenuSection,
+          {
+            sectionLabel: section,
+            optionalLink: sectionLink,
+            optionalLinkLabel: sectionLinkLabel,
+            items,
+            handleClose,
+            hideDivider: index === sections.length - 1
+          },
+          section
+        )
+      ) : /* @__PURE__ */ jsx(
+        DropdownEmptyState,
         {
-          key: section,
-          sectionLabel: section,
-          optionalLink: sectionLink,
-          optionalLinkLabel: sectionLinkLabel,
-          items,
-          handleClose,
-          hideDivider: index === sections.length - 1
+          title: "No application links configured",
+          subTitle: "Configure application links in dynamic plugin config for quick access from here.",
+          icon: /* @__PURE__ */ jsx(
+            AppRegistrationIcon,
+            {
+              sx: { fontSize: 64, color: "text.disabled" }
+            }
+          )
         }
       )
-    ) : /* @__PURE__ */ React.createElement(
-      DropdownEmptyState,
-      {
-        title: "No application links configured",
-        subTitle: "Configure application links in dynamic plugin config for quick access from here.",
-        icon: /* @__PURE__ */ React.createElement(
-          AppRegistrationIcon,
-          {
-            sx: { fontSize: 64, color: "text.disabled" }
-          }
-        )
-      }
-    )
+    }
   );
 };
 

package/dist/components/HeaderDropdownComponent/ApplicationLauncherDropdown.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"ApplicationLauncherDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ApplicationLauncherDropdown.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 */\nimport React, { useMemo } from 'react';\n\nimport AppsIcon from '@mui/icons-material/Apps';\nimport AppRegistrationIcon from '@mui/icons-material/AppRegistration';\n\nimport { useApplicationLauncherDropdownMountPoints } from '../../hooks/useApplicationLauncherDropdownMountPoints';\nimport { useDropdownManager } from '../../hooks';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { MenuSection } from './MenuSection';\nimport { DropdownEmptyState } from './DropdownEmptyState';\n\nexport const ApplicationLauncherDropdown = () => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n\n  const mountPoints = useApplicationLauncherDropdownMountPoints();\n\n  const sectionsObject = useMemo(() => {\n    const groupedSections: Record<\n      string,\n      { sectionLink?: string; sectionLinkLabel?: string; items: any[] }\n    > = {};\n\n    (mountPoints ?? []).forEach(mp => {\n      const section = mp.config?.section ?? '';\n      const sectionLink = mp.config?.sectionLink ?? '';\n      const sectionLinkLabel = mp.config?.sectionLinkLabel ?? '';\n\n      if (!groupedSections[section]) {\n        groupedSections[section] = { sectionLink, sectionLinkLabel, items: [] };\n      }\n      groupedSections[section].items.push({\n        Component: mp.Component,\n        icon: mp.config?.props?.icon,\n        label: mp.config?.props?.title,\n        link: mp.config?.props?.link,\n        external: mp.config?.props?.external ?? false,\n        priority: mp.config?.priority ?? 0,\n      });\n    });\n\n    Object.values(groupedSections).forEach(section => {\n      section.items.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n    });\n\n    return groupedSections;\n  }, [mountPoints]);\n\n  const sections = Object.entries(sectionsObject);\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={<AppsIcon />}\n      tooltip=\"Application launcher\"\n      isIconButton\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n    >\n      {sections.length > 0 ? (\n        sections.map(\n          ([section, { sectionLink, sectionLinkLabel, items }], index) => (\n            <MenuSection\n              key={section}\n              sectionLabel={section}\n              optionalLink={sectionLink}\n              optionalLinkLabel={sectionLinkLabel}\n              items={items}\n              handleClose={handleClose}\n              hideDivider={index === sections.length - 1}\n            />\n          ),\n        )\n      ) : (\n        <DropdownEmptyState\n          title=\"No application links configured\"\n          subTitle=\"Configure application links in dynamic plugin config for quick access from here.\"\n          icon={\n            <AppRegistrationIcon\n              sx={{ fontSize: 64, color: 'text.disabled' }}\n            />\n          }\n        />\n      )}\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ApplicationLauncherDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ApplicationLauncherDropdown.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 */\nimport { useMemo } from 'react';\n\nimport AppsIcon from '@mui/icons-material/Apps';\nimport AppRegistrationIcon from '@mui/icons-material/AppRegistration';\n\nimport { useApplicationLauncherDropdownMountPoints } from '../../hooks/useApplicationLauncherDropdownMountPoints';\nimport { useDropdownManager } from '../../hooks';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { MenuSection } from './MenuSection';\nimport { DropdownEmptyState } from './DropdownEmptyState';\n\nexport const ApplicationLauncherDropdown = () => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n\n  const mountPoints = useApplicationLauncherDropdownMountPoints();\n\n  const sectionsObject = useMemo(() => {\n    const groupedSections: Record<\n      string,\n      { sectionLink?: string; sectionLinkLabel?: string; items: any[] }\n    > = {};\n\n    (mountPoints ?? []).forEach(mp => {\n      const section = mp.config?.section ?? '';\n      const sectionLink = mp.config?.sectionLink ?? '';\n      const sectionLinkLabel = mp.config?.sectionLinkLabel ?? '';\n\n      if (!groupedSections[section]) {\n        groupedSections[section] = { sectionLink, sectionLinkLabel, items: [] };\n      }\n      groupedSections[section].items.push({\n        Component: mp.Component,\n        icon: mp.config?.props?.icon,\n        label: mp.config?.props?.title,\n        link: mp.config?.props?.link,\n        external: mp.config?.props?.external ?? false,\n        priority: mp.config?.priority ?? 0,\n      });\n    });\n\n    Object.values(groupedSections).forEach(section => {\n      section.items.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n    });\n\n    return groupedSections;\n  }, [mountPoints]);\n\n  const sections = Object.entries(sectionsObject);\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={<AppsIcon />}\n      tooltip=\"Application launcher\"\n      isIconButton\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n    >\n      {sections.length > 0 ? (\n        sections.map(\n          ([section, { sectionLink, sectionLinkLabel, items }], index) => (\n            <MenuSection\n              key={section}\n              sectionLabel={section}\n              optionalLink={sectionLink}\n              optionalLinkLabel={sectionLinkLabel}\n              items={items}\n              handleClose={handleClose}\n              hideDivider={index === sections.length - 1}\n            />\n          ),\n        )\n      ) : (\n        <DropdownEmptyState\n          title=\"No application links configured\"\n          subTitle=\"Configure application links in dynamic plugin config for quick access from here.\"\n          icon={\n            <AppRegistrationIcon\n              sx={{ fontSize: 64, color: 'text.disabled' }}\n            />\n          }\n        />\n      )}\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/HeaderDropdownComponent/CreateDropdown.esm.js

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';
 import { useCreateDropdownMountPoints } from '../../hooks/useCreateDropdownMountPoints.esm.js';
 import { useDropdownManager } from '../../hooks/useDropdownManager.esm.js';
@@ -17,10 +18,13 @@ const CreateDropdown = ({ layout }) => {
   if (menuSections.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     HeaderDropdownComponent,
     {
-      buttonContent: /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, "Self-service ", /* @__PURE__ */ React.createElement(ArrowDropDownOutlinedIcon, { sx: { ml: 1 } })),
+      buttonContent: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center" }, children: [
+        "Self-service ",
+        /* @__PURE__ */ jsx(ArrowDropDownOutlinedIcon, { sx: { ml: 1 } })
+      ] }),
       buttonProps: {
         variant: "outlined",
         sx: {
@@ -30,16 +34,16 @@ const CreateDropdown = ({ layout }) => {
       },
       onOpen: handleOpen,
       onClose: handleClose,
-      anchorEl
-    },
-    menuSections.map((section, index) => /* @__PURE__ */ React.createElement(
-      section.Component,
-      {
-        key: `menu-section-${index.toString()}`,
-        hideDivider: index === menuSections.length - 1,
-        handleClose
-      }
-    ))
+      anchorEl,
+      children: menuSections.map((section, index) => /* @__PURE__ */ jsx(
+        section.Component,
+        {
+          hideDivider: index === menuSections.length - 1,
+          handleClose
+        },
+        `menu-section-${index.toString()}`
+      ))
+    }
   );
 };
 

package/dist/components/HeaderDropdownComponent/CreateDropdown.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"CreateDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/CreateDropdown.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 React, { useMemo } from 'react';\n\nimport ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';\n\nimport { MenuItemConfig } from './MenuSection';\nimport { useCreateDropdownMountPoints } from '../../hooks/useCreateDropdownMountPoints';\nimport { useDropdownManager } from '../../hooks';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport Box from '@mui/material/Box';\n\n/**\n * @public\n * Props for each dropdown section component\n */\ninterface SectionComponentProps {\n  handleClose: () => void;\n  hideDivider: boolean;\n  items?: MenuItemConfig[];\n}\n\n/**\n * @public\n * Props for Create Dropdown\n */\nexport interface CreateDropdownProps {\n  layout?: React.CSSProperties;\n}\n\nexport const CreateDropdown = ({ layout }: CreateDropdownProps) => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n\n  const createDropdownMountPoints = useCreateDropdownMountPoints();\n\n  const menuSections = useMemo(() => {\n    return (createDropdownMountPoints ?? [])\n      .map(mp => ({\n        Component: mp.Component as React.ComponentType<SectionComponentProps>,\n        priority: mp.config?.priority ?? 0,\n      }))\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [createDropdownMountPoints]);\n\n  if (menuSections.length === 0) {\n    return null;\n  }\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <Box sx={{ display: 'flex', alignItems: 'center' }}>\n          Self-service <ArrowDropDownOutlinedIcon sx={{ ml: 1 }} />\n        </Box>\n      }\n      buttonProps={{\n        variant: 'outlined',\n        sx: {\n          color: 'inherit',\n          ...layout,\n        },\n      }}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n    >\n      {menuSections.map((section, index) => (\n        <section.Component\n          key={`menu-section-${index.toString()}`}\n          hideDivider={index === menuSections.length - 1}\n          handleClose={handleClose}\n        />\n      ))}\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA4CO,MAAM,cAAiB,GAAA,CAAC,EAAE,MAAA,EAAkC,KAAA;AACjE,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,WAAA,KAAgB,kBAAmB,EAAA;AAEjE,EAAA,MAAM,4BAA4B,4BAA6B,EAAA;AAE/D,EAAM,MAAA,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAA,OAAA,CAAQ,yBAA6B,IAAA,EAClC,EAAA,GAAA,CAAI,CAAO,EAAA,MAAA;AAAA,MACV,WAAW,EAAG,CAAA,SAAA;AAAA,MACd,QAAA,EAAU,EAAG,CAAA,MAAA,EAAQ,QAAY,IAAA;AAAA,KACnC,CAAE,CACD,CAAA,IAAA,CAAK,CAAC,CAAA,EAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,QAAA,IAAY,CAAE,CAAA,CAAA;AAAA,GACzD,EAAG,CAAC,yBAAyB,CAAC,CAAA;AAE9B,EAAI,IAAA,YAAA,CAAa,WAAW,CAAG,EAAA;AAC7B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,+BACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,IAAI,EAAE,OAAA,EAAS,QAAQ,UAAY,EAAA,QAAA,EAAY,EAAA,EAAA,eAAA,sCACpC,yBAA0B,EAAA,EAAA,EAAA,EAAI,EAAE,EAAI,EAAA,CAAA,IAAK,CACzD,CAAA;AAAA,MAEF,WAAa,EAAA;AAAA,QACX,OAAS,EAAA,UAAA;AAAA,QACT,EAAI,EAAA;AAAA,UACF,KAAO,EAAA,SAAA;AAAA,UACP,GAAG;AAAA;AACL,OACF;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT;AAAA,KAAA;AAAA,IAEC,YAAa,CAAA,GAAA,CAAI,CAAC,OAAA,EAAS,KAC1B,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,OAAQ,CAAA,SAAA;AAAA,MAAR;AAAA,QACC,GAAK,EAAA,CAAA,aAAA,EAAgB,KAAM,CAAA,QAAA,EAAU,CAAA,CAAA;AAAA,QACrC,WAAA,EAAa,KAAU,KAAA,YAAA,CAAa,MAAS,GAAA,CAAA;AAAA,QAC7C;AAAA;AAAA,KAEH;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"CreateDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/CreateDropdown.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 { useMemo } from 'react';\nimport type { CSSProperties, ComponentType } from 'react';\n\nimport ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';\n\nimport { MenuItemConfig } from './MenuSection';\nimport { useCreateDropdownMountPoints } from '../../hooks/useCreateDropdownMountPoints';\nimport { useDropdownManager } from '../../hooks';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport Box from '@mui/material/Box';\n\n/**\n * @public\n * Props for each dropdown section component\n */\ninterface SectionComponentProps {\n  handleClose: () => void;\n  hideDivider: boolean;\n  items?: MenuItemConfig[];\n}\n\n/**\n * @public\n * Props for Create Dropdown\n */\nexport interface CreateDropdownProps {\n  layout?: CSSProperties;\n}\n\nexport const CreateDropdown = ({ layout }: CreateDropdownProps) => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n\n  const createDropdownMountPoints = useCreateDropdownMountPoints();\n\n  const menuSections = useMemo(() => {\n    return (createDropdownMountPoints ?? [])\n      .map(mp => ({\n        Component: mp.Component as ComponentType<SectionComponentProps>,\n        priority: mp.config?.priority ?? 0,\n      }))\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [createDropdownMountPoints]);\n\n  if (menuSections.length === 0) {\n    return null;\n  }\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <Box sx={{ display: 'flex', alignItems: 'center' }}>\n          Self-service <ArrowDropDownOutlinedIcon sx={{ ml: 1 }} />\n        </Box>\n      }\n      buttonProps={{\n        variant: 'outlined',\n        sx: {\n          color: 'inherit',\n          ...layout,\n        },\n      }}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n    >\n      {menuSections.map((section, index) => (\n        <section.Component\n          key={`menu-section-${index.toString()}`}\n          hideDivider={index === menuSections.length - 1}\n          handleClose={handleClose}\n        />\n      ))}\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA6CO,MAAM,cAAiB,GAAA,CAAC,EAAE,MAAA,EAAkC,KAAA;AACjE,EAAA,MAAM,EAAE,QAAA,EAAU,UAAY,EAAA,WAAA,KAAgB,kBAAmB,EAAA;AAEjE,EAAA,MAAM,4BAA4B,4BAA6B,EAAA;AAE/D,EAAM,MAAA,YAAA,GAAe,QAAQ,MAAM;AACjC,IAAA,OAAA,CAAQ,yBAA6B,IAAA,EAClC,EAAA,GAAA,CAAI,CAAO,EAAA,MAAA;AAAA,MACV,WAAW,EAAG,CAAA,SAAA;AAAA,MACd,QAAA,EAAU,EAAG,CAAA,MAAA,EAAQ,QAAY,IAAA;AAAA,KACnC,CAAE,CACD,CAAA,IAAA,CAAK,CAAC,CAAA,EAAG,CAAO,KAAA,CAAA,CAAA,CAAE,QAAY,IAAA,CAAA,KAAM,CAAE,CAAA,QAAA,IAAY,CAAE,CAAA,CAAA;AAAA,GACzD,EAAG,CAAC,yBAAyB,CAAC,CAAA;AAE9B,EAAI,IAAA,YAAA,CAAa,WAAW,CAAG,EAAA;AAC7B,IAAO,OAAA,IAAA;AAAA;AAGT,EACE,uBAAA,GAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,aAAA,uBACG,GAAI,EAAA,EAAA,EAAA,EAAI,EAAE,OAAS,EAAA,MAAA,EAAQ,UAAY,EAAA,QAAA,EAAY,EAAA,QAAA,EAAA;AAAA,QAAA,eAAA;AAAA,4BACpC,yBAA0B,EAAA,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,GAAK,EAAA;AAAA,OACzD,EAAA,CAAA;AAAA,MAEF,WAAa,EAAA;AAAA,QACX,OAAS,EAAA,UAAA;AAAA,QACT,EAAI,EAAA;AAAA,UACF,KAAO,EAAA,SAAA;AAAA,UACP,GAAG;AAAA;AACL,OACF;AAAA,MACA,MAAQ,EAAA,UAAA;AAAA,MACR,OAAS,EAAA,WAAA;AAAA,MACT,QAAA;AAAA,MAEC,QAAa,EAAA,YAAA,CAAA,GAAA,CAAI,CAAC,OAAA,EAAS,KAC1B,qBAAA,GAAA;AAAA,QAAC,OAAQ,CAAA,SAAA;AAAA,QAAR;AAAA,UAEC,WAAA,EAAa,KAAU,KAAA,YAAA,CAAa,MAAS,GAAA,CAAA;AAAA,UAC7C;AAAA,SAAA;AAAA,QAFK,CAAA,aAAA,EAAgB,KAAM,CAAA,QAAA,EAAU,CAAA;AAAA,OAIxC;AAAA;AAAA,GACH;AAEJ;;;;"}

package/dist/components/HeaderDropdownComponent/DropdownEmptyState.esm.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 import { InfoCard } from '@backstage/core-components';
@@ -8,7 +8,7 @@ const DropdownEmptyState = ({
   subTitle,
   icon
 }) => {
-  return /* @__PURE__ */ React.createElement(InfoCard, null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(InfoCard, { children: /* @__PURE__ */ jsxs(
     Box,
     {
       sx: {
@@ -23,19 +23,21 @@ const DropdownEmptyState = ({
         maxWidth: 300,
         // Set max width to constrain text expansion
         mx: "auto"
-      }
-    },
-    icon,
-    /* @__PURE__ */ React.createElement(Typography, { variant: "h6", sx: { mt: 2, color: "text.primary" } }, title),
-    /* @__PURE__ */ React.createElement(
-      Typography,
-      {
-        variant: "body2",
-        sx: { mt: 1, color: "text.secondary", maxWidth: 250 }
       },
-      subTitle
-    )
-  ));
+      children: [
+        icon,
+        /* @__PURE__ */ jsx(Typography, { variant: "h6", sx: { mt: 2, color: "text.primary" }, children: title }),
+        /* @__PURE__ */ jsx(
+          Typography,
+          {
+            variant: "body2",
+            sx: { mt: 1, color: "text.secondary", maxWidth: 250 },
+            children: subTitle
+          }
+        )
+      ]
+    }
+  ) });
 };
 
 export { DropdownEmptyState };

package/dist/components/HeaderDropdownComponent/DropdownEmptyState.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownEmptyState.esm.js","sources":["../../../src/components/HeaderDropdownComponent/DropdownEmptyState.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 */\nimport React from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport { InfoCard } from '@backstage/core-components';\n\n/**\n * @public\n * Props for dropdown empty state\n */\ninterface DropdownEmptyStateProps {\n  title: string;\n  subTitle: string;\n  icon: React.ReactNode;\n}\n\nexport const DropdownEmptyState: React.FC<DropdownEmptyStateProps> = ({\n  title,\n  subTitle,\n  icon,\n}) => {\n  return (\n    <InfoCard>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          justifyContent: 'center',\n          textAlign: 'center',\n          py: 4,\n          px: 2, // Added padding to control width\n          maxWidth: 300, // Set max width to constrain text expansion\n          mx: 'auto',\n        }}\n      >\n        {icon}\n        <Typography variant=\"h6\" sx={{ mt: 2, color: 'text.primary' }}>\n          {title}\n        </Typography>\n        <Typography\n          variant=\"body2\"\n          sx={{ mt: 1, color: 'text.secondary', maxWidth: 250 }}\n        >\n          {subTitle}\n        </Typography>\n      </Box>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;AA8BO,MAAM,qBAAwD,CAAC;AAAA,EACpE,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,2CACG,QACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,UAAY,EAAA,QAAA;AAAA,QACZ,cAAgB,EAAA,QAAA;AAAA,QAChB,SAAW,EAAA,QAAA;AAAA,QACX,EAAI,EAAA,CAAA;AAAA,QACJ,EAAI,EAAA,CAAA;AAAA;AAAA,QACJ,QAAU,EAAA,GAAA;AAAA;AAAA,QACV,EAAI,EAAA;AAAA;AACN,KAAA;AAAA,IAEC,IAAA;AAAA,oBACD,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IAAK,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,CAAG,EAAA,KAAA,EAAO,cAAe,EAAA,EAAA,EACzD,KACH,CAAA;AAAA,oBACA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,OAAA;AAAA,QACR,IAAI,EAAE,EAAA,EAAI,GAAG,KAAO,EAAA,gBAAA,EAAkB,UAAU,GAAI;AAAA,OAAA;AAAA,MAEnD;AAAA;AACH,GAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"DropdownEmptyState.esm.js","sources":["../../../src/components/HeaderDropdownComponent/DropdownEmptyState.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 */\nimport type { ReactNode, FC } from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport { InfoCard } from '@backstage/core-components';\n\n/**\n * @public\n * Props for dropdown empty state\n */\ninterface DropdownEmptyStateProps {\n  title: string;\n  subTitle: string;\n  icon: ReactNode;\n}\n\nexport const DropdownEmptyState: FC<DropdownEmptyStateProps> = ({\n  title,\n  subTitle,\n  icon,\n}) => {\n  return (\n    <InfoCard>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'column',\n          alignItems: 'center',\n          justifyContent: 'center',\n          textAlign: 'center',\n          py: 4,\n          px: 2, // Added padding to control width\n          maxWidth: 300, // Set max width to constrain text expansion\n          mx: 'auto',\n        }}\n      >\n        {icon}\n        <Typography variant=\"h6\" sx={{ mt: 2, color: 'text.primary' }}>\n          {title}\n        </Typography>\n        <Typography\n          variant=\"body2\"\n          sx={{ mt: 1, color: 'text.secondary', maxWidth: 250 }}\n        >\n          {subTitle}\n        </Typography>\n      </Box>\n    </InfoCard>\n  );\n};\n"],"names":[],"mappings":";;;;;AA8BO,MAAM,qBAAkD,CAAC;AAAA,EAC9D,KAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,2BACG,QACC,EAAA,EAAA,QAAA,kBAAA,IAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,OAAS,EAAA,MAAA;AAAA,QACT,aAAe,EAAA,QAAA;AAAA,QACf,UAAY,EAAA,QAAA;AAAA,QACZ,cAAgB,EAAA,QAAA;AAAA,QAChB,SAAW,EAAA,QAAA;AAAA,QACX,EAAI,EAAA,CAAA;AAAA,QACJ,EAAI,EAAA,CAAA;AAAA;AAAA,QACJ,QAAU,EAAA,GAAA;AAAA;AAAA,QACV,EAAI,EAAA;AAAA,OACN;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,IAAA;AAAA,wBACD,GAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,IAAK,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,CAAG,EAAA,KAAA,EAAO,cAAe,EAAA,EACzD,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,wBACA,GAAA;AAAA,UAAC,UAAA;AAAA,UAAA;AAAA,YACC,OAAQ,EAAA,OAAA;AAAA,YACR,IAAI,EAAE,EAAA,EAAI,GAAG,KAAO,EAAA,gBAAA,EAAkB,UAAU,GAAI,EAAA;AAAA,YAEnD,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/HeaderDropdownComponent/HeaderDropdownComponent.esm.js

@@ -1,4 +1,5 @@
-import React, { useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
 import Menu from '@mui/material/Menu';
 import Button from '@mui/material/Button';
 import Box from '@mui/material/Box';
@@ -47,34 +48,37 @@ const HeaderDropdownComponent = ({
     "aria-controls": id,
     "aria-expanded": anchorEl ? true : void 0
   };
-  return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, isIconButton ? /* @__PURE__ */ React.createElement(IconButton, { ...commonButtonProps, color: "inherit", size }, buttonContent) : /* @__PURE__ */ React.createElement(Button, { disableRipple: true, disableTouchRipple: true, ...commonButtonProps }, buttonContent)), /* @__PURE__ */ React.createElement(
-    Menu,
-    {
-      id: `${id}-menu`,
-      anchorEl,
-      keepMounted: true,
-      open: Boolean(anchorEl),
-      onClose,
-      anchorOrigin: {
-        vertical: "bottom",
-        horizontal: "center"
-      },
-      transformOrigin: {
-        vertical: "top",
-        horizontal: "center"
-      },
-      sx: {
-        '& ul[class*="MuiMenu-list"]': {
-          py: 0
-        }
-      },
-      MenuListProps: {
-        "aria-labelledby": id,
-        sx: (theme) => menuListStyle(theme)
+  return /* @__PURE__ */ jsxs(Box, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { title: tooltip, children: isIconButton ? /* @__PURE__ */ jsx(IconButton, { ...commonButtonProps, color: "inherit", size, children: buttonContent }) : /* @__PURE__ */ jsx(Button, { disableRipple: true, disableTouchRipple: true, ...commonButtonProps, children: buttonContent }) }),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        id: `${id}-menu`,
+        anchorEl,
+        keepMounted: true,
+        open: Boolean(anchorEl),
+        onClose,
+        anchorOrigin: {
+          vertical: "bottom",
+          horizontal: "center"
+        },
+        transformOrigin: {
+          vertical: "top",
+          horizontal: "center"
+        },
+        sx: {
+          '& ul[class*="MuiMenu-list"]': {
+            py: 0
+          }
+        },
+        MenuListProps: {
+          "aria-labelledby": id,
+          sx: (theme) => menuListStyle(theme)
+        },
+        children
       }
-    },
-    children
-  ));
+    )
+  ] });
 };
 
 export { HeaderDropdownComponent };

package/dist/components/HeaderDropdownComponent/HeaderDropdownComponent.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderDropdownComponent.esm.js","sources":["../../../src/components/HeaderDropdownComponent/HeaderDropdownComponent.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 React, { useId } from 'react';\nimport Menu from '@mui/material/Menu';\nimport Button from '@mui/material/Button';\nimport { Theme } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport IconButton, { IconButtonProps } from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport { MenuItemConfig, MenuSectionConfig } from './MenuSection';\n\ninterface HeaderDropdownProps {\n  buttonContent: React.ReactNode;\n  children: React.ReactNode;\n  menuSections?: MenuSectionConfig[];\n  menuBottomItems?: MenuItemConfig[];\n  buttonProps?: React.ComponentProps<typeof Button>;\n  onOpen: (event: React.MouseEvent<HTMLElement>) => void;\n  onClose: () => void;\n  anchorEl: HTMLElement | null;\n  isIconButton?: boolean;\n  tooltip?: string;\n  size?: IconButtonProps['size'];\n}\n\nconst menuListStyle = (theme: Theme) => ({\n  fontSize: '0.875rem',\n  boxSizing: 'border-box',\n  padding: 0,\n  margin: 0,\n  minWidth: '160px',\n  borderRadius: '4px',\n  textDecoration: 'none',\n  listStyle: 'none',\n  overflow: 'auto',\n  outline: '1px solid transparent',\n  background: theme.palette.background.paper,\n  border: `1px solid ${theme.palette.divider}`,\n  color:\n    theme.palette.mode === 'dark'\n      ? theme.palette.text.disabled\n      : theme.palette.text.primary,\n  boxShadow:\n    theme.palette.mode === 'dark'\n      ? '0 2px 6px 2px rgba(0,0,0,0.50), 0 1px 2px 0 rgba(0,0,0,0.50)'\n      : '0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30)',\n  maxHeight: '60vh',\n  zIndex: 1,\n});\n\nexport const HeaderDropdownComponent: React.FC<HeaderDropdownProps> = ({\n  buttonContent,\n  children,\n  buttonProps,\n  onOpen,\n  onClose,\n  anchorEl,\n  isIconButton = false,\n  size = 'small',\n  tooltip,\n}) => {\n  const id = useId();\n\n  const commonButtonProps = {\n    ...buttonProps,\n    onClick: (event: React.MouseEvent<HTMLElement>) => {\n      onOpen(event);\n      // focus the menu when opened\n      // TODO: investigate why MUI isn't doing this for us\n      setTimeout(() => {\n        document\n          .getElementById(`${id}-menu`)\n          ?.getElementsByTagName('a')[0]\n          ?.focus();\n      }, 0);\n    },\n    'aria-haspopup': true,\n    'aria-controls': id,\n    'aria-expanded': anchorEl ? true : undefined,\n  };\n\n  return (\n    <Box>\n      <Tooltip title={tooltip}>\n        {isIconButton ? (\n          <IconButton {...commonButtonProps} color=\"inherit\" size={size}>\n            {buttonContent}\n          </IconButton>\n        ) : (\n          <Button disableRipple disableTouchRipple {...commonButtonProps}>\n            {buttonContent}\n          </Button>\n        )}\n      </Tooltip>\n      <Menu\n        id={`${id}-menu`}\n        anchorEl={anchorEl}\n        keepMounted\n        open={Boolean(anchorEl)}\n        onClose={onClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'center',\n        }}\n        sx={{\n          '& ul[class*=\"MuiMenu-list\"]': {\n            py: 0,\n          },\n        }}\n        MenuListProps={{\n          'aria-labelledby': id,\n          sx: theme => menuListStyle(theme),\n        }}\n      >\n        {children}\n      </Menu>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"HeaderDropdownComponent.esm.js","sources":["../../../src/components/HeaderDropdownComponent/HeaderDropdownComponent.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 { useId } from 'react';\nimport type { ReactNode, ComponentProps, MouseEvent, FC } from 'react';\nimport Menu from '@mui/material/Menu';\nimport Button from '@mui/material/Button';\nimport { Theme } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport IconButton, { IconButtonProps } from '@mui/material/IconButton';\nimport Tooltip from '@mui/material/Tooltip';\nimport { MenuItemConfig, MenuSectionConfig } from './MenuSection';\n\ninterface HeaderDropdownProps {\n  buttonContent: ReactNode;\n  children: ReactNode;\n  menuSections?: MenuSectionConfig[];\n  menuBottomItems?: MenuItemConfig[];\n  buttonProps?: ComponentProps<typeof Button>;\n  onOpen: (event: MouseEvent<HTMLElement>) => void;\n  onClose: () => void;\n  anchorEl: HTMLElement | null;\n  isIconButton?: boolean;\n  tooltip?: string;\n  size?: IconButtonProps['size'];\n}\n\nconst menuListStyle = (theme: Theme) => ({\n  fontSize: '0.875rem',\n  boxSizing: 'border-box',\n  padding: 0,\n  margin: 0,\n  minWidth: '160px',\n  borderRadius: '4px',\n  textDecoration: 'none',\n  listStyle: 'none',\n  overflow: 'auto',\n  outline: '1px solid transparent',\n  background: theme.palette.background.paper,\n  border: `1px solid ${theme.palette.divider}`,\n  color:\n    theme.palette.mode === 'dark'\n      ? theme.palette.text.disabled\n      : theme.palette.text.primary,\n  boxShadow:\n    theme.palette.mode === 'dark'\n      ? '0 2px 6px 2px rgba(0,0,0,0.50), 0 1px 2px 0 rgba(0,0,0,0.50)'\n      : '0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30)',\n  maxHeight: '60vh',\n  zIndex: 1,\n});\n\nexport const HeaderDropdownComponent: FC<HeaderDropdownProps> = ({\n  buttonContent,\n  children,\n  buttonProps,\n  onOpen,\n  onClose,\n  anchorEl,\n  isIconButton = false,\n  size = 'small',\n  tooltip,\n}) => {\n  const id = useId();\n\n  const commonButtonProps = {\n    ...buttonProps,\n    onClick: (event: MouseEvent<HTMLElement>) => {\n      onOpen(event);\n      // focus the menu when opened\n      // TODO: investigate why MUI isn't doing this for us\n      setTimeout(() => {\n        document\n          .getElementById(`${id}-menu`)\n          ?.getElementsByTagName('a')[0]\n          ?.focus();\n      }, 0);\n    },\n    'aria-haspopup': true,\n    'aria-controls': id,\n    'aria-expanded': anchorEl ? true : undefined,\n  };\n\n  return (\n    <Box>\n      <Tooltip title={tooltip}>\n        {isIconButton ? (\n          <IconButton {...commonButtonProps} color=\"inherit\" size={size}>\n            {buttonContent}\n          </IconButton>\n        ) : (\n          <Button disableRipple disableTouchRipple {...commonButtonProps}>\n            {buttonContent}\n          </Button>\n        )}\n      </Tooltip>\n      <Menu\n        id={`${id}-menu`}\n        anchorEl={anchorEl}\n        keepMounted\n        open={Boolean(anchorEl)}\n        onClose={onClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        transformOrigin={{\n          vertical: 'top',\n          horizontal: 'center',\n        }}\n        sx={{\n          '& ul[class*=\"MuiMenu-list\"]': {\n            py: 0,\n          },\n        }}\n        MenuListProps={{\n          'aria-labelledby': id,\n          sx: theme => menuListStyle(theme),\n        }}\n      >\n        {children}\n      </Menu>\n    </Box>\n  );\n};\n"],"names":[],"mappings":"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"}

package/dist/components/HeaderDropdownComponent/MenuSection.esm.js

@@ -1,4 +1,5 @@
-import React, { Fragment } from 'react';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Fragment as Fragment$1 } from 'react';
 import Divider from '@mui/material/Divider';
 import Box from '@mui/material/Box';
 import MenuItem from '@mui/material/MenuItem';
@@ -14,58 +15,64 @@ const MenuSection = ({
   handleClose
 }) => {
   const hasClickableSubheader = optionalLink && optionalLinkLabel && items.length > 0;
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, sectionLabel && /* @__PURE__ */ React.createElement(
-    MenuItem,
-    {
-      sx: {
-        p: 0
-      },
-      disableRipple: true,
-      disableTouchRipple: true,
-      component: hasClickableSubheader ? Link : Fragment,
-      to: optionalLink,
-      onClick: handleClose
-    },
-    /* @__PURE__ */ React.createElement(
-      ListSubheader,
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    sectionLabel && /* @__PURE__ */ jsxs(
+      MenuItem,
       {
         sx: {
-          backgroundColor: "transparent",
-          m: 0,
-          color: "text.disabled",
-          lineHeight: 2,
-          mt: "0.5rem",
-          fontWeight: 400
-        }
-      },
-      sectionLabel
+          p: 0
+        },
+        disableRipple: true,
+        disableTouchRipple: true,
+        component: hasClickableSubheader ? Link : Fragment$1,
+        to: optionalLink,
+        onClick: handleClose,
+        children: [
+          /* @__PURE__ */ jsx(
+            ListSubheader,
+            {
+              sx: {
+                backgroundColor: "transparent",
+                m: 0,
+                color: "text.disabled",
+                lineHeight: 2,
+                mt: "0.5rem",
+                fontWeight: 400
+              },
+              children: sectionLabel
+            }
+          ),
+          optionalLinkLabel && /* @__PURE__ */ jsx(
+            Box,
+            {
+              sx: {
+                fontSize: "0.875em",
+                mr: 2,
+                flexGrow: 1,
+                textAlign: "right",
+                mt: "0.5rem"
+              },
+              children: optionalLinkLabel
+            }
+          )
+        ]
+      }
     ),
-    optionalLinkLabel && /* @__PURE__ */ React.createElement(
-      Box,
+    items.map(({ icon, label, subLabel, link, Component }, index) => /* @__PURE__ */ jsx(
+      MenuItem,
       {
-        sx: {
-          fontSize: "0.875em",
-          mr: 2,
-          flexGrow: 1,
-          textAlign: "right",
-          mt: "0.5rem"
-        }
+        disableRipple: true,
+        disableTouchRipple: true,
+        onClick: handleClose,
+        sx: { py: 0.5 },
+        component: link ? Link : Fragment$1,
+        to: link,
+        children: /* @__PURE__ */ jsx(Component, { icon, to: link, title: label, subTitle: subLabel })
       },
-      optionalLinkLabel
-    )
-  ), items.map(({ icon, label, subLabel, link, Component }, index) => /* @__PURE__ */ React.createElement(
-    MenuItem,
-    {
-      key: `menu-item-${index.toString()}`,
-      disableRipple: true,
-      disableTouchRipple: true,
-      onClick: handleClose,
-      sx: { py: 0.5 },
-      component: link ? Link : Fragment,
-      to: link
-    },
-    /* @__PURE__ */ React.createElement(Component, { icon, to: link, title: label, subTitle: subLabel })
-  )), !hideDivider && /* @__PURE__ */ React.createElement(Divider, { sx: { my: 0.5 } }));
+      `menu-item-${index.toString()}`
+    )),
+    !hideDivider && /* @__PURE__ */ jsx(Divider, { sx: { my: 0.5 } })
+  ] });
 };
 
 export { MenuSection };

package/dist/components/HeaderDropdownComponent/MenuSection.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/MenuSection.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 React, { Fragment } from 'react';\nimport Divider from '@mui/material/Divider';\nimport Box from '@mui/material/Box';\nimport MenuItem from '@mui/material/MenuItem';\nimport { Link } from '@backstage/core-components';\nimport { MenuItemLinkProps } from '../MenuItemLink/MenuItemLink';\nimport ListSubheader from '@mui/material/ListSubheader';\n\n/**\n * Menu item configuration\n *\n * @public\n */\nexport interface MenuItemConfig {\n  Component: React.ComponentType<MenuItemLinkProps | {}>;\n  label: string;\n  icon?: string;\n  subLabel?: string;\n  link?: string;\n}\n\nexport interface MenuSectionConfig {\n  sectionLabel?: string;\n  optionalLink?: string;\n  optionalLinkLabel?: string;\n  items: MenuItemConfig[];\n  hideDivider?: boolean;\n  handleClose: () => void;\n}\n\nexport const MenuSection: React.FC<MenuSectionConfig> = ({\n  sectionLabel,\n  optionalLink,\n  optionalLinkLabel,\n  items,\n  hideDivider = false,\n  handleClose,\n}) => {\n  const hasClickableSubheader =\n    optionalLink && optionalLinkLabel && items.length > 0;\n\n  return (\n    <>\n      {sectionLabel && (\n        <MenuItem\n          sx={{\n            p: 0,\n          }}\n          disableRipple\n          disableTouchRipple\n          component={hasClickableSubheader ? Link : Fragment}\n          to={optionalLink}\n          onClick={handleClose}\n        >\n          <ListSubheader\n            sx={{\n              backgroundColor: 'transparent',\n              m: 0,\n              color: 'text.disabled',\n              lineHeight: 2,\n              mt: '0.5rem',\n              fontWeight: 400,\n            }}\n          >\n            {sectionLabel}\n          </ListSubheader>\n\n          {optionalLinkLabel && (\n            <Box\n              sx={{\n                fontSize: '0.875em',\n                mr: 2,\n                flexGrow: 1,\n                textAlign: 'right',\n                mt: '0.5rem',\n              }}\n            >\n              {optionalLinkLabel}\n            </Box>\n          )}\n        </MenuItem>\n      )}\n\n      {items.map(({ icon, label, subLabel, link, Component }, index) => (\n        <MenuItem\n          key={`menu-item-${index.toString()}`}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n          sx={{ py: 0.5 }}\n          component={link ? Link : Fragment}\n          to={link}\n        >\n          <Component icon={icon} to={link!} title={label} subTitle={subLabel} />\n        </MenuItem>\n      ))}\n      {!hideDivider && <Divider sx={{ my: 0.5 }} />}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;;;AA8CO,MAAM,cAA2C,CAAC;AAAA,EACvD,YAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAAA,EACd;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,qBACJ,GAAA,YAAA,IAAgB,iBAAqB,IAAA,KAAA,CAAM,MAAS,GAAA,CAAA;AAEtD,EAAA,iEAEK,YACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,CAAG,EAAA;AAAA,OACL;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,kBAAkB,EAAA,IAAA;AAAA,MAClB,SAAA,EAAW,wBAAwB,IAAO,GAAA,QAAA;AAAA,MAC1C,EAAI,EAAA,YAAA;AAAA,MACJ,OAAS,EAAA;AAAA,KAAA;AAAA,oBAET,KAAA,CAAA,aAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,eAAiB,EAAA,aAAA;AAAA,UACjB,CAAG,EAAA,CAAA;AAAA,UACH,KAAO,EAAA,eAAA;AAAA,UACP,UAAY,EAAA,CAAA;AAAA,UACZ,EAAI,EAAA,QAAA;AAAA,UACJ,UAAY,EAAA;AAAA;AACd,OAAA;AAAA,MAEC;AAAA,KACH;AAAA,IAEC,iBACC,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,QAAU,EAAA,SAAA;AAAA,UACV,EAAI,EAAA,CAAA;AAAA,UACJ,QAAU,EAAA,CAAA;AAAA,UACV,SAAW,EAAA,OAAA;AAAA,UACX,EAAI,EAAA;AAAA;AACN,OAAA;AAAA,MAEC;AAAA;AACH,GAEJ,EAGD,KAAM,CAAA,GAAA,CAAI,CAAC,EAAE,IAAM,EAAA,KAAA,EAAO,QAAU,EAAA,IAAA,EAAM,SAAU,EAAA,EAAG,KACtD,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,GAAK,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,QAAA,EAAU,CAAA,CAAA;AAAA,MAClC,aAAa,EAAA,IAAA;AAAA,MACb,kBAAkB,EAAA,IAAA;AAAA,MAClB,OAAS,EAAA,WAAA;AAAA,MACT,EAAA,EAAI,EAAE,EAAA,EAAI,GAAI,EAAA;AAAA,MACd,SAAA,EAAW,OAAO,IAAO,GAAA,QAAA;AAAA,MACzB,EAAI,EAAA;AAAA,KAAA;AAAA,oBAEJ,KAAA,CAAA,aAAA,CAAC,aAAU,IAAY,EAAA,EAAA,EAAI,MAAO,KAAO,EAAA,KAAA,EAAO,UAAU,QAAU,EAAA;AAAA,GAEvE,CACA,EAAA,CAAC,WAAe,oBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,GAAI,EAAA,EAAG,CAC7C,CAAA;AAEJ;;;;"}
+{"version":3,"file":"MenuSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/MenuSection.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';\nimport type { ComponentType, FC } from 'react';\nimport Divider from '@mui/material/Divider';\nimport Box from '@mui/material/Box';\nimport MenuItem from '@mui/material/MenuItem';\nimport { Link } from '@backstage/core-components';\nimport { MenuItemLinkProps } from '../MenuItemLink/MenuItemLink';\nimport ListSubheader from '@mui/material/ListSubheader';\n\n/**\n * Menu item configuration\n *\n * @public\n */\nexport interface MenuItemConfig {\n  Component: ComponentType<MenuItemLinkProps | {}>;\n  label: string;\n  icon?: string;\n  subLabel?: string;\n  link?: string;\n}\n\nexport interface MenuSectionConfig {\n  sectionLabel?: string;\n  optionalLink?: string;\n  optionalLinkLabel?: string;\n  items: MenuItemConfig[];\n  hideDivider?: boolean;\n  handleClose: () => void;\n}\n\nexport const MenuSection: FC<MenuSectionConfig> = ({\n  sectionLabel,\n  optionalLink,\n  optionalLinkLabel,\n  items,\n  hideDivider = false,\n  handleClose,\n}) => {\n  const hasClickableSubheader =\n    optionalLink && optionalLinkLabel && items.length > 0;\n\n  return (\n    <>\n      {sectionLabel && (\n        <MenuItem\n          sx={{\n            p: 0,\n          }}\n          disableRipple\n          disableTouchRipple\n          component={hasClickableSubheader ? Link : Fragment}\n          to={optionalLink}\n          onClick={handleClose}\n        >\n          <ListSubheader\n            sx={{\n              backgroundColor: 'transparent',\n              m: 0,\n              color: 'text.disabled',\n              lineHeight: 2,\n              mt: '0.5rem',\n              fontWeight: 400,\n            }}\n          >\n            {sectionLabel}\n          </ListSubheader>\n\n          {optionalLinkLabel && (\n            <Box\n              sx={{\n                fontSize: '0.875em',\n                mr: 2,\n                flexGrow: 1,\n                textAlign: 'right',\n                mt: '0.5rem',\n              }}\n            >\n              {optionalLinkLabel}\n            </Box>\n          )}\n        </MenuItem>\n      )}\n\n      {items.map(({ icon, label, subLabel, link, Component }, index) => (\n        <MenuItem\n          key={`menu-item-${index.toString()}`}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n          sx={{ py: 0.5 }}\n          component={link ? Link : Fragment}\n          to={link}\n        >\n          <Component icon={icon} to={link!} title={label} subTitle={subLabel} />\n        </MenuItem>\n      ))}\n      {!hideDivider && <Divider sx={{ my: 0.5 }} />}\n    </>\n  );\n};\n"],"names":["Fragment"],"mappings":";;;;;;;;AA+CO,MAAM,cAAqC,CAAC;AAAA,EACjD,YAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAAA,EACd;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,qBACJ,GAAA,YAAA,IAAgB,iBAAqB,IAAA,KAAA,CAAM,MAAS,GAAA,CAAA;AAEtD,EAAA,uBAEK,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,IACC,YAAA,oBAAA,IAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA;AAAA,UACF,CAAG,EAAA;AAAA,SACL;AAAA,QACA,aAAa,EAAA,IAAA;AAAA,QACb,kBAAkB,EAAA,IAAA;AAAA,QAClB,SAAA,EAAW,wBAAwB,IAAOA,GAAAA,UAAAA;AAAA,QAC1C,EAAI,EAAA,YAAA;AAAA,QACJ,OAAS,EAAA,WAAA;AAAA,QAET,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,aAAA;AAAA,YAAA;AAAA,cACC,EAAI,EAAA;AAAA,gBACF,eAAiB,EAAA,aAAA;AAAA,gBACjB,CAAG,EAAA,CAAA;AAAA,gBACH,KAAO,EAAA,eAAA;AAAA,gBACP,UAAY,EAAA,CAAA;AAAA,gBACZ,EAAI,EAAA,QAAA;AAAA,gBACJ,UAAY,EAAA;AAAA,eACd;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA,WACH;AAAA,UAEC,iBACC,oBAAA,GAAA;AAAA,YAAC,GAAA;AAAA,YAAA;AAAA,cACC,EAAI,EAAA;AAAA,gBACF,QAAU,EAAA,SAAA;AAAA,gBACV,EAAI,EAAA,CAAA;AAAA,gBACJ,QAAU,EAAA,CAAA;AAAA,gBACV,SAAW,EAAA,OAAA;AAAA,gBACX,EAAI,EAAA;AAAA,eACN;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA,IAGD,KAAA,CAAM,GAAI,CAAA,CAAC,EAAE,IAAA,EAAM,OAAO,QAAU,EAAA,IAAA,EAAM,SAAU,EAAA,EAAG,KACtD,qBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QAEC,aAAa,EAAA,IAAA;AAAA,QACb,kBAAkB,EAAA,IAAA;AAAA,QAClB,OAAS,EAAA,WAAA;AAAA,QACT,EAAA,EAAI,EAAE,EAAA,EAAI,GAAI,EAAA;AAAA,QACd,SAAA,EAAW,OAAO,IAAOA,GAAAA,UAAAA;AAAA,QACzB,EAAI,EAAA,IAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA,CAAC,aAAU,IAAY,EAAA,EAAA,EAAI,MAAO,KAAO,EAAA,KAAA,EAAO,UAAU,QAAU,EAAA;AAAA,OAAA;AAAA,MAR/D,CAAA,UAAA,EAAa,KAAM,CAAA,QAAA,EAAU,CAAA;AAAA,KAUrC,CAAA;AAAA,IACA,CAAC,+BAAgB,GAAA,CAAA,OAAA,EAAA,EAAQ,IAAI,EAAE,EAAA,EAAI,KAAO,EAAA;AAAA,GAC7C,EAAA,CAAA;AAEJ;;;;"}

package/dist/components/HeaderDropdownComponent/ProfileDropdown.esm.js

@@ -1,4 +1,5 @@
-import React, { useState, useRef, useEffect, useMemo } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef, useEffect, useMemo } from 'react';
 import { useUserProfile } from '@backstage/plugin-user-settings';
 import { useApi } from '@backstage/core-plugin-api';
 import { catalogApiRef } from '@backstage/plugin-catalog-react';
@@ -79,36 +80,42 @@ const ProfileDropdown = ({ layout }) => {
     }
     return name;
   };
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     HeaderDropdownComponent,
     {
-      buttonContent: /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center", ...layout } }, !profileLoading && /* @__PURE__ */ React.createElement(React.Fragment, null, profile.picture ? /* @__PURE__ */ React.createElement(
-        Avatar,
-        {
-          src: profile.picture,
-          sx: { mr: 2, height: "32px", width: "32px" },
-          alt: "Profile picture"
-        }
-      ) : /* @__PURE__ */ React.createElement(AccountCircleOutlinedIcon, { fontSize: "small", sx: { mr: 1 } }), /* @__PURE__ */ React.createElement(
-        Typography,
-        {
-          variant: "body2",
-          sx: {
-            display: { xs: "none", md: "block" },
-            fontWeight: 500,
-            mr: "1rem"
-          }
-        },
-        profileDisplayName()
-      )), /* @__PURE__ */ React.createElement(
-        KeyboardArrowDownOutlinedIcon,
-        {
-          sx: {
-            bgcolor: bgColor,
-            borderRadius: "25%"
+      buttonContent: /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", alignItems: "center", ...layout }, children: [
+        !profileLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
+          profile.picture ? /* @__PURE__ */ jsx(
+            Avatar,
+            {
+              src: profile.picture,
+              sx: { mr: 2, height: "32px", width: "32px" },
+              alt: "Profile picture"
+            }
+          ) : /* @__PURE__ */ jsx(AccountCircleOutlinedIcon, { fontSize: "small", sx: { mr: 1 } }),
+          /* @__PURE__ */ jsx(
+            Typography,
+            {
+              variant: "body2",
+              sx: {
+                display: { xs: "none", md: "block" },
+                fontWeight: 500,
+                mr: "1rem"
+              },
+              children: profileDisplayName()
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          KeyboardArrowDownOutlinedIcon,
+          {
+            sx: {
+              bgcolor: bgColor,
+              borderRadius: "25%"
+            }
           }
-        }
-      )),
+        )
+      ] }),
       buttonProps: {
         color: "inherit",
         sx: {
@@ -118,9 +125,9 @@ const ProfileDropdown = ({ layout }) => {
       },
       onOpen: handleOpen,
       onClose: handleClose,
-      anchorEl
-    },
-    /* @__PURE__ */ React.createElement(MenuSection, { hideDivider: true, items: menuItems, handleClose })
+      anchorEl,
+      children: /* @__PURE__ */ jsx(MenuSection, { hideDivider: true, items: menuItems, handleClose })
+    }
   );
 };