@red-hat-developer-hub/backstage-plugin-global-header 0.0.3 → 0.1.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @red-hat-developer-hub/backstage-plugin-global-header
 
+## 0.1.0
+
+### Minor Changes
+
+- f35b797: First version of Global Header plugin with the following components:
+
+  - GlobalHeaderComponent
+  - SearchComponent
+  - CreateDropdown
+    - SoftwareTemplatesSection
+    - RegisterAComponentSection
+  - ProfileDropdown
+    - LogoutButton
+  - HeaderButton
+  - HeaderIcon
+  - HeaderIconButton
+  - MenuItemLink
+  - Spacer
+  - Divider
+  - NotificationBanner
+
+## 0.0.4
+
+### Patch Changes
+
+- a07a84a: Update dependencies to Backstage 1.35.0
+- 02cd530: add new mountpoints for the search, create dropdown, profile dropdown, software templates, register a component, logout button, header link and header icon
+
 ## 0.0.3
 
 ### Patch Changes

package/app-config.dynamic.yaml

@@ -6,5 +6,57 @@ dynamicPlugins:
         - mountPoint: application/header
           importName: GlobalHeader
           config:
-            layout:
-              position: above-main-content
+            position: above-main-content # above-main-content | below-main-content
+        - mountPoint: global.header/component
+          importName: SearchComponent
+          config:
+            type: search
+            priority: 100
+        - mountPoint: global.header/component
+          importName: CreateDropdown
+          config:
+            type: dropdown_button
+            priority: 90
+        - mountPoint: global.header/create
+          importName: SoftwareTemplatesSection
+          config:
+            type: list
+            priority: 10
+        - mountPoint: global.header/create
+          importName: RegisterAComponentSection
+          config:
+            type: link
+        - mountPoint: global.header/component
+          importName: HeaderIconButton
+          config:
+            type: icon_button
+            priority: 80
+            props:
+              icon: support
+              tooltip: 'Support'
+        - mountPoint: global.header/component
+          importName: HeaderIconButton
+          config:
+            type: icon_button
+            priority: 70
+            props:
+              icon: notifications
+              tooltip: 'Notifications'
+        - mountPoint: global.header/component
+          importName: ProfileDropdown
+          config:
+            type: dropdown_button
+            priority: 0
+        - mountPoint: global.header/profile
+          importName: MenuItemLink
+          config:
+            type: link
+            priority: 200
+            props:
+              title: Settings
+              link: /settings
+              icon: manageAccounts
+        - mountPoint: global.header/profile
+          importName: LogoutButton
+          config:
+            priority: 100

package/dist/components/Divider/Divider.esm.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import Divider$1 from '@mui/material/Divider';
+
+const Divider = () => {
+  return /* @__PURE__ */ React.createElement(
+    Divider$1,
+    {
+      orientation: "vertical",
+      flexItem: true,
+      sx: { borderColor: "#383838", marginX: 1 }
+    }
+  );
+};
+
+export { Divider };
+//# sourceMappingURL=Divider.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.esm.js","sources":["../../../src/components/Divider/Divider.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 from 'react';\n\nimport MUIDivider from '@mui/material/Divider';\n\n/**\n * @public\n */\nexport const Divider = () => {\n  return (\n    <MUIDivider\n      orientation=\"vertical\"\n      flexItem\n      sx={{ borderColor: '#383838', marginX: 1 }}\n    />\n  );\n};\n"],"names":["MUIDivider"],"mappings":";;;AAuBO,MAAM,UAAU,MAAM;AAC3B,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAACA,SAAA;AAAA,IAAA;AAAA,MACC,WAAY,EAAA,UAAA;AAAA,MACZ,QAAQ,EAAA,IAAA;AAAA,MACR,EAAI,EAAA,EAAE,WAAa,EAAA,SAAA,EAAW,SAAS,CAAE;AAAA;AAAA,GAC3C;AAEJ;;;;"}

package/dist/components/GlobalHeader.esm.js

@@ -1,85 +1,14 @@
 import React from 'react';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import { SearchComponent } from './SearchComponent/SearchComponent.esm.js';
-import { HeaderIconButton } from './HeaderIconButton/HeaderIconButton.esm.js';
-import CreateDropdown from './HeaderDropdownComponent/CreateDropdown.esm.js';
-import ProfileDropdown from './HeaderDropdownComponent/ProfileDropdown.esm.js';
-import Divider from '@mui/material/Divider';
-import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineRounded';
-import NotificationsOutlinedIcon from '@mui/icons-material/NotificationsOutlined';
-import { useDropdownManager } from '../hooks/useDropdownManager.esm.js';
+import { useGlobalHeaderMountPoints } from '../hooks/useGlobalHeaderMountPoints.esm.js';
+import { GlobalHeaderComponent } from './GlobalHeaderComponent.esm.js';
 
