@backstage/ui 0.6.1 → 0.7.0-next.1

package/CHANGELOG.md

@@ -1,10 +1,23 @@
 # @backstage/ui
 
-## 0.6.1
+## 0.7.0-next.1
 
 ### Patch Changes
 
-- b9288aa: Fix missing `dist` folder.
+- de89a3d: Fixes some styles on the Select component in BUI.
+- 75fead9: Fixes a couple of small bugs in BUI including setting H1 and H2 correctly on the Header and HeaderPage.
+- 2f9a084: We are motion away from `motion` to use `gsap` instead to make Backstage UI backward compatible with React 17.
+
+## 0.7.0-next.0
+
+### Minor Changes
+
+- b0e47f3: **Breaking** We are upgrading our `Text` component to support all font sizes making the `Heading` component redundant. The new `Text` component introduces 4 sizes for title and 4 sizes for body text. All of these work in multiple colors and font weights. We improved the `as` prop to include all possible values. The `Link` component has also been updated to match the new `Text` component.
+
+### Patch Changes
+
+- e7ff178: Update styling of Tooltip element
+- e0e886f: Adds onTabSelectionChange to ui header component.
 
 ## 0.6.0
 

package/css/styles.css

@@ -9191,8 +9191,8 @@
   --bui-gray-6: #7b7b7b;
   --bui-gray-7: #9e9e9e;
   --bui-gray-8: #b4b4b4;
-  --bui-bg: var(--bui-black);
-  --bui-bg-surface-1: var(--bui-gray-1);
+  --bui-bg: #333;
+  --bui-bg-surface-1: #424242;
   --bui-bg-surface-2: var(--bui-gray-2);
   --bui-bg-solid: #9cc9ff;
   --bui-bg-solid-hover: #83b9fd;
@@ -9217,7 +9217,7 @@
   --bui-fg-danger: #e22b2b;
   --bui-fg-warning: #e36d05;
   --bui-fg-success: #1db954;
-  --bui-border: #fff3;
+  --bui-border: #ffffff1f;
   --bui-border-hover: #fff6;
   --bui-border-pressed: #ffffff80;
   --bui-border-disabled: #fff3;
@@ -9732,58 +9732,6 @@
   display: flex;
 }
 
