@red-hat-developer-hub/backstage-plugin-global-header 0.0.4 → 0.2.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @red-hat-developer-hub/backstage-plugin-global-header
 
+## 0.2.0
+
+### Minor Changes
+
+- e19aed1: Remove ComponmentType to simplify API and add layout prop to the header components to support some responsive design tweaks in dynamic plugin config. Moved some local styles to the incl. app config as well and hide the username on xs and sm screen sizes.
+
+## 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

package/app-config.dynamic.yaml

@@ -6,66 +6,59 @@ dynamicPlugins:
         - mountPoint: application/header
           importName: GlobalHeader
           config:
-            layout:
-              position: above-main-content # above-main-content | below-main-content
+            position: above-main-content # above-main-content | below-main-content
+
         - mountPoint: global.header/component
           importName: SearchComponent
           config:
-            type: search
-            slot: header-start
             priority: 100
+
         - mountPoint: global.header/component
-          importName: CreateDropdown
+          importName: Spacer
           config:
-            type: dropdown_button
-            key: create
-            slot: header-start
-            priority: 90
-        - mountPoint: global.header/create
-          importName: SoftwareTemplatesSection
-          config:
-            type: list
-            priority: 10
-        - mountPoint: global.header/create
-          importName: RegisterAComponentSection
-          config:
-            type: link
+            priority: 99
+            props:
+              growFactor: 0
+
         - mountPoint: global.header/component
           importName: HeaderIconButton
           config:
-            type: icon_button
-            slot: header-start
-            priority: 80
+            priority: 90
             props:
-              icon: support
-              tooltip: 'Support'
+              title: Create...
+              icon: add
+              to: create
+
         - mountPoint: global.header/component
-          importName: HeaderIconButton
+          importName: SupportButton
+          config:
+            priority: 80
+
+        - mountPoint: global.header/component
+          importName: NotificationButton
           config:
-            type: icon_button
-            slot: header-start
             priority: 70
-            props:
-              icon: notifications
-              tooltip: 'Notifications'
+
+        - mountPoint: global.header/component
+          importName: Divider
+          config:
+            priority: 50
+
         - mountPoint: global.header/component
           importName: ProfileDropdown
           config:
-            type: dropdown_button
-            key: profile
-            slot: header-end
-            priority: 0
+            priority: 10
+
         - mountPoint: global.header/profile
-          importName: HeaderLink
+          importName: MenuItemLink
           config:
-            type: link
-            priority: 10
+            priority: 100
             props:
               title: Settings
               link: /settings
               icon: manageAccounts
+
         - mountPoint: global.header/profile
           importName: LogoutButton
           config:
-            type: logout
-            priority: 0
+            priority: 10

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import Divider$1 from '@mui/material/Divider';
+
+const Divider = ({ layout }) => {
+  return /* @__PURE__ */ React.createElement(
+    Divider$1,
+    {
+      orientation: "vertical",
+      flexItem: true,
+      sx: { borderColor: "#383838", marginX: 1, ...layout }
+    }
+  );
+};
+
+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 interface DividerProps {\n  layout?: React.CSSProperties;\n}\n\n/**\n * @public\n */\nexport const Divider = ({ layout }: DividerProps) => {\n  return (\n    <MUIDivider\n      orientation=\"vertical\"\n      flexItem\n      sx={{ borderColor: '#383838', marginX: 1, ...layout }}\n    />\n  );\n};\n"],"names":["MUIDivider"],"mappings":";;;AA8BO,MAAM,OAAU,GAAA,CAAC,EAAE,MAAA,EAA2B,KAAA;AACnD,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAACA,SAAA;AAAA,IAAA;AAAA,MACC,WAAY,EAAA,UAAA;AAAA,MACZ,QAAQ,EAAA,IAAA;AAAA,MACR,IAAI,EAAE,WAAA,EAAa,WAAW,OAAS,EAAA,CAAA,EAAG,GAAG,MAAO;AAAA;AAAA,GACtD;AAEJ;;;;"}

package/dist/components/GlobalHeader.esm.js

@@ -1,99 +1,14 @@
-import React, { useMemo } from 'react';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import Divider from '@mui/material/Divider';
-import { useDropdownManager } from '../hooks/useDropdownManager.esm.js';
+import React from 'react';
 import { useGlobalHeaderMountPoints } from '../hooks/useGlobalHeaderMountPoints.esm.js';
