@backstage/ui 0.8.2 → 0.9.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 +80 -7
- package/dist/components/Checkbox/Checkbox.esm.js +16 -18
- package/dist/components/Checkbox/Checkbox.esm.js.map +1 -1
- package/dist/components/Checkbox/Checkbox.module.css.esm.js +2 -2
- package/dist/components/FieldLabel/FieldLabel.esm.js +10 -2
- package/dist/components/FieldLabel/FieldLabel.esm.js.map +1 -1
- package/dist/components/Header/Header.esm.js +11 -2
- package/dist/components/Header/Header.esm.js.map +1 -1
- package/dist/components/Header/HeaderToolbar.esm.js +6 -2
- package/dist/components/Header/HeaderToolbar.esm.js.map +1 -1
- package/dist/components/HeaderPage/HeaderPage.esm.js +56 -50
- package/dist/components/HeaderPage/HeaderPage.esm.js.map +1 -1
- package/dist/components/Menu/Menu.esm.js +46 -12
- package/dist/components/Menu/Menu.esm.js.map +1 -1
- package/dist/components/Skeleton/Skeleton.esm.js +2 -2
- package/dist/components/Skeleton/Skeleton.esm.js.map +1 -1
- package/dist/components/Switch/Switch.esm.js +2 -2
- package/dist/components/Switch/Switch.esm.js.map +1 -1
- package/dist/components/TablePagination/TablePagination.esm.js +3 -33
- package/dist/components/TablePagination/TablePagination.esm.js.map +1 -1
- package/dist/components/Tabs/Tabs.esm.js +9 -7
- package/dist/components/Tabs/Tabs.esm.js.map +1 -1
- package/dist/components/VisuallyHidden/VisuallyHidden.esm.js +19 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.esm.js.map +1 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.module.css.esm.js +8 -0
- package/dist/components/VisuallyHidden/VisuallyHidden.module.css.esm.js.map +1 -0
- package/dist/index.d.ts +39 -22
- package/dist/index.esm.js +1 -0
- package/dist/index.esm.js.map +1 -1
- package/dist/utils/componentDefinitions.esm.js +7 -3
- package/dist/utils/componentDefinitions.esm.js.map +1 -1
- package/package.json +5 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,19 +1,92 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
-
## 0.
|
|
3
|
+
## 0.9.0-next.1
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 5c614ff: **BREAKING**: Migrated Checkbox component from Base UI to React Aria Components.
|
|
8
|
+
|
|
9
|
+
API changes required:
|
|
10
|
+
|
|
11
|
+
- `checked` → `isSelected`
|
|
12
|
+
- `defaultChecked` → `defaultSelected`
|
|
13
|
+
- `disabled` → `isDisabled`
|
|
14
|
+
- `required` → `isRequired`
|
|
15
|
+
- `label` prop removed - use `children` instead
|
|
16
|
+
- CSS: `bui-CheckboxLabel` class removed
|
|
17
|
+
- Data attribute: `data-checked` → `data-selected`
|
|
18
|
+
- Use without label is no longer supported
|
|
19
|
+
|
|
20
|
+
Migration examples:
|
|
21
|
+
|
|
22
|
+
Before:
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
<Checkbox label="Accept terms" checked={agreed} onChange={setAgreed} />
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
After:
|
|
29
|
+
|
|
30
|
+
```tsx
|
|
31
|
+
<Checkbox isSelected={agreed} onChange={setAgreed}>
|
|
32
|
+
Accept terms
|
|
33
|
+
</Checkbox>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
Before:
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
<Checkbox label="Option" disabled />
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
After:
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
<Checkbox isDisabled>Option</Checkbox>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
Before:
|
|
49
|
+
|
|
50
|
+
```tsx
|
|
51
|
+
<Checkbox />
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
After:
|
|
55
|
+
|
|
56
|
+
```tsx
|
|
57
|
+
<Checkbox>
|
|
58
|
+
<VisuallyHidden>Accessible label</VisuallyHidden>
|
|
59
|
+
</Checkbox>
|
|
60
|
+
```
|
|
61
|
+
|
|
62
|
+
- b78fc45: **BREAKING**: Changed className prop behavior to augment default styles instead of being ignored or overriding them.
|
|
63
|
+
|
|
64
|
+
Affected components:
|
|
65
|
+
|
|
66
|
+
- Menu, MenuListBox, MenuAutocomplete, MenuAutocompleteListbox, MenuItem, MenuListBoxItem, MenuSection, MenuSeparator
|
|
67
|
+
- Switch
|
|
68
|
+
- Skeleton
|
|
69
|
+
- FieldLabel
|
|
70
|
+
- Header, HeaderToolbar
|
|
71
|
+
- HeaderPage
|
|
72
|
+
- Tabs, TabList, Tab, TabPanel
|
|
73
|
+
|
|
74
|
+
If you were passing custom className values to any of these components that relied on the previous behavior, you may need to adjust your styles to account for the default classes now being applied alongside your custom classes.
|
|
4
75
|
|
|
5
76
|
### Patch Changes
|
|
6
77
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
78
|
+
- ff9f0c3: Enable tree-shaking of imports other than `*.css`.
|
|
79
|
+
- 1ef3ca4: Added new VisuallyHidden component for hiding content visually while keeping it accessible to screen readers.
|
|
9
80
|
|
|
10
|
-
## 0.8.
|
|
81
|
+
## 0.8.2-next.0
|
|
11
82
|
|
|
12
83
|
### Patch Changes
|
|
13
84
|
|
|
14
|
-
-
|
|
15
|
-
-
|
|
16
|
-
-
|
|
85
|
+
- 26c6a78: Fix default text color in Backstage UI
|
|
86
|
+
- dac851f: Fix the default font size in Backstage UI.
|
|
87
|
+
- 3c0ea67: Fix CSS layer ordering in Backstage UI to make sure component styles are loaded after tokens and base declarations.
|
|
88
|
+
- 4eb455c: Fix font smoothing as default in Backstage UI.
|
|
89
|
+
- 00bfb83: Fix default font wight and font family in Backstage UI.
|
|
17
90
|
|
|
18
91
|
## 0.8.0
|
|
19
92
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
-
import { Checkbox as Checkbox$1 } from '
|
|
3
|
+
import { Checkbox as Checkbox$1 } from 'react-aria-components';
|
|
4
4
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
6
|
import styles from './Checkbox.module.css.esm.js';
|
|
@@ -8,28 +8,26 @@ import { RiCheckLine } from '@remixicon/react';
|
|
|
8
8
|
|
|
9
9
|
const Checkbox = forwardRef(
|
|
10
10
|
(props, ref) => {
|
|
11
|
-
const { classNames
|
|
12
|
-
const {
|
|
13
|
-
|
|
14
|
-
Checkbox$1
|
|
11
|
+
const { classNames } = useStyles("Checkbox");
|
|
12
|
+
const { className, children, ...rest } = props;
|
|
13
|
+
return /* @__PURE__ */ jsxs(
|
|
14
|
+
Checkbox$1,
|
|
15
15
|
{
|
|
16
16
|
ref,
|
|
17
17
|
className: clsx(classNames.root, styles[classNames.root], className),
|
|
18
|
-
onCheckedChange: onChange,
|
|
19
18
|
...rest,
|
|
20
|
-
children:
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
19
|
+
children: [
|
|
20
|
+
/* @__PURE__ */ jsx(
|
|
21
|
+
"div",
|
|
22
|
+
{
|
|
23
|
+
className: clsx(classNames.indicator, styles[classNames.indicator]),
|
|
24
|
+
children: /* @__PURE__ */ jsx(RiCheckLine, { size: 12 })
|
|
25
|
+
}
|
|
26
|
+
),
|
|
27
|
+
children
|
|
28
|
+
]
|
|
27
29
|
}
|
|
28
30
|
);
|
|
29
|
-
return label ? /* @__PURE__ */ jsxs("label", { className: clsx(classNames.label, styles[classNames.label]), children: [
|
|
30
|
-
checkboxElement,
|
|
31
|
-
label
|
|
32
|
-
] }) : checkboxElement;
|
|
33
31
|
}
|
|
34
32
|
);
|
|
35
33
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Checkbox as
|
|
1
|
+
{"version":3,"file":"Checkbox.esm.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/*\n * Copyright 2024 The Backstage Authors\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react';\nimport { Checkbox as RACheckbox } from 'react-aria-components';\nimport type { CheckboxProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport clsx from 'clsx';\nimport styles from './Checkbox.module.css';\nimport { RiCheckLine } from '@remixicon/react';\n\n/** @public */\nexport const Checkbox = forwardRef<HTMLLabelElement, CheckboxProps>(\n (props, ref) => {\n const { classNames } = useStyles('Checkbox');\n const { className, children, ...rest } = props;\n\n return (\n <RACheckbox\n ref={ref}\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...rest}\n >\n <div\n className={clsx(classNames.indicator, styles[classNames.indicator])}\n >\n <RiCheckLine size={12} />\n </div>\n {children}\n </RACheckbox>\n );\n },\n);\n"],"names":["RACheckbox"],"mappings":";;;;;;;;AAyBO,MAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM,EAAE,UAAA,EAAW,GAAI,SAAA,CAAU,UAAU,CAAA;AAC3C,IAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,KAAA;AAEzC,IAAA,uBACE,IAAA;AAAA,MAACA,UAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG,IAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,WAAW,MAAA,CAAO,UAAA,CAAW,SAAS,CAAC,CAAA;AAAA,cAElE,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,IAAA,EAAM,EAAA,EAAI;AAAA;AAAA,WACzB;AAAA,UACC;AAAA;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;;;;"}
|
|
@@ -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 .Checkbox-module_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 .Checkbox-module_bui-Checkbox__1Oiwl {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\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 user-select: none;\n cursor: pointer;\n }\n\n .Checkbox-module_bui-Checkbox__1Oiwl[data-disabled] {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .Checkbox-module_bui-CheckboxIndicator__2ZJtl {\n border: none;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 1rem;\n height: 1rem;\n box-shadow: inset 0 0 0 1px var(--bui-border);\n border-radius: 2px;\n transition: background-color 0.2s ease-in-out;\n background-color: var(--bui-bg-surface-1);\n padding: 0;\n flex-shrink: 0;\n color: var(--bui-fg-solid);\n\n @media (prefers-reduced-motion: reduce) {\n & {\n transition: none;\n }\n }\n }\n\n .Checkbox-module_bui-Checkbox__1Oiwl[data-focus-visible] .Checkbox-module_bui-CheckboxIndicator__2ZJtl {\n transition: none;\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n .Checkbox-module_bui-Checkbox__1Oiwl[data-selected] .Checkbox-module_bui-CheckboxIndicator__2ZJtl {\n background-color: var(--bui-bg-solid);\n box-shadow: none;\n }\n\n .Checkbox-module_bui-Checkbox__1Oiwl[data-hovered]:not([data-selected]) .Checkbox-module_bui-CheckboxIndicator__2ZJtl {\n box-shadow: inset 0 0 0 1px var(--bui-border-hover);\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Checkbox":"Checkbox-module_bui-Checkbox__1Oiwl","bui-CheckboxIndicator":"Checkbox-module_bui-CheckboxIndicator__2ZJtl"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -8,12 +8,20 @@ import clsx from 'clsx';
|
|
|
8
8
|
const FieldLabel = forwardRef(
|
|
9
9
|
(props, ref) => {
|
|
10
10
|
const { classNames, cleanedProps } = useStyles("FieldLabel", props);
|
|
11
|
-
const {
|
|
11
|
+
const {
|
|
12
|
+
className,
|
|
13
|
+
label,
|
|
14
|
+
secondaryLabel,
|
|
15
|
+
description,
|
|
16
|
+
htmlFor,
|
|
17
|
+
id,
|
|
18
|
+
...rest
|
|
19
|
+
} = cleanedProps;
|
|
12
20
|
if (!label) return null;
|
|
13
21
|
return /* @__PURE__ */ jsxs(
|
|
14
22
|
"div",
|
|
15
23
|
{
|
|
16
|
-
className: clsx(classNames.root, styles[classNames.root]),
|
|
24
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
17
25
|
...rest,
|
|
18
26
|
ref,
|
|
19
27
|
children: [
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FieldLabel.esm.js","sources":["../../../src/components/FieldLabel/FieldLabel.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 */\nimport { Label } from 'react-aria-components';\nimport { forwardRef } from 'react';\nimport type { FieldLabelProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './FieldLabel.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(\n (props: FieldLabelProps, ref) => {\n const { classNames, cleanedProps } = useStyles('FieldLabel', props);\n const {
|
|
1
|
+
{"version":3,"file":"FieldLabel.esm.js","sources":["../../../src/components/FieldLabel/FieldLabel.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 */\nimport { Label } from 'react-aria-components';\nimport { forwardRef } from 'react';\nimport type { FieldLabelProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './FieldLabel.module.css';\nimport clsx from 'clsx';\n\n/** @public */\nexport const FieldLabel = forwardRef<HTMLDivElement, FieldLabelProps>(\n (props: FieldLabelProps, ref) => {\n const { classNames, cleanedProps } = useStyles('FieldLabel', props);\n const {\n className,\n label,\n secondaryLabel,\n description,\n htmlFor,\n id,\n ...rest\n } = cleanedProps;\n\n if (!label) return null;\n\n return (\n <div\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...rest}\n ref={ref}\n >\n {label && (\n <Label\n className={clsx(classNames.label, styles[classNames.label])}\n htmlFor={htmlFor}\n id={id}\n >\n {label}\n {secondaryLabel && (\n <span\n aria-hidden=\"true\"\n className={clsx(\n classNames.secondaryLabel,\n styles[classNames.secondaryLabel],\n )}\n >\n ({secondaryLabel})\n </span>\n )}\n </Label>\n )}\n {description && (\n <div\n className={clsx(\n classNames.description,\n styles[classNames.description],\n )}\n >\n {description}\n </div>\n )}\n </div>\n );\n },\n);\n\nFieldLabel.displayName = 'FieldLabel';\n"],"names":[],"mappings":";;;;;;;AAuBO,MAAM,UAAA,GAAa,UAAA;AAAA,EACxB,CAAC,OAAwB,GAAA,KAAQ;AAC/B,IAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,cAAc,KAAK,CAAA;AAClE,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,OAAA;AAAA,MACA,EAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,YAAA;AAEJ,IAAA,IAAI,CAAC,OAAO,OAAO,IAAA;AAEnB,IAAA,uBACE,IAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA,oBACC,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,cAC1D,OAAA;AAAA,cACA,EAAA;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,KAAA;AAAA,gBACA,cAAA,oBACC,IAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,aAAA,EAAY,MAAA;AAAA,oBACZ,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,cAAA;AAAA,sBACX,MAAA,CAAO,WAAW,cAAc;AAAA,qBAClC;AAAA,oBACD,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,sBACG,cAAA;AAAA,sBAAe;AAAA;AAAA;AAAA;AACnB;AAAA;AAAA,WAEJ;AAAA,UAED,WAAA,oBACC,GAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,WAAA;AAAA,gBACX,MAAA,CAAO,WAAW,WAAW;AAAA,eAC/B;AAAA,cAEC,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA;;;;"}
|
|
@@ -7,7 +7,15 @@ import clsx from 'clsx';
|
|
|
7
7
|
|
|
8
8
|
const Header = (props) => {
|
|
9
9
|
const { classNames, cleanedProps } = useStyles("Header", props);
|
|
10
|
-
const {
|
|
10
|
+
const {
|
|
11
|
+
className,
|
|
12
|
+
tabs,
|
|
13
|
+
icon,
|
|
14
|
+
title,
|
|
15
|
+
titleLink,
|
|
16
|
+
customActions,
|
|
17
|
+
onTabSelectionChange
|
|
18
|
+
} = cleanedProps;
|
|
11
19
|
const hasTabs = tabs && tabs.length > 0;
|
|
12
20
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
13
21
|
/* @__PURE__ */ jsx(
|
|
@@ -25,7 +33,8 @@ const Header = (props) => {
|
|
|
25
33
|
{
|
|
26
34
|
className: clsx(
|
|
27
35
|
classNames.tabsWrapper,
|
|
28
|
-
styles[classNames.tabsWrapper]
|
|
36
|
+
styles[classNames.tabsWrapper],
|
|
37
|
+
className
|
|
29
38
|
),
|
|
30
39
|
children: /* @__PURE__ */ jsx(Tabs, { onSelectionChange: onTabSelectionChange, children: /* @__PURE__ */ jsx(TabList, { children: tabs?.map((tab) => /* @__PURE__ */ jsx(
|
|
31
40
|
Tab,
|
|
@@ -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 { HeaderToolbar } from './HeaderToolbar';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { type NavigateOptions } from 'react-router-dom';\nimport styles from './Header.module.css';\nimport clsx from 'clsx';\n\ndeclare module 'react-aria-components' {\n interface RouterConfig {\n routerOptions: NavigateOptions;\n }\n}\n\n/**\n * A component that renders a toolbar.\n *\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n const { classNames, cleanedProps } = useStyles('Header', props);\n const {
|
|
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 { HeaderToolbar } from './HeaderToolbar';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { type NavigateOptions } from 'react-router-dom';\nimport styles from './Header.module.css';\nimport clsx from 'clsx';\n\ndeclare module 'react-aria-components' {\n interface RouterConfig {\n routerOptions: NavigateOptions;\n }\n}\n\n/**\n * A component that renders a toolbar.\n *\n * @public\n */\nexport const Header = (props: HeaderProps) => {\n const { classNames, cleanedProps } = useStyles('Header', props);\n const {\n className,\n tabs,\n icon,\n title,\n titleLink,\n customActions,\n onTabSelectionChange,\n } = cleanedProps;\n\n const hasTabs = tabs && tabs.length > 0;\n\n return (\n <>\n <HeaderToolbar\n icon={icon}\n title={title}\n titleLink={titleLink}\n customActions={customActions}\n hasTabs={hasTabs}\n />\n {tabs && (\n <div\n className={clsx(\n classNames.tabsWrapper,\n styles[classNames.tabsWrapper],\n className,\n )}\n >\n <Tabs onSelectionChange={onTabSelectionChange}>\n <TabList>\n {tabs?.map(tab => (\n <Tab\n key={tab.id}\n id={tab.id}\n href={tab.href}\n matchStrategy={tab.matchStrategy}\n >\n {tab.label}\n </Tab>\n ))}\n </TabList>\n </Tabs>\n </div>\n )}\n </>\n );\n};\n"],"names":[],"mappings":";;;;;;;AAmCO,MAAM,MAAA,GAAS,CAAC,KAAA,KAAuB;AAC5C,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,UAAU,KAAK,CAAA;AAC9D,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,SAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACF,GAAI,YAAA;AAEJ,EAAA,MAAM,OAAA,GAAU,IAAA,IAAQ,IAAA,CAAK,MAAA,GAAS,CAAA;AAEtC,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,aAAA;AAAA,QACA;AAAA;AAAA,KACF;AAAA,IACC,IAAA,oBACC,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,IAAA;AAAA,UACT,UAAA,CAAW,WAAA;AAAA,UACX,MAAA,CAAO,WAAW,WAAW,CAAA;AAAA,UAC7B;AAAA,SACF;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,QAAK,iBAAA,EAAmB,oBAAA,EACvB,8BAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,EAAM,IAAI,CAAA,GAAA,qBACT,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YAEC,IAAI,GAAA,CAAI,EAAA;AAAA,YACR,MAAM,GAAA,CAAI,IAAA;AAAA,YACV,eAAe,GAAA,CAAI,aAAA;AAAA,YAElB,QAAA,EAAA,GAAA,CAAI;AAAA,WAAA;AAAA,UALA,GAAA,CAAI;AAAA,SAOZ,GACH,CAAA,EACF;AAAA;AAAA;AACF,GAAA,EAEJ,CAAA;AAEJ;;;;"}
|
|
@@ -10,7 +10,7 @@ import clsx from 'clsx';
|
|
|
10
10
|
|
|
11
11
|
const HeaderToolbar = (props) => {
|
|
12
12
|
const { classNames, cleanedProps } = useStyles("Header", props);
|
|
13
|
-
const { icon, title, titleLink, customActions, hasTabs } = cleanedProps;
|
|
13
|
+
const { className, icon, title, titleLink, customActions, hasTabs } = cleanedProps;
|
|
14
14
|
let navigate = useNavigate();
|
|
15
15
|
const toolbarWrapperRef = useRef(null);
|
|
16
16
|
const toolbarContentRef = useRef(null);
|
|
@@ -28,7 +28,11 @@ const HeaderToolbar = (props) => {
|
|
|
28
28
|
return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx(
|
|
29
29
|
"div",
|
|
30
30
|
{
|
|
31
|
-
className: clsx(
|
|
31
|
+
className: clsx(
|
|
32
|
+
classNames.toolbar,
|
|
33
|
+
styles[classNames.toolbar],
|
|
34
|
+
className
|
|
35
|
+
),
|
|
32
36
|
"data-has-tabs": hasTabs,
|
|
33
37
|
children: /* @__PURE__ */ jsxs(
|
|
34
38
|
"div",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderToolbar.esm.js","sources":["../../../src/components/Header/HeaderToolbar.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 { Link, RouterProvider } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useRef } from 'react';\nimport { RiShapesLine } from '@remixicon/react';\nimport type { HeaderToolbarProps } from './types';\nimport { Text } from '../Text';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport styles from './Header.module.css';\nimport clsx from 'clsx';\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n const { classNames, cleanedProps } = useStyles('Header', props);\n const { icon, title, titleLink, customActions, hasTabs }
|
|
1
|
+
{"version":3,"file":"HeaderToolbar.esm.js","sources":["../../../src/components/Header/HeaderToolbar.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 { Link, RouterProvider } from 'react-aria-components';\nimport { useStyles } from '../../hooks/useStyles';\nimport { useRef } from 'react';\nimport { RiShapesLine } from '@remixicon/react';\nimport type { HeaderToolbarProps } from './types';\nimport { Text } from '../Text';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport styles from './Header.module.css';\nimport clsx from 'clsx';\n\n/**\n * A component that renders a toolbar.\n *\n * @internal\n */\nexport const HeaderToolbar = (props: HeaderToolbarProps) => {\n const { classNames, cleanedProps } = useStyles('Header', props);\n const { className, icon, title, titleLink, customActions, hasTabs } =\n cleanedProps;\n let navigate = useNavigate();\n\n // Refs for collision detection\n const toolbarWrapperRef = useRef<HTMLDivElement>(null);\n const toolbarContentRef = useRef<HTMLDivElement>(null);\n const toolbarControlsRef = useRef<HTMLDivElement>(null);\n\n const titleContent = (\n <>\n <div\n className={clsx(classNames.toolbarIcon, styles[classNames.toolbarIcon])}\n >\n {icon || <RiShapesLine />}\n </div>\n <Text variant=\"body-medium\">{title || 'Your plugin'}</Text>\n </>\n );\n\n return (\n <RouterProvider navigate={navigate} useHref={useHref}>\n <div\n className={clsx(\n classNames.toolbar,\n styles[classNames.toolbar],\n className,\n )}\n data-has-tabs={hasTabs}\n >\n <div\n className={clsx(\n classNames.toolbarWrapper,\n styles[classNames.toolbarWrapper],\n )}\n ref={toolbarWrapperRef}\n >\n <div\n className={clsx(\n classNames.toolbarContent,\n styles[classNames.toolbarContent],\n )}\n ref={toolbarContentRef}\n >\n <Text as=\"h1\" variant=\"body-medium\">\n {titleLink ? (\n <Link\n className={clsx(\n classNames.toolbarName,\n styles[classNames.toolbarName],\n )}\n href={titleLink}\n >\n {titleContent}\n </Link>\n ) : (\n <div\n className={clsx(\n classNames.toolbarName,\n styles[classNames.toolbarName],\n )}\n >\n {titleContent}\n </div>\n )}\n </Text>\n </div>\n <div\n className={clsx(\n classNames.toolbarControls,\n styles[classNames.toolbarControls],\n )}\n ref={toolbarControlsRef}\n >\n {customActions}\n </div>\n </div>\n </div>\n </RouterProvider>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AA+BO,MAAM,aAAA,GAAgB,CAAC,KAAA,KAA8B;AAC1D,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,UAAU,KAAK,CAAA;AAC9D,EAAA,MAAM,EAAE,SAAA,EAAW,IAAA,EAAM,OAAO,SAAA,EAAW,aAAA,EAAe,SAAQ,GAChE,YAAA;AACF,EAAA,IAAI,WAAW,WAAA,EAAY;AAG3B,EAAA,MAAM,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAA,MAAM,iBAAA,GAAoB,OAAuB,IAAI,CAAA;AACrD,EAAA,MAAM,kBAAA,GAAqB,OAAuB,IAAI,CAAA;AAEtD,EAAA,MAAM,+BACJ,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,WAAW,IAAA,CAAK,UAAA,CAAW,aAAa,MAAA,CAAO,UAAA,CAAW,WAAW,CAAC,CAAA;AAAA,QAErE,QAAA,EAAA,IAAA,wBAAS,YAAA,EAAA,EAAa;AAAA;AAAA,KACzB;AAAA,oBACA,GAAA,CAAC,IAAA,EAAA,EAAK,OAAA,EAAQ,aAAA,EAAe,mBAAS,aAAA,EAAc;AAAA,GAAA,EACtD,CAAA;AAGF,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EAClC,QAAA,kBAAA,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA;AAAA,QACT,UAAA,CAAW,OAAA;AAAA,QACX,MAAA,CAAO,WAAW,OAAO,CAAA;AAAA,QACzB;AAAA,OACF;AAAA,MACA,eAAA,EAAe,OAAA;AAAA,MAEf,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,cAAA;AAAA,YACX,MAAA,CAAO,WAAW,cAAc;AAAA,WAClC;AAAA,UACA,GAAA,EAAK,iBAAA;AAAA,UAEL,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,cAAA;AAAA,kBACX,MAAA,CAAO,WAAW,cAAc;AAAA,iBAClC;AAAA,gBACA,GAAA,EAAK,iBAAA;AAAA,gBAEL,8BAAC,IAAA,EAAA,EAAK,EAAA,EAAG,IAAA,EAAK,OAAA,EAAQ,eACnB,QAAA,EAAA,SAAA,mBACC,GAAA;AAAA,kBAAC,IAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,WAAA;AAAA,sBACX,MAAA,CAAO,WAAW,WAAW;AAAA,qBAC/B;AAAA,oBACA,IAAA,EAAM,SAAA;AAAA,oBAEL,QAAA,EAAA;AAAA;AAAA,iBACH,mBAEA,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,WAAA;AAAA,sBACX,MAAA,CAAO,WAAW,WAAW;AAAA,qBAC/B;AAAA,oBAEC,QAAA,EAAA;AAAA;AAAA,iBACH,EAEJ;AAAA;AAAA,aACF;AAAA,4BACA,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,eAAA;AAAA,kBACX,MAAA,CAAO,WAAW,eAAe;AAAA,iBACnC;AAAA,gBACA,GAAA,EAAK,kBAAA;AAAA,gBAEJ,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA;AACF;AAAA,GACF,EACF,CAAA;AAEJ;;;;"}
|
|
@@ -10,58 +10,64 @@ import clsx from 'clsx';
|
|
|
10
10
|
|
|
11
11
|
const HeaderPage = (props) => {
|
|
12
12
|
const { classNames, cleanedProps } = useStyles("HeaderPage", props);
|
|
13
|
-
const { title, tabs, customActions, breadcrumbs } = cleanedProps;
|
|
14
|
-
return /* @__PURE__ */ jsxs(
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
Link,
|
|
27
|
-
{
|
|
28
|
-
href: breadcrumb.href,
|
|
29
|
-
variant: "title-small",
|
|
30
|
-
weight: "bold",
|
|
31
|
-
color: "secondary",
|
|
32
|
-
truncate: true,
|
|
33
|
-
style: { maxWidth: "240px" },
|
|
34
|
-
children: breadcrumb.label
|
|
35
|
-
}
|
|
13
|
+
const { className, title, tabs, customActions, breadcrumbs } = cleanedProps;
|
|
14
|
+
return /* @__PURE__ */ jsxs(
|
|
15
|
+
Container,
|
|
16
|
+
{
|
|
17
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
18
|
+
children: [
|
|
19
|
+
/* @__PURE__ */ jsxs("div", { className: clsx(classNames.content, styles[classNames.content]), children: [
|
|
20
|
+
/* @__PURE__ */ jsxs(
|
|
21
|
+
"div",
|
|
22
|
+
{
|
|
23
|
+
className: clsx(
|
|
24
|
+
classNames.breadcrumbs,
|
|
25
|
+
styles[classNames.breadcrumbs]
|
|
36
26
|
),
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
27
|
+
children: [
|
|
28
|
+
breadcrumbs && breadcrumbs.map((breadcrumb) => /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
29
|
+
/* @__PURE__ */ jsx(
|
|
30
|
+
Link,
|
|
31
|
+
{
|
|
32
|
+
href: breadcrumb.href,
|
|
33
|
+
variant: "title-small",
|
|
34
|
+
weight: "bold",
|
|
35
|
+
color: "secondary",
|
|
36
|
+
truncate: true,
|
|
37
|
+
style: { maxWidth: "240px" },
|
|
38
|
+
children: breadcrumb.label
|
|
39
|
+
}
|
|
40
|
+
),
|
|
41
|
+
/* @__PURE__ */ jsx(RiArrowRightSLine, { size: 16, color: "var(--bui-fg-secondary)" })
|
|
42
|
+
] }, breadcrumb.label)),
|
|
43
|
+
/* @__PURE__ */ jsx(Text, { variant: "title-small", weight: "bold", as: "h2", children: title })
|
|
44
|
+
]
|
|
45
|
+
}
|
|
46
|
+
),
|
|
47
|
+
/* @__PURE__ */ jsx("div", { className: clsx(classNames.controls, styles[classNames.controls]), children: customActions })
|
|
48
|
+
] }),
|
|
49
|
+
tabs && /* @__PURE__ */ jsx(
|
|
50
|
+
"div",
|
|
54
51
|
{
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
52
|
+
className: clsx(
|
|
53
|
+
classNames.tabsWrapper,
|
|
54
|
+
styles[classNames.tabsWrapper]
|
|
55
|
+
),
|
|
56
|
+
children: /* @__PURE__ */ jsx(Tabs, { children: /* @__PURE__ */ jsx(TabList, { children: tabs.map((tab) => /* @__PURE__ */ jsx(
|
|
57
|
+
Tab,
|
|
58
|
+
{
|
|
59
|
+
id: tab.id,
|
|
60
|
+
href: tab.href,
|
|
61
|
+
matchStrategy: tab.matchStrategy,
|
|
62
|
+
children: tab.label
|
|
63
|
+
},
|
|
64
|
+
tab.id
|
|
65
|
+
)) }) })
|
|
66
|
+
}
|
|
67
|
+
)
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
);
|
|
65
71
|
};
|
|
66
72
|
|
|
67
73
|
export { HeaderPage };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.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 { HeaderPageProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { Container } from '../Container';\nimport { Link } from '../Link';\nimport { Fragment } from 'react/jsx-runtime';\nimport styles from './HeaderPage.module.css';\nimport clsx from 'clsx';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n const { classNames, cleanedProps } = useStyles('HeaderPage', props);\n const { title, tabs, customActions, breadcrumbs } = cleanedProps;\n\n return (\n <Container
|
|
1
|
+
{"version":3,"file":"HeaderPage.esm.js","sources":["../../../src/components/HeaderPage/HeaderPage.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 { HeaderPageProps } from './types';\nimport { Text } from '../Text';\nimport { RiArrowRightSLine } from '@remixicon/react';\nimport { Tabs, TabList, Tab } from '../Tabs';\nimport { useStyles } from '../../hooks/useStyles';\nimport { Container } from '../Container';\nimport { Link } from '../Link';\nimport { Fragment } from 'react/jsx-runtime';\nimport styles from './HeaderPage.module.css';\nimport clsx from 'clsx';\n\n/**\n * A component that renders a header page.\n *\n * @public\n */\nexport const HeaderPage = (props: HeaderPageProps) => {\n const { classNames, cleanedProps } = useStyles('HeaderPage', props);\n const { className, title, tabs, customActions, breadcrumbs } = cleanedProps;\n\n return (\n <Container\n className={clsx(classNames.root, styles[classNames.root], className)}\n >\n <div className={clsx(classNames.content, styles[classNames.content])}>\n <div\n className={clsx(\n classNames.breadcrumbs,\n styles[classNames.breadcrumbs],\n )}\n >\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 >\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={clsx(classNames.controls, styles[classNames.controls])}>\n {customActions}\n </div>\n </div>\n {tabs && (\n <div\n className={clsx(\n classNames.tabsWrapper,\n styles[classNames.tabsWrapper],\n )}\n >\n <Tabs>\n <TabList>\n {tabs.map(tab => (\n <Tab\n key={tab.id}\n id={tab.id}\n href={tab.href}\n matchStrategy={tab.matchStrategy}\n >\n {tab.label}\n </Tab>\n ))}\n </TabList>\n </Tabs>\n </div>\n )}\n </Container>\n );\n};\n"],"names":[],"mappings":";;;;;;;;;;AAgCO,MAAM,UAAA,GAAa,CAAC,KAAA,KAA2B;AACpD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA,CAAU,cAAc,KAAK,CAAA;AAClE,EAAA,MAAM,EAAE,SAAA,EAAW,KAAA,EAAO,IAAA,EAAM,aAAA,EAAe,aAAY,GAAI,YAAA;AAE/D,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAEnE,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,WAAW,IAAA,CAAK,UAAA,CAAW,SAAS,MAAA,CAAO,UAAA,CAAW,OAAO,CAAC,CAAA,EACjE,QAAA,EAAA;AAAA,0BAAA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,WAAA;AAAA,gBACX,MAAA,CAAO,WAAW,WAAW;AAAA,eAC/B;AAAA,cAEC,QAAA,EAAA;AAAA,gBAAA,WAAA,IACC,WAAA,CAAY,GAAA,CAAI,CAAA,UAAA,qBACd,IAAA,CAAC,QAAA,EAAA,EACC,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,IAAA;AAAA,oBAAA;AAAA,sBACC,MAAM,UAAA,CAAW,IAAA;AAAA,sBACjB,OAAA,EAAQ,aAAA;AAAA,sBACR,MAAA,EAAO,MAAA;AAAA,sBACP,KAAA,EAAM,WAAA;AAAA,sBACN,QAAA,EAAQ,IAAA;AAAA,sBACR,KAAA,EAAO,EAAE,QAAA,EAAU,OAAA,EAAQ;AAAA,sBAE1B,QAAA,EAAA,UAAA,CAAW;AAAA;AAAA,mBACd;AAAA,kCACA,GAAA,CAAC,iBAAA,EAAA,EAAkB,IAAA,EAAM,EAAA,EAAI,OAAM,yBAAA,EAA0B;AAAA,iBAAA,EAAA,EAXhD,UAAA,CAAW,KAY1B,CACD,CAAA;AAAA,gCACH,GAAA,CAAC,QAAK,OAAA,EAAQ,aAAA,EAAc,QAAO,MAAA,EAAO,EAAA,EAAG,MAC1C,QAAA,EAAA,KAAA,EACH;AAAA;AAAA;AAAA,WACF;AAAA,0BACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,IAAA,CAAK,UAAA,CAAW,QAAA,EAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA,EAClE,QAAA,EAAA,aAAA,EACH;AAAA,SAAA,EACF,CAAA;AAAA,QACC,IAAA,oBACC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,IAAA;AAAA,cACT,UAAA,CAAW,WAAA;AAAA,cACX,MAAA,CAAO,WAAW,WAAW;AAAA,aAC/B;AAAA,YAEA,8BAAC,IAAA,EAAA,EACC,QAAA,kBAAA,GAAA,CAAC,OAAA,EAAA,EACE,QAAA,EAAA,IAAA,CAAK,IAAI,CAAA,GAAA,qBACR,GAAA;AAAA,cAAC,GAAA;AAAA,cAAA;AAAA,gBAEC,IAAI,GAAA,CAAI,EAAA;AAAA,gBACR,MAAM,GAAA,CAAI,IAAA;AAAA,gBACV,eAAe,GAAA,CAAI,aAAA;AAAA,gBAElB,QAAA,EAAA,GAAA,CAAI;AAAA,eAAA;AAAA,cALA,GAAA,CAAI;AAAA,aAOZ,GACH,CAAA,EACF;AAAA;AAAA;AACF;AAAA;AAAA,GAEJ;AAEJ;;;;"}
|