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

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @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

package/app-config.dynamic.yaml

@@ -6,20 +6,16 @@ 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
           config:
             type: dropdown_button
-            key: create
-            slot: header-start
             priority: 90
         - mountPoint: global.header/create
           importName: SoftwareTemplatesSection
@@ -34,7 +30,6 @@ dynamicPlugins:
           importName: HeaderIconButton
           config:
             type: icon_button
-            slot: header-start
             priority: 80
             props:
               icon: support
@@ -43,7 +38,6 @@ dynamicPlugins:
           importName: HeaderIconButton
           config:
             type: icon_button
-            slot: header-start
             priority: 70
             props:
               icon: notifications
@@ -52,14 +46,12 @@ dynamicPlugins:
           importName: ProfileDropdown
           config:
             type: dropdown_button
-            key: profile
-            slot: header-end
             priority: 0
         - mountPoint: global.header/profile
-          importName: HeaderLink
+          importName: MenuItemLink
           config:
             type: link
-            priority: 10
+            priority: 200
             props:
               title: Settings
               link: /settings
@@ -67,5 +59,4 @@ dynamicPlugins:
         - mountPoint: global.header/profile
           importName: LogoutButton
           config:
-            type: logout
-            priority: 0
+            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,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,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,48 +1,13 @@
-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';
 
-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 = () => {
+  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,
@@ -50,32 +15,34 @@ const CreateDropdown = ({
       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 } })),
       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: () => 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 { 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

@@ -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,
@@ -64,7 +64,7 @@ const MenuSection = ({
     }
   ),
   type === "logout" && /* @__PURE__ */ React.createElement(Component, null)
-))), !hideDivider && /* @__PURE__ */ React.createElement(Divider, { sx: { margin: "8px 0" } }));
+))), !hideDivider && /* @__PURE__ */ React.createElement(Divider, { sx: { my: 0.5 } }));
 