-import { Slot, ComponentType } from '../types.esm.js';
-import { ErrorBoundary } from '@backstage/core-components';
-import { useApi, configApiRef } from '@backstage/core-plugin-api';
+import { GlobalHeaderComponent } from './GlobalHeaderComponent.esm.js';
 
 const GlobalHeader = () => {
-  const config = useApi(configApiRef);
-  const frontendConfig = config.getOptionalConfig("dynamicPlugins.frontend");
-  const frontendData = frontendConfig?.get();
   const allGlobalHeaderMountPoints = useGlobalHeaderMountPoints();
-  const filteredAndSortedGlobalHeaderComponents = useMemo(() => {
-    if (!allGlobalHeaderMountPoints) {
-      return [];
-    }
-    const filteredAndSorted = allGlobalHeaderMountPoints.filter(
-      (component) => (component.config?.priority ?? 0) > -1
-    );
-    filteredAndSorted.sort(
-      (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0)
-    );
-    return filteredAndSorted;
-  }, [allGlobalHeaderMountPoints]);
-  const globalHeaderStartComponentsMountPoints = filteredAndSortedGlobalHeaderComponents.filter(
-    (component) => component.config?.slot === Slot.HEADER_START
-  );
-  const globalHeaderEndComponentsMountPoints = filteredAndSortedGlobalHeaderComponents.filter(
-    (component) => component.config?.slot === Slot.HEADER_END
-  );
-  const { menuStates, handleOpen, handleClose } = useDropdownManager();
-  const getDropdownButtonProps = (key) => ({
-    handleMenu: handleOpen(key),
-    anchorEl: menuStates[key],
-    setAnchorEl: handleClose(key)
-  });
-  const getIconButtonProps = (props) => ({
-    icon: props.icon ?? "",
-    tooltip: props.tooltip ?? "",
-    to: props.to ?? ""
-  });
-  const renderComponents = (mountPoints) => mountPoints.map((mp, index) => {
-    let displayHeaderIcon = false;
-    if (frontendData) {
-      for (const pluginData of Object.values(frontendData)) {
-        const dynamicRoutes = pluginData.dynamicRoutes ?? [];
-        if (dynamicRoutes.some(
-          (route) => route.path === mp.config?.props?.to
-        )) {
-          displayHeaderIcon = true;
-          break;
-        }
-      }
-    }
-    switch (mp.config?.type) {
-      case ComponentType.SEARCH:
-        return /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(mp.Component, { key: index }));
-      case ComponentType.DROPDOWN_BUTTON:
-        return /* @__PURE__ */ React.createElement(ErrorBoundary, null, /* @__PURE__ */ React.createElement(
-          mp.Component,
-          {
-            key: index,
-            ...getDropdownButtonProps(mp.config?.key ?? index.toString()),
-            ...mp.config?.props
-          }
-        ));
-      case ComponentType.ICON_BUTTON:
-        return /* @__PURE__ */ React.createElement(ErrorBoundary, null, displayHeaderIcon && /* @__PURE__ */ React.createElement(
-          mp.Component,
-          {
-            key: index,
-            ...getIconButtonProps(mp.config?.props ?? {})
-          }
-        ));
-      default:
-        return null;
-    }
-  });
   return /* @__PURE__ */ React.createElement(
-    AppBar,
+    GlobalHeaderComponent,
     {
-      position: "sticky",
-      component: "nav",
-      sx: { backgroundColor: "#212427" }
-    },
-    /* @__PURE__ */ React.createElement(Toolbar, null, renderComponents(globalHeaderStartComponentsMountPoints), globalHeaderStartComponentsMountPoints.length > 0 && globalHeaderEndComponentsMountPoints.length > 0 && /* @__PURE__ */ React.createElement(
-      Divider,
-      {
-        orientation: "vertical",
-        flexItem: true,
-        sx: { borderColor: "#4F5255", marginX: 1 }
-      }
-    ), renderComponents(globalHeaderEndComponentsMountPoints))
+      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, { useMemo } from 'react';\nimport AppBar from '@mui/material/AppBar';\nimport Toolbar from '@mui/material/Toolbar';\nimport Divider from '@mui/material/Divider';\nimport { useDropdownManager } from '../hooks';\nimport { useGlobalHeaderMountPoints } from '../hooks/useGlobalHeaderMountPoints';\nimport { ComponentType, GlobalHeaderComponentMountPoint, Slot } from '../types';\nimport { ErrorBoundary } from '@backstage/core-components';\nimport { configApiRef, useApi } from '@backstage/core-plugin-api';\n\nexport const GlobalHeader = () => {\n  const config = useApi(configApiRef);\n  const frontendConfig = config.getOptionalConfig('dynamicPlugins.frontend');\n  const frontendData = frontendConfig?.get();\n\n  const allGlobalHeaderMountPoints = useGlobalHeaderMountPoints();\n\n  const filteredAndSortedGlobalHeaderComponents = useMemo(() => {\n    if (!allGlobalHeaderMountPoints) {\n      return [];\n    }\n\n    const filteredAndSorted = allGlobalHeaderMountPoints.filter(\n      component => (component.config?.priority ?? 0) > -1,\n    );\n\n    filteredAndSorted.sort(\n      (a, b) => (b.config?.priority ?? 0) - (a.config?.priority ?? 0),\n    );\n\n    return filteredAndSorted;\n  }, [allGlobalHeaderMountPoints]);\n\n  const globalHeaderStartComponentsMountPoints =\n    filteredAndSortedGlobalHeaderComponents.filter(\n      component => component.config?.slot === Slot.HEADER_START,\n    );\n\n  const globalHeaderEndComponentsMountPoints =\n    filteredAndSortedGlobalHeaderComponents.filter(\n      component => component.config?.slot === Slot.HEADER_END,\n    );\n\n  const { menuStates, handleOpen, handleClose } = useDropdownManager();\n\n  const getDropdownButtonProps = (key: string) => ({\n    handleMenu: handleOpen(key),\n    anchorEl: menuStates[key],\n    setAnchorEl: handleClose(key),\n  });\n\n  const getIconButtonProps = (props: Record<string, any>) => ({\n    icon: props.icon ?? '',\n    tooltip: props.tooltip ?? '',\n    to: props.to ?? '',\n  });\n  const renderComponents = (mountPoints: GlobalHeaderComponentMountPoint[]) =>\n    mountPoints.map((mp, index) => {\n      let displayHeaderIcon = false;\n      if (frontendData) {\n        for (const pluginData of Object.values(frontendData)) {\n          const dynamicRoutes = pluginData.dynamicRoutes ?? [];\n          if (\n            dynamicRoutes.some(\n              (route: { path: string }) => route.path === mp.config?.props?.to,\n            )\n          ) {\n            displayHeaderIcon = true;\n            break;\n          }\n        }\n      }\n\n      switch (mp.config?.type) {\n        case ComponentType.SEARCH:\n          return (\n            <ErrorBoundary>\n              {/* eslint-disable-next-line react/no-array-index-key */}\n              <mp.Component key={index} />\n            </ErrorBoundary>\n          );\n        case ComponentType.DROPDOWN_BUTTON:\n          return (\n            <ErrorBoundary>\n              <mp.Component\n                // eslint-disable-next-line react/no-array-index-key\n                key={index}\n                {...getDropdownButtonProps(mp.config?.key ?? index.toString())}\n                {...mp.config?.props}\n              />\n            </ErrorBoundary>\n          );\n        case ComponentType.ICON_BUTTON:\n          return (\n            <ErrorBoundary>\n              {displayHeaderIcon && (\n                <mp.Component\n                  // eslint-disable-next-line react/no-array-index-key\n                  key={index}\n                  {...getIconButtonProps(mp.config?.props ?? {})}\n                />\n              )}\n            </ErrorBoundary>\n          );\n        default:\n          return null;\n      }\n    });\n\n  return (\n    <AppBar\n      position=\"sticky\"\n      component=\"nav\"\n      sx={{ backgroundColor: '#212427' }}\n    >\n      <Toolbar>\n        {renderComponents(globalHeaderStartComponentsMountPoints)}\n        {globalHeaderStartComponentsMountPoints.length > 0 &&\n          globalHeaderEndComponentsMountPoints.length > 0 && (\n            <Divider\n              orientation=\"vertical\"\n              flexItem\n              sx={{ borderColor: '#4F5255', marginX: 1 }}\n            />\n          )}\n        {renderComponents(globalHeaderEndComponentsMountPoints)}\n      </Toolbar>\n    </AppBar>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"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,26 @@
+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,
+      layout: mountPoint.config?.layout
+    }
+  )))));
+};
+
+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 * Global Header Component properties\n * @public\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              layout={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,KAAA;AAAA,MACvB,MAAA,EAAQ,WAAW,MAAQ,EAAA;AAAA;AAAA,GAE/B,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 Box from '@mui/material/Box';
+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,
+  layout
+}) => {
+  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
+    },
+    title
+  );
+  if (tooltip) {
+    return /* @__PURE__ */ React.createElement(Box, { sx: layout }, /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, /* @__PURE__ */ React.createElement("div", null, button)));
+  }
+  return /* @__PURE__ */ React.createElement(Box, { sx: layout }, 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 Box from '@mui/material/Box';\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  layout?: 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  layout,\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    >\n      {title}\n    </LinkButton>\n  );\n\n  if (tooltip) {\n    return (\n      <Box sx={layout}>\n        <Tooltip title={tooltip}>\n          <div>{button}</div>\n        </Tooltip>\n      </Box>\n    );\n  }\n\n  return <Box sx={layout}>{button}</Box>;\n};\n"],"names":[],"mappings":";;;;;;AA4CO,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;AAAA,KAAA;AAAA,IAEC;AAAA,GACH;AAGF,EAAA,IAAI,OAAS,EAAA;AACX,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,MAAA,EAAA,kBACN,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,KAAO,EAAA,OAAA,EAAA,kBACb,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,IAAA,EAAK,MAAO,CACf,CACF,CAAA;AAAA;AAIJ,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,MAAA,EAAA,EAAS,MAAO,CAAA;AAClC;;;;"}

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

