@backstage/ui 0.14.3 → 0.15.0-next.1
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 +55 -9
- package/dist/components/Alert/Alert.esm.js +8 -3
- package/dist/components/Alert/Alert.esm.js.map +1 -1
- package/dist/components/Alert/definition.esm.js +1 -0
- package/dist/components/Alert/definition.esm.js.map +1 -1
- package/dist/components/Box/Box.esm.js +1 -1
- package/dist/components/Box/Box.esm.js.map +1 -1
- package/dist/components/Box/definition.esm.js +3 -0
- package/dist/components/Box/definition.esm.js.map +1 -1
- package/dist/components/Button/Button.esm.js +10 -5
- package/dist/components/Button/Button.esm.js.map +1 -1
- package/dist/components/Button/Button.module.css.esm.js +2 -2
- package/dist/components/Button/definition.esm.js +1 -0
- package/dist/components/Button/definition.esm.js.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.esm.js +10 -5
- package/dist/components/ButtonIcon/ButtonIcon.esm.js.map +1 -1
- package/dist/components/ButtonIcon/ButtonIcon.module.css.esm.js +2 -2
- package/dist/components/ButtonIcon/definition.esm.js +1 -0
- package/dist/components/ButtonIcon/definition.esm.js.map +1 -1
- package/dist/components/Card/Card.esm.js +2 -1
- package/dist/components/Card/Card.esm.js.map +1 -1
- package/dist/components/Card/Card.module.css.esm.js +2 -2
- package/dist/components/Card/definition.esm.js +4 -2
- package/dist/components/Card/definition.esm.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.module.css.esm.js +2 -2
- package/dist/components/Container/Container.module.css.esm.js +2 -2
- package/dist/components/DateRangePicker/DateRangePicker.esm.js +60 -0
- package/dist/components/DateRangePicker/DateRangePicker.esm.js.map +1 -0
- package/dist/components/DateRangePicker/DateRangePicker.module.css.esm.js +8 -0
- package/dist/components/DateRangePicker/DateRangePicker.module.css.esm.js.map +1 -0
- package/dist/components/DateRangePicker/DateRangePickerCalendar.esm.js +24 -0
- package/dist/components/DateRangePicker/DateRangePickerCalendar.esm.js.map +1 -0
- package/dist/components/DateRangePicker/DateRangePickerGroup.esm.js +32 -0
- package/dist/components/DateRangePicker/DateRangePickerGroup.esm.js.map +1 -0
- package/dist/components/DateRangePicker/definition.esm.js +54 -0
- package/dist/components/DateRangePicker/definition.esm.js.map +1 -0
- package/dist/components/Dialog/Dialog.module.css.esm.js +2 -2
- package/dist/components/Flex/definition.esm.js +4 -1
- package/dist/components/Flex/definition.esm.js.map +1 -1
- package/dist/components/Grid/definition.esm.js +4 -1
- package/dist/components/Grid/definition.esm.js.map +1 -1
- package/dist/components/Header/Header.esm.js +187 -28
- package/dist/components/Header/Header.esm.js.map +1 -1
- package/dist/components/Header/Header.module.css.esm.js +2 -2
- package/dist/components/Header/HeaderMetadataStatus.esm.js +32 -0
- package/dist/components/Header/HeaderMetadataStatus.esm.js.map +1 -0
- package/dist/components/Header/HeaderMetadataStatus.module.css.esm.js +8 -0
- package/dist/components/Header/HeaderMetadataStatus.module.css.esm.js.map +1 -0
- package/dist/components/Header/HeaderMetadataUsers.esm.js +92 -0
- package/dist/components/Header/HeaderMetadataUsers.esm.js.map +1 -0
- package/dist/components/Header/HeaderMetadataUsers.module.css.esm.js +8 -0
- package/dist/components/Header/HeaderMetadataUsers.module.css.esm.js.map +1 -0
- package/dist/components/Header/definition.esm.js +22 -3
- package/dist/components/Header/definition.esm.js.map +1 -1
- package/dist/components/Select/Select.module.css.esm.js +2 -2
- package/dist/components/Select/SelectContent.esm.js.map +1 -1
- package/dist/components/Select/SelectListBox.esm.js +26 -12
- package/dist/components/Select/SelectListBox.esm.js.map +1 -1
- package/dist/components/Select/definition.esm.js +20 -4
- package/dist/components/Select/definition.esm.js.map +1 -1
- package/dist/components/Table/Table.module.css.esm.js +2 -2
- package/dist/components/Table/components/Table.esm.js +4 -2
- package/dist/components/Table/components/Table.esm.js.map +1 -1
- package/dist/components/Table/components/TableRoot.esm.js +7 -2
- package/dist/components/Table/components/TableRoot.esm.js.map +1 -1
- package/dist/components/Table/definition.esm.js +1 -0
- package/dist/components/Table/definition.esm.js.map +1 -1
- package/dist/components/Table/hooks/useCompletePagination.esm.js +6 -6
- package/dist/components/Table/hooks/useCompletePagination.esm.js.map +1 -1
- package/dist/components/Table/hooks/useCursorPagination.esm.js +1 -1
- package/dist/components/Table/hooks/useCursorPagination.esm.js.map +1 -1
- package/dist/components/Table/hooks/useOffsetPagination.esm.js +1 -1
- package/dist/components/Table/hooks/useOffsetPagination.esm.js.map +1 -1
- package/dist/components/Table/hooks/usePageCache.esm.js +9 -9
- package/dist/components/Table/hooks/usePageCache.esm.js.map +1 -1
- package/dist/components/Table/hooks/useTable.esm.js +4 -3
- package/dist/components/Table/hooks/useTable.esm.js.map +1 -1
- package/dist/components/Tabs/TabsIndicators.esm.js +1 -0
- package/dist/components/Tabs/TabsIndicators.esm.js.map +1 -1
- package/dist/css/styles.css +72 -0
- package/dist/hooks/useDefinition/helpers.esm.js +2 -1
- package/dist/hooks/useDefinition/helpers.esm.js.map +1 -1
- package/dist/hooks/useDefinition/useDefinition.esm.js +5 -10
- package/dist/hooks/useDefinition/useDefinition.esm.js.map +1 -1
- package/dist/index.d.ts +261 -57
- package/dist/index.esm.js +4 -0
- package/dist/index.esm.js.map +1 -1
- package/dist/utils/utilityClassMap.esm.js +18 -0
- package/dist/utils/utilityClassMap.esm.js.map +1 -1
- package/package.json +10 -4
|
@@ -5,38 +5,197 @@ import '../Text/Text.module.css.esm.js';
|
|
|
5
5
|
import { RiArrowRightSLine } from '@remixicon/react';
|
|
6
6
|
import { HeaderNav } from './HeaderNav.esm.js';
|
|
7
7
|
import { HeaderDefinition } from './definition.esm.js';
|
|
8
|
-
import {
|
|
9
|
-
import '
|
|
8
|
+
import { sanitizeUrl } from '@braintree/sanitize-url';
|
|
9
|
+
import { Lexer } from 'marked';
|
|
10
10
|
import { Link } from '../Link/Link.esm.js';
|
|
11
11
|
import '../Link/Link.module.css.esm.js';
|
|
12
|
+
import { useMemo, useRef, useState, useEffect, Fragment as Fragment$1 } from 'react';
|
|
12
13
|
|
|
14
|
+
const getScrollParent = (element) => {
|
|
15
|
+
let parent = element?.parentElement;
|
|
16
|
+
while (parent) {
|
|
17
|
+
const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);
|
|
18
|
+
if (/(auto|scroll|overlay|hidden)/.test(`${overflow}${overflowX}${overflowY}`)) {
|
|
19
|
+
return parent;
|
|
20
|
+
}
|
|
21
|
+
parent = parent.parentElement;
|
|
22
|
+
}
|
|
23
|
+
return null;
|
|
24
|
+
};
|
|
25
|
+
const isStickySentinelOutOfView = (sentinel, root) => {
|
|
26
|
+
const sentinelRect = sentinel.getBoundingClientRect();
|
|
27
|
+
const rootTop = root ? root.getBoundingClientRect().top : 0;
|
|
28
|
+
return sentinelRect.bottom <= rootTop;
|
|
29
|
+
};
|
|
30
|
+
function renderInlineMarkdown(text) {
|
|
31
|
+
return Lexer.lexInline(text).map((token, i) => {
|
|
32
|
+
if (token.type === "link") {
|
|
33
|
+
const href = sanitizeUrl(token.href);
|
|
34
|
+
if (href === "about:blank") return token.text;
|
|
35
|
+
return /* @__PURE__ */ jsx(Link, { href, standalone: true, children: token.text }, i);
|
|
36
|
+
}
|
|
37
|
+
return token.raw;
|
|
38
|
+
});
|
|
39
|
+
}
|
|
13
40
|
const Header = (props) => {
|
|
14
|
-
const { ownProps } = useDefinition(HeaderDefinition, props
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
41
|
+
const { ownProps, dataAttributes } = useDefinition(HeaderDefinition, props, {
|
|
42
|
+
classNameTarget: "content"
|
|
43
|
+
});
|
|
44
|
+
const {
|
|
45
|
+
classes,
|
|
46
|
+
title,
|
|
47
|
+
tabs,
|
|
48
|
+
activeTabId,
|
|
49
|
+
customActions,
|
|
50
|
+
breadcrumbs,
|
|
51
|
+
description,
|
|
52
|
+
tags,
|
|
53
|
+
metadata,
|
|
54
|
+
sticky
|
|
55
|
+
} = ownProps;
|
|
56
|
+
const descriptionNodes = useMemo(
|
|
57
|
+
() => description ? renderInlineMarkdown(description) : null,
|
|
58
|
+
[description]
|
|
59
|
+
);
|
|
60
|
+
const stickySentinelRef = useRef(null);
|
|
61
|
+
const [isStuck, setIsStuck] = useState(false);
|
|
62
|
+
useEffect(() => {
|
|
63
|
+
if (!sticky) {
|
|
64
|
+
setIsStuck(false);
|
|
65
|
+
return;
|
|
66
|
+
}
|
|
67
|
+
const sentinel = stickySentinelRef.current;
|
|
68
|
+
if (!sentinel) {
|
|
69
|
+
return;
|
|
70
|
+
}
|
|
71
|
+
const root = getScrollParent(sentinel);
|
|
72
|
+
if (typeof IntersectionObserver === "undefined") {
|
|
73
|
+
const updateStuckState = () => {
|
|
74
|
+
setIsStuck(isStickySentinelOutOfView(sentinel, root));
|
|
75
|
+
};
|
|
76
|
+
const scrollTarget = root ?? window;
|
|
77
|
+
updateStuckState();
|
|
78
|
+
scrollTarget.addEventListener("scroll", updateStuckState, {
|
|
79
|
+
passive: true
|
|
80
|
+
});
|
|
81
|
+
window.addEventListener("resize", updateStuckState);
|
|
82
|
+
return () => {
|
|
83
|
+
scrollTarget.removeEventListener("scroll", updateStuckState);
|
|
84
|
+
window.removeEventListener("resize", updateStuckState);
|
|
85
|
+
};
|
|
86
|
+
}
|
|
87
|
+
const observer = new IntersectionObserver(
|
|
88
|
+
([entry]) => {
|
|
89
|
+
setIsStuck(!entry.isIntersecting);
|
|
90
|
+
},
|
|
91
|
+
{ root, threshold: 0 }
|
|
92
|
+
);
|
|
93
|
+
observer.observe(sentinel);
|
|
94
|
+
return () => {
|
|
95
|
+
observer.disconnect();
|
|
96
|
+
};
|
|
97
|
+
}, [sticky]);
|
|
98
|
+
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
99
|
+
/* @__PURE__ */ jsx("div", { className: classes.headerTop, "data-sticky": sticky || void 0, children: tags && tags.length > 0 && /* @__PURE__ */ jsx("ul", { className: classes.tags, children: tags.map((tag, i) => /* @__PURE__ */ jsx(
|
|
100
|
+
"li",
|
|
101
|
+
{
|
|
102
|
+
className: classes.tag,
|
|
103
|
+
children: tag.href ? /* @__PURE__ */ jsx(
|
|
104
|
+
Link,
|
|
105
|
+
{
|
|
106
|
+
href: tag.href,
|
|
107
|
+
variant: "body-medium",
|
|
108
|
+
color: "secondary",
|
|
109
|
+
standalone: true,
|
|
110
|
+
children: tag.label
|
|
111
|
+
}
|
|
112
|
+
) : /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: tag.label })
|
|
113
|
+
},
|
|
114
|
+
`${i}:${tag.label}:${tag.href ?? ""}`
|
|
115
|
+
)) }) }),
|
|
116
|
+
sticky && /* @__PURE__ */ jsx(
|
|
117
|
+
"div",
|
|
118
|
+
{
|
|
119
|
+
ref: stickySentinelRef,
|
|
120
|
+
className: classes.stickySentinel,
|
|
121
|
+
"data-sticky": "",
|
|
122
|
+
"aria-hidden": "true"
|
|
123
|
+
}
|
|
124
|
+
),
|
|
125
|
+
/* @__PURE__ */ jsxs(
|
|
126
|
+
"div",
|
|
127
|
+
{
|
|
128
|
+
className: classes.content,
|
|
129
|
+
"data-sticky": sticky || void 0,
|
|
130
|
+
"data-stuck": isStuck || void 0,
|
|
131
|
+
"data-has-tags": tags && tags.length > 0 ? "" : void 0,
|
|
132
|
+
...dataAttributes,
|
|
133
|
+
children: [
|
|
134
|
+
/* @__PURE__ */ jsx("div", { className: classes.titleStack, children: isStuck ? /* @__PURE__ */ jsxs("div", { className: classes.breadcrumbsSmall, children: [
|
|
135
|
+
breadcrumbs && breadcrumbs.map((breadcrumb) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
136
|
+
/* @__PURE__ */ jsx(
|
|
137
|
+
Link,
|
|
138
|
+
{
|
|
139
|
+
href: breadcrumb.href,
|
|
140
|
+
color: "secondary",
|
|
141
|
+
className: classes.breadcrumbLinkSmall,
|
|
142
|
+
standalone: true,
|
|
143
|
+
children: breadcrumb.label
|
|
144
|
+
}
|
|
145
|
+
),
|
|
146
|
+
/* @__PURE__ */ jsx(
|
|
147
|
+
RiArrowRightSLine,
|
|
148
|
+
{
|
|
149
|
+
className: classes.breadcrumbSeparator,
|
|
150
|
+
size: 16,
|
|
151
|
+
color: "var(--bui-fg-secondary)"
|
|
152
|
+
}
|
|
153
|
+
)
|
|
154
|
+
] }, breadcrumb.label)),
|
|
155
|
+
/* @__PURE__ */ jsx("h2", { className: classes.titleSmall, children: title })
|
|
156
|
+
] }) : /* @__PURE__ */ jsxs("div", { className: classes.breadcrumbs, children: [
|
|
157
|
+
breadcrumbs && breadcrumbs.map((breadcrumb) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
|
|
158
|
+
/* @__PURE__ */ jsx(
|
|
159
|
+
Link,
|
|
160
|
+
{
|
|
161
|
+
href: breadcrumb.href,
|
|
162
|
+
color: "secondary",
|
|
163
|
+
className: classes.breadcrumbLink,
|
|
164
|
+
standalone: true,
|
|
165
|
+
children: breadcrumb.label
|
|
166
|
+
}
|
|
167
|
+
),
|
|
168
|
+
/* @__PURE__ */ jsx(
|
|
169
|
+
RiArrowRightSLine,
|
|
170
|
+
{
|
|
171
|
+
className: classes.breadcrumbSeparator,
|
|
172
|
+
size: 16,
|
|
173
|
+
color: "var(--bui-fg-secondary)"
|
|
174
|
+
}
|
|
175
|
+
)
|
|
176
|
+
] }, breadcrumb.label)),
|
|
177
|
+
/* @__PURE__ */ jsx("h2", { className: classes.title, children: title })
|
|
178
|
+
] }) }),
|
|
179
|
+
/* @__PURE__ */ jsx("div", { className: classes.controls, children: customActions })
|
|
180
|
+
]
|
|
181
|
+
}
|
|
182
|
+
),
|
|
183
|
+
/* @__PURE__ */ jsxs("div", { className: classes.headerBottom, "data-sticky": sticky || void 0, children: [
|
|
184
|
+
description && /* @__PURE__ */ jsx(
|
|
185
|
+
Text,
|
|
186
|
+
{
|
|
187
|
+
variant: "body-medium",
|
|
188
|
+
color: "secondary",
|
|
189
|
+
className: classes.description,
|
|
190
|
+
children: descriptionNodes
|
|
191
|
+
}
|
|
192
|
+
),
|
|
193
|
+
metadata && metadata.length > 0 && /* @__PURE__ */ jsx("dl", { className: classes.metaRow, children: metadata.map((item, i) => /* @__PURE__ */ jsxs("div", { className: classes.metaItem, children: [
|
|
194
|
+
/* @__PURE__ */ jsx("dt", { children: /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: item.label }) }),
|
|
195
|
+
/* @__PURE__ */ jsx("dd", { children: typeof item.value === "string" ? /* @__PURE__ */ jsx(Text, { variant: "body-medium", children: item.value }) : item.value })
|
|
196
|
+
] }, `${i}:${item.label}`)) }),
|
|
197
|
+
tabs && /* @__PURE__ */ jsx("div", { className: classes.tabsWrapper, children: /* @__PURE__ */ jsx(HeaderNav, { tabs, activeTabId }) })
|
|
198
|
+
] })
|
|
40
199
|
] });
|
|
41
200
|
};
|
|
42
201
|
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 { 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;;;;"}
|
|
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 { sanitizeUrl } from '@braintree/sanitize-url';\nimport { Lexer } from 'marked';\nimport { Link } from '../Link';\nimport { Fragment, useEffect, useMemo, useRef, useState } from 'react';\n\nconst getScrollParent = (element: HTMLElement | null): Element | null => {\n let parent = element?.parentElement;\n\n while (parent) {\n const { overflow, overflowX, overflowY } = window.getComputedStyle(parent);\n\n if (\n /(auto|scroll|overlay|hidden)/.test(`${overflow}${overflowX}${overflowY}`)\n ) {\n return parent;\n }\n\n parent = parent.parentElement;\n }\n\n return null;\n};\n\nconst isStickySentinelOutOfView = (\n sentinel: HTMLElement,\n root: Element | null,\n) => {\n const sentinelRect = sentinel.getBoundingClientRect();\n const rootTop = root ? root.getBoundingClientRect().top : 0;\n\n return sentinelRect.bottom <= rootTop;\n};\n\n/**\n * Parses inline Markdown links in a string and returns an array of React nodes.\n * URLs are sanitized via `@braintree/sanitize-url`; unsafe URLs are rendered as\n * plain text. Uses `marked` instead of `react-markdown` to avoid ESM issues.\n */\nfunction renderInlineMarkdown(text: string): React.ReactNode[] {\n return Lexer.lexInline(text).map((token, i) => {\n if (token.type === 'link') {\n const href = sanitizeUrl(token.href);\n if (href === 'about:blank') return token.text;\n return (\n <Link key={i} href={href} standalone>\n {token.text}\n </Link>\n );\n }\n return token.raw;\n });\n}\n\n/**\n * A secondary header with title, breadcrumbs, tabs, and actions.\n *\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n const { ownProps, dataAttributes } = useDefinition(HeaderDefinition, props, {\n classNameTarget: 'content',\n });\n const {\n classes,\n title,\n tabs,\n activeTabId,\n customActions,\n breadcrumbs,\n description,\n tags,\n metadata,\n sticky,\n } = ownProps;\n\n const descriptionNodes = useMemo(\n () => (description ? renderInlineMarkdown(description) : null),\n [description],\n );\n\n // The sentinel sits directly before the sticky content and leaves the\n // viewport when the content becomes stuck, letting us toggle stuck styling.\n const stickySentinelRef = useRef<HTMLDivElement>(null);\n const [isStuck, setIsStuck] = useState(false);\n\n useEffect(() => {\n if (!sticky) {\n setIsStuck(false);\n return;\n }\n\n const sentinel = stickySentinelRef.current;\n if (!sentinel) {\n return;\n }\n\n const root = getScrollParent(sentinel);\n\n if (typeof IntersectionObserver === 'undefined') {\n const updateStuckState = () => {\n setIsStuck(isStickySentinelOutOfView(sentinel, root));\n };\n const scrollTarget = root ?? window;\n\n updateStuckState();\n scrollTarget.addEventListener('scroll', updateStuckState, {\n passive: true,\n });\n window.addEventListener('resize', updateStuckState);\n\n return () => {\n scrollTarget.removeEventListener('scroll', updateStuckState);\n window.removeEventListener('resize', updateStuckState);\n };\n }\n\n const observer = new IntersectionObserver(\n ([entry]) => {\n setIsStuck(!entry.isIntersecting);\n },\n { root, threshold: 0 },\n );\n\n observer.observe(sentinel);\n\n return () => {\n observer.disconnect();\n };\n }, [sticky]);\n\n return (\n <>\n <div className={classes.headerTop} data-sticky={sticky || undefined}>\n {tags && tags.length > 0 && (\n <ul className={classes.tags}>\n {tags.map((tag, i) => (\n <li\n key={`${i}:${tag.label}:${tag.href ?? ''}`}\n className={classes.tag}\n >\n {tag.href ? (\n <Link\n href={tag.href}\n variant=\"body-medium\"\n color=\"secondary\"\n standalone\n >\n {tag.label}\n </Link>\n ) : (\n <Text variant=\"body-medium\" color=\"secondary\">\n {tag.label}\n </Text>\n )}\n </li>\n ))}\n </ul>\n )}\n </div>\n {sticky && (\n <div\n ref={stickySentinelRef}\n className={classes.stickySentinel}\n data-sticky=\"\"\n aria-hidden=\"true\"\n />\n )}\n <div\n className={classes.content}\n data-sticky={sticky || undefined}\n data-stuck={isStuck || undefined}\n data-has-tags={tags && tags.length > 0 ? '' : undefined}\n {...dataAttributes}\n >\n <div className={classes.titleStack}>\n {isStuck ? (\n <div className={classes.breadcrumbsSmall}>\n {breadcrumbs &&\n breadcrumbs.map(breadcrumb => (\n <Fragment key={breadcrumb.label}>\n <Link\n href={breadcrumb.href}\n color=\"secondary\"\n className={classes.breadcrumbLinkSmall}\n standalone\n >\n {breadcrumb.label}\n </Link>\n <RiArrowRightSLine\n className={classes.breadcrumbSeparator}\n size={16}\n color=\"var(--bui-fg-secondary)\"\n />\n </Fragment>\n ))}\n <h2 className={classes.titleSmall}>{title}</h2>\n </div>\n ) : (\n <div className={classes.breadcrumbs}>\n {breadcrumbs &&\n breadcrumbs.map(breadcrumb => (\n <Fragment key={breadcrumb.label}>\n <Link\n href={breadcrumb.href}\n color=\"secondary\"\n className={classes.breadcrumbLink}\n standalone\n >\n {breadcrumb.label}\n </Link>\n <RiArrowRightSLine\n className={classes.breadcrumbSeparator}\n size={16}\n color=\"var(--bui-fg-secondary)\"\n />\n </Fragment>\n ))}\n <h2 className={classes.title}>{title}</h2>\n </div>\n )}\n </div>\n <div className={classes.controls}>{customActions}</div>\n </div>\n <div className={classes.headerBottom} data-sticky={sticky || undefined}>\n {description && (\n <Text\n variant=\"body-medium\"\n color=\"secondary\"\n className={classes.description}\n >\n {descriptionNodes}\n </Text>\n )}\n {metadata && metadata.length > 0 && (\n <dl className={classes.metaRow}>\n {metadata.map((item, i) => (\n <div key={`${i}:${item.label}`} className={classes.metaItem}>\n <dt>\n <Text variant=\"body-medium\" color=\"secondary\">\n {item.label}\n </Text>\n </dt>\n <dd>\n {typeof item.value === 'string' ? (\n <Text variant=\"body-medium\">{item.value}</Text>\n ) : (\n item.value\n )}\n </dd>\n </div>\n ))}\n </dl>\n )}\n {tabs && (\n <div className={classes.tabsWrapper}>\n <HeaderNav tabs={tabs} activeTabId={activeTabId} />\n </div>\n )}\n </div>\n </>\n );\n};\n\n/**\n * @public\n * @deprecated Use {@link Header} instead.\n */\nexport const HeaderPage = Header;\n"],"names":["Fragment"],"mappings":"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"}
|
|
@@ -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 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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Header_bui-
|
|
4
|
-
var styles = {"bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Header_bui-HeaderBottom__3fe4f51ce9 {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-3);\n margin-bottom: var(--bui-space-5);\n }\n\n .Header_bui-HeaderTop__3fe4f51ce9,\n .Header_bui-HeaderContent__3fe4f51ce9,\n .Header_bui-HeaderBottom__3fe4f51ce9 {\n width: 100%;\n padding-inline: var(--bui-space-5);\n box-sizing: border-box;\n }\n\n .Header_bui-HeaderTop__3fe4f51ce9 {\n padding-top: var(--bui-space-6);\n }\n\n .Header_bui-HeaderStickySentinel__3fe4f51ce9 {\n height: 1px;\n margin-bottom: -1px;\n pointer-events: none;\n }\n\n .Header_bui-HeaderContent__3fe4f51ce9 {\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n gap: var(--bui-space-3);\n padding-top: var(--bui-space-3);\n padding-bottom: var(--bui-space-3);\n }\n\n .Header_bui-HeaderContent__3fe4f51ce9[data-has-tags] {\n padding-top: var(--bui-space-2);\n }\n\n .Header_bui-HeaderContent__3fe4f51ce9[data-sticky] {\n position: sticky;\n top: 0;\n z-index: 10;\n background-color: var(--bui-bg-app);\n\n &[data-on-bg='neutral-1'] {\n background-color: var(--bui-bg-neutral-1);\n }\n\n &[data-on-bg='neutral-2'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-on-bg='neutral-3'] {\n background-color: var(--bui-bg-neutral-3);\n }\n }\n\n .Header_bui-HeaderContent__3fe4f51ce9[data-sticky]::after {\n position: absolute;\n right: 0;\n bottom: 0;\n left: 0;\n height: 1px;\n content: '';\n background-color: var(--bui-border-1);\n opacity: 0;\n transition: opacity 200ms ease;\n }\n\n .Header_bui-HeaderContent__3fe4f51ce9[data-stuck]::after {\n opacity: 1;\n }\n\n .Header_bui-HeaderTabsWrapper__3fe4f51ce9 {\n margin-left: -8px;\n }\n\n .Header_bui-HeaderControls__3fe4f51ce9 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n flex-shrink: 0;\n }\n\n .Header_bui-HeaderTitleStack__3fe4f51ce9 {\n position: relative;\n flex: 1 1 auto;\n height: 1lh;\n min-width: 0;\n font-size: var(--bui-font-size-6);\n line-height: 140%;\n overflow: hidden;\n }\n\n .Header_bui-HeaderBreadcrumbs__3fe4f51ce9,\n .Header_bui-HeaderBreadcrumbsSmall__3fe4f51ce9 {\n position: absolute;\n inset-inline: 0;\n top: 50%;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n min-width: 0;\n transform: translateY(-50%);\n }\n\n .Header_bui-HeaderBreadcrumbsSmall__3fe4f51ce9 {\n gap: var(--bui-space-1);\n }\n\n .Header_bui-HeaderBreadcrumbs__3fe4f51ce9 .Header_bui-HeaderBreadcrumbLink__3fe4f51ce9,\n .Header_bui-HeaderBreadcrumbsSmall__3fe4f51ce9 .Header_bui-HeaderBreadcrumbLinkSmall__3fe4f51ce9 {\n max-width: 240px;\n overflow: hidden;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n line-height: inherit;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .Header_bui-HeaderBreadcrumbs__3fe4f51ce9 .Header_bui-HeaderBreadcrumbLink__3fe4f51ce9 {\n font-size: inherit;\n }\n\n .Header_bui-HeaderBreadcrumbsSmall__3fe4f51ce9 .Header_bui-HeaderBreadcrumbLinkSmall__3fe4f51ce9 {\n font-size: var(--bui-font-size-4);\n }\n\n .Header_bui-HeaderBreadcrumbSeparator__3fe4f51ce9 {\n flex-shrink: 0;\n }\n\n .Header_bui-HeaderTitle__3fe4f51ce9,\n .Header_bui-HeaderTitleSmall__3fe4f51ce9 {\n margin: 0;\n padding: 0;\n flex: 1 1 auto;\n min-width: 0;\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-bold);\n line-height: inherit;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .Header_bui-HeaderTitle__3fe4f51ce9 {\n font-size: inherit;\n }\n\n .Header_bui-HeaderTitleSmall__3fe4f51ce9 {\n font-size: var(--bui-font-size-4);\n }\n\n .Header_bui-HeaderTags__3fe4f51ce9 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n flex-wrap: wrap;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .Header_bui-HeaderTag__3fe4f51ce9 {\n display: flex;\n align-items: center;\n gap: var(--bui-space-2);\n }\n\n .Header_bui-HeaderTag__3fe4f51ce9 + .Header_bui-HeaderTag__3fe4f51ce9::before {\n content: '';\n width: 3px;\n height: 3px;\n border-radius: 50%;\n background-color: var(--bui-fg-secondary);\n flex-shrink: 0;\n }\n\n .Header_bui-HeaderMetaRow__3fe4f51ce9 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-5);\n flex-wrap: wrap;\n margin: 0;\n }\n\n .Header_bui-HeaderMetaItem__3fe4f51ce9 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n\n dd {\n margin: 0;\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-HeaderBottom":"Header_bui-HeaderBottom__3fe4f51ce9","bui-HeaderTop":"Header_bui-HeaderTop__3fe4f51ce9","bui-HeaderContent":"Header_bui-HeaderContent__3fe4f51ce9","bui-HeaderStickySentinel":"Header_bui-HeaderStickySentinel__3fe4f51ce9","bui-HeaderTabsWrapper":"Header_bui-HeaderTabsWrapper__3fe4f51ce9","bui-HeaderControls":"Header_bui-HeaderControls__3fe4f51ce9","bui-HeaderTitleStack":"Header_bui-HeaderTitleStack__3fe4f51ce9","bui-HeaderBreadcrumbs":"Header_bui-HeaderBreadcrumbs__3fe4f51ce9","bui-HeaderBreadcrumbsSmall":"Header_bui-HeaderBreadcrumbsSmall__3fe4f51ce9","bui-HeaderBreadcrumbLink":"Header_bui-HeaderBreadcrumbLink__3fe4f51ce9","bui-HeaderBreadcrumbLinkSmall":"Header_bui-HeaderBreadcrumbLinkSmall__3fe4f51ce9","bui-HeaderBreadcrumbSeparator":"Header_bui-HeaderBreadcrumbSeparator__3fe4f51ce9","bui-HeaderTitle":"Header_bui-HeaderTitle__3fe4f51ce9","bui-HeaderTitleSmall":"Header_bui-HeaderTitleSmall__3fe4f51ce9","bui-HeaderTags":"Header_bui-HeaderTags__3fe4f51ce9","bui-HeaderTag":"Header_bui-HeaderTag__3fe4f51ce9","bui-HeaderMetaRow":"Header_bui-HeaderMetaRow__3fe4f51ce9","bui-HeaderMetaItem":"Header_bui-HeaderMetaItem__3fe4f51ce9"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Text } from '../Text/Text.esm.js';
|
|
3
|
+
import 'clsx';
|
|
4
|
+
import '../../hooks/useBreakpoint.esm.js';
|
|
5
|
+
import '../../hooks/useBg.esm.js';
|
|
6
|
+
import '../../hooks/useDefinition/helpers.esm.js';
|
|
7
|
+
import '../../analytics/useAnalytics.esm.js';
|
|
8
|
+
import 'react-router-dom';
|
|
9
|
+
import '../Text/Text.module.css.esm.js';
|
|
10
|
+
import { Link } from '../Link/Link.esm.js';
|
|
11
|
+
import '../Link/Link.module.css.esm.js';
|
|
12
|
+
import styles from './HeaderMetadataStatus.module.css.esm.js';
|
|
13
|
+
|
|
14
|
+
const HeaderMetadataStatus = ({
|
|
15
|
+
label,
|
|
16
|
+
color,
|
|
17
|
+
href
|
|
18
|
+
}) => {
|
|
19
|
+
return /* @__PURE__ */ jsxs("div", { className: styles.single, children: [
|
|
20
|
+
/* @__PURE__ */ jsx(
|
|
21
|
+
"span",
|
|
22
|
+
{
|
|
23
|
+
"aria-hidden": "true",
|
|
24
|
+
className: `${styles.dot} ${styles[`dot-${color}`]}`
|
|
25
|
+
}
|
|
26
|
+
),
|
|
27
|
+
/* @__PURE__ */ jsx(Text, { variant: "body-medium", children: href ? /* @__PURE__ */ jsx(Link, { href, standalone: true, children: label }) : label })
|
|
28
|
+
] });
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export { HeaderMetadataStatus };
|
|
32
|
+
//# sourceMappingURL=HeaderMetadataStatus.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeaderMetadataStatus.esm.js","sources":["../../../src/components/Header/HeaderMetadataStatus.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 type { HeaderMetadataStatusProps } from './types';\nimport { Text } from '../Text';\nimport { Link } from '../Link';\nimport styles from './HeaderMetadataStatus.module.css';\n\n/**\n * Displays a single status indicator as a coloured dot with a label inside a\n * Header metadata value. Optionally renders the label as a link when href is provided.\n *\n * @public\n */\nexport const HeaderMetadataStatus = ({\n label,\n color,\n href,\n}: HeaderMetadataStatusProps) => {\n return (\n <div className={styles.single}>\n <span\n aria-hidden=\"true\"\n className={`${styles.dot} ${styles[`dot-${color}`]}`}\n />\n <Text variant=\"body-medium\">\n {href ? (\n <Link href={href} standalone>\n {label}\n </Link>\n ) : (\n label\n )}\n </Text>\n </div>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;AA2BO,MAAM,uBAAuB,CAAC;AAAA,EACnC,KAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,KAAiC;AAC/B,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,MAAA,EACrB,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,aAAA,EAAY,MAAA;AAAA,QACZ,SAAA,EAAW,GAAG,MAAA,CAAO,GAAG,IAAI,MAAA,CAAO,CAAA,IAAA,EAAO,KAAK,CAAA,CAAE,CAAC,CAAA;AAAA;AAAA,KACpD;AAAA,oBACA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,aAAA,EACX,QAAA,EAAA,IAAA,mBACC,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAY,UAAA,EAAU,IAAA,EACzB,QAAA,EAAA,KAAA,EACH,CAAA,GAEA,KAAA,EAEJ;AAAA,GAAA,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -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 .HeaderMetadataStatus_single__eb0b2e23ff {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n }\n\n .HeaderMetadataStatus_dot__eb0b2e23ff {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n flex-shrink: 0;\n }\n\n .HeaderMetadataStatus_dot-danger__eb0b2e23ff {\n background-color: var(--bui-fg-danger);\n }\n\n .HeaderMetadataStatus_dot-warning__eb0b2e23ff {\n background-color: var(--bui-fg-warning);\n }\n\n .HeaderMetadataStatus_dot-success__eb0b2e23ff {\n background-color: var(--bui-fg-success);\n }\n\n .HeaderMetadataStatus_dot-info__eb0b2e23ff {\n background-color: var(--bui-fg-info);\n }\n}\n";
|
|
4
|
+
var styles = {"single":"HeaderMetadataStatus_single__eb0b2e23ff","dot":"HeaderMetadataStatus_dot__eb0b2e23ff","dot-danger":"HeaderMetadataStatus_dot-danger__eb0b2e23ff","dot-warning":"HeaderMetadataStatus_dot-warning__eb0b2e23ff","dot-success":"HeaderMetadataStatus_dot-success__eb0b2e23ff","dot-info":"HeaderMetadataStatus_dot-info__eb0b2e23ff"};
|
|
5
|
+
styleInject(css_248z);
|
|
6
|
+
|
|
7
|
+
export { styles as default };
|
|
8
|
+
//# sourceMappingURL=HeaderMetadataStatus.module.css.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeaderMetadataStatus.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -0,0 +1,92 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { Avatar } from '../Avatar/Avatar.esm.js';
|
|
3
|
+
import 'clsx';
|
|
4
|
+
import '../../hooks/useBreakpoint.esm.js';
|
|
5
|
+
import '../../hooks/useBg.esm.js';
|
|
6
|
+
import '../../hooks/useDefinition/helpers.esm.js';
|
|
7
|
+
import '../../analytics/useAnalytics.esm.js';
|
|
8
|
+
import 'react-router-dom';
|
|
9
|
+
import '../Avatar/Avatar.module.css.esm.js';
|
|
10
|
+
import { TooltipTrigger, Tooltip } from '../Tooltip/Tooltip.esm.js';
|
|
11
|
+
import '../Tooltip/Tooltip.module.css.esm.js';
|
|
12
|
+
import { Text } from '../Text/Text.esm.js';
|
|
13
|
+
import '../Text/Text.module.css.esm.js';
|
|
14
|
+
import { Link } from '../Link/Link.esm.js';
|
|
15
|
+
import '../Link/Link.module.css.esm.js';
|
|
16
|
+
import { Pressable } from 'react-aria';
|
|
17
|
+
import styles from './HeaderMetadataUsers.module.css.esm.js';
|
|
18
|
+
|
|
19
|
+
const HeaderMetadataUsers = ({
|
|
20
|
+
users
|
|
21
|
+
}) => {
|
|
22
|
+
if (users.length === 0) return null;
|
|
23
|
+
if (users.length === 1) {
|
|
24
|
+
const user = users[0];
|
|
25
|
+
if (user.href) {
|
|
26
|
+
return /* @__PURE__ */ jsxs(
|
|
27
|
+
Link,
|
|
28
|
+
{
|
|
29
|
+
href: user.href,
|
|
30
|
+
variant: "body-medium",
|
|
31
|
+
standalone: true,
|
|
32
|
+
className: styles.single,
|
|
33
|
+
children: [
|
|
34
|
+
/* @__PURE__ */ jsx(
|
|
35
|
+
Avatar,
|
|
36
|
+
{
|
|
37
|
+
src: user.src ?? "data:,",
|
|
38
|
+
name: user.name,
|
|
39
|
+
size: "small",
|
|
40
|
+
purpose: "decoration"
|
|
41
|
+
}
|
|
42
|
+
),
|
|
43
|
+
user.name
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
return /* @__PURE__ */ jsxs("div", { className: styles.single, children: [
|
|
49
|
+
/* @__PURE__ */ jsx(
|
|
50
|
+
Avatar,
|
|
51
|
+
{
|
|
52
|
+
src: user.src ?? "data:,",
|
|
53
|
+
name: user.name,
|
|
54
|
+
size: "small",
|
|
55
|
+
purpose: "decoration"
|
|
56
|
+
}
|
|
57
|
+
),
|
|
58
|
+
/* @__PURE__ */ jsx(Text, { variant: "body-medium", children: user.name })
|
|
59
|
+
] });
|
|
60
|
+
}
|
|
61
|
+
return /* @__PURE__ */ jsx("ul", { className: styles.stack, children: users.map((user, i) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(TooltipTrigger, { children: [
|
|
62
|
+
user.href ? /* @__PURE__ */ jsx(
|
|
63
|
+
Link,
|
|
64
|
+
{
|
|
65
|
+
href: user.href,
|
|
66
|
+
"aria-label": user.name,
|
|
67
|
+
className: styles.avatarLink,
|
|
68
|
+
children: /* @__PURE__ */ jsx(
|
|
69
|
+
Avatar,
|
|
70
|
+
{
|
|
71
|
+
src: user.src ?? "data:,",
|
|
72
|
+
name: user.name,
|
|
73
|
+
size: "small",
|
|
74
|
+
purpose: "decoration"
|
|
75
|
+
}
|
|
76
|
+
)
|
|
77
|
+
}
|
|
78
|
+
) : /* @__PURE__ */ jsx(Pressable, { children: /* @__PURE__ */ jsx(
|
|
79
|
+
Avatar,
|
|
80
|
+
{
|
|
81
|
+
src: user.src ?? "data:,",
|
|
82
|
+
name: user.name,
|
|
83
|
+
size: "small",
|
|
84
|
+
purpose: "informative"
|
|
85
|
+
}
|
|
86
|
+
) }),
|
|
87
|
+
/* @__PURE__ */ jsx(Tooltip, { children: user.name })
|
|
88
|
+
] }) }, user.href ?? `${i}:${user.name}`)) });
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
export { HeaderMetadataUsers };
|
|
92
|
+
//# sourceMappingURL=HeaderMetadataUsers.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeaderMetadataUsers.esm.js","sources":["../../../src/components/Header/HeaderMetadataUsers.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 type { HeaderMetadataUser } from './types';\nimport { Avatar } from '../Avatar';\nimport { Tooltip, TooltipTrigger } from '../Tooltip';\nimport { Text } from '../Text';\nimport { Link } from '../Link';\nimport { Pressable } from 'react-aria';\nimport styles from './HeaderMetadataUsers.module.css';\n\n/**\n * Displays a list of users as avatars inside a Header metadata value.\n * A single user shows the avatar with their name beside it.\n * Multiple users show avatars in a row with the name revealed on hover via tooltip.\n * When a user has an `href`, the avatar and name become links.\n *\n * @public\n */\nexport const HeaderMetadataUsers = ({\n users,\n}: {\n users: HeaderMetadataUser[];\n}) => {\n if (users.length === 0) return null;\n\n if (users.length === 1) {\n const user = users[0];\n if (user.href) {\n return (\n <Link\n href={user.href}\n variant=\"body-medium\"\n standalone\n className={styles.single}\n >\n <Avatar\n src={user.src ?? 'data:,'}\n name={user.name}\n size=\"small\"\n purpose=\"decoration\"\n />\n {user.name}\n </Link>\n );\n }\n\n return (\n <div className={styles.single}>\n <Avatar\n src={user.src ?? 'data:,'}\n name={user.name}\n size=\"small\"\n purpose=\"decoration\"\n />\n <Text variant=\"body-medium\">{user.name}</Text>\n </div>\n );\n }\n\n return (\n <ul className={styles.stack}>\n {users.map((user, i) => (\n <li key={user.href ?? `${i}:${user.name}`}>\n <TooltipTrigger>\n {user.href ? (\n <Link\n href={user.href}\n aria-label={user.name}\n className={styles.avatarLink}\n >\n <Avatar\n src={user.src ?? 'data:,'}\n name={user.name}\n size=\"small\"\n purpose=\"decoration\"\n />\n </Link>\n ) : (\n <Pressable>\n <Avatar\n src={user.src ?? 'data:,'}\n name={user.name}\n size=\"small\"\n purpose=\"informative\"\n />\n </Pressable>\n )}\n <Tooltip>{user.name}</Tooltip>\n </TooltipTrigger>\n </li>\n ))}\n </ul>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAgCO,MAAM,sBAAsB,CAAC;AAAA,EAClC;AACF,CAAA,KAEM;AACJ,EAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAE/B,EAAA,IAAI,KAAA,CAAM,WAAW,CAAA,EAAG;AACtB,IAAA,MAAM,IAAA,GAAO,MAAM,CAAC,CAAA;AACpB,IAAA,IAAI,KAAK,IAAA,EAAM;AACb,MAAA,uBACE,IAAA;AAAA,QAAC,IAAA;AAAA,QAAA;AAAA,UACC,MAAM,IAAA,CAAK,IAAA;AAAA,UACX,OAAA,EAAQ,aAAA;AAAA,UACR,UAAA,EAAU,IAAA;AAAA,UACV,WAAW,MAAA,CAAO,MAAA;AAAA,UAElB,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBACC,GAAA,EAAK,KAAK,GAAA,IAAO,QAAA;AAAA,gBACjB,MAAM,IAAA,CAAK,IAAA;AAAA,gBACX,IAAA,EAAK,OAAA;AAAA,gBACL,OAAA,EAAQ;AAAA;AAAA,aACV;AAAA,YACC,IAAA,CAAK;AAAA;AAAA;AAAA,OACR;AAAA,IAEJ;AAEA,IAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,MAAA,CAAO,MAAA,EACrB,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,GAAA,EAAK,KAAK,GAAA,IAAO,QAAA;AAAA,UACjB,MAAM,IAAA,CAAK,IAAA;AAAA,UACX,IAAA,EAAK,OAAA;AAAA,UACL,OAAA,EAAQ;AAAA;AAAA,OACV;AAAA,sBACA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,aAAA,EAAe,eAAK,IAAA,EAAK;AAAA,KAAA,EACzC,CAAA;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,IAAA,EAAA,EAAG,SAAA,EAAW,MAAA,CAAO,KAAA,EACnB,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,CAAA,qBAChB,GAAA,CAAC,IAAA,EAAA,EACC,+BAAC,cAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,IAAA,CAAK,IAAA,mBACJ,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,MAAM,IAAA,CAAK,IAAA;AAAA,QACX,cAAY,IAAA,CAAK,IAAA;AAAA,QACjB,WAAW,MAAA,CAAO,UAAA;AAAA,QAElB,QAAA,kBAAA,GAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,GAAA,EAAK,KAAK,GAAA,IAAO,QAAA;AAAA,YACjB,MAAM,IAAA,CAAK,IAAA;AAAA,YACX,IAAA,EAAK,OAAA;AAAA,YACL,OAAA,EAAQ;AAAA;AAAA;AACV;AAAA,KACF,uBAEC,SAAA,EAAA,EACC,QAAA,kBAAA,GAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,KAAK,GAAA,IAAO,QAAA;AAAA,QACjB,MAAM,IAAA,CAAK,IAAA;AAAA,QACX,IAAA,EAAK,OAAA;AAAA,QACL,OAAA,EAAQ;AAAA;AAAA,KACV,EACF,CAAA;AAAA,oBAEF,GAAA,CAAC,OAAA,EAAA,EAAS,QAAA,EAAA,IAAA,CAAK,IAAA,EAAK;AAAA,GAAA,EACtB,CAAA,EAAA,EA1BO,IAAA,CAAK,IAAA,IAAQ,CAAA,EAAG,CAAC,IAAI,IAAA,CAAK,IAAI,CAAA,CA2BvC,CACD,CAAA,EACH,CAAA;AAEJ;;;;"}
|
|
@@ -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 .HeaderMetadataUsers_single__24e14a3de1 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n }\n\n .HeaderMetadataUsers_stack__24e14a3de1 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-1);\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n .HeaderMetadataUsers_avatarLink__24e14a3de1 {\n display: flex;\n text-decoration: none;\n }\n}\n";
|
|
4
|
+
var styles = {"single":"HeaderMetadataUsers_single__24e14a3de1","stack":"HeaderMetadataUsers_stack__24e14a3de1","avatarLink":"HeaderMetadataUsers_avatarLink__24e14a3de1"};
|
|
5
|
+
styleInject(css_248z);
|
|
6
|
+
|
|
7
|
+
export { styles as default };
|
|
8
|
+
//# sourceMappingURL=HeaderMetadataUsers.module.css.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"HeaderMetadataUsers.module.css.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}
|
|
@@ -10,12 +10,27 @@ import styles from './Header.module.css.esm.js';
|
|
|
10
10
|
|
|
11
11
|
const HeaderDefinition = defineComponent()({
|
|
12
12
|
styles,
|
|
13
|
+
bg: "consumer",
|
|
13
14
|
classNames: {
|
|
14
|
-
|
|
15
|
+
headerTop: "bui-HeaderTop",
|
|
16
|
+
stickySentinel: "bui-HeaderStickySentinel",
|
|
15
17
|
content: "bui-HeaderContent",
|
|
18
|
+
headerBottom: "bui-HeaderBottom",
|
|
16
19
|
breadcrumbs: "bui-HeaderBreadcrumbs",
|
|
20
|
+
breadcrumbsSmall: "bui-HeaderBreadcrumbsSmall",
|
|
21
|
+
breadcrumbLink: "bui-HeaderBreadcrumbLink",
|
|
22
|
+
breadcrumbLinkSmall: "bui-HeaderBreadcrumbLinkSmall",
|
|
23
|
+
breadcrumbSeparator: "bui-HeaderBreadcrumbSeparator",
|
|
24
|
+
titleStack: "bui-HeaderTitleStack",
|
|
25
|
+
title: "bui-HeaderTitle",
|
|
26
|
+
titleSmall: "bui-HeaderTitleSmall",
|
|
17
27
|
tabsWrapper: "bui-HeaderTabsWrapper",
|
|
18
|
-
controls: "bui-HeaderControls"
|
|
28
|
+
controls: "bui-HeaderControls",
|
|
29
|
+
tags: "bui-HeaderTags",
|
|
30
|
+
tag: "bui-HeaderTag",
|
|
31
|
+
description: "bui-HeaderDescription",
|
|
32
|
+
metaRow: "bui-HeaderMetaRow",
|
|
33
|
+
metaItem: "bui-HeaderMetaItem"
|
|
19
34
|
},
|
|
20
35
|
propDefs: {
|
|
21
36
|
title: {},
|
|
@@ -23,7 +38,11 @@ const HeaderDefinition = defineComponent()({
|
|
|
23
38
|
tabs: {},
|
|
24
39
|
activeTabId: {},
|
|
25
40
|
breadcrumbs: {},
|
|
26
|
-
|
|
41
|
+
description: {},
|
|
42
|
+
tags: {},
|
|
43
|
+
metadata: {},
|
|
44
|
+
className: {},
|
|
45
|
+
sticky: {}
|
|
27
46
|
}
|
|
28
47
|
});
|
|
29
48
|
const HeaderPageDefinition = HeaderDefinition;
|
|
@@ -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
|
|
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 bg: 'consumer',\n classNames: {\n headerTop: 'bui-HeaderTop',\n stickySentinel: 'bui-HeaderStickySentinel',\n content: 'bui-HeaderContent',\n headerBottom: 'bui-HeaderBottom',\n breadcrumbs: 'bui-HeaderBreadcrumbs',\n breadcrumbsSmall: 'bui-HeaderBreadcrumbsSmall',\n breadcrumbLink: 'bui-HeaderBreadcrumbLink',\n breadcrumbLinkSmall: 'bui-HeaderBreadcrumbLinkSmall',\n breadcrumbSeparator: 'bui-HeaderBreadcrumbSeparator',\n titleStack: 'bui-HeaderTitleStack',\n title: 'bui-HeaderTitle',\n titleSmall: 'bui-HeaderTitleSmall',\n tabsWrapper: 'bui-HeaderTabsWrapper',\n controls: 'bui-HeaderControls',\n tags: 'bui-HeaderTags',\n tag: 'bui-HeaderTag',\n description: 'bui-HeaderDescription',\n metaRow: 'bui-HeaderMetaRow',\n metaItem: 'bui-HeaderMetaItem',\n },\n propDefs: {\n title: {},\n customActions: {},\n tabs: {},\n activeTabId: {},\n breadcrumbs: {},\n description: {},\n tags: {},\n metadata: {},\n className: {},\n sticky: {},\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,EAAA,EAAI,UAAA;AAAA,EACJ,UAAA,EAAY;AAAA,IACV,SAAA,EAAW,eAAA;AAAA,IACX,cAAA,EAAgB,0BAAA;AAAA,IAChB,OAAA,EAAS,mBAAA;AAAA,IACT,YAAA,EAAc,kBAAA;AAAA,IACd,WAAA,EAAa,uBAAA;AAAA,IACb,gBAAA,EAAkB,4BAAA;AAAA,IAClB,cAAA,EAAgB,0BAAA;AAAA,IAChB,mBAAA,EAAqB,+BAAA;AAAA,IACrB,mBAAA,EAAqB,+BAAA;AAAA,IACrB,UAAA,EAAY,sBAAA;AAAA,IACZ,KAAA,EAAO,iBAAA;AAAA,IACP,UAAA,EAAY,sBAAA;AAAA,IACZ,WAAA,EAAa,uBAAA;AAAA,IACb,QAAA,EAAU,oBAAA;AAAA,IACV,IAAA,EAAM,gBAAA;AAAA,IACN,GAAA,EAAK,eAAA;AAAA,IACL,WAAA,EAAa,uBAAA;AAAA,IACb,OAAA,EAAS,mBAAA;AAAA,IACT,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,aAAa,EAAC;AAAA,IACd,MAAM,EAAC;AAAA,IACP,UAAU,EAAC;AAAA,IACX,WAAW,EAAC;AAAA,IACZ,QAAQ;AAAC;AAEb,CAAC;AAMM,MAAM,oBAAA,GAAuB;;;;"}
|
|
@@ -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 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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Select_bui-
|
|
4
|
-
var styles = {"bui-Select":"Select_bui-
|
|
3
|
+
var css_248z = "/*\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\n@layer tokens, base, components, utilities;\n\n@layer components {\n .Select_bui-Select__5d73c6077a,\n .Select_bui-SelectPopover__5d73c6077a {\n &[data-size='small'] {\n --select-item-height: 2rem;\n }\n\n &[data-size='medium'] {\n --select-item-height: 2.5rem;\n }\n }\n\n .Select_bui-SelectPopover__5d73c6077a {\n min-width: var(--trigger-width);\n }\n\n .Select_bui-SelectTrigger__5d73c6077a {\n box-sizing: border-box;\n border-radius: var(--bui-radius-3);\n border: none;\n outline: none;\n background-color: var(--bui-bg-neutral-1);\n transition: box-shadow 0.2s ease-in-out;\n\n &[data-on-bg='neutral-1'] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-on-bg='neutral-2'] {\n background-color: var(--bui-bg-neutral-3);\n }\n\n &[data-on-bg='neutral-3'] {\n background-color: var(--bui-bg-neutral-4);\n }\n\n .Select_bui-Select__5d73c6077a[data-focused] & {\n box-shadow: inset 0 0 0 1px var(--bui-ring);\n }\n display: flex;\n justify-content: space-between;\n align-items: center;\n cursor: pointer;\n gap: var(--bui-space-2);\n width: 100%;\n height: var(--select-item-height);\n\n .Select_bui-Select__5d73c6077a[data-size='small'] & {\n padding-inline: var(--bui-space-3) 0;\n }\n\n .Select_bui-Select__5d73c6077a[data-size='medium'] & {\n padding-inline: var(--bui-space-4) 0;\n }\n\n & svg {\n flex-shrink: 0;\n color: var(--bui-fg-secondary);\n\n .Select_bui-Select__5d73c6077a[data-size='small'] & {\n width: 1rem;\n height: 1rem;\n }\n\n .Select_bui-Select__5d73c6077a[data-size='medium'] & {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n .Select_bui-Select__5d73c6077a[data-invalid] & {\n box-shadow: inset 0 0 0 1px var(--bui-border-danger);\n }\n\n &[disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n }\n }\n\n .Select_bui-SelectTriggerChevron__5d73c6077a {\n display: grid;\n place-content: center;\n width: var(--select-item-height);\n height: var(--select-item-height);\n flex-shrink: 0;\n flex-grow: 0;\n }\n\n .Select_bui-SelectValue__5d73c6077a {\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n width: 100%;\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n color: var(--bui-fg-primary);\n text-align: left;\n\n & .Select_bui-SelectItemIndicator__5d73c6077a {\n display: none;\n }\n\n &[disabled] {\n color: var(--bui-fg-disabled);\n }\n }\n\n .Select_bui-SelectList__5d73c6077a {\n overflow: auto;\n min-height: 0;\n padding-block: var(--bui-space-1);\n padding-inline: var(--bui-space-1);\n\n &[data-focus-visible] {\n /* Remove default focus-visible outline because React Aria\n * triggers it on mouse click open of the list for some reason.\n * On keyboard use, the top item receives the focus style,\n * so it's not needed anyway. */\n outline: none;\n }\n }\n\n .Select_bui-SelectItem__5d73c6077a {\n box-sizing: border-box;\n position: relative;\n display: grid;\n grid-template-areas: 'icon text';\n grid-template-columns: 1rem 1fr;\n align-items: center;\n min-height: var(--select-item-height);\n padding-block: var(--bui-space-1);\n padding-left: var(--bui-space-3);\n padding-right: var(--bui-space-4);\n color: var(--bui-fg-primary);\n cursor: pointer;\n user-select: none;\n font-size: var(--bui-font-size-3);\n gap: var(--bui-space-2);\n outline: none;\n border-radius: var(--bui-radius-2);\n\n &[data-focused] {\n background-color: var(--bui-bg-neutral-2);\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n }\n\n &[data-selected] .Select_bui-SelectItemIndicator__5d73c6077a {\n opacity: 1;\n }\n }\n\n .Select_bui-SelectItemIndicator__5d73c6077a {\n grid-area: icon;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 0.2s ease-in-out;\n }\n\n .Select_bui-SelectItemLabel__5d73c6077a {\n flex: 1;\n grid-area: text;\n }\n\n .Select_bui-SelectSearchWrapper__5d73c6077a {\n flex-shrink: 0;\n margin-bottom: var(--bui-space-1);\n display: flex;\n align-items: center;\n padding-inline: var(--bui-space-3) 0;\n border-bottom: 1px solid var(--bui-border-2);\n }\n\n .Select_bui-SelectSearch__5d73c6077a {\n border: none;\n background-color: transparent;\n padding: 0;\n color: var(--bui-fg-primary);\n flex: 1;\n outline: none;\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n height: var(--select-item-height);\n line-height: var(--select-item-height);\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n /* Hide native browser clear button */\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n }\n\n .Select_bui-SelectSearchClear__5d73c6077a {\n flex: 0 0 auto;\n display: grid;\n place-content: center;\n background-color: transparent;\n border: none;\n padding: 0;\n margin: 0;\n cursor: pointer;\n color: var(--bui-fg-secondary);\n transition: color 0.2s ease-in-out;\n width: var(--select-item-height);\n height: var(--select-item-height);\n\n input:placeholder-shown + & {\n display: none;\n }\n\n &:hover {\n color: var(--bui-fg-primary);\n }\n\n & svg {\n width: 1rem;\n height: 1rem;\n }\n }\n\n .Select_bui-SelectSection__5d73c6077a {\n &:first-child .Select_bui-SelectSectionHeader__5d73c6077a {\n padding-top: 0;\n }\n }\n\n .Select_bui-SelectSectionHeader__5d73c6077a {\n height: 2rem;\n display: flex;\n align-items: center;\n padding-top: var(--bui-space-3);\n padding-left: var(--bui-space-3);\n color: var(--bui-fg-primary);\n font-size: var(--bui-font-size-1);\n font-weight: bold;\n letter-spacing: 0.05rem;\n text-transform: uppercase;\n }\n\n .Select_bui-SelectNoResults__5d73c6077a {\n padding-inline: var(--bui-space-3);\n padding-block: var(--bui-space-2);\n color: var(--bui-fg-secondary);\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Select":"Select_bui-Select__5d73c6077a","bui-SelectPopover":"Select_bui-SelectPopover__5d73c6077a","bui-SelectTrigger":"Select_bui-SelectTrigger__5d73c6077a","bui-SelectTriggerChevron":"Select_bui-SelectTriggerChevron__5d73c6077a","bui-SelectValue":"Select_bui-SelectValue__5d73c6077a","bui-SelectItemIndicator":"Select_bui-SelectItemIndicator__5d73c6077a","bui-SelectList":"Select_bui-SelectList__5d73c6077a","bui-SelectItem":"Select_bui-SelectItem__5d73c6077a","bui-SelectItemLabel":"Select_bui-SelectItemLabel__5d73c6077a","bui-SelectSearchWrapper":"Select_bui-SelectSearchWrapper__5d73c6077a","bui-SelectSearch":"Select_bui-SelectSearch__5d73c6077a","bui-SelectSearchClear":"Select_bui-SelectSearchClear__5d73c6077a","bui-SelectSection":"Select_bui-SelectSection__5d73c6077a","bui-SelectSectionHeader":"Select_bui-SelectSectionHeader__5d73c6077a","bui-SelectNoResults":"Select_bui-SelectNoResults__5d73c6077a"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectContent.esm.js","sources":["../../../src/components/Select/SelectContent.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n Input,\n SearchField,\n Autocomplete,\n Button,\n} from 'react-aria-components';\nimport { useFilter } from 'react-aria';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectContentDefinition } from './definition';\nimport { SelectListBox } from './SelectListBox';\nimport type {
|
|
1
|
+
{"version":3,"file":"SelectContent.esm.js","sources":["../../../src/components/Select/SelectContent.tsx"],"sourcesContent":["/*\n * Copyright 2025 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport {\n Input,\n SearchField,\n Autocomplete,\n Button,\n} from 'react-aria-components';\nimport { useFilter } from 'react-aria';\nimport { RiCloseCircleLine } from '@remixicon/react';\nimport { useDefinition } from '../../hooks/useDefinition';\nimport { SelectContentDefinition } from './definition';\nimport { SelectListBox } from './SelectListBox';\nimport type { SelectOwnProps } from './types';\n\ninterface SelectContentProps {\n searchable?: boolean;\n searchPlaceholder?: string;\n options?: SelectOwnProps['options'];\n}\n\nexport function SelectContent(props: SelectContentProps) {\n const { contains } = useFilter({ sensitivity: 'base' });\n const { ownProps } = useDefinition(SelectContentDefinition, props);\n const { classes, searchable, searchPlaceholder, options } = ownProps;\n\n if (!searchable) {\n return <SelectListBox options={options} />;\n }\n\n return (\n <Autocomplete filter={contains}>\n <SearchField\n autoFocus\n className={classes.root}\n aria-label={searchPlaceholder}\n >\n <Input placeholder={searchPlaceholder} className={classes.search} />\n <Button className={classes.searchClear}>\n <RiCloseCircleLine />\n </Button>\n </SearchField>\n <SelectListBox options={options} />\n </Autocomplete>\n );\n}\n"],"names":[],"mappings":";;;;;;;;AAmCO,SAAS,cAAc,KAAA,EAA2B;AACvD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,UAAU,EAAE,WAAA,EAAa,QAAQ,CAAA;AACtD,EAAA,MAAM,EAAE,QAAA,EAAS,GAAI,aAAA,CAAc,yBAAyB,KAAK,CAAA;AACjE,EAAA,MAAM,EAAE,OAAA,EAAS,UAAA,EAAY,iBAAA,EAAmB,SAAQ,GAAI,QAAA;AAE5D,EAAA,IAAI,CAAC,UAAA,EAAY;AACf,IAAA,uBAAO,GAAA,CAAC,iBAAc,OAAA,EAAkB,CAAA;AAAA,EAC1C;AAEA,EAAA,uBACE,IAAA,CAAC,YAAA,EAAA,EAAa,MAAA,EAAQ,QAAA,EACpB,QAAA,EAAA;AAAA,oBAAA,IAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAS,IAAA;AAAA,QACT,WAAW,OAAA,CAAQ,IAAA;AAAA,QACnB,YAAA,EAAY,iBAAA;AAAA,QAEZ,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,KAAA,EAAA,EAAM,WAAA,EAAa,iBAAA,EAAmB,SAAA,EAAW,QAAQ,MAAA,EAAQ,CAAA;AAAA,8BACjE,MAAA,EAAA,EAAO,SAAA,EAAW,QAAQ,WAAA,EACzB,QAAA,kBAAA,GAAA,CAAC,qBAAkB,CAAA,EACrB;AAAA;AAAA;AAAA,KACF;AAAA,oBACA,GAAA,CAAC,iBAAc,OAAA,EAAkB;AAAA,GAAA,EACnC,CAAA;AAEJ;;;;"}
|