-export { MenuSection as default };
+export { MenuSection };
 //# sourceMappingURL=MenuSection.esm.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"MenuSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/MenuSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Divider from '@mui/material/Divider';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport MenuItem from '@mui/material/MenuItem';\nimport { Link } from '@backstage/core-components';\nimport { HeaderLinkProps } from '../HeaderLinkComponent/HeaderLink';\n\n/**\n * Menu item configuration\n *\n * @public\n */\nexport interface MenuItemConfig {\n  Component: React.ComponentType<HeaderLinkProps | {}>;\n  type: string;\n  label: string;\n  icon?: string;\n  subLabel?: string;\n  link?: string;\n}\n\nexport interface MenuSectionConfig {\n  sectionLabel?: string;\n  optionalLink?: string;\n  optionalLinkLabel?: string;\n  items: MenuItemConfig[];\n  hideDivider?: boolean;\n  handleClose: () => void;\n}\n\nconst MenuSection: React.FC<MenuSectionConfig> = ({\n  sectionLabel,\n  optionalLink,\n  optionalLinkLabel,\n  items,\n  hideDivider = false,\n  handleClose,\n}) => (\n  <Box>\n    {sectionLabel && (\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          mx: 0,\n          mt: '0.5rem',\n          '&:hover': { background: 'transparent' },\n        }}\n      >\n        <Typography variant=\"body2\" sx={{ pl: 2, color: 'text.disabled' }}>\n          {sectionLabel}\n        </Typography>\n        <MenuItem\n          sx={{\n            '&:hover': { background: 'transparent' },\n          }}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n        >\n          {optionalLink && optionalLinkLabel && (\n            <Link\n              to={optionalLink}\n              underline=\"none\"\n              style={{ fontSize: '0.875em' }}\n            >\n              {optionalLinkLabel}\n            </Link>\n          )}\n        </MenuItem>\n      </Box>\n    )}\n    <ul style={{ padding: 0, listStyle: 'none' }}>\n      {items.map(({ type, icon, label, subLabel, link, Component }, index) => (\n        <MenuItem\n          key={`menu-item-${index.toString()}`}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n          sx={{ py: 0.5, '&:hover': { background: 'transparent' } }}\n        >\n          {link && (\n            <Component\n              icon={icon}\n              to={link}\n              title={label}\n              subTitle={subLabel}\n            />\n          )}\n          {type === 'logout' && <Component />}\n        </MenuItem>\n      ))}\n    </ul>\n    {!hideDivider && <Divider sx={{ margin: '8px 0' }} />}\n  </Box>\n);\n\nexport default MenuSection;\n"],"names":[],"mappings":";;;;;;;AA+CA,MAAM,cAA2C,CAAC;AAAA,EAChD,YAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAAA,EACd;AACF,CACE,qBAAA,KAAA,CAAA,aAAA,CAAC,WACE,YACC,oBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,GAAA;AAAA,EAAA;AAAA,IACC,EAAI,EAAA;AAAA,MACF,OAAS,EAAA,MAAA;AAAA,MACT,cAAgB,EAAA,eAAA;AAAA,MAChB,UAAY,EAAA,QAAA;AAAA,MACZ,EAAI,EAAA,CAAA;AAAA,MACJ,EAAI,EAAA,QAAA;AAAA,MACJ,SAAA,EAAW,EAAE,UAAA,EAAY,aAAc;AAAA;AACzC,GAAA;AAAA,kBAEA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,CAAG,EAAA,KAAA,EAAO,eAAgB,EAAA,EAAA,EAC7D,YACH,CAAA;AAAA,kBACA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,SAAA,EAAW,EAAE,UAAA,EAAY,aAAc;AAAA,OACzC;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,kBAAkB,EAAA,IAAA;AAAA,MAClB,OAAS,EAAA;AAAA,KAAA;AAAA,IAER,gBAAgB,iBACf,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA,YAAA;AAAA,QACJ,SAAU,EAAA,MAAA;AAAA,QACV,KAAA,EAAO,EAAE,QAAA,EAAU,SAAU;AAAA,OAAA;AAAA,MAE5B;AAAA;AACH;AAGN,CAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAG,KAAO,EAAA,EAAE,SAAS,CAAG,EAAA,SAAA,EAAW,QACjC,EAAA,EAAA,KAAA,CAAM,IAAI,CAAC,EAAE,MAAM,IAAM,EAAA,KAAA,EAAO,UAAU,IAAM,EAAA,SAAA,IAAa,KAC5D,qBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IACC,GAAK,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,QAAA,EAAU,CAAA,CAAA;AAAA,IAClC,aAAa,EAAA,IAAA;AAAA,IACb,kBAAkB,EAAA,IAAA;AAAA,IAClB,OAAS,EAAA,WAAA;AAAA,IACT,EAAA,EAAI,EAAE,EAAI,EAAA,GAAA,EAAK,WAAW,EAAE,UAAA,EAAY,eAAgB;AAAA,GAAA;AAAA,EAEvD,IACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,EAAI,EAAA,IAAA;AAAA,MACJ,KAAO,EAAA,KAAA;AAAA,MACP,QAAU,EAAA;AAAA;AAAA,GACZ;AAAA,EAED,IAAA,KAAS,QAAY,oBAAA,KAAA,CAAA,aAAA,CAAC,SAAU,EAAA,IAAA;AACnC,CACD,CACH,CACC,EAAA,CAAC,WAAe,oBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,EAAA,EAAI,EAAE,MAAA,EAAQ,OAAQ,EAAA,EAAG,CACrD;;;;"}