@@ -1,81 +1,47 @@
-import React, { useState, useEffect, useMemo } from 'react';
-import { catalogApiRef } from '@backstage/plugin-catalog-react';
-import HeaderDropdownComponent from './HeaderDropdownComponent.esm.js';
+import React, { useMemo } from 'react';
 import ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';
-import { useApi } from '@backstage/core-plugin-api';
-import CircularProgress from '@mui/material/CircularProgress';
-import Box from '@mui/material/Box';
-import Typography from '@mui/material/Typography';
-import { ComponentType } from '../../types.esm.js';
-import { HeaderLink } from '../HeaderLinkComponent/HeaderLink.esm.js';
 import { useCreateDropdownMountPoints } from '../../hooks/useCreateDropdownMountPoints.esm.js';
+import { useDropdownManager } from '../../hooks/useDropdownManager.esm.js';
+import { HeaderDropdownComponent } from './HeaderDropdownComponent.esm.js';
+import Box from '@mui/material/Box';
 
-const CreateDropdown = ({
-  handleMenu,
-  anchorEl,
-  setAnchorEl
-}) => {
-  const catalogApi = useApi(catalogApiRef);
-  const [entities, setEntities] = useState([]);
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState(null);
+const CreateDropdown = ({ layout }) => {
+  const { anchorEl, handleOpen, handleClose } = useDropdownManager();
   const createDropdownMountPoints = useCreateDropdownMountPoints();
-  useEffect(() => {
-    const fetchEntities = async () => {
-      try {
-        const response = await catalogApi.getEntities({
-          filter: { kind: ["Template"] }
-        });
-        setEntities(response.items);
-      } catch (err) {
-        setError(err);
-      } finally {
-        setLoading(false);
-      }
-    };
-    fetchEntities();
-  }, [catalogApi]);
-  const items = useMemo(() => {
-    return entities.filter((e) => e.kind === "Template").map((m) => ({
-      Component: HeaderLink,
-      type: ComponentType.LINK,
-      label: m.metadata.title ?? m.metadata.name,
-      link: `/create/templates/default/${m.metadata.name}`
-    }));
-  }, [entities]);
   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 (loading) {
-    return /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "center", p: 2 }, /* @__PURE__ */ React.createElement(CircularProgress, null), /* @__PURE__ */ React.createElement(Typography, { variant: "body1", sx: { ml: 2 } }, "Loading templates..."));
-  }
-  if (error) {
-    return /* @__PURE__ */ React.createElement(Box, { display: "flex", justifyContent: "center", alignItems: "center", p: 2 }, /* @__PURE__ */ React.createElement(Typography, { variant: "body1", color: "error" }, "Error fetching templates: ", error));
+  if (menuSections.length === 0) {
+    return null;
   }
   return /* @__PURE__ */ React.createElement(
     HeaderDropdownComponent,
     {
-      buttonContent: /* @__PURE__ */ React.createElement(React.Fragment, null, "Create ", /* @__PURE__ */ React.createElement(ArrowDropDownOutlinedIcon, { sx: { ml: 1 } })),
+      buttonContent: /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center" } }, "Create ", /* @__PURE__ */ React.createElement(ArrowDropDownOutlinedIcon, { sx: { ml: 1 } })),
       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"
+          },
+          ...layout
+        }
       },
