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

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @red-hat-developer-hub/backstage-plugin-global-header
 
+## 1.0.0
+
+### Major Changes
+
+- 005fa36: Release 1.0.0
+
+## 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

package/app-config.dynamic.yaml

@@ -7,56 +7,58 @@ dynamicPlugins:
           importName: GlobalHeader
           config:
             position: above-main-content # above-main-content | below-main-content
+
         - mountPoint: global.header/component
           importName: SearchComponent
           config:
-            type: search
             priority: 100
+
         - mountPoint: global.header/component
-          importName: CreateDropdown
+          importName: Spacer
           config:
-            type: dropdown_button
-            priority: 90
-        - mountPoint: global.header/create
-          importName: SoftwareTemplatesSection
-          config:
-            type: list
-            priority: 10
-        - mountPoint: global.header/create
-          importName: RegisterAComponentSection
-          config:
-            type: link
+            priority: 99
+            props:
+              growFactor: 0
+
         - mountPoint: global.header/component
           importName: HeaderIconButton
           config:
-            type: icon_button
-            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
             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
-            priority: 0
+            priority: 10
+
         - mountPoint: global.header/profile
           importName: MenuItemLink
           config:
-            type: link
-            priority: 200
+            priority: 100
             props:
               title: Settings
               link: /settings
               icon: manageAccounts
+
         - mountPoint: global.header/profile
           importName: LogoutButton
           config:
-            priority: 100
+            priority: 10

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

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

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

@@ -1 +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;;;;"}
+{"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/GlobalHeaderComponent.esm.js

@@ -16,7 +16,8 @@ const GlobalHeaderComponent = ({
   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
+      ...mountPoint.config?.props,
+      layout: mountPoint.config?.layout
     }
   )))));
 };

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

@@ -1 +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;;;;"}
+{"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

@@ -1,5 +1,6 @@
 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';
 
@@ -14,7 +15,7 @@ const HeaderButton = ({
   endIcon,
   externalLinkIcon = true,
   to,
-  style
+  layout
 }) => {
   const button = /* @__PURE__ */ React.createElement(
     LinkButton,
@@ -26,15 +27,14 @@ const HeaderButton = ({
       startIcon: startIcon ? /* @__PURE__ */ React.createElement(HeaderIcon, { icon: startIcon, size }) : null,
       endIcon: endIcon ? /* @__PURE__ */ React.createElement(HeaderIcon, { icon: endIcon, size }) : null,
       externalLinkIcon,
-      to,
-      style
+      to
     },
     title
   );
   if (tooltip) {
-    return /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, /* @__PURE__ */ React.createElement("div", null, button));
+    return /* @__PURE__ */ React.createElement(Box, { sx: layout }, /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, /* @__PURE__ */ React.createElement("div", null, button)));
   }
-  return button;
+  return /* @__PURE__ */ React.createElement(Box, { sx: layout }, button);
 };
 
 export { HeaderButton };

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

@@ -1 +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;;;;"}
+{"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,17 +1,16 @@
 import React, { useMemo } from 'react';
 import ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';
-import { ComponentType } from '../../types.esm.js';
 import { useCreateDropdownMountPoints } from '../../hooks/useCreateDropdownMountPoints.esm.js';
 import { useDropdownManager } from '../../hooks/useDropdownManager.esm.js';
 import { HeaderDropdownComponent } from './HeaderDropdownComponent.esm.js';
+import Box from '@mui/material/Box';
 
-const CreateDropdown = () => {
+const CreateDropdown = ({ layout }) => {
   const { anchorEl, handleOpen, handleClose } = useDropdownManager();
   const createDropdownMountPoints = useCreateDropdownMountPoints();
   const menuSections = useMemo(() => {
     return (createDropdownMountPoints ?? []).map((mp) => ({
       Component: mp.Component,
-      type: mp.config?.type ?? ComponentType.LINK,
       priority: mp.config?.priority ?? 0
     })).sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
   }, [createDropdownMountPoints]);
@@ -21,7 +20,7 @@ const CreateDropdown = () => {
   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: {
         variant: "outlined",
         sx: {
@@ -30,7 +29,7 @@ const CreateDropdown = () => {
           "&:hover, &.Mui-focusVisible": {
             border: "1px solid #fff"
           },
-          mr: 1.5
+          ...layout
         }
       },
       onOpen: handleOpen,

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

@@ -1 +1 @@
-{"version":3,"file":"CreateDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/CreateDropdown.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React, { useMemo } from 'react';\n\nimport ArrowDropDownOutlinedIcon from '@mui/icons-material/ArrowDropDownOutlined';\n\nimport { 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;;;;"}
+{"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/MenuSection.esm.js

@@ -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,16 +54,7 @@ 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)
+  /* @__PURE__ */ React.createElement(Component, { icon, to: link, title: label, subTitle: subLabel })
 ))), !hideDivider && /* @__PURE__ */ React.createElement(Divider, { sx: { my: 0.5 } }));
 
 export { MenuSection };

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

@@ -1 +1 @@
-{"version":3,"file":"MenuSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/MenuSection.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport React 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;;;;"}
+{"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  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(({ 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          <Component icon={icon} to={link!} title={label} subTitle={subLabel} />\n        </MenuItem>\n      ))}\n    </ul>\n    {!hideDivider && <Divider sx={{ my: 0.5 }} />}\n  </Box>\n);\n"],"names":[],"mappings":";;;;;;;AA8CO,MAAM,cAA2C,CAAC;AAAA,EACvD,YAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAc,GAAA,KAAA;AAAA,EACd;AACF,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,CAAA,sCAED,IAAG,EAAA,EAAA,KAAA,EAAO,EAAE,OAAS,EAAA,CAAA,EAAG,WAAW,MAAO,EAAA,EAAA,EACxC,MAAM,GAAI,CAAA,CAAC,EAAE,IAAM,EAAA,KAAA,EAAO,UAAU,IAAM,EAAA,SAAA,IAAa,KACtD,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,kBAExD,KAAA,CAAA,aAAA,CAAC,aAAU,IAAY,EAAA,EAAA,EAAI,MAAO,KAAO,EAAA,KAAA,EAAO,UAAU,QAAU,EAAA;AACtE,CACD,CACH,CACC,EAAA,CAAC,WAAe,oBAAA,KAAA,CAAA,aAAA,CAAC,OAAQ,EAAA,EAAA,EAAA,EAAI,EAAE,EAAA,EAAI,GAAI,EAAA,EAAG,CAC7C;;;;"}

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

