@backstage/ui 0.8.2-next.0 → 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 +78 -0
- 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 +4 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,83 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
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.
|
|
75
|
+
|
|
76
|
+
### Patch Changes
|
|
77
|
+
|
|
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.
|
|
80
|
+
|
|
3
81
|
## 0.8.2-next.0
|
|
4
82
|
|
|
5
83
|
### Patch Changes
|
|
@@ -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;;;;"}
|
|
@@ -22,6 +22,7 @@ const SubmenuTrigger = (props) => {
|
|
|
22
22
|
const Menu = (props) => {
|
|
23
23
|
const { classNames, cleanedProps } = useStyles("Menu", props);
|
|
24
24
|
const {
|
|
25
|
+
className,
|
|
25
26
|
placement = "bottom start",
|
|
26
27
|
virtualized = false,
|
|
27
28
|
maxWidth,
|
|
@@ -63,7 +64,11 @@ const Menu = (props) => {
|
|
|
63
64
|
Popover,
|
|
64
65
|
{
|
|
65
66
|
ref: popoverRef,
|
|
66
|
-
className: clsx(
|
|
67
|
+
className: clsx(
|
|
68
|
+
classNames.popover,
|
|
69
|
+
styles[classNames.popover],
|
|
70
|
+
className
|
|
71
|
+
),
|
|
67
72
|
placement,
|
|
68
73
|
isNonModal: true,
|
|
69
74
|
isKeyboardDismissDisabled: false,
|
|
@@ -83,6 +88,7 @@ const Menu = (props) => {
|
|
|
83
88
|
const MenuListBox = (props) => {
|
|
84
89
|
const { classNames, cleanedProps } = useStyles("Menu", props);
|
|
85
90
|
const {
|
|
91
|
+
className,
|
|
86
92
|
selectionMode = "single",
|
|
87
93
|
placement = "bottom start",
|
|
88
94
|
virtualized = false,
|
|
@@ -104,7 +110,11 @@ const MenuListBox = (props) => {
|
|
|
104
110
|
return /* @__PURE__ */ jsx(
|
|
105
111
|
Popover,
|
|
106
112
|
{
|
|
107
|
-
className: clsx(
|
|
113
|
+
className: clsx(
|
|
114
|
+
classNames.popover,
|
|
115
|
+
styles[classNames.popover],
|
|
116
|
+
className
|
|
117
|
+
),
|
|
108
118
|
placement,
|
|
109
119
|
children: virtualized ? /* @__PURE__ */ jsx(
|
|
110
120
|
Virtualizer,
|
|
@@ -122,6 +132,7 @@ const MenuListBox = (props) => {
|
|
|
122
132
|
const MenuAutocomplete = (props) => {
|
|
123
133
|
const { classNames, cleanedProps } = useStyles("Menu", props);
|
|
124
134
|
const {
|
|
135
|
+
className,
|
|
125
136
|
placement = "bottom start",
|
|
126
137
|
virtualized = false,
|
|
127
138
|
maxWidth,
|
|
@@ -144,7 +155,11 @@ const MenuAutocomplete = (props) => {
|
|
|
144
155
|
return /* @__PURE__ */ jsx(
|
|
145
156
|
Popover,
|
|
146
157
|
{
|
|
147
|
-
className: clsx(
|
|
158
|
+
className: clsx(
|
|
159
|
+
classNames.popover,
|
|
160
|
+
styles[classNames.popover],
|
|
161
|
+
className
|
|
162
|
+
),
|
|
148
163
|
placement,
|
|
149
164
|
children: /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
|
|
150
165
|
/* @__PURE__ */ jsxs(
|
|
@@ -196,6 +211,7 @@ const MenuAutocomplete = (props) => {
|
|
|
196
211
|
const MenuAutocompleteListbox = (props) => {
|
|
197
212
|
const { classNames, cleanedProps } = useStyles("Menu", props);
|
|
198
213
|
const {
|
|
214
|
+
className,
|
|
199
215
|
selectionMode = "single",
|
|
200
216
|
placement = "bottom start",
|
|
201
217
|
virtualized = false,
|
|
@@ -219,7 +235,11 @@ const MenuAutocompleteListbox = (props) => {
|
|
|
219
235
|
return /* @__PURE__ */ jsx(
|
|
220
236
|
Popover,
|
|
221
237
|
{
|
|
222
|
-
className: clsx(
|
|
238
|
+
className: clsx(
|
|
239
|
+
classNames.popover,
|
|
240
|
+
styles[classNames.popover],
|
|
241
|
+
className
|
|
242
|
+
),
|
|
223
243
|
placement,
|
|
224
244
|
children: /* @__PURE__ */ jsxs(Autocomplete, { filter: contains, children: [
|
|
225
245
|
/* @__PURE__ */ jsxs(
|
|
@@ -271,6 +291,7 @@ const MenuAutocompleteListbox = (props) => {
|
|
|
271
291
|
const MenuItem = (props) => {
|
|
272
292
|
const { classNames, cleanedProps } = useStyles("Menu", props);
|
|
273
293
|
const {
|
|
294
|
+
className,
|
|
274
295
|
iconStart,
|
|
275
296
|
color = "primary",
|
|
276
297
|
children,
|
|
@@ -283,7 +304,7 @@ const MenuItem = (props) => {
|
|
|
283
304
|
return /* @__PURE__ */ jsx(
|
|
284
305
|
MenuItem$1,
|
|
285
306
|
{
|
|
286
|
-
className: clsx(classNames.item, styles[classNames.item]),
|
|
307
|
+
className: clsx(classNames.item, styles[classNames.item], className),
|
|
287
308
|
"data-color": color,
|
|
288
309
|
textValue: typeof children === "string" ? children : void 0,
|
|
289
310
|
onAction: () => window.open(href, "_blank", "noopener,noreferrer"),
|
|
@@ -325,7 +346,7 @@ const MenuItem = (props) => {
|
|
|
325
346
|
return /* @__PURE__ */ jsx(
|
|
326
347
|
MenuItem$1,
|
|
327
348
|
{
|
|
328
|
-
className: clsx(classNames.item, styles[classNames.item]),
|
|
349
|
+
className: clsx(classNames.item, styles[classNames.item], className),
|
|
329
350
|
"data-color": color,
|
|
330
351
|
href,
|
|
331
352
|
textValue: typeof children === "string" ? children : void 0,
|
|
@@ -363,12 +384,16 @@ const MenuItem = (props) => {
|
|
|
363
384
|
};
|
|
364
385
|
const MenuListBoxItem = (props) => {
|
|
365
386
|
const { classNames, cleanedProps } = useStyles("Menu", props);
|
|
366
|
-
const { children, ...rest } = cleanedProps;
|
|
387
|
+
const { children, className, ...rest } = cleanedProps;
|
|
367
388
|
return /* @__PURE__ */ jsx(
|
|
368
389
|
ListBoxItem,
|
|
369
390
|
{
|
|
370
391
|
textValue: typeof props.children === "string" ? props.children : void 0,
|
|
371
|
-
className: clsx(
|
|
392
|
+
className: clsx(
|
|
393
|
+
classNames.itemListBox,
|
|
394
|
+
styles[classNames.itemListBox],
|
|
395
|
+
className
|
|
396
|
+
),
|
|
372
397
|
...rest,
|
|
373
398
|
children: /* @__PURE__ */ jsx(
|
|
374
399
|
"div",
|
|
@@ -403,11 +428,15 @@ const MenuListBoxItem = (props) => {
|
|
|
403
428
|
};
|
|
404
429
|
const MenuSection = (props) => {
|
|
405
430
|
const { classNames, cleanedProps } = useStyles("Menu", props);
|
|
406
|
-
const { children, title, ...rest } = cleanedProps;
|
|
431
|
+
const { children, className, title, ...rest } = cleanedProps;
|
|
407
432
|
return /* @__PURE__ */ jsxs(
|
|
408
433
|
MenuSection$1,
|
|
409
434
|
{
|
|
410
|
-
className: clsx(
|
|
435
|
+
className: clsx(
|
|
436
|
+
classNames.section,
|
|
437
|
+
styles[classNames.section],
|
|
438
|
+
className
|
|
439
|
+
),
|
|
411
440
|
...rest,
|
|
412
441
|
children: [
|
|
413
442
|
/* @__PURE__ */ jsx(
|
|
@@ -427,11 +456,16 @@ const MenuSection = (props) => {
|
|
|
427
456
|
};
|
|
428
457
|
const MenuSeparator = (props) => {
|
|
429
458
|
const { classNames, cleanedProps } = useStyles("Menu", props);
|
|
459
|
+
const { className, ...rest } = cleanedProps;
|
|
430
460
|
return /* @__PURE__ */ jsx(
|
|
431
461
|
Separator,
|
|
432
462
|
{
|
|
433
|
-
className: clsx(
|
|
434
|
-
|
|
463
|
+
className: clsx(
|
|
464
|
+
classNames.separator,
|
|
465
|
+
styles[classNames.separator],
|
|
466
|
+
className
|
|
467
|
+
),
|
|
468
|
+
...rest
|
|
435
469
|
}
|
|
436
470
|
);
|
|
437
471
|
};
|