-      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: () => setAnchorEl(null),
-        ...section.type === ComponentType.LIST ? { items } : {}
+        handleClose
       }
     ))
   );

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, { useEffect, useMemo, useState } from 'react';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport HeaderDropdownComponent from './HeaderDropdownComponent';\nimport ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';\nimport { MenuItemConfig } from './MenuSection';\nimport { useApi } from '@backstage/core-plugin-api';\nimport { Entity } from '@backstage/catalog-model';\nimport CircularProgress from '@mui/material/CircularProgress';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport { ComponentType } from '../../types';\nimport { HeaderLink } from '../HeaderLinkComponent/HeaderLink';\nimport { useCreateDropdownMountPoints } from '../../hooks/useCreateDropdownMountPoints';\n\n/**\n * @public\n * Create button properties\n */\nexport interface CreateButtonProps {\n  handleMenu: (event: React.MouseEvent<HTMLElement>) => void;\n  anchorEl: HTMLElement | null;\n  setAnchorEl: React.Dispatch<React.SetStateAction<HTMLElement | null>>;\n}\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  handleMenu,\n  anchorEl,\n  setAnchorEl,\n}: CreateButtonProps) => {\n  const catalogApi = useApi(catalogApiRef);\n  const [entities, setEntities] = useState<Entity[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n  const createDropdownMountPoints = useCreateDropdownMountPoints();\n\n  useEffect(() => {\n    const fetchEntities = async () => {\n      try {\n        const response = await catalogApi.getEntities({\n          filter: { kind: ['Template'] },\n        });\n        setEntities(response.items);\n      } catch (err) {\n        setError(err);\n      } finally {\n        setLoading(false);\n      }\n    };\n\n    fetchEntities();\n  }, [catalogApi]);\n\n  const items = useMemo(() => {\n    return entities\n      .filter(e => e.kind === 'Template')\n      .map(m => ({\n        Component: HeaderLink as React.ComponentType,\n        type: ComponentType.LINK,\n        label: m.metadata.title ?? m.metadata.name,\n        link: `/create/templates/default/${m.metadata.name}`,\n      }));\n  }, [entities]);\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 (loading) {\n    return (\n      <Box display=\"flex\" justifyContent=\"center\" alignItems=\"center\" p={2}>\n        <CircularProgress />\n        <Typography variant=\"body1\" sx={{ ml: 2 }}>\n          Loading templates...\n        </Typography>\n      </Box>\n    );\n  }\n\n  if (error) {\n    return (\n      <Box display=\"flex\" justifyContent=\"center\" alignItems=\"center\" p={2}>\n        <Typography variant=\"body1\" color=\"error\">\n          Error fetching templates: {error}\n        </Typography>\n      </Box>\n    );\n  }\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <>\n          Create <ArrowDropDownOutlinedIcon sx={{ ml: 1 }} />\n        </>\n      }\n      buttonProps={{\n        color: 'primary',\n        variant: 'contained',\n        sx: { mr: 2 },\n      }}\n      buttonClick={handleMenu}\n      anchorEl={anchorEl}\n      setAnchorEl={setAnchorEl}\n    >\n      {menuSections.map((section, index) => (\n        <section.Component\n          key={`menu-section-${index.toString()}`}\n          hideDivider={index === menuSections.length - 1}\n          handleClose={() => setAnchorEl(null)}\n          {...(section.type === ComponentType.LIST ? { items } : {})}\n        />\n      ))}\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"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          Create <ArrowDropDownOutlinedIcon sx={{ ml: 1 }} />\n        </Box>\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          ...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,SAAA,sCAC1C,yBAA0B,EAAA,EAAA,EAAA,EAAI,EAAE,EAAI,EAAA,CAAA,IAAK,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,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;;;;"}

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

