@backstage/ui 0.0.0-nightly-20250816024305 → 0.0.0-nightly-20250818024926

package/CHANGELOG.md

@@ -1,11 +1,12 @@
 # @backstage/ui
 
-## 0.0.0-nightly-20250816024305
+## 0.0.0-nightly-20250818024926
 
 ### Minor Changes
 
 - 0615e54: We are moving our DataTable component to React Aria. We removed our DataTable to only use Table as a single and opinionated option for tables. This new structure is made possible by using React Aria under the hood.
 - b245c9d: Backstage UI - HeaderPage - We are updating the breadcrumb to be more visible and accessible.
+- 800f593: **Breaking change** We are updating the Menu component to use React Aria under the hood. The structure and all props are changing to follow React Aria's guidance.
 - b0e47f3: **Breaking** We are upgrading our `Text` component to support all font sizes making the `Heading` component redundant. The new `Text` component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the `as` prop to include all possible values. The `Link` component has also been updated to match the new `Text` component.
 
 ### Patch Changes

package/css/styles.css

@@ -9688,184 +9688,245 @@
   }
 }
 
-.bui-MenuPositioner {
-  z-index: 100;
-  outline: 0;
-}
-
-.bui-MenuPopup {
-  background-color: var(--bui-bg-surface-1);
+.bui-MenuPopover {
   border: 1px solid var(--bui-border);
+  border-radius: var(--bui-radius-2);
+  background: var(--bui-bg-surface-1);
   color: var(--bui-fg-primary);
-  transform-origin: var(--transform-origin);
-  max-width: min(var(--available-width), 340px);
-  max-height: min(var(--available-height), 500px);
-  padding-bottom: var(--bui-space-1);
-  border-radius: .375rem;
   outline: none;
   flex-direction: column;
-  transition: transform .15s, opacity .15s;
+  min-height: 0;
+  transition: transform .2s, opacity .2s;
   display: flex;
-  position: relative;
-  overflow: auto;
+  overflow: hidden;
 
-  &[data-starting-style], &[data-ending-style] {
+  &[data-entering], &[data-exiting] {
+    transform: var(--origin);
     opacity: 0;
-    transform: scale(.9);
   }
-}
 
-.bui-MenuItem {
-  user-select: none;
-  align-items: center;
-  gap: var(--bui-space-2);
-  height: 32px;
-  color: var(--bui-fg-primary);
-  border-radius: var(--bui-radius-2);
-  margin-inline: var(--bui-space-1);
-  padding-inline: var(--bui-space-2);
-  font-size: var(--bui-font-size-3);
-  cursor: pointer;
-  outline: 0;
-  flex-shrink: 0;
-  text-decoration: none;
-  display: flex;
+  &[data-placement="top"] {
+    --origin: translateY(8px);
+  }
 
-  &:first-child {
-    margin-top: var(--bui-space-1);
+  &[data-placement="bottom"] {
+    --origin: translateY(-8px);
+  }
+
+  &[data-placement="right"] {
+    --origin: translateX(-8px);
   }
 
-  &[data-highlighted] {
-    background-color: var(--bui-gray-3);
+  &[data-placement="left"] {
+    --origin: translateX(8px);
   }
 }
 
-.bui-MenuSubmenuTrigger {
-  user-select: none;
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--bui-space-2);
-  height: 32px;
-  color: var(--bui-fg-primary);
-  border-radius: var(--bui-radius-2);
-  margin-inline: var(--bui-space-1);
+.bui-MenuContent {
+  max-height: inherit;
+  box-sizing: border-box;
+  padding: var(--bui-space-1);
+  outline: none;
+  min-width: 150px;
+  overflow: auto;
+}
+
+.bui-MenuPopover .bui-ScrollAreaRoot {
+  flex-direction: column;
+  flex: 1;
+  height: 100%;
+  min-height: 0;
+  display: flex;
+}
+
+.bui-MenuPopover .bui-ScrollAreaScrollbar {
+  margin-inline: var(--bui-space-1_5);
+}
+
+.bui-MenuItem {
+  height: 2rem;
   padding-inline: var(--bui-space-2);
+  border-radius: var(--bui-radius-2);
+  cursor: default;
+  color: var(--bui-fg-primary);
   font-size: var(--bui-font-size-3);
-  cursor: pointer;
-  outline: 0;
-  flex-shrink: 0;
-  text-decoration: none;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--bui-space-6);
+  outline: none;
   display: flex;
 
-  & .bui-Icon {
-    color: var(--bui-fg-secondary);
+  &[data-focused], &[data-open] {
+    background: var(--bui-bg-surface-2);
+    color: var(--bui-fg-primary);
   }
 
-  &:first-child {
-    margin-top: var(--bui-space-1);
+  &[data-color="danger"] {
+    color: var(--bui-fg-danger);
   }
 
-  &[data-popup-open], &[data-highlighted] {
-    background-color: var(--bui-gray-3);
+  &[data-color="danger"][data-focused] {
+    background: var(--bui-bg-danger);
+    color: var(--bui-fg-danger);
+  }
 
-    & .bui-Icon {
-      color: var(--bui-fg-primary);
+  &[data-has-submenu] {
+    & > .bui-MenuItemArrow {
+      display: block;
     }
   }
 }
 
-.bui-MenuSeparator {
-  background-color: var(--color-gray-200);
-  height: 1px;
-  margin: .375rem 1rem;
-}
-
-.bui-SubmenuComboboxSearch {
-  padding-inline: var(--bui-space-3);
-  border: none;
-  border-bottom: 1px solid var(--bui-border);
-  background-color: var(--bui-bg-surface-1);
-  width: 100%;
-  height: 32px;
+.bui-MenuItemListBox {
+  height: 2rem;
+  padding-inline: var(--bui-space-2);
+  border-radius: var(--bui-radius-2);
+  cursor: default;
   color: var(--bui-fg-primary);
-  line-height: 140%;
   font-size: var(--bui-font-size-3);
-  z-index: 1;
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--bui-space-6);
   outline: none;
-  position: sticky;
-  top: 0;
+  display: flex;
 
-  &::placeholder {
-    color: var(--bui-fg-secondary);
+  &:hover {
+    background: var(--bui-bg-surface-2);
+    color: var(--bui-fg-primary);
   }
 
-  &:disabled {
-    opacity: .6;
-    cursor: not-allowed;
+  &[data-selected] .bui-MenuItemListBoxCheck {
+    & > svg {
+      opacity: 1;
+      color: var(--bui-fg-primary);
+    }
   }
 }
 
-.bui-SubmenuComboboxItems {
-  padding-top: var(--bui-space-2);
-  outline: none;
-  flex-direction: column;
+.bui-MenuItemListBoxCheck {
+  justify-content: center;
+  align-items: center;
+  width: 1rem;
+  height: 1rem;
   display: flex;
-  overflow-y: auto;
-}
 
-.bui-SubmenuComboboxNoResults {
-  padding-inline: var(--bui-space-3);
-  padding-top: var(--bui-space-2);
-  padding-bottom: var(--bui-space-4);
-  color: var(--bui-fg-secondary);
-  font-size: var(--bui-font-size-3);
+  & > svg {
+    opacity: 0;
+    width: 1rem;
+    height: 1rem;
+  }
 }
 
-.bui-SubmenuComboboxItem {
-  user-select: none;
-  justify-content: space-between;
+.bui-MenuItemContent {
   align-items: center;
   gap: var(--bui-space-2);
-  height: 32px;
-  color: var(--bui-fg-primary);
-  border-radius: var(--bui-radius-2);
-  margin-inline: var(--bui-space-1);
-  padding-inline: var(--bui-space-2);
-  font-size: var(--bui-font-size-3);
-  cursor: pointer;
-  outline: 0;
-  flex-shrink: 0;
-  text-decoration: none;
   display: flex;
 
-  &[data-highlighted] {
-    background-color: var(--bui-gray-3);
+  & > svg {
+    width: 1rem;
+    height: 1rem;
   }
+}
 
-  &[data-disabled] {
-    opacity: .5;
-    cursor: not-allowed;
+.bui-MenuItemArrow {
+  width: 1rem;
+  height: 1rem;
+  display: none;
+
+  & > svg {
+    width: 1rem;
+    height: 1rem;
   }
 }
 
-.bui-SubmenuComboboxItemCheckbox {
-  width: 16px;
-  height: 16px;
+.bui-MenuSection {
+  &:first-child .bui-MenuSectionHeader {
+    padding-top: 0;
+  }
+}
+
+.bui-MenuSectionHeader {
+  height: 2rem;
+  padding-top: var(--bui-space-3);
+  padding-left: var(--bui-space-2);
   color: var(--bui-fg-primary);
-  border-radius: var(--bui-radius-2);
-  border: 1px solid var(--bui-border);
-  background: var(--bui-bg-surface-1);
+  font-size: var(--bui-font-size-1);
+  letter-spacing: .05rem;
+  text-transform: uppercase;
+  align-items: center;
+  font-weight: bold;
+  display: flex;
+}
+
+.bui-MenuSeparator {
+  background: var(--bui-border);
+  height: 1px;
+  margin-inline: var(--bui-space-1_5);
+  margin-block: var(--bui-space-1);
+}
+
+.bui-MenuSearchField {
+  font-family: var(--bui-font-regular);
   flex-shrink: 0;
+  width: 100%;
+  position: relative;
+
+  &[data-empty] {
+    & .bui-MenuSearchFieldClear {
+      display: none;
+    }
+  }
+}
+
+.bui-MenuSearchFieldInput {
+  padding: 0 var(--bui-space-3);
+  border: none;
+  border-bottom: 1px solid var(--bui-border);
+  background-color: var(--bui-bg-surface-1);
+  font-size: var(--bui-font-size-3);
+  font-family: var(--bui-font-regular);
+  font-weight: var(--bui-font-weight-regular);
+  color: var(--bui-fg-primary);
+  width: 100%;
+  height: 2rem;
+  cursor: inherit;
+  outline: none;
+  align-items: center;
+  display: flex;
+
+  &::-webkit-search-cancel-button, &::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+.bui-MenuSearchFieldClear {
+  right: var(--bui-space-2);
+  cursor: pointer;
+  color: var(--bui-fg-secondary);
+  background-color: #0000;
+  border: none;
   justify-content: center;
   align-items: center;
+  margin: 0;
+  padding: 0;
+  transition: color .2s ease-in-out;
   display: flex;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+
+  & > svg {
+    width: 1rem;
+    height: 1rem;
+  }
 }
 
-.bui-SubmenuComboboxItemLabel {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  overflow: hidden;
+.bui-MenuEmptyState {
+  padding: var(--bui-space-1);
+  color: var(--bui-fg-secondary);
+  font-size: var(--bui-font-size-3);
+  font-family: var(--bui-font-regular);
+  font-weight: var(--bui-font-weight-regular);
 }
 
 .bui-Popover {

package/dist/components/Checkbox/Checkbox.esm.js

@@ -14,13 +14,12 @@ import '../FieldLabel/FieldLabel.esm.js';
 import 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import '@remixicon/react';
-import '../ButtonIcon/ButtonIcon.esm.js';
-import '../Menu/Menu.esm.js';
 import '../Text/Text.esm.js';
 import 'react-router-dom';
 import '../Tabs/Tabs.esm.js';
 import '../Link/Link.esm.js';
 import { Icon } from '../Icon/Icon.esm.js';
+import '../ButtonIcon/ButtonIcon.esm.js';
 import '../ButtonLink/ButtonLink.esm.js';
 import '../RadioGroup/RadioGroup.esm.js';
 import '../Table/components/Cell.esm.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 { forwardRef } from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';\nimport { Icon } from '../..';\nimport type { CheckboxProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport clsx from 'clsx';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(\n  (props, ref) => {\n    const {\n      label,\n      checked,\n      onChange,\n      disabled,\n      required,\n      className,\n      name,\n      value,\n      style,\n    } = props;\n\n    const { classNames } = useStyles('Checkbox');\n\n    const checkboxElement = (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        checked={checked}\n        onCheckedChange={onChange}\n        disabled={disabled}\n        required={required}\n        name={name}\n        value={value}\n        style={style}\n      >\n        <CheckboxPrimitive.Indicator className={classNames.indicator}>\n          <Icon name=\"check\" size={12} />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n\n    return label ? (\n      <label className={classNames.label}>\n        {checkboxElement}\n        {label}\n      </label>\n    ) : (\n      checkboxElement\n    );\n  },\n);\n"],"names":["CheckboxPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM;AAAA,MACJ,KAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,KACF,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,UAAU,CAAA;AAE3C,IAAA,MAAM,eAAA,mBACJ,GAAA;AAAA,MAACA,UAAA,CAAkB,IAAA;AAAA,MAAlB;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,OAAA;AAAA,QACA,eAAA,EAAiB,QAAA;AAAA,QACjB,QAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QAEA,QAAA,kBAAA,GAAA,CAACA,UAAA,CAAkB,SAAA,EAAlB,EAA4B,SAAA,EAAW,UAAA,CAAW,SAAA,EACjD,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,IAAA,EAAM,IAAI,CAAA,EAC/B;AAAA;AAAA,KACF;AAGF,IAAA,OAAO,KAAA,mBACL,IAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAW,WAAW,KAAA,EAC1B,QAAA,EAAA;AAAA,MAAA,eAAA;AAAA,MACA;AAAA,KAAA,EACH,CAAA,GAEA,eAAA;AAAA,EAEJ;AACF;;;;"}
+{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 { forwardRef } from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';\nimport { Icon } from '../..';\nimport type { CheckboxProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport clsx from 'clsx';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(\n  (props, ref) => {\n    const {\n      label,\n      checked,\n      onChange,\n      disabled,\n      required,\n      className,\n      name,\n      value,\n      style,\n    } = props;\n\n    const { classNames } = useStyles('Checkbox');\n\n    const checkboxElement = (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        checked={checked}\n        onCheckedChange={onChange}\n        disabled={disabled}\n        required={required}\n        name={name}\n        value={value}\n        style={style}\n      >\n        <CheckboxPrimitive.Indicator className={classNames.indicator}>\n          <Icon name=\"check\" size={12} />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n\n    return label ? (\n      <label className={classNames.label}>\n        {checkboxElement}\n        {label}\n      </label>\n    ) : (\n      checkboxElement\n    );\n  },\n);\n"],"names":["CheckboxPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM;AAAA,MACJ,KAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA;AAAA,KACF,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,UAAU,CAAA;AAE3C,IAAA,MAAM,eAAA,mBACJ,GAAA;AAAA,MAACA,UAAA,CAAkB,IAAA;AAAA,MAAlB;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,OAAA;AAAA,QACA,eAAA,EAAiB,QAAA;AAAA,QACjB,QAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QAEA,QAAA,kBAAA,GAAA,CAACA,UAAA,CAAkB,SAAA,EAAlB,EAA4B,SAAA,EAAW,UAAA,CAAW,SAAA,EACjD,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAK,OAAA,EAAQ,IAAA,EAAM,IAAI,CAAA,EAC/B;AAAA;AAAA,KACF;AAGF,IAAA,OAAO,KAAA,mBACL,IAAA,CAAC,OAAA,EAAA,EAAM,SAAA,EAAW,WAAW,KAAA,EAC1B,QAAA,EAAA;AAAA,MAAA,eAAA;AAAA,MACA;AAAA,KAAA,EACH,CAAA,GAEA,eAAA;AAAA,EAEJ;AACF;;;;"}

package/dist/components/Header/Header.esm.js

@@ -4,15 +4,7 @@ import { Tabs, TabList, Tab } from '../Tabs/Tabs.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 
 const Header = (props) => {
-  const {
-    tabs,
-    icon,
-    title,
-    titleLink,
-    menuItems,
-    customActions,
-    onTabSelectionChange
-  } = props;
+  const { tabs, icon, title, titleLink, customActions, onTabSelectionChange } = props;
   const { classNames } = useStyles("Header");
   const hasTabs = tabs && tabs.length > 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -22,7 +14,6 @@ const Header = (props) => {
         icon,
         title,
         titleLink,
-        menuItems,
         customActions,
         hasTabs
       }

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

@@ -1 +1 @@
-{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 type { HeaderProps } from './types';\nimport { HeaderToolbar } from './HeaderToolbar';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { type NavigateOptions } from 'react-router-dom';\n\ndeclare module 'react-aria-components' {\n  interface RouterConfig {\n    routerOptions: NavigateOptions;\n  }\n}\n\n/**\n * A component that renders a toolbar.\n *\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n  const {\n    tabs,\n    icon,\n    title,\n    titleLink,\n    menuItems,\n    customActions,\n    onTabSelectionChange,\n  } = props;\n\n  const { classNames } = useStyles('Header');\n\n  const hasTabs = tabs && tabs.length > 0;\n\n  return (\n    <>\n      <HeaderToolbar\n        icon={icon}\n        title={title}\n        titleLink={titleLink}\n        menuItems={menuItems}\n        customActions={customActions}\n        hasTabs={hasTabs}\n      />\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs onSelectionChange={onTabSelectionChange}>\n            <TabList>\n              {tabs?.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiCO,MAAM,MAAA,GAAS,CAAC,KAAA,KAAuB;AAC5C,EAAA,MAAM;AAAA,IACJ,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF,GAAI,KAAA;AAEJ,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAQ,CAAA;AAEzC,EAAA,MAAM,OAAA,GAAU,IAAA,IAAQ,IAAA,CAAK,MAAA,GAAS,CAAA;AAEtC,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IACC,IAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAW,WAAA,EACzB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,iBAAA,EAAmB,oBAAA,EACvB,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,EAAM,IAAI,CAAA,GAAA,qBACT,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAA,CAAI,EAAA;AAAA,QACR,MAAM,GAAA,CAAI,IAAA;AAAA,QACV,eAAe,GAAA,CAAI,aAAA;AAAA,QAElB,QAAA,EAAA,GAAA,CAAI;AAAA,OAAA;AAAA,MALA,GAAA,CAAI;AAAA,KAOZ,CAAA,EACH,CAAA,EACF,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\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 type { HeaderProps } from './types';\nimport { HeaderToolbar } from './HeaderToolbar';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { type NavigateOptions } from 'react-router-dom';\n\ndeclare module 'react-aria-components' {\n  interface RouterConfig {\n    routerOptions: NavigateOptions;\n  }\n}\n\n/**\n * A component that renders a toolbar.\n *\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n  const { tabs, icon, title, titleLink, customActions, onTabSelectionChange } =\n    props;\n\n  const { classNames } = useStyles('Header');\n\n  const hasTabs = tabs && tabs.length > 0;\n\n  return (\n    <>\n      <HeaderToolbar\n        icon={icon}\n        title={title}\n        titleLink={titleLink}\n        customActions={customActions}\n        hasTabs={hasTabs}\n      />\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs onSelectionChange={onTabSelectionChange}>\n            <TabList>\n              {tabs?.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </>\n  );\n};\n"],"names":[],"mappings":";;;;;AAiCO,MAAM,MAAA,GAAS,CAAC,KAAA,KAAuB;AAC5C,EAAA,MAAM,EAAE,IAAA,EAAM,IAAA,EAAM,OAAO,SAAA,EAAW,aAAA,EAAe,sBAAqB,GACxE,KAAA;AAEF,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAQ,CAAA;AAEzC,EAAA,MAAM,OAAA,GAAU,IAAA,IAAQ,IAAA,CAAK,MAAA,GAAS,CAAA;AAEtC,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IACC,IAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAW,WAAA,EACzB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,iBAAA,EAAmB,oBAAA,EACvB,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,EAAM,IAAI,CAAA,GAAA,qBACT,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAA,CAAI,EAAA;AAAA,QACR,MAAM,GAAA,CAAI,IAAA;AAAA,QACV,eAAe,GAAA,CAAI,aAAA;AAAA,QAElB,QAAA,EAAA,GAAA,CAAI;AAAA,OAAA;AAAA,MALA,GAAA,CAAI;AAAA,KAOZ,CAAA,EACH,CAAA,EACF,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}

package/dist/components/Header/HeaderToolbar.esm.js

@@ -2,14 +2,12 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { RouterProvider, Link } from 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { useRef } from 'react';
-import { RiShapesLine, RiMore2Line } from '@remixicon/react';
-import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
-import { Menu } from '../Menu/Menu.esm.js';
+import { RiShapesLine } from '@remixicon/react';
 import { Text } from '../Text/Text.esm.js';
 import { useNavigate, useHref } from 'react-router-dom';
 
 const HeaderToolbar = (props) => {
-  const { icon, title, titleLink, menuItems, customActions, hasTabs } = props;
+  const { icon, title, titleLink, customActions, hasTabs } = props;
   const { classNames } = useStyles("Header");
   let navigate = useNavigate();
   const toolbarWrapperRef = useRef(null);
@@ -21,33 +19,7 @@ const HeaderToolbar = (props) => {
   ] });
   return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx("div", { className: classNames.toolbar, "data-has-tabs": hasTabs, children: /* @__PURE__ */ jsxs("div", { className: classNames.toolbarWrapper, ref: toolbarWrapperRef, children: [
     /* @__PURE__ */ jsx("div", { className: classNames.toolbarContent, ref: toolbarContentRef, children: /* @__PURE__ */ jsx(Text, { as: "h1", variant: "body-medium", children: titleLink ? /* @__PURE__ */ jsx(Link, { className: classNames.toolbarName, href: titleLink, children: titleContent }) : /* @__PURE__ */ jsx("div", { className: classNames.toolbarName, children: titleContent }) }) }),
-    /* @__PURE__ */ jsxs("div", { className: classNames.toolbarControls, ref: toolbarControlsRef, children: [
-      customActions,
-      menuItems && /* @__PURE__ */ jsxs(Menu.Root, { children: [
-        /* @__PURE__ */ jsx(
-          Menu.Trigger,
-          {
-            render: (props2) => /* @__PURE__ */ jsx(
-              ButtonIcon,
-              {
-                size: "small",
-                icon: /* @__PURE__ */ jsx(RiMore2Line, {}),
-                variant: "tertiary",
-                ...props2
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { sideOffset: 4, align: "end", children: /* @__PURE__ */ jsx(Menu.Popup, { children: menuItems.map((option) => /* @__PURE__ */ jsx(
-          Menu.Item,
-          {
-            onClick: () => option.onClick?.(),
-            children: option.label
-          },
-          option.value
-        )) }) }) })
-      ] })
-    ] })
+    /* @__PURE__ */ jsx("div", { className: classNames.toolbarControls, ref: toolbarControlsRef, children: customActions })
   ] }) }) });
 };
 

package/dist/components/Header/HeaderToolbar.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderToolbar.esm.js","sources":["../../../src/components/Header/HeaderToolbar.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\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 { Link, RouterProvider } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useRef } from 'react';\nimport { RiMore2Line, RiShapesLine } from '@remixicon/react';\nimport type { HeaderToolbarProps } from './types';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { Menu } from '../Menu';\nimport { Text } from '../Text';\nimport { useNavigate, useHref } from 'react-router-dom';\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n  const { icon, title, titleLink, menuItems, customActions, hasTabs } = props;\n  const { classNames } = useStyles('Header');\n  let navigate = useNavigate();\n\n  // Refs for collision detection\n  const toolbarWrapperRef = useRef<HTMLDivElement>(null);\n  const toolbarContentRef = useRef<HTMLDivElement>(null);\n  const toolbarControlsRef = useRef<HTMLDivElement>(null);\n\n  const titleContent = (\n    <>\n      <div className={classNames.toolbarIcon}>{icon || <RiShapesLine />}</div>\n      <Text variant=\"body-medium\">{title || 'Your plugin'}</Text>\n    </>\n  );\n\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <div className={classNames.toolbar} data-has-tabs={hasTabs}>\n        <div className={classNames.toolbarWrapper} ref={toolbarWrapperRef}>\n          <div className={classNames.toolbarContent} ref={toolbarContentRef}>\n            <Text as=\"h1\" variant=\"body-medium\">\n              {titleLink ? (\n                <Link className={classNames.toolbarName} href={titleLink}>\n                  {titleContent}\n                </Link>\n              ) : (\n                <div className={classNames.toolbarName}>{titleContent}</div>\n              )}\n            </Text>\n          </div>\n          <div className={classNames.toolbarControls} ref={toolbarControlsRef}>\n            {customActions}\n            {menuItems && (\n              <Menu.Root>\n                <Menu.Trigger\n                  render={props => (\n                    <ButtonIcon\n                      size=\"small\"\n                      icon={<RiMore2Line />}\n                      variant=\"tertiary\"\n                      {...props}\n                    />\n                  )}\n                />\n                <Menu.Portal>\n                  <Menu.Positioner sideOffset={4} align=\"end\">\n                    <Menu.Popup>\n                      {menuItems.map(option => (\n                        <Menu.Item\n                          key={option.value}\n                          onClick={() => option.onClick?.()}\n                        >\n                          {option.label}\n                        </Menu.Item>\n                      ))}\n                    </Menu.Popup>\n                  </Menu.Positioner>\n                </Menu.Portal>\n              </Menu.Root>\n            )}\n          </div>\n        </div>\n      </div>\n    </RouterProvider>\n  );\n};\n"],"names":["props"],"mappings":"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"}
+{"version":3,"file":"HeaderToolbar.esm.js","sources":["../../../src/components/Header/HeaderToolbar.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\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 { Link, RouterProvider } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useRef } from 'react';\nimport { RiShapesLine } from '@remixicon/react';\nimport type { HeaderToolbarProps } from './types';\nimport { Text } from '../Text';\nimport { useNavigate, useHref } from 'react-router-dom';\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n  const { icon, title, titleLink, customActions, hasTabs } = props;\n  const { classNames } = useStyles('Header');\n  let navigate = useNavigate();\n\n  // Refs for collision detection\n  const toolbarWrapperRef = useRef<HTMLDivElement>(null);\n  const toolbarContentRef = useRef<HTMLDivElement>(null);\n  const toolbarControlsRef = useRef<HTMLDivElement>(null);\n\n  const titleContent = (\n    <>\n      <div className={classNames.toolbarIcon}>{icon || <RiShapesLine />}</div>\n      <Text variant=\"body-medium\">{title || 'Your plugin'}</Text>\n    </>\n  );\n\n  return (\n    <RouterProvider navigate={navigate} useHref={useHref}>\n      <div className={classNames.toolbar} data-has-tabs={hasTabs}>\n        <div className={classNames.toolbarWrapper} ref={toolbarWrapperRef}>\n          <div className={classNames.toolbarContent} ref={toolbarContentRef}>\n            <Text as=\"h1\" variant=\"body-medium\">\n              {titleLink ? (\n                <Link className={classNames.toolbarName} href={titleLink}>\n                  {titleContent}\n                </Link>\n              ) : (\n                <div className={classNames.toolbarName}>{titleContent}</div>\n              )}\n            </Text>\n          </div>\n          <div className={classNames.toolbarControls} ref={toolbarControlsRef}>\n            {customActions}\n          </div>\n        </div>\n      </div>\n    </RouterProvider>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA6BO,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA8B;AAC1D,EAAA,MAAM,EAAE,IAAA,EAAM,KAAA,EAAO,SAAA,EAAW,aAAA,EAAe,SAAQ,GAAI,KAAA;AAC3D,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,QAAQ,CAAA;AACzC,EAAA,IAAI,WAAW,WAAA,EAAY;AAG3B,EAAA,MAAM,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAA,MAAM,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAA,MAAM,kBAAA,GAAqB,OAAuB,IAAI,CAAA;AAEtD,EAAA,MAAM,+BACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,UAAA,CAAW,aAAc,QAAA,EAAA,IAAA,oBAAQ,GAAA,CAAC,gBAAa,CAAA,EAAG,CAAA;AAAA,oBAClE,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,aAAA,EAAe,mBAAS,aAAA,EAAc;AAAA,GAAA,EACtD,CAAA;AAGF,EAAA,2BACG,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA,CAAC,SAAI,SAAA,EAAW,UAAA,CAAW,OAAA,EAAS,eAAA,EAAe,SACjD,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,UAAA,CAAW,cAAA,EAAgB,KAAK,iBAAA,EAC9C,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,cAAA,EAAgB,GAAA,EAAK,iBAAA,EAC9C,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,IAAA,EAAK,OAAA,EAAQ,aAAA,EACnB,QAAA,EAAA,SAAA,mBACC,GAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,UAAA,CAAW,WAAA,EAAa,IAAA,EAAM,SAAA,EAC5C,QAAA,EAAA,YAAA,EACH,CAAA,mBAEA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,WAAA,EAAc,QAAA,EAAA,YAAA,EAAa,GAE1D,CAAA,EACF,CAAA;AAAA,wBACC,KAAA,EAAA,EAAI,SAAA,EAAW,WAAW,eAAA,EAAiB,GAAA,EAAK,oBAC9C,QAAA,EAAA,aAAA,EACH;AAAA,GAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/HeaderPage/HeaderPage.esm.js

@@ -1,15 +1,13 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { Menu } from '../Menu/Menu.esm.js';
 import { Text } from '../Text/Text.esm.js';
-import { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
-import { RiArrowRightSLine, RiMore2Line } from '@remixicon/react';
+import { RiArrowRightSLine } from '@remixicon/react';
 import { Tabs, TabList, Tab } from '../Tabs/Tabs.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { Container } from '../Container/Container.esm.js';
 import { Link } from '../Link/Link.esm.js';
 
 const HeaderPage = (props) => {
-  const { title, menuItems, tabs, customActions, breadcrumbs } = props;
+  const { title, tabs, customActions, breadcrumbs } = props;
   const { classNames } = useStyles("HeaderPage");
   return /* @__PURE__ */ jsxs(Container, { className: classNames.root, children: [
     /* @__PURE__ */ jsxs("div", { className: classNames.content, children: [
@@ -31,33 +29,7 @@ const HeaderPage = (props) => {
         ] }, breadcrumb.label)),
         /* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", as: "h2", children: title })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: classNames.controls, children: [
-        customActions,
-        menuItems && /* @__PURE__ */ jsxs(Menu.Root, { children: [
-          /* @__PURE__ */ jsx(
-            Menu.Trigger,
-            {
-              render: (props2) => /* @__PURE__ */ jsx(
-                ButtonIcon,
-                {
-                  ...props2,
-                  size: "small",
-                  icon: /* @__PURE__ */ jsx(RiMore2Line, {}),
-                  variant: "tertiary"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { sideOffset: 4, align: "end", children: /* @__PURE__ */ jsx(Menu.Popup, { children: menuItems.map((menuItem) => /* @__PURE__ */ jsx(
-            Menu.Item,
-            {
-              onClick: () => menuItem.onClick?.(),
-              children: menuItem.label
-            },
-            menuItem.value
-          )) }) }) })
-        ] })
-      ] })
+      /* @__PURE__ */ jsx("div", { className: classNames.controls, children: customActions })
     ] }),
     tabs && /* @__PURE__ */ jsx("div", { className: classNames.tabsWrapper, children: /* @__PURE__ */ jsx(Tabs, { children: /* @__PURE__ */ jsx(TabList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(
       Tab,

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

@@ -1 +1 @@
-{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\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 type { HeaderPageProps } from './types';\nimport { Menu } from '../Menu';\nimport { Text } from '../Text';\nimport { ButtonIcon } from '../ButtonIcon';\nimport { RiArrowRightSLine, RiMore2Line } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { Container } from '../Container';\nimport { Link } from '../Link';\nimport { Fragment } from 'react/jsx-runtime';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n  const { title, menuItems, tabs, customActions, breadcrumbs } = props;\n  const { classNames } = useStyles('HeaderPage');\n\n  return (\n    <Container className={classNames.root}>\n      <div className={classNames.content}>\n        <div className={classNames.breadcrumbs}>\n          {breadcrumbs &&\n            breadcrumbs.map(breadcrumb => (\n              <Fragment key={breadcrumb.label}>\n                <Link\n                  href={breadcrumb.href}\n                  variant=\"title-small\"\n                  weight=\"bold\"\n                  color=\"secondary\"\n                  truncate\n                  style={{ maxWidth: '240px' }}\n                >\n                  {breadcrumb.label}\n                </Link>\n                <RiArrowRightSLine size={16} color=\"var(--bui-fg-secondary)\" />\n              </Fragment>\n            ))}\n          <Text variant=\"title-small\" weight=\"bold\" as=\"h2\">\n            {title}\n          </Text>\n        </div>\n        <div className={classNames.controls}>\n          {customActions}\n          {menuItems && (\n            <Menu.Root>\n              <Menu.Trigger\n                render={props => (\n                  <ButtonIcon\n                    {...props}\n                    size=\"small\"\n                    icon={<RiMore2Line />}\n                    variant=\"tertiary\"\n                  />\n                )}\n              />\n              <Menu.Portal>\n                <Menu.Positioner sideOffset={4} align=\"end\">\n                  <Menu.Popup>\n                    {menuItems.map(menuItem => (\n                      <Menu.Item\n                        key={menuItem.value}\n                        onClick={() => menuItem.onClick?.()}\n                      >\n                        {menuItem.label}\n                      </Menu.Item>\n                    ))}\n                  </Menu.Popup>\n                </Menu.Positioner>\n              </Menu.Portal>\n            </Menu.Root>\n          )}\n        </div>\n      </div>\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs>\n            <TabList>\n              {tabs.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </Container>\n  );\n};\n"],"names":["props"],"mappings":"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"}
+{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\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 type { HeaderPageProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { Container } from '../Container';\nimport { Link } from '../Link';\nimport { Fragment } from 'react/jsx-runtime';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n  const { title, tabs, customActions, breadcrumbs } = props;\n  const { classNames } = useStyles('HeaderPage');\n\n  return (\n    <Container className={classNames.root}>\n      <div className={classNames.content}>\n        <div className={classNames.breadcrumbs}>\n          {breadcrumbs &&\n            breadcrumbs.map(breadcrumb => (\n              <Fragment key={breadcrumb.label}>\n                <Link\n                  href={breadcrumb.href}\n                  variant=\"title-small\"\n                  weight=\"bold\"\n                  color=\"secondary\"\n                  truncate\n                  style={{ maxWidth: '240px' }}\n                >\n                  {breadcrumb.label}\n                </Link>\n                <RiArrowRightSLine size={16} color=\"var(--bui-fg-secondary)\" />\n              </Fragment>\n            ))}\n          <Text variant=\"title-small\" weight=\"bold\" as=\"h2\">\n            {title}\n          </Text>\n        </div>\n        <div className={classNames.controls}>{customActions}</div>\n      </div>\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs>\n            <TabList>\n              {tabs.map(tab => (\n                <Tab\n                  key={tab.id}\n                  id={tab.id}\n                  href={tab.href}\n                  matchStrategy={tab.matchStrategy}\n                >\n                  {tab.label}\n                </Tab>\n              ))}\n            </TabList>\n          </Tabs>\n        </div>\n      )}\n    </Container>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;AA8BO,MAAM,UAAA,GAAa,CAAC,KAAA,KAA2B;AACpD,EAAA,MAAM,EAAE,KAAA,EAAO,IAAA,EAAM,aAAA,EAAe,aAAY,GAAI,KAAA;AACpD,EAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,YAAY,CAAA;AAE7C,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,UAAA,CAAW,IAAA,EAC/B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,OAAA,EACzB,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,WAAA,EACxB,QAAA,EAAA;AAAA,QAAA,WAAA,IACC,WAAA,CAAY,GAAA,CAAI,CAAA,UAAA,qBACd,IAAA,CAAC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,MAAM,UAAA,CAAW,IAAA;AAAA,cACjB,OAAA,EAAQ,aAAA;AAAA,cACR,MAAA,EAAO,MAAA;AAAA,cACP,KAAA,EAAM,WAAA;AAAA,cACN,QAAA,EAAQ,IAAA;AAAA,cACR,KAAA,EAAO,EAAE,QAAA,EAAU,OAAA,EAAQ;AAAA,cAE1B,QAAA,EAAA,UAAA,CAAW;AAAA;AAAA,WACd;AAAA,0BACA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI,OAAM,yBAAA,EAA0B;AAAA,SAAA,EAAA,EAXhD,UAAA,CAAW,KAY1B,CACD,CAAA;AAAA,wBACH,GAAA,CAAC,QAAK,OAAA,EAAQ,aAAA,EAAc,QAAO,MAAA,EAAO,EAAA,EAAG,MAC1C,QAAA,EAAA,KAAA,EACH;AAAA,OAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,UAAW,QAAA,EAAA,aAAA,EAAc;AAAA,KAAA,EACtD,CAAA;AAAA,IACC,IAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,WAAA,EACzB,QAAA,kBAAA,GAAA,CAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAA,GAAA,qBACR,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAA,CAAI,EAAA;AAAA,QACR,MAAM,GAAA,CAAI,IAAA;AAAA,QACV,eAAe,GAAA,CAAI,aAAA;AAAA,QAElB,QAAA,EAAA,GAAA,CAAI;AAAA,OAAA;AAAA,MALA,GAAA,CAAI;AAAA,KAOZ,CAAA,EACH,CAAA,EACF,CAAA,EACF;AAAA,GAAA,EAEJ,CAAA;AAEJ;;;;"}