@backstage/ui 0.7.1 → 0.7.2-next.1

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @backstage/ui
 
+## 0.7.2-next.1
+
+### Patch Changes
+
+- a9b88be: Enable tooltips on disabled buttons with automatic wrapper
+- 4adbb03: Avoid overriding onChange when spreading props
+
+## 0.7.2-next.0
+
+### Patch Changes
+
+- 827340f: remove default selection of tab
+- 9a47125: Improved SearchField component flex layout and animations. Fixed SearchField behavior in Header components by switching from width-based transitions to flex-basis transitions for better responsive behavior. Added new Storybook stories to test SearchField integration with Header component.
+
 ## 0.7.1
 
 ### Patch Changes

package/css/styles.css

@@ -10523,6 +10523,8 @@
 }
 
 .bui-SearchField {
+  flex: 1 0;
+
   &[data-empty] {
     & .bui-InputClear {
       display: none;
@@ -10530,49 +10532,81 @@
   }
 
   &[data-start-collapsed="true"] {
+    flex: 0 auto;
     padding: 0;
-    transition: width .3s ease-in-out;
+    transition: flex-basis .3s ease-in-out;
+
+    &[data-collapsed="true"] {
+      flex-basis: 200px;
+    }
 
     &[data-collapsed="false"] {
       cursor: pointer;
 
       &[data-size="medium"] {
-        width: 2.5rem;
+        flex-basis: 2.5rem;
         height: 2.5rem;
       }
 
       &[data-size="small"] {
-        width: 2rem;
+        flex-basis: 2rem;
         height: 2rem;
       }
 
       &[data-size="medium"] .bui-Input {
-        padding-left: 0;
-
         &::placeholder {
           opacity: 0;
         }
       }
 
       &[data-size="small"] .bui-Input {
-        padding-left: 0;
-
         &::placeholder {
           opacity: 0;
         }
       }
 
-      &[data-size="small"] .bui-InputIcon {
-        left: var(--bui-space-2);
-      }
-
-      &[data-size="medium"] .bui-InputIcon {
-        left: 10px;
+      & .bui-InputWrapper {
+        & .bui-Input[data-icon] {
+          padding-right: 0;
+        }
       }
     }
   }
 }
 
+.bui-SearchField .bui-Input {
+  transition: padding .3s ease-in-out, border-color .2s ease-in-out, outline-color .2s ease-in-out;
+
+  &[data-hovered] {
+    border-color: var(--bui-border-hover);
+  }
+
+  &[data-focused] {
+    border-color: var(--bui-border-pressed);
+    outline-width: 0;
+  }
+}
+
+.bui-SearchField .bui-InputWrapper {
+  & .bui-Input[data-icon] {
+    padding-right: var(--bui-space-6);
+  }
+}
+
+.bui-SearchField .bui-InputIcon {
+  justify-content: center;
+  display: flex;
+  left: 0;
+
+  &[data-size="small"] {
+    width: var(--bui-space-8);
+  }
+
+  &[data-size="medium"] {
+    width: var(--bui-space-10);
+  }
+}
+
 .bui-InputClear {
   cursor: pointer;
   color: var(--bui-fg-secondary);

package/dist/components/Button/Button.esm.js

@@ -1,7 +1,7 @@
-import { jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { Button as Button$1 } from 'react-aria-components';
+import { Button as Button$1, Focusable } from 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 
 const Button = forwardRef(
@@ -13,19 +13,21 @@ const Button = forwardRef(
       iconEnd,
       children,
       className,
+      isDisabled,
       ...rest
     } = props;
     const { classNames, dataAttributes } = useStyles("Button", {
       size,
       variant
     });
-    return /* @__PURE__ */ jsxs(
+    const btn = /* @__PURE__ */ jsxs(
       Button$1,
       {
         className: clsx(classNames.root, className),
         ref,
         ...dataAttributes,
         ...rest,
+        isDisabled: !!isDisabled,
         children: [
           iconStart,
           children,
@@ -33,6 +35,7 @@ const Button = forwardRef(
         ]
       }
     );
+    return isDisabled ? /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx("span", { role: "button", tabIndex: 0, style: { display: "inline-flex" }, children: btn }) }) : btn;
   }
 );
 Button.displayName = "Button";

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

@@ -1 +1 @@
-{"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.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 { Button as RAButton } from 'react-aria-components';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\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    return (\n      <RAButton\n        className={clsx(classNames.root, className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n      >\n        {iconStart}\n        {children}\n        {iconEnd}\n      </RAButton>\n    );\n  },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAA,KAAgC;AACnD,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,uBACE,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,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,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
+{"version":3,"file":"Button.esm.js","sources":["../../../src/components/Button/Button.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 { Button as RAButton, Focusable } from 'react-aria-components';\nimport type { ButtonProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\n\n/** @public */\nexport const Button = forwardRef(\n  (props: ButtonProps, ref: Ref<HTMLButtonElement>) => {\n    const {\n      size = 'small',\n      variant = 'primary',\n      iconStart,\n      iconEnd,\n      children,\n      className,\n      isDisabled,\n      ...rest\n    } = props;\n\n    const { classNames, dataAttributes } = useStyles('Button', {\n      size,\n      variant,\n    });\n\n    const btn = (\n      <RAButton\n        className={clsx(classNames.root, className)}\n        ref={ref}\n        {...dataAttributes}\n        {...rest}\n        isDisabled={!!isDisabled}\n      >\n        {iconStart}\n        {children}\n        {iconEnd}\n      </RAButton>\n    );\n\n    return isDisabled ? (\n      <Focusable>\n        <span role=\"button\" tabIndex={0} style={{ display: 'inline-flex' }}>\n          {btn}\n        </span>\n      </Focusable>\n    ) : (\n      btn\n    );\n  },\n);\n\nButton.displayName = 'Button';\n"],"names":["RAButton"],"mappings":";;;;;;AAuBO,MAAM,MAAA,GAAS,UAAA;AAAA,EACpB,CAAC,OAAoB,GAAA,KAAgC;AACnD,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,UAAA;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,GAAA,mBACJ,IAAA;AAAA,MAACA,QAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,GAAA;AAAA,QACC,GAAG,cAAA;AAAA,QACH,GAAG,IAAA;AAAA,QACJ,UAAA,EAAY,CAAC,CAAC,UAAA;AAAA,QAEb,QAAA,EAAA;AAAA,UAAA,SAAA;AAAA,UACA,QAAA;AAAA,UACA;AAAA;AAAA;AAAA,KACH;AAGF,IAAA,OAAO,6BACL,GAAA,CAAC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,MAAK,QAAA,EAAS,QAAA,EAAU,CAAA,EAAG,KAAA,EAAO,EAAE,OAAA,EAAS,aAAA,EAAc,EAC9D,QAAA,EAAA,GAAA,EACH,GACF,CAAA,GAEA,GAAA;AAAA,EAEJ;AACF;AAEA,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}

package/dist/components/SearchField/SearchField.esm.js

@@ -17,6 +17,7 @@ const SearchField = forwardRef(
       secondaryLabel,
       description,
       isRequired,
+      onChange,
       placeholder = "Search",
       startCollapsed = false,
       "aria-label": ariaLabel,

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

@@ -1 +1 @@
-{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.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, useEffect, useState } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      className,\n      icon,\n      size = 'small',\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      placeholder = 'Search',\n      startCollapsed = false,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      ...rest\n    } = props;\n\n    const [isCollapsed, setIsCollapsed] = useState(false);\n    const [shouldCollapse, setShouldCollapse] = useState(true);\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames: textFieldClassNames, dataAttributes } = useStyles(\n      'TextField',\n      {\n        size,\n      },\n    );\n\n    const { classNames: searchFieldClassNames } = useStyles('SearchField', {});\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    const handleClick = (isFocused: boolean) => {\n      props.onFocusChange?.(isFocused);\n      if (shouldCollapse) {\n        if (isFocused) {\n          setIsCollapsed(true);\n        } else {\n          setIsCollapsed(false);\n        }\n      }\n    };\n\n    const handleChange = (value: string) => {\n      props.onChange?.(value);\n      if (value.length > 0) {\n        setShouldCollapse(false);\n      } else {\n        setShouldCollapse(true);\n      }\n    };\n\n    return (\n      <AriaSearchField\n        className={clsx(\n          textFieldClassNames.root,\n          searchFieldClassNames.root,\n          className,\n        )}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-start-collapsed={startCollapsed}\n        data-collapsed={isCollapsed}\n        onFocusChange={handleClick}\n        onChange={handleChange}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={textFieldClassNames.inputWrapper}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon !== false && (\n            <div\n              className={textFieldClassNames.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            className={textFieldClassNames.input}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={searchFieldClassNames.clear}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["AriaSearchField"],"mappings":"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"}
+{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.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, useEffect, useState } from 'react';\nimport {\n  Input,\n  SearchField as AriaSearchField,\n  Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n  (props, ref) => {\n    const {\n      className,\n      icon,\n      size = 'small',\n      label,\n      secondaryLabel,\n      description,\n      isRequired,\n      onChange,\n      placeholder = 'Search',\n      startCollapsed = false,\n      'aria-label': ariaLabel,\n      'aria-labelledby': ariaLabelledBy,\n      ...rest\n    } = props;\n\n    const [isCollapsed, setIsCollapsed] = useState(false);\n    const [shouldCollapse, setShouldCollapse] = useState(true);\n\n    useEffect(() => {\n      if (!label && !ariaLabel && !ariaLabelledBy) {\n        console.warn(\n          'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n        );\n      }\n    }, [label, ariaLabel, ariaLabelledBy]);\n\n    const { classNames: textFieldClassNames, dataAttributes } = useStyles(\n      'TextField',\n      {\n        size,\n      },\n    );\n\n    const { classNames: searchFieldClassNames } = useStyles('SearchField', {});\n\n    // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n    const secondaryLabelText =\n      secondaryLabel || (isRequired ? 'Required' : null);\n\n    const handleClick = (isFocused: boolean) => {\n      props.onFocusChange?.(isFocused);\n      if (shouldCollapse) {\n        if (isFocused) {\n          setIsCollapsed(true);\n        } else {\n          setIsCollapsed(false);\n        }\n      }\n    };\n\n    const handleChange = (value: string) => {\n      props.onChange?.(value);\n      if (value.length > 0) {\n        setShouldCollapse(false);\n      } else {\n        setShouldCollapse(true);\n      }\n    };\n\n    return (\n      <AriaSearchField\n        className={clsx(\n          textFieldClassNames.root,\n          searchFieldClassNames.root,\n          className,\n        )}\n        {...dataAttributes}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        data-start-collapsed={startCollapsed}\n        data-collapsed={isCollapsed}\n        onFocusChange={handleClick}\n        onChange={handleChange}\n        {...rest}\n        ref={ref}\n      >\n        <FieldLabel\n          label={label}\n          secondaryLabel={secondaryLabelText}\n          description={description}\n        />\n        <div\n          className={textFieldClassNames.inputWrapper}\n          data-size={dataAttributes['data-size']}\n        >\n          {icon !== false && (\n            <div\n              className={textFieldClassNames.inputIcon}\n              data-size={dataAttributes['data-size']}\n              aria-hidden=\"true\"\n            >\n              {icon || <RiSearch2Line />}\n            </div>\n          )}\n          <Input\n            className={textFieldClassNames.input}\n            {...(icon !== false && { 'data-icon': true })}\n            placeholder={placeholder}\n          />\n          <Button\n            className={searchFieldClassNames.clear}\n            data-size={dataAttributes['data-size']}\n          >\n            <RiCloseCircleLine />\n          </Button>\n        </div>\n        <FieldError />\n      </AriaSearchField>\n    );\n  },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["AriaSearchField"],"mappings":"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"}

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

@@ -53,7 +53,7 @@ const Tabs = (props) => {
         }
       }
     }
-    return void 0;
+    return null;
   })();
   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 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":["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    }\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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@backstage/ui",
-  "version": "0.7.1",
+  "version": "0.7.2-next.1",
   "backstage": {
     "role": "web-library"
   },
@@ -45,11 +45,11 @@
     "react-aria-components": "^1.10.1"
   },
   "devDependencies": {
-    "@backstage/cli": "^0.34.2",
+    "@backstage/cli": "0.34.4-next.2",
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "chalk": "^5.4.1",
-    "eslint-plugin-storybook": "^9.1.5",
+    "eslint-plugin-storybook": "^9.1.7",
     "glob": "^11.0.1",
     "globals": "^15.11.0",
     "lightningcss": "^1.29.1",
@@ -57,7 +57,7 @@
     "react": "^18.0.2",
     "react-dom": "^18.0.2",
     "react-router-dom": "^6.3.0",
-    "storybook": "^9.1.5"
+    "storybook": "^9.1.7"
   },
   "peerDependencies": {
     "@types/react": "^17.0.0 || ^18.0.0",