@@ -6,11 +6,11 @@ import Typography from '@mui/material/Typography';
 import { lighten } from '@mui/material/styles';
 import { HeaderDropdownComponent } from './HeaderDropdownComponent.esm.js';
 import { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints.esm.js';
-import { ComponentType } from '../../types.esm.js';
 import { MenuSection } from './MenuSection.esm.js';
 import { useDropdownManager } from '../../hooks/useDropdownManager.esm.js';
+import Box from '@mui/material/Box';
 
-const ProfileDropdown = () => {
+const ProfileDropdown = ({ layout }) => {
   const { anchorEl, handleOpen, handleClose } = useDropdownManager();
   const identityApi = useApi(identityApiRef);
   const [user, setUser] = useState();
@@ -42,7 +42,6 @@ const ProfileDropdown = () => {
   const menuItems = useMemo(() => {
     return (profileDropdownMountPoints ?? []).map((mp) => ({
       Component: mp.Component,
-      type: mp.config?.type ?? ComponentType.LINK,
       icon: mp.config?.props?.icon ?? "",
       label: mp.config?.props?.title ?? "",
       link: mp.config?.props?.link ?? "",
@@ -55,11 +54,21 @@ const ProfileDropdown = () => {
   return /* @__PURE__ */ React.createElement(
     HeaderDropdownComponent,
     {
-      buttonContent: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(AccountCircleOutlinedIcon, { fontSize: "small", sx: { mx: 1 } }), /* @__PURE__ */ React.createElement(Typography, { variant: "body2", sx: { fontWeight: 500, mx: 1 } }, user?.displayName ?? "Guest"), /* @__PURE__ */ React.createElement(
+      buttonContent: /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center", ...layout } }, /* @__PURE__ */ React.createElement(AccountCircleOutlinedIcon, { fontSize: "small", sx: { mr: 1 } }), /* @__PURE__ */ React.createElement(
+        Typography,
+        {
+          variant: "body2",
+          sx: {
+            display: { xs: "none", md: "block" },
+            fontWeight: 500,
+            mr: "1rem"
+          }
+        },
+        user?.displayName ?? "Guest"
+      ), /* @__PURE__ */ React.createElement(
         KeyboardArrowDownOutlinedIcon,
         {
           sx: {
-            marginLeft: "1rem",
             bgcolor: bgColor,
             borderRadius: "25%"
           }

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

@@ -1 +1 @@
-{"version":3,"file":"ProfileDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ProfileDropdown.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, useRef, useState } from 'react';\nimport {\n  identityApiRef,\n  useApi,\n  ProfileInfo,\n} from '@backstage/core-plugin-api';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport Typography from '@mui/material/Typography';\nimport { lighten } from '@mui/material/styles';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints';\nimport { ComponentType } from '../../types';\nimport { MenuSection } from './MenuSection';\nimport { useDropdownManager } from '../../hooks';\n\nexport const ProfileDropdown = () => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n\n  const identityApi = useApi(identityApiRef);\n  const [user, setUser] = useState<ProfileInfo>();\n  const profileDropdownMountPoints = useProfileDropdownMountPoints();\n\n  const headerRef = useRef<HTMLElement | null>(null);\n  const [bgColor, setBgColor] = useState('#3C3F42');\n\n  useEffect(() => {\n    if (headerRef.current) {\n      const computedStyle = window.getComputedStyle(headerRef.current);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const container = document.getElementById('global-header');\n    if (container) {\n      const computedStyle = window.getComputedStyle(container);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const fetchUser = async () => {\n      const userProfile = await identityApi.getProfileInfo();\n      setUser(userProfile);\n    };\n\n    fetchUser();\n  }, [identityApi]);\n\n  const menuItems = useMemo(() => {\n    return (profileDropdownMountPoints ?? [])\n      .map(mp => ({\n        Component: mp.Component,\n        type: mp.config?.type ?? ComponentType.LINK,\n        icon: mp.config?.props?.icon ?? '',\n        label: mp.config?.props?.title ?? '',\n        link: mp.config?.props?.link ?? '',\n        priority: mp.config?.priority ?? 0,\n      }))\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [profileDropdownMountPoints]);\n\n  if (menuItems.length === 0) {\n    return null;\n  }\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <>\n          <AccountCircleOutlinedIcon fontSize=\"small\" sx={{ mx: 1 }} />\n          <Typography variant=\"body2\" sx={{ fontWeight: 500, mx: 1 }}>\n            {user?.displayName ?? 'Guest'}\n          </Typography>\n          <KeyboardArrowDownOutlinedIcon\n            sx={{\n              marginLeft: '1rem',\n              bgcolor: bgColor,\n              borderRadius: '25%',\n            }}\n          />\n        </>\n      }\n      buttonProps={{\n        color: 'inherit',\n        sx: {\n          display: 'flex',\n          alignItems: 'center',\n        },\n      }}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n    >\n      <MenuSection hideDivider items={menuItems} handleClose={handleClose} />\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ProfileDropdown.esm.js","sources":["../../../src/components/HeaderDropdownComponent/ProfileDropdown.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, useRef, useState } from 'react';\nimport {\n  identityApiRef,\n  useApi,\n  ProfileInfo,\n} from '@backstage/core-plugin-api';\nimport AccountCircleOutlinedIcon from '@mui/icons-material/AccountCircleOutlined';\nimport KeyboardArrowDownOutlinedIcon from '@mui/icons-material/KeyboardArrowDownOutlined';\nimport Typography from '@mui/material/Typography';\nimport { lighten } from '@mui/material/styles';\nimport { HeaderDropdownComponent } from './HeaderDropdownComponent';\nimport { useProfileDropdownMountPoints } from '../../hooks/useProfileDropdownMountPoints';\nimport { MenuSection } from './MenuSection';\nimport { useDropdownManager } from '../../hooks';\nimport Box from '@mui/material/Box';\n\n/**\n * @public\n * Props for Profile Dropdown\n */\nexport interface ProfileDropdownProps {\n  layout?: React.CSSProperties;\n}\n\nexport const ProfileDropdown = ({ layout }: ProfileDropdownProps) => {\n  const { anchorEl, handleOpen, handleClose } = useDropdownManager();\n\n  const identityApi = useApi(identityApiRef);\n  const [user, setUser] = useState<ProfileInfo>();\n  const profileDropdownMountPoints = useProfileDropdownMountPoints();\n\n  const headerRef = useRef<HTMLElement | null>(null);\n  const [bgColor, setBgColor] = useState('#3C3F42');\n\n  useEffect(() => {\n    if (headerRef.current) {\n      const computedStyle = window.getComputedStyle(headerRef.current);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const container = document.getElementById('global-header');\n    if (container) {\n      const computedStyle = window.getComputedStyle(container);\n      const baseColor = computedStyle.backgroundColor;\n      setBgColor(lighten(baseColor, 0.2));\n    }\n  }, []);\n\n  useEffect(() => {\n    const fetchUser = async () => {\n      const userProfile = await identityApi.getProfileInfo();\n      setUser(userProfile);\n    };\n\n    fetchUser();\n  }, [identityApi]);\n\n  const menuItems = useMemo(() => {\n    return (profileDropdownMountPoints ?? [])\n      .map(mp => ({\n        Component: mp.Component,\n        icon: mp.config?.props?.icon ?? '',\n        label: mp.config?.props?.title ?? '',\n        link: mp.config?.props?.link ?? '',\n        priority: mp.config?.priority ?? 0,\n      }))\n      .sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));\n  }, [profileDropdownMountPoints]);\n\n  if (menuItems.length === 0) {\n    return null;\n  }\n\n  return (\n    <HeaderDropdownComponent\n      buttonContent={\n        <Box sx={{ display: 'flex', alignItems: 'center', ...layout }}>\n          <AccountCircleOutlinedIcon fontSize=\"small\" sx={{ mr: 1 }} />\n          <Typography\n            variant=\"body2\"\n            sx={{\n              display: { xs: 'none', md: 'block' },\n              fontWeight: 500,\n              mr: '1rem',\n            }}\n          >\n            {user?.displayName ?? 'Guest'}\n          </Typography>\n          <KeyboardArrowDownOutlinedIcon\n            sx={{\n              bgcolor: bgColor,\n              borderRadius: '25%',\n            }}\n          />\n        </Box>\n      }\n      buttonProps={{\n        color: 'inherit',\n        sx: {\n          display: 'flex',\n          alignItems: 'center',\n        },\n      }}\n      onOpen={handleOpen}\n      onClose={handleClose}\n      anchorEl={anchorEl}\n    >\n      <MenuSection hideDivider items={menuItems} handleClose={handleClose} />\n    </HeaderDropdownComponent>\n  );\n};\n"],"names":[],"mappings":"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"}

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { MenuSection } from './MenuSection.esm.js';
 import { MenuItemLink } from '../MenuItemLink/MenuItemLink.esm.js';
-import { ComponentType } from '../../types.esm.js';
 
 const RegisterAComponentSection = ({
   hideDivider,
@@ -13,7 +12,6 @@ const RegisterAComponentSection = ({
       hideDivider,
       items: [
         {
-          type: ComponentType.LINK,
           label: "Register a component",
           subLabel: "Import it to the catalog page",
           link: "/catalog-import",

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

@@ -1 +1 @@
-{"version":3,"file":"RegisterAComponentSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/RegisterAComponentSection.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 { MenuSection } from './MenuSection';\nimport { MenuItemLink } from '../MenuItemLink/MenuItemLink';\nimport { ComponentType } from '../../types';\n\n/**\n * Register A Component Section properties\n *\n * @public\n */\nexport type RegisterAComponentSectionProps = {\n  hideDivider: boolean;\n  handleClose: () => void;\n};\n\nexport const RegisterAComponentSection = ({\n  hideDivider,\n  handleClose,\n}: RegisterAComponentSectionProps) => {\n  return (\n    <MenuSection\n      hideDivider={hideDivider}\n      items={[\n        {\n          type: ComponentType.LINK,\n          label: 'Register a component',\n          subLabel: 'Import it to the catalog page',\n          link: '/catalog-import',\n          icon: 'category',\n          Component: MenuItemLink as React.ComponentType,\n        },\n      ]}\n      handleClose={handleClose}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;AA+BO,MAAM,4BAA4B,CAAC;AAAA,EACxC,WAAA;AAAA,EACA;AACF,CAAsC,KAAA;AACpC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL;AAAA,UACE,MAAM,aAAc,CAAA,IAAA;AAAA,UACpB,KAAO,EAAA,sBAAA;AAAA,UACP,QAAU,EAAA,+BAAA;AAAA,UACV,IAAM,EAAA,iBAAA;AAAA,UACN,IAAM,EAAA,UAAA;AAAA,UACN,SAAW,EAAA;AAAA;AACb,OACF;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"RegisterAComponentSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/RegisterAComponentSection.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 { MenuSection } from './MenuSection';\nimport { MenuItemLink } from '../MenuItemLink/MenuItemLink';\n\n/**\n * Register A Component Section properties\n *\n * @public\n */\nexport type RegisterAComponentSectionProps = {\n  hideDivider: boolean;\n  handleClose: () => void;\n};\n\nexport const RegisterAComponentSection = ({\n  hideDivider,\n  handleClose,\n}: RegisterAComponentSectionProps) => {\n  return (\n    <MenuSection\n      hideDivider={hideDivider}\n      items={[\n        {\n          label: 'Register a component',\n          subLabel: 'Import it to the catalog page',\n          link: '/catalog-import',\n          icon: 'category',\n          Component: MenuItemLink as React.ComponentType,\n        },\n      ]}\n      handleClose={handleClose}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;AA8BO,MAAM,4BAA4B,CAAC;AAAA,EACxC,WAAA;AAAA,EACA;AACF,CAAsC,KAAA;AACpC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,KAAO,EAAA;AAAA,QACL;AAAA,UACE,KAAO,EAAA,sBAAA;AAAA,UACP,QAAU,EAAA,+BAAA;AAAA,UACV,IAAM,EAAA,iBAAA;AAAA,UACN,IAAM,EAAA,UAAA;AAAA,UACN,SAAW,EAAA;AAAA;AACb,OACF;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

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

@@ -6,7 +6,6 @@ import Divider from '@mui/material/Divider';
 import Typography from '@mui/material/Typography';
 import { MenuSection } from './MenuSection.esm.js';
 import { MenuItemLink } from '../MenuItemLink/MenuItemLink.esm.js';
-import { ComponentType } from '../../types.esm.js';
 
 const SoftwareTemplatesSection = ({
   handleClose,
@@ -35,7 +34,6 @@ const SoftwareTemplatesSection = ({
   const items = useMemo(() => {
     return entities.filter((e) => e.kind === "Template").map((m) => ({
       Component: MenuItemLink,
-      type: ComponentType.LINK,
       label: m.metadata.title ?? m.metadata.name,
       link: `/create/templates/default/${m.metadata.name}`
     }));

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

@@ -1 +1 @@
-{"version":3,"file":"SoftwareTemplatesSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/SoftwareTemplatesSection.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';\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { Entity } from '@backstage/catalog-model';\n\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\nimport Typography from '@mui/material/Typography';\n\nimport { MenuSection } from './MenuSection';\nimport { MenuItemLink } from '../MenuItemLink/MenuItemLink';\nimport { ComponentType } from '../../types';\n\n/**\n * Software Templates Section properties\n *\n * @public\n */\nexport type SoftwareTemplatesSectionProps = {\n  handleClose: () => void;\n  hideDivider?: boolean;\n};\n\nexport const SoftwareTemplatesSection = ({\n  handleClose,\n  hideDivider,\n}: SoftwareTemplatesSectionProps) => {\n  const catalogApi = useApi(catalogApiRef);\n\n  const [entities, setEntities] = useState<Entity[]>([]);\n  // TODO: handle loading\n  const [_loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    const fetchEntities = async () => {\n      try {\n        const response = await catalogApi.getEntities({\n          filter: { kind: ['Template'] },\n          limit: 7,\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: MenuItemLink 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  if (error) {\n    return (\n      <Box display=\"flex\" justifyContent=\"center\" alignItems=\"center\" p={2}>\n        <Typography variant=\"body1\" color=\"error\">\n          Error fetching templates\n        </Typography>\n      </Box>\n    );\n  }\n\n  if (items.length === 0) {\n    return (\n      <>\n        <Typography\n          variant=\"body2\"\n          sx={{ mx: 2, my: 1, color: 'text.disabled' }}\n        >\n          No templates available\n        </Typography>\n        {!hideDivider && <Divider sx={{ my: 0.5 }} />}\n      </>\n    );\n  }\n  return (\n    <MenuSection\n      hideDivider={hideDivider}\n      sectionLabel=\"Use a template\"\n      optionalLink=\"/create\"\n      optionalLinkLabel=\"All templates\"\n      items={items}\n      handleClose={handleClose}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAwCO,MAAM,2BAA2B,CAAC;AAAA,EACvC,WAAA;AAAA,EACA;AACF,CAAqC,KAAA;AACnC,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA;AAEvC,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA,CAAmB,EAAE,CAAA;AAErD,EAAA,MAAM,CAAC,QAAA,EAAU,UAAU,CAAA,GAAI,SAAS,IAAI,CAAA;AAC5C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,IAAI,CAAA;AAEvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,gBAAgB,YAAY;AAChC,MAAI,IAAA;AACF,QAAM,MAAA,QAAA,GAAW,MAAM,UAAA,CAAW,WAAY,CAAA;AAAA,UAC5C,MAAQ,EAAA,EAAE,IAAM,EAAA,CAAC,UAAU,CAAE,EAAA;AAAA,UAC7B,KAAO,EAAA;AAAA,SACR,CAAA;AACD,QAAA,WAAA,CAAY,SAAS,KAAK,CAAA;AAAA,eACnB,GAAK,EAAA;AACZ,QAAA,QAAA,CAAS,GAAG,CAAA;AAAA,OACZ,SAAA;AACA,QAAA,UAAA,CAAW,KAAK,CAAA;AAAA;AAClB,KACF;AAEA,IAAc,aAAA,EAAA;AAAA,GAChB,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,KAAA,GAAQ,QAAQ,MAAM;AAC1B,IAAO,OAAA,QAAA,CACJ,OAAO,CAAK,CAAA,KAAA,CAAA,CAAE,SAAS,UAAU,CAAA,CACjC,IAAI,CAAM,CAAA,MAAA;AAAA,MACT,SAAW,EAAA,YAAA;AAAA,MACX,MAAM,aAAc,CAAA,IAAA;AAAA,MACpB,KAAO,EAAA,CAAA,CAAE,QAAS,CAAA,KAAA,IAAS,EAAE,QAAS,CAAA,IAAA;AAAA,MACtC,IAAM,EAAA,CAAA,0BAAA,EAA6B,CAAE,CAAA,QAAA,CAAS,IAAI,CAAA;AAAA,KAClD,CAAA,CAAA;AAAA,GACN,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,2CACG,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,cAAA,EAAe,UAAS,UAAW,EAAA,QAAA,EAAS,CAAG,EAAA,CAAA,EAAA,sCAChE,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAQ,KAAM,EAAA,OAAA,EAAA,EAAQ,0BAE1C,CACF,CAAA;AAAA;AAIJ,EAAI,IAAA,KAAA,CAAM,WAAW,CAAG,EAAA;AACtB,IAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,OAAA;AAAA,QACR,IAAI,EAAE,EAAA,EAAI,GAAG,EAAI,EAAA,CAAA,EAAG,OAAO,eAAgB;AAAA,OAAA;AAAA,MAC5C;AAAA,KAED,EACC,CAAC,WAAA,oBAAgB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,IAAI,EAAE,EAAA,EAAI,GAAI,EAAA,EAAG,CAC7C,CAAA;AAAA;AAGJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,YAAa,EAAA,gBAAA;AAAA,MACb,YAAa,EAAA,SAAA;AAAA,MACb,iBAAkB,EAAA,eAAA;AAAA,MAClB,KAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SoftwareTemplatesSection.esm.js","sources":["../../../src/components/HeaderDropdownComponent/SoftwareTemplatesSection.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';\n\nimport { useApi } from '@backstage/core-plugin-api';\nimport { catalogApiRef } from '@backstage/plugin-catalog-react';\nimport { Entity } from '@backstage/catalog-model';\n\nimport Box from '@mui/material/Box';\nimport Divider from '@mui/material/Divider';\nimport Typography from '@mui/material/Typography';\n\nimport { MenuSection } from './MenuSection';\nimport { MenuItemLink } from '../MenuItemLink/MenuItemLink';\n\n/**\n * Software Templates Section properties\n *\n * @public\n */\nexport type SoftwareTemplatesSectionProps = {\n  handleClose: () => void;\n  hideDivider?: boolean;\n};\n\nexport const SoftwareTemplatesSection = ({\n  handleClose,\n  hideDivider,\n}: SoftwareTemplatesSectionProps) => {\n  const catalogApi = useApi(catalogApiRef);\n\n  const [entities, setEntities] = useState<Entity[]>([]);\n  // TODO: handle loading\n  const [_loading, setLoading] = useState(true);\n  const [error, setError] = useState(null);\n\n  useEffect(() => {\n    const fetchEntities = async () => {\n      try {\n        const response = await catalogApi.getEntities({\n          filter: { kind: ['Template'] },\n          limit: 7,\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: MenuItemLink as React.ComponentType,\n        label: m.metadata.title ?? m.metadata.name,\n        link: `/create/templates/default/${m.metadata.name}`,\n      }));\n  }, [entities]);\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\n        </Typography>\n      </Box>\n    );\n  }\n\n  if (items.length === 0) {\n    return (\n      <>\n        <Typography\n          variant=\"body2\"\n          sx={{ mx: 2, my: 1, color: 'text.disabled' }}\n        >\n          No templates available\n        </Typography>\n        {!hideDivider && <Divider sx={{ my: 0.5 }} />}\n      </>\n    );\n  }\n  return (\n    <MenuSection\n      hideDivider={hideDivider}\n      sectionLabel=\"Use a template\"\n      optionalLink=\"/create\"\n      optionalLinkLabel=\"All templates\"\n      items={items}\n      handleClose={handleClose}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;AAuCO,MAAM,2BAA2B,CAAC;AAAA,EACvC,WAAA;AAAA,EACA;AACF,CAAqC,KAAA;AACnC,EAAM,MAAA,UAAA,GAAa,OAAO,aAAa,CAAA;AAEvC,EAAA,MAAM,CAAC,QAAU,EAAA,WAAW,CAAI,GAAA,QAAA,CAAmB,EAAE,CAAA;AAErD,EAAA,MAAM,CAAC,QAAA,EAAU,UAAU,CAAA,GAAI,SAAS,IAAI,CAAA;AAC5C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAI,SAAS,IAAI,CAAA;AAEvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,gBAAgB,YAAY;AAChC,MAAI,IAAA;AACF,QAAM,MAAA,QAAA,GAAW,MAAM,UAAA,CAAW,WAAY,CAAA;AAAA,UAC5C,MAAQ,EAAA,EAAE,IAAM,EAAA,CAAC,UAAU,CAAE,EAAA;AAAA,UAC7B,KAAO,EAAA;AAAA,SACR,CAAA;AACD,QAAA,WAAA,CAAY,SAAS,KAAK,CAAA;AAAA,eACnB,GAAK,EAAA;AACZ,QAAA,QAAA,CAAS,GAAG,CAAA;AAAA,OACZ,SAAA;AACA,QAAA,UAAA,CAAW,KAAK,CAAA;AAAA;AAClB,KACF;AAEA,IAAc,aAAA,EAAA;AAAA,GAChB,EAAG,CAAC,UAAU,CAAC,CAAA;AAEf,EAAM,MAAA,KAAA,GAAQ,QAAQ,MAAM;AAC1B,IAAO,OAAA,QAAA,CACJ,OAAO,CAAK,CAAA,KAAA,CAAA,CAAE,SAAS,UAAU,CAAA,CACjC,IAAI,CAAM,CAAA,MAAA;AAAA,MACT,SAAW,EAAA,YAAA;AAAA,MACX,KAAO,EAAA,CAAA,CAAE,QAAS,CAAA,KAAA,IAAS,EAAE,QAAS,CAAA,IAAA;AAAA,MACtC,IAAM,EAAA,CAAA,0BAAA,EAA6B,CAAE,CAAA,QAAA,CAAS,IAAI,CAAA;AAAA,KAClD,CAAA,CAAA;AAAA,GACN,EAAG,CAAC,QAAQ,CAAC,CAAA;AAEb,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,2CACG,GAAI,EAAA,EAAA,OAAA,EAAQ,MAAO,EAAA,cAAA,EAAe,UAAS,UAAW,EAAA,QAAA,EAAS,CAAG,EAAA,CAAA,EAAA,sCAChE,UAAW,EAAA,EAAA,OAAA,EAAQ,SAAQ,KAAM,EAAA,OAAA,EAAA,EAAQ,0BAE1C,CACF,CAAA;AAAA;AAIJ,EAAI,IAAA,KAAA,CAAM,WAAW,CAAG,EAAA;AACtB,IAAA,uBAEI,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,OAAA;AAAA,QACR,IAAI,EAAE,EAAA,EAAI,GAAG,EAAI,EAAA,CAAA,EAAG,OAAO,eAAgB;AAAA,OAAA;AAAA,MAC5C;AAAA,KAED,EACC,CAAC,WAAA,oBAAgB,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,IAAI,EAAE,EAAA,EAAI,GAAI,EAAA,EAAG,CAC7C,CAAA;AAAA;AAGJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,WAAA;AAAA,MACA,YAAa,EAAA,gBAAA;AAAA,MACb,YAAa,EAAA,SAAA;AAAA,MACb,iBAAkB,EAAA,eAAA;AAAA,MAClB,KAAA;AAAA,MACA;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/HeaderIcon/HeaderIcon.esm.js

@@ -6,7 +6,7 @@ import Box from '@mui/material/Box';
 const HeaderIcon = ({
   icon,
   size = "small",
-  styles
+  layout
 }) => {
   const app = useApp();
   if (!icon) {
@@ -14,24 +14,32 @@ const HeaderIcon = ({
   }
   const SystemIcon = app.getSystemIcon(icon);
   if (SystemIcon) {
-    return /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center", ...styles } }, /* @__PURE__ */ React.createElement(SystemIcon, { fontSize: size }));
+    return /* @__PURE__ */ React.createElement(Box, { sx: { display: "flex", alignItems: "center", ...layout } }, /* @__PURE__ */ React.createElement(SystemIcon, { fontSize: size }));
   }
   if (icon.startsWith("<svg")) {
     const svgDataUri = `data:image/svg+xml;base64,${btoa(icon)}`;
-    return /* @__PURE__ */ React.createElement(MuiIcon, { fontSize: size, sx: { ...styles } }, /* @__PURE__ */ React.createElement("img", { src: svgDataUri, alt: "" }));
+    return /* @__PURE__ */ React.createElement(MuiIcon, { fontSize: size, sx: layout }, /* @__PURE__ */ React.createElement("img", { src: svgDataUri, alt: "" }));
   }
   if (icon.startsWith("https://") || icon.startsWith("http://") || icon.startsWith("/")) {
     return /* @__PURE__ */ React.createElement(
       MuiIcon,
       {
         fontSize: size,
-        sx: styles,
-        baseClassName: "material-icons-outlined"
+        baseClassName: "material-icons-outlined",
+        sx: layout
       },
       /* @__PURE__ */ React.createElement("img", { src: icon, alt: "" })
     );
   }
-  return /* @__PURE__ */ React.createElement(MuiIcon, { fontSize: size, baseClassName: "material-icons-outlined" }, icon);
+  return /* @__PURE__ */ React.createElement(
+    MuiIcon,
+    {
+      fontSize: size,
+      baseClassName: "material-icons-outlined",
+      sx: layout
+    },
+    icon
+  );
 };
 
 export { HeaderIcon };

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderIcon.esm.js","sources":["../../../src/components/HeaderIcon/HeaderIcon.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { useApp } from '@backstage/core-plugin-api';\nimport MuiIcon from '@mui/material/Icon';\nimport Box from '@mui/material/Box';\n\n/**\n * @public\n */\nexport interface HeaderIconProps {\n  icon: string;\n  size?: 'small' | 'medium' | 'large';\n  styles?: React.CSSProperties;\n}\n\n/**\n * @public\n */\nexport const HeaderIcon = ({\n  icon,\n  size = 'small',\n  styles,\n}: HeaderIconProps) => {\n  const app = useApp();\n  if (!icon) {\n    return null;\n  }\n\n  const SystemIcon = app.getSystemIcon(icon);\n  if (SystemIcon) {\n    return (\n      <Box sx={{ display: 'flex', alignItems: 'center', ...styles }}>\n        <SystemIcon fontSize={size} />\n      </Box>\n    );\n  }\n\n  if (icon.startsWith('<svg')) {\n    const svgDataUri = `data:image/svg+xml;base64,${btoa(icon)}`;\n    return (\n      <MuiIcon fontSize={size} sx={{ ...styles }}>\n        <img src={svgDataUri} alt=\"\" />\n      </MuiIcon>\n    );\n  }\n\n  if (\n    icon.startsWith('https://') ||\n    icon.startsWith('http://') ||\n    icon.startsWith('/')\n  ) {\n    return (\n      <MuiIcon\n        fontSize={size}\n        sx={styles}\n        baseClassName=\"material-icons-outlined\"\n      >\n        <img src={icon} alt=\"\" />\n      </MuiIcon>\n    );\n  }\n\n  return (\n    <MuiIcon fontSize={size} baseClassName=\"material-icons-outlined\">\n      {icon}\n    </MuiIcon>\n  );\n};\n"],"names":[],"mappings":";;;;;AAgCO,MAAM,aAAa,CAAC;AAAA,EACzB,IAAA;AAAA,EACA,IAAO,GAAA,OAAA;AAAA,EACP;AACF,CAAuB,KAAA;AACrB,EAAA,MAAM,MAAM,MAAO,EAAA;AACnB,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA;AAAA;AAGT,EAAM,MAAA,UAAA,GAAa,GAAI,CAAA,aAAA,CAAc,IAAI,CAAA;AACzC,EAAA,IAAI,UAAY,EAAA;AACd,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,EAAE,SAAS,MAAQ,EAAA,UAAA,EAAY,QAAU,EAAA,GAAG,QACnD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,QAAA,EAAU,MAAM,CAC9B,CAAA;AAAA;AAIJ,EAAI,IAAA,IAAA,CAAK,UAAW,CAAA,MAAM,CAAG,EAAA;AAC3B,IAAA,MAAM,UAAa,GAAA,CAAA,0BAAA,EAA6B,IAAK,CAAA,IAAI,CAAC,CAAA,CAAA;AAC1D,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,QAAU,EAAA,IAAA,EAAM,IAAI,EAAE,GAAG,MAAO,EAAA,EAAA,sCACtC,KAAI,EAAA,EAAA,GAAA,EAAK,UAAY,EAAA,GAAA,EAAI,IAAG,CAC/B,CAAA;AAAA;AAIJ,EACE,IAAA,IAAA,CAAK,UAAW,CAAA,UAAU,CAC1B,IAAA,IAAA,CAAK,UAAW,CAAA,SAAS,CACzB,IAAA,IAAA,CAAK,UAAW,CAAA,GAAG,CACnB,EAAA;AACA,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,IAAA;AAAA,QACV,EAAI,EAAA,MAAA;AAAA,QACJ,aAAc,EAAA;AAAA,OAAA;AAAA,sBAEb,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,IAAA,EAAM,KAAI,EAAG,EAAA;AAAA,KACzB;AAAA;AAIJ,EAAA,2CACG,OAAQ,EAAA,EAAA,QAAA,EAAU,IAAM,EAAA,aAAA,EAAc,6BACpC,IACH,CAAA;AAEJ;;;;"}
+{"version":3,"file":"HeaderIcon.esm.js","sources":["../../../src/components/HeaderIcon/HeaderIcon.tsx"],"sourcesContent":["/*\n * Copyright Red Hat, Inc.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\nimport React from 'react';\nimport { useApp } from '@backstage/core-plugin-api';\nimport MuiIcon from '@mui/material/Icon';\nimport Box from '@mui/material/Box';\n\n/**\n * @public\n */\nexport interface HeaderIconProps {\n  icon: string;\n  size?: 'small' | 'medium' | 'large';\n  layout?: React.CSSProperties;\n}\n\n/**\n * @public\n */\nexport const HeaderIcon = ({\n  icon,\n  size = 'small',\n  layout,\n}: HeaderIconProps) => {\n  const app = useApp();\n  if (!icon) {\n    return null;\n  }\n\n  const SystemIcon = app.getSystemIcon(icon);\n  if (SystemIcon) {\n    return (\n      <Box sx={{ display: 'flex', alignItems: 'center', ...layout }}>\n        <SystemIcon fontSize={size} />\n      </Box>\n    );\n  }\n\n  if (icon.startsWith('<svg')) {\n    const svgDataUri = `data:image/svg+xml;base64,${btoa(icon)}`;\n    return (\n      <MuiIcon fontSize={size} sx={layout}>\n        <img src={svgDataUri} alt=\"\" />\n      </MuiIcon>\n    );\n  }\n\n  if (\n    icon.startsWith('https://') ||\n    icon.startsWith('http://') ||\n    icon.startsWith('/')\n  ) {\n    return (\n      <MuiIcon\n        fontSize={size}\n        baseClassName=\"material-icons-outlined\"\n        sx={layout}\n      >\n        <img src={icon} alt=\"\" />\n      </MuiIcon>\n    );\n  }\n\n  return (\n    <MuiIcon\n      fontSize={size}\n      baseClassName=\"material-icons-outlined\"\n      sx={layout}\n    >\n      {icon}\n    </MuiIcon>\n  );\n};\n"],"names":[],"mappings":";;;;;AAgCO,MAAM,aAAa,CAAC;AAAA,EACzB,IAAA;AAAA,EACA,IAAO,GAAA,OAAA;AAAA,EACP;AACF,CAAuB,KAAA;AACrB,EAAA,MAAM,MAAM,MAAO,EAAA;AACnB,EAAA,IAAI,CAAC,IAAM,EAAA;AACT,IAAO,OAAA,IAAA;AAAA;AAGT,EAAM,MAAA,UAAA,GAAa,GAAI,CAAA,aAAA,CAAc,IAAI,CAAA;AACzC,EAAA,IAAI,UAAY,EAAA;AACd,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAI,EAAI,EAAA,EAAE,SAAS,MAAQ,EAAA,UAAA,EAAY,QAAU,EAAA,GAAG,QACnD,EAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAW,EAAA,EAAA,QAAA,EAAU,MAAM,CAC9B,CAAA;AAAA;AAIJ,EAAI,IAAA,IAAA,CAAK,UAAW,CAAA,MAAM,CAAG,EAAA;AAC3B,IAAA,MAAM,UAAa,GAAA,CAAA,0BAAA,EAA6B,IAAK,CAAA,IAAI,CAAC,CAAA,CAAA;AAC1D,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAQ,QAAU,EAAA,IAAA,EAAM,EAAI,EAAA,MAAA,EAAA,kBAC1B,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,UAAA,EAAY,GAAI,EAAA,EAAA,EAAG,CAC/B,CAAA;AAAA;AAIJ,EACE,IAAA,IAAA,CAAK,UAAW,CAAA,UAAU,CAC1B,IAAA,IAAA,CAAK,UAAW,CAAA,SAAS,CACzB,IAAA,IAAA,CAAK,UAAW,CAAA,GAAG,CACnB,EAAA;AACA,IACE,uBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,QAAU,EAAA,IAAA;AAAA,QACV,aAAc,EAAA,yBAAA;AAAA,QACd,EAAI,EAAA;AAAA,OAAA;AAAA,sBAEH,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,GAAK,EAAA,IAAA,EAAM,KAAI,EAAG,EAAA;AAAA,KACzB;AAAA;AAIJ,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,QAAU,EAAA,IAAA;AAAA,MACV,aAAc,EAAA,yBAAA;AAAA,MACd,EAAI,EAAA;AAAA,KAAA;AAAA,IAEH;AAAA,GACH;AAEJ;;;;"}

package/dist/components/HeaderIconButton/HeaderIconButton.esm.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link as Link$1 } from '@backstage/core-components';
+import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { HeaderIcon } from '../HeaderIcon/HeaderIcon.esm.js';
@@ -13,24 +14,23 @@ const HeaderIconButton = ({
   size = "small",
   ariaLabel,
   to,
-  style
+  layout
 }) => {
   if (!title) {
     console.warn("HeaderIconButton has no title:", { icon, to });
   }
   const linkProps = { to };
-  return /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip ?? title }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Box, { sx: layout }, /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip ?? title }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
     IconButton,
     {
       LinkComponent: Link,
       color,
       size,
       "aria-label": ariaLabel ?? title,
-      ...linkProps,
-      sx: style
+      ...linkProps
     },
     /* @__PURE__ */ React.createElement(HeaderIcon, { icon, size })
-  )));
+  ))));
 };
 
 export { HeaderIconButton };