@backstage/ui 0.13.0 → 0.14.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +58 -0
- package/dist/components/ButtonIcon/ButtonIcon.module.css.esm.js +2 -2
- package/dist/components/Header/Header.esm.js +3 -13
- package/dist/components/Header/Header.esm.js.map +1 -1
- package/dist/components/Header/HeaderNav.esm.js +163 -0
- package/dist/components/Header/HeaderNav.esm.js.map +1 -0
- package/dist/components/Header/HeaderNav.module.css.esm.js +8 -0
- package/dist/components/Header/HeaderNav.module.css.esm.js.map +1 -0
- package/dist/components/Header/HeaderNavDefinition.esm.js +47 -0
- package/dist/components/Header/HeaderNavDefinition.esm.js.map +1 -0
- package/dist/components/Header/HeaderNavIndicators.esm.js +92 -0
- package/dist/components/Header/HeaderNavIndicators.esm.js.map +1 -0
- package/dist/components/Header/definition.esm.js +1 -0
- package/dist/components/Header/definition.esm.js.map +1 -1
- package/dist/components/Menu/Menu.esm.js +14 -37
- package/dist/components/Menu/Menu.esm.js.map +1 -1
- package/dist/components/Menu/Menu.module.css.esm.js +2 -2
- package/dist/components/Menu/definition.esm.js +0 -2
- package/dist/components/Menu/definition.esm.js.map +1 -1
- package/dist/components/PluginHeader/PluginHeader.esm.js +22 -15
- package/dist/components/PluginHeader/PluginHeader.esm.js.map +1 -1
- package/dist/components/PluginHeader/PluginHeader.module.css.esm.js +2 -2
- package/dist/components/PluginHeader/definition.esm.js +0 -1
- package/dist/components/PluginHeader/definition.esm.js.map +1 -1
- package/dist/components/SearchAutocomplete/SearchAutocomplete.esm.js +1 -1
- package/dist/components/SearchAutocomplete/SearchAutocomplete.esm.js.map +1 -1
- package/dist/components/SearchAutocomplete/SearchAutocomplete.module.css.esm.js +2 -2
- package/dist/components/SearchAutocomplete/definition.esm.js +1 -0
- package/dist/components/SearchAutocomplete/definition.esm.js.map +1 -1
- package/dist/components/Tabs/Tabs.module.css.esm.js +2 -2
- package/dist/index.d.ts +81 -6
- package/dist/index.esm.js +1 -0
- package/dist/index.esm.js.map +1 -1
- package/package.json +11 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,63 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
+
## 0.14.0-next.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 8659f33: **BREAKING**: The `Header` component's `tabs` prop now uses `HeaderNavTabItem[]` instead of `HeaderTab[]`. Tabs render as a `<nav>` element with links and optional dropdown menus instead of `role="tablist"`. A new `activeTabId` prop controls which tab is highlighted.
|
|
8
|
+
|
|
9
|
+
**Migration:**
|
|
10
|
+
|
|
11
|
+
```diff
|
|
12
|
+
- import { Header, type HeaderTab } from '@backstage/ui';
|
|
13
|
+
+ import { Header, type HeaderNavTabItem } from '@backstage/ui';
|
|
14
|
+
|
|
15
|
+
// Tabs no longer support matchStrategy — active state is controlled via activeTabId
|
|
16
|
+
- const tabs: HeaderTab[] = [
|
|
17
|
+
- { id: 'overview', label: 'Overview', href: '/overview', matchStrategy: 'prefix' },
|
|
18
|
+
+ const tabs: HeaderNavTabItem[] = [
|
|
19
|
+
+ { id: 'overview', label: 'Overview', href: '/overview' },
|
|
20
|
+
];
|
|
21
|
+
|
|
22
|
+
- <Header title="My Page" tabs={tabs} />
|
|
23
|
+
+ <Header title="My Page" tabs={tabs} activeTabId="overview" />
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
**Affected components:** Header
|
|
27
|
+
|
|
28
|
+
- bed3307: **BREAKING**: Dropped support for React 17. The minimum supported React version is now 18.
|
|
29
|
+
- 49ffe8a: **BREAKING**: Removed the `toolbarWrapper` element from `PluginHeader` and dropped `toolbarWrapper` from `PluginHeaderDefinition.classNames`. Toolbar layout styles now live on `toolbar` (`.bui-PluginHeaderToolbar`).
|
|
30
|
+
|
|
31
|
+
**Migration:** Update custom CSS that targeted `.bui-PluginHeaderToolbarWrapper` to use `.bui-PluginHeaderToolbar` instead.
|
|
32
|
+
|
|
33
|
+
**Affected components:** PluginHeader
|
|
34
|
+
|
|
35
|
+
### Patch Changes
|
|
36
|
+
|
|
37
|
+
- bcbb6eb: Made `SearchAutocomplete` background-aware. The input now adapts its background color based on its parent container's background level.
|
|
38
|
+
|
|
39
|
+
**Affected components:** SearchAutocomplete
|
|
40
|
+
|
|
41
|
+
- 8c2e24e: Added `aria-hidden` to the `PluginHeader` icon to prevent screen readers from announcing decorative plugin icons.
|
|
42
|
+
|
|
43
|
+
**Affected components:** PluginHeader
|
|
44
|
+
|
|
45
|
+
- 3d67aeb: Added `prefers-reduced-motion` support to Tab indicator animations. Users with reduced motion preferences will no longer see sliding transitions on the active and hover indicators.
|
|
46
|
+
|
|
47
|
+
**Affected components:** Tabs
|
|
48
|
+
|
|
49
|
+
- cc4a682: Fixed the ButtonIcon's loading spinner animation
|
|
50
|
+
|
|
51
|
+
**Affected components:** ButtonIcon
|
|
52
|
+
|
|
53
|
+
- adcdd2f: Simplified the `Menu` component's item structure by removing the inner wrapper element and applying styles directly to the menu item, improving DOM clarity.
|
|
54
|
+
|
|
55
|
+
**Affected components:** Menu
|
|
56
|
+
|
|
57
|
+
- 0257ada: Added `react-aria`, `react-stately`, `@react-aria/interactions`, `@react-stately/layout`, and `@react-stately/overlays` as dependencies.
|
|
58
|
+
- Updated dependencies
|
|
59
|
+
- @backstage/version-bridge@1.0.12
|
|
60
|
+
|
|
3
61
|
## 0.13.0
|
|
4
62
|
|
|
5
63
|
### Minor Changes
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
|
-
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ButtonIcon_bui-
|
|
4
|
-
var styles = {"bui-ButtonIcon":"ButtonIcon_bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .ButtonIcon_bui-ButtonIcon__0b06ecea62 {\n --loading-duration: 200ms;\n --bg: transparent;\n --bg-hover: transparent;\n --bg-active: transparent;\n --fg: inherit;\n\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border: none;\n user-select: none;\n padding: 0;\n cursor: pointer;\n border-radius: var(--bui-radius-2);\n flex-shrink: 0;\n transition: background-color var(--loading-duration) ease-out,\n box-shadow var(--loading-duration) ease-out;\n\n /* Apply variables */\n color: var(--fg);\n background-color: var(--bg);\n\n &:hover {\n background-color: var(--bg-hover);\n transition: background-color 150ms ease;\n }\n\n &:active {\n background-color: var(--bg-active);\n }\n\n &[data-disabled='true'] {\n cursor: not-allowed;\n }\n\n &[data-loading='true'] {\n cursor: wait;\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__0b06ecea62[data-variant='primary'] {\n --bg: var(--bui-bg-solid);\n --bg-hover: var(--bui-bg-solid-hover);\n --bg-active: var(--bui-bg-solid-pressed);\n --fg: var(--bui-fg-solid);\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg: var(--bui-bg-solid-disabled);\n --bg-hover: var(--bui-bg-solid-disabled);\n --bg-active: var(--bui-bg-solid-disabled);\n --fg: var(--bui-fg-solid-disabled);\n }\n\n &[data-focus-visible] {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__0b06ecea62[data-variant='secondary'] {\n --bg: var(--bui-bg-neutral-1);\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-bg='neutral-1'] {\n --bg: var(--bui-bg-neutral-2);\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-bg='neutral-2'] {\n --bg: var(--bui-bg-neutral-3);\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-bg='neutral-3'] {\n --bg: var(--bui-bg-neutral-4);\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &[data-focus-visible] {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__0b06ecea62[data-variant='tertiary'] {\n --bg-hover: var(--bui-bg-neutral-1-hover);\n --bg-active: var(--bui-bg-neutral-1-pressed);\n --fg: var(--bui-fg-primary);\n\n &[data-on-bg='neutral-1'] {\n --bg-hover: var(--bui-bg-neutral-2-hover);\n --bg-active: var(--bui-bg-neutral-2-pressed);\n }\n\n &[data-on-bg='neutral-2'] {\n --bg-hover: var(--bui-bg-neutral-3-hover);\n --bg-active: var(--bui-bg-neutral-3-pressed);\n }\n\n &[data-on-bg='neutral-3'] {\n --bg-hover: var(--bui-bg-neutral-4-hover);\n --bg-active: var(--bui-bg-neutral-4-pressed);\n }\n\n &[data-disabled='true'],\n &[data-loading='true'] {\n --bg-hover: var(--bg);\n --bg-active: var(--bg);\n --fg: var(--bui-fg-disabled);\n }\n\n &[data-focus-visible] {\n outline: none;\n transition: none;\n box-shadow: inset 0 0 0 2px var(--bui-ring);\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__0b06ecea62[data-size='small'] {\n width: 2rem;\n height: 2rem;\n\n svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .ButtonIcon_bui-ButtonIcon__0b06ecea62[data-size='medium'] {\n width: 2.5rem;\n height: 2.5rem;\n\n svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .ButtonIcon_bui-ButtonIconContent__0b06ecea62 {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 100%;\n width: 100%;\n transition: opacity var(--loading-duration) ease-out;\n\n .ButtonIcon_bui-ButtonIcon__0b06ecea62[data-loading='true'] & {\n opacity: 0;\n }\n }\n\n .ButtonIcon_bui-ButtonIconSpinner__0b06ecea62 {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n display: flex;\n opacity: 0;\n transition: opacity var(--loading-duration) ease-in;\n\n .ButtonIcon_bui-ButtonIcon__0b06ecea62[data-loading='true'] & {\n opacity: 1;\n }\n\n & svg {\n animation: ButtonIcon_bui-spin__0b06ecea62 1s linear infinite;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ButtonIcon_bui-ButtonIcon__0b06ecea62 {\n transition-duration: 50ms;\n }\n\n .ButtonIcon_bui-ButtonIconContent__0b06ecea62 {\n transition-duration: 50ms;\n }\n\n .ButtonIcon_bui-ButtonIconSpinner__0b06ecea62 {\n transition-duration: 50ms;\n }\n\n .ButtonIcon_bui-ButtonIconSpinner__0b06ecea62 svg {\n animation: none;\n }\n }\n\n @keyframes ButtonIcon_bui-spin__0b06ecea62 {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-ButtonIcon":"ButtonIcon_bui-ButtonIcon__0b06ecea62","bui-ButtonIconContent":"ButtonIcon_bui-ButtonIconContent__0b06ecea62","bui-ButtonIconSpinner":"ButtonIcon_bui-ButtonIconSpinner__0b06ecea62","bui-spin":"ButtonIcon_bui-spin__0b06ecea62"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -3,8 +3,7 @@ import { Text } from '../Text/Text.esm.js';
|
|
|
3
3
|
import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
|
|
4
4
|
import '../Text/Text.module.css.esm.js';
|
|
5
5
|
import { RiArrowRightSLine } from '@remixicon/react';
|
|
6
|
-
import {
|
|
7
|
-
import '../Tabs/Tabs.module.css.esm.js';
|
|
6
|
+
import { HeaderNav } from './HeaderNav.esm.js';
|
|
8
7
|
import { HeaderDefinition } from './definition.esm.js';
|
|
9
8
|
import { Container } from '../Container/Container.esm.js';
|
|
10
9
|
import '../Container/Container.module.css.esm.js';
|
|
@@ -13,7 +12,7 @@ import '../Link/Link.module.css.esm.js';
|
|
|
13
12
|
|
|
14
13
|
const Header = (props) => {
|
|
15
14
|
const { ownProps } = useDefinition(HeaderDefinition, props);
|
|
16
|
-
const { classes, title, tabs, customActions, breadcrumbs } = ownProps;
|
|
15
|
+
const { classes, title, tabs, activeTabId, customActions, breadcrumbs } = ownProps;
|
|
17
16
|
return /* @__PURE__ */ jsxs(Container, { className: classes.root, children: [
|
|
18
17
|
/* @__PURE__ */ jsxs("div", { className: classes.content, children: [
|
|
19
18
|
/* @__PURE__ */ jsxs("div", { className: classes.breadcrumbs, children: [
|
|
@@ -37,16 +36,7 @@ const Header = (props) => {
|
|
|
37
36
|
] }),
|
|
38
37
|
/* @__PURE__ */ jsx("div", { className: classes.controls, children: customActions })
|
|
39
38
|
] }),
|
|
40
|
-
tabs && /* @__PURE__ */ jsx("div", { className: classes.tabsWrapper, children: /* @__PURE__ */ jsx(
|
|
41
|
-
Tab,
|
|
42
|
-
{
|
|
43
|
-
id: tab.id,
|
|
44
|
-
href: tab.href,
|
|
45
|
-
matchStrategy: tab.matchStrategy,
|
|
46
|
-
children: tab.label
|
|
47
|
-
},
|
|
48
|
-
tab.id
|
|
49
|
-
)) }) }) })
|
|
39
|
+
tabs && /* @__PURE__ */ jsx("div", { className: classes.tabsWrapper, children: /* @__PURE__ */ jsx(HeaderNav, { tabs, activeTabId }) })
|
|
50
40
|
] });
|
|
51
41
|
};
|
|
52
42
|
const HeaderPage = Header;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport {
|
|
1
|
+
{"version":3,"file":"Header.esm.js","sources":["../../../src/components/Header/Header.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport type { HeaderProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { HeaderNav } from './HeaderNav';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { HeaderDefinition } from './definition';\nimport { Container } from '../Container';\nimport { Link } from '../Link';\nimport { Fragment } from 'react/jsx-runtime';\n\n/**\n * A secondary header with title, breadcrumbs, tabs, and actions.\n *\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n const { ownProps } = useDefinition(HeaderDefinition, props);\n const { classes, title, tabs, activeTabId, customActions, breadcrumbs } =\n ownProps;\n\n return (\n <Container className={classes.root}>\n <div className={classes.content}>\n <div className={classes.breadcrumbs}>\n {breadcrumbs &&\n breadcrumbs.map(breadcrumb => (\n <Fragment key={breadcrumb.label}>\n <Link\n href={breadcrumb.href}\n variant=\"title-small\"\n weight=\"bold\"\n color=\"secondary\"\n truncate\n style={{ maxWidth: '240px' }}\n standalone\n >\n {breadcrumb.label}\n </Link>\n <RiArrowRightSLine size={16} color=\"var(--bui-fg-secondary)\" />\n </Fragment>\n ))}\n <Text variant=\"title-small\" weight=\"bold\" as=\"h2\">\n {title}\n </Text>\n </div>\n <div className={classes.controls}>{customActions}</div>\n </div>\n {tabs && (\n <div className={classes.tabsWrapper}>\n <HeaderNav tabs={tabs} activeTabId={activeTabId} />\n </div>\n )}\n </Container>\n );\n};\n\n/**\n * @public\n * @deprecated Use {@link Header} instead.\n */\nexport const HeaderPage = Header;\n"],"names":[],"mappings":";;;;;;;;;;;;AA+BO,MAAM,MAAA,GAAS,CAAC,KAAA,KAAuB;AAC5C,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,kBAAkB,KAAK,CAAA;AAC1D,EAAA,MAAM,EAAE,OAAA,EAAS,KAAA,EAAO,MAAM,WAAA,EAAa,aAAA,EAAe,aAAY,GACpE,QAAA;AAEF,EAAA,uBACE,IAAA,CAAC,SAAA,EAAA,EAAU,SAAA,EAAW,OAAA,CAAQ,IAAA,EAC5B,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,OAAA,EACtB,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,WAAA,EACrB,QAAA,EAAA;AAAA,QAAA,WAAA,IACC,WAAA,CAAY,GAAA,CAAI,CAAA,UAAA,qBACd,IAAA,CAAC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,IAAA;AAAA,YAAA;AAAA,cACC,MAAM,UAAA,CAAW,IAAA;AAAA,cACjB,OAAA,EAAQ,aAAA;AAAA,cACR,MAAA,EAAO,MAAA;AAAA,cACP,KAAA,EAAM,WAAA;AAAA,cACN,QAAA,EAAQ,IAAA;AAAA,cACR,KAAA,EAAO,EAAE,QAAA,EAAU,OAAA,EAAQ;AAAA,cAC3B,UAAA,EAAU,IAAA;AAAA,cAET,QAAA,EAAA,UAAA,CAAW;AAAA;AAAA,WACd;AAAA,0BACA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI,OAAM,yBAAA,EAA0B;AAAA,SAAA,EAAA,EAZhD,UAAA,CAAW,KAa1B,CACD,CAAA;AAAA,wBACH,GAAA,CAAC,QAAK,OAAA,EAAQ,aAAA,EAAc,QAAO,MAAA,EAAO,EAAA,EAAG,MAC1C,QAAA,EAAA,KAAA,EACH;AAAA,OAAA,EACF,CAAA;AAAA,sBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,UAAW,QAAA,EAAA,aAAA,EAAc;AAAA,KAAA,EACnD,CAAA;AAAA,IACC,IAAA,oBACC,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,OAAA,CAAQ,aACtB,QAAA,kBAAA,GAAA,CAAC,SAAA,EAAA,EAAU,IAAA,EAAY,WAAA,EAA0B,CAAA,EACnD;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAMO,MAAM,UAAA,GAAa;;;;"}
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useRef, useState, useMemo, useCallback } from 'react';
|
|
3
|
+
import { useFocusVisible, useHover, useLink } from 'react-aria';
|
|
4
|
+
import { Button } from 'react-aria-components';
|
|
5
|
+
import { RiArrowDownSLine } from '@remixicon/react';
|
|
6
|
+
import { useDefinition } from '../../hooks/useDefinition/useDefinition.esm.js';
|
|
7
|
+
import { HeaderNavDefinition, HeaderNavGroupDefinition, HeaderNavItemDefinition } from './HeaderNavDefinition.esm.js';
|
|
8
|
+
import { HeaderNavIndicators } from './HeaderNavIndicators.esm.js';
|
|
9
|
+
import { MenuTrigger, Menu, MenuItem } from '../Menu/Menu.esm.js';
|
|
10
|
+
import '../Menu/definition.esm.js';
|
|
11
|
+
|
|
12
|
+
function isTabGroup(tab) {
|
|
13
|
+
return "items" in tab;
|
|
14
|
+
}
|
|
15
|
+
function HeaderNavLink(props) {
|
|
16
|
+
const { tab, active, analytics, registerRef, onHighlight } = props;
|
|
17
|
+
const { ownProps } = useDefinition(HeaderNavItemDefinition, {});
|
|
18
|
+
const linkRef = useRef(null);
|
|
19
|
+
const { linkProps } = useLink({ href: tab.href }, linkRef);
|
|
20
|
+
const { hoverProps } = useHover({
|
|
21
|
+
onHoverStart: () => onHighlight(tab.id),
|
|
22
|
+
onHoverEnd: () => onHighlight(null)
|
|
23
|
+
});
|
|
24
|
+
const handleClick = (e) => {
|
|
25
|
+
linkProps.onClick?.(e);
|
|
26
|
+
analytics.captureEvent("click", tab.label, {
|
|
27
|
+
attributes: { to: tab.href }
|
|
28
|
+
});
|
|
29
|
+
};
|
|
30
|
+
return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
|
|
31
|
+
"a",
|
|
32
|
+
{
|
|
33
|
+
...linkProps,
|
|
34
|
+
...hoverProps,
|
|
35
|
+
ref: (el) => {
|
|
36
|
+
linkRef.current = el;
|
|
37
|
+
registerRef(tab.id, el);
|
|
38
|
+
},
|
|
39
|
+
href: tab.href,
|
|
40
|
+
className: ownProps.classes.root,
|
|
41
|
+
"aria-current": active ? "page" : void 0,
|
|
42
|
+
onClick: handleClick,
|
|
43
|
+
onFocus: () => onHighlight(tab.id),
|
|
44
|
+
onBlur: () => onHighlight(null),
|
|
45
|
+
children: tab.label
|
|
46
|
+
}
|
|
47
|
+
) });
|
|
48
|
+
}
|
|
49
|
+
function HeaderNavGroupItem(props) {
|
|
50
|
+
const { group, active, activeChildId, registerRef, onHighlight } = props;
|
|
51
|
+
const { ownProps } = useDefinition(HeaderNavGroupDefinition, {});
|
|
52
|
+
const { hoverProps } = useHover({
|
|
53
|
+
onHoverStart: () => onHighlight(group.id),
|
|
54
|
+
onHoverEnd: () => onHighlight(null)
|
|
55
|
+
});
|
|
56
|
+
return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(MenuTrigger, { children: [
|
|
57
|
+
/* @__PURE__ */ jsxs(
|
|
58
|
+
Button,
|
|
59
|
+
{
|
|
60
|
+
ref: (el) => {
|
|
61
|
+
registerRef(group.id, el);
|
|
62
|
+
},
|
|
63
|
+
className: ownProps.classes.root,
|
|
64
|
+
"aria-current": active ? "page" : void 0,
|
|
65
|
+
...hoverProps,
|
|
66
|
+
onFocus: () => onHighlight(group.id),
|
|
67
|
+
onBlur: () => onHighlight(null),
|
|
68
|
+
children: [
|
|
69
|
+
group.label,
|
|
70
|
+
/* @__PURE__ */ jsx(RiArrowDownSLine, { size: 16 })
|
|
71
|
+
]
|
|
72
|
+
}
|
|
73
|
+
),
|
|
74
|
+
/* @__PURE__ */ jsx(
|
|
75
|
+
Menu,
|
|
76
|
+
{
|
|
77
|
+
selectionMode: "single",
|
|
78
|
+
selectedKeys: new Set(activeChildId ? [activeChildId] : []),
|
|
79
|
+
children: group.items.map((item) => /* @__PURE__ */ jsx(MenuItem, { id: item.id, href: item.href, children: item.label }, item.id))
|
|
80
|
+
}
|
|
81
|
+
)
|
|
82
|
+
] }) });
|
|
83
|
+
}
|
|
84
|
+
function HeaderNav(props) {
|
|
85
|
+
const { tabs, activeTabId } = props;
|
|
86
|
+
const { ownProps, analytics } = useDefinition(HeaderNavDefinition, {
|
|
87
|
+
tabs,
|
|
88
|
+
activeTabId
|
|
89
|
+
});
|
|
90
|
+
const { classes } = ownProps;
|
|
91
|
+
const { isFocusVisible } = useFocusVisible();
|
|
92
|
+
const navRef = useRef(null);
|
|
93
|
+
const itemRefs = useRef(/* @__PURE__ */ new Map());
|
|
94
|
+
const [highlightedKey, setHighlightedKey] = useState(null);
|
|
95
|
+
const { activeKey, activeChildId } = useMemo(() => {
|
|
96
|
+
if (!activeTabId) return { activeKey: void 0, activeChildId: void 0 };
|
|
97
|
+
for (const item of tabs) {
|
|
98
|
+
if (isTabGroup(item)) {
|
|
99
|
+
const child = item.items.find((c) => c.id === activeTabId);
|
|
100
|
+
if (child) {
|
|
101
|
+
return { activeKey: item.id, activeChildId: child.id };
|
|
102
|
+
}
|
|
103
|
+
} else if (item.id === activeTabId) {
|
|
104
|
+
return { activeKey: item.id, activeChildId: void 0 };
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
return { activeKey: void 0, activeChildId: void 0 };
|
|
108
|
+
}, [activeTabId, tabs]);
|
|
109
|
+
const registerRef = useCallback((key, el) => {
|
|
110
|
+
if (el) {
|
|
111
|
+
itemRefs.current.set(key, el);
|
|
112
|
+
} else {
|
|
113
|
+
itemRefs.current.delete(key);
|
|
114
|
+
}
|
|
115
|
+
}, []);
|
|
116
|
+
return /* @__PURE__ */ jsxs(
|
|
117
|
+
"nav",
|
|
118
|
+
{
|
|
119
|
+
ref: navRef,
|
|
120
|
+
"aria-label": "Content navigation",
|
|
121
|
+
className: classes.root,
|
|
122
|
+
"data-focus-visible": isFocusVisible || void 0,
|
|
123
|
+
children: [
|
|
124
|
+
/* @__PURE__ */ jsx("ul", { role: "list", className: classes.list, children: tabs.map(
|
|
125
|
+
(item) => isTabGroup(item) ? /* @__PURE__ */ jsx(
|
|
126
|
+
HeaderNavGroupItem,
|
|
127
|
+
{
|
|
128
|
+
group: item,
|
|
129
|
+
active: activeKey === item.id,
|
|
130
|
+
activeChildId,
|
|
131
|
+
registerRef,
|
|
132
|
+
onHighlight: setHighlightedKey
|
|
133
|
+
},
|
|
134
|
+
item.id
|
|
135
|
+
) : /* @__PURE__ */ jsx(
|
|
136
|
+
HeaderNavLink,
|
|
137
|
+
{
|
|
138
|
+
tab: item,
|
|
139
|
+
active: activeKey === item.id,
|
|
140
|
+
analytics,
|
|
141
|
+
registerRef,
|
|
142
|
+
onHighlight: setHighlightedKey
|
|
143
|
+
},
|
|
144
|
+
item.id
|
|
145
|
+
)
|
|
146
|
+
) }),
|
|
147
|
+
/* @__PURE__ */ jsx(
|
|
148
|
+
HeaderNavIndicators,
|
|
149
|
+
{
|
|
150
|
+
navRef,
|
|
151
|
+
itemRefs,
|
|
152
|
+
activeKey,
|
|
153
|
+
highlightedKey,
|
|
154
|
+
classes: { active: classes.active, hovered: classes.hovered }
|
|
155
|
+
}
|
|
156
|
+
)
|
|
157
|
+
]
|
|
158
|
+
}
|
|
159
|
+
);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
export { HeaderNav };
|
|
163
|
+
//# sourceMappingURL=HeaderNav.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeaderNav.esm.js","sources":["../../../src/components/Header/HeaderNav.tsx"],"sourcesContent":["/*\n * Copyright 2026 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 { useCallback, useMemo, useRef, useState } from 'react';\nimport { useFocusVisible, useHover, useLink } from 'react-aria';\nimport { Button as RAButton } from 'react-aria-components';\nimport { RiArrowDownSLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport {\n HeaderNavDefinition,\n HeaderNavItemDefinition,\n HeaderNavGroupDefinition,\n} from './HeaderNavDefinition';\nimport { HeaderNavIndicators } from './HeaderNavIndicators';\nimport { MenuTrigger, Menu, MenuItem } from '../Menu';\nimport type { AnalyticsTracker } from '../../analytics/types';\nimport type {\n HeaderNavTab,\n HeaderNavTabGroup,\n HeaderNavTabItem,\n} from './types';\n\nfunction isTabGroup(tab: HeaderNavTabItem): tab is HeaderNavTabGroup {\n return 'items' in tab;\n}\n\ninterface HeaderNavLinkProps {\n tab: HeaderNavTab;\n active: boolean;\n analytics: AnalyticsTracker;\n registerRef: (key: string, el: HTMLElement | null) => void;\n onHighlight: (key: string | null) => void;\n}\n\nfunction HeaderNavLink(props: HeaderNavLinkProps) {\n const { tab, active, analytics, registerRef, onHighlight } = props;\n const { ownProps } = useDefinition(HeaderNavItemDefinition, {});\n\n const linkRef = useRef<HTMLAnchorElement>(null);\n const { linkProps } = useLink({ href: tab.href }, linkRef);\n const { hoverProps } = useHover({\n onHoverStart: () => onHighlight(tab.id),\n onHoverEnd: () => onHighlight(null),\n });\n\n const handleClick = (e: React.MouseEvent<HTMLAnchorElement>) => {\n linkProps.onClick?.(e);\n analytics.captureEvent('click', tab.label, {\n attributes: { to: tab.href },\n });\n };\n\n return (\n <li>\n <a\n {...linkProps}\n {...hoverProps}\n ref={el => {\n (\n linkRef as React.MutableRefObject<HTMLAnchorElement | null>\n ).current = el;\n registerRef(tab.id, el);\n }}\n href={tab.href}\n className={ownProps.classes.root}\n aria-current={active ? 'page' : undefined}\n onClick={handleClick}\n onFocus={() => onHighlight(tab.id)}\n onBlur={() => onHighlight(null)}\n >\n {tab.label}\n </a>\n </li>\n );\n}\n\ninterface HeaderNavGroupItemProps {\n group: HeaderNavTabGroup;\n active: boolean;\n activeChildId?: string;\n registerRef: (key: string, el: HTMLElement | null) => void;\n onHighlight: (key: string | null) => void;\n}\n\nfunction HeaderNavGroupItem(props: HeaderNavGroupItemProps) {\n const { group, active, activeChildId, registerRef, onHighlight } = props;\n const { ownProps } = useDefinition(HeaderNavGroupDefinition, {});\n const { hoverProps } = useHover({\n onHoverStart: () => onHighlight(group.id),\n onHoverEnd: () => onHighlight(null),\n });\n\n return (\n <li>\n <MenuTrigger>\n <RAButton\n ref={el => {\n registerRef(group.id, el);\n }}\n className={ownProps.classes.root}\n aria-current={active ? 'page' : undefined}\n {...hoverProps}\n onFocus={() => onHighlight(group.id)}\n onBlur={() => onHighlight(null)}\n >\n {group.label}\n <RiArrowDownSLine size={16} />\n </RAButton>\n <Menu\n selectionMode=\"single\"\n selectedKeys={new Set(activeChildId ? [activeChildId] : [])}\n >\n {group.items.map(item => (\n <MenuItem key={item.id} id={item.id} href={item.href}>\n {item.label}\n </MenuItem>\n ))}\n </Menu>\n </MenuTrigger>\n </li>\n );\n}\n\ninterface HeaderNavProps {\n tabs: HeaderNavTabItem[];\n activeTabId?: string;\n}\n\n/** @internal */\nexport function HeaderNav(props: HeaderNavProps) {\n const { tabs, activeTabId } = props;\n const { ownProps, analytics } = useDefinition(HeaderNavDefinition, {\n tabs,\n activeTabId,\n });\n const { classes } = ownProps;\n\n const { isFocusVisible } = useFocusVisible();\n const navRef = useRef<HTMLElement>(null);\n const itemRefs = useRef<Map<string, HTMLElement>>(new Map());\n\n const [highlightedKey, setHighlightedKey] = useState<string | null>(null);\n\n // Resolve activeTabId to a top-level key (groups own their children's active state)\n const { activeKey, activeChildId } = useMemo(() => {\n if (!activeTabId) return { activeKey: undefined, activeChildId: undefined };\n for (const item of tabs) {\n if (isTabGroup(item)) {\n const child = item.items.find(c => c.id === activeTabId);\n if (child) {\n return { activeKey: item.id, activeChildId: child.id };\n }\n } else if (item.id === activeTabId) {\n return { activeKey: item.id, activeChildId: undefined };\n }\n }\n return { activeKey: undefined, activeChildId: undefined };\n }, [activeTabId, tabs]);\n\n const registerRef = useCallback((key: string, el: HTMLElement | null) => {\n if (el) {\n itemRefs.current.set(key, el);\n } else {\n itemRefs.current.delete(key);\n }\n }, []);\n\n return (\n <nav\n ref={navRef}\n aria-label=\"Content navigation\"\n className={classes.root}\n data-focus-visible={isFocusVisible || undefined}\n >\n <ul role=\"list\" className={classes.list}>\n {tabs.map(item =>\n isTabGroup(item) ? (\n <HeaderNavGroupItem\n key={item.id}\n group={item}\n active={activeKey === item.id}\n activeChildId={activeChildId}\n registerRef={registerRef}\n onHighlight={setHighlightedKey}\n />\n ) : (\n <HeaderNavLink\n key={item.id}\n tab={item}\n active={activeKey === item.id}\n analytics={analytics}\n registerRef={registerRef}\n onHighlight={setHighlightedKey}\n />\n ),\n )}\n </ul>\n <HeaderNavIndicators\n navRef={navRef}\n itemRefs={itemRefs}\n activeKey={activeKey}\n highlightedKey={highlightedKey}\n classes={{ active: classes.active, hovered: classes.hovered }}\n />\n </nav>\n );\n}\n"],"names":["RAButton"],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
|
+
|
|
3
|
+
var css_248z = "/*\n * Copyright 2026 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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .HeaderNav_bui-HeaderNav__3fece2b79e {\n position: relative;\n\n /* CSS custom properties for indicator positioning — set by HeaderNavIndicators */\n --active-tab-left: 0px;\n --active-tab-right: 0px;\n --active-tab-top: 0px;\n --active-tab-bottom: 0px;\n --active-tab-width: 0px;\n --active-tab-height: 0px;\n --active-tab-opacity: 0;\n --active-transition-duration: 0s;\n\n --hovered-tab-left: 0px;\n --hovered-tab-right: 0px;\n --hovered-tab-top: 0px;\n --hovered-tab-bottom: 0px;\n --hovered-tab-width: 0px;\n --hovered-tab-height: 0px;\n --hovered-tab-opacity: 0;\n --hovered-transition-duration: 0s;\n }\n\n .HeaderNav_bui-HeaderNavList__3fece2b79e {\n display: flex;\n flex-direction: row;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .HeaderNav_bui-HeaderNavItem__3fece2b79e,\n .HeaderNav_bui-HeaderNavGroup__3fece2b79e {\n font-family: var(--bui-font-family);\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-secondary);\n height: 36px;\n display: flex;\n gap: var(--bui-space-1);\n align-items: center;\n padding-inline: var(--bui-space-2);\n text-decoration: none;\n cursor: pointer;\n border: none;\n background: none;\n outline: none;\n }\n\n .HeaderNav_bui-HeaderNavItem__3fece2b79e[aria-current='page'],\n .HeaderNav_bui-HeaderNavGroup__3fece2b79e[aria-current='page'] {\n color: var(--bui-fg-primary);\n }\n\n .HeaderNav_bui-HeaderNavActive__3fece2b79e {\n pointer-events: none;\n position: absolute;\n bottom: -1px;\n left: calc(var(--active-tab-left) + var(--bui-space-2));\n width: calc(var(--active-tab-width) - var(--bui-space-4));\n height: 1px;\n background-color: var(--bui-fg-primary);\n border-radius: 4px;\n opacity: var(--active-tab-opacity);\n transition: left var(--active-transition-duration) ease-out,\n width var(--active-transition-duration) ease-out, opacity 0.15s;\n }\n\n .HeaderNav_bui-HeaderNavHovered__3fece2b79e {\n pointer-events: none;\n position: absolute;\n left: var(--hovered-tab-left);\n top: calc(var(--hovered-tab-top) + 4px);\n width: var(--hovered-tab-width);\n height: calc(var(--hovered-tab-height) - 8px);\n background-color: var(--bui-bg-neutral-2);\n border-radius: 4px;\n opacity: var(--hovered-tab-opacity);\n transition: left var(--hovered-transition-duration) ease-out,\n top var(--hovered-transition-duration) ease-out,\n width var(--hovered-transition-duration) ease-out,\n height var(--hovered-transition-duration) ease-out, opacity 0.15s;\n\n [data-focus-visible] & {\n outline: 2px solid var(--bui-ring);\n outline-offset: -2px;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .HeaderNav_bui-HeaderNavActive__3fece2b79e,\n .HeaderNav_bui-HeaderNavHovered__3fece2b79e {\n transition: none;\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-HeaderNav":"HeaderNav_bui-HeaderNav__3fece2b79e","bui-HeaderNavList":"HeaderNav_bui-HeaderNavList__3fece2b79e","bui-HeaderNavItem":"HeaderNav_bui-HeaderNavItem__3fece2b79e","bui-HeaderNavGroup":"HeaderNav_bui-HeaderNavGroup__3fece2b79e","bui-HeaderNavActive":"HeaderNav_bui-HeaderNavActive__3fece2b79e","bui-HeaderNavHovered":"HeaderNav_bui-HeaderNavHovered__3fece2b79e"};
|
|
5
|
+
styleInject(css_248z);
|
|
6
|
+
|
|
7
|
+
export { styles as default };
|
|
8
|
+
//# sourceMappingURL=HeaderNav.module.css.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeaderNav.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
import 'react/jsx-runtime';
|
|
2
|
+
import 'clsx';
|
|
3
|
+
import '../../hooks/useBreakpoint.esm.js';
|
|
4
|
+
import '../../hooks/useBg.esm.js';
|
|
5
|
+
import '../../hooks/useDefinition/helpers.esm.js';
|
|
6
|
+
import '../../analytics/useAnalytics.esm.js';
|
|
7
|
+
import { defineComponent } from '../../hooks/useDefinition/defineComponent.esm.js';
|
|
8
|
+
import styles from './HeaderNav.module.css.esm.js';
|
|
9
|
+
|
|
10
|
+
const HeaderNavDefinition = defineComponent()({
|
|
11
|
+
styles,
|
|
12
|
+
classNames: {
|
|
13
|
+
root: "bui-HeaderNav",
|
|
14
|
+
list: "bui-HeaderNavList",
|
|
15
|
+
active: "bui-HeaderNavActive",
|
|
16
|
+
hovered: "bui-HeaderNavHovered"
|
|
17
|
+
},
|
|
18
|
+
analytics: true,
|
|
19
|
+
propDefs: {
|
|
20
|
+
noTrack: {},
|
|
21
|
+
tabs: {},
|
|
22
|
+
activeTabId: {},
|
|
23
|
+
children: {},
|
|
24
|
+
className: {}
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
const HeaderNavItemDefinition = defineComponent()({
|
|
28
|
+
styles,
|
|
29
|
+
classNames: {
|
|
30
|
+
root: "bui-HeaderNavItem"
|
|
31
|
+
},
|
|
32
|
+
propDefs: {
|
|
33
|
+
className: {}
|
|
34
|
+
}
|
|
35
|
+
});
|
|
36
|
+
const HeaderNavGroupDefinition = defineComponent()({
|
|
37
|
+
styles,
|
|
38
|
+
classNames: {
|
|
39
|
+
root: "bui-HeaderNavGroup"
|
|
40
|
+
},
|
|
41
|
+
propDefs: {
|
|
42
|
+
className: {}
|
|
43
|
+
}
|
|
44
|
+
});
|
|
45
|
+
|
|
46
|
+
export { HeaderNavDefinition, HeaderNavGroupDefinition, HeaderNavItemDefinition };
|
|
47
|
+
//# sourceMappingURL=HeaderNavDefinition.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeaderNavDefinition.esm.js","sources":["../../../src/components/Header/HeaderNavDefinition.ts"],"sourcesContent":["/*\n * Copyright 2026 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 { defineComponent } from '../../hooks/useDefinition';\nimport type { HeaderNavTabItem } from './types';\nimport styles from './HeaderNav.module.css';\n\n/** @public */\nexport const HeaderNavDefinition = defineComponent<{\n noTrack?: boolean;\n tabs: HeaderNavTabItem[];\n activeTabId?: string;\n children?: React.ReactNode;\n className?: string;\n}>()({\n styles,\n classNames: {\n root: 'bui-HeaderNav',\n list: 'bui-HeaderNavList',\n active: 'bui-HeaderNavActive',\n hovered: 'bui-HeaderNavHovered',\n },\n analytics: true,\n propDefs: {\n noTrack: {},\n tabs: {},\n activeTabId: {},\n children: {},\n className: {},\n },\n});\n\n/** @public */\nexport const HeaderNavItemDefinition = defineComponent<{\n className?: string;\n}>()({\n styles,\n classNames: {\n root: 'bui-HeaderNavItem',\n },\n propDefs: {\n className: {},\n },\n});\n\n/** @public */\nexport const HeaderNavGroupDefinition = defineComponent<{\n className?: string;\n}>()({\n styles,\n classNames: {\n root: 'bui-HeaderNavGroup',\n },\n propDefs: {\n className: {},\n },\n});\n"],"names":[],"mappings":";;;;;;;;;AAqBO,MAAM,mBAAA,GAAsB,iBAMhC,CAAE;AAAA,EACH,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,eAAA;AAAA,IACN,IAAA,EAAM,mBAAA;AAAA,IACN,MAAA,EAAQ,qBAAA;AAAA,IACR,OAAA,EAAS;AAAA,GACX;AAAA,EACA,SAAA,EAAW,IAAA;AAAA,EACX,QAAA,EAAU;AAAA,IACR,SAAS,EAAC;AAAA,IACV,MAAM,EAAC;AAAA,IACP,aAAa,EAAC;AAAA,IACd,UAAU,EAAC;AAAA,IACX,WAAW;AAAC;AAEhB,CAAC;AAGM,MAAM,uBAAA,GAA0B,iBAEpC,CAAE;AAAA,EACH,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW;AAAC;AAEhB,CAAC;AAGM,MAAM,wBAAA,GAA2B,iBAErC,CAAE;AAAA,EACH,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM;AAAA,GACR;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAW;AAAC;AAEhB,CAAC;;;;"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useRef, useCallback, useEffect } from 'react';
|
|
3
|
+
|
|
4
|
+
function HeaderNavIndicators(props) {
|
|
5
|
+
const { navRef, itemRefs, activeKey, highlightedKey, classes } = props;
|
|
6
|
+
const prevActiveKey = useRef(null);
|
|
7
|
+
const prevHoveredKey = useRef(null);
|
|
8
|
+
const resetTimer = useRef(null);
|
|
9
|
+
const updateCSSVariables = useCallback(() => {
|
|
10
|
+
const container = navRef.current;
|
|
11
|
+
if (!container) return;
|
|
12
|
+
const containerRect = container.getBoundingClientRect();
|
|
13
|
+
if (activeKey) {
|
|
14
|
+
const el = itemRefs.current.get(activeKey);
|
|
15
|
+
if (el) {
|
|
16
|
+
const rect = el.getBoundingClientRect();
|
|
17
|
+
const relativeLeft = rect.left - containerRect.left;
|
|
18
|
+
const relativeTop = rect.top - containerRect.top;
|
|
19
|
+
if (prevActiveKey.current === null) {
|
|
20
|
+
container.style.setProperty("--active-transition-duration", "0s");
|
|
21
|
+
requestAnimationFrame(() => {
|
|
22
|
+
container.style.setProperty(
|
|
23
|
+
"--active-transition-duration",
|
|
24
|
+
"0.25s"
|
|
25
|
+
);
|
|
26
|
+
});
|
|
27
|
+
} else {
|
|
28
|
+
container.style.setProperty("--active-transition-duration", "0.25s");
|
|
29
|
+
}
|
|
30
|
+
container.style.setProperty("--active-tab-left", `${relativeLeft}px`);
|
|
31
|
+
container.style.setProperty("--active-tab-width", `${rect.width}px`);
|
|
32
|
+
container.style.setProperty("--active-tab-height", `${rect.height}px`);
|
|
33
|
+
container.style.setProperty("--active-tab-top", `${relativeTop}px`);
|
|
34
|
+
container.style.setProperty("--active-tab-opacity", "1");
|
|
35
|
+
prevActiveKey.current = activeKey;
|
|
36
|
+
}
|
|
37
|
+
} else {
|
|
38
|
+
container.style.setProperty("--active-tab-opacity", "0");
|
|
39
|
+
prevActiveKey.current = null;
|
|
40
|
+
}
|
|
41
|
+
if (highlightedKey) {
|
|
42
|
+
if (resetTimer.current !== null) {
|
|
43
|
+
cancelAnimationFrame(resetTimer.current);
|
|
44
|
+
resetTimer.current = null;
|
|
45
|
+
}
|
|
46
|
+
const el = itemRefs.current.get(highlightedKey);
|
|
47
|
+
if (el) {
|
|
48
|
+
const rect = el.getBoundingClientRect();
|
|
49
|
+
const relativeLeft = rect.left - containerRect.left;
|
|
50
|
+
const relativeTop = rect.top - containerRect.top;
|
|
51
|
+
if (prevHoveredKey.current === null) {
|
|
52
|
+
container.style.setProperty("--hovered-transition-duration", "0s");
|
|
53
|
+
requestAnimationFrame(() => {
|
|
54
|
+
container.style.setProperty(
|
|
55
|
+
"--hovered-transition-duration",
|
|
56
|
+
"0.2s"
|
|
57
|
+
);
|
|
58
|
+
});
|
|
59
|
+
} else {
|
|
60
|
+
container.style.setProperty("--hovered-transition-duration", "0.2s");
|
|
61
|
+
}
|
|
62
|
+
container.style.setProperty("--hovered-tab-left", `${relativeLeft}px`);
|
|
63
|
+
container.style.setProperty("--hovered-tab-top", `${relativeTop}px`);
|
|
64
|
+
container.style.setProperty("--hovered-tab-width", `${rect.width}px`);
|
|
65
|
+
container.style.setProperty("--hovered-tab-height", `${rect.height}px`);
|
|
66
|
+
container.style.setProperty("--hovered-tab-opacity", "1");
|
|
67
|
+
prevHoveredKey.current = highlightedKey;
|
|
68
|
+
}
|
|
69
|
+
} else {
|
|
70
|
+
container.style.setProperty("--hovered-tab-opacity", "0");
|
|
71
|
+
resetTimer.current = requestAnimationFrame(() => {
|
|
72
|
+
prevHoveredKey.current = null;
|
|
73
|
+
resetTimer.current = null;
|
|
74
|
+
});
|
|
75
|
+
}
|
|
76
|
+
}, [activeKey, highlightedKey, navRef, itemRefs]);
|
|
77
|
+
useEffect(() => {
|
|
78
|
+
updateCSSVariables();
|
|
79
|
+
}, [updateCSSVariables]);
|
|
80
|
+
useEffect(() => {
|
|
81
|
+
const handleResize = () => updateCSSVariables();
|
|
82
|
+
window.addEventListener("resize", handleResize);
|
|
83
|
+
return () => window.removeEventListener("resize", handleResize);
|
|
84
|
+
}, [updateCSSVariables]);
|
|
85
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
86
|
+
/* @__PURE__ */ jsx("div", { className: classes.active }),
|
|
87
|
+
/* @__PURE__ */ jsx("div", { className: classes.hovered })
|
|
88
|
+
] });
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
export { HeaderNavIndicators };
|
|
92
|
+
//# sourceMappingURL=HeaderNavIndicators.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeaderNavIndicators.esm.js","sources":["../../../src/components/Header/HeaderNavIndicators.tsx"],"sourcesContent":["/*\n * Copyright 2026 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 { useCallback, useEffect, useRef } from 'react';\n\ninterface HeaderNavIndicatorsProps {\n navRef: React.RefObject<HTMLElement | null>;\n itemRefs: React.MutableRefObject<Map<string, HTMLElement>>;\n activeKey: string | undefined;\n highlightedKey: string | null;\n classes: {\n active: string;\n hovered: string;\n };\n}\n\nexport function HeaderNavIndicators(props: HeaderNavIndicatorsProps) {\n const { navRef, itemRefs, activeKey, highlightedKey, classes } = props;\n const prevActiveKey = useRef<string | null>(null);\n const prevHoveredKey = useRef<string | null>(null);\n const resetTimer = useRef<number | null>(null);\n\n const updateCSSVariables = useCallback(() => {\n const container = navRef.current;\n if (!container) return;\n\n const containerRect = container.getBoundingClientRect();\n\n // Active indicator\n if (activeKey) {\n const el = itemRefs.current.get(activeKey);\n if (el) {\n const rect = el.getBoundingClientRect();\n const relativeLeft = rect.left - containerRect.left;\n const relativeTop = rect.top - containerRect.top;\n\n if (prevActiveKey.current === null) {\n container.style.setProperty('--active-transition-duration', '0s');\n requestAnimationFrame(() => {\n container.style.setProperty(\n '--active-transition-duration',\n '0.25s',\n );\n });\n } else {\n container.style.setProperty('--active-transition-duration', '0.25s');\n }\n\n container.style.setProperty('--active-tab-left', `${relativeLeft}px`);\n container.style.setProperty('--active-tab-width', `${rect.width}px`);\n container.style.setProperty('--active-tab-height', `${rect.height}px`);\n container.style.setProperty('--active-tab-top', `${relativeTop}px`);\n container.style.setProperty('--active-tab-opacity', '1');\n prevActiveKey.current = activeKey;\n }\n } else {\n container.style.setProperty('--active-tab-opacity', '0');\n prevActiveKey.current = null;\n }\n\n // Highlight indicator (follows whichever interaction happened last — hover or focus)\n if (highlightedKey) {\n if (resetTimer.current !== null) {\n cancelAnimationFrame(resetTimer.current);\n resetTimer.current = null;\n }\n const el = itemRefs.current.get(highlightedKey);\n if (el) {\n const rect = el.getBoundingClientRect();\n const relativeLeft = rect.left - containerRect.left;\n const relativeTop = rect.top - containerRect.top;\n\n if (prevHoveredKey.current === null) {\n container.style.setProperty('--hovered-transition-duration', '0s');\n requestAnimationFrame(() => {\n container.style.setProperty(\n '--hovered-transition-duration',\n '0.2s',\n );\n });\n } else {\n container.style.setProperty('--hovered-transition-duration', '0.2s');\n }\n\n container.style.setProperty('--hovered-tab-left', `${relativeLeft}px`);\n container.style.setProperty('--hovered-tab-top', `${relativeTop}px`);\n container.style.setProperty('--hovered-tab-width', `${rect.width}px`);\n container.style.setProperty('--hovered-tab-height', `${rect.height}px`);\n container.style.setProperty('--hovered-tab-opacity', '1');\n prevHoveredKey.current = highlightedKey;\n }\n } else {\n container.style.setProperty('--hovered-tab-opacity', '0');\n resetTimer.current = requestAnimationFrame(() => {\n prevHoveredKey.current = null;\n resetTimer.current = null;\n });\n }\n }, [activeKey, highlightedKey, navRef, itemRefs]);\n\n useEffect(() => {\n updateCSSVariables();\n }, [updateCSSVariables]);\n\n useEffect(() => {\n const handleResize = () => updateCSSVariables();\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, [updateCSSVariables]);\n\n return (\n <>\n <div className={classes.active} />\n <div className={classes.hovered} />\n </>\n );\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Header/definition.ts"],"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 { defineComponent } from '../../hooks/useDefinition';\nimport type { HeaderOwnProps } from './types';\nimport styles from './Header.module.css';\n\n/**\n * Component definition for Header\n * @public\n */\nexport const HeaderDefinition = defineComponent<HeaderOwnProps>()({\n styles,\n classNames: {\n root: 'bui-Header',\n content: 'bui-HeaderContent',\n breadcrumbs: 'bui-HeaderBreadcrumbs',\n tabsWrapper: 'bui-HeaderTabsWrapper',\n controls: 'bui-HeaderControls',\n },\n propDefs: {\n title: {},\n customActions: {},\n tabs: {},\n breadcrumbs: {},\n className: {},\n },\n});\n\n/**\n * @public\n * @deprecated Use {@link HeaderDefinition} instead.\n */\nexport const HeaderPageDefinition = HeaderDefinition;\n"],"names":[],"mappings":";;;;;;;;;AAwBO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAS,mBAAA;AAAA,IACT,WAAA,EAAa,uBAAA;AAAA,IACb,WAAA,EAAa,uBAAA;AAAA,IACb,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAO,EAAC;AAAA,IACR,eAAe,EAAC;AAAA,IAChB,MAAM,EAAC;AAAA,IACP,aAAa,EAAC;AAAA,IACd,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,oBAAA,GAAuB;;;;"}
|
|
1
|
+
{"version":3,"file":"definition.esm.js","sources":["../../../src/components/Header/definition.ts"],"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 { defineComponent } from '../../hooks/useDefinition';\nimport type { HeaderOwnProps } from './types';\nimport styles from './Header.module.css';\n\n/**\n * Component definition for Header\n * @public\n */\nexport const HeaderDefinition = defineComponent<HeaderOwnProps>()({\n styles,\n classNames: {\n root: 'bui-Header',\n content: 'bui-HeaderContent',\n breadcrumbs: 'bui-HeaderBreadcrumbs',\n tabsWrapper: 'bui-HeaderTabsWrapper',\n controls: 'bui-HeaderControls',\n },\n propDefs: {\n title: {},\n customActions: {},\n tabs: {},\n activeTabId: {},\n breadcrumbs: {},\n className: {},\n },\n});\n\n/**\n * @public\n * @deprecated Use {@link HeaderDefinition} instead.\n */\nexport const HeaderPageDefinition = HeaderDefinition;\n"],"names":[],"mappings":";;;;;;;;;AAwBO,MAAM,gBAAA,GAAmB,iBAAgC,CAAE;AAAA,EAChE,MAAA;AAAA,EACA,UAAA,EAAY;AAAA,IACV,IAAA,EAAM,YAAA;AAAA,IACN,OAAA,EAAS,mBAAA;AAAA,IACT,WAAA,EAAa,uBAAA;AAAA,IACb,WAAA,EAAa,uBAAA;AAAA,IACb,QAAA,EAAU;AAAA,GACZ;AAAA,EACA,QAAA,EAAU;AAAA,IACR,OAAO,EAAC;AAAA,IACR,eAAe,EAAC;AAAA,IAChB,MAAM,EAAC;AAAA,IACP,aAAa,EAAC;AAAA,IACd,aAAa,EAAC;AAAA,IACd,WAAW;AAAC;AAEhB,CAAC;AAMM,MAAM,oBAAA,GAAuB;;;;"}
|