@backstage/ui 0.9.0-next.1 → 0.9.0-next.2
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 +40 -0
- package/css/styles.css +8 -0
- package/dist/components/Avatar/Avatar.esm.js +39 -23
- package/dist/components/Avatar/Avatar.esm.js.map +1 -1
- package/dist/components/Avatar/Avatar.module.css.esm.js +1 -1
- package/dist/components/Header/HeaderToolbar.esm.js +3 -5
- package/dist/components/Header/HeaderToolbar.esm.js.map +1 -1
- package/dist/components/Link/Link.esm.js +11 -39
- package/dist/components/Link/Link.esm.js.map +1 -1
- package/dist/components/Link/Link.module.css.esm.js +3 -3
- package/dist/components/RadioGroup/RadioGroup.module.css.esm.js +1 -1
- package/dist/components/SearchField/SearchField.esm.js +17 -33
- package/dist/components/SearchField/SearchField.esm.js.map +1 -1
- package/dist/components/SearchField/SearchField.module.css.esm.js +3 -3
- package/dist/components/Table/Table.module.css.esm.js +2 -2
- package/dist/components/Table/components/CellProfile.esm.js +2 -34
- package/dist/components/Table/components/CellProfile.esm.js.map +1 -1
- package/dist/components/Text/Text.esm.js +3 -3
- package/dist/components/Text/Text.esm.js.map +1 -1
- package/dist/components/Text/Text.module.css.esm.js +2 -2
- package/dist/components/TextField/TextField.esm.js +5 -5
- package/dist/components/TextField/TextField.esm.js.map +1 -1
- package/dist/components/TextField/TextField.module.css.esm.js +2 -2
- package/dist/index.d.ts +26 -5
- package/dist/utils/componentDefinitions.esm.js +7 -2
- package/dist/utils/componentDefinitions.esm.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,45 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
+
## 0.9.0-next.2
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 539cf26: **BREAKING**: Migrated Avatar component from Base UI to custom implementation with size changes:
|
|
8
|
+
|
|
9
|
+
- Base UI-specific props are no longer supported
|
|
10
|
+
- Size values have been updated:
|
|
11
|
+
- New `x-small` size added (1.25rem / 20px)
|
|
12
|
+
- `small` size unchanged (1.5rem / 24px)
|
|
13
|
+
- `medium` size unchanged (2rem / 32px, default)
|
|
14
|
+
- `large` size **changed from 3rem to 2.5rem** (40px)
|
|
15
|
+
- New `x-large` size added (3rem / 48px)
|
|
16
|
+
|
|
17
|
+
Migration:
|
|
18
|
+
|
|
19
|
+
```diff
|
|
20
|
+
# Remove Base UI-specific props
|
|
21
|
+
- <Avatar src="..." name="..." render={...} />
|
|
22
|
+
+ <Avatar src="..." name="..." />
|
|
23
|
+
|
|
24
|
+
# Update large size usage to x-large for same visual size
|
|
25
|
+
- <Avatar src="..." name="..." size="large" />
|
|
26
|
+
+ <Avatar src="..." name="..." size="x-large" />
|
|
27
|
+
```
|
|
28
|
+
|
|
29
|
+
Added `purpose` prop for accessibility control (`'informative'` or `'decoration'`).
|
|
30
|
+
|
|
31
|
+
- 134151f: Fixing styles on SearchField in Backstage UI after migration to CSS modules. `SearchField` has now its own set of class names. We previously used class names from `TextField` but this approach was creating some confusion so going forward in your theme you'll be able to theme `TextField` and `SearchField` separately.
|
|
32
|
+
|
|
33
|
+
### Patch Changes
|
|
34
|
+
|
|
35
|
+
- d01de00: Fix broken external links in Backstage UI Header component.
|
|
36
|
+
- deaa427: Fixed Text component to prevent `truncate` prop from being spread to the underlying DOM element.
|
|
37
|
+
- 1059f95: Improved the Link component structure in Backstage UI.
|
|
38
|
+
- 6874094: Migrated CellProfile component from Base UI Avatar to Backstage UI Avatar component.
|
|
39
|
+
- 719d772: Avatar components in x-small and small sizes now display only one initial instead of two, improving readability at smaller dimensions.
|
|
40
|
+
- 3b18d80: Fixed RadioGroup radio button ellipse distortion by preventing flex shrink and grow.
|
|
41
|
+
- e16ece5: Set the color-scheme property depending on theme
|
|
42
|
+
|
|
3
43
|
## 0.9.0-next.1
|
|
4
44
|
|
|
5
45
|
### Minor Changes
|
package/css/styles.css
CHANGED
|
@@ -247,6 +247,14 @@
|
|
|
247
247
|
-webkit-font-smoothing: antialiased;
|
|
248
248
|
-moz-osx-font-smoothing: grayscale;
|
|
249
249
|
}
|
|
250
|
+
|
|
251
|
+
[data-theme-mode="dark"] {
|
|
252
|
+
color-scheme: dark;
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
[data-theme-mode="light"] {
|
|
256
|
+
color-scheme: light;
|
|
257
|
+
}
|
|
250
258
|
}
|
|
251
259
|
|
|
252
260
|
@layer components;
|
|
@@ -1,6 +1,5 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import { Avatar as Avatar$1 } from '@base-ui-components/react/avatar';
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { forwardRef, useState, useEffect } from 'react';
|
|
4
3
|
import clsx from 'clsx';
|
|
5
4
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
6
5
|
import styles from './Avatar.module.css.esm.js';
|
|
@@ -8,36 +7,53 @@ import styles from './Avatar.module.css.esm.js';
|
|
|
8
7
|
const Avatar = forwardRef((props, ref) => {
|
|
9
8
|
const { classNames, dataAttributes, cleanedProps } = useStyles("Avatar", {
|
|
10
9
|
size: "medium",
|
|
10
|
+
purpose: "informative",
|
|
11
11
|
...props
|
|
12
12
|
});
|
|
13
|
-
const { className, src, name, ...rest } = cleanedProps;
|
|
14
|
-
|
|
15
|
-
|
|
13
|
+
const { className, src, name, purpose, ...rest } = cleanedProps;
|
|
14
|
+
const [imageStatus, setImageStatus] = useState("loading");
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
setImageStatus("loading");
|
|
17
|
+
const img = new Image();
|
|
18
|
+
img.onload = () => setImageStatus("loaded");
|
|
19
|
+
img.onerror = () => setImageStatus("error");
|
|
20
|
+
img.src = src;
|
|
21
|
+
return () => {
|
|
22
|
+
img.onload = null;
|
|
23
|
+
img.onerror = null;
|
|
24
|
+
};
|
|
25
|
+
}, [src]);
|
|
26
|
+
const initialsCount = ["x-small", "small"].includes(cleanedProps.size) ? 1 : 2;
|
|
27
|
+
const initials = name.split(" ").map((word) => word[0]).join("").toLocaleUpperCase("en-US").slice(0, initialsCount);
|
|
28
|
+
return /* @__PURE__ */ jsx(
|
|
29
|
+
"div",
|
|
16
30
|
{
|
|
17
31
|
ref,
|
|
32
|
+
role: "img",
|
|
33
|
+
"aria-label": purpose === "informative" ? name : void 0,
|
|
34
|
+
"aria-hidden": purpose === "decoration" ? true : void 0,
|
|
18
35
|
className: clsx(classNames.root, styles[classNames.root], className),
|
|
19
36
|
...dataAttributes,
|
|
20
37
|
...rest,
|
|
21
|
-
children:
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
]
|
|
38
|
+
children: imageStatus === "loaded" ? /* @__PURE__ */ jsx(
|
|
39
|
+
"img",
|
|
40
|
+
{
|
|
41
|
+
src,
|
|
42
|
+
alt: "",
|
|
43
|
+
className: clsx(classNames.image, styles[classNames.image])
|
|
44
|
+
}
|
|
45
|
+
) : /* @__PURE__ */ jsx(
|
|
46
|
+
"div",
|
|
47
|
+
{
|
|
48
|
+
"aria-hidden": "true",
|
|
49
|
+
className: clsx(classNames.fallback, styles[classNames.fallback]),
|
|
50
|
+
children: initials
|
|
51
|
+
}
|
|
52
|
+
)
|
|
37
53
|
}
|
|
38
54
|
);
|
|
39
55
|
});
|
|
40
|
-
Avatar.displayName = Avatar
|
|
56
|
+
Avatar.displayName = "Avatar";
|
|
41
57
|
|
|
42
58
|
export { Avatar };
|
|
43
59
|
//# sourceMappingURL=Avatar.esm.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.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 { forwardRef,
|
|
1
|
+
{"version":3,"file":"Avatar.esm.js","sources":["../../../src/components/Avatar/Avatar.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 { forwardRef, useState, useEffect } from 'react';\nimport clsx from 'clsx';\nimport { AvatarProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Avatar.module.css';\n\n/** @public */\nexport const Avatar = forwardRef<HTMLDivElement, AvatarProps>((props, ref) => {\n const { classNames, dataAttributes, cleanedProps } = useStyles('Avatar', {\n size: 'medium',\n purpose: 'informative',\n ...props,\n });\n\n const { className, src, name, purpose, ...rest } = cleanedProps;\n\n const [imageStatus, setImageStatus] = useState<\n 'loading' | 'loaded' | 'error'\n >('loading');\n\n useEffect(() => {\n setImageStatus('loading');\n const img = new Image();\n img.onload = () => setImageStatus('loaded');\n img.onerror = () => setImageStatus('error');\n img.src = src;\n\n return () => {\n img.onload = null;\n img.onerror = null;\n };\n }, [src]);\n\n const initialsCount = ['x-small', 'small'].includes(cleanedProps.size)\n ? 1\n : 2;\n\n const initials = name\n .split(' ')\n .map(word => word[0])\n .join('')\n .toLocaleUpperCase('en-US')\n .slice(0, initialsCount);\n\n return (\n <div\n ref={ref}\n role=\"img\"\n aria-label={purpose === 'informative' ? name : undefined}\n aria-hidden={purpose === 'decoration' ? true : undefined}\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...dataAttributes}\n {...rest}\n >\n {imageStatus === 'loaded' ? (\n <img\n src={src}\n alt=\"\"\n className={clsx(classNames.image, styles[classNames.image])}\n />\n ) : (\n <div\n aria-hidden=\"true\"\n className={clsx(classNames.fallback, styles[classNames.fallback])}\n >\n {initials}\n </div>\n )}\n </div>\n );\n});\n\nAvatar.displayName = 'Avatar';\n"],"names":[],"mappings":";;;;;;AAuBO,MAAM,MAAA,GAAS,UAAA,CAAwC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC5E,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,QAAA,EAAU;AAAA,IACvE,IAAA,EAAM,QAAA;AAAA,IACN,OAAA,EAAS,aAAA;AAAA,IACT,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,GAAA,EAAK,MAAM,OAAA,EAAS,GAAG,MAAK,GAAI,YAAA;AAEnD,EAAA,MAAM,CAAC,WAAA,EAAa,cAAc,CAAA,GAAI,SAEpC,SAAS,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,cAAA,CAAe,SAAS,CAAA;AACxB,IAAA,MAAM,GAAA,GAAM,IAAI,KAAA,EAAM;AACtB,IAAA,GAAA,CAAI,MAAA,GAAS,MAAM,cAAA,CAAe,QAAQ,CAAA;AAC1C,IAAA,GAAA,CAAI,OAAA,GAAU,MAAM,cAAA,CAAe,OAAO,CAAA;AAC1C,IAAA,GAAA,CAAI,GAAA,GAAM,GAAA;AAEV,IAAA,OAAO,MAAM;AACX,MAAA,GAAA,CAAI,MAAA,GAAS,IAAA;AACb,MAAA,GAAA,CAAI,OAAA,GAAU,IAAA;AAAA,IAChB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,GAAG,CAAC,CAAA;AAER,EAAA,MAAM,aAAA,GAAgB,CAAC,SAAA,EAAW,OAAO,EAAE,QAAA,CAAS,YAAA,CAAa,IAAI,CAAA,GACjE,CAAA,GACA,CAAA;AAEJ,EAAA,MAAM,WAAW,IAAA,CACd,KAAA,CAAM,GAAG,CAAA,CACT,GAAA,CAAI,UAAQ,IAAA,CAAK,CAAC,CAAC,CAAA,CACnB,IAAA,CAAK,EAAE,CAAA,CACP,iBAAA,CAAkB,OAAO,CAAA,CACzB,KAAA,CAAM,GAAG,aAAa,CAAA;AAEzB,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,IAAA,EAAK,KAAA;AAAA,MACL,YAAA,EAAY,OAAA,KAAY,aAAA,GAAgB,IAAA,GAAO,MAAA;AAAA,MAC/C,aAAA,EAAa,OAAA,KAAY,YAAA,GAAe,IAAA,GAAO,MAAA;AAAA,MAC/C,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACH,GAAG,IAAA;AAAA,MAEH,0BAAgB,QAAA,mBACf,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,GAAA,EAAI,EAAA;AAAA,UACJ,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC;AAAA;AAAA,OAC5D,mBAEA,GAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,aAAA,EAAY,MAAA;AAAA,UACZ,WAAW,IAAA,CAAK,UAAA,CAAW,UAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA;AAAA,UAE/D,QAAA,EAAA;AAAA;AAAA;AACH;AAAA,GAEJ;AAEJ,CAAC;AAED,MAAA,CAAO,WAAA,GAAc,QAAA;;;;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
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 .Avatar-module_bui-AvatarRoot__3BSck {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n vertical-align: middle;\n border-radius: 100%;\n user-select: none;\n font-weight: 500;\n color: var(--bui-fg-primary);\n background-color: var(--bui-bg-surface-2);\n font-size: 1rem;\n line-height: 1;\n overflow: hidden;\n height: 2rem;\n width: 2rem;\n }\n\n .Avatar-module_bui-AvatarRoot__3BSck[data-size='small'] {\n height: 1.5rem;\n width: 1.5rem;\n }\n\n .Avatar-module_bui-AvatarRoot__3BSck[data-size='medium'] {\n height: 2rem;\n width: 2rem;\n }\n\n .Avatar-module_bui-AvatarRoot__3BSck[data-size='large'] {\n height: 3rem;\n width: 3rem;\n }\n\n .Avatar-module_bui-AvatarImage__2ehc- {\n object-fit: cover;\n height: 100%;\n width: 100%;\n }\n\n .Avatar-module_bui-AvatarFallback__3qnqR {\n align-items: center;\n display: flex;\n justify-content: center;\n height: 100%;\n width: 100%;\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-regular);\n box-shadow: inset 0 0 0 1px var(--bui-border);\n border-radius: var(--bui-radius-full);\n }\n}\n";
|
|
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 .Avatar-module_bui-AvatarRoot__3BSck {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n vertical-align: middle;\n border-radius: 100%;\n user-select: none;\n font-weight: 500;\n color: var(--bui-fg-primary);\n background-color: var(--bui-bg-surface-2);\n font-size: 1rem;\n line-height: 1;\n overflow: hidden;\n height: 2rem;\n width: 2rem;\n }\n\n .Avatar-module_bui-AvatarRoot__3BSck[data-size='x-small'] {\n height: 1.25rem;\n width: 1.25rem;\n }\n\n .Avatar-module_bui-AvatarRoot__3BSck[data-size='small'] {\n height: 1.5rem;\n width: 1.5rem;\n }\n\n .Avatar-module_bui-AvatarRoot__3BSck[data-size='medium'] {\n height: 2rem;\n width: 2rem;\n }\n\n .Avatar-module_bui-AvatarRoot__3BSck[data-size='large'] {\n height: 2.5rem;\n width: 2.5rem;\n }\n\n .Avatar-module_bui-AvatarRoot__3BSck[data-size='x-large'] {\n height: 3rem;\n width: 3rem;\n }\n\n .Avatar-module_bui-AvatarImage__2ehc- {\n object-fit: cover;\n height: 100%;\n width: 100%;\n display: block;\n }\n\n .Avatar-module_bui-AvatarFallback__3qnqR {\n align-items: center;\n display: flex;\n justify-content: center;\n height: 100%;\n width: 100%;\n font-size: var(--bui-font-size-3);\n font-weight: var(--bui-font-weight-regular);\n box-shadow: inset 0 0 0 1px var(--bui-border);\n border-radius: var(--bui-radius-full);\n }\n}\n";
|
|
4
4
|
var styles = {"bui-AvatarRoot":"Avatar-module_bui-AvatarRoot__3BSck","bui-AvatarImage":"Avatar-module_bui-AvatarImage__2ehc-","bui-AvatarFallback":"Avatar-module_bui-AvatarFallback__3qnqR"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -1,17 +1,15 @@
|
|
|
1
1
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
2
|
-
import {
|
|
2
|
+
import { Link } from 'react-aria-components';
|
|
3
3
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
4
4
|
import { useRef } from 'react';
|
|
5
5
|
import { RiShapesLine } from '@remixicon/react';
|
|
6
6
|
import { Text } from '../Text/Text.esm.js';
|
|
7
|
-
import { useNavigate, useHref } from 'react-router-dom';
|
|
8
7
|
import styles from './Header.module.css.esm.js';
|
|
9
8
|
import clsx from 'clsx';
|
|
10
9
|
|
|
11
10
|
const HeaderToolbar = (props) => {
|
|
12
11
|
const { classNames, cleanedProps } = useStyles("Header", props);
|
|
13
12
|
const { className, icon, title, titleLink, customActions, hasTabs } = cleanedProps;
|
|
14
|
-
let navigate = useNavigate();
|
|
15
13
|
const toolbarWrapperRef = useRef(null);
|
|
16
14
|
const toolbarContentRef = useRef(null);
|
|
17
15
|
const toolbarControlsRef = useRef(null);
|
|
@@ -25,7 +23,7 @@ const HeaderToolbar = (props) => {
|
|
|
25
23
|
),
|
|
26
24
|
/* @__PURE__ */ jsx(Text, { variant: "body-medium", children: title || "Your plugin" })
|
|
27
25
|
] });
|
|
28
|
-
return /* @__PURE__ */ jsx(
|
|
26
|
+
return /* @__PURE__ */ jsx(
|
|
29
27
|
"div",
|
|
30
28
|
{
|
|
31
29
|
className: clsx(
|
|
@@ -88,7 +86,7 @@ const HeaderToolbar = (props) => {
|
|
|
88
86
|
}
|
|
89
87
|
)
|
|
90
88
|
}
|
|
91
|
-
)
|
|
89
|
+
);
|
|
92
90
|
};
|
|
93
91
|
|
|
94
92
|
export { HeaderToolbar };
|
|
@@ -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
|
|
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 } 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 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\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 <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 );\n};\n"],"names":[],"mappings":";;;;;;;;;AA8BO,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;AAGF,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;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;AAEJ;;;;"}
|
|
@@ -5,60 +5,32 @@ import clsx from 'clsx';
|
|
|
5
5
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
6
6
|
import { useNavigate, useHref } from 'react-router-dom';
|
|
7
7
|
import { isExternalLink } from '../../utils/isExternalLink.esm.js';
|
|
8
|
-
import
|
|
9
|
-
import stylesText from '../Text/Text.module.css.esm.js';
|
|
8
|
+
import styles from './Link.module.css.esm.js';
|
|
10
9
|
|
|
11
10
|
const Link = forwardRef((props, ref) => {
|
|
12
11
|
const navigate = useNavigate();
|
|
13
|
-
const { classNames
|
|
14
|
-
const {
|
|
15
|
-
classNames: classNamesText,
|
|
16
|
-
dataAttributes: textDataAttributes,
|
|
17
|
-
cleanedProps
|
|
18
|
-
} = useStyles("Text", {
|
|
12
|
+
const { classNames, dataAttributes, cleanedProps } = useStyles("Link", {
|
|
19
13
|
variant: "body",
|
|
20
14
|
weight: "regular",
|
|
21
15
|
color: "primary",
|
|
22
16
|
...props
|
|
23
17
|
});
|
|
24
|
-
const { className,
|
|
18
|
+
const { className, href, ...restProps } = cleanedProps;
|
|
25
19
|
const isExternal = isExternalLink(href);
|
|
26
|
-
|
|
27
|
-
return /* @__PURE__ */ jsx(
|
|
28
|
-
Link$1,
|
|
29
|
-
{
|
|
30
|
-
ref,
|
|
31
|
-
className: clsx(
|
|
32
|
-
classNamesText.root,
|
|
33
|
-
classNamesLink.root,
|
|
34
|
-
stylesText[classNamesText.root],
|
|
35
|
-
stylesLink[classNamesLink.root],
|
|
36
|
-
className
|
|
37
|
-
),
|
|
38
|
-
"data-truncate": truncate,
|
|
39
|
-
href,
|
|
40
|
-
...textDataAttributes,
|
|
41
|
-
...restProps
|
|
42
|
-
}
|
|
43
|
-
);
|
|
44
|
-
}
|
|
45
|
-
return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: /* @__PURE__ */ jsx(
|
|
20
|
+
const component = /* @__PURE__ */ jsx(
|
|
46
21
|
Link$1,
|
|
47
22
|
{
|
|
48
23
|
ref,
|
|
49
|
-
className: clsx(
|
|
50
|
-
classNamesText.root,
|
|
51
|
-
classNamesLink.root,
|
|
52
|
-
stylesText[classNamesText.root],
|
|
53
|
-
stylesLink[classNamesLink.root],
|
|
54
|
-
className
|
|
55
|
-
),
|
|
56
|
-
"data-truncate": truncate,
|
|
57
|
-
...textDataAttributes,
|
|
24
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
58
25
|
href,
|
|
26
|
+
...dataAttributes,
|
|
59
27
|
...restProps
|
|
60
28
|
}
|
|
61
|
-
)
|
|
29
|
+
);
|
|
30
|
+
if (isExternal) {
|
|
31
|
+
return component;
|
|
32
|
+
}
|
|
33
|
+
return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: component });
|
|
62
34
|
});
|
|
63
35
|
Link.displayName = "Link";
|
|
64
36
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.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 { Link as AriaLink, RouterProvider } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport type { LinkProps } from './types';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport
|
|
1
|
+
{"version":3,"file":"Link.esm.js","sources":["../../../src/components/Link/Link.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 { Link as AriaLink, RouterProvider } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport type { LinkProps } from './types';\nimport { useNavigate, useHref } from 'react-router-dom';\nimport { isExternalLink } from '../../utils/isExternalLink';\nimport styles from './Link.module.css';\n\n/** @public */\nexport const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {\n const navigate = useNavigate();\n const { classNames, dataAttributes, cleanedProps } = useStyles('Link', {\n variant: 'body',\n weight: 'regular',\n color: 'primary',\n ...props,\n });\n\n const { className, href, ...restProps } = cleanedProps;\n\n const isExternal = isExternalLink(href);\n\n const component = (\n <AriaLink\n ref={ref}\n className={clsx(classNames.root, styles[classNames.root], className)}\n href={href}\n {...dataAttributes}\n {...restProps}\n />\n );\n\n // If it's an external link, render AriaLink without RouterProvider\n if (isExternal) {\n return component;\n }\n\n // For internal links, use RouterProvider\n return (\n <RouterProvider navigate={navigate} useHref={useHref}>\n {component}\n </RouterProvider>\n );\n});\n\nLink.displayName = 'Link';\n"],"names":["AriaLink"],"mappings":";;;;;;;;;AA0BO,MAAM,IAAA,GAAO,UAAA,CAAyC,CAAC,KAAA,EAAO,GAAA,KAAQ;AAC3E,EAAA,MAAM,WAAW,WAAA,EAAY;AAC7B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,MAAA,EAAQ;AAAA,IACrE,OAAA,EAAS,MAAA;AAAA,IACT,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,IAAA,EAAM,GAAG,WAAU,GAAI,YAAA;AAE1C,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AAEtC,EAAA,MAAM,SAAA,mBACJ,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MACnE,IAAA;AAAA,MACC,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAIF,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,OAAO,SAAA;AAAA,EACT;AAGA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EACjC,QAAA,EAAA,SAAA,EACH,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
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 .Link-module_bui-Link__3bbuU {\n font-family: var(--bui-font-regular);\n padding: 0;\n margin: 0;\n cursor: pointer;\n text-decoration-line: none;\n display: inline-block;\n\n &:hover {\n text-decoration-line: underline;\n text-decoration-style: solid;\n text-decoration-thickness: min(2px, max(1px, 0.05em));\n text-underline-offset: calc(0.025em + 2px);\n text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);\n }\n }\n}\n";
|
|
4
|
-
var
|
|
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 .Link-module_bui-Link__3bbuU {\n font-family: var(--bui-font-regular);\n padding: 0;\n margin: 0;\n cursor: pointer;\n text-decoration-line: none;\n display: inline-block;\n\n &:hover {\n text-decoration-line: underline;\n text-decoration-style: solid;\n text-decoration-thickness: min(2px, max(1px, 0.05em));\n text-underline-offset: calc(0.025em + 2px);\n text-decoration-color: color-mix(in srgb, currentColor 30%, transparent);\n }\n }\n\n .Link-module_bui-Link__3bbuU[data-variant='title-large'] {\n font-size: var(--bui-font-size-8);\n line-height: 140%;\n }\n\n .Link-module_bui-Link__3bbuU[data-variant='title-medium'] {\n font-size: var(--bui-font-size-7);\n line-height: 140%;\n }\n\n .Link-module_bui-Link__3bbuU[data-variant='title-small'] {\n font-size: var(--bui-font-size-6);\n line-height: 140%;\n }\n\n .Link-module_bui-Link__3bbuU[data-variant='title-x-small'] {\n font-size: var(--bui-font-size-5);\n line-height: 140%;\n }\n\n .Link-module_bui-Link__3bbuU[data-variant='body-large'] {\n font-size: var(--bui-font-size-4);\n line-height: 140%;\n }\n\n .Link-module_bui-Link__3bbuU[data-variant='body-medium'] {\n font-size: var(--bui-font-size-3);\n line-height: 140%;\n }\n\n .Link-module_bui-Link__3bbuU[data-variant='body-small'] {\n font-size: var(--bui-font-size-2);\n line-height: 140%;\n }\n\n .Link-module_bui-Link__3bbuU[data-variant='body-x-small'] {\n font-size: var(--bui-font-size-1);\n line-height: 140%;\n }\n\n .Link-module_bui-Link__3bbuU[data-weight='regular'] {\n font-weight: var(--bui-font-weight-regular);\n }\n\n .Link-module_bui-Link__3bbuU[data-weight='bold'] {\n font-weight: var(--bui-font-weight-bold);\n }\n\n .Link-module_bui-Link__3bbuU[data-color='primary'] {\n color: var(--bui-fg-primary);\n }\n\n .Link-module_bui-Link__3bbuU[data-color='secondary'] {\n color: var(--bui-fg-secondary);\n }\n\n .Link-module_bui-Link__3bbuU[data-color='danger'] {\n color: var(--bui-fg-danger);\n }\n\n .Link-module_bui-Link__3bbuU[data-color='warning'] {\n color: var(--bui-fg-warning);\n }\n\n .Link-module_bui-Link__3bbuU[data-color='success'] {\n color: var(--bui-fg-success);\n }\n\n .Link-module_bui-Link__3bbuU[data-truncate] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Link":"Link-module_bui-Link__3bbuU"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
|
-
export {
|
|
7
|
+
export { styles as default };
|
|
8
8
|
//# sourceMappingURL=Link.module.css.esm.js.map
|
|
@@ -1,6 +1,6 @@
|
|
|
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 .RadioGroup-module_bui-RadioGroup__v70Qu {\n display: flex;\n flex-direction: column;\n color: var(--bui-fg-primary);\n }\n\n .RadioGroup-module_bui-RadioGroup__v70Qu[data-orientation='horizontal'] .RadioGroup-module_bui-RadioGroupContent__1rG0a {\n flex-direction: row;\n gap: var(--bui-space-4);\n }\n\n .RadioGroup-module_bui-RadioGroupContent__1rG0a {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-2);\n }\n\n .RadioGroup-module_bui-Radio__1769d {\n display: flex;\n /* This is needed so the HiddenInput is positioned correctly */\n position: relative;\n align-items: center;\n gap: var(--bui-space-2);\n font-size: var(--bui-font-size-2);\n color: var(--bui-fg-primary);\n forced-color-adjust: none;\n\n &:before {\n content: '';\n display: block;\n width: 1rem;\n height: 1rem;\n box-sizing: border-box;\n border: 0.125rem solid var(--bui-border);\n background: var(--bui-gray-1);\n border-radius: var(--bui-radius-full);\n transition: all 200ms;\n }\n\n &[data-pressed]:before {\n border-color: var(--bui-border);\n }\n\n &[data-selected] {\n &:before {\n border-color: var(--bui-bg-solid);\n border-width: 0.25rem;\n }\n\n &[data-pressed]:before {\n border-color: var(--bui-bg-solid);\n }\n }\n\n &[data-focus-visible]:before {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n\n &:before {\n border-color: var(--bui-border-disabled);\n background: var(--bui-bg-disabled);\n }\n\n &[data-selected]:before {\n border-color: var(--bui-border-disabled);\n }\n }\n\n &[data-invalid]:before {\n border-color: var(--bui-border-danger);\n }\n\n &[data-invalid][data-selected]:before {\n border-color: var(--bui-border-danger);\n }\n\n /* Ensure disabled state prevails over invalid state */\n &[data-disabled][data-invalid] {\n color: var(--bui-fg-disabled);\n\n &:before {\n border-color: var(--bui-border-disabled);\n background: var(--bui-bg-disabled);\n }\n\n &[data-selected]:before {\n border-color: var(--bui-border-disabled);\n }\n }\n }\n}\n";
|
|
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 .RadioGroup-module_bui-RadioGroup__v70Qu {\n display: flex;\n flex-direction: column;\n color: var(--bui-fg-primary);\n }\n\n .RadioGroup-module_bui-RadioGroup__v70Qu[data-orientation='horizontal'] .RadioGroup-module_bui-RadioGroupContent__1rG0a {\n flex-direction: row;\n gap: var(--bui-space-4);\n }\n\n .RadioGroup-module_bui-RadioGroupContent__1rG0a {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-2);\n }\n\n .RadioGroup-module_bui-Radio__1769d {\n display: flex;\n /* This is needed so the HiddenInput is positioned correctly */\n position: relative;\n align-items: center;\n gap: var(--bui-space-2);\n font-size: var(--bui-font-size-2);\n color: var(--bui-fg-primary);\n forced-color-adjust: none;\n\n &:before {\n content: '';\n display: block;\n width: 1rem;\n height: 1rem;\n box-sizing: border-box;\n border: 0.125rem solid var(--bui-border);\n background: var(--bui-gray-1);\n border-radius: var(--bui-radius-full);\n transition: all 200ms;\n flex-shrink: 0;\n flex-grow: 0;\n }\n\n &[data-pressed]:before {\n border-color: var(--bui-border);\n }\n\n &[data-selected] {\n &:before {\n border-color: var(--bui-bg-solid);\n border-width: 0.25rem;\n }\n\n &[data-pressed]:before {\n border-color: var(--bui-bg-solid);\n }\n }\n\n &[data-focus-visible]:before {\n outline: 2px solid var(--bui-ring);\n outline-offset: 2px;\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: var(--bui-fg-disabled);\n\n &:before {\n border-color: var(--bui-border-disabled);\n background: var(--bui-bg-disabled);\n }\n\n &[data-selected]:before {\n border-color: var(--bui-border-disabled);\n }\n }\n\n &[data-invalid]:before {\n border-color: var(--bui-border-danger);\n }\n\n &[data-invalid][data-selected]:before {\n border-color: var(--bui-border-danger);\n }\n\n /* Ensure disabled state prevails over invalid state */\n &[data-disabled][data-invalid] {\n color: var(--bui-fg-disabled);\n\n &:before {\n border-color: var(--bui-border-disabled);\n background: var(--bui-bg-disabled);\n }\n\n &[data-selected]:before {\n border-color: var(--bui-border-disabled);\n }\n }\n }\n}\n";
|
|
4
4
|
var styles = {"bui-RadioGroup":"RadioGroup-module_bui-RadioGroup__v70Qu","bui-RadioGroupContent":"RadioGroup-module_bui-RadioGroupContent__1rG0a","bui-Radio":"RadioGroup-module_bui-Radio__1769d"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
@@ -6,8 +6,7 @@ import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
|
|
|
6
6
|
import { FieldError } from '../FieldError/FieldError.esm.js';
|
|
7
7
|
import { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';
|
|
8
8
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
9
|
-
import
|
|
10
|
-
import stylesTextField from '../TextField/TextField.module.css.esm.js';
|
|
9
|
+
import styles from './SearchField.module.css.esm.js';
|
|
11
10
|
|
|
12
11
|
const SearchField = forwardRef(
|
|
13
12
|
(props, ref) => {
|
|
@@ -25,18 +24,15 @@ const SearchField = forwardRef(
|
|
|
25
24
|
);
|
|
26
25
|
}
|
|
27
26
|
}, [label, ariaLabel, ariaLabelledBy]);
|
|
28
|
-
const { classNames
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
startCollapsed: false,
|
|
38
|
-
...props
|
|
39
|
-
});
|
|
27
|
+
const { classNames, dataAttributes, style, cleanedProps } = useStyles(
|
|
28
|
+
"SearchField",
|
|
29
|
+
{
|
|
30
|
+
size: "small",
|
|
31
|
+
placeholder: "Search",
|
|
32
|
+
startCollapsed: false,
|
|
33
|
+
...props
|
|
34
|
+
}
|
|
35
|
+
);
|
|
40
36
|
const {
|
|
41
37
|
className,
|
|
42
38
|
description,
|
|
@@ -69,13 +65,7 @@ const SearchField = forwardRef(
|
|
|
69
65
|
return /* @__PURE__ */ jsxs(
|
|
70
66
|
SearchField$1,
|
|
71
67
|
{
|
|
72
|
-
className: clsx(
|
|
73
|
-
textFieldClassNames.root,
|
|
74
|
-
searchFieldClassNames.root,
|
|
75
|
-
stylesTextField[textFieldClassNames.root],
|
|
76
|
-
stylesSearchField[searchFieldClassNames.root],
|
|
77
|
-
className
|
|
78
|
-
),
|
|
68
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
79
69
|
...dataAttributes,
|
|
80
70
|
"aria-label": ariaLabel,
|
|
81
71
|
"aria-labelledby": ariaLabelledBy,
|
|
@@ -98,8 +88,8 @@ const SearchField = forwardRef(
|
|
|
98
88
|
"div",
|
|
99
89
|
{
|
|
100
90
|
className: clsx(
|
|
101
|
-
|
|
102
|
-
|
|
91
|
+
classNames.inputWrapper,
|
|
92
|
+
styles[classNames.inputWrapper]
|
|
103
93
|
),
|
|
104
94
|
"data-size": dataAttributes["data-size"],
|
|
105
95
|
children: [
|
|
@@ -107,8 +97,8 @@ const SearchField = forwardRef(
|
|
|
107
97
|
"div",
|
|
108
98
|
{
|
|
109
99
|
className: clsx(
|
|
110
|
-
|
|
111
|
-
|
|
100
|
+
classNames.inputIcon,
|
|
101
|
+
styles[classNames.inputIcon]
|
|
112
102
|
),
|
|
113
103
|
"data-size": dataAttributes["data-size"],
|
|
114
104
|
"aria-hidden": "true",
|
|
@@ -118,10 +108,7 @@ const SearchField = forwardRef(
|
|
|
118
108
|
/* @__PURE__ */ jsx(
|
|
119
109
|
Input,
|
|
120
110
|
{
|
|
121
|
-
className: clsx(
|
|
122
|
-
textFieldClassNames.input,
|
|
123
|
-
stylesTextField[textFieldClassNames.input]
|
|
124
|
-
),
|
|
111
|
+
className: clsx(classNames.input, styles[classNames.input]),
|
|
125
112
|
...icon !== false && { "data-icon": true },
|
|
126
113
|
placeholder
|
|
127
114
|
}
|
|
@@ -129,10 +116,7 @@ const SearchField = forwardRef(
|
|
|
129
116
|
/* @__PURE__ */ jsx(
|
|
130
117
|
Button,
|
|
131
118
|
{
|
|
132
|
-
className: clsx(
|
|
133
|
-
searchFieldClassNames.clear,
|
|
134
|
-
stylesSearchField[searchFieldClassNames.clear]
|
|
135
|
-
),
|
|
119
|
+
className: clsx(classNames.clear, styles[classNames.clear]),
|
|
136
120
|
"data-size": dataAttributes["data-size"],
|
|
137
121
|
children: /* @__PURE__ */ jsx(RiCloseCircleLine, {})
|
|
138
122
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.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, useEffect, useState } from 'react';\nimport {\n Input,\n SearchField as AriaSearchField,\n Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\nimport
|
|
1
|
+
{"version":3,"file":"SearchField.esm.js","sources":["../../../src/components/SearchField/SearchField.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, useEffect, useState } from 'react';\nimport {\n Input,\n SearchField as AriaSearchField,\n Button,\n} from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport { RiSearch2Line, RiCloseCircleLine } from '@remixicon/react';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './SearchField.module.css';\n\nimport type { SearchFieldProps } from './types';\n\n/** @public */\nexport const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(\n (props, ref) => {\n const {\n label,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n } = props;\n\n const [isCollapsed, setIsCollapsed] = useState(false);\n const [shouldCollapse, setShouldCollapse] = useState(true);\n\n useEffect(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n 'SearchField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n );\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n const { classNames, dataAttributes, style, cleanedProps } = useStyles(\n 'SearchField',\n {\n size: 'small',\n placeholder: 'Search',\n startCollapsed: false,\n ...props,\n },\n );\n\n const {\n className,\n description,\n icon,\n isRequired,\n secondaryLabel,\n placeholder,\n startCollapsed,\n ...rest\n } = cleanedProps;\n\n // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n const secondaryLabelText =\n secondaryLabel || (isRequired ? 'Required' : null);\n\n const handleClick = (isFocused: boolean) => {\n props.onFocusChange?.(isFocused);\n if (shouldCollapse) {\n if (isFocused) {\n setIsCollapsed(true);\n } else {\n setIsCollapsed(false);\n }\n }\n };\n\n const handleChange = (value: string) => {\n props.onChange?.(value);\n if (value.length > 0) {\n setShouldCollapse(false);\n } else {\n setShouldCollapse(true);\n }\n };\n\n return (\n <AriaSearchField\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...dataAttributes}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n data-collapsed={isCollapsed}\n onFocusChange={handleClick}\n onChange={handleChange}\n style={style}\n {...rest}\n ref={ref}\n >\n <FieldLabel\n label={label}\n secondaryLabel={secondaryLabelText}\n description={description}\n />\n <div\n className={clsx(\n classNames.inputWrapper,\n styles[classNames.inputWrapper],\n )}\n data-size={dataAttributes['data-size']}\n >\n {icon !== false && (\n <div\n className={clsx(\n classNames.inputIcon,\n styles[classNames.inputIcon],\n )}\n data-size={dataAttributes['data-size']}\n aria-hidden=\"true\"\n >\n {icon || <RiSearch2Line />}\n </div>\n )}\n <Input\n className={clsx(classNames.input, styles[classNames.input])}\n {...(icon !== false && { 'data-icon': true })}\n placeholder={placeholder}\n />\n <Button\n className={clsx(classNames.clear, styles[classNames.clear])}\n data-size={dataAttributes['data-size']}\n >\n <RiCloseCircleLine />\n </Button>\n </div>\n <FieldError />\n </AriaSearchField>\n );\n },\n);\n\nSearchField.displayName = 'searchField';\n"],"names":["AriaSearchField"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
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 .SearchField-module_bui-SearchField__2TyT_ {\n flex: 1;\n flex-shrink: 0;\n\n &[data-empty] {\n .SearchField-module_bui-
|
|
4
|
-
var
|
|
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 .SearchField-module_bui-SearchField__2TyT_ {\n display: flex;\n flex-direction: column;\n font-family: var(--bui-font-regular);\n width: 100%;\n flex: 1;\n flex-shrink: 0;\n\n &[data-empty] {\n .SearchField-module_bui-SearchFieldClear__1gJQc {\n display: none;\n }\n }\n\n &[data-startCollapsed='true'] {\n transition: flex-basis 0.3s ease-in-out;\n padding: 0;\n flex: 0 1 auto;\n\n &[data-collapsed='true'] {\n flex-basis: 200px;\n }\n\n &[data-collapsed='false'] {\n cursor: pointer;\n\n &[data-size='medium'] {\n flex-basis: 2.5rem;\n height: 2.5rem;\n }\n\n &[data-size='small'] {\n flex-basis: 2rem;\n height: 2rem;\n }\n\n &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n &::placeholder {\n opacity: 0;\n }\n }\n\n &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n &::placeholder {\n opacity: 0;\n }\n }\n\n .SearchField-module_bui-SearchFieldWrapper__37bMg {\n .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n padding-right: 0px;\n }\n }\n }\n }\n }\n\n .SearchField-module_bui-SearchFieldWrapper__37bMg {\n position: relative;\n\n .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n padding-right: var(--bui-space-6);\n }\n\n &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n height: 2rem;\n }\n\n &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj {\n height: 2.5rem;\n }\n\n &[data-size='small'] .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n padding-left: var(--bui-space-8);\n }\n\n &[data-size='medium'] .SearchField-module_bui-SearchFieldInput__3Opoj[data-icon] {\n padding-left: var(--bui-space-9);\n }\n }\n\n .SearchField-module_bui-SearchFieldInputIcon__EA0t9 {\n position: absolute;\n display: flex;\n justify-content: center;\n left: 0;\n top: 50%;\n transform: translateY(-50%);\n margin-right: var(--bui-space-1);\n color: var(--bui-fg-primary);\n pointer-events: none;\n /* To animate the icon when the input is collapsed */\n transition: left 0.2s ease-in-out;\n\n &[data-size='small'] {\n width: 2rem;\n }\n\n &[data-size='medium'] {\n width: 2.5rem;\n }\n\n &[data-size='small'] svg {\n width: 1rem;\n height: 1rem;\n }\n\n &[data-size='medium'] svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .SearchField-module_bui-SearchFieldInput__3Opoj {\n display: flex;\n align-items: center;\n padding: 0 var(--bui-space-3);\n border-radius: var(--bui-radius-2);\n border: 1px solid var(--bui-border);\n background-color: var(--bui-bg-surface-1);\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 transition: padding 0.3s ease-in-out, border-color 0.2s ease-in-out,\n outline-color 0.2s ease-in-out;\n width: 100%;\n height: 100%;\n cursor: inherit;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &[data-focused] {\n outline-color: var(--bui-border-pressed);\n outline-width: 0px;\n }\n\n &[data-hovered] {\n border-color: var(--bui-border-hover);\n }\n\n &[data-focused] {\n border-color: var(--bui-border-pressed);\n outline-width: 0px;\n }\n\n &[data-invalid] {\n border-color: var(--bui-fg-danger);\n }\n\n &[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n border: 1px solid var(--bui-border-disabled);\n }\n }\n\n .SearchField-module_bui-SearchFieldClear__1gJQc {\n position: absolute;\n right: 0;\n top: 0;\n bottom: 0;\n display: flex;\n align-items: center;\n justify-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\n &:hover {\n color: var(--bui-fg-primary);\n }\n\n &[data-size='small'] {\n width: 2rem;\n height: 2rem;\n }\n\n &[data-size='medium'] {\n width: 2.5rem;\n height: 2.5rem;\n }\n\n & svg {\n width: 1rem;\n height: 1rem;\n }\n }\n}\n";
|
|
4
|
+
var styles = {"bui-SearchField":"SearchField-module_bui-SearchField__2TyT_","bui-SearchFieldClear":"SearchField-module_bui-SearchFieldClear__1gJQc","bui-SearchFieldInput":"SearchField-module_bui-SearchFieldInput__3Opoj","bui-SearchFieldWrapper":"SearchField-module_bui-SearchFieldWrapper__37bMg","bui-SearchFieldInputIcon":"SearchField-module_bui-SearchFieldInputIcon__EA0t9"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
|
-
export {
|
|
7
|
+
export { styles as default };
|
|
8
8
|
//# sourceMappingURL=SearchField.module.css.esm.js.map
|
|
@@ -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 .Table-module_bui-Table__BkcBL {\n width: 100%;\n caption-side: bottom;\n border-collapse: collapse;\n }\n\n .Table-module_bui-TableHeader__3Lh_9 {\n border-bottom: 1px solid var(--bui-border);\n transition: color 0.2s ease-in-out;\n }\n\n .Table-module_bui-TableHead__y-Yzm {\n text-align: left;\n padding: var(--bui-space-3);\n font-size: var(--bui-font-size-3);\n color: var(--bui-fg-primary);\n\n &:hover {\n .Table-module_bui-TableHeadSortButton__Slxp- {\n opacity: 1;\n }\n }\n }\n\n .Table-module_bui-TableHeadContent__1Buiu {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-1);\n }\n\n .Table-module_bui-TableHeadSortButton__Slxp- {\n cursor: pointer;\n user-select: none;\n display: inline-flex;\n align-items: center;\n gap: var(--bui-space-1);\n opacity: 0;\n transition: opacity 0.1s ease-in-out;\n color: var(--bui-fg-secondary);\n\n & svg {\n transition: transform 0.1s ease-in-out;\n }\n\n &[data-sort-order='asc'] svg {\n opacity: 1;\n transform: rotate(0);\n }\n\n &[data-sort-order='desc'] svg {\n opacity: 1;\n transform: rotate(180deg);\n }\n }\n\n .Table-module_bui-TableBody__2hcz_ {\n color: var(--bui-fg-primary);\n }\n\n .Table-module_bui-TableRow__3S2EQ {\n border-bottom: 1px solid var(--bui-border);\n transition: color 0.2s ease-in-out;\n\n &[data-react-aria-pressable='true'] {\n cursor: pointer;\n }\n }\n\n .Table-module_bui-TableBody__2hcz_ .Table-module_bui-TableRow__3S2EQ:hover {\n background-color: var(--bui-gray-2);\n }\n\n .Table-module_bui-TableCell__1C-Gr {\n padding: var(--bui-space-3);\n font-size: var(--bui-font-size-3);\n }\n\n .Table-module_bui-TableCell__1C-Gr {\n padding: var(--bui-space-3);\n font-size: var(--bui-font-size-3);\n }\n\n .Table-module_bui-TableCellContentWrapper__2zDK3 {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n }\n\n .Table-module_bui-TableCellIcon__118Vd,\n .Table-module_bui-TableCellIcon__118Vd svg {\n display: inline-flex;\n align-items: center;\n color: var(--bui-fg-primary);\n }\n\n .Table-module_bui-TableCellContent__35knW {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-0_5);\n }\n\n .Table-module_bui-TableCellProfile__34xxd {\n display: flex;\n flex-direction: row;\n gap: var(--bui-space-2);\n align-items: center;\n }\n
|
|
4
|
-
var styles = {"bui-Table":"Table-module_bui-Table__BkcBL","bui-TableHeader":"Table-module_bui-TableHeader__3Lh_9","bui-TableHead":"Table-module_bui-TableHead__y-Yzm","bui-TableHeadSortButton":"Table-module_bui-TableHeadSortButton__Slxp-","bui-TableHeadContent":"Table-module_bui-TableHeadContent__1Buiu","bui-TableBody":"Table-module_bui-TableBody__2hcz_","bui-TableRow":"Table-module_bui-TableRow__3S2EQ","bui-TableCell":"Table-module_bui-TableCell__1C-Gr","bui-TableCellContentWrapper":"Table-module_bui-TableCellContentWrapper__2zDK3","bui-TableCellIcon":"Table-module_bui-TableCellIcon__118Vd","bui-TableCellContent":"Table-module_bui-TableCellContent__35knW","bui-TableCellProfile":"Table-module_bui-TableCellProfile__34xxd"
|
|
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 .Table-module_bui-Table__BkcBL {\n width: 100%;\n caption-side: bottom;\n border-collapse: collapse;\n }\n\n .Table-module_bui-TableHeader__3Lh_9 {\n border-bottom: 1px solid var(--bui-border);\n transition: color 0.2s ease-in-out;\n }\n\n .Table-module_bui-TableHead__y-Yzm {\n text-align: left;\n padding: var(--bui-space-3);\n font-size: var(--bui-font-size-3);\n color: var(--bui-fg-primary);\n\n &:hover {\n .Table-module_bui-TableHeadSortButton__Slxp- {\n opacity: 1;\n }\n }\n }\n\n .Table-module_bui-TableHeadContent__1Buiu {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-1);\n }\n\n .Table-module_bui-TableHeadSortButton__Slxp- {\n cursor: pointer;\n user-select: none;\n display: inline-flex;\n align-items: center;\n gap: var(--bui-space-1);\n opacity: 0;\n transition: opacity 0.1s ease-in-out;\n color: var(--bui-fg-secondary);\n\n & svg {\n transition: transform 0.1s ease-in-out;\n }\n\n &[data-sort-order='asc'] svg {\n opacity: 1;\n transform: rotate(0);\n }\n\n &[data-sort-order='desc'] svg {\n opacity: 1;\n transform: rotate(180deg);\n }\n }\n\n .Table-module_bui-TableBody__2hcz_ {\n color: var(--bui-fg-primary);\n }\n\n .Table-module_bui-TableRow__3S2EQ {\n border-bottom: 1px solid var(--bui-border);\n transition: color 0.2s ease-in-out;\n\n &[data-react-aria-pressable='true'] {\n cursor: pointer;\n }\n }\n\n .Table-module_bui-TableBody__2hcz_ .Table-module_bui-TableRow__3S2EQ:hover {\n background-color: var(--bui-gray-2);\n }\n\n .Table-module_bui-TableCell__1C-Gr {\n padding: var(--bui-space-3);\n font-size: var(--bui-font-size-3);\n }\n\n .Table-module_bui-TableCell__1C-Gr {\n padding: var(--bui-space-3);\n font-size: var(--bui-font-size-3);\n }\n\n .Table-module_bui-TableCellContentWrapper__2zDK3 {\n display: inline-flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n }\n\n .Table-module_bui-TableCellIcon__118Vd,\n .Table-module_bui-TableCellIcon__118Vd svg {\n display: inline-flex;\n align-items: center;\n color: var(--bui-fg-primary);\n }\n\n .Table-module_bui-TableCellContent__35knW {\n display: flex;\n flex-direction: column;\n gap: var(--bui-space-0_5);\n }\n\n .Table-module_bui-TableCellProfile__34xxd {\n display: flex;\n flex-direction: row;\n gap: var(--bui-space-2);\n align-items: center;\n }\n}\n";
|
|
4
|
+
var styles = {"bui-Table":"Table-module_bui-Table__BkcBL","bui-TableHeader":"Table-module_bui-TableHeader__3Lh_9","bui-TableHead":"Table-module_bui-TableHead__y-Yzm","bui-TableHeadSortButton":"Table-module_bui-TableHeadSortButton__Slxp-","bui-TableHeadContent":"Table-module_bui-TableHeadContent__1Buiu","bui-TableBody":"Table-module_bui-TableBody__2hcz_","bui-TableRow":"Table-module_bui-TableRow__3S2EQ","bui-TableCell":"Table-module_bui-TableCell__1C-Gr","bui-TableCellContentWrapper":"Table-module_bui-TableCellContentWrapper__2zDK3","bui-TableCellIcon":"Table-module_bui-TableCellIcon__118Vd","bui-TableCellContent":"Table-module_bui-TableCellContent__35knW","bui-TableCellProfile":"Table-module_bui-TableCellProfile__34xxd"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
7
|
export { styles as default };
|
|
@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { Text } from '../../Text/Text.esm.js';
|
|
4
4
|
import { Link } from '../../Link/Link.esm.js';
|
|
5
|
-
import { Avatar } from '
|
|
5
|
+
import { Avatar } from '../../Avatar/Avatar.esm.js';
|
|
6
6
|
import { useStyles } from '../../../hooks/useStyles.esm.js';
|
|
7
7
|
import { Cell } from 'react-aria-components';
|
|
8
8
|
import styles from '../Table.module.css.esm.js';
|
|
@@ -29,39 +29,7 @@ const CellProfile = (props) => {
|
|
|
29
29
|
styles[classNames.cellContentWrapper]
|
|
30
30
|
),
|
|
31
31
|
children: [
|
|
32
|
-
/* @__PURE__ */ jsx(
|
|
33
|
-
Avatar.Root,
|
|
34
|
-
{
|
|
35
|
-
className: clsx(
|
|
36
|
-
classNames.cellProfileAvatar,
|
|
37
|
-
styles[classNames.cellProfileAvatar]
|
|
38
|
-
),
|
|
39
|
-
children: [
|
|
40
|
-
/* @__PURE__ */ jsx(
|
|
41
|
-
Avatar.Image,
|
|
42
|
-
{
|
|
43
|
-
src,
|
|
44
|
-
width: "20",
|
|
45
|
-
height: "20",
|
|
46
|
-
className: clsx(
|
|
47
|
-
classNames.cellProfileAvatarImage,
|
|
48
|
-
styles[classNames.cellProfileAvatarImage]
|
|
49
|
-
)
|
|
50
|
-
}
|
|
51
|
-
),
|
|
52
|
-
/* @__PURE__ */ jsx(
|
|
53
|
-
Avatar.Fallback,
|
|
54
|
-
{
|
|
55
|
-
className: clsx(
|
|
56
|
-
classNames.cellProfileAvatarFallback,
|
|
57
|
-
styles[classNames.cellProfileAvatarFallback]
|
|
58
|
-
),
|
|
59
|
-
children: (name || "").split(" ").map((word) => word[0]).join("").toLocaleUpperCase("en-US").slice(0, 1)
|
|
60
|
-
}
|
|
61
|
-
)
|
|
62
|
-
]
|
|
63
|
-
}
|
|
64
|
-
) }),
|
|
32
|
+
src && name && /* @__PURE__ */ jsx(Avatar, { src, name, size: "x-small", purpose: "decoration" }),
|
|
65
33
|
/* @__PURE__ */ jsxs(
|
|
66
34
|
"div",
|
|
67
35
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CellProfile.esm.js","sources":["../../../../src/components/Table/components/CellProfile.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 clsx from 'clsx';\nimport { CellProfileProps } from '../types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { Avatar } from '
|
|
1
|
+
{"version":3,"file":"CellProfile.esm.js","sources":["../../../../src/components/Table/components/CellProfile.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 clsx from 'clsx';\nimport { CellProfileProps } from '../types';\nimport { Text } from '../../Text/Text';\nimport { Link } from '../../Link/Link';\nimport { Avatar } from '../../Avatar';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { Cell as ReactAriaCell } from 'react-aria-components';\nimport styles from '../Table.module.css';\n\n/** @public */\nexport const CellProfile = (props: CellProfileProps) => {\n const { classNames, cleanedProps } = useStyles<'Table', CellProfileProps>(\n 'Table',\n {\n color: 'primary',\n ...props,\n },\n );\n const { className, src, name, href, description, color, ...rest } =\n cleanedProps;\n\n return (\n <ReactAriaCell\n className={clsx(classNames.cell, styles[classNames.cell], className)}\n {...rest}\n >\n <div\n className={clsx(\n classNames.cellContentWrapper,\n styles[classNames.cellContentWrapper],\n )}\n >\n {src && name && (\n <Avatar src={src} name={name} size=\"x-small\" purpose=\"decoration\" />\n )}\n <div\n className={clsx(\n classNames.cellContent,\n styles[classNames.cellContent],\n )}\n >\n {name && href ? (\n <Link href={href}>{name}</Link>\n ) : (\n <Text as=\"p\" variant=\"body-medium\" color={color}>\n {name}\n </Text>\n )}\n {description && (\n <Text variant=\"body-medium\" color=\"secondary\">\n {description}\n </Text>\n )}\n </div>\n </div>\n </ReactAriaCell>\n );\n};\n"],"names":["ReactAriaCell"],"mappings":";;;;;;;;;AA0BO,MAAM,WAAA,GAAc,CAAC,KAAA,KAA4B;AACtD,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,SAAA;AAAA,IACnC,OAAA;AAAA,IACA;AAAA,MACE,KAAA,EAAO,SAAA;AAAA,MACP,GAAG;AAAA;AACL,GACF;AACA,EAAA,MAAM,EAAE,WAAW,GAAA,EAAK,IAAA,EAAM,MAAM,WAAA,EAAa,KAAA,EAAO,GAAG,IAAA,EAAK,GAC9D,YAAA;AAEF,EAAA,uBACE,GAAA;AAAA,IAACA,IAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACC,SAAA,EAAW,IAAA;AAAA,YACT,UAAA,CAAW,kBAAA;AAAA,YACX,MAAA,CAAO,WAAW,kBAAkB;AAAA,WACtC;AAAA,UAEC,QAAA,EAAA;AAAA,YAAA,GAAA,IAAO,IAAA,wBACL,MAAA,EAAA,EAAO,GAAA,EAAU,MAAY,IAAA,EAAK,SAAA,EAAU,SAAQ,YAAA,EAAa,CAAA;AAAA,4BAEpE,IAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,SAAA,EAAW,IAAA;AAAA,kBACT,UAAA,CAAW,WAAA;AAAA,kBACX,MAAA,CAAO,WAAW,WAAW;AAAA,iBAC/B;AAAA,gBAEC,QAAA,EAAA;AAAA,kBAAA,IAAA,IAAQ,IAAA,mBACP,GAAA,CAAC,IAAA,EAAA,EAAK,IAAA,EAAa,QAAA,EAAA,IAAA,EAAK,CAAA,mBAExB,GAAA,CAAC,IAAA,EAAA,EAAK,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,aAAA,EAAc,OAChC,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,kBAED,+BACC,GAAA,CAAC,IAAA,EAAA,EAAK,SAAQ,aAAA,EAAc,KAAA,EAAM,aAC/B,QAAA,EAAA,WAAA,EACH;AAAA;AAAA;AAAA;AAEJ;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;;;;"}
|
|
@@ -2,7 +2,7 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
5
|
-
import
|
|
5
|
+
import styles from './Text.module.css.esm.js';
|
|
6
6
|
|
|
7
7
|
function TextComponent(props, ref) {
|
|
8
8
|
const Component = props.as || "span";
|
|
@@ -12,12 +12,12 @@ function TextComponent(props, ref) {
|
|
|
12
12
|
color: "primary",
|
|
13
13
|
...props
|
|
14
14
|
});
|
|
15
|
-
const { className, ...restProps } = cleanedProps;
|
|
15
|
+
const { className, truncate, ...restProps } = cleanedProps;
|
|
16
16
|
return /* @__PURE__ */ jsx(
|
|
17
17
|
Component,
|
|
18
18
|
{
|
|
19
19
|
ref,
|
|
20
|
-
className: clsx(classNames.root,
|
|
20
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
21
21
|
...dataAttributes,
|
|
22
22
|
...restProps
|
|
23
23
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.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 clsx from 'clsx';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Text.module.css';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n props: TextProps<T>,\n ref: React.Ref<any>,\n) {\n const Component = props.as || 'span';\n\n const { classNames, dataAttributes, cleanedProps } = useStyles('Text', {\n variant: 'body-medium',\n weight: 'regular',\n color: 'primary',\n ...props,\n });\n\n const { className, ...restProps } = cleanedProps;\n\n return (\n <Component\n ref={ref}\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...dataAttributes}\n {...restProps}\n />\n );\n}\n\nTextComponent.displayName = 'Text';\n\n/** @public */\nexport const Text = forwardRef(TextComponent) as {\n <T extends ElementType = 'p'>(\n props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n ): React.ReactElement<TextProps<T>, T>;\n displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":[
|
|
1
|
+
{"version":3,"file":"Text.esm.js","sources":["../../../src/components/Text/Text.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 clsx from 'clsx';\nimport type { ElementType } from 'react';\nimport type { TextProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './Text.module.css';\n\nfunction TextComponent<T extends ElementType = 'span'>(\n props: TextProps<T>,\n ref: React.Ref<any>,\n) {\n const Component = props.as || 'span';\n\n const { classNames, dataAttributes, cleanedProps } = useStyles('Text', {\n variant: 'body-medium',\n weight: 'regular',\n color: 'primary',\n ...props,\n });\n\n const { className, truncate, ...restProps } = cleanedProps;\n\n return (\n <Component\n ref={ref}\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...dataAttributes}\n {...restProps}\n />\n );\n}\n\nTextComponent.displayName = 'Text';\n\n/** @public */\nexport const Text = forwardRef(TextComponent) as {\n <T extends ElementType = 'p'>(\n props: TextProps<T> & { ref?: React.ComponentPropsWithRef<T>['ref'] },\n ): React.ReactElement<TextProps<T>, T>;\n displayName: string;\n};\n\nText.displayName = 'Text';\n"],"names":[],"mappings":";;;;;;AAuBA,SAAS,aAAA,CACP,OACA,GAAA,EACA;AACA,EAAA,MAAM,SAAA,GAAY,MAAM,EAAA,IAAM,MAAA;AAE9B,EAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,YAAA,EAAa,GAAI,UAAU,MAAA,EAAQ;AAAA,IACrE,OAAA,EAAS,aAAA;AAAA,IACT,MAAA,EAAQ,SAAA;AAAA,IACR,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AAED,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,WAAU,GAAI,YAAA;AAE9C,EAAA,uBACE,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,cAAA;AAAA,MACH,GAAG;AAAA;AAAA,GACN;AAEJ;AAEA,aAAA,CAAc,WAAA,GAAc,MAAA;AAGrB,MAAM,IAAA,GAAO,WAAW,aAAa;AAO5C,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
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 .Text-module_bui-Text__7NvCl {\n font-family: var(--bui-font-regular);\n padding: 0;\n margin: 0;\n }\n\n .Text-module_bui-Text__7NvCl[data-variant='title-large'] {\n font-size: var(--bui-font-size-8);\n line-height: 140%;\n }\n\n .Text-module_bui-Text__7NvCl[data-variant='title-medium'] {\n font-size: var(--bui-font-size-7);\n line-height: 140%;\n }\n\n .Text-module_bui-Text__7NvCl[data-variant='title-small'] {\n font-size: var(--bui-font-size-6);\n line-height: 140%;\n }\n\n .Text-module_bui-Text__7NvCl[data-variant='title-x-small'] {\n font-size: var(--bui-font-size-5);\n line-height: 140%;\n }\n\n .Text-module_bui-Text__7NvCl[data-variant='body-large'] {\n font-size: var(--bui-font-size-4);\n line-height: 140%;\n }\n\n .Text-module_bui-Text__7NvCl[data-variant='body-medium'] {\n font-size: var(--bui-font-size-3);\n line-height: 140%;\n }\n\n .Text-module_bui-Text__7NvCl[data-variant='body-small'] {\n font-size: var(--bui-font-size-2);\n line-height: 140%;\n }\n\n .Text-module_bui-Text__7NvCl[data-variant='body-x-small'] {\n font-size: var(--bui-font-size-1);\n line-height: 140%;\n }\n\n .Text-module_bui-Text__7NvCl[data-weight='regular'] {\n font-weight: var(--bui-font-weight-regular);\n }\n\n .Text-module_bui-Text__7NvCl[data-weight='bold'] {\n font-weight: var(--bui-font-weight-bold);\n }\n\n .Text-module_bui-Text__7NvCl[data-color='primary'] {\n color: var(--bui-fg-primary);\n }\n\n .Text-module_bui-Text__7NvCl[data-color='secondary'] {\n color: var(--bui-fg-secondary);\n }\n\n .Text-module_bui-Text__7NvCl[data-color='danger'] {\n color: var(--bui-fg-danger);\n }\n\n .Text-module_bui-Text__7NvCl[data-color='warning'] {\n color: var(--bui-fg-warning);\n }\n\n .Text-module_bui-Text__7NvCl[data-color='success'] {\n color: var(--bui-fg-success);\n }\n\n .Text-module_bui-Text__7NvCl[data-truncate] {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .Text-module_bui-Text__7NvCl[data-as='span'],\n .Text-module_bui-Text__7NvCl[data-as='label'],\n .Text-module_bui-Text__7NvCl[data-as='strong'],\n .Text-module_bui-Text__7NvCl[data-as='em'],\n .Text-module_bui-Text__7NvCl[data-as='small'] {\n display: inline-block;\n }\n}\n";
|
|
4
|
-
var
|
|
4
|
+
var styles = {"bui-Text":"Text-module_bui-Text__7NvCl"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
|
-
export {
|
|
7
|
+
export { styles as default };
|
|
8
8
|
//# sourceMappingURL=Text.module.css.esm.js.map
|
|
@@ -5,7 +5,7 @@ import clsx from 'clsx';
|
|
|
5
5
|
import { FieldLabel } from '../FieldLabel/FieldLabel.esm.js';
|
|
6
6
|
import { FieldError } from '../FieldError/FieldError.esm.js';
|
|
7
7
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
8
|
-
import
|
|
8
|
+
import styles from './TextField.module.css.esm.js';
|
|
9
9
|
|
|
10
10
|
const TextField = forwardRef(
|
|
11
11
|
(props, ref) => {
|
|
@@ -41,7 +41,7 @@ const TextField = forwardRef(
|
|
|
41
41
|
return /* @__PURE__ */ jsxs(
|
|
42
42
|
TextField$1,
|
|
43
43
|
{
|
|
44
|
-
className: clsx(classNames.root,
|
|
44
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
45
45
|
...dataAttributes,
|
|
46
46
|
"aria-label": ariaLabel,
|
|
47
47
|
"aria-labelledby": ariaLabelledBy,
|
|
@@ -62,7 +62,7 @@ const TextField = forwardRef(
|
|
|
62
62
|
{
|
|
63
63
|
className: clsx(
|
|
64
64
|
classNames.inputWrapper,
|
|
65
|
-
|
|
65
|
+
styles[classNames.inputWrapper]
|
|
66
66
|
),
|
|
67
67
|
"data-size": dataAttributes["data-size"],
|
|
68
68
|
children: [
|
|
@@ -71,7 +71,7 @@ const TextField = forwardRef(
|
|
|
71
71
|
{
|
|
72
72
|
className: clsx(
|
|
73
73
|
classNames.inputIcon,
|
|
74
|
-
|
|
74
|
+
styles[classNames.inputIcon]
|
|
75
75
|
),
|
|
76
76
|
"data-size": dataAttributes["data-size"],
|
|
77
77
|
"aria-hidden": "true",
|
|
@@ -81,7 +81,7 @@ const TextField = forwardRef(
|
|
|
81
81
|
/* @__PURE__ */ jsx(
|
|
82
82
|
Input,
|
|
83
83
|
{
|
|
84
|
-
className: clsx(classNames.input,
|
|
84
|
+
className: clsx(classNames.input, styles[classNames.input]),
|
|
85
85
|
...icon && { "data-icon": true },
|
|
86
86
|
placeholder
|
|
87
87
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.esm.js","sources":["../../../src/components/TextField/TextField.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, useEffect } from 'react';\nimport { Input, TextField as AriaTextField } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport type { TextFieldProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './TextField.module.css';\n\n/** @public */\nexport const TextField = forwardRef<HTMLDivElement, TextFieldProps>(\n (props, ref) => {\n const {\n label,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n } = props;\n\n useEffect(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n 'TextField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n );\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n const { classNames, dataAttributes, style, cleanedProps } = useStyles(\n 'TextField',\n {\n size: 'small',\n ...props,\n },\n );\n\n const {\n className,\n description,\n icon,\n isRequired,\n secondaryLabel,\n placeholder,\n ...rest\n } = cleanedProps;\n\n // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n const secondaryLabelText =\n secondaryLabel || (isRequired ? 'Required' : null);\n\n return (\n <AriaTextField\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...dataAttributes}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n style={style}\n {...rest}\n ref={ref}\n >\n <FieldLabel\n label={label}\n secondaryLabel={secondaryLabelText}\n description={description}\n />\n <div\n className={clsx(\n classNames.inputWrapper,\n styles[classNames.inputWrapper],\n )}\n data-size={dataAttributes['data-size']}\n >\n {icon && (\n <div\n className={clsx(\n classNames.inputIcon,\n styles[classNames.inputIcon],\n )}\n data-size={dataAttributes['data-size']}\n aria-hidden=\"true\"\n >\n {icon}\n </div>\n )}\n <Input\n className={clsx(classNames.input, styles[classNames.input])}\n {...(icon && { 'data-icon': true })}\n placeholder={placeholder}\n />\n </div>\n <FieldError />\n </AriaTextField>\n );\n },\n);\n\nTextField.displayName = 'TextField';\n"],"names":["AriaTextField"
|
|
1
|
+
{"version":3,"file":"TextField.esm.js","sources":["../../../src/components/TextField/TextField.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, useEffect } from 'react';\nimport { Input, TextField as AriaTextField } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { FieldLabel } from '../FieldLabel';\nimport { FieldError } from '../FieldError';\nimport type { TextFieldProps } from './types';\nimport { useStyles } from '../../hooks/useStyles';\nimport styles from './TextField.module.css';\n\n/** @public */\nexport const TextField = forwardRef<HTMLDivElement, TextFieldProps>(\n (props, ref) => {\n const {\n label,\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledBy,\n } = props;\n\n useEffect(() => {\n if (!label && !ariaLabel && !ariaLabelledBy) {\n console.warn(\n 'TextField requires either a visible label, aria-label, or aria-labelledby for accessibility',\n );\n }\n }, [label, ariaLabel, ariaLabelledBy]);\n\n const { classNames, dataAttributes, style, cleanedProps } = useStyles(\n 'TextField',\n {\n size: 'small',\n ...props,\n },\n );\n\n const {\n className,\n description,\n icon,\n isRequired,\n secondaryLabel,\n placeholder,\n ...rest\n } = cleanedProps;\n\n // If a secondary label is provided, use it. Otherwise, use 'Required' if the field is required.\n const secondaryLabelText =\n secondaryLabel || (isRequired ? 'Required' : null);\n\n return (\n <AriaTextField\n className={clsx(classNames.root, styles[classNames.root], className)}\n {...dataAttributes}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n style={style}\n {...rest}\n ref={ref}\n >\n <FieldLabel\n label={label}\n secondaryLabel={secondaryLabelText}\n description={description}\n />\n <div\n className={clsx(\n classNames.inputWrapper,\n styles[classNames.inputWrapper],\n )}\n data-size={dataAttributes['data-size']}\n >\n {icon && (\n <div\n className={clsx(\n classNames.inputIcon,\n styles[classNames.inputIcon],\n )}\n data-size={dataAttributes['data-size']}\n aria-hidden=\"true\"\n >\n {icon}\n </div>\n )}\n <Input\n className={clsx(classNames.input, styles[classNames.input])}\n {...(icon && { 'data-icon': true })}\n placeholder={placeholder}\n />\n </div>\n <FieldError />\n </AriaTextField>\n );\n },\n);\n\nTextField.displayName = 'TextField';\n"],"names":["AriaTextField"],"mappings":";;;;;;;;;AA0BO,MAAM,SAAA,GAAY,UAAA;AAAA,EACvB,CAAC,OAAO,GAAA,KAAQ;AACd,IAAA,MAAM;AAAA,MACJ,KAAA;AAAA,MACA,YAAA,EAAc,SAAA;AAAA,MACd,iBAAA,EAAmB;AAAA,KACrB,GAAI,KAAA;AAEJ,IAAA,SAAA,CAAU,MAAM;AACd,MAAA,IAAI,CAAC,KAAA,IAAS,CAAC,SAAA,IAAa,CAAC,cAAA,EAAgB;AAC3C,QAAA,OAAA,CAAQ,IAAA;AAAA,UACN;AAAA,SACF;AAAA,MACF;AAAA,IACF,CAAA,EAAG,CAAC,KAAA,EAAO,SAAA,EAAW,cAAc,CAAC,CAAA;AAErC,IAAA,MAAM,EAAE,UAAA,EAAY,cAAA,EAAgB,KAAA,EAAO,cAAa,GAAI,SAAA;AAAA,MAC1D,WAAA;AAAA,MACA;AAAA,QACE,IAAA,EAAM,OAAA;AAAA,QACN,GAAG;AAAA;AACL,KACF;AAEA,IAAA,MAAM;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA,cAAA;AAAA,MACA,WAAA;AAAA,MACA,GAAG;AAAA,KACL,GAAI,YAAA;AAGJ,IAAA,MAAM,kBAAA,GACJ,cAAA,KAAmB,UAAA,GAAa,UAAA,GAAa,IAAA,CAAA;AAE/C,IAAA,uBACE,IAAA;AAAA,MAACA,WAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,QAClE,GAAG,cAAA;AAAA,QACJ,YAAA,EAAY,SAAA;AAAA,QACZ,iBAAA,EAAiB,cAAA;AAAA,QACjB,KAAA;AAAA,QACC,GAAG,IAAA;AAAA,QACJ,GAAA;AAAA,QAEA,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,UAAA;AAAA,YAAA;AAAA,cACC,KAAA;AAAA,cACA,cAAA,EAAgB,kBAAA;AAAA,cAChB;AAAA;AAAA,WACF;AAAA,0BACA,IAAA;AAAA,YAAC,KAAA;AAAA,YAAA;AAAA,cACC,SAAA,EAAW,IAAA;AAAA,gBACT,UAAA,CAAW,YAAA;AAAA,gBACX,MAAA,CAAO,WAAW,YAAY;AAAA,eAChC;AAAA,cACA,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,cAEpC,QAAA,EAAA;AAAA,gBAAA,IAAA,oBACC,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,SAAA,EAAW,IAAA;AAAA,sBACT,UAAA,CAAW,SAAA;AAAA,sBACX,MAAA,CAAO,WAAW,SAAS;AAAA,qBAC7B;AAAA,oBACA,WAAA,EAAW,eAAe,WAAW,CAAA;AAAA,oBACrC,aAAA,EAAY,MAAA;AAAA,oBAEX,QAAA,EAAA;AAAA;AAAA,iBACH;AAAA,gCAEF,GAAA;AAAA,kBAAC,KAAA;AAAA,kBAAA;AAAA,oBACC,WAAW,IAAA,CAAK,UAAA,CAAW,OAAO,MAAA,CAAO,UAAA,CAAW,KAAK,CAAC,CAAA;AAAA,oBACzD,GAAI,IAAA,IAAQ,EAAE,WAAA,EAAa,IAAA,EAAK;AAAA,oBACjC;AAAA;AAAA;AACF;AAAA;AAAA,WACF;AAAA,8BACC,UAAA,EAAA,EAAW;AAAA;AAAA;AAAA,KACd;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import styleInject from '../../node_modules_dist/style-inject/dist/style-inject.es.esm.js';
|
|
2
2
|
|
|
3
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 .TextField-module_bui-TextField__1KBy4 {\n display: flex;\n flex-direction: column;\n font-family: var(--bui-font-regular);\n width: 100%;\n flex-shrink: 0;\n }\n\n .TextField-module_bui-InputWrapper__25yD_ {\n position: relative;\n\n &[data-size='small'] .TextField-module_bui-Input__1Uojs {\n height: 2rem;\n }\n\n &[data-size='medium'] .TextField-module_bui-Input__1Uojs {\n height: 2.5rem;\n }\n\n &[data-size='small'] .TextField-module_bui-Input__1Uojs[data-icon] {\n padding-left: var(--bui-space-8);\n }\n\n &[data-size='medium'] .TextField-module_bui-Input__1Uojs[data-icon] {\n padding-left: var(--bui-space-9);\n }\n }\n\n .TextField-module_bui-InputIcon__2KDAe {\n position: absolute;\n left: var(--bui-space-3);\n top: 50%;\n transform: translateY(-50%);\n margin-right: var(--bui-space-1);\n color: var(--bui-fg-primary);\n flex-shrink: 0;\n pointer-events: none;\n /* To animate the icon when the input is collapsed */\n transition: left 0.2s ease-in-out;\n\n &[data-size='small'],\n &[data-size='small'] svg {\n width: 1rem;\n height: 1rem;\n }\n\n &[data-size='medium'],\n &[data-size='medium'] svg {\n width: 1.25rem;\n height: 1.25rem;\n }\n }\n\n .TextField-module_bui-Input__1Uojs {\n display: flex;\n align-items: center;\n padding: 0 var(--bui-space-3);\n border-radius: var(--bui-radius-2);\n border: 1px solid var(--bui-border);\n background-color: var(--bui-bg-surface-1);\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 transition: border-color 0.2s ease-in-out, outline-color 0.2s ease-in-out;\n width: 100%;\n height: 100%;\n cursor: inherit;\n\n &::-webkit-search-cancel-button,\n &::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n\n &::placeholder {\n color: var(--bui-fg-secondary);\n }\n\n &[data-focused] {\n outline-color: var(--bui-border-pressed);\n outline-width: 0px;\n }\n\n &[data-hovered] {\n border-color: var(--bui-border-hover);\n }\n\n &[data-focused] {\n border-color: var(--bui-border-pressed);\n outline-width: 0px;\n }\n\n &[data-invalid] {\n border-color: var(--bui-fg-danger);\n }\n\n &[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n border: 1px solid var(--bui-border-disabled);\n }\n }\n}\n";
|
|
4
|
-
var
|
|
4
|
+
var styles = {"bui-TextField":"TextField-module_bui-TextField__1KBy4","bui-InputWrapper":"TextField-module_bui-InputWrapper__25yD_","bui-Input":"TextField-module_bui-Input__1Uojs","bui-InputIcon":"TextField-module_bui-InputIcon__2KDAe"};
|
|
5
5
|
styleInject(css_248z);
|
|
6
6
|
|
|
7
|
-
export {
|
|
7
|
+
export { styles as default };
|
|
8
8
|
//# sourceMappingURL=TextField.module.css.esm.js.map
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as react from 'react';
|
|
2
2
|
import { ReactElement, ReactNode, ElementType, ComponentPropsWithRef, ComponentProps } from 'react';
|
|
3
|
-
import { Avatar as Avatar$1 } from '@base-ui-components/react/avatar';
|
|
4
3
|
import { ButtonProps as ButtonProps$1, DialogTriggerProps as DialogTriggerProps$1, ModalOverlayProps, HeadingProps, TabsProps as TabsProps$1, TabListProps as TabListProps$1, TabProps as TabProps$1, TabPanelProps as TabPanelProps$1, LinkProps as LinkProps$1, CheckboxProps as CheckboxProps$1, RadioGroupProps as RadioGroupProps$1, RadioProps as RadioProps$1, TableProps, TableHeaderProps, TableBodyProps, ColumnProps as ColumnProps$1, CellProps as CellProps$1, RowProps, TagGroupProps as TagGroupProps$1, TagListProps, TagProps as TagProps$1, TextFieldProps as TextFieldProps$1, TooltipProps as TooltipProps$1, TooltipTriggerComponentProps, MenuTriggerProps as MenuTriggerProps$1, SubmenuTriggerProps as SubmenuTriggerProps$1, MenuProps as MenuProps$1, PopoverProps, ListBoxProps, MenuItemProps as MenuItemProps$1, ListBoxItemProps, MenuSectionProps as MenuSectionProps$1, SeparatorProps, SearchFieldProps as SearchFieldProps$1, SelectProps as SelectProps$1, SwitchProps as SwitchProps$1 } from 'react-aria-components';
|
|
5
4
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
6
5
|
import { NavigateOptions } from 'react-router-dom';
|
|
@@ -159,6 +158,8 @@ declare const componentDefinitions: {
|
|
|
159
158
|
readonly dataAttributes: {
|
|
160
159
|
readonly variant: readonly ["subtitle", "body", "caption", "label"];
|
|
161
160
|
readonly weight: readonly ["regular", "bold"];
|
|
161
|
+
readonly color: readonly ["primary", "secondary", "danger", "warning", "success"];
|
|
162
|
+
readonly truncate: readonly [true, false];
|
|
162
163
|
};
|
|
163
164
|
};
|
|
164
165
|
readonly List: {
|
|
@@ -212,7 +213,10 @@ declare const componentDefinitions: {
|
|
|
212
213
|
readonly SearchField: {
|
|
213
214
|
readonly classNames: {
|
|
214
215
|
readonly root: "bui-SearchField";
|
|
215
|
-
readonly clear: "bui-
|
|
216
|
+
readonly clear: "bui-SearchFieldClear";
|
|
217
|
+
readonly inputWrapper: "bui-SearchFieldWrapper";
|
|
218
|
+
readonly input: "bui-SearchFieldInput";
|
|
219
|
+
readonly inputIcon: "bui-SearchFieldInputIcon";
|
|
216
220
|
};
|
|
217
221
|
readonly dataAttributes: {
|
|
218
222
|
readonly startCollapsed: readonly [true, false];
|
|
@@ -505,14 +509,31 @@ interface ContainerProps {
|
|
|
505
509
|
declare const Container: react.ForwardRefExoticComponent<ContainerProps & react.RefAttributes<HTMLDivElement>>;
|
|
506
510
|
|
|
507
511
|
/** @public */
|
|
508
|
-
interface AvatarProps extends React.ComponentPropsWithoutRef<
|
|
512
|
+
interface AvatarProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
513
|
+
/**
|
|
514
|
+
* URL of the image to display
|
|
515
|
+
*/
|
|
509
516
|
src: string;
|
|
517
|
+
/**
|
|
518
|
+
* Name of the person - used for generating initials and accessibility labels
|
|
519
|
+
*/
|
|
510
520
|
name: string;
|
|
511
|
-
|
|
521
|
+
/**
|
|
522
|
+
* Size of the avatar
|
|
523
|
+
* @defaultValue 'medium'
|
|
524
|
+
*/
|
|
525
|
+
size?: 'x-small' | 'small' | 'medium' | 'large' | 'x-large';
|
|
526
|
+
/**
|
|
527
|
+
* Determines how the avatar is presented to assistive technologies.
|
|
528
|
+
* - 'informative': Avatar is announced as "\{name\}" to screen readers
|
|
529
|
+
* - 'decoration': Avatar is hidden from screen readers (use when name appears in adjacent text)
|
|
530
|
+
* @defaultValue 'informative'
|
|
531
|
+
*/
|
|
532
|
+
purpose?: 'decoration' | 'informative';
|
|
512
533
|
}
|
|
513
534
|
|
|
514
535
|
/** @public */
|
|
515
|
-
declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<
|
|
536
|
+
declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLDivElement>>;
|
|
516
537
|
|
|
517
538
|
/**
|
|
518
539
|
* Properties for {@link Button}
|
|
@@ -205,7 +205,9 @@ const componentDefinitions = {
|
|
|
205
205
|
},
|
|
206
206
|
dataAttributes: {
|
|
207
207
|
variant: ["subtitle", "body", "caption", "label"],
|
|
208
|
-
weight: ["regular", "bold"]
|
|
208
|
+
weight: ["regular", "bold"],
|
|
209
|
+
color: ["primary", "secondary", "danger", "warning", "success"],
|
|
210
|
+
truncate: [true, false]
|
|
209
211
|
}
|
|
210
212
|
},
|
|
211
213
|
List: {
|
|
@@ -259,7 +261,10 @@ const componentDefinitions = {
|
|
|
259
261
|
SearchField: {
|
|
260
262
|
classNames: {
|
|
261
263
|
root: "bui-SearchField",
|
|
262
|
-
clear: "bui-
|
|
264
|
+
clear: "bui-SearchFieldClear",
|
|
265
|
+
inputWrapper: "bui-SearchFieldWrapper",
|
|
266
|
+
input: "bui-SearchFieldInput",
|
|
267
|
+
inputIcon: "bui-SearchFieldInputIcon"
|
|
263
268
|
},
|
|
264
269
|
dataAttributes: {
|
|
265
270
|
startCollapsed: [true, false],
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"componentDefinitions.esm.js","sources":["../../src/utils/componentDefinitions.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 type { ComponentDefinition } from '../types';\n\n/**\n * Component definitions for the Backstage UI library\n * @public\n */\nexport const componentDefinitions = {\n Avatar: {\n classNames: {\n root: 'bui-AvatarRoot',\n image: 'bui-AvatarImage',\n fallback: 'bui-AvatarFallback',\n },\n dataAttributes: {\n size: ['small', 'medium', 'large'] as const,\n },\n },\n Box: {\n classNames: {\n root: 'bui-Box',\n },\n utilityProps: [\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n 'position',\n 'display',\n 'width',\n 'minWidth',\n 'maxWidth',\n 'height',\n 'minHeight',\n 'maxHeight',\n ],\n },\n Button: {\n classNames: {\n root: 'bui-Button',\n },\n dataAttributes: {\n size: ['small', 'medium', 'large'] as const,\n variant: ['primary', 'secondary', 'tertiary'] as const,\n },\n },\n ButtonIcon: {\n classNames: {\n root: 'bui-ButtonIcon',\n },\n },\n ButtonLink: {\n classNames: {\n root: 'bui-ButtonLink',\n },\n },\n Card: {\n classNames: {\n root: 'bui-Card',\n header: 'bui-CardHeader',\n body: 'bui-CardBody',\n footer: 'bui-CardFooter',\n },\n },\n Checkbox: {\n classNames: {\n root: 'bui-Checkbox',\n indicator: 'bui-CheckboxIndicator',\n },\n dataAttributes: {\n selected: [true, false] as const,\n },\n },\n Collapsible: {\n classNames: {\n root: 'bui-CollapsibleRoot',\n trigger: 'bui-CollapsibleTrigger',\n panel: 'bui-CollapsiblePanel',\n },\n },\n Container: {\n classNames: {\n root: 'bui-Container',\n },\n utilityProps: ['my', 'mt', 'mb', 'py', 'pt', 'pb', 'display'],\n },\n Dialog: {\n classNames: {\n overlay: 'bui-DialogOverlay',\n dialog: 'bui-Dialog',\n header: 'bui-DialogHeader',\n headerTitle: 'bui-DialogHeaderTitle',\n body: 'bui-DialogBody',\n footer: 'bui-DialogFooter',\n },\n },\n FieldError: {\n classNames: {\n root: 'bui-FieldError',\n },\n },\n FieldLabel: {\n classNames: {\n root: 'bui-FieldLabelWrapper',\n label: 'bui-FieldLabel',\n secondaryLabel: 'bui-FieldSecondaryLabel',\n description: 'bui-FieldDescription',\n },\n },\n Flex: {\n classNames: {\n root: 'bui-Flex',\n },\n utilityProps: [\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n 'gap',\n 'align',\n 'justify',\n 'direction',\n ],\n },\n Grid: {\n classNames: {\n root: 'bui-Grid',\n },\n utilityProps: [\n 'columns',\n 'gap',\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n ],\n },\n GridItem: {\n classNames: {\n root: 'bui-GridItem',\n },\n utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],\n },\n Header: {\n classNames: {\n toolbar: 'bui-HeaderToolbar',\n toolbarWrapper: 'bui-HeaderToolbarWrapper',\n toolbarContent: 'bui-HeaderToolbarContent',\n toolbarControls: 'bui-HeaderToolbarControls',\n toolbarIcon: 'bui-HeaderToolbarIcon',\n toolbarName: 'bui-HeaderToolbarName',\n tabsWrapper: 'bui-HeaderTabsWrapper',\n },\n },\n HeaderPage: {\n classNames: {\n root: 'bui-HeaderPage',\n content: 'bui-HeaderPageContent',\n breadcrumbs: 'bui-HeaderPageBreadcrumbs',\n tabsWrapper: 'bui-HeaderPageTabsWrapper',\n controls: 'bui-HeaderPageControls',\n },\n },\n Heading: {\n classNames: {\n root: 'bui-Heading',\n },\n dataAttributes: {\n variant: ['title1', 'title2', 'title3', 'subtitle'] as const,\n color: ['primary', 'secondary', 'muted'] as const,\n truncate: [true, false] as const,\n },\n },\n Icon: {\n classNames: {\n root: 'bui-Icon',\n },\n },\n Link: {\n classNames: {\n root: 'bui-Link',\n },\n dataAttributes: {\n variant: ['subtitle', 'body', 'caption', 'label'] as const,\n weight: ['regular', 'bold'] as const,\n },\n },\n List: {\n classNames: {\n root: 'bui-List',\n row: 'bui-ListRow',\n label: 'bui-ListLabel',\n },\n },\n Menu: {\n classNames: {\n root: 'bui-Menu',\n popover: 'bui-MenuPopover',\n content: 'bui-MenuContent',\n section: 'bui-MenuSection',\n sectionHeader: 'bui-MenuSectionHeader',\n item: 'bui-MenuItem',\n itemListBox: 'bui-MenuItemListBox',\n itemListBoxCheck: 'bui-MenuItemListBoxCheck',\n itemWrapper: 'bui-MenuItemWrapper',\n itemContent: 'bui-MenuItemContent',\n itemArrow: 'bui-MenuItemArrow',\n separator: 'bui-MenuSeparator',\n searchField: 'bui-MenuSearchField',\n searchFieldInput: 'bui-MenuSearchFieldInput',\n searchFieldClear: 'bui-MenuSearchFieldClear',\n emptyState: 'bui-MenuEmptyState',\n },\n },\n PasswordField: {\n classNames: {\n root: 'bui-PasswordField',\n inputVisibility: 'bui-InputVisibility',\n },\n dataAttributes: {\n size: ['small', 'medium'] as const,\n },\n },\n Popover: {\n classNames: {\n root: 'bui-Popover',\n },\n },\n RadioGroup: {\n classNames: {\n root: 'bui-RadioGroup',\n content: 'bui-RadioGroupContent',\n radio: 'bui-Radio',\n },\n },\n SearchField: {\n classNames: {\n root: 'bui-SearchField',\n clear: 'bui-InputClear',\n },\n dataAttributes: {\n startCollapsed: [true, false] as const,\n size: ['small', 'medium'] as const,\n },\n },\n Select: {\n classNames: {\n root: 'bui-Select',\n trigger: 'bui-SelectTrigger',\n value: 'bui-SelectValue',\n icon: 'bui-SelectIcon',\n list: 'bui-SelectList',\n item: 'bui-SelectItem',\n itemIndicator: 'bui-SelectItemIndicator',\n itemLabel: 'bui-SelectItemLabel',\n },\n dataAttributes: {\n size: ['small', 'medium'] as const,\n },\n },\n Skeleton: {\n classNames: {\n root: 'bui-Skeleton',\n },\n },\n Switch: {\n classNames: {\n root: 'bui-Switch',\n indicator: 'bui-SwitchIndicator',\n },\n },\n Table: {\n classNames: {\n table: 'bui-Table',\n header: 'bui-TableHeader',\n body: 'bui-TableBody',\n row: 'bui-TableRow',\n head: 'bui-TableHead',\n headContent: 'bui-TableHeadContent',\n headSortButton: 'bui-TableHeadSortButton',\n caption: 'bui-TableCaption',\n cell: 'bui-TableCell',\n cellContentWrapper: 'bui-TableCellContentWrapper',\n cellContent: 'bui-TableCellContent',\n cellIcon: 'bui-TableCellIcon',\n cellProfileAvatar: 'bui-TableCellProfileAvatar',\n cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',\n cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',\n cellProfileName: 'bui-TableCellProfileName',\n cellProfileLink: 'bui-TableCellProfileLink',\n },\n },\n TablePagination: {\n classNames: {\n root: 'bui-TablePagination',\n left: 'bui-TablePaginationLeft',\n right: 'bui-TablePaginationRight',\n select: 'bui-TablePaginationSelect',\n },\n },\n Tabs: {\n classNames: {\n tabs: 'bui-Tabs',\n tabList: 'bui-TabList',\n tabListWrapper: 'bui-TabListWrapper',\n tab: 'bui-Tab',\n tabActive: 'bui-TabActive',\n tabHovered: 'bui-TabHovered',\n panel: 'bui-TabPanel',\n },\n },\n TagGroup: {\n classNames: {\n group: 'bui-TagGroup',\n list: 'bui-TagList',\n tag: 'bui-Tag',\n tagIcon: 'bui-TagIcon',\n tagRemoveButton: 'bui-TagRemoveButton',\n },\n },\n Text: {\n classNames: {\n root: 'bui-Text',\n },\n dataAttributes: {\n variant: ['subtitle', 'body', 'caption', 'label'] as const,\n weight: ['regular', 'bold'] as const,\n color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,\n truncate: [true, false] as const,\n },\n },\n TextField: {\n classNames: {\n root: 'bui-TextField',\n inputWrapper: 'bui-InputWrapper',\n input: 'bui-Input',\n inputIcon: 'bui-InputIcon',\n inputAction: 'bui-InputAction',\n },\n dataAttributes: {\n invalid: [true, false] as const,\n disabled: [true, false] as const,\n size: ['small', 'medium'] as const,\n },\n },\n Tooltip: {\n classNames: {\n tooltip: 'bui-Tooltip',\n arrow: 'bui-TooltipArrow',\n },\n },\n VisuallyHidden: {\n classNames: {\n root: 'bui-VisuallyHidden',\n },\n },\n} as const satisfies Record<string, ComponentDefinition>;\n"],"names":[],"mappings":"AAsBO,MAAM,oBAAA,GAAuB;AAAA,EAClC,MAAA,EAAQ;AAAA,IACN,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,gBAAA;AAAA,MACN,KAAA,EAAO,iBAAA;AAAA,MACP,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAA,EAAU,OAAO;AAAA;AACnC,GACF;AAAA,EACA,GAAA,EAAK;AAAA,IACH,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,KACR;AAAA,IACA,YAAA,EAAc;AAAA,MACZ,GAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,UAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAA;AAAA,MACA,UAAA;AAAA,MACA,UAAA;AAAA,MACA,QAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA;AACF,GACF;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,KACR;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAA,EAAU,OAAO,CAAA;AAAA,MACjC,OAAA,EAAS,CAAC,SAAA,EAAW,WAAA,EAAa,UAAU;AAAA;AAC9C,GACF;AAAA,EACA,UAAA,EAAY;AAAA,IACV,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,UAAA,EAAY;AAAA,IACV,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,UAAA;AAAA,MACN,MAAA,EAAQ,gBAAA;AAAA,MACR,IAAA,EAAM,cAAA;AAAA,MACN,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,cAAA;AAAA,MACN,SAAA,EAAW;AAAA,KACb;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,QAAA,EAAU,CAAC,IAAA,EAAM,KAAK;AAAA;AACxB,GACF;AAAA,EACA,WAAA,EAAa;AAAA,IACX,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,qBAAA;AAAA,MACN,OAAA,EAAS,wBAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,SAAA,EAAW;AAAA,IACT,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,KACR;AAAA,IACA,YAAA,EAAc,CAAC,IAAA,EAAM,IAAA,EAAM,MAAM,IAAA,EAAM,IAAA,EAAM,MAAM,SAAS;AAAA,GAC9D;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,UAAA,EAAY;AAAA,MACV,OAAA,EAAS,mBAAA;AAAA,MACT,MAAA,EAAQ,YAAA;AAAA,MACR,MAAA,EAAQ,kBAAA;AAAA,MACR,WAAA,EAAa,uBAAA;AAAA,MACb,IAAA,EAAM,gBAAA;AAAA,MACN,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,UAAA,EAAY;AAAA,IACV,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,UAAA,EAAY;AAAA,IACV,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,uBAAA;AAAA,MACN,KAAA,EAAO,gBAAA;AAAA,MACP,cAAA,EAAgB,yBAAA;AAAA,MAChB,WAAA,EAAa;AAAA;AACf,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,KACR;AAAA,IACA,YAAA,EAAc;AAAA,MACZ,GAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,KAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA;AAAA,MACA;AAAA;AACF,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,KACR;AAAA,IACA,YAAA,EAAc;AAAA,MACZ,SAAA;AAAA,MACA,KAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,GAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA,IAAA;AAAA,MACA;AAAA;AACF,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,KACR;AAAA,IACA,YAAA,EAAc,CAAC,SAAA,EAAW,QAAA,EAAU,YAAY,SAAS;AAAA,GAC3D;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,UAAA,EAAY;AAAA,MACV,OAAA,EAAS,mBAAA;AAAA,MACT,cAAA,EAAgB,0BAAA;AAAA,MAChB,cAAA,EAAgB,0BAAA;AAAA,MAChB,eAAA,EAAiB,2BAAA;AAAA,MACjB,WAAA,EAAa,uBAAA;AAAA,MACb,WAAA,EAAa,uBAAA;AAAA,MACb,WAAA,EAAa;AAAA;AACf,GACF;AAAA,EACA,UAAA,EAAY;AAAA,IACV,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,gBAAA;AAAA,MACN,OAAA,EAAS,uBAAA;AAAA,MACT,WAAA,EAAa,2BAAA;AAAA,MACb,WAAA,EAAa,2BAAA;AAAA,MACb,QAAA,EAAU;AAAA;AACZ,GACF;AAAA,EACA,OAAA,EAAS;AAAA,IACP,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,KACR;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,OAAA,EAAS,CAAC,QAAA,EAAU,QAAA,EAAU,UAAU,UAAU,CAAA;AAAA,MAClD,KAAA,EAAO,CAAC,SAAA,EAAW,WAAA,EAAa,OAAO,CAAA;AAAA,MACvC,QAAA,EAAU,CAAC,IAAA,EAAM,KAAK;AAAA;AACxB,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,KACR;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,OAAA,EAAS,CAAC,UAAA,EAAY,MAAA,EAAQ,WAAW,OAAO,CAAA;AAAA,MAChD,MAAA,EAAQ,CAAC,SAAA,EAAW,MAAM;AAAA;AAC5B,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,UAAA;AAAA,MACN,GAAA,EAAK,aAAA;AAAA,MACL,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,UAAA;AAAA,MACN,OAAA,EAAS,iBAAA;AAAA,MACT,OAAA,EAAS,iBAAA;AAAA,MACT,OAAA,EAAS,iBAAA;AAAA,MACT,aAAA,EAAe,uBAAA;AAAA,MACf,IAAA,EAAM,cAAA;AAAA,MACN,WAAA,EAAa,qBAAA;AAAA,MACb,gBAAA,EAAkB,0BAAA;AAAA,MAClB,WAAA,EAAa,qBAAA;AAAA,MACb,WAAA,EAAa,qBAAA;AAAA,MACb,SAAA,EAAW,mBAAA;AAAA,MACX,SAAA,EAAW,mBAAA;AAAA,MACX,WAAA,EAAa,qBAAA;AAAA,MACb,gBAAA,EAAkB,0BAAA;AAAA,MAClB,gBAAA,EAAkB,0BAAA;AAAA,MAClB,UAAA,EAAY;AAAA;AACd,GACF;AAAA,EACA,aAAA,EAAe;AAAA,IACb,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,mBAAA;AAAA,MACN,eAAA,EAAiB;AAAA,KACnB;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAC1B,GACF;AAAA,EACA,OAAA,EAAS;AAAA,IACP,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,UAAA,EAAY;AAAA,IACV,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,gBAAA;AAAA,MACN,OAAA,EAAS,uBAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,WAAA,EAAa;AAAA,IACX,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,iBAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACT;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,cAAA,EAAgB,CAAC,IAAA,EAAM,KAAK,CAAA;AAAA,MAC5B,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAC1B,GACF;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,YAAA;AAAA,MACN,OAAA,EAAS,mBAAA;AAAA,MACT,KAAA,EAAO,iBAAA;AAAA,MACP,IAAA,EAAM,gBAAA;AAAA,MACN,IAAA,EAAM,gBAAA;AAAA,MACN,IAAA,EAAM,gBAAA;AAAA,MACN,aAAA,EAAe,yBAAA;AAAA,MACf,SAAA,EAAW;AAAA,KACb;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAC1B,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA;AACR,GACF;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,YAAA;AAAA,MACN,SAAA,EAAW;AAAA;AACb,GACF;AAAA,EACA,KAAA,EAAO;AAAA,IACL,UAAA,EAAY;AAAA,MACV,KAAA,EAAO,WAAA;AAAA,MACP,MAAA,EAAQ,iBAAA;AAAA,MACR,IAAA,EAAM,eAAA;AAAA,MACN,GAAA,EAAK,cAAA;AAAA,MACL,IAAA,EAAM,eAAA;AAAA,MACN,WAAA,EAAa,sBAAA;AAAA,MACb,cAAA,EAAgB,yBAAA;AAAA,MAChB,OAAA,EAAS,kBAAA;AAAA,MACT,IAAA,EAAM,eAAA;AAAA,MACN,kBAAA,EAAoB,6BAAA;AAAA,MACpB,WAAA,EAAa,sBAAA;AAAA,MACb,QAAA,EAAU,mBAAA;AAAA,MACV,iBAAA,EAAmB,4BAAA;AAAA,MACnB,sBAAA,EAAwB,iCAAA;AAAA,MACxB,yBAAA,EAA2B,oCAAA;AAAA,MAC3B,eAAA,EAAiB,0BAAA;AAAA,MACjB,eAAA,EAAiB;AAAA;AACnB,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,qBAAA;AAAA,MACN,IAAA,EAAM,yBAAA;AAAA,MACN,KAAA,EAAO,0BAAA;AAAA,MACP,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,UAAA;AAAA,MACN,OAAA,EAAS,aAAA;AAAA,MACT,cAAA,EAAgB,oBAAA;AAAA,MAChB,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,eAAA;AAAA,MACX,UAAA,EAAY,gBAAA;AAAA,MACZ,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,UAAA,EAAY;AAAA,MACV,KAAA,EAAO,cAAA;AAAA,MACP,IAAA,EAAM,aAAA;AAAA,MACN,GAAA,EAAK,SAAA;AAAA,MACL,OAAA,EAAS,aAAA;AAAA,MACT,eAAA,EAAiB;AAAA;AACnB,GACF;AAAA,EACA,IAAA,EAAM;AAAA,IACJ,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA,KACR;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,OAAA,EAAS,CAAC,UAAA,EAAY,MAAA,EAAQ,WAAW,OAAO,CAAA;AAAA,MAChD,MAAA,EAAQ,CAAC,SAAA,EAAW,MAAM,CAAA;AAAA,MAC1B,OAAO,CAAC,SAAA,EAAW,WAAA,EAAa,QAAA,EAAU,WAAW,SAAS,CAAA;AAAA,MAC9D,QAAA,EAAU,CAAC,IAAA,EAAM,KAAK;AAAA;AACxB,GACF;AAAA,EACA,SAAA,EAAW;AAAA,IACT,UAAA,EAAY;AAAA,MACV,IAAA,EAAM,eAAA;AAAA,MACN,YAAA,EAAc,kBAAA;AAAA,MACd,KAAA,EAAO,WAAA;AAAA,MACP,SAAA,EAAW,eAAA;AAAA,MACX,WAAA,EAAa;AAAA,KACf;AAAA,IACA,cAAA,EAAgB;AAAA,MACd,OAAA,EAAS,CAAC,IAAA,EAAM,KAAK,CAAA;AAAA,MACrB,QAAA,EAAU,CAAC,IAAA,EAAM,KAAK,CAAA;AAAA,MACtB,IAAA,EAAM,CAAC,OAAA,EAAS,QAAQ;AAAA;AAC1B,GACF;AAAA,EACA,OAAA,EAAS;AAAA,IACP,UAAA,EAAY;AAAA,MACV,OAAA,EAAS,aAAA;AAAA,MACT,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,cAAA,EAAgB;AAAA,IACd,UAAA,EAAY;AAAA,MACV,IAAA,EAAM;AAAA;AACR;AAEJ;;;;"}
|
|
1
|
+
{"version":3,"file":"componentDefinitions.esm.js","sources":["../../src/utils/componentDefinitions.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 type { ComponentDefinition } from '../types';\n\n/**\n * Component definitions for the Backstage UI library\n * @public\n */\nexport const componentDefinitions = {\n Avatar: {\n classNames: {\n root: 'bui-AvatarRoot',\n image: 'bui-AvatarImage',\n fallback: 'bui-AvatarFallback',\n },\n dataAttributes: {\n size: ['small', 'medium', 'large'] as const,\n },\n },\n Box: {\n classNames: {\n root: 'bui-Box',\n },\n utilityProps: [\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n 'position',\n 'display',\n 'width',\n 'minWidth',\n 'maxWidth',\n 'height',\n 'minHeight',\n 'maxHeight',\n ],\n },\n Button: {\n classNames: {\n root: 'bui-Button',\n },\n dataAttributes: {\n size: ['small', 'medium', 'large'] as const,\n variant: ['primary', 'secondary', 'tertiary'] as const,\n },\n },\n ButtonIcon: {\n classNames: {\n root: 'bui-ButtonIcon',\n },\n },\n ButtonLink: {\n classNames: {\n root: 'bui-ButtonLink',\n },\n },\n Card: {\n classNames: {\n root: 'bui-Card',\n header: 'bui-CardHeader',\n body: 'bui-CardBody',\n footer: 'bui-CardFooter',\n },\n },\n Checkbox: {\n classNames: {\n root: 'bui-Checkbox',\n indicator: 'bui-CheckboxIndicator',\n },\n dataAttributes: {\n selected: [true, false] as const,\n },\n },\n Collapsible: {\n classNames: {\n root: 'bui-CollapsibleRoot',\n trigger: 'bui-CollapsibleTrigger',\n panel: 'bui-CollapsiblePanel',\n },\n },\n Container: {\n classNames: {\n root: 'bui-Container',\n },\n utilityProps: ['my', 'mt', 'mb', 'py', 'pt', 'pb', 'display'],\n },\n Dialog: {\n classNames: {\n overlay: 'bui-DialogOverlay',\n dialog: 'bui-Dialog',\n header: 'bui-DialogHeader',\n headerTitle: 'bui-DialogHeaderTitle',\n body: 'bui-DialogBody',\n footer: 'bui-DialogFooter',\n },\n },\n FieldError: {\n classNames: {\n root: 'bui-FieldError',\n },\n },\n FieldLabel: {\n classNames: {\n root: 'bui-FieldLabelWrapper',\n label: 'bui-FieldLabel',\n secondaryLabel: 'bui-FieldSecondaryLabel',\n description: 'bui-FieldDescription',\n },\n },\n Flex: {\n classNames: {\n root: 'bui-Flex',\n },\n utilityProps: [\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n 'gap',\n 'align',\n 'justify',\n 'direction',\n ],\n },\n Grid: {\n classNames: {\n root: 'bui-Grid',\n },\n utilityProps: [\n 'columns',\n 'gap',\n 'm',\n 'mb',\n 'ml',\n 'mr',\n 'mt',\n 'mx',\n 'my',\n 'p',\n 'pb',\n 'pl',\n 'pr',\n 'pt',\n 'px',\n 'py',\n ],\n },\n GridItem: {\n classNames: {\n root: 'bui-GridItem',\n },\n utilityProps: ['colSpan', 'colEnd', 'colStart', 'rowSpan'],\n },\n Header: {\n classNames: {\n toolbar: 'bui-HeaderToolbar',\n toolbarWrapper: 'bui-HeaderToolbarWrapper',\n toolbarContent: 'bui-HeaderToolbarContent',\n toolbarControls: 'bui-HeaderToolbarControls',\n toolbarIcon: 'bui-HeaderToolbarIcon',\n toolbarName: 'bui-HeaderToolbarName',\n tabsWrapper: 'bui-HeaderTabsWrapper',\n },\n },\n HeaderPage: {\n classNames: {\n root: 'bui-HeaderPage',\n content: 'bui-HeaderPageContent',\n breadcrumbs: 'bui-HeaderPageBreadcrumbs',\n tabsWrapper: 'bui-HeaderPageTabsWrapper',\n controls: 'bui-HeaderPageControls',\n },\n },\n Heading: {\n classNames: {\n root: 'bui-Heading',\n },\n dataAttributes: {\n variant: ['title1', 'title2', 'title3', 'subtitle'] as const,\n color: ['primary', 'secondary', 'muted'] as const,\n truncate: [true, false] as const,\n },\n },\n Icon: {\n classNames: {\n root: 'bui-Icon',\n },\n },\n Link: {\n classNames: {\n root: 'bui-Link',\n },\n dataAttributes: {\n variant: ['subtitle', 'body', 'caption', 'label'] as const,\n weight: ['regular', 'bold'] as const,\n color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,\n truncate: [true, false] as const,\n },\n },\n List: {\n classNames: {\n root: 'bui-List',\n row: 'bui-ListRow',\n label: 'bui-ListLabel',\n },\n },\n Menu: {\n classNames: {\n root: 'bui-Menu',\n popover: 'bui-MenuPopover',\n content: 'bui-MenuContent',\n section: 'bui-MenuSection',\n sectionHeader: 'bui-MenuSectionHeader',\n item: 'bui-MenuItem',\n itemListBox: 'bui-MenuItemListBox',\n itemListBoxCheck: 'bui-MenuItemListBoxCheck',\n itemWrapper: 'bui-MenuItemWrapper',\n itemContent: 'bui-MenuItemContent',\n itemArrow: 'bui-MenuItemArrow',\n separator: 'bui-MenuSeparator',\n searchField: 'bui-MenuSearchField',\n searchFieldInput: 'bui-MenuSearchFieldInput',\n searchFieldClear: 'bui-MenuSearchFieldClear',\n emptyState: 'bui-MenuEmptyState',\n },\n },\n PasswordField: {\n classNames: {\n root: 'bui-PasswordField',\n inputVisibility: 'bui-InputVisibility',\n },\n dataAttributes: {\n size: ['small', 'medium'] as const,\n },\n },\n Popover: {\n classNames: {\n root: 'bui-Popover',\n },\n },\n RadioGroup: {\n classNames: {\n root: 'bui-RadioGroup',\n content: 'bui-RadioGroupContent',\n radio: 'bui-Radio',\n },\n },\n SearchField: {\n classNames: {\n root: 'bui-SearchField',\n clear: 'bui-SearchFieldClear',\n inputWrapper: 'bui-SearchFieldWrapper',\n input: 'bui-SearchFieldInput',\n inputIcon: 'bui-SearchFieldInputIcon',\n },\n dataAttributes: {\n startCollapsed: [true, false] as const,\n size: ['small', 'medium'] as const,\n },\n },\n Select: {\n classNames: {\n root: 'bui-Select',\n trigger: 'bui-SelectTrigger',\n value: 'bui-SelectValue',\n icon: 'bui-SelectIcon',\n list: 'bui-SelectList',\n item: 'bui-SelectItem',\n itemIndicator: 'bui-SelectItemIndicator',\n itemLabel: 'bui-SelectItemLabel',\n },\n dataAttributes: {\n size: ['small', 'medium'] as const,\n },\n },\n Skeleton: {\n classNames: {\n root: 'bui-Skeleton',\n },\n },\n Switch: {\n classNames: {\n root: 'bui-Switch',\n indicator: 'bui-SwitchIndicator',\n },\n },\n Table: {\n classNames: {\n table: 'bui-Table',\n header: 'bui-TableHeader',\n body: 'bui-TableBody',\n row: 'bui-TableRow',\n head: 'bui-TableHead',\n headContent: 'bui-TableHeadContent',\n headSortButton: 'bui-TableHeadSortButton',\n caption: 'bui-TableCaption',\n cell: 'bui-TableCell',\n cellContentWrapper: 'bui-TableCellContentWrapper',\n cellContent: 'bui-TableCellContent',\n cellIcon: 'bui-TableCellIcon',\n cellProfileAvatar: 'bui-TableCellProfileAvatar',\n cellProfileAvatarImage: 'bui-TableCellProfileAvatarImage',\n cellProfileAvatarFallback: 'bui-TableCellProfileAvatarFallback',\n cellProfileName: 'bui-TableCellProfileName',\n cellProfileLink: 'bui-TableCellProfileLink',\n },\n },\n TablePagination: {\n classNames: {\n root: 'bui-TablePagination',\n left: 'bui-TablePaginationLeft',\n right: 'bui-TablePaginationRight',\n select: 'bui-TablePaginationSelect',\n },\n },\n Tabs: {\n classNames: {\n tabs: 'bui-Tabs',\n tabList: 'bui-TabList',\n tabListWrapper: 'bui-TabListWrapper',\n tab: 'bui-Tab',\n tabActive: 'bui-TabActive',\n tabHovered: 'bui-TabHovered',\n panel: 'bui-TabPanel',\n },\n },\n TagGroup: {\n classNames: {\n group: 'bui-TagGroup',\n list: 'bui-TagList',\n tag: 'bui-Tag',\n tagIcon: 'bui-TagIcon',\n tagRemoveButton: 'bui-TagRemoveButton',\n },\n },\n Text: {\n classNames: {\n root: 'bui-Text',\n },\n dataAttributes: {\n variant: ['subtitle', 'body', 'caption', 'label'] as const,\n weight: ['regular', 'bold'] as const,\n color: ['primary', 'secondary', 'danger', 'warning', 'success'] as const,\n truncate: [true, false] as const,\n },\n },\n TextField: {\n classNames: {\n root: 'bui-TextField',\n inputWrapper: 'bui-InputWrapper',\n input: 'bui-Input',\n inputIcon: 'bui-InputIcon',\n inputAction: 'bui-InputAction',\n },\n dataAttributes: {\n invalid: [true, false] as const,\n disabled: [true, false] as const,\n size: ['small', 'medium'] as const,\n },\n },\n Tooltip: {\n classNames: {\n tooltip: 'bui-Tooltip',\n arrow: 'bui-TooltipArrow',\n },\n },\n VisuallyHidden: {\n classNames: {\n root: 'bui-VisuallyHidden',\n },\n },\n} as const satisfies Record<string, ComponentDefinition>;\n"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@backstage/ui",
|
|
3
|
-
"version": "0.9.0-next.
|
|
3
|
+
"version": "0.9.0-next.2",
|
|
4
4
|
"backstage": {
|
|
5
5
|
"role": "web-library"
|
|
6
6
|
},
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"react-aria-components": "^1.13.0"
|
|
48
48
|
},
|
|
49
49
|
"devDependencies": {
|
|
50
|
-
"@backstage/cli": "0.34.5-next.
|
|
50
|
+
"@backstage/cli": "0.34.5-next.1",
|
|
51
51
|
"@types/react": "^18.0.0",
|
|
52
52
|
"@types/react-dom": "^18.0.0",
|
|
53
53
|
"chalk": "^5.4.1",
|