-.bui-Heading {
-  font-family: var(--bui-font-regular);
-  color: var(--bui-fg-primary);
-  margin: 0;
-  padding: 0;
-  line-height: 100%;
-}
-
-.bui-Heading[data-variant="display"] {
-  font-size: var(--bui-font-size-10);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title1"] {
-  font-size: var(--bui-font-size-9);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title2"] {
-  font-size: var(--bui-font-size-8);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title3"] {
-  font-size: var(--bui-font-size-7);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title4"] {
-  font-size: var(--bui-font-size-6);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-variant="title5"] {
-  font-size: var(--bui-font-size-5);
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Heading[data-color="primary"] {
-  color: var(--bui-fg-primary);
-}
-
-.bui-Heading[data-color="secondary"] {
-  color: var(--bui-fg-secondary);
-}
-
-.bui-Heading[data-truncate] {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
 .bui-Icon {
   width: 1rem;
   height: 1rem;
@@ -9795,72 +9743,17 @@
   margin: 0;
   padding: 0;
   text-decoration-line: none;
+  display: inline-block;
 
   &:hover {
     text-underline-offset: calc(.025em + 2px);
     text-decoration-line: underline;
     text-decoration-style: solid;
     text-decoration-thickness: min(2px, max(1px, .05em));
-    text-decoration-color: color-mix(in srgb, var(--bui-fg-link-hover) 30%, transparent);
+    text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);
   }
 }
 
-.bui-Link[data-variant="title-large"] {
-  font-size: var(--bui-font-size-8);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="title-medium"] {
-  font-size: var(--bui-font-size-7);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="title-small"] {
-  font-size: var(--bui-font-size-6);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="title-x-small"] {
-  font-size: var(--bui-font-size-5);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="body-large"] {
-  font-size: var(--bui-font-size-4);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="body-medium"] {
-  font-size: var(--bui-font-size-3);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="body-small"] {
-  font-size: var(--bui-font-size-2);
-  line-height: 140%;
-}
-
-.bui-Link[data-variant="body-x-small"] {
-  font-size: var(--bui-font-size-1);
-  line-height: 140%;
-}
-
-.bui-Link[data-weight="regular"] {
-  font-weight: var(--bui-font-weight-regular);
-}
-
-.bui-Link[data-weight="bold"] {
-  font-weight: var(--bui-font-weight-bold);
-}
-
-.bui-Link[data-color="primary"] {
-  color: var(--bui-fg-primary);
-}
-
-.bui-Link[data-color="secondary"] {
-  color: var(--bui-fg-secondary);
-}
-
 .bui-MenuPositioner {
   z-index: 100;
   outline: 0;
@@ -10303,22 +10196,42 @@
   padding: 0;
 }
 
-.bui-Text[data-variant="body"] {
-  font-size: var(--bui-font-size-3);
+.bui-Text[data-variant="title-large"] {
+  font-size: var(--bui-font-size-8);
+  line-height: 140%;
+}
+
+.bui-Text[data-variant="title-medium"] {
+  font-size: var(--bui-font-size-7);
+  line-height: 140%;
+}
+
+.bui-Text[data-variant="title-small"] {
+  font-size: var(--bui-font-size-6);
+  line-height: 140%;
+}
+
+.bui-Text[data-variant="title-x-small"] {
+  font-size: var(--bui-font-size-5);
   line-height: 140%;
 }
 
-.bui-Text[data-variant="subtitle"] {
+.bui-Text[data-variant="body-large"] {
   font-size: var(--bui-font-size-4);
   line-height: 140%;
 }
 
-.bui-Text[data-variant="caption"] {
+.bui-Text[data-variant="body-medium"] {
+  font-size: var(--bui-font-size-3);
+  line-height: 140%;
+}
+
+.bui-Text[data-variant="body-small"] {
   font-size: var(--bui-font-size-2);
   line-height: 140%;
 }
 
-.bui-Text[data-variant="label"] {
+.bui-Text[data-variant="body-x-small"] {
   font-size: var(--bui-font-size-1);
   line-height: 140%;
 }
@@ -10357,6 +10270,10 @@
   overflow: hidden;
 }
 
+.bui-Text[data-as="span"], .bui-Text[data-as="label"], .bui-Text[data-as="strong"], .bui-Text[data-as="em"], .bui-Text[data-as="small"] {
+  display: inline-block;
+}
+
 .bui-TextField {
   font-family: var(--bui-font-regular);
   flex-direction: column;
@@ -10504,18 +10421,20 @@
 }
 
 .bui-Tooltip {
-  background: var(--bui-bg-surface-2);
+  background: var(--bui-bg-surface-1);
+  border: 1px solid var(--bui-gray-3);
   forced-color-adjust: none;
   padding: var(--bui-space-2) var(--bui-space-3);
   max-width: 240px;
   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;
   transform: translate3d(0, 0, 0);
-  box-shadow: 0 8px 20px #0000001a;
+  box-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
 
   &[data-entering], &[data-exiting] {
     transform: var(--origin);
@@ -10523,41 +10442,76 @@
   }
 
   &[data-placement="top"] {
-    margin-bottom: var(--bui-space-2);
+    margin-bottom: var(--tooltip-offset);
     --origin: translateY(4px);
   }
 
+  &[data-placement="right"] {
+    margin-left: var(--tooltip-offset);
+    --origin: translateX(-4px);
+  }
+
   &[data-placement="bottom"] {
-    margin-top: var(--bui-space-2);
+    margin-top: var(--tooltip-offset);
     --origin: translateY(-4px);
+  }
 
-    & .bui-TooltipArrow svg {
-      transform: rotate(180deg);
-    }
+  &[data-placement="left"] {
+    margin-right: var(--tooltip-offset);
+    --origin: translateX(4px);
   }
+}
 
-  &[data-placement="right"] {
-    margin-left: var(--bui-space-2);
-    --origin: translateX(-4px);
+.bui-TooltipArrow {
+  & svg {
+    --tooltip-arrow-overlap: -2px;
+    display: block;
+
+    & path:first-child {
+      fill: var(--bui-bg-surface-1);
+    }
 
-    & .bui-TooltipArrow svg {
-      transform: rotate(90deg);
+    & path:nth-child(2) {
+      fill: var(--bui-gray-3);
     }
   }
 
-  &[data-placement="left"] {
-    margin-right: var(--bui-space-2);
-    --origin: translateX(4px);
+  &[data-placement="top"] svg {
+    margin-top: var(--tooltip-arrow-overlap);
+  }
 
-    & .bui-TooltipArrow svg {
-      transform: rotate(-90deg);
-    }
+  &[data-placement="bottom"] svg {
+    margin-bottom: var(--tooltip-arrow-overlap);
+    transform: rotate(180deg);
+  }
+
+  &[data-placement="right"] svg {
+    margin-right: var(--tooltip-arrow-overlap);
+    transform: rotate(90deg);
+  }
+
+  &[data-placement="left"] svg {
+    margin-left: var(--tooltip-arrow-overlap);
+    transform: rotate(-90deg);
   }
 }
 
-.bui-TooltipArrow svg {
-  fill: var(--bui-bg-surface-1);
-  display: block;
+[data-theme="dark"] {
+  & .bui-Tooltip {
+    background: var(--bui-bg-surface-2);
+    box-shadow: none;
+    border: 1px solid var(--bui-gray-4);
+  }
+
+  & .bui-TooltipArrow {
+    & svg path:first-child {
+      fill: var(--bui-bg-surface-2);
+    }
+
+    & svg path:nth-child(2) {
+      fill: var(--bui-gray-4);
+    }
+  }
 }
 
 .bui-ScrollAreaRoot {
@@ -10624,11 +10578,11 @@
   justify-content: space-between;
   align-items: center;
   gap: var(--bui-space-2);
-  max-width: 100%;
-  transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
+  width: 100%;
   display: flex;
 
   & svg {
+    color: var(--bui-fg-secondary);
     flex-shrink: 0;
   }
 
@@ -10658,6 +10612,7 @@
 
   &:hover {
     border-color: var(--bui-border-hover);
+    transition: border-color .2s ease-in-out, outline-color .2s ease-in-out;
   }
 
   &:focus-visible {
@@ -10696,6 +10651,7 @@
   font-family: var(--bui-font-regular);
   font-weight: var(--bui-font-weight-regular);
   color: var(--bui-fg-primary);
+  text-align: left;
   overflow: hidden;
 
   & .bui-SelectItemIndicator {
@@ -10710,14 +10666,15 @@
 .bui-SelectItem {
   width: var(--anchor-width);
   padding-block: var(--bui-space-2);
-  padding-inline: var(--bui-space-4);
+  padding-left: var(--bui-space-3);
+  padding-right: var(--bui-space-4);
   color: var(--bui-fg-primary);
   border-radius: var(--bui-radius-3);
   cursor: pointer;
   user-select: none;
   font-size: var(--bui-font-size-3);
   align-items: center;
-  gap: var(--bui-space-2);
+  gap: var(--bui-space-1);
   outline: none;
   grid-template-columns: 1rem 1fr;
   grid-template-areas: "icon text";

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

@@ -6,21 +6,19 @@ import '../Box/Box.esm.js';
 import '../Grid/Grid.esm.js';
 import '../Flex/Flex.esm.js';
 import '../Container/Container.esm.js';
-import '../Text/Text.esm.js';
-import '../Heading/Heading.esm.js';
 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 'react-aria-components';
+import '../Header/HeaderToolbar.esm.js';
+import '../Tabs/Tabs.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
-import '@remixicon/react';
-import '../ButtonIcon/ButtonIcon.esm.js';
 import '../Menu/Menu.esm.js';
-import 'motion/react';
-import '../Tabs/Tabs.esm.js';
+import '../Text/Text.esm.js';
+import '../ButtonIcon/ButtonIcon.esm.js';
+import '@remixicon/react';
 import { Icon } from '../Icon/Icon.esm.js';
 import '../ButtonLink/ButtonLink.esm.js';
 import '../RadioGroup/RadioGroup.esm.js';

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Checkbox as CheckboxPrimitive } from '@base-ui-components/react/checkbox';\nimport { Icon } from '../..';\nimport type { CheckboxProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport clsx from 'clsx';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(\n  (props, ref) => {\n    const {\n      label,\n      checked,\n      onChange,\n      disabled,\n      required,\n      className,\n      name,\n      value,\n      style,\n    } = props;\n\n    const { classNames } = useStyles('Checkbox');\n\n    const checkboxElement = (\n      <CheckboxPrimitive.Root\n        ref={ref}\n        className={clsx(classNames.root, className)}\n        checked={checked}\n        onCheckedChange={onChange}\n        disabled={disabled}\n        required={required}\n        name={name}\n        value={value}\n        style={style}\n      >\n        <CheckboxPrimitive.Indicator className={classNames.indicator}>\n          <Icon name=\"check\" size={12} />\n        </CheckboxPrimitive.Indicator>\n      </CheckboxPrimitive.Root>\n    );\n\n    return label ? (\n      <label className={classNames.label}>\n        {checkboxElement}\n        {label}\n      </label>\n    ) : (\n      checkboxElement\n    );\n  },\n);\n"],"names":["CheckboxPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,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/DataTable/Pagination/DataTablePagination.esm.js

@@ -51,7 +51,7 @@ const DataTablePagination = forwardRef(
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "bui-DataTablePagination--right", children: [
-            /* @__PURE__ */ jsx(Text, { variant: "body", children: `${fromCount} - ${toCount} of ${rowCount}` }),
+            /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: `${fromCount} - ${toCount} of ${rowCount}` }),
             /* @__PURE__ */ jsx(
               ButtonIcon,
               {

package/dist/components/DataTable/Pagination/DataTablePagination.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTablePagination.esm.js","sources":["../../../../src/components/DataTable/Pagination/DataTablePagination.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 { Text } from '../../Text';\nimport { DataTablePaginationProps } from './types';\nimport { ButtonIcon } from '../../ButtonIcon';\nimport clsx from 'clsx';\nimport { Select } from '../../Select';\nimport { useDataTable } from '../Root/DataTableRoot';\nimport { Icon } from '../../Icon';\n\n/** @public */\nconst DataTablePagination = forwardRef(\n  (\n    props: DataTablePaginationProps,\n    ref: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const { className, ...rest } = props;\n    const { table } = useDataTable();\n    const pageIndex = table?.getState().pagination.pageIndex;\n    const pageSize = table?.getState().pagination.pageSize;\n    const rowCount = table?.getRowCount();\n    const fromCount = (pageIndex ?? 0) * (pageSize ?? 10) + 1;\n    const toCount = Math.min(\n      ((pageIndex ?? 0) + 1) * (pageSize ?? 10),\n      rowCount,\n    );\n\n    return (\n      <div\n        ref={ref}\n        style={{ minWidth: table?.getTotalSize() }}\n        className={clsx('bui-DataTablePagination', className)}\n        {...rest}\n      >\n        <div className=\"bui-DataTablePagination--left\">\n          {!table.options.manualPagination && (\n            <Select\n              name=\"pageSize\"\n              size=\"small\"\n              placeholder=\"Show 10 results\"\n              options={[\n                { label: 'Show 5 results', value: '5' },\n                { label: 'Show 10 results', value: '10' },\n                { label: 'Show 20 results', value: '20' },\n                { label: 'Show 30 results', value: '30' },\n                { label: 'Show 40 results', value: '40' },\n                { label: 'Show 50 results', value: '50' },\n              ]}\n              selectedKey={pageSize?.toString()}\n              onSelectionChange={value => {\n                table?.setPageSize(Number(value));\n              }}\n              className=\"bui-DataTablePagination--select\"\n            />\n          )}\n        </div>\n        <div className=\"bui-DataTablePagination--right\">\n          <Text variant=\"body\">{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n          <ButtonIcon\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => table?.previousPage()}\n            isDisabled={!table?.getCanPreviousPage()}\n            icon={<Icon name=\"chevron-left\" />}\n          />\n          <ButtonIcon\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => table?.nextPage()}\n            isDisabled={!table?.getCanNextPage()}\n            icon={<Icon name=\"chevron-right\" />}\n          />\n        </div>\n      </div>\n    );\n  },\n);\n\nDataTablePagination.displayName = 'DataTablePagination';\n\nexport { DataTablePagination };\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DataTablePagination.esm.js","sources":["../../../../src/components/DataTable/Pagination/DataTablePagination.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 { Text } from '../../Text';\nimport { DataTablePaginationProps } from './types';\nimport { ButtonIcon } from '../../ButtonIcon';\nimport clsx from 'clsx';\nimport { Select } from '../../Select';\nimport { useDataTable } from '../Root/DataTableRoot';\nimport { Icon } from '../../Icon';\n\n/** @public */\nconst DataTablePagination = forwardRef(\n  (\n    props: DataTablePaginationProps,\n    ref: React.ForwardedRef<HTMLDivElement>,\n  ) => {\n    const { className, ...rest } = props;\n    const { table } = useDataTable();\n    const pageIndex = table?.getState().pagination.pageIndex;\n    const pageSize = table?.getState().pagination.pageSize;\n    const rowCount = table?.getRowCount();\n    const fromCount = (pageIndex ?? 0) * (pageSize ?? 10) + 1;\n    const toCount = Math.min(\n      ((pageIndex ?? 0) + 1) * (pageSize ?? 10),\n      rowCount,\n    );\n\n    return (\n      <div\n        ref={ref}\n        style={{ minWidth: table?.getTotalSize() }}\n        className={clsx('bui-DataTablePagination', className)}\n        {...rest}\n      >\n        <div className=\"bui-DataTablePagination--left\">\n          {!table.options.manualPagination && (\n            <Select\n              name=\"pageSize\"\n              size=\"small\"\n              placeholder=\"Show 10 results\"\n              options={[\n                { label: 'Show 5 results', value: '5' },\n                { label: 'Show 10 results', value: '10' },\n                { label: 'Show 20 results', value: '20' },\n                { label: 'Show 30 results', value: '30' },\n                { label: 'Show 40 results', value: '40' },\n                { label: 'Show 50 results', value: '50' },\n              ]}\n              selectedKey={pageSize?.toString()}\n              onSelectionChange={value => {\n                table?.setPageSize(Number(value));\n              }}\n              className=\"bui-DataTablePagination--select\"\n            />\n          )}\n        </div>\n        <div className=\"bui-DataTablePagination--right\">\n          <Text variant=\"body-medium\">{`${fromCount} - ${toCount} of ${rowCount}`}</Text>\n          <ButtonIcon\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => table?.previousPage()}\n            isDisabled={!table?.getCanPreviousPage()}\n            icon={<Icon name=\"chevron-left\" />}\n          />\n          <ButtonIcon\n            variant=\"secondary\"\n            size=\"small\"\n            onClick={() => table?.nextPage()}\n            isDisabled={!table?.getCanNextPage()}\n            icon={<Icon name=\"chevron-right\" />}\n          />\n        </div>\n      </div>\n    );\n  },\n);\n\nDataTablePagination.displayName = 'DataTablePagination';\n\nexport { DataTablePagination };\n"],"names":[],"mappings":"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"}

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

@@ -4,7 +4,16 @@ import { Tabs, TabList, Tab } from '../Tabs/Tabs.esm.js';
 import { useStyles } from '../../hooks/useStyles.esm.js';
 
 const Header = (props) => {
-  const { tabs, icon, title, menuItems, breadcrumbs, customActions } = props;
+  const {
+    tabs,
+    icon,
+    title,
+    titleLink,
+    menuItems,
+    breadcrumbs,
+    customActions,
+    onTabSelectionChange
+  } = props;
   const { classNames } = useStyles("Header");
   const hasTabs = tabs && tabs.length > 0;
   return /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -13,13 +22,23 @@ const Header = (props) => {
       {
         icon,
         title,
+        titleLink,
         menuItems,
         breadcrumbs,
         customActions,
         hasTabs
       }
     ),
-    tabs && /* @__PURE__ */ jsx("div", { className: classNames.tabsWrapper, children: /* @__PURE__ */ jsx(Tabs, { children: /* @__PURE__ */ jsx(TabList, { children: tabs?.map((tab) => /* @__PURE__ */ jsx(Tab, { id: tab.id, href: tab.href, children: tab.label }, tab.id)) }) }) })
+    tabs && /* @__PURE__ */ jsx("div", { className: classNames.tabsWrapper, children: /* @__PURE__ */ jsx(Tabs, { onSelectionChange: onTabSelectionChange, children: /* @__PURE__ */ jsx(TabList, { children: tabs?.map((tab) => /* @__PURE__ */ jsx(
+      Tab,
+      {
+        id: tab.id,
+        href: tab.href,
+        matchStrategy: tab.matchStrategy,
+        children: tab.label
+      },
+      tab.id
+    )) }) }) })
   ] });
 };
 

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 { tabs, icon, title, menuItems, breadcrumbs, customActions } = 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        menuItems={menuItems}\n        breadcrumbs={breadcrumbs}\n        customActions={customActions}\n        hasTabs={hasTabs}\n      />\n      {tabs && (\n        <div className={classNames.tabsWrapper}>\n          <Tabs>\n            <TabList>\n              {tabs?.map(tab => (\n                <Tab key={tab.id} id={tab.id} href={tab.href}>\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,EAAA,MAAM,EAAE,IAAM,EAAA,IAAA,EAAM,OAAO,SAAW,EAAA,WAAA,EAAa,eAAkB,GAAA,KAAA;AAErE,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,WAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IACC,IACC,oBAAA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,UAAW,CAAA,WAAA,EACzB,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,OAAA,EAAA,EACE,QAAM,EAAA,IAAA,EAAA,GAAA,CAAI,CACT,GAAA,qBAAA,GAAA,CAAC,GAAiB,EAAA,EAAA,EAAA,EAAI,GAAI,CAAA,EAAA,EAAI,IAAM,EAAA,GAAA,CAAI,IACrC,EAAA,QAAA,EAAA,GAAA,CAAI,KADG,EAAA,EAAA,GAAA,CAAI,EAEd,CACD,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    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;;;;"}

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

@@ -1,21 +1,33 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { Link } from 'react-aria-components';
+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 { ButtonIcon } from '../ButtonIcon/ButtonIcon.esm.js';
 import { Menu } from '../Menu/Menu.esm.js';
 import { Text } from '../Text/Text.esm.js';
-import { useScroll, useTransform, motion } from 'motion/react';
+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, menuItems, breadcrumbs, customActions, hasTabs } = props;
+  const {
+    icon,
+    title,
+    titleLink,
+    menuItems,
+    breadcrumbs,
+    customActions,
+    hasTabs
+  } = props;
   const { classNames } = useStyles("Header");
-  const { scrollY } = useScroll();
-  const breadcrumbOpacity = useTransform(scrollY, [80, 120], [0, 1]);
+  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;
@@ -43,18 +55,32 @@ const HeaderToolbar = (props) => {
       resizeObserver.disconnect();
     };
   }, []);
-  return /* @__PURE__ */ jsx("div", { className: classNames.toolbar, "data-has-tabs": hasTabs, children: /* @__PURE__ */ jsxs("div", { className: classNames.toolbarWrapper, ref: toolbarWrapperRef, children: [
+  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__ */ jsxs("div", { className: classNames.toolbarName, children: [
-        /* @__PURE__ */ jsx("div", { className: classNames.toolbarIcon, children: icon || /* @__PURE__ */ jsx(RiShapesLine, {}) }),
-        /* @__PURE__ */ jsx(Text, { variant: "body", children: title || "Your plugin" })
-      ] }),
+      /* @__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(
-        motion.div,
+        "div",
         {
+          ref: breadcrumbsRef,
           className: classNames.breadcrumbs,
           style: {
-            opacity: breadcrumbOpacity,
+            opacity: 0,
             visibility: showBreadcrumbs ? "visible" : "hidden"
           },
           children: [
@@ -114,7 +140,7 @@ const HeaderToolbar = (props) => {
         )) }) }) })
       ] })
     ] })
-  ] }) });
+  ] }) }) });
 };
 
 export { HeaderToolbar };