@backstage/ui 0.0.0-nightly-20251201025645 → 0.0.0-nightly-20251202024405
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 +37 -1
- package/dist/components/Link/Link.esm.js +36 -10
- package/dist/components/Link/Link.esm.js.map +1 -1
- package/dist/components/Table/Table.module.css.esm.js +1 -1
- package/dist/components/Table/components/Cell.esm.js +3 -35
- package/dist/components/Table/components/Cell.esm.js.map +1 -1
- package/dist/components/Table/components/CellText.esm.js +87 -0
- package/dist/components/Table/components/CellText.esm.js.map +1 -0
- package/dist/index.d.ts +12 -1
- package/dist/index.esm.js +1 -0
- package/dist/index.esm.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,42 @@
|
|
|
1
1
|
# @backstage/ui
|
|
2
2
|
|
|
3
|
-
## 0.0.0-nightly-
|
|
3
|
+
## 0.0.0-nightly-20251202024405
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- 16543fa: **Breaking change** The `Cell` component has been refactored to be a generic wrapper component that accepts `children` for custom cell content. The text-specific functionality (previously part of `Cell`) has been moved to a new `CellText` component.
|
|
8
|
+
|
|
9
|
+
### Migration Guide
|
|
10
|
+
|
|
11
|
+
If you were using `Cell` with text-specific props (`title`, `description`, `leadingIcon`, `href`), you need to update your code to use `CellText` instead:
|
|
12
|
+
|
|
13
|
+
**Before:**
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
<Cell
|
|
17
|
+
title="My Title"
|
|
18
|
+
description="My description"
|
|
19
|
+
leadingIcon={<Icon />}
|
|
20
|
+
href="/path"
|
|
21
|
+
/>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
**After:**
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
<CellText
|
|
28
|
+
title="My Title"
|
|
29
|
+
description="My description"
|
|
30
|
+
leadingIcon={<Icon />}
|
|
31
|
+
href="/path"
|
|
32
|
+
/>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
For custom cell content, use the new generic `Cell` component:
|
|
36
|
+
|
|
37
|
+
```tsx
|
|
38
|
+
<Cell>{/* Your custom content */}</Cell>
|
|
39
|
+
```
|
|
4
40
|
|
|
5
41
|
### Patch Changes
|
|
6
42
|
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
|
-
import { forwardRef } from 'react';
|
|
3
|
-
import {
|
|
2
|
+
import { forwardRef, useRef } from 'react';
|
|
3
|
+
import { useLink } from 'react-aria';
|
|
4
|
+
import { RouterProvider } from 'react-aria-components';
|
|
4
5
|
import clsx from 'clsx';
|
|
5
6
|
import { useStyles } from '../../hooks/useStyles.esm.js';
|
|
6
7
|
import { LinkDefinition } from './definition.esm.js';
|
|
@@ -19,22 +20,47 @@ const Link = forwardRef((props, ref) => {
|
|
|
19
20
|
...props
|
|
20
21
|
}
|
|
21
22
|
);
|
|
22
|
-
const {
|
|
23
|
+
const {
|
|
24
|
+
className,
|
|
25
|
+
href,
|
|
26
|
+
title,
|
|
27
|
+
children,
|
|
28
|
+
onPress,
|
|
29
|
+
variant,
|
|
30
|
+
weight,
|
|
31
|
+
color,
|
|
32
|
+
truncate,
|
|
33
|
+
slot,
|
|
34
|
+
...restProps
|
|
35
|
+
} = cleanedProps;
|
|
23
36
|
const isExternal = isExternalLink(href);
|
|
24
|
-
const
|
|
25
|
-
|
|
37
|
+
const internalRef = useRef(null);
|
|
38
|
+
const linkRef = ref || internalRef;
|
|
39
|
+
const { linkProps } = useLink(
|
|
26
40
|
{
|
|
27
|
-
ref,
|
|
28
|
-
className: clsx(classNames.root, styles[classNames.root], className),
|
|
29
41
|
href,
|
|
30
|
-
|
|
42
|
+
onPress,
|
|
31
43
|
...restProps
|
|
44
|
+
},
|
|
45
|
+
linkRef
|
|
46
|
+
);
|
|
47
|
+
const anchorElement = /* @__PURE__ */ jsx(
|
|
48
|
+
"a",
|
|
49
|
+
{
|
|
50
|
+
...linkProps,
|
|
51
|
+
...dataAttributes,
|
|
52
|
+
...restProps,
|
|
53
|
+
ref: linkRef,
|
|
54
|
+
href,
|
|
55
|
+
title,
|
|
56
|
+
className: clsx(classNames.root, styles[classNames.root], className),
|
|
57
|
+
children
|
|
32
58
|
}
|
|
33
59
|
);
|
|
34
60
|
if (isExternal) {
|
|
35
|
-
return
|
|
61
|
+
return anchorElement;
|
|
36
62
|
}
|
|
37
|
-
return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children:
|
|
63
|
+
return /* @__PURE__ */ jsx(RouterProvider, { navigate, useHref, children: anchorElement });
|
|
38
64
|
});
|
|
39
65
|
Link.displayName = "Link";
|
|
40
66
|
|
|
@@ -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 {
|
|
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, useRef } from 'react';\nimport { useLink } from 'react-aria';\nimport { RouterProvider } from 'react-aria-components';\nimport clsx from 'clsx';\nimport { useStyles } from '../../hooks/useStyles';\nimport { LinkDefinition } from './definition';\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(\n LinkDefinition,\n {\n variant: 'body',\n weight: 'regular',\n color: 'primary',\n ...props,\n },\n );\n\n const {\n className,\n href,\n title,\n children,\n onPress,\n variant,\n weight,\n color,\n truncate,\n slot,\n ...restProps\n } = cleanedProps;\n\n const isExternal = isExternalLink(href);\n const internalRef = useRef<HTMLAnchorElement>(null);\n const linkRef = (ref || internalRef) as React.RefObject<HTMLAnchorElement>;\n\n // Use useLink hook to get link props\n const { linkProps } = useLink(\n {\n href,\n onPress,\n ...restProps,\n },\n linkRef,\n );\n\n const anchorElement = (\n <a\n {...linkProps}\n {...dataAttributes}\n {...(restProps as React.AnchorHTMLAttributes<HTMLAnchorElement>)}\n ref={linkRef}\n href={href}\n title={title}\n className={clsx(classNames.root, styles[classNames.root], className)}\n >\n {children}\n </a>\n );\n\n // If it's an external link, render without RouterProvider\n if (isExternal) {\n return anchorElement;\n }\n\n // For internal links, use RouterProvider\n return (\n <RouterProvider navigate={navigate} useHref={useHref}>\n {anchorElement}\n </RouterProvider>\n );\n});\n\nLink.displayName = 'Link';\n"],"names":[],"mappings":";;;;;;;;;;;AA4BO,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,SAAA;AAAA,IACnD,cAAA;AAAA,IACA;AAAA,MACE,OAAA,EAAS,MAAA;AAAA,MACT,MAAA,EAAQ,SAAA;AAAA,MACR,KAAA,EAAO,SAAA;AAAA,MACP,GAAG;AAAA;AACL,GACF;AAEA,EAAA,MAAM;AAAA,IACJ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,OAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAA;AAAA,IACA,GAAG;AAAA,GACL,GAAI,YAAA;AAEJ,EAAA,MAAM,UAAA,GAAa,eAAe,IAAI,CAAA;AACtC,EAAA,MAAM,WAAA,GAAc,OAA0B,IAAI,CAAA;AAClD,EAAA,MAAM,UAAW,GAAA,IAAO,WAAA;AAGxB,EAAA,MAAM,EAAE,WAAU,GAAI,OAAA;AAAA,IACpB;AAAA,MACE,IAAA;AAAA,MACA,OAAA;AAAA,MACA,GAAG;AAAA,KACL;AAAA,IACA;AAAA,GACF;AAEA,EAAA,MAAM,aAAA,mBACJ,GAAA;AAAA,IAAC,GAAA;AAAA,IAAA;AAAA,MACE,GAAG,SAAA;AAAA,MACH,GAAG,cAAA;AAAA,MACH,GAAI,SAAA;AAAA,MACL,GAAA,EAAK,OAAA;AAAA,MACL,IAAA;AAAA,MACA,KAAA;AAAA,MACA,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAElE;AAAA;AAAA,GACH;AAIF,EAAA,IAAI,UAAA,EAAY;AACd,IAAA,OAAO,aAAA;AAAA,EACT;AAGA,EAAA,uBACE,GAAA,CAAC,cAAA,EAAA,EAAe,QAAA,EAAoB,OAAA,EACjC,QAAA,EAAA,aAAA,EACH,CAAA;AAEJ,CAAC;AAED,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
|
|
@@ -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 .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-TableHeadSelection__2H6Yp {\n width: 40px;\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 &:hover {\n background-color: var(--bui-bg-tint-hover);\n }\n\n &[data-selected] {\n background-color: var(--bui-bg-tint-pressed);\n }\n\n &[data-pressed] {\n background-color: var(--bui-bg-tint-pressed);\n }\n\n &[data-disabled] {\n background-color: var(--bui-bg-tint-disabled);\n }\n\n &[data-react-aria-pressable='true'] {\n cursor: pointer;\n }\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-TableCellSelection__3g6Iz {\n width: 40px;\n }\n\n .Table-module_bui-TableCellContentWrapper__2zDK3 {\n display:
|
|
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 table-layout: fixed;\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-TableHeadSelection__2H6Yp {\n width: 40px;\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 &:hover {\n background-color: var(--bui-bg-tint-hover);\n }\n\n &[data-selected] {\n background-color: var(--bui-bg-tint-pressed);\n }\n\n &[data-pressed] {\n background-color: var(--bui-bg-tint-pressed);\n }\n\n &[data-disabled] {\n background-color: var(--bui-bg-tint-disabled);\n }\n\n &[data-react-aria-pressable='true'] {\n cursor: pointer;\n }\n }\n\n .Table-module_bui-TableCell__1C-Gr {\n padding: var(--bui-space-3);\n font-size: var(--bui-font-size-3);\n font-family: var(--bui-font-regular);\n font-weight: var(--bui-font-weight-regular);\n min-width: 0;\n overflow: hidden;\n }\n\n .Table-module_bui-TableCellSelection__3g6Iz {\n width: 40px;\n }\n\n .Table-module_bui-TableCellContentWrapper__2zDK3 {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: var(--bui-space-2);\n min-width: 0;\n width: 100%;\n max-width: 100%;\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 min-width: 0;\n flex: 1;\n overflow: hidden;\n max-width: 100%;\n }\n\n .Table-module_bui-TableCellContent__35knW > * {\n min-width: 0;\n max-width: 100%;\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
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-TableHeadSelection":"Table-module_bui-TableHeadSelection__2H6Yp","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-TableCellSelection":"Table-module_bui-TableCellSelection__3g6Iz","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
|
|
|
@@ -1,7 +1,5 @@
|
|
|
1
|
-
import { jsx
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
|
-
import { Text } from '../../Text/Text.esm.js';
|
|
4
|
-
import { Link } from '../../Link/Link.esm.js';
|
|
5
3
|
import { Cell as Cell$1 } from 'react-aria-components';
|
|
6
4
|
import { useStyles } from '../../../hooks/useStyles.esm.js';
|
|
7
5
|
import { TableDefinition } from '../definition.esm.js';
|
|
@@ -12,43 +10,13 @@ const Cell = (props) => {
|
|
|
12
10
|
color: "primary",
|
|
13
11
|
...props
|
|
14
12
|
});
|
|
15
|
-
const { className,
|
|
13
|
+
const { className, children, ...rest } = cleanedProps;
|
|
16
14
|
return /* @__PURE__ */ jsx(
|
|
17
15
|
Cell$1,
|
|
18
16
|
{
|
|
19
17
|
className: clsx(classNames.cell, styles[classNames.cell], className),
|
|
20
18
|
...rest,
|
|
21
|
-
children
|
|
22
|
-
"div",
|
|
23
|
-
{
|
|
24
|
-
className: clsx(
|
|
25
|
-
classNames.cellContentWrapper,
|
|
26
|
-
styles[classNames.cellContentWrapper]
|
|
27
|
-
),
|
|
28
|
-
children: [
|
|
29
|
-
leadingIcon && /* @__PURE__ */ jsx(
|
|
30
|
-
"div",
|
|
31
|
-
{
|
|
32
|
-
className: clsx(classNames.cellIcon, styles[classNames.cellIcon]),
|
|
33
|
-
children: leadingIcon
|
|
34
|
-
}
|
|
35
|
-
),
|
|
36
|
-
/* @__PURE__ */ jsxs(
|
|
37
|
-
"div",
|
|
38
|
-
{
|
|
39
|
-
className: clsx(
|
|
40
|
-
classNames.cellContent,
|
|
41
|
-
styles[classNames.cellContent]
|
|
42
|
-
),
|
|
43
|
-
children: [
|
|
44
|
-
href ? /* @__PURE__ */ jsx(Link, { href, variant: "body-medium", color, children: title }) : /* @__PURE__ */ jsx(Text, { as: "p", variant: "body-medium", color, children: title }),
|
|
45
|
-
description && /* @__PURE__ */ jsx(Text, { variant: "body-medium", color: "secondary", children: description })
|
|
46
|
-
]
|
|
47
|
-
}
|
|
48
|
-
)
|
|
49
|
-
]
|
|
50
|
-
}
|
|
51
|
-
)
|
|
19
|
+
children
|
|
52
20
|
}
|
|
53
21
|
);
|
|
54
22
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Cell.esm.js","sources":["../../../../src/components/Table/components/Cell.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 {
|
|
1
|
+
{"version":3,"file":"Cell.esm.js","sources":["../../../../src/components/Table/components/Cell.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 { Cell as ReactAriaCell } from 'react-aria-components';\nimport type { CellProps } from '../types';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport styles from '../Table.module.css';\n\n/** @public */\nconst Cell = (props: CellProps) => {\n const { classNames, cleanedProps } = useStyles(TableDefinition, {\n color: 'primary' as const,\n ...props,\n });\n const { className, children, ...rest } = cleanedProps;\n\n return (\n <ReactAriaCell\n className={clsx(classNames.cell, styles[classNames.cell], className)}\n {...rest}\n >\n {children}\n </ReactAriaCell>\n );\n};\n\nCell.displayName = 'Cell';\n\nexport { Cell };\n"],"names":["ReactAriaCell"],"mappings":";;;;;;;AAwBA,MAAM,IAAA,GAAO,CAAC,KAAA,KAAqB;AACjC,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,eAAA,EAAiB;AAAA,IAC9D,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,SAAA,EAAW,QAAA,EAAU,GAAG,MAAK,GAAI,YAAA;AAEzC,EAAA,uBACE,GAAA;AAAA,IAACA,MAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,KAAK,UAAA,CAAW,IAAA,EAAM,OAAO,UAAA,CAAW,IAAI,GAAG,SAAS,CAAA;AAAA,MAClE,GAAG,IAAA;AAAA,MAEH;AAAA;AAAA,GACH;AAEJ;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;;;;"}
|
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
|
+
import clsx from 'clsx';
|
|
3
|
+
import { Text } from '../../Text/Text.esm.js';
|
|
4
|
+
import { Link } from '../../Link/Link.esm.js';
|
|
5
|
+
import { Cell } from 'react-aria-components';
|
|
6
|
+
import { useStyles } from '../../../hooks/useStyles.esm.js';
|
|
7
|
+
import { TableDefinition } from '../definition.esm.js';
|
|
8
|
+
import styles from '../Table.module.css.esm.js';
|
|
9
|
+
|
|
10
|
+
const CellText = (props) => {
|
|
11
|
+
const { classNames, cleanedProps } = useStyles(TableDefinition, {
|
|
12
|
+
color: "primary",
|
|
13
|
+
...props
|
|
14
|
+
});
|
|
15
|
+
const { className, title, description, color, leadingIcon, href, ...rest } = cleanedProps;
|
|
16
|
+
return /* @__PURE__ */ jsx(
|
|
17
|
+
Cell,
|
|
18
|
+
{
|
|
19
|
+
className: clsx(classNames.cell, styles[classNames.cell], className),
|
|
20
|
+
...rest,
|
|
21
|
+
children: /* @__PURE__ */ jsxs(
|
|
22
|
+
"div",
|
|
23
|
+
{
|
|
24
|
+
className: clsx(
|
|
25
|
+
classNames.cellContentWrapper,
|
|
26
|
+
styles[classNames.cellContentWrapper]
|
|
27
|
+
),
|
|
28
|
+
children: [
|
|
29
|
+
leadingIcon && /* @__PURE__ */ jsx(
|
|
30
|
+
"div",
|
|
31
|
+
{
|
|
32
|
+
className: clsx(classNames.cellIcon, styles[classNames.cellIcon]),
|
|
33
|
+
children: leadingIcon
|
|
34
|
+
}
|
|
35
|
+
),
|
|
36
|
+
/* @__PURE__ */ jsxs(
|
|
37
|
+
"div",
|
|
38
|
+
{
|
|
39
|
+
className: clsx(
|
|
40
|
+
classNames.cellContent,
|
|
41
|
+
styles[classNames.cellContent]
|
|
42
|
+
),
|
|
43
|
+
children: [
|
|
44
|
+
href ? /* @__PURE__ */ jsx(
|
|
45
|
+
Link,
|
|
46
|
+
{
|
|
47
|
+
href,
|
|
48
|
+
variant: "body-medium",
|
|
49
|
+
color,
|
|
50
|
+
truncate: true,
|
|
51
|
+
title,
|
|
52
|
+
children: title
|
|
53
|
+
}
|
|
54
|
+
) : /* @__PURE__ */ jsx(
|
|
55
|
+
Text,
|
|
56
|
+
{
|
|
57
|
+
as: "p",
|
|
58
|
+
variant: "body-medium",
|
|
59
|
+
color,
|
|
60
|
+
truncate: true,
|
|
61
|
+
title,
|
|
62
|
+
children: title
|
|
63
|
+
}
|
|
64
|
+
),
|
|
65
|
+
description && /* @__PURE__ */ jsx(
|
|
66
|
+
Text,
|
|
67
|
+
{
|
|
68
|
+
variant: "body-medium",
|
|
69
|
+
color: "secondary",
|
|
70
|
+
truncate: true,
|
|
71
|
+
title: description,
|
|
72
|
+
children: description
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
]
|
|
76
|
+
}
|
|
77
|
+
)
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
)
|
|
81
|
+
}
|
|
82
|
+
);
|
|
83
|
+
};
|
|
84
|
+
CellText.displayName = "CellText";
|
|
85
|
+
|
|
86
|
+
export { CellText };
|
|
87
|
+
//# sourceMappingURL=CellText.esm.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CellText.esm.js","sources":["../../../../src/components/Table/components/CellText.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 { Text } from '../../Text';\nimport { Link } from '../../Link';\nimport { Cell as ReactAriaCell } from 'react-aria-components';\nimport type { CellTextProps } from '../types';\nimport { useStyles } from '../../../hooks/useStyles';\nimport { TableDefinition } from '../definition';\nimport styles from '../Table.module.css';\n\n/** @public */\nconst CellText = (props: CellTextProps) => {\n const { classNames, cleanedProps } = useStyles(TableDefinition, {\n color: 'primary' as const,\n ...props,\n });\n const { className, title, description, color, leadingIcon, href, ...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 {leadingIcon && (\n <div\n className={clsx(classNames.cellIcon, styles[classNames.cellIcon])}\n >\n {leadingIcon}\n </div>\n )}\n <div\n className={clsx(\n classNames.cellContent,\n styles[classNames.cellContent],\n )}\n >\n {href ? (\n <Link\n href={href}\n variant=\"body-medium\"\n color={color}\n truncate\n title={title}\n >\n {title}\n </Link>\n ) : (\n <Text\n as=\"p\"\n variant=\"body-medium\"\n color={color}\n truncate\n title={title}\n >\n {title}\n </Text>\n )}\n {description && (\n <Text\n variant=\"body-medium\"\n color=\"secondary\"\n truncate\n title={description}\n >\n {description}\n </Text>\n )}\n </div>\n </div>\n </ReactAriaCell>\n );\n};\n\nCellText.displayName = 'CellText';\n\nexport { CellText };\n"],"names":["ReactAriaCell"],"mappings":";;;;;;;;;AA0BA,MAAM,QAAA,GAAW,CAAC,KAAA,KAAyB;AACzC,EAAA,MAAM,EAAE,UAAA,EAAY,YAAA,EAAa,GAAI,UAAU,eAAA,EAAiB;AAAA,IAC9D,KAAA,EAAO,SAAA;AAAA,IACP,GAAG;AAAA,GACJ,CAAA;AACD,EAAA,MAAM,EAAE,WAAW,KAAA,EAAO,WAAA,EAAa,OAAO,WAAA,EAAa,IAAA,EAAM,GAAG,IAAA,EAAK,GACvE,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,WAAA,oBACC,GAAA;AAAA,cAAC,KAAA;AAAA,cAAA;AAAA,gBACC,WAAW,IAAA,CAAK,UAAA,CAAW,UAAU,MAAA,CAAO,UAAA,CAAW,QAAQ,CAAC,CAAA;AAAA,gBAE/D,QAAA,EAAA;AAAA;AAAA,aACH;AAAA,4BAEF,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,mBACC,GAAA;AAAA,oBAAC,IAAA;AAAA,oBAAA;AAAA,sBACC,IAAA;AAAA,sBACA,OAAA,EAAQ,aAAA;AAAA,sBACR,KAAA;AAAA,sBACA,QAAA,EAAQ,IAAA;AAAA,sBACR,KAAA;AAAA,sBAEC,QAAA,EAAA;AAAA;AAAA,mBACH,mBAEA,GAAA;AAAA,oBAAC,IAAA;AAAA,oBAAA;AAAA,sBACC,EAAA,EAAG,GAAA;AAAA,sBACH,OAAA,EAAQ,aAAA;AAAA,sBACR,KAAA;AAAA,sBACA,QAAA,EAAQ,IAAA;AAAA,sBACR,KAAA;AAAA,sBAEC,QAAA,EAAA;AAAA;AAAA,mBACH;AAAA,kBAED,WAAA,oBACC,GAAA;AAAA,oBAAC,IAAA;AAAA,oBAAA;AAAA,sBACC,OAAA,EAAQ,aAAA;AAAA,sBACR,KAAA,EAAM,WAAA;AAAA,sBACN,QAAA,EAAQ,IAAA;AAAA,sBACR,KAAA,EAAO,WAAA;AAAA,sBAEN,QAAA,EAAA;AAAA;AAAA;AACH;AAAA;AAAA;AAEJ;AAAA;AAAA;AACF;AAAA,GACF;AAEJ;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -824,6 +824,9 @@ declare const TableBody: <T extends object>(props: TableBodyProps<T>) => react_j
|
|
|
824
824
|
|
|
825
825
|
/** @public */
|
|
826
826
|
interface CellProps extends CellProps$1 {
|
|
827
|
+
}
|
|
828
|
+
/** @public */
|
|
829
|
+
interface CellTextProps extends CellProps$1 {
|
|
827
830
|
title: string;
|
|
828
831
|
description?: string;
|
|
829
832
|
color?: TextColors;
|
|
@@ -855,6 +858,12 @@ declare const Cell: {
|
|
|
855
858
|
displayName: string;
|
|
856
859
|
};
|
|
857
860
|
|
|
861
|
+
/** @public */
|
|
862
|
+
declare const CellText: {
|
|
863
|
+
(props: CellTextProps): react_jsx_runtime.JSX.Element;
|
|
864
|
+
displayName: string;
|
|
865
|
+
};
|
|
866
|
+
|
|
858
867
|
/** @public */
|
|
859
868
|
declare const CellProfile: (props: CellProfileProps) => react_jsx_runtime.JSX.Element;
|
|
860
869
|
|
|
@@ -1288,6 +1297,8 @@ interface LinkProps extends LinkProps$1 {
|
|
|
1288
1297
|
weight?: TextWeights | Partial<Record<Breakpoint, TextWeights>>;
|
|
1289
1298
|
color?: TextColors | TextColorStatus | Partial<Record<Breakpoint, TextColors | TextColorStatus>>;
|
|
1290
1299
|
truncate?: boolean;
|
|
1300
|
+
title?: string;
|
|
1301
|
+
children?: ReactNode;
|
|
1291
1302
|
}
|
|
1292
1303
|
|
|
1293
1304
|
/** @public */
|
|
@@ -1455,4 +1466,4 @@ declare const useBreakpoint: () => {
|
|
|
1455
1466
|
down: (key: Breakpoint) => boolean;
|
|
1456
1467
|
};
|
|
1457
1468
|
|
|
1458
|
-
export { Accordion, AccordionDefinition, AccordionGroup, type AccordionGroupProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AlignItems, Avatar, AvatarDefinition, type AvatarProps, type Border, type BorderRadius, Box, BoxDefinition, type BoxProps, type Breakpoint, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, type ButtonIconProps, ButtonLink, ButtonLinkDefinition, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardDefinition, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, Checkbox, CheckboxDefinition, type CheckboxProps, type ClassNamesMap, Column, type ColumnProps, type Columns, type ComponentDefinition, Container, ContainerDefinition, type ContainerProps, type DataAttributeValues, type DataAttributesMap, Dialog, DialogBody, type DialogBodyProps, DialogDefinition, DialogFooter, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, type Display, FieldLabel, FieldLabelDefinition, type FieldLabelProps, Flex, FlexDefinition, type FlexDirection, type FlexProps, type FlexWrap, Grid, GridDefinition, GridItemDefinition, type GridItemProps, type GridProps, Header, HeaderDefinition, HeaderPage, type HeaderPageBreadcrumb, HeaderPageDefinition, type HeaderPageProps, type HeaderProps, type HeaderTab, type JustifyContent, Link, LinkDefinition, type LinkProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuDefinition, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, type Option, Radio, RadioGroup, RadioGroupDefinition, type RadioGroupProps, type RadioProps, type Responsive, Row, SearchField, SearchFieldDefinition, type SearchFieldProps, Select, SelectDefinition, type SelectProps, Skeleton, SkeletonDefinition, type SkeletonProps, type Space, type SpaceProps, SubmenuTrigger, type SubmenuTriggerProps, Switch, SwitchDefinition, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, type TablePaginationProps, Tabs, TabsDefinition, type TabsProps, Tag, TagGroup, TagGroupDefinition, type TagGroupProps, type TagProps, Text, type TextColorStatus, type TextColors, TextDefinition, TextField, TextFieldDefinition, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, TooltipDefinition, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, VisuallyHidden, VisuallyHiddenDefinition, type VisuallyHiddenProps, useBreakpoint, useTable };
|
|
1469
|
+
export { Accordion, AccordionDefinition, AccordionGroup, type AccordionGroupProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type AlignItems, Avatar, AvatarDefinition, type AvatarProps, type Border, type BorderRadius, Box, BoxDefinition, type BoxProps, type Breakpoint, Button, ButtonDefinition, ButtonIcon, ButtonIconDefinition, type ButtonIconProps, ButtonLink, ButtonLinkDefinition, type ButtonLinkProps, type ButtonProps, Card, CardBody, type CardBodyProps, CardDefinition, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, Cell, CellProfile, type CellProfileProps, type CellProps, CellText, type CellTextProps, Checkbox, CheckboxDefinition, type CheckboxProps, type ClassNamesMap, Column, type ColumnProps, type Columns, type ComponentDefinition, Container, ContainerDefinition, type ContainerProps, type DataAttributeValues, type DataAttributesMap, Dialog, DialogBody, type DialogBodyProps, DialogDefinition, DialogFooter, DialogHeader, type DialogHeaderProps, type DialogProps, DialogTrigger, type DialogTriggerProps, type Display, FieldLabel, FieldLabelDefinition, type FieldLabelProps, Flex, FlexDefinition, type FlexDirection, type FlexProps, type FlexWrap, Grid, GridDefinition, GridItemDefinition, type GridItemProps, type GridProps, Header, HeaderDefinition, HeaderPage, type HeaderPageBreadcrumb, HeaderPageDefinition, type HeaderPageProps, type HeaderProps, type HeaderTab, type JustifyContent, Link, LinkDefinition, type LinkProps, Menu, MenuAutocomplete, type MenuAutocompleteListBoxProps, MenuAutocompleteListbox, type MenuAutocompleteProps, MenuDefinition, MenuItem, type MenuItemProps, MenuListBox, MenuListBoxItem, type MenuListBoxItemProps, type MenuListBoxProps, type MenuProps, MenuSection, type MenuSectionProps, MenuSeparator, type MenuSeparatorProps, MenuTrigger, type MenuTriggerProps, type Option, Radio, RadioGroup, RadioGroupDefinition, type RadioGroupProps, type RadioProps, type Responsive, Row, SearchField, SearchFieldDefinition, type SearchFieldProps, Select, SelectDefinition, type SelectProps, Skeleton, SkeletonDefinition, type SkeletonProps, type Space, type SpaceProps, SubmenuTrigger, type SubmenuTriggerProps, Switch, SwitchDefinition, type SwitchProps, Tab, TabList, type TabListProps, type TabMatchStrategy, TabPanel, type TabPanelProps, type TabProps, Table, TableBody, TableDefinition, TableHeader, TablePagination, TablePaginationDefinition, type TablePaginationProps, Tabs, TabsDefinition, type TabsProps, Tag, TagGroup, TagGroupDefinition, type TagGroupProps, type TagProps, Text, type TextColorStatus, type TextColors, TextDefinition, TextField, TextFieldDefinition, type TextFieldProps, type TextOwnProps, type TextProps, type TextVariants, type TextWeights, Tooltip, TooltipDefinition, type TooltipProps, TooltipTrigger, type UseTableConfig, type UseTablePagination, type UseTablePaginationConfig, type UseTableResult, type UtilityProps, VisuallyHidden, VisuallyHiddenDefinition, type VisuallyHiddenProps, useBreakpoint, useTable };
|
package/dist/index.esm.js
CHANGED
|
@@ -36,6 +36,7 @@ export { TableBody } from './components/Table/components/TableBody.esm.js';
|
|
|
36
36
|
export { Column } from './components/Table/components/Column.esm.js';
|
|
37
37
|
export { Row } from './components/Table/components/Row.esm.js';
|
|
38
38
|
export { Cell } from './components/Table/components/Cell.esm.js';
|
|
39
|
+
export { CellText } from './components/Table/components/CellText.esm.js';
|
|
39
40
|
export { CellProfile } from './components/Table/components/CellProfile.esm.js';
|
|
40
41
|
export { useTable } from './components/Table/hooks/useTable.esm.js';
|
|
41
42
|
export { TableDefinition } from './components/Table/definition.esm.js';
|
package/dist/index.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@backstage/ui",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20251202024405",
|
|
4
4
|
"backstage": {
|
|
5
5
|
"role": "web-library"
|
|
6
6
|
},
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"react-aria-components": "^1.13.0"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"@backstage/cli": "0.0.0-nightly-
|
|
49
|
+
"@backstage/cli": "0.0.0-nightly-20251202024405",
|
|
50
50
|
"@types/react": "^18.0.0",
|
|
51
51
|
"@types/react-dom": "^18.0.0",
|
|
52
52
|
"chalk": "^5.4.1",
|