-const iconButtons = [
-  {
-    key: "help",
-    Icon: HelpOutlineOutlinedIcon,
-    onClick: () => {
-    }
-  },
-  {
-    key: "notification",
-    Icon: NotificationsOutlinedIcon,
-    onClick: () => {
-    }
-  }
-];
 const GlobalHeader = () => {
-  const { menuStates, handleOpen, handleClose } = useDropdownManager();
-  const dropdownConfigs = [
-    {
-      key: "create",
-      component: CreateDropdown,
-      buttonProps: {
-        handleMenu: handleOpen("create"),
-        anchorEl: menuStates.create,
-        setAnchorEl: handleClose("create")
-      }
-    },
-    {
-      key: "profile",
-      component: ProfileDropdown,
-      buttonProps: {
-        handleMenu: handleOpen("profile"),
-        anchorEl: menuStates.profile,
-        setAnchorEl: handleClose("profile")
-      }
-    }
-  ];
+  const allGlobalHeaderMountPoints = useGlobalHeaderMountPoints();
   return /* @__PURE__ */ React.createElement(
-    AppBar,
+    GlobalHeaderComponent,
     {
-      position: "sticky",
-      component: "nav",
-      sx: { backgroundColor: "#212427" }
-    },
-    /* @__PURE__ */ React.createElement(Toolbar, null, /* @__PURE__ */ React.createElement(SearchComponent, null), /* @__PURE__ */ React.createElement(
-      CreateDropdown,
-      {
-        key: dropdownConfigs[0].key,
-        ...dropdownConfigs[0].buttonProps
-      }
-    ), iconButtons.map(({ key, Icon, onClick }) => /* @__PURE__ */ React.createElement(
-      HeaderIconButton,
-      {
-        key: `header-icon-button-${key}`,
-        Icon,
-        onClick
-      }
-    )), /* @__PURE__ */ React.createElement(
-      Divider,
-      {
-        orientation: "vertical",
-        flexItem: true,
-        sx: { borderColor: "#373A40" }
-      }
-    ), /* @__PURE__ */ React.createElement(
-      ProfileDropdown,
-      {
-        key: dropdownConfigs[1].key,
-        ...dropdownConfigs[1].buttonProps
-      }
-    ))
+      globalHeaderMountPoints: allGlobalHeaderMountPoints ?? []
+    }
   );
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"GlobalHeader.esm.js","sources":["../../src/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 React from 'react';\nimport AppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\nimport { SearchComponent } from './SearchComponent/SearchComponent';\nimport { HeaderIconButton } from './HeaderIconButton/HeaderIconButton';\nimport CreateDropdown from './HeaderDropdownComponent/CreateDropdown';\nimport ProfileDropdown from './HeaderDropdownComponent/ProfileDropdown';\nimport Divider from '@mui/material/Divider';\nimport HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineRounded';\nimport NotificationsOutlinedIcon from '@mui/icons-material/NotificationsOutlined';\nimport { useDropdownManager } from '../hooks';\n\nconst iconButtons = [\n  {\n    key: 'help',\n    Icon: HelpOutlineOutlinedIcon,\n    onClick: () => {},\n  },\n  {\n    key: 'notification',\n    Icon: NotificationsOutlinedIcon,\n    onClick: () => {},\n  },\n];\n\nexport const GlobalHeader = () => {\n  const { menuStates, handleOpen, handleClose } = useDropdownManager();\n  const dropdownConfigs = [\n    {\n      key: 'create',\n      component: CreateDropdown,\n      buttonProps: {\n        handleMenu: handleOpen('create'),\n        anchorEl: menuStates.create,\n        setAnchorEl: handleClose('create'),\n      },\n    },\n    {\n      key: 'profile',\n      component: ProfileDropdown,\n      buttonProps: {\n        handleMenu: handleOpen('profile'),\n        anchorEl: menuStates.profile,\n        setAnchorEl: handleClose('profile'),\n      },\n    },\n  ];\n\n  return (\n    <AppBar\n      position=\"sticky\"\n      component=\"nav\"\n      sx={{ backgroundColor: '#212427' }}\n    >\n      <Toolbar>\n        <SearchComponent />\n        <CreateDropdown\n          key={dropdownConfigs[0].key}\n          {...dropdownConfigs[0].buttonProps}\n        />\n        {iconButtons.map(({ key, Icon, onClick }) => (\n          <HeaderIconButton\n            key={`header-icon-button-${key}`}\n            Icon={Icon}\n            onClick={onClick}\n          />\n        ))}\n        <Divider\n          orientation=\"vertical\"\n          flexItem\n          sx={{ borderColor: '#373A40' }}\n        />\n        <ProfileDropdown\n          key={dropdownConfigs[1].key}\n          {...dropdownConfigs[1].buttonProps}\n        />\n      </Toolbar>\n    </AppBar>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;AA4BA,MAAM,WAAc,GAAA;AAAA,EAClB;AAAA,IACE,GAAK,EAAA,MAAA;AAAA,IACL,IAAM,EAAA,uBAAA;AAAA,IACN,SAAS,MAAM;AAAA;AAAC,GAClB;AAAA,EACA;AAAA,IACE,GAAK,EAAA,cAAA;AAAA,IACL,IAAM,EAAA,yBAAA;AAAA,IACN,SAAS,MAAM;AAAA;AAAC;AAEpB,CAAA;AAEO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,EAAE,UAAA,EAAY,UAAY,EAAA,WAAA,KAAgB,kBAAmB,EAAA;AACnE,EAAA,MAAM,eAAkB,GAAA;AAAA,IACtB;AAAA,MACE,GAAK,EAAA,QAAA;AAAA,MACL,SAAW,EAAA,cAAA;AAAA,MACX,WAAa,EAAA;AAAA,QACX,UAAA,EAAY,WAAW,QAAQ,CAAA;AAAA,QAC/B,UAAU,UAAW,CAAA,MAAA;AAAA,QACrB,WAAA,EAAa,YAAY,QAAQ;AAAA;AACnC,KACF;AAAA,IACA;AAAA,MACE,GAAK,EAAA,SAAA;AAAA,MACL,SAAW,EAAA,eAAA;AAAA,MACX,WAAa,EAAA;AAAA,QACX,UAAA,EAAY,WAAW,SAAS,CAAA;AAAA,QAChC,UAAU,UAAW,CAAA,OAAA;AAAA,QACrB,WAAA,EAAa,YAAY,SAAS;AAAA;AACpC;AACF,GACF;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,QAAS,EAAA,QAAA;AAAA,MACT,SAAU,EAAA,KAAA;AAAA,MACV,EAAA,EAAI,EAAE,eAAA,EAAiB,SAAU;AAAA,KAAA;AAAA,oBAEhC,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,kBACE,KAAA,CAAA,aAAA,CAAA,eAAA,EAAA,IAAgB,CACjB,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,eAAgB,CAAA,CAAC,CAAE,CAAA,GAAA;AAAA,QACvB,GAAG,eAAgB,CAAA,CAAC,CAAE,CAAA;AAAA;AAAA,KACzB,EACC,YAAY,GAAI,CAAA,CAAC,EAAE,GAAK,EAAA,IAAA,EAAM,SAC7B,qBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,sBAAsB,GAAG,CAAA,CAAA;AAAA,QAC9B,IAAA;AAAA,QACA;AAAA;AAAA,KAEH,CACD,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,WAAY,EAAA,UAAA;AAAA,QACZ,QAAQ,EAAA,IAAA;AAAA,QACR,EAAA,EAAI,EAAE,WAAA,EAAa,SAAU;AAAA;AAAA,KAE/B,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,eAAgB,CAAA,CAAC,CAAE,CAAA,GAAA;AAAA,QACvB,GAAG,eAAgB,CAAA,CAAC,CAAE,CAAA;AAAA;AAAA,KAE3B;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"GlobalHeader.esm.js","sources":["../../src/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 React from 'react';\nimport { useGlobalHeaderMountPoints } from '../hooks/useGlobalHeaderMountPoints';\nimport { GlobalHeaderComponent } from './GlobalHeaderComponent';\n\nexport const GlobalHeader = () => {\n  const allGlobalHeaderMountPoints = useGlobalHeaderMountPoints();\n\n  return (\n    <GlobalHeaderComponent\n      globalHeaderMountPoints={allGlobalHeaderMountPoints ?? []}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AAoBO,MAAM,eAAe,MAAM;AAChC,EAAA,MAAM,6BAA6B,0BAA2B,EAAA;AAE9D,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,qBAAA;AAAA,IAAA;AAAA,MACC,uBAAA,EAAyB,8BAA8B;AAAC;AAAA,GAC1D;AAEJ;;;;"}

package/dist/components/GlobalHeaderComponent.esm.js

@@ -0,0 +1,25 @@
+import React, { useMemo } from 'react';
+import { ErrorBoundary } from '@backstage/core-components';
+import AppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+
+const GlobalHeaderComponent = ({
+  globalHeaderMountPoints
+}) => {
+  const mountPoints = useMemo(() => {
+    if (!globalHeaderMountPoints) {
+      return [];
+    }
+    const filteredAndSorted = globalHeaderMountPoints.filter((component) => (component.config?.priority ?? 0) > -1).sort((a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0));
+    return filteredAndSorted;
+  }, [globalHeaderMountPoints]);
+  return /* @__PURE__ */ React.createElement(AppBar, { position: "sticky", component: "nav", id: "global-header" }, /* @__PURE__ */ React.createElement(Toolbar, { sx: { gap: 1 } }, mountPoints.map((mountPoint, index) => /* @__PURE__ */ React.createElement(ErrorBoundary, { key: `header-component-${index}` }, /* @__PURE__ */ React.createElement(
+    mountPoint.Component,
+    {
+      ...mountPoint.config?.props
+    }
+  )))));
+};
+
+export { GlobalHeaderComponent };
+//# sourceMappingURL=GlobalHeaderComponent.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GlobalHeaderComponent.esm.js","sources":["../../src/components/GlobalHeaderComponent.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 { ErrorBoundary } from '@backstage/core-components';\n\nimport AppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\n\nimport { GlobalHeaderComponentMountPoint } from '../types';\n\n/**\n * @public\n * Global Header Component properties\n */\nexport interface GlobalHeaderComponentProps {\n  globalHeaderMountPoints: GlobalHeaderComponentMountPoint[];\n}\n\nexport const GlobalHeaderComponent = ({\n  globalHeaderMountPoints,\n}: GlobalHeaderComponentProps) => {\n  const mountPoints = useMemo(() => {\n    if (!globalHeaderMountPoints) {\n      return [];\n    }\n\n    const filteredAndSorted = globalHeaderMountPoints\n      .filter(component => (component.config?.priority ?? 0) > -1)\n      .sort((a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0));\n\n    return filteredAndSorted;\n  }, [globalHeaderMountPoints]);\n\n  return (\n    <AppBar position=\"sticky\" component=\"nav\" id=\"global-header\">\n      <Toolbar sx={{ gap: 1 }}>\n        {mountPoints.map((mountPoint, index) => (\n          <ErrorBoundary key={`header-component-${index}`}>\n            <mountPoint.Component\n              {...mountPoint.config?.props}\n              // sx={mountPoint.config.layout}\n            />\n          </ErrorBoundary>\n        ))}\n      </Toolbar>\n    </AppBar>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiCO,MAAM,wBAAwB,CAAC;AAAA,EACpC;AACF,CAAkC,KAAA;AAChC,EAAM,MAAA,WAAA,GAAc,QAAQ,MAAM;AAChC,IAAA,IAAI,CAAC,uBAAyB,EAAA;AAC5B,MAAA,OAAO,EAAC;AAAA;AAGV,IAAM,MAAA,iBAAA,GAAoB,wBACvB,MAAO,CAAA,CAAA,SAAA,KAAA,CAAc,UAAU,MAAQ,EAAA,QAAA,IAAY,KAAK,CAAE,CAAA,CAAA,CAC1D,KAAK,CAAC,CAAA,EAAG,OAAO,CAAE,CAAA,MAAA,EAAQ,YAAY,CAAM,KAAA,CAAA,CAAE,MAAQ,EAAA,QAAA,IAAY,CAAE,CAAA,CAAA;AAEvE,IAAO,OAAA,iBAAA;AAAA,GACT,EAAG,CAAC,uBAAuB,CAAC,CAAA;AAE5B,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,MAAO,EAAA,EAAA,QAAA,EAAS,QAAS,EAAA,SAAA,EAAU,OAAM,EAAG,EAAA,eAAA,EAAA,kBAC1C,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,EAAI,EAAA,EAAE,KAAK,CAAE,EAAA,EAAA,EACnB,WAAY,CAAA,GAAA,CAAI,CAAC,UAAA,EAAY,KAC5B,qBAAA,KAAA,CAAA,aAAA,CAAC,aAAc,EAAA,EAAA,GAAA,EAAK,CAAoB,iBAAA,EAAA,KAAK,CAC3C,CAAA,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAW,CAAA,SAAA;AAAA,IAAX;AAAA,MACE,GAAG,WAAW,MAAQ,EAAA;AAAA;AAAA,GAG3B,CACD,CACH,CACF,CAAA;AAEJ;;;;"}

package/dist/components/HeaderButton/HeaderButton.esm.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { LinkButton } from '@backstage/core-components';
+import Tooltip from '@mui/material/Tooltip';
+import { HeaderIcon } from '../HeaderIcon/HeaderIcon.esm.js';
+
+const HeaderButton = ({
+  title,
+  tooltip,
+  color = "inherit",
+  size = "small",
+  variant,
+  ariaLabel,
+  startIcon,
+  endIcon,
+  externalLinkIcon = true,
+  to,
+  style
+}) => {
+  const button = /* @__PURE__ */ React.createElement(
+    LinkButton,
+    {
+      color,
+      size,
+      variant,
+      "aria-label": ariaLabel,
+      startIcon: startIcon ? /* @__PURE__ */ React.createElement(HeaderIcon, { icon: startIcon, size }) : null,
+      endIcon: endIcon ? /* @__PURE__ */ React.createElement(HeaderIcon, { icon: endIcon, size }) : null,
+      externalLinkIcon,
+      to,
+      style
+    },
+    title
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, /* @__PURE__ */ React.createElement("div", null, button));
+  }
+  return button;
+};
+
+export { HeaderButton };
+//# sourceMappingURL=HeaderButton.esm.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderButton.esm.js","sources":["../../../src/components/HeaderButton/HeaderButton.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 from 'react';\n\nimport { LinkButton } from '@backstage/core-components';\n\nimport Tooltip from '@mui/material/Tooltip';\nimport { HeaderIcon } from '../HeaderIcon/HeaderIcon';\n\n/**\n * @public\n */\nexport interface HeaderButtonProps {\n  title: string;\n  tooltip?: string;\n  color?: 'inherit' | 'primary' | 'secondary' | 'default';\n  size?: 'small' | 'medium' | 'large';\n  variant?: 'text' | 'outlined' | 'contained';\n  ariaLabel?: string;\n  startIcon?: string;\n  endIcon?: string;\n  externalLinkIcon?: boolean;\n  to: string;\n  style?: React.CSSProperties;\n}\n\n/**\n * @public\n */\nexport const HeaderButton = ({\n  title,\n  tooltip,\n  color = 'inherit',\n  size = 'small',\n  variant,\n  ariaLabel,\n  startIcon,\n  endIcon,\n  externalLinkIcon = true,\n  to,\n  style,\n}: HeaderButtonProps) => {\n  const button = (\n    <LinkButton\n      color={color}\n      size={size}\n      variant={variant}\n      aria-label={ariaLabel}\n      startIcon={startIcon ? <HeaderIcon icon={startIcon} size={size} /> : null}\n      endIcon={endIcon ? <HeaderIcon icon={endIcon} size={size} /> : null}\n      externalLinkIcon={externalLinkIcon}\n      to={to}\n      style={style}\n    >\n      {title}\n    </LinkButton>\n  );\n\n  if (tooltip) {\n    return (\n      <Tooltip title={tooltip}>\n        <div>{button}</div>\n      </Tooltip>\n    );\n  }\n\n  return button;\n};\n"],"names":[],"mappings":";;;;;AA2CO,MAAM,eAAe,CAAC;AAAA,EAC3B,KAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAQ,GAAA,SAAA;AAAA,EACR,IAAO,GAAA,OAAA;AAAA,EACP,OAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,OAAA;AAAA,EACA,gBAAmB,GAAA,IAAA;AAAA,EACnB,EAAA;AAAA,EACA;AACF,CAAyB,KAAA;AACvB,EAAA,MAAM,MACJ,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,IAAA;AAAA,MACA,OAAA;AAAA,MACA,YAAY,EAAA,SAAA;AAAA,MACZ,WAAW,SAAY,mBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,IAAM,EAAA,SAAA,EAAW,MAAY,CAAK,GAAA,IAAA;AAAA,MACrE,SAAS,OAAU,mBAAA,KAAA,CAAA,aAAA,CAAC,cAAW,IAAM,EAAA,OAAA,EAAS,MAAY,CAAK,GAAA,IAAA;AAAA,MAC/D,gBAAA;AAAA,MACA,EAAA;AAAA,MACA;AAAA,KAAA;AAAA,IAEC;AAAA,GACH;AAGF,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,2CACG,OAAQ,EAAA,EAAA,KAAA,EAAO,2BACb,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAK,MAAO,CACf,CAAA;AAAA;AAIJ,EAAO,OAAA,MAAA;AACT;;;;"}

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

@@ -1,80 +1,52 @@
-import React from 'react';
-import HeaderDropdownComponent from './HeaderDropdownComponent.esm.js';
+import React, { useMemo } from 'react';
 import ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';
-import CategoryOutlinedIcon from '@mui/icons-material/CategoryOutlined';
+import { ComponentType } from '../../types.esm.js';
+import { useCreateDropdownMountPoints } from '../../hooks/useCreateDropdownMountPoints.esm.js';
+import { useDropdownManager } from '../../hooks/useDropdownManager.esm.js';
+import { HeaderDropdownComponent } from './HeaderDropdownComponent.esm.js';
 
-const models = [
-  {
-    key: "key-1",
-    value: "argocd-template",
-    label: "Add ArgoCD to an existing project"
-  },
-  {
-    key: "key-2",
-    value: "create-backend-plugin",
-    label: "Create Backend Plugin Template"
-  },
-  {
-    key: "key-3",
-    value: "create-frontend-plugin",
-    label: "Create Frontend Plugin Template"
-  },
-  {
-    key: "key-4",
-    value: "create-react-app-template-test-annotator",
-    label: "Create React App Template with annotations"
-  },
-  {
-    key: "key-5",
-    value: "define-ansible-job-template",
-    label: "Ansible Job Template"
+const CreateDropdown = () => {
+  const { anchorEl, handleOpen, handleClose } = useDropdownManager();
+  const createDropdownMountPoints = useCreateDropdownMountPoints();
+  const menuSections = useMemo(() => {
+    return (createDropdownMountPoints ?? []).map((mp) => ({
+      Component: mp.Component,
+      type: mp.config?.type ?? ComponentType.LINK,
+      priority: mp.config?.priority ?? 0
+    })).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  }, [createDropdownMountPoints]);
+  if (menuSections.length === 0) {
+    return null;
   }
-];
-const menuBottomItems = [
-  {
-    itemKey: "custom",
-    icon: CategoryOutlinedIcon,
-    label: "Register a component",
-    subLabel: "Import it to the catalog page",
-    link: "/catalog-import"
-  }
-];
-const CreateDropdown = ({
-  handleMenu,
-  anchorEl,
-  setAnchorEl
-}) => {
-  const menuSections = [
-    {
-      sectionKey: "templates",
-      sectionLabel: "Use a template",
-      optionalLinkLabel: "All templates",
-      optionalLink: "/create",
-      items: models.map((m) => ({
-        itemKey: m.key,
-        label: m.label,
-        link: `/create/templates/default/${m.value}`
-      })),
-      handleClose: () => setAnchorEl(null)
-    }
-  ];
   return /* @__PURE__ */ React.createElement(
     HeaderDropdownComponent,
     {
       buttonContent: /* @__PURE__ */ React.createElement(React.Fragment, null, "Create ", /* @__PURE__ */ React.createElement(ArrowDropDownOutlinedIcon, { sx: { ml: 1 } })),
-      menuSections,
-      menuBottomItems,
       buttonProps: {
-        color: "primary",
-        variant: "contained",
-        sx: { mr: 2 }
+        variant: "outlined",
+        sx: {
+          color: "#fff",
+          border: "1px solid rgba(255, 255, 255, 0.5)",
+          "&:hover, &.Mui-focusVisible": {
+            border: "1px solid #fff"
+          },
+          mr: 1.5
+        }
       },
-      buttonClick: handleMenu,
-      anchorEl,
-      setAnchorEl
-    }
+      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
+      }
+    ))
   );
 };
 
-export { CreateDropdown as default };
+export { CreateDropdown };
 //# sourceMappingURL=CreateDropdown.esm.js.map

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 from 'react';\nimport HeaderDropdownComponent from './HeaderDropdownComponent';\nimport ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';\nimport CategoryOutlinedIcon from '@mui/icons-material/CategoryOutlined';\nimport { MenuItemConfig } from './MenuSection';\n\ninterface CreateButtonProps {\n  handleMenu: (event: React.MouseEvent<HTMLElement>) => void;\n  anchorEl: HTMLElement | null;\n  setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n}\n\nconst models = [\n  {\n    key: 'key-1',\n    value: 'argocd-template',\n    label: 'Add ArgoCD to an existing project',\n  },\n  {\n    key: 'key-2',\n    value: 'create-backend-plugin',\n    label: 'Create Backend Plugin Template',\n  },\n  {\n    key: 'key-3',\n    value: 'create-frontend-plugin',\n    label: 'Create Frontend Plugin Template',\n  },\n  {\n    key: 'key-4',\n    value: 'create-react-app-template-test-annotator',\n    label: 'Create React App Template with annotations',\n  },\n  {\n    key: 'key-5',\n    value: 'define-ansible-job-template',\n    label: 'Ansible Job Template',\n  },\n];\n\nconst menuBottomItems: MenuItemConfig[] = [\n  {\n    itemKey: 'custom',\n    icon: CategoryOutlinedIcon,\n    label: 'Register a component',\n    subLabel: 'Import it to the catalog page',\n    link: '/catalog-import',\n  },\n];\nconst CreateDropdown: React.FC<CreateButtonProps> = ({\n  handleMenu,\n  anchorEl,\n  setAnchorEl,\n}) => {\n  const menuSections = [\n    {\n      sectionKey: 'templates',\n      sectionLabel: 'Use a template',\n      optionalLinkLabel: 'All templates',\n      optionalLink: '/create',\n      items: models.map(m => ({\n        itemKey: m.key,\n        label: m.label,\n        link: `/create/templates/default/${m.value}`,\n      })),\n      handleClose: () => setAnchorEl(null),\n    },\n  ];\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <>\n          Create <ArrowDropDownOutlinedIcon sx={{ ml: 1 }} />\n        </>\n      }\n      menuSections={menuSections}\n      menuBottomItems={menuBottomItems}\n      buttonProps={{\n        color: 'primary',\n        variant: 'contained',\n        sx: { mr: 2 },\n      }}\n      buttonClick={handleMenu}\n      anchorEl={anchorEl}\n      setAnchorEl={setAnchorEl}\n    />\n  );\n};\n\nexport default CreateDropdown;\n"],"names":[],"mappings":";;;;;AA4BA,MAAM,MAAS,GAAA;AAAA,EACb;AAAA,IACE,GAAK,EAAA,OAAA;AAAA,IACL,KAAO,EAAA,iBAAA;AAAA,IACP,KAAO,EAAA;AAAA,GACT;AAAA,EACA;AAAA,IACE,GAAK,EAAA,OAAA;AAAA,IACL,KAAO,EAAA,uBAAA;AAAA,IACP,KAAO,EAAA;AAAA,GACT;AAAA,EACA;AAAA,IACE,GAAK,EAAA,OAAA;AAAA,IACL,KAAO,EAAA,wBAAA;AAAA,IACP,KAAO,EAAA;AAAA,GACT;AAAA,EACA;AAAA,IACE,GAAK,EAAA,OAAA;AAAA,IACL,KAAO,EAAA,0CAAA;AAAA,IACP,KAAO,EAAA;AAAA,GACT;AAAA,EACA;AAAA,IACE,GAAK,EAAA,OAAA;AAAA,IACL,KAAO,EAAA,6BAAA;AAAA,IACP,KAAO,EAAA;AAAA;AAEX,CAAA;AAEA,MAAM,eAAoC,GAAA;AAAA,EACxC;AAAA,IACE,OAAS,EAAA,QAAA;AAAA,IACT,IAAM,EAAA,oBAAA;AAAA,IACN,KAAO,EAAA,sBAAA;AAAA,IACP,QAAU,EAAA,+BAAA;AAAA,IACV,IAAM,EAAA;AAAA;AAEV,CAAA;AACA,MAAM,iBAA8C,CAAC;AAAA,EACnD,UAAA;AAAA,EACA,QAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,MAAM,YAAe,GAAA;AAAA,IACnB;AAAA,MACE,UAAY,EAAA,WAAA;AAAA,MACZ,YAAc,EAAA,gBAAA;AAAA,MACd,iBAAmB,EAAA,eAAA;AAAA,MACnB,YAAc,EAAA,SAAA;AAAA,MACd,KAAA,EAAO,MAAO,CAAA,GAAA,CAAI,CAAM,CAAA,MAAA;AAAA,QACtB,SAAS,CAAE,CAAA,GAAA;AAAA,QACX,OAAO,CAAE,CAAA,KAAA;AAAA,QACT,IAAA,EAAM,CAA6B,0BAAA,EAAA,CAAA,CAAE,KAAK,CAAA;AAAA,OAC1C,CAAA,CAAA;AAAA,MACF,WAAA,EAAa,MAAM,WAAA,CAAY,IAAI;AAAA;AACrC,GACF;AACA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,uBAAA;AAAA,IAAA;AAAA,MACC,aAAA,kBACI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,SAAA,kBACQ,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA,EAA0B,IAAI,EAAE,EAAA,EAAI,CAAE,EAAA,EAAG,CACnD,CAAA;AAAA,MAEF,YAAA;AAAA,MACA,eAAA;AAAA,MACA,WAAa,EAAA;AAAA,QACX,KAAO,EAAA,SAAA;AAAA,QACP,OAAS,EAAA,WAAA;AAAA,QACT,EAAA,EAAI,EAAE,EAAA,EAAI,CAAE;AAAA,OACd;AAAA,MACA,WAAa,EAAA,UAAA;AAAA,MACb,QAAA;AAAA,MACA;AAAA;AAAA,GACF;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 React, { useMemo } from 'react';\n\nimport ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';\n\nimport { ComponentType } from '../../types';\nimport { MenuItemConfig } from './MenuSection';\nimport { useCreateDropdownMountPoints } from '../../hooks/useCreateDropdownMountPoints';\nimport { useDropdownManager } from '../../hooks';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\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\nexport const CreateDropdown = () => {\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        type: mp.config?.type ?? ComponentType.LINK,\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        <>\n          Create <ArrowDropDownOutlinedIcon sx={{ ml: 1 }} />\n        </>\n      }\n      buttonProps={{\n        variant: 'outlined',\n        sx: {\n          color: '#fff',\n          border: '1px solid rgba(255, 255, 255, 0.5)',\n          '&:hover, &.Mui-focusVisible': {\n            border: '1px solid #fff',\n          },\n          mr: 1.5,\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":";;;;;;;AAoCO,MAAM,iBAAiB,MAAM;AAClC,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,IAAM,EAAA,EAAA,CAAG,MAAQ,EAAA,IAAA,IAAQ,aAAc,CAAA,IAAA;AAAA,MACvC,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,aAAA,kBACI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,SAAA,kBACQ,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA,EAA0B,IAAI,EAAE,EAAA,EAAI,CAAE,EAAA,EAAG,CACnD,CAAA;AAAA,MAEF,WAAa,EAAA;AAAA,QACX,OAAS,EAAA,UAAA;AAAA,QACT,EAAI,EAAA;AAAA,UACF,KAAO,EAAA,MAAA;AAAA,UACP,MAAQ,EAAA,oCAAA;AAAA,UACR,6BAA+B,EAAA;AAAA,YAC7B,MAAQ,EAAA;AAAA,WACV;AAAA,UACA,EAAI,EAAA;AAAA;AACN,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;;;;"}

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

@@ -1,12 +1,8 @@
 import React from 'react';
 import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
 import Button from '@mui/material/Button';
-import Typography from '@mui/material/Typography';
-import { Link } from '@backstage/core-components';
 import { styled } from '@mui/material/styles';
 import Box from '@mui/material/Box';
-import MenuSection from './MenuSection.esm.js';
 
 const Listbox = styled("ul")(
   ({ theme }) => `
@@ -15,35 +11,36 @@ const Listbox = styled("ul")(
   padding: 0;
   margin: 0;
   min-width: 160px;
-  border-radius: 3px;
+  border-radius: 4px;
   text-decoration: none;
   list-style: none;
   overflow: auto;
   outline: 1;
-  background: ${theme.palette.mode === "dark" ? theme.palette.background.default : "#fff"};
-  border: 1px solid ${theme.palette.mode === "dark" ? theme.palette.divider : theme.palette.background.default};
+  background: ${theme.palette.background.paper};
+  border: 1px solid ${theme.palette.divider};
   color: ${theme.palette.mode === "dark" ? theme.palette.text.disabled : theme.palette.text.primary};
-  box-shadow: 0 4px 6px ${theme.palette.mode === "dark" ? "rgba(0,0,0, 0.50)" : "rgba(0,0,0, 0.05)"};
+  boxShadow: theme.palette.mode === 'dark'
+    ? '0 2px 6px 2px rgba(0,0,0,0.50), 0 1px 2px 0 rgba(0,0,0,0.50)'
+    : '0 2px 6px 2px rgba(0,0,0,0.15), 0 1px 2px 0 rgba(0,0,0,0.30)',
+  max-height: 60vh;
   z-index: 1;
   `
 );
 const HeaderDropdownComponent = ({
   buttonContent,
-  menuSections = [],
-  menuBottomItems = [],
+  children,
   buttonProps,
-  buttonClick,
-  anchorEl,
-  setAnchorEl
+  onOpen,
+  onClose,
+  anchorEl
 }) => {
-  const shouldHideDivider = (index) => menuSections.length === 1 && index === menuSections.length - 1 && menuBottomItems.length === 0;
   return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
     Button,
     {
       disableRipple: true,
       disableTouchRipple: true,
       ...buttonProps,
-      onClick: buttonClick
+      onClick: onOpen
     },
     buttonContent
   ), /* @__PURE__ */ React.createElement(
@@ -53,7 +50,7 @@ const HeaderDropdownComponent = ({
       anchorEl,
       keepMounted: true,
       open: Boolean(anchorEl),
-      onClose: () => setAnchorEl(null),
+      onClose,
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "center"
@@ -68,50 +65,9 @@ const HeaderDropdownComponent = ({
         }
       }
     },
-    /* @__PURE__ */ React.createElement(Listbox, { role: "menu" }, menuSections.map((section, index) => /* @__PURE__ */ React.createElement(
-      MenuSection,
-      {
-        key: `menu-section-${section.sectionKey}`,
-        ...{ hideDivider: shouldHideDivider(index), ...section },
-        handleClose: section.handleClose
-      }
-    )), menuBottomItems.map(
-      ({ itemKey, icon: Icon, label, subLabel, link }) => /* @__PURE__ */ React.createElement(
-        MenuItem,
-        {
-          key: `menu-item-${itemKey}`,
-          sx: { my: "8px", "&:hover": { background: "transparent" } },
-          onClick: () => setAnchorEl(null),
-          disableRipple: true
-        },
-        link && /* @__PURE__ */ React.createElement(
-          Link,
-          {
-            to: link,
-            style: {
-              display: "flex",
-              color: "inherit",
-              alignItems: "center",
-              textDecoration: "none"
-            }
-          },
-          Icon && /* @__PURE__ */ React.createElement(
-            Icon,
-            {
-              fontSize: "small",
-              style: {
-                marginRight: "0.5rem",
-                flexShrink: 0,
-                color: "slategray"
-              }
-            }
-          ),
-          /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(Typography, { variant: "body2" }, label), subLabel && /* @__PURE__ */ React.createElement(Typography, { variant: "caption", color: "text.secondary" }, subLabel))
-        )
-      )
-    ))
+    /* @__PURE__ */ React.createElement(Listbox, { role: "menu" }, children)
   ));
 };
 
-export { HeaderDropdownComponent as default };
+export { HeaderDropdownComponent };
 //# sourceMappingURL=HeaderDropdownComponent.esm.js.map

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 from 'react';\nimport Menu from '@mui/material/Menu';\nimport MenuItem from '@mui/material/MenuItem';\nimport Button from '@mui/material/Button';\nimport Typography from '@mui/material/Typography';\nimport { Link } from '@backstage/core-components';\nimport { styled } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\nimport MenuSection, { MenuItemConfig, MenuSectionConfig } from './MenuSection';\n\ninterface HeaderDropdownProps {\n  buttonContent: React.ReactNode;\n  menuSections?: MenuSectionConfig[];\n  menuBottomItems?: MenuItemConfig[];\n  buttonProps?: React.ComponentProps<typeof Button>;\n  buttonClick?: (event: React.MouseEvent<HTMLElement>) => void;\n  anchorEl: HTMLElement | null;\n  setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n}\n\nconst Listbox = styled('ul')(\n  ({ theme }) => `\n  font-size: 0.875rem;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  min-width: 160px;\n  border-radius: 3px;\n  text-decoration: none;\n  list-style: none;\n  overflow: auto;\n  outline: 1;\n  background: ${\n    theme.palette.mode === 'dark' ? theme.palette.background.default : '#fff'\n  };\n  border: 1px solid ${\n    theme.palette.mode === 'dark'\n      ? theme.palette.divider\n      : theme.palette.background.default\n  };\n  color: ${\n    theme.palette.mode === 'dark'\n      ? theme.palette.text.disabled\n      : theme.palette.text.primary\n  };\n  box-shadow: 0 4px 6px ${\n    theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'\n  };\n  z-index: 1;\n  `,\n);\n\nconst HeaderDropdownComponent: React.FC<HeaderDropdownProps> = ({\n  buttonContent,\n  menuSections = [],\n  menuBottomItems = [],\n  buttonProps,\n  buttonClick,\n  anchorEl,\n  setAnchorEl,\n}) => {\n  const shouldHideDivider = (index: number) =>\n    menuSections.length === 1 &&\n    index === menuSections.length - 1 &&\n    menuBottomItems.length === 0;\n\n  return (\n    <Box>\n      <Button\n        disableRipple\n        disableTouchRipple\n        {...buttonProps}\n        onClick={buttonClick}\n      >\n        {buttonContent}\n      </Button>\n      <Menu\n        id=\"menu-appbar\"\n        anchorEl={anchorEl}\n        keepMounted\n        open={Boolean(anchorEl)}\n        onClose={() => setAnchorEl(null)}\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      >\n        <Listbox role=\"menu\">\n          {menuSections.map((section, index) => (\n            <MenuSection\n              key={`menu-section-${section.sectionKey}`}\n              {...{ hideDivider: shouldHideDivider(index), ...section }}\n              handleClose={section.handleClose}\n            />\n          ))}\n          {menuBottomItems.map(\n            ({ itemKey, icon: Icon, label, subLabel, link }) => (\n              <MenuItem\n                key={`menu-item-${itemKey}`}\n                sx={{ my: '8px', '&:hover': { background: 'transparent' } }}\n                onClick={() => setAnchorEl(null)}\n                disableRipple\n              >\n                {link && (\n                  <Link\n                    to={link}\n                    style={{\n                      display: 'flex',\n                      color: 'inherit',\n                      alignItems: 'center',\n                      textDecoration: 'none',\n                    }}\n                  >\n                    {Icon && (\n                      <Icon\n                        fontSize=\"small\"\n                        style={{\n                          marginRight: '0.5rem',\n                          flexShrink: 0,\n                          color: 'slategray',\n                        }}\n                      />\n                    )}\n                    <Box>\n                      <Typography variant=\"body2\">{label}</Typography>\n                      {subLabel && (\n                        <Typography variant=\"caption\" color=\"text.secondary\">\n                          {subLabel}\n                        </Typography>\n                      )}\n                    </Box>\n                  </Link>\n                )}\n              </MenuItem>\n            ),\n          )}\n        </Listbox>\n      </Menu>\n    </Box>\n  );\n};\n\nexport default HeaderDropdownComponent;\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 React from 'react';\nimport Menu from '@mui/material/Menu';\nimport Button from '@mui/material/Button';\nimport { styled } from '@mui/material/styles';\nimport Box from '@mui/material/Box';\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}\n\nconst Listbox = styled('ul')(\n  ({ theme }) => `\n  font-size: 0.875rem;\n  box-sizing: border-box;\n  padding: 0;\n  margin: 0;\n  min-width: 160px;\n  border-radius: 4px;\n  text-decoration: none;\n  list-style: none;\n  overflow: auto;\n  outline: 1;\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  };\n  boxShadow: 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  max-height: 60vh;\n  z-index: 1;\n  `,\n);\n\nexport const HeaderDropdownComponent: React.FC<HeaderDropdownProps> = ({\n  buttonContent,\n  children,\n  buttonProps,\n  onOpen,\n  onClose,\n  anchorEl,\n}) => {\n  return (\n    <Box>\n      <Button\n        disableRipple\n        disableTouchRipple\n        {...buttonProps}\n        onClick={onOpen}\n      >\n        {buttonContent}\n      </Button>\n      <Menu\n        id=\"menu-appbar\"\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      >\n        <Listbox role=\"menu\">{children}</Listbox>\n      </Menu>\n    </Box>\n  );\n};\n"],"names":[],"mappings":";;;;;;AAkCA,MAAM,OAAA,GAAU,OAAO,IAAI,CAAA;AAAA,EACzB,CAAC,EAAE,KAAA,EAAY,KAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAWD,EAAA,KAAA,CAAM,OAAQ,CAAA,UAAA,CAAW,KAAK,CAAA;AAAA,oBACxB,EAAA,KAAA,CAAM,QAAQ,OAAO,CAAA;AAAA,SAEvC,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,MACnB,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAK,QACnB,GAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,CAAK,OACzB,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA;AAOF,CAAA;AAEO,MAAM,0BAAyD,CAAC;AAAA,EACrE,aAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAM,KAAA;AACJ,EAAA,2CACG,GACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,aAAa,EAAA,IAAA;AAAA,MACb,kBAAkB,EAAA,IAAA;AAAA,MACjB,GAAG,WAAA;AAAA,MACJ,OAAS,EAAA;AAAA,KAAA;AAAA,IAER;AAAA,GAEH,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,IAAA;AAAA,IAAA;AAAA,MACC,EAAG,EAAA,aAAA;AAAA,MACH,QAAA;AAAA,MACA,WAAW,EAAA,IAAA;AAAA,MACX,IAAA,EAAM,QAAQ,QAAQ,CAAA;AAAA,MACtB,OAAA;AAAA,MACA,YAAc,EAAA;AAAA,QACZ,QAAU,EAAA,QAAA;AAAA,QACV,UAAY,EAAA;AAAA,OACd;AAAA,MACA,eAAiB,EAAA;AAAA,QACf,QAAU,EAAA,KAAA;AAAA,QACV,UAAY,EAAA;AAAA,OACd;AAAA,MACA,EAAI,EAAA;AAAA,QACF,6BAA+B,EAAA;AAAA,UAC7B,EAAI,EAAA;AAAA;AACN;AACF,KAAA;AAAA,oBAEC,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,IAAK,EAAA,MAAA,EAAA,EAAQ,QAAS;AAAA,GAEnC,CAAA;AAEJ;;;;"}