@@ -11,15 +11,18 @@ 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;
   `
 );
@@ -27,9 +30,9 @@ const HeaderDropdownComponent = ({
   buttonContent,
   children,
   buttonProps,
-  buttonClick,
-  anchorEl,
-  setAnchorEl
+  onOpen,
+  onClose,
+  anchorEl
 }) => {
   return /* @__PURE__ */ React.createElement(Box, null, /* @__PURE__ */ React.createElement(
     Button,
@@ -37,7 +40,7 @@ const HeaderDropdownComponent = ({
       disableRipple: true,
       disableTouchRipple: true,
       ...buttonProps,
-      onClick: buttonClick
+      onClick: onOpen
     },
     buttonContent
   ), /* @__PURE__ */ React.createElement(
@@ -47,7 +50,7 @@ const HeaderDropdownComponent = ({
       anchorEl,
       keepMounted: true,
       open: Boolean(anchorEl),
-      onClose: () => setAnchorEl(null),
+      onClose,
       anchorOrigin: {
         vertical: "bottom",
         horizontal: "center"
@@ -66,5 +69,5 @@ const HeaderDropdownComponent = ({
   ));
 };
 
-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 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  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  children,\n  buttonProps,\n  buttonClick,\n  anchorEl,\n  setAnchorEl,\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\">{children}</Listbox>\n      </Menu>\n    </Box>\n  );\n};\n\nexport default HeaderDropdownComponent;\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,cAYb,EAAA,KAAA,CAAM,QAAQ,IAAS,KAAA,MAAA,GAAS,MAAM,OAAQ,CAAA,UAAA,CAAW,UAAU,MACrE,CAAA;AAAA,oBAEE,EAAA,KAAA,CAAM,OAAQ,CAAA,IAAA,KAAS,MACnB,GAAA,KAAA,CAAM,QAAQ,OACd,GAAA,KAAA,CAAM,OAAQ,CAAA,UAAA,CAAW,OAC/B,CAAA;AAAA,SAEE,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,wBAAA,EAEE,KAAM,CAAA,OAAA,CAAQ,IAAS,KAAA,MAAA,GAAS,sBAAsB,mBACxD,CAAA;AAAA;AAAA,EAAA;AAGF,CAAA;AAEA,MAAM,0BAAyD,CAAC;AAAA,EAC9D,aAAA;AAAA,EACA,QAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;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,EAAS,MAAM,WAAA,CAAY,IAAI,CAAA;AAAA,MAC/B,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;;;;"}
+{"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;;;;"}

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

@@ -35,7 +35,7 @@ const MenuSection = ({
       disableTouchRipple: true,
       onClick: handleClose
     },
-    optionalLink && optionalLinkLabel && /* @__PURE__ */ React.createElement(
+    optionalLink && optionalLinkLabel && items.length > 0 && /* @__PURE__ */ React.createElement(
       Link,
       {
         to: optionalLink,
@@ -45,7 +45,7 @@ const MenuSection = ({
       optionalLinkLabel
     )
   )
-), /* @__PURE__ */ React.createElement("ul", { style: { padding: 0, listStyle: "none" } }, items.map(({ type, icon, label, subLabel, link, Component }, index) => /* @__PURE__ */ React.createElement(
+), /* @__PURE__ */ React.createElement("ul", { style: { padding: 0, listStyle: "none" } }, items.map(({ icon, label, subLabel, link, Component }, index) => /* @__PURE__ */ React.createElement(
   MenuItem,
   {
     key: `menu-item-${index.toString()}`,
@@ -54,17 +54,8 @@ const MenuSection = ({
     onClick: handleClose,
     sx: { py: 0.5, "&:hover": { background: "transparent" } }
   },
-  link && /* @__PURE__ */ React.createElement(
-    Component,
-    {
-      icon,
-      to: link,
-      title: label,
-      subTitle: subLabel
-    }
-  ),
-  type === "logout" && /* @__PURE__ */ React.createElement(Component, null)
-))), !hideDivider && /* @__PURE__ */ React.createElement(Divider, { sx: { margin: "8px 0" } }));
+  /* @__PURE__ */ React.createElement(Component, { icon, to: link, title: label, subTitle: subLabel })
+))), !hideDivider && /* @__PURE__ */ React.createElement(Divider, { sx: { my: 0.5 } }));
 
-export { MenuSection as default };
+export { MenuSection };
 //# sourceMappingURL=MenuSection.esm.js.map