@backstage/ui 0.7.2-next.1 → 0.7.2-next.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @backstage/ui
 
+## 0.7.2-next.2
+
+### Patch Changes
+
+- 3c921c5: Making href mandatory in tabs that are part of a Header component
+- 5c21e45: Add react router for internal routing for ButtonLinks
+- 9781815: Remove auto selection of tabs for tabs that all have href defined
+- f6dff5b: Using react router for internal links in the Menu component
+
 ## 0.7.2-next.1
 
 ### Patch Changes

package/dist/components/ButtonLink/ButtonLink.esm.js

@@ -1,11 +1,14 @@
-import { jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { Link } from 'react-aria-components';
+import { Link, RouterProvider } from 'react-aria-components';
+import { useNavigate, useHref } from 'react-router-dom';
 import { useStyles } from '../../hooks/useStyles.esm.js';
+import { isExternalLink } from '../../utils/isExternalLink.esm.js';
 
 const ButtonLink = forwardRef(
   (props, ref) => {
+    const navigate = useNavigate();
     const {
       size = "small",
       variant = "primary",
@@ -13,6 +16,7 @@ const ButtonLink = forwardRef(
       iconEnd,
       children,
       className,
+      href,
       ...rest
     } = props;
     const { classNames, dataAttributes } = useStyles("Button", {
@@ -20,12 +24,39 @@ const ButtonLink = forwardRef(
       variant
     });
     const { classNames: classNamesButtonLink } = useStyles("ButtonLink");
-    return /* @__PURE__ */ jsxs(
+    const isExternal = isExternalLink(href);
+    if (isExternal) {
+      return /* @__PURE__ */ jsxs(
+        Link,
+        {
+          className: clsx(
+            classNames.root,
+            classNamesButtonLink.root,
+            className
+          ),
+          ref,
+          ...dataAttributes,
+          href,
+          ...rest,
+          children: [
+            iconStart,
+            children,
+            iconEnd
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsxs(
       Link,
       {
-        className: clsx(classNames.root, classNamesButtonLink.root, className),
+        className: clsx(
+          classNames.root,
+          classNamesButtonLink.root,
+          className
+        ),
         ref,
         ...dataAttributes,
+        href,
         ...rest,
         children: [
           iconStart,
@@ -33,7 +64,7 @@ const ButtonLink = forwardRef(
           iconEnd
         ]
       }
-    );
+    ) });
   }
 );
 ButtonLink.displayName = "ButtonLink";

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

@@ -1 +1 @@
-{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink } from 'react-aria-components';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n  (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n    const {\n      size = 'small',\n      variant = 'primary',\n      iconStart,\n      iconEnd,\n      children,\n      className,\n      ...rest\n    } = props;\n\n    const { classNames, dataAttributes } = useStyles('Button', {\n      size,\n      variant,\n    });\n\n    const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n    return (\n      <RALink\n        className={clsx(classNames.root, classNamesButtonLink.root, className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {iconStart}\n        {children}\n        {iconEnd}\n      </RALink>\n    );\n  },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;AAuBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM;AAAA,MACJ,IAAA,GAAO,OAAA;AAAA,MACP,OAAA,GAAU,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,QAAA,EAAU;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,uBACE,IAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,oBAAA,CAAqB,MAAM,SAAS,CAAA;AAAA,QACrE,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
+{"version":3,"file":"ButtonLink.esm.js","sources":["../../../src/components/ButtonLink/ButtonLink.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 clsx from 'clsx';\nimport { forwardRef, Ref } from 'react';\nimport { Link as RALink, RouterProvider } from 'react-aria-components';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport type { ButtonLinkProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport { isExternalLink } from '../../utils/isExternalLink';\n\n/** @public */\nexport const ButtonLink = forwardRef(\n  (props: ButtonLinkProps, ref: Ref<HTMLAnchorElement>) => {\n    const navigate = useNavigate();\n    const {\n      size = 'small',\n      variant = 'primary',\n      iconStart,\n      iconEnd,\n      children,\n      className,\n      href,\n      ...rest\n    } = props;\n\n    const { classNames, dataAttributes } = useStyles('Button', {\n      size,\n      variant,\n    });\n\n    const { classNames: classNamesButtonLink } = useStyles('ButtonLink');\n\n    const isExternal = isExternalLink(href);\n\n    // If it's an external link, render RALink without RouterProvider\n    if (isExternal) {\n      return (\n        <RALink\n          className={clsx(\n            classNames.root,\n            classNamesButtonLink.root,\n            className,\n          )}\n          ref={ref}\n          {...dataAttributes}\n          href={href}\n          {...rest}\n        >\n          {iconStart}\n          {children}\n          {iconEnd}\n        </RALink>\n      );\n    }\n\n    // For internal links, use RouterProvider\n    return (\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <RALink\n          className={clsx(\n            classNames.root,\n            classNamesButtonLink.root,\n            className,\n          )}\n          ref={ref}\n          {...dataAttributes}\n          href={href}\n          {...rest}\n        >\n          {iconStart}\n          {children}\n          {iconEnd}\n        </RALink>\n      </RouterProvider>\n    );\n  },\n);\n\nButtonLink.displayName = 'ButtonLink';\n"],"names":["RALink"],"mappings":";;;;;;;;AAyBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAgC;AACvD,IAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,IAAA,MAAM;AAAA,MACJ,IAAA,GAAO,OAAA;AAAA,MACP,OAAA,GAAU,SAAA;AAAA,MACV,SAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAe,GAAI,UAAU,QAAA,EAAU;AAAA,MACzD,IAAA;AAAA,MACA;AAAA,KACD,CAAA;AAED,IAAA,MAAM,EAAE,UAAA,EAAY,oBAAA,EAAqB,GAAI,UAAU,YAAY,CAAA;AAEnE,IAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAGtC,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,uBACE,IAAA;AAAA,QAACA,IAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,IAAA;AAAA,YACX,oBAAA,CAAqB,IAAA;AAAA,YACrB;AAAA,WACF;AAAA,UACA,GAAA;AAAA,UACC,GAAG,cAAA;AAAA,UACJ,IAAA;AAAA,UACC,GAAG,IAAA;AAAA,UAEH,QAAA,EAAA;AAAA,YAAA,SAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA;AAAA;AAAA,OACH;AAAA,IAEJ;AAGA,IAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,IAAA;AAAA,MAACA,IAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,IAAA;AAAA,UACX,oBAAA,CAAqB,IAAA;AAAA,UACrB;AAAA,SACF;AAAA,QACA,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACJ,IAAA;AAAA,QACC,GAAG,IAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH,EACF,CAAA;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}

package/dist/components/Menu/Menu.esm.js

@@ -1,10 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, Popover, Menu as Menu$1, ListBox, useFilter, Autocomplete, SearchField, Input, Button, MenuItem as MenuItem$1, RouterProvider, ListBoxItem, MenuSection as MenuSection$1, Header, Separator } from 'react-aria-components';
+import { MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, Popover, RouterProvider, Menu as Menu$1, ListBox, useFilter, Autocomplete, SearchField, Input, Button, MenuItem as MenuItem$1, ListBoxItem, MenuSection as MenuSection$1, Header, Separator } from 'react-aria-components';
 import { ScrollArea } from '../ScrollArea/ScrollArea.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 import { RiCloseCircleLine, RiArrowRightSLine, RiCheckLine } from '@remixicon/react';
-import { isExternalLink } from '../../utils/isExternalLink.esm.js';
 import { useNavigate, useHref } from 'react-router-dom';
+import { isExternalLink } from '../../utils/isExternalLink.esm.js';
 
 const MenuEmptyState = () => {
   const { classNames } = useStyles("Menu");
@@ -19,10 +19,11 @@ const SubmenuTrigger = (props) => {
 const Menu = (props) => {
   const { placement = "bottom start", ...rest } = props;
   const { classNames } = useStyles("Menu");
-  return /* @__PURE__ */ jsx(Popover, { className: classNames.popover, placement, children: /* @__PURE__ */ jsxs(ScrollArea.Root, { children: [
+  const navigate = useNavigate();
+  return /* @__PURE__ */ jsx(Popover, { className: classNames.popover, placement, children: /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsxs(ScrollArea.Root, { children: [
     /* @__PURE__ */ jsx(ScrollArea.Viewport, { children: /* @__PURE__ */ jsx(Menu$1, { className: classNames.content, ...rest, children: props.children }) }),
     /* @__PURE__ */ jsx(ScrollArea.Scrollbar, { orientation: "vertical", style: {}, children: /* @__PURE__ */ jsx(ScrollArea.Thumb, {}) })
-  ] }) });
+  ] }) }) });
 };
 const MenuListBox = (props) => {
   const {
@@ -109,7 +110,6 @@ const MenuAutocompleteListbox = (props) => {
 const MenuItem = (props) => {
   const { iconStart, color = "primary", children, href, ...rest } = props;
   const { classNames } = useStyles("Menu");
-  const navigate = useNavigate();
   const isLink = href !== void 0;
   const isExternal = isExternalLink(href);
   const content = /* @__PURE__ */ jsxs(
@@ -129,8 +129,24 @@ const MenuItem = (props) => {
       ]
     }
   );
-  if (isLink && !isExternal) {
-    return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: content });
+  if (isLink && isExternal) {
+    return /* @__PURE__ */ jsxs(
+      MenuItem$1,
+      {
+        className: classNames.item,
+        "data-color": color,
+        textValue: typeof children === "string" ? children : void 0,
+        onAction: () => window.open(href, "_blank", "noopener,noreferrer"),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: classNames.itemContent, children: [
+            iconStart,
+            children
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: classNames.itemArrow, children: /* @__PURE__ */ jsx(RiArrowRightSLine, {}) })
+        ]
+      }
+    );
   }
   return content;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Menu.esm.js","sources":["../../../src/components/Menu/Menu.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 {\n  MenuTrigger as RAMenuTrigger,\n  Popover as RAPopover,\n  MenuItem as RAMenuItem,\n  Menu as RAMenu,\n  MenuSection as RAMenuSection,\n  Header as RAMenuHeader,\n  Separator as RAMenuSeparator,\n  SubmenuTrigger as RAMenuSubmenuTrigger,\n  Autocomplete as RAAutocomplete,\n  SearchField as RASearchField,\n  Input as RAInput,\n  Button as RAButton,\n  ListBox as RAListBox,\n  ListBoxItem as RAListBoxItem,\n  useFilter,\n  RouterProvider,\n} from 'react-aria-components';\nimport { ScrollArea } from '../ScrollArea';\nimport { useStyles } from '../../hooks/useStyles';\nimport type {\n  MenuTriggerProps,\n  SubmenuTriggerProps,\n  MenuProps,\n  MenuAutocompleteProps,\n  MenuItemProps,\n  MenuSectionProps,\n  MenuSeparatorProps,\n  MenuListBoxProps,\n  MenuListBoxItemProps,\n  MenuAutocompleteListBoxProps,\n} from './types';\nimport {\n  RiArrowRightSLine,\n  RiCheckLine,\n  RiCloseCircleLine,\n} from '@remixicon/react';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport { useNavigate, useHref } from 'react-router-dom';\n\nconst MenuEmptyState = () => {\n  const { classNames } = useStyles('Menu');\n\n  return <div className={classNames.emptyState}>No results found.</div>;\n};\n\n/** @public */\nexport const MenuTrigger = (props: MenuTriggerProps) => {\n  return <RAMenuTrigger {...props} />;\n};\n\n/** @public */\nexport const SubmenuTrigger = (props: SubmenuTriggerProps) => {\n  return <RAMenuSubmenuTrigger {...props} />;\n};\n\n/** @public */\nexport const Menu = (props: MenuProps<object>) => {\n  const { placement = 'bottom start', ...rest } = props;\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <ScrollArea.Root>\n        <ScrollArea.Viewport>\n          <RAMenu className={classNames.content} {...rest}>\n            {props.children}\n          </RAMenu>\n        </ScrollArea.Viewport>\n        <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n          <ScrollArea.Thumb />\n        </ScrollArea.Scrollbar>\n      </ScrollArea.Root>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuListBox = (props: MenuListBoxProps<object>) => {\n  const {\n    selectionMode = 'single',\n    placement = 'bottom start',\n    ...rest\n  } = props;\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <ScrollArea.Root>\n        <ScrollArea.Viewport>\n          <RAListBox\n            className={classNames.content}\n            selectionMode={selectionMode}\n            {...rest}\n          />\n        </ScrollArea.Viewport>\n        <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n          <ScrollArea.Thumb />\n        </ScrollArea.Scrollbar>\n      </ScrollArea.Root>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {\n  const { placement = 'bottom start', ...rest } = props;\n  const { classNames } = useStyles('Menu');\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <RAAutocomplete filter={contains}>\n        <RASearchField className={classNames.searchField}>\n          <RAInput\n            className={classNames.searchFieldInput}\n            aria-label=\"Search\"\n            placeholder={props.placeholder || 'Search...'}\n          />\n          <RAButton className={classNames.searchFieldClear}>\n            <RiCloseCircleLine />\n          </RAButton>\n        </RASearchField>\n        <ScrollArea.Root>\n          <ScrollArea.Viewport>\n            <RAMenu\n              className={classNames.content}\n              renderEmptyState={() => <MenuEmptyState />}\n              {...rest}\n            />\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n            <ScrollArea.Thumb />\n          </ScrollArea.Scrollbar>\n        </ScrollArea.Root>\n      </RAAutocomplete>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuAutocompleteListbox = (\n  props: MenuAutocompleteListBoxProps<object>,\n) => {\n  const {\n    selectionMode = 'single',\n    placement = 'bottom start',\n    ...rest\n  } = props;\n  const { classNames } = useStyles('Menu');\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <RAAutocomplete filter={contains}>\n        <RASearchField className={classNames.searchField}>\n          <RAInput\n            className={classNames.searchFieldInput}\n            aria-label=\"Search\"\n            placeholder={props.placeholder || 'Search...'}\n          />\n          <RAButton className={classNames.searchFieldClear}>\n            <RiCloseCircleLine />\n          </RAButton>\n        </RASearchField>\n        <ScrollArea.Root>\n          <ScrollArea.Viewport>\n            <RAListBox\n              className={classNames.content}\n              renderEmptyState={() => <MenuEmptyState />}\n              selectionMode={selectionMode}\n              {...rest}\n            />\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n            <ScrollArea.Thumb />\n          </ScrollArea.Scrollbar>\n        </ScrollArea.Root>\n      </RAAutocomplete>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuItem = (props: MenuItemProps) => {\n  const { iconStart, color = 'primary', children, href, ...rest } = props;\n  const { classNames } = useStyles('Menu');\n  const navigate = useNavigate();\n\n  const isLink = href !== undefined;\n  const isExternal = isExternalLink(href);\n\n  const content = (\n    <RAMenuItem\n      className={classNames.item}\n      data-color={color}\n      href={href}\n      textValue={typeof children === 'string' ? children : undefined}\n      {...rest}\n    >\n      <div className={classNames.itemContent}>\n        {iconStart}\n        {children}\n      </div>\n      <div className={classNames.itemArrow}>\n        <RiArrowRightSLine />\n      </div>\n    </RAMenuItem>\n  );\n\n  if (isLink && !isExternal) {\n    return (\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        {content}\n      </RouterProvider>\n    );\n  }\n\n  return content;\n};\n\n/** @public */\nexport const MenuListBoxItem = (props: MenuListBoxItemProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAListBoxItem\n      textValue={\n        typeof props.children === 'string' ? props.children : undefined\n      }\n      className={classNames.itemListBox}\n      {...rest}\n    >\n      <div className={classNames.itemContent}>\n        <div className={classNames.itemListBoxCheck}>\n          <RiCheckLine />\n        </div>\n        {children}\n      </div>\n    </RAListBoxItem>\n  );\n};\n\n/** @public */\nexport const MenuSection = (props: MenuSectionProps<object>) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAMenuSection className={classNames.section} {...props}>\n      <RAMenuHeader className={classNames.sectionHeader}>\n        {props.title}\n      </RAMenuHeader>\n      {props.children}\n    </RAMenuSection>\n  );\n};\n\n/** @public */\nexport const MenuSeparator = (props: MenuSeparatorProps) => {\n  const { classNames } = useStyles('Menu');\n\n  return <RAMenuSeparator className={classNames.separator} {...props} />;\n};\n"],"names":["RAMenuTrigger","RAMenuSubmenuTrigger","RAPopover","RAMenu","RAListBox","RAAutocomplete","RASearchField","RAInput","RAButton","RAMenuItem","RAListBoxItem","RAMenuSection","RAMenuHeader","RAMenuSeparator"],"mappings":"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"}
+{"version":3,"file":"Menu.esm.js","sources":["../../../src/components/Menu/Menu.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 {\n  MenuTrigger as RAMenuTrigger,\n  Popover as RAPopover,\n  MenuItem as RAMenuItem,\n  Menu as RAMenu,\n  MenuSection as RAMenuSection,\n  Header as RAMenuHeader,\n  Separator as RAMenuSeparator,\n  SubmenuTrigger as RAMenuSubmenuTrigger,\n  Autocomplete as RAAutocomplete,\n  SearchField as RASearchField,\n  Input as RAInput,\n  Button as RAButton,\n  ListBox as RAListBox,\n  ListBoxItem as RAListBoxItem,\n  useFilter,\n  RouterProvider,\n} from 'react-aria-components';\nimport { ScrollArea } from '../ScrollArea';\nimport { useStyles } from '../../hooks/useStyles';\nimport type {\n  MenuTriggerProps,\n  SubmenuTriggerProps,\n  MenuProps,\n  MenuAutocompleteProps,\n  MenuItemProps,\n  MenuSectionProps,\n  MenuSeparatorProps,\n  MenuListBoxProps,\n  MenuListBoxItemProps,\n  MenuAutocompleteListBoxProps,\n} from './types';\nimport {\n  RiArrowRightSLine,\n  RiCheckLine,\n  RiCloseCircleLine,\n} from '@remixicon/react';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\n\nconst MenuEmptyState = () => {\n  const { classNames } = useStyles('Menu');\n\n  return <div className={classNames.emptyState}>No results found.</div>;\n};\n\n/** @public */\nexport const MenuTrigger = (props: MenuTriggerProps) => {\n  return <RAMenuTrigger {...props} />;\n};\n\n/** @public */\nexport const SubmenuTrigger = (props: SubmenuTriggerProps) => {\n  return <RAMenuSubmenuTrigger {...props} />;\n};\n\n/** @public */\nexport const Menu = (props: MenuProps<object>) => {\n  const { placement = 'bottom start', ...rest } = props;\n  const { classNames } = useStyles('Menu');\n  const navigate = useNavigate();\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <ScrollArea.Root>\n          <ScrollArea.Viewport>\n            <RAMenu className={classNames.content} {...rest}>\n              {props.children}\n            </RAMenu>\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n            <ScrollArea.Thumb />\n          </ScrollArea.Scrollbar>\n        </ScrollArea.Root>\n      </RouterProvider>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuListBox = (props: MenuListBoxProps<object>) => {\n  const {\n    selectionMode = 'single',\n    placement = 'bottom start',\n    ...rest\n  } = props;\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <ScrollArea.Root>\n        <ScrollArea.Viewport>\n          <RAListBox\n            className={classNames.content}\n            selectionMode={selectionMode}\n            {...rest}\n          />\n        </ScrollArea.Viewport>\n        <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n          <ScrollArea.Thumb />\n        </ScrollArea.Scrollbar>\n      </ScrollArea.Root>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuAutocomplete = (props: MenuAutocompleteProps<object>) => {\n  const { placement = 'bottom start', ...rest } = props;\n  const { classNames } = useStyles('Menu');\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <RAAutocomplete filter={contains}>\n        <RASearchField className={classNames.searchField}>\n          <RAInput\n            className={classNames.searchFieldInput}\n            aria-label=\"Search\"\n            placeholder={props.placeholder || 'Search...'}\n          />\n          <RAButton className={classNames.searchFieldClear}>\n            <RiCloseCircleLine />\n          </RAButton>\n        </RASearchField>\n        <ScrollArea.Root>\n          <ScrollArea.Viewport>\n            <RAMenu\n              className={classNames.content}\n              renderEmptyState={() => <MenuEmptyState />}\n              {...rest}\n            />\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n            <ScrollArea.Thumb />\n          </ScrollArea.Scrollbar>\n        </ScrollArea.Root>\n      </RAAutocomplete>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuAutocompleteListbox = (\n  props: MenuAutocompleteListBoxProps<object>,\n) => {\n  const {\n    selectionMode = 'single',\n    placement = 'bottom start',\n    ...rest\n  } = props;\n  const { classNames } = useStyles('Menu');\n  const { contains } = useFilter({ sensitivity: 'base' });\n\n  return (\n    <RAPopover className={classNames.popover} placement={placement}>\n      <RAAutocomplete filter={contains}>\n        <RASearchField className={classNames.searchField}>\n          <RAInput\n            className={classNames.searchFieldInput}\n            aria-label=\"Search\"\n            placeholder={props.placeholder || 'Search...'}\n          />\n          <RAButton className={classNames.searchFieldClear}>\n            <RiCloseCircleLine />\n          </RAButton>\n        </RASearchField>\n        <ScrollArea.Root>\n          <ScrollArea.Viewport>\n            <RAListBox\n              className={classNames.content}\n              renderEmptyState={() => <MenuEmptyState />}\n              selectionMode={selectionMode}\n              {...rest}\n            />\n          </ScrollArea.Viewport>\n          <ScrollArea.Scrollbar orientation=\"vertical\" style={{}}>\n            <ScrollArea.Thumb />\n          </ScrollArea.Scrollbar>\n        </ScrollArea.Root>\n      </RAAutocomplete>\n    </RAPopover>\n  );\n};\n\n/** @public */\nexport const MenuItem = (props: MenuItemProps) => {\n  const { iconStart, color = 'primary', children, href, ...rest } = props;\n  const { classNames } = useStyles('Menu');\n\n  const isLink = href !== undefined;\n  const isExternal = isExternalLink(href);\n\n  const content = (\n    <RAMenuItem\n      className={classNames.item}\n      data-color={color}\n      href={href}\n      textValue={typeof children === 'string' ? children : undefined}\n      {...rest}\n    >\n      <div className={classNames.itemContent}>\n        {iconStart}\n        {children}\n      </div>\n      <div className={classNames.itemArrow}>\n        <RiArrowRightSLine />\n      </div>\n    </RAMenuItem>\n  );\n\n  if (isLink && isExternal) {\n    return (\n      <RAMenuItem\n        className={classNames.item}\n        data-color={color}\n        textValue={typeof children === 'string' ? children : undefined}\n        onAction={() => window.open(href, '_blank', 'noopener,noreferrer')}\n        {...rest}\n      >\n        <div className={classNames.itemContent}>\n          {iconStart}\n          {children}\n        </div>\n        <div className={classNames.itemArrow}>\n          <RiArrowRightSLine />\n        </div>\n      </RAMenuItem>\n    );\n  }\n\n  return content;\n};\n\n/** @public */\nexport const MenuListBoxItem = (props: MenuListBoxItemProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAListBoxItem\n      textValue={\n        typeof props.children === 'string' ? props.children : undefined\n      }\n      className={classNames.itemListBox}\n      {...rest}\n    >\n      <div className={classNames.itemContent}>\n        <div className={classNames.itemListBoxCheck}>\n          <RiCheckLine />\n        </div>\n        {children}\n      </div>\n    </RAListBoxItem>\n  );\n};\n\n/** @public */\nexport const MenuSection = (props: MenuSectionProps<object>) => {\n  const { classNames } = useStyles('Menu');\n\n  return (\n    <RAMenuSection className={classNames.section} {...props}>\n      <RAMenuHeader className={classNames.sectionHeader}>\n        {props.title}\n      </RAMenuHeader>\n      {props.children}\n    </RAMenuSection>\n  );\n};\n\n/** @public */\nexport const MenuSeparator = (props: MenuSeparatorProps) => {\n  const { classNames } = useStyles('Menu');\n\n  return <RAMenuSeparator className={classNames.separator} {...props} />;\n};\n"],"names":["RAMenuTrigger","RAMenuSubmenuTrigger","RAPopover","RAMenu","RAListBox","RAAutocomplete","RASearchField","RAInput","RAButton","RAMenuItem","RAListBoxItem","RAMenuSection","RAMenuHeader","RAMenuSeparator"],"mappings":"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"}

package/dist/components/Tabs/Tabs.esm.js

@@ -51,9 +51,17 @@ const Tabs = (props) => {
             }
           }
         }
+        const allTabsHaveHref = tabListChildren.every(
+          (child2) => isValidElement(child2) && child2.props.href
+        );
+        if (allTabsHaveHref) {
+          return null;
+        } else {
+          return void 0;
+        }
       }
     }
-    return null;
+    return void 0;
   })();
   if (!children) return null;
   const contextValue = {

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.esm.js","sources":["../../../src/components/Tabs/Tabs.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 {\n  useRef,\n  useState,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactNode,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  TabsProps,\n  TabListProps,\n  TabPanelProps,\n  TabsContextValue,\n  TabProps,\n} from './types';\nimport { useLocation, useNavigate, useHref } from 'react-router-dom';\nimport { TabsIndicators } from './TabsIndicators';\nimport {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  Tab as AriaTab,\n  TabPanel as AriaTabPanel,\n  RouterProvider,\n  TabProps as AriaTabProps,\n} from 'react-aria-components';\n\nimport { useStyles } from '../../hooks/useStyles';\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tab components must be used within a Tabs component');\n  }\n  return context;\n};\n\n/**\n * Utility function to determine if a tab should be active based on the matching strategy.\n * This follows the pattern used in WorkaroundNavLink from the sidebar.\n */\nconst isTabActive = (\n  tabHref: string,\n  currentPathname: string,\n  matchStrategy: 'exact' | 'prefix',\n): boolean => {\n  if (matchStrategy === 'exact') {\n    return tabHref === currentPathname;\n  }\n\n  // Prefix matching - similar to WorkaroundNavLink behavior\n  if (tabHref === currentPathname) {\n    return true;\n  }\n\n  // Check if current path starts with tab href followed by a slash\n  // This prevents /foo matching /foobar\n  return currentPathname.startsWith(`${tabHref}/`);\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const Tabs = (props: TabsProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const [hoveredKey, setHoveredKey] = useState<string | null>(null);\n  const prevHoveredKey = useRef<string | null>(null);\n  let navigate = useNavigate();\n  const location = useLocation();\n\n  const setTabRef = (key: string, element: HTMLDivElement | null) => {\n    if (element) {\n      tabRefs.current.set(key, element);\n    } else {\n      tabRefs.current.delete(key);\n    }\n  };\n\n  // If selectedKey is not provided, try to determine it from the current route\n  const computedSelectedKey = (() => {\n    const childrenArray = Children.toArray(children as ReactNode);\n    for (const child of childrenArray) {\n      if (isValidElement(child) && child.type === TabList) {\n        const tabListChildren = Children.toArray(child.props.children);\n        for (const tabChild of tabListChildren) {\n          if (isValidElement(tabChild) && tabChild.props.href) {\n            // Use tab-specific strategy, defaulting to 'exact'\n            const strategy = tabChild.props.matchStrategy || 'exact';\n            if (isTabActive(tabChild.props.href, location.pathname, strategy)) {\n              return tabChild.props.id;\n            }\n          }\n        }\n      }\n    }\n    return null;\n  })();\n\n  if (!children) return null;\n\n  const contextValue: TabsContextValue = {\n    tabsRef,\n    tabRefs,\n    hoveredKey,\n    prevHoveredKey,\n    setHoveredKey,\n    setTabRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <AriaTabs\n          className={classNames.tabs}\n          keyboardActivation=\"manual\"\n          selectedKey={computedSelectedKey}\n          ref={tabsRef}\n          {...rest}\n        >\n          {children as ReactNode}\n        </AriaTabs>\n      </RouterProvider>\n    </TabsContext.Provider>\n  );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =\n    useTabsContext();\n\n  const handleHover = (key: string | null) => {\n    setHoveredKey(key);\n  };\n\n  // Clone children with additional props for hover and ref management\n  const enhancedChildren = Children.map(children as ReactNode, child => {\n    if (isValidElement(child)) {\n      return cloneElement(child, {\n        onHoverStart: () => handleHover(child.props.id as string),\n        onHoverEnd: () => handleHover(null),\n      } as Partial<AriaTabProps>);\n    }\n    return child;\n  });\n\n  return (\n    <div className={classNames.tabListWrapper}>\n      <AriaTabList\n        className={classNames.tabList}\n        aria-label=\"Toolbar tabs\"\n        {...rest}\n      >\n        {enhancedChildren}\n      </AriaTabList>\n      <TabsIndicators\n        tabRefs={tabRefs}\n        tabsRef={tabsRef}\n        hoveredKey={hoveredKey}\n        prevHoveredKey={prevHoveredKey}\n      />\n    </div>\n  );\n};\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n  const { href, children, id, matchStrategy: _matchStrategy, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <AriaTab\n      id={id}\n      className={classNames.tab}\n      ref={el => setTabRef(id as string, el as HTMLDivElement)}\n      href={href}\n      {...rest}\n    >\n      {children}\n    </AriaTab>\n  );\n};\n\n/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n\n  return (\n    <AriaTabPanel className={classNames.panel} {...rest}>\n      {children}\n    </AriaTabPanel>\n  );\n};\n"],"names":["AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}
+{"version":3,"file":"Tabs.esm.js","sources":["../../../src/components/Tabs/Tabs.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 {\n  useRef,\n  useState,\n  Children,\n  cloneElement,\n  isValidElement,\n  ReactNode,\n  createContext,\n  useContext,\n} from 'react';\nimport type {\n  TabsProps,\n  TabListProps,\n  TabPanelProps,\n  TabsContextValue,\n  TabProps,\n} from './types';\nimport { useLocation, useNavigate, useHref } from 'react-router-dom';\nimport { TabsIndicators } from './TabsIndicators';\nimport {\n  Tabs as AriaTabs,\n  TabList as AriaTabList,\n  Tab as AriaTab,\n  TabPanel as AriaTabPanel,\n  RouterProvider,\n  TabProps as AriaTabProps,\n} from 'react-aria-components';\n\nimport { useStyles } from '../../hooks/useStyles';\n\nconst TabsContext = createContext<TabsContextValue | undefined>(undefined);\n\nconst useTabsContext = () => {\n  const context = useContext(TabsContext);\n  if (!context) {\n    throw new Error('Tab components must be used within a Tabs component');\n  }\n  return context;\n};\n\n/**\n * Utility function to determine if a tab should be active based on the matching strategy.\n * This follows the pattern used in WorkaroundNavLink from the sidebar.\n */\nconst isTabActive = (\n  tabHref: string,\n  currentPathname: string,\n  matchStrategy: 'exact' | 'prefix',\n): boolean => {\n  if (matchStrategy === 'exact') {\n    return tabHref === currentPathname;\n  }\n\n  // Prefix matching - similar to WorkaroundNavLink behavior\n  if (tabHref === currentPathname) {\n    return true;\n  }\n\n  // Check if current path starts with tab href followed by a slash\n  // This prevents /foo matching /foobar\n  return currentPathname.startsWith(`${tabHref}/`);\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const Tabs = (props: TabsProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const tabsRef = useRef<HTMLDivElement>(null);\n  const tabRefs = useRef<Map<string, HTMLDivElement>>(new Map());\n  const [hoveredKey, setHoveredKey] = useState<string | null>(null);\n  const prevHoveredKey = useRef<string | null>(null);\n  let navigate = useNavigate();\n  const location = useLocation();\n\n  const setTabRef = (key: string, element: HTMLDivElement | null) => {\n    if (element) {\n      tabRefs.current.set(key, element);\n    } else {\n      tabRefs.current.delete(key);\n    }\n  };\n\n  // If selectedKey is not provided, try to determine it from the current route\n  const computedSelectedKey = (() => {\n    const childrenArray = Children.toArray(children as ReactNode);\n    for (const child of childrenArray) {\n      if (isValidElement(child) && child.type === TabList) {\n        const tabListChildren = Children.toArray(child.props.children);\n        for (const tabChild of tabListChildren) {\n          if (isValidElement(tabChild) && tabChild.props.href) {\n            // Use tab-specific strategy, defaulting to 'exact'\n            const strategy = tabChild.props.matchStrategy || 'exact';\n            if (isTabActive(tabChild.props.href, location.pathname, strategy)) {\n              return tabChild.props.id;\n            }\n          }\n        }\n\n        //No route matches - check if all tabs have hrefs (pure navigation)\n        const allTabsHaveHref = tabListChildren.every(\n          child => isValidElement(child) && child.props.href,\n        );\n\n        if (allTabsHaveHref) {\n          // Pure navigation tabs, no route match\n          return null;\n        } else {\n          // Mixed tabs or pure local state\n          return undefined;\n        }\n      }\n    }\n    return undefined;\n  })();\n\n  if (!children) return null;\n\n  const contextValue: TabsContextValue = {\n    tabsRef,\n    tabRefs,\n    hoveredKey,\n    prevHoveredKey,\n    setHoveredKey,\n    setTabRef,\n  };\n\n  return (\n    <TabsContext.Provider value={contextValue}>\n      <RouterProvider navigate={navigate} useHref={useHref}>\n        <AriaTabs\n          className={classNames.tabs}\n          keyboardActivation=\"manual\"\n          selectedKey={computedSelectedKey}\n          ref={tabsRef}\n          {...rest}\n        >\n          {children as ReactNode}\n        </AriaTabs>\n      </RouterProvider>\n    </TabsContext.Provider>\n  );\n};\n\n/**\n * A component that renders a list of tabs.\n *\n * @public\n */\nexport const TabList = (props: TabListProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setHoveredKey, tabRefs, tabsRef, hoveredKey, prevHoveredKey } =\n    useTabsContext();\n\n  const handleHover = (key: string | null) => {\n    setHoveredKey(key);\n  };\n\n  // Clone children with additional props for hover and ref management\n  const enhancedChildren = Children.map(children as ReactNode, child => {\n    if (isValidElement(child)) {\n      return cloneElement(child, {\n        onHoverStart: () => handleHover(child.props.id as string),\n        onHoverEnd: () => handleHover(null),\n      } as Partial<AriaTabProps>);\n    }\n    return child;\n  });\n\n  return (\n    <div className={classNames.tabListWrapper}>\n      <AriaTabList\n        className={classNames.tabList}\n        aria-label=\"Toolbar tabs\"\n        {...rest}\n      >\n        {enhancedChildren}\n      </AriaTabList>\n      <TabsIndicators\n        tabRefs={tabRefs}\n        tabsRef={tabsRef}\n        hoveredKey={hoveredKey}\n        prevHoveredKey={prevHoveredKey}\n      />\n    </div>\n  );\n};\n\n/**\n * A component that renders a tab.\n *\n * @public\n */\nexport const Tab = (props: TabProps) => {\n  const { href, children, id, matchStrategy: _matchStrategy, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n  const { setTabRef } = useTabsContext();\n\n  return (\n    <AriaTab\n      id={id}\n      className={classNames.tab}\n      ref={el => setTabRef(id as string, el as HTMLDivElement)}\n      href={href}\n      {...rest}\n    >\n      {children}\n    </AriaTab>\n  );\n};\n\n/**\n * A component that renders the content of a tab.\n *\n * @public\n */\nexport const TabPanel = (props: TabPanelProps) => {\n  const { children, ...rest } = props;\n  const { classNames } = useStyles('Tabs');\n\n  return (\n    <AriaTabPanel className={classNames.panel} {...rest}>\n      {children}\n    </AriaTabPanel>\n  );\n};\n"],"names":["child","AriaTabs","AriaTabList","AriaTab","AriaTabPanel"],"mappings":"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"}

package/dist/index.d.ts

@@ -934,7 +934,7 @@ interface HeaderProps {
 interface HeaderTab {
     id: string;
     label: string;
-    href?: string;
+    href: string;
     /**
      * Strategy for matching the current route to determine if this tab should be active.
      * - 'exact': Tab href must exactly match the current pathname (default)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/ui",
-  "version": "0.7.2-next.1",
+  "version": "0.7.2-next.2",
   "backstage": {
     "role": "web-library"
   },
@@ -45,7 +45,7 @@
     "react-aria-components": "^1.10.1"
   },
   "devDependencies": {
-    "@backstage/cli": "0.34.4-next.2",
+    "@backstage/cli": "0.34.4-next.3",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "chalk": "^5.4.1",