+{"version":3,"file":"MenuSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/MenuSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React from 'react';\nimport Divider from '@mui/material/Divider';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport MenuItem from '@mui/material/MenuItem';\nimport { Link } from '@backstage/core-components';\nimport { MenuItemLinkProps } from '../MenuItemLink/MenuItemLink';\n\n/**\n * Menu item configuration\n *\n * @public\n */\nexport interface MenuItemConfig {\n  Component: React.ComponentType<MenuItemLinkProps | {}>;\n  type: string;\n  label: string;\n  icon?: string;\n  subLabel?: string;\n  link?: string;\n}\n\nexport interface MenuSectionConfig {\n  sectionLabel?: string;\n  optionalLink?: string;\n  optionalLinkLabel?: string;\n  items: MenuItemConfig[];\n  hideDivider?: boolean;\n  handleClose: () => void;\n}\n\nexport const MenuSection: React.FC<MenuSectionConfig> = ({\n  sectionLabel,\n  optionalLink,\n  optionalLinkLabel,\n  items,\n  hideDivider = false,\n  handleClose,\n}) => (\n  <Box>\n    {sectionLabel && (\n      <Box\n        sx={{\n          display: 'flex',\n          justifyContent: 'space-between',\n          alignItems: 'center',\n          mx: 0,\n          mt: '0.5rem',\n          '&:hover': { background: 'transparent' },\n        }}\n      >\n        <Typography variant=\"body2\" sx={{ pl: 2, color: 'text.disabled' }}>\n          {sectionLabel}\n        </Typography>\n        <MenuItem\n          sx={{\n            '&:hover': { background: 'transparent' },\n          }}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n        >\n          {optionalLink && optionalLinkLabel && items.length > 0 && (\n            <Link\n              to={optionalLink}\n              underline=\"none\"\n              style={{ fontSize: '0.875em' }}\n            >\n              {optionalLinkLabel}\n            </Link>\n          )}\n        </MenuItem>\n      </Box>\n    )}\n    <ul style={{ padding: 0, listStyle: 'none' }}>\n      {items.map(({ type, icon, label, subLabel, link, Component }, index) => (\n        <MenuItem\n          key={`menu-item-${index.toString()}`}\n          disableRipple\n          disableTouchRipple\n          onClick={handleClose}\n          sx={{ py: 0.5, '&:hover': { background: 'transparent' } }}\n        >\n          {link && (\n            <Component\n              icon={icon}\n              to={link}\n              title={label}\n              subTitle={subLabel}\n            />\n          )}\n          {type === 'logout' && <Component />}\n        </MenuItem>\n      ))}\n    </ul>\n    {!hideDivider && <Divider sx={{ my: 0.5 }} />}\n  </Box>\n);\n"],"names":[],"mappings":";;;;;;;AA+CO,MAAM,cAA2C,CAAC;AAAA,EACvD,YAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAAA,EACd;AACF,CACE,qBAAA,KAAA,CAAA,aAAA,CAAC,WACE,YACC,oBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,GAAA;AAAA,EAAA;AAAA,IACC,EAAI,EAAA;AAAA,MACF,OAAS,EAAA,MAAA;AAAA,MACT,cAAgB,EAAA,eAAA;AAAA,MAChB,UAAY,EAAA,QAAA;AAAA,MACZ,EAAI,EAAA,CAAA;AAAA,MACJ,EAAI,EAAA,QAAA;AAAA,MACJ,SAAA,EAAW,EAAE,UAAA,EAAY,aAAc;AAAA;AACzC,GAAA;AAAA,kBAEA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,OAAA,EAAQ,OAAQ,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,CAAG,EAAA,KAAA,EAAO,eAAgB,EAAA,EAAA,EAC7D,YACH,CAAA;AAAA,kBACA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA;AAAA,QACF,SAAA,EAAW,EAAE,UAAA,EAAY,aAAc;AAAA,OACzC;AAAA,MACA,aAAa,EAAA,IAAA;AAAA,MACb,kBAAkB,EAAA,IAAA;AAAA,MAClB,OAAS,EAAA;AAAA,KAAA;AAAA,IAER,YAAgB,IAAA,iBAAA,IAAqB,KAAM,CAAA,MAAA,GAAS,CACnD,oBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAI,EAAA,YAAA;AAAA,QACJ,SAAU,EAAA,MAAA;AAAA,QACV,KAAA,EAAO,EAAE,QAAA,EAAU,SAAU;AAAA,OAAA;AAAA,MAE5B;AAAA;AACH;AAGN,CAEF,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAG,KAAO,EAAA,EAAE,SAAS,CAAG,EAAA,SAAA,EAAW,QACjC,EAAA,EAAA,KAAA,CAAM,IAAI,CAAC,EAAE,MAAM,IAAM,EAAA,KAAA,EAAO,UAAU,IAAM,EAAA,SAAA,IAAa,KAC5D,qBAAA,KAAA,CAAA,aAAA;AAAA,EAAC,QAAA;AAAA,EAAA;AAAA,IACC,GAAK,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,QAAA,EAAU,CAAA,CAAA;AAAA,IAClC,aAAa,EAAA,IAAA;AAAA,IACb,kBAAkB,EAAA,IAAA;AAAA,IAClB,OAAS,EAAA,WAAA;AAAA,IACT,EAAA,EAAI,EAAE,EAAI,EAAA,GAAA,EAAK,WAAW,EAAE,UAAA,EAAY,eAAgB;AAAA,GAAA;AAAA,EAEvD,IACC,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,EAAI,EAAA,IAAA;AAAA,MACJ,KAAO,EAAA,KAAA;AAAA,MACP,QAAU,EAAA;AAAA;AAAA,GACZ;AAAA,EAED,IAAA,KAAS,QAAY,oBAAA,KAAA,CAAA,aAAA,CAAC,SAAU,EAAA,IAAA;AACnC,CACD,CACH,CACC,EAAA,CAAC,WAAe,oBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,GAAI,EAAA,EAAG,CAC7C;;;;"}