@backstage/ui 0.7.0-next.2 → 0.7.0-next.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @backstage/ui
 
+## 0.7.0-next.3
+
+### 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.
+
+### Patch Changes
+
+- 230b410: **Breaking change** Move breadcrumb to fit in the `HeaderPage` instead of the `Header` in Backstage UI.
+- 8bdc491: Remove stylesheet import from Select component.
+- 404b426: Add `startCollapsed` prop on the `SearchField` component in BUI.
+
 ## 0.7.0-next.2
 
 ### Patch Changes

package/css/styles.css

@@ -9517,36 +9517,6 @@
   }
 }
 
-.bui-DataTableRoot {
-  gap: var(--bui-space-3);
-  flex-direction: column;
-  display: flex;
-}
-
-.bui-DataTablePagination {
-  padding-top: var(--bui-space-5);
-  justify-content: space-between;
-  align-items: center;
-  display: flex;
-}
-
-.bui-DataTablePagination--left {
-  justify-content: space-between;
-  align-items: center;
-  display: flex;
-}
-
-.bui-DataTablePagination--right {
-  justify-content: space-between;
-  align-items: center;
-  gap: var(--bui-space-2);
-  display: flex;
-}
-
-.bui-DataTablePagination--select {
-  min-width: 10.5rem;
-}
-
 .bui-FieldError {
   color: var(--bui-fg-danger);
   font-size: var(--bui-font-size-2);
@@ -9593,10 +9563,7 @@
 }
 
 .bui-HeaderToolbar {
-  z-index: 10;
   margin-bottom: var(--bui-space-6);
-  position: sticky;
-  top: 0;
 
   &:before {
     content: "";
@@ -9667,38 +9634,6 @@
   transform: translateY(-50%);
 }
 
-.bui-HeaderBreadcrumbs {
-  align-items: center;
-  gap: var(--bui-space-2);
-  font-size: var(--bui-font-size-3);
-  font-weight: var(--bui-font-weight-regular);
-  flex-direction: row;
-  display: flex;
-}
-
-.bui-HeaderBreadcrumb {
-  align-items: center;
-  gap: var(--bui-space-2);
-  flex-direction: row;
-  display: flex;
-}
-
-.bui-HeaderBreadcrumbLink {
-  color: var(--bui-fg-secondary);
-  cursor: pointer;
-  text-decoration: none;
-
-  &[data-active="true"] {
-    color: var(--bui-fg-primary);
-  }
-}
-
-.bui-HeaderBreadcrumbSeparator {
-  width: 16px;
-  height: 16px;
-  color: var(--bui-fg-secondary);
-}
-
 .bui-HeaderTabsWrapper {
   margin-bottom: var(--bui-space-4);
   padding-inline: var(--bui-space-3);
@@ -9708,7 +9643,6 @@
 
 .bui-HeaderPage {
   gap: var(--bui-space-1);
-  padding-inline: var(--bui-space-5);
   margin-top: var(--bui-space-6);
   margin-bottom: var(--bui-space-6);
   flex-direction: column;
@@ -9732,6 +9666,59 @@
   display: flex;
 }
 
+.bui-HeaderPageSticky {
+  z-index: -1;
+  height: 0;
+  color: var(--bui-fg-primary);
+  position: sticky;
+  top: 0;
+}
+
+.bui-HeaderPageStickyWrapper {
+  background-color: var(--bui-bg-surface-1);
+  border-bottom: 1px solid var(--bui-border);
+  opacity: 0;
+}
+
+.bui-HeaderPageStickyContent {
+  justify-content: space-between;
+  align-items: center;
+  height: 48px;
+  display: flex;
+}
+
+.bui-HeaderPageBreadcrumbs {
+  align-items: center;
+  gap: var(--bui-space-2);
+  font-size: var(--bui-font-size-3);
+  font-weight: var(--bui-font-weight-regular);
+  flex-direction: row;
+  display: flex;
+}
+
+.bui-HeaderPageBreadcrumb {
+  align-items: center;
+  gap: var(--bui-space-2);
+  flex-direction: row;
+  display: flex;
+}
+
+.bui-HeaderPageBreadcrumbLink {
+  color: var(--bui-fg-secondary);
+  cursor: pointer;
+  text-decoration: none;
+
+  &[data-active="true"] {
+    color: var(--bui-fg-primary);
+  }
+}
+
+.bui-HeaderPageBreadcrumbSeparator {
+  width: 16px;
+  height: 16px;
+  color: var(--bui-fg-secondary);
+}
+
 .bui-Icon {
   width: 1rem;
   height: 1rem;
@@ -10034,12 +10021,17 @@
   }
 }
 
-.bui-TableRoot {
+.bui-Table {
   caption-side: bottom;
   border-collapse: collapse;
   width: 100%;
 }
 
+.bui-TableHeader {
+  border-bottom: 1px solid var(--bui-border);
+  transition: color .2s ease-in-out;
+}
+
 .bui-TableHead {
   text-align: left;
   padding: var(--bui-space-3);
@@ -10047,6 +10039,33 @@
   color: var(--bui-fg-primary);
 }
 
+.bui-TableHeadSortButton {
+  cursor: pointer;
+  user-select: none;
+  align-items: center;
+  gap: var(--bui-space-1);
+  display: inline-flex;
+
+  &:hover svg {
+    opacity: .5;
+  }
+
+  & svg {
+    opacity: 0;
+    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
+  }
+
+  &[data-sort-order="asc"] svg {
+    opacity: 1;
+    transform: rotate(0);
+  }
+
+  &[data-sort-order="desc"] svg {
+    opacity: 1;
+    transform: rotate(180deg);
+  }
+}
+
 .bui-TableBody {
   color: var(--bui-fg-primary);
 }
@@ -10054,6 +10073,10 @@
 .bui-TableRow {
   border-bottom: 1px solid var(--bui-border);
   transition: color .2s ease-in-out;
+
+  &[data-react-aria-pressable="true"] {
+    cursor: pointer;
+  }
 }
 
 .bui-TableBody .bui-TableRow:hover {
@@ -10063,9 +10086,24 @@
 .bui-TableCell {
   padding: var(--bui-space-3);
   font-size: var(--bui-font-size-3);
+  padding: var(--bui-space-3);
+  font-size: var(--bui-font-size-3);
 }
 
-.bui-TableCellText, .bui-TableCellLink {
+.bui-TableCellContentWrapper {
+  align-items: center;
+  gap: var(--bui-space-2);
+  flex-direction: row;
+  display: inline-flex;
+}
+
+.bui-TableCellIcon, .bui-TableCellIcon svg {
+  color: var(--bui-fg-primary);
+  align-items: center;
+  display: inline-flex;
+}
+
+.bui-TableCellContent {
   gap: var(--bui-space-0_5);
   flex-direction: column;
   display: flex;
@@ -10113,6 +10151,30 @@
   display: flex;
 }
 
+.bui-DataTablePagination {
+  padding-top: var(--bui-space-5);
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+.bui-DataTablePagination--left {
+  justify-content: space-between;
+  align-items: center;
+  display: flex;
+}
+
+.bui-DataTablePagination--right {
+  justify-content: space-between;
+  align-items: center;
+  gap: var(--bui-space-2);
+  display: flex;
+}
+
+.bui-DataTablePagination--select {
+  min-width: 10.5rem;
+}
+
 .bui-Tabs {
   --active-tab-left: 0px;
   --active-tab-right: 0px;
@@ -10277,6 +10339,7 @@
 .bui-TextField {
   font-family: var(--bui-font-regular);
   flex-direction: column;
+  flex-shrink: 0;
   width: 100%;
   display: flex;
 }
@@ -10305,7 +10368,9 @@
   left: var(--bui-space-3);
   margin-right: var(--bui-space-1);
   color: var(--bui-fg-primary);
+  pointer-events: none;
   flex-shrink: 0;
+  transition: left .2s ease-in-out;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
@@ -10323,7 +10388,7 @@
 
 .bui-Input {
   padding: 0 var(--bui-space-3);
-  border-radius: var(--bui-radius-3);
+  border-radius: var(--bui-radius-2);
   border: 1px solid var(--bui-border);
   background-color: var(--bui-bg-surface-1);
   font-size: var(--bui-font-size-3);
@@ -10370,8 +10435,55 @@
   }
 }
 
-.bui-SearchField[data-empty] .bui-InputClear {
-  display: none;
+.bui-SearchField {
+  &[data-empty] {
+    & .bui-InputClear {
+      display: none;
+    }
+  }
+
+  &[data-start-collapsed="true"] {
+    padding: 0;
+    transition: width .3s ease-in-out;
+
+    &[data-collapsed="false"] {
+      cursor: pointer;
+
+      &[data-size="medium"] {
+        width: 2.5rem;
+        height: 2.5rem;
+      }
+
+      &[data-size="small"] {
+        width: 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-InputClear {
@@ -10429,7 +10541,6 @@
   font-size: var(--bui-font-size-3);
   font-family: var(--bui-font-regular);
   color: var(--bui-fg-primary);
-  --tooltip-offset: var(--bui-space-3);
   border-radius: 4px;
   outline: none;
   transition: transform .2s, opacity .2s;
@@ -10441,6 +10552,8 @@
     opacity: 0;
   }
 
+  --tooltip-offset: var(--bui-space-3);
+
   &[data-placement="top"] {
     margin-bottom: var(--tooltip-offset);
     --origin: translateY(4px);
@@ -10464,7 +10577,6 @@
 
 .bui-TooltipArrow {
   & svg {
-    --tooltip-arrow-overlap: -2px;
     display: block;
 
     & path:first-child {
@@ -10474,6 +10586,8 @@
     & path:nth-child(2) {
       fill: var(--bui-gray-3);
     }
+
+    --tooltip-arrow-overlap: -2px;
   }
 
   &[data-placement="top"] svg {

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

@@ -10,27 +10,30 @@ import '../Avatar/Avatar.esm.js';
 import '../Button/Button.esm.js';
 import '../Card/Card.esm.js';
 import '../Collapsible/Collapsible.esm.js';
-import '../DataTable/DataTable.esm.js';
 import '../FieldLabel/FieldLabel.esm.js';
 import '../Header/HeaderToolbar.esm.js';
 import '../Tabs/Tabs.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
-import '../Menu/Menu.esm.js';
-import '../Text/Text.esm.js';
-import '../ButtonIcon/ButtonIcon.esm.js';
+import '../HeaderPage/HeaderPage.esm.js';
 import '@remixicon/react';
 import { Icon } from '../Icon/Icon.esm.js';
+import '../ButtonIcon/ButtonIcon.esm.js';
 import '../ButtonLink/ButtonLink.esm.js';
 import '../RadioGroup/RadioGroup.esm.js';
-import '../Table/Table.esm.js';
+import 'react-aria-components';
+import 'react-router-dom';
+import '../Table/components/Cell.esm.js';
+import clsx from 'clsx';
+import '../Text/Text.esm.js';
+import '../Link/Link.esm.js';
+import '@base-ui-components/react/avatar';
 import '../TextField/TextField.esm.js';
 import '../Tooltip/Tooltip.esm.js';
+import '../Menu/Menu.esm.js';
 import '../ScrollArea/ScrollArea.esm.js';
 import '../SearchField/SearchField.esm.js';
-import '../Link/Link.esm.js';
 import '../Select/Select.esm.js';
 import '../Switch/Switch.esm.js';
-import clsx from 'clsx';
 
 const Checkbox = forwardRef(
   (props, ref) => {

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,QAAW,GAAA,UAAA;AAAA,EACtB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;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,KACE,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,UAAU,CAAA;AAE3C,IAAA,MAAM,eACJ,mBAAA,GAAA;AAAA,MAACA,UAAkB,CAAA,IAAA;AAAA,MAAlB;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,OAAA;AAAA,QACA,eAAiB,EAAA,QAAA;AAAA,QACjB,QAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QAEA,QAAC,kBAAA,GAAA,CAAAA,UAAA,CAAkB,SAAlB,EAAA,EAA4B,SAAW,EAAA,UAAA,CAAW,SACjD,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,IAAA,EAAM,IAAI,CAC/B,EAAA;AAAA;AAAA,KACF;AAGF,IAAA,OAAO,KACL,mBAAA,IAAA,CAAC,OAAM,EAAA,EAAA,SAAA,EAAW,WAAW,KAC1B,EAAA,QAAA,EAAA;AAAA,MAAA,eAAA;AAAA,MACA;AAAA,KAAA,EACH,CAEA,GAAA,eAAA;AAAA;AAGN;;;;"}
+{"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,QAAW,GAAA,UAAA;AAAA,EACtB,CAAC,OAAO,GAAQ,KAAA;AACd,IAAM,MAAA;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,KACE,GAAA,KAAA;AAEJ,IAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,UAAU,CAAA;AAE3C,IAAA,MAAM,eACJ,mBAAA,GAAA;AAAA,MAACA,UAAkB,CAAA,IAAA;AAAA,MAAlB;AAAA,QACC,GAAA;AAAA,QACA,SAAW,EAAA,IAAA,CAAK,UAAW,CAAA,IAAA,EAAM,SAAS,CAAA;AAAA,QAC1C,OAAA;AAAA,QACA,eAAiB,EAAA,QAAA;AAAA,QACjB,QAAA;AAAA,QACA,QAAA;AAAA,QACA,IAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QAEA,QAAC,kBAAA,GAAA,CAAAA,UAAA,CAAkB,SAAlB,EAAA,EAA4B,SAAW,EAAA,UAAA,CAAW,SACjD,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,IAAA,EAAK,OAAQ,EAAA,IAAA,EAAM,IAAI,CAC/B,EAAA;AAAA;AAAA,KACF;AAGF,IAAA,OAAO,KACL,mBAAA,IAAA,CAAC,OAAM,EAAA,EAAA,SAAA,EAAW,WAAW,KAC1B,EAAA,QAAA,EAAA;AAAA,MAAA,eAAA;AAAA,MACA;AAAA,KAAA,EACH,CAEA,GAAA,eAAA;AAAA;AAGN;;;;"}

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

@@ -10,7 +10,6 @@ const Header = (props) => {
     title,
     titleLink,
     menuItems,
-    breadcrumbs,
     customActions,
     onTabSelectionChange
   } = props;
@@ -24,7 +23,6 @@ const Header = (props) => {
         title,
         titleLink,
         menuItems,
-        breadcrumbs,
         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    breadcrumbs,\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        breadcrumbs={breadcrumbs}\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":";;;;;AAiCa,MAAA,MAAA,GAAS,CAAC,KAAuB,KAAA;AAC5C,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,QAAQ,CAAA;AAEzC,EAAM,MAAA,OAAA,GAAU,IAAQ,IAAA,IAAA,CAAK,MAAS,GAAA,CAAA;AAEtC,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,SAAA;AAAA,QACA,WAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IACC,IACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,WAAW,WACzB,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,iBAAA,EAAmB,oBACvB,EAAA,QAAA,kBAAA,GAAA,CAAC,OACE,EAAA,EAAA,QAAA,EAAA,IAAA,EAAM,IAAI,CACT,GAAA,qBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAI,CAAA,EAAA;AAAA,QACR,MAAM,GAAI,CAAA,IAAA;AAAA,QACV,eAAe,GAAI,CAAA,aAAA;AAAA,QAElB,QAAI,EAAA,GAAA,CAAA;AAAA,OAAA;AAAA,MALA,GAAI,CAAA;AAAA,KAOZ,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}
+{"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":";;;;;AAiCa,MAAA,MAAA,GAAS,CAAC,KAAuB,KAAA;AAC5C,EAAM,MAAA;AAAA,IACJ,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACE,GAAA,KAAA;AAEJ,EAAA,MAAM,EAAE,UAAA,EAAe,GAAA,SAAA,CAAU,QAAQ,CAAA;AAEzC,EAAM,MAAA,OAAA,GAAU,IAAQ,IAAA,IAAA,CAAK,MAAS,GAAA,CAAA;AAEtC,EAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,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,IACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,WAAW,WACzB,EAAA,QAAA,kBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,iBAAA,EAAmB,oBACvB,EAAA,QAAA,kBAAA,GAAA,CAAC,OACE,EAAA,EAAA,QAAA,EAAA,IAAA,EAAM,IAAI,CACT,GAAA,qBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QAEC,IAAI,GAAI,CAAA,EAAA;AAAA,QACR,MAAM,GAAI,CAAA,IAAA;AAAA,QACV,eAAe,GAAI,CAAA,aAAA;AAAA,QAElB,QAAI,EAAA,GAAA,CAAA;AAAA,OAAA;AAAA,MALA,GAAI,CAAA;AAAA,KAOZ,CACH,EAAA,CAAA,EACF,CACF,EAAA;AAAA,GAEJ,EAAA,CAAA;AAEJ;;;;"}

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

@@ -1,118 +1,29 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { RouterProvider, Link } from 'react-aria-components';
 import { useStyles } from '../../hooks/useStyles.esm.js';
-import { useRef, useState, useEffect } from 'react';
-import { RiShapesLine, RiArrowRightSLine, RiMore2Line } from '@remixicon/react';
+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 { Text } from '../Text/Text.esm.js';
 import { useNavigate, useHref } from 'react-router-dom';
 import { gsap } from 'gsap';
 import { ScrollTrigger } from 'gsap/ScrollTrigger';
-import { useGSAP } from '@gsap/react';
 
 gsap.registerPlugin(ScrollTrigger);
 const HeaderToolbar = (props) => {
-  const {
-    icon,
-    title,
-    titleLink,
-    menuItems,
-    breadcrumbs,
-    customActions,
-    hasTabs
-  } = props;
+  const { icon, title, titleLink, menuItems, customActions, hasTabs } = props;
   const { classNames } = useStyles("Header");
   let navigate = useNavigate();
   const toolbarWrapperRef = useRef(null);
   const toolbarContentRef = useRef(null);
   const toolbarControlsRef = useRef(null);
-  const breadcrumbsRef = useRef(null);
-  const [showBreadcrumbs, setShowBreadcrumbs] = useState(true);
-  useEffect(() => {
-    const wrapper = toolbarWrapperRef.current;
-    if (!wrapper) return;
-    const resizeObserver = new ResizeObserver(() => {
-      const wrapper2 = toolbarWrapperRef.current;
-      const content = toolbarContentRef.current;
-      const options = toolbarControlsRef.current;
-      if (!wrapper2 || !content) return;
-      const wrapperRect = wrapper2.getBoundingClientRect();
-      const wrapperWidth = wrapperRect.width;
-      const wrapperPadding = 24;
-      const availableWidth = wrapperWidth - wrapperPadding;
-      const contentRect = content.getBoundingClientRect();
-      const contentWidth = contentRect?.width || 0;
-      const optionsRect = options?.getBoundingClientRect();
-      const optionsWidth = optionsRect?.width || 0;
-      const shouldShowBreadcrumbs = contentWidth + optionsWidth + 32 <= availableWidth;
-      setShowBreadcrumbs(
-        (prev) => prev !== shouldShowBreadcrumbs ? shouldShowBreadcrumbs : prev
-      );
-    });
-    resizeObserver.observe(wrapper);
-    return () => {
-      resizeObserver.disconnect();
-    };
-  }, []);
-  useGSAP(() => {
-    gsap.to(breadcrumbsRef.current, {
-      scrollTrigger: {
-        start: "10% 10%",
-        end: "20% 20%",
-        scrub: true
-      },
-      opacity: 1,
-      duration: 1,
-      ease: "power2.inOut"
-    });
-  });
   const titleContent = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("div", { className: classNames.toolbarIcon, children: icon || /* @__PURE__ */ jsx(RiShapesLine, {}) }),
     /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: title || "Your plugin" })
   ] });
   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__ */ jsxs("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 }) }),
-      breadcrumbs && /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: breadcrumbsRef,
-          className: classNames.breadcrumbs,
-          style: {
-            opacity: 0,
-            visibility: showBreadcrumbs ? "visible" : "hidden"
-          },
-          children: [
-            /* @__PURE__ */ jsx(
-              RiArrowRightSLine,
-              {
-                size: 16,
-                className: classNames.breadcrumbSeparator
-              }
-            ),
-            breadcrumbs.map((breadcrumb, index) => /* @__PURE__ */ jsxs("div", { className: classNames.breadcrumb, children: [
-              /* @__PURE__ */ jsx(
-                Link,
-                {
-                  href: breadcrumb.href,
-                  className: classNames.breadcrumbLink,
-                  "data-active": index === breadcrumbs.length - 1,
-                  children: breadcrumb.label
-                }
-              ),
-              index < breadcrumbs.length - 1 && /* @__PURE__ */ jsx(
-                RiArrowRightSLine,
-                {
-                  size: 16,
-                  className: classNames.breadcrumbSeparator
-                }
-              )
-            ] }, breadcrumb.label))
-          ]
-        }
-      )
-    ] }),
+    /* @__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: [

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, useState, useEffect } from 'react';\nimport { RiArrowRightSLine, 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';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\nimport { useGSAP } from '@gsap/react';\n\ngsap.registerPlugin(ScrollTrigger);\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n  const {\n    icon,\n    title,\n    titleLink,\n    menuItems,\n    breadcrumbs,\n    customActions,\n    hasTabs,\n  } = 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  const breadcrumbsRef = useRef<HTMLDivElement>(null);\n\n  // State for breadcrumb visibility\n  const [showBreadcrumbs, setShowBreadcrumbs] = useState(true);\n\n  // Set up resize observer\n  useEffect(() => {\n    const wrapper = toolbarWrapperRef.current;\n    if (!wrapper) return;\n\n    const resizeObserver = new ResizeObserver(() => {\n      const wrapper = toolbarWrapperRef.current;\n      const content = toolbarContentRef.current;\n      const options = toolbarControlsRef.current;\n\n      if (!wrapper || !content) return;\n\n      // Get dimensions\n      const wrapperRect = wrapper.getBoundingClientRect();\n      const wrapperWidth = wrapperRect.width;\n      const wrapperPadding = 24; // 12px on each side (var(--bui-space-3))\n      const availableWidth = wrapperWidth - wrapperPadding;\n\n      // Calculate required width for content\n      const contentRect = content.getBoundingClientRect();\n      const contentWidth = contentRect?.width || 0;\n\n      // Calculate options width (if exists)\n      const optionsRect = options?.getBoundingClientRect();\n      const optionsWidth = optionsRect?.width || 0;\n\n      // Check if we need to hide breadcrumbs\n      const shouldShowBreadcrumbs =\n        contentWidth + optionsWidth + 32 <= availableWidth;\n\n      // Only update state if the value actually changed to prevent flickering\n      setShowBreadcrumbs(prev =>\n        prev !== shouldShowBreadcrumbs ? shouldShowBreadcrumbs : prev,\n      );\n    });\n\n    resizeObserver.observe(wrapper);\n\n    return () => {\n      resizeObserver.disconnect();\n    };\n  }, []);\n\n  useGSAP(() => {\n    gsap.to(breadcrumbsRef.current, {\n      scrollTrigger: {\n        start: '10% 10%',\n        end: '20% 20%',\n        scrub: true,\n      },\n      opacity: 1,\n      duration: 1,\n      ease: 'power2.inOut',\n    });\n  });\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            {breadcrumbs && (\n              <div\n                ref={breadcrumbsRef}\n                className={classNames.breadcrumbs}\n                style={{\n                  opacity: 0,\n                  visibility: showBreadcrumbs ? 'visible' : 'hidden',\n                }}\n              >\n                <RiArrowRightSLine\n                  size={16}\n                  className={classNames.breadcrumbSeparator}\n                />\n                {breadcrumbs.map((breadcrumb, index) => (\n                  <div key={breadcrumb.label} className={classNames.breadcrumb}>\n                    <Link\n                      href={breadcrumb.href}\n                      className={classNames.breadcrumbLink}\n                      data-active={index === breadcrumbs.length - 1}\n                    >\n                      {breadcrumb.label}\n                    </Link>\n                    {index < breadcrumbs.length - 1 && (\n                      <RiArrowRightSLine\n                        size={16}\n                        className={classNames.breadcrumbSeparator}\n                      />\n                    )}\n                  </div>\n                ))}\n              </div>\n            )}\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":["wrapper","props"],"mappings":"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"}
+{"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';\nimport { gsap } from 'gsap';\nimport { ScrollTrigger } from 'gsap/ScrollTrigger';\n\ngsap.registerPlugin(ScrollTrigger);\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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"}